@charset "utf-8";

* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  vertical-align: top;
}

html,
body {
  overflow-x: hidden;
}

#heroWrap {
  position: relative;
  top: 0;
  left: 0;

  width: 100%;
  height: 100vh;
}

#heroBox {
  position: relative;

  width: 100%;
  height: 100vh;

  z-index: 2;
}

#BG {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;

  z-index: -2;
}

#heroTextBox {
  position: absolute;
  top: 0;
  left: 0%;

  width: 100%;

  z-index: -1;
}

#heroTextBox > img {
  width: 30%;
}

.sticker_box {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
}

.sticker_box > img {
  position: absolute;
  width: 20%;
}

.sticker_box > img:nth-child(1) {
  top: 7%;
  left: 3%;
  width: 16%;
}

.sticker_box > img:nth-child(2) {
  top: 50%;
  left: 21%;
}

.sticker_box > img:nth-child(3) {
  top: 3%;
  left: 36%;
  width: 20%;
}

.sticker_box > img:nth-child(4) {
  top: 40%;
  left: 54%;
  width: 17%;
}

.sticker_box > img:nth-child(5) {
  top: 10%;
  left: 70%;
  width: 17%;
}

.sticker_box > img:nth-child(6) {
  top: 10%;
  left: 20%;
  width: 12%;
}

.sticker_box > img:nth-child(7) {
  top: 60%;
  left: 43%;
  width: 7%;
}

.sticker_box > img:nth-child(8) {
  top: 60%;
  left: 13%;
  width: 7%;
}

.sticker_box > img:nth-child(9) {
  top: 50%;
  left: 73%;
  width: 20%;
}

#characterWrap {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;

  z-index: 11;
}

#characterScroll {
  position: absolute;
  width: 100%;

  height: 100vh;

  left: 0;
  top: 0%;
}

.hero_box {
  position: absolute;

  z-index: 10;
  position: absolute;
  width: 8%;
  margin-top: 4%;
}

.big {
  position: absolute;
  z-index: 10;
  position: absolute;
  width: 18%;
  margin-top: 4%;
}

.hero_img {
  width: 100%;
  max-width: 100%;
  height: auto;
  backface-visibility: hidden;
  vertical-align: bottom;
}

.hero_bg_box {
  position: absolute;
  width: 100%;
  max-width: 100%;
  height: auto;
  backface-visibility: hidden;
  vertical-align: bottom;
}

.flower_bg_box {
  position: absolute;
  width: 150%;
  max-width: 150%;
  height: auto;
  backface-visibility: hidden;
  vertical-align: bottom;
}

.hero_bg {
  width: 5%;
  max-width: 5%;
  height: auto;
  backface-visibility: hidden;
  vertical-align: bottom;
}

.hero_cute_box {
  position: absolute;
  width: 80%;
  max-width: 80%;
  height: auto;
  backface-visibility: hidden;
  vertical-align: bottom;
}

.section-group--horizontal > .section {
  flex-shrink: 0;
}

.section8 > p {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
}

.section {
  min-height: 100vh;
  display: flex;

  font-weight: bold;
}

.section--9 > p {
  font-size: 2em;
  position: absolute;
  top: 30%;
  right: 20%;
}

.section--7 {
  z-index: 4;
}

#cassidiy {
  top: 26%;
  left: 7%;
}

#cassidiy_bg {
  top: 46.5%;
  left: 17.5%;
}

#cassidiy_cute {
  top: 47.5%;
  left: 18%;
}

#cassidiy_flower_bg {
  top: 49%;
  left: 7%;
}

#cassidiy_vdo {
  position: absolute;
  width: 8%;
  height: 34%;

  border: 10px solid rgb(98, 60, 30);
  top: 59%;

  left: 13%;
  border-radius: 100%;
  overflow: hidden;
}

#cassidiy_vdo > video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#cassidiy_text_box {
  position: absolute;
  top: 53%;
  left: 17%;
}

#cassidiy_text_box > p {
  font-family: "코버워치";
  font-size: 2em;
  color: white;

  transform: rotate(-3deg);
}

.sticker {
  width: 100%;
  height: 100%;
  position: absolute;
}

.sticker > img {
  position: absolute;
  width: 10%;
}

#cassidiy_sticker {
  left: 0;
  top: 55%;
}

