@charset "utf-8";
.comingsoon{
 	width:100%;
	text-align:center;
	margin:100px 0;
}
.comingsoon dt{
	font-size: 8vmin;
	color: #CCC;
	font-style: italic;
	font-weight: bold;
	line-height:2;
}
.comingsoon dd{
	font-size:1.8vmin;
	color:#CCC;
}
.html_editer ul, .html_editer ol{
	margin-left:1.5em}
	
.html_editer table td, .html_editer table th{
	padding:5px 8px;
	border:1px solid #999;
	text-align:left;}
	
.html_editer table th{
	font-weight:bold;
	background-color:#c3e4dd}		

.in_main{
	width:100%;
	height:210px;
	overflow:hidden;
	position:relative;
	text-align:center}
	
.in_main .main_img{
	width: 100%;
    height: 100%;
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    -webkit-transform: scale(1);
    transform: scale(1);
    left: 0;
    top: 0;
    z-index: 1;
	-webkit-animation-name: zoomOut1;
    animation-name: zoomOut1;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;}

@-webkit-keyframes zoomOut1{
	0%{-webkit-transform:scale(1.2);transform:scale(1.2); }
	100%{-webkit-transform:scale(1);transform:scale(1); }
	}	
@keyframes zoomOut1{
	0%{-webkit-transform:scale(1.2);transform:scale(1.2)}
	100%{-webkit-transform:scale(1);transform:scale(1)}
	}



@media screen and (max-width: 1500px) {
.in_main .main_img{
	-webkit-animation-name: left_right;
    animation-name: left_right;
    -webkit-animation-duration: 100s;
    animation-duration: 100s;
    -webkit-animation: left_right 100s infinite  linear;
    -webkit-animation-fill-mode: both;
    animation: left_right 100s infinite linear;
    animation-fill-mode: both;
	}	
 }
 
 @media screen and (max-width: 780px) {
.in_main .main_img{
	-webkit-animation-name: left_right;
    animation-name: left_right;
    -webkit-animation-duration: 130s;
    animation-duration: 130s;
    -webkit-animation: left_right 130s infinite  linear;
    -webkit-animation-fill-mode: both;
    animation: left_right 130s infinite linear;
    animation-fill-mode: both;
	}	
 }
 
 @media screen and (max-width: 480px) {
.in_main .main_img{
	-webkit-animation-name: left_right;
    animation-name: left_right;
    -webkit-animation-duration: 160s;
    animation-duration: 160s;
    -webkit-animation: left_right 160s infinite  linear;
    -webkit-animation-fill-mode: both;
    animation: left_right 160s infinite linear;
    animation-fill-mode: both;
	}	
 } 
	
@-webkit-keyframes left_right{
	0%{background-position: left bottom; }
	50%{background-position: right bottom;}
	100%{background-position: left bottom;}
	}	
@keyframes left_right{
	0%{background-position: left bottom; }
	50%{background-position: right bottom;}
	100%{background-position: left bottom;}
	}	

 

 
.in_main h2{
	display: inline-block;
    margin: 0 auto;
    color: #fff;
    position: relative;
    padding-left: 100px;
    z-index: 2;
    text-align: left;
    margin-top: 58px;}
	
.in_main h2:before{
	content: '';
    display: block;
    width: 90px;
    height: 77px;
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: calc(50% - 38.5px);}
	
	

	
.in_main h2.news:before{
	background-image:url(../images/icon/in-main-icon-news.svg);
	background-image:url(../images/icon/in-main-icon-news.png) \9;
	*background-image:url(../images/icon/in-main-icon-news.png)
}

.in_main h2.about:before{
	background-image: url(../images/icon/in-main-icon-about.svg);
	background-image:url(../images/icon/in-main-icon-about.png) \9;
	*background-image:url(../images/icon/in-main-icon-about.png)
}

.in_main h2.teacher:before{
	background-image: url(../images/icon/in-main-icon-mans.svg);
	background-image:url(../images/icon/in-main-icon-mans.png) \9;
	*background-image:url(../images/icon/in-main-icon-mans.png)
}
		
.in_main h2.recruit:before{
	background-image: url(../images/icon/in-main-icon-joinstudy.svg);
	background-image:url(../images/icon/in-main-icon-joinstudy.png) \9;
	*background-image:url(../images/icon/in-main-icon-joinstudy.png)
}

.in_main h2.study:before{
	background-image: url(../images/icon/in-main-icon-class.svg);
	background-image:url(../images/icon/in-main-icon-class.png) \9;
	*background-image:url(../images/icon/in-main-icon-class.png)
}

.in_main h2.student:before{
	background-image: url(../images/icon/in-main-icon-students.svg);
	background-image:url(../images/icon/in-main-icon-students.png) \9;
	*background-image:url(../images/icon/in-main-icon-students.png)
}	

.in_main h2.activity:before{
	background-image: url(../images/icon/in-main-icon-actives.svg);
	background-image:url(../images/icon/in-main-icon-actives.png) \9;
	*background-image:url(../images/icon/in-main-icon-actives.png)
}

.in_main h2.web:before{
	background-image: url(../images/icon/in-main-icon-web.svg);
	background-image:url(../images/icon/in-main-icon-web.png) \9;
	*background-image:url(../images/icon/in-main-icon-web.png)
}		

.in_main h2 strong{
	display:block;
	font-size:5em;
	line-height:1;
	text-transform:uppercase;
	margin:0
	}
	
.in_main h2 span{
	display:block;
	margin-top:5px;
	font-size:2.5em;
	line-height:1}			

.in_main h2 .lineL{
	padding-left:15px;
	border-left:4px solid rgba(255,255,255,0.5);}

@media screen and (max-width: 480px) {
.in_main {
     height: 180px;
 }	
.in_main h2{
     padding-left: 70px;
	 margin-top:50px
 }
	
.in_main h2:before{
    width: 75px;
    height: 55px;
    top: calc(50% - 30px);}
	
	.in_main h2 strong {
    font-size: 3em;
}

.in_main h2 span {
    font-size: 2em;
 }	
.html_editer table td, .html_editer table th {
    padding: 5px 4px;}	
}
@media screen and (max-width: 380px) {
.html_editer table{
	font-size:85%}
.html_editer table td, .html_editer table th {
    padding: 5px 2px;}	
		
	}

.zoomOut-opt {
    -webkit-animation-name: zoomOut-opt;
    animation-name: zoomOut-opt;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}


@-webkit-keyframes zoomOut-opt{
	  0%{ transform:scale(4); opacity:0; }
	  60%{ transform:scale(4); opacity:0}
	  90%{ transform:scale(0.9);}
	100%{ transform:scale(1); opacity:1}
	}
@keyframes zoomOut-opt{
	  0%{ transform:scale(4); opacity:0}
	  60%{ transform:scale(4); opacity:0}
	  90%{ transform:scale(0.9);}
	100%{ transform:scale(1); opacity:1}	
	}

.webadd{
	background-color:rgba(0,0,0,0.3);
	color:#fff;
	line-height:34px;
	height:34px;
	position:relative;
	margin-top:-34px;
	z-index:2;}
	
.webadd a{
	display:inline-block;
	vertical-align:middle;
	font-size:1.4em;
	color:#fff;}
	
.webadd a:after{
	content:'';
	display:inline-block;
	vertical-align: middle;
	height:15px;
	width:30px;
	background:url(../images/icon/next.png) center no-repeat;
	background-size:contain;
	opacity:0.5;
	margin-top:-1px
	}		

.webadd a.home{
	padding-left:24px;
	background:url(../images/web-add-home.svg) left center no-repeat;
	background-size: auto 14px}

.webadd a:hover, .webadd a:focus{
	color:#fff468}

.in_body{
	padding:60px 0;
	}
	
.in_body.morebg, .in_body{
	background:url(../images/dot-bg.jpg)}
	
aside.smenu{
	width:230px;
	float:left;
	display:block}
	
aside.smenu h2{
	display:block;
	position:relative;
	height:143px;
	padding-top:90px;
	box-sizing:border-box;
 	background: rgb(0,144,120);
	background:  linear-gradient(135deg, rgba(0,0,0,0) 30px, rgba(0,144,120,1) 30px);
	background-size: auto;
	font-size:3em;
	text-align:center}
	
aside.smenu h2:before{
	content:'';
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:0;
	background-image:url(../images/snav-head.png);
	background-position:left top;
	background-size: auto 130%;
	background-repeat:no-repeat
	}	

aside.smenu h2:after{
	content:'';
	display:block;
	width:60px;
	height:55px;
	position:absolute;
	left:50%;
	margin-left:-30px;
	top:23px;
	background-position:center;
	background-repeat:no-repeat;
	background-size:contain}
	
aside.smenu h2.ST_news:after{
	background-image:url(../images/icon/in-main-icon-news.svg);
	background-image:url(../images/icon/in-main-icon-news.png) \9;
	*background-image:url(../images/icon/in-main-icon-news.png)
	}	
	
aside.smenu h2.ST_about:after{
	background-image: url(../images/icon/in-main-icon-about.svg);
	background-image:url(../images/icon/in-main-icon-about.png) \9;
	*background-image:url(../images/icon/in-main-icon-about.png)
	}
	
aside.smenu h2.ST_staff:after{
	background-image: url(../images/icon/in-main-icon-mans.svg);
	background-image:url(../images/icon/in-main-icon-mans.png) \9;
	*background-image:url(../images/icon/in-main-icon-mans.png)
	}			
	

aside.smenu h2.ST_join:after{
	background-image: url(../images/icon/in-main-icon-joinstudy.svg);
	background-image:url(../images/icon/in-main-icon-joinstudy.png) \9;
	*background-image:url(../images/icon/in-main-icon-joinstudy.png)
	}		
aside.smenu h2.ST_study:after{
	background-image: url(../images/icon/in-main-icon-class.svg);
	background-image:url(../images/icon/in-main-icon-class.png) \9;
	*background-image:url(../images/icon/in-main-icon-class.png)
	}
aside.smenu h2.ST_student:after{
	background-image: url(../images/icon/in-main-icon-students.svg);
	background-image:url(../images/icon/in-main-icon-students.png) \9;
	*background-image:url(../images/icon/in-main-icon-students.png)
	}	
	
aside.smenu h2.ST_active:after{
	background-image: url(../images/icon/in-main-icon-actives.svg);
	background-image:url(../images/icon/in-main-icon-actives.png) \9;
	*background-image:url(../images/icon/in-main-icon-actives.png)
	}
	
aside.smenu h2.ST_web:after{
	background-image: url(../images/icon/in-main-icon-web.svg);
	background-image:url(../images/icon/in-main-icon-web.png) \9;
	*background-image:url(../images/icon/in-main-icon-web.png)
	}			
					
aside.smenu h2 .open_btn{
	width:30px;
	height:30px;
	display:block;
	border:0;
	background-image: url(../images/icon/close-btn.svg);
	background-image:url(../images/icon/close-btn.png) \9;
	*background-image:url(../images/icon/close-btn.png);
	background-position:center;
	background-repeat:no-repeat;
	background-size:99%;
	position:absolute;
	right:10px;
	top:calc(50% - 15px);
	transition:all 0.5s;
	background-color:transparent;
	display:none;
	transform:rotate(45deg);
	cursor:pointer;
	border-radius:50%;
	overflow:hidden;
  	}
	
aside.smenu.open h2 .open_btn{
	transform:rotate(0deg)}
	
aside.smenu nav{
	display:block;
	box-sizing:border-box;
	border:1px solid #65bcae;
	background-color:#fff}	
	

	
aside.smenu a{
	display:block;
	border-bottom:1px solid #bfbfbf;
	padding:15px 18px;
	font-size:2em;
	color:#000;
	line-height:1.3;
	background-color:#fff;}	
aside.smenu nav a:last-child{
	border-bottom:0}	
		
aside.smenu a:hover, aside.smenu a:focus{
	background-color:#005942;
	color:#fff;
	font-weight:bold;
	background-image:url(../images/icon/right-w.png);
	background-position:calc(100% - 10px) center;
	background-size:auto 20px;
	background-repeat:no-repeat}
	
aside.smenu nav a.unit-now{
	background-color:#65bcae;
	color:#fff;
	font-weight:bold;
	background-image:url(../images/icon/right-w.png);
	background-position:calc(100% - 10px) center;
	background-size:auto 20px;
	background-repeat:no-repeat}
	
aside.smenu nav a.unit-now:hover{
	background-color:#005942;
	}
		
article#data{
	display:block;
	width:calc(100% - 230px);
	padding-left:40px;
	box-sizing:border-box;
	float:left}

@media screen and (max-width: 990px) {
aside.smenu nav{
	display:none} 
	
aside.smenu h2 .open_btn{
	display:block}	
	
aside.smenu{
	width:100%;
	float: none;
 }	
 
article#data{
 	width:100%;
	padding-left:0;
 	float: none;
	margin-top:30px}
	
aside.smenu h2{
	height: auto;
	padding:20px 10px;
	padding-left:80px;
  	background: rgb(0,144,120);
	background:  linear-gradient(135deg, rgba(0,0,0,0) 15px, rgba(0,144,120,1) 15px);
	font-size:2.5em;
	text-align: left}
	
aside.smenu h2:after {
     width: 40px;
    height: 30px;
    position: absolute;
    left: 25px;
    margin-left:0;
    top: calc(50% - 15px);
 }
 
 		
	
}


@media screen and (min-width: 991px) {
aside.smenu nav{
	display: block !important;
 	}
 }

/*data*/
#data.morebg{
	}
#data hgroup h2.tit{
	font-size:3.5em;
	font-weight:bold;
	line-height:1;
	padding-left:10px;
	border-left:5px solid #41ae97;
	float:left;
	margin-bottom:10px;
	padding-right:10px;}
@media screen and (max-width: 768px) {
#data hgroup h2.tit{
	font-size:2.5em;}	
}


