@charset "utf-8";

/*
 * ============================================================================
 * 대구개인택시조합 웹사이트 메인 스타일시트 (style.css)
 * ----------------------------------------------------------------------------
 * 담당 범위:
 *  - 메인 페이지: 슬라이드 배너 / 공지사항 / 바로가기 / 상담 영역 / 통합 퀵바
 *  - 서브 페이지 공통: 제목·소제목·인트로·구분선 등 공통 요소
 *  - 로그인 / 회원가입 폼 (차량번호 분할 입력 포함)
 *  - 인사말 / 조합연혁 / 조직구성 / 부서안내 / 임원현황 / 찾아오시는 길
 *  - 업무 관련 표·자료(유가보조금/면허매매/양도양수/충전소·제휴/교통안전)
 *  - 조합원광장(정관) / 영상교육자료실(유튜브 게시판 그리드)
 *  - 각 영역별 모바일 반응형(@media max-width:500px) 오버라이드
 * 비고: 모바일은 vw 단위로 화면 폭에 비례해 크기를 조절함.
 *       색상/메인색은 CSS 변수(--main-color, --sub-color 등) 사용.
 * ============================================================================
 */

/******************************  메인 페이지  ******************************/
/* ===== 메인 배너(슬라이드) 영역 시작 ===== */
/* 슬라이드 영역 컨테이너: dots·화살표 버튼을 절대배치하기 위한 기준(relative) */
#main_slide_area {
	position: relative;
}

/* 슬라이드 래퍼(slick 슬라이더 루트) - 별도 스타일 없음 */
#main_slide_area .main_slide {}

/* 개별 슬라이드 한 장: 배경 이미지를 cover로 꽉 채워 표시 */
#main_slide_area .main_slide .item {
	height: auto;
	font-size: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* PC용 슬라이드 이미지: 가로 100%로 꽉 채움 */
#main_slide_area .main_slide .item > img.pc {
	display: block;
	width: 100%;
}

/* 슬라이드 하단 페이지 표시 점(dots) 묶음 - 가운데 정렬 */
#main_slide_area .dots {
	position: absolute;
	bottom: 30px;
	left: 0;
	width: 100%;
	text-align: center;
}

/* dot 한 개: 가로로 나란히 배치 */
#main_slide_area .dots li {
	display: inline-block;
	margin: 0 3px;
}

/* 현재 활성 슬라이드의 dot: 메인색으로 채움 */
#main_slide_area .dots li.slick-active button {
	background: var(--main-color);
}

/* dot 버튼 모양: 메인색 테두리의 흰 원형(텍스트는 숨김) */
#main_slide_area .dots li button {
	width: 15px;
	height: 15px;
	border: 1px solid var(--main-color);
	background: #fff;
	border-radius: 50%;
	font-size: 0px;
}

/* 좌/우 이동 화살표 버튼 공통: 세로 중앙(높이의 절반-35px)에 배치 */
#main_slide_area .main_slide_btn {
	position: absolute;
	top: calc(50% - 35px);
	cursor: pointer;
}

/* 이전(왼쪽) 화살표 위치 */
#main_slide_area .main_slide_btn.prev {
	left: 60px;
}

/* 다음(오른쪽) 화살표 위치 */
#main_slide_area .main_slide_btn.next {
	right: 60px;
}

/* 슬라이드 위에 얹는 큰 타이틀 텍스트(흰색+그림자) */
#main_slide_area .title {
	position: absolute;
	top: 122px;
	left: 160px;
	font-size: 70px;
	font-weight: 500;
	text-shadow: 3px 3px 6px #00000066;
	color: #fff;
	line-height: 1.15;
}

/* 타이틀 내 강조(메인색 계열) 단어: 더 크고 굵게 */
#main_slide_area .title .fc-main {
	font-size: 74px;
	font-weight: 700;
}


/* ----- [모바일] 메인 배너 오버라이드 (화면폭 500px 이하) ----- */
@media screen and (max-width:500px) {
	/* 슬라이드 높이를 줄여 배너 하단 여백을 크롭(바로가기와 간격 축소). 원본 비율 105.2vw → 92vw */
	#main_slide_area .main_slide .item {
		height: 92vw;
		overflow: hidden;
	}

	/* dots를 하단에 더 가깝게 */
	#main_slide_area .dots {
		bottom: 2.9vw;
	}

	/* dot 크기를 화면폭 비례로 축소 */
	#main_slide_area .dots li button {
		width: 2vw;
		height: 2vw;
	}

	/* 화살표 버튼 크기·세로위치를 vw로 조정 */
	#main_slide_area .main_slide_btn {
		top: calc(50% - 3.5vw);
		width: 7vw;
	}

	/* 이전 화살표 좌측 여백 축소 */
	#main_slide_area .main_slide_btn.prev {
		left: 3vw;
	}

	/* 다음 화살표 우측 여백 축소 */
	#main_slide_area .main_slide_btn.next {
		right: 3vw;
	}

	/* 타이틀 위치·크기·그림자를 모바일에 맞게 축소 */
	#main_slide_area .title {
		top: 17.4vw;
		left: 6vw;
		font-size: 5vw;
		text-shadow: 3px 3px 1vw #00000066;
	}

	/* 타이틀 강조 단어 모바일 크기 */
	#main_slide_area .title .fc-main {
		font-size: 5.8vw;
	}
}


/* ===== 메인 공지사항 영역 시작 ===== */
/* 공지사항 영역 배경: 연한 배경색 + 좌상단 로고 워터마크 */
#main_notice_area {
	padding: 58px 0;
	background: #F6F9F8 url('/images/bg_logo.png') no-repeat top 28px left 13px / 497px;
}

/* 공지+메뉴 박스를 좌우로 배치(양끝 정렬) */
#main_notice_area .sector {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* 왼쪽 공지사항 목록 박스 (고정폭 + 오른쪽 여백) */
#main_notice_area .main_notice_box {
	width: 812px;
	margin-right: 110px;
}

/* 공지 영역 제목: 하단에 진녹색 굵은 밑줄 */
#main_notice_area .main_notice_box .main_title {
	padding-bottom: 18px;
	border-bottom: 4px solid #3D7E5B;
	font-size: 36px;
	font-weight: 600;
}

/* 제목 내 강조 단어: 더 크고 굵게 */
#main_notice_area .main_notice_box .main_title .fc-main {
	font-size: 44px;
	font-weight: 700;
}

/* 제목 오른쪽 '더보기' 링크(화살표 아이콘 포함) */
#main_notice_area .main_notice_box .main_title .more {
	display: inline-block;
	float: right;
	margin-top: 30px;
	padding-right: 10px;
	background: url('/images/more_arrow.png') no-repeat center right / 6px;
	font-size: 16px;
	font-weight: 400;
	color: #666666;
}

/* 공지 목록 컨테이너 */
#main_notice_area .main_notice_box .main_notice {
	margin-top: 10px;
}

/* 공지 한 줄: 제목(좌)·날짜(우) 양끝 정렬 + 하단 구분선 */
#main_notice_area .main_notice_box .main_notice > li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 26px 0;
	border-bottom: 1px solid #BBBBBB;
}

/* 공지 제목 텍스트 */
#main_notice_area .main_notice_box .main_notice > li .title {
	font-weight: 500;
}

/* 공지 날짜 텍스트(회색·얇게) */
#main_notice_area .main_notice_box .main_notice > li .date {
	font-weight: 300;
	color: #8E8E8E;
}

/* 오른쪽 메뉴 박스: 전체폭에서 공지박스+여백(922px) 제외한 나머지 */
#main_notice_area .main_menu_box {
	width: calc(100% - 922px);
}

/* 메뉴 목록 컨테이너 - 별도 스타일 없음 */
#main_notice_area .main_menu_box .main_menu {}

/* 메뉴 카드 한 개: 좌측 아이콘(.mm_ico) + 텍스트(.mm_txt), 흰 반투명 카드(2열 그리드) */
#main_notice_area .main_menu_box .main_menu > li {
	display: flex;
	align-items: center;
	justify-content: left;
	float: left;
	width: 323px;
	height: 173px;
	margin-right: 31px;
	margin-bottom: 60px;
	background-color: #FFFFFF8C;
	border-radius: 10px;
	border: 1px solid #FFFFFF;
	box-sizing: border-box;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.4;
	color: #444444;
	transition: .2s;
	cursor: pointer;
}
/* 메뉴 카드 아이콘(좌측 별도 요소) - 기존 li 배경 아이콘과 동일 크기/위치 */
#main_notice_area .main_menu_box .main_menu > li .mm_ico {
	display: inline-block;
	width: 131px;
	height: 131px;
	margin: 0 9px 0 20px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
/* 메뉴 카드 라벨(우측) */
#main_notice_area .main_menu_box .main_menu > li .mm_txt {
	flex: 1;
}

/* 메뉴 카드 마우스 오버: 메인색 테두리 강조 */
#main_notice_area .main_menu_box .main_menu > li:hover {
	border: 1px solid var(--main-color);
}

/* 2열 그리드 - 각 행의 두 번째 카드는 오른쪽 여백 제거 */
#main_notice_area .main_menu_box .main_menu > li:nth-child(2n + 2) {
	margin-right: 0;
}

/* 마지막 행(4번째부터) 카드는 아래 여백 제거 */
#main_notice_area .main_menu_box .main_menu > li:nth-child(n + 4) {
	margin-bottom: 0;
}

