/* BASIC css start */ @charset "UTF-8"; /* .snbt_.tabs{height:40px;background:#32307A;border-top: 1px solid #5B5995;border-bottom: 1px solid #5B5995;margin-top:20px} .snbt_.tabs{width:auto;height:40px;max-width:100%;padding:0 15px;background:#32307A;} .snbt_.tabs .lst{overflow-y:hidden;overflow-x:scroll;width:100%;line-height:40px;white-space:nowrap;-webkit-overflow-scrolling:touch} .snbt_.tabs li{display:inline-block;padding: 0 20px 0 0;vertical-align:middle} .snbt_.tabs li a{display:block;color:#FFF;font-size:14px;font-weight:normal} .snbt_.tabs .lst::-webkit-scrollbar{ -webkit-appearance:none } */ .snbt_.tabs{height:40px;background:#000;border-top: 1px solid #FFF;border-bottom: 1px solid #FFF;margin-top:20px} .snbt_.tabs{width:auto;height:40px;max-width:100%;padding:0 15px;background:#000;} .snbt_.tabs .nav_tab{text-align: center;} .snbt_.tabs .nav_tab:after{clear:both;content:'';display:block;} .snbt_.tabs .nav_tab li{float:left;width:25%;line-height: 40px;} .snbt_.tabs .nav_tab li a{font-weight:bold;font-style: italic;color:#fff;display:block;} .menu_on{height:100%;overflow:hidden} .menu_off{height:auto;overflow:initial} #header{width:100%;background:#000} /* Header Extension */ #header .gnb{ height:28px;background:#1A171A;border-bottom:1px solid #363436;padding:0 15px} #header .gnb a{color:#999;font-size:11px} #header .gnb .rbx{float:right} #header .gnb .lbx{float:left} #header .gnb ul li{float:left;line-height:28px;margin-left:24px} #header .gnb ul li:first-child{margin-left:0} #header .gnb .bnr_toggle{display:block;width:38px;height:38px;background:#FAE1DE} #header .gnb .bnr_toggle span{width:12px;height:6px;margin:15px 0 0 12px;background-position:0 0} #header .gnb .bnr_toggle.on span{background-position:0 -20px} #header .gnb .bookmark span{width:10px;height:10px;margin-right:3px;background-position:-160px -40px;vertical-align:middle} #header .headerTop{position:relative;height:55px;text-align:center;margin-top:10px;} #header .headerTop i{vertical-align:middle;color:white} #header .headerTop h1 a{display:inline-block;line-height:1;padding-top:13px;vertical-align:top} #header .headerTop a.menu_toggle{position:absolute;top:0;left:0;width:55px;height:55px} #header .headerTop a.menu_toggle i{margin-top:15px} #header .headerTop a.menu_toggle .sp_{width:19px;height:20px;margin:16px 0 0 0;background-position:-30px -80px;background-size:320px} #header .headerTop a.cart{position:absolute;top:0;right:56px;width:auto;height:55px} #header .headerTop a.cart .sp_{width:19px;height:20px;margin:22px 0 0 0;background-position:-30px -80px;background-size:320px} #header .headerTop a.cart sup{width:16px;height:16px;background:#000;color:#fff;border-radius:50px;position:absolute;top:8px;right:-8px;text-align:center;line-height:16px} #header .headerTop a#search{position:absolute;top:0;right:0;width:55px;height:55px} #header .headerTop a.search_toggle{position:absolute;top:0;right:56px;width:auto;height:55px} #header .headerTop a.search_toggle .sp_{width:19px;height:18px;margin:22px 0 0 0;background-position:-60px -80px;background-size:320px} #header .mn_bx{overflow:hidden;width:100%;background:#405867} #header .mn_bx ul li{float:left;width:20%;text-align:center} #header .mn_bx ul li a{line-height:36px;color:#fff;font-size:15px;letter-spacing:-0.04em} #header .search{height:42px;position:relative;left:0;right:0;background-color:#333;padding-right:45px;text-align:center;display:none;z-index:10} #header .search .searchBox{width:100%} #header .search .searchBox input{width:90%;height:30px;border:0px none;margin-top:6px;padding:0 5px} #header .search .btn_search{width:45px;height:42px;line-height:50px;background-color:#222;position:absolute;top:0;right:0;color:#fff;text-align:center} /* 카테고리 */ aside{position:fixed;width:320px;height:100%;top:0;left:0;bottom:0;background:#fff;z-index:1001;box-shadow:2px 0 19px 0px #000000; -webkit-transform:translate3d(-360px,0,0); transform:translate3d(-360px,0,0); -webkit-transition:-webkit-transform .5s cubic-bezier(0.1, 0.57, 0.1, 1); transition:transform .5s cubic-bezier(0.1, 0.57, 0.1, 1) } aside .close{position:absolute;top:3px;right:-15px} aside .close a{color:#fff} aside .head{padding:0} aside .head h1{float:left;width:73px} aside .head h1 img{width:100%} aside .head .btn{overflow:hidden;margin:10px -15px -12px;border-top:1px solid #D1D8DE;border-bottom:1px solid #e2e2e2;background:#B1BFC7;text-align:center} aside .head .btn a{position:relative;float:left;width:20%;line-height:40px;text-align:center;color:#fff;font-size:12px;letter-spacing:-0.04em;border-left:1px solid #9FB0BB;box-sizing:border-box} aside .head .btn a:before{content:"";position:absolute;top:0;left:0;width:1px;height:100%;background:#D1D8DE} aside .head .btn a:first-child{margin-left:0} aside .head .btn a:first-child:before{display:none} aside .head .recent .swipe_slide .swipe_bx{width:auto} aside .head .recent .thumb, aside .head .recent .info{padding:0 3%} aside .head .recent .info .name{font-size:13px} aside .head .recent .no_item{padding:20px 0;text-align:center;color:#A7A7A7} aside .head .recent .no_item span{display:block;margin-top:10px} aside .head .recent .pager{margin-top:10px;width:100%;text-align:center} aside .head .recent .pager span{display:inline-block;width:4px;height:4px;margin:0 3px;background:#ADADAD;cursor:pointer;text-align:left;text-indent:-9999em; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px } aside .head .recent .pager .swiper-active-switch{background:#F05C91} aside .asideTop1{background:#000;padding-left:20px;} aside .asideTop1 a{line-height:40px;display:inline-block;color:white;font-weight:bold;text-align: center;width:20%;} aside .asideTop1 a .fa{margin-top:10px} aside .asideTop1 a.act{background:#1A171A} aside .asideMid{background:#fff;} aside .asideMid div{float:left;width:33%;text-align: center;} aside .asideMid div img{width:28%;} aside .asideMid div a{margin:10px 0;display:block;} aside .asideMid div p{font-size:15px;margin-top:7px;color:#333333} aside .asideMid .center_line{border-left:1px solid #ccc;border-right:1px solid #ccc;box-sizing:border-box;} aside .bx{position:relative;height:100%;padding:0;box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#F3F3F3} aside .bx::-webkit-scrollbar{ -webkit-appearance:none; } aside .bx::-webkit-scrollbar:vertical{ width:1px; } aside .bx::-webkit-scrollbar-thumb{ background-color:rgba(0, 0, 0, .6); border-radius:0; border:0 none; } aside .bx::-webkit-scrollbar-track{ border-radius:0; background-color:none; } aside nav li{border-bottom:1px solid #DEE1E4;position:relative;background:#FAFBFC} aside nav li a{display:block;height:40px;line-height:40px;padding:0 0 0 20px;margin-right:40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:700;text-align:center;color:#3F5866} aside nav li .fa{position:absolute;top:0;right:0;width:40px;text-align:center;height:35px;line-height:35px} aside nav li>ul{background:#f4f4f4;display:none;border-top:1px solid #6e6e6e} aside nav li>ul>li{border-bottom:0px none;border-top:1px solid #ccc} aside nav li>ul>li:first-child{border-top:0px none} aside nav li>ul>li a{padding:0 40px 0 30px;margin:0} aside nav li>ul>li>ul{border-top:0px none;border-top:1px solid #ccc} aside nav li>ul>li>ul>li{border-bottom:0px none} aside nav li>ul>li>ul>li a{padding:0 0 0 40px;margin:0;background:#DDDDDD} .commenuwrap{height:80px} .commenuwrap ul.commenu{} .commenuwrap ul.commenu li{width:50%;cursor:pointer;background:#fff;float:left;border-bottom:1px solid #D4D4D4;text-align:center;height:20px;padding:10px 0;display:inline-block;line-height:20px} .commenuwrap ul.commenu li.even{border-left:1px solid #D4D4D4;margin-left:-1px} .commenuwrap ul.commenu li a{font-size:15px;line-height:20px;color:#666666} .commenuwrap ul.commenu .sns a{display:inline-block;margin:-5px 10px 0} aside .asideBottom{bottom:0;left:0;width:100%} aside .asideBottom .quick{text-align:center;padding:20px 0;border-bottom:1px solid #D4D4D4;font-size:0} aside .asideBottom .quick li{display:inline-block;width:21%;margin:0} aside .asideBottom .quick a{display:block} aside .asideBottom .quick strong{display:block;margin-top:10px;font-size:12px;color:black;font-weight:400} aside .asideBottom .quick .best .sp_{width:29px;height:29px;margin:0;background-position:0 -40px;background-size:320px} aside .asideBottom .quick .review .sp_{width:27px;height:22px;margin:0;background-position:-40px -40px;background-size:320px} aside .asideBottom .quick .check .sp_{width:27px;height:25px;margin:0;background-position:-80px -40px;background-size:320px} aside .asideBottom .quick .membership .sp_{width:27px;height:26px;margin:0;background-position:-120px -40px;background-size:320px} .bottom_wrap{text-align:center;margin-top:20px;} .bottom_wrap .nav_sns a{display:inline-block;width:40px;} .bottom_wrap .nav_sns a:first-child{margin-right:10px;} .bottom_wrap .nav_sns img{width:100%;} .bottom_wrap .nav_foot{margin-top:15px;font-size:11px;color:#999999} /* 최근 본 상품 */ #ly_lastView{width:100%;position:absolute;top:36px;left:0;background:#fff;z-index:101;padding-bottom:20px;box-shadow:0 1px 10px #717171;display:none} @media screen and (min-width:768px){ #header #menu{width:85px} #header .headerTop{padding-right:85px} #header .search{padding-right:85px} #header .search .searchBox input{width:95%} #header .search .btn_search{width:85px} } #cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a{margin:0;padding:0;border:0;list-style:none;font-weight:normal;text-decoration:none;line-height:1;font-family:'Lato', sans-serif;font-size:14px;position:relative} #cssmenu a{line-height:24px;padding:6px 15px} #cssmenu{width:100%} #cssmenu>ul>li{cursor:pointer;background:#F3F3F3;border-bottom:1px solid #DEE1E4} #cssmenu>ul>li.title{cursor:default;background:#32307A;color:#fff;border-bottom:1px solid #32307A;height:20px;padding:10px 20px;display:block;font-size:15px;line-height:20px} #cssmenu>ul>li:last-child{} #cssmenu>ul>li>a{position:relative;height:20px;padding:10px 20px;display:block;font-size:14px;line-height:20px;color:#666} #cssmenu>ul>li>a:hover{text-decoration:none} #cssmenu>ul>li>a i{position:absolute;top:0;right:0;margin:14px 10px 0 0} #cssmenu>ul>li.active{border-bottom:none} #cssmenu>ul>li.active>a{height:20px;padding:10px 20px;display:block;font-size:15px;line-height:20px;color:#3F5866;border-bottom:1px solid #DEE1E4} #cssmenu>ul>li.has-sub>a:after{content:"";position:absolute;top:40%;right:18px} #cssmenu>ul>li.has-sub.active>a:after{right:22px;top:40%} #cssmenu ul ul{padding:0;display:none} #cssmenu ul ul a{width:100%;padding:10px 0;display:block;font-size:15px;color:#3F5866;border-bottom:1px solid #efefef;letter-spacing:0px;background:#fff} #cssmenu ul ul li{} #cssmenu ul ul li.odd a{} #cssmenu ul ul li:last-child{border:none} #cssmenu .banner a{padding:0} /*////////////////////////////////////////////*/ #cssmenu li{position:relative} #cssmenu .arrow{position:absolute;top:16px;right:10px;width:15px;height:1px;margin:7px 10px;background:black} #cssmenu .arrow:after{content:"";position:absolute;top:0;left:0;width:1px;height:15px;margin:-7px 0 0 7px;background:black; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:.25s ease-in-out; -moz-transition:.25s ease-in-out; -o-transition:.25s ease-in-out; transition:.25s ease-in-out } #cssmenu .arrow.mos{background:rgba(255, 255, 255, 0)} #cssmenu .arrow.mos:after{-webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); transform:rotate(-90deg) } #cssmenu .active .arrow{background:rgba(255, 255, 255, 0)} #cssmenu .active .arrow:after{-webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); transform:rotate(-90deg) } /* */ #quick{position:fixed;right:15px;bottom:15px;z-index:40} #quick span, #quick a{display:block} #quick .open_toggle{position:relative;left:0px;top:0px;z-index:40;width:46px;height:46px;background:#F05B92;border-radius:24px} #quick .open_toggle .ver{position:relative;left:23px;top:13px;width:1px;height:21px;background:#fff} #quick .open_toggle .hor{position:relative;left:13px;top:2px;width:21px;height:1px;background:#fff} #quick .open_toggle.open{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none} #quick .open_toggle.open .ver, #quick .open_toggle.open .hor{-webkit-animation:quickAnimation 0.5s 1 ease forwards} @-webkit-keyframes quickAnimation{ from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(135deg)} } #quick .qnav{position:absolute;right:-3px;top:-3px;width:0;height:52px;background:#F05B92;border-radius:26px;z-index:40;opacity:0} #quick .qnav ul{display:none;position:relative;margin:9px 0 0 17px} #quick .qnav.on ul{display:block} #quick .qnav li{position:relative;overflow:hidden;float:left;width:45px;height:35px;text-align:center;vertical-align:middle;border-right:1px solid #F271A1} #quick .qnav li:last-child{border-right:none} #quick .qnav li a{display:block;position:relative;top:30px;padding:5px 0;color:white;opacity:0.1} #quick .qnav li a i{vertical-align:middle;opacity:0.7} /* */ .top_bnr{position:relative} .top_bnr img{max-width:100%} .top_bnr .bnrwrap{position:absolute;right:0;bottom:0} /* */ #joinpoint{position:absolute;z-index:199;width:94px;height:12px;line-height:12px;color:#fff;margin:0 0 0 -21px;text-align:center;display:inline-block;padding:4px 0 0;left:53px; -webkit-animation:joinpointanimation 0.7s linear 1s infinite alternate;; } #joinpoint .text{display:inline-block; float:left;background:#00A9C0;border-radius:5px;color:#fff;margin:0;text-align:center;font-family:'arial';font-size:10px;font-weight:400; padding:4px} #joinpoint .arrow-up{margin-top:5px;display:inline-block; float:left;width:0;height:0;border-left: 4px solid transparent;border-bottom: 4px solid transparent;border-right: 4px solid #00A9C0;border-top: 4px solid transparent;} @-webkit-keyframes joinpointanimation{ 0% { opacity: 1.0; left:53px; } 100% { opacity: 1.0; left: 58px; } } /* BASIC css end */