#smooth-wrapper {
    overflow: hidden !important;
    position: relative;
}

.page_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.about_vid_pc {
    display: block;
}
.about_vid_mo {
    display: none;
}
@media screen and (max-width: 820px) {
    .page_bg {
        min-width: 500px;
    }
    .about_vid_pc {
        display: none;
    }
    .about_vid_mo {
        display: block;
    }
}

.blob-layer {
    /* position: fixed; */
    position: absolute;
    width: 100%; height: 100vh;
    pointer-events: none;
    z-index: 1;
}
.blob-layer._1 {
    z-index: 1;
    overflow: hidden;
}
.blob {
    position: absolute;
    will-change: transform;
    transform-origin: center center;
}
.blob-inner {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 45% 55% 60% 40% / 40% 50% 50% 60%;
}
.blob-layer .b-black {width: 440px;}
.blob-layer .b-gray {width: 543px; }
.blob-layer .b-red {width: 400px; }

.blob-layer .b-black .blob-inner svg { filter: brightness(1); transform: scale(1.2); }
.blob-layer .b-gray .blob-inner {}
.blob-layer .b-red .blob-inner svg {transform: scale(1.2); }

@media screen and (max-width: 1440px) {
    .blob-layer .b-black .blob-inner svg {transform: scale(1);}    
    .blob-layer .b-gray .blob-inner svg {transform: scale(0.8);}    
    .blob-layer .b-red .blob-inner svg {transform: scale(0.9);}    
}
@media screen and (max-width: 1440px) {
    .blob-layer .b-black .blob-inner svg {transform: scale(0.9);}    
    .blob-layer .b-gray .blob-inner svg {transform: scale(0.7);}    
    .blob-layer .b-red .blob-inner svg {transform: scale(0.8);}    
}
@media screen and (max-width: 1280px) {
    .blob-layer .b-black .blob-inner svg {transform: scale(0.8);}    
    .blob-layer .b-gray .blob-inner svg {transform: scale(0.6);}    
    .blob-layer .b-red .blob-inner svg {transform: scale(0.7);}    
}
@media screen and (max-width: 1024px) {
    .blob-layer .b-black .blob-inner svg {transform: scale(0.7);}    
    .blob-layer .b-gray .blob-inner svg {transform: scale(0.5);}    
    .blob-layer .b-red .blob-inner svg {transform: scale(0.6);}    
}
@media screen and (max-width: 820px) {
    .blob-layer {
        position: fixed;
    }
}