/* ----- [모바일] 메인 공지사항 영역 오버라이드 ----- */
@media screen and (max-width:500px) {
	/* 패딩·배경 로고를 모바일용(m_bg_logo)으로 교체 */
	#main_notice_area {
		padding: 8vw 0;
		background: #F6F9F8 url('/images/m_bg_logo.png') no-repeat top 5.2vw left / 54.7vw;
	}

	/* 좌우 배치를 위→아래 세로 배치로 전환 */
	#main_notice_area .sector {
		display: block;
	}

	/* 공지 박스 전체폭 + 아래 여백 */
	#main_notice_area .main_notice_box {
		width: 100%;
		margin-right: 0;
		margin-bottom: 8vw;
	}

	/* 공지 제목 밑줄·글자 크기 모바일 조정 */
	#main_notice_area .main_notice_box .main_title {
		padding-bottom: 1.5vw;
		border-bottom: 2px solid #3D7E5B;
		font-size: 4vw;
	}

	/* 제목 강조 단어 모바일 크기 */
	#main_notice_area .main_notice_box .main_title .fc-main {
		font-size: 4.4vw;
	}

	/* '더보기' 링크 모바일 크기·아이콘 조정 */
	#main_notice_area .main_notice_box .main_title .more {
		margin-top: 2vw;
		padding-right: 2vw;
		background: url('/images/more_arrow.png') no-repeat center right / 1vw;
		font-size: 3vw;
	}

	/* 공지 목록 상단 여백 제거 */
	#main_notice_area .main_notice_box .main_notice {
		margin-top: 0;
	}

	/* 공지 한 줄 패딩 축소 */
	#main_notice_area .main_notice_box .main_notice > li {
		padding: 3vw 0;
	}
	/* 모바일 공지 제목: 한 줄 + 말줄임(...) */
	#main_notice_area .main_notice_box .main_notice > li .title {
		flex: 1;
		min-width: 0;
		padding-right: 3vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	/* 모바일 공지 날짜: 줄어들지 않게 고정 + 한 줄 */
	#main_notice_area .main_notice_box .main_notice > li .date {
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* 메뉴 박스 전체폭 */
	#main_notice_area .main_menu_box {
		width: 100%;
	}

	#main_notice_area .main_menu_box .main_menu {}

	/* 메뉴 카드를 모바일에서는 3열 카드로(흰 카드 + 좌측 아이콘 + 우측 라벨, 원형 없음) */
	#main_notice_area .main_menu_box .main_menu > li {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		float: left;
		width: 28vw;
		height: auto;
		min-height: 14vw;
		margin-right: 1.5vw;
		margin-bottom: 2vw;
		padding: 3vw 1.5vw;
		border-radius: 2vw;
		background-color: #fff;
		border: 1px solid #edf0f2;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
		font-size: 2.9vw;
		line-height: 1.3;
	}
	/* 아이콘: 원형 배경 없이 아이콘만(좌측) */
	#main_notice_area .main_menu_box .main_menu > li .mm_ico {
		width: 8vw;
		height: 8vw;
		margin: 0 1.5vw 0 0;
		background-size: contain;
	}
	/* 3열: 짝수(중간) 카드도 오른쪽 여백 유지(데스크톱 2열 규칙 무효화) */
	#main_notice_area .main_menu_box .main_menu > li:nth-child(2n + 2) {
		margin-right: 1.5vw;
	}
	/* 3열: 각 행 세 번째 카드만 오른쪽 여백 제거 */
	#main_notice_area .main_menu_box .main_menu > li:nth-child(3n + 3) {
		margin-right: 0;
	}
}


/* ===== 메인 바로가기 영역 시작 ===== */
/* 바로가기 섹션 상단 여백 */
#main_links_area {
	padding-top: 130px;
}

/* 바로가기 섹션 제목 */
#main_links_area .main_title {
	margin-bottom: 29px;
	font-size: 36px;
	font-weight: 600;
}

/* 제목 강조 단어 */
#main_links_area .main_title .fc-main {
	font-size: 44px;
	font-weight: 700;
}

/* 바로가기 카드들을 담는 둥근 테두리 박스(가로 flex) */
#main_links_area .main_links_box {
	display: flex;
	padding: 45px 0;
	border: 1px solid #BBBBBB;
	border-radius: 20px;
}

/* 바로가기 항목 1칸: 균등폭 + 오른쪽 구분선 */
#main_links_area .main_links_box .main_link {
	flex: 1;
	height: 185px;
	border-right: 1px solid #BBBBBB;
	text-align: center;
}

/* 마지막 항목은 오른쪽 구분선 제거 */
#main_links_area .main_links_box .main_link:last-child {
	border-right: 0;
}

/* 항목 버튼 - 별도 스타일 없음 */
#main_links_area .main_links_box .main_link button {}

/* 바로가기 아이콘 영역(배경 이미지) */
#main_links_area .main_links_box .main_link button .ico {
	position: relative;
	width: 205px;
	height: 163px;
	margin: 0 auto;
	margin-bottom: 5px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	transition: .2s;
}

/* 마우스 오버 시 아이콘 위로 10px 이동 */
#main_links_area .main_links_box .main_link button:hover .ico {
	transform: translateY(-10px);
}

/* 바로가기 라벨(오른쪽 화살표 아이콘 포함) */
#main_links_area .main_links_box .main_link button .title {
	display: inline-block;
	padding-right: 40px;
	background: url("/images/menu_arrow.png") no-repeat center right / 28px;
	font-size: 24px;
}

/* ----- [모바일] 메인 바로가기 영역 오버라이드 ----- */
@media screen and (max-width:500px) {
	/* 상단 여백 vw로 */
	#main_links_area {
		padding-top: 15vw;
	}

	/* 제목 크기 모바일 조정 */
	#main_links_area .main_title {
		margin-bottom: 1.5vw;
		font-size: 4vw;
	}

	/* 제목 강조 단어 모바일 크기 */
	#main_links_area .main_title .fc-main {
		font-size: 4.4vw;
	}

	/* 가로 flex → 블록(2x2 배치 기반)으로 전환 */
	#main_links_area .main_links_box {
		display: block;
		padding: 3.5vw;
		border-radius: 2vw;
	}

	/* 항목을 2열(각 50%)로 띄움 */
	#main_links_area .main_links_box .main_link {
		float: left;
		width: 50%;
		height: 16.8vw;
		box-sizing: border-box;
	}

	/* 1·3번째 항목 오른쪽 구분선(2열 사이 세로선) */
	#main_links_area .main_links_box .main_link:nth-child(1),
	#main_links_area .main_links_box .main_link:nth-child(3) {
		border-right: 1px solid #BBBBBB;
	}

	/* 1·2번째 항목 아래쪽 구분선(위·아래 행 사이 가로선) */
	#main_links_area .main_links_box .main_link:nth-child(1),
	#main_links_area .main_links_box .main_link:nth-child(2) {
		border-bottom: 1px solid #BBBBBB;
	}

	/* 2번째 항목은 오른쪽 구분선 제거(행 끝) */
	#main_links_area .main_links_box .main_link:nth-child(2) {
		border-right: 0;
	}

	/* 아이콘 크기 모바일 조정(정사각 10vw) */
	#main_links_area .main_links_box .main_link button .ico {
		width: 10vw;
		height: 10vw;
		margin-bottom: 0;
		background-size: cover;
	}

	/* 모바일 전용 아이콘 이미지 - 운수종사자 시험 */
	#main_links_area .main_links_box .main_link button .ico.exam {
		background-image: url('/images/m_taxi_exam_icon.png');
	}

	/* 모바일 전용 아이콘 - 운전자격시험 예약 */
	#main_links_area .main_links_box .main_link button .ico.reserve {
		background-image: url('/images/m_driver_test_icon.png');
	}

	/* 모바일 전용 아이콘 - 운수종사자 교육 */
	#main_links_area .main_links_box .main_link button .ico.check {
		background-image: url('/images/m_transport_education_icon.png');
	}

	/* 모바일 전용 아이콘 - 교통안전 */
	#main_links_area .main_links_box .main_link button .ico.center {
		background-image: url('/images/m_traffic_safety_icon.png');
	}

	/* 라벨을 블록으로 + 모바일 화살표 아이콘 */
	#main_links_area .main_links_box .main_link button .title {
		display: block;
		padding-right: 4vw;
		background: url("/images/m_menu_arrow.png") no-repeat center right / 3.5vw;
		font-size: 3.2vw;
		color: #000;
	}
}


/* ===== 메인 상담(전화 안내) 영역 시작 ===== */
/* 상담 영역 고정 높이 + 상단 여백 */
#main_contact_area {
	height: 260px;
	padding-top: 130px;
}

/* 시간 안내 박스(좌)와 전화번호 박스(우) 좌우 배치 */
#main_contact_area .sector {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* 상담 시간 안내 박스(전화 아이콘 배경 기준 relative) */
#main_contact_area .sector .main_time_box {
	position: relative;
	text-align: center;
}

/* 상담 안내 큰 제목 */
#main_contact_area .sector .main_time_box .title {
	display: block;
	position: relative;
	font-size: 44px;
	font-weight: 700;
	z-index: 1;
}

/* 상담 운영 시간 텍스트 */
#main_contact_area .sector .main_time_box .time {
	position: relative;
	font-size: 28px;
	font-weight: 500;
	z-index: 1;
}

/* 배경 전화 아이콘: 텍스트 뒤(z-index 0)에 절대배치 */
#main_contact_area .sector .main_time_box .tel_ico {
	position: absolute;
	top: -80px;
	left: -60px;
	z-index: 0;
}

