#body{
	width: 100%;
	background:url(../img/bg_body_1.png) no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center center; 
	overflow: hidden;
}

#main{
	width: 100%;
	margin: 0 auto;  
	
}

#header_box{
	width: 100%;
	height:700px;
	background:url(../img/head_bg.png) no-repeat; 
	background-size: cover;
	background-position: center center; 
}

#header{
	width: 100%;
	height: 100%; 
}




#nav{
	width: 100%;
	height: 180px;
	 
}

#nav .logo{
	width: 240px;
	 
}

#nav .logo img{
	margin-top: 10px;
}

#nav .muen{
	width: 500px; 
	position: absolute;
	top: 80px;
	left: 330px;
}
#nav .muen li {
	display: inline-block; 
	height: 54px;
	line-height: 54px; 
	cursor: pointer;
}
#nav .muen li a { 
	color: white;
	padding: 10px;
	transition: color 0.8s;
	font-size: 20px;
}

#nav .muen li a:hover{	 
	color: #d9d9d9;
}

#info{
	width: 100%;
	height: 350px;
	text-align: center; 
	position: absolute;
	bottom: 0;
}

#info h1{
	font-size: 60px;
	transform: rotateX(180deg);
	opacity: 0.5; 
	color: #fff;
	margin-top: 30px; 
	margin-bottom:40px ;
	position: relative;
}

.info_p{
	margin-bottom: 35px;
	font-size: 22px;
	position: relative;
	left: 560px;
	opacity: 0;
	color: #fff;
	
	animation: myAni_p ease-in-out 1s;
	animation-delay:0.6s ;
	animation-fill-mode: forwards;
	
}
#info .info_btn{
	display:inline-block;
	width: 140px;
	height: 50px; 
	margin: auto; 
	border-radius:6px ;  
	cursor: pointer;
}

#info .info_btn p {
	text-align: center;
	line-height: 50px;
	
}
#info .btn1{
	background: white; 
	margin-right: 10px;
	margin: auto;
	transition: all 1s; 
	position: relative; 
	top: 60px;
	opacity: 0;
	 
}
#info .info_btn:hover{
	background: #454545; 
	 
}
#info .info_btn:hover p{
	color: white;
	
}

#info .btn1 p{
	color: #000000;
	transition: all 1s;
}
#info .btn2{
	margin-left: 10px;
	background: #EE4000;
	transition: all 1s;
	position: relative;	
	top: -60px;
	opacity: 0;
}

 
#info .btn2 p{
	color: white;
	transition: all 1s;
}




#content{
	width: 100%;
	 
}

#content .introduction{
	width: 100%; 
	background: #FFFFFF;
	padding: 80px 0 70px; 
	box-sizing: border-box;
}

#content .introduction .int_left p{
	color: #666666;
	margin: 0;
	padding: 0;
	line-height: 35px;
	font-size: 18px;
	text-align: justify;
	text-justify: inter-ideograph;
	width: 600px;
}
#content .introduction .int_left p.p{
	padding-bottom: 30px;
}
#content .introduction .int_left .title_info h1{
	color: #EE4000;
	margin:10px 0;
	font-size: 32px;
	padding: 0;
	 
}
#content .introduction .int_left .title_info p{
	font-size: 16px;
}
#content .introduction .int_left{
	display: inline-block; 
	padding-right: 30px;
	vertical-align: top;
}
#content .introduction .int_left a{
	padding: 10px 50px;
	line-height: 50px;
	background: #EE4000; 
	transition: all 0.5s; 
	border: 1px solid #EE4000;
}
#content .introduction .int_left a:hover{
	background: #FFFFFF;
	color: #EE4000;
}
#content .introduction .int_right{
	 display: inline-block; 
	 vertical-align: top;
	 margin-top: 50px;
	 width: 500px;
	 height: 340px;
	 float: right;
}
#img_box_dm{
	width: 100%;
	height: 100%;
	position: relative;
}
#img_box_dm img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 1s ease-in-out;
}

#img_box_dm > img:not(:first-child) {
	opacity: 0;
}#box_span > span:not(:first-child) {
	background: rgba(255,255,255,1);
}
#img_box_dm span{
	display: block;
	height: 20px;
	width: 20px;
	background: rgba(28,116,206,1);
	position: absolute;
	bottom: 10px;
	border-radius:10px;
	

}




#content .declare{
	background: #FFFFFF;
	padding-bottom:90px;
}
#content .text_flow{
	padding:120px 0 0 0;
	position: relative; 
}

