@charset "utf-8";
/* CSS Document */

html, body { margin: 0px; }

body { width: 100%; font-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; position: relative; color: #000000; font-size: 16px; font-family: '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif; }

a { outline: none; text-decoration: none; }

ul, ol { list-style: none; margin: 0; padding: 0; }
li { vertical-align: top; }

h1, h2, h3, h4, h5, h6, p { padding: 0; margin: 0; }

img { border: none; }

.object_fit_photo img { width: 100%; height: 100%; object-fit: cover; }
.object_fit_photo.compat-object-fit { background-repeat: no-repeat; background-position: center center; background-size: cover; }

.object_fit_contain img { width: 100%; height: 100%; object-fit: contain; }
.object_fit_contain.compat-object-fit { background-repeat: no-repeat; background-position: center center; background-size: contain; }
.object_fit_contain.compat-object-fit img { display: none; }

input, select, textarea, button { -webkit-appearance: none; appearance: none; font-family: Helvetica, '微軟正黑體', 'Microsoft JhengHei', sans-serif; }

select { display: inline-block; vertical-align: top; width: 100%; border: 0; background-color: #ffffff; border-radius: 6px; box-sizing: border-box; }
select::-ms-expand { display: none; }
.select_area { display: inline-block; vertical-align: top; width: 100%; background-color: #ffffff; border-radius: 6px; position: relative; cursor: pointer; }
.select_area:before { position: absolute; right: 20px; top: 50%; z-index: 1; content: ""; width: 0; height: 0; border-style: solid; border-width: 9px 6px 0 6px; border-color: #000000 transparent transparent transparent; transform: translateY(-50%); }
.select_area select { background-color: transparent !important; position: relative; z-index: 2; padding-right: 42px; margin: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; }

button, input[type=submit], input[type=reset], input[type=button] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

/* ---------------- clear fix ---------------- */

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; height: 0; font-size: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

/*-------------------------------------------------------------------------------------*/
/* LAYOUT */

#wrap { width: 100%; background-color: #ffffff; box-sizing: border-box; position: relative; left: 0; z-index: 1000; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; }
#wrap .container { width: 100%; max-width: 1210px; padding-left: 15px; padding-right: 15px; margin: 0px auto; position: relative; box-sizing: border-box; display: block; }
#wrap .overlay { position: absolute; left: 0; top: 0; z-index: 5000; width: 0; height: 0; background-color: rgba(0,0,0,0.3); opacity: 0; transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: moz-none; -ms-user-select: none; user-select: none; }

#wrap .back_to_top { position: fixed; right: 25px; bottom: 14px; display: none; z-index: 999; }
#wrap .back_to_top.overFooterOnBottom { position: fixed !important; bottom: 14px !important; }
#wrap .back_to_top a { display: block; width: 48px; height: 48px; background-color: #c1c1c1; border-radius: 100%; box-sizing: border-box; text-align: center; color: #9a9a98; transition: all 0.2s ease; }
#wrap .back_to_top a:hover { box-shadow: 0 0 10px 6px rgba(255,255,255,0.6); }
#wrap .back_to_top a i { font-size: 40px; line-height: 44px; }

#top { width: 100%; background: url(../img/top_bg.jpg) no-repeat center center; background-size: cover;  }
#top .top_area { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; width: 100%; }
#top .logo { -ms-flex: 0 0 545px; flex: 0 0 545px; width: 100%; max-width: 545px; padding: 25px 0 11px 0; position: relative; }
#top .logo img { display: block; width: 100%; }
#top .verse { -ms-flex: 0 0 528px; flex: 0 0 528px; width: 100%; max-width: 528px; font-size: 24px; color: #333333; font-weight: 700; }
#top .verse p { padding: 2px 0; }
#top .verse p:first-child { color: #162f8c; }

#top .mobile_btn { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; text-align: right; display: none; }
#top .mobile_btn a { display: inline-block; vertical-align: top;; width: 40px; height: 40px; background-color: #1f417e; border: none; box-sizing: border-box; border-radius: 0; text-align: center; text-transform: uppercase; font-weight: 700; font-size: 0; color: #ffffff; line-height: 40px; }
#top .mobile_btn a span { font-size: 30px; line-height: inherit; }
#top .mobile_btn a:hover { text-decoration: none; }

#menu { width: 100%; background-color: #1f417e; border-bottom: 5px solid #e0a11e; }
#menu .menu_area { width: 100%; position: relative; box-sizing: border-box; }
#menu .menu_area ul.menu_list { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; }
#menu .menu_area ul.menu_list > li { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex: 0 0 auto; flex: 0 0 auto; position: relative; }
#menu .menu_area ul.menu_list > li.mobile_only { display:none; }
#menu .menu_area ul.menu_list > li > a.lv1 { display: block; padding: 12px 19px; position: relative; box-sizing: border-box; font-size: 20px; color: #ffffff; font-weight: 700; transition: all 0.3s ease; }
#menu .menu_area ul.menu_list > li > a.lv1 i { display: none; }
#menu .menu_area ul.menu_list > li:hover > a.lv1,
#menu .menu_area ul.menu_list > li > a.lv1:hover { background-color: #115fa9; }

#menu .menu_area ul.menu_list ul { position: absolute; left: 100%; top: 0; z-index: 10; width: 200px; min-width: 100%; background-color: #1f417e; padding-bottom: 6px; box-sizing: border-box; box-shadow: 3px 3px 3px rgba(0,0,0,0.3); }
#menu .menu_area ul.menu_list ul li { display: block; text-align: left; position: relative; }
#menu .menu_area ul.menu_list ul li a { display: block; width: 100%; padding: 5px 19px; background-color: transparent; box-sizing: border-box; position: relative; font-size: 16px; color: #ffffff; transition: all 0.3s ease; }
#menu .menu_area ul.menu_list ul li a:hover { background-color: #115fa9; }

#menu .menu_area ul.menu_list ul.dropdown_menu { left: 0; top: 100%; padding-top: 10px; }
#menu .menu_area ul.menu_list ul.dropdown_menu li.have_drop > a { padding-right: 30px; }
#menu .menu_area ul.menu_list ul.dropdown_menu li.have_drop > a > i { position: absolute; right: 0; top: 50%; }
#menu .menu_area ul.menu_list ul.dropdown_menu li.have_drop > a > i:before { position:absolute; right:10px; top:0; content:""; width:0; height:0; border-style:solid; border-width:4px 0 4px 8px; border-color:transparent transparent transparent #ffffff; transform: translateY(-50%); transition: all 0.3s ease; }

#menu .menu_area ul.menu_list:last-child > li:last-child > ul.dropdown_menu { left:auto; right:0; }
#menu .menu_area .fallback { display:none; }

#banner { position: relative; background-color: #e0a11e; }
#banner .banner_show { width: 100%; position: relative; }

#banner .banner { width: 100%; background-repeat: no-repeat; background-position: center center; background-size: auto 100%; position: relative; display: block; }

#banner .banner img { display: block; width: 100%; margin: 0 auto; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: moz-none; -ms-user-select: none; user-select: none; }

#banner .owl-nav { position: absolute; left: 0; top: 50%; width: 100%; }
#banner .owl-prev, 
#banner .owl-next { position: absolute; top: 0; width: 50px; height: 51px; background-image: url(../img/banner_arrow.png); background-repeat: no-repeat; background-size: auto 100%; border-radius: 100%; box-shadow: -2px 4px 4px rgba(0,0,0,0.8); transform: translateY(-50%); opacity: 0.5; outline: none; transition: all 0.3s ease; }
#banner .owl-prev { left: 34px; background-position: left top; }
#banner .owl-next { right: 34px; background-position: right top; }
#banner .owl-prev:hover, 
#banner .owl-next:hover { opacity: 1; }

#banner .inner_banner { height: 411px; }

#banner .banner_title { position: absolute; left: 0; bottom: 0; width: 100%; }
#banner .banner_title .container:before { position: absolute; left: -358px; bottom: 0; content: ""; width: 768px; height: 77px; background: url(../img/banner_title_bg.png) no-repeat right top; }
#banner .banner_title h2 { position: relative; font-size: 48px; color: #ffffff; font-weight: 700; line-height: 77px; }

#banner .gallery_banner { background-image: url(../img/inner_banner/gallery.jpg); }
#banner .news_banner { background-image: url(../img/inner_banner/news.jpg); }
#banner .information_banner { background-image: url(../img/inner_banner/information.jpg); }
#banner .learning_banner { background-image: url(../img/inner_banner/learning.jpg); }
#banner .life_banner { background-image: url(../img/inner_banner/life.jpg); }
#banner .communication_banner { background-image: url(../img/inner_banner/communication.jpg); }
#banner .alumni_banner { background-image: url(../img/inner_banner/alumni.jpg); }
#banner .support_banner { background-image: url(../img/inner_banner/student_support.jpg); }
#banner .achievement_banner { background-image: url(../img/inner_banner/achievement.jpg); }
#banner .contact_banner { background-image: url(../img/inner_banner/contact.jpg); }

#main { width:100%; background-image: url(../img/main_bg.png); background-color:#ffffff; background-repeat:no-repeat; background-position:center top; position:relative; display:block; }
#main.no_bg { background-image: none; }
#main .location_path { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; width: 100%; padding-top: 18px; font-size: 25px; color: #000000; }
#main .location_path i { padding-right:10px; font-size: 28px; color: #115fa9; }
#main .location_path a { color: #666666; }
#main .location_path a:hover { color: #115fa9; }
#main .content_area { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; margin-top: 12px; background-color: #ffffff; padding: 20px 0; box-shadow: 0 0 5px rgba(0,0,0,0.3); }

#main .left_side { -ms-flex:0 0 234px; flex:0 0 234px; width:100%; max-width: 234px; box-sizing:border-box; }
#main .left_side .left_menu { width:100%; }
#main .left_side .left_menu > ul { position:relative; }
#main .left_side .left_menu > ul > li { display: block; border-bottom: 1px dotted #999999; position:relative; }
#main .left_side .left_menu > ul > li > a { display: block; width: 100%; padding:14px 16px 12px 16px; background-color: transparent; box-sizing: border-box; font-size:19px; color:#115fa9; font-weight:700; transition:all 0.3s ease; }
#main .left_side .left_menu > ul > li > a.active, 
#main .left_side .left_menu > ul > li > a:hover { background-color: #115fa9; color:#ffffff; }

#main .left_side .left_menu a.active+ul { display:block; }

#main .left_side .left_select { width:100%; box-sizing:border-box; text-align:right; display:none; }
#main .left_side .left_select select { width:100%; height:36px; padding:0 30px 0 20px; border:1px solid #cccccc; border-radius:0; font-size: 17px; }
#main .left_side .left_select .select_area { max-width:243px; }
#main .left_side .left_select .select_area:before { right:14px; }

#main .right_side { -ms-flex:0 0 calc(100% - 234px); flex:0 0 calc(100% - 234px); width:100%; max-width: calc(100% - 234px); box-sizing: border-box; position: relative; }

#main .year_filter { position: absolute; right: 0; top: -65px; width: 200px; }
#main .year_filter select { width:100%; height:40px; padding:0 30px 0 20px; border:1px solid #86949c; border-radius:0; }
#main .year_filter .select_area { max-width:243px; }
#main .year_filter .select_area:before { right:14px; border-color: #3174b4 transparent transparent transparent; }

#main .content { width: 100%; padding: 0 45px; box-sizing: border-box; position: relative; display: block; }
#main .title { padding: 6px 0; border-bottom: 1px solid #115fa9; margin-bottom: 56px; font-size: 29px; color: #115fa9; font-weight: 700; }

/*
john edit 2019.12.2
#main .multipage { padding-top:22px; margin:0 -7px; font-size:0; text-align:right; }
#main .multipage a { display:inline-block; vertical-align:top; width:22px; height:22px; margin:0 2px; text-align:center; line-height:22px; font-size:14px; color:#000000; transition:all 0.2s ease; }
#main .multipage a.row,
#main .multipage a.back,
#main .multipage a.next { width:26px; margin:0 7px; background-color:#787878; color:#ffffff; }
#main .multipage a.onpage, 
#main .multipage a:hover { background-color:#d81b29; color:#ffffff; }
#main .multipage select { display:block; width:100%; height:36px; padding:0 12px; font-size:16px; color:#000000; background-color:#ffffff; border:1px solid #cccccc; border-radius:0; box-sizing:border-box; outline:none; }
#main .multipage .select_area { display:none; max-width:160px; }
#main .multipage .select_area:before { right:12px; }
*/


#main .back_btn { padding-top:28px; text-align:right; }
#main .back_btn a { display:inline-block; vertical-align:top; padding:4px 8px 4px 20px; background-color: #115fa9; box-sizing:border-box; font-size:19px; color:#ffffff; font-weight:700; transition:all 0.3s ease; }
#main .back_btn a i { font-size:23px; line-height:1; }
#main .back_btn a:hover { background-color:#1f417e; }

#footer { position: relative; }
#footer .school_contact { width: 100%; background: url(../img/footer_bg.jpg) no-repeat center center; background-size: cover; }
#footer .school_contact .container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; }

#footer .school_photo { -ms-flex: 0 0 524px; flex: 0 0 524px; width: 100%; max-width: 524px; margin-left: -20px; }
#footer .school_photo img { width: 100%; display: block; }
#footer .school_content { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex: 0 0 590px; flex: 0 0 590px; width: 100%; max-width: 590px; padding: 30px 0; }
#footer .school_logo { -ms-flex: 0 0 82px; flex: 0 0 82px; width: 100%; max-width: 82px; }
#footer .school_logo img { display: block; width: 100%; }
#footer .school_info { -ms-flex: 1 0 0%; flex: 1 0 0%; width: auto; max-width: 100%; padding-left: 24px; overflow: hidden; }
#footer .school_info h2 { font-size: 29px; color: #1a2667; line-height: 1; }
#footer .school_info h3 { margin-bottom: 16px; font-size: 19px; color: #1a2667; }
#footer .school_info p { display: inline-block; vertical-align: top; padding-right: 10px; font-size: 20px; color: #333333; }
#footer .school_info h3+p { display: block; }
#footer .school_info a { color: #333333; }
#footer .school_info a:hover { text-decoration: underline; }
#footer .school_info a.map { display: inline-block; padding: 2px 10px; background-color: #4d9bde; font-size: 18px; color: #ffffff; }
#footer .school_info a.map:hover { text-decoration: none; }

#copyright { padding: 13px 0; background-color: #1f417e; }
#copyright .container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: justify; justify-content: space-between; }
#copyright p { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; font-size:14px; color:#ffffff; }
#copyright a { color:#ffffff; }
#copyright a:hover { text-decoration:underline; }

/*-------------------------------------------------------------------------------------*/
/* INDEX */

.section_list { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 30px 0 46px 0; margin: 0 -9px; }
.section { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; padding: 12px 9px; box-sizing: border-box; position: relative; }
.section .section_box { width: 100%; border: 3px solid #ffffff; background-color: #ffffff; position: relative; border-radius: 4px; box-sizing: border-box; box-shadow: 0 0 5px rgba(0,0,0,0.3); }
.section .section_title { width: 100%; background-color: #1f417e; position: relative; font-size: 25px; color: #ffffff; font-weight: 700; }
.section .section_title svg { position: absolute; right: 0; top: 0; z-index: 1; width: 120px; height: 100%; fill: #0a2555 }
.section .section_title p { position: relative; z-index: 2; padding: 4px 20px; }
.section .section_content { width: 100%; position: relative; }
.section .section_more { position: absolute; right: 0; top: 5px; z-index: 5; text-align: right; }
.section .section_more a { display: inline-block; vertical-align: top; padding: 6px 15px; font-size: 16px; color: #ffffff; transition: all 0.3s ease; }
.section .section_more a:hover { color: #e7e7e7; }

.events_section { -ms-flex:0 0 452px; flex:0 0 452px; max-width: 452px; }
.events_section .section_title { background-color: #276ca3; }
.events_section .section_title svg { fill: #1a2667 }
.events_section .events_photo { width: 100%; height: 260px; }
.events_section .events_photo img { display: block; width: 100%; }
.events_section .events_list { padding-top: 2px; padding-bottom: 8px; }
.events_section .events_item { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; padding: 6px 7px; box-sizing: border-box; font-size: 15px; }
.events_section .events_date { -ms-flex: 0 0 96px; flex: 0 0 96px; width: 100%; max-width: 96px; color: #276ca3; }
.events_section .events_title { -ms-flex: 1 0 0%; flex: 1 0 0%; width: auto; max-width: 100%; overflow: hidden; }
.events_section .events_title a { color: #333333; }
.events_section .events_title a:hover { color: #276ca3; }

.report_section { -ms-flex:0 0 452px; flex:0 0 452px; max-width: 452px; }
.report_section .section_title { background-color: #d41921; }
.report_section .section_title svg { fill: #ee3b40 }
.report_section .report_video { width: 100%; height: 260px; }
.report_section .report_video iframe { display: block; width: 100%; height: 100%; border: none; }
.report_section .report_list { padding-top: 2px; padding-bottom: 8px; }
.report_section .report_item { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; padding: 6px 7px; box-sizing: border-box; font-size: 15px; }
.report_section .report_date { -ms-flex: 0 0 96px; flex: 0 0 96px; width: 100%; max-width: 96px; color: #276ca3; }
.report_section .report_title { -ms-flex: 1 0 0%; flex: 1 0 0%; width: auto; max-width: 100%; overflow: hidden; }
.report_section .report_title a { color: #333333; }
.report_section .report_title a:hover { color: #276ca3; }

.news_section { -ms-flex:0 0 294px; flex:0 0 294px; max-width: 294px; }
.news_section .section_box { background-color: #f7e7c7;}
.news_section .section_title { background-color: #e0a11e; }
.news_section .section_title svg { fill: #ba8619 }
.news_section .news_list { width: 100%; }
.news_section .news_item { padding: 6px 22px; border-bottom: 1px solid #d2c5a9; font-size: 15px; color: #333333; }
.news_section .news_item:last-child { border-bottom: none; }
.news_section .news_item a { color: #333333; }
.news_section .news_item a:hover { text-decoration: underline; }

.achievement_section { -ms-flex:0 0 904px; flex:0 0 904px; max-width: 904px; }
.achievement_section .section_title { background-color: #fa7d26; }
.achievement_section .section_title svg { fill: #e8451b }
.achievement_section .achievement_list { width: 100%; }
.achievement_section .achievement_item { padding: 18px 20px; border-bottom: 2px solid #efefef; }
.achievement_section .achievement_item:last-child { border-bottom: none; }
.achievement_section .achievement { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.achievement_section .achievement_photo { -ms-flex: 0 0 147px; flex: 0 0 147px; width: 100%; max-width: 147px; }
.achievement_section .achievement_photo img { display: block; width: 100%; }
.achievement_section .achievement_info { -ms-flex: 1 0 0%; flex: 1 0 0%; width: auto; max-width: 100%; padding: 10px 0 10px 38px; box-sizing: border-box; overflow: hidden; }
.achievement_section .achievement_date { font-size: 15px; color: #276ca3; }
.achievement_section .achievement_title { font-size: 17px; color: #333333; }
.achievement_section .achievement_title a { color: #333333; }
.achievement_section .achievement_title a:hover { color: #276ca3; }

.useful_section { -ms-flex:0 0 294px; flex:0 0 294px; max-width: 294px; }
.useful_section .section_box { border: 0; background: none; box-shadow: none; }
.useful_section .section_title,
.useful_section .section_more { display: none; }
.useful_section .useful_list { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -2px -9px; }
.useful_section .useful_img { -ms-flex: 0 0 100%; flex: 0 0 100%; width: 100%; max-width: 100%; padding: 2px 9px; box-sizing: border-box; }
.useful_section .useful_img a { display: block; width: 100%; position: relative; }
.useful_section .useful_img img { display: block; width: 100%; }
.useful_section .useful_img p { position: absolute; right: 10px; bottom: 6px; font-size: 21px; color: #ffffff; font-weight: 700; text-shadow: 1px 1px 1px rgba(0,0,0,0.8); }

/*-------------------------------------------------------------------------------------*/
/* GALLERY */

.gallery_content { padding: 0 28px; }

.gallery_cate_name { padding-bottom: 24px; font-size: 29px; color: #115fa9; font-weight: 700; }

.gallery_list { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -8px; }
.gallery_list .gallery_item { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex: 0 0 33.3333334%; flex: 0 0 33.3333334%; width: 100%; max-width: 33.3333334%; padding: 8px; box-sizing: border-box; }
.gallery_list .gallery { width: 100%; background-color: #ffffff; border: 3px solid #ffffff; border-radius: 4px; box-shadow: 0 0 5px rgba(0,0,0,0.3); }
.gallery_list .gallery_photo { width: 100%; height: 171px; }
.gallery_list .gallery_photo img { display: block; width: 100%; }
.gallery_list .gallery_info { padding: 12px 10px; box-sizing: border-box; }
.gallery_list .gallery_title { font-size: 17px; color: #333333; font-weight: 700; line-height: 1.1; }
.gallery_list .gallery_date { padding-top: 2px; font-size: 13px; color: #276ca3; }

.gallery_detail { width: 100%; padding: 0 17px; box-sizing: border-box; }
.gallery_detail .gallery_detail_header { padding: 12px 0; border-bottom: 1px solid #115fa9; }
.gallery_detail .gallery_detail_date { font-size: 18px; color: #276ca3; }
.gallery_detail .gallery_detail_title { font-size: 29px; color: #000000; font-weight: 700; }
.gallery_detail .gallery_detail_info { padding-top: 14px; font-size: 17px; color: #333333; line-height: 1.4; }

.gallery_detail .gallery_detail_photo { width:100%; padding: 24px 52px 0 52px; box-sizing:border-box; }
.gallery_detail .gallery_detail_photo .large_photo { width:100%; position:relative; box-sizing:border-box; }
.gallery_detail .gallery_detail_photo .large_photo > img { width:100%; display:block; }
.gallery_detail .gallery_detail_photo .large_photo .photo { position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; text-align:center; overflow:hidden; }
.gallery_detail .gallery_detail_photo .large_photo .photo img { position:absolute; left:50%; top:50%; max-width:100%; max-height:100%; display:block; transform:translate(-50%,-50%); }
.gallery_detail .gallery_detail_photo .large_photo .row { position:absolute; left:0; top:50%; width:100%; }
.gallery_detail .gallery_detail_photo .large_photo .row_prev, 
.gallery_detail .gallery_detail_photo .large_photo .row_next { position:absolute; top:0; width:42px; height:42px; background-color:#6cabd1; border-radius:100%; box-sizing:border-box; font-size:36px; color:#ffffff; font-weight:bold; line-height:42px; text-align:center; cursor:pointer; }
.gallery_detail .gallery_detail_photo .large_photo .row_prev { left:-52px; padding-right:3px; }
.gallery_detail .gallery_detail_photo .large_photo .row_next { right:-52px; padding-left:3px; }

.gallery_detail .gallery_detail_photo .thumb_area { width:100%; padding-top:28px; box-sizing:border-box; }
.gallery_detail .gallery_detail_photo .thumb_list { margin:0 -4px; display:block; }
.gallery_detail .gallery_detail_photo .thumb_item { float:left; width:20%; padding:0 4px; box-sizing:border-box; }
.gallery_detail .gallery_detail_photo .thumb { width:100%; height:96px; position:relative; overflow:hidden; }
.gallery_detail .gallery_detail_photo .thumb:before { position:absolute; left:0; top:0; z-index:-1; content:""; width:100%; height:100%; border:3px solid #115fa9; box-sizing:border-box; opacity:0; transition:all 0.2s ease; }
.gallery_detail .gallery_detail_photo .thumb img { width:100%; display:block; }
.gallery_detail .gallery_detail_photo .thumb.active:before { z-index:1; opacity:1; }

.gallery_detail .gallery_detail_photo .thumb_list.owl-loaded { width:100%; margin:0; }
.gallery_detail .gallery_detail_photo .thumb_list.owl-loaded .owl-item .thumb_item { width:100%; padding:0; }
.gallery_detail .gallery_detail_photo .thumb_list.owl-loaded .owl-nav { position:absolute; left:0; top:50%; width:100%; font-size:26px; color:#115fa9; font-weight:bold; line-height:1; }
.gallery_detail .gallery_detail_photo .thumb_list.owl-loaded .owl-prev, 
.gallery_detail .gallery_detail_photo .thumb_list.owl-loaded .owl-next { position:absolute; top:0; outline:none; cursor:pointer; transform:translateY(-50%); }
.gallery_detail .gallery_detail_photo .thumb_list.owl-loaded .owl-prev { left:-36px; }
.gallery_detail .gallery_detail_photo .thumb_list.owl-loaded .owl-next { right:-36px; }

/*-------------------------------------------------------------------------------------*/
/* NEWS */

.news_content { width: 100%; padding: 0 23px; box-sizing: border-box; position: relative; }

.news_list { width: 100%; display: block; }
.news_list .news_item { width: 100%; box-sizing: border-box; }
.news_list .news { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; width: 100%; padding: 20px 30px; border-bottom: 1px solid #efefef; position: relative; box-sizing: border-box; }
.news_list .news_photo { -ms-flex: 0 0 147px; flex: 0 0 147px; width: 100%; max-width: 147px; }
.news_list .news_photo img { display: block; width: 100%; }
.news_list .news_info { -ms-flex: 1 0 0%; flex: 1 0 0%; padding: 0 50px 0 38px; box-sizing: border-box; overflow: hidden; font-size: 19px; color: #333333; }
.news_list .news_date { font-size: 15px; color: #276ca3; }
.news_list .news_btn { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; box-sizing: border-box; }
.news_list .news_btn a { display: block; padding: 5px 16px; background-color: #115fa9; font-size: 19px; color: #ffffff; }

.news_detail { width: 100%; }
.news_detail .news_detail_title { padding: 0 10px 18px 10px; border-bottom: 1px solid #115fa9; font-size: 29px; color: #000000; }
.news_detail .news_detail_content { width: 100%; padding: 20px 10px 0 10px; box-sizing: border-box; }

/*-------------------------------------------------------------------------------------*/
/* CALENDAR */

.calendar_area { width:100%; box-sizing:border-box; margin-top:-20px; }
.calendar_area .calendar_topic { height:47px; position:relative; box-sizing:border-box; margin:0 14px 23px 14px; text-align:center; font-size:22px; color:#ffffff; font-weight:700; line-height:47px; }
.calendar_area .calendar_topic:before { position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 100%; background-color:#4d9bde; transform: skew(-30deg); }
.calendar_area .calendar_topic p { position: relative; }

.calendar_area .calendar_row { position:absolute; right:86px; top:50%; font-size:0; line-height:normal; text-align:right; transform:translateY(-50%); }
.calendar_area .calendar_row a { display:inline-block; vertical-align:top; width:35px; height:27px; background-color:#e9e9e9; border-left:2px solid #d9d9d9; text-align:center; line-height:25px; font-size:24px; color:#2a2e2e; font-weight:bold; transition:all 0.2s ease; cursor:pointer; }
.calendar_area .calendar_row a:first-child { border-left:0; }
.calendar_area .calendar_row a.prev_month { border-radius:4px 0 0 4px; }
.calendar_area .calendar_row a.next_month { border-radius:0 4px 4px 0; }
.calendar_area .calendar_row a:hover { background-color:#00478c; color:#ffffff; }

.calendar_area .calendar_table { width:100%; max-width: 782px; padding: 0 28px; margin:0 auto; box-sizing:border-box; }
.calendar_area .calendar_table .table { display:table; width:100%; background-color:#eefbfd; border-collapse:collapse; font-size:16px; color:#000000; table-layout:fixed; }
.calendar_area .calendar_table .table .table_tr { display:table-row; }
.calendar_area .calendar_table .table .table_td { display:table-cell; vertical-align:top; height:93px; padding:4px; border:1px solid #dbf0f4; box-sizing:border-box; text-align:right; }

.calendar_area .calendar_table .table .table_tr:first-child .table_td { height:22px; padding:0; text-align:center; font-weight:bold; line-height:22px; }
.calendar_area .calendar_table .table .table_td.today { background-color:#e6f4f9; }
.calendar_area .calendar_table .table .table_td.other_month { color:#999999; }

.calendar_area .calendar_table .calendar_event { display:block; padding:2px 3px; margin-top:3px; box-sizing:border-box; border-radius:2px; position:relative; z-index:10; font-size:13px; color:#ffffff; font-weight:normal; text-align:left; }
.calendar_area .calendar_table .calendar_event.type_1 { background-color:#7d08b6; }
.calendar_area .calendar_table .calendar_event.type_2 { background-color:#ff3300; }
.calendar_area .calendar_table .calendar_event.type_3 { background-color:#00b475; }
.calendar_area .calendar_table .calendar_event.type_4 { background-color:#cd56b1; }

.calendar_remark { width:100%; max-width: 782px; padding: 20px 28px 0 28px; box-sizing:border-box; position:relative; margin: 0 auto; text-align:right; }
.calendar_remark .remark_item { display:inline-block; vertical-align:top; padding-left:30px; padding-bottom:14px; }
.calendar_remark .remark { padding-left:23px; position:relative; line-height:17px; font-size:15px; color:#333333; font-weight:700; }
.calendar_remark .remark:before { position:absolute; left:0; top:0; content:""; width:17px; height:17px; }
.calendar_remark .remark_1:before { background-color:#7d08b6; }
.calendar_remark .remark_2:before { background-color:#ff3300; }
.calendar_remark .remark_3:before { background-color:#00b475; }
.calendar_remark .remark_4:before { background-color:#cd56b1; }

.calendar_pdf { width: 100%; max-width: 782px; padding: 0 28px; margin: 0 auto; position: relative; box-sizing: border-box; }
.calendar_pdf a { position: absolute; left: 0; bottom: 0; display: inline-block; padding: 4px 21px; background-color: #115fa9; border-radius: 6px; box-shadow: -5px 5px 5px rgba(0,0,0,0.3); font-size: 19px; color: #ffffff; font-weight: 700; }

.event_area { width:100%; padding-top:48px; box-sizing:border-box; }
.event_area .event_topic { padding-bottom: 20px; text-align: center; font-size: 36px; color: #2f5395; font-weight: 700; }
.event_area .event_list { width:100%; }
.event_area .event { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width:100%; padding:18px 0; border:3px solid #dfeef7; margin-bottom: 6px; box-sizing:border-box; position:relative; }
.event_area .event_date { -ms-flex: 0 0 103px; flex: 0 0 103px; width: 100%; max-width: 103px; border-right: 1px solid #dbedf6; box-sizing: border-box; font-size: 17px; color: #2f5395; text-align: center; }
.event_area .event_date p:first-child { font-size: 23px; }
.event_area .event_info { -ms-flex: 1 0 0%; flex: 1 0 0%; width: auto; max-width: 100%; padding: 0 24px; box-sizing: border-box; font-size:14px; color:#000000; }
.event_area .event_title { font-size:17px; color:#277fc6; font-weight:700; }

/*-------------------------------------------------------------------------------------*/
/* EDITOR CONTENT */

.editor_content { min-height:480px; display:block; color:#000000; font-size:16px; }
.editor_content:after { content:""; display:block; width:100%; clear:both; }
.editor_content .table_area { width:100%; overflow-x:auto; }
.editor_content iframe { max-width:100%; box-sizing:border-box; }
.editor_content img { max-width:100%; box-sizing:border-box; }
.editor_content table { max-width:100%; box-sizing:border-box; border-collapse:collapse; border-style:solid; }

/* Tag default values */
.editor_content ul, 
.editor_content ol { display:block; padding-left:20px; }
.editor_content ul { list-style-type:disc; }
.editor_content ol { list-style-type:decimal; }
/*
.editor_content h1 { margin:0.67em 0; }
.editor_content h2 { margin:0.83em 0; }
.editor_content h3 { margin:1em 0; }
.editor_content h4 { margin:1.33em 0; }
.editor_content h5 { margin:1.67em 0; }
.editor_content h6 { margin:2.33em 0; }
.editor_content p { margin:1em 0; }
*/

/*分頁css*/
.pagination {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
  padding: 0;
  margin: 15px 0 30px 0;
  list-style: none;
}
.pagination .page-link {
position: relative;
  display: block;
  padding: 5px 10px;
  font-family:'Lato', Mukta, sans-serif;
  line-height: 1.25;
  color: #575758;
  background-color: #fff;
  -webkit-transition: background 300ms ease-in-out, color 300ms ease-in-out;
  -o-transition: background 300ms ease-in-out, color 300ms ease-in-out;
  transition: background 300ms ease-in-out, color 300ms ease-in-out;
  margin-right: 8px;
}

.pagination .page-link:hover,.pagination .page-item.prev .page-link,.pagination .page-item.next .page-link {
background: #797979;
color: #ffffff;
text-decoration: none;
}

.pagination .page-item.active .page-link {
background: #0c69bb;
color: #ffffff;
}
/*分頁css結束.   這個一般都有。*/






/*webpagedesc 內容css*/
.content_detail .content_item { margin-bottom:12px; }
.content_detail .content_subtitle { font-size:23px; color:#048ed6; font-weight:700; margin-bottom:16px; }

.content_detail .content_img { font-size:0; margin:0 -8px; display:block; }
.content_detail .content_img .col_1,
.content_detail .content_img .col_2,
.content_detail .content_img .col_4 { display:inline-block; vertical-align:top; padding:0 8px 10px 8px; box-sizing:border-box; text-align: center; }
.content_detail .content_img .col_1 img,
.content_detail .content_img .col_2 img,
.content_detail .content_img .col_4 img { max-width:100%; height:auto; box-shadow:2px 2px 5px rgba(0,0,0,0.3); }
.content_detail .content_img .col_1 { width:100%; }
.content_detail .content_img .col_2 { width:50%; }
.content_detail .content_img .col_4 { width:25%; }

.content_detail .content_desc { line-height: 1.5em; }
.content_detail .content_desc iframe { max-width:100%; box-sizing:border-box; }
.content_detail .content_desc img { max-width:100%; box-sizing:border-box; }
.content_detail .content_desc ul,
.content_detail .content_desc ol { display:block; xmargin:1em 0; xpadding-left:40px; padding-left:20px; margin: 0; }
.content_detail .content_desc ul { list-style-type:disc; }
.content_detail .content_desc ul ul { list-style-type:circle; margin-top: 10px; }
.content_detail .content_desc ol { list-style-type:decimal; }
.content_detail .content_desc li { padding-bottom: 6px; }
.content_detail .content_download_file_list { display: table; }
.content_detail .content_download_file_list .content_download_file_icon { display: table-cell; vertical-align: middle; }
.content_detail .content_download_file_list .content_download_file { display: table-cell; vertical-align: middle; padding-left: 10px; }
.content_detail .content_download_file_list .content_download_file a { color:#048ed6;  }
.content_detail .content_download_file_list .content_download_file a:hover { color:#3256a0; }

.editor_content .content_youtube{
	width: 100%;
	margin:0 auto;

}
.editor_content .content_youtube iframe{
	width: 100%;

}
/*webpagedesc 內容結束css*/

.wrapPage .select_area { display:inline-block; vertical-align:top; width:100%; max-width:120px; vertical-align:top; background-color:#ffffff; border-radius:2px; position:relative; cursor:pointer; }
.wrapPage .select_area:before { position:absolute; right:15px; top:50%; content:""; width:0; height:0; border-style:solid; border-width:7px 6px 0 6px; border-color:#3256a0 transparent transparent transparent; transform:translateY(-50%); }
.wrapPage .select_area select { width:100%; height:32px; padding-left:40px; padding-right:40px; background-color:transparent;  border:1px solid #cccccc; box-sizing:border-box; border-radius:2px; position:relative; font-size:13px; color:#000000; -webkit-appearance:none; appearance:none; outline:none; }

.wrapPage .multipage {float: right; padding-top:34px; margin:0 -7px; font-size:20px; text-align:right; clear:both; }
.wrapPage .multipage a { display:inline-block; zoom:1; *display:inline; vertical-align:top;  margin:0 2px; text-align:center; line-height:22px; font-size:14px; color:#000000; transition:all 0.2s ease; }
.wrapPage .multipage a.row,
.wrapPage .multipage a.back,
.wrapPage .multipage a.next { width:26px; margin:0 7px; background-color:#797979; color:#ffffff; }
.wrapPage .multipage a.onpage,
.wrapPage .multipage a:hover { background-color:#048ed6; color:#ffffff; }
.wrapPage .multipage .select_area { display:none; }
.wrapPage .multipage li{
	padding: 0px;
	margin: 0px;
}
@media screen and (max-width: 980px){
/* desktop to ipad */


.wrapPage .multipage { text-align:center; }
.wrapPage .multipage a { display:none; }
.wrapPage .multipage .select_area { display:inline-block; }
}


.sublist li {
	margin-left: 1rem;

}
.sublist li a{
	display: block;
    width: 100%;
    padding: 5px 16px 0px 0px;
    background-color: transparent;
    box-sizing: border-box;
    font-size: 16px;
    color: #115fa9;
    font-weight: 700;
    transition: all 0.3s ease;
}


/*john 2020-3-11 add*/
.contact-form input[type='radio']{
	-webkit-appearance: radio;
	-moz-appearance: radio;
    appearance:radio;
}
.contact-form .input_item input[type='text']{
	-webkit-appearance:none;
    -moz-appearance: none;
    appearance:none;

    font-size:1.2em;
	height:1.2em;
	border-radius:4px;
	border:1px solid #115fa9;
	color:#115fa9;
}
.radio-group{
	width: auto;
	display: inline-block;
}
.radio-group .radio_item{

	display: inline-block;
	font-size: 18px;
	font-weight: 900;
}
.contact-form .input-group .input_item{
	display: block;
	font-size: 18px;
	font-weight: 900;
	padding: 5px 0 5px 0;
}
.contact-form .textarea-group .select_area
{
	 max-width: 243px;
}
.contact-form .textarea-group .select_area select
{
	width: 100%;
    height: 40px;
    padding: 0 30px 0 20px;
    border: 1px solid #115fa9;
    border-radius:4px;
}
.contact-form .textarea-group textarea
{
	width: 80%;
    height: 8em;
/*    resize: vertical; 可調整高度*/
	resize: none; 
	border:1px solid #115fa9;
	border-radius:4px;
	font-size:1.2em;
	color:#115fa9;
}
.contact-form .btn-submit input[type='submit']{
    padding: 4px 15px 4px 15px;
    background-color: #115fa9;
    box-sizing: border-box;
    font-size: 19px;
    color: #ffffff;
    font-weight: 700;
}
.contact-form .btn-submit input[type='submit']:hover{
	background-color:#b0cee1;
}
#main .contact-form .title{
	margin-bottom: 20px;
}
.contact-form .error{
	border-color: red !important;
	border-style: solid;
    box-shadow: 0 0 6px rgba(255, 0, 0, 0.3) !important;
}

/*john 2020-7-7 add*/

#main .content_detail .content_item .content{
    padding: 0px;
}