* {
  box-sizing: border-box;

}
*{box-sizing: border-box;}
html{font-size: 16px}
body {
  background: #fff;
  color: #212121;

  height: 100%;
}
h1, .h1, h2, .h2, h3, .h3{margin: 0}
::selection {
  background: #fff;
  color: #212121;
  mix-blend-mode: difference;
}

::-moz-selection {
  background: #fff;
  color: #212121;
}
section{overflow: hidden;}
h1, h2, h3, h4, h5 {
  font-weight: 900; margin-bottom: 0
}
p{margin-bottom: 0;}
h1 {
  font-size: 3em;
}

.hero-title {
  font-size: 8vw;
  line-height: 1em;
  font-weight: 900;
}

.nav-title {
  font-size: 4em;
}

a {
  transition: all 0.25s ease-in-out;
}

.white, a.white {
  color: #efefef;
}

.black {
  color: #212121;
}

.pearl, a.pearl {
  color: #fff;
}

.green, a.green {
  color: #00BCD4;
}

.pink {
  color: #b73b3b;
}

.blend {
  mix-blend-mode: difference !important;
  color: #efefef;
  position: relative;
  z-index: 2;
}

.bg-black {
  background-color: #212121;
}

.bg-green {
  background-color: #fff;
}

.bg-topographic {
  background-image: url(https://assets.codepen.io/319606/bg-topographic.svg);
  background-size: 5000px;
  opacity: 0.1;
  pointer-events: none;
}


.index_banner2{display: none}
.swoosh {
  background-image: url("../images/logo.png");
  background-size: 100%;
  background-repeat: no-repeat;
  top: 20px;
  left: 18px;
  width: 245px;
  z-index: 1000;
  background-position: left;
}

.sticky-nav {
  top: 25px;
  left: 25px;
  position: fixed;
  width: calc(100% - 50px);
  z-index: 999;
}
.sticky-nav.difference {
  background-repeat: no-repeat;
  background-size: contain;
  
}
.sticky-nav.difference #nav-btn {
  filter: invert(0);

}
.sticky-nav .logo {
  width: 12%; min-width: 170px;   
    float: left;


  background-size: 100%;
  background-repeat: no-repeat;
  background-position: left;
  z-index: 998;
}
.sticky-nav .logo img{width: 100%}
.menu {
    width: 45px; height: 33px;
    float: right;
    position: relative; margin-top: 0px; cursor: pointer;
}
.sticky-nav #nav-btn .icon {
  position: relative;cursor: pointer;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #000;
}
.sp_nav_se span:nth-of-type(1){top:10px;transform:rotate(45deg);background:#008ceb; position: absolute;}
.sp_nav_se span:nth-of-type(2){width:0}
.sp_nav_se span:nth-of-type(3){top:10px;transform:rotate(-45deg);background:#008ceb;  position: absolute;}

.difference #nav-btn .icon {stroke: #a3a3a3; cursor: pointer;}
#takeover-nav {
  position: fixed;
  width: 100vw;
  height: 110vh;

  left: 0;
  top: -200%;

  z-index: 996;
}

.sp_nav_se2 .logo{display: none}
#takeover-nav.shown {
  top: 0;
}
#takeover-nav .nav-col {
  min-height: 100vh;
}
#takeover-nav .nav-col a {
  color: #008ceb;font-size: 5.5rem; line-height: 1.4em; font-weight: bold;
}
#takeover-nav .nav-col a:hover{text-decoration: none;}
#takeover-nav .nav-col{text-align: center; }

#takeover-nav .nav-contact .content {
  max-width: 700px;
}
.china{display: none}
.pb-3 a:hover .china{display: block;}
.pb-3 a:hover .en{display: none}
#takeover-nav .nav-items{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 490px;
}
#takeover-nav .contact-items {
  font-size: 2.5rem;
  font-weight: 700;
}
#takeover-nav .contact-items a:hover {
  color: #00BCD4;
}
.menu span{width: 100%; height: 6px; border-radius: 3px; margin-bottom: 7px; background: #4e4e4e; display: block; transition: all ease 0.35s;}
#takeover-nav .social {
  font-size: 0.75em;
}
#takeover-nav .social a {
  color: #00BCD4;
}
#takeover-nav .social a:hover {
  color: #efefef;
}

