@charset "UTF-8";



/*---------- common ----------*/
.logo a img {display: block;width: 100%;max-width: 243px;object-fit: cover;} 

/* body */
body.menu_hover .header:before {height: calc(100% + 296px);transition: height .5s;} 
body.menu_hover .header:after {opacity: 1;} 
body.menu_hover .main_nav .main_menu > li .sub_menu > li { opacity: 1.0; transition: all 0.8s ease; } 
body.menu_hover .main_nav .main_menu > li .sub_menu > li:nth-child(1) { transition-delay: 0.1s; } 
body.menu_hover .main_nav .main_menu > li .sub_menu > li:nth-child(2) { transition-delay: 0.2s; } 
body.menu_hover .main_nav .main_menu > li .sub_menu > li:nth-child(3) { transition-delay: 0.3s; } 
body.menu_hover .main_nav .main_menu > li .sub_menu > li:nth-child(4) { transition-delay: 0.4s; } 
body.menu_hover .main_nav .main_menu > li .sub_menu > li:nth-child(5) { transition-delay: 0.5s; } 
body.menu_hover .main_nav .main_menu > li .sub_menu > li:nth-child(6) { transition-delay: 0.6s; } 
body.menu_hover .main_nav .main_menu > li .sub_menu {height: 296px;padding: 40px 0;opacity: 1;}