#genji {
  top: 10%;
  left: 22%;
}
#genji_bg {
  top: 10%;
  left: 33%;
}

#genji_cute {
  top: 12%;
  left: 33.5%;
}

.genji_flower_bg_box {
  position: absolute;
  width: 180%;
  max-width: 180%;
  height: auto;
  backface-visibility: hidden;
  vertical-align: bottom;
}

#genji_flower_bg {
  top: 32%;
  left: 22%;
  z-index: -1;
}

#genji_vdo {
  position: absolute;
  width: 8%;
  height: 34%;
  border: 10px solid rgb(235, 241, 61);
  top: 21%;

  left: 28%;
  border-radius: 100%;
  overflow: hidden;
}
#genji_vdo > video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#genji_sticker {
  left: 25%;
  top: 50%;
}

#reinharts {
  top: -120px;
  left: 33.5%;
}
#reinharts_bg {
  top: 70.5%;
  left: 52%;
  width: 100%;
}

#reinharts_cute {
  top: 72%;
  left: 52.5%;
}

.reinharts_flower_bg_box {
  position: absolute;
  width: 250%;
  max-width: 250%;
  height: auto;
  backface-visibility: hidden;
  vertical-align: bottom;
}

#reinharts_flower_bg {
  top: 38%;
  left: 36%;
  z-index: -1;
}

#reinharts_vdo {
  position: absolute;
  width: 11%;
  height: 46%;
  border: 10px solid rgb(235, 241, 61);
  top: 34.5%;

  left: 45%;
  border-radius: 100%;
  overflow: hidden;
}

#reinharts_vdo > video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#reinharts_sticker {
  left: 52%;
  top: -50px;
  width: 80%;
}

.kiriko_box {
  width: 11%;
}
#kiriko {
  top: 10%;
  left: 55.5%;
}
#kiriko_bg {
  top: 34%;
  left: 62%;
  width: 100%;
}

#kiriko_cute {
  top: 34%;
  left: 62.5%;
}

.kiriko_flower_bg_box {
  position: absolute;
  width: 170%;
  max-width: 170%;
  height: auto;
  backface-visibility: hidden;
  vertical-align: bottom;
}

#kiriko_flower_bg {
  top: 40%;
  left: 57%;
  z-index: -1;
}

#kiriko_vdo {
  position: absolute;
  width: 9%;
  height: 38%;
  border: 10px solid rgb(47, 136, 200);
  top: 49%;
  left: 62%;
  border-radius: 100%;
  overflow: hidden;
}

#kiriko_vdo > video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#kiriko_sticker {
  left: 65%;
  top: 10%;
  width: 60%;
  /* transform: rotate(-10deg); */
}

#winston {
  top: 0%;
  left: 70%;
}
#winston_bg {
  top: 4.5%;
  left: 76%;
  width: 100%;
}

#winston_cute {
  top: 6%;
  left: 76.4%;
}

.winston_flower_bg_box {
  position: absolute;
  width: 190%;
  max-width: 190%;
  height: auto;
  backface-visibility: hidden;
  vertical-align: bottom;
}

#winston_flower_bg {
  top: 19%;
  left: 70%;
  z-index: -1;
}

#winston_vdo {
  position: absolute;
  width: 10%;
  height: 42%;
  border: 10px solid rgb(151, 44, 25);
  top: 6%;
  left: 77.5%;
  border-radius: 100%;
  overflow: hidden;
}

#winston_vdo > video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#winston_sticker {
  top: 50%;
  left: 73%;
}

#lifewever {
  top: 23%;
  left: 90%;
}
#lifewever_bg {
  top: 78%;
  left: 82%;
  width: 100%;
}

#lifewever_cute {
  top: 79.5%;
  left: 82.5%;
}

.lifewever_flower_bg_box {
  position: absolute;
  width: 190%;
  height: auto;
  backface-visibility: hidden;
  vertical-align: bottom;
}

#lifewever_flower_bg {
  top: 53%;
  left: 90.9%;
  z-index: -1;
}

#lifewever_vdo {
  position: absolute;
  width: 9%;
  height: 38%;
  border: 10px solid rgb(151, 44, 25);
  top: 58%;
  left: 85%;
  border-radius: 100%;
  overflow: hidden;
}

