@font-face {
    font-family: 'SourceHanSansSC';
    src: url('../../fonts/SourceHanSansCN-ExtraLight.otf');
    font-weight: 200;
    /* 可变字体支持所有粗细 */
    font-style: normal;
}

@font-face {
    font-family: 'SourceHanSansSC';
    src: url('../../fonts/SourceHanSansCN-Light.otf');
    font-weight: 300;
    /* 可变字体支持所有粗细 */
    font-style: normal;
}

@font-face {
    font-family: 'SourceHanSansSC';
    src: url('../../fonts/SourceHanSansCN-Normal.otf');
    font-weight: 400;
    /* 可变字体支持所有粗细 */
    font-style: normal;
}

@font-face {
    font-family: 'SourceHanSansSC';
    src: url('../../fonts/SourceHanSansCN-Medium.otf');
    font-weight: 500;
    /* 可变字体支持所有粗细 */
    font-style: normal;
}

@font-face {
    font-family: 'SourceHanSansSC';
    src: url('../../fonts/SourceHanSansCN-Bold.otf');
    font-weight: 600;
    /* 可变字体支持所有粗细 */
    font-style: normal;
}

:root {
    --theme-color-primary: #e60012;
    /* 三菱电机红 */
    --theme-color-secondary: #1a1a1a;
    --theme-color-text: #eeeeee;
    --theme-color-bg: #fff;
    --theme-font-main: "SourceHanSansSC", Arial, sans-serif;

    /* ui-scale-factor */
    --rpx-75: clamp(0.75px, calc(0.026vw + 0.500px), 1px);
    --rpx-67: clamp(0.667px, calc(0.035vw + 0.334px), 1px);
    --rpx-50: clamp(.5px, 0.052vw, 1px);

    /* font-size-scale-factor */
    --fpx-87: clamp(0.875px, calc(0.013vw + 0.75px), 1px);
    --fpx-75: clamp(0.75px, calc(0.026vw + 0.500px), 1px);
    --fpx-67: clamp(0.667px, calc(0.035vw + 0.334px), 1px);
    --fpx-50: clamp(.5px, 0.052vw, 1px);

    /*
    * 1px at 1920
    * 0.667px at 960
    */
    --rpx: var(--rpx-67);
    --fpx: var(--fpx-87);

    --wrapper-width: clamp(900px, calc(52.0833vw + 400px), 1380px);
    --wrapper-margin: calc((100vw - var(--wrapper-width)) / 2);

    --header-height-min: calc(72 * var(--rpx));
    --header-height-max: calc(110 * var(--rpx));
    --breadcrumbs-height: calc(50 * var(--rpx));

    --header-height: var(--header-height-max);
    --page-padding-top: calc(var(--header-height-max) + var(--breadcrumbs-height));

    --inner-nav-max: calc(72 * var(--rpx));
    --inner-nav-min: calc(60 * var(--rpx));

    --no-header-100vh: calc(100vh - var(--header-height-max));
}

* {
    font-family: var(--theme-font-main), sans-serif !important;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: var(--theme-font-main), sans-serif !important;
    background: #1B1F27;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    max-height: 100%;
}

.content h3 {
    margin-top: 0;
    margin-bottom: 0;
}

.page {
    min-height: 100dvh;
    color: #fff;
    font-weight: 400;
    overflow-x: clip;
    overflow-y: visible;
}

