﻿body,html{ background-color: #fff;}
.footer_content h4 {color: #010101;}
.footer_content p{ color:#010101;}
.search_input span:nth-of-type(1) input{ width: 526px;}


.wrap{ background-color: #fff; }
.header_banner{ width: 100%;  background-color: gray; position: relative; overflow: hidden;}
.header_banner ol{ position: absolute; left: 50%; bottom: 30px; -webkit-transform: translate(-50%,0);
   -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
     -o-transform: translate(-50%,0);
        transform: translate(-50%,0);}
.header_banner ol li{cursor: pointer; width: 6px; height: 6px; border-radius: 3px; background-color: #fff; float: left; margin: 0 3px; transition:all 1s ease;}
.header_banner ol li.current{ width: 24px; transition:all 1s ease; background-color: #bdd630;}
.header_banner>a{ width: 38px; height: 84px; display: block; position: absolute; top: 50%; -webkit-transform: translate(0,-50%);
   -moz-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
     -o-transform: translate(0,-50%);
        transform: translate(0,-50%);  z-index: 10; background: url(../images/banner_buttonl.png) 0 0 no-repeat;cursor: pointer;}
.header_banner .banner_l{ left: 0; }
.header_banner .banner_r{ right: 0;  background-image: url(../images/banner_buttonr.png);}
.banner_yueshu li img{width: 100%;}
.pagination {
  position: absolute;
  left: 0;
  text-align: center;
  bottom:20px;
  width: 100%;
  z-index: 3;
}
.pagination span{opacity: 1;}
.swiper-pagination-switch {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  /*box-shadow: 0px 1px 2px #555 inset;*/
  margin: 0 3px;
  cursor: pointer;
  transition:1s all ease;
}
.swiper-active-switch {
  background: #bdd441;
  width: 25px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.zhezhao{display: none;}


.header_banner{ width: 100%;  background-color: gray; position: relative; overflow: hidden;}
/*.header_banner .swiper-container{height: 480px;}*/

.banner_model{ position: absolute;width: 100%;  background-color: rgba(0,0,0,.1); left: 0; top: 0;width: 100%; height: 100%; }
.banner_content{ position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%);
   -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
     -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%); text-align: center;} 
.banner_content span{ }
.banner_content p{font-size: 36px; line-height: 52px; font-weight: bold;}
.banner_content h2{ line-height: 48px; font-size: 36px; font-weight: bold;white-space:nowrap;}
.banner_content  button{ padding: 8px 26px;
    border: 2px solid #fff;
    color: #fff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: normal;
    display: inline-block;background: none; margin-top: 20px;}
.banner_content  button:hover{ color:#111; background-color: #fff;}
.content_wrap{ width: 100%; min-height: 330px;}
.content_wrap .content{ margin:  0 auto; width: 60%; max-width: 1168px;}

.kechengneirong{ width: 100%;}
.yixuanze{ width: 65%; float: left;}
.label_neirong h2{  font-weight: bold; color:#333; font-size: 12px; margin: 5px 0;}
.label_neirong p b{ display: inline-block;  padding: 0px 5px; background-color: #F6F7F9; color:#9B9B9B; font-weight: normal;  font-size: 9px;-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;}

.banner_yueshu{}
.banner_yueshu li{}
.label-text{ text-align: center;}
.label-text p{ font-size: 12px; font-family: '宋体'; line-height: 18px; margin-top: 10px;   padding: 0 10px;   text-align: left;}
.label-text a{ margin-top: 48px; width: 50%; height: 30px; line-height: 30px; font-size: 12px; font-family: '宋体'; display: inline-block; text-align: center; border: 1px solid #fff;}
.filters_wrap{ width: 100%; box-shadow: 0px 1px 3px 0 rgba(0,0,0,.2); text-align: center;}
#info {
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;              
    background:#fcf8e3;
    border:1px solid  #fbeed5;
    width:95%;
    max-width:900px;
    margin:0 auto 40px auto;
    font-family:arial;
    font-size:12px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
}

    #info .info-wrapper {
        padding:10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;

    }
    
    #info a {
        color:#c09853;
        text-decoration:none;
    }
    
    #info p {
        margin:5px 0 0 0;
    }


.container{position:relative;width:100%;margin:0 auto;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;	}
#filters {
    margin: 0 auto;
    display: inline-block;
    padding: 0;
    list-style:none;
    margin-bottom: -4px;
}

#filters li {
    float:left;
    
}

#filters li span {
    display: block;
    padding:14px 20px; 
    text-decoration:none;
    color:#666;
    cursor: pointer;
    border-bottom: 4px solid #fff;
}

#filters li span.active {
    color:#bdd630;
    border-bottom: 4px solid #bdd630; 
}
 /*#portfoliolist{width: 1366px;margin: 20px auto 0;    display: flex;justify-content: center;flex-wrap: wrap;}*/
 #portfoliolist{width: 1366px;margin: 20px auto 0;}
 #portfoliolist .portfolio{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;width:19%;*width:19%;margin:0.5%;display:none;float:left;overflow:hidden;}
.portfolio-wrapper{overflow:hidden;position:relative!important;background:#666;cursor:pointer;-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;}
.label_neirong{padding: 5px 0 10px 10px;}
.portfolio img{max-width:100%;position:relative;-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;}
.portfolio .label{position:absolute;width:100%;height:100%;bottom:-100%;left:0;}
.portfolio .label-bg{background:rgba(0,0,0,.4);width:100%;height:100%;position:absolute;top:0;left:0;}
.portfolio .label-text{color:#fff;position:relative;z-index:500;padding:5px 8px;}
.portfolio .text-category{display:block;font-size:9px;}
#portfoliolist .portfolio:hover{ box-shadow: 0px 1px 3px 0 rgba(0,0,0,.2); transition:all .5s ease;}
@media only screen and (min-width:960px) and (max-width:1366px){
	#portfoliolist{
		width:960px;
		margin: 0 auto;
	}
	 #portfoliolist .portfolio{width: 23%; margin:1%;}
}
/* #Tablet (Portrait) */
@media only screen and (min-width:768px) and (max-width:959px){
	#portfoliolist{
		width:768px;
		margin: 0 auto;
	}
}


/*  #Mobile (Portrait) - Note:Design for a width of 320px */
@media only screen and (max-width:767px){
	#portfoliolist{
		width:95%;
	}
	
	#portfoliolist .portfolio{
		width:48%;
		margin:1%;
	}
}


