@CHARSET "UTF-8";

.warp{margin-top: 45px;}
.warp .box{
	background:url('../images/index_bg.png') no-repeat;
	background-size: 100% 100%;
	box-sizing: border-box;
	width: 100%;
	padding-bottom: 10px;
}
.deng{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.box .top{
	background:url('../images/index_deng1.png') no-repeat;
	background-size: 100%
}
.box .top .title{
	display:flex;
	width: 100%;
	margin:auto;
	padding:10px 5%;
	box-sizing: border-box;
}
.box .top .title a{
	display:block;
	align-items: center;
	margin:0 1%;
	width: 32%;
	padding:3px 8px;
	border-radius: 40px;
	height:30px;
	line-height: 24px;
	font-size: 12px;
	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: 60%;
	text-align: center;
	font-weight: bold;
	display:inline-block;
}
.box .top .good{
	height:90%;
	position: relative;
	text-align: center;
}
.box .top .good .gooddetail {
	width: 60%;
	position: absolute;
	animation: move 1s infinite;
	animation-direction: alternate;
	left:20%;
}
@keyframes move{
	0%{
		transform: translateY(0px);
	}
	100%{
		transform: translateY(10px);
	}
}

.tai{
	margin:auto;
	width: 80%;
}
.xing{
	position: absolute;
	top:0%;
	left:0%;
	width: 100%;
}
.swiper-active-switch {
  background: #fff;
}
.warp .bottom{
	position: relative;
}
.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;
}

.bottom .open .open_box p{text-align: center;font-size: 18px;font-weight: bold;color:#fff;
	text-shadow: 0 0px 7px #6710dc}

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


.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: fixed;top: 30%;left:10%;z-index: 999;display:none;border-radius: 15px;}
.custom .title{text-align: center;border-bottom: 1px #eee solid;margin-bottom: 15px;padding-bottom: 15px;font-weight: bold;font-size: 16px;}
.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;}
.close{position: absolute;bottom: -50px;width: 10%;left:45%;}
.close img{width: 100%;}
.goods_warp .title{background:#fff;padding:10px;}
.goods_warp .title h2{float: left;line-height: 30px;font-size: 17px;font-weight: normal;color:#333}
.goods_warp .title .tips{float: right;line-height: 30px;font-size: 12px;color:#888;}
.clear{clear: both}
.goodslist .gailv{background:linear-gradient(50deg,#cbecff,#f7eaff);display:flex;padding:0 10px;align-items: center;width:85%;margin:auto;margin-bottom: 15px;border-radius: 50px;margin-top: 10px;padding:4px 0;}
.goodslist .gailv .item{display:flex;flex-direction: column;align-items: center;flex: 1;font-size: 13px;}
.goodslist .gailv .item .kuan{font-size: 12px;font-weight: bold}
.goodslist .gailv .item:first-child .kuan{color:red;}
.goodslist .gailv .item:nth-child(2) .kuan{color:#ff7200;}
.goodslist .gailv .item:nth-child(3) .kuan{color:#5e94ff;}
.goodslist .gailv .item:nth-child(4) .kuan{color:#2dd93d;}
.goodslist .list{padding:0 5px;margin-bottom: 15px;}
.goodslist .list li{margin-bottom: 10px;width: 33.33%;float: left;}
.goodslist .list li a{background:#fff;display:block;width: 90%;margin:auto;border-radius: 8px;position: relative;overflow:hidden;}
.goodslist .list li a .tip{position: absolute;left:0;top: 0;color:#2a71ff;font-size:12px;background:linear-gradient(50deg,#8dcaff,#86f9ff);padding:3px 7px;border-top-left-radius: 8px;border-bottom-right-radius: 8px}
.goodslist .list li a img{width: 100%;margin-bottom: 5px;}
.goodslist .list li a p{overflow: hidden;word-break: keep-all;text-overflow: ellipsis;margin-bottom: 5px;white-space:nowrap;padding:0 3px;}
.goodslist .list li a .price{color:#ff495d;font-weight: bold;text-align: center;font-size: 16px;}
.goodslist .list li a .price span{font-size: 13px;}
.buyer_rules{background:#fff;padding:0 10px;margin-bottom: 30px;}
.buyer_rules h2{font-size: 17px;text-align: center;line-height: 40px;border-bottom: 1px #eee solid;font-weight: normal;}
.buyer_rules .info{padding:10px 0;}
.buyer_rules .info p{line-height: 20px;}
.buyer_rules .info img{width: 100%;}

.rules_warp{background: #fff;width: 90%;padding:15px 0;position: fixed;top: 20%;left:5%;z-index: 999;display:none;border-radius: 15px;height:60%;}
.rules_warp .title{text-align: center;border-bottom: 1px #eee solid;margin-bottom: 5px;padding-bottom: 15px;font-weight: bold;font-size: 16px;}
.rules_warp .info{padding:10px;max-height: calc(100% - 65px);overflow-y: scroll;}
.rules_warp .info p{line-height: 20px;}
.rules_warp .info img{width: 100%;}

.detail{width: calc(100% - 20px);position: fixed;left: 10px;z-index: 999;transition: bottom .5s ease-in;bottom: 15px;display:none;height:70%;}
.detail .detail_info{padding: 10px;width: 100%;border-radius: 8px;background:#fff;display: flex;flex-direction: column;box-sizing: border-box;height: calc(100% - 50px)}
.detail .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;}
.detail .title{text-align: center;border-bottom: 1px #eee solid;margin-bottom: 5px;padding-bottom:10px;font-weight: bold;font-size: 16px;}
.detail .good_detail{padding:10px 0;font-size: 14px;}
.detail .good_detail p{margin-bottom: 8px;}
.detail .good_detail .price{margin-bottom: 0;font-size: 16px;font-weight: bold;color:#ff495d;text-align: center;}
.detail .good_detail .price span{font-size: 12px;}
.detail .info{overflow-y: scroll;}
.detail .info p{line-height: 20px;}
.detail .info img{width: 100%;}