.page-mg .wrapper {
    width: var(--wrapper-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

.visual {
    background: #000;
}

.visual .visual-header {
    padding-top: calc(280 * var(--rpx));
    min-height: calc(1480 * var(--rpx));
    position: relative;
}

.visual .visual-header__overlay {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.visual .visual-header .wrapper {
    align-items: flex-start;
    position: relative;
    z-index: 3;
}

.visual .visual-header .visual-wrapper {
    z-index: 2;
}

.visual .visual-header .position-bg-1 {
    width: calc(743 * var(--rpx));
    position: absolute;
    left: calc(-241 * var(--rpx));
    bottom: calc(175 * var(--rpx));
}

.visual .visual-header .position-bg-2 {
    width: calc(878 * var(--rpx));
    position: absolute;
    bottom: calc(197 * var(--rpx));
}

.visual .visual-header__left {
    width: max-content;
    font-weight: bold;
    margin-right: calc(170 * var(--rpx));
    position: relative;
    flex: 0 0 auto;
}

.visual .visual-header__left .position-img-1 {
    width: calc(878 * var(--rpx));
    max-width: unset;
    max-height: unset;
    position: absolute;
    top: 80%;
    left: calc(-1 * var(--wrapper-margin));
    transform: translate(0, -50%);
}

.visual .visual-header__left .content {
    position: relative;
    z-index: 1;
}

.visual .visual-header__left .line {
    font-size: calc(38 * var(--fpx-50));
    font-weight: bold;
    line-height: 1;
}

.visual .visual-header__left .texts-1 .line+.line {
    font-weight: 500;
    margin-top: calc(14 * var(--rpx));
}

.visual .visual-header__left .texts-2 {
    margin-top: calc(60 * var(--rpx));
}

.visual .visual-header__left .new-tag {
    height: calc(36 * var(--rpx));
}

.visual .visual-header__left .texts-2 *+* {
    margin-top: calc(20 * var(--rpx));
}

.visual .visual-header__left .texts-2 .line-1 {
    font-weight: bold;
}

.visual .visual-header__left .texts-2 .line-2 {
    color: yellow;
    font-size: calc(68 * var(--rpx));
    font-weight: bold;
    margin-top: calc(20 * var(--rpx));
}

.visual .visual-header__left .texts-2 .line-3 {
    font-weight: 400;
    margin-top: calc(40 * var(--rpx));
}

.visual .visual-header__right img {
    width: calc(763 * var(--rpx));
    max-width: unset;
    display: block;
    margin-top: calc(-91 * var(--rpx));
}

.visual .download {
    --h: calc(100 * var(--rpx));
    width: calc(400 * var(--rpx));
    height: var(--h);
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(51, 61, 77, .8);
    position: relative;
    margin-top: calc(115 * var(--rpx));
    margin-left: calc(-30 * var(--rpx));
    z-index: 2;
}

.visual .download::before {
    content: "";
    width: var(--h);
    height: var(--h);
    clip-path: polygon(0 0, 100% 100%, 0 100%, 0 0);
    background: rgba(32, 58, 98, .1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.visual .download .position-img-1 {
    width: calc(878 * var(--rpx));
    max-width: unset;
    max-height: unset;
    position: absolute;
    top: 204%;
    left: calc(-1 * var(--wrapper-margin));
    transform: translate(0, -50%);
    z-index: -1;
}

.visual .download .download-wrapper {
    height: 100%;
    padding: 0 calc(30 * var(--rpx));
}

.visual .download .download-content {
    padding: calc(24 * var(--rpx)) 0;
    position: relative;
    align-items: flex-end;
}

.visual .download .download-content .pdf-img {
    width: calc(98 * var(--rpx));
    max-height: unset;
    position: relative;
    flex: 0 0 auto;
}

.visual .download .download-content .inner-text {
    font-size: calc(16 * var(--fpx-67));
    padding-left: calc(30 * var(--rpx));
}

.download-icon {
    --l: calc(50 * var(--rpx));
    width: var(--l);
    height: var(--l);
    border-radius: 50%;
    margin-left: auto;
    align-self: center;
    position: relative;
    cursor: pointer;
    flex: 0 0 auto;
}

.download-icon::before {
    content: '';
    background: url(../../images/page/icon-border.svg) no-repeat center center / 100% 100%;
    position: absolute;
    inset: 0;
    transition: .3s linear;
}

.download-icon .download-icon__content {
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: var(--theme-color-primary);
    transition: .3s linear;
}

.download-icon__content img {
    height: 50%;
}

.download-icon:hover::before {
    opacity: 0;
}

.download-icon:hover .download-icon__content {
    width: 100%;
    height: 100%;
}

.visual .visual-main {
    margin-top: calc(-156 * var(--rpx));
    position: relative;
    z-index: 3;
}

.visual .visual-main .position-bg-1 {
    width: calc(600 * var(--rpx));
    position: absolute;
    right: 0;
    bottom: 0;
}

.visual .visual-main .visual-detail .inner-text {
    width: 23em;
    font-size: calc(24 * var(--rpx));
    font-weight: 300;
    flex: 0 0 auto;
    text-align: justify;
}

.visual .visual-detail__img {
    width: calc(1082 * var(--rpx));
    max-width: 100%;
    margin-left: calc(-200 * var(--rpx));
    margin-top: calc(-98 * var(--rpx));
}

.controller {
    position: relative;
}

.features {
    position: relative;
    background: url(../../images/page/bg-5.png) no-repeat left top / cover;
    z-index: 3;
}

.features .wrapper {
    min-height: calc(880 * var(--rpx));
    background: url(../../images/page/bg-6.png) no-repeat center 200% / calc(995 * var(--rpx));
}

.features .title {
    font-size: calc(48 * var(--rpx));
}

.features .desc {
    width: 100%;
    max-width: calc(600 * var(--rpx));
    font-size: calc(20 * var(--rpx));
    margin-top: calc(40 * var(--rpx));
}

.features .content {
    position: relative;
}

.features .content .feature-dots {
    height: calc(148 * var(--rpx));
    position: absolute;
    top: calc(-108 * var(--rpx));
    left: calc(var(--wrapper-margin) * -1 + calc(40 * var(--rpx)));
}

.features .features-img {
    width: calc(657 * var(--rpx));
}

.features .features-img svg {
    width: 100%;
    height: auto;
}

.controller .controller-overlay {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.controller .controller-overlay img {
    width: 1920px;
    max-width: unset;
    max-height: unset;
    /* height: 50%; */
    /* object-fit: cover; */
    display: block;
}

.decorated {
    margin-top: calc(-100 * var(--rpx));
    position: relative;
    z-index: 3;
}

.decorated .wrapper {
    border-radius: calc(16 * var(--rpx));
    border: 1px solid rgba(255, 255, 255, .2);
    padding: calc(60 * var(--rpx)) calc(40 * var(--rpx)) calc(44 * var(--rpx));
    background:
        url(../../images/page/bg-8.png) no-repeat calc(-154 * var(--rpx)) 0 / calc(308 * var(--rpx)) auto,
        url(../../images/page/bg-9.png) no-repeat calc(154 * var(--rpx) + 100%) bottom / calc(308 * var(--rpx)) auto,
        url(../../images/page/bg-7.png) no-repeat center / cover;
    opacity: .99;
}

.decorated .decorated-detail {
    font-size: calc(20 * var(--rpx));
    padding-bottom: calc(30 * var(--rpx));
}

.decorated .decorated-detail .title {
    font-size: calc(48 * var(--rpx));
}

.decorated .decorated-detail.decorated-right {
    text-align: right;
}

.decorated .decorated-detail.decorated-right .title {
    color: var(--theme-color-primary);
}

.decorated .decorated-detail .figure {
    /* width: calc(610 * var(--rpx)); */
    aspect-ratio: 610 / 396;
    margin-top: calc(46 * var(--rpx));
}

.decorated .decorated-detail .figure img {
    width: 100%;
    display: block;
}

.decorated .decorated-center {
    padding: 0 calc(14 * var(--rpx));
    flex: 0 0 auto;
    position: relative;
}

.decorated .decorated-center .border {
    width: 3px;
    height: 100%;
    background: radial-gradient(circle, var(--theme-color-primary) 1.5px, transparent 1.5px);
    background-size: 3px 8px;
    background-repeat: repeat-y;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1;
}

.decorated .decorated-center .arrow-right {
    --l: calc(50 * var(--rpx));
    width: var(--l);
    height: var(--l);
    margin-top: calc(148 * var(--rpx));
    position: relative;
    z-index: 2;
}

.decorated .decorated-footer {
    margin-top: calc(40 * var(--rpx));
}

.decorated .decorated-footer .device-names {
    font-size: calc(14 * var(--rpx));
    gap: calc(12 * var(--rpx)) calc(20 * var(--rpx));
}

.decorated .decorated-footer .item {
    display: flex;
    align-items: center;
}

.decorated .decorated-footer .num {
    --l: calc(16 * var(--rpx));
    width: var(--l);
    height: var(--l);
    font-size: calc(12 * var(--rpx));
    border: 1px solid #fff;
    line-height: .8em;
    border-radius: 50%;
    margin-right: calc(6 * var(--rpx));
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.safe {
    margin-top: calc(120 * var(--rpx));
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
    z-index: 3;
}

.safe .title {
    font-size: calc(48 * var(--rpx));
    font-weight: bold;
    line-height: 1;
}

.safe .words {
    margin-top: calc(60 * var(--rpx));
    position: relative;
}

.safe .word-img svg {
    width: 100%;
    height: auto;
}

.safe .words .product-img {
    width: calc(455 * var(--rpx));
    position: absolute;
    right: calc(96 * var(--rpx));
    bottom: calc(-122 * var(--rpx));
}

.safe .words .product-img img {
    display: block;
}

.safe .data-table {
    margin-top: calc(60 * var(--rpx));
    position: relative;
    z-index: 2;
    overflow: scroll;
}

.safe .data-table::-webkit-scrollbar {
    display: none;
}

.safe .data-table table {
    font-size: calc(16 * var(--rpx));
    border-radius: calc(16 * var(--rpx));
    overflow: hidden;
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, .05);
}

.safe .data-table table th,
.safe .data-table table td {
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .2);
}

.safe .data-table thead th {
    background: #5F7689;
}

.safe .data-table thead th.td-special {
    background: #95A7B7;
}

.safe .data-table thead th {
    border-top: none;
}

.safe .data-table thead tr th:nth-of-type(1),
.safe .data-table tbody tr td:nth-of-type(1) {
    border-left: none;
}

.safe .data-table thead tr th:nth-last-of-type(1),
.safe .data-table tbody tr td:nth-last-of-type(1) {
    border-right: none;
}

.safe .data-table tbody tr:nth-of-type(1) td,
.safe .data-table tbody tr:nth-of-type(2) td,
.safe .data-table tbody tr:nth-of-type(3) td,
.safe .data-table tbody tr:nth-last-of-type(2) td,
.safe .data-table tbody tr:nth-last-of-type(1) td {
    border-bottom: none;
}

.safe .data-table .th-content {
    padding: calc(16 * var(--rpx)) calc(20 * var(--rpx));
}

.safe .data-table tbody .td-content {
    padding: calc(6 * var(--rpx)) calc(20 * var(--rpx));
    position: relative;
    z-index: 1;
}

.safe .data-table tbody td.fff-01 {
    background: rgba(255, 255, 255, .1);
}

.safe .data-table tbody td.td-filter {
    position: relative;
    background: #5F6F7C linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 0, 0, .4)) no-repeat center 100% / 100% 50%;
}

.safe .data-table tbody td.td-filter::before {
    content: "";
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: absolute;
    inset: 0;
}

.safe .data-table .tip {
    font-size: calc(14 * var(--rpx));
    margin-top: calc(10 * var(--rpx));
}

.safe .cells {
    gap: calc(10 * var(--rpx)) 0;
}

.safe .cells .cell {
    height: calc(60 * var(--rpx));
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 5px;
    background: rgba(255, 255, 255, .1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.safe .cells .cell.cell-img {
    background: transparent;
    border: none;
}

.safe .cells .cell-img img {
    height: calc(48 * var(--rpx));
}

.safe .cells .cell {
    height: calc(60 * var(--rpx));
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 5px;
    background: rgba(255, 255, 255, .1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.safe>.position-img img {
    display: block;
}

.safe>.position-img-1 {
    width: calc(420 * var(--rpx));
    position: absolute;
    top: calc(-285 / 1920 * 100vw);
    right: 0;
}

.safe>.position-img-2 {
    width: calc(466 * var(--rpx));
    position: absolute;
    bottom: 0;
    left: 0;
}

.example {
    margin-top: calc(115 * var(--rpx));
    position: relative;
    z-index: 3;
}

.example .wrapper {
    border-radius: calc(16 * var(--rpx));
    padding: calc(60 * var(--rpx)) calc(40 * var(--rpx));
    border: 1px solid rgba(255, 255, 255, .2);
    overflow: hidden;
    position: relative;
    z-index: 2;
    background: url(../../images/page/bg-8.png) no-repeat calc(-154 * var(--rpx)) 0 / calc(308 * var(--rpx)) auto, url(../../images/page/bg-9.png) no-repeat calc(154 * var(--rpx) + 100%) bottom / calc(308 * var(--rpx)) auto, url(../../images/page/bg-10.png) no-repeat center / cover;
    opacity: .9;
}

.example .example-main {
    position: relative;
}

.example .example-main .title {
    font-size: calc(38 * var(--rpx));
    font-weight: bold;
}

.example .list {
    margin-top: calc(70 * var(--rpx));
    border-top: 1px solid rgba(255, 255, 255, .2);
    flex: 1 0 0;
}

.example .cell {
    padding: calc(24 * var(--rpx)) 0;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    align-items: center;
}

.example .cell .icon {
    --l: calc(24 * var(--rpx));
    width: var(--l);
    height: var(--l);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .5);
    background: var(--theme-color-primary);
    margin-right: calc(16 * var(--rpx));
}

.example .cell .tip {
    color: #fff;
    font-size: calc(14 * var(--rpx));
    opacity: .5;
}

.example .border {
    padding: 0 calc(60 * var(--rpx));
    position: relative;
}

.example .border::before {
    content: "";
    width: 3px;
    height: 100%;
    background: radial-gradient(circle, var(--theme-color-primary) 1.5px, transparent 1.5px);
    background-size: 3px 8px;
    background-repeat: repeat-y;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

.example .figure img {
    display: block;
}

.example .position-img {
    position: absolute;
}

.example .position-img img {
    display: block;
}

.example .position-img-1 {
    width: calc(724 * var(--rpx));
    bottom: calc(-50 * var(--rpx));
    left: calc(40 * var(--rpx));
}

.example .position-img-2 {
    width: calc(793 * var(--rpx));
    left: 0;
    top: calc(-245 / 1920 * 100vw);
}

.example .position-img-3 {
    width: calc(617 * var(--rpx));
    right: 0;
    bottom: calc(-100 / 1920 * 100vw);
}

.consultation {
    margin-top: calc(180 * var(--rpx));
}

.consultation .top {
    padding-top: calc(80 * var(--rpx));
    position: relative;
    z-index: 5;
}

.consultation .top .title {
    font-size: calc(48 * var(--rpx));
    padding-left: 50%;
}

.consultation .stripe-main {
    padding: calc(46 * var(--rpx)) 0;
    margin-top: calc(66 * var(--rpx));
    /* background: linear-gradient(to left, rgb(55, 66, 81), rgba(55, 66, 81, 0)),
    linear-gradient(to left, rgb(0, 3, 9), rgba(0, 3, 9, 0)); */
}

.consultation .stripe-main .pdf-img {
    width: calc(280 / 1920 * 100vw);
    align-self: flex-end;
    position: absolute;
    left: calc(var(--wrapper-margin) + calc(190 * var(--rpx)));
    z-index: 3;
}

.consultation .stripe-main .pdf-img img {
    display: block;
}

.consultation .stripe-main .position-img {
    position: absolute;
    align-self: center;
}

.consultation .stripe-main .position-img img {
    display: block;
}

.consultation .stripe-main .position-img-1 {
    width: calc(798 / 1920 * 100vw);
    left: 0;
    z-index: 4;
}

.consultation .stripe-main .position-img-2 {
    width: calc(938 / 1920 * 100vw);
    left: var(--wrapper-margin);
    z-index: 2;
}

.consultation .stripe-main .position-img-3 {
    width: 100%;
    align-items: center;
}

.consultation .stripe-content {
    padding-left: 50%;
    justify-content: flex-start;
    position: relative;
    z-index: 3;
}

.consultation .stripe-content .title {
    font-size: calc(34 * var(--rpx));
    font-weight: 500;
}

.consultation .stripe-content .desc {
    font-size: calc(20 * var(--rpx));
    line-height: 1;
    margin-top: calc(30 * var(--rpx));
}

.consultation .stripe-content .download-icon {
    --l: calc(100 * var(--rpx));
    margin-left: calc(72 * var(--rpx));
}

#app .main {
    margin: 0 auto;
}

#app .sec-cont .mx-container {
    width: 880px;
    max-width: 100%;
    margin: auto;
    flex: 0 0 auto;
}

#app .question {
    border-radius: calc(16 * var(--rpx));
    border: 1px solid rgba(255, 255, 255, .2);
    padding: calc(20 * var(--rpx));
    background: rgba(42, 53, 63, .5) url(../../images/page/bg-8.png) no-repeat 0 0 / calc(100 * var(--rpx)) auto;
    display: flex;
}

#app .question+.question {
    margin-top: calc(10 * var(--rpx));
}

.question-no {
    width: calc(30 * var(--rpx));
    height: calc(30 * var(--rpx));
    position: relative;
    top: unset;
    left: unset;
    transform: unset;
    background: url(../../images/page/num-bg.png) no-repeat center / 100% 100%;
}

#app .question-text-inner.required {
    color: #fff;
    font-weight: bold;
}

#app .question-text-inner p {
    display: inline-block;
}

#app .question-text-inner p span {
    color: rgba(255, 255, 255, .5);
}

#app .info-form.card-wrap {
    border-radius: calc(16 * var(--rpx));
    border: 1px solid rgba(255, 255, 255, .2);
    padding: calc(20 * var(--rpx));
    background: rgba(42, 53, 63, .5);
}

#app .field-text {
    color: #fff;
    font-weight: 300;
}

