@charset "UTF-8";
/* Footer */
/* CSS Document */
* {
  padding: 0;
  margin: 0;
  font-family: Georgia, "微軟正黑體", "新細明體";
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
/*2023/1/2矛點控制 */
:target:before {
content: """";
display: block;
height: calc( 5px + 8vw );
}
/*2023/1/2矛點控制end */
html { font-size: 1rem; }
html,body{ max-width:100vw; overflow-x:hidden; }

a { text-decoration: none; }

.d-flex { display: flex; }
.text_left { text-align: left; }
.img-rwd {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border-style: none;
}
/* 主要區域 Tag */
.guide { z-index: 1; }
.blockbox .guide { position: absolute; top: 25px; left: 0; }
.sr-only { position: absolute; font-size: 0; width: 0.063rem; height: 0.063rem; padding: 0; margin: -0.063rem; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; z-index: 1000; }
.sr-only-focusable:active, .sr-only-focusable:focus { position: absolute; top: 0; left: 0; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }

/* Header Tag */
.twobar .guide { position: absolute; left: -20px; }

/* Header */
.header { height: 230px; width: 100%; z-index: 90; position: fixed; top: 0; left: 50%; transform: translatex(-50%); background-color: #ffffff; }
.header .onebar { display: flex; margin: 2px auto; padding: 0 30px; position: relative; }

.header .onebar.header-bar-top { padding: 0 10px 0 30px; max-width: 1170px; }
.header .onebar.header-bar-top > .d-flex { margin-left: auto; }
.header .onebar.header-bar-top > .d-flex a { color: #8fa84e; line-height: 52px; margin-left: 8px; }
.header .onebar.header-bar-top > .d-flex a.icon_home { margin-right: 6px; }
.header .onebar.header-bar-top > .d-flex a.icon_map { font-size: 0; width: 42px; height: 42px; background-image: url(../images/layout/icon01.svg); background-repeat: no-repeat; background-size: contain; }
.header .onebar.header-bar-top > .d-flex a.icon_ocac { font-size: 0; width: 42px; height: 42px; background-image: url(../images/layout/icon02.svg); background-repeat: no-repeat; background-size: contain; }
.header .onebar.header-bar-top > .d-flex a.icon_huayuworld { font-size: 0; width: 42px; height: 42px; background-image: url(../images/layout/icon04.svg); background-repeat: no-repeat; background-size: contain; }

.header .onebar.header-bar-menu { position: relative; max-width: 1170px; }
.header .onebar.header-bar-menu .logo {display: block;width: 200px;}
.header .onebar.header-bar-menu .logo img { width: 100%; vertical-align: middle; border-style: none; }

.header .onebar.header-bar-menu .mobile-btn { display: none; }
.header .onebar.header-bar-menu .searchbox { display: none; }
.header .onebar.header-bar-menu .guide { max-height: 22px; }

/* header - 次選單 */
.header .onebar.header-bar-menu .twobar { position: absolute; right: 0; padding-right: 10px;  /* width: calc(100% - 608px - 50px); */ }
.header .onebar.header-bar-menu .twobar .mar { position: relative; display: flex; flex-wrap: wrap; float: right; }
.header .onebar.header-bar-menu .twobar .grids { position: absolute; top: 0; left: 0; }
.header .onebar.header-bar-menu .twobar .mar .grids { position: relative; margin-right: 60px; }
.header .onebar.header-bar-menu .twobar .mar .grids .alink * { font-size: 1.2rem; }
.header .onebar.header-bar-menu .twobar .mar .grids .grids_ch { color: #20ac9b; font-weight:bold;}
.header .onebar.header-bar-menu .twobar .mar .grids .grids_en { color: #0f1628; }

@media all and (min-width:1201px){
  .header .onebar.header-bar-menu .twobar .grids a:hover + div.du,
  .header .onebar.header-bar-menu .twobar .grids a:focus + div.du { display: block; }
  .header .onebar.header-bar-menu .twobar .grids.grids_focus .du { display: block; }
}
.header .onebar.header-bar-menu .twobar .grids .grids-sub { position: absolute; }

.header .onebar.header-bar-menu .twobar .du { position: absolute; top: 100%; left: 0; display: none; }
.header .onebar.header-bar-menu .twobar .du .listTxt { background-color: rgba(49, 178, 158, 0.9); border-bottom: 2px solid #ffffff; }
.header .onebar.header-bar-menu .twobar .du .listTxt:last-child { border-bottom: unset; }
.header .onebar.header-bar-menu .twobar .du .listTxt a { display: block; line-height: 30px; font-size: 1.1em; color: #ffffff; width: 100%; text-align: center; padding: 10px 12px;}
.header .onebar.header-bar-menu .twobar .du .listTxt a:hover{color:#cff4ef;}
.header .onebar.header-bar-menu .sh_boxs { display: none; }


/* Footer */
.footer { background-color: #434343; margin: 50px 0 0px; padding: 50px 0 50px; }
.footer .mar { max-width: 1170px; /*max-width: 1390px;*/ margin: 0 auto; padding: 0 100px; }
.footer .mar .d-flex { display: flex; }
.footer .mar .d-flex .flex-fill { flex: 1; }
.footer .mar .footerLeftBox,
.footer .mar .flb-bottom { color: #ffffff; }
.footer .mar .footerLeftBox a:hover{color:#8fa84e;}
.footer .mar .footerLeftBox .flb-top-cn { font-size: 1.5em; color: #ffffff;}
.footer .mar .footerLeftBox .flb-top-eng { font-size: 1.2em; color: #ffffff; margin-bottom: 0.5em;}
.footer .mar .flb-bottom { font-size: 1rem; padding-right: 25px; margin: 25px 0; line-height: 1.8rem; }
.footer .mar .footerRightBox .frb-grids { position: relative; display: inline-block; color: #f28f71; font-size:  1rem; line-height: 1.8rem; margin-right: 10px; padding-right: 10px; word-wrap: inherit; }
.footer .mar .footerRightBox a:hover{color:white;}
/*.footer .mar .footerRightBox .frb-grids::before { content: ""; position: absolute; top: 5px; bottom: 5px; right: 0; border-right: 1px solid #f28f71; }*/
.footer .mar .footerIframeBox { max-width: 340px; }
.footer .mar .footerIframeBox .footerIframe { text-align: center; max-height: 130px; max-width: 340px; width: 100%;
  position: relative;
  /*padding-top: 25px;*/
  padding-bottom: 38.23%;
  margin-top: 20px;
  height: 0;
}
.footer .mar .footerIframeBox .footerIframe iframe { position: absolute; top: 0; left: 0; width: 100%; max-height: 130px; height: 100%; }

/* TOP */
.topbtn { height: 60px; width: 60px; line-height: 100px; z-index: 100; position: fixed; bottom: 15px; right: 15px; background-color: #8fa84e; border-radius: 50%; }
.topbtn span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.2rem; text-align: center; color: #ffffff; }

/* 主要內容區域 - 基礎 */
.blockbox { position: relative; z-index: 1; max-width: 1170px; margin: 230px auto 0; padding: 0px 22px; }
.blockbox .listblock { padding: 5px 0  50px 0; }
.blockbox .listblock .maintitle { display: block; padding: 10px 0; text-align: center; }
.blockbox .listblock .maintitle .mt_alink { display: block; margin-bottom: 0px; }
.blockbox .listblock .maintitle .mt_alink.flex{ display:flex; align-items: center; justify-content: center; }
.blockbox .listblock .maintitle .mt_alink * { display: inline-block; font-size: 1.875rem; line-height: 80px; vertical-align:middle; }
.blockbox .listblock .maintitle .mt_alink .mt_en { color: #20ac9b; margin-right:15px; }
.blockbox .listblock .maintitle .mt_alink .mt_ch { color: #313131; }
.blockbox .listblock .maintitle .mt_alink .icon_s{  width:101px; height:78px; background-position:center; background-repeat:no-repeat; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; margin-right:10px; }
.blockbox .listblock .maintitle .mt_alink .icon_s.i01{ background-image:url(../images/index/icon_title01.png); }
.blockbox .listblock .maintitle .mt_alink .icon_s.i02{ background-image:url(../images/index/icon_title02.png); }
.blockbox .listblock .maintitle .mt_alink .icon_s.i03{ background-image:url(../images/index/icon_title03.png); }

/* 最新消息 */
.main_news { display: flex; }
.main_news .news_box, .news_video { flex: 1; }

.main_news .news_box { max-width: 55%; padding-right: 25px; min-width: 55%; }
.main_news .news_box .news_title { position: relative; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.main_news .news_box .news_title .news_title_box { position: relative; display: block; padding: 0px 60px; }
/*.main_news .news_box .news_title .news_title_box .title_grids { position: relative; display: inline-block; height: 40px; padding-right: 30px; margin-right: 30px; color: #666666; font-size: 1.2rem; line-height: 40px; } 2021-09-06 james */
.main_news .news_box .news_title .news_title_box .title_grids { position: relative; display: inline-block; height: 40px; color: #666666; font-size: 1.2rem; line-height: 40px; }
/*.main_news .news_box .news_title .news_title_box .title_grids::before { content: ""; position: absolute; top: 2px; bottom: 2px; right: 0; border-right: 1px solid #666666; }*/
.main_news .news_box .news_title .news_title_box .title_grids:last-child { padding-right: 0px; }
.main_news .news_box .news_title .news_title_box .title_grids:last-child:before { border-right: none; margin-right: 0; }
.main_news .news_box .news_title .news_title_box .title_grids.hold { color: #6e9612; }

.main_news .news_box .news_title .news_title_right { z-index: 1; position: absolute; top: 5px; right: 5px; }
.main_news .news_box .news_title .news_title_left { z-index: 1; position: absolute; top: 5px; left: 5px; background-color: #ffffff; }
.main_news .news_box .news_title .news_title_left::before { z-index: 0; content: ""; position: absolute; top: -5px; left: -5px; background-color: #ffffff; height: 45px; width: 45px; }
.main_news .news_box .news_title * { transition: all 0.5s; }
.main_news .news_box .news_title .nomore { cursor: not-allowed; }
.main_news .news_box .news_title .nomore img { opacity: 0.5; }
.main_news .news_box .news_title .news_title_right img,
.main_news .news_box .news_title .news_title_left img { z-index: 1; position: relative; width: 100%; }

.main_news .news_box .news_list { display: block; }
.main_news .news_box .news_list .news_grids { position: relative; display: flex; padding: 20px 0; }
.main_news .news_box .news_list .news_grids::before { position: absolute; content: ""; bottom: 0; left: 0; right: 0; border-bottom: 4px solid #e0e0e0; }
.main_news .news_box .news_list .news_grids * { font-size: 1.2rem; line-height: 30px; }
.main_news .news_box .news_list .news_grids .news_date { color: #ec6941; padding-right: 40px;}
.main_news .news_box .news_list .news_grids .news_title { color: #000000; padding-right: 0px; }

.main_news .news_box .news_list .news_more { position: relative; display: block; text-align: right; padding: 25px 5px 0 0; }

.plus_more { padding: 3px 12px; font-size: 20px; color: #8d9e48; border: 1px solid #8d9e48; border-radius: 20px; }

.main_news .news_video { display: block; text-align: center; margin: 0 auto; }
.main_news .news_video .news_iframe { text-align: center;
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}
.main_news .news_video .news_iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.main_news .news_video .news_vtitle { padding-top: 25px; color: #000000; font-size: 1.2rem; line-height: 30px;}

.news_anchor { position: absolute; top: -280px; font-size: 0px !important; }

/*新增地圖*/
.blockbox .listblock .mapblock{ padding:20px 0 30px 0; }
.blockbox .listblock .mapbox {
    position: relative;
    width: 100%;
    height: 40vh;
    padding-bottom: 40%;
}

.blockbox .listblock .mapbox iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 首頁 - 華語文教材 */
.mandarin_box { display: flex; }
.mandarin_box .mandarin_grids { flex: 1; padding: 30px; margin-right: 2px;/* max-width: 320px;*/ }


.mandarin_box .mandarin_grids:last-child { margin-right: 0; }
.mandarin_box .mandarin_grids .m_flex{ display:flex; margin-bottom:20px; }
.mandarin_box .mandarin_grids .m_title { color: #ffffff; font-size: 1.5rem; line-height: 40px; flex:1; padding-left:10px; }
.mandarin_box .mandarin_grids .m_icon { position: relative; width:90px; height:90px; }
.mandarin_box .mandarin_grids .m_icon img { position: relative; width: 100%; height: 100%; border: none; }
.mandarin_box .mandarin_grids .m_icon:before { content: ""; position: absolute; top: calc( 50% ); left: calc( 50% ); transform: translate(-50%, -50%); background-color: #ffffff; border-radius: 50%; height: calc(100% - 5px); width: calc(100% - 5px); }
.mandarin_box .mandarin_grids .mflist{ display:flex; width:100%; margin-bottom:20px; }
.mandarin_box .mandarin_grids .mflist .mf01{ width:13px; }
.mandarin_box .mandarin_grids .mflist .mf01 span{ margin: 7px 0 0 0; display:block; width:100%; padding-bottom:100%; background:#fff; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; }
.mandarin_box .mandarin_grids .mflist .mf02{ flex:1; padding:0 0 0 10px; }
/*.mandarin_box .mandarin_grids .mflist .mf02 a{ color:#fff; font-size:1.2rem; overflow: hidden;
text-overflow: ellipsis;
display:  -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}*/
.mandarin_box .mandarin_grids .mflist .mf02 a{ color:#fff; font-size:1.2rem; overflow: hidden;
text-overflow: ellipsis;
display:  -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.mandarin_box .mandarin_grids.mmg_01 { background-color: #f14975; }
.mandarin_box .mandarin_grids.mmg_02 { background-color: #f19149; }
.mandarin_box .mandarin_grids.mmg_03 { background-color: #f7ca41; }
.mandarin_box .mandarin_grids.mmg_04 { background-color: #6bbe5d; }

/* 首頁 - 師資專區 */
.teacher_box { display: flex; }
.teacher_box .teacher_grids { flex: 1; text-align: center; padding: 0 15px; }
.teacher_box .teacher_grids .t_title { display: block; padding-bottom: 10px; }
.teacher_box .teacher_grids .t_title * { font-size: 1.5rem; font-weight: bold; line-height: 30px; }
.teacher_box .teacher_grids .t_title .t_en { color: #ec6941; margin-right: 0px; font-size: 1.2rem;}
.teacher_box .teacher_grids .t_title .t_ch { display: inline-block; color: #000000; }
.teacher_box .teacher_grids .t_img { width: 100%;
    padding-bottom: 70%;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    position: relative; overflow:hidden; }
/*.teacher_box .teacher_grids .t_img {}*/
.teacher_box .teacher_grids .t_img img { width:auto; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; max-width:100%; max-width:100%; }
.teacher_box .teacher_grids .t_more { padding: 0 5px; }
.teacher_box .teacher_grids .t_more .t_more_btn { font-size: 1.2rem; line-height: 36px; width: 180px; margin: 22px auto  10px; padding: 10px 0px 14px 0px; color: #ffffff; background-color: #ec6941; border-radius: 29px; }

.teacher_box .t_content { text-align: left; }
.teacher_box .t_content .t_title_v2 { min-height: 64px; color: #000000; padding: 10px 0 15px; font-size: 1.3rem; line-height: 1.3em; font-weight:bold;}
.teacher_box .t_content .t_txt { min-height: 70px; color: #000000; font-size: 1rem; line-height: 1.3rem; }
.teacher_box .t_content .map_txt { min-height: 20px; color: rgba(49, 178, 158, 1); font-size: 1rem; position: relative;	border-radius: .4em; line-height: 20px; padding: 0.5em 0.5em 0.5em 0em;}

/* 學習專區 輪播 */
.teacher_box.lc_type .teacher_grids { position: relative; padding: 0 30px 90px; }
.teacher_box.lc_type .teacher_grids .t_more { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); max-width: 360px; width: 100%; }
.teacher_box.lc_type .teacher_grids .t_more .t_more_btn { max-width: 360px; width: 100%; font-weight: unset; }

/* 首頁 補正 */
.blockbox.indexBlock { max-width: 100%; padding-left: 0px; padding-right: 0px; }
.blockbox.indexBlock .guide { z-index: 10; top: 5px; left: 5px; }
.blockbox.noMargin.indexMain { max-width: 1170px; }

/* 銜接補正 */
.blockbox.noMargin { margin-top: 0 !important; }


/* Banner */
.main_banner { position: relative; width: 100%; height: 600px; }
.main_banner.mb_autoheight { height: auto; }

/* Banner 箭頭 */
.left_btn, .right_btn { font-size: 0px !important; }
.main_banner .left_btn, .main_banner .right_btn { z-index: 1; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background-color: rgba(32, 172, 155, 0.5); }
.main_banner .left_btn::before,
.main_banner .right_btn::before { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 30px; transform: translate(-50%, -50%); background-position: center; background-size: 18px 37px; }
.main_banner .left_btn { left: 0px; }
.main_banner .left_btn::before { background-image: url(../images/index/left_btn.png); }
.main_banner .right_btn { right: 0px; }
.main_banner .right_btn::before { background-image: url(../images/index/right_btn.png); }

/* Banner 點點 */
.main_banner .banner_dot { z-index: 1; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); }
.main_banner .banner_dot .a_dot { display: inline-block; font-size: 0px; width: 20px; height: 20px; margin-right: 10px; background-color: #b5b5b5; border-radius: 10px; }
.main_banner .banner_dot .a_dot:last-child { margin-right: 0; }
.main_banner .banner_dot .a_dot.focus { position: relative; background-color: #ffffff; }
.main_banner .banner_dot .a_dot.focus::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; background-color: #f14975; border-radius: 10px; }

/* Banner */
.main_banner .banner_con { height: 100%; }
.main_banner .banner_con .slick_div { display: block; height: 100%; }
.main_banner .banner_con .slick_div .slick_grid { display: block; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; }
.main_banner .banner_con .slick_div .slick_grid img { /*display: none;*/ width: 100%; }

.main_banner .banner_con .slick_div a.slick_grid:focus { border: 1px solid #000000; }

/* Slick 補正 */
.main_banner .banner_con .slick-list,
.main_banner .banner_con .slick-track,
.main_banner .banner_con .slick-slide,
.main_banner .banner_con .slick-slide > div { font-size: 0; height: 100%; }

/* 首頁 搜尋 */
.main_search { position: relative; width: 100%; padding: 30px 0; background-color: #20ac9b; }
.main_search .search_out { margin: 0 15px; }
.main_search .search_out .search_box { position: relative; display: flex; max-width: 1200px; padding: 20px 30px; background-color: #ffffff; margin: 0 auto; }
.main_search .search_out .search_box .search_icon { position: absolute; top: 50%; left: 45px; transform: translateY(-50%); background-image: url(../images/layout/icon_search.png); height: 36px; width: 36px; }
.main_search .search_out .search_box .search_input { position: relative; font-size: 20px; margin-left: 82px; padding: 0 10px; border: 1px solid #000000; border-right: none; height: 40px; width: 100%; }
.header .onebar.header-bar-menu .searchbox .redinput label.search_select,
.main_search .search_out .search_box .search_select { flex: none; position: relative; border: 1px solid #000000; }
.header .onebar.header-bar-menu .searchbox .redinput label.search_select { border: 2px solid #de6673 ;border-bottom: none; border-top:none;}
.header .onebar.header-bar-menu .searchbox .redinput label.search_select select,
.main_search .search_out .search_box .search_select select { font-size: 1.1rem; width: 100%; height: 100%; border: none; padding: 0 45px 0 15px;
  -moz-appearance:none; /* Firefox */
  -webkit-appearance:none; /* Safari and Chrome */
  appearance:none;
  background-image: url(../images/layout/select_arrow.png);
  background-repeat: no-repeat;
  background-position: calc(100% - 15px);
}
/*.main_search .search_out .search_box .search_select::after { content: ""; position: absolute; width: 0; height: 0; top: 50%; right: 15px; transform: translateY(-50%); border-style: solid; border-width: 16px 9px 0 9px; border-color: #828380 transparent transparent transparent; }
.main_search .search_out .search_box .search_select::before { content: ""; position: absolute; width: 30px; top: 1px; bottom: 1px; right: 1px; background-color: #ffffff; }*/
.main_search .search_out .search_box .search_btn { font-size: 1.1rem; padding: 0 45px; border: none; color: #ffffff; background-color: #ec6941; border: 1px solid #ec6941; cursor: pointer; }

/* 主視覺外 Slick 總集 */
.slickBox { position: relative; }
.slickBox>div{ overflow: hidden; }
.slickBox .left_btn,
.slickBox .right_btn { display: none; position: absolute; top: 50%; transform: translateY(-50%); height: 42px; width: 1.2rem; background-size: contain; background-repeat: no-repeat; background-position: center; }
.slickBox .left_btn { left: 10px; background-image: url(../images/index/left_btn_index_main.png); }
.slickBox .right_btn { right: 10px; background-image: url(../images/index/right_btn_index_main.png); }
.slickBox.showBtn { padding: 0 50px; }
.slickBox.showBtn .left_btn,
.slickBox.showBtn .right_btn { display: block; }
.mandar_slick .slick-slide{ margin: 0 20px; }
.slickBox .slick-track { display: flex !important; }
.slickBox .slick-slide { height: inherit !important; }
.slickBox .slick-slide > div,
.slickBox .slick-slide > div > * { height: 100%; }

/*0215我測試用*/
.pics{ position:relative; height:250px;}
@media all and (max-width: 768px) {
	.pics{ position:relative; height:150px;}
}
.pics img{ position:absolute;
  /* 淡出淡入效果2秒 */
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
	max-width: 100%;
 }
 .pics img:last-child:hover{
	 /* 滑入時第一張透明度設0 */
	  opacity:0;
      max-width: 100%;
}
.pics img:last-child:click{
	 /* 滑入時第一張透明度設0 */
	  opacity:0;
      max-width: 100%;
}

/*0215end我測試用*/


/*2月新加教材button*/
#icon-wrapper{
	width:100%;
	float:left;
	height:300px;
	margin-bottom: 3em;
}
.icon_height{height: 300px;}
.icons {
	width:25%;
	float:left;
	position:relative;
}
.icons2 {
	width:25%;
	float:left;
	position:relative;
	margin-left:25%;
}
.icons3 {
	width:25%;
	float:left;
	position:relative;
	margin-left:50%;
}
.icons4 {
	width:25%;
	float:left;
	position:relative;
	margin-left:75%;
}

.icon-slide-container{
	height:300px;
	overflow:hidden;
	text-align: left;
	position: absolute;
	float: ;
	width: 300px;
	left: 50%;
	margin-left: ;
}

.slide-icon{
  width:300px;
  height:auto;
  position:absolute;
  margin-top:-300px;
  -webkit-transition:.4s ease;
  -moz-transition:.4s ease;
  -ms-transition:.4s ease;
  -o-transition:.4s ease;
  transition:.4 ease;
}

.slide-icon:hover{
  position:absolute;
  margin-top:0;
}

.slide-icon:click{
  position:absolute;
  margin-top:0;
}

@media only screen and (max-width: 1300px) {
  #icon-wrapper{
		width:100%;
		float:left;
		height:170px;
	}
  .icon-slide-container {
		height: 200px;
		overflow: hidden;
		text-align: left;
		position: absolute;
		float: left;
		width: 200px;
		left: 50%;
		margin-left: -100px;
	}
  .slide-icon {
		width: 200px;
		height: auto;
		position: absolute;
		margin-top: -200px;
	}
}

@media only screen and (max-width: 1000px) {
  #home-social-container{
		margin-right: 0;
		margin-left: 0;
		width: 100%;
		padding: 0;
		float: left;
		left: 0;
	}
}

@media only screen and (max-width: 840px) {
	html,body{ max-width:100vh; overflow-x:hidden; }
  #icon-wrapper{
		width:100%;
		float:left;
		height:650px;
	}
	.icon-slide-container {
		height: 300px;
		overflow: hidden;
		text-align: left;
		position: absolute;
		float: left;
		width: 300px;
		left: 50%;
		margin-left: -150px;
	}

	.slide-icon {
		width: 300px;
		height: auto;
		position: absolute;
		margin-top: -300px;
	}
	.icons {
		width: 50%;
		float: left;
		position: relative;
	}
	.icons2 {
		width: 50%;
		float: left;
		position: relative;
		margin-left: 50%;
	}
	.icons3 {
		width: 50%;
		float: left;
		position: relative;
		margin-left: 0%;
		margin-top: 350px;
	}
	.icons4 {
		width: 50%;
		float: left;
		position: relative;
		margin-left: 50%;
	}
}

@media only screen and (max-width: 650px) {
	#icon-wrapper {
		height: 400px;
	}
	#section{
		width: 90%;
		padding-left:5%;
		padding-right:5%;
	}
	.slide-icon {
		width: 200px;
		height: auto;
		position: absolute;
		margin-top: -200px;
	}
	.icon-slide-container {
		height: 200px;
		width: 200px;
		left: 50%;
		margin-left: -100px;
	}
	.icons3 {
		width: 50%;
		position: relative;
		margin-left: 0%;
		margin-top: 230px;
	}
}

@media only screen and (max-width: 570px) {
	#icon-wrapper {
		height: 300px;
	}
	.slide-icon {
		width: 150px;
		height: auto;
		position: absolute;
		margin-top: -150px;
	}
	.icon-slide-container {
		height: 150px;
		width: 150px;
		left: 50%;
		margin-left: -75px;
	}
	.icons3 {
		width: 50%;
		float: left;
		margin-left: 0%;
		margin-top: 190px;
	}
}
/*新增地圖*/
.img_rwd{max-width: 100%; height: auto;}
.school_map{
	max-width:1151px;
	margin-bottom: 3em;
	cursor: pointer;
}

/* Header PC ~ Pad 區間動態尺寸 */
@media all and (min-width:1201px) and (max-width:1920px){
  .header { height: calc( 5px + 8vw ); }
  .header .onebar.header-bar-menu .logo { max-width: calc(30vw - 30px); min-height: 60px; }
  .header .onebar.header-bar-menu .twobar { width: calc(100% - 18vw - 5px); }
  .header .onebar.header-bar-menu .twobar .mar .grids { margin-right: 1.5vw; }
  .header .onebar.header-bar-menu .twobar .mar .grids .alink * { font-size: 1.2rem; }

  .blockbox { margin: calc( 5px + 8vw ) auto 0; }
}
/* Header 區 子選單 反應 - 至 Pad 尺寸 */
@media all and (min-width: 1201px) {
  .anchor { position: absolute; top: -116px; font-size: 0px; }

  .header .onebar.header-bar-menu .logo { position: absolute; left: 50px; top:-1em;}

  .header .onebar.header-bar-menu .twobar .grids .grids-sub { display: none; }
  .header .onebar.header-bar-menu .twobar .du:hover,
  .header .onebar.header-bar-menu .twobar .du hover { display: block; }
}

/* Header 區 - Menu 按鈕 */
@media all and (max-width: 1200px) {
  .anchor { position: absolute; top: -83px; font-size: 0px; }

  .blockbox { margin-top: 116px; min-height: unset; }

  .header .onebar { margin: 0px auto 10px; }
  .header .onebar.header-bar-top { display: none; }
  .header .onebar.header-bar-menu .logo { width: 250px; margin:auto; display: block;}
  .header .onebar.header-bar-menu .mobile-btn { display: flex; position: absolute; top: 30px; left: 20px; width: 74px; height: 52px; background: #f3f5f7; justify-content: center; align-content: center; flex-direction: column; cursor: pointer; }
  .header .onebar.header-bar-menu .mobile-btn span { display: block; width: 30px; height: 2px; background: #000; margin: 7px auto; }
  .header .onebar.header-bar-menu .mobile-btn:before { content: ""; display: block; width: 30px; height: 2px; background: #000; margin: 0 auto; }
  .header .onebar.header-bar-menu .mobile-btn:after { content: ""; display: block; width: 30px; height: 2px; background: #000; margin: 0 auto; }

  /* 搜尋 - 行動 */
  .header .onebar.header-bar-menu .searchbox { position: relative; display: block; width: auto; top: 10px; }
  .header .onebar.header-bar-menu .searchbox .search_btn { display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 52px; height: 52px; background-image: url(../images/layout/search.svg); cursor: pointer; }
  /* 搜尋 - 內容 */
  .header .onebar.header-bar-menu .searchbox .redinput { display: none; position: fixed; right: 30px; left: 18px; top: 116px; z-index: 100; height: 52px; margin-right: 14px; border:2px solid #eb6877; }
  .header .onebar.header-bar-menu .searchbox .redinput label{ display:none; }
  .header .onebar.header-bar-menu .searchbox .redinput label.search_select{ display: inline-block; position: absolute; top: -1px; bottom: 01px; right: 0; padding-right: 30px; }
  .header .onebar.header-bar-menu .searchbox .redinput label.search_select select { font-size: 1.2rem; }
  .header .onebar.header-bar-menu .searchbox .redinput .inputs{ background:#fff; border:none; padding:5px; line-height:50px; height:50px; width:100%; font-size:1.2rem; }
  .header .onebar.header-bar-menu .searchbox .redinput .btns{ font-size:0px; position:absolute; top:-5px; right:-24px; width: 52px; height: 52px; background:none; background-image:url(../images/layout/search.svg); cursor:pointer; border:none; }
  /* 開啟 */
  body.mb_search .header .onebar .searchbox .search_btn { background-image: url(../images/layout/close.svg); }
  body.mb_search .header .onebar .searchbox .redinput { display: block; }

  /* 次選單 */
  .header .onebar.header-bar-menu .twobar{ display:none; background: #fff; position: fixed; top: 116px; left: 0px; right: 0px; height: calc(100vh - 116px); padding-right: 0px; width: 100%; float: none; overflow: auto; }
  .header .onebar.header-bar-menu .twobar .mar{ padding:0; display:block; float: none; }
  .header .onebar.header-bar-menu .twobar .mar .grids{ border-bottom:1px solid #000; margin: 0; }
  .header .onebar.header-bar-menu .twobar .mar .grids .alink{ line-height: unset; padding: 0 50px; }
  .header .onebar.header-bar-menu .twobar .mar .grids .alink br { display: none; }
  .header .onebar.header-bar-menu .twobar .mar .grids .alink.arrow:after{ content:""; display:inline-block; vertical-align:middle; border-width:8px 5px 0 5px; border-style:solid; border-color:#20ac9b transparent transparent transparent; margin: 0 0 0 8px; }
  .header .onebar.header-bar-menu .twobar .mar .grids .alink * { font-size: 1.2rem; height: 66px; line-height: 66px; }
  .header .onebar.header-bar-menu .twobar .mar .grids .alink .grids_en { color: #20ac9b; margin-right: 5px; }
  .header .onebar.header-bar-menu .twobar .mar .grids .alink .grids_ch { color: #0f1628; position: relative; }
  .header .onebar.header-bar-menu .twobar .mar .grids.grids-sub .alink .grids_ch::before { position: absolute; content: ""; top: 50%; right: -25px; transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 10px 7px 0 7px; border-color: #20ac9c transparent transparent transparent; }

  .header .onebar.header-bar-menu .twobar .mar .grids .du { position: static; box-shadow:none; padding: 20px 0; background-color: rgba(49, 178, 158, 1); }
  .header .onebar.header-bar-menu .twobar .mar .grids .du .listTxt { width: 100%;  }
  .header .onebar.header-bar-menu .twobar .mar .grids .du .listTxt a { font-size: 1.2rem; line-height: 48px; text-align: left; padding-left: 80px; }

  /* 社群分享 */
  .header .onebar.header-bar-menu .twobar .sh_boxs{ display:block; text-align:center; padding:30px 0; }
  .header .onebar.header-bar-menu .twobar .sh_boxs .sh_grids{ width:105px; height:105px; background-repeat:no-repeat; background-size:100%; display: inline-block; vertical-align:middle; margin:0 3px; font-size:0; }

  /* 次選單 - 開啟 */
  body.mb_menu { overflow: hidden; }
  body.mb_menu .header .onebar.header-bar-menu .twobar { display: block !important; }
  body.mb_menu .header .onebar.header-bar-menu .twobar .mar { display: block; }
  body.mb_menu .header .twobar .sh_boxs{ display:block; }

  .header { height: 116px; }
  .header .onebar.header-bar-menu .twobar { display: none; }

  .main_search { display: none; }

/* @media all and (max-width: 1200px) { */
  /* Footer */
  .footer { margin: 32px 0 0px; }
  .footer .mar .d-flex { display: block; }
  .footer .mar .footerRightBox { margin-top: 50px; margin-bottom: 50px; }
  .footer .mar .flb-bottom { padding-right: 0; }

  .blockbox .listblock .maintitle .mt_alink * { font-size: 1.875rem; line-height: 50px; }
  .blockbox .listblock .maintitle .mt_alink.flex .mt_en{ display:block; margin:0; }
  .blockbox .listblock .maintitle .mt_alink.flex .mt_ch{ display:block; }
  .blockbox .listblock .maintitle .mt_alink .icon_s{ width:50px; height:39px; background-size:50px; min-width: 50px; }

  .main_news { display: block; }
  .main_news .news_box { max-width: unset; padding-right: 0px; }
  .main_news .news_box .news_list .news_more { text-align: center; padding-bottom: 30px; }
  .main_news .news_video { max-width: 98%; }

  .blockbox.noMargin.indexMain .listblock { padding-bottom: 10px; }
}

/*================================●●●●●●●●●●●●平板●●●●●●●●●●●●================================*/
@media all and (max-width: 1200px) and (max-width: 768px) {
  .footer .mar .footerLeftBox .flb-top-cn { font-size: 1.2rem; line-height: 36px; }
  .footer .mar .footerRightBox { margin-top: 30px; }
  .footer .mar .footerRightBox .frb-grids { font-size: 20px; line-height: 30px; }

  .header .onebar.header-bar-menu .mobile-btn { display: flex; width: 37px; height: 1.2rem; background: #f3f5f7; justify-content: center; align-content: center; flex-direction: column; cursor: pointer; }
  .header .onebar.header-bar-menu .mobile-btn span { width: 15px; height: 1px; background: #000; display: block; margin: 3px auto; }
  .header .onebar.header-bar-menu .mobile-btn:before { content: ""; display: block; width: 15px; height: 1px; background: #000; margin: 0 auto; }
  .header .onebar.header-bar-menu .mobile-btn:after { content: ""; display: block; width: 15px; height: 1px; background: #000; margin: 0 auto; }

  .header .onebar.header-bar-menu .searchbox .search_btn,
  .header .onebar.header-bar-menu .searchbox .redinput .btns { width: 30px; height: 30px; }
  .header .onebar.header-bar-menu .searchbox .redinput .btns { right: -20px; }

  .header .onebar .gbox .searchbox .redinput { top: 60px; }
  .header .onebar.header-bar-menu .searchbox .redinput .inputs { height: 20px; font-size: 1.2rem; }
  body.mb_search .header .onebar .searchbox .redinput { top: 50px; }

}

/*================================●●●●●●●●●●●●手機●●●●●●●●●●●●================================*/
@media all and (max-width: 768px) {
  .footer { padding: 35px 0 60px; }
  .footer .mar { padding: 0 15px; }
  .footer .mar .footerLeftBox .flb-top-cn { font-size: 1.1em; line-height: 22px; }
  .footer .mar .footerRightBox { margin-top: 18px; margin-bottom: 32px; }
  .footer .mar .footerRightBox .frb-grids { font-size: 12px; line-height: 18px; }
  .footer .mar .flb-bottom { font-size: 12px; margin: 16px 0; line-height: 16px; }


  .blockbox { margin-top: 83px; min-height: unset; }
  .blockbox .listblock .maintitle { padding: 10px 0; }
  .blockbox .listblock .maintitle .mt_alink { margin-bottom: unset; }
  .blockbox .listblock .maintitle .mt_alink * { font-size: 1.5rem; line-height: 28px; }
  .blockbox .listblock .maintitle .mt_alink .mt_en { margin-right: 15px; }

  .blockbox .listblock .maintitle .mt_alink.flex{ margin-bottom:10px; }

  .header { height: 83px; }
  .header .onebar.header-bar-menu .logo { width: 250px; margin: 0px auto 0px; }

  .header .onebar.header-bar-menu .twobar{ top: 83px; height: calc(100vh - 83px); }
  .header .onebar.header-bar-menu .twobar .mar .grids .alink { padding: 0px 0px 0px 15px; }
  .header .onebar.header-bar-menu .twobar .mar .grids .alink * { font-size: 17px; line-height: 36px; }
  .header .onebar.header-bar-menu .twobar .mar .grids .du { padding: 10px 0; }
  .header .onebar.header-bar-menu .twobar .mar .grids .du .listTxt a{ font-size:1rem; line-height:20px; padding-left:40px; }

  .header .onebar.header-bar-menu .twobar .sh_boxs .sh_grids { height: 52px; width: 52px; }

  .header .onebar.header-bar-menu .searchbox .redinput { height: 1.5rem; }
  .header .onebar.header-bar-menu .searchbox .redinput .inputs,
  .header .onebar.header-bar-menu .searchbox .redinput label.search_select select { font-size: 14px; }
  .header .onebar.header-bar-menu .searchbox .redinput label.search_select { padding-right: 0px; }
  .header .onebar.header-bar-menu .searchbox .redinput label.search_select select { background-size: 9px; padding: 0 30px 0 5px; }

  .main_banner { height: 300px; }


  .mandarin_box .mandarin_grids { padding: 20px; }
  .mandarin_box .mandarin_grids .m_title { font-size: 1.2em; line-height: 22px; }

  .mandarin_box .mandarin_grids .m_flex{ align-items: center; }
  .mandarin_box .mandarin_grids .m_icon{ width:50px; height:50px; }
  .mandarin_box .mandarin_grids .mflist .mf02 a{ font-size:1rem; overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;}

  .main_news .news_box .news_title { padding-right: 0px; }
  .main_news .news_box .news_title .news_title_box { padding: 0 35px; }
  .main_news .news_box .news_title .news_title_box .title_grids { font-size: 14px; height: 24px; line-height: 24px; }
  /*.main_news .news_box .news_title .news_title_box .title_grids { font-size: 14px; height: 24px; line-height: 24px; margin-right: 15px; padding-right: 15px; } 2021-09-06 james */
  .main_news .news_box .news_title .news_title_box .title_grids .hor_box { height: 24px; }
  .main_news .news_box .news_title .news_title_right,
  .main_news .news_box .news_title .news_title_left{ background-color: rgb(255, 255, 255); top: 2px; height: 22px; width: 22px; }
  .main_news .news_box .news_title .news_title_right img,
  .main_news .news_box .news_title .news_title_left img { z-index: 1; position: relative; width: 100%; }
  .main_news .news_box .news_list .news_grids { padding: 10px 0; }
  .main_news .news_box .news_list .news_grids * { font-size: 14px; line-height: 20px; }
  .main_news .news_box .news_list .news_grids .news_date { padding-right: 15px; }
  .main_news .news_box .news_list .news_grids::before { border-bottom-width: 2px; }

  .main_news .news_video .news_vtitle { font-size: 1rem; line-height: 1.5rempx; padding-top: 15px; }

  .teacher_box .teacher_grids .t_title .t_en { color: #ec6941; margin-right: 0px; font-size: 1em;}
  .teacher_box .t_content .t_title_v2 { font-size: 1rem; line-height: 20px; }
  .teacher_box .t_content .t_txt { font-size: 14px; line-height: 21px; }
  .teacher_box .teacher_grids .t_title * { font-size: 1.125rem; line-height: 24px; }
  .teacher_box .teacher_grids .t_more { padding: 0 5px; }
  .teacher_box .teacher_grids .t_more .t_more_btn { font-size: 1.125rem; line-height: 22px; width: auto; padding: 5px 0px 8px 0px; }

  .teacher_box.lc_type .teacher_grids { padding: 0 10px 90px; }

  .slickBox.showBtn { padding: 0 10px; }
  .slickBox .left_btn { left: -12px; }
  .slickBox .right_btn { right: -12px; }
  .slickBox .left_btn, .slickBox .right_btn { height: 36px; width: 20px; }
  .teacher_box .teacher_grids { padding: 0 10px; }

  .plus_more { font-size: 14px; }

  .topbtn { height: 52px; width: 52px; }
  .topbtn span { font-size: 1.125rem; }
}

@media all and (max-width: 479px) {
  .teacher_box.lc_type .teacher_grids { padding: 0 10px 70px; }
}


@media all and (max-width: 450px) {
  .header .onebar.header-bar-menu .logo { width: 130px; }
}