@charset "utf-8";
* {
  margin: 0;
  padding: 0;
  font-family: "Microsoft YaHei";
}

h1, h2, h3, h4, h5, h6, p, ul, li {
  list-style: none;
}

img {
  display: block;
  width: 100%;
}

a {
  text-decoration: none;
}

.content {
  width: 96%;
  margin: 0 auto;
  overflow: hidden;
}

/*清除浮动代码*/
.clearfix:after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0
}

.clearfix {
  zoom: 1
}

.div-main {
  max-width: 720px;
  min-width: 320px;
  margin: 0 auto;
}
.title{
  overflow: hidden;
  margin-top:8%;
  position: relative;
  padding: 3% 0;
}
.title h1{
  text-align: center;
  font-size: 2rem;
  color: #080103;
  line-height:150%;
}
.title h3{
  text-align: center;
  text-transform: uppercase;
  font-size: 1rem;
  color: #080103;
  line-height:150%;
}
.title span{
  position: absolute;
  width: 5%;
  top:0;
}
.title1 span{
  left:10%;
}
.title2 span{
  left:6%;
}
/*banner*/
#banner{
  position: relative;
}
#banner a{
  display: block;
  width:44%;
  text-align: center;
  line-height:200%;
  color: #0a5f62;
  font-size: 1.2rem;
  background: #ffffff;
  border:2px solid #0a5f62;
  border-radius: 10rem;
  position: absolute;
  left:28%;
  top:30%;
  animation:sale 2s ease infinite;
}
#banner img{
  min-height: 370px;
}
@keyframes sale{
  0%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.1)
  }
  100%{
    transform:scale(1);
  }
}
/*main1*/
#main1 ul li{
  float: left;
  width:29.4%;
  margin-left:5%;
  margin-top:5%;
}
#main1 ul li:first-child,#main1 ul li:nth-child(4){
  margin-left:0;
}
#main1 ul li p{
  text-align: center;
  line-height:150%;
  font-size: 1.4rem;
  color: #0e566d;
}
.btn{
  display: block;
  text-align: center;
  line-height:260%;
  font-size: 1.4rem;
  border-radius: 10rem;
}
.btn1{
  color: #ffffff;
  background: #1b7a7d;
  width:70%;
  margin:5% auto;
}
/*main2*/
#main2{
  background: #e3f5f9;
}
#main2 .info{
  position: relative;
  margin-top:5%;
}
#main2 .info h2{
  width:55%;
  text-align: center;
  font-size: 1.3rem;
  font-weight:bold;
  color: #0e566d;
  line-height:150%;
  position: absolute;
  top:20%;
}
#main2 .info p{
  font-size: 1.2rem;
  color: #0e566d;
  line-height:150%;
  position: absolute;
  width:47%;
  top:45%;
}
.info1 h2{
  left:43%;
}
.info2 h2{
  left:5%;
}
.info1 p{
  left:48%;
}
.info2 p{
  left:10%;
}
.btn2{
  color: #ffffff;
  background: #ec4b7d;
  width:70%;
  margin:5% auto;
}
/*main3*/
.title3 span{
  left:20%;
}
.make{
  position: relative;
  margin-top:5%;
}
.make p{
  width:44%;
  text-indent: 2em;
  font-size: 1rem;
  color: #0e566d;
  line-height:150%;
  border:1px dashed #0e566d;
  position: absolute;
  top:2%;
  right:0;
  padding:2%;
}
.make .go{
  position: absolute;
  width:24.7%;
  right:0;
  bottom:10%;
}
.yue{
  display: block;
  margin-bottom:3%;
}
/*main4*/
#main4{
  background: #e3f5f9;
}
.layer{
  position: relative;
  margin:7% 0;
}
.layer p{
  font-size: 1.1rem;
  color: #ffffff;
  line-height:150%;
  position: absolute;
  padding:0 5%;
  bottom:10%;
}
.title5 span{
  left:2%;
}
.slide1{
  width:96%;
  margin:6% auto;
  position: relative;
  overflow: hidden;
  box-shadow: 1px 0 2px rgba(0,0,0,.23),-1px 0 2px rgba(0,0,0,.23), 0 1px 2px rgba(0,0,0,.23),0 -1px 2px rgba(0,0,0,.23);
}
.box{
  width:96%;
  margin:0 auto;
  overflow: hidden;
  padding:3% 0 5%;
}
.slide1 h4{
  text-align: center;
  color: #000;
  font-size: 1.6rem;
  font-weight:bold;
  line-height:150%;
  margin-top:5%;
  margin-bottom:3%;
}
.slide1 .btn3{
  width:70%;
  color: #ffffff;
  background: #1b7a7d;
  margin:5% auto;
}
.slide1 .swiper-pagination-bullet{
  background: transparent;
  border:1px solid #0e566d;
  vertical-align: middle;
}
.slide1 .swiper-pagination-bullet-active{
  width:12px;
  height:4px;
  border-radius: 2px;
  vertical-align: middle;
  background: #0e566d;
}
/*main6*/
#main6{
  background: #e3f5f9;
}
.title6 span{
  left:10%;
}
.ys{
  position: relative;
  margin-top:8%;
}
.intro{
  position: absolute;
  overflow: hidden;
  width: 38%;
}
.intro h4{
  color: #ffffff;
  font-size: 1.3rem;
  font-weight:bold;
  text-align: center;
  line-height:150%;
}
.intro p{
  text-align: center;
  font-size: 1.15rem;
  color: #ffffff;
  line-height:150%;
  margin-top:5%;
}
.ys a{
  display: block;
  text-align: center;
  font-size: 1rem;
  line-height:200%;
  width:23.5%;
  border:1px solid #ec4b7d;
  color: #ec4b7d;
  position: absolute;
  border-radius: 6px;
  top:57%;
  left:38.5%;
}
.intro1{
  left: 1%;
  top: 23%;
}
.intro2{
  left:32%;
  top:5%;
}
.intro3{
  left: 62%;
  top: 23%;
}
.intro4{
  left: 1%;
  top: 58%;
}
.intro5{
  left: 31%;
  top: 75%;
}
.intro6{
  left: 62%;
  top: 58%;
}
/*main7*/
#main7{
  background: url(https://cz-mbl.oss-cn-hangzhou.aliyuncs.com/mobile/m1/zt/qbmbzx2018/images/zj_02.jpg) no-repeat center scroll;
  background-size:100%;
  overflow: hidden;
}
#main7 .title{
  margin-top:4%;
}
.expert{
  position: relative;
  overflow: hidden;
}
.expert-left{
  float: left;
  width:68%;
}
.expert-right{
  float: left;
  width:60%;
  margin-left:-30%;
  margin-top:10%;
}
.expert-right h2{
  font-size: 2.5rem;
  font-weight:bold;
  color: #0e566d;
  text-indent:1rem;
  border-bottom:1px dashed #8d8d8d;
  line-height:120%;
}
.expert-right h2 span{
  font-size: 1.3rem;
  color: #000000;
  font-weight:normal;
}
.expert-right h4{
  font-size: 1.3rem;
  color: #080103;
  text-indent:1rem;
  line-height:150%;
  font-weight:normal;
  margin-top:2%;
}
.expert-right .desc{
  overflow: hidden;
  margin-top:3%;
}
.desc .cir{
  display: inline-block;
  width:15%;
  vertical-align: middle;
  position: relative;
}
.desc .cir span{
  display: block;
  position: absolute;
  top:0;
  width:100%;
  text-align: center;
  font-size: 1.2rem;
  color: #333333;
  line-height:260%;
}
.desc p{
  width:75%;
  display: inline-block;
  vertical-align: middle;
  font-size: 1.2rem;
  color: #333333;
  line-height:150%;
  padding-left:3%;
}
.desc>span{
  display: inline-block;
  font-size: 1.2rem;
  color: #000;
  line-height:350%;
  background: #bae9f8;
  padding:0 3%;
  border-radius: 10px;
}
.expert-right .btn{
  width:42%;
  background: #1b7a7d;
  color: #ffffff;
  position:absolute;
  left:50%;
  bottom:23%;
}

