@import url(twplus.css);


::-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);}
body{background-color:#fff;}.logo{width:128px;}
.imgs-hover {transition: all .3s ease .1s;}
.imgs-hover:hover {transform: scale(1.05);}/* 放大1.05倍 */
.nav a:hover,.crumbs a:hover{color:#08c;}
.goodsBox{display: flex;flex-wrap:wrap;align-items: center;justify-content: center;border-radius: 6px;margin:1.8%;position:relative;}
.goodsBox:hover{box-shadow: 0 1px 3px var(--color-darkGrey);}
.fav{font-size: 12px;display: flex;justify-content: center;align-items: center;cursor:pointer;flex-wrap: nowrap;white-space: nowrap;}
.moreColors{margin:0;font-weight:bold;background:-webkit-linear-gradient(left,#000,#0066ff,#0084d1 25%,#0300ff 50%,#0084d1 75%,#ff0000 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 100%;animation:masked-animation 5s infinite linear}
@keyframes masked-animation{0%{background-position:0 0}100%{background-position:-100%,0}}


.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;}


.xtiper{position:relative}
.xtiper_msg{transition-duration:0.2s;transition-timing-function:ease-out;transition-property:transform,opacity}
.xtiper_msg{max-width:752px;position:fixed;left:50%;height:50px;line-height:50px;font-size:14px;border-radius:3px;overflow:hidden;z-index:99999;opacity:0;box-shadow:0 0 10px rgba(0,0,0,0.2)}
.xtiper_msg_black{background-color:rgba(0,0,0,0.75);color:#fff}
.xtiper_msg_white{background-color:rgba(255,255,255,0.95);color:#222}
.xtiper_msg_middle{top:50%;margin-top:-25px;transform:scale(0,0)}
.xtiper_msg_top{transform:translate(0,-100%) scale(1,1);top:0}
.xtiper_msg_bottom{transform:translate(0,100%) scale(1,1);bottom:0}
.xtiper_msg.xon{opacity:1}
.xtiper_msg_middle.xon{transform:scale(1,1)}
.xtiper_msg_top.xon{transform:translate(0,0) scale(1,1)}
.xtiper_msg_bottom.xon{transform:translate(0,0) scale(1,1)}
.xtiper_msg p{padding:0 24px;word-spacing:nowrap}
.xtiper_tips{position:absolute;z-index:99999;max-width:200px;opacity:0;transform:scale(0,0);transition-duration:0.1s;transition-timing-function:ease-in;transition-property:opacity,transform;box-shadow:0 0 5px rgba(0,0,0,0.3)}
.xtiper_tips.xon{transition-duration:0.2s;opacity:1;transform:scale(1,1)}
.xtiper_tips p{padding:10px 16px;background-color:#000;border-radius:3px;color:#fff;line-height:18px;font-size:12px;position:relative;z-index:2}
.xtiper_tips em{display:block;position:absolute;width:10px;height:10px;background-color:#000;transform:rotate(45deg);box-shadow:0 0 5px rgba(0,0,0,0.3);z-index:1}
.xtiper_tips_left em{top:12px;right:-4px}
.xtiper_tips_right em{top:12px;left:-4px}
.xtiper_tips_top em{left:12px;bottom:-4px}
.xtiper_tips_bottom em{left:12px;top:-4px}

/* 新增confirm弹窗样式 */
.xtiper_win{width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}
.xtiper_bg{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;background-color:rgba(0,0,0,0);transition:background-color 0.2s ease-in;}
.xtiper_win.xon .xtiper_bg{background-color:rgba(0,0,0,0.5);}
.xtiper_main{width:300px;background-color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px rgba(0,0,0,0.2);z-index:2;opacity:0;transition:opacity 0.2s ease-in;border-radius:5px;overflow:hidden;}
.xtiper_win.xon .xtiper_main{opacity:1;}
.xtiper_tit{height:40px;line-height:40px;color:#222;font-size:14px;background-color:#f8f8f8;padding:0 18px;position:relative;border-bottom:1px solid #eee;}
.xtiper_tit p{margin:0;font-weight:bold;}
.xtiper_close{width:30px;height:30px;cursor:pointer;position:absolute;top:5px;right:6px;}
.xtiper_close:before,.xtiper_close:after{content:"";display:block;width:14px;height:2px;background-color:#2d2c3b;position:absolute;top:14px;left:8px;}
.xtiper_close:before{transform:rotate(45deg);}
.xtiper_close:after{transform:rotate(-45deg);}
.xtiper_close:hover:before,.xtiper_close:hover:after{background-color:#e75445;}
.xtiper_pad{padding:15px;}
.xtiper_tip{font-size:14px;line-height:20px;min-height:60px;overflow:hidden;}
.xtiper_btn{display:flex;justify-content:flex-end;padding:10px 15px;border-top:1px solid #eaeaea;background-color:#fff;}
.xtiper_btn button{height:32px;padding:0 15px;margin-left:10px;border:1px solid #ddd;border-radius:3px;background-color:#fff;cursor:pointer;font-size:14px;}
.xtiper_btn button:hover{opacity:0.8;}
.xtiper_btn button.primary{background-color:#1890ff;color:#fff;border-color:#1890ff;}
.xtiper_btn button.cancel{background-color:#f5f5f5;color:#333;border-color:#d9d9d9;}