/* Include main */
#togglePassword {
  width: 44px;
  padding: 0;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}



/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
  padding: 60px 15px 0;
}

/* Include modules */
ul.pager {
  margin-top: 1rem;
  margin-bottom: 1rem;
  justify-content: center;
}

.g-recaptcha {
  margin-bottom: 1rem;
}

.term-badge > a {
  text-decoration: none;
}
.term-badge .bg-secondary:hover {
  background-color: var(--bs-primary);
}

.taxonomy-tag ul {
  padding-left: 0;
  list-style: none;
}

.widget-container {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.widget-image-widget img {
  width: 100%;
}

.widget-align-left {
  text-align: left;
}

.widget-align-center {
  text-align: center;
}

.widget-align-right {
  text-align: right;
}

.widget-align-justify {
  text-align: justify;
}

.widget-size-100, .widget-size-75, .widget .widget-size-75, .widget-size-66, .widget .widget-size-66, .widget-size-50, .widget .widget-size-50, .widget-size-33, .widget .widget-size-33, .widget-size-25, .widget .widget-size-25 {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
  flex: 0 0 auto;
  width: 100%;
}


/* Include themes */
/* The light theme is also the default theme. */
/* Do not wrap the these classes for the light theme specific. */
.card {
  --bs-card-bg: var(--bs-light);
}

.navbar {


    --bs-navbar-color: rgba(255, 255, 255, 0.55);
    --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
    --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: mediumvioletred;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    color: mediumvioletred !important;
    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-theme {
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity, 1));
}

.text-theme {
  color: var(--bs-body-color);
}

.text-bg-theme {
  color: var(--bs-body-color);
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity, 1));
}

.btn-theme {
  color: #000;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-theme:hover {
  color: #000;
  background-color: #f9fafb;
  border-color: #f9fafb;
}

.btn-check:focus + .btn-theme, .btn-theme:focus {
  color: #000;
  background-color: #f9fafb;
  border-color: #f9fafb;
  box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
}

.btn-check:checked + .btn-theme, .btn-check:active + .btn-theme, .btn-theme:active, .btn-theme.active, .show > .btn-theme.dropdown-toggle {
  color: #000;
  background-color: #f9fafb;
  border-color: #f9fafb;
}

.btn-check:checked + .btn-theme:focus, .btn-check:active + .btn-theme:focus, .btn-theme:active:focus, .btn-theme.active:focus, .show > .btn-theme.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
}

.btn-theme:disabled, .btn-theme.disabled {
  color: #000;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

[data-bs-theme=dark] .card {
  --bs-card-bg: var(--bs-body);
}
[data-bs-theme=dark] .bg-theme {
  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 1));
}
[data-bs-theme=dark] .text-theme {
  color: var(--bs-body-color);
}
[data-bs-theme=dark] .text-bg-theme {
  color: var(--bs-body-color);
  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 1));
}
[data-bs-theme=dark] .btn-theme {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}
[data-bs-theme=dark] .btn-theme:hover {
  color: #fff;
  background-color: #1c1f23;
  border-color: #1a1e21;
}
[data-bs-theme=dark] .btn-check:focus + .btn-theme, [data-bs-theme=dark] .btn-theme:focus {
  color: #fff;
  background-color: #1c1f23;
  border-color: #1a1e21;
  box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
}
[data-bs-theme=dark] .btn-check:checked + .btn-theme, [data-bs-theme=dark] .btn-check:active + .btn-theme, [data-bs-theme=dark] .btn-theme:active, [data-bs-theme=dark] .btn-theme.active, [data-bs-theme=dark] .show > .btn-theme.dropdown-toggle {
  color: #fff;
  background-color: #1a1e21;
  border-color: #191c1f;
}
[data-bs-theme=dark] .btn-check:checked + .btn-theme:focus, [data-bs-theme=dark] .btn-check:active + .btn-theme:focus, [data-bs-theme=dark] .btn-theme:active:focus, [data-bs-theme=dark] .btn-theme.active:focus, [data-bs-theme=dark] .show > .btn-theme.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
}
[data-bs-theme=dark] .btn-theme:disabled, [data-bs-theme=dark] .btn-theme.disabled {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}

.navbar-nav .nav-link {
    color: #FFF !important;

}

.navbar-nav {
    display: flex;
    justify-content: center;
    width: 100%;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
        color: mediumvioletred !important;
}

    /* 一级菜单项样式，确保父项有 position: relative */
    .navbar-nav .dropdown {
        position: relative;
    }

    /* 隐藏二级菜单 */
    .navbar-nav .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        min-width: 10rem;
        background-color: #fff;
        border: 1px solid #ddd;
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    }

    /* 鼠标悬停时显示二级菜单 */
    .navbar-nav .dropdown:hover > .dropdown-menu {
        display: block;
    }

    /* 可选：二级菜单项样式 */
    .navbar-nav .dropdown-menu .dropdown-item {
        color: #333;
        padding: 0.5rem 1rem;
        white-space: nowrap;
    }

        .navbar-nav .dropdown-menu .dropdown-item:hover {
            background-color: #f8f9fa;
            color: mediumvioletred;
        }


/*网站头的桌面端样式*/
/*.custom-header {
    width:100vw;
    max-width: 100vw;
    min-width: 100vw;
    height: 100px;
    background: #FFF;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 10001;*/ /* 关键：让整个header在navbar之上 */
        /*display: flex;
    align-items: center;
}
.custom-header-logo {
    position: absolute;*/
/*    left: 300px;*/
    /*top: 50%;

    transform: translateY(-50%);*/
    /* 不设置 width/height，防止图片被拉伸 */
    /*object-fit: contain;
}
.custom-header-contact {
    position: absolute;
    right: 300px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    color: #333;
}

    .custom-header-contact .fa-phone {

        font-size: 1.5rem;
        margin-right: 10px;
        color: #007bff;
    }

.custom-header-phone {
    font-weight: bold;
    margin-right: 24px;
}

.custom-header-wechat {
    position: relative;
    display: flex;
    align-items: center;

}



.wechat-qrcode {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 8px;
    border-radius: 6px;
    z-index: 999;
    min-width: 120px;
    z-index: 10002;*/ /* 保证比header还高 */
    /*text-align: center;
}

    .wechat-qrcode img {
        width: 80px;
        height: 80px;

    }*/



.custom-header {
    /*    width: 100vw;
    height: 100px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 10001;
    box-sizing: border-box;
    padding: 0 60px;*/
    width: 100vw;
    max-width: 100vw;
    min-width: 100vw;
    height: 100px;
    background: #FFF;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
   
}

.custom-header-logo img {
    height: 80px;
    object-fit: contain;
    display: block;
}

.custom-header-contact {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    color: #333;
    position: relative;
    gap: 24px;
    margin-right: 200px; 
}

    .custom-header-contact .fa-phone {
        font-size: 1.5rem;
        margin-right: 10px;
        color: #007bff;
    }

.custom-header-phone {
    font-weight: bold;
}

.custom-header-wechat {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 5px;
}

    .custom-header-wechat img {
        width: 80px;
        height: 80px;
/*        border-radius: 8px;*/
/*        box-shadow: 0 2px 8px rgba(0,0,0,0.10);*/
        background: #fff;
        display: block;
        transition: box-shadow 0.2s;
    }

        .custom-header-wechat img:hover {
            box-shadow: 0 4px 16px rgba(44,123,229,0.25);
        }







header.masthead {
    width: 100vw; /* 宽度占满视口 */
    max-width: 100vw; /* 最大宽度同视口 */
    min-width: 100vw; /* 最小宽度同视口 */
    height: 640px;
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
    color: #fff;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: cover; /* 填满容器且不变形 */
    margin: 0; /* 去除左右 auto 居中 */
    background-color: #222;
}


header.masthead .masthead-subheading {
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.5rem;
    margin-bottom: 25px;
    font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

    header.masthead .masthead-heading {
        font-size: 3.25rem;
        font-weight: 700;
        line-height: 3.25rem;
        margin-bottom: 2rem;
        font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }



.masthead.carousel {
    width: 100vw; /* 宽度占满视口 */
    max-width: 100vw; /* 最大宽度同视口 */
    min-width: 100vw; /* 最小宽度同视口 */
    height: 640px;
    margin: 0; /* 去除左右 auto 居中 */
    position: relative;
    background: none;
    padding: 0;
}

.carousel-banner-img {
    width: 100vw; /* 宽度占满视口 */
    height: 640px;
    background-size: cover; /* 填满容器且不变形 */
    background-repeat: no-repeat;
    background-position: center center;
}
.carousel-caption {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    text-align: center;
    color: #fff;
}


/*实现service的图标显示*/

/* 外层服务区块容器 */
.service-section-wrapper {
    width: 100%;
    max-width: 1900px;
    height: 500px;
    background: #fff;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 12px; /* 可选，圆角美化 */
    box-shadow: 0 2px 16px rgba(0,0,0,0.04); /* 可选，阴影美化 */
}

/* 内层内容容器，控制标题和图片区域宽度 */
.service-inner-container {
    width: 90%;
    max-width: 1700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 标题样式 */
.service-title-area {
    margin-bottom: 2rem;
    text-align: right;
    position: relative;
    padding-bottom: 1.5rem;
}

    .service-title-area h2 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: #222;
        letter-spacing: 0.12em;
        background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 1px 2px 8px rgba(255, 126, 95, 0.08);
        position: relative;
        display: inline-block;
    }

        .service-title-area h2::after {
            content: "";
            display: block;
            width: 540px; /* 分割线宽度更短 */
            height: 4px;
            margin-top: 10px;
            background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
            border-radius: 2px;
            margin-left: auto; /* 靠右对齐 */
            margin-right: 0;
        }
    .service-title-area h3 {
        font-size: 1.3rem;
        color: #888;
        font-weight: 400;
        margin-bottom: 0;
        letter-spacing: 0.08em;
        text-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }


/* 图标列表横排 */
.service-list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 2.5rem;
    width: 100%;
}

.service-item {
    text-align: center;
    flex: 1 1 0;
    min-width: 0;
}

.service-icon {
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin-bottom: 1rem;
    display: inline-block;
    transition: transform 0.2s cubic-bezier(.4,2,.6,1);
}

.service-item:hover .service-icon {
    transform: scale(1.2);
}

