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



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/




	



/* min 801px */
@media screen and (min-width: 801px), print {


	
	
/* mainimages
--------------------- */
#mainimages {
	width: 100%;
	min-width: 1100px;
	height: 100vh;
	position: relative;
    overflow: hidden;
}
	#mainimages ul {
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}
		#mainimages ul li {
			top: 0;
			left: 0;
			width: 100%;
			position: absolute;
			z-index: -1;
		}
			#mainimages ul li .slider {
				width: 100%;
				height: 100vh;
				position: relative;
			}
				#mainimages ul li .slider .mainimages_pht {
					width: 100%;
				}

				#mainimages ul li .slider p {
					width: 139px;
					position: absolute;
					top: 22%;
					left: 50%;
					z-index: 3;
					margin-left: -70px;
				}
				#mainimages ul li .slider p.tl {
					width: 139px;
					position: absolute;
					top: 22%;
					left: 20%;
					z-index: 3;
					margin-left: 0;
				}
					#mainimages ul li .slider p img {
						width: 100%;
						height: auto;
					}


	#mainimages .btnPrev,
	#mainimages .btnNext {
		display: none;
	}

	#mainimages ul:after {
		content: ".";
		height: 0;
		clear: both;
		display: block;
		visibility: hidden;
	}
	
	
	#mainimages .scroll {
		width: 80px;
		height: 40px;
		background: url(../img/top/fv_arrow.png) no-repeat center bottom;
		color: #008f42;
		text-align: center;
		position: absolute;
		bottom: 20px;
		left: 50%;
		margin-left: -40px;
		z-index: 100;
	}


	
	
/* title
--------------------- */
.title {
	padding-bottom: 60px;
	color: #008f42;
}
	.title h2 {
		font-size: 60px;
		font-weight: 900;
		letter-spacing: 3px;
		line-height: 1;
		padding-bottom: 20px;
	}
	
	.title .txt {
		font-size: 129%;
		font-weight: 900;
		letter-spacing: 3px;
		line-height: 1;
	}


	
	
/* about
--------------------- */
#about {
	width: 100%;
	min-width: 1100px;
	padding: 50px 0;
	background: #008f42;
}
	#about .flex-start .box {
		width: 525px;
	}
	#about .flex-start .box:nth-child(2) {
		position: absolute;
		bottom: -100px;
		right: 0;
	}
		#about .flex-start .box a {
			display: block;
			overflow: hidden;
			position: relative;
			border-radius: 10px;
		}
			#about .flex-start .box a img {
				width: 100%;
				height: auto;
				-moz-transition: -moz-transform 0.2s linear;
				-webkit-transition: -webkit-transform 0.2s linear;
				-o-transition: -o-transform 0.2s linear;
				-ms-transition: -ms-transform 0.2s linear;
				transition: transform 0.2s linear;
			}
			#about .flex-start .box a:hover img {
				-webkit-transform: scale(1.05);
				-moz-transform: scale(1.05);
				-o-transform: scale(1.05);
				-ms-transform: scale(1.05);
				transform: scale(1.05);
			}

			#about .flex-start .box a h3 {
				position: absolute;
				bottom: 20px;
				left: 0;
			}

			#about .flex-start .box:nth-child(2) a h3 {
				position: absolute;
				top: 20px;
				left: 0;
			}
				#about .flex-start .box a h3 span {
					background: #008f42;
					height: 40px;
					padding: 4px 10px;
					font-size: 143%;
					letter-spacing: 2px;
					color: #fff;
				}

			#about .flex-start .box a .more {
				color: #fff;
				background: url(../img/btn_arrow_white.png) no-repeat right 0.67em;
				padding-right: 12px;
				font-weight: 700;
				position: absolute;
				bottom: 20px;
				right: 20px;
			}


	
	
/* flow
--------------------- */
#flow {
	width: 100%;
	min-width: 1100px;
	padding: 120px 0 100px 0;
	position: relative;
}
#flow:after {
	content: "";
	width: 70%;
	height: 520px;
	background: #e5f3ec;
	position: absolute;
	top: 150px;
	left: 0;
	z-index: -1;
}
	#flow .flex {
	}
		#flow .flex .box {
			width: 334px;
			background: #fff;
			border-radius: 10px;
			margin-right: 49px;
			box-shadow: 0px 4px 35px -5px #c4c4c4;
		}
		#flow .flex .box:nth-child(3n) {
			margin-right: 0;
		}
			#flow .flex .box a {
				display: block;
			}
				#flow .flex .box a .pht {
					overflow: hidden;
					border-radius: 10px 10px 0 0;
				}
					#flow .flex .box a .pht img {
						width: 100%;
						height: auto;
						-moz-transition: -moz-transform 0.2s linear;
						-webkit-transition: -webkit-transform 0.2s linear;
						-o-transition: -o-transform 0.2s linear;
						-ms-transition: -ms-transform 0.2s linear;
						transition: transform 0.2s linear;
					}
					#flow .flex .box a:hover .pht img {
						-webkit-transform: scale(1.05);
						-moz-transform: scale(1.05);
						-o-transform: scale(1.05);
						-ms-transform: scale(1.05);
						transform: scale(1.05);
					}


				#flow .flex .box a h3 {
					font-size: 16px;
					letter-spacing: 2px;
					line-height: 1;
					background: url(../img/btn_arrow_green.png) no-repeat 95% center;
					padding: 20px;
					transition: 0.3s;
					-webkit−transition: 0.3s;
				}
				#flow .flex .box a:hover h3 {
					color: #008f42;
					background: url(../img/btn_arrow_green.png) no-repeat 96% center;
				}


	
	
