@font-face {
    font-family: 'TGBF';
    src: url('../css/TG-TYPE-Bold.otf');
    font-weight: normal;
}
.backSize{
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.navBanner{
    width: 100%;
    height: 9.38rem;
    background-image: url("//qjzb.kuleiman.com/record/klm/vrwdt/1/banner_bg.jpg");
    position: relative;
}

.navBannerInfo{
    position: absolute;
    top: 3.24rem;
    left: 4.5rem;
    z-index: 9;

}
.bannerTitle{
    font-size: 0.69rem;
    font-weight: 800;
    color: #0D162D;

}
.bannerTitle2{
    width: 7.99rem;
    font-size: 0.2rem;
    font-weight: 400;
    color: #0D162D;
    line-height: 0.4rem;
    margin-top: 0.13rem;

}

.btnBox{
    margin: 0.7rem auto 0;
    width: 3.61rem;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 3.24rem;
    left: 4.56rem;
    z-index: 9;
}
.btnBox div{
    width: 1.68rem;
    height: 0.6rem;
    line-height: 0.6rem;
    font-size: 0.2rem;

    font-weight: 500;
    cursor: pointer;
    border-radius: 0.1rem;
    letter-spacing: 1px;

}
.btnBox .icon1{
    width: 0.29rem;
    height: 0.28rem;
    background: url(//qjzb.kuleiman.com/record/klm/vrwdt/1/programme.svg) center center / 100% 100% no-repeat;
    margin-right: 0.13rem;

}
.btnBox .icon2{
    width: 0.29rem;
    height: 0.28rem;
    background: url(//qjzb.kuleiman.com/record/klm/vrwdt/1/playVideo.svg) center center / 100% 100% no-repeat;
    margin-right: 0.13rem;
}
.programme{
    border-radius: 0.07rem;
    color: #fff;
    background: linear-gradient(221deg, #7AD0FF 0%, #316BFF 100%);
    box-shadow: 0rem 0.01rem 0.14rem 0rem rgba(57,104,255,0.19);
}
.programme:hover{
    background: linear-gradient(221deg, #316BFF 0%, #7AD0FF 100%);
    /*background: rgba(255,255,255,0.2);*/
    /*background: rgba(255,255,255,0.8);*/
    /*backdrop-filter: blur(1px);*/
    /*border: none;*/
}
.introduce{
    background: #fff;
    color: rgba(9, 31, 65, 1);
}
.introduce:hover{
    background: linear-gradient(rgb(255, 255, 255) 0%, rgb(163, 209, 255) 100%) !important;
}
.bannerImg{
    width: 6.65rem;
    height: 6.79rem;
    position: absolute;
    top: 2.13rem;
    right: 4.47rem;
}
.bannerImg1{
    width: 3.8rem;
    height: 5.44rem;
    position: absolute;
    top: 0.6rem;
    left: -0.75rem;
}
.bannerImg2{
    width: 4.03rem;
    height: 4.08rem;
    position: absolute;
    top: 0.77rem;
    right: -0.71rem;
}

.commonTitle{
    font-size: 0.43rem;
    font-weight: bold;
    color: rgba(13, 37, 45, 1);
    line-height: 0.55rem;
    text-align: center;
    padding-top: 0.78rem;

}

/*model1*/
.model1{
    width: 100%;
    height: 7.19rem;
    background-image: url("//qjzb.kuleiman.com/record/klm/vrwdt/1/model1_bg.png");
}
.model1Box{
    width: 15rem;
    margin: 0.41rem auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

}

.model1List{
    width: 5rem;
    height: 4.6rem;
    cursor: pointer;
    transition: all 0.5s;
}
.model1List:hover{
    transform: translate(0, -2%);
}
.model1Index{
    font-size: 0.3rem;
    font-weight: bold;
    color: #091F41;
    line-height: 0.45rem;
    padding-left: 0.71rem;
    margin-top: 2.8rem;

}
.model1Index span{
    color:rgba(57, 114, 255, 1);
}

.model1Desc{
    width: 3.73rem;
    font-size: 0.2rem;
    font-weight: 400;
    color: #091F41;
    line-height: 0.33rem;
    margin-left: 0.71rem;
    margin-top: 0.1rem;
}

/*model2*/

.model2{
    width: 100%;
    height: 7.19rem;
    background-image: url("//qjzb.kuleiman.com/record/klm/vrwdt/1/model2_bg.png");
}
.model2BoxBox{
    width: 15.1rem;
    height:4.5rem;
    backdrop-filter: blur(10px);
    margin: 0.4rem auto 0;
    display: flex;
    justify-content: center;
}
.model2Box{
    width: 15.5rem;
    height: 5.19rem;
    background-image: url("//qjzb.kuleiman.com/record/klm/vrwdt/1/model2_box_bg.png");
    display: flex;
    /*align-items: center;*/
}
.model2Left{
    width: 3.38rem;
    height: 3.08rem;
    border-right: 0.01rem solid rgba(57,114,255,0.14);
    padding-left: 0.88rem;
    margin-top: 0.88rem;
}
.model2Con{
    width: 5rem;
    height: 3.08rem;
    padding-left: 0.63rem;
    position: relative;
    margin-top: 0.93rem;
}
.model2List{
    width: 1.88rem;
    height: 0.63rem;
    background: #FFFFFF;
    border-radius: 0.1rem;
    font-size: 0.23rem;
    font-weight: 500;
    color: #333333;
    line-height: 0.63rem;
    text-align: center;
    margin-bottom: 0.19rem;
    cursor: pointer;
}
.active2,.model2List:hover{
    background: linear-gradient(221deg, #7AD0FF 0%, #316BFF 100%);
    color: #fff;
}
.model2Index{
    font-weight: bold;
    color: #091F41;
    position: relative;
    font-family: TGBF;
}
.model2Index span{
    position: relative;
    z-index: 9;
    font-size: 0.35rem;

}
.model2Index:after{
    content: '';
    width: 0.3rem;
    height: 0.04rem;
    background: #3972FF;
    position: absolute;
    bottom: 0.00rem;
    left: 0.03rem;
}

.model2Title{
    font-size: 0.3rem;
    font-weight: bold;
    color: #091F41;
    line-height: 0.45rem;
    background: linear-gradient(207deg, #4093FF 0%, #020106 100%, #091F41 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 0.05rem;
}
.model2Desc{
    font-size: 0.3rem;
    font-weight: bold;
    color: #091F41;
    line-height: 0.42rem;
    margin-top: 0.57rem;
    /*width: 3.43rem;*/
}
.model2Btn{
    width: 1.38rem;
    height: 0.48rem;
    background: linear-gradient(225deg, #5FBEF7 0%, #3192FF 97%);
    border-radius: 0.08rem;
    text-align: center;
    line-height: 0.48rem;
    font-size: 0.2rem;
    font-weight: 500;
    color: #FFFFFF;
    position: absolute;
    bottom: 0.03rem;
    left: 0.63rem;
    cursor: pointer;
}
.model2Btn:hover{
    background: linear-gradient(225deg, #3192FF 0%, #5FBEF7 97%);
}
.model2Right{
    width: 6.48rem;
    height: 4rem;
    margin-top: 0.63rem;

}
.model2Right img{
    width: 100%;
    height: 100%;
}

/*model3*/
.model3{
    width: 100%;
    height: 8rem;
    overflow: hidden;
   background-image: url("//qjzb.kuleiman.com/record/klm/vrwdt/1/model3_bg.png");

}
.model3Box{
    width: 15rem;
    margin: 0.54rem auto 0;
    display: flex;
    justify-content: space-between;
}
.model3Left{
    width: 9.93rem;

}
.model3Right{
    width: 5.69rem;
    height: 5.56rem;
}
.model3List{
    width: 3.19rem;
    height: 1.63rem;
    background: #FFFFFF;
    box-shadow: 0rem 0.01rem 0.14rem 0rem rgba(57,114,255,0.19);
    border-radius: 0.19rem;
    margin-right: 0.18rem;
    float: left;
    margin-bottom: 0.13rem;
    cursor: pointer;
    padding-top: 0.49rem;
    color: #091027;
    padding-left: 0.34rem;
    position: relative;
}
.model3List:nth-child(3n){
    margin-right: 0;
}
.model3Title{
    font-size: 0.23rem;
    font-weight: bold;
    width: 1.26rem;
    height: 0.23rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.model3Icon{
    width: 0.23rem;
    height: 0.23rem;
    float: right;
    /*vertical-align: middle;*/
}

.model3Desc{
    font-size: 0.18rem;
    font-weight: 400;
    margin-top: 0.25rem;
}

.active3{
    background: linear-gradient(221deg, #7AD0FF 0%, #316BFF 100%);
    box-shadow: 0rem 0.01rem 0.14rem 0rem rgba(57,104,255,0.19);
    color: #fff;
}
.active3 .model3Title img{
    display: none;
}

.iconHover{
    position: absolute;
    top: 0.26rem;
    right: 0.26rem;
    opacity: 0;
    transition: all 0.4s;
}
.active3 .iconHover{
    opacity: 1;
}
.model3Img,.model2Img{
    transition: all 0.5s;
    animation: 1s fadeinRightSmall
}



@keyframes fadeinRightSmall {
    0% {
        transform: translate(10%, 0rem);
        opacity: 0;
    }

    100% {
        transform: translate(0%, 0rem);
        opacity: 1;
    }
}





/*model4*/
.model4{
    width: 100%;
    height: 6.68rem;
    overflow: hidden;
}
.model4Box{
    width: 15rem;
    margin: 0.73rem auto 0;
    display: flex;
    justify-content: space-between;
}
.model4List{
    width: 4.75rem;
    height: 3.91rem;
    margin-right: 0.38rem;
    position: relative;

}
.model4List img{
    width: 100%;
    height: 100%;
}
.model4Title{
    width: 3.2rem;
    height: 0.64rem;
    background: linear-gradient(221deg, #7AD0FF 0%, #316BFF 100%);
    box-shadow: 0rem 0.01rem 0.14rem 0rem rgba(57,104,255,0.19);
    border-radius: 0.08rem;
    text-align: center;
    line-height: 0.64rem;
    font-size: 0.24rem;
    font-weight: bold;
    color: #FFFFFF;
    position: absolute;
    bottom: 0.4rem;
    left: 50%;
    transform: translate(-50%,0%);
    cursor: pointer;
    opacity: 1;
}
.model4List:after{
    content: '';
    width: 100%;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(210,214,230,0.69);
    border-radius: 0.1rem;
    backdrop-filter: blur(2px);
}
.model4List:hover:after{
    height: 100%;
    transition: all .5s ease-out;
}
.model4List:hover .model4Title{
    opacity: 0;
    transition: all .5s ease-out;
}
.model4List .model4Info{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,0%);
    z-index: 9;
    font-size: 0.2rem;
    font-weight: 500;
    color: #FFFFFF;
    width: 0.95rem;
    text-align: center;
    opacity: 0;
}
.model4List:hover .model4Info {
    transform: translate(-50%,-50%);
    opacity: 1;
    transition: all .5s ease-out;
}
.model4Icon{
    width: 0.95rem;
    height: 0.95rem;
    margin-bottom: 0.24rem;
    cursor: pointer;
}







/*model7*/
.model7{
    width: 100%;
    height: 5.4rem;
    /*background-image: url("//qjzb.kuleiman.com/record/klm/vrwdt/1/model5_bg.png");*/
    background:#F4F8FD;
}


.select_box {
    width: 19.2rem;
    height: 3.1902rem;
    overflow: hidden;
    margin: 0.55rem auto 1rem;
    position: relative;
}
.select_box .select_log {
    position: absolute;
    z-index: 10;
    width: 7.7301rem;
    right: -0.05rem;
    height: 3.9596rem;
    transform: rotate(180deg);
    background: linear-gradient(267deg, rgba(255,255,255,0) 0%, #F4F8FD 100%);
}

.select_box .select_log2 {
    position: absolute;
    z-index: 10;
    width: 7.7301rem;
    left: 0rem;
    height: 3.9596rem;
    background: linear-gradient(267deg, rgba(255,255,255,0) 0%, #F4F8FD 100%);
}

/*.select_box .select_log {*/
/*    position: absolute;*/
/*    z-index: 10;*/
/*    right: 0rem;*/
/*    transform: rotate(180deg);*/
/*}*/

/*.select_box .select_log2 {*/
/*    position: absolute;*/
/*    z-index: 10;*/
/*    left: 0rem;*/
/*}*/

.line_odd {
    width: 36.2395rem;
    animation: 36s linear 0s infinite normal none running scrollToRight-data-v-6a32e916;
}

@keyframes scrollToRight-data-v-6a32e916 {
    0% {
        transform: translate3d(-50%, 0rem, 0rem);
    }

    100% {
        transform: translate3d(0%, 0rem, 0rem);
    }
}

.line_odd img {
    width: 50%;
    display: inline-block;
    float: left;
}

.line_event {
    width: 36.2395rem;
    animation: 28s linear 0s infinite normal none running scrollToRight-data-v-6a32e916;
}

.line_event img {
    width: 50%;
    display: inline-block;
    float: left;
}

/*model7*/

.model8{
    width: 100%;
    height: 4rem;
    background: url("//qjzb.kuleiman.com/record/klm/vrwdt/1/model8_bg.png") no-repeat;
    background-size: 100% 100%;
}
.model8Title{
    font-size: 0.45rem;
    font-weight: bold;
    color: rgba(38, 42, 71, 1);
    text-align: center;
    padding-top: 0.98rem;
}
.model8Desc{
    font-size: 0.2rem;
    font-weight: bold;
    color: rgba(38, 42, 71, 1);
    margin-top: 0.12rem;
    /*margin-bottom: 0.59rem;*/
    text-align: center;
}

.model8 .model8Info{
    display: flex;
    justify-content: center;
    margin-top: 0.59rem;
}
.model8 .model8Info .inputBox{
    margin-right: 0.24rem;
}
.model8 .model8Info .inputBox input{
    width: 3.73rem;
    height: 0.5rem;
    background: #FFFFFF;
    box-shadow: 0rem 0rem 0.05rem 0rem rgba(0,0,0,0.1);
    border-radius: 0.08rem;
    padding-left: 0.25rem;
    border: none;
    color: #333;
    font-size: 0.2rem;
}
.model8 .model8Info .inputBtn{
    width: 1.69rem;
    height: 0.5rem;
    background: linear-gradient(221deg, #7AD0FF 0%, #316BFF 100%);
    border-radius: 0.08rem;
    text-align: center;
    line-height: 0.5rem;
    color: #fff;
    cursor: pointer;
    font-size: 0.18rem;
}
.model8 .model8Info .inputBtn:hover{
    background: linear-gradient(221deg, #316BFF 0%, #7AD0FF 100%);


}