@charset "utf-8";
#banner {
	position:relative;
	width:100%;
	margin:0 auto;
 }
#banner .listshow {
	float:left;
	width:100%;
	background: url(../images/footer-bg.jpg) center no-repeat;
	background-size:cover;
	margin:0 auto;
}

#banner .listshow:before,
#banner .listshow:after{
	content:'';
	display:block;
	width:100%;
	height:28px;
	position:absolute;
	z-index:2;
	background-size: auto;
	background-repeat:repeat-x
	}
	
@media screen and (max-width:990px) {

#banner .listshow:before,
#banner .listshow:after{
 	background-size: auto 70%;
	height:20px
 	}	
	
}

@media screen and (max-width:600px) {

#banner .listshow:before,
#banner .listshow:after{
 	background-size: auto 60%;
	height:17px
 	}	
	
}

 	

#banner .listshow .item {
	position:relative;
	overflow:hidden
}
#banner .listshow .item a {
 	width:100vw;
	height:568px;
	float:left;
 	background-position:center;
	background-size:cover;
	display:block;
	transform:scale(1.075);
	transition:all 15s
}

#banner .listshow .item.slick-active a {
 	transform:scale(1);
 }

#banner .listshow a:focus {
	filter:alpha(opacity=50);
	opacity:0.5;
}
#banner .listshow img {
	float:left;
	width:100%;
	height:auto;
}
#banner .listshow .slick-prev,
#banner .listshow .slick-next {
	position:absolute;
	display:block;
	font-size:0;
	width:32px;
	height:52px;
	z-index:10;
    -webkit-transition:all 0.8s;
    transition:all 0.8s;
	opacity:0;
	background-repeat:no-repeat
}
#banner:hover .listshow .slick-prev,
#banner:hover .listshow .slick-next,
#banner:focus .listshow .slick-prev,
#banner:focus .listshow .slick-next,
#banner .listshow .slick-prev:focus,
#banner .listshow .slick-next:focus{
	opacity:1} 
	
#banner .listshow .slick-prev:before,
#banner .listshow .slick-next:before {
	display:none;
}
#banner .listshow .slick-prev {
	left:1%;
	background-image: url(../images/banner-prev.png);
}
#banner .listshow .slick-next {
	right:1%;
	background-image: url(../images/banner-next.png)
}

#banner:hover .listshow .slick-next,
#banner:hover  .listshow .slick-prev{
	opacity:0.75	}

#banner .listshow .slick-prev:hover,
#banner .listshow .slick-prev:focus {
	opacity:1
}

#banner .listshow .slick-next:hover,
#banner .listshow .slick-next:focus{
	opacity:1
	}

#banner .slick-dots {
	position:absolute;
	width:20%;
	bottom:18px;
	text-align:center;
	margin:0 40%;
	z-index:10;
	opacity:0
}

#banner:hover .slick-dots {
 	opacity:1
}

#banner .slick-dots li {
    display:inline-block;
	width:12px;
	height:12px;
	margin:0 6px;
	padding:0;
}
#banner .slick-dots li button {
	width:12px;
	height:12px;
	font-size:0;
	line-height:0;
	padding:0;
	margin:0;
}
#banner .slick-dots li button:before {
	display:block;
	width:12px;
	height:12px;
	font-size:0;
	line-height:12px;
	opacity:1;   
    background:rgba(0,0,0,.3);   
    transition:opacity .2s ease;
    -webkit-border-radius:50%;
	   -moz-border-radius:50%;
			border-radius:50%;
}
#banner .slick-dots li.slick-active button:before {
    background:rgba(0,0,0,1);
}

@media screen and (min-width:991px) {
	#banner {
		margin:0 auto;
	}	
 
 
 
}

@media screen and (max-width:1200px) {
 #banner .listshow .item a{
 		height:474px;
 
 }	
	
}
@media screen and (max-width:990px) {
	#banner {
		margin:0 auto;
	}	
 
 #banner .listshow .item {
		height: auto;
	}
 #banner .listshow .item a{
 		height:0;
		padding-bottom:45%
 }
 
 
}

#news .container{
	margin:60px  auto} 
@media screen and (max-width:768px){
#news .container{
	margin:50px  auto}	
	}
	
@media screen and (max-width:480px){
#news .container{
	margin:40px  auto}	
	} 	 
  
h2.title{
	font-size:4.78em;
	color:#009078;
	font-weight:normal;
	margin-bottom:23px}
	
@media screen and (max-width:768px){
h2.title{
	font-size:3.78em;}	
	
	}

