body {
    /* background: url(img/course-recruit-bg.png); */
    /* background:rgba(255, 255,255, 1); */
    background: linear-gradient(0deg, rgba(191, 188, 188, 1) 0, rgba(191, 188, 188, 1) 100%);
    overflow:hidden;
    overflow-y:auto;
    
}

@keyframes bgani{
    0%{background-size:0px 0px, contain; background-position:170% top; }
    100%{ background-size:contain, contain; background-position:90% top; }
}


.recruit-banner {
    /* background: url(img/recruit-banner.png) no-repeat center top; */
    background: url( './img/5.png' ) no-repeat 90% 0, url( './img/bg.png' ) repeat 100% 0, rgba(210, 37, 41, 1);
    transition:all 200ms ease;
    background-size:contain, contain;
    animation:bgani 1s ease 1;
    /* background-blend-mode: screen; */
    height: 787px;
    color: #fff;
    font-family:bighero;
    position:relative;
    z-index:1;
    clip-path:polygon( 0% 0%, 100% 0%, 100% 70%, 0% 100% );
}

.recruit-banner1 {
    /* background: url(img/recruit-banner.png) no-repeat center top; */
    background: rgba(255, 255, 255, 1);
    background-size:contain, contain;
    /* background-blend-mode: screen; */
    height: 810px;
    color: #fff;
    border:soild 14px blue;
    font-family:bighero;
    position:absolute;
    left:0; top:0;
    z-index:1;
    width:100%;
    clip-path:polygon( 0% 0%, 100% 0%, 100% 68%, 0% 100% );
}


.recruit-banner h1 {
    padding-top: 80px;
    /* font-size: 36px; */
    font-size: 4em;
}

.recruit-banner .recruit-info {
    
    padding-top: 30px;
    line-height: 60px;
    font-size: 20px;
}

.recruit-banner ul li {
    padding-top: 80px;
    float: left;
    font-size: 15px;
    margin-right: 9px;
}

.recruit-banner .btn {
    padding-top: 80px;
    margin-right: 9px;
}

.recruit-course {
    /* margin-top: 40px; */
    position:relative;  
    
}

.classPlate{ background:url('./img/7.png') no-repeat right bottom; }

.recruit-title {
    /* color: #fff; */
    color:rgba(193, 37, 41, 1);
    text-align: center;
    /* position:sticky; */
    padding:2em 0 1em;
    z-index:1;
    /* background:linear-gradient( 90deg, #060e4a 0%, #08134f 100% ); */
    top:0;
}

.recruit-title p {
    /* color: #e2e2e2; */
    margin-top: 10px;
    
}

.recruit-course-list h3 {
    /* line-height: 30px; */
    /* color: #fff; */
    color:black;
    /* font-size: 18px; */
    font-size:1.8em;
    margin-top: 30px;
    margin-bottom: 15px;
}





.recruit-course-list h3 span {
    font-size: 12px;
    /* color: #e2e2e2; */
    color:inherit;
    display:block;
}

.recruit-course-list dl {
    float: left;
    width: 20%;
    /* background:rgba(255, 210, 60, 1); */
    background:rgba(255, 255, 255, .8);
    /* border:solid 3px rgba(255, 210, 60, 1); */
    margin:0 auto 1em;
    
    
    /* background: silver; */
}

.recruit-course-list dl dd {
    padding: 10px;
    transition:background 200ms ease;
}

.recruit-course-list dl dd::before {
    content:'-';
}

.recruit-course-list .dl-2,
.recruit-course-list .dl-4 {
    /* background: rgb(7, 15, 76); */
    
    /* border:solid 3px rgba(210, 37, 41, 1); */
    /* background:rgba(210, 37, 41, 1); */
}

.recruit-course-list dt {
    /* background: #1E9FFF; */
    background:rgba(210, 37, 41, 1);
    height: 60px;
    line-height: 60px;
    color:white;
    text-shadow:1px 1px 0 rgba(0, 0, 0, .5);
    text-align: center;
}

.recruit-course-list .dl-1 dt,
.recruit-course-list .dl-3 dt,
.recruit-course-list .dl-5 dt {
    /* background: rgba(255, 210, 60, 1); */
    background: #676767;
    
}