#lifewever_vdo > video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#lifewever_sticker {
  top: 0;
  left: 90%;
}

.section-group--horizontal {
  display: flex;
  position: relative;
  width: 100%;
}

.section-group--horizontal > .section {
  width: min(5600px, 430vh);
}

.section8 {
  /* background-color: red; */
  position: relative;
  /* left: -1000px; */
  z-index: -2;
}
.section8_content_box {
  position: absolute;
  width: 1920px;
  height: 100%;
  left: 0;
  /* background-color: rgba(0, 0, 255, 0.298); */
}

.section11 {
  width: 100%;
  /* background-image: url(../img/0_overwatch_group.jpg); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section11_img_box {
  position: relative;
  width: 130%;
}
.section11_img_box > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  max-width: 100%;
  min-width: 100%;
  min-height: 100%;
  filter: brightness(0.5);
}

.section11_text_box {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  font-family: "코버워치";
  color: white;
}

.section11_text_box > p {
  position: absolute;
  font-size: 2.5em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}

.section11_text_btn {
  width: 150px;

  background-color: orangered;
  border-radius: 7px;
  padding: 1em 0;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
}

/* 모바일 */
@media all and (max-width: 767px) {
  #characterScroll {
    position: absolute;
    width: min(5600px, 430vh);

    height: 100vh;

    left: 0;
    top: 0%;
  }
  #heroTextBox {
    position: absolute;
    top: 2%;
    left: 0%;
    z-index: -1;
  }

  #heroTextBox > img {
    width: 30.5%;
    max-width: 100%;
  }

  #cassidiy {
    top: 30%;
    left: 3%;
  }

  #cassidiy_flower_bg {
    display: none;
  }

  #cassidiy_bg {
    left: 12%;
    top: 44%;
  }

  #cassidiy_cute {
    left: 12.5%;
    top: 45%;
  }

  #cassidiy_vdo {
    left: 7%;
    top: 55%;
  }

  #cassidiy_sticker {
    left: 12%;
    top: 0%;
  }
  #genji {
    top: 20%;
  }

  #genji_flower_bg {
    display: none;
  }

  #genji_bg {
    left: 23%;
  }

  #genji_cute {
    left: 23.5%;
  }

  #genji_vdo {
    left: 23.5%;
  }

  #genji_sticker {
    left: 30%;
    top: 55%;
  }

  #reinharts {
    left: 37%;
    top: -150px;
    width: 12%;
  }

  #reinharts_flower_bg {
    display: none;
  }

  #reinharts_bg {
    top: 80%;
    left: 47%;
  }

  #reinharts_cute {
    top: 81%;
    left: 47.5%;
  }

  #reinharts_vdo {
    top: 44%;
    left: 40.7%;
  }

  #reinharts_sticker {
    left: 50%;
    top: 5%;
  }

  #kiriko {
    left: 57%;
  }
  #kiriko_flower_bg {
    display: none;
  }

  #kiriko_bg {
    top: 35%;
    left: 65%;
  }

  #kiriko_cute {
    top: 35.5%;
    left: 65.7%;
  }

  #kiriko_vdo {
    top: 8%;
    left: 60.2%;
  }

  #kiriko_sticker {
    top: 100%;
    left: 68%;
    transform-origin: top right;
    transform: rotate(10deg);
  }

  #winston {
    top: 0;
    left: 79%;
  }
  #winston_flower_bg {
    display: none;
  }

  #winston_bg {
    top: 80%;
    left: 75%;
  }

  #winston_cute {
    top: 81%;
    left: 75.5%;
  }

  #winston_vdo {
    left: 76%;
    top: 50%;
  }

  #winston_sticker {
    top: 0;
    left: 70%;
  }
  #lifewever {
    top: 20%;
    left: 93%;
  }
  #lifewever_flower_bg {
    display: none;
  }

  #lifewever_vdo {
    top: 5%;
    left: 93%;
  }

  #lifewever_bg {
    left: 99%;
    top: 30%;
  }

  #lifewever_cute {
    left: 99.5%;
    top: 31%;
  }

  #lifewever_sticker {
    top: 40%;
    left: 100%;
  }

  .sticker_box {
    display: none;
  }

  .section11 {
    max-width: 767px;
    width: 767px;
  }

  .section11_text_box > p {
    font-size: 1em;
  }
}