/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
@import url("/min/all.css");
@media screen and (device-aspect-ratio: 2/3) {
    select,
    textarea,
    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"] {
        font-size: 16px;
    }
}

/* Fix Input Zoom on iPhone 5, 5C, 5S, iPod Touch 5g */
@media screen and (device-aspect-ratio: 40/71) {
    select,
    textarea,
    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"] {
        font-size: 16px;
    }
}

/* Fix Input Zoom on iPhone 6, iPhone 6s, iPhone 7  */
@media screen and (device-aspect-ratio: 375/667) {
    select,
    textarea,
    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="url"] {
        font-size: 16px;
    }
}

/* Fix Input Zoom on iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus, iPhone 8, iPhone X, XS, XS Max  */
@media screen and (device-aspect-ratio: 9/16) {
    select,
    textarea,
    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="url"] {
        font-size: 16px;
    }
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
img,
ins,
kbd,
q,
samp,
small,
strike,
sub,
sup,
tt,
var,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    font-family: Chivo, "Microsoft JhengHei", "PingFang", sans-serif;
    font-size: 16px;
    line-height: 1;
}
ol,
ul {
    list-style: none;
}

blockquote {
    margin: 22px 10px;
    border-left: 3px solid #50e3c2;
    padding-left: 15px;
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
    position: relative;
    width: 100%;
}
.col-form-label {
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
}
.col-lg-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}
.col-lg-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}
.col-lg-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
.col-lg-4 {
    width: 33%;
    display: inline-block;
}
.col-lg-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
* {
    box-sizing: border-box;
}
*:focus,
.btn:focus {
    outline: 0;
    box-shadow: none;
}
a {
    text-decoration: none;
    color: #fff;
}
img {
    display: block;
}
header {
    transition: 1s;
}
textarea {
    display: block;
    width: 100%;
    height: 80px;
    resize: none;
    border-width: 1px;
    border-style: solid;
    border-color: #86dbef;
    border-image: initial;
    border-radius: 3px;
    padding: 8px 10px;
}
.vertical-align-middle {
    vertical-align: middle;
}
h3 {
    font-size: 20px;
    line-height: 40px;
}
marquee {
    width: 100%;
    font-size: 24px;
    line-height: 30px;
    position: fixed;
    top: 0;
    background: rgb(0, 0, 0, 0.75);
    color: #fff;
    z-index: 15;
}
.d-none {
    display: none;
}
.cursor-pointer {
    cursor: pointer;
}
.m-auto {
    margin: auto;
}
.ml-auto {
    margin-left: auto;
}
.m0 {
    margin: 0 !important;
}
.mt0 {
    margin-top: 0 !important;
}
.mt5 {
    margin-top: 5px;
}
.mt10 {
    margin-top: 10px;
}
.mt15 {
    margin-top: 15px !important;
}
.mt16 {
    margin-top: 16px;
}
.mt18 {
    margin-top: 18px !important;
}
.mt20 {
    margin-top: 20px !important;
}
.mt30 {
    margin-top: 30px;
}
.mt35 {
    margin-top: 35px;
}
.mt40 {
    margin-top: 40px;
}
.mt80 {
    margin-top: 80px;
}
.mr10 {
    margin-right: 10px;
}
.mr20 {
    margin-right: 20px;
}
.ml5 {
    margin-left: 5px !important;
}
.ml10 {
    margin-left: 10px;
}
.ml15 {
    margin-left: 15px !important;
}
.ml20 {
    margin-left: 20px;
}
.ml24 {
    margin-left: 24px;
}
.ml25 {
    margin-left: 25px !important;
}
.mb10 {
    margin-bottom: 10px;
}
.mb15 {
    margin-bottom: 15px;
}
.mb20 {
    margin-bottom: 20px;
}
.mb24 {
    margin-bottom: 24px;
}
.mb40 {
    margin-bottom: 40px;
}
.mtb20 {
    margin: 20px 0 !important;
}
.pd20 {
    padding: 20px;
}
.ptb40 {
    padding: 40px 0;
}
.mrct {
    margin: 0 auto;
}
.font14 {
    font-size: 14px;
}
.font18 {
    font-size: 18px;
}
.font24 {
    font-size: 24px;
}
.font20 {
    font-size: 20px;
}
.font30 {
    font-size: 30px;
}
.width-18 {
    width: 18% !important;
}
.width-20 {
    width: 20% !important;
}
.width-30 {
    width: 30% !important;
}
.width-33 {
    width: 33% !important;
}
.width-39 {
    width: 39% !important;
}
.width-395 {
    width: 39.5% !important;
}
.width-40 {
    width: 40% !important;
}
.width-45 {
    width: 45% !important;
}
.width-49 {
    width: 49% !important;
}
.width-50 {
    width: 50% !important;
}
.width-68 {
    width: 68% !important;
}
.width-90 {
    width: 90% !important;
}
.width-100 {
    width: 100% !important;
}
.width5 {
    width: 5% !important;
}
.width8 {
    width: 8% !important;
}
.width9 {
    width: 9% !important;
}
.width10 {
    width: 10% !important;
}
.width12 {
    width: 12% !important;
}
.width15 {
    width: 15% !important;
}
.width16 {
    width: 16% !important;
}
.width17 {
    width: 17% !important;
}
.width19 {
    width: 19% !important;
}
.width20 {
    width: 20% !important;
}
.width25 {
    width: 25% !important;
}
.width28 {
    width: 28% !important;
}
.width30 {
    width: 30% !important;
}
.width35 {
    width: 35% !important;
}
.width40 {
    width: 40% !important;
}
.width45 {
    width: 45% !important;
}
.width50 {
    width: 50% !important;
}
.width55 {
    width: 55% !important;
}
.width65 {
    width: 65% !important;
}
.width70 {
    width: 70% !important;
}
.width74 {
    width: 74% !important;
}
.width75 {
    width: 75% !important;
}
.width80 {
    width: 80% !important;
}
.width84 {
    width: 84% !important;
}
.width85 {
    width: 85% !important;
}
.width90 {
    width: 90% !important;
}
.width100 {
    width: 100% !important;
}
.inline-block {
    display: inline-block !important;
}
.txt-white {
    color: #fff;
}
.txt-dkgreen {
    color: #0a4b4f;
}
.txt-dkblue {
    color: #45a0bc;
}
.txt-dkblue a {
    color: #45a0bc;
}
.txt-ltblue {
    color: #86dbef !important;
}
.txt-red {
    color: #c63e21;
}
.txt-gray {
    color: #606060;
}
.txt-yellow,
.yellow {
    color: #f3cf1a;
}
.txt-line-height-1-5 {
    line-height: 1.5;
}
.txt-line-height-26 {
    line-height: 26px;
}
.txt-dec {
    text-decoration: underline;
}
.txt-terms {
    color: #64b5e5;
    text-decoration: underline;
}
.center {
    text-align: center;
}
img.center {
    display: block;
    margin: 0 auto;
}
.txt-left {
    text-align: left !important;
}
.txt-right {
    text-align: right;
}
.txt-auto-wrap {
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.5;
}
.vertical-align-top {
    vertical-align: top;
}
.vertical-align-baseline {
    vertical-align: baseline !important;
}
.f-left {
    float: left;
}
.f-right {
    float: right;
}
.bg-grey {
    background: #fafafa;
}
.d-flex {
    display: flex;
}
.d-flex.column {
    flex-direction: column;
}
.d-inline-block {
    display: inline-block !important;
}
.jc-c {
    justify-content: center;
}
.jc-sp {
    justify-content: space-around;
}
.jc-se {
    justify-content: space-evenly;
}
.pos-relative {
    position: relative;
}
.icon {
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: sub;
}
.icon.s-small {
    width: 16px;
    height: 16px;
}
.icon.small {
    width: 20px;
    height: 20px;
}
.icon.s-median {
    width: 30px;
    height: 30px;
}
.icon.median {
    width: 40px;
    height: 40px;
}
.icon.large {
    width: 50px;
    height: 50px;
}
.icon-empty {
    margin-right: 10px;
}
.icon-subject-blue {
    background-image: url("/img/icon05-b.png");
    vertical-align: top;
}

.icon-article-b {
    background-image: url("/img/icon09-b.png");
    vertical-align: top;
}

.icon-clock-ltb {
    background-image: url("/img/icon-b1.png");
    vertical-align: top;
    margin-right: 10px;
}
.icon-users-ltb {
    background-image: url("/img/icon-b2.png");
    vertical-align: top;
    margin-right: 10px;
}
.icon-coin-ltb {
    background-image: url("/img/icon-b3.png");
    vertical-align: top;
    margin-right: 10px;
}

.icon-film-roll {
    background-image: url("/img/icon4.png");
    vertical-align: top;
    margin-right: 10px;
}
.icon-film {
    background-image: url("/img/icon5.png");
    vertical-align: top;
    margin-right: 10px;
}
.icon-gift {
    background-image: url("/img/icon10.png");
    vertical-align: top;
    margin-right: 10px;
}
.icon-raisehand {
    background-image: url("/img/icon12.png");
    vertical-align: top;
    margin-right: 10px;
}
.icon-paper {
    background-image: url("/img/icon_1.png");
    margin-right: 10px;
}
.icon-target {
    background-image: url("/img/icon_2.png");
    margin-right: 10px;
}
.icon-books {
    background-image: url("/img/icon_3.png");
    margin-right: 10px;
}
.icon-computer {
    background-image: url("/img/icon_4.png");
    margin-right: 10px;
}
.icon-calculator {
    background-image: url("/img/icon_5.png");
    margin-right: 10px;
}
.icon-flag {
    background-image: url("/img/icon_6.png");
    margin-right: 10px;
}
.icon-hat {
    background-image: url("/img/icon_7.png");
    margin-right: 10px;
}
.icon-openbook {
    background-image: url("/img/icon_8.png");
    margin-right: 10px;
}
.icon-formbook {
    background-image: url("/img/icon_9.png");
    margin-right: 10px;
}
.icon-funnel {
    background-image: url("/img/icon15.svg");
}
.icon-camp {
    background-image: url("/img/learning-group/camp.png");
}
.icon-promote {
    background-image: url("/img/learning-group/promote.png");
}
.icon-openbook2 {
    background-image: url("/img/study.png");
}
.icon-result {
    background-image: url("/img/result.png");
}
.icon-light-bulb {
    background-image: url("/img/youth/lightbulb.png");
    vertical-align: bottom;
    margin-right: 10px;
}
.text-red {
    color: #d2401f;
}
.text-blue {
    color: #0a4b4f;
}
.btn {
    font-size: 20px;
    border-radius: 30px;
    border: 0;
    padding: 10px 20px;
    color: #fff;
    cursor: pointer;
}
.btn-sm {
    font-size: 16px;
    border-radius: 10px;
    border: 0;
    padding: 5px 10px;
}
.btn-md {
    font-size: 20px;
    border-radius: 30px;
    border: 0;
    padding: 10px 30px;
    line-height: 30px;
}
.btn-lg {
    font-size: 24px;
    border-radius: 40px;
    border: 0;
    padding: 10px 30px;
    line-height: 45px;
}
.btn-width {
    padding: 6px 25px;
}
.btn-square {
    border-radius: 4px;
    height: 45px;
}
.btn-red {
    background: #d2401f;
    color: #fff;
}
.btn-red:hover {
    background: #822a16;
    color: #fff;
}
.btn-blue {
    background: #45a0bc;
    color: #fff;
}
.btn-blue:hover {
    background: #34778c;
    color: #fff;
}
.btn-green {
    background: #426a45;
    color: #fff;
}
.btn-green:hover {
    background: #28402a;
    color: #fff;
}

.btn-green2:hover {
    background: #0a4b4f;
    color: #fff;
}

.btn-yellow {
    background: #f7b425;
    color: white;
}

.btn-yellow:hover {
    background: #d59201;
    color: white;
}

.btn-yellow-disabled {
    background: #f7d181;
    color: #bdad8a;
}

.btn-yellow-disabled:hover {
    background: #f7d181;
    color: #bdad8a;
    cursor: not-allowed;
}

.btn-play {
    vertical-align: text-top;
    margin-left: 10px;
}

.btn-search,
.btn-icon {
    height: 30px;
    margin-top: 5px;
    margin-left: 10px;
    padding-top: 3px;
}

