@charset "utf-8";
@font-face {font-family:"yangjin"; src: url(/css/font/yangjin.woff) format('woff'); font-weight: normal; font-style: normal;}

/* 
 * layout CSS Document
 * KOWEB
 */

/* placeholder */
::-webkit-input-placeholder{font-family:inherit; font-size:13px; color:#999999;}
::-moz-placeholder{font-family:inherit; font-size:13px; color:#999999;}
:-ms-input-placeholder{font-family:inherit; font-size:13px; color:#999999;}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder{color:transparent;}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder{color:transparent;}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder{color:transparent;}

/* base style */
html, body{font-size:15px; font-weight: 300;}
body{position:relative; transition:opacity 200ms ease-out 100ms;}

/* wrap */
#wrap{overflow:hidden;}
#wrap, #container, #header, #footer{width:100%; min-width:280px; margin-left:auto; margin-right:auto;}
#wrap:after, #container:after, #header:after, #footer:after{content:''; display:block; clear:both;}

/* A11Y */
div[role=status] a{display:block;color:#fff}
div[role=status] p{margin-bottom:0}
.skip_content{position: fixed; top:0; left:0; width: 100%; z-index:80;}
.skip_content a{overflow:hidden; display:block; width:1px; height:1px; background:#000; font-size: 14px; text-align:center; color:#fff;}
.skip_content a:focus{position:relative; width:100%; padding:10px; height:auto;}
.sr_only{overflow:hidden; position:absolute; margin:-1px; width:1px; height:1px; clip:rect(0,0,0,0);}

/* selection */
::-moz-selection {background-color:#f3b245; color: #fff;}
::selection {background-color:#f3b245; color: #fff}

/* common css */
*{box-sizing:border-box;}
[lang="kr"]{font-family:'yangjin', Noto Sans KR , '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}
table[class^="tbl_"]{position:relative; width:100%; border-collapse:separate; border-spacing:0; word-break:break-all;}
.ellip{overflow:hidden; display:block; width:100%; white-space:nowrap; word-wrap:normal; text-overflow:ellipsis;}
.ellipsis{overflow: hidden; display: -webkit-box; line-height: 1.6em; height: 3.2em; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis;}
.inner{width:100%; max-width:1100px; height:100%; margin:0 auto;}

/*header*/
#header{width: 100%; background-color: #fff;}
#header .inner{position: relative;}

.header_logo{display: block; width: 218px; height: 53px; margin: 10px auto 26px;}
.header_logo > a{display: block; width: 100%; height: 100%; background:url(/images/common/img_logo.png) no-repeat 50% 50% / contain;}
.header_gnb{position: relative;}

.header_menu_btn{background:transparent; transition:top 300ms; cursor:pointer;}
.header_menu_btn .menu_btn{position:relative; width:100%; height:100%;}
.header_menu_btn .btn_line{display:block; position:absolute; width:100%; height:2px; background:#444; transition:all 280ms ease;}
.header_menu_btn .line_01{top:0;}
.header_menu_btn .line_02{top:50%; margin-top:-1px;}
.header_menu_btn .line_03{bottom:0;}
.header_menu_btn.menu_close .line_01{top:50%; margin-top:-1px; transform:rotate(45deg);}
.header_menu_btn.menu_close .line_03{top:50%; margin-top:-1px; transform:rotate(-45deg);}
.header_menu_btn.menu_close .line_02{width:0;}
.gnb_func .top_login{right: 20px;}
.gnb_func .top_login .name{font-weight: 600;}
.gnb_func .top_login li.coupon{position:relative;}
.gnb_func .top_login li .msgbox{position:absolute; z-index:90; top:auto; left: -26px; margin-top: 14px; padding: 5px 7px; border-radius: 2px; background: #3f3f3f; font-size: 11px; line-height: 1; color: #fff; letter-spacing: 0; white-space: nowrap; transition: all 1.4s ease; transform: translateX(-50%); animation: msgbox 1.4s linear infinite;}
.gnb_func .top_login li .msgbox:before {position: absolute;top: -6px; left: 50%; margin-left: -6px; content: "▲"; color: #3f3f3f; font-size: 12px;}

.gnb_func .top_search{left: 20px;}
.gnb_func .top_search .search{position: relative; width: 236px; padding-right: 32px; border-bottom:2px solid #f39800;}
.gnb_func .top_search input{width: 100%; height: 100%; height: 32px; padding:2px 0 14px; border:0; font-weight: 300; outline:0;}
.gnb_func .top_search button{position: absolute; top: 0; right: 0; width: 28px; height: 100%; background:url(/images/common/icon_search.svg) no-repeat -2px -2px / 22px auto;}

.gnb_catagory .catagory > li > a{display: block; padding: 20px 0; font-size: 1rem; font-weight: 400; text-align: left; vertical-align: middle; letter-spacing:-0.04em; transition:color .3s;}
.gnb_catagory .catagory > li span{display: inline-block; position: relative; padding-left: 42px;}
.gnb_catagory .catagory > li span:before,
.gnb_catagory .catagory > li span:after{content:""; display: inline-block; position: absolute; top: 50%; left: 0; width: 32px; height: 32px; margin-top: 0; background:no-repeat 50% 50% / 40px auto; transform:translateY(-50%); transition:margin-top .3s;}
.gnb_catagory .catagory > li span:before{opacity: .1; margin-top: 5px;}
.gnb_catagory .catagory > li a[data-set-on="001"] span:before{background-image:url(/images/common/icon_catagory_shadow_1.png);}
.gnb_catagory .catagory > li a[data-set-on="002"] span:before{background-image:url(/images/common/icon_catagory_shadow_2.png);}
.gnb_catagory .catagory > li a[data-set-on="003"] span:before{background-image:url(/images/common/icon_catagory_shadow_3.png);}
.gnb_catagory .catagory > li a[data-set-on="004"] span:before{background-image:url(/images/common/icon_catagory_shadow_4.png);}
.gnb_catagory .catagory > li a[data-set-on="005"] span:before{background-image:url(/images/common/icon_catagory_shadow_5.png);}
.gnb_catagory .catagory > li a[data-set-on="006"] span:before{background-image:url(/images/common/icon_catagory_shadow_6.png);}
.gnb_catagory .catagory > li a[data-set-on="007"] span:before{background-image:url(/images/common/icon_catagory_shadow_7.png);}
.gnb_catagory .catagory > li a[data-set-on="008"] span:before{background-image:url(/images/common/icon_catagory_shadow_8.png);}
.gnb_catagory .catagory > li a[data-set-on="001"] span:after{background-image:url(/images/common/icon_catagory_1.svg);}
.gnb_catagory .catagory > li a[data-set-on="002"] span:after{background-image:url(/images/common/icon_catagory_2.svg);}
.gnb_catagory .catagory > li a[data-set-on="003"] span:after{background-image:url(/images/common/icon_catagory_3.svg);}
.gnb_catagory .catagory > li a[data-set-on="004"] span:after{background-image:url(/images/common/icon_catagory_4.svg);}
.gnb_catagory .catagory > li a[data-set-on="005"] span:after{background-image:url(/images/common/icon_catagory_5.svg);}
.gnb_catagory .catagory > li a[data-set-on="006"] span:after{background-image:url(/images/common/icon_catagory_6.svg);}
.gnb_catagory .catagory > li a[data-set-on="007"] span:after{background-image:url(/images/common/icon_catagory_7.svg);}
.gnb_catagory .catagory > li a[data-set-on="008"] span:after{background-image:url(/images/common/icon_catagory_8.svg);}

.gnb_catagory .catagory > li:hover span:before,
.gnb_catagory .catagory > li:hover span:after{margin-top:-5px;}
.gnb_catagory .catagory > li:hover > a{color:#000;}

.shop_count{display: inline-block; min-width: 16px; height: 16px; padding: 0 3px; background-color: #f39800; color:#fff; border-radius:15px; font-size: 11px; font-weight: 500; text-align: center;}

/*footer*/
.emph_color{color:#ffc564 !important;}
#footer{overflow: hidden; background:#353535; color: #fff;}
#footer a{color:inherit;}
.footer_notice .notice{display: table; table-layout:fixed; width: 100%;}
.footer_notice .notice > *{display: table-cell; vertical-align: middle; padding: 28px 15px;}
.footer_notice strong{width: 90px; background-color: #f4b449;}
.footer_notice ul{}

.footer_menu .inner{padding-top: 22px; padding-bottom: 22px; border-top:1px solid rgba(255,255,255,.12);}
.footer_menu .menu_list{overflow: hidden;}
.footer_menu .menu_list ul{margin-left: -33px; font-size: 0;}
.footer_menu .menu_list li{display: inline-block; position: relative; margin:3px 0 3px 15px; padding-left: 18px; font-size: 14px;}
.footer_menu .menu_list li:before{content:""; display: block; position: absolute; top: 50%; left: 0; width: 3px; height: 3px; border-radius:50%; margin-top: -1.5px; background-color: #727272;}

.footer_info{overflow: hidden;}
.footer_info .inner{padding-top: 28px; padding-bottom: 65px; border-top:1px solid rgba(255,255,255,.12);}
.footer_info address{margin-left: -30px; font-size: 0;}
.footer_info address > *{display: inline-block; margin:0 0 10px 30px; font-size: 14px; color:#d7d7d7;}
.footer_info address b{font-weight: 500;}
.footer_info address .check{display: inline-block; padding: 2px 8px; font-size: 12px; background-color: #535353; border-radius:30px; color:#fff;}
.footer_info .copy{margin-top: 30px; color:#a6a6a6;}

.right_banner{position: fixed; top: 40%; top: 190px; right: 20px; z-index:21; width: 114px; transition:right .3s ease;}
.right_banner > div{margin-top: 10px; border-radius:10px;}
.right_banner > div:first-child{margin-top: 0;}
.right_banner_cart{position: relative; z-index:1; padding: 14px 0; background: #1b1b1b; color:#fff; text-align: center; box-shadow:5px 5px 8px rgba(0,0,0,.2);}
.right_banner_list{margin-top: 10px; overflow: hidden; border:1px solid #ccc; font-size: 14px; text-align: center;}
.right_banner_list li{background: #fff; transition:background .3s;}
.right_banner_list li > a{display: block; padding: 12px 0; font-weight: 500; border-top:1px solid #e9e9e9;}
.right_banner_list li:first-child > a{border-top:0;}
.right_banner_list li:hover{background-color: #fafafa;}
.right_banner_move{background-color: #f39800; font-size: 0; text-align: center;}
.right_banner_move > a{opacity: .5; display: inline-block; width: 46%; height: 47px; background: no-repeat 50% 50%; transition:opacity .3s;}
.right_banner_move > a.top{background-image:url(/images/common/icon_top.png)}
.right_banner_move > a.bottom{background-image:url(/images/common/icon_bottom.png)}
.right_banner_move > a:hover{opacity: 1;}



.right_quick_banner{display: none; position: fixed; bottom: 20px; right: 20px; z-index:8;}
.right_quick_banner > div{position: relative; margin-top: 8px;}
.right_quick_banner > div:first-child{margin-top: 0;}
.right_quick_banner .circle{overflow: hidden; display: block; width: 52px; height: 52px; background:no-repeat 50% 50%; border-radius:50%; transition:background-color .3s;}
.right_kakao .circle{background-color: #fddc3f; background-image:url(/images/common/icon_kakao.png)}
.right_search .circle{background-color: #2080d9; background-image:url(/images/common/icon_search.png)}
.right_search .circle.active,
.right_search .circle:hover{background-color: #1270c7;}
.right_search .search_layer{display: none; position: absolute; top: 50%; right: 100%; margin-right: 10px; padding: 13px 10px 13px 20px; background: #1b1b1b; border-radius: 6px; transition: background .75s; transform: translateY(-50%); box-shadow:6px 6px 6px 0px rgba(0, 0, 0, 0.13); }
.right_search .search_layer:after{content:"";  display: block; position: absolute; top: 50%; right: -10px; width: 0px; height: 0px; margin-top: -5px;  border: 5px solid transparent; border-left-color: #1b1b1b; transition: all 750ms;}
.right_search .search_layer .search{position: relative; width: 230px; height: 40px; padding-right: 40px; /*border-bottom:2px solid #f39800;*/}
.right_search .search_layer input{width: 100%; height: 100%; border:0; background:transparent; outline:0; color: #fff;}
.right_search .search_layer button{position: absolute; top: 0; right: 0; width: 40px; height: 40px; background:url(/images/common/icon_search.svg) no-repeat 50% 50% / 22px auto;}

[data-cart-table="count"]{white-space: nowrap;}

@media screen and (min-width:1081px){
	[data-device="mobile"]{display: none;}
	.gnb_func .top_login,
	.gnb_func .top_search{position: absolute; bottom:100%; margin-bottom: 18px; font-size: 13px;}
	.gnb_func .top_login p{margin-bottom: 2px;}
	.gnb_func .top_login li{display: inline-block; position: relative; margin-left: 12px; padding-left: 13px;}
	.gnb_func .top_login li > a{color:#888888; transition:color .3s;}
	.gnb_func .top_login li:hover > a{color:#444;}
	.gnb_func .top_login li:before{content:""; display: block; position: absolute; top: 50%; left: 0; width: 1px; height: 12px; margin-top: -6px; background-color: #d9d9d9;}
	.gnb_func .top_login li:first-child{margin-left: 0; padding-left: 0;}
	.gnb_func .top_login li:first-child:before{content:none;}
	.gnb_catagory .catagory{display: table; width: 100%; border-top:1px solid #ededed; text-align: center; font-size: 0;}
	.gnb_catagory .catagory > li{display: inline-block; display: table-cell; position: relative; margin:0 12px; line-height:1.2; vertical-align: middle;}
	.gnb_catagory .catagory > li:first-child{margin-left: 0;}
	.gnb_catagory .catagory > li:last-child{margin-right: 0;}
}

/* 1580px */
@media screen and (max-width:1580px){
	.right_banner{right: 10px;}
}

/* 1380px */
@media screen and (max-width:1380px){
	#wrap .inner{padding-left: 20px; padding-right: 20px;}
	.right_banner{display: none;}
	.right_quick_banner{display: block; right: 10px; bottom: 10px;}
}

/* 1200px */
@media screen and (max-width:1080px){
	#wrap .inner{max-width:inherit; padding-left: 15px; padding-right: 15px; transition:padding 500ms;}
	
	#header{position: fixed; top: 0; left: 0; z-index:20; width: 100%; height: 57px; border-radius:0 0 10px 10px;}
	.header_logo{width: 150px; height: 30px; margin:10px auto 0;}
	.header_logo > a{background-image:url(/images/common/img_logo_m.png);}
	
	.header_gnb{position: fixed; top: 0; left: -100%; z-index:30; width: 450px; min-width:260px; height: 100%; background-color: #fff; transition:width .3s, left .5s;}
	.header_gnb_inner{overflow: hidden; overflow-y: auto; width: 100%; height: 100%;}
	
	.header_menu_btn{position:absolute;}
	.header_menu_btn:not(.menu_close){top:32%; left: auto; width:50px; height:48px; padding:14px 13px; margin-left: -8px; transform:translateY(-50%);}
	.header_menu_btn.menu_close{left: 100%; top: 13px; margin-left: 14px; width: 32px; height: 32px; padding: 7px; background-color: #fff; border-radius:50%;}
	.header_cart_btn{position: absolute; top:32%; right: 20px; transform:translateY(-50%);}
	.header_cart_btn:before{content:""; display: block; width: 23px; height: 28px; background:url(/images/common/icon_cart.svg) no-repeat 50% 50% / 30px auto;}
	.header_cart_btn .shop_count{position: absolute; top: -4px; right: -8px;}
	.header_cart_btn.coupon{position: absolute; top:32%; right: 60px; transform:translateY(-50%);}	
	.header_cart_btn.coupon:before{width:28px; background:url(/images/common/icon_coupon.svg) no-repeat 50% 40% / 30px auto;}	

	.header_cart_btn.coupon .msgbox{position:absolute; z-index:90; top:auto; left: -20px; text-align:center; margin-top: 14px; padding: 5px 7px; border-radius: 2px; background: #3f3f3f; font-size: 11px; line-height: 1.25; color: #fff; letter-spacing: 0; white-space: nowrap; transition: all 1.4s ease; transform: translateX(-50%); animation: msgbox 1.4s linear infinite;}
	.header_cart_btn.coupon .msgbox:before {position: absolute; top: -7px; left: 50%; margin-left: -6px; content: "▲"; color: #3f3f3f; font-size: 12px;}
	
	.gnb_func .top_login{padding: 13px 15px; background-color: #f2eadc;}
	.gnb_func .top_login *{display: inline-block; vertical-align: middle;}
	.gnb_func .top_login li > a{display: block; padding: 5px 8px; border-radius:30px; font-size: 13px; font-weight: 400;}
	.gnb_func .top_login .login > a,
	.gnb_func .top_login .logout > a{background-color: #fff; border:1px solid #ada495;}
	.gnb_func .top_login .mypage > a{background-color: #f39800; color:#fff;}
	.gnb_func .top_login .cart{display: none;}
	.gnb_func .top_search{padding: 20px 15px; background-color: #fff;}
	.gnb_func .top_search .search{width: 100%;}
	
	.header_gnb .gnb_catagory .catagory > li{border-top:1px solid #f2f2f2;}
	.header_gnb .gnb_catagory .catagory > li > a{padding: 20px 15px;}
	.header_gnb .gnb_catagory .catagory > li br{display: none;}
	
	.toggle_list > li{position: relative; background: #f9f6f4;}
	.toggle_list > li > a{display: block; padding:18px 15px 16px; border-bottom:1px solid #cfc7c0; background: #f2ebe7; font-size: 20px; color:#7c6d61;}
	.toggle_list > li:before,
	.toggle_list > li:after{content:""; display: block; position: absolute; left: 0; width: 100%; height: 1px; background:#cfc7c0;}
	.toggle_list > li:before{top: -1px;}
	.toggle_list > li:after{bottom: 0;}
	.toggle_list > li > a span{display: block; position: relative; padding-right: 32px;}
	.toggle_list > li > a .ico{display: block; position: absolute; top: 50%; right: 0; margin-top: -13px; width: 26px; height: 26px; background-color: #faf5f2; border:1px solid #b3a89f; border-radius:2px;}
	.toggle_list > li > a .ico:before,
	.toggle_list > li > a .ico:after{content:""; display: block; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background-color: #9d8f83; margin-left: -6px; margin-top: -1px; transition:transform .3s;}
	.toggle_list > li.active > a .ico:after{transform:rotate(90deg);}
	.toggle{font-size: 0;}
	.toggle > li{display: inline-block; width: 50%; border:1px solid #cfc7c0; border-width:0 1px 1px 0; font-size: 1rem;}
	.toggle > li:nth-child(2n){border-right-width:0;}
	.toggle > li > a{color:#222;}
	.toggle > li > a{display: block; padding:13px 15px;}
	
	.gnb_info{padding: 20px 15px;}
	.gnb_info .info_item{padding-bottom: 20px;}
	.gnb_info .info_item b{display: block; font-size: 16px; font-weight: normal;}
	.gnb_info .info_item strong{display: block; margin-top: 6px; font-size: 16px; font-weight: 400;}
	.gnb_info .info_item strong em[lang="en"]{font-weight: 500;}
	.gnb_info .info_item strong span{font-weight: 500;}
	.gnb_info .info_item strong .bank{font-size: 20px; font-weight: 700; color:#ee8015;}
	.gnb_info .info_item p{margin-top: 6px; color:#666666;}
	
	body.menu_open .mask{position:fixed; top: 0; left: 0; z-index:22; width:100%; height:100%; background-color:rgba(0,0,0,.8); transition:all .5s;}
	body.menu_open .header_gnb{left: 0;}
	
	#footer{border-radius:10px 10px 0 0;}
	#footer .footer_notice .inner{padding-left: 0; padding-right: 0;}
}

/* 768px */
@media screen and (max-width:768px){
	.footer_menu .menu_list li,
	.footer_info address > *{font-size: 13px;}
	.footer_info address{margin-left: -22px;}
	.footer_info address > *{margin: 0 0 6px 22px;}
	.footer_menu .menu_list ul{margin-left: -27px;}
	.footer_menu .menu_list li{margin-left:12px; padding-left: 15px;}
	
	.right_quick_banner .circle{width: 48px; height: 48px; background-size:auto 42px;}
}

/* 540px */
@media screen and (max-width:540px){
	.header_gnb{width:calc(100% - 60px);}
}

/* 480px */
@media screen and (max-width:480px){	
	.gnb_func .top_login ul{display: block; text-align: right;}
	.gnb_func .top_login li > a{font-size: 12px;}
	
	.right_search .search_layer{padding: 6px 13px 6px 20px;}
	.right_search .search_layer .search{width: 180px; padding-right: 24px;}
	.right_search .search_layer button{width: 20px;}

	.footer_info .copy{font-size:12px;}
}

@media screen and (max-width:370px){
	.header_logo{width: 144px; height: 35px;}
	.gnb_catagory .catagory > li span{font-size:13px;}
}

@keyframes msgbox {
	0%{transform:translateY(0px);}
	50%{transform:translateY(-6px);}
	100%{transform:translateY(0px);}
}

-webkit-@keyframes msgbox {
	0%{transform:translateY(0px);}
	50%{transform:translateY(-6px);}
	100%{transform:translateY(0px);}
}