/* @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap'); */
/*@font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/EBGaramond-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}*/
/* 定義粗體字重的字型 */
/*@font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/EBGaramond-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}*/

*{ margin: 0; padding: 0; font-family:"EB Garamond", serif, "微軟正黑體"; color: #333; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
*:focus{ outline: 2px solid #ff9048; }
a{ text-decoration: none; color: #333; font-weight: inherit; font-size: inherit; }
img{ max-width: 100%; }

::placeholder{ color: #ccc; }
::-webkit-input-placeholder{ color: #ccc; }
:-ms-input-placeholder{ color: #ccc; }
::-moz-placeholder{ color: #ccc; }

::selection { background: #90ac50; color: #fff; }
::-webkit-selection { background: #90ac50; color: #fff; }
:-ms-selection { background: #90ac50; color: #fff; }
::-moz-selection { background:#90ac50; color: #fff; }

#gotocenter{ position: absolute; width: 0.063rem; height: 0.063rem; padding: 0; margin: -0.063rem; overflow: hidden; clip: rect(0,0,0,0); border: 0; z-index: 101; }
#gotocenter:focus{ top: 0; left: 0; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }

.rightBtnBox{ position: fixed; bottom: 130px; right: 0px; z-index: 50; background-color: #fff; display: flex; justify-content: center; flex-direction: column; border-radius:15px; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); padding:10px 10px 5px 10px;}
.rightBtnBox .rightBtn{ display:block; font-size: 1.75rem; color: #000; font-family: "微軟正黑體"; text-align:center;}
.topBtn{ position: fixed; bottom: 20px; right: 20px; z-index: 50; width: 70px; height: 70px; border-radius: 100%; background-color: #009fb7; font-size: 1.75rem; color: #fff; font-weight: bold; display: flex; justify-content: center; align-items: center; font-family: "微軟正黑體"; }

p{ line-height: 1.6; font-size: 1.125rem; }
p a{ color: #009fb7; font-size: inherit; font-weight: inherit; line-height: inherit; }
p .orange{ color: #ff9016; font-size: inherit; font-weight: inherit; line-height: inherit; }
p .green{ color: #90ac50; font-size: inherit; font-weight: inherit; line-height: inherit; }
p .blue{ color: #009fb7; font-size: inherit; font-weight: inherit; line-height: inherit; }

.pt-0{ padding-top: 0px !important; }
.pt-10{ padding-top: 10px !important; }
.pt-20{ padding-top: 20px !important; }
.pt-30{ padding-top: 30px !important; }
.pt-40{ padding-top: 40px !important; }
.pt-50{ padding-top: 50px !important; }
.pt-60{ padding-top: 60px !important; }
.pt-70{ padding-top: 70px !important; }
.pt-80{ padding-top: 80px !important; }
.pt-90{ padding-top: 90px !important; }
.pt-100{ padding-top: 100px !important; }

.pb-0{ padding-bottom: 0px !important; }
.pb-10{ padding-bottom: 10px !important; }
.pb-20{ padding-bottom: 20px !important; }
.pb-30{ padding-bottom: 30px !important; }
.pb-40{ padding-bottom: 40px !important; }
.pb-50{ padding-bottom: 50px !important; }
.pb-60{ padding-bottom: 60px !important; }
.pb-70{ padding-bottom: 70px !important; }
.pb-80{ padding-bottom: 80px !important; }
.pb-90{ padding-bottom: 90px !important; }
.pb-100{ padding-bottom: 100px !important; }

.pl-0{ padding-left: 0px !important; }
.pl-10{ padding-left: 10px !important; }
.pl-20{ padding-left: 20px !important; }
.pl-30{ padding-left: 30px !important; }
.pl-40{ padding-left: 40px !important; }
.pl-50{ padding-left: 50px !important; }
.pl-60{ padding-left: 60px !important; }
.pl-70{ padding-left: 70px !important; }
.pl-80{ padding-left: 80px !important; }
.pl-90{ padding-left: 90px !important; }
.pl-100{ padding-left: 100px !important; }

.pr-0{ padding-right: 0px !important; }
.pr-10{ padding-right: 10px !important; }
.pr-20{ padding-right: 20px !important; }
.pr-30{ padding-right: 30px !important; }
.pr-40{ padding-right: 40px !important; }
.pr-50{ padding-right: 50px !important; }
.pr-60{ padding-right: 60px !important; }
.pr-70{ padding-right: 70px !important; }
.pr-80{ padding-right: 80px !important; }
.pr-90{ padding-right: 90px !important; }
.pr-100{ padding-right: 100px !important; }

.mt-0{ margin-top: 0px !important; }
.mt-10-burden{ margin-top: -10px !important; }
.mt-20-burden{ margin-top: -20px !important; }
.mt-30-burden{ margin-top: -30px !important; }
.mt-40-burden{ margin-top: -40px !important; }
.mt-50-burden{ margin-top: -50px !important; }

.fastBlock{ position: relative; max-width: 1200px; margin: auto; }
.fastLink{ opacity: 0; position:absolute; }
.fastLink:target{ scroll-margin-top: 18rem; }
.fastLink:focus,.fastLink:hover{ opacity: 1; }

/*header*/
header{ background-color: #fff; position: fixed; z-index: 100; top: 0; left: 0; width: 100%; padding: 0 20px; }
header > h1 { position: fixed; width: 1px; height: 1px; color: #000; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
header .ranges{ max-width: 1550px; margin: auto; position: relative; }
header .ranges .logo{ position: absolute; top: 10px; left: 0; display: block; width: 170px; font-size:0; z-index: 2; }
header .ranges .logo:after{ content: ""; display: block; width: 100%; padding-bottom: 42.35%; background-image: url(../images/layout/logo.svg); background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; }
header .ranges .menublock{ position: relative; z-index: 1; }
header .ranges .menublock .menuClose{ display: none; }
header .ranges .menublock .headerTop{ padding: 0 0 0 230px; display: flex; justify-content: space-between; align-items: center; width: 100%; }
header .ranges .menublock .headerTop .funLeft{ display: flex; grid-gap:20px; }
header .ranges .menublock .headerTop .funLeft .linkGrid{ display: flex; align-items: center; }
header .ranges .menublock .headerTop .funLeft .linkGrid .icon{ width: 28px; }
header .ranges .menublock .headerTop .funLeft .linkGrid .icon:after{ content: ""; display: block; width: 100%; padding-bottom: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; }
header .ranges .menublock .headerTop .funLeft .linkGrid .icon.site{ background-image: url(../images/layout/header_icon01.svg); }
header .ranges .menublock .headerTop .funLeft .linkGrid .icon.sitemap{ background-image: url(../images/layout/header_icon02.svg);  }
header .ranges .menublock .headerTop .funLeft .linkGrid .txt{ font-size: 1.1rem; color: #90ac50; font-weight: bold; padding: 0 0 0 5px; flex:1; }
header .ranges .menublock .headerTop .funLeft .linkGrid:hover .icon.site{ background-image: url(../images/layout/header_icon01-hover.svg); }
header .ranges .menublock .headerTop .funLeft .linkGrid:hover .icon.sitemap{ background-image: url(../images/layout/header_icon02-hover.svg);  }
header .ranges .menublock .headerTop .funLeft .linkGrid:hover .txt{ color:#313131;}
header .ranges .menublock .headerTop .funRight{ display: flex; padding: 15px 0; align-items: center; }
header .ranges .menublock .headerTop .funRight .searchPC{ max-width: 240px; width: 40%; position: relative; padding-left: 64px; border-radius: 10px; padding: 5px 10px 5px 70px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); margin-right: 20px; }
header .ranges .menublock .headerTop .funRight .searchPC .btn{ position: absolute; left: 0; top: 50%; margin-top: -30px; font-size: 0; width: 60px; height: 60px; background-color: #90ac50; border-radius:10px ; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); background-image: url(../images/layout/icon_search.svg); background-position: center; background-repeat: no-repeat; background-size: 30px; border: none; cursor: pointer; }
header .ranges .menublock .headerTop .funRight .searchPC .input{ width: 100%; background: none; border: none; height: 36px; line-height: 36px; font-size: 1.125rem; }
header .ranges .menublock .headerTop .funRight .searchPC .labels{ position: absolute; z-index: -1; opacity: 0; }
header .ranges .menublock .headerTop .funRight .btnbox{ border-radius: 10px; background-color: #ff9048; padding: 10px 10px; display: flex; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); }
header .ranges .menublock .headerTop .funRight .btnbox .line{ width: 1px; background-color: #000; }
header .ranges .menublock .headerTop .funRight .btnbox .txtBtn{ color: #000; font-size: 1.25rem; font-weight: bold; display: block; text-align: center; padding:0 10px; line-height: 100%; }
header .ranges .menublock .headerTop .funRight .btnbox .txtBtn .en{ font-weight: normal; font-size: 1.125rem; color: #000; }
header .ranges .menublock .headerTop .funRight .languageBox{ display: flex; margin-left: 35px; grid-gap:10px; }
header .ranges .menublock .headerTop .funRight .languageBox .grids{ display: block; width: 37px; height: 37px; line-height: 37px; border-radius: 100%; border: 2px solid #ff9048; color: #ff9048; text-align: center; font-weight: bold; }
header .ranges .menublock .headerTop .funRight .languageBox .grids.hold{ background-color: #ff9048; color: #000; }
header .ranges .menublock .headerTop .funRight .languageBox .grids:nth-child(3){ font-size: 1rem; }
header .ranges .menublock .headerTop .funRight .languageBox .grids:nth-child(2){ font-size: 1.25rem; }
header .ranges .menublock .headerTop .funRight .languageBox .grids:nth-child(1){ font-size: 1.375rem; }
header .ranges .menublock .headerBottom{ padding-top: 20px; }
header .ranges .menublock .headerBottom .menus{ display: flex; justify-content: center; grid-gap:40px; }
header .ranges .menublock .headerBottom .menus .grids{ position: relative; padding: 0 0 30px 0; display: flex; }
header .ranges .menublock .headerBottom .menus .grids:after{ content: ""; display: block; width: 18px; height: 18px; background-image: url(../images/layout/menu_arrow.png); background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; bottom: 5px; left: 0; right: 0; margin: auto; }
header .ranges .menublock .headerBottom .menus .grids.noTwoLV:after{ display: none; }
header .ranges .menublock .headerBottom .menus .grids .titles .ch{ font-size: 1.375rem; color: #000; text-align: center; font-weight: bold; }
header .ranges .menublock .headerBottom .menus .grids .titles .en{ font-size: 1.125rem; color: #636363; text-align: center; }
header .ranges .menublock .headerBottom .menus .grids .du{ display: none; position: absolute; bottom: 0; transform: translate(-50%,100%); left: 50%; background-color: #fff; box-shadow: 0 0 10px 2px rgba(0,0,0,0.1); padding: 10px; border-radius:10px; }
header .ranges .menublock .headerBottom .menus .grids .du .list{ display: block; padding: 10px; font-size: 1.125rem; color: #000; white-space:nowrap; border-radius:5px; }
header .ranges .menublock .headerBottom .menus .grids .du .list:last-child{ border: none; }
header .ranges .menublock .headerBottom .menus .grids .du .list:hover{ color:#5b6d33; font-weight:bold;}

/* 隱藏選單 相關資訊 Class */
header .ranges .menublock .headerBottom .menus .grids.noMenu:after,
header .ranges .menublock .headerBottom .menus .grids.noMenu .du,
.noMenu .grids:after,
.noMenu .grids .du{ display: none !important; }

header .ranges .menuBtn{ display: none; }
header .ranges .searchSpBox{ display: none; }
header .ranges .searchSp{ display: none; }

/*footer*/
footer{ padding: 56px 0 0 0; }
footer:after{ content: ""; display: block; width: 100%; background-color: #90ac50; height: 66px; }
footer .footerTop{ max-width: 1446px; margin: auto; padding: 0 20px; display: flex; flex-wrap:wrap; justify-content: space-between; grid-gap:20px; }
footer .footerTop .grids{ display: block; width: 170px; border-top: 1px solid #009fb7; padding-top: 15px; }
footer .footerTop .grids .ch{ font-size: 1.125rem; color: #000; font-weight: bold; }
footer .footerTop .grids .en{ font-size: 1.125rem; color: #009fb7; font-weight: bold; }

footer .footerBottom{ display: flex; justify-content: space-between; max-width: 1600px; margin: auto; padding: 60px 20px; grid-gap:40px; }
footer .footerBottom .logo{ max-width: 397px; width: 24.8125%; display: block; }
footer .footerBottom .linkbox{ max-width: 349px; width: 21.8125%; }
footer .footerBottom .linkbox .links{ display: block; text-align: center; }
footer .footerBottom .dataContent .marbotm{ margin-bottom: 10px; }
footer .footerBottom .dataContent{ max-width: 700px; flex:1; font-size: 1.125rem; color: #000; }
footer .footerBottom .dataContent .disFlex{ display: flex; align-items: flex-start; margin-bottom: 5px; }
footer .footerBottom .dataContent .disFlex .icon{ width: 28px; position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; }
footer .footerBottom .dataContent .disFlex .icon:after{ content: ""; display: block; width: 100%; padding-bottom: 100%; }
footer .footerBottom .dataContent .disFlex .icon.i01{ background-image: url(../images/layout/icon_footer_01.svg); }
footer .footerBottom .dataContent .disFlex .icon.i02{ background-image: url(../images/layout/icon_footer_02.svg); }
footer .footerBottom .dataContent .disFlex .icon.i03{ background-image: url(../images/layout/icon_footer_03.svg); }
footer .footerBottom .dataContent .disFlex .txt{ flex:1; padding: 0 0 0 10px; }
footer .footerBottom .dataContent .disFlex .txt a{ color: #009fb7; font-size: inherit; font-weight: bold; }
footer .footerBottom p{ font-size: 1.125rem; line-height: 1.6; }

/*小卡*/
.indexEbookBox{ position: relative; width: 100%; }
.indexEbookBox.sp{ display: none; }
.indexEbookBox .arrowbtns{ font-size: 0; display: block; position: absolute; z-index: 5; width: 45px; height: 45px; background-color: #fff; border-radius: 10px; top: 50%; transform: translateY(-50%); background-position: center;  background-repeat: no-repeat; background-size: 50%; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); }
.indexEbookBox .arrowbtns.left{ left: -80px; background-image: url(../images/layout/arrow_left.svg); }
.indexEbookBox .arrowbtns.right{ right: -80px; background-image: url(../images/layout/arrow_right.svg); box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.1); }

.indexEbookBox .flexBox{ display: flex; margin-left: -20px; }
.indexEbookBox .flexBox .grids{ width: 25%; padding:0 0 0 20px; display:flex; position: relative; }
.indexEbookBox .flexBox .grids .gs{ display: flex; flex-direction: column; width: 100%; background-color: #fff; box-shadow: 0 0 12px 5px rgba(0, 0, 0, 0.07); border-radius: 10px; overflow: hidden; }
.indexEbookBox .flexBox .grids .gs .imgs{ background-size: contain; width: 100%; padding-bottom: 96.2264%; position: relative; overflow: hidden; }
.indexEbookBox .flexBox .grids .gs .imgs img{ position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; max-height: 100%; }
.indexEbookBox .flexBox .grids .gs .imgs .sp{ display:none; }

.indexEbookBox .flexBox .grids .gs .textbox{ flex:1; padding: 10px 10px 30px 10px; }
.indexEbookBox .flexBox .grids .gs .textbox .en{font-size: 1em;color: #636363;line-height: 1.5;	font-weight: normal;}
.indexEbookBox .flexBox .grids .gs .textbox .h2{ font-size: 1.375rem; font-weight: bold; color: #000; height: 70px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 10px; line-height: 1.6; }
.indexEbookBox .flexBox .grids .gs .textbox .h2 .ch{ font-size: 1em; color: inherit; line-height: inherit; font-weight: inherit; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.indexEbookBox .flexBox .grids .gs .textbox .h2 .en{ font-size: 1em; color:#636363; line-height: inherit; font-weight:normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.indexEbookBox .flexBox .grids .gs .textbox .h3{ font-size: 1.125rem; color: #fe4a49; font-weight: bold; margin-bottom: 5px; }
.indexEbookBox .flexBox .grids .gs .textbox .p{ font-size: 1.125rem; color: #392f5a; line-height: 1.6; }
.indexEbookBox .flexBox .grids .likebtn{ position: absolute; z-index: 5; right: 10px;  bottom: -12px; width: 32px; font-size: 0; }
.indexEbookBox .flexBox .grids .likebtn:after{ content: ""; display: block; width: 100%; padding-bottom: 118.75%; background-image: url(../images/index/likebtn.png); background-repeat: no-repeat; background-position: center; background-size: cover; }
.indexEbookBox .flexBox .grids .likebtn.hold:after{ background-image: url(../images/index/likebtn_s.png); }

.indexEbookBox .flexBox .grids .closeLikeBtn{ position: absolute; z-index: 5; background-color: #dcdcdc; line-height: 40px; border-radius: 10px; left: 20px; bottom: -20px; right: 0; margin: auto; text-align: center; font-size: 1.125rem; color: #000; }
.indexEbookBox .flexBox .grids .closeLikeBtn.hold{ background-color: #ff9016; color: #fff; }

.indexEbookBox .flexBox .grids .stateDiv{ position: absolute; top: 10px; z-index: 5; left: 25px; background-color: #fe4a49;  display: flex; align-items: center; padding: 5px 10px; border-radius: 0 50px 50px 0; }
.indexEbookBox .flexBox .grids .stateDiv .radius{ width: 8px; height: 8px; background-color: #fff; border-radius: 100%; margin-right: 5px; }
.indexEbookBox .flexBox .grids .stateDiv .txt{ color: #fff; font-size: 1rem; font-weight: bold; }

.indexEbookBox .flexBox.ebook .grids .gs .textbox .h2{ display: block; height:auto; }
.indexEbookBox .flexBox.ebook .grids .gs .textbox .h2 .ch{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display:block; }
.indexEbookBox .flexBox.ebook .grids .gs .textbox .h2 .en{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display:block; }

.indexEbookBox .flexBox.video{ margin-left: -36px; }
.indexEbookBox .flexBox.video .grids{ width: 33.3334%; padding:0 0 0 36px; }
.indexEbookBox .flexBox.video .grids .gs .imgs{ padding-bottom: 62.5352%; }
.indexEbookBox .flexBox.video .grids .closeLikeBtn{ left: 36px; }

.indexEbookBox .flexBox.video2{ margin-left: -36px; }
.indexEbookBox .flexBox.video2 .grids{ width: 33.3334%; padding:0 0 0 36px; }
.indexEbookBox .flexBox.video2 .grids .gs .imgs{ padding-bottom: 62.5352%; }
.indexEbookBox .flexBox.video2 .grids .closeLikeBtn{ left: 36px; }

.indexEbookBox .flexBox.taiwanese{ margin-left: -36px; }
.indexEbookBox .flexBox.taiwanese .grids{ width: 33.3334%; padding:0 0 0 36px; }
.indexEbookBox .flexBox.taiwanese .grids .gs .imgs{ padding-bottom: 62.5352%; }
.indexEbookBox .flexBox.taiwanese .grids .gs .textbox .p{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

.indexEbookBox .flexBox.activity{ grid-gap:30px 0; }
.indexEbookBox .flexBox.activity .grids .gs .imgs{ padding-bottom: 80%; }

.indexEbookBox .flexBox.weekly .grids .gs .imgs{ padding-bottom: 80%; }
.indexEbookBox .flexBox.weekly .grids .gs .textbox .h2{ height: auto; display:block;-webkit-box-orient:initial; }
.indexEbookBox .flexBox.weekly .grids .gs .textbox .p{ font-size: 1.375rem; color:#636363; display: block; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }

.indexEbookBox .flexBox.share{ margin-left: -60px; }
.indexEbookBox .flexBox.share .grids{ width: 33.3334%; padding: 0 0 0 60px; }
.indexEbookBox .flexBox.share .grids .gs{ border-radius: 40px; position: relative; }
.indexEbookBox .flexBox.share .grids .gs:before{ content: ""; display: block; z-index: 2; position:absolute; left: 0; right: 0; margin: auto; bottom: 0; height: 66%; background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(177,197,133,1) 70%,rgba(144,172,80,1) 100%); }
.indexEbookBox .flexBox.share .grids .gs:after{ content: ""; display: block; z-index: 3; position: absolute; right: 0; bottom: 0; width: 42%; aspect-ratio: 19 / 8; background-image: url(../images/index/share_bg.png); background-repeat: no-repeat; background-size: cover; background-position: center; }
.indexEbookBox .flexBox.share .grids .gs .imgs{ padding-bottom: 142.7778%; }
.indexEbookBox .flexBox.share .grids .gs .textbox{ z-index: 5; position: absolute; bottom: 20px; left: 0; width: 100%; padding: 0 20px; }
.indexEbookBox .flexBox.share .grids .gs .textbox .h2{ font-size: 1.875rem; height: 90px; margin: 0; }
.indexEbookBox .flexBox.share .grids .gs .textbox .p{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 78px; color: #000; }
.indexEbookBox .flexBox.share .grids .gs .textbox .p .bigFont{ font-size: 1.875rem; font-weight: inherit; color: inherit; }
.indexEbookBox .flexBox.share .grids .gs .textbox .p .jobs{ font-size: inherit; color: inherit; color: inherit; }

.indexEbookBox .flexBox.teach .grids{ width: 25%; }
.indexEbookBox .flexBox.teach .grids .gs .imgs{ padding-bottom: 62%; }
.indexEbookBox .flexBox.teach .grids .gs .textbox .h2{ display: block; height: auto; }
.indexEbookBox .flexBox.teach .grids .gs .textbox .h2 .en{ color: #636363; font-size: 1em; font-weight:normal; }

.indexEbookBox .flexBox.column{ flex-direction: column; margin: 0; }
.indexEbookBox .flexBox.column .grids{ width: 100%; padding: 0; }
.indexEbookBox .flexBox.column .grids .gs{ flex-direction: row; box-shadow:none; overflow:initial; }
.indexEbookBox .flexBox.column .grids .gs .imgs{ width: 31%; padding-bottom: 0; background-color: #fff; border-radius:15px ; box-shadow: 0 0 14px 5px rgba(0, 0, 0, 0.07); }
.indexEbookBox .flexBox.column .grids .gs .imgs:after{ content: ""; display: block; width: 100%; padding-bottom: 63.38%; }
.indexEbookBox .flexBox.column .grids .gs .textbox{ padding: 0 0 0 40px; }
.indexEbookBox .flexBox.column .grids .gs .textbox .h2{ height:auto; display: block; }

/*AD*/
.indexAdBox{ position: relative; }
.indexAdBox .arrow{ display: none; }
.indexAdBox .flexBox{ display: flex; margin-left: -10px; }
.indexAdBox .flexBox .grids{ padding: 0 0 0 10px; width: 33.33334%; }
.indexAdBox .flexBox .grids .gs{ display: block; width: 100%; position: relative; background-color: #eee; overflow: hidden; border-radius: 10px; box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.2); }
.indexAdBox .flexBox .grids .gs:after{ content: ""; display: block; width: 100%; padding-bottom: 40.56%; }
.indexAdBox .flexBox .grids .gs img{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }


/***************************************** Hover *****************************************/
@media screen and (min-width:1281px) {
header .ranges .menublock .headerBottom .menus .grids:hover .du,
header .ranges .menublock .headerBottom .menus .grids.hover .du{ display: block; }

/*小卡*/
.indexEbookBox .flexBox .grids .likebtn:hover{ opacity: 0.8; }

}

/***************************************** 平板 *****************************************/
@media screen and (min-width: 768px) and (max-width:1280px) {

    .topBtn{ width: 60px; height: 60px; font-size: 1.25rem; }
    
    /*header*/
    header{ padding: 10px 0; }
    header .ranges .logo{ position: static; margin: auto; }
    header .ranges .menublock{ display: none; width: 100%; height: 100dvh; position: fixed; top: 0; left: 0; background: #fff; z-index: 10; }
    header .ranges .menublock.open{ display: block; }
    header .ranges .menublock .menuClose{ display: block; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #231815; position: absolute; top: 10px; right: 10px; cursor: pointer; }
    header .ranges .menublock .menuClose:before{ content: ""; background-color: #231815; display: block; width: 2px; height: 60%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform: rotate(45deg); }
    header .ranges .menublock .menuClose:after{ content: ""; background-color: #231815; display: block; width: 2px; height: 60%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform: rotate(-45deg); }
    header .ranges .menublock .headerTop{ padding: 0; display: block; }
    header .ranges .menublock .headerTop .funLeft{ padding: 20px; }
    header .ranges .menublock .headerTop .funRight{ flex-direction: column; }
    header .ranges .menublock .headerTop .funRight .btnbox{ order:2; }
    header .ranges .menublock .headerTop .funRight .languageBox{ margin: 0 0 20px 0; order:1; }

    header .ranges .menublock .headerBottom .menus{ flex-direction: column; grid-gap:0; }
    header .ranges .menublock .headerBottom .menus .grids{ padding: 0 20px; flex-direction: column; }
    header .ranges .menublock .headerBottom .menus .grids:after{ margin: 0; left: auto; right: 20px; bottom: auto; top: 10px; }
    header .ranges .menublock .headerBottom .menus .grids .titles{ width: 100%; display: flex; align-items: baseline; border-bottom: 2px solid #90ac50; padding: 0 0 10px 0; margin: 0 0 10px 0; }
    header .ranges .menublock .headerBottom .menus .grids .titles .en{ margin-left: 20px; }
    header .ranges .menublock .headerBottom .menus .grids .titles .en br{ display: none; }

    
    header .ranges .menublock .headerBottom .menus .grids .du{ position: static; box-shadow:none; transform:none; }
    header .ranges .menublock .headerBottom .menus .grids.open .du{ display: block; }
    header .ranges .menublock .headerBottom .menus .grids .du .list{ border: none; padding: 0 0 10px 25px; position: relative; }
    header .ranges .menublock .headerBottom .menus .grids .du .list:after{ content: ""; display: block; width: 15px; height: 15px; background-image: url(../images/layout/icon_menu_list.svg); background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; top: 4px; left: 0; }
	

    header .ranges .menuBtn{ display: flex; flex-direction: column; justify-content: center; align-items: center; grid-gap:10px; position: absolute; background-color: #c7d5a7; border-radius: 10px; padding: 15px 20px; width: 72px; top: 50%; left: 20px; transform: translateY(-50%); cursor: pointer; border:0;}
    header .ranges .menuBtn span{ display: block; background-color: #222; width: 100%; height: 2px; }


    header .ranges .menublock .headerTop .funRight .searchPC{ display: none; }
    header .ranges .searchSpBox{ display: block; position: absolute; top:50%; right: 20px; transform: translateY(-50%); }
    header .ranges .searchSpBox .btn{ display: block;  width: 60px; height: 60px; border-radius: 10px; background-color: #90ac50; background-image: url(../images/layout/icon_search.svg); background-position: center; background-repeat: no-repeat; background-size: 30px; cursor: pointer; }
    header .ranges .searchSpBox .btn.close{ background-color: #aaa; background-image: url(../images/layout/icon_search_close.svg); }
    header .ranges .searchSp{ position: absolute; top: 80px; left: 0; background-color: #eee; width: 100%; padding: 20px; }
    header .ranges .searchSp.open{ display: block; }
    header .ranges .searchSp .flexs{ display: flex; grid-gap:15px; }
    header .ranges .searchSp .flexs .inputflex{ flex:1; }
    header .ranges .searchSp .flexs .btnflex .searchbtn{ font-size: 0; border: none; width: 48px; height: 48px; border-radius: 10px; background-color: #90ac50; background-image: url(../images/layout/icon_search.svg); background-position: center; background-repeat: no-repeat; background-size: 24px; cursor: pointer; }
    header .ranges .searchSp .input{ width: 100%; height: 48px; line-height: 48px; background-color: #fff; border: none; border-radius: 10px; font-size: 1.125rem; padding: 0 10px; }
    header .ranges .searchSp .labels{ position: absolute; z-index: -1; opacity: 0; }

    /*footer*/
    footer .footerTop{ grid-gap:15px 0; margin-left: -15px; }
    footer .footerTop .grids{ width: calc(33.3334% - 15px); }

    /*小卡*/
    .indexEbookBox .flexBox.video{ margin-left: -20px; }
    .indexEbookBox .flexBox.video .grids{ padding: 0 0 0 20px; }
    .indexEbookBox .flexBox.video .grids .closeLikeBtn{ left: 20px; }

    .indexEbookBox .flexBox.video2{ margin-left: -20px; }
    .indexEbookBox .flexBox.video2 .grids{ padding: 0 0 0 20px; }
    .indexEbookBox .flexBox.video2 .grids .closeLikeBtn{ left: 20px; }

    .indexEbookBox .flexBox.taiwanese{ margin-left: -20px; }
    .indexEbookBox .flexBox.taiwanese .grids{ padding: 0 0 0 20px; }
    .indexEbookBox .flexBox.taiwanese .grids .closeLikeBtn{ left: 20px; }

    .indexEbookBox .flexBox.activity{ flex-wrap: wrap; }
    .indexEbookBox .flexBox.activity .grids{ width: 50%; padding: 0 0 20px 20px; }
    .indexEbookBox .flexBox.weekly{ flex-wrap: wrap; }
    .indexEbookBox .flexBox.weekly .grids{ width: 50%; padding: 0 0 20px 20px; }

    .indexEbookBox .flexBox.share{ margin-left: -30px; }
    .indexEbookBox .flexBox.share .grids{ padding-left: 30px; }
    .indexEbookBox .flexBox.share .grids .gs{ border-radius: 20px; }
    .indexEbookBox .flexBox.share .grids .gs .textbox .h2{ font-size: 1.5rem; height: 76px; }
    .indexEbookBox .flexBox.share .grids .gs .textbox .p{ font-size: 1rem; height: 66px; }
    .indexEbookBox .flexBox.share .grids .gs .textbox .p .bigFont{ font-size: 1.5rem; }

    .indexEbookBox .flexBox.teach .grids{ width: 33.3334%; }
}

/***************************************** 手機版 *****************************************/
@media screen and (max-width:767px) {
    .rightBtnBox{ padding:10px 80px 5px 10px; flex-direction: row; left:20px; right:20px; bottom:0;}
	.rightBtnBox .rightBtn{ flex:1; font-size:0;}
	.rightBtnBox .rightBtn img{ width:30px;}
	.topBtn{ width: 52px; height: 52px; font-size: 1rem; right: 40px; bottom: 10px; }

    p{ font-size: 1rem; }

    .pt-0-sp{ padding-top: 0px !important; }
    .pt-10-sp{ padding-top: 10px !important; }
    .pt-20-sp{ padding-top: 20px !important; }
    .pt-30-sp{ padding-top: 30px !important; }
    .pt-40-sp{ padding-top: 40px !important; }
    .pt-50-sp{ padding-top: 50px !important; }
    .pt-60-sp{ padding-top: 60px !important; }
    .pt-70-sp{ padding-top: 70px !important; }
    .pt-80-sp{ padding-top: 80px !important; }
    .pt-90-sp{ padding-top: 90px !important; }
    .pt-100-sp{ padding-top: 100px !important; }

    .pb-0-sp{ padding-bottom: 0px !important; }
    .pb-10-sp{ padding-bottom: 10px !important; }
    .pb-20-sp{ padding-bottom: 20px !important; }
    .pb-30-sp{ padding-bottom: 30px !important; }
    .pb-40-sp{ padding-bottom: 40px !important; }
    .pb-50-sp{ padding-bottom: 50px !important; }
    .pb-60-sp{ padding-bottom: 60px !important; }
    .pb-70-sp{ padding-bottom: 70px !important; }
    .pb-80-sp{ padding-bottom: 80px !important; }
    .pb-90-sp{ padding-bottom: 90px !important; }
    .pb-100-sp{ padding-bottom: 100px !important; }

    .pl-0-sp{ padding-left: 0px !important; }
    .pl-10-sp{ padding-left: 10px !important; }
    .pl-20-sp{ padding-left: 20px !important; }
    .pl-30-sp{ padding-left: 30px !important; }
    .pl-40-sp{ padding-left: 40px !important; }
    .pl-50-sp{ padding-left: 50px !important; }
    .pl-60-sp{ padding-left: 60px !important; }
    .pl-70-sp{ padding-left: 70px !important; }
    .pl-80-sp{ padding-left: 80px !important; }
    .pl-90-sp{ padding-left: 90px !important; }
    .pl-100-sp{ padding-left: 100px !important; }

    .pr-0-sp{ padding-right: 0px !important; }
    .pr-10-sp{ padding-right: 10px !important; }
    .pr-20-sp{ padding-right: 20px !important; }
    .pr-30-sp{ padding-right: 30px !important; }
    .pr-40-sp{ padding-right: 40px !important; }
    .pr-50-sp{ padding-right: 50px !important; }
    .pr-60-sp{ padding-right: 60px !important; }
    .pr-70-sp{ padding-right: 70px !important; }
    .pr-80-sp{ padding-right: 80px !important; }
    .pr-90-sp{ padding-right: 90px !important; }
    .pr-100-sp{ padding-right: 100px !important; }

    .mobile_none{ display: none !important; }

    /*header*/
    header{ padding: 10px 0; }
    header .ranges .logo{ position: static; margin: auto; width: 120px; }
    header .ranges .menublock{ display: none; width: 100%; height: 100dvh; position: fixed; top: 0; left: 0; background: #fff; z-index: 10; overflow: auto; }
    header .ranges .menublock.open{ display: block; }
    header .ranges .menublock .menuClose{ display: block; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #231815; position: absolute; top: 10px; right: 10px; cursor: pointer; }
    header .ranges .menublock .menuClose:before{ content: ""; background-color: #231815; display: block; width: 2px; height: 60%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform: rotate(45deg); }
    header .ranges .menublock .menuClose:after{ content: ""; background-color: #231815; display: block; width: 2px; height: 60%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform: rotate(-45deg); }
    header .ranges .menublock .headerTop{ padding: 0; display: block; }
    header .ranges .menublock .headerTop .funLeft{ padding: 10px; grid-gap: 10px; }
    header .ranges .menublock .headerTop .funLeft .linkGrid .icon{ width: 14px; }
    header .ranges .menublock .headerTop .funLeft .linkGrid .txt{ font-size: 0.9rem; }
    header .ranges .menublock .headerTop .funRight{ flex-direction: column; padding: 15px 10px; }
    header .ranges .menublock .headerTop .funRight .btnbox{ order:2; width: 100%; }
    header .ranges .menublock .headerTop .funRight .btnbox .txtBtn{ flex:1; font-size: 1.125rem; padding: 5px 10px; }
    header .ranges .menublock .headerTop .funRight .btnbox .txtBtn br{ display: none; }
    header .ranges .menublock .headerTop .funRight .btnbox .txtBtn .en{ font-size: 1rem; }
    header .ranges .menublock .headerTop .funRight .languageBox{ margin: 0 0 20px 0; order:1; }
    header .ranges .menublock .headerTop .funRight .languageBox .grids:nth-child(1){ font-size: 1.25rem; }
    header .ranges .menublock .headerTop .funRight .languageBox .grids:nth-child(2){ font-size: 1.125rem; }
    header .ranges .menublock .headerTop .funRight .languageBox .grids:nth-child(3){ font-size: 1rem; }

    header .ranges .menublock .headerBottom .menus{ flex-direction: column; grid-gap:0; }
    header .ranges .menublock .headerBottom .menus .grids{ padding: 0 10px; flex-direction: column; }
    header .ranges .menublock .headerBottom .menus .grids:after{ width: 12px; height: 12px; margin: 0; left: auto; right: 20px; bottom: auto; top: 10px; }
    header .ranges .menublock .headerBottom .menus .grids .titles{ width: 100%; display: flex; align-items: baseline; border-bottom: 2px solid #90ac50; padding: 0 0 10px 0; margin: 0 0 10px 0; }
    header .ranges .menublock .headerBottom .menus .grids .titles .ch{ font-size: 1.125rem; }
    header .ranges .menublock .headerBottom .menus .grids .titles .en{ margin-left: 10px; font-size: 0.75rem;  }
    header .ranges .menublock .headerBottom .menus .grids .titles .en br{ display: none; }

    
    header .ranges .menublock .headerBottom .menus .grids .du{ position: static; box-shadow:none; transform:none; }
    header .ranges .menublock .headerBottom .menus .grids.open .du{ display: block; }
    header .ranges .menublock .headerBottom .menus .grids .du .list{ border: none; padding: 0 0 10px 15px; position: relative; font-size: 1rem;  }
    header .ranges .menublock .headerBottom .menus .grids .du .list:after{ content: ""; display: block; width: 10px; height: 10px; background-image: url(../images/layout/icon_menu_list.svg); background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; top: 6px; left: 0; }


    header .ranges .menuBtn{ display: flex; flex-direction: column; justify-content: center; align-items: center; grid-gap:5px; position: absolute; background-color: #c7d5a7; border-radius: 5px; padding: 8px 12px; width: 40px; top: 50%; left: 20px; transform: translateY(-50%); cursor: pointer; border:0; }
    header .ranges .menuBtn span{ display: block; background-color: #222; width: 100%; height: 2px; }


    header .ranges .menublock .headerTop .funRight .searchPC{ display: none; }
    header .ranges .searchSpBox{ display: block; position: absolute; top:50%; right: 20px; transform: translateY(-50%); }
    header .ranges .searchSpBox .btn{ display: block;  width: 36px; height: 36px; border-radius: 5px; background-color: #90ac50; background-image: url(../images/layout/icon_search.svg); background-position: center; background-repeat: no-repeat; background-size: 18px; cursor: pointer; }
    header .ranges .searchSpBox .btn.close{ background-color: #aaa; background-image: url(../images/layout/icon_search_close.svg); }
    header .ranges .searchSp{ position: absolute; top: 60px; left: 0; background-color: #eee; width: 100%; padding: 10px; }
    header .ranges .searchSp.open{ display: block; }
    header .ranges .searchSp .flexs{ display: flex; grid-gap:15px; }
    header .ranges .searchSp .flexs .inputflex{ flex:1; }
    header .ranges .searchSp .flexs .btnflex .searchbtn{ font-size: 0; border: none; width: 30px; height: 30px; border-radius: 5px; background-color: #90ac50; background-image: url(../images/layout/icon_search.svg); background-position: center; background-repeat: no-repeat; background-size: 15px; cursor: pointer; }
    header .ranges .searchSp .input{ width: 100%; height: 30px; line-height: 30px; background-color: #fff; border: none; border-radius: 5px; font-size: 1.125rem; padding: 0 10px; }
    header .ranges .searchSp .labels{ position: absolute; z-index: -1; opacity: 0; }

    /*footer*/
    footer:after{ display: none; }
    footer .footerTop{ grid-gap:15px 0; margin-left: -15px; }
    footer .footerTop .grids{ width: calc(33.33334% - 15px); margin-left: 15px; padding-top:10px; }
    footer .footerTop .grids .ch{ font-size: 0.875rem; }
    footer .footerTop .grids .en{ font-size: 0.75rem; }

    footer .footerBottom{ flex-direction: column; grid-gap: 10px; padding: 30px 10px; }
    footer .footerBottom .logo{ width: 198px; }
    footer .footerBottom p{ font-size: 0.875rem; }
    footer .footerBottom .dataContent .disFlex .icon{ width: 18px; margin-top: 3px; }
    footer .footerBottom .linkbox{ max-width: none; width: 100%; }
    footer .footerBottom .linkbox img{ width: 80%; max-width: 280px; }

    /*小卡*/
    .indexEbookBox.sp{ display:block; }
    .indexEbookBox.pc{ display:none; }

    .indexEbookBox .arrowbtns{ width: 24px; height: 24px; border-radius: 5px; }
    .indexEbookBox .arrowbtns.left{ left: -45px; }
    .indexEbookBox .arrowbtns.right{ right: -45px; }

    .indexEbookBox .flexBox{ flex-wrap: wrap; margin-left: -10px; }
    .indexEbookBox .flexBox .grids{ width: 47%; padding: 0 0 0 10px; margin: 30px 3px 0px 3px; }
    .indexEbookBox .flexBox .grids .gs{ border-radius: 5px; box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.07); }
    .indexEbookBox .flexBox .grids .gs .textbox .h2{ font-size: 1rem; height: auto; }
    .indexEbookBox .flexBox .grids .gs .textbox .h3{ font-size: 0.875rem; }
    .indexEbookBox .flexBox .grids .gs .textbox .p{ font-size: 0.875rem; }

    .indexEbookBox .flexBox .grids .gs .imgs .pc{ display: none; }
    .indexEbookBox .flexBox .grids .gs .imgs .sp{ display: block; }

    .indexEbookBox .flexBox .grids .likebtn{ right: 15px; bottom: -10px; width: 25px; }
    .indexEbookBox .flexBox .grids .closeLikeBtn{ background:none; border-radius:0; left: auto; line-height: normal; right: 15px; bottom: -10px; width: 25px; font-size: 0; }
    .indexEbookBox .flexBox .grids .closeLikeBtn:after{ content: ""; display: block; width: 100%; padding-bottom: 118.75%; background-image: url(../images/index/likebtn.png); background-repeat: no-repeat; background-position: center; background-size: cover; }
    .indexEbookBox .flexBox .grids .closeLikeBtn.hold{ background: none; }
    .indexEbookBox .flexBox .grids .closeLikeBtn.hold:after{ background-image: url(../images/index/likebtn_s.png); }

    .indexEbookBox .flexBox .grids .stateDiv{ left: 0; }
    .indexEbookBox .flexBox .grids .stateDiv .txt{ font-size: 0.875rem; }
    .indexEbookBox .flexBox .grids .stateDiv .radius{ width: 6px; height: 6px; }

    .indexEbookBox .flexBox.ebook .grids .gs .textbox .h2 .ch{ overflow: initial; white-space: normal; }
    .indexEbookBox .flexBox.ebook .grids .gs .textbox .h2 .en{ display: none; }

    .indexEbookBox .flexBox.four .grids:nth-child(-n+2){ margin-top: 0; }

    .indexEbookBox .flexBox.video{ margin: 0; }
    .indexEbookBox .flexBox.video .grids{ width: 100%; padding: 0; margin-bottom: 30px; }
    .indexEbookBox .flexBox.video .grids:last-child{ margin-bottom: 0; }
    .indexEbookBox .flexBox.video .grids .closeLikeBtn{ left: auto; }

    .indexEbookBox .flexBox.video2{ margin-left: 0; }
    .indexEbookBox .flexBox.video2 .grids{ width: 100%; padding: 0; }
    .indexEbookBox .flexBox.video2 .grids:last-child{ margin-bottom: 0; }
    .indexEbookBox .flexBox.video2 .grids .gs{ flex-direction: row; background: none; box-shadow: none; }
    .indexEbookBox .flexBox.video2 .grids .gs .imgs{ padding: 0; width: 46%; }
    .indexEbookBox .flexBox.video2 .grids .gs .imgs:after{ content: ""; display: block; width: 100%; padding-bottom: 62%; }
    .indexEbookBox .flexBox.video2 .grids .gs .textbox{ padding: 10px; display: flex; flex-direction: column; justify-content: space-between; }
    .indexEbookBox .flexBox.video2 .grids .likebtn{ right: 0; bottom: -20px; }

    .indexEbookBox .flexBox.taiwanese{ margin: 0 0 0 -15px; }
    .indexEbookBox .flexBox.taiwanese .grids{ width: 50%; padding: 0 0 0 15px; margin: 0; }
    .indexEbookBox .flexBox.taiwanese .grids .gs .textbox .h2{ height: auto; display: block; }
    .indexEbookBox .flexBox.taiwanese .grids .pText{ display: none; }
    .indexEbookBox .flexBox.taiwanese .grids .closeLikeBtn{ left: auto; }

    .indexEbookBox .flexBox.activity{ margin: 0; grid-gap:0; }
    .indexEbookBox .flexBox.activity .grids{ width: 100%; padding: 0 0 20px 0; margin: 0; }
    .indexEbookBox .flexBox.activity .grids:last-child{ padding-bottom: 0; }
    .indexEbookBox .flexBox.activity .grids:nth-child(4){ display: none; }
    .indexEbookBox .flexBox.activity .grids .gs{ flex-direction: row; background: none; box-shadow:none; border-radius: 0; align-items: flex-start; }
    .indexEbookBox .flexBox.activity .grids .gs .imgs{ width: 46%; padding-bottom: 0; border-radius: 10px; }
    .indexEbookBox .flexBox.activity .grids .gs .imgs img{ max-height: none; }
    .indexEbookBox .flexBox.activity .grids .gs .imgs:after{ content: ""; display: block; width: 100%; padding-bottom: 54.2168%; }
    .indexEbookBox .flexBox.activity .grids .gs .textbox{ padding: 0 0 0 10px; }
    .indexEbookBox .flexBox.activity .grids .gs .textbox .h2{ margin-bottom: 0; }
    .indexEbookBox .flexBox.activity-normal .grids:nth-child(4){ display: flex; }


    .indexEbookBox .flexBox.weekly{ margin: 0; }
    .indexEbookBox .flexBox.weekly .grids{ width: 100%; padding: 0 0 20px 0; margin: 0; }
    .indexEbookBox .flexBox.weekly .grids:nth-child(4){ display: none; }
    .indexEbookBox .flexBox.weekly .grids .gs{ flex-direction: row; background: none; box-shadow:none; border-radius: 0; align-items: flex-start; }
    .indexEbookBox .flexBox.weekly .grids .gs .imgs{ width: 46%; padding-bottom: 0; border-radius: 10px; }
    .indexEbookBox .flexBox.weekly .grids .gs .imgs img{ max-height: none; }
    .indexEbookBox .flexBox.weekly .grids .gs .imgs:after{ content: ""; display: block; width: 100%; padding-bottom: 54.2168%; }
    .indexEbookBox .flexBox.weekly .grids .gs .textbox{ padding: 0 0 0 10px; }
    .indexEbookBox .flexBox.weekly .grids .gs .textbox .h2{ margin-bottom: 0; }
    .indexEbookBox .flexBox.weekly .grids .gs .textbox .p{ font-size: 1rem; }

    .indexEbookBox .flexBox.share{ margin-left: -10px; }
    .indexEbookBox .flexBox.share .grids{ width: 50%; padding-left: 10px; margin-bottom: 0; }
    .indexEbookBox .flexBox.share .grids .gs{ border-radius: 10px; }
    .indexEbookBox .flexBox.share .grids .gs .imgs{ padding-bottom: 153.602%; }
    .indexEbookBox .flexBox.share .grids .gs .textbox{ padding: 0 10px; bottom: 10px; }
    .indexEbookBox .flexBox.share .grids .gs .textbox .h2{ font-size: 1rem; height: 50px; }
    .indexEbookBox .flexBox.share .grids .gs .textbox .p{ font-size: 0.875rem; height: 46px; }
    .indexEbookBox .flexBox.share .grids .gs .textbox .p .bigFont{ font-size: 1em; }
    .indexEbookBox .flexBox.share .grids .gs .textbox .p .jobs{ display: none; }

    .indexEbookBox .flexBox.teach .grids{ width: 100%; }
    .indexEbookBox .flexBox.teach .grids:last-child{ margin-bottom: 0; }
    .indexEbookBox .flexBox.teach .grids .gs{ flex-direction: row; background: none; box-shadow: none; }
    .indexEbookBox .flexBox.teach .grids .gs .imgs{ padding: 0; width: 46%; }
    .indexEbookBox .flexBox.teach .grids .gs .imgs:after{ content: ""; display: block; width: 100%; padding-bottom: 62%; }
    .indexEbookBox .flexBox.teach .grids .gs .textbox{ padding: 10px; display: flex; flex-direction: column; justify-content: space-between; }
    .indexEbookBox .flexBox.teach .grids .likebtn{ right: 0; bottom: -20px; }

    .indexEbookBox .flexBox.column .grids:last-child{ margin: 0; }
    .indexEbookBox .flexBox.column .grids .gs{ flex-direction: column; }
    .indexEbookBox .flexBox.column .grids .gs .imgs{ width: 100%; border-radius: 10px; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.07); }
    .indexEbookBox .flexBox.column .grids .gs .textbox{ padding: 15px 0 0 0; }

    /*AD*/
    .indexAdBox{ padding: 0 30px; }
    .indexAdBox .arrow{ display: block; position: absolute; top: 50%; transform: translateY(-50%); font-size: 0; }
    .indexAdBox .arrow.right{ right: 0; }
    .indexAdBox .arrow.right:after{ content: ""; display: block; width: 0; height: 0; border-color: transparent  transparent transparent #009fb7; border-width: 7px 0 7px 12px; border-style: solid; }
    .indexAdBox .arrow.left{ left: 0; }
    .indexAdBox .arrow.left:after{ content: ""; display: block; width: 0; height: 0; border-color: transparent #009fb7  transparent transparent ; border-width: 7px 12px 7px 0; border-style: solid; }

    .indexAdBox .flexBox .grids .gs{ border-radius: 5px; }
}
@media screen and (max-width:220px) {
    .indexEbookBox .flexBox .grids{ width:100%;}
}

/*輪播 補正*/
.slick-list{ flex: 1; }

/* 線上教學分享會 */
.indexEbookBox .flexBox.share.slick-initialized{ display: block; }
@media screen and ( min-width: 1280px ) {
    .indexEbookBox .flexBox.share.slick-initialized{ margin: 0 -30px; padding-right: 30px; }
}

@media screen and ( min-width: 768px ) {
    .indexEbookBox .flexBox.share.slick-initialized{ margin: -30px; }
    .indexEbookBox .flexBox.share.slick-initialized .slick-list{ padding: 30px 30px 30px 0px; }
    .indexEbookBox .flexBox.share.slick-initialized .grids{ opacity: 0.2; }
    .indexEbookBox .flexBox.share.slick-initialized .grids.slick-active{ opacity: 1; }
}

/* 頁內影音分享 */
.indexEbookBox .flexBox.video2.slick-initialized{ display: block; justify-content: center; }
.indexEbookBox .flexBox.video2.slick-initialized .slick-list{ padding: 10px; }
.indexEbookBox .flexBox.video2.slick-initialized .slick-list .gridsWrapper{ }
.indexEbookBox .flexBox.video2.slick-initialized .slick-list .gridsWrapper .grids{ transition: opacity 0.5s; opacity: 0.2; width: 100%; padding: 10px; }
.indexEbookBox .flexBox.video2.slick-initialized .slick-list .gridsWrapper.slick-active .grids{ opacity: 1; }
@media screen and ( min-width: 1280px ) {    
    .indexEbookBox .flexBox.video2.slick-initialized{ margin: -20px -28px; }
    .indexEbookBox .flexBox.video2.slick-initialized .slick-list .gridsWrapper .grids{ padding: 10px 18px; }
    .indexEbookBox .flexBox.video2.slick-initialized .grids .likebtn{ right: 28px; bottom: -2px; }
    .indexEbookBox .flexBox.video2.slick-initialized .grids .stateDiv{ top: 20px; left: 7px; }
}

@media screen and ( min-width: 768px ) {
    .indexEbookBox .flexBox.slick-initialized .grids .stateDiv{ opacity: 0; top: 20px; left: 0; }
    .indexEbookBox .flexBox.slick-initialized .slick-list .gridsWrapper.slick-active .grids .stateDiv{ opacity: 1; }
}


/* 僑學園地 - 熱門貼文 */
.indexEbookBox .flexBox.taiwanese.slick-initialized{ margin: -15px -15px -15px -20px; }
.indexEbookBox .flexBox.taiwanese.slick-initialized .slick-list{ padding: 15px 15px 15px 0px; }
.indexEbookBox .flexBox.taiwanese.slick-initialized .slick-list .grids{ transition: opacity 0.5s; opacity: 0.2; }
.indexEbookBox .flexBox.taiwanese.slick-initialized .slick-list .grids.slick-active{ opacity: 1; }
@media screen and (max-width:767px) {
    .indexEbookBox .flexBox.taiwanese.slick-initialized{ margin: -15px -15px -15px -15px; }
}

/* 僑學園地 - 熱門貼文 */
.indexEbookBox .flexBox.activity.slick-initialized{ margin: -15px -15px -15px -35px; }
.indexEbookBox .flexBox.activity.slick-initialized .slick-list{ padding: 15px 15px 15px 0px; }
.indexEbookBox .flexBox.activity.slick-initialized .slick-list .grids{ transition: opacity 0.5s; opacity: 0.2; }
.indexEbookBox .flexBox.activity.slick-initialized .slick-list .grids.slick-active{ opacity: 1; }

/* 通用廣告 效果補正 */
.indexAdBox .flexBox.slick-initialized{ display: block; margin: -30px -13px -5px; padding: /*15*/0px 0 0px; }
.indexAdBox .flexBox.slick-initialized .gridsWrapper{}
.indexAdBox .flexBox.slick-initialized .gridsWrapper .grids{ padding: 20px 15px; width: 100%; }

/* 下方相關連結 效果補正 */
.aboutLink .flexBox.slick-initialized{ display: block; margin: -5px -2.5px -5px -25px; }
.aboutLink .flexBox.slick-initialized .slick-list{ padding: 5px 5px 5px 0px; }
.aboutLink .flexBox.slick-initialized .grids{}
@media screen and (max-width:767px) {
    .aboutLink .flexBox.slick-initialized{ margin: -5px -2.5px -5px -10px; }
}

/*******統一調整為背景設置*******/
.imgs{ background-size: cover; background-position: center; background-repeat: no-repeat; }

/*******Ebook行數限制設定*******/
.indexEbookBox .flexBox.ebook .grids .gs .textbox .h2 .ch.text-line-clamp-1,
.indexEbookBox .flexBox.ebook .grids .gs .textbox .h2 .en.text-line-clamp-1{ }
.indexEbookBox .flexBox.ebook .grids .gs .textbox .h2 .ch.text-line-clamp-2,
.indexEbookBox .flexBox.ebook .grids .gs .textbox .h2 .en.text-line-clamp-2{ }
.indexEbookBox .flexBox.ebook .grids .gs .textbox .h2 .ch.text-line-clamp-3,
.indexEbookBox .flexBox.ebook .grids .gs .textbox .h2 .en.text-line-clamp-3{ }

.text-multiline-ellipsis{ display: -webkit-box !important; -webkit-box-orient: vertical; overflow: hidden; white-space: unset !important; }
.text-line-clamp-1{ line-clamp: 1 !important; -webkit-line-clamp: 1 !important; }
.text-line-clamp-2{ line-clamp: 2 !important; -webkit-line-clamp: 2 !important; }
.text-line-clamp-3{ line-clamp: 3 !important; -webkit-line-clamp: 3 !important; }

/*******Slick等高延展*******/
.slick-track{ display: flex !important; }
.slick-slide{ height: inherit !important; }
.slick-slide .grids{ height: 100%; }