/* 先复用首页已定义全局变量，新增本页独有色值变量统一放入:root */
:root {
    --dark-black: rgb(68,84,106);
    /* 品牌金色系 */
    --gold-main: #B89C68;
    --gold-bright: #C8A458;
    /* 基础黑白灰 */
    --color-white: #fff;
    --color-gray-line1: #ccc;
    /* 页面背景色 */
    --bg-culture-body: #F8F7F5;
    --bg-culture-wrap: #F5F3EE;
    --bg-bread-full: #F8F7F5; /* 面包屑全屏通栏背景色 */
    /* 辅助彩色标签 */
    --tag-orange: #D28A67;
    --tag-purple: #6832A8;
    --tag-red: rgba(168,50,50,0.7);
    /* 阴影透明金色 */
    --gold-shadow-009: rgba(200, 164, 88, 0.09);
    --gold-shadow-016: rgba(200, 164, 88, 0.16);
    --gold-shadow-018: rgba(200, 164, 88, 0.18);
}

/* 企业文化页面样式 */

/* 通栏外层容器：面包屑+全屏标题（统一顶部间距80px） */
.pp-full-bread-title-wrap {
    width: 100%;
    overflow-x: hidden;
    margin-top: 80px;
}

/* ========== 面包屑全屏通栏核心样式（统一标准） ========== */
.pp-bread-full-wrap {
    width: 100%;
    background-color: var(--bg-bread-full);
    padding: 40px 0;
}
.pp-bread-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px; /* 统一字号 */
}
.pp-bread-link {
    color: var(--dark-black);
    text-decoration: none;
    transition: color 0.3s ease;
}
.pp-bread-link:hover {
    color: var(--gold-bright);
}
.pp-sep, .pp-bread-cur {
    color: var(--dark-black);
}

/* 主体内容外层容器 */
.pp-culture-wrap {
    background-color: var(--bg-culture-wrap);
    line-height: 1.7;
    overflow-x: hidden;
    padding-top: 30px;
    font-size: 14px;
}

