body {
    background: #fff;
}
.main {
    overflow: hidden;
}
.intro {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(to right, #000 50%, transparent 50%, transparent 50%, #000 50%);
    overflow: hidden;
    position: absolute;
    top: 0; left: 0;
    z-index: 100;
    pointer-events: none;
    /* opacity: 0; */
}
.intro .inner {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    text-align: center;
    overflow: hidden;
}
.intro .inner .step1 {
    display: flex; flex-direction: column; align-items: center;
}
.intro .inner .step1 .logo {
    width: 100%; max-width: 460px;
    opacity: 0;
    position: relative;
}
.intro .inner .step1 .txt {
    font-family: 'Pretendard';
    font-size: 24px;
    color: #fff;
    letter-spacing: -0.02em;
    margin-top: calc(40/24*1em);
    opacity: 0;
    transform: translateY(50px);
}

.intro .inner .step2 {
    overflow: hidden;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; max-width: 460px;
    height: 100%;
    opacity: 0;
}
.intro .inner .step2 .hexagon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    /* background: #fff; */
}
.intro .inner .step2 .hexagon::after {
    content: '';
    display: block;
    padding-top: 100%;
}
.intro .inner .step2 .hexagon > .line {
    width: 3px;
    height: 160px;
    position: absolute;
    left: 50%; bottom: 50%;
    transform: translate(-50%, 0%);
    padding-bottom: 30px;
    transform-origin: bottom center;
}
.intro .inner .step2 .hexagon > .line::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #da291c;
}
.intro .inner .step2 .hexagon > .center {
    width: 70px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.intro .inner .step2 .hexagon > .center::after {
    content: '';
    display: block;
    padding-top: 100%;
}
.intro .inner .step2 .hexagon > .center svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(30deg);
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 1280px) {
    .intro .inner .step1 .logo {
        max-width: clamp(300px, 460/1280*100vw, 460px);
    }
    .intro .inner .step1 .txt {
        font-size: clamp(20px, 24/1280*100vw, 24px);
    }
}
@media screen and (max-width: 1024px) {
    .intro .inner .step1 .logo {
        max-width: clamp(200px, 300/1024*100vw, 300px);
    }
    .intro .inner .step1 .txt {
        font-size: clamp(16px, 20/1024*100vw, 20px);
    }
}
@media screen and (max-width: 820px) {
    .intro .inner .step1 .logo {
        max-width: clamp(300px, 460/820*100vw, 460px);
    }
    .intro .inner .step1 .txt {
        font-size: clamp(18px, 24/820*100vw, 24px);
    }
}
@media screen and (max-width: 500px) {
    .intro .inner .step1 .logo {
        max-width: clamp(200px, 300/500*100vw, 300px);
    }
    .intro .inner .step1 .txt {
        font-size: clamp(16px, 18/500*100vw, 18px);
    }
    .intro .inner .step2 .hexagon > .line {
        height: clamp(130px, 160/500*100vw, 160px);
    }
}
@media screen and (max-width: 360px) {
    .intro .inner .step1 .txt {
        font-size: clamp(14px, 16/360*100vw, 16px);
    }
    .intro .inner .step2 .hexagon > .line {
        height: clamp(100px, 130/360*100vw, 130px);
    } 
}


