.boxinfo{ width:100%; float:left; padding:0px; }
.plra30{ padding:0px 30px; }
.plra15{ padding:15px; }
.inmain{width:100%; display:flex; flex-wrap:wrap; justify-content:flex-start; }
.pro-title{ width:100%; display:flex; flex-direction:column; padding:70px 0px; }
.pro-title h1{ font-size:2.8rem; color:#000; text-align:center; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:30px;}
.pro-title h1 i{ position:relative;}
.pro-title h1 i::before{ content:''; position:absolute; left:-44px; top:0; width:60px; height:5px; background-color:#000; }
.pro-title h1 i::after{ content:''; position:absolute; right:-44px; top:0; width:18px; height:5px; background-color:#000; }
.sortbox{ width:100%; display:flex; justify-content:space-between; align-items: flex-start; flex-direction:row; padding-bottom:60px; }
#tone .fone{ width:25%!important; }
.fone{ width:100%; padding: 15px; display: flex; justify-content:flex-start;flex-direction:column; position:relative; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
.oneno{ width:100%; display:flex; }
.oneno img{ max-width:100%; }
.oneinfo{ width:100%; display:flex; flex-direction:column; }
.oneinfo i{ width:100%; display:flex; overflow:hidden; }
.oneinfo i img{ width:100%; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
.oneinfo h1{ font-size:1.62rem; color:#000; padding-top:25px; }
.oneinfo p{ font-size:1.1rem; color:#000; padding:15px 0px; }
.fone:nth-child(odd) { margin-bottom:150px; }
.fone:nth-child(even) { margin-top: 150px;}
.fone:nth-child(odd)::before{ content:''; position:absolute; left:0; top:80px; width:1px; height:100%; background-color:#d6d6d6; }
.fone:nth-child(even)::before{ content:''; position:absolute; left:0; top:-70px; width:1px; height:100%; background-color:#d6d6d6; }
.fone:first-child::before{ display:none; }
.fone:hover .oneinfo img{ -webkit-transform: scale(1.05); -moz-transform: scale(1.05); transform: scale(1.05); }


/* 产品 */
.sortnav{ width:100%; height:auto; position:relative; z-index:9; margin-top: 50px;}
.sortmain{ width:100%; padding:10px 0px; display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start; gap:0px 10px; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed;}
.sone{ position:relative; display:flex; justify-content:center; align-items:center; flex-direction:column;-webkit-transition:0.6s;-moz-transition:0.6s;transition:0.6s;}
.simg{ width:100%; display:flex; justify-content:center; align-items:center; background-color:#e9e9e9; border-radius:10px; overflow:hidden;}
.simg img{ max-width:100%; }
.sone p{ font-size:1rem; line-height:1.5; padding:10px 5px; position:relative; width:100%; display:flex; justify-content:space-between; align-items:center; }
.sone p span{ font-weight:600; font-size: 0.98rem; }
.sone a{ color:#797979; display:flex; flex-direction:row; justify-content:space-between; align-items:center; }
.sone a:hover { color: #000; }
.layui-menu{ width:210px; position:absolute; left:0; top:105%; opacity:0; visibility: hidden; -webkit-transition:0.1s;-moz-transition:0.1s;transition:0.1s; border: 1px solid #cfcfcf; background-color:#FFF; }
.sone:hover{ z-index:3; }
.sone:hover .layui-menu{ opacity:1; top:99%; visibility:visible; }
.sone .layui-menu .layui-menu-item-checked, .layui-menu .layui-menu-item-checked2{ color:#000; }
 :root {--color-primary: #1890ff; --color-hover: #40a9ff; --color-active:#000; } .layui-menu-body-title a, .layui-menu-body-title {color:#797979; line-height: 1.5; font-size: 0.95rem; transition: color 0.3s; } .layui-menu-body-title:hover, .layui-menu-body-title a:hover {color: #000; } .sone.active > p span {color: #000; } .layui-menu > .active > .layui-menu-body-title > a {color: #000 !important; } .layui-panel li.active .layui-menu-body-title a {color: #000 !important; } .layui-menu-body-panel a {color:#797979 !important; } .layui-menu-body-panel li.active a {color: #000 !important; } .layui-menu-body-panel { margin-left:5px;} .layui-menu li, .layui-menu-body-title, .layui-menu-body-title a { padding:5px 15px; } .layui-panel {border: 1px solid #cfcfcf;} .sone.active{z-index: 2;} .sone.active .simg { background-color:#000; } .layui-menu .layui-menu-item-checked:after {border-right:0;}
#scolor{ fill:#797979; }
.sone svg{ width:15px; height:15px; margin-right:10px; }
.sone.active > p #scolor{ fill:#000 !important; transition: fill 0.3s ease;}

.probox{ width:100%; float:left; padding-bottom:90px; }
.prone{ width:100%; float:left;}
.cpbox{ width:100%; display: flex; flex-direction: column; -webkit-transition:all 0.6s;-moz-transition:all 0.6s;transition:all 0.6s;}
.cpimg{ width:100%; display:flex; overflow:hidden; border-bottom: 2px solid #bababa;}
.cpimg a{ width:100%; display:flex; }
.cpimg img{ width:100%; -webkit-transition:all 0.6s;-moz-transition:all 0.6s;transition:all 0.6s;}
.cpname{ width:100%; display:flex; flex-direction:column; padding:15px 0px; }
.cpname h1{ font-weight:normal;font-size:0.875rem;color:#595959;line-height: 1.5; padding:5px 0px;}
.cpname p{ font-size:1rem;color:#595959;line-height: 1.5;}
.colorbox{ width:100%; display:flex; justify-content:flex-start; align-items:center; flex-direction:row; gap:5px; }
.color-block { display: inline-block; width:35px!important; height:35px!important; cursor: pointer; border:2px solid #bababa; border-radius: 360px;}
.color-block.on { border: 2px solid #000;}
.cpbox button{ width:100%; height:50px; display:flex; justify-content:center; align-items: center; flex-direction:row; border:0; background-color: #000000; text-align: center; color: #FFF; font-size:1rem; margin-top:30px; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;}
.cpbox button a{ color:#FFF; }
.cpbox:hover .cpimg img{ -webkit-transform: scale(1.05); -moz-transform: scale(1.05); transform: scale(1.05); }
.cpbox:hover button{ background-color:#818181; }

/* 查找 */
.prosearch { position: relative;width:400px; margin-left: auto; float:right; margin:45px 0px;}
.prosearch form { position: relative; display: flex;align-items: center; }
.prosearch input[type="text"] {width: 100%;height: auto; color:#333333; padding: 15px 40px 15px 15px;font-size:0.85rem;transition: all 0.3s; background-color: #f3f3f3; border:0;}
.prosearch input[type="text"]:focus {border-color: #000;box-shadow: 0 0 8px rgba(0,0,0,.25);outline: none;}
.prosearch i {position: absolute;right: 15px;top: 50%;transform: translateY(-50%);cursor: pointer;}
.prosearch img {width:30px;height:30px;}
button{ background-color:#FFF;border:0; outline:none; }

/* 内页 */
.proinfobox{ width:100%;display:flex; flex-direction:column;}
.proinfo-a{ width:100%;display: flex; padding:20px 0px;}
.pfa-l{ width:45%; float: left; display:flex; flex-direction:column-reverse; align-items:flex-start; gap:15px; }
.pfa-l .swiper-slide img{ width:100%;}
.swipera{ width:100%; position: relative; overflow: hidden; border: 1px solid #eeeeee;}
.swipera .zoom-hand{ position: absolute; right:15px; bottom:15px; z-index: 1;}
.swiperb{ width:100%; height:auto; position: relative; overflow: hidden;}
.swiperb .swiper-slide{ border:2px solid #e4e4e4; }
.swiperb .img-thumbnail{ border:0!important; }
.swiperb .swiper-wrapper{ }
.swiperb .swiper-wrapper .swiper-slide{ display: flex; justify-content: center; align-items: center; cursor: pointer;}
.swiperb .swiper-wrapper .swiper-slide img{ width:auto; height:85px!important; }
.swiperb .swiper-slide-thumb-active { border:2px solid #000!important;}
#prev{ position: absolute; left:0px; top:45%; transform: translateY(-50%); background: url(../../uploads/svg-loaders/back-big-left.svg) center center no-repeat; background-size:100%; width:50px; height:50px; z-index: 99; }
#next{ position: absolute; right: 0; top:45%; transform: translateY(-50%); background: url(../../uploads/svg-loaders/back-big-right.svg) center center no-repeat; background-size:100%;width:50px; height:50px; z-index: 99; }

.pfa-r{ width:55%; height:auto; float: left; padding:0px 8%; display:flex; flex-direction:column; align-items:flex-start; }
.top-one{ width:100%; display:flex; flex-direction:row; justify-content: space-between;  padding:10px 0px; position:relative;border-bottom:1px solid #d2d2d2;}
.top-one-l{ display:flex;flex-direction:column; padding-bottom:10px; }
.top-one-l p{ font-size:1.125rem; color:#bababa; }
.top-one-l h1{ font-size:1.875rem; font-weight:normal; line-height:1.8; color:#2a2a2a; }
.top-one-r{ display:flex; }
.top-one-r a{ width:30px; display: flex; justify-content: center; align-items: center; flex-shrink: 0;}
.top-one-r a img{ width:100%;}
.top-two{ width:100%; min-height:100px; display:flex; flex-direction:column; color:#717171; line-height:1.6; font-size:1rem; padding:25px 0px; border-bottom:1px solid #d2d2d2;}
.top-two p{ font-size:1.05rem; color:#717171; line-height:1.6; }
.top-th{ width:100%; min-height:150px; display:flex; flex-direction:row; color:#717171; line-height:1.6; font-size:1rem; padding:25px 0px; border-bottom:1px solid #d2d2d2; gap:10px;}
.top-th i{ width:36px; height:36px; border-radius:360px; cursor: pointer;}
.top-th i:hover{ border:2px solid #000; }
.top-four{ width:100%; display:flex; flex-direction:column; }
.top-four-title{ width:100%; display:flex; flex-direction:column; padding:10px 0px; gap:5px; }
.top-four-title h1{ font-size:1.3rem; line-height:1.5; color:#000; }
.top-four-title p{ font-size:1rem; line-height:1.5; color:#353535; }
.top-four-contact{ width:100%; display:flex; flex-direction:column; gap:10px; } 
.top-four-contact p{ width:390px; font-size:1rem; color:#353535; display:flex; flex-direction:row; justify-content:flex-start; align-items:center; background-color:#e8e8e8; padding:10px 15px;}

/* 弹出层样式 */
.swiper-modal { position: fixed;top: 0;left: 0;width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 9999;display: none;}
.close-btn {position: absolute;top: 20px;right: 20px;color: #fff;font-size: 3rem; cursor: pointer;z-index: 10000;}
.swiper-modal .swiper {width: 80%;height: 80%;margin: 5% auto;}

/*更多*/
.morebox{ width:100%; display:flex; flex-direction:column; padding:90px 0px 0px;}
.more-title{ width:100%; min-height:160px; display:flex; justify-content:center; align-items:center; background-color:#e8e8e8; }
.more-title h1{ font-size:1.875rem; line-height:1.5; font-weight:normal; color:#595959; padding:15px; }
.more-cpbox{ width:100%; padding:25px 15px 70px; position:relative; }
.proone-swiper-button-prev { position:absolute; left:-70px; top:calc(50% - 5px); transform: translateY(-50%); background: url(../../uploads/svg-loaders/rl.png) center center no-repeat; border-radius: 360px; cursor:pointer; background-size:90%; width:45px; height:45px; z-index: 99; transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s;}
.proone-swiper-button-prev:hover { width:45px; height:45px; background: url(../../uploads/svg-loaders/rlh.png) center center no-repeat; background-size:90%; transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s;}
.proone-swiper-button-next { position:absolute; cursor:pointer; right:-70px; top:calc(50% - 5px); transform: translateY(-50%); background: url(../../uploads/svg-loaders/rr.png) center center no-repeat;  border-radius: 360px; background-size:90%; width:45px; height:45px; z-index: 99; transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s;}
.proone-swiper-button-next:hover {width:45px; height:45px; background: url(../../uploads/svg-loaders/rrh.png) center center no-repeat; background-size:90%; transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s;}

/*空*/
.searchbox{ width:100%;display:flex; flex-direction:column; padding:30px 0px 100px; }
.words{width:100%;display: flex; justify-content:flex-start; align-items: center; flex-direction: row; padding:30px 0px 0px;}
.words h1{ font-size:1.6rem; line-height:1.5; font-weight:600; }
.words p{font-size:1rem; line-height:1.5; font-weight:600; }
.empty-product { text-align: center; padding: 50px 20px; background:#f8f9fa; border-radius: 8px; margin: 30px 0;}
.empty-product img { width: 90px;opacity: 0.8;}
.empty-product p {font-size:1rem;color: #6c757d;}
.btn-back { font-size:1rem; margin-top: 20px; padding: 8px 25px; border-radius: 20px; background: #333; color: white !important; transition: all 0.3s;}
.btn-back:hover { background: #000; transform: translateY(-2px);}

.s-words{width:100%;display: flex; justify-content:flex-start; align-items: center; flex-direction: row;}
.s-wwd{ display:flex; flex-direction:row; justify-content:flex-start; align-items:center; padding-right:15px; }
.s-words .s-wwd h1{ font-size:1.6rem; line-height:1.5; font-weight:600; }
.s-words .s-wwd p{font-size:1rem; line-height:1.5; font-weight:600; }
.s-words .prosearch{ padding:0; }

/*分页*/
.pagination-box { width:100%; display:flex; justify-content:center; align-items:center; padding:60px 0px 10px;}
.pagination { width:100%; display:flex; justify-content:center; align-items:center; }
.pagination li { margin: 0 5px; display:flex; justify-content:center; align-items:center;}
.pagination li a, 
.pagination li span {display:block;border-radius:4px;cursor: pointer; color:#000!important;  padding: 0px 15px; height: 32px; display: flex; justify-content: center; align-items: center;}
.pagination li a.cw{width:32px;height:32px;display:flex;justify-content:center;align-items:center; border-radius: 360px; border: 1px solid #949494;}
.pagination li.active a.cw {background: #333333!important;color:#FFF!important;}
.pagination li.disabled a {color: #000!important; cursor: not-allowed;}
.pagination li.disabled a:hover {color: #000!important;}
.pagination li a:hover:not(.disabled) {opacity: 0.7}
.pagination li a.cw:hover:not(.disabled) {background: #333;color:#FFF!important;}
#pr a{ width:80px; height:40px; font-size: 0.95rem; margin-right:80px; background: #fbfbfb; border-radius:20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);}
#ne a{ width:80px; height:40px; font-size: 0.95rem; margin-left:80px; background: #fbfbfb; border-radius:20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);}


@media (max-width: 1430px) {

}

@media (max-width: 1230px) {
.pro-title{ padding:50px 0px; }
.oneno img{ width:80px; }
.oneinfo h1{ font-size:1.3rem; padding-top:15px; }
.oneinfo p{ font-size:0.9rem;}
.fone:nth-child(odd) { margin-bottom:80px; }
.fone:nth-child(even) { margin-top:80px;}
.fone:nth-child(odd)::before{ top:60px;}
.fone:nth-child(even)::before{ top:-15px; }
.sortbox{ padding-bottom:40px; }
.sone p span{ font-size:0.85rem; }
.pfa-r{ padding:0px 5%; }
.swiperb .swiper-wrapper .swiper-slide img{ height:70px!important; }
}
/*ipad*/
@media (min-width: 768px) and (max-width: 991px) {
#tone{ flex-wrap:wrap; }
#tone .fone{ width:50%!important; }
.sortbox{ padding-bottom:0px; }
.pfa-r{ padding:0px 30px; }
.swiperb .swiper-wrapper .swiper-slide img{ height:60px!important; }
}
/* xs */
@media (max-width: 767px) {
.xplra10{ padding:0px 10px; }
.plra0{ padding:0; }
.plrx0{ padding:0 5px; }
.plrax5{ padding:5px; }

.pro-title{ padding:35px 0px; }
.pro-title h1{ font-size:1.5rem; gap:25px;}
.pro-title h1 i::before{ left:-30px; width:40px;}
.pro-title h1 i::after{ right:-30px; width:10px;}
.sortbox{ flex-direction:column; padding-bottom:50px; }
#tone .fone{ width:100%!important; }
.fone{ padding:10px; width:100%; }
.oneno img{ width:50px; }
.oneinfo h1{ font-size:1.2rem; padding-top:20px; }
.oneinfo p{ font-size:0.95rem; padding:10px 0px; }
.fone:nth-child(odd) { margin-bottom:0px; }
.fone:nth-child(even) { margin-top:0px;}
.fone:nth-child(odd)::before{ display:none; }
.fone:nth-child(even)::before{ display:none; }


/* 产品 */
.boxinfo.inpro{ display:flex; flex-direction:row; justify-content:space-between; }
.boxinfo.inpro .sortnav{ width:115px; background-color:#f3f3f3; margin-top: 0;}
.sortmain{ width:100%; padding:10px 0px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:0px 10px; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed;}
.sone{ position:relative; display:flex; justify-content:center; align-items:center; flex-direction:column;-webkit-transition:0.6s;-moz-transition:0.6s;transition:0.6s;}
.simg{ width:100%; display:flex; justify-content:center; align-items:center; background-color:#e9e9e9; border-radius:10px; overflow:hidden;}
.simg img{ max-width:100%; }
.sone svg{ flex-shrink:0; width:10px; height:10px; margin-right:5px; }
.sone p{ font-size:0.85rem; flex-direction:row; }
.sone p span{ font-weight:600; font-size: 0.85rem; }
.sone a{ display:flex; flex-direction:row; justify-content:center; align-items:center; }
.layui-menu{ width:210px; position:absolute; left:0; top:105%; opacity:0; visibility: hidden; -webkit-transition:0.1s;-moz-transition:0.1s;transition:0.1s; border: 1px solid #cfcfcf; background-color:#FFF; }
.sone:hover{ z-index:3; }
.sone:hover .layui-menu{ opacity:1; top:99%; visibility:visible; }
.layui-menu{ width:140px;left:0; top:0px; padding:10px 0px; }
.layui-menu-body-panel{width:140px;}
.sone:hover .layui-menu{ opacity:1; left: 100%;  top:0%; visibility:visible; }
.sone .layui-menu li {line-height:1.2; font-size:0.9rem; white-space:wrap; }
.layui-icon {font-size:1rem;}
.probox{ width:calc(100% - 115px); padding:0px 5px 50px; }
.cpimg{ border-bottom: 1px solid #bababa;}
.cpname{ padding:5px 0px; }
.cpname h1{ font-size:0.8rem; padding:5px 0px;}
.cpname p{ font-size:0.9rem;}
.colorbox{ padding-top:8px; }
.color-block { width:22px!important; height:22px!important;}
.cpbox button{height:30px; font-size:0.8rem; margin-top:10px; }

/*分页*/
.pagination-box {padding:35px 0px;}
.pagination li { margin: 0 2px; }
.pagination li a, 
.pagination li span { padding:0px 10px; height:27px; }
.pagination li a.cw{ width:27px;height:27px;}
#pr a{ width:50px; height:30px; font-size: 0.7rem; margin-right:2px; }
#ne a{ width:50px; height:30px; font-size: 0.7rem; margin-left:2px; }

/* 查找 */
.prosearch {width:100%; margin:20px 0px; padding: 10px;}

/* 内页 */
.proinfobox{ padding:0px 10px;}
.pfa-l{ width:100%; gap:10px; }
.swiperb .swiper-wrapper .swiper-slide img{ height:55px!important; }
#prev{ width:40px; height:40px; }
#next{ width:40px; height:40px; }
.pfa-r{ width:100%; padding:0px; }
.top-one{ padding:25px 0px 0px; }
.top-two{ min-height:60px; padding:20px 0px;}
.top-two p{ line-height:1.9; }
.top-th{ min-height:100px;}
.top-th i{ width:30px; height:30px; }
.top-four-title{ padding:20px 0px; gap:5px; }
.top-four-contact p{ width:100%;}

/*更多*/
.morebox{ padding:50px 0px 0px;}
.more-title{ min-height:100px; }
.more-title h1{ font-size:1.5rem; }
.more-cpbox{ padding:15px 0px 50px; }
.proone-swiper-button-prev { left:0px; width:35px; height:35px;}
.proone-swiper-button-prev:hover { width:35px; height:35px;}
.proone-swiper-button-next { right:0px; width:35px; height:35px;}
.proone-swiper-button-next:hover {width:35px; height:35px;}

/*空*/
.searchbox{ padding:20px 10px 50px; }
.words{ padding:20px 0px 0px;}
.words h1{ font-size:1.4rem; }
.words p{font-size:1.2rem; }
.empty-product {  margin:0px 0;}
.s-words{ align-items:flex-start; flex-direction:column; padding:20px 0px 0px;}
.s-wwd{  padding-right:0; }
.s-words .s-wwd h1{ font-size:1.4rem; }
.s-words .prosearch{ padding:10px 0px; }


}

@media (max-width: 480px) {
  .infol .swiper-slide img{ max-width:480px; }
}