@import url(responsive2.0.css);
@import url("../fonts/fonts.css");
.header{position: relative; z-index:100; transition: 0.5s}
.header .auto{position: relative}
.header .top_w{position: absolute;z-index: 100; left: 0;top: 0;width: 100%; transition: 0.5s; background:#1b1e22 no-repeat center top}
.header .top_h{ transition: 0.5s;}
.header .logo{padding: .2rem 0; width: 50%}
.header .other{position: relative;}

.header .lan a{color: #fff; position: relative;padding-left: 30px; display: block; white-space: nowrap; line-height: 22px;}
.header .lan >a{background: url("../images/lan.svg") no-repeat left;  padding-right: 22px;}
.header .lan >a:after{content: '';position: absolute; width: 13px; height: 100%; top: 0; right: 0;background: url("../images/lan_jt.svg") no-repeat center center}
.header .lan span{position: absolute;width: 100%; line-height: 40px;display: none}
.header .lan:hover span{display: block}
/*.header .open-search i,
.header .top-search .btn{background: url("../images/search.png") no-repeat center center;}
.header .open-search i{width:30px; height:30px; display:inline-block; vertical-align: middle; position: relative}
.header .open-search{ position: relative}
.header .top-search{background: rgba(0,0,0,1); border-radius: 30px; padding:4px 40px 4px 5px; width: 300px;}
.header .top-search .text{width: 100%;display: block; background: none; border: 0; color:#ffffff;}
.header .top-search .text.focus{color: #ffffff;}
.header .top-search .btn{right: 0; top:0;filter: brightness(0) invert(1);}*/
.header .search{ border-radius: 30px; background: #fff; padding-left: .25rem; padding-right:.6rem; overflow: hidden; position: relative}
.header .search input{width: 100%; height: 40px; line-height: 40px; border: none;background: #fff; cursor: pointer}
.header .search .btn{width: .6rem; height: 100%; position: absolute; top:0; right: 0;background:#d00d0d url("../images/search.svg") no-repeat center center}

.header menu li span{display: block; font-size: 18px;}
.header menu li span a{display: block;}
.header menu li .sub{display: none;}
.header menu li .sub a{display: block; padding:.06rem .24rem;}
.header menu li .sub dt{padding: 0; text-align: left}
@media (min-width:1025px) {
.header .other{position: absolute; right: 0; top: 0; bottom: 0; }
.header .lan{position: absolute; top: 20%; right: 0}
.header .search{position: absolute; right: 0; bottom:15px; width: 3.2rem; }
.header menu{max-width: 780px;width: 60%}
.header menu li{position: relative;flex: 1;}
.header menu li span{line-height:70px; position: relative; text-align: center}
.header menu li span a{color: #fff;}
.header menu li.aon span a{background: #d00d0d}
.header menu li.has-sub span:after{content: '';right:-14px; top: 0; width: 12px; height: 100%; position: absolute; background: url(../images/jt.svg) no-repeat center center}
.header menu li .sub{position: absolute; white-space: nowrap; margin: auto; left: 50%; transform: translateX(-50%); min-width:130px; top: 100%; background-color:rgba(255,255,255,0.9);box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius:10px}
.header menu li .sub dl{padding: .15rem 0;}
.header menu li .sub dl dt{}
}
@media (min-width:1025px) and (max-width:1200px){
.header .search{width: 2.6rem; }
}

@media (max-width:1024px) {
.header .auto{width: 96%}
.header .logo{padding: 10px 0}
.header .search{margin-right: .2rem; padding: 0}
.header .search input{display: none}
.header .search .btn{position: relative;width: .30rem; height: .30rem; display: block}
.header menu{position: fixed; left: -100%;top: 50px;height: calc(100vh - 50px); background-color: #fff;opacity: 0;transition: 0.5s;box-shadow: 0 5px 5px rgba(0,0,0,0.1); width:50vw; max-width: 240px;}
.menu-show .header menu{left: 0; opacity: 1;}
.header menu ul{padding: 20px 0;width: 100%; height: 100%; overflow: auto; display: block}
.header menu li{border-bottom: 1px dotted #eee;}
.header menu li span{line-height: 3; padding-left:1em; font-size: .20rem}
.header menu li .sub dl{padding: .1rem 0}
.header menu li .sub a{padding-left: 2em;font-size: .18rem}
.header menu li.has-sub span .op:before, 
.header menu li.has-sub span .op:after{background-color: #af231c;}
.header menu li .sub .box{right: 12vw;width: 40vw;top: 30%;position: fixed}

.header menu ul#pc{display: none}
.header li .sub{background-color: #eee;}
.header .open-menu{margin-left: .2rem; width: calc(40 / 16 * 1em); height: calc(40 / 16 * 1em); display: flex;flex-wrap: wrap;flex-direction: column; justify-content: space-between; transition: 0.3s;}
.header .open-menu span{display: block; transition: 0.3s;height: 2px; background-color: #000;}
.menu-show  .header .open-menu{border-radius: 50%; background-color: #af231c; }
.menu-show  .header .open-menu i{background-color: #fff;}
}

.IsTop{position: fixed; bottom:8%; right:5%; cursor: pointer; display: block;width:.5rem; height: .5rem; margin: auto; border-radius: 100px; background: #d00d0d  url(../images/icon_top.png) no-repeat center center}


.mag{position: fixed; bottom:calc(8% + .7rem); right:5%; cursor: pointer; display: flex; align-items: center;margin: auto;background: #d00d0d; border-radius: .25rem;}
.mag figure{color:#fff;white-space:nowrap; width: 0; overflow: hidden; } 
.mag:hover figure{width: auto; transition: .3s; padding-right:.2rem; line-height:.5rem;} 
.mag i{ display:block;width:.5rem; height: .5rem; background:url(../images/mag.svg) no-repeat center; background-size:auto .26rem; border-radius: 50%;}


.custom_search{width: 100%; height: 100%; position: fixed; top: 0; z-index: 110; display: none}
.custom_search .outbox{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.6);}
.custom_search .inbox{max-width: 950px; width:85%;padding:2% 0; position: relative; background: #fff; border-radius: 10px;}
.custom_search .close{position: absolute;right: -7%;top:0;z-index: 10;width:.4rem;height: .4rem;cursor: pointer;}
.custom_search .close::before,
.custom_search .close::after{ position:absolute; content:''; width:3px; height:70%; border-radius:3px; background-color:#fff; left:13px; top:5px;}
.custom_search .close::before{ transform:rotate(45deg);}
.custom_search .close::after{ transform:rotate(-45deg);}
.custom_search .tab{text-align: center;border-bottom: solid 1px #eeeeee}
.custom_search .tab span{cursor: pointer; display: inline-block; margin-bottom: -1px; padding: .2rem 0}
.custom_search .tab span.show{color: #d00d0d;border-bottom: solid 2px #d00d0d;}
.custom_search .tab span:not(:last-child){margin-right: 4vw}
.custom_search .box{padding:5% 7.5%; display: none;}
.custom_search .box .search:not(:nth-last-of-type(1)){margin-bottom: 1em;}
.custom_search .search{position: relative;}
.custom_search .search select{position: absolute; background-color: #eee; border-color: transparent; border-radius: .1rem; left: .1rem; width: 1rem; height: 80%; top: 50%; transform: translateY(-50%);}
.custom_search .search .text{width:75%; height: .8rem; border: none; background: #eeeeee url("../images/search2.svg") no-repeat 1.2rem; padding-left: 1.54rem; padding-right: .2rem; border-radius: 20px; color: #000000 }
.custom_search .search .btn{width:23.5%;display: flex; justify-content: center; align-items: center; text-align: center;background: #d00d0d; color: #fff; border-radius: 20px; transition: 0.5s}
.custom_search .search .btn:hover{background: #e60e0e}
.custom_search .record{padding-top: 2%}
.custom_search .record ul{margin-left: -.2rem; margin-right: -.2rem}
.custom_search .record li{padding: .1rem .2rem}
@media(max-width:768px){
.custom_search .box{padding: 5%}
.custom_search .search .text{height: .5rem; background-size: 20px; background-position: 10px; padding-left:40px; padding-right: 10px; }
.custom_search .search .btn{font-size: .16rem}
.custom_search .close{right: 0; top: -10%}
}

.bottom{background: #000000;}
.bottom a:not(:hover){opacity: 0.9}
.bottom .box_t{padding: 4% 0}
.bottom .box{width: 33%}
.bottom .contact{padding-top: .4rem}
.bottom .contact b{display: block; color: #b11617;line-height: 2; padding-bottom: .3rem}
.bottom .contact p{line-height: 2}
.bottom .column{line-height:.32rem; width:36%;}
.bottom .column dl{position: relative}
.bottom .column dt a{opacity: 1}
.bottom .column dd{padding: .1rem 0}
.bottom .column dd span{display: block}
.bottom .other{width: 242px; text-align: center}
.bottom .other li{width:45.46%}
.bottom .other li img{border-radius:5px; width: 100%}
.bottom .other li p{padding-top: 10px}
.bottom .box_b{width: 100%;padding:3% 0; border-top: solid 1px rgba(255,255,255,0.4)}
.bottom .lm{order: 2;}
.bottom .copyright{}
.bottom .copyright a{margin-left: 5px; display: inline-block}
@media(max-width:1100px){
.bottom .column{width: 100%; padding-bottom: 2%}
.bottom .box{width:50%; order: 2}
.bottom .other{order: 3}
.bottom .lm{width: 100%; order: 0; padding-bottom: 1%}
}
@media(max-width:640px){
.bottom .column{display: none}
.bottom .box{width: 100%; padding-bottom:5%}
.bottom .other{margin: auto}
.bottom .contact b{padding-bottom: .15rem}
.bottom .copyright a.icp{display: none}
}

.banner{position: relative;color: #fff;}
.banner .infobox{position: absolute; width: 100%; top: 50%; transform: translateY(-50%)}
.banner .column{position: absolute;top: 50%; left: 50%; transform: translate(-50%,-50%)}
.banner .column span{display: inline-block}

.banner img{width: 100%}
.banner img.wap{display: none}
.banner .slick-dots{bottom: .6rem; position: absolute; right: 8%; width: auto; padding: 0}
.banner .slick-dots li{margin: 0px 3px}
.banner .slick-dots li button{width: 10px; height: 1px;background: rgba(255,255,255,0.5); border-radius:inherit;}
.banner .slick-dots li button:before{content: '';left: 0; width: 0; position: absolute; width: 0%; height: 100%;transition: 0.5s}
.banner .slick-dots li.slick-active button{width: 70px}
.banner .slick-dots li.slick-active button:before{width: 100%; background: #ffffff;transition-delay: 0.3s}
@media (max-width:1024px) {
.banner img.pc{display: none}
.banner img.wap{display:block}
}

.news_list .newhot{padding:3%}
.news_list .newhot .pic{width:45.593%;}
.news_list .newhot .pic figure{ padding-bottom:76.668%;border-radius: 10px;}
.news_list .newhot .txt{width:54.407%; padding: 3% 0 3% 3%}
.news_list .newhot .txt h4{margin-top: .3rem; margin-bottom: .2rem; line-height: 1.625}
.news_list .newhot .txt p{line-height:2; margin-bottom:5%}
.news_list .newhot .txt time{padding-bottom: 4%; border-bottom: solid 1px #999999; display: inline-block}
.news_list .newhot .slick-arrow{background: #fff; box-shadow: 0 10px 10px rgba(0,0,0,0.1)}
.news_list .newhot .slick-arrow:not(.slick-disabled):before{filter:none}
@media (min-width:1024px) {
.news_list .newhot .slick-arrow{top:90%}
.news_list .newhot .slick-prev {left: 48.593%}
.news_list .newhot .slick-next {left: 48.593%; margin-left: 120px; right: auto}
}
.news_list .list{padding-top: 2%}
.news_list .list .ul:after{content: ''}
.news_list .list .ul:after,
.news_list .list .item{width:31.429%}
.news_list .list .item{padding-top:4%}
.news_list .list .item a{display: block; padding:9.092%;border-radius: 10px;}
.news_list .list .pic figure{ padding-bottom:69.445%;border-radius: 10px;}
.news_list .list .txt{padding-top: .3rem}
.news_list .list .txt h4{line-height:.32rem; height: .64rem; margin-bottom: .3rem}
.news_list .list time{position: relative; display: block; line-height: .31rem}
.news_list .list time:after{content: '';position: absolute;right: 0; width:.61rem; height: 100%; background: url("../images/jt3.svg") no-repeat center center; background-size: contain;}
@media(max-width:768px){
.news_list .newhot .pic,
.news_list .newhot .txt{width: 100%;}
.news_list .newhot .slick-arrow{top:25%}

.news_list .list{padding-top: 5%}
.news_list .list .ul:after{display: none}
.news_list .list .item{width:48.9%}
.news_list .list .item a{padding:5%}
.news_list .list .txt{padding-top:5%}
.news_list .list .txt h4{margin-bottom: 5%}
}

.news_recommend{background: #f7f7f7; padding:5% 0}
.news_recommend h3{text-align: center; padding-bottom: 3%}
.news_recommend .news_list .list{padding-top: 0}
.news_recommend .news_list .list .item{padding: 0; margin: 0px .34rem}
.news_recommend .slick-slider{margin-left: -.34rem;margin-right: -.34rem}
@media(max-width:1200px){
.news_recommend .news_list .list .item{margin: 0px .2rem}
.news_recommend .slick-slider{margin-left: -.2rem;margin-right: -.2rem}
}
@media(max-width:768px){
.news_recommend .news_list .list .item{margin: 0px .1rem}
.news_recommend .slick-slider{margin-left: -.1rem;margin-right: -.1rem}
}


.sitemap li{border-bottom: solid 1px #dddddd; padding: 1% 0}
.sitemap li .sub{padding-top: .1rem;}
.sitemap li .sub span{display: inline-block; margin-right:2vw; position: relative}
.sitemap li .sub span a:not(:hover){opacity: 0.6}
.sitemap li .box{position: absolute; left:50%; transform: scale(0); left: 0; right: 0; bottom:100%;background: #fff; padding: 10px; text-align: center; width: 0px; box-shadow: 0 5px 5px rgba(0,0,0,0.1);transition: 0.5s; color: #333333; border-radius: 10px; margin:auto}
.sitemap li span:hover .box{transform: scale(1); width: 160px;}

.search_list li{border-bottom: solid 1px #dddd; padding: 1.5% 0}
.search_list .pic{width: 120px; margin-right:2%}
.search_list .txt{flex: 1}
.search_list .txt h4{padding:2% 0}
.search_list .txt time{float: right}
.search_list .txt span{opacity: 0.4}

.article_detail .title{text-align: center; padding-bottom: 2%}
.article_detail .title dl{padding: 1% 0}
.article_detail .title dl span{display: inline-block; padding: 0px 10px}
.article_detail .article{padding: 3% 0; border-top: solid 1px #e5e5e5;border-bottom: solid 1px #e5e5e5;}
.article_detail .article {line-height: 2}
.article_detail .article img{height: auto!important}

.prev_next{line-height: 44px; padding: 3% 0;}
.prev_next p.dot a:not(:hover){opacity: 0.7}
.prev_next p.back{max-width: 150px; margin: auto;padding-bottom: 3%}
.prev_next p.back a{display: inline-block; padding: 0 30px 0 55px; color: #fff; background: #cf0101 url("../images/back.svg") no-repeat 28px center; border-radius: 30px;}

.play_video{cursor: pointer; width:44px; height:44px; left: 0; right: 0; z-index: 9;}
.play_video,
.play_video i,
.play_video:before,
.play_video:after{border-radius: 100%;margin: auto;top: 0; bottom: 0; position: absolute;}
.play_video i{width: 46px; height: 46px; z-index: 5; background:#fff url(../images/play.svg) no-repeat center center}
.play_video:before,
.play_video:after{content: '';left: -100%; right: -100%;}
.play_video:before{width: 136%; height: 136%; opacity: 0.5; animation: yuan1 1s linear infinite; background: #d00d0d}
.play_video:after{border:dashed 1px #d00d0d; width: 166%; height: 166%; opacity: 0.1; animation: yuan2 1.2s linear infinite;}

@keyframes yuan1{
0{width: 136%; height: 136%;}
100%{width: 180%; height: 180%; opacity: 0}
}
@keyframes yuan2{
0{width: 166%; height: 166%;}
100%{width: 220%; height: 220%; opacity: 0}
}

.video_files{position:absolute; left:0; top:0; width:100%; height:100%; z-index:10;}
.video_files video{width:100%; height:100%; background-color:#000; position: absolute;}
.video_files .close{position: absolute;right: 3%;top: 3%;z-index: 10;width: 30px;height: 30px;border-radius: 50%;background: linear-gradient(45deg,#d00d0d,#b11617);cursor: pointer;}
.video_files .close::before,
.video_files .close::after{ position:absolute; content:''; width:3px; height:70%; border-radius:3px; background-color:#fff; left:13px; top:5px;}
.video_files .close::before{ transform:rotate(45deg);}
.video_files .close::after{ transform:rotate(-45deg);}
[rel="outside"] .video_files{position: fixed; align-items: center; justify-content: center}
[rel="outside"] .video_files .filesbox{position: relative; max-width: 1200px; width: 96%;}

.scrollbar::-webkit-scrollbar{width: 8px;}
.scrollbar::-webkit-scrollbar{width: 5px; height:5px;-webkit-overflow-scrolling : touch;background-color:transparent;}
.scrollbar::-webkit-scrollbar-track{background-color: transparent;}
.scrollbar::-webkit-scrollbar-thumb{background-color: #eeeeee;}
.scrollbar::-webkit-scrollbar-button{height: 0px;background-color: #ffffff;}

/*xx index*/
.section{padding:3% 0}

.location {position: relative; z-index: 2}
.location .box{padding: 2% 0}
.location em{font-style: normal; padding: 0px 5px}
@media(min-width:768px){
body:not(.no_banner) .location .box{position: absolute; padding: 0; top: -.6rem;}
body:not(.no_banner) .location .box,
body:not(.no_banner) .location .box a{color: #fff}
}

.choose_type{border-radius: 10px;background: #eeeeee;padding:3%; margin-bottom: 3%; position: relative; z-index: 10}
.choose_type .title{padding-bottom:1%}
.choose_type .title p{margin-top: .1rem; margin-bottom: .15rem}
.choose_type dl{width:29.5%; position: relative; transition: 0.5s; z-index: 10}
.choose_type dl dt{background: #fff;border-radius:5px;padding: 0 8%; line-height:.6rem; position: relative; cursor: pointer}
.choose_type dl dt:after{content: ''; position: absolute; width:8px; height: 15px; margin: auto; top: 0; bottom: 0; right:8%; background: url(../images/jt5.svg) no-repeat center center; transition: 0.5s}
.choose_type dl dd{background: #fff; position: absolute; width: 100%; display: none;}
.choose_type dl ul{max-height: 3rem; overflow-y: auto}
.choose_type dl ul li:not(:last-child){border-bottom: solid 1px #eeeeee}
.choose_type dl ul li a{line-height:.58rem; cursor: pointer; padding: 0px 8%}
.choose_type dl ul li a:hover{color: #fff; background: #d00d0d}
.choose_type dl.check{width:10%; max-width: 120px; background: #d00d0d;display:flex;justify-content: center; align-items: center; color: #fff; text-align: center;border-radius:5px;align-content: center; cursor: pointer}
.choose_type dl.show{transform: translateY(-10px); z-index: 12}
.choose_type dl.show dt{box-shadow: 0 0 0 1px #dddddd; border-radius: 0}
.choose_type dl.show dt:after{transform: rotate(90deg)}
.choose_type dl.show dd{box-shadow:  0 0 0 1px #dddddd}
@media(max-width:640px){
.choose_type dl{width: 100%; margin-bottom: 2%}
.choose_type dl.check{width: 100%; max-width: inherit;padding:3%}
.choose_type dl dt{line-height: .5rem}
}

.choose_model{border: solid 1px #dddddd; border-radius: 10px;padding:3%; margin-bottom: 3%}
.choose_model .title{padding-bottom: 2%}
.choose_model ul{max-height: 200px; overflow-y: auto}
.choose_model li{width: 20%;padding: 0.4%}
.choose_model li a{border: solid 1px #dddddd;border-radius: 2px; line-height:3; padding: 0 5%; position: relative; cursor: pointer}
.choose_model li a:after{content: ''; position: absolute; width: 20px; height: 9px; margin: auto; top: 0; bottom: 0; right: 5%; background: url(../images/jt4.svg) no-repeat center center}
.choose_model li:not(.aon)  a:after{filter:grayscale(100%) brightness(300%); }
.choose_model li.aon a{border-color: #d00d0d; color: #d00d0d}
@media(max-width:1200px){
.choose_model li{width:25%}
}
@media(max-width:1024px){
.choose_model li{width: 33.333%}
}
@media(max-width:640px){
.choose_model li{width:50%}
}

.choose_parts{padding-bottom: 3%}
.choose_parts .item{width: 12.5%;padding:1% 0; margin-bottom: 1%}
.choose_parts .item a{display: block; width:74.29%; margin: auto; cursor: pointer}
.choose_parts .item .pic{background: #eeeeee; border-radius: 100%;}
.choose_parts .item .pic img{max-width: 40%;}
.choose_parts .item h4{text-align: center; margin-top: .2rem}
.choose_parts .item:not(.aon) .pic img{filter:grayscale(100%) brightness(100%); }
.choose_parts .item.aon h4{color: #d00d0d}
@media(max-width:768px){
.choose_parts .item{width:20%}
}

.product_group{padding: 1% 0}
.product_group h3{text-align: center;line-height: 1.5}
.product_group h4{text-align:center;font-weight: normal;color:#777;margin:0;}
.product_group .list{padding: .3rem 0; margin-left: -.13rem; margin-right: -.13rem;}
.product_group .list ul li{width: 25%;padding:.2rem .13rem;}
.product_group .list ul .pic{max-width: 330px; margin: auto}
.product_group .list ul .pic figure{padding-bottom: 78.79%;background: #eeeeee; border-radius: 10px;}
.product_group .list ul h4{text-align: center;margin-top: .2rem}
.product_group .list_type{ margin-left: -.2rem; margin-right: -.2rem;}
.product_group .list_type ul li{width: 25%;padding:.1rem .2rem; margin-bottom: .4rem}
.product_group .list_type ul .pic figure{padding-bottom:68.125%;border: solid 1px #dddddd; border-radius: 20px;}
.product_group .list_type ul h4{margin-top: .2rem; margin-bottom: .15rem}
@media(max-width:1024px){
.product_group .list ul li{width: 33.333%}
.product_group .list_type ul li{width: 33.333%}
}
@media(max-width:768px){
.product_group .list ul li{width:50%}
.product_group .list_type{ margin-left: -.1rem; margin-right: -.1rem;}
.product_group .list_type ul li{width:50%;padding:.2rem .1rem;margin-bottom:0}
}

.product_main {}
.product_main .left{width:24.286%;}
.product_main .right{width:73%}
@media(max-width:768px){
.product_main .left{width:100%;}
.product_main .right{width:100%}
}

.choose_filter{border-radius: 20px; border: solid 1px #dddddd; padding:.2rem .4rem}
.choose_filter .title{padding-bottom: .2rem}
.choose_filter .title p{padding-top: .05rem;}
.choose_filter dl{padding-bottom: .1rem}
.choose_filter dt{padding: .15rem 0; position: relative; cursor: pointer}
.choose_filter dl:not(:last-child) dt:before{content: ''; position: absolute; left: 0; bottom:-1px; width: 100%;height: 1px; background: #dddddd; }
.choose_filter dt:after{content: ''; position: absolute; width:8px; height: 15px; margin: auto; top: 0; bottom: 0; right:.1rem; background: url(../images/jt5.svg) no-repeat center center; transition: 0.5s}
.choose_filter dd{border-top: solid 1px #dddddd;padding: .2rem 0; display: none}
.choose_filter dd label{padding: 10px 0; line-height: 40px;cursor: pointer}
.choose_filter input{width: .2rem; height:.2rem;margin:0 .15rem 0 0; vertical-align: sub; border: 1px solid #dedede;position: relative;-webkit-appearance: none;}
.choose_filter input:after{position: absolute; content: ''; }
.choose_filter input[type="radio"]{ border-radius: 50%;}
.choose_filter .show input{border-color: #d00d0d;}
.choose_filter .show input[type="radio"]:after{width: 50%; height:50%; background:#d00d0d; margin: auto; left: 0; top: 0; bottom: 0;right: 0; border-radius: 100%}
.choose_filter .show input[type="checkbox"]:after{width: 100%; height: 100%; background:#d00d0d  url(../images/checkbox.svg) no-repeat center center}
.choose_filter .show{color: #d00d0d}
.choose_filter dl.on dt:after{transform: rotate(90deg)}
.choose_filter dl.on dt{border-color: #fff}
@media(max-width:1024px){
.choose_filter{padding: .1rem;border-radius:10px;margin-bottom: 5%}
}
@media(max-width:768px){
.choose_filter .type{display: flex; justify-content: space-between; flex-wrap: wrap}
.choose_filter dl{width: 48%; position: relative}
.choose_filter dl:last-child dt:before{content: ''; position: absolute; left: 0; bottom:-1px; width: 100%;height: 1px; background: #dddddd; }
.choose_filter dt{padding: .1rem 0}
.choose_filter dd{position: absolute;width: 100%; background:rgba(255,255,255,0.95); box-shadow:  0 10px 10px rgba(0,0,0,0.1); z-index: 10; padding: 2%}
.choose_filter dd ul{max-height:300px; overflow-y: auto}

}

.product_list li{border-bottom: solid 1px #dddddd; padding-bottom: .3rem; margin-bottom: .3rem; cursor: pointer;}
.product_list .pic{width:31.312%;}
.product_list .pic figure{padding-bottom:68.125%;border: solid 1px #dddddd; border-radius: 10px;}
.product_list .info{width: 65%; line-height: .28rem}
.product_list .txt{width:calc(100% - 240px)}
.product_list .star{padding-top: .1rem; padding-bottom: .1rem}
.product_list .other{width:230px;align-content: space-between; justify-content: flex-end}
.product_list .price{width: 100%; text-align: right}
@media(max-width:1200px){
.product_list .txt{width: 100%}
.product_list .other{width: 100%; justify-content: space-between; align-items: center; padding-top: .1rem}
.product_list .price{width: auto}
}
@media(max-width:640px){
.product_list .pic{width:100%;}
.product_list .info{width: 100%; padding-top: 4%}
}

.star{display: flex}
.star span{width: 110px; height: 22px; position: relative;background: url(../images/wjx_gray.png) repeat-x left}
.star span:before{content: '';position: absolute;height: 100%; background: url(../images/wjx.png) repeat-x left}
.star span.s1:before{ width: 20%; }
.star span.s2:before{ width: 40%; }
.star span.s3:before{ width: 60%; }
.star span.s4:before{ width: 80%; }
.star span.s5:before{ width: 100%; }
.star i{font-style: normal; padding-left: 18px; color: #000}

.view{font-size:.18rem; color: #0e1116; border-radius: 25px; border: solid 1px #0e1116; width: 1.7rem;line-height:.5rem; text-indent: .32rem; display: block; position: relative; transition: 0.5s}
.view:after{content:'';position: absolute;right: .26rem; top: 0; bottom: 0; margin: auto; width: 24px; height: 11px; background: url(../images/jt.svg) no-repeat center center; transition: 0.5s}
.view:hover{color: #fff; background-color: #d00d0d; border-color: #d00d0d}
.view:hover:after{filter: brightness(0) invert(1);right: .10rem; }


.Pages{text-align: center;padding-top:3%; padding-bottom:3%; line-height:.58rem; font-size: .18rem;}
.Pages span:not(.p_page),
.Pages .p_page a.a_first,
.Pages .p_page a.a_end{display: none}
.Pages .p_page,
.Pages .p_page em{ display: flex; justify-content: center; align-content: center}
.Pages .p_page em{font-style: normal; padding: 0px .3rem}
.Pages .p_page a{color: #acacac; display: inline-block; margin: 0 10px; min-width: .6rem;  overflow: hidden; position: relative; background: #fff; border-radius: 100%;border: solid 1px #f7f7f7; box-shadow: 0 10px 10px rgba(0,0,0,0.1)}
.Pages .p_page a:not(.no):hover,
.Pages .p_page .a_cur{background: #d00d0d; color: #fff;border-color: #d00d0d}
.Pages .p_page .a_prev,
.Pages .p_page .a_next{text-indent: -200px;}
.Pages .p_page .a_prev:before,
.Pages .p_page .a_next:before{content:'';left: 0; position: absolute; width: 100%; height: 100%; background: url(../images/page_icon.svg) no-repeat center center}
.Pages .p_page .a_next:before{transform: rotate(180deg)}
.Pages .p_page .a_prev:not(.no):hover:before,
.Pages .p_page .a_next:not(.no):hover:before{filter: brightness(0) invert(1);}
.Pages .p_page a.no{cursor: default}
@media(max-width:768px){
.Pages{line-height: .38rem;padding-top:8%; padding-bottom:5%; }
.Pages .p_page em{ padding: 0px .1rem}
.Pages .p_page a{margin: 0 5px; min-width: .4rem; }
}

/*xx index*/
.column_title{padding: .4rem 0;}
.column_title h3{background: url("../images/jt2.svg") no-repeat right center; padding-right: 40px;}
.column_title a{padding-right: 22px; background: url(../images/more_jt.svg) no-repeat right center}
.body_index .column_title,
.body_index .column_title a{color: #fff} 
.full_view{position: relative}
.full_view a{color: #fff; background: url("../images/icon_360.svg") no-repeat center top; padding-top:60px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2}
.full_view img{width: 100%;}
.full_view .wap{display: none}
@media(max-width:1024px){
.full_view .pc{display:none}
.full_view .wap{display:block}
}

.about_home{position: relative;background:#eeeeee; overflow: hidden}
.about_home:after{content: ''; position: absolute; left:-23%; top:-8%; width:32.37%; height: 100%;background:url("../images/about_img.svg") no-repeat right top;background-size:100%}
.about_home .about{padding: 8% 0}
.about_home .title{line-height: 1.5; margin-bottom: 3%}
.about_home .article{text-align: justify;padding-right:8%; line-height:2.125; max-height:370px; overflow-y: auto}
.about_home .scrollbar::-webkit-scrollbar-track{background-color: #c1c2c3;}
.about_home .scrollbar::-webkit-scrollbar-thumb{background-color: #b11617;}
.about_home .photo{position: relative}
.about_home .photo img{width: 100%}
@media(min-width:1024px){
.about_home .about{width:41%;}
.about_home .photo{position: absolute; width:52.549%; height: 100%;right: 0; top: 0}
.about_home .photo img{height: 100%;; object-fit: cover;}
}

.product_home{padding-bottom: 2%; background:#0e1116 no-repeat center top; background-size:100%}
.pro_type {padding: 2% 0}
.pro_type .item a{display: block; position: relative}
.pro_type .item .pic figure{padding-bottom: 56.25%; border-radius: 10px;}
.pro_type .item.en .txt{top:30%;}
.pro_type .item:nth-child(1) .txt{top: 15%}
.pro_type .item .txt{position: absolute; left:.45rem; top:50%; width: 80%; transform: translateY(-50%); z-index: 5}
@media(min-width:768px){
.pro_type .item{width:34.286%;margin-left: 1.428%}
.pro_type .item:nth-child(1){width:28.572%; margin-left: 0; margin-bottom: 1.428%}
.pro_type .item:nth-child(4),
.pro_type .item:nth-child(5){margin-top: -20.8%}
.pro_type .item:nth-child(4){margin-left:30%}
.pro_type .item:nth-child(6),
.pro_type .item:nth-child(7){width:49.286%;}
.pro_type .item:nth-child(6){margin-left: 0}
.pro_type .item:nth-child(1) .pic figure{padding-bottom:140%}
.pro_type .item:nth-child(6) .pic figure,
.pro_type .item:nth-child(7) .pic figure{padding-bottom:39.132%}
}
@media(max-width:768px){
.pro_type .list{justify-content: space-between; position: relative}
.pro_type .item{width: 49%; margin-bottom:2%}
.pro_type .item:nth-child(1) .pic figure{padding-bottom:120%}
.pro_type .item:nth-child(3){position: absolute; right: 0; top:25%}
.pro_type .item .txt{left: .2rem}
}

.pro_brand .list{margin-left: -.1rem; margin-right: -.1rem;}
.pro_brand .item{width: 25%;padding: .1rem}
.pro_brand .item a{display: block; position: relative}
.pro_brand .item .pic figure{background: #eeeeee; padding-bottom:35.825%; border-radius: 10px;}
.pro_brand .item .txt{position: absolute; width: 100%; height: 100%; top: 0; opacity: 0; transition: 0.5s; background-color: rgba(0,0,0,0.7);border-radius: 10px; color: #fff}
.pro_brand .item:hover .txt{opacity: 1;}
@media(max-width:768px){
.pro_brand .item{width:50%;}
}

.pro_new {padding: 2% 0}
.pro_new .list{margin-left: -.13rem; margin-right: -.13rem}
.pro_new .item{padding: .13rem}
.pro_new .item a{display: block; border-radius: 10px;background: #eeeeee; overflow: hidden}
.pro_new .item .txt{padding:7% 8%}
.pro_new .item h4{line-height: .3rem; height: .6rem}
.pro_new .item .other{margin-top: .2rem}
.pro_new .item .new{right: .25rem; top: .25rem}
@media(min-width:1024px){
.pro_new .slick-prev{left:-.4rem;}
.pro_new .slick-next{right:-.4rem;}
}
@media(min-width:1600px){
.pro_new .slick-prev{left:-1rem;}
.pro_new .slick-next{right:-1rem;}
}

.carousel{background-color: #000000;}
.carousel .item{padding: 1rem 0;}
.carousel .item .box{border-radius: 10px;overflow: hidden;transition: 0.5s; position: relative;}
.carousel .item .box .title{position: absolute;left: 0.1rem; bottom: 0.1rem;font-size: 16px;color: #fff;}
.carousel .item:not(.slick-current) a{opacity:0.3}
.carousel .item.slick-current{z-index: 5}
.carousel .item.slick-current .box{transform: scale(1.5)}
@media(max-width:768px){
    .carousel .item.slick-current .box{transform: scale(1)}
}

.pro_hot {padding: 2% 0}
.pro_hot .item{padding: .5rem 0;}
.pro_hot .item .box{border-radius: 10px;padding:10%; background: #eeeeee; overflow: hidden; transition: 0.5s; position: relative;}
/* .pro_hot .item .pic{width: 55%} */
.pro_hot .item .pic{width: 50%}
.pro_hot .item .pic figure{padding-bottom: 188.44%}
.pro_hot .item .txt{width: 45%; padding: 5% 0}
.pro_hot .item h4{line-height: .4rem;}
.pro_hot .item .other{margin-top: .2rem}
.pro_hot .item .price{margin-bottom: .1rem}
.pro_hot .item .cate{margin-bottom: .1rem}
.pro_hot .item .intro {margin-bottom: .1rem}
.pro_hot .item .hot{right: .25rem; bottom: .25rem}
.pro_hot .item .contact{
    /* position: absolute; */
    position: static;
    transform: scale(.8);
    transform-origin: left;
    margin-top: 1em;
    left:60%; bottom:22%}
.pro_hot .item:not(.slick-current) a{opacity:0.3}
.pro_hot .item:not(.slick-current) .contact,
.pro_hot .item:not(.slick-current) .hot{opacity: 0}
.pro_hot .item.slick-current{z-index: 5}
.pro_hot .item.slick-current .box{left: -34.762%;width:169.524%; padding: 5%; transform: scale(1.2)}
.pro_hot .item.slick-current figure{padding-bottom: 100%}

.new,
.hot{position: absolute; z-index: 10; background: no-repeat center center; background-size: contain}
.new{width: .54rem; height: .56rem; background-image: url("../images/pro_new.svg")}
.hot{width: .70rem; height: .72rem; background-image: url("../images/pro_hot.svg")}

.pro_major li{width: 31%; padding: .2rem 0; margin-bottom: .2rem; color: #fff; border-bottom: solid 1px rgba(255,255,255,.5)}
.pro_major li .pic{width: 35px; margin-right: 10px;}
.pro_major li .txt{flex: 1}
@media(max-width:1024px){
.pro_major li{width: 48%}
}

.company .list{margin-left: -.1rem; margin-right: -.1rem}
.company .item{width: 25%; padding: .1rem}
.company .item .pic figure{padding-bottom:119.405%; border-radius: 10px;}
.company .item .pic figure:after{content: '';position: absolute; width: 100%; height:60%; bottom: 0; left: 0; background: linear-gradient(45deg,rgba(0,0,0,0.5),rgba(0,0,0,0)); transition: 0.5s}
.company .item .txt{position: absolute; left:12%; right:12%; bottom:10%; color: #fff}
.company .item h4{position: relative; padding-right: 10%;line-height: .4rem}
.company .item h4:after{content: '';position: absolute;right: 0; width: 20%; height: 100%; background: url("../images/jt3.svg") no-repeat center center; background-size: contain;filter: brightness(0) invert(1);}
.company .item .icon{width: .6rem; height: .6rem; background: #d00d0d; border-radius: 100%; align-content: center; text-align: center}
.company .item:hover .pic figure:after{opacity: 0}
@media(max-width:1024px){
.company .item{width: 50%}
}

.contact_us{padding:5%; margin-bottom: 3%}
.contact_us .column_title{padding-top: 0; padding-bottom:0}
.contact_us .contact{width: 50%;min-height: 284px; border-right: solid 1px #dddddd}
.contact_us .contact b{display: block; color: #d00d0d;line-height: 2; padding-bottom: .3rem}
.contact_us .contact p{line-height: 2}
.contact_us .other{width: 50%}
.contact_us .other ul{width: 272px; text-align: center; margin: auto}
.contact_us .other li{width:45.46%; max-width: 110px}
.contact_us .other li img{border-radius:5px; width: 100%}
.contact_us .other li p{padding-top: 10px}
@media(max-width:768px){
.contact_us .contact{width: 100%;border-right:none;min-height: inherit; padding: 4% 0;margin-bottom: 5%; border-bottom: solid 1px #dddddd}
.contact_us .other{width: 100%}
}

.message{padding:5%;}
.message .column_title{padding-top: 0}

.message_home{background: #111419; padding: 2% 0}
.message_home .formbox{background: #fff; border-radius:15px; padding: 5%}

.formbox .group{width: 48.5%; padding: .15rem 0}
.formbox .full{width: 100%}
.formbox .name{padding-bottom: .15rem}
.formbox .tips{position: absolute; line-height: .58rem; padding: 0 .3rem}
.formbox .text{border-radius:10px; border: solid 1px #303030; width: 100%;height: .58rem; padding: 0 .3rem}
.formbox textarea.text{height: 1.6rem; padding-top: .2rem; padding-bottom: .2rem}
.formbox .btnbox{text-align: center; padding-top: 3%}
.formbox .btnbox .btn{background: #b11617; width: 1.7rem; line-height: .5rem; color: #fff; border: none; border-radius: 30px; cursor: pointer; transition: 0.5s}
.formbox .btnbox .btn:hover{background: #d00d0d}
@media(max-width:768px){
.formbox .group{width:100%; }
.formbox .tips{padding: 0 .1rem;line-height: .5rem;}
.formbox .text{padding: 0 .1rem;height: .5rem; }
}


.boxshadow{background-color: #ffffff; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);border-radius: 20px;}

.about_company {margin-bottom: 3%;padding:5.715%;}
.about_company .photo{position: relative;border-radius: 10px; overflow: hidden}
.about_company .photo img{width: 100%;}
.about_company .about{padding-top: 4%}
.about_company .title{line-height: 1.5; margin-bottom: 2%}
.about_company .article{text-align: justify;padding-right:8%; line-height:2.125;}

.about_factory {padding:5.715%;}
.about_factory .column_title{padding-top: 0}
.about_factory .list{margin-left: -.1325rem; margin-right: -.1325rem}
.about_factory .item{width: 25%;padding: .1325rem}
.about_factory .item .box{position: relative;border-radius: 10px; overflow: hidden}
.about_factory .item figure{padding-bottom: 69%}
.about_factory .item .txt{position: absolute; width: 100%; background: rgba(208,13,13,0.9); bottom:0; line-height: .46rem; text-align: center; color: #fff; opacity: 0; transition: 0.5s}
.about_factory .item:hover .txt{opacity: 1}
@media(max-width:768px){
.about_factory .item{width: 50%}
}

.product_details {padding:1% 0}
.product_details .product{align-items: flex-start}
.product_details .photo{width:58.572%}
.product_details .small_pic{width:18.294%}
.product_details .small_pic .item{padding:8px 0;}
.product_details .small_pic .pic{position: relative;cursor: pointer;border-radius: 10px;overflow: hidden;border-radius: 10px;background: #000}
.product_details .small_pic figure{}
.product_details .photo .play{display: block; background:url("../images/play2.svg") no-repeat center center; z-index: 5}
.product_details .photo .play,
.product_details .photo video{position: absolute; width: 100%; height: 100%; }
.product_details .photo .small_pic .slick-current .pic figure{opacity: 0.7}
.product_details .big_pic_box{width:79.27%;border-radius: 20px;background: #eeeeee; position: relative}

.product_details .big_pic .icon{position: absolute; right: .3rem; bottom: .3rem; z-index: 10; width: .35rem; height: .35rem; background: url("../images/big.svg") no-repeat center center; background-size: contain}
.product_details .big_pic .slick-current video{}


.product_details .big_pic_box #bigShow {width: 100%;height: 100%; z-index: 999; display: none;overflow: hidden;top: 0;left: calc(100% + 30 / 16* 1em);background-color: #fff;position: absolute;}
.product_details .big_pic_box #big_mask {position: absolute;display: none;top: 0;left: 0;z-index: 2;width: 50%;height: 50%;background-color: rgba(0, 0, 0, 0.5);}
.product_details .big_pic_box #big{width: 200%; height: 200%; right: 0; top: 0; z-index: 1; position: absolute; background-size: cover;}

@media(max-width:1024px){
    .product_details .big_pic_box #bigShow{left: 0; top: calc(100% + 30/16 * 1em); border-radius: 20px;}
}


.product_details .details{width:36.429%}
.product_details .details h1{line-height: 1.5}
.product_details .details .star{padding:5% 0; border-bottom: solid 1px #ebeaeb}
.product_details .details .price{padding:5% 0; border-bottom: solid 1px #ebeaeb; position: relative;}
.product_details .details .rate{font-size: .16rem; color: #555; position: absolute; right: 0; top: 50%; transform: translateY(-50%)}
.product_details .details .cate{font-size: .2rem; margin-top: 1em;}
.product_details .details .intro{line-height: 1.5; margin-top: 1em;}

 .product_details .details .city{line-height: .52rem;padding:7% 0}
.product_details .details .city dl{min-width: 160px; border-radius: 10px;position: relative}
.product_details .details .city dt{background: #fff;border-radius:5px;padding: 0 .4rem 0 .2rem; position: relative; cursor: pointer;border: solid 2px #000000;  transition: 0.5s }
.product_details .details .city dt:after{content: ''; position: absolute; width:8px; height: 15px; margin: auto; top: 0; bottom: 0; right:8%; background: url(../images/jt5.svg) no-repeat center center; transition: 0.5s}
.product_details .details .city dd{background: #fff; position: absolute; width: 100%; display: none; border: solid 2px #000000; border-top: none}
.product_details .details .city ul{max-height: 3rem; overflow-y: auto; max-height: 200px;}
.product_details .details .city ul li:not(:last-child){border-bottom: solid 1px #eeeeee}
.product_details .details .city ul li a{display: block; line-height:.40rem; cursor: pointer; padding: 0px .2rem}
.product_details .details .city ul li a:hover{color: #fff; background: #d00d0d}
.product_details .details .city dl.show dt{border-bottom-left-radius: 0; border-bottom-right-radius: 0}
.product_details .details .city dl.show dt:after{transform: rotate(90deg)} 


.location .city{line-height: .52rem;
    /* padding:7% 0; */
    padding: 10px 0;
}
.location .city dl{width: 160px; border-radius: 10px;position: relative}
.location .city dt{background: #fff;border-radius:5px;padding: 0 .2rem; position: relative; cursor: pointer;border: solid 2px #000000;  transition: 0.5s }
.location .city dt:after{content: ''; position: absolute; width:8px; height: 15px; margin: auto; top: 0; bottom: 0; right:8%; background: url(../images/jt5.svg) no-repeat center center; transition: 0.5s}
.location .city dd{background: #fff; position: absolute; width: 100%; display: none; border: solid 2px #000000; border-top: none}
.location .city ul{max-height: 3rem; overflow-y: auto; max-height: 200px;}
.location .city ul li:not(:last-child){border-bottom: solid 1px #eeeeee}
.location .city ul li a{display: block; line-height:.40rem; cursor: pointer; padding: 0px .2rem}
.location .city ul li a:hover{color: #fff; background: #d00d0d}
.location .city dl.show dt{border-bottom-left-radius: 0; border-bottom-right-radius: 0}
.location .city dl.show dt:after{transform: rotate(90deg)}

.product_details .details .get{background: #d00d0d;border-radius: 10px; text-align: center; color: #fff; cursor: pointer; margin-top: 1em; margin-bottom: 5%;display: block}
.product_details .details .get span{line-height: .6rem; background: url(../images/icon.svg) no-repeat left; padding-left: 35px;display: inline-block}
.product_details .details .get:hover{background: #e90404}
.product_details .details .other{padding:3% 0; border-top: solid 1px #ebeaeb; border-bottom: solid 1px #ebeaeb}
.product_details .details .other .user{position: relative;padding-left:1rem; line-height: 35px;}
.product_details .details .other .user figure{position: absolute; left: 0; width: .7rem; height:.7rem; border-radius: 100%}
.product_details .details .other .user img{position: absolute; width: 100%; height: 100%;}
.product_details .details .other ul{width:190px; text-align: center}
.product_details .details .other ul li{width:45.46%}
.product_details .details .other ul li img{border-radius:5px; width: 100%}
.product_details .details .other ul li p{padding-top:5px}
@media(min-width:768px){
.product_details .photo .slick-arrow{width: 40px; height: 40px;left: 0; right: 0; margin: auto; transform: rotate(90deg)}
.product_details .photo .slick-prev{top:-10px; box-shadow:-5px 0px 5px 0px rgba(0, 0, 0, 0.1)}
.product_details .photo .slick-next{top:auto; bottom: -10px; box-shadow:5px 0px 5px 0 rgba(0, 0, 0, 0.1)}
.product_details .photo .slick-arrow.slick-disabled:before{filter:grayscale(100%) brightness(100%)}
}
@media(max-width:1024px){
.product_details .photo{width: 100%}
.product_details .details{width: 100%; padding-top: 5%}
.product_details .details .star{padding: 2% 0}
.product_details .details .price{padding: 2%}
/* .product_details .details .city{padding: 3% 0} */
}
@media(max-width:768px){
.product_details .small_pic{width:100%; order: 2}
.product_details .small_pic .item{padding: .05rem}
.product_details .photo .slick-list{width: 80%; margin: auto}
.product_details .big_pic{width:100%}
.product_details .details .other ul{width: 50%}
.product_details .details .other .user{padding-left: .8rem; line-height: 26px}
}

.group_main{padding-top: 6%; padding-bottom: 4%}
.group_tab{border-bottom: solid 1px #ebeaeb}
.group_tab ul{max-width: 390px; margin-bottom: -1px;}
.group_tab ul.en{max-width: 500px}
.group_tab li{cursor: pointer; padding: 6% 0;}
.group_tab li.show{border-bottom: solid 3px #d00d0d;}
.group_box{padding:1% 0}

.pro_carticle{}

.pro_comment dl{padding: 2% 0; border-bottom: solid 1px #ebeaeb}
.pro_comment dt{position: relative;width: .94rem}
.pro_comment dt figure{width: .7rem; height: .7rem; border-radius: 100%}
.pro_comment dt img{position: absolute; width: 100%; height: 100%;}
.pro_comment dd{flex: 1;}
.pro_comment dd time{padding: .1rem 0;display: block}
.pro_comment dd p{ line-height:1.875}

.pro_recommend {padding-bottom: 4%}
.pro_recommend .list{margin-left: -.1rem; margin-right: -.1rem}
.pro_recommend .item{padding: .1rem}
.pro_recommend .item figure{background-color: #f7f7f7;	border-radius: 10px; padding-bottom:107.465%}
.pro_recommend .txt{padding-top: .2rem}
.pro_recommend .txt h4{margin-bottom: .2rem; line-height:.3rem; height: .6rem}





.popUp-box{position: fixed;z-index: 200; left: 0;top: 0;width: 100%; height:100%; background-color: rgba(0,0,0,0.5);display: none;}
.popUp-box .ytable{display: table;width: 100%;}
.popUp-box .ytable-cell { display: table-cell;vertical-align: middle;}
.popUp-box > .ytable{height: 100%;}
.popUp-box .main{background: #fff;width: 90%; max-width: 1000px;margin: 0 auto;border-radius: 5px; position: relative; }
.popUp-box .close{position: absolute; right: 20px;top: 20px;width: 20px;height: 20px;z-index: 10;cursor:pointer;}
.popUp-box .close:before,
.popUp-box .close:after{position: absolute;content: ''; width: 100%;height: 2px;background-color: #000; top: 50%;margin-top: -1px;transform: rotate(-45deg);}
.popUp-box .close:after{transform: rotate(45deg);}

.popUp-box .title{color: #333;margin-bottom: 1em;text-align: center}
.popUp-box .track .goods-list{background: #f8f8f8;padding: 1em 1em 2em;border-radius: 10px;}
.popUp-box .track .list-row{display: flex;justify-content: space-between;}

.popUp-box .track .list-row .list-col{text-align: center;width: 33.333%;line-height: 2.5;padding: 0 10px}
.popUp-box .track .list-row .list-col:nth-child(1){width: 40%;}
.popUp-box .track .list-row .list-col:nth-child(2){width: 35%;}
.popUp-box .track .list-row .list-col:nth-child(3){width: 25%;}
.popUp-box .track .list-row .list-col .text{border: 1px solid #ebebeb;height: 50px;line-height: 48px;background: #fff;padding: 0 10px;color: #333;width: 100%;}
.popUp-box .track .list-row .list-col .m_numberSelect{display: flex;border: 1px solid #ebebeb;}
.popUp-box .track .list-row .list-col .m_numberSelect a{width: 50px;height: 48px;line-height: 48px;}
.popUp-box .track .list-row .list-col .m_numberSelect a.i_minus{background: url(../images/icon-minus.svg)no-repeat center #fff;background-size: 24px auto;}
.popUp-box .track .list-row .list-col .m_numberSelect a.i_add{background: url(../images/icon-add.svg)no-repeat center #fff;background-size: 24px auto;}
.popUp-box .track .list-row .list-col .m_numberSelect .numberInput{width: 100%;height: 48px;line-height: 48px;background: #fff;border: 0;border-left: 1px solid #ebebeb;border-right: 1px solid #ebebeb;flex: 1;text-align: center}

.popUp-box .popUp-form{margin-top: 2em;}
.popUp-box .popUp-form ul{display: flex;justify-content: space-between;flex-wrap: wrap}
.popUp-box .popUp-form li{width: 49%;position: relative;z-index: 1;margin-bottom: 10px;}
.popUp-box .popUp-form li.last{width: 100%;}
.popUp-box .popUp-form li .text {border: solid 1px rgba(139, 139, 139, 0.2);width: 100%;font-size: 1em;height: 3.125em;line-height: 3.125em;border-radius: 0.625em;padding: 0 1.0625em;}
.popUp-box .popUp-form li textarea.text {height: 7em;}
.popUp-box .popUp-form li label.tit {position: absolute;left: 1.21428em;top: 0; font-size: 0.875em;line-height: 3.5714em;}
.popUp-box .popUp-form .btn {width: 13em;background: #d00d0d;border-radius: 5px;font-size: 0.875em;height: 3.5714em;color: #fff;cursor: pointer;border: 0;margin: 0 auto;display: block}

@media (min-width: 1025px) {
    .popUp-box .main {padding: 3.5em;}
    .popUp-box .track .list-row .name{padding-bottom: 15px}
}

@media(max-width:1024px){
    .popUp-box .main {padding:30px;max-height: 95vh;overflow: auto}
    
    .popUp-box .track .list-row{flex-wrap: wrap;}
    .popUp-box .track .list-row .list-col{width: 100%;margin-bottom: 15px;text-align: left}
    .popUp-box .track .list-row .list-col:nth-child(1){width: 100%;}
    .popUp-box .track .list-row .list-col:nth-child(2){width: 100%;}
    .popUp-box .track .list-row .list-col:nth-child(3){width: 100%;}
    
    .popUp-box .popUp-form li{width:100%;}
    .popUp-box .popUp-form .btn{width: 100%}
}




.popUp-boxs{position: fixed;z-index: 200; left: 0;top: 0;width: 100%; height:100%; background-color: rgba(0,0,0,0.5);display: none;}
.popUp-boxs .ytable{display: table;width: 100%;}
.popUp-boxs .ytable-cell { display: table-cell;vertical-align: middle;}
.popUp-boxs > .ytable{height: 100%;}
.popUp-boxs .main{background: #fff;width: 90%; max-width: 1000px;margin: 0 auto;border-radius: 5px; position: relative; }
.popUp-boxs .close{position: absolute; right: 20px;top: 20px;width: 20px;height: 20px;z-index: 10;cursor:pointer;}
.popUp-boxs .close:before,
.popUp-boxs .close:after{position: absolute;content: ''; width: 100%;height: 2px;background-color: #000; top: 50%;margin-top: -1px;transform: rotate(-45deg);}
.popUp-boxs .close:after{transform: rotate(45deg);}
.popUp-boxs .title{color: #333;margin-bottom: 1em;text-align: center}
.popUp-boxs .popUp-form ul{display: flex;justify-content: space-between;flex-wrap: wrap}
.popUp-boxs .popUp-form li{width: 49%;position: relative;z-index: 1;margin-bottom: 10px;}
.popUp-boxs .popUp-form li.last{width: 100%;}
.popUp-boxs .popUp-form li .text {border: solid 1px rgba(139, 139, 139, 0.2);width: 100%;font-size: 1em;height: 3.125em;line-height: 3.125em;border-radius: 0.625em;padding: 0 1.0625em;}
.popUp-boxs .popUp-form li textarea.text {height: 7em;}
.popUp-boxs .popUp-form li label.tit {position: absolute;left: 1.21428em;top: 0; font-size: 0.875em;line-height: 3.5714em;}
.popUp-boxs .popUp-form .btn {width: 13em;background: #d00d0d;border-radius: 5px;font-size: 0.875em;height: 3.5714em;color: #fff;cursor: pointer;border: 0;margin: 0 auto;display: block}

@media (min-width: 1025px) {
.popUp-boxs .main {padding: 3.5em;}
.popUp-boxs .track .list-row .name{padding-bottom: 15px}
}

@media(max-width:1024px){
.popUp-boxs .main {padding:30px;max-height: 95vh;overflow: auto}
.popUp-boxs .popUp-form li{width:100%;}
.popUp-boxs .popUp-form .btn{width: 100%}
}





.loadingbox{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 100;}
.loadingbox .box{ display: flex; align-items: center; justify-content: center; text-align: center; flex-flow: column wrap; color: #fff; width: 100%; height: 100%;}
.loadingbox .box .icon{ background: url(../images/loading.png) no-repeat center; width: 41px; height: 43px; background-size: contain;animation: rotate 2.2s linear infinite; }
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


.layui-layer-btn .layui-layer-btn0{
    background-color: #d00d0d!important; /* 红色背景 */
    border-color: #d00d0d!important;    /* 红色边框 */
    color: #fff;              /* 白色文字 */
}