﻿.bannerwrap{position: relative;/* left:0; *//* right:0; *//* top:100px; */}
#banner{position:relative;width:100%;height:350px;overflow:hidden}
#bannerlist{position:absolute;width:2520px;height:350px;text-align:center}
#bannerlist a{display:inline-block;float:left;text-align:center;line-height:350px;max-width:100%;height:350px}
#bannerlist img{width:100%;height:100%;object-fit:cover;object-position: right bottom;}
#bannerbtn{position:absolute;bottom:20px;z-index:2;height:10px;width:100%;text-align:center}
#bannerbtn span{display:inline-block;margin-right:5px;width:14px;height:14px;border-radius:50%;background:#ddd;cursor:pointer;opacity:.5}
#bannerbtn .on{background:#007aff;opacity:1}
.arrow{position:absolute;top:50%;z-index:2;display:none;width:40px;height:40px;font-size:24px;line-height:39px;text-align:center;color:#fff;background:rgb(0 0 0/50%);cursor:pointer;border-radius:6px;opacity:.5}
.arrow:hover{opacity:1;text-decoration:none}
#banner:hover .arrow{display:block}
#prev{left:20px}
#next{right:20px}
.topwarp{display:flex;align-items:center;justify-content:center;height:350px;padding:0 20px;position: absolute;top: 0;background: #0000006b;width: 100%;}
.top-left{position:relative;}
.topwarp p{color:#fff;}
.tit{color:#fff;margin-bottom:60px;}
.tit div{font-weight:bold;color:#fff;font-size:40px;margin-bottom:10px;text-align:left;}
.tit p{color:#fff;font-size:14px;}
.topitem{display:flex;align-items:center;justify-content:center;}
.numitem02{margin-left: 0;}
.num{font-weight:bolder;font-size:28px;margin-bottom:10px;display:flex;align-items: center;min-width: 230px;}
.numitem02 .num{min-width:auto;}
.num span{font-weight:bold;font-size:28px;color:#fff;flex-shrink:0;}
.num sup{color:#fff;font-size:12px;}
.itxt{display:flex;align-items:center;}
.itxt img{width:50px;height:50px;}
.hometop p i.boldtxt{font-weight:bold;font-size: 32px;}
.nodata-box{text-align:center;}
.warp-content{display:flex;background:#fff;margin:20px auto;padding:20px;position:relative;align-items: flex-start;}
.left-content{width: 16%;margin-right:1%;background: #fff;position:sticky;top:0;}
.list-content{width: 83%;}
.productlist{display:flex;flex-wrap:wrap}
.productlist li{width: 24.25%;background:#fff;margin-bottom:20px;margin-right:1%;position:relative;border:1px solid #ececec;border-radius: 8px;overflow: hidden;}
.productlist li:nth-child(4n){margin-right:0}
.productlist li:hover{box-shadow:0 8px 17px 0 rgb(0 0 0/15%)}
.imgbox{width:100%;height:600px;margin:0 auto;border-bottom:1px solid #ececec;display:flex;align-items:center;justify-content:center}
.imgbox img{max-width: 100%;max-height: 100%;}
.text-box{padding:20px 14px;position:relative;font-size:14px;}
.text-box p{margin-bottom:10px;line-height:20px;}
.text-box p:last-child{margin-bottom:0;}
.pname{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:700;height:36px;position:relative;}
.pname a:hover{color:#3083c6;text-decoration:underline}
.texttop{justify-content: space-between;display:flex;align-items:flex-start;width: 100%;margin:10px 0;}
.btn-addalbum{flex-shrink:0;margin-left:auto;cursor:pointer;}
.btn-addalbum img{width:24px;height:24px;}
.price{font-size:16px;color:#000;margin-right:10px;font-weight:700}
.price i,.price em{font-style:normal;font-weight:normal;}
.price2{font-size:16px;color:#000;margin-right:10px;font-weight:700}
.price2 i,.price2 em{font-style:normal;font-weight:normal;}
.ptxt{display:flex;align-items:center;flex-wrap:wrap;}
.ptxt span{margin-right:10px;flex-shrink: 0;min-width:70px;}
.ptxt em{width: 80%;display: flex;flex-wrap: wrap;}
.ptxt em i{margin-right:10px;line-height: 24px;}
.ptxt i:after{content:",";}
.ptxt i:last-child:after{content:"";}
.pagination{text-align:center}
.pagination li{display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;margin-right:10px;background:#fff;border:1px solid #ededed;color:#585858;cursor:pointer;}
.pagination li:first-child,.pagination li:last-child{width:50px}
.pagination li.active{background:#1b75bc;padding:0}
.pagination li.active span,.pagination li.active a{color:#fff}
.ptitle{height:50px;line-height:50px;padding:0 10px;font-size:14px;color:#333;font-weight:700;text-align:center;border: 1px solid #ddd;}
.tree{margin-bottom:40px;text-align:left;border: 1px solid #ddd;border-top: 0;background: #f1f1f1;max-height: 820px; overflow-y: scroll;}
.tree::-webkit-scrollbar{width:2px}
.tree::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.2);opacity:.2;background:fade(@primary-color,60%)}
.tree::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.2);border-radius:0;background:fade(@primary-color,30%)}
.tree>li{cursor:pointer;}
.tree>li>p{border-bottom: 1px solid #f1f1f1;padding: 0 20px;display:block;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;line-height:50px;font-size:14px;background: #fff;}
.tree>li>p img{display:none;}
.tree>li:last-child p{border-bottom:0}
.tree>li a:hover{color:#3083c6;text-decoration: underline;}
.tree>li span{display:inline-block;width:50px;height:50px;position:relative;vertical-align:middle;text-align:center;float:right}
.tree>li span:after{content:"";position:absolute;top:40%;left:40%;width:6px;height:6px;border-left:1px solid #bbb;border-bottom:1px solid #bbb;transform:rotate(-45deg)}
.tree>li a:hover span:after{border-color:#225c8b}
.tree .hide{display:none}
.tree .show{display:block}
.tree .hide{display:none}
.tree li ul li{border:0;line-height:36px;padding: 0 20px;border-bottom: 1px dashed #eee;}
.tree li ul li:hover{color:#fff}

.tree li ul li a{font-size:13px;display: flex;align-items: center;}
.tree li ul li a label{margin-left: 10px;cursor: pointer;}
.tree li ul li a input{cursor: pointer;}
.tree li ul li a.act{background:#efefef}
.tree>li>p.showmore{color: #3083c6;border: 0;background: transparent;font-weight:normal;font-size:12px;position:relative;display:inline-block;padding-right:20px;}
.tree>li>p.showmore:after{content:"";position:absolute;top:40%;right:6px;width:6px;height:6px;border-left:1px solid #3083c6;border-bottom:1px solid #3083c6;transform:rotate(-45deg);}
.tree>li>p.showmore.hide{display:none;}
.tree>li>p.showmore.show{display:inline-block;}
.tree>li>p.showless{color: #3083c6;border: 0;background: transparent;font-weight:normal;font-size:12px;position:relative;display:inline-block;padding-right:20px;}
.tree>li>p.showless:after{content:"";position:absolute;top:45%;right:6px;width:6px;height:6px;border-left:1px solid #3083c6;border-bottom:1px solid #3083c6;transform:rotate(135deg);}
.tree>li>p.showless.hide{display:none;}
.tree>li>p.showless.show{display:inline-block;}
.selectpricebox{display: flex;align-items: center;font-size: 14px;padding: 20px;}
.selectpricebox p{margin: 0 10px;padding-top: 20px;}
.selectpricebox>p{display:none;}
.selectpricebox .priceitem:first-child{margin-right:10px;}
.priceitem input{width:100%;height:30px;margin-top:10px;outline:0;padding:0 10px; border: 1px solid #ddd;border-radius: 4px;}
.probox{padding-bottom: 20px;border-bottom: 1px dashed #eee;}
.probox .btn{margin: 0 auto;width: 50%;display: block;}
input[type="checkbox"],label{cursor:pointer;}
.brandlist{width:100%;position:relative;padding:0 40px;background:#fff;margin-bottom:20px;padding:20px 50px;}
.brandtit { font-size: 18px;font-weight: bold; margin-bottom: 20px;text-align:center;}
.brandlist a{height:110px;flex-wrap:wrap;margin-top:0!important;width:16.6%;}
.brandimg{height:80px;width:100%;display:flex;align-items:center;justify-content:center;}
.brandlist a p{text-align:center;font-size:12px;display:block;}
.brandlist a:hover p{text-decoration:underline;color:#3083c6;}
.brandlist a img{max-width:100%;max-height:100%;}
.swiper{width:100%;height:220px;margin-left:auto;margin-right:auto;}
.swiper-slide{text-align:center;font-size:18px;background:#fff;height:calc((100% - 30px) / 2);display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;}
.brandlist .swiper-button-prev,.brandlist .swiper-button-next{background: #fff;box-shadow: 0px 5px 10px 1px rgb(0 0 0/15%);width: 40px;height: 40px;border-radius: 50%;}
.brandlist .swiper-button-prev::after,.brandlist .swiper-button-next::after{content:'';position:absolute;right: 16px;top: 14px;width: 14px;height: 14px;border-right: 1px solid #999;border-bottom: 1px solid #999;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);}
.brandlist .swiper-button-prev::after{transform:rotate(135deg);-webkit-transform:rotate(135deg);right: 10px;}
.servicetitle{line-height:40px;border-bottom:1px solid #eee;margin-bottom:20px;font-size:16px;font-weight:bold;text-align:center;}
.serviceitem{margin-bottom:20px;}
.servicetop{display:flex;align-items:center;margin-bottom:20px;}
.servicetop span{width:80px;height:80px;border:1px solid #eee;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-right:20px;}
.servicetop span img{width:96%;height:96%;}
.servicetop em{font-size:14px;font-weight:bold}
.container{position:relative;}
header .container{position:unset;}
.brandwarp{position:relative;box-shadow: 0px 5px 10px 1px rgb(0 0 0/15%);margin-bottom:40px;}
.showBrandbtn{position:absolute;right:20px;top:-25px;background: center center #4A54FF;
    background-image: linear-gradient(315deg,#6772FF 0,#00F9E5 100%);
    background-size: 104% 104%;width:40px;height:40px;border-radius:50%;display:block;z-index:99;cursor:pointer;transition: transform .3s ease-out;
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: All .4s ease-in-out;
    -webkit-transition: All .4s ease-in-out;
    -moz-transition: All .4s ease-in-out;
    -o-transition: All .4s ease-in-out;}
.showBrandbtn::before,.showBrandbtn::after{content:'';width: 24px;height:1px;display:block;background-color:#fff;position:absolute;right: 8px;top: 20px;transform:rotate(45deg);-webkit-transform:rotate(45deg);}
.showBrandbtn::after{background: #fff;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);}
.showBrandbtn.act{transform:rotate(45deg)}
.pagination li span{cursor:pointer;}
.fileritem{display:flex;align-items:center;margin-bottom:20px;font-size:14px;position:relative;top:0;background:#fff;z-index:999;}
.fitem{margin-right:40px;line-height:40px;display:flex;align-items:center;margin-bottom:0;}
.fitem input{margin-right:10px;}
.fitem:last-child{margin-right:0;}
.ftit {font-weight: bold;}
.ftit img{height:24px;margin-right:10px;}
.btn{color:#fff;font-size:14px;line-height:32px;background:#3081c4;text-align:center;font-weight:700;cursor:pointer;display:inline-block;padding:0 26px;border-radius: 4px;;border:0;outline:0;margin-right:20px;}
.oprice{text-decoration:line-through;margin:0 10px;font-weight:normal;}
.savetext { color: #4C7C01;font-weight:normal;}
.text-box p.save{font-size:12px;}
@media screen and (max-height:1366px){
    .tree>li>p{ padding: 0 10px;}
    .ptxt span{min-width:auto;}
}
@media screen and (max-height:900px){
    .tree{max-height: 720px;}
}
@media screen and (max-height:768px){
    .tree{max-height: 620px;}
}