@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

.contain {width:1400px; margin:0 auto;}
.inConts {width:1320px; margin:0 auto;}

/* header */
#header {position:relative; z-index:100; border-bottom:1px solid #e5e5e5;}

.header .contain {position:relative; height:120px;}

.sitelogo {position:absolute; top:34px; left:0; width:250px;}

.top-search {position:absolute; top:50%; left:50%; width:540px; margin-top:-25px; margin-left:-270px;}
.top-search .input {display:block; width:100%; height:50px; padding:0 50px 0 26px; font-size:18px; font-weight:300; line-height:1.3em; background:#f8f8f8; border:1px solid #e5e5e5; border-radius:30px;}
.top-search .submit {position:absolute; top:8px; right:8px; width:34px; height:34px; background:#eb6867 url("../images/top_icon_search.png") 50% 50% no-repeat; border:0; border-radius:100%; overflow:hidden; text-indent:-999em;}

.top-link {position:absolute; top:50%; right:-4px; margin-top:-21px;}
.top-link ul {display:flex;}
.top-link ul li {margin-left:40px;}
.top-link ul li a {display:block; position:relative; width:42px; height:42px; background-position:50% 50%; background-repeat:no-repeat;}
.top-link ul li .ico-user {background-image:url("../images/top_icon_user.png");}
.top-link ul li .ico-order {background-image:url("../images/top_icon_shipping.png");}
.top-link ul li .ico-cart {background-image:url("../images/top_icon_cart.png");}
.top-link ul li .num {position:absolute; top:3px; right:-2px; min-width:20px; padding:0 2px; text-align:center; color:#fff; font-family:"Roboto",sans-serif; font-size:12px; font-weight:700; line-height:20px; background:#eb6867; border-radius:10px;}

.gnb-wrap .contain {position:relative; height:59px;}

.top-delivery-choice {position:absolute; top:0; left:0; display:flex; align-items:center; width:230px; height:59px; padding:0 15px 0 17px; background:#38859b; border-radius:20px 20px 0 0; z-index:2;}
.top-delivery-choice .menu-bar {display:block; width:22px; height:22px; margin-right:10px; background:url("../images/top_icon_menu.png") 50% 50% no-repeat;}
.top-delivery-choice .menu-bar.active {background-image:url("../images/top_icon_close.png");}
.top-delivery-choice .txt {flex:1 1 auto; min-width:0; width:1%; color:#fff; font-weight:500; font-size:16px;}
.top-delivery-choice .delivery-select {position:relative; width:100px;}
.top-delivery-choice .delivery-select .dropdown-input {cursor:pointer; padding:0 12px; font-weight:300; font-size:16px; line-height:30px; background:#fff url("../images/top_icon_select.png") right 10px center no-repeat; border-radius:10px 10px 0 10px;}
.top-delivery-choice .delivery-select .dropdown-list {display:none; position:absolute; left:0; width:100%; padding:4px; margin-top:2px; background:#fff; border-radius:10px 0 10px 10px; border:1px solid #e5e5e5; overflow:hidden;}
.top-delivery-choice .delivery-select .dropdown-list li {margin-bottom:2px;}
.top-delivery-choice .delivery-select .dropdown-list li:last-child {margin-bottom:0;}
.top-delivery-choice .delivery-select .dropdown-list li a {display:block; font-weight:300; font-size:15.8px; line-height:26px; padding:0 7px;}
.top-delivery-choice .delivery-select .dropdown-list li a:hover {color:#fff; background:#eb6867}
.top-delivery-choice .delivery-select.active .dropdown-list {display:block;}

.gnb {margin:0 290px 0 266px;}
.gnb > ul {display:flex;}
.gnb > ul > li {margin-right:43px;}
.gnb > ul > li:last-child {margin-right:0;}
.gnb > ul > li > a {display:block; position:relative; font-size:18px; font-weight:400; line-height:59px;}
.gnb > ul > li > a:after {content:""; position:absolute; bottom:5px; left:50%; margin-left:-5px; width:10px; height:10px; background:#eb6867; opacity:0; transition:.2s; border-radius:100%;}
.gnb > ul > li > a:hover::after {bottom:-6px; opacity:1;}

.top-link2 {position:absolute; top:50%; right:0; margin-top:-15px;}
.top-link2 ul {display:flex;}
.top-link2 ul li {position:relative; padding-left:45px;}
.top-link2 ul li:before {content:""; position:absolute; top:50%; left:22px; margin-top:-8px; width:1px; height:16px; background:#ccc;}
.top-link2 ul li:first-child {padding-left:0;}
.top-link2 ul li:first-child::before {display:none;}
.top-link2 ul li a {display:block; font-size:16px; line-height:30px;}

.top-categorys {position:absolute; left:0; width:230px;}
.top-categorys .depth1 {display:none; position:relative; width:230px; border:1px solid #e5e5e5; border-bottom:0; background:#f8f8f8;}
.top-categorys .depth1 > ul > li {padding:5px 4px; border-bottom:1px solid #e5e5e5;}
.top-categorys .depth1 > ul > li:first-child {padding-top:6px;}
.top-categorys .depth1 > ul > li > a {display:flex; align-items:center; width:100%; height:51px; padding:0 30px 0 19px; font-size:18px; font-weight:500; line-height:1.3em; background:url("../images/top_nav_arrow1_off.png") right 14px center no-repeat;}
.top-categorys .depth1 > ul > li.active > a {color:#fff; background-color:#eb6867; background-image:url("../images/top_nav_arrow1_on.png");}
.top-categorys .depth2 {display:none !important;}
.top-categorys .depth3 {display:none !important;}
.top-categorys .depth-layer {display:none; position:absolute; top:0; bottom:0; width:175px; background:#fff; border:1px solid #e5e5e5; border-left:0; overflow:auto;}
.top-categorys .depth-layer > ul {padding:15px 18px 15px 24px;}
.top-categorys .depth-layer > ul > li > a {display:block; padding:7px 0; font-size:16px; font-weight:300; line-height:22px;}
.top-categorys .depth-layer > ul > li.active > a {background:url("../images/top_nav_arrow2_on.png") right center no-repeat;}
.top-categorys .depth-layer#depth2 {left:230px;}
.top-categorys .depth-layer#depth3 {left:405px;}
#main .top-categorys .depth1 {display:block !important;}


/* main */
.main-visual {position:relative; border-bottom:1px solid #e5e5e5; overflow:hidden;}
.main-visual .swiper-container {padding-left:230px;}
.main-visual .swiper-slide {width:1170px;}
.main-visual .slide-btn {position:absolute; top:50%; margin-top:-32px; width:64px; height:64px; background-position:50% 50%; background-repeat:no-repeat; z-index:50;}
.main-visual .slide-btn.prev {left:50%; margin-left:-467px; background-image:url("../images/mv_prev.png");}
.main-visual .slide-btn.next {right:50%; margin-right:-694px; background-image:url("../images/mv_next.png");}
.main-visual .cover-prev {position:absolute; top:0; right:50%; bottom:0; left:0; background:rgba(0,0,0,0.4); margin-right:700px; z-index:50;}
.main-visual .cover-prev:after {content:""; position:absolute; top:0; right:0; bottom:0; width:26px; background:linear-gradient(to right, transparent 50%, #000000 100%); opacity:.1;}
.main-visual .cover-next {position:absolute; top:0; left:50%; bottom:0; right:0; background:rgba(0,0,0,0.4); margin-left:700px; z-index:50;}
.main-visual .cover-next:after {content:""; position:absolute; top:0; left:0; bottom:0; width:26px; background:linear-gradient(to right, #000000 0, transparent 50%); opacity:.1;}
.main-visual .control {position:absolute; bottom:30px; left:50%; display:flex; align-items:center; margin-left:-435px; padding:0 22px; font-family:"Roboto",sans-serif; color:#666; font-size:16px; font-weight:700; line-height:35px; z-index:50; background:rgba(255,255,255,.5); border-radius:20px; text-align:center;}
.main-visual .control .btn-stop {margin:0 -2px; width:14px; height:14px; background:url("../images/mv_stop.png") 50% 50% no-repeat;}
.main-visual .control .btn-play {margin:0 -2px; width:14px; height:14px; background:url("../images/mv_play.png") 50% 50% no-repeat; display:none;}
.main-visual .control .pager {position:relative; padding-left:14px; margin-left:14px;}
.main-visual .control .pager:before {content:""; position:absolute; top:50%; left:0; width:1px; height:18px; background:#e5e5e5; margin-top:-9px;}
.main-visual .control .bar {font-weight:300;}

.main-category{background-color:#f4f6f8;}
.main-category ul{display:flex;overflow-x:auto;justify-content: center;}
.main-category ul li{width:165px;height:166px;text-align:center;border-top:4px solid transparent;transition:all 0.3s ease-out;position:relative;}
.main-category ul li+li::after{content:"";display:inline-block;margin-top:-37px;width:1px;height:74px;border-left:1px dashed #d0d8df;position:absolute;left:0;top:50%}
.main-category ul li a{display:inline-block;padding:20px 0;width:100%;line-height:1.4;}
.main-category ul li .main-cate-icon{display:inline-block;width:100%;margin-bottom:10px;}
.main-category ul li .main-cate-icon img{-webkit-filter: brightness(0) saturate(100%) invert(20%) sepia(1%) saturate(3488%) hue-rotate(314deg) brightness(97%) contrast(75%);filter: brightness(0) saturate(100%) invert(20%) sepia(1%) saturate(3488%) hue-rotate(314deg) brightness(97%) contrast(75%); width: 70px;}
.main-category ul li:hover{border-color:var(--point);background-color:#fff;}
.main-category ul li:hover a{font-weight:700;color:var(--point);}
.main-category ul li:hover .main-cate-icon img{-webkit-filter:none;filter:none; width: 70px;}

.main-personal {padding:43px 0 47px; overflow:hidden;}
.main-personal .row {display:flex; margin:0 -20px;}
.main-personal .col {width:100%; padding:0 20px;}
.main-personal .box {height:100%; padding:24px 39px 60px; border:1px solid #e5e5e5;}
.main-personal h2 {text-align:center; font-size:28px; line-height:1.2em; letter-spacing:-.025em; margin-bottom:23px;}
.main-personal .goods-list {padding:0;}
.main-personal .goods-list > ul > li {width:25%;}

.main-special {padding:43px 0 47px; overflow:hidden;}
.main-special .row {display:flex; margin:0 -20px;}
.main-special .col {width:50%; padding:0 20px;}
.main-special .box {height:100%; padding:24px 39px 60px; border:1px solid #e5e5e5;}
.main-special h2 {text-align:center; font-size:28px; line-height:1.2em; letter-spacing:-.025em; margin-bottom:23px;}
.main-special .goods-list {padding:0;}
.main-special .goods-list > ul > li {width:50%;}

.main-event {position:relative; padding:40px 0; border-top:1px solid #e5e5e5;}
.bottom-event {margin-bottom:90px;}

.event-slider {position:relative; overflow:hidden;}
.event-slider .swiper-slide {width:640px;}
.event-slider .slide-btn {position:absolute; top:50%; margin-top:-41px; width:82px; height:82px; background-position:50% 50%; background-repeat:no-repeat; z-index:50;}
.event-slider .slide-btn.prev {left:50%; margin-left:-393px; background-image:url("../images/main_event_prev.png");}
.event-slider .slide-btn.next {right:50%; margin-right:-393px; background-image:url("../images/main_event_next.png");}

.main-best {margin-bottom:110px;}
.main-best .head {height:240px; padding:48px 0 0 0; color:#fff; background:#38859b /*url("../images/main_best_bg.jpg") 50% 0 no-repeat*/;}
.main-best .head h2 {margin:0 0 21px 8px; font-family:"Roboto",sans-serif; font-size:40px; font-weight:300; line-height:1.2em; letter-spacing:.1em;}
.main-best .head .tab {margin-left:29px;}
.main-best .head .tab ul {display:flex;}
.main-best .head .tab ul li a {display:block; font-size:16px; font-weight:300; line-height:34px; letter-spacing:-.01em; padding:0 19px; border-radius:20px;}
.main-best .head .tab ul li.active a {background:#fff; color:#eb6867; font-weight:700;}
.main-best .cont {position:relative; margin-top:-72px;}

.main-thema {margin-bottom:85px;}
.main-thema .head {text-align:center; margin-bottom:17px;}
.main-thema .head h2 {font-family:"Roboto",sans-serif; font-size:60px; line-height:1.2em;}
.main-thema .head p {font-size:28px; font-weight:700; line-height:1.2em;}
.main-thema .nav {position:relative; padding:12px 16px; margin-bottom:47px; border:1px solid #e5e5e5; border-radius:30px;}
.main-thema .nav ul {display:flex;}
.main-thema .nav ul li a {display:block; font-size:18px; font-weight:300; line-height:34px; padding:0 35px; border-radius:20px;}
.main-thema .nav ul li.active a {color:#fff; font-weight:700; background:#38859b}
.main-thema .nav .arrows {position:absolute; top:50%; right:14px; margin-top:-17px; display:flex;}
.main-thema .nav .arrows:before {content:""; position:absolute; top:50%; left:50%; width:1px; height:18px; background:#e5e5e5; margin-top:-9px;}
.main-thema .nav .arrows a {width:39px; height:34px; background-position:50% 50%; background-repeat:no-repeat;}
.main-thema .nav .arrows .prev {background-image:url("../images/slide_prev.png");}
.main-thema .nav .arrows .next {background-image:url("../images/slide_next.png"); margin-left:1px;}
.main-thema .cont {padding:0 40px;}

.main-sale {margin-bottom:83px;}
.main-sale .contain {display:flex;}
.main-sale .banner {width:640px; margin-right:31px;}
.main-sale .banner img {border-radius:20px 0 0 20px;}
.main-sale .slider {position:relative; flex:1 1 auto; min-width:0; width:1%; border:1px solid #e5e5e5; border-radius:0 20px 20px 0; padding:29px 39px;}
.main-sale .slider h2 {font-size:24px; font-weight:500; line-height:1.2em; letter-spacing:-.02em; margin-bottom:17px;}
.main-sale .slider .arrows {position:absolute; top:33px; right:44px; display:flex; border:1px solid #e5e5e5; border-radius:20px;}
.main-sale .slider .arrows:before {content:""; position:absolute; top:50%; left:50%; width:1px; height:14px; background:#e5e5e5; margin-top:-7px;}
.main-sale .slider .arrows a {width:28px; height:24px; background-position:50% 50%; background-repeat:no-repeat;}
.main-sale .slider .arrows .prev {background-image:url("../images/slide2_prev.png");}
.main-sale .slider .arrows .next {background-image:url("../images/slide2_next.png"); margin-left:1px;}

.main-realtime .wrap {position:relative; padding:28px 39px 50px; border:1px solid #e5e5e5; border-bottom:0; border-radius:20px 20px 0 0;}
.main-realtime h2 {font-size:18px; font-weight:500; line-height:1.2em; letter-spacing:-.02em; margin-bottom:15px; margin-left:-8px;}
.main-realtime h2 .now {display:inline-block; vertical-align:middle; margin:-.2em 10px 0 0; padding:0 28px; color:#fff; font-size:16px; font-weight:700; line-height:34px; background:#38859b; border-radius:20px;}
.main-realtime .arrows {position:absolute; top:35px; right:44px; display:flex; border:1px solid #e5e5e5; border-radius:20px;}
.main-realtime .arrows:before {content:""; position:absolute; top:50%; left:50%; width:1px; height:14px; background:#e5e5e5; margin-top:-7px;}
.main-realtime .arrows a {width:28px; height:24px; background-position:50% 50%; background-repeat:no-repeat;}
.main-realtime .arrows .prev {background-image:url("../images/slide2_prev.png");}
.main-realtime .arrows .next {background-image:url("../images/slide2_next.png"); margin-left:1px;}

/* sub */
.sub-visual {position:relative; border-bottom:1px solid #e5e5e5; overflow:hidden;}
.sub-visual .swiper-slide {width:1400px;}
.sub-visual .slide-btn {position:absolute; top:50%; margin-top:-32px; width:64px; height:64px; background-position:50% 50%; background-repeat:no-repeat; z-index:50;}
.sub-visual .slide-btn.prev {left:50%; margin-left:-694px; background-image:url("../images/mv_prev.png");}
.sub-visual .slide-btn.next {right:50%; margin-right:-694px; background-image:url("../images/mv_next.png");}
.sub-visual .cover-prev {position:absolute; top:0; right:50%; bottom:0; left:0; background:rgba(0,0,0,0.4); margin-right:700px; z-index:50;}
.sub-visual .cover-prev:after {content:""; position:absolute; top:0; right:0; bottom:0; width:26px; background:linear-gradient(to right, transparent 50%, #000000 100%); opacity:.1;}
.sub-visual .cover-next {position:absolute; top:0; left:50%; bottom:0; right:0; background:rgba(0,0,0,0.4); margin-left:700px; z-index:50;}
.sub-visual .cover-next:after {content:""; position:absolute; top:0; left:0; bottom:0; width:26px; background:linear-gradient(to right, #000000 0, transparent 50%); opacity:.1;}
.sub-visual .control {position:absolute; bottom:30px; left:50%; display:flex; align-items:center; margin-left:-663px; padding:0 22px; font-family:"Roboto",sans-serif; color:#666; font-size:16px; font-weight:700; line-height:35px; z-index:50; background:rgba(255,255,255,.5); border-radius:20px; text-align:center;}
.sub-visual .control .btn-stop {margin:0 -2px; width:14px; height:14px; background:url("../images/mv_stop.png") 50% 50% no-repeat;}
.sub-visual .control .btn-play {margin:0 -2px; width:14px; height:14px; background:url("../images/mv_play.png") 50% 50% no-repeat; display:none;}
.sub-visual .control .pager {position:relative; padding-left:14px; margin-left:14px;}
.sub-visual .control .pager:before {content:""; position:absolute; top:50%; left:0; width:1px; height:18px; background:#e5e5e5; margin-top:-9px;}
.sub-visual .control .bar {font-weight:300;}

.path-wrap {position:relative; border-bottom:1px solid #e5e5e5; z-index:50;}
.path-wrap .contain {display:flex;}
.path-wrap .home a {display:block; overflow:hidden; text-indent:-999em; width:51px; height:48px; border-left:1px solid #e5e5e5; border-right:1px solid #e5e5e5; background:url("../images/path_home.png") 50% 50% no-repeat;}
.path-wrap .path {position:relative; min-width:240px; border-right:1px solid #e5e5e5;}
.path-wrap .path > a {display:block; position:relative; height:48px; color:#000; line-height:48px; font-size:16px; font-weight:300; padding:0 50px 0 18px;}
.path-wrap .path > a:after {content:""; position:absolute; top:50%; right:16px; margin-top:-7px; width:15px; height:14px; background:url("../images/path_down.png") 50% 50% no-repeat;}
.path-wrap .path ul {display:none; position:absolute; left:-1px; right:-1px; background:#fff; border:1px solid #e5e5e5;}
.path-wrap .path ul li {border-bottom:1px solid #e5e5e5;}
.path-wrap .path ul li:last-child {border-bottom:0;}
.path-wrap .path ul li a {display:block; padding:14px 18px; font-size:16px; font-weight:300; line-height:1.4em; letter-spacing:-.04em;}
.path-wrap .path ul li a:hover {background:#fafafa;}

.sub-title {text-align:center; margin-bottom:55px;}
.sub-title h2 {font-size:45px; line-height:1.3em; letter-spacing:-.02em;}
.sub-title .tabs {display:inline-flex; margin-top:25px;}
.sub-title .tabs li {margin-left:5px; min-width:80px; text-align:center; color:#eb6867; font-size:16px; font-weight:300; line-height:32px; padding:0 10px; border:1px solid #eb6867; border-radius:10px;}
.sub-title .tabs li:first-child {margin-bottom:0;}

.real-cont {padding-bottom:100px; padding-top:66px; min-height:300px;}

.contain.cont {padding-left:40px; padding-right:40px;}
.contain.cont .goods-list {padding:0;}
.contain.mgb {margin-bottom:140px;}

.lnb {text-align:center; margin-bottom:40px;}
.lnb ul {display:flex; border:1px solid #e5e5e5; background:#fff;}
.lnb ul li {flex:1; padding:4px; border-left:1px solid #e5e5e5;}
.lnb ul li:first-child {border-left:0;}
.lnb ul li a {display:block; color:#000; font-size:18px; font-weight:300; line-height:50px; text-decoration:none !important;}
.lnb ul li.active a {background:#eb6867; color:#fff;}

/* footer */
#footer {font-size:14px; font-weight:300; line-height:20px;}

.foot-links {border-bottom:1px solid #e5e5e5; border-top:1px solid #e5e5e5;}
.foot-links .contain {position:relative; padding:0 22px;}
.foot-links ul {display:flex;}
.foot-links ul li {margin-left:40px;}
.foot-links ul li:first-child {margin-left:0;}
.foot-links ul li a {display:block; font-size:18px; line-height:58px; letter-spacing:-.025em;}
.foot-links ul li a strong {color:#eb6867; font-weight:400;}
.foot-links .goto {position:absolute; top:0; right:0; width:50px; height:100%; padding:34px 0 0 0; text-align:center; color:#999; font-family:"Roboto",sans-serif; font-size:12px; line-height:1em; background:url("../images/go_top.png") 50% 17px no-repeat;}

.foot-info {padding:55px 0; font-size:14px; font-weight:300; letter-spacing:-.015em; line-height:1.45em;}
.foot-info .contain {display:flex; padding:0 22px; justify-content:space-between;}
.foot-info .tt {font-size:24px; line-height:1.3em; margin-bottom:18px;}

.f-comp address {font-style:normal;}
.f-comp span {display:inline-block;}
.f-comp .bar {position:relative; margin:0 13px; color:#999; font-size:12px; font-weight:100; top:-.15em;}
.f-comp .copyright {color:#666; font-size:12px; font-weight:400; line-height:1.3em; letter-spacing:0; margin-top:10px;}
.f-comp .sns {margin-top:12px;}
.f-comp .sns a {margin-right:8px;}

.f-cs .tel {font-family:"Roboto",sans-serif; color:#38859b; font-size:40px; font-weight:700; line-height:1em; margin-top:-5px; margin-bottom:20px;}
.f-cs dl {display:flex; align-items:center; margin-bottom:20px;}
.f-cs dl:last-child {margin-bottom:0;}
.f-cs dt {width:160px; height:40px; margin-right:14px; text-align:center; line-height:38px; border:1px solid #e5e5e5; font-size:16px; font-weight:400;}
.f-cs dd {flex:1 1 auto; min-width:0; width:1%;}

/* popup */
.pop-wrap {position:relative; border:1px solid #e5e5e5; background:#fff;}
.pop-title {border-bottom:1px solid #e5e5e5; padding:10px 13px;}
.pop-title h2 {color:#000; font-size:22px; line-height:1.3em;}
.pop-title h2.en {font-family:"Roboto",sans-serif; font-size:24px;}
.pop-content {padding:22px 19px; font-weight:300;}

.pop-btns {padding:45px 0 30px; text-align:center;}
.pop-btn {display:inline-block; min-width:160px; height:50px; margin:0 4px; vertical-align:middle; text-align:center; background:#fff; border:1px solid #e5e5e5; font-size:18px; line-height:48px;}
.pop-btn.focus {border-color:#666; background:#666; color:#fff;}

.pop-alert {padding:14px 0 0; display:flex; justify-content:center; align-items:center; font-size:16px; font-weight:300; line-height:26px;}
.pop-alert .icon {margin-right:18px;}
.pop-alert + .pop-btns {padding:30px 0 48px;}

.pop-prd-name {text-align:center; padding:6px 0 28px; font-size:26px; font-weight:700; line-height:1.4em; letter-spacing:-.025em;}

.pop-cancel-wrap {border-top:2px solid #ccc;}
.pop-cancel-wrap h3 {font-size:20px; font-weight:500; line-height:1.4em; padding:17px;}