@charset "utf-8";
/*wap*/
@media screen and (min-width:0px)  and  (max-width:959px)  {
* {-webkit-tap-highlight-color:transparent;}
html,body{max-width:750px; margin:0 auto;}
html{font-size:62.5%}
.pc{display:none;}
.wap{display:block;}
.icon{font-family:iconfont;}
span{display:block;}
.wrap{max-width:750px; margin:0 auto;}
input{-webkit-user-select:text !important; display:block; cursor:pointer;}
button{display:block; cursor:pointer;}
img{display:block;}
a{cursor:pointer;}
em,i,p,span{line-height:100%;}

@media only screen and (min-width:321px) {html {font-size:62.5%!important}}
@media only screen and (min-width:361px) {html {font-size:70.31%!important}}
@media only screen and (min-width:376px) {html {font-size:73.24%!important}}
@media only screen and (min-width:481px) {html {font-size:94%!important}}
@media only screen and (min-width:561px) {html {font-size:109%!important}}
@media only screen and (min-width:641px) {html {font-size:125%!important}}


/* --- 头部 --- */
.page-header .box{display:flex; align-items:center; justify-content:space-between; position:relative; background: #FAD100; padding: 1rem;}

/* logo */
.page-header .box .logo{position: relative; z-index: 20; width:40%;}

/* roll */
.page-header.roll{position:fixed; left:0; top:0; width:100%; z-index:300; background:#fff; }

/* line */
.page-header .box .nav-show{ position:absolute; right:1.5rem; top:0%; width:3rem; height:100%; background:url(../images/nav.svg) no-repeat center center; background-size:3rem; cursor:pointer;}
.page-header .box .nav-show.close{background:url(../images/close.svg) no-repeat center center; background-size:2.4rem;}


/* --- 分页 --- */
.page-showpage{margin-top:1.5rem; margin-bottom:1.5rem; text-align:center;  border-bottom: 1rem solid #efefef; padding-bottom: 1.5rem;}
.page-showpage a{display:inline-block; border:1px solid #efefef; padding:.5rem 1rem; border-radius:4px; margin-left:2px; margin-right:2px; font-size: 14px;}
.page-showpage a.now{ background:#FDD000; color:#333; border:1px solid #FDD000; }


/* --- nav --- */
.page-nav{ position:absolute; left:0; top:0; width:100%; top:6.2rem; background:#fff; display:none; z-index:999;}
.page-nav a{ display:block; border-bottom:1px solid #efefef; text-align:center; padding:1.2rem; font-size:1.4rem;}
.page-nav a.now{ color:#fff; background:#1E3135;}


/* --- 按钮 --- */
.page-btn a{background: #FDD000; padding: 1rem 1.5rem; font-weight: bolder; font-size: 1.4rem;}


/* --- 栏目 --- */
.page-column{margin:2.5rem 0; border-left: 5px solid #FDD000; padding-left: 1.5rem;  position: relative;} 
.page-column h3{font-size: 2.2rem; font-weight: bolder; margin-bottom: .8rem;}
.page-column p{color: #999;}
.page-column .more{position: absolute; right: 0; top: 20%; font-size: 1.4rem; border: 1px solid #ddd; padding:10px 15px; border-radius:5px;}
.page-column .more:hover{background: #f9f9f9;}


/* --- 产品 --- */
.page-product .item{margin-bottom: 30px; text-align: center; width:48%;}
.page-product .item .pic{ border: 1px solid #efefef; height: 14rem; overflow: hidden; margin-bottom: .5rem; background: #fff;  transition: all .3s;}
.page-product .item .text{font-size: 1.2rem; line-height: 180%;}
.page-product .item:hover .pic{border: 1px solid #FDD000;  box-shadow: 10px 10px 20px #ececec;}


/* --- 底部 --- */
.page-footer{background: #333; color: #fff; padding:1.5rem; font-size: 1.2rem; margin-bottom: 4rem;}
.page-footer .text{}
.page-footer .text p{ line-height: 200%; color: #999;}


/* --- 导航 --- */
.page-path{font-size: 1.2rem; padding: 1.5rem;}
.page-path a{padding-right:1.5rem;  background: url(../images/arrow.svg) no-repeat right; background-size: 15px;}



/* --- 右侧 --- */
.page-right{position: fixed; bottom: 0%; z-index: 300; left: 0; width: 100%;}
.page-right ul{display: flex;}

/* li */
.page-right li{background: #FAD100;  width:25%; cursor: pointer; height: 4rem;}
.page-right li .icon{text-align: center; display: flex; align-items: center; justify-content: center; height:4rem;}
.page-right li .icon img{width: 2rem;}
.page-right li .title{color:#937900;  position: absolute; bottom: 4rem; height: 4rem; line-height: 4rem; background: #FAD100; display: none; text-align: center; right: 0; padding: 0 1.5rem; width: 100%;}
.page-right li .title .img{position: absolute; top: -30rem; right: 17%;}
.page-right li .title .img img{width: 20rem; border: 3rem solid #1E3135;}

/* hover */
.page-right li:hover .title{display:block;}








/* ------ 首页 ------ */

/* --- banner --- */
.home-banner{background: #fff; height: 30rem;}
.home-banner .item{height: 30rem;}
.home-banner .item .box{height: 100%; display: flex; align-items: center; }

/* item01 */
.home-banner .item-01 .content{width: 90%; background: #fff; border-radius: 1rem; margin: 0 auto;  background-color:rgba(255,255,255,0.6); text-align: center; padding-bottom: 1.5rem;} 
.home-banner .item-01 .content .title p{font-size: 2rem; color: #333; font-weight: bolder; font-weight: 900; padding: 1.8rem 0;}
.home-banner .item-01 .content .text{background: #FDD000; text-align: center;  font-size: 1.4rem; font-weight: bolder;  font-weight: bolder; font-weight: 900; margin: 0 1.5rem; line-height: 3.5rem; border-radius: 1rem;}

/* item02 */
.home-banner .item-02 .wrap{ height: 100%; position: relative;  width: 100%;}
.home-banner .item-02 .content{position: absolute; right: 10%; bottom: 20%; }
.home-banner .item-02 .content .title p{ margin-bottom: 1rem; font-size: 2.8rem; font-weight: bolder; font-weight: 900; color: #FDD000;}
.home-banner .item-02 .content .text{font-size: 1.4rem; color: #fff; margin-bottom: 40px;} 

/* item03 */
.home-banner .item-03 .content{width: 90%; background: #fff; border-radius: 20px; margin: 0 auto;  background-color:rgba(255,255,255,0.6); text-align: center; padding-bottom: 1.5rem;} 
.home-banner .item-03 .content .title{margin-top: 30px;}
.home-banner .item-03 .content .title p{font-size: 2rem; color: #333; font-weight: bolder; font-weight: 900; margin-bottom: 20px;}
.home-banner .item-03 .content .text{font-size: 1.4rem; margin-bottom: 20px;}
.home-banner .item-03 .content .year{background: #FDD000;  text-align: center; font-size: 1.4rem; font-weight: bolder;  font-weight: bolder; font-weight: 900; margin: 0 1.5rem; line-height: 3.5rem; }

/* item04 */
.home-banner .item-04 .wrap{ height: 100%; position: relative;  width: 100%;}
.home-banner .item-04 .content{position: absolute; right: 0%; bottom: 15%; background: #000; padding: 30px;  background-color:rgba(0,0,0,0.5); padding-bottom: 20px;}
.home-banner .item-04 .content .title p{ margin-bottom: 15px; font-size: 2.5rem; font-weight: 900; color: #FDD000;}
.home-banner .item-04 .content .text{font-size: 1.4rem; color: #fff; font-weight: lighter; line-height: 180%;} 
.home-banner .item-04 .content .text p{font-size: 1.4rem; color: #fff; font-weight: lighter; line-height: 180%;} 




/* --- 涂装未来 --- */
.home-future{}

/* 服务 */
.future-service{position: relative;}

/* content */
.future-service .content{position: absolute; bottom: 0; left: 0; width: 100%; padding: 1.5rem; text-shadow: 0 2px 1px #333; margin-bottom: .2rem; }
.future-service .content h3{font-size: 2.4rem; color: #fff; margin-bottom: 1rem; font-weight: bolder;}
.future-service .content p{color: #fff; line-height: 150%; font-size: 1.4rem;}

/* photo */
.future-photo{ }
.future-photo .item{margin-bottom: .2rem; overflow: hidden;}



/* --- 案例展示 --- */

/* column */
.home-case .column{text-align: center; padding: 3.5rem 0;}
.home-case .column h3{font-size: 2.8rem; font-weight: bolder; margin-bottom: 1rem;}
.home-case .column p{color: #999; font-size: 1.4rem;}

/* 内容 */
.home-case .case-list {display: flex; flex-wrap: wrap;}
.home-case .case-list .item{width:50%; height: 15rem; overflow: hidden; background: #f60; position: relative;}

/* 内容 - title */
.home-case .case-list .title{display: flex; align-items: center; padding-left: 20px; position: relative;}
.home-case .case-list .title h3{margin-bottom: 1rem; font-size: 1.6rem; font-weight: 600;}
.home-case .case-list .title p{position: relative; font-size: 1.2rem;}

/* 内容 - text */
.home-case .case-list .item .text{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.home-case .case-list .item .text a{width: 10rem; height: 10rem; background: #000; display: block; border-radius: 100px; text-align: center; line-height: 10rem; background-color:rgba(0,0,0,0.3); color: #fff; font-size: 1.4rem; transition: all .3s;}

/* 内容 - pic */
.home-case .case-list .item .pic {height: 100%; background: #ccc;}

/* item - 01 */
.home-case .case-list .item.item-01{background: #FDD000;}

/* item - 02 */
.home-case .case-list .item.item-02{background: #444;}
.home-case .case-list .item.item-02 h3{color: #fff;}
.home-case .case-list .item.item-02 p{color: #fff;}
.home-case .case-list .item.item-02 p::before{ background: #fff; }

/* item - 03 */
.home-case .case-list .item.item-03{background:#0E649C;}
.home-case .case-list .item.item-03 h3{color: #fff;}
.home-case .case-list .item.item-03 p{color: #fff;}
.home-case .case-list .item.item-03 p::before{ background: #fff; }



/* --- 产品 --- */
.home-product{border-bottom: 1rem solid #efefef;} 

/* hd */
.home-product .hd{background: #f5f5f5;}
.home-product .hd ul{display: flex; align-items: center; flex-wrap: wrap;}
.home-product .hd ul li{height: 3.2rem; line-height: 3.2rem;  cursor: pointer; width: 33.333%; text-align: center; font-size: 1.2rem;}
.home-product .hd ul li.on{background:#FDD000 ; font-weight: bolder;}

/* bd */
.home-product .bd .box{display: flex; flex-wrap: wrap; padding: 1rem; justify-content: space-between;}



/* --- 关于我们 --- */
.home-about{}

/* 内容 */
.about-dep{ padding: 1.5rem; padding-top: 0;}
.about-dep .dep{line-height: 150%; margin-bottom: 1.5rem;}
.about-dep .dep h3{margin-bottom: 1rem; font-size: 1.4rem;}
.about-dep .dep p{line-height: 180%; font-size: 1.2rem;}
.about-dep .more{ margin-top: 2rem; margin-bottom: 2rem;} 
.about-dep .more a{background:#FDD000; padding: .5rem 1.5rem; transition: all .3s; font-size: 1.2rem;}
.about-dep .more a:hover{background: #333; color: #fff;}

/* 内容 */
.about-photo{ margin-left: auto; position: relative;}




/* --- 新闻 --- */
.home-news{margin-bottom: 1.5rem;}



/* --- 新闻中心 --- */
.news-center{ }
.news-center .center-list{ padding:0 1.5rem; border-bottom: 1rem solid #efefef;}
.news-center .center-list li{border-bottom: 1px solid #efefef; display:flex; align-items: center; padding-bottom: 1.5rem; margin-bottom: 1.5rem;}
.news-center .center-list li .pic{width: 10rem; height: 8rem; overflow: hidden; margin-right: 1rem;}
.news-center .center-list li .text h3{margin-bottom: 1rem; font-size: 1.2rem;}
.news-center .center-list li .text h3 a:hover{color: #888;}
.news-center .center-list li .text p{color: #999; font-size: 1.2rem;}
.news-center .center-list li:last-child{border-bottom: none; margin-bottom: 0;}



/* --- 行业动态 --- */
.news-trade{margin-left: auto; }
.news-trade .trade-list{ padding:0 1.5rem;}
.news-trade .trade-list li{line-height:3rem; font-size: 1.2rem; position: relative; padding-left: 1.5rem; height: 3rem; overflow: hidden;}
.news-trade .trade-list li::before{content: ""; width: 4px; height: 4px; background: #ddd; position: absolute; left: 0; top: 50%; border-radius: 100px;}






/* ------ 产品 ------ */

/* --- 产品列表 --- */
.product-box{background: #f5f5f5; overflow: auto; padding-bottom: 50px;}

/* 切换 */
.product-box .hd{margin-bottom: 0px;}
.product-box .hd ul{display:flex; flex-wrap: wrap;}
.product-box .hd ul li{height: 3.2rem; line-height: 3.2rem;  cursor: pointer; width: 50%; text-align: center; font-size: 1.2rem;}
.product-box .hd ul li.on{background:#FDD000; font-weight: bolder;}

/* 内容 - dep */
.product-box .bd .dep{background: #fff; padding: 1.5rem; line-height: 180%; font-size: 1.2rem; color: #666; border-bottom: 1px solid #efefef;}
.product-box .bd .dep p{line-height: 180%;}

/* 内容 - list */
.product-box .bd .list{padding: 1rem; background: #fff; display: flex; flex-wrap: wrap; justify-content: space-between;}


/* --- 产品图 --- */
.product-photo{ border-bottom: 1rem solid #efefef;}
.product-photo img{}
.product-photo .swiper-pagination-bullet{background: #999;}


/* --- 介绍 --- */
.product-about { padding: 1.5rem;}
.product-about h3{text-align: center; font-size: 1.8rem; margin-bottom: 1rem;}
.product-about .content p{line-height: 200%; font-size:1.4rem; color: #666;}


/* --- 详情 --- */
.product-details{margin-bottom: 50px;}





/* ------ 关于我们 ------ */
.about-box{ padding: 1.5rem;}

/* --- 介绍 --- */
.about-box .box-dep{ margin-bottom: 2.5rem;}
.about-box .box-dep .title{margin-bottom: 1rem; font-size: 2rem;}
.about-box .box-dep .content {line-height: 180%;} 
.about-box .box-dep .content p{line-height: 180%; font-size: 1.4rem;} 

/* --- 图片 --- */
.about-box .box-pic{}





/* ------ 新闻详情 ------ */
.news-show{padding: 1.5rem;  overflow: hidden;} 

/* --- 标题 --- */
.news-show .title{text-align: center; margin-bottom: 1.5rem;}
.news-show .title h1{ font-size: 2.4rem;}


/* --- 信息 --- */
.news-show .info{display: flex; justify-content: center; font-size: 1.2rem; margin-bottom: 1rem; color: #999;}
.news-show .info .date{margin-right: 1rem}


/* --- 内容 --- */
.news-show .content{ margin-bottom: 2.5rem;}
.news-show .content p{line-height: 200%; font-size: 1.4rem; margin-bottom: 1.5rem;}


/* --- 其他 --- */
.news-show .other{}
.news-show .other ul{}
.news-show .other ul li{display:flex; font-size: 14px;}
.news-show .other ul li .title{margin-right: 20px; color: #999;}





/* ------ 联系我们 ------ */
.contanct-show{}

/* --- contact --- */
.contanct-show .contact{ padding: 1.5rem;}
.contanct-show .contact h3{margin-bottom: 1.5rem;}
.contanct-show .contact .list li{line-height: 200%;}

/* --- qrcode --- */
.contanct-show .qrcode{margin-top: 20px;}





/* ------ 案例 ------ */
.case-box{}

/* --- 切换 --- */
.case-box .hd{border-bottom: 1px solid #efefef;}
.case-box .hd ul{display: flex; flex-wrap: wrap;}
.case-box .hd ul li{height: 3.5rem; line-height: 3.5rem;  font-size: 1.2rem; cursor: pointer; width: 33.333%; text-align: center;}
.case-box .hd ul li.on{background:#FDD000; font-weight: bolder;}


/* --- 内容 --- */
.case-box .bd{}
.case-box .bd .box{display: flex; flex-wrap: wrap;}
.case-box .bd .item{width: 50%; height: 15rem; overflow: hidden; background: #f60; position: relative;}

/* 内容 - title */
.case-box .bd .title{display: flex; align-items: center;  position: relative;}
.case-box .bd .title h3{margin-bottom: 1rem; font-size: 1.6rem; font-weight: 600;}
.case-box .bd .title p{position: relative; font-size: 1.2rem;}

/* 内容 - text */
.case-box .bd .item .text{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.case-box .bd .item .text a{width: 10rem; height: 10rem; background: #000; display: block; border-radius: 100px; text-align: center; line-height: 10rem; background-color:rgba(0,0,0,0.3); color: #fff; font-size: 1.4rem; transition: all .3s;}

/* 内容 - pic */
.case-box .bd .item .pic {height: 100%; background: #ccc;}


}