﻿/* 覆盖layout的padding-top */
#app{padding-top:0!important}

/* 头部黑色背景（覆盖 layout.css 的半透明浮层，避免头部压在顶部大图上） */
.top_bg {
    position: relative;
    height: 135px;
    width: 100%;
    background: rgba(0, 0, 0, 1);
    z-index: 11;
}

.top_bg:before {
    content: "";
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    position: absolute;
    bottom: 0;
    left: 0;
}

/* ========== 璁插笀鍥㈡垚鍛?========== */

/* ===== Banner ===== */
.jstcy-hero{position:relative;overflow:hidden;height:950px;max-width:100%;margin:0 auto;background:#000}
.jstcy-hero img{position:absolute;left:50%;top:0;min-width:100%;height:100%;object-fit:cover;transform:translateX(-50%);opacity:0;transition:opacity 1s ease}
.jstcy-hero img.show{opacity:1}

/* ===== 鍥㈤槦绠€浠?===== */
.jstcy-intro{padding:100px 0;background:#fff;position:relative;overflow:hidden}
.jstcy-intro::before{content:"TEAM";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);font-size:120px;font-weight:700;color:rgba(0,0,0,.02);letter-spacing:20px;white-space:nowrap}
.jstcy-intro-content{max-width:900px;margin:0 auto;text-align:center;position:relative;z-index:1}
.jstcy-intro-content p{font-size:16px;color:#666;line-height:34px;margin-bottom:20px}

/* ===== 璁插笀鍗＄墖 ===== */
.jstcy-team{padding:100px 0;background:#f8f9fa;position:relative}
.jstcy-team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}

.jstcy-member{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.06);transition:all .5s cubic-bezier(.25,.46,.45,.94);position:relative}
.jstcy-member::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#c9a87c,#dfc9a8);transform:scaleX(0);transition:transform .4s ease;transform-origin:left;z-index:2}
.jstcy-member:hover{transform:translateY(-14px);box-shadow:0 24px 60px rgba(0,0,0,.15)}
.jstcy-member:hover::before{transform:scaleX(1)}

.jstcy-member-img{position:relative;overflow:hidden;height:320px}
.jstcy-member-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.25,.46,.45,.94)}
.jstcy-member:hover .jstcy-member-img img{transform:scale(1.08)}
.jstcy-member-img::after{content:"";position:absolute;bottom:0;left:0;right:0;height:100px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.5));opacity:0;transition:opacity .4s ease;pointer-events:none}
.jstcy-member:hover .jstcy-member-img::after{opacity:1}

.jstcy-member-index{position:absolute;top:20px;right:20px;width:48px;height:48px;background:rgba(0,0,0,.6);backdrop-filter:blur(10px);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:700;font-family:"DINOT",Arial,sans-serif;z-index:1;border:1px solid rgba(255,255,255,.2)}

