@media (max-width: 1550px){
    /*header => notebook*/
    .header .nav .menu{
        width: 600px;
    }

    /*banner => notebook*/
    .banner{
        height: 800px;
    }
    .banner #bnimg1{
        width: 430px;
        left: 70px;
    }
    .banner #bnimg2{
        height: 800px;
    }
    .banner #bnimg3{
        top: -650px;
    }
    .banner #bnimg4{
        width: 200px;
        height: 120px;
        left: 350px;
    }
    .banner .content{
        max-width: 1400px;
    }
    .banner .content .bn-title{
        width: 650px;
        transform: translateY(-10px);
    }

    /*introduce => notebook*/
    .introduce{
        height: 561px;
    }

    /*feature => notebook*/
    .feature .content2 .item{
        background-size: cover;
        height: 700px;
    }
    .feature .content2 .item .box{
        margin: 30px auto auto 50px;
    }

    /*sales => notebook*/
    .ask img:nth-last-of-type(1){
        position: absolute;
        bottom: 40px;
        right: 200px;
        width: 150px;
    }
    .ask img:nth-last-of-type(2){
        position: absolute;
        bottom: 40px;
        left: 200px; 
        width: 150px;
    }
}

@media (max-width: 860px){
    html{
        font-size: 26px;
    }
    body{
        background-size: auto;
    }

    /*title => pad*/
    .title{
        max-width: unset;
        width: 90%;
    }
    .title h2{
        line-height: 70px;
    }
    .title h4{
        line-height: 34px;
    }

    /*start => pad*/
    .start video:nth-child(1){
        display: none;
    }
    .start video:nth-child(2){
        display: block;
    }

    /*header => pad*/
    .header{
        height: 90px;
    }
    .header.sticky{
        backdrop-filter: unset;
    }
    .header .nav{
        width: 90%;
        margin: 0 auto;
    }
    .header .nav .logo{
        width: 500px;
    }
    .header .nav .menu{
        display: none;
    }
    .header .nav .menu-phone{
        display: initial;
    }
    .header .nav .menu-phone .menu-open i{
        color: #3c3c3c;
        font-size: 1.7em;
    }
    .header.sticky .nav .menu-phone .menu-open i{
        color: #21a248;
    }
    .menu-block{
        position: fixed;
        top: 0;
        right: 0;
        width: 400px;
        height: 100%;
        background-color: #fff;
        box-shadow: -5px 0 15px #3c3c3c;
        text-align: center;
        z-index: 350;
    }
    .menu-block .menu-close{
        position: absolute;
        top: 15px;
        right: 20px;
        color: #21a248;
        font-size: 1.4em;
    }
    .menu-block .content{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        margin: 80px 0;
    }
    .menu-block a{
        width: 60%;
        text-decoration: none;
        font-size: 0.9em;
        color: #21a248;
        padding: 30px;
        letter-spacing: 2px;
        border-bottom: 1px solid #21a248;
    }
    .menu-block a:last-child{
        border-bottom: unset;
    }

    /*banner => pad*/
    .banner{
        background-image: url(../images/banner-bg-pad.png);
        background-size: cover;
        background-repeat: no-repeat;
        height: 1200px;
    }
    .banner .content{
        max-width: unset;
        flex-direction: column;
        width: 100%;
    }
    .banner .content .bn-title{
        margin: -20px auto 0;
        padding: 0;
        order: 1;
    }
    .banner .content .bn-title p{
        width: 100%;
        font-size: 1em;
    }
    .banner .content .bn-title a{
        font-size: 1em;
        width: 300px;
    }
    .banner #bnimg1{
        display: none;
    }
    .banner #bnimg2{
        height: 900px;
    }
    .banner #bnimg3{
        left: -300px;
        right: unset;
        margin: unset;
    }
    .banner #bnimg4{
        left: 150px;
    }

    /*introduce => pad*/
    .introduce{
        max-width: unset;
        width: 100%;
        height: 1000px;
    }
    .introduce .imgbox{
        max-width: unset;
        width: 30%;
    }
    .introduce .wordbox{
        max-width: unset;
        width: 70%;
        text-align: left;
    }
    .introduce .wordbox h2{
        margin: 0 0 0 -200px;
    }
    .introduce .wordbox p{
        font-size: 0.7em;
        line-height: 30px;
        width: 80%;
    }


    /*cooperate => pad*/
    /* .cooperate .content{
        max-width: unset;
        width: 90%;
    }
    .cooperate .content .wordbox img{
        width: 90%;
    }
    .cooperate .content .wordbox p{
        font-size: 20px;
        line-height: 30px;
    }
    .cooperate .content .imgbox img{
        width: 100%;
    }
    .cooperate .content .imgbox a{
        padding: 10 30px;
    }
    .cooperate .content .imgbox a br{
        display: initial;
    }
    .cooperate .content .imgbox a span{
        display: none;
    } */

    /*vlog => pad*/
    .vlog .content iframe{
        width: 100%;
        height: 400px;
    }

    /*course => pad*/
    .course .content .item .wordbox{
        padding: 30px 10px 20px;
    }
    .course .content .item .wordbox p{
        height: 90px;
    }
    .course .content .item .wordbox a{
        padding: 5px 0;
        width: 100%;
        display: block;
        margin: 5px 0;
    }
    .course .content .item .wordbox .discount{
        padding: 5px 0;
        width: 100%;
        display: block;
        margin: 5px 0;
    }

    /*modal form => pad*/
    .modal form{
        width: 100%;
        margin: auto;
    }

    /*feature => pad*/
    .feature .content .item{
        max-width: unset;
        width: 50%;
        height: unset;
        padding: 50px 0;
    }
    .feature .content .item .box .word{
        line-height: 26px;
    }
    .feature .content2 .item{
        background-size: cover;
        height: 700px;
    }
    .feature .content2 .item .box{
        width: 85%;
        margin: 30px auto 0;
    }
    .feature .content2 .item .box h4{
        font-size: 1em;
    }

    /*information => pad*/
    .information .box{
        width: 90%;
        background-position: left bottom;
    }
    .information .box .title h2{
        font-size: 1.2em;
    }
    .information .box .item{
        flex-direction: column;
        padding: 10px 0;
        text-align: center;
    }
    .information .box .item p:nth-child(1){
        font-size: 1em;
        line-height: 30px;
        letter-spacing: 2px;
        border: 0;
    }
    .information .box .item p:nth-child(2){
        font-size: 0.75em;
        line-height: 26px;
    }
    .information .box p a{
        font-size: 1em;
    }

    /*course-time => pad*/
    .information .course_calendar{
        max-width: unset;
        width: 90%;
    }
    .information .course_calendar img{
        height: 440px;
    }

    /*sales => pad*/
    .sales .content .item h5{
        padding: 30px 0 40px;
    }
    .sales .content .item img{
        width: 100px;
        top: -15px;
        right: -30px;
    }
    .sales .additional{
        width: 90%;
    }

    /*ask form => pad*/
    .ask form{
        width: 90%;
        margin: 20px auto 0;
    }
    .ask img:nth-last-of-type(1){
        position: absolute;
        bottom: 30px;
        right: 50px;
        width: 120px;
    }
    .ask img:nth-last-of-type(2){
        position: absolute;
        bottom: 30px;
        left: 50px; 
        width: 120px;
    }

    /*trivia => pad*/
    .trivia .content{
        max-width: unset;
        width: 90%;
    }
    .trivia .content .item iframe{
        height: 300px;
    }

    /*other course => pad*/
    .other .content{
        width: 90%;
        max-width: unset;
        padding: 30px 0;
    }
    .other .content .item{
        width: 350px;
    }
    .other .instant-content{
        max-width: unset;
        width: 90%;
    }

    /*other2 course => pad*/
    .other2 .content{
        max-width: unset;
        width: 90%;
    }

    /*footer => pad*/
    footer .content{
        width: 90%;
    }
    footer .content .item{
        width: 200px;
    }
    footer .content .item h5{
        line-height: 22px;
        font-weight: 500;
    }
    footer .content .item p{
        line-height: 22px;
    }

    /*timer => pad*/
    .timer .countdown p{
        font-size: 0.7em;
    }
    .timer .countdown .date span{
        font-size: 0.85em;
    }

    /*back to top => pad*/
    #btn-back-to-top{
        bottom: 120px;
        right: 0;
    }
}

