@charset "utf-8";
/*--------------------------------------------------
 * Hero 
 * Section
 ----------------------*/
/** FullPages **/
.fp-auto-height.fp-section, .fp-auto-height.fp-section .fp-tableCell {
  height:auto !important;
}

#page.dark-logo img.site-logo-dark {
  display: block;
}

#page.dark-logo img.site-logo-light {
  display: none;
}

/** Hero **/
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: 100%;
}

.hero-vdo {
  width: 100%;
  height: 100vh;
  background: var(--dark);
}

/* body .video-background-controls {
  position: absolute;
  top: 0 !important;!i;!;
  left: 0;
  right: inherit !important;!i;!;
  width: 100%;
  height: 100%;
} */

.play-toggle {
  position: absolute;
  bottom: 32px;
  left: 32px;
  z-index: 1;
  color: #FFF;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  padding-left: 30px;
  background: url('../images/main/ico-pause.svg') 0;
}

.play-toggle.vdo-play {
  background-image: url('../images/main/ico-play.svg');
}

/** Section **/
section {
  padding: 24px 140px;
  height: calc(100vh + 24px););
  background-color: var(--dark);
  overflow: hidden;
}

section.back_01 {
  background: url('../images/main/bg-main-01.jpg') 50% 0 / cover;
}

section.back_02 {
  background: url('../images/main/bg-main-02.jpg') 50% 0 / cover;
}

section.back_03 {
  background: url('../images/main/bg-main-03.jpg') 50% 0 / cover;
}

section.back_04 {
  /* background: url('../images/main/bg-main-04.jpg') 50% 0 / cover; */
  background-color: #141414;
}

section.back_05 {
  background: url('../images/main/bg-main-05.jpg') 50% 0 / cover;
}

section.back_06 {
  background: url('../images/main/bg-main-06.jpg') 50% 0 / cover;
  padding: 0;
}

section.back_07 {
  background: url('../images/main/bg-main-07.jpg') 50% 0 / cover;
}

section.slogun {
  padding: 0;
  align-items: center;
  height: 30vh;
  /* text-align: center; */
  /* display: flex; */
  /* height: 100vh; */
  background-color: #FFF;
}

.section-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

section.back_06 .section-inner {
  z-index: 1;
}

.section-inner.lt {
  justify-content: flex-start;
}

.section-inner.rt {
  justify-content: flex-end;
}


.section-inner.rtm {
  justify-content: flex-end;
  padding-top: 250px;
}

.section-inner.ct {
  padding-top: 180px;
  padding-bottom: 180px;
}

.section-inner.ct2 {
  padding-top: 400px;
  padding-bottom: 180px;
}

.section-inner.ltop {
  justify-content: flex-start;
  align-items: flex-start;
}


.section-inner.ctop {
  padding-top: 140px;
  align-items: flex-start;
  justify-content: center;
}

.section-inner p {
  color: #FFF;  
}

.size-xl {
  font-size: 52px;
  line-height: 1.5em;
}

.size-xl:lang(ko) {
  font-size: 56px;
  font-weight: 500;
  line-height: 1.4em;
}

.size-lg {
  font-size: 46px;  
  line-height: 1.2em;
}

.size-xs {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.5em;
}

.size-xs:lang(ko) {
  line-height: 1.7;
}

.section-inner.rt p {
  text-align: right;
}

.section-inner.ctop p {
  text-align: center;
}

p.w400 {
  font-weight: 400 !important;
}

p.miracle {
  font-size: 28px;
  line-height: 1.3em;
  line-height: 1.6;
  letter-spacing: 0.01em;
  font-weight: 200;
  margin-top: 120px;
}

