/* ===================== 공통 ===================== */
h3, h4 {
    margin: 0;
}

#nxt-contents .container { 
    margin: 0 auto;
    padding: 70px 0 0;
}

.page-title-wrap {
    margin-bottom: 50px;
}

.page-title{
    color: #121212;
    font-size: 40px;
    font-weight: 500;
    text-align: center;
}

.page-guide-text{
/*     display: flex; */
    align-items: center;
    position: relative;
    margin-bottom: 16px;
    font-weight: 500;
    color: #666;
    text-align: center;
    
}

.page-guide-text img{
    width: 27px;
    height: 27px;
    margin-right: 10px;
}

.title-wrap img,
.icon-table-point,
.list-title-area img{
	width: 16px;
    height: 16px;
    margin-right: 10px;
    flex-shrink: 0;
}

.list-title-area {
    display: flex;
    align-items: center; /* 아이콘과 글자 세로 중앙 정렬 */
    margin-bottom: 8px;  /* 제목과 아래 설명(p) 사이 간격 */
}

.list-info li p {
    margin: 0;
    /* 만약 설명글을 아이콘 오른쪽 라인에 맞추고 싶다면 아래 속성 추가 */
    /* padding-left: 26px; (아이콘 16px + gap 10px) */
}

.icon-table-point {
	margin-right: 5px;
}

.title-wrap.sub-h4 h4.Real_Time_Closing {
    display: flex;
    align-items: center; /* 텍스트 자체의 라인 높이 정렬 */
    margin: 0; /* 기본 마진 제거 */
    color: #1e1847;
    font-size:1.2rem;
    font-weight: 700;
    line-height: 1; /* 텍스트 높이를 폰트 크기에 맞춤 */
}

.list-info li {
	color: #1e1847;
    font-size:1.5rem;
    font-weight: 600;
    line-height: 1; /* 텍스트 높이를 폰트 크기에 맞춤 */
}

/* 콘텐츠 */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    font-size: 16px;
    color: #666;
}

/* 섹션 타이틀 */
.title-wrap.sub {
    display: flex;
    align-items: flex-end; /* 아래쪽 라인 맞춤 */
    gap: 15px; /* 타이틀과 텍스트 사이 간격 */
    margin: 40px 0 20px; 
}

.title-wrap.sub-h4 {
    display: flex;
    margin: 30px 0 15px;
    align-items: center;
}

.title-wrap.sub h3.title {
    display: flex;
    flex: 0 0 auto; /* 필요한 만큼만 너비 차지 */
    font-size: 24px;
    font-weight: 800;
    color: #000;
    margin-bottom: 0;
}

.title-side-text {
    font-size: 16px; /* 이미지 시안에 맞춰 크기 조절 */
    color: #000;
    font-weight: 600;
}

.title-wrap.sub-h4 h4.sub-title {
    display: flex;
    align-items: center;
    height: 26px;
    color: #121212;
    font-size: 18px;
    font-weight: 600;
}

.title-wrap.sub-h4 h4.sub-title:before {
    display: inline-flex;
    content: "";
    width: 20px;
    height: 20px;
    background: url(../images/icon_sub_title.svg) no-repeat 50%;
}

.market-table-tr {
	border-bottom: 1px solid #d3d9e8;
}

.table:before {
/*     display: block; */
/*     content: ""; */
/*     position: relative; */
/*     height: 2px; */
/*     background-color: #666; */
/*     z-index: 1; */
}

.table td, .table th {
    border-bottom: 1px solid #d3d9e8;
    border-top: 1px solid #d3d9e8;
    vertical-align: middle;
}

.table th {
    background-color: #efeff7;
    color: #121212;
    border-right: 1px solid #d3d9e8;
}

.table th:last-child, 
.table td:last-child {
    border-right: none;
}

/* 테이블 */
.market-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.market-table thead th {
    padding: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 14pt;
    width: 6px;
}

.market-table tbody td {
    border-bottom: 1px solid #ddd;
    padding: 12px 10px;
    vertical-align: top;
    border-right: 1px solid #ddd;
    color: #454545;
}

.market-table-left-td {
	background-color: #f7f8fb;
	font-weight: 600;
}

.market-table tbody td:nth-child(1) {
    text-align: center;
}

