@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;}
      /* ✅ 대메뉴 li를 기준점으로 */
  .main_menu > ul > li{
    position: relative;
  }

  /* ✅ 하위메뉴(2depth)를 부모 li 정중앙에 맞춤 */
  .main_menu > ul > li > ul{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
  }

    /*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;}

}

@media (max-width: 1024px){
  .main_menu::before{
    height: 120px;
    background: linear-gradient(
      to bottom,
      rgba(86,87,98,0.6) 0%,
      rgba(86,87,98,0.25) 60%,
      rgba(86,87,98,0.0) 100%
    );
  }
}

/* 1200px 이하(모바일 헤더 .menu 사용 구간)에서도 그라데이션 유지 */
@media (max-width: 1200px){
  .menu{
    position: relative;   /* ::before 기준점 */
    z-index: 999;         /* 기존 헤더 레이어와 맞춤 */
  }

  .menu::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height: 120px;        /* 필요하면 100~160 사이로 조절 */
    pointer-events:none;
    background: linear-gradient(
      to bottom,
      rgba(86,87,98,0.6) 0%,
      rgba(86,87,98,0.25) 60%,
      rgba(86,87,98,0.0) 100%
    );
    z-index: -1;          /* 메뉴 내용 뒤로 */
  }
}

/* 모바일(1024px 이하): 헤더 전화번호 숨김 */
@media (max-width: 1200px){
  .header-phone{
    display: none !important;
  }
}


@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%;}
    .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_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*/
}



/* 1300px 이하에서는 헤더가 화면폭에 맞게 줄어들도록 */
@media (max-width: 1300px){
  .main_menu{ min-width: 0; }     /* ✅ 핵심: 1300 고정 폭 해제 */
  .main_menu > ul{ min-width: 0; }/* (보험) ul도 고정 최소폭 해제 */
}

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

/* 모바일에서는 hover 의존 줄이기 */
@media (max-width: 1024px){
  .premium-item:hover .premium-desc{ max-height: 0; opacity: 0; transform: translateY(-6px); }
}

/* 반응형: 3열 → 2열 */
@media (max-width: 1200px){
  .icons-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .icons-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =========================
   PC에서 창 줄일 때 로고만 더 자연스럽게 축소
========================= */

/* 1360↓ : 로고 더 줄이기(가장 체감 큰 구간) */
@media (max-width: 1360px){
  .logo{ left: 24px; } /* 필요 없으면 유지해도 됨 */

  .logo > div:nth-of-type(1){
    width: 170px;     /* ✅ 기존 250px -> 170px */
    height: 90px;     /* 높이는 유지 or 살짝 줄여도 됨 */
    background-size: contain;
    background-position: left center;
    top: 8px;      /* ✅ 기존 20px -> 8px (여기서 올라감) */
  }
}

/* 1280↓ : 한 번 더 줄여서 여백 확보 */
@media (max-width: 1280px){
  .logo > div:nth-of-type(1){
    width: 150px;     /* ✅ 더 축소 */
    height: 86px;
     top: 6px;      /* ✅ 8px -> 6px */
  }
}

/* 1200↓ : 거의 붙어 보이는 구간이면 추가로 */
@media (max-width: 1200px){
  .logo > div:nth-of-type(1){
    width: 140px;
    height: 84px;
    top: 4px;      /* ✅ 6px -> 4px */
  }
}


/* ✅ PC에서만 로고 축소 적용 (모바일은 제외) */
@media (max-width: 1360px) and (min-width: 1025px){
  .logo{ left: 24px; }
  .logo > div:nth-of-type(1){
    width: 170px;
    height: 90px;
    background-size: contain;
    background-position: left center;
    /* top 값은 네가 쓰는 값 유지 */
  }
}

@media (max-width: 1280px) and (min-width: 1025px){
  .logo > div:nth-of-type(1){
    width: 150px;
    height: 86px;
  }
}

@media (max-width: 1200px) and (min-width: 1025px){
  .logo > div:nth-of-type(1){
    width: 140px;
    height: 84px;
  }
}
@media (max-width: 640px){
  /* 로고 컨테이너는 기존처럼 왼쪽에 두고 */
  .logo{
    left: 20px;          /* 취향 */
    height: 80px;        /* 헤더 높이 느낌 유지 */
    align-items: center; /* 세로 중앙 정렬 */
  }

  /* 로고 이미지 박스 */
  .logo > div:nth-of-type(1){
    width: 140px;              /* ✅ 모바일에서도 읽히는 크기 */
    height: 56px;
    top: 0 !important;         /* common.css의 top:20px을 모바일에서만 무력화 */
    margin-top: 0 !important;  /* ✅ -70px 제거 */
    margin-left: 0 !important; /* ✅ -15px 제거 */
    background-size: contain;  /* cover → contain (잘림 방지) */
    background-position: left center;
    background-repeat: no-repeat;
  }
}

/* 모바일에서 메인 영상 썸네일(배경) 포커스 위치 조정 */
@media (max-width: 768px){
  .video_wrap{
    background-position: 20% 50%;  /* ✅ 왼쪽(앞부분) 더 보이게*/
  }
}

/*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%;}

        
    .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;}    

    .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가 100vh로 고정돼 있으면 아래 여백이 생길 수 있어서 해제(이미지 아래 여백 방지) */
  .main2{ height: auto !important; }

  /* 배경이미지가 깔린 요소를 아래로 내려서 "도트 아래 ↔ 이미지 위" 간격 확보 */
  .main2 .main2_slider .swiper-slide > div:nth-of-type(2){
    margin-top: 20px !important;    /* ← 원하는 간격 (예: 16~28px로 조절) */
  }

  /* 만약 위 selector가 안 먹으면(구조 차이), 이걸로 한번 더 안전하게 덮기 */
  .main2 .main2_slider .swiper-slide .slide-image,
  .main2 .main2_slider .swiper-slide .slide-visual{
    margin-top: 20px !important;
  }
      .main2 .main2_slider .swiper-slide > div:nth-of-type(2){
    transform: translateY(60px) !important;
  }

    /* ✅ 내려간 만큼(60px) 아래쪽 공간 확보 → 잘림/영역 줄어듦 방지 */
  .main2 .main2_slider .swiper-slide{
    margin-bottom: 60px !important;
  }
  /* 2) 사진 아래 여백 생기지 않게(이미지 자체 여백 제거) */
  .main2 .main2_slider .swiper-slide .slide-image{
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

    .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;}*/
    .footer_logo { width:80px; }

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

    .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;}

    .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: 768px){
  #video01{
    height: 82vh;
    height: 82dvh;     /* ✅ 인앱/주소창 변화까지 반영 */
    padding-top: 0 !important;
    position: relative;
    overflow: hidden;
  }

  #video01 > iframe{
    position: absolute;
    top: 50%;
    left: 20%;
    width: 100vw;
    height: 56.25vw;

    /* ✅ 확대(크롭) 줄이기 */
    min-width: 160vh;   /* 177.78vh → 150vh (더 줄이면 더 덜 확대) */
    min-height: 85vh;   /* 100vh → 85vh */
    min-height: 85dvh; 

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

  #video01 .main1-title{
    top: 48%;                    /* 👈 여기서 위/아래 조절 */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    letter-spacing: 0.1em;
  }

  @keyframes mainTitleSlideIn{
    from{
      opacity: 0;
      transform: translate(-56%, -50%);
    }
    to{
      opacity: 1;
      transform: translate(-50%, -50%);
    }
  }
}

