/* blocks */
/* mixins */
/* functions */
@font-face {
  font-family: "OPPOSans-M";
  src: url(../ttf/opposans-medium-08f2c958880ab2ce3e3b4dfa92ae49e8-2.ttf) format('truetype'), url(https://assorted.downloads.oppo.com/static/assets/products/reno3/styles/font/OPPOSans-Medium-dbe789e189b0bd6628758ce0c6227f56.woff) format('woff');
  font-style: normal;
  font-weight: 200;
}
@font-face {
  font-family: "OPPOSans-H";
  src: url(../ttf/opposans-heavy-95af9d8fbde7be2b381524396ee7a5aa-2.ttf) format('truetype'), url(https://assorted.downloads.oppo.com/static/assets/products/reno3/styles/font/OPPOSans-Heavy-e32257bb747f00043d43f5d1c67e9e25.woff) format('woff');
  font-style: normal;
  font-weight: 200;
}
@font-face {
  font-family: "OPPOSans-B";
  src: url(../ttf/opposans-b-fb8636baa85c454f004143d33d1fe40a-2.ttf) format('truetype'), url(https://assorted.downloads.oppo.com/static/assets/products/reno3/styles/font/OPPOSans-B-ed1951f5e0d47f92eb561ed3773d1a76.woff) format('woff');
  font-style: normal;
  font-weight: 200;
}
.main-container,
.sub-container,
.narrow-container {
  margin: auto;
}
@media (max-width: 568px) {
  .pure-sm-hidden {
    display: none !important;
  }
  .pure-md-visible {
    display: none !important;
  }
  .pure-lg-visible {
    display: none !important;
  }
  .pure-xl-visible {
    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;
  }
  .pure-lg-visible {
    display: none !important;
  }
  .pure-xl-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;
  }
  .pure-md-visible {
    display: none !important;
  }
  .pure-xl-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;
  }
  .pure-md-visible {
    display: none !important;
  }
  .pure-lg-visible {
    display: none !important;
  }
  .main-container {
    width: 1600px;
  }
  .sub-container {
    width: 1348px;
  }
  .narrow-container {
    width: 1200px;
  }
}
.h8 {
  color: #110;
  font-family: 'OPPOSans-B';
}
.h2,
.h3,
.h4,
.h5,
.h6,
.h7 {
  font-family: 'OPPOSans-H';
}
.p1,
.p1-2,
.p1-3,
.p1-4,
.p2,
.p2-1,
.p2-2 {
  font-family: 'OPPOSans-M';
}
.p3,
.btn-4 {
  font-family: 'OPPOSans-M';
}
.btn-1,
.btn-2 {
  font-family: 'OPPOSans-H';
}
.white {
  color: #fff;
}
.white-1 {
  color: rgba(255,255,255,0.6);
}
.gray {
  color: #9b9b9b;
}
.gray1 {
  color: #000;
  opacity: 0.6;
}
.gray2 {
  color: #000;
  opacity: 0.4;
}
.gray3 {
  color: #000;
  opacity: 0.5;
}
.gray4 {
  color: #fff;
  opacity: 0.6;
}
.gray5 {
  color: #fff;
  opacity: 0.4;
}
.grey-1 {
  color: #919191;
}
.grey-2 {
  color: #9b9b9b;
}
.black {
  color: #000;
}
.black-1 {
  color: rgba(0,0,0,0.6);
}
@media (max-width: 568px) {
  .h2 {
    font-size: 34px;
    line-height: 42px;
  }
  .h3 {
    font-size: 34px;
    line-height: 44px;
  }
  .h4 {
    font-size: 16px;
    line-height: 24px;
  }
  .h4.m {
    font-size: 26px;
    line-height: 34px;
  }
  .h5 {
    font-size: 36px;
    line-height: 50px;
  }
  .h5.h5-1 {
    font-size: 26px;
    line-height: 34px;
  }
  .h5.mobile-1 {
    font-size: 26px;
    line-height: 36px;
  }
  .h5.mobile-2 {
    font-size: 18px;
    line-height: 24px;
  }
  .h5.mobile-3 {
    font-size: 32px;
    line-height: 34px;
  }
  .h6 {
    font-size: 34px;
    line-height: 46px;
  }
  .h7 {
    font-size: 14px;
    line-height: 18px;
  }
  .h8 {
    font-size: 7.2vw;
    line-height: 49px;
    letter-spacing: -1.6px;
  }
  .p1 {
    font-size: 12px;
    line-height: 20px;
  }
  .p1-2 {
    font-size: 16px;
    line-height: 24px;
  }
  .p1-3 {
    font-size: 12px;
    line-height: 20px;
    font-family: 'OPPOSans-H';
  }
  .p1-4 {
    font-size: 12px;
    line-height: 17px;
  }
  .p2 {
    font-size: 16px;
    line-height: 27px;
  }
  .p2-1 {
    font-size: 12px;
    line-height: 20px;
  }
  .p2-2 {
    font-size: 16px;
    line-height: 27px;
  }
  .p3 {
    font-size: 12px;
    line-height: 20px;
  }
  .btn-1 {
    font-size: 14px;
    line-height: 27px;
  }
  .btn-2 {
    font-size: 12px;
    line-height: 27px;
  }
  .btn-3 {
    font-size: 14px;
    line-height: 27px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .h2 {
    font-size: 25px;
    line-height: 34px;
  }
  .h3 {
    font-size: 25px;
    line-height: 34px;
  }
  .h4 {
    font-size: 15px;
    line-height: 22px;
  }
  .h5 {
    font-size: 16px;
    line-height: 21px;
  }
  .h5.h5-1 {
    font-size: 12px;
    line-height: 21px;
  }
  .h6 {
    font-size: 22px;
    line-height: 30px;
  }
  .h7 {
    font-size: 9.24px;
    line-height: 12px;
  }
  .h8 {
    font-size: 4vw;
    line-height: 57px;
    letter-spacing: -2px;
  }
  .p1 {
    font-size: 12px;
    line-height: 14px;
  }
  .p1-2 {
    font-size: 16px;
    line-height: 22px;
  }
  .p1-3 {
    font-size: 10px;
    line-height: 14px;
  }
  .p1-4 {
    font-size: 12px;
    line-height: 17px;
  }
  .p2 {
    font-size: 14px;
    line-height: 22px;
  }
  .p2-1 {
    font-size: 10px;
    line-height: 16px;
  }
  .p2-2 {
    font-size: 12px;
    line-height: 18px;
  }
  .p3 {
    font-size: 8px;
    line-height: 8.4px;
  }
  .p3-1 {
    font-size: 10px;
    line-height: 12px;
  }
  .btn-1 {
    font-size: 10px;
    line-height: 14px;
  }
  .btn-2 {
    font-size: 10px;
    line-height: 8.4px;
  }
  .btn-3 {
    font-size: 11px;
    line-height: 16px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .h2 {
    font-size: 36px;
    line-height: 48px;
  }
  .h3 {
    font-size: 36px;
    line-height: 48px;
  }
  .h4 {
    font-size: 16px;
    line-height: 24px;
  }
  .h5 {
    font-size: 22px;
    line-height: 30px;
  }
  .h5.h5-1 {
    font-size: 18px;
    line-height: 30px;
  }
  .h6 {
    font-size: 28px;
    line-height: 38px;
  }
  .h7 {
    font-size: 13.2px;
    line-height: 17px;
  }
  .h8 {
    font-size: 3.35vw;
    line-height: 87px;
    letter-spacing: -3.8px;
  }
  .p1 {
    font-size: 14px;
    line-height: 20px;
  }
  .p1-2 {
    font-size: 16px;
    line-height: 24px;
  }
  .p1-3 {
    font-size: 12px;
    line-height: 20px;
  }
  .p1-4 {
    font-size: 12px;
    line-height: 17px;
  }
  .p2 {
    font-size: 15px;
    line-height: 25px;
  }
  .p2-1 {
    font-size: 12px;
    line-height: 18px;
  }
  .p2-2 {
    font-size: 14px;
    line-height: 22px;
  }
  .p3 {
    font-size: 11px;
    line-height: 12px;
  }
  .p3-1 {
    font-size: 8px;
    line-height: 20px;
  }
  .btn-1 {
    font-size: 12px;
    line-height: 14px;
  }
  .btn-2 {
    font-size: 12px;
    line-height: 16px;
  }
  .btn-3 {
    font-size: 12px;
    line-height: 17px;
  }
}
@media (min-width: 1921px) {
  .h2 {
    font-size: 60px;
    line-height: 78px;
  }
  .h3 {
    font-size: 60px;
    line-height: 78px;
  }
  .h4 {
    font-size: 27px;
    line-height: 40px;
  }
  .h5 {
    font-size: 36px;
    line-height: 50px;
  }
  .h5.h5-1 {
    font-size: 30px;
    line-height: 50px;
  }
  .h6 {
    font-size: 48px;
    line-height: 65px;
  }
  .h7 {
    font-size: 22px;
    line-height: 28px;
  }
  .h8 {
    font-size: 3.35vw;
    line-height: 164px;
    letter-spacing: -5.6px;
  }
  .p1 {
    font-size: 20px;
    line-height: 32px;
  }
  .p1-2 {
    font-size: 27px;
    line-height: 40px;
  }
  .p1-3 {
    font-size: 16px;
    line-height: 32px;
  }
  .p1-4 {
    font-size: 12px;
    line-height: 20px;
  }
  .p2 {
    font-size: 20px;
    line-height: 32px;
  }
  .p2-1 {
    font-size: 12px;
    line-height: 24px;
  }
  .p2-2 {
    font-size: 20px;
    line-height: 32px;
  }
  .p3 {
    font-size: 18px;
    line-height: 20px;
  }
  .p3-1 {
    font-size: 12px;
    line-height: 32px;
  }
  .btn-1 {
    font-size: 17px;
    line-height: 22px;
  }
  .btn-2 {
    font-size: 12px;
    line-height: 16px;
  }
  .btn-3 {
    font-size: 18px;
    line-height: 25px;
  }
}
#kv {
  height: 100vh;
  overflow: hidden;
  background-color: #fff;
  opacity: 0;
}
#kv .content {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}
#kv .content .text {
  position: absolute;
  top: calc(2vh + 60px);
  left: 3.5vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
#kv .content .text .title {
  white-space: nowrap;
}
#kv .content .text img {
  width: 100%;
  height: auto;
}
#kv .content .phone-container {
  position: absolute;
  z-index: 1;
}
#kv .content .kv-sub {
  position: absolute;
  top: 169vw;
  width: 100vw;
  text-align: center;
}
#kv .content .phone-1 img,
#kv .content .phone-2 img {
  width: 100%;
  height: 100%;
}
@media (min-width: 569px) {
  #kv .content .text {
    width: 70vh;
    height: 52.037vh;
  }
  #kv .content .text img {
    height: 42.083vh;
  }
  #kv .content .phone-1 {
    left: calc(50vw - 9.5vh);
    width: 120vh;
    height: 99.5vh;
  }
  #kv .content .phone-2 {
    top: 54vh;
    left: calc(50vw - 106vh);
    width: 160vh;
    height: 72vh;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #kv .content .text {
    width: 60vh;
    height: 44.603vh;
  }
  #kv .content .text img {
    height: 36.07vh;
  }
  #kv .content .phone-1 {
    top: 14vh;
    left: 67vh;
    width: 100vh;
    height: 82vh;
  }
  #kv .content .phone-2 {
    left: -10vh;
    top: 55vh;
    width: 130vh;
    height: 58.56vh;
  }
}
@media (max-width: 568px) {
  #kv {
    height: 185vw;
  }
  #kv .content .text {
    width: 9em;
    height: 5.4em;
    top: 0.6667em;
    left: 0.5em;
  }
  #kv .content .text img {
    height: 5.41em;
  }
  #kv .content .phone-1 {
    top: 30vw;
    right: 0;
    width: 75vw;
    height: 112vw;
  }
  #kv .content .phone-2 {
    top: 108.5vw;
    width: 100vw;
    height: 71.43vw;
    left: 0;
  }
}
@media (max-width: 1024px) and (min-height: 1000px) {
  #kv .content .text {
    width: 28.5vh;
    height: 21.18vh;
  }
  #kv .content .text img {
    height: 17.133vh;
  }
  #kv .content .phone-1 {
    top: 30vh;
    left: 35vh;
    width: 75vh;
    height: 62.3vh;
  }
  #kv .content .phone-2 {
    top: 57.5vh;
    left: -19vh;
    width: 90vh;
    height: 40.5vh;
  }
  #kv .content .kv-sub {
    position: absolute;
    top: 80vh;
    left: calc(50vw - 15.25vh);
    width: auto;
    height: 4vh;
  }
}
.main-container,
.sub-container,
.narrow-container {
  margin: auto;
}
@media (max-width: 568px) {
  .pure-sm-hidden {
    display: none !important;
  }
  .pure-md-visible {
    display: none !important;
  }
  .pure-lg-visible {
    display: none !important;
  }
  .pure-xl-visible {
    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;
  }
  .pure-lg-visible {
    display: none !important;
  }
  .pure-xl-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;
  }
  .pure-md-visible {
    display: none !important;
  }
  .pure-xl-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;
  }
  .pure-md-visible {
    display: none !important;
  }
  .pure-lg-visible {
    display: none !important;
  }
  .main-container {
    width: 1600px;
  }
  .sub-container {
    width: 1348px;
  }
  .narrow-container {
    width: 1200px;
  }
}
#camera-1 {
  background: #f5f5f5;
  position: relative;
  z-index: 3;
}
#camera-1 .h3 {
  letter-spacing: -1px;
}
#camera-1 .stick {
  -webkit-transform-origin: top;
          transform-origin: top;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
}
#camera-1 .sub-container.stick-item {
  width: 50vw;
}
@media (max-width: 568px) {
  #camera-1 .sub-container.stick-item {
    width: 60vw;
  }
}
#camera-1 .title-anime {
  width: 15.6em;
  height: 6.4em;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #camera-1 .title-anime {
    height: 6.5em;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-1 .title-anime {
    width: 10em;
    height: 4.4em;
  }
}
@media (max-width: 568px) {
  #camera-1 .title-anime {
    width: 81.6vw;
    height: 31.75vw;
    left: 9.2vw;
  }
}
#camera-1 .title-front {
  position: relative;
  padding-top: 0;
  background: #fff;
}
#camera-1 .title-front .mobile-cam {
  display: none;
}
#camera-1 .title-front .img-container {
  position: relative;
  left: -12.5vw;
  max-width: 300%;
  margin-top: 2.9em;
  width: 75vw;
  height: 35vw;
}
@media (max-width: 568px) {
  #camera-1 .title-front .img-container {
    height: 55vw;
    left: 12.5vw;
  }
}
#camera-1 .title-front .img-container img {
  width: 100%;
}
#camera-1 .abstract {
  margin: 0 0 2.6em 0;
  padding-top: 8.2em;
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-1 .abstract {
    padding-top: 6.64em;
  }
}
#camera-1 .specs {
  display: -webkit-box;
  display: flex;
}
#camera-1 .specs .item {
  margin-right: 2.9em;
}
#camera-1 .intro-front {
  position: relative;
  padding-top: 3.9em;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-align: center;
          align-items: center;
  background: #f5f5f5;
}
#camera-1 .intro-front .desc {
  opacity: 0.6;
  margin: 1.64em 0 1em 0;
  width: 13.4em;
}
#camera-1 .intro-front .desc-mid {
  margin: 0 auto 3.4em auto;
  width: 15.1556em;
}
#camera-1 .intro-front .img-container-lg {
  margin: auto auto 6em auto;
  width: 19.5em;
  height: 26em;
}
#camera-1 .intro-front .img-container {
  margin-left: 3em;
  width: 14.8em;
  height: 19.7em;
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-1 .intro-front .img-container {
    width: 12em;
    height: 16em;
    margin-left: 1em;
  }
}
#camera-1 .intro-front .desc-horizon {
  width: 31.1em;
  padding-bottom: 6em;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-1 .intro-front .desc-horizon {
    width: 23em;
  }
}
#camera-1 .intro-front .desc-horizon .features {
  width: 13.4em;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  margin: 1.1em 0 0 0;
}
#camera-1 .intro-front .desc-horizon .features .item {
  width: 4.11em;
  margin: 0 2.28em 1.82em 0;
}
#camera-1 .intro-front .desc-horizon .features .item .badge {
  margin-bottom: 0.2em;
  width: 0.84em;
  height: 0.84em;
}
#camera-1 .intro-front .desc-horizon .comment {
  margin-top: -0.82em;
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-1 .sub-container {
    width: 72.625vw;
  }
  #camera-1 .intro-front .desc-mid {
    width: 12.32em;
  }
  #camera-1 .intro-front .img-container-lg {
    width: 14.8em;
    height: 19.72em;
  }
  #camera-1 .intro-front .desc {
    width: 9.2em;
  }
  #camera-1 .intro-front .img-container {
    width: 75vw;
    height: 14.96em;
    margin-left: 0;
  }
  #camera-1 .intro-front .desc-horizon {
    width: 100%;
    -webkit-box-align: start;
            align-items: flex-start;
  }
}
@media (max-width: 568px) {
  #camera-1 .sub-container {
    margin: 0;
    width: 100%;
  }
  #camera-1 .title-front {
    height: auto;
  }
  #camera-1 .title-front .mobile-cam {
    height: 112vw;
    display: block;
    position: relative;
  }
  #camera-1 .title-front .mobile-cam .left-mp {
    position: absolute;
    width: 100vw;
    height: 124vw;
    left: 5vw;
  }
  #camera-1 .title-front .mobile-cam .right-mp {
    position: absolute;
    width: 100vw;
    height: 124vw;
    left: 5vw;
  }
  #camera-1 .title-front .mobile-cam .mobile {
    width: 100vw;
    height: 124vw;
    position: absolute;
    top: 0;
    left: 5vw;
  }
  #camera-1 .text-trans {
    position: relative;
    width: auto;
    height: auto;
    margin: 0 1em;
    overflow: hidden;
  }
  #camera-1 .abstract {
    margin: 0em 1em 3em 1em;
    padding-top: 5.6em;
  }
  #camera-1 .abstract .h3 {
    letter-spacing: -1.8px;
    line-height: 1.31;
    font-size: 32px;
    width: 9.53125em;
  }
  #camera-1 .abstract .part-2 {
    width: 9.53125em;
  }
  #camera-1 .specs {
    position: relative;
    margin: 0 1em 1.2em 1em;
    display: block;
    height: 2em;
  }
  #camera-1 .specs .item {
    position: absolute;
    top: 0;
    left: 0;
    margin-right: 0;
  }
  #camera-1 .specs .h3 {
    font-size: 18px;
  }
  #camera-1 .specs .p2 {
    font-size: 18px;
    font-weight: 900;
  }
  #camera-1 .intro-front {
    padding-top: 1em;
  }
  #camera-1 .intro-front .desc {
    width: auto;
    margin: 1.2em 0 1.3em 0;
  }
  #camera-1 .intro-front .desc-mid {
    margin: 1em 1em 1.5em 1em;
  }
  #camera-1 .intro-front .img-container {
    width: 100vw;
    height: 133vw;
    margin: 0;
  }
  #camera-1 .intro-front .img-container-lg {
    width: 100vw;
    height: 133vw;
    margin-bottom: 3.1667em;
  }
  #camera-1 .intro-front .desc-horizon {
    width: 100%;
    display: block;
    padding-bottom: 2.5em;
  }
  #camera-1 .intro-front .desc-horizon .comment {
    display: block;
    margin: 0.5em 1em 1.5em 1em;
  }
  #camera-1 .intro-front .desc-horizon .features {
    display: block;
    width: 100%;
  }
  #camera-1 .intro-front .desc-horizon .features .item {
    margin-bottom: 1.5em;
    width: 100%;
  }
  #camera-1 .intro-front .content {
    width: auto;
    margin: 0 1em;
  }
}
#camera-2 {
  background: #f5f5f5;
  position: relative;
}
#camera-2 .click-proof {
  cursor: pointer;
}
#camera-2 .nowrap {
  white-space: nowrap;
}
#camera-2 .h3 {
  letter-spacing: -1px;
}
#camera-2 .sub-container.stick-item {
  margin-top: 6.58em;
}
@media (max-width: 568px) {
  #camera-2 .sub-container.stick-item {
    margin-top: 5.02em;
  }
}
#camera-2 .sub-container1.stick-item {
  margin-top: 6.58em;
}
@media (max-width: 568px) {
  #camera-2 .sub-container1.stick-item {
    margin-top: 5.02em;
  }
}
#camera-2 .title-anime {
  margin-bottom: 240px;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #camera-2 .title-anime {
    margin-bottom: 120px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-2 .title-anime {
    margin-bottom: 120px;
  }
}
@media (max-width: 568px) {
  #camera-2 .title-anime {
    margin-bottom: 150px;
  }
}
#camera-2 .stick {
  -webkit-transform-origin: top;
          transform-origin: top;
  position: fixed;
  left: 0em;
  bottom: 0em;
  right: 0;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #camera-2 .stick {
    bottom: 0;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-2 .stick {
    bottom: 0;
  }
}
@media (max-width: 568px) {
  #camera-2 .stick {
    bottom: 7vh;
    left: 1.1667em;
  }
}
#camera-2 .cam2-vmask {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: #fff;
}
#camera-2 .videobox {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-align: center;
          align-items: center;
}
#camera-2 .videobox .cover {
  width: 100%;
  height: auto;
}
#camera-2 .videobox .play {
  position: absolute;
  width: 1.78em;
  top: 8em;
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-2 .videobox .play {
    top: 6em;
  }
}
@media (max-width: 568px) {
  #camera-2 .videobox .play {
    top: 3.5em;
  }
}
#camera-2 .videobox .vmask {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 0.5;
}
#camera-2 .videobox .text {
  position: absolute;
  text-align: center;
  top: 6em;
  font-size: 36px;
  line-height: 50px;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #camera-2 .videobox .text {
    font-size: 22px;
    line-height: 30px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-2 .videobox .text {
    font-size: 16px;
    line-height: 21px;
  }
}
@media (max-width: 568px) {
  #camera-2 .videobox .text {
    font-size: 18px;
    line-height: 24px;
  }
}
@media (max-width: 568px) {
  #camera-2 .videobox .text {
    top: 2em;
  }
}
#camera-2 .bgvideo {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.6s ease-out;
  transition: -webkit-transform 0.6s ease-out;
  transition: transform 0.6s ease-out;
  transition: transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
  -webkit-transform: translateY(100vh);
          transform: translateY(100vh);
  background-color: #000;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