.form-content input,
.info-form .field-input {
    border: 1px solid rgba(255, 255, 255, .3);
    background: transparent;
}

.info-form .field-input {
    color: #fff;
}

.info-form select:has(option:checked[value=""]).field-input {
    color: #757575;
}

.form-content .button {
    width: calc(260 * var(--rpx));
    background: var(--theme-color-primary);
    margin: 30px auto 0;
    padding: calc(16 * var(--rpx)) 5px;
    text-align: center;
}

.form-content .button:hover {
    transform: translate(0, -5px);
}

.form-content .button span {
    text-align: center;
    padding-left: 35%;
}

.agreement {
    font-size: calc(18 * var(--rpx));
}

.agreement::before,
.question-option::before {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .5);
}

.agreement.agreed::before,
.question-option.active::before {
    border-color: #fff;
    background: var(--theme-color-primary) url(../../images/page/icon-check.svg) no-repeat center;
}

.agreement a {
    color: var(--theme-color-primary);
}

/* .visual .visual-header__left .line [data-lang="en"] {
    font-size: calc(48 * var(--rpx));
} */
@media screen and (max-width: 1600px) {
    .visual .visual-header {
        padding-top: calc(220 * var(--rpx));
    }

    .visual .download {
        margin-top: calc(10 * var(--rpx));
    }

    .features .wrapper {
        min-height: calc(800 * var(--rpx));
    }

    .features .features-img {
        width: calc(600 * var(--rpx));
    }

    .visual .visual-main {
        margin-top: calc(-320 * var(--rpx));
    }
}

