@charset "utf-8";

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

.home .song{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    pointer-events: none;
}
.home .song img{
    display: block;
    width: 100%;
    height: auto;
}

.home .logo {
	margin-bottom: 2rem;
	overflow: hidden;
}

.home .logo img {
	display: block;
	width: 70%;
	height: auto;
}

.home .btn {
	gap: 60px;
	position: relative;
}

.home .btn a {
	display: block;
}

.home .btn a img {
	display: block;
	width: 13rem;
	height: auto;
}

.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: 70%;
}

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

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

.container .main {
	width: 86%;
	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: 3.4rem;
}

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

.container .main .inner .left {
	width: 16rem;
	margin-right: 3rem;
	margin-top: 1rem;
	padding: 0px 2rem 5rem 0rem;
	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.2rem;
	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: .8rem;
	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);
}

.video-container {
	position: relative;
	width: 100%;
	height: 100vh;
	background-color: #000;
}

.video-container video {
	width: auto;
	height: 100%;
	object-fit: fill;
}

.circle {
	position: fixed;
	top: calc(50% - 5rem);
	right: 20px;
	z-index: 100;
}

.circle.faded {
    opacity: 0; /* 变淡，你也可以用 visibility、filter 等 */
}

.circle .btn {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background-color: var(--primary-color);
	margin-bottom: 1rem;
	cursor: pointer;
	transition: all 0.3s ease;
}

.circle .btn .icon {
	width: 1rem;
	height: 1rem;
	margin-bottom: 5px;
	font-size: 1rem;
	color: #fff;
}

.circle .btn .icon.icon-liebiao {
	font-size: .9rem;
}

.circle .btn .text {
	line-height: 1;
	font-size: .6rem;
	font-weight: normal;
	color: #fff;
}

.circle .btn:hover {
	transform: scale(1.1);
}

.playlist {
	position: fixed;
	top: 0;
	right: -16rem;
	width: 16rem;
	height: 100vh;
	background-color: rgba(20, 20, 20, 0.95);
	backdrop-filter: blur(10px);
	transition: right 0.4s ease;
	z-index: 200;
	padding: 1rem;
}

.playlist.active {
	right: 0;
}

.playlist .header {
	overflow: hidden;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.playlist .header .title {
	line-height: 1;
	font-size: .8rem;
	font-weight: 500;
	color: #fff;
}

.playlist .header .controls {
	gap: 10px;
	overflow: hidden;
}

.playlist .header .controls .item {
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	cursor: pointer;
	transition: all 0.2s ease;
}

.playlist .header .controls .item .iconfont {
	font-size: .68rem;
	color: var(--text-color);
}

.playlist .header .controls .item .iconfont.icon-xunhuanbofang,
.playlist .header .controls .item .iconfont.icon-guanbi {
	font-size: .94rem;
}

.playlist .header .controls .item:hover {
	background: var(--primary-color);
}

.playlist .list {
	overflow-x: hidden;
	overflow-y: auto;
}

.playlist .list .video-item {
	margin-bottom: .5rem;
	padding: .5rem;
	background-color: rgba(255, 255, 255, 0.05);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.playlist .list .video-item:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.playlist .list .video-item.active {
	background-color: rgba(74, 144, 226, 0.3);
	border-left: 3px solid var(--primary-color);
}

.playlist .list .video-item .thumb {
	width: 4rem;
	height: 3rem;
	border-radius: 8px;
	overflow: hidden;
	margin-right: .5rem;
	background-color: #333;
}

.playlist .list .video-item .thumb img {
	display: block;
	width: 4rem;
	height: 3rem;
}

.playlist .list .video-item .title {
	margin-bottom: .5rem;
	line-height: 1.2;
	font-size: .66rem;
	font-weight: 400;
	color: #eee;
}

.playlist .list .video-item .duration {
	line-height: 1;
	font-family: 'Montserrat-lig';
	font-size: .56rem;
	color: #999;
}

.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0px;
	bottom: 0px;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 150;
}

.overlay.active {
	display: block;
}

.play-status {
	display: none;
	position: fixed;
	bottom: 3rem;
	left: 2rem;
	z-index: 100;
	background-color: rgba(0, 0, 0, 0.7);
	padding: .5rem;
	border-radius: 10px;
	line-height: 1;
	font-size: .7rem;
	color: #fff;
}

.play-status.show {
	display: block;
	animation: fadeOut 3s forwards;
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}

	70% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}