@media (max-width: 568px) {
  #camera-2 .bgvideo {
    padding-top: 50px;
  }
}
#camera-2 .bgvideo.show {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
#camera-2 .bgvideo video {
  width: 80%;
  height: auto;
}
#camera-2 .bgvideo .close {
  cursor: pointer;
  position: absolute;
  z-index: 2;
  right: 15px;
  top: 15px;
  width: 30px;
  height: 30px;
}
@media (max-width: 568px) {
  #camera-2 .bgvideo .close {
    right: 10px;
    top: 10px;
    width: 28px;
    height: 28px;
  }
}
#camera-2 .bgvideo .close img {
  width: 100%;
}
#camera-2 .cam2-mask {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: #fff;
  padding-top: 23vh;
}
@media (max-width: 568px) {
  #camera-2 .cam2-mask {
    padding-top: 44vw;
  }
}
#camera-2 .cam2-container {
  width: 100vw;
}
#camera-2 .cam2-container .cam2-sticky {
  width: 100vw;
  overflow: hidden;
}
#camera-2 .sub-container {
  width: 26.6em;
}
#camera-2 .left-gap {
  margin-left: 2.5em;
}
#camera-2 .push-bottom {
  margin-bottom: 1em;
}
#camera-2 .title-front {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
}
#camera-2 .title-front .sub-container1 {
  width: 100vw;
}
@media (max-width: 1024px) and (min-height: 1000px) {
  #camera-2 .title-front .sub-container {
    width: 73.69vw;
  }
}
#camera-2 .title-front img.title {
  height: 196px;
}
#camera-2 .title-front .specs {
  margin-top: 1em;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
@media (max-width: 1024px) and (min-height: 1000px) {
  #camera-2 .title-front .specs {
    margin-top: 4em;
  }
}
#camera-2 .title-front .specs .data {
  margin-top: 3.8em;
}
#camera-2 .title-front .specs .item {
  margin-bottom: 0.6em;
}
#camera-2 .title-front .img-container {
  width: 48vh;
  height: 60vh;
}
@media (min-width: 1921px) {
  #camera-2 .title-front .img-container {
    width: 48vh;
    height: 60vh;
  }
}
@media (max-width: 1024px) and (min-height: 1000px) {
  #camera-2 .title-front .img-container {
    width: 15em;
    height: 40vh;
  }
}
#camera-2 .intro-back {
  background: #f5f5f5;
  position: relative;
  padding-top: 9.4em;
}
#camera-2 .intro-back .img-container {
  position: relative;
  margin: 1.78em 0 0.7em 0;
  background: #000;
  width: 26.6em;
}
#camera-2 .intro-back .img-container .high-pixel {
  width: 100%;
  height: 100%;
}
#camera-2 .intro-back .img-container .detailed-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#camera-2 .intro-back .img-container .small {
  position: absolute;
  top: 10%;
  left: 57%;
  width: 31%;
  height: 30%;
  border: 2px solid #fff;
}
#camera-2 .intro-back .img-container .mid {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  border: 2px #fff;
  border-style: none solid solid none;
}
#camera-2 .intro-back .img-container .large {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px #fff;
  border-style: none solid solid none;
}
#camera-2 .intro-back .img-container .text-size {
  color: #fff;
  position: absolute;
  right: 0.5em;
  bottom: 0.6em;
}
#camera-2 .intro-back .img-container .shadow-text {
  text-shadow: 0px 0px 8px #000 !important;
}
#camera-2 .intro-back .specs {
  margin-bottom: 7.3em;
}
#camera-2 .intro-back .data {
  margin-top: 1.2em;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
}
#camera-2 .intro-back .data .item {
  width: 50%;
  margin-bottom: 1.2em;
}
#camera-2 .intro-back .data .item .h5 {
  font-weight: 900;
}
#camera-2 .intro-back .data .item .p3 {
  margin-top: 10px;
  font-weight: 900;
}
#camera-2 .intro-back .detail-1 .first .title.left-gap .p2 {
  letter-spacing: -0.3px;
  padding-top: 4.5em;
  width: 40em;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #camera-2 .intro-back .detail-1 .first .title.left-gap .p2 {
    width: 30em;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-2 .intro-back .detail-1 .first .title.left-gap .p2 {
    width: 22.5em;
  }
}
@media (max-width: 568px) {
  #camera-2 .intro-back .detail-1 .first .title.left-gap .p2 {
    width: 100%;
  }
}
#camera-2 .intro-back .detail-1 .first .img-container {
  height: 20em;
}
#camera-2 .intro-back .detail-1 .second .img-container {
  height: 19.8em;
}
#camera-2 .intro-back .detail-2 {
  margin-top: 4.95em;
}
#camera-2 .intro-back .detail-2 .desc {
  margin: 2.35em 0 1.2em 0;
  width: 15.7em;
}
#camera-2 .intro-back .detail-2 .comment {
  display: none;
}
#camera-2 .intro-back .detail-2 .margin-top {
  white-space: nowrap;
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-2 .intro-back .detail-2 .margin-top {
    margin-top: 2em;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #camera-2 .intro-back .detail-2 .margin-top {
    margin-top: 2em;
  }
}
@media (min-width: 1921px) {
  #camera-2 .intro-back .detail-2 .margin-top {
    margin-top: 2.33em;
  }
}
#camera-2 .intro-back .detail-2 .switch-button-container {
  background-color: #979797;
  margin-top: 1em;
  margin-bottom: 6em;
  border-radius: 0.55em;
  padding: 0.1em;
  height: 1.1em;
  display: -webkit-box;
  display: flex;
  width: 423px;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #camera-2 .intro-back .detail-2 .switch-button-container {
    width: 254px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-2 .intro-back .detail-2 .switch-button-container {
    width: 9.4em;
  }
}
@media (max-width: 568px) {
  #camera-2 .intro-back .detail-2 .switch-button-container {
    width: 11.4em;
  }
}
#camera-2 .intro-back .detail-2 .switch-button-container .switch-button {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  width: 2.3em;
  font-weight: 600;
  padding: 0 0.55em 0 0.55em;
}
#camera-2 .intro-back .detail-2 .switch-button-container .switch-button .btn-1 {
  color: #000;
}
#camera-2 .intro-back .detail-2 .switch-button-container .switch-button:first-child {
  padding-left: 0.55em;
}
#camera-2 .intro-back .detail-2 .switch-button-container .switch-button:last-child {
  padding-right: 0.55em;
}
#camera-2 .intro-back .detail-2 .switch-button-container .switch-button.active {
  height: 0.9em;
  border-radius: 0.55em;
}
#camera-2 .intro-back .detail-2 .switch-button-container .switch-button.active .btn-1 {
  color: #fff;
}
#camera-2 .intro-back .light-group {
  position: relative;
  height: 20em;
}
#camera-2 .intro-back .light-group .light-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#camera-2 .intro-back .light-group .light-wrapper .light-position {
  position: absolute;
  top: 0;
  left: 0;
}
#camera-2 .intro-back .light-group .light-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
#camera-2 .intro-back .light-group .light-wrapper img.active {
  opacity: 1;
}
#camera-2 .intro-dark {
  padding: 7.6em 0;
}
#camera-2 .intro-dark .detail-2 .title {
  margin-top: 11.42em;
  margin-bottom: 4.31em;
}
#camera-2 .intro-dark .img-container {
  width: 26.6667em;
  height: 19.2444em;
  position: relative;
}
#camera-2 .intro-dark .img-container .dark {
  width: 100%;
  height: 100%;
  position: absolute;
}
#camera-2 .intro-dark .img-container .title {
  padding-top: 11.5556em;
  position: absolute;
}
@media (max-width: 568px) {
  #camera-2 .intro-dark .img-container .title {
    padding-top: 61px;
  }
}
#camera-2 .intro-dark .desc {
  padding-right: 5.2667em;
}
@media (max-width: 568px) {
  #camera-2 .intro-dark .desc {
    padding-right: 0;
  }
}
#camera-2 .intro-dark .desc .p2 {
  margin-top: 1.4444em;
  width: 43em;
}
@media (max-width: 568px) {
  #camera-2 .intro-dark .desc .p2 {
    width: 100%;
  }
}
#camera-2 .intro-dark .desc .p1-4 {
  margin-top: 1.6889em;
  width: 49.16em;
}
@media (max-width: 568px) {
  #camera-2 .intro-dark .desc .p1-4 {
    width: 100%;
  }
}
#camera-2 .detail-3 {
  width: 35.56em;
  height: 23.76em;
  margin: 2em auto 0 auto;
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-2 .detail-3 {
    width: 100vw;
  }
}
@media (max-width: 568px) {
  #camera-2 .detail-3 {
    width: 100vw;
    height: 72.5vw;
  }
}
#camera-2 .detail-3 .text {
  display: -webkit-box;
  display: flex;
}
#camera-2 .detail-3 .text .off,
#camera-2 .detail-3 .text .on {
  text-align: center;
  position: relative;
  width: 17.78em;
  margin-top: -2.8em;
}
@media (max-width: 568px) {
  #camera-2 .detail-3 .text .off,
  #camera-2 .detail-3 .text .on {
    margin-top: -1em;
  }
}
#camera-2 .reno-link {
  position: relative;
  margin-top: 6.9em;
  width: 26.6em;
  height: 15.4em;
  border-radius: 8px;
}
#camera-2 .reno-link .anime-1 {
  -webkit-animation: progress-link 0.8s linear 0s 1 normal forwards;
          animation: progress-link 0.8s linear 0s 1 normal forwards;
}
#camera-2 .reno-link .title {
  position: relative;
  padding-top: 5.6em;
}
#camera-2 .reno-link .background-link {
  border-radius: 0.3em;
  background-position: center;
  position: absolute;
  width: 26.6em;
  height: 15.4em;
  opacity: 0.5;
}
#camera-2 .reno-link .h4.mobile {
  font-size: 22px;
  line-height: 1.39;
  letter-spacing: -0.6px;
}
#camera-2 .reno-link .link-btn {
  display: -webkit-box;
  display: flex;
  margin-top: 0.7em;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
