.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;  
}

/* MAIN_VISUAL */
.main_visual_wrap{
    width: 100%;
    height: 100vh;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
}
.main_visual_wrap .swiper-slide{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}
.main_visual_txt_wrap{
    position: absolute;
    top: calc(var(--header_height) + 80px);
    color: #fff;
    opacity: 0%;
    animation: intro_main_visual_txt 1s forwards;
    animation-delay: .5s;
}
@keyframes intro_main_visual_txt{
    100%{
        opacity: 100%;
    }
}
.main_visual_sub_title{
    font-size: 12px;
    font-family: var(--font_mj);
    letter-spacing: 5px;
}
.main_visual_sub_title span{
    letter-spacing: unset;
}
.main_visual_title{
    width: 350px;
    margin: 20px 0;
}
.main_visual_title img{
    max-width: 100%;
}
.main_visual_sub_txt p{
    font-size: 18px;
    color: #fff;
    opacity: .5;
    line-height: 1.5;
}
.main_visual_sub_txt p + p{
    margin-top: 20px;
}
.customer_btn_wrap{
    position: absolute;
    bottom: 110px;
    right: calc(var(--rel_padding) + 30px);
    z-index: 2;
    opacity: 0%;
    animation: intro_ani_customer_btn 1s forwards;
    transform: translateY(20px);
    animation-delay: .5s;
}
@keyframes intro_ani_customer_btn{
    100%{
        opacity: 100%;
        transform: translateY(0);
    }
}
.customer_btn_wrap a{
    width: 106px;
    height: 106px;
    border: 1px solid #fff;
    border-radius: calc(1px / 0);
    color: #fff;
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-decoration: none;
    font-size: 15px;
    transition: color .6s ease-in-out;
}
.customer_btn_wrap a g{
    transition: all .6s ease-in-out;
}
.customer_btn_wrap a::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 136%;
    height: 136%;
    background-image: url('../img/customer_txt_line.svg');
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
    filter: brightness(10);
    transition-delay: .4s;
    transition: filter .6s ease-in-out;
    animation: cusomer_btn_rotate 10s linear infinite;
}
body.fp-viewing-sec1:has(.visu_c,) .customer_btn_wrap svg{
    filter: brightness(0);
}
body.fp-viewing-sec1:has(.visu_c) .customer_btn_wrap a{
    color: #000;
    border: 1px solid #000;
}
body.fp-viewing-sec1:has(.visu_c) .customer_btn_wrap a::after{
    filter: brightness(0);
}
@keyframes cusomer_btn_rotate {
    0%{transform: translate(-50%, -50%) rotate(0deg);}
    100%{transform: translate(-50%, -50%) rotate(360deg);}
}
.customer_btn_wrap a::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0%);
    width: 130%;
    height: 130%;
    background-color: #fff;
    border-radius: calc(1px / 0);
    transition: all .6s ease-in-out;
    z-index: -1;
}
.customer_btn_wrap a:hover::before{
    transform: translate(-50%, -50%) scale(1.1);
}
.customer_btn_wrap a:hover g{
    stroke: var(--m_color);
}
.customer_btn_wrap a:hover{
    color: var(--m_color);
}
.customer_btn_wrap a:hover::after{
    filter: brightness(1);
}
.scroll_down_wrap{
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    opacity: 0%;
    animation: intro_ani_scroll_down 1s forwards;
    animation-delay: .5s;
}
@keyframes intro_ani_scroll_down{
    100%{
        opacity: 100%;
        transform: translateX(-50%) translateY(0);
    }
}
.scroll_down{
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
}
.scroll_down_arrow{
    width: 12px;
    height: 6px;
    animation: scroll_down 3s infinite;
}
.scroll_down_arrow img{
    max-width: 100%;
}
@keyframes scroll_down {
    0%{transform: translateY(0px);}
    50%{transform: translateY(5px);}
    100%{transform: translateY(0px);}
}

/* SECTION */
.section:not(.sec1) .rel_wrap{
    position: relative;
}

