@import "https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css";

.side_menu {
  z-index: 20000;
}

header {
  z-index: 1001;
}
footer {
  margin-top: 0;
}
#loc {
  position: relative;
  z-index: 1000;
  background-color: #fff;
}


.subcontent {
  height: 2000px;
}
.subcontent2 {
  height: 1000px;
}
.subcontent3 {
  height: 2000px;
}
.parallax_scroll {
  position: relative;
  height: 3600px;
  z-index: 200;
  overflow: hidden;
}
.parallax {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 100;
}
.parallax .parallax-content {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #ececec;
}

.glow {
  position: absolute;
  top: -30%;
  left: 50%;
  width: 100%;
  height: 100%;
  /* overflow: hidden; */
  opacity: 0;
}

@media (max-width: 1024px) {
  .glow {
    transform: scale(0.6);
  }
}
@media (max-width: 500px) {
  .glow {
    transform: scale(0.4);
  }
}
.glow:after {
  content: "Glow";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
}

.movement {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 80;
}

.visual-slogan {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #000;
  opacity: 0.06;
  z-index: 90;
}
.visual-slogan .txt {
  display: block;
  font-family: Pretendard;
  font-weight: 900;
  font-size: 100px;
  line-height: 140%;
}
.visual-slogan .txt:first-child {
  letter-spacing: 0.02em;
}
@media (max-width: 1024px) {
  .visual-slogan {
  }
  .visual-slogan .txt {
    font-size: 50px;
  }
}
@media (max-width: 500px) {
  .visual-slogan {
  }
  .visual-slogan .txt {
    font-size: 32px;
  }
}



.visual-full-logo {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.visual-full-logo .full-logo {
  width: 720px;
  height: 601px;
  animation-name: logo;
  animation-duration: 3s;
  animation-delay: 7s;
  animation-fill-mode: forwards;
  background-image: url("../img/cube/logo-full.png");
  background-repeat: no-repeat;
  background-size: contain;
  font-size: 0;
}
.visual-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  opacity: 0;
}
.visual-logo .simbol {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  width: 396px;
  height: 396px;
  background-image: url("../img/cube/logo-simbol.png");
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-width: 1024px) {
  .visual-logo .simbol {
    transform: translate(-50%, -50%) scale(0.3);
  }
}
@media (max-width: 500px) {
  .visual-logo .simbol {
    transform: translate(-50%, -50%) scale(0.2);
  }
}

.visual {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 396px;
  height: 396px;
  transform: translate(-50%, -50%);
}
.visual .visual-container {
  position: absolute;
  top: 97px;
  z-index: 100;
}
.visual .visual-action {
  position: absolute;
  top: 0;
  left: 0;
}
.visual .visual-action[data-depth="0"] {
  z-index: 100;
}
.visual .visual-action[data-depth="1"] {
  top: -32px;
  left: 32px;
  z-index: 90;
}
.visual .visual-action[data-depth="2"] {
  top: -64px;
  left: 64px;
  z-index: 80;
}
.visual .visual-action[data-depth="3"] {
  top: -96px;
  left: 96px;
  z-index: 70;
}
.visual .visual-box {
  position: absolute;
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-size: contain;
}
.visual .visual-box[data-cube="1"] {
  background-image: url("../img/cube/cube-01.png");
}
.visual .visual-box[data-cube="2"] {
  background-image: url("../img/cube/cube-02.png");
}
.visual .visual-box[data-cube="3"] {
  background-image: url("../img/cube/cube-03.png");
}
.visual .visual-box[data-cube="4"] {
  background-image: url("../img/cube/cube-04.png");
}
.visual .visual-box[data-cube="5"] {
  background-image: url("../img/cube/cube-05.png");
}
.visual .visual-box[data-cube="6"] {
  background-image: url("../img/cube/cube-06.png");
}
.visual .visual-box[data-cube="7"] {
  background-image: url("../img/cube/cube-07.png");
}
.visual .visual-box[data-cube="8"] {
  background-image: url("../img/cube/cube-08.png");
}
.visual .visual-box[data-cube="9"] {
  background-image: url("../img/cube/cube-09.png");
}
.visual .visual-box[data-cube="10"] {
  background-image: url("../img/cube/cube-10.png");
}
.visual .visual-box[data-cube="11"] {
  background-image: url("../img/cube/cube-11.png");
}
.visual .move .visual-box {
  transition: all 2.4s cubic-bezier(0.06, 0.72, 0.41, 0.98);
  transform: translate(0) !important;
}

/* Cube Page */

.brand_content {
  position: relative;
  z-index: 1000;
}
.cube-logo {
  position: relative;
  width: 100%;
  height: 1210px;
  background-color: #fff;
  background-position: center;
  font-size: 0;
}

.cube-logo:before {
  content: "logo";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 281px;
  height: 228px;
  background-image: url("../img/cube/logo-full.png");
  background-repeat: no-repeat;
  background-size: 281px 228px;
  transition: all 3s cubic-bezier(0.06, 0.72, 0.41, 0.98);
  transform: translate(-50%, -200%);
  opacity: 0;
}
.cube-logo[data-move="true"]:before {
  transform: translate(-50%, -50%);
  opacity: 1;
}
.cube-logo:after {
  content: "People";
  position: absolute;
  top: 0;
  right: 0;
  width: 139px;
  height: 1213px;
  background-image: url("../img/cube/cube-page-txt.png");
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-width: 1600px) {
  .cube-logo {
    height: 500px;
    background-size: 140px auto;
  }
  .cube-logo:before {
    width: 14.635416666666667vw;
    height: 11.875vw;
    background-size: contain;
  }
  .cube-logo:after {
    content: none;
  }
}