@media (max-width: 568px) {
  #camera-2 .reno-link .link-btn {
    width: 156px;
    height: 46px;
    border-radius: 28px;
    border: 1.6px solid #979797;
  }
}
@media (min-width: 1921px) {
  #camera-2 .reno-link .link-btn {
    width: 233px;
    height: 57px;
    border-radius: 28.5px;
    border: 2px solid #979797;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #camera-2 .reno-link .link-btn {
    width: 168px;
    height: 48px;
    border-radius: 24px;
    border: 1.2px solid #979797;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-2 .reno-link .link-btn {
    width: 140px;
    height: 36px;
    border-radius: 18px;
    border: 1.2px solid #979797;
  }
}
@media (max-width: 568px) {
  #camera-2 .reno-link .link-btn .link {
    margin-left: 4px;
    width: 12px;
    height: 12px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-2 .reno-link .link-btn .link {
    margin-left: 4px;
    width: 10px;
    height: 10px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #camera-2 .reno-link .link-btn .link {
    margin-left: 4px;
    width: 12px;
    height: 12px;
  }
}
@media (min-width: 1921px) {
  #camera-2 .reno-link .link-btn .link {
    margin-left: 6px;
    width: 16px;
    height: 16px;
  }
}
#camera-2 .reno-link .link-btn .p2 {
  -webkit-box-align: center;
          align-items: center;
  color: #d0d0d0;
}
@media (max-width: 568px) {
  #camera-2 .reno-link .link-btn .p2 {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #camera-2 .reno-link .link-btn .p2 {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
    line-height: 48px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-2 .reno-link .link-btn .p2 {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
    line-height: 36px;
    font-size: 12px;
  }
}
@media (min-width: 1921px) {
  #camera-2 .reno-link .link-btn .p2 {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
    line-height: 57px;
  }
}
@media (max-width: 568px) {
  #camera-2 {
    padding-bottom: 5em;
  }
  #camera-2 .cam2-mask,
  #camera-2 .sub-container {
    margin: 0;
    width: 100vw !important;
  }
  #camera-2 .left-gap {
    margin: 1em 1em 1em 1em;
  }
  #camera-2 .left-gap1 {
    margin: 1em 1em 1em 1em;
  }
  #camera-2 .title-front {
    width: 100vw;
    position: relative;
    top: 0;
    right: 0;
    padding-left: 1.1667em;
    background: #fff;
  }
  #camera-2 .title-front .abstract {
    width: 9em;
  }
  #camera-2 .title-front .specs {
    overflow: hidden;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
  }
  #camera-2 .title-front .specs .data {
    margin-top: 3.4em;
    height: 10.0667em;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-pack: justify;
            justify-content: space-between;
  }
  #camera-2 .title-front .specs .item {
    margin-bottom: 0.6em;
  }
  #camera-2 .title-front .specs .item .h4 {
    font-size: 18px;
    font-weight: 600;
  }
  #camera-2 .title-front .img-container {
    margin-left: 0.5em;
    width: 15em;
    height: 21em;
  }
  #camera-2 .title-front .img-mp {
    width: 7em;
    height: 17em;
  }
  #camera-2 .title-front .img-mp img {
    width: 2560px;
    position: absolute;
  }
  #camera-2 .intro-back {
    padding-top: 3.76em;
  }
  #camera-2 .intro-back .specs {
    margin-bottom: 4em;
  }
  #camera-2 .intro-back .detail-1 .first .img-container {
    width: 100vw;
    height: 75.2vw;
  }
  #camera-2 .intro-back .detail-1 .second .img-container {
    width: 100vw;
    height: 69vw;
  }
  #camera-2 .intro-back .second {
    margin-top: 2em;
  }
  #camera-2 .intro-back .second .left-gap1 .p2 {
    margin-bottom: 37px;
  }
  #camera-2 .intro-back .img-container {
    width: 100%;
  }
  #camera-2 .intro-back .img-container .mid {
    border: 2px solid #fff;
  }
  #camera-2 .intro-back .img-container .large {
    border: 2px solid #fff;
  }
  #camera-2 .intro-back .data .item {
    width: auto;
    margin-bottom: 1.2em;
    margin-right: 1em;
  }
  #camera-2 .intro-back .data .item .h5 {
    margin: 5px 0;
    max-width: 6.2em;
    letter-spacing: -0.8px;
    font-weight: 900;
  }
  #camera-2 .intro-back .data .item .p3 {
    margin-top: 10px;
    font-weight: 900;
    max-width: 20em;
  }
  #camera-2 .intro-back .data .item .smaller {
    font-size: 28px;
  }
  #camera-2 .intro-back .detail-2 {
    margin-top: 4.467em;
  }
  #camera-2 .intro-back .detail-2 .desc {
    width: auto;
    margin-top: 37px;
  }
  #camera-2 .intro-back .detail-2 .comment {
    display: block;
  }
  #camera-2 .intro-back .detail-2 .light-group {
    position: relative;
    height: 14em;
  }
  #camera-2 .intro-back .detail-2 .light-group .light-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
  }
  #camera-2 .intro-back .detail-2 .light-group .light-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    opacity: 0;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
  }
  #camera-2 .intro-back .detail-2 .light-group .light-wrapper img.active {
    opacity: 1;
  }
  #camera-2 .intro-back .detail-2 .switch-button-container {
    margin-bottom: 0;
    border-radius: 23px;
    padding: 3px 3px;
    height: 46px;
  }
  #camera-2 .intro-back .detail-2 .switch-button-container .switch-button {
    padding: 0 0.55em 0 0.55em;
    width: 2.8em;
  }
  #camera-2 .intro-back .detail-2 .switch-button-container .switch-button .btn-1 {
    line-height: 40px;
    color: #000;
  }
  #camera-2 .intro-back .detail-2 .switch-button-container .switch-button:first-child {
    padding-left: 0.55em;
  }
  #camera-2 .intro-back .detail-2 .switch-button-container .switch-button:last-child {
    padding-right: 0.55em;
  }
  #camera-2 .intro-back .detail-2 .switch-button-container .switch-button.active {
    height: 40px;
    border-radius: 20px;
  }
  #camera-2 .intro-back .detail-2 .switch-button-container .switch-button.active .btn-1 {
    line-height: 40px;
    color: #fff;
  }
  #camera-2 .intro-dark {
    padding: 4em 0 0 0;
  }
  #camera-2 .intro-dark .detail-2 .title.left-gap {
    margin-top: 5.833em;
  }
  #camera-2 .intro-dark .detail-2 .img-container {
    width: 100vw;
    height: 73vw;
    background-position: center;
  }
  #camera-2 .intro-dark .detail-2 .img-container .title {
    padding-top: 1em;
  }
  #camera-2 .intro-dark .detail-2 .img-container .title .gray {
    color: #808080;
  }
  #camera-2 .intro-dark .detail-2 .desc {
    padding-right: 0;
  }
}
@media (max-width: 568px) {
  .push-top {
    bottom: 0;
  }
}
@-webkit-keyframes progress-link {
  from {
    background-size: 100%;
  }
  to {
    background-size: 110%;
  }
}
@keyframes progress-link {
  from {
    background-size: 100%;
  }
  to {
    background-size: 110%;
  }
}
@-webkit-keyframes progress-link-2 {
  from {
    background-size: 110%;
  }
  to {
    background-size: 120%;
  }
}
@keyframes progress-link-2 {
  from {
    background-size: 110%;
  }
  to {
    background-size: 120%;
  }
}
.main-container,
.sub-container,
.narrow-container {
  margin: auto;
}
@media (max-width: 568px) {
  .pure-sm-hidden {
    display: none !important;
  }
  .pure-md-visible {
    display: none !important;
  }
  .pure-lg-visible {
    display: none !important;
  }
  .pure-xl-visible {
    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;
  }
  .pure-lg-visible {
    display: none !important;
  }
  .pure-xl-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;
  }
  .pure-md-visible {
    display: none !important;
  }
  .pure-xl-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;
  }
  .pure-md-visible {
    display: none !important;
  }
  .pure-lg-visible {
    display: none !important;
  }
  .main-container {
    width: 1600px;
  }
  .sub-container {
    width: 1348px;
  }
  .narrow-container {
    width: 1200px;
  }
}
.h8 {
  color: #110;
  font-family: 'OPPOSans-B';
}
.h2,
.h3,
.h4,
.h5,
.h6,
.h7 {
  font-family: 'OPPOSans-H';
}
.p1,
.p1-2,
.p1-3,
.p1-4,
.p2,
.p2-1,
.p2-2 {
  font-family: 'OPPOSans-M';
}
.p3,
.btn-4 {
  font-family: 'OPPOSans-M';
}
.btn-1,
.btn-2 {
  font-family: 'OPPOSans-H';
}
.white {
  color: #fff;
}
.white-1 {
  color: rgba(255,255,255,0.6);
}
.gray {
  color: #9b9b9b;
}
.gray1 {
  color: #000;
  opacity: 0.6;
}
.gray2 {
  color: #000;
  opacity: 0.4;
}
.gray3 {
  color: #000;
  opacity: 0.5;
}
.gray4 {
  color: #fff;
  opacity: 0.6;
}
.gray5 {
  color: #fff;
  opacity: 0.4;
}
.grey-1 {
  color: #919191;
}
.grey-2 {
  color: #9b9b9b;
}
.black {
  color: #000;
}
.black-1 {
  color: rgba(0,0,0,0.6);
}
@media (max-width: 568px) {
  .h2 {
    font-size: 34px;
    line-height: 42px;
  }
  .h3 {
    font-size: 34px;
    line-height: 44px;
  }
  .h4 {
    font-size: 16px;
    line-height: 24px;
  }
  .h4.m {
    font-size: 26px;
    line-height: 34px;
  }
  .h5 {
    font-size: 36px;
    line-height: 50px;
  }
  .h5.h5-1 {
    font-size: 26px;
    line-height: 34px;
  }
  .h5.mobile-1 {
    font-size: 26px;
    line-height: 36px;
  }
  .h5.mobile-2 {
    font-size: 18px;
    line-height: 24px;
  }
  .h5.mobile-3 {
    font-size: 32px;
    line-height: 34px;
  }
  .h6 {
    font-size: 34px;
    line-height: 46px;
  }
  .h7 {
    font-size: 14px;
    line-height: 18px;
  }
  .h8 {
    font-size: 7.2vw;
    line-height: 49px;
    letter-spacing: -1.6px;
  }
  .p1 {
    font-size: 12px;
    line-height: 20px;
  }
  .p1-2 {
    font-size: 16px;
    line-height: 24px;
  }
  .p1-3 {
    font-size: 12px;
    line-height: 20px;
    font-family: 'OPPOSans-H';
  }
  .p1-4 {
    font-size: 12px;
    line-height: 17px;
  }
  .p2 {
    font-size: 16px;
    line-height: 27px;
  }
  .p2-1 {
    font-size: 12px;
    line-height: 20px;
  }
  .p2-2 {
    font-size: 16px;
    line-height: 27px;
  }
  .p3 {
    font-size: 12px;
    line-height: 20px;
  }
  .btn-1 {
    font-size: 14px;
    line-height: 27px;
  }
  .btn-2 {
    font-size: 12px;
    line-height: 27px;
  }
  .btn-3 {
    font-size: 14px;
    line-height: 27px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .h2 {
    font-size: 25px;
    line-height: 34px;
  }
  .h3 {
    font-size: 25px;
    line-height: 34px;
  }
  .h4 {
    font-size: 15px;
    line-height: 22px;
  }
  .h5 {
    font-size: 16px;
    line-height: 21px;
  }
  .h5.h5-1 {
    font-size: 12px;
    line-height: 21px;
  }
  .h6 {
    font-size: 22px;
    line-height: 30px;
  }
  .h7 {
    font-size: 9.24px;
    line-height: 12px;
  }
  .h8 {
    font-size: 4vw;
    line-height: 57px;
    letter-spacing: -2px;
  }
  .p1 {
    font-size: 12px;
    line-height: 14px;
  }
  .p1-2 {
    font-size: 16px;
    line-height: 22px;
  }
  .p1-3 {
    font-size: 10px;
    line-height: 14px;
  }
  .p1-4 {
    font-size: 12px;
    line-height: 17px;
  }
  .p2 {
    font-size: 14px;
    line-height: 22px;
  }
  .p2-1 {
    font-size: 10px;
    line-height: 16px;
  }
  .p2-2 {
    font-size: 12px;
    line-height: 18px;
  }
  .p3 {
    font-size: 8px;
    line-height: 8.4px;
  }
  .p3-1 {
    font-size: 10px;
    line-height: 12px;
  }
  .btn-1 {
    font-size: 10px;
    line-height: 14px;
  }
  .btn-2 {
    font-size: 10px;
    line-height: 8.4px;
  }
  .btn-3 {
    font-size: 11px;
    line-height: 16px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .h2 {
    font-size: 36px;
    line-height: 48px;
  }
  .h3 {
    font-size: 36px;
    line-height: 48px;
  }
  .h4 {
    font-size: 16px;
    line-height: 24px;
  }
  .h5 {
    font-size: 22px;
    line-height: 30px;
  }
  .h5.h5-1 {
    font-size: 18px;
    line-height: 30px;
  }
  .h6 {
    font-size: 28px;
    line-height: 38px;
  }
  .h7 {
    font-size: 13.2px;
    line-height: 17px;
  }
  .h8 {
    font-size: 3.35vw;
    line-height: 87px;
    letter-spacing: -3.8px;
  }
  .p1 {
    font-size: 14px;
    line-height: 20px;
  }
  .p1-2 {
    font-size: 16px;
    line-height: 24px;
  }
  .p1-3 {
    font-size: 12px;
    line-height: 20px;
  }
  .p1-4 {
    font-size: 12px;
    line-height: 17px;
  }
  .p2 {
    font-size: 15px;
    line-height: 25px;
  }
  .p2-1 {
    font-size: 12px;
    line-height: 18px;
  }
  .p2-2 {
    font-size: 14px;
    line-height: 22px;
  }
  .p3 {
    font-size: 11px;
    line-height: 12px;
  }
  .p3-1 {
    font-size: 8px;
    line-height: 20px;
  }
  .btn-1 {
    font-size: 12px;
    line-height: 14px;
  }
  .btn-2 {
    font-size: 12px;
    line-height: 16px;
  }
  .btn-3 {
    font-size: 12px;
    line-height: 17px;
  }
}
@media (min-width: 1921px) {
  .h2 {
    font-size: 60px;
    line-height: 78px;
  }
  .h3 {
    font-size: 60px;
    line-height: 78px;
  }
  .h4 {
    font-size: 27px;
    line-height: 40px;
  }
  .h5 {
    font-size: 36px;
    line-height: 50px;
  }
  .h5.h5-1 {
    font-size: 30px;
    line-height: 50px;
  }
  .h6 {
    font-size: 48px;
    line-height: 65px;
  }
  .h7 {
    font-size: 22px;
    line-height: 28px;
  }
  .h8 {
    font-size: 3.35vw;
    line-height: 164px;
    letter-spacing: -5.6px;
  }
  .p1 {
    font-size: 20px;
    line-height: 32px;
  }
  .p1-2 {
    font-size: 27px;
    line-height: 40px;
  }
  .p1-3 {
    font-size: 16px;
    line-height: 32px;
  }
  .p1-4 {
    font-size: 12px;
    line-height: 20px;
  }
  .p2 {
    font-size: 20px;
    line-height: 32px;
  }
  .p2-1 {
    font-size: 12px;
    line-height: 24px;
  }
  .p2-2 {
    font-size: 20px;
    line-height: 32px;
  }
  .p3 {
    font-size: 18px;
    line-height: 20px;
  }
  .p3-1 {
    font-size: 12px;
    line-height: 32px;
  }
  .btn-1 {
    font-size: 17px;
    line-height: 22px;
  }
  .btn-2 {
    font-size: 12px;
    line-height: 16px;
  }
  .btn-3 {
    font-size: 18px;
    line-height: 25px;
  }
}
#sleek-1 {
  position: relative;
  margin-top: -1px;
  z-index: 2;
  -webkit-transition: background-color 0.3s linear;
  transition: background-color 0.3s linear;
}
#sleek-1 .white-font {
  color: #fff;
}
#sleek-1 .push-left {
  -webkit-transform: translateX(-8px);
          transform: translateX(-8px);
}
@media (min-width: 569px) and (max-width: 1024px) {
  #sleek-1 .push-left {
    -webkit-transform: translateX(-6px);
            transform: translateX(-6px);
  }
}
@media (min-width: 1921px) {
  #sleek-1 .push-left {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
}
#sleek-1 .desc {
  opacity: 0.6;
}
#sleek-1 .inline {
  display: inline-block;
}
#sleek-1 .fixed {
  position: fixed;
  bottom: 0;
  left: 0;
}
#sleek-1 .sticky1 {
  width: 100vw;
}
#sleek-1 .sticky1 .sticky-item1 {
  width: 100vw;
  overflow: visible;
  padding-top: 10em;
}
@media (max-width: 568px) {
  #sleek-1 .sticky1 .sticky-item1 {
    overflow: visible;
    padding-top: 118px;
  }
}
#sleek-1 .content {
  background-color: #fff;
  margin: 0 auto;
}
#sleek-1 .content .narrow-1 {
  padding-left: 2.48em;
}
@media (max-width: 568px) {
  #sleek-1 .content .narrow-1 {
    padding-left: 0;
  }
}
#sleek-1 .content .narrow-container {
  margin: 0 auto;
}
@media (max-width: 568px) {
  #sleek-1 .content .narrow-container {
    padding-top: 68px;
  }
}
#sleek-1 .content .narrow-container .title-anime {
  margin-bottom: 317px;
  white-space: nowrap;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #sleek-1 .content .narrow-container .title-anime {
    margin-bottom: 200px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #sleek-1 .content .narrow-container .title-anime {
    margin-bottom: 96px;
  }
}
@media (max-width: 568px) {
  #sleek-1 .content .narrow-container .title-anime {
    margin-bottom: 138px;
    height: 55px;
  }
}
#sleek-1 .content .narrow-container .intro-container {
  padding-left: 2.48em;
  position: relative;
}
#sleek-1 .content .narrow-container .intro-container .sub-title-1 {
  margin-top: 4.8em;
}
#sleek-1 .content .narrow-container .intro-container .desc {
  margin-top: 1.27em;
  width: 35em;
}
#sleek-1 .content .narrow-container .intro-container .main-title {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 3em;
}
#sleek-1 .content .narrow-container .intro-container .main-title .masked {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#697dff), color-stop(33.3%, #697dff), color-stop(66.6%, #75c5f4), to(#75c5f4));
  background: -webkit-linear-gradient(#697dff 0%, #697dff 33.3%, #75c5f4 66.6%, #75c5f4 100%);
  background: linear-gradient(#697dff 0%, #697dff 33.3%, #75c5f4 66.6%, #75c5f4 100%);
  -webkit-transition: -webkit-transform 0.6s ease-in;
  transition: -webkit-transform 0.6s ease-in;
  transition: transform 0.6s ease-in;
  transition: transform 0.6s ease-in, -webkit-transform 0.6s ease-in;
  z-index: 0;
}
#sleek-1 .content .narrow-container .intro-container .main-title .title {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #fff;
}
#sleek-1 .content .picture-container {
  margin: 2.08em auto 0 auto;
  position: relative;
}
#sleek-1 .content .picture-container.no-margin {
  margin-top: 0;
}
#sleek-1 .content .picture-container .phone {
  width: 100%;
}
#sleek-1 .content .picture-container .desc-wrapper {
  position: absolute;
  top: 2.44em;
  left: 1.84em;
}
#sleek-1 .content .picture-container .desc-wrapper .wrapper2 {
  margin-top: 1.1em;
}
#sleek-1 .content .picture-container .desc-wrapper .sub {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}
@media (min-width: 1921px) {
  #sleek-1 .content .picture-container .desc-wrapper .sub {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}
@media (max-width: 568px) {
  #sleek-1 .content .picture-container .desc-wrapper .sub {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
}
#sleek-1 .content .picture-container .image-group {
  z-index: 1;
  position: relative;
  width: 100%;
}
#sleek-1 .content .picture-container .image-group > :not(:first-child) {
  position: absolute;
  top: 0;
}
#sleek-1 .content .picture-container .image-group .phone {
  opacity: 0;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}
