* {
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
}

/* 지점찾기 topMenu 여백 */
.topMenu {
    padding-top: clamp(20px, 3vw, 60px);
}

.wbKeepAll {
    word-break: keep-all;
}


/*인스타 배너 스켈레톤 효과*/
@keyframes skeleton-loading {
    0% {
    background-position: 200% 0;
    }
    100% { background-position: -200% 0;
    }
}

/* 팝업 */
.main-popup .inner.mob{width: 90% !important;left:50% !important;top:56% !important;transform: translate(-50%,-50%) !important;}
.main-popup .inner.mob .mySwiper{position: relative;}
.main-popup .inner.mob .popup-btn{background: #000;height: clamp(38px,2.6vh,52px) !important;border-radius:0 0 12px 12px !important}
.main-popup .inner.mob .swiper-pagination{justify-content:center;gap:6px;background-color: transparent !important;padding:18px 10px;position: absolute;flex-direction:row;bottom:0;left:0;width:100%}
.main-popup .inner.mob .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1 !important}
.main-popup .inner.mob .swiper-pagination-bullet{opacity:0.5;background: #fff;width: 14px !important;height: 2px !important;}

/* 인스타 배너 */
#instagramSection {
    background-color: #fff;
    padding: clamp(60px, 6.77vw, 130px) 0px 0px 0px;
}

#instagramSection .swiper-slide {
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 9/16;
}

#instagramSection .swiper-slide::after {
    content: '';
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    width: 8%;
    height: 8%;
    background-image: url('/main/img/mouse_base.png');
    background-size: contain;
    background-position: center;
    background-repeat:
    no-repeat;
    filter: grayscale(100%) brightness(0.9);
    z-index: 0; border-radius: 30px;
}

#instagramSection .swiper-slide::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(240, 240, 240, 0.3) 25%, rgba(224, 224, 224, 0.5) 50%, rgba(240, 240, 240, 0.3) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    z-index: 1; border-radius: 30px;
    pointer-events: none;
}

#instagramSection .swiper-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 2;
    display: block;
    filter: none;
}

#instagramSection .swiper-slide video.loaded {
    animation: none;
}

#instagramSection .progressArea {
    margin-top: 30px;
}

#instagramSection .progressArea .util {
    height: 30px;
    gap: 24px;
}

#instagramSection .progressArea .swiper-scrollbar {
    width: calc(100% - 50px);
    height: 3px;
    background-color: #ddd;
    border-radius: 2px;
    position: static !important;
}

#instagramSection .progressArea .swiper-scrollbar .progress {
    height: 3px;
    width: 0;
    background-color: #BB2649;
    border-radius: 2px;
}

/* 당신의 얼굴을 맡긴다는 건 -수정 */
#instagramSection .progressArea .caretVar {
    width: 50px;
}

/*메인 슬라이드 배너*/
#secMainBanner {}
#secMainBanner .mainBannerSwiper.pc {display: block;}
#secMainBanner .mainBannerSwiper.mob {display: none;}

#secMainBanner .swiper-slide {width: 100%;}

#secMainBanner .cont {width:40%;padding:45px 100px 45px 45px;gap:60px;border-radius: 30px;background: rgba(255, 255, 255, 0.50);backdrop-filter: blur(7.5px);}
#secMainBanner .cont .txtArea {gap:20px;}
#secMainBanner .cont .txt1 {color:#212529;font-size: clamp(24px,2.9vw,42px);font-weight: 700;line-height: 54px;letter-spacing: -0.84px;}
#secMainBanner .cont .txt2 {color: #343A40;font-size: clamp(14px,1.25vw,18px);font-weight: 400;line-height: 30px;letter-spacing: -0.36px;}
#secMainBanner .cont .reservation {width:clamp(134px,13.4vw,194px);font-size: clamp(14px,1.25vw,18px);font-weight:600;background-color:#BB2649;padding:20px 24px;gap:10px;border-radius:12px;color:#fff;}

#secMainBanner .progressArea {width:40%;position: absolute;top: calc(50% + clamp(100px,15.27vw,220px));z-index: 5;}
#secMainBanner .progressArea > .divFlex.jcAlignItems {gap:20px;grid-template-columns: 1fr auto 1fr;flex-direction: row !important;}
#secMainBanner .progressArea .swiper-scrollbar {grid-column: 2;height:3px;background-color:rgb(255 255 255 / 30%);position: relative;align-self: center !important;flex: 1;margin: 0 !important;}
#secMainBanner .progressArea .swiper-scrollbar .progress {height:3px;width:0;background-color:#fff;border-radius:2px;position: absolute;top:0;left:0;}
#secMainBanner .progressArea .swiper-scrollbar-drag {background-color:#fff;}
#secMainBanner .progressArea .caretVar {grid-column: 3;justify-self: end;gap: 10px;}
#secMainBanner .progressArea .caretVar i {font-size:32px;color:#fff;}

#secMainBanner .mob .swiper-slide {
    position: relative; /* contArea 위치 기준 */
}

#secMainBanner .mob .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}

#secMainBanner .contArea{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    width: 80%;
    z-index:10;
}

#secBrandString {
  position: relative;
  height: calc(100vh * 6);
  background: linear-gradient(
    0deg,
    #EBBEC8 0%,
    rgba(255, 255, 255, 0.00) 100%
  );

}

#secBrandString .text_box1 {
  position: sticky;
  top: 0;
  height: 60vh; /* 화면 기준 */
}

#secBrandString .text_box1 p {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, 50px);
  opacity: 0;
  color: #343A40;
  text-align: center;
  font-size: clamp(18px, 2.5vw, 40px);
  font-style: normal;
  font-weight: 700;
  line-height: clamp(30px, 3.38vw, 57px);
  letter-spacing: -0.96px;

  transition: opacity 0.8s ease, transform 0.8s ease;
  width: 100%;
}

#secBrandString .text_box1 p .logo{
    width: clamp(140px,13.8vw,200px);
}

#secBrandString .text_box1 p.txt {
  padding:0 20px;
}

#secBrandString .text_box1 p.visible {
  opacity: 1;
  transform: translate(-50%, -50%); /* 정확히 화면 중앙 */
}

#secBrandString .text_box1 p.fade-out {
  opacity: 0;
  transform: translate(-50%, -100px); /* 위로 사라짐 */
}

/* 당신의 얼굴을 맡긴다는 건 */
#secBrandStr .v2Container>.tArea {
    margin-top: clamp(100px, 9.3vw, 180px);
}

#secBrandStr .v2Container .ttArea .txt1 {
    font-size: clamp(24px, 2.5vw, 48px);
    font-weight: bold;
    line-height: clamp(30px, 3.38vw, 65px);
}

#secBrandStr .v2Container .ttArea .txt2 {
    font-size: clamp(24px, 2.5vw, 48px);
    font-weight: bold;
    line-height: clamp(30px, 3.38vw, 65px);
}

#secBrandStr .v2Container .tArea2 .txt1 {
    font-size: clamp(24px, 2.5vw, 48px);
    font-weight: bold;
    line-height: clamp(30px, 3.38vw, 65px);
}

#secBrandStr .v2Container .tArea2 .txt2 {
    font-size: clamp(24px, 2.5vw, 48px);
    font-weight: bold;
    line-height: clamp(30px, 3.38vw, 65px);
}

#secBrandStr .v2Container .tArea3 .txt1 {
    font-size: clamp(24px, 2.5vw, 48px);
    font-weight: bold;
    line-height: clamp(30px, 3.38vw, 65px);
}

