*{ margin:0px; padding:0px; box-sizing:border-box; }

html { 
  font-family: Helvetica Neue, Roboto Light, PingFang SC, Lantinghei SC,
    Hiragino Sans GB, Microsoft Yahei, Arial;
} 
body 
{
    line-height:1.5; 
    color: #666; 
}
a{ text-decoration:none;}
ul,li{ list-style:none; }
img{ vertical-align:middle; max-width:100%; }

.banner {  
  background-size:100% 100%; 
  overflow:hidden;
  position:relative;
  padding-top:80px;
  padding-bottom:150px;
}
.header {
  height: 80px;
  line-height: 80px;
  background: hsl(0deg 0% 0% / 20%);
  position:fixed;
  left:0px; 
  width:100%; 
  z-index:999999999999;
  top:0px;
}
.nav {
  max-width: 960px;
  margin: 0 auto;
  overflow:hidden;
}
.home 
{
    margin-left:20px;
    line-height:40px; 
    color:#000000;
    display:block;
    float:left;
    margin-top:20px;
    font-weight:bolder;
}
.home img{ height:40px; margin-right:10px; border-radius:6px; }




.xz_an {
  height: 40px;
  width: 200px;
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  border-radius: 30px;
  line-height: 40px;
  font-weight: 500;
  text-align: center;
  margin-right:20px; 
}
.pg_xz {
  background: #fd6d64;
  font-size: 18px;
  width: 136px;
  margin-top: 24px;
  float:right;
}
.pg_xz1 {
  background: #fd6d64;
  font-size: 16px;
  height: 66px;
  width: 220px;
  line-height: 66px;
  margin-top: 24px; 
  margin-right: 0px;
  color:#fff;
}
.xz_an img {
  vertical-align: middle;
  padding: 0 10px 0 0;
  margin-top: -6px;
}



.hero-desc-wrapper {
  color: #000; 
  text-align:center;
  vertical-align: top;
  margin: 40px 0 0 0px;
}
.hero-desc-title {
  font-size: 28px;
  line-height: 30px;
  font-weight: 100;
}
.hero-desc-download, .hero-desc-title {
  text-align: center;
}
.hero-desc {
  font-weight: 200;
  font-size: 16px;
  line-height: 25.2px;
  margin: 20px 0; 
}
.spic { text-align:center; margin-top:50px; }
.spic img { 
  width: 100px; }
.spic p {
  font-weight: 200;
  font-size: 16px;
  line-height: 25.2px;
  margin: 10px 0 20px; 
  color: #fff; 
}






























.share {
  background: #fff;
}

.share-content {
  max-width: 1120px;
  margin: 0 auto;
  border-bottom: 1px solid #dedede;
  padding-bottom: 50px;
}

.counter {
  display: block;
  text-align: center;
  font-size: 50px;
  line-height: 60px;
  color: #ed1e24;
  font-weight: 400;
  margin-top: 50px;
}
 
.share-matches {
  font-size: 16px;
  color: #424242;
  margin-top: 10px;
  padding: 0 10px;
}
.share-matches {
  display: block;
  text-align: center;
}
.share-social {
  display: block;
  text-align: center;
}

.share-social {
  padding: 0;
  list-style: none;
  margin: 30px 0px 0;
}
.share-social img {
  height: 35px;
  width: 35px; 
}
.share-button  {
  display: inline-block;
  margin: 0 8px;
}

.features {
  background: #fff;
  max-width: 1120px;
  margin: 0 auto;
  padding-top: 30px; 
  border-bottom: 1px solid #dedede;
  padding-bottom: 30px;
  color: #000;
}
.feature 
{
    padding:0px 80px;
}
.feature li  
{
    margin-bottom:30px; 
}
.feature li h2
{
    font-size: 28px; 
    font-weight: 500; 
    margin-bottom:10px;
    color:#000;
}
.feature li p{
  font-size: 16px;
  color: #313131; 
  line-height: 22.4px;
}

.feature li h2 img{ height:40px; }
.contact {
  background: #fff;
  max-width: 1120px;
  margin: 0 auto;
  padding-top: 30px;  
  padding-bottom: 30px;
  color: #000;
}
.footer {
  background: rgba(255,255,255,0.8);
  text-align: center;
  font-size: 12px;
  padding: 20px 0; 
  width: 100%;
  z-index:9999999999999999999999;
}

.footer a {
  text-decoration: none;
  color: #818c92;
  cursor: pointer;
}

.footer-row {
  padding: 4px;
  max-width: 960px;
  margin: 0 auto;
}

.footer-about {
  padding-right: 10px;
}

.footer-about,
.footer-contact {
  border-right: 1px solid #818c92;
}

.footer-contact {
  padding: 0 10px;
}

#footer-language {
  padding-left: 10px;
}

