@charset "UTF-8";
/** author: uimix.com date: 2017-07-10 description: 设置媒体查询节点 */
/** author: uimix.com date: 2017-07-26 description: 设置容器背景图 */
/** author: uimix.com date: 2017-07-10 description: 节点属性\栅格 */
/** author: uimix.com date: 2017-07-11 description: 像素px转rem */
/** author: uimix.com date: 2017-07-10 description: 按比例处理宽高 */
/* 边距 */
/* 组件上下间距 */
/* safe area */
/** Swiper 4.5.3 Most modern mobile touch slider and framework with hardware accelerated transitions http://www.idangero.us/swiper/ Copyright 2014-2019 Vladimir Kharlampidi Released under the MIT License Released on: October 16, 2019 */
.base-wrapper { /* Auto Height */ /* 3D Effects */ /* IE10 Windows Phone 8 Fixes */ /* Common Styles */ /* Bullets */ /* Progress */ /* Scrollbar */ /* Preloader */ /* a11y */ }

.base-wrapper .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; }

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

.base-wrapper .swiper-container-vertical > .swiper-wrapper { -ms-flex-direction: column; flex-direction: column; }

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

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

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

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

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

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

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

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

.base-wrapper .swiper-container-3d { -webkit-perspective: 12rem; perspective: 12rem; }

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

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

.base-wrapper .swiper-container-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

.base-wrapper .swiper-container-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

.base-wrapper .swiper-container-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

.base-wrapper .swiper-container-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

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

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

.base-wrapper .swiper-button-prev, .base-wrapper .swiper-button-next { position: absolute; top: 50%; width: 0.27rem; height: 0.44rem; margin-top: -0.22rem; z-index: 10; cursor: pointer; background-size: 0.27rem 0.44rem; background-position: center; background-repeat: no-repeat; }

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

.base-wrapper .swiper-button-prev, .base-wrapper .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: 0.1rem; right: auto; }

.base-wrapper .swiper-button-next, .base-wrapper .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: 0.1rem; left: auto; }

.base-wrapper .swiper-button-prev.swiper-button-white, .base-wrapper .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"); }

.base-wrapper .swiper-button-next.swiper-button-white, .base-wrapper .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"); }

.base-wrapper .swiper-button-prev.swiper-button-black, .base-wrapper .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"); }

.base-wrapper .swiper-button-next.swiper-button-black, .base-wrapper .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"); }

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

.base-wrapper .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; }

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

.base-wrapper .swiper-pagination-fraction, .base-wrapper .swiper-pagination-custom, .base-wrapper .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 0.1rem; left: 0; width: 100%; }

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

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

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

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

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

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

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

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

.base-wrapper .swiper-pagination-bullet { width: 0.08rem; height: 0.08rem; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2; }

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

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

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

.base-wrapper .swiper-container-vertical > .swiper-pagination-bullets { right: 0.1rem; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); }

.base-wrapper .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0.06rem 0; display: block; }

.base-wrapper .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 0.08rem; }

.base-wrapper .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms top, 200ms -webkit-transform; transition: 200ms transform, 200ms top; transition: 200ms transform, 200ms top, 200ms -webkit-transform; }

.base-wrapper .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 0.04rem; }

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

.base-wrapper .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms left, 200ms -webkit-transform; transition: 200ms transform, 200ms left; transition: 200ms transform, 200ms left, 200ms -webkit-transform; }

.base-wrapper .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms right, 200ms -webkit-transform; transition: 200ms transform, 200ms right; transition: 200ms transform, 200ms right, 200ms -webkit-transform; }

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

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

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

.base-wrapper .swiper-container-horizontal > .swiper-pagination-progressbar, .base-wrapper .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 0.04rem; left: 0; top: 0; }

.base-wrapper .swiper-container-vertical > .swiper-pagination-progressbar, .base-wrapper .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 0.04rem; height: 100%; left: 0; top: 0; }

.base-wrapper .swiper-pagination-white .swiper-pagination-bullet-active { background: #ffffff; }

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

.base-wrapper .swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill { background: #ffffff; }

.base-wrapper .swiper-pagination-black .swiper-pagination-bullet-active { background: #000000; }

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

.base-wrapper .swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill { background: #000000; }

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

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

.base-wrapper .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 0.03rem; z-index: 50; height: 0.05rem; width: 98%; }

.base-wrapper .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 0.03rem; top: 1%; z-index: 50; width: 0.05rem; height: 98%; }

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

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

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

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

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

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

.base-wrapper .swiper-lazy-preloader { width: 0.42rem; height: 0.42rem; position: absolute; left: 50%; top: 50%; margin-left: -0.21rem; margin-top: -0.21rem; z-index: 10; -webkit-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; }

.base-wrapper .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; }

.base-wrapper .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); } }

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

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

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

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

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

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

.base-wrapper .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; transform-origin: 0 0; width: 100%; height: 100%; }

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

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

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

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

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

.base-wrapper .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: #000; opacity: 0.6; -webkit-filter: blur(0.5rem); filter: blur(0.5rem); z-index: 0; }

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

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

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

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

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

.base-wrapper .swiper-container-coverflow .swiper-wrapper { /* Windows 8 IE 10 fix */ -ms-perspective: 12rem; }

