/* BASIC css start */ /*====================================================================*/ /******************************* header *******************************/ /*====================================================================*/ header{position:fixed; top:0; left:0; width:100%; min-width:1200px; z-index:99; height:120px; background:#fff;} /* 상단띠배너*/ .header_evt_ban_wrap {width: 100%; position: relative;} .header_evt_ban_wrap .header_evt_content {position: relative; overflow: hidden; z-index:100;} .header_evt_ban_wrap .header_evt_content .evt_banner {position: absolute; left: 50%; margin-left: -1000px; width:2000px;} .header_evt_ban_wrap .evt_onoff_btn {width: 15px; height: 15px; background: url(/design/ablab/wib/img/header/top-event-close.png)no-repeat; position: absolute; top:22px; left: 50%; margin-left: 532px; z-index: 105; cursor: pointer;} /**************************** 좌측 ****************************/ /* 삼선버튼 */ #btn_allCate{display:inline-block; vertical-align:middle; position:relative; padding:8px 10px; cursor:pointer;} #btn_allCate strong{display:inline-block; vertical-align:middle; width:18px;} #btn_allCate strong span{display:block; width:100%; height:1px; margin:5px 0; background:#474852; -webkit-transition: 0.1s ease-in-out; -moz-transition: 0.1s ease-in-out; -o-transition: 0.1s ease-in-out; transition: 0.1s ease-in-out;} /* #btn_allCate strong span:nth-child(2){width:80%;} #btn_allCate:hover strong span:nth-child(1){width:80%;} #btn_allCate:hover strong span:nth-child(2){width:100%;} #btn_allCate:hover strong span:nth-child(3){width:90%;} */ /* 로고 */ #leftArea{position:absolute; top:40px; left:60px; font-size:0; line-height:0; letter-spacing:0;} h1.logo{display: inline-block;vertical-align: middle;padding: 50px 0;margin: 0 20px; position: absolute;left: calc(50% - 95px);text-align: center; -webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;} body.scroll header h1.logo { padding: 30px 0; -webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out; } h1.logo a{display:block; font-weight:800; font-size:22px; letter-spacing:1px; line-height:1;} h1.logo a img {width:150px;} /* 상단 대분류 */ #one_cate{display:inline-block; vertical-align:middle; opacity:1; visibility:visible; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; display: none; } #one_cate.hide{opacity:0; visibility:hidden;} #one_cate > .position > ul{font-size:0; line-height:0; letter-spacing:0;} #one_cate > .position > ul > li{display:inline-block; vertical-align:middle; position:relative;} #one_cate > .position > ul > li > a{display:block; font-size:15px; line-height:20px; padding:6px 12px 5px; letter-spacing:-0.3px; font-weight:400;} /* 상단 대분류 마우스오버시 중분류 */ #one_cate > .position > ul > li > .sub-category{display:block; position:absolute; top:30px; padding-top:13px; opacity:0; visibility:hidden; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; z-index:99;} #one_cate > .position > ul > li > .sub-category ul{padding:9px; background:#fff; border:2px solid #efefef; text-align:center; width:100px; box-sizing:border-box;} #one_cate > .position > ul > li > .sub-category ul li{display:block;} #one_cate > .position > ul > li > .sub-category ul li a{display:block; font-size:13px; line-height:20px; letter-spacing:-0.5px; padding:3px 0; border-radius:6px; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;} #one_cate > .position > ul > li > .sub-category ul li:hover a{background:rgba(0,0,0,0.05);} #one_cate > .position > ul > li:hover > .sub-category{opacity:1; visibility:visible;} /**************************** 우측 ****************************/ /* 아이콘들 */ #rightIcon{position:absolute; top:40px; right:60px;} #rightIcon > ul{font-size:0; line-height:0; letter-spacing:0;} #rightIcon > ul > li{display:inline-block; vertical-align:top; font-size:10px; padding:6px; margin-left:3px;} #rightIcon > ul > li > a{display:block; width:26px; height:26px; background-position:center; background-repeat:no-repeat; position:relative;} #rightIcon > ul > li > a.search{background-image:url('/design/drmircle/onedesign/images/ico_sear.png');} #rightIcon > ul > li > a.user{background-image:url('/design/drmircle/onedesign/images/ico_user.png');} #rightIcon > ul > li > a.basket{background-image:url('/design/drmircle/onedesign/images/ico_basket.png');} #rightIcon > ul > li > a.basket strong{display:none; position:absolute; top:0px; right:0px; width:5px; height:5px; border-radius:30px; background:#fa3e3e; font-size:0;} /* 유저드롭 */ #btn_drop{position:relative;} #drop_mypage{display:block; position:absolute; top:30px; left:-30px; padding-top:13px; opacity:0; visibility:hidden; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; z-index:99;} #btn_drop:hover #drop_mypage{opacity:1; visibility:visible;} #drop_mypage ul{padding:9px; background:#fff; border:2px solid #efefef; text-align:center; width:100px; box-sizing:border-box;} #drop_mypage ul li{display:block;} #drop_mypage ul li a{display:block; font-size:12px; line-height:19px; letter-spacing:-0.5px; padding:3px 0; border-radius:6px; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;} #drop_mypage ul li:hover a{background:rgba(0,0,0,0.05);} /**************************** 전체카테고리 ****************************/ /* 전체카테고리 */ #allCate{position:fixed; top:80px; left:0; width:100%; min-width:1200px; opacity:0; visibility:hidden; -webkit-box-shadow:3px 3px 3px 0 rgba(0,0,0,0.03); -moz-box-shadow:3px 3px 3px 0 rgba(0,0,0,0.03); -ms-box-shadow:3px 3px 3px 0 rgba(0,0,0,0.03); box-shadow:3px 3px 3px 0 rgba(0,0,0,0.03);} #allCate .allCate_con{width:100%; margin:0 auto; background:#f5f5f5; border-top:1px solid #f5f5f5; padding:55px 150px; box-sizing:border-box; text-align:center; font-weight:300; position:relative; font-size:0; line-height:0; letter-spacing:0;} #allCate.open{top:120px; opacity:1; visibility:visible;} #close_allCate{display:none; background:#5b6575; padding:18px 70px; font-size:23px; color:#fdfdfd; position:absolute; right:calc(50% - 80px); bottom:-61px; z-index:99; border-radius:0 0 15px 15px; -webkit-box-shadow:3px 3px 3px 0 rgba(0,0,0,0.03); -moz-box-shadow:3px 3px 3px 0 rgba(0,0,0,0.03); -ms-box-shadow:3px 3px 3px 0 rgba(0,0,0,0.03); box-shadow:3px 3px 3px 0 rgba(0,0,0,0.03);} /* 좌측 대분류 */ #one_cate2{width:100%; box-sizing:border-box; display:block;} #one_cate2 .position > ul{font-size:0; line-height:0; letter-spacing:0; position:relative;} #one_cate2 .position > ul > li{display:inline-block; vertical-align:top; width:12.5%; position:relative; text-align:left; padding:10px 0;} #one_cate2 .position > ul > li > a{display:block; font-size:15px; line-height:20px; letter-spacing:0.5px; font-weight:500; position:relative; padding-bottom:10px; margin-bottom:10px;} #one_cate2 .mCSB_inside > .mCSB_container{margin-right:7px;} /* 좌측 중분류 */ #one_cate2 .position > ul > li > .sub-category{left:0 !important;} #one_cate2 .position > ul > li > .sub-category ul{} #one_cate2 .position > ul > li > .sub-category ul li a{display:block; font-size:13px; line-height:25px; letter-spacing:0.5px; border-radius:6px; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;} #one_cate2 .position > ul > li > .sub-category ul li a:hover{background:rgba(0,0,0,0.07);} #one_cate2 .position > ul #one_myshop { display: none !important; } /**************************** 스크롤시 ****************************/ header, #leftArea, #rightIcon, #allCate, #allCate .topText{ -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; } body.scroll header{ height:80px; -webkit-box-shadow:3px 3px 10px 0 rgba(0,0,0,0.015); -moz-box-shadow:3px 3px 10px 0 rgba(0,0,0,0.015); -ms-box-shadow:3px 3px 10px 0 rgba(0,0,0,0.015); box-shadow:3px 3px 10px 0 rgba(0,0,0,0.015); } body.scroll #leftArea{top:21px;} body.scroll #rightIcon{top:19px;} body.scroll #allCate{top:40px;} body.scroll #allCate.open{top:80px;} body.scroll #allCate .topText{line-height:80px; font-size:15px;} @media screen and (max-width:1400px){ #contents{padding:0 80px;} #allCate .allCate_con{padding:25px 70px;} } /*====================================================================*/ /****************************** 레이어들 ******************************/ /*====================================================================*/ /**************************** 검색 ****************************/ #one_sear{position:fixed; top:0; left:0; background:rgba(21,21,24,0.85); width:100%; height:100%; z-index:999; opacity:0; visibility:hidden; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;} #one_sear .searBox{width:50%; position:absolute; left:50%; top:56%; transform:translate(-50%, -140px); font-size:0; line-height:0; letter-spacing:0; -webkit-transition: top 0.3s ease-in-out; -moz-transition: top 0.3s ease-in-out; -o-transition: top 0.3s ease-in-out; transition: top 0.3s ease-in-out;} #one_sear.open{opacity:1; visibility:visible;} #one_sear.open .searBox{top:52%;} /* 검색창 */ #one_sear .searBox fieldset{} #one_sear .searBox fieldset input, #one_sear .searBox fieldset .btn{display:inline-block; vertical-align:bottom; font-size:25px; line-height:25px; letter-spacing:-0.3px; font-weight:400;} #one_sear .searBox fieldset input{width:89%; margin-right:1%; height:70px; border:0; border-bottom:2px solid rgba(255,255,255,0.95); padding:3px; box-sizing:border-box; color:#fdfdfd;} #one_sear .searBox fieldset .btn{width:10%; color:rgba(255,255,255,0.95); padding:20px; box-sizing:border-box; font-size:36px; letter-spacing:1px; font-weight:500; text-align:center; cursor:pointer; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;} #one_sear .searBox fieldset .btn:hover{background:rgba(255,255,255,0.95); color:rgba(0,0,0,0.8);} /* 인기검색어 */ #one_sear .searBox ul{} #one_sear .searBox ul li{display:inline-block; vertical-align:middle; font-size:15px; line-height:20px; letter-spacing:-0.1px; margin:0 8px 16px 0; font-weight:200; color:#fdfdfd; background:rgba(255,255,255,0.08); padding:12px 20px; border-radius:8px;} #one_sear .searBox ul li a{display:block; color:#fdfdfd;} /**************************** 우측 장바구니 ****************************/ #one_basket{position:fixed; top:0; right:-20px; background:#656773; width:22%; min-width:250px; height:100%; z-index:101; opacity:0; visibility:hidden; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; -webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.05); -moz-box-shadow: 0 0 20px 0 rgba(0,0,0,0.05); -ms-box-shadow: 0 0 20px 0 rgba(0,0,0,0.05); box-shadow: 0 0 20px 0 rgba(0,0,0,0.05);} #one_basket.open{right:0; opacity:1; visibility:visible;} /* 상단 */ #one_basket h4{font-weight:200; padding:35px; font-size:13px; letter-spacing:0.1px; color:#fafafa; background:rgba(0,0,0,0.3);} #one_basket h4 strong{font-weight:500; font-size:20px; color:#fff; margin-right:3px;} #one_basket i.close{position:absolute; top:10px; right:10px; font-size:24px; padding:26px; cursor:pointer; color:#fdfdfd;} /* 비었을 때 */ #one_basket .empty{display:block;} #one_basket .empty p{padding:50px 0; text-align:center; color:#e5e5e5; font-size:13px; font-weight:200; border:0;} #one_basket .empty p i{display:block; font-size:24px; margin-bottom:20px;} /* 목록 */ #one_basket .cart_contents{max-height:calc(100% - 169px);} #one_basket .mCSB_inside > .mCSB_container{margin-right:0;} #one_basket .mCSB_scrollTools{width:25px;} #one_basket .cart_contents .mCSB_scrollTools .mCSB_draggerContainer, #one_basket .cart_contents .mCSB_scrollTools .mCSB_dragger{padding:8px 0;} #one_basket .cartDiv{} #one_basket .cartDiv .item{position:relative !important; top:inherit !important; left:inherit !important; width:100% !important;} #one_basket .cartDiv .item > li{padding:35px; border-top:1px solid rgba(0,0,0,0.1); background:rgba(0,0,0,0.2);} #one_basket .cartDiv .item > li:first-child{border:0;} #one_basket .cartDiv .item > li > div{display:block; font-size:0; line-height:0; letter-spacing:0;} #one_basket .cartDiv .item > li .thumb, #one_basket .cartDiv .item > li .info{display:inline-block; vertical-align:middle;} #one_basket .cartDiv .item > li .thumb{max-width:35%;} #one_basket .cartDiv .item > li .thumb img{width:100%; height:auto; border-radius:10px;} #one_basket .cartDiv .item > li .info{max-width:65%; font-size:14px; line-height:22px; padding-left:25px; box-sizing:border-box; color:#fdfdfd;} #one_basket .cartDiv .item > li .info .pname a{font-size:14px; line-height:22px; color:#fdfdfd; font-weight:500;} #one_basket .cartDiv .item > li .info .dsc{font-size:12px; color:#b7b7b7;} #one_basket .cartDiv .item > li .info .price{margin-top:12px; font-weight:600; font-size:15px; margin-left:2px;} /* 버튼 */ #one_basket .btn_basket{position:absolute; bottom:0; right:0; width:100%;} #one_basket .btn_basket a{ width: 100%; background:rgba(0,0,0,0.3) !important; border-color:transparent !important; color:#fdfdfd !important; font-weight:500; padding:27px 0; letter-spacing:0.3px;} #one_basket .btn_basket a:hover{background:rgba(0,0,0,0.4) !important;} /* BASIC css end */