@media screen and (max-width: 1300px) {
    .visual .visual-header {
        min-height: calc(1280 * var(--rpx));
    }

    .visual .visual-header__right img {
        width: calc(660 * var(--rpx));
    }

    .visual .visual-header__left .line {
        font-size: calc(30 * var(--rpx));
    }

    .visual .visual-header__left .texts-2 {
        margin-top: calc(30 * var(--rpx));
    }

    .visual .visual-header__left .new-tag {
        height: calc(24 * var(--rpx));
    }

    .visual .visual-header__left .texts-2 .line-2 {
        font-size: calc(58 * var(--rpx));
    }

    .visual .download .position-img-1 {
        width: calc(634 * var(--rpx));
    }

    .visual .visual-detail__img {
        width: calc(700 * var(--rpx));
        margin-left: calc(-160 * var(--rpx));
    }

    .features .wrapper {
        min-height: calc(660 * var(--rpx));
        background-position: center 480%;
    }

    .features .title {
        font-size: calc(36 * var(--rpx));
    }
    .features .features-img {
        width: calc(460 * var(--rpx));
    }

    .decorated .wrapper {
        padding: calc(40 * var(--rpx));
    }
    .controller .controller-overlay img {
        width: 1400px;
    }

    .decorated .decorated-footer {
        margin-top: calc(20 * var(--rpx));
    }
    .example .wrapper {
        padding: calc(40 * var(--rpx));
    }
    .example .list {
        margin-top: calc(30 * var(--rpx));
    }
}