#sleek-1 .content .picture-container .image-group .phone.visible {
  opacity: 1;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -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;
}
#sleek-1 .content .picture-container .pic {
  width: 100%;
}
#sleek-1 .content .picture-container .pic-2 {
  width: 100%;
}
#sleek-1 .content .picture-container .switch-button-container {
  overflow: visible;
  margin-top: 5px;
  z-index: 2;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}
#sleek-1 .content .picture-container .switch-button-container .option {
  width: 5em;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-align: center;
          align-items: center;
  cursor: pointer;
}
#sleek-1 .content .picture-container .switch-button-container .option .p3 {
  white-space: nowrap;
}
#sleek-1 .content .picture-container .switch-button-container .option .circle {
  border-radius: 50%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  width: 0.9778em;
  height: 0.9778em;
  margin-top: 0.2222em;
}
@media (max-width: 568px) {
  #sleek-1 .content .picture-container .switch-button-container .option .circle {
    width: 30px;
    height: 30px;
  }
}
#sleek-1 .content .picture-container .switch-button-container .option .white-circle {
  border: 2px solid #fff !important;
}
#sleek-1 .content .picture-container .switch-button-container .option .circle-1.color {
  border: 1px solid #979797;
}
@media (min-width: 1921px) {
  #sleek-1 .content .picture-container .switch-button-container .option .circle-1.color {
    border: 2px solid #979797;
  }
}
#sleek-1 .content .picture-container .switch-button-container .option .circle-2.color {
  border: 1px solid #d7e4f5;
}
@media (min-width: 1921px) {
  #sleek-1 .content .picture-container .switch-button-container .option .circle-2.color {
    border: 2px solid #d7e4f5;
  }
}
#sleek-1 .content .picture-container .switch-button-container .option .circle-3.color {
  border: 1px solid #53a0fd;
}
@media (min-width: 1921px) {
  #sleek-1 .content .picture-container .switch-button-container .option .circle-3.color {
    border: 1px solid #53a0fd;
  }
}
#sleek-1 .content .picture-container .switch-button-container .option .sub {
  border-radius: 50%;
  width: 0.7556em;
  height: 0.7556em;
}
@media (max-width: 568px) {
  #sleek-1 .content .picture-container .switch-button-container .option .sub {
    width: 24px;
    height: 24px;
  }
}
#sleek-1 .content .picture-container .switch-button-container .option .sub-1 {
  background-image: -webkit-linear-gradient(225deg, #a5afc5 0%, #0d0d0d 100%);
  background-image: linear-gradient(225deg, #a5afc5 0%, #0d0d0d 100%);
}
#sleek-1 .content .picture-container .switch-button-container .option .sub-2 {
  background-image: -webkit-linear-gradient(32deg, #c5c1ec 0%, #d7e4f5 63%, #cce8d0 100%);
  background-image: linear-gradient(58deg, #c5c1ec 0%, #d7e4f5 63%, #cce8d0 100%);
}
#sleek-1 .content .picture-container .switch-button-container .option .sub-3 {
  background-image: -webkit-linear-gradient(32deg, #3023ae 0%, #53a0fd 47%, #c9f6fe 100%);
  background-image: linear-gradient(58deg, #3023ae 0%, #53a0fd 47%, #c9f6fe 100%);
}
#sleek-1 .sticky1 .picture-container .pic {
  height: 800px;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #sleek-1 .sticky1 .picture-container .pic {
    height: 480px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #sleek-1 .sticky1 .picture-container .pic {
    height: 13.48em;
  }
}
#sleek-1 .section-1 .picture-container {
  height: 555px;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #sleek-1 .section-1 .picture-container {
    height: 340px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #sleek-1 .section-1 .picture-container {
    height: 9.68em;
  }
}
@media (max-width: 568px) {
  #sleek-1 .section-1 .picture-container {
    height: 8.8333em;
  }
}
#sleek-1 .section-0-header {
  padding-left: 2.48em;
}
@media (max-width: 568px) {
  #sleek-1 .section-0-header {
    padding-left: 0;
  }
}
@media (min-width: 1921px) {
  #sleek-1 .section-0-header .desc {
    margin-top: 71px;
    width: 730px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #sleek-1 .section-0-header .desc {
    margin-top: 42px;
    width: 438px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #sleek-1 .section-0-header .desc {
    margin-top: 0.96em;
    width: 12.16em;
  }
}
@media (max-width: 568px) {
  #sleek-1 .section-0-header .desc {
    margin-top: 1.2333em;
  }
}
#sleek-1 .section-2 .header {
  padding-left: 2.48em;
}
@media (max-width: 568px) {
  #sleek-1 .section-2 .header {
    padding-left: 0;
  }
}
#sleek-1 .section-2 .body {
  display: -webkit-box;
  display: flex;
}
#sleek-1 .section-2 .body .item > :nth-child(2) {
  white-space: nowrap;
}
@media (min-width: 1921px) {
  #sleek-1 .section-1 .desc {
    margin-top: 71px !important;
    width: 730px !important;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #sleek-1 .content {
    margin-bottom: 200px;
  }
  #sleek-1 .content .narrow-container .intro-container .desc {
    margin-top: 44px;
    width: 438px;
  }
  #sleek-1 .content .narrow-container .switch-button-container .option .sub {
    width: 24px;
    height: 24px;
  }
  #sleek-1 .content .narrow-container .switch-button-container .option .circle {
    width: 30px;
    height: 30px;
    margin-top: 8px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #sleek-1 .switch-button-container .option .sub {
    width: 0.72em;
    height: 0.72em;
  }
  #sleek-1 .switch-button-container .option .circle {
    width: 0.88em;
    height: 0.88em;
    margin-top: 0.2em;
  }
  #sleek-1 .desc {
    width: 360px !important;
  }
}
@media (max-width: 568px) {
  #sleek-1 .content .narrow-container {
    width: 10.1em;
    padding-top: 0;
  }
  #sleek-1 .content .narrow-container .intro-container {
    padding-left: 0;
  }
  #sleek-1 .content .narrow-container .intro-container .sub-title-1 {
    margin-top: 3.3em;
  }
  #sleek-1 .content .narrow-container .intro-container .sub-title-notop {
    margin-top: -1.2em;
  }
  #sleek-1 .content .narrow-container .intro-container .main-title {
    height: 4.66em;
  }
  #sleek-1 .content .narrow-container .intro-container .desc {
    width: 100%;
    margin-top: 1.4333em;
  }
  #sleek-1 .content .picture-container .image-group {
    width: 17.1667em;
    height: 7.2em;
  }
  #sleek-1 .content .picture-container .image-group img {
    width: 100%;
    height: auto;
    margin-left: -6.5em;
  }
  #sleek-1 .mobile-picture-container {
    position: relative;
  }
  #sleek-1 .mobile-picture-container .sub-mobile {
    margin-top: -5px;
  }
  #sleek-1 .mobile-picture-container .desc-wrapper {
    margin-top: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
            align-items: center;
  }
  #sleek-1 .mobile-picture-container .desc-wrapper .wrapper2 {
    padding-left: 1.6em;
  }
  #sleek-1 .mobile-picture-container .desc-wrapper .sub {
    -webkit-transform: translateY(-7px);
            transform: translateY(-7px);
  }
  #sleek-1 .mobile-picture-container .pic-wrapper {
    width: 100vw;
    height: 104.16vw;
    margin-top: 1em;
  }
  #sleek-1 .mobile-picture-container .pic-wrapper img {
    width: 100%;
  }
  #sleek-1 .mobile-picture-container .pic-wrapper .pic {
    height: 13.0333em;
  }
  #sleek-1 .picture-product2 {
    width: 100vh;
    margin-left: -1.5em;
  }
  #sleek-1 .desc-wrapper-2 {
    width: 9.33em;
  }
  #sleek-1 .sticky-item1 {
    width: 100%;
    overflow: visible;
  }
  #sleek-1 .sticky-item1 .desc-wrapper {
    margin-top: 0.8333em;
  }
  #sleek-1 .pic-2 {
    width: 100vw;
    max-width: 100vw;
  }
  .switch-button-container .option .sub {
    width: 0.8em;
    height: 0.8em;
  }
  .switch-button-container .option .circle {
    width: 1em;
    height: 1em;
    margin-top: 0.2167em;
  }
}
#sleek-2 {
  z-index: 1;
}
#sleek-2 .sl2-container {
  height: 180vh;
  position: relative;
}
#sleek-2 .section-1 {
  width: inherit;
  min-height: 100vh;
}
#sleek-2 .section-1 .header {
  padding-left: 2.48em;
}
@media (max-width: 568px) {
  #sleek-2 .section-1 .header {
    padding-left: 0;
  }
}
#sleek-2 .section-1 .body {
  display: -webkit-box;
  display: flex;
}
#sleek-2 .section-1 .body .item > :nth-child(2) {
  white-space: nowrap;
}
@media (min-width: 1921px) {
  #sleek-2 .section-1 .header .desc {
    margin-top: 78px;
  }
  #sleek-2 .section-1 .body {
    padding-left: 2.48em;
    margin-top: 169px;
  }
  #sleek-2 .section-1 .body .unlock {
    width: 2231px;
    max-width: 2231px;
    height: 675px;
    margin-left: 353px;
  }
  #sleek-2 .section-1 .body .item {
    margin-top: 475px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #sleek-2 .section-1 .header .desc {
    margin-top: 46px;
  }
  #sleek-2 .section-1 .body {
    margin-top: 102px;
    padding-left: 2.48em;
    display: -webkit-box;
    display: flex;
  }
  #sleek-2 .section-1 .body .unlock {
    width: 1340px;
    max-width: 1340px;
    height: 405px;
    margin-left: 100px;
  }
  #sleek-2 .section-1 .body .item {
    margin-top: 275px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #sleek-2 .section-1 .header .desc {
    margin-top: 1.28em;
  }
  #sleek-2 .section-1 .body {
    margin-top: 2.4em;
    display: -webkit-box;
    display: flex;
    padding-left: 2.48em;
  }
  #sleek-2 .section-1 .body .unlock {
    width: 37.52em;
    max-width: 37.52em;
    height: 11.36em;
    margin-left: 1.6em;
  }
  #sleek-2 .section-1 .body .item {
    margin-top: 7.2em;
  }
}
@media (max-width: 568px) {
  #sleek-2 .section-1 .header .sub-title {
    margin-bottom: 1.2333em;
  }
  #sleek-2 .section-1 .body {
    margin-top: 2.4em;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }
  #sleek-2 .section-1 .body .unlock {
    width: 20.9667em;
    max-width: 20.9667em;
    height: 6.4667em;
    margin-left: -0.6667em;
  }
  #sleek-2 .section-1 .body .item {
    margin-top: 1.2333em;
  }
}
#coloros {
  margin-top: -1px;
  background: #fff;
  position: relative;
  padding-top: 9.6em;
}
@media (max-width: 568px) {
  #coloros {
    padding-top: 132px;
  }
}
@media (max-width: 568px) {
  #coloros .title-anime {
    text-align: center;
  }
}
#coloros .title-desc {
  margin-top: 1em;
  margin-bottom: 5em;
}
@media (max-width: 568px) {
  #coloros .title-desc {
    text-align: center;
  }
}
#coloros .narrow-container > :not(:first-child) {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  overflow: hidden;
}
#coloros .darkwhite-1 {
  color: rgba(255,255,255,0.8);
}
#coloros .darkwhite-2 {
  color: rgba(255,255,255,0.6);
}
#coloros .container-1 > :nth-child(1) {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fee), to(#f5f5f5));
  background-image: -webkit-linear-gradient(top, #fee 0%, #f5f5f5 100%);
  background-image: linear-gradient(180deg, #fee 0%, #f5f5f5 100%);
}
#coloros .container-1 > :nth-child(2) {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5eeff), to(#f5f5f5));
  background-image: -webkit-linear-gradient(top, #f5eeff 0%, #f5f5f5 100%);
  background-image: linear-gradient(180deg, #f5eeff 0%, #f5f5f5 100%);
}
#coloros .container-1 .sub-1 .desc {
  width: 75%;
}
#coloros .container-1 .img-wrapper {
  z-index: 2;
  position: relative;
}
#coloros .container-1 .body {
  position: relative;
}
#coloros .container-1 .body .pic-mk {
  position: absolute;
  top: 0;
  left: 0;
}
#coloros .container-1 .mask-wrapper {
  width: 100%;
  height: 100%;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
