.banner{background: url("https://img.asiancancer.com/images/newmalai/contact.png") center no-repeat;height: 300px;}
.banner .img{text-align: center;}
.banner .banner-text{padding-top:30px;}
.banner .banner-text .title{font-size: 52px;color: #ffffff;display: grid;}
.banner .banner-text .first{border-bottom: 2px solid #13BFB1;width: 254px;font-weight: bold;}
.banner .banner-text .second{font-size: 35px;}

.head-bg{background: #ffffff;}
.head-title .in_title{font-size: 36px;font-weight: bold;text-align: center;}
.head-title .sec{margin: 30px auto;display: flex;justify-content: center;}
.head-title .sec ul li{float: left;text-align: center;border-radius: 4px;margin-right: 15px;}
.head-title .sec ul li a{padding: 3px 25px;border-radius: 16px;border: 1px solid #363636;}
.head-title .sec ul li .active{background: #1e5484;color:#ffffff;}

.about-content .title{font-size: 36px;text-align: center;font-weight: bold;}
.about-content .line{width: 80px;height: 4px;background: #1E2D4F;margin:16px auto;}
.about-content .intro {width: 100%; overflow: hidden;}
.about-content .intro .video{float:left;margin-right: 15px; margin-bottom: 15px;}
.about-content .intro .mobile-video{display: none;}
.about-content .intro .txt{float:right;width:45%;text-align: justify;}
.about-content .intro .about-box{margin-top:50px;}
.about-content .buttom-num-bg{background: url("https://img.asiancancer.com/images/kazakhstan/basic/about-bg.webp") no-repeat center;    
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}
.about-content .buttom-num{padding: 40px 0;}
.about-content .buttom-num li{float:left;width: 24.5%;text-align: center;color:#ffffff;font-size: 16px;border-right: 2px solid #ffffff;}
.about-content .buttom-num li.last{border-right: 0px;}
.about-content .buttom-num li span{font-size: 40px;font-weight: bold;color:#ffffff;}
.about-content .buttom-num li i{font-size: 14px;font-style: normal;color: #ffffff;font-weight: normal;}

.buttom-num .box-one{width: 46.5%;color: #ffffff;padding:40px 20px;margin: 0 auto;}
.buttom-num .box-two{width: 46.5%;color: #ffffff;padding:40px 20px;margin: 0 auto;}
.buttom-num .box{display: flex;width: 100%;}

.about-content .qualification{}
.about-content .qualification .qua-box{background: #ffffff;border-radius: 16px;display: flow-root;padding:30px 0;}
.about-content .qualification .qua-box ul li{float:left;width: 25%;display: grid;text-align: center;}
.about-content .qualification .qua-box ul li img{margin: 0 auto;}
.about-content .qualification .qua-box ul li span{width: 200px;margin: 0 auto;font-size: 13px;font-weight: bold;margin-top:10px;}
.about-content .qualification .qua-box-bg{background:#13BFB1;width:162px;height: 162px;border-radius: 0 0 16px 0;float: right;position: relative;top:-146px;z-index: -1;right: -16px;}


.about-content .hospital-bg{padding-bottom: 50px;}


@media screen and (max-width:768px) {
    .marginT0p50{}
    .banner{background: url("/uploads/allimg/2023/06/22/about-us-bg.png") no-repeat center;height: auto;background-size: cover;}
    .banner .img{text-align: center;}
    .banner .banner-text .first{font-weight: normal;}
    .banner .banner-text{padding: 30px 20px;}
    .banner .banner-text .title{font-size: 36px;}
    .banner .banner-text .second{font-size: 20px;}

    .head-title .in_title{font-size: 26px;padding: 15px 0;}

    .head-title .sec{width: 100%;white-space: nowrap;position: relative;display: block;overflow-y: hidden;overflow-x: auto;padding:20px 0;margin: 0 auto;
        box-shadow: 0 16px 5px -12px rgb(0 0 0 / 5%), 0 4px 15px 0 rgb(0 0 0 / 5%), 0 8px 10px -5px rgb(0 0 0 / 5%);
    }
    .head-title .sec ul li{float: none;display: inline-block;border: 0px;padding: 5px;}
    div::-webkit-scrollbar{
        display:none
    }

    /**介绍**/
    .about-content{font-size:16px;padding: 0 10px;}
    .about-content .intro .title, .about-content .qualification .title, .about-content .development-path .title, .about-content .hospital-honor .title, .about-content .medical-technology .title, .about-content .mdt-team .title, .about-content .service .title, .about-content .hospital .title{
        font-size: 25px;
    }
    .about-content .menu_tag{width: 100%;white-space: nowrap;position: relative;display: block;overflow-y: hidden;overflow-x: auto;padding:20px 0;margin: 0 auto;
        box-shadow: 0 16px 5px -12px rgb(0 0 0 / 5%), 0 4px 15px 0 rgb(0 0 0 / 5%), 0 8px 10px -5px rgb(0 0 0 / 5%);border-top:2px solid #DDDDDD;
    }
    .about-content .menu_tag ul li{float: none;display: inline-block;border: 0px;margin-right: 10px;padding: 5px 10px;}
    .about-content .intro{margin-top:20px;}
    .about-content .intro .line, .about-content .qualification .line, .about-content .development-path .line, .about-content .hospital-honor .line, .about-content .medical-technology .line, .about-content .mdt-team .line, .about-content .service .line, .about-content .hospital .line{display: none;}
    .about-content .intro .about-box{text-align: center;display: flow-root;background: #ffffff;padding: 30px 0;border-radius: 8px 8px 0 0;}
    .about-content .intro .video{float: none;}
    .about-content .intro .video .video-bg{display: none;}
    .about-content .intro .video {display: none;}
    .about-content .intro .mobile-video{display: block;}
    .about-content .intro .mobile-video iframe{width: 100%;}
    .about-content .intro .txt{width: auto;padding: 0 10px;text-align:left;}
    .about-content .buttom-num li{width: 49%;height:270px;}
    .about-content .buttom-num li.sebei1{border-right: 1px solid #DDDDDD;}
    .about-content .buttom-num li.sebei2{border-bottom: 1px solid #DDDDDD;border-right: none;}
    .about-content .buttom-num li.sebei3{border-top: 1px solid #DDDDDD;border-right: none;}
    .about-content .buttom-num li.last{border-left: 1px solid #DDDDDD;}
    .about-content .buttom-num-bg{position: inherit;top:inherit;height: 590px;border-radius: 0 0 8px 8px;background-repeat: repeat-y;}
    .about-content .buttom-num{padding-top:15px;padding-bottom: 25px;margin:0 20px;border-radius: 8px;}

    .marginT0p100{display: none;}

    .about-content .qualification .qua-box ul li{width: 50%;height: 200px;}
    .about-content .qualification .qua-box ul li span{margin-top: 0;}


}



        .timeline-container {
            margin: 0 auto;
            padding: 15px;
        }
        
        /* 桌面端样式 */
        .desktop-timeline {
            display: block;
        }
        
        .timeline-header {
            position: relative;
            margin-bottom: 30px;
        }
        
        .timeline-axis-container {
            display: flex;
            align-items: center;
            position: relative;
        }
        
        .nav-arrow {
            font-size: 24px;
            cursor: pointer;
            padding: 8px;
            user-select: none;
            color: #1890ff;
            flex-shrink: 0;
            position: relative;
            z-index: 2;
            background: white;
            width: 16px;
            height: 16px;
            line-height: 16px;
            border-radius: 16px;
            border: 1px solid #999999;
        }
        
        .nav-arrow.disabled {
            color: #d9d9d9;
            cursor: not-allowed;
        }
        
        .timeline-axis {
            position: relative;
            flex-grow: 1;
            height: 60px;
            display: flex;
            align-items: center;
        }
        
        .axis-line {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #e8e8e8;
            z-index: 1;
            transform: translateY(-50%);
        }
        
        .axis-years {
            display: flex;
            justify-content: space-around;
            position: relative;
            z-index: 2;
            width: 100%;
        }
        
        .year-marker {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-grow: 1;
            max-width: 33.33%;
        }
        
        .marker-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #bfbfbf;
            margin-bottom: 6px;
            transition: all 0.3s;
            border: 2px solid white;
            box-sizing: border-box;
            position: relative;
            z-index: 2;
        }
        
        .year-label {
            font-size: 14px;
            color: #595959;
            transition: all 0.3s;
            text-align: center;
            background: white;
            padding: 0 5px;
            position: relative;
            z-index: 2;
        }
        
        .year-marker.active .marker-dot {
            background-color: #1890ff;
            transform: scale(1.4);
            border-color: white;
        }
        
        .year-marker.active .year-label {
            color: #1890ff;
            font-weight: 500;
            font-size: 16px;
        }
        
        .content-columns {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .content-column {
            flex: 1;
            padding: 15px;
            border: 1px solid #f0f0f0;
            border-radius: 6px;
            background-color: #fafafa;
            min-height: 200px;
            transition: all 0.3s;
        }

        .content-column div{text-align: center;}
        
        .content-column.active {
            border-color: #1890ff;
            box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
        }
        
        .content-column h3 {
            color: #1890ff;
            margin: 0 0 10px 0;
            padding-bottom: 8px;
            border-bottom: 1px solid #f0f0f0;
            font-size: 16px;
        }
        
        .content-column .box{height:280px;}
        
        /* 移动端样式 */
        .mobile-timeline {
            display: none;
        }
        
        .mobile-header {
            position: relative;
            margin-bottom: 15px;
        }
        
        .mobile-axis-container {
            display: flex;
            align-items: center;
            position: relative;
        }
        
        .mobile-nav-arrow {
            font-size: 20px;
            cursor: pointer;
            padding: 8px 12px;
            user-select: none;
            color: #1890ff;
            flex-shrink: 0;
            position: relative;
            z-index: 2;
            background: white;
        }
        
        .mobile-nav-arrow.disabled {
            color: #d9d9d9;
            cursor: not-allowed;
        }
        
        .mobile-axis {
            position: relative;
            flex-grow: 1;
            height: 50px;
            display: flex;
            align-items: center;
        }
        
        .mobile-axis-line {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #e8e8e8;
            z-index: 1;
            transform: translateY(-50%);
        }
        
        .mobile-year-indicator {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 16px;
            font-weight: 500;
            color: #1890ff;
            background: white;
            padding: 0 10px;
            z-index: 2;
        }
        
        .mobile-content {
            padding: 15px;
            border: 1px solid #f0f0f0;
            border-radius: 6px;
            background-color: #fafafa;
            margin-top: 15px;
            min-height:519px; 
        }
        
        .mobile-content h3 {
            color: #1890ff;
            margin: 0 0 10px 0;
            padding-bottom: 8px;
            border-bottom: 1px solid #f0f0f0;
            font-size: 16px;
        }

        .mobile-content div{text-align: center;}
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .timeline-container .title{font-size: 26px;}
            .desktop-timeline {
                display: none;
            }
            
            .mobile-timeline {
                display: block;
            }
        }