html,
body {
    margin: 0;
    height: 100%;
    font-family: "Microsoft JhengHei", "arial";
}

.mainContent {
    padding-top: 90px;
    width: 100%;
    overflow-x: hidden;
}

.visionContainer .visionRow {
    width: 95%;
    margin: 0 auto;
}

.visionContainer .visionRow .TableRowContent {
    font-size: 24px;
}


.mainContent .title {
    text-align: center;
    position: relative;
    margin-bottom: 2%;
}

.mainContent .title .titleContent {
    display: inline-block;
    margin: 0 auto;
    position: relative;
    color: white;
    text-shadow: -1px 0 1px black, 0 1px 1px black, 1px 0 1px black, 0 -1px 1px black;
    position: relative;
    font-size: 60px;
    font-weight: bold;
    z-index: 2;
}

.mainContent .title .titleContent:after {
    content: "";
    position: absolute;
    background-color: #CEC4A4;
    height: 0.2em;
    width: 100%;
    left: 0;
    bottom: 5px;
    z-index: -1;
}



.mainContent .subTitle {
    font-size: 40px;
    color: #4B4B4B;
    font-weight: bold;
    margin: 2% auto;
    position: relative;
}

.mainContent .subTitle:after {
    content: "";
    width: 34px;
    left: 0;
    bottom: -10;
    height: 4px;
    position: absolute;
    background-color: #4B4B4B;
}





.mainContent .examContainer {
    display: table;
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 5%;
    height: 100vh;
}

.mainContent .examContainer .subTitle {
    margin: 0 0 2% 0;
}

.mainContent .examContainer .examPcRow,
.mainContent .examContainer .examMcRow {
    display: table-row;
    position: relative;
}

.mainContent .examContainer .examMcRow {
    height: 60%;
}

.mainContent .examContainer .examMcRow .mcTable {
    display: table;
    height: 100%;
    width: 100%;
    position: relative;
}

.mainContent .examContainer .examMcRow .mcTable .mcTitleRow {}

.mainContent .examContainer .examMcRow .mcTable .mcContentRow {
    display: table-row;
    height: 100%;
    width: 100%;
    position: relative;
}

.mainContent .examContainer .examMcRow .mcTable .mcContentRow .mcRowTable {
    display: table;
    position: relative;
    height: 100%;
    width: 100%;
    table-layout: fixed;
}

.mainContent .examContainer .examMcRow .mcTable .mcContentRow .rowContentDiv {
    font-size: 24px;
    padding: 1% 10px;
}

.mainContent .examContainer .examMcRow .mcTable .mcRowTable .tableRow {
    display: table-row;
    position: relative;
}

.mainContent .examContainer .examMcRow .mcTable .mcRowTable .contentTable {
    display: table;
    height: 100%;
    width: calc(100% - 20px);
    position: relative;
    margin: 0 auto;
    table-layout: fixed;
}

.mainContent .examContainer .examMcRow .mcTable .mcRowTable .contentTable .contentCell {
    display: table-cell;
    position: relative;
    width: 100%;
    height: 100%;
    vertical-align: top;
}

.mainContent .examContainer .examMcRow .mcTable .mcRowTable .contentTable .contentCell .contentDiv {
    display: table;
    position: relative;
    /* padding: 1%; */
    font-size: 24px;
    height: 100%;
    width: 100%;
    table-layout: fixed;
}

.mainContent .examContainer .examMcRow .mcTable .mcRowTable .contentTable .contentCell .contentDiv ul {
    list-style: decimal;
}

.mainContent .examContainer .examMcRow .mcTable .mcRowTable .footerRow {
    display: table-row;
    position: relative;
}

.mainContent .examContainer .examMcRow .mcTable .mcRowTable .footerRow .footerTable {
    display: table;
    position: relative;
}

.mainContent .examContainer .examMcRow .mcTable .mcRowTable .footerTableRow {
    display: table-row;
    position: relative;
}

.mainContent .examContainer .examMcRow .mcTable .mcRowTable .footerTableRow .contentDiv {
    font-size: 24px;
}

.mainContent .examContainer .hintRow {
    display: table-row;
    position: relative;
}

.mainContent .examContainer .hintRow .hintTable {
    display: table;
    position: relative;
    /* margin-top: 2%; */
    -webkit-box-shadow: 10px 10px 11px -8px rgba(148, 148, 148, 0.77);
    -moz-box-shadow: 10px 10px 11px -8px rgba(148, 148, 148, 0.77);
    box-shadow: 10px 10px 11px -8px rgba(148, 148, 148, 0.77);
    margin: 2% auto 0;
    width: calc(100% - 20px);
}

.mainContent .examContainer .hintRow .hintTable .hintTitle {
    display: table-cell;
    width: 30%;
    font-size: 35px;
    background: #416971;
    color: #fff;
    vertical-align: top;
    padding: 20px 10px;
    font-weight: bold;
}

.mainContent .examContainer .hintRow .hintTable .hintCell {
    display: table-cell;
    width: 70%;
    font-size: 24px;
    background: #d3f3ed;
    vertical-align: top;
    padding: 20px 30px;
}

.mainContent .courseContainer {
    display: block;
    padding: 5% 0;
    position: relative;
    width: 100%;
    max-width: 1400px;
    /* padding: 0 70px; */
    margin: 0 auto;
    overflow-x: hidden;
}

.mainContent .courseContainer .swiper-slide img {
    max-width: 100%;
}

span.swiper-pagination-bullet.swiper-pagination-bullet.swiper-pagination-bullet-active {
    color: black;
    opacity: 1;

}

.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: -4%;
}

.swiper-pagination-bullet {
    width: 25px;
    height: 6px;
    border-radius: 1px;
    background: #000;
    border: 1px solid #ffffff;
}

.swiper-pagination-bullet-active {
    background: #e6be4e;
}

.swiper-button-next,
.swiper-button-prev {
    top: 50% !important;
}

.photoSwiper {
    overflow: visible !important;

}

@media only screen and (max-width:767px) {
    .visionContainer .visionRow .TableRowContent {
        font-size: 1.1rem;
    }

    .mainContent .examContainer .examMcRow .mcTable .mcContentRow .rowContentDiv {
        font-size: 1.1rem;
    }

    .mainContent .examContainer .examMcRow .mcTable .mcRowTable .contentTable .contentCell .contentDiv {
        font-size: 1.1rem;
    }

    .mainContent .examContainer .examMcRow .mcTable .mcRowTable .contentTable {
        margin-top: 5%;
    }

    .mainContent .examContainer .hintRow .hintTable .hintTitle {
        font-size: 1.3rem;
    }

    .mainContent .examContainer .hintRow .hintTable .hintCell {
        font-size: 1.1rem;
        line-height: 1.5rem;
    }
}