.footer-flag {
  width: 14px;
  height: 10px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.footer-name {
  vertical-align: baseline;
}

.footer-component {
  display: inline-block;
  margin: 0 10px;
}


.swiper-container
{
    max-width: 100%; 
    margin:0 auto;
    overflow: initial;
}
.swiper-wrapper
{
    margin-top: 10px;
}

.lunbo  
{
  max-width:1100px;
  margin:0 auto;   
  position:relative;  
}

.swiper-slide
{
    width: 50%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.swiper-slide .main-img
{ 
    max-width: 90%;
    margin: 0 auto;
    display: block;
    max-height:525px;
}
 
#pagination
{
    position:relative; 
    width: 100%;
    margin-top:2%; 
}
#pagination .swiper-pagination-bullet
{ 
    margin: 0 0 0 20px;
    background: 0;
    opacity: 1;
}
.swiper-pagination-bullet i
{
    background: #000000;
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    border-radius: 50px;
    display: block;
    font-style: normal;
    text-align: center;
    margin: 0 auto;
    color: #fd6d64;
}
.swiper-pagination-bullet-active i
{
    -webkit-transform: scale(1.5);
    background: #fd6d64;
    background-size: auto 100%;
    color: #fd6d64;
}


.youshi {
  max-width: 1120px;
  margin: 0 auto;
  border-bottom: 1px solid #dedede;
  padding-bottom: 50px;
}
.youshi-content{ position:relative;  }
.clr{ clear:both; }
.youshibg{ background:#fd6d64; margin-bottom:280px; }
.youshi li .zi{ float :right; width:42%; padding-top:20%; text-align:center; }
.youshi li .zi h2{ color:#ffffff; line-height:2; font-weight:400; font-size: 30px;}
.youshi li .zi p{ font-size: 26px; font-weight:100; color:#000; }
.youshi li .tu{ float :left; width:45%; margin-top:-14%; position:relative; z-index:99;}
.youshi li .tu .tu2{ margin-left:-24%; margin-top:-90%; }

.youshi li{
  padding: 0px 80px; }
  
  .youshi li:last-child{ margin-bottom:-240px;}
/*
.youshi li:nth-child(1) { 
  background: url(../images/zb1.png) no-repeat center bottom; background-size:100% 70%;   }
.youshi li:nth-child(3) {            
  background: url(../images/zb2.png) no-repeat; background-size:100% auto;   }
.youshi li:nth-child(4) {            
  background: url(../images/zb3.png) no-repeat; background-size:100% auto;   }
*/
.youshi li:nth-child(3) .zi1{ color:#fff; }
.youshi li:nth-child(3) .zi1 p{ color:#fff; }
.youshi li:nth-child(3) .zi1 h2{ color:#fff; }
.zib{ margin-top:45%;color:#fff; }
.zib p{ color:#fff !important; } 
.zb1{ width:100%; position: absolute; left:0px; z-index:-1; top:8.3%;  }
.zb2{ width:100%; position: absolute; left:0px; z-index:-1; top:33%;   }
.zb3{ width:100%; position: absolute; left:0px; z-index:-1; bottom:0px;   }
.youshi li .zi .zi2{ margin-top:120%; }
.youshi li:nth-child(2n+2) .tu{ float :right;  }
.youshi li:nth-child(2n+2) .zi{ float :left;  } 
@media all and (max-width: 1199px) {}

@media all and (max-width: 991px) 
{
    
.youshi li .zi p{  font-size:20px; }
    
    }

@media all and (max-width: 768px) 
{
    .swiper-slide
{
    width: 70%; 
}
.feature 
{
    padding:0px 40px;
}

.youshi li{
  padding: 0px 40px; }

.features li h2 img{ height:30px; }


.pg_xz { 
  font-size: 14px;
  width: 110px;
}
#pagination
{
    position:relative; 
    width: 100%;
    margin-top:4%;
}
.zib {
    margin-top: 64%;
    color: #fff;
}

.youshi li .zi p{  font-size:16px; }


.youshibg{ margin-bottom:70px; }
  .youshi li:last-child{ margin-bottom:-80px;}
    }

@media all and (max-width: 575px) 
{
    .banner { 
    padding-bottom: 70px;
}
    .counter {
      font-size: 40px;
    }
    .youshi li .zi h2 { 
    line-height: 2;
    font-weight: 500;
    font-size: 16px;
}
.youshi li {
    padding: 0px 20px;
}
.youshi li .zi { 
    width: 48%;
    padding-top: 15%;
}
.zib {
    margin-top: 58%;
    color: #fff;
}
.youshi { 
    padding-bottom: 20px;
}
}
@media all and (max-width: 480px) 
{
    .zib {
    margin-top: 32%;
    color: #fff;
}
.zib p{ font-size:10px !important; }
.youshi li .zi p{  font-size:12px; }

.youshi-content {
    position: relative; 
}
}

@media screen and (min-height:481px)
{
    .swiper-wrapper
    {
        margin-top: 20px;
    } 
    
}
@media screen and (min-height:569px)
{
    .swiper-wrapper
    {
        margin-top: 40px;
    } 
    .swiper-pagination-bullet i
    {
        width: 10px;
        height: 10px;
        line-height: 10px;
        font-size: 15px;
    }
}