.base-wrapper { position: relative; padding-top: 0.62rem; font-family: "OPPOSans-Regular", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; color: #000000; background: #ffffff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; }

.base-wrapper * { box-sizing: border-box; }

.base-wrapper picture { display: block; overflow: hidden; }

.base-wrapper picture img { display: block; width: 100%; height: auto; }

.section { position: relative; overflow: hidden; }

.inner-content { position: relative; width: 13.12rem; margin: 0 auto; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.inner-content.fixed { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.move-video { display: none; }

.canvas-video { display: none; }

.lazyload { opacity: 1; }

.init-scale { -webkit-transform-origin: top center; transform-origin: top center; will-change: opacity,transform; }

@media only screen and (max-width: 767px) { .base-wrapper { padding-top: 0.5rem; }
  .inner-content { width: 3.2rem; }
  .canvas-video { display: block; } }

@media only screen and (min-width: 768px) and (max-width: 1023px) { .base-wrapper { padding-top: 0.5rem; }
  .inner-content { width: 7.2rem; }
  .canvas-video { display: block; } }

@media only screen and (min-width: 1024px) and (max-width: 1439px) { .inner-content { width: 8.96rem; }
  .canvas-video { display: block; } }

@media only screen and (min-width: 1440px) and (max-width: 1919px) { .move-video { display: block; } }

@media only screen and (min-width: 1920px) { .move-video { display: block; } }

@supports (-webkit-background-clip: text) { .background-clip { color: transparent; background-image: linear-gradient(360deg, #FF692E 0%, #DC9433 100%); -webkit-background-clip: text; background-clip: text; } }

#oc-header.fixed { position: absolute !important; }

.no-scroll { overflow: hidden; }

.base-second-nav { position: absolute; top: 0; right: 0; left: 0; z-index: 9; height: 0.62rem; line-height: 0.6rem; border-top: 0.01rem solid rgba(0, 0, 0, 0.1); border-bottom: 0.01rem solid rgba(0, 0, 0, 0.1); font-family: 'OPPOSans-Medium'; background: #ffffff; }

.base-second-nav.fixed { position: fixed; }

.base-second-nav .nav-innner { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; position: relative; width: 13.12rem; margin: 0 auto; }

.base-second-nav .product-title { display: none; position: relative; padding-right: 0.2rem; font-size: 0.13rem; color: #000000; }

.base-second-nav .product-title.selector::after { content: ''; position: absolute; top: 50%; right: 0.06rem; width: 0.06rem; height: 0.06rem; margin-top: -0.05rem; border-right: 0.02rem solid #000000; border-bottom: 0.02rem solid #000000; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: all 0.3s ease; }

.base-second-nav .product-title.on::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

.base-second-nav .product-list { -ms-flex: 1 1 0%; flex: 1 1 0%; display: -ms-flexbox; display: flex; }

.base-second-nav .product-list li { display: -ms-flexbox; display: flex; position: relative; margin-left: 0.37rem; }

.base-second-nav .product-list li:nth-of-type(-n + 1) { margin-left: 0; }

.base-second-nav .product-list li:nth-of-type(-n + 1)::before { display: none; }

.base-second-nav .product-list li::before { content: ''; position: absolute; top: 50%; left: -0.18rem; width: 0.01rem; height: 0.12rem; margin-top: -0.06rem; background: #000000; }

.base-second-nav .product-list li.on a { color: #000000; }

.base-second-nav .product-list li a { white-space: nowrap; color: rgba(0, 0, 0, 0.6); }

.base-second-nav .anchor-list { -ms-flex: 3 3 0%; flex: 3 3 0%; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; }

.base-second-nav .anchor-list li { margin: 0 0.09rem; }

.base-second-nav .anchor-list li.on a { color: #000000; }

.base-second-nav .anchor-list li a { color: rgba(0, 0, 0, 0.6); }

.base-second-nav .button-list { -ms-flex: 1 1 0%; flex: 1 1 0%; display: -ms-flexbox; display: flex; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-align: center; align-items: center; }

.base-second-nav .button-list li { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }

.base-second-nav .button-list li a { height: 0.32rem; line-height: 0.32rem; padding: 0 0.15rem; font-size: 0.13rem; color: #ffffff; background: #2ec84d; }

.base-second-nav .nav-arrow { display: none; position: absolute; top: 50%; left: 50%; width: 0.08rem; height: 0.08rem; border-right: 0.02rem solid #000000; border-bottom: 0.02rem solid #000000; -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg); transform: translate3d(-50%, -50%, 0) rotate(45deg); transition: all 0.3s ease; }

.base-second-nav .nav-arrow::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0.5rem; height: 0.5rem; -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg); transform: translate3d(-50%, -50%, 0) rotate(45deg); }

.base-second-nav .nav-arrow.on { -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg); transform: translate3d(-50%, -50%, 0) rotate(-45deg); }

.base-second-nav .nav-mask { position: absolute; left: 50%; width: 120vw; height: 100vh; background: rgba(0, 0, 0, 0.2); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); opacity: 0; visibility: hidden; }

.base-second-nav .nav-mask.on { opacity: 1; visibility: visible; }

.popup-store { font-family: "OPPOSans-Regular", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; }

.popup-store .popup-mask { position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.65); -webkit-backdrop-filter: blur(0.05rem); backdrop-filter: blur(0.05rem); opacity: 0; visibility: hidden; transition: opacity 0.5s ease; }

.popup-store .popup-mask.active { opacity: 1; visibility: visible; }

.popup-store .popup-wrapper { position: fixed; top: 50%; left: 50%; z-index: 1001; width: 13.12rem; height: 7.2rem; background-color: #fff; opacity: 0; visibility: hidden; -webkit-transform: translate3d(-50%, 25%, 0); transform: translate3d(-50%, 25%, 0); transition-delay: 0.25s; transition: opacity 0.3s, -webkit-transform 0.3s; transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s; }

.popup-store .popup-wrapper.active { opacity: 1; visibility: visible; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }

.popup-store .popup-close { position: absolute; top: 0.32rem; right: 0.32rem; z-index: 3; width: 0.14rem; height: 0.14rem; cursor: pointer; }

.popup-store .popup-close::before, .popup-store .popup-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0.16rem; height: 0.02rem; border-radius: 0.1rem; background-color: #000000; }

.popup-store .popup-close::before { -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg); transform: translate3d(-50%, -50%, 0) rotate(-45deg); }

.popup-store .popup-close::after { -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg); transform: translate3d(-50%, -50%, 0) rotate(45deg); }

.popup-store .popup-content { width: 100%; height: 100%; overflow-y: scroll; }

.popup-store .popup-content::-webkit-scrollbar { width: 0.04rem; }

.popup-store .popup-content::-webkit-scrollbar-thumb { background: #2EC84D; }

.popup-store .popup-page { margin-top: 1.46rem; margin-bottom: 0.28rem; }

.popup-store .popup-title { line-height: 0.44rem; padding-top: 0.7rem; padding-bottom: 0.32rem; font-family: "OPPOSans-Bold", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; font-size: 0.28rem; text-align: center; background-color: #ffffff; }

.popup-store .popup-subtitle { line-height: 0.32rem; margin-bottom: 0.2rem; font-size: 0.2rem; text-align: center; }

.popup-store .store-list { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; justify-content: center; width: 10.88rem; margin: 0 auto; }

.popup-store .store-item { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; width: 1.92rem; height: 1.44rem; margin-bottom: 0.32rem; background-color: rgba(0, 0, 0, 0.04); transition: background-color 0.3s ease; }

.popup-store .store-item img { width: 1.2rem; height: 0.8rem; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; }

.popup-store .store-item:hover { background-color: rgba(0, 0, 0, 0.01); }

.popup-store .store-item:hover img { -webkit-transform: scale(0.9); transform: scale(0.9); }

@media only screen and (max-width: 1023px) { .base-second-nav { height: 0.52rem; line-height: 0.5rem; }
  .base-second-nav .product-title { display: block; }
  .base-second-nav .product-list { display: block; position: absolute; top: 0.5rem; left: 0; z-index: 2; width: 120%; margin-left: -10%; background: #ffffff; -webkit-transform: translate3d(-200vw, 0, 0); transform: translate3d(-200vw, 0, 0); overflow: hidden; }
  .base-second-nav .product-list.on { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  .base-second-nav .product-list.on li { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: all 0.3s ease; }
  .base-second-nav .product-list li { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; width: 80%; margin: 0 auto; border-bottom: 0.01rem solid #e5e5e5; text-align: center; -webkit-transform: translate3d(0, -300%, 0); transform: translate3d(0, -300%, 0); }
  .base-second-nav .product-list li::before { display: none; }
  .base-second-nav .product-list li:nth-of-type(-n + 1) { margin-left: auto; }
  .base-second-nav .product-list li:last-of-type { border-bottom: none; }
  .base-second-nav .product-list li a { -ms-flex: 1; flex: 1; }
  .base-second-nav .anchor-list { display: block; position: absolute; top: 0.5rem; left: 0; z-index: 2; width: 120%; margin-left: -10%; background: #ffffff; -webkit-transform: translate3d(-200vw, 0, 0); transform: translate3d(-200vw, 0, 0); overflow: hidden; }
  .base-second-nav .anchor-list.on { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  .base-second-nav .anchor-list.on li { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: all 0.3s ease; }
  .base-second-nav .anchor-list li { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; width: 80%; margin: 0 auto; border-bottom: 0.01rem solid #e5e5e5; text-align: center; -webkit-transform: translate3d(0, -300%, 0); transform: translate3d(0, -300%, 0); }
  .base-second-nav .anchor-list li:last-of-type { border-bottom: none; }
  .base-second-nav .anchor-list li a { -ms-flex: 1; flex: 1; }
  .base-second-nav .nav-arrow { display: block; } }

@media screen and (max-width: 767px) { .base-second-nav .nav-innner { width: 3.2rem; }
  .popup-store .popup-wrapper { width: 3.2rem; height: 6.2rem; }
  .popup-store .store-list { width: 2.8rem; }
  .popup-store .store-item { width: 1.32rem; height: 0.96rem; }
  .popup-store .store-item img { width: 0.98rem; height: 0.66rem; }
  .popup-store .store-item:not(:nth-of-type(2n + 1)) { margin-left: 0.16rem; } }

@media only screen and (min-width: 768px) and (max-width: 1023px) { .base-second-nav .nav-innner { width: 7.2rem; }
  .popup-store .popup-wrapper { width: 7.2rem; height: 8.5rem; }
  .popup-store .store-list { width: 5.32rem; }
  .popup-store .store-item { width: 1.55rem; height: 1.16rem; }
  .popup-store .store-item img { width: 0.95rem; height: 0.64rem; }
  .popup-store .store-item:not(:nth-of-type(3n + 1)) { margin-left: 0.32rem; } }

@media only screen and (min-width: 1024px) and (max-width: 1439px) { .base-second-nav .nav-innner { width: 8.96rem; }
  .popup-store .popup-wrapper { width: 8.96rem; height: 5.8rem; }
  .popup-store .store-list { width: 6.64rem; }
  .popup-store .store-item { width: 2rem; height: 1.5rem; }
  .popup-store .store-item img { width: 1.22rem; height: 0.82rem; }
  .popup-store .store-item:not(:nth-of-type(3n + 1)) { margin-left: 0.32rem; } }

@media only screen and (min-width: 1440px) { .popup-store .store-item:not(:nth-of-type(5n + 1)) { margin-left: 0.32rem; } }

.section1 .kv-intro { -webkit-animation: fadeIn 1s forwards; animation: fadeIn 1s forwards; }

.section1 .kv-subtitle { margin-top: 0.1rem; font-family: "OPPOSans-Bold", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; }

.section1 .kv-highlight li { color: rgba(0, 0, 0, 0.69); }

@media only screen and (max-width: 767px) { .section1 { height: 7rem; }
  .section1 .fs1 { line-height: 0.64rem; font-size: 0.52rem; }
  .section1 .fs2 { line-height: 0.32rem; font-size: 0.2rem; }
  .section1 .fs3 { line-height: 0.24rem; font-size: 0.14rem; }
  .section1 .kv-intro { position: absolute; top: 0.64rem; left: 0; }
  .section1 .kv-highlight { margin-top: 0.32rem; } }

@media only screen and (min-width: 768px) and (max-width: 1023px) { .section1 { min-height: 8.8rem; }
  .section1 .fs1 { line-height: 0.72rem; font-size: 0.6rem; }
  .section1 .fs2 { line-height: 0.32rem; font-size: 0.2rem; }
  .section1 .fs3 { line-height: 0.28rem; font-size: 0.16rem; }
  .section1 .kv-intro { position: absolute; top: 0.96rem; left: 0; }
  .section1 .kv-highlight { margin-top: 0.32rem; } }

@media only screen and (min-width: 1024px) and (max-width: 1439px) { .section1 { min-height: 6rem; }
  .section1 .fs1 { line-height: 0.72rem; font-size: 0.6rem; }
  .section1 .fs2 { line-height: 0.32rem; font-size: 0.2rem; }
  .section1 .fs3 { line-height: 0.28rem; font-size: 0.16rem; }
  .section1 .kv-intro { position: absolute; top: 50%; left: 5.8rem; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); }
  .section1 .kv-highlight { margin-top: 0.32rem; } }

@media only screen and (min-width: 1440px) and (max-width: 1919px) { .section1 { min-height: 6.4rem; }
  .section1 .fs1 { line-height: 0.72rem; font-size: 0.6rem; }
  .section1 .fs2 { line-height: 0.32rem; font-size: 0.2rem; }
  .section1 .fs3 { line-height: 0.28rem; font-size: 0.16rem; }
  .section1 .kv-intro { position: absolute; top: 50%; left: 8.96rem; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); }
  .section1 .kv-highlight { margin-top: 0.32rem; } }

@media only screen and (min-width: 1920px) { .section1 { min-height: 9.2rem; }
  .section1 .fs1 { line-height: 0.8rem; font-size: 0.6rem; }
  .section1 .fs2 { line-height: 0.32rem; font-size: 0.2rem; }
  .section1 .fs3 { line-height: 0.28rem; font-size: 0.16rem; }
  .section1 .kv-intro { position: absolute; top: 50%; left: 9.8rem; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); }
  .section1 .kv-highlight { margin-top: 0.32rem; } }

@-webkit-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

.section2 { background: #F4F4F4; }

.section2 .highlight-list { display: -ms-flexbox; display: flex; }

.section2 .highlight-item { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; text-align: center; }

.section2 .highlight-info { width: 100%; }

@media only screen and (max-width: 767px) { .section2 { padding: 0.96rem 0; }
  .section2 .fs1 { line-height: 0.24rem; font-size: 0.12rem; }
  .section2 .highlight-list { -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .section2 .highlight-item { width: 50%; margin-top: 0.32rem; }
  .section2 .highlight-item:nth-of-type(-n + 2) { margin-top: 0; }
  .section2 .highlight-image { width: 0.5rem; height: 0.5rem; }
  .section2 .highlight-info { margin-top: 0.1rem; } }

@media only screen and (min-width: 768px) and (max-width: 1023px) { .section2 { padding: 0.96rem 0; }
  .section2 .fs1 { line-height: 0.24rem; font-size: 0.14rem; }
  .section2 .highlight-item { width: 25%; }
  .section2 .highlight-image { width: 0.65rem; height: 0.65rem; }
  .section2 .highlight-info { margin-top: 0.2rem; } }

@media only screen and (min-width: 1024px) and (max-width: 1439px) { .section2 { padding: 1.82rem 0; }
  .section2 .fs1 { line-height: 0.24rem; font-size: 0.14rem; }
  .section2 .highlight-item { width: 25%; }
  .section2 .highlight-image { width: 0.65rem; height: 0.65rem; }
  .section2 .highlight-info { margin-top: 0.2rem; } }

@media only screen and (min-width: 1440px) and (max-width: 1919px) { .section2 { padding: 1.82rem 0; }
  .section2 .fs1 { line-height: 0.24rem; font-size: 0.14rem; }
  .section2 .highlight-item { width: 25%; }
  .section2 .highlight-image { width: 0.65rem; height: 0.65rem; }
  .section2 .highlight-info { margin-top: 0.2rem; } }

@media only screen and (min-width: 1920px) { .section2 { padding: 1.82rem 0; }
  .section2 .fs1 { line-height: 0.24rem; font-size: 0.14rem; }
  .section2 .highlight-item { width: 25%; }
  .section2 .highlight-image { width: 0.65rem; height: 0.65rem; }
  .section2 .highlight-info { margin-top: 0.2rem; } }

.section3 { background: #F4F4F4; }

.section3 .section-title { font-family: "OPPOSans-Bold", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; text-align: center; }

.section3 .intro-subtitle { color: rgba(0, 0, 0, 0.6); }

.section3 .intro-description { margin: 0.2rem auto 0; }

.section3 .move-image-item { position: relative; overflow: hidden; }

.section3 .move-image-item::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to bottom, #B9E6DA, #D9F1ED); }

.section3 .move-video-item { position: absolute; bottom: 0; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); overflow: hidden; }

.section3 .move-video-item video, .section3 .move-video-item canvas { display: block; width: 100%; -webkit-transform: translate3d(0, -1.8rem, 0); transform: translate3d(0, -1.8rem, 0); }

.section3 .move-image { position: absolute; bottom: 0; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }

.section3 .image-rate { margin-top: 0.15rem; font-size: 0; text-align: center; }

.section3 .rate-item { display: inline-block; width: 3.4rem; }

@media only screen and (max-width: 767px) { .section3 { padding-bottom: 0.8rem; }
  .section3 .fs1 { line-height: 0.42rem; font-size: 0.28rem; }
  .section3 .fs2 { line-height: 0.28rem; font-size: 0.16rem; }
  .section3 .fs3 { line-height: 0.24rem; font-size: 0.12rem; }
  .section3 .section-title { line-height: 0.56rem; font-size: 0.36rem; text-align: left; margin: 0.96rem 0; }
  .section3 .intro-subtitle { margin-top: 0.04rem; }
  .section3 .intro-description { letter-spacing: -0.004rem; }
  .section3 .move-image-item { height: 2.7rem; margin: 0.64rem -0.2rem 0; }
  .section3 .move-video-item { width: 2.9rem; height: 2.7rem; border-left: 0.1rem solid transparent; border-right: 0.1rem solid transparent; }
  .section3 .move-image { width: 2.9rem; }
  .section3 .rate-item { width: 1.4rem; } }

@media only screen and (min-width: 768px) and (max-width: 1023px) { .section3 { padding-bottom: 0.8rem; text-align: center; }
  .section3 .fs1 { line-height: 0.5rem; font-size: 0.36rem; }
  .section3 .fs2 { line-height: 0.32rem; font-size: 0.16rem; }
  .section3 .fs3 { line-height: 0.28rem; font-size: 0.16rem; }
  .section3 .section-title { line-height: 0.96rem; font-size: 0.54rem; margin: 0.96rem 0; }
  .section3 .move-image-item { height: 3.73rem; margin-top: 0.64rem; }
  .section3 .move-video-item { width: 6.14rem; height: 3.73rem; border-left: 0.2rem solid transparent; border-right: 0.2rem solid transparent; }
  .section3 .move-image { width: 6.14rem; }
  .section3 .rate-item { width: 2.8rem; } }

@media only screen and (min-width: 1024px) and (max-width: 1439px) { .section3 { padding-bottom: 1.28rem; text-align: center; }
  .section3 .fs1 { line-height: 0.5rem; font-size: 0.42rem; }
  .section3 .fs2 { line-height: 0.32rem; font-size: 0.2rem; }
  .section3 .fs3 { line-height: 0.28rem; font-size: 0.16rem; }
  .section3 .section-title { line-height: 0.96rem; font-size: 0.68rem; margin: 1.82rem 0; }
  .section3 .move-image-item { height: 4.64rem; margin-top: 0.8rem; }
  .section3 .move-video-item { width: 7.64rem; height: 4.64rem; border-left: 0.2rem solid transparent; border-right: 0.2rem solid transparent; }
  .section3 .move-image { width: 7.64rem; } }

@media only screen and (min-width: 1440px) and (max-width: 1919px) { .section3 { padding-bottom: 1.28rem; text-align: center; }
  .section3 .fs1 { line-height: 0.5rem; font-size: 0.42rem; }
  .section3 .fs2 { line-height: 0.32rem; font-size: 0.2rem; }
  .section3 .fs3 { line-height: 0.28rem; font-size: 0.16rem; }
  .section3 .section-title { line-height: 0.96rem; font-size: 0.68rem; margin: 1.82rem 0; }
  .section3 .intro-description { width: 10.3rem; }
  .section3 .move-image-item { height: 6.8rem; margin-top: 0.8rem; }
  .section3 .move-video-item { width: 7.84rem; height: 5.84rem; border: 0.2rem solid transparent; border-bottom: none; border-radius: 1.2rem 1.2rem 0 0; }
  .section3 .move-image { width: 7.84rem; } }

@media only screen and (min-width: 1920px) { .section3 { padding-bottom: 1.28rem; text-align: center; }
  .section3 .fs1 { line-height: 0.5rem; font-size: 0.42rem; }
  .section3 .fs2 { line-height: 0.32rem; font-size: 0.2rem; }
  .section3 .fs3 { line-height: 0.28rem; font-size: 0.16rem; }
  .section3 .section-title { line-height: 0.96rem; font-size: 0.68rem; margin: 1.82rem 0; }
  .section3 .intro-description { width: 10.3rem; }
  .section3 .move-image-item { height: 6.8rem; margin-top: 0.8rem; }
  .section3 .move-video-item { width: 7.84rem; height: 5.84rem; border: 0.2rem solid transparent; border-bottom: none; border-radius: 1.2rem 1.2rem 0 0; }
  .section3 .move-image { width: 7.84rem; } }

.section4 { background-color: #E4FFF6; }

.section4 .intro-subtitle { color: rgba(0, 0, 0, 0.6); }

.section4 .color-select { width: 3rem; margin-top: 0.7rem; }

.section4 .color-select li { color: rgba(0, 0, 0, 0.6); cursor: pointer; }

.section4 .color-select li:not(:first-of-type) { border-top: 0.01rem solid rgba(0, 0, 0, 0.15); }

.section4 .color-select li.active { font-family: "OPPOSans-Bold", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; }

.section4 .color-select-image .image { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: all .6s ease-in-out; }

.section4 .color-select-image .image.on { opacity: 1; }

@media only screen and (max-width: 767px) { .section4 .fs1 { line-height: 0.44rem; font-size: 0.28rem; }
  .section4 .fs2 { line-height: 0.44rem; font-size: 0.28rem; }
  .section4 .fs3 { line-height: 0.28rem; font-size: 0.16rem; }
  .section4 .fs4 { line-height: 0.7rem; font-size: 0.16rem; }
  .section4 .inner-content { height: 9.9rem; padding-top: 0.96rem; }
  .section4 .intro-description { margin-top: 0.2rem; letter-spacing: -0.005rem; }
  .section4 .color-select { margin-top: 0.5rem; }
  .section4 .color-select-image { position: absolute; bottom: 0; left: 50%; width: 2.07rem; height: 4rem; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } }

@media only screen and (min-width: 768px) and (max-width: 1023px) { .section4 .fs1 { line-height: 0.5rem; font-size: 0.36rem; }
  .section4 .fs2 { line-height: 0.5rem; font-size: 0.36rem; }
  .section4 .fs3 { line-height: 0.32rem; font-size: 0.16rem; }
  .section4 .fs4 { line-height: 0.7rem; font-size: 0.2rem; }
  .section4 .inner-content { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; height: calc(100vh - 0.6rem); }
  .section4 .intro-item { width: 3.7rem; }
  .section4 .intro-description { margin-top: 0.2rem; }
  .section4 .color-select-image { position: absolute; top: 50%; right: 0.77rem; width: 2.01rem; height: 6.2rem; -webkit-transform: translate3d(0, -3.1rem, 0); transform: translate3d(0, -3.1rem, 0); } }

@media only screen and (min-width: 1024px) and (max-width: 1439px) { .section4 .fs1 { line-height: 0.56rem; font-size: 0.42rem; }
  .section4 .fs2 { line-height: 0.56rem; font-size: 0.42rem; }
  .section4 .fs3 { line-height: 0.32rem; font-size: 0.2rem; }
  .section4 .fs4 { line-height: 0.7rem; font-size: 0.2rem; }
  .section4 .inner-content { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; height: calc(100vh - 0.6rem); }
  .section4 .intro-item { width: 5.5rem; }
  .section4 .intro-subtitle { letter-spacing: -0.014rem; }
  .section4 .intro-description { width: 4.8rem; margin-top: 0.2rem; }
  .section4 .color-select-image { position: absolute; top: 50%; right: 0.7rem; width: 1.92rem; height: 5.94rem; -webkit-transform: translate3d(0, -3rem, 0); transform: translate3d(0, -3rem, 0); } }

@media only screen and (min-width: 1440px) and (max-width: 1919px) { .section4 .fs1 { line-height: 0.56rem; font-size: 0.42rem; }
  .section4 .fs2 { line-height: 0.56rem; font-size: 0.42rem; }
  .section4 .fs3 { line-height: 0.32rem; font-size: 0.2rem; }
  .section4 .fs4 { line-height: 0.7rem; font-size: 0.2rem; }
  .section4 .inner-content { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; height: calc(100vh - 0.6rem); }
  .section4 .intro-item { width: 6rem; }
  .section4 .intro-description { margin-top: 0.2rem; }
  .section4 .color-select-image { position: absolute; top: 50%; right: 1.12rem; width: 4.07rem; height: 6.32rem; -webkit-transform: translate3d(0, -3.2rem, 0); transform: translate3d(0, -3.2rem, 0); } }

@media only screen and (min-width: 1920px) { .section4 .fs1 { line-height: 0.56rem; font-size: 0.42rem; }
  .section4 .fs2 { line-height: 0.56rem; font-size: 0.42rem; }
  .section4 .fs3 { line-height: 0.32rem; font-size: 0.2rem; }
  .section4 .fs4 { line-height: 0.7rem; font-size: 0.2rem; }
  .section4 .inner-content { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; height: calc(100vh - 0.6rem); }
  .section4 .intro-item { width: 6rem; }
  .section4 .intro-description { margin-top: 0.2rem; }
  .section4 .color-select-image { position: absolute; top: 50%; right: 0.35rem; width: 4.47rem; -webkit-transform: translate3d(0, -3.2rem, 0); transform: translate3d(0, -3.2rem, 0); } }

@media only screen and (min-width: 2560px) { .section4 .color-select-image { position: absolute; top: 50%; right: 0.35rem; width: 3.2rem; height: 9.87rem; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } }

.section5 .section-title { font-family: "OPPOSans-Bold", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; text-align: center; }

.section5 .intro-subtitle { color: rgba(0, 0, 0, 0.6); }

.section5 .intro-description { margin-top: 0.2rem; }

.section5 .params-list { display: -ms-flexbox; display: flex; }

.section5 .params-data span { margin: 0 0.04rem; font-family: "OPPOSans-Bold", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; }

.section5 .fingerprint { opacity: 0; transition: all .6s; }

.section5 .fingerprint.active { opacity: 1; }

@media only screen and (max-width: 767px) { .section5 { padding-top: 0.96rem; }
  .section5 .fs1 { line-height: 0.44rem; font-size: 0.28rem; }
  .section5 .fs2 { line-height: 0.28rem; font-size: 0.16rem; }
  .section5 .fs3 { line-height: 0.24rem; font-size: 0.12rem; }
  .section5 .fs4 { line-height: 0.44rem; font-size: 0.28rem; }
  .section5 .fs5 { line-height: 0.24rem; font-size: 0.14rem; }
  .section5 .section-title { line-height: 0.56rem; font-size: 0.36rem; text-align: left; padding: 0 0.2rem; }
  .section5 .inner-content { min-height: 7.66rem; padding-top: 0.8rem; padding-bottom: 3.17rem; }
  .section5 .intro-subtitle { letter-spacing: -0.012rem; }
  .section5 .params-list { margin-top: 0.32rem; }
  .section5 .params-list li:not(:nth-of-type(2n + 1)) { margin-left: 0.8rem; }
  .section5 .intro-image { position: absolute; bottom: 0; right: 0; width: 3.04rem; }
  .section5 .fingerprint { position: absolute; top: 1.05rem; right: 1.33rem; width: 0.22rem; } }

@media only screen and (min-width: 768px) and (max-width: 1023px) { .section5 { padding-top: 0.96rem; }
  .section5 .fs1 { line-height: 0.5rem; font-size: 0.42rem; }
  .section5 .fs2 { line-height: 0.32rem; font-size: 0.16rem; }
  .section5 .fs3 { line-height: 0.24rem; font-size: 0.12rem; }
  .section5 .fs4 { line-height: 0.56rem; font-size: 0.36rem; }
  .section5 .fs5 { line-height: 0.32rem; font-size: 0.2rem; }
  .section5 .section-title { line-height: 0.96rem; font-size: 0.54rem; }
  .section5 .inner-content { height: 10.24rem; padding-top: 0.8rem; }
  .section5 .intro-item { width: 6rem; }
  .section5 .intro-subtitle { font-size: 0.36rem; }
  .section5 .params-list { margin-top: 0.32rem; }
  .section5 .params-list li:not(:nth-of-type(2n + 1)) { margin-left: 1.28rem; }
  .section5 .intro-image { position: absolute; bottom: 0; right: 0; width: 7.28rem; }
  .section5 .fingerprint { position: absolute; top: 2.02rem; right: 4.16rem; width: 0.42rem; } }

@media only screen and (min-width: 1024px) and (max-width: 1439px) { .section5 { padding-top: 1.82rem; }
  .section5 .fs1 { line-height: 0.5rem; font-size: 0.42rem; }
  .section5 .fs2 { line-height: 0.32rem; font-size: 0.2rem; }
  .section5 .fs3 { line-height: 0.24rem; font-size: 0.12rem; }
  .section5 .fs4 { line-height: 0.56rem; font-size: 0.36rem; }
  .section5 .fs5 { line-height: 0.32rem; font-size: 0.2rem; }
  .section5 .section-title { line-height: 0.96rem; font-size: 0.68rem; }
  .section5 .inner-content { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; height: 7.68rem; }
  .section5 .intro-item { width: 5.8rem; }
  .section5 .intro-description { width: 4.2rem; letter-spacing: -0.004rem; }
  .section5 .params-list { margin-top: 0.8rem; }
  .section5 .params-list li:not(:nth-of-type(2n + 1)) { margin-left: 1.28rem; }
  .section5 .intro-image { position: absolute; bottom: 0; right: 0; width: 4.94rem; }
  .section5 .fingerprint { position: absolute; top: 1.88rem; right: 1.9rem; width: 0.39rem; opacity: 0; } }

@media only screen and (min-width: 1440px) and (max-width: 1919px) { .section5 { padding-top: 1.82rem; }
  .section5 .fs1 { line-height: 0.5rem; font-size: 0.42rem; }
  .section5 .fs2 { line-height: 0.32rem; font-size: 0.2rem; }
  .section5 .fs3 { line-height: 0.24rem; font-size: 0.12rem; }
  .section5 .fs4 { line-height: 0.56rem; font-size: 0.36rem; }
  .section5 .fs5 { line-height: 0.32rem; font-size: 0.2rem; }
  .section5 .section-title { line-height: 0.96rem; font-size: 0.68rem; }
  .section5 .inner-content { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; height: 7.6rem; }
  .section5 .intro-item { width: 5.8rem; }
  .section5 .params-list { margin-top: 0.8rem; }
  .section5 .params-list li:not(:nth-of-type(2n + 1)) { margin-left: 1.28rem; }
  .section5 .intro-image { position: absolute; bottom: 0; right: 0; width: 7.13rem; }
  .section5 .fingerprint { position: absolute; top: 2.43rem; right: 3.19rem; width: 0.49rem; } }

@media only screen and (min-width: 1920px) { .section5 { padding-top: 1.82rem; }
  .section5 .fs1 { line-height: 0.5rem; font-size: 0.42rem; }
  .section5 .fs2 { line-height: 0.32rem; font-size: 0.2rem; }
  .section5 .fs3 { line-height: 0.24rem; font-size: 0.12rem; }
  .section5 .fs4 { line-height: 0.56rem; font-size: 0.36rem; }
  .section5 .fs5 { line-height: 0.32rem; font-size: 0.2rem; }
  .section5 .section-title { line-height: 0.96rem; font-size: 0.68rem; }
  .section5 .inner-content { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; height: 9.6rem; }
  .section5 .intro-item { width: 5.8rem; }
  .section5 .params-list { margin-top: 0.8rem; }
  .section5 .params-list li:not(:nth-of-type(2n + 1)) { margin-left: 1.28rem; }
  .section5 .intro-image { position: absolute; bottom: 0; right: 0; width: 9.46rem; }
  .section5 .fingerprint { position: absolute; top: 3.17rem; right: 4.31rem; width: 0.66rem; } }

@media only screen and (min-width: 2560px) { .section5 .inner-content { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; height: calc(100vh - 0.6rem); }
  .section5 .intro-image { bottom: -1.3rem; right: -4rem; width: 15.95rem; }
  .section5 .fingerprint { top: 3.15rem; right: auto; left: 4.48rem; width: 0.7rem; } }

.section6.s1 { padding-top: 0; background: #f4f4f4; }

.section6 .section-title { font-family: "OPPOSans-Bold", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; }

.section6 .intro-item { position: relative; }

.section6 .intro-item + .intro-item { margin-top: 1.28rem; }

.section6 .intro-description { margin-top: 0.2rem; }

.section6 .params-list { display: -ms-flexbox; display: flex; margin-top: 0.32rem; }

.section6 .params-data span { margin: 0 0.04rem; font-family: "OPPOSans-Bold", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; }

@media only screen and (max-width: 767px) { .section6 { padding: 0.8rem 0; }
  .section6 .fs1 { line-height: 0.56rem; font-size: 0.36rem; }
  .section6 .fs2 { line-height: 0.44rem; font-size: 0.28rem; }
  .section6 .fs3 { line-height: 0.28rem; font-size: 0.16rem; }
  .section6 .fs4 { line-height: 0.44rem; font-size: 0.28rem; }
  .section6 .fs5 { line-height: 0.24rem; font-size: 0.14rem; }
  .section6 .fs6 { line-height: 0.24rem; font-size: 0.14rem; }
  .section6 .section-title { margin-bottom: 0.96rem; }
  .section6 .intro-item + .intro-item { margin-top: 0.8rem; }
  .section6 .intro-image { height: 2.4rem; margin-top: 0.64rem; }
  .section6 .intro-title { width: 2.6rem; letter-spacing: -0.01rem; }
  .section6 .intro-description { letter-spacing: -0.008rem; }
  .section6 .params-list li:not(:nth-of-type(2n + 1)) { margin-left: 0.7rem; } }

@media only screen and (min-width: 768px) and (max-width: 1023px) { .section6 { padding: 0.8rem 0; }
  .section6 .fs1 { line-height: 0.96rem; font-size: 0.52rem; }
  .section6 .fs2 { line-height: 0.5rem; font-size: 0.36rem; }
  .section6 .fs3 { line-height: 0.32rem; font-size: 0.16rem; }
  .section6 .fs4 { line-height: 0.5rem; font-size: 0.36rem; }
  .section6 .fs5 { line-height: 0.32rem; font-size: 0.2rem; }
  .section6 .fs6 { line-height: 0.24rem; font-size: 0.14rem; }
  .section6 .section-title { margin-bottom: 0.96rem; text-align: center; }
  .section6 .intro-item + .intro-item { margin-top: 0.8rem; }
  .section6 .intro-image { height: 4.06rem; margin-top: 0.64rem; }
  .section6 .intro-description { width: 5.7rem; }
  .section6 .params-list li:not(:nth-of-type(2n + 1)) { margin-left: 0.8rem; } }

@media only screen and (min-width: 1024px) and (max-width: 1439px) { .section6 { padding: 1.28rem 0; }
  .section6 .fs1 { line-height: 0.96rem; font-size: 0.68rem; }
  .section6 .fs2 { line-height: 0.5rem; font-size: 0.42rem; }
  .section6 .fs3 { line-height: 0.32rem; font-size: 0.2rem; }
  .section6 .fs4 { line-height: 0.5rem; font-size: 0.36rem; }
  .section6 .fs5 { line-height: 0.32rem; font-size: 0.2rem; }
  .section6 .fs6 { line-height: 0.24rem; font-size: 0.14rem; }
  .section6 .section-title { margin-bottom: 1.82rem; text-align: center; }
  .section6 .intro-image { height: 5.07rem; margin-top: 0.8rem; }
  .section6 .intro-description { width: 7.2rem; }
  .section6 .params-list li:not(:nth-of-type(2n + 1)) { margin-left: 0.8rem; } }

@media only screen and (min-width: 1440px) and (max-width: 1919px) { .section6 { padding: 1.28rem 0; }
  .section6 .fs1 { line-height: 0.96rem; font-size: 0.68rem; }
  .section6 .fs2 { line-height: 0.5rem; font-size: 0.42rem; }
  .section6 .fs3 { line-height: 0.32rem; font-size: 0.2rem; }
  .section6 .fs4 { line-height: 0.5rem; font-size: 0.36rem; }
  .section6 .fs5 { line-height: 0.32rem; font-size: 0.2rem; }
  .section6 .fs6 { line-height: 0.24rem; font-size: 0.14rem; }
  .section6 .section-title { margin-bottom: 1.82rem; text-align: center; }
  .section6 .intro-image { height: 7.4rem; margin-top: 0.8rem; }
  .section6 .intro-description { width: 8.8rem; }
  .section6 .params-list li:not(:nth-of-type(2n + 1)) { margin-left: 0.8rem; } }

@media only screen and (min-width: 1920px) { .section6 { padding: 1.28rem 0; }
  .section6 .fs1 { line-height: 0.96rem; font-size: 0.68rem; }
  .section6 .fs2 { line-height: 0.5rem; font-size: 0.42rem; }
  .section6 .fs3 { line-height: 0.32rem; font-size: 0.2rem; }
  .section6 .fs4 { line-height: 0.5rem; font-size: 0.36rem; }
  .section6 .fs5 { line-height: 0.32rem; font-size: 0.2rem; }
  .section6 .fs6 { line-height: 0.24rem; font-size: 0.14rem; }
  .section6 .section-title { margin-bottom: 1.82rem; text-align: center; }
  .section6 .intro-image { height: 7.4rem; margin-top: 0.8rem; }
  .section6 .intro-description { width: 8.8rem; }
  .section6 .params-list li:not(:nth-of-type(2n + 1)) { margin-left: 0.8rem; } }

.section7 .image-bg { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.section7 .intro-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; -webkit-transform: translate3d(0, -0.5rem, 0); transform: translate3d(0, -0.5rem, 0); transition: all .6s ease; }

.section7 .intro-item:nth-of-type(2) { -webkit-transform: translate3d(0, 0.5rem, 0); transform: translate3d(0, 0.5rem, 0); }

.section7 .intro-item.active { opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.section7 .intro-subtitle { color: rgba(0, 0, 0, 0.6); }

.section7 .params-list { display: -ms-flexbox; display: flex; margin-top: 0.32rem; }

.section7 .params-list li + li { margin-left: 0.8rem; }

.section7 .params-data span { margin: 0 0.04rem; font-family: "OPPOSans-Bold", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; }

@media only screen and (max-width: 767px) { .section7 { min-height: 4rem; }
  .section7 .fs1 { line-height: 0.44rem; font-size: 0.28rem; }
  .section7 .fs2 { line-height: 0.44rem; font-size: 0.28rem; }
  .section7 .fs3 { line-height: 0.28rem; font-size: 0.16rem; }
  .section7 .fs4 { line-height: 0.44rem; font-size: 0.28rem; }
  .section7 .fs5 { line-height: 0.24rem; font-size: 0.14rem; }
  .section7 .fs6 { line-height: 0.24rem; font-size: 0.12rem; }
  .section7 .intro-item { padding-top: 0.5rem; }
  .section7 .intro-subtitle { font-size: 0.26rem; letter-spacing: -0.004rem; }
  .section7 .intro-description { width: 3.3rem; margin-top: 0.2rem; letter-spacing: -0.01rem; } }

@media only screen and (min-width: 768px) and (max-width: 1023px) { .section7 { min-height: 10rem; }
  .section7 .fs1 { line-height: 0.5rem; font-size: 0.36rem; }
  .section7 .fs2 { line-height: 0.5rem; font-size: 0.36rem; }
  .section7 .fs3 { line-height: 0.32rem; font-size: 0.16rem; }
  .section7 .fs4 { line-height: 0.5rem; font-size: 0.36rem; }
  .section7 .fs5 { line-height: 0.32rem; font-size: 0.2rem; }
  .section7 .fs6 { line-height: 0.24rem; font-size: 0.14rem; }
  .section7 .intro-item { padding-top: 0.96rem; }
  .section7 .intro-description { width: 5.3rem; margin-top: 0.2rem; } }

@media only screen and (min-width: 1024px) and (max-width: 1439px) { .section7 { min-height: 7.5rem; }
  .section7 .fs1 { line-height: 0.5rem; font-size: 0.42rem; }
  .section7 .fs2 { line-height: 0.5rem; font-size: 0.42rem; }
  .section7 .fs3 { line-height: 0.32rem; font-size: 0.2rem; }
  .section7 .fs4 { line-height: 0.5rem; font-size: 0.36rem; }
  .section7 .fs5 { line-height: 0.32rem; font-size: 0.2rem; }
  .section7 .fs6 { line-height: 0.24rem; font-size: 0.14rem; }
  .section7 .intro-item { padding-top: 1.28rem; }
  .section7 .intro-description { width: 3.95rem; margin-top: 0.2rem; } }

@media only screen and (min-width: 1440px) and (max-width: 1919px) { .section7 { min-height: 6.9rem; }
  .section7 .fs1 { line-height: 0.5rem; font-size: 0.42rem; }
  .section7 .fs2 { line-height: 0.5rem; font-size: 0.42rem; }
  .section7 .fs3 { line-height: 0.32rem; font-size: 0.2rem; }
  .section7 .fs4 { line-height: 0.5rem; font-size: 0.36rem; }
  .section7 .fs5 { line-height: 0.32rem; font-size: 0.2rem; }
  .section7 .fs6 { line-height: 0.24rem; font-size: 0.14rem; }
  .section7 .intro-item { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; }
  .section7 .intro-description { width: 5.8rem; margin-top: 0.2rem; } }

@media only screen and (min-width: 1920px) { .section7 { min-height: 8.6rem; }
  .section7 .fs1 { line-height: 0.5rem; font-size: 0.42rem; }
  .section7 .fs2 { line-height: 0.5rem; font-size: 0.42rem; }
  .section7 .fs3 { line-height: 0.32rem; font-size: 0.2rem; }
  .section7 .fs4 { line-height: 0.5rem; font-size: 0.36rem; }
  .section7 .fs5 { line-height: 0.32rem; font-size: 0.2rem; }
  .section7 .fs6 { line-height: 0.24rem; font-size: 0.14rem; }
  .section7 .intro-item { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; }
  .section7 .intro-description { width: 5.8rem; margin-top: 0.2rem; } }

@media only screen and (min-width: 2560px) { .section7 { min-height: 13.6rem; } }

.section8 .intro-subtitle { color: rgba(0, 0, 0, 0.7); }

@media only screen and (max-width: 767px) { .section8 { padding-bottom: 0.8rem; }
  .section8 .fs1 { line-height: 0.44rem; font-size: 0.28rem; }
  .section8 .fs2 { line-height: 0.32rem; font-size: 0.16rem; }
  .section8 .intro-description { margin-top: 0.2rem; }
  .section8 .intro-icon { width: 0.5rem; margin-top: 0.32rem; }
  .section8 .intro-image { margin-top: 0.64rem; } }

@media only screen and (min-width: 768px) and (max-width: 1023px) { .section8 { padding-bottom: 0.8rem; }
  .section8 .fs1 { line-height: 0.5rem; font-size: 0.36rem; }
  .section8 .fs2 { line-height: 0.32rem; font-size: 0.16rem; }
  .section8 .intro-description { width: 5.6rem; margin-top: 0.2rem; }
  .section8 .intro-icon { width: 0.5rem; margin-top: 0.32rem; }
  .section8 .intro-image { height: 4.9rem; margin-top: 0.64rem; } }

@media only screen and (min-width: 1024px) and (max-width: 1439px) { .section8 { padding-bottom: 1.28rem; }
  .section8 .fs1 { line-height: 0.5rem; font-size: 0.42rem; }
  .section8 .fs2 { line-height: 0.32rem; font-size: 0.2rem; }
  .section8 .intro-description { width: 6.6rem; margin-top: 0.2rem; }
  .section8 .intro-icon { width: 0.5rem; margin-top: 0.32rem; }
  .section8 .intro-image { height: 6.1rem; margin-top: 0.8rem; } }

@media only screen and (min-width: 1440px) and (max-width: 1919px) { .section8 { padding-bottom: 1.28rem; }
  .section8 .fs1 { line-height: 0.5rem; font-size: 0.42rem; }
  .section8 .fs2 { line-height: 0.32rem; font-size: 0.2rem; }
  .section8 .intro-description { width: 8.9rem; margin-top: 0.2rem; }
  .section8 .intro-icon { width: 0.5rem; margin-top: 0.32rem; }
  .section8 .intro-image { height: 7.4rem; margin-top: 0.8rem; } }

@media only screen and (min-width: 1920px) { .section8 { padding-bottom: 1.28rem; }
  .section8 .fs1 { line-height: 0.5rem; font-size: 0.42rem; }
  .section8 .fs2 { line-height: 0.32rem; font-size: 0.2rem; }
  .section8 .intro-description { width: 8.9rem; margin-top: 0.2rem; }
  .section8 .intro-icon { width: 0.5rem; margin-top: 0.32rem; }
  .section8 .intro-image { height: 7.4rem; margin-top: 0.8rem; } }

.section9 { background: #F4F4F4; }

.section9.fixed .lock-item { position: fixed; }

.section9.bottom .lock-item { position: absolute; top: auto; bottom: 0; }

.section9 .lock-item { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; }

.section9 .section-title { font-family: "OPPOSans-Bold", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; }

@media only screen and (max-width: 767px) { .section9 { height: 9.3rem; }
  .section9 .fs1 { line-height: 0.56rem; font-size: 0.36rem; }
  .section9 .fs2 { line-height: 0.44rem; font-size: 0.28rem; }
  .section9 .fs3 { line-height: 0.28rem; font-size: 0.16rem; }
  .section9 .inner-content { padding-top: 0.96rem; }
  .section9 .section-title { margin-bottom: 0.96rem; }
  .section9 .intro-description { margin-top: 0.2rem; letter-spacing: -0.003rem; }
  .section9 .lock-item { position: absolute; top: auto; bottom: 0; left: 50%; width: 2.33rem; height: 3.98rem; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } }

@media only screen and (min-width: 768px) and (max-width: 1023px) { .section9 { height: 135vh; }
  .section9 .fs1 { line-height: 0.96rem; font-size: 0.54rem; }
  .section9 .fs2 { line-height: 0.5rem; font-size: 0.36rem; }
  .section9 .fs3 { line-height: 0.32rem; font-size: 0.16rem; }
  .section9 .inner-content { height: 100%; padding-top: 0.96rem; }
  .section9 .section-title { text-align: center; }
  .section9 .intro-item { position: absolute; bottom: 1.28rem; left: 0; }
  .section9 .intro-title { width: 4rem; }
  .section9 .intro-description { width: 3.8rem; margin-top: 0.2rem; }
  .section9 .intro-image-x { position: absolute; top: 2.88rem; right: 0; width: 100%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 110% 3.5rem; transform-origin: 110% 3.5rem; }
  .section9 .intro-image-y { position: absolute; top: 0; left: 1.18rem; width: 5.32rem; } }

@media only screen and (min-width: 1024px) and (max-width: 1439px) { .section9 { height: 150vh; }
  .section9 .fs1 { line-height: 0.96rem; font-size: 0.68rem; }
  .section9 .fs2 { line-height: 0.5rem; font-size: 0.42rem; }
  .section9 .fs3 { line-height: 0.32rem; font-size: 0.2rem; }
  .section9 .inner-content { height: 100%; padding-top: 1.82rem; }
  .section9 .section-title { text-align: center; }
  .section9 .intro-item { position: absolute; bottom: 1.28rem; left: 0; }
  .section9 .intro-title { width: 4rem; }
  .section9 .intro-description { width: 5.2rem; margin-top: 0.2rem; }
  .section9 .intro-image-x { position: absolute; top: 4rem; right: 0; width: 100%; height: 14rem; -webkit-transform: scale(0.57); transform: scale(0.57); -webkit-transform-origin: 115% -4.5rem; transform-origin: 115% -4.5rem; }
  .section9 .intro-image-y { position: absolute; top: 0; left: 2.17rem; width: 5.9rem; } }

@media only screen and (min-width: 1440px) and (max-width: 1919px) { .section9 { height: 150vh; }
  .section9 .fs1 { line-height: 0.96rem; font-size: 0.68rem; }
  .section9 .fs2 { line-height: 0.5rem; font-size: 0.42rem; }
  .section9 .fs3 { line-height: 0.32rem; font-size: 0.2rem; }
  .section9 .inner-content { height: 100%; padding-top: 1.82rem; }
  .section9 .section-title { text-align: center; }
  .section9 .intro-item { position: absolute; bottom: 1.82rem; left: 0; }
  .section9 .intro-description { width: 6.1rem; margin-top: 0.2rem; }
  .section9 .intro-image-x { position: absolute; top: 4rem; right: 0; width: 100%; height: 15rem; -webkit-transform: scale(0.67); transform: scale(0.67); -webkit-transform-origin: 125% -5rem; transform-origin: 125% -5rem; }
  .section9 .intro-image-y { position: absolute; left: 50%; width: 6.75rem; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } }

@media only screen and (min-width: 1920px) { .section9 { height: 130vh; }
  .section9 .fs1 { line-height: 0.96rem; font-size: 0.68rem; }
  .section9 .fs2 { line-height: 0.5rem; font-size: 0.42rem; }
  .section9 .fs3 { line-height: 0.32rem; font-size: 0.2rem; }
  .section9 .inner-content { height: 100%; padding-top: 1.82rem; }
  .section9 .section-title { text-align: center; }
  .section9 .intro-item { position: absolute; bottom: 1.82rem; left: 0; }
  .section9 .intro-description { width: 6.1rem; margin-top: 0.2rem; }
  .section9 .intro-image-x { position: absolute; top: 4rem; right: 0; width: 100%; height: 15rem; -webkit-transform: scale(0.67); transform: scale(0.67); -webkit-transform-origin: 115% -2rem; transform-origin: 115% -2rem; }
  .section9 .intro-image-y { position: absolute; left: 50%; width: 6.75rem; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } }

@media only screen and (min-width: 2560px) { .section9 { height: 140vh; }
  .section9 .intro-item { bottom: 5rem; }
  .section9 .intro-image-x { -webkit-transform-origin: 100% 1rem; transform-origin: 100% 1rem; } }

.section10 .intro-item { width: 100%; }

.section10 .intro-title { font-family: "OPPOSans-Bold", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; }

@media only screen and (max-width: 767px) { .section10 { padding: 0.8rem 0; }
  .section10 .fs1 { line-height: 0.24rem; font-size: 0.12rem; }
  .section10 .fs2 { line-height: 0.24rem; font-size: 0.12rem; }
  .section10 .intro-item { min-height: 3.2rem; margin-top: 0.32rem; }
  .section10 .intro-item.normal { margin-top: 0; }
  .section10 .intro-image { height: 2.4rem; }
  .section10 .intro-title { margin-top: 0.12rem; }
  .section10 .intro-description { letter-spacing: -0.007rem; } }

@media only screen and (min-width: 768px) and (max-width: 1023px) { .section10 { padding: 0.8rem 0; }
  .section10 .fs1 { line-height: 0.24rem; font-size: 0.12rem; }
  .section10 .fs2 { line-height: 0.24rem; font-size: 0.12rem; }
  .section10 .side-row { display: -ms-flexbox; display: flex; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -ms-flex-pack: justify; justify-content: space-between; }
  .section10 .side-row + .side-row { margin-top: 0.32rem; }
  .section10 .side-left { width: 2.86rem; }
  .section10 .side-right { width: 3.67rem; }
  .section10 .intro-item { min-height: 3.05rem; }
  .section10 .intro-item.large .intro-image { height: 4.05rem; }
  .section10 .intro-item.large .intro-description { width: 5.6rem; letter-spacing: normal; }
  .section10 .intro-item.high .intro-image { height: 4.9rem; }
  .section10 .intro-image { height: 1.88rem; }
  .section10 .intro-title { margin-top: 0.12rem; }
  .section10 .intro-description { letter-spacing: -0.004rem; } }

@media only screen and (min-width: 1024px) and (max-width: 1439px) { .section10 { padding: 1.28rem 0; }
  .section10 .fs1 { line-height: 0.24rem; font-size: 0.12rem; }
  .section10 .fs2 { line-height: 0.24rem; font-size: 0.12rem; }
  .section10 .side-row { display: -ms-flexbox; display: flex; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -ms-flex-pack: justify; justify-content: space-between; }
  .section10 .side-row + .side-row { margin-top: 0.8rem; }
  .section10 .side-left { width: 3.54rem; }
  .section10 .side-right { width: 4.47rem; }
  .section10 .intro-item { min-height: 3.6rem; }
  .section10 .intro-item.large .intro-image { height: 5.05rem; }
  .section10 .intro-item.large .intro-description { width: 7.1rem; letter-spacing: normal; }
  .section10 .intro-item.high .intro-image { height: 5.96rem; }
  .section10 .intro-image { height: 2.35rem; }
  .section10 .intro-title { margin-top: 0.1rem; }
  .section10 .intro-description { letter-spacing: -0.001rem; } }

@media only screen and (min-width: 1440px) and (max-width: 1919px) { .section10 { padding: 1.28rem 0; }
  .section10 .fs1 { line-height: 0.32rem; font-size: 0.2rem; }
  .section10 .fs2 { line-height: 0.32rem; font-size: 0.2rem; }
  .section10 .side-row { display: -ms-flexbox; display: flex; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -ms-flex-pack: justify; justify-content: space-between; }
  .section10 .side-row + .side-row { margin-top: 0.8rem; }
  .section10 .side-left { width: 5.3rem; }
  .section10 .side-right { width: 6.7rem; }
  .section10 .intro-item { min-height: 5.4rem; }
  .section10 .intro-item.large .intro-image { height: 7.4rem; }
  .section10 .intro-item.large .intro-description { width: 11.5rem; }
  .section10 .intro-item.high .intro-image { height: 8.94rem; }
  .section10 .intro-image { height: 3.54rem; }
  .section10 .intro-title { margin-top: 0.2rem; } }

@media only screen and (min-width: 1920px) { .section10 { padding: 1.28rem 0; }
  .section10 .fs1 { line-height: 0.32rem; font-size: 0.2rem; }
  .section10 .fs2 { line-height: 0.32rem; font-size: 0.2rem; }
  .section10 .side-row { display: -ms-flexbox; display: flex; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -ms-flex-pack: justify; justify-content: space-between; }
  .section10 .side-row + .side-row { margin-top: 0.8rem; }
  .section10 .side-left { width: 5.3rem; }
  .section10 .side-right { width: 6.7rem; }
  .section10 .intro-item { min-height: 5.4rem; }
  .section10 .intro-item.large .intro-image { height: 7.4rem; }
  .section10 .intro-item.large .intro-description { width: 11.5rem; }
  .section10 .intro-item.high .intro-image { height: 8.94rem; }
  .section10 .intro-image { height: 3.54rem; }
  .section10 .intro-title { margin-top: 0.2rem; } }

.section11 { background: #EBF0F7; }

.section11 .section-title { font-family: "OPPOSans-Bold", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; }

.section11 .intro-item { position: relative; }

.section11 .intro-title { font-family: "OPPOSans-Bold", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; }

.section11 .link-item { text-align: center; }

.section11 .about-text { font-family: "OPPOSans-Bold", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; }

.section11 .btn-learn-more { display: inline-block; border-bottom: 0.01rem solid #000000; }

@media only screen and (max-width: 767px) { .section11 { padding: 0.96rem 0; }
  .section11 .fs1 { line-height: 0.56rem; font-size: 0.36rem; }
  .section11 .fs2 { line-height: 0.44rem; font-size: 0.28rem; }
  .section11 .fs3 { line-height: 0.28rem; font-size: 0.16rem; }
  .section11 .fs4 { line-height: 0.2rem; font-size: 0.12rem; }
  .section11 .fs5 { line-height: 0.2rem; font-size: 0.12rem; }
  .section11 .fs6 { line-height: 0.32rem; font-size: 0.12rem; }
  .section11 .fs7 { line-height: 0.24rem; font-size: 0.12rem; }
  .section11 .section-title { margin-bottom: 0.96rem; }
  .section11 .description { margin-top: 0.2rem; letter-spacing: -0.009rem; }
  .section11 .side-row { margin-top: 0.8rem; }
  .section11 .side-right { margin-top: 0.32rem; }
  .section11 .intro-image { height: 3.2rem; }
  .section11 .intro-title { margin-top: 0.12rem; }
  .section11 .link-item { margin-top: 0.96rem; } }

@media only screen and (min-width: 768px) and (max-width: 1023px) { .section11 { padding: 0.96rem 0; }
  .section11 .fs1 { line-height: 0.96rem; font-size: 0.52rem; }
  .section11 .fs2 { line-height: 0.5rem; font-size: 0.36rem; }
  .section11 .fs3 { line-height: 0.32rem; font-size: 0.16rem; }
  .section11 .fs4 { line-height: 0.24rem; font-size: 0.12rem; }
  .section11 .fs5 { line-height: 0.2rem; font-size: 0.12rem; }
  .section11 .fs6 { line-height: 0.32rem; font-size: 0.12rem; }
  .section11 .fs7 { line-height: 0.24rem; font-size: 0.12rem; }
  .section11 .section-title { margin-bottom: 0.96rem; text-align: center; }
  .section11 .description { width: 5.2rem; margin-top: 0.2rem; }
  .section11 .side-row { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; margin-top: 0.64rem; }
  .section11 .side-left { width: 2.23rem; }
  .section11 .side-right { width: 4.46rem; }
  .section11 .intro-image { height: 2.99rem; }
  .section11 .intro-title { margin-top: 0.1rem; }
  .section11 .intro-description { letter-spacing: -0.001rem; }
  .section11 .link-item { margin-top: 0.96rem; }
  .section11 .btn-learn-more { margin-top: 0.1rem; } }

@media only screen and (min-width: 1024px) and (max-width: 1439px) { .section11 { padding: 1.82rem 0 1.28rem; }
  .section11 .fs1 { line-height: 0.96rem; font-size: 0.68rem; }
  .section11 .fs2 { line-height: 0.5rem; font-size: 0.42rem; }
  .section11 .fs3 { line-height: 0.32rem; font-size: 0.2rem; }
  .section11 .fs4 { line-height: 0.24rem; font-size: 0.12rem; }
  .section11 .fs5 { line-height: 0.2rem; font-size: 0.12rem; }
  .section11 .fs6 { line-height: 0.32rem; font-size: 0.12rem; }
  .section11 .fs7 { line-height: 0.24rem; font-size: 0.12rem; }
  .section11 .section-title { margin-bottom: 0.8rem; text-align: center; }
  .section11 .description { width: 8rem; margin-top: 0.2rem; }
  .section11 .side-row { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; margin-top: 0.8rem; }
  .section11 .side-left { width: 2.78rem; }
  .section11 .side-right { width: 5.55rem; }
  .section11 .intro-image { height: 3.72rem; }
  .section11 .intro-title { margin-top: 0.16rem; }
  .section11 .intro-description { letter-spacing: -0.001rem; }
  .section11 .link-item { margin-top: 1.28rem; }
  .section11 .btn-learn-more { margin-top: 0.1rem; } }

@media only screen and (min-width: 1440px) and (max-width: 1919px) { .section11 { padding: 1.82rem 0; }
  .section11 .fs1 { line-height: 0.96rem; font-size: 0.68rem; }
  .section11 .fs2 { line-height: 0.5rem; font-size: 0.42rem; }
  .section11 .fs3 { line-height: 0.32rem; font-size: 0.2rem; }
  .section11 .fs4 { line-height: 0.32rem; font-size: 0.2rem; }
  .section11 .fs5 { line-height: 0.32rem; font-size: 0.2rem; }
  .section11 .fs6 { line-height: 0.32rem; font-size: 0.2rem; }
  .section11 .fs7 { line-height: 0.32rem; font-size: 0.2rem; }
  .section11 .section-title { margin-bottom: 0.8rem; text-align: center; }
  .section11 .description { width: 11rem; margin-top: 0.2rem; }
  .section11 .side-row { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; margin-top: 0.8rem; }
  .section11 .side-left { width: 4rem; }
  .section11 .side-right { width: 8rem; }
  .section11 .intro-image { height: 5.33rem; }
  .section11 .intro-title { margin-top: 0.15rem; }
  .section11 .intro-description { letter-spacing: -0.005rem; }
  .section11 .link-item { margin-top: 1.82rem; }
  .section11 .btn-learn-more { margin-top: 0.32rem; } }

@media only screen and (min-width: 1920px) { .section11 { padding: 1.82rem 0; }
  .section11 .fs1 { line-height: 0.96rem; font-size: 0.68rem; }
  .section11 .fs2 { line-height: 0.5rem; font-size: 0.42rem; }
  .section11 .fs3 { line-height: 0.32rem; font-size: 0.2rem; }
  .section11 .fs4 { line-height: 0.32rem; font-size: 0.2rem; }
  .section11 .fs5 { line-height: 0.32rem; font-size: 0.2rem; }
  .section11 .fs6 { line-height: 0.32rem; font-size: 0.2rem; }
  .section11 .fs7 { line-height: 0.32rem; font-size: 0.2rem; }
  .section11 .section-title { margin-bottom: 0.8rem; text-align: center; }
  .section11 .description { width: 11rem; margin-top: 0.2rem; }
  .section11 .side-row { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; margin-top: 0.8rem; }
  .section11 .side-left { width: 4rem; }
  .section11 .side-right { width: 8rem; }
  .section11 .intro-image { height: 5.33rem; }
  .section11 .intro-title { margin-top: 0.15rem; }
  .section11 .intro-description { letter-spacing: -0.005rem; }
  .section11 .link-item { margin-top: 1.82rem; }
  .section11 .btn-learn-more { margin-top: 0.32rem; } }

.section12 { line-height: 0.2rem; padding: 1.28rem 0; font-size: 0.12rem; color: rgba(0, 0, 0, 0.5); }

.section12 .remarks-list li { position: relative; padding-left: 0.15rem; }

.section12 .remarks-list li span { position: absolute; top: 0; left: 0; }

@media only screen and (max-width: 767px) { .section12 { padding: 0.96rem 0; color: rgba(0, 0, 0, 0.7); } }

@media only screen and (min-width: 768px) and (max-width: 1023px) { .section12 { padding-top: 0.96rem; padding-bottom: 0.96rem; }
  .section12 .remarks-list li { letter-spacing: -0.004rem; } }

@media only screen and (min-width: 1024px) and (max-width: 1439px) { .section12 .remarks-list li { letter-spacing: -0.005rem; } }

@media (min-width: 1023.99px) { .clean-theme #oc-container { padding-top: 0.93rem; } }

@media (max-width: 1023.98px) { .clean-theme #oc-container { margin-top: 0; } }

.lazyload { opacity: 1; }

@media screen and (min-width: 1440px) { .section-9 .sec-cont { padding: 1.82rem 0; }
  .sec-9-title { font: 0.42rem/0.64rem "OPPOSans-Regular", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; letter-spacing: -0.002rem; text-align: center; margin-bottom: 0.32rem; }
  .media-list { width: 13.12rem; margin: 0 auto; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; }
  .media-item { width: 3.03rem; }
  .media-item a { display: block; }
  .media-item .logo-bg { background: #f0f0f0; width: 3.04rem; height: 2.27rem; position: relative; transition: background 0.6s ease; }
  .media-item .logo-limit { max-width: 1.8rem; width: auto; max-height: 0.8rem; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; transition: -webkit-transform 0.6s ease; transition: transform 0.6s ease; transition: transform 0.6s ease, -webkit-transform 0.6s ease; }
  .media-item:hover .logo-bg { background: #fafafa; }
  .media-item:hover .logo-limit { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: scale(0.92); transform: scale(0.92); }
  .media-item p { padding-top: 0.12rem; font: 0.16rem/0.24rem "OPPOSans-Regular", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; }
  .section-9 .btn-box { display: none; }
  .self-swiper .sec-9-swiper { width: 13.12rem; margin: 0 auto; z-index: 0; margin-bottom: 0.32rem; }
  .self-swiper .sec-9-swiper + .swiper-pagination-sec9 { height: 0.08rem; text-align: center; }
  .self-swiper .sec-9-swiper + .swiper-pagination-sec9 .swiper-pagination-bullet { opacity: 1; width: 0.08rem; height: 0.08rem; margin: 0 0.04rem; vertical-align: top; background: rgba(51, 51, 51, 0.5); }
  .self-swiper .sec-9-swiper + .swiper-pagination-sec9 .swiper-pagination-bullet-active { background: #333333; } }

@media screen and (max-width: 1439px) and (min-width: 1024px) { .section-9 .sec-cont { padding: 1.82rem 0; }
  .sec-9-title { font: 0.42rem/0.64rem "OPPOSans-Regular", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; letter-spacing: -0.002rem; text-align: center; margin-bottom: 0.32rem; }
  .media-list { width: 8.96rem; margin: 0 auto; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; }
  .media-item { width: 2rem; }
  .media-item a { display: block; }
  .media-item .logo-bg { background: #f0f0f0; width: 2rem; height: 1.49rem; position: relative; transition: background 0.6s ease; }
  .media-item .logo-limit { max-width: 1.18rem; width: auto; max-height: 0.53rem; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; transition: -webkit-transform 0.6s ease; transition: transform 0.6s ease; transition: transform 0.6s ease, -webkit-transform 0.6s ease; }
  .media-item:hover .logo-bg { background: #fafafa; }
  .media-item:hover .logo-limit { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: scale(0.92); transform: scale(0.92); }
  .media-item p { padding-top: 0.12rem; font: 0.12rem/0.24rem "OPPOSans-Regular", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; letter-spacing: -0.0005rem; }
  .section-9 .btn-box { display: none; }
  .self-swiper .sec-9-swiper { width: 8.96rem; margin: 0 auto; z-index: 0; margin-bottom: 0.32rem; }
  .self-swiper .sec-9-swiper + .swiper-pagination-sec9 { height: 0.05rem; text-align: center; }
  .self-swiper .sec-9-swiper + .swiper-pagination-sec9 .swiper-pagination-bullet { opacity: 1; width: 0.05rem; height: 0.05rem; margin: 0 0.0566rem; vertical-align: top; background: rgba(51, 51, 51, 0.5); }
  .self-swiper .sec-9-swiper + .swiper-pagination-sec9 .swiper-pagination-bullet-active { background: #333333; } }

@media screen and (max-width: 1023px) and (min-width: 768px) { .section-9 .sec-cont { padding: 0.96rem 0; }
  .sec-9-title { font: 0.36rem/0.32rem "OPPOSans-Regular", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; letter-spacing: -0.002rem; text-align: center; margin-bottom: 0.32rem; }
  .media-list { width: 7.2rem; margin: 0 auto; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; }
  .media-item { width: 1.56rem; }
  .media-item a { display: block; }
  .media-item .logo-bg { background: #f0f0f0; width: 1.56rem; height: 1.16rem; position: relative; }
  .media-item .logo-limit { max-width: 0.92rem; width: auto; max-height: 0.41rem; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
  .media-item p { padding-top: 0.12rem; font: 0.12rem/0.24rem "OPPOSans-Regular", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; letter-spacing: -0.0005rem; }
  .section-9 .btn-box { height: 0.55rem; text-align: center; padding-bottom: 0.8rem; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; box-sizing: content-box; }
  .section-9 .btn-box a { width: 0.55rem; height: 0.46rem; margin: 0 0.1rem; box-sizing: border-box; border: 0.02rem solid #000000; border-radius: 100%; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAUCAYAAAAUccS4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIzMUMwNzA2RDdCRTExRUE4MkE5RTkxODlCMUE5QzczIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIzMUMwNzA3RDdCRTExRUE4MkE5RTkxODlCMUE5QzczIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjMxQzA3MDREN0JFMTFFQTgyQTlFOTE4OUIxQTlDNzMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjMxQzA3MDVEN0JFMTFFQTgyQTlFOTE4OUIxQTlDNzMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6I7q7VAAAAqklEQVR42mJgGDgQDsS/oTiFYZCDF0D8HwknDWbHPkdz7L/B7OBYNMcOegenQh2I7uDowerguFEHD5CDQ2AKGIGYD4gnAHEwlA0ClwbIwQJALIcm9g9aJq8BcTZiyZWDDf8BhTATkDBiGPyAEcbwGwIhG4LsYm4gVh7g0PMF4mbkUIQ6FFR5LB0tuoazQ4dMdRszlBoyL4ZSi+v5UHEoCEQgdWuSidEAEGAAuzWlWPWD2kgAAAAASUVORK5CYII=) no-repeat 50% 50%/0.215rem 0.1rem; transition: opacity 0.3s ease, height 0.3s ease; -webkit-tap-highlight-color: transparent; outline: none; }
  .section-9 .btn-box a:hover { height: 0.55rem; }
  .section-9 .btn-box a.btn-prev { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
  .section-9 .btn-box a.swiper-button-disabled { opacity: 0.3; }
  .section-9 .btn-box a.swiper-button-disabled:hover { height: 0.46rem; }
  .self-swiper .sec-9-swiper { width: 7.2rem; margin: 0 auto; z-index: 0; margin-bottom: 0.32rem; }
  .self-swiper .sec-9-swiper + .swiper-pagination-sec9 { height: 0.08rem; text-align: center; }
  .self-swiper .sec-9-swiper + .swiper-pagination-sec9 .swiper-pagination-bullet { opacity: 1; width: 0.08rem; height: 0.08rem; margin: 0 0.07rem; vertical-align: top; background: rgba(51, 51, 51, 0.5); }
  .self-swiper .sec-9-swiper + .swiper-pagination-sec9 .swiper-pagination-bullet-active { background: #333333; } }

@media screen and (max-width: 767px) { .section-9 .sec-cont { padding: 0.96rem 0; }
  .sec-9-title { font: 0.36rem/0.56rem "OPPOSans-Regular", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; letter-spacing: -0.002rem; text-align: center; margin-bottom: 0.28rem; }
  .media-list { width: 3.2rem; margin: 0 auto; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; justify-content: center; -ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; }
  .media-item a { display: block; }
  .media-item .logo-bg { background: #f0f0f0; width: 1.52rem; height: 1.14rem; position: relative; }
  .media-item .logo-limit { max-width: 0.9rem; width: auto; max-height: 0.4rem; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
  .media-item { width: 1.51rem; margin-bottom: 0.24rem; }
  .media-item:nth-child(2n-1) { margin-right: 0.09rem; }
  .media-item:nth-child(2n) { margin-left: 0.09rem; }
  .media-item:nth-last-child(1), .media-item:nth-last-child(2) { margin-bottom: 0; }
  .media-item p { padding-top: 0.12rem; font: 0.12rem/0.24rem "OPPOSans-Regular", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; letter-spacing: -0.0005rem; }
  .section-9 .btn-box { height: 0.55rem; text-align: center; padding-bottom: 0.32rem; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; }
  .section-9 .btn-box a { width: 0.55rem; height: 0.46rem; margin: 0 0.1rem; box-sizing: border-box; border: 0.02rem solid #000000; border-radius: 100%; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAUCAYAAAAUccS4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIzMUMwNzA2RDdCRTExRUE4MkE5RTkxODlCMUE5QzczIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIzMUMwNzA3RDdCRTExRUE4MkE5RTkxODlCMUE5QzczIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjMxQzA3MDREN0JFMTFFQTgyQTlFOTE4OUIxQTlDNzMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjMxQzA3MDVEN0JFMTFFQTgyQTlFOTE4OUIxQTlDNzMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6I7q7VAAAAqklEQVR42mJgGDgQDsS/oTiFYZCDF0D8HwknDWbHPkdz7L/B7OBYNMcOegenQh2I7uDowerguFEHD5CDQ2AKGIGYD4gnAHEwlA0ClwbIwQJALIcm9g9aJq8BcTZiyZWDDf8BhTATkDBiGPyAEcbwGwIhG4LsYm4gVh7g0PMF4mbkUIQ6FFR5LB0tuoazQ4dMdRszlBoyL4ZSi+v5UHEoCEQgdWuSidEAEGAAuzWlWPWD2kgAAAAASUVORK5CYII=) no-repeat 50% 50%/0.215rem 0.1rem; transition: opacity 0.3s ease, height 0.3s ease; -webkit-tap-highlight-color: transparent; outline: none; }
  .section-9 .btn-box a:hover { height: 0.55rem; }
  .section-9 .btn-box a.btn-prev { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
  .section-9 .btn-box a.swiper-button-disabled { opacity: 0.3; }
  .section-9 .btn-box a.swiper-button-disabled:hover { height: 0.46rem; }
  .self-swiper .sec-9-swiper { width: 3.2rem; margin: 0 auto; z-index: 0; margin-bottom: 0.32rem; }
  .self-swiper .sec-9-swiper + .swiper-pagination-sec9 { height: 0.04rem; text-align: center; }
  .self-swiper .sec-9-swiper + .swiper-pagination-sec9 .swiper-pagination-bullet { opacity: 1; width: 0.04rem; height: 0.04rem; margin: 0 0.03rem; vertical-align: top; background: rgba(51, 51, 51, 0.5); }
  .self-swiper .sec-9-swiper + .swiper-pagination-sec9 .swiper-pagination-bullet-active { background: #333333; } }