#secBrandStr .v2Container .tArea3 .txt2 {
    font-size: clamp(24px, 2.5vw, 48px);
    font-weight: bold;
    line-height: clamp(30px, 3.38vw, 65px);
}

#secBrandStr .v2Container .tArea3 .txt3 {
    font-size: clamp(24px, 2.5vw, 48px);
    font-weight: bold;
    line-height: clamp(30px, 3.38vw, 65px);
}

#secBrandStr .v2Container .tArea4 .txt1 {
    font-size: clamp(24px, 2.5vw, 48px);
    font-weight: bold;
    line-height: clamp(30px, 3.38vw, 65px);
}

#secBrandStr .v2Container .tArea4 .txt2 {
    font-size: clamp(24px, 2.5vw, 48px);
    font-weight: bold;
    line-height: clamp(30px, 3.38vw, 65px);
}

#secBrandStr .v2Container .tArea4 .txt3 {
    font-size: clamp(24px, 2.5vw, 48px);
    font-weight: bold;
    line-height: clamp(30px, 3.38vw, 65px);
}

#secBrandStr .v2Container .tArea4 .txt4 {
    font-size: clamp(24px, 2.5vw, 48px);
    font-weight: bold;
    line-height: clamp(30px, 3.38vw, 65px);
}

#secBrandStr .v2Container .tArea4 .txt5 {
    font-size: clamp(24px, 2.5vw, 48px);
    font-weight: bold;
    line-height: clamp(30px, 3.38vw, 65px);
}

#secBrandStr .v2Container .withTonesWrap {
    display: flex;
    width: clamp(50%, 14vw, 279px);
    align-items: center;
    margin: 0 auto;
}

#secBrandStr .v2Container .withTonesWrap img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 23px
}

#secBrandStr .v2Container .companyBg {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    background-position: center;
    background-size: cover;
}

#secBrandStr .bottomImg {
    margin: 0;
    padding: 0;
}

#secBrandStr .bottomImg .companyImg img {
    width: 100%;
    height: auto;
}

/* 기부 */
#secHonorSociety {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 0%, #DEE2E6 100%);;
    padding-top: clamp(66px, 6.88vw, 132px)
}

;

#secHonorSociety .content {}

#secHonorSociety .content .logoImg {
    width: 60px;
    height: 38px;
    display: inline-block;
}

#secHonorSociety .content .logoImg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

#secHonorSociety .content .tt {
    font-size: clamp(22px, 2.5vw, 40px);
    font-weight: bold;
    line-height: clamp(30px, 3.38vw, 52px);
    padding: clamp(16px, 1.46vw, 28px) 0px;
}

#secHonorSociety .content .txt2 {
    font-size: clamp(14px, 1.04vw, 20px);
    line-height: clamp(22px, 1.77vw, 34px);
}

#secHonorSociety .content .txt2 b {
    font-weight: bold;
}

#secHonorSociety #honorSocietySwiper {
    margin-top: clamp(80px, 12vw, 150px);
}

#secHonorSociety #honorSocietySwiper .swiper-slide {
    border-radius: 30px;
    overflow: hidden;
}

#secHonorSociety #honorSocietySwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#secHonorSociety #honorSocietySwiper .util {
    justify-content: center;
    margin-top: clamp(12px, 2.92vw, 56px);
    align-items: flex-end;
    gap: 25px;
}

#secHonorSociety #honorSocietySwiper .util .swiper-scrollbar {
    width: calc(100% - 50px);
    height: 3px;
    background-color: #ddd;
    border-radius: 2px;
    margin-top: 30px;
}

#secHonorSociety #honorSocietySwiper .util .swiper-scrollbar .progress {
    height: 3px;
    width: 0;
    background-color: #BB2649;
    border-radius: 2px;
}

#secHonorSociety #honorSocietySwiper .util .caretVar {
    width: 50px;
}

/* 시술리스트 */
#secTreatmentList {
    padding: 65px 0px;
    position: relative;
}

#secTreatmentList::before {
    content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 287px;
        background: linear-gradient(
            180deg,
            #ECC0C9 0%,
            rgba(255, 255, 255, 0) 100%
        );
        z-index: 0;
}

#secTreatmentList .title {
    margin-top: clamp(50px, 5.21vw, 100px);
    font-size: clamp(22px, 2.5vw, 40px);
    line-height: clamp(30px, 3.38vw, 52px);
}

#secTreatmentList .list {
    margin-top: clamp(30px, 3.39vw, 65px);
    gap: 30px;
    flex-wrap: wrap;
}

#secTreatmentList .list .item {
    width: calc(25% - 30px);
}

#secTreatmentList .list .item .img {
    border-radius: 30px;
    padding: 16px 36px;
    background-color: #F8F9FA;
}

#secTreatmentList .list .item .info {
    margin-top: clamp(14px, 1.14vw, 20px);
}

#secTreatmentList .list .item .info .prdName {
    font-size: clamp(16px, 1.15vw, 22px);
    color: #212529;
    margin-bottom: 12px;
}

#secTreatmentList .list .item .info .desc {
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 2%;
}

#secTreatmentList .list .item .info .desc .prdDesc {
    width: calc(100% - 66px);
}

#secTreatmentList .list .item .info .desc .prdPersent {
    width: 54px;
    color: #F43260;
    font-size: clamp(16px, 1.25vw, 24px);
}

/* 원장님이 알려주는 BEST */
#secProcedureSlider {
    width: 100%;
    margin: 0 auto;
    padding: clamp(60px, 8vw, 120px) 0;
}

#secProcedureSlider .topTitle {
    font-size: clamp(22px, 2.19vw, 40px);
    margin-bottom: clamp(30px, 3.13vw, 52px);
}

#secProcedureSlider .mySwiper {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

#secProcedureSlider .mySwiper .slideSet {
    justify-content: center;
    align-items: center;
    gap: clamp(15px, 1.56vw, 30px);
}

#secProcedureSlider .mySwiper .slideSet .slideLink {
    display: flex;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    gap:30px;
}

#secProcedureSlider .mySwiper .slideSet .bigImgBox {
    max-width: 880px;
    position: relative;
}

#secProcedureSlider .mySwiper .slideSet .bigImgBox img {
    width: 100%;
    height: clamp(500px, 40vw, 600px);
    object-fit: cover;
    display: block;
    border-radius: 30px;
}

#secProcedureSlider .mySwiper .slideSet .bigImgBox .descBox {
    position: absolute;
    bottom: 30px;
    left: 40px;
    right: 40px;
    display: flex;
    padding: 30px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.50);
}

#secProcedureSlider .mySwiper .slideSet .bigImgBox .descBox .txt1 {
    font-size: clamp(20px, 1.25vw, 24px);
    font-weight: bold;
    line-height: 34px;
}

#secProcedureSlider .mySwiper .slideSet .bigImgBox .descBox .txt2 {
    font-size: clamp(14px, 1.04vw, 20px);
    line-height: clamp(20px, 1.67vw, 32px);
}

#secProcedureSlider .mySwiper .slideSet .bigImgBox .descBox .txt3 {
    font-size: 18px;
    font-style: normal;
}

#secProcedureSlider .mySwiper .slideSet .bigImgBox .descBox>.divFlex {
    width: 100%;
    align-items: flex-start;
    flex-wrap: wrap;
}

#secProcedureSlider .mySwiper .slideSet .bigImgBox .descBox .info {
    width: calc(100% - 251px);
}

