@charset "utf-8";
/* font 불러오기 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;800;900&display=swap');


:root {
    --menu-background-color : rgba(255, 255, 255, 0.95);
    --font-point-1 : rgba(245, 216, 160, 1);
    --font-point-2 : rgba(194, 158, 89, 1);
    --font-serif : 'Noto Serif KR', serif;
    color-scheme: only light;
}

/* CSS Document */
* {
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}
html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;
    background: #fff !important;

}

/* 흰 배경 SECTION */
.section2,
.section3,
.section4 {
    background-color: #fff;
}

/* 다크모드 사용 중이어도 사이트는 화이트 유지 */
@media (prefers-color-scheme: dark) {

    :root {
        color-scheme: only light;
    }

    html,
    body,
    .section2,
    .section3,
    .section4 {
        background-color: #fff !important;
    }

}


/* html은 스크롤하지 않음 */
html {
    font-size: 16px;
    margin: 0;
    padding: 0;

    width: 100%;

    overflow-x: hidden;

    scroll-behavior: auto;
    scroll-snap-type: none;
    background: #fff !important;
}

body {
    margin: 0;
    padding: 0;

    width: 100%;

    overflow: visible;
    overflow-x: hidden;
    overflow-anchor: none;

    font-size: 1rem;
    background: #fff !important;
}


/* body 하나만 스크롤 담당 */
body#container_main {
    margin: 0;
    padding: 0;

    width: 100%;

    /* 중요 */
    height: auto;

    overflow-x: hidden;
    overflow-y: visible;
}


/* CSS snap은 JS와 같이 사용하지 않음 */
.snap-section {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
}


/* 스크롤바 */
body#container_main::-webkit-scrollbar {
    width: 5px;
    background: transparent;
}

body#container_main::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.5);
    border-radius: 3px;
}



/* img{border: none; display:block; width:100%; height: auto; position:absolute; left:50%; top:0; transform:translateX(-50%);} */
main img,
.hd-sc-2 img,
#ft img {
    display: block;
    width: 100%;
    height: auto;
}
ul, ol {
    list-style: none;
    margin:0;
    padding:0;
}

ul li, ol li {
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}
div {
    clear:both;
} 

span.blank-100 {
    padding: 1rem;
}



.font-point-1{
    color: var(--font-point-1);
    font-weight: bold;
}

.font-point-2{
    color: var(--font-point-2);
    font-weight: 600;
}

/* 메인 */

#hd {
    background: linear-gradient(to bottom, rgba(26,37,8,1), rgba(21, 28, 17, 1));
    color: #fff;
}


#hd > .hd-sc-1 {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

#hd > .hd-sc-1 > .logo {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    z-index: 100;
}

#hd > .hd-sc-1 > .logo img {
    width: 100%;
    height: auto;
    display: block;
}

/* 슬라이드 한 장 */
#hd > .hd-sc-1 .bg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 1s ease,
        visibility 1s ease;
    
     /* 자식 레이어를 이 안에서만 관리 */
    isolation: isolate;

    background: linear-gradient(
        to bottom,
        rgba(26,37,8,1),
        rgba(21,28,17,1)
    );
}


#hd > .hd-sc-1 .bg.active {
    opacity: 1;
    visibility: visible;
}


/* 뒤쪽 확장용 블러 이미지 */
#hd > .hd-sc-1 .bg-blur {
    display: none;

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    z-index: 0;

    pointer-events: none;
}


/* 실제 이미지 */
#hd > .hd-sc-1 .bg-img {
    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 100%;
    height: 100%;

    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;

    z-index: 1;
}


/* 텍스트는 이미지 위 */
/* 텍스트 */
#hd > .hd-sc-1 .m-text {
    position: absolute;

    top: 13rem;
    left: 0;

    width: 100%;
    z-index: 5;

    font-size: clamp(2.8em, 2.75vw, 3.3em);
    line-height: 1.1;

    font-family: 'Noto Serif KR', serif;
    font-weight: 700;
    text-align: center;

    /* 기본은 숨김 */
    display: block !important;
    opacity: 0;
    visibility: hidden;

    transform: translateY(20px);

    transition:
        opacity .8s ease,
        transform .8s ease,
        visibility .8s ease;

    pointer-events: none;
}


/* 현재 보여줄 텍스트 */
#hd > .hd-sc-1 .m-text.text-active {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

@keyframes mainTextFade {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


#hd > .hd-sc-1 .m-text > h1 {
    font-size: 1.3em;
    font-family: 'Noto Serif KR', serif;
    font-weight: 800;

    margin: 0;
    padding: 0;
}


#hd > .hd-sc-1 .m-text > p {
    font-size: .5em;
    line-height: 1.1;

    font-family: 'Noto Serif KR', serif;
    font-weight: 600;

    margin: 1.5rem 0 0 0;
    padding: 0;
}

 

/* 화살표 버튼 */
#hd > .hd-sc-1 .slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    z-index: 30;

    width: 60px;
    height: 80px;

    padding: 0;
    border: 0;
    background: transparent;

    cursor: pointer;

    opacity: .2;
    transition: opacity .3s ease;
}


/* 마우스 오버 */
#hd > .hd-sc-1 .slide-arrow:hover {
    opacity: 1;
}


/* 실제 화살표 */
#hd > .hd-sc-1 .slide-arrow::before {
    content: '';

    position: absolute;
    top: 50%;
    left: 50%;

    width: 120px;
    height: 120px;

    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}


/* 이전 화살표 */
#hd > .hd-sc-1 .slide-arrow.prev {
    /* left: max(3%, calc(50% - 780px)); */
    left: 80px;
}

#hd > .hd-sc-1 .slide-arrow.prev::before {
    transform:
        translate(-35%, -50%)
        rotate(-135deg);
}


/* 다음 화살표 */
#hd > .hd-sc-1 .slide-arrow.next {
    /* right: max(3%, calc(50% - 780px)); */
    right: 80px;
}

#hd > .hd-sc-1 .slide-arrow.next::before {
    transform:
        translate(-65%, -50%)
        rotate(45deg);
}



/* 동그라미 */
#hd > .hd-sc-1 .slide-dots {
    position: absolute;

    left: 50%;
    bottom: 6%;

    transform: translateX(-50%);

    z-index: 30;

    display: flex;
    align-items: center;

    gap: 22px;
}


#hd > .hd-sc-1 .dot {
    display: block;

    width: 14px;
    height: 14px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255,255,255,.3);

    cursor: pointer;

    transition:
        background-color .3s ease,
        transform .3s ease;
}


#hd > .hd-sc-1 .dot.active {
    background: #fff;

    transform: scale(1.1);
}



/* section 2 */
.hd-sc-2 {
    width: 100%;
    max-width: 1920px;

    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(4rem, 5vw, 7rem) 0;

    box-sizing: border-box;
    margin: 0 auto;
    
}