.service-item h4 {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.service-item p {
    font-size: 0.98rem;
    color: #666;
    margin: 0;
}


/*about介绍模块样式*/
.about-section-wrapper {
    width: 100%;
    max-width: 1900px;
    height: 1200px;
    background: #fff;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}

.about-inner-container {
    width: 90%;
    max-width: 1700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-title-area {
    margin-bottom: 2.5rem;
    text-align: left;
    width: 100%;
}

    .about-title-area h2 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: #222;
        letter-spacing: 0.12em;
        background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 1px 2px 8px rgba(255, 126, 95, 0.08);
        display: inline-block;
        position: relative;
    }

        .about-title-area h2::after {
            content: "";
            display: block;
            width: 40px;
            height: 4px;
            margin-top: 10px;
            background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
            border-radius: 2px;
            margin-left: 0;
        }

    .about-title-area h3 {
        font-size: 1.3rem;
        color: #888;
        font-weight: 400;
        margin-bottom: 0;
        letter-spacing: 0.08em;
        text-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }

.about-timeline-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.about-timeline-item {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* 让图片和内容等高 */
    background: transparent;
    width: 100%;
    min-height: 800px; /* 与图片高度一致 */
    margin-bottom: 1.5rem;
}

.about-timeline-image {
    flex: 0 0 600px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: 800px;
}

    .about-timeline-image img {
        width: 600px;
        height: 800px;
        object-fit: cover;
        border-radius: 24px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        background: #f7f7f7;
        display: block;
    }

.about-timeline-panel {
    flex: 1 1 0;
    padding-left: 2.5rem;
    padding-right: 2.5rem; /* 增加右侧内边距 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.about-timeline-heading h4 {
    font-size: 1.2rem;
    color: #ff7e5f;
    margin-bottom: 0.3rem;
    font-weight: 600;
}

.about-timeline-heading .subheading {
    font-size: 1.4rem;
    color: #222;
    font-weight: 700;
    margin-bottom: 0.7rem;
}

.about-timeline-body p {
    font-size: 1.25rem; /* 字体更大 */
    color: #444; /* 更深的灰色，提升可读性 */
    margin: 0 0 1.2em 0; /* 增加段落间距 */
    line-height: 2; /* 行高更大 */
    letter-spacing: 0.03em; /* 字间距微调 */
    font-weight: 400;
    text-align: justify; /* 两端对齐让文本更饱满 */
    text-shadow: 0 1px 4px rgba(0,0,0,0.03); /* 轻微阴影增加层次 */
    background: linear-gradient(90deg, #fff 80%, #fff7f0 100%);
    border-radius: 6px;
    padding: 0.5em 1em;
    white-space: pre-line; /* 关键：保留回车换行 */
}


/*实现porfoli的内容样式*/
.portfolio-section-wrapper {
    width: 100%;
    max-width: 1900px;
    height: 1200px;
    background: #fff;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.04);
    overflow: hidden;
}

.portfolio-inner-container {
    width: 90%;
    max-width: 1700px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.portfolio-content-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 3rem;
}

.portfolio-text-panel {
    flex: 1 1 0;
    max-width: 700px;
    padding: 2.5rem 2.5rem 2.5rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.portfolio-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 1rem;
    letter-spacing: 0.12em;
    background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: 1px 2px 8px rgba(255, 126, 95, 0.08);
    display: inline-block;
}

.portfolio-category {
    font-size: 1.2rem;
    color: #888;
    margin-bottom: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.08em;
}

.portfolio-desc {
    font-size: 1.18rem;
    color: #444;
    line-height: 2;
    letter-spacing: 0.02em;
    text-align: justify;
    margin-bottom: 2rem;
    background: linear-gradient(90deg, #fff 80%, #fff7f0 100%);
    border-radius: 6px;
    padding: 1.2em 1.5em;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    white-space: pre-line; /* 关键：识别回车换行 */
}

.portfolio-image-panel {
    flex: 0 0 700px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 900px;
}

.portfolio-image {
    width: 700px;
    height: 900px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    background: #f7f7f7;
    display: block;
}



/*实现team组的轮播展示样式*/

.team-section-wrapper {
    width: 100% !important;
    max-width: 1900px !important;
    background: #fff !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.04) !important;
    overflow: hidden !important;
    padding: 40px 0 !important;
}

.team-inner-container {
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}



.team-card {
    width: 370px;
    height: 850px;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .team-card img {
        width: 100%;
        height: 530px;
        object-fit: cover;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }

.team-card-body {
    padding: 16px;
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* align-items: center;  移除这行，避免居中影响margin-top */
    justify-content: flex-start; /* 保证内容从顶部开始 */
}

    .team-card-body h5 {
        margin: 50px 0 8px 0; /* 距离上方图片50px，底部8px */
        text-align: center; /* 如需居中标题文本 */
    }

.team-occupation {
    color: #888;
    font-size: 18px;
    margin-bottom: 8px;
}

.team-link {
    color: orangered;
    text-decoration: underline;
    font-size: 18px;
    position: absolute; /* 新增，绝对定位 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%);
    bottom: 35px; /* 距离底部100px */
}

/* Swiper 外层容器，已定义 .team-swiper 可继续使用 */
.team-swiper {
    width: 100%;
    /* 可根据需要设置最大宽度 */
}

/* Swiper 必须的结构 */
.swiper-wrapper {
    display: flex;
    align-items: stretch; /* 让所有 slide 高度一致 */
}

/* 每个 slide */
.swiper-slide {
    display: flex;
    justify-content: center; /* 卡片居中 */
    align-items: stretch;
    /* 不要设置 margin，间距由 spaceBetween 控制 */
    height: auto; /* 让卡片高度自适应 */
    box-sizing: border-box;
}

/* 卡片样式已在 .team-card 定义，无需重复 */


.team-title-area {
    margin-bottom: 2.5rem;
    text-align: center;
    width: 100%;
}

    .team-title-area h2 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: #222;
        letter-spacing: 0.12em;
        background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 1px 2px 8px rgba(255, 126, 95, 0.08);
        display: inline-block;
        position: relative;
    }

        .team-title-area h2::after {
            content: "";
            display: block;
            width: 40px;
            height: 4px;
            margin-top: 10px;
            background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
            border-radius: 2px;
            margin-left: 0;
        }

    .team-title-area h3 {
        font-size: 1.3rem;
        color: #888;
        font-weight: 400;
        margin-bottom: 0;
        letter-spacing: 0.08em;
        text-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }




/*    实现门店地址的样式*/

.store-section-wrapper {
    width: 100%;
    max-width: 1900px;
    height: 1200px;
    background: #fff;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}

.store-inner-container {
    width: 90%;
    max-width: 1700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.store-title-area {
    margin-bottom: 2.5rem;
    text-align: left;
    width: 100%;
}

    .store-title-area h2 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: #222;
        letter-spacing: 0.12em;
        background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 1px 2px 8px rgba(255, 126, 95, 0.08);
        display: inline-block;
        position: relative;
    }

        .store-title-area h2::after {
            content: "";
            display: block;
            width: 40px;
            height: 4px;
            margin-top: 10px;
            background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
            border-radius: 2px;
            margin-left: 0;
        }

    .store-title-area h3 {
        font-size: 1.3rem;
        color: #888;
        font-weight: 400;
        margin-bottom: 0;
        letter-spacing: 0.08em;
        text-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }

.store-timeline-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.store-timeline-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: transparent;
    width: 100%;
    min-height: 400px;
    margin-bottom: 1.5rem;
}
.store-timeline-image {
    flex: 0 0 600px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: 400px;
}

    .store-timeline-image img {
        width: 600px;
        height: 400px;
        object-fit: cover;
        border-radius: 24px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        background: #f7f7f7;
        display: block;
    }

.store-timeline-panel {
    flex: 1 1 0;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
    .store-timeline-panel h3 {
        font-size: 2rem;
        font-weight: 700;
        color: #222;
        margin-bottom: 0.5rem;
        letter-spacing: 0.08em;
    }

.store-timeline-heading h4 {
    font-size: 1.2rem;
    color: #ff7e5f;
    margin-bottom: 0.3rem;
    font-weight: 600;
}


.store-timeline-panel .section-subheading {
    font-size: 1.2rem;
    color: #888;
    font-weight: 400;
    margin-bottom: 1.2rem;
    letter-spacing: 0.05em;
}

.store-timeline-heading .subheading {
    font-size: 1.4rem;
    color: #222;
    font-weight: 700;
    margin-bottom: 0.7rem;
}

.store-timeline-body p {
    font-size: 1.15rem;
    color: #444;
    margin: 1.2em 0 0 0;
    line-height: 2;
    letter-spacing: 0.02em;
    font-weight: 400;
    text-align: justify;
    background: linear-gradient(90deg, #fff 80%, #fff7f0 100%);
    border-radius: 6px;
    padding: 0.5em 1em;
    white-space: pre-line;
}


#amap-container {
    width: 100%;
    max-width: 1200px;
    height: 500px;
    margin: 40px auto 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    background: #f7f7f7;
}


/*实现表单的样式*/
.form-image-form-container {
    width: 100%;
    max-width: 1900px;
    height: 1000px;
    margin: 0 auto 40px auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.04);
    overflow: hidden;
    gap: 3rem;
    box-sizing: border-box;
}



.form-section-wrapper {
    flex: 1 1 0;
    max-width: 700px;
    min-width: 320px;
    height: auto;
    margin: 0;
    box-shadow: none;
    border-radius: 16px;
    background: #fff;
    padding: 40px 32px 32px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.form-title-area {
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
}

    .form-title-area h2 {
        font-size: 2rem;
        font-weight: 700;
        color: #222;
        letter-spacing: 0.12em;
        background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 1px 2px 8px rgba(255, 126, 95, 0.08);
        display: inline-block;
        position: relative;
    }

.form-group {
    width: 100%;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

    .form-group label {
        font-size: 1.1rem;
        color: #333;
        margin-bottom: 0.5rem;
        font-weight: 500;
    }

    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid #eee;
        border-radius: 8px;
        font-size: 1rem;
        background: #fafbfc;
        transition: border-color 0.2s;
        resize: none;
    }

        .form-group input:focus,
        .form-group textarea:focus {
            border-color: #ff7e5f;
            outline: none;
            background: #fff;
        }

    .form-group textarea {
        min-height: 100px;
        max-height: 240px;
    }

.form-submit-btn {
    width: 100%;
    padding: 0.9rem 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(255, 126, 95, 0.08);
    transition: background 0.2s, box-shadow 0.2s;
}

    .form-submit-btn:hover,
    .form-submit-btn:focus {
        background: linear-gradient(90deg, #feb47b 0%, #ff7e5f 100%);
        box-shadow: 0 2px 8px rgba(255, 126, 95, 0.15);
        outline: none;
    }


.form-image-panel {
    flex: 0 0 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #fff;
    margin-left:60px;
}

    .form-image-panel img {
        width: 600px;
        height: 800px;
        object-fit: cover;
        border-radius: 24px;

        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        background: #f7f7f7;
        display: block;
    }




.outer-image-wrapper {
    width: 100%;
    max-width: 1900px;
    height: 900px;
    margin: 0 auto 40px auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end; /* 关键：靠右对齐 */
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.04);
    overflow: hidden;
/*    gap: 3rem;*/
    box-sizing: border-box;
}




.outer-image-wrapper {
    width: 100%;
    max-width: 1900px;
    height: 900px;
    margin: 0 auto 40px auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.04);
    overflow: hidden;
    box-sizing: border-box;
}

.image-title-panel {
    flex: 1 1 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

.image-title-panel-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    position: relative;
    /* 让内容撑满左侧区域 */
}

    .image-title-panel-inner h2 {
        font-size: 2.2rem;
        font-weight: 700;
        color: #ff7e5f;
        line-height: 1.3;
        margin: 100px 0 0 50px; /* 距顶部100px，左侧50px */
        letter-spacing: 0.08em;
        background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 1px 2px 8px rgba(255, 126, 95, 0.08);
    }
    .image-title-panel-inner h3 {
        font-size: 1.35rem;
        font-weight: 600;
        color: #ff7e5f;
        margin: 24px 0 0 50px; /* 距离h2下方24px，左侧50px对齐 */
        letter-spacing: 0.06em;
        background: linear-gradient(90deg, #feb47b 0%, #ff7e5f 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 0 2px 8px rgba(255, 126, 95, 0.10);
        border-left: 4px solid #ff7e5f;
        padding-left: 16px;
        line-height: 1.5;
    }

.image-title-html-scroll {
    margin-left: 50px; /* 距左侧50px */
    margin-top: 100px; /* 距标题50px */
    margin-right: 50px; /* 距右侧图片50px */
    background: #fff7f0;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(255,126,95,0.08);
    padding: 24px 20px;
    font-size: 1.15rem;
    color: #444;
    line-height: 2;
    overflow-y: auto;
    /* 关键：高度自适应，底部与图片底部对齐 */
    /* 900px(外层高) - 100px(标题上边距) - 50px(标题下边距) - 32px(标题高度大约32px) - 50px(底部安全距离) */
    /* 你可以根据实际标题高度微调 */
    height: calc(900px - 100px - 50px - 32px - 50px);
    max-height: 500px; /* 防止内容过多撑破 */
    /* 滚动条美化 */
    scrollbar-width: thin;
    scrollbar-color: #ff7e5f #fff7f0;
}

    .image-title-html-scroll::-webkit-scrollbar {
        width: 8px;
        background: #fff7f0;
    }

    .image-title-html-scroll::-webkit-scrollbar-thumb {
        background: #ff7e5f;
        border-radius: 4px;
    }









.fixed-scroll-container {
    width: 400px;
    height: 740px;
    overflow: hidden;
    background: #000;
    position: relative;
    margin-top: 100px;
    margin-right: 100px;
}



.fixed-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 740px;
    z-index: 10; /* 提高层级 */
    pointer-events: none;
    -webkit-user-select: none; /* Safari、Chrome */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
    object-fit: cover;
    margin-right: 50px;
}

.scroll-image-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    z-index: 2;
}

.scroll-image {
    width: 400px;
    height: auto;
    display: block;
    object-fit: contain;
}













.site-footer {
    background: #222;
    color: #fff;
    padding: 40px 0 20px 0;
    font-size: 1rem;
}

.site-footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-company,
.footer-nav,
.footer-contact {
    flex: 1 1 220px;
    min-width: 200px;
}

.footer-nav {
    flex: 1 1 180px;
    min-width: 160px;
}

.footer-company-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 12px;
}
    .footer-company-title img {
        width: 32px;
        height: 32px;
        margin-right: 8px;
        margin-left:10px;
    }
.footer-company-address {
    margin-bottom: 10px;
}

.footer-nav-title,
.footer-contact-title {
    font-weight: 600;
    margin-bottom: 12px;
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-nav ul li {
        margin-bottom: 4px;
    }

        .footer-nav ul li a {
            color: #fff;
            text-decoration: none;
            transition: color 0.2s;
        }

            .footer-nav ul li a:hover {
                color: #ff7e5f;
                text-decoration: underline;
            }

.footer-contact-phone i,
.footer-contact-email i {
    color: #ff7e5f;
    margin-right: 8px;
}

.footer-contact-phone,
.footer-contact-email {
    margin-bottom: 8px;
}

.footer-contact-social {
    margin-top: 8px;
}

.footer-wechat {
    display: inline-block;
    position: relative;
    cursor: pointer;
}

    .footer-wechat .fa-weixin {
        color: #1AAD19;
        font-size: 1.3rem;
        vertical-align: middle;
        transition: color 0.2s;
    }

        .footer-wechat .fa-weixin:hover {
            color: #128C13;
        }

.footer-wechat-qrcode {
    display: block;
    position: absolute;
    top: 0px;
    left: 40px;
    background: #fff;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 999;
}

    .footer-wechat-qrcode img {
        width: 100px;
        height: 100px;
        display: block;
    }

.footer-wechat:hover .footer-wechat-qrcode {
    display: block;
}

.site-footer-icp {
    text-align: center;
    color: #bbb;
    font-size: 0.95rem;
    margin-top: 30px;
}

    .site-footer-icp a {
        color: #bbb;
        text-decoration: underline;
        transition: color 0.2s;
    }

        .site-footer-icp a:hover {
            color: #ff7e5f;
        }









/* 诊所环境 Banner 样式 */


.env-banner-container {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    min-width: 100vw;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.env-banner-image {
    width: 100vw; /* 关键：宽度等于视口宽度 */
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
}

.env-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 120px;
    color: #fff;
}

.env-banner-title {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 1rem;
    text-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.env-banner-subtitle {
    font-size: 1.5rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* 诊所环境标题样式 */
.env-custom-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    margin-top: 32px;
    margin-bottom: 18px;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #ffecd2 0%, #fcb69f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: 0 2px 8px rgba(255, 126, 95, 0.10);
    border-bottom: 3px solid #ff7e5f;
    display: block;
    padding: 0.5em 2em;
    box-shadow: 0 2px 8px rgba(255, 126, 95, 0.08);
    width: auto;
}

.env-centered-title {
    font-size: 1rem;
    font-weight: 700;
    color: #222;
    letter-spacing: 2px;
}

/* 诊所环境轮播图外层 */
.env-carousel-outer {
    width: 1250px;
    height: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    position: relative;
    overflow: visible;
    display: block;
    margin-top: 70px;
    margin-bottom: 70px;
}

/* Swiper 容器 */
.env-swiper {
    width: 100%;
    height: 100%;
}

/* Swiper 内容区 */
.swiper-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
}

/* Swiper 单个幻灯片 */
.swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    background: transparent;
}

/* 轮播图标题 */
.env-carousel-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: #222;
    margin-top: 32px;
    margin-bottom: 18px;
    letter-spacing: 2px;
    text-shadow: 0 2px 8px rgba(34, 34, 34, 0.08);
    display: block;
    padding: 0.5em 2em;
    width: auto;
}

/* 轮播图图片容器 */

.bannerlandingpage-mobile {
    display: none;
}


.env-carousel-image-container {
    width: 100%;
    height: 725px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f7f7;
    border-radius: 16px;
    overflow: hidden;
}

/* 轮播图图片 */
.env-carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

/* Swiper 导航按钮样式 */
.env-swiper .swiper-button-next,
.env-swiper .swiper-button-prev {
    top: 50%;
    transform: translateY(-50%);
    color: #222;
    z-index: 10;
    width: -moz-max-content; /* Firefox */
    width: max-content; /* Edge 79+、Chrome、Safari等 */
}

.env-swiper .swiper-button-prev {
    left: 10px;
    right: auto;
}

.env-swiper .swiper-button-next {
    right: 10px;
    left: auto;
}







/*banner页面的统一渲染样式*/


.banner-container {
    /*position: relative;
    width: 100%;
    max-width: 1900px;
    height: 600px;
    margin: 0 auto;
    overflow: hidden;
    background: #000;*/
    /*    display: flex;
    justify-content: center;
    align-items: center;*/
    position: relative;
    width: 100vw; /* 宽度占满视口 */
    max-width: 100vw; /* 最大宽度同视口 */
    min-width: 100vw; /* 最小宽度同视口，防止溢出 */
    height: 600px;
    margin: 0 auto;
    overflow: hidden;
    background: #000;
}

.banner-image {
    /*    width: 100%;
    height: 600px;
    object-fit: cover;
    display: block;
    margin: 0 auto;*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
}

.banner-overlay {
    /*    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 120px;
    color: #fff;*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 120px;
    color: #fff;
    z-index: 2;
}

.banner-title {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 1rem;
    text-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.banner-subtitle {
    font-size: 1.5rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}



/*
诊所简介的样式实现*/


/* 诊所介绍外层容器 */
/* 诊所介绍外层容器 */
.clinic-intro-section {
    width: 100%;
    max-width: 1200px;
    margin: 60px auto 60px auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0, 123, 255, 0.08);
    padding: 36px 24px 36px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* 标题区，居中且顶部 */
.clinic-intro-header {
    width: 100%;
    text-align: center;
    margin-bottom: 24px;
}

    .clinic-intro-header h2 {
        font-size: 2.2rem;
        font-weight: 700;
        color: #007bff;
        margin-bottom: 0.5rem;
        letter-spacing: 0.08em;
        background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 0 2px 8px rgba(0,123,255,0.08);
    }

    .clinic-intro-header h3 {
        font-size: 1.2rem;
        color: #555;
        font-weight: 400;
        margin-bottom: 0;
        letter-spacing: 0.06em;
        text-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }

/* 图片+介绍横向容器 */
.clinic-intro-mainbox {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    background: linear-gradient(90deg, #f7faff 80%, #e3f0ff 100%);
    border-radius: 16px;
    box-shadow: 0 1px 8px rgba(0,123,255,0.06);
    overflow: hidden;
    min-height: 320px;
}

/* 图片左侧 */
.clinic-intro-image {
    flex: 0 0 340px;
    max-width: 340px;
    background: #f7faff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #e3f0ff;
}

    .clinic-intro-image img {
        width: 100%;
        height: 340px;
        object-fit: cover;
        border-radius: 0;
        display: block;
    }

/* 介绍文字右侧 */
.clinic-intro-text {
    flex: 1 1 0;
    padding: 36px 32px;
    font-size: 1.15rem;
    color: #222;
    line-height: 2;
    display: flex;
    align-items: center;
    background: transparent;
    min-height: 320px;
    word-break: break-all;
}

    .clinic-intro-text h4 {
        font-size: 1.2rem;
        color: #222;
        font-weight: 600;
        margin-bottom: 1rem;
    }

/* 响应式适配 */
@media (max-width: 900px) {
    .clinic-intro-section {
        padding: 18px 2vw;
    }

    .clinic-intro-mainbox {
        flex-direction: column;
        min-height: unset;
    }

    .clinic-intro-image {
        max-width: 100%;
        border-right: none;
        border-bottom: 1px solid #e3f0ff;
    }

        .clinic-intro-image img {
            height: 180px;
        }

    .clinic-intro-text {
        padding: 18px 10px;
        min-height: 100px;
    }
}



/*实现诊所简介的各项内容的渲染*/


.clinic-imageitem-list {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 0 auto;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.clinic-imageitem {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: linear-gradient(90deg, #f7faff 80%, #e3f0ff 100%);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,123,255,0.08);
    overflow: hidden;
    padding: 32px 24px;
    gap: 32px;
}

.clinic-imageitem-content {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.clinic-imageitem-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #007bff;
    margin-bottom: 1rem;
    letter-spacing: 0.06em;
    background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: 0 2px 8px rgba(0,123,255,0.08);
}

.clinic-imageitem-desc {
    font-size: 1.08rem;
    color: #333;
    line-height: 2;
    background: #fff;
    border-radius: 8px;
    padding: 18px 20px;
    box-shadow: 0 1px 4px rgba(0,123,255,0.04);
    white-space: pre-line;
}

.clinic-imageitem-img {
    flex: 0 0 340px;
    max-width: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7faff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(0,123,255,0.06);
}

    .clinic-imageitem-img img {
        width: 340px;
        height: 340px;
        object-fit: cover;
        border-radius: 12px;
        display: block;
    }

@media (max-width: 900px) {
    .clinic-imageitem {
        flex-direction: column-reverse;
        padding: 18px 8px;
        gap: 18px;
    }

    .clinic-imageitem-img {
        max-width: 100%;
    }

        .clinic-imageitem-img img {
            width: 100%;
            height: 180px;
        }
}






/*实现医生团队页面的样式*/

/*.doctor-list {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.doctor-row {
    display: flex;
    flex-direction: row;
    gap: 32px;
    margin-bottom: 0;
}

.doctor-card {
    flex: 1 1 0;
    display: flex;
    flex-direction: row;
    background: linear-gradient(90deg, #f7faff 80%, #e3f0ff 100%);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,123,255,0.08);
    overflow: hidden;
    padding: 28px 20px;
    gap: 24px;
    min-width: 0;
}

.doctor-card-left {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
}

.doctor-photo img {
    width: 180px;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 1px 8px rgba(0,123,255,0.10);
    background: #f7faff;
    display: block;
}

.doctor-info {
    text-align: center;
}

.doctor-name {
    font-size: 1.18rem;
    font-weight: 700;
    color: #007bff;
    margin-bottom: 0.3rem;
    letter-spacing: 0.06em;
}

.doctor-jobtitle {
    font-size: 1rem;
    color: #555;
    font-weight: 500;
    margin-bottom: 0.2rem;
}

.doctor-card-right {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.doctor-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 0.7rem;
    letter-spacing: 0.04em;
}

.doctor-desc {
    font-size: 1.05rem;
    color: #333;
    line-height: 2;
    background: #fff;
    border-radius: 8px;
    padding: 14px 18px;
    box-shadow: 0 1px 4px rgba(0,123,255,0.04);
    white-space: pre-line;
    min-height: 80px;
}*/

/* 响应式：移动端一列 */
/*@media (max-width: 900px) {
    .doctor-row {
        flex-direction: column;
        gap: 18px;
    }

    .doctor-card {
        flex-direction: column;
        padding: 16px 8px;
        gap: 12px;
    }

    .doctor-card-left {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .doctor-photo img {
        width: 100px;
        height: 120px;
    }
}*/




.doctor-list-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    max-width: 1200px;
    margin: 40px auto 0 auto;
}

.doctor-card {
    flex: 0 0 calc(50% - 16px); /* 两列，间距为gap/2 */
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    background: linear-gradient(90deg, #f7faff 80%, #e3f0ff 100%);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,123,255,0.08);
    overflow: hidden;
    padding: 28px 20px;
    gap: 24px;
    min-width: 0;
    margin-bottom: 0;
}

.doctor-card-left {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
}

.doctor-photo img {
    width: 180px;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 1px 8px rgba(0,123,255,0.10);
    background: #f7faff;
    display: block;
}

.doctor-info {
    text-align: center;
}

.doctor-name {
    font-size: 1.18rem;
    font-weight: 700;
    color: #007bff;
    margin-bottom: 0.3rem;
    letter-spacing: 0.06em;
}

.doctor-jobtitle {
    font-size: 1rem;
    color: #555;
    font-weight: 500;
    margin-bottom: 0.2rem;
}

.doctor-card-right {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
}

.doctor-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 0.7rem;
    letter-spacing: 0.04em;
}

.doctor-desc {
    font-size: 1.05rem;
    color: #333;
    line-height: 2;
    background: #fff;
    border-radius: 8px;
    padding: 14px 18px;
    box-shadow: 0 1px 4px rgba(0,123,255,0.04);
    white-space: pre-line;
    min-height: 80px;
}

/* 响应式：移动端一列 */
@media (max-width: 900px) {
    .doctor-list-flex {
        flex-direction: column;
        gap: 18px;
    }

    .doctor-card {
        flex: 1 1 100%;
        flex-direction: column;
        padding: 16px 8px;
        gap: 12px;
    }

    .doctor-card-left {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .doctor-photo img {
        width: 100px;
        height: 120px;
    }
}





.decorated-title-box {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 32px auto;
    padding: 32px 24px 24px 24px;
    background: linear-gradient(90deg, #f7faff 80%, #e3f0ff 100%);
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0,123,255,0.10);
    position: relative;
    text-align: center;
}

.decorated-title {
    font-size: 2rem;
    font-weight: 700;
    color: #007bff;
    letter-spacing: 0.08em;
    margin: 0;
    background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: 0 2px 8px rgba(0,123,255,0.10);
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
}

    .decorated-title::after {
        content: "";
        display: block;
        width: 80px;
        height: 4px;
        margin: 18px auto 0 auto;
        background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
        border-radius: 2px;
        box-shadow: 0 1px 4px rgba(0,123,255,0.10);
    }





/*实现医师介绍页的渲染*/

.doctor-detail-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto 0 auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0,123,255,0.10);
    overflow: hidden;
    margin-bottom:40px;
}

.doctor-banner {
    width: 100%;
    height: 150px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}







.doctor-banner-overlay {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,123,255,0.18) 0%, rgba(0,198,255,0.10) 100%);
    display: flex;
    align-items: flex-end;
    padding: 0 0 32px 48px;
}

.doctor-banner-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
/*    text-shadow: 0 2px 8px rgba(0,123,255,0.18);*/
    letter-spacing: 0.12em;
/*    background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);*/
    -webkit-background-clip: text;
/*    -webkit-text-fill-color: transparent;*/
    background-clip: text;
    text-fill-color: transparent;
    text-fill-color: transparent;

}
.doctor-banner-jobtitle {
    font-size: 1.35rem;
    font-weight: 500;
    color: #fff;
    margin-top: 0.5rem;
    margin-left: 2px;
    letter-spacing: 0.06em;
/*    text-shadow: 0 2px 8px rgba(0,123,255,0.15);*/
/*    background: linear-gradient(90deg, #00c6ff 0%, #007bff 100%);*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
/*    text-fill-color: transparent;*/
    display: block;

}