#coloros .container-2 > :nth-child(1) {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f1fffd), to(#f5f5f5));
  background-image: -webkit-linear-gradient(top, #f1fffd 0%, #f5f5f5 100%);
  background-image: linear-gradient(180deg, #f1fffd 0%, #f5f5f5 100%);
}
#coloros .container-2 > :nth-child(2) {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f9ffe9), to(#f5f5f5));
  background-image: -webkit-linear-gradient(top, #f9ffe9 0%, #f5f5f5 100%);
  background-image: linear-gradient(180deg, #f9ffe9 0%, #f5f5f5 100%);
}
#coloros .container-2 .img-wrapper {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
#coloros .container-2 .img-wrapper .pic {
  width: 100%;
}
#coloros .container-2 .img-wrapper img {
  width: 100%;
}
#coloros .container-2 .img-wrapper-2 {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
#coloros .container-2 .img-wrapper-2 .pic {
  width: 100%;
}
#coloros .container-2 .img-wrapper-2 img {
  width: 100%;
}
#coloros .footer {
  display: -webkit-box;
  display: flex;
  margin: auto;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  cursor: pointer;
  border: 2px solid #979797;
  border-radius: 28.5px;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #coloros .footer {
    border: 1px solid #979797;
    border-radius: 18px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #coloros .footer {
    border: 1px solid #979797;
    border-radius: 16px;
  }
}
@media (max-width: 568px) {
  #coloros .footer {
    border: 2px solid #666;
    border-radius: 32px;
  }
}
#coloros .footer .button-wrapper {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
#coloros .footer .btn-3 {
  white-space: nowrap;
}
@media (min-width: 1921px) {
  #coloros {
    padding-bottom: 263px;
  }
  #coloros .container-1 .desc {
    width: 410px;
  }
  #coloros .container-1 .sub {
    width: 590px;
    height: 910px;
  }
  #coloros .container-1 .title {
    height: 245px;
  }
  #coloros .container-1 .img-wrapper,
  #coloros .container-1 .pic-mk {
    margin-left: 138px;
    width: 400px;
    height: 403px;
  }
  #coloros .container-1 .desc {
    height: 195px;
  }
  #coloros .container-1 .sub-1 .header {
    padding: 70px 0 0 66px;
  }
  #coloros .container-1 .sub-2 .header {
    padding: 70px 0 0 88px;
  }
  #coloros .container-1 .sub-2 .img-wrapper {
    margin-left: 0;
    width: 590px;
  }
  #coloros .container-1 .sub-2 .img-wrapper .pic {
    position: absolute;
    bottom: 0;
    max-width: 590px !important;
    width: 590px !important;
    height: 427px;
  }
  #coloros .container-1 .sub-2 .mask-wrapper img {
    position: absolute;
    bottom: 0;
    max-width: 590px !important;
    width: 590px !important;
    height: 427px;
  }
  #coloros .container-2 {
    margin-top: 17px;
  }
  #coloros .container-2 .desc {
    width: 446px;
  }
  #coloros .container-2 .sub {
    width: 590px;
    height: 1050px;
  }
  #coloros .container-2 .header {
    padding: 63px 0 0 66px;
  }
  #coloros .container-2 .img-wrapper {
    width: 590px;
    height: 590px;
  }
  #coloros .container-2 .title {
    height: 195px;
  }
  #coloros .container-2 .desc {
    height: 235px;
  }
  #coloros .container-2 .img-wrapper-2 {
    height: 590px;
    width: 590px;
  }
  #coloros .footer {
    margin-top: 40px;
    width: 361px;
    height: 57px;
  }
  #coloros .footer .link {
    width: 10px;
    height: 10px;
    margin-left: 16px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #coloros {
    padding-bottom: 130px;
  }
  #coloros .container-1 .desc {
    width: 246px;
  }
  #coloros .container-1 .sub {
    width: 355px;
    height: 540px;
  }
  #coloros .container-1 .sub .header {
    padding: 38px 0 0 40px;
  }
  #coloros .container-1 .title {
    height: 110px;
  }
  #coloros .container-1 .img-wrapper,
  #coloros .container-1 .pic-mk {
    margin-left: 95px;
    width: 195px;
    height: 207px;
  }
  #coloros .container-1 .desc {
    height: 185px;
  }
  #coloros .container-1 .mask-black {
    height: 90%;
    left: 2%;
  }
  #coloros .container-1 .sub-1 .img-wrapper img {
    max-width: 195px !important;
    width: 195px !important;
    height: 207px;
  }
  #coloros .container-1 .sub-2 .img-wrapper {
    margin-left: 28px;
    width: 305px;
  }
  #coloros .container-1 .sub-2 .img-wrapper .pic {
    position: absolute;
    bottom: 0;
    max-width: 305px !important;
    width: 305px !important;
    height: 207px;
  }
  #coloros .container-1 .sub-2 .mask-wrapper img {
    position: absolute;
    bottom: 0;
    max-width: 305px !important;
    width: 305px !important;
    height: 207px;
  }
  #coloros .container-2 {
    margin-top: 10px;
  }
  #coloros .container-2 .desc {
    width: 268px;
  }
  #coloros .container-2 .sub {
    width: 355px;
    height: 630px;
  }
  #coloros .container-2 .header {
    padding: 38px 0 0 40px;
  }
  #coloros .container-2 .title {
    height: 108px;
  }
  #coloros .container-2 .img-wrapper {
    width: 355px;
    height: 310px;
  }
  #coloros .container-2 .desc {
    height: 172px;
  }
  #coloros .container-2 .img-wrapper-2 {
    width: 355px;
    height: 310px;
  }
  #coloros .footer {
    margin-top: 26px;
    width: 236px;
    height: 36px;
  }
  #coloros .footer .link {
    width: 6px;
    height: 6px;
    margin-left: 6px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #coloros {
    padding-bottom: 4.12em;
  }
  #coloros .narrow-container {
    width: 22.64em;
  }
  #coloros .container-1 .desc {
    width: 8.4em;
  }
  #coloros .container-1 .sub {
    width: 11.12em;
    height: 17.2em;
  }
  #coloros .container-1 .sub .header {
    padding: 1.2em 0 0 1.24em;
  }
  #coloros .container-1 .title {
    height: 3.04em;
  }
  #coloros .container-1 .img-wrapper,
  #coloros .container-1 .pic-mk {
    margin-left: 3em;
    width: 6.16em;
    height: 6.32em;
  }
  #coloros .container-1 .desc {
    height: 6.64em;
  }
  #coloros .container-1 .sub-1 .img-wrapper img {
    max-width: 6.16em !important;
    width: 6.16em !important;
    height: 6.32em;
  }
  #coloros .container-1 .sub-2 .img-wrapper {
    width: 9.62em;
    margin-left: 0.72em;
  }
  #coloros .container-1 .sub-2 .img-wrapper .pic {
    position: absolute;
    bottom: 0;
    max-width: 9.62em !important;
    width: 9.62em !important;
    height: 7.02em;
  }
  #coloros .container-1 .sub-2 .mask-wrapper img {
    position: absolute;
    bottom: 0;
    max-width: 9.62em !important;
    width: 9.62em !important;
    height: 7.02em;
  }
  #coloros .container-2 {
    margin-top: 0.4em;
  }
  #coloros .container-2 .desc {
    width: 8.4em;
  }
  #coloros .container-2 .sub {
    width: 11.12em;
    height: 19.6em;
  }
  #coloros .container-2 .header {
    padding: 1.2em 0 0 1.28em;
  }
  #coloros .container-2 .title {
    height: 3.68em;
  }
  #coloros .container-2 .img-wrapper {
    width: 11.12em;
    height: 8.96em;
  }
  #coloros .container-2 .img-wrapper-2 {
    width: 11.12em;
    height: 8.96em;
  }
  #coloros .container-2 .desc {
    height: 5.8em;
  }
  #coloros .footer {
    margin-top: 0.96em;
    width: 9.28em;
    height: 1.28em;
  }
  #coloros .footer .link {
    width: 0.24em;
    height: 0.24em;
    margin-left: 0.24em;
  }
}
@media (max-width: 568px) {
  #coloros {
    padding-bottom: 3.7333em;
  }
  #coloros .narrow-container {
    width: 100vw;
  }
  #coloros .narrow-container > div {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }
  #coloros .narrow-container .desc {
    width: 10em;
  }
  #coloros .narrow-container .sub {
    margin-top: 0.4em;
  }
  #coloros .container-1 .sub {
    width: 100%;
  }
  #coloros .container-1 .sub-1 {
    height: 21.3333em;
  }
  #coloros .container-1 .sub-1 .desc {
    width: 81%;
  }
  #coloros .container-1 .sub-1 .header {
    padding: 2.6667em 0 0 1.2em;
  }
  #coloros .container-1 .sub-1 .title {
    height: 2.5333em;
  }
  #coloros .container-1 .sub-1 .img-wrapper {
    margin-left: 1.2333em;
    width: 11.3em;
    height: 10.7333em;
  }
  #coloros .container-1 .sub-1 .img-wrapper .pic {
    position: absolute;
    bottom: 0;
  }
  #coloros .container-1 .sub-1 .desc {
    height: 5.4em;
  }
  #coloros .container-1 .sub-2 {
    height: 24em;
  }
  #coloros .container-1 .sub-2 .header {
    padding: 3.3333em 0 0 1.2em;
  }
  #coloros .container-1 .sub-2 .title {
    height: 4.0333em;
  }
  #coloros .container-1 .sub-2 .img-wrapper {
    margin: 1.5em 0 0 0.15em;
    height: 10.7333em;
    width: 12.5em;
  }
  #coloros .container-1 .sub-2 .img-wrapper .pic {
    position: absolute;
    bottom: 0;
    max-width: 12.5em !important;
    width: 12.5em !important;
  }
  #coloros .container-1 .sub-2 .img-wrapper .mask-wrapper img {
    position: absolute;
    bottom: 0;
    max-width: 12.5em !important;
    width: 12.5em !important;
  }
  #coloros .container-1 .sub-2 .desc {
    height: 5.9em;
  }
  #coloros .container-1 .mask-black {
    left: 2%;
    height: 89%;
  }
  #coloros .container-1 .mask-wrapper img {
    max-width: 11.2333em !important;
    width: 11.2333em !important;
  }
  #coloros .container-2 .sub {
    width: 100%;
  }
  #coloros .container-2 .sub .header {
    padding: 3.1333em 0 0 1.2em;
  }
  #coloros .container-2 .sub-1 .title {
    height: 2.6333em;
  }
  #coloros .container-2 .sub-1 .img-wrapper {
    margin: auto;
    width: 100%;
    height: 10.1667em;
  }
  #coloros .container-2 .sub-1 .img-wrapper .pic {
    width: 100%;
    height: 100%;
  }
  #coloros .container-2 .sub-1 .img-wrapper-2 {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
    height: 10.4714em;
  }
  #coloros .container-2 .sub-1 .img-wrapper-2 img {
    width: 100%;
    height: 100%;
  }
  #coloros .container-2 .sub-1 .desc {
    height: 5.8667em;
  }
  #coloros .container-2 .sub-2 {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3d3d3d), to(#000)) !important;
    background-image: -webkit-linear-gradient(top, #3d3d3d 0%, #000 100%) !important;
    background-image: linear-gradient(180deg, #3d3d3d 0%, #000 100%) !important;
    height: 21em;
  }
  #coloros .container-2 .sub-2 .title {
    height: 2.5333em;
  }
  #coloros .container-2 .sub-2 .img-wrapper {
    margin: auto;
    width: 100%;
    height: 11.5667em;
  }
  #coloros .container-2 .sub-2 .img-wrapper .pic {
    width: 100%;
    height: 100%;
  }
  #coloros .container-2 .sub-2 .desc {
    height: 3.8em;
  }
  #coloros .footer {
    margin-top: 1.5667em;
    width: 9.4333em;
    height: 1.7333em;
  }
  #coloros .footer .link {
    width: 0.3333em;
    height: 0.3333em;
    margin-left: 0.1em;
  }
}
.video-mask {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-transform: translateY(150vh);
          transform: translateY(150vh);
  background-color: #000;
}
@media (max-width: 568px) {
  .video-mask {
    padding-top: 50px;
  }
}
.video-mask.show {
  -webkit-transform: translateY(0vh);
          transform: translateY(0vh);
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
}
.video-mask video {
  width: 100%;
  height: auto;
}
@media (max-width: 568px) {
  .video-mask video {
    height: 100%;
  }
}
.video-mask .close {
  cursor: pointer;
  position: absolute;
  z-index: 2;
  right: 15px;
  top: 15px;
  width: 30px;
  height: 30px;
}
@media (max-width: 568px) {
  .video-mask .close {
    right: 10px;
    top: 10px;
    width: 28px;
    height: 28px;
  }
}
.video-mask .close img {
  width: 100%;
}
#sloop {
  background: #000;
  margin-top: -1px;
  padding-top: 8.2em;
}
@media (max-width: 568px) {
  #sloop {
    padding-top: 106px;
  }
}
#sloop .video-group {
  width: 100%;
  position: relative;
}
#sloop .video-group video {
  width: 100%;
  height: auto;
}
#sloop .video-group .mask {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
}
#sloop .video-group .mask img {
  width: 100%;
  height: auto;
}
#sloop .video-group .play {
  width: 15%;
  height: 15%;
  top: 42.5%;
  left: 42.5%;
  position: absolute;
  z-index: 5;
}
#sloop .sloop-container {
  width: 100vw;
}
#sloop .sloop-container .sloop-stick {
  width: 100vw;
  overflow: hidden;
}
#sloop .sticky-container {
  width: 100%;
  height: 300vh;
}
#sloop .sticky-container .sticky-item {
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  padding-top: 60px;
}
#sloop .sticky-container .sticky-item .text1 {
  margin-top: 4vh;
  margin-bottom: 3vh;
}
#sloop .sticky-container .sticky-item .video {
  position: relative;
  z-index: 3;
}
#sloop .sticky-container .sticky-item .play {
  position: absolute;
  z-index: 5;
}
#sloop .sticky-container .sticky-item .params {
  display: -webkit-box;
  display: flex;
  margin-top: 3vh;
}
#sloop .sticky-container .sticky-item .params .param .text {
  margin-top: 1.5vh;
}
#sloop .sticky-container .sticky-item .params .param1 {
  width: 6.6667em;
}
#sloop .sticky-container .sticky-item .params .param2 {
  width: 7.7778em;
  margin-left: 2.6667em;
}
#sloop .sticky-container .sticky-item .params .param3 {
  width: 6.6667em;
  margin-left: 2.7778em;
}
#sloop .sticky-container .sticky-item .phone {
  position: absolute;
  z-index: 4;
}
#sloop .sticky-container .sticky-item .background1 {
  position: absolute;
  z-index: 2;
}
#sloop .sticky-container .sticky-item .content-sloop {
  position: absolute;
  top: 35vh;
  width: 12.9778em;
}
#sloop .sticky-container .sticky-item .text2 {
  margin-top: 1.4667em;
}
#sloop .sloop-mobile {
  padding-bottom: 5em;
}
#sloop .sloop-mobile .title {
  white-space: nowrap;
}
#sloop .sloop-mobile .text1 {
  margin-top: 29px;
}
#sloop .sloop-mobile .video {
  width: 100vw;
  height: 56vw;
  margin-top: 35px;
}
#sloop .sloop-mobile .video-group {
  margin-top: 35px;
}
#sloop .sloop-mobile .param {
  margin-top: 35px;
}
#sloop .sloop-mobile .param .text {
  margin-top: 13px;
}
#sloop .sloop-mobile .mobile-sloop {
  margin-top: 3.3333em;
}
#sloop .sloop-mobile .mobile-sloop .text {
  margin-top: 35px;
}
#sloop .sloop-mobile .mobile-sloop .phone-wrapper {
  position: relative;
  width: 55vw;
  height: 110vw;
  margin-top: 43px;
  margin-left: calc((9.3em - 55vw) / 2);
}
#sloop .sloop-mobile .mobile-sloop .phone-wrapper .phone {
  position: relative;
  z-index: 4;
  width: 100%;
}
#sloop .sloop-mobile .mobile-sloop .phone-wrapper .edit {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 100%;
}
#performance-1 {
  background-color: #000;
  margin-top: -1px;
  position: relative;
  z-index: 2;
}
#performance-1 > div {
  position: relative;
}
#performance-1 .title-anime {
  margin: 200px 0 266px 0;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #performance-1 .title-anime {
    margin: 50px 0 175px 0;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #performance-1 .title-anime {
    margin: 0;
  }
}
@media (max-width: 568px) {
  #performance-1 .title-anime {
    margin-top: 0;
    margin-left: 10vw;
    margin-bottom: 170px;
  }
}
#performance-1 .push-top {
  -webkit-transform: translateY(-8px);
          transform: translateY(-8px);
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #performance-1 .push-top {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #performance-1 .push-top {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
  }
}
@media (max-width: 568px) {
  #performance-1 .push-top {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
}
#performance-1 .column-center {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
}
#performance-1 .section-1 {
  position: relative;
}
#performance-1 .section-1 .title {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: flex;
}
#performance-1 .section-1 .img-wrapper {
  z-index: 1;
  position: relative;
}
#performance-1 .section-1 .img-wrapper img {
  width: 100%;
  height: 100%;
}
#performance-1 .section-3 .body {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
#performance-1 .section-3 .right-curve {
  position: relative;
}
#performance-1 .section-3 .right-curve > div {
  overflow: hidden;
}
#performance-1 .section-3 .right-curve .blue-wrapper {
  position: relative;
}
#performance-1 .section-3 .right-curve .red-wrapper {
  position: absolute;
  top: 0;
  left: 0;
}
#performance-1 .section-3 .right-curve .blue-text {
  position: absolute;
  white-space: nowrap;
  color: #7deffd;
}
#performance-1 .section-3 .right-curve .red-text {
  position: absolute;
  white-space: nowrap;
  color: #f43039;
}
#performance-1 .section-3 .right-curve .y-item {
  position: absolute;
  top: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