.expert .swiper-pagination-bullet{
  opacity:1;
  background: transparent;
  border:1px solid #0e566d;
}
.expert .swiper-pagination-bullet-active{
  background: #0e566d;
  border:1px solid #0e566d;
}

/*main8*/
#main8 ul{
  margin:8% 0 5%;
}
#main8 ul li{
  float: left;
  margin-bottom:3%;
  padding:2% 0;
}
#main8 ul li a{
  display: block;
  color: #ffffff;
  line-height:150%;
  text-align:  center;
  font-size: 1.3rem;
}
#main8 ul li:first-child,#main8 ul li:nth-child(3),
#main8 ul li:nth-child(4),#main8 ul li:last-child{
  width:32%;
}
#main8 ul li:nth-child(2),#main8 ul li:nth-child(5){
  width:35%;
}
#main8 ul li:first-child{
  background: #ffa2a2;
}
#main8 ul li:nth-child(2){
  background: #ffcc95;
}
#main8 ul li:nth-child(3){
  background: #fd9cbf;
  padding:5.2% 0;
}
#main8 ul li:nth-child(4){
  background: #d7acff;
}
#main8 ul li:nth-child(5){
  background: #8dafee;
}
#main8 ul li:last-child{
  background: #ffac8b;
}













/*媒体查询
@media screen and (min-width: 720px) {
  html, body {
    font-size: 10px;
  }
}

@media only screen and (max-width: 720px), only screen and (max-device-width: 720px) {
  html, body {
    font-size: 10px;
  }
}

@media only screen and (max-width: 640px), only screen and (max-device-width: 640px) {
  html, body {
    font-size: 8.88888888888889px;
  }
}

@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {
  html, body {
    font-size: 8.333333333333334px;
  }
}

@media only screen and (max-width: 540px), only screen and (max-device-width: 540px) {
  html, body {
    font-size: 7.5px;
  }
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
  html, body {
    font-size: 6.666666666666666px;
  }
}

@media only screen and (max-width: 414px), only screen and (max-device-width: 414px) {
  html, body {
    font-size: 5.75px;
  }
}

@media only screen and (max-width: 400px), only screen and (max-device-width: 400px) {
  html, body {
    font-size: 5.555555555555555px;
  }
}

@media only screen and (max-width: 375px), only screen and (max-device-width: 375px) {
  html, body {
    font-size: 5.208333333333334px;
  }
}

@media only screen and (max-width: 360px), only screen and (max-device-width: 360px) {
  html, body {
    font-size: 5px;
  }
}

@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) {
  html, body {
    font-size: 4.444444444444445px;
  }
}
*/