@charset"utf-8";

#elevSide{display:none;position:fixed;top:50%;left:0;transform:translateY(-50%);z-index:60;font-family:"Microsoft YaHei","微软雅黑",Arial,sans-serif}#elevator{background:#fff;border:1px solid #e5e5e5;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.12);padding:0;overflow:hidden;transition:transform .25s ease,opacity .25s ease}#elevSide.collapsed #elevator{transform:translateX(calc(-100% - 14px));opacity:0;pointer-events:none}.elev-hd{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 8px;background:#fafafa;border-bottom:1px solid #eee}.elev-hd-txt{font-size:12px;font-weight:700;color:#666;letter-spacing:1px}.elev-toggle{width:18px;height:18px;line-height:15px;text-align:center;border:1px solid #ddd;border-radius:4px;color:#888;cursor:pointer;font-size:14px;user-select:none;background:#fff}.elev-toggle:hover{border-color:#c81623;color:#c81623}#elevator ul{list-style:none;margin:0;padding:0}#elevator li{position:relative;width:90px;height:32px;display:flex;align-items:center;justify-content:center;background:#fff;border-bottom:1px solid #f1f1f1;cursor:pointer;color:#333;font-size:13px;transition:background .15s ease,color .15s ease}#elevator li:last-child{border-bottom:none}#elevator li a{text-decoration:none;color:inherit;display:block}#elevator li .ef-num{display:none}#elevator li .etitle{position:static;opacity:1;transform:none;pointer-events:auto;white-space:nowrap;height:auto;line-height:32px;padding:0;background:transparent;color:#333;border:0;border-radius:0;box-shadow:none;font-size:13px;font-weight:400;transition:none}#elevator li:hover{background:#fff3f3}#elevator li:hover .etitle{color:#c81623}#elevator li.current{background:#c81623}#elevator li.current .etitle{color:#fff;font-weight:600}#elevator li.ef-top{border-top:1px solid #eee}#elevExpand{display:none;position:fixed;top:50%;left:0;transform:translateY(-50%);z-index:60;background:#fff;border:1px solid #f2c4c4;border-left:none;border-radius:0 8px 8px 0;box-shadow:2px 4px 14px rgba(0,0,0,.12);padding:10px 5px;cursor:pointer;text-align:center;color:#c81623;font-family:"Microsoft YaHei","微软雅黑",Arial,sans-serif}#elevSide.collapsed #elevExpand{display:block}.elev-expand-txt{writing-mode:vertical-rl;letter-spacing:3px;font-size:13px;font-weight:700;display:block;margin-bottom:6px}.elev-expand-arrow{font-size:16px;font-weight:700;line-height:1}



.m_new .m_title{
    height: 40px;
    margin-bottom: 8px;
    font-family: "Microsoft YaHei", Arial;
    border-bottom: 3px #D71635 solid;
}
.m_new .m_title h3,.m_new .m_title ul{
    float: left;
    overflow: auto;
}
.m_new .m_title h3{

    background-color: #D71635;
    color: #FFFFff;
    line-height: 2em;
    font-size: 20px;
    padding-left: 5px;
    width: 195px;
}
.m_new .m_title ul{
    margin-left: 15px;
}
.m_new .m_title h3 i{
    float: right;
    padding-left: 3px;
    padding-right: 10px;
    font-size: 14px;
    color: #033971;
}
.m_new .m_title ul li{
    display: inline-block;
    padding:0 25px;
    line-height:32px;
    cursor:pointer;
}
.li-current{
    border-bottom: 6px #D71635 solid;
    font-weight: bold;
    line-height:28px;
}
.li-currents{
    font-weight: bold;
}
.m_new .m_title ul li:hover{
    border-bottom: 6px #D71635 solid;
    font-weight: bold;
    line-height:30px;
}
.m_new .m_title a{
    float: right;
    line-height: 2em;
    border-radius: 10px 10px;
    width: 105px;
    color: #fffffe;
    background-color: #D71635;
    text-align: center;
    padding: 0 10px;
}

#slider_wraps{
    width:200px;
    height:280px;
    position:relative;
    overflow:hidden;
}

#slider_wraps ul#slider{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}

#slider_wraps ul#slider li{
    float:left;
    position:relative;
    width:200px;
    height:280px;
}
#slider_wraps ul#slider li img{
    display: block;
    width:200px;
    height:280px;
}

#slider_wraps ul#slider li > div{
    position:absolute;
    top:0px;
    left:0px;
}

#slider_wraps ul#slider li > div h3{
    font-size:36px;
    text-transform:uppercase;
}

#slider_wraps ul#slider li > div span{
    font-family: Neucha, Arial, sans serif;
    font-size:21px;
}

#slider_wraps ul#slider li i{
    text-align:center;
    line-height:400px;
    display:block;
    width:100%;
    font-size:90px;
}


