* {margin: 0;padding: 0;}
*:focus {outline: none;}
html,body{margin: 0; padding: 0; }
body{background: #ffffff;}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
    display: none;
}
.homeSection{padding: 0.4rem 0.386rem 0;}
.homeBanner{width: 100%; height: 2.96rem; margin-bottom: 0.64rem; }
.homeBanner .swiper-slide{border-radius:0.133rem; overflow: hidden;}
.homeBanner .swiper-slide img{width: 100%; height: 100%; object-fit: cover;}

.quickLinks{height:4.266rem; margin-bottom: 0.16rem;}
.quickLinks .swiper-slide{display: flex;  flex-wrap: wrap;align-content: flex-start;}
.quickLinks .swiper-slide{height: 1.546rem;;}
.quickLinks .swiper-slide .quickLink{width: 1.84rem; height: 1.546rem; margin-bottom: 0.466rem; text-align: center;}
.quickIcon{width: 0.666rem; height: 0.666rem; margin: auto; font-size: 0;}
.quickIcon>img{width: 100%; height: 100%;}
.quickLink p{font-size: 0.346rem; color: #444444; line-height: 0.653rem; margin-top: 0.226rem;}
.quickLinks>.swiper-pagination-bullets{height:0.213rem; bottom: 0.266rem; font-size: 0}
.quickLinks>.swiper-pagination-bullets .swiper-pagination-bullet{width: 0.186rem; height: 0.186rem; border-radius: 0.093rem; background: #f1f1f1; opacity: 1;}
.quickLinks>.swiper-pagination-bullets .swiper-pagination-bullet-active{background: #2f93f5;}

.cardList{padding-top: 0.613rem; min-height: calc(100vh - 1.77rem);}
.cardItem{width: 100%; height: auto; position: relative; box-sizing: border-box; padding: 0.533rem 0.266rem 0.573rem; background: #fff;box-shadow: 0.026rem 0.026rem 0.16rem rgba(84,84,84,0.18);border-radius: 0.133rem; margin-bottom: 0.613rem;}
.cardItem .cardTitle{font-size: 0.373rem; margin-bottom:0.24rem; line-height:0.6rem;}
.cardItem .cardTitle .tags{display: inline-block; font-size: 0; height:0.557rem;}
.cardItem .cardTitle .tag{font-size:0.293rem; line-height: 0.4rem; color: #1c7fe1; padding: 0.053rem 0.133rem; border: 0.026rem solid #1c7fe1; display: inline-block; border-radius: 0.053rem;}
.cardItem .cardTitle .tag+.tag{ margin-left: 0.133rem;}
.cardContent{display: flex;}
.contentLeft{font-size: 0; width: 3.56rem; }
.contentLeft img{width: 3.56rem; height: auto; border-radius: 0.2rem;}
.contentRight{padding-left: 0.533rem; flex-grow: 1;}
.contentRight ul{padding-left: 0.44rem;}
.contentRight ul li{font-size: 0.293rem; line-height: 0.506rem; color: #888888;}
.contentRight .buttonLine{height: 0.706rem; text-align: right; font-size: 0; margin-top: 0.133rem;}

.getBtn{width: 2.426rem; height: 0.706rem; background: #2f93f5; border: 0; color: #fff; font-size: 0.32rem; border-top-left-radius:0.133rem;border-bottom-left-radius: 0.133rem; margin-right: -0.266rem;}
.cardItem .tip{height: 0.506rem; line-height: 0.506rem; font-size: 0.268rem; position: absolute; right: 0; top: -0.16rem; padding:0 0.32rem; background: linear-gradient(#eb6741, #e23926); color: #fff; border-top-right-radius: 0.133rem; border-bottom-left-radius: 0.133rem; }
.cardItem .tip:before{content: ""; position: absolute; width: 0.133rem; height: 0.16rem; background: url(../images/tipBefore.png) no-repeat; background-size: 100%; left: -0.133rem; top: 0;}

.filterWarp{z-index: 300;}
.filterWarp .filters{width: 100%; box-sizing: border-box; background: #fff; height: 1.186rem; border-radius: 0.133rem; box-shadow: 0.026rem 0.026rem 0.16rem rgba(84,84,84,0.18);  z-index: 2000; position: relative;}
.filterWarp .filters{display: flex;}
.filters .filter{line-height: 1.186rem; flex-grow: 1; padding-right: 0.533rem; text-align: center; font-size: 0.346rem; color: #333333;position: relative;}
.filters .filter:after{content: ""; width: 0.266rem; height: 0.173rem; position: absolute;background: url(../images/dropIcon.png) no-repeat; background-size: 100% auto; right: 0.4rem; top: 50%; margin-top: -0.093rem; transition:background-position 0.3s;}
.filters .filter.active{color: #d72d3b;}
.filters .filter.active:after{background: url(../images/dropIcon.png) no-repeat; background-size: 100% auto; background-position: bottom;transition:background-position 0.3s;}
.filters >div+div:before{content: ""; width: 0.026rem; height: 0.386rem; position: absolute; left: 0; top: 0.4rem; background: #dcdcdc;}
.filters .searchBtn{background: url(../images/searchIcon.png) no-repeat; background-size: 0.44rem 0.44rem; background-position:0.24rem center;}
.filters .searchBtn{width: 1.066rem; position: relative;}
.filterWarp.ontop .filters{left: 0 !important; right: 0 !important; width: auto !important; border-radius:0 ; margin: 0 -0.386rem; }
.filterWarp.ontop .searchBtn{/* display: none; */}
.filterWarp .cardTypes{box-sizing: border-box; background: #fff; margin: 0 -0.386rem; position: relative; display: flex; justify-content: space-between;  padding: 0.186rem; flex-wrap: wrap; z-index: 1999;}
.filterWarp .cardTypes .buttonCheck{width:calc(50% - 0.426rem); box-sizing: border-box; margin: 0.133rem 0.213rem; font-size: 0.346rem; height: 0.8rem; line-height: 0.8rem; text-align: center; color: #333; background: #f2f2f2; border-radius: 0.133rem;} 
.filterWarp .cardTypes .buttonCheck.checked{ background: url(../images/buttonChecked.png) no-repeat #fff7f8; background-size: 0.52rem 0.506rem; background-position: bottom right; border:0.026rem solid #d72d3b;}
.fullRow{ margin-right: 50% !important;}

.cardTypes{display: none !important;}
.cardTypes.active{display: flex !important;}


.cardGrades{box-sizing: border-box; background: #fff; margin: 0 -0.386rem; position: relative; padding:0 0.4rem; z-index: 1999; display: none;}
.cardGrades.active{display: block !important;}
.cardGrades .lineCheck{height: 1.053rem; line-height: 1.053rem; font-size: 0.346rem; color: #333333; padding-left: 0.266rem; border-bottom: 0.026rem solid #f2f2f2;}
.cardGrades .lineCheck.checked{color: #d72d3b;}
.cardGrades .lineCheck.checked:after{content: ""; width: 0.306rem; height: 0.213rem; background: url(../images/lineChecked.png) no-repeat; background-size: 100%; display: inline-block; margin-left: 0.426rem;}

.overlay {position: fixed;width: 100%;height: 100%;visibility: hidden;top: 0;left: 0;z-index: 1000;opacity: 0;-webkit-transition: all 0.3s; background: rgba(0,0,0,0.7);}
.overlayHigh {position: fixed;width: 100%;height: 100%;visibility: hidden;top: 0;left: 0;z-index: 2099;opacity: 0;-webkit-transition: all 0.3s; background: rgba(0,0,0,0.7);}
.overlayHigh.show {opacity: 1;visibility: visible;}
.cardTypes.active ~ .overlay {opacity: 1;visibility: visible;}
.cardGrades.active ~ .overlay {opacity: 1;visibility: visible;}

.searchSection{position: fixed; display: none; top: 0; left: 0; right: 0; bottom: 0; background: #fff; z-index: 3000;padding: 0.4rem 0.386rem 0;}
.searchSection.show{display: block;}
.searchForm{height: 0.906rem; display: flex;}
.cancleBtn{width: 1.533rem; height: 0.906rem; line-height: 0.906rem;color: #333333; font-size: 0.373rem; text-align: center; margin-right: -0.386rem;}
.searchInputWarp{ flex-grow: 1; position: relative; font-size: 0;}
.searchInput{ background:url(../images/searchInputIcon.png) no-repeat #eeeeee; background-size: 0.906rem; font-size: 0.343rem;  border-radius: 0.133rem; border:0; padding-left:1.066rem; width: 100%; height: 0.906rem;}
.hotSearchTitle{font-size: 0.453rem; line-height: 0.666rem; margin: 0.493rem 0 0.4rem;}

.searchAdv{ margin: 0 -0.16rem;font-size: 0; height: 6rem; overflow: hidden;}
.searchAdv.open{height: 10.133rem;}
.searchAdv .advTag{display: inline-block; border-radius: 0.133rem; font-size: 0.343rem; color: #5a5a5a; line-height: 0.493rem; padding: 0.16rem 0.56rem; background: #f6f6f6; margin: 0 0.16rem; margin-bottom: 0.453rem;}
.moreAdv{height: 0.933rem; text-align: center; font-size: 0.346rem; font-weight: bold; line-height: 0.933rem;}
.moreAdv:after{content: ""; display: inline-block; margin-left: 0.266rem; width: 0.293rem; height: 0.16rem; background:url(../images/moreAdv.png) no-repeat ; background-size: 100% auto; transition: background-position 0.3s;}
.open~.moreAdv:after{ background:url(../images/moreAdv.png) no-repeat ; background-size: 100% auto; background-position: bottom;transition: background-position 0.3s;}


.offcanvas{position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;z-index: 2100; visibility: hidden; pointer-events: none;}
.offcanvas.active{visibility: visible !important;}
.offcanvas.active ~ .overlayHigh {opacity: 1;visibility: visible; }
.offcanvas .filterBar{width: 7.546rem; height: 100%;  position: absolute; background: #fff; right: -7.546rem; top: 0; overflow: hidden; pointer-events: auto;transition: right 0.3s; }
.offcanvas.active .filterBar{right:0; transition: right 0.5s;}
.offcanvas .filterBar .barContent{width: 7.546rem; height: 100%; overflow-y: scroll;  box-sizing: border-box;padding: 0 0.133rem 1.773rem 0.493rem;}
.offcanvas .filterBar .three{display: flex;  flex-wrap: wrap;}
.offcanvas .filterBar .three .buttonCheck{width:2.133rem; box-sizing: border-box;margin-right: 0.146rem; margin-bottom: 0.266rem; font-size: 0.346rem; height: 0.8rem; line-height: 0.8rem; text-align: center; color: #333; background: #f2f2f2; border-radius: 0.133rem;} 
.offcanvas .filterBar .three .buttonCheck.checked{ background: url(../images/buttonChecked.png) no-repeat #fff7f8; background-size: 0.52rem 0.506rem; background-position: bottom right;  border:0.026rem solid #d72d3b;line-height: 0.748rem;}
.offcanvas .filterBar .two{display: flex;  flex-wrap: wrap;}
.offcanvas .filterBar .two .buttonCheck{width:3.013rem; box-sizing: border-box;margin-right: 0.146rem; margin-bottom: 0.266rem; font-size: 0.346rem; height: 0.8rem; line-height: 0.8rem; text-align: center; color: #333; background: #f2f2f2; border-radius: 0.133rem;} 
.offcanvas .filterBar .two .buttonCheck:nth-of-type(odd){width: 3.506rem;}
.offcanvas .filterBar .two .buttonCheck.checked{ background: url(../images/buttonChecked.png) no-repeat #fff7f8; background-size: 0.52rem 0.506rem; background-position: bottom right; border:0.026rem solid #d72d3b;line-height: 0.748rem;}
.offcanvas .colorChoose{display: flex;  flex-wrap: wrap;}
.offcanvas .colorChoose .color{width:0.96rem; overflow: hidden; box-sizing: border-box;margin-right: 0.653rem; margin-bottom: 0.266rem; height: 0.96rem; line-height: 0.8rem; background: #f2f2f2; border-radius: 0.133rem;} 
.offcanvas .colorChoose .color.checked{background-image: url(../images/buttonChecked.png); background-repeat: no-repeat;background-size: 0.52rem 0.506rem; background-position: bottom right; border:0.026rem solid #d72d3b;line-height: 0.748rem;}

.btnLine{height: 1.773rem; display: flex; justify-content: space-between; box-sizing: border-box;  background: #fff;
 position: absolute; bottom: 0; left: 0; right: 0; padding: 0.426rem 0.4rem 0.426rem 0.52rem;
 box-shadow: 0 0.066rem 0.36rem rgba(0,0,0,0.25);
 }
.btnLine .btn{width: 3.04rem; height: 0.933rem; background: #eeeeee; border-radius:0.466rem ; line-height: 0.933rem; text-align: center; font-size: 0.373rem; color: #333;}
.btnLine .btn.btnSure{background: #d72d3b; color: #fff;}
.filterBarTitle{font-size: 0.373rem; color: #333; line-height: 0.666rem; margin: 0.2rem 0;}
.filterBarTitle span{font-size: 0.32rem; color: #999; font-weight: normal; padding-left: 0.133rem;}
.offcanvas .colorChoose .color.color1{background-color: #aebfc6;}
.offcanvas .colorChoose .color.color2{background-color: #d49bbe;}
.offcanvas .colorChoose .color.color3{background-color: #dab876;}
.offcanvas .colorChoose .color.color4{background-color: #f37b82;}
.offcanvas .colorChoose .color.color5{background-color: #d7716c;}
.offcanvas .colorChoose .color.color6{background-color: #acacac;}
.offcanvas .colorChoose .color.color7{background-color: #e6e6e6;}
.offcanvas .colorChoose .color.color8{background-color: #efebc2;}


.goTop{width: 0.826rem; height: 0.826rem; z-index: 200; right: 0.373rem; bottom: 1.16rem; position: fixed; background: url(../images/goTop.png) no-repeat #fff; background-size: 0.826rem; border: 0.026rem solid #2f93f5; border-radius: 0.413rem; box-shadow: 0.026rem 0 0.506rem #cdcbcb;}
.loading{ width: 4.36rem; height: 1.64rem; box-sizing: border-box; margin-left: -2.173rem; border-radius: 0.266rem; padding-left: 1.666rem; line-height: 1.64rem; font-size: 0.453rem; color: #535353; position: fixed; top: 40%; left: 50%; background: #fff; z-index: 3000; display: none;}
.loading.show{display: block;}
.loading:before{width: 0.88rem; height: 0.88rem; position: absolute;content: ""; background: url(../images/loading.png) no-repeat; background-size: 100%; left: 0.48rem; top:0.4rem;
-webkit-animation: loadingIconRo 1500ms linear infinite;
}
@-webkit-keyframes loadingIconRo {
 0% {-webkit-transform: rotate(0deg);}
 100% {-webkit-transform: rotate(360deg);}
}
.pull-more{font-size: 0.346rem; color: #999; text-align: center; height: 1rem; width: 100%; position: relative; }
.pull-more:before{width: 0.6rem; height: 0.6rem; position: absolute;content: "";  opacity: 0; background: url(../images/loading.png) no-repeat; background-size: 100%; left:50%; top:0.266rem; margin-left: -0.3rem;}
.pull-more.bottomLoading:before{width: 0.6rem; height: 0.6rem; position: absolute;content: ""; opacity: 1; background: url(../images/loading.png) no-repeat; background-size: 100%; left:50%; top:-0.133rem; margin-left: -0.3rem;
-webkit-animation: loadingIconRo 1500ms linear infinite; transition: all 0.3s;}
.icon-clear{display:none;position: absolute;background: url(data:image/png;base64,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) no-repeat;background-size: 100%;width: 0.533rem;height: 0.533rem;right: 0.16rem;top: 0.18rem;}