#content .text_flow_main{ 
	border-top: 2px solid #e45c5f;
	border-bottom: 2px solid #e45c5f;
}
#content .head_text{
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 13px 0px; 
}
#content .head_text h2{
	font-size: 23px;
	font-weight: 700;
	color: #e45c5f;
	margin: 0px 0px 8px 0px;
}
#content .tfm_top{
	background: #F7F7F7;
	text-align: center;
	padding: 25px 0px 0px 0px;
	border-top: 2px solid #e45c5f;
	width: 35%;
	position: absolute;
	top: 60px;
	left: 31%;
}
#content .tfm_top h2{
	font-size: 30px;
	font-weight: 800;
	color: #777;
	margin: 0px 0px 5px 0px;
}
#content .tfm_top p{
	font-size: 15px;
	font-weight: 400;
	color: #777;
}
#content .head_text h3{
	font-size: 25px;
	font-weight: 300;
	color: #e45c5f;
	margin: 0px; 

}
#content .tfm_bott{
	padding: 70px 20px;
	background: #F7F7F7;
}
#content .tfm_bott .text_box p{
	font-size: 14px;
	font-weight: 400;
	color: #777;
	width: 90%;
	line-height: 1.8em;
	padding-top: 15px;
	text-align: justify;
	text-justify: inter-ideograph;
}
#content .text_flow .text_box{
	width: 33%;
	display: inline-block;
	padding: 0 10px;
	box-sizing: border-box;
}
#content .text_box .more{
	margin-top: 30px;
}
#content .text_box a{
	padding: 10px 30px;
	background: #e45c5f;
	color: #FFFFFF;
	transition: background-color 0.5s;
}

#content .text_box a:hover{
	background-color: #666666;
}

#content .photoshow{
	padding: 100px 0;
}
#content .photoshow .mod_title h1{
	color: #FFFFFF;
	text-align: center;
	margin: 10px 0;
	font-size: 42px;
}
.mod_title{
	margin-bottom: 50px;
}
#content .photoshow .mod_title h3{
	color: #FFFFFF;
	text-align: center; 
	font-weight: normal;
	font-size: 17px;
}

.mod_title p{ 
	font-size: 22px;
	margin-top: 4px;
	color: white;
	text-align: center;
}


.mod_title span{ 
	position: relative;
	top: -6px;
	display: inline-block;
	width: 100px;
	height: 1px;
	background: white;
	
}
#content .index_mod_main{
	/*background: cadetblue;*/
	/*opacity: 0.5;*/
	position: relative;
	font-size: 0;
	vertical-align: top;
}
#content .index_mod_main .mod_top{
	width: 100%;
	height: 160px;
	background: darkgreen;
	opacity: 0.5;
	position: absolute;
	top: -80px;
	left: 0;
	z-index: 11;
}
/*#content .index_mod_main .mod_top{
	text-align: center;
}
#content .index_mod_main .mod_top img{
	width: 100px;
	height: 100px;
}*/
/*#content .index_mod_main .mod_left{
	width: 200px;
	height: 100%;
	background: red;
	position: absolute;
	top: 0px;
	left: -100px; 
	z-index: 10;
	background: url(../img/mod_left_img.png) no-repeat;
	 
}

#content .index_mod_main .mod_right{
	width: 200px;
	height: 100%;
	background: darkorange;
	position: absolute;
	top: 0px;
	right: -100px;
	z-index: 10;
	 
	background:url(../img/mod_right_img.png) no-repeat;
}*/

#content .index_mod_main .mod_item{
	display: inline-block; 
	margin: 0;
	padding: 0;
	width: 25%;
	height: 540px;
	overflow: hidden;
	/*background: darkmagenta;*/ 
	position: relative;
	box-sizing: border-box;
	transition: all 0.3s ease-in-out; 
}
#content .index_mod_main .mod_item:hover h1{
	color: #E45C5F;
}
#content .index_mod_main .mod_item h1{
	font-size: 21px;
	color: #666666;
	text-align: center;
	transition: all 0.3s ease-in-out;
}
#content .index_mod_main .mod_item h2{
	font-size: 14px;
	color: #666666;
	text-align: center;
	font-weight: lighter;
	padding: 10px 0;
}

