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

    /*banner -> notebook*/
    .banner .content .bn-img{
        max-width: 500px;
    }
    .banner .content .bn-title{
        max-width: 550px;
    }
    .banner .content .bn-title p{
        font-size: 0.75em;
    }
    .banner .down img{
        margin: 0;
    }

    /*navgation => pad*/
    .header.sticky{
        border-bottom: 1px solid #e4e4e4;
    }
    .header .nav .menu a{
        font-size: 0.6em;
        font-weight: 400;
    }
    .header .nav .menu p{
        font-size: 0.7em;
    }

    /*why -> notebook*/
    .why .content .wordbox{
        padding: 0 30px;
    }
}

/*pad*/
@media(max-width: 860px){
    html{
        font-size: 26px;
    }
    .wrapper{
        background-size: auto;
    }
    .title h2{
        line-height: 50px;
    }

    /*navgation -> 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: #fff;
        font-size: 1.5em;
    }
    .header.sticky .nav .menu-phone .menu-open i{
        color: #ff4df0;
    }
    .menu-block{
        position: fixed;
        top: 0;
        right: 0;
        width: 400px;
        height: 100%;
        background-color: #04001d;
        box-shadow: -5px 0 15px #0c0c0c;
        text-align: center;
        z-index: 350;
    }
    .menu-block .menu-close{
        position: absolute;
        top: 15px;
        right: 20px;
        color: #3bffff;
        font-size: 1.7em;
    }
    .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: #3bffff;
        padding: 30px;
        letter-spacing: 2px;
        border-bottom: 1px solid #3bffff;
    }
    .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{
        flex-wrap: wrap;
    }
    .banner .content .bn-img{
        max-width: unset;
        width: 70%;
        margin: 30px auto 0;
        order: 2;
    }
    .banner .content .bn-title{
        max-width: 600px;
        padding: 80px 0 0;
        order: 1;
        margin-left: unset;
    }
    .banner .content .bn-title p{
        font-size: 1.2em;
        margin: 20px auto;
    }
    .banner .content .bn-title .bn-btn{
        margin: 20px auto;
    }
    .banner .content .bn-title .bn-btn a{
        font-size: 1em;
    }
    .banner .down img{
        margin: 20px 0 0;
    }

    /*preface => pad*/
    .preface .content p{
        font-size: 0.75em;
        line-height: 34px;
    }

    /*introduction => pad*/
    .introduction .content .item p{
        font-size: 0.7em;
        line-height: 36px;
    }

    /*why -> pad*/
    .why .content{
        max-width: unset;
        width: 100%;
        flex-direction: column;
    }
    .why .content .wordbox{
        width: 100%;
        padding: 0 30px;
        order: 1;
    }
    .why .content .wordbox p{
        font-size: 0.75em;
        line-height: 36px;
    }
    .why .content .imgbox{
        width: 100%;
        order: 2;
    }

    /*feature => pad*/
    .feature .content .item::before{
        filter: blur(15px);
    }

    /*three-fun -> pad*/
    .three-fun .content .item p{
        width: 70%;
        margin: auto;
    }

    /*course -> pad*/
    .course .content{
        max-width: unset;
        width: 90%;
    }
    .course .content .map a{
        padding: 100px 0 0 0;
    }
    .course .content .item{
        align-items: center;
    }
    .course .content .item .wordbox h3{
        font-size: 1.5em;
        text-align: left;
        line-height: 50px;
    }
    .course .content .item .wordbox h3 br{
        display: initial;
    }

    /*information -> pad*/
    .information .content{
        max-width: unset;
        width: 100%;
        flex-wrap: wrap;
    }
    .information .content .item .imgbox a{
        bottom: 30px;
    }

    /*course-calendar -> pad*/
    .course-calendar .content{
        max-width: unset;
        width: 90%;
        margin: auto;
    }

    /*sales -> pad*/
    .sales .content{
        max-width: 800px;
    }
    .sales .content .item{
        width: 250px;
        height: 280px;
    }
    .sales .content .item .wordbox p{
        line-height: 26px;
        padding: 15px 0;
    }
    .sales .content .item .wordbox h4 span .import{
        line-height: 25px;
    }
    .sales .content a > .item h5{
        left: 65px;
    }

    /*form -> pad*/
    .ask .form_title{
        width: 100%;
        background-size: 1600px 208px;
    }
    .ask form{
        width: 90%;
        margin: 20px auto 25px;
    }
    .ask form .row select{
        text-align: center;
    }

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

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

    /*exhaust animation -> pad*/
    .exhaust{
        animation: bat 40s infinite;
    }
    @keyframes bat{
        0%{
            top: -4000px;
        }
        100%{
            top: 19000px;
        }
    }
}