.hd-sc-2-txt {
   text-align: center;
    width: 100%;
    margin-bottom: clamp(2rem, 2.5vw, 3.5rem);
}

.hd-sc-2-txt > h1 {
    font-size: clamp(2.8em, 2.75vw, 3.3em);
    line-height: 1.1;
    font-family: var(--font-serif);
}
.hd-sc-2-txt > h1 > .h1-sub {
    font-family: var(--font-serif);
    font-size: clamp(1.125rem, 1.5625vw, 1.875rem);
    font-weight: 200;
}

.hd-sc-2-mv-caption {
    font-size: clamp(1rem, 1.0417vw, 1.25rem);
    font-weight: normal;
    width: 75%;
    max-width: 1440px;

    margin: .8rem auto 0;
    padding-left: 1rem;
}

/* =========================================================
   COMPANY INTRO MOVIE
========================================================= */

#hd > .hd-sc-2 > .hd-sc-2-movie {
    position: relative;

    width: 100%;

    display: flex column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}


/* 영상 최대 영역 */

#hd > .hd-sc-2 > .hd-sc-2-movie .company-video-wrap {
     position: relative;

    /*
       1920 화면에서 약 1440px
       현재 캡처와 비슷한 비율
    */
    width: 75%;

    max-width: 1440px;

    aspect-ratio: 16 / 9;

    margin: 0 auto;

    background: #000;

    overflow: hidden;
}


/* 실제 영상 */

#hd > .hd-sc-2 > .hd-sc-2-movie .company-video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    margin: 0;
    padding: 0;
}




