/* blocks */
/* mixins */
/* functions */
@font-face {
  font-family: "OPPOSans-M";
  src: url(https://assorted.downloads.oppo.com/static/assets/products/reno3-pro-black-blue-white/styles/font/OPPOSans-Medium-08f2c958880ab2ce3e3b4dfa92ae49e8.ttf) format('truetype'), url(https://assorted.downloads.oppo.com/static/assets/products/reno3-pro-black-blue-white/styles/font/OPPOSans-Medium-dbe789e189b0bd6628758ce0c6227f56.woff) format('woff');
  font-style: normal;
  font-weight: 200;
}
@font-face {
  font-family: "OPPOSans-H";
  src: url(https://assorted.downloads.oppo.com/static/assets/products/reno3-pro-black-blue-white/styles/font/OPPOSans-Heavy-95af9d8fbde7be2b381524396ee7a5aa.ttf) format('truetype'), url(https://assorted.downloads.oppo.com/static/assets/products/reno3-pro-black-blue-white/styles/font/OPPOSans-Heavy-e32257bb747f00043d43f5d1c67e9e25.woff) format('woff');
  font-style: normal;
  font-weight: 200;
}
@font-face {
  font-family: "OPPOSans-B";
  src: url(https://assorted.downloads.oppo.com/static/assets/products/reno3-pro-black-blue-white/styles/font/OPPOSans-B-fb8636baa85c454f004143d33d1fe40a.ttf) format('truetype'), url(https://assorted.downloads.oppo.com/static/assets/products/reno3-pro-black-blue-white/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;
  }
}
.h0 {
  font-family: 'OPPOSans-B';
  color: #110;
}
.h2,
.h3,
.h4,
.h5,
.h6 {
  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: #808080;
}
.grey-1 {
  color: #919191;
}
.grey-2 {
  color: #9b9b9b;
}
.black {
  color: #000;
}
.black-1 {
  color: rgba(0,0,0,0.6);
}
@media (max-width: 568px) {
  .h0 {
    font-size: 7.2vw;
    line-height: 49px;
    letter-spacing: -1.6px;
  }
  .h2 {
    font-size: 34px;
    line-height: 42px;
  }
  .h3 {
    font-size: 34px;
    line-height: 42px;
  }
  .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.h5-2 {
    font-size: 22px;
    line-height: 60px;
  }
  .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;
  }
  .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) {
  .h0 {
    font-size: 4.03vw;
    line-height: 57px;
    letter-spacing: -2px;
  }
  .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;
  }
  .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: 13.4px;
  }
  .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) {
  .h0 {
    font-size: 3.35vw;
    line-height: 87px;
    letter-spacing: -3.8px;
  }
  .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;
  }
  .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;
  }
  .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) {
  .h0 {
    font-size: 3.35vw;
    line-height: 164px;
    letter-spacing: -5.6px;
  }
  .h2 {
    font-size: 60px;
    line-height: 78px;
  }
  .h3 {
    font-size: 60px;
    line-height: 72px;
  }
  .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;
  }
  .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: 16px;
    line-height: 22px;
  }
  .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;
  }
  .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 .title > div {
  margin-left: -0.3vw;
}
#kv .content .text img {
  width: 100%;
}
#kv .content .phone-container {
  position: absolute;
  z-index: 1;
}
#kv .content .kv-sub {
  z-index: 0;
}
#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 - 8.5vh);
    width: 120vh;
    height: 99.5vh;
    top: -1vh;
  }
  #kv .content .phone-2 {
    top: 56vh;
    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: 11.2vh;
    left: 69vh;
    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: 27vw;
    right: -2vw;
    width: 75vw;
    height: 112vw;
  }
  #kv .content .phone-2 {
    top: 109vw;
    width: 100vw;
    height: 71.43vw;
    left: 0;
  }
  #kv .content .kv-sub {
    position: absolute;
    top: 169vw;
    width: 100vw;
    text-align: center;
  }
}
@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: 28vh;
    left: 36vh;
    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 .videobox {
  position: relative;
  margin-bottom: 6.67em;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-align: center;
          align-items: center;
}
#camera-1 .videobox .cover {
  width: 100%;
  height: auto;
}
#camera-1 .videobox .play {
  position: absolute;
  width: 1.78em;
  top: 8em;
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-1 .videobox .play {
    top: 6em;
  }
}
@media (max-width: 568px) {
  #camera-1 .videobox .play {
    top: 3.5em;
  }
}
#camera-1 .videobox .vmask {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 0.5;
}
#camera-1 .videobox .text {
  position: absolute;
  text-align: center;
  top: 6em;
  font-size: 36px;
  line-height: 50px;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #camera-1 .videobox .text {
    font-size: 22px;
    line-height: 30px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-1 .videobox .text {
    font-size: 16px;
    line-height: 21px;
  }
}
@media (max-width: 568px) {
  #camera-1 .videobox .text {
    font-size: 18px;
    line-height: 24px;
  }
}
@media (max-width: 568px) {
  #camera-1 .videobox .text {
    top: 2em;
  }
}
#camera-1 .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-1 .bgvideo {
    padding-top: 50px;
  }
}
#camera-1 .bgvideo.show {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
#camera-1 .bgvideo video {
  width: 80%;
  height: auto;
}
@media (max-width: 568px) {
  #camera-1 .bgvideo video {
    width: 100%;
    height: 100%;
  }
}
#camera-1 .bgvideo .close {
  cursor: pointer;
  position: absolute;
  z-index: 2;
  right: 15px;
  top: 15px;
  width: 30px;
  height: 30px;
}
@media (max-width: 568px) {
  #camera-1 .bgvideo .close {
    right: 10px;
    top: 10px;
    width: 28px;
    height: 28px;
  }
}
#camera-1 .bgvideo .close img {
  width: 100%;
}
@media (max-width: 568px) {
  #camera-1 .title-anime {
    padding-left: 0.5em;
    height: 108px;
  }
}
#camera-1 .title-front {
  position: relative;
  height: 60em;
  margin-top: 5.0222em;
  background: #fff;
}
#camera-1 .title-front .mobile-cam {
  display: none;
}
#camera-1 .title-front .img-container {
  max-width: 300%;
  margin-top: 2.9em;
  width: 84vw;
  height: 28vw;
  object-fit: cover;
  object-position: left top;
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-1 .title-front .img-container {
    width: 100vw;
  }
}
#camera-1 .abstract {
  margin: 5em 0 2.6em 0;
}
#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 3.4em 0;
  width: 13.3111em;
}
#camera-1 .intro-front .desc-mid {
  margin: 1.64em 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 .comment {
  display: none;
}
#camera-1 .intro-front .desc-horizon .features {
  width: 10em;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  margin: 1.1em 0 0 0;
}
#camera-1 .intro-front .desc-horizon .features .item {
  width: 4em;
  margin: 0 1em 0.8em 0;
}
#camera-1 .intro-front .desc-horizon .features .item .badge {
  margin-bottom: 0.2em;
  width: 1em;
  height: 1em;
}
@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: 11.2em;
    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: 4em 1em 3em 1em;
  }
  #camera-1 .abstract .h3 {
    letter-spacing: -1.8px;
    line-height: 1.31;
    font-size: 32px;
  }
  #camera-1 .abstract .part-2 {
    width: 6em;
  }
  #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: 5em;
  }
  #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 .cam2-mask .title-front .abstract .h3 {
  white-space: nowrap;
}
@media (max-width: 568px) {
  #camera-2 .cam2-mask .title-front .abstract .h3 {
    white-space: normal;
  }
}
#camera-2 .h3 {
  letter-spacing: -1px;
}
#camera-2 .tips {
  margin: 1em 0 0 2.5em;
}
@media (max-width: 568px) {
  #camera-2 .tips {
    margin: 0 1em;
  }
}
@media (max-width: 568px) {
  #camera-2 .item-full {
    width: 100% !important;
  }
  #camera-2 .item-full .smaller {
    max-width: 100% !important;
  }
}
#camera-2 .cam2-mask {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: #fff;
  height: 100vh;
  min-height: 100vh;
}
#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 {
  -webkit-transition: -webkit-transform 0.04s linear;
  transition: -webkit-transform 0.04s linear;
  transition: transform 0.04s linear;
  transition: transform 0.04s linear, -webkit-transform 0.04s linear;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-top: 15vh;
  background: #fff;
}
#camera-2 .title-front .sub-container {
  width: 80vh;
}
@media (max-width: 1024px) and (min-height: 1000px) {
  #camera-2 .title-front .sub-container {
    width: 21.16em;
    margin-top: 5em;
  }
}
#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: 5.5em;
  }
}
#camera-2 .title-front .specs .data {
  margin-top: 4.8em;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #camera-2 .title-front .specs .data {
    margin-top: 13.3vh;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-2 .title-front .specs .data {
    margin-top: 2.8em;
  }
}
@media (max-width: 1024px) and (min-height: 1000px) {
  #camera-2 .title-front .specs .data {
    margin-top: 4.8em;
  }
}
#camera-2 .title-front .specs .item {
  margin-bottom: 0.6em;
  white-space: nowrap;
}
@media (max-width: 568px) {
  #camera-2 .title-front .specs .item {
    white-space: normal;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #camera-2 .title-front .specs .item .h4,
  #camera-2 .title-front .specs .item .p1-2 {
    font-size: 1.8vh;
    line-height: 1.5;
  }
}
#camera-2 .title-front .img-container {
  width: 48vh;
  height: 70vh;
}
@media (max-width: 1024px) and (min-height: 1000px) {
  #camera-2 .title-front .img-container {
    width: 12.32em;
    height: 17.4em;
    -webkit-transform: translateY(35px);
            transform: translateY(35px);
  }
}
#camera-2 .intro-back {
  background: #f5f5f5;
  position: relative;
  padding-top: 4.3em;
}
#camera-2 .intro-back .second {
  margin-top: 5em;
}
#camera-2 .intro-back .img-container {
  position: relative;
  margin: 1.3em 0 0.7em 0;
  background: #000;
  width: 26.6em;
}
#camera-2 .intro-back .img-container .high-pixel {
  width: 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: 35%;
  left: 17%;
  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 .img-container {
  height: 20em;
}
#camera-2 .intro-back .detail-1 .second .img-container {
  height: 18.29em;
}
#camera-2 .intro-back .detail-2 {
  margin-top: 6.2em;
}
#camera-2 .intro-back .detail-2 .desc {
  margin: 1.2em 0 0 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: 2em 0;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #camera-2 .intro-back .detail-2 .margin-top {
    margin: 2em 0;
  }
}
@media (min-width: 1921px) {
  #camera-2 .intro-back .detail-2 .margin-top {
    margin: 2em 0;
  }
}
#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 0em 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: 6.5em;
  margin-bottom: 2.67em;
}
#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;
}
#camera-2 .intro-dark .desc .p2 {
  margin-top: 1.4444em;
}
#camera-2 .intro-dark .desc .p1-4 {
  margin-top: 1.6889em;
}
#camera-2 .intro-dark .dark-2 {
  width: 26.67em;
  height: 19.1em;
  margin-top: 2em;
}
@media (max-width: 568px) {
  #camera-2 .intro-dark .dark-2 {
    width: 100vw;
    height: 72.5vw;
  }
}
#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 (min-width: 1025px) and (max-width: 1920px) {
  #camera-2 .reno-link .link-btn .p2 {
    line-height: 48px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #camera-2 .reno-link .link-btn .p2 {
    line-height: 36px;
    font-size: 12px;
  }
}
@media (min-width: 1921px) {
  #camera-2 .reno-link .link-btn .p2 {
    line-height: 57px;
  }
}
@media (max-width: 568px) {
  #camera-2 {
    padding-bottom: 5em;
  }
  #camera-2 .cam2-mask {
    height: 26em;
    min-height: 100vh;
  }
  #camera-2 .sub-container {
    margin: 0;
    width: 100vw !important;
  }
  #camera-2 .left-gap {
    margin: 1em;
  }
  #camera-2 .title-front {
    width: 100vw;
    position: absolute;
    top: 0;
    right: 0;
    padding-top: 3em;
    padding-left: 1.1667em;
    background: #fff;
  }
  #camera-2 .title-front .abstract {
    width: 9em;
  }
  #camera-2 .title-front .specs {
    margin-top: 1.5em;
    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: 6em;
    height: 18em;
  }
  #camera-2 .title-front .img-mp img {
    width: 100%;
    height: 100%;
  }
  #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 .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: 4em;
  }
  #camera-2 .intro-back .detail-2 .desc {
    width: auto;
  }
  #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 0em 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;
  }
  #camera-2 .intro-dark .img-container {
    width: 100vw;
    height: 73vw;
    background-position: center;
  }
  #camera-2 .intro-dark .img-container .title {
    padding-top: 1em;
  }
  #camera-2 .intro-dark .img-container .title .gray {
    color: #808080;
  }
  #camera-2 .intro-dark .desc {
    padding-right: 0;
  }
  #camera-2 .reno-link {
    margin: 5.5em auto 0 auto;
    width: 80vw;
  }
  #camera-2 .reno-link .title {
    padding-top: 3.3em;
  }
  #camera-2 .reno-link .h4 {
    font-size: 26px;
  }
  #camera-2 .reno-link .p2 {
    font-size: 14px;
  }
  #camera-2 .reno-link .link-btn {
    height: 46px;
    border-radius: 23px;
  }
  #camera-2 .reno-link .link-btn .p2 {
    line-height: 46px;
  }
  #camera-2 .reno-link .background-link {
    background-size: 110%;
    opacity: 0.6;
    width: 80vw;
    height: 100vw;
  }
  #camera-2 .reno-link .anime-1 {
    -webkit-animation: progress-link-2 0.8s ease-in-out 0s 1 normal forwards;
            animation: progress-link-2 0.8s ease-in-out 0s 1 normal forwards;
  }
}
@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%;
  }
}
@media (max-width: 568px) and (max-width: 568px) {
  .flex-width {
    width: 45%;
  }
}
.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;
  }
}
.h0 {
  font-family: 'OPPOSans-B';
  color: #110;
}
.h2,
.h3,
.h4,
.h5,
.h6 {
  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: #808080;
}
.grey-1 {
  color: #919191;
}
.grey-2 {
  color: #9b9b9b;
}
.black {
  color: #000;
}
.black-1 {
  color: rgba(0,0,0,0.6);
}
@media (max-width: 568px) {
  .h0 {
    font-size: 7.2vw;
    line-height: 49px;
    letter-spacing: -1.6px;
  }
  .h2 {
    font-size: 34px;
    line-height: 42px;
  }
  .h3 {
    font-size: 34px;
    line-height: 42px;
  }
  .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.h5-2 {
    font-size: 22px;
    line-height: 60px;
  }
  .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;
  }
  .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) {
  .h0 {
    font-size: 4.03vw;
    line-height: 57px;
    letter-spacing: -2px;
  }
  .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;
  }
  .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: 13.4px;
  }
  .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) {
  .h0 {
    font-size: 3.35vw;
    line-height: 87px;
    letter-spacing: -3.8px;
  }
  .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;
  }
  .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;
  }
  .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) {
  .h0 {
    font-size: 3.35vw;
    line-height: 164px;
    letter-spacing: -5.6px;
  }
  .h2 {
    font-size: 60px;
    line-height: 78px;
  }
  .h3 {
    font-size: 60px;
    line-height: 72px;
  }
  .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;
  }
  .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: 16px;
    line-height: 22px;
  }
  .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;
  }
  .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;
  -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: hidden;
}
@media (max-width: 568px) {
  #sleek-1 .sticky1 .sticky-item1 {
    overflow: visible;
  }
}
#sleek-1 .content {
  background-color: #fff;
  margin: 0 auto;
}
#sleek-1 .content .narrow-1 {
  padding-top: 10em;
  padding-left: 2.48em;
}
@media (max-width: 568px) {
  #sleek-1 .content .narrow-1 {
    padding-top: 6em;
    padding-left: 0;
  }
}
#sleek-1 .content .narrow-container {
  margin: 0 auto;
}
@media (max-width: 568px) {
  #sleek-1 .content .narrow-container {
    padding-top: 0px;
  }
}
#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-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: 476px;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #sleek-1 .section-1 .picture-container {
    height: 478px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #sleek-1 .section-1 .picture-container {
    height: 13.48em;
  }
}
#sleek-1 .section-2 .picture-container {
  width: 1050px;
  height: 586px;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #sleek-1 .section-2 .picture-container {
    width: 612px;
    height: 343px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #sleek-1 .section-2 .picture-container {
    width: 17.12em;
    height: 9.64em;
  }
}
@media (max-width: 568px) {
  #sleek-1 .section-2 .picture-container {
    width: 13em;
    height: 9.9667em;
    left: 0.5em;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #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;
  }
  #sleek-1 .content .narrow-container .intro-container {
    padding-left: 0;
  }
  #sleek-1 .content .narrow-container .intro-container .sub-title-1 {
    margin-top: 5.5em;
  }
  #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: 6.7667em;
  }
  #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 .desc-wrapper {
    margin-top: 1.8em;
    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 .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;
  }
}
.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;
  }
}
.h0 {
  font-family: 'OPPOSans-B';
  color: #110;
}
.h2,
.h3,
.h4,
.h5,
.h6 {
  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: #808080;
}
.grey-1 {
  color: #919191;
}
.grey-2 {
  color: #9b9b9b;
}
.black {
  color: #000;
}
.black-1 {
  color: rgba(0,0,0,0.6);
}
@media (max-width: 568px) {
  .h0 {
    font-size: 7.2vw;
    line-height: 49px;
    letter-spacing: -1.6px;
  }
  .h2 {
    font-size: 34px;
    line-height: 42px;
  }
  .h3 {
    font-size: 34px;
    line-height: 42px;
  }
  .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.h5-2 {
    font-size: 22px;
    line-height: 60px;
  }
  .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;
  }
  .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) {
  .h0 {
    font-size: 4.03vw;
    line-height: 57px;
    letter-spacing: -2px;
  }
  .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;
  }
  .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: 13.4px;
  }
  .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) {
  .h0 {
    font-size: 3.35vw;
    line-height: 87px;
    letter-spacing: -3.8px;
  }
  .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;
  }
  .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;
  }
  .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) {
  .h0 {
    font-size: 3.35vw;
    line-height: 164px;
    letter-spacing: -5.6px;
  }
  .h2 {
    font-size: 60px;
    line-height: 78px;
  }
  .h3 {
    font-size: 60px;
    line-height: 72px;
  }
  .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;
  }
  .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: 16px;
    line-height: 22px;
  }
  .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;
  }
  .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-2 {
  position: relative;
  z-index: 1;
}
#sleek-2 .flex-wrapper,
#sleek-2 .item-1 {
  display: -webkit-box;
  display: flex;
}
#sleek-2 .margin-wrapper {
  background: #000;
  margin-top: -1px;
}
#sleek-2 .inline {
  display: inline-block;
}
#sleek-2 .desc {
  opacity: 0.6;
}
#sleek-2 .sleek-container {
  background: #000;
  width: 100vw;
  height: 180vh;
}
#sleek-2 .sleek-container .sleek-sticky {
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
}
#sleek-2 .sleek-container .sleek-sticky .wrapper2 {
  position: relative;
}
#sleek-2 .sticky-container {
  margin: 0 auto;
  -webkit-transition: background-color 0.5s linear;
  transition: background-color 0.5s linear;
  position: relative;
  height: 250vh;
  padding-top: 0;
}
#sleek-2 .sticky-container .sticky-item {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}
#sleek-2 .sticky-container .sticky-item .wrapper {
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  margin: 0 auto;
  position: relative;
}
#sleek-2 .sticky-container .sticky-item .wrapper .sub-wrapper {
  position: relative;
}
#sleek-2 .sticky-container .sticky-item .wrapper .sub-wrapper .title-wrapper {
  left: 2.5em;
  top: 2.5em;
  position: absolute;
}
#sleek-2 .sticky-container .sticky-item .wrapper .sub-wrapper .title-wrapper .title {
  -webkit-transition: opacity 0.5s linear;
  transition: opacity 0.5s linear;
  position: absolute;
  white-space: nowrap;
  z-index: 1;
}
#sleek-2 .sticky-container .sticky-item .wrapper .sub-wrapper .tuv-wrapper {
  left: 2.5em;
  top: 2.5em;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
}
#sleek-2 .sticky-container .sticky-item .wrapper .sub-wrapper .tuv-wrapper .title {
  position: relative;
}
#sleek-2 .sticky-container .sticky-item .wrapper .sub-wrapper .tuv-wrapper img {
  -webkit-transition: opacity 0.5s linear;
  transition: opacity 0.5s linear;
  position: relative;
  z-index: 1;
  width: 1.5em;
  height: 1.5em;
  margin-top: 1em;
  opacity: 0;
}
#sleek-2 .sticky-container .sticky-item .wrapper .sub-wrapper .image-wrapper {
  position: absolute;
}
#sleek-2 .sticky-container .sticky-item .wrapper .sub-wrapper .image-wrapper img {
  -webkit-transition: opacity 0.5s linear;
  transition: opacity 0.5s linear;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
