@charset "utf-8";
/*small banner column_media_link*/
.column_media_link{width: 100%; margin: 20px auto 0px auto; text-align: center; overflow: hidden; display: block;}
.column_media_link .column_media{width: 32%; display: inline-block; }
.column_media_link .column_media img {width: 100%; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
@media screen and (max-width:1100px) { .column_media_link{max-width: 730px;}}
@media screen and (max-width:640px) { .column_media_link{width: 97%;}.column_media_link .column_media{width: 100%;}}
/*list*/
.list_column{
	clear:both;
	margin:30px auto 5px auto;
	background-color: rgba(255, 255, 255, 0.8);
	max-width:1060px;
	height: fit-content;
	overflow:hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 0px 5px rgba(0,0,0,0.35);
	-moz-box-shadow: 0 0px 5px rgba(0,0,0,0.35);
	box-shadow: 0 0px 5px rgba(0,0,0,0.35);
}
.list_column2{
	height: fit-content;
	margin:0 auto 20px auto
}
.list_column .show_column{
	float:left;
	width:100%;
	overflow:hidden;
	padding:0;
}
.list_column .show_column .prev{
	float:left;
	display:block;
	background:var(--list_column_show_column_prev);
	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 .show_column .next{
	float:right;
	display:block;
	background:var(--list_column_show_column_next);
	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 .show_column .prev:hover{
	background-position:0 0;
}
.list_column .show_column .next:hover{
	background-position:-25px 0;
}

.list_column .show_column .warp,
.list_column .show_column .warp2{
	float:left;
	width:100%;
	margin:20px 0 0 0;
}
.list_column .show_column .warp .box,
.list_column .show_column .warp2 .box{
	float: left;
	width:320px;
	padding: 0;
	margin:0 5px 0 5px;
	display: block;
}
.list_column .show_column .warp .box .pic,
.list_column .show_column .warp2 .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;
}
.list_column .show_column .warp .box .pic img,
.list_column .show_column .warp2 .box .pic img{
	width:100%;
	height:240px;
}
.list_column .show_column .warp .box .date,
.list_column .show_column .warp2 .box .date{
	clear:both;
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.875em;
	color:var(--theme_master_color);
	margin:0 0 6px 5px;
}
.list_column .show_column .warp .box .title,
.list_column .show_column .warp2 .box .title{
	clear:both;
	width:95%;
	font-size:1.1em;
	color:#000;
	margin:0 0 10px 5px;
}
.list_column .show_column .warp .box .info,
.list_column .show_column .warp2 .box .info{
	clear:both;
	width:95%;
	font-size:1em;
  line-height: 1.3em;
	color:#444;
	margin:0 0 10px 5px;
}
.list_column .show_column .warp .box .title a,
.list_column .show_column .warp2 .box .title a,
.list_column .show_column .warp .box .info a,
.list_column .show_column .warp2 .box .info a{
	color: #444;
	font-weight: bold;
}
.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{
	float:left;
	margin:36px 0 0 20px;
	min-height:700px;
}
.column_right{
	float:right;
	margin:36px 20px 0 0;
	background:#FFF;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 0px 5px rgba(0,0,0,0.35);
	-moz-box-shadow: 0 0px 5px rgba(0,0,0,0.35);
	box-shadow: 0 0px 5px rgba(0,0,0,0.35);
}
.column_calendar{
	clear:both;
	margin:20px 0;
	width:100%;
	max-width:1050px;
	margin:0 auto;
}
.course_list_mode{
	clear:both;
	margin:20px 0;
	width:100%;
	margin:0 auto;
}
/* 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{
	margin:0 0 0 1px;
}
.fotorama__html .title{
	position:absolute;
	bottom:0px;
	height:30px;
	width:100%;
	color:#FFF;
	font-size:0.938em;
	line-height:30px;
	background-color: rgba(0, 0, 0, 0.7);
	padding:0 10px;
}

/*links_tab*/
.links_tab {
	display:block;
	clear:both;
	width:1060px;
	text-align:center;
	margin:30px auto;
	overflow:hidden;
	background:#FFF;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 0px 5px rgba(0,0,0,0.35);
	-moz-box-shadow: 0 0px 5px rgba(0,0,0,0.35);
	box-shadow: 0 0px 5px rgba(0,0,0,0.35);
}
.links_tab ul{
    width: 98%;
    text-align: center;
    border-bottom: 1px solid var(--theme_master_color);
    margin: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: left;
	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;
}
/*link*/
.link_box{
	float:left;
	width:157px;
	height:57px;
	margin:0 3px 10px 3px;
	border:1px solid #ccc;
} 
.link_box img{
	width:155px;
	height:55px;
}
/**/

@media screen and (max-width:1100px) {
	.list_column{
		width:95%;
		max-width:700px;
		margin:20px auto 20px auto;
	}
	.list_column .show_column{
		margin:0 0 10px 18px;
	}
	.list_column .show_column .prev{
		display:none !important;
	}
	.list_column .show_column .next{
		display:none !important;
	}
	.column_left,
	.column_calendar{
		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;
	}
	.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:680px) {
	.list_column .show_column{
		margin:0 0 10px 8px;
	}
}

/*service_tab*/
.column_news ul.tabs {
	width:98%;
	text-align:center;
	border-bottom:1px solid var(--theme_master_color);
	margin:0 auto 15px auto;
}
.column_news ul.tabs li {
	display:inline-block;

	line-height: 32px;
	margin:0 10px 0 10px;
}
.column_news ul.tabs li a {
	display: block;
	padding: 0 2px;
	color: #777;
	text-decoration: none;
}
.column_news ul.tabs li a:hover{
	color:#222;
}
.column_news ul.tabs li.active{
	border-bottom:3px solid var(--theme_master_color);
}
.column_news ul.tabs li.active a{
	color:var(--theme_master_color);
	font-weight:bold;
	font-size:1.125em;
}
li.ui-tabs-tab.ui-corner-top.ui-state-default.ui-tab.ui-tabs-active.ui-state-active {
    border-bottom: 2px solid var(--theme_master_color);
}
div.tab_container {
	clear: left;
	width:98%;
	text-align:left;
	padding:0;
	margin:0 auto;
}
div.tab_container .tab_info {
	padding:0;
	overflow:hidden;
}
/*額外設定*/
.caroufredsel_wrapper{
	float:none !important;
	margin:20px auto !important;
}
@media screen and (max-width:1100px) {
	.caroufredsel_wrapper{
		float:keft !important;
		margin:20px 0 0 0 !important;
	}
}