/* section 2 */
    .section2 {
        width: 100%;

        /* padding까지 100vh 안에 포함 */
        box-sizing: border-box;

        margin: 0;
        padding: 5rem 0;
        
        position: relative;
    }

    .section2 > .sc-2-con {
        width: 88%;
        max-width: 1920px;
        margin: 0 auto;
        position: relative;
    }

    .section2 > .sc-2-con > .sc-2-txt {
        width: 70%;
        margin: 0 auto;
        padding-bottom: 5rem;
    }

    .section2 > .sc-2-con > .sc-2-txt > h1 {
        font-family: 'Noto Serif KR', serif;
        line-height: 1.3;
        font-size: clamp(2.4rem, 2.6vw, 2.9em);
        margin: 0 0 3rem 0;
        color: #000;
        text-align: center;
        width: 100%;
        font-weight: 700;
    }

    .section2 > .sc-2-con > .sc-2-txt > p {
        color: #999;
        font-size: clamp(1rem, 1.3vw, 1.5rem);
        line-height: 1.5;
        text-align: center;
        width: 85%;
        margin: 0 auto;
    }

    .section2 > .sc-2-con > .sc-2-ul {
        width: 90%;

        margin: 0 auto;
        padding: 0;

        display: flex;
        align-items: stretch;
        justify-content: space-between;

        gap: clamp(3rem, 6vw, 7rem);

        list-style: none;

        box-sizing: border-box;
    }


    /* =========================================================
        LEFT / RIGHT 공통
    ========================================================= */

        .section2 > .sc-2-con > .sc-2-ul > li {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


    /* =========================================================
        LEFT IMAGE
    ========================================================= */

        .section2 > .sc-2-con > .sc-2-ul > li:first-child {
            width: 46%;

            display: flex;
            align-items: stretch;
        }


        .section2 > .sc-2-con > .sc-2-ul > li:first-child > img {
            display: block;

            width: 100%;
            height: 100%;

            object-fit: cover;
            object-position: center;

            margin: 0;
            padding: 0;
        }


    /* =========================================================
        RIGHT TEXT
    ========================================================= */

        .section2 > .sc-2-con > .sc-2-ul > li:last-child {
            width: 50%;

            display: flex;
            flex-direction: column;

            /* justify-content: space-between; */

            padding:
                clamp(0.5rem, 1vw, 1.5rem)
                0
                0;

            box-sizing: border-box;
        }


    /* =========================================================
    TITLE
    ========================================================= */

        .section2 > .sc-2-con > .sc-2-ul > li:last-child h2 {
            margin:
                0
                0
                clamp(2rem, 3vw, 3.5rem);

            padding: 0;

            font-size: clamp(1.8rem, 2.1vw, 2.6rem);
            line-height: 1.2;
            font-weight: 600;
            color: #000;
        }


    /* =========================================================
        BODY TEXT
    ========================================================= */

        .section2 > .sc-2-con > .sc-2-ul > li:last-child p {
            margin:
                0
                0
                clamp(2rem, 3vw, 3.5rem);

            padding: 0;

            font-size: clamp(1.1rem, 1.3vw, 1.4rem);
            line-height: 1.5;
            color: #777;
        }


        /* 마지막 본문 */

        .section2 > .sc-2-con > .sc-2-ul > li:last-child p:last-child {
            margin-bottom: 0;
        }


    /* =========================================================
        SUB TEXT
    ========================================================= */

        .section2 .sub-txt {
            width: 100%;

            margin-top: auto;

            padding-top: clamp(2rem, 3vw, 4rem);

            display: flex;
            align-items: flex-start;

            gap: 0.5rem;
            box-sizing: border-box;
        }


        /* 작은 삼각형 */

        .section2 .sub-txt > .arrow {
            flex: 0 0 auto;
            margin-top: 0.05em;
            font-size: clamp(0.7rem, 0.8vw, 0.9rem);
            line-height: 1.2;
            color: #999;
        }


        /* 캡션 */

        .section2 .sub-txt > .text {
            width: 100%;
            max-width: 34rem;
            font-size: clamp(0.75rem, 0.9vw, 1rem);
            line-height: 1.2;
            color: #999;
        }

    /* =========================================================
        SECTION 2 - SECOND ROW
        TEXT LEFT / IMAGE RIGHT
        기존 첫 번째 ROW 스타일은 그대로 유지
    ========================================================= */


        /* 두 번째 영역 위쪽 간격 */
        .section2 > .sc-2-con > .sc-2-ul-reverse {
            margin-top: clamp(6rem, 8vw, 10rem);
            position: relative;
            margin-bottom: clamp(4rem, 8.33vw, 10rem);
        }


    /* =========================================================
        SECOND ROW - LEFT TEXT
    ========================================================= */


        .section2 > .sc-2-con > .sc-2-ul-reverse > li:first-child {
            width: 46%;

            display: flex;
            flex-direction: column;

            /* 위에서부터 순서대로 쌓기 */
            justify-content: flex-start;

            align-items: stretch;

            padding:
                clamp(0.5rem, 1vw, 1.5rem)
                0
                0;

            box-sizing: border-box;
        }


        /* TITLE */

        .section2 > .sc-2-con > .sc-2-ul-reverse > li:first-child h2 {
            margin:
                0
                0
                clamp(2rem, 3vw, 3.5rem);

            padding: 0;

            font-size: clamp(1.8rem, 2.1vw, 2.6rem);
            line-height: 1.2;
            font-weight: 600;

            color: #000;
        }


        /* BODY TEXT */

        .section2 > .sc-2-con > .sc-2-ul-reverse > li:first-child p {
            margin:
                0
                0
                clamp(2rem, 2.5vw, 3rem);

            padding: 0;

            font-size: clamp(1.1rem, 1.3vw, 1.4rem);
            line-height: 1.5;

            color: #777;
        }


        .section2 > .sc-2-con > .sc-2-ul-reverse > li:first-child p:last-child {
            margin-bottom: 0;
        }


    /* =========================================================
        SECOND ROW - RIGHT IMAGE
    ========================================================= */

        .section2 > .sc-2-con > .sc-2-ul-reverse > li:last-child {
            width: 50%;

            padding: 0;
            box-sizing: border-box;
            position:relative;
        }


        .section2 > .sc-2-con > .sc-2-ul-reverse > li:last-child > img {
            display: block;

            width: 100%;
            height: 100%;

            margin: 0;
            padding: 0;

            object-fit: cover;
            object-position: center;
        }


    /* =========================================================
        SECOND ROW CAPTION
    ========================================================= */

        .section2 > .sc-2-con > .sc-2-ul-reverse .sub-txt {
            width: 100%;

            margin-top: clamp(10%, 13%, 15%);

            /* 본문 아래 적당한 간격 */
            padding-top: clamp(1.5rem, 2vw, 2.5rem);

            display: flex;
            flex-direction: row;

            align-items: flex-start;
            justify-content: flex-start;

            gap: 0.5rem;

            box-sizing: border-box;
        }


        .section2 > .sc-2-con > .sc-2-ul-reverse .sub-txt > .text {
            width: auto;
            max-width: 34rem;
        }


        .section2 > .sc-2-con > .sc-2-ul-reverse .sub-txt > .arrow {
            flex: 0 0 auto;
        }



    /* =========================================================
        오른쪽 이미지 영역
    ========================================================= */

        .section2 > .sc-2-con > .sc-2-ul-reverse > .sc-2-img {

            position: relative;

            /*
            기존 overflow:hidden 해제
            한 마리 새가 사진 밖으로 나올 수 있도록
            */
            overflow: visible;
        }


        /* 메인 사진 */

        .section2 .sc-2-ul-reverse .sc-2-img > .sc-2-main-img {

            display: block;

            width: 100%;
            height: 100%;

            object-fit: cover;
            object-position: center;

            position: relative;

            z-index: 1;
        }


    /* =========================================================
        사진 위 한 마리 새
        sc2-img-03.png
    ========================================================= */

        .section2 .sc-2-ul-reverse .sc-2-img > .sc-2-birds {

            position: absolute;

            /*
            원본 시안처럼
            오른쪽 아래 모서리에 걸치게
            */
            right: clamp(-4%, -2.5vw, -1%);
            bottom: clamp(-13%, -7vw, -5%);
            width: clamp(10rem, 16.67vw, 20rem);

            z-index: 20;

            pointer-events: none;
        }


        .section2 .sc-2-ul-reverse .sc-2-img > .sc-2-birds > img {

            display: block;

            width: 100%;
            height: auto;

            margin: 0;
            padding: 0;
        }

    /* =========================================================
        SECTION 하단 여러 마리 새
        sc2-img-02.png
    ========================================================= */

        .section2 > .sc-2-birds-1 {

            position: absolute;

            /*
            가운데 정렬하지 않음.
            원본 시안처럼 왼쪽에서 시작
            */
            left: 0;
            bottom: 1%;

            /*
            100%가 아니라 약 70%
            → 새 크기가 작아지고
            → 오른쪽 사진을 침범하지 않음
            */
            width: 70%;

            max-width: 1700px;

            z-index: 10;

            pointer-events: none;
        }


        .section2 > .sc-2-birds-1 > img {

            display: block;

            width: 100%;
            height: auto;

            margin: 0;
            padding: 0;

            object-fit: contain;
        }




/* section 3 */

    .section3 {
        width: 100%;

        height: 100vh;
        height: 100dvh;

        box-sizing: border-box;

        display: flex;
        flex-direction: column;

        align-items: stretch;
        justify-content: flex-start;

        margin: 0;

        /* 위쪽만 여백, 아래쪽은 0 */
        padding: 5rem 0 0;

        position: relative;

        overflow: hidden;
    }

    .section3 > .sc-3-con {
        width: 88%;
        max-width: 1920px;

        margin: 0 auto;

        flex: 0 0 auto;

        position: relative;
    }

    .section3 > .sc-3-con  > h1 {
        font-family: 'Noto Serif KR', serif;
        line-height: 1.3;
        font-size: clamp(2.4rem, 2.6vw, 2.9em);
        margin: 0 0 3rem 0;
        color: #000;
        text-align: center;
        width: 100%;
        font-weight: 800;
    }

    .section3 > .sc-3-con > p {
        color: #999;
        font-size: clamp(1rem, 1.3vw, 1.5rem);
        line-height: 1.5;
        text-align: center;
        width: 85%;
        margin: 3% auto;
    }

    .section3 > .sc-3-con > p:last-child {
        margin: 0 auto;
    }

    .section3 > .sc-3-ul {
        width: 100%;

        margin-top: clamp(3rem, 5vw, 6rem);
        margin-bottom: 0;

        padding: 0;

        display: flex;
        flex-direction: row;

        align-items: stretch;
        justify-content: space-between;

        gap: clamp(1rem, 3vw, 2rem);

        list-style: none;

        box-sizing: border-box;

        /* 핵심 */
        flex: 1 1 0;
        min-height: 0;
    }

    /* =========================================================
    SECTION 3 IMAGE
    DESKTOP
    ========================================================= */

        .section3 > .sc-3-ul > li {
            width: 50%;
            height: 100%;

            margin: 0;
            padding: 0;

            overflow: hidden;

            box-sizing: border-box;
        }


        .section3 > .sc-3-ul > li > img {
            display: block;

            width: 100%;
            height: 100%;

            object-fit: cover;
            object-position: center;

            margin: 0;
            padding: 0;
        }



/* section 4 */

    .section4 {
        width: 100%;

        height: 100vh;
        height: 100dvh;

        box-sizing: border-box;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: space-between;

        gap: 0;

        margin: 0;
        padding: 5rem 0 0;

        position: relative;

        overflow: hidden;
        text-align: center;
    }


    /* =========================================================
    상단 TEXT
    ========================================================= */

    .section4 > .sc-4-con {
        width: 88%;
        max-width: 1920px;

        margin: 0 auto;
        padding: 0;

        flex: 0 0 auto;

        position: relative;
    }


    /* 제목 */

    .section4 > .sc-4-con > h1 {
        font-family: 'Noto Serif KR', serif;

        line-height: 1.3;

        font-size: clamp(2.4rem, 2.6vw, 2.9em);

        margin: 0 0 3rem 0;
        padding: 0;

        color: #000;

        text-align: center;

        width: 100%;

        font-weight: 800;
    }


    /* 본문 */

    .section4 > .sc-4-con > p {
        color: #999;
        font-size: clamp(1rem, 1.3vw, 1.5rem);
        line-height: 1.5;
        text-align: center;
        width: 70%;
        margin: 3% auto;
    }


    /* 마지막 본문 아래 여백 완전 제거 */

    .section4 > .sc-4-con > p:last-child {
        margin-bottom: 0;
    }


    /* =========================================================
    IMAGE
    ========================================================= */

        .section4 > .sc4-img {
            width: 50%;
            max-width: 1920px;

            /* 위 여백 완전 제거 */
            margin: 0 auto 2%;
            padding: 0;

            flex: 0 0 auto;

            position: relative;

            box-sizing: border-box;
        }


        /* 이미지 자체에서 생기는 inline 여백 제거 */

        .section4 > .sc4-img > img {
            display: block;

            width: 100%;
            height: auto;

            margin: 0;
            padding: 0;
        }


/* section 5 */
    .section5 {
        width: 100%;


        /* padding까지 100vh 안에 포함 */
        box-sizing: border-box;

        margin: 0;
        padding: 5rem 0;

        background:
            url('/img/7_ces/sc-5/sc5-img-01.jpg')
            top center / 100% auto
            no-repeat rgba(6, 33, 74, 1);

        display: flex;
        flex-direction: column;
        align-items: center;

        position: relative;

        color: #fff;
    }

    .section5 > .sc5-con-1, .section5 > .sc5-con-2 {
        width: 70%;
        max-width: 1920px;
    }

    .section5 > .sc5-con-1 {
        margin-bottom: 10%;
    }

    .section5 > .sc5-con-2 {
        margin-bottom: 4%;
    }

    .section5 > .sc5-con-2 > img {
        display: block;

        width: 100%;
        height: auto;

        margin: 0;
        padding: 0;

    }

    .section5 > .sc5-con-1 > .sc5-con1-txt > h1 {
        font-family: 'Noto Serif KR', serif;

        line-height: 1.3;
        font-size: clamp(2.4rem, 2.6vw, 2.9em);

        margin: 0 0 3rem 0;
        padding: 0;

        color: #fff;
        text-align: center;
        width: 100%;
        font-weight: 800;
    }


    /* 본문 */
    .section5 > .sc5-con-1 > .sc5-con1-txt > ul > li > p {
        font-size: clamp(1rem, 1.3vw, 1.5rem);
        line-height: 1.7;
        margin: 5% auto;
    }

    .section5 > .sc5-con-1 > .sc5-con1-txt > ul > li > p:first-child {
        margin: 2% auto;
    }


    /* 마지막 본문 아래 여백 완전 제거 */
    .section5 > .sc5-con-1 > .sc5-con1-txt p:last-child {
        margin-bottom: 0;
    }

    .section5 > .sc5-con-1 > .sc5-con1-txt > ul {    
        margin-top: clamp(3rem, 5vw, 6rem);
        margin-bottom: 0;

        padding: 0;

        display: flex;
        flex-direction: row;

        align-items: stretch;
        justify-content: space-between;

        gap: clamp(5rem, 4vw, 10rem);

        list-style: none;

        box-sizing: border-box;

        /* 핵심 */
        flex: 1 1 0;
        min-height: 0;
    }

    .section5 > .sc5-con-1 > .sc5-con1-txt > ul > li {
        box-sizing: border-box;
    }

    .section5 > .sc5-con-1 > .sc5-con1-txt > ul > li:first-child {
        flex: 6;
    }

    .section5 > .sc5-con-1 > .sc5-con1-txt > ul > li:last-child {
        flex: 4;
    }

    .section5 > .sc5-con-1 > .sc5-con1-txt > ul > li > div.sc5-sub {
        color: #9191ac;
        font-size: clamp(1rem, 1.083vw, 1.3rem);
        padding-left: clamp(2rem, 5%, 6rem);
        margin-top: clamp(1rem, 2%, 3rem);
    }

    .bp-sc5-txt1 {
        display: none;
    }

    .bp-sc5-txt {
        display: block;
    }



/* section 6 */

    .section6 {
        width: 100%;


        /* padding까지 100vh 안에 포함 */
        box-sizing: border-box;

        margin: 0;
        padding: 5rem 0;

        background:
            url('/img/7_ces/sc-6/sc6-img-01.jpg')
            top center / cover
            no-repeat rgba(1, 27, 22, 1);

        display: flex;
        flex-direction: column;
        align-items: center;

        position: relative;

        color: #fff;
    }

    .section6 > .sc6-con-1, .section6 > .sc6-con-2 {
        width:80%;
        max-width: 1920px;

        margin-left: auto;
        margin-right: auto;

        box-sizing: border-box;
    }

    .section6 > .sc6-con-1 {
        text-align: right;
        margin-top: 13rem;
    }

    .section6 > .sc6-con-1 > h1 {
        font-family: 'Noto Serif KR', serif;

        line-height: 1.2;
        font-size: clamp(2.8em, 3.2vw, 3.8em);
        margin: 4rem 0 0 0;
    }

    .section6 > .sc6-con-1 > p.sc6-sub-tit {
        font-size: clamp(1.6rem, 1.8vw, 2.17rem);
        margin-top: clamp(2.5rem, 18%, 9rem);
        line-height: .5;
    }

    .section6 > .sc6-con-1 > p.sc6-sub-con {
        font-size: clamp(1.6rem, 1.8vw, 2.17rem);
        line-height: 1.3;
    }

    .section6 > .sc6-con-1 > p:last-child {
        width: 50%;

        font-size: clamp(1.05em, 1.3vw, 1.3em);
        line-height: 1.4;

        font-family: Pretendard;

        /* 오른쪽 배치 */
        margin-left: auto;
        margin-right: 0;

        /* 글자도 오른쪽 정렬 */
        text-align: right;

        margin-top: clamp(2rem, 4vw, 5rem);
        margin-bottom: 2rem;
    }

    .section6 > .sc6-con-2 {
        margin-top: 24rem;
    }

    /* =========================================================
    UL
    ========================================================= */

        .section6 > .sc6-con-2 > ul {
            width: 100%;

            margin: 0;
            padding: 0;

            display: flex;
            flex-direction: row;

            align-items: stretch;
            justify-content: space-between;

            gap: clamp(4rem, 6vw, 8rem);

            list-style: none;

            box-sizing: border-box;
        }


    /* =========================================================
    공통 LI
    ========================================================= */

        .section6 > .sc6-con-2 > ul > li {
            margin: 0;
            padding: 0;

            box-sizing: border-box;
        }


    /* =========================================================
    LEFT : TEXT
    ========================================================= */

        .section6 > .sc6-con-2 > ul > li.sc6-con2-text {
            flex: 6;

            display: flex;
            flex-direction: column;

            justify-content: center;

            min-width: 0;
        }


        .section6 > .sc6-con-2 > ul > li.sc6-con2-text > p {
            margin:
                0
                0
                clamp(2rem, 3vw, 3.5rem);

            padding: 0;

            font-family: Pretendard;

            font-size: clamp(1rem, 1.15vw, 1.3rem);

            line-height: 1.7;

            color: #fff;

            text-align: left;
        }


        .section6 > .sc6-con-2 > ul > li.sc6-con2-text > p:last-of-type {
            margin-bottom: 0;
        }


    /* =========================================================
    RIGHT : IMAGE
    ========================================================= */

        .section6 > .sc6-con-2 > ul > li.sc6-con2-img {
            flex: 4;

            min-width: 0;

            display: flex;
            flex-direction: column;

            gap: clamp(1rem, 1.5vw, 1.5rem);
        }


        /* 이미지 공통 */

        .section6 > .sc6-con-2 .sc6-img-item {
            width: 100%;

            overflow: hidden;

            box-sizing: border-box;
        }


        .section6 > .sc6-con-2 .sc6-img-item img {
            display: block;

            width: 100%;
            height: 100%;

            margin: 0;
            padding: 0;

            object-fit: cover;
        }


        /* 상단 이미지 */

        .section6 > .sc6-con-2 .sc6-img-1 {
            width: 100%;

            aspect-ratio: 1 / 1.35;

            border-radius:
                0
                clamp(2rem, 3vw, 4rem)
                0
                clamp(2rem, 3vw, 4rem);
        }


        /* 하단 이미지 영역 */

        .section6 > .sc6-con-2 .sc6-img-bottom {
            width: 100%;
        }


        /* 실제 하단 이미지 */

        .section6 > .sc6-con-2 .sc6-img-2 {
            width: 100%;

            aspect-ratio: 1.7 / 1;

            overflow: hidden;

            border-radius:
                clamp(2rem, 3vw, 4rem)
                0
                clamp(2rem, 3vw, 4rem)
                0;
        }


        .section6 > .sc6-con-2 .sc6-img-2 > img {
            display: block;

            width: 100%;
            height: 100%;

            object-fit: cover;
        }


    /* =========================================================
    SUB TEXT
    ========================================================= */

        .section6 .sc6-sub-text1,
        .section6 .sc6-sub-text2 {
            font-family: Pretendard;

            font-size: clamp(1rem, 1vw, 1.1rem) !important;

            line-height: 1.4;

            color: #8a9b9b !important;
        }


        /* PC에서는 text1만 */

        .section6 .sc6-sub-text1 {
            display: block;
        }


        .section6 .sc6-sub-text2 {
            display: none;
        }



/* section 7 */

    .section7 {
        width: 100%;


        /* padding까지 100vh 안에 포함 */
        box-sizing: border-box;

        margin: 0;
        padding: 5rem 0;

        display: flex;
        flex-direction: column;
        align-items: center;

        position: relative;

        color: #fff;
    }

    .section7 .sc7-con-txt, .section7 .sc7-con-ul1, .section7 .sc7-con-ul2 {
        width: 80%;
        max-width:1920px;
        margin-bottom: clamp(6.5rem, 7vw, 8rem);
    }

    .section7 .sc7-con-ul2  {
        margin-bottom: clamp(2.4rem, 2vw, 3rem);
    }

    .section7 > .sc7-con-txt > h1 {
        font-family: 'Noto Serif KR', serif;
        line-height: 1.3;
        font-size: clamp(2.4rem, 2.6vw, 2.9em);
        margin: 0 0 3rem 0;
        color: #000;
        text-align: center;
        width: 100%;
        font-weight: 700;
    }

    .section7 > .sc7-con-txt > p {
        color: #999;
        font-size: clamp(1rem, 1.3vw, 1.5rem);
        line-height: 1.5;
        text-align: center;
        width: 85%;
        margin: 0 auto;
    }

    .section7 > .sc7-con-ul1, .section7 > .sc7-con-ul2 {
        padding: 0;

        display: flex;
        align-items: stretch;
        justify-content: space-between;

        gap: clamp(3rem, 6vw, 7rem);

        list-style: none;

        box-sizing: border-box;
    }


    /* =========================================================
        LEFT / RIGHT 공통
    ========================================================= */

        .section7 > .sc7-con-ul1 > li, .section7 > .sc7-con-ul2 > li {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .section7 > .sc7-con-ul1 > li:first-child, .section7 > .sc7-con-ul2 > li:first-child {
            flex: 5.5;
        }

        .section7 > .sc7-con-ul1 > li:last-child, .section7 > .sc7-con-ul2 > li:last-child {
            flex: 4.5;
        }

        .section7 .h1-small {
            font-size: clamp(1rem, 1.1vw, 1.33rem);
        }
 
        .section7 > .sc7-con-ul1 > li > h2, .section7 > .sc7-con-ul2 > li > h2 {
            margin:
                0
                0
                clamp(2rem, 3vw, 3.5rem);

            padding: 0;

            font-size: clamp(1.8rem, 2.1vw, 2.6rem);
            line-height: 1.2;
            font-weight: 600;
            color: #000;
        }

        .section7 > .sc7-con-ul1 > li > p, .section7 > .sc7-con-ul2 > li > p {
            margin:
                0
                0
                clamp(2rem, 3vw, 3.5rem);

            padding: 0;

            font-size: clamp(1.1rem, 1.3vw, 1.4rem);
            line-height: 1.5;
            color: #777;
        }


        /* 마지막 본문 */

        .section7 > .sc7-con-ul1 > li > p:last-child, .section7 > .sc7-con-ul2 > li > p:last-child {
            margin-bottom: 0;
        }


    /* =========================================================
        SUB TEXT
    ========================================================= */

        .section7 .sc7-sub-txt {
            width: 100%;
            color: #777;
            font-size: clamp(.7rem, .8vw, .8rem);
            margin-top: clamp(.8rem, 1vw, 1rem);
            line-height: 1.2;
        }

    .section7 .sc7-con-ul2-img .sc7-ul2-img1 {
        margin-bottom: .5rem;
    }

    .section7 .sc7-con-ul2-img .sc7-ul2-img2 {
        display: flex;
        flex-direction: row;

        gap: clamp(.4rem, .8vw, .8rem);

        justify-content: space-between;
    }


    .section7 .sc7-con-ul2-img .sc7-ul2-img2 > div {
        flex: 1 1 0;
        min-width: 0;

        /* 세 이미지의 세로 길이 동일하게 */
        aspect-ratio: 4 / 3;

        overflow: hidden;
    }


    .section7 .sc7-con-ul2-img .sc7-ul2-img2 > div > img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }


/* section 8 */
    .section8-bg {
        width: 100%;

        /* 화면 전체 높이 */
        height: 100vh;
        height: 100dvh;

        /* padding까지 100vh 안에 포함 */
        box-sizing: border-box;

        margin: 0;
        padding: 5rem 0;

        background:
            url('/img/7_ces/sc_8/sc-8-background.jpg')
            center center / cover
            no-repeat;

        display: flex;
        flex-direction: row;

        /* 좌우 영역 높이를 동일하게 */
        align-items: stretch;
        position: relative;
    }


    /* 왼쪽 텍스트 영역 */
    .section8-bg .sc-8-txt {
        width: 30%;
        height: 100%;

        box-sizing: border-box;

        color: #fff;
        margin-left: 5%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }


    .section8-bg .sc-8-txt .sc-8-txt-box h1 {
        font-family: 'Noto Serif KR', serif;

        line-height: 1.2;

        font-size: clamp(2.8em, 3.2vw, 3.8em);

        margin: 0 0 4rem 0;
    }


    .section8-bg .sc-8-txt .sc-8-txt-box p {
        font-size: clamp(1.05em, 1.3vw, 1.3em);

        line-height: 1.4;

        font-family: Pretendard;

        margin-bottom: 2rem;
    }


    .section8-bg .sc-8-txt .sc-8-dots {
        display: flex;
        align-items: center;

        gap: 1.4rem;
    }


    .section8-bg .sc-8-txt .sc8-dot {
        width: 14px;
        height: 14px;

        padding: 0;

        border: 0;
        border-radius: 50%;

        background: rgba(255,255,255,.4);

        cursor: pointer;

        transition:
            background-color .3s ease,
            transform .3s ease;
    }


    .section8-bg .sc-8-txt .sc8-dot.active {
        background: #fff;

        transform: scale(1.1);
    }


    /* 오른쪽 카드 슬라이더 전체 영역 */
    .section8-bg .sc-8-card {
        display: flex;
        flex-direction: row;
        align-items: stretch;

        position: relative;

        margin-left: 5%;
        gap: clamp(2rem, 3vw, 4rem);
        overflow: hidden;

        color: #fff;

        width: auto;

        flex: 1 1 0;
        min-width: 0;
        margin-right: 3rem;

        height: 100%;

        box-sizing: border-box;

        cursor: grab;

        touch-action: pan-y;

        user-select: none;
        -webkit-user-select: none;
    }

    .section8-bg .sc-8-card::after {
        content: '';
        flex: 0 0 clamp(3rem, 5vw, 6rem);
    }

    .section8-bg .sc-8-card.dragging {
        cursor: grabbing;
    }

    /* 실제 카드 */
    .section8-bg .sc-8-card .sc-8-cd-nemo {
        background: rgba(255, 255, 255, .2);

        border-radius:
            clamp(2rem, 2.5vw, 3.125rem)
            0
            clamp(2rem, 2.5vw, 3.125rem)
            0;

        box-shadow:
        6px 1px 18px rgba(0, 0, 0, .20),
        inset 0 1px 0 rgba(255, 255, 255, .18);

        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);

        width: clamp(500px, 38vw, 730px);
        height: 100%;

        /* padding을 포함해서 100% */
        box-sizing: border-box;
        flex-shrink: 0;

        padding: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        /* ★ 모서리 밖으로 내부 요소가 보이지 않도록 */
        overflow: hidden;
        flex: 0 0 auto;
        gap: clamp(2rem, 3vw, 4rem);
    }

    /* 위쪽 텍스트 */
    .section8-bg .sc-8-card .sc-8-cd-nemo .pt-txt {
        flex: 0 0 auto;
    }


    .section8-bg .sc-8-card .sc-8-cd-nemo h1 {
        font-size: clamp(2rem, 2.1vw, 2.5rem);
        line-height: 1.1;
        width: 75%;
        margin:1% 0 7% 0;
    }

    .section8-bg .sc-8-card .sc-8-cd-nemo p {
        font-size: clamp(1.05em, 1.3vw, 1.3em);
        line-height: 1.4;
        margin-bottom: 2rem;
    }
    .section8-bg .sc-8-card .sc-8-cd-nemo p:last-child {
        margin-bottom: 0;
    }
    .section8-bg .sc-8-card .sc-8-cd-nemo .pt-img {
        width: 100%;
        margin-top: auto;
        flex: 0 0 auto;
        overflow: visible;
    }

    /* 이미지 */
    .section8-bg .sc-8-card .sc-8-cd-nemo .pt-img img {
        display: block;

        width: 100%;
        height: auto;

        max-width: 100%;
        max-height: 100%;

        object-fit: contain;
    }



    .section8-bg .sub {
        font-size: .9em;
    }

    .section8-bg .sc-8-card .sc-8-cd-nemo .pt-img ul {
        margin: 0 0 1rem 0 ; padding: 0; list-style: none; display: flex;
        flex-direction: row; flex-wrap: wrap;
    }

    .section8-bg .sc-8-card .sc-8-cd-nemo .pt-img ul li {
        width: 50%;
        line-height: 1.6;
    }

    /* 비디오 */

    .section8-bg .sc-8-card .sc-8-cd-nemo .pt-img .sc8-video {
        display: block;

        width: 100%;
        height: auto;

        max-width: 100%;
        max-height: none;

        object-fit: contain;
    }


    /* =========================================================
    SECTION 8 SLIDER WRAP
    ========================================================= */

    .sc-8-slider-wrap {
        position: relative;

        flex: 1 1 0;

        min-width: 0;
        height: 100%;

        margin-left: 5%;

        box-sizing: border-box;
    }


    /*
    기존 .sc-8-card에 margin-left:5%가 있다면
    wrapper가 margin을 담당하므로 여기서는 제거
    */

    .sc-8-slider-wrap .sc-8-card {
        width: 100%;
        height: 100%;

        margin-left: 0;

        box-sizing: border-box;
    }



    /* =========================================================
    SECTION 8 ARROW
    ========================================================= */

    #sc-8 .sc8-nav-arrow {
        position: absolute;

        /*
        slider-wrap 자체의 높이 중앙
        */
        top: 50%;

        width: clamp(3rem, 4.17vw, 5rem);
        height: clamp(3rem, 4.17vw, 5rem);

        padding: 0;
        margin: 0;

        border: 0 !important;
        outline: 0;

        background: transparent !important;
        box-shadow: none !important;

        cursor: pointer;

        z-index: 9999;

        opacity: .25;

        transform: translateY(-50%);

        appearance: none;
        -webkit-appearance: none;

        pointer-events: auto;

        transition: opacity .3s ease;
    }


    #sc-8 .sc8-nav-arrow:hover {
        opacity: .8;
    }



    /* =========================================================
    ARROW SHAPE
    ========================================================= */

    #sc-8 .sc8-nav-arrow::before {
        content: '';

        position: absolute;

        top: 50%;
        left: 50%;

        width: clamp(2.5rem, 4.17vw, 5rem);
        height: clamp(2.5rem, 4.17vw, 5rem);

        border-top: 2px solid #fff;
        border-right: 2px solid #fff;

        box-sizing: border-box;

        pointer-events: none;
    }



    /* =========================================================
    LEFT
    ========================================================= */

    #sc-8 .sc8-nav-prev {
        left: 0;

        /*
        화살표 중심을 카드 바깥쪽으로 절반 이동
        */
        transform:
            translate(-50%, -50%);
    }


    #sc-8 .sc8-nav-prev::before {
        transform:
            translate(-10%, -50%)
            rotate(-135deg);
    }



    /* =========================================================
    RIGHT
    ========================================================= */

    #sc-8 .sc8-nav-next {
        right: 0;

        transform:
            translate(50%, -50%);
    }


    #sc-8 .sc8-nav-next::before {
        transform:
            translate(-150%, -50%)
            rotate(45deg);
    }





