*,
:after,
:before {
    box-sizing: border-box;
    backface-visibility: hidden;
    margin: 0;
    padding: 0;
    font-family: Microsoft JhengHei, Source Han Sans CN, PingFang SC, Source Han Serif SC, Microsoft YaHei, sans-serif
}

ol,
ul,
li {
    vertical-align: middle;
    list-style-type: none
}

img {
    vertical-align: top;
    border: 0
}

input,
select,
textarea,
button {
    vertical-align: middle
}

textarea,
input {
    text-indent: 10px
}

input[type=submit],
input[type=button],
button {
    text-indent: 0;
    text-align: center;
    cursor: pointer
}

input {
    background-color: #0000;
    border: none;
    outline: none
}

label,
button,
a {
    cursor: pointer
}

ins,
em,
b,
i {
    font-style: normal;
    text-decoration: none
}

select:focus,
textarea:focus,
input:focus,
button {
    outline: none
}

.disable-hover {
    pointer-events: none
}

.scroll-animate.animated,
.scroll-animate:not(.father) {
    visibility: hidden
}

.animated {
    animation-duration: 1.2s;
    animation-fill-mode: both
}

.font-fadeIn font {
    display: inline-block
}

input::-webkit-input-placeholder,
input::-moz-input-placeholder,
textarea::-webkit-textarea-placeholder,
textarea::-moz-textarea-placeholder {
    color: #999;
    transition: color .5s
}

input:focus::-webkit-input-placeholder,
input:focus::-moz-input-placeholder,
input:hover::-webkit-input-placeholder,
input:hover::-moz-input-placeholder,
textarea:focus::-webkit-input-placeholder,
textarea:focus::-moz-input-placeholder,
textarea:hover::-webkit-input-placeholder,
textarea:hover::-moz-input-placeholder {
    color: #c2c2c2
}

a {
    color: inherit;
    text-decoration: none
}

a[href] {
    cursor: pointer
}

a:hover {
    cursor: pointer;
    text-decoration: none
}

a:focus {
    background-color: #0000
}

audio,
canvas,
progress,
video {
    vertical-align: baseline;
    display: inline-block
}

body {
    -webkit-tap-highlight-color: #0000
}

html {
    width: 100%;
    scroll-behavior: initial;
    font-size: 5.20833vw;
    overflow-x: hidden
}

a:focus,
input:focus,
p:focus,
div:focus {
    -webkit-tap-highlight-color: #0000
}

img[src=""],
img:not([src]) {
    opacity: 0
}

b {
    font-size: inherit;
    color: inherit;
    font-family: inherit
}

font {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    font-family: inherit;
    font-style: inherit;
    text-transform: inherit
}

.fl {
    float: left
}

.fr {
    float: right
}

.fw-100 {
    font-weight: 100
}

.fw-400 {
    font-weight: 400
}

.fw-600 {
    font-weight: 600
}

.cl:after {
    content: " ";
    height: 0;
    clear: both;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    display: block
}

.hide {
    display: none
}

.show {
    display: block
}

.text_overflow {
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden
}

[data-ahref] {
    cursor: pointer
}

.f-left {
    text-align: left
}

.f-center {
    text-align: center
}

.f-right {
    text-align: right
}

.up-word {
    text-transform: uppercase
}

.v-show {
    visibility: visible
}

.v-hide {
    visibility: hidden
}

.pr {
    position: relative
}

.pa {
    position: absolute
}

.back-cover {
    background-size: cover
}

.back-contain {
    background-size: contain
}

.wid-10 {
    width: 10%
}

.wid-15 {
    width: 15%
}

.wid-20 {
    width: 20%
}

.wid-25 {
    width: 25%
}

.wid-30 {
    width: 30%
}

.wid-35 {
    width: 35%
}

.wid-40 {
    width: 40%
}

.wid-45 {
    width: 45%
}

.wid-50 {
    width: 50%
}

.wid-55 {
    width: 55%
}

.wid-60 {
    width: 60%
}

.wid-65 {
    width: 65%
}

.wid-70 {
    width: 70%
}

.wid-75 {
    width: 75%
}

.wid-80 {
    width: 80%
}

.wid-85 {
    width: 85%
}

.wid-90 {
    width: 90%
}

.wid-95 {
    width: 95%
}

.wid-100 {
    width: 100%
}

.op-0 {
    opacity: 0
}

.op-1 {
    opacity: .1
}

.op-2 {
    opacity: .2
}

.op-3 {
    opacity: .3
}

.op-4 {
    opacity: .4
}

.op-5 {
    opacity: .5
}

.op-6 {
    opacity: .6
}

.op-7 {
    opacity: .7
}

.op-8 {
    opacity: .8
}

.op-9 {
    opacity: .9
}

.op-10 {
    opacity: 1
}

.layout-v-middle,
.shop .r1 .layer-items .other>span.cir:after {
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0
}

.layout-h-middle,
.sport .container .r7 .bg>img {
    margin: auto;
    position: absolute;
    left: 0;
    right: 0
}

