@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Serif+Display&family=Noto+Serif+TC&display=swap');

html,body {
    padding: 0px; margin: 0px;
	min-height:100%; 
	font-size:19px; color: #333; line-height:33px; 	
	font-family: 'Noto Sans', "微軟正黑體", "Microsoft JhengHei" , sans-serif  ;	
	background:#eee9e4;
}

.wrap{ width:100%; min-height:100%; background: #fff; max-width:1920px; box-shadow: 0 0 6px rgba(0,0,0,.3); position:relative; min-width:375px; }
.screen{  position:relative; padding:0 20px;  }

a {color:#014183; text-decoration:none;-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;}
a:hover { color:#0868c5; }
.clear{clear:both}
.new_box {-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;}

.container img{ max-width:100%;} 
.container{ height: auto; min-height:500px; }
.container a {transition: all 0.3s ease 0s; }
.container a:hover {color: #ffa800 ; text-decoration: underline; }
.container a:link, .container a:visited {color: #00266e; text-decoration: none;}

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

h1{ font-size:38px; line-height:42px; color:#013d85; }
h2{ font-size:32px; line-height:38px; color:#013d85; }

h3{ font-size:28px;  line-height:32px; color:#013d85; margin:10px 0; }
h4{ font-size:24px;  line-height:28px; color:#13aeff; margin:10px 0; }
h4 a{ background: url(../images/icon/icon_file.png) no-repeat left center; font-size:18px; padding:15px 5px 15px 25px; margin:50px 0; display:block; background-size:20px 25px; opacity:.5; color:#555;  }
h4 a:hover{ color:#0868c5 !important; } 

h5{ font-size:22px; line-height:28px; color:#013d85; border-left:3px solid #001f47; padding:0 15px }
h6{ font-size:22px; line-height:28px; color:#13aeff; border-left:3px solid #13aeff; padding:0 15px }


p{ margin:0px; padding:0px}

#block-search-form { float:right; }
#edit-advanced { display:none; }
#search-block-form h2, #search-block-form label{ display:none;}

.top_search #search-block-form { opacity:0; width:0; height:0;  overflow:hidden;  border-radius:0; padding:5px 50px 5px 5px; background:#0865c1; position:relative;float:right; 
   -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;  }

.top_search:hover #search-block-form {  width:200px; height: auto; opacity:1; display: block; transition: .5s; }

.top_search .form-text { background:#fff; padding:5px; font-size:16px; line-height:21px; border:0px; width:190px; }
#search-block-form input[type=submit] {
  height:38px;
  width:38px;
  position: absolute;
  top:22px;
  right:5px;
  transform: translateY(-50%);
  line-height:38px;
  text-align:center;
  border-radius:50%;
  font-size:0px; border:0px; color:#fff;
  cursor:pointer; background: url(../images/web/magnifying-glass-solid.svg) #fff no-repeat center center; background-size: 20px 20px ;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55 );
  z-index:2; box-shadow: 0 0 3px rgba(0,0,0,.2);
}
#search-block-form input[type=submit]:hover {}

.fa-search::before {
    content: "\f002"; color:#27548d; font-weight: bold;
	font-style:normal; font-family: FontAwesome; width: 38px;
    height: 38px;
    border-style: none;
    font-size: 20px;
    outline: none;
    cursor: pointer;
    border-radius: 50%;
    pointer-events: painted;
	float:right; background:#fff; box-shadow: 0 0 3px rgba(0,0,0,.2);
	margin:0px ; line-height:38px;  display:block; margin:2px 5px 0 0;
}
.top_search{float:right; position:relative; width:38px; height:38px; margin-top:10px;    }
.top_search .btn-search {position: absolute;  right:0px; top:0;　}
.top_search i {z-index:1; text-align:center; }
.top_search:hover i {
	opacity: 0;
	z-index: -1;
}
.container-inline div, .container-inline label {}


.top_lang{ margin:15px 10px 0 10px }
.top_lang a{ border:2px solid #003986; color:#333; padding: 5px 15px; border-radius:8px; background:#fff; font-size:15px; line-height:19px; display:block }
.top_lang a:hover{ color:#fff; background:#096ac7; }

.arean { padding:50px 15px 90px 15px; clear:both; position:relative; }
.arean_title { font-size:40px; line-height:48px; color:#0761b8;font-family: 'Noto Serif Display', serif;  }
.arean_more { position:absolute; right:0px; top:50px;}
.arean_more a {display: block; padding:5px 50px;  background: linear-gradient(to left, #fff 50%, #eee9e4 50%); background-size: 200% 100%; background-position: right bottom;  transition: all .5s ease-out;  }
.arean_more a:hover { background-position: left bottom;}
.date span{ background:url(../images/web/icon_calendar_b.png) no-repeat ; background-position:0 50% ; padding:5px 0 5px 40px; display:block; color:#333; background-size:30px 27px !important;}
.inner_content #full .date{ margin-bottom:15px;}
/* Header */
.header { position:absolute; z-index:1; max-width:1920px; width:100%; background:url(../images/web/bg_header.png) repeat-x ; background-position:0 100%; min-height:200px;  }
.header .logo_area { float: left; padding:19px 0px 0px 5px; text-align: left; }
.header .logo_area a { display:block;}
.header .logo_img { float: left; }
.logo img{  max-width:100%;  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;  }


@media only screen and (max-width : 1780px) {
.logo img{ height:70px; }
}
@media only screen and (max-width : 1650px) {
.logo img{ height:62px; }
}
@media only screen and (max-width : 1450px) {
.logo img{ height:57px; }
}
@media only screen and (max-width : 1170px) {
.logo img{ height:47px; max-width:100%; }
}

.header .logo_img img{ width:100%; max-height:80px;  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:10px 0 0 10px; float: left; color:#014183; -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:28px; letter-spacing:3px; line-height:33px; font-family: 'Noto Serif TC', serif;}
.logo_en { font-size:16px; line-height:34px; letter-spacing:-0.25px; font-weight:normal; font-family: 'Noto Serif Display', serif; }

.slider {
        width: 90%;
        margin: 80px 5% 30px 5% ;
    }

.top_right{ float:right; margin-right:0px; }
.top_links{  float: right; }
.top_links ul{ list-style: none; margin:5px 0; padding:0; }
.top_links ul li{ float: left; }
.top_links ul li a{ font-size:20px; padding:10px 15px 5px 15px; display:block; }

.top_lang{ float: right;}
.top_lang a{}
.top_lang a:hover{}
 
.mobile_only  { display:none !important; }

.top_search{ float: right;}

nav{ float:right;}


.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:#fff; box-shadow:  0 0 3px rgba(0,0,0,.2) ;  min-height: auto;  } 

#banner { overflow: hidden; }


/* Header */

/* Latest News */
.latest_new{ background: rgb(0,63,129); background: linear-gradient(0deg, rgba(0,63,129,1) 0%, rgba(8,105,198,1) 100%);  }
.latest_new .title { color:#fff;  }
.latest_new .new_box{ background:#fff; box-shadow: 0 0 3px rgba(0,0,0,.2); min-height:160px; }
.latest_new .new_box:hover{ background: rgba(255,255,255,0.8); box-shadow: 0 0 3px rgba(0,0,0,.4); }
.latest_new .new_box a{ padding:10px; min-height:120px; display:block }
.latest_new ul{ list-style:none; margin: 0; padding: 0px; }
.latest_new ul li{ position:relative; }
.latest_new ul li:nth-of-type(even){}
.latest_new .content{ color:#014184; }
.latest_new .new_box .cover { float: left; width:33%; margin:0 10px 10px 0;}
.latest_new .date span{ background:url(../images/web/icon_calendar.png) no-repeat ;  color:#0865c0; background-position: 0 50%}
.latest_new .date span+span { display:none;}
/* Latest News */

/* Latest gallery */
.latest_gallery{ background:#eee9e4;}
.latest_gallery .title {   }
.latest_gallery ul{ list-style:none; margin: 0; padding: 50px 0 20px 0; }
.latest_gallery ul li{ position:relative; background:#fff; box-shadow: 0 0 3px rgba(0,0,0,.2); float: left; width: calc(25% - 4px); margin:0 2px; }
.latest_gallery ul li .content{ padding:10px 15px; display:block; min-height:110px; }
.latest_gallery .arean_more a { background: linear-gradient(to left, #014387 50%, #666666 50%); color:#fff; background-size: 200% 100%; background-position: right bottom;  }
.latest_gallery .arean_more a:hover { background-position: left bottom;}
/* Latest gallery */

/* Latest awards */
.latest_awards{ background:#013d85; float: right; width:40%; }
.latest_awards .title { color:#fff;  }
.latest_awards .awards{  margin: 0; padding: 40px 0; margin:10px 0; height:360px;  }
.latest_awards .item{ position:relative; background: url(../images/web/btn_awards.png) no-repeat #fff; background-position:98% 50%; box-shadow: 0 0 3px rgba(0,0,0,.2); padding:10px; -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; }
.latest_awards .item:hover{ background: url(../images/web/btn_awards.png) no-repeat rgba(255,255,255,.8); background-position:98% 50%; }

.date_calendar { float:left; width:80px; background:url(../images/web/bg_calendar_box.png) no-repeat center center ; height:80px; position:relative; }
.date_calendar .box_date { font-size:32px; letter-spacing:-1px; font-family: 'Noto Serif Display', serif; width:48%; text-align: right; white-space: nowrap; position:absolute; top:10px;   } 
.date_calendar .box_month { font-size:18px; color:#013d85; width:45%; letter-spacing:-1px; text-align:center; right:0; text-align:center; white-space: nowrap; position:absolute; bottom:0px; } 
.latest_awards .content { position: absolute;  top: 50%;  -ms-transform: translateY(-50%);  transform: translateY(-50%); margin-left:90px ; margin-right:20px; line-height:26px;} 


/* Latest awards */

/* Footer */
.sch_information{ background:#fff; padding:35px 0; position:relative; box-shadow: 0 0px 3px rgba(0,0,0,.2)}
.find_us{ float:left; width:10%;}
.find_us a{ background:#013d85; color:#fff; display:block; padding:10px 15px; }
.find_us a:hover{ background:#eee9e4; color:#333;  }
.contact_main{ float:right; width:100%;}
.contact_main ul { list-style:none; margin:0; padding:0; }

.contact_main ul li{ float: left;  width:32%; }
.contact_main ul li+li{  width:19%; }
.contact_main ul li+li+li+li{  width:30%; }

.contact_main ul li span{ padding:10px 10px 10px 42px; color:#0761b8; white-space: nowrap}
.contact_main ul li span{ background:url(../images/web/icon_map.png) no-repeat ; }
.contact_main ul li+li span{ background:url(../images/web/icon_tel.png) no-repeat ; }
.contact_main ul li+li+li span{ background:url(../images/web/icon_fax.png) no-repeat ; }
.contact_main ul li+li+li+li span{ background:url(../images/web/icon_mail.png) no-repeat ; }
.footer{ background:#014492; padding:35px 0; font-size:15px;}
.footer_contact { float:left; width:45%;}
.footer_contact ul { list-style:none; margin:0; padding:0; }
.footer_contact ul li{ float: left;   }
.footer_contact ul li+li{ border-left:1px solid #b1b1b1;  }
.footer_contact ul li a{ color:#fff; padding:5px 30px; }
.footer_contact ul li a:hover { color:#eee9e4;}
.copyright { float:right; width:55%; color:#fff; text-align:right;}
/* Footer */

/* Nevigation */
.nevigation{ padding:15px 0px; border-bottom:1px dotted #ddd; margin-bottom:15px; background:#f0f0f0;  }
.nevigation .screen{ }
.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: #CCC }
.nevigation ul li{ float: left; line-height:24px;  }
.nevigation ul li a{ color: #666 !important; text-decoration: none; cursor: auto }
.nevigation ul li:last-child { color:#013d85;}
.nevigation .active-trail, .nevigation .home { color: #333 !important; cursor: pointer !important; text-decoration: underline !important; }
.nevigation .active-trail:hover, .nevigation .home:hover{ text-decoration: none  !important ;  color:#013d85 !important;}
/* Nevigation */

/* Main Content */
.inner_banner{  position: relative; padding:360px 0 19px 0;  text-align: right; background-position:50% 50%; background-size: cover; }
.inner_banner h1{ color:#fff; padding:15px 40px; display:inline; font-size:40px;  line-height:48px; background:rgba(7,94,180,.85); text-shadow:0px 0px 15px rgba(0,0,0,.65);  }
.non_banner{  position: relative; background:url(../images/web/banner_default.jpg) no-repeat ;  }
.non_banner h1{ color:#fff; text-shadow:0px 0px 15px rgba(0,0,0,.15);}

#media { background:url(../images/web/banner_news.jpg) no-repeat center center ; }
#media h1{ }
#media_detail { background:url(../images/web/banner_default.jpg) no-repeat center center ; padding:300px 0 0;}
#media_detail h1{ display:none }
.main_content{ float:right; width:74%; padding:0px 2%; }

#left_highlight{ float:left; width:60%; position:relative;  height:648px;}

/* End Main Content */

/* theme */
.inner_content { padding-bottom:80px; min-height:500px;}
.FullPage .main_content{ padding:0; width:100% !important; }
.FullPage .sidebar-nav{ display:none !important }
.btn_back{ margin:0px auto; text-align: center; margin-top:50px; margin-bottom:50px;}
.btn_back a{ display: inline-block; padding:5px 50px; color:#fff !important;  background: linear-gradient(to left, #013d85 50%, #eee9e4 50%); background-size: 200% 100%; background-position: right bottom;  transition: all .5s ease-out;  }
.btn_back a:hover { background-position: left bottom; color:#013d85 !important;}

.container #full { padding:0; width:100% }
button {font-family: 'Noto Sans', "微軟正黑體", "Microsoft JhengHei" , sans-serif  }

@media screen and (max-width:1480px) {
.top_right { margin-right:0;}
}

/* Main */

/* Main Userful Links */
.Userful_link_inside{ float:left; padding:0px ; width:100%;}
.Userful_link_inside .title{ font-size:30px; color:#004ea0; text-transform: uppercase;  padding:15px 0;}
.Userful_link_inside ul{ list-style:none; margin:0 0 0 -1.5%; padding:20px 0 0;}
.Userful_link_inside ul li{ float:left; margin-bottom:10px; width:15%; margin-left:1.5%;}
.Userful_link_inside  img{border:1px solid #fff; width:100%;  box-shadow:0 0 2px rgba(0,0,0,.25)}
.Userful_link_inside  img:hover{ opacity:.7; box-shadow:0 0 2px rgba(0,0,0,.4)}
.Userful_link_inside ul li a{display: block;}


/* Page Template */
.Album{ margin:15px 0px;}
.Album .title{  color:#032d69; border-left:2px solid #032d69;  padding:5px 20px 5px 20px;   margin:10px 0; display:inline-table; font-size:24px; }
.Album .description{ margin:15px 0; }

.subject_area h6 { border-left:0; color:#0766c0 ; padding:5px 0; margin:0; }
.subject_area .title_a { background:url(../images/web/sub_title_a.png) no-repeat center left ; padding:10px 0 10px 70px; color:#0766c0 }
.subject_area .title_b { background:url(../images/web/sub_title_b.png) no-repeat center left ; padding:10px 0 10px 70px; color:#0766c0 }
.subject_area .title_c { background:url(../images/web/sub_title_c.png) no-repeat center left ; padding:10px 0 10px 70px; color:#0766c0 }
.subject_area .title_d { background:url(../images/web/sub_title_d.png) no-repeat center left ; padding:10px 0 10px 70px; color:#0766c0 }

.subject_area .main_content ul { list-style: none; padding:0 0 0 20px; }
.subject_area .main_content ul li{ position:relative;}

.subject_area .main_content ul li::before {
  content: "\203A"; color: #0e76dd; font-weight:bold; display: inline-block; 
  width: 1em; position:absolute; left:-20px; top:2px;
}

.subject_area .main_content ul.tabs li::before { display: none}

.Album .description ul li::before {
  content: "\2022"; color: #0e76dd; font-weight:bold; display: inline-block; 
  width: 1em; 
}
.search-results { margin:0 0 0 20px; padding:0; }
.search-results li { list-style: outside; border-bottom:1px dotted #ddd; padding:0 0 15px 0; }
.search-results .search-info{ display:none;}
.Album .description  ul li{ text-align: left; margin:0 0 10px 0; }
.Album .description  ul li{ text-align: left; margin:0 0 10px 0; }

.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;}

#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%; }

#full #Inner_Type_A li{ float:left; width:23%; margin:0 0 15px 2%; }
#full #Inner_Type_A li:nth(4n+1){ clear:both }
#full #Inner_Type_A li:nth-child(3n+1){ clear:none }

#Inner_Type_A li img{ max-width:100%; max-height:480px; }
#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{padding:0px; background:none }
#Inner_Type_C .title{ margin-left:0px; }

#Inner_Type_C .title_des{ float: right; width:31%}
#Inner_Type_C .right_desc{ float:  left; width:68%; text-align: left}
#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 0 15px 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: #032d69;
    border-left: 2px solid #032d69;
    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 left; background-position:0px -33px; padding:7px 0 7px 40px; line-height:19px; color:#555; background-size:33px auto; display: inline;}
.download_area ul li a:hover{ background:url(../images/icon/icon_download.png) no-repeat left; background-position:0px 0px; color:#0868c5; background-size:33px auto;  }

.calendar_content{ margin:0px 0 0 0; padding:20px 0; box-shadow: 0 0 3px rgba(0,0,0,.2)}

/* Subject Category */
.subject_category{ width:75%; margin:0px auto; z-index:0; position:relative;}
.subject_category ul{ list-style:none; margin:0 ; padding:0px;}
.subject_category ul li{ margin:0 0 20px 0; padding:0; position:relative; }
.subject_category ul li a { display:block;  background:#013d85; }
.subject_category ul li img{ width:100% ; opacity:.5; -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; }
.subject_category ul li:hover img{opacity:1 }

#grid{ margin-bottom:-60px;}
.sticky #findus{ padding-top:120px;}

.subject_category ul li a p{ color:#0555b8; }
.subject_category ul li p{ -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; color:#0555b8; right:0; bottom:40px; font-size:33px; line-height:40px; padding:15px 30px;
 position:absolute; z-index:1; background: linear-gradient(to left, rgba(255,255,255,.9) 50%, rgba(1,67,135,.9) 50%); color:#fff; background-size: 200% 100%; background-position: right bottom;  }
.subject_category ul li:hover  p { background-position: left bottom; color:#fff; }

.subject_category a:hover p{  }
.subject_category a:hover{ text-decoration:none}
/* Sub Category  */
.sub_category{ float: left; margin-bottom:20px; }
.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: #ffae00; color:#fff; border:1px solid #2080d1;}
.sub_category ul li a.current{ background: #013d85 ; color:#fff; border:1px solid #032d69 ; }


/* Information Template */
#pages{ float:right; margin:15px 0px 0 ; clear: both; font-size:12px;}
.pages_page{ float:left;padding:0px 10px 0 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; border-radius:50%; 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:#013d85; color:#fff}
.year_box{ position:absolute; right:20px ;}
.year_box select{ padding:5px 5px;}

.information{ }
.information ul{ list-style:none; margin:0; padding:0px;}
.information ul li{ position:relative; }
.information ul li a{ display:block}

#info_type_A .information ul{ list-style:none; padding:30px 0;}
#info_type_A .information ul li a{ padding:50px 15px 15px 15px; border:1px solid rgba(255,255,255,0.2); margin-bottom:40px; background:#f6faff; }
#info_type_A .information ul li a:hover { background:#eee9e4; border:1px solid rgba(255,255,255,0.3); }
#info_type_A .date span {background:url(../images/web/icon_calendar.png) no-repeat  ; padding:8px 20px 8px 36px; display: inline-block; color:#333; background-size:35px 32px; background-position:0px 45%; }
#info_type_A .date span+span { display:none;}

#info_type_A .date { position:absolute; top:-15px; left:15px;}
#info_type_A .information .cover{ float:left; width:20%; margin: 0 15px 0 0; }
#info_type_A .information .cover img { width:100%; border:1px solid #fff; box-shadow: 0 0 3px rgba(0,0,0,.2); }
	


#info_type_B .information ul{ list-style:none; padding:30px 0; margin:0 0 0 -3.3%;}
#info_type_B .information ul li{ float:left; width:30%; margin:0 0 30px 3.3%; box-shadow: 0 0 5px rgba(0,0,0,.3)  }
#info_type_B .information ul li:hover{ background:#edf5ff; }
#info_type_B .information ul li .date{  }
#info_type_B .information ul li .content{ padding:10px;}
#info_type_B .information ul li .cover {border:1px solid #fff; box-shadow: 0 0 3px rgba(0,0,0,.2); }
#info_type_B .information ul li .cover img{  }
#info_type_B .information ul li:nth-child(3n+1){ clear:both;}

/* 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 */
.categoryitems_sub ul .Lv4  { margin-left:20px !important;  }

/* 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}



#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}

.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 */


/* Other */
.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)}



.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;}

.sidebar-nav {
	float:left; width:21%;   
}
.sidebar-nav .title {padding: 25px 0; background: url(../images/icon/bg_category.png) no-repeat right; color:#fff; font-size:28px; background-size: cover !important;  margin:0px;  text-align: center; }
.sidebar-nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    background: #f5f9ff;
}
.sidebar-nav .metismenu {
    padding: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.sidebar-nav .metismenu a.current { color:#0766c0; }

.sidebar-nav .metismenu li + li {
  margin-top: 5px;
}
.sidebar-nav .metismenu li:first-child {
  margin-top: 5px;
}
.sidebar-nav .metismenu li:last-child {
  margin-bottom: 5px;
}
.sidebar-nav .metismenu > li {
    /*-webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;*/
	width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
}
.sidebar-nav .metismenu a {
    position: relative;
    display: block;
    padding: 5px 35px 5px 15px;
    color: #333333;
    outline-width: 0;
    transition: all .3s ease-out;
}

.sidebar-nav .metismenu ul a {
    padding: 5px 35px 5px 30px;
}
.sidebar-nav .metismenu ul ul a {
    padding: 5px 35px 5px 45px;
}
.sidebar-nav .mm-active { color: #0866c1 !important; }
.sidebar-nav .metismenu a:hover,
.sidebar-nav .metismenu a:focus,
.sidebar-nav .metismenu a:active,
.sidebar-nav .metismenu .mm-active > a {
    color: #0866c1;
    text-decoration: none;
}



.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 }

.wrap .dropdown span {cursor: pointer;border-bottom:1px solid #039;color:#004b87; font-size:16px; border:1px solid #ddd; padding:5px 30px 5px 5px; position:relative;   }
.wrap .dropdown { float:right; margin: 0 0; position:relative;  }
.wrap .dropdown span::after {
    content: "\f078"; color:#27548d; font-weight:normal;
	font-style:normal; font-family: FontAwesome; position:absolute; right:5px; top:0px;

    outline: none;

 
    pointer-events: painted;
	float:right;   display:block; 
}

.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; width:100%;}
#table_t{ border:1px solid #3c99dc;}
#table_t tr:nth-child(1){ background:#0f5298; color:#fff;}
#table_t tr:nth-child(even) td{ background:#e1f7ff}

.inner_content #full table{ border-collapse:inherit; width:60%; margin:0px auto;}
.inner_content #full table{ border:1px solid #3c99dc;}
.inner_content #full table tr:nth-child(1){ background:#0f5298; color:#fff;}
.inner_content #full table tr:nth-child(even) td{ background:#e1f7ff}


#table_des{ border-collapse:inherit; width:100%;  border:1px solid #3c99dc; padding:3px;}
#table_des tr:nth-child(even) td{ background:#fff}
#table_des tr:nth-child(odd) td{ background:#f7f5f2}

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

#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 #3c99dc; padding:5px;}
#table_stafflist tr:nth-child(even) td{ background:#f7f8f8}
#table_stafflist tr td{ width:50% !important}

#r_photo{ float:right; width:30%}
#r_photo img{  width:100%}
#l_content { float: left;  width:70%}
#l_content table { width:100%}
.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.2);
	opacity:.8;
}
figure {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
}
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;
}
#popup_this h2 { color:#fff; font-size:21px; line-height:26px;}
#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:15px ; margin:15px; border:0px solid #fff; }

.b-close {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    color: #333;
    background: #D3D3D3; line-height:23px;
    padding: 5px 12px;
}
.b-close:hover { 
    background: #0868c5;
}

.circular-square { float:right; width:30%; overflow:hidden; box-shadow: 0 0 3px rgba(0,0,0,.2); margin:0 0 30px 30px; border-top-left-radius: 50% 50%; border-top-right-radius: 50% 50%; border-bottom-right-radius: 50% 50%; border-bottom-left-radius: 50% 50%; }

#campus_front { float:left; width:40%; margin:0 30px 30px 0}
#campus_front img{ width:100% } 
#campus_des { background:#f5f6f9; padding:20px; }

#contact_information { background:#014492; padding:20px 30px ; color:#fff;}
#contact_information h2 { color:#fff; margin:0 0 20px 0;}
#contact_information h3 { background:#fff; color:#014492; display:inline-block ; padding:10px; margin-bottom:20px;}

.transports { float:left; width:48% }
.map_preview{ float:right; width:48% }
.map_preview img{ width:100%; }

.transports ul { list-style:none; margin:0 ; padding:0;}
.transports ul li { background:url(../images/web/icon_kmb.png) no-repeat ; background-position:0px 5px; padding:0 0 30px 50px;  }
.transports ul li+li { background:url(../images/web/icon_firstbus.png) no-repeat ;  }
.transports ul li+li+li { background:url(../images/web/icon_citybus.png) no-repeat ;  }
.transports ul li+li+li+li { background:url(../images/web/icon_minbus.png) no-repeat ;  }

.map_point { background:#fff; padding:10px;}
.map_point ul{ list-style:none; margin:0; padding:0 0.5%; }
.map_point ul li{ float: left; width:33%;  color:#333;  }
.map_point ul li span { background:url(../images/web/bus_stop.png) no-repeat left center; padding:0 0 0px 40px; background-size:28px 25px}
.map_point ul li+li{   color:#ff3300;  }
.map_point ul li+li+li{   color:#000371;  }
.googlemap{ float:right;}
.googlemap a { display:block; background:url(../images/web/icon_googlemap.png) no-repeat #fff ; padding:10px 15px 10px 65px; background-position:10px 50%;  } 
.googlemap a:hover { background:url(../images/web/icon_googlemap.png) no-repeat #eee9e4 ; background-position:10px 50%; }
/* Site Map */
.site-map { margin:0; padding:0;}
.site-map ul{ list-style:none; margin:0 0 0 -2%; padding:0;}
.site-map ul li{ float: left; width: 23%; margin:0 0 15px 2%; padding:0; list-style:none;}
.site-map ul li:nth-child(4n+1){ clear: both; }
.site-map ul li ul{ list-style: outside; margin:0 0; padding:0 0 0 20px;}
.site-map ul li ul li{ float: none; width: 100%; margin:0; list-style-type: circle;}
.site-map ul li ul li ul{ list-style:none; margin:0 0 0 15px; padding:0;}
.site-map ul li ul li ul li{ float: none; width: 100%; margin:0; list-style-type: square;}


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



@media screen and (max-width: 1024px) {
#popup_this .content { min-width: auto; }
.arean_title { font-size:30px;   }
}
@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 ; }

}

        /* jssor slider loading skin spin css */
        .jssorl-009-spin img {
            animation-name: jssorl-009-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-009-spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }


        .jssora093 {display:block;position:absolute;cursor:pointer;}
        .jssora093 .c {fill:none;stroke:#fff;stroke-width:400;stroke-miterlimit:10;}
        .jssora093 .a {fill:none;stroke:#fff;stroke-width:400;stroke-miterlimit:10;}
        .jssora093:hover {opacity:.8;}
        .jssora093.jssora093dn {opacity:.6;}
        .jssora093.jssora093ds {opacity:.3;pointer-events:none;}

        .jssort101 .p {position: absolute;top:0;left:0;box-sizing:border-box;background:#000;}
        .jssort101 .p .cv {position:relative;top:0;left:0;width:100%;height:100%;border:2px solid #000;box-sizing:border-box;z-index:1;}
        .jssort101 .a {fill:none;stroke:#fff;stroke-width:400;stroke-miterlimit:10;visibility:hidden;}
        .jssort101 .p:hover .cv, .jssort101 .p.pdn .cv {border:none;border-color:transparent;}
        .jssort101 .p:hover{padding:2px;}
        .jssort101 .p:hover .cv {background-color:rgba(0,0,0,6);opacity:.35;}
        .jssort101 .p:hover.pdn{padding:0;}
        .jssort101 .p:hover.pdn .cv {border:2px solid #fff;background:none;opacity:.35;}
        .jssort101 .pav .cv {border-color:#fff;opacity:.35;}
        .jssort101 .pav .a, .jssort101 .p:hover .a {visibility:visible;}
        .jssort101 .t {position:absolute;top:0;left:0;width:100%;height:100%;border:none;opacity:.6;}
        .jssort101 .pav .t, .jssort101 .p:hover .t{opacity:1;}
		#slider_arean { max-width:60%; margin-top:50px;}
		#slider_des { display: flex; justify-content: center; align-items: center ; padding:0px; position:relative; background:#e7f4fe; margin-top:50px;}
		#slider_des p{ text-align:left;}
		.slider_con { width:36%; float:left; text-align:center; padding: 0 2%;}
		#slider_des h1 { text-align: left; font-size:23px; float:none;}
		
		
@media screen and (max-width:960px) {
	#slider_des { width:100%; display:inline-block;}
	#slider_arean  { width:100%}
	.slider_con { width:96%;  }
}

#info_type_A h2 { margin:20px 0; color:#13aeff }
#info_type_A .information ul { padding:0 0 30px 0;}   
#info_type_A .date {position:relative; top:0; left:0;  display: inline-block;}
#info_type_A .date span {  margin:0 0 10px 0}
#info_type_A .information ul li a { padding: 15px; }
#info_type_A .information ul li a { margin-bottom:0px; box-shadow: 0 0 0px rgba(0,0,0,.3) }
#info_type_A .information ul li { border-bottom: 1px solid #ddd;}
#info_type_A .information .cover{ float: right}