#secProcedureSlider .mySwiper .slideSet .bigImgBox .descBox .hashTags {
    margin-left: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#secProcedureSlider .mySwiper .slideSet .bigImgBox .descBox .hashTags span {
    padding: 10px;
    border-radius: 10px;
    background: #FFF;
}

#secProcedureSlider .mySwiper .slideSet .smallImgBox .txt4 {
    font-size: clamp(16px, 1.25vw, 24px);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: clamp(15px, 2vw, 25px);
    border-radius: 0 0 30px 30px;
    background: linear-gradient(180deg, rgba(248, 249, 250, 0.00) 0%, rgba(0, 0, 0, 0.70) 100%);
    color: #fff;
}

#secProcedureSlider .util {
    display: flex;
    margin-top: 50px;
}

#secProcedureSlider .smallImgBox {
    max-width: clamp(250px, 31vw, 500px);
    position: relative;
    background: #F8F9FA;
    border-radius: 30px;
}

#secProcedureSlider .smallImgBox img {
    width: 100%;
    height: clamp(300px, 40vw, 600px);
    object-fit: cover;
    display: block;
    border-radius: clamp(10px, 1.5vw, 20px);
}

#secProcedureSlider .smallImgBox2 {
    display:none;
}

#secProcedureSlider .swiper-scrollbar {}

#secProcedureSlider .swiper-scrollbar {
    height: 3px;
    background-color: #ddd;
}

#secProcedureSlider .swiper-scrollbar .progress {
    width: 0%;
    height: 100%;
    background: #BB2649;
}

/* 전후사진 */
#secBeforeAndAfter {
    background-color: #F8F9FA;
    padding: clamp(75px, 7.81vw, 150px) 0px;
}

#secBeforeAndAfter .baTitle {
    font-size: clamp(22px, 2.5vw, 40px);
    font-weight: 700;
    text-align: center;
    align-items: center;
}

#secBeforeAndAfter .content {
    margin-top: clamp(40px, 4.17vw, 80px);
    gap: 20px;
}

#secBeforeAndAfter .content .item {}

#secBeforeAndAfter .content .item .pic {
    border-radius: 25px;
    gap: 3px;
    overflow: hidden;
}

#secBeforeAndAfter .content .item .pic .txt {
    width: 100%;
    bottom: 0px;
    font-size: 14px;
    text-align: center;
    padding: 6px 10px;
    position: absolute;
    color: #fff;
}

#secBeforeAndAfter .content .item .pic .ll {
    width:50%;
    position: relative;
}

#secBeforeAndAfter .content .item .pic .ll .txt {
    background-color: rgba(0, 0, 0, 0.5);
}

#secBeforeAndAfter .content .item .pic .rr {
    width:50%;
    position: relative;
}

#secBeforeAndAfter .content .item .pic .rr .txt {
    background-color: rgba(187, 38, 73, 0.5);
}

#secBeforeAndAfter .content .item .info {
    padding: 18px 12px;
}

#secBeforeAndAfter .content .item .info .title {
    font-size: 18px;
    font-weight: bold;
    text-align: left;
}

#secBeforeAndAfter .content .item .info .dwdw {
    gap:12px;
}

#secBeforeAndAfter .content .item .info .dwdw .desc {
    font-size: 14px;
    color: #868E96;
    text-align: left;
    margin-top: 4px
}

#secBeforeAndAfter .content .item .info .dwdw .wdate {
    gap: 3px;
}
#secBeforeAndAfter .content .item .info .dwdw .wdate .date {
    font-size: 14px;
    color: #868E96;
    text-align: left;
    margin-top: 4px
}

/* 소통 */
#secCommunity {
    width: 100%;
    padding: clamp(100px, 7.81vw, 150px) 0px 0px;
    background-image: url("/main/img/withTones/secCommunityBg.jpg");
    background-size: cover;
    background-position: center;
    gap: clamp(150px, 10.42vw, 200px);
}

#secCommunity .customer .txt1 {
    font-size: clamp(22px, 2.5vw, 40px);
    font-weight: bold;
    line-height: clamp(30px, 3.38vw, 57px);
}

#secCommunity .customer .txt2 {
    font-size: clamp(16px, 1.04vw, 20px);
    line-height: clamp(28px, 1.77vw, 34px);
    margin-top: clamp(20px, 2.08vw, 40px);
}

#secCommunity .withBgCardsSwiper {
    width: 100%;
    max-width: 1920px;
    overflow: hidden;
}

#secCommunity .withBgCardsSwiper .swiper-slide {
    width: clamp(140px, 18vw, 260px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
    max-height: clamp(400px, 60vw, 600px);
}

#secCommunity .withBgCardsSwiper .swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: block;
}

#secCommunity .withBgCardsSwiper .swiper-slide::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #E0E4E7 100%);
    pointer-events: none;
    border-radius: 0 0 20px 20px;
}

#secCommunity .withBgCardsSwiper .util {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

#secCommunity .withBgCardsSwiper .util .swiper-scrollbar {
    width: clamp(300px, 75%, 1430px);
    height: 3px;
    background-color: #ddd;
    border-radius: 2px;
}

#secCommunity .withBgCardsSwiper .util .swiper-scrollbar .progress {
    width: 0%;
    height: 100%;
    background: #BB2649;
}

/* CCTV */
#secCctv {
    padding: clamp(40px, 8.07vw, 155px) 0px;
}

#secCctv .cctvContent .ll {
    width: calc(100% - 810px);
}

#secCctv .cctvContent .ll .title {
    font-size: clamp(22px, 2.5vw, 40px);
    font-weight: 700;
    line-height: clamp(30px, 3.38vw, 52px);
}

#secCctv .cctvContent .ll .txt {
    color: #212529;
    font-size: clamp(14px, 1.0vw, 20px);
    line-height: clamp(22px, 1.77vw, 34px);
    font-weight: 300;
    margin-top: 40px;
}

#secCctv .cctvContent .rr {
    flex-wrap: wrap;
    width: 810px;
    margin-left: auto;
    gap: 30px;
}

#secCctv .cctvContent .rr .cctvCard1 {
    background-color: #BB2649;
    width: 60%;
    border-radius: 30px;
    padding: 36px;
}

#secCctv .cctvContent .rr .cctvCard1 .txt1 {
    color: #FFF;
    font-size: clamp(16px, 1.4vw, 28px);
    font-weight: 400;
}

#secCctv .cctvContent .rr .cctvCard1 .txt2 {
    color: #FFF;
    font-size: clamp(16px, 1.4vw, 28px);
    font-style: normal;
    font-weight: 700;
    line-height: 36px;
}

#secCctv .cctvContent .rr .cctvCard1 .txt3 {
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    line-height: 24px;
}

#secCctv .cctvContent .rr .cctvBottom {
    gap: 30px;
}

#secCctv .cctvContent .rr .cctvBottom .cctvCard2 {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
}

#secCctv .cctvContent .rr .cctvBottom .cctvCard2 .bg {}

#secCctv .cctvContent .rr .cctvBottom .cctvCard2 img {
    width: 100%;
}

#secCctv .cctvContent .rr .cctvBottom .cctvCard2 .interiorText {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: linear-gradient(0deg, rgba(145, 88, 49, 0.00) 0%, rgba(145, 88, 49, 0.70) 100%);
    height: 50%;
    padding: 24px 20px;
}

#secCctv .cctvContent .rr .cctvBottom .cctvCard2 .interiorText .txt1 {
    color: #FFF;
    font-size: clamp(15px, 1.4vw, 28px);
    font-style: normal;
    font-weight: 700;
    line-height: clamp(22px,1.88vw,36px);
}

