@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/my_video_bg.svg)no-repeat left top;
    width: 100%;
    padding: 50px 0 120px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-size: contain;
    position: relative;
}

.my_videocontent h2 {
    background: url(../images/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;


}

.video-grid {
    width: 365px;
    height: 330px;
    border: 1px solid #eaeaea;
    background-color: #fff;
    z-index: 9;
    margin: 30px 1em 10px 1em;
    overflow: hidden;
    display: inline-block;
    position: relative;
    box-shadow: 3px 3px 9px #f1f1f1;
}

.video-grid .hot {
    font-size: 2.5em;
    width: 40px;
    height: 40px;
    border-radius: 0 40px 40px 40px;
    background-color: #ffe633;
    z-index: 100;
    position: absolute;
    margin: 10px 10px;
    text-align: center;
    padding: 18px 15px 8px 15px;
}

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

.video-text {
    padding: .8em 1.5em;
    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/page_item_01.svg)no-repeat center center;
    padding: 80px 0 80px 0;
    background-size:cover;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}

.my_bookcontent.ebook {
    background:url(../images/page_item_03.svg)no-repeat center center;
    padding: 80px 0 80px 0;
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}

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

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

.my_bookcontent h2.ebook {
    background: url(../images/info_title_07.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: 280px;
    height: fit-content;
    margin: 30px 1em 50px 1em;
    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_digital*/
.my_digitalcontent {
    background:  url(../images/page_item_02.svg)no-repeat center center;
    width: 100%;
    padding: 80px 0;
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

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

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

.my_digitalcontent .container {
    margin-top: 30px;
}

.my_digitalcontent .inner {
    width: 720px;
    height: 405px;
    margin: 0 1em 50px 1em;
    background-color: #fff;
    float: left;
    overflow: hidden;
    display: inline-block;
}

.my_bookcontent .container ul {
    display: block;
}

.my_digitalcontent span {
    float: left;
    border-radius: 50px;
    padding: 5px 25px;
    margin: 10px 15px;
    background: #14934A;
    display: inline-block;
    cursor: pointer;
    color: #fff;
}

.my_digitalcontent span:hover {
    background: #5d8752;
}

.my_digitalcontent span.active {
    background: #17A29D;
}

.selectbar {
    clear: both;
    /* width: 95%; */
    display: block;
    margin: 0 auto;
    padding: 0 2.5%;
    /* flex-wrap: wrap;
    justify-content: center; */
}

ul.list li {
    display: inline-block;
    background-color: #29B5B2;
    padding: 0.3em .5em;
    box-sizing: border-box;
    margin: 0 .5em 0 0;
    border-radius: 5px 5px 0 0;
    list-style-type: none;
    color: #fff;
    /* width: 100%; */
}

ul.list li:hover {
    background-color: #219d9b;
    outline: 0;
    cursor: pointer;
}


/*必選理由*/
.my_reasoncontent {
    background: url(../images/page_item_03.svg)no-repeat left bottom;
    width: 100%;
    padding: 80px 0 100px 0;
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

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

.my_reasoncontent .container {
    background-color: #fff;
    border-radius: 20px;
    padding: 30px 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 50px;
}

.w_955 {
    width: 955px;
}

.w_730 {
    width: 730px;
}

.my_reasoncontent .container .inner span {
    display: block;
}

.my_reasoncontent .container .inner span.img_420 {
    display: block;
    width: 420px;
    height: 420px;
    margin: 5px 12px;
    float: left;
}

.my_reasoncontent .container .inner span.img_200 {
    display: block;
    width: 200px;
    height: 200px;
    margin: 5px 12px 15px 12px;
    float: left;
}

/* 資源分享 my_link */
.my_linkcontent {
    background: #fff url(../images/page_item_04.svg)no-repeat center center;
    padding: 80px 0 200px 0;
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    font: 300 16px/160% "Arial", "Apple LiGothic Medium", "Microsoft YaHei", sans-serif;
}

.my_linkcontent h2 {
    background: url(../images/info_title_04.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;
    width: 100%;
}

.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;

}

/* page 頁面 */
.page_topad {
    width: 100%;
    height:300px;
    background: url(../images/page_topad.svg)no-repeat center center;
    background-size:cover;
    padding: 60px 0;
}

.page_topad .title {
    color: #fff;
    text-align: center;
    width: 100%;
    padding: 0 0;
}

.page_topad .title h2 {
    color: #fff;
    font-size: 4em;
    display: initial;
}

.page_topad .title span {
    display: inline-block;
    font-size: 4em;
}

.page_topad .tabs_item {
    display: block;
}

ul.tabs_list {
    display: block;
    text-align: center;
    margin: 15px auto;
}


ul.tabs_list li {
    border-radius: 50px;
    padding: 10px 25px;
    background-color: #5d9d70;
    color: #183A55;
    display: inline-block;
    font-weight: 400;
    font-size: 1.2em;
    margin: 0 10px;
}

ul.tabs_list li a {
    color: #fff;
    margin: 0 10px;
}

ul.tabs_list li.active {
    background-color: #d93b41;
    cursor: pointer;
}

.accordion_content {
    padding: 100px 10%;
    /* height: 60vh; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background:#fff url(../images/reason_bg.svg)no-repeat center center;
    background-size:cover;
    background-size: 100%;
}

.accordion_content .tabs {
    display: inline-block;
    text-align: center;
    width: 100%;
    font-size: 1.3em;
}

.accordion_content .tabs span {
    margin: 0 auto;
    border-radius: 10px 10px 0 0;
    padding: 7px 25px 5px 25px;
    display: inline-block;
    background-color: #6E3A50;
    cursor: pointer;
    color: #fff;
}

.accordion_content .tabs span.active {
    background-color: #FF6300;
    color:#fff;
}

/* 手風琴樣式 */
.accordion_item {
    margin: 0 auto 1em auto;
    min-width: 1024px;
    /* box-shadow: 3px 3px 9px #f1f1f1; */
}

.accordion_item .accordion_hd {
    background-color: #5379DC;
    width: 100%;
    border-radius: 10px 10px;
    letter-spacing: .1em;
}

.accordion_item .accordion_hd h3 {
    border-radius: 10px 10px;
    text-align: left;
    font-size: 1.2em;
    padding: 1em 1em;
    font-weight: 400;
    display: block;
    line-height: 130%;
}

.accordion_item .accordion_hd h3 span {
    display: inline-block;
    width: 90%;
    text-align: left;
    text-align: justify;
    overflow: hidden;
    margin: 0 auto;
    padding: 0 0;
    color: #fff;

}

.accordion_item>.accordion_hd h3:after {
    content: url("../images/icon_below.svg");
    float: right;
    position: relative;
    top: 5px;
    transition: .3s all;
    height: 15px;
    width: 15px;
    transform: rotate(270deg);
}

.accordion_item .accordion_hd.open {
    background-color: #5379DC;
}

.accordion_item>.accordion_hd.open h3:after {
    top: 8px;
    transform: rotate(-180deg);
}

.accordion_item .accordion_hd .accordion_body {
    font-size: 1.2em;
    padding: 20px 40px;
    background-color: #fff;
}

.accordion_item .accordion_hd .accordion_body p {
    margin: 0 0 20px 0;
}

.data_content {
    text-align: justify;
    padding: 0 10px 20px 10px;
}

.photo_content {
    width: 500px;
    text-align: center;
    margin: 10px auto;
    overflow: hidden;
}

.zoonIn_box {
    position: absolute;
    z-index: 10;
    padding: 10px 10px;
    margin: 10px 0;
}

.photo_content img {
    width: 100%;
    border: 1px solid #eeeeee;
    box-sizing: border-box;
    padding: 5px 5px;
    margin: 10px auto;
}

.photo_content img:hover {
    -webkit-filter: brightness(.8);
}

.photo_content .zoonIn_box button.zooIn {
    background: #fff url(../images/icon_plus.svg)no-repeat center center;
    background-size: 90%;
    height: 35px;
    width: 35px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    outline: none;
    box-shadow: 1px 0px 3px 1px #c4c2c2;
}

.photo_content .zoonIn_box button.zoom {
    background: #fff url(../images/icon_zoom.svg)no-repeat center center;
    background-size: 90%;
    height: 30px;
    width: 30px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    outline: none;
    box-shadow: 1px 0px 3px 1px #c4c2c2;
}



@media screen and (min-width:768px) and (max-width:1024px) {
    .ad_kv .carousel-indicators {
        top: 85%;
        left: 33%;

    }

    .my_videocontent {
        background: url(../images/my_video_bg_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/page_item_01_p.svg)no-repeat center bottom;
        background-size: cover;
    }

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

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

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

    .my_digitalcontent {
        background: #A1D8E6 url(../images/page_item_02_p.svg)no-repeat center bottom;
        background-size: cover;
        width: 100%;
    }

    .my_digitalcontent .container {
        margin: 30px auto;
    }

    .my_videocontent h2,
    .my_videocontent.preparation h2,
    .my_bookcontent h2,
    .ebook_demo h2,
    .my_digitalcontent h2,
    .my_reasoncontent h2,
    .my_linkcontent h2 {
        background-size: 65% 100%;
    }

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

    .my_reasoncontent .container {
        width: 500px;
    }

    .my_reasoncontent .container .inner span.img_200 {
        margin: 20px 10px 10px 12px;
    }

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

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

    .my_linkcontent .link_content .link_item {
        cursor: pointer;
        min-width: 550px;
        width: 100%;
        justify-content: center;

    }


    /* page 樣式 */
    .page_topad {
        width: 100%;
        /* height: 300px; */
        background: #FEA22C url(../images/page_topad.svg)no-repeat center bottom;
        background-size: cover;
        padding: 20px 0;
        display: block;
    }

    .page_topad .title {
        padding: .5em .5em;
    }

    .page_topad .title h2 {
        font-size: 3em;
    }

    .page_topad .title span {
        display: inline-block;
        font-size: 2.5em;
        text-align: center;
        margin-left: 10px;
    }

    .page_topad .tabs_item {
        width: 95%;
        margin: 0 auto;
        height: 60px;
        overflow: hidden;
    }

    ul.tabs_list {
        margin: 0 auto;
    }

    ul.tabs_list li {
        padding: 7px 20px;
        margin: 5px 5px;
    }

    .accordion_item {
        min-width: 100%;
    }

    .accordion_content {
        padding: 50px 5% 120px 5%;
        background-size: 100%;
        background:#fff url(../images/reason_bg_p.svg)no-repeat top center;
        background-size:cover;
        background-size: 100%;
    }
  
    .accordion_content .tabs span {
        margin: 0 auto;
    }

    .accordion_item .accordion_hd h3 {
        padding: .5em 1em;
    }

    .accordion_item .accordion_hd .accordion_body {
        padding: 15px 15px;
    }

    .photo_content .zoonIn_box button.zooIn,
    .photo_content .zoonIn_box button.zooOut,
    .photo_content .zoonIn_box button.zoom {
        height: 25px;
        width: 25px;
    }

}

@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%;
    }

    .carousel-indicators {
        /* left: 25%; */
    }

    .my_videocontent .container {
        text-align: center;

    }

    .my_videocontent .video-grid {
        margin: 0 auto;
        box-shadow: 3px 3px 9px #f1f1f1;
        width: 90%;
    }

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

    .my_bookcontent.ebook{
        padding: 50px 5% 100px 5%;
        background: #FEDC5E url(../images/page_item_03_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/my_video_bg_m.svg)no-repeat center bottom;
        background-size: cover;
        width: 100%;
    }

    .my_digitalcontent {
        width: 100%;
        padding: 50px 5% 150px 5%;
        background: #A1D8E6 url(../images/page_item_02_m.svg)no-repeat center bottom;
        background-size: cover;
    }

    .my_digitalcontent .container {
        display: block;
        width: 100%;
        margin-top: 0;
    }

    .my_digitalcontent .container .tab_box {}

    .my_digitalcontent .container .inner {
        width: 100%;
        height: 210px;
        padding: 0;
        margin: 0 auto 50px auto;
    }

    .my_digitalcontent span {
        padding: 5px 20px; 
        margin: 5px 5px;
    }

    select {
        padding: 0.8em 3.5em 0.8em 1em;
    }

    .my_reasoncontent {
        width: 100%;
        padding: 50px 5% 150px 5%;
        background: #FEDC5E url(../images/page_item_03_m.svg)no-repeat center bottom;
        background-size: cover;
    }

    .my_reasoncontent .container {
        width: 90%;
        padding: 5% 5%;
        margin-top: 10px;
    }

    .my_reasoncontent .container .inner {
        width: 100%;
    }

    .my_reasoncontent .container .inner span.img_420 {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .my_reasoncontent .container .inner span.img_420 img {
        width: 100%;
    }

    .my_reasoncontent .container .inner span.img_200 {
        width: 46%;
        height: auto;
        display: block;
        margin: 0 18px 0 0;
    }

    .my_reasoncontent .container .inner span.img_200 img {
        width: 100%;
        margin: 10px auto;
        float: left;
    }

    .my_reasoncontent .container .inner span.img_200:nth-child(odd) {
        margin: 0 0;
    }


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

    .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: 35px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

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

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

    /* page 樣式 */
    .page_topad {
        width: 100%;
        background: #FEA22C url(../images/page_topad_m.svg)no-repeat center bottom;
        background-size:cover;
        padding: 30px 0 25px 0;
        display: block;
    }

    .page_topad .title {
        padding: .5em .5em;
    }

    .page_topad .title h2 {

        font-size: 3em;
    }

    .page_topad .title span {
        display: block;
        font-size: 1.8em;

        text-align: center;
    }

    .page_topad .tabs_item {
        width: 95%;
        margin: 0 auto;
        height: 60px;
        overflow: hidden;
    }

    ul.tabs_list {
        margin: 0 auto;
    }

    ul.tabs_list li {
        padding: 10px 25px;
        margin: 5px auto;
    }

    .accordion_item {
        min-width: 100%;
    }

    .accordion_content {
        padding: 50px 5% 120px 5%;
        background:#fff url(../images/reason_bg_m.svg)no-repeat top center;
        background-size:cover;
        background-size: 100%;
      
    }

    .accordion_content .tabs span {
        padding: 7px 15px 5px 15px;
    }

    .accordion_content span {
        margin: 0 auto;
    }

    .accordion_item .accordion_hd h3 {
        padding: .5em 1em;
    }

    .accordion_item .accordion_hd h3 span {
        max-height: 50px;
    }

    .accordion_item .accordion_hd .accordion_body {
        padding: 15px 15px;
    }

    .photo_content {
        width: 100%;
    }

    .photo_content .zoonIn_box button.zooIn,
    .photo_content .zoonIn_box button.zooOut,
    .photo_content .zoonIn_box button.zoom {
        height: 25px;
        width: 25px;
    }

    .selectbar {
        width: 100%;
        margin-top: 4.5em;
    }

    ul.list {
        margin: .5em 0 0 0;
        width: 100%;
    }

    ul.list li {
        width: 100%;
    }

}

@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%;
    }

    .my_digitalcontent span {
        padding: 10px 17px;
        margin: 5px 2px;
    }

    .my_reasoncontent {
        padding: 50px 5% 205px 5%;
    }

    .accordion_content .tabs span {
        padding: 7px 12px 5px 12px;
    }

    .photo_content {
        width: 100%;
    }
}