/* ✅ 카톡 인앱 포함: 하단 quick(76px) 만큼 빼고 영상이 딱 맞게 */
@media (max-width: 640px){
  #video01{
    height: calc(100dvh - 76px);
    height: calc(100vh - 76px); /* dvh 미지원 대비 */
  }

  #video01 > iframe{
    min-height: calc(100dvh - 76px);
    min-height: calc(100vh - 76px);
  }
}

/* =========================
   MAIN2 SCROLL SECTION - MOBILE FIX
   (텍스트 가독성 + 간격 + 정렬)
========================= */
@media (max-width: 768px){

  /* 섹션 자체 */
  .scroll-item{
    min-height: 60vh;
    padding: 0;
    background-size: cover;          /* 모바일은 꽉 차게 */
    background-position: center;
  }

  /* 텍스트 박스 */
  .scroll-item .text-box{
    width: calc(100% - 40px);
    text-align: center;
    gap: 18px;                       /* 제목-설명 간격 */
  }

  /* 제목 (delay-1) */
  .scroll-item .delay-1{
    font-size: 24px;                 /* 모바일 최적 */
    line-height: 1.25;
    word-break: keep-all;
  }

  /* 설명 (delay-2) */
  .scroll-item .delay-2{
    font-size: 14px;
    line-height: 1.6;
    margin-top: 15px;                   /* gap으로만 제어 */
    word-break: keep-all;
  }

  /* fade 이동량 줄여서 어색함 방지 */
  .fade{
    transform: translateY(24px);
  }
}

/* floor.html(평면안내)처럼 sub_menu 탭이 2개인 페이지 전용 */
@media (max-width: 1200px){
  .unitplan-page .sub_menu ul{
    display: flex;
    width: 100%;
  }
  .unitplan-page .sub_menu ul li{
    width: 50% !important;     /* 기존 1/3 규칙 덮어쓰기 */
    flex: 0 0 50%;
  }

  .emodel-page .sub_menu ul{
    display: flex;
    width: 100%;
  }
  .emodel-page .sub_menu ul li{
    width: 50% !important;     /* 기존 1/3 규칙 덮어쓰기 */
    flex: 0 0 50%;
  }

}


/* 태블릿 이하에서는 unit-info 높이 고정 해제 */
@media (max-width: 1024px){
  .unit-info{
    min-height: auto;
  }
}

@media (max-width: 768px){
  .unit-info{
    min-height: auto;
  }
}


/* 반응형 – 태블릿: 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: 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: 640px){
  .membership_desc{
    margin: 35px auto 0 !important; /* ← 딱 35px만 남기고 싶으면 */
  }
}

