@media(max-width:1600px){
    html{font-size: 12px;}
    .inner{width: 100%;}
    .quick ul{width: 140px;}
    .quick ul li{height: 42px;}
    .quick ul li:nth-of-type(1):before, .quick ul li:nth-of-type(2):before, .quick ul li:nth-of-type(3):before{width: 15px; height: 15px;}
    .main_menu>ul>li{width: 200px;}
    .main_menu>ul>li>ul{min-width:140px;}

    /*main*/
    .main2>img{right: 220px; top:100px;}
    .main2 .swiper-pagination{right: 360px !important;}
    .main2 .main2_slider .swiper-slide>div:nth-of-type(1){width: 1200px;}
    .main2 .main2_slider .swiper-wrapper > div >div:nth-of-type(2){height: 450px;}
    .main3 .inner>ul li{height: 330px;}
    .main3 .inner>ul li>div{height: 250px;}
    .main4>div>.inner>ul li img{width: 50px;}

    /*sub*/
    .sub2_1 .sub_line{width: 87%;}
    .sub3_1 .inner > ul li:after{right: -30px;}
    .sub3_1 .inner > div ul li{height: 405px;}
    .sub3_3 .inner > div ul li{height: 480px;}
    .sub2_2 .inner .sub2_slider .swiper-slide img{width: 700px;}
    .pc-br {
    /* 모바일에서는 이 줄 바꿈을 숨깁니다. */
    display: none; }
    /*main*/
}


