@charset "utf-8";

section.section {
    padding: 80px 0;
}

section.section.pt-0 {
    padding: 140px 0;
}


.mx-1920 {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
}

@media all and (max-width:1024px) {
    br.pc_only {
        display: none;
    }

    section.section {
        padding: 60px 0;
    }
}


/*기본 폰트사이즈와 패딩 마진 변수 선언*/

:root {
    /* ===== FONT SIZE ===== */
    --fs-2xs: clamp(10px, 0.52vw, 12px);
    --fs-xs: clamp(12px, 0.63vw, 14px);
    --fs-sm: clamp(14px, 0.73vw, 16px);
    --fs-base: clamp(16px, 0.83vw, 18px);
    --fs-md: clamp(18px, 0.94vw, 20px);
    --fs-lg: clamp(20px, 1.04vw, 24px);
    --fs-xl: clamp(24px, 1.25vw, 28px);
    --fs-xl2: clamp(28px, 1.46vw, 32px);
    --fs-2xl: clamp(30px, 1.67vw, 36px);
    --fs-3xl_2: clamp(32px, 1.80vw, 40px);
    --fs-3xl: clamp(34px, 1.88vw, 42px);
    --fs-4xl: clamp(42px, 2.50vw, 56px);

    --lh-tight: 1.2;
    --lh-normal: 1.45;
    --lh-loose: 1.7;
    --ls-tight: -0.015em;
    --ls-normal: 0em;
    --ls-wide: 0.02em;

    /* ===== SPACING / PADDING / MARGIN ===== */
    --sp-2xs: clamp(4px, 0.4vw, 8px);
    --sp-xs: clamp(8px, 0.6vw, 12px);
    --sp-sm: clamp(12px, 0.9vw, 16px);
    --sp-md_2: clamp(16px, 1.3vw, 20px);
    --sp-md: clamp(16px, 1.3vw, 24px);
    --sp-lg_2: clamp(24px, 2vw, 32px);
    --sp-lg: clamp(24px, 2vw, 40px);
    --sp-xl: clamp(40px, 3vw, 64px);
    --sp-2xl: clamp(64px, 5vw, 100px);
    --sp-3xl: clamp(80px, 6vw, 120px);
    --sp-4xl: clamp(100px, 7.5vw, 144px);
    /* 🔹 최대 144px */

}

main.content {
    margin-top: 80px;
}

.main main.content {
    margin-top: 0;
}

.main_com_tit.text-center {
    text-align: center;
}

.main_com_tit.white .main_tit,
.main_com_tit.white .main_sub {
    color: #fff;
}

