/*************** 공통 레이아웃 ***************/

.fwrap, .swrap { margin-left:auto; margin-right:auto; }
.fwrap { width:calc(100% - 120px);  }
.swrap { width:1360px; }
@media (max-width:1600px) {
	.fwrap, .swrap { width:92%; }
}





/*************** TOP 영역 ***************/

#head { --top_h : 90px; }
#head, #head .cate, #head #sub_items { height:var(--top_h); transition: height ease-in-out .4s;}



/* #head */
#head { z-index: 1000; position: fixed; width: 100%; left:0; top:0; background:#fff;  box-shadow: 0 2px 8px 0px rgba(0, 0, 0, .1) }
#head #top_area { display:flex; justify-content:space-between; align-items:center; }

#head #logo { display:block; }

#head #gnb { position:relative; z-index:1000; margin-left:auto; }
#head #gnb:after { clear:both; visibility:hidden; display:block; content:''; }
#head #gnb li { float:left; }
#head #gnb .cate { position: relative; display: block; }

#head #gnb .cate > strong { display:block; position:relative; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family:var(--inter); color: #111; font-size: 17px; font-weight:500; text-align:center; line-height:1.2; padding:0 36px; }

#head #gnb .cate:hover > strong { color: #113b9e; }



/* Top Items */

#head #sub_items { display:none; align-items:center; }
#head #sub_items > li:nth-of-type(n+2) { margin-left: 20px; }

#head #sub_items > li #sitemap_btn { display:block; width: 21px; position:relative; cursor:pointer; }
#head #sub_items > li #sitemap_btn > div { width: 100%; height: 2px; background-color:var(--mc); transform-origin: center; transition: transform 0.4s; }
#head #sub_items > li #sitemap_btn > div:nth-of-type(n+2) { margin-top:4px; }



/* re_height */
#head.re_height, #head.fix.sub { --top_h : 70px; }

#head.re_height #gnb .cate:hover ~ .sub_menu, #head.re_height .sub_menu:hover { padding: 15px 0; }
#head.re_height .sub_menu a { padding: 5px 10px; }
#head.re_height #logo img { zoom:.8; }



/* fix */
#head.fix #gnb { margin-right:auto; }



/* sub page */
#head.sub #gnb, #head.sub #sub_items, #head.sub #sitemap { display:none; }
#head.sub #logo { line-height:var(--top_h); text-align:center; width:100%; display:block !important; }



@media (max-width:1660px){
	#head #gnb .cate > strong { padding:0 calc(10px + 1.5vw); }
	#head.sub { --top_h : 70px; }
}

@media (min-width:1251px){
	#head.fix #logo { display:none; }
}
@media (max-width:1250px){
	#head, #head.sub { --top_h : 52px; }
	#head #logo img { zoom:.65; }
	#head #gnb { display: none; }
	#head #sub_items { display:flex; }

}







/* sitemap */
#head #sitemap { z-index: 1050; position: fixed; opacity: 0; left: 100vw; top:0; width: 100%; height:100%; background-color: rgba(0, 0, 0, 0.7); transition: all .5s; }
#head.sitemap_on #sitemap { opacity: 1; left: 0; }


#head #sitemap .sitemap_wrap { height: 100%; width:100%; position:absolute; left:100vw; transition: all .8s; }
#head.sitemap_on #sitemap .sitemap_wrap { left:0; }

#head #sitemap .mobile_menu li a { display:block; color: #fff; font-size: 24px; font-weight: 700; line-height:1; padding:16px 0; text-align:center; }

#head.sitemap_on #sub_items { z-index:1100; }
#head.sitemap_on #sub_items > li #sitemap_btn { padding:20px 0; }
#head.sitemap_on #sub_items > li #sitemap_btn > div { position: absolute; background-color: #fff !important; }
#head.sitemap_on #sub_items > li #sitemap_btn > div:nth-of-type(n+2) { margin-top:0; }

#head.sitemap_on #sub_items > li #sitemap_btn > div:nth-child(1) { transform: rotateZ(45deg); }
#head.sitemap_on #sub_items > li #sitemap_btn > div:nth-child(2) { transform: translateX(100%); opacity: 0; }
#head.sitemap_on #sub_items > li #sitemap_btn > div:nth-child(3) { transform: rotateZ(-45deg); }


@media (max-width: 600px){
	#head.sitemap_on { overflow:hidden; }
	#head #sitemap .sitemap_wrap { overflow:auto; }
}










/***** 하단 *****/


#footer { position:relative; padding: 120px 0; background-color:var(--mc); }
#footer.sub { padding: 100px 0; }
#footer .mail_addr { font-family:var(--inter); font-size: 16px; font-weight: 500; color:#fff; }
#footer .copy { font-family:var(--inter); font-size: 12px; font-weight: 400; color:#fff; opacity:.6; line-height:1.4; }


@media (max-width:1660px) {
	#footer .f_logo img { width:calc(180px + 9vw); }
}

@media (max-width:767px) {
	#footer .cont br { display:none; }
}