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

.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_opt { position:relative; height:40px; z-index:1100; }
#top_opt table { height:100%; }
#top_opt td { border-left:1px solid rgba(255,255,255,.3); text-align:center; width:130px; font-family:'roboto', 'pretendard', sans-serif; font-size:11px; font-weight:500; color:#fff; letter-spacing:0; position:relative; cursor:pointer; height:100%; }
#top_opt td a { position:absolute; display:block; width:100%; height:100%; left:0; top:0; }
#top_opt td.opt_arrow img { margin-left:6px; }


.opt_box { position:absolute; right:0; padding:12px 0; background:#fff; z-index:2100; display:none; box-shadow: 0 0 10px 0px rgba(0, 0, 0, .15); }
.opt_box a { display:block; font-size:14px; padding:5px 0; color:#777; letter-spacing:0; line-height:120%; }
.opt_box a:hover { color:#111; }

#family_box { width:260px; padding-left:23px; }




/*************** TOP 메뉴영역 ***************/

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


/* #head */
#head { z-index: 1000; position: fixed; width: 100%; }
#head:after { z-index: -1; display: none; content: ''; position: absolute; top: 0; width: 100%; height:var(--top_h); background-color: #fff; }
#head.re_color:after { display: block; }

#head #gnb { position:relative; }
#head #gnb ul { position:relative; left: 53%; transform: translateX(-50%); width: 1160px; z-index:1000; display: flex; }
#head #gnb ul > li { width: 100%; position:relative; overflow:hidden; }
#head #gnb ul > li:nth-of-type(2) { width:120%; }

#head #gnb .cate { position: relative; display: block; }
#head #gnb .cate > strong { display:block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-size: 18px; font-weight:600; text-align:center; line-height:1.2; white-space:nowrap; }

.eng #head #gnb .cate > strong { font-size: 17px; }

#head #gnb .cate i { display:block; position: absolute; left:50%; bottom:-2px; width:0; height:2px; transition:all .4s; }
#head #gnb ul > li:hover .cate i { width:100%; left:0; }

#head #gnb .sub_menu { opacity: 0; height:0; overflow:hidden; transform:translateY(-20px); }
#head #gnb ul:hover li .sub_menu { opacity: 1; height:auto; overflow:auto; transform:translateY(0px); padding: 24px 0; transition: height .6s, opacity 1s, transform .5s; }

#head #gnb .sub_menu a { display: block; padding: 6px 10px; text-align: center; color: #111; font-size: 14.5px; line-height: 1.3; opacity:.7; }
.eng #head #gnb .sub_menu a { font-family:var(--roboto_c); }

#head #gnb .sub_menu a:hover { opacity:1; }
#head #gnb:hover + #top_items { background:#fff; }


/* dropdown_bg */
#head #dropdown_bg { z-index: 900; position: absolute; top: var(--top_h); width: 100%; height:0; transition: all .6s; background-color:rgba(249,249,249,0.87); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

#head #gnb ul:hover + #dropdown_bg { height: calc(100% - var(--top_h)); }






/* Top Items */

#head #top_items { position: absolute; width: 100%; top:0; left:0; z-index:999; }
#top_items .fwrap { position: relative; height:100%; display:flex; align-items:center; justify-content:space-between; }

#top_items #logo { display:block; }
#top_items #logo img:nth-of-type(2) { display:none; }

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

#head #top_items #sub_items #lang_btn a { display:inline-block; padding:16px; font-size:17px; color:rgba(255,255,255,.5); line-height:1; }
#head #top_items #sub_items #lang_btn a.on { color:#fff; }
#head #top_items #sub_items #lang_btn * { display:inline-block; vertical-align:middle; }
#head #top_items #sub_items #lang_btn i { border-left:1px solid #fff; height:15px; opacity:.5; }


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







/* re_height */
#head.re_height { --top_h : 70px; }
#head.re_height #gnb ul:hover li .sub_menu { padding: 18px 0; }
#head.re_height #gnb .sub_menu a { padding: 5px 10px; }
#head.re_height #top_items #logo img { zoom:.8; }


/* re color */
#head.re_color #gnb .cate > strong { color: #222; }
#head.re_color #top_items #logo img:first-of-type { display:none; }
#head.re_color #top_items #logo img:nth-of-type(2) { display:inline; }

#head.re_color #top_items #sub_items #lang_btn a { color:#aaa; }
#head.re_color #top_items #sub_items #lang_btn a.on { color:#222; }
#head.re_color #top_items #sub_items #lang_btn i { border-color:#111; }

#head.re_color #top_items #sub_items > li #sitemap_btn > div { background-color: #333; }




/* fix */
#head.fix:after { box-shadow: 0 0 10px 0px rgba(0, 0, 0, .15); }



#head.disable { display: none; }
#head.disable.sitemap_on { display:block; }


@media (max-width:1660px){
	#head #gnb ul { width:900px; }
	#head #top_items #sub_items > li:nth-of-type(n+2) { margin-left:20px; }
	#head #top_items #sub_items #lang_btn a { padding:13px; }
	#head #top_items #sub_items #lang_btn i { height:13px; }
	#head #top_items #sub_items > li #sitemap_btn { width: 24px; }
	#head #top_items #sub_items > li #sitemap_btn > div:nth-of-type(n+2) { margin-top:5px; }
}
@media (max-width:1400px){
	#head #gnb ul { width:840px; }
}
@media (max-width:1250px){
	#head { --top_h : 50px; }
	#head #top_items #logo img { zoom:.65; }
	#head #gnb { display: none; }
	#head #top_items #sub_items #lang_btn i { height:11px; }
	#head #top_items #sub_items > li:nth-of-type(n+2) { margin-left:15px; }
	#head #top_items #sub_items > li #sitemap_btn { width: 21px; }
	#head #top_items #sub_items > li #sitemap_btn > div:nth-of-type(n+2) { margin-top:4px; }
}
@media (max-width:767px){
	#head #top_items #sub_items > li:nth-of-type(n+2) { margin-left:12px; }
}





/* 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;  background-color: #fff; transition: all .8s; }
#head.sitemap_on #sitemap .sitemap_wrap { left:0; }

#head #sitemap .fwrap { position: relative; height: 100%; }

#head #sitemap .address { position: absolute; bottom:0; width:20%; }
#head #sitemap .address dt { font-size: 16px; font-weight: 700; color: #111; }
#head #sitemap .address dd { opacity: .8; font-size: 15px; line-height: 1.5; color: #111; width:80%; }

#head #sitemap .con { position: absolute; width: 100%; top:52%; transform:translateY(-50%); }
#head #sitemap .con:after { clear:both; visibility:hidden; display:block; content:''; }
#head #sitemap .con p.tit { float: left; color: var(--mc); font-size: 58px; font-weight: 800; }

#head #sitemap .maps { float: right; display: flex; flex-wrap: wrap; width: 70%; margin: 0 -3.5vw calc(-30px - 3vw) 0; }
#head #sitemap .maps > li { width: 33.3333%; padding: 0 3.5vw calc(30px + 3vw) 0; }
#head #sitemap .maps > li .box > p { color: #111; font-size: 28px; font-weight: 700; }

#head #sitemap .maps > li .box .bar { margin: 22px 0; width: 100%; height: 2px; background-color: #eee; }
#head #sitemap .maps > li .box .bar:before { content:''; display:block; width: 0; height: 2px; background-color: var(--mc); transition: all .5s; }
#head #sitemap .maps > li:hover .box .bar:before { width: 100%; }


#head #sitemap .maps > li .box .sub li a { display:block; padding:5px 0; opacity: .7; color: #000; font-size: 16px; line-height: 1.4; }
#head #sitemap .maps > li .box .sub li a:hover { opacity: 1; }

#head #sitemap .maps.cnt4, #sitemap .maps.cnt8 { width: 77%; margin: 0 -3.2vw calc(-30px - 3vw) 0; }
#head #sitemap .maps.cnt4 > li, #sitemap .maps.cnt8 > li { width: 25%; padding: 0 3.2vw calc(30px + 3vw) 0; }


#head.sitemap_on #top_items #logo img:first-child { display:none; }
#head.sitemap_on #top_items #logo img:nth-of-type(2) { display:inline; }

#head.re_color.sitemap_on #top_items #logo img:first-child { display:none; }
#head.re_color.sitemap_on #top_items #logo img:nth-of-type(2) { display:inline; }


#head.sitemap_on #top_items { z-index:1100; }

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

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

#head.sitemap_on #top_items #sub_items #lang_btn a { color:#aaa; }
#head.sitemap_on #top_items #sub_items #lang_btn a.on { color:#222; }
#head.sitemap_on #top_items #sub_items #lang_btn i { border-color:#111; }


@media (max-width: 1660px){
	#head #sitemap .maps > li .box .sub li a { padding:4px 0; }
	#head #sitemap .address dd { width:100%; }
}

@media (max-width: 1023px){
	#head #sitemap .address { display:none; }
	#head #sitemap .maps { width:100%; margin-top:calc(20px + 3vw); }
}

@media (min-width: 601px){
	#head #sitemap .maps > li .box .sub { display:block !important; }
}
@media (max-width: 600px){
	/*#head.sitemap_on { overflow:hidden; }*/
    #head.sitemap_on #top_items { border-bottom:0; }
	#head #sitemap .sitemap_wrap { overflow:auto; }
	#head #sitemap .con { top:90px; transform:translateY(0); }
	#head #sitemap .con p.tit { display: none; }
	#head #sitemap  .address { display:none; }
	#head #sitemap .maps { float: none; display: block; width: 100%; margin: 0; }
	#head #sitemap .maps > li { margin:0; width: 100%; padding: 0; cursor: pointer; text-align:center; }

	#head #sitemap .maps { border-bottom:1px solid var(--mc); }
	#head #sitemap .maps > li .box > p { padding:calc(15px + 1vw) 0; border-top:1px solid var(--mc); }
	#head #sitemap .maps > li .box .bar, #head #sitemap .maps > li .box .sub { display:none; }
	#head #sitemap .maps > li .box .sub li a { opacity: 1; padding:calc(10px + 0.3vw) calc(10px + 0.3vw); background:#f5f5f5; margin-top:1px; color:#111;}
}










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


#footer { position:relative; padding: 70px 0; background-color:#222; }
#footer * { letter-spacing:0; }
#footer .wrap { position:relative; }
#footer .f_top { display:flex; }
#footer .f_top li { color: #fff; font-size: 15px; font-weight: 400; text-transform: uppercase; }
#footer .f_top li:nth-child(n+2){ margin-left: 35px; }
#footer .line { border-top: 1px solid rgba(255,255,255, .2); }

#footer .f_info li { font-size: 15px; font-weight: 300; display: inline-block; color:rgba(255,255,255, .7); line-height: 200%; margin-right: 30px; }
#footer .f_info li span { color: #fff; margin-right: 5px; }
#footer .f_info li:last-child{ margin-right: 0; }

#footer .copy { font-size: 12.5px; font-weight: 400; color: #969696; }
#footer .sns img { opacity: .5; }

#footer #page_top { width:80px; height:80px; position:absolute; top:0; right:60px; cursor:pointer; background:#fff; transform:translateY(-50%); box-shadow:0 0 16px 0px rgba(0, 0, 0, .1); }
#footer #page_top:before { display:block; content:''; position:absolute; background:url('/images/ptop_arrow_b.png') center no-repeat; width:100%; height:100%; opacity:.8; }

#footer #page_top:hover { background-color:var(--mc); border:0; }
#footer #page_top:hover:before { background-image:url('/images/ptop_arrow.png'); opacity:1; }

#footer #bot_logo { position:absolute; bottom:0; right:60px; }
#footer #bot_logo img { width:210px; opacity:.4; }

@media (max-width:1600px) {
	#footer #page_top { right:4%; width:calc(30px + 3vw); height:calc(30px + 3vw); }
	#footer #page_top:before { background-size:calc(7px + 0.5vw); }
	#footer #bot_logo { right:4%; }
	#footer #bot_logo img { width:calc(140px + 4vw); }
	#footer .sns img { width:170px; }
}
@media screen and (max-width:768px) {
	#footer .f_info li { margin-right: 20px; }
	#footer .f_top li:nth-child(n+2) { margin-left: 20px; }
}
@media screen and (max-width:767px) {
	#footer .sns img { display:none; }
}
@media screen and (max-width:440px) {
	#footer .f_top li:nth-child(n+2) { margin-left: 15px; }
}