.pt10{padding-top: 10px;}
.pb10{padding-bottom: 10px;}
.mt20{margin-top: 20px;}
.mt30{margin-top: 30px;}


/* 3. 调整两者之间的间距和对齐 */
.navbar-addon a {
    margin-left: 15px !important; /* 图标变大后，间距也要相应增加 */
    display: inline-flex;         /* 使用 flex 布局让对齐更完美 */
    align-items: center;
}

/* 1. 放大头像图片 */
.navbar-addon img {
    width: 32px !important;    /* 原代码是 20px，这里增加到 32px */
    height: 32px !important;   /* 确保长宽一致 */
    margin-bottom: 0px !important; /* 取消原本的下边距，防止上下不居中 */
    vertical-align: middle;    /* 垂直对齐 */
    border-radius: 50%;        /* 如果想要更圆润可以保留或开启 */
}

/* 2. 放大购物车图标 */
.navbar-addon i {
    font-size: 32px !important; /* 原代码是 16px，这里显著放大 */
    vertical-align: middle;
}

.index-title{
    margin: 40px auto;
    text-align: center;
}
.index-title .index-title-t{
    position: relative;
    display: inline-block;
    padding: 0 20px;
    font-size: 18px;
    color: #fff;
    background-color: #000000;
}
.index-title .index-title-t.m-line:before,
.index-title .index-title-t.m-line:after{
    content:"";
    position: absolute;
    top: 50%;
    display: block;
    height: 1px;
    background-color: #000000;
    width: 100%;
    z-index: -1;
}
.index-title .index-title-t.m-line:before{  
    left: 50%; 
}
.index-title .index-title-t.m-line:after{
    right: 50%;
}
.index-title .index-title-b{
    margin-top: 8px;
    color: #666;
    font-size: 15px;
}
.index-title .index-title-b span{
    margin: 0 10px;
}
.products-list{
    margin-top: 30px;
}
.products-list .item{
    position: relative;
    box-sizing: border-box;
    padding:5px 10px; 
    font-size: 0;
}
.products-list .item .title{
    margin-top: 10px;
    text-align: center;
}

