/**************************************************************************************************
  PAY-1 CSS SETTIING
***************************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

@font-face {
	font-family:'Dinpro';
	src:url('/css/DINPro.eot') format('embedded-opentype'),
			url('/css/DINPro.woff') format('woff'),
			url('/css/DINPro.ttf') format('truetype');
}

/**************************************************************************************************
  [ font 설정 ] ( 사이즈, 굵기, 색상 )
***************************************************************************************************/
.ff-kor { font-family:"Pretendard Variable", "Noto Sans KR"; font-size:12px; letter-spacing:-1px }
.ff-kor2 { font-family:"Pretendard Variable", "Noto Sans KR"; letter-spacing:-1px; font-size:11px !important }
.ff-kor3 { font-family:"Pretendard Variable", "Noto Sans KR"; font-size:12px; }
.ff-eng1 { font-size:12px; }
.ff-eng2 { font-family:"Dinpro"; font-size:12px; }
.ff-eng3 { font-family:"Lato"; font-size:12px; }

.fs-10 { font-size:10px }
.fs-11 { font-size:11px }
.fs-12 { font-size:12px }
.fs-13 { font-size:13px }
.fs-14 { font-size:14px }
.fs-15 { font-size:15px }
.fs-16 { font-size:16px }
.fs-17 { font-size:17px }
.fs-18 { font-size:18px }
.fs-20 { font-size:20px }
.fs-28 { font-size:28px }

.fw-bold { font-weight:bold }

