@charset "utf-8";
iframe{ max-width: 100%; max-height: 100%; }

/*■■■■■■■■■■■■■■■■banner區塊■■■■■■■■■■■■■■■*/
/**banner**/
.banner_box{ position:relative;}
.banner_box .banner_slide{ position:relative;}
.banner_box .banner_slide .banner_image{ width:100%; height:630px; background:no-repeat center; background-size:cover; display:flex; flex-direction:column; justify-content:center; align-items:center;}
.banner_box .banner_slide .banner_image .content-box{ padding:0 75px;}
.banner_box .banner_slide .banner_image .content-box .t01{ color:#fff; font-size:50px; font-family: 'Noto Serif TC'; font-weight: 700; margin-bottom:30px;}
.banner_box .banner_slide .banner_image .content-box .t02{ color:#fff; font-size:16px; line-height:40px; max-width:420px;}
.banner_box .banner_slide .banner_image .content-box .more_btn{ line-height:40px; height:42px; font-size:18px; color:#fff; padding:0 30px; border:1px solid #fff; border-radius:21px; margin-top:40px; display:inline-block;}
.banner_box .slide_btn_left{ position:absolute; top:0; left:0; bottom:0; padding:30px; display:flex; flex-direction:column; justify-content:center; align-items:center; cursor:pointer;}
.banner_box .slide_btn_left .fa{ color:#fff; font-size:50px; opacity:.5; transition:.3s;}
.banner_box .slide_btn_right{ position:absolute; top:0; right:0; bottom:0; padding:30px; display:flex; flex-direction:column; justify-content:center; align-items:center; cursor:pointer;}
.banner_box .slide_btn_right .fa{ color:#fff; font-size:50px; opacity:.5; transition:.3s;}
.banner_box .slide_display{ position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:0; padding:20px;}
.banner_box .slide_display p{ display:inline-block; width:45px; height:4px; background-color:#fff; margin:0 5px; opacity:.5; transition:.3s;}
.banner_box .slide_display p.focus{ opacity:1; transition:.3s;}
.banner_box .banner_slick .slick-slide{ height:auto; }

.banner_m_box .spbox{ display:none; }
.banner_m_box img{ width:100%; }

/**banner slick**/
.banner_slick.onloadRemove .slick-active .content-box .t01 { opacity: 0 !important; }
.banner_slick.onloadRemove .slick-active .content-box .t02 { opacity: 0 !important; }
.banner_slick.onloadRemove .slick-active .content-box .more_btn { opacity: 0 !important; }
.banner_slick.onloadRemove.onloadShow .slick-active .content-box .t01 { opacity: 1 !important; }
.banner_slick.onloadRemove.onloadShow .slick-active .content-box .t02 { opacity: 1 !important; }
.banner_slick.onloadRemove.onloadShow .slick-active .content-box .more_btn { opacity: 1 !important; }
.banner_box .banner_slide.banner_slick .banner_image .content-box .t01 { opacity: 0; transition: all 1s; transition-delay: .5s; }
.banner_box .banner_slide.banner_slick .banner_image .content-box .t02 { opacity: 0; transition: all 1s; transition-delay: .75s; }
.banner_box .banner_slide.banner_slick .banner_image .content-box .more_btn { opacity: 0; transition: all 1s; transition-delay: 1s; }
.banner_box .banner_slide.banner_slick .slick-active .banner_image .content-box .t01 { opacity: 1; }
.banner_box .banner_slide.banner_slick .slick-active .banner_image .content-box .t02 { opacity: 1; }
.banner_box .banner_slide.banner_slick .slick-active .banner_image .content-box .more_btn { opacity: 1; }



/*■■■■■■■■■■■■■■■■重點區塊■■■■■■■■■■■■■■■*/
.emphasis-box{ display:flex; margin:50px auto; flex-wrap:wrap; }
.emphasis-box .grids{ font-size:0.875rem; color:#333; text-align:center; border-left:1px solid #ccc; padding:35px 20px; flex:1; }
.emphasis-box .grids:first-child { border:0; }



/*■■■■■■■■■■■■■■■■附圖文案區塊■■■■■■■■■■■■■■■*/
.attached-box{ position:relative;}
.attached-box .word-box{ min-height:400px; margin-right:300px; background-color:#f5f5f5; padding:80px 200px 80px 80px;}
.attached-box .img-box{ width:420px; position:absolute; top:20px; right:40px; font-size:0; z-index:1; }
.attached-box .img-box img{ box-shadow:0 8px 16px 0 rgba(0,0,0,.2);}


/*■■■■■■■■■■■■■■■■左右圖文區塊■■■■■■■■■■■■■■■*/
.graphics-box{ display:flex; align-items:center; background-color:#f5f5f5; }
.graphics-box.reverse{ flex-direction:row-reverse; }
.graphics-box .grids{ flex:1; overflow:hidden; }
.graphics-box img{ vertical-align:middle; transition: .3s; }
.graphics-box .grids .effect_center{ padding:30px 80px; }
.graphics-box .movie{ width:100%; padding-bottom:56%; position:relative; }
.graphics-box .movie iframe{ position:absolute; top:0; left:0; width:100%; height:100%; }


/*■■■■■■■■■■■■■■■■卡片圖文區塊■■■■■■■■■■■■■■■*/
.card-box{ display:flex; margin:0 0 20px -20px; flex-wrap:wrap; }
.card-box .grids{ padding:0 0 30px 20px; width:25%; display:flex; }
.card-box .grids .in_s{ display:block; background-color:#f5f5f5; overflow:hidden; text-decoration:none; width:100%; }
.card-box .grids .image{ padding-bottom: 100%; background: no-repeat center; background-size: cover; display: block; position: relative; transform: scale(1); transform-origin: bottom; transition: .3s; }
.card-box .grids .word{ padding:20px 30px 30px 30px; text-align:left; }
.card-box .grids .t01{ font-size:1.563rem; margin:0; letter-spacing:2px; font-weight: 400; }
.card-box .grids .t02{ font-size:0.875rem; margin:0; }


/*■■■■■■■■■■■■■■■■表格區塊■■■■■■■■■■■■■■■*/
.hidden_slide{ overflow-y:hidden;}
.natives{ border:1px solid #ccc; margin-top:10px;}
.natives table{ width:100%; border-collapse:collapse; background-color:#fff;}
.natives table tr th{ background-color:#123377; color:#fff !important; padding:10px 25px; line-height:30px; height:50px; text-align:left; white-space:nowrap;}
.natives table tr th.most{ min-width:200px; white-space:normal;}
.natives table tr td{ color:#333; padding:10px 25px; line-height:30px; height:50px; border-top:1px solid #ccc; text-align:left; transition:.3s;}
.natives table tr td.most{ min-width:200px; white-space:normal;}
.natives table tr:first-child td{ border:0;}
.natives table tr:nth-child(2n) td{ background-color:#f5f5f5;}
.natives table tr td .alink{ line-height:25px; height:25px; padding:0 10px; color:#fff; border-radius:15px; background-color:#073c84; font-size:14px; display:inline-block; white-space:nowrap; }
.natives table tr td .alink .fa{ color:#fff; font-size:12px; margin-right:5px;}
.natives.td_blue table tr:nth-child(2n) td{ background-color:#c8dff5;}
.natives.con_right table tr td{ text-align:right; }
.natives.con_right table tr th{ text-align:right; }

/*■■■■■■■■■■■■■■■■履歷表格■■■■■■■■■■■■■■■*/
.natives table.resume tr td{ border:1px solid #ccc; }

.ResumeWrapper{ margin-top: 1.875rem; margin-bottom: 1.875rem; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; }
.ResumeWrapper .ResumeBox{ width: 100%; display: inline-flex; }
.ResumeWrapper .ResumeBox .Name{ font-size: 1.2em; font-weight: bold; }
.ResumeWrapper .ResumeBox .SubTitle{ font-size: 0.8em; width: 100%; display: inline-flex; flex-direction: column; align-items: center; }

.ResumeWrapper .ResumeBox .TeacherName{  }
.ResumeWrapper .ResumeBox .TeacherName .Name{ font-size: 1.6em; font-weight: bold; }
.ResumeWrapper .ResumeBox .TeacherName .SubTitle{ font-size: 0.8em; margin-top: -0.5em; margin-bottom: 0.25em; display: block; }

.ResumeWrapper .ResumeBox .Personal{ background-color: hsla(220, 74%, 27%, 0.2); gap: 0.625rem; width: 20%; padding: 1.5625rem; display: inline-flex; flex-direction: column; align-items: center; }
.ResumeWrapper .ResumeBox .Personal img{ width: 135px; max-width: 135px; box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; }
.ResumeWrapper .ResumeBox .Personal .Information{ width: 100%; gap: 0.3125rem; display: inline-flex; flex-direction: column; align-items: center; }

.ResumeWrapper .ResumeBox .Intro{ width: 80%; gap: 10px; padding: 0.75rem 1.5625rem 1.5625rem; display: inline-flex; flex-direction: column; }
.ResumeWrapper .ResumeBox .Intro .IntroRow{ }
.ResumeWrapper .ResumeBox .Intro .ResultsTitle{ padding: 0 2em 0 0.25em; border-bottom: 2px solid #1d3468; font-size: 1.2em; font-weight: bold; }

.ResumeWrapper .ResumeBox ul{}
.ResumeWrapper .ResumeBox ul li{ padding: 0.325rem 0; }
.content-box .ResumeWrapper .ResumeBox ul li:before,
.content_box .ResumeWrapper .ResumeBox ul li:before{ top: calc( 0.025rem + 0.9rem ); left: -1.25rem; }

@media screen and (max-width: 768px){
    .ResumeWrapper .ResumeBox{ flex-direction: column; align-items: center; }
    .ResumeWrapper .ResumeBox .Personal,
    .ResumeWrapper .ResumeBox .Intro{ width: 100%; padding: 0.75rem 1rem 1rem; }

    .ResumeWrapper .ResumeBox .Personal{ padding-bottom: 0.75rem; }
    .ResumeWrapper .ResumeBox .Personal .Information{ }
}

/*■■■■■■■■■■■■■■■■照片區塊■■■■■■■■■■■■■■■*/
.picture-box{ display:flex; flex-wrap:wrap; margin:0 0 20px -20px; }
.picture-box .grids{ padding:0 0 30px 20px; width:33.33334%; display:flex; }
.picture-box .grids .in_s{ display:block; background-color:#f5f5f5; overflow:hidden; text-decoration:none; width:100%; }
.picture-box .grids .in_s .image{ padding-bottom: 100%; background: no-repeat center; background-size: cover; display: block; position: relative; transform: scale(1); transform-origin: bottom; transition: .3s; }
.picture-box .grids .in_s .image .fa-search { position: absolute; bottom: 10px; right: 10px; width: 25px; height: 25px; line-height: 25px; border-radius: 50%; display: block; background-color: #073c84; color: #fff; font-size: 14px; text-align: center; }
.picture-box .grids .in_s .word{ background-color:#f5f5f5; padding:20px 30px 30px 30px; text-align:left; }
.picture-box .grids .in_s .word .t03{ font-size:1rem; margin:0; font-weight:300; line-height:1.6; letter-spacing:0; color:#333; text-decoration:none; }


/*■■■■■■■■■■■■■■■■影片區塊■■■■■■■■■■■■■■■*/
.movie-box{ display: block; }
.movie-box .movieText{ padding: 20px 0 0 0; }
.movie-box .movie{ position: relative; width: 100%; padding-bottom: 56%; }
.movie-box .movie iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*■■■■■■■■■■■■■■■■新聞區塊■■■■■■■■■■■■■■■*/
.news-box{ display:flex; flex-wrap:wrap; margin:0 0 20px -20px; }
.news-box .grids{ padding:0 0 30px 20px; width:25%; display:flex; }
.news-box .grids .in-s{ display:block; background-color:#f5f5f5; overflow:hidden; text-decoration:none; width:100%; }
.news-box .grids .in-s .image{ padding-bottom: 100%; background: no-repeat center; background-size: cover; display: block; position: relative; transform: scale(1); transform-origin: bottom; transition: .3s; }
.news-box .grids .in-s .word{ background-color:#f5f5f5; padding:20px 30px 30px 30px; text-align:left; }
.news-box .grids .in-s .word .t04{ font-size:1.125rem; margin: 0; line-height: 1.6; letter-spacing: 0; font-weight: 700; }
.news-box .grids .in-s .data{ color:#777; margin:20px 0; line-height:1.8; font-size:14px;}
.news-box .grids .in-s .data span{ display:inline-block; line-height:20px; border:1px solid #073c84; color:#073c84; padding:0 3px; margin-right:5px; font-size:14px;}


/*■■■■■■■■■■■■■■■■表單區塊■■■■■■■■■■■■■■■*/
.redpoint{ display:inline-block; width:5px; height:5px; border-radius:50%; background-color:#f13f3f; margin:0 5px; vertical-align:middle;}
.form_box{ border:1px solid #ccc; padding:20px 30px 50px 30px; display:flex; flex-wrap:wrap; margin-top:40px;}
.form_box .pubgrids{ width:50%; padding:0 20px; position:relative;}
.form_box .pubgrids.long{ width:100%; }
.form_box .pubgrids.martop{ margin-top:60px; }
.form_box .pubgrids .pg-title{ margin:30px 0 10px 0; font-size:14px;}
.form_box .pubgrids.address .fillin-block{ border-bottom:1px solid #ccc; display:flex;}
.form_box .pubgrids.address input{ border:0;}
.form_box .pubgrids.address select{ border:0;}
.form_box .pubgrids.address .add01{ width:120px;}
.form_box .pubgrids.address .add02{ width:120px;}
.form_box .pubgrids.address .add03{ width:100px;}
.form_box .pubgrids.address .add04{ width:auto;}
.form_box .pubgrids.textarea{ width:100%;}
.form_box .pubgrids.verification_code .fillin-block{ display:flex; position:relative;}
.form_box .pubgrids.verification_code .fillin-block::after{ content:"點擊圖片更換一組驗證碼"; position:absolute; top:38px; right:0; color:#777; font-size:13px;}
.form_box .pubgrids.verification_code .fillin-block .code_image{ height:40px; border-top-width:0; border-bottom:0px solid #ccc; border-left-width:0; border-right-width:0; background-color:unset;}
.form_box .pubgrids.verification_code .fillin-block .code_image img{ height:39px; cursor:pointer; max-width:none;}
.form_box .pubgrids .fillin-block textarea{ width:100%; height:150px; border:0; border-bottom:1px solid #ccc; line-height:30px; padding:5px 15px; resize:none;}
.form_box .pubgrids .fillin-block textarea:focus{ border-bottom-color:#6b8ba0; transition:.3s;}
.form_box .pubgrids.required::after{ content:""; display:block; width:5px; height:5px; border-radius:50%; background-color:#f13f3f; position:absolute; top:83px; left:20px;}


/*■■■■■■■■■■■■■■■■詳細內頁區塊■■■■■■■■■■■■■■■*/
.databar{ color:#777; margin:20px 0; line-height:1.8; font-size:14px;}
.databar span{ display:inline-block; line-height:20px; border:1px solid #073c84; color:#073c84; padding:0 3px; margin-right:5px; font-size:14px;}

.decontbox{ padding-bottom:80px; }
.decontbox *{ font-weight:revert; font-size:inherit; color: revert; }
.decontbox a{ color:#073c84; text-decoration: underline; }
.decontbox ul,.decontbox ol{ margin:0 0 0 25px; }
.decontbox img{ max-width:100%; }

.decontbox .iframebox{ max-width:600px; }
.decontbox .iframebox .ins{ width:100%; padding-bottom:56%; position:relative; }
.decontbox .iframebox .ins iframe{ width:100% !important; height:100% !important; position:absolute; top:0; left:0; }

/*■■■■■■■■■■■■■■■■FAQ■■■■■■■■■■■■■■■*/
.hor_box { overflow-y: hidden; height:40px; }
.hor_box .range { overflow-x: scroll; overflow-y: hidden; white-space: nowrap;  }
.hor_box .range .sortgrids { text-decoration: none; }
.hor_box .select_ap{ line-height:38px; height:40px; border:1px solid #ccc; padding:0 20px; color:#333; margin-right:6px; border:1px solid #ccc; display:inline-block; vertical-align:top;}
.hor_box .select_ap.focus{ border-color:#0077b4; color:#0077b4; font-weight:400;}

.faqbox{ padding:20px 0 0 0; }
.faqbox.faqbox_link{ display:none !important; }
.faqbox .faqtitle{ font-size:1.125rem; color:#0077b4; font-weight:500; padding: 20px 0 0 0; }
.faqbox .faqlist{ display:flex; padding:20px 0; border-bottom:1px solid #ccc; }
.faqbox .faqlist .bullet{ min-width:30px; font-size:1.25rem; color:#333; }
.faqbox .faqlist .topic{ flex:1; padding:0 10px; }
.faqbox .faqlist .topic .q_list{ font-size:1.25rem; color:#333; line-height:1.6; }
.faqbox .faqlist .topic .a_list{ display:none; padding:10px 0 0 0; font-size:1rem; color:#333; line-height:1.6; }
.faqbox .faqlist .arrow{ width:30px; display:flex; padding: 5px 0 0 0; }
.faqbox .faqlist .arrow .icon{ width:16px; height:16px; border-right:2px solid #ccc; border-top:2px solid #ccc; transform:rotate(45deg); }

.faqbox .faqlist.open .arrow .icon{ transform:rotate(135deg); }



/*================================●●●●●●●●●●●●Hover●●●●●●●●●●●●================================*/
@media screen and (min-width:1201px){
/*■■■■■■■■■■■■■■■■左右圖文區塊■■■■■■■■■■■■■■■*/
.graphics-box .grids.photo img:hover{ transform: scale(1.1);  }

/*■■■■■■■■■■■■■■■■卡片圖文區塊■■■■■■■■■■■■■■■*/
.card-box .grids .in_s:hover .image{ transform: scale(1.1); transform-origin: bottom; transition: 1s; }

/*■■■■■■■■■■■■■■■■照片區塊■■■■■■■■■■■■■■■*/
.picture-box .grids .in_s:hover .image{ transform: scale(1.1); transform-origin: bottom; transition: 1s; }

/*■■■■■■■■■■■■■■■■新聞區塊■■■■■■■■■■■■■■■*/
.news-box .grids .in-s:hover .image{ transform: scale(1.1); transform-origin: bottom; transition: 1s; }
}



/*================================●●●●●●●●●●●●平板●●●●●●●●●●●●================================*/
@media screen and (min-width:768px) and (max-width:1200px){
/*■■■■■■■■■■■■■■■■附圖文案區塊■■■■■■■■■■■■■■■*/
.attached-box .word-box{ margin-right: 60px; padding: 40px 180px 40px 40px; }
.attached-box .img-box{ width: 210px; top: 40px; right:0px; }

/*■■■■■■■■■■■■■■■■照片區塊■■■■■■■■■■■■■■■*/
.picture-box{ margin-left:-10px; }
.picture-box .grids{ padding:0 0 10px 10px; }
.picture-box .grids .in_s .word{ padding:15px; }

/*■■■■■■■■■■■■■■■■卡片圖文區塊■■■■■■■■■■■■■■■*/
.card-box{ margin-left:-10px; }
.card-box .grids{ padding:0 0 10px 10px; }
.card-box .grids .word{ padding:15px; }

/*■■■■■■■■■■■■■■■■新聞區塊■■■■■■■■■■■■■■■*/
.news-box{ margin-left:-10px; }
.news-box .grids{ padding:0 0 10px 10px; }
.news-box .grids .in-s .word{ padding:15px; }
.news-box .grids .in-s .data{ margin:10px 0; }

/*■■■■■■■■■■■■■■■■表單區塊■■■■■■■■■■■■■■■*/
.form_box .pubgrids.address{ width:100%;}
}


/*================================●●●●●●●●●●●●手機●●●●●●●●●●●●================================*/
@media screen and (max-width:767.9px){
/*■■■■■■■■■■■■■■■■banner區塊■■■■■■■■■■■■■■■*/
/** banner **/
.banner_box .banner_slide .banner_image{ height:calc( 100vh - 95px )}
.banner_box .banner_slide .banner_image .content-box{ padding:0 30px;}
.banner_box .banner_slide .banner_image .content-box .t01{ font-size:35px; margin-bottom:15px;}
.banner_box .banner_slide .banner_image .content-box .t02{ line-height:35px;}
.banner_box .banner_slide .banner_image .content-box .more_btn{ margin-top:20px;}
.banner_box .slide_btn_right{ display:none;}
.banner_box .slide_btn_left{ display:none;}

.banner_m_box .pcbox{ display:none; }
.banner_m_box .spbox{ display:block; }


/*■■■■■■■■■■■■■■■■重點區塊■■■■■■■■■■■■■■■*/
.emphasis-box{ flex-wrap:wrap; }
.emphasis-box .grids{ flex:none; width:100%; display:flex; border:none; padding:0; margin-bottom:20px; }
.emphasis-box .grids:last-child{ margin-bottom:0px; }
.emphasis-box .grids .icon{ width:80px; }
.emphasis-box .grids .word{ text-align:left; flex:1; padding-left:20px; }

.emphasis-box.style-sm{ margin-left:-10px; }
.emphasis-box.style-sm .grids{ width:50%; margin:0; margin-bottom:20px; padding-left:10px; flex-wrap:wrap; align-content: flex-start; }
.emphasis-box.style-sm .grids .icon{ width:100%; text-align:center; }
.emphasis-box.style-sm .grids .word{ padding:10px 0 0 0; flex:none; width:100%; }


/*■■■■■■■■■■■■■■■■附圖文案區塊■■■■■■■■■■■■■■■*/
.attached-box{ background-color:#f5f5f5; }
.attached-box .word-box{ padding:20px; margin:0; }
.attached-box .img-box{ max-width:95%; transform:translateY(-10%); margin:auto; position:static; }


/*■■■■■■■■■■■■■■■■左右圖文區塊■■■■■■■■■■■■■■■*/
.graphics-box{ flex-direction: column; }
.graphics-box.reverse{ flex-direction:column-reverse; }
.graphics-box.reverse-sm{ flex-direction:column-reverse; }
.graphics-box.no-reverse-sm{ flex-direction: column; }
.graphics-box .grids{ flex:none; width:100%; }
.graphics-box .grids .effect_center{ padding:30px; }


/*■■■■■■■■■■■■■■■■卡片圖文區塊■■■■■■■■■■■■■■■*/
.card-box{ margin-left:0; }
.card-box .grids{ width:100%; padding:0 0 10px 0; }


/*■■■■■■■■■■■■■■■■照片區塊■■■■■■■■■■■■■■■*/
.picture-box{ margin-left:0; }
.picture-box .grids{ width:100%; padding:0 0 10px 0; }

/*■■■■■■■■■■■■■■■■影片區塊■■■■■■■■■■■■■■■*/


/*■■■■■■■■■■■■■■■■表單區塊■■■■■■■■■■■■■■■*/
.form_box{ padding:20px 15px;}
.form_box .pubgrids{ width:100%; padding:0;}
.form_box .pubgrids.address .fillin-block{ flex-wrap:wrap;}
.form_box .pubgrids.address .add01{ width:38%;}
.form_box .pubgrids.address .add02{ width:38%;}
.form_box .pubgrids.address .add03{ width:24%;}
.form_box .pubgrids.address .add04{ width:100%;}
.form_box .pubgrids.required::after{ left:0;}
.form_box .btn_block{ padding:60px 0 0 0;}


/*■■■■■■■■■■■■■■■■新聞區塊■■■■■■■■■■■■■■■*/
.news-box{ margin-left:0; }
.news-box .grids{ width:100%; padding:0 0 10px 0; }

/*■■■■■■■■■■■■■■■■FAQ■■■■■■■■■■■■■■■*/
.hor_box .select_ap{ height:30px; line-height:28px; padding:0 10px; margin-right:3px; font-size:14px;}
.faqbox .faqlist .bullet{ font-size:1.125rem; }
.faqbox .faqlist .topic .q_list{ font-size:1.125rem; }
.faqbox .faqlist .topic .a_list{ font-size:1rem; }
.faqbox .faqlist .arrow{ width:18px; }
.faqbox .faqlist .arrow .icon{ width:10px; height:10px; }
}