@charset "utf-8";
    /**防止苹果手机放大字号**/
    html {font-family: sans-serif;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
    body,h1,h2,h3,p,ul,ol,form,fieldset,figure,img,textarea,input{margin: 0;padding: 0;display: block;font-family:"Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", SimHei, "\5B8B\4F53", simsun, sans-serif;box-sizing: border-box;}
    h1,h2,h3{font-weight: normal;}
    div,figure,li,img{box-sizing:border-box;}/**让边框不占用宽度**/
    body{font-family:"Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", SimHei, "\5B8B\4F53", simsun, sans-serif;color: #333;font-size: 20px;overflow: hidden;}
    ul,ol {list-style: outside none none;font-size: 20px;}
    a{text-decoration: none;background-size: 100%  100%;}
    a:hover{text-decoration: none;}
    /**页面样式**/
    .main1{position: absolute;width: 100%;height: 100%;background-image: url(../images/bg1.jpg);background-size: 100% 100%;overflow: hidden;display: none;}
    .img1{display: block;width: 150px;margin-top: 40px;margin-right: 50px;float: right;}
    .img2{position: absolute;width: 260px;top:520px;left: 190px; }
    .mb1,.mb2{position: absolute;width: 100%;height: 100%;background-color: rgba(0,0,0,0.7);left: 0;top: 0;z-index: 8888;display: none;}
    .img3,.img7{position: absolute;width: 540px;top:100px;left: 50px;display: none;}
    .img4,.img8{position: absolute;width: 540px;top:100px;left: 50px;display: none;}
    .diy1,.diy2{position: absolute;width: 540px;height: 100px;left: 50px;top: 150px;display: none;}
    .img5{position: absolute;width: 120px;top:800px;left: 160px;display: none;}
    .img6{position: absolute;width: 120px;top:800px;right: 160px;display: none;}
    .img9{position: absolute;width: 160px;top:820px;left: 240px;display: none;}
    .main2{position: absolute;width: 100%;height: 100%;background-image: url(../images/bg2.jpg);background-size: 100% 100%;overflow: hidden;display: none;}
    .diy3{position: absolute;width: 460px;height: 600px;left: 90px;top: 240px;background-color: #fff;overflow: hidden;padding: 5px;line-height: 600px;}
    .diy3 img{max-width: 100%;vertical-align: middle;display: inline-block;}
    .img10{position: absolute;width: 640px;left: 0;top: 170px;}
    .img11{position: absolute;width: 240px;left: 200px;bottom: 60px;}
    .img12{position: absolute;width: 185px;left: 90px;bottom: 60px;display: none;}
    .img13{position: absolute;width: 185px;right: 90px;bottom: 60px;display: none;}
    .main3{position: absolute;width: 100%;height: 100%;background-image: url(../images/bg3.jpg);background-size: 100% 100%;overflow: hidden;display: none;}
    .diy4{overflow: hidden;position: absolute;width: 600px;left: 20px;top: 248px;color: #fff;}
    .diy4 p{font-size: 24px;text-align: center;margin-bottom: 10px;}
    .diy5{width: 50%;float: left;height: 50px;line-height: 50px;padding-left: 20px;margin-bottom: 10px;}
    .diy5 input{float: right;width: 60%;height: 50px;border: none;border-radius: 10px;outline: none;font-size: 24px;padding: 0 6px;}
    .diy5 select{float: right;width: 60%;height: 50px;border: none;border-radius: 10px;outline: none;font-size: 24px;padding: 0 6px;}
    .diy6{clear: both;height: 50px;line-height: 50px;padding-left: 20px;margin-bottom: 10px;}
    .diy6 input{float: right;width: 80%;height: 50px;border: none;border-radius: 10px;outline: none;font-size: 24px;padding: 0 6px;}
    .diy7{color: #ffe92c;padding: 0 10px;width: 50%;float: left;}
    .img14{width: 200px;margin: 20px auto;clear: both;}
    .diy8{overflow: hidden;position: absolute;width: 600px;left: 20px;top: 280px;color: #fff;display: none;text-align: center;}
    .diy8 h1{font-size: 46px;text-align: center;color: #ffe92c;font-weight: bold;line-height: 80px;margin-bottom: 60px;}
    .diy8 h1 span{display: block;color: #fff;}
    .img15{width: 180px;display: inline-block;margin-right: 60px;}
    .img16{width: 180px;display: inline-block;}
    .mb3{position: absolute;width: 100%;height: 100%;background-color: rgba(0,0,0,0.7);background-image: url(../images/share.png);background-size: 100% 100%;overflow: hidden;display: none;}
    .main4{position: absolute;width: 100%;height: 100%;background-image: url(../images/bg3.jpg);background-size: 100% 100%;overflow: hidden;text-align: center;}
    .diy9{overflow: hidden;position: absolute;width: 500px;left: 70px;top: 280px;color: #fff;}
    .diy9 h1{color: #ffe92c;font-size: 40px;margin-bottom: 20px;}
    .diy9 p{font-size: 24px; color: #fff;line-height: 40px;margin-bottom: 60px;text-align: center;}
    .main5{position: relative;height: 100%;background-image: url(../images/bg4.jpg);background-size: 100% 100%;overflow: hidden;}
    .main5 p{position: absolute;width: 580px;top: 320px;left: 40px;text-align: center;font-size: 24px;color: #fff;line-height: 40px;}
    .main5 p span{color: #ffe92c;font-size: 34px;margin-top: 10px;display: inline-block;}
    .main5 div{position: absolute;width: 500px;top: 320px;left: 70px;font-size: 22px;color: #fff;line-height: 34px;}
    .main5 div img{display: block;width: 30%;margin: 20px auto;}
    .container{width: 100%; height: 100%; position: absolute; left: 0; top: 0%; display: none;}
    .maina{position: relative;height: 100%;background-size: 100% 100%;overflow: hidden;}
    .bga{position: absolute;width: 100%;height: 100%;left: 0;top: 0;}
    .xia1{position: absolute;width: 60px;left: 290px;bottom: 80px;display: none;animation-iteration-count:infinite;}
    .xia2{position: fixed;width: 60px;left: 290px;bottom: 140px;animation-iteration-count:infinite;}
    .mainb{position: relative;height: 100%;background-image: url(../images/bgb.jpg);background-size: 100% 100%;overflow: auto;display: none;}
    .foot{position: fixed;width: 100%;left: 0;bottom: 0;}
    .btn12{position: fixed;width: 200px;left: 220px;bottom: 150px;display: none;}
    .xia3{position: absolute;width: 60px;left: 290px;bottom: 80px;animation-iteration-count:infinite;}
 /**追加加载动画样式**/
 .loadbefore{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 888888;
 }
 .loadbefore p{font-size: 20px;text-align: center;}
.spinner {
  margin: 200px auto 50px auto;
  width: 50px;
  height: 50px;
  position: relative;
}
 
.container1 > div, .container2 > div, .container3 > div {
  width: 12px;
  height: 12px;
  background-color: #e74d46;
 
  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
 
.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
 
.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}
 
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
 
.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
 
.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
 
.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
 
.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
 
.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
 
.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
 
.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
 
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
 
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
/**新增旋转效果**/
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.Rotation{
-webkit-transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}