.cr-a3 { color:#a3a3a3; }
.cr-e1 { color:#e11d48; }
.cr-52 { color:#525252; }

/**************************************************************************************************
  [ align 설정 ]
***************************************************************************************************/
.text-start { text-align:left !important }
.text-end { text-align:right !important }
.text-center { text-align:center !important }
.text-decoration-none { text-decoration:none !important }
.text-decoration-underline { text-decoration:underline !important }
.text-decoration-line-through { text-decoration:line-through !important }
.text-lowercase { text-transform:lowercase !important }
.text-uppercase { text-transform:uppercase !important }
.text-capitalize { text-transform:capitalize !important }
.text-wrap { white-space:normal !important }
.text-nowrap { white-space:nowrap !important }
.text-break { word-wrap:break-word !important; word-break:break-word !important }
.text-justify { text-align:justify !important }

.align-items-start { align-items:flex-start !important }
.align-items-end { align-items:flex-end !important }
.align-items-center { align-items:center !important }
.align-items-baseline { align-items:baseline !important }
.align-items-stretch { align-items:stretch !important }

.x-div-center { display:flex; justify-content:center; align-items:center; }
.x-div-end { display:flex; justify-content:flex-end; align-items:center; }

.y-div-center { display:flex; align-items:center; }

/**************************************************************************************************
  [ table 설정 ]
***************************************************************************************************/
.table {
	--bs-table-bg:transparent;
	--bs-table-accent-bg:transparent;
	/*--bs-table-striped-color:#E7E7E7;*/
	/*--bs-table-striped-bg:#E7E7E7;*/
	/*--bs-table-active-color:#444444;*/
	/*--bs-table-active-bg:rgba(0, 0, 0, 0.875);*/
	/*--bs-table-hover-color:#444444;*/
	/*--bs-table-hover-bg:rgba(0, 0, 0, 0.035);*/
	width:100%;
	/*margin-bottom:1rem;*/
	/*color:#777;*/
	vertical-align:middle;
	/*border-color:#eee;*/
}

.table > :not(caption) > * > * {
	padding:0.5rem 0.5rem;
	/*background-color:var(--bs-table-bg);*/
	/*border-bottom-width:0.125rem;*/
	/*box-shadow:inset 0 0 0 9999px var(--bs-table-accent-bg);*/
}

.table > tbody { vertical-align:inherit; }
.table > thead { vertical-align:bottom; }
.table > :not(:last-child) > :last-child > * { border-bottom-color:currentColor; }

.caption-top { caption-side:top; }

.table-sm > :not(caption) > * > * { padding:0.25rem 0.25rem; }
.table-bordered > :not(caption) > * { border-width:0.125rem 0;}
.table-bordered > :not(caption) > * > * { border-width:0 0.125rem; }
.table-borderless > :not(caption) > * > * { border-bottom-width:0; }
.table-striped > tbody > tr:nth-of-type(odd) { --bs-table-accent-bg:var(--bs-table-striped-bg); color:var(--bs-table-striped-color); }
.table-active { --bs-table-accent-bg:var(--bs-table-active-bg); color:var(--bs-table-active-color); }
.table-hover > tbody > tr:hover { --bs-table-accent-bg:var(--bs-table-hover-bg); color:var(--bs-table-hover-color); }

.table-responsive {
	display:block;
	width:100%;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
}

/**************************************************************************************************
  [ display 설정 ]
***************************************************************************************************/
.d-inline { display:inline !important }
.d-inline-block { display:inline-block !important }
.d-block { display:block !important }
.d-grid { display:grid !important }
.d-table { display:table !important }
.d-table-row { display:table-row !important }
.d-table-cell { display:table-cell !important }
.d-flex { display:flex !important }
.d-inline-flex { display:inline-flex !important }
.d-none { display:none !important }

/**************************************************************************************************
  [ width, height 설정 ]
***************************************************************************************************/
.w-25 { width:25% !important }
.w-50 { width:50% !important }
.w-75 { width:75% !important }
.w-100 { width:100% !important }
.w-auto { width:auto !important }
.w-2rem { width:2rem !important }
.w-5rem { width:5rem; !important}

.mw-100 { max-width:100% !important }
.vw-100 { width:100vw !important }
.min-vw-100 { min-width:100vw !important }

.h-25 { height:25% !important }
.h-50 { height:50% !important }
.h-75 { height:75% !important }
.h-100 { height:100% !important }
.h-auto { height:auto !important }
.h-3px { height:3px !important }
.h-5rem { height:5rem !important }

.mh-100 { max-height:100% !important }
.vh-100 { height:100vh !important }
.min-vh-100 { min-height:100vh !important }

/**************************************************************************************************
  [ padding 설정 ]
***************************************************************************************************/
.p-0 { padding:0 !important }
.p-1 { padding:0.25rem !important }
.p-2 { padding:0.5rem !important }
.p-3 { padding:1rem !important }
.p-4 { padding:1.5rem !important }
.p-5 { padding:3rem !important }

.px-0 { padding-right:0 !important; padding-left:0 !important }
.px-1 { padding-right:0.25rem !important; padding-left:0.25rem !important }
.px-2 { padding-right:0.5rem !important; padding-left:0.5rem !important }
.px-3 { padding-right:1rem !important; padding-left:1rem !important }
.px-4 { padding-right:1.5rem !important; padding-left:1.5rem !important }
.px-5 { padding-right:3rem !important; padding-left:3rem !important }

.py-0 { padding-top:0 !important; padding-bottom:0 !important }
.py-1 { padding-top:0.25rem !important; padding-bottom:0.25rem !important }
.py-2 { padding-top:0.5rem !important; padding-bottom:0.5rem !important }
.py-3 { padding-top:1rem !important; padding-bottom:1rem !important }
.py-4 { padding-top:1.5rem !important; padding-bottom:1.5rem !important }
.py-5 { padding-top:3rem !important; padding-bottom:3rem !important }

.pt-0 { padding-top:0 !important }
.pt-1 { padding-top:0.25rem !important }
.pt-2 { padding-top:0.5rem !important }
.pt-3 { padding-top:1rem !important }
.pt-4 { padding-top:1.5rem !important }
.pt-5 { padding-top:3rem !important }

.pe-0 { padding-right:0 !important }
.pe-1 { padding-right:0.25rem !important }
.pe-2 { padding-right:0.5rem !important }
.pe-3 { padding-right:1rem !important }
.pe-4 { padding-right:1.5rem !important }
.pe-5 { padding-right:3rem !important }

.pb-0 { padding-bottom:0 !important }
.pb-1 { padding-bottom:0.25rem !important }
.pb-2 { padding-bottom:0.5rem !important }
.pb-3 { padding-bottom:1rem !important }
.pb-4 { padding-bottom:1.5rem !important }
.pb-5 { padding-bottom:3rem !important }

.ps-0 { padding-left:0 !important }
.ps-1 { padding-left:0.25rem !important }
.ps-2 { padding-left:0.5rem !important }
.ps-3 { padding-left:1rem !important }
.ps-4 { padding-left:1.5rem !important }
.ps-5 { padding-left:3rem !important }

/**************************************************************************************************
  [ 테두리 설정 ]
***************************************************************************************************/
.br-box1 { background-color:#f5f5f5; border:1px solid #e5e5e5; color:#262626; }
.br-box2 { background-color:#fffbeb; border:1px solid #fde68a; color:#a16207; }
.br-box3 { background-color:#ecfdf5; border:1px solid #a7f3d0; color:#047857; }
.br-box4 { background-color:#fff7fa; border:1px solid #fda4c8; color:#e11d48; }
.br-box5 { background-color:#eff4ff; border:1px solid #a4c1fd; color:#3d7cb6; }
.br-box6 { background-color:#fafafa; border:1px solid #e5e5e5; color:#525252; }

.br-box-f1 { background-color:#ffffff; border:1px solid #e5e5e5; }
.br-box-a1 { background-color:#e11d48; border:0px solid #e11d48; color:#ffffff; }
.br-box-d1 { background-color:#fff7fa; border:2px solid #f9d0df; color:#404040; border-style:dashed; }

/**************************************************************************************************
  [ 라운드 설정 ]
***************************************************************************************************/
.rounded { border-radius:0.5rem !important }
.rounded-0 { border-radius:0 !important }
.rounded-1 { border-radius:0.25rem !important }
.rounded-2 { border-radius:0.5rem !important }
.rounded-3 { border-radius:0.75rem !important }
.rounded-4 { border-radius:1rem !important }
.rounded-5 { border-radius:1.5rem !important }
.rounded-10 { border-radius:10rem !important }
.rounded-circle { border-radius:50% !important }
.rounded-pill { border-radius:50rem !important }
.rounded-top { border-top-left-radius:0.5rem !important; border-top-right-radius:0.5rem !important }
.rounded-end { border-top-right-radius:0.5rem !important; border-bottom-right-radius:0.5rem !important }
.rounded-bottom { border-bottom-right-radius:0.5rem !important; border-bottom-left-radius:0.5rem !important }
.rounded-start { border-bottom-left-radius:0.5rem !important; border-top-left-radius:0.5rem !important }
.rounded-full { border-radius:9999px !important }

/**************************************************************************************************
  [ hover 설정 ]
***************************************************************************************************/
.ho1:hover { background-color:#f7f7f7 }

/**************************************************************************************************
  [ etc 설정 ]
***************************************************************************************************/
.cursor { cursor: pointer; }


.relative { position:relative; }
.overflow-hidden { overflow:hidden; }

.mt-025 { margin-top:0.25rem; }
.mt-1 { margin-top:1rem; }
.flex-1 { flex:1 1 0%; }

.gap-025 { gap:0.25rem; }
.gap-1 { gap:1rem; }
.bg-33 { background-color:#333333; }
.bg-d4 { background-color:#d4d4d4; }

.shrink-0 { flex-shrink:0; }


/**************************************************************************************************
  [ 계약유형 셀 꾸미기 ]
***************************************************************************************************/
.ct-row { display:flex; align-items:center; gap:12px; padding:14px 16px; }
.ct-icon { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#e11d48; background:#fff1f2; border:1px solid #ffe0ea; }
.ct-icon i { font-size:22px; }
.ct-texts { flex:1; min-width:0; }
.ct-label { font-size:12px; color:#737373; font-weight:600; line-height:1; }
.ct-value { margin-top:4px; color:#171717; font-weight:800; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.ct-chip { font-size:12px; padding:2px 8px; border-radius:9999px; background:#fff1f2; color:#e11d48; border:1px solid #ffe0ea; font-weight:700; line-height:1; }
.ct-arrow { color:#a3a3a3; }