@charset "utf-8";





/*1024px*/

@media (min-width:960px) {



/* --- 公用样式 --- */

.pc{display:block;}

.wap{display:none;}

.wrap{max-width:997px; margin:0 auto;}

.flex{display: flex; flex-wrap: wrap;}







/* --- 分页 --- */

.page-showpage{margin-top:50px; margin-bottom:50px; text-align:center;}

.page-showpage a{display:inline-block; border:1px solid #efefef; padding:8px 15px; border-radius:4px; margin-left:2px; margin-right:2px; font-size: 14px;}

.page-showpage a.on{ background:#FDD000; color:#333; border:1px solid #FDD000; }







/* --- 按钮 --- */

.page-btn a{background: #FDD000; padding: 10px 30px; font-weight: bolder; font-size: 18px;}







/* --- 头部 --- */

.page-header {border-bottom: 1px solid #efefef;}

.page-header .box{ margin-top: 30px; display: flex; align-items: flex-end;}



/* logo */

.page-header .box .logo{width: 250px; height: 88px; margin-bottom: -10px; position: relative; z-index: 20;}







/* --- 栏目 --- */

.page-column{margin: 50px 0; border-left: 5px solid #FDD000; padding-left: 15px; margin-bottom: 30px; position: relative;} 

.page-column h3{font-size: 28px; font-weight: bolder; margin-bottom: 8px;}

.page-column p{color: #999;}

.page-column .more{position: absolute; right: 0; top: 20%; font-size: 14px; border: 1px solid #ddd; padding:10px 15px; border-radius:5px;}

.page-column .more:hover{background: #f9f9f9;}







/* --- 导航 --- */

.page-nav{ margin-left:auto}

.page-nav ul{display: flex; align-items: center;}

.page-nav ul li{width: 119px; text-align: center; font-size: 14px;}

.page-nav ul li a{display: block; padding-bottom: 25px; border-bottom: 5px solid #fff; transition: all .3s;}

.page-nav ul li a.now{border-bottom: 5px solid #FDD000; font-weight:bold; color: #FDD000;}

.page-nav ul li a:hover{border-bottom: 5px solid #FDD000;}



/* roll */

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







/* --- 底部 --- */

.page-footer{background: #333; color: #fff; padding:20px 50px; font-size: 14px; padding-bottom: 20px;}

.page-footer .text{display: flex; justify-content: space-between;}

.page-footer .text p{ line-height: 200%; color: #999;}







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

.page-product .item{width: 240px; margin-bottom: 30px; text-align: center;}

.page-product .item:not(:nth-child(4n)){margin-right: 12px;}

.page-product .item .pic{ border: 1px solid #efefef; height: 240px; overflow: hidden; margin-bottom: 15px; background: #fff;  transition: all .3s;}

.page-product .item .text{font-weight: bolder; font-size: 14px;}

.page-product .item:hover .pic{border: 1px solid #FDD000;  box-shadow: 10px 10px 20px #ececec;}







/* --- 导航 --- */

.page-path{padding: 30px 0; font-size: 12px;}

.page-path a{padding-right: 25px; margin-right: 10px; background: url(../images/arrow.svg) no-repeat right; background-size: 15px;}







/* --- 右侧 --- */

.page-right{position: fixed; right: 5px; top: 50%; z-index: 300;}



/* li */

.page-right li{background: #FAD100;margin-bottom: 5px; display: flex; align-items: center; border-radius:5px; width: 60px; overflow: hidden; cursor: pointer;}

.page-right li .icon{text-align: center; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;}

.page-right li .icon img{width: 30px;}

.page-right li .title{color:#937900;  opacity: 0; width: 0;  height: 60px; line-height: 60px;}

.page-right li .title .img{display: none;}



/* hover */

.page-right:hover li{width: auto;}

.page-right:hover li .title{ opacity: 1; width: auto; padding-right: 20px; height: auto;}

.page-right:hover li .title .img{display: block; width:100px; margin-bottom: 20px;}

.page-right:hover li .title .img img{ width: 100px;}

[data-appear=in-view]{opacity:0;-webkit-transition:opacity 650ms ease,top .6s cubic-bezier(.215,.61,.355,1),-webkit-transform .6s cubic-bezier(.215,.61,.355,1);transition:opacity 650ms ease,top .6s cubic-bezier(.215,.61,.355,1),-webkit-transform .6s cubic-bezier(.215,.61,.355,1);transition:opacity 650ms ease,transform .6s cubic-bezier(.215,.61,.355,1),top .6s cubic-bezier(.215,.61,.355,1);transition:opacity 650ms ease,transform .6s cubic-bezier(.215,.61,.355,1),top .6s cubic-bezier(.215,.61,.355,1),-webkit-transform .6s cubic-bezier(.215,.61,.355,1)}[data-appear=in-view][data-has-appear="1"]{opacity:1}[data-appear=in-view][data-appear-from][data-has-appear="1"]{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}[data-appear=in-view][data-appear-from-no-trans][data-has-appear="1"]{opacity:1;top:0}[data-appear=in-view][data-appear-from=below]{-webkit-transform:translate3d(0,30px,0);transform:translate3d(0,30px,0)}[data-appear=in-view][data-appear-from=above]{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}[data-appear=in-view][data-appear-from=above-light]{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);-webkit-transition:opacity .6s ease,-webkit-transform .6s cubic-bezier(.215,.61,.355,1);transition:opacity .6s ease,-webkit-transform .6s cubic-bezier(.215,.61,.355,1);transition:opacity .6s ease,transform .6s cubic-bezier(.215,.61,.355,1);transition:opacity .6s ease,transform .6s cubic-bezier(.215,.61,.355,1),-webkit-transform .6s cubic-bezier(.215,.61,.355,1)}[data-appear=in-view][data-appear-from=below-light]{-webkit-transform:translate3d(0,15px,0);transform:translate3d(0,15px,0);-webkit-transition:opacity .6s ease,-webkit-transform .6s cubic-bezier(.215,.61,.355,1);transition:opacity .6s ease,-webkit-transform .6s cubic-bezier(.215,.61,.355,1);transition:opacity .6s ease,transform .6s cubic-bezier(.215,.61,.355,1);transition:opacity .6s ease,transform .6s cubic-bezier(.215,.61,.355,1),-webkit-transform .6s cubic-bezier(.215,.61,.355,1)}[data-appear=in-view][data-appear-from-no-trans=above]{top:-15px;position:relative}











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



/* --- banner --- */

.home-banner{background: #fff; height: 500px;}

.home-banner .item{height: 500px;}

.home-banner .item .box{height: 100%; display: flex; align-items: center; }



/* item01 */

.home-banner .item-01 .content{width: 511px; height: 185px; background: #fff; border-radius: 20px; margin: 0 auto;  background-color:rgba(255,255,255,0.6); text-align: center;} 

.home-banner .item-01 .content .title p{font-size: 36px; color: #333; font-weight: bolder; font-weight: 900; height: 100px; line-height: 100px;}

.home-banner .item-01 .content .text{background: #FDD000; height: 56px; text-align: center; width: 355px; margin: 0 auto; line-height: 56px; font-size: 22px; font-weight: bolder;  font-weight: bolder; font-weight: 900; }



/* item02 */

.home-banner .item-02 .wrap{ height: 100%; position: relative;  width: 100%;}

.home-banner .item-02 .content{position: absolute; right: 0%; bottom: 20%; }

.home-banner .item-02 .content .title p{ margin-bottom: 15px; font-size: 52px; font-weight: bolder; font-weight: 900; color: #FDD000;}

.home-banner .item-02 .content .text{font-size: 32px; color: #fff; margin-bottom: 40px;} 



/* item03 */

.home-banner .item-03 .content{width: 490px; height: 265px; background: #fff; border-radius: 20px; margin: 0 auto;  background-color:rgba(255,255,255,0.6); text-align: center;} 

.home-banner .item-03 .content .title{margin-top: 30px;}

.home-banner .item-03 .content .title p{font-size: 36px; color: #333; font-weight: bolder; font-weight: 900; margin-bottom: 20px;}

.home-banner .item-03 .content .text{font-size: 18px; margin-bottom: 20px;}

.home-banner .item-03 .content .year{background: #FDD000; height: 56px; text-align: center; width: 355px; margin: 0 auto; line-height: 56px; font-size: 22px; font-weight: bolder;  font-weight: bolder; font-weight: 900; }



/* item04 */

.home-banner .item-04 .wrap{ height: 100%; position: relative;  width: 100%;}

.home-banner .item-04 .content{position: absolute; right: 0%; bottom: 15%; width: 500px; 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: 40px; font-weight: 900; color: #FDD000;}

.home-banner .item-04 .content .text{font-size: 16px; color: #fff; font-weight: lighter; line-height: 180%;} 

.home-banner .item-04 .content .text p{font-size: 16px; color: #fff; font-weight: lighter; line-height: 180%;} 







/* --- 涂装未来 --- */

.home-future{}



/* 服务 */

.future-service{ width: 490px; position: relative;}



/* content */

.future-service .content{position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; text-shadow: 0 2px 1px #333;}

.future-service .content h3{font-size: 28px; color: #fff; margin-bottom: 10px; font-weight: bolder;}

.future-service .content p{color: #fff; line-height: 150%;}



/* photo */

.future-photo{width: 504px; margin-left: auto;}

.future-photo .item{margin-bottom: 2px; overflow: hidden;}







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



/* column */

.home-case .column{text-align: center; padding: 50px 0;}

.home-case .column h3{font-size: 28px; font-weight: bolder; margin-bottom: 10px;}

.home-case .column p{color: #999; font-size: 14px;}



/* 内容 */

.home-case .case-list .item{width: 25%; height: 250px; 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: 15px; font-size: 25px; font-weight: 600;}

.home-case .case-list .title p{position: relative;}

.home-case .case-list .title p::before{content: ""; height: 2px; background: #333; left: 0; bottom: -20px; position:absolute; height: 3px; width: 20%; transition: all .3s;}



/* 内容 - 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: 150px; height: 150px; background: #000; display: block; border-radius: 100px; text-align: center; line-height: 150px; background-color:rgba(0,0,0,0.3); color: #fff; font-size: 18px; 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; }



/* list */

.home-case .case-list .item a{ border: 5px solid rgba(255, 255, 255, 0);}

.home-case .case-list .item a:hover{ border: 5px solid rgba(255, 255, 255, 1);}



/* hover */

.home-case .case-list .title:hover p::before{width: 80%;}

.home-case .list-01 .item a:hover{background: #FDD000; color: #333;}

.home-case .list-02 .item a:hover{background: #333; color: #fff;}

.home-case .list-03 .item a:hover{background: #0E649C; color: #fff;}







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



/* hd */

.home-product .hd{margin-bottom: 50px;}

.home-product .hd ul{display: flex; align-items: center; justify-content: center;}

.home-product .hd ul li{padding: 0 30px; height: 38px; line-height: 38px; border-right: 1px solid #efefef; cursor: pointer;}

.home-product .hd ul li.on{background:#FDD000 ; font-weight: bolder;}



/* bd */

.home-product .bd .box{display: flex; flex-wrap: wrap;}









/* --- 关于我们 --- */

.home-about{ margin-bottom: 100px;}



/* 内容 */

.about-dep{width: 560px; margin-top: 10px;}

.about-dep .dep{line-height: 150%; margin-bottom: 30px;}

.about-dep .dep h3{margin-bottom: 20px;}

.about-dep .dep p{line-height: 180%;}

.about-dep .more{ margin-top: 50px;} 

.about-dep .more a{background:#FDD000; padding: 10px 20px; transition: all .3s; font-size: 14px;}

.about-dep .more a:hover{background: #333; color: #fff;}



/* 内容 */

.about-photo{width: 400px; margin-left: auto; position: relative;}

.about-photo::after{content: ""; width: 308px; height: 415px; background:#FDD000; position: absolute; right: 0; top: -20px; z-index: -1;}

.about-photo img{margin-top: 50px;}







/* --- 新闻 --- */

.home-news{margin-bottom: 50px;}







/* --- 新闻中心 --- */

.news-center{ width: 550px;}

.news-center .center-list{ border-top: 2px solid #efefef; padding-top: 30px;}

.news-center .center-list li{border-bottom: 1px solid #efefef; display:flex; align-items: center; padding-bottom: 15px; margin-bottom: 15px;}

.news-center .center-list li .pic{width: 116px; height: 88px; overflow: hidden; margin-right: 20px;}

.news-center .center-list li .text h3{margin-bottom: 10px; font-size: 14px;}

.news-center .center-list li .text h3 a:hover{color: #888;}

.news-center .center-list li .text p{color: #999; font-size: 12px;}







/* --- 行业动态 --- */

.news-trade{margin-left: auto; width: 400px;}

.news-trade .trade-list{ border-top: 2px solid #efefef; padding-top: 30px;}

.news-trade .trade-list li{line-height: 250%; font-size: 14px; position: relative; padding-left: 15px;}

.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; }

.product-box .hd ul li{height: 50px; line-height: 50px; padding: 0 30px; font-size: 14px; cursor: pointer; margin-right: 10px;}

.product-box .hd ul li.on{background:#FDD000; font-weight: bolder;}



/* 内容 - dep */

.product-box .bd .dep{background: #fff; padding: 30px; line-height: 180%; font-size: 14px; color: #666; border-bottom: 1px solid #efefef;}

.product-box .bd .dep p{line-height: 180%;}



/* 内容 - list */

.product-box .bd .list{padding: 30px; background: #fff; display: flex; flex-wrap: wrap;}

.product-box .bd .list .item{width: 225px; margin-bottom: 30px; text-align: center;}

.product-box .bd .list .item:not(:nth-child(4n)){margin-right: 10px;}





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

.product-photo{width: 600px; margin: 0 auto; margin-bottom: 50px;}

.product-photo img{}

.product-photo .swiper-pagination-bullet{background: #999;}





/* --- 介绍 --- */

.product-about {margin-bottom: 50px;}

.product-about h3{text-align: center; font-size: 25px; margin-bottom: 30px;}

.product-about .content p{line-height: 200%; font-size: 13px; color: #666;}





/* --- 详情 --- */

.product-details{margin-bottom: 50px;}















/* ------ 新闻详情 ------ */



/* --- 标题 --- */

.news-show .title{text-align: center; margin-bottom: 30px}





/* --- 信息 --- */

.news-show .info{display: flex; justify-content: center; font-size: 14px; margin-bottom: 30px; color: #999;}

.news-show .info .date{margin-right: 20px}





/* --- 内容 --- */

.news-show .content{margin-bottom: 80px}

.news-show .content p{ margin-bottom: 20px; line-height: 200%;}





/* --- 其他 --- */

.news-show .other{margin-bottom: 30px;}

.news-show .other ul{display: flex; justify-content: space-between;}

.news-show .other ul li{display:flex; font-size: 14px;}

.news-show .other ul li .title{margin-right: 20px; color: #999;}











/* ------ 关于我们 ------ */

.about-box{padding: 100px 0; display: flex; justify-content: space-between;}



/* --- 介绍 --- */

.about-box .box-dep{width: 60%;}

.about-box .box-dep .title{margin-bottom: 20px; font-size: 28px;}

.about-box .box-dep .content {line-height: 180%;} 

.about-box .box-dep .content p{line-height: 180%;} 



/* --- 图片 --- */

.about-box .box-pic{width: 30%; }











/* ------ 联系我们 ------ */

.contanct-show {padding: 100px 0 0 0; display: flex; align-items: center;}



/* --- map --- */

.contanct-show .map{width: 100%;}





/* --- contact --- */

.contanct-show .contact{margin-left:10%; width: 45%;}

.contanct-show .contact h3{margin-bottom: 30px;}

.contanct-show .contact .list li{line-height: 200%; font-size:13px;}



/* --- qrcode --- */

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













/* ------ 案例 ------ */

.case-box{ margin-bottom: 50px;}



/* --- 切换 --- */

.case-box .hd{margin-bottom: 30px; border-bottom: 1px solid #efefef;}

.case-box .hd ul{display: flex;}

.case-box .hd ul li{height: 50px; line-height: 50px; padding: 0 30px; font-size: 14px; cursor: pointer; margin-right: 10px;}

.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: 24%; height: 240px; overflow: hidden; background: #f60; position: relative; margin-bottom: 15px;}

.case-box .bd .item:not(:nth-child(4n)){margin-right: 1.2%;}





/* 内容 - title */

.case-box .bd .title{display: flex; align-items: center; padding-left: 20px; position: relative;}

.case-box .bd .title h3{margin-bottom: 15px; font-size: 25px; font-weight: 600;}

.case-box .bd .title p{position: relative;}

.case-box .bd .title p::before{content: ""; height: 2px; background: #333; left: 0; bottom: -20px; position:absolute; height: 3px; width: 20%; transition: all .3s;}



/* 内容 - 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: 150px; height: 150px; background: #000; display: block; border-radius: 100px; text-align: center; line-height: 150px; background-color:rgba(0,0,0,0.3); color: #fff; font-size: 18px; transition: all .3s;}



/* 内容 - pic */

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



/* 内容 - hover */

.case-box .bd .item a:hover{background: #FDD000; color: #333;}





}





/*1280*/

@media (min-width:1280px) and (max-width:1679px)  {

	

}





/* --- 1024px--- */

@media (min-width:960px) and (max-width:1279px)   {



.wrap{max-width:94%;}



}



/* --- 960px--- */

@media (min-width:960px) and (max-width:960px)   {

}