#sleek-2 .content {
  background-color: #fff;
  margin: -1px auto 0 auto;
  z-index: 1;
  padding-top: 5.96em;
}
#sleek-2 .content .narrow-container {
  margin: 0 auto;
}
#sleek-2 .content .narrow-container.part1 {
  padding-bottom: 3em;
}
#sleek-2 .content .narrow-container .intro-container {
  padding-left: 2.48em;
  position: relative;
}
#sleek-2 .content .narrow-container .intro-container .sub-title-1 {
  margin-top: 4.8em;
}
#sleek-2 .content .narrow-container .intro-container .desc {
  margin-top: 1.27em;
  width: 35em;
}
#sleek-2 .content .narrow-container .intro-container .main-title {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 3em;
}
#sleek-2 .content .narrow-container .intro-container .main-title .masked {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  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-2 .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-2 .content .narrow-container .picture-container {
  margin-top: 2.08em;
  position: relative;
}
#sleek-2 .content .narrow-container .picture-container.no-margin {
  margin-top: 0;
}
#sleek-2 .content .narrow-container .picture-container .phone {
  width: 100%;
}
#sleek-2 .content .narrow-container .picture-container .desc-wrapper {
  position: absolute;
  top: 87.6px;
  left: 68.4px;
}
#sleek-2 .content .narrow-container .picture-container .desc-wrapper .wrapper2 {
  margin-top: 38.4px;
}
#sleek-2 .content .narrow-container .picture-container .desc-wrapper img {
  position: absolute;
}
#sleek-2 .content .narrow-container .picture-container .pic {
  width: 100%;
}
#sleek-2 .content .narrow-container .picture-container .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  left: 0;
  top: 0;
  margin-left: 1%;
}
@media (max-width: 568px) {
  #sleek-2 .content .narrow-container .picture-container .overlay {
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
    width: 200%;
    left: -50%;
    margin-top: -10px;
    margin-left: 0;
  }
}
#sleek-2 .content .narrow-container .picture-container .overlay .diagonal-shape {
  width: 0;
  height: 1px;
  border-top: solid #fff 1px;
  margin-bottom: 20px;
}
#sleek-2 .content .narrow-container .picture-container .overlay .diagonal-shape.right {
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  margin-top: 27px;
}
@media (min-width: 569px) and (max-width: 1024px) {
  #sleek-2 .content .narrow-container .picture-container .overlay .diagonal-shape.right {
    margin-top: 33px;
  }
}
@media (max-width: 568px) {
  #sleek-2 .content .narrow-container .picture-container .overlay .diagonal-shape.right {
    margin-top: 35px;
  }
}
#sleek-2 .content .narrow-container .picture-container .overlay .diagonal-shape.left {
  -webkit-transform-origin: right;
          transform-origin: right;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  padding-bottom: 20px;
}
@media (max-width: 568px) {
  #sleek-2 .content .narrow-container .picture-container .overlay .diagonal-shape.left {
    padding-bottom: 10px;
  }
}
#sleek-2 .content .narrow-container .picture-container .overlay .diagonal-desc {
  opacity: 0;
  padding: 5px;
  margin-bottom: 20px;
  white-space: nowrap;
}
@media (max-width: 568px) {
  #sleek-2 .content .narrow-container .picture-container .overlay .diagonal-desc {
    -webkit-transform: rotate(-60deg);
            transform: rotate(-60deg);
  }
}
#sleek-2 .content .narrow-container .picture-container .overlay .diagonal-desc.p2 {
  font-size: 10px;
}
#sleek-2 .content.part2 {
  padding-bottom: 5em;
}
#sleek-2 .last-container .img-wrapper {
  margin-left: auto;
}
#sleek-2 .last-container .img-wrapper img {
  width: 100%;
  height: auto;
}
#sleek-2 .text-wrapper {
  position: absolute;
}
@media (min-width: 1921px) {
  #sleek-2 .content .sticky-container .wrapper .sub-wrapper {
    width: 1200px;
    height: 800px;
  }
  #sleek-2 .content .sticky-container .wrapper .sub-wrapper .image-wrapper {
    width: 1200px;
  }
  #sleek-2 .content .wrapper1 {
    margin-top: 202px;
    padding-left: 2.48em;
  }
  #sleek-2 .content .wrapper2 {
    margin-top: 68px;
    padding-left: 2.48em;
  }
  #sleek-2 .last-container .img-wrapper {
    width: 1478px;
    margin-top: 190px;
    -webkit-transform: translateX(80px);
            transform: translateX(80px);
  }
  #sleek-2 .part2 .desc {
    margin-top: 70px;
    width: 731px;
  }
  #sleek-2 .part2 .img-wrapper {
    height: 563px;
  }
  #sleek-2 .part2 .intro-container {
    padding-left: 160px;
  }
  #sleek-2 .part2 .text-wrapper {
    left: 160px;
    top: 497px;
  }
  #sleek-2 .part1 .img-wrapper {
    height: 376px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #sleek-2 .content .sticky-container .wrapper .sub-wrapper {
    width: 720px;
    height: 480px;
  }
  #sleek-2 .content .sticky-container .wrapper .sub-wrapper .image-wrapper {
    width: 720px;
  }
  #sleek-2 .content .narrow-container .intro-container .desc {
    margin-top: 44px;
    width: 438px;
  }
  #sleek-2 .content .wrapper1 {
    margin-top: 83px;
    padding-left: 2.48em;
  }
  #sleek-2 .content .wrapper2 {
    margin-top: 50px;
    padding-left: 2.48em;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  #sleek-2 .last-container .img-wrapper {
    margin-top: 67px;
    width: 859px;
    -webkit-transform: translateX(70px);
            transform: translateX(70px);
  }
  #sleek-2 .part2 .intro-container {
    padding-left: 80px;
  }
  #sleek-2 .part2 .desc {
    margin-top: 32px;
    width: 520px;
  }
  #sleek-2 .part2 .img-wrapper {
    height: 351px;
  }
  #sleek-2 .part2 .text-wrapper {
    top: 270px;
    left: 80px;
  }
  #sleek-2 .part1 .img-wrapper {
    height: 226px;
  }
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #sleek-2 .last-container .img-wrapper {
    margin-top: 3.49vw;
    width: 60.417vw;
    -webkit-transform: translateX(3.646vw);
            transform: translateX(3.646vw);
  }
  #sleek-2 .part2 .intro-container {
    padding-left: 4.167vw;
  }
  #sleek-2 .part2 .desc {
    margin-top: 1.667vw;
    width: 27.083vw;
  }
  #sleek-2 .part2 .text-wrapper {
    top: 18.75vw;
    left: 4.167vw;
  }
  #sleek-2 .part1 .img-wrapper {
    height: 11.771vw;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #sleek-2 .content .sticky-container .wrapper .sub-wrapper {
    width: 65.625vw;
    height: 43.75vw;
  }
  #sleek-2 .content .sticky-container .wrapper .image-wrapper {
    width: 65.625vw;
  }
  #sleek-2 .content .wrapper1 {
    margin-top: 1.92em;
    padding-left: 2.48em;
  }
  #sleek-2 .content .wrapper2 {
    margin-top: 1.44em;
    padding-left: 2.48em;
  }
  #sleek-2 .last-container .img-wrapper {
    margin-top: 2.8em;
    width: 20.12em;
  }
  #sleek-2 .desc {
    width: 360px !important;
  }
  #sleek-2 .part2 .desc {
    margin-top: 0.96em;
  }
  #sleek-2 .part2 .img-wrapper {
    height: 9.76em;
  }
  #sleek-2 .part2 .text-wrapper {
    top: 7.2em;
    left: 0;
  }
  #sleek-2 .part1 .img-wrapper {
    height: 6.32em;
  }
}
@media (max-width: 568px) {
  #sleek-2 .content .narrow-container {
    width: 10.1em;
  }
  #sleek-2 .content .narrow-container .intro-container {
    padding-left: 0;
  }
  #sleek-2 .content .narrow-container .intro-container .sub-title-1 {
    margin-top: 3.3em;
  }
  #sleek-2 .content .narrow-container .intro-container .main-title {
    height: 4.66em;
  }
  #sleek-2 .content .narrow-container .intro-container .desc {
    width: 100%;
    margin-top: 43px;
  }
  #sleek-2 .content .narrow-container .diagonal {
    width: 9.33em;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
            justify-content: center;
    margin-top: 1.23em;
  }
  #sleek-2 .content .narrow-container .diagonal .img-wrapper {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
            justify-content: center;
    width: 70%;
  }
  #sleek-2 .desc-wrapper-2 {
    width: 9.33em;
  }
  #sleek-2 .sticky-container {
    padding: 0;
  }
  #sleek-2 .sticky-container .sticky-item .wrapper .sub-wrapper {
    width: 100vw;
    height: 100vh;
  }
  #sleek-2 .sticky-container .sticky-item .wrapper .sub-wrapper .title-wrapper {
    position: absolute;
    margin: 0;
    left: 15vw;
    top: 4em;
    width: 80vw;
  }
  #sleek-2 .sticky-container .sticky-item .wrapper .sub-wrapper .title-wrapper .title {
    white-space: normal;
    word-break: break-all;
  }
  #sleek-2 .sticky-container .sticky-item .wrapper .sub-wrapper .tuv-wrapper {
    left: 15vw;
    width: 75vw;
    top: 4em;
  }
  #sleek-2 .sticky-container .sticky-item .wrapper .sub-wrapper .tuv-wrapper .title {
    position: relative;
  }
  #sleek-2 .sticky-container .sticky-item .wrapper .sub-wrapper .tuv-wrapper img {
    position: relative;
    margin-top: 1.5em;
  }
  #sleek-2 .sticky-container .sticky-item .wrapper .sub-wrapper .image-wrapper {
    height: 100vh;
    width: 100vw;
    top: 0;
  }
  #sleek-2 .sticky-container .sticky-item .wrapper .sub-wrapper .image-wrapper img {
    height: 100vh;
    width: 100vw;
  }
  #sleek-2 .last-container {
    margin-top: 2.36em;
    display: block;
  }
  #sleek-2 .last-container .img-wrapper {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  #sleek-2 .wrappers {
    display: -webkit-box;
    display: flex;
  }
  #sleek-2 .wrappers .wrapper2 {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-pack: end;
            justify-content: flex-end;
  }
  .part1 .picture-container .img-wrapper {
    width: 6.5em;
    height: 20.8333em;
  }
  .part1 .picture-container .img-wrapper .pic {
    width: 100%;
    height: auto;
  }
  .part2 {
    padding-bottom: 0.8333em;
  }
  .part2 .desc {
    margin-top: 1.2333em;
  }
  .part2 .img-wrapper {
    height: 8.9333;
  }
  .part2 .item-2 {
    margin-top: -0.3333em;
  }
}
#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-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-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-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-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 .pic {
    position: absolute;
    bottom: 0;
    max-width: 500px !important;
    width: 500px !important;
    height: 427px;
  }
  #coloros .container-1 .sub-2 .mask-wrapper img {
    position: absolute;
    bottom: 0;
    max-width: 500px !important;
    width: 500px !important;
  }
  #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 .pic {
    position: absolute;
    bottom: 0;
    max-width: 285px !important;
    width: 285px !important;
  }
  #coloros .container-1 .sub-2 .mask-wrapper img {
    position: absolute;
    bottom: 0;
    max-width: 285px !important;
    width: 285px !important;
  }
  #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 .pic {
    position: absolute;
    bottom: 0;
    max-width: 9em !important;
    width: 9em !important;
  }
  #coloros .container-1 .sub-2 .mask-wrapper img {
    position: absolute;
    bottom: 0;
    max-width: 9em !important;
    width: 9em !important;
  }
  #coloros .container-2 {
    margin-top: 0.4em;
  }
  #coloros .container-2 .desc {
    width: 8.4em;
  }
  #coloros .container-2 .sub {
    width: 11.12em;
    height: 21.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: 10.96em;
  }
  #coloros .container-2 .img-wrapper-2 {
    width: 11.12em;
    height: 10.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.7333em;
    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 {
    height: 10.7333em;
    margin-left: 1.8em;
  }
  #coloros .container-1 .sub-2 .img-wrapper .pic {
    position: absolute;
    bottom: 0;
    max-width: 15em !important;
    width: 15em !important;
  }
  #coloros .container-1 .sub-2 .img-wrapper .mask-wrapper img {
    position: absolute;
    bottom: 0;
    max-width: 15em !important;
    width: 15em !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 {
    height: 100%;
  }
  #coloros .container-2 .sub-1 .desc {
    height: 5.8667em;
  }
  #coloros .container-2 .sub-2 {
    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.5111em;
}
@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-group {
  margin-bottom: -50px;
}
@media (min-width: 1921px) {
  #sloop .sticky-container .sticky-item .video-group {
    margin-bottom: -70px;
  }
}
#sloop .sticky-container .sticky-item .video {
  position: relative;
  z-index: 3;
}
#sloop .sticky-container .sticky-item .play {
  position: relative;
  z-index: 5;
  width: 50px;
  height: 50px;
}
@media (min-width: 1921px) {
  #sloop .sticky-container .sticky-item .play {
    width: 70px;
    height: 70px;
  }
}
#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: 55vw;
  height: 117vw;
}
#sloop .sloop-mobile .mobile-sloop .phone-wrapper .cover {
  position: absolute;
  z-index: 2;
  top: 29vw;
  left: 0.5vw;
  width: 54vw;
  height: 30.34vw;
}
#sloop .sloop-mobile .mobile-sloop .phone-wrapper .play {
  position: absolute;
  z-index: 3;
  top: 40vw;
  left: calc(50% - 15px);
  width: 30px;
  height: 30px;
}
#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 img {
  width: 100%;
  height: auto;
}
@media (max-width: 568px) {
  #performance-1 .section-1 img {
    width: 100vw;
    height: 121vw;
  }
}
#performance-1 .section-1 .content {
  display: -webkit-box;
  display: flex;
}
#performance-1 .section-1 .content > div {
  -webkit-box-flex: 1;
          flex: 1;
}
#performance-1 .section-1 .font-wrapper {
  position: relative;
  margin: 0 auto 0 auto;
}
#performance-1 .section-1 .sticky-container {
  height: 300vh;
}
#performance-1 .section-1 .sticky-container .sticky-item {
  height: 100vh;
}
#performance-1 .section-1 .img-wrapper {
  width: 100%;
  position: relative;
}
@media (min-width: 1921px) {
  #performance-1 .section-1 .img-wrapper {
    height: 905px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #performance-1 .section-1 .img-wrapper {
    height: 517px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #performance-1 .section-1 .img-wrapper {
    height: 15.2em;
  }
}
#performance-1 .section-1 .img-wrapper .img-right {
  position: absolute;
  top: 0;
  left: 0;
}
#performance-1 .section-1 .right {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
#performance-1 .section-1 .right .item-group {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
#performance-1 .section-1 .right .item-1 {
  display: -webkit-box;
  display: flex;
}
#performance-1 .content-wrapper-1 {
  width: 100%;
}
#performance-1 .content-wrapper-2 {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#performance-1 .content-wrapper-2 .left {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: end;
          justify-content: flex-end;
}
#performance-1 .content-wrapper-2 .right {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
}
#performance-1 .content-wrapper-2 .right .item {
  -webkit-box-flex: 0;
          flex: 0 0 50%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: end;
          justify-content: flex-end;
}
#performance-1 .section-3 {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
#performance-1 .section-3 .item-group {
  display: -webkit-box;
  display: flex;
}
#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 .section-1 .right .item-1 > :not(:first-child) {
    margin-left: 1.1111em;
  }
  #performance-1 .section-1 .right .item-2 {
    margin-top: 0.8222em;
  }
  #performance-1 .content-wrapper-2 {
    top: -2.2222em;
  }
  #performance-1 .content-wrapper-2 .content .desc {
    margin-top: 1.2444em;
  }
  #performance-1 .content-wrapper-2 .content .right {
    padding-left: 2.2222em;
  }
  #performance-1 .content-wrapper-2 .content .right .item-up {
    height: 5.7778em;
  }
  #performance-1 .section-3 {
    margin-top: 6.6667em;
  }
  #performance-1 .section-3 .desc {
    margin-top: 1.5556em;
  }
  #performance-1 .section-3 .right-curve {
    margin-top: 5.7111em;
  }
  #performance-1 .section-3 .right-curve .blue,
  #performance-1 .section-3 .right-curve .blue-wrapper {
    width: 7.6em;
    height: 7.1333em;
  }
  #performance-1 .section-3 .right-curve .red,
  #performance-1 .section-3 .right-curve .red-wrapper {
    width: 8.5778em;
    height: 7.1333em;
  }
  #performance-1 .section-3 .right-curve .blue-wrapper img {
    max-width: 7.6em;
  }
  #performance-1 .section-3 .right-curve .red-wrapper img {
    max-width: 8.5778em;
  }
  #performance-1 .section-3 .right-curve .y-item {
    height: 7.1333em;
  }
  #performance-1 .section-3 .item-group {
    margin-top: 1.5556em;
  }
  #performance-1 .section-3 .item-group .item-2 {
    margin-left: 1.9111em;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #performance-1 .content-wrapper-2 {
    top: -3.2222em;
  }
  #performance-1 .section-3 .left .desc {
    width: 80%;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #performance-1 .section-1 .right .item-1 > :not(:first-child) {
    margin-left: 0.6em;
  }
  #performance-1 .section-1 .right .item-2 {
    margin-top: 0.68em;
  }
  #performance-1 .content-wrapper-2 {
    top: -2em;
  }
  #performance-1 .content-wrapper-2 .content .desc {
    margin-top: 0.56em;
  }
  #performance-1 .content-wrapper-2 .content .right {
    padding-left: 1.2em;
  }
  #performance-1 .content-wrapper-2 .content .right .item-up {
    height: 14.648vh;
  }
  #performance-1 .section-3 {
    margin-top: 4.4em;
  }
  #performance-1 .section-3 .desc {
    margin-top: 1.36em;
    width: 10.4em;
  }
  #performance-1 .section-3 .right-curve {
    margin-top: 5em;
  }
  #performance-1 .section-3 .right-curve .blue,
  #performance-1 .section-3 .right-curve .blue-wrapper {
    width: 5.68em;
    height: 5.32em;
  }
  #performance-1 .section-3 .right-curve .red,
  #performance-1 .section-3 .right-curve .red-wrapper {
    width: 6.4em;
    height: 5.32em;
  }
  #performance-1 .section-3 .right-curve .blue-wrapper img {
    max-width: 5.68em;
  }
  #performance-1 .section-3 .right-curve .red-wrapper img {
    max-width: 6.4em;
  }
  #performance-1 .section-3 .right-curve .y-item {
    height: 5.32em;
  }
  #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 .right {
    -webkit-box-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
            align-items: flex-start;
  }
  #performance-1 .section-1 .content-mobile-1 .right {
    margin-top: 1.2333em;
  }
  #performance-1 .section-1 .content-mobile-1 .right .content-1 {
    margin-right: 1.2333em;
  }
  #performance-1 .section-1 .content-mobile-1 .right .content-1 > :not(:first-child) {
    margin-top: 1.2333em;
  }
  #performance-1 .section-1 .content-mobile-2 {
    margin-top: 3.3333em;
  }
  #performance-1 .section-1 .content-mobile-2 .desc {
    margin-top: 1.6667em;
  }
  #performance-1 .section-1 .content-mobile-2 .right {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }
  #performance-1 .section-1 .content-mobile-2 .content-1 {
    margin-top: 1.5em;
    display: -webkit-box;
    display: flex;
  }
  #performance-1 .section-1 .content-mobile-2 .content-1 .content-1-1 {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-pack: end;
            justify-content: flex-end;
    margin-right: 3.0667em;
  }
  #performance-1 .section-1 .content-mobile-2 .content-2 {
    margin-top: 1em;
  }
  #performance-1 .section-3 {
    display: block;
    margin-top: 2.9em;
  }
  #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: 7em;
    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: 7em;
  }
  #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 {
  width: 100%;
  left: 0px;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
