@media screen and (max-width: 1400px) {

    /*------------
    優雅環境
    ------------*/
    .environment {
        background-size: 85px;
    }
}



@media screen and (max-width: 1199px) {
    html {
        font-size: 17px;
    }
    /*------------
    課程中心
    ------------*/
    .video-item .item{
        width:49%;
    }
}

@media screen and (max-width: 991px) {

    html {
        font-size: 16px;
    }

    /*------------
    共用
    ------------*/
    .page .img-box {
        padding-top: 100px;
    }

    /*------------
    選單
    ------------*/
    .navbar {
        padding: 0.5rem 0;
    }

    .navbar-toggler {
        font-size: 1rem;
    }

    .navbar-dark .navbar-brand {
        width: 100px;
    }

    /*------------
    優雅環境
    ------------*/
    .environment {
        background-image: none;
    }
}

@media screen and (max-width: 767px) {

    /*------------
    共用
    ------------*/
    .video-box {
        padding: 15px 20px;
    }

    /*------------
    banner
    ------------*/
    .banner .title {
        font-size: 2rem;
    }

    .banner .title img {
        width: 45px;
    }

    .banner-img {
        width: 200px;
        margin: 20px 20px 0px 20px;
    }

    .banner .img-box {
        padding-top: 100px;
    }

    /*------------
    課程中心
    ------------*/
    .classbook {
        padding-left: 40px;
        padding-right: 40px;
    }

    .video-box ul li.active {
        padding: 5px 15px 50px 20px;
    }

    .video .modal-header h5 {
        font-size: 1rem;
    }
    /*------------
    課程中心
    ------------*/
    .video-item .item{
        width:100%;
        margin-bottom: 15px;
    }
    /*---------------
    footer
    ----------------*/
    .contact ul li.mail {
        margin-top: 0;
    }
}

@media screen and (max-width: 575px) {

    /*------------
    共用
    ------------*/
    .page-title {
        width: 200px;
    }

    .page-title::before,
    .page-title:after {
        width: 60px;
    }

    /*------------
    選單
    ------------*/
    .navbar-dark .navbar-brand {
        width: 80px;
        left: 15px;
    }

    /*------------
    聯絡資訊
    ------------*/
    .contact .footer-bom {
        width: 70%;
    }

    /*------------
    會員登入
    ------------*/

    .video-box ul li {
        font-size: 1rem;
        padding: 5px 15px 5px 20px;
    }

    .video-box ul li.active span::after {
        margin-top: 6px;
    }

    .video-box ul li::before {
        top: 18px;
    }
}

@media screen and (max-width: 350px) {}







/**
@media screen and (min-width: 576px) {

}
@media screen and (min-width: 768px) {

}
@media screen and (min-width: 992px) {

}
@media screen and (min-width: 1200px) {

}
**/