@media (max-width: 1200px){
    .main_menu{display: none;}
    .menu{display: block;}
    .menu .login{height: 82px; right: 90px; font-size: 1.2rem;}
    .menu .m_menu2.on{width: 50%;}
    .logo{color: #fff; left: 30px; height: 80px;}
    .inner{width: 90%; padding: 80px 0;}
    .main2>img{right: 10%; top: 90px;}
    .main2 .main2_slider{height: auto;}
    .main2 .swiper-wrapper{height: auto;}
    .main2 .main2_slider .swiper-slide>div:nth-of-type(1){width: 85%; margin-top: 120px;}
    .main2 .main2_slider .swiper-slide .slide-image {
    height: calc(350 / 640 * 100vw);
  }
    /*.main2 .main2_slider .swiper-wrapper > div >div:nth-of-type(2){height: calc(250/640*100vw);}*/

    /* ✅ 도트 위치를 글자보다 살짝 아래로 내림 */
    .main2 .swiper-pagination{
        top: 140px !important;    /* 기존 102px → 140px 정도로 */
        right: 8% !important;     /* 그리 넓지 않은 화면에서 오른쪽 끝에 자연스럽게 */
    }
    .main2 .prev_next{top: 65%;}
    .main3 .inner>ul li{height: calc(135/640*100vw);}
    .main3 .inner>ul li>div{height: calc(100/640*100vw);}
    .main3 .inner>ul li p{font-size: 1.4rem; top: 7%;}
    .main4 >div>.inner{justify-content: space-between;}
    .main4>div>.inner>ul{width: 70%;}
    .main4 >div>.inner>div{width: 30%;}

    .input_s{width: 100%;}
    .login_p .input_s, .join_p .input_s, .join_e .input_s{width: 50%; margin: 0 auto;}
    .login_p .input_s .contact > div:last-child{display: none; margin-top: 20px; background: #2b2b2b; color: #fff;}
    .login_p .input_s .contact > div:last-child a{position: absolute; display: block; width: 100%; height: 100%; left: 0; top: 0;}
    .login_p .sub_top, .join_p .sub_top, .join_e .sub_top{height: 80px;}
    .login_p .inner, .join_p .inner, .join_e .inner{width: 90%;}
    .login_p .inner > div:nth-of-type(2){font-size: 1.2rem;}
    .join_p .inner>div>div{width: 50%; margin: 0 auto; margin-bottom: 20px;}
    
    .sub_top{height: calc(300/640*100vw); font-size: 2rem;}
    .sub_menu ul li{width: calc(100% / 3)}
    .sub_menu ul li:first-child{border-left:0;}
    .sub_menu ul li:last-child{border:0;}
    .sub_line{display: none;}
    .sub1_1 .inner{padding: 70px 0;}
    .sub1_1 .inner > div{display: block;}
    .sub1_1 .inner > div > div:nth-of-type(1){width: 90%; height: calc(250/340*100vw); margin: 0 auto;}
    .sub1_1 .inner > div > div:nth-of-type(2){margin-top: 20px; text-align: center;}
    .sub2_6 .inner ul li img, .sub2_3 .inner ul li img {width: calc(200/640*100vw); height: calc(200/640*100vw);}
    .sub2_2 .inner .sub2_slider{margin: 0 auto;}
    .sub2_2 .inner .sub2_slider .swiper-slide{display: block;}
    .sub2_2 .inner .sub2_slider .swiper-slide img{width: 100%; height: calc(350/640*100vw); top: auto;}
    .sub2_2 .inner .sub2_slider .swiper-slide div{width: 100%; top: auto;}
    .sub2_2 .prev_next{right: auto; bottom: 0; position: relative; margin-bottom: 50px;}
    .sub2_2 .inner .sub2_slider .swiper-slide > div > p:nth-of-type(1){margin-bottom: 10px;}
    .sub2_2 .inner .sub2_slider .swiper-slide b{left: 0;}
    .sub3_1 .inner > ul{height: auto;}
    .sub3_1 .inner > ul li{width: 15%; height: 150px; border-radius: 20px; text-align: center;}
    .sub3_1 .inner > ul li:after{right: -25%;}

    .sub4_1 .inner > div:nth-of-type(2){height: calc(250/640*100vw);}
    
    .sub4_2 .inner > div > ul{flex-direction: column;}
    .sub4_2 .inner > div > ul li{width: 100%; margin-bottom: 50px;}
    .sub4_2 .inner > div > ul li img{width: 100%; height: calc(200/640*100vw); object-fit: cover;}
    .sub4_2 .inner > div > ul li>b{font-size: 1.7rem;}
    .sub4_2 .inner > div > ul li>p{font-size: 1.3rem;}

    .sub4_3 .inner .sub4_3_slider{height: calc(250/640*100vw);}

    .footer{padding-bottom: 50px;}
    .footer .inner{padding: 50px 0;}
    .footer .inner > div{display: block;}
    .footer .inner > div > div:nth-of-type(2) p{top: auto;margin-top:30px;}
    .footer .fs{top: auto; width: 150px; height: 28px; margin-top:10px; position: relative;}
    .footer .fs li{height: 38px; top: -25px; left: 150px; margin-top: 0;}
    .footer .fs li a{top: 10px;}
    .footer .fs:hover{padding-bottom: 0; padding-right: 150px;}
    .footer .inner > div > div:nth-of-type(1) > p:nth-of-type(1) {
        /* 매우 긴 단어나 줄이 화면 밖으로 나가지 않도록 강제 줄 바꿈 */
        word-break: break-all; 
        white-space: normal; /* 만약을 위해 추가 (보통 기본값) */
    }

        .pc-br {
    /* 모바일에서는 이 줄 바꿈을 숨깁니다. */
    display: none; }
    /*main*/
}



/*pad*/
@media (max-width: 1025px) and (min-height: 1024px){
.pc-br {
    /* 모바일에서는 이 줄 바꿈을 숨깁니다. */
    display: none; }
    /*main*/
}
    


/*mobile*/
@media(max-width:640px){
    .menu{display: block;}
    .menu .login{display: none;}
    .main_menu{display: none;}    
    .menu .m_menu2.on{width: 80%;}
    .inner{width: 90%; padding: 50px 0;}

    .logo>div:nth-of-type(1){width: 80px; height: 30px; background-size: cover; margin-top: -70px; margin-left: -15px;}
    
    .pc-br {
    /* 모바일에서는 이 줄 바꿈을 숨깁니다. */
    display: none; }
    /*main*/
    
    .main2>img{right: 20px; top: 39%; width: 15%;}
    .main2 .main2_slider .swiper-slide>div:nth-of-type(1){width: 90%; margin: 65px auto;}
    .main2 .main2_slider .swiper-slide div > p{font-size: 1.4rem;}
    .main2 .main2_slider .swiper-slide div > p:nth-of-type(3){font-size: 1.2rem; margin-top: 20px; left: 3px;}
    .main2 .main2_slider .swiper-slide .slide-image {
    height: calc(300 / 640 * 100vw);
  }

  /* main2 슬라이드 이미지 박스 고정 높이 해제 */
  .main2 .main2_slider .swiper-wrapper > div > div:nth-of-type(2),
  .main2 .main2_slider .swiper-slide .slide-visual {
      height: auto !important;   /* ← 여기 핵심 */
  }

  /* 혹시 남아 있는 아래 여백 제거 */
  .main2 .main2_slider .swiper-slide {
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
  }

    /*.main2 .main2_slider .swiper-wrapper > div >div:nth-of-type(2){height: calc(350/640*100vw);}*/
    .main2 .prev_next{display: none;}    


    .main3 .inner{padding: 20px 0;}
    .main3 .inner>div{margin: 50px 0 15px 0;}
    .main3 .inner>ul{flex-wrap: wrap; margin-top: 20px;}
    .main3 .inner>ul li{width: calc(100% / 2.1); height: calc(320/640*100vw); margin-top: 20px;}
    .main3 .inner>ul li>div{height: calc(250/640*100vw);}
    .main3 .inner>ul li p{top: 6%; font-size: 1.3rem;}
    .main3 .inner>ul li:nth-of-type(1)>div{background-position-y: 30%;}
    .main3 .inner>ul li:nth-of-type(4)>div{background-position-y: 60%;}

 

    .main4 >div{height: auto; padding: 50px 0; margin-top: 50px;}
    .main4 >div>.inner{display: block; padding: auto; height: auto;}
    .main4 >div>.inner>div{width: 100%; text-align: center;}
    .main4>div>.inner>ul{width: 100%; margin-top: 30px; padding: 20px 0; height: auto;}
    .main4>div>.inner>ul li p{margin-top: 12px;}

    /*sub*/
    .sub_top{height: calc(400/640*100vw); font-size: 2rem;}


    .sub1_2 .inner > div:nth-of-type(1){width: 100%; display: block;}
    .sub1_2 .inner > div:nth-of-type(1) > div{width: 100%;}
    .sub1_2 .inner > div:nth-of-type(2){margin-top: 70px;}
    .sub1_2 .inner > div:nth-of-type(2) > ul{display: block;}
    .sub1_2 .inner > div:nth-of-type(2) > ul li{width: 100%; font-size: 1.3rem; font-weight: 400; margin-top:30px;}
    .sub1_2 .inner > div:nth-of-type(2) > ul li > div{height: calc(300/640*100vw);}

    .sub2_1 .inner ul{width: 100%; margin: 10px auto;}
    .sub2_1 .inner ul li{flex-direction: column; justify-content: center; }
    .sub2_1.on1 .inner ul li:nth-of-type(1), .sub2_1.on1 .inner ul li:nth-of-type(3), .sub2_1.on1 .inner ul li:nth-of-type(5){flex-direction: column-reverse;}
    .sub2_1 .inner ul li .sub2_1_tx{z-index: 1;}
    .sub2_1 .inner ul li > span{display: none;}
    .sub2_1 .inner ul li .sub2_1_tx{width: 90%;}
    .sub2_1.on1 .inner ul li img{width: 100%; height: calc(400/640*100vw); margin-top: 20px;}
    .sub2_1_btn{width: 80%; margin-top: auto;}
    .sub1_1 .section-paradise > div:nth-of-type(2) > p:nth-of-type(1) {margin-top: 30px;}

    .section-paradise, .section-stay {
    display: flex; /* 이미 적용되어 있을 수 있으나, 명시적으로 다시 적어줍니다 */
    flex-direction: column; /* 가로 -> 세로로 쌓기 */
    align-items: center; /* 세로로 쌓인 아이템들을 수평 중앙에 배치 */
    width: 100%; /* 너비를 100%로 보장 */
    margin: 0; /* 혹시 모를 외부 마진 초기화 */}

    .section-paradise > div:nth-of-type(1), 
    .section-stay > div:nth-of-type(1) {
    width: 100%; /* 600px 고정 너비 해제 */
    margin: 0 auto; /* 중앙 정렬 */
    height: calc(400/640*100vw); /* 이미지 높이를 화면 비율에 맞게 조정 (예시) */}

    /* 텍스트 영역 (두 번째 자식) */
    .section-paradise > div:nth-of-type(2),
    .section-stay > div:nth-of-type(2) {
    /* PC에서 적용했던 고정 너비와 마진을 덮어쓰기 */
    width: 90%; /* 화면 너비에 맞게 유동적으로 설정 */
    margin: 30px auto; /* 위아래 간격 30px, 좌우 auto로 중앙 정렬 */
}

       /* 브랜드 스토리(모바일) 텍스트 가운데 정렬 */
    .sub1_1 .section-paradise > div:nth-of-type(2),
    .sub1_1 .section-stay > div:nth-of-type(2) {
        text-align: center;
    }



}
    @media(max-width:640px){

    /* 🔧 슬라이더 전체 높이를 내용에 맞게 (아래 큰 빈 여백 제거) */
    .main2 .main2_slider,
    .main2 .main2_slider .swiper-wrapper,
    .main2 .main2_slider .swiper-slide{
        height: auto !important;
    }

    /* 🔵 도트 위치 : 글자 시작 위치에 맞춰서, 살짝 아래 */
    .main2 .swiper-pagination{
        position: absolute !important;
        top: 260px !important;     /* 글자 박스보다 약간 아래로 떨어뜨리기 */
        left: 5% !important;       /* 첫 줄 텍스트 시작 정도 위치 */
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        display: flex;
        transform: none !important;
        z-index: 20;
    }

    .main2 .swiper-pagination span{
        margin: 0 4px !important;  /* 도트 간격 */
    } 

    /* ✅ 메인2 섹션 자체 아래 여백 제거 */
    .main2{
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* ✅ 슬라이더/슬라이드들 높이·아래 여백 제거 */
    .main2 .main2_slider,
    .main2 .main2_slider .swiper-wrapper,
    .main2 .main2_slider .swiper-slide{
        height: auto !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* ✅ 이미지 박스도 아래 패딩/마진 제거 */
    .main2 .main2_slider .swiper-slide .slide-visual{
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* ✅ 모바일에서 이미지 높이는 화면 비율 기준으로만 */
    .main2 .main2_slider .swiper-slide .slide-image{
        height: calc(300 / 640 * 100vw) !important;
    }


    /* 섹션 구조를 세로로 재정렬 */
    .sub1_1 .section-paradise,
    .sub1_1 .section-stay {
        display: flex;
        flex-direction: column !important;
        align-items: center !important;
        width: 100%;
        margin: 0 auto;
    }

    /* 이미지 */
    .sub1_1 .section-paradise > div:nth-of-type(1),
    .sub1_1 .section-stay > div:nth-of-type(1) {
        width: 100% !important;
        margin: 0 auto;
        background-size: cover;
        background-position: center;
    }

    /* 텍스트 영역 */
    .sub1_1 .section-paradise > div:nth-of-type(2),
    .sub1_1 .section-stay > div:nth-of-type(2) {
        width: 90% !important;
        margin: 50px auto 0;
        text-align: center !important;
    }

    /* 텍스트 내부 여백(좌우 치우침 원인 제거) */
    .sub1_1 .section-paradise > div:nth-of-type(2) p,
    .sub1_1 .section-stay > div:nth-of-type(2) p {
        margin-left: 0 !important;
        left: 0 !important;
    }

  } 
  
@media (max-width: 640px) {

    .sub2_3 .inner ul{width: 100%; margin: 10px auto;}
    .sub2_3 .inner ul li{flex-direction: column; justify-content: center; margin-bottom: 50px;}
    .sub2_3.on1 .inner ul li:nth-of-type(1), .sub2_3.on1 .inner ul li:nth-of-type(3), .sub2_3.on1 .inner ul li:nth-of-type(5), .sub2_3.on1 .inner ul li:nth-of-type(7), .sub2_3.on1 .inner ul li:nth-of-type(9){flex-direction: column-reverse;}
    .sub2_3 .inner ul li .sub2_1_tx{z-index: 1;}
    .sub2_3 .inner ul li>span{display: none;}
    .sub2_3 .inner ul li .sub2_1_tx{width: 90%;}
    .sub2_3.on1 .inner ul li img{width: 100%; height: calc(400/640*100vw); margin-top: 20px;}
    .sub2_3 .sub2_3_btn{width: 80%;}

    .sub2_6 .inner ul{width: 100%; margin: 10px auto;}
    .sub2_6 .inner ul li{flex-direction: column; justify-content: center; margin-bottom: 50px;}
    .sub2_6.on1 .inner ul li:nth-of-type(1), .sub2_6.on1 .inner ul li:nth-of-type(3), .sub2_6.on1 .inner ul li:nth-of-type(5), .sub2_6.on1 .inner ul li:nth-of-type(7){flex-direction: column-reverse;}
    .sub2_6 .inner ul li .sub2_1_tx{z-index: 1;}
    .sub2_6 .inner ul li>span{display: none;}
    .sub2_6 .inner ul li .sub2_1_tx{width: 90%;}
    .sub2_6.on1 .inner ul li img{width: 100%; height: calc(400/640*100vw); margin-top: 20px;}
    .sub2_6 .sub2_6_btn{width: 80%;}

    .sub3_1 .inner > div{margin-top: 70px;}
    .sub3_1 .inner > ul{height: auto; flex-direction: column;}
    .sub3_1 .inner > ul li:after{right: auto; top: 105%;}
    .sub3_1 .inner > ul li{margin-top: 30px; font-size: 1.5rem; border-radius: 20px; width: 80%; height: 90px;}
    .sub3_1 .inner > ul li:first-child{margin-top: 0;}
    .sub3_1 .inner > div ul{flex-direction: column;}
    .sub3_1 .inner > div ul li{width: 100%; height: auto; margin-bottom: 60px;}
    .sub3_1 .inner > div ul li img{position: relative; margin-top: 20px;}
    .sub3_1 .inner > div ul li:last-child{margin-bottom: 0;}
    .sub3_1 .inner > div ul li > p{font-size: 1.3rem;}

    .sub3_2 .inner > div, .sub3_3 .inner > div{margin-top: 20px;}

    .sub4_1 .inner > div:nth-of-type(2){height: calc(400/640*100vw); margin: 30px auto;}

    .sub4_2 .inner > div > ul li img{width: 100%; height: calc(300/640*100vw); object-fit: cover;}
    .sub4_3 .inner .sub4_3_slider{height: calc(400/640*100vw);}

    .sub5_1 .inner{margin-bottom: 0;}
    .sub5_1 .inner > div{width: 100%; height: auto; border: 0; margin: 0;}
    .sub5_1 .inner > div > p{position: relative; left: auto; top: auto; transform: translate(0); margin: 0 auto; transition: 1s 0s; width: 100%; height: 120px; padding-top: 3px; border-radius: 20px;}
    .sub5_1 .inner > div > ul{margin-top: 50px; display: flex; flex-wrap: wrap;}
    .sub5_1 .inner > div > ul li{margin: 0 auto; position: relative; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; transform: translate(0); margin-bottom: 70px; transition-delay: 0s !important;}
    .sub5_1 .inner > div > ul li:nth-of-type(1){left: auto; transform: translateX(0); top: auto;}
    .sub5_1 .inner > div > ul li p{font-size: 1.4rem; font-weight: 500;}
    .sub5_1 .inner > div > ul li div img{width: 45%;}
    .sub5_1 .inner > div > span{margin-top: 30px;}

    .sub6_1 .input_s > div:nth-child(-n+3){width: 100%;}
    .board ul{font-size: 1.2rem;}
    .board ul li > div{margin: 0 10px;}
    .board ul li .b_num{margin: 0;}

    .sub7_2 .inner > div{flex-direction: column;}
    .sub7_2 .inner > div > div{width: 100%;}
    .sub7_2 .inner > div > div:nth-of-type(2){margin-top: 50px;}
    
    .sub7_2 .input_s .contact .checkbox label{font-size: 1.2rem;}
    .sub7_1 .input_s .contact .checkbox>div:nth-of-type(1), .sub7_2 .input_s .contact .checkbox>div:nth-of-type(1){flex-direction: column;}
    .input_s .contact .checkbox label{margin-top: 10px; text-align: left;}

    .my_a > div{width: 100%;}
    .mypage_b{width: 100% !important;}
    .myboard ul li>div{width: calc(100% / 3);}
    .myboard ul li > div:nth-child(n+3):nth-child(-n+4){display: none;} 

    .login_p .input_s, .join_p .input_s, .join_e .input_s{width: 100%;}
    .input_s > div{width: 100%; margin-bottom: 0;}
    .input_s input{height: 60px;}
    .contact_btn{width: 80%;}
    .login_p .input_s>div>div{width: 80%;}
    .input_s .agree_txt{height: 120px;}

    .sub_qa{width: 100%;}
    .sub_qa .sub_q{padding: 0 15px;}

    .quick{bottom: 0; width: 100%;}
    .quick ul{width: 100%; display: flex;}
    .quick ul li{height: auto; padding: 15px 0; flex-direction: column; font-size: 1.2rem; font-weight: 400; background: #2b2b2b !important; border-right: 1px solid #ffffff3b;}
    .quick ul li:last-child{display: flex; border: 0;}
    .quick ul li:nth-of-type(1){border-radius: 0;}
    .quick ul li:nth-of-type(2){border-radius: 0;}
    .quick ul li:nth-of-type(1):before, .quick ul li:nth-of-type(2):before, .quick ul li:nth-of-type(3):before{margin-right: 0; margin-bottom: 10px; width: 20px; height: 20px;}
    .quick ul li:nth-of-type(3){border-radius: 0;}


    .join_p .inner>div>div{width: 100%;}
    .login_p .input_s > div{flex-direction: column;}
    .login_p .input_s > div > input{width: 100%;}
    .login_p .input_s .contact img{width: 25px;}
    .login_p .inner > div:nth-of-type(2) span{margin: 0 20px;}
    .login_p .inner > div:nth-of-type(2) span:after{left: 86px;}
    [data-aos][data-aos][data-aos-delay="500"].aos-animate, body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay: 0s;}
    [data-aos][data-aos][data-aos-delay="400"].aos-animate, body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay: 0s;}
    [data-aos][data-aos][data-aos-delay="300"].aos-animate, body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay: 0s;}
    [data-aos][data-aos][data-aos-delay="200"].aos-animate, body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay: 0s;}
    [data-aos][data-aos][data-aos-delay="100"].aos-animate, body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay: 0s;}
}



/* ======================================= */
/* 모바일 반응형: 파트너십 블록 세로 나열 */
/* ======================================= */

@media(max-width:640px){
    
    .sub2_1 .section-blocks {
        margin-top: 50px;
        margin-bottom: 30px;
        padding: 0 5%; /* 좌우 여백 */
    }
    
    .sub2_1 .blocks-container {
        flex-direction: column; /* 세로로 쌓기 */
        gap: 20px;
    }
    
    /* 모든 박스가 너비 100%를 가지도록 설정 */
    .sub2_1 .blocks-top .block-item,
    .sub2_1 .blocks-bottom .block-item {
        width: 100%; 
        margin-bottom: 0; /* 세로 간격은 gap이 처리 */
    }
    
    .sub2_1 .block-title {
        font-size: 1.5rem;
        padding: 15px 0;
        margin-bottom: 20px;
    }

    .sub2_1 .blocks-top h3 {
        font-size: 1.3rem;
    }

    .sub2_1 .blocks-top p {
        font-size: 1rem;
    }

    .sub2_1 .blocks-bottom h3 {
        font-size: 1.2rem;
    }

    .sub2_1 .blocks-bottom ul li {
        font-size: 0.95rem;
    }
}

/* 반응형 설정 */
@media (max-width: 768px) {
  .rates-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .rates-table {
    font-size: 13px;
  }

  .rates-table thead th,
  .rates-table tbody td {
    padding: 8px 6px;
  }
}

@media (max-width: 480px) {
  .rates-table {
    font-size: 12px;
  }

}

@media (max-width: 640px) {

  /* "통합 요금표" ~ 표 영역까지만 여백 적용 */
  .rates-header,
  .rates-table-wrapper {
    width: 90%;
    margin: 0 auto;
  }

  /* 표가 너무 붙어보이지 않도록 내부 여백도 추가 */
  .rates-table-wrapper {
    padding: 0 5px;
  }
}

/* 반응형 – 화면 줄어들 때 두 개 / 한 개씩 */
@media (max-width: 1024px) {
    .sub2_7 .section-paradise {
        flex-direction: column;
        align-items: center;
    }
    .sub2_7 .section-paradise > div:nth-of-type(2) {
        margin-left: 0;
        margin-top: 40px;
    }

    .sub2_7 .blocks-top .block-item {
        flex: 1 1 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 640px) {
    .sub2_7 .inner {
        padding: 120px 16px 140px;
    }
    .sub2_7 .blocks-top .block-item {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* 반응형 – 태블릿: 2개 → 그대로, 모바일: 1열 */
@media (max-width: 1024px) {
    .sub2_8 .section-paradise {
        flex-direction: column;
        align-items: center;
    }
    .sub2_8 .section-paradise > div:nth-of-type(2) {
        margin-left: 0;
        margin-top: 40px;
    }
}

@media (max-width: 768px) {
    .sub2_8 .blocks-bottom .block-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .sub2_8 .inner {
        padding: 120px 16px 140px;
    }
}

@media (max-width: 640px) {

  /* 털로덮인친구들 상단 로고/이미지 */
  .sub2_1 .section-paradise > div:nth-of-type(1) {
      width: 100%;
      height: calc(380 / 640 * 100vw); /* 기존보다 키움 */
      margin: 0 auto;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
  }

  /* 중앙애견미용학원 상단 이미지 */
  .sub2_7 .section-paradise > div:nth-of-type(1) {
      width: 100%;
      height: calc(360 / 640 * 100vw); /* 더 크게 */
      margin: 0 auto;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
  }

  /* 마이뷰티독 상단 이미지 */
  .sub2_8 .section-paradise > div:nth-of-type(1) {
      width: 100%;
      height: calc(360 / 640 * 100vw);
      margin: 0 auto;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
  }
}

@media (max-width: 640px) {

  /* 털로덮인친구들 – 위/아래 블록들 세로 정렬 강제 */
  .sub2_1 .section-blocks {
      margin-top: 60px;
      margin-bottom: 40px;
      padding: 0 5%;
  }

  .sub2_1 .blocks-container {
      display: flex;
      flex-direction: column !important;  /* 가로 → 세로 강제 */
      gap: 20px;
  }

  .sub2_1 .blocks-top .block-item,
  .sub2_1 .blocks-bottom .block-item {
      width: 100% !important;  /* 한 줄에 하나씩 */
      margin: 0;
  }
}

/* ============================= */
/*  모바일: 털로덮인 친구들 아이콘/타이틀 덮어쓰기 */
/* ============================= */
@media (max-width: 640px) {

  /* 제목 정렬 재설정 */
  .sub2_1 .block-title {
    position: relative;
    text-align: center;
    padding-left: 0 !important;
    padding-top: 70px !important;  /* 아이콘 공간 확보 */
    margin-bottom: 40px;
  }

  /* 아이콘 위치 재설정 */
  .sub2_1 .block-title::before {
    content: "";
    position: absolute;
    top: 15px !important;        /* 미용학원/뷰티독과 동일한 라인 */
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
  }

    /* 위 타이틀 아이콘 */
  .sub2_1 .top-title::before {
    background-image: url('../images/icon_title_top.png');
  }

  /* 아래 타이틀 아이콘 */
  .sub2_1 .bottom-title::before {
    background-image: url('../images/icon_title_bottom.png');
  }
}

  /* ============================= */
/*  모바일: 타이틀 아이콘 중앙 + 위쪽 배치  */
/*  (털로덮인친구들 / 중앙미용학원 / 마이뷰티독) */
/* ============================= */
@media (max-width: 640px) {

  /* 제목 영역 공통 설정 */
  .sub2_1 .block-title,
  .sub2_7 .block-title,
  .sub2_8 .block-title {
    position: relative;
    text-align: center;
    padding-left: 0 !important;   /* 데스크탑의 왼쪽 아이콘용 여백 제거 */
    padding-top: 70px;            /* 아이콘 들어갈 공간 확보 (겹침 방지) */
    margin-bottom: 40px;
  }

  /* 아이콘 공통 위치 (제목 위 중앙) */
  .sub2_1 .block-title::before,
  .sub2_7 .block-title::before,
  .sub2_8 .block-title::before {
    content: "";
    position: absolute;
    top: 15px;                    /* 제목보다 위쪽에 여유 있게 */
    left: 50%;
    transform: translateX(-50%);  /* 가로 중앙 정렬 */
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
  }

  /* 털로덮인친구들 : 위/아래 타이틀 각각 다른 아이콘 */
  .sub2_1 .top-title::before {
    background-image: url('../images/icon_title_top.png');
  }
  .sub2_1 .bottom-title::before {
    background-image: url('../images/icon_title_bottom.png');
  }

  /* 중앙미용학원 / 마이뷰티독 : 같은 아이콘 사용 */
  .sub2_7 .block-title::before,
  .sub2_8 .block-title::before {
    background-image: url('../images/icon_title_top.png');
  }
}


/* ========================================= */
/*  모바일 레이아웃 정리: 털로덮인친구들 / 중앙미용 / 마이뷰티독  */
/* ========================================= */
@media (max-width: 640px) {

  /* ---------- 1) 털로덮인친구들: 상단 로고 + 텍스트 ---------- */
  .sub2_1 .section-paradise {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 auto;
  }

  .sub2_1 .section-paradise > div:nth-of-type(1) {
    width: 100%;
    height: calc(300 / 640 * 100vw); /* 필요하면 숫자만 살짝 조절해도 됨 */
    margin: 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .sub2_1 .section-paradise > div:nth-of-type(2) {
    width: 90%;
    margin: 30px auto 0;
    text-align: center;
  }

  .sub2_1 .section-paradise > div:nth-of-type(2) p {
    margin-left: 0 !important;
    left: 0 !important;
  }

  /* (블록 3개/6개는 이미 sub2_1용 모바일 CSS가 있어서 여기선 건드릴 필요 X) */


  /* ---------- 2) 중앙애견미용학원: 상단 로고 + 텍스트 ---------- */
  .sub2_7 .section-paradise {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 40px;
  }

  .sub2_7 .section-paradise > div:nth-of-type(1) {
    width: 100%;
    height: calc(260 / 640 * 100vw);
    margin: 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .sub2_7 .section-paradise > div:nth-of-type(2) {
    width: 90%;
    margin: 30px auto 0;
    text-align: center;
  }

  .sub2_7 .section-paradise > div:nth-of-type(2) p {
    margin-left: 0 !important;
    left: 0 !important;
  }

  /* 중앙미용학원 – 아래 4분할 박스 세로로 정렬 */
  .sub2_7 .section-blocks {
    margin-top: 60px;
    margin-bottom: 40px;
    padding: 0 5%;
  }

  .sub2_7 .blocks-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .sub2_7 .block-item {
    width: 100%;
  }


  /* ---------- 3) 마이뷰티독: 상단 로고 + 텍스트 ---------- */
  .sub2_8 .section-paradise {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 40px;
  }

  .sub2_8 .section-paradise > div:nth-of-type(1) {
    width: 100%;
    height: calc(260 / 640 * 100vw);
    margin: 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .sub2_8 .section-paradise > div:nth-of-type(2) {
    width: 90%;
    margin: 30px auto 0;
    text-align: center;
  }

  .sub2_8 .section-paradise > div:nth-of-type(2) p {
    margin-left: 0 !important;
    left: 0 !important;
  }

  /* 마이뷰티독 – 아래 2x3 박스 세로로 정렬 */
  .sub2_8 .section-blocks {
    margin-top: 60px;
    margin-bottom: 40px;
    padding: 0 5%;
  }

  .sub2_8 .blocks-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .sub2_8 .block-item {
    width: 100%;
  }
}

/* 반응형 */
@media (max-width: 768px) {


  .floor-panels {
    padding: 24px 16px 20px;
  }

  .floor-title {
    font-size: 24px;
  }

  .floor-tab {
    font-size: 13px;
    padding: 10px 12px;
  }

  .floor-desc {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .floor-title {
    font-size: 22px;
  }

  .floor-tabs {
    font-size: 12px;
  }

  .floor-tab {
    min-width: 70px;
  }
    .floor-subimg-wrap {
        grid-template-columns: 1fr; /* 1개씩 세로 */
        gap: 12px;
    }

    .walking-gallery-wrap{
        grid-template-columns: 1fr;  /* 1열 */
        gap: 12px;
    }
}

/* 반응형 (모바일) */
@media (max-width: 1024px) {
    .membership_benefit {
        margin: 50px auto 40px;
        padding: 0 20px;
    }
    .membership_benefit_list {
        gap: 20px 10px;
    }
    .membership_benefit_list li {
        width: 30%;
    }
}

@media (max-width: 640px) {
    .membership_benefit_list li {
        width: 45%;
    }
    .membership_benefit_tit .en {
        font-size: 2rem;
    }
    .membership_benefit_tit .sub {
        font-size: 1.3rem;
    }
    .membership_desc {
        font-size: 1.4rem;
        padding: 0 15px;
    }
}

/* 반응형 */
@media (max-width: 768px) {
  .overview-table-section {
  }

  .overview-title {
    font-size: 24px;
  }

  .overview-table {
    font-size: 13px;
    min-width: 480px;
  }

  .overview-table tbody th,
  .overview-table tbody td {
    padding: 8px 6px;
  }
}

@media (max-width: 480px) {
  .overview-title {
    font-size: 22px;
  }

  .overview-table {
    font-size: 12px;
    min-width: 420px;
  }
}

/* ----- 반응형 ----- */

@media (max-width: 1024px) {
  .location-inner {
    margin: 40px auto 60px;
  }

  .location-feature-grid {
    gap: 16px;
  }

  .location-feature {
    padding: 20px 18px;
  }
}

@media (max-width: 768px) {
  /* 카드 세로로 쌓기 */
  .location-feature-grid {
    flex-direction: column;
  }

  .location-feature {
    width: 100%;
  }

  .location-inner {
    margin: 32px auto 48px;
  }
}

@media (max-width: 480px) {
  .location-inner {
    margin: 24px auto 40px;
    padding: 0 12px;
  }

  .location-feature h3 {
    font-size: 16px;
  }

  .location-feature p {
    font-size: 12px;
  }

  .location-caption {
    font-size: 13px;
  }
}

/* 버튼 쪽 반응형 */
@media (max-width: 900px) {
  .map-info-wrap {
    flex-direction: column;
    align-items: flex-start;
  }


  /* ✅ 여기 추가 (또는 수정) */
  .map-info-left {
    width: 100%;       /* 왼쪽 박스를 전체 폭으로 */
    margin-bottom: 20px; /* 버튼과 살짝 간격 */
  }

  .map-info-right {
    width: 100%;
    flex-direction: row;
    gap: 12px;
  }
  .btn-naver,
  .btn-kakao {
    flex: 1;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .map-info-wrap {
    margin-bottom: 60px;
    padding: 0 12px;
  }
  .map-place-name { font-size: 20px; }
  .map-address { font-size: 13px; }
}

@media (max-width: 480px) {
  .map-info-wrap { gap: 20px; }
  .map-info-right { flex-direction: column; }
  .btn-naver,
  .btn-kakao { width: 100%; }
}

/* 라펫 파라다이스와 주소 사이 장식 라인 */
.title-lines {
  position: relative;
  width: 100%;
  margin: 10px 0 16px;
}

/* 긴 얇은 선 : 항상 map-info-left 의 가로 전체 */
.line-thin {
  display: block;
  width: 100%;
  height: 1px;
  background: #CABFAE;
}

/* 짧고 두꺼운 선 : 위에 겹쳐지고 시작점은 항상 왼쪽 동일 */
.line-thick {
  position: absolute;
  left: 0;               /* 얇은 선과 같은 시작점 */
  top: 50%;
  transform: translateY(-50%);
  width: 90px;           /* 두꺼운 선 길이 */
  height: 3px;
  background: #5C5445;
  border-radius: 2px;
}

/* 🔧 모바일에서 긴 선 조금 더 길게 보이게 (양쪽 여백만 살짝 줄임) */
@media (max-width: 480px) {
  .map-info-left {
    width: 100%;
  }

}

@media (max-width: 640px) {

  /* 전체 inner 중앙 정렬 */
  .sub5_2 .inner {
      width: 100%;
      padding: 80px 0 40px; /* 상단 여백 넉넉하게 */
  }

  /* 제목(sub_title) 위 여백 복구 */
  .sub5_2 .sub_title {
      margin-top: 20px;
      margin-bottom: 40px;
      text-align: center;
  }
  .sub5_2 .sub_title p {
      line-height: 1.3;
  }

  /* 멤버십 혜택 문구/영역 중앙 */
  .membership_benefit,
  .membership_desc,
  .membership_notice {
      width: 90%;
      margin: 0 auto 30px;
      text-align: center;
  }

  /* 아이콘 리스트 컨테이너 */
  .membership_benefit_list {
      width: 90%;
      margin: 40px auto 30px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px 10px;
  }

  /* 아이콘 박스: 2개 2개 1개 정렬 */
  .membership_benefit_list li {
      width: 45%;        /* 2개씩 배치됨 (총 4개까지) */
      text-align: center;
  }

  /* 마지막 아이템(5번째)은 중앙 정렬 */
  .membership_benefit_list li:nth-of-type(5) {
      width: 60%;        /* 가운데 정렬되도록 살짝 넓힘 */
      margin: 0 auto;
  }

  /* 아이콘 이미지 중앙 */
  .membership_benefit_list li .icon img {
      display: block;
      margin: 0 auto;
      width: 80%;
  }

  /* 입력 폼도 자연스럽게 중앙 */
  .input_s {
      width: 90%;
      margin: 0 auto 50px;
  }
}

/* ========================================= */
/*  모바일: 털로덮인친구들 / 중앙미용 / 마이뷰티독 상단 이미지 크게 + 정사각형  */
/* ========================================= */
@media (max-width: 640px) {

  .sub2_1 .section-paradise > div:nth-of-type(1),
  .sub2_7 .section-paradise > div:nth-of-type(1),
  .sub2_8 .section-paradise > div:nth-of-type(1) {
      width: 80vw;              /* 화면 기준 80% 너비 */
      max-width: 360px;         /* 너무 커지지 않게 상한선 */
      margin: 0 auto;           /* 중앙 정렬 */
      
      /* 정사각형 영역 만들기 */
      height: auto;
      padding-top: 80vw;        /* width와 같은 비율 → 정사각형 */
      max-height: 360px;

      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
  }
}

@media (max-width: 640px) {

  /* 슬라이드 전체 높이 자동 */
  .sub2_2,
  .sub2_2 .inner,
  .sub2_2 .sub2_slider,
  .sub2_2 .sub2_slider .swiper-wrapper,
  .sub2_2 .sub2_slider .swiper-slide {
    height: auto !important;
    overflow: visible !important;   /* 잘리는 문제 해결 */
  }

  /* 텍스트 박스를 일반 흐름으로 (가장 중요) */
  .sub2_2 .sub2_slider .swiper-slide .sub2_2_tx {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px 0 60px 0 !important;  /* 아래 여백 넉넉하게 */
    padding: 0 10px;                    /* 좌우 패딩 추가 → 가로 짤림 방지 */
    box-sizing: border-box;
  }

  /* 텍스트 내부도 가로 제한 없게 */
  .sub2_2 .sub2_slider .swiper-slide .sub2_2_tx p {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    white-space: normal !important;   /* 강제 한줄방지 */
  }

  /* 활성 슬라이드만 텍스트 보이도록 (겹침 방지) */
  .sub2_2 .sub2_slider .swiper-slide:not(.swiper-slide-active) .sub2_2_tx {
    opacity: 0;
  }
  .sub2_2 .sub2_slider .swiper-slide.swiper-slide-active .sub2_2_tx {
    opacity: 1;
    transition: opacity .3s;
  }
}

@media (max-width: 640px) {

  /* 프리미엄 슬라이드 내에서 버튼 위치 재지정 */
  .sub2_2 .inner {
    position: relative;
  }

  .sub2_2 .prev_next {
    position: absolute;   /* 다시 절대 위치로 */
    right: 5%;            /* 오른쪽으로 조금 붙이고 */
    bottom: 60px;         /* 섹션 바닥에서 40px 위로 띄우기 */
    margin: 0;            /* 기존 margin-bottom 제거 */
  }
}

/* 뷰포트 줄어들수록 크기만 조절 */
@media (max-width: 1200px) {
  .msg-dog-icon { width: 180px; }
}
@media (max-width: 900px) {
  .msg-dog-icon { width: 150px; }
}
@media (max-width: 640px) {
  .msg-dog-icon { width: 110px; }
}
@media (max-width: 480px) {
  .msg-dog-icon { width: 90px; }
}