#data hgroup .k_search{
	float:right;
	width:295px;
	max-width:100%;
	height:44px;
	box-sizing:border-box}
	
#data hgroup .k_search.set2{
 	width:400px;
	}	
	

#data hgroup .k_search .keyword{
 	box-sizing: border-box;
    width: calc(100% - 42px);
     border: 0;
    box-sizing: border-box;
		border:1px solid #ccc;
		border-right:0;
    display: block;
    font-size: 1.7em;
    color: #000 !important;
	height:42px;
     padding: 10px;
	font-family:"微軟正黑體", Arial;
    float: left;}
	

	
	
#data hgroup .k_search .keyword:hover, #data hgroup .k_search .keyword:focus{
	background-color:#ffc}

#data hgroup .k_search .keyword[placeholder], 
#data hgroup .k_search .keyword::placeholder, 
#data hgroup .k_search .keyword::-webkit-input-placeholder,
#data hgroup .k_search .keyword::-moz-placeholder,
#data hgroup .k_search .keyword:-ms-input-placeholder{
	color:#000 !important;
	font-family:"微軟正黑體", Arial;
	 }
	
#data hgroup .k_search	.search{
	width:42px; font-size:0;
	height:42px;
	border:0;
	background-position:center;
	background-repeat:no-repeat;
	background-image: url(../images/icon/search-btn-w.svg);
	background-image: url(../images/icon/search-btn-w.png) \9;
	*background-image: url(../images/icon/search-btn-w.png);
	background-color:#41ae97;
	background-size:21px auto;
	float:right;
	cursor:pointer}

