footer {
    position: absolute;
    bottom: 0;
    padding-top: 0;
    border-top: 1px solid var(--primary-300);
    height: var(--sec-gap);
    display: flex;
    flex-direction: column;
    justify-content: end;
}
.top_btn {
    display: none;
}
.doctors {
    height: 100vh;
}

.sec-content {
    height: 100vh;
}

.doctor-info-box {    
    width: 60%;
    height: 100%;
    position: absolute;
}
.doctor-info-item .d-img {
    display: none;
}
.doctor-info-item {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;    
    padding-left: 20px;
    padding-bottom: var(--sec-gap);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity .6s ease;
    display: flex;
    align-items: center;
    justify-content: end;
}
.doctor-info_text {
    width: 100%;
    /* gap: var(--con-gap); */
    gap: 5.2vw;
    display: flex;
    flex-direction: row-reverse;
}
.doctor-info-item.active {
    opacity: 1;
    transition-delay: .4s;
}
.doctor-img-box {
    width: 100%;
    height: 100%;
    min-height: 0;    
    overflow: hidden;
    z-index: 1;
    position: relative;
}


.doctor_swiper {
    height: 94%;
    overflow: visible;
    padding-bottom: 110px;
    padding-left: 65%;
    /* padding-top: 20px; */
}
.d-name {
    font-size: var(--t3);
    color: var(--ft-main);
    margin-bottom: 60px;
}
.d-name span {
    display: block;
}
.d-introduce {
    text-align: right;
    font-size: var(--d3);
    color: var(--ft-sub);
    opacity: .8;
}
.d-position {
    color: var(--ft-main);
    font-weight: var(--medium);
    margin-bottom: 40px;
    font-size: var(--d2);
}
.d-img {
    /* padding-top: 40px; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.d-img img {
    aspect-ratio: 5 / 6;
    width: auto;
    height: auto;
    max-height: 100%;
    max-width: 400px;
    margin-left: auto;
}
.d-history {
    font-size: var(--d2);
    color: var(--ft-sub);
}



.doctor-info-item.active .d-name,
.doctor-info-item.active .d-history,
.doctor-info-item.active .d-position,
.doctor-info-item.active .d-introduce {
    pointer-events: visible;
}

@media screen and (max-width:1300px) {
    .d-img img {
        max-width: 350px;
    }
}
@media screen and (max-width:1200px) {
    .doctor_swiper {
        padding-left: 50%;
    }
    .doctor-info-box {
        width: 50%;
    }
    .doctor-info_text {
        flex-direction: column;
    }
    .d-introduce {
        text-align: left;
    }
    .d-name {
        margin-bottom: 40px;
    }
    .d-position {
        margin-bottom: 20px;
    }
    .doctor-info_text {
        gap: 30px;
    }
    footer {
        height: 150px;
    }
}

@media screen and (max-width:960px) {
   
    footer {
        position: relative;
        border: 0;
        padding-top: calc(var(--con-gap) * 2);
        height: auto;
    }
    .top_btn {
     
        display: flex;
    }

    /* -- */
    .doctors {
        padding: var(--sec-gap) 0 0;
    }
    .doctors,
    .sec-content {
        height: auto;
    }   
    
    .doctor-info-box {
        position: static;
        width: 100%;
        padding: 0 20px;
    }
    
    .doctor-info-item {
        display: flex;
        gap: 40px;
        position: static;
        height: auto;
        pointer-events: visible;
        opacity: 1;
        border-bottom: 1px solid var(--primary-300);
        padding-bottom: var(--con-gap);
        margin-bottom: var(--con-gap);
        padding-left: 0;
        align-items: start;
    }
   .doctor-info_text {
        flex-direction: column;
        align-items: start;
        justify-content: end;
    }
    
    .doctor-img-box,
    .doctor_swiper {
        display: none;
    }
    .doctor-info-item .d-img {
        display: block;
        aspect-ratio: 5 / 6;
        padding: 0;
        order: 2;
        position: sticky;
        top: 100px;
    }
    .doctor-info-item .d-img img {
        aspect-ratio: unset;
        width: 100%;
        height: 100%;
        margin-left: 0;
    }
    .d-introduce {
        text-align: left;
    }
   
}

@media screen and (max-width:660px) {
    .doctor-info-item {
        flex-direction: column;
    }
    .doctor-info-item .d-img {
        order: 0;
        position: static;
    }
    .d-name {
        margin-bottom: 30px;
    }
    .d-position {
        margin-bottom: 20px;
    }
    .doctor-info_l, .doctor-info_r {
        padding-bottom: 0;
        width: 100%;
    }
    .doctor-info_l {
        margin-bottom: 20px;
    }
   
    
}
@media screen and (max-width:660px) {
    .doctor-info_text {
        padding-right: 0;
    }
}