:root{--DesignWidth:750;--PageMaxWidth:750px}html{font-size:calc(100vw / var(--DesignWidth))}@media screen and (min-width: 750px){html{font-size:calc(var(--PageMaxWidth) / var(--DesignWidth))}}*{padding:0;margin:0;box-sizing:border-box}img{display:block}.app-download{display:none}.main{width:100%;height:100vh;position:relative;background-color:#2179f5}.main .page{width:100%;height:100%;position:relative}.main .page1{background:url(img/bg.jpg) no-repeat top center/100% auto}.main .page1 .img1{position:absolute;top:1089rem;left:102rem;width:250rem}.main .page1 .img2{position:absolute;top:1089rem;right:102rem;width:250rem}.main .page1 .img3{position:absolute;top:140rem;left:33rem;width:683rem}.main .page1 .recordButton{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:250rem;font-size:30rem;text-align:center;color:#f7540a;text-decoration:underline}.main .page2{background:url(img/bg2.jpg) no-repeat top center/100% #217af5;display:none}.main .page2 .pageBox{width:100%;height:100%;position:relative;flex-direction:column;padding:10vh 0 0;align-items:center}.main .page2 .pageBox .qaBox{position:relative;width:100%;font-size:34rem;background:url(img/2_3.png) no-repeat top center/100%;aspect-ratio:750 / 937;padding:5.86% 67rem 9.5% 71rem;overflow:hidden}.main .page2 .pageBox .qaBox .qaContent{width:100%;height:100%;overflow-y:auto;padding:0 30rem}.main .page2 .pageBox .qaBox .qaContent .partTop{position:relative;margin-bottom:33rem}.main .page2 .pageBox .qaBox .qaContent .partTop .itemNumber{width:153rem;height:128rem;background-color:#3a95f3;border-radius:20rem;line-height:53rem;text-align:center;font-weight:bold;color:#ffffff}.main .page2 .pageBox .qaBox .qaContent .partTop .itemTitle{width:100%;background-color:#ebf4fe;border-radius:20rem;padding:20rem 34rem;color:#208cf2;font-weight:bold;margin-top:-75rem}.main .page2 .pageBox .qaBox .qaContent .partList{width:100%;display:flex;flex-direction:column;gap:7rem;margin-bottom:33rem}.main .page2 .pageBox .qaBox .qaContent .partList .item{display:flex;border-radius:35.83rem;padding:22rem 35rem;color:#0f0f0f;font-size:30rem;align-items:baseline;line-height:42rem}.main .page2 .pageBox .qaBox .qaContent .partList .item .option{flex-shrink:0}.main .page2 .pageBox .qaBox .qaContent .partList .item .itemContent{flex:1;word-break:break-all}.main .page2 .pageBox .qaBox .qaContent .partList .item.right{background-color:#70d455}.main .page2 .pageBox .qaBox .qaContent .partList .item.wrong{background-color:#f15f5f}.main .page2 .pageBox .qaBox .qaContent .partAnalysis{width:100%;background-color:rgba(58,149,243,0.1);border-radius:20rem;color:#0f0f0f;font-size:24rem;padding:30rem;line-height:42rem}.main .page2 .pageBox .buttonBox{width:100%;gap:49rem;margin-top:57rem}.main .page2 .pageBox .buttonBox .button{width:250rem}.main .page3{position:fixed;top:0;left:50%;transform:translateX(-50%);background:url(img/bg2.jpg) no-repeat top center/100% auto;padding:10vh 0 0 0;z-index:19}.main .page3 .pageBox{display:flex;flex-direction:column;background:url(img/2_3.png) no-repeat top center/100%;aspect-ratio:750 / 937;padding:5.86% 67rem 9.5% 71rem}.main .page3 .pageBox .title{font-size:48rem;color:#f7540a;text-align:center;font-weight:bold;margin-bottom:20rem}.main .page3 .pageBox .list{flex:1;overflow-y:auto;padding:0 10px;display:flex;flex-direction:column;row-gap:20px}.main .page3 .pageBox .list .tableTitle,.main .page3 .pageBox .list .table{display:flex;align-items:center;font-size:24rem;text-align:center;color:#0f0f0f;justify-content:space-between}.main .page3 .pageBox .list .tableTitle .tableItem,.main .page3 .pageBox .list .table .tableItem{width:33%}.main .page3 .pageBox .list .tableItemBtn{width:100px;padding:5px 10px;border-radius:5px;background-color:#3a95f3;color:#ffffff}.main .page3 .pageBox .list .tableItemBtn.cur{background-color:#70d455}.main .page3 .pageBox .list .tableItemBtn.disabled{background-color:#cccccc}.main .page3 .pageBox .list .listTips{font-size:24rem;color:#0f0f0f;text-align:center;margin-top:10rem}.main .page3 .pageBox .tips{font-size:24rem;color:#0f0f0f;text-align:center;margin-top:10rem}.main .page3 .returnBtn{margin:57rem auto 0;background-color:#fbf477;color:#f7540a;font-size:32rem;text-align:center;line-height:68rem;width:238rem;border-radius:20rem}.main .page3 .userInfo{position:absolute;top:25rem;right:20rem;width:310rem;display:flex;align-items:center}.main .page3 .userInfo .userAvatar{width:80rem;height:80rem;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid #ffffff}.main .page3 .userInfo .userAvatar img{width:100%;height:100%;object-fit:cover}.main .page3 .userInfo .userName{font-size:30rem;color:#0f0f0f;margin-left:10rem;flex:1}.dialog{position:fixed;top:0;left:50%;width:100.00vw;height:100vh;z-index:9;background-color:rgba(0,0,0,0.7);transform:translateX(-50%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.dialog .box{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:fit-content}.dialog .box .bg{width:750rem}.dialog .box .img4{width:637rem}.dialog .box .close{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:246rem;height:78rem}.dialog .box .buttonBox{display:flex;align-items:center;justify-content:center;gap:60rem;margin-top:60rem}.dialog .box .buttonBox .button{width:250rem}.dialog .box .userInfo{width:100%;display:flex;align-items:center;margin-bottom:20px;justify-content:center}.dialog .box .userInfo .userAvatar{width:80rem;height:80rem;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid #ffffff}.dialog .box .userInfo .userAvatar img{width:100%;height:100%;object-fit:cover}.dialog .box .userInfo .userName{font-size:30rem;color:#0f0f0f;margin-left:10rem;color:#ffffff;word-break:break-all}.ruleDialog{display:none}.drawDialog .container{position:relative}.drawDialog .container .bg{width:398rem}.drawDialog .container .contant{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding-bottom:25%}.drawDialog .container .contant .word{font-size:41rem;color:#f7540a;font-weight:bold;text-align:center;line-height:76rem}.drawDialog .container .contant .drawWord1{font-size:41rem;color:#f7540a;line-height:76rem}.drawDialog .container .contant .drawWord2{font-size:48rem;font-weight:bold;color:#e41714}.drawDialog .box .buttonBox{flex-direction:column;gap:30rem}@keyframes bounceIn{from,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}20%{transform:scale3d(1.1, 1.1, 1.1)}40%{transform:scale3d(0.9, 0.9, 0.9)}60%{opacity:1;transform:scale3d(1.03, 1.03, 1.03)}80%{transform:scale3d(0.97, 0.97, 0.97)}to{opacity:1;transform:scale3d(1, 1, 1)}}.bounceIn{animation:bounceIn 1.5s .3s both}@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%, 0, 0)}to{opacity:1;transform:none}}.fadeInLeft{animation:fadeInLeft 1s 1s both}@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%, 0, 0)}to{opacity:1;transform:none}}.fadeInRight{animation:fadeInRight 1s 1.3s both}