/*phone*/
@media (max-width: 450px){
    html{
        font-size: 22px;
    }
    .title{
        max-width: unset;
        width: 90%;
    }
    .title h2{
        font-size: 1.3em;
        line-height: 36px;
        padding: 15px 0 0;
        margin: 30px auto 10px;
        font-weight: 600;
    }

    /*navgation -> phone*/
    .header{
        height: 70px;
    }
    .header .nav{
        width: 95%;
    }
    .header .nav .logo{
        width: 280px;
    }
    .header .nav .menu-phone .menu-open i{
        color: #fff;
        font-size: 1.3em;
    }
    .menu-block{
        width: 100%;
    }
    .menu-block .menu-close{
        position: absolute;
        top: 20px;
        right: 10px;
        font-size: 1.5em;
    }
    .menu-block a{
        font-size: 0.8em;
    }

    /*banner -> phone*/
    .banner{
        background-image: url(../images/banner-bg-phone.png);
        background-size: cover;
        background-repeat: no-repeat;
        height: 800px;
    }
    .banner .content{
        margin: 150px auto 0;
    }
    .banner .content .bn-img{
        width: 80%;
        margin: auto;
    }
    .banner .content .bn-title{
        padding: 20px 0 20px;
    }
    .banner .content .bn-title p{
        width: 90%;
        font-size: 0.7em;
        line-height: 24px;
    }
    .banner .content .bn-title p br{
        display: none;
    }
    .banner .content .bn-title .bn-btn{
        width: 250px;
    }
    .banner .content .bn-title .bn-btn a{
        font-size: 0.85em;
        padding: 10px 35px;
    }
    .banner .content .bn-title .bn-btn a:nth-child(2){
        margin: -55px 0 0;
    }
    .banner .content .bn-title .gear1{
        width: 110px;
        top: 20px;
        right: 100px;
    }
    .banner .content .bn-title .gear2{
        width: 80px;
        top: 40px;
        right: 20px;
    }
    .banner .down img{
        width: 80%;
        margin: 30px 0 0;
    }

    /*preface => phone*/
    .preface .content p{
        font-size: 0.7em;
        line-height: 30px;
    }

    /*introduction -> phone*/
    .introduction .content{
        max-width: unset;
        width: 90%;
    }
    .introduction .content .item{
        flex-direction: column;
    }
    .introduction .content .item img{
        width: 90%;
        margin: 15px 0;
        order: 1;
    }
    .introduction .content .item p{
        width: 90%;
        margin: 15px 0;
        font-size: 0.7em;
        line-height: 28px;
        order: 2;
    }

    /*why -> phone*/
    .why .content{
        margin: 30px auto 60px;
    }
    .why .content .wordbox{
        width: 100%;
        padding: 0;
    }
    .why .content .wordbox p{
        width: 80%;
        font-size: 0.7em;
        line-height: 28px;
    }

    /*feature -> phone*/
    .feature .content{
        margin: 20px auto;
    }
    .feature .content .item{
        max-width: 320px;
        height: 360px;
        padding: 40px 15px;
    }
    .feature .content .item .title{
        font-size: 1em;
        line-height: 28px;
    }
    .feature .content .item .content{
        line-height: 24px;
        font-size: 0.7em;
    }
    .feature .content .item .textbox p{
        width: 85%;
        font-size: 0.7em;
        line-height: 28px;
    }
    /*three-fun -> phone*/
    .three-fun{
        margin: 30px auto;
    }
    .three-fun .content{
        flex-direction: column;
    }
    .three-fun .content .item{
        width: 100%;
        margin: 10px auto;
    }
    .three-fun .content .item i{
        font-size: 2.4em;
    }
    .three-fun .content .item h4{
        font-size: 1.3em;
    }
    .three-fun .content .item p{
        font-size: 0.8em;
    }

    /*course -> phone*/
    .course .content .map a{
        font-size: 20px;
        padding: 50px 0 0 0;
    }
    .course .content .item{
        flex-direction: column;
    }
    .course .content .item .imgbox , .course .content .item .wordbox{
        width: 100%;
        margin: 10px auto;
    }
    .course .content .item .wordbox{
        text-align: center;
    }
    .course .content .item .wordbox h3{
        font-size: 1.4em;
        text-align: center;
        line-height: 40px;
    }
    .course .content .item .wordbox h5{
        font-size: 0.9em;
    }
    .course .content .item .wordbox a{
        font-size: 0.8em;
    }
    .course .content .item .wordbox p{
        font-size: 0.7em;
        line-height: 28px;
    }
    .course .content .item .wordbox span{
        font-size: 0.6em;
    }

    /*information -> phone*/
    .information .content .item{
        max-width: 160px;
    }
    .information .content .item .imgbox{
        width: 160px;
        height: 160px;
    }
    .information .content .item .imgbox a{
        padding: 3px 15px;
        left: 30px;
        bottom: 15px;
    }

    /*course-calendar -> phone*/
    .course-calendar .content{
        width: 100%;
        margin: auto;
    }
    .course-calendar .content .tab label{
        font-size: 0.8em;
    }

    /*address -> phone*/
    .address .content{
        flex-direction: column;
    }
    .address .content a{
        width: 300px;
    }

    /*sales -> phone*/
    .sales .content{
        max-width: unset;
        width: 80%;
        flex-direction: column;
        padding: 30px 0;
    }
    .sales .content .item{
        width: 100%;
        height: auto;
        margin: 10px 0;
    }
    .sales .content a{
        width: 100%;
        order: -1;
    }
    .sales .content a > .item{
        transform: unset;
    }
    .sales .content .item .wordbox h3 span{
        font-size: 0.9em;
    }
    .sales .content .item .wordbox p{
        font-size: 0.9em;
    }
    .sales .content .item .wordbox h4{
        font-size: 1em;
    }
    .sales .content .itme .wordbox h4 span{
        font-size: 0.9em;
    }
    .sales .content a > .item h5{
        font-size: 0.8em;
        left: 75px;
    }
    .sales .additional{
        font-size: 0.9em;
        margin: -15px 0 0;
    }

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

    /*form -> phone*/
    .ask{
        margin: 30px auto 0;
    }
    .ask .form_title{
        width: 100%;
        height: 111px;
        background-size: 850px 111px;
    }
    .ask form{
        width: 100%;
    }
    .ask form .row .button{
        width: 70%;
    }

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

    /*other-course -> phone*/
    .other .content{
        padding: 10px 0 20px;
    }
    .other .content a{
        max-width: 150px;
    }

    /*footer -> phone*/
    footer .content .item{
        width: 300px;
    }
    footer .content .item h5{
        font-size: 0.8em;
    }
    footer .content .item p{
        font-size: 0.6em;
    }
    footer .content .item:nth-child(1){
        width: 200px;
    }
    footer .content .item:nth-child(1) p a+br{
        display: none;
    }
    footer .content .copyright{
        font-size: 0.7em;
    }

    /*countdown -> phone*/
    .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;
        padding-left: 20px;
    }
    .timer h2 br{
        display: none;
    }
    .timer .countdown{
        margin-top: -10px;
        padding-left: 10px;
        justify-content: start;
    }
    .date01 , .date02 , .date03 , .date04{
        display: flex;
        align-items: center;
    }
    .timer .timeover{
        margin: -15px 0 0;
        padding-left: 20px;
        font-size: 0.8em;
    }

    /*go to top -> phone*/
    #btn-back-to-top{
        right: 5px;
        bottom: 100px;
    }

    /*exhaust animation -> phone*/
    .exhaust{
        animation: bat 60s infinite;
    }
    @keyframes bat{
        0%{
            top: -4000px;
        }
        100%{
            top: 26000px;
        }
    }
}