.in_main{ 
	height: 450px; background: url(../images/info-banner-bg.webp) center no-repeat; background-size: cover; color: #fff; position: relative;}


.in_main .page_tit{ 
	font-size: 8em; text-align: center; display: block; position: absolute; top: 50%; left: 0; width: 100%; 
	transform: translateY(calc(-50% - 30px)) scale(1); 
	line-height: 1; transition: all 0.5s; 
	transition-delay: 0.5s; 	
	-webkit-animation-name:zoomOut-opt;
	        animation-name:zoomOut-opt;
-webkit-animation-duration:1s ;
	    animation-duration:1s;}
  

@-webkit-keyframes zoomOut-opt{
	  0%{   opacity:0; margin-top: -10em }
	  60%{   opacity:0; margin-top: -10em }
	  90%{    margin-top: 0.3em }
	100%{   margin-top: 0 ; opacity:1}
	}
@keyframes zoomOut-opt{
	  0%{   opacity:0; margin-top: -10em }
	  60%{   opacity:0; margin-top: -10em }
	  90%{    margin-top: 0.3em }
	100%{   margin-top: 0 ; opacity:1}
	}




.in_main .web_add{ 
	position: absolute; bottom: 0; left: 0; width: 100%; height:60px; background: rgba(0,0,0,0.5); border-top:1px solid rgba(255,255,255,0.5);   
}

.in_main .web_add .link_go, .in_main .web_add span{ 
	display: inline-block; height: 59px; line-height: 59px; padding: 0 60px 0 35px; min-width: 200px; box-sizing: border-box; font-size:1.7em;	font-weight: bold; color: #fff; border-right: 1px solid rgba(255,255,255,0.5); text-align: left;
}
.in_main .web_add span{ padding-right: 35px}

.in_main .web_add .link_go{    background: url(../images/btn-next.svg) 100% center no-repeat;  background-size: 50px;
}
  
.in_main .web_add .i_homee{ 
    font-size: 0;
    min-width: 1em;
    width: 80px;
    background: url(../images/ico-home-w.svg) center no-repeat;
    height: 59px;
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-sizing: border-box;
    line-height: 1;
    vertical-align: top;
    background-size: 19px;}

.in_main .web_add a:hover, .in_main .web_add a:focus{ background-color: #000;}
.in_main .web_add .i_homee:hover, .in_main .web_add .i_homee:focus{ border-left: 1px solid rgba(255,255,255,0.5)}


.page_box{
	display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: Space-between; padding: 60px 0}

 


/** asideTitle **/
.smenu{ width: 290px}

#asideTitle {
	position:relative;
	display:flex;
	width:100%;
	height:100px;
	overflow:hidden;
	flex-wrap:wrap;
	background-color: #168254;
	border-radius: 0 20px 0 0;
}
#asideTitle:before {
    content:"";
    display:block;
    position:absolute;
    right: -12px;
	bottom:0;
    width:120px;
    height:125px;
	background:url(../images/snav_recycle.svg);
	background-size:contain;
	background-repeat: no-repeat;
}
#asideTitle h2 {
	display:flex;
	width:100%;
	color:#FFF;
 	font-size:2.5em;
	font-weight: 700;
	padding: 0 23px;
	text-align:left;
    justify-content:center;
    flex-direction:column;
 	z-index:1;
}
@media screen and (min-width:991px) {
	#asideTitle h2 {
		font-size:2.9em;
	}
}
@media screen and (min-width:1200px) {
	#asideTitle {
		height:120px;
	}
	#asideTitle:after {
		right:15px;
		width:41px;
		height:73px;
	}
	#asideTitle h2 {
		font-size:3.5em;
	}
}