#performance-2 .per2-container .per2-sticky .section-3 {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
}
#performance-2 .sticky-container {
  height: 280vh;
}
#performance-2 .sticky-container .sticky-item {
  width: 100%;
  height: 100vh;
}
#performance-2 .section-1 {
  background-color: #000;
}
#performance-2 .section-1 .none {
  -webkit-transition: width 0.6s;
  transition: width 0.6s;
}
#performance-2 .section-1 .blue-progress {
  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-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-1 img {
  width: 100%;
  height: auto;
}
#performance-2 .section-2 {
  background-color: #000;
}
#performance-2 .section-2 .sticky-container,
#performance-2 .section-2 .sticky-item {
  background-color: #000;
}
#performance-2 .section-2 .content {
  z-index: 3;
  position: absolute;
}
#performance-2 .section-2 .img-group {
  z-index: 4;
  background-color: #000;
  margin: auto;
  position: relative;
  height: auto;
}
#performance-2 .section-2 .img-group img {
  position: absolute;
}
#performance-2 .section-2 .phone-wrapper {
  z-index: 5;
  position: absolute;
}
#performance-2 .section-2 .phone-wrapper img {
  width: 100%;
  height: 100%;
}
#performance-2 .section-2 .phone-wrapper .light-phone {
  z-index: 5;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
