/****************************** layout.css - 헤더 푸터 css ******************************/
@charset "UTF-8";


/*---------- head ----------*/
/* width: 1780px; */
.header {width: 100%;height: 80px;position: absolute;top: 0;left: 0;right: 0;z-index: 9999;background: #fff;} 
.header .header_container {position: relative;width: 100%;height: 100%;} 
.header .header_layout {width: 100%;max-width: 1830px;height: 100%;display: flex;justify-content: space-between;margin: 0 auto;align-items: center;} 
.header .logo {z-index: 99999999;} 
.header .logo a {display: block;width: 100%;height: 100%;} 
.header .logo a.logo_w img {display: none;opacity:0;filter:Alpha(opacity=0);}
.header .logo a.logo_b img {display: block;opacity:1;filter:Alpha(opacity=100);}
/* on */
.header.logo_on a.logo_w img {display: block; opacity:1;filter:Alpha(opacity=100);}
.header.logo_on a.logo_b img  {display: none; opacity:0;filter:Alpha(opacity=0); position: absolute;top: 0;left: 0;}


/* fixed */
/* .header.on { position: fixed; top: 0; box-shadow: 1px 1px 3px #eee; background: #fff;}  */
.header.sub_header.on { box-shadow: 1px 2px 8px #eee; }

/*---------- fullpage ----------*/
/* 각 영역에 따른 변형 */
body.fp-viewing-0 .header {background: transparent;}
body.fp-viewing-0 .header .logo a.logo_w img {display: block; opacity:1;filter:Alpha(opacity=100);}
body.fp-viewing-0 .header .logo a.logo_b img {display: none; opacity:0;filter:Alpha(opacity=0); position: absolute;top: 0;left: 0;}
body.fp-viewing-0 .main_nav .main_menu > li > a { color: #fff; } 
body.fp-viewing-0 .lang_wrap ul li i, body.fp-viewing-0 .lang_wrap ul li a {color: #fff;} 
body.fp-viewing-0 .lang_wrap ul li a {font-family: 'Roboto', sans-serif;font-weight: 500;text-align: center;display: block;} 
body.fp-viewing-0 .lang_wrap ul li:nth-child(2) a {color: #ef4036;} 
body.fp-viewing-0 .lang_wrap ul li:nth-child(3):before, body.fp-viewing-0 .lang_wrap ul li:nth-child(3):after {background: #fff;} 
body.fp-viewing-0 .all_btn i {background: #fff;}
body.fp-viewing-4 #mainFooterCon {display: none;}


.main_nav {margin: 0 18%;} 
.main_nav .main_menu {display: flex;justify-content: space-between;width: 100%;max-width: 1200px;height: 100%;float: right;} 
.main_nav .main_menu > li {position: relative;width: 190px;} 
.main_nav .main_menu > li:before, .main_nav .main_menu > li:after {content: "";display: inline-block;position: absolute;bottom: 0;width: 50%;height: 3px;opacity: 0;background: #bb141a;transition: opacity 0.5s;} 
.main_nav .main_menu > li:before {left: 50%;} 
.main_nav .main_menu > li:after {right: 50%;} 
.main_nav .main_menu > li > a:after {content: "";position: absolute;bottom: 8px;right: calc(50% - 6px);width: 0;height: 0;border-bottom: 10px solid #bb141a;border-top: 10px solid transparent;border-left: 8px solid transparent;border-right: 8px solid transparent;z-index: 550;opacity: 0;}
/* ani */
@keyframes menu_ani 
{0% { width: 0% } 
100% { width: 50% } 
}
.main_nav .main_menu > li a {letter-spacing: -0.5px;text-align: center;} 
.main_nav .main_menu > li > a {display: block;font-size: 18px;line-height: 80px;font-weight: 600;} 
/* hover */
.main_nav .main_menu > li:hover:before, .main_nav .main_menu > li:hover:after, .main_nav .main_menu > li:hover > a:after { opacity:1; } 
.main_nav .main_menu > li:hover:before, .main_nav .main_menu > li:hover:after { animation: menu_ani 0.5s; } 
.main_menu > li:hover .sub_menu {padding: 20px 0;height: auto;} 



/* 2차 메뉴 */
.sub_menu {position: absolute;top: 100%;left: 50%;width: 100%;margin: 0 auto;height: 0px;overflow: hidden;z-index: 99999;transform: translateX(-50%);background: rgb(11 5 1 / 80%);} 
.sub_menu li { } 
.sub_menu li a {display: block;font-size: 15px;font-weight: 300;padding: 13px 0;transition: font-weight .1s ease-in-out;color: rgb(255 255 255 / 80%);} 
/* hover */
.sub_menu li:hover a { color: #fff; font-weight: 600; transition: font-weight .1s ease-in-out;} 

/* lang_wrap */
.lang_wrap {}
.lang_wrap ul {} 
.lang_wrap ul li {display: inline-block;vertical-align: -webkit-baseline-middle;}  
.lang_wrap ul li:nth-child(3) {position: relative;padding: 0 8px;margin: 0 8px;}
.lang_wrap ul li i {} 
.lang_wrap ul li i, .lang_wrap ul li a {} 
.lang_wrap ul li a {font-family: 'Roboto', sans-serif;font-size: 15px;font-weight: 500;text-align: center;display: block;color: #111;} 
.lang_wrap ul li:nth-child(2) a {color: #ef4036;} 
.lang_wrap ul li:nth-child(3):before {content:"";display: block;position: absolute;bottom: 15%;left: 0;width: 1px;height: 70%;background: #111;} 
.lang_wrap ul li:nth-child(3):after {content:"";display: block;position: absolute;bottom: 15%;right: 0;width: 1px;height: 70%;background: #111;} 



/* all_btn */
/* outline: none; 삭제 -> 접근성 고려 */
.all_btn {width: 26px;height: 100%;border:none;background: transparent;position: relative;float: right;} 
.all_btn i {position: absolute;left: 0;width: 100%;height: 2px;background: #111;display: block;transition: all .3s;} 
.all_btn i:nth-child(2) {top: 40%;width: 21px;} 
.all_btn i:nth-child(3) {top: 50%;} 
.all_btn i:nth-child(4) {top: 60%;width: 15px;} 
/* hover */
.all_btn:hover i {width: 100%;}


/* all_menus_bg */
.all_menus_bg {position: fixed;top: 15px;right: 30px;width: 60px;height: 60px;background: #000;border-radius: 50%;transform: translate(50%,-50%) scale(0);transition: all .6s ease-in-out;}
.all_menus_bg.on {right: 0;width: 100%;height: 100vh;transform: translate(-50%,-50%) scale(100);}

/* all_btn_close */
.all_btn_close {position: absolute;top: 0;right: 45px;right: 2.4%;width: 25px;height: 80px;z-index: 1000;} 
.all_btn_close button {position: absolute;width: 25px;height: 100%;top: 0;right: 0;background: transparent;border: none;} 
.all_btn_close button > span {display: block;width: 30px;height: 1px;margin: 10px 0;background: #fff;position: absolute;top: 40%;right: 0px;} 
.all_btn_close button > span:first-child { transform: rotate(45deg); } 
.all_btn_close button > span:last-child { transform: rotate(-45deg); } 


/* 모든 메뉴 */
#all_menu_mb { display: none !important; } 
/**/
#all_menu.all_menus div.clone .util_m {f;display: none;}
.all_menus {opacity: 0;display: none;position: fixed;width: 100%;height: 100%;top: 0;right: 0;z-index: 99;padding-top: 160px;transition: opacity 2s;overflow-y: auto;z-index: 9999;} 
/* .all_menus:before { content:" "; display: block; width: 100%; height: 100vh; background: #0e1870 url(../img/f_logo.png) bottom 90px right 57px no-repeat; position: absolute; right: 0; top: 0; z-index:-1; }  */
.all_menus a { display: block; } 
.all_menus div.clone {display: flex;max-width: 1460px;margin: 0 auto;} 
.all_menus div.clone > ul {padding: 40px 40px 100px;text-align: left;width: 25%;} 
.all_menus div.clone > ul:last-child { border-right: none; } 
.all_menus div.clone > ul > li > a {font-size: 28px;font-weight: 600;position: relative;cursor: default;letter-spacing: -.5px;color: #fff;} 
.all_menus div.clone > ul > li > span.bar {display: block;width: 100%;height: 2px;background: rgb(187 20 10 / 30%);position: relative;margin: 40px 0;} 
.all_menus div.clone > ul > li > span.bar:before {content: '';position: absolute;width: 10%;height: 2px;top: 0;left: 0;background: #bb141a;opacity: 100%;} 
.all_menus div.clone > ul > li:hover > span.bar:before { width: 100%; transition: all 0.2s; } 
.all_menus div.clone ul.depth_02.font-suit li a { font-family: 'SUIT', sans-serif; font-weight: 300; } 
.all_menus div.clone ul.depth_02 { } 
.all_menus div.clone ul.depth_02 li { line-height: 1.8; } 
.all_menus div.clone ul.depth_02 li a {font-size: 20px;font-weight: 300;transition: all .1s;color: rgb(255 255 255 / 80%);} 
.all_menus div.clone ul.depth_02 li a:hover {color: #fff;font-weight: 500;} 
/* on + hide */
.all_menus.on {opacity: 1;transition: all 2s;} 





/*---------- footer ----------*/
.footer {position: relative;font-size: 16px;padding: 85px 0;background: #191919;color: #fff;}
.section .footer .content_area, .footer .content_area {max-width: 1830px;}
/**/
.footer .content_area .txt .logo_wrap {margin-right: 140px;}
.footer .content_area .txt .logo a {align-items: center;height: 100%;}
.footer .content_area .txt .logo a, .footer .content_area .txt  .logo img {display: block;}
/**/
.footer .content_area .txt .address_wrap {width: 80%;}
.footer .content_area .txt .address_wrap address {font-style: unset;}
.footer .content_area .txt .address_wrap ul li {margin-bottom: 20px;}
.footer .content_area .txt .address_wrap ul li:nth-last-child(2) {margin-bottom: 50px;}
.footer .content_area .txt .address_wrap ul li p {font-size: 16px;font-weight: 500;line-height: 1;}
.footer .content_area .txt .address_wrap ul li p span {margin-left: 20px;letter-spacing: -0.5px;}
.footer .content_area .txt .address_wrap ul li p span, .footer .content_area .txt .address_wrap  ul li.copy {color: #808080;}
.footer .content_area .txt .address_wrap ul li:nth-child(2) p {position: relative;display: inline-block;padding-right: 15px;margin-right: 10px;}
.footer .content_area .txt .address_wrap ul li:nth-child(2) p:after {content:"";display: block;position: absolute;top: 10%;right: 0;width: 2px;height: 80%;background: #fff;}
.footer .content_area .txt .address_wrap ul li:nth-child(2) p:last-child:after {display: none;}
.footer .content_area .txt .address_wrap ul li.copy{margin-bottom: 0;}
.footer .content_area .txt .address_wrap ul li.copy p{font-family: 'Roboto', sans-serif;font-size: 14px;}
.footer .content_area .txt .address_wrap ul li.copy font {color: #ef4036;}
/**/
.footer .content_area .txt .bottom_wrap {width: 66px;height: 66px;text-align: center;transition: 0.3s;position: relative;}
.footer .content_area .txt .bottom_wrap a {display: block;width: 100%;height: 100%;}
.footer .content_area .txt .bottom_wrap a button {transition: 0.3s;}
.footer .content_area .txt .btn_top {position: absolute;top: 0;right: 0;width: 100%;height: 100%;border: none;outline: none;cursor:pointer;background-color: #ef4036;border-color: transparent;text-align:center;font-size: 16px;z-index:90;color: #fff;font-weight: 500;}
.footer .content_area .txt .btn_top i {display: block;font-size: 18px;margin-bottom: 2px;}
 /* hover */
.footer .content_area .txt  .bottom_wrap a:hover button{background: #fff; color: #ef4036; transition: 0.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: 301px;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; } 



/* respon */
@media all and (max-width: 1830px){ /* width */
.header .header_layout,
.section .footer .content_area, .footer .content_area {width: 96%;}
/**/
.main_nav {margin: 0 auto;}
.lang_wrap {margin-right: 50px;}
}
@media all and (max-width: 1460px){ /* width */
.main_nav .main_menu > li {width: 160px;}
}
@media all and (max-width: 1260px){
.main_nav .main_menu > li {width: 130px;}
}


@media (max-width: 1023px){
/*---------- fullpage ----------*/
#section5 {display: none;}
body.fp-viewing-4 #mainFooterCon, 
body.fp-viewing-4 #mainFooterCon .fp-tableCell {display: block;}

/*---------- common ----------*/
.logo a img {width: 138px;}

.header.on {box-shadow: 3px 3px 6px #bfbfbf;}
.header, .all_btn_close {position: fixed; height: 70px;right: 2%;}
.main_nav {display: none;}
.lang_wrap {margin: 0 3% 0 auto;}
/* mb nav */
#all_menu { display: none !important; }
#all_menu_mb.on { display: block !important; }
.all_menus {padding: 100px 0;}
.all_menus div.clone {flex-direction: column;}
.all_menus div.clone > ul {padding: 20px 20px 0;width: 100%;} 
.all_menus div.clone > ul.util_m {position: fixed;bottom: 0;left: 0;background: #bb141a;padding: 20px 0;} 
.all_menus div.clone > ul.util_m li {float: left;width: 33.3%;} 
.all_menus div.clone > ul.util_m li:nth-child(2) {border: 1px rgb(255 255 255 / 30%);border-style: none solid;} 
.all_menus div.clone > ul.util_m li a {text-align: center;} 
.all_menus div.clone > ul > li > a {font-size: 24px;}
.all_menus div.clone > ul > li > span.bar {margin: 20px auto;}
.all_menus div.clone ul.depth_02 li a {font-size: 18px;}

/* footer */
.footer {padding: 55px 0;}
.footer .content_area .txt {flex-direction: column;}
.footer .content_area .txt .logo_wrap {margin: 0 0 20px 0;}
.footer .content_area .txt .bottom_wrap {position: absolute; top: 0; right: 0; width: 55px;height: 55px;}
.footer .content_area .txt .address_wrap {width: 100%;}
.footer .content_area .txt .address_wrap ul li p, .footer .content_area .txt .btn_top {font-size: 15px;}
.footer .content_area .txt .address_wrap ul li p span {margin-left: 10px;}
.footer .content_area .txt .address_wrap ul li:nth-last-child(2) {margin-bottom: 40px;}
.footer .content_area .txt .address_wrap ul li.copy p {font-size: 13px;}
}


@media all and (max-width: 767px){
/*---------- common ----------*/
.logo a img {width: 128px;}

.lang_wrap {margin: 0 4% 0 auto;}
.lang_wrap ul li a {font-size: 14px;}
/* mb nav */
#all_menu_mb {padding: 70px 0;}
.all_menus div.clone > ul > li > a {font-size: 20px;}
.all_menus div.clone > ul > li > span.bar {margin: 10px auto;}
.all_menus div.clone ul.depth_02 li a {font-size: 18px;}
.all_menus div.clone > ul.util_m {padding: 15px 0;}

/* footer */
.footer {padding: 45px 0;}
.footer .content_area .txt .bottom_wrap {width: 45px;height: 45px;}
.footer .content_area .txt .btn_top i {font-size: 16px;}
.footer .content_area .txt .address_wrap ul li p, .footer .content_area .txt .btn_top {font-size: 14px;}
.footer .content_area .txt .address_wrap ul li p, .footer .content_area .txt .address_wrap ul li:nth-child(2) p {display: block;margin: 0 0 10px 0;padding-right: 0;}
.footer .content_area .txt .address_wrap ul li:nth-child(2) p:after {display: none;}
.footer .content_area .txt .address_wrap ul li p span {margin-left: 10px;}
.footer .content_area .txt .address_wrap ul li {margin-bottom: 10px;}
.footer .content_area .txt .address_wrap ul li.copy p {font-size: 12px; margin: 0;}
}


@media all and (max-width: 479px){
/*---------- common ----------*/
.logo a img {width: 118px;}

.lang_wrap {display: none;}
}