@charset "UTF-8";
:root {
    --text-color: #3e3e3e;
    --text-color2: #fff;
    --main-bg: #f5f5f5;
    --transition: all ease-in-out .3s;
    --main-width: 1400px;
    --main-width-1200: 1200px;
    --margin-auto: 0 auto;
    --font-size-x: 10px;
    --font-size-s: 12px;
    --font-size-m: 14px;
    --font-size-m2: 16px;
    --font-size-m3: 18px;
    --font-size-b: 30px;
    --font-size-b2: 36px;
}
/* @media screen and (max-width:1200px){
    :root {
        --font-size-x: 10px;
        --font-size-s: 12px;
        --font-size-m: 12px;
        --font-size-m2: 14px;
        --font-size-m3: 14px;
        --font-size-b: 30px;
        --font-size-b2: 36px;
    }
} */

.transition{transition:var(--transition);-moz-transition:var(--transition);-webkit-transition:var(--transition);-o-transition:var(--transition);}
.main_bg{background-color:var(--main-bg);}
body{background-color:var(--main-bg);}

.header_bg{background:linear-gradient(to bottom,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);position:fixed;top:0;left:0;right:0;z-index:99;}
.header{display:flex;justify-content:space-between;align-items:center;height:120px;line-height:1;}
.header .left img{height:40px;backface-visibility:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;}
.header .right>ul{display:flex;}
.header .right>ul>li{position:relative;}
.header .right>ul>li>a{padding:20px;color:var(--text-color2);display:block;}
.header .right>ul>li>ul{visibility:hidden;opacity:0;width:auto;background-color:#000;position:absolute;top:100px;left:50%;transform:translate(-50%, 0%);box-shadow:0px 0px 2px 0px #ddd;padding:8px 0;}
.header .right>ul>li>ul>li>a{padding:8px 20px;display:block;color:var(--text-color2);white-space:nowrap;}
.header .right>ul>li:hover>ul{visibility:visible;opacity:1;top:50px}
.header .navbar-toggle{display:none;}
.header_bg.on{background:#000;}
.header_bg.on .header {height:80px;}
.header_bg.on .header .right ul>li>a{color:var(--text-color2);}
@media screen and (max-width:1200px){
    .header_bg{background:#000}
    .header{height:60px;}
    .header .left img{height:22px;margin-left:10px;}
    .header .right{width:65%;position:fixed;top:60px;right:-65%;bottom:0px;background-color:#000;border-top:1px #454545 solid;z-index:99;overflow:auto;}
    .header .right>ul{flex-flow:column;padding-top:15px;padding-bottom:15px;}
    .header .right>ul>li>a{padding:10px 20px;}
    .header .right>ul>li>ul{position:unset;visibility:visible;opacity:1;padding:0px 0px 10px 40px;background-color:transparent;transform:none;-moz-transition:none;-webkit-transition:none;-o-transition:none;box-shadow:none;}
    .header .right>ul>li>ul>li>a{color:var(--text-color2);}
    .header .navbar-toggle{cursor:pointer;position:relative;width:26px;display:flex;flex-flow:column;}
    .header .navbar-toggle>span{display:block;height:1px;background-color:var(--text-color2);margin:2.5px 0;border-radius:2px;}
    .header_bg.on .header {height:60px;}
    .header_bg.on .header .navbar-toggle>span{background-color:var(--text-color2);}
    .header_bg.on .right{background-color:#000;color:var(--text-color2);}
    .header_bg.on .header .right>ul>li>ul>li>a{color:var(--text-color2);}
    .header .right.on{right:0}
    .header .right_bg.on{position:fixed;top:60px;right:0;left:0;bottom:0px;z-index:99;background:rgba(0,0,0,0.5)}
}

.footer_bg{background-color:#000;color:var(--text-color2);padding:5em 0 0;}
.footer a{color:var(--text-color2);}
.footer .logo{margin-bottom:2em;padding-bottom:2em;width:16%;}
.footer .logo img{margin:0;max-height:50px;padding-top:10px;}
.footer_box{display:flex;padding-bottom:4em;line-height:2;}
.footer_box>dl{width:16%;}
.footer_box>dl:nth-child(4){width:auto;}
.footer_box>dl>dt,.footer_box>dl>dt>a{font-size:var(--font-size-m2);font-weight:400;}
.footer_box>dl>dd,.footer_box>dl>dd>a,.footer_box>dl>dd>div,.footer_box>dl>dd>div>a{font-size:var(--font-size-m);}
.footer_box>.footer_link{width:40%;display:flex;justify-content:end;}
.footer_box>.footer_link>dl>dt{font-size:var(--font-size-m2);font-weight:400;}
.footer_box>.footer_link>dl>dd{padding-top:2em;}
.footer_box>.footer_link>dl>dd>ul{display:flex;padding-bottom:20px;}
.footer_box>.footer_link>dl>dd>ul>li{padding-right:20px;}
.footer_box>.footer_link>dl>dd>ul>li>a>img{width:30px;}
.footer_box>.footer_link>dl>dd>div{line-height:1.6;font-size:12px;}
.footer_box>.footer_link>dl>dd>ul>li.qrcode{position:relative;}
.footer_box>.footer_link>dl>dd>ul>li.qrcode>div{position:absolute;left:calc(50% - 10px);bottom:calc(100% + 5px);transform:translate(-50%,0%);display:none;}
.footer_box>.footer_link>dl>dd>ul>li.qrcode>div>img{width:120px;max-width:unset;}
.footer_box>.footer_link>dl>dd>ul>li.qrcode:hover>div{display:block;}
.footer_copyright{padding:1em 0 3em;text-align:center;}
.footer_copyright>span,.footer_copyright>span>a{font-size:var(--font-size-s);color:#bbb;}
@media screen and (max-width:1200px){
    .footer_bg{padding:2em 0 0;}
    .footer .logo{margin-bottom:1em;padding-bottom:1em;border-bottom:1px #9b9a98 solid;width:100%;}
    .footer .logo img{height:25px;margin:0 auto;}
    .footer_box{flex-flow:column;padding-bottom:1em;}
    .footer_box>dl,.footer_box>dl:nth-child(4){width:100%;margin-bottom:10px;}
    .footer_box>dl>dd{display:flex;flex-wrap:wrap;margin-bottom:10px;}
    .footer_box>dl>dd>div{margin-right:20px;}
    .footer_box>.footer_link{width:100%;justify-content:space-around;}
    .footer_box>.footer_link>dl{width:100%;}
    .footer_box>.footer_link>dl>dd{padding-top:0.5em;position:relative;}
    .footer_box>.footer_link>dl>dd>ul>li{padding-right:10px;}
    .footer_box>.footer_link>dl>dd>ul>li>a>img{width:30px;}
    .footer_box>.footer_link>dl>dd>ul>li.qrcode{position:unset;}
    .footer_copyright{padding:1em 0 1.5em;line-height:1.2;}
}

.back_top{cursor:pointer;display:none;position:fixed;right:20px;bottom:20px;z-index:98;width:38px;height:38px;padding:10px;background-color:var(--text-color2);box-shadow:0px 0px 2px 0px #ddd;border-top:1px #454545 solid;transform:rotate(180deg);border-radius:50%;}
.back_top.active{display:block}
@media screen and (max-width:1200px){
    .back_top{width:30px;height:30px;padding:5px;}
}

.banner{position:relative;}
.banner .swiper-slide>a>img{width:100%;}
.banner .banner-video-box{position:relative;background-color:#000;}
.banner .banner-video-box img{visibility: hidden;opacity: 0;}
.banner .banner-video-box .banner-video{position:absolute;width:100%;height:100%;}
.banner .swiper-pagination-bullet {border-radius:2px;width:3px;height:3px;transition:var(--transition);-moz-transition:var(--transition);-webkit-transition:var(--transition);-o-transition:var(--transition);}
.banner .swiper-pagination-bullet-active{background:var(--text-color2);width:20px;}
.banner .banner_title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;font-size:var(--font-size-b2);color:var(--text-color2);font-weight:500;line-height:1.2;text-align:center;}
.banner .banner_title>p{font-size:var(--font-size-b);}
.banner_bg{height:120px;background-color:#000;}
.banner-index{height:100vh;}
.banner-index .swiper-slide>a,.banner-index .swiper-slide>.banner-video-box{display:block;width:100%;height:100%;position:relative;}
.banner-index .swiper-slide>a>img{height:100%;}
.banner-index .banner-video-box .banner-video{width:auto;min-width:100%;height:auto;min-height:100%;left:50%;transform:translate(-50%,0);}
@media screen and (max-width:1200px){
    .banner{margin-top: 60px;}
    .banner .banner_title{display:none;}
    .banner_bg{height:60px;}
    .banner-index{height:600px;}
    .banner-index .banner-video-box .banner-video{width:100%;}
}
@media screen and (max-width:780px){
    .banner-index{height:30vh;}
}

.index_title{text-align:center;padding: 8em 0 4em;}
.index_title h1{font-size:var(--font-size-b);line-height:2;color:#000;}
.index_title p{font-size:var(--font-size-m2);}
@media screen and (max-width:1200px){
    .index_title{padding:5em 0 1.5em ;}
}

.index_product{padding-left:10%;padding-bottom:8em;}
.index_product_box{overflow:hidden;/* max-width:1720px;margin:0 0 0 auto; */}
.index_product_banner{width:100%;overflow: hidden;}
.index_product_banner .swiper-slide{width:auto;}
.index_product_banner .swiper-slide img{width:100%;}
.index_product_banner .swiper-slide .title{background:url(../../images/home/icon/icon7.png) right no-repeat;font-size:var(--font-size-m2);padding:1.5em 0;}
@media screen and (max-width:1200px){
    .index_product{padding-bottom:4em;}
    .index_product_banner .swiper-slide .title{padding:1em 0;}
}

.index_materials{position:relative;overflow:hidden;max-width:var(--main-width);}
.materials-video{width:100%;}
.index_materials>img{width:100%;}
.index_materials>a{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-flow:column;color:var(--text-color2);text-align:center;font-size:var(--font-size-b);font-weight:400;line-height:1.4;}
.index_materials>a>div{font-size:var(--font-size-s);font-weight:300;border:1px var(--text-color2) solid;padding:10px 0;margin-top:20px;}
.index_materials>a:hover>div{background-color:var(--text-color2);color:var(--text-color);}
@media screen and (max-width:1200px){
    .index_materials{padding:0 20px;width:calc(100% - 40px);}
    .index_materials>a>div{padding:5px 10px;margin-top:10px;}
}

.index_about_box{padding:10em 0;position:relative;overflow:hidden;max-width:var(--main-width);}
.index_about{background-color:var(--text-color2);max-width:800px;margin:-80px auto 0;border:1px #d3d3d3 solid;position:relative;z-index:1;}
.index_about>dt{font-size:var(--font-size-m3);text-align:center;color:#464643;height:80px;padding-top:10px;display:flex;justify-content:center;align-items:center;}
.index_about>dd{padding:0px 80px 10px;line-height:2;font-size:var(--font-size-m);}
.index_about>dd.index_about_content p{padding-bottom:1em;}
.index_about>dd.index_about_btn{text-align:center;}
.index_about>dd.index_about_btn>a{margin:40px auto;padding:0 50px;display:inline-block;font-size:var(--font-size-s);color:#000;border:1px #000 solid;line-height:2.4;}
.index_about>dd.index_about_btn>a:hover{color:var(--text-color2);background-color:#000;}
@media screen and (max-width:1200px){
    .index_about_box{padding:5em 20px 3em;width:calc(100% - 40px);}
    .index_about{margin:0px auto 0;padding-top:1em;}
    .index_about>dt{height:auto;line-height:3;}
    .index_about>dd{padding:0px 20px;line-height:1.6;}
    .index_about>dd.index_about_btn>a{margin:20px auto;padding:0 20px;}
}

.index_news_bg{max-width:var(--main-width);margin:var(--margin-auto);overflow:hidden}
.index_news{padding:6em 0;overflow:hidden;display:flex;justify-content:space-between;}
.index_news>div{text-align:center;padding:0 20px;}
.index_news>div:nth-child(3n+1){padding:0 20px 0 0;}
.index_news>div:nth-child(3n+3){padding:0 0 0 20px;}
.index_news>div a .title{font-size:var(--font-size-m3);padding:2.5em 0 0em;}
.index_news>div a .btn{margin:20px auto 40px;padding:0 50px;display:inline-block;color:#000;border:1px #000 solid;font-size:var(--font-size-s);line-height:2.4;}
.index_news>div a:hover .btn{color:var(--text-color2);background-color:#000;}
@media screen and (max-width:1200px){
    .index_news{padding:3em 10px 5em;}
    .index_news>div{width:calc(50% - 10px);}
    .index_news>div:nth-child(3n+1){padding:0 10px;}
    .index_news>div:nth-child(3n+2){display:none;}
    .index_news>div:nth-child(3n+3){padding:0 10px;}
    .index_news>div a .title{padding:1em 0 0.5em;}
    .index_news>div a .btn{margin:0px auto 30px;padding:0 20px;}
}

.main{min-height:calc(100vh - 642px);}

/*****************************************************/
.about_bg{max-width:var(--main-width);margin:var(--margin-auto);overflow:hidden}
.about_1{width:95%;max-width:900px;margin:0 auto;padding:15em 0 6em;font-size:var(--font-size-m);line-height:2;position:relative;overflow:hidden;}
.about_1::before{content:'';display:block;background-color:#000;width:1px;height:3em;position:absolute;left:50%;top:7em;transform:translate(-50%,0%);}
.about_2{overflow:hidden;}
.about_2_box{width:150%;margin-left:-25%;}
.about_3{width:95%;max-width:900px;margin:0 auto;padding:15em 0 6em;font-size:var(--font-size-m);line-height:2;position:relative;overflow:hidden;}
.about_3::before{content:'';display:block;background-color:#000;width:1px;height:3em;position:absolute;left:50%;top:7em;transform:translate(-50%,0%);}
.about_4{padding:0 0 10em;position:relative;overflow:hidden;}
.about_4_content{background-color:var(--text-color2);max-width:900px;margin:-100px auto 0;border:1px #d3d3d3 solid;position:relative;z-index:1;}
.about_4_content>dt{font-size:var(--font-size-m3);text-align:center;color:#464643;height:80px;padding-top:10px;display:flex;justify-content:center;align-items:center;}
.about_4_content>dd{padding:0px 80px 20px;line-height:2;font-size:var(--font-size-m);}
.about_4_content>dd>p{margin-bottom:1em;}
@media screen and (max-width:1200px){
    .about_1{width:calc(100% - 40px);padding:8em 20px 6em;line-height:1.5;}
    .about_1::before{height:2em;top:4em;}
    .about_2_box{width:190%;margin-left:-45%;}
    .about_3{width:calc(100% - 40px);padding:8em 20px 6em;line-height:1.5;}
    .about_3::before{height:2em;top:4em;}
    .about_4{padding:0 0;}
    .about_4_content{margin:0px auto 0;}
    .about_4_content>dt{height:auto;line-height:3;}
    .about_4_content>dd{padding:0px 20px 50px;line-height:1.5;}
}
/*****************************************************/

/*****************************************************/
.projects_bg{padding-bottom:4em;}
.projects_1{width:95%;max-width:900px;margin:0 auto;padding:6em 0 4em;font-size:var(--font-size-m);line-height:2;position:relative;overflow:hidden;}
.projects_2{display:flex;background-color:var(--text-color2);overflow:hidden;max-width:var(--main-width);margin:4em auto 0;}
.projects_2_pic{width:60%;}
.projects_2_pic>img{width:100%;}
.projects_2_txt{width:calc(40% - 8em);padding:4em;line-height:2;display:flex;flex-flow:column;}
.projects_2_txt .title{font-size:var(--font-size-m2);font-weight:bold;}
.projects_2_txt .content{font-size:var(--font-size-m);line-height:1.6;}
.projects_2_btn{flex:1;display:flex;justify-content:end;align-items:end;}
.projects_2_btn>a{padding:0 50px;display:inline-block;font-size:var(--font-size-s);color:#000;border:1px #000 solid;line-height:2.4;}
.projects_2_btn>a:hover{color:var(--text-color2);background-color:#000;}
.projects_2:nth-child(2n -1) .projects_2_pic{order:1;}
@media screen and (max-width:1200px){
    .projects_bg{padding-bottom:5em;}
    .projects_1{padding:6em 20px 3em;line-height:1.5;width:calc(100% - 40px);}
    .projects_2{flex-flow:column;margin:2em 20px 0;width: calc(100% - 40px);}
    .projects_2_pic{width:100%;flex-flow:column;}
    .projects_2_txt{width:calc(100% - 4em);padding:5px 20px;line-height:1.4;}
    .projects_2_txt .title{line-height:2;}
    .projects_2_btn>a{padding:0 20px;margin-top:1em;margin-bottom:0.5em;line-height:2;}
    .projects_2:nth-child(2n -1) .projects_2_pic{order:0;}
}
/*****************************************************/

/*****************************************************/
.materials_bg{padding-bottom:4em;max-width:var(--main-width);margin:var(--margin-auto);overflow:hidden}
.materials_1{width:95%;max-width:900px;margin:0 auto;padding:6em 0 3em;font-size:var(--font-size-m2);font-weight:bold;line-height:2;text-align:center;}
.materials_2{width:95%;max-width:900px;margin:0 auto;padding:8em 0 8em;font-size:var(--font-size-m);line-height:2;position:relative;overflow:hidden;}
.materials_2::before{content:'';display:block;background-color:#000;width:1px;height:3em;position:absolute;left:50%;top:1em;transform:translate(-50%,0%);}
.materials_4{width:95%;max-width:900px;margin:0 auto;padding:15em 0 6em;font-size:var(--font-size-m);line-height:2;position:relative;overflow:hidden;}
.materials_4::before{content:'';display:block;background-color:#000;width:1px;height:3em;position:absolute;left:50%;top:7em;transform:translate(-50%,0%);}
.materials_5 img{width:100%;}
.materials_6{width:95%;max-width:900px;margin:0 auto;padding:15em 0 6em;font-size:var(--font-size-m);line-height:2;position:relative;overflow:hidden;}
.materials_6::before{content:'';display:block;background-color:#000;width:1px;height:3em;position:absolute;left:50%;top:7em;transform:translate(-50%,0%);}
.materials_6 p{margin-bottom:1em;}
@media screen and (max-width:1200px){
    .materials_bg{padding-bottom:1em;}
    .materials_1{width:calc(100% - 40px);padding:5em 20px 2em;line-height:1.5;}
    .materials_2{width:calc(100% - 40px);padding:5em 20px 5em;line-height:1.5;}
    .materials_2::before{height:2em;top:0em;}
    .materials_3{width:calc(100% - 40px);padding:0 20px;}
    .materials_4{width:calc(100% - 40px);padding:8em 20px 4em;line-height:1.5;}
    .materials_4::before{height:2em;top:3em;}
    .materials_5{width:calc(100% - 40px);padding:0 20px;}
    .materials_6{width:calc(100% - 40px);padding:8em 20px 4em;line-height:1.5;}
    .materials_6::before{height:2em;top:3em;}
}
/*****************************************************/

/*****************************************************/
.feedback{padding:0 10px;max-width:var(--main-width-1200);margin:0 auto;}
.feedback .content{padding:0 10px;}
.feedback .content p{line-height:28px;}
.feedback .content h1{padding:60px 0 10px 0;font-size:var(--font-size-m3);font-weight: bold;}
.feedback .content .info{width:100%;overflow:hidden;padding:1em 0;}
.feedback .content .info>b{font-size:var(--font-size-m2);display:flex;padding-bottom:5px;margin-bottom:10px;position:relative;}
.feedback .content .info>b::before{content:'';display:block;width:180px;height:1px;background-color:#803113;position:absolute;bottom:2px;left:0}
.feedback .content .info>b::after{content:'';display:block;width:180px;height:1px;background-color:#803113;position:absolute;bottom:0;left:0}
.feedback .content .info>b>img{width:var(--font-size-m2);height:var(--font-size-m2);object-fit:contain;margin:0 10px 0 0;}
.feedback .form{width:100%;margin:0 auto;padding-bottom:100px;}
.feedback .form .input-box{width:100%;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:space-between;}
.feedback .form .input-box>div{width:32%;}
.feedback .form .input-box>div p{font-size:var(--font-size-m);padding-bottom:10px;}
.feedback .form .input-box input{width:calc(100% - 22px);height:45px;border:1px solid #999;padding:0 10px;font-size:var(--font-size-m1);border-radius:6px;}
.feedback .form .input-box2{padding-top:20px;padding-bottom:20px;}
.feedback .form .input-box2>div p{font-size:var(--font-size-m);padding-bottom:10px;}
.feedback .form .input-box2 textarea{width:calc(100% - 22px);height:200px;border:1px solid #999;font-size:var(--font-size-m1);padding:10px;resize:none;border-radius:6px;}
.feedback .form .code .left{float:left;width:calc(100% - 170px);}
.feedback .form .code .right{float:right;width:170px;text-align:right;}
.feedback .form .code .right img{float:right;display:block;height:45px;}
.feedback .submit-box{width:100%;padding:0 10px;margin-top:29px;}
.feedback .submit{width:100%;height:45px;text-align:center;line-height:45px;font-size:var(--font-size-m1);cursor:pointer;background:#555;color:var(--text-color2);border-radius:6px;}
.feedback .submit:hover{background:#333;}
@media screen and (max-width:1200px){
    .feedback .content p{line-height:1.6;}
    .feedback .content h1{padding:40px 0 10px 0;}
    .feedback .form .input-box>div{width:100%;margin-bottom:10px;}
    .feedback .form .input-box>div p{padding-bottom:0px;}
    .feedback .form .input-box input{height:30px;}
    .feedback .form .input-box2{padding-top:0px;padding-bottom:0px;}
    .feedback .form .input-box2>div{margin-bottom:10px;}
    .feedback .form .input-box2>div p{padding-bottom:0px;}
    .feedback .form .input-box2 textarea{height:80px;}
    .feedback .form .code .right img{height:32px;}
    .feedback .submit-box{padding:0;margin-top:15px;}
    .feedback .submit{height:32px;line-height:32px;}
}
/*****************************************************/

/*****************************************************/
.news_bg{padding:5em 0;max-width:var(--main-width);margin:var(--margin-auto);overflow:hidden}
.news_bg .list{display:flex;flex-wrap:wrap;}
.news_bg .list .news{width:calc(100% / 3 - 16px);padding:0 12px 3em;}
.news_bg .list .news:nth-child(3n+1){padding:0 12px 3em 0;}
.news_bg .list .news:nth-child(3n+3){padding:0 0 3em 12px;}
.news_bg .list .news .news-link{max-width:512px;display:block;margin:0px auto;}
.news_bg .list .news .news-link .title{background-color:var(--text-color2);padding:2em 1em 1em 1em;overflow:hidden;}
.news_bg .list .news .news-link .title>div{text-align:center;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-height:1.5;font-size:var(--font-size-m);font-weight:400;height:1.5em;}
.news_bg .list .news .news-link .title-link{background-color:var(--text-color2);padding:0em 0 1em 0.5em;text-align:center;font-size:var(--font-size-m1);text-decoration:underline;}
.ratio-img{position:relative;}
.ratio-img>div{visibility: hidden;opacity: 0;background-color:rgba(0,0,0,0.5);backdrop-filter: blur(2px);position:absolute;top:0;left:0;right:0;bottom:0}
.ratio-img>div>i::before,.ratio-img>div>i::after{content:'';display:block;position:absolute;width:0px;height:0px;background-color:var(--text-color2);transition:var(--transition);-moz-transition:var(--transition);-webkit-transition:var(--transition);-o-transition:var(--transition);}
.ratio-img>div>i:nth-child(1)::before{left:10px;top:10px;}
.ratio-img>div>i:nth-child(1)::after{left:10px;top:10px;}
.ratio-img>div>i:nth-child(2)::before{right:10px;top:10px;}
.ratio-img>div>i:nth-child(2)::after{right:10px;top:10px;}
.ratio-img>div>i:nth-child(3)::before{left:10px;bottom:10px;}
.ratio-img>div>i:nth-child(3)::after{left:10px;bottom:10px;}
.ratio-img>div>i:nth-child(4)::before{right:10px;bottom:10px;}
.ratio-img>div>i:nth-child(4)::after{right:10px;bottom:10px;}
.news_bg .list .news .news-link:hover .ratio-img>div{visibility: visible;opacity: 1;}
.news_bg .list .news .news-link:hover .ratio-img>div>i:nth-child(1)::before{width:100px;height:1px;}
.news_bg .list .news .news-link:hover .ratio-img>div>i:nth-child(1)::after{width:1px;height:100px;}
.news_bg .list .news .news-link:hover .ratio-img>div>i:nth-child(2)::before{width:100px;height:1px;}
.news_bg .list .news .news-link:hover .ratio-img>div>i:nth-child(2)::after{width:1px;height:100px;}
.news_bg .list .news .news-link:hover .ratio-img>div>i:nth-child(3)::before{width:100px;height:1px;}
.news_bg .list .news .news-link:hover .ratio-img>div>i:nth-child(3)::after{width:1px;height:100px;}
.news_bg .list .news .news-link:hover .ratio-img>div>i:nth-child(4)::before{width:100px;height:1px;}
.news_bg .list .news .news-link:hover .ratio-img>div>i:nth-child(4)::after{width:1px;height:100px;}
.news_bg .detail{display:flex;flex-flow:column;}
.news_bg .detail .news-title{font-size:var(--font-size-m3);font-weight:400;line-height:1.4;padding-bottom:20px;position:relative;margin-bottom:20px;}
.news_bg .detail .news-title::after{content:'';display:block;position:absolute;left:50%;bottom:9px;transform:translate(-50%,0%);width: 200px;height:1px;background-color:#d3d3d3;}
.news_bg .detail .news-desc{min-height:300px;line-height:2;width:95%;max-width:var(--main-width-1200);margin:0 auto 20px;}
.news_bg .detail .categorie>a{border:1px #d3d3d3 solid;display:inline-block;padding:5px 20px;border-radius:5px;}
.news_bg .detail .categorie>a:hover{background-color:#000;color:var(--text-color2);}
.news_img{padding-top:45%;position:relative;overflow:hidden;}
.news_img>img{position:absolute;top:0;width:100%;min-height:100%;max-height:100%;}

@media screen and (max-width:1200px){
    .news_bg{padding:3em 0;}
    .news_bg .list .news{width:100%;padding:0 12px 2em;}
    .news_bg .list .news:nth-child(3n+1){padding:0 12px 2em;}
    .news_bg .list .news:nth-child(3n+3){padding:0 12px 2em;}
    .news_bg .list .news .news-link .title{padding:1em 1em 1em 1em;}
    .news_bg .list .news .news-link .title>div{height:1.5em;}
    .news_bg .list .news .news-link .title-link{padding:0 0 1em;}
    .news_bg .detail .news-title{margin-bottom:10px;}
}
/*****************************************************/


/*****************************************************/
.nav_bg{max-width:var(--main-width-1200);margin:var(--margin-auto);overflow:hidden;margin-bottom:2em;}
.nav_bg>div{padding:2em 20px 1em;font-size:var(--font-size-m);border-bottom:1px #d3d3d3 solid;}
@media screen and (max-width:1200px){
    .nav_bg{padding:0 20px;}
    .nav_bg>div{padding:1em 20px 0.5em;}
}
/*****************************************************/


/*****************************************************/
.pageController{text-align:center;}
.pagination{display:flex;flex-wrap:wrap;justify-content:center;}
.pagination>li>a,.pagination>li>span{display:block;height:28px;padding:0px 12px;color:var(--text-color);line-height:2;font-size:var(--font-size-m);border-color:#d3d3d3;border-style:solid;border-width:1px;margin:0 1px;}
.pageController .pagination>.active>a,.pageController .pagination>.active>a:focus,.pageController .pagination>.active>a:hover,.pageController .pagination>.active>span,.pageController .pagination>.active>span:focus,.pageController .pagination>.active>span:hover{background-color:var(--text-color);border-color:var(--text-color);color:var(--text-color2)}
/*****************************************************/


/*****************************************************/
.designers_bg{max-width:var(--main-width);margin:var(--margin-auto);overflow:hidden}
.designers_1{width:95%;max-width:900px;margin:0 auto;padding:12em 0 6em;font-size:var(--font-size-m);line-height:2;position:relative;overflow:hidden;}
.designers_1::before{content:'';display:block;background-color:#000;width:1px;height:3em;position:absolute;left:50%;top:5em;transform:translate(-50%,0%);}
.designers_1>h1{font-size:var(--font-size-m);font-weight:bold;text-align:center;}
.designers_1>p{padding-top:2em;font-size:var(--font-size-m);text-align:center;}
.designers_2{padding:0 20px;width:calc(100% - 40px);}
.designers_3{width:95%;max-width:900px;margin:0 auto;padding:6em 0;font-size:var(--font-size-m);line-height:2;}
.designers_4{overflow:hidden;}
.designers_4_box{width:150%;margin-left:-25%;}
.designers_5{width:95%;max-width:900px;margin:0 auto;padding:6em 0;font-size:var(--font-size-m);line-height:2;}
.designers_6{padding-bottom:8em;}
@media screen and (max-width:1200px){
    .designers_1{padding:8em 20px 5em;line-height:1.5;width:calc(100% - 40px);}
    .designers_1::before{height:2em;top:4em;}
    .designers_3{padding:5em 20px;line-height:1.5;width:calc(100% - 40px);}
    .designers_5{padding:5em 20px;line-height:1.5;width:calc(100% - 40px);}
    .designers_6{padding:0 20px 8em;width:calc(100% - 40px);}
}
/*****************************************************/


/*****************************************************/
.product_bg{padding-bottom:3em;max-width:var(--main-width-1200);margin:var(--margin-auto);overflow:hidden}
.product_bg .category>h1{text-align:center;font-size:var(--font-size-m3);font-weight:bold;padding:3em 0;}
.catesearchbg{width:100%;height:auto;overflow:hidden;padding-top:0px;padding-bottom:80px;}
.catesearchbg .catesearch{width:80%;margin:auto;max-width:1300px;display:flex;flex-wrap:wrap;justify-content:center;}
.catesearchbg .catesearch .cateselect{overflow:hidden;}
.catesearchbg .catesearch .cateselect select{width:230px;height:40px;margin-right:20px;border:1px solid #333;box-sizing:border-box;outline:none;font-size:var(--font-size-m1);padding-left:15px;padding-right:15px;cursor:pointer;border-radius:5px;color:#333;appearance:none;-moz-appearance:none;-webkit-appearance:none;background: url(../../images/home/product/downarr.jpg) no-repeat 190px center var(--text-color2);}
.catesearchbg .catesearch .search{width:230px;height:40px;border:1px solid #333;background-color:var(--text-color2);border-radius:5px;box-sizing:border-box;overflow:hidden;}
.catesearchbg .catesearch .search .form{display:flex;flex-wrap:wrap;width:100%;height:38px;}
.catesearchbg .catesearch .search .form .input{width:calc(100% - 50px);height:100%;overflow:hidden;}
.catesearchbg .catesearch .search .form .input input{width:100%;height:100%;border:none;outline:none;box-sizing:border-box;font-size:var(--font-size-m1);padding-left:15px;padding-right:15px;background:none;}
.catesearchbg .catesearch .search .form .submit{width:50px;height:100%;}
.catesearchbg .catesearch .search .form .submit input{cursor:pointer;background:url('../../images/home/product/search.png') no-repeat center center;border:none;font-size:0px;width:100%;height:100%;}
.product_bg .list{display:flex;flex-wrap:wrap;}
.product_bg .list .item{width:calc(100% / 3 - 16px);padding:0 12px 5em;}
.product_bg .list .item:nth-child(3n+1){padding:0 12px 5em 0;}
.product_bg .list .item:nth-child(3n+3){padding:0 0 5em 12px;}
.product_bg .list .item .item-link{max-width:459px;display:block;margin:0px auto;}
.product_bg .list .item .item-link .title{padding:2em 0 0 50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5;font-size:var(--font-size-m2);font-weight:400;height:1.5em;}
.product_bg .list .item .item-link .title-link{font-size:var(--font-size-s);color:#000;height:3em;padding-left:50px;}
.product_bg .list .item .item-link .title-category{font-size:var(--font-size-s);color:#000;padding-left:50px;position:relative;}
.product_bg .list .item .item-link .title-category::before{content:'';display:block;background-color:#000;width:1px;height:200px;position:absolute;left:30px;bottom:0px;transition:var(--transition);-moz-transition:var(--transition);-webkit-transition:var(--transition);-o-transition:var(--transition);}
.product_bg .list .item .item-link .ratio-img>div{backdrop-filter:unset;}
.product_bg .list .item .item-link:hover .ratio-img>div{visibility:visible;opacity: 1;}
.product_bg .list .item .item-link:hover .ratio-img>div>i:nth-child(1)::before{width:100px;height:1px;}
.product_bg .list .item .item-link:hover .ratio-img>div>i:nth-child(1)::after{width:1px;height:100px;}
.product_bg .list .item .item-link:hover .ratio-img>div>i:nth-child(2)::before{width:100px;height:1px;}
.product_bg .list .item .item-link:hover .ratio-img>div>i:nth-child(2)::after{width:1px;height:100px;}
.product_bg .list .item .item-link:hover .ratio-img>div>i:nth-child(3)::before{width:100px;height:1px;}
.product_bg .list .item .item-link:hover .ratio-img>div>i:nth-child(3)::after{width:1px;height:100px;}
.product_bg .list .item .item-link:hover .ratio-img>div>i:nth-child(4)::before{width:100px;height:1px;}
.product_bg .list .item .item-link:hover .ratio-img>div>i:nth-child(4)::after{width:1px;height:100px;}

.productblockbg{width:100%;height:auto;overflow:hidden;padding-top:30px;padding-bottom:50px;}
.proview{box-sizing:border-box;overflow:hidden;max-width:1200px;display:flex;flex-wrap:wrap;justify-content:space-between;}
.proview_left{width:60%;position:relative;}
.proview_left>div.proview_left_box{padding-top:75%;position:relative;overflow:hidden;}
.proview_left>div.proview_left_box>div{position:absolute;top:0;left:0;right:0;bottom:0;}
.proview_left>div.proview_left_box>div .picarr{width:100%;height:100%;background:var(--text-color2);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;position:relative;border-radius:5px;}
.proview_left>div.proview_left_box>div .picarr .leftbtn-prev{background:url('../../images/home/product/prev-arrow-black.svg') no-repeat center center;}
.proview_left>div.proview_left_box>div .picarr .rightbtn-next{background:url('../../images/home/product/next-arrow-black.svg') no-repeat center center;}
.proview_left>div.proview_left_box>div .picarr .picarrlist{width:100%;height:auto;overflow:hidden;}
.proview_left>div.proview_left_box>div .picarr .picarrlist .outpic{width:100%;padding-bottom:70%;overflow:hidden;position:relative;}
.proview_left>div.proview_left_box>div .picarr .picarrlist .outpic .pic{width:100%;height:100%;position:absolute;top:0px;left:0px;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;}
.proview_left>div.proview_left_box>div .picarr .picarrlist .outpic .pic img{max-width:100%;max-height:100%;object-fit:cover;}
.proview_left>div.proview_left_box>div .picarr .picarrlist .swiperpage{margin-top:20px;text-align:center;}
.proview_left>div.proview_left_box>div .picarr .picarrlist .swiperpage .swiper-pagination-bullet-active{background:#000;}
.proview_right{width:calc(40% - 20px);background:var(--text-color2);border-radius:5px;}
.proview_right>div.proview_right_box{position:relative;width:100%;height:100%;}
.proview_right>div.proview_right_box>div{position:absolute;top:0;left:0;right:0;bottom:0;overflow:auto;padding:20px;}
.proview_right>div.proview_right_box>div>h1{font-weight:bold;font-size:var(--font-size-m2);line-height:2;}
.proview_right>div.proview_right_box>div{font-size:var(--font-size-s);line-height:2;}
.proview .productcontent{width:100%;margin-top:20px;margin-bottom:30px;padding:20px;overflow:hidden;background:var(--text-color2);border-radius:5px;}
.prevnext{width:100%;height:auto;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:30px;}
.prevnext .grid{width:50%;height:auto;overflow:hidden;font-size:var(--font-size-m1);line-height:25px;text-overflow:ellipsis;white-space:nowrap;color:#666;}
.prevnext .grid:nth-child(2n){text-align:right;}
.prevnext .grid a{color:#666;transition:1s;}
.prevnext .grid a:hover{color:#aaa;}
@media screen and (max-width:1200px)
{
    .product_bg .category>h1{padding:1em 0 0;}
    .catesearchbg{padding:30px 8% 50px;box-sizing:border-box;}
    .catesearchbg .catesearch{width:100%;display:block;}
    .catesearchbg .catesearch .cateselect select{width:100%;height:40px;margin-right:0px;margin-bottom:15px;background: url(../../images/home/product/downarr.jpg) no-repeat calc(100% - 16px) center var(--text-color2);}
    .catesearchbg .catesearch .search{width:100%;}
    .product_bg .list .item{width:calc(50% - 24px);padding:0 12px 2em;}
    .product_bg .list .item:nth-child(3n+1){padding:0 12px 2em;}
    .product_bg .list .item:nth-child(3n+3){padding:0 12px 2em;}
    .product_bg .list .item .item-link .title{padding:0.5em 1em 1em 1em;text-align:center;font-size:var(--font-size-s);}
    .product_bg .list .item .item-link .title-link{padding:0;text-align:center;height:auto}
    .product_bg .list .item .item-link .title-category{text-align:center;padding:0;}
    .product_bg .list .item .item-link .title-category::before{display:none;}
    .productblockbg{padding:0px;}
    .proview{padding:0px 20px;width:100%;}
    .proview_left{width:100%;}
    .proview_right{width:100%;margin-top:10px;}
    .proview_right>div.proview_right_box>div{position:relative;}
    .proview .productcontent{margin-top:10px;}
    .prevnext{margin-top:15px;flex-flow:column;}
    .prevnext .grid{width:100%;}
    .prevnext .grid:nth-child(2n){text-align:left;}
}
/*****************************************************/