/*M_btns*/
.M_btns{
    position:absolute;
    width:50px;
    height:60px;
    top:50%;
    margin-top:-25px;
    line-height:57px;
    text-align:center;
    cursor:pointer;
    background:rgba(0,0,0,0.1);
    z-index:100;


    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;

    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

.M_btns:hover{
    background:rgba(0,0,0,0.3);
}

#next{right:-50px; border-radius:7px 0px 0px 7px;}
#previous{left:-50px; border-radius:0px 7px 7px 7px;}
#counter{
    top: 30px;
    right:35px;
    width:auto;
    position:absolute;
}
#slider_wraps.active #next{right:0px;}
#slider_wraps.active #previous{left:0px;}
/*bar*/
#pagination_wraps{
    min-width:20px;
    margin-top:230px;
    margin-left: auto;
    margin-right: auto;
    height:15px;
    position:relative;
    text-align:center;
}
#pagination_wraps ul {
    width:100%;
}
#pagination_wraps ul li{
    margin: 0 4px;
    display: inline-block;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#7a6e6e;
    opacity:0.5;
    position:relative;
    top:0;
}
#pagination_wraps ul li.active{
    width:12px;
    height:12px;
    top:3px;
    opacity:1;
    box-shadow:rgba(0,0,0,0.1) 1px 1px 0px;
}

/*新样式*/
.m_new{
    width: 1225px;
    margin: 0 auto;
    overflow: auto;
    zoom: 1;
    margin-top: 20px;
}
.m_new .m_l{
    float: left;
    width: 200px;
    height: 280px;
    background-color: #D71635;
    font-family: "Microsoft YaHei", Arial;
}
.m_new .m_l h2{

    color: #FFFFff;
    text-align: center;
    font-size: 28px;
    font-weight:normal;
    line-height: 2em;
    margin-top: 8px;
}
.m_new .m_l p{
    text-align: center;
    color: #000000;
    font-size: 18px;
    line-height: 1.5em;
}
.m_new .m_l img{
    display: block;
    margin:15px auto;

}
.m_new .m_l p.last{
    color: #FFFFff;
    background-color: #01C5DF;
    box-shadow:-1px -3px  8px #03366A;
    -webkit-box-shadow: -1px -3px  8px #03366A;
    -moz-box-shadow: -1px -3px  8px #03366A;
    box-shadow: -1px -3px  8px #03366A;
}
.m_new .m_l #timer1{
    text-align: center;
    margin-top: 10px;
    font-size: 15px;
}
.m_new .m_c{
    float: left;
    width: 1010px;
    height: 280px;
    margin: 0 5px;
    overflow: hidden;
}

.tab1{
    width: 1010px;

    margin:0 auto;
    height: 280px;
}
.m_menu{
    height:28px;
}
.m_menu li{
    float:left;
    width:99px;
    text-align:center;
    line-height:28px;
    height:28px;
    cursor:pointer;
    color:#666;
    font-size:14px;
    overflow:hidden;
    background:#E0E2EB;
}
.m_menu li.m_more{
    float: right;
    background-color: #F5F5F5;
    border: 0;
}
.m_menu li.off{
    background:#FFFFFF;
    color:#336699;
    font-weight:bold;
}
.m_menudiv{
    height:260px;
    border-top:0;
    background:#fefefe;
    width: 1010px;
    position: relative;
}
.m_menudiv div{
    line-height:28px;
}
.m-one{

    height: 280px;
}

.m-one>img.arrLeft{
    background-color: #0e0e0e;
    opacity: 0.5;
    position: absolute;
    left: 0;
    top: 80px;
    width: 20px;
    height: 32px;
}
.m-one>img.arrRight{
    position: absolute;
    right: 0;
    top: 80px;
    z-index: 999;
    width: 20px;
    height: 32px;
    background-color: #0e0e0e;
    opacity: 0.5;
}
.m-one>img.arrRight:hover,.m-one>img.arrLeft:hover{
    opacity: 1;
}

.scrollbox ul {
    overflow: hidden;
    padding-top:20px ;
}

.scrollbox ul LI {
    FLOAT: left;
    width: 190px;
    height: 280px;
    vertical-align: top;
    font-size: 12px;
    line-height: 18px;
    min-height: 18px;
    text-align: center;
    padding: 0px;
    overflow: hidden;
    margin: 0 5px;
}

.scrollbox ul LI img {
    width: 175px;
    height: 170px;
    border: 0px;
}

.pointer {
    CURSOR: pointer
}

.fB {
    font-weight: bold;
}

.fred {
    color: #ff0000;
}

.f12px {
    font-size: 12px;
}

.f14px {
    font-size: 14px;
}

.f14pxbai {
    font-size: 14px;
    color: #ffffff;
    font-weight: bold;
}

.f16px {
    font-size: 16px;
}

.f18px {
    font-size: 18px;
}

.f22px {
    font-size: 22px;
    color: #FFFFFF;
}

.center {
    margin: 0px auto;
}

.left {
    float: left;
}

.right {
    float: right;
}

