/* 关于页面特定样式 */



/* Banner样式 */

.about-banner {

    position: relative;

    height: 100vh;

    min-height: 500px;

    max-height: 800px;

    background-color: #f0f8ff;

    display: flex;

    align-items: flex-start;

    overflow: hidden;

}



.about-banner-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}



.about-banner-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.about-banner .container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1800px;

    padding-left: 60px;

    padding-top: 900px;

}



.about-banner-content {

    position: absolute;

    max-width: 1000px;

    color: #fff;

    text-align: left;

    padding: 0;

    top: 40%;

    left: 60px;

    transform: translateY(-50%);

    z-index: 10;

    width: 50%;

    display: block !important;

}



.about-banner-content h1 {

    letter-spacing: 4px;

    font-size: 50px;

    font-weight: 500;

    margin-bottom: 30px;

    line-height: 1.3;

    color: #07769C;

}
.about-banner-content h2 {

    letter-spacing: 4px;

    font-size: 38px;

    font-weight: 800;

    margin-bottom: 30px;

    line-height: 1.3;

    color: #07769C;

}


.about-banner-content p {

    font-size: 36px;

    font-weight: 400;

    margin-bottom: 30px;

    line-height: 1.5;

    color: #fff;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}



/* 公司简介部分 */

.company-intro {

    padding: 80px 0;

    background-color: #fff;

    position: relative;

}



.company-intro .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 1800px;

    flex-wrap: wrap;

}



.company-intro-content {

    flex: 0 0 60%;

    padding-right: 50px;

    max-width: 1000px;
	

}



.company-intro-image {

    flex: 0 0 35%;

    text-align: right;

}



.company-intro-image img {

    max-width: 100%;

    height: auto;

    display: block;

    margin-left: auto;

}



.section-title {

    position: relative;

    margin-bottom: 30px;

    padding-bottom: 15px;

    color:#07769C;

    font-size: 28px;

    font-weight: 700;

}



.section-title:after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 40px;

    height: 3px;

    background-color: #4DC3D4;

}



.company-intro p {

    margin-bottom: 15px;

    line-height: 1.8;

    color: #333;

    font-size: 16px;

    text-align: justify;

}



/* 公司数据统计部分 */

.company-stats {

    display: flex;

    justify-content: space-between;

    flex-wrap: nowrap;

    margin-top: 60px;

    padding-top: 40px;

    border-top: 1px solid #eee;

    width: 100%;

    max-width: 800px;

}



.stat-item {

    text-align: left;

    margin-right: 20px;

    margin-bottom: 0;

    flex: 1;

    min-width: 100px;

}



.stat-item:last-child {

    margin-right: 0;

}



.stat-container {

    position: relative;

    display: block;

}



.stat-number {

    display: flex;

    align-items: baseline;

    font-size: 70px;

    font-weight: 700;

    color: #333;

    margin-bottom: 10px;

    line-height: 1;

}



.stat-number span {

    font-size: 40px;

    margin-left: 5px;

    color: #0B779C;

    font-weight: 500;

}



.stat-label {

    font-size: 16px;

    color: #666;

}



/* 仪器设备部分 */

.equipment-section {

    padding: 80px 0;

    background-color: #f9f9f9;

    position: relative;

    overflow: hidden;

}

.equipment-section .container {
    position: relative; /* 确保箭头相对于容器定位 */
    max-width: 1800px;
    overflow: visible; /* 允许箭头超出容器可见 */
}

.equipment-section .section-title {

    color: #07769C;

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 20px;

    position: relative;

    padding-bottom: 15px;

}



.equipment-section .section-title:after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    background-color: #4DC3D4;

    height: 4px;

    width: 50px;

}



.equipment-intro {

    margin-bottom: 10px;

    max-width: 1200px;

}



.equipment-intro p {

    margin-bottom: 5px;

    line-height: 1.4;

    color: #333;

    font-size: 20px;

    font-weight: 500;

}



/* 设备描述文本 */

.equipment-description {

    margin-bottom: 30px;

}



