﻿
.home-title{ height: 68px; background: url(../images/home-title.png) no-repeat center; background-size:cover; margin-top: 20px; padding: 0 20px;}
.home-title h2{ font-weight: normal; font-size: 0.9rem;}
.home-title h2 img{ margin-right: 10px;}

.home-title-right{}
.home-title-right h3{font-weight: normal; font-size: 0.9rem;}
.home-title-right h3 span{ color: red;}
.home-title-right a{ margin-left: 50px;}
.home-title-right a img{ margin-left: 10px;}


.section2{ margin-top: 20px; background: #FFFFFF; padding: 20px; border-radius:12px;}

.home-ms{ width: 316px; height: auto; background: url(../images/homemsbg.jpg) no-repeat center; background-size:cover; border-radius: 6px; padding: 23px;}
.home-ms h4{ font-size: 1rem; line-height: 22px; margin-bottom: 15px;}

.home-ms-list{}

.home-ms-box{
    position: relative;
    width: 280px;              /* 根据设计调 */
    margin: 0 auto;
}

.home-ms-viewport{
    width: 100%;
    /* 给定高度，略大于卡片高度 */
    height: 260px;             /* 自己看效果调整 */
    position: relative;
    overflow: visible;         /* 让后面叠影露出来 */
}

.home-ms-list{
    position: relative;
    width: 100%;
    height: 100%;
}

/* 所有卡片先叠在一起，默认稍微缩小一点 */
.home-ms-item{
    position: absolute;
    left: 50%;
    top: 0;
    width: 100%;
    transform: translateX(-50%) scale(0.95);
    opacity: 0;
    z-index: 1;
    transition: all .4s ease;
    pointer-events: none;
}

/* 当前中间这一张 */
.home-ms-item.ms-current{
    opacity: 1;
    z-index: 3;
    left: 50%;                        /* 居中 */
    transform: translateX(-50%) scale(1);
    pointer-events: auto;
}

/* 右侧叠加（下一张） */
.home-ms-item.ms-next{
    opacity: 0.7;
    z-index: 2;
    left: 60%;                        /* 往右挪一点 */
    transform: translateX(-50%) scale(0.97);
}

/* 左侧叠加（上一张，可要可不要） */
.home-ms-item.ms-prev{
    opacity: 0.4;
    z-index: 1;
    left: 38%;                        /* 往左挪一点 */
    transform: translateX(-50%) scale(0.94);
}


/* 左右半透明点击区域 */
.ms-click-area{
    position: absolute;
    top: 0;
    width: 35%;
    height: 100%;
    cursor: pointer;
    z-index: 10;
    background: transparent;   /* 真正背景透明 */
}

/* 左、右区域（如果你想有很轻微的渐变，可以加上） */
.ms-left{
    left: 0;
}

.ms-right{
    right: 0;
}

/* 默认所有卡片的底部按钮都隐藏 */
.home-ms-item .home-ms-item-bot{
    display: none;
}

/* 只有当前这一层（ms-current）的显示 */
.home-ms-item.ms-current .home-ms-item-bot{
    display: block;
}

.home-ms-item{ width: 80%; margin: 0 auto;}
.home-ms-item-top{ width: 100%; border-radius: 8px; padding: 20px; background:#FFFFFF url(../images/msicon.png) no-repeat left top;}
.home-ms-item-toppic{ width: 100%; text-align: center;}
.home-ms-item-top img{ width: 140px; height: 140px; margin: 20px auto; text-align: center;}
.home-ms-item-top a.redprolinks1{ display: block; color: #111111; height: 24px; line-height: 24px; overflow: hidden; font-weight: bold;}
.home-ms-item-top a.redprolinks1:hover{ color: #F7B327;}
.home-ms-item-top p{ line-height: 22px; height: 22px; overflow: hidden; color: #666666;}
.home-ms-item-top b{ color: red; font-size: 1.3rem; line-height: 26px; margin-top: 10px; display: block;}
.home-ms-item-bot{ margin-top: 22px; text-align: center;}
.home-ms-item-bot a{ display: inline-block; width: 106px; height: 32px; background: url(../images/mslinks.png) no-repeat;}


.home-redpro{ width: 634px; height: auto; background: url(../images/homemsbg.jpg) no-repeat center; background-size:cover; border-radius: 6px; padding: 23px;}
.home-redpro h4{ font-size: 1rem; line-height: 22px; margin-bottom: 15px;}

.home-redpro-list{ width: 100%; gap:3px 45px; grid-template-columns: repeat(2, 1fr); /* 3 列 */  display: grid;}
.home-redpro-list dl{ line-height: 30px;}
.home-redpro-list dl dt{ background: url(../images/red.png) no-repeat left center; padding-left: 25px;}
.home-redpro-list dl dd{ color: red;}

.home-bom{ width: 330px; height: auto; background: url(../images/hombombg.jpg) no-repeat center; background-size:cover; border-radius: 6px; padding: 23px;}
.home-bom h4{ font-size: 1rem; line-height: 22px; margin-bottom: 15px;}
.home-bom-list{gap: 15px; grid-template-columns: repeat(1, 1fr); /* 3 列 */  display: grid;}
.home-bom-list dl{ width: 100%; height: 46px; background: #FFFFFF; border-radius:6px; padding: 0 15px;}
.home-bom-list dl dt{ width: 60px;}
.home-bom-list dl dd{ width: calc(100% - 60px);}
.home-bom-list dl dd input{ width: 100%; height: 46px; line-height: 46px; border: none;}
.home-bom-list button{ width: 100%; color: #FFFFFF; background: linear-gradient( 180deg, #F7B327 0%, #FE8B3B 100%); border-radius:6px; border: none; height: 46px; line-height: 46px; font-size: 1rem;}