/* scrollGuide */
.scrollGuide {
    display: flex; flex-direction: column; align-items: center;
    gap: calc(2/13*1em);
    width: calc(35/13*1em);
    font-size: 13px;
    border-radius: calc(17.5/13*1em);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: calc(15/13*1em) 0;
    box-sizing: border-box;
}
.scrollGuide span {
    letter-spacing: -0.03em;
    color: #fff;
}
.scrollGuide span:nth-child(1) {
    animation: scrollGuide 1.8s infinite;
}
.scrollGuide span:nth-child(2) {
    animation: scrollGuide 1.8s infinite;
    animation-delay: 0.2s;
}
.scrollGuide span:nth-child(3) {
    animation: scrollGuide 1.8s infinite;
    animation-delay: 0.4s;
}
@keyframes scrollGuide {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@media screen and (max-width: 1280px) {
    .scrollGuide {
        font-size: clamp(10px, 13/1280*100vw, 13px);
    }
}
@media screen and (max-width: 360px) {
    .scrollGuide {
        display: none;
    }
}



/* s1 */
.s1 {
    width: 100%; height: 100vh;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 20% 20%, rgba(67, 0, 255, 0.25) 0%, rgba(5, 3, 22, 0) 55%), #050316;
    overflow: hidden;
}
.s1 .s1__desaturate {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: saturation;
    opacity: 1;
    width: 100%;
    height: 100%;
}
.s1 .bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    filter: saturate(120%);
}
@media only screen and (max-device-width: 480px) {
/* iPhone only CSS here */
    .s1 .bg {
        filter: saturate(120%) blur(20px);
    }
}
.s1 .bg canvas {
    width: 100%; height: 100%;
    display: block;
}
.s1 .cont {
    width: 100%; height: 100%;
    position: relative;
    z-index: 1;
}
.s1 .cont .wrap:not(:has(.scrollGuide)) {
    width: 90%; height: 100%;
}
.s1 .cont .inner {
    width: 100%; height: 100%;
    color: #fff;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.s1 .cont .inner .visual_txt {
    width: 100%; height: auto;
}
.s1 .cont .inner .visual_txt .txt {
    width: 100%; 
    display: flex; flex-direction: column;
}
.s1 .cont .inner .visual_txt .txt .bigTxt {
    font-family: 'Roboto';
    font-weight: 500;
    font-size: clamp(50px, 64/1920*100vw, 64px);
    line-height: calc(86/64*1em);
    padding-bottom: calc(35/64*1em);
    transform: translateY(50px);
    opacity: 0;
}
.s1 .cont .inner .visual_txt .txt .smallTxt {
    font-family: 'Pretendard';
    font-size: 18px;
    line-height: calc(33/18*1em);
    letter-spacing: -0.025em;
    opacity: 0;
    font-weight: 300;
    transform: translateY(50px);
    word-break: keep-all;
}
.s1 .cont .inner .control {
    font-size: 18px;
    letter-spacing: -0.025em;
    padding-top: calc(170/980*100vh);
}
.s1 .cont .inner .control .navi {
    display: flex; align-items: center;
    gap: calc(10/18*1em);
    padding-bottom: calc(30/18*1em);
}
.s1 .cont .inner .control .navi .btn {
    width: calc(40/18*1em);
    height: calc(40/18*1em);
    border: 1px solid #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    opacity: .2;
    transition: all 0.3s ease;
    cursor: pointer;
}
@media screen and (min-width: 821px) {
    .s1 .cont .inner .control .navi .btn:hover {
        opacity: 1;
        transition: all 0.3s ease;
    }
}
.s1 .cont .inner .control .autoPlayProgressBar {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin-bottom: calc(40/20*1em);
}
.s1 .cont .inner .control .autoPlayProgressBar .bar {
    width: 0;
    height: 100%;
    background: #fff;
}