/* 전화번호 카드 3개를 가로로 배치(고정폭) */
#main_contact_area .sector .main_tel_box {
	display: flex;
	width: 1120px;
	align-items: center;
	justify-content: space-between;
}

/* 전화번호 카드 1개 공통 모양 */
#main_contact_area .sector .main_tel_box .item {
	width: 340px;
	height: 167px;
	border-radius: 15px;
	text-align: center;
	color: #444444;
}

/* 1번째 카드 배경색(연녹) */
#main_contact_area .sector .main_tel_box .item:nth-child(1) {
	background: #E7F0EC;
}

/* 2번째 카드 배경색(연베이지) */
#main_contact_area .sector .main_tel_box .item:nth-child(2) {
	background: #F3EFE9;
}

/* 3번째 카드 배경색(연연두) */
#main_contact_area .sector .main_tel_box .item:nth-child(3) {
	background: #EEF3E6;
}

/* 카드 안내 제목(기관명 등) */
#main_contact_area .sector .main_tel_box .item .title {
	display: block;
	margin-top: 40px;
	margin-bottom: 15px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.45;
}

/* 3번째 카드는 제목이 2줄이라 위/아래 여백 별도 조정 */
#main_contact_area .sector .main_tel_box .item:nth-child(3) .title {
	margin-top: 25px;
	margin-bottom: 3px;
}

/* 카드 전화번호 텍스트(크게) */
#main_contact_area .sector .main_tel_box .item .tel {
	font-size: 40px;
	font-weight: 600;
}

/* ----- [모바일] 메인 상담 영역 오버라이드 ----- */
@media screen and (max-width:500px) {
	/* 고정 높이 해제 + 상하 여백 vw로 */
	#main_contact_area {
		height: auto;
		padding-top: 24.2vw;
		padding-bottom: 22.5vw;
	}

	/* 좌우 배치 → 세로 배치 */
	#main_contact_area .sector {
		display: block;
	}

	/* 시간 안내 박스 아래 여백 */
	#main_contact_area .sector .main_time_box {
		margin-bottom: 16.2vw;
	}

	/* 안내 제목 모바일 크기 */
	#main_contact_area .sector .main_time_box .title {
		font-size: 4.4vw;
	}

	/* 운영 시간 모바일 크기 */
	#main_contact_area .sector .main_time_box .time {
		font-size: 3.6vw;
	}

	/* 배경 전화 아이콘 위치·크기 모바일 재배치(가운데 위쪽) */
	#main_contact_area .sector .main_time_box .tel_ico {
		top: -8vw;
		left: 28.7vw;
		width: 26.5vw;
	}

	/* 전화 카드 묶음 세로 배치 + 전체폭 */
	#main_contact_area .sector .main_tel_box {
		display: block;
		width: 100%;
	}

	/* 카드를 가로 한 줄(제목 좌·번호 우)로 변경 */
	#main_contact_area .sector .main_tel_box .item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 12vw;
		margin-bottom: 2.5vw;
		border-radius: 1.5vw;
	}

	/* 카드 제목 모바일 크기·여백 */
	#main_contact_area .sector .main_tel_box .item .title {
		width: 40vw;
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 6vw;
		font-size: 3.2vw;
	}

	/* 3번째 카드 제목 여백 초기화(모바일은 동일 처리) */
	#main_contact_area .sector .main_tel_box .item:nth-child(3) .title {
		margin-top: 0;
		margin-bottom: 0;
	}

	/* 카드 전화번호 모바일 크기 */
	#main_contact_area .sector .main_tel_box .item .tel {
		margin-right: 4.5vw;
		font-size: 4vw;
	}
}


/******************************  서브 페이지  ******************************/
/* ===== 서브 공통 요소 (제목/소제목/인트로/구분선) ===== */
/* 서브 페이지 큰 제목(가운데 정렬) */
.sub_title {
	position: relative;
	margin-top: 130px;
	font-size: 44px;
	font-weight: 600;
	text-align: center;
}

/* 로그인 페이지일 때 제목 상단 여백 축소 */
.sub_title.login {
	margin-top: 40px;
}

/* 제목 텍스트 아래 서브색 밑줄(글자 폭만큼) */
.sub_title > span {
	display: inline-block;
	padding-bottom: 6px;
	border-bottom: 5px solid var(--sub-color);
}

/* 서브 소제목(가운데 정렬, 회색) */
.sub_stitle {
	display: block;
	margin-top: 40px;
	font-size: 36px;
	text-align: center;
	color: #444444;
}

/* 서브 소제목2(좌측 정사각 불릿이 붙는 제목) */
.sub_stitle2 {
	position: relative;
	padding-left: 40px;
	font-size: 36px;
	font-weight: 500;
}

/* 소제목2 앞 메인색 정사각 불릿 */
.sub_stitle2::before {
	display: block;
	position: absolute;
	top: 10px;
	left: 0;
	width: 20px;
	height: 20px;
	background: var(--main-color);
	content: "";
}

/* 서브 본문 인트로 문단 */
.sub_intro {
	margin-top: 28px;
	font-size: 28px;
	line-height: 1.4;
	color: #444444;
}

/* 굵은 막대 + 가는 선으로 된 장식 구분선 박스(상단 여백 확보) */
.line_box {
	position: relative;
	padding-top: 47px;
}

/* 구분선 두 요소 공통(절대배치) */
.line_box::before,
.line_box::after {
	display: block;
	position: absolute;
	content: "";
}

/* 왼쪽 굵은 서브색 막대 */
.line_box::before {
	top: 0;
	left: 0;
	width: 300px;
	height: 7px;
	border-radius: 7px;
	background: var(--sub-color);
}

/* 막대 오른쪽으로 이어지는 가는 회색 선 */
.line_box::after {
	top: 3px;
	left: 325px;
	width: 875px;
	height: 1px;
	background: #ACACAC;
}

/* 단순 상단 구분선이 있는 섹션 박스 */
.line_box2 {
	margin-top: 130px;
	padding-top: 100px;
	border-top: 1px solid #ddd;
}

/* ----- [모바일] 서브 공통 요소 오버라이드 ----- */
@media screen and (max-width:500px) {
	/* 서브 제목 모바일 크기 */
	.sub_title {
		margin-top: 8.5vw;
		font-size: 4.4vw;
	}

	/* 로그인 제목 상단 여백(모바일) */
	.sub_title.login {
		margin-top: 8vw;
	}

	/* 제목 밑줄 모바일 두께 */
	.sub_title > span {
		padding-bottom: 3px;
		border-bottom: 2px solid var(--sub-color);
	}

	/* 소제목 모바일 크기 */
	.sub_stitle {
		margin-top: 4vw;
		font-size: 3.6vw;
	}

	/* 소제목2 모바일 크기 */
	.sub_stitle2 {
		padding-left: 4vw;
		font-size: 4vw;
	}

	/* 소제목2 불릿 모바일 크기 */
	.sub_stitle2::before {
		top: 1.2vw;
		width: 2vw;
		height: 2vw;
	}

	/* 인트로 문단 모바일 크기 */
	.sub_intro {
		margin-top: 4.4vw;
		font-size: 3.6vw;
		line-height: 1.45;
	}

	/* 구분선 박스 상단 여백(모바일) */
	.line_box {
		padding-top: calc(4vw + 3px);
	}

	/* 굵은 막대 모바일 크기 */
	.line_box::before {
		width: 30vw;
		height: 3px;
		border-radius: 3px;
	}

	/* 가는 선 모바일 위치·길이 */
	.line_box::after {
		top: 1px;
		left: 31.5vw;
		width: 56.6vw;
	}

	/* 구분선 섹션 박스 모바일 여백 */
	.line_box2 {
		margin-top: 22vw;
		padding-top: 13vw;
	}
}


/* ===== 로그인 / 회원가입 폼 ===== */
/* 로그인·회원가입 폼 공통 컨테이너(가운데 고정폭) */
.login_area, .join_area {
	width: 682px;
	margin: 0 auto;
}

/* 로그인 폼 상단 여백 */
.login_area {
	margin-top: 95px;
}

/* 회원가입 폼 상단 여백 */
.join_area {
	margin-top: 75px;
}

/* 폼 항목 기본 글자 */
.item {
	font-size: 20px;
	font-weight: 500;
}

/* 항목 라벨(블록 표시) */
.item label.default_label {
	display: block;
	margin-bottom: 10px;
}

/* clearfix 영역 자식들을 왼쪽으로 흐르게 */
.item .after_clear > * {
	float: left;
}

/* 입력칸 옆 보조 텍스트(세로 가운데 맞춤) */
.item .item_span {
	line-height: 60px;
}

/* 기본 텍스트 입력칸: 차량번호 칸 기준 높이로 통일 */
input.default_text {
	height: 56px; /* 차량번호 칸 기준 높이로 통일 */
	margin-bottom: 20px;
}
/* 셀렉트 박스도 입력칸과 동일 높이로 */
select.default_text { height: 56px; }

/* 차량번호 첫 칸(지역/숫자 등 짧은 칸) */
input#car_no1.default_text {
	width: 80px;
}

/* 차량번호 둘째 칸(긴 칸) */
input#car_no2.default_text {
	width: 280px;
}

/* '아이디 기억/비번찾기' 줄 - 오른쪽 정렬 */
.remember_chk {
	text-align: right;
}

/* 왼쪽 링크(비밀번호 찾기 등) */
.remember_chk > a {
	display: inline-block;
	float: left;
	margin-top: 5px;
	font-size: 18px;
	color: #808080;
}

