@font-face{font-family:iconfont2;src:url(https://css02.v15cdn.com/m408/fonts/iconfont.woff2?t=1743412092559) format('woff2'),url(https://css02.v15cdn.com/m408/fonts/iconfont.woff?t=1743412092559) format('woff'),url(https://css02.v15cdn.com/m408/fonts/iconfont.ttf?t=1743412092559) format('truetype')}
.icon-arrow-long-r{font-family:iconfont2!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.icon-arrow-long-r:before{content:"\e629"}
.flex{display:flex;flex-wrap:wrap}
.hotproduct{padding:4% 0px}
.hotproduct-l{width:23%;padding-right:3%}
.hotproduct-r{width:77%;position:relative;overflow:hidden}
.hotpro-list{display:flex;flex-wrap:wrap;transition:transform .8s ease-in-out,opacity .2s ease-in-out;transform:scale(0);position:absolute;top:0px;left:0px;opacity:0}
.hotpro-list-act{transform:scale(1);position:static;opacity:1}
.hotpro-list li{width:32%;margin:0px 2% 20px 0px}
.hotpro-list li:nth-child(3n){margin-right:0}
.hotpro-list li>a{display:block;overflow:hidden;position:relative}
.hotpro-box{position:absolute;bottom:-60px;background:rgba(42,42,42,.85);color:#FFFFFF;padding:8px 15px;width:100%;display:flex;justify-content:space-between;left:0px;align-items:center;transition:all .2s ease-in-out}
.hotpro-img{border:1px solid #EEEEEE;overflow:hidden;text-align:center}
.hotpro-img img{width:100%}
.hotpro-title{font-size:var(--fontsize16);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:50px}
.hotpro-box i,.hotpro-box em{font-size:var(--fontsize24)}
.hotpro-list li:nth-child(3n){margin-right:0px}
.hotpro-list li:nth-child(n+4){margin-bottom:0px}
.hotpro-list li:hover .hotpro-box{bottom:0px}
.hotpro-list li:hover img{transform:scale(1.05)}
.hotprocate{border-left:1px solid #BFBFBF;margin:20px 0px 50px;padding-right:10%}
.hotprocate li{padding:10px 0px 10px 20px;position:relative;font-size:var(--fontsize16);color:var(--fontcolor);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .2s ease-in-out}
.hotprocate li::before{content:'';width:2px;height:100%;position:absolute;top:0px;left:0px;background:var(--color);opacity:0;transition:all .2s ease-in-out}
.hotprocate .hotprocate-act::before,.hotprocate li:hover::before{opacity:1}
.hotprocate .hotprocate-act,.hotprocate li:hover{color:var(--color)}
.hotproduct .home-title{text-align:left}
@media(max-width:1367px){.hotproduct-l{width:25%}
.hotproduct-r{width:75%}}
@media (max-width:1024px){.hotproduct-l, .hotproduct-r{width:100%}.hotproduct-l{padding-bottom:6%}
.hotpro-list li{width:49%;margin-right:2%}
.hotpro-list li:nth-child(3n){margin-right:2%}
.hotpro-list li:nth-child(2n){margin-right:0px}
.hotprocate,.hotproduct-l{padding-right:0px}
.hotpro-box{bottom:0px}}
@media(max-width:768px){
.item-con{display:none}
.preview-container .thumbnail-box{margin-top:0px}
.nav2 .item-info{display:none}
.pdshow-l,.pdshow-r{width:100%}
.hotprocate,.hotproduct-l .home-more{display:none}
.hotproduct-l .home-title{text-align:center}}
@media(max-width:540px){
.logo img{max-height:45px !important}
.container,.container-s{padding-left:15px;padding-right:15px}
.productcate{margin-left:15px;margin-right:15px}
.mob-menu span{height:2px}
.home-title,.location-title,.writetous h3, .writetous h5{font-size:var(--fontsize26)}
.about-r-num,.page-tit{font-size:var(--fontsize22)}
.foot-list div h6{font-size:var(--fontsize20)}
.project-name{font-size:var(--fontsize18)}
.faq-list .project-name{font-size:var(--fontsize16)}
.hotpro-title,.newpages-list>div{font-size:var(--fontsize14)}
.inquiry-form input{width:100%;margin-bottom:10px}
.document-text{padding-bottom:10px}
.project-content{margin-top:2px}
.document-title,.newsdetails-cont p{margin-bottom:10px}
.newspage-ninelist-1 li,.products-ninelist-1 li{width:49%;margin-right:2%}
.newspage-ninelist-1 li:nth-child(3n),.products-ninelist-1 li:nth-child(3n){margin-right:2%}
.newspage-ninelist-1 li:nth-child(2n),.products-ninelist-1 li:nth-child(2n){margin-right:0px}
.newsdetails .flex img{width:100%!important;margin:1% 0}
.newpages-list>div{width:50%}}
@media(max-width:415px){.hotprocate li{left:-1px}
.hotprocate{margin:20px 0px}
.hotpro-box{padding:6px}}