.equipment-description p {

    margin-bottom: 5px;

    color: #666;

    font-size: 14px;

    line-height: 1.6;

    font-weight: 400;

}



/* 设备图片展示 */
.equipment-gallery {
    display: flex;
    overflow-x: auto;
    padding: 10px 0;
    gap: 10px;
    scroll-behavior: smooth;
    width: 100%;
    margin: 0 auto; /* 居中显示 */
}

.equipment-item {
    flex: 0 0 auto; 
    width: 600px; /* 固定宽度 */
    height: 400px; /* 固定高度 */
    overflow: hidden;
    border-radius: 0;
}

/* 隐藏滚动条 */
.equipment-gallery::-webkit-scrollbar {
    display: none;
}
.equipment-gallery {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/*.equipment-gallery {

    display: grid;

    grid-template-columns: 1fr 1fr 2fr 1fr 1fr;

    grid-template-rows: repeat(2, 200px);

    grid-gap: 10px;

    margin-bottom: 60px;

    position: relative;

    overflow: hidden;

}



.equipment-item:nth-child(1) {

    grid-column: 1 / 2;

    grid-row: 1 / 3;

}



.equipment-item:nth-child(2) {

    grid-column: 2 / 3;

    grid-row: 1 / 2;

}



.equipment-item:nth-child(3) {

    grid-column: 2 / 3;

    grid-row: 2 / 3;

}



.equipment-item:nth-child(4) {

    grid-column: 3 / 4;

    grid-row: 1 / 3;

}



.equipment-item:nth-child(5) {

    grid-column: 4 / 5;

    grid-row: 1 / 2;

}



.equipment-item:nth-child(6) {

    grid-column: 4 / 5;

    grid-row: 2 / 3;

}



.equipment-item:nth-child(7) {

    grid-column: 5 / 6;

    grid-row: 1 / 3;

}*/



.equipment-item {

    overflow: hidden;

    border-radius: 0;

}



.equipment-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* 导航箭头 */
.nav-arrows {
    display: flex;
    justify-content: center;
    gap: 10px;
    position: absolute;
    right: 20px; /* 距离右侧20px */
    top: 120px; /* 距离顶部20px */
    z-index: 5;
}



.nav-arrow {

    width: 50px;

    height: 50px;

    border: 1px solid #ddd;

    border-radius: 50%;

    background-color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}



.nav-arrow:hover {

    background-color: #07769C;

    border-color: #07769C;

    color: #fff;

}



/* 设备数据统计 */

.equipment-stats {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    margin-top: 60px;

    padding-top: 20px;

    position: relative;

}



.stat-block {

    margin-right: 150px;

    position: relative;

    display: flex;

    align-items: flex-end;

    margin-bottom: 20px;

}



.stat-block:last-child {

    margin-right: 0;

}



/* 数字样式 */

.equipment-stat-number {

    font-size: 60px;

    font-weight: 700;

    color: #07769C;

    line-height: 1;

    display: inline-block;

    margin-right: 0;

    margin-bottom: 0;

}



/* 标签样式 */

.equipment-stat-label {

    font-size: 18px;

    color: #5A5A5A;

    line-height: 1.3;

    font-weight: 400;

    padding: 6px 10px;

    border-radius: 3px;

    display: inline-block;

    white-space: nowrap;

    position: relative;

    bottom: 1px;

    left: -5px;

}



/* 最后一个数据项的特殊样式 */

.last-stat {

    display: block !important;

    margin-top: 30px;

}



.last-stat .equipment-stat-number {

    font-weight: 500;

    color: #07769C;

    line-height: 1.2;

    display: block !important;

    margin-right: 0;

}



/* 产品矩阵部分 */

.product-matrix {

    padding: 80px 0;

    background-color: #f9f9f9;

    position: relative;

    overflow: hidden;

}



.product-matrix .container {

    max-width: 1800px;

    margin: 0 auto;

    width: 100%;

    padding: 0;

    overflow: hidden;

}



.product-matrix .section-title {

    position: relative;

    color: #07769C;

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 20px;

    text-align: left;

    padding-bottom: 15px;

    padding-left: 0;

    margin-left: 0;

}



.product-matrix .section-title:after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 50px;

    height: 3px;

    background-color: #07769C;

}



