header{
    height: var(--header-height);
    background-color: #fff;
    position: sticky;
    width: 100%;
    top: 0;
    z-index: 99999;
    padding: 0 10px;
    box-shadow: 0px 1px 4px rgb(226, 226, 226);
}

header .box{
    height: 100%;
    
}
header .box .navBox{
    display: flex;
    align-items: center;
    height: 100%;
}
header .box .navBox a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 100%;
    box-sizing: border-box;
    transition: all 0.2s;
}
header .box .navBox .avatar{
    display: none;
    margin-bottom: 20px;
}
header .box .navBox .avatar img{
    width: 80px;
    height: 80px;
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 10px;
}
header .box .navBox .avatar .outLogin{
    font-size: 14px;

}
header .box .navBox a img{
    margin-right: 5px;
}

header .box .navBox a:hover{
    border-bottom: 2px solid #FF6400;
}
header .box .mobMenuBtn{
    display: none;
}
header .box .mobMenuBtn .icon{
    font-size: 28px;
}
header .box .mobMenuBtn #closeBtn{
    display: none;
}
header .box .navBox .downMenu .pcAvatar{
    width: 40px;
    height: 40px;
    border-radius: 50px;
    object-fit: cover;
    overflow: hidden;
    border: 1px solid rgb(197, 197, 197);
}
header .box .navBox .downMenu{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 100%;
    box-sizing: border-box;
    transition: all 0.2s;
}
header .box .navBox .downMenu:hover .downMenuCard{
    visibility: visible;
    opacity: 1;
    top: 100%;
}
header .box .navBox .downMenu .downMenuCard{
    position: absolute;
    top: 130%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background-color: white;
    border: 1px solid rgba(197, 197, 197, 0.212);
    border-top: 2px solid #FF6400;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s;
}
header .box .navBox .downMenu .icon{
    margin-right: 5px;
}
header .box .navBox .downMenu .downMenuCard li a{
    padding: 10px;
        justify-content: flex-start;
}

@media screen and (max-width:700px) {
    header{
        padding: 0 10px;
    }
    header .box .navBox{
        visibility:hidden;
        position: fixed;
        width: 70%;
        left: -100%;
        top: 0;
        flex-direction: column;
        background-color: white;
        gap: 20px;
        padding: 20px 0;
        transition: all 0.5s;
        box-shadow: 1px 1px 6px rgb(216, 216, 216);
    }
    header .box .navBox .avatar{
        display: flex;
        flex-direction: column;
    }
    header .box .navBox a{
        height: auto;
    }
    header .box .navBox a:hover{
        border-bottom:none;
    }
    header .box .mobMenuBtn{
        display: block;
    }
    header .box .navBox .downMenu{
        display: none !important;
    }
}














.message-container {

    position: fixed;

    top: 100px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 9999999999;

}



.message {

    background-color: #fff;

    border: 1px solid #ebeef5;

    border-radius: 4px;

    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    padding: 15px 15px 15px 20px;

    margin-bottom: 10px;

    min-width: 300px;

    display: flex;

    align-items: center;

    opacity: 0;

    transition: opacity 0.3s;

    font-family: 'iconfont';

}



.message.show {

    opacity: 1;

}



.message.success {

    color: #67c23a;

}

.message.success::before{

    content: "\e66e";

    margin-right: 10px;

}



.message.error {

    color: #ff3b3b;

}

.message.error::before{

    content: "\e66a";

    margin-right: 10px;

}



.message.warning {

    color: #f5a52e;

}

.message.warning::before{

    content: "\e63c";

    margin-right: 10px;

}



.message.info {

    color: #909399;

}





















.loginBox .mask{

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 99999;

    background-color: rgba(0, 0, 0, 0.6);

    display: none;

}

.loginBox{

    display: inline;

}

.loginBox .PopBox{

    position: fixed;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    z-index: 9999999;

    display: none;

}

.loginBox .PopBox .content{

    width: 800px;

    height: 500px;

    background-color: white;

    border-radius: 10px;

    transform: scale(0.4);

    transition: all 0.5s;

    overflow: hidden;

}

.loginBox .PopBox .content .box{

    width: 100%;

    height: 100%;

    display: flex;

}

.loginBox .PopBox .content .box .bc{

    width: 60%;

    height: 100%;

    object-fit: cover;

}

.loginBox .PopBox .content .closeBtn{

    position: fixed;

    right: 10px;

    font-size: 18px;

    top: 10px;

    z-index: 2;

    padding: 10px;

    transition: all 0.6s;

}

.loginBox .PopBox .content .right{

    width: 40%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}

.loginBox .PopBox .content .right .tabBox{

    width: 100%;

    display: flex;

    justify-content: space-evenly;

    margin: 30px 0;

}

.loginBox .PopBox .content .right .tabBox button{

    box-sizing: border-box;

    padding: 5px 0;

}

.loginBox .PopBox .content .right .tabBox button:hover{

    color:#0066CC;

}

.loginBox .PopBox .content .right .tabBox .select{

    border-bottom: 2px solid #0066CC;

}

.loginBox .PopBox .content .right .accountLogin{

    width: 100%;
    display: none;
    height: 250px;

    text-align: center;

}

.loginBox .PopBox .content .right .codeLogin{

    height: 250px;


    text-align: center;

}
.loginBox .PopBox .content .right .scancodeBox{

    height: 250px;

        width: 70%;

    text-align: center;

}
.loginBox .PopBox .content .right .scancodeBox .imgbox img{
    width: 100%;
}
.loginBox .PopBox .content .right .scancodeBox .tip{
    margin-top: 10px;
    font-size: 14px;

}
.loginBox .PopBox .content .right .scancodeBox .imgbox{
    position: relative;
    width: 220px;
    height: 220px;
}
.loginBox .PopBox .content .right .scancodeBox .imgbox .expire{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    background-color: #ffffffe8;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.loginBox .PopBox .content .right .scancodeBox .imgbox .expire .tip{
    color: red;
    font-size: 16px;
    margin-bottom: 20px;
}
.loginBox .PopBox .content .right .scancodeBox .imgbox .expire button{
    border: 1px solid #d3d3d3;
    padding: 3px 20px;
    border-radius: 50px;
}
.loginBox .PopBox .content .right .scancodeBox .imgbox .expire button:hover{
    background-color: var(--color-Primary);
    color: white;
}
.loginBox .PopBox .content .right .scancodeBox .imgbox .expire button .icon{
    margin-right: 5px;
}

.loginBox .PopBox .content .right .codeLogin .code{

    width: 80%;

    margin: 10px auto;

}



.loginBox .PopBox .content .right form{

    width: 80%;

    display: flex;

    flex-direction: column;

    margin: auto;

    gap: 15px;

    

}

.loginBox .PopBox .content .right form .inputBox{

    width: 100%;

    border: 1px solid #bbbbbb;

    border-radius: 50px;

    padding: 8px;

    display: flex;

    align-items: center;

    gap: 10px;

}

.loginBox .PopBox .content .right form .inputBox .icon{

    color: #808080;

}

.loginBox .PopBox .content .right form .inputBox input{

    font-size: 16px;

    width: 100%;

}

.loginBox .PopBox .content .right form .submit{

    background-color: var(--color-Primary);

    width: 100%;

    color: white;

    padding: 10px 0;

    border-radius: 50px;

    margin-top: 40px;

}

.loginBox .PopBox .content .right form .submit:hover{

    background-color: #0754b1;

}

.loginBox .PopBox .content .right form .agreement{

    font-size: 14px;

    text-align: center;

}

.loginBox .PopBox .content .right form .agreement a{

    color: #3280FC;

}