/* 内容居中容器（版心统一1440px，左右24px边距） */
.pp-container {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

/* 滚动渐入动画 */
.pp-animate-item {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.pp-animate-item.pp-show {
    opacity: 1;
    transform: translateY(0);
}

/* 全屏标题区块（核心通栏背景） */
.pp-title-block {
    width: 100%;
    text-align: center;
    padding: 80px 0;
    background: url('/cshp-web/upload/big-bg-culture.jpg') center / cover no-repeat;
    height: 400px;
    margin-bottom: 80px;
}
.pp-main-title {
    font-size: 24px;
    color: var(--color-white);
    margin-bottom: 12px;
}
.pp-title-line {
    display: block;
    width: 70px;
    height: 3px;
    background: var(--color-white);
    margin: 0 auto;
}
/* 标题副标题，替代HTML内联style */
.pp-title-sub {
    margin-top: 16px;
    font-size: 16px;
    color: var(--color-white);
}
.pp-block-title {
    text-align: center;
    font-size: 20px;
    margin-bottom: 30px;
    color: var(--dark-black);
}

/* 企业使命 */
.pp-mission-block {
    margin-bottom: 100px;
}
.pp-mission-row {
    display: grid;
    grid-template-columns: 58fr 42fr;
    gap: 48px;
    align-items: center;
}
.pp-img-box-wrap {
    overflow: hidden;
    border-radius: 14px;
}
.pp-img-box {
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 6px 22px var(--gold-shadow-009);
    display: block;
    transition: transform 0.4s ease;
}
.pp-main-text {
    font-size: 20px;
    color: var(--gold-main);
    font-weight: 500;
    margin-bottom: 20px;
}
.pp-sub-text {
    font-weight: 600;
    margin-bottom: 36px;
    color: var(--dark-black);
}
.pp-tag-row {
    display: flex;
    gap: 24px;
}
.pp-tag-card {
    flex: 1;
    background: var(--gold-main);
    color: var(--color-white);
    padding: 24px 20px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

/* 企业愿景 */
.pp-vision-block {
    margin-bottom: 100px;
}
.pp-vision-top-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: var(--gold-main);
    padding: 18px;
    border-radius: 14px;
    margin-bottom: 30px;
}
.pp-vision-top-bar h2 {
    color: var(--color-white);
    font-size: 18px;
}
.pp-trophy-icon {
    font-size: 30px;
}
.pp-img-full-wrap {
    overflow: hidden;
    border-radius: 14px;
}
.pp-img-full {
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 6px 22px var(--gold-shadow-009);
    margin-bottom: 20px;
    transition: transform 0.4s ease;
}
.pp-vision-sub {
    text-align: center;
    margin-top: 16px;
    font-size: 18px!important;
    color: var(--dark-black);
}

/* 核心价值观 */
.pp-value-block {
    border-top: 1px solid var(--color-gray-line1);
    margin-bottom: 100px;
}
.pp-value-block .pp-block-title {
    margin: 100px 0;
}
.pp-value-row {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px;
    margin-bottom: 32px;
}
.pp-value-card {
    position: relative;
    background: var(--color-white);
    border-radius: 14px;
    padding: 70px 20px 30px;
    text-align: center;
    box-shadow: 0 4px 16px var(--gold-shadow-009);
    overflow: visible;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pp-value-top-tag {
    position: absolute;
    left: 50%;
    top: -28px;
    transform: translateX(-50%);
    width: 110px;
    height: 48px;
    line-height: 48px;
    border-radius: 99px;
    color: var(--color-white);
    font-size: 18px;
    z-index: 2;
}
.tag1 {background:var(--gold-main);}
.tag2 {background:var(--tag-orange);}
.tag3 {background:var(--gold-main);}
.tag4 {background:var(--tag-purple);}

.pp-value-small-img-wrap {
    overflow: hidden;
    border-radius: 10px;
}
.pp-value-small-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 16px;
    transition: transform 0.4s ease;
}
.pp-value-title {
    font-size: 20px;
    color: var(--gold-main);
    margin-bottom: 12px;
}
.pp-value-desc {
    line-height: 1.6;
    color: var(--dark-black);
}
.pp-value-bottom-slogan {
    margin-top: 100px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--dark-black);
}

/* 企业精神 */
.pp-spirit-block {
    margin-bottom: 100px;
}
.pp-spirit-banner {
    width: 100%;
    text-align: center;
    background: var(--gold-main);
    padding: 14px 40px;
    border-radius: 14px 14px 0 0;
    margin-bottom: 32px;
}
.pp-spirit-banner h2 {
    font-size: 24px;
    color: var(--color-white);
}
.pp-spirit-slogan {
    display: table;
    margin: 0 auto 48px;
    background: var(--tag-red);
    color: var(--color-white);
    font-size: 18px;
    padding: 10px 24px;
}
.pp-spirit-row {
    display: grid;
    grid-template-columns: 45fr 55fr;
    gap: 48px;
    align-items: center;
}
.pp-spirit-single-img .pp-img-full {
    height: 460px;
    object-fit: cover;
}
.pp-spirit-card-wrap {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 32px;
}
.pp-hex-card {
    background: var(--color-white);
    padding: 32px 20px;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 4px 16px var(--gold-shadow-009);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pp-hex-index {
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 30px;
    font-weight: bold;
    color: var(--color-white);
    margin: 0 auto 16px;
    background: var(--gold-main);
    border-radius: 8px;
}
.pp-hex-title {
    font-size: 20px;
    color: var(--dark-black);
    margin-bottom: 12px;
}
.pp-hex-desc{
    color: var(--dark-black);
}

/* ========== 动画hover预设样式 ========== */
/* 价值观卡片悬浮 */
.pp-value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px var(--gold-shadow-018);
}
/* 六边形卡片悬浮 */
.pp-hex-card:hover {
    transform: translateY(-6px) rotate(1deg);
    box-shadow: 0 10px 26px var(--gold-shadow-016);
}
/* 图片放大hover */
.pp-img-box-wrap:hover .pp-img-box,
.pp-img-full-wrap:hover .pp-img-full,
.pp-value-small-img-wrap:hover .pp-value-small-img {
    transform: scale(1.06);
}

/* 呼吸动画 keyframe */
@keyframes breathScale {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}
.breath-animate {
    animation: breathScale 8s ease-in-out infinite;
}

/* 平板响应式 */
@media screen and (min-width:768px) and (max-width:1199px) {
    .pp-mission-row,
    .pp-spirit-row {
        grid-template-columns: 1fr;
    }
    .pp-value-row {
        grid-template-columns: repeat(2,1fr);
    }
    .pp-tag-row {
        flex-direction: column;
    }
}

/* 移动端响应式：加大标题背景高度，解决图片过小 */
@media screen and (max-width:767px) {
    .pp-culture-wrap {
        padding-bottom: 40px;
    }
    .pp-mission-row,
    .pp-spirit-row {
        grid-template-columns: 1fr;
    }
    .pp-value-row {
        grid-template-columns: 1fr;
    }
    .pp-tag-row {
        flex-direction: column;
    }
    .pp-main-title {
        font-size: 26px;
    }
    .pp-title-block {
        min-height: 320px;
        height: auto;
        padding: 60px 0;
    }
}