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

#mod_home .bg{
}

	#mod_home #bg {
		width: 100%;
		background: url(../../images/home_bg_02.jpg) top no-repeat;
		height: 795px;
		margin-top: 60px;
		padding-top: 70px
	}
		#mod_home #bg span {
			margin-top: 70px;
			font-weight: bold;
			font-size: 150px;
			color: #15828a;
			line-height: 170px;
		}

	#mod_home #touch-bg {
		position: absolute;
		background: url(../../images/home_bg_06.jpg) center no-repeat;
		width: 100%;
		height: 2229px;
		margin-top: -355px;
		z-index: -20
	}
	#mod_home #touch {
		background: url(../../images/zoo_17.png) center no-repeat;
		height: 2029px;
		margin-top: -250px;
		z-index: 1
	}
	
		#mod_home #touch a.item {
			position: absolute;
			display: inline-table;
			width: 260px;
			padding-top: 200px;
			text-align: center;
			font-size: 24px;
			font-style: italic;
			
			/*background: url(../../images/transparent.png) repeat*/
		}
			#mod_home #touch a.item:hover .item-detail {
				
				/*opacity: 1;
				
				z-index: 500;*/
			}
			#mod_home #touch a.item span { z-index: -1 }
			/*
			#mod_home #touch a.item span.item-img,
			#mod_home #touch a.item span.item-name,
			#mod_home #touch a.item span.item-perex,
			#mod_home #touch a.item span.item-text
			 { width: 0px!important}
			#mod_home #touch a.item:hover span { width: 500px!important}*/
			
			.item-detail {
				display: none;
				/*
				
				-webkit-transition: .3s ease-in-out;
				-moz-transition: .3s ease-in-out;
				-o-transition: .3s ease-in-out;
				transition: .3s ease-in-out;
				
				position: absolute;
				padding-bottom: 30px;
				
				background: url(../../images/zoo_31.png) no-repeat center bottom;
				
				left: -172px;
				bottom: 210px;
				opacity: 0;
				display: none;
				
				
				color: #FFFFFF;
				
				-webkit-border-radius: 10px;
				-moz-border-radius: 10px;
				border-radius: 10px;	*/	
					
			}
				.item-img {
					display: block;
					width: 600px;
					height: 165px;
					background-position: center;
					background-repeat: no-repeat;
					background-size:100%;
					
					-webkit-border-top-left-radius: 10px;
					-webkit-border-top-right-radius: 10px;
					-moz-border-radius-topleft: 10px;
					-moz-border-radius-topright: 10px;
					border-top-left-radius: 10px;
					border-top-right-radius: 10px;
				}
				.item-name {
					font-family: 'BalooChettan';
					
					display: block;
					width: 600px;
					padding: 50px 30px 0 30px;
					font-size: 24px;
					font-weight: bold!important;
					text-align: left;
					font-style: normal;
					
					background-color: #15828a;
					background-image: url(../../images/graphic_yellow_one.png);
					background-repeat: no-repeat;
					background-position: 30px 30px
					
					
				}
				.item-perex {
					display: block;
					width: 600px;
					padding: 0 10px 0 30px;
					font-size: 16px;
					font-style: italic;
					text-align: left;
					
					background-color: #15828a;
				}
				.item-text {
					display: block;
					width: 600px;
					padding: 20px 30px 30px 30px;
					font-size: 14px;
					
					text-align: justify;
					font-style: normal;
					
					background-color: #15828a;

					-webkit-border-bottom-right-radius: 10px;
					-webkit-border-bottom-left-radius: 10px;
					-moz-border-radius-bottomright: 10px;
					-moz-border-radius-bottomleft: 10px;
					border-bottom-right-radius: 10px;
					border-bottom-left-radius: 10px;
				}
		
		
			#mod_home #touch a.item-65 {
				margin-top: 400px;
				margin-left: 725px;
			}
			#mod_home #touch a.item-67 {
				margin-top: 650px;
				margin-left: 135px;
			}
			#mod_home #touch a.item-66 {
				margin-top: 760px;
				margin-left: 695px;
			}
			#mod_home #touch a.item-58 {
				margin-top: 1000px;
				margin-left: 510px;
			}
			#mod_home #touch a.item-59 {
				margin-top: 1080px;
				margin-left: 135px;
			}
			#mod_home #touch a.item-68 {
				margin-top: 1380px;
				margin-left: 360px;
			}
			#mod_home #touch a.item-64 {
				margin-top: 1460px;
				margin-left: 760px;
			}
			#mod_home #touch a.item-69 {
				margin-top: 1735px;
				margin-left: 160px;
			}


	#mod_home #text {
		background: url(../../images/zoo_25.jpg) center no-repeat;
		min-height: 1430px
	}
	
	#mod_home .container {
		padding-bottom: 60px;
	}
	#mod_home .perex {
		padding-top: 50px;
		padding-bottom: 50px;
		font-size: 24px;
		background: url(../../images/graphic_yellow_one.png) left bottom no-repeat
	}
	#mod_home .text p{
		padding-bottom: 45px;
		margin-bottom: 25px;
		font-size: 18px;
		color: #252525;
		background: url(../../images/graphic_yellow_one.png) left bottom no-repeat
	}
	#mod_home .text .nogprahix p{
		padding-bottom: 0;
		color: #15838b;
		background: none
	}
	
	
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
}

/* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 767.98px){
	#mod_home #bg span {
		font-size: 60px;
		line-height: 70px;
	}
	#mod_home #bg {
		width: 100%;
		height: 600px;
		background: url(../../images/mobile_02.png) top center no-repeat;
		background-size: auto 100%;
		margin-top: 0px;
		padding-top: 250px;
	}
	#mod_home #touch-bg {
		display: none
	}
	#mod_home #touch {
		background:none;
		margin-top: 0;
		padding: 0px;
		height: auto;
	}
		#mod_home #touch a.item {
			display: none;
		}
	#mod_home #text {
		background: none;
		min-height: auto
	}
	
	#mod_home .container {
		padding-bottom: none;
	}
	#mod_home .perex {
		padding-top: 50px;
		padding-bottom: 50px;
		font-size: 20px;
		background: none
	}
	#mod_home .text p{
		padding-bottom: 50px;
		font-size: 14px;
		color: #252525;
		background: url(../../images/graphic_yellow_one.png) left bottom no-repeat
	}
	#mod_home .text .nogprahix p{
		padding-bottom: 0;
		color: #15838b;
		background: none
	}
}

/* Medium devices (tablets, 768px and up) */ 
@media (min-width: 768px) and (max-width: 991.98px) {
	#mod_home #bg span {
		font-size: 100px;
		line-height: 120px;
	}

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { 
}