/* Calendar Section */
.sec1_5{
  background-image: url(../img/main_visual_bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right center;
}
.sec1_5 .fp-tableCell{
    background: #00000054;
}
.calender_wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1255px;
  gap: 10px;
  display: flex;
  flex-direction: column;
}

.calender_header {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  font-size: 32px;
  font-weight: 300;
  color: #fff;
  margin-bottom: 40px;
  transform: translateY(10px);
  opacity: 0;
  flex-direction: column;
}

.calender_header b {
  font-weight: 600;
}
.calender_header .sec_sub_title{
    border-bottom: 1px solid #fff;
}
.cal_row {
  height: 206px;
  display: flex;
  gap: 10px;
}

.cal_box {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0);
  transform: scale(.8);
  opacity: 0;
}

.cal_box::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    opacity: .25;
    filter: brightness(.7);
    transition: all .3s ease-in-out;
}

.cal_box:hover {
  border: 1px solid rgba(255, 255, 255, 1);
}

.cal_box:hover:after {
  opacity: .4;
  filter: brightness(1);
}

.cal_date {
  font-size: 35px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  margin-bottom: 20px;
}

.cal_date span {
  font-size: 20px;
  font-weight: 400;
  margin-left: 5px;
}

.cal_detail {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -.2px;
  color: #fff;
  text-align: center;
}
.cal_open{
    font-size: 30px;
    font-weight: 700;
}

.calender_wrap .cal_row .cal_box::after {
  background-color: var(--cal_color);
}
.calender_wrap .cal_row:nth-child(3) .cal_box:nth-child(3) {
  flex: 2;
}

.fp-viewing-sec1_5 .calender_header {
  opacity: 1;
  transform: translateY(0);
  transition: all 1.2s ease-out;
}

.fp-viewing-sec1_5 .cal_box {
  opacity: 1;
  transform: scale(1);
  transition: all 0.8s ease-out;
}

.sec2 .sec_sub_title{
    margin-bottom: 40px;
}
.sec2 .sec_title{
    margin-bottom: 60px;
}
.sec2 .sec_txt_wrap{
    position: absolute;
    top: 50%;
    left: var(--rel_padding);
    transform: translateY(-50%);
    opacity: 0%;
}
.sec2_img_wrap{
    position: absolute;
    top: 50%;
    right: var(--rel_padding);
    transform: translateY(-50%);
    display: flex;
    gap: 20px;
    align-items: center;
}
.sec2_img_wrap .sec2_img{
    opacity: 0%;
}
.sec2_img_wrap .sec2_img:nth-child(1){
    width: 200px;
    height: 660px;
    transform: translateY(100px);
    overflow: hidden;
}
.sec2_img_wrap .sec2_img:nth-child(1) img{
    max-height: 100%;
    transition: all .6s ease-in-out;
    animation: sec_img_move 40s linear infinite;
}
@keyframes sec_img_move {
    0%{transform: translateX(0%);}
    50%{transform: translateX(-60%);}
    100%{transform: translateX(0%);}
}

.sec2_img_wrap .sec2_img:nth-child(2){
    height: 700px;
}
.sec2_img_wrap .sec2_img:nth-child(2) img{
    max-height: 100%;
}

