@charset "utf-8";

/* =========================== 서브 비주얼(상단 배너) : 로딩 시 얇았다가 커지는 애니메이션 */
#subVisual { position:relative; padding:0 20px 0 }
#subVisual .subVisual-inner {
	--sv-h:40rem;
	position:relative; max-width:var(--widesize); height:8rem; margin:0 auto;
	border-radius:30px; overflow:hidden;
	animation:subVisualGrow 1.5s cubic-bezier(.16,1,.3,1) forwards
}
@keyframes subVisualGrow { from { height:8rem } to { height:var(--sv-h) } }

#subVisual .subVisual-bg { display:block; width:100%; height:100%; object-fit:cover }
#subVisual .subVisual-inner:after { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.2) }

#subVisual .subVisual-txt {
	position:absolute; left:0; right:0; top:15.5rem; z-index:1;
	text-align:center; color:#fff;
	opacity:0; transform:translateY(15px);
	animation:subVisualTxtIn 0.7s ease forwards; animation-delay:0.5s
}
@keyframes subVisualTxtIn { to { opacity:1; transform:translateY(0) } }
#subVisual .subVisual-cate { font-size:4rem; font-weight:700; letter-spacing:-0.03em }
#subVisual .subVisual-desc { max-width:82rem; margin:0 auto; font-size:2rem; line-height:1.5 }

/* 형제 페이지 탭메뉴 (A타입) : PC는 알약형 가로 목록(넘치면 스크롤), 1024px 이하는 드롭다운 */
#subVisual .subVisual-tab-wrap {
	position:absolute; left:50%; bottom:2rem; z-index:1; transform:translateX(-50%)
}
#subVisual .subVisual-tab-trigger { display:none }

#subVisual .subVisual-tab {
	display:flex; gap:6rem; height:60px; padding:0 6rem; border-radius:15px;
	background:rgba(2,48,105,0.3); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px);
	align-items:center; max-width:100%; overflow-x:auto
}
#subVisual .subVisual-tab a {
	display:block; padding:2px 0; font-size:1.8rem; font-weight:400; color:#fff;
	border-bottom:3px solid transparent; white-space:nowrap
}
#subVisual .subVisual-tab li { flex-shrink:0 }
#subVisual .subVisual-tab li.on a { font-weight:600; border-color:#fff }

/* PC에서 탭이 넘칠 때만 나타나는 얇은 스크롤바 (NEWS 프로그레스바와 같은 톤) */
#subVisual .subVisual-tab::-webkit-scrollbar { height:3px }
#subVisual .subVisual-tab::-webkit-scrollbar-track { background:rgba(255,255,255,0.15); border-radius:10px }
#subVisual .subVisual-tab::-webkit-scrollbar-thumb { background:#fff; border-radius:10px }


/* =========================== 서브 타이틀 영역 */
/* .inner와 함께 쓰이므로 좌우 패딩은 건드리지 않고 상하만 지정 (좌우까지 shorthand로 0을 주면 .inner의 좌우 여백을 덮어써버림) */
.sub-title-block { padding-top:8rem; padding-bottom:4rem }
.sub-title-block.center { text-align:center }
.sub-title { font-size:4.8rem; font-weight:700; color:var(--dark); line-height:1.3 }
.sub-desc { margin-top:2rem; font-size:1.8rem; line-height:1.8; color:var(--sub) }
.sub-desc b { font-weight:500; color:var(--primary) }
.sub-title-block.center .sub-desc { max-width:100rem; margin-left:auto; margin-right:auto }
.sub-section .sub-desc { margin-bottom:4rem }

/* 우측 이미지가 있는 버전 */
.sub-title-row { display:flex; align-items:center; gap:10rem }
.sub-title-row .sub-title-col { flex:1; min-width:0; max-width:81rem }
.sub-title-row .sub-title-img { flex:0 0 auto; width:60rem; height:41.1rem; border-radius:20px; overflow:hidden }
.sub-title-row .sub-title-img img { display:block; width:100%; height:100%; object-fit:cover }


/* =========================== 서브 콘텐츠 공통 */
#subContent { padding-bottom:12rem }
.sub-section { padding:4rem 0 }
.sub-section.bg-light { background:var(--bg-light) }
/* subVisual 바로 다음 첫 섹션일 때 (title-hero 등 .sub-title-block 없이 시작하는 페이지) */
.sub-section.first { padding-top:8rem }
/* subVisual 자체가 없는 페이지(기업소개 sub05_xx)의 첫 섹션 : 위쪽 여백 없이 바로 시작 */
.sub-section.no-visual { padding-top:0 }

/* 섹션 두번째 타이틀 (ico_dot) */
.sub-tit2 {
	position:relative; display:flex; align-items:center; gap:1.5rem;
	margin-bottom:2rem; padding-left:2rem; font-size:3rem; font-weight:600; color:var(--dark)
}
.sub-tit2:before {
	content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
	width:5px; height:24px; background:url(../img/ico_dot.svg) no-repeat center/contain
}

/* 섹션 세번째 타이틀 (ico_dot 없는 버전) : 옆에 안내문구/전체동의 체크박스 등이 나란히 오기도 함 */
.sub-tit3 { display:flex; align-items:center; gap:1.5rem; margin-bottom:2rem; font-size:3rem; font-weight:600; color:var(--dark) }
.sub-tit3.spaced { margin-top:6rem }
.sub-tit3 .tit-note { font-size:1.8rem; font-weight:400; color:var(--txt) }
.sub-tit3 .check-item { font-size:1.8rem; font-weight:400 }

/* 구분선 */
.sub-divider { margin:4rem 0; height:1px; background:#eee }


/* =========================== 아이콘 카드 그리드 */
.icon-card-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem }
.icon-card {
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
	height:22rem; padding:2rem; border:1px solid #dee1e8; border-radius:20px; background:#fff;
	transition:border-color 0.2s, box-shadow 0.2s
}
.icon-card img { height:7rem; width:auto }
.icon-card p { font-size:1.8rem; line-height:1.5; color:var(--dark); text-align:center }
@media (hover:hover) {
	.icon-card:hover { border-color:var(--primary); box-shadow:0 10px 20px rgba(2,48,105,0.08) }
}


