.tabs {
    display: flex;
    justify-content: flex-start;
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid #e0e0e0;
    width: 100%;
    max-width: var(--container-width);
    /* margin-left: auto;
    margin-right: auto; */
}

.tab {
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    font-size: var(--font-size-md);
    color: var(--text-color-secondary);
    position: relative;
    transition: color var(--transition-time);
}

.tab.active {
    color: var(--primary-color);
    font-weight: bold;
}

.tab.active:after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-color);
}

.tab-content {
    display: none;
    width: 100%;
    max-width: var(--container-width);
    /* margin: 0 auto; */
}

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

.feature-section {
    height: 500px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: var(--spacing-lg);
}

.feature-text {
    width: 50%;
}

.feature-text h2 {
    font-size: var(--font-size-lg);
    color: var(--text-color);
    margin-bottom: var(--spacing-sm);
}

.feature-text h3 {
    font-size: var(--font-size-md);
    color: var(--text-color-secondary);
    margin-bottom: var(--spacing-lg);
}

.feature-image {
    width: 50%;
    height: 100%;
    background-color: var(--background-color);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
}

/* 医疗智能体标签页特殊样式 */
.medical-ai-section {
    height: 500px;
}

.medical-ai-section .medical-ai-text {
    width: 22%;
    padding-right: var(--spacing-lg);
}

.medical-ai-section .medical-ai-container {
    width: 75%;
    height: 500px;
}

.input-section {
    position: relative;
    height: 65%;
}

.input-section h4 {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-sm);
}

.input-section p {
    font-size: var(--font-size-sm);
    color: var(--text-color-secondary);
    margin-bottom: var(--spacing-sm);
}

.input-section img {
    width: 50%;
    border-radius: var(--border-radius-sm);
    max-height: 200px;
    object-fit: cover;
}

.input-section .detail {
    font-size: var(--font-size-sm);
    color: var(--text-color-secondary);
    margin-bottom: var(--spacing-sm);
    max-height: 220px;
    overflow-y: auto;
    padding-right: var(--spacing-sm);
}

.image_section {
    position: relative;
    height: 90%;
    margin-bottom: var(--spacing-md);
}

.image_section img {
    width: 50%;
    border-radius: var(--border-radius-sm);
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease;
}

.overlap_img1_0 {
    opacity: 1;
    animation: FadeIn 1s forwards;
    animation-delay: 0s;
}

.overlap_img1_1 {
    animation: FadeIn 1s forwards;
    animation-delay: 4s;
}

.overlap_img1_2 {
    animation: FadeIn 1s forwards;
    animation-delay: 7s;
}

.overlap_img1_3 {
    animation: FadeIn 1s forwards;
    animation-delay: 10s;
}



.symptoms_1 {
    animation: ChangeColor_1 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

@keyframes ChangeColor_1 {
    from {color: black;}
    to {color: #0f9ed5;}
}

.symptoms_2 {
    animation: ChangeColor_2 1s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
}

@keyframes ChangeColor_2 {
    from {color: black;}
    to {color: rgb(216, 165, 39);}
}

.symptoms_3 {
    animation: ChangeColor_3 1s;
    animation-delay: 10s;
    animation-fill-mode: forwards;
}

@keyframes ChangeColor_3 {
    from {color: black;}
    to {color: red;}
}

.symptoms_4 {
    animation: ChangeColor_4 1s;
    animation-delay: 7s;
    animation-fill-mode: forwards;
}

@keyframes ChangeColor_4 {
    from {color: black;}
    to {color: #38761d;}
}


@keyframes FadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

.output-section h4 {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-sm);
}

.output-content {
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.output-section-2 {
    height: 100%;
}

.output-section-2 .image_section{
    width: 100%;
    height: 90%;
    position: relative;
    overflow-y: auto;
}

.output-section-2 .image_section img{
    width: 100%;
    /* height: 85%; */
    position: absolute;
    top: 0;
    left: 0;
}

.overlap_img2_0 {
    opacity: 1;
    animation: FadeIn 1s forwards;
    animation-delay: 0s;
}

.overlap_img2_1 {
    animation: FadeIn 1s forwards;
    animation-delay: 2s;
}

.overlap_img2_2 {
    animation: FadeIn 1s forwards;
    animation-delay: 3s;
}

.overlap_img2_3 {
    animation: FadeIn 1s forwards;
    animation-delay: 4s;
}

.overlap_img2_4 {
    animation: FadeIn 1s forwards;
    animation-delay: 5s;
}

.overlap_img2_5 {
    animation: FadeIn 1s forwards;
    animation-delay: 6s;
}

.overlap_img2_6 {
    animation: FadeIn 1s forwards;
    animation-delay: 7s;
}

.overlap_img2_7 {
    animation: FadeIn 1s forwards;
    animation-delay: 8s;
}

.overlap_img2_8 {
    animation: FadeIn 1s forwards;
    animation-delay: 9s;
}

.overlap_img2_9 {
    animation: FadeIn 1s forwards;
    animation-delay: 10s;
}

.overlap_img2_10 {
    animation: FadeIn 1s forwards;
    animation-delay: 11s;
}

.overlap_img2_11 {
    animation: FadeIn 1s forwards;
    animation-delay: 12s;
}


@media screen and (max-width: 768px) {
    .feature-section {
        flex-direction: column;
        height: auto;
    }
    
    .feature-text, .feature-image {
        width: 100%;
    }
    
    .feature-text {
        margin-bottom: var(--spacing-lg);
    }
    
    .medical-ai-section {
        height: auto;
    }
    
    .medical-ai-section .medical-ai-text,
    .medical-ai-section .medical-ai-container {
        width: 100%;
    }
    
    .image_section {
        height: 100px;
        margin-bottom: 0;
    }
    
    .output-section {
        margin-top: 10px;
    }
} 


@media screen and (max-width: 480px) {
    .subcontent2 .image_section {
        height: 150px;
    }

    .input-section .detail {
        max-height: 150px;
    }

    .output-section-2 {
        height: 250px;
    }

    .output-section-2 .image_section {
        height: 80%;
    }
}