h2.title span{
	display: inline-block;
    font-size: 33%;
    line-height: 1;
    vertical-align: top;
    margin-left: 10px;
    margin-top: 6px;
    padding: 7px 45px 7px 7px;
    color: #fff;
    background: #009078;
    background: linear-gradient(-120deg, transparent 35px, #009078 0);}
	
#news .item{
	padding:4px 8px;
	position:relative}
	
.item.new:after{/*new icon*/
	position:absolute;
	content:'';
	width:26px;
	height:23px;
	right:23px;
	top:1px;
	background-image:url(../images/icon/new.svg);
	background-image:url(../images/icon/new.png) \9;
	*background-image:url(../images/icon/new.png);
	background-position:center top;
	background-repeat:no-repeat;
	background-size:contain;
	}
		
#banner2{
	margin-left:-8px;
	margin-right:-8px;
	width:calc(100% + 16px);
	position:relative}


	
#news .item h3{
	display:block;
	margin-top:10px;
	color:#000;
	font-weight:normal;
	font-size:1.7em;
	line-height:1.3}
	
/*, .slick-next	*/	
.slider.TRAR .slick-prev, .slider.TRAR .slick-next{
	width:14px;
	height:24px;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	}
	
.slick-prev:before, .slick-next:before{
	display:none}	

.slider.TRAR .slick-prev{
	background-image: url(../images/icon/ar-left.svg);
	background-image: url(../images/icon/ar-left.png) \9;
	*background-image: url(../images/icon/ar-left.png)}	
	
.slider.TRAR .slick-next{
	background-image: url(../images/icon/ar-right.svg);
	background-image: url(../images/icon/ar-right.png) \9;
	*background-image: url(../images/icon/ar-right.png)}
	
.slider.TRAR .slick-prev:hover, #banner2 .slick-prev:focus{
	background-image: url(../images/icon/ar-left-on.svg);
	background-image: url(../images/icon/ar-left-on.png) \9;
	*background-image: url(../images/icon/ar-left-on.png)}	
	
.slider.TRAR .slick-next:hover, #banner2 .slick-next:focus{
	background-image: url(../images/icon/ar-right-on.svg);
	background-image: url(../images/icon/ar-right-on.png) \9;
	*background-image: url(../images/icon/ar-right-on.png)}			
	
.slider.TRAR .slick-prev{
	right:75px; left:auto;
	top:-44px;
	bottom: auto}
	
.slider.TRAR .slick-next{
	right:50px; left:auto;
	top:-44px;
	bottom: auto}
			
.more{
	display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 10px;
    top: -58px;
    border-radius: 50%;
    background-color: #80ba3f;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/icon/more-w.svg);
    background-size: contain;
    transition: all 0.4S;}
	
.more:HOVER{
	background-color:#007461;
	transform:rotate(180deg)}

#about{
	border-top:#7fc7bb 2px solid;
	border-bottom:#7fc7bb 2px solid;
	background: url(../images/home-about-bg.gif);
	position:relative;
	background-attachment:fixed}
	
#about .part{
	width:50%;
	float: left;
	box-sizing:border-box;}	
	
#about .part.info{
  	margin:58px 0;
	position:relative}

 
	
#about .part.info p{
	font-size:17px;
	line-height:1.7;
	max-height:140px;
	overflow:hidden;
	text-align:justify}	
			
#about .R_img{
	position:absolute;
	right:0;
	top:0;
	height:100%;
	width:calc(50% - 190px);
	background:url(../images/home-about-img-bg.jpg) left center no-repeat;
	background-size:cover;
	-webkit-animation-name: left_right1;
    animation-name: left_right1;
    -webkit-animation-duration: 60s;
    animation-duration: 60s;
    -webkit-animation: left_right1 60s infinite linear;
    -webkit-animation-fill-mode: both;
    animation: left_right1 60s infinite linear;
    animation-fill-mode: both;}
	
#about .part .v_img {
    width: 380px;
    background: url(../images/home-about-man-1.png) center top no-repeat;
    height: 330px;
    position: absolute;
    top: 0;
    z-index: 2;
}

#about .part.info .more{
	background-image:url(../images/icon/more-g.svg);
	background-image:url(../images/icon/more-g.png) \9;
	*background-image:url(../images/icon/more-g.png);
	background-color: transparent;
	top: 0;
    right: 0px;}
	
	
#about .part.info .more:hover, #about .part.info .more:focus{
	background-image: url(../images/icon/more-w.svg);
	background-image:url(../images/icon/more-w.png) \9;
	*background-image:url(../images/icon/more-w.png);
 	background-color:#007461;
	transform:rotate(180deg)}
	
.z_box .mast_txt *{
	display:inline-block}	
	