.market-table tbody td:nth-child(2),
.market-table tbody td:nth-child(3) {
    text-align: left;
    padding-left: 30px !important;
    font-weight: 500;
}

.market-table tbody td:nth-child(4) {
    text-align: center;
    font-size: 15px;
}

.market-table .multi {
    line-height: 1.6;
    color: #454545;
}

.list-info {
    margin: 50px 0 20px;
    padding: 0;
}

.list-info li {
    position: relative;
    font-size: 18px;
    color: #000;
    line-height: 1.6;
    list-style: none;
}

.table-high .market-table td {
    padding: 18px 12px;   /* 높아짐 */
    line-height: 1.6;
	text-align: center;      /* 수평 중앙 */
	vertical-align: middle; /* 수직 중앙 */
}

/* 마지막 열은 우측 라인 제거 */
.market-table tbody td:last-child {
    border-right: none;
}

/* 아이콘 
.list-info.orange li::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: 18px;
    height: 18px;
    background: url("../images/icon_info_warning.png") no-repeat center;
    background-size: contain; 
}
*/
/* 제목 */
.list-info li strong {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    color: #1e1847;
    font-size:1.2rem;
    line-height: 1; /* 텍스트 높이를 폰트 크기에 맞춤 */
}

/* 설명 */
.list-info li p {
    margin: 0;
    color: #555;
    font-size: 14px;
}

/* 라이선스 설명 */
.license-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #666;
}

.license-desc p {
    margin-bottom: 18px;
}

.license-list {
    margin: 20px 0;
    padding-left: 20px;
}

.license-list li {
    margin-bottom: 10px;
}

/* 다운로드 버튼 */
.policy-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 18px;
    border: 1px solid #E50038;;
    color: #E50038;;
    text-decoration: none;
    font-size: 14px;
    border-radius: 4px;
    font-weight: 500;
}

.policy-btn:hover {
    background: #FFE8E5;
}

 
.provide_comment {
	font-size: 13px; 
	color: #555555;
	text-align: left; 
	margin-bottom: 0px !important;
	display: flex;
	align-items: center;
}

.Real_Time_Closing::before,
.Receiving_Data_Format::before {
	content: "";
    display: inline-block;
    width: 4px;           
    height: 18px;         
    background-color: #1e1847; 
    margin-right: 10px;   
    border-radius: 2px;   
    flex-shrink: 0;
}

.enterSpan {
	white-space: pre-wrap;
}

.centerText {
	text-align: center;
}

.lineDiv {
	margin-bottom : 20px;
}

.pd1020 {
	padding: 10px 30px;
}

#selectBtn::after{
  content: ""; 
  display: inline-block; 
  width: 8px;  
  height: 8px; 
  border-top: 2px solid #ffffff; 
  border-right: 2px solid #ffffff;
  transform: rotate(45deg); 
  margin-left: 4px; /* 간격은 보시면서 예쁘게 조절해 보세요 */
  margin-bottom: 2px; /* 텍스트와 높이 중심이 안 맞으면 살짝 올려줍니다 */
}

#selectBtn:hover::after {
 border-top-color: #E7013A !important; 
  border-right-color: #E7013A !important;
  background-color: transparent !important;
}

.pi-wrapper {
/*     background: linear-gradient(180deg, #f8f9fe 0%, #edf1f8 100%); */
    padding: 40px 20px;
    border-radius: 20px;
}

/* ================= 1. 상단 헤더 ================= */
.pi-header {
    margin-bottom: 40px;
}
.pi-header .noti-title {
    font-size: 28px;
    font-weight: bold;
    color: #1a1a24;
    margin-bottom: 12px;
}
.pi-header p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 24px;
}
.pi-header-btns {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* 상단 공통 버튼 스타일 */
.pi-btn-primary {
    background-color: #e50038;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
}
.pi-btn-primary:hover {
    background-color: #cc0032;
    color: white;
}
.pi-btn-outline {
    background-color: white;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
}

/* ================= 2. 중간 카드 2개 ================= */
.pi-card-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}
.pi-card {
    background-color: white;
    flex: 1; /* 두 카드가 동일한 너비를 가짐 */
    border-radius: 6px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column; /* 내용물을 위아래로 배치 */
    margin-top: 60px;
    border-top: 3px solid #2B1B40;
    border-top-left-radius: 0; 
    border-top-right-radius: 0;
}
.pi-card-icon {
    text-align: center;
    margin-bottom: 20px;
}
.pi-card-title {
    font-size: 22px;
    text-align: left;
    font-weight: 600;
    color: #222;
    margin: 0 0 24px 0;
}