#secCctv .cctvContent .rr .cctvBottom .cctvCard2 .interiorText .txt2 {
    color: #FFF;
    font-size: clamp(15px, 1.4vw, 28px);
    font-weight: 400;
}

#secCctv .cctvContent .rr .cctvBottom .cctvCard3 {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
}

#secCctv .cctvContent .rr .cctvBottom .cctvCard3 img {
    width: 100%;
}

#secCctv .cctvContent .rr .ttt { width:100%; }

#secCctv .cctvContent .rr .cctvBottom .cctvCard3 .interiorText {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: linear-gradient(0deg, rgba(145, 88, 49, 0.00) 0%, rgba(145, 88, 49, 0.70) 100%);
    height: 50%;
    padding: 24px 20px;
}

#secCctv .cctvContent .rr .cctvBottom .cctvCard3 .interiorText .txt1 {
    color: #FFF;
    font-size: clamp(15px, 1.4vw, 28px);
    font-style: normal;
    font-weight: 700;
    line-height: clamp(22px,1.88vw,36px);
}

#secCctv .cctvContent .rr .cctvBottom .cctvCard3 .interiorText .txt2 {
    color: #FFF;
    font-size: clamp(15px, 1.4vw, 28px);
    font-weight: 400;
}

#secCctv .cctvContent .rr .cctvImg {
    width: 100%;
    display: flex;
    margin-left:auto;
    justify-content: flex-end;
}


#secCctv .cctvContent .rr .cctvImg img {
    width: 130px;
}

/* 투명성 */
#secTransparency {
    margin-top: 40px;
}

#secTransparency .title {
    font-size: clamp(22px, 2.5vw, 40px);
    font-weight: 700;
    line-height: clamp(30px, 3.38vw, 52px);
}

#secTransparency .priceOpen {
    gap: 2%;
    flex-wrap: nowrap;
    margin: clamp(40px, 4.9vw, 94px) 0px clamp(75px, 7.81vw, 150px);
}

#secTransparency .priceOpen .bx {
    width: 32%;
    padding: 35px;
    background: #F4F6F7;
    border-radius: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#secTransparency .priceOpen .bx .ll {
    text-align: left;
    font-size: clamp(16px, 1.46vw, 28px);
    font-weight: 400;
    line-height: clamp(25px, 2.5vw, 36px);
}

#secTransparency .priceOpen .bx .icon {
    margin-top: 65px;
    text-align: right;
    font-size: 52px;
    color: #ADB5BD;
}

#secTransparency .priceOpen .bx .icon img {
    display: block;
}

/* 톤즈이야기 */
#secBrandStory {
    padding: clamp(77px, 8.04vw, 154px) 0px;
    background: url("/main/img/withTones/brandStroyBg.png") no-repeat;
}

#secBrandStory .title {
    font-size: clamp(22px, 2.18vw, 40px);
}

#secBrandStory .title .span {
    color: #BB2649;
}

#secBrandStory .content {
    font-size: clamp(14px, 1.04vw, 20px);
    text-align: center;
    line-height: clamp(22px, 2.3vw, 34px);
    color: #212529;
    margin-top: 30px;
}

#secBrandStory .brandSwiper {}

#secBrandStory .brandSwiper .swiper-slide {
    margin-top: 50px;
}

#secBrandStory .brandSwiper .swiper-slide .img {
    border-radius: 30px;
    overflow: hidden;
    padding-top: 30px;
}

#secBrandStory .brandSwiper .swiper-slide.swiper-slide-active .img {
    padding-top: 0px;
}

#secBrandStory .brandSwiper .swiper-slide .img img {
    display: block;
}

#secBrandStory .brandSwiper .swiper-wrapper {}

#secBrandStory .brandSwiper .swiper-slide {
    z-index: 1;
}

#secBrandStory .brandSwiper .swiper-slide .brandInfo {
    margin-top: 8px;
    padding-bottom: 20px;
}

#secBrandStory .brandSwiper .swiper-slide .brandInfo .date {
    font-size: clamp(12px, 1.04vw, 20px);
    font-weight: 700;
    color: #212529;
}

#secBrandStory .brandSwiper .swiper-slide .brandInfo .name {
    font-size: clamp(12px, 1.04vw, 20px);
}

#secBrandStory .brandSwiper .swiper-slide .brandInfo .name .bar{
    color:#ADB5BD;padding:0 4px;
}

#secBrandStory .brandStarSwiper .swiper-slide .star {
    position: relative;
    height: 24px;
}

#secBrandStory .brandStarSwiper .swiper-slide svg {
    z-index: 9999;
    position: absolute;
}

#secBrandStory .brandStarSwiper .swiper-slide .bgbg {
    z-index: 2;
    position: absolute;
    top: 7px;
    width: 100%;
    height: 1px;
    background-color: #ADB5BD;
}

/* 세미나 */
#seminarSection .content {
    position: relative;
}

#seminarSection .content .img img {
    width: 100%;
    height: auto;
}

#seminarSection .content .info {
    padding: 50px;
    position: absolute;
    top: clamp(20px, 5.5vw, 80px);
    left: clamp(20px, 17.7vw, 256px);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.08vw, 40px);
    background: rgba(255, 255, 255, 0.80);
    border-radius: 30px;
    box-sizing: border-box;
    width: 780px;
}

#seminarSection .content .info .title {
    font-size: clamp(22px, 2.5vw, 40px);
    line-height: clamp(30px, 3.38vw, 52px);
}

#seminarSection .content .info .txt {
    font-size: clamp(16px, 2.5vw, 20px);
    line-height: clamp(22px, 2.3vw, 34px);
}

/* 워크샵 */
#secWorkshop {
    position: relative;
    margin-bottom: 100px;
}

#secWorkshop .wsBox {
    width: 100%;
    flex-wrap: wrap;
    margin-top: -50px;
    padding: clamp(25px, 2.06vw, 50px) clamp(50px, 5.20vw, 100px);
    border-radius: clamp(16px, 1.5vw, 30px);
    background-color: #fff;
}

#secWorkshop .wsBox .step {
    width: 25%;
}

#secWorkshop .wsBox .step .number {
    font-size: clamp(24px, 2.5vw, 48px);
}

#secWorkshop .wsBox .step .txt {
    font-size: clamp(12px, 0.93vw, 18px);
    color: #495057;
}

#secWorkshop .wsImgContent {
    flex-wrap: wrap;
    gap: 20px;
}

#secWorkshop .wsImgContent .img {
    margin-top: 60px;
    width: calc(50% - 20px);
    position: relative;
}

#secWorkshop .wsImgContent .img .txt {
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding: clamp(20px, 2.08vw, 40px);
    color: #fff;
}

#secWorkshop .wsImgContent .img .txt .t1 {
    font-size: clamp(14px, 0.94vw, 18px);
}

#secWorkshop .wsImgContent .img .txt .t2 {
    font-size: clamp(18px, 1.46vw, 28px);
}

/* 직원미소 */
#secEmployeePhoto {
    background-color: #F8F9FA;
    padding: clamp(40px, 6.25vw, 120px) 0px;
}

#secEmployeePhoto .content {
    gap: clamp(24px, 4.17vw, 80px);
}

#secEmployeePhoto .content .img img {
    border-radius: 30px;
}

