html,
body,
#container {
  width: 100%;
  height: 100%;
  font-size: 35px !important;
}

.halfX {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.halfXY {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes Rotate {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes Rotate {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@-webkit-keyframes fadeAndRotate {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50%) rotate(0deg);
    transform: translateX(-50%) rotate(0deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(-50%) rotate(360deg);
    transform: translateX(-50%) rotate(360deg);
  }
}
@keyframes fadeAndRotate {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50%) rotate(0deg);
    transform: translateX(-50%) rotate(0deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(-50%) rotate(360deg);
    transform: translateX(-50%) rotate(360deg);
  }
}
#container {
  position: relative;
}
#container li {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-background-size: cover!important;
  background-size: cover!important;
  background-position: center center!important;
  background-color: #D82056;
  overflow: hidden;
}
#container li .containerIn {
  width: 100%;
  height: 11.3125rem;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  overflow: hidden;
}
#container li .arrow {
  -webkit-animation: arrow-animate 1.2s ease 0s infinite alternate none;
  animation: arrow-animate 1.2s ease 0s infinite alternate none;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 5px solid rgba(255, 255, 255, 1);
  border-bottom: 5px solid rgba(255, 255, 255, 1);
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%) rotate(-135deg);
  transform: translateX(-50%) rotate(-135deg);
  bottom: 0px;
}
@-webkit-keyframes arrow-animate {
  0% {
    bottom: 0px;
    opacity: 0.7;
  }
  100% {
    bottom: 0.5rem;
    opacity: 0.2;
  }
}
@keyframes arrow-animate {
  0% {
    bottom: 0px;
    opacity: 0.7;
  }
  100% {
    bottom: 0.5rem;
    opacity: 0.2;
  }
}

#container li .text {
  -webkit-animation: fadein 3s ease 0s 1 normal forwards;
  animation: fadein 3s ease 0s 1 normal forwards;
  font-family:"Microsoft Yahei";
}

#container li .text .button{
  font-size: 0.47rem;
  display: block;
  width: 4.84375rem;
  height: 1.15625rem;
  text-align: center;
  line-height: 1.15625rem;
  border: 1px solid #fff;
  border-radius: 8px;
  position: absolute;
  left: 50%;
  margin-left: -2.5rem;
  margin-top: 0.5rem;
}
#container li .text1{
  position: absolute;
  bottom: 2.3rem;
  left: 1rem;
}
#container li .text .english{
  color: #b0b0b0;
  font-size: 0.8rem;
}
#container li .text .subtitle{
  color: #f32700;
  font-size: 0.7rem;
}
#container li .text .lSymbol{
  width: 0.8125rem;
  height: 0.71875rem;
}

#container li .text .rSymbol{
  width: 0.5rem;
  height: 0.453125rem;
}
#container li .text .subtitle strong{
  color: #fff;
  font-weight: bold;
}

#container li .text span{
  font-size: 1rem;
}

#container li .text .content{
  font-size: 0.5rem;
  letter-spacing: 0.05rem;
  line-height: 0.9rem;
}

#container li.page1 .en{
  text-align: center;
  font-size: 0.875rem;
  margin-top: 1.0rem;
}

#container li.page1{
  background: url(../images/p_1.jpg);
}

#container li.page1 .logo{
  width: 4.84rem;
  height: 3.493333rem;
  bottom: 3.2rem;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

#container li.page2{
  background: url(../images/p_2.jpg);
  position: relative;
}

#container li.page3{
  background: url(../images/p_3.jpg);
  position: relative;
}

#container li.page4{
  background: url(../images/p_4.jpg);
  position: relative;
}

#container li .text2{
  width: 6.4rem;
  position: absolute;
  bottom: 4rem;
  left: 50%;
  margin-left: -3.05rem;
  text-align: center;
}

#container li .text2 .content{
  margin-top: 0.3rem;
}

#container li .text2 .lSymbol{
  position: absolute;
  left: 0; 
}

#container li.page5{
  background: url(../images/p_5.jpg);
  position: relative;
}

#container li.page6{
  background: url(../images/p_6.jpg);
  position: relative;
}

#container li.page7{
  background: url(../images/p_7.jpg);
  position: relative;
}

#container li .text3{
  text-align: center;
  margin-top: 0.9rem;
}
#container li .text3 .code{
  position: relative;
  width: 4.6rem;
  height: 4.6rem;
  margin: 0.1rem auto 0.1rem;
  background: url(../images/code.jpg) no-repeat center center;
  background-size: contain;
  /*margin: 3.6rem 0 0.2rem;*/
}
#container li .text3 .code img{
  position: absolute;
  left: -2.3rem;
  top: -2.3rem;
  width: 4.6rem;
  height: 4.6rem;
  display: block;
  border: none;
  opacity: 0;
}
#container li .text3 p{
  font-size: 0.46rem;
  line-height: 0.72rem;
}
#container li .text3 p.add{
  font-size: 0.34rem;
}
#container li .text3 .button{
  background: #f32700;
  border: none;
}
#container li.page8{
  background: url(../images/p_8.jpg);
  position: relative;
}
#container li.page8 .logo{
  width: 4.0rem;
  /*height: 3.493333rem;*/
}


.musicBtn{
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 56px;
  height: 50px;
  background: url(../images/1.gif);
  z-index: 100;
  font-size: 12px !important;
}
.musicBtn.current{
  background-position: 0 -50px;
}


	/* zi-diaTel */
	.zi-diaTel {display:none;position:fixed;z-index:50;top:0;left:0;width:100%;height:100%;}
	.zi-diaTel>.bg {position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);opacity:0;filter:alpha(opacity=0);}
	.zi-diaTel .content {position:absolute;z-index:2;top:50%;left:50%;background:rgba(255,255,255,0.9);border-radius:0.3rem;width:80%; max-width:7.2rem; overflow:hidden;margin-top: -0.9rem;margin-left:-3.6rem;opacity:0;filter:alpha(opacity=0);-moz-transform:translateY(-20px);-webkit-transform:translateY(-20px);transform:translateY(-20px);}
	.zi-diaTel .content .info {padding:0.6rem 0;text-align:center;border-bottom:1px solid #aaa;}
	.zi-diaTel .content .info p.a {color:#b90000; font-size:0.4rem !important}
	.zi-diaTel .content .info p.b {color:#333;font-size:0.6rem !important;line-height:0.9rem;padding-top:0.16rem;}
	.zi-diaTel .content .btns {position:relative;text-align:center;}
	.zi-diaTel .content .btns:before {position:absolute;left:50%;height:100%;width:1px;top:0;content:"";display:block;background:#aaa;}
	.zi-diaTel .content .btns a {display:block;width:50%;float:left;color:#3e6af8;line-height:1.0rem;font-size:0.4rem!important;font-weight:bold;}
	.zi-diaTel .content .btns a:hover {background:#eee;}
	.zi-diaTel.active>.bg {opacity:1;filter:alpha(opacity=100);}
	.zi-diaTel.active .content {opacity:1;filter:alpha(opacity=100);-moz-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0);}