.header{ background-color: #333333;position: fixed;left: 0;    top: 0;    z-index: 99; }
.top{display: flex;width: 94%;max-width: 1600px;margin:auto;justify-content: space-between; align-items: center; height: 80px;}
.top .logo img{ max-height: 60px;}
.top .nav ul{ display: flex;}
.top .nav ul li{}
.top .nav ul li>p{padding:0;margin:0}
.top .nav ul li>p>a{color:#fff; line-height: 80px; font-size: 18px; font-weight: bold; text-decoration: none; display: inline-block; padding: 0 20px;}
.top .nav ul li:hover>p>a{color:var(--yx_Color);}
.top .nav ul li:hover .sub-nav-outer{display: block; }
.top .nav-outer{display: flex;  align-items: center;}
.top .nav-outer .handle{display: flex;  align-items: center;}
.top .nav-outer .handle a{color:#fff;  font-weight: bold; text-decoration: none;  padding: 0 20px; font-size: 12px;}
.top .nav-outer .handle span.fa.lang{ font-size: 12px; font-weight: bold; display: inline-block; width: 26px; height: 26px; border-radius: 50%; border:2px solid #fff; text-align: center; line-height: 22px;}
.top .nav-outer .handle>.get-price{font-size:14px;color: #fff;background: var(--yx_Color);line-height:2;position: relative;cursor: pointer; border-radius: 2px;}
.top .nav-outer .handle>.get-price a{ font-weight: normal;}
.top .nav-outer .handle>.get-price:after { content: '';display: block; position: absolute; width: 0px;height: 0px; border-left: 5px solid var(--yx_Color);
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    left: 10%;
}
.top .nav-outer .handle>.bar-icon{display: none;}
.top .nav-outer .handle>.bar-icon a{color:#fabe00}
.top .nav-outer .handle>.bar-icon.on a.close{display: none;}
.top .nav-outer .handle>.bar-icon.on a.open{display: inline;}
.top .nav-outer .handle>.bar-icon a.close{display: inline;}
.top .nav-outer .handle>.bar-icon a.open{display: none;}

.sub-nav-outer{display: none; background-color: rgba(250, 250, 250); position: absolute; left:0; top:80px; width: 100%; padding:60px 0 ; border-bottom: 5px solid var(--yx_Color)}
.sub-nav-outer .top-sub-nav{
    display: flex; justify-content: space-between; width: 94%;max-width: 1600px; margin: auto;
}

.sub-nav-outer .top-sub-nav .sub-nav-list .sub-nav-title{ font-size: 26px; margin-bottom: 20px; font-weight: bold; color:#333; line-height: 1;}
.sub-nav-outer .top-sub-nav img{width: 33%; max-height: 213px; object-fit: cover;}
.sub-nav-outer .top-sub-nav .sub-nav-list{width: 60%;  }
.sub-nav-outer .top-sub-nav ul{display: flex; justify-content: start;}
.sub-nav-outer .top-sub-nav ul li{ width: 29%; margin-right:4.3%; border-bottom: 1px solid #ddd;  display: flex; justify-content: space-between; align-items: center; transition: all ease .3s}
.sub-nav-outer .top-sub-nav ul li::after{content: ""; width: 6px; height: 6px; border-top:1px solid #333; border-right: 1px solid #333;transform: rotate(45deg);  transition: all ease .3s}
.sub-nav-outer .top-sub-nav ul li:hover{color: #fabe00; border-color:#fabe00}
.sub-nav-outer .top-sub-nav ul li:hover::after{border-color:#fabe00}
.sub-nav-outer .top-sub-nav ul li:hover a{color: #fabe00;}
.sub-nav-list ul li a{display: block; text-decoration: none; color:#333; line-height: 2.5; transition: all ease .3s}
.sub-nav-outer.pro-nav{ background: url('/static/img/nav_bg.jpg') no-repeat; padding:0 }

.sub-nav-outer.pro-nav .top-sub-nav{justify-content: start;}
.cate-nav-list{width: 32%; padding:60px 0}
.cate-nav-list dl{display: flex; padding:15px 30px; align-items: center; cursor: pointer;}
.cate-nav-list dl.on{background-color: #fff;}
.top-sub-nav .cate-nav-list dl dd{margin-right: 20px;}
.top-sub-nav .cate-nav-list dl dd img{ max-height: 60px; max-width: 180px; width:120px; object-fit:contain;}
.pro-nav-list{width: 38%; background-color: #fff;  padding:60px 30px}

.top-sub-nav .pro-nav-list ul{display: none;}
.top-sub-nav .pro-nav-list ul.on{display: block}
.top-sub-nav .pro-nav-list ul li{width: 100%; justify-content: start; border:none;}
.top-sub-nav .pro-nav-list ul li::after{display: none;}
.top-sub-nav .pro-nav-list ul li::before{content: ""; width: 6px; height: 6px; border-top:1px solid #333; border-right: 1px solid #333;transform: rotate(45deg);  transition: all ease .3s; margin-right: 20px;}
.top-sub-nav .pro-nav-list ul li:hover::before{border-color: #fabe00;}
.top-sub-nav .pro-nav-list ul li a{display: block; text-decoration: none; color: #333; line-height: 1.6; padding:15px 0}

.right-nav-box{ width: 30%;  padding:60px 0 60px 60px}
.right-title{font-size: 26px;}
.right-nav-box .right-nav ul{flex-direction: column;}
.right-nav-box .right-nav ul li{width: 80%; padding:8px 20px; border:2px solid #ccc; margin:10px 0 }
.right-nav-box .right-nav ul li a{color:#333; text-decoration: none;}
.right-nav-box .right-nav ul li:hover{border-color: #fabe00; background-color: #fabe00;color:#fff }
.right-nav-box .right-nav ul li:hover::after{border-color: #fff;}
.right-nav-box .right-nav ul li:hover a{color:#fff}
.right-nav-box .right-phone{color:#fabe00; font-size: 30px;}
.right-nav-box .right-phone span{font-size: 22px; color:#888}
@media screen and (max-width: 1024px) {
    .top{ height: 60px;}
    .top .logo img{max-height: 40px; }
    .top .nav{display: none;}
    .top .nav-outer .handle .search-icon{display: none;}
    .top .nav-outer .handle .change_lang{display: none;}
    .top .nav-outer .handle .get-price{display: none;}
    .top .nav-outer .handle>.bar-icon{display: block;} 
    .top .nav-outer .handle>.bar-icon>a{font-size: 26px;}
}
.mobile-nav{width: 100vw; height: calc(100vh - 60px); z-index: 999; position: fixed; top:60px; left:100vw; background-color: #fff; transition: all ease .3s}
.mobile-nav.on{left:0}
.mobile-nav>ul>li{ border:1px solid #eee; padding:10px 20px; position: relative;}
.mobile-nav>ul>li p{margin: 0; font-size: 18px;}
.mobile-nav>ul>li p a{text-decoration: none; color: #333; font-weight: bolder;}
.mobile-nav>ul>li>i{position: absolute; right: 20px; top:14px; }
.mobile-nav>ul>li>div.mob-sub-nav{display: none;}

.mob-sub-nav{ padding:10px; border-radius: 5px; background-color: #eee; margin-top:10px;}
.mob-sub-nav>ul>li a{padding:8px 10px; display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: #333;}






.banner{position: relative;height: calc(100vw/3);max-height: 680px;background: #000;overflow: hidden; opacity: 0.9;background-size: cover;    position: relative;     }
.banner::after{position: absolute; content:""; background-image: linear-gradient(to top, rgb(0, 0, 0, .5) 7%, rgba(0, 0, 0, 0) 100%); height: 100px; bottom: 0; width: 100%; z-index: 1;}
.breadcrumb{position: absolute; bottom: 50px;color:#fff; width: 100%; z-index: 9;}
.breadcrumb ul{display: flex;  margin: 0 auto; justify-content: center;}
.breadcrumb a{color:#fff; text-decoration: none; font-size: 14px;}
.breadcrumb li:first-child::before{ content: ""; margin:0 }
.breadcrumb li::before{content: ">"; margin:0 10px; }

.sub-nav{background-color: rgba(250,250,250,1);border-bottom: 1px solid #e1e1e1; width: 100%;}
.sub-nav ul{display: flex;  margin: 0 auto; justify-content: center;}
.sub-nav ul li{overflow: hidden;}
.sub-nav ul li a{font-size:24px;transition: all ease .3s;display: inline-block;color: #222;padding: 22px 80px; line-height: 42px; text-decoration: none; position: relative;}
.sub-nav ul li a::before {content: '';display: block;width: 0px;position: absolute;bottom: -16px;left: 50%;transform: translate(-50%,-50%);height: 0px;opacity: 0;transition: all 0.6s; border-bottom: 8px solid #8b764c;border-left: 10px solid transparent;border-right: 10px solid transparent}
.sub-nav ul li a::after {content: '';display: block;width: 0;height: 3px;bottom: 0;left: 50%;position: absolute;background: #8b764c;transition: all 0.6s;transform: translateX(-50%)}
.sub-nav ul li:hover a::after,.sub-nav ul li.on a::after {width: 100% }
.sub-nav ul li:hover a::before,.sub-nav ul li.on a::before{opacity: 1;bottom: -2px;}
.sub-nav ul li:hover a,.sub-nav ul li.on a{color: #4a4a4a;background:#fabe00; }

@media screen and (max-width: 1024px){
    .banner{height: calc(100vw/2 + 30px);}
    .breadcrumb{position: absolute; bottom: 10px;color:#fff; width: 98%; left:1%; z-index: 9;}
    .breadcrumb li::before{margin:0 3px;}
}
@media screen and (max-width: 414px){
    .sub-nav{display: none;}
}

.relas-box{width: 100%;background-color: #fff; padding:30px 0}
.relas-box .relas{width: 85%; max-width: 1600px;  margin:auto;}
.relas-box .relas .relas-title{ display: inline-block; margin-top: 0px;margin-bottom: 0px; border-radius: 20px 0 20px 0; background:#fabe00; padding: 0px 50px; line-height: 3;font-size: 18px;color: rgba(74,74,74,1); text-align: center; font-weight: bold;  }
.relas-box .relas  .relas-lists{padding:35px; background-color: rgba(246,246,246,1);}
.relas-box .relas  .relas-lists .swiper-wrapper>div{ text-align: center; cursor: pointer;  width: calc(100%/4 - 20px);}
.relas-box .relas  .relas-lists .swiper-wrapper>div .img{ padding-bottom:80%; display: block; align-items: center;  border:1px solid #eee; background-color: #fff; position: relative;}
.relas-box .relas  .relas-lists .swiper-wrapper>div .title a{color:#333; text-decoration: none;}
.relas-box .relas  .relas-lists .swiper-wrapper>div .img img{max-width: 100%; width: 100%;  height: auto;  position: absolute; top: 50%; left: 50%;  transform: translate(-50%,-50%);max-height: 100%;object-fit: cover;transition: all 0.6s;}
.relas-box .relas  .relas-lists .swiper-wrapper>div:hover img {
transform: translate(-50%,-50%) scale(1.1)
}
.relas-box .relas  .relas-lists .swiper-wrapper>div:hover .title{color: #fabe00}
.relas-box .relas  .relas-lists .swiper-wrapper>div:hover .title a {color: #fabe00}
.relas-box .relas  .relas-lists .swiper-button-next{right:0}
.relas-box .relas  .relas-lists .swiper-button-prev{left:0}
.relas-box .relas  .relas-lists .swiper-button-next, .relas-box .relas  .relas-lists .swiper-button-prev{
background-color: rgba(0,0,0,.3);
background-image: none;
color:#fff;
line-height: 44px; text-align: center;
}

.relas-box .relas  .relas-case-lists{ display: flex; padding:35px; background-color: rgba(246,246,246,1); }
.relas-box .relas  .relas-case-lists .case-item{ text-align: center; cursor: pointer;  width: calc(100%/4 - 30px); margin-right: 30px;}
.relas-box .relas  .relas-case-lists .case-item .img{ padding-bottom:80%; display: block; align-items: center;  border:1px solid #eee; background-color: #fff; position: relative; overflow: hidden;}
.relas-box .relas  .relas-case-lists .case-item .title a{color:#333; text-decoration: none;}
.relas-box .relas  .relas-case-lists .case-item .img img{max-width: 100%; width: 100%;  height: auto;  position: absolute; top: 50%; left: 50%;  transform: translate(-50%,-50%);max-height: 100%;object-fit: cover;transition: all 0.6s;}
.relas-box .relas  .relas-case-lists .case-item:hover img {
transform: translate(-50%,-50%) scale(1.1)
}

.content{padding:30px 0 0 0}
.big-title{ text-align: center; }
@media screen and (max-width: 1024px){
.relas-box .relas{width: calc(100% - 40px ); margin:auto 20px;}
.relas-box .relas .relas-lists{padding:10px;}
}
@media screen and (max-width: 768px){
.relas-box .relas .relas-title{width: 100%; border-radius: 20px  20px 0 0; line-height: 3;font-size: 18px;}
.relas-box .relas .relas-lists .swiper-button-next::after, .relas-box .relas .relas-lists .swiper-button-prev::after{display:none;}
.relas-box .relas  .relas-lists .swiper-wrapper>div{width: calc(100%/2 - 10px);}
}
@media screen and (max-width: 414px){
.relas-box .relas{width: calc(100% - 20px ); margin:auto 10px;}
.relas-box .relas  .relas-lists .swiper-wrapper>div{width:100%;}
}



.service-bar{position:fixed; right:0; bottom:400px; z-index:99; width:60px;}
.service-bar>div{background:rgba(0,0,0,0.3); color:#fff; color:#fff; width:260px; height:60px; position:absolute; right:-200px; display:flex; transition: all .5s; cursor:pointer}
.service-bar>div:hover{right:0;}
.service-bar>div>.icon{width:60px; font-size:28px; text-align:center; line-height:60px;}
.service-bar>div>.text{line-height:60px;}
.service-bar>div.email{top:65px;}
.service-bar>div.whatsapp{top:130px;}
.service-bar>div.wechat{top:195px;}
@media screen and (max-width: 1024px){
.service-bar{display:none}
}



.icon-ani{margin-bottom: 20px;}
        .icon-ani span{display: inline-block; margin: 0 6px 0 0;height: 6px; border-radius: 6px;}
        .icon-ani span:nth-child(1){width: 6px;background: #fabe00; animation: fa_span01_ani 1.2s linear infinite alternate; }
        .icon-ani span:nth-child(2){width: 6px;background: #fabe00; animation: fa_span02_ani 1.2s linear infinite alternate; }
        @keyframes fa_span01_ani {
            0% {
                width: 6px
            }
            100% {
                width: var(--yx_FS48)
            }
            }

            @keyframes fa_span02_ani {
            0% {
                width: var(--yx_FS48)
            }
            100% {
                width: 6px
            }
        }

        @media screen and (max-width: 1024px){
            .content{padding:10px 0 0 0}
            .big-title h1{ font-size: 1.3rem; margin-bottom: 0; text-align: center;}
            .icon-ani{margin-bottom:10px}
        }

        .bottom{background-color: rgba(34,34,34,1);}
        .bottom-box{width: 85%;max-width: 1620px;display: flex; align-items:first baseline; margin:auto; padding-top:50px}
        .bottom-box .logos{width: 350px;}
        .bottom-box .links{display: flex; justify-content:space-around; width: calc(100% - 350px); }
        .bottom-box .links>dl{ width: calc( (100% - 350px)/6 ); }
        .bottom-box .links>dl>dt{font-size:22px; color:#fff;font-weight: bold; margin-bottom:20px;}
        .bottom-box .links>dl dt a{ font-weight: bold;  color:#fff}
        .bottom-box .links>dl>dd{color:rgba(255,255,255,0.7); font-size:16px}
        .bottom-box .links>dl>dd a{color:rgba(255,255,255,0.7); font-size: 16px; text-decoration: none;}
        .bottom-box .links>dl:nth-child(2){ width: calc( (100% - 350px)/3 );  }
        .bottom-box .links>dl:nth-child(2)>dd{ display: flex; flex-wrap: wrap;}
        .bottom-box .links>dl:nth-child(2)>dd dl{ width: 50%;}
        .bottom-box .links>dl:nth-child(2)>dd dl dt{ color:rgba(255,255,255,0.7); font-size:16px ;font-weight: normal; margin-bottom:10px;}
        .bottom-box .links>dl:nth-child(2)>dd dl dt a{ color:rgba(255,255,255,0.7); font-size:16px }
        .bottom-box .links>dl:nth-child(2)>dd dl dd{margin:0}
        .bottom-box .links>dl:nth-child(2)>dd dl dd a{ font-size: 12px;}
        .footer{text-align: center; background-color: #000; line-height: 3; font-size: 14px; color:#999}
        @media screen and (max-width: 1024px) {
            .footer{}
            .bottom-box{display: none;}
        }
.pre-next{ display: flex; justify-content: space-between; margin:20px 0; padding:10px 0; border-top:1px solid #eee; font-weight: bold; }
.pre-next a{font-weight: normal;}
@media screen and (max-width: 1024px) {
    .pre-next{display: none;}
}