﻿/* 覆盖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;
}

/* ===== 濡冨ス鏂囧寲椤甸潰鏍峰紡 ===== */

/* 闈㈠寘灞?*/
.ftwh-breadcrumb .plc{display:block}

/* 婊氬姩鍏ュ満鍔ㄧ敾 */
@keyframes ftwh-fadeUp{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}
@keyframes ftwh-fadeLeft{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}
@keyframes ftwh-fadeRight{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
@keyframes ftwh-scaleIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes ftwh-widthGrow{from{width:0}to{width:60px}}
@keyframes ftwh-counterNum{from{opacity:0;transform:translateY(20px)}to{opacity:.6;transform:translateY(0)}}
@keyframes ftwh-cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.ftwh-anim{opacity:0}
.ftwh-anim.ftwh-animated{animation-fill-mode:both;animation-duration:.8s}
.ftwh-anim--up.ftwh-animated{animation-name:ftwh-fadeUp}
.ftwh-anim--left.ftwh-animated{animation-name:ftwh-fadeLeft}
.ftwh-anim--right.ftwh-animated{animation-name:ftwh-fadeRight}
.ftwh-anim--scale.ftwh-animated{animation-name:ftwh-scaleIn}
.ftwh-anim-delay-1{animation-delay:.15s!important}
.ftwh-anim-delay-2{animation-delay:.3s!important}
.ftwh-anim-delay-3{animation-delay:.45s!important}
.ftwh-anim-delay-4{animation-delay:.6s!important}
.ftwh-anim-delay-5{animation-delay:.75s!important}

/* 椤堕儴閫氭爮澶у浘 */
.ftwh-hero{position:relative;overflow:hidden;height:950px;max-width:100%;margin:0 auto;background:#000}
.ftwh-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}
.ftwh-hero>img.show{opacity:1}

/* 閫氱敤妯″潡鏍囬 */
.ftwh-section{padding:100px 0}
.ftwh-section-header{text-align:center;margin-bottom:60px;position:relative}
.ftwh-section-header .en{font-size:44px;color:rgba(0,0,0,.03);font-weight:700;text-transform:uppercase;letter-spacing:4px;line-height:1}
.ftwh-section-header .cn{font-size:32px;color:#1a1a1a;font-weight:bold;margin-top:-12px;position:relative;letter-spacing:2px}
.ftwh-section-header .sub{font-size:14px;color:#999;letter-spacing:2px;margin-top:10px;display:block}
.ftwh-section-header em{display:block;width:0;height:3px;background:linear-gradient(90deg,#c9a87c,#e8d5b5);margin:18px auto 0;border-radius:2px}
.ftwh-section-header.ftwh-section-header--anim em{animation:ftwh-widthGrow .8s ease .3s forwards}
.ftwh-section-header--light .cn{color:#fff}
.ftwh-section-header--light .sub{color:rgba(255,255,255,.7)}
.ftwh-section-header--light .en{color:rgba(255,255,255,.04)}
.ftwh-section-header--light em{background:linear-gradient(90deg,#c9a87c,#e8d5b5)}

/* 鍝佺墝鐞嗗康 */
.ftwh-philosophy{display:flex;align-items:center;gap:70px}
.ftwh-philosophy-text{flex:1;position:relative;padding-left:20px}
.ftwh-philosophy-text::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;background:linear-gradient(180deg,#c9a87c,transparent);border-radius:2px}
.ftwh-philosophy-text p{font-size:16px;line-height:2.2;color:#4c4c4c;text-align:justify;margin-bottom:16px;position:relative}
.ftwh-philosophy-text p::first-letter{font-size:28px;font-weight:bold;color:#c9a87c;margin-right:6px;line-height:1}
.ftwh-philosophy-img{width:520px;flex-shrink:0;border-radius:8px;overflow:hidden;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.15)}
.ftwh-philosophy-img::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid rgba(201,168,124,.3);border-radius:8px;pointer-events:none}
.ftwh-philosophy-img img{width:100%;display:block;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.ftwh-philosophy-img:hover img{transform:scale(1.05)}

/* 鏍稿績浠峰€艰 */
.ftwh-values{background:#1a1a1a;padding:100px 0;position:relative;overflow:hidden}
.ftwh-values::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(201,168,124,.08) 0%,transparent 70%);border-radius:50%}
.ftwh-values::after{content:'';position:absolute;bottom:-100px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,rgba(201,168,124,.05) 0%,transparent 70%);border-radius:50%}
.ftwh-values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;position:relative;z-index:1}
.ftwh-values-item{background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:45px 30px;text-align:center;transition:all .5s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.ftwh-values-item::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,#c9a87c,transparent);opacity:0;transition:opacity .4s}
.ftwh-values-item:hover{background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border-color:rgba(201,168,124,.5);transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.3)}
.ftwh-values-item:hover::before{opacity:1}
.ftwh-values-num{font-size:48px;font-weight:bold;color:#c9a87c;font-family:"DINOT",Arial;margin-bottom:18px;opacity:.5;transition:all .4s;animation:ftwh-counterNum .6s ease both}
.ftwh-values-item:hover .ftwh-values-num{opacity:1;transform:scale(1.1)}
.ftwh-values-item h3{font-size:20px;color:#fff;margin-bottom:14px;font-weight:bold;transition:color .3s}
.ftwh-values-item:hover h3{color:#c9a87c}
.ftwh-values-item p{font-size:14px;color:rgba(255,255,255,.55);line-height:1.9;transition:color .3s}
.ftwh-values-item:hover p{color:rgba(255,255,255,.8)}

/* 鏁版嵁缁熻妯箙 */
.ftwh-stats{background:linear-gradient(135deg,#1a1a1a 0%,#2a2a2a 100%);padding:60px 0;position:relative;overflow:hidden}
.ftwh-stats::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,124,.3),transparent)}
.ftwh-stats::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,124,.3),transparent)}
.ftwh-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;gap:40px}
.ftwh-stats-item{padding:20px 0}
.ftwh-stats-num{font-size:56px;font-weight:bold;color:#c9a87c;font-family:"DINOT",Arial;line-height:1}
.ftwh-stats-num span{font-size:22px;font-weight:normal;color:#c9a87c}
.ftwh-stats-label{font-size:15px;color:rgba(255,255,255,.6);margin-top:12px;letter-spacing:2px}
.ftwh-stats-item::after{content:'';display:block;width:30px;height:2px;background:rgba(201,168,124,.4);margin:15px auto 0}

/* 甯堣祫鍥㈤槦 */
.ftwh-team{background:linear-gradient(180deg,#f7f7f7,#f0f0f0);padding:100px 0}
.ftwh-team .ftwh-section-header .sub{color:#666}
.ftwh-team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.ftwh-team-item{text-align:center;transition:transform .4s}
.ftwh-team-item:hover{transform:translateY(-8px)}
.ftwh-team-img{position:relative;width:280px;height:340px;margin:0 auto 24px;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.12);transition:all .5s cubic-bezier(.4,0,.2,1)}
.ftwh-team-item:hover .ftwh-team-img{box-shadow:0 20px 50px rgba(0,0,0,.2);border-radius:12px}
.ftwh-team-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.ftwh-team-item:hover .ftwh-team-img img{transform:scale(1.1)}
.ftwh-team-img::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:50%;background:linear-gradient(transparent,rgba(0,0,0,.6));opacity:0;transition:opacity .4s}
.ftwh-team-item:hover .ftwh-team-img::after{opacity:1}
.ftwh-team-hover{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .5s;padding:20px;z-index:1}
.ftwh-team-img:hover .ftwh-team-hover{opacity:1}
.ftwh-team-hover p{font-size:13px;color:rgba(255,255,255,.95);line-height:2.2;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.ftwh-team-item h4{font-size:20px;font-weight:bold;color:#1a1a1a;margin-bottom:8px;transition:color .3s}
.ftwh-team-item:hover h4{color:#c9a87c}
.ftwh-team-item span{font-size:14px;color:#999;transition:color .3s;display:block}
.ftwh-team-item:hover span{color:#666}
.ftwh-team-item h4::after{content:'';display:block;width:0;height:2px;background:#c9a87c;margin:8px auto 0;border-radius:1px;transition:width .4s}
.ftwh-team-item:hover h4::after{width:40px}

/* 鏁欏鐜 */
.ftwh-env-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ftwh-env-item{position:relative;border-radius:8px;overflow:hidden;height:280px;cursor:pointer;box-shadow:0 4px 15px rgba(0,0,0,.08)}
.ftwh-env-item--large{grid-column:span 2;height:280px}
.ftwh-env-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.ftwh-env-item:hover img{transform:scale(1.08)}
.ftwh-env-item::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.7) 100%);z-index:1;opacity:0;transition:opacity .4s}
.ftwh-env-item:hover::before{opacity:1}
.ftwh-env-label{position:absolute;bottom:0;left:0;width:100%;padding:20px 24px;z-index:2;transform:translateY(10px);transition:transform .4s}
.ftwh-env-item:hover .ftwh-env-label{transform:translateY(0)}
.ftwh-env-label span{display:block;font-size:11px;color:rgba(255,255,255,.6);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.ftwh-env-label h4{font-size:18px;color:#fff;font-weight:bold;letter-spacing:1px}
.ftwh-env-label::after{content:'';display:block;width:0;height:2px;background:#c9a87c;margin-top:10px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.ftwh-env-item:hover .ftwh-env-label::after{width:40px}
.ftwh-env-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);z-index:3;width:60px;height:60px;border:2px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .4s cubic-bezier(.4,0,.2,1);opacity:0}
.ftwh-env-icon::before{content:'+';font-size:28px;color:#fff;font-weight:300}
.ftwh-env-item:hover .ftwh-env-icon{transform:translate(-50%,-50%) scale(1);opacity:1}

/* CTA鍖?*/
.ftwh-cta{background:#f7f7f7;padding:80px 0;text-align:center}
.ftwh-cta-text{font-size:16px;color:#666;line-height:2;max-width:700px;margin:0 auto 30px}
.ftwh-cta-btn{display:inline-block;height:54px;line-height:54px;padding:0 60px;border:2px solid #1a1a1a;border-radius:30px;font-size:16px;color:#1a1a1a;text-decoration:none;letter-spacing:3px;transition:all .4s cubic-bezier(.4,0,.2,1);font-weight:bold}
.ftwh-cta-btn:hover{background:#1a1a1a;color:#fff;transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,.15)}

/* 鍝嶅簲寮?*/
@media(max-width:1200px){
.ftwh-values-grid,.ftwh-team-grid,.ftwh-stats-grid{grid-template-columns:repeat(2,1fr)}
.ftwh-philosophy{flex-direction:column;gap:40px}
.ftwh-philosophy-img{width:100%}
.ftwh-env-grid{grid-template-columns:repeat(2,1fr)}
.ftwh-env-item--large{grid-column:span 2}
}

/* ========== 移动端适配 ========== */
/* 大屏降级 (max-width: 1500px) */
@media screen and (max-width: 1500px) {
    .ftwh-hero {
        height: 700px;
    }
    .ftwh-values-grid,
    .ftwh-stats-grid,
    .ftwh-team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .ftwh-env-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 平板 (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .ftwh-hero {
        height: 500px;
    }
    .ftwh-values-grid,
    .ftwh-stats-grid,
    .ftwh-team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ftwh-philosophy {
        flex-direction: column;
        gap: 40px;
    }
    .ftwh-philosophy-img {
        width: 100%;
    }
    .ftwh-env-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ftwh-env-item--large {
        grid-column: span 2;
    }
}

/* 手机 (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 + 居中） ---- */
    .ftwh-hero {
        height: auto !important;
        min-height: 150px;
        max-height: none !important;
        margin-top: 0;
        background: transparent;
    }
    .ftwh-hero > img {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        min-width: 0;
        max-width: 100%;
        object-fit: cover;
        transform: none;
        display: block;
        min-width: 100%;
        height: 100%;
    }

    /* ---- 通用区块间距 ---- */
    .ftwh-section {
        padding: 50px 0;
    }
    .ftwh-section-header {
        margin-bottom: 35px;
    }
    .ftwh-section-header .en {
        font-size: 30px;
    }
    .ftwh-section-header .cn {
        font-size: 24px;
        margin-top: -8px;
    }

    /* ---- 核心价值观 / 数据 / 团队 grid 单列 ---- */
    .ftwh-values-grid,
    .ftwh-stats-grid,
    .ftwh-team-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
    .ftwh-values-item {
        padding: 30px 20px;
    }
    .ftwh-values-num {
        font-size: 36px;
        margin-bottom: 12px;
    }
    .ftwh-stats-num {
        font-size: 40px;
    }

    /* ---- 师资团队头像宽度自适应 ---- */
    .ftwh-team-img {
        width: 80%;
        height: auto;
        aspect-ratio: 280/340;
    }
    .ftwh-team-item h4 {
        font-size: 17px;
    }

    /* ---- 教学环境 grid 单列 ---- */
    .ftwh-env-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    .ftwh-env-item,
    .ftwh-env-item--large {
        grid-column: auto !important;
        height: 220px;
    }

    /* ---- 品牌理念富文本防溢出 ---- */
    .ftwh-philosophy-text img,
    .ftwh-philosophy-text table,
    .ftwh-philosophy-text video,
    .ftwh-philosophy-text iframe,
    .endit-content img,
    .endit-content table,
    .endit-content video,
    .endit-content iframe {
        max-width: 100% !important;
        height: auto;
    }

    /* ---- CTA ---- */
    .ftwh-cta {
        padding: 50px 0;
    }
    .ftwh-cta-btn {
        height: 48px;
        line-height: 48px;
        padding: 0 40px;
        font-size: 15px;
    }
}

/* 小屏 (max-width: 480px) */
@media screen and (max-width: 480px) {
    .ftwh-hero {
        height: auto !important;
        min-height: 120px;
        max-height: none !important;
    }
    .ftwh-section-header .en {
        font-size: 26px;
    }
    .ftwh-section-header .cn {
        font-size: 21px;
    }
    .ftwh-values-num {
        font-size: 30px;
    }
    .ftwh-stats-num {
        font-size: 34px;
    }
    .ftwh-env-item,
    .ftwh-env-item--large {
        height: 190px;
    }
    .ftwh-philosophy-img {
        width: 100%;
    }
    .ftwh-team-img {
        width: 90%;
    }
}

