body{
    margin: 0;
    padding: 0;
    max-width:100%;
    overflow-x:hidden;
    --nav-bar-size-width:1200px;
    --transform-height:-40px;/*默认移动高度*/
}

/*导航最外层容器*/
.headerNavContainer{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    padding: 0;
    position:fixed;
    z-index:1000;
    top:0;
    background:#000000;
    transition: all 0.3s;
}

/*导航菜单栏*/
.headerNavBar{
    /*width: calc(100% - 32px);*/
    width: 100%;
    max-width: var(--nav-bar-size-width);
    display:flex;
    height: 72px;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

/*导航菜单项*/
.headerNavBarItem{
    height:100%;
    position:relative;
    color:#FFF;
    font-size: 14px;
    font-weight: 500;
    line-height: 125%;
    opacity: 0.8;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.headerNavBarItem[key="home"]{
    opacity: 1;
}

/*导航菜单项-鼠标移动时*/
.headerNavBarItem[key="stabilizer"]:hover,
.headerNavBarItem[key="camera"]:hover,
.headerNavBarItem[key="intelligence"]:hover
{
    opacity: 1;
}


/*固定选项状态*/
.headerNavContainer[key="stabilizer"] .headerNavBarItem[key="stabilizer"],
.headerNavContainer[key="camera"] .headerNavBarItem[key="camera"],
.headerNavContainer[key="intelligence"] .headerNavBarItem[key="intelligence"]
{
    opacity: 1;
}


/*导航菜单项-商城图标按钮*/
.headerNavBarItem  svg{
    fill: currentColor;
}

/*导航菜单项-当前选中状态*/
.headerNavBarItemText{
    width:max-content;
}

/*导航菜单项-鼠标移动时*/
.headerNavBarItem:hover{
    opacity: 1;
}

/*导航菜单项-商城图标按钮*/
.headerNavBarItem > svg{
    fill: currentColor;
}

/*黑色背景遮罩*/
.headerNavContainerMask{
    width: 100vw;
    /*height: 100vh;*/
    min-height:100vh;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0);
    z-index: -1;
    transition: all 0.4s;
    visibility: hidden;
}

/*打开背景遮罩*/
.headerNavBarItem[key="stabilizer"]:hover ~ .headerNavContainerMask,
.headerNavBarItem[key="camera"]:hover ~ .headerNavContainerMask,
.headerNavBarItem[key="intelligence"]:hover ~ .headerNavContainerMask
{
    background: rgba(0,0,0,0.8);
    visibility: visible;
    z-index: 1;
}


/*纯黑背景*/
.headerGridBackground{
    position: absolute;
    top: 0;
    left:0;
    padding-top: 72px;
    background:#000000;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s;/*打开增加延时*/
    z-index:-1;
    pointer-events: none;
    /*height:0;*/
}

.colorWhite{
    color:#ffffff;
    opacity:1;
}


.headerNavContainer[key="0"] .headerGridBackground /*PC延时*/
{
    transition: all 0.2s;/*打开增加延时*/
}

/*通过纯黑背景显示遮罩*/
.headerGridBackground:hover ~ .headerNavContainerMask
{
    background: rgba(0,0,0,0.8);
    visibility: visible;
    z-index: 1;
}

/*通过纯黑背景显示遮罩*/
.headerGridBackground:focus-within ~ .headerNavContainerMask{
    background: rgba(0,0,0,0.8);
    visibility: visible;
    z-index: 1;
}

/*下拉系统栏*/
.headerSeriesContainer{
    width: 100%;
    max-width: var(--nav-bar-size-width);
    display:grid;
    grid-template-columns:repeat(5,auto);
    gap:32px;
    margin: 0 auto;
    max-height: calc(100vh - 96px);
    overflow-y: scroll;
    padding-bottom:48px;
    justify-content: space-between;
    transition: all 0.2s;/*打开增加延时*/
}

.headerSeriesContainer::-webkit-scrollbar{
    display:none
}

.headerSeriesContainer .headerNavGrid:last-child{
    /*margin-bottom: 32px;*/
}

/*下拉网格*/
.headerNavGrid{
    color:#FFF;
    font-size: 18px;
    font-weight: 500;
    line-height: 125%;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    transform: translateY(var(--transform-height));
    opacity: 0;
}


/*下拉网格渐变显示*/
.headerNavBarItem:hover + .headerGridBackground .headerNavGrid
{
    transform: translateY(0);
    opacity: 1;
}


.headerGridBackground:hover .headerNavGrid{
    transform: translateY(0);
    opacity: 1;
}


/*选项*/
.headerNavGridItem{
    position:relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*gap: 8px;*/
    transition: all 0.3s;
}
.navUnderLine{
    width:1px;
    height:1px;
    background:#C03939;
    opacity:0;
    transition: all 0.3s;
}

.headerNavGridItem:hover .navUnderLine{
    opacity:1;
    width:100%;
}

.firstItem{
    flex-direction: row;
    gap:2px;
    opacity:0.6;
    transition: all 0.3s;
}
.firstItem:hover{
    opacity:0.8
}

.storeItem{
    gap:8px;
}

/*封面图片*/
.headerNavImage{
    --thumb-width:calc((var(--nav-bar-size-width) - 48px) / 4);
    width:var(--thumb-width);
    height:var(--thumb-width);
    border-radius: 16px;
    background: linear-gradient(0deg, #FFF 0%, #FFF 100%), #141414;
    margin-bottom:8px;
    /*transition: all 0.3s;*/
}

/*封面图片放大*/
.headerNavImage>img:hover{
    transform: scale(1.05);
}

.headerNavImage>img{
    width:100%;
    /*height:100%;*/
    object-fit: contain;
    transition: all 0.3s;
}


/*系统大标题*/
.headerNavGridItem .bigTitle{
    color:#FFF !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    /*opacity:0.6 !important;*/
    line-height: 125%; /* 20.8px */
    margin-bottom:unset;
}

/*选项标题文本*/
.headerNavGridText{
    color:#ffffff;
    font-size: 18px;
    font-weight: 400;
    line-height: 125%;
    transition: all 0.3s;
    display:flex;
    align-items:center;
    position:relative;
}

/*字体颜色变化*/
.headerNavGridText:hover{
    opacity: 1;
}

.headerNavGridText:hover + svg{
    opacity: 1;
}


/*Explore菜单*/
.exploreContainer{
    position:absolute;
    top: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: 0 auto;
    gap: 16px;
    background: rgba(0,0,0,0.8);
    width: max-content;
    transition: all 0.3s;
    visibility: hidden;
    opacity: 0;
    padding:16px;
}
.exploreContainer .headerNavBarItemText{
    color:rgba(255,255,255,0.8);
    transition: all 0.1s;
}
.exploreContainer .headerNavBarItemText:hover{
    color:rgba(255,255,255,1);
    transform: scale(1.05);
}

.storeIcon{
    display:flex;
    border:solid 1px rgba(255, 255, 255, 0.20);
    border-radius: 80px;
    padding:8px 16px;
    gap:4px;
    align-items: center;
}

.storeIcon:lang(cn){
    display:block;
    border:unset;
    border-radius: unset;
    padding:unset;
    gap:unset;
}


/*内纯黑背影*/
.headerGridBackground2{
    --background2-height:0;
    position: absolute;
    top: 0;
    left:0;
    background:#000000;
    width: 100%;
    transition: all 0.2s;
    visibility: hidden;
    /*opacity: 0;*/
    z-index:-1;
    pointer-events: none;
    height: var(--background2-height,0);
    overflow: hidden;
}
.headerNavContainer[key="stabilizer"] .headerGridBackground2,
.headerNavContainer[key="camera"] .headerGridBackground2,
.headerNavContainer[key="intelligence"] .headerGridBackground2,
.headerNavContainer[key="explore"] .exploreContainer,
.headerNavBarItem[key="explore"]:hover .exploreContainer
{
    visibility: visible;
    opacity: 1;
    z-index:1;
}


/*移动端导航栏*/
.headerNavBarMobile{
    display: none;
    padding: 10px 16px;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    cursor:pointer;
    background:#000000;
    position:sticky;
    top:0;
    z-index: 100;
}

#new-gn-ham-input {
    position: fixed;
    opacity: 0;
    visibility: visible;
    z-index:1001
}

.nav-ham {
    stroke-width: 2px;
    transition: all 0.3s;
}

.ham-medium {
    stroke-dasharray: 16 16;
    stroke-dashoffset: 5;
    transform-origin: center center;
    transition: all 0.3s 0.1s;
}

.ham-top,
.ham-bottom {
    stroke-dasharray: 42 42;
    stroke-dashoffset: 26.2;
    transition: all 0.3s 0.1s;
}


/*解决超快速切换时可能只显示黑色背影问题*/
.headerNavContainer[key="stabilizer"] .headerGridBackground[key="stabilizer"],
.headerNavContainer[key="stabilizer"] .headerGridBackground[key="stabilizer"] .headerNavGrid
{
    transform: translateY(0) !important;
    opacity:1;
    visibility: visible;
    z-index:9;
}
.headerNavContainer[key="camera"] .headerGridBackground[key="camera"],
.headerNavContainer[key="camera"] .headerGridBackground[key="camera"] .headerNavGrid
{
    transform: translateY(0) !important;
    opacity:1;
    visibility: visible;
    z-index:9;
}
.headerNavContainer[key="intelligence"] .headerGridBackground[key="intelligence"],
.headerNavContainer[key="intelligence"] .headerGridBackground[key="intelligence"] .headerNavGrid
{
    transform: translateY(0) !important;
    opacity:1;
    visibility: visible;
    z-index:9;
}

.storeIconName{
    color: #ffffff;
    cursor: pointer;
    font-size: 16px;
}

/*新品动效*/
.circleAnimation{
    position:absolute;
    left:0;
    top:8px;
    width:4px;
    height:4px;
    border-radius: 9999px;
    background: #C03939;
    animation: circleAnimation 1.6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    /* 保持动画首尾状态 */
    animation-fill-mode: both;
    transform:translateX(-12px);/*将小红点占位往回拉*/
}
@keyframes circleAnimation {
    0% {
        box-shadow: 0px 0px 0px 0px rgba(192, 57, 57, 0.60);
    }

    100% {
        box-shadow: 0px 0px 0px 6px rgba(192, 57, 57, 0.0);
    }
}

@media only screen and (min-width: 1025px) {
    /*打开纯黑背景*/
    .headerNavBarItem:hover + .headerGridBackground,
    .headerGridBackground:hover{
        visibility: visible;
        opacity: 1;
        z-index:9;
        pointer-events:initial;
    }

    /*网格从一级菜单刚好底部出现*/
    .headerNavBarItem:hover  + .headerGridBackground > .headerSeriesContainer,
    .headerGridBackground:hover > .headerSeriesContainer {
        padding-top:24px;
    }
}

/*处理最小高度滚动条*/
@media only screen and (max-height: 320px) {
    .headerNavGrid{
        padding-bottom:40px;
    }
}

@media screen and (max-width: 1280px) {
    body{
        --nav-bar-size-width:calc(100% - 32px);
    }

    .headerSeriesContainer{
        width:calc(100% - 32px);
        grid-template-columns:repeat(4,1fr);
        row-gap:40px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .headerNavImage {
        --thumb-width: calc((var(--nav-bar-size-width) - 48px - 32px) / 4);
        margin-bottom:4px;
    }

    .headerNavGridText{
        font-size:16px;
    }


}


@media screen and (max-width: 1024px) {
    body{
        --nav-bar-size-width:100vw;
    }
    .btn-nav-toggle{
        height:24px;
        width:40px;
    }
    .btn-nav-toggle > svg{
        height:24px;
        width:24px;
    }

    .headerNavContainer{
        height: 72px;
        overflow: hidden;
        transition: all 0.3s;
    }

    .headerNavBarItem{
        font-weight:400;
        line-height:125%;
    }

    .headerNavGridText{
        font-size:16px;
    }

    .circleAnimation{
        top:6px;
        transform: translateX(-10px);
    }

    #new-gn-ham-input{
        left:0;
        height:70px;
        width:70px;
    }
    /*S开关按钮动画*/
    #new-gn-ham-input:checked + .headerNavContainer  .headerNavBarMobile .btn-nav-toggle .nav-ham {
        transform: rotate(45deg);
    }
    #new-gn-ham-input:checked + .headerNavContainer  .headerNavBarMobile .btn-nav-toggle .nav-ham .ham-medium {
        stroke-dashoffset: 0;
        transform: rotate(90deg);
    }
    #new-gn-ham-input:checked + .headerNavContainer  .headerNavBarMobile .btn-nav-toggle .nav-ham .ham-top,
    #new-gn-ham-input:checked + .headerNavContainer  .headerNavBarMobile .btn-nav-toggle .nav-ham .ham-bottom {
        stroke-dashoffset: -26.8;
    }
    /*E开关按钮动画*/

    /*开关联动菜单*/
    #new-gn-ham-input:checked + .headerNavContainer{
        height: 100%;
    }

    /*打开默认菜单*/
    #new-gn-ham-input:checked + .headerNavContainer[key="1"] .headerNavBarItem[key="stabilizer"] + .headerGridBackground,/*√*/
    #new-gn-ham-input:checked + .headerNavContainer[key="stabilizer"] .headerNavBarItem[key="stabilizer"] + .headerGridBackground,
    #new-gn-ham-input:checked + .headerNavContainer[key="camera"] .headerNavBarItem[key="camera"] + .headerGridBackground,
    #new-gn-ham-input:checked + .headerNavContainer[key="intelligence"] .headerNavBarItem[key="intelligence"] + .headerGridBackground,
    #new-gn-ham-input:checked + .headerNavContainer[key="explore"] .headerNavBarItem[key="explore"] + .headerGridBackground
    {
        visibility: visible;
        opacity: 1;
        z-index:9;
        pointer-events:initial;
    }

    /*保持选中项的状态*/
    #new-gn-ham-input:checked + .headerNavContainer[key="1"] .headerNavBarItem[key="stabilizer"],/*√*/
    #new-gn-ham-input:checked + .headerNavContainer[key="stabilizer"] .headerNavBarItem[key="stabilizer"],
    #new-gn-ham-input:checked + .headerNavContainer[key="camera"] .headerNavBarItem[key="camera"],
    #new-gn-ham-input:checked + .headerNavContainer[key="intelligence"] .headerNavBarItem[key="intelligence"],
    #new-gn-ham-input:checked + .headerNavContainer[key="explore"] .headerNavBarItem[key="explore"]
    {
        opacity: 1;
    }

    /*打开默认菜单*/
    #new-gn-ham-input:checked + .headerNavContainer[key="1"] .headerNavBarItem[key="stabilizer"] + .headerGridBackground .headerNavGrid,/*√*/
    #new-gn-ham-input:checked + .headerNavContainer[key="stabilizer"] .headerNavBarItem[key="stabilizer"] + .headerGridBackground .headerNavGrid,
    #new-gn-ham-input:checked + .headerNavContainer[key="camera"] .headerNavBarItem[key="camera"] + .headerGridBackground .headerNavGrid,
    #new-gn-ham-input:checked + .headerNavContainer[key="intelligence"] .headerNavBarItem[key="intelligence"] + .headerGridBackground .headerNavGrid
    {
        transform: translateY(0);
        opacity: 1;
    }


    .headerNavBarMobile{
        display:flex;
    }
    .headerNavBar{
        visiable:hidden;
        flex-direction: column;
        height: auto;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .headerNavBarItem{
        padding:16px;
        /*width: 30%;*/
        width:108px;
        justify-content: flex-start;
        opacity: 0;/*移动端做逐渐显示效果*/
        transform: translateX(-80px);
    }

    #new-gn-ham-input:checked + .headerNavContainer .headerNavBarItem{
        transition:var(--transition-time);
        opacity: 0.8;
        transform: translateX(0);
    }

    /*需要消除transform，否则影响position:fixed*/
    #new-gn-ham-input:checked + .headerNavContainer .headerNavBarItem[key="explore"]{
        transform:unset;
    }

    .headerNavBarItem[key="home"],
    .headerNavBarItem[key="store"]{
        display: none;
    }

    .headerGridBackground{
        /*width: 67%;*/
        /*left: 33%;*/
        width:100%;
        left:140px;
        top: 88px;/*72+16*/
        padding-top: 0;
        border-left: solid 1px rgba(255,255,255,0.1);
        height: 100vh;
        /*overflow-y: scroll;*/
        transition:all 0.3s;
    }

    .headerSeriesContainer{
        grid-template-columns:repeat(1,1fr);
        gap:40px;
    }
    .headerNavGrid{
        width:calc((100% - 32px - 32px) / 3);
        align-self: flex-start;
        gap:16px;
        transform: translate3D(-40px,0,0);
        /*margin-top: 8px;*/
    }

    .headerGridBackground:hover .headerNavGrid{
        transform: translate3D(0,0,0);
        opacity: 1;
    }

    .headerNavImage {
        --thumb-width: 100%;
    }

    .exploreContainer{
        position:fixed;
        width:67%;
        left: 33%;
        top: 80px;/*72+16*/
        border-left: 1px solid rgba(255,255,255,0.1);
        height: 100vh;
        text-align: right;
    }
    .exploreContainer .headerNavBarItemText{
        width:100%;
        text-align:start;
    }

    .headerGridBackground2{
        pointer-events:initial !important;
    }
    .footer-service-contact-ctn{
        z-index:8;
    }
}

@media screen and (max-width: 768px) {
    .headerNavBarItem{
        font-size:12px;
    }

    .headerNavGrid{
        /*width:calc((100% - 16px - 32px) / 2);*/
        width:100%;
    }

    .headerNavGridItem .bigTitle{
        font-size: 14px !important;
    }

    .headerSeriesContainer{
        justify-content:center;
        width:calc((100% - 32px));
    }

    /*下拉系统栏*/
    .headerSeriesContainer .headerNavGrid:last-child{
        /*增加滚动条*/
        margin-bottom:72px;
    }
}

@media screen and (max-width: 430px) {
    .headerNavGrid{
        /*width:calc((100% - 32px));*/
        width:100%;
    }
}