@media (max-width: 1399.98px) { 
    .header-top{
        padding-right: 1%;
    }
    .header-btm{
        padding-left: 1%;
        padding-right: 1%;
    }
    .banner-content,
    .tagline{
        margin-left: 3%;
        width: 690px;
    }
    
    .tagline li a{
        width: 230px;
        padding: 0 12px;
    }
    .announcement-content{
        margin-right: 1%;
        left: 0px;
    }
    
    .ready .announcement-trigger.col-1{
        left: 240px;
    }
    .home-btm{
        margin: 30px 2%;
    }
}

@media (max-width: 1199.98px) { 
    .header li{
        margin: 0 10px;
    }

    .inside-page {
        padding-left: 36px;
        padding-right: 36px;
    }
}

@media (max-width: 991.98px) { 
    .btm-navigation .row .col-4{
        margin-bottom: 50px
    }
    .announcement{
        flex-direction: column;
        align-items: flex-start;
        padding-left: 20px;
    } 
    .logo{
        height: 80px;
        width: auto;
    }
    .header-btm ul{
        display: none;
    }
    .header-btm{
        height: auto;
    }
    .header{
        height: auto;
    }
    .ready .announcement-trigger.col-1{
        position: absolute;
        left: inherit;
        top: 38px;
        right: 80px;
        max-width: 140px;
        align-items: center;
        display: flex;
        flex: 1;
        height: 42px;
    }
    .ready .cross{
        display: none;
    }
    .ready #announcement-trigger{
        margin-top: 0;
        padding: 0;
    }
    .ready .content-body{
        margin-top: 80px;
    }
    .home-btm .container{
        flex-direction: column;
    }
    .video{
        width: 100%;
    }
    .container.recommend{
        align-items: flex-start;
    }
    .container.recommend span{
        margin-bottom: 20px;
    }
    .mobile-nav{
        display: inline-block;
        position: absolute;
        z-index: 300;
        right: 16px;
        top: 46px;
    }
    
    .banner-content,
    .tagline{
        margin-left: 5%;
        width: 690px;
    }

    .ready .announcement{
        width: auto;
    }
    .inside-page{
        flex-direction: column;
    }
    .leftnav{
        width: 100%;
        margin-right: auto;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .page-deco{
        position: static;
        width: 100%;
        height: 200px;
    }
    .page-deco img{
        width: 100%;
        height: auto;
    }
    .content-body.inside{
        display: flex;
        flex-direction: column-reverse;
    }
    .page-content{
        width: 100%;
        height: 100%;
        padding: 60px 20px;
    }
    .roll{
        display: none;
    }
    .reading .sub-topic-content{
        height: 100%;
        max-height: none;
    }
    .page-content .classic:after{
        width: 100%;
    }
    .inside-page{
        padding: 0 20px;
    }

}



@media (max-width: 767.98px) {

    .sub-topic-content.style-download.row canvas{
        transform-origin: center center;
        transform: scale(0.7);
    }

    .sub-topic-content.style-download.row .col-12.col-md-8.col-lg-8,
    .sub-topic-content.style-download.row  .col-10.col-md-9.col-lg-9{
        padding: 0;
    }

    .banner-content,
    .tagline{
        margin-left: 3%;
        width: 90%;
    }
    .recommend,
    .footer-top .container,
    .vision-top{
        flex-direction: column;
        width: 100%;
    }
    .tagline li a{
        width: 45vw;
        padding: 10px 5px;
    }
    .tagline{
        height: 70px;
    }
    .banner-content, .tagline{
        margin-left: 5%;
    }
    .content-body{
/*        margin-top: 350px;*/
    }
    .social-media{
        width: 100%;
        flex-wrap: wrap;
        border-top: 1px solid #6C6C6C;
        border-bottom: 1px solid #6C6C6C;
    }
    .social-media li{
        margin-bottom: 20px;
    }
    .header-top ul li:nth-child(3){
        display: none;
    }
    .recommend li{
        width: 100%;
        margin-bottom: 10px;
    }
    .footer-top ul{
        margin-bottom: 10px;
        width: 100%;
    }
    .footer-top .container{
        padding: 20px 20px;
        align-items: center;
    }
    .footer-top .container ul{
        align-items: center;
        margin-bottom: 10px;
    }
    .footer-top .container li{
        margin: 0 15px;
    }
    .vision-top{
        margin: 20px 0;
    }
    .vision-top p{
        margin: 20px 5px 0 5px;
    }
    .footer-top ul{
        align-items: baseline;
        justify-content: center;
    }
    .iaalogo{
        margin-top: 10px;
        flex-direction: column;
        align-items: center;
    }
    .iaalogo img{
        margin-top: 0;
    }

    .header-top a{
        font-size: 14px;
    }
    .search-container h6{
        margin: 10px 0;
    }

    .search-btm h6{
        margin-bottom: 10px;
        margin-top: 20px;
    }

    .hot-tag,
    .sorting{
        flex-direction: column;
    }
    .hot-tag input + label{
        margin-right: 0;
    }
    .sorting select{
        width: 100%;
        margin-bottom: 10px;
    }
    .search-container{
        padding: 25px 15px;
        max-height: 500px;
        overflow: scroll;
    }
    .red-background,
    .red-background button{
        width: 100%;
    }
}


@media (max-width: 326px){
    .ready .announcement-trigger.col-1{
        left: 106px;
    }

    .iaalogo{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .header-top li:first-child{
        display: none;
    }

    .sub-topic-content.style-download.row  .col-10.col-md-9.col-lg-9 p{
        width: 150px;
    }

    .sub-topic-content.style-download.row canvas{
        transform: scale(1);
        margin-bottom: 30px;
    }

}