@charset "utf-8";

body{
  overflow: hidden;
  font-family: 'Open Sans', sans-serif;
  overflow-x: hidden;background: #01030a;
}
.browserupgrade{display:block;position:fixed;margin:0;width:100%;height:60px;font-size:15px;line-height:60px;z-index:1000;background-color:#666;color:#fff;text-align:center}
.browserupgrade a{color:#eee;text-decoration:underline;font-size:18px;}
.browserupgrade a:hover{color:#eee}

.in_im{display:none;}
@media only screen and (max-width: 767px){
  .in_vi{display:none;}
.in_im{display:block;}
}

.wrap{width: 1280px;margin-left:auto;margin-right:auto;}
@media only screen and (max-width: 1366px){
  .wrap{width: 1100px;}
}
@media only screen and (max-width: 1200px){
  .wrap{width:100%;padding-right:20px;padding-left:20px;-webkit-box-sizing: border-box;-ms-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
}
@media only screen and (max-width: 767px){
  .wrap{padding-right:20px;padding-left: 20px;}
}

img{max-width: unset;}

header.scroll-hd{    background-color: transparent;}
header.active{background-color: rgba(5, 12, 30, 0.95);}

.browserupgrade{display:block;position:fixed;margin:0;width:100%;height:60px;font-size:15px;line-height:60px;z-index:1000;background-color:#666;color:#fff;text-align:center}
.browserupgrade a{color:#eee;text-decoration:underline;font-size:18px;}
.browserupgrade a:hover{color:#eee}
img{max-width: none;}
.wrap{width: 1280px;margin-left:auto;margin-right:auto;}
@media only screen and (max-width: 1366px){
  .wrap{width: 1100px;}
}
@media only screen and (max-width: 1200px){
  .wrap{width:100%;padding-right:20px;padding-left:20px;-webkit-box-sizing: border-box;-ms-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
}
@media only screen and (max-width: 767px){
  .wrap{padding-right:10px;padding-left: 10px;}
  
}

.in_banner{height: 100vh;width: 100%;overflow: hidden;position: absolute;top: 0px;left: 0px;z-index: 5;}
.in_banner .text{text-align: center;color: #fff;position: absolute;top: 50%;left: 0px;right: 0px;transform:translateY(-50%);z-index: 2;}
.in_banner .text h3{opacity:0;font-weight: 700;transform: skew(-1deg);}
.in_banner .text p{opacity:0;font-weight: 700;transform: skew(-1deg);}
.in_banner .text h3.active{animation:2s text_scale ease-out;animation-fill-mode: forwards;}
.in_banner .text p.active{animation:1.5s text_scale ease-out 0.7s;animation-fill-mode: forwards;}
.in_banner video{width: 100%;}

.mo_banner{display: none;}
@media only screen and (max-width: 1024px){
  .pc_banner{display: none;}
  .mo_banner{display: block;}
  .mo_banner.active{animation:30s img_scale ease-out;animation-fill-mode: forwards;}
}
@keyframes img_scale {
  from {
    transform:scale3d(1,1,1);
  }
  to {
    transform:scale3d(1.5,1.5,1.5);
  }
}
@keyframes text_scale {
  from {
    transform:skew(-1deg) scale3d(0,0,0);
    opacity: 0;
  }
  to {
    transform:skew(-1deg) scale3d(1,1,1);
    opacity: 1;
  }
}

@media only screen and (max-width: 1000px){
  .fp-tableCell{vertical-align: top;}
}
.intro{position: relative;}
.intro .img{overflow: hidden;width: 100%;}
.intro #myimg{width:100%;opacity:0;}
@media only screen and (max-width: 767px){
  .intro #myimg{margin-top: 80px!important;}
}
.intro .text01{position: absolute;text-align: center;left: 0px;top: 50%;color: #fff;width: 100%;transform:translateY(-50%);}
.intro .text01.active{z-index:5;}
.intro .text01 h3{font-weight: 700;position: relative;top: 50px;opacity: 0;transition:all 0.5s ease-out;}
.intro .text01 p{font-size:18px;position: relative;top: 50px;opacity: 0;transition:all 0.5s ease-out 0.2s;}
.intro .text01.active h3{top: 0px;opacity: 1;}
.intro .text01.active p{top: 0px;opacity: 1;}
@media only screen and (max-width: 1000px){
  .intro .text01{top:120%;left: 5%;right:5%;width:auto;}
  .intro .text01 h3{font-size: 28px;}

}
@media only screen and (max-width: 600px){
  .intro .text01{top:140%;}
  
}
.intro .text02{position: absolute;left: 20%;top: 50%;color: #fff;max-width: 470px;transform:translateY(-70%);}
.intro .text02.active{z-index:5;}
.intro .text02 h3{font-weight: 700;position: relative;top: 20px;opacity: 0;transition:all 0.5s ease-out;}
.intro .text02 p{font-size:18px;position: relative;top: 30px;opacity: 0;transition:all 0.5s ease-out 0.1s;margin-bottom: 20px;}
.intro .text02.active h3{top: 0px;opacity: 1;}
.intro .text02.active p{top: 0px;opacity: 1;}
#myimg1_1{position: absolute;left: 0px;top: 0px;opacity: 0;}
#myimg1_1.my_show{opacity: 1;z-index:3;}
#myimg2_1{position: absolute;left: 0px;top: 0px;opacity: 0;}
#myimg2_1.my_show{opacity: 1;z-index:3;}
#myimg3_1{position: absolute;left: 0px;top: 0px;opacity: 0;}
#myimg3_1.my_show{opacity: 1;z-index:3;}
@media only screen and (max-width: 1400px){
  .intro .text02{left: 10%;}
}
@media only screen and (max-width: 1000px){
  .intro .text02{top: 138%;left: 5%;right:5%;width: auto;max-width: inherit;}
  .intro .text02 br{display: none;}
  .intro .text02 h3{font-size: 28px;text-align: center;}
  .intro .text02 p{margin-bottom: 30px;}
}
@media only screen and (max-width: 600px){
  .intro .text02{top: 160%;}
}
.intro .text03{position: absolute;right: 20%;top: 50%;color: #fff;max-width: 650px;transform:translateY(-70%);}
.intro .text03.active{z-index:5;}
.intro .text03 p{font-size:18px;position: relative;opacity: 0;transition:all 0.5s ease-in;margin-bottom: 20px;}
.intro .text03 .btn{width: 0px;height:36px;overflow: hidden;transition:width 0.5s ease-in 0.2s;background: url(../../../omo-oss-image.thefastimg.com/portal-saas/ngc202203180004/cms/image/446eae92-4494-427f-8553-a01ee9bec8f7.png) no-repeat;padding: 0px!important;}
.intro .text03 .btn a{display: block;width: 365px;height: 36px;line-height:36px;padding-left: 20px;color: #fff;font-weight: 700;}
.intro .text03.active p{opacity: 1;}
.intro .text03.active .btn{width: 100%;}
@media only screen and (max-width: 1500px){
  .intro .text03{width: 35%;right:17%;}
}
@media only screen and (max-width: 1000px){
  .intro .text03{top: 150%;left: 5%;right:5%;width: auto;}
}
@media only screen and (max-width: 600px){
  .intro .text03{top: 160%;}
  .intro .text03 .btn{background-size: 100% 100%;}
  .intro .text03 .btn a{width:100%;padding-left:20px;}
}

.in_news #myimg_bg{width:100%;opacity:0.6}
.in_news{height: 100vh;background: url(../../../omo-oss-image.thefastimg.com/portal-saas/ngc202203180004/cms/image/c78dc5cb-9eee-4802-9aae-c16e8dc500bf.jpg) no-repeat;width:100%;position: relative;}
.in_news ul{position: absolute;left: 20%;top:50%;max-width:900px;transform:translateY(-50%);z-index:4;transition:none;}
.in_news li{color: #fff;margin-bottom: 10%;opacity: 0;top: 100px;position: relative;}
.in_news li:nth-of-type(1){transition:all 1s ease-out;}
.in_news li:nth-of-type(2){transition:all 1s ease-out 0.1s;}
.in_news li a{color: #fff;display: block;margin-bottom: 30px;transition:color 0.5s ease-in-out;}
.in_news ul li.active{opacity: 1;top:0;}

.in_news li.cole{color: #666;}
.in_news li.cole a{color: #666;}

@media only screen and (max-width: 1400px){
  .in_news ul{left: 10%;}
}
@media only screen and (max-width: 1000px){
  .in_news ul{left: 5%;right: 5%;width: auto;max-width:inherit;}
  .in_news li a{font-size: 28px;}
}
@media only screen and (max-width: 600px){
  .in_news ul{top:40%;}
  .in_news li a{font-size: 22px;}
}


.loading{
  position: fixed;top:0px;right: 0px;left: 0px;bottom: 0px;z-index: 10;background-color: #000000;
}
.loading_ing{
  position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);
}

.loading_ing h4 {color: #ccc;margin: 0;font: 12px verdana;text-transform: uppercase;text-align: center;}
.loading span {
  display: inline-block;vertical-align: middle;width: 10px;height: 10px;margin:3px;background: #007DB6;
  border-radius: 10px;animation: loading 1s infinite alternate;
}

.loading span:nth-of-type(2) {background: #008FB2;animation-delay: 0.2s;}
.loading span:nth-of-type(3) {background: #009B9E;animation-delay: 0.4s;}
.loading span:nth-of-type(4) {background: #00A77D;animation-delay: 0.6s;}
.loading span:nth-of-type(5) {background: #00B247;animation-delay: 0.8s;}
.loading span:nth-of-type(6) {background: #5AB027;animation-delay: 1.0s;}
.loading span:nth-of-type(7) {background: #A0B61E;animation-delay: 1.2s;}
@keyframes loading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fp-tableCell{overflow: hidden;}