@charset "UTF-8";
body{}
.clearfix {
    +height: 1%;
}
.banner{width: 100%;min-height: 550px;background: url(../images/ban.jpg) center no-repeat;}
.banner .container{position: relative;}
.bantit{padding-top:90px;font-size: 0.3rem;text-transform: none;text-align: left;display: block;}
.bantit h1{color: #fff;line-height: 0.7rem;font-weight: 100;}
.subheader{margin:1% 0 1.5% 0;font-size: 0.26rem;color: #fff;line-height: 0.4rem;}
.banner a.btn{padding: 10px;width: 120px;background-color: #008a52;color: #fff;font-size: 0.16rem;text-align: center;display: block;vertical-align: middle;position: relative;overflow: hidden;}
.banner a.btn img{width: auto !important;visibility: visible;margin-left: 5px;margin-top: -5px;vertical-align: middle;}
a.btn1{z-index: 5;}
a.btn1::before{content: "";width: 0;background-color: #ccc;color: #fff;z-index: -1; height: 100%;transition:0.2s ease all;position: absolute;top: 0;left: 0;}
a.btn1:hover::before{width: 100%;}
a.btn1:hover{color: #008a52;}
.banlist{width: 90%;margin:0px auto;position: absolute;bottom: -100%;left: 50%;margin-left: -45%;}
.banlist li{float: left;width: 25%; transition:0.5s;padding:3% 0;background-color: #fff;outline:1px solid #fff;}
.banlist li a{display: block;/*height: 215px;*/}
.banlist li span{color: #000;display: block;font-size: 0.22rem;margin-bottom: 0;line-height: 0.4rem;text-decoration: none;text-transform: uppercase;text-align: center;}
.banlist li i{display: block;margin:10% auto;width: 64px;height: 64px;transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;}
.banlist li p{font-size: 0.16rem;text-align: center;line-height: 0.4rem;color: #666;}
.banlist li em{display: block;width:45px;margin:30px auto 15px;background-color: #333;height: 4px;}
.ico1{background: url(../images/ico1.png) no-repeat;}
.ico2{background: url(../images/ico2.png) no-repeat;}
.ico3{background: url(../images/ico3.png) no-repeat;}
.ico4{background: url(../images/ico4.png) no-repeat;}
.banlist li:hover .ico1{background: url(../images/ico1-1.png) no-repeat;}
.banlist li:hover .ico2{background: url(../images/ico2-1.png) no-repeat;}
.banlist li:hover .ico3{background: url(../images/ico3-1.png) no-repeat;}
.banlist li:hover .ico4{background: url(../images/ico4-1.png) no-repeat;}
.banlist li:hover{outline:50px solid #fff;position:relative;margin-top:-20px;z-index: 999;}
.banlist li:hover i{transform: rotate(360deg);-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);}
/*.banner.current .banlist{bottom: -80%;opacity: 1;}*/
/*理念*/
div.hlinian{margin-top: 10%;max-width: 1200px;}
.hlnleft{width: 49%;float: left;position: relative;bottom:-100px;opacity: 0;}
.hlnright{width: 49%;float: right;position: relative;bottom:-100px;opacity: 0;}
.hlnlbox{width:90%;padding:6% 5%;background-color: #fff;transition: 0.5s;position: relative;}
.highlight-title{font-size: 0.3rem;line-height: 0.4rem;text-align: center; color: #333;font-weight: normal;text-transform: uppercase;position: relative;bottom:-100px;opacity: 0;}
.highlight-title i{display: block;background-color: #333;width: 90px;height: 3px;margin-top: 5%;}
.highlight-title.current{bottom: 0;opacity: 1;}
.hlnlbox .highlight-title{text-align: left;}
.hlnltxt{font-size: 0.16rem;color: #666;line-height: 0.25rem;margin:1.5% 0 3% 0;}
a.font_a{font-size:0.15rem;color: #333;display: block;text-decoration: underline;}
a.font_a:hover{color: #008a52;text-decoration: underline;}
.hlnlbox a.font_a{margin:6% 0 6% 0;}
.hlnlbox img.fc,.hlnrright img{width: 100%;transition: 0.5s;}
.hlnrleft{width: 50.75%;}
.hlnrright{width: 46.5%;}
.hlnright .hlnlbox{margin-bottom: 7%;}
.hlnlwenzi{margin-top: 5%;}
.hlnlwenzi h2{color: #8ba4b0;font-size: 0.3rem;font-weight: 100;}
.hlnlbox:hover{box-shadow: #999 0px 5px 20px;}
.hlnlbox:hover img{transform: scale(1.02);}
.hlinian.current .hlnleft{bottom:0;opacity: 1;}
.hlinian.current .hlnright{bottom:0;opacity: 1;}

/*外装产品*/
.mt30{margin-top: 3%;}
div.highlight-title1 i{margin:1% auto 0;}
.wzproduct{height: auto; width: 960px; background-color: #fff;margin:3% auto 1%;position: relative;}
.wzproduct .chroma-gallery .chrg-description{ position:relative; font-size:0.16rem; color:#333; opacity:1;background:none;}
.wzproduct .chroma-gallery{width: 96%;margin:0 auto;padding:3% 0;position: relative;left: 1%;}
.chrg-item:hover .chrg-description{color: #008a52;} 
.wzpbox:hover a.wzpimg img{ transform:translateY(-10px) scale(1.05);box-shadow:0 8px 15px 0 rgba(0,0,0,.1);}
.grid{
    width:290px;
    min-height:100px;
    margin: 0 10px 40px 10px;
    background:#fff;
    font-size:12px;
    float:left;
}
.grid img{display: block;max-width: 100%;}

/*案例展示*/
.hcase{max-width: 1100px;margin:3% auto;position: relative;bottom:-150px;opacity: 0;}
.hcase.current{bottom: 0;opacity: 1;}
.hcase li{width: 23%;margin:1%;height: 230px;position: relative;overflow: hidden;float: left;}
.hcase li em{width: 100%;height: 100%;display: block;position: relative;overflow: hidden;}
.hcase li em img{width: 100%;height: 100%;transition: 0.5s;margin:auto; display:block;}
.hcase li span{width: 100%;height:0;padding-top: 37%;text-align: center;font-size: 0.20rem;color: #fff;text-align: center; display: block;opacity: 0; position: absolute;top:0;left: 0;background-color: rgba(0,0,0,0.7);transition: 0.5s;}
.hcase li:hover span{height: 100%;opacity: 1;}
.hcase li:hover em img{-webkit-transform: scale(1.08);
  -moz-transform: scale(1.08);
  -o-transform: scale(1.08);
  transform: scale(1.08);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;}
.hcase a.btn{width: 15%;height: 0.45rem;line-height: 0.45rem;margin:3% auto;background-color: #008a52;color: #fff;font-size: 0.16rem;text-align: center;display: block;vertical-align: middle;position: relative;overflow: hidden;}











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

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

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

}
@media screen and (max-width: 1024px) { 
.hcase{width: 99%;}
.hcase li{width: 31%;}
.hcase li em img{width: 100%;margin:0px auto;height: auto}
div.hlinian{margin-top: 18%;}

}
@media screen and (max-width: 960px) { 
.hcase li{width: 48%;}
.hcase li span{font-size: 0.26rem;}
.hcase a.btn{width: 35%;}
.highlight-title i{width: 50px;}
div.wzproduct{width: 80%;}


}
@media screen and (max-width: 640px) { 
#header-main{padding: 4%;}
.banner{background: url(../images/ban.jpg) center left no-repeat;}
.hcase li{width: 95%;margin:3% auto;float: none;}
div.wzproduct,.banlist{width: 95%;}
.banlist{margin-left: -47%;bottom: -60%;}
.footerbottom span,.footerbottom a{font-size: 0.22rem;}
.footphone,.footphone span{font-size: 0.24rem;}
.wzproduct .chroma-gallery .chrg-description,.hlnltxt,a.font_a{font-size: 0.24rem;line-height: 0.35rem;}
.hlnrleft,.hlnrright,.hlnleft,.hlnright{width: 100%;float: none;}
.banlist li p{display: none;}
.hlnlwenzi{margin-bottom: 5%;}
}