@charset "euc-kr";
/*
 * 문의하기 페이지 전용 CSS
 * 대상 : /russel/info/csmail/write.asp
 *
 * [역할 구분]
 * 이 파일은 본문 인사말 영역만 담당합니다.
 *
 * [클래스 접두어]
 * .rwc- : 문의하기 페이지 본문 전용 접두어입니다.
 *
 * [구성]
 * 1. 인사말 영역
 *    1-1. 영역·컨테이너
 *    1-2. 인사말 박스
 *    1-3. 인사말 본문
 *    1-4. 원장 이미지
 *    1-5. 문의하기 버튼
 * 2. 반응형
 *    2-1. 타블렛
 *    2-2. 모바일
 *
 * [수정 시 주의]
 * 선택자 순서가 우선순위에 영향을 주므로 구획은 주석으로만 구분했습니다.
 * 규칙을 다른 구획으로 옮기거나 재정렬하지 마세요.
 */

/* ==========================================================================================================================================
	1. 인사말 영역
========================================================================================================================================== */

/* ==================================================
	1-1. 영역·컨테이너 : 페이지 본문 폭과 좌우·하단 여백
================================================== */
.csmail-write .rwc {width:100%;background:#fff}
.rwc-inner {width:100%;max-width:1200px;margin:0 auto;padding:0 20px 50px;box-sizing:border-box}
/* // 1-1. 영역·컨테이너 */

/* ==================================================
	1-2. 인사말 박스 : 인사말·이미지·버튼을 감싸는 회색 박스와 배경 그래픽
	원장 사진이 없는 캠퍼스는 .rwc-box--noimg 를 함께 사용합니다. (ASP 에서 분기)
================================================== */
.rwc-box {position:relative;display:flex;flex-direction:column;gap:32px;align-items:center;background:#f2f5fc;border-radius:8px;padding:40px;overflow:hidden}
.rwc-box--noimg {padding-bottom:32px}
.rwc-box-bg {position:absolute;right:-276px;bottom:-134px;width:819px;height:717px;pointer-events:none;line-height:0}
.rwc-box--noimg .rwc-box-bg {bottom:-240px}
.rwc-box-bg svg {display:block;width:100%;height:100%}
/* // 1-2. 인사말 박스 */

/* ==================================================
	1-3. 인사말 본문 : 원장 인사말 텍스트 영역
	.rwc-row 는 인사말과 원장 이미지를 나란히 배치하는 행입니다.
	캠퍼스별 문구는 ASP 에서 출력하며 문단은 p 로 구분합니다.
================================================== */
.rwc-row {display:flex;align-items:flex-end;width:100%;padding-right:20px;border-bottom:1px solid rgba(193,204,222,0.4);box-sizing:border-box}
.rwc-greet {flex:1 0 0;min-width:0;padding-bottom:32px}
.rwc-greet-name {margin:0 0 24px;font-weight:700;font-size:24px;line-height:32px;letter-spacing:-0.48px;color:#333}
.rwc-greet-name .pt {color:#2c5bf6}
.rwc-greet-body {font-size:16px;line-height:24px;letter-spacing:-0.16px;color:#555}
.rwc-greet-body p {margin:0}
.rwc-greet-body p + p {margin-top:24px}
/* // 1-3. 인사말 본문 */

/* ==================================================
	1-4. 원장 이미지 : 캠퍼스별 원장 사진
	사진이 있는 캠퍼스는 .rwc-media-photo, 없는 캠퍼스는 .rwc-media-empty 를 출력합니다.
================================================== */
.rwc-media {flex-shrink:0;width:226px;height:316px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.rwc-media picture {display:contents}
.rwc-media-photo {display:block;width:auto;height:316px;object-fit:contain;z-index:1}
.rwc-media-empty {display:block;margin-top:0;margin-bottom:auto;object-fit:contain;z-index:1}
/* // 1-4. 원장 이미지 */

/* ==================================================
	1-5. 문의하기 버튼 : 팝업을 여는 버튼
	data-board-layer-open 으로 공통 스크립트(board.js)가 레이어를 엽니다.
================================================== */
.rwc-cta {position:relative;width:200px;height:42px;background:#2c5bf6;border:0;border-radius:6px;color:#fff;font-weight:600;font-size:15px;line-height:22px;letter-spacing:-0.15px;cursor:pointer}
/* // 1-5. 문의하기 버튼 */

/* ==========================================================================================================================================
	2. 반응형
========================================================================================================================================== */

/* ==================================================
	2-1. 타블렛 : 본문 여백과 배경 그래픽 위치만 보정
================================================== */
@media (max-width:1199px) {
	/* 1-1. 영역·컨테이너 */
	.rwc-inner {padding:0 24px 60px}

	/* 1-2. 인사말 박스 */
	.rwc-box-bg {right:-316px;bottom:-38px}
	.rwc-box--noimg .rwc-box-bg {bottom:-118px}

	/* 1-3. 인사말 본문 */
	.rwc-row {padding-right:0}
}
/* // 2-1. 타블렛 */

/* ==================================================
	2-2. 모바일 : 박스 여백 제거, 원장 이미지 우하단 고정, 버튼 축소
================================================== */
@media (max-width:767px) {
	/* 1-1. 영역·컨테이너 */
	.rwc-inner {padding:20px 16px 32px}

	/* 1-2. 인사말 박스 */
	.rwc-box {gap:0;padding:0;align-items:stretch}
	.rwc-box--noimg {padding-bottom:0}
	.rwc-box-bg {right:-175px;bottom:-112px;width:480px;height:420px}
	.rwc-box--noimg .rwc-box-bg {bottom:-155px}

	/* 1-3. 인사말 본문 */
	.rwc-row {display:block;padding:24px 16px;border-bottom:0}
	.rwc-greet {padding-bottom:0}
	.rwc-box:not(.rwc-box--noimg) .rwc-greet {padding-right:8px}
	.rwc-greet-name {margin:0 0 12px;font-weight:600;font-size:18px;line-height:26px;letter-spacing:-0.36px}
	.rwc-greet-body {font-size:14px;line-height:20px;letter-spacing:-0.14px}
	.rwc-greet-body p + p {margin-top:20px}
	.rwc-greet-body p:nth-last-of-type(-n+2) {box-sizing:border-box}

	/* 1-4. 원장 이미지 : 박스 우하단에 절대 배치 */
	.rwc-media {position:absolute;right:0;bottom:0;width:140px;height:167px}
	.rwc-media-photo {height:167px}
	.rwc-media-empty {height:167px;margin:auto}

	/* 1-5. 문의하기 버튼 */
	.rwc-cta {align-self:flex-start;width:148px;height:38px;padding:0;border-radius:4px;font-size:14px;line-height:22px;letter-spacing:-0.14px;margin:0 16px 24px}
	.rwc-box--noimg .rwc-cta {width:160px}

	/* 기타 : 현재 write.asp 마크업에는 없는 선택자이며 사용처 확인 전까지 보존합니다. */
	.alarm {margin-bottom:16px}
}
/* // 2-2. 모바일 */