/* 체크박스 라벨 글자 */
.remember_chk > label {
	font-size: 18px;
}

/* 기억하기 체크박스 크기·위치 */
.remember_chk > label > input[type="checkbox"] {
	position: relative;
	top: -1px;
	width: 20px;
	height: 20px;
	margin-right: 10px;
}

/* 로그인/공통 버튼 기본형(메인색 테두리) */
button.login_btn {
	width: 100%;
	height: 60px;
	border: 1px solid var(--main-color);
	font-size: 18px;
	border-radius: 10px;
}

/* 채움형 버튼(메인색 배경·흰 글자) - 주 동작 버튼 */
button.login_btn.solid_btn {
	margin-top: 70px;
	margin-bottom: 15px;
	background: var(--main-color);
	color: #fff;
}

/* 라인형 버튼 - 별도 스타일 없음 */
button.login_btn.line_btn {}

/* 중복확인 버튼(짙은 회색 배경) */
button.login_btn.dupl_btn {
	width: 193px;
	margin-bottom: 20px;
	border-color: #4E4E4E;
	background: #4E4E4E;
	color: #fff;
}

/* Ajax 결과 메시지(블록 표시) */
.ajax_msg {
	display: block;
}

/* 검색 안내 문구(가운데 정렬) */
.search_txt {
	font-size: 32px;
	text-align: center;
}

/* 검색 결과 박스(연녹 배경) */
.search_result {
	padding: 30px 0;
	margin-top: 60px;
	background: #EFF8F3;
}

/* 검색 결과 한 줄(가운데 정렬) */
.search_result li {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 결과 항목 라벨 폭 고정 */
.search_result li span {
	display: inline-block;
	width: 180px;
	line-height: 2;
}


/* ----- [모바일] 로그인/회원가입 폼 오버라이드 ----- */
@media screen and (max-width:500px) {
	/* 폼 컨테이너 모바일 폭 */
	.login_area, .join_area {
		width: 88vw;
	}

	/* 로그인 폼 상단 여백(모바일) */
	.login_area {
		margin-top: 12vw;
	}

	/* 회원가입 폼 상단 여백(모바일) */
	.join_area {
		margin-top: 7.5vw;
	}

	/* 항목 글자·여백(모바일) */
	.item {
		margin-bottom: 3vw;
		font-size: 4vw;
	}

	/* 라벨 아래 여백(모바일) */
	.item label.default_label {
		margin-bottom: 1.2vw;
	}

	/* 입력칸 보조 텍스트(모바일) */
	.item .item_span {
		line-height: 8vw;
		font-size: 3vw;
	}


	/* 입력칸 아래 여백(모바일) */
	input.default_text {
		margin-bottom: 2vw;
	}

	/* 차량번호 첫 칸 모바일 폭 */
	input#car_no1.default_text {
		width: 8vw;
	}

	/* 차량번호 둘째 칸 모바일 폭 */
	input#car_no2.default_text {
		width: 43vw;
	}

	/* 왼쪽 링크 모바일 크기 */
	.remember_chk > a {
		margin-top: 0.5vw;
		font-size: 3vw;
	}

	/* 체크박스 라벨 모바일 크기 */
	.remember_chk > label {
		font-size: 3vw;
	}

	/* 체크박스 모바일 크기 */
	.remember_chk > label > input[type="checkbox"] {
		position: relative;
		top: -1px;
		width: 4vw;
		height: 4vw;
		margin-right: 1vw;
	}

	/* 버튼 모바일 높이·글자 */
	button.login_btn {
		height: 10vw;
		font-size: 4vw;
		border-radius: 1vw;
	}

	/* 채움형 버튼 모바일 여백 */
	button.login_btn.solid_btn {
		margin-top: 10vw;
		margin-bottom: 2vw;
	}

	/* 중복확인 버튼 모바일 크기 */
	button.login_btn.dupl_btn {
		width: 23vw;
		height: 8vw;
		margin-bottom: 2vw;
		font-size: 3.6vw;
	}

	/* 검색 문구 모바일 크기 */
	.search_txt {
		font-size: 4vw;
	}

	/* 검색 결과 박스 모바일 여백 */
	.search_result {
		padding: 4vw 0;
		margin-top: 8vw;
	}

	/* 결과 라벨 모바일 폭 */
	.search_result li span {
		width: 23vw;
	}
}


/* ----- [PC] 로그인/회원가입 입력칸+버튼 가로 배치 추가 ----- */
/* 입력칸 + 중복확인 버튼을 한 줄에 가로 배치 */
.input_with_btn {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
}

/* 가로 배치 시 입력칸이 남는 폭 모두 차지 */
.input_with_btn input.default_text {
	width: 100%;
	margin-bottom: 20px;
}

/* 가로 배치 버튼은 폭 고정(줄어들지 않음) */
.input_with_btn button.dupl_btn {
	width: 150px;
	flex-shrink: 0;
	margin-bottom: 20px;
}

/* 모바일 버전 (@media screen and (max-width:500px) 내부) 추가 사항 */
@media screen and (max-width:500px) {
	/* 입력칸-버튼 간격 모바일 조정 */
	.input_with_btn {
		gap: 2vw;
	}

	/* 중복확인 버튼 모바일 크기 */
	.input_with_btn button.dupl_btn {
		width: 25vw;
		height: 10vw;
	}
}


/* ===== 인사말(이사장 인사) ===== */
/* 인사말 박스: 우상단 이사장 이미지 배경 + 상단 여백으로 이미지 공간 확보 */
.intro01_box01 {
	margin-top: 130px;
	padding-top: 240px;
	background: url('/images/chairman_img.png') no-repeat top right / 300px;
}

/* 인사말 큰 문구(강조 도입부) */
.intro01_box01 .big_txt {
	font-size: 40px;
	font-weight: 500;
	line-height: 1.5;
}

/* 인사말 본문 */
.intro01_box01 .content {
	margin-top: 55px;
	font-size: 28px;
	line-height: 1.8;
}

/* 서명 영역: 오른쪽 정렬 + 로고 배경 워터마크 */
.intro01_box01 .sign {
	margin-top: 38px;
	padding: 110px 0;
	padding-right: 120px;
	text-align: right;
	background: url('/images/intro_bg_logo.png') no-repeat center right / contain;
}

/* 서명 텍스트(직함/이름) */
.intro01_box01 .sign > span {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.6;
}

/* ----- [모바일] 인사말 오버라이드 ----- */
@media screen and (max-width:500px) {
	/* 이사장 이미지를 모바일용(가운데 상단)으로 교체 */
	.intro01_box01 {
		margin-top: 7vw;
		padding-top: 61.6vw;
		background: url('/images/m_chairman_img.png') no-repeat top center / 42.3vw;
	}

	/* 큰 문구 모바일 크기 */
	.intro01_box01 .big_txt {
		font-size: 4vw;
	}

	/* 본문 모바일 크기 */
	.intro01_box01 .content {
		margin-top: 5vw;
		font-size: 3.6vw;
		line-height: 1.5;
	}

	/* 서명 영역 모바일 여백(우측 패딩 제거) */
	.intro01_box01 .sign {
		margin-top: 5.6vw;
		padding: 8vw 0;
		padding-right: 0;
	}

	/* 서명 텍스트 모바일 크기 */
	.intro01_box01 .sign > span {
		font-size: 4vw;
		line-height: 1.25;
	}
}


/* ===== 조합 연혁 ===== */
/* 연혁 섹션 상단 여백 */
.intro02_history {
	margin-top: 130px;
}

/* 연혁 한 블록(연도 + 항목 목록 가로 배치) */
.intro02_history .box {
	display: flex;
	align-items: first;
	margin-bottom: 100px;
}

/* 연도 제목(왼쪽 큰 숫자) */
.intro02_history .box .title {
	width: 184px;
	font-size: 56px;
	font-weight: 700;
	color: #222222;
}

/* 연혁 항목 목록(연도 오른쪽) */
.intro02_history .box .history {
	position: relative;
	top: 30px;
	margin-left: 142px;
	color: #444444;
}

/* 연혁 항목 한 줄(날짜 + 내용 가로 배치) */
.intro02_history .box .history > li {
	display: flex;
	margin-bottom: 29px;
	align-items: first;
}

/* 연혁 날짜(월/일) */
.intro02_history .box .history > li .date {
	width: 152px;
	margin-right: 38px;
	font-size: 28px;
	font-weight: 600;
}

/* 연혁 상세 내용 */
.intro02_history .box .history > li .detail {
	font-size: 24px;
	line-height: 1.65;
}

/* ----- [모바일] 조합 연혁 오버라이드 ----- */
@media screen and (max-width:500px) {
	/* 섹션 상단 여백(모바일) */
	.intro02_history {
		margin-top: 10.7vw;
	}

	/* 연도와 목록을 세로로 쌓음 */
	.intro02_history .box {
		display: block;
		margin-bottom: 17vw;
	}

	/* 연도 제목 모바일 크기(전체폭) */
	.intro02_history .box .title {
		width: 100%;
		font-size: 5.6vw;
	}

	/* 항목 목록 모바일 위치 초기화(전체폭) */
	.intro02_history .box .history {
		top: 0;
		width: 100%;
		margin-top: 3.8vw;
		margin-left: 0;
	}

	/* 항목 한 줄 아래 여백(모바일) */
	.intro02_history .box .history > li {
		margin-bottom: 3.4vw;
	}

	/* 날짜 모바일 폭·크기 */
	.intro02_history .box .history > li .date {
		width: 17vw;
		margin-right: 5vw;
		font-size: 3vw;
	}

	/* 상세 내용 모바일 크기 */
	.intro02_history .box .history > li .detail {
		font-size:2.4vw;
	}
}


