/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

body {
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    color: #333;
    background-color: #593221;
    overflow: hidden;
}

img{max-width:100%;display:block;}
/* Swiper容器样式 */
.swiper-container {
    width: 100%;
    height: 100vh;
}

.main-swiper {
    width: 100%;
    height: 100vh;
}

.content {
    margin:auto;
}



h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

/* 按钮样式 */
.btn {
    padding:2vw
}

img.disabled {
    opacity:0.6;background:rgba(0,0,0,0.6);
}


/* 第一块样式 */
.section-1{background:url(../images/bg1.jpg) center;background-size:100% 100%}
.startBtn{width:58%;height:10vw;background:url(../images/start.png);background-size:100% 100%;position:absolute;bottom:22vh;left:0;right:0;margin:auto;}
.section-1 .logo{width:16%;position:absolute;left:5vw;top:5vh;max-width:120px;}
.section-1 .tit{width:100%;margin:14vh 0 2vh;max-height:44vh;object-fit:contain;z-index:1;position:relative;}
.section-1 .desc{width:100%;margin:auto;position:absolute;bottom:0;left:0;max-height:45vh;}
.section-1 .from{width:90%;margin:auto;position:absolute;bottom:5vh;left:0;right:0;max-width:545px;}
/* 第二块样式 */
.section-2 {background:url(../images/bg2.jpg) center;background-size:cover;padding-top:21vh;}

.section-2 .tit2{width:54%;margin:auto;}
.button-group {display: flex;justify-content: center;flex-wrap: wrap;padding:3.6vh 10vw 0;}
.button-group>div{flex:1;height:50vw;margin:0 1vw}
.button-group>div:nth-of-type(1){background:url(../images/type1.png) no-repeat center top;background-size:contain;}
.button-group>div:nth-of-type(2){background:url(../images/type2.png) no-repeat center top;background-size:contain;}
.button-group>div:nth-of-type(3){background:url(../images/type3.png) no-repeat center top;background-size:contain;}
.button-group>div:nth-of-type(4){background:url(../images/type4.png) no-repeat center top;background-size:contain;}

/* 第三块样式 */
.section-3 {
    background:url(../images/bg3.jpg) center;background-size:100% 100%;padding-top:8vh;
}

.sub-swiper {
    width: 100%;
    min-height: 54vh;
    overflow: hidden;
}
.sub-swiper img{margin:auto;height:50vh;}
.sub-slide {
    
}

.slide-content {
    font-size: 24px;
    padding: 20px;
}
.section-3 h1{width:100%;height:16vh;margin-bottom:1vh;}
#swiper1 h1{background:url(../images/typeTit1.png) no-repeat center;background-size:contain;}
#swiper2 h1{background:url(../images/typeTit2.png) no-repeat center;background-size:contain;height:18vh;}
#swiper3 h1{background:url(../images/typeTit3.png) no-repeat center;background-size:contain;}
#swiper4 h1{background:url(../images/typeTit4.png) no-repeat center;background-size:contain;height:18vh;}
.section-3 .back-btn{width:18vh;height:4.4vh;position:absolute;bottom:7vh;background:url(../images/backBtn.png);background-size:100% 100%;z-index:9;}
.section-3 .next-btn{width:18vh;height:4.4vh;position:absolute;bottom:7vh;background:url(../images/nextBtn.png);background-size:100% 100%;z-index:9;display:none;}
.topMove{position:relative;top:-4vh;}
.section-3 .swiper-slide{padding-top:4vh;}

/* 第四块样式 */
.section-4 {
   background:url(../images/bg4.jpg) center;background-size:100% 100%;padding-top:35vh;
}
.section-4 .next-btn{width:18vh;height:4.4vh;display:block;background:url(../images/nextBtn.png);background-size:100% 100%;margin:3vh auto 0;}
.tit4{width:65%;margin:auto;}

/* 第五块样式 */
.section-5 {
   background:url(../images/bg5.jpg) center;background-size:100% 100%;padding-top:5vh;
}
.section-5 .content{padding:0 5%;width: 50vh;max-width:100%;}

.options {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2vh;
    margin-top:2vh;
    padding:0 4%;
}

.section-5 .button-group{margin-top:1vh;}
.next-quiz-btn{width:18vh;height:4.4vh;position:absolute;bottom:8vh;background:url(../images/nextQ.png);background-size:100% 100%;}
.confirm-btn{width:18vh;height:4.4vh;position:absolute;bottom:8vh;background:url(../images/submitBtn.png);background-size:100% 100%;}
/* 第六块样式 */
.section-6 {
    background:url(../images/bg5.jpg) center;background-size:100% 100%;padding-top:12.5vh;
}
.section-6 .logo2{width:16%;margin:3vh auto 0;}
.back-to-home-btn{position:absolute;top:5vh;left:5%;width:5vh;height:5vh;background:url(../images/backIcon.png) no-repeat;background-size:contain;z-index:19;}
.resultImg{width:76%;height:auto;margin:auto;}
.resultImg2{position:absolute;width:100%;height:100%;opacity:0;z-index:9;left:0;bottom:0;margin:auto;z-index:1;}

.result-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background-color: white;
}

#resultCanvas {
    max-width: 100%;
    height: auto;
}

/* 轮播控制按钮样式 */
.swiper-button-prev, .swiper-button-next {width:16vw;height:16vw;background:url(../images/leftBtn.png);background-size:100% 100%;top:13vh;z-index:1}
.swiper-button-next {transform: rotate(180deg);}
#voice {
    width:17vw;
    height:17vw;
    background:#fff;
    position:fixed;
    background:url(data:image/png;base64,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) no-repeat center;
    background-size:100% 100%;
    top:0%;
    right:0vw;
    animation:rotateForever 8s infinite linear;
    z-index:19;
}
#voice.pause{
    background:url(data:image/png;base64,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) no-repeat center;
    background-size:100% 100%;
    animation:none;
    animation: ring 1.5s infinite alternate;  
}
@keyframes rotateForever {
    0% {
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
    }
}
@keyframes ring {  
    0%, 100% {  
      transform: rotate(0deg);  
    }  
    12.5%, 37.5% {  
      transform: rotate(15deg);  
    }  
    25%, 50% {  
      transform: rotate(-15deg);  
    }  
    62.5%, 87.5% {  
      transform: rotate(0deg);
    }  
}  
@media screen and (min-width: 500px) {
    .swiper-button-prev, .swiper-button-next {width:80px;height:80px;}
    .startBtn{width:260px;height:46px;}
    .button-group>div{height:40vh;}
    .section-2 .content{max-width:80%;}
    .section-5 .content{padding:0 10px;}
    .next-quiz-btn,.confirm-btn{width:164px;height:40px;}
    #voice{
        width:120px;
        height:120px;
    }
}