/* =============================================================
   sub.css — VMS 서브페이지 전용 스타일
   -------------------------------------------------------------
   * 원본은 회사 메인 홈페이지 서브페이지 CSS를 그대로 가져온 파일이라
     회사소개(subVisual/about/history/outline), 문의하기(support), 제품/프로젝트
     소개(product/projects/fifa4/related 등), 팝업뷰어(viewPop), 오시는길(locate),
     각종 테이블/페이지네이션(defalutTable/simTable/pager) 등 VMS와 무관한
     회사 홈페이지 전용 컴포넌트 스타일이 대량으로 섞여 있었습니다.
   * VMS 페이지(방문신청/방문조회/약관동의/개인정보취급방침 등)에 실제로
     쓰이는 선택자만 남기고 나머지는 모두 제거했습니다.
   ============================================================= */

/* ---------- 1. 서브페이지 헤더 (항상 색이 있는 헤더) ---------- */
.header {background-color: var(--mainColor); border-bottom: .1rem solid #eee}
.header .header__allWrap div {background-color: #fff}
.header .header__lang {border-color: #eee; color: #fff}
.header .header__lang.openLang .header__langLink:first-child::after {content: ""; background-color: #eee}
.header .header__langBtn {color: #fff}
.header .header__langBtn::before {background: url(../images/common/lang.png) no-repeat center/cover}
.header .header__menu > li > a {color: #fff}
.header .header__menu > li:hover > a {color: #fff}

/* ---------- 2. 공통 레이아웃 헬퍼 ---------- */
.sub_center {width: 95%; max-width: 108rem; margin-inline: auto}
.img_r10 {border-radius: var(--gap-10);}
.mflex {display: flex; flex-direction: column; min-height: 100vh; margin: 0;}
.mflexcon { flex: 1; }
.vms_mt { margin-top: var(--headerHeight);	}

/* ---------- 3. 메인(index) 페이지 ---------- */
.vms_t {display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.4rem ;}
.wms_dl {background:#e0e0e0; border-radius: var(--gap-10); padding:var(--gap-30) var(--gap-40); ;}
.wms_dl dt {font-size: var(--fs-28); font-weight: 600; margin-bottom: var(--gap-15) }
.wms_dl dd {font-size: var(--fs-20); font-weight: 300 }

.vms_mb {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem ; margin:1.4rem 0;}
/* 아래 vms_mb__* 는 현재 마크업에서는 미사용이나(카드형 목록 확장 대비 예약 클래스), 위험 없이 유지합니다 */
.vms_mb__cell {text-align: center; border: .1rem solid #ddd; border-radius: var(--gap-10); overflow: hidden; position: relative}
.vms_mb__cell:after {content: ""; display: block; padding-bottom: 20% }
.vms_mb__cell a {display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0}
.vms_mb__thum {position: relative; width: 73.4649122807%; max-width: 33.5rem; margin-inline: auto }
.vms_mb__thum::after {content: ""; display: block; padding-bottom: 100%}
.vms_mb__thum img { position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%)}
.vms_mb__name {font-size: clamp(1.2rem, 2vw, 2.3rem); font-weight: 600; color: #111; text-align: center; margin: var(--gap-15) auto 0 auto; width: 73.4649122807%; max-width: 33.5rem; word-break: break-all}
.vms_mb__b {font-size: clamp(2.0rem, 4vw, 3.5rem); font-weight: 800; color: #fff; background-color:var(--mainColor); margin: var(--gap-10) auto 0 auto; text-align: center; width: 73.4649122807%; max-width: 33.5rem; word-break: break-all}

/* ---------- 4. 약관동의 / 개인정보취급방침 / 영업비밀서약서 ---------- */
.pageDl {color: #000; line-height: 1.2 }
.pageDl dt {font-size: var(--fs-40); font-weight: 700; margin-bottom: var(--gap-15) }
.pageDl dd {font-size: var(--fs-23); font-weight: 500 }
.vmsDl {color: #333; line-height: 1.2 }
.vmsDl dt {font-size: var(--fs-30); font-weight: 700; margin-bottom: var(--gap-15) }
.vmsDl dd {font-size: var(--fs-18); font-weight: 500; color:#444; }
.agree_top { height:110px; width:100%; border:solid 1px #888; border-radius: var(--gap-5); overflow-y:scroll; }
.fr_top { width:100%; padding: 2rem; }

/* ---------- 5. 방문신청 단계 표시(Step) / 버튼 ---------- */
.vms_re {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem ; margin:0.5rem 0;}
.clean-btn {font-size: clamp(2.2rem, 3.5vw, 4.5rem); font-weight: 500; padding: var(--gap-30) 0; border: none; cursor: pointer; width: 100%; border-radius: var(--gap-10); transition: background-color 0.2s ease; text-align: center; word-break: break-all}
.clean-btn a {display: block; width: 100%; height: 100%; align-items: center; justify-content: center; text-decoration: none;}
.vms-btn {font-size: clamp(1.6rem, 2vw, 2.2rem); font-weight: 500; padding: var(--gap-20) 0; border: none; cursor: pointer; width: 25%; border-radius: var(--gap-40); transition: background-color 0.2s ease; text-align: center; word-break: break-all}
.vms-btn a {display: block; width: 100%; height:auto; align-items: center; justify-content: center; text-decoration: none;}
.vms-btn02 {font-size: clamp(1.6rem, 2vw, 2.2rem); font-weight: 500; padding: var(--gap-20) 0; border: none; cursor: pointer; width: 45%; border-radius: var(--gap-40); transition: background-color 0.2s ease; text-align: center; word-break: break-all}
.vms-btn02 a {display: block; width: 100%; height:auto; align-items: center; justify-content: center; text-decoration: none;}
.clean-re {font-size: clamp(1.6rem, 1.8vw, 2rem); font-weight: 600; padding: 1.5rem 0; border: none; width: 100%; border-radius: var(--gap-10); transition: background-color 0.2s ease; text-align: center; word-break: break-all}
.cell_blue {color: #fff; background-color: var(--mainColor)	}
.cell_blue:hover { background-color: #2273c1;}
.cell_bgray {color: #fff; background-color:#2d2d2d}
.cell_bgray:hover { background-color: #000;}
.cell_gray {color: #000; background-color: #fff; border: solid 1px #D1D1D1;	}
.cell_gray:hover { background-color: #ebebeb;}

@media screen and (min-width: 960px) {
    .agree_top { height:200px;}
    .vms-btn02 {width: 30%;}
    .vms_t {grid-template-columns: repeat(2, 1fr)}
	.vms_re {grid-template-columns: repeat(3, 1fr) }
	.vms_mb {grid-template-columns: repeat(2, 1fr) }
	.vms_mb__cell:hover {	border-color: var(--mainColor)	}
	.vms_mb__cell:hover a:after {	display: block	}
	.vms_mb__cell a:after {content: ""; position: absolute; width: 6rem; height: 6rem; right: var(--gap-20); bottom: var(--gap-20); display: none}
}