@media screen and (max-width: 600px) {
#data hgroup .k_search{
	float: left;
	margin-top:15px;
	width:100%;
 }
#data hgroup .k_search.set2{
 	width:100%;
	}		
}

	
#data hgroup .k_search	.search:hover, 
#data hgroup .k_search .search:focus{
	background-color:#256057}	

#data ul.list{
	list-style:none;
	display:block;
	margin-top:15px;
	width:calc(100% + 16px);
	margin-left:-8px;
	margin-right:-8px;}
	
#data ul.list li{
	display:block;
	width:calc(100% / 3);
	float:left;
	box-sizing:border-box;
	padding:8px}


#data ul.list li a{
	position:relative;
	display:block;
	box-sizing:border-box;
	padding:14px;
	background-color:#fff;
	height:253px;
 	box-shadow:1px 1px 6px rgba(0,0,0,0.3)}
	
#data ul.list li a:hover{
	border:1px solid #41ae97}
	
#data ul.list li a .z_box .z_img{
	padding-bottom:0;
	height:153px}
	
#data ul.list li a.new:after {
    position: absolute;
    content: '';
    width: 26px;
    height: 23px;
    right: 21px;
    top: 11px;
    background-image: url(../images/icon/new.svg);
    background-image: url(../images/icon/new.png) \9;
    *background-image: url(../images/icon/new.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
}

