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

    /*banner => notebook*/
    .banner{
        height: 800px;
    }
    .banner #bnimg1{
        width: 400px;
    }
    .banner .content{
        max-width: 1400px;
    }
    .banner .content .bn-title{
        width: 550px;
    }
    .banner #bnimg2 , .banner #bnimg3 , .banner #bnimg4{
        height: 800px;
    }
}
@media (max-width: 860px){
    html{
        font-size: 26px;
    }
    body {
        background-size: auto;
    }

    /*title => pad*/
    .title{
        max-width: unset;
        width: 90%;
    }
    .title h2{
        font-size: 1.8em;
        line-height: 70px;
    }
    .title img{
        width: 150px;
        margin: auto 20px 20px;
    }
    .title h3{
        font-size: 0.9em;
        line-height: 34px;
    }
    .title h4{
        line-height: 34px;
    }

    /*header => pad*/
    .header{
        height: 90px;
    }
    .header.sticky{
        backdrop-filter: unset;
    }
    .header .nav{
        width: 90%;
        margin: 0 auto;
    }
    .header .nav .logo{
        width: 300px;
    }
    .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: #074985;
    }
    .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: #074985;
        font-size: 1.5em;
    }
    .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: #074985;
        padding: 30px;
        letter-spacing: 2px;
        border-bottom: 1px solid #074985;
    }
    .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 a{
        width: 40%;
        font-size: 1em;
    }
    .banner #bnimg1{
        display: none;
    }
    .banner #bnimg2 , .banner #bnimg3 , .banner #bnimg4{
        height: 1200px;
    }

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

    /*introduction => pad*/
    .introduction .content{
        max-width: unset;
        width: 90%;
    }
    .introduction .content p{
        font-size: 0.8em;
    }

    /*bg => pad*/
    .bg{
        top: 2500px;
    }

    /*contestant => pad*/
    .contestant .content, .suitable .content, .date .content{
        max-width: unset;
        width: 90%;
    }
    .contestant .content p, .suitable .content p, .date .content p{
        font-size: 1em;
    }

    /*team => pad*/
    .team .content{
        max-width: unset;
        width: 90%;
    }
    .team .content .item p{
        font-size: 0.7em;
        line-height: 30px;
    }

    /*theme => pad*/
    .theme{
        background-size: 1200px 875px;
        padding: 0 0 200px;
    }
    .theme .title h2{
        padding: 50px 0 10px;
    }
    .theme .content{
        width: 95%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .theme .content .item{
        width: 28%;
        margin: 0 15px;
        position: initial;
        top: unset;
        right: unset;
        bottom: unset;
        left: unset;
    }
    .theme .content .item .imgbox .circle1, .theme .content .item .imgbox .circle2{
        width: 90%;
    }
    .theme .content .item .imgbox .circle2{
        left: 10px;
    }
    .theme .content .item h3{
        font-size: 1.2em;
        margin: 10px 0;
    }
    .theme .content .item p{
        width: 100%;
        margin: 0 auto 100px;
        font-size: 0.65em;
        line-height: 25px;
    }


    /*schedule => pad*/
    .schedule .content{
        max-width: unset;
        width: 90%;
    }
    .schedule .content .item{
        width: 300px;
        margin: auto;
    }
    .schedule .content .item p{
        font-size: 0.8em;
    }
    .schedule .content .triangle:nth-of-type(2) , .schedule .content .triangle:nth-of-type(6){
        display: none;
    }

    /*information => pad*/
    .information{
        background-repeat: repeat-y;
        background-size: 1300px 1354px;
    }
    .information .content{
        max-width: unset;
        width: 90%;
    }
    .information .content .item{
        width: 100%;
    }
    .information .content .item .infor1{
        margin: 30px auto 0;
    }
    .information .content .item h4{
        font-size: 1em;
    }
    .information .content .item h5{
        font-size: 0.85em;
        line-height: 36px;
        width: 40%;
    }
    .information .content .item p{
        font-size: 0.7em;
        line-height: 32px;
    }
    .information .content .item .infor2 .list p{
        width: 60%;
        font-size: 0.65em;
    }

    /*score => pad*/
    .score{
        margin: auto;
        padding: 0;
        background-size: cover;
    }
    .score .content{
        max-width: unset;
        width: 90%;
        margin: auto;
    }
    .score .content .item img{
        width: 35%;
        margin: auto 10px;
    }
    .score .conten .item .wordbox{
        width: 65%;
    }
    .score .content .item .wordbox ol li{
        font-size: 0.7em;
    }

    /*.registration fee => pad*/
    .registration-fee .content p{
        margin: 20px auto 0;
    }

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

    /*form => pad*/
    .ask form{
        width: 90%;
        margin: 20px auto 0;
    }

    /*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 h2{
        font-size: 0.85em;
        font-weight: 500;
        letter-spacing: 1px;
        text-align: center;
        line-height: 30px;
        animation: timerword 1s infinite;
    }
    .timer h2 span{
        font-size: 1.15em;
    }
    .timer .countdown p{
        font-size: 0.7em;
    }
    .timer .countdown .date span{
        font-size: 0.85em;
    }

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

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

    /*title => mobile*/
    .title{
        margin: 100px auto 30px;
    }
    .title h2{
        font-size: 1.7em;
        line-height: 42px;
    }
    .title h2 br{
        display: initial;
    }
    .title img{
        width: 100px;
        margin: auto 20px 20px;
    }
    .title h4{
        line-height: 26px;
    }
    .title h3{
        padding: 5px 30px;
    }
    .title h5{
        font-size: 0.9em;
    }
    .title .remark{
        flex-wrap: wrap;
    }
    .title .remark .item{
        margin: 5px auto;
        flex-direction: column;
    }
    .title .remark .item img{
        width: 40px;
        margin: unset;
    }
    .title .remark .item p{
        padding: 2px 5px;
        margin-left: unset;
    }

    /*header => mobile*/
    .header{
        height: 70px;
    }
    .header .nav{
        width: 95%;
    }
    .header .nav .logo{
        width: 200px;
    }
    .header .nav .menu-phone .menu-open i{
        color: #fff;
        font-size: 1.1em;
    }
    .menu-block{
        width: 100%;
    }
    .menu-block .menu-close{
        position: absolute;
        top: 20px;
        right: 10px;
        color: #18356f;
        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 .content .bn-title{
        width: 90%;
        margin: 0 auto;
        transform: translateY(-50px);
    }
    .banner .content .bn-title a{
        width: 40%;
        font-size: 0.9em;
    }
    .banner #bnimg2 , .banner #bnimg3 , .banner #bnimg4{
        height: 800px;
    }

    /*vlog => phone*/
    .vlog .content iframe{
        width: 100%;
        height: 230px;
    }
    
    /*introduction => mobile*/
    .introduction .content p{
        font-size: 0.75em;
        line-height: 28px;
        font-weight: 300;
    }

    /*bg => mobile*/
    .bg{
        width: 1200px;
        top: 1600px;
    }

    /*contestant / suitable / date => phone*/
    .contestant .content p, .suitable .content p, .date .content p{
        font-size: 0.8em;
        line-height: 30px;
    }

    /*team => mobile*/
    .team .content{
        flex-direction: column;
    }
    .team .content .item{
        width: 100%;
        margin: 15px auto;
    }
    .team .content .item img{
        width: 90%;
        margin: auto;
    }
    .team .content .item h3{
        font-size: 1.4em;
    }
    .team .content .item p{
        font-size: 0.8em;
        line-height: 26px;
        height: auto;
    }
    .team .content .item a{
        font-size: 0.8em;
    }

    /*theme => mobile*/
    .theme{
        background-size: 800px 583px;
        padding: 0 0 50px;
    }
    .theme .content{
        width: 90%;
        height: auto;
    }
    .theme .content .item{
        width: 80%;
        margin: 0 auto;
    }
    .theme .content .item .imgbox .circle1, .theme .content .item .imgbox .circle2{
        width: 90%;
    }
    .theme .content .item .imgbox .circle2{
        left: 15px;
    }
    .theme .content .item h3{
        font-size: 1em;
        margin: 10px 0;
    }
    .theme .content .item p{
        font-size: 0.7em;
        line-height: 27px;
    }

    /*schedule => mobile*/
    .schedule .content{
        flex-direction: column;
    }
    .schedule .content .triangle{
        border-color: #07cfdd transparent transparent transparent;
        transform: translateX(160px);
    }
    .schedule .content .triangle:nth-of-type(2), .schedule .content .triangle:nth-of-type(4), .schedule .content .triangle:nth-of-type(6){
        display: initial;
    }

    /*information => mobile*/
    .information{
        margin: 50px auto;
        background-size: 750px 781px;
    }
    .information .content .item .infor1{
        flex-direction: column;
    }
    .information .content .item .infor1 img{
        width: 80%;
    }
    .information .content .item .infor1 .wordbox{
        width: 100%;
        padding: 0;
    }
    .information .content .item h3{
        font-size: 1.5em;
        padding: 22px 0 0 60px;
    }
    .information .content .item h5{
        width: 100%;
    }
    .information .content .item p{
        line-height: 24px;
    }
    .information .content .item .infor2 .list{
        flex-direction: column;
    }
    .information .content .item .infor2 .list p{
        width: 100%;
        margin: 0;
    }

    /*score => mobile*/
    .score .content .item{
        flex-direction: column;
    }
    .score .content .item img{
        width: 70%;
        margin: auto;
    }
    .score .content .item .wordbox{
        width: 90%;
    }

    /*ohter => mobile*/
    .other .content{
        padding: 10px 0 20px;
    }
    .other .content .item{
        width: 100%;
    }

    /*.ask => 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{
        display: none;
        animation: unset;
    }

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

    /*honor => mobile*/
    .honor .content .item p{
        font-size: 1em;
    }

    /*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{
        width: 70%;
        padding-left: 15px;
        justify-content: start;
    }
    .timer .countdown p{
        font-size: 0.7em;
    }
    .timer .countdown .date{
        flex-direction: row;
    }
    .timer .countdown .date span{
        margin: -3px 5px 0;
    }
    .timer .timeover{
        margin: -5px 0 0;
        padding-left: 20px;
        text-align: left;
    }
}