@charset "utf-8";

/* header */
#header nav{text-align:center;}
#header .logo{position:absolute; left:0px; top:50%; transform:translateY(-50%);}
#header .logo > a{display:inline-block; width:140px; height:42px; background:url(../images/common/logo.png) no-repeat 50% 0 / 100% 100%; font-size:0px; vertical-align:middle;}
#header{border-top:6px solid #0b327a;}
#header .inr{position:relative; max-width:1200px; margin:0 auto; padding:45px 0px 25px;}
#header nav .gnb > li{display:inline-block; position:relative;}
#header nav .gnb > li > a{display:inline-block; margin-left:50px; padding-bottom:20px; font-size:17px; color:#222; font-weight:400;}
#header nav .gnb > li > a.on{color:#0b327a;}
#header nav .gnb > li:first-child > a{margin-left:0px;}
#header nav .gnb > li > ul{opacity:0; visibility:hidden; position:absolute; top:35px; left:0px; z-index:90; width:100%; min-width:165px; box-sizing:border-box; padding:30px 25px; background:#fff; border:1px solid #222; text-align:left; transition:0.3s ease;}
#header nav .gnb > li > ul > li{padding:2px 0px;}
#header nav .gnb > li > ul > li > a{display:inline-block; font-size:14px; color:#444; transition:0.3s ease;}
#header nav .gnb > li > ul > li > a:hover{color:#0b327a;}
#header nav .gnb > li > ul > li > ul{display:none;}
#header nav .gnb > li.active > ul{opacity:1; visibility:visible;}
.area_util{position:absolute; right:0px; top:50%; margin-top:2px; transform:translateY(-50%); -webkit-transform:translateY(calc(-50% + 0.5px));}
.area_util ul > li{display:inline-block; margin:0 17px;}
.area_util ul > li > a{display:inline-block; position:relative;}
.area_util ul > li > a span{opacity:0; position:absolute; bottom:-20px; left:50%; display:inline-block; padding:0 10px; background:#f1f1f1; border-radius:50rem; font-size:12px; color:#444; white-space:nowrap; transform:translateX(-50%) translateY(-20px); transition:0.3s ease;}
.area_util [data-util]:before{content:''; display:block; width:20px; height:20px; margin:0 auto 3px; background-repeat:no-repeat; background-position:50% 0;}
.area_util [data-util="login"]:before{background-image:url(../images/common/img_util_login.png);}
.area_util [data-util="logout"]:before{background-image:url(../images/common/img_util_logout.png);}
.area_util [data-util="join"]:before{background-image:url(../images/common/img_util_join.png);}
.area_util [data-util="mypage"]:before{background-image:url(../images/common/img_util_mypage.png);}
.area_util [data-util="basket"]:before{background-image:url(../images/common/img_util_basket.png);}
.area_util [data-util="basket"] i{display:inline-block; position:absolute; right:-10px; top:-8px; padding:2px 6px; background:#0b327a; border-radius:100%; font-size:10px; color:#fff;}
.area_util ul > li > a:hover span{opacity:1; transform:translateX(-50%) translateY(0px);}

#header .btn_menu{display:none; position:absolute; top:50%; right:0px; z-index:91; width:58px; height:58px; font-size:0px; text-align:center; transform:translateY(-50%); transition:0.5s ease-in-out;}
#header .btn_menu span{overflow:hidden; display:block; position:relative; top:50%; width:19px; height:12px; margin:0 auto; transform:translateY(-50%); -webkit-transform:translateY(calc(-50% + 0.5px));}
#header .btn_menu span i,
#header .btn_menu span:before,
#header .btn_menu span:after{display:block; position:absolute; height:2px; background:#222; transform:translateX(0px);}
#header .btn_menu span:before{content:''; width:19px;}
#header .btn_menu span:after{content:''; width:19px;}
#header .btn_menu span:before{right:0px; top:0px; transition:transform 0.5s ease 1.2s;}
#header .btn_menu span:after{left:0px; bottom:0px; transition:transform 0.5s ease 1s;}
#header .btn_menu span i{opacity:1; left:0px; top:5px; width:19px; transition:opacity 0.3s ease 0s, transform 0.5s ease 1.1s;}
#header .btn_menu em{display:block; overflow:hidden; position:absolute; top:50%; left:50%; width:19px; height:16px; margin:-8px 0 0 -9.5px; transform:translateX(19px); transition:transform 0.5s ease 0.5s;}
#header .btn_menu em i{display:block; position:absolute; width:0px; height:2px; background:#222; transform:rotate(0);}
#header .btn_menu em i:nth-of-type(1){top:1px; left:0px; transition:width 0.5s ease 0.5s, transform 0.5s ease 0s, top 0.5s ease 0s;}
#header .btn_menu em i:nth-of-type(2){bottom:1px; left:0px; transition:width 0.5s ease 0.5s, transform 0.5s ease 0s, bottom 0.5s ease 0s;}
#header .btn_menu:hover span i{opacity:0;}
#header .btn_menu.active span i,
#header .btn_menu.active span:before,
#header .btn_menu.active span:after{transform:translateX(-19px);}
#header .btn_menu.active span:before{transition-property:transform; transition-delay:0s;}
#header .btn_menu.active span i{transition-property:transform; transition-delay:0.1s;}
#header .btn_menu.active span:after{transition-property:transform; transition-delay:0.2s;}
#header .btn_menu.active em{transform:translateX(0); transition-duration:0s; transition-delay:0s;}
#header .btn_menu.active em i:nth-of-type(1){top:6px; width:100%; transform:rotate(45deg) perspective(500px); transition-delay:0.5s, 1s, 1s;}
#header .btn_menu.active em i:nth-of-type(2){bottom:8px; width:100%; transform:rotate(-45deg) perspective(500px); transition-delay:0.5s, 1s, 1s;}

/* shop */
 *[data-shop-list="default"] > li > a .percent{padding:10px 15px !important; margin-top:0px !important;}
 *[data-shop-list="default"] > li > a > em{font-size:18px;}

/* footer */
#footer{margin-top:45px;}
#footer .top{overflow:hidden; background:#0b327a;}
#footer .top .inr{max-width:1200px; margin:0 auto;}
#footer .top .inr:after{content:''; display:block; clear:both;}
#footer .top .inr > div{float:left; display:flex; flex-direction:row; align-items:center; width:50%; height:75px; box-sizing:border-box; color:#fff;}
#footer .top h2{display:inline-block; font-size:16px;}
#footer .story > a{display:inline-block; margin-left:25px; color:#fff; font-size:14px; font-weight:100;}
#footer .notice{position:relative;}
#footer .notice h2{padding-left:50px; border-left:1px solid rgba(255,255,255,0.38);}
#footer .notice .bx-wrapper{width:85%; margin-left:5%;}
#footer .notice .list{width:calc(100% - 130px) !important;}
#footer .notice .list li{width:80% !important;}
#footer .notice .list a{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; font-size:14px; font-weight:100;}
#footer .notice .bx-controls{position:absolute; right:0px; top:0px; width:130px; height:100%; box-sizing:border-box; background:#fff; border-top:1px solid #eee; border-bottom:1px solid #eee;}
#footer .notice .bx-controls > div{display:flex; flex-direction:row; align-items:center; height:100%; padding:0 10px;}
#footer .notice .bx-controls > div:after{content:''; display:block; clear:both;}
#footer .notice .bx-controls a{display:block; float:left; width:50%; text-align:center; color:#aaa; font-size:13px; transition:0.3s ease;}
#footer .notice .bx-controls a.bx-next{border-left:1px solid #ddd;}
#footer .notice .bx-controls a:hover{color:#0b327a;}
#footer .bottom{padding:45px 0 40px; text-align:center;}
#footer .bottom .link{text-align:center;}
#footer .bottom .link > li{display:inline-block; position:relative; padding:0 30px;}
#footer .bottom .link > li:before{content:''; display:block; position:absolute; top:50%; left:0px; width:1px; height:11px; margin-top:-6px; background:#ddd;}
#footer .bottom .link > li:nth-of-type(1):before{display:none;}
#footer .bottom .link > li > a{display:inline-block; font-size:15px; color:#222; font-weight:300; transition:0.3s ease;}
#footer .bottom .link > li > a strong{font-weight:400;}
#footer .sns{margin:30px 0 20px; text-align:center;}
#footer .sns > li{display:inline-block; margin:0 7px;}
#footer .sns > li > a{display:inline-block; position:relative; font-size:0px;}
#footer .sns > li > a:before{content:''; display:block; width:45px; height:45px; margin:0 auto; background-repeat:no-repeat; background-position:50% 0; background-size:auto 100%;}
#footer .sns > li [data-sns="face"]:before{background-image:url(../images/common/img_face.png);}
#footer .sns > li [data-sns="instar"]:before{background-image:url(../images/common/img_instar.png);}
#footer .sns > li [data-sns="blog"]:before{background-image:url(../images/common/img_blog.png);}
#footer .sns > li [data-sns="kakao"]:before{background-image:url(../images/common/img_kakao.png);}
#footer .copy{color:#666;}
#footer .copy span{display:inline-block; margin:0 4px; font-size:14px; font-weight:300; font-family:'Noto Sans KR' ,Sans-serif;}
#footer .copy span a{display:inline-block; color:#666;}
#footer .copy p{margin-top:15px; font-size:13px; color:#333;}

.lnb{max-width:1200px; margin:0 auto 50px;}
.lnb > ul{text-align:center;}
.lnb > ul > li{display:inline-block; margin:0 5px;}
.lnb > ul > li > a{display:inline-block; display:flex; flex-direction:column; justify-content:center; min-width:140px; height:50px; box-sizing:border-box; border:1px solid #e7e7e7; font-size:14px; text-align:center;}
.lnb > ul > li > a.on{border-color:#222; color:#222;}

@media screen and (max-width:1250px){
	#header .inr{padding-left:15px; padding-right:15px;}	
	#header .logo{left:15px;}
	.area_util{right:15px;}
	#footer .top .inr{padding-left:15px; padding-right:15px;}
}

@media screen and (max-width:1024px){
	#header .logo{display:inline-block; position:static; margin-left:15px; transform:translateY(0);}
	#header .logo > a{background-image:url(../images/common/logo@x2.png);}
	#header .btn_menu{display:block;}
	#header .inr{padding:10px 0px;}
	
	#header .area_menu_all{display:block; opacity:0; visibility:hidden; position:fixed; top:0px; z-index:90; width:100%; height:100%; padding:0px; background:transparent; border-width:0px; transition:0.3s ease 0.7s;}	
	#header .area_menu_all > ul > li:not(.gnb_cate){display:block;}
	#header .area_menu_all .btn_close{display:block; opacity:0; visibility:hidden; position:fixed; top:0px; left:0px; z-index:1; display:block; width:100%; height:100%; background:rgba(0,0,0,0.3); font-size:0px; transition:0.3s ease;}
	#header .area_menu_all .gnb{overflow-y:auto; position:absolute; top:0px; left:-80%; z-index:10; width:80%; height:100%; background:#fff; transition:0.7s ease;}
	#header .area_menu_all > ul li{position:relative;}
	#header .area_menu_all > ul > li{display:block; padding:0px; border-bottom:1px solid #e9e9e9;}
	#header .area_menu_all > ul > li > a{float:none; display:block; width:auto; padding:10px 40px 10px 15px; margin-left:0px; font-size:18px; text-align:left;}
	#header .area_menu_all > ul > li > ul{float:none; opacity:1; visibility:visible; position:static; width:auto; margin:0 15px 15px; padding:0; background:#f5f5f5; border-width:0px; transition:none;}
	#header .area_menu_all > ul > li > ul > li{display:block; margin:0px;}
	#header .area_menu_all > ul > li > ul > li:hover > a,
	#header .area_menu_all > ul > li > ul > li:focus > a{color:#444;}
	#header .area_menu_all > ul > li > ul > li.only{width:100%;}
	#header .area_menu_all > ul > li > ul > li.active > a,
	#header .area_menu_all > ul > li > ul > li.active:hover > a,
	#header .area_menu_all > ul > li > ul > li.active:focus > a{color:#f2483b;}
	#header .area_menu_all > ul > li > ul > li > a{display:block; width:auto; padding:10px 40px 10px 10px; border-bottom:1px solid #d8d8d8;}
	#header .area_menu_all > ul > li > ul > li > *{display:block; vertical-align:middle;}	
	#header .area_menu_all > ul > li > ul > li:last-child > a{border-bottom-width:0px;}
	#header .area_menu_all > ul > li > ul > li:last-child > ul{border-top:1px solid #d8d8d8; border-bottom-width:0px;}
	#header .area_menu_all > ul > li > ul > li > ul{padding:10px 15px; background:#eaeaea; border-bottom:1px solid #d8d8d8;}
	#header .area_menu_all > ul > li > ul > li > ul > li{display:block;}
	#header .area_menu_all > ul > li > ul > li > ul > li > a{padding:2px 0px; color:#333;}
	#header .area_menu_all .open{display:block; position:absolute; right:5px; top:5px; width:35px; height:35px; background:transparent; font-size:0px;}
	#header .area_menu_all .open:before,
	#header .area_menu_all .open:after{content:''; display:block; position:absolute; top:50%; left:50%; width:12px; height:2px; margin-top:-6px; background:#cfcece;}
	#header .area_menu_all .open:before{margin-left:-8px; transform:rotate(45deg); transform-origin:0 0;}
	#header .area_menu_all .open:after{margin-left:-5px;transform:rotate(-45deg); transform-origin:100% 0;}
	#header .area_menu_all .open.active{transform:rotate(180deg);}
	#header .area_menu_all .open:focus{outline:none;}

	#header .area_menu_all.active,
	#header .area_menu_all.active .btn_close{opacity:1; visibility:visible; transition-delay:0s;}
	#header .area_menu_all.active .gnb{left:0px;}
	
	.area_util{right:60px;}
	.area_util ul > li > a span{display:none;}
	
	#footer .top .inr{padding-right:0px;}
	#footer .top .inr > div.story{display:none;}
	#footer .top .inr > div{float:none; width:100%;}
	#footer .notice h2{padding-left:0px; border-left-width:0px;}	
	#footer .notice .bx-wrapper{width:auto; margin-left:5%;}
	#footer .notice .list{width:auto !important;}
	#footer .notice .list li{width:calc(100% - 220px) !important;}

	.lnb{margin:0 auto 30px;}
}

@media screen and (max-width:750px){
	*[data-shop-list="default"] > li > a .percent{height:59px !important;}
	#footer .bottom{padding:35px 0 30px;}
	#footer .bottom .logo{width:270px; height:33px;}
	#footer .bottom .link{margin-top:20px;}
	#footer .bottom .link > li{padding:0 15px;}
	#footer .bottom .link > li > a{font-size:14px;}
	#footer .sns{margin:20px 0 10px;}
	#footer .copy span{font-size:13px;}

	.lnb > ul > li > a{min-width:inherit; padding-left:25px; padding-right:25px;}
}

@media screen and (max-width:480px){
	#header .logo > a{width:98px; height:29px;}
	.area_util ul > li{margin:0 10px;}
	*[data-shop-list="default"] > li > a .percent{height:55px !important; padding:10px 13px !important;}
	
	#footer .bottom .link > li{padding:0 5px;}
	#footer .bottom .link > li > a{font-size:13px;}
	#footer .sns > li{margin:0 3px;}
	#footer .sns > li > a:before{width:35px; height:35px;}
	#footer .copy{padding-left:10px; padding-right:10px;}
	#footer .copy span{font-size:12px;}

	.lnb > ul > li{margin:0 3px;}
	.lnb > ul > li > a{height:40px; padding-left:15px; padding-right:15px;}
}

@media screen and (max-width:400px){
	#footer .top .inr > div{height:60px;}
	#footer .notice .bx-wrapper{margin-left:3%;}
	#footer .notice .bx-controls{width:90px;}
	#footer .notice .bx-controls > div{padding:0px;}
	#footer .notice .list li{width:calc(100% - 150px) !important;}
}

@media screen and (max-width:320px){
	.area_util ul > li{margin:0 8px;}
	*[data-shop-list="default"] > li > a .percent{height:50px !important; padding:7px 10px !important;}
}

@media screen and (max-width:300px){
	#header .btn_menu{overflow:hidden; width:40px;}
	.area_util{right:45px;}
	.area_util ul > li{margin:0 4px;}
}