@media (max-width: 450px){
    html{
        font-size: 22px;
    }

    /*title => mobile*/
    .title h2{
        font-size: 1.7em;
        line-height: 45px;
    }
    .title h2 br{
        display: none;
    }
    .title h4{
        line-height: 26px;
    }
    .title h3{
        padding: 5px 30px;
    }
    .title h5{
        font-size: 0.9em;
    }

    /*header => mobile*/
    .header{
        height: 70px;
    }
    .header .nav{
        width: 95%;
    }
    .header .nav .logo{
        width: 280px;
    }
    .header .nav .menu-phone .menu-open i{
        font-size: 1.2em;
    }
    .menu-block{
        width: 100%;
    }
    .menu-block .menu-close{
        position: absolute;
        top: 20px;
        right: 10px;
        font-size: 1.1em;
    }
    .menu-block a{
        font-size: 0.8em;
    }

    /*banner => mobile*/
    .banner{
        background-image: url(../images/banner-bg-phone.png);
        background-size: cover;
        background-repeat: no-repeat;
        height: 800px;  
    }
    .banner #bnimg2{
        height: 600px;
    }
    .banner #bnimg3{
        top: -700px;
        left: -510px;
    }
    .banner #bnimg4{
        width: 150px;
        height: 90px;
    }
    .banner .content .bn-title{
        width: 90%;
        margin: 0 auto;
        transform: translateY(-50px);
    }
    .banner .content .bn-title img:nth-child(1){
        width: 100%;
    }
    .banner .content .bn-title img:nth-child(2){
        margin: auto;
    }
    .banner .content .bn-title p{
        font-size: 0.9em;
    }
    .banner .content .bn-title p br{
        display: none;
    }
    .banner .content .bn-title a{
        font-size: 0.8em;
        width: 230px;
    }
    


    /*introduce => mobile*/
    .introduce{
        flex-direction: column;
        height: unset;
        padding: 400px 0 100px;
    }
    .introduce .wordbox p span br{
        display: initial;
    }
    .introduce .imgbox{
        width: 70%;
        order: 2;
    }
    .introduce .wordbox h2{
        font-size: 28px;
    }
    .introduce .wordbox{
        width: 100%;
        text-align: center;
    }

    /*computer => mobile*/
    .computer h3{
        font-size: 1.5em;
    }
    .computer h3 span{
        font-size: 0.8em;
    }
    .computer h3 span br{
        display: initial;
    }

    /*cooperate => mobile*/
    /* .cooperate .content{
        flex-direction: column;
    }
    .cooperate .content .wordbox , .cooperate .content .imgbox{
        width: 100%;
    }
    .cooperate .content .wordbox p{
        font-size: 18px;
        line-height: 28px;
    }
    .cooperate .content .imgbox img{
        width: 100%;
    }
    .cooperate .content .imgbox a{
        font-size: 20px;
    } */

    /*vlog => phone*/
    .vlog .content iframe{
        width: 100%;
        height: 230px;
    }

    /*course => mobile*/
    .course .content .item{
        margin: 30px auto;
    }
    .course .content .item .wordbox{
        display: none;
    }
    .course .content .item .wordbox h4{
        font-size: 1em;
    }
    .course .content .item .wordbox p{
        height: auto;
        font-size: 0.8em;
    }
    .course .content .item .wordbox .discount{
        font-size: 0.8em;
    }
    .course .content .item .wordbox a{
        font-size: 0.8em;
    }

    /*modal form => mobile*/
    .modal h4{
        font-size: 1em;
    }
    .modal h4 br{
        display: initial;
    }
    .modal form{
        width: 100%;
    }
    .modal form p{
        font-size: 0.8em;
    }
    .modal form .modal_row{
        margin: 0 10px;
    }
    .modal form input, .modal form select{
        width: 100%;
    }
    .modal form label{
        font-size: 0.8em;
    }
    .modal form .addcourse label{
        font-size: 0.7em;
    }
    .modal form button:nth-child(1) , .modal form button:nth-child(2){
        font-size: 0.7em;
    }

    /*reward => mobile*/
    .reward{
        width: 100%;
    }

    /*feature => mobile*/
    .feature .content .item{
        width: 100%;
    }
    .feature .content .item:nth-child(odd){
        border-right: unset;
    }
    .feature .content .item:nth-child(3){
        border-bottom: unset;
    }
    .feature .content .item .box{
        width: 80%;
    }
    .feature .content .item .box h3{
        font-size: 1em;
    }
    .feature .content .item .box .highlight{
        font-size: 0.8em;
    }
    .feature .content .item .box .word{
        font-size: 0.7em;
    }
    .feature .content2{
        flex-direction: column;
    }
    .feature .content2 .item:nth-child(2){
        border-left: unset;
        border-right: unset;
        border-top: 0.3px solid #fff;
        border-bottom: 0.3px solid #fff;
    }
    .feature .content2 .item{
        width: 100%;
        height: 500px;
        background-size: cover;
    }
    .feature .content2 .item .box{
        width: 85%;
        margin: 30px auto 0;
    }
    .feature .content2 .item .box h3{
        font-size: 0.8em;
    }
    .feature .content2 .item .box h4{
        font-size: 1.2em;
    }
    .feature .content2 .item .box p{
        line-height: 24px;
    }

    /*information => mobile*/
    .information .box{
        width: 90%;
        background-position: right bottom;
    }
    .information .box .title h2{
        padding: 10px 0 10px 20px;
        font-size: 1em;
        line-height: 30px;
    }
    .information .box .title h2 span{
        font-size: 0.8em;
    }
    .information .box .title h2 span br{
        display: initial;
    }
    .information .box .itme p:nth-child(2){
        font-size: 0.75em;
        line-height: 24px;
    }

    /*course-time => mobile*/
    .information .course_calendar{
        width: 100%;
        flex-wrap: wrap;
        text-align: center;
    }
    .information .course_calendar img{
        height: 320px;
        margin: 10px auto;
    }
    .information .course_calendar a{
        width: 100%;
    }
    .information .course_calendar a img{
        height: 80px;
    }

    /*sales*/
    .sales .content{
        padding: 0 0 30px;
        max-width: unset;
        width: 95%;
        margin: auto;
    }
    .sales .content .item h4{
        font-size: 1.5em;
        line-height: 25px;
    }
    .sales .content .item h5{
        font-size: 0.9em;
        line-height: 25px;
    }
    .sales .content .item p{
        font-size: 0.9em;
    }
    .sales .content .item img{
        width: 60px;
        top: -60px;
        right: -20px;
    }

    /*ask form => mobile*/
    .ask{
        margin: -50px auto 0;
        padding: 0;
    }
    .ask .title h4{
        border: unset;
    }
    .ask form{
        width: 100%;
        margin: 10px auto 0;
        padding: 10px;
    }
    .ask form .addcourse input{
        margin: 0 10px;
    }
    .ask form .addcourse label{
        letter-spacing: 1px;
    }
    .ask form .row .button{
        width: 70%;
    }
    .ask img:nth-last-of-type(1){
        position: absolute;
        bottom: -20px;
        right: -10px;
        width: 60px;
    }
    .ask img:nth-last-of-type(2){
        position: absolute;
        bottom: -20px;
        left: -10px; 
        width: 60px;
    }


    /*addline => mobile*/
    .addline a{
        width: 100%;
        font-size: 18px;
        line-height: 22px;
    }
    .addline a br{
        display: initial;
    }

    /*photowall*/
    .photo .content h4{
        line-height: 50px;
    }

    /*trivia => mobile*/
    .trivia .more a{
        font-size: 16px;
    }
    .trivia .content:nth-child(3){
        flex-direction: column;
    }
    .trivia .content .item{
        width: 90%;
        margin: 5px auto;
    }
    .trivia .more{
        flex-direction: column;
    }
    .trivia .more a{
        margin: 10px auto;
    }

    /*other course => mobile*/
    .other .title{
        margin: 50px auto 0;
    }
    .other .content{
        padding: 10px 0 20px;
    }
    .other .content .item{
        width: 100%;
    }

    /*footer => mobile*/
    footer .content .item{
        width: 90%;
    }
    footer .content .item:nth-child(1) p a+br{
        display: initial;
    }
    footer .content .item h5{
        font-size: 0.75em;
        line-height: 25px;
        font-weight: 400;
    }
    footer .content .item p{
        font-size: 0.6em;
        line-height: 25px;
    }
    footer .content .copyright{
        font-size: 0.65em;
    }

    /*timer => mobile*/
    .timer{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 80px;
        background-image: url(../images/timer-bg-phone.png);
        animation: unset;
    }
    .timer h2{
        letter-spacing: 2px;
        text-align: left;
        padding-left: 20px;
    }
    .timer h2 br{
        display: none;
    }
    .timer .countdown{
        padding-left: 15px;
        justify-content: start;
    }
    .timer .countdown p{
        font-weight: 600;
        font-size: 0.7em;
    }
    .timer .countdown .date{
        flex-direction: row;
    }
    .timer .countdown .date span{
        margin: 0 5px;
    }
    .timer .timeover{
        margin: -5px 0 0;
        padding-left: 20px;
        text-align: left;
    }
}