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

    /***********班級成績表***********/
    .class .table ul li {
        font-size: 14px;
    }
}

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

    /***********首頁***********/
    .index-content .con {
        padding: 40px 60px;
        height: auto;
    }

    .index-content-box {
        order: 2;
    }

    .index-content-enter {
        order: 1;
    }

    .index-content-enter::after {
        content: "";
        display: block;
        clear: both;
    }

    .index-content-enter .login {
        width: calc(50% - 5px);
        float: left;
    }

    .index-content-enter .login {
        margin-left: 10px;
    }

    .index-content-enter .login:first-child {
        margin-left: 0px;
    }

    /***********內容-標題***********/
    .page .title-box {
        flex-direction: column;
    }

    .page .title-box .path {
        order: 2;
        padding-top: 3px;
    }

    .page .title-box .message {
        order: 1;
        margin-left: auto;
    }

    .page .title-box .message span {
        display: none;
    }

    /***********成績單-表格***********/
    .transcript .table ul.thead {
        font-size: 17px;
    }

    .transcript .table ul {
        font-size: 18px;
    }

    .transcript .table ul li span {
        font-size: 23px;
        width: 46px;
    }

    /***********班級成績表***********/

    .class .table {
        border: 0;
    }

    .class .table ul.thead {
        display: none;
    }

    .class .table ul {
        border-bottom: 1px solid #ccc;
        padding: 25px 0 5px;
    }

    .class .table ul:nth-child(odd) {
        background-color: #fff;
    }

    .class .button-active {
        margin: 70px 0 30px;
    }

    .class .table ul li {
        flex: auto;
        width: 100%;
        text-align: left;
        padding: 5px 0;
        color: #999;
        font-size: 16px;
    }

    .class .table ul li::before {
        padding-right: 5px;
        content: attr(data-title);
        width: 70px;
        display: inline-block;
        color: #333;
    }

    .class .table ul li.class-active {
        width: 50%;
        display: flex;
        flex-wrap: wrap;
    }

    .class .table ul li.class-active button {
        justify-content: center;
        width: 98%;
        padding: .3rem 0;
    }

    .class .table ul li.class-active button:after {
        padding-left: 5px;
        white-space: nowrap;
        content: attr(data-title);
    }

    /***********頁數***********/
    .page-box {
        flex-direction: column;
        margin-top: 50px;
    }

    .page-box .title {
        margin-bottom: 20px;
    }


}

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

    /***********首頁***********/
    .index {
        padding: 40px 0 0;
    }

    .index-content .con {
        padding: 40px 25px;
    }

    .index-content .ant {
        font-size: 19px;
    }

    /***********首頁-輪播***********/
    .carousel-control-next {
        right: -35px;
    }

    .carousel-control-prev {
        left: -35px;
    }

    /***********通用***********/
    select.form-control {
        padding-right: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        font-size: 15px;
    }

    .btn {
        font-size: 17px !important;
    }

    .form-check-label {
        font-size: 15px;
        line-height: 25px;
    }

    /*視窗*/
    .modal-footer {
        padding: 1rem 1.5rem 2rem;
    }

    .modal-header {

        padding: 2rem 1.5rem 0;
    }

    .modal-body {
        padding: 1rem 1.5rem;

    }

    /***********背景***********/
    .page-body {
        padding: 40px 0 130px;
    }

    /***********footer***********/
    footer {
        margin-top: 40px;
        padding: 10px 10px;
        line-height: 20px;
    }

    footer a {
        font-size: 18px;
        margin-bottom: 5px;
    }

    /***********標題logo***********/
    .header {
        margin-bottom: 15px;
    }

    .header .logo {
        font-size: 25px;
    }

    /**內容-綠色標題**/
    .page-title {
        font-size: 20px;
    }



    /***********內容-上方***********/
    .page .download {
        text-align: center;
    }

    .page .download img {
        width: 17px;
    }

    .page .download a {
        margin-left: 10px;
    }

    /***********表格***********/
    .table ul.thead {
        display: none;
    }

    /***********成績單***********/
    .transcript .transcript-data .data-box {
        order: 2;
    }

    .transcript .transcript-data .radar-box {
        order: 1;
        height: 300px;
        margin-bottom: 30px;
    }

    .transcript .transcript-data ul {
        font-size: 17px;
    }

    .transcript .transcript-data .text p {
        font-size: 16px;
    }

    .transcript .transcript-data .text p span {
        font-size: 18px;
        font-weight: 500;
    }

    .transcript .transcript-data {
        padding: 30px 0 50px;
    }

    /***********表格-通用***********/
    .table {
        border: 0;
    }

    .table ul li {
        flex: auto;
    }

    .table ul:nth-child(odd) {
        background-color: #fff;
    }

    .table ul {
        border-bottom: 1px solid #ccc;
        padding: 25px 0 5px;
    }

    /***********成績單-表格***********/
    .transcript .table ul li {
        text-align: left;
        padding: 5px 0;
    }

    /*科目*/
    .transcript .table ul li:nth-child(1) {
        width: 20%;
        color: #3C4594;
        font-size: 22px;
    }

    /*等級*/
    .transcript .table ul li:nth-child(2) {
        width: 80%;
    }

    /*加權級分/等級說明*/
    .transcript .table ul li:nth-child(3) {
        width: 50%;
        color: #999;
    }

    .transcript .table ul li:nth-child(4) {
        width: 50%;
        color: #999;
    }

    .transcript .table ul li:nth-child(3):before,
    .transcript .table ul li:nth-child(4):before {
        padding-right: 10px;
        white-space: nowrap;
        content: attr(data-title);
        color: #666;
    }

    /*按鈕*/
    .transcript .table ul li:nth-child(5) {
        width: 50%;
    }

    .transcript .table ul li:nth-child(6) {
        width: 50%;
    }

    .transcript .table ul li:nth-child(5) button:after,
    .transcript .table ul li:nth-child(6) button:after {
        padding-left: 5px;
        white-space: nowrap;
        content: attr(data-title);
    }

    .transcript .table ul li:nth-child(5) button,
    .transcript .table ul li:nth-child(6) button {
        justify-content: center;
        width: 98%;
        padding: .3rem 0;
    }

    /*總積分*/
    .table ul.total {
        display: none;
    }

    .transcript .total-text {
        font-size: 17px;
        text-align: left;
        display: block;
        line-height: 30px;
        color: #333;
    }

    /*備註*/
    .remarks {
        font-size: 14px;
        margin-top: 40px;
    }

    /***********作答分析***********/
    .answer .name {
        position: initial;
    }

    .answer .table {
        margin-top: 10px;
    }

    /***********作答分析-表格***********/
    .answer .table ul {
        padding: 25px 0 5px;
    }

    .answer .table ul li {
        text-align: left;
        font-size: 19px;
        width: 25%;
    }

    .answer .table ul li:before {
        padding-right: 5px;
        white-space: nowrap;
        content: attr(data-title);
    }

    .answer .table ul li img {
        margin: initial;
        width: 16px;
        padding-top: 2px;
    }

    /*題目編號*/
    .answer .table ul li:nth-child(1) {
        /*color: #3C4594;*/
        color: #21A49B;
    }

    .answer .table ul li:nth-child(1):after {
        padding-left: 5px;
        content: ")";
    }

    .answer .table ul li:nth-child(1):before {
        padding-right: 5px;
        content: "(";
    }

    .answer .table ul li:nth-child(2) {
        display: flex;
        align-items: center;
    }

    .answer .table ul li:nth-child(2):before,
    .answer .table ul li:nth-child(3):before,
    .answer .table ul li:nth-child(4):before {
        color: #333;
    }

    /***********資料下載***********/
    .download-page .table ul li {
        width: 100% !important;
        text-align: left;
    }

    .download-page .table ul li:nth-child(1) {
        color: #3C4594;
    }

    .download-page .table ul li:nth-child(2) {
        color: #333;
    }

    .download-page .table ul li:nth-child(3) {
        margin-top: 10px;
    }

    .download-page .table ul li:nth-child(3) button:after {
        padding-left: 5px;
        white-space: nowrap;
        content: attr(data-title);
    }

    .download-page .table button {
        margin: initial;
    }

    /***********班級成績表***********/
    /*人數/筆數*/
    .class .number-people {
        margin-bottom: 5px;
        width: 100%;
    }

    .class .number-box {
        flex-flow: column;
        align-items: baseline;
    }

    .class .number-data {
        width: 100%;
    }

    .class .number-data .form-control {
        width: calc(100% - 50px);
    }

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

        /***********首頁***********/
        .login .login-enter h3 {
            font-size: 22px;
        }

        .login .login-enter img {
            width: 70px;
        }

        .login .login-enter {
            height: 118px;
        }

        .index-content .login {
            height: 190px;
        }

        .index-footer {
            font-size: 15px;
        }

        .index-footer .unit a {
            margin-right: 5px;
        }

        /***********標題logo***********/
        .header .logo {
            width: 85%;
            margin: auto;
            margin-bottom: 10px;
            padding: 5px 0px;
            font-size: 23px;
        }

        /***********內容***********/
        .page .content {
            padding: 10px 30px 30px;
        }

        /***********內容-標題***********/
        .page .title-box {
            padding: 5px 15px;
        }

        .page .title-box .path {
            font-size: 17px;
        }

        .page .title-box .path a {
            margin: 0 5px;
        }

        /***********表格上-按鈕***********/
        .button-active {
            justify-content: center;
            flex-wrap: wrap;
        }

        .button-active button {
            width: 100%;
            margin: 0;
            margin-bottom: 10px;
            padding: .375rem 0rem;
        }

        /***********公告訊息***********/
        .news-page .news-title {
            font-size: 17px;
        }
    }

    @media screen and (max-width: 360px) {
        .index-footer .unit span {
            display: block;
            margin-bottom: 5px;
        }
    }


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

        /***********首頁***********/
        .index-footer {
            font-size: 14px;
        }

        /***********內容-標題***********/
        .page .title-box {
            padding: 5px 10px;
        }

        .page .title-box .path {
            font-size: 16px;
        }

        .page .title-box .path a {
            margin: 0 5px;
        }

        .page .title-box .path img {
            width: 20px;
        }

        /***********內容***********/
        .page .content {
            padding: 10px 20px 30px;
        }

        /***********內容-上方***********/
        .page .download a {
            margin-left: 15px;
            font-size: 19px;
        }

        /***********作答分析-表格***********/
        .answer .table ul li {
            font-size: 15px;
        }
    }