#secEmployeePhoto .content .employee .txt1 {
    font-size: clamp(22px, 2.5vw, 40px);
    font-weight: bold;
    line-height: clamp(30px, 3.38vw, 52px);
}

#secEmployeePhoto .content .employee .txt2 {
    font-size: clamp(16px, 1.15vw, 22px);
    line-height: clamp(22px, 2.3vw, 34px);
    margin-top: 20px;
}

/* 장비투자 */
#secEquipment {
    margin: 80px 0px 50px;
}

#secEquipment .bbox {
    background-color: #F8F9FA;
    border-radius: 30px;
    padding: 60px;
}

#secEquipment .bbox .title {
    font-size: clamp(22px, 2.18vw, 40px);
    line-height: clamp(30px, 3.38vw, 52px);
}

#secEquipment .bbox .txt2 {
    font-size: clamp(16px, 1.04vw, 20px);
    line-height: clamp(22px, 1.77vw, 34px);
    margin-top: clamp(20px, 2.08vw, 40px);
}

#secEquipment .bbox .pc .equipmentImg {
    display: flex;
    padding: 0px 70px;
    background: #FFF;
    gap: 40px;
    border-radius: 30px;
    margin-top: clamp(20px, 2.08vw, 40px);
}

#secEquipment .bbox .pc .equipmentImg img {}

#secEquipment .bbox .equipmentImgMobSwiper.mob {
    padding: 40px 0px;
    overflow: hidden;
}

#secEquipment .bbox .equipmentImgMobSwiper.mob .swiper-slide {
    padding: 0px 20px;
}

/* 사라지진 않을까? */
#secDisappear .ii {
    gap: 40px;
    flex-direction: row-reverse;
    background: #F8F9FA;
    padding: clamp(30px, 3.13vw, 60px);
    border-radius: 30px;
}

#secDisappear .ii .info {
    gap: clamp(20px, 1.67vw, 32px);
}

#secDisappear .ii .info .title {
    font-size: clamp(22px, 2.5vw, 40px);
    font-weight: bold;
    line-height: clamp(30px, 3.38vw, 57px);
}

#secDisappear .ii .info .txt {
    font-size: clamp(16px, 1.04vw, 20px);
    font-weight: 300;
    line-height: clamp(22px, 1.77vw, 34px);
}

/* 리뷰 */
#secReview {
    padding: clamp(80px, 10.63vw, 204px) 0px;
}

#secReview .topInfo .title {
    font-size: clamp(22px, 2.18vw, 40px);
    line-height: clamp(30px, 3.38vw, 57px);
}

#secReview .topInfo .txt {
    color: #343A40;
    ;
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: clamp(22px, 1.77vw, 34px);
    margin-top: 20px;
}

#secReview .reviewSwiperWrapper {
    margin-top: clamp(60px, 6.25vw, 120px);
    width: 100%;
    overflow: hidden;
}

#secReview .reviewSwiperWrapper .icon {
    color: #CCCCCC;
    transform: rotate(180deg);
}

#secReview .reviewSwiperWrapper .reviewCard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    padding: 30px 0px;
    background: transparent;
    border-radius: 0;
    box-sizing: border-box;
}

#secReview .reviewSwiperWrapper .reviewText {
    font-size: 16px;
    line-height: 24px;
    color: #212529;
    margin-bottom: 20px;
    text-align: left;
}

#secReview .reviewSwiperWrapper .reviewInfo {
    color: #212529;
    font-size: 14px;
    color: #666;
    text-align: left;
}

/* 실시간 인기검색어 */
#secHitSearch {
    background: url("/main/img/withTones/secHitSearchBg.png") no-repeat;
    padding: clamp(100px, 11.72vw, 225px) 0px;
}

#secHitSearch .info {
    justify-content: flex-end;
}

#secHitSearch .info .rank {
    width: 50%;
}

#secHitSearch .info .rank .title {
    font-size: clamp(22px, 2.18vw, 40px);
}

#secHitSearch .info .rank .list {
    width: 100%;
    margin-top: 42px;
    gap: 10px;
}

#secHitSearch .info .rank .list .ll {
    width: calc(50% - 5px);
}

#secHitSearch .info .rank .list .ll .ii {
    height: 62px;
    padding: 15px 28px;
    background-color: #F8F9FA;
    border-radius: 15px;
    margin-bottom: 10px;
}

#secHitSearch .info .rank .list .ll .ii .txt {
    font-size: 24px;
}

#secHitSearch .info .rank .list .ll .ii .txt div:nth-child(1) {
    width: 40px;
    text-align: center;
    color: #BB2649;
    font-weight: bold;
}

#secHitSearch .info .rank .list .ll .ii .icon {
    margin-left: auto;
}

#secHitSearch .info .rank .list .ll .ii .icon div {
    font-size: 13px;
    padding: 4px 6px;
    background-color: #BB2649;
    color: #fff;
    border-radius: 5px;
    line-height: 14px;
}

#secHitSearch .info .rank .list .rr {
    width: calc(50% - 5px);
}

#secHitSearch .info .rank .list .rr .ii {
    height: 62px;
    padding: 15px 28px;
    background-color: #F8F9FA;
    border-radius: 15px;
    margin-bottom: 10px;
}

#secHitSearch .info .rank .list .rr .ii .txt {
    font-size: 24px;
}

#secHitSearch .info .rank .list .rr .ii .txt div:nth-child(1) {
    width: 40px;
    text-align: center;
    color: #BB2649;
    font-weight: bold;
}

#secHitSearch .info .rank .list .rr .ii .icon {
    margin-left: auto;
}

#secHitSearch .info .rank .list .rr .ii .icon div {
    font-size: 13px;
    padding: 4px 6px;
    background-color: #BB2649;
    color: #fff;
    border-radius: 5px;
    line-height: 14px;
}

/* 실시간 인기검색어 */
#secPromise {
    background: url("/main/img/withTones/promise.png") no-repeat;
}

#secPromise .info {
    padding: 220px 130px;
    width: 45%;
    opacity: 0.9;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, #FFF 62.02%);
}

#secPromise .info .title {
    font-size: clamp(22px, 2.18vw, 40px);
    line-height: clamp(30px, 3.38vw, 57px);
    margin-bottom: clamp(12px, 1.04vw, 20px);
}

#secPromise .info .txt {
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: clamp(22px, 1.77vw, 34px);
}

#secPromise .info .txt2 {
    gap:10px;
    margin-top:25px;
}

#secPromise .info .txt2 img{
    width:20%;
}

/*flex*/
.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.inlineBlock {
    display: inline-block;
}

.imgBg {
    background: linear-gradient(0deg, #EBBEC8 0%, rgba(255, 255, 255, 0.00) 100%)
}












.topTextArea {
    margin-top: clamp(80px, 12vw, 150px);
}

.topTextArea1 {
    margin-top: clamp(32px, 6vw, 60px);
}

.topTextArea2 {
    margin-top: clamp(20px, 6vw, 40px);
}

.topTextArea4 {
    margin-top: clamp(20px, 6vw, 40px);
}

.topTextArea6 {
    margin-top: clamp(40px, 12vw, 80px);
}

.topTextArea7 {
    margin-top: clamp(40px, 8vw, 112px);
}

.topTextArea8 {
    margin-top: clamp(120px, 24vw, 471px);
}

.topTextArea9 {
    padding-top: 65px;
}

.topTextArea10 {
    margin-top: 15px;
}





/*  슬라이드 한 개가 화면 전체 너비 차지하도록 */
#procedureSlider .swiper-slide {
    width: 100%;
    box-sizing: border-box;
}

