@charset "utf-8";

html, body {min-height:100%;/*overflow-x:hidden*/}
body{overflow-x: hidden;font-family:'suit';}
.layout {position:relative;width:100%;margin:0;min-width: 1280px;background: #fff;}
.wrap_1420{width:1420px;margin:auto;}

/*head_area*/
.head_area {position: fixed;top:0;width:100%;height:90px;z-index: 100;border-bottom:1px solid rgba(255,255,255,0.5);box-sizing: border-box;}
.head_area_top{width:100%;height: 90px;}
.head_area .logo_area{padding-top: 17px;display:inline-block ;position:absolute;left:48px;}
.head_area .logo {display: inline-block;vertical-align:middle; width:200px;height:51px;}
.head_area .logo a { display:block; width:100%; height:100%; background:url(../img/index/logo.png) no-repeat;}
.head_area .logo a {display:block;}
.head_area .lnb_area{margin:0 auto; width: 1070px;}
.head_area .lnb::after{display: block;content: '';clear: both;}
.head_area .menu_btn { position:absolute;top:40px; right:50px;}
.head_area .lnb > li{float:left;box-sizing: border-box;width:160px;height: 90px;text-align: left; margin-right:60px;}
.head_area .lnb > li > a {display:inline-block;height:90px;text-align: center;font-weight:700;font-size:20px;color:#fff;line-height:90px;position: relative;}
.head_area .lnb > li > a h2{font-size: 20px;line-height: 35px;display: inline-block;}
.head_area .lnb > li.on > a h2{border-bottom: 3px solid #00B4E5;}
.head_area .lnb > li:first-child{width:180px;}
.head_area .lnb > li:nth-child(2){width:167px;}
.head_area .lnb > li:nth-child(2) .lnb_sub { width:240px;}
.head_area .lnb > li:nth-child(3) .lnb_sub { width:210px;margin-left:-30px; padding-left:30px;}
.head_area .lnb > li:nth-child(4) {margin-right:50px;}
.head_area .lnb > li:last-child{width:167px;margin-right: 0px !important;}
.head_area .lnb > li:hover > a h2{border-bottom: 3px solid #00B4E5;}
.head_area .lnb > li > a.on h2{border-bottom: 3px solid #00B4E5;}
.head_area .lnb_sub {display:none;overflow:hidden;position:relative;top:0;left:0;height:310px;z-index:10;padding-left:0;}
.head_area .lnb_sub > li {margin:0;padding:0;margin-bottom: 30px;}
.head_area .lnb_sub > li:last-child{margin-bottom: 0;}
.head_area .lnb_sub a {display:block;color:#fff;font-weight:400;font-size:20px;line-height:24px;text-align:left;text-decoration:none !important;}
.head_area .lnb_sub > li:first-child > a {padding-top:45px}
.head_area .lnb_sub a:hover {color:#00B4E5}
.head_area .lnb_sub_bg {display:none;position:absolute;top:90px;left:0;z-index:1;width:100%;height:328px;background:rgba(0,0,0,0.9)}
.head_area .lnb_sub_bg > a {display:block;width:100%;height:234px;text-indent:-9999px;cursor:default}
.head_area.scrollHd{background:rgba(51,51,51,0.8)}
.head_area.on { background:#fff;}
.head_area.on .lnb > li > a { color:#000;}
.head_area.on .logo a { background:url(../img/common/logo_color.png) no-repeat;}

/*footer*/
.footer_area {position:relative;z-index:10;width:100%;background:#222222;clear:both;}
.footer {position:relative;bottom:0;width:1420px;margin:auto;padding:40px 0 60px; display:flex; align-items:flex-start; gap:80px;}
.footer h4 { color:#9B9B9B; font-size:20px; margin-bottom:10px; font-weight:600;}
.footer .txt { text-align:left;font-size:12px; color:#9B9B9B; font-size:18px; font-weight:300; width:calc(100% - 210px );}
.footer .txt em { display:inline-block; width:0.5px; height:16px; background:#9b9b9b; margin:0 20px -1px 20px;}
.footer hr { border:none; background:#9B9B9B; display:block; height:1px; background:#9b9b9b; margin:20px 0;}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


.mb_20 {margin-bottom:20px;}
.mb_30 {margin-bottom:30px;}
.mb_50 {margin-bottom:50px;}
.mb_60 {margin-bottom:60px;}
.mb_100 {margin-bottom:100px;}

@media all and (min-resolution:119dpi) {
  html {zoom:0.8;}
}

@media screen and (max-width: 1600px){
  html,body{overflow-x: hidden;}
}
@media screen and (max-height: 870px){
  .visual .animated,.visual .footer { zoom:0.9;}
}
@media screen and (max-height: 800px){
  .visual .animated,.visual .footer  { zoom:0.85;}
}
@media screen and (max-height: 700px){
  .visual .animated,.visual .footer  { zoom:0.75;}
}