.doctor-detail-main {
    display: flex;
    flex-direction: row;
    gap: 40px;
    padding: 40px 32px;
}

.doctor-detail-left {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.doctor-detail-photo img {
    width: 600px;
    height: 800px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,123,255,0.10);
    background: #f7faff;
    display: block;
}

.doctor-detail-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: #007bff;
    margin-top: 12px;
    letter-spacing: 0.08em;

}

.doctor-detail-jobtitle {
    font-size: 1.08rem;
    color: #555;
    font-weight: 500;
    margin-bottom: 0.2rem;
}

.doctor-detail-right {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}

.doctor-detail-section {
    background: linear-gradient(90deg, #f7faff 80%, #e3f0ff 100%);
    border-radius: 12px;
    box-shadow: 0 1px 8px rgba(0,123,255,0.06);
    padding: 24px 20px;
}

.doctor-detail-section-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #007bff;
    margin-bottom: 0.7rem;
    letter-spacing: 0.04em;
    background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.doctor-detail-section-content {
    font-size: 1.05rem;
    color: #333;
    line-height: 2;
    background: #fff;
    border-radius: 8px;
    padding: 14px 18px;
    box-shadow: 0 1px 4px rgba(0,123,255,0.04);
    white-space: pre-line;
    min-height: 60px;
}

@media (max-width: 900px) {
    .doctor-detail-main {
        flex-direction: column;
        gap: 18px;
        padding: 18px 8px;
    }

    .doctor-detail-left {
        flex-direction: row;
        align-items: flex-start;
        gap: 18px;
    }

    .doctor-detail-photo img {
        width: 100px;
        height: 120px;
    }
}







/*
实现项目模板的页面渲染*/

.project-outer-container {
    display: flex;
    flex-direction: column; /* 保持标题在顶部 */
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    width: 100%; /* 设置宽度为 1900px 的 70% */
    max-width: 1330px; /* 1900px 的 70% */
    /*margin: 0 auto;*/ /* 居中对齐 */
    /*    background-color: #ff7e5f;*/
    /*    background: linear-gradient(90deg, #ff7e5f, #feb47b,#fcb69f);*/
    background: linear-gradient(90deg, #1a2a6c, #b21f1f, #fdbb2d);
    border-radius: 16px; /* 可根据需求调整圆角 */
    position: relative; /* 确保子元素可以相对于容器定位 */
    margin-bottom: 20px;
    margin-top: 20px;
    /*    background: linear-gradient(45deg, #ff7e5f 25%, #feb47b 25%, #feb47b 50%, #fcb69f 50%, #fcb69f 75%, #ff7e5f 75%);*/
    /*    background: linear-gradient(45deg, #007bff 25%, #00c6ff 25%, #00c6ff 50%, #66d9ff 50%, #66d9ff 75%, #007bff 75%);*/
    /*background-size: 400px 400px;*/ /* 每个色块的宽度和高度 */
}

.project-title {
    position: relative; /* 修改为相对定位，避免被覆盖 */
    text-align: center; /* 文本居中 */
   

    color: #fff; /* 设置标题颜色 */
    margin-bottom: 20px; /* 增加与下方内容的间距 */
    margin-top:20px;

}
.project-subtitle {
    position: relative; /* 修改为相对定位，避免被覆盖 */
    text-align: center; /* 文本居中 */
    font-size: 1.2rem;
    color: red; /* 设置标题颜色 */
    font-weight: bold;
    
    margin-bottom: 20px; /* 增加与下方内容的间距 */
    margin-top: 20px;
    margin-left:100px;
    margin-right:100px;
}

    .project-title h2 {
        margin: 0; /* 移除默认外边距 */
        font-size: 2.5rem; /* 可根据需求调整字体大小 */
        font-weight: bold; /* 加粗标题 */
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3),
            0 1px 0 rgba(255,255,255,0.5);
        display: inline-block;
        border-bottom: 2px dashed rgba(0,0,0,0.5);
        padding-bottom:5px;
    }

/*.project-content {
    display: flex;
    flex-direction: row;*/ /* 横向排列图片和文字模块 */
    /*justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 20px;*/ /* 图片和文字模块之间的间距 */
    /*background-color: #b1e3f0;*/ /* 可根据需求调整背景色 */
    /*border-radius: 16px;

    box-shadow: 0 4px 8px rgba(0,0,0,0.2),
            0 6px 20px rgba(0,0,0,0.19);
}*/

.project-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 20px;
    background: linear-gradient(180deg, #e3f6fd 0%, #b1e3f0 60%, #a0c4d8 100%);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 1.5px 0 rgba(255,255,255,0.7) inset, 0 0.5px 0 rgba(255,255,255,0.8) inset;
    position: relative;
    overflow: visible;
}




.project-image-container {
    width: 50%; /* 图片模块占据左侧 50% */
    height: auto; /* 高度自适应 */
    padding: 10px;
    background-color: transparent;
    display: flex; /* 使图片居中对齐 */
    justify-content: center;
    align-items: center;
}

    .project-image-container img {
        width: 100%;
        height: auto;
        object-fit: cover; /* 确保图片按比例填充容器 */
        display: block;
        border-radius: 8px; /* 可选：为图片添加圆角 */
/*        box-shadow: 0 4px 8px rgba(0,0,0,0.2),
            0 6px 20px rgba(0,0,0,0.19);*/
    }

.project-text-container {
    width: 50%; /* 文字模块占据右侧 50% */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 保持文字内容在容器内垂直居中 */
    align-items:flex-start;
    gap:20px;
    text-align: left;
}

    .project-text-container h3 {

        font-size:1.5rem;
        font-weight:bold;
        color:#222;
        margin-bottom:10px;
        text-shadow:1px 1px 4px rgba(0,0,0,0.2);


    }
    .project-text-container p {
        font-size: 1rem; /* 可根据需求调整字体大小 */
        color:#555;
        line-height:1.8;
        margin:0;
        padding:0 20px;
        text-align: justify;


    }


.text-item {
    display: flex;
    flex-direction: row; /* 横向排列子元素 */
    align-items: top; /* 垂直居中对齐 */
    gap: 10px; /* 设置 i 和文字容器之间的间距 */
    font-size: 1.5rem;
    color: #222;
}

    .text-item i {
        font-size: 1.5rem; /* 图标大小 */
        color: #007bff; /* 图标颜色 */
        margin: 0; /* 移除默认外边距 */

    }

.text-content {
    display: flex;
    flex-direction: column; /* 垂直排列 h3 和 p */
    gap: 10px; /* 设置 h3 和 p 之间的间距 */
}

    .text-content h3 {
        font-size: 1.5rem; /* 设置标题字体大小 */
        font-weight: bold; /* 加粗标题 */
        color: #222; /* 设置标题颜色 */
        margin: 0; /* 移除默认外边距 */
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); /* 添加轻微阴影 */
    }

    .text-content p {
        font-size: 1rem; /* 设置段落字体大小 */
        color: #555; /* 设置段落文字颜色 */
        line-height: 1.8; /* 增加行高，提升可读性 */
        margin-left:10px;
        margin-right:20px;
        padding: 0; /* 移除内边距 */
        text-align: justify; /* 文本两端对齐 */
    }