.bg-flower-r1 {
    background-image: url("/img/bg_flower_1.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    height: 250px;
    width: 150px;
    position: absolute;
    top: -100px;
    right: 0;
}

.pd10 {
    padding-top: 10px;
}
.blue-red-wave-bg {
    background-color: #86dbef;
    background-image: url(/img/bg_06_b.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    min-height: 550px;
    text-align: center;
}

.logo {
    position: absolute;
    top: 110px;
    width: 100%;
}
.logo img {
    margin: 0 auto;
}
.logo h1 {
    text-align: center;
}
.logo a {
    display: inline-block;
    margin: 0 auto;
}
.logo h1 img {
    width: 305px;
    margin-top: -55px;
}

.course-chapter-block.desktop-only {
    display: inline-block;
}
.course-chapter-block.mobile-only {
    display: none;
}
/*index menu*/

.blue-wave {
    display: block;
}
/*pages menu*/
.container .title {
    margin: 0 auto;
    height: 54px;
    font-size: 30px;
    line-height: 54px;
    vertical-align: bottom;
}
.container .title.large {
    height: 108px;
}
.container .icon-topic {
    margin: 0 auto;
    text-align: center;
}
.container .icon-topic img {
    height: 40px;
    display: inline-block;
    vertical-align: sub;
}
.container .icon-topic span.icon-topic-text {
    display: inline-block;
    font-size: 38px;
    line-height: 60px;
    margin-left: 10px;
    font-weight: 700;
    color: #0a4b4f;
}
/*index video frame*/
.recommend {
    background-color: #86dbef;
    background-image: url("/img/bg_03.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    height: 800px;
    text-align: center;
}
.video video {
    width: 650px; /* 450px */
    height: 380px; /* 260px */
}

.course-teacher-img {
    width: 20%;
    text-align: center;
}

.recommend-about-course {
    width: 80%;
}
.recommend-about-course p {
    font-size: 20px;
    text-align: left;
    padding: 20px 50px;
    line-height: 2;
    font-weight: 400;
}
.course {
    background-image: url("/img/bg_04.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    height: 620px;
    position: relative;
}
.bg-flower-r2 {
    background-image: url("/img/bg_flower_2.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    height: 300px;
    width: 120px;
    position: absolute;
    top: -150px;
    right: 0;
}
.course-list {
    margin: 0 auto;
    margin-top: 40px;
    width: 88%;
    padding: 0 20px;
}

.slick-slide {
    height: auto;
}
.course-img {
    width: 100%;
    position: relative;
}
.course-img img {
    max-width: 100%;
    max-height: 100%;
}
.course-img .heart-box {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #bbb;
    font-size: 16px;
    width: 30px;
    height: 30px;
    background: #eee;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
}
.heart-box.active {
    color: #d2401f;
}

.course-detail-list li {
    width: 100%;
    color: #45a0bc;
    font-size: 20px;
    line-height: 1.5;
    vertical-align: middle;
    font-weight: 600;
}
.slick-prev,
.slick-next {
    height: auto;
    width: 10px;
}
.teachers {
    background-color: #86dbef;
    background-image: url("/img/bg_05.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    height: 980px;
}

.frame {
    background-repeat: no-repeat;
    background-position: right;
    background-size: 95%;
    height: 240px;
}

.commends {
    background-image: url("/img/bg_06.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    height: 650px;
}
.commends-list {
    width: 70%;
    margin: 0 auto;
    margin-top: 40px;
    text-align: center;
}
.commends-list-li {
    background-image: url("/img/frame4.png");
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
    height: 200px;
    position: relative;
}
.user-img {
    border-radius: 50%;
    width: 130px;
    height: 130px;
    position: absolute;
    left: 40px;
    top: 40px;
    border: 2px solid #fff;
}
.commend {
    width: 70%;
    height: 70%;
    position: absolute;
    right: 10%;
    top: 38px;
    font-size: 20px;
    line-height: 30px;
    text-align: right;
}
.commend p {
    text-align: left;
    height: 85px;
    white-space: normal;
    overflow: hidden;
}

.title > .text-large {
    font-size: 40px;
    vertical-align: inherit;
}

/*page 課程介紹*/
.page-course {
    background-color: #86dbef;
    background-image: url("/img/bg_05.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    min-height: 800px;
    text-align: center;
    padding-bottom: 150px;
}
.page-course .breadcrumb {
    width: 90%;
    text-align: left;
    margin-left: 5%;
    margin-bottom: 20px;
    font-size: 14px;
    color: #0f7291;
}
.page-course .breadcrumb a,
.page-course .breadcrumb a.active {
    color: #0f7291;
}
.page-course .breadcrumb i {
    color: #fff;
}
.title-icon {
    display: inline-block;
    height: 54px;
}
.course-text {
    display: inline-block;
    font-size: 40px;
    line-height: 54px;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #0a4b4f;
}

/*page video frame exam box*/
.course-video-test {
    overflow-y: scroll;
    height: 38vw;
    background: #fff;
    text-align: left;
    scrollbar-color: #86dbef #0a4b4f;
    display: none;
}
.course-video-test {
    scrollbar-face-color: #86dbef;
    scrollbar-shadow-color: #ffffff;
    scrollbar-highlight-color: #ffffff;
    scrollbar-3dlight-color: #ffffff;
    scrollbar-darkshadow-color: #ffffff;
    scrollbar-track-color: #ffffff;
    scrollbar-arrow-color: #ffffff;
}
.course-video-test::-webkit-scrollbar {
    width: 12px;
}
.course-video-test::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.course-video-test::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #45a0bc;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}
.course-video-test.block {
    display: block;
}
.course-video-test .test-title {
    font-size: 30px;
    line-height: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    text-align: center;
    border-bottom: 3px solid #86dbef;
    background-image: url(/img/exam-system/exam-title-bg.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    color: #0a4b4f;
}
.section-text {
    margin-left: 40px;
    margin-right: 10px;
}
.btn-group {
    margin: 0 auto;
    margin-top: 30px;
}
.review-course-list {
    height: 60px;
    line-height: 60px;
    font-size: 36px;
    background: #426a45;
    color: #fff;
    cursor: pointer;
    display: none;
}
.course-chapter-block {
    width: 25vw;
    height: 50vw;
    display: inline-block;
    vertical-align: top;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-color: #86dbef #0a4b4f;
}
.course-chapter-block {
    scrollbar-face-color: #86dbef;
    scrollbar-shadow-color: #ffffff;
    scrollbar-highlight-color: #ffffff;
    scrollbar-3dlight-color: #ffffff;
    scrollbar-darkshadow-color: #ffffff;
    scrollbar-track-color: #ffffff;
    scrollbar-arrow-color: #ffffff;
}
.course-chapter-block::-webkit-scrollbar {
    width: 12px;
}
.course-chapter-block::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.course-chapter-block::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #45a0bc;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}
.chapter-list {
    font-size: 30px;
    font-weight: 600;
    text-align: left;
    color: #0a4b4f;
    padding-top: 20px;
    position: relative;
    z-index: 0;
}
.chapter-list a {
    text-decoration: none;
    color: #0a4b4f;
}
.chapter-list:after {
    content: "";
    background-image: url("/img/line1.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 25vw;
    height: 80px;
    text-align: center;
    position: absolute;
    bottom: -45px;
    pointer-events: none;
}
.chapter-list > li {
    position: relative;
    line-height: 80px;
    padding-top: 15px;
    z-index: 100;
}
.chapter-list > li:before {
    content: "";
    background-image: url("/img/line1.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 24vw;
    height: 80px;
    text-align: center;
    position: absolute;
    top: -30px;
    pointer-events: none;
    z-index: 9;
}
.chapter-list ul li {
    font-size: 16px;
    line-height: 20px;
    margin: 5px 0 0 18%;
}
.chapter-play-btn {
    border-radius: 50%;
    vertical-align: middle;
    text-align: center;
    font-size: 8px;
    padding-top: 1px;
    height: 20px;
    width: 20px;
    background: #d2401f;
    color: #fff;
    margin-right: 5px;
    display: inline-block;
}

.chapter-list .icon-film-roll {
    height: 40px;
    width: 40px;
    margin-top: 20px;
    margin-left: 10px;
}
.chapter-list .icon-film {
    height: 24px;
    width: 24px;
    margin-left: 20px;
    margin-top: 7px;
    margin-right: 20px;
}
.chapter-list .icon-film.small {
    height: 20px;
    width: 20px;
    margin-left: 0;
    margin-top: 0;
    margin-right: 10px;
}
.chapter-title-box button {
    vertical-align: top;
    margin-top: 30px;
    float: right;
    margin-right: 10px;
    z-index: 10;
}
span.chapter {
    display: inline-block;
    font-size: 24px;
    line-height: 30px;
    margin-top: 20px;
    margin-bottom: 0;
    width: 50%;
    cursor: pointer;
}
.chapter-title-box .chapter-price {
    font-size: 16px;
    line-height: 20px;
}
.chapter-title-box .chapter .fa-sort-down {
    vertical-align: top;
    margin-left: 0;
    margin-top: -3px;
}
.chapter-title-box .chapter.hide .fa-sort-down {
    vertical-align: top;
    margin-left: 0;
    margin-top: 5px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.chapter-lists {
    display: none;
    margin-bottom: 20px;
}
.chapter-lists.active {
    display: block;
}
.fa-play-circle {
    margin-right: 10px;
    margin-left: 0;
    color: #c63716;
    background: #fff;
    border-radius: 50%;
}

.pageCourse .course-details {
    background-color: #fff;
    background-image: url("/img/bg_04_c.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    min-height: 400px;
    padding-bottom: 100px;
    position: relative;
}

.introduce-video-style {
    display: inline-block;
    overflow: hidden;
    width: 60vw;
    height: 34.5vw;
    border-radius: 50px;
    transform: translateZ(0px);
    border: 10px solid #fff;
    margin-top: 20px;
}
.introduce-video-style video {
    width: 60vw;
    height: 34vw;
}
.introduce-block {
    width: 22vw;
    margin-top: 30px;
    margin-left: 20px;
    padding-top: 40px;
    display: inline-block;
    vertical-align: top;
}
.introduce-course-title {
    font-weight: 600;
    color: #d2401f;
    font-size: 36px;
    line-height: 40px;
    margin-bottom: 20px;
    height: 80px;
    overflow: hidden;
}
.introduce-course-detail-list {
    margin-bottom: 40px;
}
.introduce-course-detail-list li {
    width: 100%;
    color: #45a0bc;
    font-size: 30px;
    line-height: 30px;
    vertical-align: middle;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 10px;
}
.introduce-course-detail-list li.course-teacher {
    color: #0a4b4f;
    margin-bottom: 20px;
}
.pageCourse .course {
    background-color: #86dbef;
    background-image: url("/img/bg_06_b.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
    min-height: 650px;
    padding-top: 60px;
    padding-bottom: 100px;
}
.introduce-detail-list {
    padding: 20px 0;
}
.introduce-detail-list li {
    margin-bottom: 20px;
}
.icon-title-bg {
    background-image: url("/img/line2.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    height: 80px;
    font-size: 34px;
    line-height: 80px;
    font-weight: 600;
    color: #45a0bc;
}
.content {
    font-size: 18px;
    line-height: 32px;
}
.content a {
    text-decoration: none;
    color: #45a0bc;
    word-break: break-all;
}
.download-files li {
    margin-bottom: 10px;
}
.tab-discuss {
    padding-top: 30px;
}
.tab-discuss .form-group .btn-blue i,
.tab-student-review .form-group .btn-blue i {
    margin-right: 5px;
}

.input-input {
    position: relative;
}
.input-input input[type="text"] {
    padding-left: 45px;
    color: #3c3c3c;
    vertical-align: top;
}
.input-icon {
    position: absolute;
    top: -1px;
    left: 15px;
    font-size: 20px;
    color: #45a0bc;
}
.comments {
    display: flex;
    justify-content: space-evenly;
    padding: 20px 0 0 0;
}
.frame-line-bg {
    background-image: url("/img/line2.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    height: 55px;
    font-size: 34px;
}
.round-img img {
    border-radius: 50%;
    width: 80px;
    margin: 0 auto;
    display: inline-block;
}
.round-img img.small {
    width: 80px;
}
.right-text {
    width: 80%;
    line-height: 1.5;
    letter-spacing: 0.01rem;
}
.comments-stars {
    font-size: 20px;
    line-height: 30px;
    vertical-align: text-top;
}
.comments-stars.add-comments {
    cursor: pointer;
    color: #0a4b4f;
}
.homework-box {
    width: 20%;
    display: inline-block;
    margin-right: 6%;
}
.tab-homework-review .tab-title {
    color: #0a4b4f;
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: 700;
}
.review-title {
    line-height: 22px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #686868;
}
.review-content {
    line-height: 22px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #686868;
}
.homework-result a {
    display: inline-block;
    width: 23%;
    margin-right: 2%;
}
.homework-result a:nth-child(4n) {
    margin-right: 0;
}
.homework-box {
    background-color: #fff;
    width: 100%;
    margin-top: 20px;
    -webkit-box-shadow: 0px 0px 21px -13px rgba(36, 36, 36, 1);
    -moz-box-shadow: 0px 0px 21px -13px rgba(36, 36, 36, 1);
    box-shadow: 0px 0px 21px -13px rgba(36, 36, 36, 1);
    display: block;
}
.homework-box:last-child {
    margin-right: 0;
}
.homework-box img {
    max-width: 100%;
    width: 100%;
}
.homework-box .round-img img,
.lightbox .round-img img {
    max-width: 100%;
    width: 60px;
    margin: 20px;
}
.homework-box .homework-name,
.lightbox .homework-name {
    margin: 20px 20px 20px 0;
}
.homework-name > .name {
    margin-top: 5px;
    line-height: 32px;
    color: #000;
}
.homework-name > .date {
    color: #7e7e7e;
}
img.max-width {
    max-width: 100%;
    width: 100%;
}
/*discover 探索學群*/
.discover-container {
    background-image: url(/img/bg_07.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    min-height: 900px;
}
.tab section.tab6-block,
.tab section.tab7-block {
    width: 100%;
}
.tab section.tab5-block .width85,
.tab section.tab6-block .width85,
.tab section.tab7-block .width85 {
    width: 85%;
    margin: 0 auto;
}
/* .discover-container .tab7-block {
  min-height: 800px;
} */
.discover-slider {
    margin: 0 auto;
    margin-top: 40px;
    width: 95%;
}
.discover-slider li.discover-list {
    background-color: #fff;
    border: 1px solid #f1f1f1;
    padding: 0;
    margin: 10px 20px;
    color: #0a4b4f;
    font-size: 26px;
    border-radius: 5px;
    vertical-align: middle;
    font-weight: 600;
    -webkit-box-shadow: 5px 7px 7px -8px rgba(83, 83, 83, 0.5);
    -moz-box-shadow: 5px 7px 7px -8px rgba(83, 83, 83, 0.5);
    box-shadow: 5px 7px 7px -8px rgba(83, 83, 83, 0.5);
}
.discover-slider-img img {
    max-width: 100%;
    max-height: 100%;
}
.discover-slider-block {
    padding: 10px;
}
.discover-title a.red {
    color: #d2401f;
    font-size: 20px;
}
.discover-sub-title a.green {
    color: #0a4b4f;
    font-size: 16px;
}
.discover-major-list {
    display: flex;
    flex-flow: wrap;
    margin-top: 10px;
}
.discover-major-list > li {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid #bababa;
    padding: 5px;
}
.discover-container .select {
    border: 1px solid #999;
    font-size: 18px;
    background-color: #45a0bc;
    display: inline-block;
    position: relative;
    width: 320px;
    height: 40px;
    color: #fff;
}

.option-block {
    position: relative;
}
.option-block .btn {
    /* position: absolute;
  left: 330px;
  top: 0; */
    font-size: 16px;
    height: 33px;
}
.selected-block {
    display: flex;
    flex-flow: wrap;
}
.selected-block li {
    position: relative;
    padding: 0 10px;
    width: 150px;
    height: 33px;
    border: 1px solid #45a0bc;
    color: #45a0bc;
    background: #fff;
    display: inline-block;
    margin-right: 10px;
    line-height: 33px;
}
.selected-block li i {
    float: right;
    line-height: 33px;
}
.discover-learning-container {
    display: flex;
    margin-top: 80px;
}
.discover-learning-block {
    display: flex;
    flex-direction: column;
    width: 40%;
}
.discover-learning-chevron {
    width: 20%;
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    color: #45a0bc;
}
.work-type-container {
    background-image: url("/img/workarea-bg.png");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    height: 600px;
    position: relative;
}
.work-type {
    position: absolute;
    top: 28%;
    left: 20%;
    width: 730px;
    display: inline-block;
}
.work-type-button {
    position: absolute;
    bottom: 55px;
    left: 44%;
}
.work-type-list {
    height: 300px;
    overflow-x: auto;
}
.work-type-list {
    scrollbar-face-color: #269ec7;
    scrollbar-shadow-color: #ffffff;
    scrollbar-highlight-color: #ffffff;
    scrollbar-3dlight-color: #ffffff;
    scrollbar-darkshadow-color: #ffffff;
    scrollbar-track-color: #ffffff;
    scrollbar-arrow-color: #ffffff;
}
.work-type-list::-webkit-scrollbar {
    width: 12px;
}
.work-type-list::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.work-type-list::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #269ec7;
}
.work-type-list li {
    border: 2px solid #fff;
    border-radius: 20px;
    color: #fff;
    margin: 10px;
    padding: 10px 20px;
    display: inline-block;
    width: 150px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
.work-type-list li.active {
    border: 2px solid #fff;
    color: #c63e21;
    background: #fff;
}
/*holland tab2 step1*/
.tab-left-block {
    display: inline-block;
    width: 25%;
}
.tab-left-block .list-steps {
    display: inline-flex;
    justify-content: space-between;
    margin-top: 50px;
    width: 100%;
    overflow: hidden;
}
.tab-left-block .list-steps img {
    display: inline;
}
.tab-left-block .list-steps .li-step {
    text-align: center;
    color: #9199ab;
    font-weight: 700;
    line-height: 1.2rem;
    position: relative;
    z-index: 0;
}
.tab-left-block .list-steps .li-step.active {
    color: #45a0bb;
}
.tab-left-block .list-steps .li-step.dk-active {
    color: #1b577a;
}
.tab-left-block .list-steps .step-ttl {
    margin-top: 8px;
    width: 66px;
}
.tab-left-block .line,
.tab-left-block .dkblue-line,
.tab-left-block .ltblue-line {
    position: relative;
}

.tab-left-block .line:after {
    position: absolute;
    width: 60px;
    height: 2px;
    top: 23px;
    left: 55px;
    content: "";
    background: #d3dde6;
    z-index: -1;
}
.tab-left-block .dkblue-line:after {
    position: absolute;
    width: 37px;
    height: 2px;
    top: 23px;
    left: 57px;
    content: "";
    background: #1b577a;
}
.tab-left-block li:nth-child(4) .dkblue-line:after {
    width: 0;
}
.tab-left-block .ltblue-line:after {
    position: absolute;
    width: 38px;
    height: 2px;
    top: 23px;
    left: 57px;
    content: "";
    background: #45a0bb;
    z-index: -1;
}

.tab-left-block .line2,
.tab-left-block .dkblue-line2,
.tab-left-block .ltblue-line2 {
    position: relative;
}

.tab-left-block .line2:after {
    position: absolute;
    width: 34vw;
    height: 2px;
    top: 23px;
    left: 55px;
    content: "";
    background: #d3dde6;
    z-index: -1;
}
.tab-left-block .dkblue-line2:after {
    position: absolute;
    width: 34vw;
    height: 2px;
    top: 23px;
    left: 57px;
    content: "";
    background: #1b577a;
}

.tab-left-block .ltblue-line2:after {
    position: absolute;
    width: 34vw;
    height: 2px;
    top: 23px;
    left: 57px;
    content: "";
    background: #45a0bb;
    z-index: -1;
}

.tab-right-block-bg {
    background: #ebf7ff;
    border-radius: 80px;
    display: inline-flex;
    width: 70%;
    margin: 50px 0 0 30px;
    padding: 20px 0;
}
.tab-right-block-bg.white {
    background: #fff;
}
.tab-right-block-bg .step-title {
    font-size: 40px;
    font-weight: 700;
    color: #48a8e0;
    line-height: 80px;
    margin: 0 0 0 40px;
    border-right: 2px solid #b4e0fa;
    padding-right: 30px;
    letter-spacing: -0.72px;
}
.tab-right-block-bg.white .step-title {
    line-height: 100px;
}
.tab-right-block-bg .step-content {
    width: 31%;
    margin: 10px 25px;
}
.tab-right-block-bg.white .step-content {
    width: auto;
    max-width: 40%;
}
.tab-right-block-bg .step-content .steptitle {
    font-size: 18px;
    font-weight: 600;
    color: #4b5362;
    letter-spacing: 1px;
}
.tab-right-block-bg .step-content .stepcontent {
    font-size: 13px;
    color: #4b5362;
    margin-top: 10px;
    line-height: 18px;
}
.tab-right-block-bg .step-content .stepselected {
    font-size: 14px;
    font-weight: 600;
    color: #4b5362;
    letter-spacing: 1px;
    text-align: right;
    line-height: 60px;
}
.tab-right-block-bg .step-content .step-img {
    position: absolute;
    width: 120px;
    bottom: -20px;
    right: 0;
}
.holland-input {
    border: 1px solid #48a8e0;
    height: 80px;
    width: 55px;
    padding: 10px 15px;
    font-size: 30px;
    color: #48a8e0;
    border-radius: 5px;
    margin-right: 20px;
}
.holland-search-btn-block {
    line-height: 58px;
    padding-left: 20px;
}
.tab-right-block-bg.white .holland-search-btn-block {
    line-height: 72px;
    margin-right: 20px;
}
.holland-search-btn {
    border-radius: 5px;
    background: #d2401f;
    color: #fff;
    padding: 0 16px;
    height: 36px;
    width: 150px;
    vertical-align: bottom;
}
.holland-search-btn.disabled {
    background: #999;
    cursor: not-allowed;
}
.explore-img {
    padding-left: 20px;
}
.holland-intro {
    border-left: 1px solid #e3eaef;
    padding-left: 20px;
    margin-top: 20px;
    color: #484e5d;
    font-size: 15px;
    line-height: 24px;
}
.holland-title {
    color: #484e5d;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 15px;
}
.holland-title .fa-info-circle {
    color: #5087e6;
    margin-right: 5px;
}
.holland-title a {
    color: #64b5e5;
    margin-left: 5px;
    text-decoration: underline;
}
.holland-title a .fa-external-link-alt {
    margin-left: 5px;
    margin-right: 5px;
}
ul.list-style {
    list-style: initial;
    list-style-position: inside;
    padding: 0;
    margin-top: 10px;
}
.tab-right-block {
    display: inline-flex;
    width: 70%;
    margin: 50px 0 0 30px;
    padding: 20px 0;
}
.tab-fadein-right {
    background: #f7f7f7;
    width: 62%;
    min-height: 400px;
    padding: 0 45px 25px 45px;
    color: #484e5d;
    font-size: 15px;
    line-height: 24px;
    margin-top: 20px;
    margin-left: -30px;
    z-index: -3;
}
.tab-fadein-right .block-title {
    color: #094e52;
    letter-spacing: 2px;
    font-weight: 700;
    display: inline-block;
    font-size: 18px;
    margin-top: 25px;
    width: 100%;
}
.tab-fadein-right .block-title img {
    display: inline-block;
    vertical-align: bottom;
    margin-right: 8px;
    width: 24px;
    height: 24px;
}
.tab-fadein-right ul.list-style {
    list-style: initial;
    padding-left: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ededed;
}
.study-group-list {
    line-height: 18px;
    margin-top: 10px;
}
.study-group-list li {
    display: inline-block;
    border: 1px solid #484e5d;
    padding: 5px;
    background: #fff;
    margin: 2px;
    font-size: 15px;
    color: #484e5d;
    cursor: pointer;
}
.study-group-list.blue {
    margin-top: 10px;
    margin-bottom: 10px;
}
.study-group-list.blue li {
    border: 1px solid #45a0bb;
    background: #fff;
    color: #45a0bb;
    cursor: pointer;
    margin-bottom: 3px;
}
.next-step {
    margin: 70px 0 15px 0;
    display: flex;
    justify-content: center;
    line-height: 50px;
    color: #45a0bb;
    font-weight: 700;
}
.next-step img {
    margin: 0 10px;
}
.next-step .txt-grey {
    color: #484e5d;
}
.holland-next-step {
    background: url("/img/holland/bluemask-flower.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 420px;
    background-position: bottom;
}
.reselect-study-group {
    color: #45a0bb;
    cursor: pointer;
    font-size: 15px;
}
.reselect-study-group i {
    margin-right: 10px;
}
.reselect-study-group span {
    color: #484e5d;
    font-size: 14px;
}
.holland-search-course {
    position: relative;
    margin-top: -110px;
}
.holland-search-course.top0 {
    margin-top: 0;
}
.holland-search-course img {
    display: inline-block;
    margin-right: 20px;
}
.holland-search-course .search-course-title {
    display: inline-block;
    position: absolute;
    bottom: 50px;
    font-size: 20px;
    font-weight: 700;
    color: #0a4b4f;
}
.holland-search-course .search-course-sub-title {
    display: inline-block;
    position: absolute;
    bottom: 20px;
    font-size: 17px;
    font-weight: 700;
    color: #484e5d;
}
.load-more-course {
    display: flex;
    align-items: center;
    margin: 20px 0 50px 0;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0);
    border: 1px solid #d24020;
    border-radius: 20px;
    color: #d24020;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.load-more-course i {
    margin-top: 10px;
    font-size: 20px;
}
.load-more-course a {
    color: #c63e21;
    text-align: center;
}
.load-more-course a:hover {
    color: #7d2816;
}
/*探索學群tab3*/
.selectjob-slider {
    margin: 0 auto;
    margin-top: 40px;
    width: 95%;
}
.selectjob-slider li.selectjob-list {
    background-color: #fff;
    border: 1px solid #f1f1f1;
    padding: 20px;
    margin: 10px 20px;
    color: #0a4b4f;
    font-size: 26px;
    border-radius: 5px;
    vertical-align: middle;
    font-weight: 600;
    -webkit-box-shadow: 5px 7px 7px -8px rgba(83, 83, 83, 0.5);
    -moz-box-shadow: 5px 7px 7px -8px rgba(83, 83, 83, 0.5);
    box-shadow: 5px 7px 7px -8px rgba(83, 83, 83, 0.5);
}
.selectjob-slider li.selectjob-list.border {
    border: 1px solid #45a0bc;
}
.selectjob-list .selectjob-title {
    line-height: 50px;
    vertical-align: top;
    font-size: 20px;
    display: flex;
    margin-bottom: 10px;
}
.selectjob-list .selectjob-title img {
    width: 50px;
    height: 50px;
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
}
.selectjob-list .selectjob-title .jobcategory {
    vertical-align: top;
    line-height: 50px;
    margin-left: 10px;
    font-size: 24px;
}
.selectjob-list .selectjob-title .jobnumbers {
    vertical-align: top;
    line-height: 50px;
    font-size: 13px;
    color: #4b5362;
    font-weight: 400;
    margin-left: 15px;
}
.selectjob-list .selectjob-title .selectjoblabel {
    margin-right: 15px;
    font-size: 16px;
    color: #45a0bc;
    margin-left: auto;
}
.selectjoblabel input[type="checkbox"] {
    margin-right: 10px;
}
.selectjob-major-list .jobtitle {
    line-height: 20px;
}
.selectjob-major-list .jobtitle:after {
    content: "/";
    margin-left: 5px;
    margin-right: 0;
}
.selectjob-major-list .jobtitle:last-child:after {
    content: "";
    margin-left: 0;
    margin-right: 0;
}
.selectjob-major-list .selectjob-major-content {
    font-size: 14px;
    font-weight: 400;
    color: #4b5362;
    padding: 0 0 0 15px;

    max-height: 0;
    transition: max-height 0.3s ease-out;
    transition: padding 0.2s ease-out;
    overflow: hidden;
}
.selectjob-major-list .selectjob-major-content.open {
    padding: 15px 0 0 15px;
    max-height: 500px;
    transition: max-height 0.3s ease-in;
    transition: padding 0.2s ease-in;
}
.selectjob-major-list {
    display: flex;
    flex-flow: column;
    height: 300px;
    overflow-y: scroll;
}
/*下拉式選單卷軸顏色*/
.selectjob-major-list::-webkit-scrollbar {
    width: 11px;
}
.selectjob-major-list {
    scrollbar-width: thin;
    scrollbar-color: #90a4ae #fff;
}
.selectjob-major-list::-webkit-scrollbar-track {
    /* background: #CFD8DC; */
    background: #fff;
}
.selectjob-major-list::-webkit-scrollbar-thumb {
    background-color: #90a4ae;
    border-radius: 6px;
    border: 3px solid #fff;
}
.selectjob-major-list > li {
    display: inline-block;
    margin-right: 5px;
    font-size: 16px;
    border-bottom: 1px solid #bababa;
    padding: 15px 10px 15px 0;
    font-weight: 700;
    color: #4b5362;
}
.selectjob-major-list li .fa-caret-right {
    margin-right: 10px;
    color: #d2401f;
}
.selectjob-major-list li .fa-caret-down {
    margin-right: 6px;
    color: #d2401f;
}

.majortext {
    display: flex;
    justify-content: center;
    padding: 20px;
    border-bottom: 1px solid #d9d9d9;
    cursor: pointer;
}
.majortext i {
    font-size: 26px;
    color: #48a8e0;
    vertical-align: middle;
    margin-right: 10px;
}
.majortext .majortitle {
    font-size: 22px;
    line-height: 26px;
    font-weight: 600;
    color: #4b5362;
    letter-spacing: 0;
    vertical-align: middle;
    margin-right: 10px;
}
.majortext .majorselected {
    font-size: 14px;
    line-height: 26px;
    font-weight: 600;
    color: #4b5362;
    letter-spacing: 1px;
    text-align: right;
    vertical-align: middle;
}
.majorcontent {
    overflow: hidden;
    color: #000;
    line-height: 50px;
    transition: all 0.5s ease-in-out;
    height: 0;
}
.majorcontent.show {
    overflow: visible;
    height: auto;
    transition: all 0.35s;
}
.majorcontent .grid {
    display: grid;
    grid-gap: 13px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: 10px;
    padding: 15px;
}
.majorcontent .grid .itemtitle {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.majorcontent .grid .itemtitle .category {
    font-size: 20px;
    font-weight: 600;
    color: #074c50;
    margin-bottom: 8px;
}

.majorcontent .grid .maintitle {
    font-size: 18px;
    font-weight: 600;
    line-height: 36px;
    color: #0a4b4f;
    padding-bottom: 3px;
}
.majorcontent .grid .content {
    font-size: 16px;
    line-height: 26px;
    padding: 20px;
    background: #fff;
    border: 1px solid #fff;
    cursor: pointer;
}
.majorcontent .grid .content.selected {
    border: 1px solid #48a8e0;
}
.majorcontent .descrip p {
    margin-bottom: 20px;
    color: #4b5362;
}

.step1 .majorcontent .grid .content.selected {
    border: 2px solid #5087e6;
}

.step1 .majorcontent .grid .content {
    height: 88px;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}

.step1 .majorcontent .descrip p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    width: 100%;
}

.btn-next-step {
    background: #d24020;
    padding: 0 30px;
    min-width: 181px;
    height: 43px;
    border-radius: 21.5px;
    color: white;
    font-size: 14px;
}

.btn-back-step {
    background: rgba(0, 0, 0, 0);
    padding: 8px 20px;
    justify-content: center;
    margin: 0 30px;
    height: 40px;
    border-radius: 21.5px;
    color: #1b577a;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    border: solid 1px #1b577a;
}

.btn-next-step:disabled {
    background: gray;
    padding: 0 30px;
    height: 43px;
    min-width: 181px;
    border-radius: 21.5px;
    color: white;
    font-size: 14px;
}

.majorselect-btn {
    border-radius: 5px;
    background: #d2401f;
    color: #fff;
    padding: 0 16px;
    height: 36px;
    width: auto;
    vertical-align: bottom;
}
.majorselect-btn i {
    margin-left: 10px;
    font-size: 10px;
    vertical-align: text-top;
    margin-top: 4px;
}
.highlight-text {
    background: linear-gradient(to top, yellow 50%, transparent 50%);
}
mark {
    display: inline-block;
    line-height: 0em;
    padding-bottom: 0.5em;
    background: #d1eeff;
    color: #4b5362;
    font-weight: 700;
}
.catpow {
    background: url("/img/holland/catpaw.png");
    background-repeat: no-repeat;
    background-position: left 43% bottom;
    height: 300px;
}
.selectjob-smallblock {
    margin: 0 auto;
    margin-top: 40px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.selectjob-smallblock li.selectjob-smallblock-list {
    background-color: #fff;
    border: 1px solid #f1f1f1;
    padding: 20px;
    color: #0a4b4f;
    font-size: 26px;
    border-radius: 5px;
    vertical-align: middle;
    font-weight: 600;
    -webkit-box-shadow: 5px 7px 7px -8px rgba(83, 83, 83, 0.5);
    -moz-box-shadow: 5px 7px 7px -8px rgba(83, 83, 83, 0.5);
    box-shadow: 5px 7px 7px -8px rgba(83, 83, 83, 0.5);
    width: 23%;
    margin: 8px;
}
.selectjob-smallblock li.selectjob-smallblock-list.border {
    border: 1px solid #45a0bc;
}
.selectjob-smallblock-list .selectjob-title {
    vertical-align: top;
    font-size: 20px;
    display: flex;
}
.selectjob-smallblock-list .selectjob-title img {
    width: 50px;
    height: 50px;
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
}
.selectjob-smallblock-list .selectjob-title .jobcategory {
    margin-left: 10px;
    font-size: 24px;
    line-height: 1em;
}
.selectjob-smallblock-list .selectjob-title .jobnumbers {
    vertical-align: top;
    line-height: 50px;
    font-size: 13px;
    color: #4b5362;
    font-weight: 400;
    margin-left: 15px;
    display: block;
    width: 170px;
    line-height: 2em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.selectjob-smallblock-list .selectjob-title .selectjoblabel {
    margin-right: 15px;
    font-size: 16px;
    color: #45a0bc;
    margin-left: auto;
}
/*login*/
.login {
    height: 600px;
    text-align: center;
    padding-top: 30px;
}
.login .title {
    color: #0a4b4f;
}
.group-form {
    display: flex;
    justify-content: start;
    width: 100%;
    margin: 0 auto;
}
.group-form .title {
    text-align: center;
    margin-bottom: 24px;
    margin-top: 32px;
}
.group-form .title i {
    color: #008cbc;
}
.group-form > .form-block {
    background-color: #fff;
    border: 1px solid #c8c9ca;
    padding: 30px 20px;
    margin: 10px 20px 80px 20px;
    color: #0a4b4f;
    font-size: 16px;
    border-radius: 20px;
    vertical-align: middle;
    -webkit-box-shadow: 10px 10px 9px -10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 10px 10px 9px -10px rgba(0, 0, 0, 0.5);
    box-shadow: 10px 10px 9px -10px rgba(0, 0, 0, 0.5);
    text-align: left;
    width: 50%;
}
.form-block.large-block {
    width: 100%;
}
.group-form input[type="email"],
.group-form input[type="text"],
.group-form input[type="password"],
.group-form select {
    display: block;
    width: 100%;
    height: 45px;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-bottom: 15px;
    vertical-align: top;
}
.group-form input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: bottom;
    display: inline-block;
}
.group-form input[type="checkbox"].checkbox-add-course {
    vertical-align: baseline;
}
.group-form input[type="checkbox"].input-agree {
    vertical-align: sub;
    margin: 0 5px;
}

.discount2-label {
    font-size: 16px;
}

.discount2-label button {
    padding: 5px;
    height: 40px;
}

#discount2 {
    margin-top: 0;
    margin-bottom: 0;
}

.discount-input {
    margin: 0 5px 0 5px !important;
    height: 40px !important;
}

.discount-input-error input {
    border: 1px solid #cc6152 !important;
    color: #cc6152 !important;
}

.discount-input-error input {
    border: 1px solid #cc6152 !important;
    color: #cc6152 !important;
}

.discount-input-error .error-message {
    display: none;
    color: #cc6152;
    line-height: 40px;
    font-size: 20px;
    margin-top: 15px;
}
.group-form label {
    display: inline-block;
    margin: 10px 0;
    width: 100%;
}
.group-form label.select-topic {
    margin: 0;
}
.group-form label.select-topic input[type="text"] {
    height: auto;
}
.group-form .group-row input[type="text"].input-wd10 {
    display: block;
    width: 10%;
    height: 45px;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 0;
    vertical-align: top;
}
.center-wrapper {
    width: 50%;
    margin: 0 auto;
}
.badge-warning {
    margin-left: 10px;
    display: none;
}
.forgot-password {
    font-size: 16px;
    color: #1975e1;
    cursor: pointer;
    white-space: nowrap;
    margin-left: 5px;
}
.login .social-btn-wrapper {
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
    /* border-top: 2px solid #86dbef; */
    position: relative;
}
.login .social-btn-wrapper:before {
    content: "";
    background-image: url(/img/line3.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
    position: absolute;
    width: 100%;
    height: 80px;
    position: absolute;
    top: -100px;
}
.google-btn {
    width: 48%;
    height: 42px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: inline-block;
    border: 1px solid #ced4da;
    text-align: center;
}
.google-icon {
    margin-top: 11px;
    margin-right: 15px;
    width: 18px;
    height: 18px;
    display: inline-block;
}
.google-btn-text {
    color: #1d1d1d;
    font-size: 14px;
    letter-spacing: 0.2px;
    line-height: 21px;
    vertical-align: text-top;
}
.facebook-btn {
    width: 48%;
    height: 42px;
    line-height: 21px;
    background-color: #3b5998;
    border-radius: 4px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: inline-block;
    text-align: center;
}
.facebook-icon-wrapper {
    position: absolute;
    margin-top: 1px;
    margin-left: 1px;
    width: 40px;
    height: 40px;
    border-radius: 2px;
    background-color: #3b5998;
}
.facebook-icon {
    margin-top: 11px;
    margin-right: 15px;
    width: 18px;
    height: 18px;
    display: inline-block;
}
.facebook-btn-text {
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.2px;
    vertical-align: text-top;
}
.line-btn {
    width: 48%;
    height: 42px;
    line-height: 21px;
    background-color: #06C755;
    border-radius: 4px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: inline-block;
    text-align: center;
}
.line-icon {
    margin-top: 11px;
    margin-right: 15px;
    width: 18px;
    height: 18px;
    display: inline-block;
}
.line-btn-text {
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.2px;
    vertical-align: text-top;
}
/*forget password*/
.badge-info {
    margin-bottom: 30px;
    text-align: center;
}
/*register*/
.register .social-btn-wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 120px;
    margin-top: 60px;
    /* border-top: 2px solid #86dbef; */
    position: relative;
}
.register .social-btn-wrapper:after {
    content: "";
    background-image: url(/img/line3.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
    position: absolute;
    width: 100%;
    height: 80px;
    position: absolute;
    bottom: -100px;
}
.zipcode {
    background: #fbfbfb !important;
}
.phone-block,
.city-selector-set,
.birthday-selector {
    display: flex;
    justify-content: space-between;
}
.parents-info-wrapper {
    margin-top: 100px;
    /* border-top: 2px solid #86dbef; */
    position: relative;
}
.parents-info-wrapper:before {
    content: "";
    background-image: url(/img/line3.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
    position: absolute;
    width: 100%;
    height: 90px;
    position: absolute;
    top: -100px;
}
.password-eye-icon {
    float: right;
    margin-top: -45px;
    padding-right: 30px;
    position: relative;
    z-index: 0;
}
/*member 會員中心主頁*/
.member-main {
    display: flex;
    justify-content: space-between;
}
.member-main-label {
    width: 31.5%;
    position: relative;
    padding: 35px 15px 30px;
    height: 100%;
    min-height: 200px;
    border: 1px solid #d7d7d7;
    border-radius: 20px;
}
.member-main-label a {
    color: #0a4b4f;
}
.member-main-label ul li {
    line-height: 24px;
}
.member-main-label i {
    position: absolute;
    right: 15px;
    bottom: 15px;
    font-size: 100px;
    color: rgba(134, 219, 239, 0.2);
}

.course-list-row {
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.course-list-row-li {
    background-color: #fff;
    border: 1px solid #c8c9ca;
    padding: 0;
    margin: 10px;
    color: #0a4b4f;
    font-size: 26px;
    border-radius: 5px;
    vertical-align: middle;
    font-weight: 600;
    -webkit-box-shadow: 10px 10px 9px -10px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 9px -10px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 9px -10px rgba(0, 0, 0, 0.75);
    width: 29%;
}
.course-list-row-li .course-img {
    height: auto;
}
.li-theader {
    background: #e4faff;
    margin-right: 0;
    margin-left: 0;
}
.li-tbody {
    margin-right: 0;
    margin-left: 0;
    border-bottom: 1px dotted #45a0bc;
    padding: 5px 0;
}
span.col-md {
    display: inline-block;
    width: 20%;
    padding: 10px 5px;
    text-align: center;
}
.col-md .cut-words {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;
    display: block;
}
/* cart */
.group-form > .form-block.cart-page {
    padding: 60px;
}
.cart-step {
    margin-left: 0;
    margin-right: 0;
}
.cart-step .step,
.cart-step .step-end {
    font-size: 24px;
    line-height: 40px;
    margin-bottom: 0;
    height: auto;
    padding-left: 20px;
    position: relative;
    background: #eee;
    padding: 0 0 0 40px;
}
.cart-step li {
    background: #eee;
    padding: 0;
    color: #888;
    width: 33%;
}
.cart-step .step:before {
    position: absolute;
    content: "";
    display: block;
    top: 0;
    right: -20px;
    width: 20px;
    height: 40px;
    background: url(/img/step-arrow-green.png) no-repeat;
    background-size: 20px;
    z-index: 1;
}

.cart-step .step.active {
    color: #fff;
    background: #426a45;
    position: relative;
}
.step.active:before {
    position: absolute;
    content: "";
    display: block;
    top: 0;
    right: -20px;
    width: 20px;
    height: 40px;
    background: url(/img/step-arrow-green.png) no-repeat;
    background-size: 20px;
    z-index: 1;
    background-position: 0 -40px;
}
.cart-step .step-end.active {
    color: #fff;
    background: #426a45;
    position: relative;
}
.cart-title {
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    font-size: 30px;
    line-height: 30px;
    vertical-align: bottom;
    margin-bottom: 30px;
    margin-top: 30px;
}
.cart-title .title {
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 0;
    margin-top: 20px;
    height: auto;
}
.cart-title .title .text {
    display: inline;
    font-size: 30px;
    line-height: 30px;
    vertical-align: top;
    max-width: 550px;
    color: #0a4b4f;
}

.table-detail {
    width: 100%;
    border-spacing: 0;
    font-size: 18px;
}
.table-detail a {
    color: #0a4b4f;
}
.table-detail thead {
    background: #e4faff;
}
.table-detail thead tr th {
    text-align: center;
    padding: 20px 10px;
    color: #606060;
}
.scroll-table {
    overflow-x: hidden;
}
.table-detail tbody tr {
    border-bottom: 1px solid #979797;
}
.table-detail tbody tr:last-child {
    border-bottom: none;
}
.table-detail tr td {
    padding: 10px;
    min-width: 84px;
    text-align: center;
}
.table-detail tbody .btn-keep {
    color: #404040;
    background-color: #eee;
    border: none;
    width: 66px;
    height: 33px;
    border-radius: 4px;
    font-family: Arial, Helvetica, "Microsoft JhengHei", "微軟正黑體",
        sans-serif;
}
.table-detail tbody .btn-delete {
    color: #979797;
    background-color: #eee;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 4px;
}
.table-detail tfoot .total {
    background: #eee;
    padding: 20px 15px;
    text-align: right;
}
.table-info {
    background-color: #fff;
}
.cart section.slider-section .slick-slide {
    margin: 0 25px;
}
.cart section.slider-section .slider-arrow {
    position: absolute;
    top: 50%;
    width: 100%;
}
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
    margin-bottom: 20px;
}
.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
}
.form-check {
    position: relative;
    display: block;
    padding-left: 1.25rem;
}
.form-check-input {
    position: relative;
    margin-top: 0.3rem;
    margin-left: -1.25rem;
}
.card-body p {
    line-height: 2rem;
}
.card-yellow {
    background-color: #fff9e9;
    padding: 20px;
    color: #606060;
    height: 320px;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-color: #e6e0d1 #e6e0d1;
}
.card-yellow p {
    font-size: 16px;
    line-height: 2rem;
}
.card-yellow {
    scrollbar-face-color: #e6e0d1;
    scrollbar-shadow-color: #ffffff;
    scrollbar-highlight-color: #ffffff;
    scrollbar-3dlight-color: #ffffff;
    scrollbar-darkshadow-color: #ffffff;
    scrollbar-track-color: #ffffff;
    scrollbar-arrow-color: #ffffff;
}
.card-yellow::-webkit-scrollbar {
    width: 12px;
}
.card-yellow::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.card-yellow::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #e6e0d1;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.05);
}
.card-yellow.auto-height {
    height: auto;
}

.group-form label.form-check-label {
    vertical-align: sub;
    margin: 0;
    width: auto;
}

.col-form-label {
    vertical-align: sub;
    margin: 0 !important;
    padding-right: 0;
}
.buyer .title {
    font-size: 24px;
    text-align: left;
    margin-bottom: 20px;
    border-bottom: 2px solid #45a0bc;
}
.buyer label.col-form-label {
    margin: 0 15px !important;
}
.buyer .tw-city-selector .tw-zipcode,
.buyer .tw-city-selector .tw-county,
.buyer .tw-city-selector .tw-district {
    width: 20%;
    margin-right: 10px;
}
.buyer .tw-city-selector .tw-addresstxt {
    width: 40%;
}
.alert-primary {
    color: #fff;
    background-color: #426a45;
    border-color: #c6f6ca;
}
.alert-secondary {
    color: #383d41;
    background-color: #fcfdfe;
    border-color: #d6d8db;
}
.alert p {
    margin: 1rem auto;
    line-height: 2rem;
}
.alert a {
    font-weight: 800;
    color: #008cbc;
}
/*exam system*/
.exam-system-board .course-name {
    font-size: 30px;
    line-height: 50px;
    margin-top: 20px;
    padding-bottom: 10px;
    text-align: center;
}
.exam-system-board .countdown-time {
    text-align: center;
}
.countdown-time > span {
    display: inline-block;
    line-height: 30px;
    padding: 5px 15px;
    border-radius: 25px;
    background: #d2401f;
    color: #fff;
}
.exam-system-board .main-title {
    font-size: 30px;
    line-height: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    text-align: center;
    border-bottom: 3px solid #86dbef;
    background-image: url(/img/exam-system/exam-title-bg.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
}
.exam-system-board .main-title:after {
    content: "";
    background-image: url(/img/exam-system/exam-title-bg.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    position: absolute;
    right: 0;
    width: 12%;
    height: 59px;
}
.exam-list {
    padding: 20px;
}
.exam-list > li {
    margin-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
    border-bottom: 3px solid #86dbef;
}
.exam-list > li:last-child {
    margin-bottom: 0px;
}
.exam-container {
    display: flex;
    line-height: 40px;
    height: 40px;
    font-size: 18px;
}
.exam-background {
    width: 20%;
    background: #d2401f;
    color: #fff;
    padding-left: 20px;
    letter-spacing: 3px;
}
.exam-background.correct:after {
    font-family: "Font Awesome 5 Free";
    content: "\f00c";
    display: inline-block;
    padding-right: 0px;
    padding-left: 30px;
    vertical-align: middle;
    font-weight: 900;
    font-size: 16px;
    cursor: pointer;
}
.exam-background.wrong:after {
    font-family: "Font Awesome 5 Free";
    content: "\f00d";
    display: inline-block;
    padding-right: 0px;
    padding-left: 30px;
    vertical-align: middle;
    font-weight: 900;
    font-size: 16px;
    cursor: pointer;
}
.exam-none-background,
.course-video-test .exam-none-background {
    border: 2px solid #86dbef;
    width: 100%;
    border-left: 0;
    display: flex;
}
.exam-none-background.teacher {
    cursor: default;
}
.exam-none-background.teacher:after {
    content: "";
    cursor: default;
}
.exam-none-background.teacher.active:after {
    content: "";
}
.exam-none-background:after {
    font-family: "Font Awesome 5 Free";
    content: "\f067";
    display: inline-block;
    padding-right: 30px;
    padding-left: 30px;
    vertical-align: middle;
    font-weight: 900;
    font-size: 16px;
    cursor: pointer;
}
.exam-none-background.active:after {
    content: "\f068";
}
.course-video-test .exam-none-background:after {
    color: #fff;
}
.exam-user-answer {
    padding-left: 20px;
}
.exam-correct-answer {
    padding-left: 20px;
    color: #d2401f;
}
.exam-score {
    margin-left: auto;
}
.exam-level {
    padding: 0 5px;
    font-size: 12px;
    line-height: 25px;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #3f6c68;
    border-radius: 50%;
    margin-right: 10px;
    margin-bottom: 5px;
}
.exam-question-container {
    padding-top: 20px;
    display: none;
    position: relative;
}
.exam-question-container.show {
    display: flex;
}
.exam-question {
    width: 75%;
    margin-right: 20px;
    line-height: 24px;
}
.exam-question .owl-carousel {
    width: 35%;
}
.exam-question .owl-nav {
    display: none;
}
.exam-question-explan {
    background: #e7faff;
    width: 100%;
    padding: 10px 20px;
    margin-top: 20px;
}
.exam-answer {
    border-radius: 20px;
    background: #e7f8fc;
    width: 25%;
    padding: 20px;
}
.exam-answer > li {
    padding: 10px;
    border-radius: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.exam-answer > li.answers {
    cursor: pointer;
}
.exam-answer > li.active {
    background: #91def0;
}
.exam-answer > li > span {
    width: 70%;
    display: inline-block;
    vertical-align: middle;
}
.exam-answer > li.correct {
    position: relative;
}
.exam-answer > li.correct:after {
    font-family: "Font Awesome 5 Free";
    content: "\f00c";
    display: inline-block;
    font-weight: 900;
    font-size: 20px;
    line-height: 20px;
    position: absolute;
    right: 20px;
    top: 8px;
    color: #426a45;
}
.exam-answer > li.wrong {
    position: relative;
}
.exam-answer > li.wrong:after {
    font-family: "Font Awesome 5 Free";
    content: "\f00d";
    display: inline-block;
    font-weight: 900;
    font-size: 20px;
    line-height: 20px;
    position: absolute;
    right: 20px;
    top: 8px;
    color: #d2401f;
}
.total-question {
    padding: 0 20px;
    font-size: 24px;
}
/*exam teacher*/

button {
    padding: 6px 10px;
    background: #ddd;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}
button:hover {
    background: #999;
}
.table {
    height: auto;
    display: inline-block;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}
.table li p {
    float: left;
    font-size: 15px;
    line-height: 20px;
    padding: 10px 0 10px 10px;
}
.table li span.box {
    float: left;
    font-size: 15px;
    line-height: 20px;
    padding: 10px 0 10px 10px;
    display: inline-block;
}
.table li .subtitle {
    padding: 10px 10px 0 30px;
}
.table li p button {
    width: 100%;
    color: #fff;
    font-size: 15px;
}
.table li span.box button {
    width: 100%;
    color: #fff;
    font-size: 15px;
}
.table li:first-child {
    border-bottom: 0;
    background: #45a0bc;
    color: #fff;
    padding: 0;
}
.table li {
    border-bottom: 1px dotted #45a0bc;
}
.table li .width25 button {
    width: 40%;
    color: #fff;
    font-size: 15px;
}
.table li span.box.width25 button {
    width: 40%;
    color: #fff;
    font-size: 15px;
}
.category-table li:last-child {
    border-bottom: 0;
}
/*管理試卷 manage exam category*/
.button-block {
    margin: 20px 0 !important;
    line-height: 20px !important;
}
.button-block a {
    margin-right: 10px;
    border-radius: 5px;
}
.first-category {
    margin: 20px 0 0 0;
}
.first-category i {
    cursor: pointer;
}
.second-category {
    margin-bottom: 10px;
}
.second-category i {
    cursor: pointer;
}
.second-container,
.category-table {
    display: none;
}
.second-container.show,
.category-table.show {
    display: flex;
    flex-direction: column;
}
.loadMore,
.showLess {
    cursor: pointer;
    text-align: right;
    margin: 12px 0;
}
/*創建題目、管理試卷*/
.create-row {
    display: flex;
    justify-content: start;
    margin: 10px 0;
    text-align: left;
    line-height: 45px;
    vertical-align: middle;
}
.create-row .title {
    width: 80px;
    vertical-align: middle;
    line-height: 45px;
    font-size: 16px;
    margin-right: 10px;
    margin-bottom: 0;
    height: 45px;
    text-align: left;
    margin: 0;
}
.create-row .title-long {
    width: 160px;
}
.create-row input[type="radio"] {
    height: 37px;
}
.create-row label {
    display: inline-block;
    margin: 10px 0;
    width: auto;
    line-height: normal;
    margin-right: 10px;
}
.create-row label.answer {
    width: 35%;
}
.create-row select {
    display: block;
    width: 40%;
    flex: 1;
    height: 45px;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-bottom: 0;
    vertical-align: top;
}
.create-row input[type="text"].input-date {
    display: inline-block;
    width: 30%;
    border: 1px solid #ced4da;
    margin-bottom: 0;
}
.create-row input[type="text"].input-wild {
    display: inline-block;
    width: calc(100% - 310px);
    border: 1px solid #ced4da;
    margin-bottom: 0;
}
.create-row input[type="text"].input-search {
    width: 80%;
    display: inline;
    vertical-align: initial;
    margin-left: 10px;
    border-radius: 18px;
    height: auto;
}
.create-row .form-editor {
    width: 100%;
}
.create-row .content {
    width: calc(100% - 80px);
    font-size: 16px;
    line-height: 1.5;
}
.create-row .content-row {
    display: flex;
    justify-self: start;
    line-height: 40px;
    margin-bottom: 10px;
}
.create-row .warning {
    font-size: 14px;
    color: #000;
}
.content-row .selector-option {
    /* line-height: 45px; */
    margin-right: 10px;
}

.warning-text {
    position: relative;
}
.warning-text:after {
    content: "限制上傳2MB以下圖片";
    position: absolute;
    left: 0;
    bottom: -18px;
    color: #000;
    font-size: 12px;
    width: 150px;
}

/*標籤 tags input*/
.label-row .label-info {
    background-color: #5bc0de;
}
.label-row .label {
    display: inline;
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
}
.bootstrap-tagsinput {
    background-color: #fff;
    border: 1px solid #ccc;
    display: inline-block;
    padding: 4px 6px;
    color: #555;
    vertical-align: middle;
    border-radius: 4px;
    max-width: 100%;
    line-height: 22px;
    cursor: text;
    width: 100%;
}
.bootstrap-tagsinput input {
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    padding: 0 6px;
    margin: 0;
    width: auto;
    max-width: inherit;
}
.bootstrap-tagsinput.form-control input::-moz-placeholder {
    color: #777;
    opacity: 1;
}
.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
    color: #777;
}
.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
    color: #777;
}
.bootstrap-tagsinput input:focus {
    border: none;
    box-shadow: none;
}
.bootstrap-tagsinput .tag {
    margin-right: 2px;
    color: white;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
    margin-left: 8px;
    cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
    content: "x";
    padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.05);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.label-row input[type="text"] {
    display: inline-block;
    width: auto;
    border: 0;
}
input[type="checkbox"].box15 {
    width: 15px;
    height: 15px;
}

.table-order-detail {
    width: 80%;
    font-size: 16px;
}
.table-order-detail .td-title {
    font-weight: 700;
    width: 20%;
    padding: 10px 0;
}

tr.link {
    cursor: pointer;
}
.video-tabs-block {
    background: #86dbef;
}
.video-tabs {
    width: 85%;
    margin: auto;
}
.video-tabs li {
    width: 100px;
    padding: 10px;
    color: #d2401f;
    font-size: 16px;
    border: 2px solid #d2401f;
    display: inline-block;
    text-align: center;
    margin-right: 5px;
    cursor: pointer;
}

.video-tabs li.active {
    background: #d2401f;
    border: 2px solid #d2401f;
    color: #fff;
}
.tab-online-block,
.tab-live-block {
    display: none;
}
.tab-online-block.active,
.tab-live-block.active {
    display: block;
}

.card-back {
    max-width: 1170px;
}
/*lightbox*/
@media all {
    .lightbox {
        display: none;
    }
    .fl-page h1,
    .fl-page h3,
    .fl-page h4 {
        font-weight: 100;
        letter-spacing: 1px;
    }
    .fl-page h1 {
        font-size: 110px;
        margin-bottom: 0.5em;
    }
    .fl-page h1 i {
        font-style: normal;
        color: #ddd;
    }
    .fl-page h1 span {
        font-size: 30px;
        color: #333;
    }
    .fl-page h3 {
        text-align: right;
    }
    .fl-page h3 {
        font-size: 15px;
    }
    .fl-page h4 {
        font-size: 2em;
    }
    .fl-page .jumbotron {
        margin-top: 2em;
    }
    .fl-page .doc {
        margin: 2em 0;
    }
    .fl-page .btn-download {
        float: right;
    }
    .fl-page .btn-default {
        vertical-align: bottom;
    }

    .fl-page .btn-lg span {
        font-size: 0.7em;
    }
    .fl-page .footer {
        margin-top: 3em;
        color: #aaa;
        font-size: 0.9em;
    }
    .fl-page .footer a {
        color: #999;
        text-decoration: none;
        margin-right: 0.75em;
    }
    .fl-page .github {
        margin: 2em 0;
    }
    .fl-page .github a {
        vertical-align: top;
    }
    .fl-page .marketing a {
        color: #999;
    }

    /* override default feather style... */
    .fixwidth {
        background: rgba(256, 256, 256, 0.8);
    }
    .fixwidth .featherlight-content {
        width: 500px;
        padding: 25px;
        color: #fff;
        background: #111;
    }
    .fixwidth .featherlight-close {
        color: #fff;
        background: #333;
    }
}
@media (max-width: 768px) {
    .fl-page h1 span {
        display: block;
    }
    .fl-page .btn-download {
        float: none;
        margin-bottom: 1em;
    }
}

.featherlight .featherlight-content {
    width: 50%;
    max-height: 500px;
    padding: 40px;
    text-align: left;
    border-radius: 10px;
}
.featherlight .featherlight-content h3 {
    background: #f7f7f7;
    padding: 15px 40px;
    font-size: 22px;
    color: #393939;
}
.featherlight .featherlight-content p {
    line-height: 1.5rem;
    text-indent: 2rem;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}
.featherlight .featherlight-content .intro {
    font-size: 16px;
    line-height: 24px;
    padding: 0 10px 20px 10px;
    height: 150px;
}
.featherlight .icon-title-bg {
    height: 30px;
}
.featherlight h2 {
    font-size: 1.75rem;
    line-height: 2.5rem;
    color: #0a4b4f;
}
.featherlight .featherlight-content .lightbox-small {
    height: 50px;
    line-height: 2rem;
}
.member-order .featherlight .featherlight-content {
    width: 30%;
}
.featherlight .featherlight-content .lightbox-button-group {
    text-align: end;
}
.featherlight .featherlight-content .lightbox-button-group a.grey-button {
    background: #ddd;
    color: #000;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.featherlight .featherlight-content .lightbox-button-group a.custom-button {
    background: #45a0bc;
    color: #fff;
    margin-left: 5px;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
/*一般課程*/
header.course-header {
    height: 260px;
}

.course-list-header-top-bg {
    background: url("/img/course.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    height: 230px;
    margin-top: 0px;
}
.course-list-sp-header-top-bg {
    background: url("/img/sp-course.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    height: 230px;
    margin-top: 0px;
}
.course-list-header-bottom-bg {
    background: url("/img/normal-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}
.course-list-page {
    width: 80%;
    margin: 0 auto;
}
.course-list-page .title {
    font-size: 40px;
    font-weight: 700;
    line-height: 60px;
    height: 60px;
    vertical-align: bottom;
    margin-top: 40px;
    color: #0a4b4f;
}
.course-list-page .sub-title {
    margin-top: 10px;
    color: #3c3c3c;
}
.course-list-page .course-top-tab-ul {
    padding-top: 30px;
}
.course-list-page .course-top-tab-ul li {
    display: inline-block;
    background: #fff;
    border-radius: 15px;
    padding: 7px 8px;
    margin-right: 10px;
    border: 1px solid #48a8e0;
    font-size: 13px;
    color: #48a8e0;
    cursor: pointer;
}
.course-list-page .course-top-tab-ul li.active {
    background: #48a8e0;
    border: 1px solid #48a8e0;
    color: #fff;
}
.course-list-page .course-list-ul {
    padding-top: 30px;
}
.course-list-page .course-list-ul li {
    display: inline-block;
    background: #fff;
    border-radius: 15px;
    padding: 7px 8px;
    margin-right: 10px;
    border: 1px solid #48a8e0;
    font-size: 13px;
    color: #48a8e0;
    cursor: pointer;
}
.course-list-page .course-list-ul li.active {
    background: #48a8e0;
    border: 1px solid #48a8e0;
    color: #fff;
}
.course-list-page .course-list-recommend,
.course-list-page .high-review,
.course-list-page .live-course {
    display: none;
}
.course-list-page .course-list-recommend.active,
.course-list-page .high-review.active,
.course-list-page .live-course.active {
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
}
.course-list-page .course-detail {
    display: none;
    background: rgba(0, 0, 0, 0.4);
    color: #000;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.course-list-page .course-detail .course-detail-title {
    position: absolute;
    bottom: 60px;
    left: 10px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    width: 90%;
}
.course-list-page .course-detail .course-detail-content {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #fff;
    width: 90%;
    font-size: 14px;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
}
.course-list-page .course-list-block {
    position: relative;
    z-index: 0;
    -webkit-box-shadow: 3px 3px 3px 0 rgba(83, 83, 83, 0.4);
    -moz-box-shadow: 3px 3px 3px 0 rgba(83, 83, 83, 0.4);
    box-shadow: 3px 3px 3px 0 rgba(83, 83, 83, 0.4);
    width: 32%;
}
.course-list-page .course-list-block img {
    width: 100%;
    max-width: 100%;
}
.course-list-page .course-list-image:hover .course-detail {
    display: block;
}
.course-list-page .course-detail {
    display: none;
    background: rgba(0, 0, 0, 0.4);
    color: #000;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.course-list-page .course-detail .course-detail-title {
    position: absolute;
    bottom: 60px;
    left: 10px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    width: 90%;
}
.course-list-page .course-detail .course-detail-content {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #fff;
    width: 90%;
    font-size: 14px;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
}
.course-list-page .course-list-image:hover .course-detail {
    display: block;
}
.course-list-page .course-list-block .tag {
    position: absolute;
    top: 10px;
    left: -10px;
    width: 90px;
    height: 30px;
    background: #bb4646;
    color: #fff;
    text-align: center;
    padding-top: 7px;
    z-index: 0;
}

.course-list-page .search-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 30px;
    height: 40px;
    vertical-align: bottom;
    margin-top: 40px;
    color: #0a4b4f;
}
.course-list-page .course-bottom-tab-ul {
    padding-top: 30px;
    list-style: none;
    font-size: 0;
    display: inline-block;
}
.course-list-page .course-bottom-tab-ul li {
    display: inline-block;
    background: #fff;
    padding: 10px 15px;
    border: 1px solid #45a0bb;
    font-size: 13px;
    color: #45a0bb;
    cursor: pointer;
    border-right: none;
}
.course-list-page .course-bottom-tab-ul li.active {
    background: #45a0bb;
    border: 1px solid #45a0bb;
    color: #fff;
}
.course-list-page .course-bottom-tab-ul li:first-child {
    border-radius: 10px 0 0 10px;
}
.course-list-page .course-bottom-tab-ul li:last-child {
    border-radius: 0 10px 10px 0;
    border: 1px solid #45a0bb;
}
/*the container must be positioned relative:*/
.custom-select {
    position: relative;
    width: 180px;
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #45a0bb;
    font-size: 14px;
    margin-right: 10px;
}
.custom-select.l-size {
    width: 78%;
}
.custom-select select {
    display: none; /*hide original SELECT element:*/
}
/*style the arrow inside the select element:*/
.select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #45a0bb transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
    border-color: transparent transparent #45a0bb transparent;
    top: 7px;
}
/*style the items (options), including the selected item:*/
.select-selected {
    color: #000;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    border-radius: 5px;
    background: #fff;
    height: 34px;
}
.select-items div {
    color: #000;
    /* border: 1px solid #45a0bb; */
    cursor: pointer;
    user-select: none;
    border-bottom: 0;
    padding: 15px;
}
/*style items (options):*/
.select-items {
    position: absolute;
    background-color: #fff;
    top: 98%;
    left: 0;
    right: 0;
    z-index: 99;
    border-radius: 8px;
    border: 1px solid transparent;
    border-top: 0;
    border-color: rgba(238, 238, 238, 0.5);
    box-shadow: 1px 0px 5px rgba(238, 238, 238, 0.8);
    -webkit-box-shadow: 1px 0px 5px rgba(238, 238, 238, 0.8);
    -moz-box-shadow: 1px 0px 5px rgba(238, 238, 238, 0.8);
    max-height: 230px;
    overflow-y: auto;
}
/*下拉式選單卷軸顏色*/
.select-items::-webkit-scrollbar {
    width: 11px;
}
.select-items {
    scrollbar-width: thin;
    scrollbar-color: #90a4ae #fff;
}
.select-items::-webkit-scrollbar-track {
    /* background: #CFD8DC; */
    background: #fff;
}
.select-items::-webkit-scrollbar-thumb {
    background-color: #90a4ae;
    border-radius: 6px;
    border: 3px solid #fff;
}
/*hide the items when the select box is closed:*/
.select-hide {
    display: none;
}
.select-items div:hover,
.same-as-selected {
    background-color: #ebf7ff;
}
/*select bar with checkbox 多選下拉式選單*/
.select-special-bar {
    margin-top: 30px;
}
.select-special-bar .btn-group > .btn:first-child {
    margin-left: 0;
}
.select-special-bar .btn-group > .btn {
    position: relative;
    float: left;
}
.select-special-bar .dropdown-menu {
    position: absolute;
    top: 98%;
    left: 0;
    right: 0;
    z-index: 99;
    display: none;
    float: left;
    padding: 0;
    margin: 0;
    font-size: 14px;
    list-style: none;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid transparent;
    border-top: 0;
    border-color: rgba(238, 238, 238, 0.5);
    box-shadow: 1px 0px 5px rgba(238, 238, 238, 0.8);
    -webkit-box-shadow: 1px 0px 5px rgba(238, 238, 238, 0.8);
    -moz-box-shadow: 1px 0px 5px rgba(238, 238, 238, 0.8);
    min-width: 170px;
    width: 170px;
}
.select-special-bar .open > .dropdown-menu {
    display: block;
}
.select-special-bar .dropdown-menu > li > a {
    display: block;
    padding: 0;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333;
    white-space: nowrap;
}
.select-special-bar .dropdown-menu > li > a:hover {
    background-color: #ebf7ff;
}
.select-special-bar .dropdown-toggle.btn-default {
    background-color: #fff;
    border-color: #45a0bb;
}
.select-special-bar .checkbox {
    display: block;
    min-height: 20px;
    padding-left: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    vertical-align: middle;
}
.select-special-bar .multiselect-native-select .btn-group {
    margin-top: 0;
    vertical-align: top;
    position: relative;
    display: inline-block;
}
.select-special-bar .multiselect {
    text-align: left;
    color: #000;
    background: #fff;
    width: 180px;
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #45a0bb;
    font-size: 14px;
    margin-right: 10px;
    padding: 8px 16px;
    height: 36px;
}
.select-special-bar .multiselect-all {
    display: none;
}
.select-special-bar .multiselect-container > li > a > label {
    margin: 0;
    height: 100%;
    cursor: pointer;
    font-weight: 400;
    padding: 3px 20px 3px 40px;
}
.select-special-bar .multiselect-container > li > a > label.checkbox {
    padding: 15px;
}
.select-special-bar .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border: 6px solid transparent;
    border-color: #45a0bb transparent transparent transparent;
    margin-left: 0;
    position: absolute;
    top: 14px;
    right: 10px;
    color: #45a0bb;
}
.select-special-bar .btn-group.open .caret {
    border-color: transparent transparent #45a0bb transparent;
    top: 8px;
}

.custom-search-input {
    border-radius: 5px;
    border: 1px solid #45a0bb;
    padding: 7px 16px;
    height: 36px;
    margin-right: 10px;
    width: 320px;
    vertical-align: top;
}
.custom-search-btn {
    border-radius: 5px;
    background: #d2401f;
    color: #fff;
    padding: 0 16px;
    height: 36px;
    width: 170px;
}
.select-special-bar .custom-search-btn {
    vertical-align: top;
}
.custom-search-btn i {
    margin-right: 5px;
}
.tabblock {
    position: relative;
}
.tabblock-a,
.tabblock-b,
.tabblock-c,
.tabblock-d {
    display: none;
}
.tabblock-a.active,
.tabblock-b.active,
.tabblock-c.active,
.tabblock-d.active {
    display: block;
}
.select-search-bar {
    position: absolute;
    top: -35px;
    left: 240px;
}
ul.courses-search-result {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    padding-top: 10px;
}
.courses-search-result li.result-course {
    margin-right: 1.9%;
    width: 32%;
    margin-bottom: 40px;
    -webkit-box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.1);
    position: relative;
}

.fav-box {
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 22px;
    border-radius: 50%;
    background: #fff;
    color: #ccc;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

.pagination {
    text-align: center;
}
.page-group {
    display: inline-flex;
}
.page-nav {
    display: none;
}
.page-group .page {
    display: inline-block;
    background-color: transparent;
    cursor: pointer;
    padding: 10px 15px;
    opacity: 0.9;
    white-space: nowrap;
    transform: translateZ(0);
    color: #383f4f;
    background: #f5fbff;
}
.page-group .page a {
    color: #383f4f;
}
.page-group .page:hover {
    background: #ebf7ff;
}
.page-group .page:hover a {
    color: #2989c1;
}
.page-group .page.active {
    background: #2989c1;
}
.page-group .page.active a {
    color: #fff;
}
.page-group .page.prev,
.page-group .page.next {
    color: #2989c1;
    background: #f7f7f7;
    border-radius: 8px;
}
.page-group .page.prev {
    margin-right: 5px;
}
.page-group .page.next {
    margin-left: 5px;
}
.page-group .page.disabled {
    color: #bababa;
    cursor: not-allowed;
    text-decoration: none;
    background-color: #f7f7f7;
}
.footer-top-bg {
    background-image: url(/img/bg_07.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    min-height: 80px;
}
/*一般學群 learning group*/
.learning-group {
    padding: 40px 0 0 20px;
}
.learning-group img {
    max-width: 100%;
    display: inline-block;
}
.learning-right-bg {
    background: url(/img/learning-group/top-right-bg.png);
    background-position: center right;
    background-repeat: no-repeat;
}
.group-sub-ttl {
    color: #0a4b4f;
    font-size: 22px;
    font-weight: 700;
    vertical-align: top;
}
.learning-group-info {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    padding: 80px 20px 80px 40px;
    color: #686868;
    font-weight: 700;
}
.learning-group-info .group-title {
    color: #0a4b4f;
    font-size: 40px;
    margin-bottom: 35px;
    font-weight: 700;
}
.learning-group-info .group-content {
    line-height: 22px;
    margin-bottom: 35px;
}
.learning-group-info .group-include {
    padding: 20px;
}
.learning-group-list {
    width: 83%;
    margin: 0 auto;
}
.learning-group-type {
    width: 85%;
    margin: 0 auto;
}
.learning-group-type .group-type {
    width: 33%;
    margin-bottom: 40px;
    padding: 20px;
    border-right: 1px solid #eee;
    display: inline-block;
}
.learning-group-type .group-type:nth-child(3n) {
    border-right: 0;
}
.group-type img {
    display: inline-block;
}
.type-content {
    width: 85%;
    display: inline-block;
    vertical-align: top;
    padding: 5px 10px;
}
.group-type-content {
    font-size: 15px;
    font-weight: 700;
    color: #4b4b4b;
    margin-top: 10px;
    line-height: 20px;
}
.learning-center .group-type-content {
    height: 160px;
    overflow-y: scroll;
}
.type-content .study-group-list li {
    border: 1px solid #8b93a6;
    padding: 3px;
    margin: 3px;
    font-size: 14px;
}
.type-content .list-dot li {
    border-radius: 20px;
    padding: 1px 5px;
    font-size: 12px;
    margin: 3px 0;
    color: #8b93a6;
}
.list-dot li:before {
    content: "•";
    display: inline-block;
    width: 8px;
}
.type-content .list-dot li.grey {
    color: #8b93a6;
    border: 1px solid #8b93a6;
}
.type-content .list-dot li.green {
    color: #5ab194;
    border: 1px solid #5ab194;
}
.type-content .list-dot li.red {
    color: #e68375;
    border: 1px solid #e68375;
}
.type-content .list-dot li.lt-blue {
    color: #3b93c6;
    border: 1px solid #3b93c6;
}
.type-content .list-dot li.dk-blue {
    color: #4777ba;
    border: 1px solid #4777ba;
}
.type-content .list-dot li.yellow {
    color: #d89810;
    border: 1px solid #d89810;
}
.leaning-future-bg {
    background: url("/img/learning-group/become-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 400px;
    position: relative;
}
.leaning-future-bg img {
    max-width: 100%;
}
.learning-left {
    display: inline-block;
    position: absolute;
    top: -40px;
}
.learning-right {
    display: inline-block;
    position: absolute;
    top: -60px;
    right: 0;
}
.learning-center {
    width: 25%;
    margin: 0 auto;
    margin-top: 25px;
    text-align: center;
}
.learning-center .title {
    font-size: 24px;
    font-weight: 700;
    color: #eee;
    margin-top: 20px;
}
.learning-center .content {
    font-size: 24px;
    font-weight: 700;
    color: #eee;
    margin-top: 20px;
}
.camp-bg {
    background: url("/img/learning-group/camp-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 480px;
    position: relative;
}
.camp-bg2 {
    background: url("/img/learning-group/camp-bg2.png");
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    position: relative;
}
.camp-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 60px;
    height: 40px;
    vertical-align: bottom;
    margin-top: 40px;
    color: #0a4b4f;
}

.camp-slider {
    margin: auto;
    margin-top: 20px;
    width: 85%;
}
.camp-slider .camp-list {
    padding: 0;
    color: #4b4b4b;
    font-size: 14px;
    line-height: 24px;
    vertical-align: middle;
    height: 300px;
    position: relative;
}
.camp-slider .camp-info {
    background-color: #fff;
    width: 70%;
    padding: 20px;
    margin-top: 20px;
    margin-left: 10px;
    height: 230px;
    -webkit-box-shadow: 0px 0px 21px -13px rgba(36, 36, 36, 1);
    -moz-box-shadow: 0px 0px 21px -13px rgba(36, 36, 36, 1);
    box-shadow: 0px 0px 21px -13px rgba(36, 36, 36, 1);
}
.camp-slider .camp-img {
    position: absolute;
    top: 50px;
    right: 20px;
}
.camp-info ul {
    width: 65%;
    /* width: 58%; */
}
.camp-info ul li.title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px;
}
.camp-info .link {
    text-align: right;
    margin-right: 20px;
    margin-top: 10px;
    font-weight: 700;
}
.camp-info a {
    text-decoration: none;
    color: #48a8e0;
    padding-bottom: 3px;
    border-bottom: 1px dotted;
}
.camp-info a .fa-chevron-right {
    font-size: 12px;
    line-height: 24px;
    margin-left: 5px;
}
.slick-dots li button:before {
    font-size: 40px;
    color: #d8d8d8;
}
.slick-dots li.slick-active button:before {
    opacity: 1;
    color: #b4e0fa;
}
.commemd-course-slider {
    margin: 0 auto;
    margin-top: 40px;
    width: 95%;
}
.commemd-course-slider li.commemd-course-list {
    background-color: #fff;
    border: 1px solid #f1f1f1;
    padding: 0;
    margin: 10px 20px;
    color: #0a4b4f;
    font-size: 26px;
    border-radius: 5px;
    vertical-align: middle;
    font-weight: 600;
    -webkit-box-shadow: 5px 7px 7px -8px rgba(83, 83, 83, 0.5);
    -moz-box-shadow: 5px 7px 7px -8px rgba(83, 83, 83, 0.5);
    box-shadow: 5px 7px 7px -8px rgba(83, 83, 83, 0.5);
}
.commemd-course-img img {
    max-width: 100%;
    max-height: 100%;
}
.commemd-course-block {
    padding: 15px 20px;
    display: inline-block;
    background: #fff;
}
.commemd-course-block .course-title {
    font-weight: 500;
    color: #0a4b4f;
    font-size: 24px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 10px;
    margin-bottom: 15px;
    letter-spacing: -1px;
}
.commemd-course-block .course-title a {
    color: #0a4b4f;
}
.commemd-course-block a .course-title {
    color: #0a4b4f;
}
.commemd-course-block .course-detail-list li {
    color: #434343;
    font-size: 16px;
    vertical-align: cetner;
    margin-bottom: 15px;
}
.commemd-course-block .course-detail-list li i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
    color: #45a0bc;
    font-size: 20px;
}
/*成為老師*/
.banner {
    margin-top: 0px;
}
/*多元課程 多選下拉選單*/
span.multiselect-native-select {
    position: relative;
}
span.multiselect-native-select select {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px -1px -1px -3px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    left: 50%;
    top: 30px;
}
.multiselect-container {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.multiselect-container .input-group {
    margin: 5px;
}
.multiselect-container .multiselect-reset .input-group {
    width: 93%;
}
.multiselect-container > li {
    padding: 0;
}
.multiselect-container > li > a.multiselect-all label {
    font-weight: 700;
}
.multiselect-container > li.multiselect-group label {
    margin: 0;
    padding: 3px 20px;
    height: 100%;
    font-weight: 700;
}
.multiselect-container > li.multiselect-group-clickable label {
    cursor: pointer;
}
.multiselect-container > li > a {
    padding: 0;
}
.multiselect-container > li > a > label {
    margin: 0;
    height: 100%;
    cursor: pointer;
    font-weight: 400;
    padding: 3px 20px 3px 40px;
}
.multiselect-container > li > a > label.checkbox,
.multiselect-container > li > a > label.radio {
    margin: 0;
}
.multiselect-container > li > a > label > input[type="checkbox"] {
    /* margin-bottom: 5px; */
}
.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.form-inline .multiselect-container label.checkbox,
.form-inline .multiselect-container label.radio {
    padding: 3px 20px 3px 40px;
}
.form-inline .multiselect-container li a label.checkbox input[type="checkbox"],
.form-inline .multiselect-container li a label.radio input[type="radio"] {
    margin-left: -20px;
    margin-right: 0;
}
.multiselect-container input[type="checkbox"]:focus,
.majorcontent input[type="checkbox"]:focus,
.selectjob-title input[type="checkbox"]:focus {
    outline: 1px solid #409fd6;
}
.multiselect-container input[type="checkbox"],
.majorcontent input[type="checkbox"],
.selectjob-title input[type="checkbox"] {
    background-color: #fff;
    border-radius: 2px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 17px;
    height: 17px;
    cursor: pointer;
    position: relative;
    top: 5px;
    border: 1px solid #409fd6;
}
.multiselect-container input[type="checkbox"]:checked,
.majorcontent input[type="checkbox"]:checked,
.selectjob-title input[type="checkbox"]:checked {
    background-color: #45a0bc;
    background: #fff url("/img/checked.png") 2px 3px no-repeat;
}
.qa-article-list {
    margin-top: 40px;
    margin-bottom: 40px;
}
.qa-article-list .li-list {
    display: flex;
    justify-content: left;
    padding: 40px 0;
    border-bottom: 1px solid #45a0bc;
}
.qa-article-list .li-list img {
    width: 400px;
    /* height: 100%; */
    max-height: 100%;
    margin-right: 20px;
    -webkit-box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.1);
}
.qa-article-list .li-list img:hover {
    -webkit-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.4);
}
.qa-article-list .li-list .title {
    font-size: 20px;
    font-weight: 700;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 0;
    margin-right: 0;
}
.qa-article-list .li-list .title a {
    color: #0a4b4f;
}
.qa-article-list .li-list .title a:hover {
    color: #54ad8f;
}
.qa-article-list .li-list .date {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: #45a0bb;
    margin: 10px 0;
}
.qa-article-list .li-list .content {
    font-size: 14px;
    height: auto;
    display: block;
    overflow: hidden;
    margin-bottom: 5px;
    line-height: 24px;
    color: #666;
    font-weight: 700;
    white-space: pre-line;
}
.qa-article-list .li-list .btn {
    background: #d2401f;
    color: #fff;
    margin-top: 5px;
    display: inline-block;
    font-size: 13px;
    padding: 10px;
    letter-spacing: 2px;
    font-weight: 700;
}
.qa-article-list .li-list .btn:hover {
    opacity: 0.7;
}
.qa-article-list .li-list .fa-play {
    margin-left: 5px;
    font-size: 12px;
}
/*f註冊成功*/
.f_bg {
    background: #e8f6fa;
}
.f_lightbox {
    background: url(/img/login-success.png);
    min-height: 700px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}
.f_block {
    position: absolute;
    bottom: 140px;
    width: 100%;
    text-align: center;
}
.f_content {
    height: 40px;
}
.f_span_space {
    margin-top: 30px;
}
.f_btn {
    background: #d2401f;
    margin: 20px 0;
    padding: 10px 20px;
    text-align: center;
    color: #fff;
    border-radius: 5px;
}
.f_btn:hover {
    color: #fff;
}
.f_back {
    margin: 20px 0;
    padding: 10px 20px;
    text-align: center;
    color: #7a8499;
}
.f_back:hover {
    color: #7a8499;
}
/* cart payment */
.cart-discount {
    width: 50%;
    color: #d24020;
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 20px;
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
}

.cart-total {
    width: 50%;
    color: #0a4b4f;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}

@media (min-width: 320px) and (max-width: 659px) {
    .blue-red-wave-bg {
        padding-bottom: 60px;
    }
    .icon.s-median {
        width: 25px;
        height: 25px;
    }
    .icon.median {
        width: 30px;
        height: 30px;
    }
    .icon-paper,
    .icon-target,
    .icon-books,
    .icon-computer,
    .icon-calculator,
    .icon-flag,
    .icon-hat,
    .icon-openbook,
    .icon-formbook {
        margin-right: 5px;
    }
    .course-chapter-block.desktop-only {
        display: none;
    }
    .course-chapter-block.mobile-only {
        display: inline-block;
    }
    .m-d-none {
        display: none !important;
    }
    .blue-wave {
        display: block;
    }
    .btn-lg {
        font-size: 16px;
        padding: 5px 20px;
        line-height: 32px;
    }
    .icon.small {
        width: 15px;
        height: 15px;
    }
    .icon.large {
        width: 40px;
        height: 40px;
    }
    .menu-list {
        display: none;
    }
    .mobile-user-hamburger {
        display: block;
    }
    .logo h1 img {
        width: 200px;
        margin-top: -40px;
    }
    .container .title {
        height: 40px;
    }
    .bg-flower-r1 {
        height: 100px;
        width: 60px;
        top: -30px;
        right: 0;
    }

    .recommend {
        height: 950px;
        padding-top: 10px;
    }

    .video video {
        width: 80vw !important;
        height: 190px !important;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .recommend-detail .title {
        font-size: 24px;
        line-height: 30px;
    }
    .recommend-detail-list {
        font-size: 20px;
        line-height: 24px;
    }
    .recommend-detail-list li {
        line-height: 24px;
        margin-bottom: 5px;
    }

    .recommend-about-course {
        width: 100%;
    }
    .recommend-about-course p {
        font-size: 16px;
        line-height: 1.5;
    }
    .course {
        height: 480px;
        background-size: contain;
        margin-top: 25px;
    }
    .bg-flower-r2 {
        height: 100px;
        width: 60px;
        top: -30px;
        right: 0;
    }
    .course .title {
        margin-top: 0px;
    }
    .course-list {
        margin-top: 20px;
    }
    .teachers {
        background-color: #86dbef;
        height: 660px;
        padding-top: 30px;
        background-size: contain;
    }
    .commends {
        height: 650px;
        padding-top: 30px;
    }
    .commends-list {
        width: 95%;
    }
    .commends-list-li {
        background-image: url(/img/frame4-m.png);
        background-size: 100% 100%;
        height: 250px;
        margin-bottom: 10px;
    }
    .user-img {
        width: 100px;
        height: 100px;
        left: 15px;
        top: 30px;
    }
    .commend {
        right: 8%;
        width: 58%;
    }
    .commend p {
        height: 170px;
        font-size: 16px;
        line-height: 1.5;
    }
    .title > .text-large {
        font-size: 28px;
    }
    .slick-prev {
        left: 0;
    }
    .slick-next {
        right: 0;
    }
    /*course 課程介紹*/
    .page-course {
        padding-bottom: 80px;
        min-height: 500px;
    }
    .pageCourse .course-details {
        padding-bottom: 60px;
        margin-top: 0;
    }
    .pageCourse .course {
        min-height: 450px;
        padding-bottom: 60px;
        height: 500px;
        padding-top: 20px;
        margin-top: 0;
    }
    .course-text {
        font-size: 30px;
        max-width: 375px;
    }
    .course-info-title {
        font-size: 20px;
    }
    .course-info-numbers {
        font-size: 24px;
    }
    .section-text {
        width: 100%;
        margin-top: 20px;
        line-height: 30px;
    }
    .btn-group {
        width: 100%;
        margin-top: 15px;
    }
    .select-special-bar .multiselect-native-select .btn-group {
        margin-top: 10px;
    }
    .review-course-list {
        display: block;
    }
    .course-chapter-block {
        width: 90vw;
        margin-top: 20px;
        height: 250px;
    }
    .course-chapter-block.desktop-only {
        display: none;
    }
    .course-chapter-block.mobile-only {
        display: inline-block;
    }
    .chapter-list {
        font-size: 18px;
    }
    .chapter-list.active {
        display: block;
    }

    .chapter-list .icon-film-roll {
        height: 30px;
        width: 30px;
        margin-top: 13px;
        margin-left: 10px;
    }
    .chapter-list ul li {
        font-size: 16px;
    }
    .chapter-list > li {
        line-height: 60px;
        padding-top: 10px;
    }
    .chapter-list > li:before,
    .chapter-list:after {
        width: 88vw;
        height: 60px;
    }
    .chapter-lists {
        margin-bottom: 10px;
    }
    .chapter-title-box button {
        margin-top: 15px;
    }
    span.chapter {
        /* width: 40%; */
        font-size: 20px;
        line-height: 24px;
        margin-top: 16px;
    }
    .tab-section li {
        height: 60px;
    }
    .introduce-video-style {
        width: 85vw;
        height: 50vw;
        border-radius: 30px;
        border: 5px solid #fff;
        top: 10px;
        left: 10px;
    }
    .introduce-video-style video {
        width: 85vw;
        height: 48vw;
        top: 0;
        left: 0;
    }
    .introduce-video-info-block {
        width: 85%;
        margin-top: 40px;
    }
    .introduce-block {
        width: 100%;
        height: auto;
        margin-top: 0;
        margin-left: 0;
        padding-top: 0;
        margin: 0 auto;
        text-align: center;
    }
    .introduce-course-title {
        font-size: 24px;
        line-height: 30px;
        height: auto;
    }
    .introduce-course-detail-list {
        margin-bottom: 20px;
    }
    .introduce-course-detail-list li {
        font-size: 24px;
        line-height: 25px;
    }
    .introduce-detail-list {
        padding: 0;
    }
    .icon-title-bg {
        background-image: url(/img/line3.png);
        margin-top: 20px;
        font-size: 26px;
        line-height: 30px;
        height: 65px;
    }
    .content {
        font-size: 16px;
    }
    .tab-discuss .form-group input[type="text"],
    .tab-discuss .form-group select {
        width: 100%;
        margin-bottom: 10px;
    }
    .tab-discuss .form-group .btn {
        float: right;
    }
    .comments .right-text {
        width: 75%;
        margin-left: 5%;
    }
    .comments .right-text .title {
        height: auto;
        line-height: 30px;
        font-size: 20px;
    }
    .comments .right-text .text-blue .comments-stars {
        display: block;
        margin-bottom: 5px;
        margin-top: 5px;
    }
    /*login*/
    .login {
        height: 1150px;
    }
    .register {
        height: 1750px;
    }
    .forget-password {
        height: 450px;
    }
    .group-form {
        width: 100%;
        flex-direction: column;
    }
    .group-form > .form-block,
    .group-form > .form-block.large-block {
        width: 90%;
        margin: 50px auto 20px auto;
    }
    .form-block.large-block .title {
        height: auto;
        margin-bottom: 10px;
        margin-top: 20px;
        /* line-height: 1; */
    }
    .form-block.large-block .title .title-icon {
        height: 40px;
    }
    .form-block.large-block .title .course-text {
        line-height: 40px;
    }
    .center-wrapper {
        width: 100%;
    }
    .login .social-btn-wrapper {
        display: block;
    }
    .login .social-btn-wrapper:before {
        height: 100px;
        top: -70px;
    }
    .login .google-btn,
    .login .facebook-btn {
        width: 100%;
        display: inline-block;
        margin-top: 10px;
    }

    .register .social-btn-wrapper {
        flex-direction: column;
    }
    .register .google-btn,
    .register .facebook-btn {
        width: 100%;
        display: block;
        margin-top: 10px;
    }
    .parents-info-wrapper:before {
        top: -75px;
    }

    /*member 會員中心主頁*/
    .member-main {
        flex-direction: column;
    }
    .member-main-label {
        width: 100%;
        margin-top: 20px;
    }
    .dashboard {
        flex-direction: column;
        margin-top: 40px;
    }
    .left-menu,
    .right-content {
        width: 100%;
    }
    .right-content-width {
        width: 100%;
    }
    .dashboard .right-content .btn-blue {
        margin-top: 10px;
        display: block;
    }
    .course-list-row {
        flex-direction: column;
        margin-top: 20px;
    }
    .course-list-row-li {
        width: 92%;
    }
    /*cart*/
    .group-form > .form-block.cart-page {
        padding: 20px 30px;
    }
    .featherlight .featherlight-content {
        width: 80%;
        height: 600px;
    }
    .second-category span:nth-child(2n + 1) {
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .table li p.width5,
    .table li span.width5 {
        width: 15% !important;
    }
    .table li p.width70,
    .table li span.width70 {
        width: 85% !important;
    }
    .table li p.width15 {
        width: 20% !important;
        text-align: left;
    }
    .table li p.width25,
    .table li span.width25 {
        /* overflow: hidden; */
        width: 100% !important;
        text-align: right;
    }
    .table li span.width25 button {
        width: 40%;
        display: inline-block;
        margin-bottom: 5px;
    }
    .exam-system-board .course-name {
        font-size: 22px;
    }
    .countdown-time > span {
        font-size: 14px;
    }
    .exam-system-board .main-title {
        font-size: 20px;
        line-height: 30px;
        background-image: none;
    }
    .exam-system-board .main-title:after {
        background-image: none;
    }
    .exam-list {
        padding: 0;
    }
    .exam-list > li {
        padding-left: 0;
        padding-right: 0;
    }
    .exam-container {
        font-size: 14px;
        height: 80px;
    }
    .exam-background {
        padding-left: 5px;
        letter-spacing: 0;
        font-size: 14px;
        width: 35%;
    }
    .exam-background.correct:after {
        font-size: 14px;
        padding-right: 0px;
        padding-left: 5px;
        vertical-align: unset;
    }
    .exam-background.wrong:after {
        font-size: 14px;
        padding-right: 0px;
        padding-left: 5px;
        vertical-align: unset;
    }
    .exam-none-background {
        display: block;
        position: relative;
    }
    .exam-none-background:after {
        font-size: 14px;
        padding-right: 10px;
        padding-left: 10px;
        position: absolute;
        top: 0;
        right: 0;
    }
    .exam-user-answer {
        padding-left: 10px;
        line-height: 24px;
    }
    .exam-correct-answer {
        padding-left: 10px;
        line-height: 24px;
    }
    .exam-score {
        padding-left: 10px;
        line-height: 24px;
    }
    .exam-question-container.show {
        display: block;
    }
    .exam-question {
        width: 100%;
    }
    .exam-answer {
        width: 100%;
        margin-top: 20px;
    }
    .exam-question .owl-carousel {
        width: 100%;
    }
    .total-question {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 20px;
        padding: 0;
    }
    .option-block .btn {
        position: unset;
        left: unset;
        top: unset;
        margin-top: 10px;
        display: inline-block;
    }
    .image-banner {
        margin-top: 170px;
    }
    .discover-container .tab7-block {
        min-height: auto;
    }
    .work-type-container {
        background-image: url("/img/workarea-bg-m.png");
        background-position: top;
        background-size: contain;
        position: relative;
    }
    .work-type {
        width: 100%;
        top: 10%;
        left: 4%;
    }
    .work-type-list {
        height: 400px;
        width: 310px;
    }
    .work-type-list li {
        padding: 5px 10px;
        width: 90px;
        margin: 10px 5px 5px 0;
        font-size: 15px;
    }
    .work-type-button {
        position: absolute;
        top: 490px;
        left: 30% !important;
    }
    /*一般課程*/
    header.course-header {
        height: 160px;
    }
    .breadcrumb {
        padding-top: 20px;
    }
    .breadcrumb span {
        margin-bottom: 10px;
        display: inline-block;
    }
    .course-list-page .title {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .course-list-page .sub-title {
        line-height: 22px;
    }
    .course-list-header-top-bg,
    .course-list-sp-header-top-bg {
        background-size: contain;
        height: 320px;
    }
    .header-flower:after,
    .header-flower:before {
        display: none;
    }
    .course-list-header-bottom-bg {
        height: 700px;
        margin-bottom: 50px;
    }
    .course-list-page .course-list-recommend.active,
    .course-list-page .high-review.active,
    .course-list-page .live-course.active {
        justify-content: flex-start;
        flex-direction: column;
    }
    .course-list-page .course-list-block {
        width: 100%;
        margin-bottom: 20px;
    }
    .select-search-bar {
        top: 20px;
        left: 0;
    }
    .course-list-page ul.courses-search-result {
        padding-top: 130px;
    }
    .course-list-page.course-list-sp ul.courses-search-result {
        padding-top: 50px;
    }
    .courses-search-result li.result-course {
        width: 100% !important;
    }
    .courses-search-result li.result-course:nth-child(2n) {
        margin-right: 0%;
    }
    .courses-search-result li.result-course:nth-child(3n) {
        margin-right: 0%;
    }
    .page-group .page {
        display: none;
    }
    .page-group .page.prev,
    .page-group .page.next {
        display: inline-block;
    }
    .page-nav {
        display: block;
        margin-top: 15px;
    }
    .custom-select {
        width: 120px;
    }
    .custom-search-input {
        margin-top: 10px;
        width: 180px !important;
    }
    .select-special-bar .custom-select,
    .select-special-bar .multiselect {
        width: 100%;
    }
    .select-special-bar .dropdown-menu {
        width: 100%;
    }
    .custom-search-btn {
        width: 100px !important;
        margin-top: 10px !important;
    }
    .select-special-bar .custom-search-btn {
        vertical-align: bottom;
    }
    .footer-top-bg {
        min-height: 80px;
    }
    /*一般學群 learning group*/
    .learning-group {
        padding: 0;
    }
    .learning-group > img {
        display: none;
    }
    .learning-group-info {
        width: 100%;
        padding: 40px 20px;
    }
    .learning-group-type .group-type {
        width: 90%;
        border-right: 0;
        margin-bottom: 0;
        border-bottom: 1px solid #eee;
        margin: 0 auto;
        display: block;
    }
    .type-content {
        width: 80% !important;
    }
    .learning-right,
    .learning-left {
        display: none;
    }
    .leaning-future-bg {
        background: url("/img/learning-group/become-m-bg.png");
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        height: 550px;
    }
    .learning-center {
        width: 80%;
        margin: 170px auto;
    }
    .camp-bg {
        height: auto;
    }
    .camp-slider .camp-list {
        height: 460px;
    }
    .camp-slider .camp-info {
        width: 95%;
        padding: 20px;
        margin-top: 0;
        box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #eee;
    }
    .camp-info ul {
        width: 100%;
    }
    .camp-slider .camp-img {
        top: 230px;
        right: 8px;
    }
    .slick-prev.camp-prev {
        left: -12px;
    }
    .slick-next.camp-next {
        right: -12px;
    }
    .f_bg {
        min-height: 1000px;
        max-width: 100%;
        width: 100%;
        background-size: cover;
    }
    .f_block {
        bottom: 240px;
        font-size: 12px;
        width: 80%;
        margin-left: 10%;
    }
    .f_content {
        height: 30px;
    }
    .f_btn {
        padding: 8px 20px;
    }
    .f_block span {
        display: inline-block;
    }
    .f_span_space {
        margin-top: 10px;
    }
    /*探索學群*/
    .discover-learning-container {
        display: flex;
        margin-top: 80px;
        flex-direction: column;
    }
    .discover-learning-block {
        width: 100%;
        flex-direction: column;
    }
    .discover-learning-chevron {
        width: 100%;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        line-height: 80px;
        font-size: 16px;
    }
    .custom-select.l-size {
        width: 100%;
    }
    .option-block .btn {
        margin-top: 10px;
        display: inline-block;
        float: right;
    }
    .selected-block {
        height: 100px;
    }
    .selected-block li {
        font-size: 14px;
        width: 150px;
        margin-right: 5px;
        margin-bottom: 5px;
    }
    .tab6-block > .width85 > .d-flex,
    .tab7-block > .width85 > .d-flex,
    .holland-next-step > .d-flex {
        flex-flow: column;
    }

    .tab-left-block {
        margin-top: 20px;
        width: 100%;
    }

    .tab-left-block .line:after {
        width: 15vw;
    }
    .tab-left-block .list-steps {
        margin-top: 20px;
    }
    .tab-right-block {
        margin-top: 0;
        margin-left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .tab-right-block img {
        width: 100%;
        max-width: 100%;
    }
    .tab-right-block-bg {
        margin: 30px 0 0 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .tab-right-block-bg .step-title {
        font-size: 24px;
        text-align: center;
        line-height: 40px;
        border-bottom: 2px solid #c3e6fb;
        border-right: 0;
        padding: 0;
        margin: 0 20px;
    }
    .tab-right-block-bg.white .step-title {
        line-height: 40px;
    }
    .tab-right-block-bg .step-content {
        width: 80%;
        margin: 20px auto;
    }
    .tab-right-block-bg .step-content .stepselected {
        line-height: 1;
    }
    .tab-right-block-bg .step-content .step-img {
        bottom: -70px;
        right: -20px;
    }

    .selectjob-list .selectjob-title {
        display: inline-block;
        line-height: 30px;
    }
    .selectjob-list .selectjob-title .jobcategory {
        width: 70%;
        display: inline-block;
    }
    .selectjob-list .selectjob-title .jobnumbers {
        line-height: 32px;
        margin-left: 0;
    }
    .selectjob-list .selectjob-title .selectjoblabel {
        line-height: 20px;
        vertical-align: top;
    }
    .catpow {
        background-size: contain;
        height: 200px;
    }
    .study-group-list.blue {
        padding: 0 10px;
    }
    .study-group-list li {
        margin-bottom: 5px;
    }
    .majortext {
        padding: 20px 10px;
    }
    .tab-fadein-right {
        width: 100%;
        margin-left: 0;
        padding: 20px;
    }
    .tab-fadein-right .block-title {
        margin-top: 0;
    }
    .next-step {
        margin: 30px 0 15px 0;
    }
    .holland-input {
        height: 60px;
        font-size: 20px;
        margin-right: 5px;
        width: 40px;
        padding: 10px 12px;
        margin-top: 10px;
    }
    .holland-search-btn-block {
        padding-left: 0;
    }
    .holland-search-btn {
        width: 110px;
        padding: 0 5px;
    }
    .holland-next-step {
        background: url("/img/holland/bluemask-flower-m.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        height: 600px;
        margin-bottom: 100px;
    }
    .tab-right-block-bg.white .step-content {
        width: 100%;
        margin-left: 0px;
        max-width: 100%;
    }
    .tab-right-block-bg.white .holland-search-btn-block {
        line-height: 30px;
    }
    .tab-left-block .dkblue-line:after {
        width: 16vw;
        z-index: -1;
    }
    .tab-left-block .ltblue-line:after {
        width: 16vw;
        z-index: -1;
    }
    .tab6-block .data-container .courses-search-result {
        padding-top: 60px !important;
    }
    .explore-img img {
        margin: auto;
    }
    .holland-title {
        text-align: center;
    }
    .holland-search-course .search-course-title {
        bottom: 70px;
    }
    .qa-article-list .li-list {
        display: block;
        padding: 30px 0;
    }
    .qa-article-list .li-list img {
        width: 100%;
        margin-bottom: 20px;
    }
    .qa-article-list .li-list .btn {
        margin-top: 10px;
    }
    .selectjob-smallblock li.selectjob-smallblock-list {
        width: 99%;
    }
    .selectjob-smallblock-list .selectjob-title .jobnumbers {
        width: 300px;
    }
}
@media (min-width: 380px) and (max-width: 420px) {
    .register .google-btn,
    .register .facebook-btn {
        width: 100%;
        display: block;
        margin-top: 10px;
    }
    .custom-select {
        width: 120px;
    }
    .custom-search-input {
        width: 200px;
    }
    .custom-search-btn {
        width: 100px;
    }
    .select-special-bar .custom-select {
        width: 100%;
    }
    .certificate-block {
        width: 100%;
    }
    .cer-name.subname {
        font-size: 20px;
    }
}
@media (min-width: 660px) and (max-width: 979px) {
    header.course-header {
        height: 140px;
    }
    .btn-lg {
        font-size: 22px;
        border-radius: 30px;
        border: 0;
        padding: 4px 20px;
    }
    .menu-list {
        display: none;
    }
    .mobile-user-hamburger {
        display: block;
    }
    .logo h1 img {
        width: 200px;
        margin-top: -60px;
    }
    .bg-flower-r1 {
        height: 150px;
        width: 90px;
        top: -40px;
        right: 0;
    }

    .recommend-detail .title {
        font-size: 24px;
    }
    .recommend-detail-list {
        font-size: 20px;
        line-height: 26px;
    }
    .course {
        background-size: contain;
    }
    .bg-flower-r2 {
        background-size: contain;
        height: 200px;
        width: 80px;
        position: absolute;
        top: -40px;
        right: 0;
    }
    .teachers {
        background-color: #86dbef;
        background-size: contain;
    }
    .commends {
        height: 700px;
    }
    .commends-list-li {
        background-size: 100% 100%;
    }
    .user-img {
        width: 100px;
        height: 100px;
        left: 30px;
        top: 35px;
    }
    .commend {
        right: 5%;
        width: 65%;
    }

    /*course 課程介紹*/
    .page-course {
        padding-bottom: 80px;
    }
    .pageCourse .course-details {
        padding-bottom: 80px;
    }
    .pageCourse .course {
        min-height: 480px;
        padding-bottom: 60px;
        margin-top: 20px;
    }
    .course-text {
        font-size: 30px;
        max-width: 375px;
    }
    .course-info-title {
        font-size: 20px;
    }
    .course-info-numbers {
        font-size: 30px;
    }

    .section-text {
        line-height: 40px;
        font-size: 24px;
    }
    .btn-group {
        width: 100%;
    }
    .course-chapter-block {
        width: 90vw;
        margin-top: 40px;
    }
    .chapter-list {
        font-size: 30px;
    }
    .chapter-list > li:before {
        background-image: url(/img/line1-pad.png);
        background-size: cover;
        width: 100%;
        height: 100px;
        top: -60px;
    }
    .chapter-list:after {
        background-image: url(/img/line1-pad.png);
        background-size: cover;
        background-size: cover;
        width: 100%;
        height: 100px;
        bottom: -60px;
    }
    .chapter-list ul li {
        margin: 5px 0 0 10%;
    }

    .login-page-fromM .tab-section li {
        height: 80px;
    }

    .introduce-video-style {
        width: 85vw;
        height: 50vw;
        border-radius: 30px;
        border: 5px solid #fff;
        top: 10px;
        left: 10px;
    }
    .introduce-video-style video {
        width: 85vw;
        height: 48vw;
        top: 0;
        left: 0;
    }
    .introduce-video-info-block {
        width: 85%;
        margin-top: 40px;
    }
    .introduce-block {
        width: 100%;
        height: auto;
        margin-top: 0;
        margin-left: 0;
        padding-top: 0;
        margin: 0 auto;
        text-align: center;
    }
    .introduce-course-title {
        font-size: 36px;
        line-height: 52px;
        height: auto;
    }
    .introduce-course-detail-list {
        margin-bottom: 20px;
    }
    .introduce-course-detail-list li {
        line-height: 30px;
    }
    .introduce-detail-list {
        padding: 0;
    }
    .icon-title-bg {
        background-image: url(/img/line3-pad.png);
        height: 90px;
        margin-top: 40px;
    }
    .content {
        font-size: 20px;
    }
    .comments .right-text {
        width: 78%;
        margin-left: 2%;
    }
    /*login*/
    .group-form {
        width: 100%;
        flex-direction: column;
    }
    .group-form > .form-block,
    .group-form > .form-block.large-block {
        width: 90%;
        margin: 50px auto 20px auto;
    }
    .center-wrapper {
        width: 100%;
    }
    .login .social-btn-wrapper {
        display: block;
    }
    .login .social-btn-wrapper:before {
        height: 100px;
        top: -90px;
    }
    .login .google-btn,
    .login .facebook-btn {
        width: calc(50% - 10px);
        display: inline-block;
        margin-top: 10px;
    }
    .register .google-btn,
    .register .facebook-btn {
        width: calc(50% - 10px);
        display: block;
        margin-top: 10px;
    }
    .parents-info-wrapper:before {
        height: 90px;
    }
    /*member 會員中心主頁*/
    .member-main {
        flex-direction: column;
    }
    .member-main-label {
        width: 100%;
        margin-top: 20px;
    }
    .dashboard {
        flex-direction: column;
        margin-top: 40px;
    }
    .left-menu,
    .right-content {
        width: 100%;
    }
    .right-content-width {
        width: 100%;
    }
    .left-menu {
        margin-bottom: 20px;
    }
    .course-list-row-li {
        width: 46%;
    }
    .discover-container .tab7-block {
        min-height: 400px;
    }
    .work-type-container {
        background-position: top;
        height: 500px;
    }
    .work-type {
        width: 100%;
        height: 240px;
        margin-top: 25px;
        top: 19%;
        left: 3%;
    }
    .work-type-list {
        height: 200px;
        width: 92%;
    }
    .work-type-list li {
        padding: 5px 10px;
        width: 100px;
        margin: 10px;
        font-size: 15px;
    }
    .work-type-button {
        position: absolute;
        top: 340px;
        left: 40%;
    }
    /*一般課程*/
    .select-search-bar {
        top: 20px;
        left: 0;
    }
    .custom-search-input {
        margin-top: 10px;
        width: 29vw;
    }
    .select-special-bar .custom-search-input {
        margin-top: 10px;
    }
    .custom-search-btn {
        width: 120px;
        margin-top: 10px;
    }
    .select-special-bar .custom-search-btn {
        margin-top: 10px;
    }
    .course-list-page ul.courses-search-result {
        padding-top: 120px !important;
    }
    .course-list-page.course-list-sp ul.courses-search-result {
        padding-top: 30px !important;
    }
    .learning-group img {
        max-width: 40%;
    }
    .learning-group-info {
        padding: 0 30px;
    }
    .learning-group-info .group-content {
        background: #ffffffb0;
    }
    .learning-group-type .group-type {
        width: 32%;
    }
    .group-type img {
        max-width: 40%;
    }
    /*探索學群*/
    .discover-learning-block {
        width: 45%;
    }
    .discover-learning-chevron {
        width: 10%;
    }
    .custom-select.l-size {
        width: 100%;
    }
    .option-block .btn {
        margin-top: 10px;
        display: inline-block;
    }
    .selected-block li {
        font-size: 14px;
        width: 150px;
        margin-right: 5px;
        margin-bottom: 5px;
    }
    .tab6-block > .width85 > .d-flex,
    .tab7-block > .width85 > .d-flex,
    .holland-next-step > .d-flex {
        flex-flow: column;
    }
    .tab-left-block {
        margin-top: 20px;
        width: 100%;
    }
    .tab-left-block .line:after {
        width: 30vw;
        left: 2vw;
        z-index: -1;
    }
    .tab-left-block .list-steps {
        margin-top: 20px;
    }
    .tab-right-block {
        margin-top: 0;
        margin-left: 0;
        width: 100%;
    }
    .tab-right-block-bg {
        margin: 30px 0 0 0;
        width: 100%;
    }
    .tab-right-block-bg .step-title {
        font-size: 24px;
        width: 110px;
        padding-right: 10px;
        margin-left: 25px;
    }
    .tab-right-block-bg .step-content {
        width: 35%;
        margin: 10px;
    }
    .tab-right-block img {
        width: 100%;
    }
    .tab-fadein-right {
        width: 100%;
        left: 25vw;
    }
    .holland-input {
        height: 60px;
        font-size: 20px;
        margin-right: 5px;
        width: 40px;
        padding: 10px 12px;
        margin-top: 10px;
    }
    .holland-search-btn-block {
        padding-left: 10px;
    }
    .holland-search-btn {
        width: 110px;
        padding: 0 5px;
    }
    .holland-next-step {
        background: url("/img/holland/bluemask-flower-m.png");
        background-repeat: no-repeat;
        background-size: cover;
        height: 520px;
        background-position: bottom;
    }
    .tab-right-block-bg.white .step-content {
        width: 48%;
        margin-left: 20px;
        max-width: 48%;
    }
    .tab-left-block .dkblue-line:after {
        width: 21vw;
    }
    .tab-left-block .ltblue-line:after {
        width: 21vw;
    }
    .tab6-block .data-container .courses-search-result {
        padding-top: 60px !important;
    }
    .explore-img img {
        margin: auto;
    }
    .holland-title {
        text-align: center;
    }
    .select-special-bar .multiselect-native-select .btn-group {
        width: auto;
    }
    .qa-article-list .li-list img {
        width: 300px;
        height: auto;
    }
    .qa-article-list .li-list .content {
        height: auto;
    }
    .selectjob-smallblock li.selectjob-smallblock-list {
        width: 47%;
    }
}
@media (min-width: 660px) and (max-width: 740px) {
    .video video {
        width: 420px;
        height: 240px;
    }

    .discover-container .tab7-block {
        min-height: 400px;
    }
    .work-type-container {
        background-position: top;
        height: 500px;
    }
    .work-type {
        width: 100%;
        height: 240px;
        margin-top: 25px;
        top: 10%;
        left: 4%;
    }
    .work-type-list {
        height: 200px;
        width: 92%;
    }
    .work-type-list li {
        padding: 5px 10px;
        width: 100px;
        margin: 10px;
        font-size: 15px;
    }
    .work-type-button {
        position: absolute;
        top: 340px;
        left: 40%;
    }
    .learning-right-bg {
        background-size: 15%;
    }
    .learning-group-info {
        width: 60%;
    }
    .learning-group img {
        max-width: 30%;
    }
    .type-content {
        width: 100% !important;
        padding: 10px 0;
    }
    .leaning-future-bg img {
        width: 40%;
    }
    .f_block {
        bottom: 160px;
    }
    .selectjob-smallblock-list .selectjob-title .jobnumbers {
        width: 47%;
    }
}
@media (max-width: 768px) {
    .btn {
        font-size: 16px;
    }
    .group-form input[type="checkbox"] {
        width: 15px;
        height: 15px;
        margin-right: 5px;
    }
    .course-list-li {
        padding: 0;
        margin: 10px;
        -webkit-box-shadow: 10px 10px 9px -10px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 10px 10px 9px -10px rgba(0, 0, 0, 0.75);
        box-shadow: 10px 10px 9px -10px rgba(0, 0, 0, 0.75);
    }
    .cart-step li {
        margin-bottom: 5px;
        width: 100%;
    }
    .video video {
        width: 450px;
        height: 260px;
    }
    .course-title {
        font-size: 18px;
    }
    .cart-step .step,
    .cart-step .step-end {
        font-size: 20px;
    }
    .scroll-table {
        overflow-x: scroll;
    }
    .scroll-table table {
        font-size: 16px;
    }
    .form-group .col-lg-1,
    .form-group .col-lg-3 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    .form-group .col-lg-auto {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .d-none-M {
        display: none;
    }

    .d-block-M {
        display: block;
    }

    .group-form label.form-check-label {
        vertical-align: text-top;
        display: contents;
    }
    .buyer label.col-form-label {
        margin: 0 !important;
    }
    .buyer .tw-city-selector {
        display: contents;
    }
    .buyer .tw-city-selector .tw-zipcode,
    .buyer .tw-city-selector .tw-county,
    .buyer .tw-city-selector .tw-district {
        width: 30%;
        margin-right: 3%;
    }
    .buyer .tw-city-selector .tw-addresstxt {
        width: 100%;
    }

    .exam-list {
        padding: 0;
    }
    .exam-list > li {
        padding-left: 0;
        padding-right: 0;
    }
    .exam-question-container.show {
        display: block;
    }
    .exam-question {
        width: 100%;
    }
    .exam-answer {
        width: 100%;
        margin-top: 20px;
    }
    /*一般課程*/
    .select-search-bar {
        top: 20px;
        left: 0;
    }
    .custom-search-input {
        margin-top: 10px;
        width: 350px;
    }
    .custom-search-btn {
        width: 120px;
    }
    .course-list-page ul.courses-search-result {
        padding-top: 130px;
    }
    .courses-search-result li.result-course {
        width: 48%;
        justify-content: space-around;
    }
    .courses-search-result li.result-course:nth-child(2n) {
        margin-right: 0%;
    }
    .courses-search-result li.result-course:nth-child(3n) {
        margin-right: 1.9%;
    }
}
@media only screen and (max-width: 1024px) {
    .featherlight .featherlight-content {
        width: 80%;
    }
    .work-type {
        left: 7%;
    }
    .work-type-button {
        left: 40%;
    }
    /*一般課程*/
    .custom-select {
        width: 120px;
    }
    .custom-search-btn {
        width: 80px;
        padding: 0 5px;
    }
    .learning-group-type {
        width: 100%;
    }
    .type-content {
        width: 72%;
    }
}
@media (min-width: 980px) and (max-width: 1200px) {
    .selectjob-smallblock-list .selectjob-title .jobnumbers {
        width: 100px;
    }
    .tab-left-block .line2:after {
        position: absolute;
        width: 20vw;
        height: 2px;
        top: 23px;
        left: 55px;
        content: "";
        background: #d3dde6;
        z-index: -1;
    }
    .tab-left-block .dkblue-line2:after {
        position: absolute;
        width: 20vw;
        height: 2px;
        top: 23px;
        left: 57px;
        content: "";
        background: #1b577a;
    }

    .tab-left-block .ltblue-line2:after {
        position: absolute;
        width: 20vw;
        height: 2px;
        top: 23px;
        left: 57px;
        content: "";
        background: #45a0bb;
        z-index: -1;
    }
}
@media (min-width: 980px) and (max-width: 1400px) {
    .btn-lg {
        padding: 5px 10px;
        font-size: 16px;
    }
    .icon.small {
        height: 16px;
        width: 16px;
    }
    .logo h1 img {
        width: 250px;
    }
    .container-video {
        height: 700px;
    }
    .video video {
        width: 600px;
        height: 350px;
    }
    .course-list {
        padding: 0;
    }
    .teachers {
        height: 600px;
    }
    .frame {
        height: 170px;
    }
    .commends-list-li {
        height: 130px;
    }
    .user-img {
        width: 100px;
        height: 100px;
        left: 12%;
        top: 20px;
    }
    .commends {
        height: 550px;
    }
    .commend {
        top: 20px;
        font-size: 16px;
        line-height: 1.5;
        width: 63%;
        right: 13%;
    }
    .commend p {
        height: 70px;
    }
    .chapter-list {
        font-size: 24px;
    }
    .chapter-list > li {
        line-height: 50px;
        padding-top: 0;
    }
    .chapter-list .icon-film-roll {
        margin-top: 18px;
        margin-left: 5px;
        margin-right: 0;
        width: 20px;
        height: 20px;
    }
    span.chapter {
        width: 40%;
    }
    .chapter-list ul li {
        font-size: 16px;
        margin-left: 0;
    }
    .course-video-info li {
        font-size: 24px;
    }
    .course-info-numbers {
        font-size: 28px;
    }
    .section-text {
        margin-left: 0;
    }
    .introduce-course-detail-list li {
        font-size: 26px;
    }
    /*page*/
    .menu-list {
        width: 980px;
    }
    .menu-list li {
        font-size: 18px;
    }
    /*login*/
    .group-form {
        width: 95%;
    }
    /*一般課程*/
    .custom-select {
        width: 12vw;
    }
    .custom-search-input {
        width: 18vw;
    }
    .custom-search-btn {
        width: 8vw;
        padding: 0 5px;
    }
    /*多元課程*/
    .select-special-bar .custom-select {
        width: 15vw;
    }
    .select-special-bar .multiselect {
        width: 15vw;
    }
    /*探索學群*/
    .image-banner {
        margin-top: 40px;
    }
    .tab-left-block {
        margin-top: 20px;
    }
    .tab-left-block .line:after {
        width: 40px;
        left: 50px;
        z-index: -1;
    }

    .tab-left-block .line2:after {
        position: absolute;
        width: 25vw;
        height: 2px;
        top: 23px;
        left: 55px;
        content: "";
        background: #d3dde6;
        z-index: -1;
    }

    .tab-left-block .dkblue-line2:after {
        position: absolute;
        width: 25vw;
        height: 2px;
        top: 23px;
        left: 57px;
        content: "";
        background: #1b577a;
    }

    .tab-left-block .ltblue-line2:after {
        position: absolute;
        width: 25vw;
        height: 2px;
        top: 23px;
        left: 57px;
        content: "";
        background: #45a0bb;
        z-index: -1;
    }

    .tab-left-block .list-steps {
        margin-top: 20px;
    }
    .tab-right-block {
        margin-top: 0;
    }
    .tab-right-block-bg {
        margin: 30px 0 0 30px;
    }
    .tab-right-block-bg .step-title {
        font-size: 24px;
        width: 110px;
        padding-right: 10px;
        margin-left: 25px;
    }
    .tab-right-block-bg .step-content {
        width: 35%;
        margin: 10px;
    }
    .holland-input {
        height: 60px;
        font-size: 20px;
        margin-right: 5px;
        width: 40px;
        padding: 10px 12px;
        margin-top: 10px;
    }
    .holland-search-btn-block {
        padding-left: 10px;
    }
    .holland-search-btn {
        width: 110px;
        padding: 0 5px;
    }
    .tab-right-block-bg.white .step-content {
        width: 48%;
        margin-left: 20px;
        max-width: 48%;
    }
    .tab-left-block .dkblue-line:after {
        width: 40px;
    }
    /*成為老師*/
    .banner {
        margin-top: 0px;
    }
}

.main_active {
    color: red !important;
    background-color: #fff;
    border-left: 5px solid #45a0bc !important;
    border-bottom: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
}

/* search_group */
.bg-lightblue {
    background: #d1eeff;
    width: 100%;
    height: 10px;
    position: absolute;
    top: 50%;
    z-index: 1;
}
.cat-title {
    font-weight: 500;
    font-size: 14px;
    color: #242833;
    z-index: 2;
}

#code_1::placeholder {
    color: rgba(0, 0, 0, 0.2);
}
#code_2::placeholder {
    color: rgba(0, 0, 0, 0.2);
}

/*  Modal css */
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 18px;
    border: 1px solid #888;
    width: 90%;
    max-width: 804px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

/* The Close Button */
.close {
    color: #596480;
    float: right;
    font-size: 24px;
    font-weight: normal;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-top {
    position: absolute;
    top: 28px;
    right: 28px;
}
.img-search-modal {
    width: 80%;
    max-width: 539px;
    display: block;
    margin: 20px auto 0 auto;
}

.img-search-modal2 {
    width: 80%;
    max-width: 450px;
    display: block;
    margin: 20px auto 0 auto;
}

.modal-area {
    margin: 0 auto;
    text-align: center;
    padding-top: 20px;
    padding: 0 10%;
}
.area-title {
    color: #0a4b4f;
    font-size: 28px;
    font-weight: 500;
    margin-top: 10px;
}
.area-content {
    font-size: 14px;
    font-weight: normal;
    letter-spacing: normal;
    color: #363d4d;
    margin-top: 10px;
    text-align: center;
    line-height: 1.57;
}
.area-buttons {
    display: flex;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
    margin-top: 10px;
}

.btn-green-modal {
    background: #416b45;
    padding: 10px 45px;
    margin: 10px;
    border-radius: 15px;
    cursor: pointer;
}
.btn-blue-modal {
    background: #459fbc;
    padding: 10px 45px;
    margin: 10px;
    border-radius: 15px;
    cursor: pointer;
}

.btn-blue-copy {
    width: 263px;
    background: #fff;
    border: solid 1px #d3dde6;
    padding: 12px 45px;
    margin: 10px;
    border-radius: 28px;
    color: #0a4b4f;
    cursor: pointer;
    font-size: 20px;
    font-weight: 600;
}

.btn-blue-copy:hover {
    background: #0a4b4f;
    color: #fff;
    border: solid 1px #0a4b4f;
}

.btn-blue-copy.active {
    background: #0a4b4f;
    color: #fff;
    border: solid 1px #0a4b4f;
}

.promote-area {
    font-size: 13px;
    display: flex;
    font-weight: normal;
    letter-spacing: normal;
    color: #7a8499;
    margin-top: 10px;
    text-align: center;
    line-height: 1.57;
    justify-content: center;
}

.promote-text {
    font-size: 14px;
    font-weight: normal;
    letter-spacing: normal;
    text-align: center;
    color: #363d4d;
    margin-top: 18.1px;
}

@media (max-width: 600px) {
    .area-title {
        font-size: 16px;
        line-height: 1.5;
    }
    .modal-area {
        padding: 0 5%;
    }
    .area-content {
        font-size: 12px;
    }
    .area-buttons {
        font-size: 12px;
        display: block;
    }
    .btn-green-modal {
        background: #416b45;
        padding: 10px 20px;
        margin: 10px;
        border-radius: 15px;
    }
    .btn-blue-modal {
        background: #459fbc;
        padding: 10px 20px;
        margin: 10px;
        border-radius: 15px;
    }
    .promote-area {
        font-size: 12px;
    }
    .btn-blue-copy {
        width: 100%;
    }
    .tab-right-block-bg.white .holland-search-btn-block {
        margin-right: 0;
    }
}
/* end Modal  */

.no-data-img {
    display: block;
    margin: 28px auto;
    width: 80%;
    max-width: 496px;
}

.no-data-title {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: normal;
    color: #0a4b4f;
    text-align: center;
    margin-bottom: 8px;
}

.no-data-content {
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    color: #363d4d;
}

.course-detail-select::-ms-expand {
    display: none;
}
.course-detail-select {
    display: inline-block;
    box-sizing: border-box;
    padding: 0.5em 2em 0.5em 0.5em;
    border: 1px solid #008cbc;
    color: #008cbc;
    font: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    background-repeat: no-repeat;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 15px top 1em, right 10px top 1em;
    background-size: 5px 5px, 5px 5px;
    width: 100%;
    max-width: 300px;
    height: 40px;
    border-radius: 10px;
    background-color: #fff;
    margin-bottom: 10px;
}