.pa-v {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.pa-h {
    position: absolute;
    left: 50%;
    transform: translate(-50%)
}

.pa-mid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.max-wid {
    width: 70%;
    max-width: 62.5vw;
    margin: auto
}

.maxSize {
    width: 80%;
    max-width: 78.125vw;
    margin: auto
}

.full,
.proItem .container .banner .bg .pic,
.sport .container .r7 .bg .group .photo .box .pic>span,
.sport .container .r7 .bg .group .photo,
.sport .container .r5 .rowMain .inner .layer-box .msg,
.sport .container .r5 .rowMain .inner .layer-box .layer-photo .mask,
.sport .container .r4 .bg .pic,
.sport .container .r4 .bg .mask,
.sport .container .r2 .bg .pic,
.sport .container .r2 .bg .mask,
.sport .container .banner .bg canvas,
.sport .container .banner .bg .photo,
.tech .container .banner .bg:after,
.tech .container .banner .bg .mask,
.tech .container .banner .bg .pic,
.shop .r4 .rowMain .inner,
.shop .r4 .rowMain .layer-photo .pic,
.shop .r3 .inner .swiper-wrapper .swiper-slide .layer-photo .mk,
.shop .r2 .box .list .layer-photo:after,
.afterInner .banner .bg .mask,
.container .row .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

@keyframes fadeInLeftSmall {
    0% {
        opacity: 0;
        transform: translate(-10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeInLeftSmall {
    animation-name: fadeInLeftSmall
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate(-20%)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeInLeft {
    animation-name: fadeInLeftSmall
}

@keyframes fadeInRightSmall {
    0% {
        opacity: 0;
        transform: translate(10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeInRightSmall {
    animation-name: fadeInRightSmall
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate(20%)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeInRight {
    animation-name: fadeInRight
}

@keyframes fadeInDownSmall {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeInDownSmall {
    animation-name: fadeInDownSmall
}

@keyframes fadeOutDownSmall {
    0% {
        opacity: 1;
        transform: none
    }

    to {
        opacity: 0;
        transform: translateY(10px)
    }
}

.fadeOutDownSmall {
    animation-name: fadeOutDownSmall
}

@keyframes fadeInUpSmall {
    0% {
        opacity: 0;
        transform: translateY(30px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeInUpSmall {
    animation-name: fadeInUpSmall
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30%)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeInUp {
    animation-name: fadeInUp
}

@keyframes rotateInUpSmall {
    0% {
        opacity: 0;
        transform: translateY(30px)rotate(5deg)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.rotateInUpSmall {
    transform-origin: 0 0;
    animation-name: rotateInUpSmall
}

* {
    margin: 0;
    padding: 0
}

.lh-20 {
    line-height: 2
}

.mt-10 {
    margin-bottom: 10px
}

.mt-20 {
    margin-bottom: 1.04167vw
}

.mt-30 {
    margin-bottom: 1.5625vw
}

.mt-40 {
    margin-bottom: 2.08333vw
}

.mt-50 {
    margin-bottom: 2.60417vw
}

.mc {
    color: #e2350a
}

.wc {
    color: #fff
}

.scrFx {
    will-change: transform, opacity;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: paused;
    animation-delay: calc(var(--go)*-1s);
    animation-timing-function: ease-in-out
}

.letter {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    min-width: .18rem;
    display: inline-block
}

::-webkit-scrollbar {
    width: 4px;
    border-radius: 1.5px
}

::-webkit-scrollbar-button {
    display: none
}

::-webkit-scrollbar-track {
    background-color: #000
}

::-webkit-scrollbar-thumb {
    background-color: #e2350a
}

@font-face {
    font-family: gilroy-bold;
    src: url(./fonts/Gilroy-Bold.ttf)format("truetype")
}

@font-face {
    font-family: gilroy-black;
    src: url(./fonts/Gilroy-Bold.ttf)format("truetype")
}

@font-face {
    font-family: Gilroy-Light;
    src: url(./fonts/Gilroy-Light.ttf)format("truetype")
}

@font-face {
    font-family: Gilroy-Medium;
    src: url(./fonts/Gilroy-Medium.ttf)format("truetype")
}

.en_bold,
.shop .r4 .rowMain .inner h3 .letter:nth-of-type(1) {
    font-family: gilroy-bold
}

.en_black,
.sport .container .r8 .rowMain div .letter:nth-of-type(1),
.sport .container .r6 .rowMain div .letter:nth-of-type(1),
.design .r2 .rowMain h3 .letter:nth-of-type(1) {
    font-family: gilroy-black
}

.en_light {
    font-family: Gilroy-Light
}

.en_mid,
.afterInner .row .til h2 .letter {
    font-family: Gilroy-Medium
}

.pic {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

[data-pic] {
    overflow: hidden
}

.text_linear,
.text_radial {
    color: #e2350a;
    font-size: inherit
}

@supports ((-webkit-background-clip:text)) or ((-webkit-background-clip:text) or (background-clip:text)) {
    .text_linear {
        color: #0000;
        background-image: linear-gradient(90deg, #e8684f 40%, #f8d1c7 100%);
        -webkit-background-clip: text;
        -webkit-background-clip: text;
        background-clip: text
    }

    .text_linear_1 {
        color: #0000;
        background-image: linear-gradient(90deg, #e2350a 40%, #f8d1c7 100%);
        -webkit-background-clip: text;
        -webkit-background-clip: text;
        background-clip: text
    }

    .text_radial {
        color: #0000;
        background: radial-gradient(circle, #e2350a 50%, #f8d1c7 100%);
        -webkit-background-clip: text;
        -webkit-background-clip: text;
        background-clip: text
    }
}

.f-100 {
    font-size: 5.20833vw
}

.f-90 {
    font-size: 4.6875vw
}

.f-60 {
    font-size: 3.125vw
}

.f-56 {
    font-size: 2.91667vw
}

.f-54 {
    font-size: 2.8125vw
}

.f-50 {
    font-size: 2.60417vw
}

.f-48 {
    font-size: 2.5vw
}

.en .f-48,
.f-46 {
    font-size: 2.39583vw
}

.f-44 {
    font-size: 2.29167vw
}

.f-42 {
    font-size: 2.1875vw
}

.f-40 {
    font-size: 2.08333vw
}

.f-38 {
    font-size: 1.97917vw
}

.f-36 {
    font-size: 1.875vw
}

.f-34 {
    font-size: 1.77083vw
}

.f-32 {
    font-size: 1.66667vw
}

.f-30 {
    font-size: 1.5625vw
}

.f-28 {
    font-size: 1.45833vw
}

.f-26 {
    font-size: 1.35417vw
}

.f-24 {
    font-size: 1.25vw
}

.f-22 {
    font-size: 1.14583vw
}

.f-20 {
    font-size: 1.04167vw
}

.en .f-20 {
    font-size: .83333vw
}

.f-18 {
    font-size: .9375vw
}

.f-16 {
    font-size: .83333vw
}

.f-14 {
    font-size: .72917vw
}

.f-12 {
    font-size: .625vw
}

.layer-items {
    grid-template-columns: 50% 50%;
    display: grid;
    position: relative
}

.layer-items .msg {
    grid-template-columns: 100%;
    align-content: center;
    align-items: center;
    padding: 0 10% 0 30%;
    display: grid
}

.layer-items .msg h2 b {
    margin-left: 10px
}

.layer-items .msg.lm {
    padding-left: 0
}

.layer-items .msg p small {
    text-transform: uppercase
}

.layer-photo {
    height: 0;
    position: relative
}

.layer-photo .pic {
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    position: absolute;
    top: -2px;
    left: -2px
}

#app {
    width: 100vw;
    position: relative;
    overflow: hidden
}

.nav {
    width: 100vw;
    z-index: 99;
    color: #fff;
    pointer-events: none;
    transition: all .5s cubic-bezier(.435, .25, .15, .965);
    position: fixed;
    top: 0;
    left: 0
}

.nav:after {
    content: "";
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    background-color: #00000080;
    position: fixed;
    top: 0;
    left: 0
}

.nav.nav_hover:after {
    opacity: 1;
    pointer-events: all
}

.nav:before {
    content: "";
    width: 100%;
    -webkit-backdrop-filter: blur(.83333vw);
    -webkit-backdrop-filter: blur(.83333vw);
    backdrop-filter: blur(.83333vw);
    height: 0;
    background-color: #ffffffbf;
    transition: height .5s cubic-bezier(.435, .25, .15, .965);
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.nav .nav_con_c {
    z-index: 2;
    justify-content: space-between;
    padding: 0 .3rem;
    display: flex;
    position: relative
}

.nav .nav_con_c .logo_case {
    padding: .29rem 0 0;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%)
}

.nav .nav_con_c .logo_case .logo_box {
    pointer-events: auto;
    width: 1.42rem;
    height: .63rem;
    display: block;
    position: relative
}

.nav .nav_con_c .logo_case .logo_box i {
    font-size: 1.42rem;
    line-height: 1;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.nav .nav_con_c .n_share_box {
    margin-top: .1rem;
    margin-left: auto;
    padding-right: .3rem;
    display: flex;
    position: relative
}

.nav .nav_con_c .n_share_box .otherItem a {
    text-align: center;
    color: #fff;
    cursor: pointer;
    border-radius: .5rem;
    justify-content: center;
    align-items: center;
    font-size: .16rem;
    display: flex;
    overflow: hidden
}

.nav .nav_con_c .n_share_box>div {
    align-items: center;
    margin-left: .2rem;
    display: inline-flex
}

.nav .nav_con_c .n_share_box>div a,
.nav .nav_con_c .n_share_box>div>div:not(.btn_nav_m) {
    cursor: pointer;
    color: #fff;
    pointer-events: auto;
    align-items: center;
    transition: color .5s ease-out;
    display: flex;
    position: relative
}

.nav .nav_con_c .n_share_box>div a .iconfont,
.nav .nav_con_c .n_share_box>div>div:not(.btn_nav_m) .iconfont {
    padding: .15rem;
    font-size: .15rem;
    line-height: 1;
    display: block
}

.nav .nav_con_c .n_share_box>div a.otherItem a,
.nav .nav_con_c .n_share_box>div>div:not(.btn_nav_m).otherItem a {
    padding: .15rem
}

.nav .nav_con_c .n_share_box>div a.otherItem>div,
.nav .nav_con_c .n_share_box>div>div:not(.btn_nav_m).otherItem>div {
    width: .8rem;
    height: auto;
    margin-left: -.4rem;
    padding: .1rem .2rem;
    left: 50%
}

.nav .nav_con_c .n_share_box>div a.otherItem>div a,
.nav .nav_con_c .n_share_box>div>div:not(.btn_nav_m).otherItem>div a {
    color: #ffffff80;
    text-align: center;
    padding: 0;
    line-height: 2;
    display: block
}

@media screen and (orientation:landscape) {

    .nav .nav_con_c .n_share_box>div a.otherItem>div a:hover,
    .nav .nav_con_c .n_share_box>div>div:not(.btn_nav_m).otherItem>div a:hover {
        color: #fff
    }
}

.nav .nav_con_c .n_share_box>div a>div,
.nav .nav_con_c .n_share_box>div>div:not(.btn_nav_m)>div {
    width: 2rem;
    height: 2rem;
    opacity: 0;
    pointer-events: none;
    background-color: #fff;
    border-radius: .16rem;
    padding: .3rem;
    transition: transform .5s ease-out, opacity .5s ease-out;
    position: absolute;
    top: 120%;
    right: 0;
    overflow: hidden;
    transform: translateY(20%);
    box-shadow: 0 .4rem .4rem -.1rem #0000001a
}

.nav .nav_con_c .n_share_box>div a>div img,
.nav .nav_con_c .n_share_box>div>div:not(.btn_nav_m)>div img {
    width: 100%;
    height: 100%;
    display: block
}

@media screen and (orientation:landscape) {

    .nav .nav_con_c .n_share_box>div a:hover,
    .nav .nav_con_c .n_share_box>div>div:not(.btn_nav_m):hover {
        color: #ffffff80
    }
}

.nav .nav_con_c .n_share_box>div a:hover>div,
.nav .nav_con_c .n_share_box>div>div:not(.btn_nav_m):hover>div {
    opacity: 1;
    pointer-events: all;
    transform: none
}

.nav .nav_con_c .n_share_box .sha_box {
    justify-content: flex-end;
    align-items: center;
    display: flex
}

.nav .nav_con_c .n_share_box .sha_box .search_box {
    width: .5rem;
    height: .46rem;
    border-radius: .3rem;
    transition: width .5s ease-in-out, border-color .5s ease-in-out;
    overflow: hidden
}

.nav .nav_con_c .n_share_box .sha_box .search_box form {
    height: 100%;
    width: 100%;
    align-items: center;
    display: flex
}

.nav .nav_con_c .n_share_box .sha_box .search_box form input {
    width: calc(100% - .5rem);
    height: 100%;
    text-indent: 2em;
    color: #fff;
    border-bottom: 1px solid #fff;
    font-size: .12rem
}

.nav .nav_con_c .n_share_box .sha_box .search_box form a {
    border: none
}

.nav .nav_con_c .n_share_box .sha_box .search_box form a:before {
    background-color: #ffffff80
}

@media screen and (orientation:landscape) {
    .nav .nav_con_c .n_share_box .sha_box .search_box form a:hover i {
        color: #fff
    }

    .nav .nav_con_c .n_share_box .sha_box .search_box:hover {
        width: 2.5rem
    }
}

.nav .nav_con_c .nav_box {
    padding-top: .15rem;
    position: absolute;
    top: 0;
    left: .3rem
}

.nav .nav_con_c .line_box {
    pointer-events: all;
    display: block
}

.nav .nav_con_c .line_box>li {
    position: relative
}

.nav .nav_con_c .line_box>li>a {
    cursor: pointer;
    color: #ffffff80;
    align-items: center;
    padding: 0 .24rem 0 .35rem;
    font-size: .18rem;
    transition: color .5s ease-in-out;
    display: flex
}

.nav .nav_con_c .line_box>li>a>div,
.nav .nav_con_c .line_box>li>a>span {
    align-items: center;
    line-height: 2.222;
    display: flex;
    position: relative
}

.nav .nav_con_c .line_box>li>a>div i,
.nav .nav_con_c .line_box>li>a>span i {
    width: .3rem;
    opacity: 0;
    transform-origin: 0;
    font-size: .14rem;
    line-height: 1;
    transition: opacity .5s;
    transform: scale(.5)
}

@media screen and (orientation:landscape) {
    .nav .nav_con_c .line_box>li>a:hover {
        color: #fff
    }
}

.nav .nav_con_c .line_box>li>a.on {
    color: #fff
}

.nav .nav_con_c .line_box>li>a.on>div i {
    opacity: 1
}

.nav .nav_con_c .line_box>li>ul {
    width: 100%;
    display: none;
    position: absolute;
    top: .02rem;
    left: calc(100% - 2px)
}

.nav .nav_con_c .line_box>li>ul li {
    display: block
}

.nav .nav_con_c .line_box>li>ul a {
    color: #fff;
    justify-content: center;
    padding: 0;
    font-size: .16rem;
    font-weight: 700;
    line-height: 2.1875;
    transition: color .5s ease-in-out;
    display: block;
    position: relative
}

.nav .nav_con_c .line_box>li>ul a.on {
    color: #ffffff80
}

@media screen and (orientation:landscape) {
    .nav .nav_con_c .line_box>li>ul a:hover {
        color: #ffffff80
    }
}

@media screen and (orientation:portrait) {
    .nav .nav_con_c .line_box>li>ul a {
        justify-content: flex-start
    }

    .nav .nav_con_c .line_box>li>ul a>span {
        padding: .15rem .48rem
    }
}

@media screen and (orientation:landscape) {
    .nav .nav_con_c .line_box .sec_box:hover>ul {
        display: block
    }
}

.nav .nav_con_c .btn_nav_m {
    pointer-events: all;
    display: none !important
}

.nav .nav_con_c .burger3 {
    transform-origin: 100%;
    width: .54rem;
    height: .54rem;
    cursor: pointer;
    transition-duration: 1s;
    display: inline-block;
    position: relative;
    transform: scale(.75)
}

.nav .nav_con_c .burger3 .icon_l {
    height: .06rem;
    width: .54rem;
    background-color: #ffffff80;
    border-radius: 1.04167vw;
    transition-duration: .5s;
    position: absolute;
    top: .2rem
}

.nav .nav_con_c .burger3 .icon_l:before {
    height: .06rem;
    width: .54rem;
    content: "";
    background-color: #ffffff80;
    border-radius: 1.04167vw;
    transition-duration: .5s;
    position: absolute;
    top: -.18rem;
    left: 0
}

.nav .nav_con_c .burger3 .icon_l:after {
    height: .06rem;
    width: .54rem;
    content: "";
    background-color: #ffffff80;
    border-radius: 1.04167vw;
    transition-duration: .5s;
    position: absolute;
    top: .18rem;
    left: 0
}

.nav .nav_con_c .burger3.open .icon_l {
    background: 0 0 !important
}

.nav .nav_con_c .burger3.open .icon_l:before {
    transition: transform .5s;
    transform: rotate(45deg)translate(.1rem, .15rem)
}

.nav .nav_con_c .burger3.open .icon_l:after {
    transition: transform .5s;
    transform: rotate(-405deg)translate(.1rem, -.15rem)
}

.nav.nav_w {
    color: #fff
}

.nav.nav_w:before {
    height: 0
}

.nav.nav_w .nav_con_c .line_box li>a {
    text-shadow: 0 .02rem .06rem #0c0d1259
}

.nav.nav_w .nav_con_c .line_box li>a.on>div:before {
    transform: none
}

.nav.nav_w .nav_con_c .line_box li>div {
    width: 100%;
    padding-bottom: .63rem;
    display: none;
    position: absolute;
    top: 100%;
    left: 0
}

@media screen and (orientation:landscape) {
    .nav.nav_w .nav_con_c .line_box .sec_box:hover>div {
        display: block
    }
}

@media screen and (orientation:portrait) {
    .nav.nav_w {
        color: #fff
    }

    .nav .nav_con_c {
        height: 1.4rem
    }

    .nav .nav_con_c .logo_case {
        z-index: 6;
        width: auto;
        height: 100%;
        align-items: center;
        padding: 0 0 0 .4rem;
        display: flex;
        border-right: none !important
    }

    .nav .nav_con_c .logo_case a {
        height: 1.1rem;
        width: auto !important
    }

    .nav .nav_con_c .logo_case a img {
        height: 100%;
        max-width: none;
        width: auto !important
    }

    .nav .nav_con_c .n_share_box {
        padding-right: .4rem
    }

    .nav .nav_con_c .n_share_box>div a i {
        font-size: .26rem
    }

    .nav .nav_con_c .n_share_box>div .otherItem {
        margin-left: .2rem;
        font-size: .32rem
    }

    .nav .nav_con_c .n_share_box>div .otherItem a {
        width: .6rem;
        height: .6rem
    }

    .nav .nav_con_c .nav_box {
        width: 100%;
        -webkit-backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        height: 100vh;
        background-color: #ffffffe6;
        padding-top: 1.4rem;
        transition: transform .5s ease-in-out;
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        transform: translate(120%)
    }

    .nav .nav_con_c .nav_box .line_box {
        display: none
    }

    .nav .nav_con_c .nav_box .line_box li {
        display: block
    }

    .nav .nav_con_c .nav_box .line_box li>a>div:before {
        bottom: .1rem
    }

    .nav .nav_con_c .nav_box .line_box li a {
        text-shadow: none
    }

    .nav .nav_con_c .nav_box .line_box li a>div {
        font-size: .3rem;
        line-height: 2
    }

    .nav .nav_con_c .nav_box .line_box li>div {
        width: 100%;
        padding-top: 0;
        padding-bottom: .3rem;
        position: relative;
        top: auto;
        left: auto
    }

    .nav .nav_con_c .nav_box .line_box li>div a>span {
        font-size: .28rem;
        line-height: 1.5
    }

    .nav .nav_con_c .nav_box .line_box li:hover>div {
        display: block
    }

    .nav .nav_con_c .nav_box.on {
        transform: none
    }

    .nav .nav_con_c .nav_box.on .line_box {
        display: block
    }

    .nav .nav_con_c .btn_nav_m {
        justify-content: flex-end;
        align-items: center;
        margin-left: .1rem;
        display: flex !important
    }

    .nav .nav_con_c .btn_icon_sty {
        width: .6rem;
        height: .6rem
    }

    .nav .nav_con_c .btn_icon_sty span,
    .nav .nav_con_c .btn_icon_sty i {
        font-size: .24rem !important
    }

    .nav .nav_con_c .n_share_box .sha_box .search_box {
        width: .6rem;
        height: .6rem
    }
}

.container,
.container .row {
    position: relative
}

.container .row .rowMain {
    z-index: 10;
    position: relative
}

.container .footer_case {
    width: 100%;
    z-index: 200
}

.container .footer_case .go_top {
    cursor: pointer
}

.container .footer_case .go_top>i {
    display: block
}

.container .footer_case .copyRight_box {
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex
}

.container .footer_case .copyRight_box .copyRight {
    margin-top: 10px
}

.container .footer_case:after {
    content: "";
    width: 93.75vw;
    height: 1px;
    background-color: #ffffff1a;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.afterInner .banner {
    height: 100vh;
    z-index: 10;
    grid-template-columns: 100%;
    grid-auto-flow: column;
    align-items: center;
    display: grid;
    position: relative
}

.afterInner .banner .bg .mask {
    background-color: #0003
}

.afterInner .banner h1 {
    text-align: center;
    line-height: 1.1
}

.afterInner .banner h1 .letter {
    text-transform: uppercase;
    min-width: .2em;
    margin: 0 1px
}

.afterInner .banner small {
    text-align: center;
    display: block
}

.afterInner .row .til small {
    text-transform: capitalize;
    display: inline-block
}

.afterInner .row .til h2 {
    text-transform: uppercase;
    line-height: 1
}

.afterInner .row .til h2 .letter {
    min-width: .2em
}

.design .mask {
    height: calc(100% - 51.92vw);
    width: 100%;
    z-index: 0;
    background-position: top;
    background-repeat: repeat-y;
    background-size: 100%;
    position: absolute;
    bottom: 0;
    left: 0
}

.design .banner {
    height: 51.92vw
}

.design .r1 {
    z-index: 10
}

.design .r1 .rowMain {
    padding-bottom: 1px
}

.design .r1 .rowMain .layer-items {
    margin-bottom: 6.77083vw
}

.design .r1 .rowMain .layer-items span {
    opacity: .1;
    text-transform: capitalize;
    font-size: 9.375vw;
    line-height: 1;
    position: absolute;
    top: 4%;
    left: 54%
}

.design .r1 .rowMain .layer-items span.lp {
    left: 0
}

.design .r2 {
    height: 100vh;
    z-index: 10;
    grid-template-columns: 100%;
    grid-auto-flow: column;
    align-items: center;
    padding-bottom: 12%;
    display: grid;
    position: relative
}

.design .r2 .bg {
    opacity: .5;
    background-position: 50%;
    background-size: cover;
    -webkit-mask-image: linear-gradient(#0000 20%, #0009 45% 60%, #0000 82%);
    mask-image: linear-gradient(#0000 20%, #0009 45% 60%, #0000 82%)
}

.design .r2 .rowMain h3 {
    text-align: center;
    font-weight: 400
}

.shop {
    background-color: #000
}

.shop .container>.mask {
    height: calc(100% - 100vh);
    width: 100%;
    z-index: 0;
    background-color: #000;
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    bottom: 0;
    left: 0
}

.shop .r1 {
    padding: 8.33333vw 0
}

.shop .r1 .layer-items {
    grid-template-columns: 50% 38%;
    justify-content: space-between
}

.shop .r1 .layer-items .msg {
    padding: 0;
    position: relative
}

.shop .r1 .layer-items h2 {
    margin-bottom: 4.16667vw;
    font-weight: 400
}

.shop .r1 .layer-items p {
    letter-spacing: 1px;
    font-weight: 100
}

.shop .r1 .layer-items p b {
    margin: 0 .78125vw
}

.shop .r1 .layer-items .other {
    position: absolute;
    bottom: 2vw;
    left: 50%
}

.shop .r1 .layer-items .other>span.cir {
    width: 1.25vw;
    height: 1.25vw;
    border: 1px solid #ffffff80;
    border-radius: 50%;
    display: block;
    position: relative
}

.shop .r1 .layer-items .other>span.cir:after {
    content: "";
    width: 4.16667vw;
    height: 1px;
    background-color: #ffffff4d;
    display: block;
    top: 1px;
    right: 50%
}

.shop .r2 {
    padding: 4.6875vw 0
}

.shop .r2 .note {
    grid-template-columns: auto auto;
    justify-content: space-between;
    display: grid
}

.shop .r2 .note p {
    color: #fff6;
    padding: 1.04167vw 0;
    line-height: 1
}

.shop .r2 .box {
    grid-template-columns: 28% 28% 28%;
    justify-content: space-between;
    display: grid
}

.shop .r2 .box .list {
    position: relative
}

.shop .r2 .box .list .layer-photo {
    width: 100%;
    background-color: #000;
    position: relative
}

.shop .r2 .box .list .layer-photo .pic {
    -webkit-mask-image: linear-gradient(#000 80%, #0000 100%);
    mask-image: linear-gradient(#000 80%, #0000 100%)
}

.shop .r2 .box .list .layer-photo:after {
    content: "";
    z-index: 12;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    background: linear-gradient(#0000 60%, #000 90%)
}

.shop .r2 .box .list .msg {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 1vw;
    left: 0
}

.shop .r2 .box .list .msg h4 {
    line-height: 1.6
}

.shop .r2 .group {
    text-align: center;
    padding: 7.8125vw 0
}

.shop .r2 .group img {
    height: 2.8125vw;
    margin: 0 auto 1.04167vw;
    display: block
}

.shop .r2 .group p {
    text-align: center;
    font-weight: 400
}

.shop .r3 {
    padding: 3.125vw 0
}

.shop .r3 .til {
    text-align: center;
    margin-bottom: 5.98958vw
}

.shop .r3 .til h2 {
    line-height: 1.7
}

.shop .r3 .inner {
    height: 44vw;
    width: 100%;
    position: relative
}

.shop .r3 .inner .swiper-wrapper {
    grid-auto-flow: column;
    display: grid
}

.shop .r3 .inner .swiper-wrapper .swiper-slide {
    width: 70vw
}

.shop .r3 .inner .swiper-wrapper .swiper-slide .layer-photo {
    width: 100%;
    padding-bottom: 57.29%;
    overflow: hidden;
    box-shadow: -1px 8px 9.79167vw #1b0000a6
}

.shop .r3 .inner .swiper-wrapper .swiper-slide .layer-photo .mk {
    z-index: 20;
    background-color: #000000bf;
    transition: opacity .5s cubic-bezier(.25, .74, .22, .99)
}

.shop .r3 .inner .swiper-wrapper .swiper-slide .layer-photo .pic .line {
    width: 100%;
    height: 5px;
    opacity: 0;
    transform-origin: 0;
    background: #e2350a;
    transition: opacity .3s cubic-bezier(.25, .74, .22, .99), transform 5.2s cubic-bezier(.25, .74, .22, .99);
    position: absolute;
    bottom: 0;
    left: 0;
    transform: scaleX(.01)
}

.shop .r3 .inner .swiper-wrapper .swiper-slide.swiper-slide-active .layer-photo .mk {
    opacity: 0
}

.shop .r3 .inner .swiper-wrapper .swiper-slide.swiper-slide-active .layer-photo .pic .line {
    opacity: 1;
    transform: scaleX(1)
}

.shop .r3 .inner .swiper-pagination {
    width: 100%;
    grid-auto-flow: column;
    justify-content: center;
    padding: 0 0 4.42708vw;
    display: grid
}

.shop .r3 .inner .swiper-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #ffffff80;
    border-radius: 50%;
    margin: 0 .78125vw
}

.shop .r3 .inner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #e2350a
}

.shop .r4 {
    z-index: 12;
    position: relative
}

.shop .r4 .rowMain {
    position: relative
}

.shop .r4 .rowMain .layer-photo {
    position: relative;
    -webkit-mask-image: radial-gradient(#000 0%, #0000 60%);
    mask-image: radial-gradient(#000 0%, #0000 60%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

.shop .r4 .rowMain .inner {
    grid-auto-flow: row;
    align-content: center;
    justify-items: center;
    padding-bottom: 8%;
    display: grid
}

.shop .r4 .rowMain .inner h3 {
    text-align: center;
    font-weight: 400
}

.shop .r4 .rowMain .inner img {
    width: 1.875vw;
    margin-top: 1.82292vw
}

.shop .r5 {
    width: 100%;
    height: 51.5625vw;
    position: relative
}

.shop .r5 .bg {
    height: 0;
    background-position: bottom;
    background-size: 100%;
    padding-bottom: 66.5%;
    top: auto;
    bottom: 0;
    left: 0
}

.custom .container>.mask {
    height: calc(100% - 40vw);
    width: 100%;
    z-index: 0;
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 0;
    left: 0
}

.custom .container .banner {
    height: 70.9375vw;
    align-items: start
}

.custom .container .banner .rowMain {
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    place-items: center;
    display: flex
}

.custom .container .r1 .rowMain .til small {
    text-transform: capitalize
}

.custom .container .r1 .rowMain .til h2 {
    margin-top: 1.5625vw;
    line-height: 1
}

.custom .container .r1 .rowMain .inner {
    padding-top: 7.8125vw
}

.custom .container .r1 .rowMain .inner>ul {
    justify-content: space-between;
    align-items: flex-start;
    display: flex
}

.custom .container .r1 .rowMain .inner>ul>li {
    text-align: center
}

.custom .container .r1 .rowMain .inner>ul>li>i {
    color: #fff;
    margin: 0 auto;
    font-size: 2.60417vw;
    display: block
}

.custom .container .r1 .rowMain .inner>ul>li span {
    text-align: center;
    margin-top: 1.04167vw;
    display: block
}

.custom .container .r1 .rowMain .inner>ul>li.line {
    width: 1px;
    height: .625vw;
    background: #ffffff80
}

.custom .container .r1 .rowMain .inner>ul>li:last-of-type {
    display: none
}

.custom .container .r1 .rowMain .group {
    padding: 13.0208vw 0
}

.custom .container .r1 .rowMain .group .layer-items .layer-photo {
    padding-bottom: 58vw
}

.custom .container .r1 .rowMain .group .layer-items .layer-photo .pic {
    opacity: 0;
    transition: all 1.2s cubic-bezier(.25, .74, .22, .99);
    transform: scale(1.05)
}

.custom .container .r1 .rowMain .group .layer-items .layer-photo .pic.on {
    opacity: 1;
    z-index: 10;
    transform: scale(1)
}

.custom .container .r1 .rowMain .group .layer-items .col {
    grid-auto-flow: row;
    align-content: center;
    align-items: center;
    padding-left: 7.2vw;
    display: grid
}

.custom .container .r1 .rowMain .group .layer-items .col .list {
    border-top: 1px solid #fff3;
    justify-content: space-between;
    align-items: center;
    padding: 4.16667vw 0 3.64583vw;
    display: flex;
    position: relative
}

.custom .container .r1 .rowMain .group .layer-items .col .list>em {
    position: absolute;
    top: 2.1875vw;
    left: 0
}

.custom .container .r1 .rowMain .group .layer-items .col .list h4 {
    letter-spacing: 1px;
    line-height: 1.6
}

.custom .container .r1 .rowMain .group .layer-items .col .list .layer-a {
    width: 8.85417vw;
    height: 3.75vw;
    border: 3px solid #e2350a;
    justify-content: center;
    align-items: center;
    transition: all .5s cubic-bezier(.25, .74, .22, .99);
    display: flex
}

.custom .container .r1 .rowMain .group .layer-items .col .list .layer-a>span {
    font-weight: 600;
    line-height: 1
}

.custom .container .r1 .rowMain .group .layer-items .col .list .layer-a>em {
    width: 1px;
    height: .78125vw;
    background: #fff;
    margin: 0 .9375vw;
    display: block
}

.custom .container .r1 .rowMain .group .layer-items .col .list .layer-a:hover {
    background-color: #e2350a;
    transform: translate(-4px, -4px);
    box-shadow: 1.04167vw 1.04167vw 2.08333vw #00000080
}

.tech {
    background-color: #0c0c0c
}

.tech .container .banner {
    height: 100vh;
    align-items: start
}

.tech .container .banner .bg {
    height: 165.417vw
}

.tech .container .banner .bg .pic {
    -webkit-mask-image: linear-gradient(#000 80%, #0000 100%);
    mask-image: linear-gradient(#000 80%, #0000 100%)
}

.tech .container .banner .bg .mask {
    z-index: 2;
    height: 52.0313vw
}

.tech .container .banner .bg:after {
    content: "";
    z-index: 10;
    background-color: #0000004d
}

.tech .container .banner .rowMain {
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    place-items: center;
    display: flex
}

.tech .container .r1 .inner {
    height: 34.7917vw;
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100%
}

.tech .container .r1 .inner .layer-items .msg {
    padding: 6.25vw 0 0 6.04167vw
}

.tech .container .r1 .inner .layer-items .msg p {
    margin-top: 3.64583vw;
    line-height: 2
}

.tech .container .r2 {
    padding: 5.20833vw 0 13.0208vw
}

.tech .container .r2 .mk {
    width: 100%;
    position: absolute;
    top: 0
}

.tech .container .r2 .til {
    margin-bottom: 3.125vw
}

.tech .container .r2 .layer-items {
    grid-template-columns: 62% 38%
}

.tech .container .r2 .layer-items .layer-photo .line {
    width: 100%;
    height: 5px;
    background-color: #e2350a;
    position: absolute;
    bottom: 0;
    left: 0
}

.tech .container .r2 .layer-items .msg {
    padding-left: 5.20833vw;
    padding-right: 0
}

.tech .container .r2 .layer-items .msg h3 {
    margin-bottom: 2.08333vw
}

.tech .container .r2 .layer-items .msg>p {
    color: #fff9;
    font-weight: 100;
    line-height: 2
}

.tech .container .r2 .layer-items .msg>ul {
    margin-top: 4.16667vw
}

.tech .container .r2 .layer-items .msg>ul li {
    justify-content: flex-start;
    align-items: center;
    margin: .78125vw 0;
    display: flex
}

.tech .container .r2 .layer-items .msg>ul li div {
    justify-content: flex-start;
    align-items: center;
    margin-left: 1.5625vw;
    display: flex
}

.tech .container .r2 .layer-items .msg>ul li div span {
    margin-left: 1.04167vw;
    font-weight: 600
}

.tech .container .r2 ul.items {
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 4.6875vw;
    display: flex
}

.tech .container .r2 ul.items>li {
    text-align: center
}

.tech .container .r2 ul.items>li>i {
    color: #fff;
    margin: 0 auto;
    font-size: 2.60417vw;
    display: block
}

.tech .container .r2 ul.items>li span {
    text-align: center;
    margin-top: 1.04167vw;
    display: block
}

.tech .container .r2 ul.items .line {
    width: 1px;
    height: 5.26042vw;
    background: #ffffff1a
}

.tech .container .r3 .til {
    z-index: 20;
    position: relative
}

.tech .container .r3 .til p {
    margin-top: 3.64583vw;
    line-height: 2
}

.tech .container .r3 .til p b {
    font-size: inherit
}

.tech .container .r3 .inner {
    position: relative
}

.tech .container .r3 .inner>img {
    height: 61.6667vw;
    width: 100%;
    object-fit: cover;
    position: relative
}

.tech .container .r3 .inner .btn {
    z-index: 10;
    background-color: #ffffff1a;
    border: 1px solid #e5461f;
    border-radius: 10vw;
    position: absolute;
    top: 50%;
    left: 50%
}

.tech .container .r3 .inner .btn .mk {
    width: calc(100% - .12rem);
    height: calc(100% - .12rem);
    background-color: #e5461f;
    border-radius: 10vw;
    position: absolute;
    top: .06rem;
    left: .06rem
}

.tech .container .r3 .inner .btn>div {
    z-index: 10;
    justify-content: center;
    align-items: center;
    padding: 1.25vw 1.875vw;
    display: flex;
    position: relative
}

.tech .container .r3 .inner .btn>div em {
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 10px 8px #00000061;
    margin-right: 1.30208vw;
    display: inline-block
}

.tech .container .r3 .inner .btn>div small {
    font-weight: 600;
    line-height: 1.375
}

.tech .container .r3 .inner .btn:nth-of-type(1) {
    top: 32%;
    left: 50%
}

.tech .container .r3 .inner .btn:nth-of-type(2) {
    top: 25%;
    left: 74%
}

.tech .container .r3 .inner .btn:nth-of-type(3) {
    top: 40%;
    left: 72%
}

.tech .container .r3 .inner .btn:nth-of-type(4) {
    top: 64%;
    left: 60%
}

.sport {
    background-color: #000
}

.sport .container .banner .bg .photo {
    z-index: 1;
    background-color: #000;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

.sport .container .banner .bg .photo.next {
    animation-name: scaleIn;
    animation-duration: 1.25s;
    animation-timing-function: cubic-bezier(.38, 0, 0, 1);
    animation-fill-mode: both
}

.sport .container .banner .bg canvas {
    z-index: 2
}

.sport .container .banner .bg>ol {
    height: 5.20833vw;
    z-index: 20;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0
}

.sport .container .banner .bg>ol li {
    width: 10px;
    height: 10px;
    cursor: pointer;
    background: #ffffff80;
    border-radius: 50%;
    margin: 0 .83333vw;
    transition: background-color .5s cubic-bezier(.25, .74, .22, .99)
}

.sport .container .banner .bg>ol li.on {
    pointer-events: none;
    background-color: #e2350a
}

.sport .container .banner .rowMain {
    pointer-events: none
}

.sport .container .banner .rowMain .letter {
    text-shadow: 0 2px 1.66667vw #0000004f
}

.sport .container .r1 {
    height: 100vh
}

.sport .container .r1 .bg {
    height: 75.7813vw;
    -webkit-mask-image: linear-gradient(#000 80%, #0000 100%);
    mask-image: linear-gradient(#000 80%, #0000 100%)
}

.sport .container .r1 .rowMain {
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex
}

.sport .container .r1 .rowMain h2 {
    text-align: center;
    color: #e2350a33;
    text-transform: uppercase;
    filter: blur(5px);
    margin-bottom: 3.125vw;
    font-size: 7.29167vw
}

.sport .container .r1 .rowMain>div {
    margin: 1.5625vw 0
}

.sport .container .r1 .rowMain p {
    text-align: center;
    font-weight: 600;
    line-height: 2
}

.sport .container .r1 .rowMain p small {
    font-size: inherit
}

.sport .container .r1 .rowMain p b {
    line-height: 1;
    display: inline-block;
    background: linear-gradient(to right, #FF832E, #FF0012);
    display: inline-block;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.sport .container .r2 {
    height: 100vh
}

.sport .container .r2 .bg {
    background-color: #121212
}

.sport .container .r2 .bg .mask {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-mask-image: linear-gradient(#000 70%, #0000 95%);
    mask-image: linear-gradient(#000 70%, #0000 95%)
}

.sport .container .r2 .bg .pic {
    z-index: 5;
    clip-path: circle(9.375vw at 27vw 14vw);
    animation-name: scrP1
}

.sport .container .r2 .rowMain {
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative
}

.sport .container .r2 .rowMain .inner {
    text-align: center
}

.sport .container .r2 .rowMain .inner>i {
    margin-bottom: 2.60417vw;
    font-size: 4.16667vw
}

.sport .container .r2 .rowMain p {
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    bottom: 0;
    left: 0
}

.sport .container .r3 {
    background-color: #121212
}

.sport .container .r3 .rowMain .inner {
    padding: 9.375vw 0 11.9792vw
}

.sport .container .r3 .rowMain .inner .layer-items {
    grid-template-columns: 45.2% 54.8%
}

.sport .container .r3 .rowMain .inner .layer-items .rect {
    width: 7.8125vw;
    height: 7.8125vw;
    z-index: 1;
    border: 5px solid #e2350a;
    position: absolute;
    bottom: -2.60417vw;
    left: -3.64583vw
}

.sport .container .r3 .rowMain .inner .layer-items .layer-photo {
    z-index: 10
}

.sport .container .r3 .rowMain .inner .layer-items .layer-photo .pic {
    z-index: 5
}

.sport .container .r3 .rowMain .inner .layer-items .group {
    padding-top: 8.33333vw;
    padding-left: 9.73958vw;
    position: relative
}

.sport .container .r3 .rowMain .inner .layer-items .group p {
    margin-bottom: 3.125vw;
    line-height: 2
}

.sport .container .r3 .rowMain .inner .layer-items .group>img {
    position: absolute;
    bottom: 0;
    right: 0
}

.sport .container .r4 {
    height: 100vh
}

.sport .container .r4 .bg {
    background-color: #000
}

.sport .container .r4 .bg .mask {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-mask-image: linear-gradient(#000 70%, #0000 95%);
    mask-image: linear-gradient(#000 70%, #0000 95%)
}

.sport .container .r4 .bg .pic {
    z-index: 5;
    clip-path: circle(9.375vw at 27vw 14vw);
    animation-name: scrP2
}

.sport .container .r4 .rowMain {
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative
}

.sport .container .r4 .rowMain .inner {
    text-align: center;
    padding-bottom: 6.25vw
}

.sport .container .r4 .rowMain .inner>img {
    width: 6.66667vw;
    margin-bottom: 1.04167vw
}

.sport .container .r4 .rowMain p {
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    bottom: 0;
    left: 0
}

.sport .container .r5 {
    background-color: #000;
    padding-top: 12.5vw
}

.sport .container .r5 .rowMain .inner {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    display: flex
}

.sport .container .r5 .rowMain .inner .layer-box {
    width: 45.8%;
    margin-bottom: 3.125vw;
    position: relative
}

.sport .container .r5 .rowMain .inner .layer-box h4 {
    position: absolute;
    bottom: calc(100% + 1.04167vw)
}

.sport .container .r5 .rowMain .inner .layer-box .layer-photo .mask {
    background-color: #00000080
}

.sport .container .r5 .rowMain .inner .layer-box .msg {
    justify-content: center;
    align-items: center;
    display: flex
}

.sport .container .r5 .rowMain .inner .layer-box .msg p {
    text-align: center;
    letter-spacing: 2px
}

.sport .container .r6 {
    height: 62.5vw;
    z-index: 10;
    background-color: #000;
    grid-template-columns: 100%;
    grid-auto-flow: column;
    align-items: center;
    padding-bottom: 12%;
    display: grid;
    position: relative
}

.sport .container .r6 .bg {
    background-position: 50%;
    background-size: cover;
    -webkit-mask-image: linear-gradient(#0000 20%, #000c 45% 70%, #0000 90%);
    mask-image: linear-gradient(#0000 20%, #000c 45% 70%, #0000 90%)
}

.sport .container .r6 .rowMain>p {
    text-align: center;
    margin-top: 10.4167vw;
    margin-bottom: 5.98958vw;
    line-height: 2
}

.sport .container .r6 .rowMain div {
    text-align: center;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    display: flex
}

.sport .container .r6 .rowMain div p {
    background: radial-gradient(6.4em at 50% -60%, #e2350a 50%, #fff 100%);
    -webkit-background-clip: text;
    -webkit-background-clip: text;
    background-clip: text;
    line-height: 1.3
}

.sport .container .r7 {
    z-index: 10
}

.sport .container .r7 .bg {
    background-color: #0e0e0e;
    background-position: 100%;
    background-repeat: no-repeat
}

.sport .container .r7 .bg .group {
    width: calc(100% - 6.25vw);
    height: 20.8333vw;
    z-index: 10;
    position: absolute;
    left: 3.125vw;
    overflow: hidden
}

.sport .container .r7 .bg .group .photo {
    opacity: 0;
    transition: transform .8s cubic-bezier(.25, .74, .22, .99), opacity .8s cubic-bezier(.25, .74, .22, .99);
    transform: scale(1.1)
}

.sport .container .r7 .bg .group .photo .box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden
}

.sport .container .r7 .bg .group .photo .box .pic {
    height: 87vh;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.sport .container .r7 .bg .group .photo .box .pic>span {
    background-color: #00000080
}

.sport .container .r7 .bg .group .photo.on {
    opacity: 1;
    z-index: 10;
    transform: none
}

.sport .container .r7 .bg>img {
    width: 100%;
    top: 0;
    left: 0;
    -webkit-mask-image: linear-gradient(#000 80%, #0000 100%);
    mask-image: linear-gradient(#000 80%, #0000 100%)
}

.sport .container .r7 .inner .clear {
    height: 87vh;
    width: 100%;
    position: relative
}

.sport .container .r7 .inner .set {
    z-index: 10;
    width: 11.25vw;
    height: 4.0625vw;
    background-color: #1b1b1b;
    justify-content: space-between;
    align-items: center;
    margin: -2.03125vw 0 auto auto;
    display: flex;
    position: relative
}

.sport .container .r7 .inner .set>a {
    width: 50%;
    height: 100%;
    z-index: 4;
    justify-content: center;
    align-items: center;
    transition: background-color .5s cubic-bezier(.25, .74, .22, .99);
    display: flex;
    position: relative
}

.sport .container .r7 .inner .set>a:hover {
    background-color: #e2350a
}

.sport .container .r7 .inner .set .mk {
    width: 50%;
    height: 100%;
    background-color: #e2350a;
    transition: transform .5s cubic-bezier(.25, .74, .22, .99);
    position: absolute;
    top: 0;
    left: 0
}

.sport .container .r7 .inner .set.on .mk {
    transform: translate(100%)
}

.sport .container .r7 .inner .msg h3 {
    text-align: center;
    margin-bottom: 1.5625vw
}

.sport .container .r7 .inner .msg p {
    text-align: center;
    margin-bottom: 5.20833vw
}

.sport .container .r7 .inner .msg small {
    text-align: left;
    color: #fff6;
    text-transform: uppercase;
    display: block
}

.sport .container .r7 .group {
    padding-top: 12.5vw;
    padding-bottom: 7.8125vw
}

.sport .container .r7 .group h3 {
    opacity: .8;
    margin-bottom: 6.25vw
}

.sport .container .r7 .group .layer-items {
    grid-template-columns: 37% 63%;
    margin-bottom: 7.8125vw
}

.sport .container .r7 .group .layer-items .msg {
    padding-left: 0
}

.sport .container .r7 .group .layer-items .msg>i {
    font-size: 2.39583vw
}

.sport .container .r7 .group .layer-items .msg h4 {
    margin-top: 4.16667vw;
    margin-bottom: 2.08333vw
}

.sport .container .r8 {
    height: 48.8021vw;
    z-index: 10;
    background-color: #0e0e0e;
    grid-template-columns: 100%;
    grid-auto-flow: column;
    align-items: center;
    padding-bottom: 12%;
    display: grid;
    position: relative
}

.sport .container .r8 .bg {
    background-position: 50%;
    background-size: cover;
    -webkit-mask-image: linear-gradient(#0000 0%, #000c 35% 65%, #0000 82%);
    mask-image: linear-gradient(#0000 0%, #000c 35% 65%, #0000 82%)
}

.sport .container .r8 .rowMain>p {
    text-align: center;
    margin: 3.64583vw 0 0;
    line-height: 2
}

.sport .container .r8 .rowMain div {
    text-align: center;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    display: flex
}

.sport .container .r8 .rowMain div p {
    background: radial-gradient(circle at 50% -100%, #e2350a 50%, #f8d1c7 100%);
    -webkit-background-clip: text;
    -webkit-background-clip: text;
    background-clip: text
}

.proItem .container .banner .bg {
    background-color: #000
}

.proItem .container .banner ul.items {
    justify-content: space-between;
    align-items: center;
    padding-top: 4.6875vw;
    display: flex
}

.proItem .container .banner ul.items>li {
    text-align: center
}

.proItem .container .banner ul.items>li>i {
    color: #fff;
    margin: 0 auto;
    font-size: 2.60417vw;
    display: block
}

.proItem .container .banner ul.items>li span {
    text-align: center;
    margin-top: 1.04167vw;
    display: block
}

.proItem .container .banner ul.items .line {
    width: 1px;
    height: .625vw;
    background: #ffffff80
}

.proItem .container .banner .rowMain {
    height: 100%;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    padding-bottom: 10%;
    display: flex
}

.proItem .container .banner .rowMain h1 {
    width: 100%;
    display: block
}

.proItem .container .banner .rowMain>div {
    width: 100%;
    position: absolute;
    bottom: 5.20833vw;
    left: 0
}

.proItem .container .banner .rowMain>div>p {
    text-align: center;
    color: #ffffff8f;
    margin-top: 2.60417vw;
    padding-bottom: 10px;
    line-height: 2
}

@media screen and (orientation:landscape) {
    .app {
        display: none !important
    }
}

@media screen and (orientation:portrait) {
    .pc {
        display: none !important
    }

    .f-100 {
        font-size: 10vw
    }

    .f-90 {
        font-size: 9vw
    }

    .f-54,
    .f-50 {
        font-size: 6.5vw
    }

    .f-48 {
        font-size: 6.4vw
    }

    .f-34 {
        font-size: 5.5vw
    }

    .f-30 {
        font-size: 5.4vw
    }

    .f-28 {
        font-size: 5.2vw
    }

    .f-24 {
        font-size: 18px
    }

    .f-22 {
        font-size: 16px
    }

    .f-20 {
        font-size: 15px
    }

    .en .f-20,
    .f-16 {
        font-size: 13px
    }

    .f-14,
    .f-12 {
        font-size: 12px
    }

    .maxSize {
        width: 88%;
        max-width: 100vw
    }

    .afterInner .banner {
        height: 120vw
    }

    .afterInner .banner h1 {
        margin-bottom: 2vw
    }

    .afterInner .banner h1 .letter {
        margin: 0
    }

    .layer-items {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        display: flex
    }

    .layer-items .layer-photo {
        width: 100%;
        margin: 6vw 0
    }

    .shop .r1 {
        padding: 12vw 0
    }

    .shop .r1 .layer-items .other {
        display: none
    }

    .shop .r1 .layer-items p {
        letter-spacing: 0
    }

    .shop .r2 .box {
        grid-template-columns: 100%
    }

    .shop .r2 .box .list {
        margin: 4vw 0
    }

    .shop .r2 .box .list .msg {
        bottom: 5vw
    }

    .shop .r2 .group img {
        height: 8vw;
        margin-bottom: 4vw
    }

    .shop .r3 {
        padding: 6vw 0 10vw
    }

    .shop .r3 .inner .swiper-pagination {
        padding-top: 4vw
    }

    .shop .r3 .inner .swiper-pagination .swiper-pagination-bullet {
        width: 7px;
        height: 7px;
        margin: 0 2vw
    }

    .shop .r4 .rowMain .layer-photo {
        -webkit-mask-image: radial-gradient(#000 30%, #0000 70%);
        mask-image: radial-gradient(#000 30%, #0000 70%)
    }

    .shop .r4 .rowMain .inner img {
        width: 4.8vw
    }

    .shop .r1 .layer-items h2 {
        font-size: 5.4vw
    }

    .shop .r1 .layer-items p {
        font-size: 13px
    }

    .sport .container .banner .bg>ol {
        height: 8vw
    }

    .sport .container .banner .bg>ol li {
        width: 7px;
        height: 7px;
        margin: 0 2vw
    }

    .sport .container .r1 {
        height: auto;
        padding: 8vw 0 10vw
    }

    .sport .container .r1 .rowMain h2 {
        filter: blur(2px);
        font-size: 9vw
    }

    .sport .container .r2 {
        height: 100vw
    }

    .sport .container .r2 .rowMain .inner {
        padding-bottom: 6vw
    }

    .sport .container .r2 .rowMain .inner>i {
        margin-bottom: 0;
        font-size: 12vw;
        display: block
    }

    .sport .container .r2 .bg .pic {
        animation-name: scrP1_app
    }

    .sport .container .r2 .rowMain>p {
        transform: scale(.8)
    }

    .sport .container .r2 .rowMain .inner>h2 {
        font-size: 5vw
    }

    .sport .container .r3 .rowMain .inner .layer-items .group>img {
        width: 38vw;
        bottom: 25vw
    }

    .sport .container .r3 .rowMain .inner .layer-items .rect {
        width: 14vw;
        height: 14vw;
        border-width: 3px;
        top: 100vw;
        bottom: auto;
        left: -4vw
    }

    .sport .container .r4 {
        height: 100vw
    }

    .sport .container .r4 .rowMain .inner>img {
        width: 15vw;
        margin-bottom: 4vw
    }

    .sport .container .r4 .rowMain .inner>h2 {
        font-size: 5vw
    }

    .sport .container .r4 .bg .pic {
        animation-name: scrP2_app
    }

    .sport .container .r4 .rowMain>p {
        transform: scale(.8)
    }

    .sport .container .r5 .rowMain .inner .layer-box {
        width: 100%;
        margin-bottom: 15vw
    }

    .sport .container .r5 .rowMain .inner .layer-box .msg p {
        font-size: 14px
    }

    .sport .container .r6 {
        height: 120vw
    }

    .sport .container .r7 .inner .set {
        width: 25vw;
        height: 12vw;
        margin-top: -6vw
    }

    .sport .container .r7 .inner .msg {
        margin-top: 6vw
    }

    .sport .container .r7 .group .layer-items .msg>i {
        font-size: 6vw
    }

    .sport .container .r7 .group h3 {
        margin-bottom: 10vw
    }

    .sport .container .r8 {
        height: 80vw
    }

    .tech .container .banner {
        height: 100vw
    }

    .tech .container .banner .bg {
        height: 280vw
    }

    .tech .container .banner .bg .mask,
    .tech .container .banner .rowMain {
        height: 100vw
    }

    .tech .container .r1 .inner {
        height: 78vw
    }

    .tech .container .r1 .inner .layer-items .msg {
        padding: 6.25vw 4vw 0
    }

    .tech .container .r1 .inner .layer-items .msg p {
        margin-top: 6vw
    }

    .tech .container .r2 .layer-items .msg {
        padding-left: 0
    }

    .tech .container .r2 .layer-items .msg>ul li {
        margin: 2vw 0
    }

    .tech .container .r2 ul.items {
        padding-top: 8vw
    }

    .tech .container .r2 ul.items>li>i {
        margin-bottom: 3vw;
        font-size: 7vw;
        display: block
    }

    .tech .container .r3 .til {
        width: 90%;
        margin: 12vw auto auto
    }

    .tech .container .r3 .til p {
        margin-top: 6vw
    }

    .tech .container .r3 .inner {
        height: 148vw;
        padding-top: 8vw
    }

    .tech .container .r3 .inner>img {
        height: 100vw;
        width: 100%;
        object-fit: cover;
        z-index: 10;
        position: absolute;
        bottom: 0;
        left: 0
    }

    .tech .container .r3 .inner .btn {
        width: 80%;
        z-index: 20;
        margin: 3vw auto;
        position: relative;
        top: 0 !important;
        left: 0 !important
    }

    .tech .container .r3 .inner .btn>div {
        justify-content: space-between;
        padding: 3vw 8vw
    }

    .tech .container .r3 .inner .btn>div em {
        margin-right: 4vw
    }

    .tech .container .r3 .inner .btn>div small {
        width: 32vw
    }

    .custom .container .banner,
    .custom .container .banner .rowMain {
        height: 100vw
    }

    .custom .container .r1 .rowMain .inner>ul {
        flex-wrap: wrap;
        justify-content: flex-start
    }

    .custom .container .r1 .rowMain .inner>ul>li {
        width: 24%;
        margin: 5vw 0
    }

    .custom .container .r1 .rowMain .inner>ul>li.line {
        height: 3vw;
        margin: 10vw 0
    }

    .custom .container .r1 .rowMain .inner>ul>li:nth-of-type(8n) {
        display: none
    }

    .custom .container .r1 .rowMain .inner>ul>li>i {
        margin-bottom: 3vw;
        font-size: 7vw
    }

    .custom .container .r1 .rowMain .group .layer-items .col {
        width: 100%;
        padding-left: 0
    }

    .custom .container .r1 .rowMain .group .layer-items .layer-photo {
        padding-bottom: 130vw
    }

    .custom .container .r1 .rowMain .group .layer-items .col .list {
        padding-top: 12vw
    }

    .custom .container .r1 .rowMain .group .layer-items .col .list>em {
        top: 5vw
    }

    .custom .container .r1 .rowMain .group .layer-items .col .list .layer-a {
        width: 28vw;
        height: 12vw
    }

    .custom .container .r1 .rowMain .group .layer-items .col .list .layer-a>em {
        height: 1.6vw;
        margin: 0 8px
    }

    .custom .container .r1 .rowMain .group {
        padding-bottom: 22vw
    }

    .design .r1 .rowMain .layer-items .layer-photo {
        position: absolute;
        bottom: 0
    }

    .design .r1 .rowMain .layer-items {
        margin-bottom: 12vw;
        padding-bottom: 118%
    }

    .design .r1 .rowMain .layer-items .msg {
        padding: 0
    }

    .design .r1 .rowMain .layer-items span {
        opacity: .2;
        font-size: 24vw;
        top: auto;
        bottom: 90vw;
        left: 40%
    }

    .design .r1 .rowMain .layer-items span.lp {
        left: 40%
    }

    .design .r2 {
        height: 80vw
    }

    .design .r2 .bg {
        -webkit-mask-image: linear-gradient(#0000 0%, #0009 35% 60%, #0000 94%);
        mask-image: linear-gradient(#0000 0%, #0009 35% 60%, #0000 94%)
    }

    .proItem .container .banner ul.items {
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        padding-bottom: 6vw
    }

    .proItem .container .banner ul.items>li {
        width: 24%;
        margin: 4vw 0
    }

    .proItem .container .banner ul.items>li:nth-of-type(8n) {
        display: none
    }

    .proItem .container .banner ul.items>li>i {
        margin-bottom: 3vw;
        font-size: 8vw
    }

    .proItem .container .banner ul.items .line {
        height: 3vw;
        margin: 10vw 0
    }

    .proItem .container .banner .rowMain {
        padding-bottom: 75vw
    }

    .proItem .container .banner .rowMain>div>p {
        padding-bottom: 16vw
    }
}

.en .brand_body .row02 .row02_con .pub_info {
    padding-right: 0
}

.en .brand_h_body .row03 .row03_case .row03_box .ind_title {
    margin-bottom: .55rem;
    font-size: 1.2rem
}

.en .sport .container .r5 .rowMain .inner .layer-box .msg {
    padding: 0 2.08333vw
}

.en .sport .container .r7 .group .layer-items .msg h4 {
    line-height: 1.25
}

.en .sport .container .r7 .group .layer-items .msg h4 br {
    display: none
}

.en .tech .container .r3 .til p {
    width: 78%;
    margin: 0 auto
}

.en .shop .r1 .layer-items h2 {
    line-height: 1.25
}

@keyframes scrP1 {
    0% {
        clip-path: circle(60vw at 50vw 22vw)
    }

    to {
        clip-path: circle(1.8rem at 27vw 14vw)
    }
}

@keyframes scrP1_app {
    0% {
        clip-path: circle(60vw at 50vw 22vw)
    }

    to {
        clip-path: circle(2rem at 50vw 50vw)
    }
}

@keyframes scrP2 {
    0% {
        clip-path: circle(60vw at 50vw 32vw)
    }

    to {
        clip-path: circle(1.8rem at 64vw 38vw)
    }
}

@keyframes scrP2_app {
    0% {
        clip-path: circle(60vw at 50vw 32vw)
    }

    to {
        clip-path: circle(2rem at 50vw 50vw)
    }
}

.fadeInDown {
    animation-name: fadeInDown
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-100%)
    }

    to {
        opacity: 1;
        transform: none
    }
}