.rounded-rectangle {
    width: 500px; /* 长方形的宽度 */
    height: 50px; /* 长方形的高度 */
    /*background-color: #ff7e5f;*/ /* 背景颜色 */
    background: linear-gradient(to bottom, #ff8a65, #ff7e5f);
    border-radius: 50px; /* 设置圆角半径，值为高度的一半 */

    box-shadow: inset 0 4px 6px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.3);
    display: flex; /* 可选：用于内容居中 */
    justify-content: center; /* 可选：水平居中 */
    align-items: center; /* 可选：垂直居中 */
    color: #fff; /* 可选：文字颜色 */
    font-size: 1.5rem; /* 可选：文字大小 */
    font-weight: bold; /* 可选：文字加粗 */
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5), /* 高光效果 */
    -1px -1px 0 rgba(0, 0, 0, 0.3); /* 雕刻*/
}


/*实现多个圆圈的CSS样式效果*/

/* 容器样式 */
/* 容器样式 */
.circle-container {
    display: flex;
    justify-content: center; /* 圆圈之间均匀分布 */
    align-items: flex-start; /* 确保所有圆圈顶部对齐 */
    width: 100%;
    max-width: 1200px; /* 最大宽度 */
    margin: 0 auto;
    padding: 50px;
    gap: 40px;
}

/* 每个圆圈和描述的容器 */
.circle-item {
    display: flex;
    flex-direction: column; /* 垂直排列圆圈和描述 */
    align-items: center; /* 水平居中对齐 */
    text-align: center; /* 文本居中对齐 */
}

/* 圆圈样式 */
.circle-background {
    position: relative;
    width: 270px; /* 容器宽度 */
    height: 270px; /* 容器高度 */
    background: #f0f0f0; /* 背景色 */
    border-radius: 50%; /* 大圆形 */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    display: flex; /* 使用 flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    font-size: 1.5rem; /* 设置文字大小 */
    font-weight: bold; /* 设置文字加粗 */
    color: #fff; /* 设置文字颜色 */
    text-align: center; /* 文字居中对齐 */
}

    .circle-background::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 250px; /* 大圆直径 */
        height: 250px; /* 大圆直径 */
        background: #007bff; /* 大圆颜色 */
        border-radius: 50%; /* 圆形 */
        transform: translate(-50%, -50%);
        box-shadow: 0 0 15px rgba(0, 123, 255, 0.5); /* 大圆阴影 */
        z-index: 1; /* 确保背景圆在文字后面 */
    }

    .circle-background span {
        position: relative;
        z-index: 2; /* 确保文字在背景圆的上方 */
        font-size: 2rem;
    }

/* 描述文字样式 */
.circle-item p {
    margin-top: 50px; /* 与圆圈的间距 */
    font-size: 1.5rem; /* 描述文字大小 */
    font-weight:bold;

    color: #222;  描述文字颜色 
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5), /* 高光效果 */
    -1px -1px 0 rgba(0, 0, 0, 0.3); /* 雕刻 */
}

/*实现表格的样式*/
.pretty-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0,123,255,0.08) !important;
    overflow: hidden !important;
    margin: 32px 0 !important;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 1.5px 0 rgba(255,255,255,0.7) inset, 0 0.5px 0 rgba(255,255,255,0.8) inset;
}

    .pretty-table th, .pretty-table td {
        padding: 14px 18px !important;
        text-align: center !important;
        font-size: 1.08rem !important;
        border-bottom: 1px solid #e3f0ff !important;
    }

    .pretty-table th {
        background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%) !important;
        color: #fff !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        border-bottom: 2px solid #007bff !important;
    }

    .pretty-table tr:last-child td {
        border-bottom: none !important;
    }

    .pretty-table tbody tr:hover {
        background: linear-gradient(90deg, #f7faff 80%, #e3f0ff 100%) !important;
        transition: background 0.2s !important;
    }

    .pretty-table thead tr:first-child th:first-child {
        border-top-left-radius: 12px !important;
    }

    .pretty-table thead tr:first-child th:last-child {
        border-top-right-radius: 12px !important;
    }

    .pretty-table tbody tr:last-child td:first-child {
        border-bottom-left-radius: 12px !important;
    }

    .pretty-table tbody tr:last-child td:last-child {
        border-bottom-right-radius: 12px !important;
    }


.project-stage-gallery-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin: 32px 0;
    padding: 24px 70px;
    background: linear-gradient(90deg, #e3f6fd 0%, #b1e3f0 100%);
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0,123,255,0.10);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 1.5px 0 rgba(255,255,255,0.7) inset, 0 0.5px 0 rgba(255,255,255,0.8) inset;
}