.about {
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.sec_title {
    font-family: 'Pretendard';
    font-weight: 600;
    font-size: 60px;
    line-height: calc(80/60*1em);
    letter-spacing: -0.04em;
    color: #000;
    display: flex; flex-direction: column;
}
.sec_title p {
    /* font-family: 'Noto Sans SC'; */
    font-weight: 400;
    font-size: 24px;
    line-height: calc(36/24*1em);
    letter-spacing: -0.04em;
    color: #000;
}
@media screen and (max-width: 1440px) {
    .sec_title {
        font-size: clamp(40px, 60/1440*100vw, 60px);
    }
}
@media screen and (max-width: 1280px) {
    .sec_title p {
        font-size: clamp(18px, 20/1280*100vw, 20px);
    }
}
@media screen and (max-width: 1024px) {
    .sec_title {
        font-size: clamp(35px, 40/1024*100vw, 40px);
    }
    .sec_title p {
        font-size: clamp(16px, 18/1024*100vw, 18px);
    }
}
@media screen and (max-width: 820px) {
    .sec_title {
        font-size: clamp(35px, 40/820*100vw, 40px);
    }
    .sec_title p {
        font-size: clamp(16px, 18/820*100vw, 18px);
    }
}
@media screen and (max-width: 500px) {
    .sec_title {
        font-size: clamp(32px, 35/500*100vw, 35px);
    }
    .sec_title b br {
        display: none;
    }
}
@media screen and (max-width: 360px) {
    .sec_title {
        font-size: clamp(28px, 30/360*100vw, 30px);
    }
    .sec_title p {
        font-size: clamp(14px, 16/360*100vw, 16px);
    }
}

.s1 {
    height: 100vh;
    margin-bottom: 200px;
}
.s1 .wrap {
    height: 100%;
}
.s1 .inner {
    height: 100%;
    display: flex; flex-direction: column-reverse; justify-content: space-between;
    padding-top: 150px;
    box-sizing: border-box;
}
.s1 .heroTxt {
    display: flex; flex-direction: column;
    font-size: 90px;
    padding-bottom: calc(100/90*1em);
}
.s1 .heroTxt b {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: inherit;
    letter-spacing: -0.04em;
    color: #000;
    padding-bottom: calc(40/90*1em);
}
.s1 .heroTxt p {
    font-family: 'Pretendard';
    font-size: 28px;
    letter-spacing: -0.04em;
    line-height: 1.4;
    color: #000;
}
.s1 .smallTxt {
    font-family: 'Pretendard';
    font-size: 24px;
    letter-spacing: -0.04em;
    line-height: calc(30/18*1em);
    color: #444444;
    text-align: right;
}
@media screen and (max-width: 1440px) {
    .s1 .heroTxt {
        font-size: clamp(70px, 80/1440*100vw, 80px);
    }
}
@media screen and (max-width: 1280px) {
    .s1 .heroTxt {
        font-size: clamp(50px, 60/1280*100vw, 60px);
    }
    .s1 .heroTxt p {
        font-size: clamp(20px, 24/1280*100vw, 24px);
    }
}
@media screen and (max-width: 1024px) {
    .s1 .inner {
        padding-top: 100px;
    }
    .s1 .heroTxt {
        font-size: clamp(45px, 50/1024*100vw, 50px);
    }
    .s1 .heroTxt p {
        font-size: clamp(18px, 20/1024*100vw, 20px);
    }
    .s1 .smallTxt {
        font-size: clamp(18px, 20/1024*100vw, 20px);
    }
}
@media screen and (max-width: 820px) {
    .s1 .heroTxt {
        font-size: clamp(50px, 80/820*100vw, 80px);
    }
}
@media screen and (max-width: 500px) {
    .s1 .heroTxt {
        font-size: clamp(40px, 50/500*100vw, 50px);
    }
    .s1 .smallTxt {
        font-size: clamp(16px, 18/500*100vw, 18px);
    }
}
@media screen and (max-width: 360px) {
    .s1 .smallTxt {
        font-size: clamp(14px, 16/360*100vw, 16px);
    }
    .s1 .smallTxt br {
        display: none;
    }
    .s1 .heroTxt p {
        font-size: clamp(16px, 18/360*100vw, 18px);
    }
}


.s2_wrap {
    height: 170vh;
    margin-bottom: 200px;
}
.s2 {
    height: 100vh;
}
.s2 .wrap {
    height: 100%;
}
.s2 .inner {
    height: 100%;
    display: flex; flex-direction: column;
    padding-top: 120px;
    box-sizing: border-box;
}
.s2 .inner .sec_title {
    text-align: center;
}
.s2 .inner .txt {
    flex-grow: 1;
    position: relative;
}
.s2 .inner .txt p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Pretendard';
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.04em;
    line-height: 1.5;
    /* color: #fff; */
}
.s2 .inner .txt .black_txt {
    transform: translate(-180%, 0%);
}
.s2 .inner .txt .gray_txt {
    transform: translate(40%, -400%);
}
.s2 .inner .txt .red_txt {
    transform: translate(20%, 320%);
}
@media screen and (max-width: 1600px) {
    .s2 .inner {
        padding-top: 110px;
    }
    .s2 .inner .txt .black_txt {
        transform: translate(-230%, 0%);
    }
}
@media screen and (max-width: 1440px) {
    .s2 .inner .txt .black_txt {
        transform: translate(-210%, 0%);
    }
    .s2 .inner .txt .gray_txt {
        transform: translate(100%, -400%);
    }
    .s2 .inner .txt .red_txt {
        transform: translate(50%, 320%);
    }
}
@media screen and (max-width: 1280px) {
    .s2 .inner {
        padding-top: 80px;
    }
    .s2 .inner .txt p {
        font-size: clamp(18px, 20/1280*100vw, 20px);
    }
    .s2 .inner .txt .black_txt {
        transform: translate(-190%, 0%);
    }
    .s2 .inner .txt .gray_txt {
        transform: translate(70%, -400%);
    }
    .s2 .inner .txt .red_txt {
        transform: translate(50%, 320%);
    }
}
@media screen and (max-width: 1024px) {
    .s2 .inner {
        padding-top: 50px;
    }
    .s2 .inner .txt p {
        font-size: clamp(16px, 18/1024*100vw, 18px);
    }
    .s2 .inner .txt .black_txt {
        transform: translate(-170%, 130%);
    }
    .s2 .inner .txt .gray_txt {
        transform: translate(70%, -290%);
    }
    .s2 .inner .txt .red_txt {
        transform: translate(50%, 210%);
    }
}
@media screen and (max-width: 820px) {
    .s2 .inner {
        padding-top: 12vh;
        padding-bottom: 10vh;
        justify-content: space-between;
    }
    .s2 .inner .txt {
        flex-grow: 0;
        align-items: center;
        text-align: center;
    }
    .s2 .inner .txt > * {
        position: relative !important;
        transform: translate(0, 0) !important;
        left: 0% !important;
        top: 0% !important;
    }
    .s2 .inner .txt p {
        color: #5f5f5f;
        font-size: clamp(16px, 22/820*100vw, 22px);
    }
    .s2 .inner .txt p + p {
        margin-top: calc(30/20*1em);
    }
}