.gradient-overlay {
  bottom: 0;
  height: 50%;
  background: -moz-linear-gradient(top, rgba(33, 33, 33, 0) 0%, #212121 50%);
  background: -webkit-linear-gradient(top, rgba(33, 33, 33, 0) 0%, #212121 50%);
  background: linear-gradient(to bottom, rgba(33, 33, 33, 0) 0%, #212121 50%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00212121", endColorstr="#212121",GradientType=0 );
  z-index: 1;
  border-bottom-right-radius: 15vw;
  pointer-events: none;
}

.video-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-bottom-right-radius: 15vw;
  pointer-events: none;
}

#video-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  min-width: 100%;
  background-position: center center;
  background-size: cover;
  object-fit: cover;
  transform: rotate(180deg);
}




section{padding: 0 3rem ; background: #fff; position: relative;}
.banner{width: 100%; position: relative; z-index: 0;}
section.hero {
  position: relative; padding: 0; width: 100%; left: 0; top: 0; z-index: 0;
}
section.hero img{width: 100%}
section.two .left h3{font-size: 5.625rem; font-weight: 600; margin-bottom: 2.5rem;}
section.two .left h4{font-size: 1.8rem; font-weight: 600; line-height: 2em}
section.two .left p{font-size: 1.8rem; line-height: 1.4em}
section.two .right p{font-size: 2.5rem; line-height: 1.4; padding-bottom: 2.5rem; text-align: justify;}
section.two .right p:last-child{padding-bottom:0px}
section.two{padding: 9rem 3rem;  background: #fff; position: relative; z-index: 10;}
section.shenfen{padding: 14rem 3rem; padding-bottom: 16rem;}
.shenfen .col-md-12{padding-top: 7rem}
section.three img{margin-bottom: 4.25rem;}
section.three p{font-size: 2.5rem; line-height: 1.4; margin-bottom: 2.5rem;}
section.three .row{margin: 0 -3.5rem}
section.three .row .col-md-6{padding: 0 3.5rem}
section.three{ background: #fff; position: relative;}
.video{margin-bottom: 4.25rem;}
.prev{font-size: 2.5rem; color: #000; float: left;}
.next{font-size: 2.5rem; color: #000; float: right;}
.center{margin: 0 auto; display: inline-block;}
.pre_next{text-align: center; padding:  7.6rem 0; padding-top: 3.35rem; margin-bottom: 90px;}

 footer{height: 90px; background: #000; width: 100%; padding: 0 25px; position: fixed; bottom: -300px; z-index: 2; transition: all .5s;}
 .sabit{bottom: 0}
    .bottom_left{display: table; height: 90px; float: left;}
    .bottom_left a{margin-top: 30px; display: inline-block; margin-right: 32px;}
    .con_right{width: 50%; float: left; color: #fff; padding-left: 100px;}
.contact_more{overflow: hidden;}
.con_right p{font-size: 24px; line-height: 38px; padding-bottom: 30px; background: url(../images/line.jpg) no-repeat left 5px; padding-left: 50px;}
.con_right .pb0{padding-bottom: 0;}
.bt_right{float: right; font-size: 26px; line-height: 90px; color: #00a2e9; background: url(../images/tel.jpg) no-repeat left 28px;}
.bt_right p{float: left; padding-left: 40px;}

section.two .left h2{margin-top: -10px;}
section.two .left h2,section.two .left h3{
            -webkit-transform: translateY(100px);
                -ms-transform: translateY(100px);
                    transform: translateY(100px);
            -webkit-transition: opacity 0.5s,-webkit-transform 0.5s;
            transition: opacity 0.5s,-webkit-transform 0.5s;
            -o-transition: transform 0.5s,opacity 0.5s;
            transition: transform 0.5s,opacity 0.5s;
            transition: transform 0.5s,opacity 0.5s,-webkit-transform 0.5s;
            opacity:0;
            
        }
section.two .left h4{
            -webkit-transform: translateY(100px);
                -ms-transform: translateY(100px);
                    transform: translateY(100px);
            -webkit-transition: opacity 0.5s,-webkit-transform 0.5s;
            transition: opacity 0.5s,-webkit-transform 0.5s;
            -o-transition: transform 0.5s,opacity 0.5s;
            transition: transform 0.5s,opacity 0.5s;
            transition: transform 0.5s,opacity 0.5s,-webkit-transform 0.5s;
            opacity:0;
            -webkit-transition-delay: 0.25s;
                 -o-transition-delay: 0.25s;
                    transition-delay: 0.25s;
                     
        }
section.three p,section.two p{ -webkit-transform: translateY(100px);
                -ms-transform: translateY(100px);
                    transform: translateY(100px);
            -webkit-transition: opacity 0.5s,-webkit-transform 0.5s;
            transition: opacity 0.5s,-webkit-transform 0.5s;
            -o-transition: transform 0.5s,opacity 0.5s;
            transition: transform 0.5s,opacity 0.5s;
            transition: transform 0.5s,opacity 0.5s,-webkit-transform 0.5s;
            opacity:0;
            -webkit-transition-delay: 0.5s;
                 -o-transition-delay: 0.5s;
                    transition-delay: 0.5s;
    }
section.history li,section.videoss video,section.three video,section.three .divtest img,section.two .divtest img{
    -webkit-transform: translateY(100px);
                -ms-transform: translateY(100px);
                    transform: translateY(100px);
            -webkit-transition: opacity 0.4s,-webkit-transform 0.4s;
            transition: opacity 0.4s,-webkit-transform 0.4s;
            -o-transition: transform 0.4s,opacity 0.4s;
            transition: transform 0.4s,opacity 0.4s;
            transition: transform 0.4s,opacity 0.4s,-webkit-transform 0.4s;
            opacity:0;
            -webkit-transition-delay: 0.4s;
                 -o-transition-delay: 0.4s;
                    transition-delay: 0.4s;

}
section.history .on li,section.two .on h2,section.two .on h3,section.two .on h4,section.two .on p,section.three .on p{
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
            opacity:1;
        }
section.videoss.on video,section.three .on video,section.three .on img,section.two .on img{
  -webkit-transform: none;
                -ms-transform: none;
                    transform: none;
            opacity:1;
}
.trhee .on{ display: block; }
.sp_nav_se2{overflow: hidden;}
.about_ny h2{font-size: 7.8rem; font-weight: normal; line-height: 1.2em; margin-bottom:2.5rem;}
.history{padding: 7rem 3rem}
ul,li{list-style: none}
.history h3{font-size: 2.5rem; font-weight: normal; margin-bottom: 2.5rem; line-height: 2em}
.history li p{width: 70%; display: inline-block; white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;}
.history li span{width: 30%; display: inline-block; float: right; text-align: right; white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;}
.history li{font-size: 2.5rem; line-height: 2em}
.history ul{margin-left: 0; padding-left: 0}
img{max-width: 100%}
.contact{padding: 9rem 0; height: 100vh; top: 0; overflow-y: auto; z-index: 1000; width: 100%; margin-bottom: 30px; display: block;  transition: opacity 0s,visibility .3s,-webkit-transform 1.2s; opacity: 0;}
.contact2{background: #fff; opacity: 1; position: fixed; transition: all 0.5s;}
.contact h3{font-size: 5.625rem; margin-bottom: 0.8em; margin-top: -10px}
.guanzhu .col-md-4{text-align: center; max-width: 244px; padding: 0 35px;}
.guanzhu{width: 732px; float: right; margin: 0 -35px;}
.guanzhu p{font-size: 16px;  line-height: 2em; padding-top: 10px; font-weight: bold;}
.con_flex{position: relative;}
.con_flex .icons{position: absolute; bottom: 0; right: 5px; height: 63px;}
.icons a{margin-left: 10px;}
.w_50{width: 50%; float: left;}

.pro_li{position: relative; cursor: pointer;}
.hover_img{opacity: 0 !important; position: absolute; left: -2.5%; top: -2px; width:105%; height:105%; max-width:105%; transition:all 1s;}
.pro_li h3{color:#000;    padding: 14px 30px 25px; font-size: 1.2rem; font-weight: normal; position: absolute;  bottom: 0; left: 0; opacity: 0; transition: all 0s; }
.pro_li h3.color1{color: #fff}
.pro_li{overflow:hidden}
.pro_li:hover h3{opacity: 1; bottom: 0}
.pro_li:hover .hover_img{opacity: 1 !important; border:0}
.main_img{transition: all 1s; width:105%; height:105%; margin-left:-2.5%;  max-width:105%}
.pro_li:hover .main_img{opacity: 0 !important;}
.pro_list{padding-bottom: 5.6rem; overflow: hidden;}
.nav-items li{    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    -webkit-transition-delay: 0,0,0;
    transition-delay: 0,0,0;
    -webkit-transition: opacity 0s,visibility .3s,-webkit-transform 1.2s;
    transition: opacity 0s,visibility .3s,-webkit-transform 1.2s;
    transition: transform 1.2s,opacity 0s,visibility .3s;
    transition: transform 1.2s,opacity 0s,visibility .3s,-webkit-transform 1.2s;
    -webkit-transition: transform 1.2s,opacity 0s,visibility .3s;}
.shown .nav-items li {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity .6s,visibility .6s,-webkit-transform .6s;
    transition: opacity .6s,visibility .6s,-webkit-transform .6s;
    transition: transform .6s,opacity .6s,visibility .6s;
    transition: transform .6s,opacity .6s,visibility .6s,-webkit-transform .6s;
    -webkit-transition: transform .6s,opacity .6s,visibility .6s;
}
.shown .nav-items li:nth-child(1) {
    -webkit-transition-delay: .2s,.2s,.2s;
    transition-delay: .2s,.2s,.2s;
}
.shown .nav-items li:nth-child(2){
-webkit-transition-delay: .4s,.4s,.4s;
    transition-delay: .4s,.4s,.4s;
}
.shown .nav-items li:nth-child(3){
-webkit-transition-delay: .6s,.6s,.6s;
    transition-delay: .6s,.6s,.6s;
}
.shown .nav-items li:nth-child(4) {
    -webkit-transition-delay: .8s,.8s,.8s;
    transition-delay: .8s,.8s,.8s;
}
.hover_ewm{display:none; position:absolute; transition:all 0.5s;    width: 100px; bottom: 40px; border:solid 5px #fff; border-radius:10px;}
.weixin:hover .hover_ewm{display:block}
.weixin{position:relative}

@media screen and (min-width: 1200px) {
  
}
@media screen and (max-width: 1600px) {
  html{font-size: 14px}
}
@media screen and (max-width: 1400px) {
  html{font-size: 12px}
}
@media screen and (max-width: 1199px) {
  html{font-size: 10px}
  footer{position: initial;}
  footer{height: auto; overflow: hidden;}
  .bt_right{float: initial; line-height: 40px;}
  .bottom_left{height: auto; float: initial; }
  .bt_right p{font-size: 20px; line-height: 40px; float: initial; display: inline-block;}

  .bt_right{padding-top: 10px; background: url(../images/tel.jpg) no-repeat -5px 10px; padding-bottom: 15px;}
  .con_flex .icons{position: initial;}
  .index_banner2{display: block;}
  .index_banner{display: none}
  .contact2{text-align: center;}
  .guanzhu .col-md-4{width: 100%; text-align: center; max-width: 100%; margin-bottom: 30px;}
  .guanzhu .col-md-4 img{width: 20rem;}
  .guanzhu{margin: 0}
  .icons a{margin: 0 5px}
  .icons a img{height: 50px;}
  .guanzhu p{font-size: 1.6rem;}
  .guanzhu{width: 100%; float: initial; margin-top: 40px}
  .col-md-6 {    width: 100%;}
  .two .col-md-6:first-child{padding-bottom:30px}
}
@media screen and (max-width: 767px) {
  html{font-size: 6px}
  footer{height: auto; overflow: hidden;}
  .bottom_left{height: auto;}
  .bt_right p{font-size: 20px; line-height: 40px}

  .bt_right{padding-top: 10px; background: url(../images/tel.jpg) no-repeat -5px 10px; padding-bottom: 15px;}
.w_50{width: 100%}
  
  #takeover-nav .nav-items{height: 120px}

}
@media screen and (max-width: 575px) {
  
}