:root {
    color-scheme: dark;
}:root {
    --color-charcoal: #323237;
    --color-light-grey: #f1f3f3;
    --color-grey: #b9bcbf;
    --color-dark-grey: #737d82;
    --color-blue: #00d7ff;
    --color-rich-blue: #0069d2;
    --color-dark-blue: #24586e;
    --color-midnight: #112f3b;
    --color-hot-green: #e1ff32;
    --color-green: #c0df16;
    --color-teal: #28e1a5;
    --color-dark-green: #00b946;
    --color-red: #ff1923;
    --font-family-base: "KMRApparatBook", "PingFang TC", "Noto Sans TC", "sans-serif";
    --font-family-italic: "KMRApparatBook", "PingFang TC", "Noto Sans TC", "sans-serif";
}
@font-face {
    font-family: "KMRApparatBook";
    src: url(../fonts/kmr-apparat/KMR-Apparat-Bold.woff);
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "KMRApparatBook";
    src: url(../fonts/kmr-apparat/KMR-Apparat-Heavy.woff);
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "KMRApparatBook";
    src: url(../fonts/kmr-apparat/KMR-Apparat-Regular.woff);
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "aerpace-icons";
    src: url(../fonts/aerpace-icons/aerpace-icons.eot?ar7fee);
    src: url(../fonts/aerpace-icons/aerpace-icons.eot?ar7fee#iefix) format("embedded-opentype"), url(../fonts/aerpace-icons/aerpace-icons.ttf?ar7fee) format("truetype"), url(../fonts/aerpace-icons/aerpace-icons.woff?ar7fee) format("woff"),
        url(../fonts/aerpace-icons/aerpace-icons.svg?ar7fee#aerpace-icons) format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
.section-content {
    padding-left: 30px;
    padding-right: 30px;
    margin-left: auto;
    margin-right: auto;
    max-width: 460px;
}
@media (min-width: 576px) {
    .section-content {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .section-content {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .section-content {
        max-width: 900px;
    }
}
@media (min-width: 1260px) {
    .section-content {
        max-width: 1140px;
    }
}
@media (min-width: 992px) {
    .section-content {
        padding-left: 15px;
        padding-right: 15px;
    }
}
.section-title {
    line-height: 1;
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 14px;
}
.section-title:lang(en) {
    font-weight: 600;
    letter-spacing: 0;
}

.section-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
}
@media (min-width: 768px) {
    .section-title {
        font-size: 32px;
    }
}
@media (min-width: 992px) {
    .section-title {
        font-size: 44px;
    }
}
@media (min-width: 1260px) {
    .section-title {
        font-size: 56px;
        margin-bottom: 25px;
    }
}
.section-description {
    line-height: 1.42857143;
}
@media (min-width: 768px) {
    .section-description {
        line-height: 1.42857143;
    }
}
.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    height: 48px;
    line-height: 40px;
    border-radius: 100px;
    box-sizing: border-box;
    white-space: nowrap;
    padding: 0 30px;
    min-width: 176px;
    color: #323237;
}
.cta-btn:lang(en) {
    font-family: var(--font-family-italic);
    font-weight: 800;
    text-transform: uppercase;
}
.cta-btn:hover,
.cta-btn:focus,
.cta-btn:active {
    text-decoration: none;
}
@media (min-width: 768px) {
    .cta-btn {
        font-size: 16px;
    }
}
.cta-btn--hollow {
    position: relative;
    z-index: 1;
    color: #fff;
}
.cta-btn--hollow::before,
.cta-btn--hollow::after {
    content: "";
    position: absolute;
    display: block;
    z-index: -1;
    border-radius: 24px;
}
.cta-btn--hollow::before {
    background-color: #202023;
    left: 2px;
    top: 2px;
    right: 2px;
    bottom: 2px;
    transition: opacity 0.3s;
}
.cta-btn--hollow::after {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
    background-image: linear-gradient(255deg, #ff1c41, #802984);
    background: #1088ff;
}
.cta-btn--hollow:hover,
.cta-btn--hollow:focus,
.cta-btn--hollow:active {
    color: #fff;
}
.cta-btn--hollow:hover::before,
.cta-btn--hollow:focus::before,
.cta-btn--hollow:active::before {
    opacity: 0;
}
.dash-line {
    width: 75px;
    height: 7px;
    margin: 0 auto 28px auto;
    position: relative;
}
.dash-line-top,
.dash-line-bottom {
    position: absolute;
    width: 85%;
    height: 1px;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.dash-line-top {
    background: linear-gradient(265deg, #ff1c41, #802984);
    top: 0;
    left: 0;
}
.dash-line-bottom {
    background: linear-gradient(265deg, #ff1c41, #802984);
    bottom: 0;
    right: 0;
}
@media (min-width: 576px) {
    .dash-line {
        width: 118px;
        height: 11px;
    }
    .dash-line-top,
    .dash-line-bottom {
        height: 2px;
    }
}
.subhead {
    font-weight: 600;
    line-height: 1;
    margin: 0 0 15px 0;
    font-size: 20px;
}

@media (min-width: 768px) {
    .subhead {
        font-size: 20px;
        margin: 0 0 15px 0;
    }
}
@media (min-width: 1260px) {
    .subhead {
        font-size: 20px;
    }
}
.performance-content-sizer p {
    line-height: 1.42857143;
}
.slick-dots li button::before,
.slick-dots li button::after {
    position: absolute;
    content: "";
    width: 12px;
    height: 12px;
    display: block;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 1;
    transition: opacity 0.3s;
}
.slick-dots li button::before {
    background-color: rgb(255 255 255 / 0.3);
}
.slick-dots li button::after {
    opacity: 0;
    padding: 2px;
    background: linear-gradient(#202020, #202020) content-box, linear-gradient(80deg, #0af6b5, #0af6b5 80%, #0af6b5);
    background: #1088ff;
}
.slick-dots li.slick-active button::after {
    opacity: 1;
}
.tab-container {
    margin: 40px auto 0 auto;
    max-width: 980px;
}
.tab-container:hover .tab-list-item {
    will-change: transform;
}
.tab-list {
    z-index: 3;
    position: relative;
    width: 240px;
    display: flex;
    left: 50%;
    margin-left: -120px;
    text-align: center;
}
.tab-list::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
}
.tab-list:lang(en) {
    font-size: 14px;
    width: 260px;
    margin-left: -130px;
}
@media (min-width: 576px) {
    .tab-list:lang(en) {
        font-size: 16px;
        width: 300px;
        margin-left: -150px;
    }
}
@media (min-width: 768px) {
    .tab-list:lang(en) {
        font-size: inherit;
    }
}
@media (min-width: 992px) {
    .tab-list:lang(en) {
        width: 330px;
        margin-left: -165px;
    }
}
@media (min-width: 576px) {
    .tab-list {
        width: 260px;
        margin-left: -130px;
    }
}
@media (min-width: 768px) {
    .tab-list {
        width: 280px;
        margin-left: -140px;
    }
}
.tab-list-item {
    flex: 0 0 100%;
    opacity: 0.3;
    transition: opacity 0.75s, transform 0.75s;
}
.tab-list-item__label {
    display: block;
    font-weight: 600;
    color: #fff;
    border-bottom: 2px solid #fff;
    cursor: pointer;
    margin: 0;
    line-height: 65px;
}
@media (min-width: 576px) {
    .tab-list-item__label {
        line-height: 75px;
    }
}
.tab-content-container {
    position: relative;
    z-index: 3;
    margin: 24px 0 60px 0;
}
@media (min-width: 768px) {
    .tab-content-container {
        margin: 50px 0 76px 0;
    }
}
.tab-background {
    transition: opacity 0s 0.75s;
}
.tab-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
.tab-content__image {
    opacity: 0;
    height: 100%;
    transition: opacity 0s 0.75s;
}
.tab-content__caption {
    opacity: 0;
    transition: opacity 0.75s;
    text-align: center;
    font-size: 14px;
    margin: 8px auto 0 auto;
    line-height: 1.42857143;
}
@media (min-width: 768px) {
    .tab-content__caption {
        font-size: 18px;
        margin: 24px auto 0 auto;
    }
}
.tab-radio:nth-child(1):checked ~ .tab-backgrounds .tab-background:nth-child(1) {
    opacity: 1;
    z-index: 2;
    transition: opacity 0.75s;
}
.tab-radio:nth-child(1):checked ~ .tab-list .tab-list-item {
    transform: translateX(0%);
}
.tab-radio:nth-child(1):checked ~ .tab-list .tab-list-item:nth-child(1) {
    opacity: 1;
}
.tab-radio:nth-child(1):checked ~ .tab-content-container .tab-content:nth-child(1) {
    opacity: 1;
    z-index: 2;
}
.tab-radio:nth-child(1):checked ~ .tab-content-container .tab-content:nth-child(1) .tab-content__caption {
    opacity: 1;
}
.tab-radio:nth-child(1):checked ~ .tab-content-container .tab-content:nth-child(1) .tab-content__image {
    opacity: 1;
    transition: opacity 0.75s;
}
.tab-radio:nth-child(2):checked ~ .tab-backgrounds .tab-background:nth-child(2) {
    opacity: 1;
    z-index: 2;
    transition: opacity 0.75s;
}
.tab-radio:nth-child(2):checked ~ .tab-list .tab-list-item {
    transform: translateX(-100%);
}
.tab-radio:nth-child(2):checked ~ .tab-list .tab-list-item:nth-child(2) {
    opacity: 1;
}
.tab-radio:nth-child(2):checked ~ .tab-content-container .tab-content:nth-child(2) {
    opacity: 1;
    z-index: 2;
}
.tab-radio:nth-child(2):checked ~ .tab-content-container .tab-content:nth-child(2) .tab-content__caption {
    opacity: 1;
}
.tab-radio:nth-child(2):checked ~ .tab-content-container .tab-content:nth-child(2) .tab-content__image {
    opacity: 1;
    transition: opacity 0.75s;
}
.tab-radio:nth-child(3):checked ~ .tab-backgrounds .tab-background:nth-child(3) {
    opacity: 1;
    z-index: 2;
    transition: opacity 0.75s;
}
.tab-radio:nth-child(3):checked ~ .tab-list .tab-list-item {
    transform: translateX(-200%);
}
.tab-radio:nth-child(3):checked ~ .tab-list .tab-list-item:nth-child(3) {
    opacity: 1;
}
.tab-radio:nth-child(3):checked ~ .tab-content-container .tab-content:nth-child(3) {
    opacity: 1;
    z-index: 2;
}
.tab-radio:nth-child(3):checked ~ .tab-content-container .tab-content:nth-child(3) .tab-content__caption {
    opacity: 1;
}
.tab-radio:nth-child(3):checked ~ .tab-content-container .tab-content:nth-child(3) .tab-content__image {
    opacity: 1;
    transition: opacity 0.75s;
}
.tab-radio:nth-child(4):checked ~ .tab-backgrounds .tab-background:nth-child(4) {
    opacity: 1;
    z-index: 2;
    transition: opacity 0.75s;
}
.tab-radio:nth-child(4):checked ~ .tab-list .tab-list-item {
    transform: translateX(-300%);
}
.tab-radio:nth-child(4):checked ~ .tab-list .tab-list-item:nth-child(4) {
    opacity: 1;
}
.tab-radio:nth-child(4):checked ~ .tab-content-container .tab-content:nth-child(4) {
    opacity: 1;
    z-index: 2;
}
.tab-radio:nth-child(4):checked ~ .tab-content-container .tab-content:nth-child(4) .tab-content__caption {
    opacity: 1;
}
.tab-radio:nth-child(4):checked ~ .tab-content-container .tab-content:nth-child(4) .tab-content__image {
    opacity: 1;
    transition: opacity 0.75s;
}
.progressive-image,
.progressive-image::before,
.progressive-image::after,
.progressive-image *,
.progressive-image * ::before,
.progressive-image * ::after {
    background-image: none !important;
}
.ggr-nav {
    z-index: 1;
}
.ggr-nav-container {
    background-color: transparent !important;
}
@media (min-width: 768px) {
    .ggr-nav-container {
        --nav-sm-list-bg-color: transparent;
    }
}
.section {
    z-index: 2;
}
.hero-section {
    overflow: hidden;
    height: 100vh;
    min-height: 760px;
    background: #000;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
.hero-main {
    position: relative;
    height: 100vh;
    min-height: 720px;
}
@media (min-width: 992px) {
    .hero-main {
    }
}
@media (min-width: 1920px), (min-height: 900px) {
    .hero-main {
    }
}
.hero-background {
    position: absolute;
    top: calc(-325px + 20%);
    left: 50%;
    width: 1440px;
    width: 100%;
    height: 960px;
    background: url(../img/hero-bg-ground_mobile.jpg) center/contain no-repeat;
    transform: translateX(-50%);
}
.hero-background::before {
    content: "";
    position: absolute;
    top: -10%;
    left: 0;
    right: 0;
    height: 580px;
}
@media (min-width: 992px) {
    .hero-background {
        top: calc(-275px + 22.5%);
        background: url(../img/hero-bg-ground@2x.jpg) center/contain no-repeat;
    }
}
@media (min-width: 1920px), (min-height: 900px) {
    .hero-background {
        top: calc(-340px + 25%);
        background: url(../img/hero-bg-ground@2x.jpg) center/cover no-repeat;
    }
}
.hero-kv {
    position: absolute;
    top: calc(-620px + 20%);
    left: 50%;
    transform: translateX(-50%);
}
.hero-kv .kv-animation {
    position: absolute;
    top: 69.8%;
    left: 50%;
    width: 384px;
    height: 540px;
    transform: translateX(-50%);
}
.hero-kv .kv-scooter {
    position: absolute;
    top: 95%;
    left: 50%;
    width: 349px;
    height: 329px;
    background: url() center/contain no-repeat;
    transform: translateX(-50%);
}
@media (min-width: 992px) {
    .hero-kv {
        top: calc(-560px + 22.5%);
    }
}
@media (min-width: 1920px), (min-height: 900px) {
    .hero-kv {
        top: calc(-540px + 25%);
    }
}
.hero-copy {
    position: absolute;
    top: 58.5%;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
    color: #fff;
}
.hero-copy .subtitle {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.hero-copy .subtitle:lang(en) {
    font-size: 16px;
}
.hero-copy .subtitle:lang(zh) {
    padding-left: 0.5em;
    letter-spacing: 0.5em;
}
.hero-copy .title {
    margin: 0;
    font-size: 40px;
    font-weight: 600;
}
.hero-copy .title span {
    font-weight: 700;
}
.hero-copy .btn-cta {
    display: block;
    margin-top: 24px;
    padding: 12px;
    width: 228px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    background: linear-gradient(to right, #802984, #ff1c41);
    border-radius: 24px;
    color: #fff;
}
.hero-copy .btn-cta:hover {
    text-decoration: none;
}
.hero-copy .btn-cta:lang(en) {
    letter-spacing: 2px;
    font-family: var(--font-family-italic);
    text-transform: uppercase;
    font-weight: 800;
}
.leading-scroll-hint {
    width: 100%;
    display: block;
    color: #fff;
    text-align: center;
}
.leading-scroll-hint::after {
    content: "";
    -webkit-animation: indicator-floating 1.2s infinite ease-in-out;
    animation: indicator-floating 1.2s infinite ease-in-out;
    display: inline-block;
    margin-top: 20px;
    width: 1px;
    height: 30px;
    background: #fff;
}
@-webkit-keyframes indicator-floating {
    0% {
        transform: translatey(0);
    }
    50% {
        transform: translatey(6px);
    }
    100% {
        transform: translatey(0);
    }
}
@keyframes indicator-floating {
    0% {
        transform: translatey(0);
    }
    50% {
        transform: translatey(6px);
    }
    100% {
        transform: translatey(0);
    }
}
@media (min-width: 768px) {
    .leading-scroll-hint {
        top: 66%;
    }
    .hero-copy {
        top: 67.5%;
    }
}
@media (min-width: 991.98px) and(min-height:740px) {
    .hero-copy {
        top: calc(380px + 22.5%);
    }
}
@media (min-width: 1920px), (min-height: 900px) {
    .hero-copy {
        top: calc(460px + 25%);
    }
}
.section-break-a {
    position: relative;
    background-color: #000;
}
.section-break-a .animation-layer {
    visibility: hidden;
    position: -webkit-sticky;
    position: sticky;
    width: 100%;
    left: 0;
    top: 100vh;
}
.loaded .section-break-a .animation-layer {
    visibility: visible;
}
.section-break-a .animation-layer::after {
    content: "";
    display: block;
    padding-bottom: 78.125%;
}
@media (min-width: 768px) {
    .section-break-a .animation-layer {
        top: 0;
        height: 100vh;
    }
    .section-break-a .animation-layer::after {
        display: none;
    }
}
.break-a-duration {
    position: absolute;
    top: 100%;
    height: 35%;
}
@media (min-width: 768px) {
    .break-a-duration {
        top: 65%;
        height: initial;
        bottom: 0;
    }
}
.break-spotlight,
.break-scooter,
.break-words {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: center/contain no-repeat;
}
.break-spotlight {
    background: center/cover no-repeat;
    background-color: #02020e;
    background-image: url();
}
@media (min-width: 768px) {
    .break-spotlight {
        background-image: url();
    }
}
@media (min-width: 1440px) {
    .break-spotlight {
        background-image: url();
    }
}
.break-scooter::before {
    content: "";
    display: block;
    margin: auto;
    width: 100%;
    max-width: 1440px;
    height: 100%;
    background: inherit;
    background-image: url();
}
@media (min-width: 768px) {
    .break-scooter::before {
        background-image: url();
    }
}
@media (min-width: 1440px) {
    .break-scooter::before {
        background-image: url();
    }
}
.break-words {
    max-width: 1088px;
    width: 75%;
    height: initial;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 90vh;
}
.break-words::after {
    content: "";
    display: block;
    padding-bottom: 64.7%;
}
.break-words canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.section-break-b {
    position: relative;
    margin-top: -100vh;
    background-color: #000;
}
.section-break-b::before {
    content: "";
    display: block;
    height: 100vh;
}
@media (max-width: 767.98px) {
    .section-break-b::after {
        content: "";
        display: block;
        height: 78.125vw;
    }
}
.break-b-duration {
    position: absolute;
    height: 78.125vw;
    top: 100%;
}
@media (min-width: 768px) {
    .break-b-duration {
        position: static;
        margin-top: -60vh;
        height: 80vh;
    }
}
.break-b {
    margin-top: -78.125vw;
    top: calc(100vh - 78.125vw);
    position: -webkit-sticky;
    position: sticky;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: center/cover no-repeat;
    background-image: url();
    height: 78.125vw;
}
@media (min-width: 768px) {
    .break-b {
        top: 0;
        margin-top: 0;
        background-image: url();
        height: 100vh;
    }
}
@media (min-width: 1440px) {
    .break-b {
        background-image: url();
    }
}
.break-b__title {
    width: 80%;
    max-width: 1166px;
    background: url(../img/img-break-2-word.svg) center/contain no-repeat;
    margin-top: 20px;
    margin-left: -1%;
}
.break-b__title::before {
    content: "";
    display: block;
    padding-bottom: 6.861063465%;
}
.break-b__scooter {
    width: 100%;
    background: url(../img/superwing_break_b_mobile.jpg) center bottom/contain no-repeat;
}
.break-b__scooter::before {
    content: "";
    display: block;
    padding-bottom: 88.96969697%;
}
@media (min-width: 768px) {
    .break-b__scooter {
        width: 100%;
        max-width: auto;
        min-width: 80vh;
        background: url(../img/superwing_break_b.jpg) center bottom/contain no-repeat;
    }
}
.section-fast {
    background-color: #323237;
    color: #fff;
    position: relative;
    padding: 64px 0 0 0;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}
.section-fast::after {
    content: "";
    height: 300px;
    margin: -60px 0 0 0;
    background: url(../img/superwing_specs.jpg) calc(80% - 5vw) bottom/auto 100% no-repeat;
}
@media (min-width: 768px) {
    .section-fast {
        padding: 128px 0 0 0;
    }
    .section-fast .container {
        margin-bottom: 0;
    }
    .section-fast::after {
        height: 400px;
        margin: -64px 0 0 0;
        background: url(../img/superwing_specs.jpg) center bottom/auto 100% no-repeat;
    }
}
@media (min-width: 1260px) {
    .section-fast {
        padding: 120px 0 0 0;
    }
    .section-fast::after {
        height: 600px;
        margin: -100px 0 0 0;
    }
}
.section-fast .section-content {
    width: 100%;
}
.key-number-wrapper {
    width: 100%;
    max-width: 770px;
    margin: 60px auto auto auto;
    padding: 0 15px;
}
.key-number-list {
    position: relative;
}
.key-number-list.slick-dotted {
    margin: auto;
    max-width: 345px;
    padding: 2px;
    background: linear-gradient(225deg, #ff1c41, #802984);
    background: #1088ff;
}
.key-number-list.slick-dotted .key-number__bg {
    display: none;
}
.key-number-list.slick-dotted .key-number-item {
    background: #121215 padding-box;
    padding: 0;
}
.key-number-list.slick-dotted .slick-dots {
    bottom: 0;
    line-height: 65px;
}
.key-number__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 33.333%;
    padding: 0 1px;
    transition: transform 0.5s;
}
.active-1 .key-number__bg {
    transform: translateX(0%);
}
.active-2 .key-number__bg {
    transform: translateX(100%);
}
.active-3 .key-number__bg {
    transform: translateX(200%);
}
.key-number__bg .key-number-sizer::before,
.key-number__bg .key-number-sizer::after {
    content: "";
    position: absolute;
    display: block;
}
.key-number__bg .key-number-sizer::before {
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    background: linear-gradient(225deg, #ff1c41, #802984);
    background: #1088ff;
}
.key-number__bg .key-number-sizer::after {
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 2px;
    background-color: #121215;
}
.key-number-item {
    width: 33.3333%;
    padding: 0 1px;
}
.key-number-sizer {
    position: relative;
    padding-bottom: 100%;
}
.key-number {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 25px 25px;
}
.key-number::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: rgb(46 46 52);
}
.key-number__value {
    font-size: 96px;
    line-height: 1;
    font-weight: 700;
}
@media (min-width: 992px) {
    .key-number__value {
        font-size: 72px;
    }
}
.key-number__unit {
    line-height: 1;
    padding: 0 0 15px 8px;
    font-size: 24px;
}
@media (min-width: 992px) {
    .key-number__unit {
        font-size: 18px;
        padding: 0 0 10px 8px;
    }
}
.key-number__content {
    font-weight: 600;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
    padding-bottom: 35px;
    white-space: nowrap;

    letter-spacing: 0.0216em;
}
@media (min-width: 992px) {
    .key-number__content {
        font-size: 20px;
        padding-bottom: 0;
    }
}
.section-colors {
    position: relative;
    overflow: hidden;
    z-index: 2;
    color: #fff;
    padding: 64px 0;
    text-align: center;
}
@media (min-width: 768px) {
    .section-colors {
        padding: 96px 0;
    }
}
@media (min-width: 992px) {
    .section-colors {
        text-align: left;
        padding: 200px 0;
    }
}
.section-colors-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% + 200px);
    z-index: -1;
    background-color: #000;
}
.section-colors-bg::before,
.section-colors-bg::after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: center/cover no-repeat;
    opacity: 0;
    transition: opacity 0.5s;
}
.section-colors-bg::before {
    background-image: url();
}
.section-colors-bg::after {
    background-image: url();
}
@media (min-width: 768px) {
    .section-colors-bg::before {
        background-image: url();
    }
    .section-colors-bg::after {
        background-image: url();
    }
}
@media (min-width: 1260px) {
    .section-colors-bg::before {
        background-image: url();
    }
    .section-colors-bg::after {
        background-image: url();
    }
}
.color-gallery-content {
    flex: 2;
}
@media (min-width: 992px) {
    .color-gallery-content {
        margin: 0 64px 0 0;
    }
}
@media (min-width: 1260px) {
    .color-gallery-content {
        margin: 0 96px 0 0;
    }
}
.color-gallery-captions {
    position: relative;
    margin: 0 0 30px 0;
}
@media (min-width: 768px) {
    .color-gallery-captions {
        margin: 0 0 48px 0;
    }
}
@media (min-width: 992px) {
    .color-gallery-captions {
        margin: 0 0 20px 0;
    }
}
@media (min-width: 1260px) {
    .color-gallery-captions {
        margin: 0 0 64px 0;
    }
}
.color-gallery-caption {
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s;
}
.color-gallery-tabs__btn {
    opacity: 0.3;
    font-weight: 600;
    transition: opacity 0.3s;
    margin: 0;
    cursor: pointer;
}
.color-gallery-tabs__btn + .color-gallery-tabs__btn {
    margin: 0 0 0 16px;
}
.color-gallery-images {
    flex: 3;
    max-width: 670px;
    position: relative;
    margin: 24px 0 0 0;
    box-shadow: 0 20px 40px 0 rgb(0 0 0 / 0.49);
}
@media (min-width: 576px) {
    .color-gallery-images {
        margin: 48px 0 0 0;
    }
}
@media (min-width: 992px) {
    .color-gallery-images {
        margin: 0;
    }
}
@media (min-width: 1260px) {
    .color-gallery-images {
        flex: 4;
    }
}
.color-gallery-images::before {
    content: "";
    display: block;
    padding-bottom: 59.7%;
}
.color-gallery-image {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: center/cover no-repeat;
    opacity: 0;
    transition: opacity 0.5s;
}
.color-gallery-image--ice {
    background-image: url();
}
.color-gallery-image--grey {
    background-image: url();
}
@media (min-width: 768px) {
    .color-gallery-image--ice {
        background-image: url();
    }
    .color-gallery-image--grey {
        background-image: url();
    }
}
#color-gallery-ice:checked ~ .section-colors-bg:before,
#color-gallery-ice:checked ~ .section-content .color-gallery-caption--ice,
#color-gallery-ice:checked ~ .section-content .color-gallery-image--ice,
#color-gallery-ice:checked ~ .section-content .color-gallery-tabs__btn--ice {
    opacity: 1;
    z-index: 1;
}
#color-gallery-grey:checked ~ .section-colors-bg:after,
#color-gallery-grey:checked ~ .section-content .color-gallery-caption--grey,
#color-gallery-grey:checked ~ .section-content .color-gallery-image--grey,
#color-gallery-grey:checked ~ .section-content .color-gallery-tabs__btn--grey {
    opacity: 1;
    z-index: 1;
}
.section-design {
    position: relative;
    z-index: 4;
    overflow: hidden;
    color: #fff;
    padding: 64px 0 0 0;
}
@media (min-width: 576px) {
    .section-design {
        padding: 64px 0;
    }
}
@media (min-width: 768px) {
    .section-design {
        padding: 96px 0;
    }
}
@media (min-width: 992px) {
    .section-design {
        padding: 128px 0;
    }
}
.section-design .section-content {
    position: relative;
}
@media (max-width: 575.98px) {
    .section-design .section-content {
        max-width: 100%;
    }
}
.design-bg {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.design-bg::before,
.design-bg::after {
    content: "";
    display: block;
}
.design-bg::before {
    flex: 1;
    background: linear-gradient(to bottom, #202023, #000);
}
.design-bg::after {
    height: 32.16vw;
    background: #000 url() center bottom/100% auto no-repeat;
}
@media (min-width: 992px) {
    .design-bg::after {
        background: #000 url() center bottom/100% auto no-repeat;
    }
}
@media (min-width: 1440px) {
    .design-bg::after {
        background: #000 url() center bottom/100% auto no-repeat;
    }
}
.design-topics {
    margin: 48px -30px 0 -30px;
}
@media (min-width: 576px) {
    .design-topics {
        margin: 48px 0 0 0;
    }
}
@media (min-width: 768px) {
    .design-topics {
        margin: 64px -30px 0 -30px;
    }
}
@media (min-width: 992px) {
    .design-topics {
        margin: 96px 0 0 0;
    }
}
.design-topic {
    background-color: #202023;
}
@media (min-width: 768px) {
    .design-topic {
        display: flex;
    }
    .design-topic:nth-child(even) {
        flex-direction: row-reverse;
    }
    .design-topic > * {
        flex: 1 1 50%;
    }
}
.design-topic__image {
    position: relative;
    overflow: hidden;
}
.design-topic__image::before {
    content: "";
    display: block;
    padding-bottom: 85.47008547%;
}
.image-design {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    background: center/cover no-repeat;
}
.image-design--batteries {
    background-image: url(../img/safety_1.png);
}
.image-design--parachute {
    background-image: url(../img/safety_2.png);
}
.image-design--thruster {
    background-image: url(../img/safety_3.png);
}
.image-design--collision {
    background-image: url(../img/safety_4.png);
}
.image-design--fire {
    background-image: url(../img/safety_5.png);
}
.design-topic__content {
    padding: 48px 30px;
    text-align: center;
}
@media (min-width: 576px) {
    .design-topic__content p {
        max-width: 370px;
        margin: auto;
    }
}
@media (min-width: 768px) {
    .design-topic__content {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.design-topic--full {
    flex: 0 0 100%;
    background-color: #121215;
    text-align: center;
    padding: 32px 0;
    justify-content: center;
    display: block;
}
.design-topic--full a {
    color: #28c3ff;
    font-weight: 600;
    position: relative;
}
.design-topic--full a::after {
    content: "";
    display: block;
    border: 2px solid #28c3ff;
    border-width: 2px 2px 0 0;
    width: 12px;
    height: 12px;
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translate(100%, -50%) rotate(45deg) scale(0.8);
}
@media (min-width: 992px) {
    .design-topic--full {
        padding: 64px 0;
    }
    .design-topic--full a::after {
        right: -8px;
    }
}
.section-frame {
    position: relative;
    overflow: hidden;
    background-color: #000;
    color: #fff;
    padding: 64px 0;
    z-index: 3;
}
@media (min-width: 768px) {
    .section-frame {
        padding: 96px 0;
    }
}
@media (min-width: 992px) {
    .section-frame {
        padding: 128px 0;
    }
}
.section-frame .tab-container {
    max-width: 100%;
}
.section-frame .tab-content__image {
    position: relative;
    max-width: 94vh;
    max-width: 75%;
    margin: auto;
}
.section-frame .tab-content__image::before {
    content: "";
    display: block;
    padding-bottom: 55.55%;
}
.section-frame .content-header {
    position: relative;
    z-index: 3;
}
.section-frame:not(.loaded) .tab-content__caption {
    transition: none;
}
.frame-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.3);
    margin-left: -3%;
}
@media (min-width: 768px) {
    .frame-canvas {
        transform: scale(1.4);
    }
}
.tab-backgrounds {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.tab-background {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
}
.tab-background--a {
    background-color: #000;
}
.tab-background--a::before {
    opacity: 0;
    transition: opacity 0.3s;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: center/cover no-repeat;
    background-image: url();
}
@media (min-width: 768px) {
    .tab-background--a::before {
        background-image: url();
    }
}
@media (min-width: 1440px) {
    .tab-background--a::before {
        background-image: url();
    }
}
.spotlight .tab-background--a::before {
    opacity: 1;
}
.section-performance {
    color: #fff;
    background-color: #000;
    padding: 64px 0 0 0;
    position: relative;
}
@media (min-width: 768px) {
    .section-performance {
        padding: 96px 0 0 0;
    }
}
@media (min-width: 992px) {
    .section-performance {
        padding: 128px 0 0 0;
    }
}
.section-performance .section-content {
    position: relative;
    z-index: 1;
}
.section-performance + .section {
    position: relative;
    z-index: 2;
}
@media (min-width: 768px) {
    .section-performance + .section {
        margin-top: -20vw;
    }
}
.performance-header-bg {
    background: url(../img/superwing_performance_mobile.jpg) center/cover no-repeat;
}
.performance-header-bg::before {
    content: "";
    display: block;
    padding-bottom: 97.65625%;
}
@media (max-width: 767.98px) {
    .performance-header-bg {
        transform: none !important;
    }
}
@media (min-width: 768px) {
    .performance-header-bg {
        background: url(../img/superwing_performance.jpg) center/cover no-repeat;
    }
    .performance-header-bg::before {
        padding-bottom: 52.08333333%;
    }
}
@media (min-width: 992px) {
    .performance-header-bg {
    }
}
.performance-gallery {
    overflow: hidden;
    background-color: #000;
}
.performance {
    position: relative;
}
@media (min-width: 768px) {
    .performance--caliper {
        transform: translateY(-10%);
        z-index: 1;
    }
    .performance--f-suspension {
        transform: translateY(-20%);
    }
    .performance--r-suspension {
        transform: translateY(-20%);
    }
}
.performance-content-sizer {
    max-width: 470px;
    width: 100%;
    margin: auto;
}
@media (min-width: 768px) {
    .performance-content-sizer {
        width: 54%;
        margin: 0;
    }
    .performance--r-suspension .performance-content-sizer,
    .performance--caliper .performance-content-sizer {
        margin: 0 -44px 0 0;
    }
}
@media (min-width: 992px) {
    .performance-content-sizer {
        width: 42%;
        margin: 0;
    }
    .performance--r-suspension .performance-content-sizer,
    .performance--caliper .performance-content-sizer {
        margin: 0 -20px 0 0;
    }
}
@media (min-width: 1260px) {
    .performance-content-sizer {
        width: 38%;
    }
    .performance--r-suspension .performance-content-sizer,
    .performance--caliper .performance-content-sizer {
        margin: 0;
    }
}
.performance-content {
    position: static;
    padding-bottom: 64px;
}
@media (min-width: 576px) {
    .performance-content {
        padding-bottom: 96px;
    }
}
@media (min-width: 768px) {
    .performance-content {
        position: absolute;
        left: 0;
        width: 100%;
        padding-bottom: 0;
    }
}
.performance-content .section-content {
    display: flex;
    justify-content: flex-end;
}
.performance--f-suspension .performance-content .section-content {
    justify-content: flex-start;
}
.performance--caliper .performance-content {
    top: 48.6%;
}
.performance--f-suspension .performance-content {
    top: 40%;
}
.performance--r-suspension .performance-content {
    top: 40%;
}
.performance-bg {
    position: relative;
    z-index: 1;
    background: center/contain no-repeat;
}
.performance-bg::before {
    content: "";
    display: block;
    background: inherit;
    opacity: 1;
    transition: 1s;
    position: relative;
    z-index: -1;
}
.active .performance-bg::before {
    opacity: 0;
}
.performance-bg--caliper {
    width: 100%;
    background: left top/contain no-repeat;
    background-image: url(../img/performance_bg_top_mobile.jpg);
}
.performance-bg--caliper::before {
    padding-bottom: 100%;
    background-image: url(../img/performance_bg_top_xray_mobile.jpg);
}
@media (min-width: 768px) {
    .performance-bg--caliper {
        background-image: url(../img/performance_bg_top.jpg);
    }
    .performance-bg--caliper::before {
        padding-bottom: 80%;
        background-image: url(../img/performance_bg_top_xray.jpg);
    }
}
.performance-bg--f-suspension {
    background-image: url(../img/performance_bg_back_mobile.jpg);
    background-position: right center;
}
.performance-bg--f-suspension::before {
    padding-bottom: 100%;
    background-image: url(../img/performance_bg_back_xray_mobile.jpg);
    background-position: right center;
}
@media (min-width: 768px) {
    .performance-bg--f-suspension {
        background-image: url(../img/performance_bg_back.jpg);
    }
    .performance-bg--f-suspension::before {
        padding-bottom: 80%;
        background-image: url(../img/performance_bg_back_xray.jpg);
    }
}
.performance-bg--r-suspension {
    background-image: url(../img/performance_bg_bottom_mobile.jpg);
    background-position: left center;
}
.performance-bg--r-suspension::before {
    padding-bottom: 100%;
    background-image: url(../img/performance_bg_bottom_xray_mobile.jpg);
    background-position: left center;
}
@media (min-width: 768px) {
    .performance-bg--r-suspension {
        background-image: url(../img/performance_bg_bottom.jpg);
    }
    .performance-bg--r-suspension::before {
        padding-bottom: 80%;
        background-image: url(../img/performance_bg_bottom_xray.jpg);
    }
}
@media (max-width: 767.98px) {
    .performance-bg {
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}
.section-app {
    overflow: hidden;
    padding: 64px 0;
    text-align: center;
    color: #fff;
    background-color: #000;
}
@media (min-width: 768px) {
    .section-app {
        padding: 96px 0 132px 0;
    }
}
@media (min-width: 992px) {
    .section-app {
        padding: 128px 0 168px 0;
    }
}
.image-app {
    width: 56.26666667%;
    max-width: 240px;
    margin: auto;
    transition: transform 0.5s;
    background: center/contain no-repeat;
}
.image-app::before {
    content: "";
    display: block;
    padding-bottom: 200.47393365%;
}
@media (min-width: 992px) {
    .image-app {
        max-width: 100%;
        width: 100%;
    }
}
.app-slides {
    display: flex;
    margin: 28px 0 0 0;
    transition: transform 0.5s;
    width: 100vw;
}
@media (min-width: 992px) {
    .app-slides {
        margin: 60px auto 0 auto;
        display: grid;
        max-width: 1040px;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 0;
        padding: 0 30px;
    }
}
.app-slide {
    flex: 0 0 100%;
}
.app-slide__content {
    padding: 0 30px;
    transition: transform 0.5s;
    text-align: center;
    max-width: 480px;
    margin: auto;
}
@media (min-width: 992px) {
    .app-slide__content {
        padding: 0 30px;
        text-align: left;
        margin: 25px 0 0 0;
    }
}
.app-slide-dot {
    position: relative;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 0.3);
    cursor: pointer;
    margin: 32px auto 16px auto;
}
@media (min-width: 992px) {
    .app-slide-dot {
        display: none;
    }
}
.app-slide-dot::before,
.app-slide-dot::after {
    content: "";
    border-radius: inherit;
    display: block;
    position: absolute;
    opacity: 0;
    transition: 0.3s;
}
.app-slide-dot::before {
    width: 100%;
    height: 100%;
    background: #fff;
}
.app-slide-dot::after {
    left: 2px;
    top: 2px;
    right: 2px;
    bottom: 2px;
    background-color: #b9bcbf;
}
@media (max-width: 991.98px) {
    .app-slide:nth-child(1) .app-slide-dot {
        transform: translateX(calc(0vw + -20px));
    }
    .app-slide:nth-child(2) .app-slide-dot {
        transform: translateX(calc(-100vw + 0px));
    }
    .app-slide:nth-child(3) .app-slide-dot {
        transform: translateX(calc(-200vw + 20px));
    }
    .app-slide-radio:nth-child(1):checked ~ .app-slides .app-slide:nth-child(1) .app-slide-dot::before,
    .app-slide-radio:nth-child(1):checked ~ .app-slides .app-slide:nth-child(1) .app-slide-dot::after {
        opacity: 1;
    }
    .app-slide-radio:nth-child(1):checked ~ .app-slides .app-slide:nth-child(1) .app-slide-dot::after {
        background-color: #fff;
    }
    .app-slide-radio:nth-child(1):checked ~ .app-slides .app-slide:nth-child(1) .image-app {
        transform: translateX(calc(0vw + 0% + 0vw));
    }
    .app-slide-radio:nth-child(1):checked ~ .app-slides .app-slide:nth-child(1) .app-slide__content {
        transform: translateX(0vw);
    }
    .app-slide-radio:nth-child(1):checked ~ .app-slides .app-slide:nth-child(2) .image-app {
        transform: translateX(calc(-100vw + 100% + 0vw));
    }
    .app-slide-radio:nth-child(1):checked ~ .app-slides .app-slide:nth-child(2) .app-slide__content {
        transform: translateX(0vw);
    }
    .app-slide-radio:nth-child(1):checked ~ .app-slides .app-slide:nth-child(3) .image-app {
        transform: translateX(calc(-200vw + 200% + 0vw));
    }
    .app-slide-radio:nth-child(1):checked ~ .app-slides .app-slide:nth-child(3) .app-slide__content {
        transform: translateX(0vw);
    }
    .app-slide-radio:nth-child(2):checked ~ .app-slides .app-slide:nth-child(2) .app-slide-dot::before,
    .app-slide-radio:nth-child(2):checked ~ .app-slides .app-slide:nth-child(2) .app-slide-dot::after {
        opacity: 1;
    }
    .app-slide-radio:nth-child(2):checked ~ .app-slides .app-slide:nth-child(2) .app-slide-dot::after {
        background-color: #fff;
    }
    .app-slide-radio:nth-child(2):checked ~ .app-slides .app-slide:nth-child(1) .image-app {
        transform: translateX(calc(0vw + -100% + -0vw));
    }
    .app-slide-radio:nth-child(2):checked ~ .app-slides .app-slide:nth-child(1) .app-slide__content {
        transform: translateX(-100vw);
    }
    .app-slide-radio:nth-child(2):checked ~ .app-slides .app-slide:nth-child(2) .image-app {
        transform: translateX(calc(-100vw + 0% + 0vw));
    }
    .app-slide-radio:nth-child(2):checked ~ .app-slides .app-slide:nth-child(2) .app-slide__content {
        transform: translateX(-100vw);
    }
    .app-slide-radio:nth-child(2):checked ~ .app-slides .app-slide:nth-child(3) .image-app {
        transform: translateX(calc(-200vw + 100% + 0vw));
    }
    .app-slide-radio:nth-child(2):checked ~ .app-slides .app-slide:nth-child(3) .app-slide__content {
        transform: translateX(-100vw);
    }
    .app-slide-radio:nth-child(3):checked ~ .app-slides .app-slide:nth-child(3) .app-slide-dot::before,
    .app-slide-radio:nth-child(3):checked ~ .app-slides .app-slide:nth-child(3) .app-slide-dot::after {
        opacity: 1;
    }
    .app-slide-radio:nth-child(3):checked ~ .app-slides .app-slide:nth-child(3) .app-slide-dot::after {
        background-color: #fff;
    }
    .app-slide-radio:nth-child(3):checked ~ .app-slides .app-slide:nth-child(1) .image-app {
        transform: translateX(calc(0vw + -200% + -12.8vw));
    }
    .app-slide-radio:nth-child(3):checked ~ .app-slides .app-slide:nth-child(1) .app-slide__content {
        transform: translateX(-200vw);
    }
    .app-slide-radio:nth-child(3):checked ~ .app-slides .app-slide:nth-child(2) .image-app {
        transform: translateX(calc(-100vw + -100% + -0vw));
    }
    .app-slide-radio:nth-child(3):checked ~ .app-slides .app-slide:nth-child(2) .app-slide__content {
        transform: translateX(-200vw);
    }
    .app-slide-radio:nth-child(3):checked ~ .app-slides .app-slide:nth-child(3) .image-app {
        transform: translateX(calc(-200vw + 0% + 0vw));
    }
    .app-slide-radio:nth-child(3):checked ~ .app-slides .app-slide:nth-child(3) .app-slide__content {
        transform: translateX(-200vw);
    }
}
.app-subhead {
    font-weight: 600;
    line-height: 1;
    margin: 0 0 10px 0;
    font-size: 20px;
}

@media (min-width: 768px) {
    .app-subhead {
        font-size: 20px;
        margin: 0 0 15px 0;
    }
}
@media (min-width: 1260px) {
    .app-subhead {
        font-size: 20px;
    }
}
.app-slide__content p {
    line-height: 1.42857143;
}
.image-app--update {
    background-image: url(../img/superwing_app_1.jpg);
}
.image-app--update:lang(zh-TW) {
    background-image: url();
}
.image-app--security {
    background-image: url(../img/superwing_app_2.jpg);
}
.image-app--security:lang(zh-TW) {
    background-image: url();
}
.image-app--dashboard {
    background-image: url(../img/superwing_app_3.jpg);
}
.image-app--dashboard:lang(zh-TW) {
    background-image: url();
}
.section-swap {
    position: relative;
    color: #fff;
    background-color: #020202;
}
.section-swap::before {
    content: "";
    display: block;
    height: 40vw;
    background: #020202 url(../img/superwing_swap_mobile.jpg) center bottom/auto 100% no-repeat;
}
@media (min-width: 576px) {
    .section-swap::before {
        height: 400px;
        background: #020202 url(../img/superwing_swap_mobile.jpg) center bottom/auto 100% no-repeat;
    }
}
@media (min-width: 992px) {
    .section-swap::before {
        height: 40vw;
        max-height: 600px;
        background: #020202 url(../img/superwing_swap.jpg) center bottom/auto 100% no-repeat;
    }
}
.section-swap .section-content {
    padding-top: 64px;
    padding-bottom: 64px;
}
@media (min-width: 992px) {
    .section-swap .section-content {
        padding-top: 76px;
        padding-bottom: 82px;
    }
}
@media (min-width: 1260px) {
    .section-swap .section-content {
        max-width: 1040px;
    }
}
.section-swap .cta-btn {
    margin: 24px 0 0 0;
    letter-spacing: 0.01em;
}
.section-gallery {
    height: 160vw;
    max-height: 600px;
    position: relative;
    background-color: #202020;
}
.gallery-canvas {
    width: 100%;
    height: 100%;
}
.gallery-btn {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    border: none;
    cursor: pointer;
    background: none;
    pointer-events: none;
}
.gallery-btn:focus {
    outline: none;
}
.gallery-btn--left {
    cursor: url(), auto !important;
}
.gallery-btn--right {
    left: 50%;
    cursor: url(), auto !important;
}
@media (min-width: 576px) {
    .gallery-btn {
        pointer-events: auto;
    }
}
.easter-egg-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18vw;
    line-height: 1.42857143;
    font-weight: 600;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    background-color: rgb(0 0 0 / 0.85);
}
.easter-egg-layer::before {
    content: "";
    display: block;
    width: 260px;
    height: 360px;
    background: url();
}
.section-compare {
    text-align: center;
    padding: 64px 0;
    color: #fff;
    position: relative;
    z-index: 3;
    overflow: hidden;
}
@media (min-width: 768px) {
    .section-compare {
        padding: 96px 0;
    }
}
@media (min-width: 992px) {
    .section-compare {
        padding: 128px 0;
    }
}
.section-compare .typography-compare-section-headline {
    margin: 0 0 20px 0;
}
@media (min-width: 992px) {
    .section-compare .typography-compare-section-headline {
        margin: 0 0 32px 0;
    }
}
.section-compare .typography-compare-tagline {
    max-width: 300px;
}
.section-compare .typography-compare-section-headline + .cta-link {
    margin: 0 0 48px 0;
}
@media (min-width: 992px) {
    .section-compare .typography-compare-section-headline + .cta-link {
        margin: 0 0 64px 0;
    }
}
.compare-table {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-row-gap: 64px;
    margin-top: 64px;
}
@media (min-width: 1260px) {
    .compare-table {
        grid-row-gap: 80px;
    }
}
.compare {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    grid-column: span 12;
}
@media (min-width: 992px) {
    .compare {
        grid-column: span 6;
    }
}
.compare-image-container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    position: relative;
}
.compare-image-container::before {
    content: "";
    display: block;
    padding-bottom: 70%;
}
.image-compare {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: center/contain no-repeat;
}
.compare-badge {
    font-weight: 700;
    line-height: 1.625;
    font-size: 16px;
    color: var(--compare-badge-color, silver);
    margin: 8px 0 0 0;
}
.typography-compare-tagline + .compare-brochure {
    margin: 24px 0 0 0;
}
.compare-new {
    font-size: 14px;
    line-height: 16px;
    height: 16px;
    margin: 0 0 16px 0;
}
.compare-colors {
    display: flex;
    justify-content: center;
    margin: 18px 0 22px 0;
}
.compare-color {
    margin: 0 5px;
    width: 12px;
    height: 12px;
    background-color: #c4c4c4;
    border-radius: 50%;
    box-sizing: border-box;
}
.compare-color[for] {
    cursor: pointer;
}
.compare-tags {
    display: flex;
}
.compare-cta-links {
    display: flex;
    justify-content: center;
    margin: 24px 0 0 0;
}
@media (min-width: 768px) {
    .compare-cta-links {
        margin: 32px 0 0 0;
    }
}
.compare-cta-link {
    display: flex;
    align-items: center;
    border-radius: 100px;
    box-sizing: border-box;
    margin: 0 12px;
    padding: 0 20px;
    height: 32px;
    font-size: 14px;
    font-weight: 500;
}
.section-compare {
    background-color: #202023;
    background-color: #000;
}
.image-compare--ace-green {
    background-image: url();
}
.image-compare--ace-blue {
    background-image: url();
}
.image-compare--tcs-blue {
    background-image: url();
}
.image-compare--tcs-green {
    background-image: url();
}
.image-compare--sbs-grey {
    background-image: url();
}
.compare-color--ace-green {
    background-color: #01b400;
}
.compare-color--ace-blue {
    background-color: #3f11f7;
}
.compare-color--tcs-green {
    background-color: #01b400;
}
.compare-color--tcs-blue {
    background-color: #3f11f7;
}
.compare-color--sbs-grey {
    background-color: #4d4d5d;
}
.typography-section-headline {
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
}
@media (min-width: 992px) {
    .typography-section-headline {
        font-size: 30px;
    }
}
.typography-section-intro {
    font-size: 16px;
    line-height: 1.42857143;
}
@media (min-width: 768px) {
    .typography-section-intro {
        line-height: 1.42857143;
        font-size: 18px;
    }
}
.typography-section-headline + .typography-section-intro {
    margin: 16px 0 0 0;
}
.typography-compare-section-headline {
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
}
@media (min-width: 992px) {
    .typography-compare-section-headline {
        font-size: 30px;
    }
}
.typography-compare-headline {
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .typography-compare-headline {
        font-size: 18px;
    }
}
@media (min-width: 992px) {
    .typography-compare-headline {
        font-size: 20px;
    }
}
.typography-compare-tagline {
    font-size: 16px;
    line-height: 1.42857143;
}
.section-build {
    overflow: hidden;
    position: relative;
    background-color: #000;
    background-image: radial-gradient(circle at 50% -9%, rgb(51 52 78 / 0.98), #000 80%);
    padding: 64px 0;
}
@media (min-width: 768px) {
    .section-build {
        padding: 96px 0;
    }
}
@media (min-width: 992px) {
    .section-build {
        padding: 120px 0;
    }
}
@media (min-width: 1260px) {
    .section-build {
        padding: 128px 0;
    }
}
.section-build .section-content {
    padding: 0;
}
@media (min-width: 768px) {
    .section-build .section-content {
        padding: 0 16px;
    }
}
.models {
    display: flex;
    margin: auto;
    position: relative;
    max-width: 560px;
}
.models .cta-btn {
    margin: auto auto 0 auto;
}
@media (min-width: 768px) {
    .models .cta-btn:lang(zh) {
        width: 180px;
    }
}
@media (min-width: 768px) {
    .models {
        max-width: 1056px;
    }
}
.model-container {
    max-width: 410px;
    margin: auto;
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.model-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.model-images {
    position: relative;
    padding-bottom: 30px;
}
.model-images::before {
    content: "";
    display: block;
    padding-bottom: 59.73333333%;
}
@media (min-width: 992px) {
    .model-images {
        margin: 0 -56px;
    }
}
.image-model {
    position: absolute;
    top: 0;
    width: 100%;
    height: calc(100% - 30px);
    background: center/contain no-repeat;
    opacity: 0;
    transition: opacity 0.2s 0.3s;
}
.image-model--white {
    background-image: url();
}
.image-model--black {
    background-image: url();
}
.model-product-name {
    color: #fff;
    font-weight: 600;
    font-size: 8vw;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    margin: 0;
    flex: 1;
    padding: 10px 0;
}
@media (min-width: 400px) {
    .model-product-name {
        font-size: 32px;
    }
}
@media (min-width: 768px) {
    .model-product-name {
        padding: 0;
        width: 100%;
        border-bottom: none;
    }
}
@media (min-width: 992px) {
    .model-product-name {
        font-size: 36px;
    }
}
.model-color-picker {
    display: flex;
    justify-content: center;
    margin: 36px 0 36px 0;
}
@media (min-width: 992px) {
    .model-color-picker {
        margin: 46px 0 40px 0;
    }
}
.model-color-picker:lang(en) {
    margin: 0 0 30px 0;
}
@media (min-width: 992px) {
    .model-color-picker:lang(en) {
        margin: 38px 0 48px 0;
    }
}
.model-color-btn {
    flex: 0 0 40px;
    margin: 0 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    align-items: center;
    transition: 0.3s;
    cursor: pointer;
    background-color: #fff0;
}
.model-color-btn::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: scale(0.875);
}
.model-color-btn--white::before {
    background-color: #efeff5;
}
.model-color-btn--black::before {
    background-color: #2e2e34;
}
.model-color-badge {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -40px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.216em;
    padding: 0 0 0 0.3em;
    border-radius: 20px;
    line-height: 30px;
    width: 80px;
    height: 30px;
    color: #fff;
}
.model-color-badge:lang(en) {
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 0;
    width: 160px;
    margin-left: -80px;
}
.model-color-badge--white {
    color: #323237;
    background-color: #efeff5;
}
.model-color-badge--black {
    color: #fff;
    background-color: #2e2e34;
}
.model-features {
    text-align: left;
    margin: 0 auto 30px auto;
    width: 16em;
}
.model-features:lang(en) {
    width: 18em;
}
.model-features li + li {
    margin-top: 0.6em;
}
@media (min-width: 576px) {
    .model-features {
        font-size: 16px;
    }
}
@media (min-width: 768px) {
    .model-features {
        margin: 0 auto 80px auto;
    }
}
@media (min-width: 992px) {
    .model-features {
        font-size: 18px;
    }
}
.model-color-toggle:nth-child(1):checked ~ .model-images .image-model:nth-child(1) {
    z-index: 1;
    opacity: 1;
    transition: 0.5s;
}
.model-color-toggle:nth-child(1):checked ~ .model-body .model-color-btn:nth-child(1) {
    background-color: #dbddde;
    transform: translateY(-8px);
}
@media (min-width: 768px) {
    .model-color-toggle:nth-child(1):checked ~ .model-body .model-color-btn:nth-child(1) {
        transform: translateY(-10px);
    }
}
.model-color-toggle:nth-child(2):checked ~ .model-images .image-model:nth-child(2) {
    z-index: 1;
    opacity: 1;
    transition: 0.5s;
}
.model-color-toggle:nth-child(2):checked ~ .model-body .model-color-btn:nth-child(2) {
    background-color: #dbddde;
    transform: translateY(-8px);
}
@media (min-width: 768px) {
    .model-color-toggle:nth-child(2):checked ~ .model-body .model-color-btn:nth-child(2) {
        transform: translateY(-10px);
    }
}
.model-product-name-wrapper {
    display: flex;
    margin: 30px 0 0 0;
}
@media (min-width: 768px) {
    .model-product-name-wrapper {
        margin: 40px 0 0 0;
    }
}
@media (min-width: 992px) {
    .model-product-name-wrapper {
        margin: 56px 0 0 0;
    }
}
@media (max-width: 767.98px) {
    .model-container {
        position: absolute;
        left: 0;
        top: 0;
        height: 0;
        width: 100%;
        z-index: 2;
    }
    .model-container:nth-child(2) .model-product-name-wrapper {
        justify-content: flex-end;
    }
    .model-images {
        opacity: 0;
    }
    .model-toggle:nth-child(1):checked ~ .models .model-container:nth-child(1) {
        position: relative;
        z-index: 1;
        height: auto;
    }
    .model-toggle:nth-child(1):checked ~ .models .model-container:nth-child(1) .model-product-name-wrapper {
        pointer-events: none;
    }
    .model-toggle:nth-child(1):checked ~ .models .model-container:nth-child(1) .model-product-name {
        opacity: 1;
    }
    .model-toggle:nth-child(1):checked ~ .models .model-container:nth-child(1) .model-images {
        opacity: 1;
    }
    .model-toggle:nth-child(1):checked ~ .models .model-container:nth-child(1) .model-body {
        pointer-events: auto;
        opacity: 1;
    }
    .model-toggle:nth-child(2):checked ~ .models .model-container:nth-child(2) {
        position: relative;
        z-index: 1;
        height: auto;
    }
    .model-toggle:nth-child(2):checked ~ .models .model-container:nth-child(2) .model-product-name-wrapper {
        pointer-events: none;
    }
    .model-toggle:nth-child(2):checked ~ .models .model-container:nth-child(2) .model-product-name {
        opacity: 1;
    }
    .model-toggle:nth-child(2):checked ~ .models .model-container:nth-child(2) .model-images {
        opacity: 1;
    }
    .model-toggle:nth-child(2):checked ~ .models .model-container:nth-child(2) .model-body {
        pointer-events: auto;
        opacity: 1;
    }
}
.section-specs {
    position: relative;
    color: rgb(255 255 255 / 0.4);
    background-color: #202023;
    font-size: 14px;
}
.section-specs .section-content {
    padding: 56px 0;
}
@media (min-width: 576px) {
    .section-specs .section-content {
        padding: 80px 0 60px 0;
    }
}
@media (min-width: 992px) {
    .section-specs .section-content {
        padding: 120px 0 80px 0;
    }
}
.specs-header {
    text-align: center;
}
.specs-title {
    padding-left: 3px;
    letter-spacing: 3px;
    font-weight: 400;
    font-size: inherit;
}
.specs-link {
    font-weight: 600;
    color: #28c3ff;
    text-decoration: underline;
}
.specs-link:hover {
    color: #28c3ff;
}
.specs-container {
    max-width: 1165px;
    margin: auto;
    padding: 30px 30px 0 30px;
}
@media (min-width: 576px) {
    .specs-container {
        padding: 60px 30px 0 30px;
    }
}
.specs {
    display: grid;
    grid-column: 2;
    grid-column-gap: 20px;
    grid-row-gap: 50px;
    grid-template-columns: repeat(2, 1fr);
    max-height: 500px;
    overflow: hidden;
    transition: max-height 1s;
}
#specs-toggle:checked ~ .specs-container .specs {
    max-height: 1600px;
}
@media (min-width: 576px) {
    .specs {
        grid-row-gap: 8px;
        grid-column-gap: 60px;
        max-height: 100% !important;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}
.spec {
    text-align: center;
}
@media (min-width: 576px) {
    .spec {
        display: flex;
        text-align: left;
    }
}
.spec__icon {
    margin: 0 0 8px 0;
}
@media (min-width: 576px) {
    .spec__icon {
        margin: 8px 0 0 0;
    }
}
.spec__content {
    flex: 1;
    line-height: 1.42857143;
}
@media (min-width: 576px) {
    .spec__content {
        padding-left: 16px;
        height: 96px;
    }
}
.spec-icon {
    width: 40px;
    height: 40px;
    display: block;
    margin: auto;
    background: center/contain no-repeat;
}
@media (min-width: 576px) {
    .spec-icon {
        margin: 0;
    }
}
.spec-icon--colors {
    background-image: url(../img/icon-colors.svg?v=v7);
}
.spec-icon--maxpower {
    background-image: url(../img/icon-maxpower.svg?v=v7);
}
.spec-icon--torque {
    background-image: url(../img/icon-torque.svg?v=v7);
}
.spec-icon--dimensions {
    background-image: url(../img/icon-dimensions.svg?v=v7);
}
.spec-icon--belt {
    background-image: url(../img/icon-belt.svg?v=v7);
}
.spec-icon--angle {
    background-image: url(../img/icon-angle.svg?v=v7);
}
.spec-icon--break {
    background-image: url(../img/icon-break.svg?v=v7);
}
.spec-icon--suspensions {
    background-image: url(../img/icon-suspensions.svg?v=v7);
}
.spec-icon--card {
    background-image: url(../img/icon-card.svg?v=v7);
}
.spec-icon--aeroframe {
    background-image: url(../img/icon-aeroframe.svg?v=v7);
}
.spec-icon--sbs {
    background-image: url(../img/icon-sbs.svg?v=v7);
}
.spec-icon--trunk {
    background-image: url(../img/icon-trunk.svg?v=v7);
}
.spec-icon--speed {
    background-image: url(../img/icon-speed.svg?v=v7);
}
.spec-title {
    font-size: inherit;
    line-height: 24px;
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.0216em;
}
@media (min-width: 576px) {
    .spec-title {
        margin-top: 8px;
    }
}
.specs-toggle {
    font-size: 10px;
    font-weight: 600;
    padding-left: 3px;
    letter-spacing: 3px;
    text-align: center;
    text-transform: uppercase;
    display: block;
    cursor: pointer;
    padding-top: 56px;
    margin-bottom: 0;
}
.specs-toggle::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    position: relative;
    left: -5px;
    transform: rotate(-90deg);
    background: center left/contain no-repeat
        url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxNXB4IiBoZWlnaHQ9IjI4cHgiIHZpZXdCb3g9IjAgMCAxNSAyOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgPGcgaWQ9IkdvZ29yby0yLURlbGlnaHQtd2ViIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJBc3NldHMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NTEuMDAwMDAwLCAtMTYyLjAwMDAwMCkiIHN0cm9rZT0iIzkzOTQ5NyIgc3Ryb2tlLXdpZHRoPSIyIj4gICAgICAgICAgICA8cG9seWxpbmUgaWQ9IkFycm93X2xlZnQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY1OC43NzQwMDAsIDE3NS45NjU1MDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTY1OC43NzQwMDAsIC0xNzUuOTY1NTAwKSAiIHBvaW50cz0iNjUzIDE2MyA2NjQuNTQ4IDE3Ni4yNzUgNjUzLjA0NSAxODguOTMxIj48L3BvbHlsaW5lPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+);
}
#specs-toggle:checked ~ .specs-container .specs-toggle {
    display: none;
}
@media (min-width: 576px) {
    .specs-toggle {
        display: none;
    }
}
.sosumi {
    margin: 40px 0 0 0;
    padding: 60px 0 0 0;
    border-top: 1px solid rgb(255 255 255 / 0.2);
}
.sosumi [data-footnote-list] li {
    list-style: disc;
}
@media (min-width: 992px) {
    .sosumi {
        margin: 60px 0 0 0;
        padding: 80px 0 0 0;
    }
}