/* 通用 */
.floor{
    padding: 40px 0;
}
.page-width{
    width: 1520px;
}
.common-title{
    border-bottom: 1px solid rgba(51,51,51,0.2);
    margin-bottom: 20px;
}
.common-title h2{
    line-height: 24px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 24px;
    color: #18388B;
    padding-bottom: 11px;
    display: inline-block;
    position: relative;
}
.common-title h2::before{
    content: '';
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 50%;
    height: 2px;
    background: #FE0000;
}
.common-title h2::after{
    content: '';
    display: block;
    position: absolute;
    bottom: -1px;
    right: 0;
    width: 50%;
    height: 2px;
    background: #18388B;
}
/* banner */
.banner{
    background: url('bannerbg.png') no-repeat center;
    background-size: cover;
}
.banner-box{
    position: relative;
    height: 584px;
}
.login-box{
    width: 326px;
    height: 416px;
    background: #FFFFFF;
    border-radius: 12px;
    position: absolute;
    top: 50%;
    margin-top: -208px;
    right: 100px;
}
.login-box .ks-user-login-popup{
    padding: 20px 36px;
}
.login-box .ks-user-login-form-item__input input[name="mobilecode"]{
    width: 147px !important;
}
.login-box .ks-user-login-sendcode{
    padding: 0 10px !important;
    border-color: #18388B;
    color: #18388B;
}
.login-box #phone_code{
    padding: 0 9px;
}
.login-box .ks-tab-item.active,.login-box .ks-user-login-reg-text a{
    color: #18388B;
}
.login-box .ks-tab-item.active::after{
    background-color: #18388B;
    height: 1px;
}
.logined-box{
    padding: 40px 36px;
    box-sizing: border-box;
}
.login-box_user{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.login-box_userimg{
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
}
.login-box_userimg img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.login-box_username{
    font-size: 16px;
    font-weight: 500;
    height: 26px;
    line-height: 26px;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 20px;
}
.login-box_usernav{
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.login-box_usernav a{
    display: block;
    width: 45%;
    text-align: center;
    border-radius: 5px;
    line-height: 35px;
    border: 1px solid #9E9E9E;
    font-size: 14px;
    margin-bottom: 15px;
}
.login-box_out a{
    display: block;
    width: 100%;
    line-height: 44px;
    background-color: #4184f5;
    border:1px solid #4184f5;
    color: #fff;
    text-align: center;
    font-size: 16px;
    border-radius: 4px;
}
/* f1 */
.floor1{
    padding-bottom: 0;
}
.floor1-list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-right: -40px;
}
.floor1-item{
    width: 350px;
    height: 152px;
    background: #F5F9FF;
    margin-right: 40px;
    margin-bottom: 40px;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    box-sizing: border-box;
}
.floor1-item_icon{
    width: 72px;
    height: 72px;
    background: linear-gradient( 315deg, #1F48B3 0%, #2664FF 100%);
    border-radius: 4px;
}
.floor1-item_icon img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.floor1-item_info h2{
    line-height: 28px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 28px;
    margin-bottom: 16px;
    color: #333;
}
.floor1-item_info p{
    height: 18px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 18px;
    color: #757575;
}
.floor1-item:hover{
    box-shadow: 0px 2px 12px 1px rgba(153,153,153,0.55);
}

/* f2 */
.floor2{
    height: 150px;
}
.floor2 img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* f3 */
.floor3{
    padding-bottom: 20px;
}
.floor3-list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-right: -40px;
}
.floor3-item{
    width: 350px;
    height: 152px;
    background: #FFF2F1;
    border-radius: 4px;
    margin-right: 40px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    box-sizing: border-box;
}
.floor3-item_icon{
    width: 72px;
    height: 72px;
    background: linear-gradient( 315deg, #B71602 0%, #D91A02 100%);
    border-radius: 4px;
}
.floor3-item_icon img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.floor3-item_info h2{
    line-height: 28px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 28px;
    margin-bottom: 16px;
    color: #333;
}
.floor3-item_info p{
    height: 18px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 18px;
    color: #757575;
}

/* f4 */
.floor4{
    background: #A5251C;
}
.floor4-title{
    display: block;
    height: 150px;
    width: 100%;
    object-fit: cover;
}
.floor4-border{
    width: 100%;
    object-fit: cover;
    height: 36px;
    display: block;
}
.floor4-box{
    height: 348px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.floor4-item{
    width: 350px;
    height: 232px;
    background: linear-gradient( 132deg, #FFF2F1 0%, #FFD3CF 100%);
    border-radius: 4px;
    border: 1px solid #FACB89;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.floor4-item_icon{
    width: 88px;
    height: 88px;
    border-radius: 88px;
    background: linear-gradient(#FFEBE8 0%, #FFF8F7 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}
.floor4-item_icon img{
    display: block;
    width: 64px;
    height: 64px;
}
.floor4-item h2{
    line-height: 28px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 28px;
    color: #333333;
    margin-bottom: 16px;
}
.floor4-item p{
    line-height: 16px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 16px;
    color: #757575;
}
.floor4-item:hover h2{
    color:#B71602
}
/* f5 */
.floor5-box{
    display: flex;
    flex-direction: row;
    align-items: center;
    /* justify-content: space-between; */
    margin-right: -40px;
}
.floor5-item{
    width: 350px;
    height: 465px;
    border-radius: 8px;
    border: 1px solid #D6D6D6;
    position: relative;
    overflow: hidden;
    margin-right: 40px;
    box-sizing: border-box;
}
.floor5-item_img{
    display: block;
    width: 100%;
    height: 100%;
}
.floor5-item_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.floor5-item_info{
    width: 100%;
    box-sizing: border-box;
    height: 208px;
    background: rgb(0,0,0,0.8);
    border-radius: 8px;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 30px 20px 0;
}
.floor5-item__title{
    line-height: 28px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 28px;
    color: #FFFFFF;
    display: block;
    text-align: center;
    margin-bottom: 30px;
}
.floor5-item__intro{
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 18px;
    color: rgba(255,255,255,.4);
    line-height: 30px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 90px;
}
/* f6 */
.floor6{
    background:#FFFBEF;
}
.floor6-title{
    display: block;
    height: 150px;
    object-fit: cover;
    width: 100%;
}
.floor6-box{
    padding: 40px 0 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.floor6-item{
    width: 280px;
}
.floor6-item_top{
    height: 140px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
.floor6-item_top h2{
    line-height: 32px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 32px;
    margin-bottom: 16px;
}
.floor6__top__info{
    width: 192px;
    line-height: 28px;
    border-radius: 14px;
    text-align: center;
    color: #fff;
}
.floor6-item:nth-child(1) .floor6-item_top{
    background: linear-gradient( 315deg, #FFE7CB 0%, #FFF5E9 39%, #FFE7CB 100%);
}
.floor6-item:nth-child(1) .floor6-item_top h2{
    color: #333333;
}
.floor6-item:nth-child(1) .floor6__top__info{
    background: #F9931E;
}
.floor6-item:nth-child(2) .floor6-item_top{
    background: linear-gradient( 315deg, #F4B47A 0%, #FCDEBE 39%, #F4B47A 100%);
}
.floor6-item:nth-child(2) .floor6-item_top h2{
    color: #723611;
}
.floor6-item:nth-child(2) .floor6__top__info{
    background: #AE5100;
}
.floor6-item:nth-child(3) .floor6-item_top{
    background: linear-gradient( 312deg, #FF9233 0%, #FFC480 48%, #FEA455 100%);
}
.floor6-item:nth-child(3) .floor6-item_top h2{
    color: #723611;
}
.floor6-item:nth-child(3) .floor6__top__info{
    background: #723611;
}
.floor6-item:nth-child(4) .floor6-item_top{
    background: linear-gradient( 312deg, #FF4B30 0%, #FF7730 100%);
}
.floor6-item:nth-child(4) .floor6-item_top h2{
    color: #FFFFFF;
}
.floor6-item:nth-child(4) .floor6__top__info{
    background: #CC2914;
}
.floor6-item:nth-child(5) .floor6-item_top{
    background: linear-gradient( 316deg, #46352E 0%, #604A3D 39%, #46352D 100%);
}
.floor6-item:nth-child(5) .floor6-item_top h2{
    color: #FFD7AC;
}
.floor6-item:nth-child(5) .floor6__top__info{
    background: linear-gradient( 90deg, #5D2D0E 0%, #8A491F 49%, #5E2D0F 100%);
}
.floor6-item_bottom{
    height: 997px;
    box-sizing: border-box;
    padding: 0px 6px 6px;
    border-radius: 8px;
}
.floor6__bottom_top{
    height: 126px;
    padding: 20px 14px 0;
    box-sizing: border-box;
}
.floor6__bottom_top h2{
    line-height: 16px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 16px;
    color: #842C05;
    margin-bottom: 12px;
}
.floor6__bottom_top p{
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 14px;
    color: #842C05;
    line-height:20px;
}
.floor6-item:nth-child(1) .floor6-item_bottom{
    background: linear-gradient( 358deg, rgba(255,230,202,0.19) 0%, #FFE6CA 41%, #FFEBD5 100%);
}
.floor6-item:nth-child(2) .floor6-item_bottom{
    background: linear-gradient( 358deg, rgba(241,220,201,0.2) 0%, #EED4BB 41%, #E4BC95 90%, #F8DBBF 100%);
}
.floor6-item:nth-child(3) .floor6-item_bottom{
    background: linear-gradient( 358deg, rgba(255,227,202,0.19) 0%, #FFE3CA 41%, #FEC18C 88%, #FFD09B 100%);
}
.floor6-item:nth-child(4) .floor6-item_bottom{
    background: linear-gradient( 358deg, rgba(255,220,202,0.19) 0%, #FFDCCA 41%, #FFE3D5 100%);
}
.floor6-item:nth-child(5) .floor6-item_bottom{
    background: linear-gradient( 360deg, rgba(244,226,215,0.2) 0%, #F4E2D7 41%, #E7C6AF 91%, #FFFAF6 100%);
}
.floor6__bottom_center{
    background: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
}
.floor6___center_item h3{
    line-height: 36px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 16px;
    padding: 0 14px;
}
.floor6-item:nth-child(1) .floor6___center_item h3{
    background: linear-gradient( 270deg, #F0F0F0 0%, #F9F9F9 100%);
}
.floor6-item:nth-child(2) .floor6___center_item h3{
    background: linear-gradient( 270deg, #FFEDDC 0%, rgba(255,252,245,0.5) 100%);
}
.floor6-item:nth-child(3) .floor6___center_item h3{
    background: linear-gradient( 270deg, #FFE8D4 0%, rgba(255,232,212,0.3) 100%);
}
.floor6-item:nth-child(4) .floor6___center_item h3{
    background: linear-gradient( 270deg, #FFEEE5 0%, rgba(255,248,245,0.5) 100%);
}
.floor6-item:nth-child(5) .floor6___center_item h3{
    background: linear-gradient( 270deg, #FFF8F4 0%, rgba(255,248,244,0.6) 100%);
}
.floor6___center_item:nth-child(1) .floor6___center__box{
    height: 279px;
}
.floor6___center_item:nth-child(2) .floor6___center__box{
    height: 176px;
}
.floor6___center_item:nth-child(3) .floor6___center__box{
    height: 68px;
}
.floor6___center_item:nth-child(4) .floor6___center__box{
    height: 72px;
}
.floor6___center__box{
    padding: 12px 14px;
    box-sizing: border-box;
}
.floor6___center__box p{
    line-height: 14px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 14px;
    margin-bottom: 12px;
    white-space: nowrap;
}
.floor6___center__box p:last-child{
    margin-bottom: 0;
}
.floor6___center__serve{
    display: flex;
    flex-direction: row;
}
.floor6___center_bottom{
    height: 36px;
    line-height: 36px;
    background: linear-gradient( 180deg, #53545B 0%, #424348 100%);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 14px;
}
.floor6___center__model{
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 16px;
    color: #F6E3C0;
}
.floor6___center__tips{
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 14px;
    color: #F6E3C0;
}
.floor6__bottom_bottom{
    height: 88px;
    background: linear-gradient( 270deg, #FFF2D8 0%, #FFEDC8 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.floor6__bottom_bottom span{
    width: 228px;
    height: 48px;
    background: linear-gradient( 134deg, #FE7E4B 0%, #E52E24 100%);
    box-shadow: inset 2px 3px 6px 1px #FD8855;
    border-radius: 24px;
    border: 2px solid #FFFFFF;
    text-align: center;
    line-height: 44px;
    box-sizing: border-box;
    color: #fff;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 18px;
    position: relative;
}
.floor6__bottom_bottom label{
    width: 68px;
    text-align: center;
    line-height: 18px;
    height: 18px;
    background: #FFF2F1;
    border-radius: 9px 9px 9px 0px;
    border: 1px solid #B71602;
    position: absolute;
    font-size: 13px;
    color: #B71602;
    right: 0;
    top: -9px;
}
.floor6-item:nth-child(4) .floor6__bottom_bottom span,.floor6-item:nth-child(5) .floor6__bottom_bottom span{
    font-size: 14px;
}
.serve_label{
    width: 40px;
    height: 18px;
    background: linear-gradient( 270deg, #FB180B 0%, #FF8100 100%);
    border-radius: 9px;
    text-align: center;
    line-height: 18px;
    color: #fff;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 12px;
    margin-right: 8px;
}


/* 分类课程开始 */
.class-floor{
    padding-bottom:0;
}
.course-list ul{
    margin-right: -40px;
}
.course-list li{
    float: left;
    width: 25%;
    margin-bottom: 40px;
}
.course-list-item{
    margin-right: 40px;
    box-shadow: 0px 15px 16px 0px rgba(11, 80, 163, 0.06);
    border-radius: 10px;
    overflow: hidden;
}
/* .course-list li:nth-child(5),.course-list li:nth-child(6),.course-list li:nth-child(7),.course-list li:nth-child(8){
    margin-bottom: 0;
} */
.course-list-item_img{
    position: relative;
    height: 200px;
}
.course-list-item-cover{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.35);
    opacity: 0;
    transition: all .25s;
}
.course-list-item-cover:before {
    content: "";
    left: 50%;
    top: 50%;
    margin: -30px 0 0 -30px;
    width: 60px;
    height: 60px;
    transition: all .25s;
    background: url(hk_new_index_icons3.png) 0 -115px;
    position: absolute;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}
.course-list-item:hover .course-list-item-cover {
    opacity: 1;
}
.course-list-item:hover .course-list-item-cover:before {
    -webkit-transform: scale(1);
    transform: scale(1);
}
.course-list-item_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.course-list-item_img label{
    position: absolute;
    width: 68px;
    line-height: 28px;
    text-align: center;
    left: 8px;
    top: 8px;
    background: #FF762F;
    font-size: 14px;
    color: #fff;
    border-radius: 4px;
}
.course-list{
    display: none;
}
.course-list:first-child{
    display: block;
}
.course-list-item_info{
    padding: 8px 14px;
}
.course-list-item_info a{
    font-size: 16px;
    font-weight: bold;
    line-height: 30px;
    height: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}
.course-list-item__info{
    margin-bottom: 6px;
}
.course-list-item__info span{
    font-size: 12px;
    font-weight: 400;
    color: #333333;
    line-height: 30px;
    vertical-align: middle;
}
.course-list-item__info img{
    margin-right: 22px;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    border-radius: 24px;
    object-fit: cover;
}
.course-list-item__info font{
    margin: 0 9px;
    color: rgb(0 0 0 / 10%);
    vertical-align: middle;
}
.course-list-item__label span{
    font-size: 12px;
    padding: 0px 6px;
    background: rgb(255 118 47 / 4%);
    font-weight: 400;
    color: #FF762F;
    line-height: 28px;
    display: inline-block;
}
/* 分类课程结束 */