.rejm {
    width: 60px;
    height: 20px;

    line-height: 20px;
}
.m-goodsList{
    overflow: hidden;
}
.m-goodsList dt{

}
.m-goodsList dd>p{
    padding:0 10px;
    height: 48px;
    overflow: hidden;
    line-height: 2em;
    margin: 2px 0;
}
.m-goodsList dd>div{

    overflow: auto;
}
.m-goodsList dd>div span{
    display: inline-block;
    background-color: #D71635;
    color: #FFFFff;
    line-height: 2em;
    padding: 0 4px;
    border: 1px #D71635 solid;
    width: 50px;
    text-align: center;
}
.m-goodsList dd>div span.m-current{
    background-color: #FFFFff;
    color: #666666;
    text-decoration:line-through;
}


.m_new .Mr{
    float: right;
    width: 200px;
    height: 280px;
    background-color: #cccccc;
}
@-webkit-keyframes flipTop {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg); }

    100% {
        -webkit-transform: perspective(400px) rotateX(-90deg); } }

@-webkit-keyframes flipBottom {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg); }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg); } }

@-moz-keyframes flipTop {
    0% {
        -moz-transform: perspective(400px) rotateX(0deg); }

    100% {
        -moz-transform: perspective(400px) rotateX(-90deg); } }

@-moz-keyframes flipBottom {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg); }

    100% {
        -moz-transform: perspective(400px) rotateX(0deg); } }

@-ms-keyframes flipTop {
    0% {
        -ms-transform: perspective(400px) rotateX(0deg); }

    100% {
        -ms-transform: perspective(400px) rotateX(-90deg); } }

@-ms-keyframes flipBottom {
    0% {
        -ms-transform: perspective(400px) rotateX(90deg); }

    100% {
        -ms-transform: perspective(400px) rotateX(0deg); } }

@-keyframes flipTop {

     0% {
    transform: perspective(400px) rotateX(0deg); }
    100% {
    transform: perspective(400px) rotateX(-90deg); }
}

@-keyframes flipBottom {
0% {
    transform: perspective(400px) rotateX(90deg);
}

100% {
    transform: perspective(400px) rotateX(0deg); } }

.flipTimer {
    color: #FFF;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    /*font-size: 90px;*/
    /*line-height: 100px;*/
    /*height: 100px;*/
    font-size: 24px;
    line-height: 27px;
    height: 27px;
    font-weight: bold;
    width: 200px;
    overflow: hidden;
    text-align: center;
}
.flipTimer .seperator {
    vertical-align: top;
    /*margin: 0 -20px;*/
    display: inline;
}
.flipTimer .seconds,
.flipTimer .minutes,
.flipTimer .hours,
.flipTimer .days {
    height: 100%;
    display: inline; }
.flipTimer .digit-set {
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    /*border: 1px solid #111111;*/
    /*width: 70px;*/
    width: 19px;
    height: 100%;
    display: inline-block;
    position: relative;
    margin: 0 0px;

}
.flipTimer .digit {
    position: absolute;
    height: 100%; }
.flipTimer .digit > div {
    position: absolute;
    left: 0;
    overflow: hidden;
    height: 50%;
    padding: 0 3px;

}
.flipTimer .digit > div.digit-top, .flipTimer .digit > div.shadow-top {
    background-color: #333;
    border-bottom: 1px solid #FFFFff;
    box-sizing: border-box;
    top: 0;
    z-index: 0;
   /* border-radius: 10px 10px 0 0;*/

}
.flipTimer .digit > div.digit-top:before, .flipTimer .digit > div.shadow-top:before {
    content: "";
    box-shadow: inset 0 8px 15px rgba(0, 0, 0, 0.4);
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0; }
.flipTimer .digit > div.shadow-top {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0)), to(black));
    width: 19px;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-in; }
.flipTimer .digit > div.digit-bottom, .flipTimer .digit > div.shadow-bottom {
    background-color: #333;
    bottom: 0;
    z-index: 0;
    /*border-radius: 0 0 10px 10px;*/
}
.flipTimer .digit > div.digit-bottom .digit-wrap, .flipTimer .digit > div.shadow-bottom .digit-wrap {
    display: block;
    margin-top: -100%; }
.flipTimer .digit > div.digit-bottom:before, .flipTimer .digit > div.shadow-bottom:before {
    content: "";
    box-shadow: inset 0 10px 25px rgba(0, 0, 0, 0.3);
    /*border-radius: 0 0 10px 10px;*/
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0; }
.flipTimer .digit > div.shadow-bottom {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(rgba(0, 0, 0, 0)));
    width: 20px;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-in; }
.flipTimer .digit.previous .digit-top,
.flipTimer .digit.previous .shadow-top {
    opacity: 1;
    z-index: 2;
    -webkit-transform-origin: 50% 100%;
    -webkit-animation: flipTop 0.3s ease-in both;
    -moz-transform-origin: 50% 100%;
    -moz-animation: flipTop 0.3s ease-in both;
    -ms-transform-origin: 50% 100%;
    -ms-animation: flipTop 0.3s ease-in both;
    transform-origin: 50% 100%;
    animation: flipTop 0.3s ease-in both; }
.flipTimer .digit.previous .digit-bottom,
.flipTimer .digit.previous .shadow-bottom {
    z-index: 1;
    opacity: 1; }
.flipTimer .digit.active .digit-top {
    z-index: 1; }