.loginBox .PopBox .content .right .registerBox{

    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.loginBox .PopBox .content .right .registerBox button{
    font-size: 14px;
}
.loginBox .PopBox .content .right .register{

    font-size: 14px;

}



.loginBox .PopBox .content .closeBtn:hover{

    transform: rotate(90deg);

}

.loginBox .PopBox .content .closeBtn .icon{

    color: rgb(56, 56, 56);

    font-size: 22px;

}





@media screen and (max-width:700px){

    .loginBox .PopBox .content{

        width: 90vw;

        padding: 50px 0;

        height: auto;

    }

    .loginBox .PopBox .content .box .bc{

        display: none;

    }

    .loginBox .PopBox .content .right{

        width: 100%;

    }

}







.frameBox{

    width: 100%;

    padding:0;

}

.frameBox .frame{

    width: 100%;

    display: flex;

}

.frameBox .menu{

    display: inline-block;

    z-index: 9999;

    position:sticky;

    top: var(--header-height);

    left: 0px;

    width: var(--menu-width);

    background-color: #fff;

    height: calc(100vh - var(--header-height)) ;

    flex-shrink: 0;

    transition: all 0.5s;

}

.frameBox .menu .avatarBox{

    display: flex;

    align-items: center;

    flex-direction: column;

    gap: 10px;

    padding: 20px 0;

}

.frameBox .menu .avatarBox .avatar{

    width: 60px;

    height: 60px;

    border-radius: 50px;

    overflow: hidden;

}

.frameBox .menu .avatarBox .outLogin{

    font-size: 14px;

    color: #b7b7b7;

}

.frameBox .menu .avatarBox .outLogin:hover{

    color: var(--color-Primary);

}

.frameBox .menu .avatarBox .btnlist{

    display: flex;

}

.frameBox .menu .avatarBox .btnlist button{

    padding: 10px;

}



.frameBox .menu .navList{

    margin-top: 20px;

    padding:20px 40px;

    display: flex;

    flex-direction: column;

    gap: 20px;

    position: relative;

}

.frameBox .menu .navList .icon{

    color: #8b8b8b;

    font-size: 18px;

}

.frameBox .menu .navList a{

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 10px;

}

.frameBox .menu .navList a:hover .icon{

    color: #FF6400 !important;

}

.frameBox .menu .navList a:hover .name{

    color: #FF6400 ;

}

.frameBox .menu .navList .select .icon{

    color: #FF6400;

}

.frameBox .menu .navList .select .name{

    color:#FF6400;

}

.frameBox .menu .expand a{

    justify-content: center;

    position: relative;

}



.frameBox .menu .navList .name{

    white-space: nowrap;

    color: #8b8b8b;

}

.frameBox .menu .expand{

    padding: 20px 0;

}

.frameBox .menu .expand .name{

    position: absolute;

    background-color:rgba(145, 145, 145, 0.8);

    padding: 5px 10px;

    border-radius: 3px;

    z-index: 4;

    top: 0;

    left: 40px;

    color: white !important;

    font-size: 14px;

    visibility:hidden;

    opacity: 0;

    

}

.frameBox .menu .expand a{

    width: 100%;

}

.frameBox .menu .expand a:hover .name{

    visibility:visible;

    left: 80px;

    transition: all 0.3s;

    opacity: 1;

}



.frameBox .menu .navList a:hover .icon{

    color: black;

}

.frameBox .menu .navList .menuButton{

    position: absolute;

    right: -25px;

    top: -40px;

    z-index: 3;

    width: 50px;

    height: 50px;

    border-radius: 100px;

    background-color: #fff;

    box-shadow: 1px 1px 7px #c5c5c5;

    transition: all 0.3s ;

}

.frameBox .menu .navList .menuButton .icon{

    font-size: 22px;

    font-weight: bold;

}



.frameBox .rightContent{

    width: calc( 100% - var(--menu-width));

    /* margin-left: var(--menu-width); */

    padding-bottom: 20px;

    box-sizing: border-box;

    transition: all 0.5s; 

    position: relative;

    z-index: 4;

}

@media screen and (max-width:700px) {

    .frameBox{

        padding: 0;

    }

    .frameBox .menu{

        display: none;

        position: fixed;

        height: auto;

        top: auto;

        bottom: 0px;

        width: 100%;

        box-shadow: 0 -1px 3px #cfcfcf;

        border-radius: 10px 10px 0 0;

    }

    .frameBox .menu .avatarBox{

        display: none;

    }

    .frameBox .menu .menuButton{

        display: none;

    }

    .frameBox .menu .navList{

        gap: 15px;

        align-items: center;

    }

    .frameBox .menu .navList a{

        min-width: 120px;

    }

    .frameBox .rightContent{

        width: 100%;

        padding-bottom: 100px;

    }

    .frameBox .navList{

        position: relative;

    }

    .frameBox .navList .mobClose{

        position: absolute;

        right: 10px;

        top: 0px;

        z-index: 2;

    }

    .frameBox .navList .mobClose .icon{

        font-size: 28px;

    }



}











section .box{

    background-color: white;

    margin: 10px ;

    border-radius: 6px;

    padding: 20px;

}

section h4.title{

    font-size: 18px;

    font-weight: bold;

    padding-bottom: 5px;

    border-bottom: 1px solid rgb(235, 235, 235);

}



@media screen and (max-width:700px) {

    section .box{

        padding: 10px;

    }

}







.module1 .swiper{

    height: auto;

}

.module1 .swiper .swiper-wrapper{

    height: auto;

}

.module1 .swiper .swiper-slide{

    height: auto;

}

.module1 .swiper .swiper-slide img{

    width: 100%;

}

.module1 .swiper .swiper-button-prev{

    left: 50px;

}

.module1 .swiper .swiper-button-next{

    right: 50px;

}

.module1 .swiper .swiper-button-next:after, .swiper-button-prev:after{

    font-size: 24px;

    color: white;

}

















.module2 .box .top{

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.module2 .box .top .left{

    display: flex;

    align-items: center;

    gap: 20px;

}



.module2 .box .top .left .select{

    background-color: #979DB5;

    padding: 3px 10px;

    border-radius: 30px;

}

.module2 .box .top .left .select a{

    color: white;

}

.module2 .box .top .right{

    display: flex;

    align-items: center;

    gap: 20px;

}

.module2 .box .top .right .total{

    font-size: 14px;

}

.module2 .box .top .right .searchBox{

    position: relative;

}

.module2 .box .top .right .inputBox{

    border: 1px solid #979DB5;

    border-radius: 10px;

    overflow: hidden;

    

}



.module2 .box .top .right .inputBox .input{

    font-size: 15px;

    height: 30px;

    line-height: 30px;

    padding-left: 5px;

}

.module2 .box .top .right .inputBox .submit{

    background-color: #979DB5;

    height: 32px;

    padding: 0 10px;

}

.module2 .box .top .right .inputBox .submit .icon{

    color: white;

}

.module2 .box .top .right .listBox{

    position: absolute;

    width: 100%;

    top: 110%;

    z-index: 97;

    padding: 10px;

    border-radius: 0px 0px 5px 5px;

    background-color: white;

    box-shadow: 1px 1px 5px rgb(219, 219, 219);

    border: 1px solid rgb(216, 216, 216);

    display: none;

    max-height: 200px;

    overflow: auto;

}

.module2 .box .top .right .listBox li{

    margin-bottom: 10px;

}

.module2 .box .top .right .listBox li a{

    font-size: 14px;

    color: rgb(92, 92, 92);

}

.module2 .box .top .right .listBox li a:hover{

    color: var(--color-Primary);

}

.module2 .box .cardBox{

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 15px;

}

.module2 .box .cardBox{

    margin: 20px 0;

}

.module2 .box .cardBox .card{

    padding: 10px;

    border-radius: 15px;

    box-shadow: 1px 1px 5px rgb(231, 231, 231);

    transition: all 0.5s;

}

.module2 .box .cardBox .card:hover{

    box-shadow: 1px 1px 8px rgb(209, 209, 209);

}

.module2 .box .cardBox .card .cardtop .vip{

    font-size: 12px;

    line-height: 18px;

    border-radius: 17px;

    padding: 1px 7px 0px 7px;

    border: solid 1px #ff9753;

    color: #ff9753;

    background: #ffe9d5;

}

.module2 .box .cardBox .card .cardtop .icon{

    cursor: pointer;

    position: relative;

}

.module2 .box .cardBox .card .cardtop .icon::after{

    content: '收藏';

    position: absolute;

    white-space: nowrap;

    font-size: 14px;

    background-color:#ff7676;

    padding: 2px 5px;

    border-radius: 3px;

    color: white;

    left: -45px;

    top: -5px;

    visibility: hidden;

    opacity: 0;

    transition: all 0.3s;

}

.module2 .box .cardBox .card .cardtop .icon:hover::after{

    visibility:visible;

    opacity: 1;

}

.module2 .box .cardBox .card .cardtop .collect{

    color: red;

    

}

.module2 .box .cardBox .card .cardtop .collect::after{

    content: '取消收藏';

    background-color:#cccccc;

    left: -70px;

}

.module2 .box .cardBox .card .content{

    display: flex;

    align-items: center;

    margin-top: 20px;

    margin-bottom: 20px;

    gap: 20px;

}

.module2 .box .cardBox .card .content .imgBox{

    width: 80px;

    flex-shrink: 0;

}

.module2 .box .cardBox .card .content .imgBox img{

    width: 100%;

}

.module2 .box .cardBox .card .content .contentRight h5{

    font-size: 18px;

}

.module2 .box .cardBox .card .content .contentRight p{

    font-size: 14px;

    line-height: 18px;

    height: 36px;

    color: #b3b3b3;

}





















@media screen and (max-width:1300px){

    .module2 .box .top{

        flex-direction: column-reverse;

        gap: 20px;

    }

    .module2 .box .cardBox{

        grid-template-columns: repeat(2, 1fr);

    }

    .module2 .box .cardBox .card{

        overflow: hidden;

    }

    .module2 .box .cardBox .card .content{

        flex-direction: column;

    }

    .module2 .box .cardBox .card .content .contentRight{

        width: 100%;

    }

    .module2 .box .cardBox .card .content .contentRight a{

        width: 100%;

        overflow: hidden;

    }

    .module2 .box .cardBox .card .content .contentRight h5{

        text-align: center;

    }

}























.pagination{

    display: flex;

    justify-content: center;

    position: relative;

    padding: 15px 0;

}

.pagination .left{

   position: absolute;

   left: 10px;

   top: 50%;

   transform: translateY(-50%);

   z-index: 2;

}



.pagination button{

    background-color: #6CB4FE;

    color: white;

    font-size: 14px;

    padding: 4px 10px;

    border-radius: 3px;

    transition: all 0.3s;

}

.pagination button:hover{

    background-color: #41a0ff;

}

.pagination select{

    width: 70px;

    border: none;

    padding: 3px;

    margin: 0 5px;

    border-radius: 5px;

    background-color: white;

    box-shadow: 1px 1px 3px #c3c3c3de;

}

.pagination input{

    width: 50px;

    border: 1px solid rgb(177, 177, 177);

    padding:0 3px;

    margin: 0 10px;

}





@media screen and (max-width:1200px){

    .pagination .left{

        display: none;

    }

}


















.module3{
    display: none;
}
.module3 .box h4{

    font-size: 18px;

    font-weight: bold;

    margin-bottom: 20px;

}

.module3 .box p{

    margin: 0;

    color: #808080;

    font-size: 14px;

    line-height: 24px;

}





footer{

    margin-bottom: 50px;

}

footer .box{

    background-color: white;

    margin: 10px ;

    border-radius: 10px;

    padding: 20px;

}



footer .box .content{

    display: grid;

    grid-template-columns: repeat(3,1fr);

    border-bottom: 1px solid rgb(230, 230, 230);

    padding-bottom: 15px;

    margin-bottom: 15px;

}

footer .box .content h4{

    font-size: black;

    font-size: 20px;

    margin-bottom: 15px;

}

footer .box .content .codeBox{

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

}

footer .box .content .codeBox img{

    max-width: 150px;

}



footer .box .content .urlBox .listBox{

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 10px;

}

footer .box .content .contact div{

    margin-bottom: 5px;

}

footer .box .content .contact div .icon{

    margin-right: 5px;

}

footer .box .copyright{

    text-align: center;

}



@media screen and (max-width:700px){

    footer .box .content{

        grid-template-columns: repeat(1, 1fr);

        justify-items: center;

        gap: 20px;

    }

    footer .box .content .urlBox {

        width: 100%;

        text-align: center;

    }

    footer .box .content .contact{

        width: 100%;

        text-align: center;

    }

}











.crumbs{

    padding: 10px;

}

.crumbs a{

    font-size: 14px;

}

.crumbs a::after{

    content: '/';

}

.crumbs a:last-child{

    color: var(--color-Primary);

}

.crumbs a:last-child::after{

    content: '';

}







.intervalBox{

    margin-bottom: 20px;

    display: flex;

    /* grid-template-columns: 40% 60%; */

}



@media screen and (max-width:1200px){

    .intervalBox{

        flex-direction: column;

    }

}









.module4{

    width: 40%;

    height: 750px;

}

.module4 .box{

    height: 100%;

    overflow: auto;

}

.module4 .left .title{

    display: flex;

    align-items: center;

    gap: 20px;

}

.module4 .left .title img{

    width: 60px;

}

.module4 .left .title h4{

    font-size: 18px;

    font-weight: bold;

}

.module4 .left form{

    margin: 20px 0;



}

.module4 .left form .inputBox{

    margin-bottom: 20px;

    display: flex;

    align-items: baseline;

}

.module4 .left form .slider{

    margin-top: 50px;

}

.module4 .left form .inputBox .right{

    width: 100%;

}

.module4 .left form .inputBox .right .tip{

    color: rgb(173, 173, 173);

    font-size: 14px;

    margin: 0;

}

.module4 .left form .inputBox input{

    border: 1px solid rgb(230, 230, 230);

    background-color: #f7f7f7;

    border-radius: 5px;

    padding:5px;

    width: 100%;

    font-size: 14px;

}

.module4 .left form .inputBox select{

    border: 1px solid rgb(230, 230, 230);

    background-color: #f7f7f7;

    border-radius: 5px;

    padding: 2px 5px;

    width: 100%;

}

.module4 .left form .inputBox i{

    color: red;

    margin-right: 5px;

}

.module4 .left form .inputBox .name{

    display: inline-block;

    flex-shrink: 0;

    margin-right: 10px;

    font-size: 16px;

}

.module4 .left form .inputBox .seg{

    margin: 0 3px;

}

.module4 .left form .inputBox .radioBox{

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}

.module4 .left form .inputBox .radioBox .radio-primary{

    display: flex;

    align-items: center;

    white-space: nowrap;

}

.module4 .left form .inputBox .radioBox .radio-primary input{

    margin: 0;

}

.module4 .left form .inputBox .radioBox .radio-primary label{

    margin: 0;

    padding: 0;

    margin-left: 5px;

    font-weight: 500;

}

.module4 .left form .inputFileBox{

    margin-bottom: 20px;

}

.module4 .left form .inputFileBox .btns{

    display: flex;

    align-items: center;

    gap: 20px;

}

.module4 .left form .inputFileBox .btns a{

    color: rgb(80, 80, 80);

    font-size: 14px;

}

.module4 .left form .inputFileBox .btns a:hover{

    color: var(--color-Primary);

}

.module4 .left form .inputFileBox button{

    position: relative;

    background-color: #0099CC;

    color: white;

    padding: 5px 15px;

    border-radius: 5px;

    cursor: pointer;

}

.module4 .left form .inputFileBox button input{

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

    border: 1px solid black;

    opacity: 0;

    cursor: pointer;

}

.module4 .left form .inputFileBox .tip{

    color: #a5a5a5;

    font-size: 14px;

    margin-top: 5px;

}

.module4 .left form .optionBox{

    margin-top: 40px;

    display: flex;

    align-items: center;

    gap: 30px;

}

.module4 .left form .optionBox img{

    display: inline-block;

    margin-bottom: 4px;

}

.module4 .left form .optionBox .vipBox{

    position: relative;

}

.module4 .left form .optionBox .vipBox .svg{

    position: absolute;

    right: -17px;

    top: -15px;

    width: 20px;

    z-index: 2;

}

.module4 .left form .optionBox label{

    font-weight: 500;

}

.module4 .left form .optionTip{

    margin-top: 10px;

    font-size: 18px;

    font-weight: bold;

}

.module4 .left form .previewBtn{
    background-color: var(--color-Primary2);
    padding: 10px 50px;

    color: white;

    border-radius: 5px;

    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.module4 .left form .previewBtn .icon{
    font-size: 20px;
}
.module4 .left form .previewBtn:hover{
     background-color: #ff6c00;
}
.module4 .left form .previewTip{
    font-size: 14px;
    color: red;
    margin: 10px 0;
}

.module4 .left form .submit{

    background-color: var(--color-Primary);

    padding: 10px 50px;

    color: white;

    border-radius: 5px;

    margin-top: 10px;

}

.module4 .left form .submit:hover{

    background-color: #074fa8;

}





@media screen and (max-width:700px){

    .module4{

        width: 100%;

        height: auto;

    }

}













.module5{

    width: 60%;

    height: 750px;

}

.module5 .box{

    background-color: transparent;

    margin: 10px;

    padding: 0;

    overflow: hidden;

    display: flex;

    flex-direction: column;

}

.module5 .box .table{

    display:flex;

    align-items:center;

    margin: 0;

    flex-shrink: 0;

}

.module5 .box .table li{

    padding: 0 30px;

    height: 40px;

    line-height: 40px;

    background-color: #E4E4E4;

    cursor: pointer;

    transition: all 0.3s;

}

.module5 .box .table li:hover{

    background-color: white;

}

.module5 .box .table .select{

    background-color: #fff;

}

.module5 .box .content{

    background-color: #fff;

    height: 710px;

    overflow: auto;

    padding: 10px;

    box-sizing: border-box;

}



@media screen and (max-width:700px){

    .module5{

        width: 100%;

        height: auto;

    }

    .module5 .box .table li{

        padding: 0 20px;

    }

}























.module6{

    margin-top: 30px;

}

.module6 .top{

    display: flex;

    align-items: center;

    gap: 50px;

}

.module6 .top h4{

    color: #003F94;

    font-weight: bold;

}

.module6 .top .refresh{

    background-color: #66CCCC;

    color: white;

    padding: 5px 10px;

    border-radius: 5px;

}

.module6 .top .refresh .icon{

    margin-right: 5px;

}

.module6 .top .inputBox .name{

    font-size: 18px;

    font-weight: bold;

}

.module6 .top .inputBox select{

    width: 250px;

    border: none;

    box-shadow: 0px 0px 5px #cbcbcb;

    padding: 3px 5px;

    border-radius: 5px;

}

.module6 .imgBox{

    margin-top: 20px;

    border: 1px solid rgb(202, 202, 202);

    border-radius: 10px;

    overflow: hidden;

}

.module6 .imgBox .operateBox{

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;

    height: 40px;

    padding: 0 20px;

    background-color: #F9F9F9;

}

.module6 .imgBox .content iframe{
    width: 100%;
    height: 100%;
}

.module6 .imgBox .content{

    text-align: center;

    background-color: #fff;

    min-height: 400px;

}

.module6 .imgBox button{

    position: relative;

    width: 40px;

    height: 40px;

}

.module6 .imgBox button:hover{

    color: var(--color-Primary);

}

.module6 .imgBox button::after{

    content: '';

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    top: 40px;

    white-space: nowrap;

    background-color: #c2c2c2;

    padding: 3px 5px;

    border-radius: 5px;

    font-size: 14px;

    color: white;

    visibility: hidden;

    opacity: 0;

    transition: all 0.3s;

}

.module6 .imgBox button:hover::after{

    visibility: inherit;

    opacity: 1;

}

.module6 .imgBox #fitScreenBtn::after{

    content: '适应';

}

.module6 .imgBox #fullScreenBtn::after{

    content: '全屏/退出全屏';

}

.module6 .imgBox #zoomInBtn::after{

    content: '放大';

}

