/* ---------- 공통 ---------- */

.seo-h1 {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    font-size: 1px !important;
    line-height: 1px !important;
    top: 0 !important;
    left: 0 !important;
    z-index: -1 !important;
}

.site-layout {
    display: grid;
    width: 100%;
}

.headerArea {
    grid-area: header;
    min-width: 0;
}

.mainArea {
    grid-area: menu;
    position: relative;
    min-width: 0;
    min-height: 0;
    isolation: isolate;
    overflow: hidden;
}

.contactArea {
    grid-area: contact;
    min-width: 0;
    padding: 20px;
}

.footerArea {
    grid-area: footer;
    min-width: 0;
}


/* ---------- 메뉴 ---------- */

.mainArea ul {
    position: relative;
    display: grid;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 10;
}

.mainArea li {
    min-width: 0;
    min-height: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    transition: background-color 0.8s ease;
}

.mainArea li:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.mainArea li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    text-decoration: none;
    color: #fff;
}

.mainArea li a span {
	font-family: 'Roboto';
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 300;
}

.mainArea li h2 {
    display: block;
    margin-top: 35px;
    white-space: pre-line;
    font-weight: 600;
    line-height: 1.3;
}


/* 메뉴 영문 배경색 */
.mainArea li.traffic a span { background:#FF3339; } /* 교통사고 */

.mainArea li.industry a span { background:#27B4BE; } /* 산재 */

.mainArea li.ipwon a span, .mainArea li.neck a span { background:#4B5AD9; } /* 척추관절, 목어깨 */

.mainArea li.pain a span { background:#23AB47; } /* 허리디스크 관절염 */

.mainArea li.pain a span { background:#AD5BD7; } /* 추나요법 */

.mainArea li.pain a span { background:#71B01F; } /* 구안와사 */

.mainArea li.spine a span { background:#0000CA; } /* 도수치료 */

.mainArea li.uterus a span { background:#FF5028; } /* 자궁난소 */

.mainArea li.cancer a span { background:#FF529D; } /* 여성암 */

.mainArea li.thyroid a span { background:#FFBA2C; } /* 갑상선 */

.mainArea li.pancreas a span { background:#00CA6E; } /* 췌담도암 */

.mainArea li.menopause a span { background:#F43EFF; } /* 갱년기 */

.mainArea li.influ a span {	background:#44d1ff; } /* 감기독감영양수액 */

.mainArea li.child a span {	background:#FFBD3E; } /* 아동발달 */

.mainArea li.diet a span { background:#4C34EA; } /* 비만클리닉, 얼한다 */

.mainArea li.xfit a span { background:#4C34EA; } /* xfit */

.mainArea li.sevendiet a span { background:#FD625E; } /* 7일다이어트 */

.mainArea li.skin a span { background:#59D2FF; } /* 피부질환 보습처방 */

.mainArea li.nails a span {	background:#9228ff; } /* 내성발톱 */

.mainArea li.naver a span {	background:#03C75A; } /* 네이버지도 */


/* ---------- 배경 슬라이드 ---------- */

.mainArea .intro_visual {
    overflow: hidden;
    z-index: 5;
}

/* 원본 및 실제 출력 슬라이드 영역 */
.mainArea #slideshow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* 각 슬라이드 */
.mainArea .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 배경 이미지 */
.mainArea .slide > span {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* ---------- 연락처 ---------- */

.contactArea a {
    display: block;
    margin: 0 auto 2%;
    padding: 5% 0;
    text-align: center;
    font-weight: 200;
    font-size: 1.1em;
}

.contactArea a.tel {
    color: #fff;
    background: #2E2E2E;
}


.contactArea a.tel2 {
    color: #fff;
    background: #DE4A94;
}

.contactArea a.kakao {
    background: #FFDD00;
}

.contactArea a.naver {
    color: #fff;
    background: #03C75A;
}

.contactArea a.naver em {
	padding-left: 35px;
    background: url('/f/images/intro_pc/icon_naver.png') no-repeat left center;
    background-size: contain;
    font-weight: 500;
}

.contactArea a.tel span, .contactArea a.tel2 span {
    display: inline-block;
    padding-left: 10px;
    font-weight: 500;
}

.contactArea a.kakao em {
    padding-left: 30px;
    background: url('/f/images/intro_pc/icon_kakao.png') no-repeat left center;
    background-size: contain;
    font-weight: 500;
}


/* ---------- PC (861px 이상) ---------- */

@media (min-width: 861px) {

    /* 전체 레이아웃 */
    .site-layout {
        grid-template-columns: 300px minmax(0, 1fr); /* 메뉴 10개 기준임. 메뉴 개수에 따라 좌측 너비 별도 지정 */
        grid-template-rows: clamp(600px, 70vh, 700px) auto minmax(0, 1fr) auto;
        grid-template-areas:
            "header menu"
            ".      menu"
            "contact menu"
            "footer footer";
        align-content: start;
    }

    .headerArea .pc_logo {
        display: block;
        padding: 50px;
    }

    .headerArea .pc_logo img {
        max-width: 100%;
        height: auto;
    }

    .headerArea .m_logo {
        display: none;
    }

    /* 인사말 */
    .headerArea p {
        padding-top: clamp(250px, 34vh, 400px); /* 프로필이미지 배치에 따라 위치 값 별도 지정 */
        font-size: clamp(1.4em, 0.8vw, 2em);
        line-height: 140%;
        color: #555;
        white-space: pre-line;
        font-family: 'MaruBuri';
        text-align: center;
    }

    .headerArea p span {
        font-family: 'MaruBuriBold';
    }

    /* 메뉴 */
    .mainArea {
        width: 100%;
        min-width: 1250px; /* 메뉴 10개 기준임. 메뉴 개수에 따라 너비 별도 지정 */
        height: auto;
        min-height: max(700px, 100vh);
        min-height: max(700px, 100dvh);
    }

    .mainArea ul {
        grid-template-columns: repeat(5, minmax(250px, 1fr)); /* 메뉴 10개 기준임. 메뉴 개수에 따라 열 값 별도 지정 */
        grid-template-rows: repeat(2, minmax(0, 1fr)); /* 메뉴 10개 기준임. 메뉴 개수에 따라 행 값 별도 지정 */
        height: 100%;
        min-height: inherit;
    }

    .mainArea li a {
        padding: 20px;
    }
	
	.mainArea li a span {
		padding: 5px 10px;
        font-size:0.8em;
    }
	
	.mainArea li a h2 {
		font-size:clamp(2.2em, 2.0vw, 3.5em);
	}
	
	/* 영어 라벨 + 한글 제목 이동 준비 */
    .mainArea li a > span,
    .mainArea li a > h2 {
        transition: transform 0.45s ease;
    }
	
	/* 화살표 이미지 */
    .mainArea li a::after {
        content: "";
        display: block;
        width: 70px;
        height: 20px;
        margin-top: 15px;

        background: url('/f/images/intro_pc/menu_arrow.png') no-repeat center;
        background-size: contain;

        opacity: 0;
        transform: translateY(15px);
        transition: opacity 0.8s ease, transform 0.45s ease;
        pointer-events: none;
    }
	
	/* 마우스 오버 시 글자 위로 이동 */
    .mainArea li:hover a > span,
    .mainArea li:hover a > h2 {
        transform: translateY(-12px);
    }

    /* 마우스 오버 시 화살표 나타남 */
    .mainArea li:hover a::after {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ----------  모바일 (860px 이하) ---------- */

@media (max-width: 860px) {

    /* 전체 레이아웃 */
    .site-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "header"
            "menu"
            "contact"
            "footer";
    }

    /* 헤더 */
    .headerArea .pc_logo,
    .headerArea p {
        display: none;
    }

    .headerArea .m_logo {
        display: block;
    }

    .headerArea .m_logo img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* 메뉴 */
    .mainArea {
        width: 100%;
        height: auto;
    }

    .mainArea ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
        height: auto;
    }

    .mainArea li a {
        padding: 10% 0; /* 메뉴 개수에 따라 상하 여백 별도 지정 */
    }
	
	.mainArea li span {
		padding: 1.8% 2.5%;
		font-size:2.5vw;
	}

    .mainArea li h2 {
        margin-top: 5px; /* 메뉴 개수에 따라 상단 여백 별도 지정 */
		font-size: 6.5vw;
		line-height: 1.2;
    }

    /* 연락처 */
    .contactArea a {
        font-size: 6vw;
    }

    .contactArea a.kakao em {
        padding-left: 10%;
    }
	
	.contactArea a.naver em {
        padding-left: 13%;
    }
}