.sec3_swiper .swiper-slide{
    width: 100vw;
    height: 100vh;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    cursor: pointer;
}
.sec3 .sec_txt_wrap{
    position: absolute;
    top: calc(var(--header_height) + 20px);
    text-align: center;
    opacity: 0%;
    transform: translateY(20px);
    transition: all .6s ease-in-out;
    transition-delay: .5s;
}
.fp-viewing-sec3 .swiper-slide.swiper-slide-active .sec_txt_wrap{
    transform: translateY(0);
    opacity: 100%;
}
.sec3 .sec_sub_title{
    margin-bottom: 20px;
}
.sec3 .sec_sub_title_num{
    margin-bottom: 10px;
}
.sec3 .sec_title{
    margin-bottom: 40px;
    position: relative;
}
.sec3 .sec_title strong{
    color: #000;
}
.sec3 .sec_title::after{
    content: "";
    position: absolute;
    width: 30px;
    height: 1px;
    background-color: #000;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}
.sec3_swiper .swiper-wrapper .swiper-slide:nth-child(1){
    background-image: url('../img/main_slide_01.jpg');
}
.sec3_swiper .swiper-wrapper .swiper-slide:nth-child(2){
    background-image: url('../img/main_slide_02.jpg');
}
.sec3_swiper .swiper-wrapper .swiper-slide:nth-child(3){
    background-image: url('../img/main_slide_03.jpg');
}
.sec3_swiper .swiper-wrapper .swiper-slide:nth-child(4){
    background-image: url('../img/main_slide_04.jpg');
}
.sec3_swiper .swiper-wrapper .swiper-slide:nth-child(5){
    background-image: url('../img/main_slide_05.jpg');
}
.sec3_swiper .swiper-wrapper .swiper-slide:nth-child(6){
    background-image: url('../img/main_slide_06.jpg');
}
.sec_bg_txt{
    position: absolute;
    right: var(--rel_padding);
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    opacity: 0%;
    transform: translateY(20px);
    transition: all .6s ease-in-out;
    transition-delay: 1s;
}
.fp-viewing-sec3 .swiper-slide.swiper-slide-active .sec_bg_txt{
    transform: translateY(0);
    opacity: 100%;
}
.sec3_swiper .swiper-wrapper .swiper-slide:nth-child(1) .sec_bg_txt{
    width: 461px;
}
.sec3_swiper .swiper-wrapper .swiper-slide:nth-child(2) .sec_bg_txt{
    width: 490px;
}
.sec3_swiper .swiper-wrapper .swiper-slide:nth-child(3) .sec_bg_txt{
    width: 338px;
}
.sec3_swiper .swiper-wrapper .swiper-slide:nth-child(4) .sec_bg_txt{
    width: 257px;
}
.sec3_swiper .swiper-wrapper .swiper-slide:nth-child(5) .sec_bg_txt{
    width: 339px;
}
.sec3_swiper .swiper-wrapper .swiper-slide:nth-child(6) .sec_bg_txt{
    width: 210px;
}
.sec3_swiper .swiper-pagination{
    bottom: 60px;
    gap: 20px;
    display: flex;
    gap: 20px;
    justify-content: center;
}
.sec3_swiper .swiper-pagination .swiper-pagination-bullet{
    opacity: 1;
    border: 1px solid #000;
    background-color: transparent;
    margin: 0;
}
.sec3_swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background-color: #000;
    position: relative;
}
.sec3_swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    border-radius: calc(1px / 0);
}
.sec_swiper_cursor {
  width: 60px;
  height: 60px;
  background-image: url(../img/cursor_icon_drag.png);
  background-size: cover;
  position: absolute;
  pointer-events: none;
  display: none; /* 처음엔 숨김 */
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* ========================================
   SEC4 - UNIT PLAN
======================================== */
.section.sec4 {
    background-image: url(../img/main_unit_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

/* 배경 장식 - 잎사귀 */
.sec4 .leaf {
    width: 460px;
    height: 508px;
    background-image: url(../img/leaf.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    right: 0;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 로고 */
.sec4_sujain_logo {
    height: 594px;
    width: 163px;
    position: absolute;
    top: 50%;
    left: 150px;
    transform: translateY(-50%);
}

.sec4_sujain_logo img {
    max-width: 100%;
}

/* 컨텐츠 래퍼 */
.sec4_content_wrap {
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sec4_flex_wrap {
    display: inline-flex;
    gap: 120px;
    margin: 0 auto;
    min-width: 960px;
}

/* 왼쪽 영역 */
.sec4_left {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.sec4_title_img {
    margin-bottom: 35px;
}

.sec4_left_txt {
    font-size: 14px;
    color: #000;
    font-weight: 200;
    margin-bottom: 30px;
}

.sec4_left_txt b {
    font-weight: 700;
}

.sec4_obj_wrap {
    width: 388px;
    height: 121px;
    margin-bottom: 50px;
}

.sec4_obj_wrap img {
    max-width: 100%;
}

/* 버튼 영역 */
.sec4_left_btn_wrap {
    display: flex;
    gap: 20px;
}

.sec4_left_btn_wrap > a {
    height: 40px;
    display: flex;
    border: 1px solid #222;
    border-radius: calc(1px / 0);
    width: 140px;
    color: #000;
    font-size: 13px;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.sec4_left_btn_wrap > a:hover {
    border: 1px solid rgba(0, 0, 0, 0.6);
    background-color: #fff;
    color: var(--m_color);
}

/* Swiper 화살표 버튼 */
.sec4_swiper_btn_wrap {
    display: flex;
    gap: 40px;
}

/* 오른쪽 Swiper */
.sec4_right_swiper {
    background-color: rgb(140 140 140 / 40%);
    width: 500px;
    height: 500px;
    border-radius: calc(1px / 0);
    overflow: hidden;
}

.sec4_right_swiper img {
    width: 90%;
}

/* 하단 타입 선택 버튼 */
/* 단지 선택 탭 */
.sec4_complex_tab {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 20px;
    border-bottom: 1px solid #bbb;
}

.complex_tab_btn {
    color: #666;
    height: 50px;
    width: 150px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 500;
    background-color: transparent;
    position: relative;
}
.complex_tab_btn.active {
    color: #000;
    font-weight: 700;
}

.complex_tab_btn.active::after{
    background-color: #000;
    content: "";
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    position: absolute;
}

/* 단지별 버튼 그룹 표시/숨김 */
.sec4_bottom_btn {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.sec4_bottom_btn.active {
    display: flex;
}

.sec4_bottom_btn button {
    background: transparent;
    border: 1px solid #222;
    color: #000;
    height: 55px;
    width: 185px;
    border-radius: calc(1px / 0);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

/* 각 버튼별 색상 변수 */

.sec4_bottom_btn button:hover:not(.active) {
    border: 1px solid rgba(0, 0, 0, 0.6);
    background-color: rgba(255, 255, 255, 0.8);
    color: var(--main_unit_color);
}

.sec4_bottom_btn button.active {
    background-color: var(--main_unit_color);
    border: 1px solid var(--main_unit_color);
}

/* 애니메이션 초기 상태 */
.sec4_left > * {
    opacity: 0;
    transform: translateX(-20px);
}

.sec4_right_swiper {
    opacity: 0;
    transform: translateX(20px);
}

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

/* 활성화 시 애니메이션 */
.fp-viewing-sec4 .sec4_left > * {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.8s ease-out;
    transition-delay: calc(var(--i, 0) * 0.2s);
}

.fp-viewing-sec4 .sec4_right_swiper {
    opacity: 1;
    transform: translateX(0);
    transition: all 1.2s ease-out;
}

.fp-viewing-sec4 .sec4_bottom_btn {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s ease-out;
    transition-delay: 0.4s;
}

/* 이전 스타일 유지 (사용하지 않으면 삭제 가능) */
.sec4 .rel_wrap{
    position: relative;
    width: 100%;
    height: 100%;
}
.sec4_img_01{
    display: none; /* 기존 스타일 비활성화 */
}
.sec4_img_02{
    display: none; /* 기존 스타일 비활성화 */
}
.sec4_title{
    display: none; /* 기존 스타일 비활성화 */
}
body.fp-viewing-sec5{
    background-color: #22211E;
}
.sec5 .rel_wrap{
    height: 100%;
}
.s1 .rel_wrap::after{
    position: absolute;
    content: "";
    width: 1px;
    height: 50%;
    background-color: #000;
    top: 0;
    right: calc(var(--rel_padding) + 420px);
    pointer-events: none;
    transition: all .6s ease-in-out;
    z-index: -1;
}

.fp-viewing-sec5 .sec5 .s1 .rel_wrap::after{
    background-color: #777;
}
.s1 .rel_wrap::before{
    position: absolute;
    content: "";
    height: 1px;
    width: calc(100% - (var(--rel_padding)) - 545px);
    background-color: #777;
    top: 50%;
    right: 0;
    z-index: -1;
}
.sec5_slide_content{
    position: absolute;
    opacity: 0%;
}
.sec5_title{
    font-size: 44px;
    font-family: var(--font_mj);
    color: #fff;
}
.sec5_title b{
    font-family: var(--font_mj);
    font-weight: 700;
}
.sec5 .sec_title{
    color: #fff;
    font-size: 20px;
    margin-bottom: 20px;
}
.sec5 .sec_txt{
    color: #fff;
    font-size: 16px;
    opacity: .5;
}
.sec5_img_wrap img{
    max-width: 100%;
}
.s1 .sec5_title{
    position: absolute;
    bottom: 40px;
    left: -220px;
}
.s1 .sec5_img_wrap{
    width: 578px;
    height: 400px;
}
.s1 .sec_txt_wrap{
    position: absolute;
    margin-top: 50px;
    right: 0px;
}
.s1 .sec5_slide_content{
    top: 50%;
    transform: translateY(calc(-50% + 20px));
    transition: all .6s ease-in-out;
    transition-delay: 1s;
    right: calc(100% - (var(--rel_padding)) - 700px);
}
.fp-viewing-sec5 .s1 .sec5_slide_content{
    opacity: 100%;
    transform: translateY(calc(-50%));
}
.s2 .rel_wrap::before{
    position: absolute;
    content: "";
    height: 1px;
    width: calc(100% - (var(--rel_padding)) - 545px);
    background-color: #777;
    top: 50%;
    left: 0;
    z-index: -1;
}
.s2 .sec5_title{
    position: absolute;
    top: 160px;
    left: -210px;
    text-align: right;
}
.s2 .sec5_img_wrap{
    width: 450px;
    height: 540px;
}
.s2 .sec5_slide_content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 20px));
    transition: all .6s ease-in-out;
    transition-delay: 1s;
}
.swiper-slide.s2.swiper-slide-active .sec5_slide_content{
    opacity: 100%;
    transform: translate(-50%, -50%);
}
.s2 .sec_txt_wrap{
    position: absolute;
    right: -360px;
    bottom: 0;
}
.s3 .sec5_slide_content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 20px));
    transition: all .6s ease-in-out;
    transition-delay: 1s;
}
.swiper-slide.s3.swiper-slide-active .sec5_slide_content{
    opacity: 100%;
    transform: translate(-50%, -50%);
}
.s3 .sec5_img_wrap{
    width: 450px;
    height: 540px;
}
.s3 .sec5_img_wrap img:nth-child(2){
    position: absolute;
    top: -80px;
    right: -260px;
    z-index: 2;
    width: 340px;
}
.s3 .sec5_title{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -250px;
}
.s3 .sec_txt_wrap{
    position: absolute;
    top: 50%;
    right: -350px;
}
.s4 .sec5_slide_content{
    position: absolute;
    top: 50%;
    left: var(--rel_padding);
    transform: translateY(calc(-50% + 20px));
    transition: all .6s ease-in-out;
    transition-delay: 1s;
}
.swiper-slide.s4.swiper-slide-active .sec5_slide_content{
    opacity: 100%;
    transform: translateY(-50%);
}
.sec5_img_wrap{
    width: 887px;
    height: 540px;
}
.s4 .sec5_title{
    position: absolute;
    right: -370px;
}
.s4 .sec_txt_wrap{
    position: absolute;
    bottom: 0;
    right: -415px;
}
.sec_txt span{
    opacity: .3;
}
.loc_sub_title{
    margin-bottom: 40px;
}
.loc_wrap{
    opacity: 0%;
    transform: translateY(20px);
    transition: all .6s ease-in-out;
    transition-delay: 1s;
}
.fp-viewing-sec6 .loc_wrap,.fp-viewing-footer .loc_wrap{
    opacity: 100%;
    transform: translateY(0px);
}
.main_visual_txt_wrap.visual_dark_txt .main_visual_sub_title{
    color: #333;
}
.main_visual_txt_wrap.visual_dark_txt .main_visual_sub_txt p{
    color: #333;
}

.header_top_menu_wrap .menu_depth1 > a{
    color: var(--header_color);
};