@media screen and (max-width:666px) {
#about .R_img, #about .part .v_img, #about .part.imgs{
	display:none}
 
#about .part{
	width:100%;}
	
.z_box .mast_txt{
	opacity:0}	
	
#news .item h3{
	font-size:1.5em}	
	
#about .part.info{
	padding-right:0px;
 	margin:40px 0;
	}
#about .part.info .more{
 
    right: 0px;}			
 
}

 

#honor .container{
	padding:60px 0}
	
@media screen and (max-width:768px) {
#honor .container{
	padding:50px 0}	
}
@media screen and (max-width:480px) {
#honor .container{
	padding:40px 0}	
}
#honor #banner3{
	position:relative}
	
#honor #banner3	.item{
	padding:4px 18px 0 18px;
	text-align:center}
	
#honor #banner3	.item .man{
	display:inline-block;
	position:relative;
	width:100%;
	margin-bottom:12px;}
	
#honor #banner3	.item .man.new:after{
	content:'N';
	display:block;
	width:23px;
	height:23px;
	position:absolute;
	z-index:2;
	right:15px;
	top:8px;
	background-color:#e11c24;
	color:#fff;
	font-weight:bold;
	line-height:23px;
	text-align:center;
	border-radius:50%;
	-webkit-animation-name: roten;
    animation-name: roten;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation: roten 3s infinite;
    -webkit-animation-fill-mode: both;
    animation: roten 3s infinite;
    animation-fill-mode: both;}	
	
	
@keyframes roten{
    0% { transform:rotate(0deg)}
   76% { transform:rotate(0deg)}
   78% { transform:rotate(-15deg)}	
   80% { bottom:rotate(0deg);}
   82% { transform:rotate(15deg)}
   84% { bottom:rotate(0deg);}
   86% { bottom:rotate(-15deg);}
   88% { bottom:rotate(0deg);}	
   90% { transform:rotate(-15deg)}	
   92% { bottom:rotate(0deg);}
   94% { transform:rotate(15deg)}
   96% { bottom:rotate(0deg);}
   98% { bottom:rotate(-15deg);}
   100% { bottom:rotate(0deg);}
}

@-webkit-keyframes roten{
    0% { transform:rotate(0deg)}
   76% { transform:rotate(0deg)}
   78% { transform:rotate(-15deg)}	
   80% { bottom:rotate(0deg);}
   82% { transform:rotate(15deg)}
   84% { bottom:rotate(0deg);}
   86% { bottom:rotate(-15deg);}
   88% { bottom:rotate(0deg);}	
   90% { transform:rotate(-15deg)}	
   92% { bottom:rotate(0deg);}
   94% { transform:rotate(15deg)}
   96% { bottom:rotate(0deg);}
   98% { bottom:rotate(-15deg);}
   100% { bottom:rotate(0deg);}
}	
	
	
	
#honor #banner3	.item .man .z_box {
	border-radius:50%;}	
	
#honor #banner3	.item .man .z_box .z_img{
	padding-bottom:100%;
	background-image: url(../images/no_pic_man.jpg)}	
	
#honor #banner3 .name{
	display:block;
	font-size:1.8em;
	margin-bottom:10px;
	color:#000;}
	
#honor #banner3	.honor_info{
	display:block;
	font-size:1.4em;
	color:#808080}
	
	
/*foreBox*/
#foreBox{
	padding:60px 0;
	background:url(../images/banner4-bg.jpg) center no-repeat;
	background-size:cover;
	-webkit-animation-name: left_right1;
    animation-name: left_right1;
    -webkit-animation-duration: 40s;
    animation-duration: 40s;
    -webkit-animation: left_right1 40s infinite linear;
    -webkit-animation-fill-mode: both;
    animation: left_right1 40s infinite linear;
    animation-fill-mode: both;}
	
	
@media screen and (max-width:700px) {
	
#foreBox{
	padding:40px 0;
	-webkit-animation-name: left_right1;
    animation-name: left_right1;
    -webkit-animation-duration: 80s;
    animation-duration: 80s;
    -webkit-animation: left_right1 80s infinite linear;
    -webkit-animation-fill-mode: both;
    animation: left_right1 80s infinite linear;
    animation-fill-mode: both;}	
}
	
@media screen and (min-width:769px) {
#foreBox{
	background-attachment:fixed}	
	
}
	
#foreBox .part{
	width:50%;
	float:left;
	box-sizing:border-box;
	padding:10px 0}

#foreBox .part .ban{
	position:relative}
	
#foreBox .part .ban:hover{
	box-shadow:0 0 15px rgba(0,0,0,0.7)}
		
#foreBox .part:nth-child(odd){
	padding-right:10px;}	
		
