﻿@charset "utf-8";


@font-face {
	font-family:'toyotaDisplay';
	src: url('../../toyota-display/Display Regular.ToyotaDisplay_Rg (4).ttf');
	
}

body
{
margin:0px;
	 font-family: toyotaDisplay, Verdana, Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: toyotaDisplay, Verdana, Helvetica, Arial, sans-serif;
	color: #313131;
}


#contents {
	
	/* min-height:inherit; */
	
}
#smartgrid{padding: 20px 8px;}
.gallery-wrap{
	/* background:url(../images/back.jpg) no-repeat; */
	background-size:cover;
	}

#main_visual {
	overflow: hidden;
	margin: 0;
	line-height: 0;
}

#main_visual img {
	width: 100%;
	/* height: auto; */
	/* max-width: 1584px; */
}


/*photo box */
.photo_box {
	margin: 40px 40px;
}
.photo_box ul {
	margin: 0 auto 20px;
	margin-left: -80px;
	text-align: center;
}
.photo_box li {
	display: inline-block;
	vertical-align: top;
	width: 407px;
	text-align: center;
	margin: 0 0 35px 25px;
}
.photo_box li h3{
	font-size: 16px;
	font-weight: normal;
	text-align: left;
	margin: 5px 5px;
	display: inline-block;
	float: left;
	color: #fff;
}
.photo_box li p{
	text-align: center;
}



/*Find Out More*/

.fom {
	font-weight: bold;
	color: #000;
	margin: 6% 0 0 0;
}

.fom:after {
	content: "?";
	font-size: 9px;
	color: #ec0a1e;
	margin-left: 5px;
}



/* More from Environmental Technology ////////////////////////////////////////////////////////////////////////////////*/


#more_from_et {
	display: table;
	border-spacing: 50px;
	border-top: 1px solid #ccc;
	border-bottom:1px solid #ccc;
}

#more_from_et h2 {
	display: table-cell;
	
	font-family: toyotaDisplay, Verdana, Helvetica, Arial, sans-serif;
	color: #000;
	font-size: 21px;
	
	font-weight: normal;
	min-width: 260px;
	
	vertical-align: top;
}

#more_from_et h2 a:hover {
	text-decoration: none;
	}

#more_from_et ul {
	display: table-cell;
	width: 100%;
	
	overflow: hidden;

}




@media (max-width: 767px) {
	
	#more_from_et {
		display: block;
		border-spacing: 0;
		
		margin: 35px 25px 0 25px;
	}

	#more_from_et h2 {
		display: block;
		text-align: center;
		
		margin-bottom: 36px;
	}
	
	#more_from_et ul {
		display: block;
		text-align: center;
		
		margin-bottom: 20px;
	}
	
	#more_from_et li {
		margin-bottom: 20px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	#more_from_et h2 {
		min-width: 150px;
		
	}
}

@media (min-width: 768px) {
		
	#more_from_et li {
		float: left;
		clear: left;
		width: 51%;
		
		margin-bottom: 20px;
	}
	
	#more_from_et li:nth-child(4){
		margin-bottom: 0;
	}
	
	#more_from_et li:nth-child(4) ~ li{
		float: none;
		clear: none;
		width: auto;
	}

}


/*---------------
  èª¿æ•´CSS_140309
----------------*/

#content #enviroment_box #more_from_et ul li a:hover{
	text-decoration:none;	
	}

/*---------------
  MAIN IMG
----------------*/

#content #toyota_tipsbox #main_visual img.small{display: none;}
#content #toyota_tipsbox #main_visual img.midium{display: none;}
#content #toyota_tipsbox #main_visual img.large{display: block;}

@media (max-width: 1024px) {
  #content #toyota_tipsbox #main_visual img.small{display: none;}
  #content #enviroment_box #main_visual img.midium{display: block;}
  #content #toyota_tipsbox #main_visual img.large{display: none;}
}
@media (max-width: 480px) {
  #content #toyota_tipsbox #main_visual img.small{display: block;}
  #content #toyota_tipsbox #main_visual img.midium{display: none;}
  #content #toyota_tipsbox #main_visual img.large{display: none;}
  .photo_box li {
	display: inline-block;
	vertical-align: top;
	width: 300px;
	text-align: center;
	margin: 0 0 35px 25px;
}
.photo_box li img {
    border: 1px solid #EFEAEA;
	width:100%;
}
}/* CSS Document */




.top_padding{padding-top:1%;}
.left_align{  width: 15%;
  			 display: block;
  			 float: left;}
			 
.right_align{ width: 15%;
  			  display: block;
  			  float: right;}
			  
.right_align img{float:right;}
.feature_box{width:100%;height:175px;}
.feature_box hr{width:87%;}

.txt_right{width: 80%;
  		  float: right;
  		  text-align:right;}
		  
.txt_left{width: 80%;
  		  float: left;
  		  text-align:left;}



@media (max-width:1100px) {
	
	.left_align img{  width: 100%;
  			 display: block;
			 margin-top:20%;
  			 }
			 
			 
.right_align img{ width: 100%;
  			  display: block;


			  margin-top:20%;
  			 }
			 
			  .txt_right{width: 80%;
  		  float: right;
  		 
		  padding:2%}
		  
.txt_left{width: 80%;
  		  float: left;
  		  padding:2%}
		  
.feature_box hr{display:none;}
			
	
}

@media (max-width: 480px) {
	.feature_box hr{display:none;}
	
	.left_align{  width: 100%;
  			 display: block;
  			 }
			 
			 
.right_align{ width: 100%;
  			  display: block;
  			 }
			 
			 .left_align img{  width:50%;
  			 display: block;
			  margin-left:auto;
			 margin-right:auto;
			 margin-top:2%;
  			 }
			 
			 
.right_align img{ width:50%;
  			  display: block;
			 margin-left:auto;
			 margin-right:auto;
			 margin-top:2%;
			 float:none;
  			 }
			 
			 
			 .txt_right{width: 100%;
  		  float: right;
  		  text-align:center;}
		  
.txt_left{width: 100%;
  		  float: left;
  		  text-align:center;}
		  	
	
	}
	
	.photo_box li img {
    border: 1px solid #EFEAEA;
}
	
	
	
	
	#slides {
      display: none
    }

    /* Center the slideshow */
    .container {
      margin: 0 auto
    }

    /* Show active item in the pagination */
    .slidesjs-pagination .active {
      color:red;
    }

    /* Media quires for a responsive layout */

    /* For tablets & smart phones */
    @media (max-width: 767px) {
     
      .container {
        width: auto
      }
    }

    /* For smartphones */
    @media (max-width: 480px) {
      .container {
        width: auto
      }
    }

    /* For smaller displays like laptops */
    @media (min-width: 768px) and (max-width: 979px) {
      .container {
        width: 724px
      }
    }

    /* For larger displays */
    @media (min-width: 1200px) {
      .container {
        width: 1170px
      }
    }
	.slider_margin{width:50%;}
	
	

