/* TJS kuai-A PC：双栏 + 标题/人物/二维码三屏同步，纯切图铺排 */

* {
    margin: 0;
    padding: 0;
    -webkit-user-drag: none;
    user-select: none;
    box-sizing: border-box;
}

body {
    font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.desktop {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    color: #fff;
    font-size: 0;
}

.desktop .fixed-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
    pointer-events: none;
}

.desktop .content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: clamp(14px, 2vh, 28px) clamp(24px, 3vw, 56px) clamp(12px, 1.6vh, 24px);
}

.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    padding: 0 6vw;
}

.top .logo {
    height: clamp(56px, 7vh, 96px);
    width: auto;
    object-fit: contain;
    object-position: left center;
    display: block;
    cursor: pointer;
}

.top .contact {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2vw, 36px);
}

.top .nav-btn {
    height: clamp(48px, 6vh, 78px);
    width: auto;
    object-fit: contain;
    display: block;
    cursor: pointer;
}

/* —— 主区：左文案/二维码 + 右人物 —— */
.main {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 0;
    gap: 0;
}

/* 左列：标题贴顶，二维码贴底 */
.left-col {
    flex: 0 0 48%;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(6px, 1vh, 14px) 0 0;
}

.title-carousel {
    position: relative;
    top: 4vw;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

.title-carousel .title-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left top;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    pointer-events: none;
}

.title-carousel .title-img.active {
    opacity: 1;
}

/* 左下二维码：qr.js 整条切图承载文字/胶囊/装饰 + 真实 QR 叠在切图装饰 QR 位置上 */
.qr-block {
    flex-shrink: 0;
    padding: clamp(8px, 1.2vh, 16px) 0 clamp(4px, 0.8vh, 10px);
    margin-left: 5vw;
}

.qr-wrap {
    position: relative;
    width: 100%;
    max-width: clamp(360px, 36vw, 560px);
    font-size: 0;
}

.qr-pic {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 0;
}

/* 实码 + 白底遮盖切图装饰 QR（按高度约束，避免溢出横条切图） */
.qr-wrap .qrcode-box {
    position: absolute;
    left: 13.1%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    height: 82%;
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: 2px;
}

#qrcode {
    display: block;
    width: 100%;
    height: 100%;
}

#qrcode img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

#qrcode canvas {
    display: none !important;
}

/* —— 右列：人物轮播贴右，从顶到底 —— */
.right-col {
    position: relative;
    flex: 1 1 52%;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    min-width: 0;
}

.right-col .hero-carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.right-col .hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    pointer-events: none;
}

.right-col .hero-slide.active {
    opacity: 1;
    z-index: 1;
}

.right-col .hero-img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: right center;
    display: block;
    transform-origin: right center;
}

/* 第一张切图留白多，视觉放大对齐其他两张 */
.right-col .hero-slide:nth-child(1) .hero-img {
    transform: scale(1.12);
}

/* 右边缘轮播点：非激活白圆点 / 激活竖向红胶囊 */
.right-col .pagination {
    position: absolute;
    right: clamp(10px, 1vw, 20px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 5;
}

.right-col .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgb(125, 104, 104);
    opacity: 1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.right-col .dot.active {
    width: 8px;
    height: 22px;
    background: #e8344b;
    opacity: 1;
}

@media screen and (max-height: 720px) {
    .top .logo {
        height: clamp(48px, 6vh, 72px);
    }

    .top .nav-btn {
        height: clamp(40px, 5vh, 60px);
    }

    .qr-wrap {
        max-width: clamp(300px, 30vw, 460px);
    }
}