@charset "UTF-8";
body {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 14px;
}

body div.wrap {
  width: 100%;
  height: auto !important;
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

div.bg {
  width: 100%;
}

div.bg img {
  width: 100%;
}

div.uplayer {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  height: 100%;
}

div.uplayer div.cloudlayer {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  z-index: 100;
}

div.uplayer div.cloudlayer div.overlayer1 {
  left: 67.7%;
  top: 0%;
  width: 32%;
  max-width: 320px;
  position: absolute;
  height: 17.53278%;
  animation: fadeIn 1s 0s, opacity0 0s 0s;
  -webkit-animation: fadeIn 1s 0s, opacity0 0s 0s;
  overflow: hidden;
}

div.uplayer div.cloudlayer div.overlayer1 img.cloud1 {
  width: 181.875%;
  height: auto;
  position: absolute;
  right: 0%;
  animation: cloudtrans 80s linear 1s infinite;
  -webkit-animation: cloudtrans 80s linear 1s infinite;
}

div.uplayer div.cloudlayer div.overlayer2 {
  left: 76%;
  top: 23.77036%;
  width: 26%;
  max-width: 260px;
  position: absolute;
  height: 17.13945%;
  animation: fadeIn 1s 0s, opacity0 0s 0s;
  -webkit-animation: fadeIn 1s 0s, opacity0 0s 0s;
  overflow: hidden;
}

div.uplayer div.cloudlayer div.overlayer2 img.cloud2 {
  width: 100%;
  height: auto;
  position: absolute;
  right: 0%;
  animation: cloudtrans 80s linear 1s infinite;
  -webkit-animation: cloudtrans 80s linear 1s infinite;
}

div.uplayer div.cloudlayer div.overlayer3 {
  left: 69.2%;
  top: 45.7211%;
  width: 30.4%;
  max-width: 304px;
  position: absolute;
  height: 10.04768%;
  animation: fadeIn 1s 0s, opacity0 0s 0s;
  -webkit-animation: fadeIn 1s 0s, opacity0 0s 0s;
  overflow: hidden;
}

div.uplayer div.cloudlayer div.overlayer3 img.cloud3 {
  width: 100%;
  height: auto;
  position: absolute;
  right: 0%;
  animation: cloudtrans 80s linear 1s infinite;
  -webkit-animation: cloudtrans 80s linear 1s infinite;
}

div.uplayer div.cloudlayer div.overlayer4 {
  left: 38.5%;
  top: 69.81327%;
  width: 63.7%;
  max-width: 637px;
  position: absolute;
  height: 13.67104%;
  animation: fadeIn 1s 0s, opacity0 0s 0s;
  -webkit-animation: fadeIn 1s 0s, opacity0 0s 0s;
  overflow: hidden;
}

div.uplayer div.cloudlayer div.overlayer4 img.cloud4 {
  width: 100%;
  height: auto;
  position: absolute;
  right: 0%;
  animation: cloudtrans 80s linear 1s infinite;
  -webkit-animation: cloudtrans 80s linear 1s infinite;
}

div.uplayer div.cloudlayer div.overlayer5 {
  left: 74.1%;
  top: 83.47636%;
  width: 26.2%;
  max-width: 262px;
  position: absolute;
  height: 11.08462%;
  animation: fadeIn 1s 0s, opacity0 0s 0s;
  -webkit-animation: fadeIn 1s 0s, opacity0 0s 0s;
  overflow: hidden;
}

div.uplayer div.cloudlayer div.overlayer5 img.cloud5 {
  width: 100%;
  height: auto;
  position: absolute;
  right: -6%;
  animation: cloudtrans 80s linear 1s infinite;
  -webkit-animation: cloudtrans 80s linear 1s infinite;
}

div.uplayer div.uppic {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  z-index: 200;
}

div.uplayer div.uppic img.pic22 {
  left: 57.9%;
  top: 87.92213%;
  width: 32.1%;
  max-width: 321px;
  position: absolute;
}

div.uplayer div.uppic .pic23ani {
  animation: fadeIn 2.4s 0s, opacity0 0s 0s;
  -webkit-animation: fadeIn 2.4s 0s, opacity0 0s 0s;
}

div.uplayer div.uppic img.pic23 {
  left: 41.3%;
  top: 86.80175%;
  width: 18.2%;
  max-width: 182px;
  position: absolute;
}

div.uplayer div.uppic .pic22ani {
  animation: zoomIn 2.4s 0s, opacity0 0s 0s;
  -webkit-animation: zoomIn 2.4s 0s, opacity0 0s 0s;
}

div.uplayer div.uppic img.pic21 {
  left: 3.5%;
  top: 76.00318%;
  width: 86.4%;
  max-width: 864px;
  position: absolute;
}

div.uplayer div.uppic .pic21ani {
  animation: zoomIn 2.4s 0s, opacity0 0s 0s;
  -webkit-animation: zoomIn 2.4s 0s, opacity0 0s 0s;
}

div.uplayer div.uppic img.pic20 {
  left: 2.9%;
  top: 69.45173%;
  width: 97%;
  max-width: 970px;
  position: absolute;
}

div.uplayer div.uppic .pic20ani {
  animation: fadeIn 1s 0s, opacity0 0s 0s;
  -webkit-animation: fadeIn 1s 0s, opacity0 0s 0s;
}

div.uplayer div.uppic img.pic19 {
  left: 6.7%;
  top: 73.22209%;
  width: 84.1%;
  max-width: 841px;
  position: absolute;
}

div.uplayer div.uppic .pic19ani {
  animation: zoomIn 1s 0s, opacity0 0s 0s;
  -webkit-animation: zoomIn 1s 0s, opacity0 0s 0s;
}

div.uplayer div.uppic img.pic18 {
  left: 53.8%;
  top: 70.39333%;
  width: 41.1%;
  max-width: 411px;
  position: absolute;
}

div.uplayer div.uppic .pic18ani {
  animation: rotateInDownLeft 1.8s 0s, opacity0 0s 0s;
  -webkit-animation: rotateInDownLeft 1.8s 0s, opacity0 0s 0s;
}

div.uplayer div.uppic img.pic17 {
  left: 0%;
  top: 66.11442%;
  width: 65.7%;
  max-width: 657px;
  position: absolute;
}

div.uplayer div.uppic .pic17ani {
  animation: zoomIn 1.8s 0s, opacity0 0s 0s;
  -webkit-animation: zoomIn 1.8s 0s, opacity0 0s 0s;
}

div.uplayer div.uppic img.ani162 {
  left: 22.9%;
  top: 63.09495%;
  width: 7.5%;
  max-width: 75px;
  position: absolute;
  animation: aniflag 3.8s linear 0s infinite;
  -webkit-animation: aniflag 3.8s linear 0s infinite;
}

div.uplayer div.uppic img.ani161 {
  left: 21.4%;
  top: 63.09893%;
  width: 11.2%;
  max-width: 112px;
  position: absolute;
  animation: aniflag 3.8s linear 1.9s infinite reverse;
  -webkit-animation: aniflag 3.8s linear 1.9s infinite reverse;
}

div.uplayer div.uppic img.pic15 {
  left: 37.1%;
  top: 53.53596%;
  width: 60%;
  max-width: 600px;
  position: absolute;
}

div.uplayer div.uppic .pic15ani {
  animation: zoomIn 1.8s 0s, opacity0 0s 0s;
  -webkit-animation: zoomIn 1.8s 0s, opacity0 0s 0s;
}

div.uplayer div.uppic img.pic14 {
  left: 38.8%;
  top: 45.89591%;
  width: 45.3%;
  max-width: 453px;
  position: absolute;
}

div.uplayer div.uppic .pic14ani {
  animation: zoomIn 1.2s 0s, opacity0 0s 0s;
  -webkit-animation: zoomIn 1.2s 0s, opacity0 0s 0s;
}

div.uplayer div.uppic img.pic13 {
  left: 0.1%;
  top: 31.45809%;
  width: 42.3%;
  max-width: 423px;
  position: absolute;
}

div.uplayer div.uppic .pic13ani {
  animation: myShakeX 3s 1s infinite, fadeIn 1s 0s;
  -webkit-animation: myShakeX 3s 1s infinite, fadeIn 1s 0s;
}

div.uplayer div.uppic img.pic12 {
  left: 69%;
  top: 24.84704%;
  width: 59.2%;
  max-width: 592px;
  position: absolute;
}

div.uplayer div.uppic .pic12ani {
  animation: anifire 4s linear 0.4s forwards, opacity0 0.4s 0s;
  -webkit-animation: anifire 4s linear 0.4s forwards, opacity0 0.4s 0s;
}

div.uplayer div.uppic img.pic11 {
  left: 0%;
  top: 24.35042%;
  width: 90.6%;
  max-width: 906px;
  position: absolute;
}

div.uplayer div.uppic .pic11ani {
  animation: fadeInTopLeft 2.6s 0s, opacity0 0s 0s;
  -webkit-animation: fadeInTopLeft 2.6s 0s, opacity0 0s 0s;
}

div.uplayer div.uppic img.pic10 {
  left: 31%;
  top: 17.19507%;
  width: 55.3%;
  max-width: 553px;
  position: absolute;
}

div.uplayer div.uppic .pic10ani {
  animation: anibike 4s linear 0.4s forwards, opacity0 0.4s 0s;
  -webkit-animation: anibike 4s linear 0.4s forwards, opacity0 0.4s 0s;
}

div.uplayer div.uppic img.pic9 {
  left: 0%;
  top: 18.52602%;
  width: 79.9%;
  max-width: 799px;
  position: absolute;
}

div.uplayer div.uppic .pic9ani {
  animation: fadeIn 1s 0s, opacity0 0s 0s;
  -webkit-animation: fadeIn 1s 0s, opacity0 0s 0s;
}

div.uplayer div.uppic img.pic8 {
  left: 4.5%;
  top: 17.52483%;
  width: 64.7%;
  max-width: 647px;
  position: absolute;
}

div.uplayer div.uppic .pic8ani {
  animation: zoomIn 1.8s 0s, opacity0 0s 0s;
  -webkit-animation: zoomIn 1.8s 0s, opacity0 0s 0s;
}

div.uplayer div.uppic img.pic7 {
  left: 0%;
  top: 9.24513%;
  width: 100%;
  max-width: 1000px;
  position: absolute;
}

div.uplayer div.uppic .pic7ani {
  animation: fadeInLeft 1s 0s, opacity0 0s 0s;
  -webkit-animation: fadeInLeft 1s 0s, opacity0 0s 0s;
}

div.uplayer div.uppic img.pic6 {
  left: 9.6%;
  top: 10.85419%;
  width: 56.3%;
  max-width: 563px;
  position: absolute;
}

div.uplayer div.uppic .pic6ani {
  animation: fadeInLeft 1s 0s, opacity0 0s 0s;
  -webkit-animation: fadeInLeft 1s 0s, opacity0 0s 0s;
}

div.uplayer div.uppic img.pic5 {
  left: 0%;
  top: 9.12594%;
  width: 48.2%;
  max-width: 482px;
  position: absolute;
}

div.uplayer div.uppic .pic5ani {
  animation: fadeInLeft 1s 0s, opacity0 0s 0s;
  -webkit-animation: fadeInLeft 1s 0s, opacity0 0s 0s;
}

div.uplayer div.uppic img.pic4 {
  left: 0%;
  top: 0.68733%;
  width: 73.6%;
  max-width: 736px;
  position: absolute;
}

div.uplayer div.uppic .pic4ani {
  animation: fadeInUp 2.2s 0s, opacity0 0s 0s;
  -webkit-animation: fadeInUp 2.2s 0s, opacity0 0s 0s;
}

div.uplayer div.uppic img.ani32 {
  left: 85.8%;
  top: 5.35956%;
  width: 6.5%;
  max-width: 65px;
  position: absolute;
}

div.uplayer div.uppic .ani32ani {
  animation: aniflag 2.8s linear 1s infinite, fadeIn 1s 0s;
  -webkit-animation: aniflag 2.8s linear 1s infinite, fadeIn 1s 0s;
}

div.uplayer div.uppic img.ani31 {
  left: 85.9%;
  top: 5.30791%;
  width: 6.4%;
  max-width: 64px;
  position: absolute;
}

div.uplayer div.uppic .ani31ani {
  animation: aniflag 2.8s linear 2.3s infinite reverse, fadeIn 2.4s 0s;
  -webkit-animation: aniflag 2.8s linear 2.3s infinite reverse,
 fadeIn 2.4s 0s;
}

div.uplayer div.uppic img.pic3 {
  left: 41.4%;
  top: 4.15177%;
  width: 47%;
  max-width: 470px;
  position: absolute;
}

div.uplayer div.uppic .pic3ani {
  animation: fadeIn 1s 0s, opacity0 0s 0s;
  -webkit-animation: fadeIn 1s 0s, opacity0 0s 0s;
}

div.uplayer div.uppic img.ani2 {
  left: 6.8%;
  top: 0.34962%;
  width: 16.8%;
  max-width: 168px;
  position: absolute;
}

div.uplayer div.uppic .ani2ani {
  animation: anismile 3s linear 1s infinite, fadeIn 1s 0s;
  -webkit-animation: anismile 3s linear 1s infinite, fadeIn 1s 0s;
}

div.uplayer div.uppic img.pic2 {
  left: 0%;
  top: 0%;
  width: 36.5%;
  max-width: 365px;
  position: absolute;
}

div.uplayer div.uppic .pic2ani {
  animation: fadeIn 1s 0s, opacity0 0s 0s;
  -webkit-animation: fadeIn 1s 0s, opacity0 0s 0s;
}

div.uplayer div.uppic img.pic1 {
  left: 55.6%;
  top: 0.25427%;
  width: 39.5%;
  max-width: 395px;
  position: absolute;
}

div.uplayer div.uppic .pic1ani {
  animation: zoomIn 2.4s 0s, opacity0 0s 0s;
  -webkit-animation: zoomIn 2.4s 0s, opacity0 0s 0s;
}

div.uplayer div.magnifiers {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  z-index: 300;
}

div.uplayer div.magnifiers img.mgnfani {
  animation: mgnfzoom 1.4s linear 1s infinite, fadeIn 1s 0s;
  -webkit-animation: mgnfzoom 1.4s linear 1s infinite, fadeIn 1s 0s;
}

div.uplayer div.magnifiers img#mgnf1 {
  left: 58.9%;
  top: 6.13826%;
  width: 20%;
  max-width: 200px;
  position: absolute;
}

