/*@import url(tailwindcss.css);*/
.str-center{text-align: center;}
.imgs-hover {transition: all .3s ease .1s;}
.imgs-hover:hover {transform: scale(1.05);}
/* 放大1.05倍 */
::-webkit-scrollbar {width: 5px;height: 5px;background-color: rgba(211, 211, 211, 1);}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {box-shadow: inset 0 0 0px rgba(211, 211, 211, .3);border-radius: 10px;background-color: rgba(211, 211, 211, 1);}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {border-radius: 10px;box-shadow: inset 0 0 0px rgba(0, 64, 125, .3);background-color: rgba(0, 0, 0, .3);}
.fl{float: left;}
.fr{float: right;}
.cut{overflow: hidden;}
.flex-t{display: flex;flex-wrap: wrap;}
.flex-only{display: flex;}
.ml10{margin-left:10px;}
.mr10{margin-right:10px;}
.mr20{margin-right:26px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px!important;}
.mt15{margin-top:15px!important;}
.mt20{margin-top:20px!important;}
.mt30{margin-top:30px!important;}
.pd5{padding:5px;}
.hide{display: none;!important}
.show{display: block!important;}
.line-left{border-left: 1px solid #BFBFBF;}
.line-bottom{border-bottom: 2px solid #FA6E05;}
.line-B9{border-bottom: 1px solid #D9D9D9;margin:10px 0}




body{background-color:#fff;}
.logo{width:180px;}
.l-24-icon{width:24px;height:24px;cursor:pointer;padding:2px;}
.l-16-icon{width:16px;height:16px;cursor:pointer;padding:2px;}


.header-top{background: #333;height:40px;display: flex;align-items: center;justify-content: center;color:#fff;}
.header-top .icon-top-tips{filter:grayscale(100%) brightness(300%);}
.nav a:hover,.crumbs a:hover{color:#08c;}
.crumbs a{color:#333;}







.goodsBox{display: flex;flex-wrap:wrap;align-items: center;justify-content: center;box-shadow: 0 1px 3px var(--color-grey);border-radius: 6px;margin:1.8%;padding: 0 0 3% 0;}
.goodsBox:hover{box-shadow: 0 1px 3px var(--color-darkGrey);}

.goodsImgBox{width: 96%;position: relative;overflow: hidden;aspect-ratio: 1 / 1;display: flex;justify-content: center;align-items: center;}
.goodsOptBox{width: 98%;z-index: 8;width: 98%;position: absolute;bottom: 1%;}

.goodsImgBox img {width: 100%;transition: all 0.5s linear;}
.goodsImgBox img:hover{transform: scale(1.02);}

.goodsOptBox ul{width: 100%;display: flex;flex-wrap:nowrap;gap:1%;justify-content:center;overflow:hidden;}
.goodsOptBox ul li{width: 22%;min-width: 22%;display: flex;flex-wrap:nowrap;aspect-ratio:1.38;overflow: hidden;align-items: center;justify-content: center;border: 1px solid #E6E6E6;
border-radius:3px;cursor:pointer;}
.goodsOptBox ul li:hover,.goodsOptBox ul .active{border: 1px solid #08c;}


.goodsOptBox ul li img{width: 98%;}


.goodsTags{width: 100%;box-sizing: border-box;display: flex;flex-wrap: wrap;position: absolute;top: 2%;left:1%;}
.goodsTags .goodsTag{padding: 0px 6px;display: flex;align-items: center;font-size: 11px;z-index: 2;background:linear-gradient(135deg, #08c 0%, #9db3ea 100%);border-radius: 6px 0px 6px 0px;color: #fff;}

.tryOn{position: absolute;bottom:18%;z-index:9;font-size: 12px;display: flex;justify-content: center;align-items: center;margin: 0 auto;border-radius: 20px;border: 1px solid #d0d4db;cursor:pointer;flex-wrap: nowrap;white-space: nowrap;padding: 0px 8px;background: hsla(0, 0%, 100%, .8);}
.fav{position: absolute;top:1%;right:1%;font-size: 12px;display: flex;justify-content: center;align-items: center;cursor:pointer;flex-wrap: nowrap;white-space: nowrap;padding: 0px 8px;}


.loadingDom{width: 100vw;height: 100vh;position: fixed;left: 0;top: 0;z-index: 999999;background-color: rgba(255, 255, 255, 0.85);display: none;align-items: center;justify-content: center;}
.loadingDom svg{width: 200px !important;}