.project-stage-gallery-item {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

    .project-stage-gallery-item img {
        width: 200px;
        height: 200px;
        object-fit: cover;
        border-radius: 18px;
        box-shadow: 0 2px 12px rgba(0,123,255,0.12);
        background: #fff;
        transition: transform 0.2s, box-shadow 0.2s;
        box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 1.5px 0 rgba(255,255,255,0.7) inset, 0 0.5px 0 rgba(255,255,255,0.8) inset;
    }

    .project-stage-gallery-item h3 {
        margin-top: 18px;
        margin-bottom: 10px;
        font-size: 1.25rem;
        font-weight: 700;
        color: #007bff;
        letter-spacing: 0.06em;
        text-align: center;
        background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 0 2px 8px rgba(0,123,255,0.10);
    }

    .project-stage-gallery-item p {
        font-size: 1rem;
        color: #444;
        line-height: 1.8;
        margin: 0 0 8px 0;
        padding: 12px 10px;
        background: #f7faff;
        border-radius: 10px;
        box-shadow: 0 1px 4px rgba(0,123,255,0.06);
        text-align: center;
        min-height: 60px;
    }

.treatsolution-outer-container {
    display: flex;
    flex-direction: column; /* 保持标题在顶部 */
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    width: 100%; /* 设置宽度为 1900px 的 70% */
    max-width: 1330px; /* 1900px 的 70% */

    background: #08def9;
    border-radius: 16px; /* 可根据需求调整圆角 */
    position: relative; /* 确保子元素可以相对于容器定位 */
    margin-bottom: 20px;
    margin-top: 20px;
}
.treatsolution-title {
    position: relative;
    color: #000;
    margin-top: 50px;
    margin-bottom: 50px;
    width: 100%;
    max-width: 100%; /* 保证与outer-container等宽 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    min-height: 90px;
}

    .treatsolution-title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 16px;
        background: linear-gradient(180deg, #f7faff 0%, #e3f0ff 60%, #b1e3f0 100%);
        box-shadow: 0 4px 24px rgba(0,123,255,0.10), 0 2px 8px rgba(0,0,0,0.10), 0 1.5px 0 rgba(255,255,255,0.7) inset, 0 -8px 24px rgba(255,255,255,0.18) inset;
        /* 镜面高光 */
        overflow: hidden;
        z-index: 0;
    }

    .treatsolution-title h2 {
        font-size: 2.5rem;
        font-weight: bold;
        margin: 0;
        position: relative;
        z-index: 2;
        padding: 24px 0;
        width: 100%;
        text-align: center;
        background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 0 2px 8px rgba(0,123,255,0.10);
        letter-spacing: 0.08em;
    }

.treatsolution-imageitem-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start; 
    width: 100%;
    max-width: 1330px; 
    margin-top:50px;

    padding: 20px;
    gap: 40px;
}

.treatsolution-imageitem-image {
    flex: 0 0 450px;
    max-width: 450px;
    display: flex;
    align-items: center;
    justify-content: center;


}




.treatsolution-main-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
    padding: 40px 0;
}

.treatsolution-imageitem-image {
    flex: 0 0 32%;
    max-width: 32%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .treatsolution-imageitem-image img {
        width: 100%;
        height: auto;
        border-radius: 16px;
        box-shadow: 0 2px 12px rgba(0,123,255,0.12);
        background: #fff;
        display: block;
    }

.treatsolution-capsule-grid {
    flex: 1 1 0;
    display: flex;
    flex-wrap: wrap;
    gap: 32px 40px; /* 行间距 列间距 */
    max-width: 100%;
    min-width: 0;
}

.treatsolution-circle-item {
    width: calc(50% - 20px); /* 两列，减去一半的列间距 */
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.treatsolution-circle-background {
    position: relative;
    width: 250px;
    height: 100px;
    background: #f0f0f0;
    border-radius: 100px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    overflow: hidden;
}

    .treatsolution-circle-background::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 220px;
        height: 70px;
        background: #007bff;
        border-radius: 85px;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);
        z-index: 1;
    }

    .treatsolution-circle-background span {
        position: relative;
        z-index: 2;
        font-size: 2rem;
    }

.treatsolution-circle-item p {
    margin-top: 30px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #222;
/*    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5), -1px -1px 0 rgba(0, 0, 0, 0.3);*/
    min-height: 48px;
}


.treatsolution-secondouter-container {
    display: flex;
    flex-direction: row; /* 横向排列 */
    align-items: flex-start;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
    padding: 40px 0;
}


.treatsolution-main-row-second {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
    padding: 40px 0;
}
.treatsolution-parallelogram-container {
    display: flex;
    flex-direction: row;
    align-items: center; /* 垂直居中 */
    justify-content: flex-start; /* 靠左对齐 */
    width: 100%;
    max-width: 800px; /* 足够容纳两个平行四边形 */
    margin: 0 auto;
    gap: 0; /* 两个平行四边形紧贴 */
    padding: 10px 0;
}

.treatsolution-parallelogram-bg {
    position: relative;
    width: 200x;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    background: none;
}

    .treatsolution-parallelogram-bg::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
        transform: skew(-20deg);
        z-index: 0;
        box-shadow: 0 4px 24px rgba(0,123,255,0.10);
    }

    .treatsolution-parallelogram-bg > * {
        position: relative;
        z-index: 1;
        color: #fff;
        font-size: 2rem;
        font-weight: bold;
        text-align: center;
        padding: 0 32px;
        white-space: nowrap;
    }

.treatsolution-little-parallelogram-bg {
    position: relative;
    width: 1000px;
    height: 100px; /* 保持高度一致，便于垂直居中 */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    background: none;
}

    .treatsolution-little-parallelogram-bg::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        /*        background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);*/
        background: #fff;
        transform: skew(-20deg);
        z-index: 0;
        box-shadow: 0 4px 24px rgba(0,123,255,0.10);
    }

    .treatsolution-little-parallelogram-bg > * {
        position: relative;
        z-index: 1;
        color: #000;
        font-size: 1.1rem;
        font-weight: bold;
        text-align: center;
        padding: 0 24px;
        white-space: normal; /* 允许换行，内容多时自动换行 */
        line-height: 1.7;
    }





.treatsolution-thirdouter-container {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
/*    background: #fff;*/
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,123,255,0.10);
    padding: 40px 0;
}

.treatsolution-main-row-third {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}

.treatsolution-imageitem-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 48px;
    width: 100%;
    max-width: 100%;
/*    background: linear-gradient(90deg, #f7faff 80%, #e3f0ff 100%);*/
    border-radius: 16px;
/*    box-shadow: 0 2px 12px rgba(0,123,255,0.08);*/
    padding: 32px 24px;
}

