@media screen and (max-width: 1200px){
.bodyIn .wrapper,.bodyIn{min-width: inherit;}
#mPPmv{display: none;}
.bodyIn{margin-top: 60px;}
.container{width: 100%; margin: 0;padding: 0;}
.header{padding:0 30px;}
.topSer{width:180px;}
.logo{margin-right:25px;}
.headerWpr{ height:63px; position:relative;}
.header{
  width: 100%;
  transform: translateX(0px);
  height: 60px;
  padding: 0px;
}

.video-btn{
  width: 5.625rem;
  height: 5.625rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 4;
  opacity: 1;
  transition: opacity .3s ease;
  will-change: opacity;
  cursor: pointer;
}
.video-btn:before,.video-btn:after{
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
}
.video-btn:before{
    background-image: url('../images/s-img/icon-2-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    animation: o-rotate 3s linear infinite;
}
.video-btn:after{
    background-image: url('../images/s-img/play.png');
    background-repeat: no-repeat;
    background-position: center center;
}
@keyframes o-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
  
}
.txt-blue{color: #1a77de;}
.s-bannerFocus{width: 100%; position: relative; height: 330px;padding-top:30px; background-size: 100% 100%; background-image: url(../images/banner-bg.jpg);}
.s-bannerFocus_item{width: 100%; position: relative;}

.sbanner-img-box{width: 100%; height: 175px; margin: 0 auto;position: relative;}
.s-bannerImg{position: absolute; left: 10px;bottom: 0; transition: all 2s ease-in-out;}
.banner-img1{transform: translateY(-240px);opacity: 0;}
.s-banner1-img1{transform: translateY(-400px);opacity: 0; }
.s-banner1-img2{transform: translateY(-380px);opacity: 0; }
.s-banner1-img3{transform: translateY(-360px);opacity: 0; }
.s-banner1-img4{transform: translateY(-340px);opacity: 0; }
.s-banner1-img5{transform: translateY(-320px);opacity: 0; }
.s-banner1-img6{transform: translateY(-300px);opacity: 0; }
.s-banner1-img7{transform: translateY(-280px);opacity: 0; }
.s-banner1-img8{transform: translateY(-260px);opacity: 0; }
.on .banner-img1{opacity: 1; transform:translateY(0); transition-delay:0.8s;}
.on .s-banner1-img1{opacity: 1; transform:translateY(0); transition-delay:1.4s;}
.on .s-banner1-img2{opacity: 1; transform:translateY(0); transition-delay:1.6s;}
.on .s-banner1-img3{opacity: 1; transform:translateY(0); transition-delay:1.8s;}
.on .s-banner1-img4{opacity: 1; transform:translateY(0); transition-delay:1.2s;}
.on .s-banner1-img5{opacity: 1; transform:translateY(0); transition-delay:1.6s;}
.on .s-banner1-img6{opacity: 1; transform:translateY(0); transition-delay:2s;}
.on .s-banner1-img7{opacity: 1; transform:translateY(0); transition-delay:2.4s;}
.on .s-banner1-img8{opacity: 1; transform:translateY(0); transition-delay:2.9s;}


.s-bannerFocus_item{position:relative;}
.s-bannerTxt_ban1{width: 90%; margin: 0 auto;}
.s-bannerTxt_x1{ font-size: 18px; text-align: center; font-weight: bold; line-height: 40px; color: #2e3341; display: block; opacity: 0; transition: all 0.8s ease-in-out; transform: translateY(50px);padding-bottom: 15px;}
.s-bannerTxt_x2{ font-size: 12px;line-height: 14px;text-align: center; color: #545862; display: block; opacity: 0;  transition: all 0.8s ease-in-out; transform: translateY(50px);}
.s-bannerTxt_div{ margin-top: 25px;opacity: 0; text-align: center; transition: all 0.8s ease-in-out; transform: translateY(50px);}
.on .s-bannerTxt_x1{ opacity:1; transform:translateY(0); transition-delay:0.3s;}
.on .s-bannerTxt_x2{ opacity:1; transform:translateY(0); transition-delay:0.4s;}
.on .s-bannerTxt_div{opacity:1; transform:translateY(0); transition-delay:0.5s;}
.s-banner-right{position: absolute; right: 0; top: 40px;animation:s-banTBani1 2s ease-in-out infinite;}
.special-nbanBtn{border:none; color: #fff; padding: 0;  line-height: 30px;border-radius: 10px;box-shadow: 0px 12px 13px 0px rgba(131, 180, 222, 0.4);
        background-image: -moz-linear-gradient( 135deg, rgb(88,175,248) 0%, rgb(31,142,235) 100%);
        background-image: -webkit-linear-gradient( 135deg, rgb(88,175,248) 0%, rgb(31,142,235) 100%);
        background-image: -ms-linear-gradient( 135deg, rgb(88,175,248) 0%, rgb(31,142,235) 100%);
        height: 30px; width: 150px;  padding-left: 29px; font-size: 12px; display: inline-block; font-weight: normal; text-align:left; position:relative ;
}

          
.special-nbanBtn:hover{color: rgb(212, 211, 211);
    background-image: -moz-linear-gradient( 135deg, rgb(110,186,250) 0%, rgb(22,129,218) 100%);
    background-image: -webkit-linear-gradient( 135deg, rgb(110,186,250) 0%, rgb(22,129,218) 100%);
    background-image: -ms-linear-gradient( 135deg, rgb(110,186,250) 0%, rgb(22,129,218) 100%);
}     


.special-nbanBtn:after{ content: ""; transition: all 0.5s ease-in-out; background: url(../images/more-white.png) no-repeat; height: 16px; width: 16px; position: absolute; top: 7px; right: 18px; }



.special-page1 .hmTbox p{padding: 0 0 20px;}
.special-page1{ padding: 30px 0; width: 100%;background: url(../images/bg1.jpg) no-repeat left bottom; background-size: auto;}
.special-page1-con{width: 100%; margin: 0 auto; }

  
.page1-video-left{width:95%; margin: 0 auto; text-align: center; position: relative;}
.page1-video-left img{display: inline-block;}
/* .m1-video-icon{position: absolute;cursor: pointer; left: 50%;opacity: 0.8;transition: all 0.6s linear; top: 50%; margin-left: -26px;margin-top: -26px; display: inline-block; width: 52px; height: 52px; background: url(../images/play.png) no-repeat;} */
.page1-video-left:hover .m1-video-icon{opacity: 1; transform: scale(1.5);}
.page1-video-right{width:95%; margin: 0 auto; padding:0 0 20px;}
.page1-video-right h4{font-size: 19px; color: #2e3341; }
.page1-video-right p{font-size: 14px; color: #545862;margin-top: 15px; line-height: 20px;}

.special-page1-bottom{width: 95%; margin:20px auto 0;}
.special-page1-bottom ul{ display: flex; width: 95%; margin: 0 auto; justify-content: space-between;flex-wrap: wrap;}
.special-page1-bottom li{width: 45%; padding-bottom: 20px;}
.special-page1-bottom li div{font-size: 14px; color: #4b5761; clear: both;}
.special-page1-bottom li div img{display: inline-block; float: left; margin-right: 10px;}
.special-page1-bottom li p{font-size: 12px; color: #8b99ad; margin-top: 15px;}
.special-page1-bottom li:hover div{color:#1a77de;}


.hmTbox p{font-weight: bold;font-size: 12px; color: #545862;}
.hmTbox div{margin-top: 15px;}
.hmTbox strong{font-weight: bold;font-size: 18px; color: #2e3341;}
.special-experience{text-align: center; margin-top: 15px;}
.special-page4-con .special-experience{text-align: left;}

.special-page2{width: 100%; overflow: hidden; padding: 30px 0;  position: relative; background: url(../images/bg2.jpg) no-repeat; background-size: 100% 100%!important;width: 100%;} 
.special-page2-con{width: 95%; margin:0 auto; overflow: hidden; padding-top: 20px;}


.special-page3{width: 100%; background: url(../images/bg3.jpg) no-repeat left bottom; background-size: cover;  padding: 30px 0; margin: 0 auto;overflow: hidden;}
.page3-menu-div{width: 95%;margin: 0 auto; overflow: hidden; height: 86px;border-bottom: 1px solid #f1f7fe;padding-bottom: 20px;}
.page3-menu{width: 100%; margin: 30px auto 0; display: flex; white-space: nowrap;overflow-x: auto;height: 74px;justify-content: initial;} 
.page3-menu ul{width: 100%;}

.page3-menu li{display: inline-block; text-align: center; font-size: 18px;line-height:40px;   white-space: nowrap;position: relative;cursor: pointer;}
.p_icon{display: inline-block; float: left; width: 40px; height: 40px;}
.page3-menu li:after{ content: ""; height: 15px; background: url(../images/dot-line.png) no-repeat center bottom; width: 0%; position: absolute; left: 50%; bottom: -16px; transition: all 0.8s ease 0s; transform:translateX(-50%); }
.page3-menu li.on:after{width:100%;}
.p_icon1{background:url(../images/m3-icon1.png) no-repeat center center;}
.p_icon2{background:url(../images/m3-icon2.png) no-repeat center center;}
.p_icon3{background:url(../images/m3-icon3.png) no-repeat center center;}
.p_icon4{background:url(../images/m3-icon4.png) no-repeat center center;}
.p_icon5{background:url(../images/m3-icon5.png) no-repeat center center;}
.p_icon6{background:url(../images/m3-icon6.png) no-repeat center center;}
.p_icon7{background:url(../images/m3-icon7.png) no-repeat center center;}
.page3-menu li h4{font-size: 16px; color: #1b1b1b; line-height:40px;font-weight: normal;width: 120px; margin-right: 10px;}
.page3-menu li:hover h4{color: #1a77de; line-height: 40px;font-weight: bold;}
.page3-menu li.on h4{color: #1f8eeb;font-weight: bold;}
.page3-menu li.on .p_icon1{background:url(../images/m3-icon11.png) no-repeat center center;}
.page3-menu li.on .p_icon2{background:url(../images/m3-icon22.png) no-repeat center center;}
.page3-menu li.on .p_icon3{background:url(../images/m3-icon33.png) no-repeat center center;}
.page3-menu li.on .p_icon4{background:url(../images/m3-icon44.png) no-repeat center center;}
.page3-menu li.on .p_icon5{background:url(../images/m3-icon55.png) no-repeat center center;}
.page3-menu li.on .p_icon6{background:url(../images/m3-icon66.png) no-repeat center center;}
.page3-menu li.on .p_icon7{background:url(../images/m3-icon77.png) no-repeat center center;}
.page3-menu li.on:hover .p_icon1{background:url(../images/m3-icon11.png) no-repeat center center;}
.page3-menu li.on:hover .p_icon2{background:url(../images/m3-icon22.png) no-repeat center center;}
.page3-menu li.on:hover .p_icon3{background:url(../images/m3-icon33.png) no-repeat center center;}
.page3-menu li.on:hover .p_icon4{background:url(../images/m3-icon44.png) no-repeat center center;}
.page3-menu li.on:hover .p_icon5{background:url(../images/m3-icon55.png) no-repeat center center;}
.page3-menu li.on:hover .p_icon6{background:url(../images/m3-icon66.png) no-repeat center center;}
.page3-menu li.on:hover .p_icon7{background:url(../images/m3-icon77.png) no-repeat center center;}
.page3-cons{width: 95%; margin: 0 auto;}
.page3-con{width:100%;margin: 0 auto; display:none;overflow: hidden;}
.page3-con.on{display:block; animation:fadeInUp 0.5s ease;}
.page3-con-left{width:100%; margin: 20px 0 0;}
.page3-con-left .special-experience{text-align: left;}
.page3-con-right{width: 100%;}
.page3-con h4{color: #1f8eeb; font-size: 16px; line-height: 30px;}
.page3-con p{color:#4a4d57; padding-top: 10px; font-size: 14px; line-height: 30px;}



.special-page4{width: 100%;background: url(../images/bg4.jpg) no-repeat; background-size: auto;  padding: 30px 0; margin: 0 auto; overflow: hidden;}
.special-page4-box{width:100%; margin: 20px auto 0;}
.special-page4-menu-div{width: 95%; height:109px; margin: 0 auto;overflow: hidden;}
.special-page4-menu{width: 100%; text-align: center; display: flex; white-space: nowrap;overflow-x: auto; height: 120px;justify-content: initial;}
.special-page4-menu li{display: inline-block; margin-right: 15px;}
.special-page4-menu li div{font-size: 14px; text-align: center; margin-top: 10px; color: #9295a0;}
.page4-icon1{background: url(../images/m4-icon1.png) no-repeat center center #fff;}
.page4-icon2{background: url(../images/m4-icon2.png) no-repeat center center #fff;}
.page4-icon3{background: url(../images/m4-icon3.png) no-repeat center center #fff;}
.page4-icon4{background: url(../images/m4-icon4.png) no-repeat center center #fff;}
.page4-icon5{background: url(../images/m4-icon5.png) no-repeat center center #fff;}
.page4-icon6{background: url(../images/m4-icon6.png) no-repeat center center #fff;}

.special-page4-con{ display: none; overflow: hidden;}
.special-page4-con.on{display:block; animation:fadeInUp 0.5s ease;}
.special-page4-con .special-experience{text-align: left;}
.page4-icon{display: inline-block; width: 72px; height: 72px; border-radius: 72px; box-shadow: 0px 4px 27px 0px rgba(229, 229, 229, 0.56);}
.li{display: inline-block;width: 160px;cursor: pointer; height: 109px; margin-right: 10px; text-decoration: none;}
.special-page4-menu li.on div{color: #1f8eeb;font-weight: bold;}
.special-page4-menu li.on .page4-icon{}
.special-page4-menu li.on .page4-icon1{background: url(../images/m4-icon1.png) no-repeat center center #1f8eeb;}
.special-page4-menu li.on .page4-icon2{background: url(../images/m4-icon22.png) no-repeat center center #1f8eeb;}
.special-page4-menu li.on .page4-icon3{background: url(../images/m4-icon33.png) no-repeat center center #1f8eeb;}
.special-page4-menu li.on .page4-icon4{background: url(../images/m4-icon44.png) no-repeat center center #1f8eeb;}
.special-page4-menu li.on .page4-icon5{background: url(../images/m4-icon55.png) no-repeat center center #1f8eeb;}
.special-page4-menu li.on .page4-icon6{background: url(../images/m4-icon66.png) no-repeat center center #1f8eeb;}
  
.special-page4-con{ width: 100%; overflow: hidden; margin: 20px auto 0; }
.page4-con-left{width: 100%; text-align: center;}
.page4-con-left img{width: 95%; display: inline-block;}
.page4-con-right{ margin:0 10%;width: 80%;}
.page4-con-right h4{font-size: 18px; color: #1f8eeb; margin-bottom: 15px;}
.page4-con-right p{font-size: 14px; color: #4a4d57; }


.special-page5{width: 100%; position: relative; padding: 30px 0; background: url(../images/bg5.jpg) no-repeat; background-size: cover;overflow: hidden;}
.special-page5-con-div{width: 95%; margin: 0 auto;overflow: hidden;}
.special-page5-con{width:100%;padding-top:80px; height: 330px; display: flex; overflow-x: auto;justify-content: initial;}
.page5-box{ width: 280px;height: 228px;margin-right: 15px; display: inline-block;}
.page5-box-div{width: 280px;height: 228px;position: relative; display:block;}
.page5-box-bg{position: absolute;left: 0; top: 0;background: url(../images/m5-bg.jpg) no-repeat left top; border-radius: 10px; width: 280px; height: 228px;}
.page5-fold{text-align: center;position: absolute;left: 0; top: -120px;width: 280px;}
.page5-fold span{display: inline-block;}
.page5-txt{color: #fff; font-size: 18px;padding: 0 30px;}
.page5-fold-p{color: #fff; margin: 0 auto;padding:0 10px;font-size: 12px; margin-top: 10px;line-height: 20px;} 
.page5-box:last-child{margin-right: 0;}
.page5-img{margin-top: 60px; height: 190px; text-align: center;}
.page5-img img{height: 110px;display: inline-block;}
.page5-box .page5-img img{height: 180px;}



.special-page6{width: 100%; position: relative; overflow: hidden; padding: 30px 0; background: url(../images/bg6.jpg) no-repeat; background-size: cover;overflow: hidden;}
.special-page6-con{width: 95%; margin: 50px auto 0; display: flex; flex-wrap: wrap; justify-content: space-around;}
.special-page6-con a{display: inline-block;cursor: pointer; margin-bottom: 20px;text-align: center; width: 45%;height: 64px; background: #fff;box-shadow: 0px 4px 27px 0px rgba(139, 168, 209, 0.2);}
.special-page6-con a img{display: inline-block;}

.special-page6-con a:hover{
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
    -webkit-transition: -webkit-transform .3s linear;
    transition: transform .3s linear;
}

.special-page7{color: #FFF; text-align: center; padding: 32px 0px;/*margin-bottom: 82px;*/ background: url(../images/bg7.jpg) no-repeat center center; background-size:auto; }
.special-page7 h4{font-size: 22px; color: #fff; text-align: center; margin-bottom: 15px;}
.special-page7 div{font-size: 12px;color: #fff;text-align: center; margin-bottom: 15px;}
.special-page7 p{ font-size: 20px; line-height: 60px; position: relative; }
.special-page7 strong{ font-size: 32px; color:#1f2329; line-height: 60px; text-align: center; display: block; margin: 25px 0px 0px; font-weight: normal; }
.special-page7 h6{ text-align:center}
.special-page7 h6 a{ line-height: 30px; text-align: center; border-radius: 10px; cursor: pointer;
    background-image: -moz-linear-gradient( 90deg, rgb(216,233,253) 1%, rgb(255,255,255) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(216,233,253) 1%, rgb(255,255,255) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(216,233,253) 1%, rgb(255,255,255) 100%);transition: all 0.5s ease-in-out;
    height: 30px; width: 150px;  padding-left: 29px; font-size: 12px; color: #1f8eeb; display: inline-block; font-weight: normal; text-align:left; position:relative ;}
.special-page7 h6 a:hover{
background-image: -moz-linear-gradient( 90deg, rgb(200,225,254) 1%, rgb(240,248,255) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(200,225,254) 1%, rgb(240,248,255) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(200,225,254) 1%, rgb(240,248,255) 100%);
}
.special-page7 h6 a:after{ content: "";transition: all 0.5s ease-in-out;   background: url(../images/more-blue.png) no-repeat; height: 16px; width: 16px; position: absolute; top: 7px; right: 18px; }
.special-page7 h6 a:hover:after{content:""; right:25px; }
















@keyframes s-banTBani1 {
  0% {
      transform:translateY(-5px);
  }
  50% {
      transform:translateY(5px);
  }
  100% {
      transform:translateY(-5px);
  }
}


.hmTbox div{font-size: 14px; color: #1976de; font-weight: bold; text-align: center;}
.hmTbox strong{color: #1976de; font-size: 18px; line-height: 30px; font-weight: bold; text-align: center; display: block;}
.hmTbox p{color: #747474; font-size: 12px; text-align: center;}







@keyframes rangeScale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.9);
  }
}





#bigimg{
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  position: fixed;
  background: rgba(255, 255, 255, 0.9);
  top: 0;
  display: none;
}


@media screen and (orientation: portrait) {
            
  #bigimg{
    padding-top: 5%;
      z-index: 9999;
      width : 100vmax;
      height : 100vmin;
      text-align: center;
      transform-origin: top left;
      transform: rotate(90deg) translate(0,-100vmin);
  }
  #bigimg img{width: 90%;}
}
@media screen and (orientation: landscape) {
 
  #bigimg{
      width : 100vmax;
      height : 100vmin;
  }
}


@-webkit-keyframes fadeInUp {
  0% {
      opacity: 0;
      -webkit-transform: translate3d(0,20px,0);
      transform: translate3d(0,20px,0)
  }

  100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none
  }
}

@keyframes fadeInUp {
  0% {
      opacity: 0;
      -webkit-transform: translate3d(0,20px,0);
      -ms-transform: translate3d(0,20px,0);
      transform: translate3d(0,20px,0)
  }

  100% {
      opacity: 1;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp
}




}