.pi-card > .title-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.pi-card > .title-wrapper .pi-card-title {
    margin-bottom: 0;
}

/* 체크리스트 스타일 */
.pi-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pi-card-list > li {
    margin-bottom: 12px;
    color: #333;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pi-card-list > li > span {
	font-size: 16px;
	font-weight: 500;
}

.pi-card-list-item-with-sublist {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

.pi-card-list-item-with-sublist > span {
    flex: 1;
}

.pi-card-list-item-with-sublist > div {
    flex: 0 0 100%;
    margin-left: 26px;
}

.list-check {
    color: #234fad; /* 기본 체크 파란색 */
    font-size: 18px;
    font-weight: bold;
}

.list-check-green {
    color: #00a67e; /* 마감데이터 체크 초록색 */
}
.pi-card-sublist {
    list-style: none;
    padding-left: 0px;
    color: #666;
}
.pi-card-sublist li {
    margin-bottom: 6px;
    font-size: 14px;
}

/* 마감 데이터 카드 안의 회색 박스 */
.pi-gray-box {
    background-color: #f5f6fa;
    color: #555;
    padding: 12px;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    margin: 10px 0 8px 26px;
}
.pi-note-text {
    font-size: 12px;
    color: #888;
    margin-left: 26px;
}

/* 카드 하단 버튼 영역 */
.spacer {
    flex-grow: 1; /* 여백을 채워 버튼을 항상 맨 아래로 밀어냄 */
}
.w-100 {
    width: 100%;
    margin-top: 30px;
    padding: 14px 0;
    border-radius: 8px;
    font-weight: bold;
}
.pi-btn-card-red {
    background-color: #e50038;
    color: white;
}
.pi-btn-card-blue {
    background-color: #2B1B40;
    color: white;
}

/* ================= 3. 하단 카드 (추가 데이터) ================= */
.pi-bottom-card {
    background-color: white;
    border-radius: 6px;
    padding: 24px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-top: 3px solid #2B1B40;
    border-top-left-radius: 0; 
    border-top-right-radius: 0;
}
.pi-bottom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.pi-bottom-header .title-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
}
.pi-bottom-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
}
.pi-btn-outline-sm {
    background-color: white;
    border: 1px solid #ddd;
    color: #555;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
}
.pi-bottom-content p {
    color: #666;
    font-weight: 500;
    margin: 0 0 6px 26px;
}

.pi-btn-card-red:hover {
    background-color: #fff; 
    color: #e50038;
	border: 1px solid #e50038; 
}

.pi-btn-card-blue:hover {
    background-color: #fff;
    color: #2B1B40;
    border: 1px solid #2B1B40;
}

/* ================= 1. 4개의 작은 카드 (CSS Grid 활용) ================= */
.pi-grid-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4열로 배치 */
    gap: 16px; /* 카드 사이 간격 */
    margin-bottom: 24px;
    margin-top: 24px;
}

/* =============== 1열 그리드 ================= */
.pi-grid-container2 {
	display: grid;
    gap: 16px; /* 카드 사이 간격 */
    margin-bottom: 24px;
}

.pi-grid-card {
    background-color: #ffffff;
    border-radius: 6px;
    padding: 24px;
/*     display: flex; */
    align-items: center; /* 아이콘과 텍스트 수직 중앙 정렬 */
    gap: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    
    display: grid;
    grid-template-columns: max-content 1fr; /* 왼쪽은 아이콘 크기, 오른쪽은 텍스트 영역 */
    
    /* ★ 마법의 정렬 속성 2가지 ★ */
    align-content: start; /* 1. 카드 전체 높이가 달라도 내용물을 무조건 상단(천장)에 딱 붙임 */
    
    /* 필요하다면 기존 카드의 높이나 패딩은 그대로 유지하세요 */
    height: 100%;
    
    border-top: 3px solid #2B1B40;
    border-top-left-radius: 0; 
    border-top-right-radius: 0;
}

