﻿html{font-family:'微软雅黑';-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
*{margin:0;padding:0;border:0;}
body{background:#fff;overflow:hidden;font-weight:normal;}
a {text-decoration: none;}
img {border:none;display: block;}
ul {list-style: none;margin: 0;padding: 0;}
#dowebok{width: 640px;height: 100%; margin: 0 auto;}
#page1{background:url(../images/bg1.jpg) no-repeat; width: 100%;height: 100%;background-position: top center;background-size: cover;overflow: hidden;position: relative;}
#page2{background:url(../images/bg2.jpg) no-repeat; width: 100%;height: 100%;background-position: top center;background-size: cover;overflow: hidden;position: relative;}
#page3{background:url(../images/bg3.jpg) no-repeat; width: 100%;height: 100%;background-position: top center;background-size: cover;overflow: hidden;position: relative;}
#page4{background:url(../images/bg4.jpg) no-repeat; width: 100%;height: 100%;background-position: top center;background-size: cover;overflow: hidden;position: relative;}
#page5{background:url(../images/bg5.jpg) no-repeat; width: 100%;height: 100%;background-position: top center;background-size: cover;overflow: hidden;position: relative;}
#page6{background:url(../images/bg6.jpg) no-repeat; width: 100%;height: 100%;background-position: top center;background-size: cover;overflow: hidden;position: relative;}
#page7{background:url(../images/bg7.jpg) no-repeat; width: 100%;height: 100%;background-position: top center;background-size: cover;overflow: hidden;position: relative;}
#page8{background:url(../images/bg8.jpg) no-repeat; width: 100%;height: 100%;background-position: top center;background-size: cover;overflow: hidden;position: relative;}
#page9{background:url(../images/bg9.jpg) no-repeat; width: 100%;height: 100%;background-position: top center;background-size: cover;overflow: hidden;position: relative;}
#page10{background:url(../images/bg10.jpg) no-repeat; width: 100%;height: 100%;background-position: top center;background-size: cover;overflow: hidden;position: relative;}
.logo{width: 23.59%;position: absolute;left: 4.375%;top:2.77%;z-index: 100;}
/*page1*/
.pg1_img1{width:100%;position:absolute;left:0%;top:0%;opacity: 0;}
.scal{animation:scal 1.5s linear 0.8s 1 ;-webkit-animation:scal 1.5s linear 0.8s 1 ;}
.scal2{animation:scal 1.5s linear 0.4s 1 ;-webkit-animation:scal 1.5s linear 0.4s 1 ;}
@-webkit-keyframes scal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes scal{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
/*page2*/
.pg2_img1{width:100%;position:absolute;left:0%;top:0%; opacity: 0;}
.pg2_img2{width:100%;position:absolute;left:0%;top:0%; opacity: 0;}
.pg2_img3{width:100%;position:absolute;left:0%;top:0%; display: none;}
/*page3*/
.pg3_img1{width:100%;position:absolute;left:0%;bottom:0%; opacity: 0;}
/*page4*/
.pg4_img1{width:76.25%;position:absolute;left:0%;top:15.5%; opacity: 0;}
.pg4_img2{width:49.22%;position:absolute;left:25.39%;top:25.20%; display: none;}
.pg4_img3{width:61.56%;position:absolute;left:19.22%;top:37.00%; display: none;}
/*page5*/
.pg5_img1{width:100%;position: absolute;left: 0;top: 26.38%;opacity: 0;}
.pg5_img2{width:35%;position: absolute;left: 14.06%;top:32%;display: none;}
.pg5_img3{width:77.34%;position: absolute;left: 14.06%;top: 56%;display: none;}
/*page6*/
.pg6_img1{width:61.88%;position: absolute;left: 19.06%;top: 20.93%;display: none;}
.pg6_img2{width:30.94%;position: absolute;left: 34.53%;top: 33.43%;display: none;}
.pg6_img3{width:77.66%;position: absolute;left: 11.17%;top: 46.13%;display: none;}
.pg6_img4{width:100%;position: absolute;left: 0;top: 16%;opacity: 0;}
/*page7*/
.pg7_img1{width:100%;position:absolute;left:0;bottom:0;opacity: 0;}
/*page8*/
.pg8_img1{width:100%;position:absolute;left:0%;top:0%;opacity: 0;}
/*page9*/
.pg9_img1{width:68.59%;position: absolute;right: 0;top: 0;opacity: 0;}
.pg9_img2{width:43.76%;position: absolute;left: 28.12%;top: 13%;display:none;}
.pg9_img3{width:70.46%;position: absolute;left: 14.77%;top: 22.88%;display:none;}
/*page10*/
.pg10_img1{width:46.10%;position:absolute;left:26.95%;top:15.49%;opacity: 0;}
.pg10_img2{width:100.0%;position:absolute;left:0%;top:42%;text-align: center;opacity: 0;}
.pg10_img3{width:54.54%;position:absolute;left:22.73%;top:60.83%;opacity: 0;}
.pg10_img4{width:54.54%;position:absolute;left:22.73%;top:60.83%;opacity: 0;}
/*form*/
label{color: #fff;font-size: 20px;font-family: '微软雅黑';}
input[type="text"]{height: 30px;border: 1px solid #fff;font-size: 20px;line-height: 30px;color: #000000;background: rgba(255,255,255);width: 35%;padding-left: 15px;outline: none;-webkit-appearance : none ;/*解决iphone safari上的圆角问题*/}
#dosubmit{border:none;background: #030dab;height: 35px;line-height: 35px;color: #ffffff;width: 20%;outline: none;font-size: 20px;box-sizing: border-box;-webkit-appearance : none ;/*解决iphone safari上的圆角问题*/border-radius: 5px;}
/* 播放器 */
.mscBtn{
  background:url(../images/icon_music.png) no-repeat; background-size:100% 100%;-webkit-background-size:100% 100%;
  display:block;height: 52px;width: 52px;z-index: 99; position:absolute;bottom: 10px;right:10px;
  animation: 9.5s linear 0s normal none infinite rotate;
  -webkit-animation:9.5s linear 0s normal none infinite rotate;
}
.mscBtn_stop{
  background:url(../images/icon_music_stop.png) no-repeat; background-size:100% 100%;-webkit-background-size:100% 100%;
  display:block;height: 52px;width: 52px;z-index: 99; position:absolute;bottom: 10px;right:10px;
}
@-webkit-keyframes rotate{
  from{-webkit-transform:rotate(0deg)}
  to{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes rotate{
  from{-moz-transform:rotate(0deg)}
  to{-moz-transform:rotate(360deg)}
}
@-ms-keyframes rotate{
  from{-ms-transform:rotate(0deg)}
  to{-ms-transform:rotate(360deg)}
}
@-o-keyframes rotate{
  from{-o-transform:rotate(0deg)}
  to{-o-transform:rotate(360deg)}
}


