@charset "UTF-8";/*
! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
*/
*,:after,:before {
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
}

:after,:before {
    --tw-content: ""
}

:host,html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0;
    line-height: inherit
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1,h2,h3,h4,h5,h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    text-decoration: inherit
}

b,strong {
    font-weight: bolder
}

code,kbd,pre,samp {
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: initial
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

button,input,optgroup,select,textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0
}

button,select {
    text-transform: none
}

button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: initial;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

progress {
    vertical-align: initial
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

summary {
    display: list-item
}

blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre {
    margin: 0
}

fieldset {
    margin: 0
}

fieldset,legend {
    padding: 0
}

menu,ol,ul {
    list-style: none;
    margin: 0;
    padding: 0
}

dialog {
    padding: 0
}

textarea {
    resize: vertical
}

input::-moz-placeholder,textarea::-moz-placeholder {
    opacity: 1;
    color: #9ca3af
}

input::placeholder,textarea::placeholder {
    opacity: 1;
    color: #9ca3af
}

[role=button],button {
    cursor: pointer
}

:disabled {
    cursor: default
}

audio,canvas,embed,iframe,img,object,svg,video {
    display: block;
    vertical-align: middle
}

img,video {
    max-width: 100%;
    height: auto
}

[hidden] {
    display: none
}

:root {
    --color-vi: 192 245 2;
    --color-vi-deep: 165 211 0;
    --color-white: 255 255 255;
    --color-black: 0 0 0;
    --color-gray-25: 252 252 252;
    --color-gray-50: 250 250 250;
    --color-gray-100: 245 245 245;
    --color-gray-200: 229 229 229;
    --color-gray-300: 214 214 214;
    --color-gray-400: 163 163 163;
    --color-gray-500: 115 115 115;
    --color-gray-600: 82 82 82;
    --color-gray-700: 66 66 66;
    --color-gray-800: 41 41 41;
    --color-gray-900: 20 20 20;
    --color-gray-950: 15 15 15;
    --color-warm-gray-25: 253 253 252;
    --color-warm-gray-50: 250 250 249;
    --color-warm-gray-100: 245 245 244;
    --color-warm-gray-200: 231 229 228;
    --color-warm-gray-300: 215 211 208;
    --color-warm-gray-400: 169 162 157;
    --color-warm-gray-500: 121 113 107;
    --color-warm-gray-600: 87 83 78;
    --color-warm-gray-700: 68 64 60;
    --color-warm-gray-800: 41 37 36;
    --color-warm-gray-900: 28 25 23;
    --color-warm-gray-950: 23 20 18;
    --color-cool-gray-25: 252 252 252;
    --color-cool-gray-50: 250 250 250;
    --color-cool-gray-100: 244 244 245;
    --color-cool-gray-200: 228 228 231;
    --color-cool-gray-300: 209 209 214;
    --color-cool-gray-400: 160 160 171;
    --color-cool-gray-500: 112 112 123;
    --color-cool-gray-600: 81 82 92;
    --color-cool-gray-700: 63 63 70;
    --color-cool-gray-800: 38 39 43;
    --color-cool-gray-900: 24 24 27;
    --color-cool-gray-950: 19 19 22
}

html {
    font-size: 16px
}

*,:after,:before {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59,130,246,.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59,130,246,.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

.container {
    width: 100%
}

.pointer-events-none {
    pointer-events: none
}

.pointer-events-auto {
    pointer-events: auto
}

.static {
    position: static
}

.fixed {
    position: fixed
}

.relative {
    position: relative
}

.sticky {
    position: sticky
}

.start-3 {
    inset-inline-start: .75rem
}

.z-10 {
    z-index: 10
}

.z-20 {
    z-index: 20
}

.z-30 {
    z-index: 30
}

.z-50 {
    z-index: 50
}

.block {
    display: block
}

.flex {
    display: flex
}

.grid {
    display: grid
}

.hidden {
    display: none
}

.h-full {
    height: 100%
}

.w-full {
    width: 100%
}

.transform {
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.cursor-pointer {
    cursor: pointer
}

.resize {
    resize: both
}

.grid-flow-col-dense {
    grid-auto-flow: column dense
}

.grid-cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.grid-cols-3 {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.grid-cols-4 {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

.grid-cols-5 {
    grid-template-columns: repeat(5,minmax(0,1fr))
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.items-start {
    align-items: flex-start
}

.items-end {
    align-items: flex-end
}

.items-center {
    align-items: center
}

.justify-end {
    justify-content: flex-end
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.self-center {
    align-self: center
}

.justify-self-start {
    justify-self: start
}

.justify-self-end {
    justify-self: end
}

.overflow-hidden {
    overflow: hidden
}

.text-center {
    text-align: center
}

.text-ue-black {
    --tw-text-opacity: 1;
    color: rgb(var(--color-black)/var(--tw-text-opacity))
}

.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

*,:after,:before {
    box-sizing: border-box
}

:after,:before {
    text-decoration: inherit;
    vertical-align: inherit
}

:where(:root) {
    cursor: default;
    line-height: 1.5;
    overflow-wrap: break-word;
    -moz-tab-size: 4;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%
}

:where(body) {
    margin: 0
}

:where(h1) {
    font-size: 2em;
    margin: .67em 0
}

:where(dl,ol,ul) :where(dl,ol,ul) {
    margin: 0
}

:where(hr) {
    color: inherit;
    height: 0
}

:where(nav) :where(ol,ul) {
    list-style-type: none;
    padding: 0
}

:where(nav li):before {
    content: "\200B";
    float: left
}

:where(pre) {
    font-family: monospace,monospace;
    font-size: 1em;
    overflow: auto
}

:where(abbr[title]) {
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

:where(b,strong) {
    font-weight: bolder
}

:where(code,kbd,samp) {
    font-family: monospace,monospace;
    font-size: 1em
}

:where(small) {
    font-size: 80%
}

:where(audio,canvas,iframe,img,svg,video) {
    vertical-align: middle
}

:where(iframe) {
    border-style: none
}

:where(svg:not([fill])) {
    fill: currentColor
}

:where(table) {
    border-collapse: collapse;
    border-color: inherit;
    text-indent: 0
}

:where(button,input,select) {
    margin: 0
}

:where(button,[type=button i],[type=reset i],[type=submit i]) {
    -webkit-appearance: button
}

:where(fieldset) {
    border: 1px solid #a0a0a0
}

:where(progress) {
    vertical-align: initial
}

:where(textarea) {
    margin: 0;
    resize: vertical
}

:where([type=search i]) {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-inner-spin-button,::-webkit-outer-spin-button {
    height: auto
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: .54
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

:where(dialog) {
    background-color: #fff;
    border: solid;
    color: #000;
    height: -moz-fit-content;
    height: fit-content;
    left: 0;
    margin: auto;
    padding: 1em;
    position: absolute;
    right: 0;
    width: -moz-fit-content;
    width: fit-content
}

:where(dialog:not([open])) {
    display: none
}

:where(details>summary:first-of-type) {
    display: list-item
}

:where([aria-busy=true i]) {
    cursor: progress
}

:where([aria-controls]) {
    cursor: pointer
}

:where([aria-disabled=true i],[disabled]) {
    cursor: not-allowed
}

:where([aria-hidden=false i][hidden]) {
    display: initial
}

:where([aria-hidden=false i][hidden]:not(:focus)) {
    clip: rect(0,0,0,0);
    position: absolute
}

:where(iframe,img,input,video,select,textarea) {
    height: auto;
    max-width: 100%
}

:where(button,input,select,textarea) {
    background-color: initial;
    border: 1px solid WindowFrame;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    padding: .25em .375em
}

:where(select) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat 100% /1em;
    border-radius: 0;
    padding-right: 1em
}

:where([type=color i],[type=range i]) {
    border-width: 0;
    padding: 0
}

@font-face {
    font-family: system-ui;
    src: local(".AppleSystemUIFont"),local("Segoe UI"),local("Ubuntu"),local("Roboto-Regular"),local("HelveticaNeue")
}

@font-face {
    font-family: system-ui;
    font-style: italic;
    src: local(".AppleSystemUIFont"),local("Segoe UI Italic"),local("Ubuntu-Italic"),local("Roboto-Italic"),local("HelveticaNeue-Italic")
}

@font-face {
    font-family: system-ui;
    font-weight: 700;
    src: local(".AppleSystemUIFont"),local("Segoe UI Bold"),local("Ubuntu-Bold"),local("Roboto-Bold"),local("HelveticaNeue-Bold")
}

@font-face {
    font-family: system-ui;
    font-style: italic;
    font-weight: 700;
    src: local(".AppleSystemUIFont"),local("Segoe UI Bold Italic"),local("Ubuntu-BoldItalic"),local("Roboto-BoldItalic"),local("HelveticaNeue-BoldItalic")
}

html {
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji
}

code,kbd,pre,samp {
    font-family: ui-monospace,Menlo,Consolas,Roboto Mono,"Ubuntu Monospace",Noto Mono,Oxygen Mono,Liberation Mono,monospace,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji
}

@font-face {
    font-family: ui-monospace;
    src: local(".AppleSystemUIFontMonospaced-Regular"),local("Segoe UI Mono"),local("UbuntuMono"),local("Roboto-Mono"),local("Menlo")
}

@font-face {
    font-family: ui-monospace;
    font-style: italic;
    src: local(".AppleSystemUIFontMonospaced-RegularItalic"),local("Segoe UI Mono Italic"),local("UbuntuMono-Italic"),local("Roboto-Mono-Italic"),local("Menlo-Italic")
}

@font-face {
    font-family: ui-monospace;
    font-weight: 700;
    src: local(".AppleSystemUIFontMonospaced-Bold"),local("Segoe UI Mono Bold"),local("UbuntuMono-Bold"),local("Roboto-Mono-Bold"),local("Menlo-Bold")
}

@font-face {
    font-family: ui-monospace;
    font-style: italic;
    font-weight: 700;
    src: local(".AppleSystemUIFontMonospaced-BoldItalic"),local("Segoe UI Mono Bold Italic"),local("UbuntuMono-BoldItalic"),local("Roboto-Mono-BoldItalic"),local("Menlo-BoldItalic")
}

@keyframes animation-signal {
    0% {
        transform: scale(0);
        opacity: 1
    }

    1% {
        border-color: #fff;
        background-color: hsla(0,0%,100%,.3)
    }

    20% {
        border-color: #fff;
        background-color: hsla(0,0%,100%,.3)
    }

    to {
        transform: scale(1);
        opacity: 1;
        border-color: hsla(0,0%,100%,0);
        background-color: hsla(0,0%,100%,0)
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(180deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes loop-translate-x {
    0% {
        left: 0;
        transform: translateX(-100%)
    }

    to {
        left: 100%;
        transform: translateX(100%)
    }
}

@keyframes loop-translate-y {
    0% {
        bottom: 0;
        transform: translateY(100%)
    }

    to {
        bottom: 100%;
        transform: translateY(-100%)
    }
}

@keyframes wave-y {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(var(--wave-y-distance,5px))
    }
}

@keyframes orbit {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(-1turn)
    }
}

.gelatine {
    animation: gelatine .5s infinite
}

@keyframes gelatine {
    0%,to {
        transform: scale(1)
    }

    25% {
        transform: scale(.9,1.1)
    }

    50% {
        transform: scale(1.1,.9)
    }

    75% {
        transform: scale(.95,1.05)
    }
}

@keyframes glitch-animation-1 {
    0% {
        clip: rect(102px,350px,140px,30px)
    }

    5% {
        clip: rect(105px,350px,133px,30px)
    }

    10% {
        clip: rect(93px,350px,96px,30px)
    }

    15% {
        clip: rect(45px,350px,51px,30px)
    }

    20% {
        clip: rect(36px,350px,63px,30px)
    }

    25% {
        clip: rect(17px,350px,57px,30px)
    }

    30% {
        clip: rect(14px,350px,23px,30px)
    }

    35% {
        clip: rect(10px,350px,68px,30px)
    }

    40% {
        clip: rect(101px,350px,57px,30px)
    }

    45% {
        clip: rect(71px,350px,128px,30px)
    }

    50% {
        clip: rect(130px,350px,51px,30px)
    }

    55% {
        clip: rect(49px,350px,110px,30px)
    }

    60% {
        clip: rect(80px,350px,60px,30px)
    }

    65% {
        clip: rect(88px,350px,84px,30px)
    }

    70% {
        clip: rect(70px,350px,8px,30px)
    }

    75% {
        clip: rect(104px,350px,32px,30px)
    }

    80% {
        clip: rect(82px,350px,76px,30px)
    }

    85% {
        clip: rect(137px,350px,37px,30px)
    }

    90% {
        clip: rect(64px,350px,66px,30px)
    }

    95% {
        clip: rect(70px,350px,141px,30px)
    }

    to {
        clip: rect(1px,350px,120px,30px)
    }
}

@font-face {
    font-family: PlusJakartaSans;
    font-weight: 300;
    font-style: normal;
    src: url(../fonts/plusjakartasans-light.ttf);
    src: url(../fonts/plusjakartasans-light.ttf) format("truetype")
}

@font-face {
    font-family: PlusJakartaSans;
    font-weight: 400;
    font-style: normal;
    src: url(../fonts/plusjakartasans-regular.ttf);
    src: url(../fonts/plusjakartasans-regular.ttf) format("truetype")
}

@font-face {
    font-family: PlusJakartaSans;
    font-weight: 500;
    font-style: normal;
    src: url(../fonts/plusjakartasans-medium.ttf);
    src: url(../fonts/plusjakartasans-medium.ttf) format("truetype")
}

@font-face {
    font-family: PlusJakartaSans;
    font-weight: 600;
    font-style: normal;
    src: url(../fonts/plusjakartasans-semibold.ttf);
    src: url(../fonts/plusjakartasans-semibold.ttf) format("truetype")
}

@font-face {
    font-family: PlusJakartaSans;
    font-weight: 700;
    font-style: normal;
    src: url(../fonts/plusjakartasans-bold.ttf);
    src: url(../fonts/plusjakartasans-bold.ttf) format("truetype")
}

@font-face {
    font-family: PlusJakartaSans;
    font-weight: 800;
    font-style: normal;
    src: url(../fonts/plusjakartasans-extrabold.ttf);
    src: url(../fonts/plusjakartasans-extrabold.ttf) format("truetype")
}

@font-face {
    font-family: PlusJakartaSans;
    font-weight: 300;
    font-style: italic;
    src: url(../fonts/plusjakartasans-lightitalic.ttf);
    src: url(../fonts/plusjakartasans-lightitalic.ttf) format("truetype")
}

@font-face {
    font-family: PlusJakartaSans;
    font-weight: 400;
    font-style: italic;
    src: url(../fonts/plusjakartasans-italic.ttf);
    src: url(../fonts/plusjakartasans-italic.ttf) format("truetype")
}

@font-face {
    font-family: PlusJakartaSans;
    font-weight: 500;
    font-style: italic;
    src: url(../fonts/plusjakartasans-mediumitalic.ttf);
    src: url(../fonts/plusjakartasans-mediumitalic.ttf) format("truetype")
}

@font-face {
    font-family: PlusJakartaSans;
    font-weight: 600;
    font-style: italic;
    src: url(../fonts/plusjakartasans-semibolditalic.ttf);
    src: url(../fonts/plusjakartasans-semibolditalic.ttf) format("truetype")
}

@font-face {
    font-family: PlusJakartaSans;
    font-weight: 700;
    font-style: italic;
    src: url(../fonts/plusjakartasans-bolditalic.ttf);
    src: url(../fonts/plusjakartasans-bolditalic.ttf) format("truetype")
}

@font-face {
    font-family: PlusJakartaSans;
    font-weight: 800;
    font-style: italic;
    src: url(../fonts/plusjakartasans-extrabolditalic.ttf);
    src: url(../fonts/plusjakartasans-extrabolditalic.ttf) format("truetype")
}

:root {
    --u-vh: 1vh;
    --u-safe-screen-h: 1vh;
    --u-font-family-common: system-ui,-apple-system,"微软雅黑";
    --g-color-vi: #ff4d00;
    --g-color--bg: #fff;
    --g-color-font: #fff;
    --text-gray-950: #0f0f0f;
    --text-gray-900: #141414;
    --text-gray-800: #292929;
    --text-gray-700: #424242;
    --text-gray-600: #525252;
    --text-gray-500: #737373;
    --g-size-font-base: 12px;
    --g-size-container-width: var(--g-size-container-width--regular);
    --g-size-container-width--small: 1200px;
    --g-size-container-width--regular: 1440px;
    --g-size-container-width--extra: 1800px;
    --g-size-container-space: 3%;
    --g-size-nav-height: var(--g-size-nav-normal-height);
    --g-size-nav-normal-height: 80px;
    --g-size-nav-mini-height: 76px;
    --z-index-site-nav: 9999
}

@supports(height: 1dvh) {
    :root {
        --u-safe-screen-h:1dvh;
        --u-safe-area-inset-top: env(safe-area-inset-top);
        --u-safe-area-inset-right: env(safe-area-inset-right);
        --u-safe-area-inset-bottom: env(safe-area-inset-bottom);
        --u-safe-area-inset-left: env(safe-area-inset-left)
    }
}

html {
    overflow: auto;
    width: 100%;
    height: 100%
}

body {
    font-family: var(--u-font-family-common);
    font-size: var(--g-size-font-base);
    font-weight: 400;
    line-height: 1.4;
    min-width: 1196px;
    min-height: calc(var(--u-vh)*100);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    color: var(--g-color-font);
    background-color: var(--g-color--bg)
}

body[data-has-scroll="1"] {
    --size-nav-height: var(--g-size-nav-mini-height)
}

img {
    content: normal!important;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    vertical-align: top
}

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

button {
    padding: 0;
    border-width: 0;
    outline: none
}

h1,h2,h3,p {
    margin: 0
}

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

::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #c1c1c1
}

.u-wrapper--limit-width--small {
    --g-size-container-width: var(--g-size-container-width--small)
}

.u-wrapper--limit-width--extra {
    --g-size-container-width: var(--g-size-container-width--extra)
}

.u-wrapper--limit-width {
    width: calc(var(--g-size-container-width) + var(--g-size-container-space)*2);
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--g-size-container-space)
}

.u-wrapper--limit-width .u-wrapper--limit-width {
    --g-size-container-space: 0px
}

.u-hide {
    position: absolute!important;
    display: inline-block;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    -webkit-clip-path: inset(0 0 99.9% 99.9%);
    clip-path: inset(0 0 99.9% 99.9%)
}

html.lenis,html.lenis body {
    height: auto
}

.lenis.lenis-smooth {
    scroll-behavior: auto!important
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain
}

.lenis.lenis-stopped {
    overflow: hidden
}

.lenis.lenis-smooth iframe {
    pointer-events: none
}

.splitting .char,.splitting .whitespace,.splitting .word {
    line-height: inherit;
    display: inline-flex;
    vertical-align: text-bottom
}

.splitting .whitespace:after {
    content: ""
}

.marquee {
    display: flex;
    overflow: hidden;
    pointer-events: none;
    align-items: center
}

.layer--pop {
    position: fixed;
    z-index: 100000;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.5)
}

.layer--pop .video-panel {
    overflow: hidden;
    width: 1200px;
    max-width: 89%;
    border-radius: 10px;
    background-color: #000;
    box-shadow: 0 0 40px rgba(0,0,0,.6)
}

.layer--pop .code-panel img {
    max-width: 300px;
    border-radius: 10px
}

.c-progress-bar {
    width: 50px;
    height: 4px;
    margin: 20px auto;
    border-radius: 100px;
    background: hsla(0,0%,100%,.1)
}

.c-progress-bar--inner {
    width: calc(var(--swiper-progress)*100%);
    height: 100%;
    border-radius: 100px;
    background-color: #0159de
}

.counterDX {
    vertical-align: middle;
    font-variant-numeric: tabular-nums
}

@media(max-width: 767.98px) {
    :root {
        --g-size-container-width--regular:100vw;
        --g-size-container-space: 20px;
        --g-size-nav-normal-height: 62px;
        --g-size-nav-mini-height: 62px
    }

    body {
        min-width: auto
    }
}

:root {
    --g-color--bg: #f1f1f1;
    --g-color-font: #292929;
    --g-size-container-width--regular: 1560px;
    --g-size-nav-normal-height: 175px;
    --g-size-nav-mini-height: 80px;
    --logo-width: 568;
    --logo-height: 427
}

body {
    font-family: PlusJakartaSans,"Noto Sans S Chinese",var(--u-font-family-common)
}

.cursor-canvas {
    position: fixed;
    z-index: -10;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    opacity: 0;
    filter: blur(0)
}

.j-draw-line .j-line {
    --size: 39px;
    position: absolute;
    top: 100%;
    left: 50%;
    width: var(--size);
    height: calc(var(--size)*.17949);
    transform: translateX(-50%)
}

.j-draw-line .j-line path {
    stroke-dasharray: var(--j-l-length);
    stroke-dashoffset: var(--j-l-length)
}

.j-draw-line[data-active="1"] .j-line path {
    stroke-dashoffset: 0!important
}

.lighter-dot--wrapper {
    --dot-size: 8px;
    --inner-color: #fff;
    --ripper-color: #fff;
    --ripper-size: 12;
    --animation-delay: 0.78s;
    width: 0;
    height: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

.lighter-dot--wrapper .animated-dot {
    position: relative;
    flex: 0 0 auto;
    width: var(--dot-size);
    height: var(--dot-size)
}

.lighter-dot--wrapper .animated-dot:after {
    z-index: 20;
    content: "";
    background-color: var(--inner-color);
    --u-size: calc(var(--dot-size)/2);
    width: var(--u-size);
    height: var(--u-size);
    border-radius: 50%;
    --u-color: var(--inner-color);
    background-color: var(--u-color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0)
}

.lighter-dot--wrapper .animated-dot .middle-dot,.lighter-dot--wrapper .animated-dot .signal,.lighter-dot--wrapper .animated-dot .signal2 {
    position: absolute;
    top: calc(50% - var(--size)/2);
    left: calc(50% - var(--size)/2);
    width: var(--size);
    height: var(--size)
}

.lighter-dot--wrapper .animated-dot .middle-dot {
    --size: var(--dot-size);
    position: absolute;
    z-index: 10;
    border-radius: 30px;
    background-color: var(--inner-color)
}

.lighter-dot--wrapper .animated-dot .signal,.lighter-dot--wrapper .animated-dot .signal2 {
    --size: calc(var(--dot-size)*var(--ripper-size));
    transition: .36s ease;
    transform: scale(0);
    transform-origin: 50% 50%;
    animation-name: animation-signal;
    animation-duration: 4s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    opacity: 1;
    border: 2px solid #fff;
    border-color: #fff;
    border-radius: 2000px;
    background-color: var(--ripper-color);
    background-color: hsla(0,0%,100%,.6);
    animation-fill-mode: forwards
}

.lighter-dot--wrapper .animated-dot .signal {
    animation-delay: calc(var(--animation-delay))
}

.lighter-dot--wrapper .animated-dot .signal2 {
    animation-delay: calc(var(--animation-delay) + 2s)
}

.c-m-btn {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 6px 6px 6px 28px;
    cursor: pointer;
    transition: .26s ease;
    color: var(--text-gray-700,#424242);
    border-radius: 1000px;
    background-color: #fff;
    align-items: center;
    gap: 12px
}

.c-m-btn .ic-box {
    position: relative;
    overflow: hidden;
    color: #fff;
    flex-shrink: 0;
    --u-size: 34px;
    width: var(--u-size);
    height: var(--u-size);
    border-radius: 50%;
    --u-color: #1666eb;
    background-color: var(--u-color)
}

.c-m-btn .ic,.c-m-btn .ic-box {
    display: flex;
    align-items: center;
    justify-content: center
}

.c-m-btn .ic {
    font-weight: 700;
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 34px
}

.c-m-btn .ic--before {
    left: -34px
}

.c-m-btn:hover {
    color: var(--text-gray-950,#0f0f0f)
}

.c-m-btn:hover .ic {
    transition: .46s ease
}

.c-m-btn:hover .ic--before {
    left: 0
}

.c-m-btn:hover .ic--after {
    left: 34px
}

.c-m-case {
    overflow: hidden;
    padding-top: 30px;
    padding-bottom: 118px
}

.c-m-case .m-head {
    margin-bottom: 96px
}

.c-m-case .m-title {
    display: flex;
    align-items: center;
    font-size: 84px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-gray-950,#0f0f0f);
    line-height: 1.0238095238em;
    line-height: 1
}

.c-m-case .m-title .num {
    font-size: 18px;
    line-height: 1;
    margin-top: -.4em;
    margin-left: 6px;
    color: var(--text-gray-800,#292929)
}

.c-m-case .m-subtitle {
    font-size: 22px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.2727272727em;
    margin-top: 14px;
    color: var(--text-gray-600,#525252)
}

.c-m-case .category-group {
    font-size: 15px;
    align-items: center;
    gap: 24px
}

.c-m-case .category-group .divide-line {
    width: 1px;
    height: 1em;
    transform: rotate(20deg);
    background-color: var(--text-gray-500,#737373)
}

.c-m-case .category-group .divide-line:last-child {
    display: none
}

.c-m-case .category-item {
    font-size: 15px;
    font-weight: 500;
    line-height: 200%;
    position: relative;
    transition: .26s ease;
    color: var(--text-gray-500,#737373)
}

.c-m-case .category-item:hover,.c-m-case .category-item[data-active="1"] {
    color: var(--text-gray-700,#424242)
}

.c-m-case .case-list .wow:nth-child(odd) {
    animation-delay: .1s
}

.c-m-case .case-list .wow:nth-child(2n+2) {
    animation-delay: .2s
}

.c-m-case .case-item {
    --radius: 40px;
    width: 750px;
    min-width: 0;
    max-width: 100%;
    cursor: grab;
    --draw-line-height: 1px;
    --draw-duration: 0.6s
}

.c-m-case .case-item:hover .item-title span {
    background-position: 0 100%;
    background-size: 100% var(--draw-line-height)
}

.c-m-case .case-item .item-title span {
    transition: background-size var(--draw-duration) cubic-bezier(.2,.75,.5,1);
    background-image: linear-gradient(90deg,currentcolor 0,currentcolor);
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: 0 var(--draw-line-height)
}

.c-m-case .case-item .item-thumb {
    transition: transform .75s cubic-bezier(.2,.75,.5,1);
    transform-origin: center center;
    border-radius: var(--radius);
    --u-width: 1500;
    --u-height: 899;
    position: relative;
    overflow: hidden;
    width: 100%
}

.c-m-case .case-item .item-thumb>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .c-m-case .case-item .item-thumb>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .c-m-case .case-item .item-thumb>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.c-m-case .case-item .item-thumb:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.c-m-case .case-item.wow {
    visibility: hidden;
    animation-name: fadeInUp
}

.c-m-case .case-item img {
    transition: transform .75s cubic-bezier(.2,.75,.5,1);
    transform-origin: center center
}

.c-m-case .case-item .item-category-tag {
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 0 30px 30px 0;
    transition: .36s ease
}

.c-m-case .case-item .item-category-tag:after,.c-m-case .case-item .item-category-tag:before {
    content: "";
    background-size: cover;
    position: absolute;
    inset: 0
}

.c-m-case .case-item .item-category-tag:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='222' height='97' fill='none' viewBox='0 0 222 97'%3E%3Cpath fill='%23fff' d='M0 40C0 17.909 17.909 0 40 0h182c-17.08 0-30.925 16.213-30.925 36.213 0 15-12.16 27.16-27.16 27.16H30.925C14.59 63.373 1.21 78.207.078 97H0z'/%3E%3C/svg%3E")
}

.c-m-case .case-item .item-category-tag:after {
    z-index: 10;
    transition: .36s ease;
    opacity: 0;
    background-image: url("/wp-content/themes/Mzwc-StaticX/static/picture/t.png")
}

.c-m-case .case-item .item-category-tag span {
    position: relative;
    z-index: 20
}

.c-m-case .case-item .tag--inner {
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5em;
    min-width: 192px;
    padding: 20px 0;
    transition: .36s ease;
    text-align: center;
    color: var(--text-gray-800,#292929);
    border-radius: var(--radius) 0 var(--radius) 0
}

.c-m-case .case-item .item-info {
    padding-top: 20px
}

.c-m-case .case-item .item-title {
    font-size: 20px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.4em;
    padding: 0 2.65em;
    color: var(--text-gray-800,#292929)
}

.c-m-case .case-item .jump-icon {
    z-index: 100;
    cursor: none;
    opacity: 0;
    background: linear-gradient(90deg,#1666eb,#ad79cd);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    --u-size: 121px;
    width: var(--u-size);
    height: var(--u-size);
    border-radius: 50%
}

.c-m-case .case-item .jump-icon .icon-box {
    position: absolute;
    inset: 0
}

.c-m-case .case-item .jump-icon .ic {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="53" height="53" fill="none" viewBox="0 0 53 53"><path fill="%23fff" fill-rule="evenodd" d="M31.547 37.588a1.58 1.58 0 0 1-1.116-1.932l3.056-11.407-15.83 9.139a1.578 1.578 0 1 1-1.577-2.733l15.83-9.139-11.407-3.056a1.578 1.578 0 1 1 .817-3.048l15.085 4.042a1.58 1.58 0 0 1 1.116 1.932l-4.042 15.086a1.58 1.58 0 0 1-1.932 1.116" clip-rule="evenodd"/></svg>');
    background-repeat: no-repeat;
    background-size: cover;
    --u-width: 53px;
    width: var(--u-width);
    --u-height: 53px;
    height: var(--u-height)
}

.c-m-case .case-item:hover .item-category-tag .tag--inner {
    color: #fff
}

.c-m-case .case-item:hover .item-category-tag:after {
    opacity: 1
}

.c-m-case .case-item:active {
    cursor: grabbing
}

.u-load-more {
    padding: 10px;
    padding-left: 30px;
    border-radius: 45px;
    background: #fff;
    box-shadow: 0 2.571px 5.143px -2.571px rgba(0,0,0,.1)
}

.u-load-more .text {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--text-gray-800,#292929)
}

.u-load-more .ic-box {
    margin-left: 14px;
    animation: rotate 2s linear infinite
}

@media(max-width: 1920.98px) {
    :root {
        --g-size-container-width--regular:1440px
    }
}

@media(max-width: 1679.98px) {
    :root {
        --g-size-nav-normal-height:155px;
        --g-size-container-width--regular: 1340px
    }

    .c-m-case .m-title {
        font-size: 74px
    }

    .c-m-case .case-item {
        width: 690px
    }
}

@media(max-width: 1559.98px) {
    :root {
        --g-size-nav-normal-height:145px;
        --g-size-container-width--regular: 1260px
    }

    .c-m-case .m-title {
        font-size: 70px
    }

    .c-m-case .category-group {
        gap: 22px
    }
}

@media(max-width: 1439.98px) {
    :root {
        --g-size-nav-normal-height:135px
    }

    .c-m-case .m-title {
        font-size: 64px
    }

    .c-m-case .case-item .item-title {
        font-size: 18px
    }

    .c-m-case .case-item {
        width: 650px
    }

    :root {
        --g-size-nav-normal-height: 100px;
        --g-size-nav-mini-height: 68px
    }
}

@media(max-width: 767.98px) {
    .c-m-case .m-head {
        display:block;
        margin-bottom: 40px
    }

    .c-m-case .m-head>.state--pos-right {
        overflow: auto;
        margin-top: 10px;
        padding: 10px 0
    }

    .c-m-case .m-title {
        font-size: 46px;
        justify-content: center
    }

    .c-m-case .m-subtitle {
        font-size: 18px;
        margin-top: 8px;
        text-align: center
    }

    .c-m-case .category-group {
        padding-left: 8px;
        gap: 12px
    }

    .c-m-case .category-item {
        white-space: nowrap
    }

    .c-m-case .case-item .item-title {
        font-size: 15px;
        padding: 0 1em
    }

    .u-load-more {
        padding: 7px 10px;
        padding-left: 21px
    }

    .u-load-more .text {
        font-size: 16px
    }

    .u-load-more .ic-box {
        width: 30px;
        margin-left: 10px
    }

    .u-load-more .ic-box svg {
        width: 100%
    }
}

.j-img-panel {
    overflow: hidden;
    width: 300px;
    max-width: 80vw;
    border-radius: 20px
}

@media(max-width: 767.98px) {
    .j-img-panel {
        overflow:hidden;
        width: 200px;
        max-width: 80vw;
        transform: translateY(-40px);
        border-radius: 10px
    }
}

.c-module-head {
    --line-opacity: 1;
    --line-distance: 0;
    --text-opacity: 1;
    --text-distance: 0;
    --space-mb: 120px;
    margin-bottom: var(--space-mb)
}

.c-module-head .m-title {
    font-size: 44px;
    font-weight: 400;
    letter-spacing: -.02em;
    gap: .8181818182em
}

.c-module-head .m-title .decoration--left,.c-module-head .m-title .decoration--right {
    width: 3.6363636364em;
    height: 1px;
    opacity: var(--line-opacity)
}

.c-module-head .m-title .decoration--left:after,.c-module-head .m-title .decoration--left:before,.c-module-head .m-title .decoration--right:after,.c-module-head .m-title .decoration--right:before {
    position: absolute;
    width: 100%;
    height: 20px;
    content: "";
    filter: blur(6px)
}

.c-module-head .m-title .decoration--left:before,.c-module-head .m-title .decoration--right:before {
    background: radial-gradient(40.22% 33.41% at 98.91% 50%,#5be2ff 0,rgba(103,109,255,0) 100%);
    mix-blend-mode: plus-lighter
}

.c-module-head .m-title .decoration--left:after,.c-module-head .m-title .decoration--right:after {
    background: radial-gradient(28% 23.26% at 72% 50%,rgba(48,91,245,.7) 0,rgba(103,109,255,0) 100%)
}

.c-module-head .m-title .decoration--left {
    position: relative;
    left: var(--line-distance);
    background: linear-gradient(90deg,rgba(103,145,255,0),#fff 99.17%)
}

.c-module-head .m-title .decoration--left:after,.c-module-head .m-title .decoration--left:before {
    right: 0;
    transform: translateY(-50%)
}

.c-module-head .m-title .decoration--right {
    position: relative;
    right: var(--line-distance);
    background: linear-gradient(-90deg,rgba(103,145,255,0),#fff 99.17%)
}

.c-module-head .m-title .decoration--right:before {
    left: 0;
    transform: translateY(-50%) rotate(180deg);
    background: radial-gradient(40.22% 33.41% at 98.91% 50%,#5be2ff 0,rgba(103,109,255,0) 100)
}

.c-module-head .m-title .decoration--right:after {
    left: 0;
    transform: translateY(-50%) rotate(180deg)
}

.c-module-head .m-subtitle {
    font-size: 18px;
    font-weight: 300;
    line-height: 120%;
    margin-top: 1.2222222222em;
    color: hsla(0,0%,100%,.8)
}

.c-module-head .text {
    display: inline-block;
    transform: translateY(var(--text-distance));
    opacity: var(--text-opacity)
}

.lang-en .c-module-head .m-title {
    font-weight: 700
}

@media(max-width: 1559.98px) {
    .c-module-head {
        --space-mb:80px
    }

    .c-module-head .m-title {
        font-size: 36px
    }

    .c-module-head .m-subtitle {
        font-size: 16px
    }
}

@media(max-width: 1439.98px) {
    .c-module-head {
        --space-mb:60px
    }

    .c-module-head .m-title {
        font-size: 34px
    }

    .c-module-head .m-subtitle {
        font-size: 15px
    }
}

@media(max-width: 767.98px) {
    .c-module-head {
        --space-mb:30px
    }

    .c-module-head .m-title {
        font-size: 22px
    }

    .c-module-head .m-subtitle {
        font-size: 14px;
        margin-top: 10px
    }

    .lang-en .c-module-head .m-title {
        gap: .6em
    }

    .lang-en .c-module-head .m-title .text {
        max-width: 9em;
        text-align: center
    }
}

.c-swiper-navigation .swiper-btn {
    font-size: 18px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: .32s ease;
    border: 2px solid hsla(0,0%,100%,.1);
    background-color: #12161e;
    --u-size: 58px;
    width: var(--u-size);
    height: var(--u-size);
    border-radius: 50%
}

.c-swiper-navigation .swiper-btn .ic {
    position: relative;
    z-index: 30
}

.c-swiper-navigation .swiper-btn:after,.c-swiper-navigation .swiper-btn:before {
    content: "";
    transition: .36s ease;
    opacity: 0;
    border-radius: 100px;
    position: absolute;
    inset: 0
}

.c-swiper-navigation .swiper-btn:before {
    z-index: 1;
    transform: rotate(0deg);
    opacity: 0;
    background: radial-gradient(56.6% 59.99% at 28.1% 8.03%,rgba(0,117,255,.9) 0,rgba(0,117,255,.7) 15%,rgba(0,117,255,.15) 64%,rgba(16,22,33,0) 90%),radial-gradient(56.6% 59.99% at 76.03% 92.83%,rgba(29,214,255,.9) 0,rgba(29,214,255,.7) 15%,rgba(29,214,255,.1) 64%,rgba(16,22,33,0) 90%);
    filter: blur(1px);
    inset: -1px
}

.c-swiper-navigation .swiper-btn.btn--prev:before {
    transform: rotate(54deg)
}

.c-swiper-navigation .swiper-btn.btn--prev:hover {
    border-color: transparent
}

.c-swiper-navigation .swiper-btn.btn--prev:hover:after {
    opacity: 1
}

.c-swiper-navigation .swiper-btn.btn--prev:hover:before {
    transform: rotate(-6deg);
    opacity: .9
}

.c-swiper-navigation .swiper-btn.btn--next:before {
    transform: rotate(0deg)
}

.c-swiper-navigation .swiper-btn.btn--next:hover {
    border-color: transparent
}

.c-swiper-navigation .swiper-btn.btn--next:hover:after {
    opacity: 1
}

.c-swiper-navigation .swiper-btn.btn--next:hover:before {
    transform: rotate(60deg);
    opacity: .9
}

.c-swiper-navigation[data-x-pos=right] {
    justify-content: flex-end
}

.c-swiper-navigation[data-x-pos=right] .swiper-btn:first-child {
    margin-right: 12px
}

.c-swiper-navigation[data-y-pos=center] {
    position: absolute;
    z-index: 200;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0
}

.c-swiper-navigation[data-y-pos=bottom] {
    margin-top: 40px
}

.c-pages-tab {
    padding-top: 20px;
    border-top: 1px solid hsla(0,0%,100%,.1)
}

.c-pages-tab .pages-tab-link {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4285714286em;
    display: flex;
    width: 40px;
    height: 36px;
    transition: .36s ease;
    color: hsla(0,0%,100%,.6);
    align-items: center;
    justify-content: center
}

.c-pages-tab .pages-tab-link:hover {
    color: #fff
}

.c-pages-tab .btn--go-next,.c-pages-tab .btn--go-prev {
    --distance: 0
}

.c-pages-tab .btn--go-next .pages-tab-link,.c-pages-tab .btn--go-prev .pages-tab-link {
    font-size: 14px;
    width: auto;
    color: #fff;
    border-radius: 8px;
    gap: 6px
}

.c-pages-tab .btn--go-next .pages-tab-link .ic,.c-pages-tab .btn--go-prev .pages-tab-link .ic {
    font-size: 16px;
    transition: transform .36s ease
}

.c-pages-tab .btn--go-next[data-disable="1"],.c-pages-tab .btn--go-prev[data-disable="1"] {
    pointer-events: none;
    opacity: .3
}

.c-pages-tab .btn--go-next:hover,.c-pages-tab .btn--go-prev:hover {
    --distance: -4px
}

.c-pages-tab .btn--go-next:hover .pages-tab-link,.c-pages-tab .btn--go-prev:hover .pages-tab-link {
    background: transparent
}

.c-pages-tab .btn--go-prev .pages-tab-link .ic {
    transform: translateX(var(--distance))
}

.c-pages-tab .btn--go-next .pages-tab-link .ic {
    transform: translateX(calc(var(--distance)*-1))
}

.c-pages-tab .pages-tab-item[data-active] .pages-tab-link {
    color: #fff;
    border-radius: 8px;
    background: hsla(0,0%,95%,.1)
}

@media(max-width: 767.98px) {
    .c-pages-tab .btn--go-next .pages-tab-link .text,.c-pages-tab .btn--go-prev .pages-tab-link .text {
        display:none
    }

    .c-pages-tab .pages-tab-link {
        width: 36px
    }
}

.g-site-nav {
    --side-width: 140px;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    transition: .36s ease;
    transform: translateZ(0);
    pointer-events: none
}

.g-site-nav .m-body {
    height: var(--g-size-nav-height);
    transition: .36s ease;
    align-items: center;
    grid-template-columns: var(--side-width) 1fr var(--side-width)
}

.g-site-nav .m-logo {
    display: block;
    transition: .36s ease;
    pointer-events: auto;
    --u-width: var(--logo-width);
    --u-height: var(--logo-height);
    position: relative;
    overflow: hidden;
    width: 142px
}

.g-site-nav .m-logo>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-site-nav .m-logo>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-site-nav .m-logo>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-site-nav .m-logo:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.c-btn--open-fold-nav {
    --line-distance: 9px;
    --move-distance: 0px;
    position: relative;
    cursor: pointer;
    pointer-events: auto;
    align-items: center;
    justify-content: center;
    --u-width: 42px;
    width: var(--u-width);
    --u-height: 42px;
    height: var(--u-height)
}

.c-btn--open-fold-nav .btn--inner {
    position: relative;
    width: 28px;
    height: 2px;
    pointer-events: none
}

.c-btn--open-fold-nav .line {
    --delay-distance: 0.06s;
    --rotate: 0deg;
    position: absolute;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 4px
}

.c-btn--open-fold-nav .line:first-child {
    --delay: calc(var(--delay-distance)*0);
    top: calc(var(--line-distance)*-1);
    transform: rotate(var(--rotate))
}

.c-btn--open-fold-nav .line:nth-child(2) {
    --delay: calc(var(--delay-distance)*1);
    opacity: 1
}

.c-btn--open-fold-nav .line:nth-child(3) {
    --delay: calc(var(--delay-distance)*2);
    bottom: calc(var(--line-distance)*-1);
    transform: rotate(calc(var(--rotate)*-1))
}

.c-btn--open-fold-nav .line:after,.c-btn--open-fold-nav .line:before {
    content: "";
    transition: transform .65s cubic-bezier(.3,1,.3,1) var(--delay),background-color .2s ease,opacity .2s ease!important;
    background-color: currentcolor;
    position: absolute;
    inset: 0
}

.c-btn--open-fold-nav .line:before {
    transform: translateX(calc(var(--move-distance)))
}

.c-btn--open-fold-nav .line:after {
    transform: translateX(calc(-100% - 10px + var(--move-distance)))
}

.c-btn--open-fold-nav:hover {
    --move-distance: calc(100% + 10px)
}

.c-btn--close-fold-nav {
    --move-distance: 0px;
    position: absolute;
    top: 44px;
    right: 44px;
    cursor: pointer;
    transition: color .65s cubic-bezier(.52,.01,.16,1);
    pointer-events: auto;
    color: #737373;
    align-items: center;
    justify-content: center;
    --u-width: 42px;
    width: var(--u-width);
    --u-height: 42px;
    height: var(--u-height)
}

.c-btn--close-fold-nav .btn--inner {
    position: relative;
    width: 22px;
    height: 2px;
    pointer-events: none
}

.c-btn--close-fold-nav .line {
    --delay-distance: 0.06s;
    position: absolute;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 4px
}

.c-btn--close-fold-nav .line:first-child {
    --delay: calc(var(--delay-distance)*0);
    transform: rotate(45deg)
}

.c-btn--close-fold-nav .line:nth-child(2) {
    --delay: calc(var(--delay-distance)*2);
    transform: rotate(135deg)
}

.c-btn--close-fold-nav .line:after,.c-btn--close-fold-nav .line:before {
    content: "";
    transition: transform .65s cubic-bezier(.52,.01,.16,1) var(--delay);
    background-color: currentcolor;
    position: absolute;
    inset: 0
}

.c-btn--close-fold-nav .line:before {
    transform: translateX(calc(var(--move-distance)))
}

.c-btn--close-fold-nav .line:after {
    transform: translateX(calc(-100% - 20px + var(--move-distance)))
}

.c-btn--close-fold-nav:hover {
    --move-distance: calc(100% + 20px);
    color: #0f0f0f
}

.l-fold-panel {
    position: fixed;
    z-index: 1001;
    overflow: hidden;
    pointer-events: none;
    inset: 0
}

.g-site-nav--fold-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 328px;
    height: 100vh;
    transition: transform .36s ease;
    transform: translateX(100%);
    pointer-events: all;
    border-radius: 10px 0 0 10px;
    background: hsla(0,0%,100%,.8);
    box-shadow: 0 20px 24px -4px rgba(16,24,40,.03),0 8px 8px -4px rgba(16,24,40,.03);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px)
}

.g-site-nav--fold-panel .nav-list-group {
    padding: 44px 0;
    padding-top: 100px;
    padding-bottom: 300px
}

.g-site-nav--fold-panel .nav-item {
    margin-bottom: 26px;
    padding: 20px 0
}

.g-site-nav--fold-panel .nav-item:last-child {
    margin-bottom: 0
}

.g-site-nav--fold-panel .nav-item--inner {
    --color-1: #737373;
    --color-2: #737373;
    font-size: 15px;
    line-height: 200%;
    text-align: center
}

.g-site-nav--fold-panel .nav-item--inner .text {
    display: block;
    transition: .26s ease;
    color: transparent;
    background: linear-gradient(90deg,var(--color-1) 0,var(--color-2) 100%);
    -webkit-background-clip: text;
    background-clip: text
}

.g-site-nav--fold-panel .nav-item--inner[data-active] {
    --color-1: #1666eb!important;
    --color-2: #ad79cd!important
}

.g-body[data-has-scroll="1"] .g-site-nav {
    --g-size-nav-height: var(--g-size-nav-mini-height);
    background: hsla(0,0%,100%,.8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px)
}

.g-body[data-has-scroll="1"] .g-site-nav .m-logo {
    width: 80px
}

html.nav-fold-open .g-body .g-site-nav {
    background: hsla(0,0%,100%,0);
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}

html.nav-fold-open .g-body .g-site-nav--fold-panel {
    transform: translateX(0)
}

@media(max-width: 1679.98px) {
    .g-site-nav .m-logo {
        width:132px
    }
}

@media(max-width: 1559.98px) {
    .g-site-nav .m-logo {
        width:122px
    }
}

@media(max-width: 1439.98px) {
    .g-site-nav .m-logo {
        width:112px
    }
}

@media(max-width: 767.98px) {
    .c-btn--open-fold-nav {
        --line-distance:8px
    }

    .c-btn--open-fold-nav .line {
        transition: .26s ease
    }

    .c-btn--open-fold-nav .btn--inner {
        width: 24px
    }

    .g-site-nav .m-logo {
        width: 90px
    }

    .g-site-nav--fold-panel {
        visibility: hidden;
        width: 100%;
        transition: .36s ease;
        transform: none;
        opacity: 0;
        border-radius: 0
    }

    .g-body[data-has-scroll="1"] .g-site-nav .m-logo {
        width: 60px
    }

    html.nav-fold-open .g-site-nav .m-body {
        --g-size-nav-height: var(--g-size-nav-normal-height)
    }

    html.nav-fold-open .g-body[data-has-scroll="1"] .g-site-nav .m-logo {
        width: 90px
    }

    html.nav-fold-open .g-site-nav--fold-panel {
        visibility: visible;
        opacity: 1
    }

    html.nav-fold-open .c-btn--open-fold-nav {
        --line-distance: 0px
    }

    html.nav-fold-open .c-btn--open-fold-nav .line {
        --rotate: 45deg
    }

    html.nav-fold-open .c-btn--open-fold-nav .line:nth-child(2) {
        opacity: 0
    }

    .l-fold-panel {
        z-index: 999
    }

    .l-fold-panel .c-btn--close-fold-nav {
        display: none
    }

    .g-site-nav--fold-panel .nav-item--inner {
        font-size: 18px
    }

    .g-site-nav--fold-panel .nav-list-group {
        padding: 40px 0 100px
    }
}

@font-face {
    font-family: ueicon;
    src: url(../fonts/ueicon.eot);
    src: url(../fonts/ueicon.eot#iefix) format("embedded-opentype"),url(../fonts/ueicon.woff2) format("woff2"),url(../fonts/ueicon.woff) format("woff"),url(../fonts/ueicon.ttf) format("truetype"),url(../fonts/ueicon.svg#ueicon) format("svg")
}

[class*=" ueicon-"],[class^=ueicon-] {
    font-family: ueicon!important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

:root {
    --ueicon-apple: "";
    --ueicon-arrow-down: "";
    --ueicon-arrow-left: "";
    --ueicon-arrow-narrow-down: "";
    --ueicon-arrow-narrow-left: "";
    --ueicon-arrow-narrow-right: "";
    --ueicon-arrow-right: "";
    --ueicon-bilibili: "";
    --ueicon-check-circle: "";
    --ueicon-chevron-down: "";
    --ueicon-chevron-left: "";
    --ueicon-chevron-right: "";
    --ueicon-chevron-top: "";
    --ueicon-discord: "";
    --ueicon-dots: "";
    --ueicon-download: "";
    --ueicon-dribbble: "";
    --ueicon-eewu: "";
    --ueicon-email: "";
    --ueicon-facebook: "";
    --ueicon-github: "";
    --ueicon-globe: "";
    --ueicon-google: "";
    --ueicon-home: "";
    --ueicon-instagram: "";
    --ueicon-linked-in: "";
    --ueicon-loading-02: "";
    --ueicon-loading: "";
    --ueicon-long-arrow-top-right: "";
    --ueicon-mail-01: "";
    --ueicon-mark-pin: "";
    --ueicon-message: "";
    --ueicon-mini-app: "";
    --ueicon-nav: "";
    --ueicon-phone-call: "";
    --ueicon-phone: "";
    --ueicon-pinterest: "";
    --ueicon-player-fill: "";
    --ueicon-plus: "";
    --ueicon-qrcode: "";
    --ueicon-redbook: "";
    --ueicon-search: "";
    --ueicon-tiktok: "";
    --ueicon-tumblr: "";
    --ueicon-twitter: "";
    --ueicon-wechat: "";
    --ueicon-weibo: "";
    --ueicon-whatsapp: "";
    --ueicon-x-close: "";
    --ueicon-you-tube: "";
    --ueicon-zhihu: ""
}

.ueicon-apple:before {
    content: var(--ueicon-apple)
}

.ueicon-arrow-down:before {
    content: var(--ueicon-arrow-down)
}

.ueicon-arrow-left:before {
    content: var(--ueicon-arrow-left)
}

.ueicon-arrow-narrow-down:before {
    content: var(--ueicon-arrow-narrow-down)
}

.ueicon-arrow-narrow-left:before {
    content: var(--ueicon-arrow-narrow-left)
}

.ueicon-arrow-narrow-right:before {
    content: var(--ueicon-arrow-narrow-right)
}

.ueicon-arrow-right:before {
    content: var(--ueicon-arrow-right)
}

.ueicon-bilibili:before {
    content: var(--ueicon-bilibili)
}

.ueicon-check-circle:before {
    content: var(--ueicon-check-circle)
}

.ueicon-chevron-down:before {
    content: var(--ueicon-chevron-down)
}

.ueicon-chevron-left:before {
    content: var(--ueicon-chevron-left)
}

.ueicon-chevron-right:before {
    content: var(--ueicon-chevron-right)
}

.ueicon-chevron-top:before {
    content: var(--ueicon-chevron-top)
}

.ueicon-discord:before {
    content: var(--ueicon-discord)
}

.ueicon-dots:before {
    content: var(--ueicon-dots)
}

.ueicon-download:before {
    content: var(--ueicon-download)
}

.ueicon-dribbble:before {
    content: var(--ueicon-dribbble)
}

.ueicon-eewu:before {
    content: var(--ueicon-eewu)
}

.ueicon-email:before {
    content: var(--ueicon-email)
}

.ueicon-facebook:before {
    content: var(--ueicon-facebook)
}

.ueicon-github:before {
    content: var(--ueicon-github)
}

.ueicon-globe:before {
    content: var(--ueicon-globe)
}

.ueicon-google:before {
    content: var(--ueicon-google)
}

.ueicon-home:before {
    content: var(--ueicon-home)
}

.ueicon-instagram:before {
    content: var(--ueicon-instagram)
}

.ueicon-linked-in:before {
    content: var(--ueicon-linked-in)
}

.ueicon-loading-02:before {
    content: var(--ueicon-loading-02)
}

.ueicon-loading:before {
    content: var(--ueicon-loading)
}

.ueicon-long-arrow-top-right:before {
    content: var(--ueicon-long-arrow-top-right)
}

.ueicon-mail-01:before {
    content: var(--ueicon-mail-01)
}

.ueicon-mark-pin:before {
    content: var(--ueicon-mark-pin)
}

.ueicon-message:before {
    content: var(--ueicon-message)
}

.ueicon-mini-app:before {
    content: var(--ueicon-mini-app)
}

.ueicon-nav:before {
    content: var(--ueicon-nav)
}

.ueicon-phone-call:before {
    content: var(--ueicon-phone-call)
}

.ueicon-phone:before {
    content: var(--ueicon-phone)
}

.ueicon-pinterest:before {
    content: var(--ueicon-pinterest)
}

.ueicon-player-fill:before {
    content: var(--ueicon-player-fill)
}

.ueicon-plus:before {
    content: var(--ueicon-plus)
}

.ueicon-qrcode:before {
    content: var(--ueicon-qrcode)
}

.ueicon-redbook:before {
    content: var(--ueicon-redbook)
}

.ueicon-search:before {
    content: var(--ueicon-search)
}

.ueicon-tiktok:before {
    content: var(--ueicon-tiktok)
}

.ueicon-tumblr:before {
    content: var(--ueicon-tumblr)
}

.ueicon-twitter:before {
    content: var(--ueicon-twitter)
}

.ueicon-wechat:before {
    content: var(--ueicon-wechat)
}

.ueicon-weibo:before {
    content: var(--ueicon-weibo)
}

.ueicon-whatsapp:before {
    content: var(--ueicon-whatsapp)
}

.ueicon-x-close:before {
    content: var(--ueicon-x-close)
}

.ueicon-you-tube:before {
    content: var(--ueicon-you-tube)
}

.ueicon-zhihu:before {
    content: var(--ueicon-zhihu)
}

.js-split-text {
    --shadow-text-color: rgba(0,0,0,.2)
}

.js-split-text[data-is-lighter=true] {
    --shadow-text-color: hsla(0,0%,100%,.2)
}

.js-split-text .js-split-line-wrapper {
    perspective: 1000px;
    transform-style: preserve-3d
}

.js-split-text .js-split-line {
    --clip-path-progress: 100%;
    transform-origin: center center -2em!important;
    white-space: nowrap;
    clip-path: polygon(0 0,100% 0,100% 110%,0 110%)
}

.js-split-text .js-split-word {
    position: relative
}

.js-split-text[data-effect-type=effect-3] .js-split-line {
    transform: rotateX(-50deg) rotateY(13deg) rotate(13deg);
    opacity: 0
}

.js-split-text[data-effect-type=effect-4] .js-split-word {
    position: relative
}

.js-split-text[data-effect-type=effect-4] .js-split-word:after {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    content: attr(data-text);
    color: var(--shadow-text-color)
}

@font-face {
    font-family: swiper-icons;
    src: url("../fonts/0353c330418c4c278542bbe0cba96e3b.woff");
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function,initial);
    box-sizing: initial
}

.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper {
    transform: translateZ(0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform,height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide {
    transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper:before {
    content: "";
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop:always}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start:var(--swiper-centered-offset-before)}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper: before {
    height:100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start:var(--swiper-centered-offset-before)}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper: before {
    width:100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0,0,0,.15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(270deg,rgba(0,0,0,.5),transparent)
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(90deg,rgba(0,0,0,.5),transparent)
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(0deg,rgba(0,0,0,.5),transparent)
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(180deg,rgba(0,0,0,.5),transparent)
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color,var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s linear infinite
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-creative .swiper-slide {
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform,opacity,height
}

.tippy-box[data-animation=fade][data-state=hidden] {
    opacity: 0
}

[data-tippy-root] {
    max-width: calc(100vw - 10px)
}

.tippy-box {
    position: relative;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    outline: 0;
    transition-property: transform,visibility,opacity
}

.tippy-box[data-placement^=top]>.tippy-arrow {
    bottom: 0
}

.tippy-box[data-placement^=top]>.tippy-arrow:before {
    bottom: -7px;
    left: 0;
    border-width: 8px 8px 0;
    border-top-color: initial;
    transform-origin: center top
}

.tippy-box[data-placement^=bottom]>.tippy-arrow {
    top: 0
}

.tippy-box[data-placement^=bottom]>.tippy-arrow:before {
    top: -7px;
    left: 0;
    border-width: 0 8px 8px;
    border-bottom-color: initial;
    transform-origin: center bottom
}

.tippy-box[data-placement^=left]>.tippy-arrow {
    right: 0
}

.tippy-box[data-placement^=left]>.tippy-arrow:before {
    border-width: 8px 0 8px 8px;
    border-left-color: initial;
    right: -7px;
    transform-origin: center left
}

.tippy-box[data-placement^=right]>.tippy-arrow {
    left: 0
}

.tippy-box[data-placement^=right]>.tippy-arrow:before {
    left: -7px;
    border-width: 8px 8px 8px 0;
    border-right-color: initial;
    transform-origin: center right
}

.tippy-box[data-inertia][data-state=visible] {
    transition-timing-function: cubic-bezier(.54,1.5,.38,1.11)
}

.tippy-arrow {
    width: 16px;
    height: 16px;
    color: #333
}

.tippy-arrow:before {
    content: "";
    position: absolute;
    border-color: transparent;
    border-style: solid
}

.tippy-content {
    position: relative;
    padding: 5px 9px;
    z-index: 1
}

/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */
:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1
}

.animate__animated {
    animation-duration: 1s;
    animation-duration: var(--animate-duration);
    animation-fill-mode: both
}

.animate__animated.animate__infinite {
    animation-iteration-count: infinite
}

.animate__animated.animate__repeat-1 {
    animation-iteration-count: 1;
    animation-iteration-count: var(--animate-repeat)
}

.animate__animated.animate__repeat-2 {
    animation-iteration-count: 2;
    animation-iteration-count: calc(var(--animate-repeat)*2)
}

.animate__animated.animate__repeat-3 {
    animation-iteration-count: 3;
    animation-iteration-count: calc(var(--animate-repeat)*3)
}

.animate__animated.animate__delay-1s {
    animation-delay: 1s;
    animation-delay: var(--animate-delay)
}

.animate__animated.animate__delay-2s {
    animation-delay: 2s;
    animation-delay: calc(var(--animate-delay)*2)
}

.animate__animated.animate__delay-3s {
    animation-delay: 3s;
    animation-delay: calc(var(--animate-delay)*3)
}

.animate__animated.animate__delay-4s {
    animation-delay: 4s;
    animation-delay: calc(var(--animate-delay)*4)
}

.animate__animated.animate__delay-5s {
    animation-delay: 5s;
    animation-delay: calc(var(--animate-delay)*5)
}

.animate__animated.animate__faster {
    animation-duration: .5s;
    animation-duration: calc(var(--animate-duration)/2)
}

.animate__animated.animate__fast {
    animation-duration: .8s;
    animation-duration: calc(var(--animate-duration)*.8)
}

.animate__animated.animate__slow {
    animation-duration: 2s;
    animation-duration: calc(var(--animate-duration)*2)
}

.animate__animated.animate__slower {
    animation-duration: 3s;
    animation-duration: calc(var(--animate-duration)*3)
}

@media (prefers-reduced-motion:reduce),print {
    .animate__animated {
        animation-duration: 1ms!important;
        transition-duration: 1ms!important;
        animation-iteration-count: 1!important
    }

    .animate__animated[class*=Out] {
        opacity: 0
    }
}

@keyframes bounce {
    0%,20%,53%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
        transform: translateZ(0)
    }

    40%,43% {
        animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        transform: translate3d(0,-30px,0) scaleY(1.1)
    }

    70% {
        animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        transform: translate3d(0,-15px,0) scaleY(1.05)
    }

    80% {
        transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transform: translateZ(0) scaleY(.95)
    }

    90% {
        transform: translate3d(0,-4px,0) scaleY(1.02)
    }
}

.animate__bounce {
    animation-name: bounce;
    transform-origin: center bottom
}

@keyframes flash {
    0%,50%,to {
        opacity: 1
    }

    25%,75% {
        opacity: 0
    }
}

.animate__flash {
    animation-name: flash
}

@keyframes pulse {
    0% {
        transform: scaleX(1)
    }

    50% {
        transform: scale3d(1.05,1.05,1.05)
    }

    to {
        transform: scaleX(1)
    }
}

.animate__pulse {
    animation-name: pulse;
    animation-timing-function: ease-in-out
}

@keyframes rubberBand {
    0% {
        transform: scaleX(1)
    }

    30% {
        transform: scale3d(1.25,.75,1)
    }

    40% {
        transform: scale3d(.75,1.25,1)
    }

    50% {
        transform: scale3d(1.15,.85,1)
    }

    65% {
        transform: scale3d(.95,1.05,1)
    }

    75% {
        transform: scale3d(1.05,.95,1)
    }

    to {
        transform: scaleX(1)
    }
}

.animate__rubberBand {
    animation-name: rubberBand
}

@keyframes shakeX {
    0%,to {
        transform: translateZ(0)
    }

    10%,30%,50%,70%,90% {
        transform: translate3d(-10px,0,0)
    }

    20%,40%,60%,80% {
        transform: translate3d(10px,0,0)
    }
}

.animate__shakeX {
    animation-name: shakeX
}

@keyframes shakeY {
    0%,to {
        transform: translateZ(0)
    }

    10%,30%,50%,70%,90% {
        transform: translate3d(0,-10px,0)
    }

    20%,40%,60%,80% {
        transform: translate3d(0,10px,0)
    }
}

.animate__shakeY {
    animation-name: shakeY
}

@keyframes headShake {
    0% {
        transform: translateX(0)
    }

    6.5% {
        transform: translateX(-6px) rotateY(-9deg)
    }

    18.5% {
        transform: translateX(5px) rotateY(7deg)
    }

    31.5% {
        transform: translateX(-3px) rotateY(-5deg)
    }

    43.5% {
        transform: translateX(2px) rotateY(3deg)
    }

    50% {
        transform: translateX(0)
    }
}

.animate__headShake {
    animation-timing-function: ease-in-out;
    animation-name: headShake
}

@keyframes swing {
    20% {
        transform: rotate(15deg)
    }

    40% {
        transform: rotate(-10deg)
    }

    60% {
        transform: rotate(5deg)
    }

    80% {
        transform: rotate(-5deg)
    }

    to {
        transform: rotate(0deg)
    }
}

.animate__swing {
    transform-origin: top center;
    animation-name: swing
}

@keyframes tada {
    0% {
        transform: scaleX(1)
    }

    10%,20% {
        transform: scale3d(.9,.9,.9) rotate(-3deg)
    }

    30%,50%,70%,90% {
        transform: scale3d(1.1,1.1,1.1) rotate(3deg)
    }

    40%,60%,80% {
        transform: scale3d(1.1,1.1,1.1) rotate(-3deg)
    }

    to {
        transform: scaleX(1)
    }
}

.animate__tada {
    animation-name: tada
}

@keyframes wobble {
    0% {
        transform: translateZ(0)
    }

    15% {
        transform: translate3d(-25%,0,0) rotate(-5deg)
    }

    30% {
        transform: translate3d(20%,0,0) rotate(3deg)
    }

    45% {
        transform: translate3d(-15%,0,0) rotate(-3deg)
    }

    60% {
        transform: translate3d(10%,0,0) rotate(2deg)
    }

    75% {
        transform: translate3d(-5%,0,0) rotate(-1deg)
    }

    to {
        transform: translateZ(0)
    }
}

.animate__wobble {
    animation-name: wobble
}

@keyframes jello {
    0%,11.1%,to {
        transform: translateZ(0)
    }

    22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }

    77.7% {
        transform: skewX(.390625deg) skewY(.390625deg)
    }

    88.8% {
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}

.animate__jello {
    animation-name: jello;
    transform-origin: center
}

@keyframes heartBeat {
    0% {
        transform: scale(1)
    }

    14% {
        transform: scale(1.3)
    }

    28% {
        transform: scale(1)
    }

    42% {
        transform: scale(1.3)
    }

    70% {
        transform: scale(1)
    }
}

.animate__heartBeat {
    animation-name: heartBeat;
    animation-duration: 1.3s;
    animation-duration: calc(var(--animate-duration)*1.3);
    animation-timing-function: ease-in-out
}

@keyframes backInDown {
    0% {
        transform: translateY(-1200px) scale(.7);
        opacity: .7
    }

    80% {
        transform: translateY(0) scale(.7);
        opacity: .7
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.animate__backInDown {
    animation-name: backInDown
}

@keyframes backInLeft {
    0% {
        transform: translateX(-2000px) scale(.7);
        opacity: .7
    }

    80% {
        transform: translateX(0) scale(.7);
        opacity: .7
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.animate__backInLeft {
    animation-name: backInLeft
}

@keyframes backInRight {
    0% {
        transform: translateX(2000px) scale(.7);
        opacity: .7
    }

    80% {
        transform: translateX(0) scale(.7);
        opacity: .7
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.animate__backInRight {
    animation-name: backInRight
}

@keyframes backInUp {
    0% {
        transform: translateY(1200px) scale(.7);
        opacity: .7
    }

    80% {
        transform: translateY(0) scale(.7);
        opacity: .7
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.animate__backInUp {
    animation-name: backInUp
}

@keyframes backOutDown {
    0% {
        transform: scale(1);
        opacity: 1
    }

    20% {
        transform: translateY(0) scale(.7);
        opacity: .7
    }

    to {
        transform: translateY(700px) scale(.7);
        opacity: .7
    }
}

.animate__backOutDown {
    animation-name: backOutDown
}

@keyframes backOutLeft {
    0% {
        transform: scale(1);
        opacity: 1
    }

    20% {
        transform: translateX(0) scale(.7);
        opacity: .7
    }

    to {
        transform: translateX(-2000px) scale(.7);
        opacity: .7
    }
}

.animate__backOutLeft {
    animation-name: backOutLeft
}

@keyframes backOutRight {
    0% {
        transform: scale(1);
        opacity: 1
    }

    20% {
        transform: translateX(0) scale(.7);
        opacity: .7
    }

    to {
        transform: translateX(2000px) scale(.7);
        opacity: .7
    }
}

.animate__backOutRight {
    animation-name: backOutRight
}

@keyframes backOutUp {
    0% {
        transform: scale(1);
        opacity: 1
    }

    20% {
        transform: translateY(0) scale(.7);
        opacity: .7
    }

    to {
        transform: translateY(-700px) scale(.7);
        opacity: .7
    }
}

.animate__backOutUp {
    animation-name: backOutUp
}

@keyframes bounceIn {
    0%,20%,40%,60%,80%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }

    20% {
        transform: scale3d(1.1,1.1,1.1)
    }

    40% {
        transform: scale3d(.9,.9,.9)
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03,1.03,1.03)
    }

    80% {
        transform: scale3d(.97,.97,.97)
    }

    to {
        opacity: 1;
        transform: scaleX(1)
    }
}

.animate__bounceIn {
    animation-duration: .75s;
    animation-duration: calc(var(--animate-duration)*.75);
    animation-name: bounceIn
}

@keyframes bounceInDown {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0,-3000px,0) scaleY(3)
    }

    60% {
        opacity: 1;
        transform: translate3d(0,25px,0) scaleY(.9)
    }

    75% {
        transform: translate3d(0,-10px,0) scaleY(.95)
    }

    90% {
        transform: translate3d(0,5px,0) scaleY(.985)
    }

    to {
        transform: translateZ(0)
    }
}

.animate__bounceInDown {
    animation-name: bounceInDown
}

@keyframes bounceInLeft {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px,0,0) scaleX(3)
    }

    60% {
        opacity: 1;
        transform: translate3d(25px,0,0) scaleX(1)
    }

    75% {
        transform: translate3d(-10px,0,0) scaleX(.98)
    }

    90% {
        transform: translate3d(5px,0,0) scaleX(.995)
    }

    to {
        transform: translateZ(0)
    }
}

.animate__bounceInLeft {
    animation-name: bounceInLeft
}

@keyframes bounceInRight {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(3000px,0,0) scaleX(3)
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px,0,0) scaleX(1)
    }

    75% {
        transform: translate3d(10px,0,0) scaleX(.98)
    }

    90% {
        transform: translate3d(-5px,0,0) scaleX(.995)
    }

    to {
        transform: translateZ(0)
    }
}

.animate__bounceInRight {
    animation-name: bounceInRight
}

@keyframes bounceInUp {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0,3000px,0) scaleY(5)
    }

    60% {
        opacity: 1;
        transform: translate3d(0,-20px,0) scaleY(.9)
    }

    75% {
        transform: translate3d(0,10px,0) scaleY(.95)
    }

    90% {
        transform: translate3d(0,-5px,0) scaleY(.985)
    }

    to {
        transform: translateZ(0)
    }
}

.animate__bounceInUp {
    animation-name: bounceInUp
}

@keyframes bounceOut {
    20% {
        transform: scale3d(.9,.9,.9)
    }

    50%,55% {
        opacity: 1;
        transform: scale3d(1.1,1.1,1.1)
    }

    to {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }
}

.animate__bounceOut {
    animation-duration: .75s;
    animation-duration: calc(var(--animate-duration)*.75);
    animation-name: bounceOut
}

@keyframes bounceOutDown {
    20% {
        transform: translate3d(0,10px,0) scaleY(.985)
    }

    40%,45% {
        opacity: 1;
        transform: translate3d(0,-20px,0) scaleY(.9)
    }

    to {
        opacity: 0;
        transform: translate3d(0,2000px,0) scaleY(3)
    }
}

.animate__bounceOutDown {
    animation-name: bounceOutDown
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px,0,0) scaleX(.9)
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px,0,0) scaleX(2)
    }
}

.animate__bounceOutLeft {
    animation-name: bounceOutLeft
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px,0,0) scaleX(.9)
    }

    to {
        opacity: 0;
        transform: translate3d(2000px,0,0) scaleX(2)
    }
}

.animate__bounceOutRight {
    animation-name: bounceOutRight
}

@keyframes bounceOutUp {
    20% {
        transform: translate3d(0,-10px,0) scaleY(.985)
    }

    40%,45% {
        opacity: 1;
        transform: translate3d(0,20px,0) scaleY(.9)
    }

    to {
        opacity: 0;
        transform: translate3d(0,-2000px,0) scaleY(3)
    }
}

.animate__bounceOutUp {
    animation-name: bounceOutUp
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.animate__fadeIn {
    animation-name: fadeIn
}

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

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.animate__fadeInDown {
    animation-name: fadeInDown
}

@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        transform: translate3d(0,-2000px,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.animate__fadeInDownBig {
    animation-name: fadeInDownBig
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%,0,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.animate__fadeInLeft {
    animation-name: fadeInLeft
}

@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        transform: translate3d(-2000px,0,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.animate__fadeInLeftBig {
    animation-name: fadeInLeftBig
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(100%,0,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.animate__fadeInRight {
    animation-name: fadeInRight
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        transform: translate3d(2000px,0,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.animate__fadeInRightBig {
    animation-name: fadeInRightBig
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.animate__fadeInUp {
    animation-name: fadeInUp
}

@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        transform: translate3d(0,2000px,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.animate__fadeInUpBig {
    animation-name: fadeInUpBig
}

@keyframes fadeInTopLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%,-100%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.animate__fadeInTopLeft {
    animation-name: fadeInTopLeft
}

@keyframes fadeInTopRight {
    0% {
        opacity: 0;
        transform: translate3d(100%,-100%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.animate__fadeInTopRight {
    animation-name: fadeInTopRight
}

@keyframes fadeInBottomLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%,100%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.animate__fadeInBottomLeft {
    animation-name: fadeInBottomLeft
}

@keyframes fadeInBottomRight {
    0% {
        opacity: 0;
        transform: translate3d(100%,100%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.animate__fadeInBottomRight {
    animation-name: fadeInBottomRight
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.animate__fadeOut {
    animation-name: fadeOut
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }
}

.animate__fadeOutDown {
    animation-name: fadeOutDown
}

@keyframes fadeOutDownBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0,2000px,0)
    }
}

.animate__fadeOutDownBig {
    animation-name: fadeOutDownBig
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(-100%,0,0)
    }
}

.animate__fadeOutLeft {
    animation-name: fadeOutLeft
}

@keyframes fadeOutLeftBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px,0,0)
    }
}

.animate__fadeOutLeftBig {
    animation-name: fadeOutLeftBig
}

@keyframes fadeOutRight {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(100%,0,0)
    }
}

.animate__fadeOutRight {
    animation-name: fadeOutRight
}

@keyframes fadeOutRightBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(2000px,0,0)
    }
}

.animate__fadeOutRightBig {
    animation-name: fadeOutRightBig
}

@keyframes fadeOutUp {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0,-100%,0)
    }
}

.animate__fadeOutUp {
    animation-name: fadeOutUp
}

@keyframes fadeOutUpBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0,-2000px,0)
    }
}

.animate__fadeOutUpBig {
    animation-name: fadeOutUpBig
}

@keyframes fadeOutTopLeft {
    0% {
        opacity: 1;
        transform: translateZ(0)
    }

    to {
        opacity: 0;
        transform: translate3d(-100%,-100%,0)
    }
}

.animate__fadeOutTopLeft {
    animation-name: fadeOutTopLeft
}

@keyframes fadeOutTopRight {
    0% {
        opacity: 1;
        transform: translateZ(0)
    }

    to {
        opacity: 0;
        transform: translate3d(100%,-100%,0)
    }
}

.animate__fadeOutTopRight {
    animation-name: fadeOutTopRight
}

@keyframes fadeOutBottomRight {
    0% {
        opacity: 1;
        transform: translateZ(0)
    }

    to {
        opacity: 0;
        transform: translate3d(100%,100%,0)
    }
}

.animate__fadeOutBottomRight {
    animation-name: fadeOutBottomRight
}

@keyframes fadeOutBottomLeft {
    0% {
        opacity: 1;
        transform: translateZ(0)
    }

    to {
        opacity: 0;
        transform: translate3d(-100%,100%,0)
    }
}

.animate__fadeOutBottomLeft {
    animation-name: fadeOutBottomLeft
}

@keyframes flip {
    0% {
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
        animation-timing-function: ease-out
    }

    40% {
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
        animation-timing-function: ease-out
    }

    50% {
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
        animation-timing-function: ease-in
    }

    80% {
        transform: perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);
        animation-timing-function: ease-in
    }

    to {
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
        animation-timing-function: ease-in
    }
}

.animate__animated.animate__flip {
    backface-visibility: visible;
    animation-name: flip
}

@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotateX(-20deg);
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        transform: perspective(400px)
    }
}

.animate__flipInX {
    backface-visibility: visible!important;
    animation-name: flipInX
}

@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotateY(-20deg);
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotateY(10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotateY(-5deg)
    }

    to {
        transform: perspective(400px)
    }
}

.animate__flipInY {
    backface-visibility: visible!important;
    animation-name: flipInY
}

@keyframes flipOutX {
    0% {
        transform: perspective(400px)
    }

    30% {
        transform: perspective(400px) rotateX(-20deg);
        opacity: 1
    }

    to {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

.animate__flipOutX {
    animation-duration: .75s;
    animation-duration: calc(var(--animate-duration)*.75);
    animation-name: flipOutX;
    backface-visibility: visible!important
}

@keyframes flipOutY {
    0% {
        transform: perspective(400px)
    }

    30% {
        transform: perspective(400px) rotateY(-15deg);
        opacity: 1
    }

    to {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

.animate__flipOutY {
    animation-duration: .75s;
    animation-duration: calc(var(--animate-duration)*.75);
    backface-visibility: visible!important;
    animation-name: flipOutY
}

@keyframes lightSpeedInRight {
    0% {
        transform: translate3d(100%,0,0) skewX(-30deg);
        opacity: 0
    }

    60% {
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        transform: skewX(-5deg)
    }

    to {
        transform: translateZ(0)
    }
}

.animate__lightSpeedInRight {
    animation-name: lightSpeedInRight;
    animation-timing-function: ease-out
}

@keyframes lightSpeedInLeft {
    0% {
        transform: translate3d(-100%,0,0) skewX(30deg);
        opacity: 0
    }

    60% {
        transform: skewX(-20deg);
        opacity: 1
    }

    80% {
        transform: skewX(5deg)
    }

    to {
        transform: translateZ(0)
    }
}

.animate__lightSpeedInLeft {
    animation-name: lightSpeedInLeft;
    animation-timing-function: ease-out
}

@keyframes lightSpeedOutRight {
    0% {
        opacity: 1
    }

    to {
        transform: translate3d(100%,0,0) skewX(30deg);
        opacity: 0
    }
}

.animate__lightSpeedOutRight {
    animation-name: lightSpeedOutRight;
    animation-timing-function: ease-in
}

@keyframes lightSpeedOutLeft {
    0% {
        opacity: 1
    }

    to {
        transform: translate3d(-100%,0,0) skewX(-30deg);
        opacity: 0
    }
}

.animate__lightSpeedOutLeft {
    animation-name: lightSpeedOutLeft;
    animation-timing-function: ease-in
}

@keyframes rotateIn {
    0% {
        transform: rotate(-200deg);
        opacity: 0
    }

    to {
        transform: translateZ(0);
        opacity: 1
    }
}

.animate__rotateIn {
    animation-name: rotateIn;
    transform-origin: center
}

@keyframes rotateInDownLeft {
    0% {
        transform: rotate(-45deg);
        opacity: 0
    }

    to {
        transform: translateZ(0);
        opacity: 1
    }
}

.animate__rotateInDownLeft {
    animation-name: rotateInDownLeft;
    transform-origin: left bottom
}

@keyframes rotateInDownRight {
    0% {
        transform: rotate(45deg);
        opacity: 0
    }

    to {
        transform: translateZ(0);
        opacity: 1
    }
}

.animate__rotateInDownRight {
    animation-name: rotateInDownRight;
    transform-origin: right bottom
}

@keyframes rotateInUpLeft {
    0% {
        transform: rotate(45deg);
        opacity: 0
    }

    to {
        transform: translateZ(0);
        opacity: 1
    }
}

.animate__rotateInUpLeft {
    animation-name: rotateInUpLeft;
    transform-origin: left bottom
}

@keyframes rotateInUpRight {
    0% {
        transform: rotate(-90deg);
        opacity: 0
    }

    to {
        transform: translateZ(0);
        opacity: 1
    }
}

.animate__rotateInUpRight {
    animation-name: rotateInUpRight;
    transform-origin: right bottom
}

@keyframes rotateOut {
    0% {
        opacity: 1
    }

    to {
        transform: rotate(200deg);
        opacity: 0
    }
}

.animate__rotateOut {
    animation-name: rotateOut;
    transform-origin: center
}

@keyframes rotateOutDownLeft {
    0% {
        opacity: 1
    }

    to {
        transform: rotate(45deg);
        opacity: 0
    }
}

.animate__rotateOutDownLeft {
    animation-name: rotateOutDownLeft;
    transform-origin: left bottom
}

@keyframes rotateOutDownRight {
    0% {
        opacity: 1
    }

    to {
        transform: rotate(-45deg);
        opacity: 0
    }
}

.animate__rotateOutDownRight {
    animation-name: rotateOutDownRight;
    transform-origin: right bottom
}

@keyframes rotateOutUpLeft {
    0% {
        opacity: 1
    }

    to {
        transform: rotate(-45deg);
        opacity: 0
    }
}

.animate__rotateOutUpLeft {
    animation-name: rotateOutUpLeft;
    transform-origin: left bottom
}

@keyframes rotateOutUpRight {
    0% {
        opacity: 1
    }

    to {
        transform: rotate(90deg);
        opacity: 0
    }
}

.animate__rotateOutUpRight {
    animation-name: rotateOutUpRight;
    transform-origin: right bottom
}

@keyframes hinge {
    0% {
        animation-timing-function: ease-in-out
    }

    20%,60% {
        transform: rotate(80deg);
        animation-timing-function: ease-in-out
    }

    40%,80% {
        transform: rotate(60deg);
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    to {
        transform: translate3d(0,700px,0);
        opacity: 0
    }
}

.animate__hinge {
    animation-duration: 2s;
    animation-duration: calc(var(--animate-duration)*2);
    animation-name: hinge;
    transform-origin: top left
}

@keyframes jackInTheBox {
    0% {
        opacity: 0;
        transform: scale(.1) rotate(30deg);
        transform-origin: center bottom
    }

    50% {
        transform: rotate(-10deg)
    }

    70% {
        transform: rotate(3deg)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.animate__jackInTheBox {
    animation-name: jackInTheBox
}

@keyframes rollIn {
    0% {
        opacity: 0;
        transform: translate3d(-100%,0,0) rotate(-120deg)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.animate__rollIn {
    animation-name: rollIn
}

@keyframes rollOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(100%,0,0) rotate(120deg)
    }
}

.animate__rollOut {
    animation-name: rollOut
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}

.animate__zoomIn {
    animation-name: zoomIn
}

@keyframes zoomInDown {
    0% {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

.animate__zoomInDown {
    animation-name: zoomInDown
}

@keyframes zoomInLeft {
    0% {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

.animate__zoomInLeft {
    animation-name: zoomInLeft
}

@keyframes zoomInRight {
    0% {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(1000px,0,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

.animate__zoomInRight {
    animation-name: zoomInRight
}

@keyframes zoomInUp {
    0% {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

.animate__zoomInUp {
    animation-name: zoomInUp
}

@keyframes zoomOut {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }

    to {
        opacity: 0
    }
}

.animate__zoomOut {
    animation-name: zoomOut
}

@keyframes zoomOutDown {
    40% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    to {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(0,2000px,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

.animate__zoomOutDown {
    animation-name: zoomOutDown;
    transform-origin: center bottom
}

@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(42px,0,0)
    }

    to {
        opacity: 0;
        transform: scale(.1) translate3d(-2000px,0,0)
    }
}

.animate__zoomOutLeft {
    animation-name: zoomOutLeft;
    transform-origin: left center
}

@keyframes zoomOutRight {
    40% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(-42px,0,0)
    }

    to {
        opacity: 0;
        transform: scale(.1) translate3d(2000px,0,0)
    }
}

.animate__zoomOutRight {
    animation-name: zoomOutRight;
    transform-origin: right center
}

@keyframes zoomOutUp {
    40% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    to {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

.animate__zoomOutUp {
    animation-name: zoomOutUp;
    transform-origin: center bottom
}

@keyframes slideInDown {
    0% {
        transform: translate3d(0,-100%,0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

.animate__slideInDown {
    animation-name: slideInDown
}

@keyframes slideInLeft {
    0% {
        transform: translate3d(-100%,0,0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

.animate__slideInLeft {
    animation-name: slideInLeft
}

@keyframes slideInRight {
    0% {
        transform: translate3d(100%,0,0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

.animate__slideInRight {
    animation-name: slideInRight
}

@keyframes slideInUp {
    0% {
        transform: translate3d(0,100%,0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

.animate__slideInUp {
    animation-name: slideInUp
}

@keyframes slideOutDown {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0,100%,0)
    }
}

.animate__slideOutDown {
    animation-name: slideOutDown
}

@keyframes slideOutLeft {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(-100%,0,0)
    }
}

.animate__slideOutLeft {
    animation-name: slideOutLeft
}

@keyframes slideOutRight {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(100%,0,0)
    }
}

.animate__slideOutRight {
    animation-name: slideOutRight
}

@keyframes slideOutUp {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0,-100%,0)
    }
}

.animate__slideOutUp {
    animation-name: slideOutUp
}

.enter-animate {
    visibility: hidden;
    animation-name: fadeInUp
}

.g-site-map {
    -webkit-clip-path: inset(0);
    clip-path: inset(0)
}

.g-site-map .m-body {
    padding-top: 60px;
    padding-bottom: 145px
}

.g-site-map .m-body>.state--pos-left {
    margin-right: auto;
    gap: 75px
}

.g-site-map .m-body>.state--pos-right {
    margin-left: 99px
}

.g-site-map .logo-box {
    --u-width: var(--logo-width);
    --u-height: var(--logo-height);
    position: relative;
    overflow: hidden;
    width: 151px
}

.g-site-map .logo-box>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-site-map .logo-box>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-site-map .logo-box>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-site-map .logo-box:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-site-map .site-map {
    gap: 33px
}

.g-site-map .site-map .nav-link {
    font-size: 15px;
    font-weight: 500;
    font-style: normal;
    line-height: 200%;
    position: relative;
    transition: .36s ease;
    color: var(--text-gray-500,#737373)
}

.g-site-map .site-map .nav-link:hover,.g-site-map .site-map .nav-link[data-active="1"] {
    color: var(--text-gray-800,#292929)
}

.g-site-map .company-info {
    padding-top: 30px;
    gap: 0 40px
}

.g-site-map .company-info .info-item {
    gap: 2px;
    --draw-line-height: 2px;
    --draw-duration: 0.6s
}

.g-site-map .company-info .info-item:hover span {
    background-position: 0 100%;
    background-size: 100% var(--draw-line-height)
}

.g-site-map .company-info .info-item span {
    transition: background-size var(--draw-duration) cubic-bezier(.2,.75,.5,1);
    background-image: linear-gradient(90deg,currentcolor 0,currentcolor);
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: 0 var(--draw-line-height)
}

.g-site-map .company-info .info-title {
    font-size: 15px;
    font-weight: 500;
    font-style: normal;
    line-height: 200%;
    color: var(--text-gray-500,#737373)
}

.g-site-map .company-info .info-value {
    font-size: 15px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.3333333333em;
    color: var(--text-gray-800,#292929)
}

.g-site-map .social-group .group-head {
    font-size: 15px;
    font-weight: 500;
    font-style: normal;
    line-height: 200%;
    margin-bottom: 14px;
    color: var(--text-gray-600,#525252)
}

.g-site-map .social-group .group-body {
    font-size: 18px;
    line-height: 1;
    gap: 14px
}

.g-site-map .social-group .social-item {
    position: relative;
    overflow: hidden;
    transition: .26s ease;
    color: var(--text-gray-600,#525252);
    --u-size: 42px;
    width: var(--u-size);
    height: var(--u-size);
    border-radius: 50%;
    --u-color: #fff;
    background-color: var(--u-color)
}

.g-site-map .social-group .social-item:after {
    content: "";
    transition: .26s ease;
    opacity: 0;
    background: linear-gradient(90deg,#1666eb,#ad79cd);
    position: absolute;
    inset: 0
}

.g-site-map .social-group .social-item .ic {
    position: relative;
    z-index: 10
}

.g-site-map .social-group .social-item:hover {
    color: #fff
}

.g-site-map .social-group .social-item:hover:after {
    opacity: 1
}

.g-site-map .m-footer {
    padding-top: 20px;
    padding-bottom: 30px;
    border-top: 1px solid rgba(0,0,0,.1)
}

.g-site-map .copyright {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3846153846em;
    color: var(--text-gray-800,#292929)
}

.g-site-map .copyright .copyright-info {
    gap: 6px
}

.g-site-map .copyright .link {
    transition: .26s ease;
    text-decoration: underline
}

.g-site-map .copyright .link-ga .ic-gongan {
    width: 20px;
    margin-right: 6px;
    --u-width: 20;
    --u-height: 20;
    position: relative;
    overflow: hidden;
    width: 100%
}

.g-site-map .copyright .link-ga .ic-gongan>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-site-map .copyright .link-ga .ic-gongan>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-site-map .copyright .link-ga .ic-gongan>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-site-map .copyright .link-ga .ic-gongan:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-site-map .copyright .author path {
    fill: currentcolor
}

@media(max-width: 1679.98px) {
    .g-site-map .logo-box {
        width:141px
    }
}

@media(max-width: 1559.98px) {
    .g-site-map .logo-box {
        width:131px
    }
}

@media(max-width: 1439.98px) {
    .g-site-map .m-body {
        display:grid;
        padding-bottom: 105px;
        gap: 20px;
        grid-template-columns: repeat(2,1fr)
    }

    .g-site-map .m-body>.state--pos-left {
        grid-area: 1/1/2/3
    }

    .g-site-map .m-body>.state--pos-center,.g-site-map .m-body>.state--pos-right {
        display: flex;
        margin: 0;
        justify-content: flex-start
    }
}

@media(max-width: 767.98px) {
    .g-site-map .copyright {
        flex-direction:column
    }

    .g-site-map .copyright .copyright-info {
        text-align: center;
        gap: 10px 0;
        grid-auto-flow: row;
        grid-template-columns: repeat(2,minmax(0,1fr));
        justify-content: center
    }

    .g-site-map .copyright .copyright-info .author {
        grid-area: 1 span/2 span;
        justify-content: center
    }

    .g-site-map .logo-box {
        width: 90px
    }

    .g-site-map .m-body>.state--pos-left {
        display: block;
        grid-area: initial
    }

    .g-site-map .m-body>.state--pos-left .site-map-area {
        margin-top: 40px
    }

    .g-site-map .m-body {
        display: block;
        padding-top: 50px;
        padding-bottom: 50px
    }

    .g-site-map .company-info {
        padding-bottom: 40px;
        gap: 6px;
        grid-template-columns: 1fr
    }

    .g-site-map .site-map {
        justify-content: flex-start
    }

    .g-site-map .company-info .info-item {
        --draw-line-height: 1px
    }
}

.g-body[data-page-name=aboutUs] .js-split-line {
    -webkit-clip-path: inset(-50% 0 -10% 0);
    clip-path: inset(-50% 0 -10% 0)
}

.g-body[data-page-name=aboutUs] .m-intro {
    --g-size-container-width: var(--g-size-container-width--small);
    position: relative;
    padding-top: calc(var(--g-size-nav-height) + 200px);
    background: linear-gradient(180deg,#fff 40%,#fefefe 51.05%,#f1f1f1 90%)
}

.g-body[data-page-name=aboutUs] .m-intro .l-bg {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    overflow: hidden;
    width: 100%;
    justify-content: center
}

.g-body[data-page-name=aboutUs] .m-intro .l-bg .l-bg--inner {
    max-width: 154.1927vw;
    transform: translate3d(5%,0,0);
    --u-width: 2961;
    --u-height: 2903;
    position: relative;
    overflow: hidden;
    width: 2961px
}

.g-body[data-page-name=aboutUs] .m-intro .l-bg .l-bg--inner>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=aboutUs] .m-intro .l-bg .l-bg--inner>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=aboutUs] .m-intro .l-bg .l-bg--inner>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=aboutUs] .m-intro .l-bg .l-bg--inner:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=aboutUs] .m-intro .l-bg .l-bg--inner svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.g-body[data-page-name=aboutUs] .m-intro .m-head {
    margin-bottom: 60px
}

.g-body[data-page-name=aboutUs] .m-intro .m-title {
    font-size: 84px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-gray-950,#0f0f0f);
    line-height: 1.0238095238em;
    line-height: 1.02
}

.g-body[data-page-name=aboutUs] .m-intro .m-title:after,.g-body[data-page-name=aboutUs] .m-intro .m-title:before {
    display: table;
    content: ""
}

.g-body[data-page-name=aboutUs] .m-intro .m-title:before {
    margin-bottom: -.173em
}

.g-body[data-page-name=aboutUs] .m-intro .m-title:after {
    margin-top: -.102em
}

.g-body[data-page-name=aboutUs] .m-intro .m-subtitle {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.25em;
    margin-top: 24px;
    color: var(--text-gray-800,#292929)
}

.g-body[data-page-name=aboutUs] .m-intro .m-desc--inner {
    font-size: 15px;
    font-weight: 500;
    line-height: 200%;
    max-width: 672px;
    color: var(--text-gray-600,#525252)
}

.g-body[data-page-name=aboutUs] .memorabilia-area {
    --g-size-container-width: var(--g-size-container-width--small);
    margin-top: 100px
}

.g-body[data-page-name=aboutUs] .memorabilia-area .area-title {
    font-size: 40px;
    font-weight: 500;
    line-height: 1.25em;
    margin-bottom: 51px;
    color: var(--text-gray-800,#292929)
}

.g-body[data-page-name=aboutUs] .memorabilia-area .group-body {
    position: relative;
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
    mask-image: linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)
}

.g-body[data-page-name=aboutUs] .memorabilia-area .event-list {
    position: relative;
    z-index: 10
}

.g-body[data-page-name=aboutUs] .memorabilia-area .event-line {
    position: absolute;
    top: 17px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(0,0,0,.1)
}

.g-body[data-page-name=aboutUs] .memorabilia-area .event-item {
    margin-right: 74px;
    padding-top: 10px;
    padding-bottom: 24px
}

.g-body[data-page-name=aboutUs] .memorabilia-area .event-item .event-dot {
    margin-bottom: 18px;
    border: 2px solid var(--text-gray-500,#737373);
    background-color: #fff;
    --u-size: 15px;
    width: var(--u-size);
    height: var(--u-size);
    border-radius: 50%
}

.g-body[data-page-name=aboutUs] .memorabilia-area .event-item .event-time {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2727272727em;
    margin-bottom: 6px;
    color: var(--text-gray-900,#141414)
}

.g-body[data-page-name=aboutUs] .memorabilia-area .event-item .event-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    white-space: nowrap;
    color: var(--text-gray-600,#525252)
}

.g-body[data-page-name=aboutUs] .m-idea {
    --g-size-container-width: var(--g-size-container-width--small);
    position: relative;
    padding-top: 100px;
    padding-bottom: 110px
}

.g-body[data-page-name=aboutUs] .m-idea .l-bg {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    transform: translate3d(0,-8%,0);
    pointer-events: none
}

.g-body[data-page-name=aboutUs] .m-idea .l-bg .l-bg--inner {
    overflow: visible!important;
    transform: translate3d(-54%,0,0);
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 80%);
    mask-image: linear-gradient(90deg,transparent,#000 80%);
    --u-width: 1842;
    --u-height: 2606;
    position: relative;
    overflow: hidden;
    width: 1842px
}

.g-body[data-page-name=aboutUs] .m-idea .l-bg .l-bg--inner:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=aboutUs] .m-idea .l-bg .l-bg--inner svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.g-body[data-page-name=aboutUs] .m-idea .m-title {
    text-align: center;
    -webkit-clip-path: inset(-10% 0 -20% 0);
    clip-path: inset(-10% 0 -20% 0);
    font-size: 84px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-gray-950,#0f0f0f);
    line-height: 1.0238095238em
}

.g-body[data-page-name=aboutUs] .m-idea .m-subtitle {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3333333333em;
    margin-top: 2px;
    text-align: center;
    color: var(--text-gray-700,#424242);
    -webkit-clip-path: inset(0);
    clip-path: inset(0)
}

.g-body[data-page-name=aboutUs] .m-idea .m-desc {
    font-size: 15px;
    font-weight: 500;
    line-height: 200%;
    max-width: 560px;
    margin-top: 18px;
    text-align: center;
    color: var(--text-gray-600,#525252)
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration {
    --size: 1000;
    position: relative;
    margin-top: 76px;
    padding: 221px 0
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration>* {
    perspective: 1000px
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-1 {
    --u-width: 286;
    --u-height: 135;
    position: relative;
    overflow: hidden;
    width: calc(286/var(--size)*1000px)
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-1>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-1>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-1>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-1:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-1 {
    overflow: visible
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-1 img {
    z-index: 10
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-1:before {
    width: 204.7202797203%;
    height: 373.3333333333%;
    content: "";
    background-image: var(--bg);
    background-position: 50%;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0)
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-2,.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-3,.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-4,.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-5,.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-6 {
    position: relative;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0)
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .logo-box {
    position: absolute;
    z-index: 100;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .logo-img {
    --radius: calc(var(--u-width)/2);
    flex: 0 0 auto;
    --u-width: 100;
    --u-height: 100;
    position: relative;
    overflow: hidden;
    width: calc(var(--radius)/var(--size)*1000px)
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .logo-img>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=aboutUs] .m-idea .m-decoration .logo-img>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=aboutUs] .m-idea .m-decoration .logo-img>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .logo-img:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-2 .logo-box:first-of-type {
    bottom: 0;
    left: 25%
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-2 .line-box {
    width: calc(365/var(--size)*1000px);
    height: calc(225/var(--size)*1000px);
    border: 2px solid hsla(0,0%,100%,.8);
    border-radius: calc(86/var(--size)*1000px)
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-3 .logo-box:first-of-type {
    top: 0;
    left: 63%
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-3 .logo-box:nth-of-type(2) {
    bottom: 10%;
    left: 90%
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-3 .line-box {
    width: calc(461/var(--size)*1000px);
    height: calc(299/var(--size)*1000px);
    border: 2px solid hsla(0,0%,100%,.6);
    border-radius: calc(92/var(--size)*1000px)
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-4 .logo-box:first-of-type {
    top: 5%;
    left: 90%
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-4 .logo-box:nth-of-type(2) {
    bottom: 5%;
    left: 5%
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-4 .logo-box:nth-of-type(3) {
    top: 0;
    left: 25%
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-4 .line-box {
    width: calc(563/var(--size)*1000px);
    height: calc(389/var(--size)*1000px);
    border: 2px solid hsla(0,0%,100%,.5);
    border-radius: calc(78/var(--size)*1000px)
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-5 {
    z-index: 2000
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-5 .logo-box:first-of-type {
    top: 50%;
    left: 100%
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-5 .logo-box:nth-of-type(2) {
    top: 35%;
    left: 0
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-5 .line-box {
    width: calc(665/var(--size)*1000px);
    height: calc(489/var(--size)*1000px);
    border: 2px solid hsla(0,0%,100%,.4);
    border-radius: calc(82/var(--size)*1000px)
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-5 .thumb-up {
    position: absolute;
    z-index: 100;
    top: 24px;
    left: 1px;
    width: 120px
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-5 .bell {
    position: absolute;
    z-index: 100;
    top: 26px;
    left: 23px;
    width: 75px
}

.g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-6 .line-box {
    width: calc(773/var(--size)*1000px);
    height: calc(577/var(--size)*1000px);
    border: 2px solid hsla(0,0%,100%,.3);
    border-radius: calc(65/var(--size)*1000px)
}

.g-body[data-page-name=aboutUs] .m-idea .m-footer {
    overflow: hidden;
    max-width: 1920px;
    margin: 0 auto;
    margin-top: 28px
}

.g-body[data-page-name=aboutUs] .m-idea .m-footer .group-body,.g-body[data-page-name=aboutUs] .m-idea .m-footer .partners-list {
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
    mask-image: linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)
}

.g-body[data-page-name=aboutUs] .m-idea .m-footer .partner-item {
    flex: 0 0 auto;
    margin-right: 31px;
    --u-width: 287;
    --u-height: 104;
    position: relative;
    overflow: hidden;
    width: 252px
}

.g-body[data-page-name=aboutUs] .m-idea .m-footer .partner-item>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=aboutUs] .m-idea .m-footer .partner-item>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=aboutUs] .m-idea .m-footer .partner-item>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=aboutUs] .m-idea .m-footer .partner-item:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=aboutUs] .m-idea .m-footer .partner-item:last-child {
    margin-right: 0
}

.g-body[data-page-name=aboutUs] .m-service {
    --g-size-container-width: var(--g-size-container-width--small);
    position: relative;
    padding-top: 80px;
    padding-bottom: 103px
}

.g-body[data-page-name=aboutUs] .m-service .js-split-word {
    -webkit-clip-path: inset(-50% 0 -10% 0);
    clip-path: inset(-50% 0 -10% 0)
}

.g-body[data-page-name=aboutUs] .m-service .l-bg {
    --bg-size: min(114.1666vw,2192px);
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    transform: translateY(-42px);
    pointer-events: none
}

.g-body[data-page-name=aboutUs] .m-service .l-bg .l-bg--inner {
    left: calc(50% - var(--bg-size)/2);
    --u-width: 2192;
    --u-height: 1726;
    position: relative;
    overflow: hidden;
    width: var(--bg-size)
}

.g-body[data-page-name=aboutUs] .m-service .l-bg .l-bg--inner>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=aboutUs] .m-service .l-bg .l-bg--inner>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=aboutUs] .m-service .l-bg .l-bg--inner>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=aboutUs] .m-service .l-bg .l-bg--inner:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=aboutUs] .m-service .l-bg-2 {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    transform: translate3d(0,-14%,0);
    pointer-events: none
}

.g-body[data-page-name=aboutUs] .m-service .l-bg-2 .l-bg--inner {
    left: calc(50% - 921px);
    transform: translate3d(50%,0,0);
    --u-width: 1397;
    --u-height: 1603;
    position: relative;
    overflow: hidden;
    width: 1842px
}

.g-body[data-page-name=aboutUs] .m-service .l-bg-2 .l-bg--inner:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=aboutUs] .m-service .l-bg-2 .l-bg--inner svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.g-body[data-page-name=aboutUs] .m-service .m-head {
    margin-bottom: 46px
}

.g-body[data-page-name=aboutUs] .m-service .m-title {
    margin-bottom: 16px;
    font-size: 84px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-gray-950,#0f0f0f);
    line-height: 1.02
}

.g-body[data-page-name=aboutUs] .m-service .m-title:after,.g-body[data-page-name=aboutUs] .m-service .m-title:before {
    display: table;
    content: ""
}

.g-body[data-page-name=aboutUs] .m-service .m-title:before {
    margin-bottom: -.173em
}

.g-body[data-page-name=aboutUs] .m-service .m-title:after {
    margin-top: -.102em
}

.g-body[data-page-name=aboutUs] .m-service .m-subtitle {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3333333333em;
    color: var(--text-gray-700,#424242)
}

.g-body[data-page-name=aboutUs] .m-service .m-desc {
    font-size: 15px;
    font-weight: 500;
    line-height: 200%;
    max-width: 560px;
    color: var(--text-gray-600,#525252)
}

.g-body[data-page-name=aboutUs] .m-service .m-body {
    perspective: 1000px
}

.g-body[data-page-name=aboutUs] .m-service .m-body .stage-area {
    overflow: visible!important;
    --u-width: 838;
    --u-height: 562;
    position: relative;
    overflow: hidden;
    width: 838px
}

.g-body[data-page-name=aboutUs] .m-service .m-body .stage-area>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=aboutUs] .m-service .m-body .stage-area>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=aboutUs] .m-service .m-body .stage-area>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=aboutUs] .m-service .m-body .stage-area:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=aboutUs] .m-service .m-body .spline-scene {
    top: 0;
    left: 0;
    width: 130%!important;
    height: 130%!important;
    cursor: grab;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0)
}

.g-body[data-page-name=aboutUs] .m-service .m-body .spline-scene:active {
    cursor: grabbing
}

.g-body[data-page-name=aboutUs] .m-service .m-body .drag-tip {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-100%);
    --u-width: 220;
    --u-height: 203;
    position: relative;
    overflow: hidden;
    width: 110px
}

.g-body[data-page-name=aboutUs] .m-service .m-body .drag-tip>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=aboutUs] .m-service .m-body .drag-tip>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=aboutUs] .m-service .m-body .drag-tip>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=aboutUs] .m-service .m-body .drag-tip:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=aboutUs] .m-team {
    --g-size-container-width: var(--g-size-container-width--small);
    overflow: hidden;
    max-width: 1920px;
    margin: 0 auto;
    padding: 63px 0 21px;
    border-radius: 80px;
    background-color: #fff
}

.g-body[data-page-name=aboutUs] .m-team .m-head {
    margin-bottom: 74px
}

.g-body[data-page-name=aboutUs] .m-team .m-title {
    margin-bottom: 16px;
    -webkit-clip-path: inset(-10% 0 -20% 0);
    clip-path: inset(-10% 0 -20% 0);
    font-size: 84px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-gray-950,#0f0f0f);
    line-height: 1.02
}

.g-body[data-page-name=aboutUs] .m-team .m-title:after,.g-body[data-page-name=aboutUs] .m-team .m-title:before {
    display: table;
    content: ""
}

.g-body[data-page-name=aboutUs] .m-team .m-title:before {
    margin-bottom: -.173em
}

.g-body[data-page-name=aboutUs] .m-team .m-title:after {
    margin-top: -.102em
}

.g-body[data-page-name=aboutUs] .m-team .m-subtitle {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3333333333em;
    color: var(--text-gray-700,#424242);
    -webkit-clip-path: inset(0);
    clip-path: inset(0)
}

.g-body[data-page-name=aboutUs] .m-team .m-desc {
    font-size: 15px;
    font-weight: 500;
    line-height: 200%;
    max-width: 461px;
    margin: 0 auto;
    margin-top: 34px;
    color: var(--text-gray-600,#525252)
}

.g-body[data-page-name=aboutUs] .m-team .swiper-ctrl {
    gap: 34px
}

.g-body[data-page-name=aboutUs] .m-team .swiper-navigate {
    gap: 20px
}

.g-body[data-page-name=aboutUs] .m-team .swiper-navigate .swiper-button {
    font-size: 24px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: .26s ease;
    color: #525252;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    display: flex;
    justify-content: center;
    align-items: center;
    --u-size: 48px;
    width: var(--u-size);
    height: var(--u-size);
    border-radius: 50%
}

.g-body[data-page-name=aboutUs] .m-team .swiper-navigate .swiper-button:after {
    content: "";
    transition: .26s ease;
    opacity: 0;
    background: linear-gradient(90deg,#1666eb,#ad79cd);
    position: absolute;
    inset: 0
}

.g-body[data-page-name=aboutUs] .m-team .swiper-navigate .swiper-button .ic {
    z-index: 10
}

.g-body[data-page-name=aboutUs] .m-team .swiper-navigate .swiper-button:hover {
    color: #fff
}

.g-body[data-page-name=aboutUs] .m-team .swiper-navigate .swiper-button:hover:after {
    opacity: 1
}

.g-body[data-page-name=aboutUs] .m-team .swiper-counter {
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5em;
    color: var(--text-gray-600,#525252)
}

.g-body[data-page-name=aboutUs] .m-team .swiper-counter .divide-line {
    width: 1px;
    height: 1em;
    margin: 0 11px;
    transform: rotate(20deg);
    background-color: rgba(0,0,0,.2)
}

.g-body[data-page-name=aboutUs] .m-team .swiper-counter .current-count {
    color: var(--text-gray-900,#141414)
}

.g-body[data-page-name=aboutUs] .m-team .state--pos-right {
    position: relative;
    width: 443px
}

.g-body[data-page-name=aboutUs] .m-team .state--pos-right .swiper {
    overflow: visible;
    cursor: grab
}

.g-body[data-page-name=aboutUs] .m-team .state--pos-right .swiper .swiper-wrapper {
    transition: transform .6s cubic-bezier(.2,.6,.3,1)!important
}

.g-body[data-page-name=aboutUs] .m-team .state--pos-right .swiper[data-touch] {
    cursor: grabbing
}

.g-body[data-page-name=aboutUs] .m-team .state--pos-right .swiper[data-touch] .swiper-wrapper {
    transition: transform .3s cubic-bezier(.2,.6,.3,1)!important
}

.g-body[data-page-name=aboutUs] .m-team .state--pos-right .swiper-bg {
    position: absolute;
    inset: 0
}

.g-body[data-page-name=aboutUs] .m-team .state--pos-right .swiper-bg .bg-bar {
    flex: 0 0 auto;
    width: 120%;
    height: 227px;
    transform: translateY(-20px) rotate(28deg);
    border-radius: 10000px;
    background: linear-gradient(90deg,#1666eb,#ad79cd)
}

.g-body[data-page-name=aboutUs] .m-team .state--pos-right:after {
    position: absolute;
    z-index: 11;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    content: "";
    background: linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.78) 37.91%,#fff 90%)
}

.g-body[data-page-name=aboutUs] .m-team .m-team-list {
    position: relative;
    overflow: visible
}

.g-body[data-page-name=aboutUs] .m-team .m-team-list .team-item {
    position: relative
}

.g-body[data-page-name=aboutUs] .m-team .m-team-list .item-thumb {
    -webkit-mask-image: linear-gradient(180deg,#000 80%,transparent 90%);
    mask-image: linear-gradient(180deg,#000 80%,transparent 90%);
    --u-width: 443;
    --u-height: 668;
    position: relative;
    overflow: hidden;
    width: 443px
}

.g-body[data-page-name=aboutUs] .m-team .m-team-list .item-thumb>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=aboutUs] .m-team .m-team-list .item-thumb>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=aboutUs] .m-team .m-team-list .item-thumb>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=aboutUs] .m-team .m-team-list .item-thumb:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=aboutUs] .m-team .m-team-list .item-info-wrapper {
    position: absolute;
    bottom: 34px;
    left: 0;
    width: 100%;
    height: 143px;
    padding: 0 22px;
    border-radius: 20px;
    background: linear-gradient(180deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.9) 54.41%,#fff);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px)
}

.g-body[data-page-name=aboutUs] .m-team .m-team-list .item-name {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2727272727em;
    line-height: 1;
    color: var(--text-gray-900,#141414)
}

.g-body[data-page-name=aboutUs] .m-team .m-team-list .divide-line {
    width: 1px;
    height: 13px;
    margin: 0 8px;
    transform: rotate(15deg);
    background-color: rgba(0,0,0,.2)
}

.g-body[data-page-name=aboutUs] .m-team .m-team-list .item-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: var(--text-gray-500,#737373)
}

@media(max-width: 1679.98px) {
    .g-body[data-page-name=aboutUs] .m-intro {
        padding-top:calc(var(--g-size-nav-height) + 140px)
    }

    .g-body[data-page-name=aboutUs] .m-idea .m-title,.g-body[data-page-name=aboutUs] .m-intro .m-title,.g-body[data-page-name=aboutUs] .m-service .m-title,.g-body[data-page-name=aboutUs] .m-team .m-title {
        font-size: 74px
    }

    .g-body[data-page-name=aboutUs] .m-team {
        --g-size-container-width: var(--g-size-container-width--regular)
    }

    .g-body[data-page-name=aboutUs] .m-team .m-container--inner {
        padding-right: 160px
    }
}

@media(max-width: 1559.98px) {
    .g-body[data-page-name=aboutUs] .m-idea .m-title,.g-body[data-page-name=aboutUs] .m-intro .m-title,.g-body[data-page-name=aboutUs] .m-service .m-title,.g-body[data-page-name=aboutUs] .m-team .m-title {
        font-size:70px
    }

    .g-body[data-page-name=aboutUs] .m-intro .m-subtitle {
        font-size: 28px
    }

    .g-body[data-page-name=aboutUs] .memorabilia-area .area-title {
        font-size: 36px
    }

    .g-body[data-page-name=aboutUs] .m-idea .m-footer .partner-item {
        width: 220px
    }

    .g-body[data-page-name=aboutUs] .m-idea .m-decoration {
        --size: 1050
    }
}

@media(max-width: 1439.98px) {
    .g-body[data-page-name=aboutUs] .m-idea .m-title,.g-body[data-page-name=aboutUs] .m-intro .m-title,.g-body[data-page-name=aboutUs] .m-service .m-title,.g-body[data-page-name=aboutUs] .m-team .m-title {
        font-size:64px
    }

    .g-body[data-page-name=aboutUs] .m-intro .m-subtitle {
        font-size: 26px
    }

    .g-body[data-page-name=aboutUs] .m-idea .m-decoration {
        --size: 1150;
        margin-top: 56px
    }

    .g-body[data-page-name=aboutUs] .m-idea .m-footer .partner-item {
        width: 200px
    }

    .g-body[data-page-name=aboutUs] .m-service .m-body .spline-scene {
        width: 100%!important;
        height: 100%!important
    }

    .g-body[data-page-name=aboutUs] .m-team .m-container--inner {
        padding-right: 50px;
        padding-left: 50px
    }

    .g-body[data-page-name=aboutUs] .m-team .m-team-list .item-thumb,.g-body[data-page-name=aboutUs] .m-team .state--pos-right {
        width: 420px
    }

    .g-body[data-page-name=aboutUs] .m-service {
        padding-bottom: 20px
    }

    .g-body[data-page-name=aboutUs] .m-service .l-bg {
        transform: translateY(140px)
    }
}

@media(max-width: 767.98px) {
    .g-body[data-page-name=aboutUs] .m-intro .m-title {
        font-size:52px
    }

    .g-body[data-page-name=aboutUs] .m-intro {
        padding-top: calc(var(--g-size-nav-height) + 60px)
    }

    .g-body[data-page-name=aboutUs] .m-intro .m-subtitle {
        margin-top: 22px
    }

    .g-body[data-page-name=aboutUs] .m-idea .m-title,.g-body[data-page-name=aboutUs] .m-service .m-title,.g-body[data-page-name=aboutUs] .m-team .m-title {
        font-size: 42px
    }

    .g-body[data-page-name=aboutUs] .m-service .m-head {
        display: block
    }

    .g-body[data-page-name=aboutUs] .m-service .m-head>.state--pos-left {
        margin-bottom: 30px
    }

    .g-body[data-page-name=aboutUs] .m-service .m-body .stage-area {
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
        align-items: center;
        justify-content: center;
        position: absolute;
        inset: 0
    }

    .g-body[data-page-name=aboutUs] .m-service .m-body .spline-scene {
        position: relative;
        top: auto;
        left: auto;
        width: 160%!important;
        height: auto!important;
        transform: none
    }

    .g-body[data-page-name=aboutUs] .m-service .m-body {
        --u-width: 100;
        --u-height: 100;
        position: relative;
        overflow: hidden;
        width: 100%
    }

    .g-body[data-page-name=aboutUs] .m-service .m-body:after {
        display: block;
        width: 100%;
        padding-top: calc(var(--u-height)/var(--u-width)*100%);
        content: ""
    }

    .g-body[data-page-name=aboutUs] .m-service .m-body {
        overflow: visible
    }

    .g-body[data-page-name=aboutUs] .m-service .m-body .stage-area:after {
        display: none
    }

    .g-body[data-page-name=aboutUs] .m-service .m-body .drag-tip {
        position: absolute;
        top: auto;
        right: 0;
        bottom: -40px;
        flex: 0 0 auto;
        width: 80px;
        margin: 0 auto;
        transform: none
    }

    .g-body[data-page-name=aboutUs] .m-service {
        overflow: hidden;
        padding-top: 40px;
        padding-bottom: 120px
    }

    .g-body[data-page-name=aboutUs] .m-team {
        padding-top: 70px;
        border-radius: 40px
    }

    .g-body[data-page-name=aboutUs] .m-team .m-container--inner {
        padding: 0
    }

    .g-body[data-page-name=aboutUs] .m-team .m-container--inner .m-body {
        position: relative;
        flex-direction: column;
        padding-bottom: 50px
    }

    .g-body[data-page-name=aboutUs] .m-team .m-team-list .item-thumb,.g-body[data-page-name=aboutUs] .m-team .state--pos-right {
        width: 320px
    }

    .g-body[data-page-name=aboutUs] .m-team .state--pos-right .swiper-bg .bg-bar {
        height: 170px
    }

    .g-body[data-page-name=aboutUs] .m-team .swiper-ctrl {
        position: absolute;
        z-index: 100;
        right: 0;
        bottom: 20px;
        left: 0;
        margin: 0 auto;
        justify-content: center
    }

    .g-body[data-page-name=aboutUs] .m-team .m-head {
        margin-bottom: 24px
    }

    .g-body[data-page-name=aboutUs] .m-service .l-bg {
        top: 50%;
        transform: none
    }

    .g-body[data-page-name=aboutUs] .m-idea .m-footer .partner-item {
        margin: 0
    }

    .g-body[data-page-name=aboutUs] .m-idea {
        overflow: hidden;
        padding-top: 60px;
        padding-bottom: 40px
    }

    .g-body[data-page-name=aboutUs] .m-idea .m-subtitle,.g-body[data-page-name=aboutUs] .m-service .m-subtitle,.g-body[data-page-name=aboutUs] .m-team .m-subtitle {
        font-size: 20px;
        margin-top: 10px
    }

    .g-body[data-page-name=aboutUs] .m-intro .m-head {
        margin-bottom: 40px
    }

    .g-body[data-page-name=aboutUs] .memorabilia-area {
        margin-top: 80px
    }

    .g-body[data-page-name=aboutUs] .memorabilia-area .area-title {
        font-size: 26px;
        margin-bottom: 40px
    }

    .g-body[data-page-name=aboutUs] .memorabilia-area .group-body {
        --mask-progress-start: 100%;
        --mask-progress-end: 150%;
        -webkit-mask-image: radial-gradient(300% 150% at 0 0,#000 var(--mask-progress-start),transparent var(--mask-progress-end));
        mask-image: radial-gradient(300% 150% at 0 0,#000 var(--mask-progress-start),transparent var(--mask-progress-end))
    }

    .g-body[data-page-name=aboutUs] .memorabilia-area .event-list {
        grid-auto-flow: row;
        grid-template-columns: 1fr
    }

    .g-body[data-page-name=aboutUs] .memorabilia-area .event-item .event-title {
        white-space: normal
    }

    .g-body[data-page-name=aboutUs] .memorabilia-area .event-item {
        position: relative;
        margin: 0;
        padding-left: 30px
    }

    .g-body[data-page-name=aboutUs] .memorabilia-area .event-item .event-dot {
        position: absolute;
        top: 18px;
        left: 0;
        margin: 0
    }

    .g-body[data-page-name=aboutUs] .memorabilia-area .event-line {
        top: 20px;
        bottom: 0;
        left: 7px;
        width: 1px;
        height: auto;
        -webkit-mask-image: linear-gradient(180deg,#000 calc(100% - 120px),transparent);
        mask-image: linear-gradient(180deg,#000 calc(100% - 120px),transparent)
    }

    .g-body[data-page-name=aboutUs] .m-idea .l-bg,.g-body[data-page-name=aboutUs] .m-service .l-bg-2 {
        display: none
    }

    .g-body[data-page-name=aboutUs] .m-idea .m-decoration {
        --size: 1430;
        margin-top: 0
    }

    .g-body[data-page-name=aboutUs] .m-intro .l-bg .l-bg--inner {
        max-width: 194vw;
        transform: translate3d(-10%,-50%,0)
    }

    .j-device-mobile .g-body[data-page-name=aboutUs] .m-service {
        padding-bottom: 60px
    }

    .g-body[data-page-name=aboutUs] .m-team .m-team-list .item-info-wrapper {
        -webkit-backdrop-filter: none;
        backdrop-filter: none
    }
}

.g-body[data-page-name=caseArticle] .m-article .js-split-line,.g-body[data-page-name=caseArticle] .m-article .js-split-word {
    -webkit-clip-path: polygon(0 0,100% 0,100% 120%,0 120%);
    clip-path: polygon(0 0,100% 0,100% 120%,0 120%)
}

.g-body[data-page-name=caseArticle] .m-article .m-head {
    color: #fff;
    border-radius: 0 0 80px 80px;
    --u-width: 1920;
    --u-height: 945;
    position: relative;
    overflow: hidden;
    width: 100%
}

.g-body[data-page-name=caseArticle] .m-article .m-head:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=caseArticle] .m-article .m-head .l-bg {
    background-image: var(--bg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    position: absolute;
    inset: 0
}

.g-body[data-page-name=caseArticle] .m-article .article-info {
    z-index: 10;
    position: absolute;
    inset: 0
}

.g-body[data-page-name=caseArticle] .m-article .article-title {
    font-size: 40px;
    font-weight: 500;
    line-height: 1.25em;
    text-align: center
}

.g-body[data-page-name=caseArticle] .m-article .article-date {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5555555556em;
    margin-top: 17px;
    text-align: center;
    color: #fff;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0)
}

.g-body[data-page-name=caseArticle] .m-article .m-body {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 120px;
    padding-bottom: 120px
}

.g-body[data-page-name=caseArticle] .m-article .m-body .row {
    display: flex;
    margin-bottom: 50px;
    justify-content: space-between
}

.g-body[data-page-name=caseArticle] .m-article .m-body .row:last-child {
    margin-bottom: 0
}

.g-body[data-page-name=caseArticle] .m-article .m-body .col:first-child {
    font-size: 24px;
    line-height: 1.3333333333em;
    width: 200px;
    padding-top: 2px;
    color: #000
}

.g-body[data-page-name=caseArticle] .m-article .m-body .col:nth-child(2) {
    font-size: 15px;
    line-height: 200%;
    width: 819px;
    max-width: 100%;
    color: var(--text-gray-600,#525252)
}

.g-body[data-page-name=caseArticle] .m-article .m-body .col strong {
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    line-height: 28px;
    color: var(--text-gray-800,#292929)
}

.g-body[data-page-name=caseArticle] .m-relate-case {
    padding: 120px 0 150px;
    border-radius: 80px;
    background-color: #fff
}

.g-body[data-page-name=caseArticle] .m-relate-case .m-head {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3333333333em;
    margin-bottom: 40px
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-list {
    gap: 38px
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-list .wow:nth-child(3n+1) {
    animation-delay: .1s
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-list .wow:nth-child(3n+2) {
    animation-delay: .2s
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-list .wow:nth-child(3n+3) {
    animation-delay: .3s
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-item {
    --radius: 40px
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-item .item-thumb {
    transition: transform .75s cubic-bezier(.2,.75,.5,1);
    transform-origin: center center;
    border-radius: var(--radius);
    --u-width: 1500;
    --u-height: 899;
    position: relative;
    overflow: hidden;
    width: 100%
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-item .item-thumb>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=caseArticle] .m-relate-case .case-item .item-thumb>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=caseArticle] .m-relate-case .case-item .item-thumb>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-item .item-thumb:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-item img {
    transition: transform .75s cubic-bezier(.2,.75,.5,1);
    transform-origin: center center
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-item .item-info {
    padding: 14px 0
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-item .item-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    padding-left: 2.25em;
    color: var(--text-gray-800,#292929)
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-item .item-category-tag {
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 0 30px 30px 0;
    transition: .36s ease
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-item .item-category-tag:after,.g-body[data-page-name=caseArticle] .m-relate-case .case-item .item-category-tag:before {
    content: "";
    background-size: cover;
    position: absolute;
    inset: 0
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-item .item-category-tag:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='222' height='97' fill='none' viewBox='0 0 222 97'%3E%3Cpath fill='%23fff' d='M0 40C0 17.909 17.909 0 40 0h182c-17.08 0-30.925 16.213-30.925 36.213 0 15-12.16 27.16-27.16 27.16H30.925C14.59 63.373 1.21 78.207.078 97H0z'/%3E%3C/svg%3E")
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-item .item-category-tag:after {
    z-index: 10;
    transition: .36s ease;
    opacity: 0;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='222' height='97' fill='none' viewBox='0 0 222 97'%3E%3Cpath fill='url(%23a)' d='M0 40C0 17.909 17.909 0 40 0h182c-17.08 0-30.925 16.213-30.925 36.213 0 15-12.16 27.16-27.16 27.16H30.925C14.59 63.373 1.21 78.207.078 97H0z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='222' y1='48.5' y2='48.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23F06'/%3E%3Cstop offset='1' stop-color='%23F63'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E")
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-item .item-category-tag span {
    position: relative;
    z-index: 20
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-item .tag--inner {
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5em;
    min-width: 192px;
    padding: 20px 0;
    transition: .36s ease;
    text-align: center;
    color: var(--text-gray-800,#292929);
    border-radius: var(--radius) 0 var(--radius) 0
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-item .jump-icon {
    z-index: 100;
    cursor: none;
    opacity: 0;
    background: linear-gradient(90deg,#1666eb,#ad79cd);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    --u-size: 80px;
    width: var(--u-size);
    height: var(--u-size);
    border-radius: 50%
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-item .jump-icon .icon-box {
    position: absolute;
    inset: 0
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-item .jump-icon .ic {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="53" height="53" fill="none" viewBox="0 0 53 53"><path fill="%23fff" fill-rule="evenodd" d="M31.547 37.588a1.58 1.58 0 0 1-1.116-1.932l3.056-11.407-15.83 9.139a1.578 1.578 0 1 1-1.577-2.733l15.83-9.139-11.407-3.056a1.578 1.578 0 1 1 .817-3.048l15.085 4.042a1.58 1.58 0 0 1 1.116 1.932l-4.042 15.086a1.58 1.58 0 0 1-1.932 1.116" clip-rule="evenodd"/></svg>');
    background-repeat: no-repeat;
    background-size: cover;
    --u-width: 35px;
    width: var(--u-width);
    --u-height: 35px;
    height: var(--u-height)
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-item:hover .item-category-tag .tag--inner {
    color: #fff
}

.g-body[data-page-name=caseArticle] .m-relate-case .case-item:hover .item-category-tag:after {
    opacity: 1
}

@media(max-width: 767.98px) {
    .g-body[data-page-name=caseArticle] .m-article .article-title {
        font-size:26px;
        max-width: 280px
    }

    .g-body[data-page-name=caseArticle] .m-article .m-body .row {
        flex-direction: column;
        margin-bottom: 40px;
        gap: 20px
    }

    .g-body[data-page-name=caseArticle] .m-article .m-body .col:first-child {
        font-size: 22px
    }

    .g-body[data-page-name=caseArticle] .m-relate-case .case-list {
        grid-template-columns: 1fr
    }

    .g-body[data-page-name=caseArticle] .m-relate-case .case-list .case-item {
        --radius: 26px
    }

    .g-body[data-page-name=caseArticle] .m-relate-case .case-list .case-item .tag--inner {
        font-size: 14px;
        min-width: 152px;
        padding: 12px 0;
        padding-right: 13px
    }

    .g-body[data-page-name=caseArticle] .m-relate-case .case-list .case-item .item-category-tag {
        padding: 0 0 14px
    }

    .g-body[data-page-name=caseArticle] .m-relate-case .case-list .case-item .item-info {
        padding-top: 16px
    }

    .g-body[data-page-name=caseArticle] .m-relate-case .case-list .case-item .item-title {
        font-size: 14px;
        padding: 0 26px
    }

    .g-body[data-page-name=caseArticle] .m-relate-case .case-list .case-item:last-child {
        margin-bottom: 0
    }

    .g-body[data-page-name=caseArticle] .m-relate-case {
        padding: 60px 0;
        border-radius: 40px;
        background-color: #fff
    }

    .g-body[data-page-name=caseArticle] .m-article .m-body {
        padding-top: 60px;
        padding-bottom: 60px
    }

    .g-body[data-page-name=caseArticle] .m-article .m-head {
        height: 400px;
        border-radius: 0 0 40px 40px
    }

    .g-body[data-page-name=caseArticle] .m-article .article-date {
        font-size: 16px
    }

    .g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-4 .logo-box:nth-of-type(2) {
        bottom: -12%;
        left: 16%
    }

    .g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-5 .logo-box:nth-of-type(2) {
        top: 42%;
        left: 16%
    }

    .g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-5 .logo-box:first-of-type {
        top: 50%;
        left: 78%
    }

    .g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-2 .logo-box:first-of-type {
        bottom: -20%;
        left: 35%
    }

    .g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-3 .logo-box:nth-of-type(2) {
        bottom: -13%
    }

    .g-body[data-page-name=aboutUs] .m-idea .m-decoration .l-4 .logo-box:nth-of-type(3) {
        top: -13%;
        left: 25%
    }
}

.g-body[data-page-name=case] .m-case {
    position: relative;
    padding-top: calc(var(--g-size-nav-height) + 110px);
    padding-bottom: 130px;
    background: linear-gradient(180deg,#fff 40%,#fefefe 51.05%,#f1f1f1)
}

.g-body[data-page-name=case] .m-case .js-split-line,.g-body[data-page-name=case] .m-case .js-split-text {
    -webkit-clip-path: polygon(0 0,100% 0,100% 120%,0 120%);
    clip-path: polygon(0 0,100% 0,100% 120%,0 120%)
}

.g-body[data-page-name=case] .m-case .m-bg {
    max-width: 1920px;
    margin: 0 auto
}

.g-body[data-page-name=case] .m-case .m-bg .m-bg--inner {
    flex: 0 0 auto;
    --u-width: 4204;
    --u-height: 1724;
    position: relative;
    overflow: hidden;
    width: 110%
}

.g-body[data-page-name=case] .m-case .m-bg .m-bg--inner>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=case] .m-case .m-bg .m-bg--inner>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=case] .m-case .m-bg .m-bg--inner>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=case] .m-case .m-bg .m-bg--inner:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=case] .m-case .m-bg {
    position: absolute;
    top: 0;
    right: 0;
    left: 0
}

.g-body[data-page-name=case] .m-case .m-head>.state--pos-right {
    margin-top: 54px
}

.g-body[data-page-name=case] .m-case .m-head .m-subtitle,.g-body[data-page-name=case] .m-case .m-head .m-title {
    -webkit-clip-path: inset(0 -10px 0 0);
    clip-path: inset(0 -10px 0 0)
}

.g-body[data-page-name=case] .m-case .m-footer .u-load-more {
    margin-top: 50px
}

.g-body[data-page-name=case] .m-case .case-list {
    gap: 59px
}

.g-body[data-page-name=case] .m-case .case-item {
    width: 100%
}

@media(max-width: 1679.98px) {
    .g-body[data-page-name=case] .m-case {
        padding-top:calc(var(--g-size-nav-height) + 70px)
    }

    .g-body[data-page-name=case] .m-case .case-list {
        gap: 50px 39px
    }
}

@media(max-width: 1439.98px) {
    .g-body[data-page-name=case] .m-case {
        padding-bottom:50px
    }
}

@media(max-width: 767.98px) {
    .g-body[data-page-name=case] .m-case .m-bg .m-bg--inner {
        --u-width:32;
        --u-height: 35;
        opacity: .6
    }

    .g-body[data-page-name=case] .m-case .case-list {
        grid-template-columns: 1fr
    }

    .g-body[data-page-name=case] .m-case .case-item {
        --radius: 26px
    }

    .g-body[data-page-name=case] .m-case .case-item .tag--inner {
        font-size: 14px;
        min-width: 152px;
        padding: 12px 0;
        padding-right: 13px
    }

    .g-body[data-page-name=case] .m-case .case-item .item-category-tag {
        padding: 0 0 14px
    }

    .g-body[data-page-name=case] .m-case .case-item .item-info {
        padding-top: 16px
    }

    .g-body[data-page-name=case] .m-case .m-head>.state--pos-right {
        margin-top: 0
    }

    .g-body[data-page-name=case] .m-case {
        padding-top: calc(var(--g-size-nav-height) + 60px)
    }
}

.g-body[data-page-name=index] .m-banner {
    position: relative;
    overflow: hidden;
    -webkit-clip-path: inset(0);
    clip-path: inset(0)
}

.g-body[data-page-name=index] .m-banner .js-split-line,.g-body[data-page-name=index] .m-banner .js-split-word {
    -webkit-clip-path: polygon(0 0,100% 0,100% 120%,0 120%);
    clip-path: polygon(0 0,100% 0,100% 120%,0 120%)
}

.g-body[data-page-name=index] .m-banner .swiper {
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 250px,#000 calc(100% - 250px),transparent);
    mask-image: linear-gradient(90deg,transparent,#000 250px,#000 calc(100% - 250px),transparent)
}

.g-body[data-page-name=index] .m-banner .l-layer--bg {
    background: var(--bg);
    background-size: cover;
    position: absolute;
    inset: 0
}

.g-body[data-page-name=index] .m-banner .l-layer--bg video {
    -webkit-mask-image: linear-gradient(0deg,transparent,#000 40%);
    mask-image: linear-gradient(0deg,transparent,#000 40%);
    object-fit: cover;
    object-position: center;
    position: absolute;
    inset: 0
}

.g-body[data-page-name=index] .m-banner .l-layer--bg-2 {
    z-index: 5;
    overflow: hidden;
    position: absolute;
    inset: 0
}

.g-body[data-page-name=index] .m-banner .circle-box {
    --circle-size: 1000;
    position: absolute;
    top: 100%;
    left: 50%;
    display: flex;
    width: 0;
    height: 0;
    margin: 0 auto;
    align-items: center;
    justify-content: center
}

.g-body[data-page-name=index] .m-banner .circle-box .circle {
    flex: 0 0 auto;
    border-radius: 50%;
    filter: blur(90px)
}

.g-body[data-page-name=index] .m-banner .circle-box:first-child .circle {
    width: calc(1044/var(--circle-size)*1000px);
    height: calc(702/var(--circle-size)*1000px);
    transform: translate3d(calc(530/var(--circle-size)*1000px),calc(94/var(--circle-size)*1000px),0);
    background-color: #b6a9fd;
}

.g-body[data-page-name=index] .m-banner .circle-box:nth-child(2) .circle {
    width: calc(902/var(--circle-size)*1000px);
    height: calc(690/var(--circle-size)*1000px);
    transform: translate3d(calc(381/var(--circle-size)*1000px),calc(249/var(--circle-size)*1000px),0);
    background: #2335fe;
}

.g-body[data-page-name=index] .m-banner .circle-box:nth-child(3) .circle {
    z-index: 10;
    width: calc(913/var(--circle-size)*1000px);
    height: calc(673/var(--circle-size)*1000px);
    transform: translate3d(calc(-272/var(--circle-size)*1000px),calc(198/var(--circle-size)*1000px),0);
    background: #af9af8;
}

.g-body[data-page-name=index] .m-banner .circle-box:nth-child(4) .circle {
    width: calc(1044/var(--circle-size)*1000px);
    height: calc(801/var(--circle-size)*1000px);
    transform: translate3d(calc(-680/var(--circle-size)*1000px),calc(261/var(--circle-size)*1000px),0);
    background: #6856fc;
}

.g-body[data-page-name=index] .m-banner .circle-box:nth-child(5) .circle {
    width: calc(813/var(--circle-size)*1000px);
    height: calc(623/var(--circle-size)*1000px);
    transform: translate3d(calc(-825/var(--circle-size)*1000px),calc(220/var(--circle-size)*1000px),0);
    background: #e0dafe;
}

.g-body[data-page-name=index] .m-banner .m-container {
    position: relative;
    z-index: 10
}

.g-body[data-page-name=index] .m-banner .m-body {
    height: calc(var(--u-vh)*100)
}

.g-body[data-page-name=index] .m-banner .c-info-head {
    transform: translateY(-3px)
}

.g-body[data-page-name=index] .m-banner .c-info-head .info-title {
    line-height: 1.02;
    margin-bottom: 22px;
    text-align: center;
    font-size: 84px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-gray-950,#0f0f0f);
    line-height: 1.0238095238em
}

.g-body[data-page-name=index] .m-banner .c-info-head .info-subtitle {
    font-size: 40px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.25em;
    text-align: center;
    color: var(--text-gray-950,#0f0f0f)
}

.g-body[data-page-name=index] .m-banner .c-info-head .info-desc {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4em;
    margin-top: 42px;
    text-align: center;
    color: var(--text-gray-600,#525252)
}

.g-body[data-page-name=index] .m-banner .l-swiper-controller {
    z-index: 100;
    padding-bottom: 64px;
    pointer-events: none;
    position: absolute;
    inset: 0
}

.g-body[data-page-name=index] .m-banner .c-swiper-propagation {
    pointer-events: all
}

.g-body[data-page-name=index] .m-banner .c-propagation-item {
    overflow: hidden;
    width: 8px;
    height: 8px;
    margin-right: 12px;
    transition: .26s ease;
    border-radius: 100px;
    background-color: hsla(0,0%,100%,.5)
}

.g-body[data-page-name=index] .m-banner .c-propagation-item .propagation-item-inner {
    width: calc(var(--delay-progress)*100%);
    height: 100%;
    opacity: 0;
    border-radius: 100px;
    background-color: #fff
}

.g-body[data-page-name=index] .m-banner .c-propagation-item:last-child {
    margin-right: 0
}

.g-body[data-page-name=index] .m-banner .c-propagation-item.active {
    width: 34px
}

.g-body[data-page-name=index] .m-banner .c-propagation-item.active .propagation-item-inner {
    opacity: 1
}

.g-body[data-page-name=index] .m-service {
    --card-size: 1000;
    --radius: calc(20/var(--card-size)*1000px);
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg,#000 calc(100% - 350px),transparent);
    mask-image: linear-gradient(180deg,#000 calc(100% - 350px),transparent)
}

.g-body[data-page-name=index] .m-service .js-split-line,.g-body[data-page-name=index] .m-service .js-split-text {
    -webkit-clip-path: polygon(0 0,100% 0,100% 120%,0 120%);
    clip-path: polygon(0 0,100% 0,100% 120%,0 120%)
}

.g-body[data-page-name=index] .m-service .circle-wrapper {
    --u-width: 3043;
    --u-height: 3086;
    position: relative;
    overflow: hidden;
    width: calc(1521.5/var(--card-size)*1000px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0)
}

.g-body[data-page-name=index] .m-service .circle-wrapper:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=index] .m-service .circle-wrapper .l-circle {
    position: absolute;
    inset: 0
}

.g-body[data-page-name=index] .m-service .circle-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.g-body[data-page-name=index] .m-service .m-container--inner {
    position: relative;
    height: 100vh;
    min-height: calc(1136/var(--card-size)*1000px)
}

.g-body[data-page-name=index] .m-service .m-head {
    text-align: center
}

.g-body[data-page-name=index] .m-service .m-title {
    text-align: center;
    font-size: 84px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-gray-950,#0f0f0f);
    line-height: 1.0238095238em;
    line-height: 1.02
}

.g-body[data-page-name=index] .m-service .m-title:after,.g-body[data-page-name=index] .m-service .m-title:before {
    display: table;
    content: ""
}

.g-body[data-page-name=index] .m-service .m-title:before {
    margin-bottom: -.173em
}

.g-body[data-page-name=index] .m-service .m-title:after {
    margin-top: -.102em
}

.g-body[data-page-name=index] .m-service .m-subtitle {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2727272727em;
    margin-top: 20px
}

.g-body[data-page-name=index] .m-service .m-desc {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    max-width: 471px;
    margin-top: 28px
}

.g-body[data-page-name=index] .m-service .m-btn {
    margin: 0 auto;
    margin-top: 60px
}

.g-body[data-page-name=index] .m-service .m-body {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    perspective: 1000px
}

.g-body[data-page-name=index] .m-service .card-wrapper {
    --move-z: 0px;
    position: relative;
    z-index: 100;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center
}

.g-body[data-page-name=index] .m-service .card-wrapper>* {
    flex: 0 0 auto;
    transform-style: preserve-3d
}

.g-body[data-page-name=index] .m-service .card-wrapper:first-child {
    transform: translate3d(calc(-474/var(--card-size)*1000px),calc(-192/var(--card-size)*1000px),var(--move-z))
}

.g-body[data-page-name=index] .m-service .card-wrapper:nth-child(2) {
    transform: translate3d(calc(456/var(--card-size)*1000px),calc(-296/var(--card-size)*1000px),var(--move-z))
}

.g-body[data-page-name=index] .m-service .card-wrapper:nth-child(3) {
    transform: translate3d(calc(456/var(--card-size)*1000px),calc(206/var(--card-size)*1000px),var(--move-z))
}

.g-body[data-page-name=index] .m-service .card-wrapper:nth-child(4) {
    transform: translate3d(calc(-456/var(--card-size)*1000px),calc(264/var(--card-size)*1000px),var(--move-z))
}

.g-body[data-page-name=index] .m-service .card-1 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: var(--radius);
    background-color: hsla(0,0%,100%,.58);
    box-shadow: 0 0 0 8px hsla(0,0%,100%,.2),inset 0 0 48.5px 0 hsla(0,0%,100%,.25);
    -webkit-backdrop-filter: blur(14.8px);
    backdrop-filter: blur(14.8px);
    filter: drop-shadow(0 17px 43.2px rgba(150,150,150,.13));
    --u-width: 374;
    --u-height: 227;
    position: relative;
    overflow: hidden;
    width: calc(374/var(--card-size)*1000px)
}

.g-body[data-page-name=index] .m-service .card-1>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=index] .m-service .card-1>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=index] .m-service .card-1>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=index] .m-service .card-1:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=index] .m-service .card-1:before {
    content: "";
    border: 1px solid #fff;
    border-radius: var(--radius);
    -webkit-mask-image: linear-gradient(180deg,rgba(0,0,0,.61),rgba(0,0,0,.17));
    mask-image: linear-gradient(180deg,rgba(0,0,0,.61),rgba(0,0,0,.17));
    position: absolute;
    inset: 0
}

.g-body[data-page-name=index] .m-service .card-1 .card-bg-1,.g-body[data-page-name=index] .m-service .card-1 .card-bg-2,.g-body[data-page-name=index] .m-service .card-1 .card-bg-3 {
    z-index: 10;
    background-image: var(--bg);
    background-position: 50%;
    background-size: cover;
    position: absolute;
    inset: 0
}

.g-body[data-page-name=index] .m-service .card-1 .card-bg-3 {
    z-index: 1
}

.g-body[data-page-name=index] .m-service .card-1 .card-inner {
    position: absolute;
    inset: 0
}

.g-body[data-page-name=index] .m-service .card-1 .avatar-box {
    --distance: -28px;
    right: 9.8%;
    bottom: 10.6%;
    --u-width: 100;
    --u-height: 100;
    position: relative;
    overflow: hidden;
    width: 8.5561%
}

.g-body[data-page-name=index] .m-service .card-1 .avatar-box:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=index] .m-service .card-1 .avatar-box {
    position: absolute;
    overflow: visible
}

.g-body[data-page-name=index] .m-service .card-1 .avatar-item {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%
}

.g-body[data-page-name=index] .m-service .card-1 .avatar-item:first-child {
    z-index: 5;
    transform: translateX(calc(var(--distance)*0))
}

.g-body[data-page-name=index] .m-service .card-1 .avatar-item:nth-child(2) {
    z-index: 4;
    transform: translateX(calc(var(--distance)*1))
}

.g-body[data-page-name=index] .m-service .card-1 .avatar-item:nth-child(3) {
    z-index: 3;
    transform: translateX(calc(var(--distance)*2))
}

.g-body[data-page-name=index] .m-service .card-1 .avatar-item:nth-child(4) {
    z-index: 2;
    transform: translateX(calc(var(--distance)*3))
}

.g-body[data-page-name=index] .m-service .card-1 .avatar-item:nth-child(5) {
    z-index: 1;
    transform: translateX(calc(var(--distance)*4))
}

.g-body[data-page-name=index] .m-service .card-1 .avatar-item:nth-child(6) {
    z-index: 0;
    transform: translateX(calc(var(--distance)*5))
}

.g-body[data-page-name=index] .m-service .card-2 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: var(--radius);
    background-color: hsla(0,0%,100%,.58);
    box-shadow: 0 0 0 8px hsla(0,0%,100%,.2),inset 0 0 48.5px 0 hsla(0,0%,100%,.25);
    -webkit-backdrop-filter: blur(14.8px);
    backdrop-filter: blur(14.8px);
    filter: drop-shadow(0 17px 43.2px rgba(150,150,150,.13));
    --u-width: 317;
    --u-height: 145;
    position: relative;
    overflow: hidden;
    width: calc(317/var(--card-size)*1000px)
}

.g-body[data-page-name=index] .m-service .card-2>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=index] .m-service .card-2>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=index] .m-service .card-2>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=index] .m-service .card-2:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=index] .m-service .card-2 {
    overflow: visible
}

.g-body[data-page-name=index] .m-service .card-2:before {
    content: "";
    border: 1px solid #fff;
    border-radius: var(--radius);
    -webkit-mask-image: linear-gradient(180deg,rgba(0,0,0,.61),rgba(0,0,0,.17));
    mask-image: linear-gradient(180deg,rgba(0,0,0,.61),rgba(0,0,0,.17));
    position: absolute;
    inset: 0
}

.g-body[data-page-name=index] .m-service .card-2 .card-bg-1 {
    --mask-progress-start: 100%;
    --mask-progress-end: 150%;
    -webkit-mask-image: radial-gradient(100% 200% at 0 0,#000 var(--mask-progress-start),transparent var(--mask-progress-end));
    mask-image: radial-gradient(100% 200% at 0 0,#000 var(--mask-progress-start),transparent var(--mask-progress-end))
}

.g-body[data-page-name=index] .m-service .card-2 .card-bg-1,.g-body[data-page-name=index] .m-service .card-2 .card-bg-2 {
    background-image: var(--bg);
    background-position: 50%;
    background-size: cover;
    position: absolute;
    inset: 0
}

.g-body[data-page-name=index] .m-service .card-2 .card-inner {
    z-index: 100;
    position: absolute;
    inset: 0
}

.g-body[data-page-name=index] .m-service .card-2 .star-box {
    top: 22%;
    right: 11%;
    perspective: 400px;
    perspective-origin: 20%;
    position: absolute
}

.g-body[data-page-name=index] .m-service .card-2 .star-1 {
    transform-style: preserve-3d
}

.g-body[data-page-name=index] .m-service .card-2 .star-1 .star-inner {
    --u-width: 30;
    --u-height: 32;
    position: relative;
    overflow: hidden;
    width: 15px
}

.g-body[data-page-name=index] .m-service .card-2 .star-1 .star-inner>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=index] .m-service .card-2 .star-1 .star-inner>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=index] .m-service .card-2 .star-1 .star-inner>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=index] .m-service .card-2 .star-1 .star-inner:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=index] .m-service .card-2 .star-1 {
    position: absolute;
    top: 10%;
    left: calc(50% - 7px)
}

.g-body[data-page-name=index] .m-service .card-2 .start-3 {
    --wave-y-distance: 10px;
    animation: wave-y 5s ease-in-out;
    animation-iteration-count: infinite;
    --u-width: 127;
    --u-height: 170;
    position: relative;
    overflow: hidden;
    width: calc(127/var(--card-size)*1000px)
}

.g-body[data-page-name=index] .m-service .card-2 .start-3>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=index] .m-service .card-2 .start-3>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=index] .m-service .card-2 .start-3>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=index] .m-service .card-2 .start-3:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=index] .m-service .card-2 .star-2 {
    transform-style: preserve-3d
}

.g-body[data-page-name=index] .m-service .card-2 .star-2 .star-inner {
    --u-width: 24;
    --u-height: 26;
    position: relative;
    overflow: hidden;
    width: 12px
}

.g-body[data-page-name=index] .m-service .card-2 .star-2 .star-inner>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=index] .m-service .card-2 .star-2 .star-inner>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=index] .m-service .card-2 .star-2 .star-inner>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=index] .m-service .card-2 .star-2 .star-inner:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=index] .m-service .card-2 .star-2 {
    position: absolute;
    bottom: 10%;
    left: calc(50% - 6px)
}

.g-body[data-page-name=index] .m-service .card-3 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: var(--radius);
    background-color: hsla(0,0%,100%,.58);
    box-shadow: 0 0 0 8px hsla(0,0%,100%,.2),inset 0 0 48.5px 0 hsla(0,0%,100%,.25);
    -webkit-backdrop-filter: blur(14.8px);
    backdrop-filter: blur(14.8px);
    filter: drop-shadow(0 17px 43.2px rgba(150,150,150,.13));
    --u-width: 343;
    --u-height: 328;
    position: relative;
    overflow: hidden;
    width: calc(343/var(--card-size)*1000px)
}

.g-body[data-page-name=index] .m-service .card-3>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=index] .m-service .card-3>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=index] .m-service .card-3>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=index] .m-service .card-3:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=index] .m-service .card-3 {
    overflow: visible
}

.g-body[data-page-name=index] .m-service .card-3:before {
    content: "";
    border: 1px solid #fff;
    border-radius: var(--radius);
    -webkit-mask-image: linear-gradient(180deg,rgba(0,0,0,.61),rgba(0,0,0,.17));
    mask-image: linear-gradient(180deg,rgba(0,0,0,.61),rgba(0,0,0,.17));
    position: absolute;
    inset: 0
}

.g-body[data-page-name=index] .m-service .card-3 .card-bg-1,.g-body[data-page-name=index] .m-service .card-3 .card-bg-2,.g-body[data-page-name=index] .m-service .card-3 .card-bg-3,.g-body[data-page-name=index] .m-service .card-3 .card-bg-4,.g-body[data-page-name=index] .m-service .card-3 .card-bg-5,.g-body[data-page-name=index] .m-service .card-3 .card-bg-6 {
    background-image: var(--bg);
    background-position: 50%;
    background-size: cover;
    position: absolute;
    inset: 0
}

.g-body[data-page-name=index] .m-service .card-3 .card-bg-1,.g-body[data-page-name=index] .m-service .card-3 .card-bg-6 {
    --mask-progress-start: 100%;
    --mask-progress-end: 150%;
    -webkit-mask-image: radial-gradient(100% 200% at 50% 0,#000 var(--mask-progress-start),transparent var(--mask-progress-end));
    mask-image: radial-gradient(100% 200% at 50% 0,#000 var(--mask-progress-start),transparent var(--mask-progress-end))
}

.g-body[data-page-name=index] .m-service .card-3 .card-inner {
    position: absolute;
    inset: 0
}

.g-body[data-page-name=index] .m-service .card-4 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: var(--radius);
    background-color: hsla(0,0%,100%,.58);
    box-shadow: 0 0 0 8px hsla(0,0%,100%,.2),inset 0 0 48.5px 0 hsla(0,0%,100%,.25);
    -webkit-backdrop-filter: blur(14.8px);
    backdrop-filter: blur(14.8px);
    filter: drop-shadow(0 17px 43.2px rgba(150,150,150,.13));
    --u-width: 315;
    --u-height: 227;
    position: relative;
    overflow: hidden;
    width: calc(315/var(--card-size)*1000px)
}

.g-body[data-page-name=index] .m-service .card-4>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=index] .m-service .card-4>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=index] .m-service .card-4>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=index] .m-service .card-4:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=index] .m-service .card-4 {
    overflow: visible
}

.g-body[data-page-name=index] .m-service .card-4:before {
    content: "";
    border: 1px solid #fff;
    border-radius: var(--radius);
    -webkit-mask-image: linear-gradient(180deg,rgba(0,0,0,.61),rgba(0,0,0,.17));
    mask-image: linear-gradient(180deg,rgba(0,0,0,.61),rgba(0,0,0,.17));
    position: absolute;
    inset: 0
}

.g-body[data-page-name=index] .m-service .card-4 .card-bg-1,.g-body[data-page-name=index] .m-service .card-4 .card-bg-2 {
    background-image: var(--bg);
    background-position: 50%;
    background-size: cover;
    position: absolute;
    inset: 0
}

.g-body[data-page-name=index] .m-service .card-4 .card-inner {
    position: absolute;
    inset: 0
}

.g-body[data-page-name=index] .m-service .card-4 .card-inner .dot-wrapper {
    position: relative;
    z-index: 100;
    width: 0;
    height: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

.g-body[data-page-name=index] .m-service .card-4 .card-inner .dot {
    flex: 0 0 auto;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='57' height='57' fill='none' viewBox='0 0 57 57'%3E%3Cg filter='url(%23a)' opacity='.4'%3E%3Ccircle cx='28.5' cy='28.5' r='9.5' fill='%23fff'/%3E%3C/g%3E%3Ccircle cx='28.5' cy='28.5' r='4.318' fill='%23fff'/%3E%3Cg filter='url(%23b)'%3E%3Ccircle cx='28.5' cy='28.5' r='6.045' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' width='27' height='27' x='15' y='15' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur result='effect1_foregroundBlur_21569_8373' stdDeviation='2'/%3E%3C/filter%3E%3Cfilter id='b' width='20.091' height='20.091' x='18.455' y='18.455' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur result='effect1_foregroundBlur_21569_8373' stdDeviation='2'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
    background-position: 50%;
    background-size: cover;
    --u-width: calc(57/var(--card-size)*1000px);
    width: var(--u-width);
    --u-height: calc(57/var(--card-size)*1000px);
    height: var(--u-height)
}

.g-body[data-page-name=index] .m-service .card-4 svg {
    --clip-progress: 100%;
    width: 100%;
    -webkit-clip-path: inset(0 var(--clip-progress) 0 0);
    clip-path: inset(0 var(--clip-progress) 0 0)
}

.g-body[data-page-name=index] .m-about {
    position: relative;
    display: flex;
    overflow: hidden;
    max-width: 1920px;
    margin: 0 auto;
    padding-top: 120px;
    padding-bottom: 92px;
    border-radius: 80px;
    justify-content: center
}

.g-body[data-page-name=index] .m-about:before {
    content: "";
    background: linear-gradient(90deg,#1666eb,#ad79cd);
    box-shadow: 0 0 200px 53px #fff;
    position: absolute;
    inset: 0
}

.g-body[data-page-name=index] .m-about .m-inner-wrapper {
    position: relative;
    z-index: 10;
    flex: 0 0 auto;
    width: 100vw;
    max-width: 1920px
}

.g-body[data-page-name=index] .m-about .m-container--inner {
    display: grid;
    grid-template-columns: repeat(2,1fr)
}

.g-body[data-page-name=index] .m-about .m-head {
    position: relative;
    z-index: 10;
    color: #fff
}

.g-body[data-page-name=index] .m-about .m-title {
    margin-bottom: 20px;
    font-size: 84px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-gray-950,#0f0f0f);
    line-height: 1.0238095238em;
    line-height: 1.02
}

.g-body[data-page-name=index] .m-about .m-title:after,.g-body[data-page-name=index] .m-about .m-title:before {
    display: table;
    content: ""
}

.g-body[data-page-name=index] .m-about .m-title:before {
    margin-bottom: -.173em
}

.g-body[data-page-name=index] .m-about .m-title:after {
    margin-top: -.102em
}

.g-body[data-page-name=index] .m-about .m-title {
    color: #fff
}

.g-body[data-page-name=index] .m-about .m-subtitle {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2727272727em
}

.g-body[data-page-name=index] .m-about .m-desc {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5em;
    max-width: 530px;
    margin-top: 34px;
    margin-bottom: 70px;
    color: hsla(0,0%,100%,.8)
}

.g-body[data-page-name=index] .m-about .m-footer {
    padding-top: 76px;
    border-top: 1px solid hsla(0,0%,100%,.2);
    grid-area: span 1/span 2
}

.g-body[data-page-name=index] .m-about .m-body {
    height: 500px;
    margin-top: -100px;
    margin-right: -40px;
    margin-bottom: 60px
}

.g-body[data-page-name=index] .m-about .c-map-box {
    position: relative;
    pointer-events: none;
    perspective: 1000px
}

.g-body[data-page-name=index] .m-about .c-map-box .panel--info {
    display: none
}

.g-body[data-page-name=index] .m-about .c-map-box .map-box--inner {
    transform: rotateX(55deg);
    transform-origin: center;
    transform-style: preserve-3d;
    --u-width: 1876;
    --u-height: 1316;
    position: relative;
    overflow: hidden;
    width: 938px
}

.g-body[data-page-name=index] .m-about .c-map-box .map-box--inner>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=index] .m-about .c-map-box .map-box--inner>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=index] .m-about .c-map-box .map-box--inner>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=index] .m-about .c-map-box .map-box--inner:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=index] .m-about .c-map-box .map-box--inner img {
    opacity: .6;
    -webkit-mask-image: radial-gradient(100% 200% at center,#000 0,transparent 50%);
    mask-image: radial-gradient(100% 200% at center,#000 0,transparent 50%)
}

.g-body[data-page-name=index] .m-about .c-map-box .j-line {
    position: absolute;
    display: flex;
    width: 0;
    height: 0;
    pointer-events: all;
    align-items: flex-end;
    justify-content: center
}

.g-body[data-page-name=index] .m-about .c-map-box .j-line:after {
    position: absolute;
    bottom: -10px;
    flex: 0 0 auto;
    width: 30px;
    height: 100px;
    content: ""
}

.g-body[data-page-name=index] .m-about .c-map-box .j-line .line--inner {
    position: relative;
    flex: 0 0 auto;
    width: 2px;
    height: 64px
}

.g-body[data-page-name=index] .m-about .c-map-box .j-line .line--inner-line {
    overflow: hidden;
    transition: .36s ease;
    position: absolute;
    inset: 0
}

.g-body[data-page-name=index] .m-about .c-map-box .j-line .line--inner-line:after {
    content: "";
    border-radius: 100px;
    background-image: linear-gradient(180deg,#fff,hsla(0,0%,100%,0));
    position: absolute;
    inset: 0
}

.g-body[data-page-name=index] .m-about .c-map-box .j-line .info-panel {
    position: absolute;
    z-index: 10;
    bottom: 18px;
    visibility: hidden;
    flex: 0 0 auto;
    width: 240px;
    padding: 18px 22px;
    transition: .36s ease;
    pointer-events: none;
    opacity: 0;
    border-radius: 10px;
    background: #fff
}

.g-body[data-page-name=index] .m-about .c-map-box .j-line .info-panel:after {
    position: absolute;
    z-index: 10;
    top: calc(100% - 7px);
    left: calc(50% - 5px);
    content: "";
    transform: rotate(45deg);
    border-radius: 2px;
    background-color: #fff;
    --u-width: 10px;
    width: var(--u-width);
    --u-height: 10px;
    height: var(--u-height)
}

.g-body[data-page-name=index] .m-about .c-map-box .j-line .city {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5555555556em;
    margin-bottom: 3px;
    color: var(--text-gray-800,#292929)
}

.g-body[data-page-name=index] .m-about .c-map-box .j-line .address {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3846153846em;
    color: var(--text-gray-500,#737373)
}

.g-body[data-page-name=index] .m-about .c-map-box .j-line .dot-title {
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
    line-height: 1em;
    position: absolute;
    top: 2px;
    left: 14px;
    transition: .36s ease;
    white-space: nowrap;
    color: #fff
}

.g-body[data-page-name=index] .m-about .c-map-box .j-line:hover .info-panel {
    bottom: 14px;
    visibility: visible;
    opacity: 1
}

.g-body[data-page-name=index] .m-about .c-map-box .j-line:hover .dot-title,.g-body[data-page-name=index] .m-about .c-map-box .j-line:hover .line--inner-line {
    opacity: 0
}

.g-body[data-page-name=index] .m-about .lighter-dot--wrapper {
    --x: 0;
    --y: 0;
    --w: 760;
    --h: 532;
    position: absolute;
    z-index: 10;
    top: calc(var(--y)/var(--h)*100%);
    left: calc(var(--x)/var(--w)*100%)
}

.g-body[data-page-name=index] .m-about .lighter-dot--wrapper .panel--info {
    position: absolute;
    bottom: calc(100% + 10px);
    visibility: hidden;
    width: 230px;
    padding: 12px 16px;
    transition: .36s ease;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.06)
}

.g-body[data-page-name=index] .m-about .lighter-dot--wrapper .panel--info:after {
    position: absolute;
    z-index: 10;
    top: calc(100% - 5px);
    left: calc(50% - 5px);
    content: "";
    transform: rotate(45deg);
    border-radius: 3px;
    background-color: #fff;
    --u-width: 10px;
    width: var(--u-width);
    --u-height: 10px;
    height: var(--u-height)
}

.g-body[data-page-name=index] .m-about .lighter-dot--wrapper .panel--info .title {
    font-size: 14px;
    font-weight: 500;
    line-height: 180%;
    color: #292929
}

.g-body[data-page-name=index] .m-about .lighter-dot--wrapper .panel--info .subtitle {
    font-size: 12px;
    font-weight: 400;
    line-height: 180%;
    color: #525252
}

.g-body[data-page-name=index] .m-about .lighter-dot--wrapper:first-of-type {
    --x: 532;
    --y: 253
}

.g-body[data-page-name=index] .m-about .lighter-dot--wrapper:nth-of-type(2) {
    --x: 570;
    --y: 359
}

.g-body[data-page-name=index] .m-about .lighter-dot--wrapper:nth-of-type(3) {
    --x: 591;
    --y: 381
}

.g-body[data-page-name=index] .m-about .lighter-dot--wrapper:nth-of-type(4) {
    --x: 420;
    --y: 405
}

.g-body[data-page-name=index] .m-about .lighter-dot--wrapper:nth-of-type(5) {
    --x: 500;
    --y: 479
}

.g-body[data-page-name=index] .m-about .lighter-dot--wrapper:hover {
    z-index: 100
}

.g-body[data-page-name=index] .m-about .lighter-dot--wrapper:hover .panel--info {
    bottom: calc(100% + 20px);
    visibility: visible;
    opacity: 1
}

.g-body[data-page-name=index] .m-about .c-count-up-group {
    color: #fff;
    gap: 100px
}

.g-body[data-page-name=index] .m-about .c-count-up-group .item-num {
    gap: 4px
}

.g-body[data-page-name=index] .m-about .c-count-up-group .num {
    font-size: 60px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.067
}

.g-body[data-page-name=index] .m-about .c-count-up-group .num:after,.g-body[data-page-name=index] .m-about .c-count-up-group .num:before {
    display: table;
    content: ""
}

.g-body[data-page-name=index] .m-about .c-count-up-group .num:before {
    margin-bottom: -.1965em
}

.g-body[data-page-name=index] .m-about .c-count-up-group .num:after {
    margin-top: -.1255em
}

.g-body[data-page-name=index] .m-about .c-count-up-group .unit {
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em;
    color: #fff
}

.g-body[data-page-name=index] .m-about .c-count-up-group .item-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    margin-top: 16px;
    color: hsla(0,0%,100%,.8)
}

.g-body[data-page-name=index] .m-case .js-split-line,.g-body[data-page-name=index] .m-case .js-split-text {
    -webkit-clip-path: polygon(0 0,100% 0,100% 120%,0 120%);
    clip-path: polygon(0 0,100% 0,100% 120%,0 120%)
}

.g-body[data-page-name=index] .m-case .swiper {
    overflow: visible;
    cursor: grab
}

.g-body[data-page-name=index] .m-case .swiper .swiper-wrapper {
    transition: transform .6s cubic-bezier(.2,.6,.3,1)!important
}

.g-body[data-page-name=index] .m-case .swiper[data-touch] {
    cursor: grabbing
}

.g-body[data-page-name=index] .m-case .swiper[data-touch] .swiper-wrapper {
    transition: transform .3s cubic-bezier(.2,.6,.3,1)!important
}

.g-body[data-page-name=index] .m-case .swiper[data-touch] .item-thumb {
    transform: scale(.97)
}

.g-body[data-page-name=index] .m-case .swiper[data-touch] img {
    transform: scale(1.1)
}

.g-body[data-page-name=index] .m-partners {
    padding-top: 83px;
    padding-bottom: 156px
}

.g-body[data-page-name=index] .m-partners .m-head {
    margin-bottom: 100px
}

.g-body[data-page-name=index] .m-partners .m-title {
    --size: 84px;
    font-size: var(--size);
    font-weight: 700;
    line-height: 1.0238095238em;
    position: relative;
    text-align: center;
    letter-spacing: -.02em;
    color: var(--text-gray-950,#0f0f0f)
}

.g-body[data-page-name=index] .m-partners .m-title .decoration-tag {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    position: absolute;
    right: calc(var(--size)*-.46);
    bottom: calc(var(--size)*.46);
    padding: 15px 24px;
    transform: rotate(8.495deg);
    letter-spacing: 0;
    color: #fff;
    border-radius: 9999px;
    background: linear-gradient(90deg,#1666eb,#ad79cd)
}

.g-body[data-page-name=index] .m-partners .m-subtitle {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2727272727em;
    margin-top: 10px;
    text-align: center;
    color: var(--text-gray-700,#424242)
}

.g-body[data-page-name=index] .m-partners .m-desc {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    max-width: 461px;
    margin-top: 27px;
    text-align: center;
    color: var(--text-gray-600,#525252)
}

.g-body[data-page-name=index] .m-partners .partner-list {
    --mask-progress-start: 100%;
    --mask-progress-end: 150%;
    max-width: 1386px;
    margin: 0 auto;
    gap: 31px;
    -webkit-mask-image: radial-gradient(100% 200% at 50% 0,#000 var(--mask-progress-start),transparent var(--mask-progress-end));
    mask-image: radial-gradient(100% 200% at 50% 0,#000 var(--mask-progress-start),transparent var(--mask-progress-end))
}

.g-body[data-page-name=index] .m-partners .partner-item {
    --u-width: 287;
    --u-height: 104;
    position: relative;
    overflow: hidden;
    width: 100%
}

.g-body[data-page-name=index] .m-partners .partner-item>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=index] .m-partners .partner-item>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=index] .m-partners .partner-item>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=index] .m-partners .partner-item:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

@media(max-width: 1679.98px) {
    .g-body[data-page-name=index] .m-banner .c-info-head .info-title {
        font-size:74px
    }

    .g-body[data-page-name=index] .m-banner .c-info-head .info-subtitle {
        font-size: 34px
    }

    .g-body[data-page-name=index] .m-banner .c-info-head .info-desc {
        margin-top: 32px
    }

    .g-body[data-page-name=index] .m-service .m-title {
        font-size: 74px
    }

    .g-body[data-page-name=index] .m-service {
        --card-size: 1060
    }

    .g-body[data-page-name=index] .m-service .m-btn {
        margin-top: 40px
    }

    .g-body[data-page-name=index] .m-service .m-desc,.g-body[data-page-name=index] .m-service .m-subtitle {
        margin-top: 18px
    }

    .g-body[data-page-name=index] .m-partners .m-title {
        --size: 74px
    }

    .g-body[data-page-name=index] .m-partners .m-title .decoration-tag {
        font-size: 18px
    }

    .g-body[data-page-name=index] .m-about .m-title {
        font-size: 74px
    }

    .g-body[data-page-name=index] .m-about .c-count-up-group .num {
        font-size: 56px
    }

    .g-body[data-page-name=index] .m-about .c-map-box .map-box--inner {
        width: 860px
    }

    .g-body[data-page-name=index] .m-about .m-container--inner {
        padding: 0 30px
    }

    .g-body[data-page-name=index] .m-about {
        padding-top: 110px;
        padding-bottom: 72px
    }

    .g-body[data-page-name=index] .m-about .m-footer {
        padding-top: 66px
    }

    .g-body[data-page-name=index] .m-about .m-body {
        margin-bottom: 50px
    }
}

@media(max-width: 1559.98px) {
    .g-body[data-page-name=index] .m-about .m-title,.g-body[data-page-name=index] .m-banner .c-info-head .info-title,.g-body[data-page-name=index] .m-partners .m-title,.g-body[data-page-name=index] .m-service .m-title {
        font-size:70px
    }

    .g-body[data-page-name=index] .m-banner .c-info-head .info-subtitle {
        font-size: 32px
    }

    .g-body[data-page-name=index] .m-banner .c-info-head .info-desc {
        margin-top: 28px
    }

    .g-body[data-page-name=index] .m-banner .l-swiper-controller {
        padding-bottom: 42px
    }

    .g-body[data-page-name=index] .m-service {
        --card-size: 1130
    }

    .g-body[data-page-name=index] .m-partners .m-title .decoration-tag {
        font-size: 16px
    }

    .g-body[data-page-name=index] .m-about .c-count-up-group .num {
        font-size: 54px
    }

    .g-body[data-page-name=index] .m-about {
        border-radius: 70px
    }

    .g-body[data-page-name=index] .m-about .m-container--inner {
        padding: 0
    }
}

@media(max-width: 1439.98px) {
    .g-body[data-page-name=index] .m-about .m-title,.g-body[data-page-name=index] .m-banner .c-info-head .info-title,.g-body[data-page-name=index] .m-partners .m-title,.g-body[data-page-name=index] .m-service .m-title {
        font-size:64px
    }

    .g-body[data-page-name=index] .m-service {
        --card-size: 1200
    }

    .g-body[data-page-name=index] .m-about .c-count-up-group .num {
        font-size: 46px
    }

    .g-body[data-page-name=index] .m-about .c-count-up-group {
        gap: 90px
    }

    .g-body[data-page-name=index] .m-about .m-container--inner {
        padding: 0 30px
    }

    .g-body[data-page-name=index] .m-about .m-head {
        width: 470px
    }

    .g-body[data-page-name=index] .m-about .c-map-box .map-box--inner {
        width: 860px;
        margin-left: -80px
    }

    .g-body[data-page-name=index] .m-about .m-body {
        min-width: 0
    }
}

@media(max-width: 767.98px) {
    .g-body[data-page-name=index] .m-banner {
        -webkit-clip-path:inset(0);
        clip-path: inset(0)
    }

    .g-body[data-page-name=index] .m-banner .l-layer--bg-2 {
        background-image: var(--bg);
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: contain
    }

    .g-body[data-page-name=index] .m-banner .l-layer--bg-2>* {
        display: none
    }

    .g-body[data-page-name=index] .m-banner .c-info-head .info-title {
        font-size: 36px;
        margin-bottom: 16px
    }

    .g-body[data-page-name=index] .m-banner .c-info-head .info-subtitle {
        font-size: 26px
    }

    .g-body[data-page-name=index] .m-banner .c-info-head {
        overflow: hidden;
        padding: 0 10px
    }

    .g-body[data-page-name=index] .m-banner .c-info-head .info-desc {
        font-size: 16px;
        margin-top: 20px
    }

    .g-body[data-page-name=index] .m-about .m-title,.g-body[data-page-name=index] .m-partners .m-title,.g-body[data-page-name=index] .m-service .m-title {
        font-size: 46px
    }

    .g-body[data-page-name=index] .m-banner .m-body {
        padding-bottom: 100px
    }

    .g-body[data-page-name=index] .m-banner .l-layer--bg video {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .g-body[data-page-name=index] .m-banner .swiper {
        -webkit-mask-image: none;
        mask-image: none
    }

    .g-body[data-page-name=index] .m-service .m-container--inner {
        display: block;
        height: auto
    }

    .g-body[data-page-name=index] .m-service .m-body {
        position: static;
        width: 100%;
        height: auto;
        margin-top: 60px
    }

    .g-body[data-page-name=index] .m-service {
        --card-size: 1070;
        padding-top: 80px;
        padding-bottom: 10px;
        -webkit-mask-image: none;
        mask-image: none;
        perspective: 1000px
    }

    .g-body[data-page-name=index] .m-service .circle-wrapper {
        --card-size: 1400;
        top: -40%
    }

    .g-body[data-page-name=index] .m-service .circle-wrapper:before {
        z-index: 100;
        content: "";
        background: linear-gradient(0deg,hsla(0,0%,95%,.6),hsla(0,0%,95%,.8) 60%);
        position: absolute;
        inset: 0
    }

    .g-body[data-page-name=index] .m-service .card-wrapper.card-wrapper {
        width: 100%;
        height: auto;
        margin-bottom: 60px;
        transform: translateZ(0)
    }

    .g-body[data-page-name=index] .m-service .card-wrapper:nth-child(2) {
        margin-bottom: 90px
    }

    .g-body[data-page-name=index] .m-service .m-subtitle {
        font-size: 18px;
        margin-top: 16px
    }

    .g-body[data-page-name=index] .m-case {
        padding-bottom: 30px
    }

    .g-body[data-page-name=index] .m-partners .m-title .decoration-tag {
        font-size: 12px;
        bottom: calc(var(--size)*.29);
        padding: 10px 16px
    }

    .g-body[data-page-name=index] .m-partners .m-head {
        margin-bottom: 60px
    }

    .g-body[data-page-name=index] .m-partners .partner-list {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .g-body[data-page-name=index] .m-partners {
        padding-top: 60px;
        padding-bottom: 86px
    }

    .g-body[data-page-name=index] .m-partners .m-subtitle {
        font-size: 18px;
        margin-top: 6px
    }

    .g-body[data-page-name=index] .m-case .swiper .swiper-wrapper {
        display: block
    }

    .g-body[data-page-name=index] .m-case .case-item {
        --radius: 26px;
        margin-bottom: 40px
    }

    .g-body[data-page-name=index] .m-case .case-item .tag--inner {
        font-size: 14px;
        min-width: 152px;
        padding: 12px 0;
        padding-right: 13px
    }

    .g-body[data-page-name=index] .m-case .case-item .item-category-tag {
        padding: 0 0 14px
    }

    .g-body[data-page-name=index] .m-case .case-item .item-info {
        padding-top: 16px
    }

    .g-body[data-page-name=index] .m-case .case-item:last-child {
        margin-bottom: 0
    }

    .g-body[data-page-name=index] .m-about {
        padding-top: 70px;
        padding-bottom: 70px;
        border-radius: 50px
    }

    .g-body[data-page-name=index] .m-about .m-container--inner {
        display: block;
        padding: 0
    }

    .g-body[data-page-name=index] .m-about .c-map-box .map-box--inner {
        width: 700px;
        margin-left: -140px
    }

    .g-body[data-page-name=index] .m-about .c-map-box .j-line .line--inner {
        height: 54px
    }

    .g-body[data-page-name=index] .m-about .m-body {
        height: 200px;
        margin: 0;
        margin-bottom: 130px
    }

    .g-body[data-page-name=index] .m-about .c-map-box .j-line .dot-title {
        font-size: 14px
    }

    .g-body[data-page-name=index] .m-about .m-head {
        width: 100%
    }

    .g-body[data-page-name=index] .m-about .c-count-up-group .item-num,.g-body[data-page-name=index] .m-about .m-footer {
        justify-content: center
    }

    .g-body[data-page-name=index] .m-about .c-count-up-group {
        flex-direction: column;
        gap: 50px
    }

    .g-body[data-page-name=index] .m-about .c-count-up-group .item-title {
        margin-top: 12px;
        text-align: center
    }

    .g-body[data-page-name=index] .m-about .m-footer {
        padding-top: 56px
    }

    .g-body[data-page-name=index] .m-about .c-count-up-group .num {
        font-size: 40px
    }

    .g-body[data-page-name=index] .m-about .c-count-up-group .unit {
        font-size: 16px
    }

    .g-body[data-page-name=index] .m-about .m-title {
        margin-bottom: 16px
    }

    .g-body[data-page-name=index] .m-about .m-subtitle {
        font-size: 18px
    }

    .g-body[data-page-name=index] .m-about .m-desc {
        margin-bottom: 50px
    }
}

.g-body[data-page-name=service] .m-service {
    overflow: hidden;
    padding-top: calc(var(--g-size-nav-height) + 120px);
    background-color: #fff
}

.g-body[data-page-name=service] .m-service .js-split-line,.g-body[data-page-name=service] .m-service .js-split-text {
    -webkit-clip-path: polygon(0 0,100% 0,100% 120%,0 120%);
    clip-path: polygon(0 0,100% 0,100% 120%,0 120%)
}

.g-body[data-page-name=service] .m-service.js-media-desktop .card-group {
    height: calc(100vh - var(--g-size-nav-mini-height))
}

.g-body[data-page-name=service] .m-service.js-media-desktop .m-card-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.g-body[data-page-name=service] .m-service .m-bg {
    max-width: 2200px;
    margin: 0 auto
}

.g-body[data-page-name=service] .m-service .m-bg .m-bg--inner {
    flex: 0 0 auto;
    --u-width: 4204;
    --u-height: 1724;
    position: relative;
    overflow: hidden;
    width: 110%
}

.g-body[data-page-name=service] .m-service .m-bg .m-bg--inner>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=service] .m-service .m-bg .m-bg--inner>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=service] .m-service .m-bg .m-bg--inner>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=service] .m-service .m-bg .m-bg--inner:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=service] .m-service .m-bg {
    position: absolute;
    top: 0;
    right: 0;
    left: 0
}

.g-body[data-page-name=service] .m-service .m-inner {
    max-width: 1920px;
    margin: 0 auto
}

.g-body[data-page-name=service] .m-service .m-head {
    margin-bottom: 120px;
    text-align: center
}

.g-body[data-page-name=service] .m-service .m-title {
    -webkit-clip-path: inset(-10% 0 -20% 0);
    clip-path: inset(-10% 0 -20% 0);
    font-size: 84px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-gray-950,#0f0f0f);
    line-height: 1.02
}

.g-body[data-page-name=service] .m-service .m-title:after,.g-body[data-page-name=service] .m-service .m-title:before {
    display: table;
    content: ""
}

.g-body[data-page-name=service] .m-service .m-title:before {
    margin-bottom: -.173em
}

.g-body[data-page-name=service] .m-service .m-title:after {
    margin-top: -.102em
}

.g-body[data-page-name=service] .m-service .m-subtitle {
    font-size: 32px;
    line-height: 1.25em;
    margin-top: 24px;
    color: var(--text-gray-800,#292929);
    -webkit-clip-path: inset(0);
    clip-path: inset(0)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper {
    position: relative;
    perspective: 500px
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card {
    overflow: hidden;
    padding-top: 80px;
    padding-bottom: 120px;
    border-radius: 80px 80px 0 0
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card-1 {
    background: linear-gradient(180deg,#fff1f1,#fff)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card-1 .l-0 {
    --clip-progress: 0;
    -webkit-clip-path: inset(0 var(--clip-progress) 0 0);
    clip-path: inset(0 var(--clip-progress) 0 0)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card-1 .l-0 img {
    position: absolute;
    inset: 0
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card-2 {
    background: linear-gradient(180deg,#ffebe4,#fff)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card-2 .l-0 {
    --clip-progress: 0;
    -webkit-clip-path: inset(0 var(--clip-progress) 0 0);
    clip-path: inset(0 var(--clip-progress) 0 0)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card-2 .l-0 img {
    position: absolute;
    inset: 0
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card-3 {
    background: linear-gradient(180deg,#ffefd9,#fff)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card-4 {
    background: linear-gradient(180deg,#f1d9ff,#fff)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card-5 {
    background: linear-gradient(180deg,#d9e8ff,#fff)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .m-container--inner>.state--pos-left {
    max-width: 673px
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card-head {
    padding-bottom: 40px;
    border-bottom: 2px dotted rgba(0,0,0,.2)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card-title {
    font-size: 40px;
    font-weight: 500;
    line-height: 1.25em;
    color: var(--text-gray-950,#0f0f0f)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card-subtitle {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5555555556em;
    margin-top: 12px;
    color: var(--text-gray-800,#292929)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card-desc {
    font-size: 15px;
    font-weight: 500;
    line-height: 200%;
    padding: 32px 0;
    color: var(--text-gray-600,#525252)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card-tags {
    max-width: 598px;
    gap: 19px
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card-tag {
    font-size: 15px;
    font-weight: 500;
    line-height: 200%;
    color: var(--text-gray-600,#525252);
    gap: 6px
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card-tag .ic {
    display: block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%2326C061' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 11.878c.941.685 2.824 2.568 3.595 3.852.941-2.054 3.337-6.676 5.905-8.73'/%3E%3C/svg%3E");
    background-position: 50%;
    background-size: cover;
    --u-width: 24px;
    width: var(--u-width);
    --u-height: 24px;
    height: var(--u-height)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card-link {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    transition: .36s ease;
    color: var(--text-gray-700,#424242)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card-link .ic {
    display: block;
    margin-right: 10px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23A3A3A3' d='M18 4c1.105 0 2 .883 2 1.973V9.34c0 1.09-.895 1.973-2 1.973h-3c-1.105 0-2-.884-2-1.973V5.973C13 4.883 13.895 4 15 4zM6 4c-1.105 0-2 .883-2 1.973V9.34c0 1.09.895 1.973 2 1.973h3c1.105 0 2-.884 2-1.973V5.973C11 4.883 10.105 4 9 4zM18 13.188c1.105 0 2 .883 2 1.972v3.367c0 1.09-.895 1.973-2 1.973h-3c-1.105 0-2-.883-2-1.973V15.16c0-1.09.895-1.973 2-1.973zM6 13.188c-1.105 0-2 .883-2 1.972v3.367c0 1.09.895 1.973 2 1.973h3c1.105 0 2-.883 2-1.973V15.16c0-1.09-.895-1.973-2-1.973z'/%3E%3C/svg%3E");
    background-position: 50%;
    background-size: cover;
    --u-width: 24px;
    width: var(--u-width);
    --u-height: 24px;
    height: var(--u-height)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card-link:hover {
    color: var(--text-gray-950,#0f0f0f)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .card-footer {
    margin-top: 60px
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area {
    --stage-size: 688;
    --u-width: 688;
    --u-height: 663;
    position: relative;
    overflow: hidden;
    width: calc(var(--stage-size)*1px)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area {
    overflow: visible
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .card-2-start {
    position: absolute;
    top: 50%;
    --u-width: 103;
    --u-height: 103;
    position: relative;
    overflow: hidden;
    width: 14.9709%
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .card-2-start>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .card-2-start>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .card-2-start>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .card-2-start:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .card-2-start {
    overflow: visible
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .card-2-start:before {
    width: 353.398%;
    height: 374.7572%;
    content: "";
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='364' height='386' fill='none' viewBox='0 0 364 386'%3E%3Cg filter='url(%23a)'%3E%3Cpath fill='%23FFACAC' d='M230.954 153.267c-7.434-5.921-54.27-34.047-66.165-30.346-4.46-1.974-16.058-2.073-26.763 13.323-13.381 19.244 11.895 66.614 0 93.26s26.763 46.631 45.349 25.906c18.586-20.724 36.428-34.047 51.296-65.874 14.869-31.828 3.717-30.347-3.717-36.269'/%3E%3C/g%3E%3Cg filter='url(%23b)'%3E%3Cpath fill='%23FFD8AC' d='M169.204 184.882c-5.92-4.712-43.215-27.094-52.686-24.149-3.552-1.571-12.787-1.649-21.312 10.602-10.656 15.314 9.472 53.01 0 74.214s21.311 37.107 36.111 20.615 29.007-27.094 40.847-52.421 2.96-24.149-2.96-28.861'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' width='351.2' height='385.2' x='12.4' y='.4' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur result='effect1_foregroundBlur_21615_4227' stdDeviation='60.8'/%3E%3C/filter%3E%3Cfilter id='b' width='268.8' height='295.8' x='.6' y='68.6' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur result='effect1_foregroundBlur_21615_4227' stdDeviation='45.7'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
    background-position: 50%;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .circle-1 {
    --c-size: calc(var(--stage-size)*0.28779*1px);
    z-index: 10;
    border-radius: 10000px;
    background: hsla(0,0%,100%,.76);
    box-shadow: 0 12px 16px -4px rgba(90,90,90,.08),0 4px 6px -2px hsla(0,0%,69%,.03);
    --u-width: 198;
    --u-height: 198;
    position: relative;
    overflow: hidden;
    width: var(--c-size)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .circle-1>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .circle-1>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .circle-1>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .circle-1:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .circle-2 {
    --c-size: calc(var(--stage-size)*0.53488*1px);
    border: 2px solid #fff;
    background: hsla(0,0%,100%,.44);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    --u-size: var(--c-size);
    width: var(--u-size);
    height: var(--u-size);
    border-radius: 50%
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .circle-3 {
    --c-size: calc(var(--stage-size)*0.75291*1px);
    background: hsla(0,0%,100%,.16);
    --u-size: var(--c-size)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .circle-3,.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .circle-4 {
    border: 2px solid hsla(0,0%,100%,.5);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    width: var(--u-size);
    height: var(--u-size);
    border-radius: 50%
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .circle-4 {
    --c-size: calc(var(--stage-size)*0.96512*1px);
    --u-size: var(--c-size)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .dot {
    --rotate: 0deg;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: rotate(var(--rotate));
    display: flex;
    justify-content: center;
    align-items: center
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .dot--inner {
    flex: 0 0 auto;
    transform: translateX(calc(var(--c-size)*-.5)) rotate(calc(var(--rotate)*-1));
    --u-width: 100;
    --u-height: 100;
    position: relative;
    overflow: hidden;
    width: calc(var(--size)/2/688*var(--stage-size)*1px)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .dot--inner>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .dot--inner>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .dot--inner>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .dot--inner:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .dot-1 {
    --rotate: 8deg
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .dot-2 {
    --rotate: -40deg
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .dot-3 {
    --rotate: -135deg
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .dot-4 {
    --rotate: -195deg
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .dot-5 {
    --rotate: 50deg
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .dot-6 {
    --rotate: -156deg
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .dot-7 {
    --rotate: 138deg
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .dot-8 {
    --rotate: 28deg
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .dot-9 {
    --rotate: -46deg
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .dot-10 {
    --rotate: -116deg
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .notice {
    position: absolute;
    right: 25%;
    bottom: 30%
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .sticker {
    z-index: 10;
    --u-width: 97;
    --u-height: 102;
    position: relative;
    overflow: hidden;
    width: calc(var(--stage-size)*.07049*1px)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .sticker>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .sticker>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .sticker>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .sticker:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .note-1 {
    --u-width: 324;
    --u-height: 354;
    position: relative;
    overflow: hidden;
    width: calc(var(--stage-size)*.23547*1px)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .note-1>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .note-1>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .note-1>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .note-1:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .note-1 {
    position: absolute;
    top: 49%;
    right: -58%;
    transform-origin: center top
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .note-2 {
    --u-width: 305;
    --u-height: 333;
    position: relative;
    overflow: hidden;
    width: calc(var(--stage-size)*.22166*1px)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .note-2>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .note-2>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .note-2>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .note-2:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area .note-2 {
    position: absolute;
    top: 32%;
    left: -15%;
    transform: rotate(-14.34deg);
    transform-origin: center top
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-layer {
    perspective: 2000px;
    position: absolute;
    inset: 0
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-3-tag {
    --u-width: 100;
    --u-height: 100;
    --x: 0;
    --y: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-3-tag:first-child {
    --u-width: 338;
    --u-height: 112;
    --x: -80;
    --y: 120;
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-3-tag:nth-child(2) {
    --u-width: 400;
    --u-height: 112;
    --x: 100;
    --y: 50;
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-3-tag:nth-child(3) {
    --u-width: 422;
    --u-height: 112;
    --x: -180;
    --y: 20;
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-3-tag:nth-child(4) {
    --u-width: 510;
    --u-height: 112;
    --x: 90;
    --y: -150;
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-3-tag:nth-child(5) {
    --u-width: 400;
    --u-height: 112;
    --x: 70;
    --y: -50;
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-3-tag:nth-child(6) {
    --u-width: 162;
    --u-height: 52;
    --x: -256;
    --y: -36;
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-3-tag:nth-child(7) {
    --u-width: 134;
    --u-height: 82;
    --x: 108;
    --y: 108
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-3-tag:nth-child(8) {
    --u-width: 534;
    --u-height: 112;
    --x: -230;
    --y: -80;
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-3-tag:nth-child(9) {
    --u-width: 354;
    --u-height: 112;
    --x: -290;
    --y: 110;
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-3-tag:nth-child(10) {
    --u-width: 354;
    --u-height: 112;
    --x: -200;
    --y: -180;
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-3-tag:nth-child(11) {
    --u-width: 422;
    --u-height: 112;
    --x: -170;
    --y: 220;
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-3-tag:nth-child(12) {
    --u-width: 354;
    --u-height: 112;
    --x: 130;
    --y: 160;
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-3-tag:nth-child(13) {
    --u-width: 78;
    --u-height: 38;
    --x: -99;
    --y: -126
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-3-tag:nth-child(14) {
    --u-width: 50;
    --u-height: 24;
    --x: -63;
    --y: -99
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-3-tag--inner {
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    width: calc(var(--u-width)/2/688*var(--stage-size)*1px);
    transform: translate3d(calc(var(--x)/688*var(--stage-size)*1px),calc(var(--y)/688*var(--stage-size)*1px),0)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-3-tag--inner>img {
    position: absolute;
    width: 100%;
    height: 100%;
}

@supports(object-fit: cover) {
    .g-body[data-page-name=service] .m-service .m-card-wrapper .stage-3-tag--inner>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=service] .m-service .m-card-wrapper .stage-3-tag--inner>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-3-tag--inner:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-4-circle-group {
    width: calc(var(--stage-size)*.90843*1px);
    height: calc(var(--stage-size)*.90843*1px)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-4-circle-1 {
    border: 1px dashed rgba(103,132,194,.2);
    background: hsla(0,0%,100%,.2);
    --u-size: 100%;
    width: var(--u-size);
    height: var(--u-size);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-4-circle-2 {
    border: 1px dashed rgba(103,132,194,.4);
    background: hsla(0,0%,100%,.276);
    --u-size: calc(var(--stage-size)*0.6875*1px);
    width: var(--u-size);
    height: var(--u-size);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0)
}

.g-body[data-page-name=service] .m-service .m-card-wrapper .stage-4-circle-3 {
    border: 1px dashed rgba(103,132,194,.7);
    background: hsla(0,0%,100%,.546);
    --u-size: calc(var(--stage-size)*0.46076*1px);
    width: var(--u-size);
    height: var(--u-size);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0)
}

.g-body[data-page-name=service] .m-product {
    position: relative;
    z-index: 10;
    overflow: hidden;
    padding-top: 90px;
    padding-bottom: 8px;
    background-image: linear-gradient(180deg,#fff calc(100% - 90px),var(--g-color--bg) calc(100% - 90px))
}

.g-body[data-page-name=service] .m-product .m-head {
    text-align: center
}

.g-body[data-page-name=service] .m-product .m-title {
    -webkit-clip-path: inset(-10% 0 -20% 0);
    clip-path: inset(-10% 0 -20% 0);
    font-size: 84px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-gray-950,#0f0f0f);
    line-height: 1.02
}

.g-body[data-page-name=service] .m-product .m-title:after,.g-body[data-page-name=service] .m-product .m-title:before {
    display: table;
    content: ""
}

.g-body[data-page-name=service] .m-product .m-title:before {
    margin-bottom: -.173em
}

.g-body[data-page-name=service] .m-product .m-title:after {
    margin-top: -.102em
}

.g-body[data-page-name=service] .m-product .m-subtitle {
    font-size: 32px;
    line-height: 1.25em;
    margin-top: 24px;
    color: var(--text-gray-800,#292929);
    -webkit-clip-path: inset(0);
    clip-path: inset(0)
}

.g-body[data-page-name=service] .m-product .tab-bar {
    font-size: 18px;
    line-height: 1.5555555556em;
    margin-top: 74px;
    color: var(--text-gray-500,#737373)
}

.g-body[data-page-name=service] .m-product .tab-bar--inner {
    gap: 18px
}

.g-body[data-page-name=service] .m-product .tab-btn {
    display: flex;
    padding: 13px 33px;
    cursor: pointer;
    transition: .26s ease;
    white-space: nowrap;
    border-radius: 100px;
    align-items: center
}

.g-body[data-page-name=service] .m-product .tab-btn:before {
    display: block;
    flex: 0 0 auto;
    margin-right: 10px;
    content: "";
    transition: .26s ease;
    transform: translateX(-10px);
    opacity: 0;
    --u-size: 6px;
    width: var(--u-size);
    height: var(--u-size);
    border-radius: 50%;
    --u-color: #1666eb;
    background-color: var(--u-color)
}

.g-body[data-page-name=service] .m-product .tab-btn[data-active] {
    padding: 13px 52px;
    color: #1666eb;
    background-color: #fff
}

.g-body[data-page-name=service] .m-product .tab-btn[data-active]:before {
    transform: translateX(0);
    opacity: 1
}

.g-body[data-page-name=service] .m-product .tab-btn:hover {
    color: #1666eb
}

.g-body[data-page-name=service] .m-product .tab-btn:hover:before {
    transform: translateX(0);
    opacity: 1
}

.g-body[data-page-name=service] .m-product .m-body {
    position: relative;
    z-index: 10;
    margin-top: 63px;
    padding-bottom: 90px
}

.g-body[data-page-name=service] .m-product .m-body .l-bg {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    justify-content: center
}

.g-body[data-page-name=service] .m-product .m-body .l-bg-2 {
    z-index: 20;
    border-radius: 0 0 90px 90px;
    background: hsla(0,0%,100%,.9);
    background-clip: content-box;
    box-shadow: 0 0 0 8px hsla(0,0%,100%,.2);
    -webkit-backdrop-filter: blur(29.2px);
    backdrop-filter: blur(29.2px);
    position: absolute;
    inset: 0
}

.g-body[data-page-name=service] .m-product .m-body .l-bg--inner {
    transform: translateY(-40%);
    --u-width: 5444;
    --u-height: 5199;
    position: relative;
    overflow: hidden;
    width: 2722px
}

.g-body[data-page-name=service] .m-product .m-body .l-bg--inner>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=service] .m-product .m-body .l-bg--inner>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=service] .m-product .m-body .l-bg--inner>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=service] .m-product .m-body .l-bg--inner:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=service] .m-product .m-body .l-bg-2--inner {
    top: 0;
    right: 2.3717%;
    --u-width: 759;
    --u-height: 692;
    position: relative;
    overflow: hidden;
    width: 24.3269%
}

.g-body[data-page-name=service] .m-product .m-body .l-bg-2--inner>img {
    position: absolute;
    width: 100%;
    height: 100%
}

@supports(object-fit: cover) {
    .g-body[data-page-name=service] .m-product .m-body .l-bg-2--inner>img {
        top:0;
        left: 0;
        object-fit: cover;
        object-position: center
    }
}

@supports not (object-fit: cover) {
    .g-body[data-page-name=service] .m-product .m-body .l-bg-2--inner>img {
        top:50%;
        left: 50%;
        transform: translate3d(-50%,50%)
    }
}

.g-body[data-page-name=service] .m-product .m-body .l-bg-2--inner:after {
    display: block;
    width: 100%;
    padding-top: calc(var(--u-height)/var(--u-width)*100%);
    content: ""
}

.g-body[data-page-name=service] .m-product .m-body .l-bg-2--inner {
    position: absolute
}

.g-body[data-page-name=service] .m-product .m-body .m-container--inner {
    min-height: 500px;
    padding-top: 90px;
    padding-bottom: 90px
}

.g-body[data-page-name=service] .m-product .pre-uebuilder-area {
    font-size: 15px;
    line-height: 200%;
    color: var(--text-gray-500,#737373)
}

.g-body[data-page-name=service] .m-product .pre-uebuilder-area .row-1 {
    padding: 16px 0 60px
}

.g-body[data-page-name=service] .m-product .pre-uebuilder-area .row-1 .title {
    font-size: 36px;
    line-height: 122.222%;
    color: #0f0f0f
}

.g-body[data-page-name=service] .m-product .pre-uebuilder-area hr {
    border-width: 0;
    border-bottom: 2px dotted rgba(0,0,0,.1)
}

.g-body[data-page-name=service] .m-product .pre-uebuilder-area .row-2 {
    padding: 60px 0
}

.g-body[data-page-name=service] .m-product .pre-uebuilder-area .icon-box {
    margin-right: 10px
}

.g-body[data-page-name=service] .m-product .pre-uebuilder-area .min-title {
    color: var(--text-gray-800,#292929)
}

.g-body[data-page-name=service] .m-product .pre-uebuilder-area .grid-table {
    gap: 40px 26px
}

.g-body[data-page-name=service] .m-product .pre-uebuilder-area strong {
    color: var(--text-gray-800,#292929)
}

.g-body[data-page-name=service] .m-product .pre-uebuilder-area .row-4 {
    padding: 40px 0
}

.g-body[data-page-name=service] .m-product .pre-uebuilder-area .video-box {
    position: relative;
    overflow: hidden;
    border-radius: 40px
}

.g-body[data-page-name=service] .m-product .pre-uebuilder-area .play--btn {
    font-size: 20px;
    line-height: 1.4;
    padding: 18px 32px;
    cursor: pointer;
    color: var(--text-gray-900,#141414);
    border-radius: 1000px;
    background-color: #fff;
    gap: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0)
}

.g-body[data-page-name=service] .m-product .pre-uebuilder-area .play--btn .ic {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='url(%23a)' d='M21 10.268c1.333.77 1.333 2.694 0 3.464L9 20.66c-1.333.77-3-.192-3-1.732V5.072C6 3.532 7.667 2.57 9 3.34z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='12' x2='12' y1='0' y2='24' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23F06'/%3E%3Cstop offset='1' stop-color='%23F63'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    --u-width: 24px;
    width: var(--u-width);
    --u-height: 24px;
    height: var(--u-height)
}

.g-body[data-page-name=service] .m-product .pre-uebuilder-area .row-5 {
    padding: 27px 0;
    gap: 40px
}

@media(max-width: 1679.98px) {
    .g-body[data-page-name=service] .m-product .m-title,.g-body[data-page-name=service] .m-service .m-title {
        font-size:74px
    }

    .g-body[data-page-name=service] .m-product .m-subtitle,.g-body[data-page-name=service] .m-service .m-subtitle {
        font-size: 28px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .m-container--inner>.state--pos-left {
        max-width: 573px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area {
        --stage-size: 658
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card {
        padding-top: 70px;
        padding-bottom: 100px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card-title {
        font-size: 38px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card-subtitle {
        font-size: 17px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card-tags {
        gap: 17px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card-link {
        font-size: 15px
    }

    .g-body[data-page-name=service] .m-product .tab-bar {
        font-size: 17px
    }

    .g-body[data-page-name=service] .m-service .m-bg {
        overflow: hidden
    }
}

@media(max-width: 1559.98px) {
    .g-body[data-page-name=service] .m-product .m-title,.g-body[data-page-name=service] .m-service .m-title {
        font-size:70px
    }

    .g-body[data-page-name=service] .m-product .m-subtitle,.g-body[data-page-name=service] .m-service .m-subtitle {
        font-size: 26px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area {
        --stage-size: 610
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card-title {
        font-size: 36px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .m-container--inner>.state--pos-left {
        max-width: 543px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card-subtitle {
        font-size: 16px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card-desc,.g-body[data-page-name=service] .m-service .m-card-wrapper .card-link,.g-body[data-page-name=service] .m-service .m-card-wrapper .card-tag {
        font-size: 14px;
        font-weight: 400
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card-tags {
        gap: 6px 18px
    }

    .g-body[data-page-name=service] .m-product .tab-bar {
        font-size: 16px
    }
}

@media(max-width: 1439.98px) {
    .g-body[data-page-name=service] .m-service {
        padding-top:calc(var(--g-size-nav-height) + 80px)
    }

    .g-body[data-page-name=service] .m-service .m-head {
        margin-bottom: 100px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area {
        --stage-size: 560
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card-title {
        font-size: 34px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .m-container--inner>.state--pos-left {
        max-width: 503px;
        padding-left: 30px
    }

    .g-body[data-page-name=service] .m-product {
        padding-top: 50px
    }

    .g-body[data-page-name=service] .m-product .m-body .m-container--inner {
        padding-bottom: 40px
    }

    .g-body[data-page-name=service] .m-product .pre-uebuilder-area .play--btn {
        font-size: 17px;
        padding: 16px 22px;
        gap: 12px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card-head {
        padding-bottom: 30px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card-desc {
        padding-top: 28px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card {
        padding-bottom: 70px
    }
}

@media(max-width: 767.98px) {
    .g-body[data-page-name=service] .m-service .m-bg .m-bg--inner {
        --u-width:32;
        --u-height: 35;
        opacity: .6
    }

    .g-body[data-page-name=service] .m-product .m-title,.g-body[data-page-name=service] .m-service .m-title {
        font-size: 46px
    }

    .g-body[data-page-name=service] .m-product .m-subtitle,.g-body[data-page-name=service] .m-service .m-subtitle {
        font-size: 20px;
        margin-top: 16px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .m-container--inner {
        flex-direction: column;
        gap: 50px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .m-container--inner>.state--pos-left {
        padding: 0
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card-title {
        font-size: 24px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card-subtitle {
        font-size: 14px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card-desc {
        padding-top: 18px;
        padding-bottom: 10px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card-head {
        padding-bottom: 20px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card-tags {
        gap: 4px 14px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card-footer {
        margin-top: 30px
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper {
        display: flex;
        justify-content: center
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card {
        display: flex;
        padding-top: 70px;
        padding-bottom: 70px;
        border-radius: 40px 40px 0 0;
        justify-content: center
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .card .m-container {
        flex: 0 0 auto;
        width: 100vw;
        max-width: none
    }

    .g-body[data-page-name=service] .m-service .m-card-wrapper .stage-area {
        --stage-size: 360
    }

    .g-body[data-page-name=service] .m-service .m-head {
        margin-bottom: 60px
    }

    .g-body[data-page-name=service] .m-service {
        padding-top: calc(var(--g-size-nav-height) + 60px)
    }

    .g-body[data-page-name=service] .m-product .m-body .l-bg-2 {
        border-radius: 0 0 40px 40px
    }

    .g-body[data-page-name=service] .m-product .tab-bar {
        margin-top: 40px
    }

    .g-body[data-page-name=service] .m-product .tab-btn[data-active] {
        padding: 13px 0;
        background-color: transparent
    }

    .g-body[data-page-name=service] .m-product .tab-btn {
        padding: 13px 0
    }

    .g-body[data-page-name=service] .m-product .tab-bar--inner {
        display: grid;
        overflow: auto;
        width: 100%;
        grid-auto-flow: column dense
    }

    .g-body[data-page-name=service] .m-product .m-body .l-bg--inner {
        flex: 0 0 auto;
        width: 1100px;
        margin-right: -100px
    }

    .g-body[data-page-name=service] .m-product .m-body {
        margin-top: 40px;
        padding-bottom: 40px
    }

    .g-body[data-page-name=service] .m-product .pre-uebuilder-area .row-1,.g-body[data-page-name=service] .m-product .pre-uebuilder-area .row-2,.g-body[data-page-name=service] .m-product .pre-uebuilder-area .row-5 {
        gap: 20px;
        grid-template-columns: 1fr
    }

    .g-body[data-page-name=service] .m-product .pre-uebuilder-area .row-1 {
        padding: 16px 0 30px
    }

    .g-body[data-page-name=service] .m-product .pre-uebuilder-area .row-2 {
        padding-top: 30px
    }

    .g-body[data-page-name=service] .m-product .pre-uebuilder-area .row-1 .title {
        font-size: 24px
    }

    .g-body[data-page-name=service] .m-product .m-body .m-container--inner {
        padding-top: 50px;
        padding-bottom: 0
    }

    .g-body[data-page-name=service] .m-product .pre-uebuilder-area .grid-table {
        gap: 30px 26px
    }

    .g-body[data-page-name=service] .m-product .pre-uebuilder-area .row-4 {
        padding: 30px 0;
        padding-bottom: 10px
    }

    .g-body[data-page-name=service] .m-product .pre-uebuilder-area .video-box {
        height: 200px;
        border-radius: 20px
    }

    .g-body[data-page-name=service] .m-product .pre-uebuilder-area .video-box img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .g-body[data-page-name=service] .m-product .pre-uebuilder-area .play--btn {
        font-size: 15px;
        padding: 12px 20px;
        gap: 9px
    }

    .g-body[data-page-name=service] .m-product .pre-uebuilder-area .play--btn .ic {
        --u-width: 22px;
        --u-height: 22px
    }

    .g-body[data-page-name=service] .m-product .m-body .l-bg-2--inner {
        width: 60%
    }
}