/* ═══ 이 페이지 전용 ═══ */
button:focus,
a:focus   {
  outline: 3px solid #2f7a6b;
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible   {
  outline: 3px solid #2f7a6b;
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible)   {
  outline: none;
}
@media (prefers-reduced-motion: reduce)   {
  *   {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ═══ 이 페이지 전용 ═══ */
.vivi_ui_wrap section[id]   {
  --anchor-scroll-margin-rem: 6.2;
  scroll-margin-top: calc(var(--anchor-scroll-margin-rem) * 1rem);
}
html   {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce)   {
  html   {
    scroll-behavior: auto;
  }
}

/* ═══ 이 페이지 전용 ═══ */
@font-face {
  font-family: Noto Sans KR;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-kr@5.0.18/files/noto-sans-kr-korean-400-normal.woff2) format("woff2");
  unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;
}
@font-face {
  font-family: Noto Sans KR;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-kr@5.0.18/files/noto-sans-kr-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB, U+2212, U+2215, U+FEFF, U+FFFD;
}
.vivi_ui_wrap img[width][height] {
  height: auto;
}
.vivi_ui_wrap {
  position: relative;
  overflow: hidden;
  background-color: #f2f8e8;
}

.vivi_ui_wrap .bg_area {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.vivi_ui_wrap .bg_area span {
  display: block;
  position: absolute;
  left: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.vivi_ui_wrap .bg_sec01 {
  top: 0;
  z-index: 3;
  width: 260rem;
  height: 155.6rem;
  margin-left: -130.6rem;
  background-image: url(/assets/revive/intro/vivi_ui/img/bg_sec01-f9cY_av9.webp);
}
.vivi_ui_wrap .bg_sec02 {
  top: 140.2rem;
  z-index: 2;
  width: 260rem;
  height: 155.6rem;
  margin-left: -131.9rem;
  background-image: url(/assets/revive/intro/vivi_ui/img/bg_sec02-t09GKaHP.webp);
}
.vivi_ui_wrap .bg_area .bg_sec02_tail {
  top: 295.8rem;
  z-index: 2;
  width: 263.9rem;
  height: 63.2rem;
  margin-left: -131.9rem;
  background-image: url(/assets/revive/intro/vivi_ui/img/bg_sec02_tail-RbDRfmqH.webp);
}
.vivi_ui_wrap .bg_sec03 {
  top: 286.3rem;
  z-index: 1;
  width: 256rem;
  height: 222.3rem;
  margin-left: -128rem;
  background-image: url(/assets/revive/intro/vivi_ui/img/bg_sec03-z4JaLWiN.webp);
}

.vivi_ui_wrap .content_area {
  position: relative;
  z-index: 4;
}
.vivi_ui_wrap .sec_in {
  position: relative;
  left: 50%;
  width: 192rem;
  height: 100%;
  margin-left: -96rem;
}
.vivi_ui_wrap .sec_in img {
  display: block;
  width: 100%;
}
.vivi_ui_wrap .sec_in .mobile {
  display: none;
}

.vivi_ui_wrap .sec1 {
  position: relative;
  width: 100%;
  height: 145rem;
}
.vivi_ui_wrap .sec1 .bg_title {
  display: block;
  position: absolute;
  left: 59.2rem;
  top: 19.4rem;
  width: 73.8rem;
}
.vivi_ui_wrap .sec1 .naming_box {
  display: block;
  position: absolute;
  left: 35.6rem;
  top: 99.8rem;
  width: 123.8rem;
}
.vivi_ui_wrap .sec1 .sado_sc_down {
  display: block;
  position: absolute;
  left: 84.6rem;
  top: 114.3rem;
  width: 23rem;
  animation: vivi_ui_scroll_float 1.5s ease-in-out infinite;
}
@keyframes vivi_ui_scroll_float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(.8rem);
  }
  100% {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vivi_ui_wrap .sec1 .sado_sc_down {
    animation: none;
  }
}

.vivi_ui_wrap .sec2 {
  position: relative;
  width: 100%;
  height: 176rem;
}
.vivi_ui_wrap .sec2 .title {
  display: block;
  position: absolute;
  left: 67.5rem;
  top: 5.7rem;
  width: 57rem;
}

.vivi_ui_wrap .sado_intro_box {
  display: block;
  position: absolute;
}
.vivi_ui_wrap .intro_vivi {
  left: 31rem;
  top: 26.7rem;
  width: 107.5rem;
  height: 66.4rem;
}
.vivi_ui_wrap .intro_ui {
  left: 59.4rem;
  top: 101.1rem;
  width: 101.6rem;
  height: 66.5rem;
}

.vivi_ui_wrap .sado_intro_box .card_area {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 39.2rem;
}
.vivi_ui_wrap .intro_ui .card_area {
  left: 62.4rem;
}
.vivi_ui_wrap .sado_intro_box .card_box {
  display: block;
  position: relative;
  overflow: hidden;
  width: 39.2rem;
  height: 58.6rem;
}
.vivi_ui_wrap .sado_intro_box .card_bg {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.vivi_ui_wrap .sado_intro_box .card_frame {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
}
.vivi_ui_wrap .sado_intro_box .card_character_area {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left top;
  mask-position: left top;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.vivi_ui_wrap .intro_vivi .card_character_area {
  -webkit-mask-image: url(/assets/revive/intro/vivi_ui/img/card_bg_vivi-G-3p9Du9.webp);
  mask-image: url(/assets/revive/intro/vivi_ui/img/card_bg_vivi-G-3p9Du9.webp);
}
.vivi_ui_wrap .intro_ui .card_character_area {
  -webkit-mask-image: url(/assets/revive/intro/vivi_ui/img/card_bg_ui-_T_CA4Fm.webp);
  mask-image: url(/assets/revive/intro/vivi_ui/img/card_bg_ui-_T_CA4Fm.webp);
}
.vivi_ui_wrap .sado_intro_box .card_character {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.vivi_ui_wrap .sado_intro_box .card_character[hidden] {
  display: none;
}
.vivi_ui_wrap .intro_vivi .card_character img {
  display: block;
  position: absolute;
  left: -31.2rem;
  top: -26.6rem;
  width: 113.8rem;
}
.vivi_ui_wrap .intro_vivi .card_character:nth-child(2) img {
  left: -26.5rem;
}
.vivi_ui_wrap .intro_vivi .card_character:nth-child(3) img {
  left: -28.7rem;
}
.vivi_ui_wrap .intro_ui .card_character img {
  display: block;
  position: absolute;
  left: -24.2rem;
  top: -12rem;
  width: 88rem;
  transform: scaleX(-1);
}
.vivi_ui_wrap .sado_intro_box .btn_detail {
  display: block;
  position: absolute;
  left: 5.7rem;
  top: 59.6rem;
  width: 27.8rem;
  height: 6.8rem;
  background-image: url(/assets/revive/intro/vivi_ui/img/btn_detail_vivi-6P-eeG57.webp);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: transform .2s ease;
}
.vivi_ui_wrap .intro_ui .btn_detail {
  background-image: url(/assets/revive/intro/vivi_ui/img/btn_detail_ui-7qbMX6VI.webp);
}
.vivi_ui_wrap .sado_intro_box .btn_detail:hover {
  transform: translateY(-.4rem);
}

.vivi_ui_wrap .sado_intro_box .speech_box {
  display: block;
  position: absolute;
  left: 35.8rem;
  top: 1rem;
  z-index: 3;
  width: 60.1rem;
  height: 19.61rem;
  transform-origin: 50% 85%;
  animation: vivi_ui_speech_breath 3.2s ease-in-out infinite;
}
.vivi_ui_wrap .intro_ui .speech_box {
  left: 6.6rem;
  top: 2rem;
  animation-delay: -1.6s;
}
@keyframes vivi_ui_speech_breath {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025);
  }
  100% {
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vivi_ui_wrap .sado_intro_box .speech_box {
    animation: none;
  }
}

.vivi_ui_wrap .sado_intro_box .profile_box {
  display: block;
  position: absolute;
  left: 11.7rem;
  top: 22.5rem;
  z-index: 1;
  width: 95.8rem;
  height: 42rem;
}
.vivi_ui_wrap .intro_ui .profile_box {
  left: 0;
}
.vivi_ui_wrap .sado_intro_box .profile_bg {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.vivi_ui_wrap .sado_intro_box .character_name {
  display: block;
  position: absolute;
  left: 31.8rem;
  top: 5.06rem;
  color: #398b86;
  font-family: ONE Mobile POP, sans-serif;
  font-size: 3.8rem;
  font-weight: 400;
  line-height: 1;
}
.vivi_ui_wrap .intro_ui .character_name {
  left: 5.7rem;
  top: 5.86rem;
  width: 52.2rem;
  color: #78b054;
  text-align: right;
}
.vivi_ui_wrap .sado_intro_box .character_name .name_sparkle {
  display: inline-block;
  width: 2.7rem;
  height: 2.8rem;
  margin: 0 0 0 .9rem;
  vertical-align: -.1rem;
  background-image: url(/assets/revive/intro/vivi_ui/img/name_sparkle_vivi-FinRLjTT.webp);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.vivi_ui_wrap .intro_ui .character_name .name_sparkle {
  margin: 0 1.1rem 0 0;
  background-image: url(/assets/revive/intro/vivi_ui/img/name_sparkle_ui-ZQOS5r8q.webp);
}
.vivi_ui_wrap .sado_intro_box .character_story {
  display: block;
  position: absolute;
  left: 31.9rem;
  top: 10.53rem;
  color: #363636;
  font-family: Noto Sans KR, Pretendard, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.75;
  white-space: nowrap;
}
.vivi_ui_wrap .intro_ui .character_story {
  left: 1.9rem;
  top: 11.43rem;
  width: 56rem;
  text-align: right;
}

.vivi_ui_wrap .sado_intro_box .speech_bg {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.vivi_ui_wrap .sado_intro_box .speech_text {
  display: block;
  position: absolute;
  left: 11.57rem;
  top: 7.5rem;
  z-index: 1;
  color: #3c8b85;
  font-family: ONE Mobile POP, sans-serif;
  font-size: 3.92rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
.vivi_ui_wrap .intro_ui .speech_text {
  left: 18.04rem;
  top: 7.66rem;
  color: #7cb05a;
}
.vivi_ui_wrap .sado_intro_box .speech_character {
  display: block;
  position: absolute;
  left: 47.29rem;
  top: .35rem;
  z-index: 1;
  width: 12.45rem;
}
.vivi_ui_wrap .intro_ui .speech_character {
  left: .07rem;
  top: .07rem;
  width: 12.48rem;
}

.vivi_ui_wrap .sado_intro_box .expression_tab {
  display: block;
  position: absolute;
  left: 30.9rem;
  top: 26.6rem;
  width: 26.5rem;
  height: 9.5rem;
}
.vivi_ui_wrap .intro_ui .expression_tab {
  left: 32.4rem;
}
.vivi_ui_wrap .sado_intro_box .expression_tab .face_box {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.vivi_ui_wrap .sado_intro_box .expression_tab ul {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.vivi_ui_wrap .sado_intro_box .expression_tab ul li {
  display: block;
  position: absolute;
  top: 1rem;
  width: 7.5rem;
  height: 7.5rem;
}
.vivi_ui_wrap .sado_intro_box .expression_tab ul li:nth-child(1) {
  left: 1rem;
}
.vivi_ui_wrap .sado_intro_box .expression_tab ul li:nth-child(2) {
  left: 9.4rem;
}
.vivi_ui_wrap .sado_intro_box .expression_tab ul li:nth-child(3) {
  left: 17.7rem;
}
.vivi_ui_wrap .intro_ui .expression_tab ul li:nth-child(1) {
  left: 1.3rem;
}
.vivi_ui_wrap .intro_ui .expression_tab ul li:nth-child(2) {
  left: 9.6rem;
}
.vivi_ui_wrap .intro_ui .expression_tab ul li:nth-child(3) {
  left: 17.9rem;
}
.vivi_ui_wrap .sado_intro_box .expression_tab ul li button {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.vivi_ui_wrap .sado_intro_box .expression_tab ul li button img {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.vivi_ui_wrap .sado_intro_box .expression_tab ul li button img.on {
  display: none;
}
.vivi_ui_wrap .sado_intro_box .expression_tab ul li button img.off {
  display: block;
}
.vivi_ui_wrap .sado_intro_box .expression_tab ul li.on button img.on {
  display: block;
}
.vivi_ui_wrap .sado_intro_box .expression_tab ul li.on button img.off {
  display: none;
}

.vivi_ui_wrap .sec3 {
  position: relative;
  width: 100%;
  height: 106rem;
}
.vivi_ui_wrap .sec3 .title {
  display: block;
  position: absolute;
  left: 62.7rem;
  top: 5.1rem;
  width: 66.7rem;
}
.vivi_ui_wrap .sec3 .video_box {
  display: block;
  position: absolute;
  left: 44.7rem;
  top: 29.5rem;
  z-index: 1;
  overflow: hidden;
  width: 102.7rem;
  padding-bottom: 57.2rem;
  border: .6rem solid #e0f3e0;
  background: #000;
}
.vivi_ui_wrap .sec3 .video_box iframe {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.vivi_ui_wrap .sec3 .story_box {
  display: block;
  position: absolute;
  left: 55.1rem;
  top: 79.4rem;
  width: 81.9rem;
  height: 26.2rem;
}
.vivi_ui_wrap .sec3 .story_bg {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.vivi_ui_wrap .sec3 .story_text {
  display: block;
  position: absolute;
  left: 4.9rem;
  top: 11.6rem;
  width: 72rem;
  color: #265646;
  text-align: center;
  white-space: nowrap;
  font-family: Noto Sans KR, Pretendard, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.75;
}
.vivi_ui_wrap .sec3 .story_text span {
  display: block;
  font-family: inherit;
}

.vivi_ui_wrap .sec4 {
  position: relative;
  width: 100%;
  height: 61.3rem;
}
.vivi_ui_wrap .sec4 .character_ui {
  display: block;
  position: absolute;
  left: 6.5rem;
  top: -6.8rem;
  z-index: 5;
  width: 67.6rem;
  transform: scaleX(-1);
}
.vivi_ui_wrap .sec4 .character_vivi {
  display: block;
  position: absolute;
  left: 122.6rem;
  top: -18.9rem;
  z-index: 4;
  width: 76.2rem;
}
.vivi_ui_wrap .sec4 .divider {
  display: block;
  position: absolute;
  left: 22.4rem;
  top: 9.9rem;
  z-index: 3;
  width: 147.4rem;
}
.vivi_ui_wrap .sec4 .community_text {
  display: block;
  position: absolute;
  left: 78.1rem;
  top: 27.6rem;
  z-index: 2;
  width: 36.1rem;
}
.vivi_ui_wrap .sec4 .btn_community {
  display: block;
  position: absolute;
  left: 69.4rem;
  top: 30.5rem;
  z-index: 1;
  width: 53.1rem;
  height: 15.6rem;
  background-image: url(/assets/revive/intro/vivi_ui/img/btn_community-djuxGpX4.webp);
  background-repeat: no-repeat;
  background-size: 73rem 20.2rem;
  background-position: -9.8rem -2.5rem;
  transition: transform .2s ease;
}
.vivi_ui_wrap .sec4 .btn_community:hover {
  transform: translateY(-.4rem);
}

@media (max-width: 780px) {
  .vivi_ui_wrap .sec_in .web {
    display: none;
  }
  .vivi_ui_wrap .sec_in .mobile {
    display: block;
  }
  .vivi_ui_wrap .sec_in br.mobile {
    display: inline;
  }
  .vivi_ui_wrap .sec_in {
    width: 39rem;
    margin-left: -19.5rem;
  }
  .vivi_ui_wrap .bg_area .bg_sec01 {
    left: 50%;
    top: -1.19rem;
    width: 45.64rem;
    height: 63.73rem;
    margin-left: -22.61rem;
    background-image: url(/assets/revive/intro/vivi_ui/img/bg_sec01_mobile-mB1y8_LU.webp);
  }
  .vivi_ui_wrap .bg_area .bg_sec02 {
    left: 50%;
    top: 56.84rem;
    width: 39rem;
    height: 122.09rem;
    margin-left: -19.5rem;
    background-image: url(/assets/revive/intro/vivi_ui/img/bg_sec02_mobile-OfNypatV.webp);
  }
  .vivi_ui_wrap .bg_area .bg_sec02_tail {
    display: none;
  }
  .vivi_ui_wrap .bg_area .bg_sec03 {
    left: 50%;
    top: 156.29rem;
    width: 39rem;
    height: 139.28rem;
    margin-left: -19.5rem;
    background-image: url(/assets/revive/intro/vivi_ui/img/bg_sec03_mobile-bIhs7Sdf.webp);
  }

  .vivi_ui_wrap .sec1 {
    height: 62.33rem;
  }
  .vivi_ui_wrap .sec1 .bg_title {
    left: 5.92rem;
    top: 10.76rem;
    width: 26.65rem;
  }
  .vivi_ui_wrap .sec1 .naming_box {
    left: 4.15rem;
    top: 39.14rem;
    width: 30.69rem;
  }
  .vivi_ui_wrap .sec1 .sado_sc_down {
    left: 13.66rem;
    top: 51.3rem;
    width: 12.42rem;
  }

  .vivi_ui_wrap .sec2 {
    height: 108.66rem;
  }
  .vivi_ui_wrap .sec2 .title {
    left: 9.32rem;
    top: 0;
    width: 20.37rem;
  }
  .vivi_ui_wrap .intro_vivi,
  .vivi_ui_wrap .intro_ui {
    left: 0;
    top: 0;
    width: 39rem;
    height: 108.66rem;
  }
  .vivi_ui_wrap .sado_intro_box .card_area {
    left: 2.2rem;
    top: 8.01rem;
    width: 21.23rem;
  }
  .vivi_ui_wrap .intro_ui .card_area {
    left: 15.56rem;
    top: 56.76rem;
  }
  .vivi_ui_wrap .sado_intro_box .card_box {
    width: 21.23rem;
    height: 31.74rem;
  }
  .vivi_ui_wrap .intro_vivi .card_character img {
    left: -16.9rem;
    top: -14.41rem;
    width: 61.64rem;
  }
  .vivi_ui_wrap .intro_vivi .card_character:nth-child(2) img {
    left: -14.36rem;
  }
  .vivi_ui_wrap .intro_vivi .card_character:nth-child(3) img {
    left: -15.55rem;
  }
  .vivi_ui_wrap .intro_ui .card_character img {
    left: -13.11rem;
    top: -6.5rem;
    width: 47.67rem;
  }
  .vivi_ui_wrap .sado_intro_box .btn_detail {
    left: 18.49rem;
    top: 33.3rem;
    width: 15.02rem;
    height: 3.68rem;
  }
  .vivi_ui_wrap .intro_ui .btn_detail {
    left: -12.09rem;
    top: 33.52rem;
  }
  .vivi_ui_wrap .sado_intro_box .speech_box {
    left: 23.94rem;
    top: 10.4rem;
    width: 12.89rem;
    height: 11.34rem;
  }
  .vivi_ui_wrap .intro_ui .speech_box {
    left: 2.17rem;
    top: 59.08rem;
  }
  .vivi_ui_wrap .sado_intro_box .speech_text,
  .vivi_ui_wrap .intro_ui .speech_text {
    left: 0;
    top: .82rem;
    width: 100%;
    text-align: center;
    font-size: 1.519rem;
    line-height: 1.2;
    white-space: normal;
  }
  .vivi_ui_wrap .sado_intro_box .speech_character {
    left: 4.07rem;
    top: 4.59rem;
    width: 4.78rem;
  }
  .vivi_ui_wrap .intro_ui .speech_character {
    left: 3.69rem;
    top: 4.59rem;
    width: 4.83rem;
  }
  .vivi_ui_wrap .sado_intro_box .profile_box {
    left: 2.2rem;
    top: 40.12rem;
    width: 34.59rem;
    height: 15.17rem;
  }
  .vivi_ui_wrap .intro_ui .profile_box {
    left: 2.2rem;
    top: 88.9rem;
  }
  .vivi_ui_wrap .sado_intro_box .character_name {
    left: 1.95rem;
    top: 1.86rem;
    width: auto;
    font-size: 2.1rem;
  }
  .vivi_ui_wrap .intro_ui .character_name {
    left: 1.01rem;
    top: 1.95rem;
    width: 32rem;
  }
  .vivi_ui_wrap .sado_intro_box .character_name .name_sparkle {
    width: 1.49rem;
    height: 1.55rem;
    margin: 0 0 0 .5rem;
    vertical-align: -.06rem;
  }
  .vivi_ui_wrap .intro_ui .character_name .name_sparkle {
    margin: 0 .61rem 0 0;
  }
  .vivi_ui_wrap .sado_intro_box .character_story {
    left: 1.95rem;
    top: 5.063rem;
    width: 28rem;
    font-size: 1.106rem;
    letter-spacing: -.04em;
    line-height: 1.75;
  }
  .vivi_ui_wrap .intro_ui .character_story {
    left: 1.01rem;
    top: 5.28rem;
    width: 32rem;
  }
  .vivi_ui_wrap .sado_intro_box .expression_tab {
    left: 21.99rem;
    top: -14.74rem;
    width: 5.16rem;
    height: 14.37rem;
  }
  .vivi_ui_wrap .intro_ui .expression_tab {
    left: 7.44rem;
    top: -14.59rem;
    height: 14.34rem;
  }
  .vivi_ui_wrap .sado_intro_box .expression_tab .face_box {
    left: 50%;
    top: 50%;
    width: 14.37rem;
    transform: translate(-50%, -50%) rotate(90deg);
  }
  .vivi_ui_wrap .sado_intro_box .expression_tab ul li {
    width: 4.08rem;
    height: 4.08rem;
  }
  .vivi_ui_wrap .sado_intro_box .expression_tab ul li:nth-child(1) {
    left: 0.55rem;
    top: 0.55rem;
  }
  .vivi_ui_wrap .sado_intro_box .expression_tab ul li:nth-child(2) {
    left: 0.55rem;
    top: 5.08rem;
  }
  .vivi_ui_wrap .sado_intro_box .expression_tab ul li:nth-child(3) {
    left: 0.55rem;
    top: 9.56rem;
  }
  .vivi_ui_wrap .intro_ui .expression_tab ul li:nth-child(1) {
    left: 0.54rem;
    top: 0.69rem;
  }
  .vivi_ui_wrap .intro_ui .expression_tab ul li:nth-child(2) {
    left: 0.54rem;
    top: 5.18rem;
  }
  .vivi_ui_wrap .intro_ui .expression_tab ul li:nth-child(3) {
    left: 0.54rem;
    top: 9.66rem;
  }

  .vivi_ui_wrap .sec3 {
    height: 47.12rem;
  }
  .vivi_ui_wrap .sec3 .title {
    left: 7.55rem;
    top: 0;
    width: 23.87rem;
  }
  .vivi_ui_wrap .sec3 .video_box {
    left: 0.94rem;
    top: 8.77rem;
    width: 37.09rem;
    padding-bottom: 20.65rem;
    border-width: 0.22rem;
  }
  .vivi_ui_wrap .sec3 .story_box {
    left: 2.96rem;
    top: 28.92rem;
    width: 33.11rem;
    height: 16.72rem;
  }
  .vivi_ui_wrap .sec3 .story_text {
    left: 0.97rem;
    top: 2.16rem;
    width: 31rem;
    font-size: 1.364rem;
    letter-spacing: -.04em;
    line-height: 1.377;
    white-space: normal;
  }
  .vivi_ui_wrap .sec3 .story_text span {
    margin-bottom: .505rem;
  }
  .vivi_ui_wrap .sec3 .story_text span:last-child {
    margin-bottom: 0;
  }

  .vivi_ui_wrap .sec4 {
    height: 43.87rem;
  }
  .vivi_ui_wrap .sec4 .character_vivi {
    left: 13.09rem;
    top: 0.18rem;
    width: 26.68rem;
  }
  .vivi_ui_wrap .sec4 .divider {
    left: 4.33rem;
    top: 2.17rem;
    overflow: hidden;
    width: 30.33rem;
  }
  .vivi_ui_wrap .sec4 .divider img {
    width: 112.2rem;
    margin-left: -40.9rem;
  }
  .vivi_ui_wrap .sec4 .character_ui {
    left: -1.38rem;
    top: 5.02rem;
    width: 24.43rem;
  }
  .vivi_ui_wrap .sec4 .community_text {
    left: 9.75rem;
    top: 30.7rem;
    width: 19.5rem;
  }
  .vivi_ui_wrap .sec4 .btn_community {
    left: 5.13rem;
    top: 32.28rem;
    width: 28.78rem;
    height: 8.49rem;
    background-size: 39.58rem 10.91rem;
    background-position: -5.3rem -1.37rem;
  }
}