#data ul.list li a p{
	color:#000;
	font-size:1.6em;
	line-height:1.25;
	margin-top:11.6px;
	margin-bottom:9px;
	display:block;
	max-height:40px}
	
#data ul.list li a time{
	display:block;
	color:#417133;
	font-size:1.3em}	
	
@media screen and (max-width: 730px) {
#data ul.list li{
 	width:calc(100% / 2);
 }	
	
}
@media screen and (max-width: 380px) {
#data ul.list li{
 	width:100%;
 }	
 
#data ul.list li a .z_box .z_img{
	padding-bottom:56.6%;
	height:0} 
	
#data ul.list li a{
	height:auto}	
	
}	

/*詳細 more page*/	

#data .more_FBG{
	background:#fff;
	box-shadow:1px 1px 6px rgba(0,0,0,0.25);
	margin-top:16px;
	padding:40px;
	box-sizing:border-box}
	
@media screen and (max-width: 480px) {
#data .more_FBG{
 	padding:20px;
 }	
	}	
	
@media screen and (max-width: 380px) {
#data .more_FBG{
	padding:7%;}	
	
	}	
.data_page{
	float:right;
	text-align:right;}	
	
.data_page a{
	display:inline-block;
	width:35px;
	height:35px;
	margin-left:8px;
	font-size:0;
	background-color:rgba(140,140,140,0.5);
	background-position:center;
	background-repeat:no-repeat;
	background-size:contain}	
	
.data_page a:hover, .data_page a:focus{
	background-color:rgba(65,171,148,0.5)}	
	
.data_page a.prev{
	background-image: url(../images/icon/page-prev.svg);
	background-image: url(../images/icon/page-prev.png) \9;
	*background-image: url(../images/icon/page-prev.png);}	
	
.data_page a.next{
	background-image:url(../images/icon/page-next.svg);
	background-image:url(../images/icon/page-next.png) \9;
	*background-image:url(../images/icon/page-next.png);}		
	
.more_FBG h3.title{
	color:#41ab94;
	font-size:3em;
	font-weight:bold;
 	line-height:1.3;
	margin-bottom:8px}

select.opt{
	height:35px;
	width:150px;
	border:1px solid #ccc;
	line-height:35px;
	padding:0 10px;
	padding-right:40px;
	background-image: url(../images/icon/ar-V.svg);
	background-image: url(../images/icon/ar-V.png) \9;
	*background-image: url(../images/icon/ar-V.png);
	background-position:center right;
	background-repeat:no-repeat;
	background-size:contain;
	font-size:15px;
	float:right}
	
select.opt:focus{
	background-color:#FFC;
	background-image: url(../images/icon/ar-V-on.svg);
	background-image: url(../images/icon/ar-V-on.png) \9;
	*background-image: url(../images/icon/ar-V-on.png);
	}	


#data hgroup .k_search.set2 .keyword{
	width: calc(50% - 42px);}
	
#data hgroup .k_search.set2 select.opt{
	width:calc(50% - 5px);
	float:left;
	margin-right:4px;
	height:42px;
	line-height:42px;
	font-family:微軟正黑體;
	} 
@media screen and (max-width: 480px) {
	.more_FBG h3.title{
 	font-size:2.2em;
 }
		}
@media screen and (max-width: 380px) {
select.opt, #data hgroup .k_search.set2 select.opt{
	width:100%; margin-right:0;
	float:none	
	
}
#data hgroup .k_search.set2 select.opt{
	margin-bottom:10px}
#data hgroup .k_search.set2 .keyword{
	width: calc(100% - 42px);
	float: left}
	
#data hgroup .k_search.set2{
	height:auto}	
	
}	
.more_FBG ul.data_label{
	display:block;
	list-style:none;
	padding-bottom:8px;
	border-bottom:2px solid #41ab94;
	margin-bottom:30px;}
	
.more_FBG ul.data_label li{
	display:inline-block;
	font-size:1.3em;
	color:#8c8c8c;
	padding-left:18px;
	background-position:left center;
	line-height:1;
	background-repeat:no-repeat;
	background-size:13px;
	margin-right:10px;
	margin-bottom:8px}
	
.more_FBG ul.data_label li:last-child{
	margin-right:0}		
	
.more_FBG ul.data_label li.icon_1{
	background-image:url(../images/icon/in-more-sicon-time.png);}		
	
.more_FBG ul.data_label li.icon_2{
	background-image: url(../images/icon/in-more-sicon-source.png);}	
	
.more_FBG ul.data_label li.icon_3{
	background-image: url(../images/icon/in-more-sicon-visited.png);}	

.more_FBG .html_editer{
	color:#4d4d4d;
	line-height:1.875;
	font-size:1.7em;}
		
.more_FBG .html_editer p{
	margin:15px 0;
 }
.more_FBG .html_editer .aboutimg{ text-align: center;}

