@font-face {
  font-family: OPPOSans;
  font-weight: 500;
  font-weight: bold;
  src: url("//assorted.downloads.oppo.com/static/assets/fonts/OPPOSans/OPPOSans-Bold.ttf") format("truetype"); }

@font-face {
  font-family: OPPOSans;
  font-weight: 300;
  src: url("//assorted.downloads.oppo.com/static/assets/fonts/OPPOSans/OPPOSans-Medium.ttf") format("truetype"); }

@font-face {
  font-family: OPPOFont-Bold;
  font-weight: 500;
  font-weight: bold;
  src: url("//assorted.downloads.oppo.com/static/assets/fonts/OPPOSans/OPPOSans-Bold.ttf") format("truetype"); }

@font-face {
  font-family: OPPOFont-Medium;
  font-weight: 300;
  src: url("//assorted.downloads.oppo.com/static/assets/fonts/OPPOSans/OPPOSans-Medium.ttf") format("truetype"); }

br {
  opacity: 0; }

.cl:after {
  content: "";
  display: block;
  height: 0;
  clear: both; }

.cl {
  *zoom: 1; }

#use_cookies .btns a, #use_cookies p {
  display: inline-block;
  vertical-align: top; }

@-webkit-keyframes fadeInUp {
  0% {
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px);
    opacity: 0; }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1; } }

@-webkit-keyframes fadeInDown {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0; }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1; } }