#performance-1 .section-3 .right-curve .x-item {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
@media (min-width: 1025px) {
  #performance-1 {
    padding-bottom: 5.9111em;
  }
  #performance-1 .section-1 .title > :nth-child(2) {
    margin-left: 1.1556em;
  }
  #performance-1 .section-1 .img-wrapper {
    margin-top: -1.222em;
    height: 15.4678em;
  }
  #performance-1 .section-3 {
    margin-top: 6.6667em;
  }
  #performance-1 .section-3 .body {
    margin-top: 2.2889em;
  }
  #performance-1 .section-3 .right-curve .blue,
  #performance-1 .section-3 .right-curve .blue-wrapper {
    width: 6.0667em;
    height: 6.4667em;
  }
  #performance-1 .section-3 .right-curve .red,
  #performance-1 .section-3 .right-curve .red-wrapper {
    width: 7.9778em;
    height: 6.4667em;
  }
  #performance-1 .section-3 .right-curve .blue-wrapper img {
    max-width: 6.0667em;
  }
  #performance-1 .section-3 .right-curve .red-wrapper img {
    max-width: 7.9778em;
  }
  #performance-1 .section-3 .right-curve .y-item {
    height: 6.4667em;
  }
  #performance-1 .section-3 .item-group {
    margin-top: 3.2889em;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #performance-1 {
    padding-bottom: 4em;
  }
  #performance-1 .section-1 {
    margin-top: 5em;
  }
  #performance-1 .section-1 .title > :nth-child(2) {
    margin-left: 0.72em;
  }
  #performance-1 .section-1 .img-wrapper {
    margin-top: -0.8em;
    height: 11.64em;
  }
  #performance-1 .section-3 {
    margin-top: 4.4em;
  }
  #performance-1 .section-3 .body {
    margin-top: 1.8em;
  }
  #performance-1 .section-3 .desc {
    width: 8.12em;
  }
  #performance-1 .section-3 .right-curve {
    margin-top: 0.8em;
  }
  #performance-1 .section-3 .right-curve .blue,
  #performance-1 .section-3 .right-curve .blue-wrapper {
    width: 5.5692em;
    height: 5.9192em;
  }
  #performance-1 .section-3 .right-curve .red,
  #performance-1 .section-3 .right-curve .red-wrapper {
    width: 7.3032em;
    height: 5.9192em;
  }
  #performance-1 .section-3 .right-curve .blue-wrapper img {
    max-width: 5.5692em;
  }
  #performance-1 .section-3 .right-curve .red-wrapper img {
    max-width: 7.3032em;
  }
  #performance-1 .section-3 .right-curve .y-item {
    height: 5.9192em;
  }
  #performance-1 .section-3 .item-group {
    margin-top: 1.2em;
  }
  #performance-1 .section-3 .item-group .item-2 {
    margin-left: 0.8em;
  }
}
@media (max-width: 568px) {
  #performance-1 .full-screen {
    width: 100vw !important;
  }
  #performance-1 .content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }
  #performance-1 .section-1 .title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }
  #performance-1 .section-1 .title > :nth-child(2) {
    margin-top: 0.9333em;
  }
  #performance-1 .section-1 .img-wrapper {
    margin-top: 0.8333em;
  }
  #performance-1 .section-3 {
    width: 10.4333em;
    margin-top: 2.9em;
  }
  #performance-1 .section-3 .body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }
  #performance-1 .section-3 .desc {
    margin-top: 1.2667em;
  }
  #performance-1 .section-3 .right-curve {
    margin: 2.3333em 0 0 1em;
  }
  #performance-1 .section-3 .right-curve .blue,
  #performance-1 .section-3 .right-curve .blue-wrapper {
    width: 6.0835em;
    height: 6.6667em;
  }
  #performance-1 .section-3 .right-curve .red,
  #performance-1 .section-3 .right-curve .red-wrapper {
    width: 8em;
    height: 6.6667em;
  }
  #performance-1 .section-3 .right-curve .blue-wrapper img {
    max-width: 6.0835em;
  }
  #performance-1 .section-3 .right-curve .red img,
  #performance-1 .section-3 .right-curve .red-wrapper img {
    max-width: 8em;
  }
  #performance-1 .section-3 .right-curve .y-item {
    height: 6.6667em;
  }
  #performance-1 .section-3 .footer {
    margin-top: 2em;
  }
}
#performance-2 {
  background-color: #000;
  margin-top: -1px;
}
#performance-2 > div {
  position: relative;
  background-color: #000;
}
#performance-2 > div > div {
  background-color: #000;
}
#performance-2 .per2-container {
  width: 100vw;
  height: 180vh;
}
#performance-2 .per2-container .per2-sticky {
  height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  left: 0px;
  width: 100vw;
}
#performance-2 .section-1 .none {
  -webkit-transition: width 0.6s;
  transition: width 0.6s;
}
#performance-2 .section-1 .blue-progress {
  background-image: -webkit-gradient(linear, left top, right top, from(#285eaf), to(#63d3fd));
  background-image: -webkit-linear-gradient(left, #285eaf, #63d3fd);
  background-image: linear-gradient(to right, #285eaf, #63d3fd);
}
#performance-2 .section-1 .blue-progress.full-blue-1 {
  -webkit-transition: width 1s;
  transition: width 1s;
}
#performance-2 .section-1 .blue-progress.full-blue-2 {
  -webkit-transition: width 1s;
  transition: width 1s;
}
#performance-2 .section-1 .grey-progress {
  background-image: -webkit-gradient(linear, left top, right top, from(#565656), to(#999));
  background-image: -webkit-linear-gradient(left, #565656, #999);
  background-image: linear-gradient(to right, #565656, #999);
}
#performance-2 .section-1 .grey-progress.full-grey {
  -webkit-transition: width 1s;
  transition: width 1s;
}
#performance-2 .section-1 .blue-progress,
#performance-2 .section-1 .grey-progress {
  width: 0;
  border-radius: 6.5px;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #performance-2 .section-1 .blue-progress,
  #performance-2 .section-1 .grey-progress {
    border-radius: 4px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #performance-2 .section-1 .blue-progress,
  #performance-2 .section-1 .grey-progress {
    border-radius: 3px;
  }
}
@media (max-width: 568px) {
  #performance-2 .section-1 .blue-progress,
  #performance-2 .section-1 .grey-progress {
    border-radius: 4.5px;
  }
}
#performance-2 .section-2 {
  z-index: 2;
}
#performance-2 .section-2 .dolby-wrapper {
  position: relative;
}
#performance-2 .section-2 .dolby-wrapper img {
  margin: auto;
  width: 100%;
  height: auto;
}
#performance-2 .section-2 .dolby-wrapper .phone-wrapper {
  position: relative;
  margin: auto;
}
#performance-2 .section-2 .dolby-wrapper .phone,
#performance-2 .section-2 .dolby-wrapper .shadow {
  position: relative;
  z-index: 5;
}
#performance-2 .section-2 .icon {
  display: -webkit-box;
  display: flex;
}
#performance-2 .section-2 .dolby-wrapper {
  margin: auto;
  position: relative;
}
#performance-2 .section-2 .dolby-anime {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
#performance-2 .section-2 .right {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
#performance-2 .section-2 .left,
#performance-2 .section-2 .maskleft {
  position: absolute;
}
#performance-2 .section-2 .right,
#performance-2 .section-2 .maskright {
  position: absolute;
}
#performance-2 .section-2 .maskleft,
#performance-2 .section-2 .maskright {
  z-index: 2;
}
#performance-2 .section-3 {
  width: 100%;
  background-color: #000;
}
#performance-2 .section-3 .desc {
  width: 50%;
}
@media (max-width: 568px) {
  #performance-2 .section-3 .desc {
    width: 100%;
  }
}
#performance-2 .section-3 .desc img {
  width: 100%;
  height: auto;
}
@media (min-width: 1025px) {
  #performance-2 .section-1 .title .desc-1 {
    margin-top: 1.4889em;
  }
  #performance-2 .section-1 .title .desc-2 {
    margin-top: 0.6em;
  }
  #performance-2 .section-1 .content {
    margin-top: 1.8889em;
  }
  #performance-2 .section-1 .content .progress-2 {
    margin-top: 1.8444em;
  }
  #performance-2 .section-1 .content .blue-progress {
    height: 0.2889em;
    margin: 0.5333em 0 0.4444em 0;
  }
  #performance-2 .section-1 .content .blue-progress.full-blue-1 {
    width: 15.9111em;
  }
  #performance-2 .section-1 .content .blue-progress.full-blue-2 {
    width: 14.4444em;
  }
  #performance-2 .section-1 .content .grey-progress {
    height: 0.2889em;
  }
  #performance-2 .section-1 .content .grey-progress.full-grey {
    width: 10.0444em;
  }
  #performance-2 .section-1 .img-wrapper {
    margin-top: 1.8889em;
    height: 17.7778em;
  }
  #performance-2 .section-2 {
    margin: 5.7778em 0 0 0;
  }
  #performance-2 .section-2 .title .desc-1 {
    margin-top: 1.3333em;
  }
  #performance-2 .section-2 .icon {
    margin-top: 1.3333em;
  }
  #performance-2 .section-2 .icon .hires {
    width: 1.5778em;
    height: 1.5778em;
  }
  #performance-2 .section-2 .icon .dolby {
    margin-left: 1.3333em;
    width: 1.2em;
    height: 1.5778em;
  }
  #performance-2 .section-2 .dolby-wrapper {
    margin-top: 2.2222em;
  }
  #performance-2 .section-2 .dolby-wrapper .phone-wrapper {
    width: 35.5556em;
  }
  #performance-2 .section-2 .dolby-wrapper .phone {
    width: 35.5556em;
    height: 11.1111em;
  }
  #performance-2 .section-2 .dolby-wrapper .shadow {
    width: 50.8444em;
    height: 5.0444em;
  }
  #performance-2 .section-2 .dolby-anime img {
    width: 860px;
    height: auto;
    top: 60px;
  }
  #performance-2 .section-2 .dolby-anime .left,
  #performance-2 .section-2 .dolby-anime .maskleft {
    left: -275px;
  }
  #performance-2 .section-2 .dolby-anime .right,
  #performance-2 .section-2 .dolby-anime .maskright {
    left: 1015px;
  }
  .section-3 .header {
    padding-left: 32.156vw;
  }
  .section-3 .header .desc {
    margin-top: 1.3778em;
  }
  .section-3 .body {
    margin: 1.3778em 0 0 0;
  }
  .section-3 .n-phone {
    height: 12.4667em;
  }
  .section-3 .n-shadow {
    height: 3.5333em;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #performance-2 .section-2 .narrow-container {
    width: 600px;
  }
  #performance-2 .section-2 .icon {
    margin-top: 36px;
  }
  #performance-2 .section-2 .icon .hires {
    width: 43px;
    height: 43px;
  }
  #performance-2 .section-2 .icon .dolby {
    margin-left: 36px;
    width: 33px;
    height: 43px;
  }
  #performance-2 .section-2 .dolby-wrapper {
    margin-top: 60px;
  }
  #performance-2 .section-2 .dolby-wrapper .phone-wrapper {
    width: 740px;
  }
  #performance-2 .section-2 .dolby-wrapper .phone {
    width: 740px;
    height: 231px;
  }
  #performance-2 .section-2 .dolby-wrapper .shadow {
    width: 1058px;
    height: 105px;
  }
  #performance-2 .section-2 .dolby-wrapper .dolby-anime img {
    width: 430px;
    height: auto;
    top: 21px;
  }
  #performance-2 .section-2 .dolby-wrapper .dolby-anime .left,
  #performance-2 .section-2 .dolby-wrapper .dolby-anime .maskleft {
    left: -140px;
  }
  #performance-2 .section-2 .dolby-wrapper .dolby-anime .right,
  #performance-2 .section-2 .dolby-wrapper .dolby-anime .maskright {
    left: 450px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #performance-2 .section-1 .title .desc-1 {
    margin-top: 1.2em;
  }
  #performance-2 .section-1 .content {
    margin-top: 1.2em;
  }
  #performance-2 .section-1 .content .progress-2 {
    margin-top: 1.32em;
  }
  #performance-2 .section-1 .content .blue-progress {
    height: 0.24em;
    margin: 0.4em 0 0.36em 0;
  }
  #performance-2 .section-1 .content .blue-progress.full-blue-1 {
    width: 12em;
  }
  #performance-2 .section-1 .content .blue-progress.full-blue-2 {
    width: 10.8em;
  }
  #performance-2 .section-1 .content .grey-progress {
    height: 0.24em;
  }
  #performance-2 .section-1 .content .grey-progress.full-grey {
    width: 7.6em;
  }
  #performance-2 .section-1 .img-wrapper {
    margin-top: 1.72em;
    height: 16.2em;
  }
  #performance-2 .section-2 {
    margin: 7.48em 0 0 0;
  }
  #performance-2 .section-2 .narrow-container {
    width: 54vw;
  }
  #performance-2 .section-2 .title .desc-1 {
    margin-top: 1.6em;
  }
  #performance-2 .section-2 .icon {
    margin-top: 1.04em;
  }
  #performance-2 .section-2 .icon .hires {
    width: 1.2em;
    height: 1.2em;
  }
  #performance-2 .section-2 .icon .dolby {
    width: 0.92em;
    height: 1.2em;
    margin-left: 1em;
  }
  #performance-2 .section-2 .dolby-wrapper {
    margin-top: 1.6em;
  }
  #performance-2 .section-2 .dolby-wrapper .phone-wrapper {
    width: 21.52em;
  }
  #performance-2 .section-2 .dolby-wrapper .phone {
    width: 21.52em;
    height: 6.72em;
  }
  #performance-2 .section-2 .dolby-wrapper .shadow {
    width: 30.72em;
    height: 3.04em;
  }
  #performance-2 .section-2 .dolby-anime img {
    width: 11.52em;
    height: auto;
    top: 0.8em;
  }
  #performance-2 .section-2 .dolby-anime .left,
  #performance-2 .section-2 .dolby-anime .maskleft {
    left: -3.8em;
  }
  #performance-2 .section-2 .dolby-anime .right,
  #performance-2 .section-2 .dolby-anime .maskright {
    left: 13.8em;
  }
  .section-3 .header {
    padding-left: 7.02em;
  }
  .section-3 .header .desc {
    margin-top: 0.96em;
  }
  .section-3 .body {
    margin: 1.28em 0 0 0;
  }
  .section-3 .n-phone {
    height: 9.44em;
  }
  .section-3 .n-shadow {
    height: 4em;
  }
}
@media (max-width: 568px) {
  #performance-2 {
    padding: 0 0 6.2333em 0;
  }
  #performance-2 .full-screen {
    width: 100vw !important;
  }
  #performance-2 .section-1 {
    padding-top: 3.2em;
  }
  #performance-2 .section-1 .narrow-container {
    width: 81.333vw;
  }
  #performance-2 .section-1 .title .desc-1 {
    margin-top: 1.2333em;
  }
  #performance-2 .section-1 .title .desc-2 {
    margin-top: 1.3333em;
  }
  #performance-2 .section-1 .content {
    margin-top: 1.3333em;
  }
  #performance-2 .section-1 .content .progress-2 {
    margin-top: 1.3333em;
  }
  #performance-2 .section-1 .content .blue-progress {
    height: 0.3em;
    margin: 0.5em 0 0.6667em 0;
  }
  #performance-2 .section-1 .content .blue-progress.full-blue-1 {
    width: 9.3333em;
  }
  #performance-2 .section-1 .content .blue-progress.full-blue-2 {
    width: 7.6667em;
  }
  #performance-2 .section-1 .content .grey-progress {
    height: 0.3em;
  }
  #performance-2 .section-1 .content .grey-progress.full-grey {
    width: 5.8333em;
  }
  #performance-2 .section-1 .img-wrapper {
    margin-top: 2em;
    height: 8.3333em;
  }
  #performance-2 .section-2 {
    margin: 5.5667em 0 0 0;
  }
  #performance-2 .section-2 .narrow-container {
    width: 9.6em;
  }
  #performance-2 .section-2 .title .desc-1 {
    margin-top: 1.2333em;
  }
  #performance-2 .section-2 .icon {
    margin-top: 0.8667em;
    height: 1em;
  }
  #performance-2 .section-2 .icon .hires {
    width: 1em;
  }
  #performance-2 .section-2 .icon .dolby {
    width: 0.7667em;
    margin-left: 0.5em;
  }
  #performance-2 .section-2 .dolby-wrapper {
    margin-top: 1.7667em;
  }
  #performance-2 .section-2 .dolby-wrapper .phone-wrapper {
    width: 10.0667em;
  }
  #performance-2 .section-2 .dolby-wrapper .phone {
    width: 10.0667em;
    height: 3.1333em;
  }
  #performance-2 .section-2 .dolby-wrapper .shadow {
    width: 14.3333em;
    height: 1.4em;
  }
  #performance-2 .section-2 .dolby-anime img {
    width: 5.2667em;
    height: auto;
    top: 0.2333em;
  }
  #performance-2 .section-2 .dolby-anime .left,
  #performance-2 .section-2 .dolby-anime .maskleft {
    left: -1.7667em;
  }
  #performance-2 .section-2 .dolby-anime .right,
  #performance-2 .section-2 .dolby-anime .maskright {
    left: 6.5em;
  }
  .section-3 .header {
    padding-left: 1.6667em;
    padding-right: 1.6667em;
  }
  .section-3 .header .desc {
    margin-top: 2em;
  }
  .section-3 .body {
    margin: 1.3333em 0 0 0;
  }
  .section-3 .body .narrow-container {
    width: 81.33vw;
  }
  .section-3 .n-phone {
    height: 4.7em;
  }
  .section-3 .n-shadow {
    height: 1.3333em;
  }
}
#media-1 {
  background-color: #000;
  margin-top: -1px;
  position: relative;
  padding-top: 5.3em;
}
#media-1 .title-anime {
  margin-bottom: 260px;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #media-1 .title-anime {
    margin-bottom: 130px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #media-1 .title-anime {
    margin-bottom: 100px;
  }
}
@media (max-width: 568px) {
  #media-1 .title-anime {
    margin-bottom: 220px;
  }
}
#media-1 .video-group {
  width: 100%;
  position: relative;
  border-radius: 10px;
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}
@media (max-width: 568px) {
  #media-1 .video-group {
    border-radius: 0px;
  }
}
#media-1 .footer {
  margin: auto;
}
#media-1 .change {
  width: 100%;
  margin: auto;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  cursor: pointer;
  background-color: #333;
}
#media-1 .change .left,
#media-1 .change .right {
  -webkit-box-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}
