@charset "utf-8";

#intro_wrap {width:100%;height:100%; min-width: 1200px; min-height: 1000px;background:url('../images/intro/intro_bg.jpg') center center no-repeat;overflow: hidden;}
#intro_wrap  .intro{width:1200px; margin:120px auto 0;  }
#intro_wrap  .intro h1{margin:0 0 20px 0;}
#intro_wrap  .intro h1 a {display: block;}
#intro_wrap  .intro .introbox {background:url('../images/intro/intro_box_bg.jpg' ) center center no-repeat;box-shadow: 0 0 20px rgba(0,0,0,0.4);}
#intro_wrap  .intro .introbox:after {content:"";display: block;clear: both;}
#intro_wrap  .intro .introbox  .box {float: left;width:400px;height:600px;}
#intro_wrap  .intro .introbox  .box a{display: block;width:100%;height:100%;box-sizing:border-box;
    	transition:all .3s;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
}
#intro_wrap  .intro .introbox  .box01 a{background-color:rgba(246,103,8,0.75);}
#intro_wrap  .intro .introbox  .box01 a:hover, #intro_wrap  .intro .introbox  .box01 a:focus{background-color:rgba(246,103,8,0.85);}

#intro_wrap  .intro .introbox  .box02 a{background-color:rgba(68,141,9,0.75);}
#intro_wrap  .intro .introbox  .box02 a:hover, #intro_wrap  .intro .introbox  .box02 a:focus 
{background-color:rgba(68,141,9,0.85);}

#intro_wrap  .intro .introbox  .box03 a{background-color:rgba(0,97,219,0.75);}
#intro_wrap  .intro .introbox  .box03 a:hover, #intro_wrap  .intro .introbox  .box03 a:focus
{background-color:rgba(0,97,219,0.85);}

#intro_wrap  .intro .introbox  .box a h2{font-family: 'raleway'; font-weight: 600; color: #ffffff; font-size:40px; text-align: center;padding:185px 0 0 0;}
#intro_wrap  .intro .introbox  .box03 a h2 {font-size:26px;line-height: 30px;}

#intro_wrap  .intro .introbox  .box a p{font-size: 17px; text-align: center;line-height: 17px; padding:15px 0 0 0;color: #fff;}
#intro_wrap  .intro .introbox  .box03 a h2:after {content:"";display: block;width:40px;height:1px; background-color:rgba(255,255,255,0.8); margin:70px auto;}
#intro_wrap  .intro .introbox  .box a p:after {content:"";display: block;width:40px;height:1px; background-color:rgba(255,255,255,0.8); margin:70px auto;}
#intro_wrap  .intro .introbox  .box a span{display: block;font-weight: 600; font-family: 'raleway'; font-size: 15px; color: rgba(255,255,255,0.7); text-align: center;}
#intro_wrap  .intro .introbox  .box a span img{width:1px;height:1px;vertical-align:middle;padding:0 0 3px 5px;
    transition:all .3s;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;

}
#intro_wrap  .intro .introbox  .box a:hover span img, #intro_wrap  .intro .introbox  .box a:focus span img {width:22px; height:8px;}





/**** mobile layout *************************************************************************************************************/
@media screen and (max-width:640px) {


	#intro_wrap {min-width:auto; min-height:auto;background-size:cover; background-position:center 0 ;overflow:unset;}
	#intro_wrap  .intro{width:auto; margin:0 auto;padding:0 15px;  }
	#intro_wrap  .intro h1 a {display: block;padding:40px 0 0 0;}
	#intro_wrap  .intro .introbox {background-size:cover;background:url('../images/intro/intro_box_bg.jpg' ) 70% center no-repeat;box-shadow: 0 0 20px rgba(0,0,0,0.4);}
	#intro_wrap  .intro .introbox  .box {float: none;width:auto;height:200px;}
	#intro_wrap  .intro .introbox  .box a h2{font-size:22px; text-align: center;padding:50px 0 0 0;}
	#intro_wrap  .intro .introbox  .box03 a h2 {font-size:15px;line-height:18px;}

	#intro_wrap  .intro .introbox  .box a p{font-size: 13px; line-height: 13px; padding:7px 0 0 0;}
	#intro_wrap  .intro .introbox  .box03 a h2:after {margin:20px auto;}
	#intro_wrap  .intro .introbox  .box a p:after {margin:20px auto;}
	#intro_wrap  .intro .introbox  .box a span{font-size: 13px; }




}