/* ===== 조직 구성(설립 목적) ===== */
/* 설립 목적 섹션 상하 여백 */
.intro03_purpose {
	margin-top: 130px;
	margin-bottom: 180px;
}

/* 목적 문구를 담는 배너(배경 이미지 cover, 흰 글자) */
.intro03_purpose .content {
	margin-top: 40px;
	padding: 65px 0;
	text-align: center;
	background: url('/images/organization_banner.png') no-repeat center center / cover;
}

/* 배너 안 문구 텍스트 */
.intro03_purpose .content > p {
	font-size: 32px;
	line-height: 1.7;
	color: #fff;
}

/* 조직도 이미지 영역 상단 여백 */
.intro03_organ {
	margin-top: 170px;
}

/* ----- [모바일] 조직 구성 오버라이드 ----- */
@media screen and (max-width:500px) {
	/* 섹션 상하 여백(모바일) */
	.intro03_purpose {
		margin-top: 8vw;
		margin-bottom: 12.5vw;
	}

	/* 배너 배경을 모바일용 이미지로 교체 */
	.intro03_purpose .content {
		margin-top: 3.8vw;
		padding: 8.3vw 0;
		background-image: url('/images/m_organization_banner.png');
	}

	/* 배너 문구 모바일 크기 */
	.intro03_purpose .content > p {
		font-size: 3vw;
		line-height: 1.45;
	}

	/* 조직도 영역 상단 여백(모바일) */
	.intro03_organ {
		margin-top: 10vw;
	}
}


/* ===== 조합 부서 안내(표) ===== */
/* 부서 안내 섹션 상단 여백 */
.intro04_organ {
	margin-top: 100px;
}

/* 부서 안내 표 기본(고정 레이아웃, 테두리 접힘) */
.organ {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	border-bottom: 1px solid #ccc;
}

/* 표 셀 공통 패딩·테두리 */
.organ th, .organ td {
	padding: 20px 25px;
	font-size: 24px;
	line-height: 1.6;
	border: 1px solid #ddd;
	vertical-align: middle;
}

/* 표 헤더 셀(가운데 정렬, 굵게) */
.organ th {
	background-color: #fff;
	font-size: 28px;
	font-weight: 600;
	text-align: center;
	color: #222;
}

/* 부서명 셀(회색 배경, 단어 줄바꿈 유지) */
.organ td.dept_name {
	background-color: #F0F0F0;
	font-size: 28px;
	font-weight: 600;
	color: #222;
	text-align: center;
	word-break: keep-all;
}

/* 업무 내용 셀(좌측 정렬) */
.organ td.work_detail {
	text-align: left;
	background-color: #fff;
}

/* 업무 내용 목록(기본 불릿 제거) */
.organ td.work_detail ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* 업무 항목 한 줄(커스텀 점 불릿 자리 확보) */
.organ td.work_detail ul li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 8px;
	color: #555;
	font-weight: 400;
}

/* 업무 항목 앞 회색 점 불릿 */
.organ td.work_detail ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	width: 4px;
	height: 4px;
	background-color: #666;
	border-radius: 50%;
}

/* 목록 마지막 항목 아래 여백 제거 */
.organ td.work_detail ul li:last-child {
	margin-bottom: 0;
}

/* ----- [모바일] 부서 안내 표 오버라이드 ----- */
@media screen and (max-width:500px) {
	/* 섹션 상단 여백(모바일) */
	.intro04_organ {
		margin-top: 7vw;
	}

	/* 셀 패딩·글자 모바일 조정 */
	.organ th, .organ td {
		padding: 4vw 0;
		font-size: 3.6vw;
	}

	/* 헤더 셀 모바일 크기 */
	.organ th {
		font-size: 3.6vw;
	}

	/* 일반 셀 패딩·크기(모바일) */
	.organ td {
		padding: 1.7vw 2vw;
		font-size: 3.2vw;
	}

	/* 부서명 셀 모바일 크기 */
	.organ td.dept_name {
		font-size: 3.6vw;
	}

	/* 업무 항목 모바일 여백 */
	.organ td.work_detail ul li {
		margin-bottom: 1vw;
		margin-left: 1vw;
		padding-left: 2vw;
	}

	/* 점 불릿 모바일 크기 */
	.organ td.work_detail ul li::before {
		top: 7px;
		width: 2px;
		height: 2px;
	}
}


/* ===== 임원 및 대의원 현황 ===== */
/* 임원/대의원 이미지 영역(가운데 정렬) */
.intro04_people {
	padding-top: 85px;
	text-align: center;
}

/* ----- [모바일] 임원 현황 상단 여백 ----- */
@media screen and (max-width:500px) {
	.intro04_people {
		padding-top: 10vw;
	}
}



/* ===== 찾아오시는 길(지도) ===== */
/* 지도 영역(다음 약도) 크기 */
.map{
	width : 100%;
	height : 650px;
	border-bottom: 1px solid #ddd;
}

/* 다음 약도 루트 요소 전체 채움 */
.map .root_daum_roughmap {
	width: 100%;
	height: 100%;
}

/* 약도 내부 지도 래퍼 높이 채움 */
.map .root_daum_roughmap .wrap_map {
	height: 100%;
}

/* ----- [모바일] 지도 높이 ----- */
@media screen and (max-width:500px) {
	.map{
		height : 48vw;
	}
}