.more_FBG .html_editer .aboutimg img{width: 70%;}

@media only screen and (max-width: 991px) {
    .more_FBG .html_editer .aboutimg img{width: 80%;}}
@media only screen and (max-width: 780px) {
    .more_FBG .html_editer .aboutimg img{width: 100%;}}
.more_FBG h3.icons{
	font-size:2em;
	color:#000;
	line-height:22px;
	height:22px;
	padding-left:36px;
	background-position: left center;
	background-repeat:no-repeat;
	background-size:contain;
	margin:16px 0;
	margin-top:40px}
	
.more_FBG h3.icons.icon_photo{
	background-image:url(../images/icon/tit-icon-photos.png);}	
	
.more_FBG h3.icons.icon_file{
	background-image: url(../images/icon/icon-files.png);}		 	
	
/* ----- pageBot ----- */
.pageBot {
 	width:100%;
 }
.pageBot .dn {
	color:#000;
	font-size:1.8em;
	font-weight:bold;
	padding:0;
	background-position: left center;
	background-repeat:no-repeat;
	background-image:url(../images/icon-download.svg); 
	background-image:url(../images/icon-download.png) \9;
	*background-image:url(../images/icon-download.png); 
	line-height:32px;
	padding-left:32px;
	float:left;
}
.dnTable {
	width:100%;
 	border-collapse:collapse;
}
.dnTable th {
	color:#000;
	font-size:1.5em;
	line-height:150%;
	padding:8px;
	border:0;
	background:#c6e6e1;
	vertical-align:middle;
	box-sizing:border-box;
	text-align:left
}
.dnTable th.w10 {width:14%;}
.dnTable th.w12 {width:15%;}
.dnTable td {
	color:#666;
	font-size:1.5em;
	line-height:150%;
	text-align: left;
	vertical-align:middle;
	padding:8px;
	border-bottom:1px solid #c9c9c9;
	word-break:break-all;
	box-sizing:border-box;
}
.dnTable tbody tr:nth-child(2) td{border-top:none;}
.dnTable td.file-name {
	color:#000;
	text-align:left;
	padding:8px;
	font-weight:bold;	
}
.dnTable td a {
	display:inline-block;
	width: auto;
	min-width:60px;
	line-height:21px;
	color:#FFF;
	padding:0px 5px;
	padding-left:23px;
	background-color:#41ab94;
	background-image:url(../images/icon/icon-download-btn.png);
	background-position:left center;
	background-repeat:no-repeat ;
	text-transform:uppercase;
	-webkit-border-radius: 15px;
	   -moz-border-radius: 15px;
			border-radius: 15px;
}
.dnTable td a:hover {background-color:#000;}
@media only screen and (max-width: 767px) {
	.dnTable tr {
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}
	.dnTable td {
		border: none;
	}
 	.dnTable td:nth-of-type(2) {
		float: left;
		padding: 2%;
		line-height:28px;
	}
	.dnTable td:nth-of-type(3) {
		float: left;
		padding: 2%;
		border-left: 1px dotted #CCC;
		border-right: 1px dotted #CCC;
		line-height:28px;
	}
	.dnTable td:nth-of-type(4) {
		float: right;
		padding:2% 3%;
		line-height:28px;
	}
	.dnTable td.file-name {
		float: left;
		width: 100%;
		*width: 96%;
		font-size: 16px;
		padding:3% 2% 2% 2%;
		border-bottom: 1px dotted #CCC;
		background: #ffffff;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		background-color:#dbefec
	}
	.dnTable th {
		display: none;
	}
}	

.back{
	margin-top:20px;
	text-align:center;
	 }
	
.back a{
	display:inline-block;
	padding:12px 17px;
	padding-right:23px;
	font-size:2em;
	color:#fff;
	font-weight:bold;
	background: rgba(0,0,0,0);
	background: linear-gradient(312deg, rgba(0,0,0,0) 10px, rgba(65,171,148,1) 10px);}	
	
.back a:hover, .back a:focus{
	background: rgba(0,0,0,0);
	background: linear-gradient(312deg, rgba(0,0,0,0) 10px, #000 10px);}	
	
.back a:after{
	content:'';
	display:inline-block;
	width:20px;
	height:20px;
	margin-left:8px;
	background:url(../images/icon/icon-back.png) center no-repeat;
	background-size:95%;
	vertical-align:middle;
	margin-top:-5px;
	transition:all 0.4s}
	
.back a:hover:after, .back a:focus:after{
	 
	margin-left:15px;
 }		



/*honor*/
#honor{
	padding:20px 0}
#honor .item{
	padding:0px 10px 10px 10px;
	text-align:center;
	box-sizing:border-box;
	display: inline-block;
	vertical-align:top;
 	width:calc(98% / 4);
	margin-bottom:12px}
	
#honor .item .z_box:after{
	background-image:none}	
	
@media only screen and (max-width: 767px) {
#honor .item{
	width:calc(98% / 3)}	
}
@media only screen and (max-width: 500px) {
#honor .item{
	width:calc(98% / 2)}	
}



#honor .item .man{
	display:inline-block;
	position:relative;
	width:100%;
	margin-bottom:12px;}
	
#honor .item .man.new:after{
	content:'N';
	display:block;
	width:23px;
	height:23px;
	position:absolute;
	z-index:2;
	right: calc(18% - 13px);
    top: calc(12% - 13px);
	background-color:#e11c24;
	color:#fff;
	font-weight:bold;
	line-height:23px;
	text-align:center;
	border-radius:50%;
	-webkit-animation-name: roten;
    animation-name: roten;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation: roten 3s infinite;
    -webkit-animation-fill-mode: both;
    animation: roten 3s infinite;
    animation-fill-mode: both;}	
	
	
