.header{
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10;
  width: 100%;
  min-width: 1200px;
  height:115px;
  color: #b4b6d9;
  font-size: 20px;
  font-weight: bold;
  transition: background-color .2s linear;
}
.header:hover{
  background-color: rgba(0, 0, 0, .3);
}
.header .content{
  position: relative;
  width: 1240px;
  height: 100%;
  margin: 0 auto;
}

.header .content .logo{
  position: absolute;
  left: 0;
  top: 0;
  width: 320px;
  height: 100%;
}

.header .content .logo img{
  margin-top: 27px;
}

.header .nav{
  position: absolute;
  right: 0px;
  height: 100%;
  width: 600px;
  line-height: 115px;
  cursor: pointer;
}
.header .nav li{
  float: left;
  width: 135px;
  text-align: center;
  transition: color .2s linear;
  text-indent: 3px;
}
.header .nav li a{
  color: inherit;
}
.header .nav li:hover{
  color: #fff;
}
.header .nav li.active{
  color: #fff;
  position: relative;
}
.header .nav li.active::before{
  position: absolute;
  top: 0px;
  bottom: 0px;
  margin: auto;
  content: '.';
  display: block;
  width: 19px;
  height: 16px;
  font-size: 0px;
  background: url(/images/active.png) no-repeat center;
  background-position: 0 8px;
  animation: bg-move 400ms steps(4) infinite;
}
@keyframes bg-move{
  from{
    background-position: 0 -16px;
  }
  to{
    background-position: 0 0px;
  }
}
#wrap{
  position: relative;
  width: 100%;
  min-width: 1240px;
  height: 980px;
  background: url(/images/header-bg.png) 21% 0 no-repeat,linear-gradient(to right, #4da5c7, #55399e);
}
.over-main{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
.main{
  height: 100%;
  width: 1240px;
  margin: 0 auto;
}
.main::before{
  content: '.';
  font-size: 0;
  display: block;

}
.main .text{
  float: left;
}
.main .text img {
  margin: 80px 0 0 20px;
}
.main .icon{
  float: right;
  margin-top: 300px;
}
.main h1{
  position: relative;
  width: 670px;
  margin-top: 280px;
  font-size: 41.667px;
  color: #fff;
  font-weight: 500;
  line-height: 55px;
  z-index: 20;
}
.main h1::before{
  content: '';
  position: absolute;
  width: 71px;
  height: 67px;
  top: -37px;
  left: -50px;
  z-index: -1;
  background: url(/images/quotation-blue.png) left top no-repeat;
}
.main .description{
  width: 735px;
  color: #fff;
  font-size: 16.5px;
  font-weight: 300;
  line-height: 27px;
  margin-top: 40px;
}

.section {
  height: 711px;
  width: 100%;
  min-width: 1240px;
}
.section .content{
  width: 1240px;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.section .introduce{
  float: left;
  width: 590px;
  height: 440px;
  margin-top: 128px;
  box-sizing: border-box;
  padding: 44px;
  color: #581b7d;
  background: url(/images/quotation.png) left top no-repeat;
}
.section .introduce.best-case{
  width: 440px;
}
.section .phone{
  position: relative;
  float: left;
  width: 650px;
  height: 100%;
  padding-top: 20px;
  color: #fff;
  box-sizing: border-box;
  perspective: 2000px;
}

.section .phone:hover img:nth-child(2){
  /*margin-left: -40px;*/
  /*transform: rotateY(20deg) translateZ(50px);*/
}

.section .phone img{
  vertical-align: middle;

  transition: all .2s linear;
}
.section .phone.partners img{
  margin-top: 80px;
}
.section .phone img:nth-child(2){
  /*margin-left: -110px;*/
  transform: translateZ(50px);
}

.section .introduce .title{
  font-size: 41.667px;
  font-weight: bold;
}
.section .introduce .description{
  margin-top: 39px;
  font-size: 16.667px;
  line-height: 25px;
  font-weight: bold;
}
.section .introduce .description .strong{
  font-size: 20px;
}

.section1{
  position: relative;
  background-color: #f0f0f0;
}
.section1::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 130px;
  left: 0;
  transform: translateY(-100%);
  background:url(/images/mask-gray.png) 0 0 no-repeat;
}
.section2{
  position: relative;
  background-color: #fff;
}
.section2::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 130px;
  left: 0;
  transform: translateY(-100%);
  background:url(/images/mask-white.png) 0 0 no-repeat;
}
.section-black{
  position: relative;
  background-color: #424460;
  height: 640px;
}
.section-black::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 130px;
  left: 0;
  transform: translateY(-100%);
  background:url(/images/mask-black.png) 0 0 no-repeat;
}
.section-black .introduce{
  float: left;
  width: 590px;
  height: 440px;
  margin-top: 128px;
  box-sizing: border-box;
  padding: 44px;
  color: #fff;
  background: url(/images/quotation-black.png) left top no-repeat;
}
.section-black .phone{
  margin-top: 15px;
  float: right;
  width: 540px;
}
.section-black .description{
  color: #8f91ad;
}
.section-black  .subtitle{
  font-size: 24px;
  margin-top: 40px;
}
.section-black .sub-description{
  width: 345px;
  margin-top:24px;
  font-size: 15px;
  font-weight: 300;
  color: #8f91ad;
}

.section-black .introduce .description{
  margin-top: 39px;
  font-size: 16.667px;
  line-height: 25px;
  font-weight: 300;
}

.section-black .content .list{
  width: 100%;
  margin-top: 100px;
}

.section-black .content .list li{
  width: 25%;
  float: left;
  box-sizing: border-box;
  padding-right: 20px;
}
.section-black .content .list li h2{
  font-size: 21px;
  color: rgb(255, 255, 255);
}
.section-black .content .list li p{
  font-size: 15px;
  line-height: 20px;
  margin-top: 25px;
  color: #8f91ad;
}


.footer{
  height: 142px;
  width: 100%;
  min-width: 1240px;
  background-color: #303040;
}
.footer .content {
  width: 1240px;
  height: 100%;
  margin: 0 auto;
}
.footer .footer-logo{
  float: left;
  width: 320px;
  height: 100%;
  background: url(/images/logo2.png) center no-repeat;
}
.footer ul{
  float: left;
  width: 420px;
  height: 100%;
}
.footer ul li,.footer ul li a{
  float: left;
  padding: 0 25px;
  font-size: 12px;
  font-weight: bold;
  color: #bebec3;
  cursor: pointer;
  line-height: 142px;
  transition: color .2s linear;
}
.footer ul li:hover{
  color: #fff;
}

.footer>.mask{
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  overflow: hidden;
  background:rgba(0, 0, 0, .6);
  z-index: 1000;
}


.footer>.mask>.statement{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  padding: 0 30px;
  box-sizing: border-box;
  width: 880px;
  height: 80%;
  background-color: #fff;
  overflow-y: auto;
  border-radius: 10px;
}
.footer>.mask>.statement>.close{
  position: absolute;
  right: 0;
  top: 0;
  width: 35px;
  height: 35px;
  text-decoration: none;
  text-align: center;
  font-size: 20px;
  line-height: 35px;
  background-color: red;
  color: #fff;
}
.footer>.mask>.statement>h2{
  text-align: center;
  margin:30px 0;
  font-size: 28px;
}

.footer>.mask>.statement>h3{
  font-size: 20px;
  margin: 20px 30px;
}
.footer>.mask>.statement>p{

  margin: 15px 40px;
  line-height: 25px;
  word-break: break-all;
  white-space: normal;
  color: gray;
}
.footer>.mask>.statement a{
  color: #2a93d4;
  text-decoration: underline;
}