/* BASIC css start */ #mask { display:none; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:200 } /* 다찾다 검색 파인더 */ #allfinder-layer { z-index: 9999; position: fixed; top: 50px; right: 110px; width: 1000px; zoom: 1; overflow: hidden; } #allfinder-layer .finder-body { display:none; z-index:1; position: relative; width: 998px; *width:918px; padding:35px 40px 5px; max-height: 800px; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; border:1px solid #666; background:#fff; } #allfinder-layer .finder-body .finder-close { position: absolute; top: 15px; right: 10px; font-size:24px; color:#000; *width:19px; *height:24px; *background:url('/images/common/btn_h11_close.gif') no-repeat center center; *background-size:19px 24px; } #allfinder-ctr { z-index: 10000; position: fixed; top: 50px; right: 0; width: 103px; height:86px; } #allfinder-ctr a { display:block; width:100%; height:100%; background:url('/images/common/allfinder_ctrl_pc.png') no-repeat right top; border:none; outline:none; font-size:0; } .all-finder-layer .finder-body .finder-tbl table { border:1px solid #ccc; border-top:1px solid #000; } .all-finder-layer .finder-body .finder-tbl th, .all-finder-layer .finder-body .finder-tbl td { height: 40px; border-top: 1px solid #e5e5e5; font-size: 13px; font-family:'Malgun Gothic'; color: #000; } .all-finder-layer .finder-body .finder-tbl tr:first-child th, .all-finder-layer .finder-body .finder-tbl tr:first-child td { border-top:none; } .all-finder-layer .finder-body .finder-tbl th { padding: 5px 0; background: #f4f4f4; text-align: left; vertical-align:top; } .all-finder-layer .finder-body .finder-tbl th .txt-l { position:relative; height:34px; line-height:34px; padding: 0 20px; margin:3px 0; } .all-finder-layer .finder-body .finder-tbl th .txt-l .fa { position:absolute; top:50%; right:15px; margin-top:-6px; } .all-finder-layer .finder-body .finder-tbl th .txt-l .finder-tooltip-btn { display:inline-block; width:20px; height:20px; line-height:22px; border:1px solid #cecece; border-radius:20px; color:#666; font-size:11px; background:#fff; text-align:center; outline:none; } .all-finder-layer .finder-body .finder-tbl th .txt-l .finder-comm-layer { display:none; position:absolute; top:33px; left:52px; width:270px; padding:0 20px 18px; border:1px solid #000; background:#fff; text-align:left; font-weight:normal; color:#000; z-index:1} .all-finder-layer .finder-body .finder-tbl th .txt-l .finder-comm-layer .finder-btn-close { display:inline-block; position:absolute; top:14px; right:20px; margin:0; font-size:21px; color:#000; outline:none; *width:19px; *height:22px; *background:url('/images/common/btn_h11_close.gif') no-repeat center center; } .all-finder-layer .finder-body .finder-tbl th .txt-l .finder-comm-layer .finder-layer-tit { padding:18px 0; border-bottom:1px solid #e5e5e5; font-size:15px; font-weight:bold; line-height:15px; } .all-finder-layer .finder-body .finder-tbl th .txt-l .finder-comm-layer .finder-layer-cnt { padding-top:16px; line-height:1.5; font-size:13px; } .all-finder-layer .finder-body .finder-tbl td { padding: 5px 10px; } .all-finder-layer .finder-body .txt-input { height: 21px; line-height: 21px; padding: 0 5px; font-size: 13px; font-family:'Malgun Gothic'; } .all-finder-layer .finder-body .finder-category { height:40px; overflow:hidden; } .all-finder-layer .finder-body .finder-category.open { height:100%; overflow:visible; } .all-finder-layer .finder-body tr.finder-child-category {display:none;} .all-finder-layer .finder-body tr.finder-child-category th, .all-finder-layer .finder-body tr.finder-child-category td { border-top:none; } .all-finder-layer .finder-body tr.finder-child-category td { background:#fbfbfb; } .all-finder-layer .finder-body tr.finder-child-category td .finder-category2 .finder-cate2 { display:inline-block; margin:3px 5px 3px 0; padding: 5px 10px; cursor:pointer; line-height:22px; vertical-align:top; word-break:break-all; color:#9a9a9a; } .all-finder-layer .finder-body tr.finder-child-category td .finder-category2 .finder-cate2 .fa-check { display:none; } .all-finder-layer .finder-body tr.finder-child-category td .finder-category2 .finder-cate2.on { font-weight:bold; color:#000; border:0; border-radius:0; box-shadow: unset; } .all-finder-layer .finder-body tr.finder-child-category td .finder-category2 .finder-cate2.on .fa-check { display:inline-block; margin-right:3px; } .all-finder-layer .finder-body .finder-color { padding-left:10px; } .all-finder-layer .finder-body .finder-price .finder-price-input { display: inline-block; padding-top:5px} .all-finder-layer .finder-body .finder-price .finder-price-input label { display: inline-block; width: 110px; padding: 0 10px; border: 1px solid #ccc; border-radius:3px; color: #666; } .all-finder-layer .finder-body .finder-price .finder-price-input label .txt-input { display: inline-block; width: 90px; height: 29px; line-height: 29px; padding: 0; border: none; background: none; color: #333; text-align: right; } .all-finder-layer .finder-body .finder-search { position:relative; padding-left:5px; } .all-finder-layer .finder-body .finder-search label { display: inline-block; width: 320px; padding: 0 10px; border: 1px solid #ccc; border-radius:3px; } .all-finder-layer .finder-body .finder-search label .txt-input { display: block; width:100%; height: 29px; line-height: 29px; padding: 0; border: none; background: none; color: #333; text-align: left; } .all-finder-layer .finder-body .finder-btn-c { padding: 30px 0; text-align: center; } .all-finder-layer .finder-body .finder-btn-c a.reset { display: inline-block; width: 140px; height: 60px; line-height: 57px; border:none; border-radius:3px; background: #999; color: #fff; font-size: 18px; font-weight: bold; letter-spacing: 1px; font-family:'Malgun Gothic'; margin-right:15px; } .all-finder-layer .finder-body .finder-btn-c button { display: inline-block; height: 60px; line-height: 57px; padding:0 30px; *padding:0; border:none; border-radius:3px; background: #000; color: #fff; font-size: 18px; font-weight: bold; letter-spacing: -0.5px; font-family:'Malgun Gothic'; cursor:pointer; } .all-finder-layer .finder-body .finder-btn-c button span.ico-search { visibility:visible; display:inline-block; width:16px; height:15px; margin-right:10px; margin-top:-4px; *margin-top:0; vertical-align:middle; background:url('/images/common/btn_h15_search.png') no-repeat 0 0; } .all-finder-layer .finder-body .finder-btn-c button span.finder-count { visibility:visible; display:inline-block; height:60px; color:#ffd800; font-size:23px; *vertical-align:middle; } .all-finder-layer .finder-body .finder-btn-c button span.finder-count-toggle { visibility:visible; display:none; } .all-finder-layer .finder-body .finder-options { display:inline-block; margin:3px 5px 3px 0; padding: 5px 10px; cursor:pointer; line-height:22px; border: 1px solid #fff; vertical-align:top; word-break:break-all; } .all-finder-layer .finder-body .finder-options.on { font-weight: bold; border: 1px solid #000; border-radius: 20px; box-shadow:2px 2px 3px #d2d2d2; } .all-finder-layer .finder-body .finder-option-color em { display: inline-block; width: 22px; height: 22px; border-radius:20px; font-size:0; vertical-align:top; } .all-finder-layer .finder-body .finder-option-color.color-picker { width:22px; height:22px; padding: 0; border: none; } .all-finder-layer .finder-body .finder-option-color.color-picker.on { border: none; } .all-finder-layer .finder-body .finder-option-color.color-picker .fa-check { display:none; width:22px; height:22px; margin-top:-17px; color:#fff; text-align:center; } .all-finder-layer .finder-body .finder-option-color.color-picker.on .fa-check { display:block; } .all-finder-layer .finder-body .finder-option-color.color-picker.on.finder-option-color-white .fa-check { color:#000; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-black em { background-color: #000; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-white em { background-color: #FFF; width: 20px; height: 20px; border: 1px solid #e5e5e5; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-gray em { background-color: #808080; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-beige em { background-color: #e5d0b2; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-brown em { background-color: #aa6810; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-navy em { background-color: #425583; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-blue em { background-color: #0000ff; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-light-blue em { background-color: #62acff; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-red em { background-color: #ff0000; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-orange em { background-color: #ffa500; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-yellow em { background-color: #ffff00; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-pink em { background-color: #ffc0cb; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-purple em { background-color: #800080; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-jaju em { background-color: #a63f7f; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-khaki em { background-color: #2f5e2f; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-green em { background-color: #008000; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-light-green em { background-color: #72dd95; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-silver em { background-color: #dfdfdf; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-gold em { background-color: #cfbc4e; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-apricot em { background-color: #fbceb1; } .all-finder-layer .finder-body .search-auto-complete-list { display:none; z-index:1; position:absolute; top:30px; left:5px; border:1px solid #ddd; line-height:14px; background:#fff; } .all-finder-layer .finder-body .search-auto-complete-list ul { width:340px; padding:4px 0 6px; border-bottom:1px solid #ddd; } .all-finder-layer .finder-body .search-auto-complete-list ul li { text-align:left; } .all-finder-layer .finder-body .search-auto-complete-list ul li.on { background:#f3f3f3; } .all-finder-layer .finder-body .search-auto-complete-list ul li a{ display:block; padding:8px 14px 7px; color:#000; background:none; font-family:'dotum'; font-size:12px; letter-spacing:-1px; } .all-finder-layer .finder-body .search-auto-complete-list ul li a strong { color:#ab3e41; } .all-finder-layer .finder-body .search-auto-complete-list ul li a:hover { background:#f2f2f2; } .all-finder-layer .finder-body .search-auto-complete-list ul li a:hover span { border-bottom:1px solid #000; } .all-finder-layer .finder-body .search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#999; font-size:11px; } .all-finder-layer .finder-body .finder-search-data .finder-options { border: 1px solid #e5e5e5; box-shadow:none; } .all-finder-layer .finder-body .finder-search-data .finder-options .fa-close { margin-left:10px; color: #999; } /* header */ #header{font-size: 0;position: relative; z-index: 99; border-bottom:1px solid #ddd;} #main #header{border-bottom:0;} #header .navigation_ .items{display: inline-flex;align-items: center;} #header .navigation_ .swiper-slide{width:auto;} #header .fold-icon{position:relative;width:24px;height:18px;} #header .fold-icon span{display:block;position:absolute;width:100%;height:2px;background:#222;transition:all 0.2s linear;} #header .fold-icon span.line1{top:0;} #header .fold-icon span.line2{top:50%;transform:translateY(-50%);} #header .fold-icon span.line3{bottom:0; width:50%;} #header .fold-icon.active span.line1{top:50%;transform:translateY(-50%) rotate(45deg);} #header .fold-icon.active span.line2{transform:scaleX(0);transform-origin:left;width:0;opacity:0;} #header .fold-icon.active span.line3{bottom:50%;transform:translateY(50%) rotate(-45deg);width:100%;} #header .search-form{display:none;position: absolute;top: 100%;left: 0;right: 0;z-index:1;} #header .search-form .xans-layout-searchheader{position: absolute; left: 0; right: 0; background: rgba(255, 255, 255, 0.99); z-index: 10; box-sizing: border-box;box-shadow: 1px 12px 14px rgb(0 0 0 / 15%);} #header .search-form .xans-layout-searchheader input{background:#f3f3f3;} #header .search-form .xans-layout-searchheader input::placeholder{color:#222;} #header .search-form.active .back-panel{content: '';position: absolute;width: 100vw;height: 100vh;background: rgba(0,0,0,0.5);top: 0;left: 0;z-index: 1;} #header .search-form .xans-layout-searchheader fieldset{position:relative;} #header .search-form .xans-layout-searchheader input{} #header .search-form .xans-layout-searchheader button{} #header .search-form .xans-layout-searchheader button img{} #header .search-dropbox{margin: 2rem 0 0;} #header .search-dropbox h5{ font-weight:400;} #header .xans-search-hotkeyword a{} #header .xans-search-hotkeyword a:before{content:"#";} #header .topArea_navigation .menu_basket .count{background:red;color:#fff;} #header .cate-mask-left{ position: absolute; top: 0; left: 0; width: 25px; height: 40px; background: -webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,0)),color-stop(85%,#fff)); z-index: 2; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); } #header .cate-mask-right{ position: absolute; top: 0; right: 0; width: 25px; height: 40px; background: -webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,0)),color-stop(85%,#fff)); z-index: 2; } /********************* PC *********************/ @media all and (min-width:1025px) { #header{border-bottom: 1px solid #eee;height: 170px;box-sizing: border-box;} #header .logo-wrap {display: grid;min-height: 100px;z-index:100;} #header .topArea_logo{align-items: center; box-sizing: border-box; display: flex; justify-content: flex-start;grid-column: 1 / span 1;margin:10px 0 0;} #header .topArea_logo img{width:180px;} #header .topArea_statelog{justify-content: flex-end; box-sizing: border-box; display: flex; grid-column: 2 / span 1; align-items: center;margin:10px 0 0;} #header .topArea_statelog .statelog{display:inline-flex;align-items: center;} #header .topArea_statelog .statelog a{text-decoration:none; margin-left:17px;font-size:14px;color:#999;position: relative;} #header .xans-layout-multishoplist.list{display:inline-flex;height:28px; position: relative;margin-left: 25px;} #header .xans-layout-multishoplist.list .toggle { display:block; width:6.8rem; height:28px; line-height:28px; font-size:12px; text-align:left; background:#fff; position: relative;border: 1px solid #ddd; padding: 0 25px 0 10px;border-radius: 3px;} #header .xans-layout-multishoplist.list .toggle span > img { vertical-align:middle } #header .xans-layout-multishoplist.list .icon { position:absolute; right:10px; top: 9px; width: 5px; height: 5px;} #header .xans-layout-multishoplist.list > ul { visibility: hidden; height:0; padding:2px 10px; border: 1px solid #ddd;border-top: 0;background: #fff;position: absolute;top: 23px;left: 50%;margin-left: -3.4rem;width: 6.8rem;z-index: 2;border-radius: 5px;} #header .xans-layout-multishoplist.list > ul li { position:relative; margin:6px 0; } #header .xans-layout-multishoplist.list > ul li a { display:block; overflow:hidden; font-size:12px; text-decoration:none; text-overflow:ellipsis; padding:1px 0;} #header .xans-layout-multishoplist.list > ul li img{width: 1.3rem;vertical-align: middle;margin-top: -1px;margin-right: 3px;} #header .xans-layout-multishoplist.list.show > ul { visibility:visible; height:auto; } #header .inner__in{position:relative;} #header .inner__in > .site-wrap{z-index:99;} #header .inner__in .navigation_logo{overflow: hidden;width: 0;opacity: 0;} #header.fixed .inner.inner__in{position: fixed;top: 0;left: 0;right: 0;background: #fff;border-bottom: 1px solid #ddd;height: 70px; box-sizing:border-box;} #header .topArea_navigation{height: 70px;box-sizing: border-box;display: flex; align-items: center;} #header .topArea_navigation .logo {width: 0;overflow: hidden;opacity: 0; visibility: hidden; display:block;} #header.fixed .topArea_navigation .logo{animation: header_logo 1.2s forwards linear;margin-right: 30px;width: 100px;max-width:100px;} @keyframes header_logo{ 0%{ width:0;opacity:0;visibility:hidden; } 20%{ opacity:0;visibility:hidden; } 50%{ width:25%; } 75%{ width:100%; } 100%{ opacity:1;width:100%;visibility:visible; } } #header.fixed .topArea_navigation .logo img{width:var(--logo-fixed-width);} #header .topArea_navigation .navigation_{flex: 1;width: calc(100% - 300px)} #header .topArea_navigation .navigation_ .swiper-container{margin:0;} /* 메뉴 */ #header .navigation_, #header #category > ul{display: inline-flex; align-items: center;vertical-align: middle;white-space: nowrap;} #header .navigation_ .tm, #header #category > ul > li{position:relative;} #header .wp-cate{color:#222;text-decoration:none;padding: 0 20px 25px 20px; font-weight:500;font-size:1.2rem;} /*#header .navigation_ .tm, #header #category > ul > li{margin-left:2.4rem; position:relative;} #header .navigation_ .tm{position: relative;} #header .navigation_ .tm > a, #header #category > ul > li > a{font-size:1.2rem;color:#222;text-decoration:none;padding: 0 0 25px;position: relative; font-weight:500;} #header .navigation_ .tm > a:after, #header #category > ul > li > a:after{content:"";display: inline-block;width: 4px;height: 4px;background: red;border-radius: 50%;vertical-align: top;top: -3px;right: -6px;position: absolute;opacity:0;transition: opacity .25s ease;} #header .navigation_ .tm > a:hover:after, #header #category > ul > li > a:hover:after{opacity:1;}*/ /* 이전 코드 */ #header .navigation_ .sub-list, #category > ul > li .sub-cate{top:46px;border: 1px solid #eee;text-align:left;opacity:0;visibility:hidden;min-width:150px;background:#fff;padding:10px 0;box-sizing:border-box;word-break: keep-all;position:absolute;left:0;z-index:99;} #header.fixed .navigation_ .sub-list, #header.fixed #category > ul > li .sub-cate{top:45px;} #header .navigation_ .tm:hover .sub-list{display:block;visibility:visible;opacity:1;} #header .navigation_ .sub-list a{color:#777;font-size:14px;display:block;padding:5px 12px 5px;} #header .navigation_ .sub-list a:hover{color:#000;text-decoration:none;} #category > ul > li .sub-cate a, #header .sub-list a{color:#777;font-size:14px;display:block;} #category > ul > li .sub-cate a:hover, #header .sub-list a:hover{color:#000;} /*서브카테고리 스타일*/ #category .sub-cate:before{content:"";} #category > ul > li:hover .sub-cate{visibility:visible;opacity:1;} #category .sub-cate .sub-cate-list{box-sizing: border-box;} #category .sub-cate .sub-cate-list li{text-align:left;} #category .sub-cate .sub-cate-list li a, #header .sub-list a{color:#777777;font-size:14px;text-decoration:none;padding:5px 12px 5px ;} #category .sub-cate .sub-right{margin-top:10px;} #category .sub-cate-list .sub03, #category .sub-cate-list .sub04{ display:none; } #category .sub-cate-list li.arrow > a:before{width: 6px;height: 6px;border-width: 1px 1px 0 0;border-color: #aaa;border-style: solid;position: absolute;display: inline-block;content: "";transform: rotate(45deg) translate(0%,-50%);right: 15px;top: 50%;} #category .sub-cate-list .sub02 > li, #category .sub-cate-list .sub03 > li, #category .sub-cate-list .sub04 > li{position:relative;} #category .sub-cate-list .sub03 > li, #category .sub-cate-list .sub04 > li{min-width:170px;} #category .sub-cate-list .sub02 > li .sub03, #category .sub-cate-list .sub02 > li .sub04{background:#fff;border-radius: 0; padding:5px 0;box-sizing:border-box; border:1px solid #eee;} #category .sub-cate-list .sub02 > li:hover .sub03{display:block;position:absolute;left:100%;top:-5px;z-index:1;margin-left: -1px;} #category .sub-cate-list .sub03 > li:hover .sub04{display:block;position:absolute;left:100%;top:-5px;z-index:2;margin-left: -1px; } #header .topArea_navigation .menu_navi{font-size: 0; width:35px;} #header .topArea_navigation .menu_navi a{padding:10px 0; display:block;} #header .topArea_navigation .menu_navi img{max-width:22px;} #header .topArea_navigation .menu_search {width:35px; position:relative;} #header .topArea_navigation .menu_search img {width: 30px;} #header .topArea_navigation .menu_search.active a:before, #header .topArea_navigation .menu_search.active a:after{width:2px;height:24px;} #header .topArea_navigation .menu_basket{font-size:0;position:relative;margin-left:15px;width:35px;} #header .topArea_navigation .menu_basket img{width: 30px;} #header .topArea_navigation .menu_basket .count{font-size: 9px; padding: 0px 3px 0px ; min-width:10px; text-align:center; position: absolute; top: 0;right: 0;border-radius: 30px;float: none;min-width:13px;height:13px;line-height:13px;box-sizing:border-box;} #header .topArea_navigation .menu_user{width:35px; font-size: 0;margin-left:15px;} #header .topArea_navigation .menu_user img{width:30px;} #header .topArea_navigation .logo {order:1;} #header .topArea_navigation .menu_navi{order:2;} #header .topArea_navigation .navigation_{order:3;} #header .topArea_navigation #searchBarForm, #header .topArea_navigation .menu_search {order:4;} #header .topArea_navigation .menu_basket{order:6;} #header .topArea_navigation .menu_user{order:5;} #header .fold-icon.active span, #header .fold-icon.active:hover span{width:100%;} #header .xans-layout-searchheader{top: 0; border-top: 1px solid #ddd; padding: 40px 0;} #header .xans-layout-searchheader > .site-wrap{display: flex;align-items: flex-start;justify-content: space-between;} #header .xans-layout-searchheader .tlt-search{font-size: 25px; font-weight: bold;} #header .xans-layout-searchheader .search-box{width:780px;} #header .xans-layout-searchheader .bt-search-close{} #header .xans-layout-searchheader .bt-search-close a{display:block;position: relative; width: 45px; height: 45px;} #header .xans-layout-searchheader .bt-search-close a:before, #header .xans-layout-searchheader .bt-search-close a:after{content:"";width: 1.5px;height: 28px;background:#000;display:block;position: absolute;top: 50%;left: 50%;margin-top: -0.8rem;} #header .xans-layout-searchheader .bt-search-close a:after{transform: rotate( 45deg );} #header .xans-layout-searchheader .bt-search-close a:before{transform: rotate( 315deg );} #header .xans-layout-searchheader input{border:0;background:transparent;height:55px;line-height:55px;width:100%;outline:0;color:#222;font-size:18px;padding:0;padding: 0 60px 0 30px;box-sizing: border-box;border-radius:30px;} #header .xans-layout-searchheader button{font-size:0;position: absolute; right: 20px;top: 15px;} #header .xans-layout-searchheader button img{width:25px;} #header .xans-search-hotkeyword{display: flex; } #header .search-dropbox h5{font-size:18px;width: 110px;} #header .search-dropbox h5 + p{flex: 1;} #header .xans-search-hotkeyword a{font-size: 15px;text-decoration: none;color: #999;border: 1px solid #ddd;border-radius: 30px;padding: 5px 12px;margin: 0 3px 7px;word-break: keep-all;display: inline-block;} #header .cate-mask-left, #header .cate-mask-right{display:none;} } /********************* Mobile *********************/ @media all and (max-width:1024px) { #header{height:7rem;border:0;} #header > .inner{background: #fff; border-bottom:1px solid #eee;} #header .site-wrap{position:relative;} #header.fixed > .logo-wrap{position: fixed; top: 0; left: 0; right: 0; height: 4rem; z-index: 99;background: #fff;} html.scroll--hide #header.fixed > .logo-wrap{z-index:98;} #header.fixed > .inner{position: fixed;left: 0;right: 0;top: 4rem;height: 3rem; z-index: 99;box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);} #header .inner__in > .site-wrap{ position: inherit;} #header.fixed .inner__in .site-wrap{position:relative;} #header .topArea_logo{align-items: center;display: flex; justify-content: center; height: 4rem; padding:0;margin:0 6.5rem ;} #header.fixed .topArea_logo{margin: 0;} #header .topArea_logo img{width: var(--logo-width-mobile);} #header .topArea_navigation .logo{display:none;} #header .cate-swiper-container{padding:0 0.7rem; width:100%;} #header .navigation_, #header #category > ul{display: flex; white-space: nowrap; } #header .navigation_{height: 3rem; line-height: 3rem;overflow:hidden;} #header .wp-cate{color:#222; padding:0 .6rem;font-size:1rem; color:#222; text-decoration:none; font-weight:500;} #header .wp-cate.selected{font-weight:bold;} #header .topArea_navigation .menu_search, #header .topArea_navigation .menu_basket, #header .topArea_navigation .menu_navi, #header .topArea_navigation .menu_user{font-size:0;position: absolute; width: 2.5rem; height:2.5rem;cursor: pointer; top: 0.75rem;text-align: center;} #header.fixed .topArea_navigation .menu_search, #header.fixed .topArea_navigation .menu_basket, #header.fixed .topArea_navigation .menu_navi, #header.fixed .topArea_navigation .menu_user{margin-top: -4rem;} #header .topArea_navigation .menu_navi{ left: 1rem; } #header .topArea_navigation .menu_navi .fold-icon{width: 1.4rem; height: 1.1rem;} #header .topArea_navigation .menu_navi .fold-icon span{height: 0.1rem;} #header .topArea_navigation .menu_search{ right: 3.5rem; } #header .topArea_navigation .menu_search img{width:1.7rem} #header .topArea_navigation .menu_basket{ right: 1rem; } #header .topArea_navigation .menu_basket img{width:1.7rem} #header .topArea_navigation .menu_basket .count{font-size: 10px; padding: 0px 3px 0px ; min-width:10px; text-align:center; position: absolute; top: 0.4rem;right: 0; border-radius: 30px;float: none;min-width:.9rem;height:.9rem;line-height:.9rem;box-sizing:border-box;} #header .topArea_navigation .menu_user{ right: 3.5rem; } #header .topArea_navigation .menu_user img{width:1.7rem} #header .topArea_navigation .menu_search a, #header .topArea_navigation .menu_basket a, #header .topArea_navigation .menu_navi a, #header .topArea_navigation .menu_user a{display: flex; width: 100%; height: 100%; justify-content: center; align-items: center;} #header .topArea_navigation .menu_search.active a:before, #header .topArea_navigation .menu_search.active a:after{content:"";width: .1rem;height: 1.6rem;background:#000;display:block;position: absolute;top: 50%;left: 50%;margin-top: -0.8rem;} #header .topArea_navigation .menu_search.active a:after{transform: rotate( 45deg );} #header .topArea_navigation .menu_search.active a:before{transform: rotate( 315deg );} #header .topArea_navigation .menu_search.active img {opacity:0;} #header .search-form{border-top:1px solid #ddd;} #header .xans-layout-searchheader{top: 0;padding:2rem 2rem;} #header .xans-layout-searchheader .tlt-search{display:;} #header .xans-layout-searchheader input{border:0;background:transparent;height:3.6rem;line-height:3.6rem;width:100%;outline:0;color:#222;font-size:15px;padding:0;padding:0 4rem 0 2rem;box-sizing: border-box; border-radius:2rem;} #header .xans-layout-searchheader button{font-size:0;position: absolute; right: 1.5rem;top: 0.8rem;} #header .xans-layout-searchheader button img{width:1.8rem;} #header .search-dropbox h5{font-size:1.1rem;margin: 0 0 1rem;} #header .xans-search-hotkeyword a{font-size: 1rem; display: inline-flex;vertical-align: middle;margin: 0 1rem 0.6rem 0;} #header .xans-search-hotkeyword a{font-size: 1rem;text-decoration: none;color: #777;border: 1px solid #ddd;border-radius: 30px;padding: 5px 12px;margin: 0 3px 7px;word-break: keep-all;display: inline-block;} } /* 띠배너 */ #tbanner {position:relative; overflow:hidden; z-index:99; height:40px;} #tbanner .swiper-wrapper li a{display:block; text-align:center; text-decoration:none; height:40px; line-height:40px; font-size:15px; width:100%;} /********************* Mobile *********************/ @media all and (max-width:1024px) { #tbanner{height:2.8rem;} #tbanner .swiper-wrapper li a{height:2.8rem; line-height:2.8rem; font-size:1rem; } } /* aside */ #aside a{text-decoration:none;} .aside_wrap{position:relative; z-index:2;} #aside .toparea{} /**/ #aside .user_box{margin: 0 0;} #aside .user_box ul{display:flex;} #aside .user_box ul li{flex:1;text-align:center;} #aside .user_box ul li a{display:block;} #aside .user_box ul li img{display:block;margin: 0 auto .5rem; width: 1.7rem;} /* 컨텐츠 목록 */ #aside .categoryCont .menuList{font-size: 1rem; } #aside .categoryCont li a.cateView{word-wrap: break-word; transition: padding .35s ease; } /* 즐겨찾기 아이콘 */ #aside .xans-layout-category li .icoBookmark, #aside .bookmarkCategory li .icoBookmark { display:none; } #aside .xans-layout-category li .icoBookmark.selected, #aside .bookmarkCategory li .icoBookmark.selected { display:none; } /* 배송국가 */ #aside .multishop .xans-layout-multishoplistmultioptioncountry li a { padding:9px 10px 11px 17px; font-size:13px; } /********************* PC *********************/ @media all and (min-width:1025px) { #aside {display:none;position: absolute;left: 0; right:0; top: 100%;font-size: .9rem;box-sizing: border-box;z-index:99; margin-top:-1px;} #header.fixed #aside{border-top:0px solid #eee;} #aside.active .back-panel{position:absolute;width:100vw;height:100vh;background:rgba(0,0,0,0.5);z-index:1;left:0;top:0;cursor:pointer;} #aside .aside_wrap{background:#fff;box-shadow: 1px 12px 14px rgb(0 0 0 / 15%);border-top:1px solid #eee;} #header.fixed .aside_wrap{margin-top:0; border-color:#ddd;} #aside .btnClose{position: absolute;left: -1px;top: -55px;width: 20px;height: 20px;cursor: pointer;z-index: 19;padding: 20px;background: #fff; display:none;} #aside .btnClose > span{ position:absolute; width:20px; height:1px; background:#333; top: 50%;left: 50%;z-index: 19;display: block;transform: rotate(0deg); margin-left:-10px;} #aside .btnClose .line.first {transform: rotate(135deg);} #aside .btnClose .line.second {transform: rotate(-315deg);} #aside .all_menu_box{font-size:0; max-height: 600px;overflow-x: hidden;overflow-y: auto;display: flex; min-height: 350px;} #aside .all_menu_box .categoryCont{margin:24px 0; padding:0 40px 0 0; flex: 3;} #aside .all_menu_box .categoryList{display:flex;flex-wrap: wrap;} #aside .all_menu_box .categoryList > li{flex: 1 1 20%;max-width: 20%;margin: 0 0 2.7rem;} #aside .all_menu_box .tm > a, #aside .cateView{color: #222;display: block;padding: 0 0 .8rem 0;font-size: 1.1rem;font-weight:bold;} #aside .categoryList li > .view{background:none;} #aside .categoryList .sub02{display:block !important;} #aside .categoryList .sub03 {display:none;} #aside .categoryList .sub02 > li > a, #aside .categoryList .sub03 > li > a, #aside .categoryList .sub04 > li > a{overflow: hidden; white-space: nowrap; text-overflow: ellipsis;color: #777; display: block; font-size: 1rem;padding: 0.3rem 0;} #aside .boardCont{margin: 24px 0px; padding:0 0 0 40px; border-left:1px solid #eee;flex: 1;} #aside .boardList ul, #aside .memberList ul, #aside .loginList ul{display: flex;flex-wrap: wrap;} #aside .boardList a, #aside .memberList a{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: #777;display: block;font-size: 1rem;padding: .3rem 1rem .3rem 0;} #aside .boardList .cateView, #aside .memberList .cateView{padding: 0;font-size: 1.1rem;color: #111;margin: 0 0 0.5rem;} #aside .memberList, #aside .loginList{ margin-top: 2rem;} #aside .loginList a{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: #111;display: block;font-size: 1.1rem;padding-right:1rem;font-weight: 500;} #aside .bannerList{display: flex; } #aside .bannerList > p{margin-top: 24px; } #aside .bannerList a{overflow: hidden; white-space: nowrap; text-overflow: ellipsis;color: #111; display: block; font-size: 0.9rem;padding-left:15px;} #aside .bannerList p:first-child a{padding-left:0;} } /********************* Mobile *********************/ @media all and (max-width:1024px) { #aside {z-index:200;display:none;position: fixed;left: 0px;top: 0px;bottom: 0;min-width: 270px;width: 100%;height:100%;font-size: .9rem;box-sizing: border-box;-webkit-overflow-scrolling: touch;} html.gnb-active body{overflow:hidden;} #aside.active .back-panel{position:absolute;width:100vw;height:100%;background:rgba(0,0,0,0.75);z-index:1;left:0;top:0;cursor:pointer;} #aside .aside_wrap{width: 85%;max-width: 30rem;position: relative;height: 100%;background: #fff; overflow-y:auto; } #aside .btnClose{position: absolute;width: 2.5rem;height: 2.5rem; cursor:pointer; z-index:19;border-radius: 0;right: 0.8rem; top: 0.8rem;} #aside .btnClose > span{ position:absolute; width:20px; height:1px; background:#fff; top: 23px; right: 12px; z-index: 19;} #aside .btnClose .line.first, #aside .btnClose .line.second {position: absolute;top: 50%;left: 50%;margin-left: -.7rem;display: block;width: 20px;height: .15rem;background: #fff;transform: rotate(0deg);} #aside .btnClose .line.first {transform: rotate(135deg);} #aside .btnClose .line.second {transform: rotate(-315deg);} #aside .btnClose:after{content:"";clear:both;display:block;} #aside .btn_login{background:#222;padding:1.4rem 1.75rem; border-radius:0;margin: 0 0 1rem;} #aside .btn_login ul{display: flex; align-items: center;} #aside .btn_login ul li {position: relative;} #aside .btn_login ul li:first-child{margin-right:1rem;} #aside .btn_login ul li a { font-size: 1rem; color: #fff;} #aside .btn_login ul li .txt_login span{text-decoration: underline;color: var(--sub-font-color);} #aside .btn_login ul li .txt_signUp, #aside .btn_login ul li .txt_member{border: 1px solid #fff; border-radius: 1rem; padding: 0.2rem 1rem; font-size: .9rem;} #aside .user_box{border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 1rem 0; margin: 1rem 1.3rem;} #aside .categoryList > li { position:relative;margin: 0 1.5rem;} #aside .all_menu_box .tm > a, #aside .cateView{color: #222;display: block;padding: .8rem 0 .8rem 0;font-size: 1.2rem;font-weight:bold;} #aside .categoryList li > .view{position:absolute;top:0px;right:0px;width:4rem;height:2.5rem;background: url(/design/yr30303/img/ico_plus_24x24.png) no-repeat right 50% / 1rem;font-size: 0;border:0;cursor:pointer;} #aside .categoryList li > .view:after{content:none !important;} #aside .categoryList li.selected > a + .view{background-image:url(/design/yr30303/img/ico_minus_24x24.png);} #aside .categoryCont li .view.toggle-cate{top:0;} #aside .categoryCont li a.cateView + .cate.view.toggle-cate{top: 0.3rem;} #aside .categoryList .sub02, #aside .categoryList .sub03, #aside .categoryList .sub04{display:none;} #aside .categoryList .sub04{background: #f9f9f9;border-radius: 0.7rem;margin: 0.2rem 0 0.8rem 2rem;} #aside .categoryList .sub02 > li, #aside .categoryList .sub03 > li{position:relative;} #aside .categoryList .sub02 > li > a, #aside .categoryList .sub03 > li > a, #aside .categoryList .sub04 > li > a{overflow: hidden; white-space: nowrap; text-overflow: ellipsis;display: block; font-size: 1rem;padding: .5rem 0 .5rem 1rem;} #aside .categoryList .sub03 > li > a{padding-left:2rem;} #aside .categoryList .sub04 > li > a{font-size:.9rem; color:#777;} #aside .boardList{border-top: 1px solid #eee; margin: 0.5rem 1.5rem;padding: 0.5rem 0;} #aside .boardList .cateView{color: #222;display: block;padding: 0.8rem 0 0.8rem 0;font-size: 1.2rem;font-weight: bold;} #aside .boardList a{overflow: hidden; white-space: nowrap; text-overflow: ellipsis;color: #777; display: block; font-size: 1rem;padding: .5rem 0 .5rem 1rem;} #aside .memberList{display:none;} #aside .loginList{display:none;} #aside .bannerList{border-top: 1px solid #eee; margin:0 1.5rem 0;} #aside .bannerList > p{margin-top:0.5rem;padding-top: 0.9rem;} #aside .bannerList a{color:#111; font-size:.9rem; padding:.2rem 0;display:block;} /* 멀티쇼핑몰 */ #aside .xans-multishop-listitem{overflow:hidden;padding:2rem 1.5rem;} #aside .xans-multishop-listitem li {padding: 0.4rem 0.4rem;} #aside .xans-multishop-listitem li:first-child { border-top:0; } #aside .xans-multishop-listitem li a { display:block; padding: 0 7px 0 0;word-wrap:break-word; } #aside .xans-multishop-listitem li a .name { margin:0 0 0 5px; font-size:13px; vertical-align:middle; } #aside .xans-multishop-listitem li img{width: 1.7rem; height: auto; vertical-align: middle;} } /* wp-effect css */ [class*="__fade"]{opacity:0;} /* quick css */ .bottom-nav__chat{background: #fbe231; border: 0px solid #fbe231; box-sizing: border-box;} /********************* PC *********************/ @media all and (min-width:1025px) { .bottom-nav{position:fixed; right: 20px; bottom: 20px; z-index:10;} .bottom-nav__chat{border-radius: 50%;} .bottom-nav__chat a{display: block; background: url(/design/yr30303/img/icoChat.svg) no-repeat center / 25px; width: 50px; height: 50px;} .bottom-nav__chat span{display:none;} .bottom-nav__top {background: #fff; border: 1px solid #ddd; margin-top:10px; box-sizing: border-box; border-radius: 50%;} .bottom-nav__top a{display: block; background: url(/design/yr30303/img/icoArrowTop.svg) no-repeat center / 20px; width: 50px; height: 50px;} .bottom-nav__top span{display:none;} } /********************* Mobile *********************/ @media all and (max-width:1024px) { .bottom-nav{position:fixed; right: .6rem; bottom: 2rem; z-index:10;} .bottom-nav__chat{border-radius: 50%;} .bottom-nav__chat a{display: block; background: url(/design/yr30303/img/icoChat.svg) no-repeat center / 1.5rem; width: 2.7rem; height: 2.7rem;} .bottom-nav__chat span{display:none;} .bottom-nav__top {background: #fff; border: 1px solid #eee; margin-top:.5rem; box-sizing: border-box;border-radius: 50%;} .bottom-nav__top a{display: block; background: url(/design/yr30303/img/icoArrowTop.svg) no-repeat center / 1.2rem; width: 2.7rem; height: 2.7rem;} .bottom-nav__top span{display:none;} } /* loading css */ #wrap{ transition:all .3s; } .loading #wrap{ visibility:hidden; opacity:0; } .mul13 { width: 30px; height: 30px; position: fixed; left: 50%; top: 50%; margin-top: -15px; margin-left: -15px; transition:opacity .3s linear; z-index:1111; } .mul13.inactive{opacity:0;} .m13s { height: 30px; width: 30px; border-radius: 50%; position: absolute; opacity: .75; } .m13c1 { background-color: #1381e1; -webkit-animation: m13s1anim 2s infinite linear; animation: m13s1anim 2s infinite linear; } .m13c2 { background-color: #012748; -webkit-animation: m13s2anim 2s infinite linear; animation: m13s2anim 2s infinite linear; } @-webkit-keyframes m13s1anim { 0%, 100% { -webkit-transform: translateX(-15px); transform: translateX(-15px); } 25% { -webkit-transform: scale(0.6); transform: scale(0.6); opacity: .25; } 50% { -webkit-transform: translateX(15px); transform: translateX(15px); } 75% { -webkit-transform: scale(1.4); transform: scale(1.4); opacity: .8; } } @keyframes m13s1anim { 0%, 100% { -webkit-transform: translateX(-15px); transform: translateX(-15px); } 25% { -webkit-transform: scale(0.6); transform: scale(0.6); opacity: .25; } 50% { -webkit-transform: translateX(15px); transform: translateX(15px); } 75% { -webkit-transform: scale(1.4); transform: scale(1.4); opacity: .8; } } @-webkit-keyframes m13s2anim { 0%, 100% { -webkit-transform: translateX(15px); transform: translateX(15px); } 25% { -webkit-transform: scale(1.4); transform: scale(1.4); opacity: .8; } 50% { -webkit-transform: translateX(-15px); transform: translateX(-15px); } 75% { -webkit-transform: scale(0.6); transform: scale(0.6); opacity: .25; } } @keyframes m13s2anim { 0%, 100% { -webkit-transform: translateX(15px); transform: translateX(15px); } 25% { -webkit-transform: scale(1.4); transform: scale(1.4); opacity: .8; } 50% { -webkit-transform: translateX(-15px); transform: translateX(-15px); } 75% { -webkit-transform: scale(0.6); transform: scale(0.6); opacity: .25; } } /* layout css */ /* 샘플 코드 클래스 */ .wp-sample{display:none !important;} :root { --font-color-base:#000; --font-color-heading:#000; --font-color-primary:#000; --font-color-secondary:#012748; --font-color-warn:#212c5c; --font-color-success:#012748; --main-bg-color: 67, 78, 146; --main-border-color: 67, 78, 146; --main-font-color:#012748; --sub-bg-color: 194, 46, 171; --sub-border-color: 194, 46, 171; --sub-font-color:#212c5c; --base-width:1280px; --logo-width:180px; /* 상단 로고 넓이 */ --logo-fixed-width:80px; /* 상단 로고 (고정 시) 넓이 */ --logo-width-mobile:5.6rem; /* 모바일 상단 로고 넓이 */ } html.scroll--hide{overflow:hidden;} .site-wrap{margin: 0 auto;position:relative;} .wp-stand-by{opacity:0;z-index:-1;} .clear{clear:both;} /* scroll */ .mobile-scroll-hide{ -webkit-overflow-scrolling: touch; scrollbar-width: none; /* 파이어폭스 브라우저에서 스크롤 바 숨김 */ } .mobile-scroll-hide::-webkit-scrollbar { display: none; /* 크롬, 사파리, 오페라 등 웹킷 기반 브라우저에서 스크롤 바 숨김 */ } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Let's get this party started */ ::-webkit-scrollbar { width: 8px; height:3px; } /* Track */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgb(226, 226, 226); -webkit-border-radius: 8px; border-radius: 8px; } /* Handle */ ::-webkit-scrollbar-thumb { -webkit-border-radius: 8px; border-radius: 8px; background: rgba(190, 190, 190, 0.7); -webkit-box-shadow: inset 0 0 6px rgba(226, 226, 226,0.5); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(200, 200, 200, 0.4); } /* 메인 */ main#contents {display: block;} /* 버튼,상품,리뷰,이벤트글 썸네일 모서리 둥글림 효과 */ [class^='btn']{border-radius:5px;} .ec-base-product .prdList .thumb, .ec-base-product .prdList .thumbnail, .ec-base-product .prdList .thumbnail .prdImg, .ec-base-product .prdList .thumbnail .prdImg > a img, .ec-base-product .prdList > li { border-radius: 0.9rem;} .ec-base-product .prdList .iconarea{border-radius:0 0 0.9rem 0.9rem;} .review_list_grp .review__list > ul > li .thumb, .review_list_grp .review__list > ul > li .thumb a, .review_list_grp .review__list > ul > li .product_thumb, .review_list_grp .review__list > ul > li .product_thumb img{border-radius:0.9rem;} .index_board_review.review_list_grp .review__list > ul > li .item{border-radius:1.1rem;} .index_board_review.review_list_grp .review__list > ul > li .thumb{ border-radius:0.9rem;} .xans-product-detail .productSet, .xans-product-detail .imgArea .prdImg img, .xans-product-detail .imgArea .listImg li img{border-radius:0.9rem;} .xans-product-detail .xans-product-option .ec-product-button li{border-radius:0.5rem;} .xans-product-menupackage .menuCategory.menu > li, .xans-project-package .menuCategory.menu > li{border-radius:5px;} .xans-product-normalmenu .sort select{border-radius:5px;} .xans-board-listpackage-8 .xans-board-list-8 li a .thumbnail img{border-radius:0.9rem;} /********************* PC *********************/ @media all and (min-width:1025px) { /* 공통 */ .site-wrap{max-width: var(--base-width); padding:0 1rem; } #contents {padding-bottom:100px;min-height:700px;} /* 메인 */ main#contents{padding-bottom:0;} /* 메인타이틀 */ .section-title {margin:0 0 2rem;text-align: center; word-break: keep-all;} .section-title h3{font-size:2.2rem;color:#000;font-weight:500;} .section-title h3 > span *, .section-title h3 > p *, .section-title h3 + p{color: #999;font-weight: normal;display: block;margin-top:.4rem;font-size:1.2rem;} /* btnMore */ main#contents .xans-product-listmore{display:none;} } /********************* Mobile *********************/ @media all and (max-width:1024px) { /* 공통 */ #contents {min-height:30rem;} #contents > .site-wrap{padding-left:1.2rem; padding-right:1.2rem;padding-bottom:1.2rem;} .xans-layout-mobileaction{width: 0; height: 0; visibility: hidden;} /* 메인 */ /* 메인타이틀 */ .section-title {margin:0 1rem 1.4rem 1rem; word-break: keep-all;} .section-title h3{font-size:1.6rem;color:#000;font-weight:500;} .section-title h3 > span *, .section-title h3 > p *, .section-title h3 + p{color: #999;font-weight: normal;display: block;margin-top:5px;font-size:1rem;} } /* BASIC css end */