#content .index_mod_main .mod_item p{
	font-size: 16px;
	color: #4B4B4B;
	text-align: justify;
	text-justify: inter-ideograph;
	margin: 0 25px;
}
#content .index_mod_main .mod_item_img{ 
	padding-top: 30px;
	position: relative;
	height: 260px;
	display: block; 
	text-align: center;
	top: 0;
	left: 0;
	transition: all 0.2s ease-in-out; 
}
#content .index_mod_main .mod_item_title{
	margin-top: 20px;
	position: relative;
	top: 0;
	left: 0;
	transition: all 0.2s ease-in-out; 
}
#content .mod_item_1{
	background: #f5fff2;
}
#content .mod_item_2 {
	background: #fff6f0;
}
#content .mod_item_3 {
	background: #fcfcef;
}
#content .mod_item_4{
	background: #fef6ff;
}
#content .mod_item_1 .mod_item_img{
	background: #83d34a;
}
#content .mod_item_2 .mod_item_img{
	background: #ff8f40;
}
#content .mod_item_3 .mod_item_img{
	background: #ff6068;
}
#content .mod_item_4 .mod_item_img{
	background: #bd5bc6;
}

#content .index_mod_main .mod_item_img img{
	
	width: 256px;
	height: 256px;
	border: 0;
	padding: 0;
	margin: 0;
	vertical-align: top;
	margin: 0 auto;
}

#content .index_mod_main .mod_item:hover{
	 -moz-box-shadow:0px 0px 17px #333333;
	 -webkit-box-shadow:0px 0px 17px #333333;
	 box-shadow:0px 0px 17px #333333;
	 z-index: 9;
}
#content .index_mod_main .mod_item:hover .mod_item_img{
	top: -10px;
}
#content .index_mod_main .mod_item:hover .mod_item_title{
	top: -10px;
}
#content .index_mod_main .more_choice{
	width: 100%;
	text-align: center; 
	height: 85px;
	background: #FFF6F0;
	position: relative;
	top: -20px;
	left: 0;
	z-index: 11;
}
#content .index_mod_main .more_choice a{
	padding: 0 40px;
	background: #E45C5F;
	color: #FFFFFF;
	font-size: 18px; 
	display: inline-block;
	line-height: 50px;
	margin-top: 20px;
	border: 1px solid #E45C5F;
	transition: all 0.3s ease-in-out; 
}

#content .index_mod_main .more_choice a:hover{
	color: #E45C5F;
	background: #FFFFFF;
}



#content .card{
	padding: 100px 0;
	background: #f8f5f1;
}
#content .card_box{
	width: 100%;
	box-sizing: border-box;
	transition: all 0.4s ease-in-out;
}
#card_item_box{
	position: relative;
	width: 100%;
	height: 400px;
	overflow: hidden;
	box-sizing: border-box;
}
#content .card_item{
	padding: 10px 0;
	width: 33.33333%;
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	transition: all 1s ease-in-out;
}


#content .card_box .head_title{
	position: relative;
}
#content .card_box .head_title h1{
	color: #EE4000;
	font-size: 40px;
	margin-bottom: 45px;
	border-bottom: 1px solid #E45C5F;
	display: inline-block;
	padding-bottom: 15px;
}
#content .card_box .head_title span{
	width: 70px;
	height: 4px;
	background: #E45C5F;
	display: block;
	position: relative;
	left: 0;
	top: -48px; 
}

#content .card_box .head_title .fy_btn{
	width: 36px;
	height: 36px;
	border: 1px solid #E45C5F;
	border-radius:6px ;
	text-align: center;
}

.fy_btn:hover{
	background: #E45C5F;
	cursor: pointer;
}
.fy_btn:hover i{
	color: #FFFFFF;
}
.prev_btn{
	position: absolute;
	top: 10px;
	right: 40px;
}
.prev_btn i{
	position: relative;
	left: -2px;
	top: 2px;
	color: #E45C5F;
}
.next_btn i{
	position: relative;
	left: 2px;
	top: 2px;
	color: #E45C5F;
}
.next_btn{
	position: absolute;
	top: 10px;
	right: 0;
}

 
#content .card_box .card_item img{
	transition: all 1s; 
	width: 100%;
	height: 234px;
}
#content .card_box .card_item:hover img{
	transform: scale(1.1);
}
#content .card_box .card_item{
	padding: 0 10px;
	display: inline-block;
	vertical-align: top;
}
.image{
	overflow: hidden;
	text-align: center;
}
#content .card_box .card_item h1{
	font-size: 1.5em;
	color: #4B4B4B;
	margin-bottom: 10px;
}
#content .card_box .card_item p{
	color: #4F4F4F;
	margin-bottom: 20px;
	width: 100%;
	text-align: justify;
	text-justify: inter-ideograph;
}
#content .card_box .card_item a{
	padding: 10px 40px;
	color: #FFFFFF;
	background: #E45C5F;
	/*margin-bottom: 10px;*/
}











