@charset "utf-8";
/* ==========================================================================
   首页 - 关于我们（gdAbout 新版）
   深色底 ｜ 左文右图 + 数据统计 + 进场/数字滚动动效
   ========================================================================== */

.gdAbout {
    position: relative;
    width: 100%;
    padding: 96px 0 100px;
    background: #0d0f14 url(../images/about_bg.jpg) center center no-repeat;
    background-size: cover;
    overflow: hidden;
}

/* 漂浮光斑 */
.gdAbout::before,
.gdAbout::after {
    content: '';
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    pointer-events: none;
}

.gdAbout::before {
    left: -160px;
    top: -180px;
    background: radial-gradient(circle, rgba(193, 3, 38, .18), transparent 65%);
    animation: gdGlow 9s ease-in-out infinite alternate;
}

.gdAbout::after {
    right: -180px;
    bottom: -200px;
    background: radial-gradient(circle, rgba(120, 140, 190, .12), transparent 65%);
    animation: gdGlow 11s ease-in-out -4s infinite alternate-reverse;
}

@keyframes gdGlow {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(70px, 50px) scale(1.12); }
}

.gdAbout .w1400 { position: relative; z-index: 1; }

.gdAbout_con {
    display: flex;
    align-items: center;
    gap: 80px;
}

/* --------------------------- 左侧文字 --------------------------- */
.gdAbout_l {
    flex: 1 1 55%;
    min-width: 0;
    opacity: 0;
    transform: translateY(44px);
    transition: opacity .9s ease, transform .9s cubic-bezier(.22, .61, .36, 1);
}

.gdAbout_l.in {
    opacity: 1;
    transform: none;
}

.gdAbout_kicker {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.gdAbout_kicker i {
    display: block;
    width: 52px;
    height: 6px;
    background: #c10326;
}

.gdAbout_kicker span,
.gdAbout_kicker {
    font-size: 16px;
    letter-spacing: 6px;
    color: #e14b64;
    font-weight: bold;
}

.gdAbout_tt {
    font-size: 42px;
    line-height: 1.25;
    color: #fff;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 0 0 6px;
}

.gdAbout_tt span {
    display: block;
    font-size: 17px;
    font-weight: normal;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, .45);
    margin-top: 12px;
}

.gdAbout_txt {
    font-size: 16px;
    line-height: 32px;
    color: rgba(255, 255, 255, .70);
    margin: 26px 0 0;
    text-align: justify;
}

/* 数据统计 */
.gdAbout_stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 44px;
    margin: 38px 0 0;
    padding: 0;
    list-style: none;
}

.gdAbout_stats li {
    padding: 20px 0 6px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s ease;
}

.gdAbout_stats li.in {
    opacity: 1;
    transform: none;
}

.gdAbout_stats .num {
    display: flex;
    align-items: baseline;
    line-height: 1;
}

.gdAbout_stats .num b {
    font-size: 46px;
    font-weight: bold;
    color: #fff;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    letter-spacing: 0;
}

.gdAbout_stats .num b.word {
    font-size: 34px;
    font-family: inherit;
}

.gdAbout_stats .num em {
    font-style: normal;
    font-size: 18px;
    color: #e14b64;
    font-weight: bold;
    margin-left: 6px;
}

.gdAbout_stats p {
    margin: 10px 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .52);
    letter-spacing: 1px;
}

/* 按钮 */
.gdAbout_btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 38px;
    padding: 14px 38px;
    background: #c10326;
    color: #fff;
    font-size: 16px;
    letter-spacing: 3px;
    text-decoration: none;
    border-radius: 2px;
    transition: background .35s ease, transform .35s ease, box-shadow .35s ease;
}

.gdAbout_btn i {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    position: relative;
    transition: width .35s ease;
}

.gdAbout_btn i::after {
    content: '';
    position: absolute;
    right: 0;
    top: -4px;
    border-left: 6px solid #fff;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.gdAbout_btn:hover {
    background: #e1052b;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(193, 3, 38, .38);
    color: #fff;
    text-decoration: none;
}

.gdAbout_btn:hover i { width: 26px; }

/* --------------------------- 右侧图片 --------------------------- */
.gdAbout_r {
    flex: 0 0 41%;
    position: relative;
    opacity: 0;
    transform: translateX(70px);
    transition: opacity 1s ease .15s, transform 1s cubic-bezier(.22, .61, .36, 1) .15s;
}

.gdAbout_r.in {
    opacity: 1;
    transform: none;
}

.gdAbout_pic {
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.gdAbout_pic img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .8s ease;
}

.gdAbout_pic:hover img { transform: scale(1.045); }

/* 红色偏移装饰框 */
.gdAbout_r::before {
    content: '';
    position: absolute;
    left: 26px;
    top: 26px;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(193, 3, 38, .55);
    z-index: 0;
    transition: left .5s ease, top .5s ease;
}

.gdAbout_r.in:hover::before {
    left: 18px;
    top: 18px;
}

/* 右下角年份徽标 */
.gdAbout_badge {
    position: absolute;
    right: -18px;
    bottom: 34px;
    z-index: 2;
    background: #c10326;
    color: #fff;
    padding: 16px 22px;
    box-shadow: 0 14px 30px rgba(193, 3, 38, .4);
    line-height: 1;
    animation: gdFloat 5s ease-in-out infinite;
}

.gdAbout_badge b {
    display: block;
    font-size: 26px;
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
}

.gdAbout_badge span {
    display: block;
    font-size: 12px;
    letter-spacing: 3px;
    margin-top: 6px;
    color: rgba(255, 255, 255, .85);
}

@keyframes gdFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* --------------------------- 响应式 --------------------------- */
@media (max-width: 1560px) {
    .gdAbout { padding: 84px 0 88px; }
    .gdAbout_con { gap: 60px; }
}

@media (max-width: 1366px) {
    .gdAbout_tt { font-size: 36px; }
    .gdAbout_txt { font-size: 15px; line-height: 30px; }
    .gdAbout_stats .num b { font-size: 40px; }
}

@media (max-width: 1200px) {
    .gdAbout { padding: 70px 0 74px; }
    .gdAbout_con { gap: 44px; }
    .gdAbout_r { flex: 0 0 42%; }
}

@media (max-width: 991px) {
    .gdAbout_con { flex-direction: column; align-items: stretch; gap: 52px; }
    .gdAbout_r { flex: none; max-width: 640px; margin: 0 auto; width: 100%; }
    .gdAbout_l { text-align: left; }
    .gdAbout_stats { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0 24px; }
    .gdAbout_r::before { left: 16px; top: 16px; }
}

@media (max-width: 767px) {
    .gdAbout { padding: 52px 0 56px; }
    .gdAbout_tt { font-size: 28px; }
    .gdAbout_tt span { display: none; }
    .gdAbout_kicker { font-size: 13px; letter-spacing: 4px; margin-bottom: 16px; }
    .gdAbout_txt { font-size: 14px; line-height: 27px; margin-top: 20px; }
    .gdAbout_stats { grid-template-columns: 1fr 1fr; gap: 0 20px; margin-top: 28px; }
    .gdAbout_stats p { font-size: 13px; letter-spacing: 0; }
    .gdAbout_stats .num b { font-size: 34px; }
    .gdAbout_stats .num b.word { font-size: 26px; }
    .gdAbout_btn { margin-top: 28px; padding: 12px 30px; font-size: 15px; }
    .gdAbout_badge { right: 0; bottom: 20px; padding: 12px 16px; }
    .gdAbout_badge b { font-size: 20px; }
}
