*{margin: 0;padding: 0;-webkit-tap-highlight-color: rgba(0,0,0,0);  -webkit-user-select:none;
    user-select:none; 
-webkit-tap-highlight-color:transparent;font-family: 'Source Han Sans CN';}
ul,ol,li{list-style: none;}
/*ONE*/
body {
  background: #fff;
}
* {
    margin: 0;
    padding: 0;
}
html, body {
    height: auto;
}
body {
	height: 100vh;
	overflow: hidden;
	background-size: 100% 100%;
	position: relative;
}
.m1 {
    background: url(../img/on.png) no-repeat center;
    background-size: contain;
}
.m2 {
    background: url(../img/off.png) no-repeat center;
    background-size: contain;
}
.music-box { 
    position: fixed; 
    top: 0.2rem;
    right: 0.2rem;
    width: 0.61rem;
    height: 0.61rem;
    z-index: 11;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    animation: miuse 1.75s linear infinite;
}
@keyframes miuse{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}
@keyframes title2{
	0%{
		transform: scale(1);
	}
	50%{
		transform: scale(1.05);
	}
	100%{
		transform: scale(1);
	}
}

.content{width:100%;height:100%;position: absolute;top:0;text-align: center;overflow: auto;overflow-x: hidden;-webkit-overflow-scrolling: touch;}
.content .ul{overflow:hidden;width: 7.5rem;height:43.38rem;position: absolute;top: 0;left: 0;background: url(../img/1.jpg) no-repeat center;background-size:contain ;}

.content .yyzl{top:6.7rem;position:absolute;left:0;right:0;width: 6.4rem;height: 7.5rem;background: url(../img/img2.png) no-repeat center;background-size:contain ;margin: 0 auto;}
.content .div{position:relative;width: 5.3rem;height: 0.6rem;margin: 0 auto;overflow: hidden;}
.content .div2{position:relative;width: 5.3rem;height: 0.6rem;margin: 0 auto;overflow: hidden;}
.content select{text-align:center;text-align-last: center;-webkit-appearance: none;-moz-appearance: none;appearance: none;color:#666;font-size:0.24rem;width: 5.3rem;height: 0.6rem;box-sizing: border-box;outline: none;border-radius: 25px;}
.content input{text-align:center;left:0;top:0;position:absolute;-webkit-appearance: none;-moz-appearance: none;appearance: none;color:#666;font-size:0.24rem;width: 5.3rem;height: 0.6rem;box-sizing: border-box;padding: 0 0.15rem;outline: none;border-radius: 25px;}
.content .div2 span{background:#235fa2 ;color:#fff;width: 1.72rem;height: 0.6rem;position: absolute;top: 0;right: 0;font-size: 0.24rem;display: flex;justify-content: center;align-items: center;border-radius: 0px 25px 25px 0;}
.content .shengsq{display: flex;justify-content: space-between;}
.content .shengsq .sheng{width: 2.6rem;padding-right: 0.4rem;}
.content .shengsq .shi{width: 2.6rem;padding-right: 0.3rem;}


.content .img1{background: url(../img/img3.png) no-repeat center;background-size:100% 100% ;width:5.17rem;height: 0.49rem;display: block;margin: 0 auto;margin-top: 0.3rem;}
.content .img1 b{background: url(../img/img4.png) no-repeat center;background-size:100% 100% ;width:5.17rem;height: 0.49rem;display: none;}
.content .img1.on b{display: block;}
.content .click1{position:absolute;left:0;right:0;bottom:0.5rem;width: 2rem;height: 0.6rem;margin: 0 auto;background: url(../img/img1.png) no-repeat center;background-size:100% 100% ;}





.content .img2{top:15.28rem;background: url(../img/img8.png) no-repeat center;background-size:100% 100% ;width:6.14rem;height: 11.76rem;display: block;position:absolute;left:0;right:0;margin: 0 auto;}
.content .img3{top:28rem;background: url(../img/img9.png) no-repeat center;background-size:100% 100% ;width:6.14rem;height: 8.31rem;display: block;position:absolute;left:0;right:0;margin: 0 auto;}
.content .img4{top:37.5rem;background: url(../img/img10.png) no-repeat center;background-size:100% 100% ;width:6.4rem;height:5.11rem;display: block;position:absolute;left:0;right:0;margin: 0 auto;}

.content .img4 .mySwiper{width: 5.33rem;height: 3.38rem;position: absolute;left: 0;right: 0;margin: auto;top: 10%;bottom: 0;overflow: hidden;}
/* .content .img4 .mySwiper .swiper-slide{border-radius: 5px;border: 1px solid #fff;} */

.content .img4 .swiper-button-next{background: url(../img/right.png) no-repeat center;background-size:100% 100% ;width:0.24rem;height:0.45rem;top: 58%;right: 0.2rem;}
.content .img4 .swiper-button-prev{background: url(../img/left.png) no-repeat center;background-size:100% 100% ;width:0.24rem;height:0.45rem;top: 58%;left: 0.2rem;}







.toast{position: fixed;top: 50%;left: 50%; transform:translate(-50%,-50%);width: 3.14rem;height: 2.38rem;background: rgba(0,0,0,0.5);border-radius: 5px;z-index: 10000;}
.toast b{position:absolute;background: url(../img/img5.png) no-repeat center;background-size:100% 100% ;width:0.59rem;height: 0.59rem;display: block;margin: 0 auto;top: 0.6rem;left: 0;right: 0;}
.toast span{font-size: 14px;color: #fff;position: absolute;bottom: 0.6rem;text-align: center;width: 100%;}













.zzc {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
display: none;
z-index: 100;
}
.zzc .zzc_img{position:absolute;background: url(../img/img6.png) no-repeat center;background-size:100% 100% ;width:4.12rem;height: 3.12rem;display: block;margin: auto;top: 0.5rem;left: 0;right: 0;bottom: 0;}
.zzc .zzc_img .gb{position:absolute;background: url(../img/img7.png) no-repeat center;background-size:100% 100% ;width:0.54rem;height: 0.54rem;display: block;margin: auto;top: -0.8rem;right: -0rem;}


/* 横屏提示 */
.remind-box {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
display: none;
z-index: 100;
}
.remind-box .remind {
width: 50%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}

.remind-box .remind span {
font-size: .28rem;
color: #fff;
white-space: nowrap;
}

.remind-box .remind .iphone {
display: block;
margin: 0 auto;
width: .5rem;
height: 1.2rem;
background: url(../img/remind.png) no-repeat center;
background-size: contain;
animation: remind 1.5s infinite linear;
-webkit-animation: remind 1.5s infinite linear;
transition: all 0.2s;
-webkit-transition: all 0.2s;
}

@keyframes remind {
0% {
transform: rotate(0deg)
}
50% {
transform: rotate(100deg)
}
100% {
transform: rotate(0deg)
}
}
@-webkit-keyframes remind {
0% {
transform: rotate(0deg)
}
50% {
transform: rotate(100deg)
}
100% {
transform: rotate(0deg)
}
}