.suitable {
    /* margin-top: 30px; */
    margin-bottom: 30px;
}

.student-project {
    margin-top: 30px;
}

.student-project .layui-carousel {
    margin-top: 30px;
}

.suitable li {
    color: #fff;
    width: 30%;
    float: left;
    height: 80px;
    padding: 10px;
    margin-top: 20px;
    padding-bottom: 30px;
    background: #2b3284;
}

.suitable li h4 {
    font-size: 36px;
    margin: 10px 0;
}

.suitable .li-2 {
    margin-left: 30px;
}

.suitable .li-3 {
    float: right;
}

.student-works {
    margin: 30px 0;
}

.student-works ul {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
}

.student-works li {
    width: 30%;
    padding: 10px;
    margin-top: 20px;
    /* color: black; */
    background: rgba( 238, 238, 238, .85 );
    border:solid 1px white;
    /* background:rgba(255, 210, 60, 1); */
}

.student-works li:nth-of-type( even ){
    /* background:rgba(210, 37, 41, 1); */
    background:rgba(255, 210, 60, .85);
}

.student-works li:nth-of-type( even ) p{ color:#444; }

.pay-info {
    margin-top: 30px;
    height: 437px;
    background:radial-gradient( circle, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 70%, rgba(0,0,0,.1) 100% ) repeat, url('./img/6.png') no-repeat center center ;
    /* background:url('./img/6.png') no-repeat center center, linear-gradient(90deg, yellow 0%, rgba(210, 37, 41, 1) 100%) ; */
    background-size:cover, cover;
    /* background: #3240a5; */
    color: #fff;
    text-align: center;
    position:relative;
    display:flex;
    flex-direction:column; 
    justify-content:center;
    overflow:hidden;
}

.pay-info::before{ border:solid 8px rgba(191, 188, 188, 1); content:''; padding:8px; width:100px; height:100px; clip-path:polygon(0% 0%, 100% 0, 0 100%); background:rgba(255, 210, 60, 1); left:0; top:-1px; position:absolute;}
.pay-info::after{ border:solid 8px rgba(191, 188, 188, 1); padding:8px; background-clip:padding-box; content:''; width:100px; height:100px; clip-path:polygon(100% 0%, 100% 100%, 0 100%); background:rgba(210, 37, 41, 1); right:-1px; bottom:0; position:absolute;}

.pay-info h5 {
    padding-top: 60px;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 4px;
}

.pay-info span {
    font-size: 36px;
    padding: 0 5px;
}

.pay-info span font {
    /* color: #d9e42a; */
    font-family:naka;
    color:rgba(255, 210, 60, 1);
}

.pay-info .discount p {
    padding-top: 40px;
}

.pay-info .dividing-line-pay {
    position: relative;
    padding-top: 40px;
    width: 500px;
    margin: 0 auto;
}

.pay-info .dividing-line-pay .line {
    background: #517def;
    height: 1px;
}

.pay-info .dividing-line-pay p {
    position: absolute;
    top: 30px;
    left: 35%;
    /* background: #3240a5; */
    padding: 0 10px;
}

.pay-info .pay-btn {
    /* margin-top: 30px; */
    margin-top: 10px;
}


/* modify */

    
    .recruit-course-list dl, h3, .student-works ul li, .student-works ul li p, .student-works ul li p::before, .suitable li h4::before{ -webkit-transition:all 200ms ease; -moz-transition:all 200ms ease; -o-transition:all 200ms ease; transition:all 200ms ease; }

    .recruit-info p{ color:white; line-height:normal; padding:.4em 0; }
    .headerList{  }
        .headerList li:not(:last-of-type){ margin:0 1em 0 0; }
        .headerList li strong{ font-size:1.1em; padding-right:.4em; }

    h2{ font-size:3.5em; font-family:bighero;}
    h2 + p{ position:relative; padding:.5em 0 0; font-size:1.2em; color:black; }
        /* h2 + p::before{ content:''; position:absolute; left:0; top:0; width:100%; height:1px; background:linear-gradient( 90deg, transparent 0%, silver 50%, transparent 100%) ; }   */


    h3{ /*border-left:solid 6px white; padding-left:1em;*/  margin:2em auto 1em!important; position:relative; padding-left:2.5em; }
        h3:hover::before{}
        h3::before{ box-sizing:border-box; position:absolute; left:0; top:10px; z-index:1; content:attr( title ); font:bold 1.5em/normal bighero; vertical-align:middle; background:rgba(210, 37, 41, 1); color:#ffd23c; text-align:center; display:inline-block; width:40px; height:40px;  line-height:40px; }
        h3::after{ box-sizing:border-box; position:absolute; left:0; top:10px; content:''; transform:rotate(-45deg); background:rgba(210, 37, 41, 1); color:#ffd23c; text-align:center; display:inline-block; width:40px; height:40px; }
    

    .recruit-banner{ position:relative; }

    .student-project{ background:rgba(210, 37, 41, 1); padding:10em 0 12em; clip-path:polygon(0% 0, 100% 20%, 100% 100%, 0 80%); position:relative; top:-3em; }

    .student-project .layui-carousel{-webkit-box-reflect: below 3px linear-gradient( 180deg, transparent 0%, transparent 80%, rgba( 255, 255, 255, .2 ) 100% );    }

    .recruit-course-list{ }
    .recruit-course-list dl{ position:relative; box-sizing:border-box; background:linear-gradient(0deg, transparent 0%, white 40%, white 100%); }
    .recruit-course-list:hover dl{ opacity:.3; -webkit-filter:blur(2px); }
    .recruit-course-list:hover dl:hover{ opacity:1; transform:scale(1.1) ; z-index:1;  -webkit-filter:blur(0); }

    .recruit-course-list dl dd:hover{ background:rgba(255, 255, 255, 1); }
    /* .recruit-course-list:hover dl:hover dt{ background:currentColor; } */


    .recruit-course-list dt{ font-size:1.1em; font-weight:bold; }

    .suitable{}
         .suitable .recruit-title{ padding-bottom:4em; }
        .suitable li h4{ position:relative; font-size:2.7em; line-height:1; margin:0 0 .2em; } /* override */
        .suitable li h4::before{ content:''; width:0; display:inline-block; vertical-align:middle; margin-right:.2em; border-bottom:solid 1px white; } 
        .suitable li:hover h4::before{ width:10px; } 
        .suitable li p{ font-size:1.05em;}
        .suitable ul{ display:flex; align-items:center; justify-content:center; }
        .suitable ul li{ text-shadow:0 0 .4em rgba( 0, 0, 0, .8 ); border-radius:.2em; flex:1; padding:1.5em; margin:0!important; box-sizing:border-box; height:auto; }
        .suitable ul li:first-of-type{ background:rgba(210, 37, 41, 1); }
        /* rgba(255, 210, 60, 1);rgba(210, 37, 41, 1) */
    
        .suitable ul li:nth-of-type(2){ background:blueviolet; margin:0 1em!important; }
        .suitable ul li:last-of-type{ background:rgba(49, 47, 40, 1); }
        /* .suitable ul li:first-of-type{ background:blueviolet; }
        .suitable ul li:last-of-type{ background:orangered; }
        .suitable ul li:nth-of-type(2){ background:#1E9FFF; margin:0 1em!important; } */

    .pay-info{ border-radius:.2em; text-shadow:1px 1px 0 rgba( 0, 0, 0, .4 ); }
    .pay-info span{ font-weight:bold; }
    .pay-info h5{ font-size:3em; }
    .pay-info .discount p{ padding:0; }
    .pay-info .discount{  padding:.5em 0 ; }
    .pay-info .pay-btn .layui-btn{ padding:.5em 3em; border-radius:3em; box-shadow:0 0 1em rgba( 255, 87, 34, .5 ); text-shadow:1px 1px 0 rgba( 0, 0, 0, .2 ); line-height:1; } /* override */
    .pay-info .pay-btn .layui-btn:active{ box-shadow:0 0 1em rgba( 255, 87, 34, .8 ); text-shadow:1px 1px 0 rgba( 0, 0, 0, .2 ); line-height:1; } /* override */
    .pay-info .dividing-line-pay{ padding:1em 0 .5em; height:auto; }
    .pay-info .dividing-line-pay p{ position:relative; top:unset; left:unset; }

    .pay-info .dividing-line-pay p::before, .pay-info .dividing-line-pay p::after{ content:''; display:inline-block; vertical-align:middle; margin:0 1em; width:100px; height:1px; background:rgba(255,255,255,.5); }
    .pay-info .dividing-line-pay p::before{ background:linear-gradient( 90deg, transparent 0%, white 100% ) ; }
    .pay-info .dividing-line-pay p::after{ background:linear-gradient( 90deg, white 0%, transparent 100% ) ; }

    .pay-info .dividing-line-pay .line{ display:none; }


    .student-works{}
        .student-works ul{}
        .student-works ul li{ border-radius:.2em; padding:1em; }
        .student-works ul li p{ color:#555; line-height:1.7; position:relative; }
        .student-works ul li p small{ font-size:.6em; display:block; }
        .student-works ul li p:first-of-type{ font-size:1.5em; font-weight:bold; font-style:normal; color:black; padding:0 0 .7em; }
        .student-works ul li p:first-of-type::before{ content:''; position:absolute; bottom:.5em; width:0; border-bottom:solid 1px rgba(255, 210, 60, 1); }

        .student-works ul li:hover p:first-of-type::before{ width:30px; }
        .student-works ul li:hover{ background:rgba(255,255,255,1); box-shadow:0 0 2em rgba( 255, 255, 255, .4 ); }
        .student-works ul li:hover p{ color:#333; }
        .student-works ul li:hover p:first-of-type{ color:rgba(210, 37, 41, 1); }
        
        .student-works .layui-clear:after{ content:unset; }

    .recruit-banner{ background-size:contain 100%; position:relative; }
    .layui-main{ }

    @-webkit-keyframes subEle1Ani {
        0%, 100%{ transform:scale(.5); opacity:0; top:50%; }
        50%{ transform:scale(1.5); opacity:1; top:30%; }
    }
    @keyframes subEle1Ani{
        0%, 100%{ transform:scale(.5); opacity:0; top:50%; }
        50%{ transform:scale(1.5); opacity:1; top:30%; }
    }

    @-webkit-keyframes subEle2Ani {
        0%, 100%{ transform:scale(.5); opacity:0; top:50%; }
        50%{ transform:scale(1.5); opacity:1; top:30%; }
    }
    @keyframes subEle2Ani{
        0%, 100%{ transform:scale(.5); opacity:0; top:50%; }
        50%{ transform:scale(1.5); opacity:1; top:30%; }
    }

    @-webkit-keyframes subEle3Ani {
        0%, 100%{  width:6px; height:6px; transform:scale(.5); opacity:0; top:50%; }
        50%{ transform:scale(1.5); opacity:1; top:30%; }
    }
    @keyframes subEle3Ani{
        0%, 100%{  width:6px; height:6px; transform:scale(.5); opacity:0; top:50%; }
        50%{ transform:scale(1.5); opacity:1; top:30%; }
    }

    @-webkit-keyframes subEle4Ani {
        0%, 100%{ box-shadow:0 0 1.2em currentColor, 0 0 1.5em currentColor; }
        50%{ box-shadow:0 0 .2em currentColor, 0 0 0 currentColor; }
    }
    @keyframes subEle4Ani{
        0%, 100%{ box-shadow:0 0 1.2em currentColor; }
        50%{ box-shadow:0 0 .2em currentColor; }
    }

    @-webkit-keyframes subEle5Ani {
        0%, 100%{ transform:scale(0); }
        50%{ transform:scale(1); }
    }
    @keyframes subEle5Ani{
        0%, 100%{ transform:scale(0); }
        50%{ transform:scale(1); }
    }


    .recruit-banner .sufEle1, .recruit-banner .sufEle2, .recruit-banner .sufEle3, .recruit-banner .sufEle4, .recruit-banner .sufEle5{ position:absolute; border-radius:50%; opacity:0; background:rgba(255,255,255,1); box-shadow:0 0 1em currentColor; color:white; }

    .recruit-banner .sufEle1{ width:8px; height:8px; left:85%; top:40%; -webkit-animation:subEle1Ani 5s ease infinite; animation:subEle1Ani 5s ease infinite; }
    .recruit-banner .sufEle2{ width:5px; height:5px; left:83%; top:50%;  -webkit-animation:subEle2Ani 12s ease infinite; animation:subEle2Ani 12s ease infinite; }
    .recruit-banner .sufEle3{ width:12px; height:12px; left:80%; top:20%;  -webkit-animation:subEle3Ani 8s ease infinite; animation:subEle3Ani 8s ease infinite; }

    /* position */
    .recruit-banner .sufEle4{ width:7px; height:7px; left:677px; bottom:203px; opacity:1;  -webkit-animation:subEle4Ani 100ms ease infinite; animation:subEle4Ani 100ms ease infinite; }
    .recruit-banner .sufEle5{ width:7px; height:7px; left:455px; bottom:70px; opacity:1;  -webkit-animation:subEle5Ani 10ms ease infinite; animation:subEle5Ani 10ms ease infinite; }


    .questionClass{ background: radial-gradient( circle at 10% 100%, rgba(191, 188, 188, .5) 0%, rgba(191, 188, 188, .4) 100% ), url('./img/8.png') no-repeat 5% bottom ; /*background-blend-mode:multiply;*/ padding:0 0 15em; }


    .teacherTeamInfo{ color:white; }
        .teacherTeamInfo ul{ display:flex; box-sizing:border-box; flex-wrap:wrap; width:calc(100% + 10px); }
        .teacherTeamInfo ul li{
            width:31.5%; 
            height:342px;
            margin:10px;
            position:relative; 
            perspective:500px;
            box-sizing:border-box;
        }
         .teacherTeamInfo ul li:nth-of-type(3n){ }

         .teacherTeamInfo .recruit-title{ padding:4em 0; }



        .teacherTeamInfo ul li > div:last-of-type{ width:100%; box-sizing:border-box; background:white; padding:2em; /*border:solid 2px rgba(255, 210, 60, 1);*/ border:solid 2px rgba(210, 37, 41, 1); }
        .teacherTeamInfo ul li > div:last-of-type p{ overflow:hidden; font-size:14px; padding:2em 0; font-weight:bold; line-height:1.7; color:#444; }

        .teacherTeamInfo ul li > div:last-of-type h4{ font-size:31px; position:relative; color:rgba(210, 37, 41, 1); padding:.4em 0; }

        .teacherTeamInfo ul li > div:last-of-type h4::after{ content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:20px; height:4px; background:currentColor; }

        .teacherTeamInfo ul li > div{
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            position:absolute; 
            -webkit-backface-visibility:hidden;
            backface-visibility:hidden;
            transition:all 1s ease;
            left:0;
            top:0;
            width:100%; 
            height:100%;
        }

        .teacherTeamInfo ul li > div:first-of-type{ background:linear-gradient(0deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 100%), linear-gradient(90deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 100%), rgba(25, 25, 25, 1); background-size:2px 2px, 2px 2px; border-radius:.4em; }

        .teacherTeamInfo ul li > div:first-of-type img{ display:block; background:white; width:80%; margin:0 auto; box-sizing:border-box; padding:.05em; border-radius:50%; }
        .teacherTeamInfo ul li > div:first-of-type p strong{ display:block; position:relative; }

        .teacherTeamInfo ul li:hover > div:first-of-type{ transform:rotateY(-180deg); }

            .teacherTeamInfo ul li > div:first-of-type p{ font-size:31px;}
            .teacherTeamInfo ul li > div:first-of-type p strong{ position:relative; margin:.5em auto 0; padding:.4em 0; }
            .teacherTeamInfo ul li > div:first-of-type p strong::after{ content:''; position:absolute; left:50%; top:0; transform:translateX(-50%); width:20px; height:4px; background:currentColor; }

        .teacherTeamInfo ul li > div:last-of-type{ transform:rotateY(180deg); border-radius:.4em; }
        .teacherTeamInfo ul li:hover > div:last-of-type{ transform:rotateY(0); }