@charset "UTF-8";

/* 기존 common.css의 전역 리셋 스타일(* { margin:0; padding:0; })을 덮어쓰기 위한 Tailwind 유틸리티 */
.esn_creport_wrap [class*="m-"],
.esn_creport_wrap [class*="mx-"],
.esn_creport_wrap [class*="my-"], 
.esn_creport_wrap [class*="mt-"],
.esn_creport_wrap [class*="mb-"],
.esn_creport_wrap [class*="ml-"],
.esn_creport_wrap [class*="mr-"],
.esn_creport_wrap [class*="p-"],
.esn_creport_wrap [class*="px-"],
.esn_creport_wrap [class*="py-"],
.esn_creport_wrap [class*="pt-"],
.esn_creport_wrap [class*="pb-"],
.esn_creport_wrap [class*="pl-"],
.esn_creport_wrap [class*="pr-"],

.esn_creport_modal [class*="m-"],
.esn_creport_modal [class*="mx-"],
.esn_creport_modal [class*="my-"], 
.esn_creport_modal [class*="mt-"],
.esn_creport_modal [class*="mb-"],
.esn_creport_modal [class*="ml-"],
.esn_creport_modal [class*="mr-"],
.esn_creport_modal [class*="p-"],
.esn_creport_modal [class*="px-"],
.esn_creport_modal [class*="py-"],
.esn_creport_modal [class*="pt-"],
.esn_creport_modal [class*="pb-"],
.esn_creport_modal [class*="pl-"],
.esn_creport_modal [class*="pr-"]{
  margin: revert-layer;
  padding: revert-layer;
}
/* ==================== */
/* Full Layout           */
/* ==================== */
html{font-size: 16px;}
body { font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--text-primary); display: flex; flex-direction: column;}
body > form{height: 100%;}
.esn_iframe { flex: 1; width: 100%; border: none;}

/* ==================== */
/* Header               */
/* ==================== */
.esn_header_wrap { min-width: 1580px; width: 90%; margin: 0 auto; display: flex; align-items: center; justify-content: end; position: relative; height: 5.375em; box-sizing: border-box; background-color: var(--wh); flex-shrink: 0;}
.esn_logo {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.esn_logo a { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--bk); font-weight: var(--font-light); text-decoration: none;}
.esn_header_gnb ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: var(--space-sm);}
.esn_header_gnb li { font-size: var(--text-md); display: flex; align-items: center; justify-content: center; gap: 2px;}
/* ==================== */
/* Contents             */
/* ==================== */
body:has(.esn_creport_wrap){min-width: 1580px;}
body:has(.esn_creport_wrap) .page-wrap{height: 100%; display: flex; flex-direction: column;}
.esn_creport_wrap{max-width: 1280px; width: 92%; margin: 0 auto; padding: 4.2rem 0;}
.esn_creport_wrap.small_wrap{max-width: 1000px; }

/* ==================== */
/* Main                 */
/* ==================== */
.esn_main_inner { width: 1600px; margin-left: auto; margin-right: auto;}
.esn_creport_main_wrap { background: url('../images/main_bg.png') no-repeat center; background-size: cover; color: #F4F4F4; min-width: 1600px; min-height: 950px; flex-shrink: 0;}
.esn_creport_main_wrap a:hover { text-decoration: none;}
.service_cards{background: linear-gradient(90deg, #002567 30.73%, rgba(18, 254, 144, 0.80) 114.06%); box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.30); border-top: 1px solid var(--border-tertiary);}
.service_cards a{position: relative;}
.service_cards li:not(:last-child) a:after{content: ""; display: block; width: 1px; height: 40%; position: absolute; top: 50%; right: 0; transform: translateY(-50%); background: rgba(244, 244, 244, 0.4);}

/* 서비스 카드 step 01 */
.service-card { position: relative; border-radius: 30px; padding: 3em 4em; display: flex; justify-content: space-between; align-items: center; gap: 2em; background: var(--bg-primary); cursor: pointer; user-select: none;}
.service-card:hover{background-color: var(--bg-brand-subtle);}
.service-card input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0;}
.service-card:has(input:checked) { background: var(--bg-brand-subtle);}
.service-card .check-circle { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: var(--gray-400); color: #fff;}
.service-card:has(input:checked) .check-circle {background-color: var(--primary-500);}