@charset "utf-8";
/*list*/
.list_column{
	clear:both;
	margin:30px auto 5px auto;
	max-width:1060px;
	height:390px;
	overflow:hidden;
}
.list_column2{
	height: inherit;
	overflow: hidden;
  max-width: 100%;
	padding:10px 0 0 0;
  z-index: 10;
  position: relative;
}
.list_column .show_column{
	width:100%;
	margin: 0 auto;
	overflow:hidden;
	padding:0 0 80px 0;
	position: relative;
}
.list_column .prev{
	float:left;
	display:block;
	background:url(button_prev.png) no-repeat;
	background-position:-25px 0;
	width:2.5%;
	height:360px;
	cursor:pointer;
	margin:0;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
}
.list_column .next{
	float:right;
	display:block;
	background:url(button_next.png) no-repeat;
	background-position:0px 0;
	width:2.5%;
	height:360px;
	cursor:pointer;
	margin:0;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
}
.list_column .prev:hover{
	background-position:0 0;
}
.list_column .next:hover{
	background-position:-25px 0;
}
.swiper-wrapper.warp{
	width:100%;
	margin: 0 auto;
	padding:20px 0 0 0; 
}
.swiper-wrapper.warp .box{
	padding: 0 5px;
	display: block;
	letter-spacing:1px;
}
.swiper-wrapper.warp .box .pic{
	float:left;
	width:100%;
	padding-bottom:70%;
	margin:0 0 10px 0;
	background-position: center;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
}
.swiper-wrapper.warp .box .date{
  clear:both;
  font-size:0.875em;
  color:var(--theme_master_color);
  margin:0 0 6px 5px;
}
.swiper-wrapper.warp .box .title{
	clear:both;
	width:95%;
	font-size:1.1em;
	color:#000;
	margin:0 0 10px 5px;	
}
.swiper-wrapper.warp .box .info{
	clear:both;
	width:95%;
	font-size:1em;
  line-height: 1.2em;
	color:#666;
	margin:0 0 10px 5px;
}
.pager {
	float:left;
	width:100%;
	text-align: center;
}
.pager a {
	display:inline-block;
	margin:0 5px;
	height:8px;
	width:8px;
	text-decoration: none;
	-webkit-border-radius:15px;
	-moz-border-radius:15px;
	border-radius:15px;
	background:#CCC;
}
.pager a.selected {
	height:8px;
	width:8px;
	background:var(--theme_master_color);
}
/*index_blocks*/
.column_left{
	position: relative;
	float:left;
	width: 726px;
	margin:18px 0 0 0px;
}
.column_left .AC{
	position: absolute;
	top:0;
	left:-14px;
	color: #666665;
	/* line-height: 40px; */
	font-size: 0.938em;
}
.column_right{
	float:right;
	width: 352px;
	margin:18px 4px 0 0;
	padding:5px 0 0 0;
	overflow:hidden;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}
/*banner*/
.column_banner{/*20181016#*/
	width:100%;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	height:431px;
	padding:0 5px 0 5px;
	margin:0 0 28px 0;
	-moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; background-size: contain; background-repeat: no-repeat; background-position: center 10px ;
}
.column_calendar{
	clear:both;
	margin:20px auto;
	width:100%;
	max-width:1050px;
}
.course_list_mode{
	clear:both;
	width:100%;
	margin:0 auto;
	padding: 0 0 120px 0;
}
/* Stretch the links */
.fotorama__html div,
.fotorama__html a {
	display: block;
	height: 100%;
	/* Transparent links are not clickable in IE,
	   but non-existent background fixes this.
	  (Put an empty 1×1 image here to avoid
	   errors in console.) */
	background:url(_.gif);
}

