@charset "UTF-8";

/* body{ font: 300 16px/180% "Arial","Apple LiGothic Medium", "Microsoft YaHei", sans-serif;} */
body.bg {
    background: url(../images/page_bg.svg)repeat center top;
    background-size: 100%;
}
.wrapper {
    color: #4A4A4A;
}

.hide {
    display: none;
}

.topup {
    background: url(../images/icon_top_up.svg)repeat center top;
    background-size: 100%;
    height: 60px;
    width: 60px;
    position: fixed;
    bottom: 8%;
    right: 2%;
    cursor: pointer;
    z-index: 11;
}

/* adkv*/
.ad_kv {
    position: relative;
}

.ad_kv source {
    margin: 0 0;
}
.ad_kv .carousel-indicators {
    top: 85%;
    left: 43%;

}
.carousel-indicators {
    margin: 0 auto;
    text-align: center;
    z-index: 2;
    position: absolute;
    left: 20%;
    background-color: #ffffffa9;
    /* width: 63%; */
    display: block;
    border-radius: 50px;
    padding: 5px 20px;
}
.carousel-indicators li {
    cursor: pointer;
    list-style-type: none;
    width: 25px;
    height: 25px;
    border-radius: 50px;
    background: #0095b5;
    float: left;
    margin: 10px;

}
.carousel-indicators li.active {
    background-color: #126775;
    width: 35px;
    height: 28px;
}
/* 教材搶先看 my_video  樣式 */
.my_videocontent {
    background:url(../images/e_page_item_01.svg)no-repeat left bottom;
    width: 100%;
    padding: 80px 0 120px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-size: cover;
    position: relative;
}
.my_videocontent h2 {
    background: url(../images/e_info_title_01.svg)no-repeat center top;
    display: block;
    text-indent: -9999px;
}

.my_videocontent.preparation h2 {
    background: url(../images/info_title_05.svg)no-repeat center top;
    display: block;
    text-indent: -9999px;
}

.my_videocontent .carousel-indicators {
    top: 85%;
    left: auto;
}
.my_videocontent .container {
    display: block;
    cursor: pointer;
}
/* iframe寬度 */
.video-grid {
    /*width: 365px;*/
    width: 300px;
    height: 330px;
    border: 1px solid #eaeaea;
    background-color: #fff;
    z-index: 9;
    margin: 30px 10px 10px 10px;
    overflow: hidden;
    display: inline-block;
    position: relative;
}
.video-grid .hot {
    font-size: 2.2em;
    width: 60px;
    height: 55px;
    border-radius: 0 40px 40px 40px;
    background-color: #ffe633;
    z-index: 100;
    position: absolute;
    margin: 10px 10px;
    text-align: center;
    padding:12px 11px 8px 10px;
}

.video-grid .v_bg {
    z-index: 10;
    width: 100%;
    height: 195px;
    position: absolute;
    display: inline-block;
    background-color: rgb(0 0 0 / .3);
    cursor: pointer;
}

.video-text {
    padding: .5em 1em;
    height: 100px;
    overflow: hidden;
}

h2 {
    font-size: 4.5em;
    font-weight: 400;
    text-align: center;
    display: block;
    width: 100%;
}

.video-text h4 {
    font-size: 1.2em;
    font-weight: 400;
}

.video-text h5 {
    font-size: 1em;
    color: #3c3c3c
}

/* 電子書試閱 my_book */
.my_bookcontent {
    background:url(../images/e_page_item_02.svg)no-repeat center bottom;
    padding: 80px 0 80px 0;
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}

.my_bookcontent h2 {
    background: url(../images/e_info_title_02.svg)no-repeat center top;
    display: block;
    text-indent: -9999px;
}

.my_bookcontent .carousel-indicators {
    top: 85%;
    left: 43%;
}

.my_bookcontent .container {
    display: block;
    cursor: pointer;
}

.my_bookcontent .inner {
    width: 260px;
    height: fit-content;
    margin: 30px 10px 50px 10px;
    border-radius: 20px;
    background-color: #fff;
    float: left;
    overflow: hidden;
    display: inline-block;
}

.my_bookcontent .container .inner img {
    border-radius: 20px 20px 0 0;
    height: 378px;
}

.my_bookcontent .container .inner p {
    padding: 10px 20px;
}
.my_bookcontent .container ul {
    display: block;
}

/* 資源分享 my_link */
.my_linkcontent {
    background:url(../images/e_page_item_03.svg)no-repeat center bottom;
    padding: 80px 0 80px 0;
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}

.my_linkcontent h2 {
    background: url(../images/e_info_title_03.svg)no-repeat center top;
    display: block;
    text-indent: -9999px;
}