@keyframes roten{
    0% { transform:rotate(0deg)}
   76% { transform:rotate(0deg)}
   78% { transform:rotate(-15deg)}	
   80% { bottom:rotate(0deg);}
   82% { transform:rotate(15deg)}
   84% { bottom:rotate(0deg);}
   86% { bottom:rotate(-15deg);}
   88% { bottom:rotate(0deg);}	
   90% { transform:rotate(-15deg)}	
   92% { bottom:rotate(0deg);}
   94% { transform:rotate(15deg)}
   96% { bottom:rotate(0deg);}
   98% { bottom:rotate(-15deg);}
   100% { bottom:rotate(0deg);}
}

@-webkit-keyframes roten{
    0% { transform:rotate(0deg)}
   76% { transform:rotate(0deg)}
   78% { transform:rotate(-15deg)}	
   80% { bottom:rotate(0deg);}
   82% { transform:rotate(15deg)}
   84% { bottom:rotate(0deg);}
   86% { bottom:rotate(-15deg);}
   88% { bottom:rotate(0deg);}	
   90% { transform:rotate(-15deg)}	
   92% { bottom:rotate(0deg);}
   94% { transform:rotate(15deg)}
   96% { bottom:rotate(0deg);}
   98% { bottom:rotate(-15deg);}
   100% { bottom:rotate(0deg);}
}	
	
	
	
#honor .item .man .z_box {
	border-radius:50%;}	
	
#honor .item .man .z_box .z_img{
	padding-bottom:100%;
	background-image: url(../images/no_pic_man.jpg);
	background-position:center top !important}	
	
#honor .name{
	display:block;
	font-size:1.8em;
	margin-bottom:10px;
	color:#41ab94;}
	
#honor .honor_info{
	display:block;
	font-size:1.4em;
	color:#808080}
/*list-line*/

ul.list-line{
	list-style:none;
	display:block;
	margin-top:20px;
	}
	
ul.list-line li{
	display:block;
	background-color:#fff;
	padding:0 25px;
	box-sizing:border-box
 	}
ul.list-line li a{
	display:block;
	padding:15px 0;
	box-sizing:border-box;
 	border-bottom:1px solid #ccc;
	}
	
ul.list-line li:last-child a{
	border-bottom:0}	
	
ul.list-line li a.more_detail, ul.list-line li a.more_list{
	padding-right:45px;
	background-size:30px auto;
	background-position: calc(100% - 8px) 15px;
	background-repeat:no-repeat;
	}
	
ul.list-line li a.more_detail{
	background-image:url(../images/icon/more_detail.svg);
	background-image:url(../images/icon/more_detail.png) \9;
	*background-image:url(../images/icon/more_detail.png);}	
	
ul.list-line li a.more_list{
	background-image: url(../images/icon/more_list.svg);
	background-image: url(../images/icon/more_list.png) \9;
	*background-image: url(../images/icon/more_list.png);}		
	
	
