/* 字体-常规 */
@font-face {
    font-weight: normal;
    font-family: 'gow-regular';
    src: url('../fonts/gow-font/gow-regular.ttf');
    font-style: normal;
}

/* 公共样式 */
html {
    font-size: calc(100vw / 25.6);
}

h1,
p,
span {
    line-height: 1.5 !important;
    letter-spacing: 0rem;
}

.divide {
    position: absolute;
    bottom: -1.6rem;
    left: 0;
    z-index: 99;
    width: 100%;
}

.section-first,
.section-two,
.section-three,
[class*='details-'],
.section-seven,
.section-parameter {
    position: relative;
}

.section-two h1,
.section-three h1,
[class*='details-'] h1,
.section-seven h1,
.spec h1,
.popup-buy .handle-btn > .btn-box > a {
    font-weight: 500 !important;
}

.handle-box > h1,
.handle-box > p {
    font-family: 'gow-regular' !important;
}

/* 第一块 首屏*/
.section-first {
    width: 100%;
    background-color: #000;
}

/* logo */
.section-first .content-box {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
}

/* 手柄内容 */
.section-first .content-box .handle-box {
    display: flex;
    position: absolute;
    top: 1.1rem;
    right: 1.8rem;
    flex-direction: column;
    align-items: center;
}

/* 弹窗style */
.fancybox-overlay {
    /* 蒙层 */
    /* background-image: none; */
    background-color: rgba(0, 0, 0, 0.3);
}

.fancybox-skin {
    background-color: transparent;
    box-shadow: none !important;
}

.popup-buy > img {
    position: relative;
    width: 6rem;
    height: 9rem;
}

.popup-buy > .handle-btn {
    display: flex;
    position: absolute;
    bottom: 0.8rem;
    left: 0%;
    justify-content: center;
    width: 100%;
}

.popup-buy .handle-btn > .btn-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.popup-buy .handle-btn > .btn-box > a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.6rem;
    height: 0.8rem;
    margin-bottom: 0.1rem;
    padding-top: 0.05rem;
    background: url('/images/2026/dock-gow/first/bg-buy.png') center / 100% 100% no-repeat;
    color: #878787;
    font-size: 0.28rem;
    font-weight: normal;
    text-decoration: none;
    text-transform: uppercase;
}

.popup-buy .handle-btn > .btn-box > a:last-child {
    margin: 0;
}

.popup-buy .handle-btn > .btn-box > a:hover {
    color: #efefef;
    background-image: url('/images/2026/dock-gow/first/bg-buy2.png');
}

.handle-box img:nth-child(1) {
    width: 6.95rem;
}

.handle-box img:nth-child(3) {
    width: 5.8rem;
    margin: 0.5rem auto 0.6rem;
}

/* 基础状态 */
.handle-box img.popup:nth-child(4) {
    width: 5rem;
    transition:
        filter 0.2s ease,
        transform 0.2s ease;
    cursor: pointer;
}

