.padding-top {
    margin-top: 228px;
}
.banner{ margin-top: 218px; height: 280px; display: flex; justify-content: center; align-items: center; background-color: #e9eedc; position: relative; overflow: hidden; }
.banner .bg01{ max-width:428px; width: 22.2916%; position: absolute; z-index: 1; top: 0; left: 0; }
.banner .bg01:after{ content: ""; display: block; width: 100%; padding-bottom: 53.9719%; background-image: url(../images/page/banner_bg01.png); background-position: center; background-repeat: no-repeat; background-size: cover; }
.banner .bg02{ max-width:563px; width: 29.3329%; position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; margin: auto; }
.banner .bg02:after{ content: ""; display: block; width: 100%; height: 100%; background-image: url(../images/page/banner_bg02.png); background-position: center bottom; background-repeat: no-repeat; background-size:100%; }
.banner .textbox{ position: relative; z-index: 5; padding: 0 20px; }
.banner .textbox .ch{ font-size: 3.75rem; font-weight: bold; color: #000; text-align: center; }
.banner .textbox .en{ font-size: 1.5rem; color: #636363; text-align: center; }
.banner .textbox nav{ padding: 10px 0; border-top: 1px solid #90ac50; border-bottom: 1px solid #90ac50; min-width:228px; text-align: center; margin-top: 15px; }
.banner .textbox nav a,.banner .textbox nav span{ color:#6c6c6c; font-size: 0.875rem; margin-right: 5px; }
.banner .textbox nav a:after,.banner .textbox nav span:after{ content: ">"; font-size: inherit; color: inherit; font-weight: inherit; margin-left: 5px; }
.banner .textbox nav a:last-child,.banner .textbox nav span:last-child{ color: #90ac50; }
.banner .textbox nav a:last-child:after,.banner .textbox nav span:last-child:after{ display: none; }

.banner.blue{ background-color: #d4eafa; }
.banner.blue .bg01{ max-width: 594px; width: 30.9375%; height: 100%; }
.banner.blue .bg01:after{ padding-bottom:0; width: 100%; height: 100%; margin: auto; background-image: url(../images/page/banner_bg03.png); }
.banner.blue .bg02{ width: 44.1%; max-width: 848px; }
.banner.blue .bg02:after{ background-image: url(../images/page/banner_bg04.png); }

/*共用*/
main{ padding: 30px 0 100px 0; }

.centerBlock{ max-width: 1200px; margin: auto; padding: 0 30px; }

.h2Title{ margin-bottom: 30px; text-align: center; }
.h2Title .ch{ font-size: 1.875rem; color: #000; font-weight: bold; }
.h2Title .en{ font-size: 1.5rem; color: #636363; }

.titleBtnBlock{ position: relative; }
.titleBtnBlock .rightBtn{ position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: flex; grid-gap:0 10px; }
.titleBtnBlock .rightBtn .btns{ display: flex; background: #90ac50; border-radius: 5px; padding: 5px 20px; align-items: center; }
.titleBtnBlock .rightBtn .btns .txt{ font-size: 1.5rem; color: #fff; font-weight: bold; }
.titleBtnBlock .rightBtn .btns .icon{ width: 37px; height: 37px; margin-right: 10px; background-repeat: no-repeat; background-position: center; background-size: cover;  }
.titleBtnBlock .rightBtn .btns.i01 .icon{ background-image: url(../images/page/btn_icon01.png); }
.titleBtnBlock .rightBtn .btns.i02 .icon{ background-image: url(../images/page/btn_icon02.png); }


/*頁碼*/
.pageNumberBox{ display: flex; align-items: center; justify-content: center; grid-gap:0 10px; }
.pageNumberBox span,.pageNumberBox a{ display: block; width: 50px; height: 50px; border-radius: 100%; border: 1px solid #2896e8; font-size: 1.375rem; line-height: 48px; text-align: center; }
.pageNumberBox span{ background-color: #2896e8; color: #fff; }
.pageNumberBox a{ color: #2896e8; }
.pageNumberBox .arrow{ width: 30px; height: 30px; background-color: #fff; border: none; border-radius:5px; background-position: center; background-repeat: no-repeat; background-size: 12px; font-size: 0; box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.2); }
.pageNumberBox .arrow.left{ background-image: url(../images/page/number_left.png); margin-right: 10px; }
.pageNumberBox .arrow.right{ background-image: url(../images/page/number_right.png); margin-left: 10px; }
.textboxHideBox .openBtn{ display:none;}

/*******會員*******/
.member_ex{ padding: 20px 30px 10px 30px; display: flex; align-items: flex-start; background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(225,248,251,1) 60%); border-radius: 40px; }
.member_ex .imgs{ width: 16%; font-size: 0; }
.member_ex .textbox{ flex:1; padding: 0 0 0 30px; font-size: 1.125rem; color: #636363; line-height: 1.6; }
.member_ex .textbox a{ font-size: inherit; color: #009fb7; }
.member_ex .textbox .important{ font-size: inherit; color: #009fb7; }
.member_ex .textbox .bigFont{ text-align: right; font-size: 4.125rem; font-weight: bold; color: #009fb7; opacity: 0.5; }
.member_ex.green{ background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(233,238,220,1) 60%); }
.member_ex.green .textbox .bigFont{ color: #90ac50; }
.member_ex .textbox .textboxHideBox{ font: inherit; /*-webkit-line-clamp: 4; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;*/}
.textboxHideBox{ position: relative; border-bottom: 2px solid #009fb7; padding-bottom:10px; }
.textboxHideBox:after{ content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; height: 50px; z-index: 9; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(185,229,235,1) 100%); }
.textboxHideBox .openBtn{ position: absolute; z-index: 10; left: 0; right: 0; bottom: -32px; margin: auto; width: 42px; height: 42px; background-color: #009fb7; border-radius: 100%; display: flex; justify-content: center; align-items: center; }
.textboxHideBox .openBtn .openText{ display: flex; flex-direction: column; align-items: center; }
.textboxHideBox .openBtn .openText .arrow{ width: 0; height: 0; border-style: solid; border-width:7px 4px 0 4px; border-color: #fff transparent transparent transparent; }
.textboxHideBox .openBtn .openText .txt{ font-size: 0; color: #fff; font-weight: bold; padding: 2px 0 0 0; }
.textboxHideBox .openBtn .openText .txt:after{ content: "展開"; font-size: 0.875rem; }
.textboxHideBox .openBtn.open .openText .arrow{ border-width:0 4px 7px 4px; border-color: transparent transparent #fff transparent; }
.textboxHideBox .openBtn.open .openText .txt:after{ content: "收合"; }
	
.textboxHideBox .rangeBlock{ max-height: 200px; overflow: hidden; }
.textboxHideBox .rangeBlock .hideContent{ padding: 0 0 50px 0; }
	
.textboxHideBox.open{ margin-bottom: 100px; padding-bottom:50px; }
/*.textboxHideBox.open:after{ display: none; }*/
.textboxHideBox.open .rangeBlock{ max-height: unset; overflow: unset; }
.textboxHideBox .rangeBlock .hideContent{ padding: unset; }
.textboxHideBox.Fixed{ border:0;}
.textboxHideBox.Fixed .rangeBlock{ max-height:none;}
.textboxHideBox.Fixed .openBtn{ display:none;}
.textboxHideBox.Fixed:after{ display:none;}

.memberLogin{ max-width: 952px; margin: auto; }
.memberForm{ width: 100%; }
.memberForm.line{ padding: 40px 0 70px 0; border-top: 2px solid #009fb7; border-bottom: 0px solid #009fb7;  }
.memberForm .formBox .inputList .title{ width: 160px; }
.memberForm .formBox .inputList .title.wht{ width: 315px; }
.memberForm .formBox .inputList .title .platform{ display: flex; align-items: center; }
.memberForm .formBox .inputList .title .platform .icon{ width: 50px; }
.memberForm .formBox .inputList .title .platform .textbox{ flex:1; padding-left: 10px; text-align: left; }
.memberForm .formBox .inputList .title .platform .textbox.blue .ch{ color: #009fb7; }
.memberForm .formBox .inputList .title .platform .textbox.blue .en{ color: #009fb7; }
.memberForm .formBox .inputList .title .platform .textbox.green .ch{ color: #5b6d32; }
.memberForm .formBox .inputList .title .platform .textbox.green .en{ color: #5b6d32; }

.formBox .inputList{ margin: 0 0 30px 0; position: relative; display: flex; }
.formBox .inputList.alignCenter{ align-items: center; }
.formBox .inputList.alignCenter .title{ transform: none; }
.formBox .inputList .title{ text-align: right; width: 62px; transform: translateY(-5px); }
.formBox .inputList .title .ch{ font-size: 1.125rem; color: #191919; font-weight: bold;}
.formBox .inputList .title .en{ font-size: 1.125rem; color: #191919;}
.formBox .inputList .title .live{ color: #009fb7; font-weight: bold; }

.formBox .inputList .contentDiv{ flex:1; padding: 0 0 0 20px; }
.formBox .inputList .contentDiv .flexBox{ display: flex; flex-wrap: wrap; align-items: center; margin-left: -20px; grid-gap:10px 0; margin-bottom: 20px; }
.formBox .inputList .contentDiv .flexBox.alignBaseline{ align-items: baseline; }
.formBox .inputList .contentDiv .flexBox:last-child{ margin-bottom: 0; }
.formBox .inputList .contentDiv .grids{ padding: 0 0 0 20px; }
.formBox .inputList .contentDiv .grids.wt-100{ width: 100%; }
.formBox .inputList .contentDiv .grids.wt-50{ width: 50%; }
.formBox .inputList .contentDiv .grids.wt-140px{ width: 140px; }
.formBox .inputList .contentDiv .grids.wt-210px{ width: 210px; }
.formBox .inputList .contentDiv .grids.wt-270px{ width: 270px; }
.formBox .inputList .contentDiv .grids.wt-310px{ width: 310px; }
.formBox .inputList .contentDiv .grids.wt-500px{ width: 500px; }
.formBox .inputList .contentDiv .grids.flexFill{ flex:1; }
.formBox .inputList .contentDiv .grids .purelyTxt{ font-size: 1.125rem; color: #009fb7; line-height: 1.6; }
.formBox .inputList .contentDiv .grids .textEdit{ border: 2px solid #e6e6e6; border-radius: 5px; width: 100%; height: 450px; }
.formBox .inputList .inputs{ width: 100%; background-color: #fff; border: 2px solid #e6e6e6; border-radius: 5px; font-size: 1rem; line-height: 36px; height: 36px; padding: 0 5px; }
.formBox .inputList .textarea{ width: 100%; background-color: #fff; border: 2px solid #e6e6e6; border-radius: 5px; font-size: 1rem; line-height: 36px; height: 300px; resize:none; }
.formBox .inputList .btnStyle{ padding:10px 5px; display: flex; grid-gap: 0px 5px; justify-content: center; align-items: center; min-height: 36px; background-color: #009fb7; width: 100%; color: #fff; text-align: center; font-size: 1.125rem; border-radius:5px; border: none; cursor: pointer; }
.formBox .inputList .btnStyle.column{ flex-direction: column; }
.formBox .inputList .btnStyle .ch{ color: inherit; font-size: inherit; }
.formBox .inputList .btnStyle .en{ color: inherit; font-size: inherit; }
.formBox .inputList .btnStyle.gray{ background-color: #a6a6a6; }

.formBox .flexBtn{ display: flex; grid-gap:6px; }
.formBox .flexBtn.column{ flex-direction: column; grid-gap:25px; }
.formBox .flexBtn .grids{ flex:1; }
.formBox .flexBtn .grids.noflex{ flex:none; }
.formBox .flexBtn .grids .btn{ display: block; cursor: pointer; width: 100%; border-radius: 10px; border: none; padding: 10px 0; text-align: center; position: relative;  }
.formBox .flexBtn .grids .btn label{ cursor: pointer; }
.formBox .flexBtn .grids .btn.blue{ background-color: #009fb7; }
.formBox .flexBtn .grids .btn.green{ background-color: #90ac50; }
.formBox .flexBtn .grids .btn.gray{ background-color: #636363; }
.formBox .flexBtn .grids .btn .ch{ color: #fff; font-size: 1.125rem; font-weight: bold; display: block; }
.formBox .flexBtn .grids .btn .en{ color: #fff; font-size: 1rem; display: block; }
.formBox .flexBtn .grids .links{ padding: 0 10px; font-size: 1.125rem; color: #009fb7; }
.formBox .flexBtn .grids .opacityDiv{ opacity: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 100%; height: 100%; cursor: pointer; }

.formBox .flexBtn.center{ justify-content: center; padding: 30px 0 0 0; }

.formBox .otherLogin{ margin-top: 70px; margin-bottom: 20px; display: flex; align-items: center; }
.formBox .otherLogin .line{ flex:1; height: 1px; background-color: #009fb7; }
.formBox .otherLogin .txts{ padding: 0 20px; color: #191919; font-size: 1.125rem; text-align: center; }
.formBox .otherFlex{ display: flex; grid-gap:6px; }
.formBox .otherFlex .btns{ display: flex; align-items: center; border-radius: 10px; padding: 5px 20px; flex:1; justify-content: center; }
.formBox .otherFlex .btns .icon{ width: 50px; position: relative; background-position: center; background-size: cover; background-repeat: no-repeat; }
.formBox .otherFlex .btns .icon:after{ content: ""; display: block; width: 100%; padding-bottom: 100%; }
.formBox .otherFlex .btns .textbox{ padding: 0 0 0 10px; }
.formBox .otherFlex .btns .textbox .ch{ font-size: 1.125rem; color: #fff; font-weight: bold; }
.formBox .otherFlex .btns .textbox .en{ font-size: 1.125rem; color: #fff; }

.formBox .otherFlex .btns.i01{ background-color: #009e96; }
.formBox .otherFlex .btns.i01 .icon{ background-image: url(../images/page/other_icon01.png); }
.formBox .otherFlex .btns.i02{ background-color: #ff3d00; }
.formBox .otherFlex .btns.i02 .icon{ background-image: url(../images/page/other_icon02.png); }
.formBox .otherFlex .btns.i03{ background-color: #3c599b; }
.formBox .otherFlex .btns.i03 .icon{ background-image: url(../images/page/other_icon03.png); }

.formBox .tables{ display: table; width: 100%; border-collapse: collapse; }
.formBox .tables .tr{ display: table-row; }
.formBox .tables .th{ display: table-cell; vertical-align: middle; border: 1px solid #7d7d7d; padding: 10px; color: #333; font-size: 1.125rem; text-align: center; }
.formBox .tables .td{ display: table-cell; vertical-align: middle; border: 1px solid #7d7d7d; padding: 10px; color: #333; font-size: 1.125rem; text-align: center; word-break: break-all; }
.formBox .tables .td.alignLeft{ text-align: left; }
.formBox .tables .td.alignRight{ text-align: right; }
.formBox .tables .td.alignCenter{ text-align: center; }
.formBox .tables .td .textBlue{ color: #009fb7; font-size: inherit; font-weight: inherit; }
.formBox .tables .td .textGreen{ color: #90ac50; font-size: inherit; font-weight: inherit; }
.formBox .tables .td .LinkBorder{ text-decoration:underline;}
.formBox .tables .td .small{ font-size: 0.9em; }
.formBox .tables .td .btn{ display: inline-block; line-height: 28px; border-radius: 5px; padding: 0 15px; background-color: #a6a6a6; font-size: 1.125rem; }
.formBox .tables .td .btn.blue{ background-color: #009fb7; }
.formBox .tables .td .btn.green{ background-color: #90ac50; }

.formBox p{ color: #636363; }

.formBox .codeImg{ box-shadow: 0 0 15px rgba(0,0,0,0.1); }
.formBox .voiceBtn{ display: flex; border: 1px solid #009fb7; border-radius: 10px; padding:5px 10px; align-items: center; }
.formBox .voiceBtn .icon{ width: 40px; }
.formBox .voiceBtn .icon:after{ content: ""; display: block; width: 100%; padding-bottom: 100%; background-image: url(../images/page/icon_voice.png); background-size: cover; background-repeat: no-repeat; background-position: center; }
.formBox .voiceBtn .text{ padding: 0 0 0 15px; }
.formBox .voiceBtn .text .ch{ color: #009fb7; font-size: 1.125rem; }
.formBox .voiceBtn .text .en{ color: #009fb7; font-size: 1rem; }

.bottomBlueLine{ height: 0px; background-color: #009fb7; margin-top: 100px; }

/*上傳檔案樣式*/
.fileStyle{ position: relative; width: 100%; }
.fileStyle input[type="file"]{ opacity: 0; position: absolute; z-index: 2; }
.fileStyle .newsStyle{ display: block; position: relative; z-index: 1; width: 100%; background-color: #009fb7; font-size: 1.125rem; text-align: center; color: #fff; height: 44px; line-height: 44px; border-radius: 10px; }

.fileFlex{ display: flex; align-items: end; }
.fileImg{ max-width: 168px; width: 100%; overflow: hidden; position: relative; }
.fileImg img{ position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; }
.fileImg:after{ content: ""; display: block; padding-bottom: 106.54%; width: 100%; }
.fileFlex .txt{ color: #5b6d33; font-size: 1.125rem; }

/*單選*/
.optionsStyle .flexRadius{ display: flex; align-items: center; }
.optionsStyle .flexRadius .txt{ padding: 0 0 0 5px; font-size: 1.125rem; color: #636363; }
.optionsStyle .radius{ padding: 4px; background-color: #fff; border-radius: 100%; }
.optionsStyle .entity{ display: block; width: 16px; height: 16px; border: 1px solid #ccc; border-radius: 100%; background-color: #fff; position: relative; }

.optionsStyle input[type="radio"]{ display: none; }
.optionsStyle input[type="radio"]:checked + .flexRadius .radius{ background-color: #b1eaf3; }
.optionsStyle input[type="radio"]:checked + .flexRadius .entity{ background-color: #009fb7; border: none; }
.optionsStyle input[type="radio"]:checked + .flexRadius .entity:after{ content: ""; display: block; width: 8px; height: 8px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background-color: #fff; border-radius: 100%; }

/*多選*/
.optionsStyle .flexCheckbox{ display: flex; align-items: baseline; }
.optionsStyle .flexCheckbox .txt{ padding: 0 0 0 10px; font-size: 1.125rem; color: #636363; }
.optionsStyle .flexCheckbox .txt .ch{ display: block; font-size: inherit; color: inherit; }
.optionsStyle .flexCheckbox .txt .ch.black{ color: #000; }
.optionsStyle .flexCheckbox .txt .en{ display: block; font-size: inherit; color: inherit; }
.optionsStyle .flexCheckbox .txt a{ color: #009fb7; font-size: inherit; }
.optionsStyle .square{ width: 16px; height: 16px; border: 1px solid #ccc; border-radius: 3px; position: relative; flex-shrink:0; }
.optionsStyle input[type="checkbox"]{ display: none; }
.optionsStyle input[type="checkbox"]:checked + .flexCheckbox .square:before{ content: ""; position: absolute; width: 4px; height: 11px; background-color: #009fb7; transform: rotate(-45deg); top: 3px; left: 0px; }
.optionsStyle input[type="checkbox"]:checked + .flexCheckbox .square:after{ content: ""; position: absolute; width: 4px; height: 21px; background-color: #009fb7; transform: rotate(45deg); top: -5px; left: 10px; }

/*同意*/
.agreeBlock{ margin: 0 0 80px 0; display: flex; flex-direction: column; padding:30px 0 0 185px; border-top: 1px dashed #ccc;}
.agreeBlock .list{ margin: 0 0 30px 0; display: inline-block; }
.agreeBlock .list:last-child{ margin: 0; }

/*會員頁籤*/
.memberFlex{ display: flex; grid-gap:15px; margin-bottom: 70px; }
.memberFlex .grids{ flex:1; display: flex;  border-bottom: 2px solid #009fb7; padding: 5px 0; justify-content: center; position: relative; }
.memberFlex .grids .gs{ display: flex; align-items: center; justify-content: center; }
.memberFlex .grids .textbox{ padding: 0 0 0 3px; flex: 0 1 auto; }
.memberFlex .grids .textbox .ch{ font-size: 1.5rem; color: #009fb7; font-weight: bold; }
.memberFlex .grids .textbox .en{ font-size: 1.125rem; color: #009fb7; }
.memberFlex .grids .icon{ width: 48px; background-position: center; background-repeat: no-repeat; background-size: cover; }
.memberFlex .grids .icon:after{ content: ""; display: block; width: 100%; padding-bottom: 100%; }

.memberFlex.detail .grids .textbox{ padding: 0; text-align: center; }

.memberFlex .grids:nth-child(1) .icon{ background-image: url(../images/page/member_sort_icon01.png); }
.memberFlex .grids:nth-child(2) .icon{ background-image: url(../images/page/member_sort_icon02.png); }
.memberFlex .grids:nth-child(3) .icon{ background-image: url(../images/page/member_sort_icon03.png); }
.memberFlex .grids:nth-child(4) .icon{ background-image: url(../images/page/member_sort_icon04.png); }

.memberFlex .grids.hold{ border: none; border-radius: 100px; background: linear-gradient(to bottom,  rgba(144,172,80,1) 0%,rgba(0,159,183,1) 100%);  }
.memberFlex .grids.hold:after{ content: ""; display: block; position: absolute; border-width:17px 11px 0 11px; border-color:#009fb7 transparent transparent transparent; border-style: solid; position: absolute; bottom: -17px; left: 0; right: 0; margin: auto; width: 0; height: 0; }
.memberFlex .grids.hold .textbox .ch{ color: #fff; }
.memberFlex .grids.hold .textbox .en{ color: #fff; }
.memberFlex .grids.hold:nth-child(1) .icon{ background-image: url(../images/page/member_sort_icon01_w.png); }
.memberFlex .grids.hold:nth-child(2) .icon{ background-image: url(../images/page/member_sort_icon02_w.png); }
.memberFlex .grids.hold:nth-child(3) .icon{ background-image: url(../images/page/member_sort_icon03_w.png); }
.memberFlex .grids.hold:nth-child(4) .icon{ background-image: url(../images/page/member_sort_icon04_w.png); }

/*ebook 頁籤*/
.memberFlex.ebook .grids:nth-child(1) .icon{ background-image: url(../images/page/member_sort_icon05.png); }
.memberFlex.ebook .grids:nth-child(2) .icon{ background-image: url(../images/page/member_sort_icon06.png); }
.memberFlex.ebook .grids:nth-child(3) .icon{ background-image: url(../images/page/member_sort_icon07.png); }

.memberFlex.ebook .grids.hold:nth-child(1) .icon{ background-image: url(../images/page/member_sort_icon05_w.png); }
.memberFlex.ebook .grids.hold:nth-child(2) .icon{ background-image: url(../images/page/member_sort_icon06_w.png); }
.memberFlex.ebook .grids.hold:nth-child(3) .icon{ background-image: url(../images/page/member_sort_icon07_w.png); }

/*專題 頁籤*/
.memberFlex.topics .grids:nth-child(1) .icon{ background-image: url(../images/page/member_sort_icon06.png); }
.memberFlex.topics .grids:nth-child(2) .icon{ background-image: url(../images/page/member_sort_icon08.png); }
.memberFlex.topics .grids.hold:nth-child(1) .icon{ background-image: url(../images/page/member_sort_icon06_w.png); }
.memberFlex.topics .grids.hold:nth-child(2) .icon{ background-image: url(../images/page/member_sort_icon08_w.png); }

/*會員設定*/
.memberSetDiv{ display: flex; }
.memberSetDiv .leftBox{ width: 250px; }
.memberSetDiv .rightBox{ flex:1; padding: 0 0 0 20px; }

.photoImg{ width: 100%; overflow: hidden; position: relative; }
.photoImg img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
.photoImg:after{ content: ""; display: block; padding-bottom: 100%; width: 100%; }
.photoBtn{ display: block; width: 100%; line-height: 44px; border: 1px solid #009fb7; border-radius: 10px; color: #009fb7; font-size: 1.125rem; text-align: center; }

/*會員收藏*/
.collectionTitle{ display: flex; justify-content: center; margin-bottom: 35px; }
.collectionTitle .icon{ width: 39px; }
.collectionTitle .icon:after{ content: ""; display: block; width: 100%; padding-bottom: 148.71%; background-image: url(../images/page/member_maintitle_icon.png); background-position: center; background-size: cover; background-repeat: no-repeat; }
.collectionTitle .text{ padding: 0 0 0 10px; }
.collectionTitle .text .ch{ font-size: 1.875rem; color: #000; font-weight: bold; }
.collectionTitle .text .en{ font-size: 1.5rem; color: #636363; }

.totalText{ text-align: center; font-size: 1.125rem; color: #000; }
.totalText .numbers{ color: #ff9048; font-size: 1.875rem; }

.sortTitleBox{ display: none; }

/*會員收藏 小卡*/
.indexEbookBox .flexBox{ flex-wrap: wrap; grid-gap:60px 0; }

/*忘記密碼 光箱*/
.lightbox{ background-color: rgba(0,0,0,0.8); position:fixed; z-index: 101; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
.lightbox .wbg{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff; border-radius: 10px; max-width: 1200px; margin: auto; width: 90%; max-height: 90dvh; padding: 50px; }
.lightbox .wbg .closeBtn{ position: absolute; top: 20px; right: 20px; width: 52px; height: 52px; border-radius: 100%; border: 3px solid #000; font-size: 0; }
.lightbox .wbg .closeBtn:before{ content: ""; display: block; width: 60%; height: 3px; background-color: #000; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; transform: rotate(-45deg); }
.lightbox .wbg .closeBtn:after{ content: ""; display: block; width: 60%; height: 3px; background-color: #000; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; transform: rotate(45deg); }
.lightbox .wbg .mainTitle{ margin: 0 0 40px 0; text-align: center; }
.lightbox .wbg .mainTitle .ch{ font-size: 3.75rem; color: #000; font-weight: bold; }
.lightbox .wbg .mainTitle .en{ font-size: 1.5rem; color: #636363; }
.lightbox .wbg .ranges{ max-width: 940px; margin: auto; }
.lightbox .wbg p{ color: #636363; }


/*******電子書城*******/
.ebookSort{ margin-bottom: 45px; }
.ebookSort .onelevel{ display: flex; flex-wrap: wrap; grid-gap:20px 0; margin-left: -20px; margin-bottom: 45px; }
.ebookSort .onelevel .grids{ width: 16%; padding: 0 0 0 20px; display: flex; }
.ebookSort .onelevel .grids .gs{ position: relative; width: 100%; border-radius: 5px; border: 1px solid #90ac50; display: flex; padding: 15px 2px; text-align: center; flex-direction: column; justify-content: center; box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1); }
.ebookSort .onelevel .grids .gs .ch{ color: #90ac50; font-size: 1.5rem; font-weight: bold; }
.ebookSort .onelevel .grids .gs .en{ color: #636363; font-size: 1.2rem; }
.ebookSort .onelevel .grids.hold .gs{ background-color: #90ac50; }
.ebookSort .onelevel .grids.hold .gs:after{ content: ""; display: block; width: 0; height: 0; border-width: 13px 13px 0 13px; border-color:#90ac50 transparent transparent transparent; border-style: solid; position: absolute; left: 0; right: 0; margin: auto; bottom: -13px; }
.ebookSort .onelevel .grids.hold .gs .ch{ color: #000; }
.ebookSort .onelevel .grids.hold .gs .en{ color: #000; }

.ebookSort .onelevel .eachBox{ display: none; }

.ebookSort .onelevel.onlyOne .grids.hold .gs:after{ display: none; }

.ebookSort .eachBox{ display: flex; flex-wrap: wrap; grid-gap:20px 15px; }
.ebookSort .eachBox .grids{ display: block; background-color: #f4f4f8; padding: 15px 50px; border-radius: 100px; font-size: 1.2rem; color: #000; font-weight: bold; }

.ebookFunction{ margin: -85px 0 60px 0; text-align:right;}
.ebookFunction .input{ width: 100%; background-color: #fff; border: 2px solid #90ac50; font-size: 1.125rem; border-radius: 10px; line-height: 50px; height: 50px; padding: 0 20px; }
.ebookFunction .selectCenter{ width: 240px; position: relative; display:inline-block; }
.ebookFunction .selectCenter .btnRight{ width: 240px; position: relative; }
.ebookFunction .selectCenter .btnRight .btn{ width: 100%; line-height: 50px; height: 50px; background-color: #90ac50; font-size: 1.5rem; border-radius: 10px; cursor: pointer; font-weight: bold; color: #000; text-align: center; border: none; }
.ebookFunction .selectCenter label{ position: absolute; z-index: -1; opacity: 0; }
/*靠左下拉選單*/
.ebookLeftFunction{ margin: 1em 0 1em;}
.ebookLeftFunction .input{ width: 100%; background-color: #fff; border: 2px solid #90ac50; font-size: 1.125rem; border-radius: 10px; line-height: 50px; height: 50px; padding: 0 20px; }
.ebookLeftFunction .selectCenter{ width: 240px; position: relative; display:inline-block; }
.ebookLeftFunction .selectCenter .btnRight{ width: 240px; position: relative; }
.ebookLeftFunction .selectCenter .btnRight .btn{ width: 100%; line-height: 50px; height: 50px; background-color: #90ac50; font-size: 1.5rem; border-radius: 10px; cursor: pointer; font-weight: bold; color: #000; text-align: center; border: none; }
.ebookLeftFunction .selectCenter label{ position: absolute; z-index: -1; opacity: 0; }


/*詳細頁*/
.ebookDetail{ display: flex; margin-bottom: 100px; }
.ebookDetail .imgs{ max-width: 268px; width: 23.6%; }
.ebookDetail .imgs .range{ position: relative; }
.ebookDetail .imgs .img{ width: 100%; padding-bottom: 154.13%; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 10px; overflow: hidden; position: relative; }
.ebookDetail .imgs .img img{ position: absolute; z-index: 1; max-width: 90%; max-height: 90%; left: 0; right: 0; bottom: 0; top: 0; margin: auto; }
.ebookDetail .imgs .likebtn{ position: absolute; width: 12.1%; max-width: 32px; display: block; font-size: 0; z-index: 5; right: 10px; bottom: -16px; }
.ebookDetail .imgs .likebtn:after{ content: ""; display: block; width: 100%; padding-bottom: 118.75%; background-image: url(../images/index/likebtn.png); background-repeat: no-repeat; background-size: cover; background-position: center; }
.ebookDetail .imgs .likebtn.hold:after{ background-image: url(../images/index/likebtn_yellow.png); }
.ebookDetail .textbox{ flex:1; padding: 30px 0 0 30px; display: flex; flex-direction: column; justify-content: space-between; grid-gap: 40px 0; }
.ebookDetail .textbox .funbox{ display: flex; grid-gap: 0 20px; }
.ebookDetail .textbox .funbox .grids .btn{ line-height: 44px; background-color: #009fb7; border-radius: 10px; font-size: 1.125rem;  color: #fff; border: none; cursor: pointer; display: block; padding: 0 20px; }


.ebookHideBox{ position: relative; border-bottom: 2px solid #009fb7; margin-bottom: 90px; }
.ebookHideBox:after{ content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; height: 84px; z-index: 9; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(185,229,235,1) 100%); }
.ebookHideBox .openBtn{ position: absolute; z-index: 10; left: 0; right: 0; bottom: -32px; margin: auto; width: 64px; height: 64px; background-color: #009fb7; border-radius: 100%; display: flex; justify-content: center; align-items: center; }
.ebookHideBox .openBtn .openText{ display: flex; flex-direction: column; align-items: center; }
.ebookHideBox .openBtn .openText .arrow{ width: 0; height: 0; border-style: solid; border-width:14px 8px 0 8px; border-color: #fff transparent transparent transparent; }
.ebookHideBox .openBtn .openText .txt{ font-size: 0; color: #fff; font-weight: bold; padding: 5px 0 0 0; }
.ebookHideBox .openBtn .openText .txt:after{ content: "展開"; font-size: 1.125rem; }
.ebookHideBox .openBtn.open .openText .arrow{ border-width:0 8px 14px 8px; border-color:transparent transparent #fff transparent; }
.ebookHideBox .openBtn.open .openText .txt:after{ content: "收合"; }

.ebookHideBox .rangeBlock{ max-height: 660px; overflow: hidden; }
.ebookHideBox .rangeBlock .hideContent{ padding: 0 20px 50px 20px; }

.ebookHideBox.open{ margin-bottom: 150px; padding-bottom:50px; }
.ebookHideBox.open .rangeBlock{ max-height: unset; overflow: unset; }
.ebookHideBox .rangeBlock .hideContent{ padding: unset; }

.ebookDownload{ display: flex; flex-wrap:wrap; grid-gap:45px 0; margin-left: -22px; }
.ebookDownload .grids{ width: 25%; padding: 0 0 0 22px; display: flex; }
.ebookDownload .grids .gs{ display: block; width: 100%; border: 1px solid #009fb7; border-radius: 10px; padding: 20px; min-height: 270px; box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1); }
.ebookDownload .grids .gs .title{ margin: 0 0 15px 0; text-align: center; }
.ebookDownload .grids .gs .title .ch{ font-size: 1.375rem; color: #000; font-weight: bold; }
.ebookDownload .grids .gs .title .en{ font-size: 1.125rem; color: #000; }
.ebookDownload .grids .gs .downloadBtn{ border: 1px solid #fe4a49; border-radius: 100px; margin-bottom: 20px; display: flex; align-items: center; padding:0 20px 0 0; min-height: 38px; }
.ebookDownload .grids .gs .downloadBtn .icon{ width: 38px; }
.ebookDownload .grids .gs .downloadBtn .icon.pdf:after{ background-image: url(../images/page/download_icon01.png); }
.ebookDownload .grids .gs .downloadBtn .icon.ebook:after{ background-image: url(../images/page/download_icon02.png); }
.ebookDownload .grids .gs .downloadBtn .icon.music:after{ background-image: url(../images/page/download_icon03.png); }
.ebookDownload .grids .gs .downloadBtn .icon:after{ content: ""; display: block; width: 100%; padding-bottom: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; }
.ebookDownload .grids .gs .downloadBtn .txt{ flex:1; padding: 0 0 0 15px; font-size: 1.125rem; color: #fe4a49; font-weight: bold; }

.ebookHideBox.detail{ border-bottom: none; margin-bottom: 0; }
.ebookHideBox.detail:after{ display: none; }
.ebookHideBox.detail .rangeBlock{ max-height: none; overflow: initial; }
.ebookHideBox.detail .rangeBlock .hideContent{ padding: 0; }

.ebookQA{ padding: 2px; }
.ebookQA .qaList{ margin: 0 0 20px 0; position: relative; }
.ebookQA .qaList .arrow{ transform: rotate(-90deg); width: 18px; height: 18px; position: absolute; top: 15px; right: 0; }
.ebookQA .qaList .arrow:before{ content: ""; display: block; width: 10px; height: 2px; background-color: #009fb7; position: absolute; top: 8px; left: 1px; transform: rotate(45deg); }
.ebookQA .qaList .arrow:after{ content: ""; display: block; width: 10px; height: 2px; background-color: #009fb7; position: absolute; top: 8px; right: 1px; transform: rotate(-45deg); }
.ebookQA .qaList .qTitle{ display: flex; padding: 0 30px 0 0; }
.ebookQA .qaList .qTitle .icon{ width: 30px; color: #90ac50; font-weight: bold; font-size: 1.875rem; }
.ebookQA .qaList .qTitle .h3{ flex:1; padding: 0 0 0 10px; font-size: 1.125rem; color: #191919; font-weight: bold; line-height: 1.6; }
.ebookQA .qaList .aTxt{ display: none; margin-top: 10px; }
.ebookQA .qaList .aTxt .icon{ width: 30px; color: #90ac50; font-weight: bold; font-size: 1.875rem; }
.ebookQA .qaList .aTxt .p{ flex:1; padding: 0 0 0 10px; font-size: 1.125rem; color: #191919; line-height: 2; }
.ebookQA .qaList.open .aTxt{ display: flex; }
.ebookQA .qaList.open .arrow{ transform: rotate(0deg); }

.ebookBanner{ text-align: right; margin-bottom: 20px; }
.ebookBanner .backBtn{ display: inline-flex; align-items: center; background-color: #90ac50; padding: 5px 20px; border-radius: 8px; margin-bottom: 30px; }
.ebookBanner .backBtn .icon{ width: 26px; height: 26px; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(../images/page/ebook_home.png); }
.ebookBanner .backBtn .txt{ flex:1; color: #fff; font-size: 1.5rem; color: #fff; font-weight: bold; padding: 0 0 0 5px; }
.ebookBanner .imgs{ font-size: 0; overflow: hidden; border-radius: 10px; }
.ebookBanner .imgs .sp{ display: none; }

.editContent{ display: block; }
.editContent *{ color: inherit; font-size: inherit; font-weight: inherit; line-height: 2; }
.editContent .imgs{ display: inline-block; }
.editContent .imgs img{ vertical-align: middle; }
.editContent .imgs .exText{ display: block; background-color: #daecf9; padding: 5px 10px; line-height:2; font-size: 1.2em;font-weight: bold;}
.editContent ul,.editContent ol{ margin: 0 0 0 30px; }

/*******師資培訓*******/
.searchTrain{ margin-bottom: 60px; }
.searchTrain .searchFlex{ display: flex; grid-gap:7px; }
.searchTrain .searchFlex .inputLeft{ flex:1; position: relative; }
.searchTrain .searchFlex .input{ width: 100%; background-color: #fff; border: 2px solid #90ac50; font-size: 1.125rem; border-radius: 10px; line-height: 50px; height: 50px; padding: 0 20px; }
.searchTrain .searchFlex .selectCenter{ width: 240px; position: relative; }
.searchTrain .searchFlex .btnRight{ width: 240px; position: relative; }
.searchTrain .searchFlex .btnRight .btn{ width: 100%; line-height: 50px; height: 50px; background-color: #90ac50; font-size: 1.5rem; border-radius: 10px; cursor: pointer; font-weight: bold; color: #000; text-align: center; border: none; }
.searchTrain .searchFlex label{ position: absolute; z-index: -1; opacity: 0; }
.searchTrain .tagFlex{ display: flex; flex-wrap: wrap; grid-gap:30px; padding-top: 30px; }
.searchTrain .tagFlex:first-child{ padding-top: 0; }
.searchTrain .tagFlex .grids{ color:#2896e8; font-size: 1.375rem; font-weight: bold; }

.filterBox{ display: flex; }
.filterBox .title{ width: 100px; text-align: center; }
.filterBox .title .ch{ font-size: 1.875rem; color: #90ac50; font-weight: bold; }
.filterBox .title .en{ font-size: 1.5rem; color:#636363; }
.filterBox .title .small{ font-size: 0.875rem; color:#636363; }
.filterBox .filterContent{ flex:1; padding: 0 0 0 25px; }
.filterBox .filterContent .flexBox{ display: flex; flex-wrap: wrap; grid-gap:20px; margin-bottom: 30px; }
.filterBox .filterContent .flexBox .grids{ background-color: #f7f7fa; border-radius: 100px; padding: 12px 45px; }
.filterBox .filterContent .sendBtn{ width: 240px; height: 50px; line-height: 50px; background-color: #009fb7; border-radius: 8px; font-size: 1.5rem; color: #fff; border: none; cursor: pointer;  }
.filterBox .filterContent .sendTxt{ font-size: 0; height: 0; display: block; }

.filterBox .optionsStyle .flexCheckbox .txt{ font-size: 1.5rem; font-weight: bold; }
.filterBox .optionsStyle .square{ width: 25px; height: 25px; border: #c2dbfe 5px solid; border-radius: 6px; }

.videoThumbnail{ width: 100%; font-size: 0; position: relative; margin-bottom: 20px; }
.videoThumbnail:after{ content: ""; position: absolute; z-index: 4; display: block; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(243,247,217,0) 20%,rgba(207,225,105,0.7) 79%,rgba(194,217,65,0.8) 100%); border-radius:14px; }
.videoThumbnail .img{ padding: 2px; background: #fff; border-radius: 20px; position: relative; z-index: 2; overflow: hidden; display:block; }
.videoThumbnail .icon{ position: absolute; width: 13.1666%; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 5; }
.videoThumbnail .icon:after{ content: ""; display: block; width: 100%; padding-bottom: 100%; background-image: url(../images/page/video_icon.png); background-repeat: no-repeat; background-position: center; background-size: cover; }

.trainingTitle{ display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; }
.trainingTitle .h2{ font-size: 2.5rem; color: #000; font-weight: bold; }
.trainingTitle .h3{ font-size: 1.875rem; color: #2896e8; font-weight: bold; }
.trainingTitle .shareBox{ display: flex; min-width: 50%; }
.trainingTitle .shareBox .likeBox{ display: flex; align-items: center; }
.trainingTitle .shareBox .likeBox .icon{ width: 32px; display: block; }
.trainingTitle .shareBox .likeBox .icon:after{ content: ""; display: block; width: 100%; padding-bottom: 118.75%; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(../images/page/share_like_gray.png); }
.trainingTitle .shareBox .likeBox.hold .icon:after{ background-image: url(../images/page/share_like.png); }
.trainingTitle .shareBox .likeBox .txt{ color: #392f5a; font-size: 1rem; padding: 0 0 0 10px; }
.trainingTitle .shareBox .shareCommunity{ display: flex; align-items: center; margin: 0 0 0 30px; padding: 0 0 0 16px; border-left:1px solid #90ac50; }
.trainingTitle .shareBox .shareCommunity .txt{ font-size: 1rem; color: #392f5a; padding: 0 20px 0 0; }
.trainingTitle .shareBox .shareCommunity .shareLink{ margin-right: 10px; display: block; font-size: 0; }
.trainingTitle .shareBox .shareCommunity .shareLink:last-child{ margin-right: 0; }

.episodeBox{ margin-bottom: 40px; }
.episodeBox .flexBox{ display: flex; flex-wrap: wrap; grid-gap:20px 0; margin-left: -15px; }
.episodeBox .flexBox .grids{ display: block;  width:16.66667%; padding-left: 15px; }
.episodeBox .flexBox .grids .gs{ display: block; width: 100%; line-height: 44px; background-color: #009fb7; border-radius: 5px; color: #fff; font-size: 1.125rem; color: #fff; text-align: center; }

.briefTextBox{ margin-bottom: 60px; border-bottom: 1px solid #90ac50; padding: 0 0 70px 0; }
.briefTextBox .titleBox{ border-bottom: 1px solid #90ac50; }
.briefTextBox .titleBox .h3{ display: inline-block; position: relative; text-align: center; min-width: 250px; padding: 0 20px; }
.briefTextBox .titleBox .h3:after{ content: ""; display: block; height: 6px; background-color: #90ac50; position: absolute; bottom: -6px; left: 0; right: 0; margin: auto; }
.briefTextBox .titleBox .h3 .ch{ font-size: 1.875rem; color: #90ac50; font-weight: bold; }
.briefTextBox .titleBox .h3 .en{ font-size: 1.5rem; color: #636363; }
.briefTextBox .textContent{ padding: 50px 20px 0 20px; }
.briefTextBox .textContent *{ font-size: 1.2rem; color: inherit;  font-weight: inherit; line-height: 1.8rem; }

/*******僑校園地*******/
.overseasTitle{ display: flex; grid-gap:0 20px; border-bottom: 1px solid #009fb7; padding: 0 0 12px 0; align-items: baseline; margin-bottom: 10px; }
.overseasTitle .category{ background-color: #eee; color: #fff; border-radius: 10px; line-height: 30px; font-size: 1rem; font-weight: bold; padding: 0 15px; }
.overseasTitle .category.red{ background-color: #f6687c; }
.overseasTitle .category.orange{ background-color: #ff9048; }
.overseasTitle .category.green{ background-color: #90ac50; }
.overseasTitle .category.blue{ background-color: #4889ff; }
.overseasTitle .category.greenLake{ background-color: #009fb7; }
.overseasTitle .date{ font-size: 1.25rem; color: #009fb7; font-weight: bold; }
.overseasTitle .h2{ font-size: 1.875rem; color: #000; flex:1; font-weight:bold; }
.overseasFunction{ display: flex; justify-content: space-between; margin-bottom: 15px; }
.overseasFunction .schoolText{ display: flex; align-items: center; }
.overseasFunction .schoolText .icon{ width: 35px; }
.overseasFunction .schoolText .icon:after{ content: ""; display: block; width: 100%; padding-bottom: 125.71%; background-image: url(../images/page/icon_school.png); background-position: center; background-size: cover; background-repeat: no-repeat; }
.overseasFunction .schoolText .title{ font-size: 1.375rem; color: #fe4a49; font-weight: bold; padding: 0 0 0 5px; }
.overseasFunction .printBtn{ width: 35px; display: block; font-size: 0; }
.overseasFunction .printBtn:after{ content: ""; display: block; width: 100%; padding-bottom: 125.71%; background-image: url(../images/page/icon_print.png); background-position: center; background-size: cover; background-repeat: no-repeat; }

/*******最新消息*******/
.newsSort{ display:flex; flex-wrap: wrap; margin: 0 0 60px -10px; grid-gap:10px 0; justify-content: center; }
.newsSort .grids{ display: flex; padding: 0 0 0 10px; width: 16.66667%; }
.newsSort .grids .gs{ width: 100%; border-radius: 10px; background-color: #eee; text-align: center; padding: 15px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.newsSort .grids .gs .ch{ font-size: 2.25rem; color: #fff; font-weight: bold; }
.newsSort .grids .gs .en{ font-size: 1.5rem; color: #fff; font-weight: bold; } 
.newsSort .grids .gs.red{ background-color: #f6687c; }
.newsSort .grids .gs.orange{ background-color: #ff9048; }
.newsSort .grids .gs.green{ background-color: #90ac50; }
.newsSort .grids .gs.blue{ background-color: #4889ff; }
.newsSort .grids .gs.greenLake{ background-color: #009fb7; }
.newsSort .grids .gs.grey{ background-color: #636363; }

.indexNewsBox .newsList{ display: block; margin-bottom: 20px; }
.indexNewsBox .newsList:last-child{ margin-bottom: 0; }
.indexNewsBox .newsList .newsImg{ display: none; }
.indexNewsBox .newsList .contentData .flexBox{ display: grid; grid-template-columns: 70px 1fr; grid-gap:20px; }
.indexNewsBox .newsList .contentData .flexBox .flexSort .sort{ width: 100%; line-height: 30px; background-color: #ccc; color: #fff; text-align: center; font-size: 1rem; font-weight: bold; border-radius: 10px; }
.indexNewsBox .newsList .contentData .flexBox .flexSort .sort.orange{ background-color: #ff9048; }
.indexNewsBox .newsList .contentData .flexBox .flexSort .sort.green{ background-color: #90ac50; }
.indexNewsBox .newsList .contentData .flexBox .flexSort .sort.blue{ background-color: #4889ff; }
.indexNewsBox .newsList .contentData .flexBox .flexSort .sort.red{ background-color: #f6687c; }
.indexNewsBox .newsList .contentData .flexBox .flexSort .sort.greenLake{ background-color: #009fb7; }
.indexNewsBox .newsList .contentData .flexBox .listLine{ display: grid; grid-gap:20px; grid-template-columns: 110px 1fr; border-bottom: 1px solid #009fb7; padding-bottom: 5px; }
.indexNewsBox .newsList .contentData .flexBox .listLine .date{ color: #009fb7; font-size: 1.25rem; font-weight: bold; }
.indexNewsBox .newsList .contentData .flexBox .listLine .h2{ display: grid; width: 100%; }
.indexNewsBox .newsList .contentData .flexBox .listLine .h2 .txt{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #000; font-size: 1.25rem; line-height: 1.6; }

/*******常見問題*******/
.faqBlock .aqList{ margin-bottom: 70px; border: 1px solid #2896e8; border-radius: 10px; padding-bottom: 20px; }
.faqBlock .aqList:last-child{ margin-bottom: 0; }
.faqBlock .aqList .title{ font-size: 1.375rem; color: #2896e8; font-weight: bold; padding: 20px; position: relative; margin: 0 0 10px 0; }
.faqBlock .aqList .title:after{ content: ""; display: block; height: 1px; background-color: #2896e8; position: absolute; left: 15px; bottom: 0; right: 15px; }
.faqBlock .aqList .mlist .qbox{ display: flex; padding: 10px 30px 10px 30px; align-items: baseline; }
.faqBlock .aqList .mlist .qbox .icon{ width: 40px; font-size: 1.875rem; color: #90ac50; font-weight: bold; }
.faqBlock .aqList .mlist .qbox .h3{ flex:1; font-weight: bold; color: #191919; font-size: 1.125rem; line-height: 1.6; }
.faqBlock .aqList .mlist .qbox .arrow{ width: 30px; display: flex; justify-content: center; }
.faqBlock .aqList .mlist .qbox .arrow .icon{ width: 16px; height: 16px; position: relative; }
.faqBlock .aqList .mlist .qbox .arrow .icon:before{ content: ""; display: block; width: 2px; height: 10px; background-color: #90ac50; position: absolute; top: 0px; left: 0; right: 0; margin: auto; transform: rotate(-45deg); }
.faqBlock .aqList .mlist .qbox .arrow .icon:after{ content: ""; display: block; width: 2px; height: 10px; background-color: #90ac50; position: absolute; bottom: 0px; left: 0; right: 0; margin: auto; transform: rotate(45deg); }
.faqBlock .aqList .mlist .abox{ display: none; padding: 0 60px 0 30px; align-items: baseline; }
.faqBlock .aqList .mlist .abox .icon{ width: 40px; font-size: 1.875rem; color: #90ac50; font-weight: bold; }
.faqBlock .aqList .mlist .abox .h3{ flex:1; color: #191919; font-size: 1.125rem; line-height: 1.6; }
.faqBlock .aqList .mlist.open .qbox{ background-color: #d4eafa; }
.faqBlock .aqList .mlist.open .abox{ display: flex; }

/*******聯絡我們*******/
.contactSearch{ display:flex; justify-content: center; align-items: center; width: 100%; grid-gap:15px; margin-bottom: 50px; }
.contactSearch .titles{ display: flex; align-items: center; }
.contactSearch .titles .icon{ width: 38px; }
.contactSearch .titles .icon:after{ content: ""; display: block; width: 100%; padding-bottom: 100%; background-position: center; background-size: cover; background-image: url(../images/page/icon_search.png); background-repeat: no-repeat; }
.contactSearch .titles .textBox{ padding: 0 0 0 10px; line-height: 1.6; }
.contactSearch .titles .textBox .ch{ font-size: 1.125rem; color: #191919; font-weight: normal; }
.contactSearch .titles .textBox .en{ font-size: 1.125rem; color: #191919; font-weight: normal; }
.contactSearch .grids{ font-size: 1.125rem; color: #392f5a; line-height: 1.6; position: relative; }
.contactSearch .grids label{ position: absolute; z-index: -1; font-size: 0; }
.contactSearch .grids-1{ width: 150px; }
.contactSearch .grids-2{ width: 325px; }
.contactSearch .grids-3{ width: 96px; }
.contactSearch .inputs{ width: 100%; background-color: #fff; border: 2px solid #e6e6e6; border-radius: 5px; font-size: 1rem; line-height: 36px; height: 36px; padding: 0 5px; }
.contactSearch .btn{ width: 100%; border: none; background-color: #90ac50; color: #fff; font-size: 1.25rem; height: 58px; line-height: 58px; border-radius: 5px; text-align: center; cursor: pointer; }

/*******搜尋結果*******/
.searchResultsBox{ display: flex; flex-wrap: wrap; justify-content: center; grid-gap: 5px; margin-bottom: 40px; }
.searchResultsBox .grids{ display: block; background-color: #e6e6e6; border-radius: 100px; padding: 10px 20px; font-size: 1.125rem; color: #636363; }
.searchResultsBox .grids.hold{ background-color: #90ac50; color: #000; }

.searchResultsTable .table{ width: 100%; display: table; border-collapse: collapse; }
.searchResultsTable .tr{ display: table-row; }
.searchResultsTable .th{ display: table-cell; padding: 10px 25px; font-size: 1.125rem; color: #fff; background-color: #90ac50; text-align: center; border-left: 1px solid #fff; white-space:nowrap; }
.searchResultsTable .td{ display: table-cell; padding: 10px 25px; font-size: 1.125rem; color: #313131; background-color: #f2f2f2; text-align: center; line-height: 1.6; border-left: 1px solid #fff; }
.searchResultsTable .td:hover{ color:#5b6d33;}
.searchResultsTable .tr:nth-child(2n) .td{ background-color:#f9f9f9;}
.searchResultsTable .th:first-child,.searchResultsTable .td:first-child{ border-left: none; }
.searchResultsTable .td.left{ text-align: left; }
.searchResultsTable .td .link{ color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
.searchResultsTable .wt-10{ width: 10%; }

/*******台語文學習網*******/
.bearImg{ position: fixed; max-width: 197px; width: 10.26%; left: 3%; }
.bearImg:after{ content: ""; display: block; width: 100%; padding-bottom: 139.59%; background-image: url(../images/page/img_bear.png); background-repeat: no-repeat; background-position: center; background-size: cover; }

/*******附件設定**********/
.greenBack{display: block;    background-color: #ddf9ca;    padding: 5px 10px;    line-height: 2;    font-size: 1.2em;    font-weight: bold; margin-top: 1em;}
.greenBack a:hover{color:#5b6d33}

/***************************************** Hover *****************************************/
@media screen and (min-width:1281px) {
    /*******電子書城*******/
    .ebookSort .onelevel .grids .gs:hover{ background-color: #90ac50;  }
    .ebookSort .onelevel .grids .gs:hover .ch{ color: #000; }
    .ebookSort .onelevel .grids .gs:hover .en{ color: #000; }
    .ebookSort .twolevel .eachBox .grids:hover{ background-color: #b1c584; }

    /*******最新消息*******/
    .indexNewsBox .newsList:hover .contentData .flexBox .listLine .h2 .txt{ color: #009fb7; }

    /*******常見問題*******/
    .faqBlock .aqList .mlist .qbox:hover { background-color: #d4eafa; }

    /*******搜尋結果*******/
    .searchResultsBox .grids:hover{ background-color: #90ac50; color: #000; }
}

/***************************************** 平板 *****************************************/
@media screen and (min-width: 768px) and (max-width:1280px) {
    .padding-top {
        margin-top: 92px;
    }
    .banner{ margin-top: 92px; }

    /*共用*/
    .titleBtnBlock{ margin-bottom: 30px; }
    .titleBtnBlock .rightBtn{ position: static; transform:none; justify-content: center; }

    /*******會員*******/
    .memberForm .formBox .inputList .title{ width: 100%; }

    .member_ex .textbox .bigFont{ font-size: 3.125rem; }

    .formBox .inputList{ flex-direction: column; }
    .formBox .inputList .title{ display: flex; position: static; transform:none; width: 100%; }
    .formBox .inputList .title .en{ margin-left: 5px; }
    .formBox .inputList .contentDiv{ padding: 5px 0 0 0; }

    .formBox .otherFlex{ flex-direction: column;align-items: center; }
    .formBox .otherFlex .btns{ flex:none; max-width: 300px; width: 100%; }

    .formBox .inputList{ flex-direction: column; }

    /*會員頁籤*/
    .memberFlex .grids .icon{ width: 34px; }
    .memberFlex .grids .textbox .ch{ font-size: 1.125rem; }
    .memberFlex .grids .textbox .en{ font-size: 0.875rem; }

    /*會員收藏 小卡*/
    .indexEbookBox .flexBox .grids{ width: 33.33334%; }


    /*******電子書城*******/
    .ebookSort .onelevel{ margin-left: -10px; }
    .ebookSort .onelevel .grids{ padding: 0 0 0 10px; }
    .ebookSort .onelevel .grids .gs{ padding: 10px; }
    .ebookSort .onelevel .grids .gs .ch{ font-size: 1.375rem; }
    .ebookSort .onelevel .grids .gs .en{ font-size: 1rem; }

    .ebookSort .twolevel .eachBox{ grid-gap:10px; }
    .ebookSort .twolevel .eachBox .grids{ font-size: 1.375rem; padding: 10px 20px; }

    .ebookDownload .grids{ width: 33.3334%; }
    .ebookDownload .grids .gs .title .ch{ font-size: 1.25rem; }
    .ebookDownload .grids .gs .title .en{ font-size: 1rem; }
    .ebookDownload .grids .gs .downloadBtn{ padding: 0 10px 0 0; margin-bottom: 15px; }
    .ebookDownload .grids .gs .downloadBtn .txt{ font-size: 1rem; }

    /*******師資培訓*******/
    .searchTrain .searchFlex .btnRight .btn{ font-size: 1.125rem; }
    .searchTrain .tagFlex{ grid-gap:20px; padding-top: 20px; }
    .searchTrain .tagFlex .grids{ font-size: 1.25rem; }

    .filterBox .title .ch{ font-size: 1.5rem; }
    .filterBox .title .en{ font-size: 1.375rem; }

    .filterBox .filterContent .flexBox .grids{ padding: 10px 25px; }
    .filterBox .optionsStyle .flexCheckbox .txt{ font-size: 1.5rem; }

    .trainingTitle .h2{ font-size: 1.5rem; }
    .trainingTitle .h3{ font-size: 1.375rem; }
    .trainingTitle .shareBox .shareCommunity{ margin: 0 0 0 10px; padding: 0 0 0 10px; }
    .trainingTitle .shareBox .likeBox .icon{ width: 28px; }
    .trainingTitle .shareBox .shareCommunity .shareLink img{ height: 34px; }

    .episodeBox .flexBox .grids{ width: 20%; }

    .briefTextBox .titleBox .h3{ min-width: 210px; }
    .briefTextBox .titleBox .h3 .ch{ font-size: 1.5rem; }
    .briefTextBox .titleBox .h3 .en{ font-size: 1.375rem; }
    .briefTextBox .titleBox .h3:after{ height: 4px; bottom: -4px; }

    /*******最新消息*******/
    .newsSort .grids .gs .ch{ font-size: 1.75rem; }
    .newsSort .grids .gs .en{ font-size: 1.25rem; }

    /*******聯絡我們*******/
    .contactSearch .grids-1{ width: auto; flex: 1; }
    .contactSearch .grids-2{ width: auto; flex: 1; }

    /*******台語文學習網*******/
    .bearImg{ display: none; }	
	
}


/***************************************** 手機版 *****************************************/
@media screen and (max-width:767px) {
    .padding-top {
        margin-top: 71px;
    }
    .banner{ margin-top: 71px; height: 140px; }
    .banner .bg01{ left: -9%; }
    .banner .bg02{ right: -12%; }
    .banner .textbox{ padding: 0 10px; }
    .banner .textbox .ch{ font-size: 1.375rem; }
    .banner .textbox .en{ font-size: 1rem; }
    .banner .textbox nav{ padding: 5px 10px; margin-top: 10px; min-width: auto; }
    .banner .textbox nav a, .banner .textbox nav span{  font-size: 0.75rem; }
	.banner.blue .bg01{ width: 50%; left:0;}
	.banner.blue .bg01:after{ background-position: -20px 0;}
	.banner.blue .bg02{ width: 50%; right:0;}
	.banner.blue .bg02:after{ background-position: -40px 0;}

    /*共用*/
    main{ padding: 20px 0 0 0; }
    .centerBlock{ padding: 0 15px; }
    .centerBlock.full_sp{ padding: 0; }

    .h2Title{ margin-bottom: 15px; }
    .h2Title .ch{ font-size: 1.375rem; }
    .h2Title .en{ font-size: 1rem; }
    .titleBtnBlock{ margin-bottom: 30px; }
    .titleBtnBlock .rightBtn{ position: static; transform:none; justify-content: center; }
    .titleBtnBlock .rightBtn .btns{ flex:1; justify-content: center; }
    .titleBtnBlock .rightBtn .btns .icon{ width: 24px; height: 24px; }
    .titleBtnBlock .rightBtn .btns .txt{ font-size: 1rem; }
    

    /*頁碼*/
    .pageNumberBox span, .pageNumberBox a{ width: 40px; height: 40px; line-height: 39px; font-size: 1.25rem; }
    .pageNumberBox .arrow{ width: 40px; height: 40px; }

    /*******會員*******/
    .member_ex{ border-radius: 0; padding: 0 15px 20px 15px; }
    .member_ex .imgs{ display: none; }
    .member_ex .textbox{ padding: 0; font-size: 1rem; }
	.member_ex .textbox .textboxHideBox{ font: inherit; /*-webkit-line-clamp: 4; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;*/}
    .member_ex .textbox .bigFont{ font-size: 1.5rem; text-align: center; }

    .memberForm .formBox .inputList .title{ width: 100%; }
    .memberForm .formBox .inputList .title .platform .icon{ display: none; }
    .memberForm .formBox .inputList .title .platform .textbox{ padding: 0; }
    .memberForm .formBox .inputList .title .platform .textbox .ch{ display: block; }
    .memberForm .formBox .inputList .title .platform .textbox .en{ display: block; }
	
	.textboxHideBox{ position: relative; border-bottom: 2px solid #009fb7; margin-bottom: 60px; padding-bottom:10px; }
	.textboxHideBox:after{ content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; height: 50px; z-index: 9; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(185,229,235,1) 100%); }
	.textboxHideBox .openBtn{ position: absolute; z-index: 10; left: 0; right: 0; bottom: -32px; margin: auto; width: 42px; height: 42px; background-color: #009fb7; border-radius: 100%; display: flex; justify-content: center; align-items: center; }
	.textboxHideBox .openBtn .openText{ display: flex; flex-direction: column; align-items: center; }
	.textboxHideBox .openBtn .openText .arrow{ width: 0; height: 0; border-style: solid; border-width:7px 4px 0 4px; border-color: #fff transparent transparent transparent; }
	.textboxHideBox .openBtn .openText .txt{ font-size: 0; color: #fff; font-weight: bold; padding: 2px 0 0 0; }
	.textboxHideBox .openBtn .openText .txt:after{ content: "展開"; font-size: 0.875rem; }
	.textboxHideBox .openBtn.open .openText .arrow{ border-width:0 4px 7px 4px; border-color: transparent transparent #fff transparent; }
	.textboxHideBox .openBtn.open .openText .txt:after{ content: "收合"; }
	
	.textboxHideBox .rangeBlock{ max-height: 100px; overflow: hidden; }
	.textboxHideBox .rangeBlock .hideContent{ padding: 0 0 50px 0; }
	
	.textboxHideBox.open{ margin-bottom: 100px; padding-bottom:50px; }
	/*.textboxHideBox.open:after{ display: none; }*/
	.textboxHideBox.open .rangeBlock{ max-height: unset; overflow: unset; }
	.textboxHideBox .rangeBlock .hideContent{ padding: unset; }
    
	.formBox .inputList{ margin-bottom: 25px; flex-direction: column; align-items: flex-start; }
    .formBox .inputList .title{ display: block; text-align: left; position: static; transform:none; width: 100%; }
    .formBox .inputList .title .ch{ display: inline; font-size: 1.125rem; color: #000; }
    .formBox .inputList .title .en{ display: inline; font-size: 1rem; margin-left: 5px; }
    .formBox .inputList .contentDiv{ padding: 5px 0 0 0; width:100%; }
    .formBox .inputList .contentDiv .flexBox{ margin-bottom: 20px; }
    .formBox .inputList .contentDiv .grids.wt-100-sp{ width: 100%; }
    .formBox .inputList .contentDiv .grids .purelyTxt{ font-size: 1rem; }
    .formBox .inputList .btnStyle{ padding: 5px; font-size: 1rem; flex-direction: column; }
    .formBox .inputList .contentDiv .grids .textEdit{ height: 250px; }

    .formBox .flexBtn{ flex-direction: column; align-items: center; }
    .formBox .flexBtn .grids{ flex:none; width: 100%; }
    .formBox .flexBtn .grids .btn .ch{ font-size: 1rem; }
    .formBox .flexBtn .grids .btn .en{ font-size: 0.875rem; }
    .formBox .flexBtn .grids .links{ font-size: 0.875rem; }

    .formBox .flexBtn .grids.noflex{ text-align: center; }

    .formBox .flexBtn.center{ padding: 15px 0 0 0; }
    .formBox .flexBtn.column{ grid-gap: 10px; }
    
    .formBox .otherLogin{ margin-top: 30px; }
    .formBox .otherLogin .txts{ font-size: 1rem; }
    .formBox .otherFlex{ flex-direction: column;align-items: center; }
    .formBox .otherFlex .btns{ flex:none; width: 100%; }
    .formBox .otherFlex .btns .icon{ width: 30px; }
    .formBox .otherFlex .btns .textbox{ width:11.65rem;}
	.formBox .otherFlex .btns .textbox .ch{ font-size: 1rem; }
    .formBox .otherFlex .btns .textbox .en{ font-size: 1rem; }

    .formBox .tables{ display: block; }
    .formBox .tables .tr{ display: block; background-color: #e1f8fb; padding: 10px; margin-bottom: 15px; }
    .formBox .tables .tr:last-child{ margin-bottom: 0; }
    .formBox .tables .tr.disnone-pc{ display: none; }
    .formBox .tables .td{ display: flex; border: none; padding: 5px; font-size: 1rem; }
    .formBox .tables .td.alignLeft-sp{ text-align: left; }
    .formBox .tables .td:before{ content: attr(data-title); min-width:70px; }
    .formBox .tables .td .sp_block{ flex:1; padding: 0 0 0 15px; }
    .formBox .tables .td .btn{ font-size: 1rem; }

    .formBox .voiceBtn .icon{ width: 20px; }
    .formBox .voiceBtn .text .ch{ font-size: 1rem; }
    .formBox .voiceBtn .text .en{ font-size: 0.875rem; }

    .bottomBlueLine{ margin-top: 20px; height: 1px; }

    
    /*上傳檔案樣式*/
    .fileStyle .newsStyle{ line-height: 36px; font-size: 1rem; height: 36px; border-radius: 5px; }

    /*單多選*/
    .optionsStyle .flexRadius .txt{ font-size: 1rem; }

    .optionsStyle .flexCheckbox .txt{ font-size: 1rem; }

    /*同意*/
    .agreeBlock{ align-items: flex-start; margin: 0 0 40px 0; padding: 30px 0 0 0; }
    .agreeBlock .list{ display: block; margin: 0 0 20px 0; }
    .agreeBlock > div > br{ display: none; }

    /*上傳檔案*/
    .fileFlex{ flex-direction: column; align-items: center; padding: 10px 0 0 0; }
    .fileFlex .txt{ font-size: 0.875rem; text-align: center; padding: 10px 0 0 0; }

    /*會員頁籤*/
    .memberFlex{ flex-direction: column; grid-gap:5px; margin-bottom: 30px; }
    .memberFlex .grids{ border: 1px solid #009fb7; border-radius: 100px; }
    .memberFlex .grids .gs{ min-width: 170px; justify-content: flex-start; }
    .memberFlex .grids .icon{ width: 25px; }
    .memberFlex .grids .textbox .ch{ font-size: 1rem; }
    .memberFlex .grids .textbox .en{ font-size: 0.75rem; }
    .memberFlex .grids.hold:after{ display: none; }

    .memberFlex.detail .grids .gs{ min-width:auto; }

    /*會員設定*/
    .memberSetDiv{ flex-direction: column; align-items: center; }
    .memberSetDiv .leftBox{ max-width: 250px; width: 100%; }
    .memberSetDiv .rightBox{ padding: 40px 0 0 0; width: 100%; }

    .photoBtn{ font-size: 0.875rem; line-height: 32px; border-radius: 5px; }

    /*會員收藏*/
    .collectionTitle{ display: none; }
    .totalText{ font-size: 0.875rem; }
    .totalText .numbers{ font-size: 1.375rem; }

    .sortTitleBox{ display: flex; }
    .sortTitleBox .grids{ display: block; flex:1; }
    .sortTitleBox .grids .collectionTitle{ display: flex; filter: saturate(600%) grayscale(100%); margin-bottom: 20px; }
    .sortTitleBox .grids .collectionTitle .text{ opacity: 0.5; padding: 0 0 0 5px; }
    .sortTitleBox .grids .collectionTitle .text .ch{ font-size: 1.25rem; }
    .sortTitleBox .grids .collectionTitle .text .en{ font-size: 1rem; }
    .sortTitleBox .grids .collectionTitle .icon{ width: 25px; }

    .sortTitleBox .grids.hold .collectionTitle{ filter:none; border-bottom: 1px solid #ff9016;}
    .sortTitleBox .grids.hold .collectionTitle .text{ opacity: 1; }

    /*會員收藏 小卡*/
    .indexEbookBox .flexBox{ grid-gap:0; }

    /*忘記密碼 光箱*/
    .lightbox .wbg{ padding:40px 10px 10px 10px; display: flex; flex-direction: column; }
    .lightbox .wbg .closeBtn{ width: 30px; height: 30px; border: 1px solid #000; top: 10px; right: 10px; }
    .lightbox .wbg .mainTitle{ margin-bottom: 20px; }
    .lightbox .wbg .mainTitle .ch{ font-size: 1.25rem; }
    .lightbox .wbg .mainTitle .en{ font-size: 0.875rem; }

    .lightbox .wbg .ranges{ flex:1; overflow-y: auto; }

    /*******電子書城*******/
    .ebookSort{ margin-bottom: 30px; }
    .ebookSort .onelevel{ flex-direction: column; grid-gap: 10px 0; margin-bottom: 0px; }
    .ebookSort .onelevel .grids{ width: 100%; }
    .ebookSort .onelevel .grids:last-child{ margin-bottom: 0; }
    .ebookSort .onelevel .grids .gs{ flex-direction: row; align-items: center; grid-gap:5px; border-radius:20px; box-shadow:none; }
    .ebookSort .onelevel .grids .gs .ch{ font-size: 1rem; }
    .ebookSort .onelevel .grids .gs .en{ font-size: 0.875rem; }

    .ebookSort .onelevel .grids.hold{ flex-direction: column; }
    .ebookSort .onelevel .grids.hold .gs:after{ display: none; }
    .ebookSort .onelevel .grids.hold .eachBox{ display: block; }

    .ebookSort .eachBox .grids{ font-size: 0.875rem; text-align: center; padding:15px 10px; margin-top: 5px; border-radius: 20px; }
    .ebookSort .eachBox .grids.hold{ background-color: #b1c584; }

    .ebookSort .twolevel{ display: none; }
	
	.ebookFunction{ margin: 0 0 30px 0; }
    .ebookFunction .input{ line-height: 36px; height: 36px; font-size: 1rem; padding: 0 10px; border-radius: 5px; }
    .ebookFunction .selectCenter{ width: 100%; }
    .ebookFunction .selectCenter .btnRight{ width: 100%; }
    .ebookFunction .selectCenter .btnRight .btn{ font-size: 1rem; line-height: 36px; height: 36px; border-radius: 5px; }
	
	/*靠左下拉選單*/
	.ebookLeftFunction{ margin: 0; }
    .ebookLeftFunction .input{ line-height: 36px; height: 36px; font-size: 1rem; padding: 0 10px; border-radius: 5px; }
    .ebookLeftFunction .selectCenter{ width: 100%; margin-bottom: 1em;}
    .ebookLeftFunction .selectCenter .btnRight{ width: 100%; }
    .ebookLeftFunction .selectCenter .btnRight .btn{ font-size: 1rem; line-height: 36px; height: 36px; border-radius: 5px; }

    /*詳細頁*/
    .ebookDetail{ flex-direction: column; margin-bottom: 40px; }
    .ebookDetail .imgs{ width: 100%; max-width: none; }
    .ebookDetail .imgs .likebtn{ width: 24px; }
    .ebookDetail .textbox{ padding: 15px 15px 0 15px; }
    .ebookDetail .textbox .pc{ display: none; }
    .ebookDetail .textbox .funbox{ flex-wrap: wrap; grid-gap:0 10px; }
    .ebookDetail .textbox .funbox .grids{ flex:1; }
    .ebookDetail .textbox .funbox .grids.txt{ flex:none; width: 100%; padding: 0 0 20px 0; }
    .ebookDetail .textbox .funbox .grids .btn{ text-align: center; line-height: 30px; font-size: 0.875rem; border-radius: 5px; }

    .ebookHideBox{ padding-bottom: 10px; margin-bottom: 60px; }
    .ebookHideBox:after{ height: 50px; }
    .ebookHideBox .openBtn{ width: 42px; height: 42px; }
    .ebookHideBox .openBtn .openText .arrow{ border-width: 7px 4px 0 4px; border-color: #fff transparent transparent transparent; }
    .ebookHideBox .openBtn .openText .txt{ padding: 2px 0 0 0; }
    .ebookHideBox .openBtn .openText .txt:after{ font-size: 0.875rem; }
	.ebookHideBox .openBtn.open .openText .arrow{ border-width: 0 4px 7px 4px; border-color: transparent transparent #fff transparent; }
    .ebookHideBox .rangeBlock .hideContent{ padding: 0 0 50px 0; }
	.ebookHideBox.open{ margin-bottom:100px;}

    .ebookDownload{ grid-gap: 20px 0; margin:0 5%; }
    .ebookDownload .grids{ width: 100%; padding:0; }
    .ebookDownload .grids .gs{ min-height: 200px; }
    .ebookDownload .grids .gs .title .ch{ font-size: 1rem; }
    .ebookDownload .grids .gs .title .en{ font-size: 0.875rem; }
    .ebookDownload .grids .gs .downloadBtn{ min-height: 30px; margin-bottom: 10px; }
    .ebookDownload .grids .gs .downloadBtn .icon{ width: 30px; }
    .ebookDownload .grids .gs .downloadBtn .txt{ font-size: 1rem; padding: 0 0 0 10px; }

    .ebookQA .qaList .qTitle .icon{ font-size: 1.25rem; width: 25px; }
    .ebookQA .qaList .qTitle .h3{ font-size: 1rem; padding: 0 0 0 5px; }
    .ebookQA .qaList .aTxt .icon{ font-size: 1.25rem; width: 25px; }
    .ebookQA .qaList .aTxt .p{ font-size: 1rem; padding: 0 0 0 5px; }

    .ebookBanner .backBtn{ display: flex; justify-content: center; margin-bottom: 15px; }
    .ebookBanner .backBtn .icon{ width: 16px; height: 16px; }
    .ebookBanner .backBtn .txt{ flex:none; font-size: 1rem; }
    .ebookBanner .imgs .pc{ display: none; }
    .ebookBanner .imgs .sp{ display: block; }

    /*******師資培訓*******/
    .searchTrain{ margin-bottom: 30px; }
    .searchTrain .searchFlex{ flex-direction: column; }
    .searchTrain .searchFlex .input{ line-height: 36px; height: 36px; font-size: 1rem; padding: 0 10px; border-radius: 5px; }
    .searchTrain .searchFlex .inputLeft{ flex:none; width: 100%; }
    .searchTrain .searchFlex .selectCenter{ width: 100%; }
    .searchTrain .searchFlex .btnRight{ width: 100%; }
    .searchTrain .searchFlex .btnRight .btn{ font-size: 1rem; line-height: 36px; height: 36px; border-radius: 5px; }
    .searchTrain .tagFlex{ grid-gap:20px; padding-top:10px;}
    .searchTrain .tagFlex .grids{ font-size: 0.875rem; }

    .filterBox{ flex-direction: column; }
    .filterBox .title{ width: 100%; }
    .filterBox .title .ch{ font-size: 1.25rem; }
    .filterBox .title .en{ font-size: 1rem; }

    .filterBox .filterContent{ padding: 15px 0 0 0; }
    .filterBox .filterContent .flexBox{ grid-gap:10px; margin-bottom: 15px; }
    .filterBox .filterContent .flexBox .grids{ padding:5px 15px; }
    .filterBox .filterContent .sendBtn{ width: 100%; height: 36px; line-height: 36px; font-size: 1rem; border-radius: 5px; }
    .filterBox .optionsStyle .flexCheckbox .txt{ font-size: 1rem; }
    .filterBox .optionsStyle .square{ width: 16px; height: 16px; border: #c2dbfe 2px solid; border-radius: 3px; }

    .trainingTitle{ flex-direction: column; margin-bottom: 20px; }
    .trainingTitle .title{ margin-bottom: 15px; }
    .trainingTitle .h2{ font-size: 1.25rem; }
    .trainingTitle .h3{ font-size: 1.125rem; }

    .trainingTitle .shareBox .likeBox .icon{ width: 22px; }
    .trainingTitle .shareBox .likeBox .txt{ font-size: 0.875rem; }
    .trainingTitle .shareBox .shareCommunity .shareLink img{ height: 27px; }
    .trainingTitle .shareBox .shareCommunity .txt{ font-size: 0.875rem; }

    .episodeBox{ margin-bottom: 20px; }
    .episodeBox .flexBox{ grid-gap: 10px 0; margin-left: -10px; }
    .episodeBox .flexBox .grids{ width: 33.33334%; padding-left: 10px; }
    .episodeBox .flexBox .grids .gs{ font-size: 1rem; line-height: 30px; height: 30px; }

    .briefTextBox{ padding: 0 0 20px 0; margin-bottom: 20px; }
    .briefTextBox .titleBox .h3:after{ height: 3px; bottom: -3px; }
    .briefTextBox .titleBox .h3{ min-width: none; width: 100%; }
    .briefTextBox .titleBox .h3 .ch{ font-size: 1rem; }
    .briefTextBox .titleBox .h3 .en{ font-size: 1rem; }

    .briefTextBox .textContent{ padding: 20px 0 0 0; }

    /*******僑校園地*******/
    .overseasTitle{ flex-wrap: wrap; grid-gap:10px; }
    .overseasTitle .h2{ flex:none; width: 100%; font-size: 1.25rem; }
    .overseasTitle .category{ font-size: 0.875rem; border-radius: 5px;     line-height: 24px; padding: 0 10px; }

    .overseasFunction .schoolText .icon{ width: 24px; }
    .overseasFunction .schoolText .title{ font-size: 0.875rem; }

    .overseasFunction .printBtn{ width: 24px; }

    /*******最新消息*******/
    .newsSort{ justify-content: start; margin-bottom: 40px; }
    .newsSort .grids{ width: 100%; }
    .newsSort .grids .gs{ padding:10px 5px; border-radius: 15px; display: flex; justify-content: center; align-items: center; grid-gap:0 5px; }
    .newsSort .grids .gs .ch{ font-size: 1rem; }
    .newsSort .grids .gs .en{ font-size: 0.75rem; }

    .indexNewsBox .newsList{ display: grid; grid-template-columns: 74px 1fr; grid-gap:10px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #009fb7; }
    .indexNewsBox .newsList .newsImg{ display: block; }
    .indexNewsBox .newsList .newsImg .img{ position: relative; width: 100%; padding-bottom: 76.19%; background-position: center; background-repeat: no-repeat; background-size: cover; }
    .indexNewsBox .newsList .contentData .flexBox{ display: block; position: relative; }
    .indexNewsBox .newsList .contentData .flexBox .flexSort{ width: 50px; }
    .indexNewsBox .newsList .contentData .flexBox .flexSort .sort{ font-size: 0.875rem; border-radius: 5px; line-height: 24px; }
    .indexNewsBox .newsList .contentData .flexBox .listLine{ display: block; border-bottom: none; padding-bottom: 0; }
    .indexNewsBox .newsList .contentData .flexBox .listLine .date{ font-size: 1rem; position: absolute; top: 2px; left: 60px; }
    .indexNewsBox .newsList .contentData .flexBox .listLine .h2{ padding: 5px 0 0 0; }
    .indexNewsBox .newsList .contentData .flexBox .listLine .h2 .txt{ font-size: 1rem; overflow:initial; text-overflow:initial; white-space:initial; }

    /*******常見問題*******/
    .faqBlock .aqList{ margin-bottom: 20px; padding-bottom: 10px; }
    .faqBlock .aqList .title{ padding: 10px; font-size: 1.25rem; }
    .faqBlock .aqList .mlist .qbox{ padding: 10px; }
    .faqBlock .aqList .mlist .qbox .icon{ font-size: 1.5rem; width: 30px; }
    .faqBlock .aqList .mlist .qbox .h3{ font-size: 1rem; }

    .faqBlock .aqList .mlist .abox{ padding: 0 40px 0 10px; }
    .faqBlock .aqList .mlist .abox .icon{ font-size: 1.5rem; width: 30px; }
    .faqBlock .aqList .mlist .abox .h3{ font-size: 1rem; }

    /*******聯絡我們*******/
    .contactSearch{ flex-direction: column; grid-gap:10px; }
    .contactSearch .titles .icon{ width: 26px; }
    .contactSearch .titles .textBox .ch{ font-size: 1rem; }
    .contactSearch .titles .textBox .en{ font-size: 1rem; }
    .contactSearch .grids-1{ width: 100%; }
    .contactSearch .grids-2{ width: 100%; }
    .contactSearch .grids-3{ width: 100%; }
    .contactSearch .btn{ line-height: 36px; height: 36px; font-size: 1rem; }

    /*******搜尋結果*******/
    .searchResultsBox{ margin-bottom: 20px; }
    .searchResultsBox .grids{ width: 100%; text-align: center; font-size: 1rem; padding:7px 10px; }

    .searchResultsTable .th{ font-size: 1rem; padding: 5px 10px; }
    .searchResultsTable .td{ font-size: 1rem; padding: 5px 10px; }

    /*******台語文學習網*******/
    .bearImg{ display: none; }

}