.intro-wrap { 
    position: fixed; left: 0; top: 0; width: 100%; height: 100vh; display: flex; justify-content: center; background: #F4EEE6; z-index: 10; 
}

.intro-wrap .text-wrap { 
    display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; 
}

.intro-wrap .text-wrap .title { 
    color: #776147; font-size: 70px; font-weight: 600; transform: translateY(100%); animation: slideIn 1.5s forwards; line-height: 160%; 
}

.intro-wrap .text-wrap .title span { display: inline-block; }

.intro-wrap .text-wrap .title #before {
    animation: moveLeft 1s 1.3s forwards;
}

.intro-wrap .text-wrap .title #after {
    animation: moveRight 1s 1.3s forwards;
}

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

@keyframes moveLeft {
    to {
        transform: translateX(-90px);
    }
}

@keyframes moveRight {
    to {
        transform: translateX(150px);
    }
}

.intro-wrap > img { position: absolute; right: 0; bottom: 0; z-index: 0; }

.up-btn-wrap { position: fixed; right: 100px; bottom: 100px; z-index: 30; cursor: pointer; opacity: 0; transition: opacity 0.5s ease; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); border-radius: 50%; }
.up-btn-wrap.show {
    opacity: 1; 
}



.header { position: fixed; left: 0; right: 0; top: 0; width: 100%; z-index: 100; }
.header.bg { background: #fff; border-bottom: 1px solid #DEDEDE; }
.header .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 80px; }
.header .header-inner .logo { width: 243px; }
.header .header-inner > .right-head > a { display: flex; align-items: center; margin-bottom: 2px; }
.header .header-inner > .right-head > a:last-child { margin-bottom: 0; }
.header .header-inner > .right-head .txt { padding: 5px; border-radius: 5px; font-size: 12px; font-weight: 600; margin-right: 10px; }
.header .header-inner .header-menu-box > .gnb { display: flex; align-items: center; justify-content: center; }
.header .header-inner .header-menu-box > .gnb > li { margin-right: 35px; font-weight: 500; width: 116px; text-align: center; }
.header .header-inner .header-menu-box > .gnb > li:last-child { margin-right: 0; }
.header .header-inner .header-menu-box > .gnb > li a { color: #fff; padding: 47px 0; display: block; }
.header.bg .header-inner .header-menu-box > .gnb > li a { color: #969696; }


/* 서브헤더 */
.header-submenu-box.absol { position: absolute; left: 0; right: 0; background: #fff; z-index: 90; top: 122px; display: block; }
.header-submenu-box .gnb-all { display: flex; width: 1206px; margin: 0 auto; text-align: center; padding: 30px 0 70px 0; }
.header-submenu-box .gnb-all > li { width: 116px; margin-right: 35px; }
.header-submenu-box .gnb-all > li:last-child { margin-right: 0; }
.header-submenu-box .gnb-all .sub-menu > li { margin-bottom: 16px; }
.header-submenu-box .gnb-all .sub-menu > li:last-child { margin-bottom: 0; }
.header-submenu-box .gnb-all .sub-menu > li > a { font-size: 16px; font-weight: 300; color: #515151; }
.header-submenu-box .gnb-all .sub-menu > li.active > a { color: #000; font-weight: 600; }



/* 서브페이지 헤더 */
.sub-header-wrap { width: 100%; height: 600px; position: relative; margin-top: 122px; }
.sub-header-wrap > .img-box { width: 100%; height: 100%; position: relative; }
.sub-header-wrap > .img-box > img { width: 100%; height: 100%; position: absolute; left: 0; object-fit: cover; }

.sub-header-wrap > .text-box { position: absolute; top: 50%; transform: translateY(-50%); left: 300px; }
.sub-header-wrap > .text-box > .title-box > .sub-title { display: none; }
.sub-header-wrap > .text-box > .title-box > .title { font-weight: 700; line-height: 140%; }
.sub-header-wrap > .text-box > .order-menu { margin-top: 50px; display: flex; align-items: center; position: relative; }
.sub-header-wrap > .text-box > .order-menu > .circle { width: 4px; height: 4px; border-radius: 100%; background: #FCEAD8; margin: 0 12px; }
.sub-header-wrap > .text-box > .order-menu > span { font-weight: 600; color: #FCEAD8; }
.sub-header-wrap > .text-box > .order-menu > .click-menu-box { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 50px; cursor: pointer; border: 1.5px solid #FCB96D; transition: background 0.3s ease, border 0.3s ease; }
.sub-header-wrap > .text-box > .order-menu > .click-menu-box.active {
    background: #fff;
    border: 1.5px solid #fff;
    transition: background 0.3s ease, border 0.3s ease;
}
.sub-header-wrap > .text-box > .order-menu > .click-menu-box > span { margin-right: 4px; font-weight: 600; font-size: 18px; color: #FCB96D; transition: color 0.3s ease; }
.sub-header-wrap > .text-box > .order-menu > .click-menu-box.active > span {
    color: #222;
    transition: color 0.3s ease;
}
.sub-header-wrap > .text-box > .order-menu > .click-menu-box > img {
    transition: transform 0.3s ease;
}
.sub-header-wrap > .text-box > .order-menu > .click-menu-box.active > img {
    transform: rotate(180deg); /* 클릭 시 180도 회전 */
    transition: transform 0.3s ease;
}
.sub-header-wrap > .text-box > .order-menu > .sub-menu-open { padding: 22px; border-radius: 20px; background: #fff; position: absolute; left: 148px; top: 65px; display: none; width: 190px; box-shadow: 2px 8px 16px 3px rgba(0,0,0,0.1); }
.sub-header-wrap > .text-box > .order-menu > .sub-menu-open > a { font-weight: 400; color: #222222; margin-bottom: 8px; display: block; }
.sub-header-wrap > .text-box > .order-menu > .sub-menu-open > a.active { font-weight: 600; }
.sub-header-wrap > .text-box > .order-menu > .sub-menu-open > a:last-child { margin-bottom: 0; }




.section1 {
    width: 0;
    height: 121px;
    border-radius: 10px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    pointer-events: none;
    animation: initialExpand 1s 1.3s forwards, finalExpand 2.3s 2.6s forwards;
}

@keyframes initialExpand {
    0% {
        width: 0;
    }
    100% {
        width: 197px;
        border-radius: 10px;
    }
}

@keyframes finalExpand {
    0% {
        width: 197px;
        height: 121px;
        border-radius: 10px;
    }
    100% {
        width: 100%;
        height: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 0;
    }
}

.section1 {  pointer-events: none; overflow: hidden; }
.section1 iframe { width: 100%; height: 100%; position: absolute; left: 0; object-fit: cover; border-radius: 10px; transform: scale(1.12); }

.section1 .img-box { width: 100%; height: 100vh; position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 1s ease-in-out; }
.section1 .img-box.fade-in { opacity: 1; }
.section1 .img-box > img { width: 100%; height: 100%; object-fit: cover; filter: blur(3px); }

.section1 .text-box { position: absolute; left: 150px; bottom: 150px; opacity: 0; transition: opacity .5s ease-in-out; }
.section1 .text-box.fade-in { opacity: 1; }
.section1 .text-box > .title { font-size: 52px; font-weight: 600; }

.section1.no-intro { width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 0; animation: none; }
.section1.no-intro .text-box { display: block; }

.h100 { width: 100%; height: 100vh; position: relative; }


.section2 {
    width: 100%;
    height: 300vh; /* 섹션의 높이 */
    position: relative;
    z-index: 15;
}

.section2 .text-box {
    position: absolute;
    left: 130px;
    top: 160px;
    z-index: 1;
}
.section2 .text-box .title { 
    font-size: 64px; 
    font-weight: 500; 
    margin-bottom: 12px; 
    position: relative; 
}

.section2 .text-box .title::after {
    content: '';
    position: absolute;
    bottom: -5px; /* Border 위치 조정 */
    left: 0;
    width: 100%;
    height: 5px; /* Border의 높이 */
    background-color: #fff;
    transform: scaleX(0); /* 처음에는 스케일을 0으로 설정하여 보이지 않게 */
    transform-origin: left; /* 왼쪽에서 시작 */
    transition: transform 0.5s ease; /* 트랜지션 속도 설정 */
}

.section2 .text-box .title.active::after {
    transform: scaleX(1); /* active 클래스가 추가될 때 스케일을 1로 변경 */
}

.section2 .text-box .title.active { display: inline-block; }

.section2 .text-box .title:last-child { margin-bottom: 0; }


.section2 .img-box {
    width: 100%;
    height: 100vh;
    position: relative;
    background: #776147;
}

.section2 .img-box > img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    object-fit: cover;
}


/* section3 */
#section3 { position: relative; top: 0; z-index: 15; background: #F4EEE6; width: 100%; height: 100vh; display: flex; }
#section3 > .sec-inner { width: 100%; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#section3 > .sec-inner > .text-wrap { text-align: center; position: relative; z-index: 2; }
#section3 > .sec-inner > .text-wrap > .sub-title { font-size: 22px; font-weight: 600; padding: 14px 40px; background: #FAC992; border-radius: 80px; line-height: 140%; }
#section3 > .sec-inner > .text-wrap > .title { font-size: 70px; font-weight: 600; line-height: 150%; margin-top: 40px; }

#section3 > .sec-inner > .img-box { position: absolute; right: 0; bottom: 0; z-index: 1; }

/* section4 */
.section4 {
    position: relative;
    z-index: 16;
    background: transparent;
    overflow: hidden;
    height: 3500px;
    margin-top: -400px;
}

.section4::before {
    content: "";
    position: absolute;
    top: 400px;
    left: 0;
    width: 100%;
    height: calc(100% - 400px);
    background: #F4EEE6;
    z-index: -1; 
}

.section4 .sec-inner { position: relative; border-radius: 20px; height: 100%; }
.section4 .video-box { 
    width: 100%; 
    height: 100vh;
    position: relative; 
    border-radius: 20px; 
    margin: 0 auto; 
    transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease, border-radius 0.3s ease; 
    left: 50%; 
    transform: translateX(-50%) scale(0.6);
    text-align: center;
}
.section4 .sec-inner > .video-box > video { 
    width: 100%; 
    height: 100%;
    object-fit: cover;
    border-radius: 20px; 
}
.section4 .sec-inner .text-box { 
    position: absolute; 
    left: 50%; 
    top: 60%; 
    transform: translate(-50%, -50%); 
    z-index: 1; 
    opacity: 0; 
    transition: opacity 0.5s ease-in-out; 
}

/* section5 */
#section5 { position: relative; top: 0; z-index: 15; background: #F4EEE6; width: 100%; height: 100vh; display: flex; }
#section5 > .sec-inner { width: 100%; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#section5 > .sec-inner > .text-wrap { text-align: center; position: relative; z-index: 2; }
#section5 > .sec-inner > .text-wrap > .sub-title { font-size: 22px; font-weight: 600; padding: 14px 40px; background: #FAC992; border-radius: 80px; line-height: 140%; }
#section5 > .sec-inner > .text-wrap > .title { font-size: 70px; font-weight: 600; line-height: 150%; margin-top: 40px; }

#section5 > .sec-inner > .img-box { position: absolute; right: 0; bottom: 0; z-index: 1; }

/* section6 */
.section6 {
    position: relative;
    z-index: 16;
    background: transparent;
    overflow: hidden;
    height: 3500px;
    margin-top: -400px;
}

.section6::before {
    content: "";
    position: absolute;
    top: 400px;
    left: 0;
    width: 100%;
    height: calc(100% - 400px);
    background: #F4EEE6;
    z-index: -1; 
}

.section6 .sec-inner { position: relative; border-radius: 20px; height: 100%; }
.section6 .video-box { 
    width: 100%; 
    height: 100vh;
    position: relative; 
    border-radius: 20px; 
    margin: 0 auto; 
    transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease, border-radius 0.3s ease; 
    left: 50%; 
    transform: translateX(-50%) scale(0.6);
    text-align: center;
}
.section6 .sec-inner > .video-box > video { 
    width: 100%; 
    height: 100%;
    object-fit: cover;
    border-radius: 20px; 
}
.section6 .sec-inner .text-box { 
    position: absolute; 
    left: 50%; 
    top: 60%; 
    transform: translate(-50%, -50%); 
    z-index: 1; 
    opacity: 0; 
    transition: opacity 0.5s ease-in-out; 
}

/* section7 */
#section7 { position: relative; top: 0; z-index: 15; background: #F4EEE6; width: 100%; height: 100vh; display: flex; }
#section7 > .sec-inner { width: 100%; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#section7 > .sec-inner > .text-wrap { text-align: center; position: relative; z-index: 2; }
#section7 > .sec-inner > .text-wrap > .sub-title { font-size: 22px; font-weight: 600; padding: 14px 40px; background: #FAC992; border-radius: 80px; line-height: 140%; }
#section7 > .sec-inner > .text-wrap > .title { font-size: 70px; font-weight: 600; line-height: 150%; margin-top: 40px; }

#section7 > .sec-inner > .img-box { position: absolute; right: 0; bottom: 0; z-index: 1; }

/* section8 */
.section8 {
    position: relative;
    z-index: 16;
    background: transparent;
    overflow: hidden;
    height: 3500px;
    margin-top: -400px;
}

.section8::before {
    content: "";
    position: absolute;
    top: 400px;
    left: 0;
    width: 100%;
    height: calc(100% - 400px);
    background: #F4EEE6;
    z-index: -1; 
}

.section8 .sec-inner { position: relative; border-radius: 20px; height: 100%; }
.section8 .video-box { 
    width: 100%; 
    height: 100vh;
    position: relative; 
    border-radius: 20px; 
    margin: 0 auto; 
    transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease, border-radius 0.3s ease; 
    left: 50%; 
    transform: translateX(-50%) scale(0.6);
    text-align: center;
}
.section8 .sec-inner > .video-box > video { 
    width: 100%; 
    height: 100%;
    object-fit: cover;
    border-radius: 20px; 
}
.section8 .sec-inner .text-box { 
    position: absolute; 
    left: 50%; 
    top: 60%; 
    transform: translate(-50%, -50%); 
    z-index: 1; 
    opacity: 0; 
    transition: opacity 0.5s ease-in-out; 
}

/* section15 */
#section15 { position: relative; top: 0; z-index: 15; background: #F4EEE6; width: 100%; height: 100vh; display: flex; }
#section15 > .sec-inner { width: 100%; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#section15 > .sec-inner > .text-wrap { text-align: center; position: relative; z-index: 2; }
#section15 > .sec-inner > .text-wrap > .sub-title { font-size: 22px; font-weight: 600; padding: 14px 40px; background: #FAC992; border-radius: 80px; line-height: 140%; }
#section15 > .sec-inner > .text-wrap > .title { font-size: 70px; font-weight: 600; line-height: 150%; margin-top: 40px; }

#section15 > .sec-inner > .img-box { position: absolute; right: 0; bottom: 0; z-index: 1; }

/* section16 */
.section16 {
    position: relative;
    z-index: 16;
    background: transparent;
    overflow: hidden;
    height: 3500px;
    margin-top: -400px;
}

.section16::before {
    content: "";
    position: absolute;
    top: 400px;
    left: 0;
    width: 100%;
    height: calc(100% - 400px);
    background: #F4EEE6;
    z-index: -1; 
}

.section16 .sec-inner { position: relative; border-radius: 20px; height: 100%; }
.section16 .video-box { 
    width: 100%; 
    height: 100vh;
    position: relative; 
    border-radius: 20px; 
    margin: 0 auto; 
    transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease, border-radius 0.3s ease; 
    left: 50%; 
    transform: translateX(-50%) scale(0.6);
    text-align: center;
}
.section16 .sec-inner > .video-box > video { 
    width: 100%; 
    height: 100%;
    object-fit: cover;
    border-radius: 20px; 
}
.section16 .sec-inner .text-box { 
    position: absolute; 
    left: 50%; 
    top: 60%; 
    transform: translate(-50%, -50%); 
    z-index: 1; 
    opacity: 0; 
    transition: opacity 0.5s ease-in-out; 
}



.progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 6px;
    width: 0;
    background-color: #ff9900;
    transition: width 0.2s linear; 
    opacity: 0;
    transition: opacity 0.5s ease;
}


/* section9 */
.section9 {
    position: relative;
    z-index: 18;
    background: #F2F2F2;
}
.section9.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

.section9 > .sec-inner { display: flex; align-items: center; justify-content: space-between; }
.section9 > .sec-inner .slide-img { width: 50%; height: 100vh; position: relative; }
.section9 > .sec-inner .slide-img > img { width: 100%; height: 100%; position: absolute; left: 0; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; }
.section9 > .sec-inner .slide-img > img.active { opacity: 1; transition: opacity 0.5s ease; }
.section9 > .sec-inner .jang-box { 
    position: absolute; 
    left: 0; 
    bottom: 0; /* jang-box를 각 슬라이드의 bottom에 위치 */
    width: 100%; 
    z-index: 20; 
    height: 100vh; 
    pointer-events: none; 
    text-align: center;
}

/* 이미지 아래에서 위로 올라오는 애니메이션 */
.section9 > .sec-inner .jang-box > img {
    position: absolute; /* 이미지의 위치를 고정 */
    left: 50%;
    top: 50%; /* 화면 세로 중앙에서 시작 */
    transform: translate(-50%, 50%); /* 세로축 아래에서 시작 (translateY 50%) */
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s ease, opacity 0.5s ease, visibility 0s 0.5s; /* visibility 지연 */
}

.section9 > .sec-inner .jang-box > img.active {
    opacity: 1;
    transform: translate(-50%, -50%); /* 세로축 가운데에서 위로 이동 (translateY -50%) */
    visibility: visible; /* visibility 전환 */
    transition: transform 0.5s ease, opacity 0.5s ease;
}


.section9 .main-slide-1 {
    width: 50%;
    height: 100vh;
    position: relative;
}

.section9 .main-slide-1 .slide {
    width: 100%;
    position: absolute;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.5s, transform 0.5s;
}

.section9 .main-slide-1 .slide.active {
    opacity: 1;
    transform: translateY(0);
}

.section9 .main-slide-1 .slide-txt {
    width: 100%;
    height: 100vh;
    position: relative;
    background: #F2F2F2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.section9 .main-slide-1 .slide-txt .title {
    font-weight: 500;
    color: #2b2b2b;
    font-size: 100px;
}

.section9 .main-slide-1 .slide-txt .desc {
    margin-top: 20px;
    color: #9A9A9A;
    font-weight: 500;
    font-size: 22px;
}

.section9 .main-slide-1 .slide-abs {
    position: absolute;
    right: 140px;
    top: 160px;
    text-align: right;
}

.section9 .main-slide-1 .slide-abs .sub-title {
    font-size: 28px;
    font-weight: 500;
    color: #9a9a9a;
    margin-bottom: 15px;
}

.section9 .main-slide-1 .slide-abs .title {
    font-size: 74px;
    color: #2b2b2b;
    font-weight: 700;
}

.section9 .main-slide-1 .slide-abs .desc {
    font-size: 22px;
    color: #9a9a9a;
    font-weight: 500;
    margin-top: 40px;
}

.section9 .main-slide-1 .pagination-bullets {
    position: absolute;
    top: 50%;
    right: 70px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section9 .main-slide-1 .pagination-bullets .bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.section9 .main-slide-1 .pagination-bullets .bullet.active {
    background-color: #C0976C; /* Active state color */
}


.section10 { width: 100%; height: 100vh; background: #F4EEE6; position: relative; z-index: 20; }
.section10 > .img-box { position: absolute; right: 0; bottom: 0; }
.section10 > .sec-inner { display: flex; align-items: center; justify-content: space-between; }
.section10 > .sec-inner > .text-wrap { text-align: center; position: relative; z-index: 2; width: 50%; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.section10 > .sec-inner > .text-wrap > .sub-title { font-size: 22px; font-weight: 600; padding: 14px 40px; background: #FAC992; border-radius: 80px; line-height: 140%; }
.section10 > .sec-inner > .text-wrap > .title { font-size: 70px; font-weight: 600; line-height: 150%; margin-top: 40px; }

.section10 > .sec-inner > .slide-wrap { display: flex; width: 50%; height: 100vh; }

.section10 > .sec-inner .main-slide-2 { width: 250px; height: 100vh; position: relative; margin-right: 25px; margin-left: 0; }
.section10 > .sec-inner .main-slide-2 .swiper-slide { width: 100%; height: 362px; position: relative; border-radius: 10px; }
.section10 > .sec-inner .main-slide-2 .swiper-slide > img,
.section10 > .sec-inner .main-slide-2 .swiper-slide > video { width: 100%; height: 100%; position: absolute; left: 0; border-radius: 10px; object-fit: cover; }

.section10 > .sec-inner .main-slide-3 { width: 250px; height: 100vh; position: relative; margin-right: 25px; margin-left: 0; }
.section10 > .sec-inner .main-slide-3 .swiper-slide { width: 100%; height: 362px; position: relative; border-radius: 10px; }
.section10 > .sec-inner .main-slide-3 .swiper-slide > img,
.section10 > .sec-inner .main-slide-3 .swiper-slide > video { width: 100%; height: 100%; position: absolute; left: 0; border-radius: 10px; object-fit: cover; }

.section10 > .sec-inner .main-slide-4 { width: 250px; height: 100vh; position: relative; margin-left: 0; }
.section10 > .sec-inner .main-slide-4 .swiper-slide { width: 100%; height: 362px; position: relative; border-radius: 10px; }
.section10 > .sec-inner .main-slide-4 .swiper-slide > img,
.section10 > .sec-inner .main-slide-4 .swiper-slide > video { width: 100%; height: 100%; position: absolute; left: 0; border-radius: 10px; object-fit: cover; }




.section11 {
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 20;
}

.section11 > .sec-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.section11 .text-abs-box {
    position: absolute;
    left: 50%;
    top: 180px;
    transform: translate(-50%, 0);
    z-index: 2;
    transition: all 0.7s ease;
}

.section11.hover-active .text-abs-box {
    transform: translate(-50%, -50px);
    opacity: 0;
    transition: all 0.7s ease;
    pointer-events: none;
}

.section11 .text-abs-box > .sub-title {
    font-weight: 700;
    margin-bottom: 22px;
}

.section11 .text-abs-box > .title {
    font-weight: 600;
}

.section11 > .sec-inner > .hover-box {
    width: 50%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    transition: width 0.7s ease, right 0.7s ease;
}

.section11 > .sec-inner > .hover-box > .hover-area {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    cursor: pointer;
}
.section11 > .sec-inner > .hover-box:last-child > .hover-area {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
    left: auto;
    z-index: 10;
    cursor: pointer;
}

.section11 > .sec-inner > .hover-box > .bg {
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: background 0.7s ease;
}

.section11 > .sec-inner > .hover-box > .img-box {
    width: 100%;
    height: 100%;
    position: relative;
    transition: width 0.7s ease;
}

.section11 > .sec-inner > .hover-box > .img-box > img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    object-fit: cover;
}

.section11 > .sec-inner > .hover-box > .text-box {
    position: absolute;
    bottom: 120px;
    z-index: 11;
    text-align: left;
    transition: all 0.7s ease;
}

/* 첫 번째 hover-box에 대한 텍스트 박스의 위치 */
.section11 > .sec-inner > .hover-box:first-child > .text-box {
    left: 120px;
    transition: all 0.7s ease;
    text-align: left;
}

/* 마지막 hover-box에 대한 텍스트 박스의 위치 */
.section11 > .sec-inner > .hover-box:last-child > .text-box {
    right: 120px;
    transition: all 0.7s ease;
    text-align: right;
    bottom: 155px;
}

/* 텍스트 및 링크 스타일 */
.section11 > .sec-inner > .hover-box > .text-box > .title {
    font-size: 56px;
    font-weight: 600;
}

.section11 > .sec-inner > .hover-box > .text-box > .desc {
    font-size: 30px;
    margin-top: 16px;
    margin-bottom: 50px;
    font-weight: 500;
}

.section11 > .sec-inner > .hover-box > .text-box > a {
    display: inline-flex;
    align-items: center;
    padding: 10px 26px;
    border-radius: 50px;
    border: 1px solid #fff;
    font-size: 20px;
    font-weight: 400;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.section11 > .sec-inner > .hover-box > .text-box > a > img {
    margin-left: 8px;
}

/* 반대편 hover-box의 title만 남기고 나머지는 숨기는 CSS */
.section11 > .sec-inner > .hover-box.dimmed .text-box > .desc,
.section11 > .sec-inner > .hover-box.dimmed .text-box > a {
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    font-size: 0;
    display: none;
}

.section11 > .sec-inner > .hover-box.dimmed .text-box {
    opacity: 1;
    visibility: visible;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    right: auto;
    bottom: auto;
    width: auto;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.8s ease-in-out,
                visibility 0.8s ease-in-out;
    text-align: center;
}

.section12 {
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 20;
}

.section12 > img {
    position: absolute;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.section12 > .sec-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    width: 100%;
    height: 100vh;
}

.section12 .text-box {
    opacity: 1;
    transition: opacity 1s ease;
}

.section12 > .sec-inner > .text-box > .sub-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 22px;
}

.section12 > .sec-inner > .text-box > .title {
    font-size: 70px;
    font-weight: 600;
    color: #776147;
}

.section12 > .sec-inner > .img-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    display: none;
    justify-content: center;
    align-items: flex-end;
    opacity: 0;
    transition: opacity 1s ease;
}

.section12 > .sec-inner > .img-wrap > .img-box {
    position: absolute;
    width: 26%;
}
.section12 > .sec-inner > .img-wrap > .img-box:nth-child(1) { left: -10px; bottom: 0; width: 23%; }
.section12 > .sec-inner > .img-wrap > .img-box:nth-child(2) { left: 17%; bottom: 0; }
.section12 > .sec-inner > .img-wrap > .img-box:nth-child(3) { left: 50%; transform: translateX(-50%); bottom: 0; z-index: 1; }
.section12 > .sec-inner > .img-wrap > .img-box:nth-child(4) { right: 17%; bottom: 0; }
.section12 > .sec-inner > .img-wrap > .img-box:nth-child(5) { right: -10px; bottom: 0; width: 23%; }

/* .section12 > .sec-inner > .img-wrap > .img-box:nth-child(2) {
    margin: 0 -170px;
    z-index: 1;
} */

.section12 > .sec-inner > .img-wrap > .img-box > img.wonjang {
    width: 100%;
}

.section12 > .sec-inner > .img-wrap > .img-box > .wonjang-btn {
    position: absolute;
    cursor: pointer;
}
.section12 > .sec-inner > .img-wrap > .img-box:nth-child(1) > .wonjang-btn {
    left: 80px;
    top: 50%;
}
/* .section12 > .sec-inner > .img-wrap > .img-box:nth-child(2) > .wonjang-btn {
    right: 140px;
    top: 45%;
} */
.section12 > .sec-inner > .img-wrap > .img-box:nth-child(2) > .wonjang-btn {
    left: 80px;
    top: 58%;
}
.section12 > .sec-inner > .img-wrap > .img-box:nth-child(3) > .wonjang-btn {
    right: 90px;
    top: 50%;
}
.section12 > .sec-inner > .img-wrap > .img-box:nth-child(4) > .wonjang-btn {
    left: 50%;
    top: 58%;
}
.section12 > .sec-inner > .img-wrap > .img-box:nth-child(5) > .wonjang-btn {
    right: 80px;
    top: 68%;
}
/* 기본적으로 a 태그를 숨김 */
.section12 > .sec-inner > .img-wrap > .img-box > a {
    position: absolute;
    display: none;
    z-index: 2;
}

/* 각 a 태그 위치 조정 */
.section12 > .sec-inner > .img-wrap > .img-box:nth-child(1) > a {
    left: 3%;
    bottom: 27%;
}
/* .section12 > .sec-inner > .img-wrap > .img-box:nth-child(2) > a {
    right: -80px;
    bottom: 200px;
} */
.section12 > .sec-inner > .img-wrap > .img-box:nth-child(2) > a {
    left: 0;
    bottom: 23%;
}

.section12 > .sec-inner > .img-wrap > .img-box:nth-child(3) > a {
    right: 10%;
    bottom: 31%;
}

.section12 > .sec-inner > .img-wrap > .img-box:nth-child(4) > a {
    right: 16%;
    bottom: 25%;
}

.section12 > .sec-inner > .img-wrap > .img-box:nth-child(5) > a {
    right: 3%;
    bottom: 17%;
}


.section12 > .sec-inner > .img-wrap > .sub-title {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    top: 120px;
}

.section12 > .sec-inner > .img-wrap > .sub-title > span {
    font-size: 28px;
    color: #d2bda4;
    margin-left: 10px;
}



.section13 { width: 100%; height: 100vh; position: relative; z-index: 20; background: #FBF7F3; }
.section13 > .sec-inner { display: flex; justify-content: space-between; }
.section13 > .sec-inner > div { width: 50%; height: 100vh; position: relative; }
.section13 > .sec-inner > .loca-wrap { display: flex; flex-direction: column; justify-content: center; padding-left: 120px; }

.section13 > .sec-inner > .loca-wrap > a { display: flex; align-items: center; }
.section13 > .sec-inner > .loca-wrap > a > span { font-weight: 400; margin-left: 20px; }

.section13 > .sec-inner > .loca-wrap > .loca-box { margin-top: 40px; }
.section13 > .sec-inner > .loca-wrap > .loca-box > .sub-title { font-size: 40px; font-weight: 600; color: #776147; margin-bottom: 30px; }
.section13 > .sec-inner > .loca-wrap > .loca-box > .desc { font-size: 30px; font-weight: 500; color: #3f3f3f; }

.section13 > .sec-inner > .loca-wrap > .time-box { margin-top: 40px; }
.section13 > .sec-inner > .loca-wrap > .time-box > .sub-title { font-size: 40px; font-weight: 600; color: #776147; margin-bottom: 30px; }
.section13 > .sec-inner > .loca-wrap > .time-box > ul { display: flex; align-items: center; margin-top: 12px; }
.section13 > .sec-inner > .loca-wrap > .time-box > ul:first-child { margin-top: 0; }
.section13 > .sec-inner > .loca-wrap > .time-box > ul > li { font-weight: 500; color: #3f3f3f; font-size: 30px; letter-spacing: -0.05em; }
.section13 > .sec-inner > .loca-wrap > .time-box > ul > li:first-child { width: 254px; margin-right: 20px; }

.section13 > .sec-inner > .loca-wrap > .time-box > .desc { margin-top: 26px; color: #D75134; font-size: 26px; font-weight: 600; }
.section13 > .sec-inner > .loca-wrap > .time-box > .desc:last-child { margin-top: 5px; }

.section13 > .sec-inner > .loca-wrap > .desc-wrap { margin-top: 40px; }
.section13 > .sec-inner > .loca-wrap > .desc-wrap > .login-box { margin-bottom: 10px; }
.section13 > .sec-inner > .loca-wrap > .desc-wrap span,
.section13 > .sec-inner > .loca-wrap > .desc-wrap p,
.section13 > .sec-inner > .loca-wrap > .desc-wrap a { color: #999; }

.section13 > .sec-inner > .map-wrap > div { width: 100%; height: 100%; position: relative; }

.section13 > .sec-inner > .map-wrap .root_daum_roughmap .wrap_map { height: 100%; }
.section13 > .sec-inner > .map-wrap .root_daum_roughmap .wrap_controllers { display: none; }


.section14 { width: 100%; height: 100vh; position: relative; z-index: 20; background: #FBF7F3; }
.section14 > .sec-inner > .text-wrap { padding-top: 120px; }
.section14 > .sec-inner > .text-wrap > .sub-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 22px;
}

.section14 > .sec-inner > .text-wrap > .title {
    font-size: 70px;
    font-weight: 600;
    color: #776147;
}
.section14 > .sec-inner > .text-wrap > a { display: inline-flex; align-items: center; justify-content: center; padding: 14px 30px; background: #3DAD48; border-radius: 60px; margin-top: 50px; position: relative; z-index: 2; }
.section14 > .sec-inner > .text-wrap > a > span { font-size: 24px; font-weight: 600; color: #fff; margin-right: 8px; letter-spacing: -0.05em; }
.section14 > .sec-inner > .img-box { position: absolute; left: 50%; bottom: 0; width: 90%; transform: translateX(-50%); }
.section14 > .sec-inner > .img-box > img { width: 100%; }



.footer { border-top: 1px solid #CECECE; padding: 80px 200px; margin-top: 150px; }
.footer .footer-inner .logo-call-box { display: flex; align-items: center; justify-content: space-between; }
.footer .footer-inner .logo-call-box > .call-box { display: flex; align-items: center; }
.footer .footer-inner .logo-call-box > .call-box > a { display: flex; align-items: center; margin-right: 16px; }
.footer .footer-inner .logo-call-box > .call-box > a:last-child { margin-right: 0; }
.footer .footer-inner .logo-call-box > .call-box > a > span.txt { padding: 4.5px 5.5px; background: #FCF7F0; border-radius: 5px; font-weight: 600; font-size: 12px; }
.footer .footer-inner .logo-call-box > .call-box > a > span.num { font-weight: 400; font-size: 26px; letter-spacing: -0.05em; }
.footer .footer-inner .logo-call-box > .call-box > a > span:last-child { margin-left: 7px; }

.footer .footer-inner .desc-wrap { margin-top: 40px; }
.footer .footer-inner .desc-wrap > span,
.footer .footer-inner .desc-wrap > p,
.footer .footer-inner .desc-wrap > p > a { color: #999; }
.footer .footer-inner .desc-wrap > .login-box { margin-top: 30px; }
.footer .footer-inner .desc-wrap > .login-box span { margin-right: 10px; }
.footer .footer-inner .desc-wrap > .login-box span:last-child { margin-right: 0; }
.footer .footer-inner .desc-wrap > .login-box a { padding: 6px 19.5px; border-radius: 5px; }
.footer .footer-inner .desc-wrap > .login-box a.color-black { background: #FCF7F0; }
.footer .footer-inner .desc-wrap > .login-box a.color-white { background: #FCB96D; }


.footer-event { width: 100%; height: 100vh; position: relative; z-index: 20; background: #FBF7F3; opacity: 0; transition: opacity 1s ease-in-out; }
.footer-event.hidden { display: none; }
.footer-event > .sec-inner > .text-wrap { padding-top: 120px; }
.footer-event > .sec-inner > .text-wrap > .sub-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 22px;
}

.footer-event > .sec-inner > .text-wrap > .title {
    font-size: 70px;
    font-weight: 600;
    color: #776147;
}
.footer-event > .sec-inner > .text-wrap > a { display: inline-flex; align-items: center; justify-content: center; padding: 14px 30px; background: #3DAD48; border-radius: 60px; margin-top: 50px; position: relative; z-index: 2; }
.footer-event > .sec-inner > .text-wrap > a > span { font-size: 24px; font-weight: 600; color: #fff; margin-right: 8px; letter-spacing: -0.05em; }
.footer-event > .sec-inner > .img-box { position: absolute; left: 50%; bottom: 0; width: 90%; transform: translateX(-50%); }
.footer-event > .sec-inner > .img-box > img { width: 100%; }



/* 게시판 페이지 */
.pg_wrap { margin-top: 80px; float: none; display: flex; }
.pg_wrap > .pg { display: flex; align-items: center; justify-content: center; margin: 0 auto; width: 100%; text-align: center; }
.pg_page { background: none; color: #222222; font-size: 20px; font-weight: 600; border: none; width: 50px; padding: 0; }
.pg_page.pg_start { background: url('../img/btn_first.gif') no-repeat 50% 50% #fff; }
.pg_page.pg_end { background: url('../img/btn_end.gif') no-repeat 50% 50% #fff; }
.pg_current { background: #FCB96D; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 20px; font-weight: 600; width: 50px; height: 50px; border-radius: 100%; border: none; }
.pg_page:hover { background-color: #fff; }