@charset "UTF-8";


/*---------- scrollbar ----------*/
::-webkit-scrollbar { width: 10px; height: 10px; border-radius: 50px; } 
::-webkit-scrollbar-button { display: none; } 
::-webkit-scrollbar-thumb { background-color: #0161b2; border-radius: 50px; } 
::-webkit-scrollbar-track { background-color: #d8d8d8; border-radius: 50px; } 


/*---------- header ----------*/
.header {width: 100%;height: 115px;position: absolute;top: 0;left: 0;right: 0;z-index: 9999;background: transparent;transition: all .3s;} 
.header .header_container { position: relative; width: 100%; height: 100%; } 
.header .header_layout {width: 100%;max-width: 1700px;height: 100%;display: flex;justify-content: space-between;margin: 0 auto;align-items: center;} 
.header .hd_bgs {width: 100%;position: absolute;background-color: #0162b3;top: 115px;z-index: 50;} 
.header #hd_bg2.hd_bgs {background: #fff;top: calc(115px + 90px);}
.header .logo {z-index: 99999999;} 
.header .logo a { display: block; width: 100%; height: 100%; } 
.header .logo a img {}
.header .logo a img.logo_on {display: none;}
/* on, hover */
.header.on, .header.hover {position: fixed;top: 0;background: #fff;box-shadow: 0px 4px 6px rgb(10 11 12 / 10%);transition: all .3s;} 
.header.on .logo a img.logo_w, .header.hover .logo a img.logo_w {display: none;}
.header.on .logo a img.logo_on, .header.hover .logo a img.logo_on {display: block;}
.header.on .main_nav .main_menu > li > a, .header.hover .main_nav .main_menu > li > a {color: #111;}
.header.on .lang_wrap a, .header.hover .lang_wrap a {color: #797979;}
.header.on .all_btn i, .header.hover .all_btn i {background: #797979;}
/* popup */
body.mfp-zoom-out-cur header {z-index: 1000; transition: z-index .3s}


/*---------- main_nav ----------*/
.main_nav {position: relative;margin: 0 4%;} 
.main_nav:after {content:""; display: block; clear: both;} 
.main_nav .main_menu {display: flex;justify-content: space-between;width: 100%;max-width: 900px;height: 100%;float: right;} 
.main_nav .main_menu > li {position: relative;width: 180px;} 
.main_nav .main_menu > li a {letter-spacing: -0.5px;text-align: center;color: #fff;} 
.main_nav .main_menu > li > a {display: block;font-size: 20px;font-weight: 600;line-height: 115px;}
.main_nav .main_menu > li > a:before {content: '';opacity: 0;display: block;position: absolute;width: 0px;height: 0px;border-bottom: calc(7px * 1.732) solid #0162b3;border-left: 8px solid transparent;border-right: 8px solid transparent;bottom: 0;left: 50%;transform: translateX(-50%);transition: all .2s;}
.main_nav .main_menu > li a i {margin-left: 5px;}
/* hover */
.main_nav .main_menu > li:hover:after {opacity: 1;}
.main_nav .main_menu > li.on > a:before {opacity: 1; transition: all .2s}

/*---------- sub_menu ----------*/
.sub_menu {position: absolute;top: 100%;left: 50%;width: 1500px;margin: 0 auto;height: 0;overflow: hidden;z-index: 99999;transform: translateX(-50%);background: transparent;} 
.sub_menu.flex {justify-content: center;}
.sub_menu > li {position: relative;display: inline-block;margin-right: 30px;} 
.sub_menu li:last-child {margin-right: 0;} 
.sub_menu li a {display: block;font-size: 18px;line-height: 90px;transition: all .3s;} 
.sub_menu li .sub {position: absolute;top: 90px;left: 50%;padding: 0 30px;margin: 0 auto;width: 1500px;justify-content: center;height: 0;overflow: hidden;transform: translateX(-50%);transition: height .3s;}
.sub_menu li .sub li {margin-right: 20px;}
.sub_menu li .sub li a {font-size: 16px;line-height: 70px;color: #666;}
/* hover */
.sub_menu li:hover > a {text-decoration: underline; text-underline-offset: 3px;}
.sub_menu li:hover .sub {height: 70px;transition: height .3s;} 
.sub_menu li .sub li:hover a {text-decoration: underline; text-underline-offset: 3px;}
/* on */
.main_nav .main_menu li.menu.on .sub_menu{height: 160px;transition: height .3s;} 

/*---------- right ----------*/
.header .lang_wrap {position: relative;width: auto;height: 100%;padding: 0 20px;z-index: 1}
.header .lang_wrap a {display: block;font-family: "Ubuntu", sans-serif;font-size: 17px;color: #fff;text-align: center;}
.header .lang_wrap > a {height: 115px;line-height: 115px;}
.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: 15px;background: #fff;padding: 12px 0;transition: all .2s;}
/* on */
.header .lang_wrap.on .lang_list{height:120px;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: #0161b2; transition: all .3s;}

.header .all_btn {display: none;width: 26px;height: 115px;border: none;background: transparent;position: relative;float: right;} 
.header .all_btn i {position: absolute;left: 0;width: 100%;height: 2px;display: block;background: #fff;transition: all .2s;} 
.header .all_btn i:nth-child(2) {top: 45%;} 
.header .all_btn i:nth-child(3) {top: 55%;} 
.header .all_btn i:nth-child(4) {top: 56%;} 
/* hover */
.header .all_btn:hover i { width: 100%; } 


/*---------- all_menus ----------*/
/* .all_menus_bg { position: fixed; top: 0; right: 0; width: 100%; height: 100vh; background: #fff; transform: translateX(100%); transition: all .6s ease-in-out; } 
.all_menus_bg.on { transform: translateX(0%); }  */

.header .all_btn_close {position: absolute;top: 0;right: 5%;width: 26px;height: 115px;z-index: 1000;} 
.header .all_btn_close button { position: absolute; width: 100%; height: 100%; top: 0; right: 0; background: transparent; border: none; } 
.header .all_btn_close button > span {display: block;width: 100%;height: 2px;margin: 10px 0;background: #fff;position: absolute;top: 40%;right: 0px;} 
.header .all_btn_close button > span:first-child { transform: rotate(45deg); } 
.header .all_btn_close button > span:last-child { transform: rotate(-45deg); } 

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

/* all_menu_mb */
.all_menus {position: fixed;width: 0%;height: 100vh;top: 0;right: 0;background: #fff;padding-top: 150px;overflow-y: auto;overflow-x: hidden;visibility: hidden;transform: translateX(100%);transition: all 1s;z-index: 9999;} 
.all_menus:before {content:" ";width: 100%;height: 100vh;position: fixed;right: 0;bottom: 0;z-index:-1;background: url(../../img/company1_1.png) bottom -50px right -130px no-repeat;background-size: 524px auto;filter: revert;} 
.all_btn_close button > span {background: #000;}
.all_menus div.clone > ul {}
.all_menus div.clone > ul.util_m {display: none;}
.all_menus div.clone > ul > li > a {display: flex;font-size: 20px;padding: 14px 20px;justify-content: space-between;align-items: center;border-top: 1px solid #eee;} 
.all_menus div.clone > ul > li > a img {display: none;transition: all .3s;}
.all_menus div.clone > ul > li ul li a {display: block; padding: 0 20px;} 
.all_menus div.clone > ul > li > span.bar {display: none;}
.all_menus div.clone ul li a {}
.all_menus div.clone ul.depth_02 li {line-height: 2.4;}
.all_menus div.clone ul.depth_02 li a {font-size: 18px;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: #0161b2;} 
.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 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;} 
/* hover */
.all_menus div.clone ul.depth_02 li a:hover {color: #fff;} 
/* active */
.all_menus div.clone > ul > li.active > a img {display: block; transition: all .3s; animation: nav_arrow .5s;}
/* ani */
@keyframes nav_arrow {
0% { margin-right: 30px; } 
100% { margin-right: 0px; } 
}



/*---------- footer ----------*/
.footer {position: relative;font-size: 15px;padding: 35px 0 65px;background: #313131;color: #999;} 
.footer .content_area > div {}
.footer .content_area p, .footer .content_area a {line-height: 1;} 
.footer .content_area .top .menu_wrap ul li a, .footer .content_area .bottom .left ul li p {position: relative;display: inline-block;} 
.footer .content_area .bottom .left ul li p {padding-right: 20px;margin-right: 15px;} 
.footer .content_area .top .menu_wrap ul li a:last-child, .footer .content_area .bottom .left ul li p:last-child { padding-right:0; margin-right: 0; } 
.footer .content_area .bottom .left ul li p:after {content: "";display: block;position: absolute;top: 10%;right: 0;width: 1px;height: 80%;background: #fff;} 
.footer .content_area .top .menu_wrap ul li a:last-child:after, .footer .content_area .bottom .left ul li p:last-child:after { display: none; } 
/**/
.footer .content_area .top {padding-bottom: 25px;margin-bottom: 25px;border-bottom: 1px solid rgb(255 255 255 / 20%);align-items: center;}
.footer .content_area .top .logo_wrap {} 
.footer .content_area .top .logo a { align-items: center; height: 100%; } 
.footer .content_area .top .logo a, .footer .content_area .top .logo img { display: block; } 
.footer .content_area .top .logo img {} 
.footer .content_area .top .menu_wrap ul li a {color: #fff;}
/**/
.footer .content_area .bottom .left {
} 
.footer .content_area .bottom .left address { font-style: unset; } 
.footer .content_area .bottom .left ul li {margin-bottom: 10px;} 
.footer .content_area .bottom .left ul li:last-child {margin-bottom: 0;} 
.footer .content_area .bottom .left p {font-size: 15px;} 
.footer .content_area .bottom .left p span {color: #fff;} 
.footer .content_area .bottom .copy_wrap {g;margin-top: 35px;} 
.footer .content_area .bottom .copy_wrap p {font-family: 'Oxanium', sans-serif;font-size: 14px;color: #aaa;} 


.footer .content_area .bottom .btn_wrap { width: 66px; height: 66px; text-align: center; transition: 0.3s; position: relative; } 
.footer .content_area .bottom .btn_wrap a { display: block; width: 100%; height: 100%; } 
.footer .content_area .bottom .btn_wrap a button { transition: 0.3s; } 
.footer .content_area .bottom .btn_top { position: absolute; top: 0; right: 0; width: 100%; height: 100%; border: none; outline: none; cursor: pointer; background-color: #0161b2; border-color: transparent; text-align: center; font-size: 16px; z-index: 90; color: #fff; font-weight: 500; } 
.footer .content_area .bottom .btn_top i { display: block; font-size: 18px; margin-bottom: 2px; } 
/* hover */
.footer .content_area .bottom .btn_wrap a:hover button {background: #fff;color: #0161b2;transition: 0.3s;} 
/* on */
/* .footer .content_area .bottom .btn_wrap.on {position: fixed;bottom: 5vh;right: 5vh;z-index: 999;}
.footer .content_area .bottom .btn_wrap.on a:hover button { background: #fff; border: 1px solid #07539f; color: #07539f; transition: 0.3s; }  */




/*---------- respon ----------*/
@media all and (max-width: 1700px) { /* width */
.header .header_layout, .footer .content_area { width: 96%; } 
/**/
.main_nav { margin: 0 auto; } 
}
@media all and (max-width: 1600px) {
.sub_menu, .sub_menu li .sub { width: 1300px; } 
}
@media all and (max-width: 1525px) {
.main_nav .main_menu > li {width: 150px;}
}
@media all and (max-width: 1400px) {
.sub_menu, .sub_menu li .sub { width: 900px; } 
}
@media all and (max-width: 1300px){
.logo a img {width: 200px;} 
.main_nav .main_menu > li {width: 120px;} 
}
@media (min-width: 1024px) { 
#all_menu_mb {display: none !important;}
}
@media (max-width: 1023px) { 
.header .logo {margin-right: auto;}
.header {height: 90px;} 
.main_nav { display: none; } 
.header .lang_wrap {padding: 0 10px;margin-right: 20px;} 
.header .lang_wrap > a {height: 90px;line-height: 90px;}
 .header .all_btn {display: block;}
.header .all_btn, .header .all_btn_close  {height: 90px;}

 /* footer */
.footer .content_area .top {padding-bottom: 20px;margin-bottom: 20px;}
.footer .content_area .top .menu_wrap ul li {display: flex; justify-content: space-between;}
.footer .content_area .top .menu_wrap ul li a:first-child {margin-right: 15px;}
.footer .content_area .bottom .left ul li {margin-bottom: 15px;}
.footer .content_area .bottom .left ul li p {display: block;padding: 0;margin: 0 0 15px 0;}
.footer .content_area .bottom .left ul li p:after {display: none;}
.footer .content_area .bottom .left ul li p {font-size: 15px;}
.footer .content_area .bottom .copy_wrap p {font-size: 14px;}
.footer .content_area .bottom .btn_wrap {width: 55px; height: 55px;}
.footer .content_area .bottom .btn_top {font-size: 15px;}
.footer .content_area .bottom .btn_top i {font-size: 16px;}
}

@media (max-width: 767px) { 
.logo a img {width: 170px;} 
.header, .header .all_btn, .header .all_btn_close {height: 80px;} 
.header .lang_wrap > a {height: 80px;line-height: 80px;}
.header .all_btn_close {right: 2%;}
.all_menus div.clone > ul > li.active > a img {width: 55px;height: 55px;}
 /* on + hide */
.all_menus div.clone, .all_menus.on {width: 100%;}

/* footer */
.footer .content_area .bottom .left ul li p {font-size: 15px;}
.footer .content_area .bottom .copy_wrap p {font-size: 14px;}
}

@media all and (max-width: 479px) { 
.logo a img {width: 140px;} 
.header .lang_wrap {margin-right: 10px;} 
.header .lang_wrap a {font-size: 16px;}
.header .lang_wrap a i:first-child {display: none;}
.header .lang_wrap > a span {margin: 0;}
.header .lang_wrap .lang_list li a {font-size: 14px;}
.header .lang_wrap ul li a { font-size: 14px; } 
.all_menus:before {}
.all_menus div.clone > ul > li > a {font-size: 18px;padding: 14px 2%;} 
.all_menus div.clone > ul > li.active > a img {width: 45px;height: 45px;}
.all_menus div.clone ul.depth_02 li a {font-size: 16px;padding: 0 2%;}

/* footer */
.footer {position: relative;font-size: 15px;padding: 35px 0 45px;}
.footer .content_area > div {flex-direction: column;}
.footer .content_area .top {flex-direction: column;}
.footer .content_area .top > div {width: 100%;}
.footer .content_area .top .menu_wrap ul li a:first-child {margin-right: 0;}
.footer .content_area .top .logo img {display: block; margin: 0 auto;}
.footer .content_area .top .logo_wrap {margin-bottom: 30px;}
.footer .content_area .top .menu_wrap ul li a {width: 49%;padding-right: 25px;margin-right: 0;text-align: center;}
.footer .content_area .bottom .left ul li p {margin-bottom: 12px;}
.footer .content_area .bottom .left ul li p:after {display: none;}
.footer .content_area .bottom .left ul li p {font-size: 14px;}
.footer .content_area .bottom .copy_wrap p {font-size: 13px;}
/* on */
.footer .content_area .bottom .btn_wrap.on {position: fixed;bottom: 20px;right: 20px;}
.footer .content_area .bottom .btn_wrap.on .btn_top {border-radius: 5px;}
/* hover */
.footer .content_area .bottom .btn_wrap a:hover button {border: 1px solid #0161b2;} 
}