/** asideMenu **/
#asideMenu {
	width:100%;
	background:#ececec;
	border-radius: 0 0 0 20px;
}
#asideMenu > ul {
	width:100%;
	list-style:none;
	padding: 20px;
	box-sizing: border-box;
}
#asideMenu > ul > li {
	width:100%;
	box-sizing: border-box;
}
#asideMenu > ul > li > a {
	position:relative;
	display:inline-block;
	width:100%;	
	color:#343538;
	font-size:2em;
	font-weight:bold;
	line-height:155%;
	padding:20px 40px 20px 20px;
	box-sizing:border-box;
	box-sizing: border-box;
}
#asideMenu > ul > li > a:after {
	position: absolute;
    content: "";
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -5px;
    width: 9px;
    height: 9px;
    border-top: 2px solid #343538;
    border-right: 2px solid #343538;
    transform: rotate(45deg);
    transition: all 0.3s;
    z-index: 2;
}
#asideMenu > ul > li > a:hover,
#asideMenu > ul > li > a:focus {
	color:#fff;
	background-color: #156842;
}
#asideMenu > ul > li > a:hover:after,
#asideMenu > ul > li > a:focus:after {
	border-color: #fff;
}
#asideMenu > ul > li > a.open {
	color:#fff;
	background-color: #168254;
}
#asideMenu > ul > li > a.open:after{
	border-color: #fff;
}
#asideMenu > ul > li > a.open:after{
	transform: rotate(135deg);
}
#asideMenu > ul > li.on > a {
	color:#fff;
	background-color: #168254;
}
#asideMenu > ul > li.on > a:after{
    
	border-color: #fff;
}
#asideMenu > ul > li.on > a.open:after{
	transform: rotate(135deg);
}
#asideMenu > ul > li.on > a.dropBtn,
#asideMenu > ul > li.on > a.dropBtn.open {
	background:#10babb;
}
#asideMenu > ul > li > a.dropBtn.open:after,
#asideMenu > ul > li.on > a.dropBtn.open:after {
	right:35px;
	top:27px;
	-webkit-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
			transform:rotate(-45deg);
}
/** 左側選單 第二層 **/
#asideMenu > ul > li > ul {
	width:100%;
	list-style:none;
	border-top:none;
	margin:0px;
	/* padding:0 15px 15px 15px; */
	box-sizing:border-box;
	background:#fff;
	border-radius:2px;	
}
#asideMenu > ul > li:last-child > ul {
	-webkit-border-radius:2px;
       -moz-border-radius:2px;
            border-radius:2px;
}
#asideMenu > ul > li > ul > li {
	display:inline-block;
	width:100%;
	border-bottom:1px solid #f0f0f0;
}
#asideMenu > ul > li > ul > li:last-child {
	border-bottom:none;
}
#asideMenu > ul > li > ul > li a {
	position:relative;
	display:inline-block;
	width:100%;
	color:#333;
	font-size:1.7em;
	font-weight:bold;
	line-height:155%;
	text-align:left;
	padding:10px 15px 10px 25px;
	box-sizing:border-box;
	background:#fff;
}
#asideMenu > ul > li > ul > li a:hover,
#asideMenu > ul > li > ul > li a:focus  {
	color:#993366;
}
#asideMenu > ul > li > ul > li > a:before {
	content:"";
	display:block;    
	position:absolute;
	left:12px;
	top:21px;
	width:5px;
	height:5px;
	background:#10babb;
	z-index:2;
	-webkit-transition:all 0.3s;
	   -moz-transition:all 0.3s;    
		 -o-transition:all 0.3s;
			transition:all 0.3s;
}
#asideMenu > ul > li.on > ul {
	display:block;
	background:#fff;
}
#asideMenu > ul > li.on > ul > li {
	border-color:#10babb;
}
#asideMenu > ul > li.on > ul li a:hover,
#asideMenu > ul > li.on > ul li a:focus {
	color:#993366;
}
#asideMenu > ul > li.on > ul li.on a {
	color:#993366 ;
}
#asideMenu > ul > li > ul li a:hover:before,
#asideMenu > ul > li > ul li a:focus:before {
	background:993366;
}
#asideMenu > ul > li.on > ul li.on a:before {
	background:#993366 ;
}
@media screen and (min-width:1200px) {
	#asideMenu > ul > li > a {
		padding: 15px;
	}
	#asideMenu > ul > li > a.dropBtn.open:before,
	#asideMenu > ul > li.on > a.dropBtn.open:before {
		left:21px;
		top:30px;
		-webkit-transform:rotate(-45deg);
			-ms-transform:rotate(-45deg);
				transform:rotate(-45deg);
	}
}