div.uplayer div.magnifiers img#mgnf2 {
  left: 25.5%;
  top: 12.80095%;
  width: 20%;
  max-width: 200px;
  position: absolute;
}

div.uplayer div.magnifiers img#mgnf3 {
  left: 45.6%;
  top: 19.66627%;
  width: 20%;
  max-width: 200px;
  position: absolute;
}

div.uplayer div.magnifiers img#mgnf4 {
  left: 47.9%;
  top: 28.99881%;
  width: 20%;
  max-width: 200px;
  position: absolute;
}

div.uplayer div.magnifiers img#mgnf5 {
  left: 38.8%;
  top: 33.82598%;
  width: 20%;
  max-width: 200px;
  position: absolute;
}

div.uplayer div.magnifiers img#mgnf6 {
  left: 50.9%;
  top: 44.19547%;
  width: 20%;
  max-width: 200px;
  position: absolute;
}

div.uplayer div.magnifiers img#mgnf7 {
  left: 53.2%;
  top: 46.84942%;
  width: 20%;
  max-width: 200px;
  position: absolute;
}

div.uplayer div.magnifiers img#mgnf8 {
  left: 51.5%;
  top: 55.12912%;
  width: 20%;
  max-width: 200px;
  position: absolute;
}

div.uplayer div.magnifiers img#mgnf9 {
  left: 53.2%;
  top: 63.1625%;
  width: 20%;
  max-width: 200px;
  position: absolute;
}