.s1 .cont .inner .swiper {
    width: 100%;
}
.s1 .cont .inner .release {
    font-size: 20px;
    display: flex;
    padding-bottom: calc(70/20*1em);
}
.s1 .cont .inner .release .item {
    /* flex: 1; */
    width: calc(514/20*1em);
    display: flex;
    gap: calc(20/20*1em);
    cursor: pointer;
}
.s1 .cont .inner .release .item .img {
    position: relative;
    width: calc(218/20*1em);
    flex-shrink: 0;
    border-radius: 9px;
    overflow: hidden;
}
.s1 .cont .inner .release .item .img::after {
    content: '';
    display: block;
    padding-top: calc(122/218*100%);
}
.s1 .cont .inner .release .item .img img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.s1 .cont .inner .release .item .img .view {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.s1 .cont .inner .release .item .img .view .viewTxt {
    font-family: 'Roboto';
    font-size: 14px;
    letter-spacing: -0.03em;
    display: flex; align-items: center;
    gap: calc(10/14*1em);
    opacity: 0;
    transition: opacity 0.3s ease;
    position: relative;
    z-index: 1;
}
.s1 .cont .inner .release .item .img .view .cursor_circle {
    width: calc(268/20*1em);
    height: calc(268/20*1em);
    border-radius: 50%;
    background: #da291c;
    opacity: 0.6;
    position: absolute;
    top: 0%; left: 0%;
    transform: translate(-50%, -50%) scale(0);
}
@media screen and (min-width: 821px) {
    .s1 .cont .inner .release .item:hover .img .view .viewTxt {
        opacity: 1;
    }
}
.s1 .cont .inner .release .item .txt {
    display: flex; flex-direction: column; justify-content: flex-start;
    /* gap: calc(10/20*1em); */
}
.s1 .cont .inner .release .item .txt .ctg {
    display: flex; align-items: center;
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.03em;
}
.s1 .cont .inner .release .item .txt .ctg::before{
    content: '';
    display: block;
    width: calc(5/16*1em);
    height: calc(5/16*1em);
    background: #da291c;
    border-radius: 50%;
    margin-right: calc(10/16*1em);
    flex-shrink: 0;
}
.s1 .cont .inner .release .item .txt .title {
    flex-grow: 1;
    font-family: 'Pretendard';
    font-size: inherit;
    font-weight: 400;
    line-height: calc(30/20*1em);
    height: calc(60/20*1em);
    letter-spacing: -0.03em;
    overflow: hidden;
    word-break: keep-all;
    padding-top: calc(20/20*1em);
    margin-bottom: calc(20/20*1em);
}
.s1 .cont .inner .release .item .txt .title p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-width: 0;
}
.s1 .cont .inner .release .item .txt .date {
    font-family: 'Pretendard';
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.03em;
    color: #7c7c7c;
}
.s1 .cont .wrap:has(.scrollGuide) {
    position: absolute;
    top: 37%; left: 50%;
    transform: translateX(-50%);
    display: flex; justify-content: flex-end;
}
@media screen and (max-width: 1700px) {
    .s1 .cont .inner .control {
        padding-top: calc(130/980*100vh);
    }
}
@media screen and (max-width: 1440px) {
    .s1 .cont .inner .visual_txt .txt .bigTxt {
        font-size: clamp(40px, 50/1440*100vw, 50px);
    }
    .s1 .cont .inner .control {
        padding-top: calc(80/980*100vh);
    }
    .s1 .cont .inner .release {
        font-size: clamp(18px, 20/1440*100vw, 20px);
    }
}
@media screen and (max-width: 1280px) {
    .s1 .cont .inner .visual_txt .txt .bigTxt {
        font-size: clamp(36px, 40/1280*100vw, 40px);
    }
    .s1 .cont .inner .visual_txt .txt .smallTxt {
        font-size: clamp(16px, 18/1280*100vw, 18px);
    }
    .s1 .cont .inner .control {
        font-size: 16px;
        padding-top: calc(50/980*100vh);
    }
    .s1 .cont .inner .release {
        font-size: clamp(16px, 18/1280*100vw, 18px);
        padding-bottom: calc(40/18*1em);
    }
}
@media screen and (max-width: 1024px) {
    .s1 .cont .inner .visual_txt .txt .bigTxt {
        font-size: clamp(32px, 40/1024*100vw, 40px);
    }
    .s1 .cont .inner .visual_txt .txt .smallTxt {
        font-size: clamp(14px, 16/1024*100vw, 16px);
    }
    .s1 .cont .inner .control {
        font-size: 14px;
    }
    .s1 .cont .inner .control .navi {
        padding-bottom: calc(20/18*1em);
    }
    .s1 .cont .inner .control .autoPlayProgressBar {
        margin-bottom: calc(30/18*1em);
    }
    .s1 .cont .inner .release {
        font-size: clamp(14px, 16/1024*100vw, 16px);
        padding-bottom: calc(30/18*1em);
    }
}
@media screen and (max-width: 820px) {
    .s1 .cont .inner {
        box-sizing: border-box; justify-content: space-between;
        padding-top: calc(100/820*100vh);
    }
    .s1 .cont .inner .visual_txt .txt .bigTxt {
        font-size: clamp(36px, 48/820*100vw, 48px);
    }
    .s1 .cont .inner .visual_txt .txt .smallTxt {
        font-size: clamp(16px, 18/820*100vw, 18px);
    }
    .s1 .cont .inner .control {
        padding-top: 0px;
        font-size: clamp(16px, 18/820*100vw, 18px);
    }
    .s1 .cont .inner .control .navi {
        padding-bottom: calc(30/18*1em);
    }
    .s1 .cont .inner .control .autoPlayProgressBar {
        margin-bottom: calc(40/18*1em);
    }
    .s1 .cont .inner .release {
        font-size: clamp(16px, 18/820*100vw, 18px);
        padding-bottom: calc(140/18*1em);
    }
}
@media screen and (max-width: 500px) {
    .s1 .cont .inner .visual_txt .txt .bigTxt {
        font-size: clamp(28px, 36/500*100vw, 36px);
    }
    .s1 .cont .inner .visual_txt .txt .smallTxt {
        font-size: clamp(14px, 16/500*100vw, 16px);
    }
    .s1 .cont .inner .control {
        font-size: clamp(14px, 16/500*100vw, 16px);
    }
    .s1 .cont .inner .control .autoPlayProgressBar {
        margin-bottom: calc(30/18*1em);
    }
    .s1 .cont .inner .release {
        font-size: clamp(14px, 16/500*100vw, 16px);
    }
    .s1 .cont .inner .release .item {
        width: clamp(324px, 324/360*100vw, 450px);
    }
    .s1 .cont .wrap:has(.scrollGuide) {
        top: 50%;
    }
}
@media screen and (max-width: 360px) {
    .s1 .cont .inner .visual_txt .txt .bigTxt {
        font-size: clamp(20px, 28/360*100vw, 28px);
    }
    .s1 .cont .inner .visual_txt .txt .smallTxt {
        font-size: clamp(12px, 14/360*100vw, 14px);
        word-break: keep-all;
    }
    .s1 .cont .inner .visual_txt .txt .smallTxt br {
        display: none;
    }
    .s1 .cont .inner .release .item {
        width: 100%;
        flex-direction: column;
    }
    .s1 .cont .inner .release .item .img {
        width: 100%;
    }
    .s1 .cont .wrap:has(.scrollGuide) {
        top: 45%;
    } 
}