#procedureSlider .swiper-wrapper {
    display: flex;
    align-items: center;
}

/*  slideSet을 세로 배치 */
#procedureSlider .slideSet {
    display: block;
    gap: 0;
    padding: 0;
}

#procedureSlider .bigImgBox,
#procedureSlider .smallImgBox {
    width: 100%;
    max-width: 100%;
    flex: none;
}

/* 이미지 높이도 모바일에 맞춰 자동 반응형 */
#procedureSlider .bigImgBox img,
#procedureSlider .smallImgBox img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

#procedureSlider .fixedContainer {
    max-width: 1410px;
    width: 100%;
    margin: 0 auto;
    /* 가운데 정렬 */
    padding: 0 20px;
    /* 모바일 여백 */
}

#procedureSlider .mainPhrase {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

#procedureSlider .mainPhrase span {
    display: inline-block;
}

#procedureSlider .mainPhrase.textGap {
    gap: 60px;
    margin-bottom: 60px;
}
}








/*
#seminarPhotoSection .v2Container .img {width:100%; height:auto;}
#seminarPhotoSection .v2Container .img img {width:100%; height:auto;}
*/

#ourDoctorsSection .v2Container {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

#ourDoctorsSection .withBgCardsWrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0;
    overflow: hidden;
    margin: 70px 0;
}

#ourDoctorsSection .mySwiper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

#ourDoctorsSection .tonesHead9 {
    font-size: clamp(22px, 2.19vw, 40px);
    margin: clamp(32px, 6vw, 50px) 0px;
}

#ourDoctorsSection .colorTonesPrimary{
    font-weight: 700;
}

#ourDoctorsSection .topTextArea1 .doctorInfo{
    padding: clamp(25px, 3vw, 35px);
}

#ourDoctorsSection .topTextArea1 .tonesBody6C{
    font-size: clamp(18px, 1.25vw, 24px);
    font-weight: 700;
    margin-top:4px;
}

#ourDoctorsSection .swiper-slide {
    display: flex;
    width: clamp(280px, 25vw, 330px);
    height: clamp(400px, 45vw, 500px);
    gap: 1px;
    border-radius: 30px;
    background: #F8F9FA;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

#ourDoctorsSection .swiper-slide .doctorInfo {
    align-self: flex-start;
}

/*수정*/
#ourDoctorsSection .swiper-slide img {
    width: clamp(180px, 20vw, 230px);
    height: auto;
    aspect-ratio: 230/317;
    object-fit: cover;
    border-radius: 10px;
    align-self: flex-end;
    margin-top: auto;
}

#ourDoctorsSection .swiper-scrollbar {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(300px, 75%, 1300px);
    height: 3px;
    background-color: #ddd;
    border-radius: 2px;
}

#ourDoctorsSection .swiper-scrollbar .progress {
    height: 100%;
    width: 0;
    background-color: #BB2649;
    border-radius: 2px;
}

.withBgCardsWrapper {
    width: 100%;
    margin-top: auto;
    display: flex;
    justify-content: center;
}

#secHelloTones {
    padding: 40px 0px;
}

#secHelloTones>.v2Container>.content {
    gap: clamp(20px, 1.5vw, 30px);
}

#secHelloTones>.v2Container>.content>.title {
    font-size: clamp(22px, 2.2vw, 40px);
    line-height: -2px;
}

#secHelloTones>.v2Container>.content>.branchList {flex-wrap:wrap;gap:10px; }
#secHelloTones>.v2Container>.content>.branchList .branch{padding:12px 16px;gap:10px;border-radius:10px;background:#F8F9FA;color:#495057;font-size:clamp(14px,1.25vw,18px);font-weight:500;}
#secHelloTones>.v2Container>.content>.branchList .branch.active{color:#fff;background:#BB2649;}

#secHelloTones>.v2Container>.content>.helloMap {
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 30px;
    background-color: #f0f0f0;
}

#secHelloTones>.v2Container>.content>.location {
    background-color: #F8F9FA;
    border-radius: 30px;
    padding: clamp(20px, 2vw, 40px) 0px;
}

#secHelloTones>.v2Container>.content>.location .item {
    width: 100%;
    padding: 0px 44px;
    gap: clamp(20px, 1.45vw, 28px);
    background-color: #F8F9FA;
}

#secHelloTones>.v2Container>.content>.location .item2 {
    border-right: 1px solid #E1E1E1;
    border-left: 1px solid #E1E1E1;
}

#secHelloTones>.v2Container>.content>.location .timeArea {
    gap: 8px;
}

#secHelloTones>.v2Container>.content>.location .item .t1 {
    color: #212529;
    font-size: clamp(18px, 1.25vw, 24px);
    font-weight: 700;
}

#secHelloTones>.v2Container>.content>.location .item1 .t2 {
    font-size: clamp(20px, 1.45vw, 28px);
    color: #212529;
    letter-spacing: -0.56px;
}

#secHelloTones>.v2Container>.content>.location .item1 .t3 {
    font-size: 20px;
    color: #495057;
    letter-spacing: -0.4px;
}

#secHelloTones>.v2Container>.content>.location .bgbg {
    gap: 1px;
}

#secHelloTones>.v2Container>.content>.location .item2 .timeFlex {
    width: 100%;
}

#secHelloTones>.v2Container>.content>.location .item2 .type {
    color: #495057;
    font-size: clamp(16px, 1.04vw, 20px);
    letter-spacing: -0.4px;
}

#secHelloTones>.v2Container>.content>.location .item2 .time {
    color: #212529;
    font-size: clamp(16px, 1.04vw, 20px);
    letter-spacing: -0.4px;
    margin-left: auto;
}

#secHelloTones>.v2Container>.content>.location .item2 .etc {
    color: #495057;
    font-size: clamp(12px, 0.83vw, 16px);
    letter-spacing: -0.4px;
    padding: 12px;
    background-color: #fff;
    border-radius: 8px;
}

#secHelloTones>.v2Container>.content>.location .item3 .t2 {
    font-size: clamp(26px, 1.97vw, 38px);
    font-weight: 700;
    color: #BB2649;
}

#secHelloTones>.v2Container>.content>.locationAd {
    gap: 30px;
    margin-bottom:100px;
}

#secHelloTones>.v2Container>.content>.locationAd .ad1 {
    padding: 0px 40px;
    border-radius: 30px;
    background: linear-gradient(96deg, #F8E9ED -2.11%, #EBBEC8 100%);
    width: 100%;
}

#secHelloTones>.v2Container>.content>.locationAd .ad1 .txt {
    padding: clamp(24px, 1.25vw, 40px) 0px;
    font-size: clamp(18px, 1.25vw, 24px);
    color: #212529;
    letter-spacing: -0.48px;
    line-height: clamp(24px, 1.77vw, 32px);
}

#secHelloTones>.v2Container>.content>.locationAd .ad1 .adImg {
    margin-left: auto;
}

#secHelloTones>.v2Container>.content>.locationAd .ad1 a {
    color: #212529;
}

#secHelloTones>.v2Container>.content>.locationAd .ad1 a i {
    font-size: 20px;
}

#secHelloTones>.v2Container>.content>.locationAd .ad2 {
    padding: 0px 40px;
    border-radius: 30px;
    background: linear-gradient(95deg, #F0F2E8 0.51%, #C4CCA5 98.95%);
    width: 100%;
}