/*---------- bottom_wrap ----------*/
.bottom_wrap { opacity: 0; } 
.bottom_wrap.on {width: 50px;height: 50px;text-align: center;transition: 0.3s;position: fixed;right: 2vw;bottom: 2vw;opacity: 1;z-index: 999;} 
.bottom_wrap a { display: block; width: 100%; height: 100%; } 
.bottom_wrap a button.btn_top {position: absolute;top: 0;right: 0;width: 100%;height: 100%;border: none;outline: none;cursor: pointer;background-color: var(--main-color);border-color: transparent;border-radius: 50%;text-align: center;font-size: 16px;z-index: 90;font-weight: 500;transition: 0.3s;}  
.bottom_wrap a button.btn_top i {display: block;font-size: 22px;color: #fff;} 

/* hover */
.bottom_wrap a:hover button.btn_top { background: #dadada; transition: 0.3s; } 


/*---------- head ----------*/
.header {width: 100%;height: 105px;position: absolute;top: 0;left: 0;right: 0;z-index: 9999;background: #fff;transition: all 1s;} 
.header:before {content:"";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 0;background-color: #fff;overflow: hidden;transition: height .5s;z-index: -1;}
.header:after {content:"";display: block;position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;background-color: #b4b4b4; opacity: 0; z-index: -1;}
.header .header_container { position: relative; width: 100%; height: 100%; } 
.header .header_layout {width: 100%;max-width: 1800px;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%; } 

/* on */
.header.on {position: fixed;top: 0;box-shadow: 0px 4px 6px rgb(10 11 12 / 10%);transition: all .5s;} 


/* menu */
.main_nav {margin: 0 auto;} 
.main_nav .main_menu {display: flex;justify-content: space-between;width: 100%;max-width: 1200px;height: 100%;} 
.main_nav .main_menu > li {position: relative;width: 170px;}  
.main_nav .main_menu > li a {letter-spacing: -0.5px;} 
.main_nav .main_menu > li > a {display: block;font-size: 22px;line-height: 105px;font-weight: 800;text-align: center;}
.main_nav .main_menu > li > a:before, .main_nav .main_menu > li > a:after {content: "";display: inline-block;position: absolute;bottom: -3px;width: 18%;height: 3px;opacity: 0;background: var(--point-color);transition: opacity 1s;} 
.main_nav .main_menu > li > a:before { left: 50%; } 
.main_nav .main_menu > li > a:after { right: 50%; }

/* on + board */
.main_nav .main_menu > li.on > a:before, .main_nav .main_menu > li.on > a:after { opacity: 1; transition: all 1s; animation: main_menu_ani 1s;} 

/* ani */
@keyframes main_menu_ani { 
0% { width: 0%}
100% { width: 18%; } 
}


.main_nav .main_menu > li .sub_menu {position: absolute;top: 100%;left: 0;width: 170px;height: 0;z-index: -1;overflow: hidden;opacity: 0;}
.main_nav .main_menu > li .sub_menu li {opacity: 0;transition: all 0.8s ease;}
.main_nav .main_menu > li .sub_menu li a {display: block;font-size: 16px;font-weight: 300;line-height: 1.4;text-align: center;padding: 7px 0;transition: font-weight .1s ease-in-out;}
.main_nav .main_menu > li .sub_menu > li > a {color: #050000;} 
.main_nav .main_menu > li .sub_menu li.on a {font-weight: 600; transition: font-weight .1s ease-in-out; } 
.main_nav .main_menu > li .sub_menu > li.on > a {color: var(--point-color);} 

/* lang_wrap */
.lang_wrap {padding: 0 10px;margin-right: 15px;} 
.lang_wrap ul li { display: inline-block; vertical-align: -webkit-baseline-middle; } 
.lang_wrap ul li:nth-child(1) {position: relative;} 
.lang_wrap ul li:nth-child(2) {margin-left: 10px;} 
.lang_wrap ul li a {display: block;font-family: "Poppins", sans-serif;font-weight: 500;} 
.lang_wrap ul li.on a {color: var(--main-color);text-decoration: 2px underline;text-underline-offset: 5px;} 

/* sns_wrap */
.header .sns_wrap li:first-child {margin-right: 10px;}
.header .sns_wrap li a {display: block;width: 100%;height: 100%;}


/* all_btn */
.all_btn {display: none;position: relative;width: 15px;height: 100%;border: none;background: url('/img/all_btn.png') no-repeat center / contain;filter: brightness(0);z-index: 99999;} 
.all_btn:hover {animation: jelly .5s}

/* ani */
@keyframes jelly {
25% {transform: scale(.9,1.1)}
50% {transform: scale(1.1,.9)}
75% {transform: scale(.95,1.05)}
}


/*---------- all_menus ----------*/
#all_menu {display: none !important;}

/* all_menu_mb */
.all_menus {position: absolute;width: 0%;height: 100vh;top: 0;right: 0;background: #fff;padding-top: 105px;overflow-y: auto;overflow-x: hidden;visibility: hidden;transform: translateX(100%);transition: all 1s;z-index: 9999;} 
.all_menus:before {content: "";display: block;position: absolute;bottom: 0;right: 0;width: 100%;max-width: 349px;height: 220px;background: url(../img/big_logo.png) no-repeat bottom -2vw right -4vw / contain;filter: grayscale(.9) opacity(0.2);z-index: -1;}
.all_btn_close button > span {background: #000;}
.all_menus div.clone > ul > li > a {display: flex;font-size: 20px;padding: 20px;justify-content: space-between;align-items: center;border-top: 1px solid #eee;} 
.all_menus div.clone > ul > li ul li a {display: block; padding: 0 20px;} 
.all_menus div.clone ul.depth_02 li {line-height: 2.4;}
.all_menus div.clone ul.depth_02 li a {font-size: 16px;color: #fff;}
.all_menus div.clone ul.depth_02 li a i {margin-left: 5px;}
.all_menus div.clone > ul > li.active ul.depth_02 {padding: 10px 0;background: var(--main-color);} 
.all_menus div.clone ul.depth_03 li a {font-size: 16px;color: #222;}
.all_menus div.clone > ul > li.active ul.depth_03 {background: #fff;} 

/* on + hide */
.all_menus.on { visibility: visible; transform: translateX(0); transition: all 1s; box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.3);} 
.all_menus.on:before { animation: f_in 5000ms forwards; transition: transform 5000ms ease-in-out, opacity 5000ms ease-in-out; } 
.all_menus div.clone, .all_menus.on {width: 400px;}
.header .all_btn_close button > span {background: #797979;}
.all_menus.hide {display: block !important;animation: all_hide 1s;} 

/* ani */
@keyframes nav_arrow {
0% { margin-right: 30px; } 
100% { margin-right: 0px; } 
}
@keyframes f_in {
0% { opacity: 0; } 
100% { opacity: 1; } 
}


/*---------- footer ----------*/
.footer {position: relative;font-size: 16px;font-weight: 300;padding: 65px 0 60px;background: #f3f3f3;}  

.footer .logo_wrap {width: 19%;min-width: 166px;} 
.footer .logo a img {max-width: 166px;} 
.footer .address_wrap address {font-style: unset;} 
.footer .address_wrap ul:not(:last-child) {margin-right: 100px;} 
.footer .address_wrap ul li {margin-bottom: 10px;} 
.footer .address_wrap ul li h3 {font-size: 16px;} 
.footer .address_wrap ul li p {position: relative;display: inline-block;font-size: 15px;font-weight: 400;line-height: 1;letter-spacing: -.5px;padding-right: 10px;margin-right: 5px;} 
.footer .address_wrap ul li p:last-child { padding-right:0; margin-right: 0; } 
.footer .address_wrap ul li p:after {content: "";display: block;position: absolute;top: 13%;right: 0;width: 1px;height: 87%;background: #a6a49e;} 
.footer .address_wrap ul li p:last-child:after { display: none; } 

.footer .copy {margin-top: 15px;} 
.footer .copy p {font-size: 14px;color: #646464;} 

.footer .noti p {text-align: right;} 
.footer .noti p:nth-child(1) {font-weight: 700; margin-bottom: 3px;} 
.footer .noti p:nth-child(2) {height: 26px;padding: 1px 15px;border-radius: 10px;background: #2a2a2a;font-size: 16px;color: #fff;} 


/*---------- 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 (max-width: 1800px) {
/* body */
body.menu_hover .header .main_nav .main_menu > li {width: 140px; transition: all .3s;}

.header .header_layout, .main_nav .main_menu > li .box .box_wrap, .footer > div {width: 96%;}
.main_nav {margin: 0 auto;}
.main_nav .main_menu {max-width: 100%;}
.main_nav .main_menu > li {width: 120px;transition: all .3s;} 
.main_nav .main_menu > li > a {font-size: 20px;} 
.header .lang_wrap {margin-right: 30px;}
.main_nav .main_menu > li .sub_menu {width: 140px;}

.all_menus div.clone > ul > li > a {font-size: 38px;} 
.all_menus div.clone ul.depth_02 {flex-wrap: wrap;} 
.all_menus div.clone ul.depth_02 > li {flex: 1;flex-basis: calc(100% / 4);margin: 0 30px 60px;} 
}

@media all and (max-width: 1720px) {
.footer .center {margin: 30px 0 10px;}
.footer .address_wrap address {justify-content: flex-start;}
.footer .right {align-self: flex-end;} 
}

@media all and (max-width: 1300px) {
.all_btn{ display: block; } 
.main_nav { display: none; } 
.header .lang_wrap {margin: 0 0 0 auto;} 
.header .sns_wrap {margin: 0 30px 0 15px;}

#all_menu {display: none !important;} 
#all_menu_mb.on {opacity: 1;}  
.all_menus div.clone {justify-content: flex-start;}
.all_menus div.clone > ul > li {flex-direction: column;}
.all_menus div.clone > ul > li > a {font-size: 20px;} 
.all_menus div.clone ul.depth_02 > li {flex-basis: 100%;max-width: 100%;margin: 0 auto;}
.all_menus div.clone ul.depth_02 > li.active {margin-bottom: 25px;}
.all_menus div.clone ul.depth_02 > li:last-child > a {margin-bottom: 0;} 
.all_menus div.clone ul.depth_02 > li.active > a {margin-bottom: 10px;}
.all_menus div.clone ul.depth_02 li .depth_03 {width: 50%;padding: 20px;background: #fff;border-radius: 15px;}
.all_menus div.clone ul.depth_02 li .depth_03 li a {color: inherit;}

.footer .address_wrap ul:not(:last-child) {margin-right: 50px;} 
}

@media all and (max-width: 1023px) {
body.fp-viewing-5 .header, body.main #mainFooterCon {display: block;}

body.on {position: unset;} 
body.mfp-zoom-out-cur .header {position: inherit;}

.header {position: fixed;height: 80px;transition: all .3s;} 
.header.on {background: #fff;box-shadow: 0px 4px 6px rgb(10 11 12 / 10%);transition: all .3s;} 
.logo a img {max-width: 200px;} 
.header .lang_wrap > a {height: 80px;line-height: 80px;}
.header .lang_wrap .lang_list{top: calc(100% + -15px);}
.header .sns_wrap li a img {width: 32px;}

.all_menus {padding-top: 80px;}
.all_menus div.clone > ul > li > a {font-size: 20px;}  
.all_menus div.clone ul.depth_02 > li.active {margin-bottom: 15px;}
.all_menus div.clone ul.depth_02 li .depth_03 {width: 70%;}

.footer {padding: 50px 0 45px;} 
.footer .left {flex-direction: column;} 
.footer .address_wrap address {flex-direction: column;} 
.footer .address_wrap ul:not(:last-child) {margin: 0 0 10px;} 
.footer .area2 {padding-top: 35px;margin-top: 35px;} 
.footer .noti p:nth-child(1) {margin-bottom: 10px;} 
}

@media all and (max-width: 767px) {
.bottom_wrap, body.sub .bottom_wrap.on {width: 40px;height: 40px; right: 4vw;bottom: 4vw;}
.bottom_wrap a button.btn_top i {font-size: 18px;}
                        
.logo a img {max-width: 160px;} 
.lang_wrap {display: none;} 
.header .sns_wrap {margin: 0 30px 0 auto;}
.all_btn  {width: 20px;} 

.all_menus div.clone, .all_menus.on {width: 100%;}
.all_menus:before {bottom: 5vw;}
.all_menus div.clone > ul > li > a {font-size: 18px;padding: 20px 2%;}  
.all_menus div.clone > ul.util_m {position: fixed;bottom: 0;left: 0;width: 100%;background: #999;border: none;} 
#all_menu_mb.on div.clone > ul.util_m {animation: f_in 1000ms forwards; transition: transform 1000ms ease-in-out, opacity 1000ms ease-in-out;}
.all_menus div.clone > ul.util_m > li {float: left;width: 50%;} 
.all_menus div.clone > ul.util_m > li > a {display: block;width: 100%;text-align: center;color: #fff;} 
.all_menus div.clone > ul.util_m > li:nth-child(1) {border-right: 1px solid #fff;} 
.all_menus div.clone ul.depth_02 {width: 100%;}
.all_menus div.clone ul.depth_02 > li > a {font-size: 16px;padding: 0 2%;}  
.all_menus div.clone ul.depth_02 li .depth_03 {width: calc(100% - 2%);}
.all_menus div.clone ul.depth_02 li .depth_03 li a {font-size: 14px;} 

#mainFooterCon .footer {padding: 50px 0 25px;} 
.footer .left, .footer .address_wrap address, .footer .bottom {flex-direction: column;} 
.footer .logo_wrap {align-self: center;} 
.footer .address_wrap ul:not(:last-child) {margin: 0;} 
.footer .address_wrap ul li h3 {font-size: 15px;}
.footer .address_wrap ul li {margin-bottom: 5px;} 
.footer .address_wrap ul li p {display: block;font-size: 13px;line-height: 1.4;padding-right: 0;margin: 0 0 10px;}
.footer .address_wrap ul li p:after {display: none;}
.footer .area2 {padding-top: 25px;margin-top: 25px;} 
.footer .center {margin: 30px 0;}
.footer .noti p {font-size: 16px;}
.footer .noti p:nth-child(2) {font-size: 14px;}
.footer .copy p {font-size: 12px;}
}

@media all and (max-width: 479px) {
.logo a img, .footer .logo a img {max-width: 140px;} 
.header .sns_wrap {margin: 0 20px 0 auto;}
.all_btn  {width: 20px;} 
}