/**
 * pinpai.css - 经典品牌页面样式
 */

/* ================= 基础重置 ================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: #fff;
    color: #555;
    font-size: 13px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { border: 0; vertical-align: middle; max-width: 100%; display: block; }

/* ================= 主容器 ================= */
.container {
    width: 72vw;
    margin: 0 auto;
    position: relative;
}

/* ================= 通用组件 ================= */
.section-wrapper {
    margin-bottom: 60px;
}

/* 标题图片样式 */
.header-box {
    margin-bottom: 30px; 
}
.header-box .title-img {
    height: auto;
}

/* 红色按钮 */
.btn-red {
    display: inline-block;
    background-color: #e43d30;
    color: #fff;
    padding: 8px 36px;
    border-radius: 20px;
    font-size: 13px;
    transition: background 0.3s;
    box-shadow: 0 4px 8px rgba(228, 61, 48, 0.25);
}
.btn-red:hover { background-color: #c62828; }

/* ================= 布局模式 A (上白下灰) ================= */
.layout-type-a {
    position: relative;
    min-height: 520px; 
    display: flex;
    justify-content: space-between;
}

/* 全屏灰色背景 */
.layout-type-a .bg-layer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 200px; 
    background-color: #e6e6e6; 
    z-index: 0;
}

.layout-type-a .col-text,
.layout-type-a .col-poster,
.layout-type-a .col-logo {
    position: relative;
    z-index: 2;
}

/* 左侧文字 */
.layout-type-a .col-text {
    width: 30%;
    display: flex;
    align-items: flex-start; 
    padding-right: 30px;
    padding-top: 60px; 
}
.layout-type-a .col-text p {
    text-align: justify;
    color: #444;
    font-size: 13px;
    line-height: 2;
}

/* 中间海报 */
.layout-type-a .col-poster {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: flex-start; 
    padding-top: 10px;
}

.layout-type-a .poster-frame {
    width: 340px; 
    height: 440px;
    background: #ccc;
    position: relative;
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
    perspective: 1000px; /* 3D透视效果 */
    overflow: hidden;
}

.layout-type-a .poster-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: right bottom; /* 从右下角开始变换 */
}

/* 海报翻页动画 - 从右下角翻页进入 */
@keyframes posterFlipIn {
    0% {
        opacity: 0;
        transform: perspective(800px) rotateX(30deg) rotateY(-15deg) translateX(50px) translateY(50px) scale(0.8);
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
        transform: perspective(800px) rotateX(0deg) rotateY(0deg) translateX(0) translateY(0) scale(1);
    }
}

/* 反向翻页进入（向前翻页时使用） */
@keyframes posterFlipInReverse {
    0% {
        opacity: 0;
        transform: perspective(800px) rotateX(-30deg) rotateY(15deg) translateX(-50px) translateY(-50px) scale(0.8);
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
        transform: perspective(800px) rotateX(0deg) rotateY(0deg) translateX(0) translateY(0) scale(1);
    }
}

/* 退出动画 */
@keyframes posterFlipOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
}

/* 文字渐入动画 */
@keyframes textFadeIn {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.layout-type-a .poster-frame img.poster-flip-in {
    animation: posterFlipIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.layout-type-a .poster-frame img.poster-flip-in-reverse {
    animation: posterFlipInReverse 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.layout-type-a .poster-frame img.poster-flip-out {
    animation: posterFlipOut 0.2s ease-out forwards;
}

.layout-type-a .col-text .desc-text.text-fade-in {
    animation: textFadeIn 0.5s ease-out forwards;
}

.layout-type-a .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.7);
    color: #fff;
    text-align: center;
    padding: 8px 0;
    font-size: 12px;
}

/* 右侧 Logo & 按钮 */
.layout-type-a .col-logo {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    align-items: center;
    padding: 50px 0 60px 0;
}

.layout-type-a .logo-clean-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150px; 
}

.layout-type-a .logo-clean-container img {
    max-width: 198px;
    max-height: 198px;
    width: auto;
    height: auto;
    display: block;
}

/* ★★★ 分页样式调整 (大小一致) ★★★ */
.pagination {
    position: absolute;
    bottom: 20px; 
    left: 0;
    width: 100%;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.pagination .page-nums {
    margin-right: 50px; 
    display: flex;
    align-items: center;
}

/* 当前页码：01 (白色) */
.pagination .page-nums .current {
    color: #fff; 
    font-weight: bold;
    font-size: 20px; 
    line-height: 1;
}

/* 竖线 */
.pagination .page-nums .vert-line {
    display: inline-block;
    width: 2px;
    height: 18px; 
    background-color: #333;
    margin: 0 8px; 
    vertical-align: middle;
}

/* 总页码：03 (黑色) */
.pagination .page-nums .total {
    color: #333; 
    font-weight: bold; 
    font-size: 20px; 
    line-height: 1;
}

/* 箭头 */
.pagination .page-arrows {
    display: flex;
    align-items: center;
}

.pagination .page-arrows img {
    width: auto;
    height: 18px; 
    cursor: pointer;
    margin: 0 15px; 
    opacity: 0.8;
    transition: opacity 0.2s;
}
.pagination .page-arrows img:hover { opacity: 1; }


/* ================= 布局模式 B (横幅) ================= */
.layout-type-b {
    position: relative;
}

.layout-type-b .banner-area {
    width: 100%;
    height: 380px;
    background: #ddd;
    overflow: hidden;
}

.layout-type-b .banner-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.layout-type-b .content-overlay {
    width: 800px;
    margin: -70px auto 0;
    background: #fff;
    position: relative;
    z-index: 10;
    padding: 40px 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
}

.layout-type-b .overlay-logo-clean {
    width: 200px;
    border: none; 
    padding: 0; 
    background: none;
    box-shadow: none;
    margin-right: 40px; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.layout-type-b .overlay-logo-clean img {
    max-width: 100%;
    height: auto;
    display: block;
}

.layout-type-b .overlay-text {
    flex: 1;
}

.layout-type-b .overlay-text p {
    text-align: justify;
    margin-bottom: 20px;
    color: #666;
    font-size: 13px;
    line-height: 1.8;
}

.layout-type-b .btn-align-right {
    text-align: right;
}