
aside {opacity: 0; visibility: hidden;}
.first_bg { background: linear-gradient(-45deg, #5358bd 0%, #c9c88d 20%); position: absolute; left: 0; top: 0; width: 100%; height: 100vh; z-index: -2;}

header {opacity: 0; visibility: hidden;}

#cursor {
    z-index: 100;
    font-size: 18px;
    letter-spacing: -0.025em;
    font-family: 'Geologica';
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 0px;
    height: 0px;
    color: #fff;
    background: #52ff93;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

@media screen and (max-width: 820px) {
    #cursor {
        display: none;
    }
}

.main { position: relative; overflow: hidden; width: 100%;}

.main #particleCanvas { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 190vh; 
    background: linear-gradient(-45deg, #5358bd var(--pos1), #ccc0fb var(--pos2)),
                linear-gradient(45deg, #5a2daf var(--pos3), #090030 var(--pos4));
    --pos1: 0%; 
    --pos2: 50%;
    --pos3: 0%;
    --pos4: 50%;
    z-index: -1; 
    overflow: hidden;
    background-blend-mode: overlay;
}
.main #particleCanvas._2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(-130deg, #55b4a9 var(--pos1-2), #fccdc4 var(--pos2-2)); z-index: -1; overflow: hidden; --pos1-2: 0%; --pos2-2: 50%;}
.main #particleCanvas._3 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(-130deg, #55b4a9 var(--pos1-3), #fccdc4 var(--pos2-3)); z-index: -1; overflow: hidden; --pos1-3: 0%; --pos2-3: 50%;}
.main #particleCanvas canvas { width: 100%; height: 100%; }

/* .main .particle { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; transition: transform 0.1s ease-out; z-index: 1; } */
/* .main .fog { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform, opacity; transition: transform 0.1s ease-out; background: rgba(255, 255, 255, 1); z-index: 0; } */


.main .s1 {position: relative; overflow: hidden;}
.main .s1 .curtain {position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; background: #090030; opacity: 0;}
.main .s1 .contWrap {height: 100vh; display: flex; flex-direction: column; }
.main .s1 .contWrap .topMarquee {width: 100%; z-index: 10; font-size: 20px; padding: calc(10/20*1em) 0;}
.main .s1 .contWrap .topMarquee .marquee {width: 100%; position: relative; display: flex; align-items: center; font-weight: 500; letter-spacing: -0.025em; font-family: 'Obviously'; color: #000; overflow: hidden; white-space: nowrap;}
.main .s1 .contWrap .topMarquee .marquee .absol { width: 100%; display: flex; align-items: center;}
.main .s1 .contWrap .topMarquee .marquee .absol .mar_ch {display: flex; align-items: center; padding-right: calc(100/20*1em);}
.main .s1 .contWrap .topMarquee .marquee .absol .mar_ch span {display: block; margin: calc(10/20*1em) 0;}
.main .s1 .contWrap .topMarquee .marquee .absol .mar_ch span:first-child {margin-right: calc(280/20*1em);}

.main .s1 .contWrap .s1_txt {display: flex; flex-grow: 1; flex-direction: column; position: relative;}
.main .s1 .contWrap .s1_txt::before {content: ''; width: 100%; height: 10px; position: absolute; left: 0; top: 100%; background: #090030; transform: translateY(-50%);}
.main .s1 .contWrap .s1_txt .topWrap { background: #090030; position: relative;}
.main .s1 .contWrap .s1_txt .topWrap::before {content: ''; width: 100%; height: 10px; position: absolute; left: 0; top: 100%; background: #090030; transform: translateY(-50%);}
.main .s1 .contWrap .s1_txt .topWrap .topIcon {display: flex; justify-content: flex-end; align-items: center; gap: calc(20/20*1em); color: #fff; font-size: 20px; padding: calc(10/20*1em) calc(20/20*1em);}
.main .s1 .contWrap .s1_txt .topWrap .title {opacity: 0; transform: translateX(-60px); font-size: clamp(16px, 20/1920*100vw, 20px); color: #fff; font-weight: 500; letter-spacing: -0.025em; line-height: calc(30/20*1em); font-family: 'Obviously'; padding: calc(10/20*1em) calc(50/1920*100vw);}
.main .s1 .contWrap .s1_txt .cont {padding: 0 calc(40/200*1em); font-size: calc(200/1920*100vw); position: relative; z-index: 1; flex-grow: 1; background: #090030; mix-blend-mode: darken; color: #fff;}
.main .s1 .contWrap .s1_txt .cont > p {opacity: 0; font-size: inherit; padding-top: calc(200/200*1em); font-weight: 600; color: #fff; line-height: calc(230/200*1em); font-family: 'Obviously';}
.main .s1 .contWrap .s1_txt .cont > p span{position: relative; display: inline-block;}




.main .s1 .contWrap .s1_txt .cont > p small {font-size: calc(100/200*1em); font-weight: 100; font-family: 'Obviously'; letter-spacing: -0.025em;}

/* 복사본 */
.main .s1 .contWrap .s1_txt .cont.copy {position: absolute; left: 0; width: 100%; height: 100%; mix-blend-mode: unset; background: transparent; pointer-events: none; 

display: flex; align-items: flex-end;
}
.main .s1 .contWrap .s1_txt .cont.copy > p {color: transparent;}
.main .s1 .contWrap .s1_txt .cont.copy > p span {color: #fff; opacity: 0.5;}





.main .s1 .contWrap .marquee._2 {width: 100%; font-size: 30px; position: relative; display: flex; align-items: center; letter-spacing: -0.025em; font-family: 'Obviously'; color: #fff; overflow: hidden; white-space: nowrap; background-color: #000; padding: calc(15/30*1em) 0; border-top: 1px solid #fff;}
.main .s1 .contWrap .marquee._2 .absol { width: 100%; display: flex; align-items: center;}
.main .s1 .contWrap .marquee._2 .absol .mar_ch {display: flex; align-items: center;}
.main .s1 .contWrap .marquee._2 .absol .mar_ch span {display: block; margin-right: calc(80/30*1em);}

.main .s1 .dday { position: absolute; right: calc(140/64*1em); top: 0; text-align: right; font-size: calc(64/1920*100vw); font-weight: 100; font-family: 'Obviously'; padding-top: calc(15/64*1em);}
.main .s1 .dday .txt {position: absolute; bottom: 100%; left: 0; width: 100%; font-size: 20px; font-family: 'Obviously'; font-weight: 500; letter-spacing: -0.025em; line-height: calc(30/20*1em); color: rgba(0, 0, 0, 0);}
.main .s1 .dday span {display: block;}
.main .s1 .dday .num {font-size: calc(120/64*1em); font-weight: 600; padding-top: calc(10/120*1em);}

.main .s1.cloned {position: absolute; left: 0; top: 0; width: 100%; overflow: hidden;}
.main .s1.cloned .contWrap .topMarquee {opacity: 0; visibility: hidden;}
.main .s1.cloned .contWrap .s1_txt .topWrap {opacity: 0; visibility: hidden;}
.main .s1.cloned .contWrap .s1_txt .cont {mix-blend-mode: normal; background: transparent;}
.main .s1.cloned .contWrap .s1_txt .cont > p { opacity: 0; visibility: hidden;}
.main .s1.cloned .contWrap .s1_txt::before {display: none;}
.main .s1.cloned .contWrap .marquee._2 {opacity: 0; visibility: hidden;}

.main .s1.cloned .dday {opacity: 0; }

@media screen and (max-width: 1600px) {
    .main .s1 .contWrap .topMarquee {padding: calc(6/20*1em);}
    .main .s1 .contWrap .marquee._2 {font-size: 27px;}
}
@media screen and (max-width: 1440px) {
    .main .s1 .contWrap .topMarquee {font-size: 18px;}
    .main .s1 .contWrap .marquee._2 {font-size: 24px;}
}
@media screen and (max-width: 1280px) {
    .main .s1 .contWrap .s1_txt .topWrap .topIcon {font-size: 18px;}
}
@media screen and (max-width: 1024px) {
    .main .s1 .contWrap .s1_txt .topWrap .topIcon {font-size: 16px;}
    .main .s1 .contWrap .topMarquee {font-size: 16px;}
    .main .s1 .contWrap .s1_txt .topWrap .title {font-size: clamp(14px, 16/1024*100vw, 16px);}
    .main .s1 .contWrap .marquee._2 {font-size: 20px;}
}
@media screen and (max-width: 820px) {
    .header {opacity: 1; visibility: visible;}
    .main .s1 .contWrap .topMarquee {display: none;}
    .main .s1 .contWrap {justify-content: flex-end;}
    .main .s1 .contWrap .s1_txt {flex-grow: 0; position: static;}
    .main .s1 .contWrap .s1_txt::before {display: none;}
    .main .s1 .contWrap .s1_txt .topWrap {background: transparent;}
    .main .s1 .contWrap .s1_txt .topWrap::before {display: none;}
    .main .s1 .contWrap .s1_txt .topWrap .topIcon { display: none;}
    .main .s1 .contWrap .s1_txt .topWrap .title {font-size: clamp(16px, 20/820*100vw, 20px); color: #000;}
    .main .s1 .contWrap .s1_txt .cont {position: static; padding: 0 calc(40/200*1em) calc(80/200*1em); mix-blend-mode: normal; background: transparent;}
    .main .s1 .contWrap .s1_txt .cont > p {color: #000;}
    .main .s1 .dday {color: #000; font-size: clamp(40px, 64/820*100vw, 64px); right: 5%; top: 10%;}


    .main .s1 .contWrap .s1_txt .cont.copy{display: none;}
}


.main .s2 {position: relative; z-index: 1000; height: 90vh; display: flex; align-items: flex-end; padding-bottom: 50px; box-sizing: border-box;}
.main .s2 .swiper {width: 100%; cursor: grab; overflow: visible; transform: translateY(250%);}
.main .s2 .swiper .swiper-wrapper {transition-timing-function: linear; transition-delay: 0;}
.main .s2 .swiper .swiper-slide {width: auto; }
.main .s2 .swiper .swiper-slide.motionSlide {transform: translateY(-160vh);}
.main .s2 .swiper .swiper-slide.motionSlide img {transform:  rotate(20deg);}
.main .s2 .swiper .swiper-slide img {pointer-events: none; border-radius: 13px;}

@media screen and (max-width: 1280px) {
    .main .s2 .swiper .swiper-slide.motionSlide {transform: translateY(-180vh);}
}
@media screen and (max-width: 1024px) {
    .main .s2 .swiper .swiper-slide.motionSlide {transform: translateY(-200vh);}
}
@media screen and (max-width: 820px) {
    .main .s2 {height: auto; padding-top: 30px; padding-bottom: 30px;}
    .main .s2 .swiper {transform: translateY(0);}
    .main .s2 .swiper .swiper-slide {width: 40vw;}
}


.main .s3 {position: relative;}
.main .s3 .cont {position: relative;}
.main .s3 .cont .topWrap {position: relative;}
.main .s3 .cont .top {position: relative; padding: 165px 60px 0px; box-sizing: border-box; background: #fff;}


.main .s3 .cont .top .txt { display: flex; flex-direction: column; position: relative; }
.main .s3 .cont .top .txt div.aside {position: absolute; right: 0; top: 0; bottom: auto;}
.main .s3 .cont .top .txt div.aside::before {content: ''; width: 99%; height: 99%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; background: linear-gradient(-90deg, #292059 0%, #f4aacf 80%);}
.main .s3 .cont .top .txt div.aside a {background: #fff; z-index: 1; display: block; border-radius: 0; mix-blend-mode: lighten;}
.main .s3 .cont .top .txt div.aside .cir {background: #000;}


.main .s3 .cont .top .txt .copytext { align-self: flex-start; }
.main .s3 .cont .top .txt .copytext .startDate { display: inline-block; font-size: 32px; letter-spacing: -0.025em; font-weight: bold; background: linear-gradient(-90deg, #292059 0%, #f4aacf 80%); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: calc(20/32*1em); padding-left: calc(5/32*1em); }
.main .s3 .cont .top .txt .copytext p { font-size: 110px; font-weight: 300; letter-spacing: -0.025em; color: #000; line-height: 1.3; }
.main .s3 .cont .top .txt .copytext p br {display: none;}
.main .s3 .cont .top .txt .copytext p b { font-weight: bold; }

.main .s3 .cont .top.cloned {mix-blend-mode: normal; z-index: 1; position: absolute; left: 0; top: 0; width: 100%; background: transparent; opacity: 1;}
.main .s3 .cont .top.cloned .txt .aside {opacity: 0;}
.main .s3 .cont .top.cloned .txt .copytext .textOverWrap .startDate {opacity: 0;}
.main .s3 .cont .top.cloned .copytext p {opacity: 1;}
.main .s3 .cont .top.cloned .startArr .textOverWrap {opacity: 0;}

.main .s3 .cont .top .startArr { display: flex; flex-direction: column; align-items: flex-end; }
.main .s3 .cont .top .startArr span { font-size: 133px; font-family: 'Geologica'; letter-spacing: -0.025em; background: linear-gradient(-90deg, #292059 0%, #f4aacf 80%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 500; }
.main .s3 .cont .top .startArr .arr { position: relative; overflow: hidden; padding-top: 20px; padding-right: 20px; margin-top: 60px; transform-origin: right top; }
.main .s3 .cont .top .startArr .arr div:nth-child(1) { width: 105px; height: 105px; border-left: 5px solid #000; border-bottom: 5px solid #000; }
.main .s3 .cont .top .startArr .arr div:nth-child(2) { width: 180px; height: 4px; background: #000; position: absolute; left: 0; bottom: 0; transform-origin: left center; transform: translateY(50%) rotate(-45deg); -webkit-transform: translateY(50%) rotate(-45deg); -moz-transform: translateY(50%) rotate(-45deg); -ms-transform: translateY(50%) rotate(-45deg); -o-transform: translateY(50%) rotate(-45deg); }

.main .s3 .cont .bottom {padding: 0px 60px 0px;}
.main .s3 .cont .bottom .small { font-size: 18px; letter-spacing: -0.025em; color: #000; padding: calc(20/18*1em) 0; box-sizing: border-box; display: block; }
.main .s3 .cont .bottom .small .br500 { display: none; }
.main .s3 .cont .bottom .small b { font-weight: bold; color: #feacd8; }
.main .s3 .cont .bottom .poster { display: flex; justify-content: space-between; }
.main .s3 .cont .bottom .poster .mov { width: calc(1280/1800*100%); position: relative; overflow: hidden; border-radius: 18px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; }
.main .s3 .cont .bottom .poster .mov::after { content: ''; display: block; padding-top: 54.68%; }
.main .s3 .cont .bottom .poster .mov iframe { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 105%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); }
.main .s3 .cont .bottom .poster .pos { width: calc(495/1800*100%); position: relative; overflow: hidden; border-radius: 18px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; }
.main .s3 .cont .bottom .poster .pos::after { content: ''; display: block; padding-top: 141%; }
.main .s3 .cont .bottom .poster .pos img { width: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); }

.main .s3 .supports .marquee { width: 100%; height: 70px; overflow: hidden; position: relative; padding-top: 90px; padding-bottom: 120px; }
.main .s3 .supports .marquee .absol { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; }
.main .s3 .supports .marquee .absol .mar_ch { flex-shrink: 0; display: flex; align-items: center; height: 100%; }
.main .s3 .supports .marquee .absol .mar_ch .logo_suprt { margin-right: 90px; }
.main .s3 .supports .marquee .absol .mar_ch .logo_suprt img { height: 50px; }

@media screen and (max-width: 1280px) {
    .main .s3 .cont { padding: 165px 40px 0; }
    .main .s3 .cont .top .txt .copytext .startDate { font-size: 28px; }
    .main .s3 .cont .top .txt .copytext p { font-size: 85px; }
    .main .s3 .cont .top .startArr span { font-size: 85px; }
    .main .s3 .cont .top .startArr .arr { margin-top: 40px; }
    .main .s3 .cont .top .startArr .arr div:nth-child(1) { width: 90px; height: 90px; }
    .main .s3 .supports .marquee { padding-top: 60px; padding-bottom: 60px; }
}

@media screen and (max-width: 1024px) {
    .main .s3 .cont { padding: 110px 20px 0; }
    .main .s3 .cont .top .startArr .arr div:nth-child(1) { width: 80px; height: 80px; }
    .main .s3 .cont .top .startArr .arr div:nth-child(2) { width: 160px; }
}

@media screen and (max-width: 820px) {
    .main .s3 .cont {padding-top: 0;}
    .main .s3 .cont .top {padding: clamp(100px, 130/820*100vw, 130px) calc(40/820*100vw) 0px;}
    .main .s3 .cont .top .txt .copytext .startDate { font-size: clamp(16px, 18/820*100vw, 18px); }
    .main .s3 .cont .top .txt .copytext p { font-size: clamp(40px, 70/820*100vw, 60px); }
    .main .s3 .cont .top .txt .copytext p br {display: block;}
    .main .s3 .cont .top .startArr span { font-size: clamp(50px, 70/820*100vw, 70px); }
    .main .s3 .cont .top .startArr { margin-top: 20px; }
    .main .s3 .cont .top .startArr .arr { margin-top: 20px; }
    .main .s3 .cont .top .startArr .arr div:nth-child(1) { width: 50px; height: 50px; }
    .main .s3 .cont .top .startArr .arr div:nth-child(2) { width: 100px; }
    .main .s3 .supports .marquee { padding: 40px; }
    .main .s3 .supports .marquee .absol .mar_ch .logo_suprt { margin-right: 50px; }
    .main .s3 .supports .marquee .absol .mar_ch .logo_suprt img { height: 40px; }
    .main .s3 .cont .bottom {padding: 0;}
}

@media screen and (max-width: 500px) {
    .main .s3 .cont { padding: 80px 20px 0; padding-top: 60px; }
    .main .s3 .cont .top .txt {position: static;}
    .main .s3 .cont .top .txt .copytext p { font-size: clamp(32px, 40/500*100vw, 40px); }
    .main .s3 .cont .top .txt div.aside {top: 5%; right: 5%;}
    .main .s3 .cont .top .startArr span { font-size: 36px; }
    .main .s3 .cont .top .startArr .arr { margin-top: 10px; }
    .main .s3 .cont .top .startArr .arr div:nth-child(1) { width: 30px; height: 30px; }
    .main .s3 .cont .top .startArr .arr div:nth-child(2) { width: 70px; }
    .main .s3 .cont .bottom .small { line-height: 1.4; text-align: center; }
    .main .s3 .cont .bottom .small .br500 { display: block; }
    .main .s3 .cont .bottom .poster { flex-direction: column; }
    .main .s3 .cont .bottom .poster .mov { width: 100%; }
    .main .s3 .cont .bottom .poster .pos { width: 100%; max-width: 300px; align-self: center; margin-top: 20px; }
    .main .s3 .supports .marquee .absol .mar_ch .logo_suprt { margin-right: 30px; }
    .main .s3 .supports .marquee .absol .mar_ch .logo_suprt img { height: 30px; }
}


.main .s4 { position: relative; overflow: hidden; }
.main .s4 .curtain { position: absolute; left: 0; width: 100%; height: 50%; background: #090030; overflow: hidden; z-index: 5; }
.main .s4 .curtain._top { top: 0; display: flex; align-items: flex-end; justify-content: center; }
.main .s4 .curtain._bottom { bottom: 0; display: flex; align-items: flex-start; justify-content: center; }
.main .s4 .curtain span { font-size: 99px; letter-spacing: -0.025em; color: #fff; text-align: center; padding: calc(20/99*1em) 0; }
.main .s4 .curtain._top span { font-weight: 200; }
.main .s4 .curtain._bottom span { font-weight: 500; }
.main .s4 .cont { height: 100vh; background: transparent; position: relative; padding: 10px 0; overflow: hidden; }
.main .s4 .cont .circleText { z-index: 4; background: transparent; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); pointer-events: none; }
.main .s4 .cont .circular_swiper { height: 100%; padding-top: 100px; }
.main .s4 .cont .circular_swiper .swiper-slide { width: 517px; height: 702px; transform-origin: 50% 2390px; }
.main .s4 .cont .circular_swiper .swiper-slide .innerBox { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: 258px 258px 0 0; -webkit-border-radius: 258px 258px 0 0; -moz-border-radius: 258px 258px 0 0; -ms-border-radius: 258px 258px 0 0; -o-border-radius: 258px 258px 0 0; }
.main .s4 .cont .circular_swiper .swiper-slide .innerBox .bg { border-radius: 258px 258px 0 0; overflow: hidden; width: 100%; height: 100%; filter: brightness(.6); -webkit-filter: brightness(.6); }
.main .s4 .cont .circular_swiper .swiper-slide .innerBox .bg img { width: 100%; object-fit: cover; }
.main .s4 .cont .circular_swiper .swiper-slide .innerBox .txt { opacity: 0; transition: opacity .6s; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; z-index: 1; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -webkit-transition: opacity .6s; -moz-transition: opacity .6s; -ms-transition: opacity .6s; -o-transition: opacity .6s; }
.main .s4 .cont .circular_swiper .swiper-slide.swiper-slide-active .innerBox:hover .txt { opacity: 1; }
.main .s4 .cont .circular_swiper .swiper-slide .innerBox .txt .num { font-size: 16px; font-weight: 600; letter-spacing: -0.025em; color: #feacd8; }
.main .s4 .cont .circular_swiper .swiper-slide .innerBox .txt p { font-size: 45px; font-weight: 600; letter-spacing: -0.025em; color: #fff; line-height: 1.3; padding-top: calc(45/45*1em); padding-bottom: calc(40/45*1em); }
.main .s4 .cont .circular_swiper .swiper-slide .innerBox .txt p > small { font-weight: 300; }
.main .s4 .cont .circular_swiper .swiper-slide .innerBox .txt span { font-size: 18px; font-weight: 300; letter-spacing: -0.025em; color: #fff; }
.main .s4 .cont .circular_swiper .swiper-slide .innerBox .txt span b { font-weight: 600; }
.main .s4 .cont .circular_swiper .swiper-slide .innerBox .mask { opacity: 1; transition: opacity .6s; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -webkit-transition: opacity .6s; -moz-transition: opacity .6s; -ms-transition: opacity .6s; -o-transition: opacity .6s; text-align: center; line-height: 1.2; }
.main .s4 .cont .circular_swiper .swiper-slide.swiper-slide-active .innerBox:hover .mask { opacity: 0; }
.main .s4 .cont .circular_swiper .swiper-slide .innerBox .mask > small { font-size: 24px; font-weight: 300; letter-spacing: -0.025em; color: #fff; }
.main .s4 .cont .circular_swiper .swiper-slide .innerBox .mask > small b { font-weight: 500; color: #feacd8; }
.main .s4 .cont .circular_swiper .swiper-slide .innerBox .mask > span { font-size: 74px; padding-top: calc(20/74*1em); letter-spacing: -0.025em; font-weight: 500; color: #fff; }
.main .s4 .cont .circular_swiper .swiper-slide .innerBox .mask > span b { font-weight: 300; }
.main .s4 .cont .circular_swiper .swiper-slide .innerBox .mask > span b small { font-family: 'AdobeMyungjoStd_M'; white-space: nowrap; }
.main .s4 .cont .swiperNav { position: absolute; z-index: 2; bottom: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); padding: 40px 0; display: flex; align-items: center; }
.main .s4 .cont .swiperNav .ctrl { position: relative; display: flex; align-items: center; padding: 10px 0; cursor: pointer; }
.main .s4 .cont .swiperNav .ctrl::before { content: ''; width: 50px; height: 1px; background: #fff; }
.main .s4 .cont .swiperNav .ctrl::after { content: ''; width: 7px; height: 7px; position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg); -webkit-transform: translateY(-50%) rotate(45deg); -moz-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); }
.main .s4 .cont .swiperNav .ctrl._prev::after { left: 0; border-left: 1px solid #fff; border-bottom: 1px solid #fff; }
.main .s4 .cont .swiperNav .ctrl._next::after { right: 0; border-right: 1px solid #fff; border-top: 1px solid #fff; }
.main .s4 .cont .swiperNav .paging { padding: 0 20px; display: flex; flex-direction: column; align-items: center; }
.main .s4 .cont .swiperNav .paging span { padding: 10px 0; color: #fff; }
.main .s4 .cont .swiperNav .paging span.swiper-pagination-total { opacity: .5; }
.main .s4 .flowerWrap { position: absolute; left: 0; top: 80px; z-index: 3; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.main .s4 .flowerWrap .f_ { position: absolute; width: 864px; }
.main .s4 .flowerWrap .f_ img { width: 100%; }
.main .s4 .flowerWrap .f_.left { left: 0; top: 0; }
.main .s4 .flowerWrap .f_.right { right: 0; bottom: 0; transform: rotate(20deg); -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); }

@media screen and (max-width: 1280px) {
    .main .s4 .flowerWrap .f_ { width: 685px; }
}

@media screen and (max-width: 1024px) {
    .main .s4 .curtain span { font-size: 80px; }
    .main .s4 .cont { padding: 0; }
    .main .s4 .cont .circular_swiper { padding-top: 190px; }
    .main .s4 .cont .circular_swiper .swiper-slide { width: 400px; height: 540px; transform-origin: 50% 1900px; }
    .main .s4 .cont .circular_swiper .swiper-slide .innerBox .mask > span { font-size: 60px; }
    .main .s4 .cont .circular_swiper .swiper-slide .innerBox .txt p { font-size: 40px; padding-top: calc(40/45*1em); }
    .main .s4 .flowerWrap .f_ { width: 560px; }
    .main .s4 .flowerWrap .f_.left { top: 5%; }
    .main .s4 .flowerWrap .f_.right { bottom: 10%; }
    .main .s4 .cont .swiperNav .ctrl::before { width: 30px; }
}

@media screen and (max-width: 820px) {
    .main .s4 .curtain span { font-size: 50px; }
    .main .s4 .flowerWrap .f_ { width: 420px; }
    .main .s4 .flowerWrap .f_.left { top: 7%; transform: rotate(20deg); -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); }
    .main .s4 .flowerWrap .f_.right { bottom: 20%; transform: rotate(30deg); -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); }
}

@media screen and (max-width: 500px) {
    .main .s4 .curtain span { font-size: 30px; }
    .main .s4 .cont { display: flex; align-items: center; }
    .main .s4 .cont .circular_swiper { height: auto; padding-top: 0; padding-bottom: 60px; }
    .main .s4 .cont .circular_swiper .swiper-slide { width: 300px; height: 410px; }
    .main .s4 .cont .circular_swiper .swiper-slide.swiper-slide-active .innerBox .mask { opacity: 0; transition: opacity .6s .8s; -webkit-transition: opacity .6s .8s; -moz-transition: opacity .6s .8s; -ms-transition: opacity .6s .8s; -o-transition: opacity .6s .8s; }
    .main .s4 .cont .circular_swiper .swiper-slide.swiper-slide-active .innerBox .txt { opacity: 1; transition: opacity .6s 1.3s; -webkit-transition: opacity .6s 1.3s; -moz-transition: opacity .6s 1.3s; -ms-transition: opacity .6s 1.3s; -o-transition: opacity .6s 1.3s; }
    .main .s4 .cont .circular_swiper .swiper-slide .innerBox .mask > small { font-size: 18px; }
    .main .s4 .cont .circular_swiper .swiper-slide .innerBox .mask > span { font-size: 45px; }
    .main .s4 .cont .circular_swiper .swiper-slide .innerBox .txt p { font-size: 30px; }
    .main .s4 .flowerWrap .f_ { width: 220px; }
    .main .s4 .flowerWrap .f_.left { top: 10%; }
    .main .s4 .flowerWrap .f_.right { bottom: 25%; }
    .main .s4 .cont .swiperNav { padding: 100px 0; }
    .main .s4 .cont .swiperNav .paging { padding: 10px; font-size: 14px; }
    .main .s4 .cont .swiperNav .ctrl::before { width: 20px; }
}

@media screen and (max-width: 320px) {
    .main .s4 .cont .circular_swiper .swiper-slide { width: 250px; height: 340px; }
    .main .s4 .cont .circular_swiper .swiper-slide .innerBox .txt p { font-size: 24px; }
    .main .s4 .cont .circular_swiper .swiper-slide .innerBox .txt span { font-size: 16px; }
    .main .s4 .flowerWrap .f_ { width: 250px; }
    .main .s4 .flowerWrap .f_.left { top: 7%; }
    .main .s4 .flowerWrap .f_.right { bottom: 30%; }
}


.main .s5 { padding-top: 135px; width: 100%; }
.main .s5 .cont { padding-top: 100px; padding-bottom: 150px; }
.main .s5 .cont > span { display: block; overflow: hidden; text-align: center; font-size: 42px; letter-spacing: -0.025em; color: #000; margin-bottom: calc(70/42*1em); line-height: 1.1; }
.main .s5 .cont > span b { font-weight: bold; color: #feacd8; display: inline-block; }
.main .s5 .cont .swiper_acv { width: 100%; margin-bottom: 80px; padding: 0 120px; box-sizing: border-box; }
.main .s5 .cont .swiper_acv .swiper-slide { width: 338px; }
.main .s5 .cont .swiper_acv .swiper-slide .imgBox { position: relative; width: 100%; overflow: hidden; border-radius: 17px; -webkit-border-radius: 17px; -moz-border-radius: 17px; -ms-border-radius: 17px; -o-border-radius: 17px; }
.main .s5 .cont .swiper_acv .swiper-slide .imgBox::after { content: ''; display: block; padding-top: 141%; }
.main .s5 .cont .swiper_acv .swiper-slide .imgBox img { width: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); }
.main .s5 .cont .moreView { margin: 0 auto; }

@media screen and (max-width: 1280px) {
    .main .s5 .cont { padding-top: 50px; padding-bottom: 100px; }
    .main .s5 .cont .swiper_acv { padding: 0 50px; }
}

@media screen and (max-width: 1024px) {
    .main .s5 .cont { padding-top: 30px; }
    .main .s5 .cont .swiper_acv { margin-bottom: 50px; }
    .main .s5 .cont > span { font-size: 36px; }
}

@media screen and (max-width: 820px) {
    .main .s5 { padding-top: 100px; }
    .main .s5 .cont { padding-top: 0px; }
    .main .s5 .cont .swiper_acv { padding: 0 20px; margin-bottom: 30px; }
    .main .s5 .cont > span { font-size: 30px; }
}

@media screen and (max-width: 500px) {
    .main .s5 { padding-top: 80px; }
    .main .s5 .cont { padding-bottom: 70px; }
    .main .s5 .cont .swiper_acv .swiper-slide { width: 260px; }
    .main .s5 .cont > span { font-size: 22px; }
}

@media screen and (max-width: 320px) {
    .main .s5 .cont .swiper_acv .swiper-slide { width: 220px; }
    .main .s5 .cont > span { font-size: 18px; }
}

.main .s6 .cont { display: flex; flex-direction: column; padding-bottom: 170px; }
.main .s6 .cont > div { padding: 0 120px 0 0; }
.main .s6 .cont .top { padding: 0 120px; padding-bottom: 110px; box-sizing: border-box; }
.main .s6 .cont .top .hash { padding: calc(20/26*1em) 0; font-size: 26px; letter-spacing: -0.025em; font-weight: bold; color: #feacd8; }
.main .s6 .cont .top p { font-size: calc(100/1920*100vw); font-weight: 300; letter-spacing: -0.025em; line-height: 1.3; color: #000; }
.main .s6 .cont .top p b { font-weight: 600; }
.main .s6 .cont > div:not(.top) { align-self: flex-end; width: calc(900/1920*100%); }
.main .s6 .cont .list .t_menu { display: flex; align-items: flex-end; border-bottom: 3px solid #000; }
.main .s6 .cont .list .t_menu span { cursor: pointer; padding: calc(20/20*1em) calc(10/20*1em); font-size: 20px; font-weight: 500; letter-spacing: -0.025em; color: #bcbcbc; transition: .4s; -webkit-transition: .4s; -moz-transition: .4s; -ms-transition: .4s; -o-transition: .4s; }
.main .s6 .cont .list .t_menu span.act { color: #000; font-weight: bold; cursor: default; }
@media screen and (min-width: 821px) { 
    .main .s6 .cont .list .t_menu span:hover { color: #000; font-weight: bold; }
}
.main .s6 .cont .list .itemWrap { padding-bottom: 35px; }
.main .s6 .cont .list .item { width: 100%; display: none; }
.main .s6 .cont .list .item.act { display: block; }
.main .s6 .cont .list .item li { border-bottom: 1px solid #000; transition: filter .4s; -webkit-transition: filter .4s; -moz-transition: filter .4s; -ms-transition: filter .4s; -o-transition: filter .4s; }
.main .s6 .cont .list .item li a { height: 100%; padding: 30px 0px; background: #fff; display: flex; align-items: center; border-bottom: 1px solid #000; padding: 30px 0px; background: #fff; transition: .4s; -webkit-transition: .4s; -moz-transition: .4s; -ms-transition: .4s; -o-transition: .4s; }
.main .s6 .cont .list .item li .info { text-align: center; padding: 0 10px; margin-right: 50px; flex-shrink: 0; }
.main .s6 .cont .list .item li .info span { display: block; }
.main .s6 .cont .list .item li .info .num { padding-bottom: calc(10/42*1em); font-size: 42px; font-weight: 600; letter-spacing: -0.025em; color: #000; }
.main .s6 .cont .list .item li .info .date { font-size: 14px; letter-spacing: -0.025em; color: #595959; }
.main .s6 .cont .list .item li .tit { font-size: 18px; font-weight: 500; letter-spacing: -0.025em; color: #000; width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.main .s6 .cont .list .item li:hover { filter: brightness(.95); -webkit-filter: brightness(.95); }
.main .s6 .cont .list .moreView { margin-left: auto; }
.main .s6 .cont .sns { margin-top: 55px; overflow: hidden; }
.main .s6 .cont .sns > span { padding-bottom: calc(33/20*1em); display: inline-block; font-size: 20px; font-family: 'Geologica'; letter-spacing: -0.025em; font-weight: 500; color: #000; }
.main .s6 .cont .sns .swiper_sns { overflow: visible; }
.main .s6 .cont .sns .swiper_sns .swiper-slide { width: 186px; }
.main .s6 .cont .sns .swiper_sns .swiper-slide a { width: 100%; position: relative; display: block; }
.main .s6 .cont .sns .swiper_sns .swiper-slide a::before { content: ''; display: block; padding-top: 100%; }
.main .s6 .cont .sns .swiper_sns .swiper-slide a .imgBox { width: 100%; height: 100%; overflow: hidden; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); }
.main .s6 .cont .sns .swiper_sns .swiper-slide a .over { font-size: 20px; font-weight: 600; letter-spacing: -0.025em; color: #fff; position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #ff4395a3; opacity: 0; transition: .4s; -webkit-transition: .4s; -moz-transition: .4s; -ms-transition: .4s; -o-transition: .4s; }
.main .s6 .cont .sns .swiper_sns .swiper-slide:hover a .over { opacity: 1; }
@media screen and (max-width: 1600px) {
    .main .s6 .cont .top p {font-size: clamp(70px, 76/1600*100vw, 76px);}
}
@media screen and (max-width: 1440px) {
    .main .s6 .cont .top p {font-size: clamp(55px, 63/1440*100vw, 63px);}
}
@media screen and (max-width: 1280px) {
    .main .s6 .cont .top .hash { font-size: 22px; }
    .main .s6 .cont .top { padding: 0 50px; margin-bottom: 50px; }
    .main .s6 .cont .top p { font-size: clamp(45px, 55/1280*100vw, 55px); }
    .main .s6 .cont > div { padding: 0 50px 0 0; }
    .main .s6 .cont > div:not(.top) { width: 570px; }
    .main .s6 .cont .list .item li .info { margin-right: 10px; }
}
@media screen and (max-width: 1024px) {
    .main .s6 .cont .top p { font-size: 80px; }
    .main .s6 .cont > div:not(.top) { width: 650px; }
    .main .s6 .cont .list .item li .info { margin-right: 35px; }
    .main .s6 .cont .list .item li .info .num { font-size: 38px; }
}
@media screen and (max-width: 820px) {
    .main .s6 .cont .top { padding: 0 20px; }
    .main .s6 .cont .top p { font-size: 55px; }
    .main .s6 .cont > div:not(.top) { width: 100%; box-sizing: border-box; padding: 0 20px; }
    .main .s6 .cont .list .item li .info { margin-right: 10px; }
    .main .s6 .cont .list .item li .info .num { font-size: 36px; }
    .main .s6 .cont .list .item li a { padding: 20px 0; }
}
@media screen and (max-width: 500px) {
    .main .s6 .cont { padding-bottom: 100px; }
    .main .s6 .cont .top { margin-bottom: 30px; }
    .main .s6 .cont .top .hash { font-size: 20px; }
    .main .s6 .cont .top p { font-size: 33px; }
    .main .s6 .cont .list .t_menu span { font-size: 18px; }
    .main .s6 .cont .list .item li a { flex-direction: column; align-items: flex-start; }
    .main .s6 .cont .list .item li .info { padding: 0; display: flex; align-items: center; margin-bottom: 10px; }
    .main .s6 .cont .list .item li .info .num { display: none; }
    .main .s6 .cont .list .item li .tit { font-size: 15px; }
    .main .s6 .cont .sns .swiper_sns .swiper-slide { width: 145px; }
    .main .s6 .cont .list .moreView { margin: 0 auto; }
}

.moreView { position: relative; z-index: 1; overflow: hidden; background: #fff; color: #0000009b; font-weight: 300; font-family: "Geologica"; font-size: 18px; letter-spacing: -0.025em; display: flex; align-items: center; justify-content: center; width: calc(178/18*1em); height: calc(53/18*1em); border: 1px solid #000; border-radius: 26px; transition: color .4s; -webkit-border-radius: 26px; -moz-border-radius: 26px; -ms-border-radius: 26px; -o-border-radius: 26px; -webkit-transition: color .4s; -moz-transition: color .4s; -ms-transition: color .4s; -o-transition: color .4s; }
.moreView::before { content: ''; position: absolute; z-index: -1; left: 0; top: 0; display: block; width: 0%; height: 100%; background: #000; transition: .4s; -webkit-transition: .4s; -moz-transition: .4s; -ms-transition: .4s; -o-transition: .4s; }
.moreView:hover { color: #fff; }
.moreView:hover::before { width: 100%; }
@media screen and (max-width: 820px) {
    .moreView { font-size: 14px; }
}

.textOverWrap { overflow: hidden; }
.textOverWrap > * { display: inline-block; }

#cursor { z-index: 100; font-size: 18px; letter-spacing: -0.025em; font-family: 'Geologica'; overflow: hidden; white-space: nowrap; display: flex; align-items: center; justify-content: center; pointer-events: none; position: fixed; left: 0; top: 0; width: 0px; height: 0px; color: #fff; background: #52ff93; transform: translate(-50%, -50%); mix-blend-mode: difference; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); }

@media screen and (max-width: 820px) {
    #cursor { display: none; }
}




/* 20250513 영문페이지 */
.main.eng .s1 .contWrap .s1_txt .cont{ font-size: calc(110/1920*100vw); }
.main.eng .s3 .cont .top .txt .copytext p br{ display: block; }

@media screen and (max-width: 1280px){
    .main.eng .s3 .cont .top .txt .copytext p{ font-size: 59px; }
}

@media screen and (max-width: 820px){
    .main.eng .s3 .cont .top .txt .copytext p{ font-size: 35px; }
}

@media screen and (max-width: 500px){
    .main.eng .s3 .cont .top .txt .copytext p{ font-size: 24px; }
}