.products-list .item .title a{
    width: 100%;
    line-height: 1.6;
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.products-list .item .price{
    margin-top: 4px;
    font-size: 16px;
    display: inline-block;
    width: 100%;
    text-align: center;
    line-height: 1.5;
    font-weight: bold;
   
}
.products-list .item .img{
    position: relative;
}
.products-list .item .img .fadein{
    position: absolute;
    display:inline-block;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
}
.products-list .item img{
    width: 100%;
    height: 100%;
}

/* 修改活蟹甄选 (10只)布局样式 */
.hot-product {
    /* height: 747px;  <-- 注释掉或删除这一行 */
    min-height: 747px;   /* 改为最小高度，确保内容多时能自动撑开 */
    height: auto;        /* 允许根据内容高度自适应 */
    padding-bottom: 50px; /* 增加底部内边距，让第二行下方留点空间，更好看 */
    
    margin-top: 50px;
    background: url(../images/pro_bg.jpg) no-repeat center center fixed; /* 建议将 100% 100% 改为 center center */
    background-size: cover; /* 使用 cover 确保背景图在高度变化时依然铺满 */
    display: block;
    overflow: hidden;
}

.hot-product .index-title .index-title-b{
    color: #ffffff;
}
.hot-product .flip>.flip-body>.flip-item{
     box-sizing: border-box;
}
.hot-product .flip>.flip-body>.flip-item .txt{
    text-align: center;
    background-color: #fff;
    width: 100%;
    padding: 10px;
   
}
.hot-product .flip>.flip-body>.flip-item .txt .title{
    width: 100%;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hot-product .flip>.flip-body>.flip-item .txt .price{
    font-weight: bold;
}
.hot-product .flip>.flip-body>.flip-item:hover .title,
.hot-product .flip>.flip-body>.flip-item:hover .price{
    color: #333;
}
.mini-w90 {
    max-width:90%;
    margin: 0 auto;
}
.new-list{
    margin-top: -40px !important;
}
.new-list .item img{
    width: 100%;
    height: 220px;
}
.new-list .item .title{
    width: 100%;
    padding: 20px 0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.new-list .item .info{
    font-size: 12px;
    color: #999;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.new-list .item .more{
    display: inline-block;
    margin-top:20px;
    font-size: 12px;
    cursor: pointer;
}
.footer{
    margin-top: 30px;
}
.footer .footer-t{
    background-color: #333333;
    padding: 40px 10px;
}
.footer .footer-t .footer-t-l span{
    display: block;
    font-size: 14px;
    color: #8b8b8b;
}
.footer .footer-t .footer-t-l .title{
    margin-bottom: 10px;
    font-size: 16px;
}
.footer .footer-t .footer-t-l .title img{
    margin-right: 10px;
}
.footer .footer-t .footer-t-r{
    margin-top: 10px;
    text-align: right;
}
.footer .footer-t .footer-t-r div{
    display: inline-block;
     width: 85px;
    font-size: 14px;
    color: #8b8b8b;
    overflow: hidden;
    text-align: center;
    margin-left: 20px;
}
.footer .footer-t .footer-t-r div img{
    width: 85px;
    height: 85px;
}
.footer .footer-t .footer-t-r div span{
    width: 100%;
}
.footer .footer-b{
    background-color: #252525;
    padding: 15px 0;
    text-align: center;
    font-size: 14px;
    color: #777777;
}
.footer .footer-b p a{
    color: #777777;
}
.page {
	width: 100%;
    text-align: center;
	height: auto;
	overflow: hidden;
	padding-top: 30px;
}
.pageList {
    overflow: hidden;
}
.pageList ul{
    padding: 0;
}
.pageList ul li {
	line-height: 30px;
	display:inline-block;
	margin: 0 2px;
	text-align: center;
    font-size: 0;
}
.pageList ul li a {
	background: #efefef;
	color: #646464;
	padding: 4px 10px;
	border: 1px solid #d3d3d3;
    font-size: 16px;
}
.pageList ul li a.selected, .page ul li a:hover {
	background-color: #333333;
    border: 1px solid #333333;
	color: #FFFFFF;
}
.pageList ul li a.disable {
    color: #cfcdcd;
    pointer-events:none;
}

.news-list .item{
   margin-bottom: 40px;
}
.news-list .item:last-child{
    margin-bottom: 0;
}
.news-list .item .img{
    padding-top: 0;
    padding-bottom: 0;
}

.news-list .item .img img{
    width: 100%;
    height:220px;
}
.news-list .item .txt{
 padding-top: 0;
 padding-bottom: 0;
}
.news-list .item .txt .title{
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
}
.news-list .item .txt .desc{
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 10px;
    font-size: 14px;
    color: #999;
    line-height:1.8;
}
.news-list .item .txt .time{
    margin-top: 10px;
    font-size: 14px;
    color: #999;
}

.site-nav{
    font-size: 14px;
    padding:15px 10px;
    color: #999;
}
.site-nav a{
   color: #999;
}
.detail-main{
    padding: 30px;
}
.detail-main .title{
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.3;
}
.detail-main .article-info{
    font-size: 14px;
    color: #999;
}
.detail-main .article-info span{
    margin-right: 10px;
}

.detail-main .article-con{
    margin-top: 20px;
}
.detail-main .article-con img{
    max-width: 100%;
}
.detail-main .article-paeg{
    margin-top: 30px;
}
.detail-main .article-paeg a{
    color: #999;
}

.detail-right{
    padding:15px;
}

.detail-right .title{
    width: 100%;
    border-bottom: 1px solid #eee;
}
.detail-right .title span{
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    padding:0 10px 10px 10px;
}

.detail-right .hot-list .item{
    display: flex;
    margin-top: 20px;
}
.detail-right .hot-list .item .item-l{
    width: 80px;
    height: 45px;
    margin-right: 10px;
}
.detail-right .hot-list .item .item-r .tit{
    font-size: 14px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.detail-right .hot-list .item .item-r .tit a{
    width: 100%;
    display: block;
    white-space:nowrap;
    overflow:hidden; 
    text-overflow:ellipsis;
}
.detail-right .hot-list .item .item-l img{
    width: 80px;
    height: 100%;
}
.detail-right .hot-list .item .item-r{
    flex: 1;
    width: 166px;
}
.detail-right .hot-list .item .item-r .num{
    font-size: 12px;
    color: #999;
}
.detail-right .prohot-list .item .img{
    display: block;
    width: 100%;
    height:auto;
    overflow: hidden;
}
.detail-right .prohot-list{
    margin-top: 20px;
}
.detail-right .prohot-list .item{
    margin-bottom: 10px;
}
.detail-right .prohot-list .item .img img{
    width: 100%;
    height: 100%;
}
.detail-right .prohot-list .item .txt {
    margin-top: 6px;
}
.detail-right .prohot-list .item .txt .tit a{
    width: 100%;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    font-size: 14px;
    color: #666;
}
.detail-right .prohot-list .item .txt .price{
    width: 100%;
    display: block;
    font-size: 16px;
    text-align: center;
    line-height:1;
    color: #999;
}

.detail-pro{
    padding: 15px;
}

.pro-imgbox{
    width:100%;
    overflow: hidden;
}
.pro-imgbox .tb-pic a{
    display:inline-block;
    text-align:center;
    vertical-align:middle;
 }
.pro-imgbox .tb-pic a img{
    vertical-align:middle;
 }
.pro-imgbox .tb-thumb{
    margin-top:10px;
    overflow:hidden;
    padding: 0;
}
.pro-imgbox .tb-thumb li{
    float:left;
    margin-right:8px;
    margin-bottom: 10px;
    overflow:hidden;
    border: 2px solid #fff;
}
.pro-imgbox .tb-thumb li:last-child{
    margin-right: 0;
}
.pro-imgbox .tb-thumb li:nth-child(5n+0){
    margin-right: 0;
}
.pro-imgbox .tb-s310 a{
    height:auto;
    width:100%;
}
.pro-imgbox .tb-s310, 
.pro-imgbox .tb-s310 img{
    height:auto;
    width:100%;
 }
.pro-imgbox .tb-s40, 
.pro-imgbox .tb-s40 a{
    height:70px;
    width:70px;
}
.pro-imgbox .tb-s40, 
.pro-imgbox .tb-s40 a img{
    height:100%;
    width:100%;
}
.pro-imgbox .tb-booth{
    border:0px solid #CDCDCD;
    position:relative;
    z-index:1;
}
.pro-imgbox .tb-thumb .tb-selected{
     border: 2px solid #000;
}


div.zoomDiv{
    z-index:999;
    position:absolute;
    top:0px;
    left:0px;
    width:200px;
    height:200px;
    background:#ffffff;
    border:1px solid #CCCCCC;
    display:none;
    text-align:center;
    overflow:hidden;
 }
div.zoomMask{
    position:absolute;
    background:url(../images/mask.png) repeat scroll 0 0 transparent;
    cursor:move;
    z-index:1;
}

.pro-infobox{
    padding: 10px 10px 0 30px;
}
.pro-infobox .w-lable{
    width: 50px;
}
.pro-infobox .pro-title{
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 15px;
}
.pro-infobox .pro-desc{
    font-size: 14px;
    color: #999;
    line-height: 1.5;
}
.pro-infobox .pro-type{
    margin-top: 20px;
}

.pro-infobox  .pro-item{
    display: flex;
    font-size: 14px;
    align-items: center;
}
.pro-infobox  .pro-item-l{
    color: #999;
}
.pro-infobox  .pro-item-r{
    flex: 1;
}

.pro-infobox .pro-price{
    margin-top: 20px;
    align-items: center;
}
.pro-infobox .pro-price .pro-item-r{
    font-size: 30px;
    font-weight: bold;
    color: #000;
}
.pro-infobox .pro-type .type-tags {
  margin-top: 10px;
}
.pro-infobox .pro-type .type-tags .type-tag {
  display: inline-block;
  margin: 3px 0;
  text-align: center;
  padding: 0 12px;
  line-height: 30px;
  box-sizing: border-box;
  border: solid 1px #e5e5e5;
  color: #333333;
  margin-right: 12px;
  cursor: pointer;
}
.pro-infobox .pro-type .type-tags .btn-selected.btn-danger {
  border: solid 1px #000;
  background-color: #000;
  color: #fff;
}
.pro-infobox .pro-type .type-tags .btn-selected:hover {
  color: #fff;
  background-color: #000;
  border-color: #e4eaec;
}
.pro-infobox .pro-type .type-tags .type-tag.disabled {
  color: #999999;
  border-style: dashed;
  cursor: not-allowed;
}
.pro-infobox .pro-type .type-tags > div {
  display: table-cell;
}
.pro-infobox .pro-type .type-tags .type-name {
  line-height: 30px;
}

.pro-infobox .pro-quantity{
    margin-top: 20px;
}

.pro-infobox .pro-quantity .pro-item-r{
    display: flex;
}
.pro-infobox .pro-quantity .pro-item-r .minus,
.pro-infobox .pro-quantity .pro-item-r .plus{
   border: 1px solid #e8e8e8;
   background: none;
   height: 40px;
   width: 40px;
}
.pro-infobox .pro-quantity .pro-item-r .input_num{
   border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
   border-left: none;
   border-right:none;
   background:#fff;
   height: 40px;
   width: 40px;
   text-align: center;
}
.pro-infobox .pro-btns{
    margin-top:30px;
}
.pro-infobox .pro-btns{
    font-size: 0;
}
.pro-infobox .pro-btns .oper-bt{
    font-size: 14px;
    display: inline-block;
    color: #fff;
    padding: 10px 20px;
    border-radius: 0 !important;
    border: 0 !important;
}
.pro-infobox .pro-btns .oper-bt.bt1{
    background-color:#000;
    margin-right: 10px;
}
.pro-infobox .pro-btns .oper-bt.bt2{
    background-color:#11b396;
}

.product-tab {
   width: 100%;
}

.product-tab .nav.nav-tabs {
    border-bottom: solid 0px #ddd;
    border-top: solid 1px #ddd;
}
.product-tab .nav.nav-tabs>li>a{
    border-radius: 0;
    color: #000;
   
}
.product-tab .nav.nav-tabs>li.active>a{
    border:1px solid #fff;
    border-top: 2px solid #000;
     font-weight: bold;
     color: #000;
       border-radius: 0;
}
.product-tab .nav.nav-tabs>li>a{
    border:1px solid #fff;
    color: #666;
}
.product-tab .nav.nav-tabs>li:not(.active):hover>a{
    border-color: #fff;
}
.product-content img{
    max-width: 100%;
}
.product-content .pro-spec{
    font-size: 14px;
    color: #666;
}
.about{
    margin-top: 20px;
}
.about .about-l img{
    max-width: 100%;
}
.about .about-r p{
    font-size: 14px;
    color: #666;
}
.header-banner{
    text-align: center;
    width: 100%;
    height:250px;
    background:#555555 no-repeat center center;
}
.header-banner .banner-txt{
    display: inline-block;
    padding: 10px 0;
    color: #fff;
    font-size:26px;
    border-bottom: 2px solid #fff;
    margin-top: 80px;
}
    

@media only screen and (max-width: 992px) {
    .navbar-addon i {
        font-size: 24px;  /* 移动端稍小一点 */
    }
}

/* 针对手机和平板端（屏幕宽度小于 992px）的修正 */
@media only screen and (max-width: 992px) {
    /* 1. 强制容器高度自适应，撑开以显示所有 4 行产品 */
    .hot-product {
        height: auto !important;       /* 撤销固定高度 */
        padding-top: 40px !important;  /* 增加顶部间距 */
        padding-bottom: 40px !important; /* 增加底部间距，防止产品贴底 */
        background-size: cover !important; /* 背景图铺满 */
    }

    /* 2. 修正手机端产品块的间距，防止上下重叠 */
    .hot-product .products-list .item {
        margin-bottom: 20px !important; /* 每行产品之间留出间距 */
    }

    /* 3. 调整手机端文字块高度，确保文字不溢出 */
    .hot-product .flip-item .txt {
        height: auto !important;
        min-height: 60px;
    }
}

@media only screen and (max-width: 992px){
    .w-container.fixed{
       position: fixed;
       top: 0;
       width: 100%;
       z-index: 999999;
       background-color: #fff;
    }
    body{
        padding-top: 64px;
    }
   .hot-product{
       background: url(../images/pro_bg.jpg) no-repeat left center;
       height: 652px;
   }
   .new-list .item img{
       height: auto;
   }
   .news-list .item .img img{
      height: auto;
   }
   .footer .footer-t{
       background-color: #333333;
       padding: 20px 10px 10px;
   }
   .footer .footer-t .footer-t-r{
       text-align: center;
   }
   .detail-main{
       padding: 0;
   }
   .detail-right{
       padding: 0;
   }
   .detail-pro{
       padding: 0;
   }
   .pro-infobox{
       padding: 0;
   }
   div.zoomDiv{
       display: none !important;
   }
   div.zoomMask{
       display: none !important;
   }
   .pro-imgbox .tb-s40, 
   .pro-imgbox .tb-s40 a{
       height:56px;
       width:56px;
    }
    .detail-right .prohot-list .item .img{
        height: auto;
    }
    .detail-right .prohot-list .item .txt .tit a{
        font-size: 16px;
    }
    .header-banner{
        display: none;
    }
    .site-nav{
        padding: 10px 10px 0;
    }

}
@media (min-width: 1024px) {
    .pc-bor{
        border: 1px solid #eee;
    }
    .news-detail .news-detail-l{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
     .news-detail .news-detail-r{
         padding-right: 0 !important;
     } 
     .detail-main .article-paeg div:nth-child(2){
         text-align: right;
     }
     .detail-right .prohot-list .item .img{
         height: auto;
     }
     .list-title{
         display: none;
     }
}
@media (min-width: 1280px) {
    .w-container {
        max-width: 1200px;
        margin: 0 auto;
    }
    .index-title{
        margin: 70px auto;
    }
    .products-list .item .title a{
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .pro-imgbox .tb-s310, .pro-imgbox .tb-s310 a{
        height:400px;
        width:400px;
     }
    .pro-imgbox .tb-s310, .pro-imgbox .tb-s310 img{
        height:400px;
        width:400px;
    }
    .detail-right .prohot-list .item .img{
        height: 152px;
    }
    .product-content{
        padding: 20px;
    }
    .list-title{
        display: none;
    }
    
}




.text-center {text-align:center}
.margin {margin:10px!important;clear:both}
.margin-top {margin-top:10px}
.margin-right {margin-right:10px}
.margin-bottom {margin-bottom:10px}
.margin-left {margin-left:10px}
.blank-small{height:20px;line-height:20px;clear:both;font-size:0}
.blank-middle{height:30px;line-height:30px;clear:both;font-size:0}
.blank-big{height:50px;line-height:50px;clear:both;font-size:0}
.blank-large{height:80px;line-height:80px;clear:both;font-size:0}


.field {position:relative}
.form-group {padding-bottom:10px}
.field-icon .input{text-indent:25px}
.field-icon .icon {position:absolute;top:0;left:0;right:auto;width:34px;height:50px;text-align:center;line-height:50px;font-size:16px;font-weight:normal}
.field-icon-right .icon {position:absolute;right:0;top:0;width:34px;height:34px;text-align:center;line-height:34px;font-size:16px;font-weight:normal}

.qita_z{font-size:14px;color: #6E6E6E;}
.qita_z span:hover{color: #1bc8a6!important;cursor: pointer;}

.register .tab{font-size:0}
.register .tab li{cursor:pointer;display:inline-block;position:relative;font-size:20px;width:60px;color:#666;margin:0 0 40px 0}
.register .tab li::before{background:#ccc;content:'';position:absolute;bottom:-10px;left:0;width:100%;height:3px;border-radius:3px;transition:transform .3s;}
.register .tab li.cur{color:#0a8}
.register .tab li.cur::before{background:#0a8;content:'';position:absolute;bottom:-10px;left:0;width:100%;height:3px;border-radius:3px;transition:transform .3s;}

.register .line{margin:0px;padding:0;position: relative; text-align: center;}
.register .line span{display: inline-block;font-size: 14px; padding: 0 20px; position: relative; z-index: 200;background-color: #f5f5f5!important;}
.register .line hr{-moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #E2E2E2 -moz-use-text-color -moz-use-text-color; border-image: none; border-style: solid none none; margin-top:10px; position: absolute; top:0; width: 100%;}

.register .line hr {background:#EBEBEB;color:#EBEBEB;clear:both;float:none;width:100%;height:1px;margin:10px 0;border:0;-moz-box-sizing:content-box;box-sizing:content-box;}
.register .bnt-login{margin:0 auto;text-align:center}
.register .bnt-login span{display:inline-block;color:#fff;font-size:22px;width:48px;height:48px;text-align:center;line-height:48px;margin-right:10px;border-radius:30px}
.register .bnt-login span:hover{opacity:0.8;cursor: pointer;}
.register .bnt-login span.weixin{background:#38B624}
.register .bnt-login span.qq{background:#1F92DF}
.register .bnt-login span.weibo{background:#FF6000}
.button.bg-yellow{color: #fff!important;background:#0a8;}
.button.bg-yellow:hover{color: #fff!important;border-color: #1bc8a6!important;background-color: #1bc8a6!important;}

/* 注册登录切换 end*/

 /* 弹出层*/

.dialog {border-radius:0;border:0 solid #ebebeb;margin:0 auto;box-shadow:0 10px 25px rgba(0,0,0,0.3);}
.dialog .dialog-head {font-size:18px;border-bottom:0;background:#FFF;color:#383838;}
.dialog .dialog-head .close {float:right;line-height:24px}
.dialog .dialog-body{padding:10px 40px 40px 40px;}
.dialog .dialog-body .icon-close{right: 1rem;top: 1rem;color: #101010;position: absolute;font-size: 2rem;cursor: pointer;font-style: normal;font-weight: 100;line-height: .85;margin-left: -0.5em;border-radius: 50%;}
.dialog-body h3 {font-size:24px;font-weight:600;color:#333;margin-bottom:10px}
.dialog-body .form-group {padding-bottom:20px}
.dialog-body .input{height:48px;line-height:24px;padding:0 12px;border:1px solid #ebebeb;width:100%;display:block;border-radius:0px;-webkit-appearance:none;box-shadow:0 0px 0px rgba(0,0,0,0.0) inset;background:transparent;}
.dialog-body .textarea {padding:10px 12px;line-height:24px;width:100%;background:transparent;border:1px solid #ebebeb;}
.dialog-body .label {padding-bottom:10px;display:block;line-height:24px;}
.dialog-body .label label {font-weight:400;}
.dialog-body select {padding:0 30px 0 8px;color:#ADADAD;border-radius:0px;width: 100%; height:48px;line-height:48px;border:solid 1px #ebebeb;appearance:none;-moz-appearance:none;-webkit-appearance:none;background:url(../images/select-down.png) no-repeat right 50%;}
.dialog-body .form-tips .dialog-body .input-help ul {border:solid 0px #ebebeb;background:#fff;padding:5px 10px;box-shadow:0 0 0 #fff;border-radius:0 0 4px 4px;width:150px;min-width:150px;width:auto;_width:150px;color:#EE3333;font-size:12px}
.dialog-body .input::-webkit-input-placeholder, .dialog-body .textarea::-webkit-input-placeholder {color: #6E6E6E;}
.dialog-body .input:-moz-placeholder, .dialog-body .textarea:-moz-placeholder {color: #6E6E6E;}
.dialog-body .input::-moz-placeholder, .dialog-body .textarea::-moz-placeholder {color: #6E6E6E;}
.dialog-body .input:-ms-input-placeholder, .dialog-body .textarea:-ms-input-placeholder {color: #6E6E6E;} 
.dialog-body .input-group .addon {background-color:#fff;border:0px solid #EBEBEB;border-radius:0px;line-height:1;padding:0;text-align:center}
.dialog-body .input-group .addon img{max-height:50px}
 /* 弹出层 end*/
 
 /* 登入后状态 */
 .log-in{position:absolute;top:29px;right:5px}
 .log-in .drop-menu {margin:12px 0 0;min-width:100px;border-radius:5px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.075); box-shadow:0 6px 12px rgba(0,0,0,.075) }
 .log-in .drop-menu li{padding: 0 10px;height: 32px;text-align: center;}
 .log-in .drop-menu li a{position: relative;height: 32px;line-height: 32px;}
 .log-in .drop-menu li a:hover,.drop-menu a:focus {color:#2D2D2D;background: unset;}
 .log-in .button-group span {display:inline-block;line-height:24px;height:24px;width:24px}
 .log-in .button-group ul:before {position:absolute;top:-8px;left:50px;display:inline-block;border-right:8px solid transparent;border-bottom:8px solid #fff;border-left:8px solid transparent;content:'';}
 .log-in .button-group ul:after {position:absolute;top:-8px;left:50px;display:inline-block;border-right:8px solid transparent;border-bottom:8px solid #e9e8e8;border-left:8px solid transparent;content:'';}
 .log-in .button-group .button {padding:0;line-height:18px;font-size:20px}
 .log-in .button-group .drop-menu {padding: 10px 0; left: -40px;border-top:0px solid #ff0000;-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,.075);box-shadow: 0px 8px 10px rgba(0,0,0,.05);border-radius:4px;}
 .log-in a.user-ico{width:32px;height:32px;line-height:32px;background:#ECEFF5;display:block;}
 .log-in a.user-head{width:32px;height:32px;overflow:hidden;display:block;}
 .log-in a.user-head img{width:32px;height:32px;}
 
 /* ============================================================
   EyouCMS 导航栏右侧图标垂直居中对齐专用样式
   ============================================================ */

/* 1. 目标父容器：强行开启 Flex 布局并设置垂直居中 */
#nav-auto .navbar-addon {
    display: flex !important;       /* 开启 Flexbox 布局 */
    align-items: center !important;  /* **关键：子元素垂直居中对齐** */
    justify-content: flex-end;      /* 如果需要图标靠右对齐 */
    height: 100%;                   /* 确保容器高度填满导航栏 */
}

/* 2. 统一调整子元素（<a> 标签）的行高和布局，防止干扰 */
#nav-auto .navbar-addon a {
    display: flex !important;       /* 让 <a> 内部也开启 flex */
    align-items: center !important;  /* 内部图标/图片垂直居中 */
    height: auto !important;
    line-height: 1 !important;      /* 取消行高干扰 */
    margin-left: 20px !important;   /* 增加图标之间的间距 */
    text-decoration: none;
    margin-top: 0 !important;       /* 清除可能存在的上边距 */
    margin-bottom: 0 !important;    /* 清除可能存在的下边距 */
}

/* 3. 头像图片样式（微调尺寸和边距） */
#nav-auto .navbar-addon img {
    width: 35px !important;         /* 设定统一宽度 */
    height: 35px !important;        /* 设定统一高度 */
    border-radius: 50%;             /* 圆形头像 */
    object-fit: cover;               /* 确保图片不拉伸 */
    display: block;
    margin: 0 !important;           /* **关键：清除所有边距干扰** */
}

/* 4. 购物车图标样式（微调尺寸和边距） */
#nav-auto .navbar-addon i {
    font-size: 30px !important;     /* 设定统一图标大小 */
    display: block;
    margin: 0 !important;           /* **关键：清除所有边距干扰** */
    width: auto;
    height: auto;
}

/* 主导航菜单文字大小 */
.navbar-body .nav > li > a {
    font-size: 18px;   /* 默认大小，可以改为 14px、18px 等 */
}

/* 移动端主导航菜单文字大小 */
@media only screen and (max-width: 992px) {
    .navbar-body .nav > li > a {
        font-size: 16px;
    }
}

/* 强制显示产品名称和价格 */
.hot-product .flip-item .txt {
    position: relative !important;
    display: block !important;
    height: auto !important;      /* 撤销可能存在的高度限制 */
    min-height: 70px !important;  /* 给名称留出足够的垂直空间 */
    background: #fff !important;  /* 确保背景是纯白色，衬托文字 */
    opacity: 1 !important;        /* 确保透明度是 100% */
    visibility: visible !important;
    overflow: visible !important;
}

.hot-product .flip-item .txt .title {
    font-size: 14px !important;
    color: #333 !important;       /* 强制文字为深灰色 */
    line-height: 1.4 !important;
    height: auto !important;
    white-space: normal !important; /* 允许换行，防止名字太长被裁掉 */
    padding: 8px 5px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;        /* 最多显示两行，多了打省略号 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 针对手机端的特殊加固 */
@media only screen and (max-width: 992px) {
    .hot-product .flip-item .txt {
        margin-top: -1px;         /* 消除图片和文字块之间的细微白缝 */
    }
}

/* 统一修改产品价格样式 */
.price {
    color: #ff0000 !important;   /* 强制显示红色 */
    font-weight: bold !important; /* 强制加粗 */
    font-size: 30px;             /* 可选：适当调大价格字号 */
}

<style>
/* 默认 CSS (PC 端和模板通用) */
.news-media-wrap {
    position: relative;
    overflow: hidden;
}
.mobile-overlay-info {
    display: none; /* PC端默认隐藏蒙层 */
}

/* ============================================================
   针对手机移动端 (max-width: 768px) 的特殊优化
   ============================================================ -->
@media (max-width: 768px) {
    /* --- 1. 通用间距控制 --- */
    .news-item-box {
        margin-bottom: 10px !important; /* 紧凑的新闻条目间距 */
        padding-bottom: 5px !important;
        border-bottom: 1px solid #f2f2f2;
    }
    .news-item-box:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
    }

    /* --- 2. 隐藏 PC 端文字区域 --- */
    .news-item-box .pc-text-area {
        display: none !important;
    }

    /* --- 3. 图片容器默认隐藏 (实现第2条往下不显示图片) --- */
    .news-item-box .news-img-container {
        display: none !important;
    }

    /* ============================================================
       核心逻辑：仅针对第一条新闻 (:first-child)
       ============================================================ */
    
    /* 1. 让第一条新闻显示图片容器 */
    .news-item-box:first-child .news-img-container {
        display: block !important;
        margin-bottom: 0 !important;
    }

    @media (max-width: 768px) {
    /* 1. 强制第一条新闻的容器变为长方形 */
    .news-item-box:first-child .news-media-wrap {
        display: block !important;
        width: 100% !important;
        /* 强制 2:1 的长方形比例，你可以根据喜好改为 16/9 */
        aspect-ratio: 2 / 1 !important; 
        position: relative !important;
        overflow: hidden !important; /* 必须隐藏超出比例的部分 */
        border-radius: 4px;
    }

    /* 2. 核心：强制图片填满容器且不变形 */
    .news-item-box:first-child .news-img-container,
    .news-item-box:first-child .news-img-container a,
    .news-item-box:first-child .news-img-container img {
        width: 100% !important;
        height: 100% !important; /* 强制高度填满长方形容器 */
        display: block !important;
        object-fit: cover !important; /* 就像手机壁纸一样，自动裁切多余部分，保证不变形 */
    }

    /* 3. 隐藏其他条目的图片 */
    .news-item-box:not(:first-child) .news-img-container {
        display: none !important;
    }

    /* 4. 蒙层文字样式微调 */
    .news-item-box:first-child .mobile-overlay-info {
        display: flex !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%) !important;
        padding: 20px 12px 10px !important;
        justify-content: space-between !important;
        align-items: center !important;
        z-index: 5 !important;
    }
}
    
    /* 确保图片铺满长方形容器且不拉伸 */
    .news-item-box:first-child .news-img-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* 裁切铺满 */
    }

    /* 3. 显示并激活半透明蒙层文字 */
    .news-item-box:first-child .mobile-overlay-info {
        display: flex !important; /* 激活 Flex 布局，实现左右对齐 */
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        
        /* 关键：半透明黑色背景 (rgba) */
        background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0)); /* 渐变蒙层，比纯色更高级 */
        /* 或者使用纯色蒙层: background-color: rgba(0,0,0,0.6) !important; */
        
        padding: 15px 12px 10px !important; /* 蒙层内边距 */
        justify-content: space-between; /* 关键：标题靠左，查看靠右 */
        align-items: center;
        z-index: 5;
    }

    /* 蒙层左侧标题样式 */
    .news-item-box:first-child .overlay-title {
        color: #ffffff !important; /* 白色文字 */
        font-size: 16px !important;
        font-weight: bold;
        flex: 1; /* 占据剩余空间 */
        margin-right: 15px; /* 与右侧保持间距 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; /* 单行截断 */
    }

    /* 蒙层右侧查看样式 */
    .news-item-box:first-child .overlay-more {
        color: rgba(255,255,255,0.8) !important; /* 次级白色文字 */
        font-size: 14px !important;
        white-space: nowrap; /* 防止换行 */
        border: 1px solid rgba(255,255,255,0.4); /* 可选：加个小边框，像个按钮 */
        padding: 3px 8px;
        border-radius: 4px;
    }

    /* ============================================================
       特殊处理：第2条往下 (文字列表模式)
       ============================================================ */
    
    /* 针对手机端非第一条新闻，重新显示标题 */
    .news-item-box:not(:first-child) .pc-text-area {
        display: block !important;
    }
    
    /* 仅显示标题和 MORE，隐藏简介 */
    .news-item-box:not(:first-child) .pc-text-area .info {
        display: none !important;
    }
    
    /* 缩小标题字号和间距 */
    .news-item-box:not(:first-child) .title {
        font-size: 15px !important;
        margin: 0 !important;
    }
    .news-item-box:not(:first-child) .more {
        display: none !important; /* 可选：列表模式隐藏 MORE */
    }
}
</style>