@charset "utf-8";

 /* === Typography (clamp 기반 위계) === */
 h1 { font-size: clamp(28px, 3.5vw, 48px); font-weight:700; } 
 h2 { font-size: clamp(18px, 3.5vw, 40px); font-weight:700; margin: 0 0 clamp(15px, 1.8vw, 30px);line-height: 1; } 
 h2.title { font-size: clamp(28px, 3.5vw, 48px); font-weight:600; margin: clamp(30px, 5vw, 100px) 0; text-align: center; line-height: 1; } 
 h3#sub_top_title { font-size: clamp(28px, 3.5vw, 48px); font-weight:700; margin: clamp(50px, 5vw, 100px) 0; text-align: center; } 
 h3 { font-size: clamp(20px, 2.5vw, 32px); font-weight:600; margin: 0 0 clamp(5px, 1.8vw, 10px); } 
 h4 { font-size: clamp(18px, 3.5vw, 26px); font-weight:500; margin: 0 0 clamp(10px, 1.8vw, 20px); } 
 h4.title { position: relative; padding-left: 14px; margin: clamp(40px, 4vw, 80px) 0 clamp(20px, 2vw, 40px); } 
h4.title:before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 85%; background-color: #006a67;     border-radius: 10px;}  
 h5 { font-size: clamp(16px, 1.8vw, 22px); font-weight:500; margin: 0 0 clamp(5px, 1.8vw, 10px); } 
 h6 { font-size: clamp(14px, 1.5vw, 18px); font-weight:500; margin: 0 0 clamp(5px, 1.8vw, 10px); } 

 .subtitle_01 { font-size: clamp(20px, 2.3vw, 32px); font-weight:600; margin: 0 0 clamp(20px, 3.5vw, 60px); } 
 .subtitle_02 { font-size: clamp(18px, 2.3vw, 28px); font-weight:300; margin: 0 0 clamp(20px, 3vw, 40px); } 
 .subtitle_03 { font-size: clamp(18px, 1.8vw, 24px); font-weight:300; margin: 0 0 40px; position: relative; padding-left: 40px; color: #16325b; z-index: 1; } 
 .subtitle_03::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: url(../images/common/main_title_icon.png) no-repeat; width: 59px; height: 50px; z-index: -1; } 
 .subtitle_04 { font-size: clamp(18px, 2.2vw, 28px); font-weight:600; } 
 .subtitle_05 { font-size: clamp(16px, 2.2vw, 22px); font-weight:600; margin: clamp(10px, 1.8vw, 15px) 0 clamp(15px, 2.5vw, 30px); } 

 .main_con_text_01 { font-size: clamp(16px, 1.5vw, 20px); font-weight:400; line-height:1; color:#333; line-height: 1.2; } 
 .main_con_text_02 { font-size: clamp(14px, 1.5vw, 18px); font-weight:400; line-height:1; color:#333; line-height: 1.2; } 
 p { font-size: clamp(14px, 1.5vw, 16px); line-height:1; word-break: auto-phrase; } 

 /* 컬러 */
 .fc_green { color: #006a67; } 
 .fc_navy { color: #0a2c5d; } 
 .fc_blue { color: #234383; } 

 /* 버튼 */
.btn_wrap { display: flex; justify-content: end; gap: 10px; } 
 .button { display: inline-block; padding: 10px 20px; border: 1px solid; border-color: var(--border-color); border-radius: 10px; font-size: clamp(15px, 1.5vw, 16px); box-shadow: 2px 3px 10px 0px rgba(0, 0, 0, 0.25); min-width: 100px; } 
 .button:hover { border-color: var(--main-color); color: var(--main-color); background-color: #fff; } 
 .button.blue { background-color: var(--main-color); color: #fff;  border-color: var(--main-color);} 
 .button.blue:hover { background-color: #fff; color: var(--main-color); } 
 .button.red {background-color: #d44f4f; color: #fff; border-color: #d44f4f;} 
 .button.red:hover {background-color: #d44f4f; color: #fff; background-color: #fff; color: #d44f4f;  }
 .shortcut { padding: 15px 75px 15px 22px; background: linear-gradient(37deg,#16325b ,#006a67); color: #fff; border-radius: 25px; position: relative; font-size: clamp(15px, 1.5vw, 16px); box-shadow: 2px 3px 10px 0px rgba(0, 0, 0, 0.25); display: inline-block; transition: 0.5s ease-in-out; } 
 .shortcut::before { content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: url(../images/common/arrow-right.png) no-repeat 0 0 / 100%; width: 30px; height: 30px; } 
 .shortcut:hover::before { animation: arrow-bounce 1s ease-in-out; } 
 .shortcut_business { display: inline-block; padding: 15px 100px 15px 22px; background: linear-gradient(37deg,#16325b ,#0994c8); font-weight: 600; border-radius: 50px; font-size: clamp(16px, 1.8vw, 22px); position: relative; color: #fff; box-shadow: 2px 3px 10px 0px rgba(0, 0, 0, 0.25); transition: 0.5s ease-in-out; } 
 .shortcut_business::before { display: inline-block; content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: url(../images/common/arrow-right.png) no-repeat 0 0 / 100%; width: 40px; height: 40px; } 
.shortcut_business:hover::before { animation: arrow-bounce 1s ease-in-out; } 

 @keyframes arrow-bounce { 
 0% { transform: translate(0, -50%); } 
 50% { transform: translate(-30px, -50%); } 
 100% { transform: translate(0, -50%); } 
 }

/*리스트*/
.basic_ul > li { position: relative; padding-left: 15px; text-align: left; margin: 0 0 5px 5px; } 
.basic_ul > li:before { content: ''; display: block; position: absolute; top: 50%; left: 0; width: 5px; height: 5px; background-color:#16325b; border-radius: 50%; transform: translateY(-50%); } 
.basic_ul > ul { margin-top:5px; } 
.basic_ul > li > ul li { position: relative; padding-left: 20px; } 
.basic_ul > li > ul li:before { content: ''; display: block; position: absolute; top: 12px; left: 5px; width: 7px; height: 2px; background-color: #d5d7dd; } 
.basic_ul > li ul li { padding-left: 20px; color: #757a89; position: relative; } 
.basic_ul > li ul li::before { content: ''; display: block; position: absolute; top: 10px; left: 5px; width: 6px; height: 1px; border-radius: 50%; background-color: #80838c; } 

/* 테이블 */

.table_wrap { overflow-x:auto; } 
.table_wrap.no_scroll { width: 100%; overflow-x: unset; -webkit-overflow-scrolling: auto; } 
.table_wrap table { width:100%; border-collapse:collapse; table-layout:fixed; border-top:1px solid #29435d; } 
.table_wrap caption { caption-side:top; padding:10px 0 8px; font-weight:600; text-align:left; color:#222; } 

/* === Head === */
.table_wrap thead th { padding:15px 10px; background:#f8fbff; color:#000; text-align:center; font-weight:500; vertical-align:middle; border-bottom:1px solid #dadce2; word-break:keep-all; border-right:1px solid #e5e7ee; } 
.table_wrap thead th:last-of-type { border-right: none; } 

/* === Body === */
.table_wrap tbody th { padding:15px 11px; font-size:16px; vertical-align:middle; text-align:center; border-bottom:1px solid #e5e7ee; border-right:1px solid #e5e7ee; background-color: #f8fbff; } 
.table_wrap tbody td { padding:15px 11px; font-size:16px; vertical-align:middle; text-align:center; border-bottom:1px solid #e5e7ee; border-right:1px solid #e5e7ee; line-height: 1.4; } 
.table_wrap tbody th:last-of-type, .table_wrap tbody td:last-of-type { border-right: none; } 
.table_wrap tbody tr:last-child td { border-bottom:1px solid #c5c9d6; } 
.table_wrap table .left { text-align: left; } 

@media (max-width: 800px){
 .table_wrap { width: 100%; -webkit-overflow-scrolling: touch; } 
 .table_wrap:before { content:'왼쪽으로 밀어서 더 많은 정보를 확인하세요!'; line-height:2.0; } 
.table_wrap.mini:before,.table_wrap.no_scroll::before { content: ''; } 
.table_wrap table { min-width: 850px; table-layout: auto; word-wrap: normal; white-space: nowrap; } 
.table_wrap.mini table { min-width: 100%; } 
.table_wrap.no_scroll table { min-width: unset; } 

/* 테이블 골격을 블록 레이아웃으로 전환 */
 .table_wrap.no_scroll table,
 .table_wrap.no_scroll tbody,
 .table_wrap.no_scroll tr,
 .table_wrap.no_scroll th,
 .table_wrap.no_scroll td { display: block; width: 100%; } 
  .table_wrap.no_scroll th{text-align: left;}

 /* thead/colgroup/caption은 숨김(접근성 영향 최소화) */
 .table_wrap.no_scroll caption,
 .table_wrap.no_scroll colgroup { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } 

 /* 행을 카드처럼 분리 */
 .table_wrap.no_scroll tbody tr { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; margin: 12px 0; } 

 /* th = 라벨 영역 */
 .table_wrap.no_scroll tbody th { background: #f8fafc; color: #111827; font-weight: 600; padding: 12px 14px; border-bottom: 1px solid #e5e7eb; box-sizing: border-box; } 

 /* td = 값/입력 영역 */
 .table_wrap.no_scroll tbody td { padding: 12px 14px; box-sizing: border-box; } 

 /* 셀 안의 폼 컨트롤은 한 줄 가득 */
 .table_wrap.no_scroll input[type="text"],
 .table_wrap.no_scroll input[type="email"],
 .table_wrap.no_scroll textarea { width: 100%; box-sizing: border-box; min-height: 42px; } 
 .table_wrap.no_scroll select { box-sizing: border-box; min-height: 40px; } 


 /* 다단 라인 간격 정리(옵션) */
 .table_wrap.no_scroll .row + .row,
 .table_wrap.no_scroll tbody tr + tr { margin-top: 12px; } 
 }

@media (max-width: 500px){
 .table_wrap.mini table { min-width: 500px; } 
 .table_wrap.mini:before { content:'왼쪽으로 밀어서 더 많은 정보를 확인하세요!'; line-height:2.0; } 
 }
@media (max-width: 400px){
 .table_wrap.no_scroll input[type="number"] { width: 25%; min-height: 40px; } 
}
/* 여백 */
.mb100 { margin-bottom: clamp(50px, 6vw, 100px); }