.introduce .title-gradient sup {
  background-image: -webkit-linear-gradient(to left, #2dc9ff 0%, #9793ff 67%, #2dc9ff 100%);
  background-image: -webkit-linear-gradient(right, #2dc9ff 0%, #9793ff 67%, #2dc9ff 100%);
  background-image: linear-gradient(to left, #2dc9ff 0%, #9793ff 67%, #2dc9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #60a7ff; }

sup {
  font-size: 60%; }

@media screen and (min-width: 320px) and (max-width: 1080px) {
  .title sup {
    position: relative;
    top: -1.35em;
    font-size: 36%; }
  .title sup {
    position: relative;
    top: -1.23em;
    font-size: 39%; }
  .pc-show {
    display: none !important; }
  .h5-show {
    display: block !important; }
  .wrapper {
    position: relative;
    width: 82vw;
    height: 100%;
    margin: 0 auto; }
  .section {
    width: 100%;
    overflow: hidden; }
  .transition-time {
    transition: all 2s;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s; }
  .introduce {
    position: relative;
    z-index: 2; }
  .introduce .title {
    color: #fff;
    font-size: 5.92593vw;
    line-height: 8.4vw;
    font-family: OPPOFont-Bold;
    font-weight: bold;
    margin-bottom: 5vw; }
  .introduce .description {
    color: #fff;
    font-size: 4.07407vw;
    line-height: 6.4vw;
    font-family: OPPOFont-Medium; }
  .introduce-params {
    position: relative;
    z-index: 2; }
  .introduce .title-gradient {
    margin-bottom: 0;
    padding-bottom: 5vw;
    background: -webkit-linear-gradient(right, #2dc9ff 0%, #9793ff 67%, #2dc9ff 100%);
    background: linear-gradient(to left, #2dc9ff 0%, #9793ff 67%, #2dc9ff 100%);
    background: -webkit-linear-gradient(to left, #94e5ff 0%, #ccc9ff 67%, #97f4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #60a7ff; }
  .section-1 {
    height: 170vw;
    background: #d1e9d9; }
  .section-1 .wrapper {
    width: 100%; }
  .section-1 .phone-show {
    width: 100vw;
    height: 170vw;
    position: absolute;
    left: 0;
    top: 0; }
  .section-1 .phone-show img {
    display: block;
    width: 100%;
    height: 100%;
    background-size: 100%; }
  .section-2 {
    height: auto;
    background: #0e1015; }
  .section-2 .introduce {
    padding-top: 16vw;
    padding-bottom: 108vw; }
  .section-2 .introduce .subtitle {
    color: #d7d7d7;
    font-size: 2.5vw;
    line-height: 4vw;
    font-family: OPPOFont-Bold;
    margin-bottom: 1.3vw; }
  .section-2 .title {
    background: -webkit-linear-gradient(right, #2dc9ff 0%, #9793ff 52%, #2dc9ff 100%);
    background: linear-gradient(to left, #2dc9ff 0%, #9793ff 52%, #2dc9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .section-2 .description {
    color: #d7d7d7; }
  .section-2 .com-last {
    display: block !important; }
  .section-2 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    bottom: 0;
    width: 100vw;
    height: 179.62963vw; }
  .section-3 {
    background: #fff;
    padding-bottom: 16vw; }
  .section-3 .introduce {
    padding-top: 11vw;
    margin-bottom: 6.2vw; }
  .section-3 .phone-show {
    position: relative;
    width: 83vw;
    height: 115vw;
    margin: 0 auto; }
  .section-3 .title {
    color: #000; }
  .section-3 .description {
    color: #000; }
  .section-3 .phone-show span {
    z-index: 2;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    display: inline-block;
    padding: 0vw 2vw;
    border-radius: 10vw;
    font-size: 2.9vw;
    background: rgba(255, 255, 255, 0.7);
    font-family: OPPOFont-Medium; }
  .section-3 .phone-show span:first-child {
    top: 46vw; }
  .section-3 .phone-show .last {
    top: 104vw; }
  .section-4 {
    background: #fff; }
  .section-4 .introduce {
    padding-top: 16vw;
    margin-bottom: 6.2vw; }
  .section-4 .title {
    background: -webkit-linear-gradient(right, #2dc9ff 0%, #9793ff 60%, #2dc9ff 100%);
    background: linear-gradient(to left, #2dc9ff 0%, #9793ff 60%, #2dc9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .section-4 .phone-show {
    position: relative;
    width: 83vw;
    height: 115vw;
    margin: 0 auto; }
  .section-4 .description {
    color: #000; }
  .section-4 .phone-show span {
    z-index: 2;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    display: inline-block;
    padding: 0vw 2vw;
    border-radius: 10vw;
    font-size: 2.9vw;
    background: rgba(255, 255, 255, 0.7);
    font-family: OPPOFont-Medium; }
  .section-4 .phone-show span:first-child {
    top: 46vw; }
  .section-4 .phone-show .last {
    top: 104vw; }
  .section-4 .btn-play {
    z-index: 3;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 11.8vw;
    height: 11.8vw;
    background: url(../images/2560/btn-play-4d7655b5a3daaf81d8b296291f375df5.png) no-repeat;
    background-size: 100% 100%; }
  .section-4 video {
    display: none; }
  .section-5 {
    background: #e5f4ff;
    padding-bottom: 2vw; }
  .section-5 .wrapper {
    width: 100vw; }
  .section-5 .cl {
    margin-bottom: 15vw; }
  .section-5 .title {
    color: #000;
    margin-bottom: 0; }
  .section-5 .description {
    color: #000; }
  .section-5 .introduce1 {
    width: 84vw;
    padding-top: 16vw;
    margin: 0 auto 6vw; }
  .section-5 .introduce1 .title {
    margin-bottom: 5vw; }
  .section-5 .phone-show1 {
    display: block;
    width: 100vw;
    height: 64.62963vw;
    margin: 0 auto 1vw; }
  .section-5 .phone-show2 {
    position: relative;
    display: block;
    width: 100vw;
    height: 64.62963vw;
    margin: 0 auto 15vw; }
  .section-5 .com-introduce .title {
    font-size: 4vw;
    line-height: 6.1vw; }
  .section-5 .com-introduce .description {
    font-size: 2.5vw;
    line-height: 4vw;
    padding-top: 2vw; }
  .section-5 .introduce3 {
    float: left;
    width: 36vw;
    height: 57vw;
    margin-left: 8vw;
    display: table; }
  .section-5 .introduce4 {
    float: right;
    width: 36vw;
    height: 57vw;
    margin-right: 8vw;
    display: table; }
  .section-5 .table-cell {
    display: table-cell;
    vertical-align: middle; }
  .section-5 .phone-show3 {
    float: right;
    display: block;
    width: 44.2vw;
    height: 57vw; }
  .section-5 .phone-show4 {
    float: left;
    width: 44.2vw;
    height: 57vw; }
  .section-14 {
    height: auto;
    background: #000; }
  .section-14 .introduce {
    padding-top: 16vw;
    padding-bottom: 59vw; }
  .section-14 .title {
    width: 71vw;
    background: -webkit-linear-gradient(right, #2dc9ff 0%, #9793ff 5%, #2dc9ff 100%);
    background: linear-gradient(to left, #2dc9ff 0%, #9793ff 5%, #2dc9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .section-14 .description {
    color: #d7d7d7; }
  .section-14 .phone-show {
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    bottom: 0;
    width: 100vw;
    height: 131.48148vw; }
  .section-14 .phone-show img {
    width: 100vw;
    height: 131.48148vw; }
  .section-6 {
    height: 144.81481vw;
    background: #fff;
    position: relative; }
  .section-6 .introduce {
    padding-top: 16vw; }
  .section-6 .title {
    color: #0c0d11; }
  .section-6 .description {
    color: #0c0d11; }
  .section-6 .phone-show6 {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: 0;
    width: 100vw;
    height: 144.81481vw; }
  .section-6 .phone-show6 img {
    width: 100vw;
    height: 144.81481vw; }
  .section-7 {
    height: auto;
    background: #fff;
    position: relative; }
  .section-7 .introduce {
    padding-top: 16vw;
    padding-bottom: 112vw; }
  .section-7 .phone-show7 {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    bottom: 0;
    width: 100vw;
    height: 163.33333vw; }
  .section-7 .phone-show7 img {
    width: 100vw;
    height: 163.33333vw; }
  .section-7 .title {
    color: #000; }
  .section-7 .description {
    color: #000; }
  .section-8 {
    height: auto;
    background: #000; }
  .section-8 .title {
    background: -webkit-linear-gradient(right, #2dc9ff 0%, #9793ff 10%, #2dc9ff 100%);
    background: linear-gradient(to left, #2dc9ff 0%, #9793ff 10%, #2dc9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .section-8 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    bottom: 0;
    width: 100vw;
    height: 159.44444vw; }
  .section-8 .introduce {
    padding-top: 16vw;
    padding-bottom: 88vw; }
  .section-9 {
    height: auto;
    background: #a26419; }
  .section-9 .introduce {
    padding-top: 16vw;
    padding-bottom: 79vw; }
  .section-9 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    bottom: 0;
    width: 100vw;
    height: 154.90741vw; }
  .section-9 .introduce-params {
    width: 100vw; }
  .section-9 .introduce-params > div {
    display: inline-block;
    vertical-align: top;
    width: 45vw; }
  .section-9 .introduce-params > div:first-child {
    width: 45vw; }
  .section-9 .introduce-params span {
    display: block;
    width: 100%; }
  .section-9 .param-data {
    font-size: 4vw;
    line-height: 6.1vw;
    color: #fff;
    font-family: OPPOFont-Bold; }
  .section-9 .param-desc {
    font-size: 2.5vw;
    line-height: 4vw;
    color: #fff;
    font-family: OPPOFont-Medium; }
  .section-10 {
    height: auto;
    background: #070709; }
  .section-10 .introduce {
    padding-bottom: 87vw; }
  .section-10 .description {
    color: #d7d7d7; }
  .section-10 .introduce2 {
    width: 82vw;
    margin: 0 auto 6vw;
    padding-top: 16vw;
    padding-bottom: 0; }
  .section-10 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    bottom: 0;
    width: 100vw;
    height: 196.2963vw; }
  .section-10 .introduce-params2 {
    position: relative;
    z-index: 2;
    width: 90vw; }
  .section-10 .introduce-params2 > div {
    display: inline-block;
    vertical-align: top;
    margin: 0 1vw 2.7vw;
    text-align: center; }
  .section-10 .introduce-params2 .params-item span:first-child {
    width: 7.77778vw;
    height: 4.35185vw;
    display: block;
    margin: 0 auto 2vw; }
  .section-10 .introduce-params2 .params-item span:last-child {
    display: inline-block;
    text-align: center;
    width: 100%;
    font-size: 2.5vw;
    color: #d7d7d7;
    font-family: OPPOFont-Medium;
    line-height: 4vw;
    text-align: center;
    vertical-align: top; }
  .section-10 .introduce-params2 .params-item1 span:first-child {
    background: url(../images/2560/icon-param1-4d6f05d50ecea4da03b9f09ef867dda0.png) no-repeat;
    background-size: 100%; }
  .section-10 .introduce-params2 .params-item2 span:first-child {
    background: url(../images/2560/icon-param2-3af81efb2a9733062f9bdb5456d38fff.png) no-repeat;
    background-size: 100%; }
  .section-10 .introduce-params2 .params-item3 span:first-child {
    background: url(../images/2560/icon-param3-87b6d84549f439a7692cbdb357b6b48a.png) no-repeat;
    background-size: 100%; }
  .section-10 .introduce-params2 .params-item4 span:first-child {
    background: url(../images/2560/icon-param4-e875cb26a87282454ee37213d8c81fe8.png) no-repeat;
    background-size: 100%; }
  .section-10 .tip {
    display: none;
    position: absolute;
    left: 0;
    bottom: 20px;
    z-index: 2;
    width: 100%;
    text-align: center;
    font-size: 2.7vw;
    color: #b7b7b7;
    font-family: OPPOFont-Medium;
    line-height: 5vw; }
  .section-10 .introduce-params2 .params-item4 {
    margin-right: 0; }
  .section-11 {
    height: auto;
    background: #07060c; }
  .section-11 .wrapper {
    padding-bottom: 31vw; }
  .section-11 .title {
    background: -webkit-linear-gradient(right, #2dc9ff 0%, #9793ff 31%, #2dc9ff 100%);
    background: linear-gradient(to left, #2dc9ff 0%, #9793ff 31%, #2dc9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .section-11 .description {
    color: #d7d7d7; }
  .section-11 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    bottom: 0;
    width: 100vw;
    height: 198.98148vw; }
  .section-11 .introduce1 {
    padding-top: 15.5vw;
    margin-bottom: 78vw; }
  .section-11 .introduce-params span {
    display: block;
    width: 100%; }
  .section-11 .introduce-params .param-data {
    font-size: 4.07407vw;
    font-family: OPPOFont-Bold;
    font-weight: bold;
    line-height: 7.4vw;
    margin-bottom: 2vw;
    background: -webkit-linear-gradient(left, #2dc9ff 0%, #9793ff 35%);
    background: linear-gradient(to right, #2dc9ff 0%, #9793ff 35%);
    background: -webkit-linear-gradient(to right, #94e5ff 0%, #ccc9ff 35%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #60a7ff; }
  .section-11 .introduce-params .param-desc {
    font-size: 2.5vw;
    line-height: 6.4vw;
    color: #d7d7d7;
    font-family: OPPOFont-Medium; }
  .section-12 {
    height: auto;
    background: #5ba4c5; }
  .section-12 .wrapper {
    padding-bottom: 66vw; }
  .section-12 .introduce {
    padding-top: 16vw;
    margin-bottom: 5vw; }
  .section-12 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    bottom: 0;
    width: 100vw;
    height: 146.57407vw; }
  .section-12 .introduce-params {
    width: 60vw; }
  .section-12 .phone-show img {
    display: block;
    width: 100vw;
    height: 146.57407vw; }
  .section-12 .introduce-params {
    width: 80vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
  .section-12 .introduce-params > div {
    margin-bottom: 2vw; }
  .section-12 .introduce-params .params-item3 {
    margin-right: 0; }
  .section-12 .introduce-params span {
    display: block;
    width: 100%; }
  .section-12 .introduce-params .param-data {
    font-size: 4vw;
    color: #fff;
    font-family: OPPOFont-Bold;
    line-height: 6.1vw; }
  .section-12 .introduce-params .param-desc {
    font-size: 2.5vw;
    color: #fff;
    font-family: OPPOFont-Medium;
    line-height: 5vw; }
  .section-13 {
    height: 170.92593vw;
    background: #32394b; }
  .section-13 .pc-show {
    display: block !important; }
  .section-13 .introduce {
    padding-top: 16vw; }
  .section-13 .title {
    width: 100%;
    background: -webkit-linear-gradient(right, #2dc9ff 0%, #9793ff 85%, #2dc9ff 100%);
    background: linear-gradient(to left, #2dc9ff 0%, #9793ff 85%, #2dc9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .section-13 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: 0;
    width: 100vw;
    height: 170.92593vw; } }

@media screen and (min-width: 1081px) {
  .title sup {
    position: relative;
    top: -1.35em;
    font-size: 36%; }
  .pc-show {
    display: block !important; }
  .h5-show {
    display: none !important; }
  .wrapper {
    position: relative;
    width: 46.87vw;
    height: 100%;
    margin: 0 auto; }
  .section {
    width: 100%;
    overflow: hidden; }
  .phone-show-desc {
    position: relative;
    z-index: 11; }
  .transition-time {
    transition: all 2s;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s; }
  .introduce {
    position: relative;
    z-index: 2; }
  .introduce .title {
    color: #fff;
    font-size: 2.5vw;
    line-height: 3.52vw;
    margin-bottom: 1.6vw;
    font-family: OPPOFont-Bold;
    font-weight: bold; }
  .introduce .description {
    color: #fff;
    font-size: 1.05469vw;
    line-height: 1.75vw;
    font-family: OPPOFont-Medium; }
  .introduce-params {
    position: relative;
    z-index: 2; }
  .introduce .title-gradient {
    margin-bottom: 0;
    padding-bottom: 1.6vw;
    background: -webkit-linear-gradient(right, #2dc9ff 0%, #9793ff 67%, #2dc9ff 100%);
    background: linear-gradient(to left, #2dc9ff 0%, #9793ff 67%, #2dc9ff 100%);
    background: -webkit-linear-gradient(to left, #94e5ff 0%, #ccc9ff 67%, #97f4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #60a7ff; }
  .ie-class .introduce .title-gradient {
    background: transparent; }
  .phone-show {
    -webkit-transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
    -webkit-transition: -webkit-transform all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: -webkit-transform all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: transform all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: transform all 1s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
    -ms-transition: transform all 1s cubic-bezier(0.39, 0.575, 0.565, 1); }
  .section-1 {
    height: 42.77344vw;
    background: #d1e9d9; }
  .section-1 .phone-show {
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: 0;
    width: 100vw;
    height: 42.77344vw; }
  .section-2 {
    height: 32.10938vw;
    background: #0d0f13;
    margin-top: -0.03rem; }
  .section-2 .introduce {
    width: 27vw;
    right: -0.73vw;
    float: right;
    display: inline-block;
    vertical-align: top;
    padding-top: 6vw; }
  .section-2 .phone-show {
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: -2.34375vw;
    width: 100vw;
    height: 34.45313vw; }
  .section-2 .phone-show img {
    display: block;
    width: 100vw;
    height: 34.45313vw; }
  .section-2 .title {
    background: -webkit-linear-gradient(right, #2dc9ff 0%, #9793ff 30%, #2dc9ff 100%);
    background: linear-gradient(to left, #2dc9ff 0%, #9793ff 30%, #2dc9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .section-2 .description {
    width: 27vw;
    color: #d7d7d7; }
  .section-3 {
    height: auto;
    background: #fff;
    padding-bottom: 7vw; }
  .section-3 .introduce {
    padding-top: 3.24vw;
    margin-bottom: 1.56vw; }
  .section-3 .title {
    color: #000; }
  .section-3 .description {
    color: #000; }
  .section-3 .phone-show {
    display: block;
    position: relative;
    width: 100%;
    height: 23.43vw;
    overflow: hidden; }
  .section-3 .phone-show span {
    left: 21%;
    z-index: 3;
    position: absolute;
    bottom: 1.17vw;
    display: inline-block;
    padding: 0 0.78vw;
    border-radius: 3.9vw;
    color: #333;
    font-size: 0.78vw;
    font-family: OPPOFont-Medium;
    background: rgba(255, 255, 255, 0.7); }
  .section-3 .phone-show .last {
    left: 73%; }
  .section-4 {
    height: 49.29vw;
    background: #fff; }
  .section-4 .introduce {
    margin-bottom: 2.03vw;
    padding-top: 3.67vw; }
  .section-4 .title {
    background: -webkit-linear-gradient(right, #2dc9ff 0%, #9793ff 74%, #2dc9ff 100%);
    background: linear-gradient(to left, #2dc9ff 0%, #9793ff 74%, #2dc9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .section-4 .description {
    color: #000; }
  .section-4 .phone-show {
    position: relative;
    width: 100%;
    height: 23.43vw;
    overflow: hidden; }
  .section-4 video {
    position: absolute;
    left: 0;
    top: 0;
    width: 46.87vw;
    height: 23.43vw; }
  .section-4 .picture-show {
    width: 100%;
    height: 100%;
    display: none; }
  .section-4 .btn-play {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 3.59vw;
    height: 3.59vw;
    background: url(../images/2560/btn-play-4d7655b5a3daaf81d8b296291f375df5.png) no-repeat;
    background-size: 100% 100%; }
  .section-4 .phone-show span {
    left: 21%;
    z-index: 3;
    position: absolute;
    bottom: 1.17vw;
    display: inline-block;
    padding: 0 0.78vw;
    border-radius: 3.9vw;
    color: #333;
    font-size: 0.78vw;
    font-family: OPPOFont-Medium;
    background: rgba(255, 255, 255, 0.7); }
  .section-4 .phone-show .last {
    left: 73%; }
  .section-5 {
    height: auto;
    background: #e5f4ff; }
  .section-5 .cl {
    margin-bottom: 5.07vw; }
  .section-5 .title {
    color: #333333; }
  .section-5 .description {
    color: #333333; }
  .section-5 .introduce1 {
    padding-top: 6vw;
    margin-bottom: 1.91vw; }
  .section-5 .title1 {
    position: relative; }
  .section-5 .phone-show1 {
    display: block;
    width: 100%;
    height: 28.63281vw;
    margin-bottom: 0.5vw; }
  .section-5 .phone-show2 {
    display: block;
    position: relative;
    width: 100%;
    height: 28.63281vw;
    margin-bottom: 5.07vw; }
  .section-5 video {
    position: absolute;
    left: 0;
    top: 0;
    width: 20.31vw;
    height: 28.82vw; }
  .section-5 .phone-show3 {
    display: block;
    float: right;
    width: 28.08594vw;
    height: 18.75vw; }
  .section-5 .phone-show4 {
    display: block;
    float: left;
    width: 20.58594vw;
    height: 29.0625vw; }
  .section-5 .com-introduce {
    width: 19vw; }
  .section-5 .introduce3 .description {
    padding-bottom: 1vw; }
  .section-5 .introduce4 .description {
    padding-bottom: 1vw; }
  .section-5 .introduce3 {
    float: left;
    padding-top: 0vw;
    width: 16vw;
    height: 18.75vw;
    display: table; }
  .section-5 .introduce4 {
    float: right;
    width: 24vw;
    margin-right: -0.4vw;
    height: 29.0625vw;
    display: table; }
  .section-5 .table-cell {
    display: table-cell;
    vertical-align: middle; }
  .section-14 {
    height: 43.94531vw;
    background: #000; }
  .section-14 .introduce {
    padding-top: 5vw;
    margin-bottom: 1.2vw; }
  .section-14 .title {
    width: 54vw;
    background: -webkit-linear-gradient(right, #2dc9ff 0%, #9793ff 6%, #2dc9ff 100%);
    background: linear-gradient(to left, #2dc9ff 0%, #9793ff 6%, #2dc9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .section-14 .description {
    width: 54vw;
    color: #d7d7d7; }
  .section-14 .phone-show {
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: 1.5625vw;
    width: 100vw;
    height: 42.38281vw; }
  .section-14 .phone-show img {
    width: 100vw;
    height: 42.38281vw; }
  .section-6 {
    height: 49.72656vw;
    background: #fff;
    position: relative; }
  .section-6 .introduce {
    padding-top: 5vw; }
  .section-6 .title {
    color: #0c0d11; }
  .section-6 .description {
    color: #333333; }
  .section-6 .phone-show6 {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: -2.34375vw;
    width: 100vw;
    height: 52.07031vw; }
  .section-6 .phone-show6 img {
    width: 100vw;
    height: 52.07031vw; }
  .section-7 {
    height: 64.21875vw;
    background: #fff;
    position: relative; }
  .section-7 .introduce {
    text-align: right;
    padding-top: 4.8vw; }
  .section-7 .phone-show7 {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: -2.34375vw;
    width: 100vw;
    height: 66.5625vw; }
  .section-7 .phone-show7 img {
    width: 100vw;
    height: 66.5625vw; }
  .section-7 .title {
    color: #000;
    width: 51vw;
    margin-left: -4.13vw; }
  .section-7 .description {
    color: #000;
    width: 31vw;
    float: right; }
  .section-8 {
    height: 39.60938vw;
    background: #000; }
  .section-8 .introduce {
    padding-top: 6.25vw; }
  .section-8 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: -2.34375vw;
    width: 100vw;
    height: 41.95313vw; }
  .section-8 .phone-show img {
    width: 100vw;
    height: 41.95313vw; }
  .section-8 .title {
    background: -webkit-linear-gradient(right, #2dc9ff 0%, #9793ff 22%, #2dc9ff 100%);
    background: linear-gradient(to left, #2dc9ff 0%, #9793ff 22%, #2dc9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .section-8 .description {
    width: 22vw; }
  .section-9 {
    height: 58.82813vw; }
  .section-9 .introduce {
    text-align: center;
    padding-top: 5.85vw;
    margin-bottom: 2.73vw; }
  .section-9 .phone-show {
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: -2.34375vw;
    width: 100vw;
    height: 61.17188vw; }
  .section-9 .phone-show img {
    width: 100vw;
    height: 61.17188vw; }
  .section-9 .description {
    width: 48vw;
    margin-left: -0.565vw; }
  .section-9 .description2 {
    padding-top: 1em;
    font-family: OPPOFont-Bold; }
  .section-10 {
    height: 67.03125vw; }
  .section-10 .title {
    background: -webkit-linear-gradient(right, #2dc9ff 0%, #9793ff 70%, #2dc9ff 100%);
    background: linear-gradient(to left, #2dc9ff 0%, #9793ff 70%, #2dc9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .section-10 .description {
    color: #d7d7d7; }
  .section-10 .introduce2 {
    margin-bottom: 1vw;
    padding-top: 3.6vw; }
  .section-10 .introduce-params2 {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
  .section-10 .introduce-params2 > div {
    display: inline-block; }
  .section-10 .introduce-params2 .params-item span:first-child {
    width: 3.28125vw;
    height: 1.83594vw;
    display: block;
    margin: 0 auto 0.78vw; }
  .section-10 .introduce-params2 .params-item span:last-child {
    display: block;
    font-size: 1.05vw;
    color: #d7d7d7;
    font-family: OPPOFont-Medium;
    line-height: 1.75vw;
    text-align: center; }
  .section-10 .introduce-params2 .params-item1 span:first-child {
    background: url(../images/2560/icon-param1-4d6f05d50ecea4da03b9f09ef867dda0.png) no-repeat;
    background-size: 100%; }
  .section-10 .introduce-params2 .params-item2 span:first-child {
    background: url(../images/2560/icon-param2-3af81efb2a9733062f9bdb5456d38fff.png) no-repeat;
    background-size: 100%; }
  .section-10 .introduce-params2 .params-item3 span:first-child {
    background: url(../images/2560/icon-param3-87b6d84549f439a7692cbdb357b6b48a.png) no-repeat;
    background-size: 100%; }
  .section-10 .introduce-params2 .params-item4 span:first-child {
    background: url(../images/2560/icon-param4-e875cb26a87282454ee37213d8c81fe8.png) no-repeat;
    background-size: 100%; }
  .section-10 .tip {
    position: absolute;
    left: -2%;
    bottom: 0.78vw;
    z-index: 2;
    width: 104%;
    text-align: center;
    font-size: 1.05vw;
    color: #b7b7b7;
    font-family: OPPOFont-Medium;
    line-height: 1.75vw; }
  .section-10 .tip a {
    color: #b7b7b7; }
  .section-10 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: -2.34375vw;
    width: 100vw;
    height: 69.375vw; }
  .section-10 .phone-show img {
    display: block;
    width: 100vw;
    height: 69.375vw; }
  .section-11 {
    height: 59.84375vw; }
  .section-11 .title {
    background: -webkit-linear-gradient(right, #2dc9ff 0%, #9793ff 50%, #2dc9ff 100%);
    background: linear-gradient(to left, #2dc9ff 0%, #9793ff 50%, #2dc9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .section-11 .introduce {
    padding-top: 5.06vw;
    height: 47vw; }
  .section-11 .description {
    color: #d7d7d7; }
  .ie-class .section-11 .title {
    background: transparent; }
  .ff-class .section-11 .description {
    width: 44.92vw; }
  .section-11 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: -2.34375vw;
    width: 100vw;
    height: 62.1875vw; }
  .section-11 .phone-show img {
    display: block;
    width: 100vw;
    height: 62.1875vw; }
  .section-11 .introduce-params span {
    display: block;
    width: 100%; }
  .section-11 .introduce-params .param-data {
    position: relative;
    left: -0.58vw;
    font-size: 2.5vw;
    font-family: OPPOFont-Bold;
    font-weight: bold;
    line-height: 3.52vw;
    margin-bottom: 1.25vw;
    background: -webkit-linear-gradient(left, #2dc9ff 0%, #9793ff 50%);
    background: linear-gradient(to right, #2dc9ff 0%, #9793ff 50%);
    background: -webkit-linear-gradient(to right, #94e5ff 0%, #ccc9ff 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #60a7ff; }
  .ie-class .introduce-params .param-data {
    background: transparent; }
  .section-11 .introduce-params .param-desc {
    font-size: 1.05vw;
    color: #d7d7d7;
    font-family: OPPOFont-Medium;
    line-height: 1.75vw; }
  .section-12 {
    height: 51.83594vw; }
  .section-12 .introduce {
    text-align: right;
    padding-top: 5.85vw;
    height: 26vw; }
  .section-12 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: -2.34375vw;
    width: 100vw;
    height: 54.17969vw; }
  .section-12 .phone-show img {
    display: block;
    width: 100vw;
    height: 54.17969vw; }
  .section-12 .introduce-params {
    float: right; }
  .section-12 .introduce-params > div {
    float: left;
    margin-right: 3vw; }
  .section-12 .introduce-params .params-item3 {
    margin-right: 0; }
  .section-12 .introduce-params span {
    display: block;
    width: 100%; }
  .section-12 .introduce-params .param-data {
    font-size: 2.34375vw;
    color: #fff;
    font-family: OPPOFont-Bold;
    line-height: 3.12vw;
    margin-bottom: 0.6vw; }
  .section-12 .introduce-params .param-desc {
    font-size: 1.05469vw;
    color: #fff;
    font-family: OPPOFont-Medium;
    line-height: 1.75vw; }
  .section-13 {
    height: 31.875vw;
    background: url(../images/2560/section13-phone-bg-475d46355ee1890faa8a93ba95d4cd5b.jpg) no-repeat;
    background-size: 100% 100%; }
  .section-13 .title {
    background: -webkit-linear-gradient(right, #2dc9ff 0%, #9793ff 80%, #2dc9ff 100%);
    background: linear-gradient(to left, #2dc9ff 0%, #9793ff 80%, #2dc9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .section-13 .phone-show {
    position: absolute;
    right: 2.34vw;
    top: 2.34375vw;
    width: 16.5625vw;
    height: 34.57031vw; }
  .section-13 .description {
    width: 17.57vw;
    color: #b7b7b7; }
  .section-13 .blank-height {
    display: block;
    height: 3.6vw; } }

.video-dialog {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: none;
  z-index: 999; }

.video-dialog-container {
  position: fixed;
  z-index: 99;
  width: 100%;
  height: 100%;
  background-color: #000; }

.video-dialog-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 101;
  width: 1200px;
  height: 675px;
  margin-left: -600px;
  margin-top: -337.5px; }

.video-dialog-wrapper video {
  position: absolute;
  width: 100%; }

.video-dialog-close {
  position: absolute;
  right: -56px;
  width: 26px;
  height: 26px;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMyAzMyI+CiAgICA8ZyBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xIC0xKSI+CiAgICAgICAgPHJlY3Qgd2lkdGg9IjQ1IiBoZWlnaHQ9IjMiIHg9Ii01IiB5PSIxNiIgcng9IjEiIHRyYW5zZm9ybT0icm90YXRlKDQ1IDE3LjUgMTcuNSkiLz4KICAgICAgICA8cmVjdCB3aWR0aD0iNDUiIGhlaWdodD0iMyIgeD0iLTUiIHk9IjE2IiByeD0iMSIgdHJhbnNmb3JtPSJyb3RhdGUoLTQ1IDE3LjUgMTcuNSkiLz4KICAgIDwvZz4KPC9zdmc+Cg==);
  background-size: cover;
  cursor: pointer; }

@media screen and (min-width: 320px) and (max-width: 1080px) {
  .video-dialog-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 101;
    width: 80vw;
    height: 102vw;
    margin-left: -40vw;
    margin-top: -51vw; }
  .video-dialog-close {
    right: 0;
    top: -9.5vw; } }