@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500&display=swap');
/* CSS Document */
html,body {
    padding: 0px; margin: 0px; min-height:100%; font-size:19px; color: #333; line-height:33px;
	font-family: 'Noto Serif TC', serif , 'Oswald', sans-serif, serif; 
}
a{transition: all 0.3s ease 0s;}
a:link, a:visited {color: #00266e; text-decoration: none;}
a:hover {color: #ffa800 ; text-decoration: underline; }
.clear{clear:both}
.contextual-links-region{ position: static}

table{border-collapse: inherit; }
table ul, table ol{ margin:0; }
img {border:0;}
div, ul li{ margin:0px auto; padding:0px;}

.wrap{ width:100%; min-height:100%; background: #fff; overflow:hidden }
.screen{  position:relative; padding:0 10px ;min-width: 680px;max-width: 1600px;}
#inner_container {padding: 170px 0 50px 0;}
.container{ height: auto; background-repeat: no-repeat;
background-attachment: fixed;  }
.container .screen{  padding:0 30px; }
.container a, .upper_footer a , .header a{-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; opacity: 1;}

#Information_detail h1 { color:#002b60; }

h1{ font-size:33px; color:#fff; font-family: 'Noto Serif TC', serif }
h2{ font-size:28px; color:#e5d2ae; font-family: 'Noto Serif TC', serif }
h3{ color: #fff;padding: 5px 0px ;margin: 10px 0;display: inline-table;font-size: 24px;font-weight: bold; border:0;width:100%; font-family: 'Noto Serif TC', serif}
h4{ font-size:24px; margin:10px 0; color:#053368; border-left:3px solid #001f47; padding:5px 15px; font-family: 'Noto Serif TC', serif}
h5{ font-size:22px; margin:0px; color:#fff ;font-family: 'Noto Serif TC', serif}
h6{ font-size:19px; line-height:30px; color:#fff;font-family: 'Noto Serif TC', serif }
p{ margin:0px; padding:0px}

/* theme */
 .grid_photo
{
	float: left;
position: relative;
overflow: hidden;
cursor: pointer;
	}
 .grid_photo .caption{
		opacity: 0;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
	}
	 .grid_photo:hover .caption{
		opacity: 1;
	}

	.grid_photo .blur{
		background-color: rgba(1,65,146,0.65);
		height: 100%;
		width: 100%;
		z-index: 5; 
		position: absolute;
	}
.grid_photo a {
	display:block;height: 100%;
		width: 100%;
}
	 .grid_photo .caption-text{
		z-index: 10;
		color: #fff;
		position: absolute;
		width: 100%;
		height: 100%; top:0;
		text-align: center;
	}

   .grid_photo .caption-text h5 { 
  font-size:21px; position: absolute;
  top: 47.5%; line-height:23px; margin:0; padding:0; text-align:center; display:inline-block;
  left: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%); color:#fff !important; border-left:0;   }
  
.inner_content_full a { color:#333 !important;}

figure {  margin: 0;  padding: 0;}
figure img {  display: block;  max-width: 100%;}

figure {  margin: 0;  padding: 0;}
figure img {  display: block;  max-width: 100%;}
/* theme */
.FullPage .inner_content{  padding:15px }
.FullPage .arrowlistmenu{ display:none !important }

.sticky { z-index:10; -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; opacity: 1; }
.sticky .header { position:fixed; top:0px; z-index:10; width:100%; background:rgb(0, 43, 96); box-shadow:  0 0 3px rgba(0,0,0,.2) ;  min-height: auto;  } 






#contact_info{ background: rgb(0,89,170); background: linear-gradient(355deg, rgba(0,89,170,1) 0%, rgba(1,153,216,1) 100%); color:#fff; padding:30px 0;}
#contact_info .logo_footer { float: left; width:29%  }
#contact_info .contactinforamtion { float: left; width:43%; line-height:33px; padding-top:10px;  }
#contact_info span { padding: 0 0 0 35px;  }

#contact_info .socialmedia { float: right; width:27% ; }

.logo_footer .logo_area { float: left; padding:0px  ;   }
.logo_footer .logo_area a { display:block;}
.logo_footer .logo_img {  float: left; }
.logo_footer .logo_img img{ width:100%; max-height:85px;  image-rendering: -webkit-optimize-contrast;  }
.logo_footer .logo_txt { padding:10px 0 0 10px; float: left;   }
.logo_footer .logo_tc { font-size:30px; letter-spacing:3px; color:#fff; }
.logo_footer .logo_en { font-size:22px; line-height:30px; letter-spacing:-0.5px; color:#fff }

.l_photo { float:left; width:100%;}
.l_photo ul { list-style:none; margin:0; padding:0}
.l_photo ul  li { float:left; width:30%}
.l_photo ul  li img { max-width:100%}
.l_photo ul  li+li { float:right; width:68%; text-align: left;}





.r_photo { float:left; width:100%;}
.r_photo ul { list-style:none; margin:0; padding:0}
.r_photo ul  li { float:right; width:20%}
.r_photo ul  li img { max-width:100%}
.r_photo ul  li+li { float:left; width:78%; text-align: left;}

.esda{ float: left; width:48%;}
.esda a{ background:url(../images/web/esda.png) no-repeat ; background-position:0 50%; padding:15px 0 15px 52px; display:block; color:#fff }
.facebook{ float: left; width:48%; margin-left:4%;}
.facebook a{ background:url(../images/web/fb.png) no-repeat ; background-position:0 50%; padding:15px 0 15px 52px; display:block; color:#fff }
/* Header */
#inner_header {background: rgb(0, 43, 96); }

.header{ background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);  position: absolute;  z-index:10; width:100%  }
.header .logo_area { float: left; padding:10px 0  ; max-width:50%;  text-align: left; position:absolute; }
.header .logo_area a { display:block;}
.header .logo_img {  float: left;  }
.header .logo_img img{ width:100%; max-height:85px;  image-rendering: -webkit-optimize-contrast; -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; opacity: 1; }
.header .logo_txt { margin:2px 0 0 10px; float: left; color:#001f47; -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; opacity: 1; }
.logo_tc { font-size:32px; letter-spacing:3px; line-height:50px; font-family: 'Noto Sans TC', serif; }
.logo_en { font-size:24px; line-height:23px; letter-spacing:-0.5px; color:#333; font-weight:normal; font-family:  'Italianno', cursive; }
.header a { -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; opacity: 1; }

@media screen and (max-width:1500px) {
#contact_info #f_email { padding: 0 0 0 0px; display:block;  }

}
@media screen and (max-width:1280px) {
.logo_tc { font-size:28px; letter-spacing:1px;  }
.logo_en { font-size:18px; line-height:30px; letter-spacing:-0.5px; }
.logo_footer .logo_tc { font-size:24px; letter-spacing:1px;  }
.logo_footer .logo_en { font-size:19px; letter-spacing:-0.5px; }
.logo_footer .logo_img img{ width:100%; max-height:65px;  }
.logo_footer .logo_txt { padding:0px 0 0 0px;   }
#contact_info span { padding: 0 0 0 10px;  }
.header .logo_area img { width:100%  }
.feature ul li p { font-size:25px !important}
.facebook a{ background:url(../images/web/fb.png) no-repeat ; background-position:0 18px;  }
.esda a{ background:url(../images/web/esda.png) no-repeat ; background-position:0 18px; }
.latest_awards ul li .date { top:35% !important}
.school_videos .title { width:17% !important}
.school_videos ul li iframe {max-height: 207px !important;min-height: 207px !important;}

.latest_new .content_title { font-size: 18px !important; }
.latest_new .content {line-height: 23px !important;font-size: 15px !important;}
.contact_info ul li { font-size:15px;}
}
@media screen and (max-width:1023px) {
.header .logo_txt { display: none}
.logo_footer .logo_txt { padding:0px; clear:both; }
.latest_awards ul li{ width:48% !important;}
.latest_awards ul li:nth-child(2n+1){ clear:both;}
.contact_info ul li {width:100% !important; margin:0px !important; line-height:30px; }
.contact_info ul li span{ background-size:20px auto !important; }
.contact_info { float:left; width:50%;}
.contact_us { float:left; width:50%}
}

#vertical-wrapper{ float:right; width:50%}
#menu_area , .menu_area{ clear:both;}

.top_right{  margin: 20px 0 0px 0; float:right; position:relative; clear:both}
.top_right ul { list-style:none; margin:0; padding:0; float:right;}
.top_right ul li{ padding:0 10px; float: left; }
.top_right ul li a{ display:block;}
.top_right ul li a span{ padding:15px 5px; display:block}
.top_right ul li:nth-child(2) a span{ padding:10px 5px; }
.top_right ul li+li+li+li+li a { background:#9a8661; border-radius:8px;padding: 2px 10px 2px 40px;position: relative;display: block; font-size:15px; color:#fff}
.top_right ul li+li+li+li+li a img { position:absolute; left:10px;top:5px}


.top_right ul li:hover { opacity:.7}
/* Main */
.inner_area { background:#fff ; padding:0px 0 0 0; background-size:cover; }
.inner_area_b { background:url(../images/web/event_bg.png) no-repeat center center ; padding:70px 0; background-size:cover; }
.inner_area_c {  padding:70px 0; background:url(../images/web/inner_c.png) #fff  }

.more_area{ position: absolute; right:0px; top:-5px; display:block; z-index:1;  font-size:15px; text-transform: uppercase;  text-align:center; }


/* latest_new */
.latest_new{ float: left; width:100%;   position:relative; background:url(../images/web/news_bg.jpg);  }
.latest_new .area{   }
.latest_new .title { background:url(../images/web/news_title_bg.png) no-repeat center center #053368; font-size:30px; color:#fff; text-transform: uppercase; padding:15px 0; text-align:center  }
.latest_new ul{ list-style:none; margin: 0; padding: 0px; overflow-y: auto; max-height:550px;}
.latest_new ul li{ position:relative; padding: 10px 0px;}
.latest_new ul li:nth-of-type(even){background: rgba(204,204,204,.1) };
.latest_new ul li span{ float: left; padding:0 0; }
.latest_new ul li a{ display:block; padding:0; color:#333;}
.latest_new ul li:hover { background: #e6f2ff}
.latest_new .content{float: left; color:#4a4a4a;  width:100%; }
.latest_new .date{ margin: 0 0 ; font-size:17px;  display:inline-block; padding:5px 0 ; color:#4a4a4a }
.latest_new ul li .news_title { font-size:21px; line-height:24px; text-transform:uppercase; color:#004ea0; margin-bottom:10px;}
.latest_new ul li .description{  color:#333; font-size:17px; line-height:21px; }
.latest_new .more_area a { background: #fff; color:#333; padding:5px 40px; display:block;}
.latest_new .more_area a:hover { background: #998560; color:#fff; }
.latest_new  .cover{ float: left; width: 100%; margin-bottom:20px }
.latest_new  .cover img{ max-width:100%; box-shadow: 0px 0px 3px rgba(0,0,0,.2) }
.latest_new  .content_title { color:#053368; font-size: 20px;}


.latest_awards{ background: rgba(255,255,255,0.7); position:relative; box-shadow:0 0 2px rgba(0,0,0,.3);}
.latest_awards .area{ padding:30px; min-height:350px;  }
.latest_awards .title { background:#004ea0; font-size:30px; padding:15px 30px; color:#fff; text-transform: uppercase; position:absolute; left:0; top:0;  }

#inner_awards{ position:relative; box-shadow:0 0 2px rgba(0,0,0,.0);}
#inner_awards ul{ padding: 0px 0 30px 0; }





.latest_video { float: left; width:100%;   position:relative; margin:50px 0 0 0}
.latest_video .title{ font-size: 30px;color: #000;text-transform: uppercase;padding: 15px 0;text-align: center;}
.latest_video .main_events_area ul { list-style:none; margin:0; padding:0}
.latest_video .main_events_area ul li { width:50%; float:left;}



.latest_notices  { float: left; width:48%;   position:relative; }
.latest_notices .title{ font-size: 30px;color: #053368;text-transform: uppercase;padding:0 0 15px 0;text-align: left;border-bottom: 3px solid #9a8661;}
.latest_notices .main_events_area ul { list-style:none; margin:0; padding:0}
.latest_notices .main_events_area ul li { width:100%; float:left;}
.latest_notices ul li { border-bottom: 1px solid #d3d3d3;padding: 5px 0;}
.latest_notices ul li a{ display:block; background:url(../images/web/note.png) no-repeat right #002b60; padding:1%; background-position-x: 98%;}
.latest_notices ul li a:hover { opacity:.7}
.latest_notices ul li:nth-child(even) a{ display:block; background:url(../images/web/note.png) no-repeat right #fafafa; padding:10px;background-position-x: 98%;}
.latest_notices ul li .box_day{ float: left; width:80px; position:relative;  height:60px; margin:10px 0 0 0}
.latest_notices ul li .box_day{ background:url(../images/web/green_corner.png) no-repeat center bottom;  }
.latest_notices ul li .box_day .day_text{ position:absolute; left:0px; top:2px; font-size:30px; color:#fff }
.latest_notices ul li .box_day .date_month{ position:absolute; right:0px; top:22px; font-size:19px; color:#fff}
.latest_notices ul li:nth-child(2n)  .box_day .day_text {color:#053368}
.latest_notices ul li:nth-child(2n)  .box_day .date_month {color:#053368}
.latest_notices .content { padding:20px 0;float: right;width: 80%; color:#fff}
.latest_notices ul li:nth-child(2n)  .content {color:#053368}
.latest_notices .more_area { top:0}
.latest_notices .more_area a{ background:#053368 ; display:block;padding: 5px 40px;color: #fff;}
.latest_notices .more_area a:hover{ background: #F90 }

/* Main Userful Links */


#login_area { background:url(../images/web/eclass_bg.png) no-repeat right #81d8d0; float:right; width:36%; padding:15px 1%  }
#login_area .login_icon{ text-shadow: 0 0 3px rgba(0,0,0,.3); font-size:27px; line-height:30px; text-transform: uppercase; }
#login_area .login_icon a{ color:#fff !important }
#UserLogin , #UserPassword{ font-size:15px; width:100%; border:0px;   line-height:30px; }
#UserLogin { margin-bottom:5px;}
#sumbit { background:#dddddd; color:#333;  font-size:19px; line-height:26px; text-align: center; border:1px solid #fff; box-shadow: 0 0 3px rgba(0,0,0,.2); border-radius: 8px; font-family: 'Oswald', sans-serif, 'Noto Sans TC', serif; background:#eeeeee; text-transform: uppercase;}

.main_calenadr{ float: right;width: calc(48% - 40px);position: relative; box-shadow: 0 0 3px rgba(0,0,0,0.2);background: #053368;padding: 20px;}
.main_calenadr .area{ background:#fff  }
.main_calenadr .title { background:#053368;  color:#fff ; font-size:30px; padding:15px 0; }
.main_calenadr ul{ list-style:none; margin: 0; padding: 0px;}
.main_calenadr ul li{ border-bottom:none;background: #fff;  position:relative; padding: 10px 5px;}
.main_calenadr ul li:nth-of-type(even){background: #f7f7f7;}
.main_calenadr ul li span{  }
.main_calenadr ul li a{ display:block; padding:0; color:#333;}
.main_calenadr .more_area { top:0}
.main_calenadr .more_area a { background:rgba(19,128,90,.7); color:#fff; padding:5px 20px; display:block;}
.main_calenadr .more_area a:hover { background:rgba(19,128,90,1); color:#fff; }

#calendar{ padding:10px 5px;min-height: 465px;max-height: 465px;overflow-y: scroll;}
.fc-center h2{ font-size:13px;}


.contact_main { margin: 0; clear: both; width:100%; background:url(../images/web/footer.png) no-repeat; padding:30px 0 30px 0; background-size: cover; line-height:70px }
.contact_info ul{ list-style: none; margin:0 ; padding:0; color:#fff !important; width:100%;}
.contact_info ul li{ float: left; width:25%; margin:15px 0;}
.contact_info ul li span{ background:url(../images/web/map.png) no-repeat left; background-size:25px auto; padding:10px 0 10px 40px;}
.contact_info ul li+li span{ background:url(../images/web/tel.png) no-repeat left;}
.contact_info ul li+li+li span{ background:url(../images/web/fax.png) no-repeat left;}
.contact_info ul li+li+li+li span{ background:url(../images/web/email.png) no-repeat left;}

.contact_us  {  width:100%; }
.contact_us ul{ list-style:none; margin:0; padding:0; text-align:center;}
.contact_us ul li   { text-align:center; margin:10px 0;  display:inline-flex }

.contact_us ul li a{ background:url(../images/web/contactus.png) no-repeat left #053368; padding: 10px 10px 10px 52px;background-position: 10px 50%; background-size: 35px auto; line-height:25px;}
.contact_us ul li+li { margin-left:10px;}
.contact_us ul li a:hover{background:url(../images/web/contactus.png) no-repeat left #0357c3; background-position: 10px 50%; background-size: 35px auto}
.contact_us ul li+li a{ background:url(../images/web/sitemap.png) no-repeat left #053368; padding: 10px 10px120px 60px;background-position: 10px 50%; }
.contact_us ul li+li a:hover{background:url(../images/web/sitemap.png) no-repeat left #0357c3;background-position: 10px 50%; }
.contact_us ul li+li+li a{ background: #053368;padding: 14px 15px; display: block;line-height: 20px;}
.contact_us ul li+li+li a:hover{background: #0357c3;}
.footer_logo { float: left; width:25%;}
.footer_logo img{ max-width:100%; max-height:80px;}
.contact_main ul li a { color:#fff !important;  }

.right_main{ background:#fff; padding:30px 0; }

#inside_ff { background:url(../images/web/footer_school.png) no-repeat top; padding:80px 0 20px 0   }

.left_main{ background:url(../images/web/footer_school.png) no-repeat bottom;  padding:30px 0;}

.home_contact { float:left; width:29%}
.home_contact .area{ background:rgba(255,255,255, 1); min-height:295px; border:3px solid #86cdff; padding:5px;}
.home_contact .footer_title{ border-bottom:1px solid #86cdff; padding:0 0 5px 0; margin-bottom:10px; }
.home_contact .footer_title img{ width:100%; }
.home_contact tr td{ padding:5px 0;}


/* Banner */
#banner_area{ position:relative; width:100%; height:100%;}
.slider{ }
.sentense{ border:1px solid #fff; background: #F9F9F9; margin:15px 0;}
.sentense .area{ padding:20px ;}
.sentense .title{display:none;}

/* Inner Area */


.home_left{ float:left; width:80%;}







/* Footer */
.footer{  font-size:14px;  background:#fff; padding:30px 0;}
.footer .screen, #contact_info .screen{padding:0 30px ;}
.footer .copyright{ float:left; width:100%; text-align: center ;  }
.footer .power{ float:right; width:28%; text-align: right}
.footer .power a{ color:#333;}
.footer .power a:hover{ color: #094388;}
.footer .copyright a{ color:#333;}

.upper_footer{ background:#00266e; padding: 50px 0 30px}
.upper_footer .Userful_link_outside{float: left; width: 70%;}
.upper_footer .Userful_link_outside .title{ display:none}
.upper_footer .Userful_link_outside ul{ list-style:none; margin:0 0 0 0%; padding:0}
.upper_footer .Userful_link_outside ul li{ float: left; width:19%; margin:0 1% 10px 0;}
.upper_footer .Userful_link_outside ul li img{ width:100%; box-shadow:0 0 2px rgba(0,0,0,.25); border:1px solid #fff;}
.upper_footer .Userful_link_outside ul li:hover img{ opacity:.7; box-shadow:0 0 3px rgba(0,0,0,.4)}
.upper_footer .footer_contact{width: 27%; position: relative; float: right;font-size: 18px; color: #fff;font-family: "Oswald", "微軟正黑體"}
.upper_footer .footer_contact .title{ color:#fff; padding:0 0 0 45px; margin-bottom:10px;}
.upper_footer .footer_contact .title span{ position:absolute; left:0px; top:-1px; background:url(../images/icon_tel.png) no-repeat; width:30px; height:24px;}
.upper_footer .footer_contact .email{color: #fff600;}
.upper_footer .footer_contact .email:hover{ color:#fff}
.upper_footer .footer_contact .upper_footer_map{padding: 3px 15px 3px 34px; box-shadow: 0 0 1px rgba(0,0,0,.35); background: #ffc000 url(../images/icon_map.png) no-repeat; background-position: 10px 6px; color: #fff; border-radius: 4px; font-size: 14px;}
.upper_footer .footer_contact .upper_footer_googlemap{margin-left: 8px; padding: 3px 15px 3px 37px; box-shadow: 0 0 1px rgba(0,0,0,.35); background: #fff url(../images/icon_googlemap.png) no-repeat; background-position: 8px 0px; color: #000; border-radius: 4px; font-size: 14px;}
.upper_footer .footer_contact table{line-height: 36px;}
.upper_footer .footer_contact td { color:#fff;}

.upper_footer .footer_contact td a { color:#fff;}
.upper_footer .footer_contact td a:hover { color:#333;}
.cd-top {
  display: inline-block;  position: fixed;  opacity: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  height: 50px;  width: 50px;  bottom: 50px;  right: 50px;
  overflow: hidden;  text-indent: 100%;  white-space: nowrap; border:1px solid #fff; box-shadow:0px 0px 5px #999;
  background: #fac217 url(../ddsmoothmenu/cd-top-arrow.svg) no-repeat center center;

}
.cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;-moz-transition: opacity .3s 0s, visibility 0s 0s;transition: opacity .3s 0s, visibility 0s 0s;
  background: #8ec63f  url(../ddsmoothmenu/cd-top-arrow.svg) no-repeat center center;
}
.cd-top.cd-is-visible { visibility: visible; opacity: 1;}
.cd-top.cd-fade-out { opacity: .5;}
.no-touch .cd-top:hover { background-color: #666; opacity: 1;}

/* Nevigation */
.nevigation{ padding:15px 0px; font-size:13px; border-bottom:1px dotted #ddd; margin-bottom:15px; display:none;  }
.nevigation .screen{ padding:0; }
.nevigation .home{ background:url(../images/icon/icon_home.png) no-repeat; background-position:0px 3px; display: block; padding-left:25px; }
.nevigation ul{ list-style: none; margin:0px; padding:0px; }
.nevigation ul .sp{ padding:0px 15px; color:#666 }
.nevigation ul li{ float: left; line-height:24px;  }
.nevigation ul li a{ color:#666; text-decoration: none }
.nevigation ul li a:hover{ text-decoration: underline ; color:#032d69}

/* Page Content */


.Page_center  .inner_content{ width:96%; padding:2%;}
.Page_center .inner_content iframe{ width: 100%; min-height:650px;}
.inner_content{   background: rgba(0,43,96,.93); background-size:100% auto; font-family: 'Noto Sans TC'; width: 50% ;
float: left; color:#fff;
margin: 170px 0 50px 0;
padding: 40px; }
.inner_content .main_content{ padding:0px 0 ; min-height:380px; }
.inner_content_full{   }
.inner_content_full .main_content{ padding-bottom:50px;  min-height:500px; line-height:33px; position:relative;background: #fff;
padding: 0 0px 50px 0px;}
.inner_content iframe{ width: 100%; min-height:450px;}
.inner_content img, .inner_content_full img{ max-width:100%;}


.inner_content_full .main_content h1{ float: left; color:#002b60; }

.non_banner{ background:url(../images/web/inner_banner.jpg) no-repeat center center ; position: relative; padding:90px 0 110px 0;  text-align:center; background-position: center;  max-width:1920px; background-size: cover !important}
.non_banner h1{ color:#0e1e5b; padding:5px 0px; display:inline; font-size:80px; text-transform: capitalize; line-height:38px;border-bottom:1px solid #f3cb38; text-shadow:1px 1px 10px rgba(0,0,0,.4); font-family: 'Italianno', cursive; font-weight:normal; }

.inner_content .main_content a { color:#fff;}
.inner_content .main_content a:hover { color:#e1d5bf;}





.inner_banner h1 {   
color: #fff;    padding:  0px 0px;    width: auto;line-height: 48px;margin: 0px 0 20px 0;

font-size: 42px;
}





.media_banner{ background:url(../images/web/inner_banner.jpg) no-repeat center center; position: relative; padding:130px 0 150px 0;  text-align:center; background-position: center;  background-size: cover !important}
.media_banner h1{ color: #fff; display: inline;font-size: 45px;line-height: 72px;border-bottom: 3px solid #f3cb38;text-shadow: 1px 1px 13px rgb(4, 4, 4);font-weight: normal;float: left; }

.subj_banner{ position: relative; padding:150px 0 60px 0;  text-align:center; }
.subj_banner h1{ color: #fff; display: inline;font-size: 45px;line-height: 72px;border-bottom: 3px solid #f3cb38;text-shadow: 1px 1px 13px rgb(4, 4, 4);font-weight: normal; text-align:center;}

.inner_banner{position: relative;
padding:  0;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center top;



}
.inner_banner img{ width:100%; }
.banner_title{ text-align: center; padding:150px 0 0 ;  width:100%; position:absolute; z-index:1;  }
.banner_title span{ padding:15px 50px; text-transform:uppercase; text-shadow:0 0 3px rgba(0,0,0,.1); line-height:33px; font-size:33px; color:#032d69; background:rgba(255,255,255,.95);box-shadow:0 0 3px rgba(0,0,0,.3);}

.main_content { }
.main_content p{ text-align:left ; clear:both}
.main_content span{ }


.detail_inside { background-position: center  top; background-repeat: no-repeat; background-size:100% auto;  }
.detail_inside  .title_t{ margin:0px; padding:70px 0; text-align: center;  }
.detail_inside  .title_t span{ text-align: center; font-size:32px; line-height:38px; color:#fff; padding:10px 30px;text-shadow: 0 5px 10px rgba(0,0,0,.7); text-transform:uppercase; font-weight:normal;  border:1px solid rgba(255,255,255,.7);}


#inner_banner {  }
#inner_banner .title_t{ padding:50px 0; text-align: center;  }
#inner_banner .title_t span{ }

#Media_Video { background-position: center  top; background-repeat: no-repeat; background-size:100% auto; background:url(../images/bg_green.jpg) no-repeat top center; }
#Media_Video .title_t{ margin:0px; padding:70px 0; text-align: center;  }
#Media_Video .title_t span{ text-align: center; font-size:32px; line-height:38px; color:#fff; padding:10px 30px;text-shadow: 0 5px 10px rgba(0,0,0,.7); text-transform:uppercase; font-weight:normal; background:rgba(0,94,54,.3); border:1px solid rgba(255,255,255,.7);}


#Media_Album { background-position: center  top; background-repeat: no-repeat; background-size:100% auto; background:url(../images/bg_green.jpg) no-repeat top center; }
#Media_Album .title_t{ margin:0px; padding:70px 0; text-align: center;  }
#Media_Album .title_t span{ text-align: center; font-size:32px; line-height:38px; color:#fff; padding:10px 30px;text-shadow: 0 5px 10px rgba(0,0,0,.7); text-transform:uppercase; font-weight:normal; background:rgba(0,94,54,.3); border:1px solid rgba(255,255,255,.7);}


.Page_center .inner_content iframe { }
.Album{ margin:15px 0px;}
.Album .title { background:rgba(255,255,255,1);   color: #002b60;    padding: 5px 0;  border:1px solid #0cceff;  
  text-align: center;    width: 100%;line-height: 40px;
display: inline-table;
font-size: 24px; margin:0 0 20px 0;}
.Album .title::after {   letter-spacing: 20px;}

.Album .description{padding:0px; margin:0;text-align: left; }
.Album ul{ list-style:none; padding:0px; margin:0}
.Album ol{ margin:0px; padding:0 5px;}
.Album ul li{ text-align: center; margin:0 0 10px 0; }
.Album ul li img{  }
.Album ul li:hover img{ box-shadow:0 0 0px rgba(0,51,204,.0)}
.Album ul li p{ margin:0px; padding:10px 0;   }
.right_desc p,.Album ul li ul li,.Album ul li ol li{ line-height:28px; text-align: left;}

#crest { margin:0px 15px 15px 0; float: left; width:25%;}
#crest img{ width:100%; }

.mission_group{ font-size:23px;}

.mission_a{ color:#ff0042}
.mission_b{ color:#ffc000}
.mission_c{ color:#0f887b}
.mission_d{ color:#6827a0}

#Inner_Type_A{ }
#Inner_Type_A .title{  }
#Inner_Type_A ul{ margin:0 0 0 -2%; }

#Inner_Type_A .description ul{ list-style: outside; margin:0px 0 0px 25px; text-align:left  }
#Inner_Type_A .description ul li{  text-align:left  }
#Inner_Type_A ol li{ float: none; width:100%; margin:0 0 5px 2%; }
#Inner_Type_A li{ float:left; width:31%; margin:0 0 15px 2%; }
#Inner_Type_A li img{ max-width:100%; }
#Inner_Type_A li p{ padding:8px 0; }

#Inner_Type_A .description {  }
#Inner_Type_A .description ul { list-style:outside }
#Inner_Type_A .description ul li { float:none; width:100% }

#Inner_Type_A .description ol { }
#Inner_Type_A .description ol li { float:none; width:100% }


#Inner_Type_A li:nth-child(3n+1){ clear:both;}
#Inner_Type_C{background: none;padding: 0px}
#Inner_Type_C .title{ margin-left:0px; }

#Inner_Type_C .title_des{ float: left; width:31%}
#Inner_Type_C .right_desc{ float: right; width:66%; text-align: left; margin-bottom:30px;}
#Inner_Type_C .right_desc p{ margin:0 0 0px 0; padding:0 }
#Inner_Type_C ul{  padding:0;}
#Inner_Type_C li{ float:none; width:100%; margin:0 0 15px 0%; text-align: center; clear:both}
#Inner_Type_C li img{ max-width:100%; height:auto }


#Inner_Type_B {padding:0px; margin:0; }
#Inner_Type_B ul{ margin:15px 0px 0 -2%; padding:0px 0;}
#Inner_Type_B li{ float: left; width:48%; margin:0 0 15px 2%; text-align: left; padding:0}
#Inner_Type_B li img{ max-width:100%; height: auto; text-align: center; margin:0; border:1px solid #fff; box-shadow:0 0 0px rgba(0,0,0,.2)}
#Inner_Type_B li .title_des{ width:100%; float:left; text-align:center }
#Inner_Type_B li .right_desc{ float: right; width:100%;line-height:33px; text-align: left; }
#Inner_Type_B li p{ margin-bottom:10px;}
#Inner_Type_B li:nth-child(2n+1) { clear:both;}
#Inner_Type_H ul{margin:0 0 5px -2%; }
#Inner_Type_B .description {  margin:0; }
#Inner_Type_B .description ul { list-style:outside }
#Inner_Type_B .description ul li { float:none; width:100% }

#Inner_Type_B .description ol { }
#Inner_Type_B .description ol li { float:none; width:100% }

#Inner_Type_H ol li{ float: none; width:100%; margin:0 0 5px -2%; }
#Inner_Type_H li{ float:left; width:31%; margin:0 0 15px 2%; background:#f5f4fb; height:130px; box-shadow:0 0 1px rgba(102,51,153,1) }
#Inner_Type_H li img{ max-width:100%; max-height:130px; box-shadow:0 0 0; border:0;  }
#Inner_Type_H li p{ padding:0px 0; }
#Inner_Type_H li a{  }
#Inner_Type_H .title_des { float: left; width:30%;}
#Inner_Type_H .title_des  img{ max-width:100%;}
#Inner_Type_H .right_desc { float:right; width:67%; font-size:16px; line-height:23px; text-align: left;}
#Inner_Type_H h5{ font-size:16px; text-transform:uppercase; color:#361a67; font-weight:normal; padding:25px 0 8px; 0;}

#Inner_Type_D { background:none}
#Inner_Type_D ul{ margin:0; padding:0px; margin:0}
#Inner_Type_D li{ float:none; margin: 0%; width:100%; text-align: left; clear:both; padding:0}

#Inner_Type_F { background:none}
#Inner_Type_F ul{ margin:0; padding:0; list-style:none;}
#Inner_Type_F li{ float:none; margin:0 0 15px 0%; width: auto; text-align: left; clear:both; padding:0}
#Inner_Type_F li iframe{ height:650px; width:100%; max-width: 100%;}

ul#timeline { list-style: none !important; margin:0; padding:0;}
ul#timeline li{ float:left !important; margin:0 !important; width:50% !important; text-align:center !important; padding:0px 0; clear:none !important}


#Inner_Type_G { background:none}
#Inner_Type_G .download_area{ width: 100%}
#Inner_Type_G  #the-canvas {
  border: 1px solid black;
  direction: ltr;
}
#Inner_Type_G ul{ margin:0; padding:0; list-style:none;}
#Inner_Type_G li{ float:none; margin:0 0 15px 0%; width: auto; text-align: left; clear:both; padding:0}
#Inner_Type_G li iframe{ height:650px; width:100%; max-width: 100%; }




.download_area{  margin:15px 0px;}
.download_area .title{  color:#ff2558 ; border-left:2px solid #ff2558; background:#f9f9f9; padding:5px 100px 5px 20px; margin:30px 0; display:inline-table; font-size:24px; }

.download_area .description{ background:#fff; padding:10px; margin:20px 0; border:1px solid #0076c0; line-height:21px;}
.download_area ul{ list-style:none; margin:0px 0 0 -2%; padding:0px;}
.download_area ul li{ float:left; width:31%; margin:0 0 15px 2%; text-align: left;}
.download_area ul li a{ background:url(../images/icon/icon_download.png) no-repeat ; padding:15px 0 13px 30px; line-height:19px; color:#fff; background-size:23px 23px; background-position: 5px 15px;   display:block;}
.download_area ul li:nth-of-type(2n) a { background:rgba(204,204,204,.1)url(../images/icon/icon_download.png) no-repeat left; background-size:23px 23px; background-position: 5px 15px;   }
.download_area ul li a:hover{ background: rgba(0,0,0,.2)url(../images/icon/icon_download.png) no-repeat left; color:#666;background-size:23px 23px; background-position: 5px 15px;    }
.download_area ul li:nth-child(3n+1){ clear:both;}
.calendar_content{ margin:0px 0 0 0; padding:20px 0; box-shadow: 0 0 3px rgba(0,0,0,.2)}

/* Subject Template */
.subject_category{}
.subject_category ul{ list-style:none; margin:0 0 0 -1.5%; padding:0px;}
.subject_category ul li{ float:left; width: 31%; margin:0 0 30px 2%; padding:0;}
.subject_category ul li img{ box-shadow:0 0 3px rgba(0,0,0,.3); border:1px solid #fff; margin:0;}
.subject_category ul li:hover img{ box-shadow:0 0 3px rgba(0,51,204,.3); border:1px solid #032d69;}
.subject_category p{ color:#032d69;  border-bottom:1px solid #032d69; margin:0px 0 0 0px; padding:0px 5px; text-align: center;}
.subject_category a{ }
.subject_category a:hover p{ border-bottom:1px solid #032d69; background:#032d69; color:#fff; }
.subject_category a:hover{ text-decoration:none}

/* Information Template */
.sub_category{ float: left; }
#notice .sub_category{  }
.sub_category ul{ list-style:none; padding:0px; margin:0px; }
.sub_category ul li{ float:left; margin-right:15px;}
.sub_category ul li a{ padding:10px 21px; display:block; color:#2080d1; background: #fff; font-size:16px; line-height:19px; border:1px solid #2080d1; }
.sub_category ul li a:hover{ background: #fffeef; color:#2080d1; border:1px solid #2080d1;}
.sub_category ul li a.current{ background: #2080d1 ; color:#fff; border:1px solid #032d69 ; }
#pages{ clear: both;font-size: 15px;display: flex;align-items: center;justify-content: center; padding:20px 0 0 0}
.pages_page{ padding:0px 10px 0 0; margin:0}
#pages ul{ float: left; list-style:none; min-height:17px; margin:0px; padding:0px;}
#pages ul li{  float: left; margin:0px 5px 0px 5px;}
#pages ul li a{ line-height:25px; height:25px; width:25px; display: inline-block; text-align: center; background:#fff; color:#333; box-shadow:0 0 3px rgba(0,0,0,.2)}
#pages ul li a:hover{ background:#ececec; text-decoration:underline }
#pages ul li a.pgCurrent{ background:#002b60; color:#fff !important}
.year_box{ position:absolute; right:20px ;}
.year_box select{ padding:5px 5px;}

.information{ margin:15px 0 0 0; min-height:350px;}
.information ul{ list-style:none; margin:0 0 0 -2%; padding:0px;}
.information ul li{ float:left; width: 23%; margin:0 0 30px 2%; padding:0; line-height:23px; }
.information ul li a{ display:block}
.information ul li a:hover{ color:#998560; text-decoration:none}
.information ul li img{ box-shadow:0 0 3px rgba(0,0,0,.3); border:1px solid #fff; margin:0;}
.information ul li:hover img{ box-shadow:0 0 3px rgba(83,27,133,.3); border:1px solid #032d69;}
.information p{ margin:0px 0 0 0px; padding:0px 0px; }
.information .date{ margin:0px 0 0 0px; }
.information .date span{ padding:0px 0 0px 29px; color:#666; font-size:16px; display:block; background:url(../images/web/icon_calendar.png) no-repeat left center; width:140px;  width:100%; line-height:40px }
.information .single{ background:#fff}
.information .double{ }


#info_type_A .information ul li:nth-child(4n+1){ clear:both; }


#info_type_B .information ul{ list-style:none; margin: 0; padding: 0px; }
#info_type_B .information ul li{ position:relative; border-bottom:1px dotted #fff; padding: 10px 0px; float:none; width:100%; line-height:38px; margin:0; }
#info_type_B .information ul li:nth-of-type(even){background: rgba(204,204,204,.1) };

#info_type_B .information ul li span{ float: left; padding:0 0; }
#info_type_B .information ul li a{ display:block; padding:0; color:#333;}
#info_type_B .information ul li:hover { background: #e6f2ff}
#info_type_B .information ul .content{float: right; color:#4a4a4a;  width:73%; }

#info_type_B .information ul li .date{  }
#info_type_B .information ul li .news_title{ font-size:21px; text-transform:uppercase; color:#004ea0; margin-bottom:10px;}
#info_type_B .information ul li .description{  color:#333; }


#info_type_B .information ul li .cover{ float: left; width: 25%; }
#info_type_B .information ul li .cover img{ max-width:100%; box-shadow: 0px 0px 3px rgba(0,0,0,.2) }



/* Information - Full Page Display */
#Information_detail #Inner_Type_A li{ float:left; width:23%; margin:0 0 15px 2%; text-align: center;}
#Information_detail #Inner_Type_A li img{ max-width:100%; box-shadow:0 0 3px rgba(0,0,0,.5); height: auto; max-height:410px;}
#Information_detail #Inner_Type_A li:nth-child(4n+1){ clear:both}

#Information_detail #Inner_Type_A li:nth-child(3n+1){ clear: none}

/* Sub Menu */
.arrowlistmenu{ float:left; width:22%; background: #fff; box-shadow:0 0 3px rgba(0,0,0,.2); position:relative; font-family: 'Noto Sans TC';margin-bottom: 50px; }
.arrowlistmenu .title {padding: 25px 0; background:#032d69  url(../images/icon/bg_category.png) no-repeat; background-size: cover !important; border-bottom:2px solid #fff; margin:0px;  text-align: center; }
.arrowlistmenu .title p { font-size:28px; color:#fff;  padding:15px 0; text-transform:uppercase; line-height:34px; }
.arrowlistmenu .expandable_main{background:#d5f3fe url(../images/icon/arrow_right.png) no-repeat; color:#0059af; background-position:95% 50%; background-size:19px 19px;  }
.arrowlistmenu .openheader { color:#0059af; background:#d5f3fe url(../images/icon/arrow_down.png) no-repeat; background-position:95% 50%; background-size:19px 19px; }
.arrowlistmenu .expandable_sub { margin:0; color:#032d69}
.arrowlistmenu ul{ list-style-type: none; margin: 0; padding: 0px 0px;background: #fff; }
.arrowlistmenu ul li{ padding-bottom: 0px;}
.arrowlistmenu .categoryitems_sub{ }
.arrowlistmenu .categoryitems_sub a{}


.arrowlistmenu .categoryitems_sub li a{ margin:0 0 0 10px; background:#fff url(../images/arrow_pt.png) no-repeat; background-position:20px 15px; color:#666}
.arrowlistmenu .categoryitems_sub li a:hover{ background:#00266e  url(../images/arrow_pt.png) no-repeat; background-position:20px 15px; color:#fff }
.arrowlistmenu .categoryitems_sub li a.current{ background:#00266e  url(../images/arrow_pt.png) no-repeat; background-position:20px 15px; color:#fff }

.arrowlistmenu .menuheader{ margin:0px; padding:5px 10px 5px 10px; font-size:17px; cursor: pointer; display:block; color: #032d69; border-top:1px solid #cdd7e5}

.arrowlistmenu a{  display:block;}
.arrowlistmenu a:hover{color: #fff; background:#053368 }
.arrowlistmenu a.current{ background-color:#053368 ; color:#fff;}

.arrowlistmenu .expandable_main a:hover{color: #00266e ; background: none}

.arrowlistmenu .expandable_sub a{ padding:10px 15px; }
.arrowlistmenu .expandable_sub a.current {  }

.arrowlistmenu .expandable_main a.current { background: none; color:#00266e  }

.arrowlistmenu ul li a{ color: #333; background:#fff url(../images/arrow_blue.png) no-repeat; background-position:20px 15px;  font-size:0.8em; display: block; padding: 6px 15px 6px 35px; border-bottom: 1px dotted #eeeeee}
.arrowlistmenu ul li a:hover{ background:#00266e  url(../images/arrow_white.png) no-repeat; background-position:20px 15px;  color:#fff}
.arrowlistmenu ul li a.current{ background:#66d3fa url(../images/arrow_white.png) no-repeat; background-position:20px 15px;  color:#fff}


/* Notice */
#notice{ font-size:15px;}
#notice .information ul{  margin:0 0 0 0%; border-top:2px solid #ddd}
#notice .information ul li{ float:none; width: 100%; margin:0; padding:10px 0px 10px 0; line-height:17px; border-bottom:1px solid #ddd;  }
#notice .information ul li a{ display:inline-block; padding:0px 0; width:100%; }
#notice .information ul li a:hover{ color:#333; text-decoration:none}
#notice .information ul li:hover{ background:#eff9ff; }
#notice .information .date{ float:left; width:15%; padding:5px 5px 5px 10px;}
#notice .information .date span{ padding:0 0 0 25px}
#notice .information .number{ float:left; width:10%; padding:5px 0; font-size:16px; }
#notice .information .title{ float:left; width:60%; padding:5px 0; font-size:16px; line-height:19px; text-shadow:0 0 0 }
#notice .information p{ width: auto; font-size:15px;}
#notice .information .download{ float:right; width:8%; overflow: hidden }
#notice .information .download a{ background: url(../images/icon/icon_pdf.png) no-repeat; background-position:0px 0px; background-size:20px; padding:5px 5px 5px 30px; display:block; color:#fc2130;font-size:16px; line-height:19px; display:block}

#notice .box_day{ float: left; width:150px; position:relative;  height:30px; margin:0}
#notice .box_day{  }
#notice .box_day .day_text{ position:absolute; left:0px; top:0px; font-size:17px; color:#053368; padding:5px 0 }
#notice .box_day .date_month{ position:absolute; right:0px; top:22px; font-size:11px; color:#053368}



/* media */
#Media_Album .information ul{  margin:0 0 0 -2%; }
#Media_Album .information .clip{ display:none;}
#Media_Album .information ul li{ float:none; border-top:2px solid #032d69; width:18%; margin:0 0 20px 2%; padding:0; line-height:17px; float:left; position:relative; }
#Media_Album .information ul li .cover{ background:#f4f4f4; box-shadow:0 0 3px rgba(0,0,0,.2); border-radius:2px; padding:10px 15px 5px 15px; }
#Media_Album .information ul li img{ width:100%; box-shadow:0 0 0;}
#Media_Album .information .date{ position: relative; text-align: center; padding:8px 0 0 0}
#Media_Album .information .date span{ padding:5px 5px 5px 25px; color:#333; font-size:12px; display: inline; background:url(../images/icon/icon_date.png) no-repeat; background-size:15px 15px; background-position:5px 5px;}
#Media_Album .information p{ float: none; text-align: center; padding:10px 0 5px 0; font-size:15px;}
#Media_Album .information ul li:hover .cover{ background:#f0f4f4; box-shadow:0 0 3px rgba(0,0,0,.3); }
#Media_Album .information ul li:hover img{ opacity:.7}

#Media_Video .information ul{  margin:0 0 0 -2%; }
#Media_Video .information .clip{ background:url(../images/icon/icon_video.png) no-repeat; width:53px; height:53px; position:absolute; left:-5px; top:-5px; z-index:0 }
#Media_Video .information ul li{ float:none; width:23%; margin:0 0 20px 2%; padding:0;  float:left; position:relative; }
#Media_Video .information ul li .cover{ background:#f4f4f4; box-shadow:0 0 3px rgba(0,0,0,.2); border-radius:2px; padding:10px 15px 5px 15px; }
#Media_Video .information ul li img{ width:100%; box-shadow:0 0 0;}
#Media_Video .information .date{ position: relative; text-align: center; padding:8px 0 0 0}
#Media_Video .information .date span{ padding:5px 5px 5px 25px; color:#333;   display: inline; background:url(../images/web/icon_calendar.png) no-repeat left center; }
#Media_Video .information p{ float: none; text-align: center; padding:10px 0 5px 0; font-size:19px;}
#Media_Video .information ul li:hover .cover{ box-shadow:0 0 3px rgba(0,0,0,.3); }
#Media_Video .information ul li:hover img{ opacity:.7 ; }
#Media_Video .information ul li a{ color:#333}
#Media_Video .information ul li:nth-child(4n+1){ clear:both;}
.youtube_video{ width:70%; box-shadow:0 5px 10px rgba(0,0,0,.5); background:#000; padding:10px; border:1px solid #fff; margin-top:30px;}
.youtube_video iframe{ width:100%; height:520px;}
.youtube_video video{ width:100%; height:520px;}
.video_footer{ background:url(../images/icon/tv_footer.png) no-repeat center; height:38px; width:70%; margin-bottom:50px;}

/* Site Map */
.site-map { margin:0; padding:0;}
.site-map ul{ list-style:none; margin:0 0 0 -3%; padding:0;}
.site-map ul li{ float: left; width: 22%; margin:0 0 15px 3%; padding:0; list-style:none;}
.site-map ul li:nth-child(4n+1){ clear: both; }
.site-map ul li ul{ list-style:none; margin:0 0 0 0px; padding:0;}
.site-map ul li ul li{ float: none; width: 100%; margin:0; }
.site-map ul li ul li ul{ list-style:none; margin:0 0 0 15px; padding:0;}

.site-map ul li a{ color:#085cba; padding:5px 0px; display:block; border-bottom:1px solid #ddd;}
.site-map ul li a:hover{ text-decoration:none;}
.site-map ul li ul li a{ border-bottom:0px solid #ddd; color:#333}

.site-map ul li ul li ul li a{ font-size:16px; border-bottom:0px solid #ddd; color:#555; background:url(../images/icon/arrow_right.png) no-repeat; background-size:15px 15px; background-position:0px 50%; padding:5px 0px 5px 20px ; display:block}
ul.site-map-menu li ul li ul li a:hover{ background:url(../images/icon/arrow_right.png) no-repeat; background-size:15px 15px; background-position:0px 50%; }
.site-map ul li ul li ul li ul li a{ font-size:16px; border-bottom:0px solid #ddd; color:#555; background:url(../images/icon/poting_right.png) no-repeat; background-size:7px 7px; background-position:5px 50%; padding:5px 0px 5px 20px ; display:block}
ul.site-map-menu li ul li ul li ul li a:hover{ background:url(../images/icon/poting_right.png) no-repeat; background-size:7px 7px; background-position:0px 50%; }



/* Other */
#principal{ text-align: left}
#principal p{ text-align: left; line-height:28px;}

.contactus{}
.contactus .info{ float: left; width:49%; }
.contactus .info td{ padding-right:10px;}
.contactus .location{ float:right; width:49%;}
.contactus .location iframe{ height:380px; width:100%; border:1px solid #ddd; box-shadow:0 0 3px rgba(0,0,0,.2)}

.btn_back{ margin:0px auto; text-align: center; margin-top:50px; margin-bottom:50px;}
.btn_back a{ background:#989898; color:#fff !important; padding:10px 35px; text-transform:uppercase; text-align: center;}
.btn_back a:hover{ background:#032d69; color:#fff !important }

.site-map ul li {
    width: 48%;
    margin: 0 0 15px 2%;
}

.calendar { float:left; width:22%; margin:0; background:#fff;}

.caption_left{ position:absolute; bottom:15%;  width:40%; left:5%;color:#fff; font-size:58px; line-height:64px; text-shadow:0 0 5px rgba(0,0,0,.7); }
.caption_left #banenr_b{ background:rgba(0,0,0,.5); padding:15px;}
#banenr_a{ padding-bottom:120px;}
.purple_title{ background:#2a1b5a; color:#fff;}

.white_font{ color:#fff}

.subject{ width:90%;}
.subject ul{ margin:0; padding:0;}
.subject ul li{ width:45%; margin:0 2% 20px 0; list-style:none; float: left}
.subject ul li a{ border:2px solid #00266e; padding:5px; text-align: center; color:#00266e; display:block;}
.subject ul li a:hover{ background:#00266e ; color:#fff; }

.history_area{ width:85%; padding-top:25px}
.history_area ul{ list-style:none; margin:0; padding:0 }
.history_area ul li{ margin:0; padding:0;}
.history_area .year_area{ background:#00266e; padding:5px 0; width:25%; color:#fff; float: left; text-align: center;}
.history_area .history_area{ float: right; border-left:1px dotted #ddd; width:74.8%; padding:15px 0 30px 0;}
.content_history{ background:#f8f8f8; padding:10px;}

.hk_class{ margin:0px 0 30px 0}
.hk_class ul{ padding:0px; list-style:none; float:none; clear: both}
.hk_class ul li{ float: left;  margin:0 10px 10px 0px; }
.hk_class ul li a{ padding:30px; display:block; background:#ddd; display:block; font-size:1.5em; border:1px solid #ccc; color: #333 }
.hk_class ul li a:hover{background:#ff457e; color:#FFF }


.main_content .dropdown span {cursor: pointer;border-bottom:1px solid #039;color:#004b87; font-size:16px; border:1px solid #ddd; padding:5px 30px 5px 5px; background:url(../images/icon/down.gif) no-repeat #fff; background-position:90% 50%;  }
.main_content .dropdown { float:right; margin: 30px 0; }



.wrap  .dropdown-content {
  display: none;
  position: absolute; right:0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
  padding: 0;
  z-index: 1;
}
.wrap .dropdown:hover .dropdown-content {  display: block;}
.wrap .dropdown-content ul { list-style: none; padding:5px; margin:0; display: flex;
  flex-direction: column-reverse;}
.wrap .dropdown-content ul li {  float: right;  width:100%;}
.wrap .dropdown-content ul li a{ display:block; padding:5px ; text-align: center; border-bottom:1px dotted #ddd; color:#333 }
.wrap .dropdown-content ul li a:hover { background:#004b87; color:#fff; }

#table_t{ border-collapse:inherit}
#table_t{ border:0px solid #053368; padding:3px;}
#table_t tr:nth-child(1){ background:#0f5298; color:#fff;}
#table_t tr:nth-child(even) td{ background:#e1f7ff}

#table_des{ border-collapse:inherit;background: #fff; color:#012b63}
#table_des{ border:2px solid #053368; padding:2px;width: 100%;} 
#table_des tr:nth-child(1){ background:#053368; color:#fff;} 
#table_des tr:nth-child(even) td{ background:#f5f5f5} 

#table_a{ border-collapse:inherit; width:100%}
#table_a{ border:2px solid #053368; padding:2px;}
#table_a tr:nth-child(even) td{ background:#e1f7ff}

#table_subject {border-collapse:inherit; width:100%}
#table_subject img { width:20px; height:20px;}
tr#title_table td{ background:#0078c0; color:#fff; }

#table_stafflist{ border-collapse:inherit; width:100%; }
#table_stafflist{ border:1px solid #053368; padding:5px;}
#table_stafflist tr:nth-child(even) td{ background:#f7f8f8}
#table_stafflist tr td{ width:50% !important}


.slogan{  position:absolute; left:2%; top:70%; background: rgb(0,89,170);
background: linear-gradient(90deg, rgba(0,89,170,0) 0%, rgba(1,153,216,1) 100%); padding:20px 30px; }
.slogan I { font-size:36px; text-transform: uppercase; line-height:42px; text-transform: uppercase; color:#fff; text-shadow: 0 0 3px rgba(0,0,0,.7)   }

#slogan_left { position:absolute; left:5%; color:#fff; font-size:60px; line-height:68px; text-shadow: 0 0 3px rgba(0,0,0,.2); bottom:100px;  }
#slogan_right { position:absolute; right:5%; color:#fff; font-size:60px; line-height:68px; text-shadow: 0 0 3px rgba(0,0,0,.2); bottom:100px;  }



.hover01 figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity:1;
}
.hover01 figure:hover img {
	-webkit-transform: scale(1.2);
	transform: scale(1.3);
	opacity:.8;
}
figure {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
	box-shadow: 0px 0px 3px rgba(4, 4, 4, 0.34);
}
figure:hover+span {
	bottom: -36px;
	opacity: 1;
}
.hover02 figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity:.3;
}
.hover02 figure:hover img {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	opacity:.7;
}



.feature  { float: left;width: 100%; background:url(../images/web/feature_title_bg.png) no-repeat #fff; padding-bottom:10px }
.feature .title { float: left;width: 100%; font-size:30px;text-align:center ; padding:25px 0 ; color:#fff }
.feature ul { list-style:none; padding:0; margin:0}
.feature ul li {  float: left; margin: 0; width: 50%; position:relative; display:grid; margin-top:20px; }

.feature ul li+li+li { margin:0}

.feature ul li p {color: #fff;float: left;position: relative;    padding: 60% 0px 0 10%;  font-weight: bold; font-size:30px; line-height:44px}
.feature ul li+li p {padding: 22% 0px 0 10%;}
.feature ul li+li+li p {float: right;padding: 22% 10% 0 0px;}
.feature ul li+li+li+li p {float: right;padding:  60% 10% 0 0px;}

.feature ul li img{ max-width: 100%;   }



.feature ul li img {	-webkit-transform: scale(1);	transform: scale(1);	-webkit-transition: .3s ease-in-out;	transition: .3s ease-in-out;	opacity:1;}
.feature ul li:hover img {	-webkit-transform: scale(1.2);	transform: scale(1.2);	opacity:1;}
.feature  ul li{	overflow: hidden;}
.feature:hover+span {	bottom: -36px;	opacity: 1;}

.feature ul li span{ background: #ec030363;position: absolute;top: 0;right: 0;width: 23.3%;bottom: 0;}
.feature ul li+li span{ background: #ffc0017d;width: 63.3%;}
.feature ul li+li+li span{ background: #002b607d;width: 63.3%; left:0}
.feature ul li+li+li+li span{ background: #46af0082;width: 23.3%;right: 0;}




.story { width:100%}

.story .title{float: left;width: 100%;font-size: 30px;text-align: center;padding: 26px 0; background:url(../images/web/story_title_bg.png) no-repeat #053368; color:#fff}


.box-wrap{   width:100%}
.box  { width:100%; margin:0; padding:0}
.box ul { width:100%; margin:0; padding:0}
.box ul li{  padding:0px;  margin:1%;  background:white;  width: calc(14.2% - 2%);  border:1px solid #d6d6d6;  box-shadow:0 2px 3px 0px rgba(0,0,0,0.25);  border-radius:3px;  transition:.2s all; list-style:none; float:left  }
.box ul li img{ max-width:100%}
.box ul li:hover {  filter:blur(3px);  opacity:.5;  transform: scale(.98);  box-shadow:none;}
.box ul li:hover {  transform:scale(1);  filter:blur(0px);  opacity:1;  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);}
/*story*/

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap');




.story_area {}
.story_area .title { font-size:30px;text-align:center ; padding:25px 0 ; color:#fff ; background:url(../images/web/feature_title_bg.png) no-repeat #fff;}
.story_area_bg { padding:50px 0; background: url(../images/web/story_bg.png) no-repeat #fff; }


.story_area div:nth-child(1n+3) .lightblue {background: #2bcaff; border:1px solid #2bcaff;}
.story_area div:nth-child(2n+3) .lightblue {background: #a4ada8; border:1px solid #d9e4de ; }
.story_area div:nth-child(3n+3) .lightblue {background: #3794fd; border:1px solid #3794fd ; }

.story_area_bg  span { font-size:16px; padding:35px 10px; line-height:21px; text-align: center; display:block;  }

.story_area a { color:#fff;}

#lightblue {background: #2bcaff; border:1px solid #2bcaff  }
#gray {background: #d9e4de;border:1px solid #d9e4de; color:#333  }
#blue {background: #3794fd; border:1px solid #3794fd  }

.multi-button ul{ list-style:none; margin:0; padding: 110px 0 10px 0;}
.multi-button ul li{   float:left; width:calc(11.1% - 1%); margin:0 0.5%; text-align:center;  }

.button { 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.09), 0 6px 15px 0 rgba(0, 0, 0, 0.09);
  padding: 0;
    font: 15px Ubuntu;
  color: white;

}

.button img { width: 100%;max-width: 100%;max-height: 100%;} 

.button span {  cursor: pointer;  display: inline-block;  position: relative;  transition: 0.5s;  width:100%; font-weight:bold; padding:30px 0}

.button span:after {  position: absolute;  opacity: 0;  bottom: 0px;right: 0px;  transition: 0.5s;}

.button:hover span {  padding-bottom: 45px;}

.button:hover span:after {  opacity: 1;right: 0;}

#lightblue span:after {	border-top: 2px solid #fff;  content: "了解更多";  width:60%; margin:0 20%; line-height:30px; padding:0 ; font-weight: bold}
#lightblue a,a:hover { color:#fff}


#gray span:after {	border-top: 1px solid #333;  content: "了解更多";  width:60%; margin:0 20%; line-height:30px; padding:0 ; font-weight: bold}
#gray  a,a:hover { color:#333}

#blue span:after { 	border-top: 1px solid #fff;  content: "了解更多";  width:60%;  margin:0 20%; line-height:30px; padding:0 ; font-weight: bold}
#blue a,a:hover { color:#fff}

/*school_videos*/
.school_videos { position:relative; width:100%; background:url(../images/web/video.png) no-repeat center top ; margin:0px 0 0px 0; padding:30px 0; background-size: cover}

.school_videos .title {font-size: 30px;color: #fff;text-transform: uppercase;padding: 50px 0 18px 0;text-align: center; border-bottom:5px solid #9a8661; width:12%}




.school_videos  .cover figure{ border: 3px solid #fff0;box-shadow: 0 0 0 4px #ffffff26; background:none}
.school_videos  .content { font-size: 30px;color: #fff;text-align: center;padding: 10px 0;} 
.school_videos  .content a, .school_videos  .content a:hover { color:#fff}








/*facility*/
.facility_more {  width:100%; padding:0; margin:0}
.facility_more a { background:#053368; display:block; text-align:right; padding:10px 0}
.facility_more span {background: url(../images/web/more.png) no-repeat;padding: 0px 0px 0 30px;color: #fff; background-position: 0 7px;}
.facility {  width:100%; position:relative; margin:0;background: #fff;box-shadow:0px 0px 3px rgba(0,0,0,.2);}
.facility .title{ float: left;width: 100%;font-size: 30px;text-align: center;padding: 30px 0;background:url(../images/web/facility_title_bg.png) no-repeat;color: #fff;}




.facility .facility_box1 {float:left;width:22.7%}
.facility .facility_box1 ul { list-style:none; margin:0; padding:0}
.facility .facility_box1 ul li{ width:50%; float:left; display: grid;}
.facility .facility_box1 ul li+li+li{ width:100%; float:left; display: grid;}
.facility .facility_box1 ul li a img{width: 100%;    max-width: 100%;    max-height: 100%;}

.facility .facility_box2 {float:left; width:17%}
.facility .facility_box2 ul { list-style:none; margin:0; padding:0}
.facility .facility_box2 ul li{ width:100%; float:left; display:grid}
.facility .facility_box2 ul li a img{width: 100%;    max-width: 100%;    max-height: 100%;}

.facility .facility_box3 { float:left;width:22.5%}
.facility .facility_box3 ul { list-style:none; margin:0; padding:0}
.facility .facility_box3 ul li{float:left; width:100%;display:grid}
.facility .facility_box3 ul li+li{float:left; width:50%;display:grid}
.facility .facility_box3 ul li+li+li+li{float:left; width:100%}
.facility .facility_box3 ul li a img{width: 100%;    max-width: 100%;    max-height: 100%;}

.facility .facility_box4 {float:left;width:37.8%}
.facility .facility_box4 ul { list-style:none; margin:0; padding:0}
.facility .facility_box4 ul li{ float:left; width:100%;display:grid}
.facility .facility_box4 ul li+li{ float:left; width:33.3%;display:grid}
.facility .facility_box4 ul li+li+li+li+li{ float:left; width:66.6%}
.facility .facility_box4 ul li+li+li+li+li+li{ float:left; width:33.3%}
.facility .facility_box4 ul li a img{width: 100%;    max-width: 100%;    max-height: 100%;}

.facility .facility_box1_m { display:none}
.top_right_m { display:none}






.newsletter{ position:relative; padding:20px 2% 20px 2%;}
.newsletter ul{ list-style:none; margin:0 0 0 -2%; padding:0; width:100%; }
.newsletter ul li{float:left; width:calc(33% - 4%); padding:0; margin:0 0 55px 4%; font-size:15px; transition: all 0.3s ease-in-out;opacity: 1;box-shadow: 0 0 3px rgba(0,0,0,.2);}
.newsletter ul li img { max-width:100%;}
.newsletter ul li a { display:block; background: #f2efeb; position:relative}
.newsletter ul li span{background: #9a8661;padding: 0px 20px;color: #fff;position: absolute;bottom: 0; right:0}
.newsletter ul li:nth-child(3n+1) { clear:both} 




.slogan_area{ }
.Banner_slogan{  z-index:1; position:absolute; width:100%; text-align:center; bottom:14%}
.Banner_slogan span{ font-size:100px; line-height:48px; text-shadow: 0 0 5px rgba(18, 18, 18, 0.95); color:#fff; font-family: 'Spectral', serif;letter-spacing: 1px;    }



/*story_album2*/
.story_album2{ float: left; width:100%;   position:relative;  background: url(../images/web/story_bg.png) no-repeat #fff;
  border: 1px solid white;
  padding: 7px;
    place-items: center;
	background-size: cover }
.story_album2 .area{   }
.story_album2 .title{float: left;width: 100%;font-size: 30px;text-align: center;padding: 26px 0; background:url(../images/web/story_title_bg.png) no-repeat #053368; color:#fff}
.story_album2 ul{ list-style:none; margin: 0; padding: 0px; overflow-y: auto; max-height:550px;}
.story_album2 ul li{ position:relative; padding: 10px 0px;}
.story_album2 ul li:nth-of-type(even){background: rgba(204,204,204,.1) };
.story_album2 ul li span{ float: left; padding:0 0; }
.story_album2 ul li a{ display:block; padding:0; color:#333;}
.story_album2 ul li:hover { background: #e6f2ff}
.story_album2 .content{float: left; color:#4a4a4a;  width:100%; }

.story_album2  .cover{ width: 100%; }
.story_album2  .cover img{ max-width:100%; box-shadow: 0px 0px 3px rgba(0,0,0,.2) }
.story_album2  .content_title { color:#053368; font-size: 20px;}





.story_album2 .multi-button { background:none; border:none; text-align:center}



.story_album2  .multi-button ul{ list-style:none; margin:0; padding: 110px 0 10px 0;}
.story_album2  .multi-button ul li{   float:left; width:calc(11.1% - 1%); margin:0 0.5%; text-align:center;  }



.story_album2  .button   { background:#2bcaff; color:#fff; border:none}


.story_album2  .button img { width: 100%;max-width: 100%;max-height: 100%;} 

.story_album2  .button span {  cursor: pointer;  display: inline-block;  position: relative;  transition: 0.5s;  width:100%; font-weight:bold; padding:40px 0}

.story_album2  .button a span:after {  position: absolute;  opacity: 0;  bottom: 0px;right: 0px;  transition: 0.5s;border-top: 2px solid #fff;  content: "了解更多";  width:60%; margin:0 20%; line-height:30px; padding:0 ; font-weight: bold}

.story_album2 .button:hover  span {  padding-bottom: 45px;}

.story_album2 .button:hover span:after {  opacity: 1;right: 0;}

.story_album2 .multi-button .lightblue {background: #2bcaff; border:1px solid #2bcaff;}
.story_album2 .multi-button:nth-child(2n) .lightblue {background: #d9e4de; border:1px solid #d9e4de ; }
.story_album2 .multi-button:nth-child(3n+1) .lightblue {background: #3794fd; border:1px solid #3794fd ; }

.story_album2 .multi-button .lightblue a,a:hover{color:#fff }
.story_album2 .multi-button:nth-child(2n) .lightblue a,a:hover{color:#333 }

/*story_album2*/

.image-cover-modal { display:none !important}
.slider_show { width:2560px; height:890px}




#grid {  display: grid;   grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px;}

#grid ul li{ }
	

	


#grid  ul li:nth-child(4n+1) { clear:none !important}
#grid  .content { display:none}
#popup_this h2 { color:#fff; background:rgba(0,43,96,.93); font-size:21px; line-height:26px; margin:0 0 10px 0; padding:10px 0;}
#popup_this {
    text-align:center; 
    margin-top: 0px;
    margin-left: 0px;
    width:80%;
    background:#fff; color:#333;
	max-width:960px; 
}
#popup_this .content { min-width:800px; min-height:450px; max-height:650px; overflow-y: auto; padding:0px ; margin:15px; border:0px solid #fff; }
#popup_this  .button span { padding:0;}
#popup_this  .button:hover span { padding:0;}
.b-close {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    color: #333;
    background: #D3D3D3; line-height:23px;
    padding: 5px 12px;
}
.b-close:hover { 
    background: #fbcb09;
}

@media screen and (max-width: 1024px) {
	#popup_this .content { min-width: auto; }
}
@media screen and (max-width: 800px) {
#popup_this {  width:90%;   }
#popup_this .content  {
min-width:300px;
min-height:240px;
max-height:420px; padding:30px 5px ; 
	}
}

.achievements{
display: flex;
justify-content: center;
align-items: center ; padding:0px; width:100%;
position:relative; font-size:19px; line-height:33px;
background:#39ace7;
}
.achievements h5{ font-size:28px; line-height:32px;  margin:5px 0; padding:0; }
.achievements h6{ font-size:21px; line-height:28px;  margin:5px 0; padding:0; }

.achievements img{ width:100% } 

#R_photo_L_des {background:#cadeef;}
#R_photo_L_des .photos{ float:right; width:50%; order: 2;}
#R_photo_L_des .award_description{ float:left; width:45%; padding:2.5%;}
#R_photo_L_des h5, #R_photo_L_des h6 { color:#333}


#L_photo_R_des {background:#cadeef;}
#L_photo_R_des .photos{ float:left; width:50%;}
#L_photo_R_des .award_description{ float:right; width:45%; padding:2.5%;}
#L_photo_R_des h5, #L_photo_R_des h6 { color:#333}





#Center_des  {background:url(../images/awards/bg_awards.jpg) no-repeat center center ; background-size: cover; color:#fff;}
#Center_des .award_description{  padding:150px 2.5%; text-align:center;}
#Center_des .photos{ float:left; width:100%;}

#small_A, #small_B, #small_C, #small_D, #small_E, #small_F, #small_G, #small_H { display:grid; float: left; width:25%; text-align:center; color:#fff; padding:15px 0; overflow:hidden;  }
#small_A .award_description, #small_B .award_description, #small_C .award_description, #small_D .award_description,
#small_E .award_description, #small_F .award_description, #small_G .award_description, #small_H .award_description { padding:0 5%; width:90%; height:185px; overflow-y: auto; margin-top:15px; }


#small_A span, #small_B span, #small_C span, #small_D span, #small_E span, #small_F span, #small_G span, #small_H span { width:100%; height:124px; }

#small_A { background:#fb8500;}
#small_A span{ background:url(../images/awards/icon_a.png) no-repeat center center ;}


#small_B{ background:#ffb703;  }
#small_B span{ background:url(../images/awards/icon_b.png) no-repeat center center ;}



#small_C{ background:#023047;  }
#small_C span{ background:url(../images/awards/icon_c.png) no-repeat center center ;}



#small_D{ background:#219ebc;  }
#small_D span{ background:url(../images/awards/icon_d.png) no-repeat center center ;}



#small_E{ background:#0784b5;  }
#small_E span{ background:url(../images/awards/icon_e.png) no-repeat center center ;}


#small_F{ background:#39ace7;  }
#small_F span{ background:url(../images/awards/icon_f.png) no-repeat center center ;}


#small_G{ background:#8ecae6;  }
#small_G span{ background:url(../images/awards/icon_g.png) no-repeat center center ;}


#small_H{ background:#36aea7;  }
#small_H span{ background:url(../images/awards/icon_h.png) no-repeat center center ;}


@media screen and (max-width:960px) {
.achievements{font-size:15px; line-height:19px;}
.achievements h5{ font-size:23px; line-height:28px;  margin:5px 0; padding:0; }
.achievements h6{ font-size:17px; line-height:21px;  margin:5px 0; padding:0; }
#Center_des .award_description{  padding:70px 2.5%; text-align:center;}

#small_A, #small_B, #small_C, #small_D, #small_E, #small_F, #small_G, #small_H { width:50%; text-align:center; color:#fff; padding:20px 0;  }
#small_A .award_description, #small_B .award_description, #small_C .award_description, #small_D .award_description,
#small_E .award_description, #small_F .award_description, #small_G .award_description, #small_H .award_description { padding:0 20px; }
}