.s3_wrap {
    height: 170vh;
    margin-bottom: 100px;
}
.s3 {
    height: 100vh;
}
.s3 .wrap {
    height: 100%;
}
.s3 .inner {
    height: 100%;
    display: flex; flex-direction: column;
    padding-top: 150px;
    box-sizing: border-box;
}
.s3 .inner .sec_title b {
    text-align: right;
    padding-bottom: calc(30/60*1em);
}
.s3 .inner .sec_title p {
    text-align: right;
}
@media screen and (max-width: 820px) {
    .s3 .inner {
        padding-bottom: 60px;
        justify-content: flex-end;
    }
}
@media screen and (max-width: 360px) {
    .s3 .inner {
        padding-top: 100px;
        padding-bottom: 50px;
    }
    .sec_title p br {
        display: none;
    }
}


.s4_wrap {
    height: 250vh;
    margin-bottom: 100px;
}
.s4 {
    height: 100vh;
}
.s4 .wrap {
    height: 100%;
}
.s4 .inner {
    height: 100%;
    position: relative;
    display: flex; align-items: center;
}
.s4 .flex {
    width: 100%; max-width: calc(1100/1920*100vw); margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
}
.s4 .flex dl {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    color: #fff;
    opacity: 0.9;
}
.s4 .flex dl dt {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.04em;
    padding-bottom: calc(10/18*1em);
}
.s4 .flex dl dd {
    font-family: 'Pretendard';
    font-size: 60px;
    letter-spacing: -0.04em;
}
@media screen and (max-width: 1440px) {
    .s4 .flex dl dd {
        font-size: clamp(55px, 60/1440*100vw, 60px);
    }
}
@media screen and (max-width: 1280px) {
    .s4 .flex dl dd {
        font-size: clamp(45px, 50/1280*100vw, 50px);
    }
}
@media screen and (max-width: 1024px) {
    .s4 .flex dl dd {
        font-size: clamp(35px, 40/1024*100vw, 40px);
    }   
    .s4 .flex dl dt {
        font-size: clamp(14px, 16/1024*100vw, 16px);
    }
}
@media screen and (max-width: 820px) {
    .s4 .flex {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        flex-direction: column;
        align-items: flex-start;
    }
    .s4 .flex dl {
        padding: 10vh;
    }
    .s4 .flex .red {
        align-self: flex-end;
    }
    .s4 .flex dl dd {
        font-size: clamp(50px, 70/820*100vw, 70px);
        font-weight: 600;
    }   
    .s4 .flex dl dt {
        font-size: clamp(18px, 20/820*100vw, 20px);
    }
}
@media screen and (max-width: 500px) {
    .s4 .flex {
        /* flex-direction: column; */
        /* height: 70%; */
    }
    .s4 .flex dl {
        justify-content: center;
    }
}
@media screen and (max-width: 360px) {
    .s4 .flex dl {
        padding: 7vh;
    }
    .s4 .flex dl dd {
        font-size: clamp(30px, 35/360*100vw, 35px);
    }
    .s4 .flex dl dt {
        font-size: clamp(14px, 16/360*100vw, 16px);
    }
}


.s5_wrap {
    height: 170vh;
}
.s5 {
    height: 100vh;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
}
.s5 .txt {
    font-family: 'Pretendard';
    font-weight: 600;
    font-size: 80px;
    letter-spacing: -0.04em;
    color: #fff;
}
@media screen and (max-width: 1440px) {
    .s5 .txt {
        font-size: clamp(60px, 80/1280*100vw, 80px);
    }
}
@media screen and (max-width: 1280px) {
    .s5 .txt {
        font-size: clamp(55px, 60/1280*100vw, 60px);
    }
}
@media screen and (max-width: 1024px) {
    .s5 .txt {
        font-size: clamp(45px, 50/1024*100vw, 50px);
    }
}
@media screen and (max-width: 500px) {
    .s5 .txt {
        font-size: clamp(35px, 40/500*100vw, 40px);
    }
}
@media screen and (max-width: 360px) {
    .s5 .txt {
        font-size: clamp(30px, 35/360*100vw, 35px);
    }
}