#performance-2 .section-2 .phone-wrapper .dolby-phone {
  z-index: 6;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
#performance-2 .section-2 .audio-wrapper {
  position: relative;
  display: -webkit-box;
  display: flex;
}
#performance-2 .section-2 .dolby-anime {
  background-color: #000;
  z-index: 1;
  position: absolute;
  left: 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-2 .content-1 .desc {
  width: 56%;
}
@media (max-width: 568px) {
  #performance-2 .section-2 .content-1 .desc {
    width: 100%;
  }
}
#performance-2 .section-2 .content-2 .desc {
  width: 90%;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #performance-2 .section-2 .content-2 .desc {
    width: 70%;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #performance-2 .section-2 .content-2 .desc {
    width: 60%;
  }
}
@media (max-width: 568px) {
  #performance-2 .section-2 .content-2 .desc {
    width: 100%;
  }
}
#performance-2 .section-3 {
  background-color: #000;
  width: 100%;
}
#performance-2 .section-3 .desc {
  width: 50%;
}
@media (max-width: 568px) {
  #performance-2 .section-3 .desc {
    width: 100%;
  }
}
#performance-2 .section-3 img {
  width: 100%;
  height: auto;
}
@media (min-width: 1921px) {
  #performance-2 .width-limit {
    width: 860px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #performance-2 .width-limit {
    width: 510px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #performance-2 .width-limit {
    width: 350px;
  }
}
@media (max-width: 568px) {
  #performance-2 .width-limit {
    width: 9.6667em;
  }
}
@media (min-width: 1025px) {
  #performance-2 {
    padding-top: 5.9111em;
  }
  #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;
  }
  #performance-2 .section-1 .img-wrapper {
    height: 17.7778em;
  }
  #performance-2 .section-2 {
    margin-top: 260px;
  }
  #performance-2 .section-2 .img-group .img-1 {
    width: 51.484vw;
    height: 5.547vw;
    left: 24.258vw;
    z-index: 18;
  }
  #performance-2 .section-2 .img-group .img-2 {
    width: 35.391vw;
    height: 3.555vw;
    left: 27.344vw;
    z-index: 17;
  }
  #performance-2 .section-2 .img-group .img-3 {
    width: 25.547vw;
    height: 0.508vw;
    left: 35.938vw;
    z-index: 16;
  }
  #performance-2 .section-2 .img-group .img-4 {
    width: 51.484vw;
    height: 5.43vw;
    left: 24.258vw;
    z-index: 15;
  }
  #performance-2 .section-2 .img-group .img-5 {
    width: 13.125vw;
    height: 3.32vw;
    left: 27.734vw;
    z-index: 8;
  }
  #performance-2 .section-2 .img-group .img-6 {
    width: 11.563vw;
    height: 1.484vw;
    left: 27.93vw;
    z-index: 7;
  }
  #performance-2 .section-2 .img-group .img-7 {
    width: 13.477vw;
    height: 3.516vw;
    left: 27.344vw;
    z-index: 6;
  }
  #performance-2 .section-2 .img-group .img-8 {
    width: 15.664vw;
    height: 3.828vw;
    left: 26.563vw;
    z-index: 5;
  }
  #performance-2 .section-2 .img-group .img-9 {
    width: 13.477vw;
    height: 3.906vw;
    left: 27.344vw;
    z-index: 4;
  }
  #performance-2 .section-2 .img-group .img-10 {
    width: 5.273vw;
    height: 0.977vw;
    left: 33.203vw;
    z-index: 3;
  }
  #performance-2 .section-2 .img-group .img-11 {
    width: 9.375vw;
    height: 2.813vw;
    left: 30.469vw;
    z-index: 2;
  }
  #performance-2 .section-2 .img-group .img-12 {
    width: 41.211vw;
    height: 4.492vw;
    left: 29.688vw;
    z-index: 13;
  }
  #performance-2 .section-2 .img-group .img-13 {
    width: 51.484vw;
    height: 5.547vw;
    left: 24.258vw;
    z-index: 12;
  }
  #performance-2 .section-2 .img-group .img-14 {
    width: 46.836vw;
    height: 3.438vw;
    left: 26.563vw;
    z-index: 1;
  }
  #performance-2 .section-2 .img-group .img-15 {
    width: 45.977vw;
    left: 26.563vw;
    z-index: 2;
  }
  #performance-2 .section-2 .img-group .img-16 {
    width: 51.484vw;
    height: 5.547vw;
    left: 24.258vw;
    z-index: 11;
  }
  #performance-2 .section-2 .phone-wrapper {
    width: 51.484vw;
    left: 24.258vw;
  }
  #performance-2 .section-2 .phone-wrapper .phone-shadow {
    width: 56vw;
    margin-left: -2vw;
    margin-top: -0.9vw;
  }
  #performance-2 .section-2 .content {
    left: 32.156vw;
  }
  #performance-2 .section-2 .content .desc {
    margin-top: 1.1889em;
  }
  #performance-2 .section-2 .content-2 .desc {
    margin-top: 0.5778em;
  }
  #performance-2 .section-2 .content-2 .audio-wrapper {
    margin-top: 0.7778em;
  }
  #performance-2 .section-2 .content-2 .audio-wrapper > div {
    height: 1.5556em;
  }
  #performance-2 .section-2 .content-2 .audio-wrapper .logo_hires {
    width: 1.5556em;
    height: 1.5778em;
  }
  #performance-2 .section-2 .content-2 .audio-wrapper .logo_dolby {
    margin-left: 1.3333em;
    width: 1.2em;
    height: 1.5778em;
  }
  #performance-2 .section-3 .header {
    padding-left: 32.156vw;
  }
  #performance-2 .section-3 .header .desc {
    margin-top: 1.3778em;
  }
  #performance-2 .section-3 .body {
    margin-top: 1.3778em;
  }
  #performance-2 .section-3 .n-phone {
    height: 12.4667em;
  }
  #performance-2 .section-3 .n-shadow {
    height: 3.5333em;
  }
  #performance-2 .dolby-anime img {
    width: 33.525vw;
    height: auto;
    top: -5.08vw;
  }
  #performance-2 .dolby-anime .left,
  #performance-2 .dolby-anime .maskleft {
    left: 11.33vw;
  }
  #performance-2 .dolby-anime .right,
  #performance-2 .dolby-anime .maskright {
    left: 55.145vw;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #performance-2 {
    padding-top: 4em;
  }
  #performance-2 .section-1 .title .desc-1 {
    margin-top: 1.2em;
  }
  #performance-2 .section-1 .title .desc-2 {
    margin-top: 0.6em;
  }
  #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;
  }
  #performance-2 .section-1 .img-wrapper {
    height: 13.44em;
  }
  #performance-2 .section-2 .img-group .img-1 {
    width: 58.203vw;
    left: 20.898vw;
    height: 6.25vw;
    z-index: 18;
  }
  #performance-2 .section-2 .img-group .img-2 {
    width: 40.104vw;
    height: 4.036vw;
    left: 23.047vw;
    z-index: 17;
  }
  #performance-2 .section-2 .img-group .img-3 {
    width: 28.906vw;
    height: 0.586vw;
    left: 29.297vw;
    z-index: 16;
  }
  #performance-2 .section-2 .img-group .img-4 {
    width: 58.203vw;
    height: 6.25vw;
    left: 20.898vw;
    z-index: 15;
  }
  #performance-2 .section-2 .img-group .img-5 {
    width: 14.844vw;
    height: 3.776vw;
    left: 23.438vw;
    z-index: 8;
  }
  #performance-2 .section-2 .img-group .img-6 {
    width: 13.151vw;
    height: 1.693vw;
    left: 23.438vw;
    z-index: 7;
  }
  #performance-2 .section-2 .img-group .img-7 {
    width: 15.234vw;
    height: 4.036vw;
    left: 23.177vw;
    z-index: 6;
  }
  #performance-2 .section-2 .img-group .img-8 {
    width: 17.708vw;
    height: 4.297vw;
    left: 21.745vw;
    z-index: 5;
  }
  #performance-2 .section-2 .img-group .img-9 {
    width: 15.234vw;
    height: 4.427vw;
    left: 22.786vw;
    z-index: 4;
  }
  #performance-2 .section-2 .img-group .img-10 {
    width: 5.99vw;
    height: 1.042vw;
    left: 27.214vw;
    z-index: 3;
  }
  #performance-2 .section-2 .img-group .img-11 {
    width: 10.677vw;
    height: 3.255vw;
    left: 25.13vw;
    z-index: 2;
  }
  #performance-2 .section-2 .img-group .img-12 {
    width: 46.615vw;
    height: 5.078vw;
    left: 24.089vw;
    z-index: 13;
  }
  #performance-2 .section-2 .img-group .img-13 {
    width: 58.203vw;
    height: 6.25vw;
    left: 20.898vw;
    z-index: 12;
  }
  #performance-2 .section-2 .img-group .img-14 {
    width: 52.995vw;
    height: 3.906vw;
    left: 22.656vw;
    z-index: 1;
  }
  #performance-2 .section-2 .img-group .img-15 {
    width: 52.083vw;
    height: 3.906vw;
    left: 22.917vw;
    z-index: 2;
  }
  #performance-2 .section-2 .img-group .img-16 {
    width: 58.203vw;
    height: 3.906vw;
    left: 20.898vw;
    z-index: 11;
  }
  #performance-2 .section-2 .phone-wrapper {
    width: 58.203vw;
    left: 20.898vw;
  }
  #performance-2 .section-2 .phone-wrapper .phone-shadow {
    width: 63vw;
    margin-left: -2vw;
    margin-top: -0.9vw;
  }
  #performance-2 .section-2 .content {
    left: 8.12em;
  }
  #performance-2 .section-2 .content .desc {
    margin-top: 1.36em;
  }
  #performance-2 .section-2 .content-2 .desc {
    margin-top: 0.96em;
  }
  #performance-2 .section-2 .content-2 .audio-wrapper {
    margin-top: 0.96em;
  }
  #performance-2 .section-2 .content-2 .audio-wrapper > div {
    height: 1.2em;
  }
  #performance-2 .section-2 .content-2 .audio-wrapper .logo_hires {
    width: 1.2em;
    height: 1.36em;
  }
  #performance-2 .section-2 .content-2 .audio-wrapper .logo_dolby {
    margin-left: 1.2em;
    width: 0.92em;
    height: 1.36em;
  }
  #performance-2 .section-3 .header {
    padding-left: 7.12em;
  }
  #performance-2 .section-3 .header .desc {
    margin-top: 0.96em;
  }
  #performance-2 .section-3 .body {
    margin-top: 1.28em;
  }
  #performance-2 .section-3 .n-phone {
    height: 9.44em;
  }
  #performance-2 .section-3 .n-shadow {
    height: 4em;
  }
  #performance-2 .dolby-anime img {
    width: 37.5vw;
    height: auto;
    top: -5.5vw;
  }
  #performance-2 .dolby-anime .left,
  #performance-2 .dolby-anime .maskleft {
    left: 6vw;
  }
  #performance-2 .dolby-anime .right,
  #performance-2 .dolby-anime .maskright {
    left: 56.5vw;
  }
}
@media (max-width: 568px) {
  #performance-2 {
    padding-top: 3.8em;
  }
  #performance-2 .full-screen {
    width: 100vw !important;
  }
  #performance-2 .section-1 {
    padding-top: 3.8em;
  }
  #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: 9.3333em;
  }
  #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;
  }
  #performance-2 .section-1 .img-wrapper {
    height: 8.3333em;
  }
  #performance-2 .section-2 .img-group .img-1 {
    width: 80.533vw;
    height: 8.533vw;
    left: 9.733vw;
    z-index: 18;
  }
  #performance-2 .section-2 .img-group .img-2 {
    width: 55.467vw;
    height: 5.6vw;
    left: 14.133vw;
    z-index: 17;
  }
  #performance-2 .section-2 .img-group .img-3 {
    width: 40vw;
    height: 0.8vw;
    left: 26.933vw;
    z-index: 16;
  }
  #performance-2 .section-2 .img-group .img-4 {
    width: 80.533vw;
    height: 8.533vw;
    left: 9.733vw;
    z-index: 15;
  }
  #performance-2 .section-2 .img-group .img-5 {
    width: 20.533vw;
    height: 5.333vw;
    left: 14.933vw;
    z-index: 8;
  }
  #performance-2 .section-2 .img-group .img-6 {
    width: 18.133vw;
    height: 2.133vw;
    left: 16vw;
    z-index: 7;
  }
  #performance-2 .section-2 .img-group .img-7 {
    width: 21.067vw;
    height: 5.6vw;
    left: 14.4vw;
    z-index: 6;
  }
  #performance-2 .section-2 .img-group .img-8 {
    width: 24.533vw;
    height: 6.133vw;
    left: 11.467vw;
    z-index: 5;
  }
  #performance-2 .section-2 .img-group .img-9 {
    width: 21.067vw;
    height: 6.133vw;
    left: 13.6vw;
    z-index: 4;
  }
  #performance-2 .section-2 .img-group .img-10 {
    width: 8.267vw;
    height: 1.6vw;
    left: 22.667vw;
    z-index: 3;
  }
  #performance-2 .section-2 .img-group .img-11 {
    width: 14.667vw;
    height: 4.533vw;
    left: 18.4vw;
    z-index: 2;
  }
  #performance-2 .section-2 .img-group .img-12 {
    width: 64.533vw;
    height: 6.933vw;
    left: 16.267vw;
    z-index: 13;
  }
  #performance-2 .section-2 .img-group .img-13 {
    width: 80.533vw;
    height: 8.533vw;
    left: 9.733vw;
    z-index: 12;
  }
  #performance-2 .section-2 .img-group .img-14 {
    width: 73.333vw;
    height: 5.333vw;
    left: 13.333vw;
    z-index: 1;
  }
  #performance-2 .section-2 .img-group .img-15 {
    width: 72vw;
    height: 5.333vw;
    left: 13.867vw;
    z-index: 2;
  }
  #performance-2 .section-2 .img-group .img-16 {
    width: 80.533vw;
    height: 8.533vw;
    left: 9.733vw;
    z-index: 11;
  }
  #performance-2 .section-2 .phone-wrapper {
    width: 80.533vw;
    left: 9.733vw;
    top: 0;
  }
  #performance-2 .section-2 .phone-wrapper .phone-shadow {
    width: 86.5vw;
    margin-left: -2vw;
    margin-top: -1vw;
  }
  #performance-2 .section-2 .content {
    width: 9.6667em;
    left: calc(50% - 4.3333em);
  }
  #performance-2 .section-2 .content .desc {
    margin-top: 1.2333em;
  }
  #performance-2 .section-2 .content-2 .desc {
    margin-top: 0.9em;
  }
  #performance-2 .section-2 .content-2 .audio-wrapper {
    margin-top: 0.9em;
  }
  #performance-2 .section-2 .content-2 .audio-wrapper > div {
    height: 1.6em;
  }
  #performance-2 .section-2 .content-2 .audio-wrapper .logo_hires {
    width: 1.6em;
    height: 1.6em;
  }
  #performance-2 .section-2 .content-2 .audio-wrapper .logo_dolby {
    margin-left: 1.3333em;
    width: 1.2333em;
    height: 1.6em;
  }
  #performance-2 .section-3 .header {
    padding-left: 1.6667em;
    padding-right: 1.6667em;
  }
  #performance-2 .section-3 .header .desc {
    margin-top: 2em;
  }
  #performance-2 .section-3 .body {
    margin-top: 1.3333em;
  }
  #performance-2 .section-3 .body .narrow-container {
    width: 81.33vw;
  }
  #performance-2 .section-3 .n-phone {
    height: 4.7em;
  }
  #performance-2 .section-3 .n-shadow {
    height: 1.3333em;
  }
  #performance-2 .dolby-anime img {
    width: 42.1333vw;
    height: auto;
    top: -5.5vw;
  }
  #performance-2 .dolby-anime .left,
  #performance-2 .dolby-anime .maskleft {
    left: -7.1333vw;
  }
  #performance-2 .dolby-anime .right,
  #performance-2 .dolby-anime .maskright {
    left: 65vw;
  }
}
#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;
  }
}
#proof {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 997;
  overflow-y: scroll;
  overflow-x: hidden;
}
#proof .proof-close {
  z-index: 998;
  position: absolute;
}
@media (min-width: 1025px) {
  #proof .proof-close {
    width: 1.3333em;
    height: 1.3333em;
    top: 1.6667em;
    right: 1.6667em;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #proof .proof-close {
    width: 0.8em;
    height: 0.8em;
    top: 1.6667em;
    right: 2.6667em;
  }
}
@media (max-width: 568px) {
  #proof .proof-close {
    width: 0.6em;
    height: 0.6em;
    top: -0.6em;
    right: 0.4em;
  }
}
#proof .proof-close img {
  width: 100%;
  height: 100%;
}
#proof .proof-container {
  margin: auto;
  width: 1960px;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #proof .proof-container {
    width: 1080px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #proof .proof-container {
    width: 83.98vw;
  }
}
@media (max-width: 568px) {
  #proof .proof-container {
    width: 100vw;
  }
}
#proof .title {
  font-family: 'OPPOSans-H';
  font-size: 60px;
  line-height: 84px;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #proof .title {
    font-size: 34px;
    line-height: 48px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #proof .title {
    font-size: 20px;
    line-height: 28px;
  }
}
@media (max-width: 568px) {
  #proof .title {
    font-size: 16px;
    line-height: 22px;
  }
}
#proof .pop-container {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  top: 0px;
  left: 0;
  display: none;
  text-align: center;
}
#proof .pop-container .close {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 110px;
  right: 132px;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #proof .pop-container .close {
    width: 30px;
    height: 30px;
    top: 60px;
    right: 50px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #proof .pop-container .close {
    width: 18px;
    height: 18px;
    top: 30px;
    right: 26px;
  }
}
#proof .pop-container .pre-btn,
#proof .pop-container .next-btn,
#proof .pop-container .close {
  position: absolute;
  cursor: pointer;
  z-index: 2;
}
#proof .pop-container .pre-btn img,
#proof .pop-container .next-btn img,
#proof .pop-container .close img {
  width: 100%;
  height: 100%;
}
#proof .pop-container .swiper-container {
  width: 100%;
  height: 100%;
  position: relative;
}
#proof .pop-container .swiper-container > div {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}
#proof .pop-container .swiper-container img {
  width: 100%;
  height: auto;
}
#proof .pop-container .swiper-container .img-swiper {
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
#proof .img-wrapper {
  position: relative;
  overflow: hidden;
}
#proof .img-wrapper img {
  width: 100%;
  -webkit-transition: -webkit-transform 0.3s linear;
  transition: -webkit-transform 0.3s linear;
  transition: transform 0.3s linear;
  transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}