.product-intro {

    margin-bottom: 40px;

    padding-left: 0;

    padding-right: 0;

    max-width: 100%;

}



.product-intro p {

    margin-bottom: 10px;

    line-height: 1.8;

    color: #333;

    font-size: 20px;

    font-weight: 500;

}



.product-intro .tech-support {

    color: #666;

    font-size: 14px;

}



.product-categories {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-gap: 20px;

    margin-top: 30px;

    width: 100%;

    padding-left: 0;

    padding-right: 0;

    max-width: 100%;

    overflow: hidden;

}



/* 清除之前的布局设置 */

.product-category-item:nth-child(1),

.product-category-item:nth-child(2),

.product-category-item:nth-child(3),

.product-category-item:nth-child(4),

.product-category-item:nth-child(5) {

    grid-column: auto;

    grid-row: auto;

}



.product-category-item {

    border-radius: 0;

    overflow: hidden;

    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

    transition: transform 0.3s ease;

    position: relative;

    background-color: #fff;

    border: none;

    height: 100%;

    display: flex;

    flex-direction: column;

    width: 100%;

}



.product-category-item:hover {

    transform: translateY(-5px);

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

}



.product-category-image {

    height: 220px;

    overflow: hidden;

    background-color: #f9f9f9;

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 1;

}



.product-category-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.product-category-info {

    padding: 20px;

    background-color: #fff;

    border-top: 1px solid #f0f0f0;

}



.product-category-title {

    font-size: 18px;

    font-weight: 600;

    margin-bottom: 10px;

    color: #333;

}



.product-category-desc {

    font-size: 14px;

    color: #666;

    margin-bottom: 0;

    line-height: 1.5;

}



.product-tag {

    position: absolute;

    top: 10px;

    left: 0;

    color: #fff;

    font-size: 14px;

    padding: 5px 15px;

    z-index: 2;

}



/* 为不同类型的标签设置不同的颜色 */

.tag-domestic {

    background-color: #0A7A9D;

}



.tag-clinical {

    background-color: #4CAF50;

}



.tag-innovation {

    background-color: #FF9800;

}



/* 基本容器样式 */

.container {

    width: 100%;

    max-width: 1800px;

    margin: 0 auto;

    box-sizing: border-box;

   

}



/* 移动端红框区域文本 */

.mobile-banner-text {

    display: none; /* 默认隐藏 */

    position: absolute;

    top: 150px;

    left: 0;

    width: 100%;

    text-align: center;

    z-index: 100;

    padding: 15px;

    background-color: transparent; /* 去掉底色 */

    pointer-events: none;

    border: none; /* 去掉边框线 */

    box-shadow: none; /* 去掉阴影效果 */
	 overflow: hidden;

}



.mobile-banner-text h2 {

    font-size: 24px;

    font-weight: 700;

    color: #ffffff; /* 字体颜色改为白色 */

    margin-bottom: 5px;

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* 添加暗色阴影以增强白色文字在蓝色背景上的可见度 */

}



.mobile-banner-text p {

    font-size: 16px;

    color: #ffffff; /* 字体颜色改为白色 */

    font-weight: 600;

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* 添加暗色阴影以增强白色文字在蓝色背景上的可见度 */

}



/* 在所有屏幕尺寸下默认隐藏移动端banner文本 */

@media (min-width: 769px) {

    .mobile-banner-text {

        display: none !important;

        visibility: hidden !important;

        opacity: 0 !important;

    }

}



/* 响应式调整 */

@media (max-width: 1600px) {

    .nav-arrows {

        right: 30px;

        top: 120px;

        position: absolute;

    }

    

    .equipment-stats {

        justify-content: flex-start;

        padding-left: 20px;

    }

    

    .equipment-gallery {

        grid-template-columns: 1fr 1fr 2fr 1fr 1fr;

    }

}



