* {
  -webkit-text-size-adjust: none;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
		  background: url('images/jb_blank.png');
		 
}
html {
	height: 100%;
	font-size: 100%;
}

body {
	min-height: 100%;
	overflow-y: scroll;  /* 스크롤은 body만 담당 */
	overflow-x: hidden;  /* 가로 스크롤 제거 */
}

html, body { 
	font-family: 'Inter', 'Pretendard',  sans-serif;
	line-height: 1.5;
	color: var(--title-color); 
	margin: 0; 
	padding: 0;
	word-break: keep-all;
	white-space: wrap;
	scroll-behavior: smooth;
	width: 100%;
	height: 100%;
	letter-spacing: -0.0125rem;
}


h1, h2, h3, h4, h5, h6, p, ul, li, ol, dl, dd, dt, 
input, select, option, small, a, a:link, a:visited, a:active, 
strong, span, font, b, tr, td, th, table, tbody, thead, 
del, ins, address,em, dfn, cite, code, kbd, pre, samp { 
	font: inherit; 
	color: inherit; 
	line-height: inherit;
	margin: 0; 
	padding: 0; 
	box-sizing: inherit; 
}

img {
	vertical-align: bottom;
}

i {
	vertical-align: middle;
}

a, a:link,
a:visited, 
a:active, 
a:focus { 
	text-decoration: none;
	color: inherit;
}

a:hover { 
	/* color: var(--main); */
	text-decoration: none; 
	transition: all ease-in-out 0.3s; 
}

legend { 
	visibility: hidden; 
	width: 0; 
	height: 0;
}

caption { 
	overflow: hidden; 
	width: 0; 
	height: 0; 
	font-size: 0; 
	line-height: 0; 
	text-indent: -9999px;
}


.fit_img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 100;
	margin: 0;
}

.responsive_img {
	max-width: 100%;
	height: auto;
}

.divider {
	width: 100%;
	height: 1px;
	background-color: rgba(0, 0, 0, 0.08);
	margin: 15px 0;
}

