body, html { background: #f3f3f3 }

.wrapper .swiper-container .swiper-pagination { bottom: 25px; }
.wrapper .swiper-container .swiper-pagination-bullet { opacity: 1; position: relative; width: 50px; height: 5px; border-radius: 4px; margin: 0 8px; background-color: rgba(161,4,23,0.9); transition: background-color .3s ease; }
.wrapper .swiper-container .swiper-pagination-bullet::before { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; transform: scaleX(0); transform-origin: 0 0;  border-radius: 4px;}
.wrapper .swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active::before { animation: sliderPagination 3s linear forwards }
.wrapper .swiper-container .swiper-pagination-bullet:hover { background-color: #fff; }

@keyframes sliderPagination {
    100% { transform: scaleX(1); opacity: 1; }
}
.menu { width: 1440px; margin: 0 auto; display: flex; align-items: center; transition: all 0.5s ease, background-color 0.3s ease-out; justify-content: space-between; }
.menu ul { display: flex; justify-content: center; width: 100%; }
.menu li { padding: 0 20px; }
.menu li a { display: block; padding: 15px 2px; color: #000; text-decoration: none; font-size: 18px; position: relative }
.menu li a:before { content: ''; position: absolute; left: 10%; bottom: 5px; height: 3px; width: 80%; transform: rotateY(90deg); background: #A10417; transition: ease-in-out 0.5s; }
.menu li a:hover:before { transform: rotateY(0deg); }
.menu .hover a { color: #A10417; font-weight: bold }
.menu .hover a:before { transform: rotateY(0deg); }
.video { width: 1200px; margin: 15px auto; position: relative; text-align: center; overflow: hidden }
.video video { z-index: 10 }
/*.video .video_play { position: absolute; width: 100%; height: 100%; z-index: 1; left: 0; top: 0; background: url(/theme/image/banner2.jpg) no-repeat center center; background-size: cover; display: flex; align-items: center; justify-content: center }*/

.video i { position: absolute; left: 50%; top: 50%; font-size: 50px; color: #A10417; cursor: pointer; z-index: 10; display: none; margin-top:-40px; margin-left:-25px; }

#danmaku-canvas { position: absolute; top: 10px; left: 1%; right:1%;  width: 98%; height: 100px; z-index: 100; display: none; pointer-events: none; 
                  /* 穿透点击事件到视频 */ }



.letter-track { position: absolute; white-space: nowrap; font-family: 'Arial', sans-serif; font-size: 26px; color: #fff; text-shadow: 0 0 5px #7a0a17, 0 0 10px #5a040e; animation: scroll 15s linear infinite; }

@keyframes scroll {
    0% { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}




.course { width: 1200px; margin: 15px auto; background: #fff; border-radius: 10px; }
.course .catalogue { border-bottom: 1px solid #A10417; padding: 15px 20px; display: flex; justify-content: space-between; font-weight: bold; font-size: 15px; color: #333 }
.course .catalogue i, .course .catalogue em { font-style: normal; }
.course .list { padding: 15px; }
.course .list .title .u_t { display: flex; align-items: center; cursor: pointer ; padding:3px 0}
.course .list .title .u_t label { font-weight: bold; cursor: pointer; font-size: 15px; }
.course .list .title .u_t i { font-size: 25px; color: #A10417 }
.course .list .title ul { margin: 0px 15px; }
.course .list .title ul li { padding: 10px ; font-size: 15px; color: #333; display: flex; cursor: pointer ; align-items:center}
.course .list .title ul li .mdi { margin-right:5px;}
.course .list .title ul li .s1 { width: 910px; }
.course .list .title ul li .s2 { width: 100px; text-align: center }
.course .list .title ul li .s3 { width: 100px; text-align: center }
.courselist_hover { background:#fbf2f3; }

.nodata { text-align: center; padding: 100px 0; color: #666; font-size: 14px; display: none }

/*练习题*/
.subjectbank { position: fixed; background: #fff; z-index: 110; width: 80%; height: 80%; top: 3%; left: 10%; right: 10%; box-shadow: 0px 4px 24px 0px rgba(10, 10, 51, 0.12), 0px 0px 8px 0px rgba(0, 0, 0, 0.04); border-radius: 6px; display: none }
.subjectbank .list .title { font-weight: bold; border-bottom: 1px solid #eee; font-size: 15px; display: flex; justify-content: space-between; font-size: 15px; padding: 10px 30px 15px 30px; align-items: center }
.subjectbank .list .title label { color: #A10417; font-style: normal; display: none }
.subjectbank .list .title label i { display: inline-block; margin-right: 10px; font-size: 16px; }
.subjectbank .list .title label em { font-style: normal }
.subjectbank .list ul { width: 100%; }
.subjectbank .list ul li { padding: 0 0 0 30px; cursor: pointer; font-size: 15px; display: flex; align-items: center }
.subjectbank .list ul li label { display: flex; align-items: center; cursor: pointer; padding: 15px 0; width: 100%; }
.subjectbank .list ul li img { max-width: 150px; margin: 10px 15px; }
.subjectbank .list ul li .mdi { font-size: 16px; }
.subjectbank .list ul li .mdi-check-circle { color: #A10417; }
.subjectbank .list ul li em { font-style: normal; display: inline-block; margin: 0 10px; border-top:1px solid #eee }
.subjectbank .list ul li:hover { background: #fbf2f3 }
.subjectbank .list ul .hover { background: #fbf2f3 }

.subjectbank .btn { display: flex; gap: 50px; justify-content: center; padding: 20px 0;   }
.subjectbank .btn span { width: 180px; background: #A10417; text-align: center; color: #fff; font-size: 15px; cursor: pointer; padding: 10px 0; border-radius: 20px; transition: background 0.3s;  display:none}
.subjectbank .btn span:hover { background: #8f0415; }
.subjectbank .title .topic { font-weight: bold; font-size: 18px; padding: 20px; border-bottom:1px dashed #f9f9f9; display:flex; justify-content:space-between }
.subjectbank .title .topic span { font-weight:300;  color:#666; font-size:16px; padding-left:10px;}
.subjectbank .title .topic span em { font-style:normal; color:#A10417; font-weight:800}
.subjectbank .title .topic i { color:#999; cursor:pointer;}
.subjectbank .title label { font-weight: bold }
.subjectbank #questions { overflow: auto; }
.subjectbank .list .parse { padding: 10px 30px; line-height: 35px; display: none }
.subjectbank .list .parse span { color: #A10417; font-size: 15px; font-weight: 800 }
.subjectbank .list .parse p { color: #666 }


/*答题结果*/
.result-container { width: 600px; margin: 0 auto; padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center; left: 50%; top: 50%; margin-left: -300px; margin-top: -135px; z-index: 200;  display: none; position:fixed}
.result-container .mdi-window-close { position:absolute; right:15px; top:15px; color:#999; cursor:pointer}
.result-metrics { display: flex; justify-content: space-around; margin: 20px 0; flex-wrap: wrap; }
.metric { flex: 1; min-width: 120px; margin: 10px; }
.metric-label { display: block; font-weight: bold; color: #333; }
.metric-value { display: block; font-size: 24px; font-weight: bold; color: #2c3e50; padding-top: 15px; font-size: 40px; color: #A10417 }
.progress-bar { width: 100%; background: #eee; border-radius: 4px; overflow: hidden; margin: 20px 0 35px 0; }
.progress { height: 30px; background: #7e2c36; width: 30%; transition: width 0.5s ease; }
/*.retry-btn { background: #A10417; color: white; border: none; border-radius: 20px; cursor: pointer; font-size: 15px; transition: background 0.3s; margin: 0 5px; width: 180px; cursor: pointer; padding: 10px 0; display: inline-block }*/
/*.retry-btn:hover { background: #8f0415; }*/


/*css美化radio ✓*/
.subjectbank input[type="radio"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 20px; height: 20px; border: 2px solid #ccc; border-radius: 50%; outline: none; cursor: pointer; transition: all 0.3s ease; }
.subjectbank input[type="radio"]:checked { background-color: transparent; border-color: #A10417; position: relative; }
.subjectbank input[type="radio"]:checked::after { content: ""; position: absolute; top: 4px; left: 4px; width: 8px; height: 8px; background-color: #A10417; border-radius: 50%; }
.subjectbank input[type="radio"]:hover { border-color: #A10417; }
.subjectbank input[type="radio"]:hover:checked { border-color: #A10417; }
.subjectbank input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 20px; height: 20px; border: 2px solid #ccc; border-radius: 4px; outline: none; cursor: pointer; transition: all 0.3s ease; }
.subjectbank input[type="checkbox"]:checked { background-color: #A10417; border-color: #A10417; }
.subjectbank input[type="checkbox"]:checked::after { content: "✔"; color: white; font-size: 14px; line-height: 20px; text-align: center; display: block; }
.subjectbank input[type="checkbox"]:hover { border-color: #A10417; }
.subjectbank input[type="checkbox"]:hover:checked { background-color: #A10417; border-color: #A10417; }

/*签到*/
.checkin { position: fixed; width: 500px; height: 300px; background: url(/theme/image/checkin.png) no-repeat center center; background-size: cover; left: 50%; top: 50%; margin-left: -250px; margin-top: -150px; z-index: 110; text-align: center; display: none }
.checkin .name { margin-top: 110px; color: #fff; font-size: 25px; }
.checkin .msg { margin-top: 10px; color: #fff; font-size: 22px; display: flex; justify-content: center; align-items: center; min-height: 15px; }
.checkin .msg label { font-size: 36px; }
.checkin .mdi { position: absolute; bottom: -50px;; width: 30px; height: 30px; color: #fff; border-radius: 50%; border: 1px solid #fff; display: flex; justify-content: center; align-items: center; left: 50%; margin-left: -15px; cursor: pointer }
.checkin .btn_checkin { background: #fff; color: #A10417; border: none; border-radius: 20px; cursor: pointer; font-size: 28px; transition: background 0.3s; margin: 0 5px; width: 260px; cursor: pointer; padding: 5px 0; display: inline-block; margin-top: 30px; }
.checkin .btn_checkin:hover { background: #f5f5f5; }



/*音乐播放效果*/
.video-pulse-box { display: none }
.video-pulse { display: inline-block; vertical-align: middle; text-align: justify; font-size: 10px; width: 20px; height: 16px; }
.video-pulse::after { content: ''; display: inline-block; width: 100%; height: 0; overflow: hidden }
.video-pulse i { display: inline-block; width: 2px; height: 16px; border-radius: 6px; background: #A10417; -webkit-animation: is-playing .5s ease infinite alternate; animation: is-playing .5s ease infinite alternate; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom }
.video-pulse i:nth-child(1) { -webkit-animation-delay: .15s; animation-delay: .15s }
.video-pulse i:nth-child(2) { -webkit-animation-delay: .3s; animation-delay: .3s }
.video-pulse i:nth-child(3) { -webkit-animation-delay: .45s; animation-delay: .45s }
.video-pulse i:nth-child(4) { -webkit-animation-delay: .6s; animation-delay: .6s }

@-webkit-keyframes is-playing {
    0% { -webkit-transform: scaleY(.2); transform: scaleY(.2) }
    100% { -webkit-transform: scaleY(1); transform: scaleY(1) }
}

@keyframes is-playing {
    0% { -webkit-transform: scaleY(.2); transform: scaleY(.2) }
    100% { -webkit-transform: scaleY(1); transform: scaleY(1) }
}