.acKey {
    position: absolute;
    left: 0;
    top: -30px;
}
.page_box .right_data{ width: calc(100% - 290px - 60px); position: relative}
.page_box .right_data .list_tit{
	display: block; font-size: 5em; color: #343538; line-height: 1.2; margin-bottom: 30px;
}
.keyword_search{ 
	padding: 20px; background:#ececec; box-sizing: border-box; margin-bottom: 23px; display: flex; font-size: 1.7em }

.keyword_search .lab{ 
	padding: 0; width: 150px; line-height: 50px;  font-weight: bold; text-align: center;
	background: #343538; color: #fff;}


.keyword_search .keyword{
	width: calc(100% - 150px - 85px - 10px); border: 0; box-sizing: border-box; padding: 0 15px;
	font-size: 1em; background-color: #fff
	 }

.keyword_search .keyword:focus , .keyword_search .keyword:hover{ background: #fffac7}


.keyword_search .keyword::placeholder{ color:#b0b0b0; font-weight: bold;  font-size: 1em; padding: 0; line-height: 1; margin: 0 }

.keyword_search .keyword:hover::placeholder, .keyword_search .keyword:focus::placeholder{
	color: #666
}

.keyword_search .search_btn{ 
	width: 85px; margin-left: 10px; box-sizing: border-box;  border: 0; background: #168254 url(../images/page-ico-search-w.svg) 12px center no-repeat; background-size: auto 24px; padding: 0 0 0 39px; text-align: left; font-weight: bold; color: #fff; font-size: 1em; cursor: pointer}

.keyword_search .search_btn:focus, .keyword_search .search_btn:hover{ background-color: #0e442b !important; background-size: auto 22px;}

.photo_txt_list{ display: block; list-style: none;   }

.photo_txt_list li{ display: block}

.photo_txt_list li a{     
	display: flex;
    flex-flow: row;
    justify-content: Space-between;
	padding: 30px 20px;
	box-sizing: border-box;
	border-top: 1px dashed #343538
}

.photo_txt_list li:last-child a{ border-bottom:1px dashed #343538 }

.photo_txt_list li a .img{	display: block; width: 34.6%; height:200px; position: relative; overflow: hidden; background: #000;}

.photo_txt_list li a .img:after{ content: ''; display: block; width: 70px; height: 70px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background-image: url(../images/page-ico-search-w.svg); background-position: center; background-repeat: no-repeat; opacity: 0; transition: all 0.3s; z-index: 2; background-size: contain;}

.photo_txt_list li a.for_detail .img:after{ background-image: url(../images/li-ico-detail.svg)}
.photo_txt_list li a.for_link .img:after{ background-image: url(../images/li-ico-link.svg); }
.photo_txt_list li a.for_file .img:after{ background-image: url(../images/li-ico-download.svg); }
.photo_txt_list li a.for_list .img:after{ background-image: url(../images/li-ico-class.svg); }

.photo_txt_list li a .lab{
	font-size: 2em; font-weight: bold; line-height:45px; color: #fff; float: right; background-color: #309b6f;  padding: 0 22px 0 50px; background-repeat: no-repeat;
	background-position: calc(50% - 2.3em) center;  background-size:auto  1em; margin-top: 15px; transition: 0.2s;	
}

.photo_txt_list li a.for_detail .lab{ background-image: url(../images/li-ico-detail.svg)}
.photo_txt_list li a.for_link .lab{ background-image: url(../images/li-ico-link.svg); background-color: #47738c;}
.photo_txt_list li a.for_file .lab{ background-image: url(../images/li-ico-download.svg); background-color: #b27572}
.photo_txt_list li a.for_list .lab{ background-image: url(../images/li-ico-class.svg); background-color: #e2a73d}

.photo_txt_list li a:hover .lab, .photo_txt_list li a:focus .lab{ background-color: #000; background-position: calc(50% - 2.4em) center;}


.photo_txt_list li a:hover .img:after, .photo_txt_list li a:focus .img:after{  width: 40px; height: 40px;opacity: 1; }


.photo_txt_list li a .img i{background-position: center; background-size: cover; display: block; width: 100%; height: 100%; position: absolute; transition: all 0.5s; }
.photo_txt_list li a:hover .img i, .photo_txt_list li a:focus .img i{ transform: scale(1.1); opacity: 0.6}

.photo_txt_list li a .txts{ width: calc(100% - 34.6%); box-sizing: border-box; padding-left: 30px;}
.photo_txt_list li a .txts h3{ display: block; font-size: 2.8em; font-weight: bold; color: #343538; line-height: 1.5; margin-bottom: 8px;}
.photo_txt_list li a:hover .txts h3, .photo_txt_list li a:focus .txts h3{ color: #168254  }
.photo_txt_list li a .txts p{ 
	font-size: 2em ; line-height: 1.5; overflow : hidden !important; color: #343538; 
	text-overflow: ellipsis !important;
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 3 !important;}


/* -----------------------Detail 詳細頁面 .page_box----------------- */

.hr{ display: block; width: 100%; height: 2px ; background-color: #ccc; margin: 25px 0}
.data_calcs{ 
	display: block; padding: 15px 0; list-style: none; border-top:1px solid #dddddd; border-bottom:  1px solid #dddddd; font-size: 1.6em; line-height: 1.25; margin-bottom: 40px; font-weight: bold;}

.data_calcs li{ 
	display: inline-block; padding-left: 1.625em; background-position: left center; background-repeat: no-repeat; background-size: 1.25em auto; color: #000}

.data_calcs li.i_time{ background-image: url(../images/ico-time.svg); margin-right: 20px}
.data_calcs li.i_visiters{ background-image: url(../images/ico-visiter.svg)}

.html_box{ font-size: 1.8em; line-height: 1.7; color: #000;}

.html_box p{ margin-bottom: 1.5em;}

.html_box ol, .page_box .html_box ul{ margin-left: 1.5em; margin-bottom: 1.5em}
.html_box ol li, .page_box .html_box ul li{ margin-bottom: 0.25em}
.html_box table{ width: 100%; max-width: 100%;  }
.html_box table td{ border: 1px solid #666; padding: 5px}
.html_box table th{ font-weight: bold; background: #afd3c2; line-height: 1.5; padding: 10px 5px; border: 1px solid #666}

.html_box img{ max-width: calc(100% - 20px); height: auto;  margin: 15px 10px;}
.html_box figcaption{ font-size: 90%; color: #666; text-align: center}


.ic_tit{ font-size: 2.5em; line-height: 1.6; padding-left: 2em; background-position: left top; background-repeat: no-repeat; background-size: 1.6em; color: #343538; margin-top: 40px; margin-bottom: 20px}

.ic_tit.pics{ background-image: url(../images/title-ico-photos.svg)}
.ic_tit.links{ background-image: url(../images/title-ico-links.svg)}
.ic_tit.files{ background-image: url(../images/title-ico-files.svg)}

.link_list, .files_list { display: block; list-style: none;}
.link_list li, .files_list li{ border-top: 1px dashed #999999}
.link_list li:last-child, .files_list li:last-child{ border-bottom: 1px dashed #999999}
.link_list li a{ 
	display:block; font-size: 2.5em; color: #343538; margin:15px 20px; line-height: 2; padding-left: 3.2em; 
	background: url(../images/ico-link-earth.svg) left center no-repeat; background-size: 2em;}
.link_list li a:hover, .link_list li a:focus{ background-position: 10px center;color: #168254; font-weight: bold;}


.files_list li a{ display: block; margin: 15px 20px; position: relative; padding-left: 80px; min-height: 63px;}

.files_list li a .file_typ{
	display: block; width: 50px; height: 63px; background-position: center; background-repeat: no-repeat; background-size: contain;
	position: absolute; left: 0; top: 0; font-style: normal; font-size: 1.5em; font-family: arial; font-weight: bold; padding-top: 41px;
	color: #fff; text-align: center;text-transform:uppercase; transition: all 0.2s
}

.files_list li a:hover .file_typ, .files_list li a:focus .file_typ{ top: 2.5px}

.files_list li a .file_typ.pdf{ background-image: url(../images/ico-files-pdf.svg)}
.files_list li a .file_typ.doc{ background-image: url(../images/ico-files-doc.svg)}
.files_list li a .file_typ.xls{ background-image: url(../images/ico-files-xls.svg)}
.files_list li a .file_typ.other{ background-image: url(../images/ico-files-others.svg)}
.files_list li a:hover .file_typ, .files_list li a:focus .file_typ{ background-image: url(../images/ico-files-hover.svg) !important}

.files_list li a strong{ font-size: 2.5em; color: #343538; line-height: 1.3; margin: 10px 0;}
.files_list li a:hover strong, .files_list li a:focus strong{   color: #168254;  }

.files_list li a .d_calcs{ font-size: 1.4em; margin-top: 8px; color: #000; line-height: 1.3}

.files_list li a .d_calcs span{ display: inline-block; padding:0 15px; background: url(../images/ico-disc.svg) left center no-repeat; background-size: 0.42em    }


.last_backs{ margin-top: 60px}
.last_backs a{ display: inline-block; padding: 1em 2.5em; color: #fff; font-weight: bold; line-height: 1; font-size: 2em; background-color: #168254}
.last_backs a:after{ content: ''; display: inline-block; width: 1em; margin-left: 0.5em; height: 1em; background: url(../images/ico-back.svg) center no-repeat; background-size: contain;}

.last_backs a:hover, .last_backs a:focus{ background-color: #105133;}
.last_backs a:hover:after, .last_backs a:focus:after{ margin-left: 0.25em}

 
@media screen and (max-width: 1700px) {
 	.in_main{ height: 300px;}
	.in_main .page_tit{ font-size: 6em;}
 	.in_main .web_add{height:50px;}
	.in_main .web_add .link_go, .in_main .web_add span{ height: 49px; line-height: 49px; }
	.in_main .web_add .i_homee{ height: 49px;}
	.in_main .page_tit{transform: translateY(calc(-50% - 25px));}
 	.data_calcs{ font-size: 1.5em}
	.html_box{ font-size: 1.7em;}
	.link_list li a, .files_list li a strong{ font-size: 2em}
	.ic_tit{ font-size: 2.2em; }
}
@media screen and (max-width: 1500px) {
 	.in_main{ height: 220px;}
	.in_main .page_tit{ font-size: 5.5em;}
	.in_main .web_add{ height:40px;}
 	.in_main .web_add .i_homee{ height: 39px;}
	.in_main .page_tit{transform: translateY(calc(-50% - 20px));}
	.in_main .web_add .link_go, .in_main .web_add span{ height: 39px; line-height: 39px; min-width: 4em; padding: 0 30px 0 15px;font-size: 1.5em; }
	.in_main .web_add span{ padding-right: 15px}
	.in_main .web_add .link_go {
		background: url(../images/btn-next.svg) 110% center no-repeat;
		background-size: 40px;}
	.in_main .web_add .i_homee{ width: 50px}
	.link_list li a, .files_list li a strong{ font-size: 1.8em}
	.files_list li a{ padding-left: 60px; min-height: 0}
	.ic_tit{ font-size: 2.1em; }
	
	.files_list li a .file_typ {
		width: 40px;
		height: 53px;
		font-size: 1.2em;
		font-weight: bold;
		padding-top: 34px;}
	.last_backs a{ font-size: 1.9em}	
}

@media screen and (max-width: 1200px) {
	.smenu{ width: 220px}
	#asideMenu > ul{ padding: 15px}
	#asideTitle:before{ opacity: 0.5; right: -12px; bottom: -3px; width: 110px; height: 115px;}
	#asideMenu > ul > li > a{padding: 10px 25px 10px 15px; font-size: 1.8em}
	#asideMenu > ul > li > a:after { right: 13px; width: 6px; height: 6px;}
 	.in_main{ height: 200px;}
	.in_main .page_tit{ font-size: 5em;}
 	.page_box .smenu { width: 220px; margin-right: 30px;}
   	.page_box .smenu h2 { padding: 30px 20px; font-size: 2.5em;}
	.page_box .smenu .class_link a { font-size: 1.65em;}
	.page_box .right_data { width: calc(100% - 220px - 30px);}
	.page_box .right_data .list_tit { font-size: 3.5em; margin-bottom: 20px;}
	.keyword_search { font-size: 1.5em;}
	.keyword_search .lab { width: 120px;}
	.keyword_search .keyword {width: calc(100% - 120px - 85px - 10px);}
	.photo_txt_list li a .txts h3 { font-size: 2.2em;}
	.photo_txt_list li a {padding: 20px 0;}
	.photo_txt_list li a .txts p { font-size: 1.6em;}
	.photo_txt_list li a .img { height: 170px; width: 170px	}
	.photo_txt_list li a .txts { width: calc(100% - 170px); padding-left: 20px;}
	.photo_txt_list li a .lab { font-size: 1.6em; line-height: 40px; padding: 0 18px 0 40px;}
 	.data_calcs{ font-size: 1.4em}
	.html_box{ font-size: 1.6em;}
	.ic_tit{ font-size: 2em; }
	.last_backs a{ font-size: 1.8em}	

}

@media screen and (max-width: 990px) {
	.page_box .right_data{ width: 100%}
	.page_box .smenu{ display: none;}
	.data_calcs{ font-size: 1.35em}
	.link_list li a{ font-size: 1.6em}
	.last_backs a{ font-size: 1.7em}	
}

@media screen and (max-width: 768px) {
	.in_main .page_tit { font-size: 4em; }
	.page_box{ padding: 35px 0}
	.link_list li a, .files_list li a{ margin: 12px 0;}
	.last_backs a{ font-size: 1.6em}
	.last_backs { margin-top: 30px;}
}

@media screen and (max-width: 480px) {
	.in_main { height: 160px;}
    .in_main .page_tit { font-size: 3.3em;    }
	.page_box .right_data .list_tit { font-size: 2.5em;}
	.keyword_search .lab{ display: none}
	.keyword_search .keyword { width: calc(100% -  85px - 10px); height: 40px;    }
	.photo_txt_list li a .img {width: 135px; height: 96px }
	.photo_txt_list li a .txts { width: calc(100% - 135px);}
	.photo_txt_list li a .txts h3 { font-size: 1.8em; }
	.web_add .container{ width: 100%}
	.keyword_search { padding: 10px; }
	.keyword_search .search_btn{background-size: auto 20px;}
	.photo_txt_list li a .lab { position: absolute; left: 0; top: 100px; width: 135px;background-position: calc(50% - 2.6em) center;}
	.photo_txt_list li a{ position: relative; min-height: 175px;}
	.page_box .html_box{ font-size: 1.55em;}
	.page_box .data_calcs{font-size: 1.3em;}
	.last_backs a{ font-size: 1.5em}
	.in_main .web_add .link_go, .in_main .web_add span {
        height: 39px;
        line-height: 39px;
         padding: 0 20px 0 10px;
        font-size: 1.3em;
    }
	.in_main .web_add span{ padding-right: 10px}
	.in_main .web_add .link_go {
        background: url(../images/btn-next.svg) 109% center no-repeat;
        background-size: 30px;
    }
	.in_main .web_add .i_homee {width: 40px; background-size: 16px;}
	.files_list li a .d_calcs{ font-size: 1.3em; color: #666; margin-top: 2px;}
	.files_list li strong { font-size: 1.6em; } 

}

/* ----- contact-Form ----- */
.LogIn-form .input-box,
.contact-Form .form-list .formLabel{
	position:relative;
	padding-left:21px;
}
span.mm, span.um {
	width:21px;
	height:26px;
 	display:inline-block;
	background-repeat:no-repeat;
 	font-size:0;
  
}
span.mm:after{
	content:'★';
 	color:#D82B12;
	font-size:1.3rem;
	line-height:1.2}
	
span.um:after{
	content:'★';
 	color:#ccc;
	font-size:1.3rem;
	line-height:1.2}	
	
span.sp {
	width:6px;
	height:26px;
	padding-right:16px;
	display:inline-block;
	background-repeat:no-repeat;
	background-position:left center;
	background-image: url(../images/icon-required.svg);
    background-image: url(../images/icon-required.png) \9;
	*background-image: url(../images/icon-required.png);
	font-size:0;
}
.LogIn-form .input-box span.mm,
.contact-Form .form-list .formLabel span.mm,
.LogIn-form .input-box span.sp,
.contact-Form .form-list .formLabel span.sp,
.contact-Form span.um{
	position:absolute;
	top:50%;
	left:0;
	margin-top:-13px;
}
.contact-Form {
	float:left;
	width:100%;	
	font-size:1.5em;
	list-style:none;
	display:block
}
.contact-Form .form-list {
	display:block;
	float:left;
	width:100%;	
	margin:0;
	padding:15px;
	border: 1px solid #dcdcdc;
	margin-bottom:10px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	background-color:#fff;
}



.contact-Form .form-list > p{
	color: #ff0000;
    padding-top: 8px;
    font-size: 0.85em;
    text-align: right;
	width: 100%;
    display: inline-block;
}
.contact-Form .form-list .formLabel {
	float: left;
	width: 100%;
	color: #000;
    font-weight: bold;
	line-height:36px;
}
.contact-Form .form-list .formBox {
	float: left;
	width: 100%;
	color: #000;
 
}
.contact-Form .form-list .formBox .opts{
	width:320px;
	height:38px;
	max-width:100%;
	border:1px solid #ccc;
	line-height:36px;
	padding:0 10px;
	font-size:1em;
	padding-right:25px;
	background:url(../images/com-icon-8.gif) calc(100% - 10px) center no-repeat}

@media screen and (min-width: 768px) {
.contact-Form .form-list .formBox {
 
	box-sizing:border-box;
	padding-left:20px;
}}

.contact-Form .form-list .formInput {
	width: 100%;
	height:36px;
    padding:0 10px;
    font-family:"微軟正黑體", Helvetica, sans-serif;
    line-height:30px;    
    vertical-align: middle;
	background: #f5f5f5;
	box-sizing:border-box;
	border:none;
}
.contact-Form .form-list .formInput:focus {
	background-color:#fffac7;
 }
.contact-Form .form-list .formInput.w1 {
    width: 50%;
}
.contact-Form .form-list .formInput.w2 {
    width: 100px;
}
.contact-Form .form-list input[type=radio] {
	margin-left:5px;
}
.contact-Form .form-list .formRadio {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 22px;
    height: 22px;
    background: url(../images/radio-box.png) no-repeat 50% 50%;
	margin: 0 5px 0 10px;
    cursor: pointer;
}
.contact-Form .form-list .formRadio.focus {
	outline: dotted 1px;
}
.contact-Form .form-list .formRadio.checked {
	background: url(../images/radio-check.png) no-repeat 50% 50%;
}
.contact-Form .form-list .formRadio + label {
    cursor: pointer;
}
.contact-Form .form-list .formText {
	width: 100%;
	max-width:100%;
	min-width:100%;
    padding:10px;
    font-family:"微軟正黑體", Helvetica, sans-serif;
    line-height:160%;
    vertical-align: middle;
	background: #f5f5f5;
	box-sizing:border-box;
    border: none;
	font-size: 1em;
}
.contact-Form .form-list .formText:focus  {
	background-color:#fffac7;
	box-sizing:border-box;
}
.contact-Form .form-list .note{
	clear:both;
	width: 100%;
	color:#000;
	line-height:130%;
	margin:10px 0 0 0;
}
.contact-Form .form-list .note.n1 {
	display:inline;
	width:40%;
	margin-left:10px;
}
.contact-Form .form-list .note > span{
	margin-right:10px;
	font-weight:bold;
}
.contact-Form .form-list .captcha {
	margin:0 0 0 10px;
}
.captcha-img{
	display:inline-block;
	margin-right:10px;
}
.captcha-img img{
	height:36px;
	width:auto;
}
/* form-btn */
.form-btn {
	float:left;
	width:100%;
	text-align:center;
	margin-top:20px;
}
.form-btn a, .form-btn input {
	display: inline-block;
	color: #fff;
	font-weight:bold;
	padding: 10px 45px 10px 20px;
	background:#000;
	border:0;
	margin:5px;
	-webkit-border-radius:20px;
	   -moz-border-radius:20px;
	        border-radius:20px;
}
.form-btn .btnSend {
	background-color:#168254;
	background-image:url(../images/btn_go.svg);
	*background-image:url(../images/btn_go.png);
	background-position:right center;
	background-size:contain;
	background-repeat:no-repeat;
}
.form-btn .btnSend:hover {
	background-color:#000;
}
.form-btn .btnClear {
	background-color:#666 ;
	background-position:right center;
	background-image:url(../images/BTN-X.svg);
	*background-image:url(../images/BTN-X.png);
	background-repeat:no-repeat;
    background-size:contain;
}
.form-btn .btnClear:hover {
	background-color: #000;
}
.form-btn a span {
	position: relative;
}
.form-btn a span:after {
	content: '';
	position: absolute;
	top: 50%;
	right: -20px;
	display:block;
	width:16px;
	height:16px;
	margin-top: -8px;
	background-repeat:no-repeat;
	-webkit-transition:all 0.3s ease;
	   -moz-transition:all 0.3s ease;
	     -o-transition:all 0.3s ease;
	        transition:all 0.3s ease;
}
.form-btn a:hover span:after {
	right: -28px;
	
}
.form-btn .btnSend span:after {
	background-image: url(../images/list-arr-icon-s.png)
}
.form-btn .btnClear span:after {
	background-image: url(../images/BTN-X.png)
}
.must_st{
	margin:0 5px;
	font-style:normal;
	color:#C00}

@media screen and (max-width: 400px) {
	.contact-Form .form-list .formInput.w1 {width: 100%;}
	.contact-Form .form-list .note.n1 {
		width: 100%;
		margin-left:0px;
		display:block;
	}
}


  
 @media screen and (min-width: 990px) {
  .contact-Form .form-list .formLabel{
	  width:104px;}	
  .contact-Form .form-list .formBox {
	   width: calc(100% - 104px);
	   padding-left:0;
   }
  .contact-Form .form-list{
	  margin:0;
	  border:0;
	  border-bottom:1px dashed #ccc;
	  border-radius:0;
	  padding-left:0;
	  padding-right:0;} 	
	  }
 
/*radio*/
 /* The radioBox */
.radioBox {
  display: inline-block;
  position: relative;
  padding: 8px 10px 0 30px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radioBox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 6px;
  left: 0;
  height: 22px;
  width: 22px;
  border:1px solid #999999;
  border-radius: 50%;
  background-color:#fff;
}

/* On mouse-over, add a grey background color */
.radioBox:hover input ~ .checkmark, .radioBox:focus input ~ .checkmark, .radioBox input:focus ~ .checkmark{
  background-color: #fdffb9;
  outline:1px solid #6CF
}
.radioBox:hover input + label, .radioBox:focus input + label,
.radioBoxr input:hove + label, .radioBox input:focus + label,
.radioBoxr input:hove ~ label, .radioBox input:focus ~ label,
.radioBoxr ~ input:hove ~ label, .radioBox ~ input:focus ~ label{
	color:#b87233;
	font-weight:bold}
	
.radioBox:hover, .radioBox:focus{
	color:#b87233;}
	
/* When the radio button is checked, add a color? background */
.radioBox input:checked ~ .checkmark {
   background-color:#fff;  
}

.radioBox input:checked + label {
  color:#b87233;  
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radioBox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radioBox .checkmark:after {
 	top: 50%;
	left: 50%;
	transform:translate(-50%,-50%);
	width: 16px;
	height: 16px;
	border-radius: 50%;	
	background: #32aac5;
}
.checkbox-input input[type="checkbox"] + label.laor, .checkbox-input-session input[type="checkbox"] + label.laor{
	margin-top:16px}

 

.radio_set{ line-height:36px;} 
.radio_set input {
	appearance: radio;
	-webkit-appearance: radio;
	vertical-align: middle;
	margin-bottom: 0;
	margin-top: -2px;
	margin-right: 4px;
	width: 20px;
	height: 20px;
}



/*-------sitemap--------*/
ul.sitemap{
	display:block;
	list-style:none;
	display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
	width:calc(100% + 20px);
	margin-left:-10px;
	margin-right:-10px;}
	
ul.sitemap > li{
	display:block;
	float:left;
	width:calc(25% - 20px);
	box-sizing:border-box;
	margin:10px; margin-bottom: 25px;
	background-color:#fff;}	
	
ul.sitemap > li > a{
	display:block;
	padding:10px;
	box-sizing:border-box;
 	color:#fff;
	font-size:2em;
	font-weight:bold;
	background: #368963 url( ../images/snav_recycle.svg) 96% center no-repeat; 
	background-size:auto 80%; 
	border-radius: 0 15px 0 0;
}
	
ul.sitemap > li > a:hover, 
ul.sitemap > li > a:focus{
	background: #146641 url( ../images/snav_recycle.svg) 94% center no-repeat; 
	background-size:auto 85%; 
}

ul.sitemap > li > ul{
	display:block;
	list-style:none;}
	
ul.sitemap > li > ul > li{
	display:block;}	
		
ul.sitemap > li > ul > li > a{
	display:block;
	padding:10px;
	box-sizing:border-box;
	border-bottom:1px dashed #ccc;
	font-size:1.5em;
	color:#666;
	line-height:1.33;
	}
	
ul.sitemap > li > ul > li.lv2 > a{
	padding-right:25px;
	position:relative;}	
	
ul.sitemap > li > ul > li.lv2 > a:after{
	content:'+';
	display:block;
	width:20px; height:20px;
	color:#ccc;
	font-size:1.5em;
	line-height:15px;
	text-align:center;
	position:absolute;
	right:3px;
	top:50%;
	margin-top:-10px;
	z-index:2;
	transition:all 0.4s}	
	
ul.sitemap > li > ul > li.lv2 > a.open:after{
	transform:rotate(45deg);
	color:#fff;}	
ul.sitemap > li > ul > li.lv2 > a:hover:after, 
ul.sitemap > li > ul > li.lv2 > a:focus:after{
	color:#fff;}	
ul.sitemap > li > ul > li > a:hover, 
ul.sitemap > li > ul > li > a:focus,
ul.sitemap > li > ul > li.lv2 > a.open{
	background-color:#105435;
	color:#FFF;
	font-weight:bold;}
	
ul.sitemap > li > ul > li.lv2 > ul{
	box-sizing:border-box;
 	display:block;}
	
ul.sitemap > li > ul > li.lv2 > ul li{
	display:block;}	
	
ul.sitemap > li > ul > li.lv2 > ul li a{
	display:block;
	border-bottom:1px dashed #ccc;
	font-size:1.45em;
	padding:10px;
	color:#666;
	background-color:#f1f1f1;
	}
	
ul.sitemap > li > ul > li.lv2 > ul li a:hover,
ul.sitemap > li > ul > li.lv2 > ul li a:focus{
	background-color:#666;
	color:#fff;}		
			
	
@media only screen and (max-width: 950px) {
ul.sitemap > li{
	width:calc(33.3% - 20px);}	
	
	}
	
@media only screen and (max-width: 768px) {
ul.sitemap > li{
	width:calc(50% - 20px);}	
	
	}			
@media only screen and (max-width: 420px) {
ul.sitemap > li{
	width:calc(100% - 20px);}	
	
	}



/*--------------------------about-------------------------*/

.ab_tit_1{ font-size: 150%; display: block; margin-bottom: 25px; color: #d87068; line-height: 1.1; padding-left: 2.2em; position: relative; margin-top: 40px;}
.ab_tit_1:before{ content: ''; display: block; width: 2em; height: 2em; background: url(../images/true-mark.svg) left center no-repeat; background-size: auto 2em; position: absolute; left: 0; top: 50%; transform: translateY(-50%)}


.ab_tit_2{ font-size: 120%; display: block; margin-bottom: 10px; color: #168254}

.flex{ display: flex;
    flex-flow: row;
    flex-wrap: wrap; justify-content: Space-between;}

.flex.p_2 .item{
	width: calc(50% - 20px);
}

@media only screen and (max-width: 420px) {
	.ab_tit_1 {	font-size: 135%;}
	.ab_tit_2 {	font-size: 115%;}

}


ul.radio_img{
	display: flex;
	flex-flow:row ;
	justify-content:Space-between ;
	list-style: none;
	position: relative; z-index: 2;
	margin-bottom: 35px;
}

ul.radio_img li{
	width: 20.7%; padding-bottom: 20.7%;
	background: #000;
	height: 0;
 	border-radius: 50%;
	position: relative;
	overflow: hidden
}
ul.radio_img li:after{ 
	content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-position: center; background-size: cover;
	opacity: 0.5; z-index: 1; transition: all 0.5s}

ul.radio_img li:hover:after{ transform: scale(1.1); opacity: 0.7}

ul.radio_img li.bg_1:after{	background-image: url(../images/ab-h-1.webp)}
ul.radio_img li.bg_2:after{	background-image: url(../images/ab-h-2.webp)}
ul.radio_img li.bg_3:after{	background-image: url(../images/ab-h-3.webp)}
ul.radio_img li.bg_4:after{	background-image: url(../images/ab-h-4.webp)}


ul.radio_img li div{ position: absolute; width: 100%; text-align: center; color: #fff; top: 50%; transform: translate(0,-50%); z-index: 2}

ul.radio_img li strong{ display: block; font-size: 3em; font-family: 微软雅黑;  font-weight: bold; margin-bottom:0.6em;}
ul.radio_img li span{ font-size: 1.7em; font-weight: bold; padding-top: 0.7em; border-top: 0.2em #fff solid; display: inline-block;}

.sp_tit_g{ font-size: 3rem; display: block; margin-bottom: 25px; }

.sp_tit_g_2{ font-size: 1.5rem; font-weight: bold; color: #22a255; margin-bottom: 15px;}


.jobs_list{ 
	display: flex;
    flex-flow: row;
    flex-wrap: wrap;justify-content: Space-between; margin: 0 0 30px 0 !important;
	padding: 15px; border: 1px solid #ccc; box-sizing: border-box; border-radius: 15px;}

.jobs_list li{
 	width: calc(33.33% - 10px); margin:   5px !important;
	box-sizing: border-box; padding: 20px 5px; padding-bottom: 17px; font-size: 1.1em; background: #168254 url(../images/snav_recycle.svg) center no-repeat; background-size: auto 70%;
	color: #fff; font-weight: bold; text-align: center; border-radius: 8px;
	display: flex;
    align-items: center;
    justify-content: center; text-shadow: 0 0 5px rgba(0,0,0,0.5)
}

.hr_dot{ margin: 40px 0; border-top: 1px dotted #ccc}

@media screen and (max-width: 1200px) {
	ul.radio_img li{ width: 22%; padding-bottom: 22%;}
	.jobs_list li{ font-size: 1em;}
}
@media screen and (max-width: 990px) {
	ul.radio_img li{ width: 23%; padding-bottom: 23%;}
	ul.radio_img{ font-size: 75%}
	ul.radio_img li span{ font-size: 2.2em;	}
	.jobs_list{ padding: 0; border: 0;}
 }

@media screen and (max-width: 500px) {
	ul.radio_img{ font-size: 100%}
	ul.radio_img {flex-wrap: wrap; justify-content: center;}
	ul.radio_img li {
        width: 46%;
        padding-bottom: 46%;
        margin: 0 0 5% 0;
    }
	ul.radio_img { justify-content: Space-between;}
	ul.radio_img li strong { font-size: 3em;}
	ul.radio_img li span { font-size: 2em; }
	
}

/*2024-12-23*/

.center{ text-align: center}
.biger{ font-size: 125%}
.biger h4{ margin-bottom: 0.5em;}
.ma_space{ margin: 30px 0 15px}

ul.radio_img.center_space{justify-content: center;}

ul.radio_img.center_space li{ margin: 10px 20px}

@media screen and (max-width: 500px) {
    ul.radio_img.center_space li {
        width: 30.5%;
        padding-bottom: 30.5%;
        margin: 0 1% 0% 1%;
    }
	    ul.radio_img.center_space li strong {
        font-size: 2.2em;
    }
	    ul.radio_img li span {
        font-size:1.6em;
    }
}
@media screen and (max-width: 500px) {
ul.radio_img.center_space li strong {
        font-size: 2.1em;
    }
	    ul.radio_img li span {
        font-size:1.35em;
    }	
}

@media screen and (max-width: 380px) {
	 ul.radio_img.center_space li strong {
        font-size: 2em;
    }
	    ul.radio_img li span {
        font-size:1.3em;
    }
	
}