/* ===== 제휴 병·의원 진료시간표(clinic_time_tbl) ===== */
.clinic_time_tbl { max-width: 700px; }               /* 내용에 맞게 표 폭 축소(전체폭 채우지 않음) */
.clinic_time_tbl th, .clinic_time_tbl td { padding: 9px 14px; font-size: 18px; }  /* 셀 여백·글자 축소(박스 높이 감소) */
.clinic_time_tbl th { background-color: #F0F0F0; }   /* 헤더행(구분/시간/비고) 회색 음영 */
.clinic_time_tbl td { font-weight: 400; }            /* 구분/시간 셀 동일 두께 */
.clinic_label { font-weight: bold; }                 /* 병·의원 소제목(진료 과목/시간/지점 등) 볼드 */
.clinic_name { font-size: 30px; font-weight: 800; color: #333; }  /* 업체명 강조(더 진하고 크게) */
@media screen and (max-width:500px) {
	/* 진료시간표: 가로스크롤 없이 화면폭에 맞춤 */
	.clinic_time_tbl { max-width: 100%; }
	.clinic_time_tbl th, .clinic_time_tbl td { font-size: 3.4vw; padding: 2.4vw 1vw; }
	.clinic_name { font-size: 4.6vw; }
}

/* ===== 차량부착물 안내표(attach_tbl) - 셀 글자 오버플로/한글자 줄바꿈 방지 ===== */
.attach_tbl th, .attach_tbl td { padding: 16px 12px; word-break: keep-all; }  /* 여백 축소 + 단어 단위 줄바꿈 */
.attach_tbl td.work_detail { font-size: 20px; }     /* 본문 글자 축소로 한 줄에 더 많이 */
.attach_tbl td.dept_name { font-size: 22px; }       /* 표시구역 라벨 축소 */

/* ===== 업무(공통 표/안내) - 모바일 전용 ===== */
@media screen and (max-width:500px) {
	/* 넓은 표를 가로 스크롤 가능하게 감싸는 래퍼 */
	.table_responsive {
		width: 100%;
		overflow-x: auto;
	}

	/* 래퍼 안 표 폭을 화면보다 넓게(200vw) 두어 가로 스크롤 유도 */
	.table_responsive .business01_tbl01 {
		width: 200vw;
	}

	/* 표 안내 문구(좌측 정보 아이콘 + 회색 글자) */
	.table_notice {
		display: block;
		margin-bottom: 1vw;
		padding-left: 3.5vw;
		font-size: 3vw;
		font-weight: 300;
		color: #808080;
		background: url('/images/m_info_icon.png') no-repeat center left / 3vw;
	}
}


/* ===== 사진표 안내 문구 ===== */
/* 표 보조 안내 문구(주황색 강조) */
.table_notice2 {
	display: block;
	margin-top: 15px;
	font-size: 24px;
	font-weight: 300;
	color: #FF8F1F;
}

/* ----- [모바일] 사진표 안내 문구 ----- */
@media screen and (max-width:500px) {
	.table_notice2 {
		margin-top: 1.5vw;
		font-size: 3.2vw;
	}
}


/* ===== 유가보조금 ===== */
/* 유가보조금 설명 목록(dl) 상단 여백 */
.business04_datalist {
	margin-top: 57px;
}

/* 항목 제목(dt) */
.business04_datalist dt {
	margin-bottom: 23px;
	font-size: 30px;
	font-weight: 500;
	color: #222;
}

/* 항목 내용(dd) */
.business04_datalist dd {
	margin-bottom: 29px;
	font-size: 28px;
	line-height: 1.75;
	color: #444;
}

/* 구분선 역할 dd(상단 가로선) */
.business04_datalist dd.hr {
	margin: 50px 0 60px;
	border-top: 1px solid #ACACAC;
}

/* dd 안 목록 - 별도 스타일 없음 */
.business04_datalist dd > ul {}

/* dd 안 목록 항목 글자 */
.business04_datalist dd > ul > li {
	font-size: 24px;
}

/* ----- [모바일] 유가보조금 오버라이드 ----- */
@media screen and (max-width:500px) {
	/* 목록 상단 여백(모바일) */
	.business04_datalist {
		margin-top: 4vw;
	}

	/* 제목 모바일 크기 */
	.business04_datalist dt {
		margin-bottom: 1vw;
		font-size: 3.6vw;
	}

	/* 내용 모바일 크기 */
	.business04_datalist dd {
		margin-bottom: 3.8vw;
		font-size: 3.6vw;
	}

	/* 구분선 dd 모바일 여백 */
	.business04_datalist dd.hr {
		margin: 5vw 0 6vw;
	}

	/* 목록 항목 모바일 크기 */
	.business04_datalist dd > ul > li {
		font-size: 3.6vw;
	}
}


/* ===== 운수종사자 교육 ===== */
/* 안내 문구(주황) - 운수종사자 교육 페이지용(글자 크기 재정의) */
.table_notice2 {
	font-size: 20px;
	font-weight: 300;
	color: #FF8F1F;
	line-height: 1.5;
}

/* 형광펜 강조 텍스트(뒤에 색 띠를 깔기 위한 기준) */
.highlight {
	position: relative;
	z-index: 1;
}

/* 형광펜 색 띠(글자 뒤 반투명 노란 배경) */
.highlight::after {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #FFC846;
	opacity: 0.35;
	content: "";
	z-index: -1;
}

/* ----- [모바일] 운수종사자 교육 안내 문구 ----- */
@media screen and (max-width:500px) {
	.table_notice2 {
		font-size: 3.2vw;
	}
}



/* ===== 면허매매 ===== */
/* 매물 카드 목록 상단 여백 */
.business07_list {
	margin-top: 100px;
}

/* 매물 카드 1개: 2열 그리드(폭 절반-여백), 둥근 테두리 */
.business07_list > li {
	float: left;
	width: calc(50% - 12px);
	height: 430px;
	margin-right: 24px;
	margin-bottom: 24px;
	border: 1px solid #ACACAC;
	border-radius: 10px;
	box-sizing: border-box;
}

/* 2열 그리드 - 각 행 두 번째 카드 오른쪽 여백 제거 */
.business07_list > li:nth-child(2n + 2) {
	margin-right: 0;
}

/* 카드 내부 표(가운데 90% 폭) */
.business07_list > li > table {
	width: 90%;
	margin: 0 auto;
}

/* 카드 표 셀 공통 - 별도 스타일 없음 */
.business07_list > li > table th,
.business07_list > li > table td {}

/* 카드 표 제목 행(가운데, 크게) */
.business07_list > li > table th {
	padding-top: 35px;
	padding-bottom: 50px;
	text-align: center;
	font-size: 32px;
	font-weight: 500;
}

/* 카드 표 내용 셀 */
.business07_list > li > table td {
	padding-bottom: 40px;
	font-size: 28px;
}

/* 첫 열(항목 라벨) 폭 고정 */
.business07_list > li > table td:first-child {
	width: 120px;
}

/* 마지막 열 - 별도 스타일 없음 */
.business07_list > li > table td:last-child {}

/* 가운데 강조 안내 문구 박스 */
.sub_intro2 {
	margin: 50px 0 100px;
	padding: 30px 0;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.55;
	text-align: center;
}

/* 면허매매 시세표 전체폭 */
.business07_table {
	width: 100%;
}

/* 시세표 셀 공통(테두리, 가운데 정렬) */
.business07_table th,
.business07_table td {
	padding: 15px 0;
	border: 1px solid #ACACAC;
	text-align: center;
}

/* 시세표 헤더 셀 */
.business07_table th {
	font-size: 28px;
}

/* 시세표 내용 셀 - 별도 스타일 없음 */
.business07_table td {}

/* ----- [모바일] 면허매매 오버라이드 ----- */
@media screen and (max-width:500px) {
	/* 카드 목록 상단 여백(모바일) */
	.business07_list {
		margin-top: 10vw;
	}

	/* 카드를 1열(전체폭)로 전환 */
	.business07_list > li {
		width: 100%;
		height: 43vw;
		margin-right: 0;
		margin-bottom: 2.5vw;
		border-radius: 1vw;
	}

	/* 카드 내부 표 폭(모바일) */
	.business07_list > li > table {
		width: 80%;
	}

	/* 카드 표 제목 모바일 크기 */
	.business07_list > li > table th {
		padding-top: 3vw;
		padding-bottom: 5vw;
		font-size: 4vw;
	}

	/* 카드 표 내용 모바일 크기 */
	.business07_list > li > table td {
		padding-bottom: 3vw;
		font-size: 3.6vw;
	}

	/* 첫 열 모바일 폭 */
	.business07_list > li > table td:first-child {
		width: 18vw;
	}


	/* 강조 안내 박스 모바일 크기 */
	.sub_intro2 {
		margin: 6vw 0 12vw;
		padding: 4.5vw 0;
		font-size: 3.6vw;
	}

	/* 시세표 전체폭(모바일) */
	.business07_table {
		width: 100%;
	}

	/* 시세표 셀 모바일 패딩 */
	.business07_table th,
	.business07_table td {
		padding: 2vw 0;
		border: 1px solid #ACACAC;
		text-align: center;
	}

	/* 시세표 헤더 모바일 크기 */
	.business07_table th {
		font-size: 3.6vw;
	}
}


/* ===== 양도양수 구비서류 / 양도 후 절차 ===== */
/* 절차 안내 본문(넓은 줄간격) */
.sub_intro3 {
	margin-top: 30px;
	font-size: 28px;
	line-height: 2;
}

/* 본문 내 강조 span - 별도 스타일 없음 */
.sub_intro3 > span {}

/* 표 보조 안내 문구3 */
.table_notice3 {
	margin-top: 15px;
	font-size: 24px;
}

/* ----- [모바일] 양도양수 절차 오버라이드 ----- */
@media screen and (max-width:500px) {
	/* 절차 본문 모바일 크기 */
	.sub_intro3 {
		margin-top: 3vw;
		font-size: 3.6vw;
		line-height: 1.25;
	}

	/* 안내 문구3 모바일 크기 */
	.table_notice3 {
		margin-top: 1.5vw;
		font-size: 3.2vw;
	}
}


/* ===== 충전소 / 제휴사업(지도) ===== */
/* 제휴 지도 박스(가운데 고정 크기, 모서리 둥글게) */
.coalition_map {
	width: 800px;
	height: 500px;
	margin: 0 auto;
	margin-top: 40px;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid #ddd;
}

/* 다음 약도 루트: 테두리 가림 위해 1px 밖으로 키워 배치 */
.coalition_map .root_daum_roughmap {
	position: relative;
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
}

/* 약도 지도 래퍼 높이 채움 */
.coalition_map .root_daum_roughmap .wrap_map {
	height: 100%;
}

/* 약도 하단 설명(cont) 숨김 */
.coalition_map .root_daum_roughmap .cont {
	display: none;
}

/* ----- [모바일] 제휴 지도 크기 ----- */
@media screen and (max-width:500px) {
	.coalition_map {
		width: 100%;
		height: 50vw;
		margin-top: 4vw;
		border-radius: 2vw;
	}
}


/* ===== 교통사고/안전운전 - 사고처리 요령(단계 카드) ===== */
/* 단계 카드 목록 상단 여백 */
.safe_list {
	margin-top: 60px;
}

/* 단계 카드(화살표 항목 제외): 좌상단만 둥근 테두리 박스 */
.safe_list > li:not(.arrow) {
	padding: 20px;
	padding-bottom: 10px;
	border: 1px solid #ACACAC;
	border-radius: 100px 10px 10px 10px;
}

/* 단계 사이 아래 화살표 항목(배경 아이콘) */
.safe_list > li.arrow {
	height: 80px;
	background: url('/images/down_arrow_icon.png') no-repeat center center / 55px;
}

/* 단계 제목(좌측 단계 아이콘 + 주황 글자) */
.safe_list > li .tit {
	display: flex;
	align-items: center;
	height: 140px;
	margin-bottom: 30px;
	padding-left: 160px;
	background-repeat: no-repeat;
	background-position: center left;
	background-size: contain;
	font-size: 40px;
	font-weight: 500;
	color: #F2A93B;
}

/* 각 단계별 아이콘 이미지(1~4단계) */
.safe_list > li .tit.num1 { background-image: url('/images/m_step01_icon.png'); }
.safe_list > li .tit.num2 { background-image: url('/images/m_step02_icon.png'); }
.safe_list > li .tit.num3 { background-image: url('/images/m_step03_icon.png'); }
.safe_list > li .tit.num4 { background-image: url('/images/m_step04_icon.png'); }

/* 단계 설명 텍스트 한 줄 */
.safe_list > li .txt {
	display: block;
	margin-bottom: 15px;
}

/* ----- [모바일] 사고처리 단계 카드 오버라이드 ----- */
@media screen and (max-width:500px) {
	/* 목록 상단 여백(모바일) */
	.safe_list {
		margin-top: 4vw;
	}

	/* 단계 카드 패딩·모서리(모바일) */
	.safe_list > li:not(.arrow) {
		padding: 2.5vw 3vw;
		padding-bottom: 1vw;
		border-radius: 12vw 1vw 1vw 1vw;
	}

	/* 화살표 항목 모바일 크기 */
	.safe_list > li.arrow {
		height: 13vw;
		background-size: 7vw;
	}

	/* 단계 제목 모바일 크기·아이콘 여백 */
	.safe_list > li .tit {
		height: 15vw;
		margin-bottom: 3vw;
		padding-left: 18vw;
		font-size: 4vw;
	}

	/* 설명 텍스트 모바일 여백 */
	.safe_list > li .txt {
		margin-bottom: 2vw;
	}
}



/* ===== 조합원광장 - 정관 ===== */
/* 정관 목록 영역(좌우 배치) */
.community031_box {
	display: flex;
}

/* 정관 항목 목록(남는 폭 차지) */
.community031_box .articles {
	flex: 1;
	margin-top: 60px;
}

/* 정관 항목 한 줄(날짜 + 구분 가로 배치) */
.community031_box .articles > li {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}

/* 정관 항목 날짜 */
.community031_box .articles > li .date {
	width: 170px;
	font-size: 28px;
	font-weight: 600;
}

/* 정관 항목 구분(분류) 텍스트 */
.community031_box .articles > li .gubun {
	font-size: 24px;
	color: #444;
}

/* ----- [모바일] 정관 목록 오버라이드 ----- */
@media screen and (max-width:500px) {
	/* 좌우 배치 → 세로 배치 */
	.community031_box {
		display: block;
		padding-top: 6vw;
	}

	/* 목록 상단 여백 제거(모바일) */
	.community031_box .articles {
		margin-top: 0;
	}

	/* 항목 한 줄 전체폭(모바일) */
	.community031_box .articles > li {
		width: 100%;
		margin-bottom: 3vw;
	}

	/* 날짜 모바일 폭·크기 */
	.community031_box .articles > li .date {
		width: 30vw;
		font-size: 3.8vw;
	}

	/* 구분 텍스트 모바일 크기 */
	.community031_box .articles > li .gubun {
		font-size: 3.6vw;
	}
}


/* 정관 내용(아코디언) 영역 하단 여백 */
.community031_cont {
	padding-bottom: 47px;
}

/* 펼침/접힘 제목(우측 화살표 토글, 클릭 가능) */
.community031_cont .sub_stitle2.with_arrow {
	position: relative;
	cursor: pointer;
	/* background: url('/images/menu_down_arrow01.png') no-repeat center right 20px; */
}

/* 제목 우측 아래방향 화살표 아이콘 */
.community031_cont .sub_stitle2.with_arrow::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 23px;
	height: 13px;
	margin-top: -6px;
	background: url(/images/menu_down_arrow01.png) no-repeat center center;
	background-size: contain;

	transition: transform 0.3s ease-in-out;
}

/* 펼친 상태(active): 화살표 위아래 뒤집어 표시 */
.community031_cont .sub_stitle2.with_arrow.active::after {
	transform: scaleY(-1);
}

/* ----- [모바일] 정관 아코디언 오버라이드 ----- */
@media screen and (max-width:500px) {
	/* 하단 여백(모바일) */
	.community031_cont {
		padding-bottom: calc(4vw + 3px);
	}

	.community031_cont .sub_stitle2.with_arrow {
		/* background: url('/images/menu_down_arrow01.png') no-repeat center right 2vw / 2vw; */
	}

	/* 화살표 아이콘 모바일 위치·크기 */
	.community031_cont .sub_stitle2.with_arrow::after {
		right: 2vw;
		width: 3vw;
		height: 1.5vw;
		margin-top: -1.5vw;
	}
}


/* ===== 영상교육 자료실(단일 영상 플레이어) ===== */
/* 영상 컨테이너(고정 높이) */
.video_container {
	width: 100%;
	height: 558px;
}

/* 컨테이너 안 video 요소 전체 채움 */
.video_container > video {
	width: 100%;
	height: 100%;
}
/* 게시판 블라인드(비활성화) 처리 - 연한색 + 클릭금지 */
/* 블라인드 행 셀: 연한 글자 + 옅은 배경 */
.default_board_list tr.blind_row td {
	color: #bbb;
	background: #fafafa;
}
/* 블라인드 행 제목: 클릭 비활성화 */
.default_board_list tr.blind_row .blind_title {
	color: #bbb;
	pointer-events: none;
	cursor: default;
}
/* 블라인드 행 답글 뱃지: 반투명 처리 */
.default_board_list tr.blind_row .reply_badge {
	opacity: 0.4;
}

/******************************  메인 바로가기 + 상담 통합 바  ******************************/
/* 통합 퀵바 컨테이너(하단 구분선, 흰 배경) */
#main_quick_bar {
	border-bottom: 1px solid #e5e5e5;
	background: #fff;
}
/* 퀵바 내부 가로 배치(자식 높이 늘려 정렬, 텍스트 하단여백 확보 위해 height auto) */
#main_quick_bar .quick_bar {
	display: flex;
	align-items: stretch;
	height: auto;
	min-height: 140px;
}
/* 퀵바 각 항목 공통: 세로 정렬 + 가운데 배치 */
#main_quick_bar .quick_bar > li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	box-sizing: border-box;
}
/* 바로가기 4개 - 균등폭 */
#main_quick_bar .q_link {
	flex: 1;
}
/* 아이콘을 상단 기준으로 정렬해 수평 위치 일정하게 (라벨 줄 수와 무관) */
#main_quick_bar .quick_bar > li.q_link {
	justify-content: flex-start;
	padding-top: 30px;
	padding-bottom: 24px;
}
/* 바로가기 버튼(세로 정렬 아이콘+라벨, 배경/테두리 제거) */
#main_quick_bar .q_link button {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	background: none;
	border: 0;
	cursor: pointer;
}
/* 바로가기 아이콘(배경 이미지) */
#main_quick_bar .q_link .q_ico {
	width: 58px;
	height: 58px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform .2s;
}
/* 마우스 오버 시 아이콘 위로 10px 이동 */
#main_quick_bar .q_link button:hover .q_ico {
	transform: translateY(-10px);
}
/* 바로가기 라벨 텍스트 */
#main_quick_bar .q_link .q_txt {
	font-size: 16px;
	font-weight: 600;
	color: #333;
	line-height: 1.3;
	word-break: keep-all; /* 단어 중간에서 끊겨 3줄 되는 것 방지 */
}
/* 상담 타이틀 영역(약간 넓은 폭) */
#main_quick_bar .q_contact_title {
	flex: 1.2;
	gap: 8px;
}
/* 상담 제목(메인색 굵게) */
#main_quick_bar .q_contact_title .ct_tit {
	font-size: 26px;
	font-weight: 700;
	color: var(--main-color);
	line-height: 1.25;
}
/* 상담 운영 시간 */
#main_quick_bar .q_contact_title .ct_time {
	font-size: 15px;
	font-weight: 600;
	color: #555;
}
/* 연락처 3개 영역(가장 넓은 폭) */
#main_quick_bar .q_contact {
	flex: 1.5;
	gap: 12px;
}
/* 연락처 카드 번갈아 배경색(6·8번째 연녹, 7번째 연베이지) */
#main_quick_bar .quick_bar > li:nth-child(6) { background: #e9f1ec; }
#main_quick_bar .quick_bar > li:nth-child(7) { background: #f6f3ec; }
#main_quick_bar .quick_bar > li:nth-child(8) { background: #e9f1ec; }
/* 연락처 기관명 */
#main_quick_bar .q_contact .cc_tit {
	font-size: 18px;
	font-weight: 700;
	color: #555;
	line-height: 1.4;
}
/* 연락처 전화번호(크게) */
#main_quick_bar .q_contact .cc_tel {
	font-size: 25px;
	font-weight: 700;
	color: #222;
}

