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

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

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

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

body {
  font-family: OPPOSans; }

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: 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.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.9vw;
    line-height: 9.4vw;
    font-family: OPPOFont-Bold; }
  .introduce .description {
    color: #fff;
    font-size: 3.7vw;
    line-height: 6.4vw;
    font-family: OPPOFont-Medium;
    padding-top: 4vw; }
  .introduce-params {
    position: relative;
    z-index: 2; }
  .introduce .title-gradient {
    margin-bottom: 0;
    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; }
  /*.title.com-last{margin-bottom:4vw;}*/
  .section-1 {
    height: 170vw;
    background: #f3faff; }
  .section-1 .wrapper {
    width: 100%; }
  .section-1 .phone-show {
    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);
    position: absolute;
    right: -9vw;
    bottom: -9vw;
    width: 89vw;
    height: 92.5vw;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1); }
  .section-1 .phone-show img {
    opacity: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-size: 100%; }
  .section-1 .phone-show.act img {
    -webkit-animation: fadeInDown 1.6s 0.4s both;
    animation: fadeInDown 1.6s 0.4s both;
    opacity: 1; }
  .section-1 .phone-show.on {
    bottom: 0;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1); }
  .section-1 .phone-name {
    position: relative;
    width: 100%;
    text-align: center;
    color: #000;
    font-family: OPPOFont-Bold;
    font-size: 11.57vw;
    line-height: 17vw;
    padding-top: 23vw;
    margin-bottom: 3.6vw; }
  .section-1 .phone-desc1 {
    position: relative;
    width: 100%;
    text-align: center;
    color: #000;
    font-family: OPPOFont-Bold;
    font-size: 9.7vw;
    line-height: 13vw;
    margin-bottom: 2vw;
    letter-spacing: -0.4vw; }
  .section-1 .phone-desc2 {
    position: relative;
    width: 100%;
    text-align: center;
    color: #000;
    font-family: OPPOFont-Medium;
    font-size: 7.22vw;
    line-height: 9.5vw; }
  .section-1 .ani {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    transform: translateY(40px); }
  .section-1 .ani.move {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px); }
  .section-2 {
    height: 160vw; }
  .section-2 .introduce {
    padding-top: 16vw;
    margin-bottom: 5vw;
    height: 83vw; }
  .section-2 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: 0;
    width: 100vw;
    height: 160vw; }
  .section-2 .introduce-params {
    width: 60vw; }
  .section-2 .introduce .description br {
    display: none; }
  .section-2 .phone-show img {
    display: block;
    width: 100vw;
    height: 160vw; }
  .section-2 .introduce-params {
    width: 80vw;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -ms-flex-pack: justify;
        justify-content: space-between; }
  .section-2 .introduce-params > div {
    margin-bottom: 2vw; }
  .section-2 .introduce-params .params-item3 {
    margin-right: 0; }
  .section-2 .introduce-params span {
    display: block;
    width: 100%; }
  .section-2 .introduce-params .param-data {
    font-size: 4vw;
    color: #fff;
    font-family: OPPOFont-Bold;
    line-height: 6.1vw; }
  .section-2 .introduce-params .param-desc {
    font-size: 2.5vw;
    color: #fff;
    font-family: OPPOFont-Medium;
    line-height: 5vw; }
  .section-3 {
    background: #070709; }
  .section-3 .description {
    color: #d7d7d7;
    line-height: 5.2vw;
    font-size: 3vw; }
  .section-3 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: 0;
    width: 100vw;
    height: 195vw; }
  .section-3 .introduce1 {
    padding-top: 12.5vw;
    height: 148vw; }
  .section-3 .introduce-params span {
    display: block;
    width: 100%; }
  .section-3 .introduce-params .param-data {
    font-size: 4vw;
    font-family: OPPOFont-Bold;
    line-height: 5vw;
    margin-bottom: 5vw;
    background: linear-gradient(to right, #2dc9ff 0%, #9793ff 10%);
    background: -webkit-linear-gradient(to right, #94e5ff 0%, #ccc9ff 10%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #60a7ff; }
  .section-3 .introduce-params .param-desc {
    font-size: 2.5vw;
    line-height: 4vw;
    color: #d7d7d7;
    font-family: OPPOFont-Medium; }
  .section-3 .phone-show2 {
    position: relative;
    left: -9vw;
    width: 100vw;
    height: 228vw;
    background: url(../jpg/s3-phone2-2618bd5159b18e7f0d7909f226d0d130.jpg) no-repeat;
    background-size: 100%; }
  .section-3 .introduce2 {
    width: 82vw;
    margin: 0 auto 6vw;
    padding-top: 16vw;
    height: 104vw; }
  .section-3 .introduce-params2 {
    position: relative;
    z-index: 2;
    width: 84vw;
    margin-left: 8vw; }
  .section-3 .introduce-params2 > div {
    display: inline-block;
    vertical-align: top;
    margin: 0 2vw 2.7vw;
    text-align: center;
    margin-right: 3vw;
    width: 22vw; }
  .section-3 .introduce-params2 .params-item span:first-child {
    width: 7.4vw;
    height: 4.2vw;
    display: block;
    margin: 0 auto 1vw; }
  .section-3 .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; }
  .section-3 .introduce-params2 .params-item1 span:first-child {
    background: url(../png/icon-param1-9a13f04ac46ec838c638ff5392c9082a.png) no-repeat;
    background-size: 100%; }
  .section-3 .introduce-params2 .params-item2 span:first-child {
    background: url(../png/icon-param2-a8958780a263b0dbdc2e5d84fa219b49.png) no-repeat;
    background-size: 100%; }
  .section-3 .introduce-params2 .params-item3 span:first-child {
    background: url(../png/icon-param3-33e02d3f7f275a08c645b70099705015.png) no-repeat;
    background-size: 100%; }
  .section-3 .introduce-params2 .params-item4 span:first-child {
    background: url(../png/icon-param4-6227ae2f633387d3e5e35766ec284e35.png) no-repeat;
    background-size: 100%; }
  .section-3 .introduce-params2 .params-item5 span:first-child {
    background: url(../png/icon-param5-3ccffb7954d84e622210aa195f62ae48.png) no-repeat;
    background-size: 100%; }
  .section-3 .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-3 .introduce-params2 .param-desc4 br {
    display: none; }
  .section-3 .introduce-params2 .params-item4 {
    margin-left: 12vw;
    margin-right: 0; }
  .section-3 .introduce-params2 .params-item5 {
    margin-left: 9vw;
    margin-right: 0; }
  .section-3 .introduce1 .h5-show .title-gradient {
    font-size: 5vw;
    line-height: 7.4vw;
    padding-bottom: 0.6vw; }
  .phone-show2 .com-first, .phone-show2 .com-last {
    font-size: 5vw;
    line-height: 7.4vw;
    padding-bottom: 0.6vw; }
  .section-3 .introduce1 .description {
    font-size: 3vw;
    line-height: 5.2vw; }
  .section-3 .introduce2 .description {
    font-size: 3vw;
    line-height: 5.2vw; }
  .section-3 .introduce2 .description2 {
    font-size: 3.3vw; }
  .section-4 {
    height: 171vw;
    background: #08080a; }
  .section-4 .introduce {
    padding-top: 16vw;
    padding-bottom: 98vw; }
  .section-4 .title {
    width: 120%; }
  .section-4 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: 0;
    width: 100vw;
    height: 171vw; }
  .section-5 {
    height: 179.685vw;
    background: #0b0d10; }
  .section-5 .introduce {
    padding-top: 14vw; }
  .section-5 .introduce .title {
    line-height: 7vw;
    font-size: 5.5vw;
    padding-bottom: 1vw; }
  .section-5 .introduce .description {
    line-height: 4.4vw; }
  .section-5 .introduce .subtitle {
    color: #d7d7d7;
    font-size: 2.5vw;
    line-height: 4vw;
    font-family: OPPOFont-Bold;
    margin-bottom: 1.3vw; }
  .section-5 .com-last {
    display: block !important; }
  .section-5 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: 0;
    width: 100vw;
    height: 192.685vw; }
  .section-6 {
    background: #fff; }
  .section-6 .introduce {
    padding-top: 11vw;
    margin-bottom: 6.2vw; }
  .section-6 .phone-show {
    position: relative;
    width: 83vw;
    height: 115vw;
    margin: 0 auto; }
  .section-6 .title {
    width: 100vw;
    font-size: 5.4vw;
    color: #000; }
  .section-6 .description {
    color: #000; }
  .section-6 .phone-show span {
    z-index: 2;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    display: inline-block;
    padding: 1vw 2vw;
    border-radius: 10vw;
    font-size: 2.9vw;
    background: rgba(255, 255, 255, 0.7);
    font-family: OPPOFont-Medium; }
  .section-6 .phone-show span:first-child {
    top: 46vw; }
  .section-6 .phone-show .last {
    top: 104vw; }
  .section-7 {
    background: #fff; }
  .section-7 .introduce {
    padding-top: 11vw;
    margin-bottom: 6.2vw; }
  .section-7 .phone-show {
    position: relative;
    width: 83vw;
    height: 57vw;
    margin: 0 auto; }
  .section-7 .title {
    color: #000; }
  .section-7 .description {
    color: #000; }
  .section-8 {
    background: #fff;
    padding-bottom: 16vw; }
  .section-8 .introduce {
    padding-top: 16vw;
    margin-bottom: 6.2vw; }
  .section-8 .phone-show {
    position: relative;
    width: 83vw;
    height: 115vw;
    margin: 0 auto; }
  .section-8 .description {
    color: #000; }
  .section-8 .phone-show span {
    z-index: 2;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    display: inline-block;
    padding: 1vw 2vw;
    border-radius: 10vw;
    font-size: 2.9vw;
    background: rgba(255, 255, 255, 0.7);
    font-family: OPPOFont-Medium; }
  .section-8 .phone-show span:first-child {
    top: 46vw; }
  .section-8 .phone-show .last {
    top: 104vw; }
  .section-8 .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(../png/btn-play-b015389d7f0e1f6c32580a1fb825cc49.png) no-repeat;
    background-size: 100% 100%; }
  .section-8 video {
    display: none; }
  .section-9 {
    background: #e5f4ff;
    padding-bottom: 14vw; }
  .section-9 .wrapper {
    width: 100vw; }
  .section-9 .cl {
    margin-bottom: 15vw; }
  .section-9 .title {
    color: #000; }
  .section-9 .description {
    color: #000; }
  .section-9 .introduce1 {
    width: 84vw;
    padding-top: 16vw;
    margin: 0 auto 6vw; }
  .section-9 .phone-show1 {
    display: block;
    width: 100vw;
    height: 65.9vw;
    margin: 0 auto 15vw; }
  .section-9 .introduce2 {
    float: right;
    width: 36vw;
    height: 57vw;
    margin-right: 8vw;
    padding-top: 7vw; }
  .section-9 .phone-show2 {
    position: relative;
    float: left;
    width: 44.2vw;
    height: 57vw; }
  .section-9 .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(../png/btn-play2-20e6a14f4e189961aa06071704f48afa.png) no-repeat;
    background-size: 100% 100%; }
  .section-9 .com-introduce .title {
    font-size: 4vw;
    line-height: 6.1vw; }
  .section-9 .com-introduce .description {
    font-size: 2.5vw;
    line-height: 4vw;
    padding-top: 2vw; }
  .section-9 .introduce3 {
    float: left;
    width: 36vw;
    height: 57vw;
    margin-left: 8vw;
    padding-top: 14vw; }
  .section-9 .phone-show3 {
    float: right;
    display: block;
    width: 44.2vw;
    height: 57vw; }
  .section-9 .introduce4 {
    float: right;
    width: 36vw;
    height: 57vw;
    margin-right: 8vw;
    padding-top: 10vw; }
  .section-9 .phone-show4 {
    float: left;
    width: 44.2vw;
    height: 57vw; }
  .section-9 .introduce5 {
    float: left;
    width: 36vw;
    height: 57vw;
    margin-left: 8vw;
    padding-top: 10vw; }
  .section-9 .phone-show5 {
    float: right;
    display: block;
    width: 44.2vw;
    height: 57vw; }
  .section-9 video {
    display: none; }
  .section-10 {
    height: 160vw;
    background: #000; }
  .section-10 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: 0;
    width: 100vw;
    height: 167vw; }
  .section-10 .introduce {
    padding-top: 16vw; }
  .section-11 {
    height: 119vw;
    background: #000; }
  .section-11 .wrapper {
    width: 100vw; }
  .section-11 .introduce {
    width: 84vw;
    margin: 0 auto 9vw; }
  .section-11 .phone-show {
    width: 100vw;
    height: 30.5vw; }
  .section-11 .introduce .subtitle {
    color: #d7d7d7;
    font-size: 2.5vw;
    line-height: 4vw;
    font-family: OPPOFont-Bold;
    margin-bottom: 1.3vw; }
  .section-11 .introduce .title-gradient2 {
    background: linear-gradient(to left, #2dc9ff 0%, #9793ff 50%, #2dc9ff 100%);
    background: -webkit-linear-gradient(to left, #2dc9ff 0%, #9793ff 50%, #2dc9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #60a7ff; }
  .section-12 {
    height: 195vw; }
  .section-12 .introduce {
    padding-top: 16vw;
    margin-bottom: 4vw; }
  .section-12 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: 0;
    width: 100vw;
    height: 195vw; }
  .section-12 .introduce-params {
    width: 100vw; }
  .section-12 .introduce-params > div {
    display: inline-block;
    vertical-align: top;
    width: 45vw; }
  .section-12 .introduce-params > div:first-child {
    width: 45vw; }
  .section-12 .introduce-params span {
    display: block;
    width: 100%; }
  .section-12 .param-data {
    font-size: 4vw;
    line-height: 6.1vw;
    color: #fff;
    font-family: OPPOFont-Bold; }
  .section-12 .param-desc {
    font-size: 2.5vw;
    line-height: 4vw;
    color: #fff;
    font-family: OPPOFont-Medium; }
  .section-12 .description2 {
    font-family: OPPOFont-Bold; } }

@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; }
  .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.51vw;
    margin-bottom: 1.36vw;
    font-family: OPPOFont-Bold; }
  .introduce .description {
    color: #fff;
    font-size: 1.03vw;
    line-height: 1.75vw;
    font-family: OPPOFont-Medium; }
  .introduce-params {
    position: relative;
    z-index: 2; }
  .introduce .title-gradient {
    margin-bottom: 0;
    line-height: 4.1vw;
    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 {
    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);
    transition: all 2s; }
  .ie-class .phone-show {
    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);
    transition: none; }
  .section-1 {
    height: 42.38vw;
    background: #f3faff; }
  .section-1 .phone-show {
    position: absolute;
    left: 50%;
    margin-left: -13vw;
    bottom: -2.65vw;
    width: 32.34vw;
    height: 26.64vw;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1); }
  .section-1 .phone-show img {
    opacity: 0; }
  .section-1 .phone-show.act img {
    -webkit-animation: fadeInDown 1.6s 0.4s both;
    animation: fadeInDown 1.6s 0.4s both;
    opacity: 1; }
  .section-1 .phone-show.on {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1); }
  .section-1 .phone-name {
    width: 100%;
    text-align: center;
    color: #000;
    font-family: OPPOFont-Bold;
    font-size: 4.29vw;
    line-height: 4.68vw;
    padding-top: 4.68vw; }
  .section-1 .phone-desc1 {
    width: 100%;
    text-align: center;
    color: #000;
    font-family: OPPOFont-Bold;
    font-size: 2.53vw;
    line-height: 3.9vw;
    margin-bottom: 0.31vw; }
  .section-1 .phone-desc2 {
    width: 100%;
    text-align: center;
    color: #000;
    font-family: OPPOFont-Medium;
    font-size: 1.44vw;
    line-height: 2.73vw; }
  .section-1 .ani {
    opacity: 0;
    -webkit-transform: translateY(-1.56vw);
    transform: translateY(1.56vw); }
  .section-1 .ani.move {
    opacity: 1;
    -webkit-transform: translateY(0vw);
    transform: translateY(0vw); }
  .section-2 {
    height: 52.22vw; }
  .section-2 .introduce {
    text-align: right;
    padding-top: 5.85vw;
    height: 27.4vw; }
  .section-2 .introduce .description br {
    font-size: 0; }
  .section-2 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: -2.34vw;
    width: 100vw;
    height: 54.6vw; }
  .section-2 .phone-show img {
    display: block;
    width: 100vw;
    height: 54.57vw; }
  .section-2 .introduce-params {
    font-size: 0;
    text-align: right; }
  .section-2 .introduce-params > div {
    display: inline-block;
    vertical-align: top;
    margin-right: 1.95vw;
    text-align: left; }
  .section-2 .introduce-params .params-item1 {
    margin-right: 0; }
  .section-2 .introduce-params span {
    display: block;
    width: 100%; }
  .section-2 .introduce-params .param-data {
    font-size: 1.87vw;
    color: #fff;
    font-family: OPPOFont-Bold;
    line-height: 3.12vw; }
  .section-2 .introduce-params .param-desc {
    font-size: 1.05vw;
    color: #fff;
    font-family: OPPOFont-Medium;
    line-height: 1.75vw; }
  .section-3 {
    height: 123.39vw;
    background: #020204; }
  .section-3 .introduce {
    padding-top: 2.2vw;
    height: 36.45vw; }
  .section-3 .title1 {
    margin-bottom: 1.75vw; }
  .section-3 .com-last {
    margin-bottom: 0.97vw; }
  .section-3 .description {
    color: #d7d7d7; }
  .ie-class .section-3 .title {
    background: transparent; }
  .ff-class .section-3 .description {
    width: 44.92vw; }
  .section-3 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: -2.34vw;
    width: 100vw;
    height: 125.85vw; }
  .section-3 .phone-show img {
    display: block;
    width: 100vw;
    height: 125.82vw; }
  .section-3 .introduce-params span {
    display: block;
    width: 100%; }
  .section-3 .introduce-params .param-data {
    position: relative;
    left: -0.58vw;
    font-size: 2.5vw;
    font-family: OPPOFont-Bold;
    line-height: 3.51vw;
    margin-bottom: 1.25vw;
    background: linear-gradient(to right, #2dc9ff 0%, #9793ff 10%);
    background: -webkit-linear-gradient(to right, #94e5ff 0%, #ccc9ff 10%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #60a7ff; }
  .ie-class .introduce-params .param-data {
    background: transparent; }
  .section-3 .introduce-params .param-desc {
    font-size: 1.05vw;
    color: #d7d7d7;
    font-family: OPPOFont-Medium;
    line-height: 1.75vw; }
  .section-3 .introduce2 {
    padding-top: 6.03vw;
    height: 28.34vw; }
  .section-3 .introduce-params2 {
    position: relative;
    z-index: 2;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -ms-flex-pack: justify;
        justify-content: space-between; }
  .section-3 .introduce-params2 > div {
    display: inline-block; }
  .section-3 .introduce-params2 .params-item span:first-child {
    width: 2.73vw;
    height: 1.67vw;
    display: block;
    margin: 0 auto 0.78vw; }
  .section-3 .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-3 .introduce-params2 .params-item1 span:first-child {
    background: url(../png/icon-param1-9a13f04ac46ec838c638ff5392c9082a.png) no-repeat;
    background-size: 100%; }
  .section-3 .introduce-params2 .params-item2 span:first-child {
    background: url(../png/icon-param2-a8958780a263b0dbdc2e5d84fa219b49.png) no-repeat;
    background-size: 100%; }
  .section-3 .introduce-params2 .params-item3 span:first-child {
    background: url(../png/icon-param3-33e02d3f7f275a08c645b70099705015.png) no-repeat;
    background-size: 100%; }
  .section-3 .introduce-params2 .params-item4 span:first-child {
    background: url(../png/icon-param4-6227ae2f633387d3e5e35766ec284e35.png) no-repeat;
    background-size: 100%; }
  .section-3 .introduce-params2 .params-item5 span:first-child {
    background: url(../png/icon-param5-3ccffb7954d84e622210aa195f62ae48.png) no-repeat;
    background-size: 100%; }
  .section-3 .tip {
    position: absolute;
    left: 0;
    bottom: 0.78vw;
    z-index: 2;
    width: 100%;
    text-align: center;
    font-size: 1.05vw;
    color: #b7b7b7;
    font-family: OPPOFont-Medium;
    line-height: 1.75vw; }
  .section-3 .tip a {
    color: #b7b7b7; }
  .section-3 .introduce1 .pc-show .title-gradient {
    font-size: 2vw;
    line-height: 2.6vw;
    padding-bottom: 0.5vw; }
  .phone-show2 .com-first, .phone-show2 .com-last {
    font-size: 2vw;
    line-height: 2.6vw;
    padding-bottom: 0.5vw; }
  .section-3 .introduce1 .description {
    font-size: 1vw;
    line-height: 1.4vw; }
  .section-3 .introduce2 .description {
    font-size: 1vw;
    line-height: 1.4vw;
    padding-bottom: 0.5vw; }
  .section-3 .introduce2 .description2 {
    font-size: 1.5vw;
    line-height: 2.4vw; }
  .section-3 .wrapper {
    width: 50.87vw; }
  .section-4 {
    height: 45.15vw;
    background: url(../jpg/section4-phone-bg-3d0f5d1128733832181d1a7b42addf2f.jpg) no-repeat;
    background-size: 100% 100%; }
  .section-4 .title {
    margin-bottom: 0; }
  .section-4 .com-t {
    margin-top: -0.78vw; }
  .section-4 .com-last {
    margin-bottom: 0.97vw; }
  .section-4 .phone-show {
    position: absolute;
    right: 1.3vw;
    top: 6.28vw;
    width: 15.234vw;
    height: auto; }
  .section-4 .description {
    width: 17.57vw;
    color: #b7b7b7; }
  .section-4 .blank-height {
    display: block;
    height: 9.76vw; }
  .section-4 .pc-show {
    width: 30vw; }
  .section-5 {
    height: 34.49vw;
    background: #d9edf7;
    margin-top: -0.03rem; }
  .section-5 .introduce {
    right: -18vw;
    float: right;
    display: inline-block;
    vertical-align: top;
    padding-top: 3vw;
    width: 40vw; }
  .section-5 .introduce .subtitle {
    color: #d7d7d7;
    font-size: 1.05vw;
    line-height: 1.75vw;
    font-family: OPPOFont-Bold; }
  .section-5 .phone-show {
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: -2.34vw;
    width: 100vw;
    height: 36.83vw; }
  .section-5 .phone-show img {
    display: block;
    width: 100vw;
    height: 36.83vw; }
  .section-5 .title {
    line-height: 2.5vw;
    padding-bottom: 0.4vw;
    font-size: 2vw; }
  .section-5 .com-last {
    margin-bottom: 0.97vw; }
  .section-5 .description {
    width: 23vw;
    color: #d7d7d7;
    line-height: 1.2vw; }
  .section-6 {
    height: 41.4vw;
    background: #fff; }
  .section-6 .introduce {
    padding-top: 3.24vw;
    margin-bottom: 1.56vw; }
  .section-6 .title {
    color: #000;
    margin-bottom: 0.58vw; }
  .section-6 .description {
    color: #000; }
  .section-6 .phone-show {
    display: block;
    position: relative;
    width: 100%;
    height: 23.43vw;
    overflow: hidden; }
  .section-6 .phone-show span {
    left: 21%;
    z-index: 3;
    position: absolute;
    bottom: 1.17vw;
    display: inline-block;
    padding: 0.31vw 0.78vw;
    border-radius: 3.9vw;
    color: #333;
    font-size: 0.78vw;
    font-family: OPPOFont-Medium;
    background: rgba(255, 255, 255, 0.7); }
  .section-6 .phone-show .last {
    left: 73%; }
  .section-7 {
    height: 39.29vw;
    background: #fff; }
  .section-7 .introduce {
    padding-top: 2.73vw;
    margin-bottom: 1.56vw; }
  .section-7 .title {
    color: #000;
    margin-bottom: 0.58vw; }
  .section-7 .description {
    color: #000; }
  .section-7 .phone-show {
    position: relative;
    width: 100%;
    height: 23.43vw; }
  .section-8 {
    height: 49.29vw;
    background: #fff; }
  .section-8 .introduce {
    margin-bottom: 2.03vw;
    padding-top: 3.67vw; }
  .section-8 .title {
    margin-bottom: 0; }
  .section-8 .com-t {
    margin-top: -0.78vw; }
  .section-8 .com-last {
    margin-bottom: 0.97vw; }
  .section-8 .description {
    color: #000; }
  .section-8 .phone-show {
    position: relative;
    width: 100%;
    height: 23.51vw; }
  .section-8 video {
    position: absolute;
    left: 0;
    top: 0;
    width: 46.87vw;
    height: 23.43vw; }
  .section-8 .picture-show {
    width: 100%;
    height: 100%;
    display: none; }
  .section-8 .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(../png/btn-play-b015389d7f0e1f6c32580a1fb825cc49.png) no-repeat;
    background-size: 100% 100%; }
  .section-8 .phone-show span {
    left: 21%;
    z-index: 3;
    position: absolute;
    bottom: 1.17vw;
    display: inline-block;
    padding: 0.31vw 0.78vw;
    border-radius: 3.9vw;
    color: #333;
    font-size: 0.78vw;
    font-family: OPPOFont-Medium;
    background: rgba(255, 255, 255, 0.7); }
  .section-8 .phone-show .last {
    left: 73%; }
  .section-9 {
    height: 187.46vw;
    background: #e5f4ff; }
  .section-9 .cl {
    margin-bottom: 5.07vw; }
  .section-9 .title {
    color: #333333; }
  .section-9 .description {
    color: #333333; }
  .section-9 .introduce1 {
    padding-top: 6.64vw;
    margin-bottom: 1.91vw; }
  .section-9 .title1 {
    position: relative;
    left: -1.95vw;
    width: 50.78vw;
    text-align: center; }
  .section-9 .description1 {
    text-align: center; }
  .section-9 .phone-show1 {
    display: block;
    width: 100%;
    height: 28.82vw;
    margin-bottom: 5.07vw; }
  .section-9 .phone-show2 {
    position: relative;
    display: block;
    float: left;
    width: 20.28vw;
    height: 28.82vw; }
  .section-9 video {
    position: absolute;
    left: 0;
    top: 0;
    width: 20.31vw;
    height: 28.82vw; }
  .section-9 .phone-show2 .btn-play {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    display: none;
    width: 3.59vw;
    height: 3.59vw;
    background: url(../png/btn-play2-20e6a14f4e189961aa06071704f48afa.png) no-repeat;
    background-size: 100%; }
  .section-9 .phone-show3, .section-9 .phone-show5 {
    display: block;
    float: right;
    width: 20.35vw;
    height: 28.82vw; }
  .section-9 .phone-show4 {
    display: block;
    float: left;
    width: 26.44vw;
    height: 23.2vw; }
  .section-9 .com-introduce {
    width: 20.78vw; }
  .section-9 .com-introduce .title {
    width: 110%; }
  .section-9 .introduce2 {
    float: right;
    padding-top: 2.89vw; }
  .section-9 .introduce3, .section-9 .introduce5 {
    float: left;
    padding-top: 7.42vw; }
  .section-9 .introduce4 {
    float: right;
    width: 16.4vw;
    padding-top: 1.95vw; }
  .section-10 {
    height: 41.01vw;
    background: #000; }
  .section-10 .introduce {
    padding-top: 6.25vw; }
  .section-10 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: 0;
    width: 100vw;
    height: 48vw; }
  .section-10 .phone-show img {
    width: 100vw;
    height: 47.96vw; }
  .section-10 .title {
    margin-bottom: 0; }
  .section-10 .com-t {
    margin-top: -0.78vw; }
  .section-10 .com-last {
    margin-bottom: 0.97vw; }
  .section-10 .description {
    width: 18.75vw; }
  .section-11 {
    height: 41.01vw;
    background: #000; }
  .section-11 .introduce .subtitle {
    color: #d7d7d7;
    font-size: 1.05vw;
    line-height: 1.75vw;
    font-family: OPPOFont-Bold; }
  .section-11 .introduce .title-gradient2 {
    background-image: linear-gradient(to left, #2dc9ff 57%, #2dc9ff 97%, #2dc9ff 100%);
    background-image: -webkit-linear-gradient(to left, #2dc9ff 67%, #2dc9ff 67%, #2dc9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #60a7ff; }
  .section-11 .phone-show {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    bottom: 0;
    width: 100vw;
    height: 35.7vw; }
  .section-11 .phone-show img {
    width: 100vw;
    height: 35.74vw; }
  .section-11 .title {
    margin-bottom: 0; }
  .section-11 .com-t {
    margin-top: -0.78vw; }
  .section-11 .com-last {
    margin-bottom: 0.97vw; }
  .section-12 {
    height: 61.95vw; }
  .section-12 .introduce {
    text-align: center;
    padding-top: 5.85vw;
    margin-bottom: 2.73vw; }
  .section-12 .phone-show {
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: -3.9vw;
    width: 100vw;
    height: 65.85vw; }
  .section-12 .phone-show img {
    width: 100vw;
    height: 65.85vw; }
  .section-12 .introduce-params {
    width: 100%;
    text-align: center; }
  .section-12 .introduce-params > div {
    display: inline-block;
    vertical-align: top;
    margin: 0 1.56vw; }
  .section-12 .introduce-params span {
    display: block;
    width: 100%; }
  .section-12 .introduce-params .param-data {
    font-size: 2.5vw;
    color: #fff;
    font-family: OPPOFont-Bold;
    line-height: 3.51vw;
    margin-bottom: 0.19vw; }
  .section-12 .introduce-params .param-desc {
    font-size: 1.05vw;
    color: #fff;
    font-family: OPPOFont-Medium;
    line-height: 1.75vw; }
  .section-12 .description2 {
    padding-top: 1em;
    font-family: OPPOFont-Bold; } }

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