/* 반응형 */
@media (max-width: 768px){
  .overview-table-section .sub_menu ul{
    justify-content:flex-start;
    overflow-x:auto;
    white-space:nowrap;
  }
  .overview-table-section .sub_menu ul li{
    width:auto;
    min-width:120px;
    flex:0 0 auto;
  }

  .overview-table-section .sub_menu ul li a{
  padding:0 6px;
  word-break:keep-all;
}

  .subpage-headline{font-size:24px;}
  .overview-media-slot{height:240px;}

  .overview-spec-table th{
    width:120px;
    padding:14px 10px;
  }
  .overview-spec-table td{
    padding:14px 10px;
  }
}


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

@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: center;
  }


  /* ✅ 여기 추가 (또는 수정) */
  .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%;
  }
}

/* MAP 페이지: 모바일에서 좌우 여백 제외하고 꽉 차게 */
@media (max-width: 768px){
  .map-inner{
    max-width: none !important;   /* ← 980px 제한 해제 */
    width: 100% !important;       /* ← 화면 꽉 */
    margin: 0 auto !important;
    padding: 0 20px;              /* ← “좌우 여백”만 남기고 꽉 차게 (원하는 값으로 조절) */
    box-sizing: border-box;
  }

  .map-grid{
    width: 100%;
    margin: 0;
  }

  .map-col{
    width: 100%;
  }

  .map-box{
    width: 100%;
  }
}

/* 모바일에서만 2번째 map-col 딜레이 */
@media (max-width: 768px){
  .reveal-map-2{
    transition-delay: .22s; /* 0.15~0.35s 취향 */
  }
}

@media (max-width: 768px){
  .map-page{
    padding-bottom: 100px;
  }
}

@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;
  }
}



  /* 텍스트 박스를 일반 흐름으로 (가장 중요) */
  .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.swiper-slide-active .sub2_2_tx {
    opacity: 1;
    transition: opacity .3s;
  }

@media (max-width: 640px) {

  /* ✅ 옆 슬라이드 안 보이게(걸쳐보임 방지) */
  .sub2_2 .sub2_slider{
    overflow: hidden !important;
  }
  .sub2_2 .sub2_slider .swiper-wrapper{
    overflow: hidden !important;
  }

  /* ✅ 높이 자동은 유지 */
  .sub2_2,
  .sub2_2 .inner,
  .sub2_2 .sub2_slider,
  .sub2_2 .sub2_slider .swiper-wrapper,
  .sub2_2 .sub2_slider .swiper-slide{
    height: auto !important;
  }

  /* ✅ 텍스트는 '항상 보이게' (active 의존 제거 → 흰 화면/먹통 방지) */
  .sub2_2 .sub2_slider .swiper-slide .sub2_2_tx{
    opacity: 1 !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px 0 60px 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box;
  }
}


@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; }
}

/* 화면이 1400px 이하로 줄어들면 버튼 조금 더 슬림하게 */
@media (max-width: 1400px) {
    .header-cta-btn {
        min-width: 150px;
        padding: 0 14px;
        right: 35px;       /* 오른쪽 여백도 조금만 줄임 */
        font-size: 13px;
    }
}

/* 화면이 많이 좁아지면(노트북 작은 해상도) 버튼 자체를 숨김 */
@media (max-width: 1180px) {
    .header-cta-btn {
        display: none;
    }
}


/* 1025~1180px 근처에서는 버튼을 잠깐 숨김 (메뉴 가리는 것 방지) */
@media (max-width: 1180px) {
    .header-cta-btn {
        display: none;
    }
}

/* 📌 모바일: 버튼을 햄버거 아이콘 옆에 작게 배치 */
@media (max-width: 1024px) {
    .header-cta-btn {
        display: block;
        position: absolute; 
        top: 15px;                 /* 햄버거 아이콘 높이에 맞춤 — 필요하면 30~38 조정 */
        right: 85px;               /* 햄버거(오른쪽 20px) + 버튼 간 여백 고려 */
        transform: none;

        width: auto;
        min-width: 95px;           /* 모바일 버튼 크기 */
        height: 34px;
        line-height: 34px;
        font-size: 12px;
        padding: 0 12px;

        border-radius: 6px;        /* 모바일은 둥근 사각형이 더 자연스러워서 */
        white-space: nowrap;
        z-index: 9999;
    }
}