/* ----- [모바일] 통합 퀵바 오버라이드 ----- */
@media screen and (max-width:500px) {
	/* 통합 바는 좌우 여백 없이 화면 꽉 차게 */
	#main_quick_bar .sector { width: 100%; }

	/* 퀵바를 줄바꿈 허용 + 높이 자동으로 */
	#main_quick_bar .quick_bar {
		flex-wrap: wrap;
		height: auto;
	}

	/* 바로가기 4개 - 한 줄 (구분선은 아래 가상요소로 짧게 처리) */
	#main_quick_bar .quick_bar > li.q_link {
		flex: 0 0 25%;
		justify-content: flex-start;
		padding: 2.5vw 0 4vw;
		position: relative;
	}
	/* 세로 구분선(셀 전체 높이 정도) - 마지막(4번째) 카드는 제외 */
	#main_quick_bar .quick_bar > li.q_link:not(:nth-child(4))::after {
		content: '';
		position: absolute;
		top: 4vw;
		bottom: 4vw;
		right: 0;
		width: 1px;
		background: #d9d9d9;
	}
	/* 바로가기 아이콘 모바일 크기 */
	#main_quick_bar .q_link .q_ico { width: 17vw; height: 17vw; }
	/* 바로가기 라벨 모바일 크기 */
	#main_quick_bar .q_link .q_txt { font-size: 2.7vw; line-height: 1.35; word-break: keep-all; }

	/* 상담 및 문의전화 - 좌(녹색 제목) / 우(시간) */
	#main_quick_bar .quick_bar > li.q_contact_title {
		flex: 0 0 100%;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 4.5vw 5vw;
		background: #fff;
		border-top: 1px solid #e5e5e5;
	}
	/* 상담 제목 모바일(한 줄 유지) */
	#main_quick_bar .q_contact_title .ct_tit { font-size: 4.2vw; line-height: 1.3; white-space: nowrap; }
	/* 상담 시간 모바일(한 줄 유지) */
	#main_quick_bar .q_contact_title .ct_time { font-size: 3.4vw; color: #555; white-space: nowrap; }

	/* 연락처 - 전체폭 줄, 기관명 좌 / 번호 우 */
	#main_quick_bar .quick_bar > li.q_contact {
		flex: 0 0 100%;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 3vw;
		padding: 5vw;
	}
	/* 연락처 기관명 모바일(좌측 정렬) */
	#main_quick_bar .q_contact .cc_tit { font-size: 3.5vw; line-height: 1.4; text-align: left; color: #444; }
	/* 연락처 전화번호 모바일(한 줄 유지) */
	#main_quick_bar .q_contact .cc_tel { font-size: 4.6vw; white-space: nowrap; }
}

