/*** Header ***/
#header{position:absolute;z-index:1025;width:100%;transition: all 0.3s;height: 100px;}
/* fixed + hover */
#header.fixed, #header:hover {position:fixed; background:rgba(255,255,255,1); border-bottom: 1px solid rgba(0,0,0,.1);}
	
.header_in, #menuArea .menuList .wrap {display: flex;justify-content: space-between;margin:0 auto;max-width: 1730px;box-sizing:border-box;align-items: center;}
.header_in h1 {display:inline-block;}
.header_in h1 a {color: #fff; font-size: 37px; font-style: italic; font-weight: 500;}
#header .logo .header_logo_title .color_logo{display: none;}
/* hover */
#header:hover .logo .header_logo_title .color_logo{display: block;}
#header:hover .logo .header_logo_title .white_logo{display: none;}
/* active */
#header.active .logo .header_logo_title .color_logo{display: block;}
#header.active .logo .header_logo_title .white_logo{display: none;}

#gnb_nav{text-align: center;}
#menu .menu {display: flex;}
#menu .menu > li  {transition: all 0.3s;}
#menu .menu li {position:relative;display:inline-block;width: 240px;}
#menu .menu > li:after {content:"";display: block;position: absolute;bottom: 0;left: 50%;width: 2px;height: 25px;background: var(--main-color););transform: translateX(-50%);opacity: 0;transition: all .3s;}
#menu .menu li a{display:block;font-size:20px;color:#fff;letter-spacing:0.5pt;font-weight: 500;padding: 38px 29px;}
/* fixed + hover */
#header.fixed #menu .menu > li a, #header:hover #menu .menu > li a {color: #000;}
/* hover */
#menu .menu > li:hover {transition: all 0.3s;}
#menu .menu > li:hover:after {opacity: 1;}

#menu .menu .menu_depth {visibility:hidden;opacity: 1;position:absolute;background:rgb(26 102 190 / 70%);top: 100px;left: 0;width: 100%;}
#menu .menu .menu_depth ul {margin: 18px 0;}
#menu .menu .menu_depth li {display:block;margin:0;text-align:center;padding:0;}
#menu .menu .menu_depth li a {position:relative;display: block;color: #e7e7e7 !important;!i;!;line-height:1;white-space:nowrap;font-weight: 300;padding: 18px 0;}
#menu .menu .menu_depth li:last-child a {margin-bottom:0;}
/* hover */
#menu li:hover > .menu_depth {visibility:visible; opacity:1;}
#menu .menu .menu_depth li a:hover {color: #fff !important;}

#header .lang_wrap {position: relative;}
#header .lang_wrap a {display: block;font-size: 19px;color: #fff;text-align: center;}
#header .lang_wrap > a {height: 100px;line-height: 100px;display: block;padding: 0 10px;box-sizing: content-box;}
#header .lang_wrap > a span {margin: 0 10px;}
#header .lang_wrap .lang_list{position: absolute;top: 100%;left: 0;width: 100%;height: 0;overflow: hidden;border-radius: 5px;transition: height .3s;}
#header .lang_wrap .lang_list li{border-bottom: 1px solid #eee;}
#header .lang_wrap .lang_list li:last-child {border-bottom: 1px solid transparent;}
#header .lang_wrap .lang_list li a {font-size: 16px;background: #fff;padding: 12px 0;color: #444;transition: all .2s;}
/* on */
#header .lang_wrap.on .lang_list{height: 86px;box-shadow: 0px 4px 6px rgb(10 11 12 / 10%);transition: height .3s;}
/* hover */
#header .lang_wrap .lang_list li a:hover {color: #fff; background: var(--main-color); transition: all .2s;}
#header.fixed .lang_wrap > a, #header:hover .lang_wrap > a { color: #000;} 

.header_in .sitemap {position: relative;top: 0;right: 0;display:block;width: 46px;height: 22px;background-size: cover;background: url("../img/sitemap.png") center no-repeat;border: transparent;}
#header.fixed .header_in .sitemap, #header:hover .header_in .sitemap {background: url("../img/sitemap_on.png") center no-repeat;}




/*** 슬라이드 메뉴 : 모바일 메뉴 ***/
.noScroll{overflow:hidden;}
#menuArea {display:none; position:fixed; top:0; right:0; width:100%; overflow-x:hidden; z-index:9999999999; height:100%;}
#menuArea:before {content: "HYUPSUNG";display: block;position: absolute;right: 40px;bottom: 40px;font-size: 180px;font-weight: 600;line-height: 1;letter-spacing: -8px;color: transparent;-webkit-text-stroke: 1px rgb(255 255 255 / 30%);z-index: 1;} 
#menuArea .menuList {position:absolute; top:0;  height:100%; width:100%; box-sizing:border-box; overflow-x:hidden; overflow-y:auto; background:rgba(0,0,0,0.8);}

	.menuList .menuUtil {display:none;}

.menuList h2{display:inline-block;padding: 27px 0;z-index:99999999999;}
.menuList h2 a{display:block; color: #fff; font-size: 37px; font-style: italic; font-weight: 500;}
.btnMenu_mClose {position: relative;right: 0;top: 0;cursor: pointer;}


#menuArea .menuList>.list {position:relative;clear:both;width:100%;text-align:center;top: 30%;transform: translateY(-30%);}
#menuArea .menuList>.list>li {}
#menuArea .menuList>.list>li>a {position:relative;padding: 20px 20px 15px;display:inline-block;font-size:1.667rem;letter-spacing:0.5pt;line-height:100%;color:#fff;font-weight:400;text-decoration:none !important;cursor: default;}
#menuArea .menuList>.list>li.active >a:after {animation: menu_bottom ease-in-out 0.5s; animation-fill-mode:forwards; }
#menuArea .menuList>.list>li>a:after{content:"";display: block;position: absolute;bottom: 0;left: 50%;width: 0px;height: 2px;background: #fff; transform: translateX(-50%)}
@keyframes menu_bottom{
	0% {width: 5px;}
    100% {width: 100%;}
}

#menuArea .menuList>.list .sMenu {position: relative;padding:10px 0 15px 0;}
#menuArea .menuList>.list .sMenu>li {}
#menuArea .menuList>.list .sMenu>li>a {position:relative;display:inline-block;padding: 10px 0;border:none;text-decoration:none !important;transition: all 0.3s;font-size: 18px;color:#dcdcdc;}
/* #menuArea .menuList>.list .sMenu>li>a:after {content:'';width:0;height:1px;background-color:#fff;position:absolute;bottom:5px;left: 50%;transition:all 0.3s;} */
#menuArea .menuList>.list .sMenu>li>a:hover{color:#fff;; transition: all 0.3s; font-weight:bold;}
#menuArea .menuList>.list .sMenu>li>a:hover:after {width:100%; transition:all 0.3s;}


#grayLayer {width:100%; height:100%; background:rgba(0,0,0,0.9); position:fixed; left:0; top:0; z-index:1; overflow-x:hidden;overflow-y:auto;display:none;}
#grayLayer > a {display:block;width:100%;height:100%}


/* footer */
#main_ft {padding: 45px 0 30px;position: relative;background: #222;} 
#main_ft .on,#main_ft .on a { color: #fff; } 
.footer_box  {position: relative;}
.footer_box.box2  {border-top: 1px solid #999;padding-top: 30px;}
.footer_box .footer_top {display: flex;justify-content: space-between;align-items: center;} 
.footer_box .footer_middle {padding: 20px 0 30px;} 
.footer_box .footer_middle .footer_logo { margin-right: 7rem; padding-bottom: 20px; } 
.footer_box .footer_middle .right_box {color: #bdbdbd;} 
.footer_box .footer_middle .right_box.flex_box { display: flex; justify-content: space-between; width: 100%; } 
.footer_box .footer_middle .right_box .address_box {display: flex;flex-direction: column;flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;max-width: 800px;line-height: 1.5;} 
.footer_box .footer_middle .right_box .address_box li {padding-right: 1.5rem;line-height: 1.8;} 
.footer_box .footer_middle .right_box .address_box li p, .footer_box .footer_middle .right_box .address_box li p span {margin-right: 10px;}
.footer_box .footer_middle .right_box .address_box li p {position: relative;display: inline-block;padding-right: 15px;} 
.footer_box .footer_middle .right_box .address_box li p span {display: inline-block;}
.footer_box .footer_middle .right_box .address_box li p:last-child { padding-right:0; margin-right: 0; } 
.footer_box .footer_middle .right_box .address_box li p:after {content: "";display: block;position: absolute;top: 25%;right: 0;width: 1px;height: 50%;background: #fff;} 
.footer_box .footer_middle .right_box .address_box li p:last-child:after { display: none; } 

.footer_box .footer_middle .right_box .copyright { padding-top: 2rem; } 
.footer_box .footer_middle .right_box .copyright .on { text-transform: uppercase; } 
.top_btn_box {color: #fff;po;cursor: pointer;transition: all .3s;} 
.top_btn_box i {margin-left: 10px;} 
.copyright {font-size: 15px;color: #999;} 
.private_btn {border: 1px solid #999;} 
.private_btn:hover { border: 1px solid #fff; background: #fff; transition: all .3s; } 
.private_btn, .private_btn a {transition: all .3s;}
.private_btn:hover a, #main_ft .private_btn span a.on:hover { color: var(--sub-color); transition: all .3s;} 
#main_ft .private_btn span a.on {padding: 21px 30px;color: #fff;transition: all .3s;} 
/* hover */
.top_btn_box:hover {color: #999;po;cursor: pointer;transition: all .3s;} 


/* POP UP */
.about_popup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #222222cc; z-index: 1000; width: 100%; height: 100%; } 
.about_popup .popup_info { width: 63%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
.about_popup .popup_info .art1 { display: flex; background: #fff; justify-content: space-between; align-items: flex-start; padding: 40px; position: relative; border-radius: 13px; } 
.about_popup .popup_info .art1 .box1 { width: 100%; } 
.about_popup .popup_info .art1 .box1 textarea {width: 100%;height: 220px;font-size: 15px;padding: 20px;} 
.about_popup .popup_info .art1 .box1 h2 {font-size: 20px;padding-bottom: 30px;color: #000;} 
.about_popup .popup_info .close_btn { color: #fff; border: 1px solid #fff; padding: 14px; position: absolute; top: -63px; right: 0; cursor: pointer; } 
.about_popup .popup_info .close_btn i { font-size: 18px; } 
.about_popup { display:none; } 
.about_popup.show { display: block; } 
/* hover */
.about_popup .popup_info .close_btn:hover { background: var(--main-color); transition: all .3s;} 






/*************** 반응형 ***************/

/* 노트북 ~ pc */
@media all and (max-width:1730px) { 
.header_in, #menuArea .menuList .wrap {padding: 0px 2%;}
#gnb_nav {width: 70%;}
#menu .menu li {width: auto;flex: 1;}
#menu .menu li a {padding: 38px 5px;}
#menuArea:before {right: 2%;bottom: 2%;}

#footer .foot_in {padding: 30px 2% 35px;}
#footer .top_btn_box {right: 2%;}
}
@media all and (max-width:1320px) { 
#header .logo .header_logo_title img, .menuList h2 a img, .footer_box .footer_top img {width: 180px;}
#gnb_nav {width: 60%;}
#menu .menu .menu_depth {width: calc(100% + 50px);transform: translateX(-25px);}
#menu .menu .menu_depth li a {font-size: 18px;}
#menuArea:before {font-size: 13vw;letter-spacing: -4px;}
}

/* 768 - 1023: 태블릿 */
@media all and (max-width:1023px) { 
#header{height: 85px;}
.header_in h1 {width: 100%;}
#gnb_nav {display:none;}
#header .lang_wrap {width: 125px;margin-right: 2%;}
#header .lang_wrap > a {height: 85px;line-height: 85px;}
.header_in .sitemap, .btnMenu_mClose img {width: 36px;}
.header_in .sitemap {height: 22px;}
.menuList h2 {padding: 20px 0;}
#menuArea .menuList>.list {flex-wrap: wrap;}
#menuArea .menuList>.list>li {width: 100%;}
#menuArea .menuList>.list .sMenu {display:none;}

    
#footer .foot_in{flex-direction: column;}
#footer .foot_in .ft_left, #footer .foot_in .ft_right{width: 100%;}
#footer .foot_in .ft_right{border-left: none;border-top: 1px solid #999;padding: 20px 0 0;}
#footer .foot_in .ft_menu li, #footer .foot_in div > p.address, #footer .foot_in .ft_right p:last-child {font-size: 14px;}
#footer .foot_in .ft_right h3, #footer .foot_in .ft_right p {font-size: 16px;}
#footer .foot_in .ft_right h2 {font-size: 38px;}
#footer .top_btn_box {font-size: 16px;}
.about_popup .popup_info {width: 90vw;} 
.about_popup .popup_info .art1 {padding: 40px 5%;}
}

/* 480 - 767: 모바일 가로 */
@media all and (max-width:767px) { 
#header{height: 70px;}
#header .logo .header_logo_title img, .menuList h2 a img, .footer_box .footer_top img {width: 150px;}
#header .lang_wrap {width: 140px;}
#header .lang_wrap > a {height: 70px;line-height: 70px;font-size: 17px;}
#header .lang_wrap .lang_list li a {font-size: 14px;}
.menuList h2 {padding: 13px 0;}
#menuArea .menuList>.list>li>a {font-size: 20px;}
#menuArea .menuList>.list .sMenu>li>a {font-size: 16px;}
#menuArea:before {letter-spacing: 0px;}

#main_ft {font-size: 14px;}
#footer .foot_in > p.flogo {margin:0 0 20px;}
#footer .privacy {bottom:auto; top:35px; background-size:12px; padding-left:20px;}
#footer .foot_in div > p.address>i{display: block;}
#footer .foot_in .ft_left .flogo img{width: 150px;} 
#main_ft .private_btn span a.on {padding: 15px 20px;} 
.copyright {width: 80%;font-size: 13px;} 
}


/* 320 - 479: 모바일 세로 */
@media all and (max-width:480px) { 
#footer .foot_in > p.copyright br {display: block;}
#footer .privacy {bottom: 90px;}
#footer .foot_in div > p.address{font-size: 14px;}
#footer .foot_in .ft_menu li{font-size: 15px;}
#footer .foot_in div > p.copyright{font-size: 12px;}
#footer .foot_in .ft_menu {margin: 15px 0 20px;}
#footer .foot_in .ft_menu li, #footer .foot_in div > p.address, #footer .foot_in .ft_right p:last-child {font-size: 14px;}
#footer .foot_in .ft_right h2{font-size: 22px;margin: 10px 0 15px;}
}