/*-----기본-----*/
html{font-size:20px;}
body{font-size:1rem}
.tablet{display:none;}
.mob{display:none;}
#wrap{position:relative; line-height:1.5; overflow:hidden; }
#wrap img { border:none; }
#wrap i{vertical-align:inherit;}
.inn{width:1600px;margin:0 auto;}
@media (max-width:1600px){
.inn{width:100%;padding:0 3rem;}
}
/*헤더*/
#header{position:relative;display:flex;width:1750px;margin:0 auto;}
#header .header-left{flex-basis:15rem;border-right:1px solid #ddd;display:flex;justify-content:center;align-items:center;}
#header .header-con{flex-basis:calc(100% - 15rem);}
#header .header-con .header-con-top{position:relative;height:2.5rem;}
#header .header-con .header-con-top:after{content:'';display:block;position:absolute;height:1px;width:120%;bottom:0;background:#ddd;}
#header .header-con .header-con-bottom{display:flex;position:relative;}
#header .header-con .header-con-bottom .shop{background:#836cd0;color:#fff;line-height:3.2rem;padding:0 2rem;font-size:1rem;font-weight:500;}
#header .header-con .header-con-bottom ul li:nth-child(1),
#header .header-con .header-con-bottom ul li:nth-child(2),
#header .header-con .header-con-bottom ul li:nth-child(3),
#header .header-con .header-con-bottom ul li:nth-child(4){background:#f8f7fb}
#header .header-con .header-con-bottom ul li:nth-child(4){border-right:1px solid #ddd;}
#header:after{content:'';display:block;position:absolute;width:120%;height:1px;background:#ddd;bottom:0;left:-10%;}
#header .header-con .header-con-top .header-search {position:absolute;width:11.5rem;height:1.8rem;line-height:1.8rem;background:#eeeeee;border-radius:0.9rem;border:none;top:50%;transform:translateY(-50%);right:0;}
#header .header-con .header-con-top .header-search a{display:inline-block;width:0.85rem;height:0.85rem;background:url(/images/default/main/search-icon.png)no-repeat center center;background-size:cover;z-index:999;position:absolute;top:50%;transform:translateY(-50%);right:1.5rem;}
/*-----네비게이션-----*/
#header .header_inner #nav {}
#header .header_inner #nav{}
#header .header_inner #nav ul {clear:both; position:relative; box-sizing:border-box;height:100%;}
#header .header_inner #nav ul li { display:inline-block;width: auto; float:none; vertical-align:top;position:relative;}
#header .header_inner #nav ul li {position:relative; }
#header .header_inner #nav ul li a{text-align:center; color:#333; display:inline-block; height:3.2rem; line-height:3.2rem; text-transform: uppercase; position:relative;padding:0 2rem; transition: all .2s; -webkit-transition: all .2s;font-size:1.05rem; font-weight:600;}
#header .header_inner #nav ul li ul {z-index: 10;display:none; position: absolute; width:100%; left:0;top:3.2rem; padding:1.5rem 0 .5rem; box-sizing:border-box; text-align:center; background:#f8f7fb;height:auto; display: none; animation-name: slide_down; animation-duration:0.5s; animation-duration: linear; animation-direction: alternate; animation-fill-mode: forwards;}
#header .header_inner #nav ul li ul li {display:block;margin:0; margin-bottom:13px; line-height:1.5;}
#header .header_inner #nav ul li ul li a{display:block;color:#000; font-size:0.85rem; padding:0; height:auto; font-weight: 400; line-height:1.5; transition: all .2s; -webkit-transition: all .2s;}
#header .header_inner #nav ul li ul li a:before{content:""; display:block; clear:both;}
#header .header_inner #nav ul li ul li a:hover{color:#836cd0; }
#header .header_inner #nav ul li ul li a strong{color:#836cd0;}
#header .header_inner #nav ul li.on > div > a{color:#836cd0;font-weight:600;position:relative;}
#header .header_inner #nav ul li.on > div > a:after{content:'';display:block;position:absolute;width:100%;top:0;left:0;height:3px;background:#836cd0;}
#header .header_inner #nav ul li.active ul li:after{display:none;}
#header .header_inner #nav ul li.on > div > a:hover{background:#fff;}
#header .header_inner #nav ul li.on > div a{background:#fff;color:#836cd0}
/*-----회원서비스-----*/
.log_menu{position:absolute;right:12rem;top:50%;transform:translateY(-50%); color:#fff; font-size:0.8rem;}
.log_menu li{display:inline-block; margin-right:10px;}
.log_menu li a{color:#555555;font-weight:600;}
.log_menu li a em{display:inline-block;width:1rem;height:1rem;background:#ed0d0d;border-radius:50%;color:#fff;text-align:center;font-size:0.65rem;}
/*-----언어별-----*/
.lang-bx{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;}
.lang-bx li:not(:last-child){margin-right:1rem;}
.lang-bx li a{color:#888888;}
.lang-bx li.on a{color:#191919;font-weight:600;position:relative;}
.lang-bx li.on a:after{content:'';display:block;position:absolute;width:100%;height:2px;background:#191919;left:0;bottom:-0.5rem;}
/*-----사이트맵 버튼-----*/
#header .btn-gnb-menu{position:absolute; right:1rem; top:0; width:1.6rem; height:1.1rem; cursor:pointer; z-index:9999;text-align:center; -webkit-transition: all 0.25s; transition: all 0.25s;background: url(/images/default/main/sitemap-icon.png)no-repeat center center;top:50%;transform:translateY(-50%);}
#header.open .btn-gnb-menu{background: url(/images/default/main/sitemap-icon-x.png)no-repeat center center;}
#header .btnAll {position:relative; display:block; width:1.6rem; height:1.15rem; margin:0 auto; top:50%; transform:translateY(-50%);outline: none; z-index:9999;}
#header .btnAll span { display: inline-block; width: 100%; height: 2px; position: absolute; background-color: #fff; -webkit-transition: all 0.25s; transition: all 0.25s; }
@keyframes slide_down {
from {
transform: translateX(0px) translateY(-30px);
opacity:0;
}
to {
transform: translateX(0px) translateY(0px);
opacity:1;
}
}
/*사이트맵*/
#header #navi{background:#fff; position:fixed; top:-100%; right:0; width:20.5rem; height:100%; padding-top:0; overflow:hidden; z-index:20; transition:top 0.45s;}
#header.open #navi{transition:top 0.45s; top:0px;}
#header #navi .navi-logo{background:#f8f7fb;padding:3rem 9rem 1rem 0.75rem;}
#header #navi .navi-logo img{height:1.85rem;}
#header #navi .navi-menu {display:flex;}
#header #navi .navi-menu li{flex-basis:calc(100% / 3);text-align:center;border-top:1px solid #ddd;border-bottom:1px solid #ddd;}
#header #navi .navi-menu li a{font-size:.9rem;display:inline-block;width:100%;height:100%;padding:1rem;}
#header #navi .navi-menu li:not(:last-child){border-right:1px solid #ddd;}
#header #navi .shop .shop-bx{background:#836cd0;color:#fff;font-size:1rem;padding:1rem 1.5rem 1rem 3.5rem;font-weight:600;position:relative;}
#header #navi .shop .shop-bx:after{content:'';display:block;position:absolute;width:0.95rem;height:1rem;background:url(/images/default/main/shop-icon.png)no-repeat center center;background-size:cover;left:2rem;top:50%;transform:translateY(-50%);}
#header #navi .navi-menu-1 li{flex-basis:calc(100% / 2);}
#menuAll .top_menu{display:none;}
#menuAll h3{font-size:1.5rem; }
#menuAll .mobile_top{width:100%; height:100%; position:relative; background: #fff;}
#menuAll .mobile_top ul li{background:#fff;border-bottom:1px solid #ddd;}
#menuAll .mobile_top ul li a{display:inline-block;width:100%;height:100%;padding:1rem 2rem;}
#header #navi .shop ul li:last-child{border-bottom:10px solid #ddd;}
#header #navi .shop ul li{background:#f8f7fb;}
/*푸터*/
#footer .footer-top{background:#34313e;padding:1rem 0;}
#footer .footer-top ul {display:flex;}
#footer .footer-top ul li a{font-size:0.8rem;color:#fff;padding:0 1.25rem;position:relative;}
#footer .footer-top ul li:first-child a{padding-left:0;}
#footer .footer-top ul li:last-child a{padding-right:0;}
#footer .footer-top ul li:not(:last-child) a:after{content:'';display:block;position:absolute;height:0.7rem;width:1px;background:#fff;top:50%;transform:translateY(-50%);right:0;}
#footer .footer-top ul li.on a{color:#8d68fd;}
#footer .footer-bottom{padding:2.3rem 0 2.7rem ;}
#footer .footer-bottom .inn{display:flex;}
#footer .footer-bottom ul li{line-height:1;}
#footer .footer-bottom ul li:not(:last-child){margin-bottom:1rem;}
#footer .footer-bottom p.copy{font-size:0.85rem;color:#999;margin-top:1.8rem;}
#footer .footer-bottom h3{margin-right:5rem;}
@media (max-width:767px){
#footer .footer-top ul li:not(:last-child) a:after{display:none;}
#footer .footer-top .inn{padding:0 1rem;}
}
/*팝업 롤링 추가*/
.layerPopup {position:absolute;top:230px;left:10rem; width:450px; background:#fff;line-height:auto;z-index:99999;border:10px solid #15334F;box-shadow:0 0 4px rgba(0,0,0,0.2); padding-bottom:40px;}
.layerPopWrap{position:relative; width:100%; height:100%;}
.layerPopup ul li img{width:100%;}
/*탑버튼*/
#floating-banner{width:5rem;height:9.75rem; /*height: 6rem;*/ border:1px solid #ddd;border-radius:15px;position:absolute;right:0;top:50%;overflow:hidden;right:1rem;background:#fff;z-index:999;}
#floating-banner ul{height:calc(100% - 2rem);}
/*#floating-banner ul{height:calc(100% - -2rem);}*/
#floating-banner ul li {text-align:center;height:50%;position:relative;}
#floating-banner ul li:not(:last-child):after{content:'';position:absolute;width:calc(100% - 0.5rem);height:1px;background:#ddd;bottom:0;left:50%;transform:translateX(-50%);}
#floating-banner ul li a{font-size:0.75rem;display:block;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;}
#floating-banner ul li a img{display:block;margin:0 auto;margin-bottom:0.35rem;}
#floating-banner .top{position:absolute;width:100%;bottom:0;text-align:center;font-size:0.8rem;height:2rem;line-height:2rem;background:#836cd0;color:#fff;cursor:pointer;}
@media (max-width:1030px){
#floating-banner{display:none;}
}
/********************************************************
■ 레이아웃 변경
********************************************************/
@media (max-width:1750px){
#header{width:100%;}
#header .header_inner #nav ul li a{padding:0 1.5rem;}
.logo img{max-width:100%;}
#header .header-left{padding:1rem;}
}
@media (max-width:1600px){
#header .header_inner #nav ul li a{font-size:1rem;padding:0 1rem;}
#header .header-left{flex-basis:12rem;}
#header .header-con{flex-basis:calc(100% - 12rem);}
}
@media (max-width:1300px){
/*헤더*/
#header .header-left{flex-basis:9rem;}
#header .header-con{flex-basis:calc(100% - 9rem);}
#header .header_inner #nav ul li a{font-size:0.9rem;padding:0 0.75rem;}
}
/********************************************************
■ 태블릿
********************************************************/
@media (max-width:1030px){
html{font-size:16px;}
body{font-size:1rem}
#wrap{font-size:1rem;}
.tablet{display:block;}
/*헤더*/
#header h1{z-index:99;}
#header h1 img,
#footer h3 img{width: 10rem; vertical-align:middle; }
#header .header_inner {height: 4rem;}
#header .header_inner #nav {display: none;}
#header .header-con .header-con-top{display:none;}
#header .header-con .header-con-bottom .shop{display:none;}
#header .header-left{flex-basis:15rem;}
/*언어*/
.option_list{top:4rem;right:4rem;}
/*-----사이트맵 버튼-----*/
#header .btn-gnb-menu{width: 4rem; height: 4rem;}
#header.open .btn-gnb-menu{right:1rem;left:auto;}
#header.open .header-top{display:none;}
#header.open h1{left:1rem;}
/*-----회원서비스-----*/
#wrap .log_menu{display:none;}
#menuAll h3{text-align:center; padding:15px 0 10px; font-weight:normal; font-size:1.2rem; color:#fff;}
#menuAll .log{display:block; width: 100%; position:absolute; left:0; top:0; padding-left:1.5rem; box-sizing:border-box; z-index:10;}
#menuAll .log li{display:inline-block; height:4rem; line-height:4rem; color: #fff; position:relative;}
#menuAll .log li a{padding: 0 1rem;}
#menuAll .log li:after{right: .75rem; background: #000; width: 2px;}
#menuAll .log li b{font-size:1.1rem;}
#menuAll .log li.log_join a{padding-left:0;}
#menuAll .log li.log_join:after{content : ""; display : block; position : absolute; right:0; top: 35%; width :1px; height : 30%; background:rgba(255, 255, 255, .3);}
/*-----마이페이지-----*/
#menuAll .membership{display: block; background: #DC4976; margin-top:4rem;}
#menuAll .membership {clear:both;overflow:hidden; }
#menuAll .membership li {position: relative; float:left;width: 50%; border-bottom:1px solid rgba(255, 255, 255, .3); text-align:center; line-height:1;padding:1.3rem 0;}
#menuAll .membership li:after{content : ""; display : block; position : absolute; right:0; top: 0; width :1px; height : 100%; background:rgba(255, 255, 255, .3);}
#menuAll .membership li:nth-of-type(2n):after{display: none;}
#menuAll .membership li a{color:#fff;}
#menuAll .membership li i{vertical-align:middle; margin-right:5px; font-size:1.1rem;}
/*전체메뉴*/
#header #navi{overflow-y:scroll;}
/*1차*/
#menuAll .mobile_top .mbtop{border: 0; width: 100%; padding:0; }
#menuAll .mobile_top .mbtop > li{width: 100%; margin:0 !important;}
#menuAll .mobile_top .mbtop > li:before{display:none;}
#menuAll .mobile_top .mbtop > li > a{border:0; border-radius: 0; font-size:1.1rem; padding: 20px 1.5rem 14px; color:#333; }
#menuAll .mobile_top .mbtop > li > a:before{display:none;}
#navi ul.mbtop {width:100%; margin:0; padding:0;}
#navi ul.mbtop li{margin:0; float:none; width:100%; border-bottom:1px solid rgba(0, 0, 0, .1); position:relative;}
#navi ul.mbtop li:after{ content :"\e913"; display : block; position : absolute; right:1.5rem; top:1rem; font-size:1.15rem; font-family:'xeicon'; font-weight:500; color:#333; }
#navi ul.mbtop li.nosub:after{display:none;}
#navi ul.mbtop > li > a {padding:0; background: none; text-align:left; display:block; width:100%; padding: 1rem;box-sizing:border-box; font-size:1.15rem; font-weight: 700; color:#262626;}
#navi ul.mbtop li.open_li{position:relative;}
#navi ul.mbtop li.open_li > a{background:#836cd0;color:#fff;}
#navi ul.mbtop > li.open_li > a{}
#navi ul.mbtop li.open_li:after{ content :"\e91a";color:#fff;}
/*2차*/
#navi ul.mbtop li ul {display:none; float:none; background-color:#faf2fb; position:relative; left:0; top:0; width:auto; height:auto; visibility:visible; padding: 2rem 1.5rem; margin-top:0; margin-left: 0;}
#navi ul.mbtop li ul.on{display:block;}
#navi ul.mbtop li ul li {float:none;border:none; box-sizing:border-box; background: none; padding-left:0;}
#navi ul.mbtop li ul li a {background:url(none); height:auto; padding-left:0; font-size:1rem; color:#333;}
#navi ul.mbtop li ul li:after,
#navi ul.mbtop li ul li:before{display:none;}
/*3차*/
#navi ul.mbtop li ul li ul{display:none;border:none; height:0;background:none; margin:0; padding:0;}
#navi ul.mbtop li ul li ul li {display:none;}
/*팝업 롤링 추가*/
.layerPopup {left:50% !important; transform:translateX(-50%);}
/*푸터*/
#footer .footer-bottom .inn{display:block; padding:0 1rem;}
#footer .footer-bottom h3{margin-right:0; /*margin-bottom:2rem;*/}
}
/********************************************************
■ 모바일
********************************************************/
@media (max-width:767px){
html,body,#wrap{height:auto;}
html{font-size:15px;}
body{font-size:1rem; position:relative;}
.web{display:none;}
.mob{display:block;}
/*팝업 롤링 추가*/
.mobile_dim{width: 100%; height:100%; position: absolute; top: 0; left: 0; margin: 0; z-index: 1039; display: inline-block; background: rgba(0,0,0,0.5);}
.layerPopup img{width:100% !important;}
.layerPopup {left:5% !important; transform:translateX(0%); width:90% !important; height:auto !important; top:130px;}
.chkvsb{font-size:0.7rem !important;}
}