@font-face {
  font-family: Regular;
  src: url("http://assorted.downloads.oppo.com/static/assets/fonts/OPPOSans/OPPOSans-Regular.eot") /* IE9*/;
  src: url("http://assorted.downloads.oppo.com/static/assets/fonts/OPPOSans/OPPOSans-Regular.ttf#iefix") format('embedded-opentype'), /* IE6-IE8 */ url("http://assorted.downloads.oppo.com/static/assets/fonts/OPPOSans/OPPOSans-Regular.ttf") format('truetype') /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/;
}
@font-face {
  font-family: Medium;
  src: url("http://assorted.downloads.oppo.com/static/assets/fonts/OPPOSans/OPPOSans-Medium.eot") /* IE9*/;
  src: url("http://assorted.downloads.oppo.com/static/assets/fonts/OPPOSans/OPPOSans-Medium.ttf#iefix") format('embedded-opentype'), /* IE6-IE8 */ url("http://assorted.downloads.oppo.com/static/assets/fonts/OPPOSans/OPPOSans-Medium.woff2") format('woff2'), url("http://assorted.downloads.oppo.com/static/assets/fonts/OPPOSans/OPPOSans-Medium.ttf") format('truetype') /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/;
}
@font-face {
  font-family: Bold;
  src: url("http://assorted.downloads.oppo.com/static/assets/fonts/OPPOSans/OPPOSans-Bold.eot") /* IE9*/;
  src: url("http://assorted.downloads.oppo.com/static/assets/fonts/OPPOSans/OPPOSans-Bold.ttf#iefix") format('embedded-opentype'), /* IE6-IE8 */ url("http://assorted.downloads.oppo.com/static/assets/fonts/OPPOSans/OPPOSans-Bold.woff2") format('woff2'), url("http://assorted.downloads.oppo.com/static/assets/fonts/OPPOSans/OPPOSans-Bold.ttf") format('truetype') /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/;
}
.main-container,
.sub-container,
.narrow-container {
  margin: auto;
}
@media (max-width: 568px) {
  .pure-sm-hidden {
    display: none !important;
  }
  .main-container {
    width: 100%;
  }
  .sub-container {
    width: 9.3em;
  }
  .narrow-container {
    width: 9.3em;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .pure-md-hidden {
    display: none !important;
  }
  .pure-sm-visible {
    display: none !important;
  }
  .main-container {
    width: 87.5vw;
  }
  .sub-container {
    width: 73.69vw;
  }
  .narrow-container {
    width: 65.625vw;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .pure-lg-hidden {
    display: none !important;
  }
  .pure-sm-visible {
    display: none !important;
  }
  .main-container {
    width: 960px;
  }
  .sub-container {
    width: 771px;
  }
  .narrow-container {
    width: 720px;
  }
}
@media (min-width: 1921px) {
  .pure-xl-hidden {
    display: none !important;
  }
  .pure-sm-visible {
    display: none !important;
  }
  .main-container {
    width: 1600px;
  }
  .sub-container {
    width: 1348px;
  }
  .narrow-container {
    width: 1200px;
  }
}
#kv .head-wrapper {
  height: 58.59vw;
  background-size: 100%;
  background-repeat: no-repeat;
}
@media (max-width: 568px) {
  #kv .head-wrapper {
    height: 100vh;
    background-position: bottom;
  }
}
#kv .head-wrapper .titles {
  position: relative;
  padding-top: 16.41vw;
  width: 36.5vw;
  left: 55.12vw;
}
@media (max-width: 568px) {
  #kv .head-wrapper .titles {
    padding-top: 67px;
    width: 81.33vw;
    left: 0;
    margin: 0 auto;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #kv .head-wrapper .titles {
    padding-top: 14.97vw;
    width: 33.46vw;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #kv .head-wrapper .titles {
    padding-top: 20.31vw;
    width: 525px;
  }
}
@media (min-width: 1921px) {
  #kv .head-wrapper .titles {
    padding-top: 20.31vw;
    width: 1000px;
  }
}
@media (min-width: 1024px) and (max-width: 1200px) {
  #kv .head-wrapper .titles {
    width: 390px;
  }
}
@media (min-width: 1921px) and (max-width: 2300px) {
  #kv .head-wrapper .titles {
    width: 810px;
  }
}
@media (min-width: 569px) and (max-width: 630px) {
  #kv .head-wrapper .titles {
    left: 52vw;
  }
}
#kv .head-wrapper .titles .title {
  width: 100%;
  height: auto;
}
#kv .head-wrapper .titles h2 {
  font-family: 'Regular';
  margin-top: 36px;
  opacity: 0.4;
  font-size: 44px;
  color: #000;
  letter-spacing: -1.22px;
  line-height: 40px;
  white-space: nowrap;
}
@media (max-width: 568px) {
  #kv .head-wrapper .titles h2 {
    font-size: 12px;
    letter-spacing: -0.39px;
    line-height: 22px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #kv .head-wrapper .titles h2 {
    font-size: 12px;
    letter-spacing: -0.33px;
    line-height: 22px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #kv .head-wrapper .titles h2 {
    margin-top: 28px;
    font-size: 23px;
    letter-spacing: -0.64px;
    line-height: 24px;
  }
}
@media (min-width: 1024px) and (max-width: 1200px) {
  #kv .head-wrapper .titles h2 {
    font-size: 18px;
  }
}
@media (min-width: 1921px) and (max-width: 2300px) {
  #kv .head-wrapper .titles h2 {
    font-size: 36px;
  }
}
#kv .img-wrapper .container {
  height: 1300vh;
  padding-bottom: 100vh;
}
@media (max-width: 568px) {
  #kv .img-wrapper .container {
    height: 1600vh;
  }
}
#kv .img-wrapper .container .sticky-item,
#kv .img-wrapper .container .scroll-content {
  margin: 0 auto;
  width: 1200px;
}
@media (max-width: 568px) {
  #kv .img-wrapper .container .sticky-item,
  #kv .img-wrapper .container .scroll-content {
    width: 90vw;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #kv .img-wrapper .container .sticky-item,
  #kv .img-wrapper .container .scroll-content {
    width: 65.1vw;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #kv .img-wrapper .container .sticky-item,
  #kv .img-wrapper .container .scroll-content {
    width: 720px;
  }
}
#kv .img-wrapper .container .sticky-item .text-list,
#kv .img-wrapper .container .scroll-content .text-list {
  position: relative;
  height: 30vh;
  padding-top: 6vh;
  z-index: 1;
}
@media (min-width: 1921px) {
  #kv .img-wrapper .container .sticky-item .text-list,
  #kv .img-wrapper .container .scroll-content .text-list {
    width: 1420px;
    right: 110px;
    padding-top: 5vh;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #kv .img-wrapper .container .sticky-item .text-list,
  #kv .img-wrapper .container .scroll-content .text-list {
    width: 720px;
    padding-top: 8vh;
  }
}
@media (min-width: 569px) and (max-width: 800px) {
  #kv .img-wrapper .container .sticky-item .text-list,
  #kv .img-wrapper .container .scroll-content .text-list {
    height: 40vh;
  }
}
#kv .img-wrapper .container .sticky-item .text-list .text,
#kv .img-wrapper .container .scroll-content .text-list .text {
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 8vh;
}
@media (min-width: 1921px) {
  #kv .img-wrapper .container .sticky-item .text-list .text,
  #kv .img-wrapper .container .scroll-content .text-list .text {
    padding-top: 5vh;
    width: 1420px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #kv .img-wrapper .container .sticky-item .text-list .text,
  #kv .img-wrapper .container .scroll-content .text-list .text {
    width: 720px;
    padding-top: calc(8vh - 20px);
  }
}
@media (min-width: 1921px) {
  #kv .img-wrapper .container .sticky-item .text-list .text .intro,
  #kv .img-wrapper .container .scroll-content .text-list .text .intro {
    width: 1000px;
    margin: 0 auto;
  }
}
#kv .img-wrapper .container .sticky-item .product,
#kv .img-wrapper .container .scroll-content .product {
  position: relative;
  margin: 0 auto;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #kv .img-wrapper .container .sticky-item .product,
  #kv .img-wrapper .container .scroll-content .product {
    width: 43vh;
    height: 52.3vh;
    -webkit-transform: translateX(4px) translateY(8vh);
            transform: translateX(4px) translateY(8vh);
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #kv .img-wrapper .container .sticky-item .product,
  #kv .img-wrapper .container .scroll-content .product {
    width: 43vh;
    height: 52.3vh;
    -webkit-transform: translateY(2vh);
            transform: translateY(2vh);
  }
}
@media (max-width: 568px) {
  #kv .img-wrapper .container .sticky-item .product,
  #kv .img-wrapper .container .scroll-content .product {
    width: 100%;
    height: auto;
    margin: 0;
  }
}
@media (min-width: 1921px) {
  #kv .img-wrapper .container .sticky-item .product,
  #kv .img-wrapper .container .scroll-content .product {
    width: 43vh;
    height: 52.3vh;
    -webkit-transform: translateX(4px) translateY(7vh);
            transform: translateX(4px) translateY(7vh);
  }
}
#kv .img-wrapper .container .sticky-item .product .inner-img,
#kv .img-wrapper .container .scroll-content .product .inner-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 1;
  -webkit-transition: opacity ease-out 0.5s;
  transition: opacity ease-out 0.5s;
}
#kv .img-wrapper .container .sticky-item .product .inner-img-2,
#kv .img-wrapper .container .scroll-content .product .inner-img-2 {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
#kv .img-wrapper .container .sticky-item .product .inner-img-hidden,
#kv .img-wrapper .container .scroll-content .product .inner-img-hidden {
  opacity: 0;
  -webkit-transition: opacity ease-out 0.5s;
  transition: opacity ease-out 0.5s;
}
#kv .img-wrapper .container .sticky-item .product .move-left,
#kv .img-wrapper .container .scroll-content .product .move-left {
  width: 90%;
  opacity: 1;
  top: 5vh;
  -webkit-transform: translateX(-5%);
          transform: translateX(-5%);
  -webkit-transition: opacity 1s ease-out, width 1s ease-out 1s, top 0.6s ease-out 1s, -webkit-transform 0.6s ease-out 2.5s;
  transition: opacity 1s ease-out, width 1s ease-out 1s, top 0.6s ease-out 1s, -webkit-transform 0.6s ease-out 2.5s;
  transition: opacity 1s ease-out, width 1s ease-out 1s, top 0.6s ease-out 1s, transform 0.6s ease-out 2.5s;
  transition: opacity 1s ease-out, width 1s ease-out 1s, top 0.6s ease-out 1s, transform 0.6s ease-out 2.5s, -webkit-transform 0.6s ease-out 2.5s;
}
@media (max-width: 568px) {
  #kv .img-wrapper .container .sticky-item .product .move-left,
  #kv .img-wrapper .container .scroll-content .product .move-left {
    top: 20vh;
  }
}
#kv .img-wrapper .container .sticky-item .product .move-right,
#kv .img-wrapper .container .scroll-content .product .move-right {
  width: 86%;
  opacity: 1;
  top: 7%;
  -webkit-transform: translateX(30%);
          transform: translateX(30%);
  -webkit-transition: opacity 0.2s ease-out 2.5s, width 1s ease-out 1s, top 0.6s ease-out 1s, -webkit-transform 0.6s ease-out 2.5s;
  transition: opacity 0.2s ease-out 2.5s, width 1s ease-out 1s, top 0.6s ease-out 1s, -webkit-transform 0.6s ease-out 2.5s;
  transition: opacity 0.2s ease-out 2.5s, width 1s ease-out 1s, top 0.6s ease-out 1s, transform 0.6s ease-out 2.5s;
  transition: opacity 0.2s ease-out 2.5s, width 1s ease-out 1s, top 0.6s ease-out 1s, transform 0.6s ease-out 2.5s, -webkit-transform 0.6s ease-out 2.5s;
}
@media (max-width: 568px) {
  #kv .img-wrapper .container .sticky-item .product .move-right,
  #kv .img-wrapper .container .scroll-content .product .move-right {
    top: 20vh;
  }
}
#kv .img-wrapper .container .sticky-item .text,
#kv .img-wrapper .container .scroll-content .text {
  text-align: center;
  color: #000;
  padding: 50px 0;
}
@media (max-width: 568px) {
  #kv .img-wrapper .container .sticky-item .text,
  #kv .img-wrapper .container .scroll-content .text {
    background: rgba(0,0,0,0.75);
    border-radius: 20px;
    color: #fff;
    padding: 20px 25px 60px 25px;
    opacity: 1;
    margin-bottom: 50vh;
  }
}
#kv .img-wrapper .container .sticky-item .text .title,
#kv .img-wrapper .container .scroll-content .text .title {
  opacity: 0;
  margin-bottom: 30px;
  font-family: 'OPPO';
  font-weight: 700;
  font-size: 56px;
  letter-spacing: -1.56px;
  line-height: 80px;
  -webkit-transform: translateY(18px);
          transform: translateY(18px);
}
@media (max-width: 568px) {
  #kv .img-wrapper .container .sticky-item .text .title,
  #kv .img-wrapper .container .scroll-content .text .title {
    opacity: 1;
    margin-top: 0px;
    font-size: 24px;
    letter-spacing: -0.67px;
    line-height: 34px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #kv .img-wrapper .container .sticky-item .text .title,
  #kv .img-wrapper .container .scroll-content .text .title {
    font-size: 28px;
    letter-spacing: -0.78px;
    line-height: 36px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #kv .img-wrapper .container .sticky-item .text .title,
  #kv .img-wrapper .container .scroll-content .text .title {
    font-size: 32px;
    letter-spacing: -0.89px;
    line-height: 44px;
  }
}
#kv .img-wrapper .container .sticky-item .text .intro,
#kv .img-wrapper .container .scroll-content .text .intro {
  opacity: 0;
  font-family: 'Medium';
  color: #333;
  font-size: 22px;
  letter-spacing: -0.61px;
  line-height: 34px;
  -webkit-transform: translateY(12px);
          transform: translateY(12px);
}
@media (max-width: 568px) {
  #kv .img-wrapper .container .sticky-item .text .intro,
  #kv .img-wrapper .container .scroll-content .text .intro {
    color: #fff;
    opacity: 1;
    font-size: 15px;
    letter-spacing: -0.42px;
    line-height: 24px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #kv .img-wrapper .container .sticky-item .text .intro,
  #kv .img-wrapper .container .scroll-content .text .intro {
    font-size: 15px;
    letter-spacing: -0.42px;
    line-height: 24px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #kv .img-wrapper .container .sticky-item .text .intro,
  #kv .img-wrapper .container .scroll-content .text .intro {
    font-size: 15px;
    letter-spacing: -0.42px;
    line-height: 24px;
  }
}
@media (max-width: 568px) {
  #kv .img-wrapper .container .sticky-item .text-1,
  #kv .img-wrapper .container .scroll-content .text-1 {
    margin-bottom: 170vh;
  }
}
@media (max-width: 568px) {
  #kv .img-wrapper .container .sticky-item .text-2,
  #kv .img-wrapper .container .scroll-content .text-2 {
    margin-bottom: 60vh;
  }
}
@media (max-width: 568px) {
  #kv .img-wrapper .container .sticky-item .text-3,
  #kv .img-wrapper .container .scroll-content .text-3 {
    margin-bottom: 40vh;
  }
}
@media (max-width: 568px) {
  #kv .img-wrapper .container .sticky-item .text-4,
  #kv .img-wrapper .container .scroll-content .text-4 {
    margin-bottom: 50vh;
  }
}
@media (max-width: 568px) {
  #kv .img-wrapper .container .sticky-item .text-5,
  #kv .img-wrapper .container .scroll-content .text-5 {
    margin-bottom: 60vh;
  }
}
@media (max-width: 568px) {
  #kv .img-wrapper .container .sticky-item .text-6,
  #kv .img-wrapper .container .scroll-content .text-6 {
    margin-bottom: 290vh;
  }
}
@media (max-width: 568px) {
  #kv .img-wrapper .container .sticky-item .text-7,
  #kv .img-wrapper .container .scroll-content .text-7 {
    margin-bottom: 300vh;
  }
}
@media (max-width: 568px) {
  #kv .img-wrapper .container .sticky-item .text-8,
  #kv .img-wrapper .container .scroll-content .text-8 {
    margin-bottom: 100vh;
  }
}
#kv .img-wrapper .container .sticky-item .show,
#kv .img-wrapper .container .scroll-content .show {
  opacity: 1 !important;
  -webkit-transform: translateY(0) !important;
          transform: translateY(0) !important;
  -webkit-transition: opacity 0.5s ease-out, -webkit-transform ease-out 0.6s;
  transition: opacity 0.5s ease-out, -webkit-transform ease-out 0.6s;
  transition: opacity 0.5s ease-out, transform ease-out 0.6s;
  transition: opacity 0.5s ease-out, transform ease-out 0.6s, -webkit-transform ease-out 0.6s;
}
#kv .img-wrapper .container .sticky-item .intro-show,
#kv .img-wrapper .container .scroll-content .intro-show {
  opacity: 1 !important;
  -webkit-transform: translateY(0) !important;
          transform: translateY(0) !important;
  -webkit-transition: opacity 0.5s ease-out, -webkit-transform ease-out 0.4s;
  transition: opacity 0.5s ease-out, -webkit-transform ease-out 0.4s;
  transition: opacity 0.5s ease-out, transform ease-out 0.4s;
  transition: opacity 0.5s ease-out, transform ease-out 0.4s, -webkit-transform ease-out 0.4s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