/* satff
--------------------- */
#satff {
	width: 100%;
	min-width: 1100px;
	padding: 120px 0 100px 0;
}
	#satff .title {
		text-align: center;
	}


	
	
/* career
--------------------- */
#career {
	width: 100%;
	min-width: 1100px;
	padding: 100px 0;
	background: #008f42;
}
	#career .title {
		color: #fff;
		padding-bottom: 0;
	}
	
	
	#career .btn {
		position: absolute;
		top: 50%;
		right: 0;
		margin-top: -30px;
	}


	
	
/* linkarea
--------------------- */
#linkarea {
	width: 100%;
	min-width: 1100px;
	padding: 100px 0 0 0;
}


	
	
/* news
--------------------- */
#news {
	width: 100%;
	min-width: 1100px;
	padding: 100px 0 140px 0;
	position: relative;
	z-index: 1;
}
#news:after {
	content: "";
	width: 70%;
	height: 670px;
	background: #e5f3ec;
	position: absolute;
	top: 130px;
	right: 0;
	z-index: -1;
}
	#news .title {
		text-align: center;
	}
	
	
	#news .flex {
	}
		#news .flex .box {
			width: 334px;
			background: #fff;
			border-radius: 10px;
			margin-right: 49px;
			box-shadow: 0px 4px 35px -5px #c4c4c4;
		}
		#news .flex .box:nth-child(3n) {
			margin-right: 0;
		}
			#news .flex .box a {
				display: block;
			}
				#news .flex .box a .pht {
					overflow: hidden;
					border-radius: 10px 10px 0 0;
				}
					#news .flex .box a .pht img {
						width: 100%;
						height: auto;
						-moz-transition: -moz-transform 0.2s linear;
						-webkit-transition: -webkit-transform 0.2s linear;
						-o-transition: -o-transform 0.2s linear;
						-ms-transition: -ms-transform 0.2s linear;
						transition: transform 0.2s linear;
					}
					#news .flex .box a:hover .pht img {
						-webkit-transform: scale(1.05);
						-moz-transform: scale(1.05);
						-o-transform: scale(1.05);
						-ms-transform: scale(1.05);
						transform: scale(1.05);
					}


				#news .flex .box a .text {
					overflow: hidden;
					border-radius: 10px 10px 0 0;
					padding: 20px;
				}
					#news .flex .box a .text .days {
						color: #008f42;
						font-weight: 900;
					}

					#news .flex .box a .text .more {
						color: #008f42;
						text-align: right;
						background: url(../img/btn_arrow_green.png) no-repeat right 0.67em;
						padding-right: 12px;
						font-weight: 700;
					}
	
	
	#news .btn {
		padding-top: 60px;
		margin: auto;
	}








}








/* max 800px */
@media only screen and (max-width: 800px) {


	
	


	
	
/* mainimages
--------------------- */
#mainimages {
	width: 100%;
	position: relative;
    overflow: hidden;
}
	#mainimages ul {
		width: 100%;
		overflow: hidden;
	}
		#mainimages ul li {
			top: 0;
			left: 0;
			width: 100%;
			position: absolute;
			z-index: -1;
		}
			#mainimages ul li .slider {
				width: 100%;
				position: relative;
			}
				#mainimages ul li .slider .mainimages_pht {
					width: 100%;
				}

				#mainimages ul li .slider p {
					width: 60px;
					position: absolute;
					top: 10%;
					left: 50%;
					z-index: 3;
					margin-left: -30px;
				}
				#mainimages ul li .slider p.tl {
					left: 20%;
					margin-left: 0;
				}
					#mainimages ul li .slider p img {
						width: 100%;
						height: auto;
					}


	#mainimages .btnPrev,
	#mainimages .btnNext {
		display: none;
	}

	#mainimages ul:after {
		content: ".";
		height: 0;
		clear: both;
		display: block;
		visibility: hidden;
	}
	
	
	#mainimages .scroll {
		display: none;
	}


	
	
/* title
--------------------- */
.title {
	padding-bottom: 50px;
	color: #008f42;
	text-align: center;
}
	.title h2 {
		font-size: 40px;
		font-weight: 900;
		letter-spacing: 3px;
		line-height: 1;
		padding-bottom: 13px;
	}
	
	.title .txt {
		font-size: 100%;
		font-weight: 900;
		letter-spacing: 3px;
		line-height: 1;
	}


	
	