/* 鼠标移入状态 */
.handle-box img.popup:nth-child(4):hover {
    /* 枪口火光（橘红+炽黄）轮廓发光 */
    filter: drop-shadow(0 0 10px #ff0000e6) drop-shadow(0 0 22px rgba(255, 60, 0, 0.5));
    animation: war-recoil 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* 击发后坐力：暴退 ➔ 回弹 ➔ 定位 */
@keyframes war-recoil {
    0% {
        transform: scale(1) translateY(0);
    }
    25% {
        transform: scale(1.06) translateY(-4px) rotate(-1deg); /* 击发抬头 */
    }
    60% {
        transform: scale(0.98) translateY(1px); /* 后坐力缓冲 */
    }
    100% {
        transform: scale(1.03) translateY(0) rotate(0deg); /* 归位 */
    }
}

.handle-box > h1 {
    margin: 0.3rem 0 0;
    color: #efefef !important;
    font-size: 0.32rem !important;
    font-weight: normal !important;
}

.handle-box > p {
    margin-top: 0.45rem;
    color: #dadbda;
    font-size: 0.24rem !important;
    text-align: center;
}

/* 第二块 设计理念*/
.section-two picture img {
    scale: 1.05;
    will-change: transform; /* 开启 GPU 加速，提升缩放性能 */
}

.section-two .container {
    position: absolute;
    top: 5.9rem;
    left: 50%;
    width: 15rem;
    padding: 0;
    text-align: center;
    transform: translate(-50%, 0%);
}

.section-two .container > h1 {
    margin: 0 0 0.5rem;
    color: #efefef !important;
    font-size: 0.5rem !important;
    text-transform: uppercase;
}

.section-two .container > p {
    color: #ffffff !important;
    font-size: 0.24rem !important;
    line-height: 2 !important;
    text-wrap: balance;
}

/* 第三块 介绍*/
.section-three .container {
    position: absolute;
    top: 3.3rem;
    left: 3rem;
    width: 8rem;
    padding: 0;
    text-wrap: balance;
}

.section-three .container > h1 {
    margin: 0 0 0.5rem;
    color: #efefef !important;
    font-size: 0.5rem !important;
    text-transform: uppercase;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
}

.section-three .container > p {
    color: #ffffff !important;
    font-size: 0.24rem !important;
    text-wrap: balance;
}

/* 第四块  细节 */
[class*='details-'] .container {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    justify-content: space-between;
    align-items: center;
    width: 20.7rem;
    padding: 0;
    transform: translate(-50%, -50%);
}

[class*='details-'] .container:before,
[class*='details-'] .container:after {
    content: none;
}

[class*='details-'] .container h1 {
    margin: 0 0 0.5rem;
    color: #efefef !important;
    font-size: 0.5rem !important;
    text-transform: uppercase;
    text-wrap: balance;
}

[class*='details-'] .container p {
    color: #ffffff !important;
    font-size: 0.24rem !important;
    text-wrap: balance;
}

.details-right .container {
    flex-direction: row-reverse;
}

[class*='details-'] .container > img,
[class*='details-'] .container > .video {
    position: relative;
    width: 9.8rem;
}

[class*='details-'] .container > .video img,
[class*='details-'] .container > .video video {
    width: 100%;
}

[class*='details-'] .container > .video img {
    position: absolute;
    top: 0;
    left: 0;
}

[class*='details-'] .container > .video video {
    clip-path: polygon(0.55rem 0, 100% 0, 100% 100%, 0 100%, 0 0.45rem);
}

[class*='details-'] .container > .text-box {
    width: 9rem;
}

/* 第五块*/
.section-seven .container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 21.45rem;
    padding: 0;
    transform: translate(-50%, -50%);
}

.section-seven .container > img {
    width: 100%;
}

.section-seven .container .text-box {
    position: absolute;
    top: 2.5rem;
    right: 1.5rem;
    width: 7.95rem;
    text-wrap: balance;
}

.section-seven .text-box h1 {
    margin: 0 0 0.5rem;
    color: #efefef !important;
    font-size: 0.48rem !important;
    text-transform: uppercase;
    text-wrap: balance;
}

.section-seven .text-box p {
    color: #ffffff !important;
    font-size: 0.22rem !important;
}

/* 第六块-参数 */
.spec h1 {
    margin: 0;
    color: #efefef !important;
    font-size: 0.48rem !important;
    text-transform: uppercase;
}

.section-parameter .container .carousel {
    padding: 1rem 0 0.55rem;
    opacity: 1;
}

.section-parameter .container .carousel img {
    width: 100%;
    margin: 0 auto;
    padding: 0 0.1rem;
}

.section-parameter .container .row {
    background-color: transparent !important;
}

.section-parameter .container .row > div {
    display: flex;
    flex-wrap: wrap;
}

.section-parameter .container {
    position: absolute;
    top: 1rem;
    left: 50%;
    width: 16rem;
    padding: 0;
    transform: translate(-50%, 0%);
}

.section-parameter .container > img {
    width: 3.35rem;
}

.section-parameter .container h3 {
    margin: 0.45rem 0 0;
    color: #bbbbbb;
    font-size: 0.26rem;
}

.section-parameter .container .row li {
    color: #d3d3d3;
    font-size: 0.18rem;
    opacity: 0.7;
    text-wrap: balance;
}

.section-parameter .container li > span {
    padding-left: 0.3rem;
}

.section-parameter .container .col-md-12 > li {
    padding: 0.3rem 0;
    color: #d3d3d3;
    font-size: 0.16rem;
    opacity: 0.3;
}

.section-parameter .container .col-md-12 > li:last-child {
    border: none;
    font-size: 0.14rem;
}

.section-parameter .col-md-6 hr,
.section-parameter .col-md-12 hr {
    margin: 0.25rem 0;
    opacity: 0.6;
    border-bottom: 1px solid #777777;
}

/* 小于等于 767px（小于 768px） */
@media screen and (max-width: 767px) {
    html {
        font-size: 13.3333vw !important;
    }

    h1,
    p,
    span {
        line-height: 1.3 !important;
        letter-spacing: 0.01rem;
    }

    p,
    li,
    span {
        letter-spacing: 0rem;
    }

    .divide {
        display: none;
    }

    .handle-box > h1,
    .section-two h1,
    .section-three h1,
    [class*='details-'] h1,
    .section-seven h1,
    .spec h1,
    .popup-buy .handle-btn > .btn-box > a {
        font-weight: 600 !important;
    }

    /* 动画样式 */
    [class*='details-'],
    .section-seven {
        background-color: #000 !important;
        overflow: hidden;
    }

    /* 第一块 */
    .section-first .content-box {
        top: 2.85rem;
        left: 50%;
        width: 95%;
        height: auto;
        transform: translate(-50%, 0%);
    }

    .section-first .content-box .handle-box {
        position: static;
        transform: none;
    }

    .handle-box img:nth-child(3) {
        width: 5.25rem;
        margin: 0 auto 0.5rem;
        order: -1;
    }

    .handle-box img:nth-child(1) {
        width: 6.7rem;
    }

    .handle-box > h1 {
        margin: 0.2rem 0 0.5rem;
        font-size: 0.4rem !important;
        text-align: center;
        text-transform: uppercase;
        text-wrap: balance;
    }

    .handle-box img.popup:nth-child(4) {
        width: 4.8rem;
    }

    .handle-box > p {
        margin: 0.5rem 0 0;
        font-size: 0.3rem !important;
    }

    /* 弹窗 */
    .popup-buy > img {
        width: 6.5rem;
        height: auto;
    }

    .popup-buy {
        position: relative;
    }

    .popup-buy > .handle-btn {
        display: flex;
        top: auto;
        bottom: 0.8rem;
        flex-direction: column;
        align-items: center;
    }

    .popup-buy .handle-btn > .btn-box {
        display: flex;
        justify-content: space-between;
    }

    .popup-buy .handle-btn > .btn-box > a {
        width: 4.5rem;
        height: 0.8rem;
        margin: 0.1rem 0;
        font-size: 0.28rem;
        text-align: center;
    }

    /* 定义 .fancybox-close 的样式，使其位于弹窗底部并居中 */
    .fancybox-close {
        display: block;
        position: absolute;
        top: auto;
        bottom: -0.8rem;
        left: 50%;
        width: 0.7rem;
        height: 0.7rem;
        background: url('/images/2024/black-myth/icon/close.png') center / 98% no-repeat;
        transform: translateX(-50%);
        cursor: pointer;
    }

    /* 第二块 */
    .section-two {
        overflow: hidden;
    }

    .section-two .container {
        top: auto;
        bottom: 0.5rem;
        width: 95%;
        padding: 0;
    }

    .section-two .container > h1 {
        margin: 0 0 0.45rem;
        font-size: 0.4rem !important;
        text-wrap: balance;
    }

    .section-two .container > p {
        font-size: 0.3rem !important;
        line-height: 1.3 !important;
    }

    .section-two .container br {
        display: none;
    }

    /* 第三块 */
    .section-three .container {
        top: auto;
        bottom: 0.2rem;
        left: 50%;
        width: 95%;
        text-align: center;
        transform: translateX(-50%);
    }

    .section-three .container > h1 {
        margin: 0 0 0.45rem;
        font-size: 0.4rem !important;
    }

    .section-three .container > p {
        font-size: 0.3rem !important;
    }

    .section-three .container p > br {
        display: none;
    }

    /* 第四块  细节 */
    [class*='details-'] .container {
        z-index: 99;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    [class*='details-'] .container > img,
    [class*='details-'] .container > .video {
        width: 5.5rem;
    }

    [class*='details-'] .container > .text-box {
        width: 95%;
        margin-top: 0.6rem;
        text-align: center;
    }

    [class*='details-'] .container h1 {
        margin: 0 0 0.4rem;
        font-size: 0.4rem !important;
    }

    [class*='details-'] .container p {
        margin: 0;
        font-size: 0.3rem !important;
    }

    /* 大图板块 */
    .section-seven .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        text-align: center;
    }

    .section-seven .container > img {
        width: 6.5rem;
    }

    .section-seven .container .text-box {
        position: relative;
        top: auto;
        right: auto;
        width: 95%;
        margin-top: 0.6rem;
    }

    .section-seven .text-box h1 {
        margin: 0 0 0.4rem;
        font-size: 0.38rem !important;
    }

    .section-seven .text-box p {
        margin: 0;
        font-size: 0.3rem !important;
    }

    .section-seven .container br {
        display: none;
    }

    /* 第六块 */
    .section-parameter .container {
        top: 0.8rem;
        width: 100%;
    }

    .section-parameter .container > img {
        width: 2.68rem;
    }

    .section-parameter .container .carousel {
        padding: 0.6rem 0 0;
    }

    .section-parameter .container .carousel img {
        width: 150%;
    }

    .section-parameter .container .spec > .col-sm-6,
    .section-parameter .container .spec > .col-sm-6 > .col-sm-12 {
        padding: 0;
    }

    .section-parameter .container .col-sm-12 {
        padding: 0;
        text-align: left;
    }

    .section-parameter .container .col-sm-12 .mobile-hide {
        display: none;
    }

    .section-parameter.spec h1 {
        font-size: 0.4rem !important;
        line-height: 1.5 !important;
        text-align: center;
    }

    .section-parameter .container h3 {
        margin-top: 0.5rem;
        font-size: 0.33rem !important;
    }

    .section-parameter .container li {
        margin: 0.08rem 0;
        font-size: 0.26rem !important;
        line-height: 1.3 !important;
        text-align: left;
    }

    .section-parameter .col-md-6 hr,
    .section-parameter .col-md-12 hr {
        margin: 0.25rem 0;
        border-bottom: 1px solid #716d625e;
    }

    .section-parameter .container .col-sm-12 {
        display: block !important;
        text-align: left;
    }

    .section-parameter .container .col-md-12 > .none-li {
        margin: 0.5rem 0 0;
        padding: 0 15px;
    }

    .section-parameter .container .col-md-12 > .none-li > br {
        display: none;
    }

    .section-parameter .container .col-md-12 > .none-li:last-child {
        margin: 0;
        font-size: 0.13rem !important;
    }

    .section-parameter .parting {
        position: absolute;
        top: 0;
        left: 50%;
        width: 7.5rem;
        margin: 0 !important;
        transform: translate(-50%, -50%);
    }

    .section-parameter .hr-hide {
        height: 0.5rem;
        margin: 0 !important;
        opacity: 0;
    }
}

/* 768px 到 1023px（768px 到 1023px - 平板和大手机，1k 屏幕） */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
}

/* 1024px 到 1279px（1024px 到 1279px - 小型桌面和大型平板，1k 到 1.5k 屏幕） */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
}

@media only screen and (min-width: 1280px) and (max-width: 1365px) {
}

/* 1366px 到 1599px（1366px 到 1599px - 大型桌面，2k 屏幕） */
@media only screen and (min-width: 1366px) and (max-width: 1599px) {
}

/* 2560px 到 2879.9904px（2560px 到 2880px - 特别针对 2560px，2.5k 到 3k 屏幕） */
@media only screen and (min-width: 2560px) and (max-width: 2879px) {
}

/* 2880px 及以上（2880px 及以上 - 超高分辨率设备，3k 及以上屏幕） */
@media only screen and (min-width: 2880px) {
}