
body {
    font-family: 'Escoredream';
}


/*---------------------- PC 인트로 ----------------------*/

.wrap.intro2 {
    position:relative;
    min-width:1905px;
    width:100%;
    z-index:10;
}

.wrap.intro2 .leftArea {
    position:relative;
    float:left;
    width:15.8%;
    height:100%;
    background:#fff;
    z-index:2;
}

.wrap.intro2 .leftArea .top img {
    width:100%;
}

.wrap.intro2 .leftArea .contact {
    padding-bottom:30px;
    text-align:center;
}

.wrap.intro2 .leftArea .contact a {
    width:80%;
    margin:0 auto 5px auto;
    display:block;
}

.wrap.intro2 .leftArea .contact a img {
    width:100%;
}

.wrap.intro2 .leftArea .bottom {
    margin:0 auto;
    padding:30px 0;
    border-top:1px solid #d3d1d0;
    text-align:center;
}

.wrap.intro2 .leftArea .bottom a {
    height:26px;
    padding:0 8px;
    margin-bottom:20px;
    border:1px solid #a2968d;
    border-radius:13px;
    font-size:0.8em;
    color:#a2968d;
    line-height:26px;
    display:inline-block;
}

.wrap.intro2 .leftArea .bottom p {
    width:80%;
    margin:0 auto;
}

.wrap.intro2 .leftArea .bottom p img {
    width:100%;
}

.wrap.intro2 .rightArea {
    float:left;
    position:relative;
    width:84.2%;
    height:100%;
    background:#fff;
    overflow:hidden;
}

.wrap.intro2 .rightArea .menu {
    position:relative;
    width:100%;
    height:100%;
    z-index:10;
    overflow:hidden;
}

/* 이미지형 메뉴도 4열 × 2행 (8개)으로 배치 */
.wrap.intro2 .rightArea .menu ul {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    grid-template-rows:repeat(2, minmax(0, 1fr));
    width:100%;
    height:100%;
}

.wrap.intro2 .rightArea .menu ul li {
    float:none;
    width:auto;
    height:auto;
    min-width:0;
    box-sizing:border-box;
    border-right:1px solid rgba(255,255,255,0.3);
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
}

.wrap.intro2 .rightArea .menu ul li:nth-child(-n+4) {
    border-bottom:1px solid rgba(255,255,255,0.3);
}

.wrap.intro2 .rightArea .menu ul li:nth-child(4n) {
    border-right:none;
}

.wrap.intro2 .rightArea .menu ul li a {
    width:65%;
    margin:0 auto;
    padding-bottom:30%;
    background:url(/images/intro_pc/menu_arrow.png) no-repeat bottom center / 50%;
    display:block;
}

.wrap.intro2 .rightArea .menu ul li a img {
    width:100%;
}

.wrap.intro2 .rightArea .intro_visual {
    overflow:hidden;
    z-index:5;
}


/*---------------------- PC 인트로 텍스트 처리 ----------------------*/

/* 텍스트 상단 */

.wrap.intro2 .leftArea .top2 {
    position:relative;
    width:100%;
    height:0;
    padding-bottom:200%;
    background:url(/images/intro_pc/left_bg2.jpg) no-repeat top center;
    background-size:cover;
}

.wrap.intro2 .leftArea .top2 .logo {
    margin-top:5%;
}

.wrap.intro2 .leftArea .top2 h1 {
    color:#fff;
}

.wrap.intro2 .leftArea .top2 .logo a {
    width:60%;
    margin:0 auto;
    display:block;
}

.wrap.intro2 .leftArea .top2 p {
    padding-top:108%;
    width:100%;
    text-align:center;
    white-space:pre-line;
    font-size:clamp(1.3em, 1vw, 2em);
    line-height:120%;
    color:#555;
    font-family:'MaruBuri';
}

.wrap.intro2 .leftArea .top2 p span {
    font-family:'MaruBuriBold';
}

.wrap.intro2 .leftArea .top2 .logo a img {
    width:100%;
}


/* 텍스트 연락처 */

.wrap.intro2 .leftArea .contact2 {
    margin-bottom:20px;
}

.wrap.intro2 .leftArea .contact2 a {
    width:85%;
    margin:0 auto;
    padding:4% 0;
    margin-bottom:2%;
    text-align:center;
    font-weight:200;
    font-size:clamp(1.2em, 1vw, 1.5em);
    display:block;
}

.wrap.intro2 .leftArea .contact2 a.tel span {
    display:inline-block;
    padding-left:10px;
    font-weight:500;
}

.wrap.intro2 .leftArea .contact2 a.tel2 span {
    display:inline-block;
    padding-left:10px;
    font-weight:500;
}

.wrap.intro2 .leftArea .contact2 a.kakao em {
    padding-left:30px;
    background:url(/images/intro_pc/icon_naver.png) no-repeat left center;
    background-size:contain;
}