:root {

	/* Font Color & Size - 신뢰감을 주는 딥 블루 */
	--title-color: #222;
	--text-color: #444;
	--sub-color: #666;
	

	--text-2xs: 0.785rem;
	--text-xs: 0.825rem;
	--text-sm: 0.938rem;
	--text-md: 1.05rem;
	--text-lg: 1.25rem;
	--text-xl: 1.5rem;
	--text-2xl: 2rem;
	--text-3xl: 2.5rem;
	--text-4xl: 3rem;
	--text-5xl: 4rem;
	--text-6xl: 1.75rem;

	--grad_orange: linear-gradient(90deg, #f37b54 0%, #f6534d 100%);
    --grad_cyan: linear-gradient(90deg, #42c2cc 0%, #178ebf 100%);


    /* Main & Primary - 신뢰감을 주는 딥 블루 */
    --main: #2e4ba0;
    --main-light: #4a6bc7; /* 한 톤 밝은 메인 (포인트 요소) */
    
    --primary: #2e4ba0;
    --primary-hover: #3f61c2; /* 호버 시 약간 더 밝고 선명하게 */
    
    /* Semantic Colors - 상태 및 알림 */
    --danger: #e63946;       /* 오류, 삭제, 경고 */
    --danger-light: #ff6b6b;
    
    --success: #27ae60;      /* 완료, 승인, 안정 */
    --success-light: #2ecc71;
    
    --info: #00b4d8;         /* 정보, 안내, 팁 */
    --info-light: #48cae4;
    
    --warning: #f39c12;      /* 주의, 대기, 확인 필요 */
    --warning-light: #f1c40f;

    --bg-dark: #0b111e;      /* 전체 배경 */
    --hover: #ffcb07;      /* navigation hover color */
	--orange: #ed4a13;
	--pink: #f60a84;
	--muted: #999;
	--white: #fff;
	--black: #000;
	--light: #f5f5f5;

    /* Additional Utility - 유용한 추가 컬러 */
	--border_color: #e5e5e5;
    --glass-bg: rgba(255, 255, 255, 0.05); /* 유리창 효과(Glassmorphism) */
    --gradient-blue: linear-gradient(135deg, #2e4ba0 0%, #4a6bc7 100%); /* 강조 영역용 그라데이션 */

	--radius3: 0.188rem; /* 3px */
    --radius6: 0.375rem; /* 6px */
    --radius8: 0.5rem; /* 8px */
    --radius12: 0.75rem; /* 12px */
    --radius20: 1.25rem;  /* 20px */
	--shadow: 0 4px 20px rgba(0,0,0,0.05);

	--h-mini: 1.75rem; /* 28px */
	--h-sm: 2.188rem; /* 34px */
	--h-md: 2.5rem; /* 40px */
	--h-lg: 2.875rem; /* 45px */
	--h-huge: 3.75rem; /* 60px */
}


/*===============================================================================================================

	Background Color

===============================================================================================================*/
.main { background-color: var(--main) !important; }
.hover { background-color: var(--hover) !important; }
.primary { background-color: var(--primary) !important; }
.info { background-color: var(--info) !important; }
.success { background-color: var(--success) !important; }
.warning { background-color: var(--warning) !important; }
.orange { background-color: var(--orange) !important; }
.light { background-color: var(--light) !important; }
.black { background-color: var(--black) !important; }

a:hover .main,
a.main:hover {
	transition: all ease-in-out .2s;
	background-color: var(--hover) !important;
}


/*===============================================================================================================

	Icon

===============================================================================================================*/

.icon,
button.icon,
a.icon {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	font-style: normal;
	font-weight: 500;
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.65rem;
	line-height: 2.75rem;
	text-indent: 0px !important;
}

.icon i {
	text-align: center !important;
	vertical-align: middle !important;
	color: #fff;
}

/* Icons Size */
.icon.xs,
button.icon.xs,
a.icon.xs {
	width: 1.4rem !important;
	height: 1.4rem !important;
	font-size: 0.9rem !important;
	line-height: 1.25rem !important;
}

.icon.sm,
button.icon.sm,
a.icon.sm {
	width: 2.15rem !important;
	height: 2.15rem !important;
	font-size: 1.2rem !important;
	line-height: 2.15rem !important;
}

.icon.md,
button.icon.md,
a.icon.md {
	width: 3rem !important;
	height: 3rem !important;
	font-size: 2rem !important; 
	line-height: 1.3 !important;
}

.icon.big,
button.icon.big,
a.icon.big {
	width: 10rem !important;
	height: 10rem !important;
	font-size: 7rem !important;
	line-height: 10rem !important;
}


.icon-duo {
	opacity: 0.2;
}

.circle {	
	border-radius: 50%;
	overflow: hidden;
}
.round {	
	border-radius: var(--radius8);
	overflow: hidden;
}



/*===============================================================================================================

	Pagination

===============================================================================================================*/
/* [Pagination V2] 기본 스타일 */
.pagination_v2_container {
    display: flex;
    justify-content: center;
    padding: 50px 0;
}

.pagination_v2 {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px; /* 박스 사이 간격 */
}

.pagination_v2 .page_link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: #ffffff; /* 이미지와 동일한 화이트 배경 */
    border: 1px solid #e1e4e9; /* 연한 회색 테두리 */
    color: #333333; /* 기본 숫자 색상 */
    font-weight: 700;
    border-radius: 8px; /* 이미지의 부드러운 라운드 값 */
    transition: all 0.2s ease-in-out;
}

/* 활성화 상태 (Active) - 메인 블루 컬러 사용 */
.pagination_v2 .page_link.active {
    background-color: var(--main); /* #2e4ba0 */
    border-color: var(--main);
    color: #ffffff;
}

/* 호버 상태 */
.pagination_v2 .page_link:hover:not(.active) {
    background-color: #f8f9fa;
    border-color: #cbd3da;
}

.pagination_v2 i {
    font-size: var(--text-lg);
}

/* --- 미디어 쿼리별 크기 조정 (5단계 기준) --- */

/* 1. Mobile (320px ~) */
.pagination_v2 { gap: 6px; }
.pagination_v2 .page_link {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
}

/* 2. Mobile Landscape / Tablet (768px ~) */
@media screen and (min-width: 768px) {
    .pagination_v2 { gap: 8px; }
    .pagination_v2 .page_link {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
}

/* 3. Desktop Small (992px ~) */
@media screen and (min-width: 992px) {
    .pagination_v2 .page_link {
        width: 42px;
        height: 42px;
    }
}

/* 4. Desktop Large (1200px ~) */
@media screen and (min-width: 1200px) {
    .pagination_v2 .page_link {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
}


/*---------------------------------------------------------------------------------------------------------------

	FORM

---------------------------------------------------------------------------------------------------------------*/

.iptText { 
	display: inline-block; 
	position: relative;
	vertical-align: middle;
	height: 33px; 
	line-height: 33px;
	padding: 0 10px;
	margin: 0 3px 0 0;
	border: 1px solid #cccccc; 	
	background: #ffffff;
	font-size: 14px; 
	border-radius: 3px;	
}

.sltBox {
	display: inline-block; 
	position: relative;
	vertical-align: middle;
	height: 33px; 
	line-height: 33px;
	padding: 0 10px;
	margin: 0 3px 0 0;
	border: 1px solid #cccccc; 	
	background: #ffffff;
	outline: none;
	font-size: 14px;
	border-radius: 3px;	
	-webkit-appearance: none; 
	-moz-appearance: none;    
	appearance: none;
	background: url('images/sp_form.png') no-repeat 100% -40px #ffffff; /* �붿궡�� �꾩씠肄� 異붽� */       
	cursor: pointer;
	
}

.sltBox select {
    padding: 0px;
	line-height: 33px;
	height: 33px;
    width: 110%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.sltBox select:focus {
    outline: none;
}

.iptText + .btn {
	margin: 0 2px;
}

.iptText.block + .iptText.block {
	margin: 5px 0;
	display: block;
	clear: both;
}

.iptDisable.block,
.iptText.block,
.sltBox.block {
	box-sizing: border-box !important;
	width: 100% !important;
}

.iptDisable {
	display: inline-block; 
	position: relative;
	vertical-align: middle;
	height: 33px; 
	line-height: 33px;
	padding: 0 10px; 
	border: 1px solid #cccccc; 	
	background: #f9f9f9;
	font-size: 14px; 
	border-radius: 3px;
	cursor: not-allowed;
}

.iptDisable.lg,
.iptText.lg,
.sltBox.lg {
	height: 38px;
	line-height: 38px;
	padding: 0 15px;
	font-size: 16px;
}

.iptText:focus,
.sltBox:focus {
	transition: all ease-in-out .3s;
	border: 1px solid #aaaaaa;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {  /*safari and chrome*/
	.iptText {
		box-shadow: none !important;
		appearance: none;
		-webkit-appearance: none;
	}
    .sltBox {
        height: 33px;
        line-height: 33px;
		border-radius: 3px;
		padding: 0 10px;
    } 
}

.styledCheckbox input[type=checkbox]:not(old),
.styledRadio input[type=radio]:not(old){
	width   : 20px;
	margin  : 0;
	padding : 0;
	opacity : 0;
}

.styledCheckbox input[type=checkbox]:not(old) + label,
.styledRadio input[type=radio]:not(old) + label{
	display : inline-block;
	position: relative;
	vertical-align: top;
	margin-left : -15px;
	margin-right: 0;
	margin-bottom: 0;
	padding-left : 25px;
	background-image : url('images/checkbox-default-2x.png');
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 18px;
	font-size: 14px;
	line-height: 30px;
	letter-spacing: 0;
	cursor: pointer;
}

.styledRadio input[type=radio]:not(old) + label {
	background-image : url('images/radio-default-2x.png');
	background-size: 18px;
}

.styledCheckbox input[type=checkbox]:not(old):checked + label{
	background-image : url('images/checkbox-selected-2x.png');
	background-size: 18px;
}

.styledRadio input[type=radio]:not(old):checked + label{
	background-image : url('images/radio-selected-2x.png');
	background-size: 18px;
}

@media screen and (min-width: 996px) {
	
	

	.styledCheckbox input[type=checkbox]:not(old) + label,
	.styledRadio input[type=radio]:not(old) + label{
		display : inline-block;
		position: relative;
		margin-left : -20px;
		margin-right: 30px;
		margin-bottom: 0;
		padding-left : 30px;
		background : url('images/checkbox-default.png') no-repeat 0 5px;
		font-size: 15px;
		line-height: 30px;
		letter-spacing: 0;
		cursor: pointer;
	}


	.styledRadio input[type=radio]:not(old) + label {
		background   : url('images/radio-default.png') no-repeat 1px 5px;
	}

	.styledCheckbox input[type=checkbox]:not(old):checked + label{
		background   : url('images/checkbox-selected.png') no-repeat 0 5px;
	}

	.styledRadio input[type=radio]:not(old):checked + label{
		background   : url('images/radio-selected.png') no-repeat 1px 5px;
	}
}


.txtArea { 
	display: block; 
	position: relative;
	padding: 10px;
	margin: 0;
	width: 100%;
	border: 1px solid #cccccc; 	
	background: #ffffff;
	font-size: 14px; 
	line-height: 24px;
	border-radius: 3px;
	box-sizing: border-box;
}

placeholder { 
	color: #666666; 
	line-height: 1.5; 
}

::-webkit-input-placeholder { color: #666666; }
::-moz-placeholder { color: #666666; } /* firefox 19+ */
:-ms-input-placeholder { color: #666666; } /* ie */

.form-static { 
	display: inline-block;
	position: relative;
	vertical-align: top;
	line-height: inherit; 
	color: inherit; 
	font-size: inherit;
	letter-spacing: 0;
	margin: 0 5px;
}

.sltBox + .form-static,
.iptText + .form-static {
	margin: 0 7px 0 4px;
}


.border_box.scroll {
	overflow-y: scroll;
}

.border_box p {
	font-size: 1.05em;
	line-height: 1.5;
	font-weight: 600;
	margin: 0 0 10px;
	letter-spacing: -0.05em;
}

.border_box dl {
	display: block;
	position: relative;
	margin: 0 0 10px;
	padding: 20px 20px;
	background: #ffffff;
	border: 1px solid #e1e4e9;
	border-radius: 8px;
}

.border_box dt {
	font-size: 0.98em;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 8px;
	color: var(--title-color);
}

.border_box dd {
	font-size: 0.98em;
	line-height: 1.5;
	margin: 0 0 6px;
	color: var(--text-color);
}

.border_box dd ul {
	padding: 5px 12px;
	margin: 0;
}

.border_box dd ul li {
	list-style: none;
	font-size: 0.98em;
	line-height: 1.5;
	margin: 2px 0;
	color: var(--text-color);
	letter-spacing: -0.025em;
}

.border_box dd ul p {
	font-size: 0.98em;
	line-height: 1.5;
	margin: 0 0 10px;
	font-weight: 600;
	line-height: 23px;
	margin: 8px 0 0;
	color: var(--title-color);
}


/*---------------------------------------------------------------------------------------------------------------

	BUTTON

---------------------------------------------------------------------------------------------------------------*/
button {
	padding: 0;
	margin: 0;
	outline: none;
	border: none;
}

button.btn,
a.btn { 
	display: inline-block;
	position: relative;
	vertical-align: middle;
	height: var(--h-md); 
	background: #444; 
	color: var(--white);
	padding: 0 0.938rem; 
	margin: 0px;
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: var(--h-md); 
	border-radius: var(--radius3);
	outline: none;
	border: 1px solid #444;
	white-space: nowrap;
	transition: all ease 0.3s;
	box-sizing: border-box;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.03);
}

button.btn:hover,
a.btn:hover {
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.03);
}

button.btn i,
a.btn i { 
	vertical-align: middle;
	font-size: var(--text-md);
}


.btn + .btn {
	margin: 0 2px;
}

.btn.mini { 
	height: var(--h-mini); 
	line-height: 1;
	padding: 0 0.42rem; 
	font-size: var(--text-xs);
	border-radius: var(--radius3);
}

.btn.sm { 
	height: var(--h-sm); 
	line-height: 1;
	padding: 0 0.75rem; 
	font-size: var(--text-sm);
	border-radius: var(--radius3);
}

.btn.sm i { 
	vertical-align: middle;
	font-size: 110%;
}

.btn.lg { 
	height: var(--h-lg);
	line-height: var(--h-lg);
	padding: 0 1.563rem; 
	font-size: var(--text-lg);
	border-radius: var(--radius6);
}

.btn.lg i { 
	vertical-align: middle;
	font-size: 110%;
}

.btn.huge { 
	height: var(--h-huge); 
	line-height: var(--h-huge); 
	padding: 0 25px; 
	font-size: var(--text-lg);
	border-radius: var(--radius6);
}

.btn.btn-block {
	width: 100%;
	padding-left: 0px !important;
	padding-right: 0px !important;
	text-align: center;
	margin: 0;
}

.btn.btn-block + .btn.btn-block {
	margin: 5px 0 !important;
}

.btn.round { border-radius: 1.563rem; }

.btn.default { background: var(--main); border-color: var(--main); }
.btn.primary { background: var(--primary); border-color: var(--primary); }
.btn.success { background: var(--success); border-color: var(--success); }
.btn.hover { background: var(--hover); border-color: var(--hover); }
.btn.danger { background: var(--danger); border-color: var(--danger); }
.btn.info { background: var(--info); border-color: var(--info); }
.btn.warning { background: var(--warning); border-color: var(--warning); }
.btn.light { background: var(--muted); color: var(--white); border-color: var(--muted); }
.btn.white { background: var(--white); color: var(--title); border-color: var(--light); }
.btn.line.gray { background: var(--light); color: var(--text-color); border-color: #d5d5d5; }
.btn.line.default { background: var(--white); color: var(--main); border-color: var(--main); }
.btn.line.info { background: var(--white); color: var(--info); border-color: var(--info); }


a.btn-flexible,
button.btn-flexible {
	text-align: center;
	color: #ffffff;	
	margin: 0;
	border-radius: 3px;
	border: 0px;
	outline: none;
}

a.btn-flexible:hover,
button.btn-flexible:hover {
	transition: all ease-in-out .3s;
}



@media screen and (min-width: 320px){	
	a.btn-flexible,
	button.btn-flexible {
		display: block;
		position: relative;
		width: 100%;
		padding: 12px 0px;
		font-size: 13px;
		line-height: 18px;
		margin-bottom: 10px;
		background: #c3181f; 
	}

	.btn.lg { 
		height: 45px; 
		line-height: 45px;
		padding: 0 20px; 
		font-size: 12px; 		
	}
}


@media screen and (min-width: 768px){	
	a.btn-flexible,
	button.btn-flexible {
		display: inline-block;
		position: relative;
		width: auto;
		padding: 12px 20px;
		font-size: 14px;
		line-height: 24px;
		background: #222; 
	}

	
	a.btn-flexible + a.btn-flexible,
	button.btn-flexible + button.btn-flexible {
		margin-left: 3px;
	}

	.btn.lg { 
		height: 50px; 
		line-height: 50px;
		padding: 0 20px; 
		font-size: 13px; 		
	}
}


@media screen and (min-width: 992px){	
	a.btn-flexible,
	button.btn-flexible {
		display: inline-block;
		position: relative;
		width: auto;
		padding: 12px 25px;
		font-size: 15px;
		line-height: 25px;
	}

	.btn.lg { 
		height: 55px; 
		line-height: 55px;
		padding: 0 20px; 
		font-size: 14px; 		
	}
}


@media screen and (min-width: 1200px){	
	a.btn-flexible,
	button.btn-flexible {
		display: inline-block;
		position: relative;
		width: auto;
		padding: 10px 25px;
		font-size: 15px;
		line-height: 22px;
	}

	.btn.lg { 
		height: 60px; 
		line-height: 60px;
		padding: 0 30px;
		font-size: var(--text-md);
	}
}




/*---------------------------------------------------------------------------------------------------------------

	LIST

---------------------------------------------------------------------------------------------------------------*/

ul, ol, dl { 
	margin-top: 0; 
	margin-bottom: 10px;
	padding: 0;
}

li, dl, dd, dt { 
	margin: 0; 
	list-style: none;
	padding: 0;
}

ul ul, 
ol ul, 
ul ol, 
ol ol { 
	margin-bottom: 0;
}



/*---------------------------------------------------------------------------------------------------------------

	LAYOUT

---------------------------------------------------------------------------------------------------------------*/
#wrapper { 
	width: 100%; 
	margin: 0 auto;
	position: relative; 
	padding: 0;
	overflow-x: hidden;
}

#wrapper.main {
	background: #eaeaea;
}

.container { 
	display: block;
	position: relative; 
	margin: 0 auto;
}

.alignLeft { float: left !important; }
.alignRight { float: right !important; }
.responsive-img { width: 100%; }

/* 1. Gap 유틸리티 시스템 (상하좌우 모두 적용) */
:root { 
	--grid-gap: 0rem; 
    --gap-factor: 1; /* 기본 배수 */
}
.gap10 { --grid-gap: 0.625rem; } 
.gap20 { --grid-gap: 1.25rem; }  
.gap30 { --grid-gap: 1.875rem; } 
.gap40 { --grid-gap: 2.5rem; }   
.gap50 { --grid-gap: 3.125rem; } 

/* 2. 레이아웃 엔진 최적화 */
.row {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    position: relative;
    
    /* 최종 적용 갭 = 기준값 * 해상도별 배수 */
    --applied-gap: calc(var(--grid-gap) * var(--gap-factor));
    gap: var(--applied-gap);
}

/* gap 클래스가 존재할 경우, 패딩 기반의 간격을 제거하고 gap 시스템으로 전환 */
.row[class*="gap"] > [class*="col-"] {
    padding: 0 !important;
}

[class*="col-"] {
    display: block;
    flex: 0 0 auto;
    box-sizing: border-box;
    position: relative;
    /* 계산 시에도 '최종 적용 갭' 변수를 사용합니다. */
    width: calc(var(--w, 100%) - (var(--applied-gap) * (1 - var(--pct, 1))));
}

/* --- Media Queries (너비 기준 유지) --- */

/* Mobile (320px ~) */
:root { --gap-factor: 0.5; }

#wrapper { 
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.container { max-width: 100%; margin: 0; }

[class*="col-"] { padding: 0 10px; }

.xs-col-1 { --w: 8.33%; --pct: 0.0833; }
.xs-col-2 { --w: 16.66%; --pct: 0.1666; }
.xs-col-3 { --w: 25%; --pct: 0.25; }
.xs-col-4 { --w: 33.33%; --pct: 0.3333; }
.xs-col-5 { --w: 41.66%; --pct: 0.4166; }
.xs-col-6 { --w: 50%; --pct: 0.5; }
.xs-col-7 { --w: 58.33%; --pct: 0.5833; }
.xs-col-8 { --w: 66.66%; --pct: 0.6666; }
.xs-col-9 { --w: 75%; --pct: 0.75; }
.xs-col-10 { --w: 83.33%; --pct: 0.8333; }
.xs-col-11 { --w: 91.66%; --pct: 0.9166; }
.xs-col-12 { --w: 100%; --pct: 1; }

/* Tablet (768px ~) */
@media screen and (min-width: 768px) {
	:root { --gap-factor: 0.7; }

    .container { 
		max-width: 100%; 
		margin: 0; 
	}

    [class*="col-"] { padding: 0 10px; }

    .sm-col-1 { --w: 8.33%; --pct: 0.0833; }
    .sm-col-2 { --w: 16.66%; --pct: 0.1666; }
    .sm-col-3 { --w: 25%; --pct: 0.25; }
    .sm-col-4 { --w: 33.33%; --pct: 0.3333; }
    .sm-col-5 { --w: 41.66%; --pct: 0.4166; }
    .sm-col-6 { --w: 50%; --pct: 0.5; }
    .sm-col-7 { --w: 58.33%; --pct: 0.5833; }
    .sm-col-8 { --w: 66.66%; --pct: 0.6666; }
    .sm-col-9 { --w: 75%; --pct: 0.75; }
    .sm-col-10 { --w: 83.33%; --pct: 0.8333; }
    .sm-col-11 { --w: 91.66%; --pct: 0.9166; }
    .sm-col-12 { --w: 100%; --pct: 1; }
}

/* Tablet (992px ~) */
@media screen and (min-width: 992px) {
	#wrapper { 
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
	}
    .container { 
		max-width: 900px; 
		margin: 0 auto; 
	}

    [class*="col-"] { padding: 0 20px; }

    .md-col-1 { --w: 8.33%; --pct: 0.0833; }
    .md-col-2 { --w: 16.66%; --pct: 0.1666; }
    .md-col-3 { --w: 25%; --pct: 0.25; }
    .md-col-4 { --w: 33.33%; --pct: 0.3333; }
    .md-col-5 { --w: 41.66%; --pct: 0.4166; }
    .md-col-6 { --w: 50%; --pct: 0.5; }
    .md-col-7 { --w: 58.33%; --pct: 0.5833; }
    .md-col-8 { --w: 66.66%; --pct: 0.6666; }
    .md-col-9 { --w: 75%; --pct: 0.75; }
    .md-col-10 { --w: 83.33%; --pct: 0.8333; }
    .md-col-11 { --w: 91.66%; --pct: 0.9166; }
    .md-col-12 { --w: 100%; --pct: 1; }
}

/* PC (1200px ~) */
@media screen and (min-width: 1200px) {
	:root { --gap-factor: 1; }

    #wrapper { 
		width: 100%;
		min-width: 1440px;	
		margin: 0 auto;
		padding: 0;
	}
    .container { 
		min-width: 1180px;
		max-width: 1280px; 
		margin: 0 auto;
	}

    [class*="col-"] {
		box-sizing: border-box;
	}
    .lg-col-1 { --w: 8.33%; --pct: 0.0833; }
    .lg-col-2 { --w: 16.66%; --pct: 0.1666; }
    .lg-col-3 { --w: 25%; --pct: 0.25; }
    .lg-col-4 { --w: 33.33%; --pct: 0.3333; }
    .lg-col-5 { --w: 41.66%; --pct: 0.4166; }
    .lg-col-6 { --w: 50%; --pct: 0.5; }
    .lg-col-7 { --w: 58.33%; --pct: 0.5833; }
    .lg-col-8 { --w: 66.66%; --pct: 0.6666; }
    .lg-col-9 { --w: 75%; --pct: 0.75; }
    .lg-col-10 { --w: 83.33%; --pct: 0.8333; }
    .lg-col-11 { --w: 91.66%; --pct: 0.9166; }
    .lg-col-12 { --w: 100%; --pct: 1; }
}

@media screen and (min-width: 1920px) {
	#wrapper { 
		width: 100%;
		min-width: 1440px;	
		margin: 0 auto;
		padding: 0;
	}
    .container { 
		min-width: 1280px;
		max-width: 100rem; 
		margin: 0 auto;
	}
}



/* 기본 설정: 모든 visible 클래스는 기본적으로 숨김 */
[class*="visible-"] { display: none !important; }

/* 1. Mobile (xs: 320px ~ 767px) */
.hidden-xs { display: none !important; }
.visible-xs { display: block !important; }

/* 2. Mobile Landscape / Tablet Small (sm: 768px ~ 991px) */
@media screen and (min-width: 768px) {
    /* xs 상태 초기화 */
    .hidden-xs { display: block !important; }
    .visible-xs { display: none !important; }

    /* sm 상태 적용 */
    .hidden-sm { display: none !important; }
    .visible-sm { display: block !important; }
}

/* 3. Tablet / Desktop Small (md: 992px ~ 1199px) */
@media screen and (min-width: 992px) {
    /* sm 상태 초기화 */
    .hidden-sm { display: block !important; }
    .visible-sm { display: none !important; }

    /* md 상태 적용 */
    .hidden-md { display: none !important; }
    .visible-md { display: block !important; }
}

/* 4. Desktop Large (lg: 1200px ~ 1919px) */
@media screen and (min-width: 1200px) {
    /* md 상태 초기화 */
    .hidden-md { display: block !important; }
    .visible-md { display: none !important; }

    /* lg 상태 적용 */
    .hidden-lg { display: none !important; }
    .visible-lg { display: block !important; }
}


/*---------------------------------------------------------------------------------------------------------------

	MARGIN

---------------------------------------------------------------------------------------------------------------*/
.automargin { margin: auto !important; } 
.nomargin { margin: 0px !important; }
.notopmargin { margin-top: 0px !important; }
.norightmargin { margin-right: 0px !important; }
.nobottommargin { margin-bottom: 0px !important; }
.noleftmargin { margin-left: 0px !important; }
.allmargin { margin: 30px !important; }
.topmargin { margin-top: 30px !important; }
.rightmargin { margin-right: 30px !important; }
.bottommargin { margin-bottom: 30px !important; }
.leftmargin { margin-left: 30px !important; }
.halftop { margin-top: 15px !important; }
.halfbottom { margin-bottom: 15px !important; }
.halfleft { margin-left: 15px !important; }
.halfright { margin-right: 15px !important; }
.halfmargin { margin: 15px !important; }

@media screen and (min-width: 1200px){	
	.automargin { margin: auto !important; } 
	.nomargin { margin: 0px !important; }
	.notopmargin { margin-top: 0px !important; }
	.norightmargin { margin-right: 0px !important; }
	.nobottommargin { margin-bottom: 0px !important; }
	.noleftmargin { margin-left: 0px !important; }
	.allmargin { margin: 50px !important; }
	.topmargin { margin-top: 50px !important; }
	.rightmargin { margin-right: 50px !important; }
	.bottommargin { margin-bottom: 50px !important; }
	.leftmargin { margin-left: 50px !important; }
	.halftop { margin-top: 25px !important; }
	.halfbottom { margin-bottom: 25px !important; }
	.halfleft { margin-left: 25px !important; }
	.halfright { margin-right: 25px !important; }
	.halfmargin { margin: 25px !important; }
}


.h0 { margin-top: 0 !important; }
.h5 { margin-top: 5px !important; }
.h10 { margin-top: 10px !important; }
.h15 { margin-top: 15px !important; }
.h20 { margin-top: 20px !important; }
.h30 { margin-top: 30px !important; }
.h40 { margin-top: 40px !important; }
.h50 { margin-top: 50px !important; }
.h60 { margin-top: 60px !important; }
.h70 { margin-top: 70px !important; }
.h80 { margin-top: 80px !important; }
.h100 { margin-top: 100px !important; }

/*---------------------------------------------------------------------------------------------------------------

	PADDING

---------------------------------------------------------------------------------------------------------------*/

.nopadding { padding: 0px !important; }
.notoppadding { padding-top: 0px !important; }
.norightpadding { padding-right: 0px !important; }
.nobottompadding { padding-bottom: 0px !important; }
.noleftpadding { padding-left: 0px !important; }

.allpadding { padding: 30px !important; }
.halfpadding { padding: 15px !important; }
.toppadding { padding-top: 30px !important; }
.rightpadding { padding-right: 30px !important; }
.bottompadding { padding-bottom: 30px !important; }
.leftpadding { padding-left: 30px !important; }



/*---------------------------------------------------------------------------------------------------------------

	LABEL

---------------------------------------------------------------------------------------------------------------*/
a.label,
.label { 
	display: inline-block;
	position: relative;
	vertical-align: middle;
	background: #222222;
	color: #ffffff; 
	line-height: 1.5; 
	font-weight: 500;
	letter-spacing: -0.025em;
	margin: 0;
	border: 0.0875rem solid transparent;
	outline: none;
	border-radius: 0.275rem;
}

a.label,
.label {
	font-size: var(--text-2xs); 
	padding: 0.075rem 0.4rem; 
}
@media screen and (min-width: 992px) {
	a.label,
	.label {
		font-size: var(--text-xs); 
		padding: 0.15rem 0.5rem; 
	}
}

a.label.white,
.label.white { 
	background: var(--white);
	color: var(--sub-color);
	border-color: #cccccc; 
}

a.label.default,
.label.default { 
	background: var(--main);
	border-color: var(--main);
}

a.label.primary,
.label.primary { 
	background: var(--primary);
	border-color: var(--primary);
}

a.label.success,
.label.success { 
	background: var(--success);
	border-color: var(--success);
}

a.label.danger,
.label.danger { 
	background: var(--danger);
	border-color: var(--danger);
}
	
a.label.info,
.label.info { 
	background: var(--info);
	border-color: var(--info);
}

a.label.warning,
.label.warning { 
	background: var(--warning);
	border-color: var(--warning);
}

a.label.light,
.label.light { 
	background: var(--light);
	color: var(--sub-color);
	border-color: var(--light);
}

a.label.purple,
.label.purple { 
	background: var(--label-purple);
	border-color: var(--label-purple);
}

/*---------------------------------------------------------------------------------------------------------------

	BADGE

---------------------------------------------------------------------------------------------------------------*/

.badge {
	display: inline-block;
	position: relative;
	vertical-align: middle;
    padding: .18em .7em;
    border-radius: 10rem;
	background: #222222;
	color: #fff; 
	font-size: 11px; 
	line-height: 1.2; 
	letter-spacing: -0.025em;
	margin: 0;
	font-weight: normal;
}


.badge.white { 
	background: #ffffff; 
	color: #666666;
}

.badge.primary { 
	background: #007bff;
}

.badge.success { 
	background: #28a745;
}

.badge.danger { 
	background: #dc3545; 
}
	
.badge.info { 
	background: #17a2b8;
}

.badge.warning { 
	background: #e1a116;
}

.badge.light { 
	background: #e5e5e5;
	color: #666666;
}



/*---------------------------------------------------------------------------------------------------------------

	TEXT COLOR

---------------------------------------------------------------------------------------------------------------*/
.text-default { color: var(--main) !important; }
.text-hover { color: var(--hover) !important; }
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-info { color: var(--info) !important; }
.text-warning { color: var(--warning) !important; }
.text-muted { color: var(--muted) !important; }
.text-orange { color: var(--orange) !important; }
.text-white { color: var(--white) !important; }
.text-pink { color: var(--pink) !important; }
.text-black { color: #000000 !important; }
.text-dark { color: #222222 !important; }

/*---------------------------------------------------------------------------------------------------------------

	TYPOGRAPHY

---------------------------------------------------------------------------------------------------------------*/

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.gmarketM { font-family: 'GmarketSansMedium'; }
.gmarketB { font-family: 'GmarketSansBold'; }


h1 { font-size: 30px; line-height: 40px; }
h2 { font-size: 28px; line-height: 40px; }
h3 { font-size: 26px; line-height: 38px; }
h4 { font-size: 24px; line-height: 34px; }
h5 { font-size: 20px; line-height: 32px; }
h6 { font-size: 16px; line-height: 28px; }

@media screen and (min-width: 768px){
	h1 { font-size: 36px; line-height: 50px; }
	h2 { font-size: 30px; line-height: 44px; }
	h3 { font-size: 25px; line-height: 38px; }
	h4 { font-size: 20px; line-height: 34px; }
	h5 { font-size: 18px; line-height: 32px; }
	h6 { font-size: 16px; line-height: 28px; }
}

@media screen and (min-width: 1200px){
	h1 { font-size: 45px; line-height: 60px; }
	h2 { font-size: 34px; line-height: 50px; }
	h3 { font-size: 28px; line-height: 40px; }
	h4 { font-size: 24px; line-height: 36px; }
	h5 { font-size: 20px; line-height: 32px; }
	h6 { font-size: 18px; line-height: 30px; }
}


small { font-size: 85%; }
p { margin-bottom: 10px; }
address, em, dfn, cite, .italic { font-style: italic; }
del { text-decoration: line-through; }
ins { text-decoration: underline; }

.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }

.strong { font-weight: bold; }
.normal { font-weight: normal; }

.w100 { font-weight: 100 !important; }
.w200 { font-weight: 200 !important; }
.w300 { font-weight: 300 !important; }
.w400 { font-weight: 400 !important; }
.w500 { font-weight: 500 !important; }
.w600 { font-weight: 600 !important; }
.w700 { font-weight: 700 !important; }
.w800 { font-weight: 800 !important; }
.w900 { font-weight: 900 !important; }


/*===============================================================================================================

	Table Style

===============================================================================================================*/
.table {
	display: block;
	position: relative;
	
	
}

.table table {
	width: 100%;	
	border-top: 3px solid #b7454a;
}

.table thead .th {
	border: 1px solid #cccccc;
	text-align: center;
	color: #111;
}
.table tbody .th,
.table tbody .td {
	border: 1px solid #cccccc;
	color: #333;
	background: #fff;
}

.table .th {
	color: #000000;
	background: #f9f9f9;
}

.table thead tr:first-child .th {
	border-top: none;
}

.td.active,
.th.active {
	background: #f9f9f9 !important;
}

.td.warning,
.th.warning {
	background: #fffae3 !important;
}


.td.orange,
.th.orange {
	background: #fee4d5 !important;
}



.table.scroll_table {
	overflow-x: scroll;
	margin: 0 auto;
	padding: 0 0px;
}

.table.scroll_table table {	
	width: 1000px;
}

thead .th,
thead .td {
	font-size: 14px;
	line-height: 24px;
	padding: 8px 10px;
}

tbody .th,
tbody .td {
	font-size: 12px;
	line-height: 20px;
	padding: 8px 10px;
}

@media screen and (min-width: 1200px){
	.table {
		width: 100%;
		margin: 0;
	}

	.table table {
		width: 100%;
		margin: 0;
	}


	.table.scroll_table {
		overflow-x: hidden;
		padding: 0;
	}

	.table.scroll_table table {	
		width: 100%;
	}

	thead .th,
	thead .td {
		font-size: 16px;
		line-height: 26px;
		padding: 12px 10px;
	}

	tbody .th,
	tbody .td {
		font-size: 15px;
		line-height: 25px;
		padding: 12px 10px;
	}
}



/*===============================================================================================================

	POP MODAL

===============================================================================================================*/
.popup_modal_wrapper {
	display: none;
	position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    top: 0;
    left: 0;
	z-index: 999;
	overflow-y: scroll;
}

.popup_modal {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	z-index: 9999;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

.popup_modal {
	width: 300px;
}

@media screen and (min-width: 768px) {
	.popup_modal {
		width: 500px;
	}
}

@media screen and (min-width: 992px) {
	.popup_modal {
		width: 600px;
	}
}
.popup_modal_header {
	display: block;
	position: relative;
	padding: 20px 20px;
	margin: 0;
	background: #f1f1f1;
	font-size: 18px;
	color: #000000;
	letter-spacing: 0;
	border-bottom: 1px solid #cccccc;
	border-radius: 3px 3px 0 0;

}

button.btn_close {
	display: block;
	position: absolute;
	border: none;
	margin: 0;
	padding: 0;
	width: 40px;
	height: 40px;
	top: 20px;
	right: 20px;
	text-align: center;
	font-size: 36px;
	line-height: 40px;
	color: #222222;
	outline: none;
	border-radius: 8px;
}

button.btn_close:hover {
	color: #fff;
	transition: all ease-in-out .2s;
	background-color: rgba(6, 68, 184, 0.5);
}

.popup_modal_body {
	display: block;
	position: relative;
	padding: 40px 30px;
	background: #ffffff;
	font-size: 0.95rem;
	line-height: 1.5;
	color: #222222;
	border-radius: 16px;
	overflow-y: auto; /* 내용이 길 때만 스크롤바 표시 */
	overflow-x: hidden;
	max-height: 60vh; /* 화면 밖으로 모달이 넘어가지 않도록 최대 높이 설정 */
}

/* 모달 내부 스크롤바 스타일 (웹킷 기반 브라우저: Chrome, Safari, Edge 등) */
.popup_modal_body::-webkit-scrollbar {
    width: 3px; /* 스크롤바 너비 */
}

.popup_modal_body::-webkit-scrollbar-track {
    background-color: #f5f5f5; /* 스크롤바 트랙(배경) 색상 */
	border-radius: 10px;
	margin: 16px 0; /* 스크롤바가 모달의 둥근 모서리를 뚫고 나가지 않도록 상하 여백(모서리 16px과 동일하게) 추가 */
}

.popup_modal_body::-webkit-scrollbar-thumb {
    background-color: #e5e5e5; /* 스크롤바 핸들(막대) 색상 */
    border-radius: 10px;
}