.s6_wrap {
    height: 170vh;
}
.s6 {
    height: 100vh;
}
.s6 .wrap {
    height: 100%;
}
.s6 .inner {
    height: 100%;
    display: flex;
    padding: 150px 0 90px;
    box-sizing: border-box;
    overflow: hidden;
}
.s6 .inner > div {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    width: 50%;
}
.s6 .inner > ._1 {
    justify-content: flex-end;
}
.s6 .inner > div dl {
    display: flex; flex-direction: column;
    font-size: 30px;
    padding-left: calc(50/30*1em);
    box-sizing: border-box;
    width: 360px;
}
.s6 .inner > div dl + dl {
    margin-top: calc(90/30*1em);
}
.s6 .inner > div dl dt {
    display: flex; flex-direction: column;
}
.s6 .inner > div dl dt span {
    font-family: 'Pretendard';
    font-size: 16px;
    letter-spacing: -0.04em;
    color: #fff;
    opacity: .7;
}
.s6 .inner > div dl dt b {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: inherit;
    letter-spacing: -0.04em;
    color: #fff;
    position: relative;
    padding-top: calc(20/30*1em);
    padding-bottom: calc(20/30*1em);
    margin-bottom: calc(20/30*1em);
}
.s6 .inner > div dl dt b::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 20px;
    height: 2px;
    background-color: #fff;
}
.s6 .inner > div dl dd {
    font-family: 'Pretendard';
    font-size: 18px;
    line-height: calc(26/18*1em);
    letter-spacing: -0.04em;
    color: #fff;
}
@media screen and (max-width: 1280px) {
    .s6 .inner {
        padding-top: 80px;
        padding-bottom: 50px;
    }
    .s6 .inner > div dl {
        font-size: clamp(23px, 30/1280*100vw, 30px);
    }
    .s6 .inner > div dl + dl {
        margin-top: calc(50/30*1em);
    }
    .s6 .inner > div dl dd {
        font-size: clamp(14px, 16/1280*100vw, 16px);
    }
}
@media screen and (max-width: 820px) {
    .s6 .inner {
        flex-direction: column-reverse;
        padding-top: 110px;
        padding-bottom: 60px;
    }
    .s6 .inner > div {
        width: 100%;
    }
    .s6 .inner > ._1 {
        align-items: flex-start;
    }
    .s6 .inner > ._2 {
        align-self: flex-end;
        align-items: flex-end;
    }
    .s6 .inner > div dl {
        width: calc(360/28*1em);
        min-width: 310px;
        font-size: clamp(20px, 28/820*100vw, 28px);
    }
    .s6 .inner > div dl dd {
        font-size: clamp(16px, 18/820*100vw, 18px);
    }
}
@media screen and (max-width: 500px) {
    .s6 .inner {
        padding-top: 90px;
        padding-bottom: 55px;
    }
    .s6 .inner > div {
        flex: none;
    }
    .s6 .inner > ._2 {
        align-self: flex-start;
        align-items: flex-start;
        justify-content: flex-end;
    }
    .s6 .inner > div dl {
        padding-left: 0;
        width: 100%;
        margin-bottom: calc(35/20*1em);
        font-size: clamp(18px, 20/500*100vw, 20px);
    }
    .s6 .inner > div dl dd {
        font-size: clamp(16px, 16/500*100vw, 16px);
    }
    .s6 .inner > ._1 dl:last-child {
        margin-bottom: 0;
    }
    .s6 .inner > div dl + dl {
        margin-top: 0;
    }
}
@media screen and (max-width: 360px) {
    .s6 .inner > div dl dd {
        font-size: clamp(14px, 16/360*100vw, 16px);
    }
}


.s7 {
    box-sizing: border-box;
    padding-top: 5.208vw;
    padding-bottom: 5.208vw;
    height: 100vh;
    background: #f8f8f8;
}
.s7 .wrap {
    height: 100%;
}
.s7 .inner {
    box-sizing: border-box; height: 100%;
    display: flex; justify-content: center; align-items: center;
}
.s7 .inner .txt {
    display: flex; flex-direction: column;
    width: 40%;
    padding-left: calc(50/16*1em);
    box-sizing: border-box;
    font-size: clamp(16px, 20/1440*100vw, 20px);
}
.s7 .inner .txt p {
    font-family: 'Pretendard';
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #000;
    line-height: 1.33em;
}
.s7 .inner .linkBtn {
    margin-top: calc(20/16*1em);
}
.s7 .inner .linkBtn a {
    display: inline-flex;
    align-items: center;
    padding: 13px 30px;
    background: #c41b24;
    font-size: var(--font-size-18);
    font-weight: 500;
    line-height: 1.33em;
    letter-spacing: 0;
    color: #fff;
}
.s7 .inner .linkBtn a::after {
    content: '';
    margin-left: 36px;
    width: 29px;
    height: 9px;
    background: url('/asset/img/sub/arrow-right.svg') no-repeat center center / contain;
}
@media screen and (max-width: 1280px) {
    .s7 {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .s7 .inner .img {
        padding-top: 5%;
    }
}
@media screen and (max-width: 820px) {
    .s7 .inner {
        flex-direction: column;
    }
    .s7 .inner .txt {
        padding-left: 0;
        width: 100%;
        align-items: center;
    }
}

.about-sec{
    min-height: 100svh; /* 섹션별 스냅 기준 명확 */
}