/* s2 */
.s2 {
    width: 100%; height: 620vh;
    position: relative;
    background: #0a0a0a;
}
.s2::before {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    z-index: 10;
    background: #0a0a0a;
    position: absolute;
    top: 0; left: 0;
    transform: translateY(-50%);
}
.s2 .pinInner {
    width: 100%; height: 100vh;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.s2 .pinInner > .txt {
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 66px;
    letter-spacing: -0.02em;
    color: #000;
}
.s2 .scrollGuide {
    position: absolute;
    bottom: calc(20/980*100vh); left: 50%;
    transform: translateX(-50%);
}

/* overlay */
.overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #000;
    width: 100%; height: 100vh;
    /* transform: translateY(-100%); */
}
.overlay .bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%; height: 100vh;
}
.overlay .bg img {
    width: 100%; height: 100%;
}
.overlay .wrap {
    position: relative;
    z-index: 1; height: 100%;
}
.overlay .wrap .inner {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
}
.overlay .wrap .inner .titleBx {
    display: flex; flex-direction: column;
    padding-top: calc(270/980*100vh);
    padding-bottom: calc(165/980*100vh);
}
.overlay._2 .wrap .inner .titleBx {
    padding-top: 0;
    padding-bottom: 0;
    align-items: flex-end;
    text-align: right;
}
.overlay .wrap .inner .titleBx b {
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 130px;
    letter-spacing: -0.02em;
    color: #fff;
    padding-bottom: calc(40/130*1em);
}
.overlay .wrap .inner .titleBx p {
    font-family: 'Pretendard';
    font-weight: 300;
    font-size: 18px;
    line-height: calc(30/18*1em);
    letter-spacing: -0.03em;
    color: #bbbbbb;
    font-weight: normal;
}
.overlay .wrap .inner .txt {
    color: #fff;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 44px;
}
.overlay._2 .wrap .inner .txt {
    flex-direction: row-reverse;
    padding-top: calc(270/980*100vh);
    padding-bottom: calc(165/980*100vh);
}
.overlay .wrap .inner .txt .arr {
    font-size: calc(94/44*1em);
    width: calc(95/94*1em);
    display: flex;
    overflow: hidden;
}
.overlay .wrap .inner .txt .arr .move {
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: color 0.3s ease;
}
@media screen and (min-width: 821px) {
    .overlay .wrap .inner .txt .arr:hover .move {
        color: #da291c;
    }
}
.overlay .wrap .inner .txt .txt_sub {
    font-family: 'Pretendard';
    font-weight: 600;
    font-size: inherit;
    line-height: calc(64/44*1em);
    letter-spacing: -0.03em;
    text-align: right;
}
.overlay._2 .wrap .inner .txt .txt_sub {
    text-align: left;
}
@media screen and (max-width:1440px) {
    .overlay .wrap .inner {
        justify-content: space-between;
        padding: calc(200/980*100vh) 0 calc(120/980*100vh);
        box-sizing: border-box;
    }
    .overlay .wrap .inner .titleBx {
        padding: 0;
    }
    .overlay._2 .wrap .inner .txt {
        padding: 0;
    }
    .overlay .wrap .inner .titleBx b {
        font-size: clamp(100px, 130/1440*100vw, 130px);
    }
}
@media screen and (max-width: 1280px) {
    .overlay .wrap .inner {
        padding: calc(220/980*100vh) 0 calc(120/980*100vh);
    }
    .overlay .wrap .inner .titleBx b {
        font-size: clamp(80px, 100/1280*100vw, 100px);
    }
    .overlay .wrap .inner .titleBx p {
        font-size: clamp(16px, 18/1280*100vw, 18px);
    }
    .overlay .wrap .inner .txt {
        font-size: clamp(36px, 44/1280*100vw, 44px);
    }
}
@media screen and (max-width: 1024px) {
    .s2 .pinInner > .txt {
        font-size: clamp(50px, 60/1024*100vw, 60px);
    }
    .overlay .wrap .inner .titleBx b {
        font-size: clamp(60px, 75/1024*100vw, 75px);
    }
    .overlay .wrap .inner .titleBx p {
        font-size: clamp(14px, 16/1024*100vw, 16px);
    }
    .overlay .wrap .inner .txt {
        font-size: clamp(32px, 40/1024*100vw, 40px);
    }
}
@media screen and (max-width: 820px) {
    .s2 .pinInner > .txt {
        font-size: clamp(40px, 50/820*100vw, 50px);
    }
    .overlay .wrap .inner {
        padding: calc(140/980*100vh) 0 calc(110/980*100vh);
    }
    .overlay .wrap .inner .titleBx b {
        font-size: clamp(70px, 85/820*100vw, 85px);
    }
    .overlay .wrap .inner .titleBx p {
        font-size: clamp(15px, 20/820*100vw, 20px);
        word-break: keep-all;
    }
    .overlay .wrap .inner .titleBx p br{display: none;}
    .overlay .wrap .inner .txt {
        font-size: clamp(20px, 40/820*100vw, 40px);
    }
    .overlay .bg img {
        object-fit: contain;
    }
}
@media screen and (max-width: 500px) {
    .s2 {
        height: 450vh;
    }
    .s2 .pinInner > .txt {
        font-size: clamp(25px, 35/500*100vw, 35px);
    }
    .overlay .wrap .inner .titleBx b {
        font-size: clamp(60px, 75/500*100vw, 75px);
    }
    .overlay .wrap .inner .titleBx p {
        font-size: clamp(14px, 15/500*100vw, 15px);
    }
    .overlay .wrap .inner .txt {
        flex-direction: column;
        align-items: flex-start;
        gap: 10vh;
    }
    .overlay._2 .wrap .inner .txt {
        flex-direction: column-reverse;
    }
    .overlay .wrap .inner .txt .arr {
        font-size: calc(64/20*1em);
        width: calc(65/64*1em);
        margin-left: auto;
    }
    .overlay .wrap .inner .txt .txt_sub {
        text-align: left;
    }
}
@media screen and (max-width: 360px) {
    .s2 {
        height: 300vh;
    }
    .overlay .wrap .inner {
        padding: calc(140/980*100vh) 0 calc(80/980*100vh);
    }
    .overlay .wrap .inner .titleBx b {
        font-size: clamp(46px, 60/360*100vw, 60px);
    }
    .overlay .wrap .inner .titleBx p br {
        display: none;
    }
    .overlay .wrap .inner .txt {
        font-size: clamp(18px, 20/360*100vw, 20px);
        word-break: keep-all;
    }
    .overlay._2 .wrap .inner .txt br {display: none;}
}