.more-group {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.more-group.cycle {
  align-items: center;
  justify-content: space-between;
  height: 100%;
  /* gap: 48vh; */
  z-index: 1;
}

.more-group.ct {
  align-items: center;
}

.section-inner.ctop .more-group {
  align-items: center;
}

.more-group.pos-top {
  /* margin-top: 160px; */
}

.more-group.cycle p, .more-group.ct p {
  text-align: center;
}

.more-view {
  display: flex;
  gap: 14px;
  color: #FFF;
  font-size: 16px;
  align-items: center;
}

.more-view span.shadow {
  color: #FFF;
  font-size: 16px;
  text-shadow: 0 1px 4px rgb(24 35 61 / 80%);
}

.more-view::after {
  display: inline-block;
  width: 64px;
  height: 8px;
  background: url('../images/ico-more-light.svg') 0 no-repeat;
  content: "";
}

.more-view.rt {
  align-self: flex-end;
}

.more-group.dark p, .more-group.dark .more-view {
  color: var(--dark-font);
}

.more-group.dark .more-view::after {
  background: url('../images/ico-more-dark.svg') 0 no-repeat;
}

.text-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-inner.rt .text-group p {
  text-align: right;
}

/*** Moon Animation ***/
section.no-padding {
  padding: 0;
}

.moon-mov-section {
  z-index: 1;
}
.moon-mov {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.moon-mov .bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 1s .5s ease-in-out;
}

.moon-mov.mov-play .bg-layer:first-child {
  opacity: 1;
}

.moon-mov.mov-play .bg-layer:nth-child(2) {
  animation: bgChange 1.2s ease-in-out 1s forwards;
}

.moon-mov.mov-play .bg-layer:nth-child(3) {
  animation: bgChange 1.2s ease-in-out 2s forwards;
}

.moon-mov.mov-play .bg-layer:nth-child(4) {
  animation: bgChange 1.2s ease-in-out 3s forwards;
}

.moon-mov.mov-play .bg-layer:first-child {
  opacity: 1;
}

/* fullPage 전용 */
.section.fp-completely .moon-mov .bg-layer:first-child {
  opacity: 1;
  background-image: url('../images/main/moon-mov-01.jpg');
}

.section.fp-completely .moon-mov .bg-layer:nth-child(2) {
  animation: bgChange 1s ease-in-out 1.5s forwards;
  background-image: url('../images/main/moon-mov-02.jpg');
}

.section.fp-completely .moon-mov .bg-layer:nth-child(3) {
  animation: bgChange 1s ease-in-out 2.5s forwards;
  background-image: url('../images/main/moon-mov-03.jpg');
}

.section.fp-completely  .moon-mov .bg-layer:nth-child(4) {
  animation: bgChange 1s ease-in-out 3.5s forwards;
  background-image: url('../images/main/moon-mov-04.jpg');
}

@keyframes bgChange {
  0%, 25% { opacity: 0; }
  90%, 100% { opacity: 1; }
}

/*** 유형 변형 ***/
.more-group.complex {
  display: flex;
  width: 100%;
  padding-top: 40vh;
  padding-bottom: 6vh;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
}

.more-group.self-padding {
  padding-left: 140px;
  padding-right: 140px;
}

/** Story Section **/
section.story-01_01 {
  background: url('../images/story/luna-bg-01.jpg') 50% 0 / cover;
}

section.story-01_02 {
  background: url('../images/story/luna-bg-02.jpg') 50% 0 / cover;
}

section.story-01_03 {
  background: url('../images/story/luna-bg-03.jpg') 50% 0 / cover;
}

section.story-02_01 {
  background: url('../images/story/value-bg-01.jpg') 0 0 / cover;
}

section.story-02_02 {
  background: url('../images/story/value-bg-02.jpg') 50% 0 / cover;
}

section.story-02_03 {
  background: url('../images/story/value-bg-03.jpg') 50% 0 / cover;
}

section.story-02_04 {
  background: url('../images/story/value-bg-04.jpg') 50% 0 / cover;
}

section.story-03_01 {
  background: url('../images/story/ingredient-bg-01.jpg') 50% 0 / cover;
}

section.story-04_01 {
  background: url('../images/story/promise-bg-01.jpg') 50% 0 / cover;
}

section.story-04_02 {
  background: url('../images/story/promise-bg-02.jpg') 50% 0 / cover;
}

section.story-04_03 {
  background: url('../images/story/promise-bg-03.jpg') 50% 0 / cover;
}

section.story-04_04 {
  background: url('../images/story/promise-bg-04.jpg') 50% 0 / cover;
}

.section-inner.bot {
  align-items: flex-end;
  padding-bottom: 80px;
}

.story-text-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}


.section-inner.rt .story-text-group p {
  text-align: right;
}

/*** Story Complex ***/
section.complex {
  padding: 0;
}

section.complex .section-inner {
  align-items: flex-start;
  justify-content: flex-start;
}

section.complex .story-text-group {
  top: 100px;
  left: 80px;
  z-index: 1;
}

section.complex .story-text-group p {
  color: var(--dark-font);
  /* text-align: center; */
  font-weight: 500;
}

.story-luna-17 {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
}

.story-luna-17::after {
  position: absolute;
  width: 100%;
  height: 60%;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
  content: "";
}

.luna-17-col {
  display: flex;
  flex-grow: 1;
  width: calc(100% / 3);
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 48px;
  padding-bottom: 62px;
}

.luna-17-col.luna-1 {
  background: url('../images/story/17-luna-01.jpg') 50% 0 / cover;
}

.luna-17-col.luna-9 {
  background: url('../images/story/17-luna-02.jpg') 50% 0 / cover;
}

.luna-17-col.luna-7 {
  background: url('../images/story/17-luna-03.jpg') 50% 0 / cover;
}

.luna-17-col h4, .luna-17-col p {
  color: var(--dark-font);
  text-align: center;
}

.luna-17-col h4 {
  font-size: 28px;
  font-weight: 600;
  
  margin-bottom: 0.5em;
}