.jstcy-member-info{padding:30px 28px 28px;position:relative}
.jstcy-member-name{font-size:24px;color:#1a1a1a;font-weight:700;margin-bottom:6px;letter-spacing:1px}
.jstcy-member-title{font-size:13px;color:#fff;background:linear-gradient(135deg,#c9a87c,#dfc9a8);padding:5px 18px;border-radius:20px;display:inline-block;margin-bottom:16px;letter-spacing:1px;box-shadow:0 2px 10px rgba(201,168,124,.3)}
.jstcy-member-desc{font-size:14px;color:#888;line-height:26px;margin-bottom:18px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.jstcy-member-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.jstcy-member-tag{font-size:12px;color:#666;background:#f5f5f5;padding:5px 14px;border-radius:20px;transition:all .3s ease}
.jstcy-member:hover .jstcy-member-tag{background:#f0f0f0}

.jstcy-member-contact{display:flex;align-items:center;justify-content:space-between;padding-top:18px;border-top:1px solid #f0f0f0}
.jstcy-member-exp{font-size:13px;color:#aaa;display:flex;align-items:center;gap:6px}
.jstcy-member-exp::before{content:"";width:4px;height:4px;background:#ddd;border-radius:50%}
.jstcy-member-link{width:40px;height:40px;border-radius:50%;background:#f5f5f5;display:flex;align-items:center;justify-content:center;transition:all .3s ease;cursor:pointer}
.jstcy-member-link:hover{background:#c9a87c}
.jstcy-member-link:hover svg{stroke:#fff}
.jstcy-member-link svg{width:18px;height:18px;stroke:#666;transition:stroke .3s ease}

/* ===== 璁插笀椋庨噰杞挱 ===== */
.jstcy-gallery{padding:100px 0;background:#111;position:relative;overflow:hidden}
.jstcy-gallery::before{content:"GALLERY";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:100px;font-weight:700;color:rgba(255,255,255,.03);letter-spacing:15px;white-space:nowrap}
.jstcy-gallery .jstcy-section-title .en{color:rgba(255,255,255,.05)}
.jstcy-gallery .jstcy-section-title .cn{color:#fff}
.jstcy-gallery .jstcy-section-title .cn::after{background:linear-gradient(90deg,#fff,transparent)}
.jstcy-gallery .jstcy-section-title .sub{color:rgba(255,255,255,.5)}
.jstcy-gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:1}
.jstcy-gallery-item{border-radius:14px;overflow:hidden;position:relative;aspect-ratio:4/3;cursor:pointer}
.jstcy-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.25,.46,.45,.94)}
.jstcy-gallery-item:hover img{transform:scale(1.1)}
.jstcy-gallery-item::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.6) 100%);opacity:0;transition:opacity .4s ease}
.jstcy-gallery-item:hover::after{opacity:1}
.jstcy-gallery-caption{position:absolute;bottom:0;left:0;right:0;padding:20px;color:#fff;font-size:14px;letter-spacing:1px;transform:translateY(10px);opacity:0;transition:all .4s ease;z-index:1}
.jstcy-gallery-item:hover .jstcy-gallery-caption{transform:translateY(0);opacity:1}

/* ===== 閫氱敤鏍囬 ===== */
.jstcy-section-wrap{width:1200px;margin:0 auto}
.jstcy-section-title{text-align:center;margin-bottom:60px;position:relative}
.jstcy-section-title .en{font-size:48px;color:rgba(0,0,0,.03);font-weight:700;text-transform:uppercase;letter-spacing:4px;font-family:"DINOT",Arial,sans-serif}
.jstcy-section-title .cn{font-size:36px;color:#1a1a1a;font-weight:300;margin-top:-20px;position:relative;z-index:1;letter-spacing:2px}
.jstcy-section-title .cn::after{content:"";display:block;width:50px;height:2px;background:linear-gradient(90deg,#c9a87c,#dfc9a8);margin:16px auto 0}
.jstcy-section-title .sub{font-size:16px;color:#999;margin-top:18px;letter-spacing:1px}

/* ===== CTA ===== */
.jstcy-cta{padding:100px 0;background:linear-gradient(135deg,#1a1a1a 0%,#2a2a2a 50%,#1a1a1a 100%);text-align:center;position:relative;overflow:hidden}
.jstcy-cta::before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(201,168,124,.03) 0%,transparent 50%);animation:ctaPulse 8s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.1);opacity:1}}
.jstcy-cta .jstcy-section-title .en{color:rgba(255,255,255,.06)}
.jstcy-cta .jstcy-section-title .cn{color:#fff}
.jstcy-cta .jstcy-section-title .cn::after{background:linear-gradient(90deg,#fff,transparent)}
.jstcy-cta .jstcy-section-title .sub{color:rgba(255,255,255,.5)}
.jstcy-cta-text{font-size:16px;color:rgba(255,255,255,.5);line-height:30px;max-width:600px;margin:0 auto 40px;position:relative;z-index:1}
.jstcy-cta-btns{display:flex;justify-content:center;gap:24px;position:relative;z-index:1}
.jstcy-cta-btn{display:inline-block;height:58px;line-height:58px;padding:0 56px;background:#c9a87c;color:#fff;font-size:16px;font-weight:700;border-radius:30px;text-decoration:none;letter-spacing:3px;transition:all .4s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden}
.jstcy-cta-btn::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .6s ease}
.jstcy-cta-btn:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(201,168,124,.3)}
.jstcy-cta-btn:hover::before{left:100%}

/* ===== 鍔ㄧ敾 ===== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.jstcy-section-title{animation:fadeInUp .8s ease forwards}
.jstcy-intro-content{animation:fadeInUp .8s ease .2s forwards;opacity:0}
.jstcy-team-grid{animation:fadeInUp .8s ease .3s forwards;opacity:0}
.jstcy-gallery-grid{animation:fadeInUp .8s ease .4s forwards;opacity:0}

/* ========== 移动端适配 ========== */
/* 大屏降级 (max-width: 1500px) */
@media screen and (max-width: 1500px) {
    .jstcy-hero {
        height: 700px;
    }
    .jstcy-section-wrap {
        width: 1200px;
    }
}

/* 平板 (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .jstcy-section-wrap {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .jstcy-team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .jstcy-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 手机 (max-width: 768px) */
@media screen and (max-width: 768px) {
    /* ---- 顶部头部 ---- */
    .top_bg {
        position: relative;
        height: auto;
        min-height: 60px;
    }
    .top_bg:before {
        display: none;
    }
    #app {
        padding-top: 0 !important;
    }

    /* ---- Hero 大图完整显示（contain + 居中） ---- */
    .jstcy-hero {
        height: 24vh !important;
        min-height: 150px;
        max-height: 240px;
        margin-top: 0;
    }
    .jstcy-hero > img {
        object-fit: cover;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        min-width: 100%;
        height: 100%;
    }

    /* ---- 区块间距与标题 ---- */
    .jstcy-intro,
    .jstcy-team,
    .jstcy-gallery,
    .jstcy-cta {
        padding: 50px 0;
    }
    .jstcy-section-wrap {
        padding: 0 15px;
    }
    .jstcy-section-title {
        margin-bottom: 35px;
    }
    .jstcy-section-title .en {
        font-size: 32px;
    }
    .jstcy-section-title .cn {
        font-size: 26px;
        margin-top: -12px;
    }

    /* ---- 团队 grid 单列 ---- */
    .jstcy-team-grid {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
    .jstcy-member-img {
        height: 280px;
    }
    .jstcy-member-info {
        padding: 24px 20px;
    }
    .jstcy-member-name {
        font-size: 20px;
    }

    /* ---- 风采 gallery 单列 ---- */
    .jstcy-gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    /* ---- CTA 按钮 ---- */
    .jstcy-cta-text {
        margin-bottom: 25px;
        padding: 0 15px;
    }
    .jstcy-cta-btns {
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }
    .jstcy-cta-btn {
        width: 80%;
        max-width: 320px;
        height: 52px;
        line-height: 52px;
        padding: 0 20px;
        font-size: 15px;
        box-sizing: border-box;
    }
}

/* 小屏 (max-width: 480px) */
@media screen and (max-width: 480px) {
    .jstcy-hero {
        height: 22vh;
        min-height: 130px;
        max-height: 200px;
    }
    .jstcy-section-title .en {
        font-size: 28px;
    }
    .jstcy-section-title .cn {
        font-size: 23px;
    }
    .jstcy-member-img {
        height: 240px;
    }
    .jstcy-cta-btn {
        width: 90%;
    }
}