#proof .img-wrapper img:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
@media (max-width: 568px) {
  #proof .img-wrapper img:hover {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
#proof .beauty-container .wrapper {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
#proof .beauty-container .wrapper .left {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
#proof .beauty-container .wrapper .left .down {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
#proof .dark-container .wrapper > div,
#proof .detail-container .wrapper > div,
#proof .distance-container .wrapper > div {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
@media (min-width: 1921px) {
  #proof {
    padding-top: 160px;
  }
  #proof > :not(:last-child) .wrapper {
    margin-top: 60px;
  }
  #proof .pre-btn,
  #proof .next-btn {
    width: 100px;
    height: 100px;
    top: calc(50% - 50px);
  }
  #proof .pre-btn {
    left: 296px;
  }
  #proof .next-btn {
    right: 296px;
  }
  #proof .beauty-container .img-wrapper-1-0 {
    width: 1292px;
    height: 642px;
  }
  #proof .beauty-container .down > div {
    width: 624px;
    height: 504px;
  }
  #proof .beauty-container .img-wrapper-1-3 {
    width: 624px;
    height: 1190px;
  }
  #proof .dark-container {
    margin-top: 160px;
  }
  #proof .dark-container .down {
    margin-top: 44px;
  }
  #proof .dark-container .img-wrapper-2-0 {
    width: 820px;
    height: 616px;
  }
  #proof .dark-container .img-wrapper-2-1 {
    width: 1096px;
    height: 616px;
  }
  #proof .dark-container .img-wrapper-2-2 {
    width: 1136px;
    height: 1000px;
  }
  #proof .dark-container .img-wrapper-2-3 {
    width: 780px;
    height: 1000px;
  }
  #proof .detail-container {
    margin-top: 160px;
  }
  #proof .detail-container .down {
    margin-top: 44px;
  }
  #proof .detail-container .img-wrapper-3-0 {
    width: 1136px;
    height: 580px;
  }
  #proof .detail-container .img-wrapper-3-1 {
    width: 780px;
    height: 580px;
  }
  #proof .detail-container .img-wrapper-3-2 {
    width: 780px;
    height: 780px;
  }
  #proof .detail-container .img-wrapper-3-3 {
    width: 1136px;
    height: 780px;
  }
  #proof .distance-container {
    margin-top: 160px;
    padding-bottom: 540px;
  }
  #proof .distance-container .down {
    margin-top: 44px;
  }
  #proof .distance-container .up > div,
  #proof .distance-container .down > div {
    width: 624px;
    height: 468px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #proof {
    padding-top: 84px;
  }
  #proof > :not(:last-child) .wrapper {
    margin-top: 32px;
  }
  #proof .pre-btn,
  #proof .next-btn {
    width: 50px;
    height: 50px;
    top: calc(50% - 50px);
  }
  #proof .pre-btn {
    left: 148px;
  }
  #proof .next-btn {
    right: 148px;
  }
  #proof .beauty-container .img-wrapper-1-0 {
    width: 712px;
    height: 353px;
  }
  #proof .beauty-container .down > div {
    width: 344px;
    height: 278px;
  }
  #proof .beauty-container .img-wrapper-1-3 {
    width: 344px;
    height: 655px;
  }
  #proof .dark-container {
    margin-top: 100px;
  }
  #proof .dark-container .down {
    margin-top: 24px;
  }
  #proof .dark-container .img-wrapper-2-0 {
    width: 451px;
    height: 339px;
  }
  #proof .dark-container .img-wrapper-2-1 {
    width: 605px;
    height: 339px;
  }
  #proof .dark-container .img-wrapper-2-2 {
    width: 624px;
    height: 550px;
  }
  #proof .dark-container .img-wrapper-2-3 {
    width: 432px;
    height: 550px;
  }
  #proof .detail-container {
    margin-top: 100px;
  }
  #proof .detail-container .down {
    margin-top: 24px;
  }
  #proof .detail-container .img-wrapper-3-0 {
    width: 625px;
    height: 319px;
  }
  #proof .detail-container .img-wrapper-3-1 {
    width: 431px;
    height: 319px;
  }
  #proof .detail-container .img-wrapper-3-2 {
    width: 429px;
    height: 429px;
  }
  #proof .detail-container .img-wrapper-3-3 {
    width: 627px;
    height: 429px;
  }
  #proof .distance-container {
    margin-top: 100px;
    padding-bottom: 300px;
  }
  #proof .distance-container .down {
    margin-top: 24px;
  }
  #proof .distance-container .up > div,
  #proof .distance-container .down > div {
    width: 344px;
    height: 258px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #proof {
    padding-top: 12.417vw;
  }
  #proof > :not(:last-child) .wrapper {
    margin-top: 2.604vw;
  }
  #proof .pre-btn,
  #proof .next-btn {
    width: 3.906vw;
    height: 3.906vw;
    top: calc(50% - 1.953vw);
  }
  #proof .pre-btn {
    left: 11.589vw;
  }
  #proof .next-btn {
    right: 11.589vw;
  }
  #proof .beauty-container .img-wrapper-1-0 {
    width: 55.469vw;
    height: 27.604vw;
  }
  #proof .beauty-container .down > div {
    width: 26.823vw;
    height: 21.745vw;
  }
  #proof .beauty-container .img-wrapper-1-3 {
    width: 26.693vw;
    height: 51.172vw;
  }
  #proof .dark-container {
    margin-top: 7.813vw;
  }
  #proof .dark-container .down {
    margin-top: 1.823vw;
  }
  #proof .dark-container .img-wrapper-2-0 {
    width: 35.286vw;
    height: 26.563vw;
  }
  #proof .dark-container .img-wrapper-2-1 {
    width: 47.005vw;
    height: 26.563vw;
  }
  #proof .dark-container .img-wrapper-2-2 {
    width: 48.828vw;
    height: 42.969vw;
  }
  #proof .dark-container .img-wrapper-2-3 {
    width: 33.464vw;
    height: 42.969vw;
  }
  #proof .detail-container {
    margin-top: 7.813vw;
  }
  #proof .detail-container .down {
    margin-top: 1.823vw;
  }
  #proof .detail-container .img-wrapper-3-0 {
    width: 48.698vw;
    height: 25vw;
  }
  #proof .detail-container .img-wrapper-3-1 {
    width: 33.594vw;
    height: 25vw;
  }
  #proof .detail-container .img-wrapper-3-2 {
    width: 33.464vw;
    height: 33.594vw;
  }
  #proof .detail-container .img-wrapper-3-3 {
    width: 48.828vw;
    height: 33.594vw;
  }
  #proof .distance-container {
    margin-top: 7.813vw;
    padding-bottom: 22.784vw;
  }
  #proof .distance-container .down {
    margin-top: 1.823vw;
  }
  #proof .distance-container .up > div,
  #proof .distance-container .down > div {
    width: 26.823vw;
    height: 20.182vw;
  }
}
@media (max-width: 568px) {
  #proof {
    padding-top: 4.04vw;
  }
  #proof .title {
    text-align: center;
  }
  #proof > div {
    width: 100%;
    margin-top: 7.467vw;
  }
  #proof > div > :nth-child(2) {
    margin-top: 4vw;
  }
  #proof > div img {
    width: 100%;
  }
  #proof .initial {
    -webkit-transform: translateX(9999px);
            transform: translateX(9999px);
  }
  #proof .mobile-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
  }
  #proof .img-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
  }
  #proof .img-wrapper img {
    width: 100%;
  }
  #proof .footer-item {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
    margin: 1.6vw auto 0 auto;
  }
  #proof .footer-item .item {
    width: 1.6vw;
    height: 1.6vw;
    border-radius: 50%;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
  }
  #proof .beauty-wrapper,
  #proof .dark-wrapper,
  #proof .detail-wrapper {
    position: relative;
    height: 133.333vw;
  }
  #proof .distance-wrapper {
    position: relative;
    height: 74.933vw;
  }
  .beauty-mobile .footer-item,
  .dark-mobile .footer-item,
  .detail-mobile .footer-item {
    width: 13.867vw;
  }
  .distance-mobile {
    padding-bottom: 13.866vw;
  }
  .distance-mobile .footer-item {
    width: 17.867vw;
  }
  .left-btn,
  .right-btn {
    position: absolute;
    top: calc(50% - 0.6em);
    width: 1.2em;
    height: 1.2em;
  }
  .left-btn img,
  .right-btn img {
    width: 100%;
    height: 100%;
  }
  .left-btn {
    left: 0.3em;
  }
  .right-btn {
    left: 11em;
  }
}
.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 .h0 {
  font-family: 'OPPOSans-B';
  color: #110;
}
.main-wrapper .h2,
.main-wrapper .h3,
.main-wrapper .h4,
.main-wrapper .h5,
.main-wrapper .h6 {
  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: #808080;
}
.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 .h0 {
    font-size: 7.2vw;
    line-height: 49px;
    letter-spacing: -1.6px;
  }
  .main-wrapper .h2 {
    font-size: 34px;
    line-height: 42px;
  }
  .main-wrapper .h3 {
    font-size: 34px;
    line-height: 42px;
  }
  .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.h5-2 {
    font-size: 22px;
    line-height: 60px;
  }
  .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 .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 .h0 {
    font-size: 4.03vw;
    line-height: 57px;
    letter-spacing: -2px;
  }
  .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 .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: 13.4px;
  }
  .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 .h0 {
    font-size: 3.35vw;
    line-height: 87px;
    letter-spacing: -3.8px;
  }
  .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 .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 .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 .h0 {
    font-size: 3.35vw;
    line-height: 164px;
    letter-spacing: -5.6px;
  }
  .main-wrapper .h2 {
    font-size: 60px;
    line-height: 78px;
  }
  .main-wrapper .h3 {
    font-size: 60px;
    line-height: 72px;
  }
  .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 .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: 16px;
    line-height: 22px;
  }
  .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 .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-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-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-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-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));
}