/* s3 */
.s3 {
    background: #0a0a0a;
    width: 100%; height: 400vh;
    position: relative;
}
.s3::before {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    z-index: 10;
    background: #0a0a0a;
    position: absolute;
    top: 0; left: 0;
    transform: translateY(-50%);
}
.s3 .pinInner {
    width: 100%; height: 100vh;
    position: relative;
}
.s3 .wrap {
    height: 100%;
}
.s3 .wrap .inner {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #0a0a0a;
}
.s3 .wrap .inner .titleBx {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
}
.s3 .wrap .inner .titleBx b {
    font-family: 'Poppins';
    font-weight: 600;
    font-size: 248px;
    letter-spacing: -0.05em;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(358deg, #ff6246 0%, #e32d21 50%, #ff6246 79%, #e32d21 100%);
    position: relative;
    padding: 0 calc(10/248*1em);
    padding-bottom: calc(30/248*1em);
}
.s3 .wrap .inner .titleBx b::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('/asset/img/main/txt_filter.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
    mix-blend-mode: darken;
    pointer-events: none;
}
.s3 .wrap .inner .titleBx p {
    font-family: 'Pretendard';
    font-weight: 500;
    font-size: 28px;
    line-height: calc(42/28*1em);
    letter-spacing: -0.025em;
    color: #fff;
    padding-bottom: calc(55/28*1em);
}
.s3 .wrap .inner .titleBx p br.mo {
    display: none;
}

/* s3 overlay */
.s3 .overlayBx {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%; height: 100%;
    pointer-events: none;
}
.s3 .overlay {
    pointer-events: auto;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: calc(300/17*1em); height: calc(230/17*1em);
    background: rgba(22, 22, 22, 0.4);
    backdrop-filter: blur(10px);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: calc(30/17*1em);
    font-size: 17px;
    box-sizing: border-box;
    border-radius: calc(16/17*1em);
    transition: background 0.8s ease;
}
.s3 .overlay b {
    font-family: 'Roboto';
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -0.025em;
    color: #fff;
    transition: color 0.5s ease;
}
.s3 .overlay p {
    font-family: 'Pretendard';
    font-weight: 300;
    font-size: inherit;
    line-height: calc(26/17*1em);
    letter-spacing: -0.025em;
    color: #ccc;
    transition: color 0.5s ease;
    word-break: keep-all;
}
@media screen and (min-width: 821px) {
    .s3 .overlay.act {
        background: #fff;
    }
    .s3 .overlay.act b {
        color: #e32d21;
    }
    .s3 .overlay.act p {
        color: #000;
    }
}
.s3 .overlay._1 {
    z-index: 4;
    transform: translateY(calc(-270/800*100vh)) translateX(calc(-260/1440*100vw));
}
.s3 .overlay._2 {
    z-index: 3;
    transform: translateY(calc(-290/800*100vh)) translateX(calc(220/1440*100vw));
}
.s3 .overlay._3 {
    z-index: 2;
    transform: translateY(calc(30/800*100vh)) translateX(calc(-460/1440*100vw));
}
.s3 .overlay._4 {
    z-index: 1;
    transform: translateY(calc(130/800*100vh)) translateX(calc(320/1440*100vw));
}
@media screen and (max-width: 1800px) {
    .s3 .wrap .inner .titleBx b {
        font-size: clamp(200px, 248/1800*100vw, 248px);
    }
}
@media screen and (max-width: 1440px) {
    .s3 .wrap .inner .titleBx b {
        font-size: clamp(170px, 200/1440*100vw, 200px);
    }
    .s3 .wrap .inner .titleBx p {
        font-size: clamp(24px, 28/1440*100vw, 28px);
    }
    .s3 .overlay._4 {
        transform: translateY(calc(80/800*100vh)) translateX(calc(220/1440*100vw));
    }
}
@media screen and (max-width: 1280px) {
    .s3 .wrap .inner .titleBx b {
        font-size: clamp(130px, 170/1280*100vw, 170px);
    }
    .s3 .wrap .inner .titleBx p {
        font-size: clamp(22px, 24/1280*100vw, 24px);
    }
    .s3 .overlay {
        font-size: clamp(15px, 17/1280*100vw, 17px);
        padding: calc(25/17*1em);
    }
    .s3 .overlay._1 {
        transform: translateY(calc(-270/800*100vh)) translateX(calc(-370/1440*100vw));
    }
    .s3 .overlay._3 {
        transform: translateY(calc(60/800*100vh)) translateX(calc(-660/1440*100vw));
    }
    .s3 .overlay._4 {
        transform: translateY(calc(80/800*100vh)) translateX(calc(120/1440*100vw));
    }
}
@media screen and (max-width: 1024px) {
    .s3 .wrap .inner .titleBx b {
        font-size: clamp(100px, 130/1024*100vw, 130px);
    }
    .s3 .wrap .inner .titleBx p {
        font-size: clamp(18px, 22/1024*100vw, 22px);
    }
    .s3 .overlay {
        font-size: clamp(13px, 15/1024*100vw, 15px);
    }
}
@media screen and (max-width: 820px) {
    .s3 {
        height: auto;
        padding: calc(100/820*100vh) 0;
    }
    .s3 .pinInner {
        height: auto;
    }
    .s3 .wrap .inner .titleBx b {
        font-size: clamp(66px, 100/820*100vw, 100px);
        padding-bottom: calc(30/100*1em);
    }
    .s3 .wrap .inner .titleBx p {
        font-size: clamp(16px, 18/820*100vw, 18px);
        word-break: keep-all;
        max-width: 450px;
    }
    .s3 .wrap .inner .titleBx p br {
        display: none;
    }
    .s3 .overlayBx {
        padding-top: calc(100/22*1em);
        position: relative;
        display: flex; flex-wrap: wrap;
        gap: calc(20/22*1em);
        font-size: clamp(13px, 15/820*100vw, 15px);
    }
    .s3 .overlay {
        position: relative;
        left: auto; top: auto;
        transform: none !important;
        width: calc(100% / 2 - calc(20/22*1em) / 2); height: calc(230/17*1em);
        box-sizing: border-box;
        font-size: inherit;
        background: #4d4d4d77;
    }
}
@media screen and (max-width: 500px) {
    .s3 .wrap .inner .titleBx b {
        font-size: clamp(50px, 66/500*100vw, 66px);
        padding-bottom: calc(40/66*1em);
    }
    .s3 .wrap .inner .titleBx p br {
        display: block;
    }
    .s3 .wrap .inner .titleBx p br.mo {
        display: block;
    }    
    .s3 .overlayBx {
        font-size: clamp(16px, 18/500*100vw, 18px);
    }
    .s3 .overlay {
        width: 100%;
    }
    .s3 .overlay p br {
        display: none;
    }
}
@media screen and (max-width: 360px) {
    .s3 .overlayBx {
        font-size: clamp(14px, 16/360*100vw, 16px);
    }
}

/* s4 */
.s4 {
    background: #0a0a0a;
    width: 100%; height: 100vh;
    position: relative;
    /* clip-path: circle(5010px at 50% -520%); */
}
.s4::after {
    content: '';
    display: block;
    width: 100%; height: 3px;
    background: #0a0a0a;
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
    transform: translateY(-50%);
}
.s4 .bg {
    position: absolute;
    bottom: 0; left: 0;
    z-index: 1;
    width: 100%;
    /* filter: saturate(1.5) brightness(1.4); */
}
.s4 .bg img {
    width: 100%;
}
.s4 .wrap {
    width: 100%; height: 100%;
    position: relative;
    z-index: 2;
}
.s4 .wrap .inner {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    font-size: 54px;
    padding-bottom: calc(220/54*1em);
    box-sizing: border-box;
}
.s4 .wrap .inner p {
    font-family: 'Pretendard';
    font-weight: 600;
    line-height: calc(76/54*1em);
    padding-bottom: calc(115/54*1em);
    color: #fff;
    text-align: center;
}
.s4 .inner .marquee {width: 100%; position: relative; display: flex; align-items: center; overflow: hidden; white-space: nowrap;}
.s4 .inner .marquee .absol { width: 100%; display: flex; align-items: center;}
.s4 .inner .marquee .absol .mar_ch {animation: marquee 16s linear infinite; display: flex; align-items: center; flex-shrink: 0;}
.s4 .inner .marquee .absol .mar_ch img {margin-right: 80px; filter: brightness(0) invert(1);}

/* @keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
} */
@media screen and (max-width: 1440px) {
    .s4 .wrap .inner {
        font-size: clamp(48px, 54/1440*100vw, 54px);
    }
}
@media screen and (max-width: 1280px) {
    .s4 .wrap .inner {
        font-size: clamp(40px, 48/1280*100vw, 48px);
    }
    .s4 .inner .marquee .absol .mar_ch img {
        height: calc(45/40*1em);
        margin-right: calc(50/40*1em);
    }
}
@media screen and (max-width: 820px) {
    .s4 {
        height: auto;
    }
    .s4 .wrap .inner {
        padding-top: calc(100/40*1em);
        font-size: clamp(32px, 40/820*100vw, 40px);
    }
}
@media screen and (max-width: 500px) {
    .s4 .wrap .inner {
        font-size: clamp(28px, 32/500*100vw, 32px);
    }
    .s4 .wrap .inner p {
        padding-left: calc(20/32*1em);
        padding-right: calc(20/32*1em);
        word-break: keep-all;
    }
    .s4 .wrap .inner p br {
        display: none;
    }
}
@media screen and (max-width: 360px) {
    .s4 .wrap .inner {
        font-size: clamp(24px, 28/360*100vw, 28px);
    }
}

/* s5 */
.s5 {
    padding: 200px 0;
    position: relative;
}
.s5 .inner {
    position: relative;
}
.s5 .inner .titleBx {
    display: flex; align-items: center;
    font-size: 80px;
    padding-bottom: calc(50/80*1em);
}
.s5 .inner .titleBx b {
    font-family: 'Roboto';
    font-weight: 600;
    font-size: inherit;
    letter-spacing: -0.025em;
    color: #000;
    padding-right: calc(90/80*1em);
}
.s5 .inner .titleBx .txt {
    display: flex; flex-direction: column;
}
.s5 .inner .titleBx .txt .eng {
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: #e32d21;
}
.s5 .inner .titleBx .txt .kor {
    font-family: 'Pretendard';
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.025em;
    color: #000;
    padding-top: calc(15/20*1em);
    word-break: keep-all;
    line-height: 1.4;
}
.s5 .inner .list {
    display: flex; flex-wrap: wrap; gap: calc(20/22*1em);
    font-size: 22px; position: relative;
}
.s5 .inner .list .item {
    width: calc(100% / 4 - calc(20/22*1em) * 3 / 4);
    position: relative;
    overflow: hidden;
    border-radius: calc(16/22*1em);
    overflow: hidden;
    cursor: none;
}
.s5 .inner .list .item:nth-child(5) {
    width: calc(100% / 2 - calc(20/22*1em) / 2);
}
.s5 .inner .list .item .img {
    width: 100%;
    position: relative;
}
.s5 .inner .list .item .img::after {
    content: '';
    display: block;
    padding-top: calc(360/385*100%);
}
.s5 .inner .list .item:nth-child(5) .img::after {
    padding-top: calc(360/790*100%);
}
.s5 .inner .list .item .img img {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    object-fit: cover;
}
.s5 .inner .list .item .txt {
    position: absolute;
    bottom: 0; left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    padding: calc(35/22*1em);
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 100%);
    display: flex; flex-direction: column; justify-content: space-between;
}
.s5 .inner .list .item .txt .ctg {
    font-family: 'Pretendard';
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.025em;
    color: #fff;
}
.s5 .inner .list .item .txt .title {
    font-family: 'Pretendard';
    font-weight: 500;
    font-size: inherit;
    line-height: calc(32/22*1em);
    letter-spacing: -0.025em;
    color: #fff;
}
.s5 .inner .list .item .view {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 2;
    width: calc(650/385*100%);
    max-width: 650px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.86);
    /* opacity: 0; */
}
.s5 .inner .list .item .view::after {
    content: '';
    display: block;
    padding-top: 100%;
}
.s5 .inner .list .last {
    cursor: auto;
}
.s5 .inner .list .last .txt {
    align-items: center; justify-content: center;
    background: #fff;
}
.s5 .inner .list .last .txt .title {
    text-align: center;
    color: #000;
    font-weight: 700;
    font-size: calc(28/22*1em);
    line-height: calc(40/28*1em);
    padding-bottom: calc(35/28*1em);
}
.s5 .inner .list .last .moreBtn {
    border-color: #000;
    color: #000;
}
@media screen and (min-width: 821px) {
    .s5 .inner .list .last .moreBtn:hover {
        border-color: #e32d21;
        color: #fff;
    }
}

