/* BASIC css start */ /* ********************************************************** roboto ********************************************************** */ /* roboto-100 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100; src: url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-100.eot'); /* IE9 Compat Modes */ src: local('Roboto Thin'), local('Roboto-Thin'), url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-100.woff2') format('woff2'), /* Super Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-100.woff') format('woff'), /* Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-100.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-300 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-300.eot'); /* IE9 Compat Modes */ src: local('Roboto Light'), local('Roboto-Light'), url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-300.woff') format('woff'), /* Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-regular - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Roboto'), local('Roboto-Regular'), url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-regular.woff') format('woff'), /* Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-500 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-500.eot'); /* IE9 Compat Modes */ src: local('Roboto Medium'), local('Roboto-Medium'), url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-500.woff') format('woff'), /* Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-700 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-700.eot'); /* IE9 Compat Modes */ src: local('Roboto Bold'), local('Roboto-Bold'), url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-700.woff') format('woff'), /* Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-900 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; src: url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-900.eot'); /* IE9 Compat Modes */ src: local('Roboto Black'), local('Roboto-Black'), url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-900.woff2') format('woff2'), /* Super Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-900.woff') format('woff'), /* Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */ url('http://www.atopyshop.com/design/atop/bbdesign/font/roboto-v19-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */ } /* ********************************************************** lato ********************************************************** */ /* lato-100 - latin */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 100; src: url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-100.eot'); /* IE9 Compat Modes */ src: local('Lato Hairline'), local('Lato-Hairline'), url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-100.woff2') format('woff2'), /* Super Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-100.woff') format('woff'), /* Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */ url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-100.svg#Lato') format('svg'); /* Legacy iOS */ } /* lato-300 - latin */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; src: url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-300.eot'); /* IE9 Compat Modes */ src: local('Lato Light'), local('Lato-Light'), url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-300.woff') format('woff'), /* Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-300.svg#Lato') format('svg'); /* Legacy iOS */ } /* lato-regular - latin */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; src: url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Lato Regular'), local('Lato-Regular'), url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-regular.woff') format('woff'), /* Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */ } /* lato-700 - latin */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; src: url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-700.eot'); /* IE9 Compat Modes */ src: local('Lato Bold'), local('Lato-Bold'), url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-700.woff') format('woff'), /* Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-700.svg#Lato') format('svg'); /* Legacy iOS */ } /* lato-900 - latin */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; src: url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-900.eot'); /* IE9 Compat Modes */ src: local('Lato Black'), local('Lato-Black'), url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-900.woff2') format('woff2'), /* Super Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-900.woff') format('woff'), /* Modern Browsers */ url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */ url('http://www.atopyshop.com/design/atop/bbdesign/font/lato-v15-latin-900.svg#Lato') format('svg'); /* Legacy iOS */ } /* ********************************************************** nanum ********************************************************** */ @font-face { font-family: 'NanumSquare'; font-weight: 400; src: url('/design/jirus/font/NanumSquareR.eot'); src: url('/design/jirus/font/NanumSquareR.eot?#iefix') format('embedded-opentype'), url('/design/jirus/font/NanumSquareR.woff') format('woff'), url('/design/jirus/font/NanumSquareR.ttf') format('truetype'); } @font-face { font-family: 'NanumSquare'; font-weight: 700; src: url('/design/jirus/font/NanumSquareB.eot'); src: url('/design/jirus/font/NanumSquareB.eot?#iefix') format('embedded-opentype'), url('/design/jirus/font/NanumSquareB.woff') format('woff'), url('/design/jirus/font/NanumSquareB.ttf') format('truetype'); } @font-face { font-family: 'NanumSquare'; font-weight: 800; src: url('/design/jirus/font/NanumSquareEB.eot'); src: url('/design/jirus/font/NanumSquareEB.eot?#iefix') format('embedded-opentype'), url('/design/jirus/font/NanumSquareEB.woff') format('woff'), url('/design/jirus/font/NanumSquareEB.ttf') format('truetype'); } @font-face { font-family: 'NanumSquare'; font-weight: 300; src: url('/design/jirus/font/NanumSquareL.eot'); src: url('/design/jirus/font/NanumSquareL.eot?#iefix') format('embedded-opentype'), url('/design/jirus/font/NanumSquareL.woff') format('woff'), url('/design/jirus/font/NanumSquareL.ttf') format('truetype'); } #header .header { position: relative; text-align: center; vertical-align: top; background: transparent; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; /*z-index:198;*/ } #header .header .top { position: relative; background: transparent; border-bottom: 1px solid #000; /*z-index: 198;*/ /* height: 65px; */ /* line-height: 65px; */ padding: 17px 0; } #header .header .top .menu { position: absolute; top: 50%; left: 20px; margin: -7px 0 0; vertical-align: middle; } #header .top .menu a { display: block; width: 20px; height: 15px; } #header .top .menu img { width: 100%; } #header .top .logo h1 { width: 100%; text-align: center; margin: 0; } #header .top .logo h2 { width: 100%; text-align: right; margin: 0; } #header .top .logo h2 img { max-width: 70px; /*max-height: 35px;*/ font-size: 12px; margin: 10; vertical-align: -webkit-baseline-middle; } #header .top .logo h1 img { max-width: 150px; /*max-height: 35px;*/ font-size: 12px; margin: 0; vertical-align: -webkit-baseline-middle; } #header .top .menu2 { position: absolute; top: 50%; right: 52px; margin: -10px 0 0; vertical-align: middle; } #header .top .menu2 a { display: block; width: 20px; height: 21px; } #header .top .menu2 img { width: 100%; } #header .top .menu3 { position: absolute; top: 50%; right: 15px; margin: -9px 0 0; vertical-align: middle; } #header .top .menu3 a { display: block; width: 18px; height: 17px; } #header .top .menu3 img { width: 100%; } #header .top .menu2 #user_basket_quantity { width: auto; height: 12px; line-height: 12px; cursor: pointer; font-size: 10px; z-index: 1; background: #cb2b2b; color: #fff; padding: 0 6px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; position: absolute; top: -3px; right: -10px; } #header .header .since { text-align: right; } #m_category ul { font-size: 0; } #m_category { position: relative; width: 100%; } #m_category ul li { width: 25%; display: inline-block; -webkit-box-sizing: border-box; -khtml-box-sizing :border-box; -moz-box-sizing :border-box; -ms-box-sizing :border-box; -o-box-sizing :border-box; box-sizing :border-box; border-bottom: 1px solid #ededed; } #m_category ul:first-child li{ } #m_category ul:last-child li.activemenu { background: #45d4cb; border-bottom: 1px solid #45d4cb; } #m_category ul li a { display: block; font-size: 14px; text-align: center; text-transform: uppercase; line-height: 40px; font-family: 'NanumSquare'; font-weight: 400; color: #000; } #m_category ul li + li { border-left: 1px solid #ededed; } #slide_sidebar { width:275px; background:#fff; z-index:999; position:fixed; height:100%; top:0px; left:-305px; overflow-y:scroll; } #slide_sidebar ul.cate1 { padding-top: 20px; padding-bottom: 25px; } #slide_sidebar ul.cate2 { padding-bottom: 20px; padding-top: 10px; border-bottom: 1px solid #00254f; } #black_dummy { position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.75); z-index:-1; opacity: 1; z-index: 900; } #slide_sidebar .slide_sidebar_content { padding-left: 8px; padding-right: 17px; } #slide_sidebar .slide_sidebar_content .slide_tab { position: relative; width: 100%; display: inline-block; padding-bottom: 30px; } #slide_sidebar .slide_sidebar_content .tab_left { padding-top: 32px; float: left; } #slide_sidebar .slide_sidebar_content .tab_right { float: right; padding-top: 30px; font-size: 0; padding-right: 10px; } #slide_sidebar .slide_sidebar_content .tab_right a { font-size:12px; position: relative; } #slide_sidebar .slide_sidebar_content .tab_right img { height: 22px; margin-left: 20px; } #slide_sidebar .slide_sidebar_content .tab_right img + img { margin-left: 17px; } #slide_sidebar .slide_sidebar_content .tab_right a sup { width: auto; height: 13px; line-height: 14px; cursor: pointer; font-size: 10px; z-index: 1; background: #45d4cb; color: #ffed00; padding: 0 7px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; position: absolute; top: -3px; right: -10px; font-family: 'NanumSquare'; font-weight: 700; } #slide_sidebar .slide_sidebar_content .tab_right a sup { width: auto; height: 13px; line-height: 14px; cursor: pointer; font-size: 10px; z-index: 1; background: #45d4cb; color: #ffed00; padding: 0 7px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; position: absolute; top: -3px; right: -10px; font-family: 'NanumSquare'; font-weight: 700; } aside nav li { font-size: 25px; position: relative; } aside nav li a { display: block; height: 40px; line-height: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #45d4cb; font-family: 'NanumSquare'; font-weight: 700; } aside nav li ul { padding-bottom: 30px; position: relative; padding-top: 20px; } aside nav li ul li a { font-family: 'NanumSquare'; font-weight: 400; color: #3f3f3f; font-size: 18px; padding-left: 10px; } aside nav li .fa { position: absolute; top: 0; right: 0; width: 100%; text-align: right; height: 40px; line-height: 40px; font-size: 20px; color: #2b2b2b; } .fa-plus:before { content: "\f067" !important; } aside nav ul.cate2 li a { font-family: 'NanumSquare'; font-weight: 300; color: #959595; } aside nav ul.cate2 li span.joinpoint { font-family: 'NanumSquare'; font-weight: 800; font-size: 13px; color: #00254f; width: 70px; height: 27px; display: inline-block; text-align: center; line-height: 27px; background: #ffed00; border-radius: 15px; vertical-align: middle; margin-left: 14px; } #header .search { height: 35px; position: relative; left: 0; right: 0; background-color: #fff; padding-right: 35px; text-align: left; display: none; z-index: 10; border-bottom: 1px solid rgba(225, 223, 219, 0.2); border-top: 1px solid rgba(225, 223, 219, 0.2); } #header .search .searchBox {width:100%;} #header .search .searchBox input { width: 85%; height: 35px; border: 0px none; background: transparent; color: #fff; font-family: 'NotoKrR', sans-serif; font-size: 11px; color: #aaa; letter-spacing: -1px; outline: 0; padding-left: 10px; } img.-searchbg { width: 11px; padding-left: 15px; display: inline-block; vertical-align: middle; opacity: 0.4; } #m_category ul li.activemenu { background: #45d4cb; } #m_category ul li.activemenu a { color: #ffed00; } /* ============================================================================= 상단 header.html ========================================================================== */ #header-container { position:relative; } #header-container .wrapper { min-height: 23px; padding: 0 0 0 0; position:relative; } #header-container h1 { font-size: 1em; margin: 0; padding:7px 0 10px 0; text-align:center; } #header-container #logo { } #header-container #logo img { max-height:50px; } #header-container nav { position: absolute; right: 2px; top:28px; text-align: right; letter-spacing:-1px;} #header-container nav ul li {float:left; display:inline;} #header-container nav a {color:#907e6c; font-size:90%; font-weight:bold; padding:0 5px;} /* 홈|장바구니|관심상품|로그인 */ #menu-container .menus { } #menu-container .menus ul {margin:0 auto; } #menu-container .menus ul li { float: left; height: 31px; line-height: 31px; text-align: center;width:20%;letter-spacing:-0.05em; } #menu-container .menus ul li a { color: #ffffff; font-weight: bold; font-size: .80em; } #menu-container .menus ul li.cat a {color:#ffffff;} #menu-container .menus ul li a strong { color: #584a3d; letter-spacing:-1px; font-weight:bold; font-size: 1.1em; padding:0 3px 0 0;} #menu-container .menus ul li a span { color: #a3a09b; font-size: smaller; display: inline-block; position:relative; top:-1px;} .top-line-bn {clear:both;} .top-line-bn:after {clear:both; display:block; content:"";} .top-line-bn li{width:50%; float:left; list-style:none; } .top-line-bn li a {} .top-link {position:absolute; top:6px; left:3px; } .top-link li {float:left; padding:0 4px; list-style:none;} .top-link li a {color:#4c4c4c;} #addrSearch, #cashbill { z-index: 9999 !important; } /* BASIC css end */