.notebook-group{
    max-width: 640px;
    margin: 0 auto;
    color: #000;
    padding: 20px;
    box-sizing: border-box;
    font-size:13px;
}
.notebook-group .placeholder{
    height: 15px;
}

.notebook-group .notebook-title{
    font-size: 1.2rem;
    font-weight: bold;
}

.notebook-group .notebook-desc{
    margin-top: 10px;
}

.notebook-depot-group, .wx-group, .depot-list-group{
    padding:0 20px;
    box-sizing: border-box;
}

.notebook-depot-group .notebook-depot-item{
    margin-top: 50px;
}

.notebook-depot-item-title{
    font-size: 1rem;
    font-weight: bold;
}

.notebook-depot-group .notebook-depot-item-item{
    /* margin-top: 20px; */
    padding: 20px 20px 30px 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    background: #fff;
}
.notebook-depot-group .notebook-depot-item-desc{
    margin-bottom: 20px;
}

.notebook-depot-group .notebook-depot-item-item img{
    width: 100%;
}
.notebook-depot-item-item .notebook-depot-item-item-brand_name{
    font-size: 1rem;
    font-weight: bold;
    color: #000;
    margin-top:20px;
}
.notebook-depot-item-item .notebook-depot-item-item-name{
    color: #000;
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.notebook-depot-item-item .notebook-depot-item-item-name img{
    width:8px;
}

.notebook-depot-item-line{
    position: relative;
    background: #fff;
}
.notebook-depot-item-item{
    position:absolute;
    top:0;
}
.notebook-depot-item-line a:last-child .notebook-depot-item-item{
    position:unset;
}

.wx-group{
    margin-top: 30px;
    
}
.wx-group .wx-item{
    font-size: 14px;
    text-align: center ;
    color: #fff;
    background: #000;
    padding:2px 16px;
    border:1px solid #e8e8e8;
    border-radius: 5px;
    /* display: inline-block; */
}
.wx-group .wx-item img{
    width: 16px;
    margin-right:5px;
}
.wx-item-txt{
    display: inline-block;
    padding-right:5px;
    font-weight: bold;
}
.wx-item-interval{
    color:#e8e8e8;
}

.depot-list-group{
    margin-top: 20px;
}
.depot-list-group .depot-list-title{
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.depot-list-group .depot-list li{
    background: #f4f4f4;
    margin-bottom: 5px;
    padding:4px 16px;
    box-sizing: border-box;
    border-radius: 5px;
}
.depot-list-group .depot-list a{
    color: #000;
}

.wx-qrcode{
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    left:0;
    top: 0;
    z-index: 99;
}
.wx-qrcode img{
    position: absolute;
    width: 340px;
    /* max-width:340px; */
    margin-left: -170px;
    margin-top: -230px;
    top:50%;
    left: 50%;
}





.notebook-depot-item-line {
    position: relative;
    
    /* overflow: hidden; */
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px; /* 增加透视，增强3D感，减少闪烁 */
}
.notebook-depot-item-item {
    position: absolute;
    
    background: #fff;
    /* border-radius: 12px; */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 20px;
    /* 强制硬件加速，避免渲染闪烁 */
    transform: translateZ(0);
    will-change: transform, opacity, z-index; /* 提前告知浏览器准备动画 */
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1); /* 更顺滑的缓动曲线 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
    transform-origin: center center;
}
/* ========== 滑动动画（优化滑出逻辑，避免残留） ========== */
.slide-out-left {
    transform: translateX(-150%) rotate(-15deg) scale(0.9) !important;
    opacity: 0 !important;
    z-index: 90 !important; /* 滑出时层级最低，完全不遮挡 */
    pointer-events: none; /* 禁用事件，避免交互冲突 */
}
.slide-out-right {
    transform: translateX(150%) rotate(15deg) scale(0.9) !important;
    opacity: 0 !important;
    z-index: 90 !important;
    pointer-events: none;
}
.dragging {
    transition: none !important;
    z-index: 105 !important; /* 拖拽时层级最高 */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important; /* 拖拽时阴影加深，突出 */
}



.banner_body {
    position: relative;
}
.banner_items {
    overflow: hidden;
    position: absolute;
}
.banner_items img {
    display: block;
    float: left;
}
.banner_previous,.banner_next {
    background: url(../imgs/FtCarousel.png?i=988) no-repeat 1px 0;
    height: 80px;
    margin-top: -60px;
    position: absolute;
    top: 50%;
    width: 70px;
    z-index: 3;
}
.banner_previous {
    background-position: -70px 0;
    left: 0;
}
.banner_next {
    right: 0;
}
.banner_btn {
    bottom: 0;
    font-size: 0;
    height: 25px;
    left: 0;
    padding-top: 18px;
    position: absolute;
    text-align: center;
    width: 100%;
}
.banner_btn a{
    display: inline-block;
    height: 8px;
    width: 8px;
    margin: 0 6px;
    overflow: hidden;
    border-radius: 50%;
    background: #999999;
}
.banner_btn .banner_this_btn {
    background: #000000;
}
.actionTd a:hover {
    color: white;
    text-decoration: none;
}
.banner_box {
    overflow: hidden;
    width: 100%;
}
    

.recommend_banner .banner_items{
    height: auto;
}
.banner-group{
    position: relative;
}
.banner-group .banner_body{
    overflow: hidden;
}
.banner-group, .banner-group .banner_body, .banner-group .banner_body img{
    /* width: 300px; */
    height: 400px;
}
.banner-group{
    margin:40px auto;
}

.banner-group .banner_previous,  .banner-group .banner_next{
    width: 40px;
    height: 40px;
    margin-top: -50px;
}
.banner-group .banner_previous{
    left:-50px;
    background: url("/res/imgs/icon_left.png") no-repeat;
    background-size: 100% 100%;
}
.banner-group .banner_next{
    right:-50px;
    background: url("/res/imgs/icon_right.png") no-repeat;
    background-size: 100% 100%;
}
.banner-group .banner_body .banner_previous, .banner-group .banner_body .banner_next{
    display: none;
}