.flipTimer .digit.active .digit-bottom {
    z-index: 2;
    -webkit-transform-origin: 50% 0%;
    -webkit-animation: flipBottom 0.3s 0.3s ease-out both;
    -moz-transform-origin: 50% 0%;
    -moz-animation: flipBottom 0.3s 0.3s ease-out both;
    -ms-transform-origin: 50% 0%;
    -ms-animation: flipBottom 0.3s 0.3s ease-out both;
    transform-origin: 50% 0%;
    animation: flipBottom 0.3s 0.3s ease-out both; }

/* ===================== #310 窄屏(1280档)楼层主体网格规整 ===================== */
.wrap_1280 .sy_mod_f_bd:not(.grid_s5m25){width:1225px;}
.wrap_1280 .sy_mod_f_bd:not(.grid_s5m25)>.grid_s{width:190px;}
.wrap_1280 .sy_mod_f_bd:not(.grid_s5m25)>.grid_m{width:1035px;}
.wrap_1280 .sy_mod_f_bd:not(.grid_s5m25)>.grid_e{display:none;width:0;height:0;overflow:hidden;}

/* ===================== #311 商品卡 hover 操作条（京东风格，基础/窄屏档） ===================== */
.sy_mod_rank_bd li.goods,.mod_floor .goods_list li.goods{position:relative;}
.sy_mod_rank_bd li.goods .fc_hover,.mod_floor .goods_list li.goods .fc_hover{
 position:absolute;left:0;right:0;bottom:0;z-index:8;
 background:rgba(255,255,255,.98);
 box-sizing:border-box;height:61px;padding:6px 8px 8px;
 box-shadow:0 -3px 12px rgba(0,0,0,.10);
 border-top:1px solid #fbe3e2;border-radius:0 0 5px 5px;
 opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none;
 transition:opacity .2s ease,transform .2s ease;
}
.sy_mod_rank_bd li.goods:hover .fc_hover,.mod_floor .goods_list li.goods:hover .fc_hover{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
/* #315 hover 商品卡：与商品列表页(list.modern)一致的浮窗——浅红描边 + 红色投影 + 上浮。
   底部槽高度在常态即恒定(61px)，hover 只做上浮/淡入/描边，不改变卡片高度，鼠标切换商品页面不跳动 */
.sy_mod_rank_bd li.goods:hover,.mod_floor .goods_list li.goods:hover{
 z-index:9;outline:0;transform:translateY(-2px);
 /* #324 与商品列表页(productlist.css .item_list:hover)完全一致：常态透明1px边框占位(border-box 外尺寸不变)，
    hover 改 border-color:#f3bcba 真实边框(含底部操作条整体) + 红色投影 0 8px 20px + 圆角6px；只改颜色不改变尺寸，切换不跳动 */
 border-color:#f3bcba;
 box-shadow:0 8px 20px rgba(225,37,27,.14);
}
.sy_mod_rank_bd li.goods:hover .price_wrap,.mod_floor .goods_list li.goods:hover .price_wrap{display:none;}
.fc_r1{display:flex;align-items:center;justify-content:space-between;height:18px;line-height:18px;margin-bottom:4px;gap:6px;}
.fc_price{color:#e4393c;font-weight:700;font-size:15px;font-family:Arial,sans-serif;white-space:nowrap;}
.fc_price i{font-style:normal;font-size:12px;margin-right:1px;font-weight:400;}
.fc_code{color:#999;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fc_r2{display:flex;align-items:center;flex-wrap:nowrap;height:24px;}
.fc_r2{box-sizing:border-box;}
.fc_qty{display:inline-flex;align-items:stretch;border:1px solid #ddd;border-radius:2px;overflow:hidden;flex:0 0 auto;box-sizing:border-box;height:24px;}
.fc_qty a{display:inline-block;width:16px;height:22px;line-height:20px;text-align:center;color:#666;background:#f7f7f7;cursor:pointer;user-select:none;font-size:14px;box-sizing:border-box;}
.fc_qty a:hover{color:#e4393c;}
.fc_qty .fc-num{width:26px;height:22px;border:0;border-left:1px solid #ddd;border-right:1px solid #ddd;text-align:center;font-size:11px;padding:0;margin:0;box-sizing:border-box;}
.fc-btn{flex:0 0 auto;display:inline-block;cursor:pointer;text-align:center;border-radius:2px;box-sizing:border-box;height:24px;}
.fc-btn-cart{flex:1 1 auto;min-width:0;background:#e4393c;color:#fff;font-size:11px;height:24px;line-height:24px;padding:0 4px;margin-left:4px;white-space:nowrap;overflow:hidden;}
.fc-btn-cart:hover{background:#c81623;color:#fff;}
.fc-btn-cmp{font-size:11px;color:#666;height:24px;line-height:22px;padding:0 4px;margin-left:4px;border:1px solid #ddd;white-space:nowrap;}
.fc-btn-cmp:hover{color:#e4393c;border-color:#e4393c;}
.fc-btn-fav{width:22px;height:24px;line-height:24px;margin-left:4px;color:#bbb;text-align:center;padding:0;}
.fc-btn-fav:hover{color:#e4393c;}
.fc_heart{font-size:16px;line-height:1;}
.fc-btn-fav:hover .fc_heart{color:#e4393c;}
#fc_toast{display:none;position:fixed;left:50%;top:40%;transform:translateX(-50%);background:rgba(0,0,0,.78);color:#fff;padding:12px 22px;border-radius:6px;font-size:14px;z-index:99999;max-width:70%;text-align:center;}

/* ===================== #312 广告一键关闭：左广告隐藏 + 商品区扩宽 ===================== */
html.ad-off .sy_mod_f_bd:not(.grid_s5m25)>.grid_s{display:none !important;}
html.ad-off .sy_mod_f_bd:not(.grid_s5m25)>.grid_m{width:100% !important;}
html.ad-off .sy_mod_f_bd:not(.grid_s5m25)>.grid_e{display:none !important;}
html.ad-off .sy_mod_rank,html.ad-off .sy_mod_rank_bd{width:100% !important;}
/* 窄屏 wrap_1280 关闭广告：一行6个（卡204，litpic189+ml15=204） */
html.ad-off .wrap_1280 .sy_mod_rank_bd .goods{width:204px;}
html.ad-off .wrap_1280 .sy_mod_rank_bd .litpic{width:189px;}

/* ===================== #311 卡内顺序重排：图→名称→价格（名称完整显示，价格在最下方） ===================== */
/* ul 网格改 flex-wrap（替代 float），名称多行也不错位、同行等高 */
/* #324 楼层商品内容区与Tab主题色横线之间留白：第一行商品卡 hover 红框(含底部操作条)顶部不再贴住横线；
   左广告(.grid_s)与商品(.grid_m)同处该内容区，整体下移保持顶部对齐；排除备用空模板 .boomtad(高度0) */
.grid_c1.sy_mod_f > .sy_mod_f_bd:not(.boomtad){padding-top:10px;}
.sy_mod_rank_bd{display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;height:auto;}
.mod_floor .goods_list ul{display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;list-style:none;margin:0;padding:0;}
/* li：flex item（去 float，宽度沿用各屏规则）+ 卡内 flex column；去基础样式残留 padding-top:25px 让图片置顶 */
.sy_mod_rank_bd li.goods,.mod_floor .goods_list li.goods{float:none;flex:0 0 auto;display:flex;flex-direction:column;height:auto;overflow:hidden;border:1px solid transparent;border-radius:6px;box-sizing:border-box;padding-top:0;padding-bottom:61px;transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease;}
.sy_mod_rank_bd .pic_wrap,.mod_floor .goods_list .pic_wrap{order:0;flex:0 0 auto;}
.sy_mod_rank_bd .title_wrap,.mod_floor .goods_list .title_wrap{order:1;flex:0 0 auto;}
.sy_mod_rank_bd .code_wrap,.mod_floor .goods_list .code_wrap{order:2;}
/* 价格常驻底部槽(恒定高度,避免 hover 展开造成卡片跳动)；操作条 hover 时在同一槽内覆盖显示 */
.sy_mod_rank_bd li.goods .price_wrap,.mod_floor .goods_list li.goods .price_wrap{order:3;position:absolute;left:0;right:0;bottom:0;height:61px;display:flex;align-items:center;padding:0 8px;box-sizing:border-box;z-index:5;overflow:visible;}
/* 默认态不显示商品编码，编码仅在 hover 面板（fc_code）显示 */
.code_wrap{display:none;}
/* 名称完整显示：不限高、不截断（选择器带 .goods 以覆盖基础样式） */
.sy_mod_rank_bd .goods .title_wrap,.mod_floor .goods_list li.goods .title_wrap{height:auto;max-height:none;overflow:visible;white-space:normal;}
/* ===== 圆角：hover 红框跟随 li 圆角、操作条及按钮圆角 ===== */
.sy_mod_rank_bd li.goods .fc_hover,.mod_floor .goods_list li.goods .fc_hover{border-radius:0 0 5px 5px;}
.fc_qty{border-radius:3px;}
.fc-btn{border-radius:3px;}
.fc-btn-fav{border-radius:3px;}
/* 触屏(无 hover)：操作条常驻卡片底部，价格槽隐藏，保证可直接加购；卡片不额外预留悬浮槽 */
@media (hover:none){
 .sy_mod_rank_bd li.goods,.mod_floor .goods_list li.goods{padding-bottom:0;}
 .sy_mod_rank_bd li.goods .fc_hover,.mod_floor .goods_list li.goods .fc_hover{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;box-shadow:none;border-top:0;height:auto;min-height:0;padding:4px 8px 8px;}
 .sy_mod_rank_bd li.goods .price_wrap,.mod_floor .goods_list li.goods .price_wrap{display:none;}
}
/* ===== 楼层高度自适应：名称完整显示后商品区可能增高，解除固定高裁切（露出第二行价格） ===== */
.sy_mod_rank{height:auto;min-height:569px;}
/* 非活跃池初始隐藏：权重(0,2,0)高于 .sy_mod_rank_bd 的 flex(0,1,0)，但不带 !important，
   以便楼层 Tab 切换时 index.js(slider) 为显示池设置的 inline display 能覆盖 */
.sy_mod_rank .sy_mod_rank_bd.hide{display:none;}
/* #313 楼层 Tab 切换由 index.js 的 slider(fade) 控制：jQuery 1.5.1 的 .show() 只会给 ul 恢复 inline display:block，
   但本页商品池为 flex 网格。当 slider 把显示池置为 inline display:block 时，强制恢复为 flex（保持横向多列），
   并覆盖 .hide 的初始隐藏；旧池 fadeOut 后为 inline display:none，不命中本规则、保持隐藏 */
.sy_mod_rank_bd[style*="display: block"],
.sy_mod_rank_bd[style*="display:block"]{display:flex !important;flex-wrap:wrap;align-content:flex-start;}

/* ===================== #314 楼层商品图按比例放大（基础/窄屏档；源图已改用 Biger 300×300，缩小渲染更清晰） ===================== */
/* 修复 jquery.lazyload(v1.5/jQuery1.5.1) effect=fadeIn 在大图时序下把 img 停在 inline display:none 的问题：
   楼层商品图常驻显示（占位 grey.gif 仅在未进入视口时短暂出现，进入视口即换真实图）；slider 隐藏池由 ul.hide 整体隐藏，不受影响 */
.sy_mod_rank_bd .goods .litpic img{display:inline-block !important;}
/* 广告开（窄屏1280，5列，卡205）：图160→180，图片容器统一为190×190正方形，保持列数不溢出 */
.sy_mod_rank_bd .goods .pic_wrap{height:190px;}
.sy_mod_rank_bd .goods .litpic{width:190px;height:190px;line-height:190px;}
.sy_mod_rank_bd .goods .litpic img{width:180px;height:180px;}
/* 广告关（窄屏1280，6列，卡204/litpic189）：图178 */
html.ad-off .wrap_1280 .sy_mod_rank_bd .goods .pic_wrap{height:190px;}
html.ad-off .wrap_1280 .sy_mod_rank_bd .goods .litpic{width:189px;height:190px;line-height:190px;}
html.ad-off .wrap_1280 .sy_mod_rank_bd .goods .litpic img{width:178px;height:178px;}

/* ===================== #319 楼层精品推荐 Tab（橙色选中，仿主站） ===================== */
.sy_mod_rank_ext li.bt_tab{position:relative;}
.sy_mod_rank_ext li.bt_tab a{font-weight:600;}
/* 精品 Tab 前置星标 */
.sy_mod_rank_ext li.bt_tab a:before{content:"\2605";margin-right:3px;font-size:12px;}
.sy_mod_rank_ext li.bt_tab a:hover{color:#ff7201;}
/* 选中：橙色渐变实心、白字（特异性高于 index.css 的 .on，覆盖默认橙色块） */
.sy_mod_rank_ext li.bt_tab.on a{color:#fff;}
.sy_mod_rank_ext li.bt_tab.on{background:linear-gradient(180deg,#ff9226 0%,#ff6a00 100%);}
/* 精品池初始不分页：每列卡片底部价格条对齐 */
.sy_mod_rank_bd#j_pool_bt1232,.sy_mod_rank_bd[id^="j_pool_bt"]{padding-bottom:0;}

/* ===================== #321 楼层标题 + Tab 菜单（横线上方，菜单对齐右侧商品区）；移除“本周热销排行榜” ===================== */
/* 标题行：flex 通栏；底部沿用各楼层主题色横线（new/index.css .colorN .sy_mod_f_hd 的 3px border-bottom）。
   标题固定占左侧广告区宽度(190px)，Tab 菜单整体从右侧商品区 grid_m 左边缘开始，贴横线排布（坐在横线上方）。 */
.sy_mod_f_hd{display:flex;align-items:stretch;min-height:42px;height:auto;}
/* 标题区：固定 190px 与左侧广告区 grid_s 等宽、左缘对齐；标题文字垂直居中 */
.sy_mod_f_hd .sy_mod_f_tit{float:none;flex:0 0 190px;display:flex;align-items:center;box-sizing:border-box;line-height:42px;}
.sy_mod_f_hd .sy_mod_f_tit h2{font-size:20px;white-space:nowrap;margin:0;}
/* Tab 容器：标题占满 190px 后自然从商品区左边缘开始；Tab 贴底排列，坐于横线上方 */
.sy_mod_f_hd .sy_mod_rank_ext{float:none;flex:1 1 auto;display:flex;align-items:flex-end;flex-wrap:wrap;min-height:42px;height:auto;padding:0;margin:0;}
.sy_mod_f_hd .sy_mod_rank_ext li{float:none;display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;margin:0 2px;font:400 15px/36px "Microsoft YaHei","\5FAE\8F6F\96C5\9ED1",Arial;cursor:pointer;border-radius:2px 2px 0 0;white-space:nowrap;}
/* 去掉 Tab 之间的竖线分隔符 */
.sy_mod_f_hd .sy_mod_rank_ext li.sy_mod_rank_gap{display:none !important;}
/* 普通子类 Tab 选中：选中块背景色跟随各楼层主题色（与该楼层横线同色，见下方 .colorN 规则），方块底部贴横线 */
.sy_mod_f_hd .sy_mod_rank_ext li.on{margin:0 2px;padding:0 16px;background-color:#EA5504;border-radius:2px 2px 0 0;}
/* 精品推荐 Tab 选中：同样跟随各楼层主题色（见下方 .colorN 规则） */
.sy_mod_f_hd .sy_mod_rank_ext li.bt_tab.on{background-color:#EA5504;border-radius:2px 2px 0 0;}
/* “更多”固定到最右侧、贴横线 */
.sy_mod_f_hd .sy_mod_rank_ext li.rank_more{margin-left:auto;margin-right:0;padding:0 2px 0 10px;}
.sy_mod_f_hd .sy_mod_rank_ext li.rank_more a{color:#666;font-weight:400;}
.sy_mod_f_hd .sy_mod_rank_ext li.rank_more a:hover{color:#ff7201;}
.sy_mod_f_hd .sy_mod_rank_ext li.rank_more .more_arrow{font-style:normal;font-weight:400;margin-left:3px;font-size:16px;line-height:1;}
/* 广告一键关闭后：左侧广告区隐藏，标题恢复自适应宽度，Tab 紧跟标题（商品区此时占满整行） */
html.ad-off .sy_mod_f_hd .sy_mod_f_tit{flex:0 0 auto;}
/* 内容区顶部不再需要预留 rank_hd 高度（原“本周热销排行榜”行已移除） */
.sy_mod_rank .sy_mod_rank_hd{display:none;}
/* 未配置精品的楼层：隐藏“精品推荐”Tab（其 _p 与商品池 class 也由服务端条件输出，不参与 Tab 索引） */
.sy_mod_f_hd .sy_mod_rank_ext li.bt_none{display:none !important;}
.sy_mod_rank_bd_none{display:none !important;}

/* ===================== #321 选中 Tab 色块跟随各楼层主题色（与楼层横线同色） =====================
   楼层容器 class 为 color0~color9，横线色定义于 new/index.css .colorN .sy_mod_f_hd border-bottom。
   此处让子类 Tab（li.on）与精品推荐 Tab（li.bt_tab.on）选中块背景、以及悬停文字色，均取同一楼层主题色。 */
/* 精品Tab默认是橙色 linear-gradient（属 background-image），会覆盖下方各 colorN 的 background-color 主题色；
   先统一清除渐变图，使各楼层主题色纯色块生效（与楼层横线条同色）。 */
.sy_mod_f_hd .sy_mod_rank_ext li.bt_tab.on{background-image:none !important;}
/* 1F 办公用纸 绿 */
.color0 .sy_mod_f_hd .sy_mod_rank_ext li.on,
.color0 .sy_mod_f_hd .sy_mod_rank_ext li.bt_tab.on{background-color:#00A93A !important;}
.color0 .sy_mod_f_hd .sy_mod_rank_ext li:not(.on) a:hover{color:#00A93A !important;}
/* 2F 办公文具 橙 */
.color1 .sy_mod_f_hd .sy_mod_rank_ext li.on,
.color1 .sy_mod_f_hd .sy_mod_rank_ext li.bt_tab.on{background-color:#EA5504 !important;}
.color1 .sy_mod_f_hd .sy_mod_rank_ext li:not(.on) a:hover{color:#EA5504 !important;}
/* 3F 办公耗材 玫红 */
.color2 .sy_mod_f_hd .sy_mod_rank_ext li.on,
.color2 .sy_mod_f_hd .sy_mod_rank_ext li.bt_tab.on{background-color:#E4007F !important;}
.color2 .sy_mod_f_hd .sy_mod_rank_ext li:not(.on) a:hover{color:#E4007F !important;}
/* 4F 生活用品 深蓝 */
.color3 .sy_mod_f_hd .sy_mod_rank_ext li.on,
.color3 .sy_mod_f_hd .sy_mod_rank_ext li.bt_tab.on{background-color:#043491 !important;}
.color3 .sy_mod_f_hd .sy_mod_rank_ext li:not(.on) a:hover{color:#043491 !important;}
/* 5F 食品饮食 紫 */
.color4 .sy_mod_f_hd .sy_mod_rank_ext li.on,
.color4 .sy_mod_f_hd .sy_mod_rank_ext li.bt_tab.on{background-color:#591A86 !important;}
.color4 .sy_mod_f_hd .sy_mod_rank_ext li:not(.on) a:hover{color:#591A86 !important;}
/* 6F 办公家具 棕 */
.color5 .sy_mod_f_hd .sy_mod_rank_ext li.on,
.color5 .sy_mod_f_hd .sy_mod_rank_ext li.bt_tab.on{background-color:#4E3819 !important;}
.color5 .sy_mod_f_hd .sy_mod_rank_ext li:not(.on) a:hover{color:#4E3819 !important;}
/* 7F 电脑周边 青 */
.color6 .sy_mod_f_hd .sy_mod_rank_ext li.on,
.color6 .sy_mod_f_hd .sy_mod_rank_ext li.bt_tab.on{background-color:#00887A !important;}
.color6 .sy_mod_f_hd .sy_mod_rank_ext li:not(.on) a:hover{color:#00887A !important;}
/* 8F 办公设备 金黄 */
.color7 .sy_mod_f_hd .sy_mod_rank_ext li.on,
.color7 .sy_mod_f_hd .sy_mod_rank_ext li.bt_tab.on{background-color:#EA9900 !important;}
.color7 .sy_mod_f_hd .sy_mod_rank_ext li:not(.on) a:hover{color:#EA9900 !important;}
/* 9F 工业用品 橙 */
.color8 .sy_mod_f_hd .sy_mod_rank_ext li.on,
.color8 .sy_mod_f_hd .sy_mod_rank_ext li.bt_tab.on{background-color:#EA5504 !important;}
.color8 .sy_mod_f_hd .sy_mod_rank_ext li:not(.on) a:hover{color:#EA5504 !important;}
/* 10F 商务服务 玫红 */
.color9 .sy_mod_f_hd .sy_mod_rank_ext li.on,
.color9 .sy_mod_f_hd .sy_mod_rank_ext li.bt_tab.on{background-color:#E4007F !important;}
.color9 .sy_mod_f_hd .sy_mod_rank_ext li:not(.on) a:hover{color:#E4007F !important;}
/* 选中态文字统一白色（含 hover 时），避免被楼层 hover 文字色规则污染导致与色块同色 */
.sy_mod_f_hd .sy_mod_rank_ext li.on a,
.sy_mod_f_hd .sy_mod_rank_ext li.bt_tab.on a,
.sy_mod_f_hd .sy_mod_rank_ext li.on a:hover,
.sy_mod_f_hd .sy_mod_rank_ext li.bt_tab.on a:hover{color:#fff !important;}
/* ===== 楼层大图商品池统一分页器（精品/热销/子类共用；标题行最右） ===== */
.sy_mod_f_hd > .goods_pager{position:static;z-index:auto;flex:0 0 auto;margin-left:auto;align-self:center;display:flex;align-items:center;gap:6px;padding:0 4px 4px 12px;white-space:nowrap;}
.sy_mod_f .gp_pg{position:relative;display:block;width:30px;height:26px;border:1px solid #f0b8b3;border-radius:5px;background:#fff;box-sizing:border-box;}
.sy_mod_f .gp_pg:hover{background:#fff1f0;border-color:#e1251b;}
.sy_mod_f .gp_pg::before{content:'';position:absolute;top:50%;border:6px solid transparent;}
.sy_mod_f .gp_prev::before{left:9px;transform:translateY(-50%);border-right-color:#e1251b;}
.sy_mod_f .gp_next::before{right:9px;transform:translateY(-50%);border-left-color:#e1251b;}
.sy_mod_f .gp_pg.disabled{opacity:.38;cursor:default;pointer-events:none;}
.sy_mod_f .gp_pginfo{font-size:13px;color:#666;min-width:42px;text-align:center;line-height:1;}

/* 热销榜大图序号角标（跨页连续，1-10 循环配色） */
.sy_mod_rank_bd .goods .pic_wrap{position:relative;}
.hr_grid_no{position:absolute;top:0;left:0;z-index:6;min-width:22px;height:22px;padding:0 5px;line-height:22px;text-align:center;font-size:12px;font-weight:700;color:#fff;background:#b8bdc3;border-radius:6px 0 8px 0;box-shadow:0 1px 2px rgba(0,0,0,.12);}
.hr_grid_n1{background:#e1251b;}
.hr_grid_n2{background:#e85b0c;}
.hr_grid_n3{background:#d98c00;}
.hr_grid_n4{background:#5fa820;}
.hr_grid_n5{background:#2e9e44;}
.hr_grid_n6{background:#0e9e9e;}
.hr_grid_n7{background:#1283c6;}
.hr_grid_n8{background:#2b5fa8;}
.hr_grid_n9{background:#5b4bb0;}
.hr_grid_n10{background:#8a2bb0;}

/* ===== 商品营销角标（特价/人气/新品/推荐，右上角，多标竖排），口径同主站 ===== */
.sy_mod_f .pic_wrap{position:relative;}
.corner_tags{position:absolute;top:0;right:0;z-index:5;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none;}
.sy_mod_f .pic_wrap .corner_tags .ct{display:inline-block;font-style:normal;font-size:11px;line-height:1;font-weight:600;color:#fff;padding:4px 7px 4px 8px;white-space:nowrap;border-radius:0 0 0 6px;margin-bottom:2px;text-shadow:0 1px 1px rgba(0,0,0,.15);}
.corner_tags .tag_sale{background:linear-gradient(135deg,#ff8f2a,#ff5500);}
.corner_tags .tag_hot{background:linear-gradient(135deg,#ff5252,#e1251b);}
.corner_tags .tag_new{background:linear-gradient(135deg,#26cc7d,#0fa95f);}
.corner_tags .tag_rec{background:linear-gradient(135deg,#4f8fff,#2f6be0);}