/* 按钮样式 */
.try-btn {
    display: inline-block;
    padding: 10px 25px;
    background: #FF8533;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    margin-top: 60px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.try-btn:hover {
    background: #FF6B00;
    color: #fff;
}
/*无序列表样式*/
.type-new li {
  margin-bottom: 0.3em;
  position: relative;
  padding-left: 20px;
  line-height: 1.5;
}

.type-new li::before {
  content: "•";
  color: #DDDDDD;
  position: absolute;
  left: 0;
  font-size: 1.5em;
  top: 50%;
  transform: translateY(-50%);
}

/* 特色功能区样式 */
.feature-section {
    padding: 60px 0;
}

/* 标签导航样式 */
.feature-tabs .tab-nav {
    display: flex;
    justify-content: center;
    margin: 30px 0 0;
    border-bottom: 1px solid #e5e5e5;
}

.feature-tabs .tab-nav li {
    padding: 12px 30px;
    margin: 0 10px;
    cursor: pointer;
    position: relative;
    color: #666;
    font-size: 16px;
}

.feature-tabs .tab-nav li.active {
    color: #2A5B9E;
}

.feature-tabs .tab-nav li.active:after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: #2A5B9E;
}

/* 内容区域样式 */
.tab-content {
    background: #fff;
    padding: 50px 0px;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: 0px;
    position: relative;
    overflow: hidden;
}

.tab-content .tab-pane {
    display: none;
}

.tab-content .tab-pane.active {
    display: block;
}

/* 内容布局样式 */
.feature-tabs .content-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    gap: 10px;
}

.feature-tabs .text-content {
    flex: 0 0 50%;
    max-width: 50%;
    text-align: left;
    margin-right: 10px; 
}

.text-content h4 {
    font-size: 24px;
    margin-bottom: 30px;
    color: #333;
}

.text-content p {
    font-size: 16px;
    line-height: 1.5;
    color: #666;
    margin-bottom: 30px;
}

.feature-btn {
    display: inline-block;
    padding: 10px 30px;
    background: #FF8533;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.feature-btn:hover {
    background: #FF6B00;
    color: #fff;
}

.feature-tabs .image-content {
    flex: 0 0 40%;
    max-width: 40%;
    display: flex;
    justify-content: flex-start;
}

.feature-tabs .image-content img {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

/* 应用场景样式 */
.application-scene {
    padding: 60px 0;
}

.scene-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.scene-item {
    width: 280px;
    height: 320px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.scene-normal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 30px;
    box-sizing: border-box;
    background: #fff;
    transition: all 0.3s ease;
}
    
.scene-hover {
    position: absolute;
    top: -4%;
    left: 0;
    width: 100%;
    height: 110%;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow:0px 0px 10px rgba(0, 0, 0, 0.4);
}

.scene-normal {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.scene-normal .icon {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
}

.scene-normal .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.scene-normal h4,
.scene-hover h4 {
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
}

.divider {
    display: inline-block;
    width: 100%;
    height: 1px;
    background: #cccccc;
    margin-top: 15px;
    margin-bottom: 30px;
}

.scene-normal p,
.scene-hover p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.scene-hover {
    opacity: 0;
    background: #2A5B9E;
    transform: translateY(10px);
}

.scene-hover .hover-img {
    width: 100%;
    height: 140px;
    margin-bottom: 10px;
}

.scene-hover .hover-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.scene-hover h4,
.scene-hover p {
    color: #fff;
    text-align:center;
}

.scene-hover .divider {
    background: #fff;
    height: 1px;
}

/* 悬停效果 */
/* 默认第一个块的active状态 */
.scene-list .scene-item.active {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.scene-list .scene-item.active .scene-normal {
    opacity: 0;
    transform: translateY(-10px);
}

.scene-list .scene-item.active .scene-hover {
    opacity: 1;
    transform: translateY(0);
}

/* 所有块的hover效果 */
.scene-list .scene-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.scene-list .scene-item:hover .scene-normal {
    opacity: 0;
    transform: translateY(-10px);
}

.scene-list .scene-item:hover .scene-hover {
    opacity: 1;
    transform: translateY(0);
}

/* 悬停效果 */
/* active和hover-active状态的共同样式 */
.scene-list .scene-item.active,
.scene-list .scene-item.hover-active {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.scene-list .scene-item.active .scene-normal,
.scene-list .scene-item.hover-active .scene-normal {
    opacity: 0;
    transform: translateY(-10px);
}

.scene-list .scene-item.active .scene-hover,
.scene-list .scene-item.hover-active .scene-hover {
    opacity: 1;
    transform: translateY(0);
}

/* 所有块的hover效果 */
.scene-list .scene-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.scene-list .scene-item:hover .scene-normal {
    opacity: 0;
    transform: translateY(-10px);
}

.scene-list .scene-item:hover .scene-hover {
    opacity: 1;
    transform: translateY(0);
}

/* 当有块hover时，其他所有块回到normal状态 */
.scene-list .scene-item:hover ~ .scene-item,
.scene-list .scene-item:hover ~ .scene-item.active {
    transform: translateY(0);
    box-shadow: none;
}

.scene-list .scene-item:hover ~ .scene-item .scene-normal,
.scene-list .scene-item:hover ~ .scene-item.active .scene-normal {
    opacity: 1;
    transform: translateY(0);
}

.scene-list .scene-item:hover ~ .scene-item .scene-hover,
.scene-list .scene-item:hover ~ .scene-item.active .scene-hover {
    opacity: 0;
    transform: translateY(10px);
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
    .feature-tabs .tab-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 0;
        margin: 20px 0 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .feature-tabs .tab-nav::-webkit-scrollbar {
        display: none;
    }
    
    .feature-tabs .tab-nav li {
        flex: 0 0 auto;
        padding: 10px 15px;
        margin: 0 5px;
        font-size: 14px;
        white-space: nowrap;
    }

    .feature-tabs .tab-nav li:first-child {
        margin-left: 15px;
    }

    .feature-tabs .tab-nav li:last-child {
        margin-right: 15px;
    }

    .feature-tabs .content-wrap {
        flex-direction: column;
        gap: 30px;
    }
    
    .feature-tabs .text-content,
    .feature-tabs .image-content {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .feature-tabs .text-content {
    margin-right: 0px; 
    }
    
    .feature-tabs .image-content {
        justify-content: center;
    }
    
    .feature-tabs .image-content img {
        max-width: 300px;
    }

    /* 移动端场景块样式调整 */
    .scene-item {
        width: calc(50% - 10px);
        height: 300px;
    }
    
    .scene-normal,
    .scene-hover {
        padding: 20px;
    }

    /* 移动端禁用hover效果 */
    .scene-list .scene-item:hover,
    .scene-list .scene-item.hover-active,
    .scene-list .scene-item.active {
        transform: none;
        box-shadow: none;
    }

    .scene-list .scene-item:hover .scene-normal,
    .scene-list .scene-item.hover-active .scene-normal,
    .scene-list .scene-item.active .scene-normal {
        opacity: 1;
        transform: none;
    }

    .scene-list .scene-item:hover .scene-hover,
    .scene-list .scene-item.hover-active .scene-hover,
    .scene-list .scene-item.active .scene-hover {
        opacity: 0;
        transform: translateY(10px);
    }

    /* 移动端场景块只显示normal状态 */
    .scene-normal {
        position: relative;
        height: auto;
    }

    .scene-hover {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .scene-item {
        width: 100%;
        height: 280px;
    }

    .feature-tabs .image-content img {
        max-width: 260px;
    }
}