.treatsolution-imageitem-image {
    flex: 0 0 320px;
    max-width: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .treatsolution-imageitem-image img {
        width: 100%;
        height: auto;
        border-radius: 16px;
/*        box-shadow: 0 2px 12px rgba(0,123,255,0.12);*/
/*        background: #fff;*/
        display: block;
    }

.treatsolution-textitem-container {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

    .treatsolution-textitem-container h3 {
        font-size: 1.75rem;
        font-weight: 700;
        color: #222;
        font-weight:bold;
        margin-bottom: 0.5rem;
        letter-spacing: 0.06em;
    }

    .treatsolution-textitem-container p {
        font-size: 1.15rem;
        font-weight:bold;
        color: #000;
        line-height: 2;
        background: #FFF;
        border-radius: 8px;
        padding: 14px 18px;
        box-shadow: 0 1px 4px rgba(0,123,255,0.04);
        margin-bottom: 0.5rem;
        text-align: justify;
    }











/*实现天禾松牙固定项目方案的样式渲染*/

.tianhetreatsolution-outer-container {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0,123,255,0.10);
    padding: 40px 0 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.tianhetreatsolution-outer-title-container {
    width: 100%;
    text-align: center;
    margin-bottom: 32px;
    position: relative;
    padding: 32px 0 24px 0;
    background: linear-gradient(90deg, #0f2027 0%, #2c5364 100%);
    border-radius: 18px;
    box-shadow: 0 4px 32px rgba(0, 255, 255, 0.15), 0 1.5px 0 rgba(0,255,255,0.2) inset;
    overflow: hidden;
}

    .tianhetreatsolution-outer-title-container::before,
    .tianhetreatsolution-outer-title-container::after {
        content: "";
        position: absolute;
        height: 3px;
        width: 120px;
        top: 18px;
        background: linear-gradient(90deg, #00fff0 0%, #007bff 100%);
        border-radius: 2px;
        opacity: 0.7;
        z-index: 1;
    }

    .tianhetreatsolution-outer-title-container::before {
        left: 40px;
        box-shadow: 0 0 16px #00fff0;
    }

    .tianhetreatsolution-outer-title-container::after {
        right: 40px;
        box-shadow: 0 0 16px #007bff;
    }

    .tianhetreatsolution-outer-title-container h2,
    .tianhetreatsolution-outer-title-container .tianhetreatsolution-outer-title {
        font-size: 2.5rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        margin: 0;
        background:#fff;
/*        background: linear-gradient(90deg, #00fff0 0%, #007bff 100%);*/
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 0 2px 16px rgba(0,255,255,0.18), 0 1px 8px rgba(0,123,255,0.10);
        position: relative;
        z-index: 2;
        filter: drop-shadow(0 0 8px #00fff0);
        transition: text-shadow 0.3s;
    }

        .tianhetreatsolution-outer-title-container h2:hover,
        .tianhetreatsolution-outer-title-container .tianhetreatsolution-outer-title:hover {
            text-shadow: 0 0 24px #00fff0, 0 2px 16px #007bff;
            filter: drop-shadow(0 0 16px #00fff0);
        }





.tianhetreatsolution-main-row-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
}

.tianhetreatsolution-imageitem-container.multi-image {
    position: relative;
    flex: 0 0 60%;
    max-width: 60%;
    aspect-ratio: 3/4; /* 关键：宽高比3:4（如600:800） */
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(120deg,#0f2027 0%, #2c5364 100%);
    border-radius: 18px;
    box-shadow: 0 4px 32px rgba(0,255,255,0.10);
    padding: 0;
    overflow: hidden;
}

    .tianhetreatsolution-imageitem-container.multi-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,123,255,0.12);
        background: #fff;
        opacity: 0;
        z-index: 1;
        transition: opacity 0.3s, transform 0.3s;
        display: block;
    }

        .tianhetreatsolution-imageitem-container.multi-image img.active {
            opacity: 1;
            z-index: 2;
            transform: scale(1.05);
        }

.tianhetreatsolution-right-group {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.tianhetreatsolution-title-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: linear-gradient(90deg, #232526 0%, #414345 100%);
    border-radius: 12px;
    padding: 18px 24px;
    box-shadow: 0 2px 12px rgba(0,255,255,0.08);
}

.solution-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #00fff0;
    background: linear-gradient(90deg, #00fff0 0%, #007bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    cursor: pointer;
    padding: 8px 0;
    border-left: 4px solid transparent;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

    .solution-title.active,
    .solution-title:hover {
        color: #fff;
        background: linear-gradient(90deg, #00fff0 0%, #007bff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        border-left: 4px solid #00fff0;
        filter: drop-shadow(0 0 8px #00fff0);
    }


.tianhetreatsolution-content-group {
    margin-top: 18px;
    background: linear-gradient(90deg, #f7faff 80%, #e3f0ff 100%);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,123,255,0.08);
    padding: 24px 24px;
    min-height: 120px;
    position: relative;
}

.solution-content {
    display: none;

    line-height: 2;
    animation: fadeIn 0.3s;
}

    .solution-content h4 {
        font-size: 1.5rem;
        font-weight: bold;
        color: #222;
        margin-bottom: 12px;
        text-shadow: 1px 1px 4px rgba(0,0,0,0.2);
        margin-top: 3rem;
        margin-bottom: 3rem;
    }

    .solution-content p {
        font-size: 1.08rem;
        color: #555;
        line-height: 1.8;
        margin: 0;
        padding: 0 20px;
        text-align: justify;
    }
        .solution-content.active {
        display: block;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}



/*天禾松牙固定项目方案，第二部分*/
.tianhetreatsolution-secondouter-container {
    width: 100%;
    max-width: 1200px;
    /*    height: 800px;*/
    margin: 0 auto;
    flex-direction: column;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 18px;
}
    .tianhetreatsolution-secondouter-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.85); /* 0.45 可调整，越大越暗 */
        z-index: 1;
        pointer-events: none;
    }


/*.tianhetreatsolution-secondouter-container {
    position: relative;*/ /* 保证伪元素定位有效 */
    /* 其余样式保持不变 */
/*}*/


.tianhetreatsolution-sencondtitle {
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
    margin-top: 50px;
    position: relative;
    z-index: 2;
}

    .tianhetreatsolution-sencondtitle h2 {
        font-size: 2.8rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        margin: 0 auto;
        padding: 24px 0 18px 0;
        background: linear-gradient(90deg, #ffb347 0%, #ffcc80 40%, #ffd194 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 0 4px 24px rgba(255, 179, 71, 0.18), 0 2px 8px rgba(255, 204, 128, 0.10);
        border-bottom: 3px solid #ffb347;
        border-radius: 2px;
        display: inline-block;
        box-shadow: 0 2px 16px rgba(255, 179, 71, 0.08);
        transition: text-shadow 0.3s;
    }

        .tianhetreatsolution-sencondtitle h2:hover {
            text-shadow: 0 0 32px #ffb347, 0 2px 16px #ffd194;
        }



.tianhetreatsolution-secondouter-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1000px;
    margin-top: 40px;
    margin-bottom: 40px;
    background: rgba(255,255,255,0.85);
    border-radius: 18px;
    padding: 0 40px; /* 初始无内容高度，padding-top/bottom在内容区 */
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
    max-height: 64px; /* 只显示标题部分 */
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(.4,2,.6,1), padding 0.5s cubic-bezier(.4,2,.6,1);
    cursor: pointer;
}
.tianhetreatsolution-secondouter-content {
    position: relative;
    z-index: 2;
}


    .tianhetreatsolution-secondouter-content h2 {
        font-size: 2rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        margin-bottom: 0;
        color: #007bff;
        background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 0 4px 24px rgba(0,123,255,0.12), 0 2px 8px rgba(0,198,255,0.10);
        border-bottom: 2px solid #00c6ff;
        border-radius: 2px;
        display: inline-block;
        padding-bottom: 6px;
        box-shadow: 0 2px 16px rgba(0,123,255,0.08);
        transition: text-shadow 0.3s;
        font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
        padding-top: 10px;
        padding-bottom: 18px;
    }
    .tianhetreatsolution-secondouter-content:hover h2,
    .tianhetreatsolution-secondouter-content:focus-within h2 {
        text-shadow: 0 0 24px #00c6ff, 0 2px 16px #007bff;
    }

    .tianhetreatsolution-secondouter-content p {
        font-size: 1.15rem;
        color: #155fa0;
        background: linear-gradient(90deg, #e3f6fd 60%, #b1e3f0 100%);
        border-left: 5px solid #007bff;
        padding: 18px 28px 18px 48px;
        border-radius: 12px;
        margin: 0;
        position: relative;
        box-shadow: 0 2px 16px rgba(0,123,255,0.10), 0 1.5px 0 rgba(0,198,255,0.12) inset;
        text-shadow: 0 1px 4px rgba(0,123,255,0.08);
        letter-spacing: 0.03em;
        line-height: 2;
        font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.4s, max-height 0.5s;
    }

    /* 悬浮时展开内容 */
    .tianhetreatsolution-secondouter-content:hover,
    .tianhetreatsolution-secondouter-content:focus-within {
        max-height: 500px; /* 足够大，能容纳全部内容 */
        padding: 40px;
    }
        .tianhetreatsolution-secondouter-content p::before {

            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            color: #00c6ff;
            font-size: 1.4rem;
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            text-shadow: 0 0 8px #b1e3f0, 0 0 2px #007bff;
            filter: drop-shadow(0 0 4px #b1e3f0);
        }
    .tianhetreatsolution-secondouter-content:hover p,
    .tianhetreatsolution-secondouter-content:focus-within p {
        opacity: 1;
        max-height: 200px; /* 适当高度，能容纳全部内容 */
        transition-delay: 0.1s;
    }

.tianhetreatsolution-thirdouter-container {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0,123,255,0.10), 0 1.5px 0 rgba(0,198,255,0.08) inset;
    padding: 40px 0;
    position: relative;
}

.tianhetreatsolution-thirdtitle {
    width: 100%;
    text-align: center;
    margin-bottom: 36px;
    margin-top: 36px;
    position: relative;
    z-index: 2;
}

    .tianhetreatsolution-thirdtitle h2 {
        font-size: 2.5rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        margin: 0 auto;
        padding: 24px 0 18px 0;
        background: #222
/*        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;*/
        background-clip: text;
/*        text-fill-color: transparent;*/
        text-shadow: 0 4px 24px rgba(0,123,255,0.12), 0 2px 8px rgba(0,198,255,0.10);
        border-bottom: 3px solid #00c6ff;
        border-radius: 2px;
        display: inline-block;
        box-shadow: 0 2px 16px rgba(0,123,255,0.08);
        transition: text-shadow 0.3s;
        font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
    }



.tianhetreatsolution-thirdouter-container {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 32px rgba(0,123,255,0.10), 0 1.5px 0 rgba(0,198,255,0.08) inset;
    padding: 40px 0;
    position: relative;
}

.tianhetreatsolution-thirdtitle {
    width: 100%;
    text-align: center;
    margin-bottom: 36px;
    margin-top: 36px;
    position: relative;
    z-index: 2;
}

    .tianhetreatsolution-thirdtitle h2 {
        font-size: 2.5rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        margin: 0 auto;
        padding: 24px 0 18px 0;
        background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 0 4px 24px rgba(0,123,255,0.12), 0 2px 8px rgba(0,198,255,0.10);
        border-bottom: 3px solid #00c6ff;
        border-radius: 2px;
        display: inline-block;
        box-shadow: 0 2px 16px rgba(0,123,255,0.08);
        transition: text-shadow 0.3s;
        font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
    }

.tianhetreatsolution-thirdmainrow {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 36px;
    padding: 0 24px 24px 24px;
    box-sizing: border-box;
}

.tianhetreatsolution-thirdimagecontainer {
    flex: 1 1 0;
    background: linear-gradient(120deg, #f7faff 60%, #e3f0ff 100%);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,123,255,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 20px 28px 20px;
    min-width: 0;
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
}

    .tianhetreatsolution-thirdimagecontainer:hover {
        box-shadow: 0 8px 32px rgba(0,123,255,0.18), 0 2px 16px rgba(0,198,255,0.10);
        transform: translateY(-6px) scale(1.03);
    }

    .tianhetreatsolution-thirdimagecontainer img {
        width: 360px;
        height: 480px;
        object-fit: contain;
        border-radius: 12px;
        margin-bottom: 18px;
        box-shadow: 0 2px 12px rgba(0,123,255,0.10);
        background: #fff;
        display: block;
    }

    .tianhetreatsolution-thirdimagecontainer h3 {
        font-size: 1.3rem;
        font-weight: 700;
        color: #007bff;
        margin-bottom: 12px;
        letter-spacing: 0.06em;
        background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 0 2px 8px rgba(0,123,255,0.10);
    }

    .tianhetreatsolution-thirdimagecontainer h4 {
        font-size: 1.08rem;
        color: #155fa0;
        font-weight: 600;
        margin: 16px 0 6px 0;
        letter-spacing: 0.04em;
    }

    .tianhetreatsolution-thirdimagecontainer p {
        font-size: 1rem;
        color: #222;
        background: #fff;
        border-radius: 8px;
        padding: 10px 16px;
        margin: 0 0 8px 0;
        box-shadow: 0 1px 4px rgba(0,123,255,0.04);
        line-height: 1.8;
        text-align: left;
        width: 100%;
        word-break: break-all;
    }



.tianhetreatsolution-fourthouter-container {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    background: #f7fafd;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(34,54,94,0.10);
    padding: 40px 0 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.tianhetreatsolution-fourthtitle {
    width: 100%;
    text-align: center;
    margin-bottom: 32px;
    position: relative;
    z-index: 2;
}

    .tianhetreatsolution-fourthtitle h2 {
        font-size: 2.2rem;
        font-weight: 900;
        letter-spacing: 0.10em;
        margin: 0 auto 10px auto;
        color: #1a2a3a;
        background: none;
        border-bottom: 3px solid #155fa0;
        display: inline-block;
        font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
        text-shadow: 0 2px 8px rgba(34,54,94,0.08);
        padding-bottom: 8px;
    }

.tianhetreatsolution-fourthsubtitle {
    font-size: 1.15rem;
    color: #155fa0;
    font-weight: 600;
    margin-top: 8px;
    letter-spacing: 0.06em;
    text-shadow: 0 1px 4px rgba(34,54,94,0.06);
}

.tianhetreatsolution-fourth-content-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 32px;
    padding: 0 24px 24px 24px;
    box-sizing: border-box;
}

.tianhetreatsolution-fourth-content {
    flex: 1 1 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 8px rgba(34,54,94,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 18px 20px 18px;
    min-width: 0;
    border: 1px solid #e3eaf3;
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
}

    .tianhetreatsolution-fourth-content:hover {
        box-shadow: 0 4px 24px rgba(34,54,94,0.13);
        transform: translateY(-2px) scale(1.01);
    }

    .tianhetreatsolution-fourth-content img {
        width: 360px;
        height: 360px;
        object-fit: contain;
        border-radius: 8px;
        margin-bottom: 16px;
        box-shadow: 0 1px 6px rgba(34,54,94,0.08);
        background: #f7fafd;
        display: block;
        border: 1px solid #e3eaf3;
    }

    .tianhetreatsolution-fourth-content h3 {
        font-size: 1.15rem;
        font-weight: 700;
        color: #155fa0;
        margin-bottom: 10px;
        letter-spacing: 0.04em;
        background: none;
        text-shadow: 0 1px 4px rgba(34,54,94,0.06);
        text-align: center;
    }

    .tianhetreatsolution-fourth-content p {
        font-size: 1rem;
        color: #2d3a4a;
        background: #f7fafd;
        border-radius: 6px;
        padding: 10px 14px;
        margin: 0;
        box-shadow: none;
        border-left: 3px solid #155fa0;
        line-height: 1.7;
        text-align: left;
        width: 100%;
        word-break: break-all;
    }



/*    第五部分样式的实现*/
.tianhetreatsolution-fifth-outer-container {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    background: #111;  黑色背景 
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    padding: 40px 0 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    border-radius:18px;
}

.tianhetreatsolution-fifth-outer-title-container {
    width: 100%;
    text-align: center;
    margin-bottom: 32px;
    position: relative;
    padding: 32px 0 24px 0;
    background: #111;  
    border-radius: 18px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.10);
    overflow: hidden;
}

.tianhetreatsolution-fifth-outer-title {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin: 0;
    color: #fff !important;
    background: none !important;
    text-shadow: 0 2px 16px rgba(0,0,0,0.18), 0 1px 8px rgba(0,0,0,0.10);
    position: relative;
    z-index: 2;
     关键：彻底覆盖渐变文字属性 
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #fff !important;
    background-clip: unset !important;
    text-fill-color: unset !important;
}

.tianhetreatsolution-fifth-main-row-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 40px;
    padding: 0 32px;
    box-sizing: border-box;
}

.tianhetreatsolution-fifth-left-group {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 1100px;
    background: #222;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    min-height: 480px;
}

.tianhetreatsolution-fifth-content-title-group {
    flex: 0 0 100%;
    max-width: 100%;
    background: #222;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 24px;
    border-right: 2px solid #333;
    gap: 18px;
    
}

    .tianhetreatsolution-fifth-content-title-group .solution-title {
        font-size: 1.15rem;
        font-weight: bold;
        color: #fff;
        background: none;
        border-left: 4px solid transparent;
        padding: 12px 0 12px 18px;
        margin-bottom: 0;
        border-radius: 6px 0 0 6px;
        cursor: pointer;
        transition: background 0.2s, color 0.2s, border-color 0.2s;
        width: 100%;
    }

        .tianhetreatsolution-fifth-content-title-group .solution-title.active,
        .tianhetreatsolution-fifth-content-title-group .solution-title:hover {
            background: #333;
            color: #fff;
            border-left: 4px solid #fff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.10);
        }

.tianhetreatsolution-fifth-imageitem-container {
    flex: 0 0 70%;
    max-width: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #111;
    border-radius: 0 16px 16px 0;
    min-height: 480px;
    overflow: hidden;
}

    .tianhetreatsolution-fifth-imageitem-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain; /* 关键：完整显示图片 */
        border-radius: 0 16px 16px 0;
        opacity: 0;
        z-index: 1;
        transition: opacity 0.3s;
        box-shadow: 0 2px 12px rgba(0,0,0,0.10);
        background: #222;
        background-size: contain; /* 防止背景色影响图片显示 */
        background-repeat: no-repeat;
        background-position: center;
    }

        .tianhetreatsolution-fifth-imageitem-container img.active {
            opacity: 1;
            z-index: 2;
        }


.fifth-solution-title {
    padding: 15px;
    background-color: #f5f7fa;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
    border-left: 3px solid transparent;
    font-size: 16px;
    color: #555;
    margin-bottom: 8px;
}

    .fifth-solution-title.active {
        background-color: #e6f0ff;
        border-left-color: #4a90e2;
        color: #1a73e8;
        font-weight: 500;
        box-shadow: 0 2px 5px rgba(74,144,226,0.15);
    }
    .fifth-solution-title.active,
    .fifth-solution-title:hover {
        background-color: #e6f0ff;
        border-left-color: #4a90e2;
        color: #1a73e8;
        font-weight: 500;
        box-shadow: 0 2px 5px rgba(74,144,226,0.15);
    }

.fifth-solution-img {
    display: none;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: opacity 0.3s;
    opacity: 0;
}

    .fifth-solution-img.active {
        display: block;
        opacity: 1;
        animation: fadeIn 0.5s;
    }

/*表单的样式实现*/
.tianhetreatsolution-form-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start; /* 靠右排布 */
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    gap: 0;
    background: none;
}

.tianhetreatsolution-form-image-form-container {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 16px 0 0 16px;
    box-shadow: 0 4px 24px rgba(44,123,229,0.10);
    padding: 36px 28px 28px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    /* 让高度自适应内容 */
}

.tianhetreatsolution-form-title-area {
    width: 100%;
    text-align: center;
    margin-bottom: 24px;
}

    .tianhetreatsolution-form-title-area h2 {
        font-size: 2rem;
        font-weight: 700;
        color: #2c7be5;
        letter-spacing: 0.08em;
        background: linear-gradient(90deg, #2c7be5 0%, #ff7e5f 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 0 2px 8px rgba(44,123,229,0.08);
        margin: 0;
    }

.tianhetreatsolution-form-group {
    width: 100%;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

    .tianhetreatsolution-form-group label {
        font-size: 1.08rem;
        color: #333;
        margin-bottom: 0.5rem;
        font-weight: 500;
    }

    .tianhetreatsolution-form-group input,
    .tianhetreatsolution-form-group textarea {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid #eee;
        border-radius: 8px;
        font-size: 1rem;
        background: #fafbfc;
        transition: border-color 0.2s;
        resize: none;
    }

        .tianhetreatsolution-form-group input:focus,
        .tianhetreatsolution-form-group textarea:focus {
            border-color: #2c7be5;
            outline: none;
            background: #fff;
        }

    .tianhetreatsolution-form-group textarea {
        min-height: 80px;
        max-height: 200px;
    }

.tianhetreatsolution-form-submit-btn {
    width: 100%;
    padding: 0.9rem 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(90deg, #2c7be5 0%, #ff7e5f 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(44,123,229,0.08);
    transition: background 0.2s, box-shadow 0.2s;
}

    .tianhetreatsolution-form-submit-btn:hover,
    .tianhetreatsolution-form-submit-btn:focus {
        background: linear-gradient(90deg, #ff7e5f 0%, #2c7be5 100%);
        box-shadow: 0 2px 8px rgba(44,123,229,0.15);
        outline: none;
    }

.tianhetreatsolution-form-group .invalid-feedback {
    display: none;
    color: #ff7e5f;
    font-size: 0.95rem;
    margin-top: 4px;
}

.tianhetreatsolution-form-image-panel {
    flex: 0 0 70%;
    max-width: 70%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: #fff;
    border-radius: 0 16px 16px 0;
    box-shadow: 0 4px 24px rgba(44,123,229,0.10);
    margin: 0;
    /* 让图片高度等于表单 */
}
    .tianhetreatsolution-form-image-panel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0 16px 16px 0;
        display: block;
    }



/*项目模板的渲染*/
.project-whole-outer-container {
    width: 100%;
    background: transparent;
    padding: 40px 0;
}

.project-firstsection-container {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(44, 123, 229, 0.08);
    padding: 32px 24px;
}

.project-firstsection-title {
    text-align: center;
    margin-bottom: 32px;
}

    .project-firstsection-title h2 {
        font-weight:bold;
        font-size: 2.2rem;
        font-weight: 700;
        color: #2c7be5;
        margin-top:30px;
        margin-bottom: 30px;
    }

    .project-firstsection-title h3 {
        font-weight: bold;
        font-size: 1.3rem;

        color: #222;
        margin: 0;
    }

.project-firstsection-content-container {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: center;
    justify-content: center;
}

.project-firstsection-image-panel {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 280px;
    text-align: center;
}

    .project-firstsection-image-panel img {
        width: 100%;
        max-width: 100%;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(44, 123, 229, 0.10);
        object-fit: cover;
    }

.project-firstsection-text-panel {
    flex: 2 1 400px;
    min-width: 320px;
    padding: 0 16px;
}

.project-firstsection-innertitle h2 {
    font-weight: bold;
    font-size: 1.5rem;

    color: #222;
    margin-bottom: 12px;
}

.project-firstsection-innertext p {
    font-size: 1.1rem;
    color: #444;
    line-height: 1.8;
    margin: 0;
}





.project-secondsection-container {
    max-width: 1200px;
    margin: 40px auto;
    background: #111;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(44, 123, 229, 0.18);
    padding: 32px 24px;
}

    .project-secondsection-container .project-firstsection-title {
        text-align: center;
        margin-bottom: 32px;
    }

        .project-secondsection-container .project-firstsection-title h2 {
            font-size: 2.2rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 12px;
            letter-spacing: 0.08em;
            text-shadow: 0 2px 8px rgba(44,123,229,0.18);
        }

        .project-secondsection-container .project-firstsection-title h3 {
            font-size: 1.3rem;
            color: #bbb;
            font-weight: 400;
            margin: 0;
            letter-spacing: 0.06em;
        }


/*
.project-secondsection-container .project-firstsection-title h2 {

    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 8px rgba(44,123,229,0.18);
    position: relative;
    display: inline-block;
    padding: 12px 36px;
    background: linear-gradient(90deg, #232a34 60%, #2c7be5 100%);
    border-radius: 10px;
    border: 2px solid #2c7be5;
    box-shadow: 0 2px 8px rgba(44,123,229,0.10);
    z-index: 1;
}

    .project-secondsection-container .project-firstsection-title h2::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        border-radius: 16px;
        background: linear-gradient(120deg, rgba(44,123,229,0.25) 0%, rgba(0,255,231,0.18) 100%);
        box-shadow: 0 4px 32px 0 rgba(44,123,229,0.18), 0 0 24px 0 #00ffe7;
        border: 2.5px solid transparent;
        border-image: linear-gradient(120deg, #2c7be5 0%, #00ffe7 100%);
        border-image-slice: 1;
        pointer-events: none;
        transition: box-shadow 0.3s;
    }

    .project-secondsection-container .project-firstsection-title h2:hover::before {
        box-shadow: 0 8px 48px 0 #00ffe7, 0 0 32px 0 #2c7be5;
    }

.project-secondsection-container .project-firstsection-title h3 {
    font-size: 1.3rem;
    color: #bbb;
    font-weight: 400;
    margin: 0;
    letter-spacing: 0.06em;
    text-shadow: 0 1px 8px #2c7be5;
    position: relative;
    display: inline-block;
    padding: 6px 24px;
    background: #232a34;
    border-radius: 8px;
    border: 1px solid #2c7be5;
    margin-top: 8px;
}


*/






.project-secondsection-content-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 32px;
    align-items: center;
    justify-content: flex-start;
    background: #222;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(44,123,229,0.10);
    margin-bottom: 32px;
    padding: 32px 16px;
}

.project-secondsection-image-panel {
    flex: 0 0 50%;
    max-width: 50%;
    min-width: 220px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .project-secondsection-image-panel img {
        width: 100%;
        max-width: 400px;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(44, 123, 229, 0.18);
        object-fit: cover;
        background: #111;
    }

.project-secondsection-innertitle,
.project-secondsection-innertext {
    flex: 1 1 0;
    max-width: 50%;
    margin-left: 32px;
}

    .project-secondsection-innertitle h2 {
        font-size: 1.5rem;
        font-weight: 600;
        color: #fff;
        margin-bottom: 8px;
        text-shadow: 0 1px 4px rgba(44,123,229,0.10);
    }

.project-secondsection-innertext {
    flex: 1 1 100%;
    margin-left: 32px;

}

    .project-secondsection-innertext p {
        font-size: 1.1rem;
        color: #eee;
        line-height: 1.8;
        margin: 0;
        background: rgba(44,123,229,0.05);
        border-radius: 8px;
        padding: 18px 20px;
        box-shadow: 0 1px 4px rgba(44,123,229,0.06);
        text-align: justify;
    }


.project-thirdsection-title {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 32px auto;
    text-align: center;
    padding-bottom: 18px;
    position: relative;
}

    .project-thirdsection-title h2 {
        font-size: 2.2rem;
        font-weight: 700;
        color: #007bff;
        letter-spacing: 0.10em;
        margin: 0 0 12px 0;
        background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 0 2px 8px rgba(0,123,255,0.10);
        display: inline-block;
        position: relative;
    }

        .project-thirdsection-title h2::after {
            content: "";
            display: block;
            width: 60px;
            height: 4px;
            margin: 18px auto 0 auto;
            background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
            border-radius: 2px;
            box-shadow: 0 1px 4px rgba(0,123,255,0.10);
        }

    .project-thirdsection-title h3 {
        font-size: 1.2rem;
        color: #555;
        font-weight: 400;
        margin: 0;
        letter-spacing: 0.06em;
        text-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }



.project-thirdsection-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 每行2组 */
    grid-template-rows: 1fr 1fr; /* 共2行 */

    gap: 40px 32px;  行间距、列间距 
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 5px auto;
/*    padding: 0 12px;*/
}

.project-thirdsection-content-item {
    display: flex;
    flex-direction: column;
    align-items: center;
/*    background:red;*/
    background: linear-gradient(90deg, #f7faff 80%, #e3f0ff 100%);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,123,255,0.08);
    overflow: hidden;
    padding: 20px 20px;
    gap: 24px;
    min-width: 0;
}

.project-thirdsection-image-panel {
    flex: 0 0 50%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7faff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(0,123,255,0.06);
}

    .project-thirdsection-image-panel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
        display: block;
    }

.project-thirdsection-innertitle {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    margin-left: 18px;

}

    .project-thirdsection-innertitle h2 {
        font-size: 1.2rem;
        font-weight: 700;
        color: #007bff;
        margin-bottom: 0.1rem;
        letter-spacing: 0.06em;
        background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 0 2px 8px rgba(0,123,255,0.08);
    }

.project-thirdsection-innertext {
    flex: 2 1 0;
    display: flex;
    align-items: center;
    min-width: 0;
    margin-left: 12px;

}

    .project-thirdsection-innertext p {
        font-size: 1.08rem;
        color: #333;
        line-height: 2;
        background: #fff;
        border-radius: 8px;
        padding: 18px 20px;
        box-shadow: 0 1px 4px rgba(0,123,255,0.04);
        white-space: pre-line;
        margin: 0;
        width: 100%;
        text-align: justify;
    }






.project-fourthsection-container {
    max-width: 1200px;
    margin: 40px auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(44, 123, 229, 0.08);
    padding: 32px 24px;
}

.project-fourthsection-title {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 18px;
    position: relative;
}

    .project-fourthsection-title h2 {
        font-size: 2.2rem;
        font-weight: 700;
        color: #ff7e5f;
        letter-spacing: 0.10em;
        margin: 0 0 12px 0;
        background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 0 2px 8px rgba(255,126,95,0.10);
        display: inline-block;
        position: relative;
    }

        .project-fourthsection-title h2::after {
            content: "";
            display: block;
            width: 60px;
            height: 4px;
            margin: 18px auto 0 auto;
            background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
            border-radius: 2px;
            box-shadow: 0 1px 4px rgba(255,126,95,0.10);
        }

    .project-fourthsection-title h3 {
        font-size: 1.2rem;
        color: #888;
        font-weight: 400;
        margin: 0;
        letter-spacing: 0.06em;
        text-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }

.project-fourthsection-content-container {
    flex-direction: column; /* 竖向排列 */

    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: center;
    justify-content: center;
/*    background: linear-gradient(90deg, #fff7f0 80%, #ffe3d3 100%);*/
    border-radius: 12px;
/*    box-shadow: 0 2px 12px rgba(255,126,95,0.10);*/
    margin-bottom: 32px;
    padding: 32px 16px;
}

.project-fourthsection-image-panel {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff7f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(255,126,95,0.06);
}

    .project-fourthsection-image-panel img {
        width: 100%;
        max-width: 100%;
        height:100%;
        object-fit: cover;
        border-radius: 12px;
        display: block;
    }

.project-fourthsection-innertitle {
    flex: 1 1 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 0;
    margin-left: 18px;
}

    .project-fourthsection-innertitle h2 {
        font-size: 1.2rem;
        font-weight: 700;
        color: #ff7e5f;
        margin-bottom: 0.5rem;
        letter-spacing: 0.06em;
        background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 0 2px 8px rgba(255,126,95,0.08);
    }

.project-fourthsection-innertext {
    flex: 2 1 0;
    display: flex;
    align-items: center;
    min-width: 0;
    margin-left: 12px;
}

    .project-fourthsection-innertext p {
        font-size: 1.08rem;
        color: #333;
        line-height: 2;
        background: #fff;
        border-radius: 8px;
        padding: 18px 20px;
        box-shadow: 0 1px 4px rgba(255,126,95,0.04);
        white-space: pre-line;
        margin: 0;
        width: 100%;
        text-align: justify;
    }




.project-fifthsection-container {
    max-width: 1200px;
    margin: 40px auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(44, 123, 229, 0.08);
    padding: 32px 24px;
}

.project-fifthsection-title {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 18px;
    position: relative;
}

    .project-fifthsection-title h2 {
        font-size: 2.2rem;
        font-weight: 700;
        color: #007bff;
        letter-spacing: 0.10em;
        margin: 0 0 12px 0;
        background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 0 2px 8px rgba(0,123,255,0.10);
        display: inline-block;
        position: relative;
    }

    .project-fifthsection-title h3 {
        font-size: 1.2rem;
        color: #555;
        font-weight: 400;
        margin: 0;
        letter-spacing: 0.06em;
        text-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }

.project-fifthsection-mainrow {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 420px;
}
}

.project-fifthsection-title-list {
    flex: 0 0 20%;
    max-width: 20%;
    min-width: 160px;
    background: #f7faff;
    border-radius: 12px 0 0 12px;
    box-shadow: 0 2px 12px rgba(0,123,255,0.06);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 24px 0;
    margin-right: 0;
    gap: 0;
}

.fifthsection-title-item {
    padding: 18px 16px 8px 16px;
    font-size: 1.15rem;
    color: #007bff;
    font-weight: 600;
    cursor: pointer;
    border-left: 4px solid transparent;
    background: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    border-radius: 0 24px 0 0;
    margin-bottom: 0;
    word-break: break-all;
}

    .fifthsection-title-item.active,
    .fifthsection-title-item:hover {
        background: linear-gradient(90deg, #e3f0ff 60%, #f7faff 100%);
        color: #007bff;
        border-left: 4px solid #007bff;
        font-weight: bold;
    }
.project-fifthsection-innertext {
    flex: 0 0 20%;
    max-width: 20%;
    min-width: 160px;
    padding: 0 16px 18px 16px;
    font-size: 1rem;
    color: #555;
    background: #fff;
    border-radius: 0 0 24px 24px;
    margin-bottom: 12px;
    border-left: 4px solid transparent;
    border-top: 1px solid #e3f0ff;
    box-shadow: 0 1px 4px rgba(0,123,255,0.04);
    display: none;
    align-items: flex-start;
    justify-content: flex-start;
    word-break: break-all;
}

.fifthsection-title-item.active + .project-fifthsection-innertext {
    display: block;
    border-left: 4px solid #007bff;
}

.project-fifthsection-content-list {
    flex: 0 0 60%;
    max-width: 60%;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    position: relative;
    min-height: 420px;
}

.project-fifthsection-content-item {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: none;
    transition: opacity 0.3s;
}

    .project-fifthsection-content-item.active {
        display: flex;
        position: relative;
        opacity: 1;
        z-index: 2;
    }

.project-fifthsection-image-group {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 18px;
}
.project-fifthsection-image-panel {
    width: 100%;
    height: 500px; /* 明确设置高度 */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(0,123,255,0.06);
}

    .project-fifthsection-image-panel img {
        width: 100%;
        height: 100%; /* 让图片高度100%填满容器 */
        object-fit: cover;
        border-radius: 12px;
        display: block;
        margin: 0 auto;
    }




.channel-outer-container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    max-width: 1200px;
    margin: 40px auto;
    background: linear-gradient(90deg, #f7faff 80%, #e3f0ff 100%);
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(44,123,229,0.10);
    overflow: hidden;
    padding: 0;
    gap: 0;
}

.channel-title-container {
    flex: 1 1 0;
    padding: 48px 40px 48px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    min-width: 0;
}

    .channel-title-container h2 {
        font-size: 2rem;
        font-weight: 700;
        color: #007bff;
        margin-bottom: 18px;
        letter-spacing: 0.08em;
        background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 0 2px 8px rgba(0,123,255,0.10);
    }

    .channel-title-container p {
        font-size: 1.15rem;
        color: #444;
        line-height: 2;
        margin-bottom: 28px;
        background: #fff;
        border-radius: 8px;
        padding: 18px 20px;
        box-shadow: 0 1px 4px rgba(0,123,255,0.04);
        text-align: justify;
    }

    .channel-title-container a {
        display: inline-block;
        margin-top: 12px;
        padding: 12px 32px;
        font-size: 1.08rem;
        font-weight: 600;
        color: #fff;
        background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
        border-radius: 8px;
        text-decoration: none;
        box-shadow: 0 2px 8px rgba(0,123,255,0.10);
        transition: background 0.2s, box-shadow 0.2s;
    }

        .channel-title-container a:hover {
            background: linear-gradient(90deg, #00c6ff 0%, #007bff 100%);
            box-shadow: 0 4px 16px rgba(0,123,255,0.15);
        }

.channel-image-container {
    flex: 0 0 420px;
    max-width: 420px;
    min-width: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e3f0ff;
    border-radius: 0 18px 18px 0;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,123,255,0.06);
}

    .channel-image-container img {
        width: 100%;
        height: 100%;
        min-height: 320px;
        object-fit: cover;
        border-radius: 0 18px 18px 0;
        display: block;
        background: #f7faff;
    }



/*
    实现文章列表的样式*/

.channellist-container {

    background: #f8f9fa;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 32px 24px;
    margin: 32px auto;
    max-width: 1200px;
}

.channellist-title-container h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 24px;
    border-bottom: 2px solid #e1e4e8;
    padding-bottom: 8px;
}

.channellist-article {
    list-style: none;
    padding: 0;
    margin: 0;
}

.channellist-list-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(44,62,80,0.07);
    margin-bottom: 18px;
    transition: box-shadow 0.2s;
}

    .channellist-list-container:hover {
        box-shadow: 0 4px 16px rgba(44,62,80,0.12);
    }

.chnanellist-title {
    padding: 18px 20px;
    margin: 0;
}

    .chnanellist-title h3 {
        font-size: 1.25rem;
        font-weight: 600;
        color: #34495e;
        margin: 0 0 8px 0;
    }

    .chnanellist-title h4 {
        font-size: 1rem;
        font-weight: 400;
        color: #7f8c8d;
        margin: 0 0 4px 0;
        letter-spacing: 0.5px;
    }

@media (max-width: 600px) {
    .channellist-container {
        padding: 16px 8px;
    }

    .chnanellist-title {
        padding: 12px 10px;
    }
}




#pagination {
    margin: 32px 0 0 0;
    text-align: center;
}

    #pagination button {
        background: #fff;
        border: 1px solid #007bff;
        color: #007bff;
        font-size: 1.1rem;
        font-weight: 600;
        margin: 0 4px;
        padding: 8px 18px;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
        box-shadow: 0 2px 8px rgba(0,123,255,0.08);
    }

        #pagination button.active,
        #pagination button:hover {
            background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
            color: #fff;
            border-color: #007bff;
            box-shadow: 0 4px 16px rgba(0,123,255,0.15);
        }



/*        科普文章的渲染*/
.article-outer-container {
    max-width: 1200px;
    margin: 48px auto 48px auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(44,123,229,0.10);
    padding: 40px 32px 32px 32px;
    position: relative;
    overflow: hidden;
}

.article-position-nav {
    font-size: 1rem;
    color: #888;
    margin-bottom: 18px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e3f0ff;
    letter-spacing: 1px;
}

.article-title {
    margin-bottom: 32px;
    text-align: center;
}

    .article-title h2 {
        font-size: 2.2rem;
        font-weight: 700;
        color: #007bff;
        letter-spacing: 0.08em;
        background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-shadow: 0 2px 8px rgba(0,123,255,0.10);
        margin-bottom: 18px;
    }

    .article-title p {
        font-size: 1.08rem;
        color: #555;
        margin: 0 0 8px 0;
        letter-spacing: 0.04em;
        display: inline-block;
        margin-right: 24px;
    }

.article-htmlbody {
    font-size: 1.15rem;
    color: #222;
    line-height: 2;
    background: linear-gradient(90deg, #f7faff 80%, #e3f0ff 100%);
    border-radius: 10px;
    box-shadow: 0 1px 8px rgba(0,123,255,0.06);
    padding: 32px 24px;
    margin-top: 24px;
    word-break: break-word;
}

    .article-htmlbody h1,
    .article-htmlbody h2,
    .article-htmlbody h3,
    .article-htmlbody h4 {
        color: #007bff;
        margin-top: 1.5em;
        margin-bottom: 0.7em;
        font-weight: 700;
        letter-spacing: 0.04em;
    }

    .article-htmlbody ul,
    .article-htmlbody ol {
        margin-left: 2em;
        margin-bottom: 1em;
    }

    .article-htmlbody img {
        max-width: 100%;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(44,123,229,0.08);
        margin: 18px 0;
        display: block;
    }

    .article-htmlbody table {
        width: 100%;
        border-collapse: collapse;
        margin: 24px 0;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(44,123,229,0.08);
    }

    .article-htmlbody th,
    .article-htmlbody td {
        border: 1px solid #e3f0ff;
        padding: 10px 14px;
        text-align: left;
    }

    .article-htmlbody th {
        background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
        color: #fff;
        font-weight: 600;
    }


.article-foot {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 48px auto;
    padding: 18px 0;
    text-align: center;
    background: linear-gradient(90deg, #f7faff 80%, #e3f0ff 100%);
    border-radius: 10px;
    box-shadow: 0 1px 8px rgba(0,123,255,0.06);
    font-size: 1.15rem;
    color: #007bff;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, color 0.2s;
}

    .article-foot:hover {
        background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
        color: #fff;
        box-shadow: 0 4px 16px rgba(0,123,255,0.12);
    }

    .article-foot p {
        margin: 0;
        font-weight: 600;
        letter-spacing: 0.08em;
        font-size: 1.15rem;
    }





















/*
挂件的样式实现*/



/*#floating-widget,
#wechat-floating-widget {
    position: fixed;
    right: 32px;
    width: 72px;
    height: 150px;
    z-index: 9999;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(44,123,229,0.15);
    padding: 12px 0 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: box-shadow 0.2s;
    min-width: 72px;
    min-height: 120px;
    box-sizing: border-box;
}

#floating-widget {
    top: 150px;
    transform: none;
}
    #floating-widget:hover
    {
        top: 320px;
        transform: none;
    }*/
/*    #floating-widget i.fas.fa-comments {
        font-size: 2.5rem !important; 
        color: #2c7be5;  
        margin-bottom: 8px;  
    }
*/

        /*#floating-widget i {
        font-size: 2.5rem !important; 
        color: #2c7be5;  
        margin-bottom: 8px;  
    }


    #floating-widget p, #wechat-floating-widget p {
        margin: 0;
        font-size: 1rem;
        color: #2c7be5;
        writing-mode: vertical-rl;
        letter-spacing: 2px;
        font-weight: bold;
        text-align: center;
        line-height: 1.2;
    }

    #wechat-floating-widget {
        top: 320px;
        transform: none;
    }


    #wechat-floating-widget:hover {
        box-shadow: 0 4px 16px rgba(44,123,229,0.25);
    }


    #wechat-floating-widget .fa-weixin {
        font-size: 2.5rem;
        margin-bottom: 8px;
        color: #1AAD19;

    }


.wechat-floating-qrcode {
    display: none;
    flex-direction: column;
    align-items: center;
    margin-top: 8px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 8px 12px;
    border-radius: 8px;
    z-index: 10000;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

#wechat-floating-widget:hover .wechat-floating-qrcode {
    display: flex;
}

.wechat-floating-qrcode img {
    width: 72px;
    height: 72px;
    display: block;
    margin-bottom: 6px;
}

.wechat-floating-qrcode span {
    font-size: 0.95rem;
    color: #333;
}*/



#floating-widget,
#wechat-floating-widget {
    position: fixed;
    right: 32px;
    width: 72px;
    min-width: 72px;
    height: 150px;
    min-height: 120px;
    z-index: 9999;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(44,123,229,0.15);
    padding: 12px 0 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: box-shadow 0.2s, top 0.3s;
    box-sizing: border-box;
}

#floating-widget {
    top: 150px;
}

    #floating-widget:hover {
        box-shadow: 0 4px 16px rgba(44,123,229,0.25);
        top: 170px;
    }

    #floating-widget i.fas.fa-comments {
        font-size: 2.5rem;
        color: #2c7be5;
        margin-bottom: 8px;
        display: block;
    }

    #floating-widget p {
        margin: 0;
        font-size: 1rem;
        color: #2c7be5;
        writing-mode: vertical-rl;
        letter-spacing: 2px;
        font-weight: bold;
        text-align: center;
        line-height: 1.2;
    }