/* =========================
   FIX: 모바일(<=640)에서 도트/이미지 겹침 + 사진 아래 여백 방지
   - 도트를 "텍스트 박스의 바닥"에 붙이고
   - 이미지(슬라이드 비주얼)는 "도트 아래로 일정 간격"만큼 내려줌(=margin)
========================= */
@media (max-width: 640px){

  /* 1) 텍스트 박스를 기준점으로 만들고, 줄 수가 달라도 높이가 안정적으로 유지되게 */
  .main2 .main2_slider .swiper-slide > div:nth-of-type(1){
    position: relative !important;
    margin-bottom: 0 !important;
    /* 3줄/4줄 모두에서 도트가 들어갈 하단 공간이 확보되도록 최소 높이 확보 */
    min-height: clamp(220px, 38vw, 320px) !important;
  }

  /* 2) 도트: top 고정(260px) 말고 "텍스트 박스 바닥"에 붙이기 */
  .main2 .swiper-pagination{
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 5% !important;
    right: auto !important;

    /* 모바일은 가로 3개 도트 유지 */
    display: flex !important;
    flex-direction: row !important;

    transform: none !important;
    width: auto !important;
    z-index: 20 !important;
  }

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

  /* 3) "도트 아래 ↔ 사진 위" 간격은 padding 말고 margin으로 (이미지 자체엔 간격 주지 않음) */
  .main2 .main2_slider .swiper-slide .slide-visual{
    margin-top: 18px !important;     /* ✅ 여기 숫자만 12~28px 사이로 취향 조절 */
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 4) 모바일 이미지 높이는 유동(clamp)으로: 화면 줄일 때 비율 줄며 생기는 '밑 여백' 느낌 완화 */
  .main2 .main2_slider .swiper-slide .slide-image{
    height: clamp(260px, 62vw, 360px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  /* 5) 혹시 남아있는 slide 자체 하단 여백 제거(안전) */
  .main2 .main2_slider .swiper-slide{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}


@media (max-width: 900px){
  #main4.main4_regist > form{
    width: min(1200px, calc(100% - 28px));
  }

  /* 모바일은 세로 스택 */
  #main4.main4_regist .reg-fields{
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  #main4.main4_regist .reg-fields dt{
    text-align: left;
  }

  /* 버튼은 아래로 내려서 100% */
  #main4.main4_regist .bt-regist{
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    min-height: 56px;
    height: 56px;
  }

  #main4.main4_regist .agree-line{
    font-size: 15px;
  }
}

/* PC에서만 입력칸 최대폭 제한 */
@media (min-width: 901px){
  #main4.main4_regist .reg-fields{
    grid-template-columns: 150px minmax(360px, 520px) 150px; 
    /* ↑ 520을 480/500/560 등으로 조절하면 PC input 길이 바로 맞음 */
    justify-content: center;
  }
}

@media (min-width: 769px){
  #main4.main4_regist .agree-box{
    width: 100%;
    max-width: 100%;
    margin: 12px 0 0;   /* 가운데정렬(auto) 제거 → 흰박스 시작점에 딱 맞음 */
    padding-left: 0;
    box-sizing: border-box;
  }
}

@media (max-width: 768px){
  #main4.main4_regist .agree-box{
    width: 100%;
    margin-top: 10px;
  }
}

/* 모바일: 좌우 여백을 섹션에서 균일하게 */
@media (max-width: 900px){
  #main4.main4_regist{
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  /* form은 100%로 두고, 가운데 정렬 */
  #main4.main4_regist > form{
    width: 100% !important;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* 박스도 padding 포함해서 폭 계산되게 */
  #main4.main4_regist .regist{
    width: 100%;
    box-sizing: border-box;
  }

    #main4.main4_regist .bt-regist{
    margin-top: 20px;     /* ← 위 여백 */
    margin-bottom: 20px;  /* ← 아래 여백 */
  }
}

@media (max-width: 900px){
  .tbox{
    width: calc(100% - 24px);   /* 좌우 12px */
    padding: 40px 0 60px;
  }
}

/* ✅ 모바일에서 도트를 텍스트 영역 쪽으로 올리고, 도트-사진 간격 만들기 */
@media (max-width: 640px){

  /* 도트 absolute 기준이 main2가 되도록 */
  .main2{ position: relative; }

  /* 1) 도트 위치를 위로 올림 (값이 작아질수록 위로 올라감) */
  .main2 .swiper-pagination{
    position: absolute !important;
    top: 280px !important;   /* ✅ 여기 핵심: 기존 260이면 → 220~240 사이로 맞추면 됨 */
    left: 5% !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    display: flex !important;
    transform: none !important;
    z-index: 50 !important;
  }

  /* 모바일에서 도트 가로 유지 */
  .main2 .swiper-pagination span{
    display: inline-block !important;
    margin: 0 5px !important;
  }

  /* 2) 도트 아래 ↔ 사진 위 여백 (padding 금지 → margin으로만) */
  .main2 .main2_slider .swiper-slide .slide-visual{
    margin-top: 22px !important;  /* ✅ ‘10년이면 인생이 바뀝니다’ 위와 비슷한 숨 (18~28 조절) */
  }
}

/* =========================
   PREMIUM 01~05 모바일 글자 축소
========================= */
@media (max-width: 640px){
  .main-premium-list .premium-en{
    font-size: 1.1rem !important;     /* PREMIUM */
  }
  .main-premium-list .premium-num{
    font-size: 2.6rem !important;     /* 01. */
    line-height: 1 !important;
  }
  .main-premium-list .premium-title{
    font-size: 1.55rem !important;    /* 타이틀 */
    line-height: 1.25 !important;
  }
  .main-premium-list .premium-desc{
    font-size: 1.15rem !important;    /* 설명 */
    line-height: 1.45 !important;
  }

  /* 좌우/상하 패딩도 살짝 줄이고 싶으면(선택) */
  .main-premium-list .premium-item{
    padding: 1.2rem 1.1rem !important;
    gap: .9rem !important;
  }
}

@media (max-width: 640px){
  .main2 .main2_slider .swiper-slide > div:nth-of-type(1){
    margin-top: 45px !important;
  }
}

