@charset "utf-8";

#main {}



/* sect1 */
.sect1 { height: 300vh; overflow: hidden;}
.sect1 .visual {width: 100%; height: 100vh; position: relative;}
.sect1 .visual .tit-box {position: absolute; left: 0; width: 100%; text-align: center;}
.sect1 .visual .tit-top {top: 50%; transform: translateY(-100%);}
.sect1 .visual .tit-btm {bottom: 50%; transform: translateY(100%);}
#main .sect1 .visual .title {font-size: 312rem;  }
.sect1 .visual .vod-wrap {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100vh; /*pointer-events: none;*/}
.sect1 .visual .vod-wrap .vod-box {width: 100%; height: 100%; transform: scale(0.1) rotate(-5deg); position: relative; overflow: hidden; opacity: 0; pointer-events: none; }
.sect1 .visual .vod-wrap .vod-box iframe {width: 100%; height: 150%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } 

.sect1 .visual .cont-wrap {position: relative; width: 100%; height: 100%; }
.sect1 .visual .cont-wrap .text-box {font-family: var(--jakarta); font-weight: 700; font-size: max(52rem, 14px); line-height: 1.3; text-align: center; position: absolute; left: 0; width: 100%; top: 50%; transform: translateY(0%); color: #fff; opacity: 0; mix-blend-mode: difference;}

@media screen and (max-width:768px) {
  #main .sect1 .visual .title {font-size: 350rem;}

  .sect1 {height: unset; min-height: 100vh; min-height: 100svh;}
  .sect1 .visual .vod-wrap {width: 90%; height: 56.25vw;}
  .sect1 .visual .vod-wrap .vod-box {}
}



/* sect2 */
.sect2 {}
.sect2 .inner {padding: 170rem 2.8% 210rem; }
.sect2 .head {}
.sect2 .head .text {margin-top: 48rem; }
.sect2 .head .text p {font-weight: 600; font-size: 51rem; line-height: 1.3;}
.sect2 .head .text p .icon.ty1 {width: 78rem; animation: iconAni3 1.4s linear infinite ;}
.sect2 .head .text p .icon.ty2 {width: 76rem; animation: iconAni1 1.6s linear infinite;}
.sect2 .head .text p .icon {font-size: 0; display: inline-block; vertical-align: text-bottom;}
.sect2 .head .text p .icon img {width: 100%;}
.sect2 .cont {display: flex; gap: 48rem; align-items: end;}
.sect2 .cont > div {width: 50%; text-align: right;}
.sect2 .cont .text-box p {font-weight: 500; font-size: 24rem; line-height: 1.3; }
.sect2 .cont .text-box p + p {margin-top: 0.5em; }
.sect2 .cont .img-box {border-radius: 8rem; overflow: hidden; font-size: 0;}
.sect2 .cont .img-box img {width: 100%;}

@keyframes iconAni1 {
  0% {transform: rotate(0deg);}
  10% {transform: rotate(15deg);}
  20% {transform: rotate(0deg);}
  30% {transform: rotate(15deg);}
  40% {transform: rotate(0deg);}
  100% {transform: rotate(0deg);}
}

@keyframes iconAni2 {
  0% {transform: scale(1);}
  40% {transform: scale(1.2);}
  100% {transform: scale(1.2);}
}

@keyframes iconAni3 {
  0% {transform: translateY(0%);}
  20% {transform: translateY(-30%);}
  40% {transform: translateY(0%);}
  55% {transform: translateY(-20%);}
  70% {transform: translateY(0%);}
  100% {transform: translateY(0%);}
}

@media screen and (max-width:768px) {
  .sect2 .inner {padding: 250rem 2.8%;}
  .sect2 .cont {flex-direction: column; margin-top: 80px;}
  .sect2 .cont > div {width: 80%;}
  .sect2 .cont .text-box p {font-size: 16px;}
  .sect2 .head .text p {font-size: 24px;}
  .sect2 .head .text p .icon.ty1 {width: 40px;}
  .sect2 .head .text p .icon.ty2 {width: 35px;}
}
@media screen and (max-width:480px) {
  .sect2 .cont {margin-top: 60px;}
  .sect2 .cont > div {width: 100%;}
  .sect2 .head .text p {font-size: 20px;}
  .sect2 .cont .text-box p {font-size: 14px;}
  .sect2 .head .text p .icon.ty1 {width: 34px;}
  .sect2 .head .text p .icon.ty2 {width: 30px;}
}


/* sect3 */
.sect3 {background: #FFD905; position: relative; padding-bottom: 130rem;}
.sect3 .title {text-align: center; }
.sect3 .back-tit {position: sticky; left: 0; top: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 230rem 0;}
.sect3 .pofol-wrap {}
.sect3 .pofol-box {}
.sect3 .pofol-box .item {width: 393rem;}
.sect3 .pofol-box .item a {width: 100%; padding-top: 132.82%; border-radius: 8rem; overflow: hidden; position: relative; font-size: 0; display: block;}
.sect3 .pofol-box .item .img-box {width: 100%; position: absolute; left: 0; top: 0;}
.sect3 .pofol-box .item .img-box img {width: 100%; height: 100%; object-fit: cover; }
.sect3 .pofol-box .item .text-box {width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 32rem; font-weight: 700; color: #fff; background: rgba(0,0,0,0.26); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.3s; z-index: 1; text-align: center; padding: 0.7em;}

.sect3 .btn-box {height: 100vh; width: 100%; position: relative; z-index: 10; display: flex; align-items: end;}
.sect3 .btn-box .area {width: 342rem; height: 342rem; position: absolute; left: 50%; bottom: 0; transform: translate(-50%,15%); margin: 0 auto;}
.sect3 .btn-box a {display: flex; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 228rem; height: 228rem; border-radius: 50%; border: 1px solid #111; align-items: center; justify-content: center; font-family: var(--barlow); font-weight: 500; font-size: 23rem; line-height: 0.9; text-align: center; }
.sect3 .btn-box a .hover {width: 100%; height: 100%; background: #000; position: absolute; left: 0; top: 0; border-radius: 50%; clip-path: circle(0% at 50% 50%); transition: clip-path 0.3s; display: flex; align-items: center; justify-content: center;}
.sect3 .btn-box a.leave {transition: transform 0.3s;}

.sect3 .cursor {position: fixed; left: 0; top: 0; background: rgba(255,255,255,0.47); font-size: 18rem; line-height: 1.2; text-align: center; display: flex; align-items: center; justify-content: center; width: 132rem; height: 132rem; font-weight: 500; border-radius: 50%; z-index: 50; transform: translate(-50%,-50%); pointer-events: none; clip-path: circle(0% at 50% 50%); transition: clip-path 0.3s, opacity 0.3s; font-family: var(--barlow); color: #666; opacity: 0;}
.sect3 .cursor.active {clip-path: circle(50% at 50% 50%); opacity: 1;}

.sect3 .pofol-box:nth-child(1) .item {margin: 0 320rem 0 auto;}
.sect3 .pofol-box:nth-child(2) .item {margin: -150rem auto 0 278rem;}
.sect3 .pofol-box:nth-child(3) .item {margin: 160rem auto 0 832rem;}
.sect3 .pofol-box:nth-child(4) .item {margin: 130rem auto 0 320rem;}
.sect3 .pofol-box:nth-child(5) .item {margin: -150rem 278rem 0 auto;}
.sect3 .pofol-box:nth-child(6) .item {margin: 160rem 832rem 0 auto;}
.sect3 .pofol-box:nth-child(7) .item {margin: 130rem 320rem 0 auto;}
.sect3 .pofol-box:nth-child(8) .item {margin: -150rem auto 0 278rem;}


.sect3 .pofol-box .item:hover .text-box {opacity: 1;}
.sect3 .btn-box a:hover .hover {clip-path: circle(50% at 50% 50%); }

@media screen and (max-width:768px) {
  .sect3 .pofol-box .item {width: 35%;}
  .sect3 .pofol-box .item a {border-radius: 6px;}
  .sect3 .pofol-box .item .text-box {opacity: 1; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6)); align-items: end; justify-content: end; height: 50%; font-size: max(48rem, 12px); padding: 1em; backdrop-filter: none; text-align: right;}
  .sect3 .pofol-box:nth-child(2n - 1) .item {margin: 15% 10% 20% auto;}
  .sect3 .pofol-box:nth-child(2n) .item {margin: 15% auto 15% 10%;}

  .sect3 .btn-box {}
  .sect3 .btn-box .area {width: 500rem; height: 500rem; transform: translate(-50%, 0%); bottom: 25%;}
  .sect3 .btn-box a {width: 350rem; height: 350rem; font-size: 42rem;}
}


/* sect4 */
#main .sect4 {}
#main .sect4 .title {font-weight: 700;}
#main .sect4 .inner {padding: 190rem 2.8% 50rem; display: flex; align-items: stretch;}
#main .sect4 .left {width: 50%; position: relative;}
#main .sect4 .left .fixed-box {position: sticky; left: 0; top: 100rem; height: calc(100vh - 100rem);}

#main .sect4 .left .container {position: relative; width: 100%; height: calc(100% - 455rem);}
#main .sect4 .left #matter {width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); overflow: hidden;}
#main .sect4 .left #matter .item {width: 280rem; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 27rem;  height: 85rem; border-radius: 42.5rem; position: absolute; top: -100px;}
#main .sect4 .left #matter .item:nth-child(1) {background: rgba(255,123,202,0.5);}
#main .sect4 .left #matter .item:nth-child(2) {background: rgba(0,240,255,0.5);}
#main .sect4 .left #matter .item:nth-child(3) {background: rgba(147,255,126,0.5);}
#main .sect4 .left #matter .item:nth-child(4) {background: rgba(85,70,255,0.5);}
#main .sect4 .left #matter .item:nth-child(5) {background: rgba(255,179,171,0.5);}
#main .sect4 .left #matter .item:nth-child(6) {background: rgba(214,164,255,0.5);}

#main .sect4 .left #helper {position: absolute; width: 100%; height: 100%; pointer-events: none; opacity: 0; visibility: hidden; z-index: -1; left: 50%; top: 50%; transform: translate(-50%, -50%);}

#main .sect4 .right { padding-left: 3.9vw;  }
#main .sect4 .right .text-wrap {display: block;}
#main .sect4 .right .text {  text-align: center; width: 33vw; margin-bottom: 120rem;  height: unset;}
#main .sect4 .right .text .text-box {width: fit-content; margin: auto; position: relative; cursor: default; }
#main .sect4 .right .text p { font-size: 87rem; font-weight: 700; font-family: var(--barlow); color: #999; text-transform: uppercase; line-height: 1; letter-spacing: -0.02em; transition: color 0.3s;} 
#main .sect4 .right .text span {font-size: 26rem; font-weight: 700; letter-spacing: -0.025em; display: flex; position: absolute; right: -10%; top: 40%; transform: translateY(-50%) rotate(-20deg); height: 82rem; width: 270rem; justify-content: center; align-items: center; border-radius: 41rem; clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); transition: clip-path 0.3s;}

#main .sect4 .right .text:nth-child(1) span {background-color: #FF7BCA;}
#main .sect4 .right .text:nth-child(2) span {background-color: #00F0FF;}
#main .sect4 .right .text:nth-child(3) span {background-color: #93FF7E;}
#main .sect4 .right .text:nth-child(4) span {background-color: #5546FF; color: #fff; }
#main .sect4 .right .text:nth-child(5) span {background-color: #FFB3AB;}
#main .sect4 .right .text:nth-child(6) span {background-color: #D6A4FF; transform: translate(80%,-50%) rotate(-20deg);}

@media screen and (min-width:769px){
  @media (hover:hover){
    #main .sect4 .right .text .text-box:hover p {color: #111; }
    #main .sect4 .right .text .text-box:hover span {clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);}
  }
}


@media screen and (max-width:1024px) {
  #main .sect4 .left .fixed-box {height: unset;}
  #main .sect4 .left .container {height: 35vh;}
}

@media screen and (max-width:768px) {
  #main .sect4 .inner {flex-direction: column; padding: 190rem 2.8%;}
  #main .sect4 .left {width: 100%;}
  #main .sect4 .left .container {height: 35vw;}
  #main .sect4 .left .fixed-box {display: flex; gap: 80rem; height: auto; justify-content: space-between;}
  #main .sect4 .left .fixed-box .head {flex-shrink: 0; }
  #main .sect4 .left .fixed-box .container {width: 100%; flex-shrink: 1; max-width: 360px; margin: auto; }

  #main .sect4 .right {padding: 5vh 0;}
  #main .sect4 .right .text-wrap {display: flex; flex-wrap: wrap; }
  #main .sect4 .right .text { width: 50%;}
  #main .sect4 .right .text p {font-size: 120rem; }
  #main .sect4 .right .text span {font-size: 46rem; width: auto; padding: 0 45rem; height: 110rem; border-radius: 55rem; white-space: nowrap;}

  #main .sect4 .right .text.active .text-box p {color: #111; }
  #main .sect4 .right .text.active span {clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);}
}
@media screen and (max-width:480px){
  #main .sect4 .left .fixed-box {flex-direction: column;}
  #main .sect4 .left .container {height: 25vh;}

  #main .sect4 .left #matter .item {width: 120px; height: 32px; border-radius: 20px; font-size: 12px;}
}



/* sect5 */
#main .sect5 {overflow: hidden; width: 100%; padding: 90rem 0; }
#main .sect5 .logo-slide { clear: both;}
#main .sect5 .logo-btm {margin-top: 0.9375vw; }
#main .sect5 .logo-slide .js-marquee {margin-right: 0 !important;}
#main .sect5 .logo-slide .swiper-wrapper {-webkit-transition-timing-function:linear!important; transition-timing-function:linear!important;}
#main .sect5 .line {text-align: center; font-size: 0;}
#main .sect5 .line .item {display: inline-block; width: 14.48vw; margin-right: 0.9375vw;}
#main .sect5 .line .item a {width: 100%; padding-top: 60%; position: relative; border-radius: 8.75vw; border: 1px solid #6B6B6B; display: block;}
#main .sect5 .line .item a img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: 80%; height: 70%; object-fit: cover;}

@media screen and (max-width:768px) {
  #main .sect5 .line .item {width: 20vw; margin-right: 2vw; }
  #main .sect5 .logo-btm {margin-top: 2vw;}
}
@media screen and (max-width:480px) {
  #main .sect5 .line .item {width: 25vw;}
}


/* sect6 */
#main .sect6 {height: 300vh;}
#main .sect6 .fixed-box {width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center;}
#main .sect6 .inner {position: relative; font-size: 0; padding: 0 2.8%;}
#main .sect6 .text {text-align: center; font-size: 0;}
#main .sect6 .text img {width: 100%;}
#main .sect6 .text .mo {display: none;}

#main .sect6 .inner .sticker {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 0; width: 19.8vw; height: 19.8vw; border-radius: 50%; overflow: hidden; opacity: 0; transform: scale(1.5);}
#main .sect6 .inner .sticker a {display: block; width: 100%; height: 100%;}
#main .sect6 .sticker .sticker-img {position: absolute; left: 0; bottom: 0; width: 19.8vw; height: 19.8vw; transform: rotate(40deg);}
#main .sect6 .sticker .sticker-img .visible {position: absolute; left: 0; bottom: 0; width: 19.8vw; height: 10.8vw; overflow: hidden;}
#main .sect6 .sticker .sticker-img .visible .cont-wrap {position: absolute; left: 0; bottom: 0; width: 19.8vw; height: 19.8vw; transform: rotate(-33deg);}
#main .sect6 .sticker .sticker-img .visible .cont-wrap img {width: 100%; width: 100%;}
#main .sect6 .sticker .sticker-front {position: absolute; left: 0; bottom: 0; width: 19.8vw; height: 19.8vw; transform: rotate(40deg);} 
#main .sect6 .sticker .sticker-front .shadow {position: absolute; left: 0; bottom: 1.8vw; width: 19.8vw; height: 19.8vw; border-radius: 50%; box-shadow: -2px 3px 12px rgba(0,0,0,0.18);}
#main .sect6 .sticker .sticker-front .visible {position: absolute; left: 0; top: 9vw; width: 19.8vw; height: 9vw; overflow: hidden; }
#main .sect6 .sticker .sticker-front .visible .paper {position: absolute; width: 19.8vw; height: 19.8vw; left: 0; bottom: 0; border-radius: 50%; background: #FACA4B; }

@media screen and (max-width:768px) {
  #main .sect6 .inner {padding: 0 10%;}
  #main .sect6 .text .pc {display: none;}
  #main .sect6 .text .mo {display: inline-block; max-width: 100%; max-height: 80vh;}

  #main .sect6 .inner .sticker, 
  #main .sect6 .sticker .sticker-img,
  #main .sect6 .sticker .sticker-img .visible .cont-wrap,
  #main .sect6 .sticker .sticker-front,
  #main .sect6 .sticker .sticker-front .shadow,
  #main .sect6 .sticker .sticker-front .visible .paper {width: 50vw; height: 50vw;}

  #main .sect6 .sticker .sticker-img .visible {width: 50vw; height: 25vw; }
  #main .sect6 .sticker .sticker-front .shadow {bottom: 4vw; }
  #main .sect6 .sticker .sticker-front .visible {width: 50vw; height: 25vw; top: 25vw;}
}