.wrapper{width:1200px; margin:0 auto;}

#header{width:100%; background:#fff;}
#header .inr_top{position:relative; max-width:1200px; margin:0 auto; padding:25px 0; transition:0.3s ease;}
#header .inr_bottom{position:relative; padding:0 15px; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;}
#header h1{width:240px; height:30px;}
#header h1 > a{display:block; width:100%; height:100%; background:url(/images/common/logo.svg) no-repeat 50% 0; font-size:0px;}
#header .area_util{position:absolute; right:23px; top:50%; transform:translateY(-50%); -webkit-transform:translateY(calc(-50% + 0.5px));}
#header.fix .inr_top{padding:22px 0;}
#header.fix h1{height: 50px;}

.area_util ul > li{display:inline-block;}
.area_util ul > li:after{content:''; display:inline-block; width:1px; height:8px; margin:0 10px; background-color:#d4d4d4;}
.area_util ul > li:last-child:after{display: none;}
.area_util .search{position:relative;}
.area_util [data-util]{display:inline-block;}
.area_util [data-util] > span{display:inline-block; vertical-align:middle; font-size:14px; color:#828282;}
.area_util [data-util="basket"] > span{padding-right:30px; background:url(/images/common/img_cart.svg) no-repeat 100%; background-size:25px 25px;}
.area_util [data-util="basket"]{position:relative;}
.area_util [data-util="basket"] i{display:inline-block; position:absolute; right:-10px; top:-5px; padding:2px 6px; background:#1848a0; border-radius:100%; font-size:10px; color:#fff;}
.mob_util{display:none;}

.area_topmenu{position: absolute; top:7px; right: 15px; transition:0.3s ease;}
.area_topmenu li{display: inline-block; vertical-align: middle; font-size: 0; text-indent: 100%; background-position: 50% 50%; background-repeat: no-repeat; background-size: 100% auto;}
.area_topmenu li:nth-child(1){width:60px; height: 32px; background-image:url(/images/common/img_top01.svg);}
.area_topmenu li:nth-child(2){margin-right:4px; width:82px; height: 22px; background-image:url(/images/common/img_top02.svg);}
.area_topmenu li:nth-child(3){width:196px; height: 20px; background-image:url(/images/common/img_top03.svg);}
#header.fix .area_topmenu{top:2px;}

#header nav{position:relative; max-width:1200px; box-sizing:border-box; margin:0 auto; padding-left:255px;}
#header nav .gnb{text-align:left;}
#header nav .gnb > li{display:inline-block; position:relative; padding:0 25px;}
#header nav .gnb > li > a{display:block; height:50px; line-height:50px; padding:0 15px; font-size:18px; color:#161616; text-align:left; transition:0.3s ease;}
#header nav .gnb > li:last-child{padding-right:0px;}
#header nav .gnb > li:last-child > a{padding-right:0px;}
#header nav .gnb > li > ul{opacity:0; visibility:hidden; position:absolute; top:50px; left:0px; z-index:90; width:100%; min-width:165px; box-sizing:border-box; padding:30px 25px; background:#fff; border:1px solid #6b6b6b; 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:#6b6b6b;}
#header nav .gnb > li > ul > li > ul{display:none;}
#header nav .gnb > li.active > ul{opacity:1; visibility:visible;}

#header .btn_menu{display:inline-block; position:absolute; top:-1px; left:0px; z-index:91; width:220px; height:52px; font-size:0px; text-align:left; background-color: #daa33e; transition:0.5s ease-in-out;}
#header .btn_menu span{overflow:hidden; display:block; position:relative; top:50%; left:35px; width:19px; height:12px; transform:translateY(-50%); -webkit-transform:translateY(calc(-50% + 0.5px));}
#header .btn_menu u{display: inline-block; margin-top:3px; padding-left:65px; font-size:15px; font-weight: 300; color:#fff; text-decoration: none;}
#header .btn_menu span i,
#header .btn_menu span:before,
#header .btn_menu span:after{display:block; position:absolute; height:2px; background:#fff; 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:35px; 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:#fff; 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;}
#header .btn_menu.active{background-color: #cc8400;}

.area_menu{position:absolute; display: block; top:58px; left:0; z-index:91; width:260px; background-color: red;}
.area_menu_all{display:none; position:absolute; top:50px; left:50%; z-index:91; width:1200px; box-sizing:border-box; margin-left:-600px; padding:35px 60px; background:#fff; border:1px solid #6b6b6b;}
.area_menu_all > ul > li:not(.gnb_cate){display:none;}
.area_menu_all > ul > li{padding:10px 0; display:inline-block; width:calc(100% / 4 - 4.1px); vertical-align: top;}
.area_menu_all > ul .cate_line{width:100%; height:1px; background-color: #e9e9e9;}
.area_menu_all > ul > li:after{content:''; display:block; clear:both;}
.area_menu_all > ul > li > a{float:left; display:inline-block; width:20%; font-size:20px; font-weight:700; color:#222;}
.area_menu_all > ul > li > ul{float:left; width:80%; padding-top:5px;}
.area_menu_all > ul > li > ul > li{display:block;}
.area_menu_all > ul > li > ul > li > a{display: block; margin-bottom:5px; font-weight:700;}
.area_menu_all > ul > li > ul > li:hover > a,
.area_menu_all > ul > li > ul > li:focus > a{color:#6b6b6b;}
.area_menu_all > ul > li > ul > li > ul > li{display:inline-block;}
.area_menu_all > ul > li > ul > li > ul > li > a{display:block; color:#888; transition:0.3s ease;}
.area_menu_all > ul > li > ul > li > ul > li:last-child > a{padding-right:0px;}
.area_menu_all > ul > li > ul > li > ul > li > a:hover{color:#222;}

/*.area_menu_all > ul > li > ul > li.only{width:20%;}*/
.area_menu_all.active{display:block;}
.area_menu_all .btn_close{display:none;}
.area_menu_all .open{display:none; position:absolute; right:5px; top:5px; width:35px; height:35px; background:transparent; font-size:0px;}
.area_menu_all .open:before,
.area_menu_all .open:after{content:''; display:block; position:absolute; top:50%; left:50%; width:12px; height:2px; margin-top:-6px; background:#cfcece;}
.area_menu_all .open:before{margin-left:-8px; transform:rotate(45deg); transform-origin:0 0;}
.area_menu_all .open:after{margin-left:-5px;transform:rotate(-45deg); transform-origin:100% 0;}
.area_menu_all .open.active{transform:rotate(180deg);}
.area_menu_all .open:focus{outline:none;}

/* footer */
#footer{overflow: hidden; clear: both; background: #111; padding:80px 0;}
#footer .wrapper{position:relative;}
#footer .footer_top{margin:0 auto; overflow: hidden;}
#footer .footer_top ul{margin-bottom:30px;}
#footer .footer_top ul li{display:inline-block; margin-right:15px;}
#footer .footer_top ul li a{color:#fff;}
#footer .footer_top h1{margin-bottom:25px;}
#footer .footer_top h1 img{height:27px;}

#footer .info{display: block; clear: both;}
#footer .info > li{display:inline-block; margin-right:15px; margin-bottom:4px; font-size:15px; font-weight:500; color:#b1b1b1;}
#footer .info > li a{color:#b1b1b1;}
#footer .info > li a.button{margin:0px !important;}
#footer .info > li em{display:inline-block; margin-right:5px; color:#ccc; font-weight:500;}
#footer .copyright{margin-top:30px; color:#999;}
#footer .copyright > i{display: inline-block;}
#footer .btn_top{display:inline-block; position:absolute; top:0; right:0px; z-index:70; width:60px; height:60px; background:#fff; border-radius:50%; font-size:0px; transition:0.3s ease;}
#footer .btn_top:before,
#footer .btn_top:after{content:''; display:block; position:absolute; top:50%; left:50%; width:2px; height:10px; margin-top:-3px; background:#333;}
#footer .btn_top:before{margin-left:-3px; transform:rotate(45deg);}
#footer .btn_top:after{margin-left:3px; transform:rotate(-45deg);}



@media screen and (max-width:1280px){
	#header .inr_top,
	.wrapper{width:96%;}
	#header nav{overflow: hidden; width:100%; padding-left:0;}
	#header nav .gnb{float:right;}
	#header .inr_bottom{padding-left:0;}
	.area_menu_all{width:100%; left:0; margin-left:0;}
}

@media screen and (max-width:1100px){
	#header nav .gnb > li{padding-right:0;}


}

@media screen and (max-width:959px){

	#header{width:100%; padding-bottom:55px; border-bottom:1px solid #ebebeb;}
	#header .inr_top{width:100%; padding:0; border-bottom:0;}
	#header .inr_bottom{position:static; border-top-width:0px; border-bottom-width:0px;}
	#header nav{position:static;}
	#header nav .gnb{display:none;}
	#header h1{position:absolute; left:50%; top:50px; height:35px; margin:0 auto; transform: translateX(-50%); transition:0.3s ease;}
	#header .btn_menu{left:auto; right:0; top:35px; width:50px; height:50px; background-color: transparent;}
	#header .btn_menu:hover span i{opacity:1;}
	#header .btn_menu span{width:20px; left:0px; margin:0 auto;}
	#header .btn_menu u{display: none;}
	#header .btn_menu span i,
	#header .btn_menu span:before,
	#header .btn_menu span:after{width:20px; height:1px; background:#222;}
	#header .btn_menu.active{background:none;}
	#header .btn_menu em{display:none; left:25px;}
	#header .btn_menu.active em i{background:#222;}
	#header .btn_menu.active span{display:none;}
	#header .btn_menu.active em{display:block;}

	#header .area_util{position: relative; text-align: right; background:#333; border-bottom:1px solid #e4e4e4; right:0; top:0; padding:5px 15px; transform:inherit; -webkit-transform:inherit;}
	.area_util ul > li:after{margin:0 5px 0 8px;}
	.area_util [data-util="basket"] > span{padding-right: 0; color:#fff;}
	.area_util [data-util="basket"] i{display: none;}	
	.area_util [data-util] > span{color:#fff;}

	.area_menu_all{display:block; opacity:0; visibility:hidden; position:fixed; margin-left:0px; top:0px; left:0px; width:100%; height:100%; padding:0px; background:transparent; border-width:0px; transition:0.3s ease 0.7s;}	
	.area_menu_all > ul > li:not(.gnb_cate){display:block; width:100%;}
	.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;}
	.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;}
	.area_menu_all > ul li{position:relative;}
	.area_menu_all > ul > li{padding:0px; border-bottom:1px solid #e9e9e9;}
	.area_menu_all > ul > li > a{float:none; display:block; width:auto; padding:10px 40px 10px 15px; font-size:16px;}
	.area_menu_all > ul > li > ul{float:none; width:auto; margin:0 15px 15px; padding-top:0px; background:#f5f5f5;}
	.area_menu_all > ul > li > ul > li{display:block; margin:0px;}
	.area_menu_all > ul > li > ul > li:hover > a,
	.area_menu_all > ul > li > ul > li:focus > a{color:#444;}
	.area_menu_all > ul > li > ul > li.only{width:100%;}
	.area_menu_all > ul > li > ul > li.active > a,
	.area_menu_all > ul > li > ul > li.active:hover > a,
	.area_menu_all > ul > li > ul > li.active:focus > a{color:#6b6b6b;}
	.area_menu_all > ul > li > ul > li > a{display:block; width:auto; padding:10px 40px 10px 10px; border-bottom:1px solid #d8d8d8;}
	.area_menu_all > ul > li > ul > li > *{display:block; vertical-align:middle;}	
	.area_menu_all > ul > li > ul > li:last-child > a{border-bottom-width:0px;}
	.area_menu_all > ul > li > ul > li:last-child > ul{border-top:1px solid #d8d8d8; border-bottom-width:0px;}
	.area_menu_all > ul > li > ul > li > ul{padding:10px 15px; background:#eaeaea; border-bottom:1px solid #d8d8d8;}
	.area_menu_all > ul > li > ul > li > ul > li{display:block;}
	.area_menu_all > ul > li > ul > li > ul > li > a{padding:2px 0px; color:#333;}
	.area_menu_all .open{display:block;}
	.area_menu_all.active,
	.area_menu_all.active .btn_close{opacity:1; visibility:visible; transition-delay:0s;}
	.area_menu_all.active .gnb{left:0px;}
	.area_menu_all .gnb .gnb_cate{display: none;}
}

@media screen and (max-width:767px){
	#footer .footer_top h1 img,
	#header h1{height:20px;}

}
@media screen and (max-width:500px){
	.area_util [data-util] > span{font-size:12px;}

	#footer .btn_top{width:40px; height:40px;}
	
	#footer .footer_top ul li a,
	#footer .copyright,
	#footer .info > li{font-size:13px;}
	
}