@charset "utf-8";

html, body {min-height:100%;/*overflow-x:hidden*/}
body{overflow-x: hidden;}
.layout {position:relative;width:100%;margin:0;width: 640px;background: #fff;overflow-x: hidden;}
.wrap_1230{width:580px;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: 640px;}
.header_top{width:100%;height: 85px;}
.head_area .logo_area{padding-top: 22px;display:inline-block ;}
.head_area .logo {display: inline-block;vertical-align:middle;}
.head_area .logo a {display:block;}
.head_mask{width:100%;height: 100%;background: rgba(0,0,0,1);position: fixed;z-index:120;display:none}
.head_mask.on{display:block}
.head_area .head_bottom{display: none;}
.head_area .head_bottom.active{display: block;}
.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:#fff;position: relative;}
.head_area .lnb > li > a h2{font-size: 36px;display:inline-block;color: #fff;border-bottom: 4px solid #00B4E5;padding-bottom: 3px;}
.head_area .lnb_sub {overflow:hidden;position:relative;top:23px;left:0;height:auto;z-index:10}
.head_area .lnb_sub > li {margin-bottom:25px;padding:0;}
.head_area .lnb_sub a {display:block;color:#fff;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(0,0,0,0.9)}
.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:rgba(51,51,51,0.8);border-bottom: 0;}
.head_area.on{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(../images/index/ico_site.png) 0 0 no-repeat;margin-left: 5px;display: inline-block;vertical-align: bottom;}

.hamburger{position: absolute;right:30px;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: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:#E6E6E6;clear:both;}
.footer {position:relative;bottom:0;width:100%;margin:auto;padding:30px;box-sizing: border-box}
.footer .copy_wrap{display: inline-block;}
.footer .copy_wrap p{color:rgba(51,51,51,0.8);font-weight: 400;font-size: 16px;text-align: left;letter-spacing: -1px;margin-bottom: 0;}

/*visual*/
.visual .wrap_1230{position: relative;}
.visual .wrap_1230{height: 100%;}
.visual .first .animated{position: absolute;bottom:140px;left:0;opacity: 1;}
.visual .second .animated{position: absolute;top:24%;left:0}
.visual .third .animated{position: absolute;top:24%;left:0}
.visual .fourth .animated{position: absolute;top:24%;left:0}
.visual .first{width:100%;height:auto;background: url(../images/index/section01.jpg) 50% 0 no-repeat;background-size: cover;}
.visual .second{width:100%;height:auto;background: url(../images/index/section02.jpg) 50% 50% no-repeat;background-size: cover;}
.visual .third{width:100%;height:auto;background: url(../images/index/section03.jpg) 50% 50% no-repeat;background-size: cover;}
.visual .fourth{width:100%;height:auto;background: url(../images/index/section04.jpg) 50% 50% no-repeat;background-size: cover;}
.visual .animated{opacity: 0;}
.visual h2{color:#fff;text-align: left;font-size:60px;font-weight: 700;line-height: 1.1;letter-spacing: -4px;margin-left: -4px;}
.visual p{color:#fff;text-align: left;font-size:20px;font-weight: 100;line-height: 1.2;letter-spacing: 3px;margin-bottom: 10px;}
.visual .first h2{padding-top: 450px;}
.visual .first p{margin-top: 20px;}
.visual .btn_more{width:196px;height: 48px;background: url(../images/index/btn_more.png) 0 0 no-repeat;margin-top: 50px;display: block;position: relative;}
.scroll{position: absolute;bottom:25px;left:50%;margin-left:-17.5px;z-index: 10;}
.ico_scroll {padding-top: 72px;position: relative;cursor: default;}
.ico_scroll span {position: absolute;top: 0;left: 50%;width: 35px;height: 60px;margin-left: -17.5px;border: 2px solid #fff;border-radius: 50px;box-sizing: border-box;}
.ico_scroll span::before {position: absolute;top: 10px;left: 50%;content: '';width: 6px;height: 6px;margin-left: -3px;background-color: #fff; border-radius: 100%;-webkit-animation: sdb 2s infinite;animation: sdb 2s infinite;box-sizing: border-box;}
.index_m .visual .section{height:969px;position: relative;}
.index_m .visual .section .wrap_1230{height:100%}
.index_m .visual .section .animated{opacity: 1;}
.index_m .visual .five{min-height: auto;height:104px}
.index_m .visual .section .line{width:1px;height:100%;display: inline-block;vertical-align: middle;}
.index_m .visual .section .wrap_1230 .animated{display: inline-block;vertical-align: middle;}

.index_m .visual .btn_box{position:fixed;right:10%;top:20%;z-index:10}
.index_m .visual .btn_box a{display:block;margin-bottom:15px;width:24px;height:15px;text-align:center;box-sizing:border-box;line-height:32px;background: url(../images/index/pager.png) 50% 0 no-repeat;}
.index_m .visual .btn_box a:last-child{margin-bottom:0}
/*.index_m .visual .btn_box a span{width:5px;height:5px;background:#fff;border-radius:50%;display:inline-block;box-shadow:0 3px 3px rgba(0,0,0,0.16)}*/
.index_m .visual .btn_box a:nth-child(1).on{background: url(../images/index/pager01.png) 0 0 no-repeat;height: 161px;width:24px}
.index_m .visual .btn_box a:nth-child(2).on{background: url(../images/index/pager02.png) 0 0 no-repeat;height: 237px;width:24px}
.index_m .visual .btn_box a:nth-child(3).on{background: url(../images/index/pager03.png) 0 0 no-repeat;height: 237px;width:24px}
.index_m .visual .btn_box a:nth-child(4).on{background: url(../images/index/pager04.png) 0 0 no-repeat;height: 237px;width:24px}


@-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;
  }
}


/*slider*/
.swiper-container {width: 100%;height: 100%;}
.swiper-slide {text-align: center;background: #fff;}

@media screen and (max-width: 1600px){
    html,body{overflow-x: hidden;}
}