@media (max-width: 1400px) {

    .about-banner-content h1 {

        font-size: 45px;

    }

    

    .equipment-stat-number {

        font-size: 50px;

    }

    

    .equipment-stat-label {

        font-size: 16px;

    }

    

    .product-categories {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .stat-number {

        font-size: 60px;

    }

    

    .stat-number span {

        font-size: 35px;

    }

}



@media (max-width: 1200px) {

    .equipment-gallery {

        grid-template-columns: repeat(4, 1fr);

        grid-template-rows: auto;

    }

    

    .equipment-item:nth-child(1) {

        grid-column: 1 / 2;

        grid-row: 1 / 3;

    }

    

    .equipment-item:nth-child(2) {

        grid-column: 2 / 3;

        grid-row: 1 / 2;

    }

    

    .equipment-item:nth-child(3) {

        grid-column: 2 / 3;

        grid-row: 2 / 3;

    }

    

    .equipment-item:nth-child(4) {

        grid-column: 3 / 5;

        grid-row: 1 / 3;

    }

    

    .equipment-item:nth-child(5) {

        grid-column: 1 / 2;

        grid-row: 3 / 4;

    }

    

    .equipment-item:nth-child(6) {

        grid-column: 2 / 3;

        grid-row: 3 / 4;

    }

    

    .equipment-item:nth-child(7) {

        grid-column: 3 / 5;

        grid-row: 3 / 4;

    }

    

    .equipment-stat-number {

        font-size: 55px;

    }

    

    .stat-number {

        font-size: 55px;

    }

    

    .stat-number span {

        font-size: 30px;

    }

    

    .nav-arrows {

        right: 20px;

        top: 80px;

    }

    

    .nav-arrow {

        width: 40px;

        height: 40px;

    }

    

    .product-categories {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .about-banner {

        height: 80vh;

    }

    

    .about-banner-content h1 {

        font-size: 40px;

        letter-spacing: 3px;

    }

    

    .company-stats {

        max-width: 700px;

    }

}



@media (max-width: 992px) {

    .container {

        padding: 0 20px;

    }



    .about-banner {

        height: 60vh;

    }

    

    .about-banner-bg img {

        height: 100%;

        object-position: center;

    }



    .about-banner-content {

        padding: 60px 0;

    }

    

    .about-banner .container {

        padding-top: 20vh;

        padding-left: 30px;

    }



    .company-intro .container {

        flex-direction: column;

    }



    .company-intro-content {

        width: 100%;

        flex: 0 0 100%;

        padding-right: 0;

        margin-bottom: 30px;

    }



    .company-intro-image {

        width: 100%;

        flex: 0 0 100%;

        text-align: center;

    }

    

    .company-intro-image img {

        margin: 0 auto;

    }



    .company-stats {

        flex-wrap: wrap;

        justify-content: space-between;

        max-width: 100%;

    }



    .stat-item {

        width: 45%;

        margin-right: 0;

        margin-bottom: 20px;

        flex: 0 0 45%;

    }



    .equipment-gallery {

        grid-template-columns: 1fr 1fr;

        grid-template-rows: auto;

    }



    .equipment-item:nth-child(n) {

        grid-column: auto;

        grid-row: auto;

    }



    .equipment-stats {

        flex-direction: column;

        left: 0;

        padding-left: 0;

    }



    .stat-block {

        margin-right: 0;

        margin-bottom: 20px;

    }



    .nav-arrows {

        right: 0;

        top: 0;

        position: static;

        margin-top: 20px;

        justify-content: center;

    }



    .product-categories {

        grid-template-columns: repeat(2, 1fr);

    }



    div[style*="padding-left: 50px; padding-right: 50px;"] {

        padding-left: 20px !important;

        padding-right: 20px !important;

    }

    

    .about-banner-content h1 {
        font-size: 36px;
        letter-spacing: 2px;
    }

    .equipment-gallery {
        max-width: calc(300px * 3 + 20px); /* 中等屏幕缩小图片宽度 */
    }
    .equipment-item {
        width: 300px;
        height: 200px;
    }
}



@media (max-width: 768px) {

    .about-banner {

        height: 150vh;

        min-height: 400px;

        position: relative;

    }

    

    .about-banner .container {

        padding-top: 0;

        padding-left: 20px;

        position: relative;

        z-index: 5;

    }

    

    .about-banner-content {

        position: absolute;

        top: 200px;

        left: 20px;

        width: 90%;

        transform: none;

        padding: 0;

        z-index: 20;

        display: block !important;

        opacity: 1 !important;

        visibility: visible !important;
		
		text-align:center;

    }

    

    .about-banner-content h1 {

        font-size: 38px;

        letter-spacing: 2px;

        margin-bottom: 15px;

        display: block !important;
		
		color:#FFF;

    }
	.about-banner-content h2 {

        font-size: 28px;

        letter-spacing: 2px;

        margin-bottom: 15px;

        display: block !important;
		
		color:#FFF;

    }



    /* 显示移动端红框区域文本 */

    .mobile-banner-text {

        display: block !important;

        visibility: visible !important;

        opacity: 1 !important;

        top: 120px;

        background-color: transparent; /* 确保移动端下也没有底色 */

    }



    .section-title {

        font-size: 24px;

    }



    .company-intro p {

        font-size: 16px;

    }



    .equipment-intro p {

        font-size: 18px;

    }



    .equipment-description p {

        font-size: 14px;

    }



    .equipment-gallery {

        grid-template-columns: 1fr;

    }



    .equipment-stat-number {

        font-size: 40px;

    }



    .equipment-stat-label {

        font-size: 16px;

    }



    .product-intro p {

        font-size: 16px;

    }



    .product-categories {

        grid-template-columns: 1fr;

    }



    .company-stats {

        flex-direction: column;

        align-items: flex-start;

        max-width: 100%;

    }



    .stat-item {

        width: 100%;

        margin-bottom: 20px;

        flex: 0 0 100%;

    }

    

    .stat-number {

        font-size: 50px;

    }

    

    .stat-number span {
        font-size: 28px;
    }

    .equipment-gallery {
        max-width: calc(300px * 2 + 10px); /* 平板显示2张 */
    }
    .equipment-item {
        width: 300px;
        height: 200px;
    }
}



@media (max-width: 576px) {

    .about-banner {

        height: 150vh;

        min-height: 350px;

    }

    

    .about-banner-content {

        top: 180px;

        left: 15px;

        width: 90%;

        display: block !important;

    }

    

    .about-banner-content h1 {

        font-size: 24px;

        letter-spacing: 1px;

        margin-bottom: 10px;


        display: block !important;

    }

    

    .about-banner .container {

        padding-top: 12vh;

        padding-left: 15px;

    }



    /* 调整移动端小屏幕下红框区域文本 */

    .mobile-banner-text {

        top: 100px;

        padding: 10px;

        background-color: transparent; /* 确保小屏幕下也没有底色 */

    }

    

    .mobile-banner-text h2 {

        font-size: 22px;

    }

    

    .mobile-banner-text p {

        font-size: 14px;

    }



    .stat-item {

        width: 100%;

        margin-bottom: 15px;

    }



    .equipment-stat-number {

        font-size: 45px;

    }



    .equipment-stat-label {

        font-size: 14px;

    }

    

    .section-title {

        font-size: 22px;

    }

    

    .product-category-image {

        height: 180px;

    }

    

    .stat-number {

        font-size: 45px;

    }

    

    .stat-number span {
        font-size: 25px;
    }

    .equipment-gallery {
        max-width: calc(300px * 1 + 0px); /* 手机显示1张 */
    }
    .equipment-item {
        width: 300px;
        height: 200px;
    }
}



/* 重置布局按钮 */

.reset-layout {

    position: fixed;

    bottom: 80px;

    right: 20px;

    z-index: 100;

}



.reset-layout button {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background-color: #07769C;

    color: #fff;

    border: none;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    transition: all 0.3s ease;

}



.reset-layout button:hover {

    background-color: #065d7a;

    transform: rotate(180deg);

}