/* BASIC css start */
.bestBrandList {margin-top:20px; padding:0 16px;}
.bestBrandList ul {display:flex; flex-wrap:wrap; width:100%; gap:8px; row-gap:16px;}
.bestBrandList ul li {display:inline-block; width:calc(25% - 6px); text-align:center;}
.bestBrandList ul li a {display:block;}
.bestBrandList ul li span {display:block;}
.bestBrandList ul li span img {width:100%;}
.bestBrandList ul li .title {margin-top:8px; font-size:14px; color:#000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.bestBrandList h4 {font-size:20px; margin-bottom:10px;}
.brandKeywordTab {padding:0 16px; margin-top:20px;}
.brandKeywordTab a {margin-right:20px; font-size:14px; color:#999; position:relative;}
.brandKeywordTab a.active {color:#000;}
.brandKeywordTab a:after {content:''; width:1px; height:10px; right:-10px; background:#999; top:50%; margin-top:-5px; position:absolute;}
.brandKeywordTab a:last-child:after {content:none;}
.brandSearch {margin-top:50px;}
.brandSearch .brandSearchForm {padding:0 16px;}
.brandSearch .brandLabel {position:relative;}
.brandSearch .brandLabel:after {content:''; display:block; clear:both;} 
.brandSearch .brandLabel .brandLabelBtn {float:right; position:relative; padding-right:20px; font-size:14px;}
.brandSearch .brandLabel .brandLabelBtn img {position:absolute; top:50%; right:0; width:12px; margin-top:-3.2px;}
.brandSearch .brandLabel .brandLablePopup {display:none;position:absolute; top:0; left;0; width:100%; box-sizing:border-box; padding:20px 20px 30px; border:2px solid #000; background:#fff; z-index:1001;}
.brandSearch .brandLabel .brandLablePopup .pop_close {position:absolute; top:10px; right:10px; font-size:16px; color:#000; cursor:pointer;}
.brandSearch .brandLabel .brandLablePopup h2 {font-size:16px; font-weight:600; color:#000; margin-bottom:20px;}
.brandSearch .brandLabel .brandLablePopup ul li {line-height:20px; position:relative; color:#999;}
.brandSearch .brandLabel .brandLablePopup ul li span {display:inline-block; padding-left:16px; color:#000; font-size:13px;}
.brandSearch .brandLabel .brandLablePopup ul li span:after {content:''; display:inline-block; width:8px; height:8px; border-radius:8px; position:absolute; top:6px; left:0;}
.brandSearch .brandLabel .brandLablePopup ul li span.blue:after {background:#2d63c7;}
.brandSearch .brandLabel .brandLablePopup ul li span.black:after {background:#000;}
.brandSearch .brandLabel .brandLablePopup ul li span.pink:after {background:#fca0d1;}
.brandSearch .brandLabel .brandLablePopup ul li span.yellow:after {background:#f4bf35;}
.brandSearch .brandLabel .brandLablePopup ul li span.green:after {background:#4fac3a;}
.brandSearch .brandLabel .brandLablePopup ul li span.red:after {background:red;}
.brandSearch .brandLabel .brandLablePopup ul li span.purple:after {background:purple;}

.brandSearch .brandSearchForm .brandSearchFormWrap {border:1px solid #ddd; height:40px; line-height:40px; position:relative; margin-top:10px;}
.brandSearch .brandSearchForm .brandSearchFormWrap input {display:inline-block; height:40px; line-height:40px; border:0; padding:0 10px; width:calc(100% - 40px); vertical-align:top; font-size:14px;}
.brandSearch .brandSearchForm .brandSearchFormWrap button {width:40px; height:40px; border:0; background:transparent; position:absolute; top:0; right:0; text-align:center;}
.brandSearch .brandSearchForm .brandSearchFormWrap button img {display:block; width:30px;}
.brandSearch .brandKeywordList {margin-top:5px;}
.brandSearch .brandKeywordList .keyword {float:left; margin-left:16px; line-height: 40px; text-align: center; border-radius: 40px; border: 1px solid #ddd; display:inline-block; font-size: 14px; position:relative; padding:0 20px; width:auto;}
.brandSearch .brandKeywordList .keyword img {width:14px; vertical-align: middle;}
.brandSearch .brandKeywordList .keywordContent  {display:none;}
.brandSearch .brandKeywordList .keywordContent.selected  {display:block;}

.brandSearch .brandKeywordList .swiper-container {padding:0 16px; overflow:hidden;}
.brandSearch .brandKeywordList .swiper-container .swiper-slide {width:auto;}
.brandSearch .brandKeywordList .swiper-container .swiper-slide a {display:inline-block; min-width:40px; height:40px; line-height:40px; text-align:center; border-radius:40px; border:1px solid #ddd; font-size:14px; padding:0 10px; box-sizing:border-box;}
.brandSearch .brandKeywordList .swiper-container .swiper-slide a.active {background:#000; border:1px solid #000; color:#fff;}

.brandSearch .brandNormalList {margin-top:10px;}
.brandSearch .brandNormalList li {display:flex; justify-content:space-between; align-items:center; width:100%; box-sizing:border-box; padding:16px; border-bottom:1px solid #ddd;}
.brandSearch .brandNormalList li.displaynone {display:none;}
.brandSearch .brandNormalList li .brandName a {position:relative; display:inline-block; padding-left:16px;}
.brandSearch .brandNormalList li .brandName a:after {content:''; display:inline-block; width:8px; height:8px; border-radius:8px; position:absolute; top:8px; left:0;}
.brandSearch .brandNormalList li .brandName a.blue:after {background:#2d63c7;}
.brandSearch .brandNormalList li .brandName a.black:after {background:#000;}
.brandSearch .brandNormalList li .brandName a.pink:after {background:#fca0d1;}
.brandSearch .brandNormalList li .brandName a.yellow:after {background:#f4bf35;}
.brandSearch .brandNormalList li .brandName a.green:after {background:#4fac3a;}
.brandSearch .brandNormalList li .brandName a span {display:block; line-height:24px;}
.brandSearch .brandNormalList li .brandName a.red:after {background:red;}
.brandSearch .brandNormalList li .brandName a.purple:after {background:purple;}

.brandSearch .brandNormalList li .brandName a .engName {font-size:18px; color:#000; display:flex; width:100%; align-items:center;}
.brandSearch .brandNormalList li .brandName a .engName .icon {display:inline-block; padding-left:10px;}
.brandSearch .brandNormalList li .brandName a .engName .icon img {height:18px; margin-right:2px;}
.brandSearch .brandNormalList li .brandName a .category {font-size:14px; color:#999;}
.brandSearch .brandNormalList li .brandLike {display:inline-block; width:60px;}
.brandSearch .brandNormalList li .brandLike a span {display:block; text-align:center;}
.brandSearch .brandNormalList li .brandLike .icon img {width:18px;}
.brandSearch .brandNormalList li .brandLike .count {color:#999; font-size:12px; margin-top:5px;}
.brandSearch .brandSticky {position:sticky; padding:10px 0; top:53px; z-index:1000; background:#fff; will-change: transform; transition: transform 0 linear; transition: all 0.4s; -webkit-transition: all 0.4s; -moz-transition: all 0.4s;}
#header.headroom--pinned ~ #container .brandSearch .brandSticky {top:114px;}
/* BASIC css end */