.luna-17-col p {
  font-size: 17px;
  line-height: 1.4;
}

/***** Scroll Trigger *****/
/* .hor-wrapper {
  width: 150vw;
  top: 50%;
} */

.hor-wrapper {
  width: 100%;
  padding: 48px 0;
}

.view-el {
  opacity: 0;
  top: 12vh;
  transition: opacity 1.5s ease, top 1.5s -0.2s ease-out;
}

.view-el.inview {
  opacity: 1;
  top: 0;
}

.section.fp-completely .view-el {
  opacity: 1;
  top: 0;
}

 miracle.view-el {
  top: 24px;
}

.slogun-text {
  display: inline-block;
  /* width: 100%; */
  color: #858889;
  font-size: 126px;
  /* text-align: center; */
  padding-left: 138px;
  font-family: var(--neo);
  font-weight: 700;
  opacity: 0;
  transform: translateX(100vw);
  transition: opacity 1s ease, transform 2s -0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.section.fp-completely .slogun-text {
  opacity: 1;
  transform: translateX(0);
}

.slogun-text.active {
  opacity: 1;
}

.slogun-text:lang(ko) {
  font-family: inherit;
}

.slogun-text span {
  color: #cbcbcb;
  font-family: var(--neo);
}

.slogun-text.exper {
  font-family: var(--neo); 
}

.slogun-text.exper span {
  color: #CCCCCC;
  font-family: var(--neo);
  font-weight: 700;
}

section.slogun-bg-02 {
  background-color: #3F4D51;
}

.slogun-bg-02 .slogun-text {
  color: #648693;
}

section.slogun-bg-03 {
  background-color: #67767A
}

section.slogun-bg-03 .slogun-text {
  color: #FFF;
}

@media screen and (max-width: 1280px) {

  section {
    padding: 24px 62px;
  }

  .section-inner.ct {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .more-group.self-padding {
    padding-left: 62px;
    padding-right: 62px;
  }

  .slogun-text {
    font-size: 98px;
  }

  .size-xl, .size-xl:lang(ko) {
    font-size: 46px;
  }

}

/** 1024px Tablets portrait
  ========================================================================== */
@media screen and (max-width: 1024px) {
  .hor-wrapper {
    padding: 38px 0;
  }

  .slogun-text {
    font-size: 72px;
    padding-left: 0.8em;
  }

}

/** Tablet Apple iPad Pro 11 834px **/
@media screen and (max-width: 834px) {
  .slogun-text {
    font-size: 62px;
  }

}

/** Tablet 640px or Landscape **/
@media screen and (max-width: 640px) {

  /*** Mov ***/
  .hero-vdo {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .play-toggle {
    left: 10px;
    bottom: 16px;
    font-size: 12px;
    font-weight: 400;
  }

  section {
    padding: 24px 24px;
    height: 100svh;
  }

  .section-inner.ct {
    padding-top: 18vh;
    padding-bottom: 18vh;
  }

  .more-group.self-padding {
    padding-left: 24px;
    padding-right: 24px;
  }

  .hor-wrapper {
    padding: 32px 0;
  }

  .slogun-text {
    font-size: 38px;
    white-space: nowrap;
  }

  .moon-mov .bg-layer {
    background-size: contain;
  }

  /*** Font ***/
  .size-lg,
  .size-xl,
  .size-lg:lang(ko),
  .size-xl:lang(ko) {
    font-size: 25px;
    line-height: 1.6;
  }

  .size-md, .size-md:lang(ko) {
    font-size: 30px;
    line-height: 1.6;
  }

  .size-xs, .size-xs:lang(ko) {
    font-size: 13px;
  }

  p.miracle {
    font-size: 20px;
    margin-top: 60px;
  }

  .more-view {
    font-size: 14px;
  }


  .more-view::after, .more-group.dark .more-view::after {
    width: 42px;
    background-position-x: 100%;
  }

  /*** Story ***/
  .story-text-group {
    gap: 16px;
  }

  .scroll-hor section:first-child {
    height: 100svh;
  }

  .section-inner.bot {
    padding-bottom: 32px;
  }

  .section-inner p.size-xs br {
    display: none;
  }

  /*** Story Colplex ***/
  .scroll-hor section.complex {
    height: auto;
    min-height: 100vh;
  }

  section.complex .story-text-group {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    text-align: center;
    gap: 8px;
  }

  section.complex .story-text-group p {
    text-align: center;
  }

  .story-luna-17 {
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: auto;
  }

  .luna-17-col {
    width: 100%;
    padding: 20vh 24px 38px 24px;
  }

  .luna-17-col.luna-1 {
    padding-top: 200px;
  }

  .luna-17-col h4 {
    font-size: 21px;
  }

  .luna-17-col p {
    font-size: 13px;
  }

}

/** Mobile iPhone Pro 12 Max 428px **/