#wechat-floating-widget {
    top: 320px;
}

    #wechat-floating-widget:hover {
        box-shadow: 0 4px 16px rgba(44,123,229,0.25);
    }

    #wechat-floating-widget .fa-weixin {
        font-size: 2.5rem;
        margin-bottom: 8px;
        color: #1AAD19;
        display: block;
    }

    #wechat-floating-widget p {
        margin: 0;
        font-size: 1rem;
        color: #2c7be5;
        writing-mode: vertical-rl;
        letter-spacing: 2px;
        font-weight: bold;
        text-align: center;
        line-height: 1.2;
    }

.wechat-floating-qrcode {
    display: none;
    flex-direction: column;
    align-items: center;
    margin-top: 8px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 8px 12px;
    border-radius: 8px;
    z-index: 10000;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

#wechat-floating-widget:hover .wechat-floating-qrcode {
    display: flex;
}

.wechat-floating-qrcode img {
    width: 72px;
    height: 72px;
    display: block;
    margin-bottom: 6px;
}

.wechat-floating-qrcode span {
    font-size: 0.95rem;
    color: #333;
}






.thankyou-outer-container {
    width: 70vw;
    min-width: 320px;
    max-width: 1400px;
    height: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f8fb;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(60, 80, 120, 0.08);
}

.typewriter-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 60px 20px 40px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #e0e7ef 100%);
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(60, 80, 120, 0.10);
    margin: 0 auto;
    max-width: 700px;
    width: 100%;
}

.typewriter-content {
    min-height: 120px;
    font-size: 2rem;
    line-height: 1.6;
    color: #2d3748;
    text-align: center;
    margin-bottom: 48px;
    font-weight: 500;
    letter-spacing: 1px;
}

.back-home-link {
    display: inline-block;
    padding: 12px 36px;
    font-size: 1.15rem;
    color: #fff;
    background: linear-gradient(90deg, #36d1c4 0%, #5b86e5 100%);
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(91,134,229,0.10);
    transition: background 0.3s, box-shadow 0.3s;
}

    .back-home-link:hover {
        background: linear-gradient(90deg, #5b86e5 0%, #36d1c4 100%);
        box-shadow: 0 4px 16px rgba(91,134,229,0.18);
        color: #fff;
        text-decoration: none;
    }