@media (max-width: 1024px) {
  .cube-logo:after {
    content: none;
  }
  .cube-logo:before {
    width: 27.44140625vw;
    height: 22.265625vw;
    background-size: contain;
  }
}

.about {
  background-color: #f5f5f5;
  background-image: url("../img/cube/cube-page-bottom.png");
  background-position: bottom right;
  background-repeat: no-repeat;
  padding: 0 30px;
  box-sizing: border-box;
}
.about-content {
  position: relative;
  width: 1600px;
  height: 1740px;
  margin: 0 auto;
  padding-bottom: 150px;
}
@media (max-width: 1600px) {
  .about-content {
    width: 100%;
    height: auto;
    overflow: hidden;
  }
}
.about-01 {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
}
.about-01 .icon {
  transform: translateY(-174px) translateX(-20%);
  margin-right: 112px;
  opacity: 0;
  transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.about-01 .icon[data-move="true"] {
  transform: translateY(-174px) translateX(0%);
  opacity: 1;
}
.about-01 .info {
  transform: translateY(0) translateX(20%);
  opacity: 0;
  transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.about-01 .info[data-move="true"] {
  transform: translateY(0) translateX(0%);
  opacity: 1;
}

@media (max-width: 1600px) {
  .about-01 {
    position: relative;
    padding-top: 70px;
    align-items: center;
    flex-direction: column;
  }
  .about-01 .icon {
    transform: translateY(0) translateX(-20%);
    margin-right: 60px;
  }
  .about-01 .icon[data-move="true"] {
    transform: translateY(0) translateX(0%);
    opacity: 1;
  }
}

.about .info .title {
  font-size: 52px;
  font-weight: 900;
  color: #000;
}

.about .info .cont {
  font-size: 22px;
  font-weight: 600;
  color: #000;
  margin-top: 50px;
}

.about .info .opt {
  font-size: 17px;
  font-weight: 400;
  color: #757575;
  margin-top: 30px;
}

.about .info .link {
  display: flex;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  align-items: center;
  margin-top: 50px;
}
.about .info .link:before {
  content: "Arr";
  width: 7.4rem;
  height: 7.4rem;
  background-image: url("../img/cube/btn-cube-link.png");
  background-size: contain;
  font-size: 0;
  margin-right: 24px;
}

@media (max-width: 1600px) {
  .about .info {
    margin-top: 50px;
  }
  .about-content .icon {
    margin: 0 auto !important;
  }
  .about-content .icon .image {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
}

.about-02 {
  position: absolute;
  top: 236px;
  left: 1000px;
  display: flex;
  flex-direction: column;
}

.about-02 .icon {
  opacity: 0;
  transform: translateY(0) translateX(20%);
  transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.about-02 .icon[data-move="true"] {
  transform: translateY(0) translateX(0%);
  opacity: 1;
}
.about-02 .info {
  opacity: 0;
  transform: translateY(0) translateX(20%);
  transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.about-02 .info[data-move="true"] {
  transform: translateY(0) translateX(0%);
  opacity: 1;
}

@media (max-width: 1600px) {
  .about-02 {
    position: static;
    padding-top: 70px;
    align-items: center;
    flex-direction: column;
  }
  .about-02 .icon {
    margin-right: 60px;
  }
}

.about-03 {
  position: absolute;
  top: 560px;
  left: 50px;
  display: flex;
  flex-direction: column;
}
.about-03 .icon {
  opacity: 0;
  transform: translateY(0) translateX(-20%);
  transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.about-03 .icon[data-move="true"] {
  transform: translateY(0) translateX(0%);
  opacity: 1;
}
.about-03 .info {
  opacity: 0;
  transform: translateY(0) translateX(-20%);
  transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.about-03 .info[data-move="true"] {
  transform: translateY(0) translateX(0%);
  opacity: 1;
}

@media (max-width: 1600px) {
  .about-03 {
    position: static;
    padding-top: 70px;
    align-items: center;
    flex-direction: column;
  }
  .about-03 .icon {
    margin-right: 60px;
  }
}

footer {
  position: relative;
  z-index: 2000;
}

footer .ft_nav .container {
  background-color: #fff;
}

@media (max-width: 500px) {
}

.brand-banner {
  position: relative;
}
.brand-banner .image {
  display: block;
  width: 100%;
}

.brand-banner .brand-slogan {
  position: absolute;
  top: 14.791666666666667vw;
  left: 7.8vw;
  display: block;
  width: 30.67708333333333vw;
  height: 13.28125vw;
  background-image: url("../img/cube/brand-slogan.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  opacity: 0;
  transform: translateX(-20%);
  transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 100;
}
.brand-banner .brand-slogan[data-move="true"] {
  opacity: 1;
  transform: translateX(0);
}

.brand-banner .brand-photo {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: auto;
  height: 100%;
  opacity: 0;
  transform: translateX(20%);
  transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.brand-banner .brand-photo[data-move="true"] {
  opacity: 1;
  transform: translateX(0);
}



@media (max-width: 520px) {
  .about .info .title {
      font-size: 3.4rem;
  }
  .about .info .cont {
      margin-top:3rem;
      font-size: 2rem;
  }
  .about .info .opt {
      font-size: 1.6rem;
      margin-top: 2rem;
  } 
  .about-03 .info {
    width:100%;
  }
  .about .info .link {
    font-size:1.8rem;
    margin-top:3rem;
  }
}