.s5viewMore {
    pointer-events: none;
    width: calc(80/14*1em);
    height: calc(80/14*1em);
    border-radius: 50%;
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    border: 1px solid #e32d21;
    color: #e32d21;
    font-family: 'Roboto';
    font-size: 14px;
    letter-spacing: -0.02em;
    display: block;
    opacity: 0;
}
.s5viewMore span {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}

@media screen  and (max-width: 1800px) {
    .s5 .inner .list {
        font-size: clamp(18px, 22/1800*100vw, 22px);
    }
}
@media screen and (max-width: 1440px) {
    .s5 .inner .list {
        font-size: clamp(16px, 18/1440*100vw, 18px);
    }
}
@media screen and (max-width: 1280px) {
    .s5 {
        padding: 150px 0;
    }
    .s5 .inner .list .item:not(.last) .txt .title {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        padding-right: calc(50/1440*100vw);
        word-break: keep-all;
    }
    .s5 .inner .list .item:not(.last) .txt .title br {
        display: none;
    }
    .s5 .inner .list .last .txt .title {
        font-size: clamp(18px, 24/22*1em, 24px);
    }
    .s5 .inner .list .item .txt .ctg {
        font-size: 14px;
    }
    .s5 .inner .list .last .moreBtn {
        font-size: clamp(14px, 16/1440*100vw, 16px);
    }
}
@media screen and (max-width: 1024px) {
    .s5 .inner .titleBx .txt .kor {
        font-size: clamp(16px, 20/1024*100vw, 20px);
    }
    .s5 .inner .list .item {
        width: calc(100% / 2 - calc(20/22*1em) / 2);
        height: 200px;
        border-radius: calc(13/22*1em);
    }
    .s5 .inner .list .item:nth-child(5) {
        width: 100%;
    }
}
@media screen and (max-width: 820px) {
    .s5 {
        padding: 120px 0;
    }
    .s5 .inner .titleBx {
        font-size: clamp(55px, 65/820*100vw, 65px);
    }
    .s5 .inner .titleBx b {
        padding-right: 0;
        padding-bottom: calc(40/80*1em);
    }
    .s5 .inner .titleBx {
        flex-direction: column;
        align-items: flex-start;
    }
    .s5 .inner .list .item {
        cursor: pointer;
    }
}
@media screen and (max-width: 500px) {
    .s5 {
        padding: 100px 0;
    }
    .s5 .inner .list .item {
        width: 100% !important;
    }
    .s5 .inner .list {
        font-size: clamp(16px, 18/500*100vw, 18px);
    }
}
@media screen and (max-width: 360px) {
    .s5 {
        padding: 80px 0px;
    }
    .s5 .inner .titleBx {
        font-size: 55px;
    }
    .s5 .inner .list .item {
        height: 170px;
    }
}