.my_linkcontent .link_content {
    width: 1080px;
    display: flex;
    flex-flow: row wrap;
    margin: 50px auto;

}

.my_linkcontent .link_content .link_item {
    cursor: pointer;
    width: 520px;
    display: flex;
    margin: 20px auto;
    height: 180px;

}

.link_item .data_box {
    width: 320px;
    background-color:#F4F8FA;
    padding: 20px 20px;
}

.data_box .img {
    width: 180px;
    height: 180px;
}

.data_box .title {
    color: #1158aa;
    font-size: 24px;
    font-weight: 400;
    padding: 0 0;
    line-height: 30px;
    /* margin-bottom: 10px; */
}

.data_box .desc {
    font-size: 18px;
    line-height: 24px;
    height: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.data_box .button {
    background-color: #FAC329;
    color: #fff;
    border: none;
    margin: 10px 0 10px 0;
    cursor: pointer;
    border-radius: 5px;
    font-weight: 500;
    display: inline-block;
}

.data_box .button a {
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
    padding: 5px 15px;
}

.data_box .button a:hover,
.data_box .button a:focus {
    background-color: #FF9D22;
}


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

    .ad_kv .carousel-indicators {
        top: 85%;
        left: 33%;

    }

    .my_videocontent {
        background:url(../images/e_page_item_01_m.svg)no-repeat center bottom;
        background-size: cover;
        width: 100%;
    }
    .my_videocontent .container {
        text-align: center;
        overflow: hidden;
        height: 380px;
    }

    .my_bookcontent {
        background:url(../images/e_page_item_02_m.svg)no-repeat center bottom;
        background-size:cover;
    }

    .my_bookcontent .container {
        overflow: hidden;
        height: 420px;
    }

    .my_bookcontent .inner {
        float: none;
        display: block;
    }

    .my_videocontent h2,
    .my_videocontent.preparation h2,
    .my_bookcontent h2,.my_linkcontent h2 {
        background-size: 65% 100%;
    }
    .my_linkcontent {
        background: url(../images/e_page_item_03_m.svg)no-repeat center bottom;
        background-size:cover;
    }
    .my_linkcontent .container {
        overflow: hidden;
        height: 420px;
    }

    .my_linkcontent .inner {
        float: none;
        display: block;
    }
}

@media (max-width:767px) {
    .topup{ width: 50px;height: 50px; bottom: 5%;}
    h2 {
        font-size:3em;
    }

    .ad_kv .carousel-indicators {
        top: 85%;
        left: 15%;
    }

    .my_videocontent .carousel-indicators {
        top: 93%;
    }
    .my_videocontent .container {
        text-align: center;

    }

    .my_bookcontent {
        padding: 50px 5% 100px 5%;
        background:#55d4d2  url(../images/e_page_item_02_m.svg)no-repeat center bottom;
        background-size: cover;
    }

    .my_bookcontent .carousel-indicators {
        top: 90%;
        left: 20%;
    }

    .my_bookcontent .container {
        text-align: center;
        overflow: hidden;
        height: 400px;
    }

    .my_bookcontent .inner {
        margin: 20px 1em;
        float: none;
    }

    .my_videocontent {
        background:url(../images/e_page_item_01_m.svg)no-repeat center bottom;
        background-size: cover;
        width: 100%;
    }
    .my_linkcontent {
        background:url(../images/e_page_item_03_m.svg)no-repeat center bottom;
        background-size: cover;
    }
    .my_linkcontent .link_content {
        width: 90%;
    }

    .my_linkcontent .link_content .link_item {
        cursor: pointer;
        width: 100%;
        justify-content: center;
        height: 130px;
        margin: 0 auto 20px auto;
    }

    .link_item .data_box {
        width: 320px;
        padding: 10px 10px;
    }

    .data_box .title {
        font-size: 1rem;
        line-height: normal;
        margin-bottom: 0;
    }

    .data_box .desc {
        font-size: .8rem;
        line-height: normal;
        height: 52px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .data_box .button {
        margin: 7px auto;
        font-size: .8rem;
    }

    .link_item .img {
        width: 130px;
        height: 130px;
    }
}

@media screen and (min-width:480px) and (max-width:767px) {
    .my_videocontent .video-grid {
        width: 55%;
    }
}

@media (max-width:320px) {
    .my_videocontent .container {
        width: 100%;
        text-align: center;
    }

    .my_videocontent .video-grid {
        width: 90%;
        margin: 0 auto;
    }

    .my_reasoncontent .container .inner span.img_200 {
        width: 45.3%;

    }

    .my_bookcontent .inner {
        width: 90%;
    }
    .accordion_content .tabs span {
        padding: 7px 12px 5px 12px;
    }

    .photo_content {
        width: 100%;
    }
}