body{ position: relative; background: url(../images/bg2.png) no-repeat top center #20A2FF; background-size: 100% auto; }
.banner{line-height: 0; position: relative; }
.banner img{width: 100%;}
.banner .time{position: absolute; width: 70%; left: 15%; bottom: 20%; font-size: 12px; color: #fff; height: 25px; line-height: 25px; text-align: center; background: linear-gradient( 90deg, rgba(16,37,40,0) 0%, rgba(38,74,103,0.64) 48%, rgba(17,47,52,0) 100%); }
.content{position: relative; z-index: 1; }
.fbg{position: absolute; width: 100%; left: 0; bottom: -10px; }
.rbg{position: absolute; right: 0; top: 46%; width: 50%; }
.lbg{position: absolute; left: 0; top: 20%; width: 30%; }
.fixbtn{position: fixed; z-index: 2; padding: 6px 0 0 7px; font-size: 10px; color:#fff; right: 0; top: 5%; line-height: 12px;width: 35px;height: 36px;background: rgba(7,57,107,0.6);border-radius: 6px 0px 0px 6px; }
.fixbtn a{color: #fff;}
.title{ padding: 0 10%; display: flex; align-items: center; justify-content: space-between; }
.title .item{width: 45%;}
.title .item img{width: 100%;}
.index_section1{ width: 95%; padding: 26px 30px 35px; margin: 10px 2.5%; background: url(../images/bg3.png) no-repeat center; background-size: 100% 100%; }
.index_section1 h4{ margin-top: 0; margin-bottom: 18px; display: flex; align-items: center; justify-content: flex-end; font-size: 12px; color: #07396B; font-weight: bold; }
.index_section1 h4 span{height: 22px; margin-left: 5px; line-height: 22px; padding: 0 5px; color: #fff; background: #07396B;border-radius: 4px 4px 4px 4px;}
.index_section1 p{font-size: 10px; margin-bottom: 12px; margin-top: 6px;line-height: 12px; color: #015BB2; text-align: center; }
.index_section1 button{ display: block; width: 75%; margin: 4px auto 0; border: none; padding: 0; background: none; }
.index_section1 button img{width: 100%;}
.index_section1 .list{display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-evenly; gap: 10px;}
.index_section1 .list .item{position: relative;  margin: 0 0 15px;box-sizing: border-box;}
.index_section1 .list .item .img{display: flex; align-items: center; justify-content: center; width: 82px;height: 82px;background: #C7DAED;border-radius: 9px 9px 9px 9px;border: 2px solid #FFFFFF;}
.index_section1 .list .item.on .img{background: #AFD7FF;border: 2px solid #0689F4;}
.index_section1 .list .item img{max-width: 90%; max-height: 90%; }
.index_section1 .list .item .tag{height: 20px; left: 0; top: 0; display: flex; align-items: center; justify-content: center; padding: 0 6px 2px; line-height: 20px; background: #FFFFFF;border-radius: 6px 0px 9px 0px;position: absolute; font-size: 10px; color: #07396B; font-weight: bold; }
.index_section1 .list .item .tag img{width: 10px; height: 10px; }
.index_section1 .list .item p{ line-height: 12px; margin-top: 4px; font-size: 10px; margin-bottom: 0; color: rgba(7, 57, 107, 0.8);width: 82px}
.index_section1 .list .item.on .tag{ color: #fff; background: linear-gradient( 130deg, #0689F4 0%, #30BAFF 100%);}
.index_section1 .list .item.on p{color: #07396B;}
.index_section1 .finished{position: absolute; z-index: 2; width: 82px;height: 82px; left: 0; top: 0; display: flex; align-items: center; flex-direction: column; justify-content: center; background: rgba(7,57,107,0.7);border-radius: 9px 9px 9px 9px; }
.index_section1 .finished img{width: 20px; height: 20px;}
.index_section1 .finished p{margin-bottom: 0; margin-top: 4px !important; color: #fff !important; }
.index_section2{ width: 92%; padding: 28px 0px 25px 5px; margin: 10px 2.5%; background: url(../images/bg4.png) no-repeat center; background-size: 100% 100%; }
.index_section2 h4{ margin-top: 0; padding-right: 16px; margin-bottom: 18px; display: flex; align-items: center; justify-content: flex-end; font-size: 12px; color: #07396B; font-weight: bold; }
.index_section2 h4 img{width: 16px; height: 16px; margin-left: 2px; }
.index_section2 h5{ position: relative; text-align: center; margin-bottom: 8px; font-size: 12px; line-height: 14px; color: rgba(7, 57, 107, 0.4); }
.index_section2 .has-before::before{position: absolute; bottom: 5px; content: ''; width: 204px; left: 50%; margin-left: -102px; height: 1px; background: rgba(7, 57, 107, 0.4); }
.index_section2 .text{padding: 7px 17px; width: calc(100% - 32px); line-height: 18px; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; background: rgba(255,110,31,0.1);border-radius: 5px 5px 5px 5px; font-size: 12px; color: #FF6E1F; }
.index_section2 .btns{ margin-top: 6px; padding: 0 25px; display: flex; align-items: center; justify-content: space-between;}
.index_section2 .btns button{border: none; padding: 0; background: none; width: 32%; }
.index_section2 .btns button img{width: 100%;}
.index_section2 .showbox{ padding: 25px 35px 46px; position: relative; background: url(../images/bg.png) no-repeat center; background-size: 100% 100%; }
.index_section2 .showbox h3{ font-size: 10px; bottom: 21px; left: 0; margin-top: 0; margin-bottom: 0; color: #fff;  position: absolute; width: 100%; display: flex; align-items: center; justify-content: center;  }
.index_section2 .showbox h3 span{font-size: 12px;color: #42F9FF; margin: 0 5px; }
.index_section2 .showbox h3 button{ border: none; color: #fff; font-size: 10px; width: 66px;height: 18px; padding: 0 8px; background: rgba(132,191,255,0.26);border-radius: 28px 28px 28px 28px;display: flex; align-items: center; justify-content: center;}
.index_section2 .showbox h3 button img{width: 12px;height: 12px;}
.index_section2 .showbox ul li{width: 70px; margin-right: 10px; }
.index_section2 .showbox .img{width: 70px;height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 16px 16px 16px 16px;border: 1px solid rgba(255,255,255,0.1);}
.index_section2 .showbox .img img{max-width: 90%; max-height: 90%; }
.index_section2 .showbox p{margin-top: 6px; font-size: 10px; line-height: 12px; text-align: center; color: rgba(255,255,255,0.8); }
.index_section2 .showbox .slideBox{overflow: hidden;}
.purple{background: url(../images/bg6.png) no-repeat center; background-size: 100% 100%;}
.purple h4{color: #351088;}
.purple h4 span{background: #510EEB;}
.purple p{color: rgba(113, 68, 215, 0.8);}
.index_section4{width: 92%; padding: 68px 12px 25px 18px; margin: 10px 2.5%; background: url(../images/bg7.png) no-repeat center; background-size: 100% 100%; }
.index_section4 .item{background: #FFFFFF; margin-bottom: 8px; border-radius: 8px 8px 8px 8px;border: 1px solid #E9EEF5; padding: 5px 10px 6px; }
.index_section4 .item h4{ margin-bottom: 8px; font-size: 14px; color: #07396B; display: flex; align-items: center; }
.index_section4 .item h4 span{color: #510EEB;}
.index_section4 .item h4 >img{width: 32px; height: 32px; margin-right: 4px; }
.index_section4 .item h4 button{margin-left: auto; width: 62px; height: 26px; line-height: 0; border: none; padding: 0; background: none; }
.index_section4 .item h4 button img{width: 100%;}
.index_section4 .item p{font-size: 12px; margin-bottom: 8px; line-height: 16px; color: #07396B; display: flex; align-items: center; }
.index_section4 .item p img{width: 16px; height: 16px; margin-right: 4px; }
.blue{background: url(../images/bg5.png) no-repeat center; background-size: 100% 100%; }
.blue .text{color: #0094EF;background: rgba(0,148,239,0.1);}
.shadow{position: fixed;width: 100%; height: 100%; left: 0; top: 0; z-index: 9; background: rgba(0,0,0,0.6);}
.rulebox{position: fixed; z-index: 10; border-radius: 20px 20px 0px 0px;background: linear-gradient( 180deg, #E8F5FF 0%, #FFFFFF 100%), #FFFFFF; overflow-y: scroll;  width: 100%; height: 85%; left: 0; bottom: 0; }
.rulebox header{padding: 24px 0 20px; font-size: 18px; font-weight: bold; color: #07396B; text-align: center;  }
.rulebox article{padding: 0 20px 20px;}
.rulebox article h4{font-size: 16px; margin-bottom: 10px; line-height: 24px; color: #07396B; font-weight: bold; }
.rulebox article h5{font-size: 13px; font-weight: bold; line-height: 24px; color: #07396B; }
.rulebox article p{font-size: 13px; line-height: 24px; color: rgba(7, 57, 107, 0.80); }
.rulebox article p b{color: #07396B;}
.redbox .beforeBox{position: fixed; z-index: 10; width: 75%; left: 12.5%; top: 20%; }
.redbox .beforeBox img,.redbox .afterBox img{width: 100%;}
.redbox .afterBox{position: fixed; z-index: 10; width: 60%; left: 20%; top: 20%;}
.redbox .afterBox h3{position: absolute; width: 100%; text-align: center; left: 0; top: 20%; font-size: 22px; color: #711F05; }
.redbox .afterBox p{position: absolute; width: 100%; text-align: center; left: 0; top: 29%; font-size: 10px; color: rgba(113, 31, 5, 0.3); }
.redbox .afterBox button{width: 76%; position: absolute; left: 12%; top: 65%; line-height: 0; border: none; padding: 0; background: none; }
.redbox .afterBox button img{width: 100%;}
.redbox .closebtn{margin: 24px auto 0; width: 32px; height: 32px; background: url(../images/close2.png) no-repeat center; background-size: 100% 100%;}
.awardsbox{position: fixed;border-radius: 20px 20px 0px 0px; z-index: 10; background: linear-gradient( 180deg, #E8F5FF 0%, #FFFFFF 100%), #FFFFFF; width: 100%; height: 500px; left: 0; bottom: 0; }
.awardsbox header{text-align: center;}
.awardsbox header img{width: 47%;}
.awardsbox .txt{width: calc(100% - 40px); color: #07396B; text-align: center; font-size: 14px; height: 30px; line-height: 30px;  border-radius: 6px 6px 6px 6px; margin: 16px auto; background: #D7EBFF; }
.awardsbox .tit{ font-size: 12px; color: rgba(7, 57, 107, 0.6); display: flex; align-items: center; padding: 0 20px; }
.awardsbox .tit span{margin-left: auto;}
.awardsbox ul{list-style: none; padding: 0 20px; margin: 0 auto;height: 365px; overflow-y: scroll; }
.awardsbox ul li{padding: 14px 0;border-bottom: 1px solid rgba(7,57,107,0.06); font-size: 13px; color: #07396B; display: flex;align-items: center;  }
.awardsbox ul li span{margin-left: auto; font-weight: bold; color: #0585F1; }
.congratulation{width: 80%; position: fixed; z-index: 10; left: 10%; top: 20%; }
.congratulation .bg{width: 100%;}
.congratulation header{text-align: center;}
.congratulation header img{width: 60%;}
.congratulation h4{font-size: 12px; font-weight: 400; margin-bottom: 0; margin-top: 0; line-height: 14px; color: #07396B; text-align: center; }
.congratulation .box{position: absolute; padding-top: 10px; width: 100%; height: 100%; left: 0; top: 0; }
.congratulation button{ display: block; width: 60%; margin: 12px auto 0; border: none; padding: 0; background: none; }
.congratulation button img{width: 100%;}
.congratulation .list{ padding: 0 10%; overflow-y: scroll; margin-top: 16px; height: 62%; display: flex; flex-wrap: wrap; justify-content: space-evenly;align-content:center }
.congratulation .list .item{width: 75px; margin-bottom: 10px; }
.congratulation .list .item .img{width: 75px; height: 75px;background: rgba(199,218,237,0.4);border-radius: 8px 8px 8px 8px;border: 2px solid #FFFFFF; display: flex; align-items: center; justify-content: center; }
.congratulation .list .item img{max-width: 90%; max-height: 90%; }
.congratulation .list .item p{line-height: 12px; margin-top: 4px; text-align: center; margin-bottom: 0; height: 24px; font-size: 10px; color: #07396B;  }
.congratulation .one{    text-align: center;
    padding-top: 12px;
    height: 59%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: nowrap;
}
.congratulation .one .img{margin-bottom: 10px; margin-top: 12px; }
.congratulation .one .img img{width: 34%;}
.congratulation .one p{line-height: 12px; margin-top: 4px; text-align: center; margin-bottom: 0; height: 24px; font-size: 10px; color: #07396B;}
[v-cloak] {display: none;}