/******************************  영상교육자료실 (유튜브 게시판)  ******************************/
/* 영상 목록 그리드: 줄바꿈 flex, 행 30px·열 26px 간격 */
.video_grid { display: flex; flex-wrap: wrap; gap: 30px 26px; margin-top: 20px; }
/* 영상 항목 1개: 4열(3개 간격 26px씩 제외한 1/4 폭) */
.video_grid .video_item { width: calc((100% - 26px*3) / 4); cursor: pointer; }
/* 영상 썸네일: 16:9 비율(padding-top 56.25%) 유지, 배경 이미지 cover */
.video_grid .video_thumb {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	background-size: cover;
	background-position: center;
	background-color: #000;
	border-radius: 10px;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
/* 영상 항목 오버: 썸네일 살짝 위로 + 그림자 강조 */
.video_grid .video_item:hover .video_thumb {
	transform: translateY(-5px);
	box-shadow: 0 10px 22px rgba(0,0,0,0.15);
}
/* 썸네일 중앙 재생 버튼(반투명 원) */
.video_grid .video_thumb .play_ico {
	position: absolute;
	top: 50%; left: 50%;
	width: 54px; height: 54px;
	transform: translate(-50%,-50%);
	background: rgba(0,0,0,0.55);
	border-radius: 50%;
	transition: .2s;
}
/* 재생 버튼 안 삼각형(▶) - CSS 보더로 그림 */
.video_grid .video_thumb .play_ico::after {
	content: "";
	position: absolute;
	top: 50%; left: 54%;
	transform: translate(-50%,-50%);
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #fff;
}
/* 오버 시 재생 버튼 메인색으로 */
.video_grid .video_item:hover .play_ico { background: var(--main-color); }
/* 블라인드 표시 태그(좌상단 빨간 라벨) */
.video_grid .video_thumb .blind_tag {
	position: absolute; top: 8px; left: 8px;
	padding: 3px 8px; background: rgba(207,34,46,0.9);
	color: #fff; font-size: 12px; border-radius: 4px;
}
/* 블라인드 처리된 영상 항목 전체 흐리게 */
.video_grid .video_item.blind { opacity: .55; }
/* 영상 제목(최대 2줄 말줄임) */
.video_grid .video_tit {
	margin-top: 12px; font-size: 18px; font-weight: 600; color: #222;
	line-height: 1.4;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 영상 등록 날짜 */
.video_grid .video_date { margin-top: 6px; font-size: 14px; color: #8e8e8e; }
/* 영상 없을 때 안내(전체폭, 가운데) */
.video_grid .video_empty { width: 100%; padding: 60px 0; text-align: center; color: #888; }

/* 영상 상세 보기 래퍼(가운데 고정 최대폭) */
.video_view_wrap { max-width: 880px; margin: 24px auto 0; }
/* 상세 영상 제목 */
.video_view_title { font-size: 26px; font-weight: 700; color: #222; }
/* 상세 정보 줄(작성자/날짜 등, 하단 구분선) */
.video_view_info { margin-top: 10px; padding-bottom: 18px; border-bottom: 1px solid #ddd; color: #777; font-size: 15px; }
/* 정보 구분 막대(|) */
.video_view_info .line { margin: 0 10px; color: #ccc; }
/* 영상 플레이어(16:9 비율 유지, 검은 배경) */
.video_player { position: relative; width: 100%; padding-top: 56.25%; margin-top: 24px; background: #000; border-radius: 8px; overflow: hidden; }
/* 플레이어 iframe(유튜브) 전체 채움 */
.video_player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
/* 영상 상세 본문 */
.video_view_content { margin-top: 24px; font-size: 16px; line-height: 1.7; color: #333; }

/* ----- [모바일] 영상 그리드/상세 오버라이드 ----- */
@media screen and (max-width:500px) {
	/* 그리드 간격 모바일 조정 */
	.video_grid { gap: 6vw 4vw; }
	/* 영상 항목을 2열로(간격 4vw 제외한 절반 폭) */
	.video_grid .video_item { width: calc((100% - 4vw) / 2); }
	/* 영상 제목 모바일 크기 */
	.video_grid .video_tit { font-size: 3.4vw; }
	/* 영상 날짜 모바일 크기 */
	.video_grid .video_date { font-size: 2.8vw; }
	/* 상세 제목 모바일 크기 */
	.video_view_title { font-size: 5vw; }
}

/******************************  로그인 - 아이디(차량번호) 분할 입력  ******************************/
/* 차량번호 분할 입력 칸 묶음(가로 배치) */
.login_area .login_id_group { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
/* 분할 입력 칸 1개(정사각, 가운데 정렬) */
.login_area .login_id_cell {
	width: 56px; height: 56px;
	text-align: center;
	font-size: 18px;
	border: 1px solid #cccccc;
	border-radius: 6px;
	box-sizing: border-box;
}
/* 입력 칸 포커스 시 메인색 테두리 */
.login_area .login_id_cell:focus { outline: none; border-color: var(--main-color); }
/* 칸 사이 고정 문자(지역명·하이픈 등) */
.login_area .login_id_fixed { min-width: 24px; text-align: center; font-size: 18px; font-weight: 500; }
/* 입력 항목 라벨(좌측 정렬) */
.login_area .login_label { display: block; margin-bottom: 10px; font-size: 16px; font-weight: 500; color: #333; text-align: left; }
/* 로그인 폼 항목 간격 */
.login_area .login_item { margin-bottom: 22px; }

/* 회원가입 - 항목(.item) 간격 균일화 (입력칸별 개별 마진 제거 → 아래 여백 통일) */
.join_area .item { margin-bottom: 22px; }
.join_area .item input.default_text { margin-bottom: 0; }

/* 회원가입 - 휴대폰 첫자리 select 를 입력칸과 동일 높이/스타일로 */
.join_area .tel_box select.default_text {
	height: 56px;
	padding: 0 10px;
	border: 1px solid #E1E1E1;
	background: #fff;
	box-sizing: border-box;
	font-size: 18px;
	color: #333;
	border-radius: 8px;
}
/* 휴대폰 입력 묶음 칸 간격 */
.join_area .tel_box { gap: 10px; }
/* 휴대폰 입력칸 아래 여백 제거(균일화) */
.join_area .tel_box input.default_text { margin-bottom: 0; }

/* 회원가입 - 아이디(차량번호) 한 칸씩 입력 */
.join_area .join_id_cell {
	width: 50px; height: 56px;
	text-align: center;
	font-size: 18px;
	border: 1px solid #cccccc;
	border-radius: 6px;
	box-sizing: border-box;
}
/* 회원가입 분할 칸 포커스 시 메인색 테두리 */
.join_area .join_id_cell:focus { outline: none; border-color: var(--main-color); }
/* 아이디 기억하기(좌) / 비밀번호 찾기(우) 양끝 배치 */
.login_area .remember_chk { display: flex; align-items: center; justify-content: space-between; }
/* 위 flex 배치 위해 링크의 float 해제 */
.login_area .remember_chk > a { float: none; margin-top: 0; }

/******************************  모바일 - 차량번호 분할 입력 칸 반응형  ******************************/
@media screen and (max-width:500px) {
	/* 로그인 페이지 아이디 칸 */
	.login_area .login_id_group { gap: 1.5vw; }
	/* 분할 입력 칸 모바일 크기(정사각 10vw) */
	.login_area .login_id_cell { width: 10vw; height: 10vw; font-size: 4vw; }
	/* 칸 사이 고정 문자 모바일 크기 */
	.login_area .login_id_fixed { min-width: 5vw; font-size: 4.2vw; }
	/* 비밀번호 등 입력칸도 동일 높이(10vw)로 통일 */
	input.default_text { height: 10vw; } /* 차량번호 칸 기준(10vw)으로 전 폼 통일 */

	/* 회원가입 아이디 칸 + 중복확인 버튼(좁으면 줄바꿈) */
	.join_area .input_with_btn { flex-wrap: wrap; gap: 2vw; }
	/* 차량번호 칸 묶음 간격(모바일) */
	.join_area .car_no_box { gap: 1.2vw; }
	/* 회원가입 분할 칸 모바일 크기 */
	.join_area .join_id_cell { width: 10vw; height: 10vw; font-size: 3.8vw; }
	/* 차량번호 칸 사이 구분 문자 모바일 크기 */
	.join_area .car_no_mid { font-size: 4.2vw; }
	/* 중복확인 버튼 모바일 높이·여백 */
	.join_area .input_with_btn .dupl_btn { height: 11vw; padding: 0 4vw; font-size: 3.4vw; }

	/* 회원가입 휴대폰 select/입력칸 모바일 높이 */
	.join_area .tel_box select.default_text { height: 10vw; padding: 0 1.6vw; font-size: 3vw; }
}