div.uplayer div.magnifiers img#mgnf10 {
  left: 47.9%;
  top: 72.15733%;
  width: 20%;
  max-width: 200px;
  position: absolute;
}

div.uplayer div.magnifiers img#mgnf11 {
  left: 35.2%;
  top: 80.96941%;
  width: 20%;
  max-width: 200px;
  position: absolute;
}

div#popupwindow {
  position: fixed;
  left: 0%;
  top: 0%;
  width: 100vw;
  height: 100vh;
  background-color: rgba(85, 47, 0, 0.541);
  display: none;
  z-index: 999;
}

div#popupwindow div#popupcard {
  width: 100%;
  height: 100%;
  padding: 12%;
  box-sizing: border-box;
  position: relative;
}

div#popupwindow div#popupcard img.card {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 80%;
  transform: translate(-50%, -50%);
  display: none;
}

div#popupwindow div.close {
  position: absolute;
  right: 2%;
  top: 1%;
}

/*开机动画样式*/
#mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
}

#mask > div {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: #836627;
  transition: 1s;
}

#mask .maskUp {
  right: 0px;
  width: 70%;
}

#mask .maskUp img.loading {
  position: absolute;
  left: 47%;
  top: 50%;
  width: 40%;
  opacity: 0.8;
  display: block;
  transform-origin: 50% 50%;
  animation: loadfzoom 1.4s linear 0s infinite;
  -webkit-animation: loadfzoom 1.4s linear 0s infinite;
}

#mask .maskDown {
  width: 30%;
  left: 0px;
}

#mask .maskLine {
  position: absolute;
  background-color: #ecb06b;
  height: 0%;
  width: 10px;
  top: 0;
  left: 30%;
  margin-left: -5px;
  transition: 1s linear;
}

#mask .loaderInfo {
  color: #ffffff;
  line-height: 2em;
  width: 100%;
  height: 2em;
  font-size: 1.5rem;
  display: block;
  position: absolute;
  transform: translate(6%, -50%) rotate(90deg);
  transform-origin: 50% 50%;
  top: 50%;
  text-align: center;
  overflow: hidden;
  background-color: transparent;
}