@charset "utf-8";

html, body {min-height:100%;/*overflow-x:hidden*/}
body{overflow-x: hidden;}
.layout {position:relative;width:100%;margin:0;width: 720px;background: #fff;overflow-x: hidden;}
.wrap_1230{width:600px;margin:auto;}

/*head_area*/
.head_area {position: fixed;top:0;width:100%;height:85px;z-index: 150;border-bottom:1px solid rgba(255,255,255,0.5);box-sizing: border-box;max-width: 720px;}
.header_top{width:100%;height: 85px; border-bottom:1px solid #eee;}
.header_top .wrap_1230 { width:100%;padding:0 35px;box-sizing:border-box;}
.head_area .logo_area{padding-top: 22px;display:inline-block ;}
.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_mask{width:100%;height: 100%;background: #fff;position: fixed;z-index:120;display:none}
.head_mask.on{display:block}
.head_area .head_bottom{display: none;position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:90%;}
.head_area .head_bottom.active{display: block; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:100%;}
.head_area .lnb{box-sizing: border-box;padding: 0 30px;}
.head_area .lnb > li{box-sizing: border-box;width:100%;text-align: center;margin-top: 40px;padding-bottom: 29px;border-bottom: 1px solid rgba(188,188,188,0.3);}
.head_area .lnb > li:first-child{margin-top:110px;}
.head_area .lnb > li:last-child{border-bottom: 0;}
.head_area .lnb > li > a {display:block;text-align: center;font-weight:700;font-size:30px;color:#000;position: relative;}
.head_area .lnb > li > a.active h2,.head_area .lnb > li > a.on h2 {border-bottom: 4px solid #00B4E5;}
.head_area .lnb > li > a h2{font-size: 36px;display:inline-block;color: #000;padding-bottom: 3px;}
.head_area .lnb_sub {overflow:hidden;position:relative;top:23px;left:0;height:auto;z-index:10;display:none;}
.head_area .lnb_sub > li {margin-bottom:25px;padding:0;}
.head_area .lnb_sub a {display:block;color:#000;font-weight:400;font-size:24px;text-align:center}
.head_area .lnb_sub a.on {color:#00B4E5}
.head_area .lnb_sub_bg {display:none;position:absolute;top:90px;left:0;z-index:1;width:100%;height:auto;background:rgba(255,255,255,0.1);}
.head_area .lnb_sub_bg > a {display:block;width:100%;height:auto;text-indent:-9999px;cursor:default}
.head_area .lnb_sub_bg.on{display: block;}
.head_area.scrollHd{background:#fff;border-bottom: 0;}
.head_area.active{background:rgba(0,0,0,1)}
.btn_site{display: inline-block;font-weight:700;font-size:16px;color:#333333;line-height: 1;position: absolute;right:30px;bottom:30px;box-sizing: border-box;opacity: 0.8;}
.btn_site a{display:inline-block;color:#333333;font-size: 16px;font-weight: 700;}
.btn_site a em{width:34px;height: 10px;background: url(../img/index/ico_site.png) 0 0 no-repeat;margin-left: 5px;display: inline-block;vertical-align: bottom;}
.head_area.active { background:#fff;}
.head_area.scrollHd .logo a,.head_area.active .logo a,.head_area.on .logo a { background:url(../img/common/logo_color.png) no-repeat;}
.head_area.scrollHd .hamburger .line,.head_area.active .hamburger .line { background:black;}

.hamburger{position: absolute;right:35px;top:30px}
.hamburger .line{width: 40px;height: 4px;background-color: #fff;display: block;margin: 6px auto;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.hamburger:hover{cursor: pointer;}
.hamburger.is-active .line { background:#000;}
.hamburger.is-active .line:nth-child(2){opacity: 0;}
.hamburger.is-active .line:nth-child(1){-webkit-transform: translateY(10px) rotate(45deg);-ms-transform: translateY(10px) rotate(45deg);-o-transform: translateY(10px) rotate(45deg);transform: translateY(10px) rotate(45deg);}
.hamburger.is-active .line:nth-child(3){-webkit-transform: translateY(-10px) rotate(-45deg);-ms-transform: translateY(-10px) rotate(-45deg);-o-transform: translateY(-10px) rotate(-45deg);transform: translateY(-10px) rotate(-45deg);}

/*footer*/
.footer_area {position:relative;z-index:10;width:100%;background:#222222;clear:both;}
.footer {position:relative;bottom:0;width:90%;margin:auto;padding:60px 0; display:flex;flex-wrap:wrap;align-items:flex-start; gap:50px;}
.footer h4 { line-height:1;color:#9B9B9B; font-size:20px; margin-bottom:10px; font-weight:600;}
.footer .txt { text-align:left;font-size:18px; color:#9B9B9B; font-size:18px; font-weight:300; width:calc(100% - 181px );line-height:2;}
.footer hr { border:none; background:#9B9B9B; display:block; height:1px; background:#9b9b9b;margin-bottom:20px;}
.footer .wd_100 { width:100%; font-size:16.5px; color:#9B9B9B; font-weight:300;margin-top:-30px;}



.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 screen and (max-height:800px){
    .visual .animated {
        zoom:0.8;
    }
}