/* ✅ 모바일에서 hover가 잡혀도, is-open이면 무조건 열리게 (hover보다 우선) */
@media (max-width: 1024px){
  .premium-item.is-open .premium-desc{
    max-height: 400px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* =========================
   모바일: 관심고객 등록 버튼 여백 조정
========================= */
@media (max-width: 640px){

  /* 버튼 자체 (배경 + 클릭 영역) */
  a.bt-regist{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    padding: 16px 26px !important;   /* ⬅️ 글자-배경 여백 핵심 */
    border-radius: 8px;              /* 필요 없으면 삭제 */
    text-align: center;
  }

  /* 버튼 안 텍스트 */
  a.bt-regist span{
    display: block;
    line-height: 1.35;               /* ⬅️ 줄바꿈(br) 때문에 중요 */
    font-size: 1.1rem;               /* 모바일 가독성 */
  }
}

@media (max-width: 640px){

  /* 버튼을 감싸는 div가 있다면(지금 너 코드상 "</div>"가 있어서 존재함)
     그 div를 "입력창과 같은 폭"으로 맞추는 게 1순위 */
  .regist-btn-wrap,         /* 혹시 이런 이름일 수 있어서 같이 걸어둠 */
  .bt-regist-wrap,
  .form-btn-wrap,
  .f_wrapper .btn-wrap,
  .f_wrapper > div:last-child{  /* 마지막 div가 버튼 영역인 경우 */
    width: 100% !important;
    text-align: center;
  }

  /* ✅ 버튼 자체: 폭을 100%로 고정해서 INPUT과 동일 라인으로 */
  a.bt-regist{
    display: flex !important;
    width: 100% !important;        /* 핵심: 입력창 라인에 맞춤 */
    max-width: 100% !important;

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

    box-sizing: border-box !important;

    /* 가로는 width로 맞추고, padding은 세로 중심으로 */
    padding: 16px 0 !important;    /* 좌우 padding 제거(폭 밀림 방지) */
    margin: 0 auto !important;

    text-align: center;
  }

  /* 텍스트 줄 간격 */
  a.bt-regist span{
    display: block;
  }
}

@media (max-width: 640px){
  #main4.main4_regist .bt-regist{
    height: auto !important;      /* ✅ 고정 높이 제거 */
    min-height: 0 !important;     /* ✅ 같이 제거 */
    padding: 15px 0 !important;   /* ✅ 위아래 여백만으로 버튼 크기 결정 */
  }
}

@media (min-width: 1025px){

  /* ================================
     Floating Register Button (PC only)
  ================================ */

  .floating-register{
    display: block;          /* a면 inline-block도 OK */
    position: fixed;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 150px;
    height: 150px;
    z-index: 9999;
    text-decoration: none;
  }

  /* 회전 텍스트 */
  .floating-register .rotate-text{
    position: absolute;
    inset: 0;
    border-radius: 50%;
    font-size: 14px;
    letter-spacing: 2px;
    color: #ffffff;
    animation: spin 6s linear infinite;

    /* ✅ 겹침/뭉침 방지(너가 넣은 것 유지) */
    pointer-events:none;
    transform: translateZ(0);
  }

  .floating-register .rotate-text span{
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.12em;
    white-space: pre;
    -webkit-font-smoothing: antialiased;
    transform-style: preserve-3d;
  }

  /* 중앙 원 */
  .floating-register .center-btn{
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, #0b2a66 0%, #071b3f 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
  }

  /* 아이콘 */
  .center-btn .icon{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
  }

  .center-btn .icon img{
    width: 22px;
    height: auto;
    display: block;
  }

  /* 텍스트 */
  .center-btn .text{
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
  }

  /* 회전 애니메이션 */
  @keyframes spin{
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
}

/* =========================
   MOBILE QUICK (하단 2분할) - 최종
   media.css 맨 아래에 넣고,
   기존 @media(max-width:640px) 안의 .quick 관련 코드는 삭제/주석!
========================= */
@media (max-width: 640px){

  .quick{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    display: block !important;
    margin: 0 !important;
  }

  .quick ul{
    width: 100% !important;
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .quick ul li{
    flex: 1 !important;
    height: 76px !important;          /* 높이 통일 */
    padding: 0 !important;
    border-right: 1px solid #ffffff3b !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .quick ul li:last-child{
    border-right: 0 !important;
  }

  /* 좌/우 배경 */
  .quick ul li.quick-call{ background: #000 !important; }
  .quick ul li.quick-reg { background: #0b2a66 !important; }

  /* ✅ a를 “버튼 컨테이너”로 (파란글씨/밑줄 제거 핵심) */
  .quick ul li > a{
    position: relative !important;     /* absolute 금지 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;

    color: #fff !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* 텍스트도 확실히 흰색 */
  .quick ul li > a span{
    color: #fff !important;
    text-decoration: none !important;
    line-height: 1.1 !important;
    font-size: 1.05rem !important;
    font-weight: 400 !important;
  }

  /* ✅ 아이콘은 li:before 말고 a:before로 */
  .quick ul li > a:before{
    content: "" !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 0 10px 0 !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    display: block !important;
  }

  .quick ul li.quick-call > a:before{
    background-image: url(../images/quick_1.png) !important;
  }

  .quick ul li.quick-reg > a:before{
    background-image: url(../images/quick_2.png) !important;
  }

  /* 혹시 기존 li:before가 살아있으면 제거 */
  .quick ul li:before{
    content: none !important;
  }
}

@media (max-width:1200px){
  .subpage-tabs .sub_menu > ul{
    max-width:none;
    margin:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .subpage-tabs .sub_menu > ul > li{
    flex:0 0 auto;
    min-width:120px;
  }
}

@media (max-width:640px){
  .brand-lead{font-size:18px;}
  .brand-name{font-size:22px;}
  .brand-logo img{width:220px;}
  .brand-copy{font-size:13px; line-height:1.85;}
}

@media (max-width: 768px){
  .scroll-item .text-box{
    width: calc(100% - 40px);
    text-align: center;
  }

  .fade{
    transform: translateY(24px); /* 모바일은 이동량 살짝 줄이면 자연스러움 */
  }
}

@media (max-width: 900px){
  .infra-row,
  .infra-row.reverse{
    flex-direction:column;
    gap:16px;
  }

  .infra-media,
  .infra-text{
    width:100%;
  }

  .media-box{
    height:180px;
  }

  .infra-title{font-size:18px;}
  .infra-bullets{font-size:13px;}
}

/* ===============================
   PREMIUM (MOBILE)
================================ */
@media (max-width: 1024px){
  .premium-item,
  .premium-item.reverse{
     flex-direction: column-reverse; /* 🔥 이미지가 위로 */
  }

  .premium-txt,
  .premium-media{
    width:100%;
  }

  .premium-txt{
    padding-top:0;
  }

  .premium-txt::before{
    left:0;
    top:10px;
    height:38px;
  }

  .premium-img{
    height:200px;
  }
}

@media (max-width: 768px){

  .premium-item,
  .premium-item.reverse{
     flex-direction: column-reverse; /* 🔥 이미지가 위로 */
  }
  .premium-txt,
  .premium-media{
    width:100%;
  }
  .premium-img{height:200px;}
}

@media (max-width:1200px){
  .premium-page .sub_menu > ul{
    max-width:none;
    margin:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .premium-page .sub_menu > ul > li{
    flex:0 0 auto;
    min-width:120px;
  }
}

/* ===============================
   MAP (MOBILE)
================================ */
@media (max-width: 768px){
  .map-grid{
    flex-direction:column;
    gap:34px;
    margin-top:0;
  }

  .kakao-map,
  .promo-slot{
    height:240px;
  }

}

@media (max-width: 768px){
  .map-btns{
    justify-content: center;   /* 가운데 정렬 */
  }
  .btn-map{
    width: 100%;              /* 1개씩 아래로 */
    min-width: 0;
  }
}

/* ✅ map(오시는길) 모바일에서 가운데 정렬 보정 */
@media (max-width: 900px) {
  .map-info-wrap{
    flex-direction: column;
    align-items: center;      /* 🔥 flex-start → center */
    text-align: center;
  }

  .map-info-left{
    width: 100%;
    margin-bottom: 16px;
    text-align: center;       /* 주소/텍스트 가운데 */
  }

  .map-info-right{
    width: 100%;
    flex-direction: row;      /* 버튼 2개 가로 */
    justify-content: center;  /* 버튼 묶음 가운데 */
    gap: 12px;
  }

  .btn-naver,
  .btn-kakao{
    flex: 1;
    max-width: 220px;         /* 너무 길게 늘어나는거 방지(원하면 삭제) */
  }
}

@media (max-width: 768px){
  .map-inner{
    max-width: none;     /* 980px 제한 해제 */
    width: 100%;
    margin: 0 auto;
    left: 0 !important;  /* 혹시 상위에서 left로 밀면 강제 복구 */
    right: 0 !important;
  }
}

@media (max-width: 768px){
  .site-inner{
    max-width: none;
    width: 100%;
    margin: 0 auto;
    padding: 0px 20px 160px; /* 모바일에서 푸터/하단바 고려 */
    box-sizing: border-box;
  }

  .sub-tabs a{
    height: 48px;
    font-size: 13px;
  }

  .siteplan-note{
    font-size: 11px;
  }
}

@media (max-width: 640px){

  /* 타이틀(Community) 아래 여백 더 */
  .sub2_2 .sub_title{
    margin-bottom: 22px !important;
  }

  /* 이미지 아래 -> 텍스트 시작까지 간격 */
  .sub2_2 .sub2_slider .swiper-slide .sub2_2_tx{
    margin-top: 50px !important;      /* 타이틀/사진 사이 체감 여백 */
    margin-bottom: 50px !important;   /* 설명~버튼 사이 여백 */
    padding: 0 14px !important;
  }

  /* prev/next 버튼을 너무 붙지 않게 조금 아래로 */
  .sub2_2 .prev_next{
    bottom: 20px !important;
  }
}

@media (max-width:640px){
  /* 옆 슬라이드 보이는 것 제거 */
  .sub2_2 .sub2_slider,
  .sub2_2 .sub2_slider .swiper-wrapper{
    overflow: hidden !important;
  }

  /* 좌우 여백 동일하게 */
  .sub2_2 .inner{
    padding: 0 20px !important;  /* 원하는 여백 값 */
    box-sizing: border-box;
  }

  /* 이미지가 좌우 여백 안에서 꽉 차게 */
  .sub2_2 .sub2_slider .swiper-slide img{
    width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 640px){

  /* 옆 슬라이드 삐져나오는 현상 방지: 컨테이너만 잘라내기 */
  .sub2_2 .sub2_slider{
    overflow: hidden !important;
  }
  .sub2_2 .sub2_slider .swiper-wrapper{
    overflow: hidden !important;
  }

  /* slide는 overflow를 건드리지 말기(흰 화면/깜빡임 방지) */
}

/* 모바일: 이미지컷 라벨을 위로 올리기 */
@media (max-width: 640px){
  .community-page.sub2_2 .sub2_slider .swiper-slide > div:first-child{
    position: relative;
  }

  .community-page.sub2_2 .sub2_slider .img_tx{
    bottom: 18px !important;   /* 숫자 키우면 더 위로 올라감 (예: 18~28) */
    right: 16px !important;
  }
}

/* PC: 사진-텍스트 간격 늘리기 */
@media (min-width: 641px){
  .community-page.sub2_2 .inner .sub2_slider .swiper-slide{
    gap: 70px;              /* 지금보다 붙어 보이면 60~90 사이로 조절 */
    align-items: center;
  }
}


/* =========================
   COMMUNITY (commu.html) - MOBILE
   이미지 → 텍스트 → 버튼 순서로 쌓기
========================= */
@media (max-width: 640px){

  /* 2분할 flex 해제 → 세로로 쌓기 */
  .community-page .community-slider .swiper-slide{
    display: block !important;
  }

  /* 이미지 박스: 가로 꽉 차게 + 높이 유동 */
  .community-page .community-slider .swiper-slide > div:first-child{
    width: 100% !important;
    height: auto !important;
  }
  .community-page .community-slider .swiper-slide > div:first-child img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover;
  }

  /* 텍스트: 이미지 아래로 */
  .community-page .community-slider .sub2_2_tx{
    width: 100% !important;
    margin-top: 18px;
    padding: 0 14px;           /* ✅ 가로 잘림 방지 + 텍스트 시작점 기준 */
    box-sizing: border-box;
  }

  /* 버튼: 텍스트 시작점(= padding 14px)과 맞추기 */
  .community-page .community-slider .prev_next{
    position: static !important;  /* ✅ absolute 해제 */
    margin-top: 14px;
    padding: 0 14px;              /* ✅ 텍스트 시작점과 동일 */
    justify-content: flex-start;
  }
}

@media (max-width: 768px){
  .unit-wrap{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .unit-type-tabs{
    max-width: 100%;
    margin: 26px auto 26px;
    grid-template-columns: repeat(5, 1fr);
  }

  .unit-type-tabs .type-tab{
    height: 42px;
    font-size: 13px;
  }

  .unit-iso{
    aspect-ratio: auto !important; 
  }

  .unit-info::after{
    width: 150px;
    height: 150px;
    top: 16px;
    right: 16px;
  }
}

@media (max-width: 768px){
  .unit-iso img{
    height: auto !important;
    object-fit: contain !important;  /* 🔥 cover → contain */
  }
}





@media (max-width: 768px){
  .emodel-media{
     margin-top: 0;      /* ✅ 이 줄로 해결 */
    min-height: 0;      /* (이미 해둔 거 맞음) */
  }
  .emodel-placeholder{
    font-size: 18px;
  }
}

@media (max-width: 768px){


  .emodel-page .unit-note{
    margin-top: 20px;
  }
}

@media (max-width: 768px){
  .qna-wrap{ max-width: 100%; }

  .qna-q{
    padding: 15px 16px;
    font-size: 14px;
  }
  .qna-q::after{
    width: 52px;
    height: 52px;
    right: 12px;
  }
  .qna-a{
    font-size: 12.5px;
  }
}

@media (max-width: 768px){
  .qna-page .subpage-headline,
  .qna-page .subpage-headline{
    font-size: 24px;   /* compare-title 모바일 값과 동일 */
  }
}

@media (max-width: 768px){
  .sub_menu.sub_menu--four ul li a{
    white-space: normal;      /* 줄바꿈 허용 */
    padding: 0 14px;          /* 좌우 여백 확보 */
    line-height: 1.3;
  }
}


@media (max-width: 768px){
  /* ✅ 프리미엄6 타이틀을 Q&A 타이틀과 "완전 동일"하게 강제 */
  .qna-page .subpage-headline{
    font-family: "Nanum Myeongjo", "나눔명조", serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #091F5B !important;
    margin: 0 !important;
    
  }
    .qna-page .subpage-kicker{
    font-family: "Pretendard", "프리텐다드", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #171717 !important;
    margin: 0 !important;
    margin-bottom:8px !important;
  }
}

@media (max-width: 768px){
  /* ✅ 프리미엄6 타이틀만 모바일에서 크기 통일 */
  .subpage-title--premium6 .subpage-headline{
    font-size: 24px !important;
    font-weight: 800; /* 필요 없으면 삭제 가능 */
  }
}

@media (max-width: 768px){

  /* ✅ 2열 유지 + “행간(세로)” 체감 줄이기 */
  .qna-icons1{
    margin-top: 22px !important;
  }

  .qna-icons1 .qna-step{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;

    /* ✅ 여기서 “세로 간격” 조절 */
    row-gap: 30px !important;     /* ← 8~16 사이로 조절 추천 */
    column-gap: 12px !important;
    align-items: flex-start !important;
  }

  .qna-icons1 .qna-step > li{
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  /* ✅ 원/아이콘 */
  .qna-icons1 .step-circle{
    width: 96px !important;
    height: 96px !important;
    margin: 0 auto 6px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .qna-icons1 .step-circle img{
    width: 46px !important;
    height: auto !important;
    display:block !important;
  }

  /* ✅ 텍스트가 줄바꿈 많이 나와서 행 높이가 커지는 걸 줄임 */
  .qna-icons1 .step-title{
    font-size: 18px !important;
    margin-bottom: 6px !important;
  }

  .qna-icons1 .step-desc{
    font-size: 12.5px !important;
    line-height: 1.45 !important;   /* ✅ 행 높이 체감 줄이는 핵심 */
    max-width: 160px !important;
  }

  /* ✅ 모바일에서는 PC용 화살표 전부 끄고 */
  .qna-icons1 .qna-step > li::after{
    content: none !important;
    display: none !important;
  }

  /* ✅ “가운데만” 화살표: 1번/3번(각 줄의 왼쪽 카드)에만 표시 */
  .qna-icons1 .qna-step > li:nth-child(1)::after,
  .qna-icons1 .qna-step > li:nth-child(3)::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    top: 48px !important;          /* 원(96)의 중앙 */
    right: -18px !important;       /* 두 칸 사이 중앙 */
    width: 22px !important;
    height: 22px !important;
    background: url('/images/arrow_step.png') no-repeat center / contain !important;
    transform: translateY(-50%) !important;
    pointer-events:none !important;
  }
}

/* =========================
   QNA ICON PART 2 - Mobile FIX
   - 모바일: 2개씩(2열)
   ========================= */
@media (max-width: 640px){

  /* 아이콘2는 모바일에서 줄바꿈 허용 */
  .qna-icons2 .qna-benefit{
    display: flex;
    flex-wrap: wrap;          /* ✅ nowrap 해제 */
    justify-content: space-between;
    gap: 18px 10px;           /* (세로, 가로) 간격 */
  }

   /* 2개씩 보이도록 */
  .qna-icons2 .qna-benefit > li{
    flex: 0 0 calc(50% - 5px);
    max-width: calc(50% - 5px);
  }
}

@media (max-width: 768px){
  .compare-title{ font-size: 24px; }
  .compare-sub{ font-size: 16px; }
  .compare-table th, .compare-table td{ padding: 10px 10px; font-size: 13px; }
    /* PART 2 배경 원 → PART 1 step-circle 기준 */
  .qna-page .qna-icons2 .benefit-ico{
    width: 96px;
    height: 96px; }

      /* PART 2 아이콘 이미지 → PART 1 이미지 기준 */
  .qna-page .qna-icons2 .benefit-ico img{
    width: 35px;
    height: auto;
  }
  .qna-icons2 .benefit-title {
    font-size:18px;
  }

  .qna-icons2 .benefit-desc {
    font-size:12.5px;
  }

}

/* ===============================
   Q&A 페이지 겹침 방지 (모바일+태블릿)
================================ */
@media (max-width: 1200px){
  .qna-page .qna-wrap{
    height: auto !important;
    margin-bottom: 40px;
  }
}

/* PC에서만 시각적 중앙 보정 (둥둥배너 때문) */
@media (min-width: 1025px){
  #main4.main4_regist > form{
    box-sizing: border-box;
    padding-right: 190px; /* 필요시 160~220px 사이로 조절 */
  }
}

/* 모바일/태블릿은 보정 제거 */
@media (max-width: 1024px){
  #main4.main4_regist > form{
    padding-right: 0 !important;
  }

}

/* ✅ PC: 빨간 라인(흰 input 시작점) = agree 문구 시작점 맞추기 */
@media (min-width: 901px){
  #main4.main4_regist .agree-box{
    /* reg-fields 총폭(150 + 520 + 150)과 동일한 박스폭으로 가운데 정렬 */
    width: calc(150px + 520px + 150px) !important; /* = 820px */
    max-width: calc(100% - 40px) !important;       /* 창 줄이면 자연스럽게 줄어들게 */
    margin: 12px auto 0 !important;

    /* ✅ 핵심: 라벨 칼럼(150px)만큼 밀어서 흰 입력박스 시작점과 일치 */
    padding-left: 150px !important;
    box-sizing: border-box;
  }
}

/* 모바일/태블릿(세로 스택)에서는 다시 원래대로 */
@media (max-width: 900px){
  #main4.main4_regist .agree-box{
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    padding-left: 0 !important;
  }
}