*{
	margin: 0;
	padding: 0;
}
img{
	user-select: none;
}
.w100{
	display: block;
	width: 100%;
	position: relative;
}
.wapper{
	width: 100%;
	max-width: 600px;
	position: relative;
	background-color: #5d086f;
	min-height: 100vh;
	margin: 0 auto;
	padding-bottom: calc(14px * 2);
}
.main-bg{
	background-image: url('../img/beijing.png');
	background-size: 100% auto;
}
.banner{
	display: block;
	width: 100%;
}
.turntable-box{
	width: 80%;
	height: 0;
	padding-bottom: 80%;
	margin: 0 auto calc(14px * 2);
	position: relative;
}
.turntable-border{
	position: absolute;
	left: 50%;
	top: 48.5%;
	width: 90%;
	height: 94%;
	z-index: 10;
	transform: translate(-50%,-50%);
}
.turntable-border img{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: auto;
	transform: translate(-50%,-50%);
}
.turntable-border .turntable2{
	animation: turntable .4s infinite linear alternate;
}
@keyframes turntable{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.turntable-main{
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 9;
	width: 80%;
	height: 80%;
	border-radius: 50%;
	overflow: hidden;
	transform: translate(-50%,-50%);
	background-image: url('../img/zhuanpan.png');
	background-size: 100% 100%;
}
.turntable-item{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-100%);
	width: calc(100% / 5);
	height: 50%;
	transform-origin: center bottom;
	box-sizing: border-box;
	padding-top: 5%;
}
.turntable-item-image{
	display: block;
	width: 90%;
	height: 0;
	padding-bottom: 90%;
	position: relative;
	margin: 0 auto;
	position: relative;
	z-index: 10;
}
.turntable-item-image img{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.turntable-item-text{
	text-align: center;
	font-size: 14px;
	color: #fbce50;
	font-weight: bold;
	text-shadow: 0px 0px 2px rgba(0,0,0,.5);
	position: relative;
	z-index: 10;
}

.turntable-btn{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 11;
	width: 56%;
	height: 60%;
	cursor: pointer;
}
.record-box{
	width: calc(100% - (14px * 3));
	box-sizing: border-box;
	margin: 0 auto calc(14px * 3);
	background-color: rgba(17,17,17,.2);
	border-radius: calc(14px * 2);
	position: relative;
	padding-top: calc(14px * 3);
	padding: calc(14px * 3) calc(14px * 1.5) calc(14px * 1.5);
}
.record-title{
	position: absolute;
	left: 50%;
	top: -20px;
	transform: translateX(-50%);
	background-image: url(../img/record-title.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 70%;
	height: calc(14px * 4.5);
	line-height: calc(14px * 4);
	text-align: center;
	color: rgba(85,3,100,1);
	font-size: 17px;
	font-weight: bold;
}
.record-item{
	width: 100%;
	overflow: hidden;
	background-color: rgba(0,0,0,.3);
	color: #fff;
	border-radius: calc(14px * 3);
}
.record-item+.record-item,
.record-list{
	margin-top: calc(14px * .5);
}
.record-value{
	width: calc(100% / 2);
	float: left;
	text-align: center;
	line-height: calc(14px * 2.5);
	font-size: 13px;
}
.record-item.record-item-title{
	background-color: unset;
}
.setting-box{
	width: calc(100% - (14px * 3));
	box-sizing: border-box;
	margin: 0 auto;
	background-color: rgba(17,17,17,.2);
	border-radius: calc(14px * 2);
	position: relative;
	padding: calc(14px * 1.5);
}
.setting-title{
	display: table;
	margin: 0 auto;
	text-align: center;
	font-size: 21px;
	color: #fff;
	position: relative;
}
.setting-title::before,
.setting-title::after{
	content: '';
	display: block;
	position: absolute;
	top: 55%;
	width: calc(14px * .6);
	height: calc(14px * .6);
	background-color: #fff;
	opacity: 0.5;
	border-radius: 1px;
	transform: translateY(-50%) rotate(45deg);
}
.setting-title::before{
	left: calc(-14px * 1.5);
}
.setting-title::after{
	right: calc(-14px * 1.5);
}
.setting-item+.setting-item{
	margin-top: calc(14px * 2);
}
.setting-item-name{
	width: 100%;
	color: #fff;
	font-size: 16px;
	line-height: calc(16px * 3);
	position: relative;
}
.setting-item-index{
	position: absolute;
	left: 0;
	bottom: 0;
	height: 40px;
	line-height: 20px;
	font-size: 40px;
	opacity: .5;
	font-family: sans-serif;
}
.setting-item-value{
	font-size: 12px;
	color: #fff;
	line-height: calc(14px * 1.5);
}
.language-box{
	position: sticky;
	top: calc(14px * 1);
	z-index: 99;
	float: right;
	margin-right: calc(14px * 1);
	height: 0;
}
.language-item{
	background-color: rgba(0,0,0,.3);
	color: #fff;
	font-size: 12px;
	text-align: center;
	float: left;
	padding: 0 calc(14px * 1);
	line-height: calc(14px * 2.5);
	border-radius: calc(14px * .5);
	cursor: pointer;
	transition: all .3s;
	font-weight: bold;
}
.language-item+.language-item{
	margin-left: calc(14px * .5);
}
.language-item.active{
	background-color: rgba(246,176,15,.8);
}

/* 下拉框 */
.language-pick-box{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 997;
	display: none;
}
.language-pick-mask{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.5);
	z-index: 998;
	transition: all .3s;
}
.language-pick{
	position: absolute;
	left: 50%;
	bottom: -2px;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: calc(14px * 1);
	background-color: #fff;
	transform: translateX(-50%);
	z-index: 999;
	transition: all .3s;
}
.language-pick-title,
.language-pick-item{
	width: 100%;
	text-align: center;
}
.language-pick-title{
	color: #666;
	font-size: 12px;
	line-height: calc(14px * 1);
	line-height: calc(14px * 3);
}
.language-pick-item{
	font-size: 13px;
	color: #333;
	line-height: calc(14px * 3);
	cursor: pointer;
}
.language-pick-item+.language-pick-item{
	border-top: 1px solid #f6f6f6;
}
.language-pick-box.hide .language-pick-mask{
	opacity: 0;
}
.language-pick-box.hide .language-pick{
	bottom: -40%;
}
.turntable-item:before{
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -2%;
	width: 220%;
	height: 100%;
	background-color: #f00;
	z-index: 1;
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
	background-size: 20px 20px;
}

.turntable-item:nth-child(3n+1):before{
	background: #e70a05;
}
.turntable-item:nth-child(3n+2):before{
	background: #fc9101;
}
.turntable-item:nth-child(3n+3):before{
	background: #1d2f4b;
}