@CHARSET "UTF-8";

html{height:100%;}
body{
	width: 100%;
	background:#f7c600;
}
.warp .box{
	background:url('../images/index_bg.png') no-repeat;
	background-size: 100% 100%;
	box-sizing: border-box;
	width: 100%;
}
.deng{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.box .top{
	display: flex;
	flex-direction: column;
}
.box .top .title{
	display:flex;
	position: absolute;
	top: 0;
	width: 100%;
	margin:auto;
	padding:10px 15%;
	box-sizing: border-box;
}
.box .top .title a{
	display:block;
	align-items: center;
	margin:0 5%;
	width: 40%;
	padding:3px 8px;
	border-radius: 40px;
	height:30px;
	line-height: 24px;
	box-sizing: border-box;
	background:rgba(255,255,255,0.7);
	box-shadow: 0 1px 5px #ddd
}

.box .top .title img{
	width: 23px;
}
.box .top .title span{
	color:#333;
	width: 50%;
	text-align: center;
	font-weight: bold;
	display:inline-block;
}
.box .top .good{
	height:90%;
	position: relative;
	margin-top: 50px;
}
.box .top .good .swiper-container {
	width: 100%;
	height:100%;
}
.box .top .good .swiper{
	height:100%;
}
.swiper-pagination-bullet-active{
	background: #5e94ff !important;
}
.box .top .good .swiper-slide {
	 text-align: center;
      font-size: 18px;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
}
.box .top .good .item{
	width: 60%;
}
.box .top .good .item a{
	display:block;
}
.box .top .good .item a img{
	transition: 0.5s;
	width: 80%;
	height:160px;
	object-fit: contain;
}
.box .top .good .item .button{
	background:linear-gradient(45deg,#84f8ff,#1030ff);
	line-height: 50px;
	border-radius: 50px;
	color:#fff;
	width: 50%;
	margin:auto;
	margin-top: 80px;
	transition: 0.5s;
	font-weight: bold
}
.box .top .good .swiper-slide-active .button{
	margin-top: 80px;
	width: 80%;
	line-height: 50px;
}
.box .top .good .swiper-slide-active a img{
	width: 80%;
	height:160px;
	object-fit: contain;
	animation: move 1s infinite;
	animation-direction: alternate;
}

@keyframes move{
	0%{
		transform: translateY(0px);
	}
	100%{
		transform: translateY(10px);
	}
}

.box .top .good .item p{
	margin: 15px 0;
	font-weight: bold;
	color:#fff;
	font-size:18px;
	text-shadow: 0 0px 7px #6710dc
}
.swiper-pagination{bottom:-5px !important;}
.tai{
	position: absolute;
	top:0%;
	left:10%;
	width: 80%;
}
.xing{
	position: absolute;
	top:0%;
	left:0%;
	width: 100%;
}
.swiper-active-switch {
  background: #fff;
}
.warp .bottom{
	display:flex;
	flex-direction: column;
}
.bottom .open{
	display:flex;
}
.bottom .open .small_box{
	flex:0.3;
	display:block;
	text-align: center;
}
.bottom .open .small_box img{
	width: 55px;
	height: 55px;
	background:#fff;
	border-radius: 60px;
	padding:5px;
	margin:auto;
	margin-top: 25%;
}
.bottom .open .small_box p{
	margin-top: 10px;
	font-weight: 700;
}
.bottom .open .open_box{
	flex:0.4;
	display:block;
}
.bottom .open .open_box img{
	width: 100%;
	animation: big 1s infinite;
	animation-direction: alternate;
}

@keyframes big{
	0%{
		transform: scale(0.9);
	}
	100%{
		transform: scale(1);
	}
}

.rules a{color:#333;padding:10px;}
.rules .chengnuo{
	display:flex;
	background:rgba(255,255,255,0.5);
	margin-top: 8px;
	padding:5px 10px;
}
.rules .chengnuo .li{
	text-align: center;
}
.rules .chengnuo .li:nth-child(2){
	width: 35%;
}
.rules .chengnuo .li img{
	width: 25px;
}
.rules .chengnuo .li p{
	display:inline-block;
	line-height: 25px;
}
@media screen and (min-width: 376px) {
    .box .top .good .swiper-slide-active .button{
    	margin-top: 90px;
    	line-height: 50px;
    }
}

.share{width: calc(100% - 20px);position: fixed;left: 10px;z-index: 999;transition: bottom .5s ease-in;bottom: 15px;display:none;}
.share .share-opt{padding:30px 0;width: 100%;border-radius: 8px;background:#fff;display: flex;flex-direction: column;}
.share .btn{width: 100%;height: 40px;line-height: 40px;background:#fff;text-align: center;border-radius: 20px;color: #333333;font-size: 14px;border: none;margin-top: 10px;}
.opt_top{padding:20px 10px;box-sizing: border-box;display:flex;}
.opt_top div{flex:1;}
.opt_top a{display:block;width: 90%;margin:auto;height:50px;line-height: 50px;text-align: center;color:#fff;font-weight: bold;font-size:16px;}
.opt_top .orange{background:url('../images/but_orange.png') no-repeat;background-size:  100% 100%;}
.opt_top .blue{background:url('../images/but_blue.png') no-repeat;background-size:  100% 100%;}
.opt_bot{padding:20px 10px;box-sizing: border-box;}
.opt_bot .purple{background:url('../images/but_purple.png') no-repeat;background-size:  100% 100%;height:50px;line-height: 50px;text-align: center;color:#fff;font-weight: bold;font-size:16px;display:block;width:47%;margin:auto;}
.opt_bot input{width: 50%;line-height: 35px;border:1px #eee solid;border-radius: 10px;margin:auto;margin-top: 15px;display:block;text-align: center;}
.custom{background: #fff;width: 80%;padding:15px 0;position: absolute;top: 30%;left:10%;z-index: 999;display:none;border-radius: 15px;}
.custom p{text-align: center;border-bottom: 1px #eee solid;margin-bottom: 15px;padding-bottom: 15px;}
.custom input{width: 80%;display:block;text-align: center;border:1px #eee solid;border-radius: 10px;margin:auto;margin-bottom: 15px;line-height: 40px;}
.custom .purple{background:url('../images/but_purple.png') no-repeat;background-size:  100% 100%;height:50px;line-height: 50px;text-align: center;color:#fff;font-weight: bold;font-size:16px;display:block;width:47%;margin:auto;}