#secHelloTones>.v2Container>.content>.locationAd .ad2 .txt {
    padding: clamp(24px, 1.25vw, 40px) 0px;
    font-size: clamp(18px, 1.25vw, 24px);
    color: #646934;
    letter-spacing: -0.48px;
    line-height: clamp(24px, 1.77vw, 32px);
}

#secHelloTones>.v2Container>.content>.locationAd .ad2 a {
    color: #212529;
}

#secHelloTones>.v2Container>.content>.locationAd .ad2 a i {
    font-size: 20px;
}

#secHelloTones>.v2Container>.content>.locationAd .ad2 .adImg {
    margin-left: auto;
}

#secSideBar { position:fixed; right:20px; top:200px; z-index:9999; display: flex; flex-direction: column; align-items: center; }
#secSideBar .content { background-color:rgba(187, 38, 73, 0.7); height:400px; display:flex; flex-direction:column; align-items:center; border-radius:12px; }
/* secSideBar 로고에 깜빡이는 애니메이션 적용 */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

#secSideBar > .img {
    display: flex;
    justify-content:center;
    align-items:center;
    width:100px;
    height:400px;
    margin-bottom:12px;
}
#secSideBar .content .bx { border-bottom: 1px solid rgba(222, 226, 230, 0.3); width:100px; height:80px; display:flex; flex-direction:column; justify-content:center; align-items:center;}
#secSideBar .content .bx .img { width: 30px; height: 30px;  }
#secSideBar .content .mg { color: #FFF; text-align: center; font-size: 15px; font-weight: 500; line-height: 15px; margin-top: 7px; }


#secSideBar .content .bx:nth-child(4) .img {
    animation: bounce 2.5s ease-in-out infinite;
}