/* about
--------------------- */
#about {
	width: 100%;
	padding: 25px 0 5px 0;
	background: #008f42;
}
	#about .flex-start .box {
		margin-bottom: 25px;
	}
		#about .flex-start .box a {
			display: block;
			overflow: hidden;
			position: relative;
			border-radius: 10px;
		}
			#about .flex-start .box a img {
				width: 100%;
				height: auto;
			}

			#about .flex-start .box a h3 {
				position: absolute;
				bottom: 20px;
				left: 0;
			}
				#about .flex-start .box a h3 span {
					background: #008f42;
					height: 30px;
					padding: 4px 10px;
					font-size: 122%;
					letter-spacing: 2px;
					color: #fff;
				}

			#about .flex-start .box a .more {
				color: #fff;
				background: url(../img/btn_arrow_white.png) no-repeat right 0.67em;
				padding-right: 12px;
				font-weight: 700;
				position: absolute;
				bottom: 20px;
				right: 20px;
			}


	
	
/* flow
--------------------- */
#flow {
	width: 100%;
	padding: 50px 0 50px 0;
	position: relative;
}
#flow:after {
	content: "";
	width: 60%;
	height: 100%;
	background: #e5f3ec;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
}
	#flow .flex {
	}
		#flow .flex .box {
			background: #fff;
			border-radius: 10px;
			margin-bottom: 25px;
			box-shadow: 0px 4px 35px -5px #c4c4c4;
		}
		#flow .flex .box:nth-child(3n) {
			margin-right: 0;
		}
			#flow .flex .box a {
				display: block;
			}
				#flow .flex .box a .pht {
					overflow: hidden;
					border-radius: 10px 10px 0 0;
				}
					#flow .flex .box a .pht img {
						width: 100%;
						height: auto;
						-moz-transition: -moz-transform 0.2s linear;
						-webkit-transition: -webkit-transform 0.2s linear;
						-o-transition: -o-transform 0.2s linear;
						-ms-transition: -ms-transform 0.2s linear;
						transition: transform 0.2s linear;
					}
					#flow .flex .box a:hover .pht img {
						-webkit-transform: scale(1.05);
						-moz-transform: scale(1.05);
						-o-transform: scale(1.05);
						-ms-transform: scale(1.05);
						transform: scale(1.05);
					}


				#flow .flex .box a h3 {
					font-size: 16px;
					letter-spacing: 2px;
					line-height: 1;
					background: url(../img/btn_arrow_green.png) no-repeat 95% center;
					padding: 20px;
					transition: 0.3s;
					-webkit−transition: 0.3s;
				}
				#flow .flex .box a:hover h3 {
					color: #008f42;
					background: url(../img/btn_arrow_green.png) no-repeat 96% center;
				}


	
	
/* satff
--------------------- */
#satff {
	width: 100%;
	padding: 50px 0 30px 0;
}
	#satff .title {
		text-align: center;
	}


	
	
/* career
--------------------- */
#career {
	width: 100%;
	padding: 50px 0;
	background: #008f42;
}
	#career .title {
		color: #fff;
	}
	
	
	#career .btn {
		margin: auto;
	}


	
	
/* linkarea
--------------------- */
#linkarea {
	width: 100%;
	padding: 50px 0 0 0;
}


	
	
/* news
--------------------- */
#news {
	width: 100%;
	padding: 50px 0 50px 0;
	position: relative;
	z-index: 1;
}
#news:after {
	content: "";
	width: 70%;
	height: 670px;
	background: #e5f3ec;
	position: absolute;
	top: 130px;
	right: 0;
	z-index: -1;
}
	#news .title {
		text-align: center;
	}
	
	
	#news .flex {
	}
		#news .flex .box {
			background: #fff;
			border-radius: 10px;
			margin-bottom: 25px;
			box-shadow: 0px 4px 35px -5px #c4c4c4;
		}
		#news .flex .box:nth-child(3n) {
			margin-right: 0;
		}
			#news .flex .box a {
				display: block;
			}
				#news .flex .box a .pht {
					overflow: hidden;
					border-radius: 10px 10px 0 0;
				}
					#news .flex .box a .pht img {
						width: 100%;
						height: auto;
					}


				#news .flex .box a .text {
					overflow: hidden;
					border-radius: 10px 10px 0 0;
					padding: 20px;
				}
					#news .flex .box a .text .days {
						color: #008f42;
						font-weight: 900;
					}

					#news .flex .box a .text .more {
						color: #008f42;
						text-align: right;
						background: url(../img/btn_arrow_green.png) no-repeat right 0.67em;
						padding-right: 12px;
						font-weight: 700;
					}
	
	
	#news .btn {
		padding-top: 25px;
		margin: auto;
	}
	




}