.fotorama__html .title{
	position:absolute;
	bottom:0px;
	height:35px;
	width:100%;
	color:#FFF;
	font-size:0.938em;
	line-height:40px;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.7)59%, rgba(0, 0, 0, 0)100%); 
	background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.7)59%, rgba(0, 0, 0, 0)100%); 
	background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.7)59%, rgba(0, 0, 0, 0)100%); 
	background: -o-linear-gradient(90deg, rgba(0, 0, 0, 0.7)59%, rgba(0, 0, 0, 0)100%); 
	padding:0 10px;
}
@media screen and (max-width:1100px) {
	.column_left{
		clear:both;
		float:none;
		margin:0 auto;
		width:100%;
		max-width:700px;
	}
	.column_right{
		clear:both;
		float:none;
		margin:0 auto;
		width:100%;
		max-width:700px;
	}
	.column_banner{
		margin:20px 0;
		width:100%;
		height:500px;
	}
}
/*20181016#*/
@media screen and (max-width:680px) {.column_banner{height:460px;}}
@media screen and (max-width:640px) {.column_banner{height:440px;}}
@media screen and (max-width:600px) {.column_banner{height:420px;}}
@media screen and (max-width:560px) {.column_banner{height:400px;}}
@media screen and (max-width:520px) {.column_banner{height:380px;}}
@media screen and (max-width:480px) {.column_banner{height:360px;}}
@media screen and (max-width:440px) {.column_banner{height:340px;}}
@media screen and (max-width:400px) {.column_banner{height:320px;}}
@media screen and (max-width:360px) {.column_banner{height:300px;}}
@media screen and (max-width:320px) {.column_banner{height:280px;}}
/***********************************************/
@media screen and (max-width:1100px) {
	.column_left,
	.column_calendar{
		clear:both;
		float:none;
		margin:0 auto;
		width:100%;
		max-width:940px;
	}
	.column_right{
		clear:both;
		float:none;
		margin:0 auto;
		width:100%;
		max-width:700px;
	}
}
/*service_tab*/
/*20181017#****************************************/
.column_news ul.tabs {
	width:100%;
	text-align:center;
	border-bottom:2px solid var(--theme_master_color);
	margin:0 auto 15px auto;
}
.column_news ul.tabs li {
    display: inline-block;
    line-height: 32px;
}
.column_news ul.tabs li a {
	display: block;
	padding: 0 2px;
	color: #000;
	font-weight: bold;
	background: #d8d8d8;
	text-decoration: none;
	padding: 6px 25px 0 25px;
	-webkit-border-radius:10px 10px 0 0;	-moz-border-radius:10px 10px 0 0; border-radius:10px 10px 0 0;
}
.column_news ul.tabs li a:hover{color:#000;}
.column_news ul.tabs li.ui-state-focus a{background: #d8d8d8; outline: none;}
.column_news ul.tabs li.ui-state-active a{background: var(--theme_master_color); color:#fff; outline: none;}
.column_news ul.tabs li.ui-state-focus a:before{position: relative; top: 2px;}
.column_news ul.tabs li.ui-state-active a:before{content:url(icon_leaf_index.png); position: relative; top: 4px; margin: 0;}
/*******************************************/
div.tab_container {
	clear: left;
	width:100%;
	text-align:left;
	padding:0;
	margin:0 auto;
}
div.tab_container .tab_info {
	padding:0;
	overflow:hidden;
}
/*links_tab*/
.links_tab {
	display:block;
	clear:both;
	width:1000px;
	text-align:center;
	margin:30px auto;
	overflow:hidden;
}
.links_tab ul{
    width: 98%;
    text-align: center;
    border-bottom: 1px solid var(--theme_master_color);
    margin: 0 auto 15px auto;
}
.links_tab ul.links_tabs li {
	display:inline-block;
	line-height: 32px;
	margin:0 10px;
}
.links_tab ul.links_tabs li a {
	display: block;
	padding: 0 2px;
	color: #777;
	text-decoration: none;
}
.links_tab ul.links_tabs li a:hover{
	color:#222;
}
.links_tab ul.links_tabs li.active{
	border-bottom:2px solid var(--theme_master_color);
}
.links_tab ul.links_tabs li.active a{
	color:var(--theme_master_color);
	font-weight:bold;
	font-size:1.125em;
}
div.link_tab_container {
	clear:both;
	width: 100%;
	text-align:left;
	padding:0 1% 0px 1%;
	margin:0 0 0 0;
}
div.link_tab_container .tab_info {
	padding: 6px 0 10px 0;
	font-size:0.938em;
	color:#666;
	overflow:hidden;
}


/**/

@media screen and (max-width:1100px) {
	.list_column{
		width:96%;
		margin:-25px auto 20px auto;/*20181013#*/
	}
	.list_column .show_column{
		margin:0;
	}
	.list_column .prev{
		display:none !important;
	}
	.list_column .next{
		display:none !important;
	}
	.column_left,
	.column_calendar{
		clear:both;
		float:none;
		margin:0 auto;
		width:100%;
		max-width:940px;
	}
	.column_right{
		clear:both;
		float:none;
		margin:0 auto;
		width:100%;
	}
	.links_tab {
		width:95%;
		max-width:700px;
	}
	div.link_tab_container {
		clear:both;
		width:100%;
		text-align:center;
		padding:0 1% 0px 1%;
		margin:0 auto;
	}
	/*link*/
	.link_box{
		float:none;
		display:inline-block;
	} 
}
@media screen and (max-width:360px) {
	/*link*/
	.link_box{
		float:none;
		display:inline-block;
		width:45%;
		height:50px;
	}
	.link_box img{
		width:100%;
		height:48px;
	}
}
@media screen and (max-width:680px) {
	.list_column .show_column{
		margin:0;
	}
}
/*vmap_index*/
.vmap_index{
	overflow:hidden;
	position:relative;
}
.vmap_index>svg{
	position:relative;
	/*top:-100px;*/
}
.column_vmap{
	clear:both;
	width:100%;
	max-width:1050px;
	margin:0 auto;
	background: #e9f5ff;
	-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
}
/*map*/
.level{
	width:100%;
	margin:0 auto;
	text-align:center;
}
.level h3{
	display:inline-block;
}
.level ul{
	clear:both;
	width:100%;
	margin:10px auto 40px auto;
	text-align:center;
	letter-spacing:-4px;
}
.level ul li.level_block{
	display:inline-block;
	margin:0 -1px 0 0;
	font-size:0.750em;
	
	width:35px;
	height:35px;
	line-height:35px;
	border:1px solid #999;
	letter-spacing:1px;
}
.level ul li.areaname{
	display:inline-block;
	margin:0 5px;
	font-size:0.750em;
	
	height:35px;
	line-height:35px;
	letter-spacing:1px;
}
.level ul li.areaname{
	display:inline-block;
	margin:0 5px;
	font-size:0.938em;
	
	height:35px;
	line-height:35px;
	letter-spacing:1px;
}
.level ul li.areaname a{
	color:#000;
	padding:0 0 3px 0;
	border-bottom:1px dashed #000000;
}
.level ul li.areaname a:hover{
	color:#e08800;
}
.level ul li.level_block.mentor{
	background:#E8F5BC;
}
.mentor{
	width:100%;
	margin:0 auto 40px auto;
	text-align:center;
}
.mentor a{
	color:#690;
	padding:0 0 3px 0;
	border-bottom:1px dashed #690;
}
.docmentor_sel{
	/*display:none;*/
}
  .docmentor_sel .group_sel{
    width: 170px;
  }
@media screen and (max-width:1100px) {
	.docmentor_sel{
		width:100%;
		display:block;
		text-align:center;
		font-size:1.125em;
	}
  .docmentor_sel .group_sel{
    width: unset;
  }
}
/*20181016#學習故事noscript用 Start*/
.noscript_story_slider{width: 100%; position: relative;}
.noscript_story_slider a{color: #000; position: absolute; width: 100%; z-index: 1;background: rgba(249,249,249,1);}
.noscript_story_slider .box{width: 100%; padding: 27%; -moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; background-size: contain; background-repeat: no-repeat; background-position: center;}
.noscript_story_slider .box .title{background: rgba(249,249,249,0.6); padding: 5px; position: absolute; width: 100%; left: 0; bottom: 0; text-align: center;}
.noscript_story_slider .title{padding: 5px 5px 50px 5px; background: #fff; width: 100%; text-align: center; font-size: 0.96em;}
.noscript_story_slider .box1{animation: changebox1 30s infinite; -webkit-animation: changebox1 30s infinite;}
.noscript_story_slider .box2{animation: changebox2 30s infinite; -webkit-animation: changebox2 30s infinite;}
.noscript_story_slider .box3{animation: changebox3 30s infinite; -webkit-animation: changebox3 30s infinite;}
.noscript_story_slider .box4{animation: changebox4 30s infinite; -webkit-animation: changebox4 30s infinite;}
.noscript_story_slider .box5{animation: changebox5 30s infinite; -webkit-animation: changebox5 30s infinite;}
@keyframes changebox1 {
  0%{z-index: 1;}
  20%{z-index: 1;}
  40%{z-index: 0;}
  60%{z-index: 0;}
  80%{z-index: 0;}
  100%{z-index: 0;}
}
@-webkit-keyframes changebox1 {
  0%{z-index: 1;}
  20%{z-index: 1;}
  40%{z-index: 0;}
  60%{z-index: 0;}
  80%{z-index: 0;}
  100%{z-index: 0;}
}
@keyframes changebox2 {
  0%{z-index: 0;}
  20%{z-index: 0;}
  40%{z-index: 1;}
  60%{z-index: 1;}
  80%{z-index: 0;}
  100%{z-index: 0;}
}
@-webkit-keyframes changebox2 {
  0%{z-index: 0;}
  20%{z-index: 0;}
  40%{z-index: 1;}
  60%{z-index: 1;}
  80%{z-index: 0;}
  100%{z-index: 0;}
}
@keyframes changebox3 {
  0%{z-index: 0;}
  20%{z-index: 0;}
  40%{z-index: 0;}
  60%{z-index: 1;}
  80%{z-index: 1;}
  100%{z-index: 0;}
}
@-webkit-keyframes changebox3 {
  0%{z-index: 0;}
  20%{z-index: 0;}
  40%{z-index: 0;}
  60%{z-index: 1;}
  80%{z-index: 1;}
  100%{z-index: 0;}
}
@keyframes changebox4 {
  0%{z-index: 0;}
  20%{z-index: 0;}
  40%{z-index: 0;}
  60%{z-index: 0;}
  80%{z-index: 1;}
  100%{z-index: 1;}
}
@-webkit-keyframes changebox4 {
  0%{z-index: 0;}
  20%{z-index: 0;}
  40%{z-index: 0;}
  60%{z-index: 0;}
  80%{z-index: 1;}
  100%{z-index: 1;}
}
@keyframes changebox5 {
  0%{z-index: 1;}
  20%{z-index: 0;}
  40%{z-index: 0;}
  60%{z-index: 0;}
  80%{z-index: 0;}
  100%{z-index: 1;}
}
@-webkit-keyframes changebox5 {
  0%{z-index: 1;}
  20%{z-index: 0;}
  40%{z-index: 0;}
  60%{z-index: 0;}
  80%{z-index: 0;}
  100%{z-index: 1;}
}
/*20181016#學習故事noscript用 End*/

/*20200717#_新增*/
.cube_list{
	width: 100%;
}
@media screen and (max-width:1100px) {
	.cube_list{
		margin: 0 0 15px 0;
	}
}
.cube_list a{
	width: calc(25% - 4px);
	display: inline-block;
}
.cube_list a .cube_box{
	width: 100%;
	padding-bottom: calc(25% - 50px);
	display: inline-block;
	background: #218153;
	text-align: center;
	margin: 0 0 4px 0;
	-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
}
.cube_list a.color1 .cube_box{
	background: #218153;
}
.cube_list a.color2 .cube_box{
	background: #39867a;
}
.cube_list a .cube_box img{
	max-width: 70px;
	width: 50%;
	margin: 20px 0 0 0;
}
.cube_list a .cube_box .title{
	font-size: 1.2em;
	font-weight: bold;
	color: #fff;
	margin: 10px 0 20px 0;
}
@media screen and (max-width:460px) {
	.cube_list a .cube_box .title{
		font-size: 1em;
	}
}
@media screen and (max-width:360px) {
	.cube_list a .cube_box img{
		margin: 10px 0 0 0;
	}
	.cube_list a .cube_box .title{
		font-size: 0.8em;
		margin: 5px 0 10px 0;
	}
}

/*20250623-新增*/
/*****************************************/
.map-column{
  background-color: #e9f5ff;
}
.map-column nav{
  position: relative;
}
button#menu-suplist{
  position: relative;
  background-color: #163159;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  margin: 10px;
  padding: 0.25em 0.5em;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: calc(100% - 20px);
  text-align: left;
  font-size: 1.05rem;
}
button#menu-suplist span.status{
  position: absolute;
  right: 0.5em;
  top: 0.35em;
  background-color: #ffffff;
  color: #000000;
  border-radius: 2px;
  width: 2.5em;
  display: block;
  text-align: center;
  font-size: 1rem;
}
/* 子選單預設隱藏 */
.map-column .sub-menu{
  position: absolute;
  margin: 0;
  padding: 0.5em;
  list-style: none;
  top: 100%;
  left: 10px;
  background: #fff;
  border-radius: 15px;
  width: calc(100% - 20px);
  text-align: left;
  white-space: nowrap;
  display: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 2;
  font-weight: 400;
}
.map-column .sub-menu a{
  display: block;
  padding: 10px 0.5em;
  text-decoration: none;
  border-bottom: 1px solid #aaaaaa;
  color: #000000;
}
.map-column .sub-menu a:hover{
  background-color: #ffffcc;
}
.map-column .sub-menu a[target="_blank"] {
  position: relative;
}
.map-column .sub-menu a[target="_blank"]::after {
  content: "";
  position: absolute;
  right: 0.25em;
  top: 0.5em;
  opacity: 0.66;
  display: block;
  width: 0.6em;
  height: 0.6em;
  background-image: url(../style/icon_button_link_black.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
button#menu-suplist-close{
  display: block;
  padding: 6px 10px;
  margin: 0.25em auto;
  border-radius:5px;
  border: none;
  color: #000000;
  background-color: #dddddd;
  appearance:none;
  -moz-appearance:none; /* Firefox */
  -webkit-appearance:none; /* Safari 和 Chrome */
  font-family: "Microsoft JhengHei", "PingFang TC", "Heiti TC", "黑體", sans-serif;
  font-size: 0.8em;
}
/*****************************************/