#footer{
	width: 100%;
	padding: 70px 0;
	background: #E45C5F;
	 
}
.footer_box{
	box-sizing: border-box;
	width: 1200px;
	margin: auto;
}
#footer .text_item{
	box-sizing: border-box;
	width: 32%;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
	
}
#footer .text_item .top_title{
	margin-bottom: 30px;
}
#footer .text_item .top_title h1{
	color: #FFFFFF;
	font-size: 22px;
	border-bottom: 1px solid #FFFFFF;
	width: 90%;
	padding-bottom: 6px;
	
}

#footer .text_item .top_title span{
	width: 70px;
	height: 4px;
	display: block;
	background: #FFFFFF;
}
#footer .text_item img{
	width: 100px;
	height: 50px;
}
#footer .text_item p{
	width: 80%;
	text-align: justify;
	text-justify: inter-ideograph;
	padding: 10px 0;
	margin-bottom: 10px;
	color: #fff;
}
#footer .foot_map i{
	width: 24px;
	height: 24px;
	color: #FFFFFF;
	font-size: 24px;
	margin-right: 6px;
}
#footer .foot_map p{
	vertical-align:top;
	display: inline-block;
	margin-left: 10px;
	margin-bottom: 15px;
	padding: 0;
}
#footer .share a{
	border: 1px solid #FFFFFF;
	width: 38px;
	height: 38px;
	display: inline-block;
	text-align: center; 
	border-radius:6px ;	
	transition: all 0.2s;
}
#footer .share i{
	line-height: 38px;
	font-size: 24px;
}

#footer .weixin_icon:hover{
	background: #1ba405;
	border: 1px solid #ef7c13;
}
#footer .weibo_icon:hover{
	background: #ff5a00;
	border: 1px solid #ef7c13;1361ef
}
#footer .qq_icon:hover{
	background: #1a57c5;
	border: 1px solid #1a57c5;
}
#footer .footer_nav li{
	display: inline-block;
	width: 45%;
	line-height: 30px;
}
#footer .footer_nav a:hover{
	color: #F2F2F2;
	
}
.copyright{
	padding: 20px 0;
}
.copyright p{
	padding: 10px 0;
	text-align: center;
	color: #A1A1A1;
}
.box{
	width: 1200px; 
	margin: 0 auto;
	box-sizing: border-box;
}

.header_box{
	height: 100%;
	position: relative;
}
.content_box{
	height: 100%;
	position: relative;
}
.footer_box{
	height: 100%;
	position: relative;
}


#bar{
	width: 100%;
	height: 45px; 
}

 
#bar .bar_left p{
	color: #c2c2c2; 
	margin-top: 10px;
	font-size: 14px;
}

#bar .bar_right{
	width: 140px;
	height: 100%;
}

#bar .bar_right img{
	width: 30px;
	height: 30px;
	margin-top: 10px;
}


.back_top{
	background-color: #4B4B4B;
	position: fixed;
	right: 40px;
	bottom: 20px;
	border-radius:80px;
	display: none;
}
.back_top i{
	color: #FFFFFF;
	padding: 10px;
}
.back_top:hover{
	background: #333333;
}





/*动画*/
#info h1.h_1{
	animation: myAni_h1 ease-in-out 2s;
	animation-fill-mode: forwards;
	opacity: 0;
}
 
@keyframes myAni_h1{
	0%{  
	 
	}
	 
	100%{ 
		opacity: 1;
		transform: rotateX(360deg);
		 
	}
}
 
 
@keyframes myAni_p{
	 0%{
	 	transform: skewX(80deg); 
	 }
	 100%{
	 	opacity: 1; 
	 	left: 0;
	 	transform: scaleX(0deg);
	 }
}

#info .btn1{
	animation: myAni_btn1 ease-in-out 1s;
	animation-fill-mode: forwards;
	animation-delay: 1.2s;
}

@keyframes myAni_btn1{
	0%{}
	100%{
		top: 0;
		opacity: 1;
	}	 
}

#info .btn2{
	animation: myAni_btn2 ease-in-out 1s;
	animation-fill-mode: forwards;
	animation-delay: 1.2s;
}

@keyframes myAni_btn2{
	0%{}
	100%{
		top: 0;
		opacity: 1;
	}	 
}