#foreBox .part:nth-child(even){
	padding-left:10px;}

@media screen and (max-width:666px) {
#foreBox .part{
	width:100%;
 	}
		
#foreBox .part:nth-child(odd){
	padding-right:0px;}	
		
#foreBox .part:nth-child(even){
	padding-left:0px;}	
	
	
	}



	
#foreBox h2.title {
     color: #fff;
 }
 
#foreBox h2.title span{    
	color: #009078;
    background: #fff;
	font-weight:bold;
    background: linear-gradient(-120deg, transparent 35px, #fff 0);
}
 
	
#foreBox .item .z_img{
	padding-bottom:57.6%;}
	
	
#foreBox .item .mask_g_txt{
	position:absolute;
	width:100%;
	bottom:0;
	left:0;
	box-sizing:border-box;
	padding:10px;
	color:#fff;
	background: -moz-linear-gradient(left,  rgba(0,134,69,0.9) 0%, rgba(128,186,63,0.9) 100%); 
	background: -webkit-linear-gradient(left,  rgba(0,134,69,0.9) 0%,rgba(128,186,63,0.9) 100%); 
	background: linear-gradient(to right,  rgba(0,134,69,0.9) 0%,rgba(128,186,63,0.9) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6008645', endColorstr='#e680ba3f',GradientType=1 );
	padding-right:40px;
	z-index:2
}


#foreBox .item .mask_g_txt:hover, #foreBox .item .mask_g_txt:focus{
	background:rgba(0,0,0,0.6)}

#foreBox .item .mask_g_txt:after{
	position:absolute;
	content:'';
	right:8px;
	bottom:15px;
	width:27px;
	height:27px;
	display:block;
	background:url(../images/icon/search-btn-w.svg) center no-repeat;
	background-size:contain;
	z-index:2
	}

#foreBox .item .mask_g_txt time{
	display:block;
	font-size:1.3em;
	font-weight:normal;
	margin-bottom:8px;}
	
#foreBox .item .mask_g_txt span{
	font-size:2em;
	font-weight:bold;
	display:block}		
@media screen and (max-width:666px) {
#foreBox .item .mask_g_txt span{
	font-size:1.75em;
 }		
	
}
	
#foreBox .slick-prev, #foreBox .slick-next{
	width:24px;
	height:38px;
	top:calc(50% - 19px);
	background-position:center;
	background-color:rgba(0,0,0,0.3);
	background-repeat:no-repeat;
	z-index:3;
	opacity:0.3;
	transition:all 0.5s
	}	

#foreBox .ban:hover .slick-prev, #foreBox .ban:hover .slick-next{
	opacity:1}

@media screen and (max-width:768px) {
#foreBox .slick-prev, #foreBox .slick-next{
 	opacity:1;
 	}	
	
	}
	
#foreBox .slick-prev{
	left:0;
	background-image:url(../images/icon/left-w.svg);
	background-image: url(../images/icon/left-w.png) \9;
	*background-image: url(../images/icon/left-w.png);}
	
#foreBox .slick-next{
	right:0;
	background-image: url(../images/icon/right-w.svg);
	background-image: url(../images/icon/right-w.png) \9;
	*background-image: url(../images/icon/right-w.png)}		
	
#foreBox .slick-prev:hover, #foreBox .slick-next:hover,
#foreBox .slick-prev:focus, #foreBox .slick-next:focus{
	background-color:rgba(0,0,0,0.8);
 
	}
	
#foreBox .slick-dots{
	top:10px;
	right:10px;
	z-index:3;
	width:auto;
	max-height:50px}	

#foreBox .slick-dots li{
	width:auto;
	height:auto}
				
#foreBox .slick-dots li button{
	width:14px;
	height:14px;
	border-radius:50%;
	border:2.5px solid #fff;
	background-color:transparent;
	box-shadow:1px 1px 6px rgba(0,0,0,0.6)}
	
#foreBox .slick-dots li.slick-active button{
	background-color:#fff;}	
	
#foreBox .slick-dots li button:before{
	display:none}
	
#AD{ padding:60px 0}
#AD .slider .z_img{
	padding-bottom:46.55%;
	border:1px solid #a7a7a7}
	
#AD .slider .z_box:after{
	background-image: url(../images/icon/link.svg);
    background-image: url(../images/icon/link.png) \9;
    *background-image: url(../images/icon/link.png);
    background-size: 50px;
	}	
	
#AD .slider a.item{
	padding:0 8px}
	
#AD .slider{
	}	
	
#AD	 #banner8{
	position:relative;
	width:calc(100% + 16px);
	margin-left:-8px;
	margin-right:-8px;}