#kv .img-wrapper .container .scroll-content {
  position: relative;
  height: 30vh;
  padding-top: 65vh;
}
@media (max-width: 568px) {
  #kv .img-wrapper .container .scroll-content {
    padding-top: 100vh;
  }
}
#kv .img-wrapper .container .sticky-item {
  height: 100vh;
}
@media (max-width: 568px) {
  #kv .img-wrapper .container .sticky-item {
    padding: calc(50vh - 45vw * 1.22) 0;
  }
}
#kv canvas {
  width: 800px;
  height: 300px;
}
#kv #product-canvas {
  display: none;
}
.where {
  padding-top: 10vh;
}
@media (max-width: 568px) {
  .where {
    padding-top: 0vh;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .where .main {
    display: none;
  }
}
@media (min-width: 1921px) {
  .where .main {
    display: none;
  }
}
.where .titles {
  margin: 0 auto 40px;
  padding-top: 65px;
  text-align: center;
  width: 1200px;
  color: #000;
}
.where .titles h1 {
  margin-bottom: 30px;
  font-family: 'OPPO';
  font-weight: 700;
  font-size: 56px;
  letter-spacing: -1.56px;
  line-height: 80px;
}
@media (max-width: 568px) {
  .where .titles h1 {
    font-size: 24px;
    letter-spacing: -0.67px;
    line-height: 34px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .where .titles h1 {
    font-size: 28px;
    letter-spacing: -0.78px;
    line-height: 36px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .where .titles h1 {
    font-size: 32px;
    letter-spacing: -0.89px;
    line-height: 44px;
  }
}
.where .titles p {
  font-family: 'Medium';
  opacity: 0.8;
  font-size: 22px;
  letter-spacing: -0.61px;
  line-height: 34px;
}
@media (max-width: 568px) {
  .where .titles p {
    font-size: 15px;
    letter-spacing: -0.42px;
    line-height: 24px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .where .titles p {
    font-size: 15px;
    letter-spacing: -0.42px;
    line-height: 24px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .where .titles p {
    font-size: 15px;
    letter-spacing: -0.42px;
    line-height: 24px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .where .titles .detail {
    width: 550px;
    margin: 44px auto;
  }
}
@media (min-width: 1921px) {
  .where .titles .detail {
    width: 800px;
    margin: 44px auto;
  }
}
@media (max-width: 568px) {
  .where .titles {
    width: 81.6vw;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .where .titles {
    width: 65.7vw;
    margin: 70px auto 40px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .where .titles {
    width: 720px;
    margin: 64px auto;
  }
}
.where .images {
  position: relative;
  width: 100vw;
  height: 56.25vw;
}
@media (max-width: 568px) {
  .where .images {
    height: 75vw;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .where .images {
    height: 58.59375vw;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .where .images {
    height: 54.3vw;
  }
}
.where .images .bg1,
.where .images .bg2 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: auto 100%;
  background-repeat: no-repeat;
}
.where .images .bg2 {
  width: 0%;
}
.where .images .shrink {
  width: 0;
  -webkit-transition: all ease 3s;
  transition: all ease 3s;
}
.where .images .expand {
  width: 100%;
  -webkit-transition: all ease 3s;
  transition: all ease 3s;
}
@media (max-width: 568px) {
  .where .images .cover-layer1 {
    display: none;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .where .images .cover-layer1 {
    display: none;
  }
}
.where .images .cover-layer1,
.where .images .cover-layer2 {
  z-index: 2;
  position: relative;
  top: 0;
}
.where .images .cover-layer1 .titles,
.where .images .cover-layer2 .titles {
  color: #fff;
}
.where .images .cover-layer1 .buttons,
.where .images .cover-layer2 .buttons {
  margin: 0 auto;
  text-align: center;
  width: 1200px;
  font-family: 'Bold';
}
@media (max-width: 568px) {
  .where .images .cover-layer1 .buttons,
  .where .images .cover-layer2 .buttons {
    width: 81.6vw;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .where .images .cover-layer1 .buttons,
  .where .images .cover-layer2 .buttons {
    width: 65.7vw;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .where .images .cover-layer1 .buttons,
  .where .images .cover-layer2 .buttons {
    width: 660px;
  }
}
.where .images .cover-layer1 .buttons .button,
.where .images .cover-layer2 .buttons .button {
  width: 143px;
  height: 44px;
  line-height: 10px;
  background: transparent;
  border: 1.5px solid #fff;
  color: #fff;
  border-radius: 22px;
  margin-top: 36px;
  outline: none;
}
@media (min-width: 569px) and (max-width: 1024px) {
  .where .images .cover-layer1 .buttons .button,
  .where .images .cover-layer2 .buttons .button {
    margin-top: 16vw;
  }
}
@media (max-width: 568px) {
  .where .images .cover-layer1 .buttons .button,
  .where .images .cover-layer2 .buttons .button {
    margin-top: calc(40vw - 80px);
  }
}
.where .images .cover-layer1 .buttons .button img,
.where .images .cover-layer2 .buttons .button img {
  display: inline;
  width: 16px;
  height: 16px;
}
.where .images .cover-layer1 .buttons .left,
.where .images .cover-layer2 .buttons .left {
  margin-right: 9px;
}
.where .images .cover-layer1 .buttons .left img,
.where .images .cover-layer2 .buttons .left img {
  margin-right: 4px;
}
.where .images .cover-layer1 .buttons .right,
.where .images .cover-layer2 .buttons .right {
  margin-left: 9px;
}
.where .images .cover-layer1 .buttons .right img,
.where .images .cover-layer2 .buttons .right img {
  margin-left: 4px;
}
.where .images .cover-layer3 {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.where .images .cover-layer3 .arrows {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
.where .images .cover-layer3 .arrows .arrow {
  display: inline-block;
  -webkit-transition: all ease 1s;
  transition: all ease 1s;
  -webkit-transition-delay: 2.5s;
          transition-delay: 2.5s;
  position: relative;
  width: 5vw;
  height: 5vw;
}
@media (max-width: 568px) {
  .where .images .cover-layer3 .arrows .arrow {
    width: 10vw;
    height: 10vw;
  }
}
.where .images .cover-layer3 .arrows .arrow img {
  width: 100%;
  height: 100%;
  position: absolute;
}
.where .images .cover-layer3 .arrows .left {
  margin-left: 50px;
}
@media (max-width: 568px) {
  .where .images .cover-layer3 .arrows .left {
    margin-left: 20px;
  }
}
@media (min-width: 1921px) {
  .where .images .cover-layer3 .arrows .left {
    margin-left: 6vw;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .where .images .cover-layer3 .arrows .left {
    margin-left: 6vw;
  }
}
.where .images .cover-layer3 .arrows .right {
  margin-left: auto;
  margin-right: 50px;
}
@media (max-width: 568px) {
  .where .images .cover-layer3 .arrows .right {
    margin-right: 20px;
  }
}
@media (min-width: 1921px) {
  .where .images .cover-layer3 .arrows .right {
    margin-right: 6vw;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .where .images .cover-layer3 .arrows .right {
    margin-right: 6vw;
  }
}
.where .images .cover-layer3 .arrows .hidden {
  opacity: 0;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}
.network .titles {
  margin: 180px auto 80px;
  text-align: center;
  width: 900px;
  color: #000;
}
@media (max-width: 568px) {
  .network .titles {
    width: 81.6vw;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .network .titles {
    width: 65.7vw;
    margin: 80px auto 40px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .network .titles {
    width: 720px;
    margin: 128px auto 64px;
  }
}
.network .titles h1 {
  margin-bottom: 30px;
  font-family: 'OPPO';
  font-weight: 700;
  font-size: 56px;
  letter-spacing: -1.56px;
  line-height: 80px;
}
@media (max-width: 568px) {
  .network .titles h1 {
    font-size: 24px;
    letter-spacing: -0.67px;
    line-height: 34px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .network .titles h1 {
    font-size: 28px;
    letter-spacing: -0.78px;
    line-height: 36px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .network .titles h1 {
    font-size: 32px;
    letter-spacing: -0.89px;
    line-height: 44px;
  }
}
.network .titles p {
  font-family: 'Medium';
  opacity: 0.8;
  font-size: 22px;
  letter-spacing: -0.61px;
  line-height: 34px;
}
@media (min-width: 1921px) {
  .network .titles p {
    width: 800px;
    margin: 0 auto;
  }
}
@media (max-width: 568px) {
  .network .titles p {
    font-size: 15px;
    letter-spacing: -0.42px;
    line-height: 24px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .network .titles p {
    font-size: 15px;
    letter-spacing: -0.42px;
    line-height: 24px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .network .titles p {
    width: 620px;
    margin: 0 auto;
    font-size: 15px;
    letter-spacing: -0.42px;
    line-height: 24px;
  }
}
#parameter {
  height: auto;
}
#parameter section {
  margin-bottom: 147px;
  margin-top: 118px;
}
@media (max-width: 568px) {
  #parameter section {
    margin-bottom: 185px;
    margin-top: 60px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #parameter section {
    margin-bottom: 217px;
    margin-top: 44px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #parameter section {
    margin-bottom: 110px;
    margin-top: 110px;
  }
}
#parameter .container {
  position: relative;
  width: 1210px;
  margin: 0 auto;
}
@media (min-width: 1921px) {
  #parameter .container {
    left: 5px;
  }
}
@media (max-width: 568px) {
  #parameter .container {
    width: 81.6vw;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #parameter .container {
    width: 71vw;
    left: 2.5vw;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #parameter .container {
    width: 730px;
    left: 5px;
  }
}
#parameter .container .specifications .nav .maintitle {
  font-size: 36px;
  line-height: 40px;
  color: #333;
  font-family: 'OPPO';
  font-weight: 700;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding-bottom: 36px;
}
@media (max-width: 568px) {
  #parameter .container .specifications .nav .maintitle {
    font-size: 16px;
    line-height: 24px;
    padding-bottom: 17px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #parameter .container .specifications .nav .maintitle {
    font-size: 16px;
    line-height: 24px;
    padding-bottom: 16px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #parameter .container .specifications .nav .maintitle {
    font-size: 22px;
    line-height: 24px;
    padding-bottom: 20px;
  }
}
#parameter .container .specifications .nav .box {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding-top: 32px;
  padding-bottom: 8px;
}
@media (max-width: 568px) {
  #parameter .container .specifications .nav .box {
    padding-top: 16px;
    padding-bottom: 6px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #parameter .container .specifications .nav .box {
    padding-top: 16px;
    padding-bottom: 6px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #parameter .container .specifications .nav .box {
    padding-top: 20px;
    padding-bottom: 8px;
  }
}
#parameter .container .specifications .nav .box .left-box {
  width: 440px;
  display: inline-block;
  vertical-align: top;
}
@media (max-width: 568px) {
  #parameter .container .specifications .nav .box .left-box {
    width: 102px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #parameter .container .specifications .nav .box .left-box {
    width: 166px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #parameter .container .specifications .nav .box .left-box {
    width: 264px;
  }
}
#parameter .container .specifications .nav .box .left-box .title {
  font-size: 20px;
  line-height: 28px;
  color: #000;
  letter-spacing: 0;
  font-family: 'Medium';
  opacity: 0.6;
}
@media (max-width: 568px) {
  #parameter .container .specifications .nav .box .left-box .title {
    font-size: 12px;
    line-height: 20px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #parameter .container .specifications .nav .box .left-box .title {
    font-size: 12px;
    line-height: 20px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #parameter .container .specifications .nav .box .left-box .title {
    font-size: 14px;
    line-height: 18px;
  }
}
#parameter .container .specifications .nav .box .right-box {
  width: 760px;
  display: inline-block;
  vertical-align: top;
}
@media (max-width: 568px) {
  #parameter .container .specifications .nav .box .right-box {
    width: 198px;
    padding-right: 15px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #parameter .container .specifications .nav .box .right-box {
    width: 335px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #parameter .container .specifications .nav .box .right-box {
    width: 456px;
  }
}
#parameter .container .specifications .nav .box .dparameter {
  font-size: 20px;
  line-height: 28px;
  color: #000;
  letter-spacing: 0;
  font-family: 'Medium';
  opacity: 0.3;
  word-wrap: break-word;
  padding-bottom: 24px;
}
@media (max-width: 568px) {
  #parameter .container .specifications .nav .box .dparameter {
    font-size: 12px;
    line-height: 20px;
    padding-bottom: 10px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #parameter .container .specifications .nav .box .dparameter {
    font-size: 12px;
    line-height: 20px;
    padding-bottom: 10px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #parameter .container .specifications .nav .box .dparameter {
    font-size: 14px;
    line-height: 18px;
    padding-bottom: 14px;
  }
}
.main-container,
.sub-container,
.narrow-container {
  margin: auto;
}
@media (max-width: 568px) {
  .pure-sm-hidden {
    display: none !important;
  }
  .main-container {
    width: 100%;
  }
  .sub-container {
    width: 9.3em;
  }
  .narrow-container {
    width: 9.3em;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .pure-md-hidden {
    display: none !important;
  }
  .pure-sm-visible {
    display: none !important;
  }
  .main-container {
    width: 87.5vw;
  }
  .sub-container {
    width: 73.69vw;
  }
  .narrow-container {
    width: 65.625vw;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .pure-lg-hidden {
    display: none !important;
  }
  .pure-sm-visible {
    display: none !important;
  }
  .main-container {
    width: 960px;
  }
  .sub-container {
    width: 771px;
  }
  .narrow-container {
    width: 720px;
  }
}
@media (min-width: 1921px) {
  .pure-xl-hidden {
    display: none !important;
  }
  .pure-sm-visible {
    display: none !important;
  }
  .main-container {
    width: 1600px;
  }
  .sub-container {
    width: 1348px;
  }
  .narrow-container {
    width: 1200px;
  }
}
.h1 {
  font-family: 'OPPOFont-Bold';
}
.h2 {
  font-family: 'OPPOFont-Bold';
}
.h1,
.h2 {
  color: #000;
}
.h1.white,
.h2.white {
  color: #fff;
}
.p1 {
  font-family: 'OPPOFont-Bold';
  color: #000;
}
.p1.nowrap {
  white-space: nowrap;
}
.p2 {
  font-family: 'OPPOFont-Regular';
  color: #000;
}
.p2.grey {
  opacity: 0.6;
}
.p3 {
  font-family: 'OPPOFont-Medium';
  color: #000;
  opacity: 0.8;
}
.p3.white {
  color: #fff;
}
.p4 {
  font-family: 'OPPOFont-Medium';
  color: #000;
  opacity: 0.4;
}
.p4.white {
  color: #fff;
}
@media (max-width: 568px) {
  .h1 {
    font-size: 24px;
    line-height: 36px;
    letter-spacing: -0.67px;
  }
  .h2 {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.67px;
  }
  .p1 {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.44px;
  }
  .p2 {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.33px;
  }
  .p3 {
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.28px;
  }
  .p4 {
    font-size: 18px;
    line-height: 20px;
    letter-spacing: -0.5px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .h1 {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.78px;
  }
  .h2 {
    font-size: 26px;
    line-height: 34px;
    letter-spacing: -0.72px;
  }
  .p1 {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.44p;
  }
  .p2 {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.33px;
  }
  .p3 {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.39px;
  }
  .p4 {
    font-size: 18px;
    line-height: 16px;
    letter-spacing: -0.5px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .h1 {
    font-size: 36px;
    line-height: 48px;
    letter-spacing: -1px;
  }
  .h2 {
    font-size: 36px;
    line-height: 48px;
    letter-spacing: -1px;
  }
  .p1 {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.5p;
  }
  .p2 {
    font-size: 12px;
    line-height: 20px;
    letter-spacing: -0.33px;
  }
  .p3 {
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.42px;
  }
  .p4 {
    font-size: 26px;
    line-height: 26px;
    letter-spacing: -0.72px;
  }
}
@media (min-width: 1921px) {
  .h1 {
    font-size: 60px;
    line-height: 80px;
    letter-spacing: -1.67px;
  }
  .h2 {
    font-size: 60px;
    line-height: 80px;
    letter-spacing: -1.67px;
  }
  .p1 {
    font-size: 28px;
    line-height: 44px;
    letter-spacing: -0.78px;
  }
  .p2 {
    font-size: 18px;
    line-height: 32px;
    letter-spacing: -0.5px;
  }
  .p3 {
    font-size: 22px;
    line-height: 36px;
    letter-spacing: -0.61px;
  }
  .p4 {
    font-size: 44px;
    line-height: 40px;
    letter-spacing: -1.22px;
  }
}
.p2 {
  font-family: 'Regular';
  color: #000;
}
.p2.grey {
  opacity: 0.6;
}
.control {
  width: 1200px;
  margin: 0 auto;
}
@media (max-width: 568px) {
  .control {
    width: 81.6vw;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .control {
    width: 65.7vw;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .control {
    width: 720px;
  }
}
.control .headline {
  width: 1200px;
  padding-bottom: 151px;
  padding-top: 272px;
}
@media (max-width: 568px) {
  .control .headline {
    width: 81.6vw;
    padding-bottom: 60px;
    padding-top: 120px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .control .headline {
    width: 65.7vw;
    padding-bottom: 97px;
    padding-top: 127px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .control .headline {
    width: 720px;
    padding-bottom: 113px;
    padding-top: 110px;
  }
}
.control .headline .line {
  font-family: 'OPPO';
  font-weight: 700;
}
.control .detail {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
.control .detail .word-box {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
@media (min-width: 569px) and (max-width: 1024px) {
  .control .detail .word-box {
    width: 200px;
  }
}
.control .detail .word-box .box {
  padding-bottom: 44px;
}
@media (min-width: 569px) and (max-width: 1024px) {
  .control .detail .word-box .box {
    padding-bottom: 23px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .control .detail .word-box .box {
    padding-bottom: 26px;
  }
}
.control .detail .word-box .box .icon {
  width: 50px;
  height: 50px;
}
@media (min-width: 569px) and (max-width: 1024px) {
  .control .detail .word-box .box .icon {
    width: 26px;
    height: 26px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .control .detail .word-box .box .icon {
    width: 30px;
    height: 30px;
  }
}
.control .detail .word-box .box .title {
  padding-top: 2px;
  padding-bottom: 0px;
}
@media (min-width: 569px) and (max-width: 1024px) {
  .control .detail .word-box .box .title {
    padding-top: 0.6px;
    padding-bottom: 3px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .control .detail .word-box .box .title {
    padding-top: 0px;
    padding-bottom: 2px;
  }
}
.control .detail .word-box .box1 {
  padding-top: 24px;
}
@media (min-width: 569px) and (max-width: 1024px) {
  .control .detail .word-box .box1 {
    padding-top: 0;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .control .detail .word-box .box1 {
    padding-top: 21px;
  }
}
.control .detail .word-box .box5 {
  padding-bottom: 203px;
}
@media (min-width: 569px) and (max-width: 1024px) {
  .control .detail .word-box .box5 {
    padding-bottom: 170px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .control .detail .word-box .box5 {
    padding-bottom: 122px;
  }
}
.control .detail .pic-box {
  margin-bottom: 285px;
}
@media (min-width: 569px) and (max-width: 1024px) {
  .control .detail .pic-box {
    margin-bottom: 137px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .control .detail .pic-box {
    margin-bottom: 200px;
  }
}
.control .detail .pic-box .phone {
  width: 935px;
  position: absolute;
  margin-left: -651px;
}
@media (max-width: 568px) {
  .control .detail .pic-box .phone {
    width: 102px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .control .detail .pic-box .phone {
    width: 505px;
    margin-left: -319px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .control .detail .pic-box .phone {
    width: 561px;
    margin-left: -411px;
  }
}
.control {
  width: 1200px;
  margin: 0 auto;
}
@media (max-width: 568px) {
  .control {
    width: 81.6vw;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .control {
    width: 65.7vw;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .control {
    width: 720px;
  }
}
.control .headline {
  font-family: 'OPPO';
  font-weight: 700;
  width: 1200px;
  padding-bottom: 151px;
  padding-top: 272px;
}
@media (max-width: 568px) {
  .control .headline {
    width: 81.6vw;
    padding-bottom: 60px;
    padding-top: 120px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .control .headline {
    width: 65.7vw;
    padding-bottom: 97px;
    padding-top: 127px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .control .headline {
    width: 720px;
    padding-bottom: 113px;
    padding-top: 110px;
  }
}
@media (max-width: 568px) {
  .control .detail {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
  }
}
@media (max-width: 568px) {
  .control .detail .icon {
    width: 30px;
    height: 30px;
  }
}
@media (max-width: 568px) {
  .control .detail .box {
    width: 133px;
    padding-bottom: 32px;
  }
}
.control .detail .title {
  font-family: 'Bold';
}
@media (max-width: 568px) {
  .control .detail .title {
    padding-top: 2px;
    padding-bottom: 6px;
  }
}
.control .detail .describe {
  font-family: 'Regular';
}
@media (max-width: 568px) {
  .control .detail .rightbox {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: end;
            align-items: flex-end;
    margin-bottom: 355px;
  }
}
@media (max-width: 568px) {
  .control .detail .rightbox .box5 {
    padding-bottom: 137px;
  }
}
@media (max-width: 568px) {
  .control .detail .rightbox .pic-box {
    margin-bottom: 0px;
  }
}
@media (max-width: 568px) {
  .control .detail .rightbox .pic-box .phone {
    width: 336px;
    margin-left: -233px;
    margin-top: -36px;
  }
}
#remark .container {
  font-family: 'Regular';
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 240px;
  padding-bottom: 140px;
  padding-bottom: 120px;
}
@media (max-width: 568px) {
  #remark .container {
    width: 83vw;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #remark .container {
    width: 67vw;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #remark .container {
    width: 720px;
    padding-bottom: 240px;
  }
}
#remark .container .mark {
  color: #bdbdbd;
  font-size: 10px;
  line-height: 2;
  text-align: justify;
  word-break: break-all;
}
@media (max-width: 568px) {
  #remark .container .mark {
    line-height: 1.7;
  }
}
.main-wrapper {
  font-size: 16px;
  font-family: 'OPPOFont-Bold', 'OPPOFont-Medium', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}
.main-wrapper .h1 {
  font-family: 'OPPOFont-Bold';
}
.main-wrapper .h2 {
  font-family: 'OPPOFont-Bold';
}
.main-wrapper .h1,
.main-wrapper .h2 {
  color: #000;
}
.main-wrapper .h1.white,
.main-wrapper .h2.white {
  color: #fff;
}
.main-wrapper .p1 {
  font-family: 'OPPOFont-Bold';
  color: #000;
}
.main-wrapper .p1.nowrap {
  white-space: nowrap;
}
.main-wrapper .p2 {
  font-family: 'OPPOFont-Regular';
  color: #000;
}
.main-wrapper .p2.grey {
  opacity: 0.6;
}
.main-wrapper .p3 {
  font-family: 'OPPOFont-Medium';
  color: #000;
  opacity: 0.8;
}
.main-wrapper .p3.white {
  color: #fff;
}
.main-wrapper .p4 {
  font-family: 'OPPOFont-Medium';
  color: #000;
  opacity: 0.4;
}
.main-wrapper .p4.white {
  color: #fff;
}
@media (max-width: 568px) {
  .main-wrapper .h1 {
    font-size: 24px;
    line-height: 36px;
    letter-spacing: -0.67px;
  }
  .main-wrapper .h2 {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.67px;
  }
  .main-wrapper .p1 {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.44px;
  }
  .main-wrapper .p2 {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.33px;
  }
  .main-wrapper .p3 {
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.28px;
  }
  .main-wrapper .p4 {
    font-size: 18px;
    line-height: 20px;
    letter-spacing: -0.5px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .main-wrapper .h1 {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.78px;
  }
  .main-wrapper .h2 {
    font-size: 26px;
    line-height: 34px;
    letter-spacing: -0.72px;
  }
  .main-wrapper .p1 {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.44p;
  }
  .main-wrapper .p2 {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.33px;
  }
  .main-wrapper .p3 {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.39px;
  }
  .main-wrapper .p4 {
    font-size: 18px;
    line-height: 16px;
    letter-spacing: -0.5px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .main-wrapper .h1 {
    font-size: 36px;
    line-height: 48px;
    letter-spacing: -1px;
  }
  .main-wrapper .h2 {
    font-size: 36px;
    line-height: 48px;
    letter-spacing: -1px;
  }
  .main-wrapper .p1 {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.5p;
  }
  .main-wrapper .p2 {
    font-size: 12px;
    line-height: 20px;
    letter-spacing: -0.33px;
  }
  .main-wrapper .p3 {
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.42px;
  }
  .main-wrapper .p4 {
    font-size: 26px;
    line-height: 26px;
    letter-spacing: -0.72px;
  }
}
@media (min-width: 1921px) {
  .main-wrapper .h1 {
    font-size: 60px;
    line-height: 80px;
    letter-spacing: -1.67px;
  }
  .main-wrapper .h2 {
    font-size: 60px;
    line-height: 80px;
    letter-spacing: -1.67px;
  }
  .main-wrapper .p1 {
    font-size: 28px;
    line-height: 44px;
    letter-spacing: -0.78px;
  }
  .main-wrapper .p2 {
    font-size: 18px;
    line-height: 32px;
    letter-spacing: -0.5px;
  }
  .main-wrapper .p3 {
    font-size: 22px;
    line-height: 36px;
    letter-spacing: -0.61px;
  }
  .main-wrapper .p4 {
    font-size: 44px;
    line-height: 40px;
    letter-spacing: -1.22px;
  }
}
.main-wrapper * {
  box-sizing: border-box;
}
.main-wrapper img {
  display: block;
}
.main-wrapper video {
  display: block;
}
.main-wrapper [z-src-bg] {
  background-size: cover;
}
.main-wrapper br {
  font-family: 'Open Sans', '-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Helvetica', 'Roboto', 'Arial', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Jhenghei', 'sans-serif';
}
.sticky-container {
  position: relative;
}
.sticky-container .sticky-item {
  position: relative;
}
main section .out-view .line {
  opacity: 0;
  -webkit-transform: translateY(20%);
          transform: translateY(20%);
  -webkit-transition: opacity ease-out 1s, -webkit-transform ease-out 0.6s;
  transition: opacity ease-out 1s, -webkit-transform ease-out 0.6s;
  transition: opacity ease-out 1s, transform ease-out 0.6s;
  transition: opacity ease-out 1s, transform ease-out 0.6s, -webkit-transform ease-out 0.6s;
}
main section .out-view img {
  opacity: 0;
  -webkit-transform: translateY(20%);
          transform: translateY(20%);
  -webkit-transition: opacity ease-out 1s, -webkit-transform ease-out 0.6s 0.1s;
  transition: opacity ease-out 1s, -webkit-transform ease-out 0.6s 0.1s;
  transition: opacity ease-out 1s, transform ease-out 0.6s 0.1s;
  transition: opacity ease-out 1s, transform ease-out 0.6s 0.1s, -webkit-transform ease-out 0.6s 0.1s;
}
main section .out-view .icon,
main section .out-view .title,
main section .out-view .describe.p2.grey {
  opacity: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: opacity ease-out 1s, -webkit-transform ease-out 0.6s 0.1s;
  transition: opacity ease-out 1s, -webkit-transform ease-out 0.6s 0.1s;
  transition: opacity ease-out 1s, transform ease-out 0.6s 0.1s;
  transition: opacity ease-out 1s, transform ease-out 0.6s 0.1s, -webkit-transform ease-out 0.6s 0.1s;
}
main section .in-view .line {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
main section .in-view img {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
main section .in-view .icon,
main section .in-view .title {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
main section .in-view .describe.p2.grey {
  opacity: 0.6;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.moti,
.moti-2,
.moti-3,
.moti-4,
.moti-5,
.moti-6 {
  opacity: 0 !important;
  -webkit-transition-duration: 0.4s;
          transition-duration: 0.4s;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}
.moti-3 {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.moti-4 {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.moti-5 {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.moti-6 {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.active {
  opacity: 1 !important;
}
.top-none {
  opacity: 1 !important;
}
.bottom-none {
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
}