/* section 9 */

    .section9 {
        width: 100%;

        height: 100vh;
        height: 100dvh;


        /* padding까지 100vh 안에 포함 */
        box-sizing: border-box;

        margin: 0;
        padding: 5rem 0 0 0;

        display: flex;
        flex-direction: column;
        align-items: center;

        position: relative;
    }

    .section9 .sc9-tit, .section9 .sc9-ul {
        width: 80%;
        max-width:1920px;
        margin-bottom: clamp(6.5rem, 7vw, 8rem);
    }

    .section9 > .sc9-tit > h1 {
        font-family: 'Noto Serif KR', serif;
        line-height: 1.3;
        font-size: clamp(2.4rem, 2.6vw, 2.9em);
        margin: 0 0 3rem 0;
        color: #000;
        text-align: center;
        width: 100%;
        font-weight: 700;
    }

    .section9 > .sc9-ul {
        padding: 0;

        display: flex;
        align-items: stretch;
        justify-content: space-between;

        margin-bottom: 0;

        gap: clamp(2rem, 4vw, 5rem);

        list-style: none;

        box-sizing: border-box;
    }


    /* =========================================================
        LEFT / RIGHT 공통
    ========================================================= */

        .section9 > .sc9-ul > li {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .section9 > .sc9-ul > li:first-child {
            flex: 4;
        }

        .section9 > .sc9-ul > li:last-child {
            flex: 6;
        }

        .section9 > .sc9-ul > li > p {
            margin:
                0
                0
                clamp(2rem, 3vw, 3.5rem);

            padding: 0;

            font-size: clamp(1.1rem, 1.3vw, 1.4rem);
            line-height: 1.5;
            color: #777;
        }

        /* 마지막 본문 */

        .section9 > .sc9-ul > li > p:last-child {
            margin-bottom: 0;
        }



/* section 10 */

    .sc-10 {
        position: relative;
        background: rgba(6, 33, 74, 1);
        width: 100%;
        height: 100vh;
        height: 100dvh;

        overflow: hidden;
    }

    /* =========================================================
    SLIDE TRACK
    ========================================================= */

    .sc-10-track {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        width: 100%;
        height: 100%;

        transition: transform .7s ease;

        will-change: transform;

        cursor: grab;

        touch-action: pan-y;

        user-select: none;
    }


    .sc-10-track.dragging {
        cursor: grabbing;

        transition: none;
    }


    /* =========================================================
    각 카드
    ========================================================= */

    .sc-10-card1,
    .sc-10-card2,
    .sc-10-card3,
    .sc-10-card4 {
        position: relative;

        width: 100%;
        min-width: 100%;
        height: 100%;

        flex: 0 0 100%;

        box-sizing: border-box;
    }


    .sc-10-txt {
        position: absolute;

        top: 12%;
        left: 12.5%;

        width: 100%;
        max-width: 1920px;

        margin: 0 auto;

        color: #fff;

        box-sizing: border-box;

        z-index: 10;

    }

    .sc-10-txt > h1 {
        width: 55%;

        font-family: var(--font-serif);

        font-size: clamp(2.8rem, 3vw, 3.8rem);
        line-height: 1.2;

        margin: 0 0 4rem;
    }

    .sc-10-txt > p {
        width: 50%;

        font-size: clamp(1rem, 1.05vw, 1.25rem);
        line-height: 1.5;

        margin: 0 0 2rem;
    }


    /* 필요하면 각 카드별 배경 */

    .sc-10-card1 {
        background:
            url('/img/7_ces/sc-10/bkg-01.jpg')
            center center / cover no-repeat;
    }

    .sc-10-card2 {
        background:
            url('/img/7_ces/sc-10/bkg-02.jpg')
            center center / cover no-repeat;
    }

    .sc-10-card3 {
        background:
            url('/img/7_ces/sc-10/bkg-03.jpg')
            center top / cover no-repeat;
    }

    .sc-10-card4 {
        background:
            url('/img/7_ces/sc-10/bkg-04.jpg')
            center center / cover no-repeat;
    }


    /* =========================================================
    DOTS
    ========================================================= */

    .sc-10-dots {
        position: absolute;

        left: 50%;
        bottom: 7%;

        transform: translateX(-50%);

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 18px;

        z-index: 50;
    }


    .sc-10-dot {
        width: 14px;
        height: 14px;

        padding: 0;

        border: 0;
        border-radius: 50%;

        background: rgba(255, 255, 255, .4);

        cursor: pointer;

        transition:
            background .3s ease,
            transform .3s ease;
    }


    .sc-10-dot.active {
        background: rgba(255, 255, 255, 1);

        transform: scale(1.05);
    }

    /* =========================================================
    SECTION 10 ARROW
    카드 좌우 중앙에 겹쳐서 표시
    ========================================================= */

    .sc-10-arrow {
        position: absolute;

        top: 50%;
        transform: translateY(-50%);

        width: 80px;
        height: 120px;

        padding: 0;
        border: 0;

        background: transparent;

        cursor: pointer;

        z-index: 100;

        opacity: .2;

        transition: opacity .3s ease;

        appearance: none;
        -webkit-appearance: none;
    }


    .sc-10-arrow:hover {
        opacity: .7;
    }


    /* 화살표 모양 */

    .sc-10-arrow::before {
        content: '';

        position: absolute;

        top: 50%;
        left: 50%;

        width: clamp(4rem, 8.33vw, 10rem);
        height: clamp(4rem, 8.33vw, 10rem);

        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
    }


    /* 왼쪽 화살표 */

    .sc-10-arrow.prev {
        left: 3%;
    }

    .sc-10-arrow.prev::before {
        transform:
            translate(-30%, -50%)
            rotate(-135deg);
    }


    /* 오른쪽 화살표 */

    .sc-10-arrow.next {
        right: 3%;
    }

    .sc-10-arrow.next::before {
        transform:
            translate(-70%, -50%)
            rotate(45deg);
    }



/* =========================================
    SECTION 11
========================================= */


    .section11 {
        width: 100%;

        height: 100vh;
        height: 100dvh;


        /* padding까지 100vh 안에 포함 */
        box-sizing: border-box;

        margin: 0;
        padding: 5rem 0;

        display: flex;
        flex-direction: column;
        align-items: center;

        position: relative;
    }

    .section11 .sc11-con-txt, .section11 .sc11-ul {
        width: 80%;
        max-width:1920px;
        margin-bottom: clamp(2rem, 3vw, 4rem);
    }

    .section11 > .sc11-con-txt > h1 {
        font-family: 'Noto Serif KR', serif;
        line-height: 1.3;
        font-size: clamp(2.4rem, 2.6vw, 2.9em);
        margin: 0 0 3rem 0;
        color: #000;
        text-align: left;
        width: 100%;
        font-weight: 700;
    }

    .section11 > .sc11-con-txt > p {
        color: #999;
        font-size: clamp(1rem, 1.3vw, 1.5rem);
        line-height: 1.5;
        text-align: left;
        width: 85%;
    }

    .section11 > .sc11-ul {
        padding: 0;

        display: flex;
        align-items: stretch;
        justify-content: space-between;

        margin-bottom: 0;

        gap: clamp(2rem, 3vw, 4rem);

        list-style: none;

        box-sizing: border-box;
    }


    /* =========================================================
        LEFT / RIGHT 공통
    ========================================================= */

        .section11 > .sc11-ul > li {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .section11 > .sc11-ul > li:first-child {
            flex: 6;
        }

        .section11 > .sc11-ul > li:last-child {
            flex: 4;
        }

        .section11 > .sc11-ul > li > p {
            margin:
                0
                0
                clamp(2rem, 3vw, 3.5rem);

            padding: 0;

            font-size: clamp(1.1rem, 1.3vw, 1.4rem);
            line-height: 1.5;
            color: #777;
        }

        /* 마지막 본문 */

        .section11 > .sc11-ul > li > p:last-child {
            margin-bottom: 0;
        }

        .section11 > .sc11-ul > li.sc11-ul-li2 {
            display: flex;
            flex-direction: column;

            /* 이미지 사이 간격 */
            gap: clamp(.8rem, 1vw, 1rem);

            /* 오른쪽 정렬 */
            align-items: flex-end;
        }


        /* 이미지 박스 */
        .section11 > .sc11-ul > li.sc11-ul-li2 > div {
            width: 70%;

            overflow: hidden;

            /* 좌측 상단 / 우측 하단만 둥글게 */
            border-radius:
                clamp(1.5rem, 2vw, 2.5rem)
                0
                clamp(1.5rem, 2vw, 2.5rem)
                0;

            box-sizing: border-box;
        }


        /* 실제 이미지 */
        .section11 > .sc11-ul > li.sc11-ul-li2 > div > img {
            display: block;

            width: 100%;
            height: auto;

            margin: 0;
            padding: 0;
        }


/* =========================================
    SECTION 12
========================================= */

    .section12 {
        width: 100%;

        height: 100vh;
        height: 100dvh;


        /* padding까지 100vh 안에 포함 */
        box-sizing: border-box;

        margin: 0;
        padding: 5rem 0;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        position: relative;

        background:
            url('/img/7_ces/sc-12/bkg-01.jpg')
            center center / cover
            no-repeat;

        color: #fff;
    }

    .section12 .sc12-con {
        width: 80%;
        max-width:1920px;
        text-align: center;
    }

    .section12 > .sc12-con > h1 {
        font-family: 'Noto Serif KR', serif;
        line-height: 1.3;
        font-size: clamp(3.8rem, 4vw, 4.5em);
        margin: 0 0 4rem 0;
        width: 100%;
        font-weight: 700;
    }

    .section12 > .sc12-con > p {
        font-size: clamp(1rem, 1.3vw, 1.5rem);
        line-height: 1.5;
        width: 100%;
    }

    .section12 > .sc12-con > h2, .section12 > .sc12-con > h3 {
        font-size: clamp(1.8rem, 2.1vw, 2.5rem);
    }

    .section12 > .sc12-con > h2 {
        font-weight: 300;
    }
    .section12 > .sc12-con > h3 {
        margin-bottom: 5rem;
    }



/* =========================================
    Footer
========================================= */

    .footer-wrap {
        background: rgba(51, 51, 51, 1);
        color: #888;

        display: flex;
        justify-content: center;
        align-items: center;

        font-size: clamp(1rem, 1.1vw, 1.4rem);

        padding: 5rem 0;
    }


    .footer-wrap > ul {
        width: 70%;
        max-width: 1920px;

        margin: 0;
        padding: 0;

        display: flex;
        flex-direction: row;

        gap: clamp(1rem, 1.2vw, 2rem);

        justify-content: space-between;
        align-items: center;

        list-style: none;
    }


    /* =========================================================
    LOGO
    ========================================================= */

        .footer-wrap > ul > li.ft-logo {
            flex: 3;

            display: flex;
            align-items: center;
            justify-content: center;

            margin: 0;
            padding: 0;
        }


        /* 다른 img 스타일을 전부 무시 */
        .footer-wrap > ul > li.ft-logo > img {
            display: block !important;

            width: clamp(18rem, 20vw, 24rem) !important;
            max-width: clamp(18rem, 20vw, 24rem) !important;

            height: auto !important;
            max-height: none !important;

            object-fit: contain !important;

            margin: 0 auto !important;
            padding: 0 !important;

            flex: 0 0 auto !important;
        }

    /* =========================================================
    INFO
    ========================================================= */

        .footer-wrap > ul > li.ft-info {
            flex: 7;

            margin: 0;
            padding: 0;
        }


        .footer-wrap > ul > li.ft-info > p {
            margin: 0;

            line-height: 1.6;
        }


        .footer-wrap > ul > li.ft-info > p:last-child {
            color: #bbb;

            margin-top: 4rem;
        }