@media (max-width:767px) {

    /* 당신의 얼굴을 맡긴다는 건 */
    #instagramSection .progressArea .swiper-scrollbar {
        width: 100%;
    }

    #instagramSection .progressArea {
        margin-top: 8px;
    }

    /*메인 배너*/
    #secMainBanner { margin-top:70px; }
    #secMainBanner .mainBannerSwiper.pc {display: none;}
    #secMainBanner .mainBannerSwiper.mob {display: block;}

    #secMainBanner .mainBannerSwiper {
        padding:40px;
    }

    /*#secMainBanner .contArea {width:100%;top:72%;left:66%}*/
    #secMainBanner .contArea {
        top: 70%;
        width: 85%;
    }
    #secMainBanner .cont {width:100%;background: none;backdrop-filter: none;padding:0;gap:20px;}
    #secMainBanner .cont .txtArea {gap:8px;}
    #secMainBanner .cont .txt1 {color:#fff;line-height:30px; letter-spacing:-0.48px;}
    #secMainBanner .cont .txt2 {color:#fff;line-height:22px; letter-spacing:-0.48px;}
    #secMainBanner .cont .reservation {padding:13px 15px;}

    #secMainBanner .progressArea {width:80%;left:10%;}
    #secMainBanner .progressArea .caretVar {display:none;}

    /* 기부 */
    #secHonorSociety #honorSocietySwiper .util .swiper-scrollbar {
        width: 100%;
    }

    #secTreatmentList .list {
        gap: 4%;
        margin-left: 4%;
    }

    #secTreatmentList .list .item {
        width: 46%;
    }

    #secTreatmentList .list .item .img {
        border-radius: 16px;
    }

    #secTreatmentList .list .item .info .desc {
        gap: 4px;
        margin-bottom: 4vw;
    }

    #secTreatmentList .list .item .info .desc .prdDesc {
        width: 100%;
    }

    #secTreatmentList .list .item .info .desc .prdPersent {
        width: 100%;
    }

    /* 원장님이 알려주는 BEST */
    #secProcedureSlider .mySwiper .swiper-slide.slideSet {
        flex-wrap: wrap;
    }

    #secProcedureSlider .mySwiper .swiper-slide .bigImgBox {
        width: 100%;
    }

    #secProcedureSlider .mySwiper .slideSet .bigImgBox .descBox {
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        display: flex;
        padding: 0px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        color:#fff;
        background: none;
        justify-content:space-between;
    }

    #secProcedureSlider .mySwiper .slideSet .bigImgBox .descBox .summary{
        padding:25px;
        border-radius: 30px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.00) 100%);
    }

    #secProcedureSlider .mySwiper .slideSet .bigImgBox .descBox>.divFlex{
        gap:10px;
        align-items:end;
    }

    #secProcedureSlider .mySwiper .slideSet .bigImgBox .descBox .hashTags{
        margin-left:0;
    }

    #secProcedureSlider .mySwiper .slideSet .bigImgBox .descBox .hashTags span {
        padding:3px 6px;
        border-radius:8px;
        color:#000;
    }

    #secProcedureSlider .mySwiper .slideSet .bigImgBox .descBox .info {
        width: auto;
    }

    #secProcedureSlider .smallImgBox{
        display:none;
    }

    #secProcedureSlider .smallImgBox2{
        display:flex;
        padding:0px 25px;
        border-radius: 30px;
        background: linear-gradient(180deg, rgba(248, 249, 250, 0.00) 0%, rgba(0, 0, 0, 0.70) 100%);
    }

    #secProcedureSlider .mySwiper .slideSet .bigImgBox .smallImgBox2 img{
        width:143px;
        height:219px;
    }

    #secProcedureSlider .mySwiper .slideSet .bigImgBox .smallImgBox2 .txt4{
        margin-bottom:20px;
        line-height:20px;
    }

    /* CCTV */
    #secCctv .cctvContent {
        flex-wrap: wrap;
        gap: 30px;
    }

    #secCctv .cctvContent .ll {
        width: 100%;
    }

    #secCctv .cctvContent .ll .cctvTitle {
        text-align: center
    }

    #secCctv .cctvContent .rr { gap:2vw; }


    #secCctv .cctvContent .rr .cctvCard2 .interiorText {
        width: 100%;
    }

    #secCctv .cctvContent .rr .cctvCard1 {
        background-color: #BB2649;
        width: 100%;
        border-radius: 30px;
        padding: 24px 24px 36px 24px;
    }

    #secCctv .cctvContent .rr .cctvCard1 .txt3 {
        font-size:14px;
    }

    #secCctv .cctvContent .rr .ttt { width:calc(100% - 100px); }

    #secCctv .cctvContent .rr .cctvImg { width:100px; align-items: flex-end; }
    #secCctv .cctvContent .rr .cctvImg img {
        width: 70px;
        height:52px;
    }

    #secCctv .cctvContent .rr .cctvBottom {
        flex-wrap: wrap;
        gap: 2%;
    }

    #secCctv .cctvContent .rr .cctvBottom .cctvCard2 {
        width: 49%;
    }

    #secCctv .cctvContent .rr .cctvBottom .cctvCard2 img {
        width: 100%;
    }

    #secCctv .cctvContent .rr .cctvBottom .cctvCard3 {
        width: 49%;
    }

    #secCctv .cctvContent .rr .cctvBottom .cctvCard3 img {
        width: 100%
    }

    /* 투명성 */
    #secTransparency .priceOpen {
        flex-wrap: wrap;
    }

    #secTransparency .priceOpen {
        display: flex;
        justify-content: flex-wrap:nowrap;
    }

    #secTransparency .priceOpen .bx {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 30px;
    }

    #secTransparency .priceOpen .bx .ll {
        width: calc(100% - 50px);
    }

    #secTransparency .priceOpen .bx .icon {
        width: 50px;
        margin-top: 2px;
    }

    #secTransparency .v2Container .priceOpen .bx .caretVar {
        font-size: 44px;
        color: rgba(173, 181, 189, 1);
    }

    /* 브랜드스토리 */
    #secBrandStory .brandSwiper .swiper-slide .img {
        padding-top: 20px;
    }

    #secBrandStory .brandSwiper .swiper-slide.swiper-slide-active .img {
        padding-top: 0px;
    }

    /* 워크샵 */
    #secWorkshop .wsBox {}

    #secWorkshop .wsBox .step {
        width: 50%;
        margin-bottom: 2vw;
    }

    #secWorkshop .wsImgContent .img {
        margin-top: 4vw;
        width: calc(50% - 2vw);
    }

    #secWorkshop .wsImgContent {
        flex-wrap: wrap;
        gap: 4vw;
        margin-bottom: 40px;
    }

    /* 세미나 */
    #seminarSection .content {
        position: static;
    }

    #seminarSection .content .img {
        padding: 0 2%;
        overflow: hidden;
    }

    #seminarSection .content .img img {
        border-radius: 30px;
    }

    #seminarSection .content .info {
        position: static;
        margin-top: 24px;
        margin-bottom: 48px;
    }

    /* 장비 */
    #secEquipment .v2Container .title {
        padding-top: 40px;
    }

    #secEquipment .equipmentImg {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    #secEquipment .equipmentImg img {
        width: 60%;
    }

    /* 사라지지않을까? */
    #secDisappear .v2Container {
        padding: 0 !important;
    }

    #secDisappear .ii {
        flex-wrap: wrap;
    }

    #secDisappear .ii .img {
        width: 100%;
        flex-direction: row;
    }

    #secHitSearch {
        background-position: 40%;
    }

    #secHitSearch .info {
        justify-content: flex-start;
    }

    #secHitSearch .info .rank {
        width: 100%;
    }

    #secHitSearch .info .rank .list {
        flex-wrap: wrap;
        gap: 0px;
    }

    #secHitSearch .info .rank .list .ll {
        width: 100%;
    }

    #secHitSearch .info .rank .list .ll .ii {
        padding: 15px;
    }

    #secHitSearch .info .rank .list .rr {
        width: 100%;
    }

    #secHitSearch .info .rank .list .rr .ii {
        padding: 15px;
    }

    #secPromise {
        background-size: cover;
        background-position: 40%;
    }

    #secPromise .info {
        width: 100%;
        padding: 110px 2% 56px 2%;
    }


    #secHelloTones>.v2Container>.content>.location .bgbg {
        flex-wrap: wrap;
    }

    #secHelloTones>.v2Container>.content>.location .item {
        padding: 20px 20px;
    }

    #secHelloTones>.v2Container>.content>.location .item2 {
        border-top: 1px solid #E1E1E1;
        border-bottom: 1px solid #E1E1E1;
        border-right: none;
        border-left: none;
    }

    #secHelloTones>.v2Container>.content>.locationAd {
        flex-wrap: wrap;
    }

    #secHelloTones>.v2Container>.content>.locationAd .ad1 {
        flex-wrap: wrap;
    }

    #secHelloTones>.v2Container>.content>.locationAd .ad1 .txt {
        width: 100%;
        gap: 10px;
    }

    #secHelloTones>.v2Container>.content>.locationAd .ad2 {
        flex-wrap: wrap;
    }

    #secHelloTones>.v2Container>.content>.locationAd .ad2 .txt {
        width: 100%;
        gap: 10px;
    }

    #instagramSection .caretVar {
        display: none;
    }

    #instagramSection .swiper-scrollbar {
        width: 100%;
    }

    #honorSocietySwiper .caretVar {
        display: none;
    }

    #honorSocietySwiper .swiper-scrollbar {
        width: 100%;
    }

    /* secBrandString 모바일 스타일 */
    #secBrandString {
        height: auto;
    }

    #secBrandString .text_box1 {
        position: relative;
        height: auto;
        padding: 4vh 0 10vh;
    }

    #secBrandString .text_box1 p {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 0 auto 80px;
        width: 100%;
        opacity: 0;
        transition: opacity 0.8s ease-in-out;
    }

    #secBrandString .text_box1 p:last-child {
        margin-bottom: 0;
    }

    #secBrandString .text_box1 p.visible {
        opacity: 1;
        transform: none;
    }

    #secBrandString .text_box1 p.fade-out {
        opacity: 0;
        transform: none;
    }

    /* secCommunity 이미지 아이폰 대응 */
    #secCommunity .withBgCardsSwiper .swiper-slide {
        flex-shrink: 0;
    }

    #secCommunity .withBgCardsSwiper .swiper-slide img {
        aspect-ratio: 16/9;
        object-fit: contain;
        flex-shrink: 0;
    }

    #procedureSlider .mySwiper .bigImgBox .descBox .info {
        width: calc(100%);
    }

    #procedureSlider .bigImgBox .descBox .hashTags span {
        padding: 6px 8px;
        margin-top: 16px;
    }

    #procedureSlider .bigImgBox .descBox {
        left: 50%;
        top: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
    }

    #procedureSlider .v2Container {
        text-align: center;
    }

    #secBeforeAndAfter .content {
        flex-wrap: wrap;
    }

    #secBeforeAndAfter .content .item .pic .ll img {
        margin-top:-20px;
        margin-bottom:-20px;
    }

    #secBeforeAndAfter .content .item .pic .rr img {
        margin-top:-20px;
        margin-bottom:-20px;
    }


    #procedureSection .contents .img .txt1 {
        text-align: center;
    }

    #procedureSection .contents .img .txt2 {
        text-align: center;
    }

    #procedureSection .contents .img .txt3,
    #procedureSection .contents .img .tonseBody6 {
        text-align: center;
    }

    #secEmployeePhoto .v2Container .img {
        width: 100%;
        border-radius: 30px;
        flex-shrink: 0;
        margin-top: 36px
    }

    #secEmployeePhoto .v2Container {
        display: flex;
        flex-direction: column;
    }

    #secReview .swiper-slide {
        width: auto;
        height: auto;
    }

    #secReview .reviewCard {
        width: 100%;
        height: auto;
        padding: 20px;
    }

    #secReview .reviewText {
        font-size: 14px;
        line-height: 20px;
        word-break: keep-all;
    }


    #secPromise .img {
        position: relative !important;
        width: 100%;
        height: 800px;
        background-position: left center;
        background-image: url("/main/img/withTones/promise.png");
    }

    #secPromise .img img {
        display: none;
    }

    #secPromise .img .txt2 {
        position: absolute;
        font-size: 12px;
        left: 0px;
        top: 130px;
    }

    #secPromise .img .txt1 {
        font-size: clamp(24px, 2.5vw, 48px);
        font-weight: bold;
        line-height: 65px;
        position: absolute;
        left: 0px;
        top: 0px;
    }




    #secHelloTones>.v2Container>.content>.title {
        font-size: clamp(22px, 2.2vw, 48px);
        line-height: -2px;
        text-align: center
    }

    #secSideBar {
        display: none;
    }

    #secPromise {
        background: none;
    }

    #secHelloTones>.v2Container>.content>.branchList .branch{padding:10px 14px;gap:10px;border-radius:10px;background:#F8F9FA;color:#495057;font-weight:500;}
    #secHelloTones>.v2Container>.content>.helloMap { height:300px; }

}

.custom-marker {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -80%);
    pointer-events: auto;
}

.marker-icon {
    width: 40px;
    height: 65px;
}