ul.list-line {
	border-top:2px solid #41ae97;
	border-bottom:2px solid #41ae97}	
	
ul.list-line li:first-child a{
	padding-top:20px;
	}
	
ul.list-line li:last-child a{
	padding-bottom:20px;
	}		
	
ul.list-line li:hover  {
	background-color:#e1fae9;
	padding-left:20px}	
		
ul.list-line li .icon_org{
	width:70px;
	height:70px;
	float:left;
 	background-position:center top;
	background-size: cover;
	background-image: url(../images/icon/icon-org-g.svg);
	background-image: url(../images/icon/icon-org-g.png) \9;
	*background-image: url(../images/icon/icon-org-g.png);
	position:relative
	}
@media only screen and (min-width: 321px) {	
ul.list-line li .new .icon_org:after{
    content: 'N';
    display: block;
    width: 23px;
    height: 23px;
    position: absolute;
    z-index: 2;
    right:-8px;
    top:-8px;
    background-color: #e11c24;
    color: #fff;
    font-weight: bold;
    line-height: 23px;
    text-align: center;
    border-radius: 50%;
    -webkit-animation-name: roten;
    animation-name: roten;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation: roten 3s infinite;
    -webkit-animation-fill-mode: both;
    animation: roten 3s infinite;
    animation-fill-mode: both;
	
	}
}
	
ul.list-line li a:hover .icon_org{
	background-image: url(../images/icon/icon-org.svg);
	background-image: url(../images/icon/icon-org.png) \9;
	*background-image: url(../images/icon/icon-org.png);
	opacity:0.5
	}			

ul.list-line.list-law li .icon_org{
 	background-image: url(../images/icon/icon-law-g.svg);
	background-image: url(../images/icon/icon-law-g.png) \9;
	*background-image: url(../images/icon/icon-law-g.png);
	}

ul.list-line.list-law li a:hover .icon_org{
	background-image: url(../images/icon/icon-law.svg);
	background-image: url(../images/icon/icon-law.png) \9;
	*background-image: url(../images/icon/icon-law.png);
 	}
	
	
ul.list-line.list-file li .icon_org{
 	background-image: url(../images/icon/icon-file-g.svg);
	background-image: url(../images/icon/icon-file-g.png) \9;
	*background-image: url(../images/icon/icon-file-g.png);
	}

ul.list-line.list-file li a:hover .icon_org{
	background-image: url(../images/icon/icon-file.svg);
	background-image: url(../images/icon/icon-file.png) \9;
	*background-image: url(../images/icon/icon-file.png);
 	}	
	
ul.list-line.list_join li .icon_org{
 	background-image: url(../images/icon/in-main-icon-joinstudy-g.svg);
	background-image:  url(../images/icon/in-main-icon-joinstudy-g.png) \9;
	*background-image:  url(../images/icon/in-main-icon-joinstudy-g.png);
	}

ul.list-line.list_join li a:hover .icon_org{
	background-image: url(../images/icon/in-main-icon-joinstudy-bk.svg);
	background-image: url(../images/icon/in-main-icon-joinstudy-bk.png) \9;
	*background-image:  url(../images/icon/in-main-icon-joinstudy-bk.png);
  	}			
 
ul.list-line.list_study li .icon_org{
 	background-image: url(../images/icon/in-main-icon-class-g.svg);
	background-image:  url(../images/icon/in-main-icon-class-g.png) \9;
	*background-image:  url(../images/icon/in-main-icon-class-g.png);
	}

ul.list-line.list_study li a:hover .icon_org{
	background-image: url(../images/icon/in-main-icon-class-bk.svg);
	background-image: url(../images/icon/in-main-icon-class-bk.png) \9;
	*background-image:  url(../images/icon/in-main-icon-class-bk.png);
  	}	
		
ul.list-line li h4{
	font-size:2em;
	color:#000;
	margin-bottom:8px;
	font-weight:bold}
	

	
ul.list-line li a:hover h4, ul.list-line li a:focus h4{
	color:#009078}	
	
	
ul.list-line li p{
	font-size:1.5em;
	color:#999;
	line-height:1.3;
	margin-bottom:8px}
	
ul.list-line li a .hg{
	width:calc(100% - 70px);
	box-sizing:border-box;
	padding-left:15px;
	float:left}
				
ul.list-line li a time{
	color: #693}
	
@media only screen and (max-width: 320px) {		
ul.list-line li a.new time:after{
	content:'N';
	display:inline-block;
	margin-left:5px;
	padding:3px 5px;
	font-size:0.7em;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
	background-color:#F30;
	vertical-align:middle;
	border-radius:50%;
	-webkit-animation-name: roten;
    animation-name: roten;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation: roten 3s infinite;
    -webkit-animation-fill-mode: both;
    animation: roten 3s infinite;
    animation-fill-mode: both;}
}
	
@media only screen and (max-width: 480px) {
ul.list-line li h4{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box  !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
    font-size: 1.7em;
    line-height: 1.2;}
	
ul.list-line li p{
	display:none}
	
ul.list-line li .icon_org{
	width:62px;
	height:62px;}
	
ul.list-line li a .hg{
	width:calc(100% - 62px);}				
	
}

@media only screen and (max-width: 320px) {
 
	
ul.list-line li .icon_org{
	display:none}
	
ul.list-line li a .hg{
	width:100%;
	padding-left:0}				
	
}

ul.list_dot{
	list-style:none;
	margin-left:0;
	display:block}
	
ul.list_dot li{
	display:block;
	padding-left:20px;
	background-position:left center;
	background-repeat:no-repeat;
	background-image: url(../images/avb-icon.svg);
	background-image: url(../images/avb-icon.png) \9;
	*background-image: url(../images/avb-icon.png);}	

/*業簽區*/
dl.info_man{
	display:block;
	margin-bottom:30px}

dl.info_man dt{
	display:block;
	width:168px;
	height: auto;
	float:left}
	
dl.info_man dt .z_box .z_img{
	padding-bottom:138%}	
	
dl.info_man dd{
	display:block;
	float:left;
	width:calc(100% - 168px);
	box-sizing:border-box;
	padding-left:20px;
	}
	




dl.info_man dd ul{
	list-style:none;
	display:block}	
	
dl.info_man dd ul li{
	display:block;
	margin-bottom:8px;
	padding-bottom:8px;
	padding-top:2px;
	border-bottom:1px dotted #41ae97;
	font-size:1.7em;
	line-height:1.33;
	padding-left:25px;
	background-image:url(../images/avb-icon.svg);
	background-image:url(../images/avb-icon.png) \9;
	*background-image:url(../images/avb-icon.png);
	background-position:left 3.5px;
	background-size:20px;
	background-repeat:no-repeat;
	}
	
dl.info_man dd h4{
	font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 13px;
    color: #41ae97;}			 

.tab-pane h3.tit_gre{
	color:#41ae97;
	font-size:2em;
	margin-bottom:20px;
	margin-top:40px;
	padding-bottom:12px;
	border-bottom:1px dotted #41ae97;
	display:block}
	
.tab-pane h3.tit_gre:first-child{
	margin-top:0}
	

@media only screen and (max-width: 580px) {
dl.info_man dt{
 	float: none}
 	
dl.info_man dd{
 	float: none;
	width:100%;
 	padding-left:0px;
	margin-top:12px
	}
	
dl.info_man dt  {
	margin:0 auto}
	
dl.info_man dd h4{
	text-align:center;
	margin-bottom:30px}	
}

/*Sitemap*/
ul.sitemap{
	display:block;
	list-style:none;
	width:calc(100% + 16px);
	margin-left:-8px;
	margin-right:-8px
	}
	
ul.sitemap > li{
	display:inline-block;
	width:calc(25% -  3px);
	vertical-align:top;
	padding:8px;
	box-sizing:border-box;
	margin-bottom:15px
 	}

@media only screen and (max-width: 900px) {
ul.sitemap > li{
 	width:calc(33.3% -  3px);
 
 	}	
	
}

@media only screen and (max-width: 600px) {
ul.sitemap > li{
 	width:calc(50% -  3px);
 
 	}	
	
}


@media only screen and (max-width: 450px) {
ul.sitemap > li{
 	width:calc(100% -  3px);
 
 	}	
	
}

ul.sitemap > li > a{
	display:block;
	box-sizing:border-box;
	padding:10px 15px;
	font-size:2em;
 	background: rgba(0,0,0,0);
    background: linear-gradient(225deg, rgba(0,0,0,0) 10px, rgba(65,171,148,1) 10px);
	font-weight:bold;
	color:#fff;
	}		

ul.sitemap > li > a:hover, ul.sitemap > li > a:focus{
	background: rgba(0,0,0,0);
    background: linear-gradient(225deg, rgba(0,0,0,0) 10px, rgba(0,144,120,1) 10px);}
	
ul.sitemap > li > ul{
	list-style:none;
	display:block;}	
	
ul.sitemap > li > ul > li{
	display:block;}	
	
ul.sitemap > li > ul > li > a{
	display:block;
	box-sizing:border-box;
	padding:10px 0px;
	font-size:1.6em;
	color:#333;
	border-bottom:1px solid #41ab94}
	
ul.sitemap > li > ul > li > a:hover, ul.sitemap > li > ul > li > a:focus{
	background-color:#D5EEE4;
	padding:10px 15px;
	font-weight:bold}			


.service_txt{
	margin-top:40px}
.service_txt p {
    text-indent: 2em;
    font-size: 1.7em;
    margin-bottom: 8px;
    line-height: 1.7;
}

.service_txt .stit {
    color: #65bcae;
    font-size: 2em;
    margin: 30px 0 10px 0;
    line-height: 1.7;
    clear: both;
    text-indent: 1em;
}

.service_txt > ul > li {
    font-size: 1.7em;
    list-style-type: disc;
    list-style-position: outside;
    margin-left: 2.4em;
    line-height: 1.7;
}

.service_txt > ol > li {
	font-size: 1.7em;
    list-style-type: decimal;
    list-style-position: outside;
    margin-left: 2.4em;
    line-height: 1.7;
	}
	
/*links*/
.links{
	width:calc(100% + 20px);
	margin-left:-10px;
	margin-right:-10px;}
	
.links .item{
	display:inline-block;
	vertical-align:top;
 	width:calc(25% - 4px);
	box-sizing:border-box;
	padding:10px;}	
	
@media only screen and (max-width: 1000px) {
.links .item{
 	width:calc(33.3% - 4px);
 }		
}

@media only screen and (max-width: 600px) {
.links .item{
 	width:calc(50% - 4px);
 }		
}

@media only screen and (max-width: 480px) {
.links .item{
 	width:calc(100% - 4px);
 }		
}
	
.links .item .z_img{
	padding-bottom:46.55%;
	}

.links .item .z_box:after{
	background-image: url(../images/icon/link.svg);
	background-image: url(../images/icon/link.png) \9;
	*background-image: url(../images/icon/link.png);
	background-size:40px}
	
.links .item p{
	display:block;
	margin:0;
	color:#41ab94}	

/*-----內頁常用連結-----*/	
ul#link{
	display: block;
	list-style:none;}
	
ul#link > li{
	display:block;
 	padding:15px 0;
	border-bottom:1px dashed #ccc;}
	
ul#link  a {
	color:#000;}
	
ul#link  a:hover, ul#link  a:focus{
	color:#41ab94}	
		
ul#link > li > a{
	display:block;
	font-size:1.8em;
	padding-left:45px;
	line-height:35px;
 	font-weight:bold;
	position:relative
	}
	
@media only screen and (max-width: 480px) {
ul#link > li > a{
 	font-size:1.6em;
 
	}	
}	
 	
ul#link > li > a:after{
	content:'';
	display:block;
	width:35px;
	height:35px;
	border-radius:50%;
	background-image:url(../images/icon/link.svg);
	background-image:url(../images/icon/link.svg) \9;
	*background-image:url(../images/icon/link.svg);
	background-position:center;
	background-size:90%;
	background-color:#65bcae;
	position:absolute;
	left:0;
	top:0;
	transition:all 0.5s}	
	
ul#link > li > a:hover:after, ul#link > li > a:focus:after{
	background-color:#007461;
	transform:rotate(90deg)}
	
ul#link > li > ol{
	display:block;
	list-style:none;
	margin-left:44px;}
	
ul#link > li > ol > li{
	display:block;
 	background-image:url(../images/avb-icon.svg) ;
	background-image:url(../images/avb-icon.svg) \9 ;
	*background-image:url(../images/avb-icon.svg) ;
	background-position:left 8px;
	background-repeat:no-repeat;
	padding:5px 0;
	padding-left:20px;
	}	
	
ul#link > li > ol > li > a{
	display:block;
	font-size:1.6em;
	line-height:1.3;
	font-weight:bold;
	color:#666}		
		
.dwred{color:#f44336}


.overs{
	overflow-x:scroll;}
.overs th, .overs td{
	min-width:100px;}
.overs .th_center{
	text-align:center !important;
	width:90px; vertical-align:middle;
	font-weight:bold;}
.html_editer .overs table th{
	vertical-align:middle;}