/* 텍스트 푸터 */

.wrap.intro2 .leftArea .bottom p.text {
    width:100%;
    font-size:0.3em;
    font-weight:300;
    line-height:1.5;
    color:#888;
    white-space:pre-line;
}


/* =========================================================
   PC 텍스트 메뉴 : 총 8개 (가로 4개 × 세로 2줄)
   ========================================================= */

.wrap.intro2 .rightArea .menu2 {
    position:relative;
    width:100%;
    height:100%;
    z-index:10;
    overflow:hidden;
}

/* 4열 2행으로 균등 배치 */
.wrap.intro2 .rightArea .menu2 ul {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    grid-template-rows:repeat(2, minmax(0, 1fr));
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.wrap.intro2 .rightArea .menu2 ul li {
    float:none;
    width:auto;
    height:auto;
    min-width:0;
    box-sizing:border-box;
    border-right:1px solid rgba(255,255,255,0.3);
    text-align:center;
}

/* 첫째 줄 아래 가로 구분선 */
.wrap.intro2 .rightArea .menu2 ul li:nth-child(-n+4) {
    border-bottom:1px solid rgba(255,255,255,0.3);
}

/* 4번째, 8번째 메뉴의 우측 구분선 제거 */
.wrap.intro2 .rightArea .menu2 ul li:nth-child(4n) {
    border-right:none;
}

/* 영문 + 한글 + 화살표를 각 칸 중앙에 정렬 */
.wrap.intro2 .rightArea .menu2 ul li a {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
    margin:0;
    padding:12px 8px;
    box-sizing:border-box;
    color:#fff;
    text-align:center;
    text-decoration:none;
    background:none;
}

/* 영문 박스 */
.wrap.intro2 .rightArea .menu2 ul li a span {
    position:relative;
    top:0;
    padding:6px 12px;       /* 컬러 박스 상하 / 좌우 크기 */
    text-transform:uppercase;
    font-size:12px;         /* 영문 글자 크기 */
    letter-spacing:0.05em;
    font-weight:300;
    line-height:1.2;
    display:inline-block;
	width:180px;
	box-sizing:border-box;
}

/* 한글 메뉴명 : margin-top으로 영문과의 간격 조정 */
.wrap.intro2 .rightArea .menu2 ul li a h2 {
    position:relative;
    top:0;
    margin-top:25px;
    white-space:pre-line;
    font-size:clamp(2.6em, 2.2vw, 3.5em);
    font-weight:600;
    line-height:1.3;
    display:block;
}

/* 화살표 : margin-top으로 한글과의 간격 조정 */
.wrap.intro2 .rightArea .menu2 ul li a::after {
    content:"";
    display:block;
    flex:0 0 auto;
    width:75px;
    height:26px;
    margin-top:30px;
    background:url(/images/intro_pc/menu_arrow.png) no-repeat center / contain;
}


/*---------------------- MOBILE 인트로 ----------------------*/

.wrap.intro2_m .logoArea {
    width:100%;
}

.wrap.intro2_m .logoArea img {
    width:100%;
}

.wrap.intro2_m .menuArea {
    position:relative;
    width:100%;
    background:#574d43;
    overflow:hidden;
    z-index:10;
}

.wrap.intro2_m .menuArea .menu {
    position:relative;
    width:100%;
    z-index:10;
    overflow:hidden;
}

.wrap.intro2_m .menuArea .menu ul li {
    float:left;
    width:50%;
    height:0;
    padding-bottom:52%;
    border-right:1px solid rgba(255,255,255,0.3);
    border-bottom:1px solid rgba(255,255,255,0.3);
}

.wrap.intro2_m .menuArea .menu ul li a {
    width:70%;
    margin:0 auto;
    display:block;
}

.wrap.intro2_m .menuArea .menu ul li a img {
    margin-top:38%;
    width:100%;
}

.wrap.intro2_m .menuArea #slideshow .intro_visual span {
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.wrap.intro2_m .bottomArea {
    width:90%;
    margin:40px auto;
}

.wrap.intro2_m .bottomArea a {
    margin-bottom:15px;
    display:block;
}

.wrap.intro2_m .bottomArea a img {
    width:100%;
}


/*---------------------- MOBILE 인트로 텍스트 처리 ----------------------*/

.wrap.intro2_m .menuArea .menu2 {
    position:relative;
    width:100%;
    z-index:10;
    overflow:hidden;
}

.wrap.intro2_m .menuArea .menu2 ul li {
    float:left;
    width:50%;
    height:0;
    padding-bottom:40%;   /* 모바일 메뉴 높이와 여백 줄이기 */
    border-right:1px solid rgba(255,255,255,0.3);
    border-bottom:1px solid rgba(255,255,255,0.3);
    text-align:center;
}


/* 모바일 텍스트 메뉴 : 총 8개, 가로 2개 × 세로 4줄 */
/* width:50%를 정확하게 맞추기 위한 박스 크기 설정 */
.wrap.intro2_m .menuArea .menu2 ul li {
    box-sizing:border-box;
}

.wrap.intro2_m .menuArea .menu2 ul li:nth-child(2n) {
    border-right:none;
}


.wrap.intro2_m .menuArea .menu2 ul li a {
    width:70%;
    margin:20% auto 0 auto; /* 모바일 메뉴 높이와 여백 줄이기 */
    color:#fff;
    display:block;
}

.wrap.intro2_m .menuArea .menu2 ul li a span {
    width:70%;
    box-sizing:border-box;
    padding:4px 2px;
    text-transform:uppercase;
    font-size:1.8vw;
    letter-spacing:0.05em;
    font-weight:300;
    line-height:1.2;
    text-align:center;
    white-space:nowrap;
    display:inline-block;
}

.wrap.intro2_m .menuArea .menu2 ul li a h2 {
    margin-top:10%; /* 모바일 메뉴 높이와 여백 줄이기 */
    white-space:pre-line;
    font-size:6.0vw;
    font-weight:600;
    line-height:1.2;
    display:block;
}

.wrap.intro2_m .bottomArea2 {
    width:90%;
    margin:40px auto;
}

.wrap.intro2_m .bottomArea2 a {
    width:100%;
    margin:0 auto;
    padding:6% 0;
    margin-bottom:2%;
    text-align:center;
    font-weight:200;
    font-size:6vw;
    display:block;
}

.wrap.intro2_m .bottomArea2 a.tel span {
    display:inline-block;
    padding-left:10px;
    font-weight:500;
}

.wrap.intro2_m .bottomArea2 a.tel2 span {
    display:inline-block;
    padding-left:10px;
    font-weight:500;
}

.wrap.intro2_m .bottomArea2 a.kakao em {
    padding-left:10%;
    background:url(/images/intro_pc/icon_naver.png) no-repeat left center;
    background-size:contain;
}


/*---------------------- 메뉴 영문 박스 컬러 ----------------------*/

.wrap.intro2 .rightArea .menu2 ul li:nth-child(1) a span,
.wrap.intro2_m .menuArea .menu2 ul li:nth-child(1) a span {
    background:#6ac1ef;
}

.wrap.intro2 .rightArea .menu2 ul li:nth-child(2) a span,
.wrap.intro2_m .menuArea .menu2 ul li:nth-child(2) a span {
    background:#aebf1d;
}

.wrap.intro2 .rightArea .menu2 ul li:nth-child(3) a span,
.wrap.intro2_m .menuArea .menu2 ul li:nth-child(3) a span {
    background:#967132;
}

.wrap.intro2 .rightArea .menu2 ul li:nth-child(4) a span,
.wrap.intro2_m .menuArea .menu2 ul li:nth-child(4) a span {
    background:#008A9A;
}

.wrap.intro2 .rightArea .menu2 ul li:nth-child(5) a span,
.wrap.intro2_m .menuArea .menu2 ul li:nth-child(5) a span {
    background:#1a5cb6;
}

.wrap.intro2 .rightArea .menu2 ul li:nth-child(6) a span,
.wrap.intro2_m .menuArea .menu2 ul li:nth-child(6) a span {
    background:#FF529D;
}


.wrap.intro2 .rightArea .menu2 ul li:nth-child(7) a span,
.wrap.intro2_m .menuArea .menu2 ul li:nth-child(7) a span {
    background:#00ca6e;
}

.wrap.intro2 .rightArea .menu2 ul li:nth-child(8) a span,
.wrap.intro2_m .menuArea .menu2 ul li:nth-child(8) a span {
    background:#FF5028;
}


/*---------------------- 연락처 박스 컬러 ----------------------*/

.wrap.intro2 .leftArea .contact2 a.tel,
.wrap.intro2_m .bottomArea2 a.tel {
    color:#fff;
    background:#5f8fa9;
}
.wrap.intro2 .leftArea .contact2 a.tel2,
.wrap.intro2_m .bottomArea2 a.tel2 {
    color:#fff;
    background:#DE4A94;
}

.wrap.intro2 .leftArea .contact2 a.kakao,
.wrap.intro2_m .bottomArea2 a.kakao {
    background:#00c73c;
}

/* 메인 메뉴 마우스 오버 시 어둡게 */
.menu2 li { position: relative; }

.menu2 li::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);  /* 어두운 정도: 0.2(살짝) ~ 0.5(진하게) */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;              /* 클릭 방해 안 하게 */
    z-index: 1;
}

.menu2 li:hover::after { opacity: 1; }

/* 글자·라벨이 어두운 막 위에 보이도록 */
.menu2 li > * { position: relative; z-index: 2; }