/* #Mobile (Landscape) - Note:Design for a width of 480px */
@media only screen and (min-width:480px) and (max-width:767px){
	#portfoliolist{
		width:100%;
	}
}
@media screen and (max-width:1320px){
    #portfoliolist .portfolio{ min-height: 200px; height:auto;}
    .label-text p{ overflow:hidden;text-overflow:ellipsis; -o-text-overflow:ellipsis;white-space:nowrap;}
    .label-text p b{ display: none;}
    .label-text a{ margin-top: 20%;}   
    .banner_content h2{line-height: 30px;font-size: 26px;margin-bottom: 20px;}
    .banner_content p{font-size: 26px;}
}

@media (min-width:641px) and (max-width:1025px){ 
	.wrap{padding-top: 43px;}
	
    /*.header_banner{ height: 300px;}*/
    /*.banner_yueshu li{height: 300px;}*/
    /*.banner_model{height: 300px;}*/
   .header_banner ol{bottom: 10px;}
    .banner_content p {font-size: 20px;line-height: 34px;}
    .banner_content h2 {line-height: 30px;font-size: 20px;}
    .banner_content  button{ width: 100px; height: 28px; line-height: 28px;margin-top: 5px; font-size: 12px;padding: 0;}
    #portfoliolist .portfolio{ min-height: 168px; }
}
@media screen and (max-width:640px){
	.wrap{padding-top: 43px;}
	
	.header_banner .banner_l,.header_banner .banner_r{display: none;}
    .label_neirong{height: 70px;}
    .nav ul li:nth-of-type(3){ background-image: url(../images/zixun_lit.png);}
    .nav ul li:nth-of-type(4){ background-image: url(../images/jiangshi_lit.png);}
    .nav ul li:nth-of-type(5){ background-image: url(../images/xueyuan.png);}
    .nav ul li:nth-of-type(6){ background-image: url(../images/gongzuoshi_lit.png);}
    .nav ul li:nth-of-type(7){ background-image: url(../images/hualang.png);}
    .nav ul li:nth-of-type(8){ background-image: url(../images/dengluzhuce.png);}
    .banner_content{ width: 90%;}
    .banner_content p{ font-size: 12px; line-height: 1.3;margin-bottom: 10px;}
    .banner_content h2{ font-size: 12px; line-height: 1.2;margin-bottom: 0px;}
    .zhezhao{position: absolute;z-index: 2;width: 100%; height: 100%; left: 0; top: 0;display: block;}
    .banner_content button{ display: none;}
    .header_banner,.banner_model,.banner_yueshu li{ /*height: 280px!important;*/}
    .banner_yueshu li{overflow: hidden;}
    #filters li span.active{ border: 0; background-color: #bdd630; color:#FFF; -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;}
    #filters li{ padding:5px 0;font-size: 12px;width: 33.3333%;}
    #filters li span{ padding:3px 8px 3px; display: inline-block;font-size: 12px;}
    #portfoliolist{ width: 100%; margin: 0 auto; padding: 10px 10px 20px;}
    #portfoliolist .portfolio{ width: 50% !important; min-height:190px;}
    .filters_wrap{ padding: 10px 0;}
    .portfolio .label{display: none;}
    .pagination{bottom: 0;}
}

