/* 풀페이지 전체 컨테이너 */
#fullpage {
    height: 100vh;
}

br.mob {
    display: none;
}
@media screen and (max-width: 820px) {
    br.mob {
        display: block;
    }
}

.cursor {
    position: fixed; top: 0%; left: 0%;
    width: calc(45/14*1em); height: calc(45/14*1em);
    z-index: 1000;
    border-radius: 50%;
    background: #000;
    display: flex; align-items: center; justify-content: flex-start;
    font-size: 14px; font-family: 'Poppins'; letter-spacing: -0.05em;
    color: #ff911d;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}
.cursor span {
    display: block;
    padding-right: calc(10/14*1em);
    animation: cursor 1s linear infinite;
    transform: translateX(0%);
}
@keyframes cursor {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@media screen and (max-width: 820px){
    .cursor{ display: none; }
}

/* 섹션 공통 스타일 */
.section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.section .scrollDown {
    position: absolute; z-index: 110 ; bottom: 0; left: 0%; transform-origin: left top; transform: translateY(calc(45/14*1em)) rotate(-90deg);
    font-size: 14px; font-family: 'Poppins'; letter-spacing: -0.05em; text-align: right;
    color: #fff;
}
.section.s2 .scrollDown {
    color: #000;
}
.section .scrollDown .scrollDown__text {
    display: block; padding: calc(15/14*1em) 0;
}
.section .scrollDown .bar {
    width: calc(140/14*1em); height: 2px; 
    background-color: #ffffff75;
    overflow: hidden; display: flex; justify-content: flex-end;
}
.section.s2 .scrollDown .bar {
    background-color: #bfc1c3;
}
.section .scrollDown .bar__inner {
    width: 100%; height: 100%; 
    background-color: #fff; 
    animation: scrollDown 1.5s linear infinite;
}
.section.s2 .scrollDown .bar__inner {
    background-color: #000;
}
@keyframes scrollDown {
    0% {width: 0;}
    70% {width: 100%; opacity: 1;}
    100% {width: 100%; opacity: 0;}
}

.section .content {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    z-index: 111;
}
.section .content .bg {
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%;
}
.section .content .bg img {
    width: 100%; height: 100%; object-fit: cover;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 820px) {
    .section .scrollDown {
        display: none;
    }
}


.section.s1 .content .objWrap {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
}
.section.s1 .content .objWrap .obj {
    opacity: 0; transform: translate(0, 40px);
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
}
.section.s1 .content .objWrap img {
    width: 100%; height: 100%; object-fit: cover;
}
.section.s1 .content .swiper {
    position: relative; width: 100%; height: 100%;
}

/* Swiper 페이드 효과를 위한 CSS */
.section.s1 .content .swiper .swiper-slide {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

.section.s1 .content .swiper .swiper-slide-active {
    opacity: 1;
    pointer-events: unset;
}

.section.s1 .content .swiper .swiper-slide-prev,
.section.s1 .content .swiper .swiper-slide-next {
    opacity: 0;
}

.section.s1 .content .swiper .txt {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: center;
    padding-left: calc(190/1920*100vw);
    box-sizing: border-box;
}
.section.s1 .content .swiper .txt > span {
    display: inline-block;
    font-size: 22px; font-family: 'Pretendard'; font-weight: 700; letter-spacing: -0.05em;
    color: #fff;
}
.section.s1 .content .swiper .txt > em {
    display: inline-block;
    font-size: 104px; font-family: 'Poppins'; font-weight: 600; letter-spacing: -0.05em;
    color: #fff; 
    padding-top: calc(40/104*1em); padding-bottom: calc(90/104*1em);
}
.section.s1 .content .swiper .txt > p {
    display: inline-block;
    font-size: 21px; font-family: 'Pretendard'; letter-spacing: -0.05em; line-height: calc(32/20*1em);
    color: #fff;
    margin-bottom: calc(50/20*1em);
}
.section.s1 .content .swiper .txt .btnWrap {
    display: flex; gap: calc(24/17*1em); font-size: 17px;
}
.section.s1 .content .swiper .txt .btnWrap .btn {
    display: flex; align-items: center; justify-content: space-between;
    width: calc(150/17*1em); height: calc(42/17*1em);
    border-radius: calc(7/17*1em);
    transition: all 0.3s;
    font-family: 'Pretendard'; font-weight: 600; letter-spacing: -0.05em;
    padding: calc(10/17*1em) calc(18/17*1em);
    box-sizing: border-box;
}
.section.s1 .content .swiper .txt .btnWrap .btn.blue {
    background: #6350f2; color: #fff;
}
.section.s1 .content .swiper .txt .btnWrap .btn.white {
    background: #fff; color: #000;
}

.section.s1 .content .swiper-utilWrap {
    position: absolute; bottom: 0; left: 0; width: 100%; z-index: 10;
    display: flex; align-items: center; justify-content: flex-start;
    padding: calc(20/14*1em) calc(20/14*1em);
    padding-left: calc(190/1920*100vw);
    margin-bottom: calc(30/14*1em);
    box-sizing: border-box;
}
.section.s1 .content .swiper-utilWrap .custom-pagination-wrap {
    font-size: 17px; font-family: 'Poppins'; letter-spacing: -0.05em;
    display: flex; align-items: center;
    color: #fff;
}
.section.s1 .content .swiper-utilWrap .custom-pagination-wrap .pageNum {
    width: calc(19/17*1em);
}
.progress__bar {
    position:relative;
    width: 121px; height:2px;
    background-color: #ffffff91;
    overflow: hidden;
    margin: 0 calc(20/17*1em);
}
.swiper-pagination-progressbar-fill {
    background: #fff;
    display: block; height: 100%;
    transform-origin: left center;
}
.swiper-navigation {
    margin-left: calc(20/17*1em); display: flex; align-items: center; gap: calc(20/17*1em);
}
.swiper-navigation button {
    width: calc(40/17*1em); height: calc(40/17*1em);
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    border: none;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 50%;
    position: relative;
    z-index: 10;
}
.swiper-navigation button:hover {
    background: rgba(255, 255, 255, 0.1);
}
.swiper-navigation button i {
    font-size: 18px; color: #fff; display: flex; align-items: center; justify-content: center; 
    pointer-events: none;
}

.s1 .content .bg .bubbles {
    position: absolute; top: 0; left: 0;
    z-index: 12;
}
.s1 .content .bg .bubbles._1 {
    left: calc(1190/1920*100%);
    top: 50%;
}
.s1 .content .bg .bubbles._2 {
    left: calc(1660/1920*100%);
    top: 70%;
}



@media screen and (max-width: 1280px) {
    .section.s1 .content .swiper .txt > em {
        font-size: 80px; padding-bottom: calc(30/80*1em);
    }
}
@media screen and (max-width: 1024px) {
    .section.s1 .content .swiper .txt > span {
        font-size: 20px;
    }
    .section.s1 .content .swiper .txt > em {
        font-size: 60px;
    }
    .section.s1 .content .swiper .txt > p {
        font-size: 18px;
    }
    .section.s1 .content .swiper .txt .btnWrap {
        font-size: 16px;
    }
    .section.s1 .content .swiper-utilWrap {
        margin-bottom: 20px;
    }
}
@media screen and (max-width: 820px) {
    .section.s1 .content .bg {
        width: 1280px;
        transform: translate(-30%, 0%);
        filter: brightness(0.8);
    }
    .section.s1 .content .swiper .txt {
        padding-bottom: 50%;
        padding-left: 5%;
    }
    .section.s1 .content .swiper .txt > span {
        font-size: clamp(18px, 20/820*100vw, 20px);
        font-weight: 500;
    }
    .section.s1 .content .swiper .txt > em {
        font-size: clamp(40px, 50/820*100vw, 50px);
    }
    .section.s1 .content .swiper .txt > p {
        font-size: clamp(16px, 18/820*100vw, 18px);
    }
    .section.s1 .content .swiper .txt .btnWrap {
        font-size: clamp(14px, 16/820*100vw, 16px);
    }
    .section.s1 .content .swiper-utilWrap {
        margin-bottom: 10px;
        padding-left: 5%;
        /* mix-blend-mode: difference;
        filter: brightness(0.5); */
    }
    /* .section.s1 .content .swiper-utilWrap .custom-pagination-wrap {
        color: #000;
    }
    .swiper-pagination-progressbar-fill {
        background: #000;
    }
    .section.s1 .content .swiper-utilWrap .swiper-navigation button i {
        color: #000;
    }
    .section.s1 .content .swiper-utilWrap .swiper-navigation button:hover {
        background: rgba(0, 0, 0, 0.1);
    } */

}
@media screen and (max-width: 500px) {
    .section.s1 .content .bg {
        width: 1024px;
        transform: translate(-40%, 0%);
    }
    .section.s1 .content .swiper .txt {
        padding-left: 5%; padding-bottom: 50%;
    }
    .section.s1 .content .swiper .txt > span {
        font-size: clamp(14px, 20/500*100vw, 20px);
    }
    .section.s1 .content .swiper .txt > em {
        font-size: clamp(32px, 40/500*100vw, 40px);
    }
    .section.s1 .content .swiper .txt > p {
        font-size: clamp(14px, 16/500*100vw, 16px);
    }
    .section.s1 .content .swiper-utilWrap {
        padding: calc(20/17*1em) calc(20/17*1em);
    }
}
@media screen and (max-width: 360px) {
    .section.s1 .content .bg {
        width: 820px;
        transform: translate(-50%, 0%);
    }
    .section.s1 .content .swiper .txt {
        padding-bottom: 0;
        justify-content: flex-start;
        padding-top: 80px;
    }
    .section.s1 .content .swiper .txt > p {
        word-break: keep-all;
    }
    .section.s1 .content .swiper .txt > p br {
        display: none;
    }
    .section.s1 .content .swiper .txt .btnWrap {
        font-size: clamp(12px, 14/360*100vw, 14px);
    }
    .progress__bar {
        width: 60px;
    }
}


.s2 .content .bg {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
}
.s2 .content .bg img {
    width: 100%; height: 100%; object-fit: cover;
}
.s2 .content .txt {
    width: 100%; height: 100%; position: relative; z-index: 1;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.s2 .content .txt > p {
    transform: translateY(40px); opacity: 0;
    font-size: 62px; font-family: 'Pretendard'; font-weight: 700; letter-spacing: -0.05em;
    color: #000; line-height: calc(93/62*1em); text-align: center;
}
.s2 .content .txt > p b {
    color: #000;
}
.s2 .content .txt .btnWrap {
    display: flex; align-items: center; gap: calc(20/18*1em); font-size: 18px;
    padding-top: calc(30/18*1em);
    transform: translateY(40px); opacity: 0;
}
.s2 .content .txt .btnWrap .btn {
    display: flex; align-items: center; justify-content: center;
    width: calc(40/18*1em); height: calc(40/18*1em);
    border-radius: 50%;
    border: 1px solid #000;
    box-sizing: border-box;
    background: transparent;
    color: #000;
    cursor: pointer;
    transition: all 0.3s ease;
}
@media screen and (min-width: 821px) {
    .s2 .content .txt .btnWrap .btn:hover {
        background: #000;
        color: #fff;
    }
}
.s2 .content .txt .btnWrap > span {
    font-size: 16px; font-family: "Poppins";
    letter-spacing: 0.05em; color: #000;
    font-weight: 500;
}
.s2 .content .txt .swiper {
    opacity: 0;
    position: relative;
    width: 100%;
    padding-top: 140px;
}
.s2 .content .txt .swiper:after {
    content: "";
    position: absolute; bottom: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to right, #eaecf0 3%, transparent 10%, transparent 90%, #ecedf1 97%);
    z-index: 11;
    pointer-events: none;
}
.s2 .content .txt .swiper .swiper-slide {
    width: auto;
}
.s2 .content .txt .swiper .swiper-slide + .swiper-slide {
    margin-left: calc(30/18*1em);
}
.s2 .content .txt .swiper .item {
    cursor: none;
    display: block;
    font-size: 18px;
    width: calc(297/18*1em);
    padding: calc(25/18*1em);
    background: #fff;
    border-radius: calc(22/18*1em);
    border: 1px solid #d2d2d2;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.s2 .content .txt .swiper .item .img {
    transition: all 0.3s ease;
    height: 30px;
    display: flex;
    justify-content: flex-start; 
    align-items: center;
}
.s2 .content .txt .swiper .item .img img{ max-height: 100%; }
.s2 .content .txt .swiper .item .inner {
    display: flex; flex-direction: column; align-items: flex-start; gap: calc(10/18*1em);
}
.s2 .content .txt .swiper .item .inner > p {
    font-size: inherit; font-family: "Pretendard";
    letter-spacing: -0.05em; line-height: calc(24/16*1em);
    color: #000;
    font-weight: 600;
    margin-top: calc(20/18*1em);
    margin-bottom: calc(15/18*1em);
    min-height: 4.6em;
    transition: all 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
}
.s2 .content .txt .swiper .item .inner > .more {
    display: inline-flex; align-items: center; gap: calc(18/17*1em);
    font-size: calc(17/18*1em); font-family: "Poppins";
    font-weight: 500; letter-spacing: -0.05em;
    color: #1260e6; opacity: .72;
    position: relative;
    padding-bottom: calc(8/18*1em);
    transition: all 0.3s ease;
}
.s2 .content .txt .swiper .item .inner > .more::after {
    content: "";
    position: absolute; bottom: 0; left: 0;
    width: 100%; height: 1px;
    background: #1260e6;
    transition: all 0.3s ease;
}
@media screen and (min-width: 821px) {
    .s2 .content .txt .swiper .swiper-slide:hover .item {
        transform: translateY(-30%);
        background: #f36e3b;
        border-color: #f36e3b;
    }
    .s2 .content .txt .swiper .item:hover .img {
        filter: brightness(0) invert(100%);
    }
    .s2 .content .txt .swiper .swiper-slide:hover .item .inner > p {
        color: #fff;
    }
    .s2 .content .txt .swiper .swiper-slide:hover .item .inner > .more {
        color: #fff;
        opacity: 1;
    }
    .s2 .content .txt .swiper .swiper-slide:hover .item .inner > .more::after {
        background: #fff;
    }
}
@media screen and (max-width: 1440px) {
    .s2 .content .txt > p {
        font-size: clamp(52px, 62/1440*100vw, 62px);
        padding-top: calc(60/52*1em);
    }
    .s2 .content .txt .swiper {
        padding-top: 100px;
    }
}
@media screen and (max-width: 1280px) {
    .s2 .content .txt > p {
        font-size: clamp(48px, 52/1280*100vw, 52px);
    }
    .s2 .content .txt .swiper {
        padding-top: 60px;
    }
    .s2 .content .txt .swiper .item {
        font-size: clamp(14px, 16/1280*100vw, 16px);
    }
}
@media screen and (max-width: 1024px) {
    .s2 .content .txt > p {
        font-size: clamp(40px, 48/1024*100vw, 48px);
    }
    .s2 .content .txt .btnWrap {
        font-size: 16px;
    }
    .s2 .content .txt .swiper {
        padding-top: 30px;
    }
    .s2 .content .txt .swiper .swiper-slide + .swiper-slide {
        margin-left: calc(20/18*1em);
    }
}
@media screen and (max-width: 820px) {
    .s2 {height: auto !important;}
    .s2 .fp-tableCell {height: auto !important;}
    .s2 .content {
        position: relative;
        padding: calc(160/820*100vw) 0;
    }
    .s2 .content .txt {
        position: relative;
        height: auto;
    }
    .s2 .content .txt > p {
        font-size: clamp(36px, 48/820*100vw, 48px);
        padding-bottom: calc(40/40*1em);
    }
    .s2 .content .txt .swiper {
        padding-top: calc(80/820*100vw);
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
    .s2 .content .txt .swiper:after {
        display: none;
    }
    .s2 .content .txt .swiper .swiper-slide + .swiper-slide {
        margin-left: 0;
    }
    .s2 .content .txt .swiper .item {
        font-size: clamp(16px, 18/820*100vw, 18px);
    }
}
@media screen and (max-width: 500px) {
    .s2 .content .txt > p {
        font-size: clamp(26px, 36/500*100vw, 36px);
    }
    .s2 .content .txt .btnWrap {
        font-size: clamp(12px, 16/500*100vw, 16px);
    }
}
@media screen and (max-width: 360px) {
    .s2 .content .txt > p {
        word-break: keep-all;
    }
    .s2 .content .txt > p br {
        display: none;
    }
    .s2 .content .txt .swiper .item {
        font-size: clamp(14px, 16/360*100vw, 16px);
    }
}


.s3 .content {
    display: flex; overflow: hidden;
}
.s3 .content .cardBox {
    max-width: calc(960/1920*100vw);
    width: 100%;
    height: 100%;
    background: #f36e3b;
    display: flex; align-items: center;
}

.s3 .content .cardBox .marquee {width: 100%; position: absolute; bottom: 0; left: 0; transform: translateY(100%) rotate(-90deg); transform-origin: left top; display: flex; align-items: center; font-size: 103px; font-weight: 500; letter-spacing: -0.05em; font-family: 'Poppins'; color: rgb(255, 255, 255, .14); overflow: hidden; white-space: nowrap;}
.s3 .content .cardBox .marquee .absol { width: 100%; display: flex; align-items: center;}
.s3 .content .cardBox .marquee .absol .mar_ch span {margin: 0 calc(50/164*1em);}

.s3 .content .cardBox .cardWrapper {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 570px;
    width: 100%;
    margin: 0px auto;
    box-sizing: border-box;;
    position: relative;
    z-index: 1;
}
.s3 .content .cardBox .cardWrapper .card {
    opacity: 0;
    font-size: 16px;
    width: calc(100% / 2 - 15px);
    position: relative;
    border-radius: calc(22/16*1em);
    transition: all 0.3s ease;
}
.s3 .content .cardBox .cardWrapper .card:after {
    content: "";
    display: block;
    padding-top: 100%;
}
.s3 .content .cardBox .cardWrapper .card .inner {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: space-between; flex-direction: column;
    padding: calc(23/16*1em);
    box-sizing: border-box;
}
@media screen and (min-width: 821px) {
    .s3 .content .cardBox .cardWrapper .card:not(.black) {
        cursor: none;
    }
    .s3 .content .cardBox .cardWrapper .card:not(.black):hover {
        transform: rotate(10deg);
    }
}
.s3 .content .cardBox .cardWrapper .card.white {
    background: #fff;
}
.s3 .content .cardBox .cardWrapper .card.black {
    background: #000;
}
.s3 .content .cardBox .cardWrapper .card.black .inner {
    justify-content: center;
}
.s3 .content .cardBox .cardWrapper .card.blue {
    background: #6350f2;
}
.s3 .content .cardBox .cardWrapper .card:not(.black) .itemName {
    display: flex; flex-direction: column; align-items: center;
    font-size: inherit; font-family: "Pretendard";
    letter-spacing: -0.05em; font-weight: 500;
    color: #888;
    padding-top: calc(75/270*100%);
}
.s3 .content .cardBox .cardWrapper .card.blue .itemName {
    color: rgba(255, 255, 255, 0.72);
}
.s3 .content .cardBox .cardWrapper .card .itemName > span {
    padding-bottom: calc(10/16*1em);
}
.s3 .content .cardBox .cardWrapper .card .btn {
    display: flex; align-items: center; justify-content: space-between;
    width: calc(135/16*1em); height: calc(38/16*1em);
    border-radius: calc(7/16*1em);
    background: #6350f2;
    font-size: inherit; font-family: "Pretendard";
    letter-spacing: -0.05em; font-weight: 500;
    color: #fff;
    padding: calc(10/16*1em) calc(18/16*1em);
    box-sizing: border-box;
}
.s3 .content .cardBox .cardWrapper .card.blue .btn {
    background: #fff;
    color: #000;
}
.s3 .content .txtBox {
    position: relative;
    height: 100%;
    padding: 0px calc(200/1920*100vw); display: flex; align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    flex-grow: 1;
    font-size: 67px; font-family: "Pretendard";
    letter-spacing: -0.05em; font-weight: 700;
    color: #000;
}
.s3 .content .txtBox > * {
    transform: translateY(40px); opacity: 0;
}
.s3 .content .txtBox .bigTxt {
    line-height: calc(94/67*1em);
    padding-bottom: calc(60/67*1em);
}
.s3 .content .txtBox .bigTxt b {
    color: #f36e3b;
}
.s3 .content .txtBox .smallTxt {
    font-size: 22px; font-family: "Pretendard";
    letter-spacing: -0.05em; font-weight: 600;
    color: #000; line-height: calc(37/22*1em);
}
.s3 .content .txtBox .smallTxt small {
    color: #848484;
}
.s3 .content .txtBox .obj {
    position: absolute; bottom: 100px; right: 230px;
    animation: obj 3s ease-in-out infinite;
    z-index: 1;
}
@keyframes obj {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10%);
    }
    100% {
        transform: translateY(0);
    }
}
.s3 .content .txtBox .obj img {
    width: 100%; height: 100%; object-fit: cover;
}
.s3 .content .txtBox .numObj {
    position: absolute; bottom: 80px; right: 130px;
    font-family: 'Poppins';
    font-size: 216px;
    font-weight: 300;
    letter-spacing: -0.05em;
    color: #1260e6;
}
.s3 .content .txtBox .numObj span {
    display: inline-block;
    opacity: 0.21;
}
@media screen and (max-width: 1600px) {
    .s3 .content .txtBox .obj {
        bottom: 5%;
        right: 28%;
    }
    .s3 .content .txtBox .numObj {
        bottom: 5%;
        right: 13%;
    }
}
@media screen and (max-width: 1440px) {
    .s3 .content .cardBox .cardWrapper {
        max-width: 470px;
    }
    .s3 .content .txtBox {
        padding: 0px calc(100/1440*100vw);
        font-size: clamp(60px, 67/1440*100vw, 67px);
    }
    .s3 .content .txtBox .numObj {
        font-size: clamp(180px, 216/1440*100vw, 216px);
    }
}
@media screen and (max-width: 1280px) {
    .s3 .content .cardBox .cardWrapper {
        max-width: 400px;
        gap: 10px;
    }
    .s3 .content .cardBox .cardWrapper .card {
        width: calc(100% / 2 - 5px);
        font-size: clamp(14px, 16/1280*100vw, 16px);
    }
    .s3 .content .cardBox .cardWrapper .card .inner .img {
        transform: scale(0.8);
    }
    .s3 .content .txtBox {
        font-size: clamp(50px, 60/1280*100vw, 60px);
    }
    .s3 .content .txtBox .smallTxt {
        font-size: clamp(18px, 22/1280*100vw, 22px);
    }
    .s3 .content .txtBox .obj img {
        transform: scale(0.8);
        transform-origin: right bottom;
    }
    .s3 .content .txtBox .numObj {
        font-size: clamp(150px, 180/1280*100vw, 180px);
    }
}
@media screen and (max-width: 1024px) {
    .s3 .content .cardBox .cardWrapper {
        max-width: 340px;
    }
    .s3 .content .cardBox .cardWrapper .card .inner {
        padding: calc(15/14*1em);
    }
    .s3 .content .txtBox {
        font-size: clamp(40px, 50/1024*100vw, 50px);
    }
    .s3 .content .txtBox .obj img {
        transform: scale(0.6);
    }
    .s3 .content .txtBox .numObj {
        font-size: clamp(120px, 150/1024*100vw, 150px);
    }
}
@media screen and (max-width: 820px) {
    .s3 {
        height: auto !important;
    }
    .s3 .fp-tableCell {
        height: auto !important;
    }
    .s3 .content {
        position: relative;
        flex-direction: column-reverse;
        justify-content: flex-end;
        height: auto;
    }
    .s3 .content .cardBox {
        max-width: 100%;
        width: 100%;
        height: auto;
        padding: calc(100/820*100vw) 5%;
        box-sizing: border-box;
    }
    .s3 .content .txtBox {
        width: 100%;
        height: auto;
        padding: calc(130/820*100vw) 5%;
        box-sizing: border-box;
        font-size: clamp(50px, 55/820*100vw, 55px);
        flex-grow: 0;
    }
    .s3 .content .txtBox .smallTxt {
        font-size: clamp(20px, 22/820*100vw, 22px);
    }
    .s3 .content .txtBox .obj {
        right: 14%;
    }
    .s3 .content .txtBox .numObj {
        right: 7%;
    }
    .s3 .content .cardBox .cardWrapper {
        max-width: 70%;
    }
    .s3 .content .cardBox .marquee {
        transform: translateY(-10%) rotate(0deg);
    }
}
@media screen and (max-width: 500px) {
    .s3 .content .txtBox {
        font-size: clamp(40px, 50/500*100vw, 50px);
    }
    .s3 .content .txtBox .smallTxt {
        font-size: clamp(18px, 20/500*100vw, 20px);
    }
    .s3 .content .txtBox .obj {
        right: 15%
    }
    .s3 .content .txtBox .obj img {
        transform: scale(0.5);
    }
    .s3 .content .txtBox .numObj {
        font-size: clamp(80px, 100/500*100vw, 100px);
    }
    .s3 .content .cardBox .cardWrapper {
        max-width: 95%;
    }
}
@media screen and (max-width: 360px) {
    .s3 .content .txtBox {
        font-size: clamp(30px, 40/360*100vw, 40px);
        padding: calc(80/360*100vw) 5%;
    }
    .s3 .content .txtBox .smallTxt {
        font-size: clamp(16px, 18/360*100vw, 18px);
    }
    .s3 .content .txtBox .obj {
        display: none;
    }
    .s3 .content .cardBox {
        padding: calc(50/360*100vw) 5% calc(80/360*100vw);
    } 
    .s3 .content .cardBox .cardWrapper {
        flex-direction: column;
    }
    .s3 .content .cardBox .cardWrapper .card {
        width: 100%;
    }
    .s3 .content .cardBox .cardWrapper .card:after {
        padding-top: 50%;
    }
    .s3 .content .cardBox .cardWrapper .card:not(.black) .itemName {
        padding-top: 0;
    }
    .s3 .content .cardBox .cardWrapper .card .inner {
        justify-content: center;
    }
    .s3 .content .cardBox .cardWrapper .card .btn {
        margin-top: 1em;
    }
}

.s4 .objWrap {
    background: #000;
    overflow: hidden;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
}
.s4 .objWrap .obj {
    position: absolute;
    width: calc(1200/1920*100vw);
    height: calc(1200/1920*100vw);
}
.s4 .objWrap .obj._1 {
    right: 0; bottom: 0;
    transform: translate(50%, -20%);
    animation: obj_roll_1 10s linear infinite;
}
.s4 .objWrap .obj._2 {
    left: 0; top: 0;
    transform: translate(-50%, 20%);
    animation: obj_roll 10s linear infinite;
}
.s4 .objWrap .obj svg {
    width: 100%; height: 100%;
}
.s4 .content {
    position: relative; z-index: 1;
}
.s4 .content:before {
    content: '';
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
    backdrop-filter: blur(70px);
    -webkit-backdrop-filter: blur(70px);
}
@keyframes obj_roll_1 {
    0% {
        transform: translate(50%, -20%) rotate(0deg);
    }
    100% {
        transform: translate(50%, -20%) rotate(360deg);
    }
}
@keyframes obj_roll {
    0% {
        transform: translate(-50%, 20%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, 20%) rotate(360deg);
    }
}




.s4 .content {
    display: flex; justify-content: space-between; height: 100%;
}
.s4 .content .txt {
    height: 100%;
    display: flex; flex-direction: column;
    justify-content: center;
    padding-left: calc(190/1920*100vw);
}
.s4 .content .txt > * {
    transform: translateY(40px); opacity: 0;
}
.s4 .content .txt .bigTxt {
    font-size: 67px; font-family: "Pretendard";
    letter-spacing: -0.05em; font-weight: 700;
    color: #fff; line-height: calc(99/67*1em);
    padding-bottom: calc(90/67*1em);
}
.s4 .content .txt .desc span {
    font-size: 27px; font-family: "Poppins";
    letter-spacing: -0.05em; font-weight: 500;
    color: #fff;
    padding-bottom: calc(20/27*1em);
    display: inline-block;
}
.s4 .content .txt .desc span em {
    opacity: .4;
}
.s4 .content .txt .desc span b {
    padding: 0 calc(10/27*1em);
    display: inline-block;
}
.s4 .content .txt .desc p {
    font-size: 18px; font-family: "Pretendard";
    letter-spacing: -0.05em; color: #fff;
    line-height: calc(32/18*1em);
}
.s4 .fp-tableCell {
    display: block !important;
}
.s4 .content .marqWrap {
    height: 100%; overflow: hidden;
    display: flex; gap: 68px;
    padding-right: calc(254/1920*100vw);
    flex-shrink: 0;
}
.s4 .content .marqWrap > * {
    opacity: 0;
}
.s4 .content .marqWrap .marquee_vrtcl {height: 100%; position: relative; display: flex; align-items: center; overflow: hidden;}
.s4 .content .marqWrap .marquee_vrtcl .absol { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;}
.s4 .content .marqWrap .marquee_vrtcl._reverse .absol {justify-content: flex-start;}
.s4 .content .marqWrap .marquee_vrtcl .absol .mar_ch .item {padding-bottom: calc(63/240*100%);}
.s4 .content .marqWrap .marquee_vrtcl .absol .mar_ch .img {width: 240px; height: 90px; border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center;}
@media screen and (max-width: 1600px) {
    .s4 .content .marqWrap {
        padding-right: calc(100/1600*100vw);
    }
}
@media screen and (max-width: 1440px) {
    .s4 .content .txt {
        padding-left: calc(110/1440*100vw);
    }
    .s4 .content .txt .bigTxt {
        font-size: clamp(60px, 67/1440*100vw, 67px);
    }
    .s4 .content .marqWrap {
        gap: 40px;
    }
}
@media screen and (max-width: 1280px) {
    .s4 .content .txt {
        padding-left: calc(50/1280*100vw);
    }
    .s4 .content .txt .bigTxt {
        font-size: clamp(50px, 60/1280*100vw, 60px);
    }
    .s4 .content .marqWrap {
        gap: 30px;
        padding-right: calc(50/1280*100vw);
    }
    .s4 .content .marqWrap .marquee_vrtcl .absol .mar_ch .img {
        width: 200px;
        height: 70px;
    }
    .s4 .content .marqWrap .marquee_vrtcl .absol .mar_ch .img img {
        transform: scale(0.8);
    }
}
@media screen and (max-width: 1024px) {
    .s4 .content .txt .bigTxt {
        font-size: clamp(40px, 50/1024*100vw, 50px);
    }
    .s4 .content .txt .desc span {
        font-size: clamp(20px, 22/1280*100vw, 22px);
    }
    .s4 .content .txt .desc p {
        font-size: clamp(16px, 18/1024*100vw, 18px);
    }
    .s4 .content .marqWrap {
        gap: 20px;
    }
    .s4 .content .marqWrap .marquee_vrtcl .absol .mar_ch .img {
        width: 180px;
        height: 60px;
    }
    .s4 .content .marqWrap .marquee_vrtcl .absol .mar_ch .img img {
        transform: scale(0.7);
    }
}
@media screen and (max-width: 820px) {
    .s4 {
        height: auto !important;
    }
    .s4 .fp-tableCell {
        height: auto !important;
        position: relative;
    }
    .s4 .content {
        flex-direction: column;
        padding: calc(100/820*100vw) 5% calc(80/820*100vw);
        box-sizing: border-box;
    }
    .s4 .content .txt {
        padding-left: 0;
        width: 100%;
        padding-bottom: 60px;
    }
    .s4 .content .marqWrap {
        flex-direction: column;
    }
    .s4 .content .marqWrap .marquee_vrtcl {
        height: auto;
    }
    .s4 .content .marqWrap .marquee_vrtcl .absol {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: auto;
        width: 100%;
    }
    .s4 .content .marqWrap .marquee_vrtcl .absol .mar_ch {
        padding-right: 20px;
        display: flex; align-items: center;
    }
    .s4 .content .marqWrap .marquee_vrtcl .absol .mar_ch .item {
        padding-right: 20px;
        padding-bottom: 0;
    }
}
@media screen and (max-width: 500px) {
    .s4 .content {
        padding: calc(90/500*100vw) 5% calc(80/500*100vw);
    }
    .s4 .content .txt .bigTxt {
        font-size: clamp(30px, 40/500*100vw, 40px);
    }
    .s4 .content .txt .desc span {
        font-size: clamp(18px, 20/500*100vw, 20px);
    }
    .s4 .content .txt .desc p {
        font-size: clamp(14px, 16/500*100vw, 16px);
    }
    .s4 .content .marqWrap {
        gap: 10px;
    }
    .s4 .content .marqWrap .marquee_vrtcl .absol .mar_ch .item {
        padding-right: 10px;
    }
    .s4 .content .marqWrap .marquee_vrtcl .absol .mar_ch .img {
        width: 160px;
        height: 50px;
    }
    .s4 .content .marqWrap .marquee_vrtcl .absol .mar_ch .img img {
        transform: scale(0.6);
    }
}
@media screen and (max-width: 360px) {
    .s4 .content .txt .bigTxt {
        font-size: 28px;
    }
    .s4 .content .txt .desc span {
        font-size: clamp(16px, 18/360*100vw, 18px);
    }
    .s4 .content .txt .desc p {
        word-break: keep-all;
    }
}


.s5 .bg {
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
}
.s5 .bg img {
    width: 100%; height: 100%; object-fit: cover;
}
.s5 .content {
    position: relative; z-index: 1;
    height: 100%;
    padding: 85px 0;
    box-sizing: border-box;
}
.s5 .content .wrap {
    height: 100%;
    display: flex; flex-direction: column; justify-content: center;
}
.s5 .content .titleWrap {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
}
.s5 .content .titleWrap > * {
    opacity: 0;
    transform: translateY(40px);
}
.s5 .content .titleWrap .smallTxt {
    font-size: 22px; font-family: "Pretendard";
    font-weight: 600;
    letter-spacing: -0.05em; color: #fff;
    line-height: calc(30/22*1em);
    padding-bottom: calc(10/22*1em);
}
.s5 .content .titleWrap .bigTxt {
    font-size: 52px; font-family: "Pretendard";
    font-weight: 700;
    letter-spacing: -0.05em; color: #fff;
    line-height: calc(77/52*1em);
    padding-bottom: calc(70/52*1em);
    display: inline-block;
}
.s5 .content .boxWrap {
    display: flex; gap: 21px;
}
.s5 .content .boxWrap > * {
    opacity: 0;
    transform: translateY(40px);
}
.s5 .content .boxWrap .box {
    cursor: none;
    font-size: 27px;
    border-radius: calc(35/27*1em);
    overflow: hidden;
    color: #fff;
    height: calc(450/27*1em);
    transition-duration: 0.4s;
    width: calc(50% - 11px);
}
.s5 .content .boxWrap .box.black {
    /* width: calc(552/1280*100%); */
    background: #000;
}
.s5 .content .boxWrap .box.blue {
    flex-grow: 1;
    background: #5f4aff;
}

@media screen and (min-width: 821px){
    .s5 .content .boxWrap .box:hover{ width: calc(760 / 1280 * 100%); }
}

.s5 .content .boxWrap .box .inner {
    height: 100%;
    padding: calc(55/27*1em);
    box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: space-between;
}

.s5 .content .boxWrap .box .inner > * {
    opacity: 0;
}
.s5 .content .boxWrap .box .inner .itemName {
    font-size: inherit;
    display: flex; flex-direction: column;
    align-items: flex-start;
}
.s5 .content .boxWrap .box .inner .itemName > span {
    font-size: inherit;
    letter-spacing: -0.05em;
}
.s5 .content .boxWrap .box.black .inner .itemName > span {
    font-family: 'Pretendard';
    font-weight: 600;
    font-size: calc(24/27*1em);
    padding-bottom: calc(20/24*1em);
}
.s5 .content .boxWrap .box.blue .inner .itemName > span {
    font-family: 'Poppins';
    font-weight: 400;
    padding-bottom: calc(25/27*1em);
}
.s5 .content .boxWrap .box .inner .itemName .line {
    width: 16px; height: 2px;
    background: #fff;
    opacity: .64;
    margin-bottom: calc(25/27*1em);
}
.s5 .content .boxWrap .box .inner .itemName .btn {
    font-size: calc(17/27*1em);
    display: inline-flex; align-items: center;
    gap: calc(10/17*1em);
    font-family: 'Pretendard';
    font-weight: 500;
    letter-spacing: -0.05em;
    padding: calc(8/17*1em) calc(18/17*1em);
    border-radius: calc(7/17*1em);
    background: #fff;
}
.s5 .content .boxWrap .box.black .inner .itemName .btn {
    color: #000;
}
.s5 .content .boxWrap .box.blue .inner .itemName .btn {
    color: #5f4aff;
}
.s5 .content .boxWrap .box .inner .itemName .btn i {
    display: inline-block;
    font-size: calc(18/17*1em);
    padding-bottom: calc(2/18*1em);
}
.s5 .content .boxWrap .box .inner .desc {
    width: 100%;
    display: flex; justify-content: flex-start;
    gap: calc(80/27*1em);
}
.s5 .content .boxWrap .box .inner .desc dl {
    display: flex; flex-direction: column;
    font-size: calc(22/27*1em);
    gap: calc(15/22*1em);
}
.s5 .content .boxWrap .box .inner .desc dl dt {
    font-weight: 500;
    font-family: 'Pretendard';
    letter-spacing: -0.05em;
    color: #fff;
}
.s5 .content .boxWrap .box .inner .desc dl dd {
    font-size: calc(18/22*1em);
    letter-spacing: -0.05em;
    color: #fff;
    font-weight: 300;
}
.s5 .content .boxWrap .box.black .inner .desc dl dd {
    font-family: 'Inter Tight';
    line-height: calc(28/18*1em);
}
.s5 .content .boxWrap .box.blue .inner .desc dl dd {
    font-family: 'Pretendard';
    line-height: calc(32/18*1em);
}
.s5 .content .bubbles {
    position: absolute; top: 0; left: 0;
    z-index: 12;
}
.s5 .content .bubbles._1 {
    left: calc(1590/1920*100%);
    top: 30%;
}
.s5 .content .bubbles._2 {
    left: calc(1780/1920*100%);
    top: 80%;
}

@media screen and (max-width: 1600px) {
    .s5 .content .boxWrap .box {
        height: calc(430/27*1em);
    }
}
@media screen and (max-width: 1440px) {
    .s5 .content .wrap {
        width: 85%;
        justify-content: center;
    }
    .s5 .content .titleWrap .smallTxt {
        font-size: clamp(18px, 22/1440*100vw, 22px);
    }
    .s5 .content .titleWrap .bigTxt {
        font-size: clamp(40px, 48/1440*100vw, 48px);
    }
    .s5 .content .boxWrap .box {
        font-size: clamp(24px, 27/1440*100vw, 27px);
    }
}
@media screen and (max-width: 1280px) {
    .s5 .content .wrap {
        width: 92%;
    }
    .s5 .content .titleWrap .bigTxt {
        font-size: clamp(34px, 40/1280*100vw, 40px);
    }
    .s5 .content .boxWrap .box {
        font-size: clamp(18px, 23/1280*100vw, 23px);
        height: calc(400/27*1em);
    }
    .s5 .content .boxWrap .box .inner {
        padding: calc(45/27*1em);
    }
}
@media screen and (max-width: 1024px) {
    .s5 .content {
        padding: 60px 0;
    }
    .s5 .content .titleWrap .smallTxt {
        font-size: clamp(16px, 18/1024*100vw, 18px);
    }
    .s5 .content .titleWrap .bigTxt {
        font-size: clamp(28px, 34/1024*100vw, 34px);
        padding-bottom: calc(30/30*1em);
    }
}
@media screen and (max-width: 820px) {
    .s5 {
        height: auto !important;
    }
    .s5 .fp-tableCell {
        height: auto !important;
    }
    .s5 .content {
        padding: 80px 0;
    }
    .s5 .content .titleWrap .smallTxt {
        font-size: clamp(20px, 22/820*100vw, 22px);
    }
    .s5 .content .titleWrap .bigTxt {
        font-size: clamp(32px, 42/820*100vw, 42px);
    }
    .s5 .content .wrap {
        justify-content: flex-start;
    }
    .s5 .content .boxWrap {
        flex-direction: column;
    }
    .s5 .content .boxWrap .box {
        font-size: clamp(26px, 28/820*100vw, 28px);
    }
    .s5 .content .boxWrap .box.black {
        width: 100%;
    }
    .s5 .content .boxWrap .box.blue {
        flex-grow: 0;
        width: 100%;
    }
    .s5 .content .boxWrap .box .inner .desc {
        gap: calc(50/27*1em);
    }
}
@media screen and (max-width: 500px) {
    .s5 .content {
        padding: 60px 0;
    }
    .s5 .content .titleWrap .smallTxt {
        font-size: clamp(14px, 16/500*100vw, 16px);
    }
    .s5 .content .titleWrap .bigTxt {
        font-size: clamp(26px, 30/500*100vw, 30px);
        word-break: keep-all;
        padding-bottom: calc(40/30*1em);
    }
    .s5 .content .boxWrap {
        gap: 10px;
    }
    .s5 .content .boxWrap .box {
        font-size: clamp(18px, 20/500*100vw, 20px);
        height: calc(440/27*1em);
    }
    .s5 .content .boxWrap .box .inner {
        padding: calc(50/27*1em) calc(40/27*1em);
    }
    .s5 .content .boxWrap .box.black .inner .itemName > span {
        font-size: calc(29/27*1em);
    }
    .s5 .content .boxWrap .box.blue .inner .itemName > span {
        font-size: calc(31/27*1em);
    }
    .s5 .content .boxWrap .box .inner .itemName .btn {
        font-size: clamp(14px, 14/500*100vw, 14px);
    }
    .s5 .content .boxWrap .box .inner .desc {
        gap: calc(40/27*1em);
    }
    .s5 .content .boxWrap .box .inner .desc dl dt {
        font-size: clamp(16px, 18/500*100vw, 18px);
    }
    .s5 .content .boxWrap .box .inner .desc dl dd {
        font-size: clamp(14px, 16/500*100vw, 16px);
    }
}
@media screen and (max-width: 360px) {
    .s5 .content .titleWrap .bigTxt {
        font-size: clamp(24px, 26/360*100vw, 26px);
    }
    .s5 .content .boxWrap .box {
        height: auto;
    }
    .s5 .content .boxWrap .box .inner .desc {
        flex-direction: column; padding-top: calc(80/27*1em);
        gap: 20px;
    }
    .s5 .content .boxWrap .box.blue .inner .desc dl dd br {
        display: none;
    }
    .s5 .content .boxWrap .box.black .inner .itemName > span {
        font-size: calc(27/27*1em);
    }
    .s5 .content .boxWrap .box.blue .inner .itemName > span {
        font-size: calc(29/27*1em);
    }
    .s5 .content .boxWrap .box .inner .itemName .btn {
        font-size: clamp(12px, 14/360*100vw, 14px);
    }
}