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


html,body {
    padding: 0px; margin: 0px; min-height:100%; font-size:19px; color: #333; line-height:28px;		
	font-family:  "微軟正黑體",'Noto Serif HK', serif, sans-serif; 
}

a:link, a:visited {color: #333; text-decoration: none;}
a:hover {color: #ffa800 ;  }
.clear{clear:both}
.contextual-links-region{ position: static}
table{border-collapse: inherit; line-height:28px;}
table ul, table ol{ margin:0; }
img {border:0;}
div, ul li{ margin:0px auto; padding:0px;}

#map{
  
  aspect-ratio: 4/3;
  border-radius: 16px;
}
#poster_area{ float:right; width:49%}
             #poster_area img{ width:100%;} 
.wrap{ width:100%; min-height:100%;overflow: hidden;
  }
footer .screen{ position:relative;}
.screen{ min-width:680px; max-width:1580px; padding:0px 15px; margin:0px auto;}
.container{ height: auto; min-height:500px;   }
#inner , #tpl { }

#full { width:calc(100% - 40px)}
.container .screen{  padding:0 ; position: relative }
.container a, .upper_footer 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;}
.container a{ color:#2d47a6;}
.container a:hover{ text-decoration: underline; }

h1{ font-size:38px; color:#f08300; text-transform:uppercase; line-height:38px;}
h2{ font-size:33px; color:#333333; }
h3{ color:#f08300; padding:0 0 ; font-size:24px; position:relative }


h4{ font-size:21px; margin:0px; color:#ffa800}
h5{ font-size:21px; margin:0px; color:#117098}
p{ margin:0px; padding:0px}
/* theme */

.FullPage .inner_content{ padding:10px 3% 0 3%; width:94%;}
.FullPage .arrowlistmenu{ display:none;}


#ad_float_ad {display: none; position: absolute;	z-index:4001; }
#ad_float_ad .ad_close_ad {
	display: block; background:url(../images/icon/btn_close.png) no-repeat; height:30px; width:30px; background-size:30px 30px;
	cursor: pointer; position:absolute; right:-5px; top:-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;
}
#ad_float_ad .ad_close_ad:hover {  transform: rotate(90deg);}

.special_news{ background:#eb1f24; padding:3px; width:280px; box-shadow:0 0 3px rgba(0,0,0,.2)}
.title_special{ background:#fff; padding:5px 5px; color:#ea1e22; font-size:19px; text-transform:uppercase; border-bottom:1px solid #ea1e22;}
.special_news .content{ background:#fff; padding:2px 5px; color:#333; font-size:15px;}
.special_news .content img{ max-width:100%;}
.highlight{ color:#F03;}

/* Header */
.header{ position: relative; z-index:1; width:100% ;background: #fff;box-shadow: 0 0 3px rgba(0,0,0,.2); }
.header .screen{ position:relative; padding:0px 15px;}

.logo { float:left; padding: 23px 20px 20px 0;}


.header .logo_area {  padding:  0;font-size: 30px;line-height: 30px; font-weight: bold; }
.header .logo_area a { display:block;}
.header .logo_area span { font-size: 18px; color:#333}
.logo_img {  float: left; }

.header .logo_img img{ width:100%; max-height:65px;  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:0px 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; }
 
.links_top{position: absolute;top: 0;right: 0;}
 
 
.header .logo 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; color:#ff8e3f }

.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%; box-shadow:  0 0 3px rgba(0,0,0,.2) ;   } 

.sticky  .top_contact a{  background:url(../images/web/icon_top_map.png) #eee no-repeat;  background-position:90% 50% ; }

.header nav {display: flex; padding: 0 }

#right_poster { float:right; width:49%; text-align:center;}
#right_poster  img { max-width:100%; }

.end_date{ position:absolute; background: rgba(255,106,0, .9); z-index:1; font-size:14px; padding:5px; right:0; top:0; color:#fff;}

.area_selected{ float: right; margin-top:125px; background: rgba(255,255,255,.7); border-radius:8px; padding:10px; position:relative; z-index:0;}
.area_selected ul { list-style:none; margin:0; padding:0 }
.area_selected ul li { float: right; margin:0 0 0 10px  }

.btn_clear{ float: right !important; }
.area_selected select{ line-height:21px; height:28px; padding:5px;}
.area_selected input{ background:#4f3a82; color:#fff; line-height:21px; height: auto; margin-top:4px; padding:4px 12px; border-radius:8px; border:0px; font-size:13px;
font-family: "cwTeXYen", "微軟正黑體", "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;	}

.area_selected input:hover{ background:#ff7200; color:#fff; cursor:pointer }

#top-search{ margin:3px 0 0 0; float:right; background:#F60; color:#fff; cursor:pointer}
#top-search:hover{ background: #F33; color:#fff; }
#top-search-key{ background: #F4F4F4; color:#333; margin-right:5px; max-width:150px; box-shadow: 0 0 3px rgba(0,0,0,.2)}

#media{ text-align:left; padding: 90px 0 20px 0;}
#media h1{ background: url(../images/web/title_bg_act.png) no-repeat ; background-position:0 50%; color:#3c2c25; padding: 50px 0 50px 75px; }

@media screen and (max-width: 1400px) {
	.main_info ul li span { font-size:15px; padding:5px 0; line-height:17px;}
}

@media screen and (max-width: 1080px) {
.top_contact { display:none}
}

.map_area{
  
  width: 56%;
  float: right;
}

.map_area #info #entrance_img{float: left; width: 52%;}
.map_area #info #title{margin: 15px 0 0 0; FONT-WEIGHT: 600;}
.map_area #info{background: #F7F5F0; padding: 0; border-radius: 16px;}
.map_area #info .left{padding-right:8px;background: transparent; padding: 0; color: black;  font-size: 14px; list-style: none; float: left; width: 100%;}
.map_area #info ul li {margin: 5px 0;}
.map_area #info .left li span{padding: 5px 0 5px 45px;}


 #address span{background: url(../images/web/icon_address.png) no-repeat left center;padding: 5px 0 5px 45px;}
 #tel span{background: url(../images/web/icon_tel.png) no-repeat left center;padding: 5px 0 5px 45px;}
#fax span{background: url(../images/web/icon_fax.png) no-repeat left center;padding: 5px 0 5px 45px;}

 #website span{background: url(../images/web/icon_website.png) no-repeat left center;padding: 5px 0 5px 45px;}
 #email span{background: url(../images/web/icon_email.png) no-repeat left center; padding: 5px 0 5px 45px;} 
 #wtsapp span{background: url(../images/web/icon_wtsapp.png) no-repeat left center; padding: 5px 0 5px 45px;}

 #facebook span{background: url(../images/web/icon_facebook.png) no-repeat left center; display:block ; width:29px ; height:29px; padding:0 !important }
 #ig span{background: url(../images/web/icon_ig.png) no-repeat left center; display:block ; width:29px ; height:29px; padding:0 !important}

 #facebook , #ig{ float:left !important; width: auto !important; margin-right:10px !important;}
 #facebook a ,  #ig a{ display:block}
 #facebook a:hover ,  #ig a:hover{ text-decoration:none}
 
 
 .activity_area{ background:#ffcc00; width:calc(49% - 20px); padding:10px; float:left; border-radius:16px;}
 .activity_area ul{ background:#fff; list-style: none ; margin:0; padding:10px; border-radius:12px;}
 .activity_area ul li{ padding:5px 0; font-size:17px; border-bottom:1px dotted #ddd; } 
 .activity_area ul li span{ padding: 5px 20px 5px 0px; color:#ff9600; } 
 
  .activity_area .date-display-single{ color:#333;}
 
 
.contact_info{}
.contact_info ul { list-style: none !important; margin:0 !important; padding:0 !important}
.contact_info ul li{ margin: 0 0 5px 0}

.map_area #info .right{background: transparent; padding: 0; color: black;  font-size: 14px; list-style: none; float: right; width: 50%;}

.main_content p, .main_content li{
  text-align: justify;
}

.location_logo{
  float: left;
  height:auto;
  width: 55px; padding:0 5px;
  object-fit: contain;
}

.locations_area{
  width: 40%;
  height: fit-content;
  max-height: 520px;
  list-style: none;
  padding: 8px;
  float: left;
  margin: 0 12px 0 0px;
  overflow: auto;
}

.locations_area li{
  cursor: pointer;
  padding: 5px 0px;
  margin: 0 0px;
  border-bottom: 1px dotted #666;
  font-size: 14px; display:flex; align-items: center
}


.locations_area li.current{
  background: #ff8e3f;
  color: #fff;
}

.home_video {
    width: 100%; max-height:100%; height:100%;
    padding: 0; padding-bottom: 0px;
    height: 0;
    position: relative;
}
.home_video video {
    width: 100%;
    height: 100%;
}

.object_theme{}
.slider_left{ width:47%; float: left;}
.slider_left img{ width:100%; }

.object_theme{ float:right; width:46%; margin-right:2%;}
.title_object{background:url(../images/web/title_object.png) no-repeat; 
color:#003c8a; letter-spacing:2px; text-transform:uppercase; font-size:33px; font-weight:normal; padding: 65px 0 35px 50px; line-height: 33px;}
.object_theme ul{ list-style:none; margin:0; padding:15px;}

.object_theme ul li{position:relative;  margin:0 0; padding:12px 0; border-bottom:1px dotted #ddd; }
.object_theme ul li span { color:#fff; font-size:15px;  position:relative; line-height:28px; float:left; }
.object_theme ul li span::before {
  content: "";
  position: absolute;
  width: 28px; 
  height: 28px; margin:2px 0 0 -10px;
  z-index: -1;
  background:#023b8a;
  transform: rotate(45deg); border-radius:4px;
}
.object_theme ul li:nth-child(even) span::before { background:#00adef}
.object_theme ul li p{ padding:0 0 0 35px }

#block-block-24 {display: flex; align-items: center;}
.main_1{}
.main_2 {background: url(../images/web/button_bg.png) no-repeat top;min-height: 929px;}
footer {  background: url(../images/web/bg.png) no-repeat top; padding-bottom: 0 !important} 



.focus{}
.focus_title{background:url(../images/web/title_focus.png) center center no-repeat; text-align: center; 
color:#fff; letter-spacing:2px; text-transform:uppercase; font-size:33px; font-weight:normal; padding: 20px 0 ; margin-bottom:30px; line-height: 33px;}
.focus ul { padding:0 10%; list-style:none; margin:0;}
.focus ul li{ float:left; width:33%;}
.focus ul li img{ width:100%;}

/* Banner */

#banner {  background:url(../images/web/banner_bg.png) no-repeat bottom; padding: 70px 0 130px 0; }


.banner_area_border {width: 80%;}
.banner_area{border: 3px solid #fff;
border-radius: 19px;
box-shadow: 0 0 3px rgba(0,0,0,.2);}

.banner_slider_border img { border-radius: 16px; max-width:100%; }



.banner_slider {
  
    width: 100%;
    box-shadow:0 0 3px rgba(0,0,0,.2); background:#fff;border-radius: 16px;
    padding: 0;
}
.banner_slider_border {
    
    
    overflow: hidden;
}


/* Inner Area */




.inner_area{ padding:0px 0;}

.right_home_b{ float:right; width:68%; background:#fff; padding:30px 0 ; margin:1px 0;}

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

.more_area{ position:absolute; right:0; display:block;z-index:0;   text-align:center; }
.more_area a{ display: inline-block; padding:10px 50px; color:#01479d !important;  background: linear-gradient(to left, #ffffff 50%, #fff200 50%); background-size: 200% 100%; background-position: right bottom;  transition: all .5s ease-out; 
clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%); }

.more_area a:hover { background-position: left bottom; color:#01479d !important;}

.inner_area .title{padding:35px 0 35px 15px; color:#333; font-size:23px; text-shadow:0 0 3px rgba(0,0,0,.2) } 




.idea { width:100%;margin-top: 50px;max-width: 1355px;}
.idea .title {text-align: center;font-size: 30px;color: #ff8e3f;font-weight: bold;border-bottom:4px solid;display: grid;width: 120px; margin-bottom:30px;line-height: 50px;}
.idea  p{line-height: 50px;}


.idea  .more { position:relative;right: 0;display: grid;z-index: 1;font-size: 14px;margin-top: 30px;text-align: center;
left: 0;width: 190px;}
.idea .more a { position: relative;font-weight: bold;font-size: 17px; display: inline-block; padding:5px 50px; color:#fff !important;  background: linear-gradient(to left, #ff8e3f 50%, #fff200 50%); background-size: 200% 100%; background-position: right bottom;  transition: all .5s ease-out; border-radius: 26px; }
.idea .more a:hover { background-position: left bottom; color:#333 !important;}
.idea .more a::before { content: "";width: 44px;height: 100%;background: url(../images/web/idea_more_icon.png) no-repeat;
position: absolute;left: 10px;text-align: center;top: 0;background-position-y: 50%;background-size: 100%;z-index: 1;}
.idea .more a::after { content: "";width: 14px;height: 100%;background: url(../images/web/idea_more_right.png) no-repeat;
position: absolute;right: 15px;text-align: center;top: 0;background-position-y: 50%;background-size: 100%;z-index: 1;}



.latest_gallery{ padding:90px 0 0px 0; position:relative; }
.latest_gallery .area{   min-height:350px;  }

.latest_gallery .main_events_area { width:80%}
.latest_gallery .cover{ border-radius: 16px;
border: 3px solid #fff;
box-shadow: 0 0 3px rgba(0,0,0,.2);
overflow: hidden; }

.latest_gallery .title {width: 100%;text-align: center;font-size: 30px;color: #ff8e3f;font-weight: bold;line-height: 50px; margin:100px 0}
.latest_gallery .title span{font-size: 17px;background: #3c2c25;padding: 5px 30px;border-radius: 16px;color: #fff;}

.latest_gallery ul{ list-style:none; margin: 0; padding: 0px 2.5%;}
.latest_gallery ul li{ position:relative; float:left; width:21%; margin:0 2%;}
.latest_gallery .more_area{ position:relative; margin-top:60px;}

.latest_gallery .more_area a{ display: inline-block; padding:5px 50px; color:#fff !important;  background: linear-gradient(to left, #ff8e3f 50%, #fff200 50%); background-size: 200% 100%; background-position: right bottom;  transition: all .5s ease-out; 
clip-path: none;
border-radius: 26px; }

.latest_gallery .more_area a:hover { background-position: left bottom; color:#333 !important;}



.content_title{ margin:10px 0 0 0;}
.date_box{ float:left; width:55px; height:55px; position:relative;  background:#fff; text-align:center; margin:0 10px 0 0; padding:2px 2px 0 2px ;}
.date_box .day{ font-size:23px; display:block; line-height:30px; color:#01479d ; }
.date_box .month{ font-size:14px;line-height:15px; z-index:2 ;
  background:#ffc000; color:#01479d; padding:3px 0; margin:0;}

.latest_gallery ul li a{ color:#fff; padding:0; }

.latest_gallery ul li a:hover{  } 

.latest_gallery ul li{ margin-top:20px;}
.latest_gallery ul li+li{ margin-top:90px;}
.latest_gallery ul li+li+li{ margin-top:30px;}
.latest_gallery ul li+li+li+li{ margin-top:80px;}

.latest_gallery ul li .cover{ }
.latest_gallery ul li .cover img{ max-width:100%; box-shadow: 0px 0px 3px rgba(0,0,0,.2) }

.latest_gallery .cover img{ max-width:100%; border-radius: 16px;
overflow: hidden;}

.latest_gallery .content { width:100%; font-size:22px; color:#ff8e3f; font-weight:bold; margin: 15px 0;}

.brief{font-size:17px; position:absolute; right:0; top:-55px; padding:8px 15px ; background: #ff852b; color:#fff; border-radius:8px;}

.txt3,.txt4 {  width:100%;display: flex; color:#333; padding:10px 0 0 0; }
.txt,.txt2 {  width:100%;display: flex; color:#333; }
.txt{margin-bottom: 10px; margin-top:10px}

.txt p { padding: 0px 20px;
background: #fe665b;
color: #fff;
border-radius: 16px;
font-size: 17px; margin:0; }

.txt p a { color:#fff}

.txt2 p { padding: 0px 20px;
background: #33bc54;
color: #fff;
border-radius: 16px;
font-size: 17px; margin:0; }

.footer_info{background:url(../images/web/bg_footer.png) no-repeat top center; padding:50px 0; } 
.logo_footer{ float: left; width: 25%; padding:20px 0 0 0;}
.logo_footer img{ height:50px;}

.logo_footer .logo_txt { margin:0px 0 0 10px; float: left; color:#00479c !; }

.logo_footer .logo_tc  { font-weight:bold; font-size:25px; line-height:28px;color:#00479c; }
.logo_footer .logo_en { color:#00479c; font-size:19px; line-height:25px;  }
.contact_info{ float: left; width:60%;}
.basic_info, .address{ float:left; width:50%; font-size:19px;}

.sitemap_btn{ float:right; width:15%; }

.sitemap_btn a{ display: inline-block; padding:10px 50px; color:#01479d !important;  background: linear-gradient(to left, #fff200 50%, #ee2a7b 50%); background-size: 200% 100%; background-position: right bottom;  transition: all .5s ease-out; 
clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%); }

.sitemap_btn a:hover { background-position: left bottom; color:#ffffff !important;}


 
.footer .copyright{ float:left; width:49%; text-align: left ;  color:#333}
.footer .power{ float:right; width:49%; text-align: right}
.footer .power a{ color:#333;}
.footer  a:hover{ color:#F90}
.footer .copyright a{ color:#333;}

.home_video { background:url(../images/web/bg_video.png) no-repeat center center fixed ;  text-align: center;  }
.home_video .home_video { width:50%; margin:0px auto; padding:90px 0;}
.home_video .home_video iframe{ width:100%; height:420px;}
.home_video .title_video { position:absolute; left:0 ; top:30px;}






.fc-center h2{ font-size:13px;}


/* Main Userful Links */
.Userful_link_inside{ padding:50px 0;}
.Userful_link_inside ul{ list-style:none; margin:0 0 0 -2%; padding:0}
.Userful_link_inside ul li{ float:left;}

.Userful_link_inside ul li{ width:18%; margin:5px 0 5px 2%}

.Userful_link_inside ul li img{border:1px solid #fff; width:100%;  box-shadow:0 0 2px rgba(0,0,0,.25)}
.Userful_link_inside ul li:hover img{ opacity:.7; box-shadow:0 0 2px rgba(0,0,0,.4)}
.Userful_link_inside ul li a{display: block;}


/* Footer */
.footer{  font-size:15px; padding:30px 0; background:#fff; color:#333;box-shadow: 0 0 3px rgba(0,0,0,.2); }
.footer .screen{}

.home_bottom_menu{ padding:35px 0; box-shadow:0 0 5px rgba(0,0,0,.2)}

.footer_area{ padding:40px 0 40px 0 }
.contact_main{ background:#f29205; padding:40px 0 40px 0 }
.contact_main ul{ list-style:none; margin:0; padding:0; text-align: center;}
 .contact_main ul li{ display:inline-block; color:#fff; font-size:16px; margin:0 30px  }
 .contact_main ul li a:hover { color:#fff}
.contact_main ul li span{ padding:0px 10px 0px 32px; color:#fff; 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_email.png) no-repeat ; }
 



.home_bottom_menu ul { list-style: none; margin:0; padding:0; text-align: center }
.home_bottom_menu ul li{ display:inline-block  }
.home_bottom_menu ul li a { padding:5px 20px; font-size:18px; text-align: center; display: block;}
.home_bottom_menu ul li+li  { border-left: 1px dotted #ddd;}

.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: #f08300  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: #e86256; opacity: 1;}

/* Nevigation */
.nevigation{ padding:15px 0px; font-size:13px; border-bottom:0px dotted #ddd; margin-bottom:15px; background: #ffffffa1;  }
.nevigation .screen{ padding:0; }
.nevigation .home{ background:url(../images/icon/icon_home_orange.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 */

.FullPage  .main_content { width:100% !important; padding:0 !important }

.inner_content{ padding-bottom:50px; min-height:500px;}
.inner_content .main_content{ float:right;width: calc(77% - 40px);
background: #fff;
padding: 0 20px 20px 20px;
white-space: normal;
word-break: break-all;}
.inner_content_full{  }
.inner_content_full .main_content{ }
.inner_content img, .inner_content_full img{ max-width:100%;}

.left_menu{ float:left; width: 21%; }
.sidebar-nav {float:left; width:21%;background: #ffb600;
box-shadow: 0 0 3px rgba(0,0,0,.2);
border-radius: 16px;
overflow: hidden; }
.sidebar-nav .title {padding: 25px 0;  color:#fff; font-size:28px; background-size: cover !important;  margin:0px;  text-align: center; }
.sidebar-nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
  
}
.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;
	background: #fff;
margin: 0px 10px 10px 10px;
border-radius: 10px;
}

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

.sidebar-nav .metismenu li + li {
}
.sidebar-nav .metismenu li:first-child {
}
.sidebar-nav .metismenu li:last-child {
}
.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;
	border-bottom:1px dotted #666;
    position: relative;
}
.sidebar-nav .metismenu a {
    position: relative;
    display: block;
    padding: 12px 15px 12px 15px;
    color: #333333;
    outline-width: 0;
    transition: all .3s ease-out;
}

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

/* Content Template */
.boxing { border-bottom:2px solid #e5e5e5; position:relative; padding:0 0 50px 0}
.boxing::before {
    position: absolute;
    left: 0;
    bottom: -2px;
    content: "";
    display: block;
    width: 3rem;
    height: 2px;
    background: #f08300;} 
.boxing .title{  color:#000; padding:10px 20px 10px 30px;  margin:20px 0; display:inline-table; font-size:24px; font-weight:bold; position:relative }
.boxing .title::before {
  background-color: #ff8e3f;
border-radius: 50%;
content: "";
height: 8px;
left: 4px;
position: absolute;
top: 22px;
width: 8px;}
	.boxing .title::after {
  background-color: rgba(255, 159, 34, 0.19);
border-radius: 50%;
content: "";
height: 16px;
left: 0;
position: absolute;
top: 18px;
width: 16px;
}
.boxing .description{padding:10px;box-shadow: 0 2px 3px rgba(125, 55, 4, 0.26);
background: #F7F5F0;
border-radius: 20px;}

.boxing .description ul { color: #ff8e3f;
background: #fff;
border-radius: 16px;}


.Album ul{ list-style:none; padding:0px; margin:0}

.right_desc ul { margin:0 0 0 20px !important; padding:0; list-style:outside}
.right_desc ol { margin:0 0 0 20px !important; padding:0; }
.right_desc ul li, .right_desc ol li{ float: none !important;}

#Inner_Type_A ul, #Inner_Type_A2 ul{ margin:0 0 15px -2%; }
#Inner_Type_A li, #Inner_Type_A2 li{ float:left; width:31.3%; margin:0 0 15px 2%; }
#Inner_Type_A li p, #Inner_Type_A2 li p{ text-align: center; }
#Inner_Type_A li:nth-child(3n+1), #Inner_Type_A2 li:nth-child(3n+1){ clear:both; }

#Inner_Type_B ul, #Inner_Type_B2 ul{ margin:0 0 15px -2%; }
#Inner_Type_B li, #Inner_Type_B2 li{ float:left; width:48%; margin:0 0 15px 2%; }
#Inner_Type_B li p, #Inner_Type_B2 li p{ text-align: left; }
#Inner_Type_B li:nth-child(2n+1), #Inner_Type_B2 li:nth-child(2n+1){ clear:both; }

#Inner_Type_C li .title_des{ float: left; width:28%}
#Inner_Type_C li .right_desc{ float: right; width:70%; text-align: left}
#Inner_Type_C2 li .title_des{ float: right; width:28%}
#Inner_Type_C2 li .right_desc{ float: left; width:70%; text-align: left}
#Inner_Type_C li p, #Inner_Type_C2 li p{ text-align: left; }

.download_area ul{ list-style:none; margin:0px 0; padding:0px;}
.download_area ul li{  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:3px 5px; padding:8px 0 3px 30px; line-height:19px; color:#555; background-size:23px 23px; display:block;}
.download_area ul li a:hover{ background:url(../images/icon/icon_download.png) no-repeat left; background-position:3px 8px; color:#666;background-size:23px 23px}

#Inner_Type_D ul{ list-style:none; margin:0px 0 ; padding:0px;}
#Inner_Type_D ul li{ float:left; width:31%; margin:0 0 15px 2%; text-align: left;}
#Inner_Type_D ul li a{ background:url(../images/icon/icon_download.png) no-repeat left; background-position:3px 5px; padding:8px 0 3px 30px; line-height:19px; color:#555; background-size:23px 23px; display:block;}
#Inner_Type_D ul li a:hover{ background:url(../images/icon/icon_download.png) no-repeat left; background-position:3px 8px; color:#666;background-size:23px 23px}

#tpl .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;   }
#tpl .dropdown { float:right; margin: 0 0; position:relative;  }
#tpl .dropdown span::after {
    content: "\f078"; color:#27548d; font-weight:normal;
	font-style:normal; font-family: FontAwesome; position:absolute; right:5px; top:5px;

    outline: none;

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

#tpl .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;
}
#tpl .dropdown:hover .dropdown-content {  display: block;}
#tpl .dropdown-content ul { list-style: none; padding:5px; margin:0; display: flex;
  flex-direction: column-reverse;}
#tpl .dropdown-content ul li {  float: right;  width:100%;}
#tpl .dropdown-content ul li a{ display:block; padding:5px ; text-align: center; border-bottom:1px dotted #ddd; color:#333 }
#tpl .dropdown-content ul li a:hover { background:#004b87; color:#fff; }

/* Sub Category  */
.sub_category{ float: left; margin-bottom:20px; width: 90%; }
.sub_category ul{ list-style:none; padding:0px; margin:0px; }
.sub_category ul li{ float:left; margin-right:15px;margin-bottom: 10px;}
.sub_category ul li a{ padding:10px 21px; display:block; color:#fff; background: #fdbe00; font-size:16px; line-height:19px; border:1px solid #fdbe00; border-radius: 26px;}

.sub_category ul li:nth-child(2) a { background: #3399ff;border:1px solid #3399ff;}
.sub_category ul li:nth-child(3) a { background: #4332b6;border:1px solid #4332b6;}
.sub_category ul li:nth-child(4) a { background: #ff3300;border:1px solid #ff3300;}
.sub_category ul li:nth-child(5) a { background: #9933ff;border:1px solid #9933ff;}
.sub_category ul li:nth-child(6) a { background: #0066cc;border:1px solid #0066cc;}
.sub_category ul li:nth-child(7) a { background: #ff5050;border:1px solid #ff5050;}
.sub_category ul li:nth-child(8) a { background: #ffcc00;border:1px solid #ffcc00;}
.sub_category ul li:nth-child(9) a { background: #cc99ff;border:1px solid #cc99ff;}
.sub_category ul li:nth-child(10) a { background: #99cc00;border:1px solid #99cc00;}

.sub_category ul li a:hover{ background: #fff; color:#333; border:1px solid #ff8e3f;}
.sub_category ul li a.current{ background: #fff ; color:#333; border:1px solid #ff8e3f ; }

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

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

.date span {background:url(../images/web/event_date.png) no-repeat  ; padding:8px 20px 8px 40px; display: inline-block; color:#333; background-size:28px 31px; background-position:0px 45%; } 


#template_A .information ul{ list-style:none; padding:5px 0;}
#template_A .information ul li .cover{ float:left; width:33%; margin:0 15px 0 0; }
#template_A .information ul li:nth-child(3n+1) { clear:both; }
#template_A .information ul li a{ padding:15px; border:1px solid rgba(255,255,255,0.2); margin-bottom:10px; background:#f6faff; }
#template_A .information ul li a:hover { background:#eee9e4; border:1px solid rgba(255,255,255,0.3); }

#template_B .information ul{ list-style:none; padding:5px 0; margin:0 0 0 -2%;}
#template_B .information ul li{ float:left; width:48%; margin:0 0 15px 2%; }
#template_B .information ul li:nth-child(2n+1) { clear:both; }
#template_B .information ul li .cover{ float:left; width:33%; margin:0 15px 0 0; }
#template_B .information ul li a{ padding:15px; border:1px solid rgba(255,255,255,0.2); margin-bottom:10px; background:#f6faff; }
#template_B .information ul li a:hover { background:#eee9e4; border:1px solid rgba(255,255,255,0.3); }

#template_C .information ul{ list-style:none; padding:5px 0; margin:0 0 0 -1%;}
#template_C .information ul li{ float:left; width:calc(33.3% - 2% - 6px - 20px); margin:0 0 15px 2%;border-radius: 16px;
overflow: hidden; padding:10px !important}



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

#template_C .information ul li .cover{ border-radius: 16px;border: 3px solid #fff;box-shadow: 0 0 3px rgba(0,0,0,.2);
overflow: hidden; }
#template_C .information ul li a{  border:1px solid rgba(255,255,255,0.2);  }
#template_C .information ul li a:hover { border:1px solid rgba(255,255,255,0.3) ; text-decoration:none }



#template_C .content {width: 100%;font-size: 22px;color: #ff8e3f;font-weight: bold;margin: 15px 0;}
#template_C .content {width: 100%;font-size: 22px;color: #ff8e3f;font-weight: bold;margin: 15px 0;}


/* Notice */
#template_notice .information ul{  margin:0 0 0 0%; border-top:2px solid #ddd}
#template_notice .information ul li{ float:none; width: 100%; margin:0; padding:10px 0px 10px 0; line-height:17px; border-bottom:1px solid #ddd;  }
#template_notice .information ul li a{ display:inline-block; padding:0px 0; width:100%; }
#template_notice .information ul li a:hover{ color:#333; text-decoration:none}
#template_notice .information ul li:hover{ background:#eff9ff; }
#template_notice .information .date{ float:left; width:15%; padding:5px 5px 5px 10px;}
#template_notice .information .date span{ padding:0px 0 0px 28px; background-size:20px 18px;}
#template_notice .information .number{ float:left; width:10%; padding:5px 0; font-size:16px; }
#template_notice .information .title{ float:left; width:60%; padding:5px 0; font-size:16px; line-height:19px; text-shadow:0 0 0 }
#template_notice .information p{ width: auto; font-size:15px;}
#template_notice .information .download{ float:right; width:8%; overflow: hidden }
#template_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}

.youtube_video {  width:100%; box-shadow:0 0 5px rgba(0,0,0,.2); padding:0; height:0; padding-bottom:56.25%; position:relative;}
.youtube_video iframe { width:100%; position:absolute; left:0; top:0; height:100%} 
.video_theme{ max-width:80%; margin:50px auto ;}

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

.my-masonry-grid { margin:30px 0; }

.my-masonry-grid-item {
  margin: 0 6px 12px;
  padding: 5px;

  background:#F2F2F2;
}

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

/* 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 p{ }
.subject_category a{ padding:10px; border:1px solid #333; display:block }
.subject_category a:hover{ background:#F90; color:#fff; }

.location{ float:right;  width:100%; margin:30px 0;  }
.location iframe{ width:100%; min-height:360px;}




.sentense{ margin:20px 0;  }
.sentense .area{padding: 5px;float: right;width: calc(90% - 10px);background: #ffde00;border: 2px solid #fff;box-shadow: 0 0 0 4px #ffa800;border-radius: 8px;}
.sentense .area p{background: #fff;padding: 5px 5px;border-radius: 8px; }
.sentense .title { position:absolute ; left:10px; top:10px; }

/* Table */

table.event{border-collapse: inherit; width:100%; box-shadow: 0 0 0px rgba(0,0,0,.1); padding:0px; line-height:28px; }
table.event tr:nth-child(even) td { background: none; color:#333; padding:0px;}
table.event tr:nth-child(odd) td { background:none; color:#333; padding:0px;}


table{border-collapse: inherit; width:100%; box-shadow: 0 0 2px rgba(0,0,0,.1); padding:0px; line-height:33px; }
tr:nth-child(even) td { background:#fffcf3; color:#333; padding:5px;}
tr:nth-child(odd) td { background:#fff; color:#333; padding:2px;}
table ul, table ol{ margin:0; }

#table_box{ border-collapse:inherit; background:#ddd }
#table_box tr td{ padding:5px; background:#fff }
#table_box tr:nth-child(1) td{ background:#032d69 !important; color:#fff !important;}
#table_box tr:nth-child(odd) td{ background:#fffcf3}

.tablefield-wrapper{border-collapse:inherit; }
.tablefield-wrapper tr td{ padding:5px; background:#fff }
.tablefield-wrapper  thead{ background:#fd8c3e  !important; color:#fff !important;}
.tablefield-wrapper  thead > tr > th { border-bottom:0px !important ;}
.tablefield-wrapper tr:nth-child(odd) td{ background:#fffcf3}

.tablefield-wrapper caption { }

.tablefield-wrapper tr { 
    display: flex; 
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 0;
	padding:0 1px;
  }
.tablefield-wrapper td, .tablefield-wrapper th {
    flex: 1 1 150px;
  }
.default_img{ margin:0px auto ; text-align: center; max-width:100%;}

/* Pop Up Message Box */
#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:1023px; 
}
#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: #F90;
}
  
  
/*button_serve*/
.serve { padding:170px 0 0 0}
.serve .title{ width:100%; text-align:center; font-size:30px ; color: #ff8e3f;font-weight: bold; line-height: 50px;}
.serve .title span {font-size: 17px;background: #3c2c25;padding: 5px 30px;border-radius: 16px;color: #fff;}


.button_serve { padding:50px 0 80px 0;}

.button_serve  ul {display: flex;justify-content: space-between;margin: 0px 0 0 0;padding: 0;list-style: none; width:100%}

.button_serve  ul  li{height: 200px;width: 200px;float: left;margin-top: 0;text-align: center;background: url(../images/web/teen_center.png) no-repeat ;background-size: 100%;	}



.button_serve ul li+li { margin-top:0px;	background: url(../images/web/teen_outside.png)no-repeat ;background-size: 100%;}
.button_serve ul  li+li+li {margin-top:150px;	background: url(../images/web/teen_night.png)no-repeat ;background-size: 100%;}
.button_serve ul li+li+li+li {margin-top:100px;	background: url(../images/web/teen_online.png)no-repeat ;background-size: 100%;}
.button_serve ul li+li+li+li+li {margin-top:-100px;background: url(../images/web/teen_support.png)no-repeat ;background-size: 100%;}
.button_serve ul li+li+li+li+li+li {margin-top:-150px;	background: url(../images/web/teen_medicine.png)no-repeat ;background-size: 100%;}


.button_serve  ul  li a{width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
 display:block;
background: #a3c12257;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;}




.button_serve  ul  li a:hover  p { opacity:1 }

.button_serve  ul  li a  p { opacity:0;top: 40%;left: 0;transform: translate(0%, 50%);
color: #fff; position:relative  }


.button_serve  ul  li a:hover  {
	color: #ffffff;
text-decoration: none;
box-shadow:inset 0 0 0 175px rgba(255, 167, 0, 0.5), inset 0 0 0 15px rgba(255,255,255,0.9), 0 1px 2px rgba(0,0,0,0.1);
opacity: 1;
	
	
	
	
}





@media screen and (max-width: 1530px) {
.button_serve ul li + li { margin-top:110px}
.button_serve ul li + li + li {    margin-top: 200px;}
.button_serve ul li + li + li + li {    margin-top: 150px;}
.button_serve ul li + li + li + li + li { margin-top:-10px}
.button_serve ul li + li + li + li + li + li { margin-top:-110px}
.button_serve ul li { height:140px; width:140px}

}
	
@media screen and (max-width: 1230px) {
.button_serve ul li { margin-top:50px}	
.button_serve ul li+li { margin-top:150px}
.button_serve ul li + li + li + li {    margin-top: 140px;}
.button_serve ul li + li + li + li + li {    margin-top: -10px;}
.button_serve ul li + li + li + li + li + li {    margin-top: -110px;}
	}




.gallery_border {border-radius:16px ; padding:10px; box-shadow:0 0 3px rgba(0,0,0,.2); position:relative}


.gallery_border a:hover { text-decoration:none;}

.bgbg_blue .txt p{ background: #0a328c;}
.bgbg_yallow .txt p{ background: #fad925;}

.news_icon::after { content: "NEW";width: 50px;height: 50px;background: #fe665b;position: absolute;right: 5px;text-align: center;
top:5px ;background-position-y: 0px;background-size: 100%;z-index: 1;border-radius: 70px;font-size: 13px;line-height: 50px;color: #fff;}

.news_icon::before {content: "";width: 0;height: 0;border-style: solid;border-width: 10px 0 0 10px;border-color: transparent transparent transparent #fe665b;position: absolute;z-index: 1;top: 43px;right: 40px;transform: translate(0%, 0%);}


.button{ width: 75%; padding:190px 0 60px 0}
.button ul { list-style:none; padding: 0;margin: 0;}
.button ul li {  float: left; width: calc(50% - 100px - 6px);
position: relative;
overflow: hidden;
margin: 0 50px;
border-radius: 16px;
border: 3px solid #fff;
box-shadow: 0 0 3px rgba(0,0,0,.2);}

.button ul li p {color: #fff;}
.button ul li a {display: inline-block;border-radius: 26px;position: relative;width: 230px;right: 0;left: 0;background: #ff8e3f;
font-size: 17px;padding: 5px 0 5px 60px;margin: 3% 0 0 0; color:#fff}
.button ul li a::before {    content: "";    width: 66px;    height: 68px;    background: url(../images/web/psychiatry_icon.png) no-repeat center;    position: absolute;    left: 30px;    text-align: center;    top: -13px;    background-position-y: 50%;    background-size: 80%;    z-index: 1;}
.button ul li+li a::before {    content: "";    width: 75px;    height: 70px;    background: url(../images/web/school_icon.png) no-repeat center; top: -23px; background-size: 80%;   }
.button ul li+li a {background: #ffba00; }
.button ul li span{text-align: center;display: block;position: absolute;z-index: 1;top: 25%;left: 0;font-size: 30px;font-weight: bold; right:0; text-shadow:0 0 15px rgba(140, 140, 140, 0.15);}
.button ul li img{ max-width: 100%; opacity:0.6  }

.button ul li img:hover {  
  opacity: 0.75;}
  
  
  
  
  
  .hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background: #fff;
}



.hovereffect img {
  display: block;
  position: relative;
  max-width: none;
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px,0,0);
  transform: translate3d(0px,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hovereffect:hover img {
  opacity: 0.4;
  filter: alpha(opacity=40);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}





.hovereffect a, .hovereffect p {
  color: #FFF;
  opacity: 1;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(100%,0,0);
  transform: translate3d(0,0,0);
}

.hovereffect:hover a, .hovereffect:hover p {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.sch_info {background: url(../images/web/bottom.png) no-repeat top;}
.sch_info_area  { width:80%}
.sch_info_area  ul { list-style:none; padding:160px 0 70px 0; margin:0 ;   display: grid;grid-template-columns: 20% 20% 20% 20% 20%;}
.sch_info_area  ul li {
	vertical-align: middle;
    display: table-cell; 
    width: 80%;
    text-align: center;
    font-weight: bold;
    color: #fff;
    font-size: 30px;
    padding: 5px 0px;
    place-self: center;}
.sch_info_area ul li img { max-width:80%;}



.area_selected{ float: right; margin-top:125px; background: rgba(255,255,255,.7); border-radius:8px; padding:10px; position:relative; z-index:0;}
.area_selected ul { list-style:none; margin:0; padding:0 }
.area_selected ul li { float: right; margin:0 0 0 10px  }

.btn_clear{ float: right !important; }
.area_selected select{ line-height:21px; height:28px; padding:5px;}
.area_selected input{ background:#4f3a82; color:#fff; line-height:21px; height: auto; margin-top:4px; padding:4px 12px; border-radius:8px; border:0px; font-size:13px;
font-family: "cwTeXYen", "微軟正黑體", "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;	}

.area_selected input:hover{ background:#ff7200; color:#fff; cursor:pointer }

#top-search{ margin:3px 0 0 0; float:right; background:#F60; color:#fff; cursor:pointer}
#top-search:hover{ background: #F33; color:#fff; }
#top-search-key{ background: #F4F4F4; color:#333; margin-right:5px; max-width:150px; box-shadow: 0 0 3px rgba(0,0,0,.2)}



#block-system-main-menu { float: left; width:100%}

.inner_banner { background: url(../images/web/inside_banner.png) bottom center no-repeat; padding:100px 0; text-align:center;  background-repeat: no-repeat;}
.inner_banner h1{text-align: center;display: inline-block;background: #ffffffde;
padding: 20px 50px;}




.hover01 figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity:1;
	width: 100%;border-radius: 16px;
overflow: hidden !important;
}
.hover01 figure:hover img {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	opacity:.8; border-radius: 16px;
overflow: hidden !important;
}
figure {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;border-radius: 16px !important;}
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;
}



.filter { background: rgb(255, 229, 87);
opacity: 0.35;
padding: 8% 0;
min-height: 100px;}





.intro { width: calc(49% - 20px);
background: #ffe9b2;border-radius: 16px;
padding: 10px; float: left;}


.date_activity , .time_activity ,.location_activity ,.price_activity  {
background: #fff;
padding: 10px;
border-radius: 16px;
float: left;margin-bottom: 10px; 
}

.price_activity ,  .time_activity  {width: calc(49% - 20px)}
.date_activity , .location_activity  {width: calc(49%  - 20px);}





.time_activity , .location_activity, .content_activity{ margin-left:2%;}


.object_activity, .content_activity {background: #fff;padding: 10px;border-radius: 16px;float: left;margin-bottom: 10px;}



.title_activity ,.intro_activity, .remark_activity,.inquire_activity {width:100% ; float:left}

.title_activity,.intro_activity ,.remark_activity , .inquire_activity {background: #fff;
padding: 10px;
border-radius: 16px;
float: left;
width: calc(100% - 20px); margin-bottom:10px }

.title_activity .title, .intro_activity .title, .date_activity .title, .time_activity .title, .location_activity .title, .price_activity .title, .remark_activity .title, .inquire_activity .title, .object_activity .title, .content_activity .title  {margin-right: 15px; vertical-align:top; display:table-cell}

.title_activity .title p, .intro_activity .title p, .date_activity .title p, .time_activity .title p, .location_activity .title p, .price_activity .title p, .remark_activity .title p, .inquire_activity .title p, .object_activity .title p, .content_activity .title p{color: #fff;padding: 5px 20px;border-radius: 16px; display:block; text-align: center;}

.title_activity span, .intro_activity span, .date_activity span, .time_activity span, .location_activity span, .price_activity span, .remark_activity span, .inquire_activity span , .object_activity span, .content_activity span{padding: 5px 0px 5px 20px; vertical-align:top; display:table-cell}



.title_activity .title p{ background: #fdbe00;}
.intro_activity .title p{ background: #3ca63c;}
.date_activity .title p{ background: #ed6d2b;}
.time_activity .title p{ background: #4332b6;}
.location_activity .title p{ background: #f00;}
.price_activity .title p{ background: #3ca63c;}
.remark_activity .title p{ background: #a63ca4;}
.inquire_activity .title p{ background: #ff8e3f;}
.object_activity .title p{ background: #fdbe00;}
.content_activity .title p{ background: #3ca63c;}

.btn_back {position: relative;right: 0;display: grid;z-index: 1;font-size: 14px;margin-top: 30px;text-align: center;left: 0;width: 190px; }

.btn_back a { position: relative;font-weight: bold;
font-size: 17px;display: inline-block;padding: 5px 50px;color: #fff !important;background: linear-gradient(to left, #ff8e3f 50%, #fff200 50%);background-size: 200% 100%;background-position: right bottom;transition: all .5s ease-out;border-radius: 26px;}
.btn_back a:hover { background-position: left bottom; color:#333 !important;}

.slider_inner { margin-top:100px}


.兒童 .txt p { background:#fdbe00}
.青少年 .txt p { background:#3399ff}
.家長 .txt p { background:#4332b6}
.小學老師 .txt p { background:#ff3300}
.中學老師 .txt p { background:#9933ff}
.小校輔導人員 .txt p { background:#0066cc}
.中學輔導人員 .txt p { background:#ff5050}
.小學校本 .txt p { background:#ffcc00}
.中學校本 .txt p { background:#cc99ff}
.專上教育教職員 .txt p { background:#99cc00}



.兒童 .gallery_border {border:3px solid #fdbe00;}
.青少年 .gallery_border {border:3px solid #3399ff;}
.家長 .gallery_border {border:3px solid #4332b6;}
.小學老師 .gallery_border {border:3px solid #ff3300;}
.中學老師 .gallery_border {border:3px solid #9933ff;}
.小校輔導人員 .gallery_border {border:3px solid #0066cc;}
.中學輔導人員 .gallery_border {border:3px solid #ff5050;}
.小學校本 .gallery_border {border:3px solid #ffcc00;}
.中學校本 .gallery_border {border:3px solid #cc99ff;}
.專上教育教職員 .gallery_border {border:3px solid #99cc00;}



.gallery_border a:hover {
    color: inherit;
}


tr:nth-child(1) td { background:#ff8e3f; color:#fff}
@media screen and (max-width: 1530px) {
.button { width:100%; padding: 80px 0 30px 0;}
.sch_info_area {    width: 100%;}

	}

#mental_area{}
#mental_area ul{ list-style:none; margin:0; padding:0}
#mental_area ul li{ padding:15px 0; border-bottom: 1px dotted #666;}
#mental_area ul li ul{ list-style: outside; margin:0; padding:0}
#mental_area ul li ul li{ padding:0px 0; border-bottom: 0px dotted #666;}

.left_brand{ float:left; width:25%;}
.left_brand h2{ font-size:16px; }
 
.right_desc { float:right; width:73%;}

.left_brand .logo_area{ background:#fff; box-shadow: 0 0 3px rgba(0,0,0,.2); text-align: center; display:inline-block; padding:5px;}