/* =========================== 단계(STEP) 카드 그리드 : 아이콘 + STEP뱃지 + 타이틀 + 설명, 3열 (마지막 줄 개수 안 맞아도 왼쪽부터 채움) */
.step-card-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:4rem }
.step-card { position:relative; background:#fff; border:1px solid #e5e5e5; border-radius:20px; padding:4rem }
.step-card-ico { position:absolute; top:4rem; right:4rem; height:5rem; display:flex; align-items:flex-end }
.step-card-ico img { height:100%; width:auto }
.step-card-badge {
	display:inline-flex; align-items:center; padding:0.3rem 1rem; margin-top:6rem; margin-bottom:2rem; border-radius:30px;
	background:#eff8fe; font-family:var(--e-font); font-weight:700; font-size:1.6rem; color:var(--primary)
}
.step-card-tit { margin-bottom:1rem; font-size:2.6rem; font-weight:700; color:var(--dark) }
.step-card-desc { font-size:1.8rem; line-height:1.5; color:#444 }


/* =========================== 특징 카드 그리드 : 아이콘(중앙) + 타이틀/설명(좌측 정렬), 4열 */
.feature-card-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:3rem }
.feature-card {
	display:flex; flex-direction:column; align-items:center;
	height:34rem; padding:4rem 3rem; border:1px solid #e5e5e5; border-radius:20px; background:#fff
}
.feature-card-ico { flex:none; height:7rem; display:flex; align-items:center }
.feature-card-ico img { height:100%; width:auto }
.feature-card-tit { width:100%; margin-top:4rem; margin-bottom:1rem; font-size:2.6rem; font-weight:600; color:var(--dark);}
.feature-card-desc { width:100%; font-size:1.8rem; line-height:1.5; color:#444 }


/* =========================== 신청서 폼 : 라벨의 ico_required(별표)가 있으면 해당 input이 필수항목 */
.form-box { margin-bottom:6rem; background:var(--bg-light); border-radius:20px; padding:4rem }
.form-row { display:flex; gap:2rem; margin-bottom:3rem }
.form-row:last-child { margin-bottom:0 }
.form-row.vertical { flex-direction:column; gap:1.5rem }
.form-field { flex:1; min-width:0 }
.form-label { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.8rem; font-size:1.8rem; font-weight:500; color:var(--dark) }
.form-label .required { width:1.6rem; height:1.6rem }
.form-input {
	display:block; width:100%; height:54px; padding:0 2rem; border:1px solid var(--line); border-radius:8px;
	background:#fff; font-size:1.8rem; color:var(--dark); font-family:inherit
}
.form-input::placeholder { color:var(--sub) }
.form-input:focus { outline:none; border-color:var(--primary) }
.form-input.text-right { text-align:right }
.form-input.form-textarea { height:28rem; padding:1.4rem 2rem; resize:none; line-height:1.5 }
.form-address-line { margin-top:1rem }

/* input 옆에 체크박스 등이 한 줄로 나란히 오는 경우 (담당자명 옆 "사업자등록상 정보와 동일" 등) */
.form-inline { display:flex; align-items:center; gap:2rem }
.form-inline .form-input { flex:1; min-width:0 }
.form-inline .check-item { flex:none; white-space:nowrap }

/* input 너비를 절반으로 : .form-inline 안에서든 단독으로든 항상 적용되도록 마지막에 배치 */
.form-input.half { width:50%; flex:0 0 50%; max-width:50% }

/* 우편번호 검색 행 */
.form-postal { display:flex; align-items:center; gap:2rem; flex-wrap:wrap }
.form-postal .form-input { width:23.1rem; flex:none }
.btn-postal {
	display:inline-flex; align-items:center; gap:1.3rem; height:54px; padding:0 2rem;
	border:1px solid var(--primary); border-radius:8px; background:#fff; color:var(--primary); font-size:1.6rem; white-space:nowrap; cursor:pointer
}
.btn-postal img { width:1.8rem; height:1.8rem }
.form-note { font-size:1.6rem; color:var(--txt) }

/* 사업자번호 3분할 입력 + 개인/법인 라디오 */
.biz-num-row { display:flex; align-items:center; gap:2.2rem; flex-wrap:wrap }
.biz-num-group { display:flex; align-items:center; gap:1.1rem }
.biz-num-group .form-input { width:13rem; text-align:center; padding:0 1rem }
.biz-num-group span { font-size:1.8rem; color:var(--txt) }

/* 체크박스 / 라디오 공통 (appearance:none으로 디자인에 맞게 커스텀) */
.check-item,
.radio-item { display:inline-flex; align-items:center; gap:1rem; font-size:1.8rem; color:var(--txt); cursor:pointer }
.check-item input,
.radio-item input {
	appearance:none; -webkit-appearance:none; position:relative; flex:none;
	width:2.4rem; height:2.4rem; margin:0; border:1px solid var(--line); border-radius:4px; background:#fff; cursor:pointer
}
.radio-item input { border-radius:50% }
.check-item input:checked,
.radio-item input:checked { background:var(--primary); border-color:var(--primary) }
.check-item input:checked:after {
	content:''; position:absolute; left:50%; top:44%; width:5px; height:9px;
	border:solid #fff; border-width:0 2px 2px 0; transform:translate(-50%,-50%) rotate(45deg)
}
.radio-item input:checked:after {
	content:''; position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:50%;
	background:#fff; transform:translate(-50%,-50%)
}

.service-check-list { display:flex; flex-wrap:wrap; gap:2rem 4rem }
.check-list-col { display:flex; flex-direction:column; gap:2rem }

/* 계좌 안내 등 정적 정보 박스 : 좌측 타이틀 - 우측 내용 */
.info-box {
	display:flex; align-items:center; justify-content:space-between; gap:2rem;
	height:100%; min-height:8.9rem; padding:1.6rem 2rem; border-radius:10px; background:#fff
}
.info-box-tit { flex:none; font-size:1.8rem; font-weight:500; color:var(--dark) }
.info-box-desc { text-align:right; font-size:1.6rem; line-height:1.5; color:var(--txt) }


/* =========================== 타이틀 오버레이 히어로 이미지 : 좌측은 .inner 기준선에 맞추고 우측은 화면 끝까지 꽉 채움(반쪽 풀블리드) */
/* .inner 안에 넣어서 좌측 시작점은 .inner와 항상 동일하게 맞추고, 우측만 화면 끝까지 당겨서 블리드 (.inner의 max-width/padding 계산과 동일한 공식) */
.title-hero {
	position:relative; height:62.5rem; border-radius:20px 0 0 20px; overflow:hidden;
	margin-right:calc(-1 * ((100vw - var(--mainsize)) / 2 + 20px))
}
.title-hero-bg { display:block; width:100%; height:100%; object-fit:cover }
.title-hero:after {
	content:''; position:absolute; inset:0;
	background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(2,48,105,0.8) 75.52%)
}
.title-hero-txt { position:absolute; left:8rem; right:6rem; bottom:6rem; z-index:1; color:#fff }
.title-hero-txt h2 { margin-bottom:2.2rem; font-size:4.8rem; font-weight:700 }
.title-hero-txt p { font-size:1.8rem; line-height:1.8 }


/* =========================== 2열 비교표 (에스크로 의무/비의무 대상 등) */
/* border-collapse:collapse는 border-radius + overflow:hidden과 같이 쓰면 테이블 자체의 border가 셀 경계 충돌에 밀려 안 그려지는 브라우저 버그가 있어 separate로 사용 */
.compare-table { width:100%; border-collapse:separate; border-spacing:0; border:2px solid var(--primary); border-radius:20px; overflow:hidden }
.compare-table th,
.compare-table td { vertical-align:middle }
.compare-table th { height:60px; background:var(--primary); color:#fff; font-size:1.8rem; font-weight:600 }
.compare-table th:not(:last-child) { border-right:1px solid var(--line) }
/* text-align은 기본 가운데 정렬, 좌측 정렬이 필요한 셀은 .compare-table td.left 처럼 별도 클래스로 덮어쓰기 */
.compare-table td { height:7.6rem; padding:1.5rem 2rem; text-align:center; font-size:1.8rem; line-height:1.5; color:var(--txt); border-top:1px solid var(--line) }
.compare-table td.left { text-align:left }
.compare-table td:first-child:not(:only-child) { border-right:1px solid var(--line) }
.compare-table td:nth-child(2):not(:last-child) { border-right:1px solid var(--line) }
/* rowspan으로 다음 행의 셀 개수가 줄어들면 :last-child 판정이 어긋나므로, 해당 행에서는 border-r로 직접 지정 */
.compare-table td.border-r { border-right:1px solid var(--line) }
.compare-table td b { font-weight:600 }

/* kv 모디파이어 : 구분/내용 형태의 용어 목록 (8행 등 행이 많을 때), 행간 얇은 구분선 + 첫 열 강조 */
.compare-table.kv td { height:60px; padding:1rem 2rem; text-align:left }
.compare-table.kv tr:first-child td { border-top:0 }
.compare-table.kv td:first-child { background:var(--bg-light); font-weight:500; color:var(--dark) }


/* =========================== 가로 스텝 플로우 (아이콘 카드 + STEP뱃지, 화살표로 연결) */
.flow-steps-wrap { background:var(--bg-light); border-radius:20px; padding:5rem }
.flow-steps-label { margin-bottom:2rem; font-size:2.4rem; font-weight:700; color:var(--primary); text-align: left;; }
.flow-steps-label + .flow-steps { margin-bottom:5rem }
.flow-steps { display:flex; gap:5rem }
.flow-steps li {
	position:relative; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:1.5rem;
	padding:3rem 1rem; border:3px solid var(--line); border-radius:20px; background:#fff; text-align:center
}
.flow-steps li:not(:last-child):after {
	content:''; position:absolute; right:-3rem; top:50%; z-index:1;
	width:10px; height:12px; background:url(../img/ico_step_arrow.svg) no-repeat center/contain;
	transform:translateY(-50%)
}
.flow-steps .step-badge { font-family:var(--e-font); font-weight:700; font-size:1.6rem; color:var(--primary) }
.flow-steps .step-ico { height:4rem; display:flex; align-items:center }
.flow-steps .step-ico img { height:100%; width:auto }
.flow-steps .step-tit { font-size:2rem; color:var(--dark); font-weight: 500;}


/* =========================== 서비스 화면 스크린샷 나란히 */
.screen-preview-row { display:flex; gap:2rem }
.screen-preview { flex:1; min-width:0 }
.screen-preview img { display:block; width:100%; border-radius:20px; border:1px solid var(--line) }
.screen-preview p { margin-top:1.5rem; text-align:center; font-size:2rem; color:var(--txt) }


/* =========================== QR 프로모션 배너 : 타이틀 + 브랜드로고 + 웹툰 4컷(번호캡션+말풍선) + 앱 연동 다이어그램 */
.promo-title { margin-bottom:2rem; font-size:4.8rem; font-weight:700; color:var(--dark); text-align:center }
.promo-title span { color:var(--primary) }
.promo-brand-row { display:flex; align-items:center; justify-content:center; gap:1.8rem; margin-bottom:5rem }
.promo-brand-row .logo { height:3rem; width:auto }
.promo-brand-row .x { width:2.4rem; height:auto }

.toon-strip { display:grid; grid-template-columns:repeat(4, 1fr); gap:3rem; margin-bottom:8rem }
.toon-panel { position:relative }
.toon-panel:not(:last-child):after {
	content:''; position:absolute; right:-1.9rem; top:50%; z-index:1;
	width:12px; height:14px; background:url(../img/ico_step_arrow.svg) no-repeat center/contain;
	transform:translateY(-50%)
}
/* 원본 비율(327:460, 세로형) 유지 : 고정 height 대신 aspect-ratio로 폭에 맞춰 세로 비율 그대로 스케일 */
.toon-img-wrap { position:relative; border:1px solid #9BA4B5;  aspect-ratio:327/460; border-radius:20px; overflow:hidden }
.toon-img-wrap img { display:block; width:100%; height:100%; object-fit:cover }
.toon-cap { position:absolute; left:2rem; top:2.4rem; display:flex; align-items:center; gap:1.5rem }
.toon-cap-num {
	flex:none; width:4.5rem; height:4.5rem; border-radius:50%; background:var(--primary); color:#fff;
	display:flex; align-items:center; justify-content:center; font-family:var(--e-font); font-size:3rem; font-weight:700
}
.toon-cap-tit { font-size:2.4rem; font-weight:700; color:var(--dark) }
.toon-cap-desc { font-size:1.8rem; font-weight:500; color:var(--txt) }
/* top:90.9% = 이미지 하단에서 42px(=원본 460px의 약 9.1%) 위 지점, 비율이 바뀌어도 이미지 높이 대비 같은 위치를 유지 */
.toon-bubble {
	position:absolute; left:50%; top:90.9%; transform:translateX(-50%);
	padding:1rem 4rem; border-radius:50px; background:#fff; box-shadow:0 0 10px rgba(2,48,105,0.3);
	text-align:center; white-space:nowrap
}
.toon-bubble p { font-size:1.8rem; font-weight:500; color:var(--txt) }
.toon-bubble b { display:block; font-size:2.4rem; font-weight:700; color:var(--primary) }
.toon-bubble b.inline { display:inline; font-size:inherit }

.eco-band { display:flex; align-items:center; justify-content:center; gap:2rem; background:var(--bg-light); border-radius:20px; padding:3rem 4rem }
.eco-app { display:flex; align-items:center; gap:1.5rem }
.eco-app img { flex:none; height:9.2rem; width:auto }
.eco-app-tit { font-size:3rem; font-weight:700; color:var(--primary) }
.eco-app-desc { font-size:1.8rem; font-weight:500; color:var(--txt) }
.eco-circle {
	flex:none; width:9.2rem; height:9.2rem; border-radius:50%; background:var(--primary);
	display:flex; align-items:center; justify-content:center
}
.eco-circle img { width:4.4rem; height:auto }
.eco-box {
	flex:none; width:6.1rem; height:6.1rem; border:4px solid var(--primary); border-radius:10px;
	display:flex; align-items:center; justify-content:center
}
.eco-box img { width:3.4rem; height:auto }
.eco-dots { flex:none; display:flex; align-items:center; gap:2.4rem }
.eco-dots span { width:1rem; height:1rem; border-radius:50%; background:var(--line) }


/* 약관동의 */
.terms-item { margin-bottom:2rem }
.terms-item:last-child { margin-bottom:0 }
.terms-box {
	margin-top:1rem; height:14.9rem; padding:1rem; overflow-y:auto; border:1px solid var(--line); border-radius:10px;
	background:#fff; font-size:1.4rem; line-height:1.5; color:var(--txt); white-space:pre-line
}

.btn-submit {
	position:relative; z-index:0; overflow:hidden;
	display:flex; align-items:center; justify-content:center; gap:3.3rem; margin:6rem auto 0; width:fit-content;
	padding:2rem 6rem; border:0; border-radius:50px; background:var(--primary); color:#fff;
	font-size:1.8rem; font-weight:700; cursor:pointer
}
.btn-submit:before {
	content:''; position:absolute; z-index:-1; inset:0; background:#0097EF;
	transform:scaleX(0); transform-origin:left; transition:transform 0.35s ease
}
.btn-submit img { width:auto; height:0.9rem }
@media (hover:hover) {
	.btn-submit:hover:before { transform:scaleX(1) }
}


/* =========================== 텍스트리스트 + 이미지 (li 호버/클릭 시 우측 이미지 전환) */
.benefit-row { display:flex; align-items:center; justify-content:space-between; gap:4rem }
.benefit-list { flex:0 0 auto; width:55rem }
.benefit-list li {
	padding:2rem 0; font-size:2rem; color:var(--sub); border-bottom:1px solid #eee;
	cursor:pointer; transition:color 0.2s, font-weight 0.2s
}
.benefit-list li:first-child { padding-top:0 }
.benefit-list li.on { font-weight:600; color:var(--dark) }
.benefit-img { flex:1; height:32.2rem; border-radius:20px; overflow:hidden }
.benefit-img img { display:block; width:100%; height:100%; object-fit:cover }


/* =========================== 흐름도 등 다이어그램(이미지 통삽입) 박스 : 박스 최대 1840px, 내부 콘텐츠 1400px, PC 상하 패딩 10rem */
.diagram-box { background:var(--bg-light); border-radius:20px; padding:10rem 20px; text-align:center }
.diagram-box-inner { max-width:var(--mainsize); margin:0 auto;}
/* 흐름도 이미지 1장을 위한 규칙이므로 직계 자식만 대상(하위 .flow-steps 아이콘 등에 영향 없도록) */
.diagram-box-inner > img { max-width:100%; height:auto }

/* no-scroll : 스크롤 없이, 이미지 원본 크기 이상으로 확대(깨짐) 되지 않고 컨테이너보다 크면 그만큼만 축소 (정산시스템 흐름도 등) */
.diagram-box.no-scroll .diagram-box-inner > img { max-width:100%; width:auto }


/* =========================== 정산 구조 다이어그램 : 상단 3박스(화살표 연결) + 하단 3박스(트리 커넥터) + 안내 노트 */
.settle-row-top { display:flex; gap:5rem }
.settle-row-top .settle-box { position:relative; flex:1; min-width:0 }
.settle-row-top .settle-box:not(:last-child):after {
	content:''; position:absolute; right:-3rem; top:50%; z-index:1;
	width:12px; height:14px; background:url(../img/ico_step_arrow.svg) no-repeat center/contain;
	transform:translateY(-50%)
}
.settle-box {
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
	height:100%; padding:3rem 1rem; border:3px solid var(--line); border-radius:20px; background:#fff; text-align:center
}
.settle-box-tit { font-size:2rem; font-weight:500; color:var(--dark) }
.settle-box-desc { font-size:1.8rem; font-weight:500; color:var(--txt) }
.settle-box-main { border:none; background:var(--primary); box-shadow:0 20px 15px rgba(2,48,105,0.2); gap:0.5rem }
.settle-logo { display:flex; align-items:center; justify-content:center; gap:1.3rem; margin-bottom:0.5rem }
.settle-logo img:first-child { height:5.9rem; width:auto }
.settle-logo img:last-child { height:2.9rem; width:auto }
.settle-box-main .settle-box-desc { color:#fff }

/* 상단 중앙 박스(가맹점 전용 계좌)에서 하단 3박스로 뻗는 트리 커넥터 : 3열 grid와 동일한 gap 기준으로 좌우 끝 열의 중심까지 트렁크를 계산 */
.settle-tree { position:relative; height:4rem }
.settle-tree:before {
	content:''; position:absolute; left:50%; top:0; height:2rem; width:2px; background:var(--line); transform:translateX(-50%)
}
.settle-tree:after {
	content:''; position:absolute; top:2rem; left:calc(16.666% - 1rem); right:calc(16.666% - 1rem); height:2px; background:var(--line)
}
.settle-row-sub { display:grid; grid-template-columns:repeat(3, 1fr); gap:3rem }
.settle-row-sub .settle-box { position:relative }
.settle-row-sub .settle-box:before {
	content:''; position:absolute; left:50%; top:-2rem; width:2px; height:2rem; background:var(--line); transform:translateX(-50%)
}

.settle-note {
	margin-top:4rem; padding:2rem 5rem; border:3px dashed var(--primary); border-radius:20px;
	background:#fff; text-align:center; font-size:2.4rem; font-weight:500; color:var(--primary)
}


/* =========================== 이미지 확대보기 모달 (다이어그램 이미지 클릭 시, 모바일 전용) */
.img-zoom-modal {
	position:fixed; inset:0; z-index:9999;
	display:flex; align-items:center; justify-content:center; padding:20px;
	background:rgba(0,0,0,0); opacity:0; visibility:hidden;
	transition:opacity 0.25s ease, background-color 0.25s ease
}
.img-zoom-modal.on { background:rgba(0,0,0,0.85); opacity:1; visibility:visible }
.img-zoom-modal img { max-width:100%; max-height:100%; border-radius:8px }
.img-zoom-close { position:absolute; top:20px; right:20px; width:36px; height:36px; border:0; background:transparent; cursor:pointer }
.img-zoom-close:before,
.img-zoom-close:after { content:''; position:absolute; left:50%; top:50%; width:24px; height:2px; background:#fff }
.img-zoom-close:before { transform:translate(-50%,-50%) rotate(45deg) }
.img-zoom-close:after { transform:translate(-50%,-50%) rotate(-45deg) }


/* =========================== 특징 리스트(대시 불릿) : 연한 배경 박스 안에 짧은 문장 여러 줄 */
.feature-box { background:var(--bg-light); border-radius:20px; padding:5rem }
.dash-list { display:flex; flex-direction:column }
.dash-list li { position:relative; padding-left:2rem; font-size:1.8rem; line-height:1.8; color:var(--sub) }
.dash-list li:before { content:''; position:absolute; left:0; top:1.4rem; width:3px; height:3px; background:#0097ef }


/* =========================== 4단계 아이콘 리본(이용안내) : 알약형 배경이 서로 겹치며 이어지는 형태 */
.step-ribbon { display:flex; }
.step-ribbon li {
	position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:2rem;
	padding:3rem 0; border-radius:100px; margin-left:-4rem
}
.step-ribbon li:first-child { margin-left:0 }
.step-ribbon li:nth-child(1) { background:rgba(171,172,229,0.5); z-index:4 }
.step-ribbon li:nth-child(2) { background:rgba(121,181,254,0.5); z-index:3 }
.step-ribbon li:nth-child(3) { background:rgba(129,191,249,0.5); z-index:2 }
.step-ribbon li:nth-child(4) { background:#d8f3ff; z-index:1 }
.step-ribbon .step-ico { height:4.5rem; display:flex; align-items:center }
.step-ribbon .step-ico img { height:100%; width:auto }
.step-ribbon .step-label { display:flex; align-items:center; gap:2rem; font-size:2rem; color:var(--dark) }
.step-ribbon .step-label b { font-family:var(--e-font); font-weight:600; font-size:1.8rem }
.step-ribbon li:nth-child(1) .step-label b { color:#7b4c9e }
.step-ribbon li:nth-child(2) .step-label b { color:#347dd5 }
.step-ribbon li:nth-child(3) .step-label b { color:#0081cc }
.step-ribbon li:nth-child(4) .step-label b { color:#0097ef }


/* =========================== 원형 스텝(이용안내) : 원 5개가 가로 라인으로 이어지는 형태, 라벨은 원 아래 */
.step-circles ul { position:relative; display:flex; justify-content:space-between }
.step-circles ul:before { content:''; position:absolute; left:9rem; right:9rem; top:9rem; height:0; border-top:1px dashed var(--line) }
.step-circles li { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:2rem; width:18rem }
.step-circles .circle { width:18rem; height:18rem; border-radius:100px; display:flex; align-items:center; justify-content:center }
.step-circles .circle img { width:7rem; height:auto }
.step-circles .circle-label { display:flex; align-items:center; gap:2rem; font-size:2rem; color:var(--dark) }
.step-circles .circle-label b { font-family:var(--e-font); font-weight:600; font-size:1.8rem }
.step-circles li:nth-child(1) .circle { background:#e0e0f5 }
.step-circles li:nth-child(1) .circle-label b { color:#7b4c9e }
.step-circles li:nth-child(2) .circle { background:#bbcee5 }
.step-circles li:nth-child(2) .circle-label b { color:#34649e }
.step-circles li:nth-child(3) .circle { background:#bcdaff }
.step-circles li:nth-child(3) .circle-label b { color:#0081cc }
.step-circles li:nth-child(4) .circle { background:#d8f3ff }
.step-circles li:nth-child(4) .circle-label b { color:#0097ef }
.step-circles li:nth-child(5) .circle { background:#c9f2f2 }
.step-circles li:nth-child(5) .circle-label b { color:#48b2b2 }


/* =========================== 카드사별 인증방법 비교 표 : 다른 표들과 달리 셀이 5px씩 서로 떨어져있고, 표 자체는 라운드 없음 */
.auth-table-wrap { background:#f9f9f9; border-radius:20px; padding:5rem }
.auth-table { width:100%; border-collapse:separate; border-spacing:5px }
.auth-table th { height:60px; vertical-align:middle; font-size:1.8rem; font-weight:600; color:#fff }
.auth-table th:first-child { background:#00306a; width:33.5% }
.auth-table th:not(:first-child) { background:#0097ef }
.auth-table th:nth-child(2) { width:24% }
.auth-table th:nth-child(3) { width:42.5% }
.auth-table td {
	height:60px; padding:1rem 2rem; text-align:center; vertical-align:middle; font-size:1.8rem; color:var(--txt);
	background:#fff; border:1px solid #e5e5e5
}
.auth-table td.card-list { font-size:1.8rem; line-height:1.4 }


/* =========================== 스텝(이미지+번호+타이틀+설명) 지그재그 리스트 : 이미지 700px 고정 비율, 줄어들 때도 잘리지 않고 같은 비율로 축소 */
.step-list { display:flex; flex-direction:column; gap:10rem }
.step-row { display:flex; align-items:center; gap:13rem }
.step-row.reverse { flex-direction:row-reverse }
.step-row .step-img { flex:1 1 70rem; min-width:0; height:36.8rem; border-radius:20px; overflow:hidden }
.step-row .step-img img { display:block; width:100%; height:100%; object-fit:cover }
.step-row .step-txt { flex:1 1 57rem; min-width:0; display:flex; flex-direction:column; gap:3rem }
.step-row .step-num {
	font-family:var(--e-font); font-size:5rem; font-weight:700;
	color:rgba(0,151,239,0.2); letter-spacing:-0.02em
}
.step-row .step-body { display:flex; flex-direction:column; gap:1rem }
.step-row .step-tit { font-size:2.6rem; font-weight:600; color:var(--dark) }
.step-row .step-desc { font-size:1.8rem; line-height:1.5; color:var(--txt) }


/* =========================== 게시판(목록) 공통 : 검색바 + Total + 행 목록/이벤트 카드 + 페이지네이션 */
.board-search {
	display:flex; align-items:center; justify-content:center; gap:1rem; width:60rem; margin:0 auto 4rem;
	padding-bottom:0.8rem; border-bottom:3px solid var(--primary)
}
.board-search-select-wrap { position:relative; flex:none; width:150px; padding-right:1.6rem }
.board-search-select {
	appearance:none; -webkit-appearance:none; -moz-appearance:none;
	width:100%; border:0; outline:0; background:transparent; font-size:1.6rem; color:var(--txt); cursor:pointer
}
.board-search-select-wrap::after {
	content:''; position:absolute; top:50%; right:0; width:7px; height:7px; margin-top:-5px;
	border-right:2px solid var(--txt); border-bottom:2px solid var(--txt); transform:rotate(45deg); pointer-events:none
}
.board-search-input { flex:1; min-width:0; border:0; outline:0; font-size:1.6rem; color:var(--dark); padding-left:20px;}
.board-search-input::placeholder { color:var(--sub) }
.board-search-btn {
	flex:none; width:54px; height:54px; padding:0; border:0;
	background:url(../img/ico_search.svg) no-repeat center/24px auto; cursor:pointer
}

.board-total { padding-bottom:1.5rem; border-bottom:1px solid var(--line); font-family:var(--e-font); font-weight:600; font-size:1.4rem; color:var(--txt) }
.board-empty { padding:12rem 0; text-align:center; font-size:1.8rem; color:var(--sub) }
.board-total:has(+ .event-grid) { margin-bottom:40px }

.board-list { display:flex; flex-direction:column }
.board-row { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:2.4rem 0; border-bottom:1px solid var(--line); cursor:pointer }
.board-row:hover .board-row-tit { color:var(--primary) }
.board-row-left { display:flex; align-items:center; gap:4rem; min-width:0 }
.board-row-num { flex:none; width:3rem; text-align:center; font-family:var(--e-font); font-size:1.4rem; color:var(--txt) }
.board-row-tit { font-size:2rem; font-weight:500; color:var(--dark) }
.board-row-date { flex:none; font-family:var(--e-font); font-size:1.4rem; color:var(--sub) }

.pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 2rem; margin-top:5rem }
.pagination-arrows { display:flex; align-items:center; gap:1rem }
.pagination-arrows img { width:24px; height:24px }
.pagination-nums { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem }
.pagination-nums a {
	display:flex; align-items:center; justify-content:center; width:4rem; height:4rem; border-radius:50px;
	background:#fff; font-family:var(--e-font); font-size:1.4rem; color:#000
}
.pagination-nums a.on { background:var(--primary); font-weight:700; color:#fff }


/* =========================== 게시판(뷰) 공통 : 제목/메타 + 본문 + 목록 버튼 + 이전글/다음글 */
.board-view-head { position:relative; padding:4rem 0 3rem; border-top:1px solid #222; border-bottom:1px solid var(--line); text-align:center }
.board-view-back {
	position:absolute; left:0; top:50%; width:40px; height:40px; margin-top:-20px;
	background:url(../img/ico_bd_back.svg) no-repeat center/16px auto
}
.board-view-title { font-size:4.8rem; font-weight:700; line-height:1.3; color:var(--txt) }
.board-view-date { display:block; margin-top:1.5rem; font-family:var(--e-font); font-size:1.6rem; color:var(--sub) }

.board-view-body {
	min-height:34rem; padding:6rem 0; border-bottom:1px solid var(--line);
	font-size:1.6rem; line-height:1.8; color:var(--txt)
}

.board-view-btns { display:flex; justify-content:center; padding:5rem 0 4.6rem }
.board-view-list-btn {
	display:flex; align-items:center; gap:3.3rem; padding:2rem 6rem; border-radius:50px;
	background:var(--primary); font-size:1.8rem; font-weight:700; color:#fff
}
.board-view-list-btn img { width:20px; height:20px }

.board-view-nav { border-radius:20px; overflow:hidden }
.board-view-nav-row {
	display:flex; align-items:center; justify-content:space-between; gap:2rem;
	padding:2rem 4rem; background:#f9f9f9;
}
.board-view-nav-left { display:flex; align-items:center; gap:4rem; min-width:0 }
.board-view-nav-label { flex:none; display:flex; align-items:center; gap:1.6rem; font-family:var(--e-font); font-size:1.6rem; font-weight:600; color:var(--dark) }
.board-view-nav-label img { width:24px; height:24px }
.board-view-nav-tit { min-width:0; font-size:1.8rem; color:var(--txt) }
.board-view-nav-date { flex:none; font-family:var(--e-font); font-size:1.4rem; color:var(--sub) }


.event-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:4rem 3rem; margin-bottom:5rem }
.event-card { display:block }
.event-card-img { height:24rem; border-radius:20px; overflow:hidden; margin-bottom:2rem }
.event-card-img img { display:block; width:100%; height:100%; object-fit:cover }
.event-card-tit { font-size:2.4rem; font-weight:500; color:var(--dark) }
.event-card-date { margin-top:1rem; font-family:var(--e-font); font-size:1.4rem; color:var(--sub) }

/* FAQ 아코디언 */
.faq-list { display:flex; flex-direction:column }
.faq-item { border-bottom:1px solid var(--line) }
.faq-q {
	display:flex; align-items:center; justify-content:space-between; gap:2rem; width:100%; padding:2.15rem 0;
	border:0; background:none; text-align:left; cursor:pointer
}
.faq-q-left { display:flex; align-items:center; gap:4rem; min-width:0 }
.faq-q-mark { flex:none; width:3rem; text-align:center; font-family:var(--e-font); font-weight:700; font-size:1.4rem; color:var(--primary) }
.faq-q-tit { font-size:2rem; font-weight:500; color:var(--dark) }
.faq-q-ico { flex:none; width:3.2rem; height:3.2rem; transition:transform 0.25s ease }
.faq-a { display:none; padding:4rem; background:#f9f9f9; font-size:1.6rem; line-height:1.5; color:var(--txt) }
.faq-item.on .faq-q-ico { transform:rotate(180deg) }
.faq-item.on .faq-a { display:block }

/* 결제내역조회 : 결제수단 선택 필(pill) 탭 */
.pay-method-tabs {
	display:flex; align-items:center; justify-content:center; width:fit-content; margin:0 auto 5rem;
	background:#dceef9; border-radius:50px
}
.pay-method-tabs a {
	display:flex; align-items:center; justify-content:center; padding:1.4rem 4rem; border-radius:50px;
	background:#dceef9; font-size:2rem; font-weight:500; color:#77b4d8; transition:background 0.15s
}
.pay-method-tabs a:not(.on):hover { background-color: #C8E7F9;}
.pay-method-tabs a.on { background:var(--primary); color:#fff }

/* 결제수단 탭별 콘텐츠 (페이지 이동 없이 JS로 전환, sub.js 참고) */
.pay-tab-panel { display:none }
.pay-tab-panel.on { display:block }

/* 폼 안의 select (은행 선택 등) : form-input 박스 스타일에 커스텀 화살표만 추가 */
.form-select-wrap { position:relative }
.form-select-wrap .form-input {
	appearance:none; -webkit-appearance:none; -moz-appearance:none;
	padding-right:4rem; cursor:pointer
}
.form-select-wrap:after {
	content:''; position:absolute; top:50%; right:2rem; width:8px; height:8px; margin-top:-6px;
	border-right:2px solid var(--sub); border-bottom:2px solid var(--sub); transform:rotate(45deg); pointer-events:none
}

/* 카드번호 3분할 입력 */
.card-num-row { display:flex; align-items:center; gap:1.1rem }
.card-num-row .form-input { flex:1; min-width:0; text-align:center }
.card-num-row .form-input.masked { background:#f9f9f9 }
.card-num-row span { flex:none; font-size:1.8rem; color:var(--txt) }

.result-note { padding:2rem; border-radius:8px; background:var(--bg-light); font-size:1.8rem; color:#0081cc }
.result-note.plain { margin-top:20px; padding:0; background:none; color:var(--txt) }
.result-note.plain a { color:#0081cc; text-decoration:underline !important }

/* 조회결과 표 : .feature-box(연한 배경 박스) 안에 담아 사용, 행 클릭 시 결제상세정보 팝업 */
.pay-tab-panel + .feature-box { margin-top:20px }
.result-table { width:100%; margin-bottom:20px; border-collapse:collapse; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.result-table th,
.result-table td { padding:1.6rem 1rem; text-align:center; font-size:1.6rem; color:var(--txt) }
.result-table thead th { font-weight:600; color:var(--dark); border-bottom:2px solid var(--primary) }
.result-table tbody tr { border-bottom:1px solid var(--line); cursor:pointer; transition:background 0.15s }
.result-table tbody tr:last-child { border-bottom:0 }
.result-table tbody tr:hover { background:#fff }

/* 결제상세정보 레이어팝업 */
.pay-detail-modal {
	position:fixed; inset:0; z-index:9999;
	display:flex; align-items:center; justify-content:center; padding:20px;
	background:rgba(0,0,0,0); opacity:0; visibility:hidden;
	transition:opacity 0.25s ease, background-color 0.25s ease
}
.pay-detail-modal.on { background:rgba(0,0,0,0.5); opacity:1; visibility:visible }
.pay-detail-box {
	position:relative; width:100%; max-width:76rem; max-height:90vh; overflow-y:auto; border-radius:20px;
	background:#fff; padding:4rem;
	transform:translateY(10px); opacity:0; transition:transform 0.25s ease, opacity 0.25s ease
}
.pay-detail-modal.on .pay-detail-box { transform:translateY(0); opacity:1 }
.pay-detail-x { position:absolute; top:2rem; right:2rem; width:32px; height:32px; border:0; background:transparent; cursor:pointer }
.pay-detail-x:before,
.pay-detail-x:after { content:''; position:absolute; left:50%; top:50%; width:18px; height:2px; background:var(--sub) }
.pay-detail-x:before { transform:translate(-50%,-50%) rotate(45deg) }
.pay-detail-x:after { transform:translate(-50%,-50%) rotate(-45deg) }
.pay-detail-head {
	display:flex; align-items:center; justify-content:space-between; gap:2rem;
	padding-bottom:2rem; padding-right:4rem; border-bottom:2px solid var(--primary)
}
.pay-detail-head h4 { font-size:2.4rem; font-weight:700; color:var(--dark) }
.pay-detail-print {
	display:flex; flex:none; align-items:center; gap:0.8rem; padding:1rem 2rem; border:0; border-radius:8px;
	background:var(--primary); font-size:1.5rem; font-weight:500; color:#fff; cursor:pointer
}
.pay-detail-print-ico {
	display:inline-block; flex:none; width:18px; height:18px; background:#fff;
	-webkit-mask:url(../img/ico_print.svg) no-repeat center/contain; mask:url(../img/ico_print.svg) no-repeat center/contain
}
.pay-detail-list { display:flex; flex-direction:column }
.pay-detail-row { display:flex; flex-wrap:wrap; gap:1rem 2rem; padding:1.6rem 0; border-bottom:1px solid var(--line) }
.pay-detail-row:last-child { border-bottom:0 }
.pay-detail-row dt { flex:0 0 10rem; font-size:1.6rem; color:var(--sub) }
.pay-detail-row dd { flex:1; min-width:20rem; margin:0; font-size:1.6rem; font-weight:500; color:var(--dark) }
.pay-detail-btn-row { display:flex; justify-content:center; margin-top:3rem }
.pay-detail-close {
	padding:1.4rem 6rem; border:0; border-radius:50px; background:var(--primary);
	font-size:1.8rem; font-weight:700; color:#fff; cursor:pointer
}

.btn-row { display:flex; align-items:center; justify-content:center; gap:2rem; margin-top:6rem }
.btn-row .btn-submit { margin:0 }
.btn-cancel {
	display:flex; align-items:center; justify-content:center; padding:2rem 6rem; border:0; border-radius:50px;
	background:#f0f0f0; font-size:1.8rem; font-weight:700; color:var(--sub); cursor:pointer
}


/* =========================== 기업소개 히어로 배너 : .wide-inner 안에서 좌우 인셋+라운드 (기업개요/연혁 등 공용, 높이 62.6rem 고정) */
.company-hero { position:relative; height:62.6rem; border-radius:30px; overflow:hidden }
.company-hero:after { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.3) }

/* CEO 인사말 전용 히어로 : 풀블리드(no radius), 높이가 .company-hero와 달라 별도 클래스로 분리 */
.ceo-hero { position:relative; height:49.2rem; overflow:hidden }
.ceo-hero:after { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.3) }

/* 제휴업체/오시는길 전용 히어로 : .wide-inner 안 라운드는 동일하지만 높이가 달라 별도 클래스로 분리 */
.partner-hero { position:relative; height:40rem; border-radius:30px; overflow:hidden }
.partner-hero:after { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.3) }
.partner-hero .company-hero-txt { font-size:4rem }

.company-hero-bg { display:block; width:100%; height:100%; object-fit:cover }
.company-hero-bg.zoom-slow { animation:companyHeroBgZoom 20s ease-in-out infinite alternate; transform-origin:center }
@keyframes companyHeroBgZoom { from { transform:scale(1) } to { transform:scale(1.12) } }
.company-hero-txt {
	position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
	padding:0 4rem; text-align:center; color:#fff; font-size:4.8rem; font-weight:700; line-height:1.3
}
/* CEO 인사말 전용 : 가운데 정렬 대신 좌측 하단(45px)에 배치 */
.company-hero-txt.left-bottom {
	align-items:flex-start; justify-content:flex-end; text-align:left; padding-bottom:45px
}
.company-hero-txt p {
	opacity:0; transform:translateY(30px);
	animation:companyHeroTxtIn 1s cubic-bezier(.16,1,.3,1) forwards
}
.company-hero-txt p:nth-child(1) { animation-delay:0.3s }
.company-hero-txt p:nth-child(2) { animation-delay:0.55s }
@keyframes companyHeroTxtIn { to { opacity:1; transform:translateY(0) } }

/* 회사개요 : 소개 문단 + 다크 섹션(배경사진+오버레이) 안의 정보 카드 그리드 */
.company-intro-desc { max-width:116rem; margin:2rem 0 4rem 0; font-size:2rem; line-height:1.8; color:var(--txt); text-align:left }
.company-dark-section { position:relative; padding:8rem 0; color:#fff; overflow:hidden }
.company-dark-bg { position:absolute; inset:0; z-index:-2 }
.company-dark-bg img { display:block; width:100%; height:100%; object-fit:cover }
.company-dark-bg:after { content:''; position:absolute; inset:0; z-index:-1; background:rgba(0,0,0,0.3) }
.company-dark-tit { margin-bottom:5rem; font-size:4.8rem; font-weight:700; line-height:1.3 }

.info-card-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem }
.info-card { position:relative; height:20rem; padding:4rem; border-radius:20px; background:#fff; display:flex; flex-direction:column; gap:3.5rem }
.info-card-ico { position:absolute; top:3rem; right:3rem; height:3.5rem; width:auto }
.info-card-tit { font-size:2.4rem; font-weight:500; color:var(--primary) }
.info-card-desc { font-size:2rem; font-weight:400; color:var(--dark); line-height:1.5 }

/* 기업소개(sub05_xx) 좌측 플로팅 2depth 메뉴 : subVisual 탭이 없는 페이지라 별도로 페이지 간 이동을 제공 */
.company-side-nav {
	position:fixed; left:3rem; top:50%; z-index:100; transform:translateY(-50%);
	display:flex; flex-direction:column; gap:0.5rem; padding:1.5rem 1rem;
	border-radius:30px; background:#fff; box-shadow:0 10px 30px rgba(2,48,105,0.12)
}
.company-side-nav a {
	display:block; padding:1.2rem 1.6rem; border-radius:20px; text-align:center; white-space:nowrap;
	font-size:1.5rem; font-weight:500; color:var(--txt); transition:background 0.15s, color 0.15s
}
.company-side-nav a:hover { background:var(--bg-light) }
.company-side-nav a.on { background:var(--primary); color:#fff; font-weight:700 }
@media (max-width:1680px) {
	.company-side-nav { display:none }
}

/* CEO 인사말 : 워터마크 로고 + 서명 */
.ceo-tagline { margin-bottom:5rem; font-size:4.8rem; font-weight:700; line-height:1.3; color:var(--dark) }
.ceo-greet { position:relative }
.ceo-greet-desc { max-width:81rem; font-size:1.8rem; line-height:1.8; color:var(--txt); white-space:pre-line; padding-bottom:6rem;}
.ceo-greet:before {
	content:''; position:absolute; top:0; right:0; bottom:0; width:100rem;
	background:url(../img/ceo_bg.png) no-repeat right / auto 100%; pointer-events:none
}
.ceo-sign { display:flex; align-items:center; gap:3rem;  padding-top:6rem; border-top:1px solid var(--line) }
.ceo-sign-tit { font-size:1.8rem; color:var(--txt) }
.ceo-sign-name { height:3.6rem; width:auto }

/* 연혁 : 세로 타임라인 */
.timeline { position:relative; padding-left:42rem }
.timeline-since { position:absolute; left:0; width:16rem; top:0; text-align:right; font-family:var(--e-font); font-size:1.6rem; color:var(--sub) }
.timeline-decade { position:absolute; left:0; width:16rem; top:2.8rem; text-align:right; font-size:4rem; font-weight:700; color:var(--primary) }
.timeline-track { position:absolute; left:28.9rem; top:0; bottom:0; width:2px; background:var(--line) }
.timeline-row { position:relative; display:flex; align-items:flex-start; gap:7rem; padding:35px 0 }
.timeline-row:first-child { padding-top:0 }
.timeline-dot {
	position:absolute; left:-13rem; top:4.95rem; width:8px; height:8px; border-radius:50%;
	background:var(--primary); transform:translateX(-50%); transition:width 0.3s ease, height 0.3s ease, top 0.3s ease, background 0.3s ease
}
.timeline-row.now .timeline-dot { left:-13rem; top:4.3rem; width:29px; height:29px; background:rgba(2,48,105,0.15) }
.timeline-row.now .timeline-dot:after { content:''; position:absolute; left:50%; top:50%; width:9px; height:9px; border-radius:50%; background:var(--primary); transform:translate(-50%,-50%) }
.timeline-year { flex:none; width:7.4rem; font-family:var(--e-font); font-size:3.9rem; font-weight:700; line-height:1; color:var(--primary) }
.timeline-events { flex:1; min-width:0; display:flex; flex-direction:column; gap:0.4rem }
.timeline-event { display:flex; gap:2rem; font-size:1.8rem; color:var(--txt) }
.timeline-event-month { flex:none; width:2.4rem; font-family:var(--e-font); font-weight:600; color:var(--sub) }

/* 제휴업체 : 5열 로고 카드 그리드 */
.sub-title + .partner-section { margin-top:8rem }
.partner-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:2rem 4rem }
.partner-card { display:flex; align-items:center; justify-content:center; height:10rem; padding:2rem; border:1px solid var(--line); border-radius:12px; background:#fff }
.partner-card img { max-width:70%; max-height:4.5rem; width:auto; height:auto }
.partner-section { margin-bottom:8rem }
.partner-section:last-child { margin-bottom:0 }

/* 제휴 협력사 : 전체 폭 배경 밴드(figma 기준 #f5fafe, 상하 10rem) 안에 표준 1400px 컬럼 콘텐츠 */
.partner-copart-section { width:100%; background:var(--bg-light); padding:10rem 0 }
.partner-copart-section .partner-section { margin-bottom:0 }

/* 오시는 길 : 지도 + 정보 카드 2단 */
.sub-title + .location-row { margin-top:8rem }
.location-row { display:flex; align-items:stretch; gap:2rem }
.location-map { flex:1 1 76.8rem; min-width:0; border:1px solid var(--line); border-radius:30px; overflow:hidden }
.location-map img,
.location-map #kakao-map { display:block; width:100%; height:60rem; object-fit:cover }
.location-card { flex:1 1 60rem; min-width:0; padding:7rem 4rem 4rem; border-radius:30px; background:var(--bg-light); display:flex; flex-direction:column }
.location-card-label { font-family:var(--e-font); font-weight:700; font-size:1.6rem; color:var(--primary) }
.location-card-tit { margin-top:1.2rem; font-size:2.6rem; font-weight:700; color:var(--dark) }
.location-card-divider { margin:2rem 0; height:1px; background:var(--line) }
.location-info-list { display:flex; flex-direction:column; gap:1.5rem }
.location-info-row { display:flex; align-items:flex-start; gap:1rem; font-size:1.8rem; line-height:1.5; color:var(--txt) }
.location-info-row img { flex:none; width:2.4rem; height:2.4rem; margin-top:0.1rem }
.location-map-btn {
	display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:auto; height:59px;
	border:1px solid var(--primary); border-radius:8px; background:#fff; font-size:1.8rem; font-weight:500; color:var(--primary)
}
.location-map-btn img { width:1.8rem; height:1.8rem }


/* =========================== 약관/정책 페이지 (개인정보처리방침 등) : 조항형 텍스트 + 표 */
.sr-only {
	position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
	clip:rect(0,0,0,0); white-space:nowrap; border:0
}

.terms_wrap { max-width:114rem; margin:0 auto }
.terms_wrap > p { font-size:1.7rem; line-height:1.9; color:var(--txt) }

.policy_section { margin-top:6rem; padding-top:6rem; border-top:1px solid var(--line) }
.policy_section h4 { margin-bottom:2rem; font-size:2.4rem; font-weight:700; color:var(--dark) }
.policy_section p { font-size:1.6rem; line-height:1.9; color:var(--txt) }
.policy_section p + p { margin-top:2rem }
.policy_section p strong { font-weight:600; color:var(--dark) }

.policy_table_wrap { margin:2.5rem 0; overflow-x:auto }
.policy_table { width:100%; min-width:80rem; border-collapse:collapse }
.policy_table th,
.policy_table td { padding:1.4rem 1.6rem; border:1px solid var(--line); font-size:1.5rem; line-height:1.6; text-align:left; vertical-align:top; color:var(--txt) }
.policy_table thead th { background:var(--bg-light); font-weight:600; color:var(--dark); text-align:center; white-space:nowrap; border-top:1px solid var(--line); }

.policy_addendum { padding:3rem 4rem; border-top:none; border-radius:20px; background:var(--bg-light) }
.policy_addendum h4 { color:var(--primary) }

.email_terms { max-width:114rem; margin:0 auto; font-size:1.7rem; line-height:2; color:var(--txt) }
.email_terms .highlight { font-weight:700; color:var(--primary) }
.email_terms .post_date { display:block; margin-top:2rem; font-family:var(--e-font); font-size:1.4rem; color:var(--sub) }

/* 위험 업종유형 안내 표 */
.terms_sector { overflow-x:auto }
.risk-table { width:100%; min-width:100rem; border-collapse:collapse }
.risk-table th,
.risk-table td { padding:1.6rem 1.8rem; border:1px solid var(--line); font-size:1.5rem; line-height:1.7; text-align:left; vertical-align:top; color:var(--txt) }
.risk-table thead th { background:var(--bg-light); font-weight:600; color:var(--dark); text-align:center; white-space:nowrap }
.risk-table tbody tr:nth-child(even) { background:var(--bg-light) }
.risk-table td.head { font-weight:600; color:var(--dark); white-space:nowrap }
.risk-table td.risk-x,
.risk-table td.risk-o { text-align:center; font-weight:700 }
.risk-table td.risk-x { color:#e05252 }
.risk-table td.risk-o { color:#e2951f }
.risk-table td.des { font-size:1.4rem; color:var(--sub) }


@media (max-width:1400px) {
	/* --mainsize(1400px) 이하부터는 풀블리드로 당길 여백이 없으므로 화면 끝 당김을 해제하고 양쪽 모서리를 둥글게 */
	.title-hero { margin-right:0; border-radius:20px }
}

@media (max-width:1200px) {
	#subVisual .subVisual-tab { gap:4rem; padding:0 4rem }
	.step-row .step-img { height:32rem }


	.toon-strip { grid-template-columns:repeat(2, 1fr); row-gap:8rem }

	/* 타임라인 : 좌측 연대 사이드바 없이 위→아래로 단순화 */
	.timeline { padding-left:0 }
	.timeline-since,
	.timeline-decade { position:static; display:block; text-align:left }
	.timeline-decade { margin-bottom:2rem }
	.timeline-track { left:0.8rem; top:10rem;}
	.timeline-row { padding-left:3.5rem; gap:4rem }
	.timeline-dot { left:0.9rem; top:4.55rem }
	.timeline-row.now .timeline-dot { left:0.9rem; top:3.8rem }
	.timeline-year { width:auto; margin-right:1rem; font-size: 2.9rem; }
	.timeline-events { flex-wrap:wrap }
}

@media (max-width:1024px) {
	#subVisual .subVisual-inner { --sv-h:32rem }
	#subVisual .subVisual-txt { top:12rem }
	#subVisual .subVisual-cate { font-size:3.2rem }

	/* 1024px 이하 : 탭메뉴 -> 드롭다운 */
	#subVisual .subVisual-tab-wrap { left:40px; right:40px; bottom:2rem; transform:none }
	#subVisual .subVisual-tab-trigger {
		display:flex; align-items:center; justify-content:space-between; width:100%;
		height:52px; padding:0 2rem; border-radius:12px; border:none; cursor:pointer;
		background:rgba(2,48,105,0.5); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px);
		color:#fff; font-size:1.6rem; font-weight:600
	}
	#subVisual .subVisual-tab-trigger .ico-caret {
		width:9px; height:9px; margin-top:-3px;
		border-right:2px solid #fff; border-bottom:2px solid #fff;
		transform:rotate(45deg); transition:transform 0.2s
	}
	#subVisual .subVisual-tab-wrap.on .subVisual-tab-trigger .ico-caret { margin-top:3px; transform:rotate(-135deg) }

	#subVisual .subVisual-tab {
		display:none; position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:2;
		flex-direction:column; height:auto; max-height:32rem; overflow-x:hidden; overflow-y:auto;
		gap:0; padding:1rem 0; border-radius:12px;
		background:var(--primary); box-shadow:0 15px 30px rgba(0,0,0,0.25)
	}
	#subVisual .subVisual-tab-wrap.on .subVisual-tab { display:flex }
	#subVisual .subVisual-tab li { width:100%; flex-shrink:0 }
	#subVisual .subVisual-tab a { padding:1.2rem 2rem; border-bottom:none }
	#subVisual .subVisual-tab li.on a { background:rgba(255,255,255,0.12) }
	#subVisual .subVisual-tab::-webkit-scrollbar { width:4px }
	#subVisual .subVisual-tab::-webkit-scrollbar-track { background:rgba(255,255,255,0.15); border-radius:10px }
	#subVisual .subVisual-tab::-webkit-scrollbar-thumb { background:#fff; border-radius:10px }

	.sub-title { font-size:3.6rem }

	.sub-title-row { flex-direction:column; align-items:stretch; gap:4rem;}
	.sub-title-row .sub-title-col { max-width:none }
	.sub-title-row .sub-title-img { width:100%; height:30rem }

	.icon-card-grid { grid-template-columns:repeat(2, 1fr) }

	.step-card-grid { grid-template-columns:repeat(2, 1fr); gap:2rem }
	.step-card { padding:3rem }
	.step-card-ico { top:3rem; right:3rem }

	.feature-card-grid { grid-template-columns:repeat(2, 1fr); gap:2rem }
	.feature-card { height:auto; padding:3rem }

	/* 신청서 폼 : 가로로 나란한 필드들을 세로로 쌓음 */
	.form-box { padding:2rem }
	.form-row { flex-direction:column; gap:1.5rem }
	.form-inline { flex-wrap:wrap }
	.form-input.half { width:100%; flex:none; max-width:none }
	.form-postal { flex-wrap:wrap }
	.biz-num-row { gap:1rem }
	.biz-num-group .form-input { width:10rem }
	.service-check-list { gap:1.5rem 3rem }
	.info-box { flex-direction:column; align-items:flex-start; gap:0.8rem }
	.info-box-desc { text-align:left }

	/* 히어로 이미지 높이만 축소 (margin-right/border-radius는 1400px 미디어쿼리에서 이미 처리) */
	.title-hero { height:44rem }
	.title-hero-txt { left:4rem; right:4rem; bottom:4rem }
	.title-hero-txt h2 { font-size:3.6rem }

	.compare-table th,
	.compare-table td { font-size:1.6rem }

	.flow-steps-wrap { padding:3rem }
	.flow-steps { flex-direction:column; gap:1.5rem }
	.flow-steps li:not(:last-child):after { display:none }

	.screen-preview-row { flex-direction:column }

	.promo-title { font-size:3.6rem }
	.toon-panel:nth-child(2):after { display:none }
	.eco-band { flex-wrap:wrap; gap:2rem 1.5rem; padding:3rem }

	.benefit-row { flex-direction:column; align-items:stretch }
	.benefit-list { width:100%; padding-top:1rem }
	.benefit-img { width:100%; height:30rem }

	.feature-box { padding:3rem }

	/* 4단계 리본 : 가로 배치가 좁아지면 세로로 쌓임 */
	.step-ribbon { flex-direction:column; gap:1.5rem }
	.step-ribbon li { margin-left:0; flex-direction:row; justify-content:center; padding:2rem }

	/* 원형 스텝 : 좁아지면 줄바꿈, 연결선은 개별 위치 계산이 무의미해지므로 숨김 */
	.step-circles ul { flex-wrap:wrap; justify-content:center; gap:3rem 2rem }
	.step-circles ul:before { display:none }
	.step-circles li { width:12rem }
	.step-circles .circle { width:12rem; height:12rem }
	.step-circles .circle img { width:5rem }
	.step-circles .circle-label { flex-direction:column; gap:0.5rem; font-size:1.7rem; text-align:center }

	/* 표는 줄어들면 가로 스크롤 */
	.auth-table-wrap { padding:2rem; overflow-x:auto; -webkit-overflow-scrolling:touch }
	.auth-table { min-width:70rem }
	.auth-table td.card-list, .auth-table td {font-size: 1.6rem;}

	/* flex-direction:column이 되면 위에서 지정한 flex-basis(rem)가 가로가 아니라 세로(높이) 기준으로 작동해버리므로 flex:none으로 리셋 */
	.step-list { gap:6rem }
	.step-row,
	.step-row.reverse { flex-direction:column; align-items:stretch; gap:3rem }
	.step-row .step-img { flex:none; width:100%; height:34rem }
	.step-row .step-txt { flex:none; width:100% }

	.step-card-badge {margin-top:3rem;}

	.board-search { width:100%; max-width:60rem }
	.event-grid { grid-template-columns:repeat(2, 1fr) }

	.company-hero,
	.ceo-hero,
	.partner-hero { height:34rem }
	.company-hero-txt { font-size:3.4rem }
	.info-card-grid { grid-template-columns:repeat(2, 1fr) }
	.company-dark-tit { font-size:3.4rem }
	.ceo-tagline { font-size:3.4rem }
	.ceo-greet:before { width:80rem }
	.partner-grid { grid-template-columns:repeat(3, 1fr) }
	.location-row { flex-direction:column }
	.location-map img,
	.location-map #kakao-map { height:40rem }
}

@media (max-width:768px) {
	#subContent {padding-bottom:6rem;}

	#subVisual { padding:0 10px 0 }
	#subVisual .subVisual-inner { --sv-h:26rem; border-radius:16px }
	#subVisual .subVisual-txt { top:9.5rem }
	#subVisual .subVisual-cate { font-size:2.6rem }
	#subVisual .subVisual-desc { font-size:1.6rem; padding:0 20px }
	#subVisual .subVisual-tab-trigger { height:48px; font-size:1.5rem }
	#subVisual .subVisual-tab a { font-size:1.5rem }

	.sub-title-block { padding-top:4rem; padding-bottom:3rem }
	.sub-title { font-size:2.8rem }
	.sub-desc { font-size:1.6rem }

	.sub-section { padding:3rem 0 }
	.sub-tit2 { font-size:2.2rem; margin-bottom:2rem }
	.sub-tit3 { font-size:2.2rem; margin-bottom:2rem; flex-wrap:wrap; row-gap:1rem }

	.form-label { font-size:1.6rem }
	.form-input { height:45px; font-size:1.5rem }
	.check-item,
	.radio-item { font-size:1.6rem }

	/* 사업자번호 입력칸이 고정폭(10rem x3)이라 좁은 화면에서 폼박스를 뚫고 나가는 것 방지 */
	.biz-num-group { flex:1 1 100%; min-width:0; gap:0.6rem }
	.biz-num-group .form-input { width:auto; flex:1; min-width:0 }

	.title-hero { height:36rem }
	.title-hero-txt { left:3rem; right:3rem; bottom:3rem }
	.title-hero-txt h2 { font-size:2.8rem; margin-bottom:1.2rem }
	.title-hero-txt p { font-size:1.5rem }

	.icon-card-grid { grid-template-columns:repeat(2, 1fr); gap:1.5rem }
	.icon-card { height:auto; padding:3rem 1.5rem }

	.step-card-grid { grid-template-columns:1fr; gap:1.5rem }

	.feature-card-grid { grid-template-columns:1fr; gap:1.5rem }
	.feature-card { padding:3rem }

	.promo-title { font-size:2.8rem }
	.promo-brand-row { margin-bottom:4rem }
	.toon-strip { grid-template-columns:1fr; row-gap:6rem; margin-bottom:6rem }
	.toon-panel:not(:last-child):after { display:none }
	.toon-bubble {width:90%; white-space:normal; padding:1rem 3rem }
	.eco-band { flex-direction:column; padding:3rem }
	.eco-dots { transform:rotate(90deg); gap:1rem;}
	.eco-dots span {width:.5rem; height:.5rem;}

	.step-row .step-img { height:24rem }
	.step-row .step-num { font-size:3.6rem }
	.step-row .step-tit { font-size:2.2rem }
	.step-row .step-desc { font-size:1.6rem }

	/* 흐름도 이미지 글자가 너무 작아지지 않도록, 축소하지 않고 가로 스크롤로 보게 함 */
	.diagram-box { padding:3rem 20px; }
	.diagram-box-inner {
		overflow-x:auto; -webkit-overflow-scrolling:touch;
		padding:0 0 1.5rem; text-align:left
	}
	.diagram-box-inner > img { max-width:none; width:auto; height:28rem }

	.diagram-box-inner::-webkit-scrollbar { height:5px }
	.diagram-box-inner::-webkit-scrollbar-track { background:#dceef9; border-radius:10px }
	.diagram-box-inner::-webkit-scrollbar-thumb { background:var(--primary); border-radius:10px }

	/* no-scroll : 스크롤 대신 폭에 맞춰 축소, 클릭 시 확대해서 볼 수 있음 */
	.diagram-box.no-scroll .diagram-box-inner {
		overflow-x:visible; padding:0; text-align:center
	}
	.diagram-box.no-scroll .diagram-box-inner > img {
		max-width:100%; width:auto; height:auto; cursor:zoom-in
	}

	/* 정산 구조 : 좁아지면 트리 커넥터 대신 세로로 쌓음 */
	.settle-row-top { flex-direction:column; gap:1.5rem }
	.settle-row-top .settle-box:not(:last-child):after { display:none }
	.settle-tree { display:none }
	.settle-row-sub { grid-template-columns:1fr; gap:1.5rem }
	.settle-row-sub .settle-box:before { display:none }
	.settle-note { margin-top:1.5rem; padding:2rem 3rem; font-size:1.8rem }

	.board-search { margin-bottom:3rem }
	.board-row { flex-direction:column; align-items:flex-start; gap:0.5rem; padding:1.5rem 0 }
	.board-row-left { gap:1.5rem }
	.board-row-tit { font-size:1.8rem }
	.board-row-date { padding-left:4.5rem }

	.pagination-nums { gap:0.6rem }
	.pagination-nums a { width:3rem; height:3rem }

	.board-view-title { font-size:2.6rem }
	.board-view-list-btn { padding:1.6rem 4rem; font-size:1.6rem }
	.board-view-nav-row { padding:1.6rem 2rem; gap:1rem }
	.board-view-nav-left { gap:1.5rem }
	.board-view-nav-tit { font-size:1.5rem }
	.board-view-nav-date { display:none }

	.result-table th, .result-table td { padding:1.2rem 0.5rem; font-size:1.3rem }
	.pay-detail-box { padding:3rem 2.5rem }
	/* 한 줄에 라벨-값 2쌍이 들어가던 걸, 항목마다 한 줄씩 보이도록 grid로 재배치 */
	.pay-detail-row { display:grid; grid-template-columns:8rem 1fr; gap:1rem 1.5rem }
	.pay-detail-row dt { flex:none; font-size:1.4rem }
	.pay-detail-row dd { min-width:0; font-size:1.4rem }

	.event-grid { grid-template-columns:1fr; gap:3rem }

	.faq-q-left { gap:1.5rem }
	.faq-q-tit { font-size:1.8rem }
	.faq-a { padding:2rem; font-size:1.5rem }

	.pay-method-tabs { flex-wrap:wrap;}
	.pay-method-tabs a { padding:1rem 2.5rem; font-size:1.6rem }

	.card-num-row { flex-wrap:wrap }
	.card-num-row .form-input { min-width:8rem }

	.btn-row { flex-direction:column-reverse; gap:1.5rem }
	.btn-row .btn-submit,
	.btn-cancel { width:100%; padding:2rem }

	.company-hero,
	.ceo-hero,
	.partner-hero { height:30rem }
	.company-hero-txt { font-size:2.4rem; padding:0 2rem }
	.company-hero-txt.left-bottom { padding-bottom:2.4rem }
	.company-intro-desc { font-size:1.7rem }
	.company-dark-section { padding:5rem 0 }
	.company-dark-tit { margin-bottom:3rem; font-size:2.6rem }
	.info-card-grid { grid-template-columns:1fr; gap:1.5rem }
	.info-card { height:auto; padding:3rem }

	.ceo-tagline { font-size:2.6rem; margin-bottom:3rem }
	.ceo-greet-desc { max-width:none; font-size:1.6rem }
	.ceo-greet:before { display:none }
	.ceo-sign { flex-wrap:wrap; gap:1rem }

	.partner-grid { grid-template-columns:repeat(2, 1fr); gap:1.5rem }
	.partner-section { margin-bottom:5rem }
	.sub-title + .partner-section { margin-top:5rem }
	.partner-copart-section { padding:6rem 0 }

	.location-map img,
	.location-map #kakao-map { height:30rem }
	.location-card { padding:3rem }

	.policy_section { margin-top:4rem; padding-top:4rem }
	.policy_section h4 { font-size:2rem }
	.policy_addendum { padding:2.5rem }

	.risk-table th, .risk-table td { padding:1.2rem 1.4rem; font-size:1.3rem }
	.risk-table td.des { font-size:1.25rem }
}

@media (max-width:480px) {
	.icon-card-grid { grid-template-columns:1fr }
	.timeline-row {display: block;}
	.timeline-events {margin-top:2rem;}
}
/* =========================== 반응형 [e] */