@media (min-width: 1921px) {
  #media-1 .change,
  #media-1 .left,
  #media-1 .right {
    border-radius: 23px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #media-1 .change,
  #media-1 .left,
  #media-1 .right {
    border-radius: 20px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #media-1 .change,
  #media-1 .left,
  #media-1 .right {
    border-radius: 0.6em;
  }
}
@media (max-width: 568px) {
  #media-1 .change,
  #media-1 .left,
  #media-1 .right {
    border-radius: 32px;
  }
}
#media-1 .video-groups {
  position: relative;
}
#media-1 .video-groups .group-1 {
  z-index: 2;
}
#media-1 .video-groups .group-2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
#media-1 .btn-2 {
  white-space: nowrap;
}
@media (min-width: 1921px) {
  #media-1 .title-anime .group {
    width: 702px;
    height: 260px;
  }
  #media-1 .title-anime .group .title {
    width: 702px;
    height: 260px;
  }
  #media-1 .title-anime .group .bg {
    width: 100%;
    height: 780px;
  }
  #media-1 .header .desc {
    margin-top: 66px;
  }
  #media-1 .body {
    margin-top: 56px;
  }
  #media-1 .body .video-groups {
    height: 675px;
  }
  #media-1 .body .play {
    width: 34px;
    height: 34px;
    top: calc(50% - 17px);
    left: calc(50% - 17px);
  }
  #media-1 .footer {
    margin-top: 40px;
  }
  #media-1 .footer .change {
    width: 361px;
    height: 46px;
  }
  #media-1 .footer .change .left,
  #media-1 .footer .change .right {
    width: 161px;
    height: 37px;
    border-radius: 18.5px;
    padding-bottom: 3px;
  }
  #media-1 .footer .change .left {
    margin-left: 5px;
  }
  #media-1 .footer .change .right {
    margin-right: 5px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #media-1 .title-anime .group {
    width: 702px;
    height: 260px;
  }
  #media-1 .title-anime .group .title {
    width: 702px;
    height: 260px;
  }
  #media-1 .title-anime .group .bg {
    width: 100%;
    height: 780px;
  }
  #media-1 .header .desc {
    margin-top: 42px;
  }
  #media-1 .body {
    margin-top: 40px;
  }
  #media-1 .body .video-groups {
    height: 405px;
  }
  #media-1 .body .play {
    width: 34px;
    height: 34px;
    top: calc(50% - 17px);
    left: calc(50% - 17px);
  }
  #media-1 .footer {
    margin-top: 25px;
  }
  #media-1 .footer .change {
    width: 380px;
    height: 40px;
  }
  #media-1 .footer .change .left,
  #media-1 .footer .change .right {
    width: 111px;
    height: 32px;
    border-radius: 16px;
    padding-bottom: 3px;
  }
  #media-1 .footer .change .left {
    margin-left: 5px;
  }
  #media-1 .footer .change .right {
    margin-right: 5px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #media-1 .header .desc {
    margin-top: 1em;
  }
  #media-1 .body {
    margin-top: 0.96em;
  }
  #media-1 .body .video-groups {
    height: 11.36em;
  }
  #media-1 .body .play {
    width: 1.36em;
    height: 1.36em;
    top: calc(50% - 0.68em);
    left: calc(50% - 0.68em);
  }
  #media-1 .footer {
    margin-top: 0.7em;
  }
  #media-1 .footer .change {
    width: 13.76em;
    height: 1.2em;
  }
  #media-1 .footer .change .left,
  #media-1 .footer .change .right {
    padding-bottom: 2px;
    width: 4.16em;
    height: 0.96em;
    border-radius: 0.6em;
  }
  #media-1 .footer .change .left {
    margin-left: 0.15em;
  }
  #media-1 .footer .change .right {
    margin-right: 0.15em;
  }
}
@media (max-width: 568px) {
  #media-1 .header .desc {
    margin-top: 1em;
  }
  #media-1 .body {
    margin-top: 1.0667em;
    width: 100vw;
  }
  #media-1 .body .video-groups {
    height: 22.2em;
  }
  #media-1 .body .play {
    width: 1.1333em;
    height: 1.1333em;
    top: calc(50% - 0.5667em);
    left: calc(50% - 0.5667em);
  }
  #media-1 .footer {
    margin-top: 1.2333em;
  }
  #media-1 .footer .change {
    width: 10.8667em;
    height: 1.7em;
  }
  #media-1 .footer .change .left,
  #media-1 .footer .change .right {
    width: 4.7333em;
    height: 1.4667em;
    padding-bottom: 2px;
  }
  #media-1 .footer .change .left {
    margin-left: 0.1667em;
  }
  #media-1 .footer .change .right {
    margin-right: 0.1667em;
  }
}
.title-anime {
  font-family: 'OPPOSans-H';
  font-size: 100px;
  font-weight: 800;
  line-height: 130px;
  letter-spacing: -3px;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .title-anime {
    font-size: 60px;
    line-height: 78px;
    letter-spacing: -1.8px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .title-anime {
    font-size: 42px;
    line-height: 60px;
    letter-spacing: -1.26px;
  }
}
@media (max-width: 568px) {
  .title-anime {
    font-size: 42px;
    line-height: 52px;
    letter-spacing: -1px;
  }
}
.main-wrapper {
  font-size: 16px;
  font-family: 'OPPOSans-M', 'OPPOSans-H', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}
.main-wrapper .h8 {
  color: #110;
  font-family: 'OPPOSans-B';
}
.main-wrapper .h2,
.main-wrapper .h3,
.main-wrapper .h4,
.main-wrapper .h5,
.main-wrapper .h6,
.main-wrapper .h7 {
  font-family: 'OPPOSans-H';
}
.main-wrapper .p1,
.main-wrapper .p1-2,
.main-wrapper .p1-3,
.main-wrapper .p1-4,
.main-wrapper .p2,
.main-wrapper .p2-1,
.main-wrapper .p2-2 {
  font-family: 'OPPOSans-M';
}
.main-wrapper .p3,
.main-wrapper .btn-4 {
  font-family: 'OPPOSans-M';
}
.main-wrapper .btn-1,
.main-wrapper .btn-2 {
  font-family: 'OPPOSans-H';
}
.main-wrapper .white {
  color: #fff;
}
.main-wrapper .white-1 {
  color: rgba(255,255,255,0.6);
}
.main-wrapper .gray {
  color: #9b9b9b;
}
.main-wrapper .gray1 {
  color: #000;
  opacity: 0.6;
}
.main-wrapper .gray2 {
  color: #000;
  opacity: 0.4;
}
.main-wrapper .gray3 {
  color: #000;
  opacity: 0.5;
}
.main-wrapper .gray4 {
  color: #fff;
  opacity: 0.6;
}
.main-wrapper .gray5 {
  color: #fff;
  opacity: 0.4;
}
.main-wrapper .grey-1 {
  color: #919191;
}
.main-wrapper .grey-2 {
  color: #9b9b9b;
}
.main-wrapper .black {
  color: #000;
}
.main-wrapper .black-1 {
  color: rgba(0,0,0,0.6);
}
@media (max-width: 568px) {
  .main-wrapper .h2 {
    font-size: 34px;
    line-height: 42px;
  }
  .main-wrapper .h3 {
    font-size: 34px;
    line-height: 44px;
  }
  .main-wrapper .h4 {
    font-size: 16px;
    line-height: 24px;
  }
  .main-wrapper .h4.m {
    font-size: 26px;
    line-height: 34px;
  }
  .main-wrapper .h5 {
    font-size: 36px;
    line-height: 50px;
  }
  .main-wrapper .h5.h5-1 {
    font-size: 26px;
    line-height: 34px;
  }
  .main-wrapper .h5.mobile-1 {
    font-size: 26px;
    line-height: 36px;
  }
  .main-wrapper .h5.mobile-2 {
    font-size: 18px;
    line-height: 24px;
  }
  .main-wrapper .h5.mobile-3 {
    font-size: 32px;
    line-height: 34px;
  }
  .main-wrapper .h6 {
    font-size: 34px;
    line-height: 46px;
  }
  .main-wrapper .h7 {
    font-size: 14px;
    line-height: 18px;
  }
  .main-wrapper .h8 {
    font-size: 7.2vw;
    line-height: 49px;
    letter-spacing: -1.6px;
  }
  .main-wrapper .p1 {
    font-size: 12px;
    line-height: 20px;
  }
  .main-wrapper .p1-2 {
    font-size: 16px;
    line-height: 24px;
  }
  .main-wrapper .p1-3 {
    font-size: 12px;
    line-height: 20px;
    font-family: 'OPPOSans-H';
  }
  .main-wrapper .p1-4 {
    font-size: 12px;
    line-height: 17px;
  }
  .main-wrapper .p2 {
    font-size: 16px;
    line-height: 27px;
  }
  .main-wrapper .p2-1 {
    font-size: 12px;
    line-height: 20px;
  }
  .main-wrapper .p2-2 {
    font-size: 16px;
    line-height: 27px;
  }
  .main-wrapper .p3 {
    font-size: 12px;
    line-height: 20px;
  }
  .main-wrapper .btn-1 {
    font-size: 14px;
    line-height: 27px;
  }
  .main-wrapper .btn-2 {
    font-size: 12px;
    line-height: 27px;
  }
  .main-wrapper .btn-3 {
    font-size: 14px;
    line-height: 27px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  .main-wrapper .h2 {
    font-size: 25px;
    line-height: 34px;
  }
  .main-wrapper .h3 {
    font-size: 25px;
    line-height: 34px;
  }
  .main-wrapper .h4 {
    font-size: 15px;
    line-height: 22px;
  }
  .main-wrapper .h5 {
    font-size: 16px;
    line-height: 21px;
  }
  .main-wrapper .h5.h5-1 {
    font-size: 12px;
    line-height: 21px;
  }
  .main-wrapper .h6 {
    font-size: 22px;
    line-height: 30px;
  }
  .main-wrapper .h7 {
    font-size: 9.24px;
    line-height: 12px;
  }
  .main-wrapper .h8 {
    font-size: 4vw;
    line-height: 57px;
    letter-spacing: -2px;
  }
  .main-wrapper .p1 {
    font-size: 12px;
    line-height: 14px;
  }
  .main-wrapper .p1-2 {
    font-size: 16px;
    line-height: 22px;
  }
  .main-wrapper .p1-3 {
    font-size: 10px;
    line-height: 14px;
  }
  .main-wrapper .p1-4 {
    font-size: 12px;
    line-height: 17px;
  }
  .main-wrapper .p2 {
    font-size: 14px;
    line-height: 22px;
  }
  .main-wrapper .p2-1 {
    font-size: 10px;
    line-height: 16px;
  }
  .main-wrapper .p2-2 {
    font-size: 12px;
    line-height: 18px;
  }
  .main-wrapper .p3 {
    font-size: 8px;
    line-height: 8.4px;
  }
  .main-wrapper .p3-1 {
    font-size: 10px;
    line-height: 12px;
  }
  .main-wrapper .btn-1 {
    font-size: 10px;
    line-height: 14px;
  }
  .main-wrapper .btn-2 {
    font-size: 10px;
    line-height: 8.4px;
  }
  .main-wrapper .btn-3 {
    font-size: 11px;
    line-height: 16px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .main-wrapper .h2 {
    font-size: 36px;
    line-height: 48px;
  }
  .main-wrapper .h3 {
    font-size: 36px;
    line-height: 48px;
  }
  .main-wrapper .h4 {
    font-size: 16px;
    line-height: 24px;
  }
  .main-wrapper .h5 {
    font-size: 22px;
    line-height: 30px;
  }
  .main-wrapper .h5.h5-1 {
    font-size: 18px;
    line-height: 30px;
  }
  .main-wrapper .h6 {
    font-size: 28px;
    line-height: 38px;
  }
  .main-wrapper .h7 {
    font-size: 13.2px;
    line-height: 17px;
  }
  .main-wrapper .h8 {
    font-size: 3.35vw;
    line-height: 87px;
    letter-spacing: -3.8px;
  }
  .main-wrapper .p1 {
    font-size: 14px;
    line-height: 20px;
  }
  .main-wrapper .p1-2 {
    font-size: 16px;
    line-height: 24px;
  }
  .main-wrapper .p1-3 {
    font-size: 12px;
    line-height: 20px;
  }
  .main-wrapper .p1-4 {
    font-size: 12px;
    line-height: 17px;
  }
  .main-wrapper .p2 {
    font-size: 15px;
    line-height: 25px;
  }
  .main-wrapper .p2-1 {
    font-size: 12px;
    line-height: 18px;
  }
  .main-wrapper .p2-2 {
    font-size: 14px;
    line-height: 22px;
  }
  .main-wrapper .p3 {
    font-size: 11px;
    line-height: 12px;
  }
  .main-wrapper .p3-1 {
    font-size: 8px;
    line-height: 20px;
  }
  .main-wrapper .btn-1 {
    font-size: 12px;
    line-height: 14px;
  }
  .main-wrapper .btn-2 {
    font-size: 12px;
    line-height: 16px;
  }
  .main-wrapper .btn-3 {
    font-size: 12px;
    line-height: 17px;
  }
}
@media (min-width: 1921px) {
  .main-wrapper .h2 {
    font-size: 60px;
    line-height: 78px;
  }
  .main-wrapper .h3 {
    font-size: 60px;
    line-height: 78px;
  }
  .main-wrapper .h4 {
    font-size: 27px;
    line-height: 40px;
  }
  .main-wrapper .h5 {
    font-size: 36px;
    line-height: 50px;
  }
  .main-wrapper .h5.h5-1 {
    font-size: 30px;
    line-height: 50px;
  }
  .main-wrapper .h6 {
    font-size: 48px;
    line-height: 65px;
  }
  .main-wrapper .h7 {
    font-size: 22px;
    line-height: 28px;
  }
  .main-wrapper .h8 {
    font-size: 3.35vw;
    line-height: 164px;
    letter-spacing: -5.6px;
  }
  .main-wrapper .p1 {
    font-size: 20px;
    line-height: 32px;
  }
  .main-wrapper .p1-2 {
    font-size: 27px;
    line-height: 40px;
  }
  .main-wrapper .p1-3 {
    font-size: 16px;
    line-height: 32px;
  }
  .main-wrapper .p1-4 {
    font-size: 12px;
    line-height: 20px;
  }
  .main-wrapper .p2 {
    font-size: 20px;
    line-height: 32px;
  }
  .main-wrapper .p2-1 {
    font-size: 12px;
    line-height: 24px;
  }
  .main-wrapper .p2-2 {
    font-size: 20px;
    line-height: 32px;
  }
  .main-wrapper .p3 {
    font-size: 18px;
    line-height: 20px;
  }
  .main-wrapper .p3-1 {
    font-size: 12px;
    line-height: 32px;
  }
  .main-wrapper .btn-1 {
    font-size: 17px;
    line-height: 22px;
  }
  .main-wrapper .btn-2 {
    font-size: 12px;
    line-height: 16px;
  }
  .main-wrapper .btn-3 {
    font-size: 18px;
    line-height: 25px;
  }
}
.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;
}
.vertical-center {
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
.vertical-center > * {
  width: 100%;
}
.top-light {
  position: absolute;
  width: 100%;
  height: 5em;
  top: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(#111), to(#000));
  background: -webkit-linear-gradient(#111 0%, #000 100%);
  background: linear-gradient(#111 0%, #000 100%);
}
.moti,
.moti2 {
  opacity: 0;
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}
.active {
  opacity: 1;
}
.top-none {
  opacity: 0.6;
}
.bottom-none {
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  opacity: 0;
}
.text-center {
  text-align: center;
}
.switch-button-center-wrapper {
  text-align: center;
}
.switch-button-container {
  display: inline-block;
  margin: auto;
  background-color: #fff;
  overflow: hidden;
}
.switch-button-container .switch-button {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  text-align: center;
  color: #000;
  cursor: pointer;
  opacity: 0.4;
}
.switch-button-container .switch-button.active {
  opacity: 1;
  background-color: #000;
}
.gradientbg {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 4em;
  margin-top: -4em;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.2)), to(rgba(255,255,255,0)));
  background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.2), rgba(255,255,255,0));
  background-image: linear-gradient(to top, rgba(0,0,0,0.2), rgba(255,255,255,0));
}
@media (max-width: 568px) {
  .gradientbg {
    width: 100%;
    height: 3em;
    margin-top: -3em;
  }
}
.gradientbg.reverse {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(255,255,255,0.2)));
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(255,255,255,0.2));
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(255,255,255,0.2));
}
.gradientbg.white-reverse {
  margin-top: 0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)), to(rgba(255,255,255,0)));
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.2), rgba(255,255,255,0));
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(255,255,255,0));
}