/* Desktop large (1920 이상) 생략 가능 */
.mobile {display: none;}
.pc {display: block;}
/* PC 일반 (1440 ~ 1919) */
/* 필요시 커스텀 가능 */

/* 노트북 / 태블릿 가로 (1024 ~ 1439) */
@media (max-width: 1439px) {
    .main-visual-text h1 {
        font-size: clamp(24px, 4vw, 36px);
    }
    .service-boxes-inner {
        gap: 20px;
    }
}
@media (max-width: 1180px) {
.con-wrap {width: 90%;}
.wellness-program .img-box {
    margin-right: 80px;
  }
 .wellness-program .img-box,
  .wellness-program .text-box {
    flex: 1 1 100%;
    margin: 0 !important;
  }
  .wellness-program .img-box {
    margin-bottom: clamp(24px, 4vw, 32px);
    width: 100%;
    max-width: 100%;
  }
  .wellness-program .item:nth-of-type(even) {flex-direction: column-reverse; align-items: flex-start}
  .wellness-program .txt-box {width:100%;}

}
/* 태블릿 세로 (768 ~ 1024) */
@media (max-width: 1024px) {
    .mobile {display: block !important;}
    .pc {display: none;}
    .web{display: none !important}
    .con-wrap {width: 90%;}

    /*메인*/
    .main-visual .con-wrap {padding:clamp(60px, 7.4vw, 140px) 0}
    .main-wrapper .section-title:before {
        content: "";
        width: 22px;
        height: 3px;
        top: -10px;
    }

    .service-boxes-inner {
        flex-direction: column;
        align-items: center;
    }
    
    .main-visual-text h1 {
        font-size: clamp(20px, 5vw, 32px);
    }

    .slogan-inner {
        width:90%;
    }

    /*메인-지도*/
    .contact-info {
        width: 100%;
        position: static;
        transform: none;
        padding: 10% 5%;
    }

    /*드웰클리닉*/
    .intro .intro-inner {gap:30px; flex-wrap: nowrap; width: 90%; padding: clamp(60px, 7.4vw, 140px) 0;}
    .intro .intro-inner .text-box {
        width: 100%;
    }
    .intro-inner, .features {
        align-items: flex-start;
    }
    .feature {
        flex-direction: column;
        text-align: left!important;
    }
    .feature .img, .feature .desc {
        order: unset;
    }
    .feature:nth-of-type(even) {
        flex-direction: column;
    }
    .image-box, .feature .img, .feature .desc {
        flex: 1 1 100%;
        width: 100%;
    }
    .feature .desc {padding:6% 0;}
    .feature .img img {width:100%;}
    .feature:nth-of-type(even)::before {top: 90%; left:85%;}
    .feature:nth-of-type(odd)::before {top: 90%; left:80%;}

    /*진료시간 오시는 길*/
    .location-info .transport-box {
        flex-direction: column;
    }

    .location-info .transport {
        flex: 1 1 100%;
    }
   
    .cs-center .img-area,
    .cs-center .text-area {
        width: 100%;
    }

    .btn-area {
        justify-content: flex-start;
    }

    .cs-center {
      background: #fff;
    }

    .cs-center .ce-con {
      width: 90%;
      margin: 0 auto;
      flex-direction: column;
    }

    /* 의료진 소개 */
    .doctor .doctor-intro .profile-wrap {
      flex-direction: column;
      gap: 40px;
    }
    .doctor .intro-text {
      text-align: left;
    }
    .doctor .career-list {
      columns: 1;
    }

    /*피부클리닉 - 색소*/
     .cause-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .distinguish-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    /*피부클리닉 - 홍조*/
    .intro02 .sub-area .flex-box .text-box {width:100%;}

    /*피부클리닉 - 보톡스*/
    .botox-effect .effect-wrapper {
    flex-direction: column;
    padding: 0;
  }
  .botox-effect, .infusion .botox-effect {
    text-align: center;
    background: url('https://nowwd2.speedgabia.com/dwellclinic/img/sub02/botox-effect-bg.jpg') no-repeat, center bottom ;
    background-size: cover;
  }
  .botox-effect .effect-image {
    order: -1;
    max-width: 240px;
    margin: 0 auto;
    flex: 0 0 240px;
  }

  .botox-effect .effect-image img{background: #fff;}
  .botox-effect .effect-box {flex-direction: column;}
  .botox-effect .effect-box.left{align-items: center;}
  .botox-effect .effect-box.right{align-items: center;}
  .botox-effect .cards {text-align: center;}

  /*피부질환클리닉 - 아토피*/
  .atopy-box .box-wrap {grid-template-columns: repeat(3, 1fr);}



.obesityBox01 ul{text-align: center; font-size: 0; margin-bottom: 25px}
.obesityBox01 ul li{display: inline-block; width:48%; height:75vw; box-shadow: 0px 10px 15px #f8f8f8; overflow: hidden; border-radius: 10px; font-size: 14px; vertical-align: top}
.obesityBox01 ul li + li{margin-left: 0px;}
    .obesityBox01 ul li:nth-child(2n){margin-left: 4%; margin-bottom: 15px}
.obesityBox01 ul li ol{padding: 15px 15px 15px; text-align: left}
.obesityBox01 ul li ol dt{font-size: 18px; color: #3d9e9b; font-weight: 700; margin-bottom: 10px}

.obesityBox02{text-align: center; font-size: 18px; }

.obesityBox03{display: inline-block; width: 100%; font-size: 18px; letter-spacing: -0.04em }
.obesityBox03 dt{font-size: 36px; color: #3d9e9b; margin: 25px 0 27px; font-weight: 700}

.obesityBox04{display: inline-block; width: 100%;  letter-spacing: -0.04em; font-weight: 700; vertical-align: top; margin-left: 0px; margin-top: 20px }

.obesityBox04 ul{font-size: 0; text-align: center}
.obesityBox04 ul li{display: inline-flex; width: 31%; height: 28vw; background: #fff;justify-content:center; align-items:center; flex-direction: column ;font-size: 18px; border: #40a09d 1px solid; border-radius: 50%}
.obesityBox04 ul li:nth-child(2n){width: 3%; background: none; border: none; border-radius: 0}
.obesityBox04 ul li span{border-bottom:#40a09d 1px dotted; display: block; width: 100% }
.obesityBox04 ul li dt{color: #3d9e9b; font-size: 26px}

.obesityBox05{margin-top: 50px}
.obesityBox05 ul{text-align: center; font-size: 0}
.obesityBox05 ul li{display: inline-block; width: 100%; height: auto; box-shadow: 0px 10px 15px #dcf2f3; overflow: hidden; border-radius: 20px; font-size: 16px; background: #fff}
.obesityBox05 ul li + li{margin-left: 0px; margin-top: 15px}
.obesityBox05 ul li ol{padding: 15px 15px 15px; text-align: left}
.obesityBox05 ul li ol dt{font-size: 26px; font-weight: 700; margin-bottom: 10px}

.obesityBox06{margin-top: 35px; margin-bottom: 50px}
.obesityBox06 ul{text-align: center; font-size: 0}
.obesityBox06 ul li{display: inline-block; width: 48%; border: #9ff2ef 2px solid; font-size: 16px; vertical-align: top}
.obesityBox06 ul li + li{margin-left: 4%}
.obesityBox06 ul li dt{display: flex; justify-content:center; align-items:center; flex-direction: column ; font-size: 20px; font-weight: 700; height: 50px; background: #e4f9fa}
.obesityBox06 ul li dl{display: flex; justify-content:center; align-items:center; flex-direction: column ; height: 130px; padding: 0 10px}


.obesityBox07{text-align: center; font-size: 22px; font-weight: 700}

.obesityBox08{margin-top: 35px; }
.obesityBox08 ul{text-align: center; font-size: 0}
.obesityBox08 ul li{display: inline-block; width: 31%; vertical-align: top; font-weight: 700; font-size: 17px; }
.obesityBox08 ul li + li{margin-left: 3%}
.obesityBox08 ul li dt{display: flex; justify-content:center; align-items:center; flex-direction: column ; width:100%; height: 45px; background: #3d9e9b; color: #fff; margin:0 auto 15px; border-radius: 30px }
.obesityBox08 ul li dl{ width:100%; height: auto; border: #3d9e9b 1px solid; border-radius: 10%; padding-top: 20px; padding-bottom: 15px}
.obesityBox08 ul li dl img{display: block; margin: 0 auto 15px; width: 40%}
.obesityBox08 ul li dl span{color: #3d9e9b;}


.obesityBox09{margin-top: 35px; }
.obesityBox09 ul{text-align: center; font-size: 0}
.obesityBox09 ul li{display: inline-flex;justify-content:center; align-items:center; flex-direction: column ;  width: 48%; height: 46vw; vertical-align: top; font-weight: 700; font-size: 18px; background: #fff; border: #9ff2ef 2px solid; border-radius: 10px}
.obesityBox09 ul li + li{margin-left: 0%}
    .obesityBox09 ul li:nth-child(2n){margin-left: 4%; margin-bottom: 15px}
.obesityBox09 ul li img{display: block; margin: 0 auto 15px; width: 40%}
.obesityBox09 ul li span{color: #3d9e9b;}


.obesityBox09{margin-top: 30px; }
.obesityBox09 ul{text-align: center; font-size: 0}
.obesityBox09 ul li{display: inline-flex;justify-content:center; align-items:center; flex-direction: column ;  width: 304px; height: 304px; vertical-align: top; font-weight: 700; font-size: 18px; background: #fff; border: #9ff2ef 2px solid; border-radius: 20px}
.obesityBox09 ul li + li{margin-left: 21px}
.obesityBox09 ul li img{display: block; margin: 0 auto 25px}
.obesityBox09 ul li span{color: #3d9e9b;}

.introBox01{margin-top: 20px; border: #9ff2ef 2px solid; border-radius: 20px; overflow: hidden}
.introBox01 ul{font-size: 0}
.introBox01 ul li{display: inline-block; width: 100%; background: #f4ffff; height: auto; font-size: 22px; font-weight: 700;  text-align: center; align-items:center; justify-content:center; vertical-align: top; padding-top: 30px; padding-bottom: 30px}
.introBox01 ul li b{font-weight: 700; color: #3d9e9b; margin-right: 5px }
.introBox01 ul li + li{width: 100%; background:#fff; text-align: left; padding: 30px 20px 30px 20px;  position: relative; font-size: 18px; font-weight: 400; justify-content: flex-start;}
.introBox01 ul li + li span{position: absolute;bottom: -35px; right: 20px; font-size: 70px; font-style: italic; font-weight: 900; color: #f5f9f9; z-index: 0}
.introBox01 ul.h1 li{height: auto}
.introBox01 ul.h1 li:nth-child(2){flex-direction: column; font-size: 14px; padding-top: 20px}
.introBox01 ul.h1 li ol{display: block;padding: 0; padding-left: 130px; margin: 0; margin-left: 0px; position: relative; margin-bottom: 20px; }
.introBox01 ul.h1 li ol img{position: absolute; left: 0; width: 100px}
.introBox01 ul.h1 li ol dl{font-size: 18px; margin-top: 0px; padding-top: 20px}
.introBox01 ul.h1 li ol dt{font-size: 24px; font-weight: 700; margin-bottom: 15px}
.introBox01 ul.h1 li ol dd{font-size: 14px}

.introBox01 ul li:nth-child(2) div{z-index:999 !important;}
    
    
.pro2Box01{font-size: 12px; margin-bottom: 50px}
.pro2Box01 h2{font-size: 18px; margin: 25px 0 15px}    
    
}



@media (max-width: 820px) {
 /* 웰니스클리닉 - 스킨부스터 */
.skinbooster .booster-item,
  .skinbooster .booster-item.reverse {
    flex-direction: column;
  }
  .skinbooster .booster-img img {
    max-width: 100%;
  }
   .wellness-program .item:nth-child(even) .img-box {
    margin-right: 0;
    margin-left: 80px;
  }
  .herpes .intro .intro-inner {
        flex-direction: column;
    }

  .wellness-path .highlight {
  font-size: 26px; 
}    
    
  .wellness-path h3 {
  font-size: clamp(26px, 2.5vw, 32px);
  margin-top: clamp(24px, 5vw, 100px);
  margin-bottom: clamp(16px, 3vw, 24px);
  text-align: left;  position: relative
}
.wellness-path h3 ol {padding-left: 55px; background: #fff; padding-right: 20px; display: inline-block; }
.wellness-path h3 span.bg{background: #d5f2f1; height: 32px; width: 32px;  border-radius: 50%; position: absolute; left: 0; top: 0px; z-index: 1}
.wellness-path h3 span.font{position: absolute;font-size: 22px; color: #3d9e9b; left: 17px; top: 8px; z-index: 2 }
.wellness-path h3 span.line{border-top: #c7c7c7 1px dashed; width: 100%; position: absolute; top: 50%; z-index: -1}

}

/* 모바일 (430 ~ 767) */
@media (max-width: 768px) {
    .main-visual-text {
    position: static;
    transform: none;
    padding: 20px 10px;
    /*background: rgba(0, 0, 0, 0.4);  모바일에서 배경 반투명 */
  }

  /*.main-visual {
    min-height: clamp(280px, 50vh, 500px); /* 모바일 대응 min-height 약간 줄이기 */
      .map-contact {position: relative; margin: 50px auto !important} 
    
    .map-contact-inner {
        flex-direction: column;
    }
    .map-area img {
        max-width: 100%;
        height: auto;
    }
    
    .service-boxes-inner {
        gap: 16px;
    }
     /*드웰클리닉*/
    .intro .intro-inner {
        flex-direction: column;
    }
    .intro .intro-inner .image-box{
        width: 100%;
    
    }
    /*피부클리닉 - 색소*/
   .cause-cards .img-box {height: 250px;}
   .pigment-layer .caption {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .pigment-layer .caption span {
    max-width: 100%;
  }
  .pigment-step .step-list {
    flex-direction: column;
  }

  .pigment-step .step-item {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
  }
  .program-area .program-item,
  .program-area .program-item.reverse {
    flex-direction: column;
  }

  .program-area .program-item .text {
    flex: none;
  }
  /*-- 피부클리닉 - 여드름 --*/
  .acne-grid {grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
  .acne-grid .acne-box .img-area {
    flex: 0 0 100px;
    min-height: 100px;
  }
  /* 피부클리닉 - 메디컬 스킨케어 */
  .care-programs .program {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
   }

  .care-programs .img-box,
  .care-programs .text-box {
    width: 100%;
    min-width: 100%;
    flex: 1 1 200px;
  }
  .botox-need .need-list {grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));}


  /* 피부클리닉 - 모공/흉터 */
  .scar-complex .grid-box {grid-template-columns: repeat(1, 1fr); gap: 0;}
  .scar-complex .box {min-height: 180px;}
  .scar-laser .grid-box {
  grid-template-columns: 1fr;
  gap: clamp(20px, 4vw, 25px);}
  

  .swiper-int .swiper-button-next:after {
    content: url('https://nowwd2.speedgabia.com/dwellclinic/img/sub01/arrow-right.png')!important;
    font-size:32px;
    width:24px;height:42px;
   }
  .swiper-int .swiper-button-prev:after {
    content: url('https://nowwd2.speedgabia.com/dwellclinic/img/sub01/arrow-left.png')!important;
    font-size:32px; width:24px;height:42px;
  }
  /*.scar-laser .grid-box .text-box {padding-top: clamp(20px, 3.4vw, 40px); }*/

  /* 피부질환클리닉 - 아토피 */
  .atopy-box .box-wrap {grid-template-columns: repeat(2, 1fr);}

  /*피부질환클리닉 - 대상포진*/
  .compare-box {flex-direction: column;  }
  .compare-box .item {flex: 1 1 270px;}

 






}








/* 초소형 모바일 (360 ~ 430) */
@media (max-width: 430px) {
    .main-visual-text p {
        font-size: clamp(12px, 3vw, 16px);
    }
    .section-title {
        font-size: clamp(18px, 5vw, 24px);
    }
    .section-desc {
        font-size: clamp(12px, 3vw, 16px);
    }

    .swiper-slide {
      margin-right: 30px!important;
    }
    .equipment .swiper-slide {
        padding: 0 1rem;
    }
   
    .pigment-step .step-item{flex-direction: column;}
    .cause-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .distinguish-cards {
        grid-template-columns: repeat(1, 1fr);
    }

    .acne-worsen .cards-list {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        flex-direction: column;
    }

    /* 피부질환클리닉 - 아토피 */
    .atopy-box .box-wrap {grid-template-columns: repeat(1, 1fr);}

    /* 피부질환클리닉 - 대상포진 */
    .compare-box ul li .item-title {width:35%;}
    .herpes .title-cards {text-align: center; align-items: center;}
    .hair-box-wrap {margin: 0;}
    .hair-box {border: 2px solid #9ff2ef; border-bottom: none;}
    .hair-box:nth-child(3) { border-bottom: 2px solid #9ff2ef;}

    /* 웰니스클리닉 - 맞춤영양수액 */
    .infusion .botox-effect .cards {min-width: 100%;}





}