@media screen and (max-width: 900px) {
    .visual .visual-header__overlay img {
        width: calc(1200 * var(--rpx));
        max-width: unset;
        max-height: unset;
        position: absolute;
        right: 0;
        top: 0;
    }

    .visual .visual-header .visual-wrapper {
        flex-wrap: wrap;
    }

    .visual .visual-header .visual-wrapper .visual-header__right {
        order: 1;
        margin-top: -10%;
    }

    .visual .visual-header .visual-wrapper .visual-header__right img {
        max-width: 80%;
        margin: auto;
    }

    .visual .visual-header .visual-wrapper .visual-header__left {
        width: 100%;
        order: 2;
        margin-right: 0;
        padding: calc(80 * var(--rpx)) 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .visual .visual-header__left .position-img-1 {
        width: 100%;
        top: 50%;
    }

    .visual .visual-main .visual-detail {
        width: 100%;
        flex-wrap: wrap;
    }

    .visual .visual-detail__img {
        margin-top: 0;
        margin-left: 0;
    }

    .visual .visual-main {
        margin-top: 0;
    }

    .visual .download {
        margin-left: 0;
        margin-top: calc(60 * var(--rpx));
    }

    .features .wrapper {
        padding-top: calc(160 * var(--rpx));
        padding-bottom: calc(160 * var(--rpx));
        flex-wrap: wrap;
        background-position: center 137%;
    }

    .features .features-img {
        width: 100%;
        margin-top: calc(40 * var(--rpx));
    }

    .decorated .decorated-content {
        flex-direction: column;
    }

    .decorated .decorated-center .border {
        width: 100%;
        height: 3px;
        background-size: 8px 3px;
        background-repeat: repeat-x;
    }

    .decorated .decorated-center .arrow-right {
        margin-top: 0;
        transform: rotate(90deg);
    }

    .decorated .decorated-footer .device-names {
        flex-wrap: wrap;
    }

    .decorated .decorated-footer .item {
        flex: 0 0 calc(50% - calc(10 * var(--rpx)));
    }

    .safe .words .product-img {
        width: calc(300 * var(--rpx));
    }

    .example .example-main {
        flex-wrap: wrap;
    }

    .example .cell {
        font-size: calc(24 * var(--rpx));
    }

    .example .example-content {
        width: 100%;
    }

    .example .border {
        width: 100%;
        padding: calc(40 * var(--rpx)) 0;
    }

    .example .border::before {
        width: 100%;
        height: 3px;
        background-size: 8px 3px;
        background-repeat: repeat-x;
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
    }

    .example .figure {
        width: 100%;
        flex: 0 0 auto;
    }

    .consultation {
        margin-top: calc(100 * var(--rpx));
    }
}

@media (max-width: 828px) {
    :root {
        --rpx-50: calc(.86667vw / 8.28);
        --rpx-67: calc(1vw / 8.28);
        --rpx-75: calc(1.25vw / 8.28);
        --fpx-87: calc(1.733vw / 7.5);
        --fpx-75: calc(1.5vw / 7.5);
        --fpx-67: calc(1.333vw / 7.5);
        --fpx-50: calc(1vw / 7.5);
        --wrapper-width: calc(748 * var(--rpx));
        --wrapper-margin: calc((100vw - var(--wrapper-width)) / 2);
        --header-height-min: calc(100 * var(--rpx));
        --header-height-max: calc(100 * var(--rpx));
        --breadcrumbs-height: calc(72 * var(--rpx));
    }

    .page-mg .wrapper {
        width: var(--wrapper-width);
    }

    .controller .controller-overlay img {
        height: 50%;
        object-fit: cover;
    }

    .question-no {
        width: calc(40 * var(--rpx));
        height: calc(40 * var(--rpx));
    }

    #app .info-form.card-wrap {
        --column: 1;
    }

    .consultation .top .title,
    .consultation .stripe-content {
        padding-left: 45%;
    }

    .consultation .stripe-content .download-icon {
        margin-left: calc(20 * var(--rpx));
    }
}