.main_com_tit .main_tit {
    color: var(--GREY-900, #222);
    text-align: center;
    font-family: Helvetica;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    /* 48px */
    letter-spacing: -0.48px;
}

.main_com_tit .main_tit.color {
    color: #333;
}

.main_com_tit .main_sub {
    color: var(--GREY-600, #5B5B5B);

    /* Body 1/Regular - 18 */
    font-family: var(--Family-KO, Pretendard);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 27px */
    letter-spacing: 0.09px;
}


.main_com_tit .sm_txt {
    color: #222;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Nanum Myeongjo', serif;
}

.main_com_tit .line {
    width: 50px;
    height: 0.5px;
    background-color: rgba(0, 0, 0, 0.60);
    ;
    margin: 30px 0;
}

.main_com_tit .main_tit .top_point {
    display: inline-block;
    position: relative;
    padding-top: 13px;
    color: #F8EEE2;
}

.main_com_tit .main_tit .top_point:before {
    width: 4px;
    height: 4px;
    background-color: #F8EEE2;
    position: absolute;
    left: 50%;
    top: 3px;
    transform: translateX(-50%);
    border-radius: 50%;
    content: '';
}

.main_visual .bg_box {
    width: 100%;
    height: 1080px;
}

.main_visual .bg_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main_visual .swiper-slide {
    position: relative;
}

.main_visual video {
    width: 100%;
    height: auto;
    display: block;
}

.main_visual .txt_box {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
}

.main_visual .txt_box .inner {
    height: 100%;
    display: flex;
    align-items: center;
}

.main_visual .txt_box h2 {
    color: var(--GREY-00, #FFF);
    font-family: Helvetica;
    font-size: 90px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    /* 72.8px */
    text-transform: capitalize;
}

.main_visual .txt_box p {
    color: var(--GREY-00, #FFF);
    font-family: var(--Family-KO, Pretendard);
    font-size: var(--fs-xl);
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    /* 36.4px */
    margin-top: 24px;
}


@media all and (max-width:1024px) {
    .main_visual .bg_box {
        height: 600px;
    }
}

@media all and (max-width:768px) {
    .main_com_tit .main_tit {
        font-size: 30px;
    }

    /* 히어로 영상은 문구가 영상 안에 들어 있어 잘리면 안 된다.
       기존 100vh + object-fit:cover 는 가로형 영상을 세로 화면에 채우느라
       좌우를 크게 잘라냈다 → 원본 비율 그대로 전체가 보이게 한다. */
    .main_visual .swiper-container,
    .main_visual .swiper-wrapper,
    .main_visual .swiper-slide {
        height: auto;
    }

    .main_visual video {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

@media all and (max-width:650px) {
    .main_visual .txt_box h2 {
        font-size: 42px;
    }
}

.sig_swiper_box {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    position: relative;
    justify-content: space-between;
}

.sig_swiper_box>div {
    width: 45%;
    overflow: hidden;
}

.sig_swiper_box .swiper_slider {
    height: 100%;
}

.sig_swiper_box .swiper_slider .swiper-slide {
    height: auto;
}

.sig_swiper_box .swiper_slider .img_box {
    width: 100%;
    height: 100%;
    aspect-ratio: 960 / 760;
}

.sig_swiper_box .swiper_slider .img_box img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.sig_swiper_box .swiper_slider .txt_box {
    display: none;
}

.sig_swiper_box .right_cont {
    box-sizing: border-box;
}

.sig_swiper_box .line {
    width: 1px;
    height: 117px;
    border-start-start-radius: .5px;
    background-color: rgba(0, 0, 0, .6);
    margin: 24px 0;
}

.sig_swiper_box .swi_box_ter .img_tit {
    color: var(--GREY-900, #222);

    /* Headline 1/Medium - 28 */
    font-family: var(--Family-KO, Pretendard);
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    /* 36.4px */
    letter-spacing: 0.28px;
}

.sig_swiper_box .swi_box_ter .img_txt {
    color: var(--GREY-900, #222);

    /* Headline 1/Medium - 28 */
    font-family: var(--Family-KO, Pretendard);
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    /* 36.4px */
    letter-spacing: 0.28px;
    margin-bottom: 20px;
}

a.bba_moon_btn {
    width: 227px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 16px 80px;
    border-radius: 4px;
    background: var(--GREY-600, #5B5B5B);
    color: #FFF;
    font-family: var(--Family-KO, Pretendard);
    font-size: 18px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0.09px;
    text-align: center;
    font-style: normal;
    cursor: pointer;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 20px;
}

a.bba_moon_btn:hover {
    background-color: #BFAF9D;
}

a.bba_moon_btn.center_btn {
    margin: 0 auto;
}

/* 시그니처 슬라이더 화살표 — 이미지 위에 겹치지 않도록
   '시술 소개' 버튼 아래에 원형 컨트롤로 배치.
   (.air_arw_box 공용 규칙은 아래 솔루션 슬라이더가 계속 사용하므로 전부 스코프) */
.sig_swiper_box .air_arw_box {
    position: static;
    width: auto;
    height: auto;
    /* 버튼과의 간격 + 위쪽 구분선 */
    margin-top: 40px;
    padding-top: 36px;
    border-top: 1px solid rgba(34, 34, 34, 0.12);
    max-width: 227px;
    /* .bba_moon_btn 과 같은 폭 → 좌측 정렬 라인 일치 */
}

.sig_swiper_box .air_arw_box .inner {
    width: auto;
    max-width: none;
    height: auto;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.sig_swiper_box .air_arw_box .swiper_arw {
    position: static;
    transform: none;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(34, 34, 34, 0.22);
    border-radius: 50%;
    background-size: 9px 18px;
    background-position: center center;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.sig_swiper_box .air_arw_box .swiper_arw.prev_arw,
.sig_swiper_box .air_arw_box .swiper_arw.next_arw {
    background-position: center center;
}

.sig_swiper_box .air_arw_box .swiper_arw:hover {
    background-color: #F3F0EC;
    border-color: rgba(34, 34, 34, 0.55);
}

/* 첫/마지막 슬라이드에서 비활성 상태 (loop 미사용) */
.sig_swiper_box .air_arw_box .swiper_arw.swiper-button-disabled {
    opacity: 0.3;
    pointer-events: none;
}

.air_arw_box .inner {
    height: 100%;
}

.air_arw_box .swiper_arw {
    position: absolute;
    top: 50%;
    width: 27px;
    height: 54px;
    background-repeat: no-repeat;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
}

.air_arw_box .swiper_arw.prev_arw {
    left: 0;
    background-image: url(/img/arw_prev_btn.png);
    background-position: center left;
}

.air_arw_box .swiper_arw.next_arw {
    right: 0;
    background-image: url(/img/arw_next_btn.png);
    background-position: center right;
}

@media all and (max-width:1200px) {
    .sig_swiper_box .right_cont {
        padding: 100px 0 100px 40px;
    }

}

@media all and (max-width:1024px) {
    .sig_swiper_box {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-bottom: 60px;
    }

    .sig_swiper_box>div {
        width: 100%
    }

    /* 모바일: 우측 영역이 가운데 정렬이라 화살표도 중앙으로 */
    .sig_swiper_box .air_arw_box {
        max-width: none;
        margin-top: 32px;
        padding-top: 28px;
    }

    .sig_swiper_box .air_arw_box .inner {
        justify-content: center;
        /* 공용 .inner 폭(93.75%)이 좌측 정렬로 남아 화살표가 왼쪽으로 쏠리던 문제 보정 */
        width: 100%;
        margin: 0 auto;
    }

    .sig_swiper_box .right_cont {
        padding: 0;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        /* 모바일에서는 우측 영역의 자식들이 이미지와 한 줄기로 섞이도록 박스를 없앤다
           (text-align 등 상속은 그대로 유지됨) */
        display: contents;
    }

    /* 모바일 노출 순서 : 시그니처 설명 → 이미지 → 시술명 → 시술 소개 버튼 → 화살표 */
    .sig_swiper_box .main_com_tit {
        order: 1;
        padding: 60px 27px 0;
        box-sizing: border-box;
    }

    /* 제목에 인라인 style="text-align:left" 이 걸려 있어 모바일 중앙정렬은 !important 필요 */
    .sig_swiper_box .main_com_tit .main_tit {
        text-align: center !important;
    }

    .sig_swiper_box .line {
        order: 2;
        /* 설명과 이미지 사이 구분선 : 세로 117px 은 모바일에서 여백이 과해 축소 */
        height: 40px;
        margin: 24px auto;
    }

    .sig_swiper_box .left_cont {
        order: 3;
    }

    .sig_swiper_box .swi_box_ter {
        order: 4;
        margin-top: 24px;
        padding: 0 27px;
        box-sizing: border-box;
    }

    .sig_swiper_box .bba_moon_btn {
        order: 5;
    }

    .sig_swiper_box .air_arw_box {
        order: 6;
    }

    .bba_moon_btn {
        margin: 0 auto;
    }
}

.thr_ee_bos {
    display: flex;
    flex-wrap: wrap;
    gap: 56px;
}

.thr_ee_bos .bos_box_yo {
    flex: 1 1 calc((100% /3) - 38px);
}

.bos_box_yo .img_box {
    display: flex;
    padding-top: 0.088px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    aspect-ratio: 879/513;
    border-radius: 10px;
    overflow: hidden;
}

.bos_box_yo .img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bos_box_yo .info_box {
    text-align: center;
    border-bottom: 1px solid #dcdcdc;
    padding-top: 24px;
    padding-bottom: 16px;
}

.bos_box_yo .info_tit {
    color: var(--GREY-300, #AAA);
    font-family: var(--Family-KO, Pretendard);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    /* 26px */
    letter-spacing: 0.1px;
    text-align: left;
    margin-bottom: 12px;
}

.bos_box_yo .info_txt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 2줄까지만 표시 */
    overflow: hidden;
    text-overflow: ellipsis;

    color: var(--GREY-800, #2E2E2E);
    font-family: var(--Family-KO, Pretendard);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    /* 또는 30px */
    letter-spacing: -0.1px;
    text-align: left;
    margin-bottom: 32px;
    word-break: keep-all;

    /* ✅ 핵심 보정 */
    max-height: calc(1.5em * 2);
    /* 줄높이×줄수 */
    box-sizing: border-box;
}


.bos_box_yo .info_time {
    color: var(--GREY-300, #AAA);
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: right;
}

.be_af_swi {
    overflow: hidden;
    position: relative;
}

.swiper_arw.white_arw {
    filter: brightness(0) invert(1);
}

.be_af_swi .air_arw_box .swiper_arw.prev_arw {
    left: 30px;
}

.be_af_swi .air_arw_box .swiper_arw.next_arw {
    right: 30px;
}

.thr_ee_bos .medi_cont .img_box {
    aspect-ratio: 1/0.694;
}

.thr_ee_bos .medi_txt {
    text-align: left;
    color: #fff;
}

.thr_ee_bos .medi_txt .me_tit {
    color: #FDF9F4;
    font-size: 18px;
    font-weight: 500;
}

.thr_ee_bos .medi_txt .me_txt {
    color: #FFF;
    font-size: 24px;
    font-weight: 500;
    margin-top: 10px;
    min-height: 56px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.thr_ee_bos .medi_date {
    color: #BABABA;
    font-size: 18px;
    text-align: right;
    margin-top: 40px;
}

.hsp_map_swiper {
    position: relative;
    margin-top: 80px;
}

.hsp_map_swiper .air_arw_box {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    width: 100%;
    z-index: 2;
    max-width: 879px;
}

/* 밝은 배경(#FAFAFA) 위라 원본 화살표는 너무 진함 → 톤 다운, hover 시 진해짐 */
.hsp_map_swiper .air_arw_box .swiper_arw {
    opacity: 0.4;
    transition: opacity 0.25s ease;
}

.hsp_map_swiper .air_arw_box .swiper_arw:hover {
    opacity: 0.75;
}

.hsp_map_swiper .swiper-slide {
    transition: transform 0.3s ease;
    opacity: 0.4;
}

.hsp_map_swiper .swiper-slide-active {
    transform: scale(1.2);
    opacity: 1;
    position: relative;
    z-index: 2;
}

.hsp_map_swiper .sol_link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* 각 카테고리 페이지 상단 배너 이미지(대부분 투명 PNG)를 그대로 사용.
   배경은 투명 — 섹션 배경이 그대로 비침.
   .bos_box_yo .img_box 는 리뷰·게시판 카드에서도 쓰이므로 이 슬라이더로만 스코프 */
.hsp_map_swiper .bos_box_yo .img_box {
    background: transparent;
}

.hsp_map_swiper .bos_box_yo .img_box img {
    object-fit: contain;
    object-position: center bottom;
}

/* 스킨부스터 원본(912×754)은 아래쪽 약 32%가 투명 여백이라
   그대로 두면 제품이 위로 치우쳐 보임 → 여백의 절반만큼 내려서 시각적 중앙 정렬 */
.hsp_map_swiper .bos_box_yo .img_box img.sol_img_skinbooster {
    transform: translateY(16%);
}

.hsp_map_swiper .sol_tit {
    margin-top: 16px;
    text-align: center;
    color: #222;
    font-family: Pretendard;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.hsp_map_swiper .air_arw_box .swiper_arw.prev_arw {
    left: 30px;
}

.hsp_map_swiper .air_arw_box .swiper_arw.next_arw {
    right: 30px;
}

.map_sec_tion {
    display: flex;
}

.map_sec_tion>div {
    width: 50%;
    box-sizing: border-box;
}

.map_sec_tion .map_info {
    padding: 140px 0 140px 140px;
    background-color: #fff;
}

.map_ico_nli .map_icons {
    display: flex;
    gap: 20px;
    align-items: center;
}

.map_ico_nli .map_icons+.map_icons {
    margin-top: 60px;
}

.map_ico_nli .icon_box {
    width: 72px;
    aspect-ratio: 1/1;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: #BFAF9D;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.map_ico_nli .map_tit {
    color: #3E2B2C;
    font-size: 28px;
    font-weight: 800;
    font-family: 'Nanum Myeongjo', serif;
}

.map_ico_nli .map_txt {
    color: #777;
    font-size: 18px;
    line-height: 1.444em;
    margin-top: 10px;
}

.hsp_dool_reo {
    position: relative;
    overflow: hidden;
    background: #FAFAFA;
}

.hsp_dool_reo:before {
    color: #f6f6f6;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 120px;
    font-weight: 700;
    opacity: .06;
    content: 'UMEI B CLINIC';
    position: absolute;
    top: 0px;
    right: 0;
    line-height: 1;
    white-space: nowrap;
    color: var(--GREY-900, #222);
    text-align: right;
    font-family: Pretendard;
    font-size: 120px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    opacity: 0.06;
    /* ✅ 글씨 전체 투명도 */

    display: none;
}


@media all and (max-width:1200px) {
    .map_sec_tion .map_info {
        padding: 100px 0 100px 80px;
    }
}

@media all and (max-width:1024px) {
    .thr_ee_bos {
        justify-content: space-between;
        gap: 20px;
    }

    .hsp_map_swiper .swiper-slide-active {
        transform: none;
    }

    .thr_ee_bos .bos_box_yo {
        flex: 0 0 calc((100% /2) - 10px);
    }
}

@media all and (max-width:950px) {
    .map_sec_tion {
        flex-wrap: wrap;
    }

    .map_sec_tion>div {
        width: 100%;
    }

    .map_sec_tion .map_info {
        padding: 100px 0;
        width: 93.75%;
        margin: 0 auto;
    }

    .map_sec_tion .map_box {
        height: 420px;
    }
}


@media all and (max-width:768px) {
    .hsp_map_swiper .air_arw_box {
        display: none;
    }

    .map_ico_nli .map_icons {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .map_sec_tion .main_tit {
        text-align: center;
    }

    .hsp_dool_reo:before {
        font-size: 80px;
    }
}

.com_roll_arw {
    width: 446px;
    position: relative;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.com_roll_arw::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('/img/roll_img.png') no-repeat center / cover;
    animation: rotate 10s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


.doc_tor_soga {
    position: relative;
    overflow: hidden;
}

.doc_tor_soga .doc_top {
    background: linear-gradient(90deg, #684C4E 50%, #5A4444 100%);
    padding: 140px 0;
}

.doc_tor_soga .doc_bot {
    background: #F8EEE2;
}

.doc_tor_soga .doc_bot .inner {
    display: flex;
    flex-wrap: wrap;
}

.doc_tor_soga .doc_bot .inner>div {
    width: 50%;
}

.doc_tor_soga .left_doc_yo {
    padding: 100px 0;
}

.doc_tor_soga .com_roll_arw {
    position: absolute;
    right: -140px;
    top: -60px;
}

.doc_tor_soga .doc_sub {
    color: #1E2D64;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1.32px;
}

.doc_tor_soga .doc_tit {
    color: #333;
    font-size: 46px;
    font-weight: 300;
    margin-top: 5px;
}

.doc_yak_li {
    margin-top: 35px;
    display: flex;
}

.doc_yak_li .ya_tit {
    min-width: 180px;
    width: 180px;
    color: #333;
    font-size: 28px;
    font-weight: 500;
}

.doc_yak_li .ya_list {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.doc_yak_li .ya_list li {
    width: calc(50% - 4px);
    color: #333;
    font-size: 16px;
    box-sizing: border-box;
    line-height: 1.625em;
    position: relative;
    padding-left: 15px;
}

.doc_yak_li .ya_list li:before {
    width: 5px;
    height: 5px;
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    background-color: #333;
    border-radius: 50%;
}

.doc_tor_soga .right_doc_yo {
    position: relative;
}

.doc_tor_soga .doc_img_yo {
    position: absolute;
    right: 0;
    bottom: 0;
}

.doc_tor_soga .doc_img_yo img {
    width: 100%;
    max-width: fit-content;
}


.con_tac_sec {
    display: flex;
    overflow: hidden;
}

.con_tac_sec>div {
    width: 50%;
}

.con_tac_sec .tact_left {
    padding: 140px 0;
    background-color: #F8EEE2;
    padding-right: 140px;
    display: flex;
    justify-content: flex-end;
    position: relative;
}

.con_tac_sec .tact_left:before {
    content: 'Contact Us';
    color: #FFF;
    text-align: center;
    font-family: 'Nanum Myeongjo';
    font-size: 160px;
    font-weight: 800;
    opacity: 0.5;
    position: absolute;
    left: -20px;
    top: -20px;
    writing-mode: vertical-rl;
    white-space: nowrap;
    line-height: 1;
}

.con_tac_sec .tact_right {
    padding: 140px 0;
    background: url(/img/con_tact_bg01.png)no-repeat center center /cover;
    padding-left: 140px;
    position: relative;
}

.con_tac_sec .com_roll_arw {
    position: absolute;
    bottom: -100px;
    right: -140px;
}

.input_we_yo .in_tit {
    color: #222;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4444em;
    /* 144.444% */
}

.con_tact_box {
    max-width: 560px;
    width: 100%;
}

.input_we_yo .inpu_tt {

    height: 50px;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
}

.input_we_yo .inpu_tt .inpu_t {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    border: none;
    outline: none;
    color: #222;
    font-size: 18px;
    font-weight: 400;
}

.input_we_yo .inpu_tt .inpu_t::placeholder {
    color: #b3b3b3;
}

.input_we_yo .inpu_tt .sel_inpu_t {
    color: #b3b3b3;
}

.input_we_yo .inpu_tt .sel_inpu_t.visited,
.input_we_yo .inpu_tt .sel_inpu_t option {
    color: #222;
}

.check_ed_bo {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.check_ed_bo label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.check_ed_bo label input {
    display: none;
}

.check_ed_bo label i {
    width: 24px;
    height: 24px;
    border: 1px solid #dcdcdc;
    background-color: #fff;
    box-sizing: border-box;
    position: relative;
}

.check_ed_bo label i:before {
    position: absolute;
    content: '';
    width: 60%;
    height: 60%;
    background-color: #1E2D64;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.check_ed_bo label input:checked~i::before {
    opacity: 1;
}

.check_ed_bo label span {
    color: #222;
    font-size: 16px;
    font-weight: 600;
}

.check_ed_bo .right_che_ck a {
    color: #222;
    font-size: 16px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.con_tac_sec .sub_mit_bt {
    width: 100%;
    height: 70px;
    background-color: #BFAF9D;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}

.jin_ryo_li {
    color: #FFF;
    font-size: 24px;
    line-height: 1.0833em
}

.jin_ryo_li .jin_tit {
    font-weight: 800;
}

@media all and (max-width:1600px) {
    .con_tac_sec .tact_left {
        padding-left: 20px;
    }

    .con_tac_sec .tact_left:before {
        content: none;
    }
}

@media all and (max-width:1024px) {
    .doc_tor_soga .doc_bot .inner>div {
        width: 100%;
    }

    .doc_tor_soga .doc_img_yo {
        position: unset;
        text-align: center;
    }

    .doc_tor_soga .main_tit br {
        display: none;
    }

    .con_tac_sec {
        flex-wrap: wrap;
    }

    .con_tac_sec>div {
        width: 100%;
    }

    .con_tac_sec .tact_left,
    .con_tac_sec .tact_right {
        padding: 80px 0;
    }

    .con_tact_box,
    .jin_ryo_boxs {
        max-width: none;
        width: 93.75%;
        margin: 0 auto;
    }

}

@media all and (max-width:700px) {
    .doc_yak_li .ya_list li {
        width: 100%;
    }
}

.text_banner_scroll {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.text_banner_scroll ul li {
    color: #1E2D64;
    font-size: 140px;
    font-weight: 700;
    opacity: .06;
    margin-right: 50px;
    line-height: .85em;
}

@media all and (max-width:768px) {
    .text_banner_scroll ul li {
        font-size: 82px;
    }
}


/*=============================인트로======================================= */
.intro_section {
    width: 100%;
    height: 700px;
    background: url("/img/intro_bg.png") center/cover no-repeat lightgray;
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro_section .intro_inner {
    max-width: 1400px;
    width: 100%;
    padding: 0 clamp(16px, 4vw, 48px);
}

.intro_section .intro_box {
    width: 100%;
    display: flex;
    align-items: center;
    /* 텍스트 왼쪽 / 이미지 오른쪽 */
    justify-content: space-between;
    gap: clamp(40px, 6vw, 100px);
}

/* 이미지 영역 (원형 컨테이너 제거 — 이미지 자체가 섹션을 채움) */
.intro_section .intro_img {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    line-height: 0;
}

/* ===== [메인 인트로 전용] intro_img_01.png =====
   이 이미지만 따로 조절할 수 있는 클래스.
   크기·블렌딩은 아래 변수 3개만 수정하면 됩니다. */
.intro_main_img {
    --intro-img-h: clamp(340px, 48vw, 660px);
    /* 이미지 높이 (섹션 700px 기준) */
    --intro-fade-b: 30%;
    /* 하단 블렌딩 범위 — 잘린 단면을 배경으로 흐리게 */
    --intro-fade-x: 0%;
    /* 좌·우 블렌딩 범위 */

    height: var(--intro-img-h);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;

    /* 사각 단면(특히 하단)을 배경에 자연스럽게 녹임 */
    -webkit-mask-image:
        linear-gradient(to bottom,
            transparent 0%,
            #000 7%,
            #000 calc(100% - var(--intro-fade-b)),
            rgba(0, 0, 0, 0.45) calc(100% - var(--intro-fade-b) * 0.5),
            rgba(0, 0, 0, 0.12) calc(100% - var(--intro-fade-b) * 0.2),
            transparent 100%),
        linear-gradient(to right, transparent 0%, #000 var(--intro-fade-x), #000 calc(100% - var(--intro-fade-x)), transparent 100%);
    mask-image:
        linear-gradient(to bottom,
            transparent 0%,
            #000 7%,
            #000 calc(100% - var(--intro-fade-b)),
            rgba(0, 0, 0, 0.45) calc(100% - var(--intro-fade-b) * 0.5),
            rgba(0, 0, 0, 0.12) calc(100% - var(--intro-fade-b) * 0.2),
            transparent 100%),
        linear-gradient(to right, transparent 0%, #000 var(--intro-fade-x), #000 calc(100% - var(--intro-fade-x)), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* 텍스트 */
.intro_section .intro_txt {
    flex: 0 1 auto;
    max-width: 620px;
}

.intro_section .intro_txt h2 {
    color: var(--primary-900, #181511);
    font-family: var(--Family-KO, Pretendard);
    font-size: clamp(24px, 2.2vw, var(--fs-3xl_2, 40px));
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.4px;
    margin-bottom: clamp(16px, 2vw, var(--sp-md_2, 32px));
}

.intro_section .intro_txt p {
    color: var(--GREY-600, #5B5B5B);
    font-family: var(--Family-KO, Pretendard);
    font-size: clamp(15px, 1vw, var(--fs-base, 18px));
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.09px;
    margin-bottom: clamp(20px, 3vw, var(--sp-lg_2, 48px));
    white-space: nowrap;
}

.intro_section .intro_txt .intro_btn_box button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: clamp(6px, 1vw, 8px) clamp(16px, 2vw, 20px);
    border-radius: 999px;
    border: 0.5px solid var(--GREY-900, #222);
    background: none;
    font-family: Pretendard, system-ui, sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    cursor: pointer;
    transition: all 0.3s ease;
}

.intro_section .intro_txt .intro_btn_box button:hover {
    background: var(--GREY-900, #222);
    color: #fff;
}

/* ================================
     Responsive
  ================================ */
@media(max-width:1400px) {
    .intro_section {
        padding: 80px 0;
    }
}

@media(max-width:1000px) {
    .intro_section .intro_box {
        flex-direction: column;
        text-align: center;
        gap: clamp(40px, 6vw, 80px);
        padding: 40px 0;
    }

    /* 세로 스택에서는 기존처럼 이미지가 위 */
    .intro_section .intro_img {
        order: 1;
        justify-content: center;
    }

    .intro_main_img {
        --intro-img-h: clamp(300px, 46vw, 470px);
    }

    .intro_section .intro_txt {
        order: 2;
        width: 100%;
        max-width: 100%;
    }

    .intro_btn_box {
        width: 100%;
        justify-content: center;
        display: flex;
    }

    .intro_section {
        height: 640px;
    }
}

@media(max-width:600px) {
    .intro_main_img {
        --intro-img-h: clamp(260px, 68vw, 360px);
        --intro-fade-x: 6%;
    }

    .intro_section .intro_txt h2 {
        font-size: clamp(20px, 6vw, 28px);
    }

    .intro_section .intro_txt p {
        font-size: clamp(14px, 3.8vw, 16px);
    }

    .intro_section .intro_txt button {
        font-size: 14px;
        padding: 6px 16px;
    }

    .intro_section .intro_txt p {
        font-size: 14px;
    }

    .intro_section {
        height: 560px;
    }
}

.review_section .bos_box_yo .img_box {
    display: flex;
    padding-top: 0.088px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    aspect-ratio: 429.33/298.45;
    border-radius: 5px;
    overflow: hidden;
}



/*==============================Umeib Channel==========================================*/

.channel_wrap {
    width: 100%;
    padding: 1px 0;
    background: #FAFAFA;
    display: flex;
    justify-content: center;
    padding: 100px 0;
}

.channel_box {
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

.main_com_tit .main_tit {
    font-family: Pretendard;
    font-size: 40px;
    font-weight: 600;
    color: #171717;
    text-align: center;
    margin-top: 15px;
}

/* ------- 핵심 구조 ------- */
.channel_img_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    /* ❌ 고정 높이 제거 (이게 문제였음) */
}

/* 제목·텍스트를 제거하고 썸네일만 남기면서
   오른쪽 썸네일 3개 총 높이 ≒ 왼쪽 영상 높이가 되도록 가로 비율을 3:1 로 조정 */
.main_channel_box {
    flex: 1 1 74%;
    aspect-ratio: 800/450;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    max-width: none;
    height: 100%;
    border-radius: 10px;
}

.main_channel_box img,
.main_channel_box iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

.sub_channel_wrap {
    flex: 1 1 24.5%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    height: 100%;
}

/* ------- 카드 (썸네일 전용) ------- */
.sub_channel {
    display: flex;
    width: 100%;
}

.sub_channel div {
    flex: 1 1 100%;
}

.sub_channel .img_box {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 10px;
}

.sub_channel .img_box img,
.sub_channel .img_box iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

/* ------- 반응형 ------- */
@media(max-width:1400px) {
    .channel_img_box {
        flex-direction: column;
        gap: 32px;
        align-items: center;
        padding: 0 2vw;
    }

    .main_channel_box {
        flex: 1 1 100%;
        max-width: 100%;
        /* 세로 배치에서는 flex-basis 가 '높이' 기준이 되어 폭이 iframe 기본값(300px)으로
           줄어들면서 첫 영상만 작게 보였다. 폭을 명시해 아래 썸네일과 크기를 맞춘다. */
        width: 100%;
        /* aspect-ratio 유지 — auto 로 두면 iframe 이 150px 로 찌그러짐 */
    }

    .sub_channel_wrap {
        flex: 1 1 100%;
        width: 100%;
        height: auto;
        /* ✅ 자동 늘어나게 */
    }
}

/* ===== 모바일 : 유튜브 영상 4개를 가로 슬라이드로 ===== */
.channel_mo_swiper {
    display: none;
}

@media(max-width:1024px) {
    .channel_wrap .channel_img_box {
        padding: 0;
    }

    .channel_mo_swiper {
        display: block;
        width: 100%;
        overflow: hidden;
        padding: 0 0 34px;
    }

    .channel_mo_swiper .swiper-slide {
        height: auto;
    }

    /* 16:9 비율은 aspect-ratio 대신 padding-top 방식 (구형 기기 호환) */
    .channel_mo_swiper .mo_video_box {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        border-radius: 10px;
        overflow: hidden;
        background: #000;
    }

    .channel_mo_swiper .mo_video_box iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        border: 0;
    }

    .channel_mo_swiper .swiper-pagination {
        bottom: 0;
    }

    .channel_mo_swiper .swiper-pagination-bullet-active {
        background: #796A56;
    }
}

/* 제목·텍스트 제거로 구분선이 필요 없어짐 (마크업은 유지) */
.channel_wrap .line_wrap {
    display: none;
}

/* ===== 유튜브 채널 – 영상 제목 표기 버전 (외국어판 jp/en/ch 전용) =====
   .channel_wrap 에 has_ch_tit 를 붙인 페이지에만 적용된다. 한국어판은 영향 없음.

   썸네일을 브랜드 로고색(#796A56) 테두리 카드로 감싸고 그 아래에 제목을 둔다.
   섹션 배경이 #FAFAFA 라 흰색 테두리는 보이지 않으므로 로고색을 사용.

   높이 계산 (컨테이너 1400px, 좌우 간격 24px 기준)
     카드 여백 = 테두리 1px×2 + 안쪽 여백 8px×2 = 18px
     카드 높이 = (카드폭 - 18) × 9/16 + 제목 50px(2줄 42 + 여백 8) + 18
     왼쪽 1장 = 오른쪽 3장 + 세로 간격 32px  →  좌 78.4% : 우 19.88%
   이 비율에서 좌우 총높이가 약 678px 로 일치한다. */
.channel_wrap.has_ch_tit .main_channel_col {
    flex: 0 0 78.4%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.channel_wrap.has_ch_tit .sub_channel_wrap {
    flex: 0 0 19.88%;
    min-width: 0;
}

.channel_wrap.has_ch_tit .sub_channel {
    flex-direction: column;
}

/* 카드 — 브랜드 로고색 테두리 */
.channel_wrap.has_ch_tit .main_channel_col,
.channel_wrap.has_ch_tit .sub_channel {
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #796A56;
    border-radius: 12px;
    background: #fff;
}

/* 세로 배치가 되면서 aspect-ratio 대신 flex 가 높이를 잡지 않도록 고정 */
.channel_wrap.has_ch_tit .main_channel_box {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* .sub_channel div { flex: 1 1 100% } 가 세로 배치에서 썸네일을 늘리는 것을 방지 */
.channel_wrap.has_ch_tit .sub_channel .img_box {
    flex: 0 0 auto;
    border-radius: 8px;
}

/* 2줄 고정(min-height) — 1줄짜리 제목이 와도 좌우 높이가 틀어지지 않게 함 */
.channel_wrap.has_ch_tit .ch_video_tit {
    margin: 8px 0 0;
    font-family: Pretendard;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #171717;
    min-height: 42px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 큰 영상 제목은 한 단계 크게. 폭이 넓어 1줄로 들어가므로(28px)
   위의 min-height 42px 안에 그대로 수납되어 좌우 높이 정렬은 유지된다. */
.channel_wrap.has_ch_tit .main_channel_col .ch_video_tit {
    font-size: 20px;
    font-weight: 600;
}

@media(max-width:1400px) {

    .channel_wrap.has_ch_tit .main_channel_col,
    .channel_wrap.has_ch_tit .sub_channel_wrap {
        flex: 1 1 100%;
        width: 100%;
    }
}


/*==============================Instagram==========================================*/

.instagram_section {
    width: 100%;
    padding: clamp(80px, 6vw, 164px) 0;
    background: #888;
    display: flex;
    justify-content: center;
}

.instagram_box {
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
}

.instagram_box .main_com_tit .main_tit {
    font-family: Pretendard;
    font-size: clamp(28px, 2.5vw, 40px);
    font-weight: 600;
    color: #fff;
    text-align: center;
}

.instagram_box .card_box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.instagram_box .card {
    width: calc(25% - 18px);
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #999;
    overflow: hidden;
    transition: transform .3s ease;
}

.instagram_box .card:hover {
    transform: translateY(-4px);
}

.instagram_box .card .img_box {
    display: flex;
    padding-bottom: 0.456px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    align-self: stretch;
    aspect-ratio: 342/453;
}

.instagram_box .card .img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.instagram_box .card a {
    display: flex;
    padding: 16px 40px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.instagram_box .card a p {
    color: var(--GREY-00, #FFF);
    text-align: center;

    /* Headline 1/Medium - 20 */
    font-family: var(--Family-KO, Pretendard);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    /* 26px */
    letter-spacing: 0.2px;
}

.instagram_box .card a .arrow {
    font-size: 18px;
    color: #fff;
    transition: transform .3s;
}

.instagram_box .card a:hover .arrow {
    transform: translateX(4px);
}

/* 반응형 */
@media (max-width:1000px) {
    .instagram_box {
        padding: 0 2vw;
    }

    .instagram_box .card {
        width: calc(50% - 12px);
    }
}

.instagram_title {
    color: var(--GREY-00, #FFF);
    text-align: center;
    font-family: Helvetica;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    /* 48px */
    letter-spacing: -0.48px;
}


/*==============================blog==========================================*/

.blog_wrap {
    display: flex;
    padding: 100px 0;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}

.blog_wrap .blog_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 56px;
}

.blog_wrap .blog_tit h2 {
    color: var(--GREY-900, #222);
    text-align: center;
    font-family: Helvetica;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    /* 48px */
    letter-spacing: -0.48px;
}

.blog_wrap .card_box {
    display: flex;
    gap: 24px;
    justify-content: space-between;
}

.blog_wrap .card_box .card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 calc((100%/5) - 52px);
    aspect-ratio: 268.80/268.80;
}


.blog_wrap .card_box .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media(max-width:1000px) {
    .blog_wrap .card_box {
        flex-wrap: wrap;
    }

    .blog_wrap .card_box .card {
        flex: 0 0 calc((100%/2) - 13px);
    }
}


.kkomap_wrap {
    width: 100%;
    position: relative;
    padding: 60px 0;
}

/* 내부 구조 100% */
.kkomap_wrap .root_daum_roughmap {
    width: 100% !important;
    height: 100% !important;
}

.kkomap_wrap .wrap_map {
    width: 100% !important;
    height: 100% !important;
}

/* 불필요한 영역 제거 */
.section_address,
.wrap_controllers {
    display: none !important;
}

/* 2026.01.30 수정
   → 화살표를 %좌표로 절대배치하던 규칙 제거.
   레이아웃 변경 이후 '시술 소개' 버튼·문구 위에 겹쳐서,
   위쪽 .sig_swiper_box .air_arw_box 규칙(버튼 아래 흐름 배치)을 그대로 따르게 함. */