.pi-grid-icon img {
    height: auto;
    width: 58px;
}

.pi-grid-text h4 {
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: bold;
    color: #333;
}

.pi-grid-text p {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

/* ================= 공통 박스 타이틀 ================= */
.pi-box-title {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.pi-subsection-number {
    font-size: 22px;
}

.pi-subsection-mark {
    color: #e61c3a;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    margin-left: -4px;
}

.pi-box-title img{
	width: 58px;
	height: auto;
}

.pi-box-title > .title-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pi-box-title > .title-wrapper .pi-card-number {
    margin-bottom: 0;
}
.pi-box-title h3 {
    margin: 0;
    font-size: 22px;
    font-weight: bold;
    color: #1e1847;
}

/* ================= 2. 데이터 포맷 옵션 박스 ================= */
.pi-feature-box {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 40px 30px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.pi-feature-box .pi-grid-container {
    counter-reset: rt-feature-roman;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 8px 0 0;
}

.pi-feature-box .pi-grid-card {
    background: #f7f8fb;
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: none;
    border: none;
    height: 100%;
    display: block;
}

.pi-feature-box .pi-grid-text {
    display: block;
}

.pi-feature-box .pi-grid-text h4 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.4;
    color: #1e1847;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pi-feature-box .pi-grid-text h4 span {
    flex: 1;
}

.rt-feature-check {
    flex: 0 0 auto;
}

.rt-feature-mark {
    color: #e61c3a;
    font-size: 18px;
    font-weight: 700;
    display: inline-block;
    vertical-align: baseline;
}

.pi-feature-box .pi-grid-text p {
    margin: 0 25px;
    font-size: 15px;
    line-height: 1.7;
    color: #555;
}

@media (max-width: 991px) {
    .pi-feature-box .pi-grid-text {
        display: block;
    }

    .pi-feature-box .pi-grid-container {
        grid-template-columns: 1fr;
    }
}

.pi-option-box {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.pi-option-inline-box {
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(180deg, #fafbff 0%, #f5f7fc 100%);
    border: 1px solid #e6eaf3;
    border-radius: 14px;
}

.pi-option-inline-box .pi-box-title {
    margin-bottom: 10px;
}

.pi-option-inline-box .pi-option-desc {
    margin-bottom: 12px;
}

.pi-option-inline-box .pi-box-title h3 {
    font-size: 18px;
    font-weight: 600;
}

.pi-option-inline-box .pi-subsection-mark {
    font-size: 14px;
    margin-left: 0;
}

.pi-option-inline-box .fs14,
.pi-option-inline-box .pi-option-desc,
.pi-option-inline-box .pi-option-desc .fs14 {
    font-size: 14px !important;
    line-height: 1.6;
}

.pi-option-inline-box .pi-option-content {
    background: #ffffff;
    overflow: hidden;
}

.pi-option-inline-box .pi-format-table th,
.pi-option-inline-box .pi-format-table td,
.pi-option-inline-box .pi-format-table .fs18 {
    font-size: 15px !important;
}

.pi-option-content {
    background-color: #f8f9fc; /* 내부 연한 회색 배경 */
    display: flex; /* 좌우 반반 나누기 */
}

.ml-9 {
    margin-left: 9px;
}

.pi-radio-group {
    flex: 1; /* 각각 50%씩 차지 */
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 20px;
}

.pi-border-right {
    border-right: 1px solid #e0e4eb; /* 가운데 구분선 */
}

/* 커스텀 라디오 버튼 스타일 */
.pi-radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 15px;
    color: #444;
}

.pi-radio-label input[type="radio"] {
    /* 기본 라디오 버튼 숨기기 (또는 디자이너 취향에 따라 그대로 써도 무방함) */
    width: 18px;
    height: 18px;
    accent-color: #234fad; /* 체크 시 파란색 (최신 브라우저 지원) */
}


/* ================= 3. 이용 절차 박스 ================= */
.pi-process-box {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
}

.pi-box-action {
	flex-shrink: 0;
}

.pi-content-wrapper {
    display: flex;
    justify-content: space-between; /* 왼쪽 ul과 오른쪽 버튼을 양끝으로 쫙 벌림 */
    align-items: flex-end;          /* ★ 세로축 바닥(마지막 줄) 라인을 딱 맞춤 */
    gap: 20px;                      /* 화면이 좁아져도 글자와 버튼이 안 겹치게 방어선 구축 */
}

/* (선택) 텍스트가 너무 길어질 경우를 대비 */
.last-item-flex span {
    flex: 1;
}

.pi-process-steps {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    background-color: #f8f9fc;
    padding: 24px;
    border-radius: 8px;
}

.pi-step {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.step-num {
    background-color: #e50038;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%; /* 동그라미 모양 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.6;
    flex-shrink: 0; /* 크기 찌그러짐 방지 */
}

.step-text h5 {
    margin: 0 0 6px 0;
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.step-text p {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

/* ================= 브레드크럼 (Breadcrumb) ================= */
.pi-breadcrumb {
    display: inline-flex; /* 콘텐츠 길이에 맞춰 박스 너비 조절 */
    align-items: center;
    padding: 6px 14px 6px 10px; /* 안쪽 여백 */
    border-radius: 6px; /* 둥근 모서리 */
    margin-bottom: 24px; /* 아래 타이틀과의 간격 */
    font-size: 18px; /* 글자 크기 */
    font-weight: 500;
}

.breadcrumb-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #d1dbff; /* 네모 색상 */
    border-radius: 3px;
    margin-right: 8px;
}

.breadcrumb-link {
    color: #2B1B40; 
    text-decoration: none; /* 밑줄 제거 */
    transition: color 0.2s;
    cursor: pointer;
}

.breadcrumb-link:hover {
    color: #234fad; /* 마우스 올렸을 때 더 진해짐 */
    text-decoration: underline; /* 마우스 올렸을 때 밑줄 추가 (선택 사항) */
}

.breadcrumb-arrow {
    color: #a0a8cf; /* 연한 화살표 색상 */
    font-size: 10px; /* 화살표 크기 */
    margin: 0 8px; /* 양옆 간격 */
    font-weight: bold;
}

.breadcrumb-current {
    color: #666666; /* 짙은 회색 */
}

/* ================= 데이터 포맷 옵션 테이블 ================= */

/* 테이블 기본 셋팅 (너비 및 텍스트 중앙 정렬) */
.pi-format-table {
    width: 100%;
    text-align: center;
    margin: 0; /* 불필요한 마진 제거 */
    table-layout: fixed; /* 칸 너비를 균일하게 */
}

/* 표 내부 글자 및 여백 설정 */
.pi-format-table th, 
.pi-format-table td {
    padding: 16px;
    font-size: 15px;
}

/* 데이터 셀(td)에도 우측 테두리 추가 (3번째 사진처럼 깔끔하게 나누기 위해) */
.pi-format-table td {
    border-right: 1px solid #d3d9e8;
}

/* 마지막 칸은 우측 테두리 제거 */
.pi-format-table th:last-child,
.pi-format-table td:last-child {
    border-right: none;
}

/* ✨ 핵심: 좌측 상단 대각선 사선 헤더 ✨ */
.diagonal-header {
    position: relative;
    /* 배경색(#efeff7)과 선색(#d3d9e8)을 기존 CSS에서 가져와 대각선을 그립니다 */
    background: linear-gradient(to top right, 
        #efeff7 calc(50% - 0.5px), 
        #d3d9e8 calc(50% - 0.5px), 
        #d3d9e8 calc(50% + 0.5px), 
        #efeff7 calc(50% + 0.5px)
    ) !important;
}

/* 우측 상단 텍스트 (호가단계) */
.diagonal-header .diag-top {
    position: absolute;
    top: 10px;
    right: 15px;
}

/* 좌측 하단 텍스트 (포맷) */
.diagonal-header .diag-bottom {
    position: absolute;
    bottom: 10px;
    left: 15px;
}

.btn-copy-fixed {
    width: 90px !important;
    font-size: 14px;
}

.wide-pd {
	padding: 60px 24px !important;
}

.pi-grid-card2 {
    display: flex;
    align-items: flex-start;
    border-radius: 12px;
    gap: 20px; 
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.pi-grid-content {
    flex-grow: 1; /* 나머지 공간을 텍스트가 다 차지하게 함 */
}

/* 리스트 스타일 정리 */
.info-list {
    list-style: none;
    padding-left: 0;
    margin-top: 15px;
}

.sub-list {
    list-style: none;
    padding-left: 15px; /* 들여쓰기 */
    color: #666;
}

.notice-text {
    color: #212529 ;
}

.pi-box-header {
    display: flex;
    justify-content: space-between; /* 양 끝 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
}

.bgGreen {
	background-color: #f8f9fc !important;
	padding: 10px;
}

.bgGreen p {
	font-size: 18px;
}

.flexDiv {
	display: flex;
	gap: 1rem;
	justify-content: flex-start; 
  	align-items: center;
}

#redInfoMark {
	color: #212529 !important;
}

#closingUl {
	display: flex;
	flex-direction: column;
}

#poTitle, #rtTitle {
	font-size: 34px;
}

.fs18 {
	font-size: 18px !important;
}

.fs16 {
	font-size: 16px !important;
}

.fs14 {
	font-size: 14px !important;
}

.bi-copy {
	padding-right: 4px;
}

.lineGray {
	border-top: 1px solid #EBEBEB;
	padding-top: 40px;
}

.flexList {
	display: flex;         /* 가로 정렬 */
    list-style: none;      /* 기본 불릿 제거 */
    padding: 0;
    gap: 100px;            /* 항목 사이의 간격 (이미지 화살표 부분) */
    align-items: flex-start
}

.flexList > li {
	flex: 1;
}

.pdtop10 {
	padding-top: 10px;
}

.pdtop24 {
	padding-top: 24px;
}

#procedureTitle,
.procedureTitles {
	font-size: 22px;
}

#procedureTitle::before{
	content: "";
    display: inline-block;
    width: 4px;           
    height: 18px;         
    background-color: #1e1847; 
    margin-right: 10px;   
    border-radius: 2px;   
    flex-shrink: 0;
}

.pi-grid-text p {
    word-break: keep-all;
}

.btn-network-contactus-icon{
	display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor; /* 현재 글자색을 아이콘 색으로 사용 */
    
    /* SVG 파일 경로를 여기에 넣으세요 */
    -webkit-mask-image: url(../css/theme/default/image/icon_btn_network.svg);
    mask-image:url(../css/theme/default/image/icon_btn_network.svg);
    
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.fw-500 {
    font-weight: 500;
}

/* 상단 숫자 스타일링 */
.pi-card-number {
    font-size: 32px; /* 숫자를 크게 */
    font-weight: 500;
    color: #aeb5c0; /* 사진과 비슷한 연한 회청색 */
    line-height: 1;
    margin-bottom: 40px; /* 숫자와 제목 사이 간격 */
}

.title-wrapper .pi-card-number {
	margin-bottom: 0;
}

/* 1. 항목 전체 컨테이너: 기존 스타일 무시하고 무조건 좌우 배치 */
.procedure-visual-container ul.visual-steps li.step-item {
    display: flex !important;
    flex: 1;
    justify-content: flex-start !important; 
    gap: 10px !important;                /* 원과 텍스트 사이 간격 */
}

/* 3. 글자 묶음 박스: 텍스트 묶음은 무조건 위아래 배치 후 좌측 정렬 */
.procedure-visual-container ul.visual-steps .step-text-wrap {
    display: flex !important;
    flex-direction: column !important;   /* 제목과 설명은 세로 배치 */
    align-items: flex-start !important;  /* 왼쪽 정렬 */
    text-align: left !important;         /* 왼쪽 정렬 */
    gap: 4px !important;                 /* 제목과 설명 간격 */
}

/* 제목 폰트 설정 */
.procedure-visual-container ul.visual-steps .step-title {
    font-size: 20px !important;
    font-weight: bold !important;
    color: #333 !important;
    margin: 0 0 6px 0!important;
    line-height: 1.2 !important;
}

/* 설명글 폰트 설정 */
.procedure-visual-container ul.visual-steps .step-desc {
    font-size: 16px !important;
    color: #666 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

tbody {
    white-space: pre-line;
}

.mb-46 {
    margin-bottom: 46px;
}

.border-top-style {
    border-top: 3px solid #2B1B40;
    border-top-left-radius: unset;
    border-top-right-radius: unset;
}