.module6 .imgBox #zoomOutBtn::after{

    content: '缩小';

}

.module6 .imgBox #downloadBtn::after{

    content: '下载';

}





@media screen and (max-width:700px){

    .module6 .top{

        flex-direction: column;

        gap: 20px;

    }



}

















.module7 .cardBox{

    display: flex;

    margin-top: 20px;

    padding: 0 3%;

}

.module7 .cardBox .left{

    width: 300px;

    padding: 30px;

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.module7 .cardBox .left .avatarBox{

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 30px;



}

.module7 .cardBox .left .avatarBox img{

    width: 80px;

    height: 80px;

    border-radius: 50%;

    flex-shrink: 0;

}



.module7 .cardBox .left .avatarBox .right{

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.module7 .cardBox .left .avatarBox .right p{

    margin: 0;

}

.module7 .cardBox .left .avatarBox .right .time{

    color: rgb(136, 136, 136);

    font-size: 13px;

}

.module7 .cardBox .left .avatarBox .right .expire{

    color: rgba(255, 19, 19, 0.808);

    font-size: 13px;

}

.module7 .cardBox .left .avatarBox .right .icon{

    width: 20px;

    height: auto;

    margin-right: 3px;

}

.module7 .cardBox .left .solid{

    width: 80px;

    height: 10px;

    background-color: #F0F1F5;

    border-radius: 10px;

    margin: 10px 0;

}

.module7 .cardBox .left .points{

    margin-top: 20px;

}

.module7 .cardBox .left .btnlist{

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 20px;

}

.module7 .cardBox .left .btnlist button{

    padding: 5px 20px;

    

    border-radius: 30px;

}

.module7 .cardBox .left .btnlist .btn1{

    background-color: #FF9900;

    color: white;

}

.module7 .cardBox .left .btnlist .btn2{

    background-color: #FFB7B7;

    color: #CA2E00;

}

.module7 .cardBox .right{

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-evenly;

    gap: 20px;

}



.module7 .cardBox .right .card{

    background-color: #F1F1F1;

    padding: 50px 60px;

    border-radius: 10px;

    position: relative;

    overflow: hidden;

}



.module7 .cardBox .right .card h5{

    font-size: 18px;

    font-weight: bold;

    margin-bottom: 20px;

}

.module7 .cardBox .right .card .current{

    position: absolute;

    left: 0;

    top: 0;

    z-index: 2;

    background-color: #FF9900; 

    padding: 5px;

    border-radius: 0 0 10px 0;

    display: none;

}



.module7 .cardBox .right .select{

    background-color: #0287FF;

    color: white;

}

.module7 .cardBox .right .select .current{

    display: block;

}



@media screen and (max-width:1200px){

    .module7 .cardBox .left{

        margin: auto;

    }

    .module7 .cardBox{

        flex-direction: column;

    }

    .module7 .cardBox .right{

        flex-direction: column;

    }

}





























.module8{

    width: 50%;

}

.module8 .box{

    height: 250px;

}

.module8 .box .listBox{

    display: flex;

    align-items: center;

    margin-top: 40px;

    overflow: auto;

}

.module8 .box .listBox a{

    text-align: center;

    width: calc(100% / 5);

    flex-shrink: 0;

}

.module8 .box .listBox a img{

    width: 60px;

    flex-shrink: 0;

}

.module8 .box .listBox a p{

    margin-top: 10px;

    font-size: 14px;

    white-space: nowrap;

    overflow: hidden;      	          

    text-overflow: ellipsis;

    white-space: nowrap;

}

@media screen and (max-width:1200px){

    .module8{

        width: 100%;

    }

}















.module9{

    width: 50%;

}

.module9 .box{

    height: 250px;

}

.module9 ul{

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.module9 ul li{

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}

.module9 ul li .time{

    font-size: 14px;

    color: rgb(161, 161, 161);

    flex-shrink: 0;

    white-space: nowrap;

    margin: 0;

}



@media screen and (max-width:1200px){

    .module9{

        width: 100%;

    }

    .module9 .box h4{

        margin-bottom: 30px;

    }

}

















.copyrightBox{

    display: flex;

    gap: 20px;

    font-size: 14px;

    padding: 20px 10px;

}

@media screen and (max-width:700px){

    .copyrightBox{

        flex-direction: column;

        gap: 5px;

    }

}



















.module10 form{

    margin-top: 30px;

}

.module10 .inputBox{

    display: flex;

    align-items: center;

    margin-bottom: 20px;

}

.module10 .inputBox2{

    align-items: baseline;

}

.module10 .inputBox .name{

    width: 100px;

}

.module10 .inputBox input{

    border: 1px solid rgb(192, 192, 192);

    padding: 2px 5px;

    border-radius: 5px;

}

.module10 .inputBox ul{

    width: 400px;

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 10px;

}

.module10 .inputBox .paymentPrice{

    color: rgb(255, 94, 0);

    font-size: 18px;

}

.module10 .inputBox ul li{

    background-color: #FFE1E1;

    border: 1px solid #FFB7B7;

    padding: 5px 10px;

    text-align: center;

    border-radius: 10px;

    cursor: pointer;

}

.module10 .inputBox .radioBox{

    display: flex;

    align-items: center;

    gap: 20px;

}

.module10 .inputBox .radioBox img{

    width: 100px;

}

.module10 .inputBox .radioBox input[type=radio]{

    transform: scale(1.6);

    margin: 0;

}

.module10 .inputBox  .tip{

    color: red;

}

.module10 .submit{

    background-color: #0066CC;

    padding: 10px 30px;

    color: white;

    border-radius: 50px;

    margin-top: 30px;

}



@media screen and (max-width:700px){

    .module10 .inputBox ul{

        grid-template-columns: repeat(2,1fr);

    }

}













.pricePopupBox .mask{

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 99999;

    background-color: rgba(0, 0, 0, 0.6);

    display: none;

}

.pricePopupBox{

    display: inline;

}

.pricePopupBox .PopBox{

    position: fixed;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    z-index: 999999;

    display: none;

}

.pricePopupBox .PopBox .content{

    width: 400px;

    background-color: white;

    border-radius: 10px;

    transform: scale(0.4);

    transition: all 0.5s;

}

.pricePopupBox .PopBox .content .box{

    width: 100%;

    height: 100%;

}

.pricePopupBox .PopBox .content .closeBtn{

    position: fixed;

    right: 10px;

    top: 10px;

    z-index: 2;

    padding: 10px;

    transition: all 0.6s;

}

.pricePopupBox .PopBox .content .closeBtn:hover{

    transform: rotate(90deg);

}

.pricePopupBox .PopBox .content .closeBtn .icon{

    color: rgb(56, 56, 56);

    font-size: 26px;

}

.pricePopupBox .PopBox .content .box h4{

    font-weight: bold;

    padding: 20px;

}

.pricePopupBox .PopBox .content .box .content{

    text-align: center;

    padding: 10%;

}

.pricePopupBox .PopBox .content .box .content .tip1{

    font-size: 18px;

}

.pricePopupBox .PopBox .content .box .content .tip2{

    margin: 10px 0;

    color: #808080;

    font-size: 14px;

}

.pricePopupBox .PopBox .content .box .content .price{

    font-size: 30px;

    font-weight: bold;

    color: rgb(255, 94, 0);

}



.pricePopupBox .PopBox .content .box .content .code{

}

.pricePopupBox .PopBox .content .box .content button{

    background-color: var(--color-Primary);

    color: white;

    border-radius: 50px;

    padding: 8px 25px;

    margin-top: 20px;

    font-size: 1rem;

}

@media screen and (max-width:700px){

    .pricePopupBox .PopBox .content{

        width: 90vw;

    }

}

















.noticePopupBox .mask{

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 99999;

    background-color: rgba(0, 0, 0, 0.6);

    display: none;

}

.noticePopupBox{

    display: inline;

}

.noticePopupBox .PopBox{

    position: fixed;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    z-index: 999999;

    display: none;

}

.noticePopupBox .PopBox .content{

    width: 60vw;

    background-color: white;

    border-radius: 10px;

    transform: scale(0.4);

    transition: all 0.5s;

}

.noticePopupBox .PopBox .content .box{

    width: 100%;

    height: 100%;

}

.noticePopupBox .PopBox .content .box h4{

    font-size: 20px;

    font-weight: bold;

    padding: 20px;

}

.noticePopupBox .PopBox .content .closeBtn{

    position: fixed;

    right: 20px;

    top: 20px;

    z-index: 2;

    padding: 10px;

    transition: all 0.6s;

}

.noticePopupBox .PopBox .content .closeBtn:hover{

    transform: rotate(90deg);

}

.noticePopupBox .PopBox .content .closeBtn .icon{

    color: rgb(56, 56, 56);

    font-size: 26px;

}

.noticePopupBox .PopBox .content .contentBox{

    padding: 20px;

    height: 50vh;

    overflow: auto;

}

.noticePopupBox .PopBox .content .contentBox ul{

    display: flex;

    flex-direction: column;

    gap: 20px;



}

.noticePopupBox .PopBox .content .contentBox ul li{

    border: 1px solid rgb(207, 207, 207);

    border-radius: 10px;

    overflow: hidden;

}

.noticePopupBox .PopBox .content .contentBox ul li .title{

    background-color: #e6e6e6;

    padding: 10px;

}

.noticePopupBox .PopBox .content .contentBox ul li .title h5{

    font-size: 18px;

    font-weight: bold;

}

.noticePopupBox .PopBox .content .contentBox ul li .title .time{

    font-size: 14px;

    color: #808080;

    margin: 0;

}

.noticePopupBox .PopBox .content .contentBox ul li .text{

    padding: 10px;

}

















.module11 .filterBox{

    display: flex;

    align-items: center;

    gap: 7%;

    margin: 30px 0;

}

.module11 .filterBox .date span{

    margin-right: 20px;

}

.module11 .filterBox .type select{

    width: 200px;

    padding: 4px 8px;

    border: 1px solid rgb(235, 235, 235);

}

.module11 .filterBox .submit{

    background-color: #FF6600;

    color: white;

    padding: 6px 30px;

    border-radius: 5px;

    white-space: nowrap;

}



.module11 .datalist{

    border: 1px solid rgb(240, 240, 240);

    margin: 20px 0;

}

.module11 .datalist .header{

    display: grid;

    grid-template-columns: repeat(3,1fr);

    background-color: #ECECEC;

    padding: 10px;

}

.module11 .datalist ul li{

    display: grid;

    grid-template-columns: repeat(3,1fr);

    border-bottom: 1px solid rgb(236, 236, 236);

    padding: 10px;



}






















@media screen and (max-width:700px){

    .module11 .filterBox{

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }

    .module11 .filterBox .date span{

        margin-right: 5px;

    }

    .module11 .paging{

        flex-direction: column;

        align-items: center;

        gap: 10px;

    }



}





/* 对日期输入框进行样式设置 */

input[type="date"] {

    padding: 4px 8px;

    border: 1px solid #ccc;

    border-radius: 4px;

    background-color: #f9f9f9;

    font-size: 14px;

    outline: none;

    transition: border-color 0.3s ease;

}



/* 鼠标悬停时的样式 */

input[type="date"]:hover {

    border-color: #999;

}



/* 获得焦点时的样式 */

input[type="date"]:focus {

    border-color: #007bff;

    box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);

}















.module12 .scrollBox{

    overflow: auto;

}

.module12 .scrollBox .box {

    min-width: 1000px;

}

.module12 .box .tableheader{

    display: grid;

    justify-items: center;

    position: sticky;

    top: var(--header-height);

}

.module12 .box .datalist{

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.module12 .box .datalist li{

    display: grid;

    justify-items: center;

    border-bottom: 1px solid rgb(243, 243, 243);

    padding: 10px 0;

    gap: 10px;

    word-break: break-all;

}

.module12 .box .datalist li .success{

    color: var(--color-Success);

}

.module12 .box .datalist li .fail{

    color: var(--color-Error);

}

.module12 .box .datalist li .upload{

    color: #0031CB;

}







@media screen and (max-width:700px){



}

















.module13 .tab{

    display: flex;

    transform: translateY(20px);

}

.module13 .scrollBox{

    overflow: auto;

}

.module13 .scrollBox .box{

    min-width: 800px;

}

.module13 .tab .select{

    background-color: #0066CC;

    color: white;

}

.module13 .tab button{

    padding: 7px 15px;

    

    font-size: 14px;

    border-radius: 10px 10px 0 0;

}



.module13 .tableheader{

    display: grid;

    grid-template-columns: 30% 15% 15% 20% 20%;

    justify-items: center;

}

.module13 .tableheader li:first-child{

    justify-self: start;

}

.module13 .datalist li{

    display: grid;

    grid-template-columns: 30% 15% 15% 20% 20%;

    justify-items: center;

    align-items: center;

    border-bottom: 1px solid rgb(243, 243, 243);

    padding: 10px 0;

}

.module13 .datalist li .project{

    display: flex;

    align-items: center;

    gap: 10px;

    justify-self: start;

}

.module13 .datalist li .project img{

    width: 60px;

}

.module13 .datalist li .project .names h5{

    font-size: 16px;

}

.module13 .datalist li .project .names p{

    font-size: 14px;

    color: rgb(129, 129, 129);

}

.module13 .datalist li .done{

    background-color: #6CB4FE;

    padding: 4px 6px;

    color: white;

    font-size: 14px;

    border-radius: 7px;

}

.module13 .datalist li .fail{

    background-color: #cacaca;

    padding: 4px 6px;

    color: white;

    font-size: 14px;

    border-radius: 7px;

}

.module13 .datalist li .operate{

    display: flex;

    align-items: center;

    gap: 10px;

}

.module13 .datalist li .operate .icon{

    font-size: 18px;

    cursor: pointer;

}

.module13 .datalist li .operate .icon:hover{

    color: var(--color-Primary);

}





@media screen and (max-width:700px){

    .module13 .tab{

        transform: translateY(10px);

    }

    

}





















.module14 .recordBox{

    text-align: right;

}

.module14 .recordBox button{

    background-color: #F5790A;

    color: white;

    padding: 5px 20px;

    border-radius: 50px;

}

.module14 .recordBox button:hover{

    background-color: #db6600;

}

.module14 h4.title span{

    font-weight: 500;

    font-size: 14px;

    margin: 0 5px;

}

.module14 .tableheader{

    display: grid;

    grid-template-columns: 10% 20% 20%  25% 25%;

    justify-items: center;

}

.module14 .datalist li{

    display: grid;

    grid-template-columns: 10% 20% 20%  25% 25%;

    justify-items: center;

    border-bottom: 1px solid rgb(243, 243, 243);

    padding: 10px 0;

    align-items: center;

}

.module14 .btnlist{

    padding: 10px 0;

}

.module14 .btnlist .selectAll{

    background-color: var(--color-Primary);

    padding: 5px 10px;

    border-radius: 5px;

    color: white;

    font-size: 14px;

}



.module14 .btnlist .selectAll:hover{

    background-color: #0654b3;

}

.module14 .btnlist .next{

    margin-left: 20px;

    background-color: #FF9900;

}

.module14 .btnlist .next:hover{

    background-color: #d37f00;

}



.module14 .datalist span.pending{

    color: #7e7e7e;

}

.module14 .datalist span.partof{

    color: #c0ad03;

}

.module14 .datalist span.finished{

    color: #00bb28;

}



.module14 .filterBox{

    display: flex;

    align-items: center;

    gap: 7%;

    margin: 30px 0;

}

.module14 .filterBox .date span{

    margin-right: 20px;

}

.module14 .filterBox .type select{

    width: 200px;

    padding: 4px 8px;

    border: 1px solid rgb(235, 235, 235);

}

.module14 .filterBox .submit{

    background-color: #FF6600;

    color: white;

    padding: 6px 30px;

    border-radius: 5px;

    white-space: nowrap;

}

.module14  .reduce::before{

    content: '-';

    color: #FF6600;

}



.module14  .increase::before{

    content: '+';

    color: #00f821;

}











@media screen and (max-width:700px){



}

















.module15 .tip{

    color: #B94A48;

    font-size: 16px;

    margin-bottom: 20px;

}

.module15 form{





}

.module15 .inputBox{

    display: flex;

    align-items: center;

    margin-bottom: 10px;

}

.module15 .inputBox .name{

    width: 170px;

}

.module15 .inputBox .name i{

    color: red;

    margin-right: 3px;

}

.module15 .inputBox .totalPrice{

    color: #FF6400;

    margin-left: 10px;

}

.module15 .inputBox input,.module15 .inputBox select,.module15 .inputBox textarea{

    border: 1px solid rgb(221, 221, 221);

    background-color: rgb(250, 250, 250);

    width: 300px;

    padding: 3px 5px;

    border-radius: 3px;

}



.module15 .inputBox .zhu{

    margin-left: 10px;

    color: #C49E5D;

}

.module15 form .tip{

    margin-top: 30px;

}

.module15 form .submit{

    background-color: #3280FC;

    color: white;

    padding: 10px 40px;

    border-radius: 5px;

    margin-top: 50px;

}



@media screen and (max-width:700px){

    .module15 .inputBox{

        flex-direction: column;

        align-items: flex-start;

        gap: 3px;

        margin-bottom: 20px;

    }

    .module15 .inputBox:first-child{

        flex-direction: row;

    }

    .module15 .inputBox .name{

        width: auto;

    }

    .module15 .inputBox input, .module15 .inputBox select, .module15 .inputBox textarea{

        width: 100%;

    }

}



























.module16 .box{

    background-color: #FFFFE8;

}

.module16 .box h4{

    margin-bottom: 20px;

    font-weight: bold;

    font-size: 18px;

}

















.module17{

    padding:0 10%;

}

.module17 form {

    padding: 30px 0;

    text-align: center;

    margin-bottom: 100px;

}

.module17 form .inputBox{

    margin-bottom: 20px;

    display: flex;
    align-items: baseline;
    justify-content: center;

}

.module17 form .inputBox .name{

    display: inline-block;

    width: 150px;

    margin-right: 10px;

}
.module17 form .inputBox .right{
    display: flex;
    flex-direction: column;
}
.module17 form .inputBox input,.module17 form .inputBox select{

    border: 1px solid rgb(221, 221, 221);

    background-color: rgb(250, 250, 250);

    width: 400px;

    padding: 5px 5px;

    border-radius: 3px;

    font-size: 15px;

}
.module17 form .inputBox .tip{
    font-size: 14px;
    color: rgb(136, 136, 136);
    display: inline;
    margin-top: 5px;
}

.module17 form .submit{

    background-color: #3280FC;

    color: white;

    width: 400px;

    padding: 10px 50px;

    border-radius: 5px;

    margin-top: 30px;

    margin-bottom: 20px;

}

.module17 form .agreement{

    font-size: 14px;

}

.module17 form .agreement a{

    color: #3280FC;

}



@media screen and (max-width:700px){

    .module17{

        padding:0 1%;

    }

    .module17 form .inputBox{

        text-align: left;

    }

    .module17 form .inputBox .name{

        margin-bottom: 10px;

    }

    .module17 form .inputBox input,.module17 form .inputBox select{

        width: 100%;

    }

}



















.module18 form {

    padding: 30px 0;

    text-align: center;

    margin-bottom: 100px;

}

.module18 form .inputBox{

    margin-bottom: 20px;

        display: flex;
    align-items: baseline;
    justify-content: center;

}

.module18 form .inputBox .name{

    display: inline-block;

    width: 150px;

    margin-right: 10px;

}
.module18 form .inputBox .right{
    display: flex;
    flex-direction: column;
}

.module18 form .inputBox input,.module18 form .inputBox select{

    border: 1px solid rgb(221, 221, 221);

    background-color: rgb(250, 250, 250);

    width: 400px;

    padding: 5px 5px;

    border-radius: 3px;

    font-size: 15px;

}


.module18 form .inputBox input[disabled]{

    background-color: rgb(241, 241, 241);

    cursor:not-allowed;

}
.module18 form .inputBox .tip{
    font-size: 14px;
    color: rgb(136, 136, 136);
    display: inline;
    margin-top: 5px;
}

.module18 form .submit{

    background-color: #3280FC;

    color: white;

    width: 300px;

    padding: 10px 50px;

    border-radius: 5px;

    margin-top: 30px;

    margin-bottom: 20px;

}



.module18 form .uploadAvatar{

    padding: 20px;

    text-align: center;

    margin-bottom: 20px;

}



.module18 form .avatar{

    width: 80px;

    height: 80px;

    border-radius: 50%;

    border: 1px solid #ccc;

    margin: 20px auto;

    background-size: cover;

    overflow: hidden;

    background-position: center;

}

.module18 form .avatar-preview img{

    width: 100%;

}



.module18 form .uploadBtn {

    /* background-color: #007BFF; */

    /* color: #fff; */

    color: #007BFF;

    font-size: 14px;

    cursor: pointer;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    position: relative;

}

.module18 form .uploadBtn input{

    position: absolute;

    width: 100%;

    height: 100%;

    z-index: 2;

    opacity: 0;

    cursor: pointer;

}



.module18 form .uploadBtn:hover {

    /* background-color: #0056b3; */

    color: #005cbe;

}





@media screen and (max-width:700px){

    .module18 form{

        margin:0;

    }

    .module18 form .inputBox{

        text-align: left;

    }

    .module18 form .inputBox .name{

        margin-bottom: 10px;

    }

    .module18 form .inputBox input, .module18 form .inputBox select{

        width: 100%;

    }

}

















.memberPopupBox .mask{

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 99999;

    background-color: rgba(0, 0, 0, 0.6);

    display: none;

}

.memberPopupBox{

    display: inline;

}

.memberPopupBox .PopBox{

    position: fixed;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    z-index: 999999;

    display: none;

}

.memberPopupBox .PopBox .content{

    width: 700px;

    background-color: white;

    border-radius: 10px;

    transform: scale(0.4);

    transition: all 0.5s;

}

.memberPopupBox .PopBox .content .box{

    width: 100%;

    height: 100%;

    display: flex;

    padding: 50px 20px;

}

.memberPopupBox .PopBox .content .box .left{

    width: 50%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    flex-shrink: 0;

}

.memberPopupBox .PopBox .content .box .left h2{

    font-size: 30px;

    font-weight: bold;

    color: #003F94;

    margin-bottom: 20px;

}

.memberPopupBox .PopBox .content .box .left .price{

    font-size: 14px;

}

.memberPopupBox .PopBox .content .box .left .price strong{

    font-size: 40px;

    font-weight: bold;

}

.memberPopupBox .PopBox .content .box .left .codeBox{

    text-align: center;

}

.memberPopupBox .PopBox .content .box .left .code{

    margin: 10px 0;

}

.memberPopupBox .PopBox .content .box .left .inputBox{

    width: 100%;

    margin: 20px 0;

}

.memberPopupBox .PopBox .content .box .left .inputBox img{

    width: 100px;

}

.memberPopupBox .PopBox .content .box .left .inputBox .radioBox{

    display: flex;

    justify-content: space-evenly;

    align-items: center;

}   

.memberPopupBox .PopBox .content .box .left .device_PC{

    text-align: center;

}

.memberPopupBox .PopBox .content .box .left .device_Phone{

    width: 100%;

}

.memberPopupBox .PopBox .content .box .left .device_Phone .tip{

    margin: 20px 0;

}

.memberPopupBox .PopBox .content .box .left .device_Phone input[type=radio]{

    transform: scale(1.5);

    margin-right: 10px;

}

.memberPopupBox .PopBox .content .box .left .device_Phone .radioBox{

    width: 100%;

}

.memberPopupBox .PopBox .content .box .left .device_Phone .radioBox img{

    width: 150px;

}

.memberPopupBox .PopBox .content .box .left button{

    background-color: var(--color-Primary);

    color: white;

    padding: 7px 20px;

    border-radius: 50px;

    margin-top: 20px;

}

.memberPopupBox .PopBox .content .box .right{

    width: 50%;

    flex-shrink: 0;

    padding: 40px;

}

.memberPopupBox .PopBox .content .box .right h3{

    margin-bottom: 30px;

}

.memberPopupBox .PopBox .content .box .right ul li{

    list-style:disc;

    margin-bottom: 10px;

}



.memberPopupBox .PopBox .content .closeBtn{

    position: fixed;

    right: 10px;

    top: 10px;

    z-index: 2;

    padding: 10px;

    transition: all 0.6s;

}

.memberPopupBox .PopBox .content .closeBtn:hover{

    transform: rotate(90deg);

}

.memberPopupBox .PopBox .content .closeBtn .icon{

    color: rgb(56, 56, 56);

    font-size: 26px;

}





@media screen and (max-width:700px){

    .memberPopupBox .PopBox .content{

        width: 96vw;

    }

    .memberPopupBox .PopBox .content .box .right{

        display: none;

    }

    .memberPopupBox .PopBox .content .box .left{

        width: 100%;

    }

}

















.mobileMenu{

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    padding: 10px 0;

    background-color: #fff;

    z-index: 99;

    box-shadow: 0 0px 5px rgb(129 129 129);

    display: flex;

    justify-content: space-evenly;

}

.mobileMenu button{

    padding: 0 10px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}

.mobileMenu button .icon{

    font-size: 20px;

}

.mobileMenu button p{

    margin: 0;

    font-size: 14px;

}













.tableBox{

    width: 96%;

    margin: 20px auto;

}

.tableBox .tab{

    display: flex;

    gap: 5px;

}
.tableBox .tip{
    color: red;
}
.tableBox .download{

    text-align: right;

    margin-bottom: 10px;

}

.tableBox .download .downloadBtn{

    padding: 5px 20px;

    border-radius: 50px;

    background-color: var(--color-Primary);

    color: white;

}

.tableBox .download .downloadBtn:hover{

    background-color: var(--color-Primary2);

}

.tableBox .content{

    height: 100%;

    overflow: auto;

}

.tableBox .tab button{

    border: 1px solid rgb(209, 209, 209);

    background-color: #fff;

    padding: 4px 8px;

    border-radius: 5px 5px 0 0;

}

.tableBox .tab button:hover{

    background-color:var(--color-Primary);

    color: white;

}

.tableBox .tab .select{

    background-color:var(--color-Primary);

    color: white;

}

.tableBox table{

    width: 100%;

    background-color: #fff;

    display: none;

}

.tableBox table thead{

    background-color: #ebebeb;

}

.tableBox table th{

    padding: 10px 5px;

    

}

.tableBox table td{

    padding: 10px;

}

.tableBox table th,.tableBox table td{

    border: 1px solid rgb(223, 223, 223);
    min-width: 150px;

}

























.dialogBox .dialog {

    display: none;

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background-color: white;

    padding: 20px;

    border-radius: 6px;

    border: 1px solid #ccc;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    z-index: 9999999;

    min-width: 300px;

    max-width: 96vw;

}

.dialogBox .dialog .text{

    font-size: 20px;

    font-weight: bold;

}

.dialogBox .dialog .content{

    padding: 20px 0;

    font-size: 16px;

}

.dialogBox .dialog .closeBtn{

    background-color: #6CB4FE;

    color: white;

    font-size: 16px;

    padding: 5px 20px;

    border-radius: 6px;

}

.dialogBox .dialog .closeBtn:hover{

    background-color:#136ad5;

}



.dialogBox .overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);

    z-index: 999999;

}































.module19{

    position: relative;

}



.module19 .bc{

    position: absolute;

    height: 70vh;

    width: 100%;

    object-fit: cover;

}

.module19 .content{

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10vh;

}

.module19 .content h4{

    text-align: center;

    color: #C2A56B;

    padding-top: 20vh ;

    font-size: 30px;

}



.module19 .content .addVip{

    display: inline-block;

    padding: 10px 50px;

    border-radius: 50px;

    background-image: linear-gradient(to right, #E7C07A , #8F6A36);

    color: white;

    font-size: 30px;

    font-weight: bold;

    transition: all 0.3s;

}

.module19 .content .addVip:hover{

    transform: scale(1.1);

}

.module19 .content .boxs{

    background-color: #FBF7EE;

    width: 90%;

    padding: 50px 10%;

    border-radius: 30px;

}

.module19 .content .boxs h3{

    text-align: center;

    font-size: 28px;

    font-weight: bold;

    color: #44331C;

}

.module19 .content .boxs ul{

    margin-top: 50px;

    display:grid;

    grid-template-columns: repeat(4,1fr);

    justify-content: center;

    gap: 50px 20px;

}

.module19 .content .boxs ul li{

    text-align: center;

    transition: all 0.3s;

}

.module19 .content .boxs ul li:hover{

    transform: translateY(-10px);

}

.module19 .content .boxs ul li p{

    margin-top: 10px;

}





@media screen and (max-width:700px){

    .module19 .content h4{

        font-size: 20px;

    }

    .module19 .content .addVip{

        font-size: 24px;

    }

    .module19 .content .boxs{

        padding: 50px 5%;

    }

    .module19 .content .boxs ul{

        grid-template-columns: repeat(3, 1fr);

        gap: 20px 10px;

    }

}





















.module20{

    width: 90%;

    margin: 20px auto;

    display: grid;

    grid-template-columns: 49% 49%;

    gap: 2%;

}

.module20 .boxs{

    background-color: #FBF7EE;

    border-radius: 20px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 40px 20%;

    position: relative;

    align-items: flex-start;

    transition: all 0.3s;

}

.module20 .boxs:hover{

    box-shadow: 2px 2px 5px #d8d8d8;

}

.module20 .boxs .tj{

    position: absolute;

    left: -7px;

    top: -7px;

    z-index: 0;

    width: 150px;

}

.module20 .boxs h3{

    margin-bottom: 10px;

}

.module20 .boxs .list{

    margin-top: 40px;

}

.module20 .boxs button{

    background-color: #F5790A;

    color: white;

    width: 50%;

    padding: 8px 0;

    border-radius: 50px;

    margin-top: 20px;

}

.module20 .boxs button:hover{

    background-color: #d66503;

}





@media screen and (max-width:700px){

    .module20{

        grid-template-columns: 1fr;

    }

    .module20 .boxs{

        padding: 50px 10%;

    }

    .module20 .boxs .tj{

        width: 100px;

    }

}

















.module21{

    width: 90%;

    margin: 50px auto;

}

.module21 .title{

    font-size: 20px;

    font-weight: bold;

}

.module21 .contrastBox{

    margin-top: 20px;

}



.module21 .contrastBox .header{

    display: grid;

    grid-template-columns: 20% 40% 40%;

   

}



.module21 .contrastBox .header div{

    text-align: center;

    padding: 20px 0;

    font-size: 18px;

}

.module21 .contrastBox .header .pt{

    background-color: #E2E2E2;

}

.module21 .contrastBox .header .vip{

    background-color: #FF6600;

    color: white;

}

.module21 .contrastBox ul li{

    display: grid;

    grid-template-columns: 20% 40% 40%;

    padding: 10px 0;

    justify-items: center;

}

.module21 .contrastBox ul li span{

    display: inline-block;

    width: 100%;

    text-align: center;

}

.module21 .contrastBox ul li span:first-child{

    text-align: left;

}













.module22 ul{

    padding: 10px;

}

.module22 ul li{

    margin-bottom: 20px;

}

.module22 ul li h4{

    font-weight: bold;

    font-size: 16px;

}

.module22 ul li p{

    color: #686868;

    font-size: 14px;

    padding-left: 30px;

}

















.module23 .content{

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.module23 .content .left{

    display: flex;

    align-items: center;

}

.module23 .content .left .imgBox .icon{

    font-size: 45px;

    color: var(--color-Primary2);

}

.module23 .content .left .imgBox {

    width: 80px;

    height: 80px;

    border-radius: 100px;

    border:2px solid var(--color-Primary2);

    background-color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 20px;

}

.module23 .content .left strong{

    font-size: 30px;

}

.module23 .content .right{

    width: 160px;

}



.module23 .content .right a{

    display: block;

}

.module23 .content .right p{

    color: #6b6b6b;

    font-size: 14px;

}

.module23 .content .right .member{

    background-color: #FFB7B7;

    color: #CA2E00;

    width: 100%;

    padding: 5px 20px;

    border-radius: 50px;

}

.module23 .recordBox{

    text-align: right;

}

.module23 .recordBox button {

    background-color: #F5790A;

    color: white;

    padding: 5px 20px;

    border-radius: 50px;

}



@media screen and (max-width:700px){

    .module23 .content{

        flex-direction: column;

    }

    .module23 .content .right{

        width: 100%;

        margin-top: 20px;

    }

}











.module24{

    max-width: 800px;

    margin: auto;

    background-color: white;

    padding: 20px;

}

.module24 h1{

    font-size: 22px;

    font-weight: bold;

    margin-bottom: 20px;

}

.module24 h2{

    font-size: 20px;

    font-weight: bold;

    margin: 10px 0;

}











.module25 .box{

    text-align: center;

    padding: 50px 0;

}



.module25 .tip{

    text-align: center;

    font-weight: bold;

    font-size: 18px;

}

.module25 button{

    margin-top: 30px;

    background-color: var(--color-Primary);

    padding: 6px 30px;

    border-radius: 50px;

    color: white;

    transition: all 0.3s;

}

.module25 button:hover{

    background-color: var(--color-Primary2);

}







section .box{

    position: relative;

    overflow: hidden;

}

section .box.loading::after{

    content: '';

    position: absolute;

    background-color: #ffffff;

    opacity: 0.8;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    z-index: 99;

}



section .box.loading::before{

    content:'\eaf6';

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    font-family: 'iconfont';

    display: inline-block;

    font-size: 3rem;

    color: var(--color-Primary2);

    z-index: 100;

    animation: loading 1s linear infinite;

}

.loading::before{

    content:'\eaf6';

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    font-family: 'iconfont';

    display: inline-block;

    font-size: 3rem;

    color: var(--color-Primary2);

    z-index: 100;

    animation: loading 1s linear infinite;

}



section{

    position: relative;

    overflow: hidden;

}

section.loading::after{

    content: '';

    position: absolute;

    background-color: #ffffff;

    opacity: 0.8;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    z-index: 99;

}



section.loading::before{

    content:'\eaf6';

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    font-family: 'iconfont';

    display: inline-block;

    font-size: 3rem;

    color: var(--color-Primary2);

    z-index: 100;

    animation: loading 1s linear infinite;

}





/* 旋转动画 */

@keyframes loading{

    form{

        transform:translate(-50%,-50%) rotate(0);

    }

    to{

        transform:translate(-50%,-50%) rotate(360deg);

    }

}





















































.container {

      background-color: white;

      border-radius: 0.75rem;

      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

      padding: 2rem;

      max-width: 28rem;

      width: 100%;

      margin: 0 auto;

    }

    

    .title {

      font-size: 1.25rem;

      font-weight: 600;

      color: #334155;

      margin-bottom: 1.5rem;

    }

    

    .slider-container {

      margin-bottom: 2rem;

    }

    

    .slider-label {

      font-size: 0.875rem;

      font-weight: 500;

      color: #4b5563;

      margin-bottom: 0.5rem;

      display: flex;

      justify-content: space-between;

      align-items: center;

    }

    

    .slider-value {

      font-size: 0.875rem;

      color: #409EFF;

      font-weight: 500;

    }

    

    /* 滑块样式 */

    .element-slider {

      position: relative;

      width: 100%;

    }

    

    .slider-track {

      position: absolute;

      height: 0.25rem;

      border-radius: 0.125rem;

      background-color: #e0ebff;

      width: 100%;

      top: 50%;

      transform: translateY(-50%);

    }

    

    .slider-track-fill {

      position: absolute;

      height: 0.25rem;

      border-radius: 0.125rem;

      background-color: #409EFF;

      top: 50%;

      transform: translateY(-50%);

      transition: all 0.15s ease;

    }

    

    .slider-thumb {

      position: absolute;

      width: 1.25rem;

      height: 1.25rem;

      border-radius: 50%;

      background-color: white;

      border: 2px solid #409EFF;

      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

      transition: all 0.15s ease;

      cursor: pointer;

      top: 50%;

      transform: translateY(-50%);

      z-index: 1;

    }

    

    .slider-thumb:hover {

      border-color: #66b1ff;

      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    }

    

    .slider-thumb:active {

      border-color: #337ecc;

      box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);

    }

    

    .slider-marks {

      position: absolute;

      width: 100%;

      display: flex;

      justify-content: space-between;

      pointer-events: none;

      top: 50%;

      transform: translateY(calc(-50% - 0.5rem));

    }

    

    .slider-mark {

      position: relative;

      width: 0.0625rem;

      height: 0.75rem;

      background-color: #e5e7eb;

    }

    

    .slider-mark-text {

      position: absolute;

      top: -1.5rem;

      left: 50%;

      transform: translateX(-50%);

      font-size: 0.625rem;

      color: #6b7280;

      white-space: nowrap;

    }

    

    .slider-tooltip {

      position: absolute;

      top: -2.5rem;

      left: 50%;

      transform: translateX(-17%);

      background-color: #1f2937;

      color: white;

      font-size: 0.625rem;

      padding: 0.25rem 0.5rem;

      border-radius: 0.25rem;

      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

      /* opacity: 0; */

      transition: opacity 0.15s ease;

      pointer-events: none;

      white-space: nowrap;

    }

    

    .slider-tooltip::after {

      content: '';

      position: absolute;

      bottom: -0.25rem;

      left: 50%;

      transform: translateX(-50%);

      border-left: 0.25rem solid transparent;

      border-right: 0.25rem solid transparent;

      border-top: 0.25rem solid #1f2937;

    }

    

    /* 自定义颜色 */

    .slider-track-fill.success {

      background-color: #67C23A;

    }

    

    .slider-track-fill.warning {

      background-color: #E6A23C;

    }

    

    .slider-track-fill.danger {

      background-color: #F56C6C;

    }

    

    .slider-track-fill.info {

      background-color: #909399;

    }

    

    .slider-thumb.success {

      border-color: #67C23A;

    }

    

    .slider-thumb.warning {

      border-color: #E6A23C;

    }

    

    .slider-thumb.danger {

      border-color: #F56C6C;

    }

    

    .slider-thumb.info {

      border-color: #909399;

    }

    

    .slider-value.success {

      color: #67C23A;

    }

    

    .slider-value.warning {

      color: #E6A23C;

    }

    

    .slider-value.danger {

      color: #F56C6C;

    }

    

    .slider-value.info {

      color: #909399;

    }











  .PopupBox1 .mask {

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 9999998;

    background-color: rgba(0, 0, 0, 0.6);

    display: none;

  }
.PopupBox2 .mask{
    position: absolute;
}



  .PopupBox1 {

    display: inline;

  }



  .PopupBox1 .PopBox {

    position: fixed;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    z-index: 9999999;

    display: none;

  }
  .PopupBox2 .PopBox{
    position: absolute;
     top: 20px;
    width: 70%;
    transform: translate(-50%, 0%);
  }



  .PopupBox1 .PopBox .content {

    width: 70vw;

    height: 80vh;

    background-color: white;

    border-radius: 10px;

    transform: scale(0.4);

    transition: all 0.5s;

  }
  .PopupBox2 .PopBox .content{
    width: 100%;
  }



  .PopupBox1 .PopBox .content .box {

    width: 100%;

    height: 100%;

  }

  .PopupBox1 .PopBox .content .box {

    display: flex;

    flex-direction: column;

   }

   .PopupBox1 .PopBox .content .box .top{

    height: 50px;

    display: flex;

    align-items: center;

    gap: 20px;

    padding:0 20px;

   }

   .PopupBox1 .PopBox .content .box .imgBox{

    height: 100%;

    overflow: auto;

    text-align: center;

   }



  .PopupBox1 .PopBox .content .closeBtn {

    position: fixed;

    right: 20px;

    top: 0px;

    z-index: 2;

    padding: 10px;

    transition: all 0.6s;

  }



  .PopupBox1 .PopBox .content .closeBtn:hover {

    transform: rotate(90deg);

  }



  .PopupBox1 .PopBox .content .closeBtn .icon {

    color: rgb(56, 56, 56);

    font-size: 26px;

  }





  @media screen and (max-width:700px){

    .PopupBox1 .PopBox .content{

        width: 100vw;

        height: 100vh;

    }

  }