@charset "utf-8";

.container {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: relative;
	background: url('../images/qa.jpg') center no-repeat;
	background-size: cover;
	padding-top: 1.5rem;
}

.container .music {
	position: fixed;
	top: 1rem;
	right: 1rem;
	width: 2rem;
	height: 2rem;
	cursor: pointer;
	z-index: 9999;
	transition: transform 0.1s ease;
	transform-origin: center center;
	background: url('../images/eqx_bgm_btn.png') center no-repeat;
	background-size: cover;
}

.container .music.playing {
	animation: rotate 2s linear infinite;
}

/* 播放时图标旋转动画 */
@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.container .back {
	position: fixed;
	right: 0px;
	top: 48%;
	z-index: 9999;
}

.container .back img {
	display: block;
	height: 1.6rem;
}

.container .line {
    display: none;
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 2;
	overflow: hidden;
	pointer-events: none;
}

.container .line img {
	display: block;
	width: 100%;
}

.container .minilogo {
	overflow: hidden;
}

.container .minilogo img {
	display: block;
	width: 75%;
}

.container .top {
	width: 90%;
	overflow: hidden;
}

.container .top img {
	display: block;
	width: 100%;
}

.container .main {
	width: 90%;
	background: url('../images/main.png') top center no-repeat;
	background-size: 100% auto;
	padding: 0px 3rem;
	overflow: hidden;
}

.container .main .title {
	overflow: hidden;
	margin-bottom: 1rem;
	padding-top: .5rem;
}

.container .main .title img {
	display: block;
	height: 3rem;
}

.container .main .inner,
.container .main .result {
	background: url('../images/inner.png') top center no-repeat;
	background-size: 100% auto;
	margin: .0rem;
	padding: 1rem 1rem 0px 1rem;
}

.container .main .inner .left {
	width: auto;
	margin-right: 1rem;
	margin-top: 1rem;
	padding: 0px .5rem 5rem .5rem;
	border-right: #eee 1px solid;
	overflow: hidden;
}

.container .main .inner .left .progress {
	margin-bottom: .8rem;
	line-height: 1;
	color: var(--title-color);
}

.container .main .inner .left .timer {
	line-height: 1;
	font-size: 1.1rem;
	color: var(--primary-color);
}

.container .main .inner .question {
	overflow: hidden;
}

.container .main .inner .question .subject {
	height: 2rem;
	padding-left: 1rem;
	background: var(--primary-color);
	border-radius: 10px 0px 0px 10px;
	line-height: 2rem;
	font-size: .7rem;
	font-weight: bold;
	color: #fff;
}

.container .main .inner .question .icon {
	height: 2rem;
	overflow: hidden;
}

.container .main .inner .question .icon img {
	display: block;
	height: 2rem;
}

.container .main .inner .question .options {
	margin-bottom: .5rem;
	padding-top: .5rem;
	padding-right: 5px;
	padding-bottom: 5px;
	overflow: hidden;
}

.container .main .inner .question .options label {
	display: block;
	margin-bottom: .5rem;
	position: relative;
	padding: .5rem .5rem .5rem 1rem;
	background: #fff;
	border: #eee 2px solid;
	border-radius: 10px;
	box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.03);
	line-height: 1;
	font-size: .7rem;
	color: var(--title-color);
}

.container .main .inner .question .options label:last-child {
	margin-bottom: 0px;
}

.container .main .inner .question .options label:has(input:checked) {
	border: var(--primary-color) 2px solid;
	box-shadow: 4px 4px 0px rgba(233, 211, 210, 0.8);
	color: var(--primary-color);
}

.container .main .inner .question .feedback {
	display: block;
	margin-bottom: .5rem;
	height: 1.8rem;
	line-height: 1.8rem;
	padding: 0px .5rem;
	border-radius: 5px;
	font-size: .6rem;
}

.container .main .inner .question .feedback.correct {
	background-color: #d4edda;
	color: #155724;
}

.container .main .inner .question .feedback.incorrect {
	background-color: #f8d7da;
	color: #721c24;
}

.container .main .inner .question .submit-btn {
	height: 2rem;
	background-image: linear-gradient(to bottom, #d5a24d, #f0be6d);
	border-radius: 10px;
	margin-bottom: 1rem;
	font-size: 1em;
	color: #fff;
}

.container .main .inner .question .submit-btn img {
	display: block;
	height: 1rem;
}

.container .main .inner .question .parse{
    line-height: 1.2;
    font-size: .8rem;
    color: var(--primary-color);
}

.container .main .result .resulticon {
	overflow: hidden;
	margin-bottom: 1rem;
	padding-top: 1rem;
}

.container .main .result .resulticon img {
	display: block;
	height: 4rem;
}

.container .main .result .num {
	margin-bottom: 2rem;
	text-align: center;
	line-height: 1.2;
	font-size: .65rem;
	font-weight: bold;
	color: var(--primary-color);
}

.container .main .result .num strong {
	font-size: 2.2rem;
	font-family: 'Montserrat-reg';
	font-size: bold;
}

.container .main .result .data {
	background-image: linear-gradient(to bottom, #fff7f6, #ffefe8);
	border-radius: 10px;
	padding: 1rem;
}

.container .main .result .data .item {
	text-align: center;
	line-height: 1.3;
}

.container .main .result .data .item .text {
	font-size: .6rem;
	color: #666;
}

.container .main .result .data .item .value {
	font-size: 1.2rem;
	font-weight: bold;
	font-family: 'Montserrat-reg';
	color: var(--primary-color);
}