/* blocks */
/* mixins */
/* functions */
#proof {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 997;
  overflow-y: scroll;
  overflow-x: hidden;
}
#proof .proof-close {
  z-index: 998;
  position: absolute;
}
@media (min-width: 1025px) {
  #proof .proof-close {
    width: 1.3333em;
    height: 1.3333em;
    top: 1.6667em;
    right: 1.6667em;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #proof .proof-close {
    width: 0.8em;
    height: 0.8em;
    top: 1.6667em;
    right: 2.6667em;
  }
}
@media (max-width: 568px) {
  #proof .proof-close {
    width: 0.6em;
    height: 0.6em;
    top: -0.6em;
    right: 0.4em;
  }
}
#proof .proof-close img {
  width: 100%;
  height: 100%;
}
#proof .proof-container {
  margin: auto;
  width: 1960px;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #proof .proof-container {
    width: 1080px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #proof .proof-container {
    width: 83.98vw;
  }
}
@media (max-width: 568px) {
  #proof .proof-container {
    width: 100vw;
  }
}
#proof .title {
  font-family: 'OPPOSans-H';
  font-size: 60px;
  line-height: 84px;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #proof .title {
    font-size: 34px;
    line-height: 48px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #proof .title {
    font-size: 20px;
    line-height: 28px;
  }
}
@media (max-width: 568px) {
  #proof .title {
    font-size: 16px;
    line-height: 22px;
  }
}
#proof .pop-container {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  top: 0px;
  left: 0;
  display: none;
  text-align: center;
}
#proof .pop-container .close {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 110px;
  right: 132px;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #proof .pop-container .close {
    width: 30px;
    height: 30px;
    top: 60px;
    right: 50px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #proof .pop-container .close {
    width: 18px;
    height: 18px;
    top: 30px;
    right: 26px;
  }
}
#proof .pop-container .pre-btn,
#proof .pop-container .next-btn,
#proof .pop-container .close {
  position: absolute;
  cursor: pointer;
  z-index: 2;
}
#proof .pop-container .pre-btn img,
#proof .pop-container .next-btn img,
#proof .pop-container .close img {
  width: 100%;
  height: 100%;
}
#proof .pop-container .swiper-container {
  width: 100%;
  height: 100%;
  position: relative;
}
#proof .pop-container .swiper-container > div {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}
#proof .pop-container .swiper-container img {
  width: 100%;
  height: auto;
}
#proof .pop-container .swiper-container .img-swiper {
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
#proof .img-wrapper {
  position: relative;
  overflow: hidden;
}
#proof .img-wrapper img {
  width: 100%;
  -webkit-transition: -webkit-transform 0.3s linear;
  transition: -webkit-transform 0.3s linear;
  transition: transform 0.3s linear;
  transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}
