/* Body font Size */
@font-face {
    font-family: "Onemobile";
    src: url("ONEMobileOTFRegular.eot");
    src: url("../fonts/ONEMobileOTFRegular.eot?#iefix") format("embedded-opentype"), url("../fonts/ONEMobileOTFRegular.woff2") format("woff2"), url("../fonts/ONEMobileOTFRegular.woff") format("woff"), url("../fonts/ONEMobileOTFRegular.ttf") format("truetype");
    font-weight: 400;
  }
  @font-face {
    font-family: "Onemobile";
    src: url("../fonts/ONEMobileOTFLight.eot");
    src: url("../fonts/ONEMobileOTFLight.eot?#iefix") format("embedded-opentype"), url("../fonts/ONEMobileOTFLight.woff2") format("woff2"), url("../fonts/ONEMobileOTFLight.woff") format("woff"), url("../fonts/ONEMobileOTFLight.ttf") format("truetype");
    font-weight: 300;
  }
  @font-face {
    font-family: "Onemobile";
    src: url("../fonts/ONEMobileOTFBold.eot");
    src: url("../fonts/ONEMobileOTFBold.eot?#iefix") format("embedded-opentype"), url("../fonts/ONEMobileOTFBold.woff2") format("woff2"), url("../fonts/ONEMobileOTFBold.woff") format("woff"), url("../fonts/ONEMobileOTFBold.ttf") format("truetype");
    font-weight: 700;
  }
  html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
  }
  
  .pc_only {
    display: block;
  }
  
  .mo_only {
    display: none;
  }
  
  body {
    background: #000000;
    color: #ffffff;
  }
  
  .glo-contents {
    font-family: "Mont", "Onemobile", "NotoSans", sans-serif;
  }
  
  .moonbar {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
  }
  .moonbar__kv {
    position: relative;
    width: 100%;
    height: min(56.25vw, 810px);
    overflow: hidden;
  }
  .moonbar__kv__btn {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(6.8055555556vw, 98px);
    height: min(6.8055555556vw, 98px);
    background: url(/content/dam/glo-jp/korea-images/brand-pages/images/2024/creators/play_btn.svg) 50% 50%/contain no-repeat;
    text-indent: -9999px;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  .moonbar__kv__inner {
    display: block;
    width: 100%;
    height: 100%;
  }
  .moonbar__kv__inner video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .moonbar__intro {
    height: min(56.25vw, 810px);
    text-align: center;
    background: url(/content/dam/glo-jp/korea-images/brand-pages/images/2024/creators/moonbar_bg.webp) 50% 50%/cover no-repeat;
  }
  .moonbar__intro__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    color: #ffffff;
    gap: min(3.4722222222vw, 50px) 0;
  }
  .moonbar__intro h2 {
    font-size: min(4.0277777778vw, 58px);
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .moonbar__intro h2 .yourself {
    display: inline-block;
    width: min(15.2777777778vw, 220px);
    height: min(7.7777777778vw, 112px);
    background: url(/content/dam/glo-jp/korea-images/brand-pages/images/2024/creators/yourself.svg) 50% 50%/contain no-repeat;
    margin: 0 min(0.2777777778vw, 4px);
    text-indent: -9999px;
  }
  .moonbar__intro p {
    font-size: min(1.5972222222vw, 23px);
    line-height: 1.5;
    letter-spacing: -0.02em;
  }
  .moonbar__intro__logo {
    width: min(21.0416666667vw, 303px);
    height: min(7.6388888889vw, 110px);
    background: url(/content/dam/glo-jp/korea-images/brand-pages/images/2024/creators/gloxbanyan_logo.svg) 50% 50%/contain no-repeat;
    text-indent: -9999px;
  }
  .moonbar__posm {
    display: flex;
    height: min(48.6111111111vw, 700px);
  }
  .moonbar__posm .moonbar__row {
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden;
  }
  .moonbar__posm .moonbar__row img {
    width: 100%;
    height: auto;
  }
  .moonbar__posm .moonbar__row video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .moonbar__img {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  .moonbar__img button {
    display: block;
    position: absolute;
    top: 50%;
    left: min(4.1666666667vw, 60px);
    width: min(0.8333333333vw, 12px);
    height: min(3.4722222222vw, 50px);
    background: url(/content/dam/glo-jp/korea-images/brand-pages/images/2024/creators/prev_btn.svg) 50% 50%/contain no-repeat;
    text-indent: -9999px;
    transform: translateY(-50%);
    z-index: 5;
  }
  .moonbar__img button.moonbar__next {
    left: auto;
    right: min(4.1666666667vw, 60px);
    background-image: url(/content/dam/glo-jp/korea-images/brand-pages/images/2024/creators/next_btn.svg);
  }
  
  .creators__controlls {
    width: 100%;
    max-width: 1200px;
    text-align: center;
    margin: 100px auto;
  }
  
  .creators__controlls__lst {
    position: relative;
    display: flex;
    margin: 0 0 100px;
  }
  
  .creators__controlls__lst:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 180px;
    background: #fff;
    margin: -90px 0 0;
  }
  
  .creators__controlls__lst li {
    width: 50%;
  }
  
  .creators__controlls__lst li a:hover p {
    color: #999999;
  }
  
  .creators__controlls__lst li strong {
    display: block;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 30px;
  }
  
  .creators__controlls__lst li p {
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.02em;
    transition: color 0.2s;
  }
  
  .full_visual {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 999;
  }
  .full_visual .fl_inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: 76vw;
    max-height: 42.75vw;
    margin: auto;
  }
  .full_visual .full_cls {
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 2vw;
    height: 2vw;
    background: url(/content/dam/glo-jp/korea-images/brand-pages/images/2024/pro_prd/cls_ico.svg) 50% 50%/1.25vw auto no-repeat;
    text-indent: -9999px;
    z-index: 900;
  }
  .full_visual video {
    width: 100%;
    vertical-align: top;
  }
  
  @media screen and (max-width: 768px) {
    .pc_only {
      display: none;
    }
    .mo_only {
      display: block;
    }
    .moonbar__kv {
      height: 173.2558139535vw;
    }
    .moonbar__kv__btn {
      width: 23.2558139535vw;
      height: 23.2558139535vw;
    }
    .moonbar__intro {
      height: 173.2558139535vw;
      background-image: url(/content/dam/glo-jp/korea-images/brand-pages/images/2024/creators/moonbar_bg_m.webp);
    }
    .moonbar__intro h2 {
      font-size: 8.8372093023vw;
      line-height: 1;
    }
    .moonbar__intro h2 .yourself {
      width: 23.2558139535vw;
      height: 13.023255814vw;
      margin: 0 0.9302325581vw;
    }
    .moonbar__intro p {
      font-size: 3.7209302326vw;
      line-height: 1.5;
      margin: 11.6279069767vw 0;
    }
    .moonbar__intro__logo {
      width: 48.8372093023vw;
      height: 17.6744186047vw;
    }
    .moonbar__posm {
      flex-wrap: wrap;
      height: auto;
    }
    .moonbar__posm .moonbar__row {
      width: 100%;
      height: auto;
    }
    .moonbar__posm .moonbar__row img,
    .moonbar__posm .moonbar__row video {
      width: 100%;
      height:100%;
    }
    .moonbar__img {
      margin: 5.5813953488vw 0;
    }
    .moonbar__img .swiper-slide {
      width: 88.3720930233vw;
    }
    .moonbar__img .swiper-slide img {
      width: 100%;
      height: auto;
    }
    .moonbar__img button {
      display: none;
    }
    .creators__controlls {
      margin: 10.6666666667vw auto;
    }
    .creators__controlls__lst {
      flex-wrap: wrap;
      margin: 0 0 10.6666666667vw;
    }
    .creators__controlls__lst:before {
      left: 50%;
      width: 60%;
      height: 1px;
      margin: 0;
      transform: translate(-50%, -50%);
    }
    .creators__controlls__lst li {
      width: 100%;
    }
    .creators__controlls__lst li:first-child {
      margin: 0 0 16vw;
    }
    .creators__controlls__lst li strong {
      font-size: 7.2vw;
      margin: 0 0 5.3333333333vw;
    }
    .creators__controlls__lst li p {
      font-size: 4.16vw;
    }
    .full_visual .fl_inner {
      max-width: 100%;
      max-height: 100%;
    }
    .full_visual .fl_inner .fl_visual {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      transform: translateY(-50%);
    }
    .full_visual .fl_inner .full_cls {
      width: 9.3023255814vw;
      height: 9.3023255814vw;
      background-size: 4.1860465116vw auto;
    }
  }