#proof .img-wrapper img:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
@media (max-width: 568px) {
  #proof .img-wrapper img:hover {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
#proof .beauty-container .wrapper {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
#proof .beauty-container .wrapper .left {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
#proof .beauty-container .wrapper .left .down {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
#proof .dark-container .wrapper > div,
#proof .detail-container .wrapper > div,
#proof .distance-container .wrapper > div {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
@media (min-width: 1921px) {
  #proof {
    padding-top: 160px;
  }
  #proof > :not(:last-child) .wrapper {
    margin-top: 60px;
  }
  #proof .pre-btn,
  #proof .next-btn {
    width: 100px;
    height: 100px;
    top: calc(50% - 50px);
  }
  #proof .pre-btn {
    left: 296px;
  }
  #proof .next-btn {
    right: 296px;
  }
  #proof .beauty-container .img-wrapper-1-0 {
    width: 1292px;
    height: 642px;
  }
  #proof .beauty-container .down > div {
    width: 624px;
    height: 504px;
  }
  #proof .beauty-container .img-wrapper-1-3 {
    width: 624px;
    height: 1190px;
  }
  #proof .dark-container {
    margin-top: 160px;
  }
  #proof .dark-container .down {
    margin-top: 44px;
  }
  #proof .dark-container .img-wrapper-2-0 {
    width: 820px;
    height: 616px;
  }
  #proof .dark-container .img-wrapper-2-1 {
    width: 1096px;
    height: 616px;
  }
  #proof .dark-container .img-wrapper-2-2 {
    width: 1136px;
    height: 1000px;
  }
  #proof .dark-container .img-wrapper-2-3 {
    width: 780px;
    height: 1000px;
  }
  #proof .detail-container {
    margin-top: 160px;
  }
  #proof .detail-container .down {
    margin-top: 44px;
  }
  #proof .detail-container .img-wrapper-3-0 {
    width: 1136px;
    height: 580px;
  }
  #proof .detail-container .img-wrapper-3-1 {
    width: 780px;
    height: 580px;
  }
  #proof .detail-container .img-wrapper-3-2 {
    width: 780px;
    height: 780px;
  }
  #proof .detail-container .img-wrapper-3-3 {
    width: 1136px;
    height: 780px;
  }
  #proof .distance-container {
    margin-top: 160px;
    padding-bottom: 540px;
  }
  #proof .distance-container .down {
    margin-top: 44px;
  }
  #proof .distance-container .up > div,
  #proof .distance-container .down > div {
    width: 624px;
    height: 468px;
  }
}
@media (min-width: 1025px) and (max-width: 1920px) {
  #proof {
    padding-top: 84px;
  }
  #proof > :not(:last-child) .wrapper {
    margin-top: 32px;
  }
  #proof .pre-btn,
  #proof .next-btn {
    width: 50px;
    height: 50px;
    top: calc(50% - 50px);
  }
  #proof .pre-btn {
    left: 148px;
  }
  #proof .next-btn {
    right: 148px;
  }
  #proof .beauty-container .img-wrapper-1-0 {
    width: 712px;
    height: 353px;
  }
  #proof .beauty-container .down > div {
    width: 344px;
    height: 278px;
  }
  #proof .beauty-container .img-wrapper-1-3 {
    width: 344px;
    height: 655px;
  }
  #proof .dark-container {
    margin-top: 100px;
  }
  #proof .dark-container .down {
    margin-top: 24px;
  }
  #proof .dark-container .img-wrapper-2-0 {
    width: 451px;
    height: 339px;
  }
  #proof .dark-container .img-wrapper-2-1 {
    width: 605px;
    height: 339px;
  }
  #proof .dark-container .img-wrapper-2-2 {
    width: 624px;
    height: 550px;
  }
  #proof .dark-container .img-wrapper-2-3 {
    width: 432px;
    height: 550px;
  }
  #proof .detail-container {
    margin-top: 100px;
  }
  #proof .detail-container .down {
    margin-top: 24px;
  }
  #proof .detail-container .img-wrapper-3-0 {
    width: 625px;
    height: 319px;
  }
  #proof .detail-container .img-wrapper-3-1 {
    width: 431px;
    height: 319px;
  }
  #proof .detail-container .img-wrapper-3-2 {
    width: 429px;
    height: 429px;
  }
  #proof .detail-container .img-wrapper-3-3 {
    width: 627px;
    height: 429px;
  }
  #proof .distance-container {
    margin-top: 100px;
    padding-bottom: 300px;
  }
  #proof .distance-container .down {
    margin-top: 24px;
  }
  #proof .distance-container .up > div,
  #proof .distance-container .down > div {
    width: 344px;
    height: 258px;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  #proof {
    padding-top: 12.417vw;
  }
  #proof > :not(:last-child) .wrapper {
    margin-top: 2.604vw;
  }
  #proof .pre-btn,
  #proof .next-btn {
    width: 3.906vw;
    height: 3.906vw;
    top: calc(50% - 1.953vw);
  }
  #proof .pre-btn {
    left: 11.589vw;
  }
  #proof .next-btn {
    right: 11.589vw;
  }
  #proof .beauty-container .img-wrapper-1-0 {
    width: 55.469vw;
    height: 27.604vw;
  }
  #proof .beauty-container .down > div {
    width: 26.823vw;
    height: 21.745vw;
  }
  #proof .beauty-container .img-wrapper-1-3 {
    width: 26.693vw;
    height: 51.172vw;
  }
  #proof .dark-container {
    margin-top: 7.813vw;
  }
  #proof .dark-container .down {
    margin-top: 1.823vw;
  }
  #proof .dark-container .img-wrapper-2-0 {
    width: 35.286vw;
    height: 26.563vw;
  }
  #proof .dark-container .img-wrapper-2-1 {
    width: 47.005vw;
    height: 26.563vw;
  }
  #proof .dark-container .img-wrapper-2-2 {
    width: 48.828vw;
    height: 42.969vw;
  }
  #proof .dark-container .img-wrapper-2-3 {
    width: 33.464vw;
    height: 42.969vw;
  }
  #proof .detail-container {
    margin-top: 7.813vw;
  }
  #proof .detail-container .down {
    margin-top: 1.823vw;
  }
  #proof .detail-container .img-wrapper-3-0 {
    width: 48.698vw;
    height: 25vw;
  }
  #proof .detail-container .img-wrapper-3-1 {
    width: 33.594vw;
    height: 25vw;
  }
  #proof .detail-container .img-wrapper-3-2 {
    width: 33.464vw;
    height: 33.594vw;
  }
  #proof .detail-container .img-wrapper-3-3 {
    width: 48.828vw;
    height: 33.594vw;
  }
  #proof .distance-container {
    margin-top: 7.813vw;
    padding-bottom: 22.784vw;
  }
  #proof .distance-container .down {
    margin-top: 1.823vw;
  }
  #proof .distance-container .up > div,
  #proof .distance-container .down > div {
    width: 26.823vw;
    height: 20.182vw;
  }
}
@media (max-width: 568px) {
  #proof {
    padding-top: 4.04vw;
  }
  #proof .title {
    text-align: center;
  }
  #proof > div {
    width: 100%;
    margin-top: 7.467vw;
  }
  #proof > div > :nth-child(2) {
    margin-top: 4vw;
  }
  #proof > div img {
    width: 100%;
  }
  #proof .initial {
    -webkit-transform: translateX(9999px);
            transform: translateX(9999px);
  }
  #proof .mobile-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
  }
  #proof .img-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
  }
  #proof .img-wrapper img {
    width: 100%;
  }
  #proof .footer-item {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
    margin: 1.6vw auto 0 auto;
  }
  #proof .footer-item .item {
    width: 1.6vw;
    height: 1.6vw;
    border-radius: 50%;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
  }
  #proof .beauty-wrapper,
  #proof .dark-wrapper,
  #proof .detail-wrapper {
    position: relative;
    height: 133.333vw;
  }
  #proof .distance-wrapper {
    position: relative;
    height: 74.933vw;
  }
  .beauty-mobile .footer-item,
  .dark-mobile .footer-item,
  .detail-mobile .footer-item {
    width: 13.867vw;
  }
  .distance-mobile {
    padding-bottom: 13.866vw;
  }
  .distance-mobile .footer-item {
    width: 17.867vw;
  }
  .left-btn,
  .right-btn {
    position: absolute;
    top: calc(50% - 0.6em);
    width: 1.2em;
    height: 1.2em;
  }
  .left-btn img,
  .right-btn img {
    width: 100%;
    height: 100%;
  }
  .left-btn {
    left: 0.3em;
  }
  .right-btn {
    left: 11em;
  }
}