@charset "UTF-8";
/*----------------------------------------------------------------------------------*/
/*   0-0. RESET
	   0-1. FONT (10px = 1rem)
	   0-2. Common (Layout)
	   0-3. Header
	   0-4. Table (pagination / go-page)
	   0-5. Button
	   0-6. Form (input / textarea / select / datepicker / 첨부파일 )
	   0-7. Tab
	   0-8. Error page
	   0-9. LayerPopup
	   0-10. Loading
	   -------------------------------------------------------------------------------
	   
	   1. 사용자
	      su : 2층구독	  	 
	      pv : 프리미엄 바우처
	      CV : 코스트코 바우처
	      pg : PG 하위몰
	      tf : 대학등록금
	      
	   -------------------------------------------------------------------------------
	   
	   2. 관리자
	   		admin_alo : 통합관리자
	   		admin_me : 가맹점
	   		admin_tf : 대학등록금
	   
/*----------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------*/
/* 0-0. RESET
/*----------------------------------------------------------------------------------*/
* {box-sizing: border-box;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	word-break: break-all; 
	font-family: -apple-system, BlinkMacSystemFont, AppleSDGothicNeo-regular, 'Spoqa Han Sans Neo', 'Malgun Gothic', '맑은 고딕', '돋움', Dotum, Sans-serif;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ul,li,a {display: block;}
a {text-decoration: none; color:inherit;}
select {appearance:none; -webkit-appearance:none; -moz-appearance:none;}
button, select {cursor: pointer;}
button, select, input {border:none; border-radius:0; background-color: transparent;}
input:focus, select:focus, option:focus, textarea:focus, button:focus {outline:none; border: none;}
img, svg, video, canvas, audio, iframe {display: block;}
img, video {max-width: 100%; height:auto;}



/*----------------------------------------------------------------------------------*/
/* 0-1. FONT
/*----------------------------------------------------------------------------------*/
/* Spoqa Han Sans Neo */
@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 700;
    src: local('Spoqa Han Sans Neo Bold'),
    url('/docfiles/store/fonts/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
    url('/docfiles/store/fonts/SpoqaHanSansNeo-Bold.woff') format('woff'),
    url('/docfiles/store/fonts/SpoqaHanSansNeo-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 500;
    src: local('Spoqa Han Sans Neo Medium'),
    url('/docfiles/store/fonts/SpoqaHanSansNeo-Medium.woff2') format('woff2'),
    url('/docfiles/store/fonts/SpoqaHanSansNeo-Medium.woff') format('woff'),
    url('/docfiles/store/fonts/SpoqaHanSansNeo-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 400;
    src: local('Spoqa Han Sans Neo Regular'),
    url('/docfiles/store/fonts/SpoqaHanSansNeo-Regular.woff2') format('woff2'),
    url('/docfiles/store/fonts/SpoqaHanSansNeo-Regular.woff') format('woff'),
    url('/docfiles/store/fonts/SpoqaHanSansNeo-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 300;
    src: local('Spoqa Han Sans Neo Light'),
    url('/docfiles/store/fonts/SpoqaHanSansNeo-Light.woff2') format('woff2'),
    url('/docfiles/store/fonts/SpoqaHanSansNeo-Light.woff') format('woff'),
    url('/docfiles/store/fonts/SpoqaHanSansNeo-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 100;
    src: local('Spoqa Han Sans Neo Thin'),
    url('/docfiles/store/fonts/SpoqaHanSansNeo-Thin.woff2') format('woff2'),
    url('/docfiles/store/fonts/SpoqaHanSansNeo-Thin.woff') format('woff'),
    url('/docfiles/store/fonts/SpoqaHanSansNeo-Thin.ttf') format('truetype');
}


/****** YouandiNewKR ******/
@font-face {
	font-family: 'YouandiNewKR';
	src:
		url('../fonts/YouandiNewKrTitle-Light.woff2'),
		url('../fonts/YouandiNewKrTitle-Light.woff');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'YouandiNewKR';
	src:
		url('../fonts/YouandiNewKrTitle-Reqular.woff2'),
		url('../fonts/YouandiNewKrTitle-Reqular.woff');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'YouandiNewKR';
	src:
		url('../fonts/YouandiNewKrTitle-Medium.woff2'),
		url('../fonts/YouandiNewKrTitle-Medium.woff');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'YouandiNewKR';
	src:
		url('../fonts/YouandiNewKrTitle-Bold.woff2'),
		url('../fonts/YouandiNewKrTitle-Bold.woff');
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: 'YouandiNewKR';
	src:
		url('../fonts/YouandiNewKrTitle-ExtraBold.woff2'),
		url('../fonts/YouandiNewKrTitle-ExtraBold.woff');
	font-weight: 700;
	font-style: normal;
}


/*----------------------------------------------------------------------------------*/
/* 0-2. Common (Layout)
/*----------------------------------------------------------------------------------*/

:root {
	--inner1200 : 1280px;
	--inner1600 : 1600px;
	--inner1840 : 1920px;
	
	/* BK */
	--BK: #000000;
	--BK_80: #333333;
	--BK_64: #5C5C5C;
	--BK_48: #858585;
	--BK_40: #949494;
	--BK_20: #cccccc;
	--BK_16: #d6d6d6;
	--BK_12: #e0e0e0;
	--BK_8: #ebebeb;
	--BK_4: #f5f5f5;
	--BK_2: #fafafa;
	
	--BK_a80: rgba(0,0,0,0.8);
	--BK_a64: rgba(0,0,0,0.64);
	--BK_a48: rgba(0,0,0,0.48);
	--BK_a40: rgba(0,0,0,0.4);
	--BK_a20: rgba(0,0,0,0.2);
	--BK_a16: rgba(0,0,0,0.16);
	--BK_a12: rgba(0,0,0,0.12);
	--BK_a8: rgba(0,0,0,0.08);
	--BK_a4: rgba(0,0,0,0.04);
	--BK_a2: rgba(0,0,0,0.02);
	
	
	/* WT */
	--WT: #ffffff;
	--WT_80 :#cccccc;
	--WT_64 :#a3a3a3;
	--WT_48 :#7a7a7a;
	--WT_40 :#666666;
	--WT_20 :#333333;
	--WT_16 :#292929;
	--WT_12 :#1f1f1f;
	--WT_8 :#141414;
	--WT_4 :#0a0a0a;
	--WT_2 :#050505;
	
	--WT_a80: rgba(255, 255, 255, 0.8);
	--WT_a64: rgba(255, 255, 255, 0.64);
	--WT_a48: rgba(255, 255, 255, 0.48);
	--WT_a40: rgba(255, 255, 255, 0.4);
	--WT_a20: rgba(255, 255, 255, 0.2);
	--WT_a16: rgba(255, 255, 255, 0.16);
	--WT_a12: rgba(255, 255, 255, 0.12);
	--WT_a8: rgba(255, 255, 255, 0.08);
	--WT_a4: rgba(255, 255, 255, 0.04);
	--WT_a2: rgba(255, 255, 255, 0.02);

		
	--Primary_a2: rgba(0, 150, 234, 0.08);
	--Point: #0070f0;
	--Auto : #3D5BDC;
	--M3_Main: #005CB9;
	--Alert: #FF0000;
	--Red_Main: #E3001F;
	--costco_Red: #c8102E;
	
	--boxshadow:0 2px 4px rgba(0,0,0,0.08);
}


/* 전체 스크롤 */
*::-webkit-scrollbar {width: 4px;}
*::-webkit-scrollbar-track {background-color: transparent;}
*::-webkit-scrollbar-thumb {background-color: #dbdbdb; border-radius: 10px; }


/* tbl 스크롤 */
.tbl.scrollWide::-webkit-scrollbar,
.tbl.scrollWrap::-webkit-scrollbar {width: 2rem;}
.tbl.scrollWide::-webkit-scrollbar-track,
.tbl.scrollWrap::-webkit-scrollbar-track  {background: transparent; cursor: pointer; }
.tbl.scrollWide::-webkit-scrollbar-thumb,
.tbl.scrollWrap::-webkit-scrollbar-thumb {
	background-color: #dbdbdb;  border: 6px solid transparent; 
	background-clip: padding-box; border-radius: 0;
  border-left: 0px solid transparent; border-right: 0px solid transparent; 
	cursor: pointer; 
} 


body {
	overflow-X :hidden;
	font-family:-apple-system, BlinkMacSystemFont, AppleSDGothixNeo-Reqular, Noto Sans, Roboto, Malgun Gothic, '맑은 고딕', dotum, '돋움', sans-serif !important;
  font-weight: 400; font-size: 1.4rem; line-height: 2rem; 
	scroll-behavior: smooth;
}
body.noScroll {height: 100vh; overflow-y: hidden;}

html {font-size: 62.5%;}
.soundOnly {width: 0; height: 0; position: absolute; top: 0; left: -9999px; overflow: hidden;}
.flexi {display: flex; align-items: center;}
.flexible {display: flex; align-items: center; justify-content: center;}
.fbtween {display: flex; align-items: center; justify-content: space-between;}
.flexEnd {display: flex; align-items: flex-end; }
.col {display: flex; flex-direction: column;}
.dn {display: none !important;}



/*----------------------------------------------------------------------------------*/
/* Layout
/*----------------------------------------------------------------------------------*/
#wrap {width: 100%; min-height: 100dvh; }

main {
	width: 100%;
	min-height: 59rem; 
	height: 100%;
	margin: auto;
	display: flex;
}
main .inner {	
	max-width: var(--inner1200); width: 100%;
	margin: auto; 
	padding: 6.4rem 4rem 16rem 4rem; 
}
main .inner.ty1 {max-width: var(--inner1600);}
main .inner.ty2 {max-width: var(--inner1840);}
main .inner.pd0 {padding: 0;} 
 
.main-tit {
	text-align: center;
	margin-bottom: 4rem;
  font: 600 3.4rem/4.4rem "YouandiNewKR";
  color: var(--BK);
}

/****** section ******/
.sec {
	width: 100%; height: 100%;
	display: flex; flex-direction: column;
}
.sec + .sec {margin-top: 4rem}
.sec + .sec.mt28 {margin-top: 2.8rem;}
.sec-header {width: 100%; display: flex; align-items: flex-end; justify-content: flex-start; gap: 2rem; margin-bottom: 2rem}
.sec-header .sec-tit {font-size: 2.4rem; font-weight: 700; line-height: 3.2rem;}
.sec-header .sub-tit {font-size: 2rem; font-weight: 700; line-height: 2.6rem;}
.sec-header > span {line-height: 2.2rem; color: var(--BK_48);}

.sec .inner.xs{width: 100%; padding: 0 20.4rem; position: relative;}



/*********** filter-wrap ***********/
.filter-wrap {
	width: 100%; 
	display: flex; align-items: center; justify-content: space-between;
	padding-bottom: 1.6rem;
}
.filter-card {
	width: 100%; 
	min-width: 79.2rem;
	padding: 3.6rem 2.8rem;
	display: flex; align-items: center;
	border: 1px solid var(--BK); border-radius: 8px;
	}
.filter-card .f-inner {display: flex; flex-direction: column; gap: 2rem;}
.filter-card .f-inner .f-cont {display: flex; align-items: center;  gap: 2.8rem;}
.filter-card .f-inner .f-cont.m-12 {margin-top: -1.2rem;}
.disc {display: flex; align-items: center; color: var(--BK_48); font-weight: 500; font-size: 1.4rem; line-height: 2.2rem;}
.disc::before { content: '';
	display: inline-block;
	width: 2px; height: 2px;
	background-color: var(--BK_a40); border-radius: 50%;
	margin-right: 6px;
}
.filter-card .f-group {display: flex; align-items: center; gap: 1.2rem;}
.f-group.flexstart {align-items: flex-start;}
.it-wrap {display: flex; align-items: center; gap: 8px;  color: var(--BK_a20);}

.disc.M3_Main {color: var(--M3_Main);}
.disc.Red_Main {color: var(--Red_Main);}
.disc.M3_Main::before {background-color: var(--M3_Main);}
.disc.Red_Main::before {background-color: var(--Red_Main);}
.disc.no::before {display: none;}



/*----------------------------------------------------------------------------------*/
/* 0-3. Header
/*----------------------------------------------------------------------------------*/
header#page-menu {
	width: 100%; height: 8rem;
	padding-inline: 4rem;
	display: flex; align-items: flex-start; gap:4rem;	
	background-color: var(--WT);
	box-shadow: var(--boxshadow);
	position: relative;
	
	position: sticky;
	top: 0; left: 0; z-index: 100;
}
header#page-menu .logo-inner {
	height: 100%;
	display: flex; align-items: center; gap: 1rem;
}
header#page-menu .logo-inner h1 {min-width: 13.8rem; flex-shrink: 0;}
header#page-menu .logo-inner h2 { font: 500 2rem / 2.6rem "YouandiNewKR"; padding-top: 5px; display: flex; cursor: pointer;}
header#page-menu .logo-inner h2.adm::after {content: 'Admin';
	display: inline-block;
	width: 5.1rem; height: 2.2rem;
  margin-left: 6px;
  text-align: center; 
	background-color: var(--BK); border-radius: 2rem; color: var(--WT);
	font-family: "YouandiNewKR"; font-size: 1.2rem; font-weight: 500;
}


/* main-gnb */
nav {
	height: 100%;  
	display: flex; align-items: center; 
	position: relative;  z-index: 10;
}
nav .main-gnb {height: 100%; display: flex; align-items: center;}
nav .main-gnb > li {
	height: 100%;
	padding: 0 2rem; padding-top: 5px;
	display: flex; align-items: center; justify-content: center; flex-direction: column;
	font: 500 1.8rem/2.2rem "YouandiNewKR";
	position: relative;
	cursor: pointer;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
nav .main-gnb > li::after {content: '';
	display: inline-block;
	width: 100%; height: 2px;
	background-color: var(--BK);
	position: absolute; bottom: 0; left: 0;
	transform: scaleX(0); opacity: 0;
	transition: transform 0.2s ease, opacity 0.3s ease;
}
nav .main-gnb > li:hover::after {transform:scaleX(1); opacity: 1;}
nav .main-gnb > li.menu-select::after {transform: none; opacity: 1;}


.sub-gnb {
	width: 100%; padding: 2.8rem 0 5.6rem;
	position: absolute; top: -100%; 
	left: 2rem;	
	opacity: 0.8;
}
.sub-gnb > li {
	width: 100%; height: 3rem;
	font-size: 1.4rem; font-weight: 600;
	display: flex; align-items: center;
	white-space: nowrap;
}
.sub-gnb > li a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}
.subgnb-bg{
	width: 100vw; min-height: 0;
	position: fixed; top:8rem; left:0; z-index: -1;
	box-shadow: var(--boxshadow); background-color: var(--WT);
	transition: min-height 0s ease;
}
.top-n150p .sub-gnb {
	top: -150%;
}

/* active */
.sub-gnb.on {top: 100%; opacity:1; }
.subgnb-bg.on {min-height: 12rem;}
.top-n150p .subgnb-bg.on {min-height: 15rem;}

/******* sub-header : site-navi *******/
.sub-header {
	width: 100%; height: 4.8rem;
	padding: 0 4rem;
	display: flex; align-items: center; justify-content: space-between;
	border-bottom: 1px solid var(--BK_4);
	background-color: var(--WT);
}
#site-navi {
	height: 100%;
	font-size: 1.4rem; line-height:2rem;
	display: flex; align-items: center; gap: 4px;
}
#site-navi .dep {height: 100%; display: flex; align-items: center; gap: 4px; font-weight: 500 !important;}
#site-navi  span {
	display: inline-block;
	width: 16px; height: 16px;
	background-image: url("../img/ico_arrw_forword.svg");
}

.site-util {display: flex; align-items: center; gap: 6px;}
.site-util .user-tit {padding-right: 2rem}
.site-util .util-btn {
	display: inline-block;
	height: 3.2rem; 
	padding: 6px 8px; 
 	font-size: 1.4rem;	font-weight : 700; 
	border-radius: 8px; background-color: var(--BK_a8);
}
.site-util .util-btn.login {background-color: var(--BK); color: var(--WT); padding: 6px 15.5px;}



/*----------------------------------------------------------------------------------*/
/* 0-4. Table (pagination + go page)
/*----------------------------------------------------------------------------------*/
.tbl {
	width: 100%; 
	position: relative;
	border-top: 1px solid var(--BK_40);
}
.tbl table {
	width: 100%; 
	table-layout: fixed; border-collapse: collapse;
  font-weight: 500;
	background-color: var(--WT);
	border-bottom: 1px solid var(--BK_16);
}
.tbl.noborder table {border-bottom: none;}

.tbl tbody + tbody {border-top: 1px solid var(--BK_a8);}
.tbl table tr + tr {border-top: 1px solid var(--BK_a8);}
.tbl table thead tr:first-of-type{border-bottom: 1px solid var(--BK_a16);}
.tbl table thead tr.h52:first-of-type {border-color: var(--BK_a8);}
.tbl table thead tr.h52:nth-child(2) {border-bottom: 1px solid var(--BK_a16);}
.tbl table thead tr.h52:nth-child(2) th {color:var(--BK_80);}
.tbl table th,
.tbl table td {
	min-width: 4.5rem; 
	padding: 0.9rem 1.4rem; 
	text-align: center; vertical-align: middle;
	box-sizing: border-box;
	transition: background-color 0.2s linear;
}
.tbl thead th, .tbl tbody th {
	height: 5.2rem;
	font-size: 1.6rem;  font-weight: 700; line-height: 2.2rem;
	color: var(--BK);
}
.tbl table td {
	height: 5.2rem;
	font-size: 1.4rem; font-weight: 500; line-height: 2rem;
	color: var(--BK_64);
}
.tbl table td > .check-wrap {display: flex; align-items: center; justify-content: center;}
.tbl tfoot td {font-weight: 500; font-size: 1.4rem; line-height: 2rem; color: var(--BK);}
.tbl tbody + tfoot tr {border-top: 1px solid var(--BK_a8);}


/* state */
.tbl.Hover tbody tr:hover {cursor: pointer;}
.tbl.Hover tbody tr:hover td {background-color: var(--BK_a4);}


/* class */
.tbl.pdi0 table th, 
.tbl.pdi0 table td, 
.tbl table td.pdi0, 
.tbl table th.pdi0 {padding-inline: 4px !important;}
.tbl table td.pdb0 {padding-block: 0;}

.tbl th.tal, .tbl td.tal {text-align: left; padding-left: 1.6rem;}
.tbl tr.tar td, .tbl th.tar, .tbl td.tar {text-align: right; padding-right: 1.6rem;}
.tbl table tr.h64 th, .tbl table tr.h64 td,
.tbl table tr th.h64, .tbl table tr td.h64 {height: 6.4rem}
.tbl table tr.th-row2 th {font-weight: 500;}
.tbl table tr.th-row3 th{font-weight: 500; color: var(--BK_80);}

.tbl table td .ellipsis {
	display: -webkit-box;
	-webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
	overflow: hidden; text-overflow: ellipsis;
	white-space: normal; word-break: break-all;
}
.tbl table td.nodata {
	height: 15.6rem;
	font: 500 1.6rem / 2.2rem "YouandiNewKR";
	color: var(--BK_48);
	text-align: center;
}
.tbl table tr:hover td.nodata {background-color: var(--WT); cursor: default;} 


/******* 링크이동 *******/
.tbl.Hover.ty2 tbody tr:hover {cursor: default;}
.tbl table td > a.links {text-decoration: underline; text-underline-offset: 2px; text-decoration-color: transparent;}
.tbl table tr:hover td>a.links {text-decoration-color: var(--BK_64); transition: text-decoration 0.2s linear;}


/******* list type *******/
.tbl.list {border-bottom-color: var(--BK_a8); }
.tbl.list th, .tbl.list td:not(.tar) {text-align: left; padding-block: 2rem;} 
.tbl.list th {font-weight: 700; font-size: 1.6rem; color: var(--BK); padding-inline: 2.4rem;}
.tbl.list td {height: 8.8rem; padding-inline: 0.8rem 2.4rem; font-size: 1.6rem;}
.tbl table tbody.h88 td {height: 8.8rem;}
.tbl.list.tac th, .tbl.list.tac td:not(.tar){text-align: center; padding: 1.4rem;}



/******* scroll *******/
.tbl.scrollWrap  {max-width:1200px; overflow-x: scroll;}


/******* .scrollWide : 데이터 스크롤 시 / .auto type : 금액 11자리 숫자 적을시 *******/
.tbl.auto table {table-layout: auto;}
.tbl.auto table th.w6, .tbl.auto table td.w6{ width: 6rem;}
.tbl.auto table th.w14, .tbl.auto table td.w14{ width: 14rem;}

.tbl.scrollWide {max-width: 1840px; overflow-x: scroll; padding-bottom: 2px;}
.tbl.scrollWide table, .tbl.scrollWide table tr {position: relative;}
.tbl.scrollWide th.sticky,
.tbl.scrollWide td:first-of-type {
	position: sticky; left: 0; top: 0; background-color: var(--WT); z-index: 10;
	overflow: visible
}
.tbl.scrollWide th.sticky::after,
.tbl.scrollWide td:first-of-type::after{ content: '';
	display: inline-block;
	width: 20px; height: 104px;
	position: absolute; top: 0; right: -17px;
	box-shadow: inset 12px 0 13px -5px rgb(255 255 255 / 100%); 	
 }
 .tbl.scrollWide td:first-of-type::after{height: 5rem;}



/*----------------------------------------------------------------------------------*/
/* pagination + go page
/*----------------------------------------------------------------------------------*/
#page-nav {display: flex; align-items: center; justify-content: center; margin-top: 3.2rem;}
#page-nav ul {height: 3.2rem; display: flex; align-items: center; justify-content: center; gap: 4px;}
#page-nav ul li {
	width: 3.2rem; height: 3.2rem; 
	display: flex; align-items: center; justify-content: center;
	color: var(--BK_a16); font-size: 1.4rem; line-height: 2rem;
	cursor: pointer;
}
#page-nav ul li b{
	display: block; width: 100%; height: 100%; 
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--BK); border-radius: 6px; color: var(--BK);
	font-weight: 700;
}
#page-nav ul li:not(.pager-num) {border: 1px solid var(--BK); border-radius: 6px; color: var(--BK);}
#page-nav ul li.disable {border-color: var(--BK_a16); cursor: default;}
#page-nav ul li[id*="page-"]::before {content:'';
	display:  inline-block;
	width: 2rem; height: 2rem;
	background-repeat: no-repeat; background-size: 2rem 2rem; background-position: center; 
}
#page-nav ul li#page-prev {margin-right: 1.2rem;}
#page-nav ul li#page-next {margin-left: 1.2rem;}


/* li 활성화 */
#page-nav ul li#page-first::before {background-image: url("../img/pagi_last.svg"); transform: scale(-1);}
#page-nav ul li#page-prev::before {background-image: url("../img/pagi_next.svg"); transform: scale(-1);}
#page-nav ul li#page-next::before {background-image: url("../img/pagi_next.svg");}
#page-nav ul li#page-last::before {background-image: url("../img/pagi_last.svg");}

/* li 비활성화 */
#page-nav ul li#page-first.disable::before {background-image: url("../img/pagi_first_Dis.svg"); transform: scale(1);}
#page-nav ul li#page-prev.disable::before {background-image: url("../img/pagi_prev_Dis.svg"); transform: scale(1);}
#page-nav ul li#page-next.disable::before {background-image: url("../img/pagi_prev_Dis.svg"); transform: scale(-1);}
#page-nav ul li#page-last.disable::before {background-image: url("../img/pagi_first_Dis.svg"); transform: scale(-1);}


/********** 더보기 **********/
#go-page {
	width: 100%; height: 4.8rem;
	padding: 0 2.8rem;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 1.6rem; line-height: 2.2rem;
	background-color: var(--BK_a8); border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
}
#go-page:hover {background-color: var(--BK_a12);}
#go-page:active, #go-page:focus {background-color: var(--BK_a16);}




/*----------------------------------------------------------------------------------*/
/* 0-5. Button
/*----------------------------------------------------------------------------------*/
input, select, button, textarea {
	font-size: 1.6rem; font-weight: 500; line-height: 2.2rem;
	cursor: pointer; box-sizing: border-box;
}
.btn {
	width: auto; 
	min-width: 9.6rem;
	height: 4.8rem;
	padding: 0 2.7rem;
	text-align: center;
	font-weight: 700; font-size: 1.6rem;
	background-color: var(--BK_a4); border-radius: 8px; color: var(--BK); border: none;
	transition: background-color 0.2s ease;
	flex: 0 0 auto;
}

/* class */
.btn.xls{
	width: 9.6rem; padding: 0 2rem 0 4.3rem;
	display: flex; align-items: center;
	font-size: 1.6rem; font-weight: 700;
	background-size: 2.4rem 2.4rem;
	background-image: url("../img/ico_excel.svg");
	background-repeat: no-repeat; background-position: left 2rem center;
	margin-left: auto;
}
.btn.xs{width: 9.5rem; padding: 0;}
.btn.p13 {padding: 0 1.3rem; margin-left: 8px;}


/* 큰버튼 */
 .BK-btn {
	width: 30rem; height: 6.4rem;
	font-size: 2rem; font-weight: 700; line-height: 2.6rem;
	background-color: var(--BK); color: var(--WT); border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	transition: background-color 0.2s ease;
	border: 0;
}
.BK-btn.pale {background-color: var(--BK_a4); color: var(--BK);}


.btnBox {
	width: 100%;
	display: flex; align-items: center; justify-content: center; gap: 1.6rem;
}
.btnBox button {width: 20rem;}

/* hover */
.btn:hover, .BK-btn.pale:hover {background-color: var(--BK_a12);}
.btn:active, .BK-btn.pale:active {background-color: var(--BK_a16);}
.btn:disabled, .BK-btn.pale:disabled {background-color: var(--BK_a8); color: var(--BK_a20);}
.BK-btn:hover {background-color: var(--BK_80);} 
.BK-btn:active {background-color: var(--BK_64);} 
.BK-btn:focus {border: 0;}
.BK-btn:disabled {background-color: var(--BK_a8); color: var(--BK_a20); cursor: default;} 


/****** badge ******/
.badge {
	padding:6px 8px;
	font-size: 1.4rem; line-height: 2rem; 
	background-color: var(--BK_a4); color: var(--BK); border-radius: 8px;
}
.badge.BK {background-color: var(--BK); color: var(--WT) !important; padding: 2px 12px; border-radius: 4rem;}
.badge:hover, .badge:active, .badge:focus {color: var(--BK) !important; background-color: var(--BK_a12);}



/*----------------------------------------------------------------------------------*/
/* 0-5. Form : input select textarea Datepicker 첨부파일
/*----------------------------------------------------------------------------------*/
.it {
	width: 100%; height: 4.8rem;
	padding: 0 1.2rem; text-align: left;
	background-color:  var(--WT);
  outline: 1px solid var(--BK_a20); outline-offset: -2px; border-radius: 4px;
  color: var(--BK); font-weight: 500;
  transition: border-color 0.2s ease;
}

/* state */
.it::placeholder {
	font-size: 1.6rem; font-weight: 500; line-height: 2.2rem;
	color: var(--BK_a40);
}
.it:focus::placeholder {color: transparent;}
.it:disabled {outline-color: var(--BK_a20); color: var(--BK_a20); cursor: default;}
.it:hover {outline-color: var(--BK);} 
.it:focus, .it:active{outline: 2px solid var(--BK); color: var(--BK);  font-weight: 500;}
.it[readonly] {font-weight: 500; color: var(--BK_a20);}
.it[readonly], 
.it[readonly]:hover, 
.it[readonly]:active {outline: 1px solid var(--BK_20); color: var(--BK_a20);}
.it:disabled:hover, 
.it:disabled:active, 
.it:disabled:focus {outline: 1px solid var(--BK_20); color:var(--BK_a20); cursor: not-allowed;}


/* class */
.it.tac {text-align: center;}
.it.srch {width: 50rem;}

.it.w28 {width: 28rem;}
.it.w52 {width: 5.2rem;}
.it.w62 {width: 6.2rem;}
.it.w73 {width: 7.3rem;}
.it.w76 {width: 7.6rem;}
.it.w82 {width: 8.2rem;}
.it.w97 {width: 9.7rem;}
.it.w100 {width: 10rem;}
.it.w120 {width: 12rem;}
.it.w140 {width: 14rem;}
.it.w19 {width: 19rem;}
.it.w24 {width: 24rem;}
.it.w30 {width: 30rem;}
.it.w32 {width: 32rem;}
.it.w36 {width: 36rem;}
.it.w40 {width: 40rem;}
.it.w44 {width: 44rem;}
.it.w46 {width: 46rem;}
.it.w50 {width: 50rem;}
.it.w60 {width: 60rem;}


/****** date ******/
.it.date {
	width: 13.6rem; 
	padding: 0 3.3rem 0 1.4rem;
	appearance: none; -webkit-appearance: none;
	background-image: url("../img/ico_calendar_defalut.svg");
	background-repeat: no-repeat; 
	background-position: center right 1rem; 
	background-size: 2.4rem 2.4rem;
	transition: background-image 0.3s ease;
}
.it.date::placeholder {font-size: 1.4rem;}
input[type="date"]::-webkit-calendar-picker-indicator {display: none; -webkit-appearance: none;}
input[type="date"]::-webkit-inner-spin-button,input[type="date"]::-webkit-clear-button {display: none; -webkit-appearance: none;}

/* state icon */
.it.date:active, 
.it.date:focus,
.it.date:not(:placeholder-shown){background-image: url("../img/ico_calendar_on.svg");}
.it.date.error {
	background-image: url("../img/ico_calendar_error.svg"); 
	outline: 2px solid var(--Alert); color: var(--Alert);
}
.it.date.error:active, .it.date.error:focus {outline-color: var(--Alert);}
.it.date:disabled {background-image: url("../img/ico_calendar_disabled.svg");}
.it.date:disabled:hover, .it.date:disabled:active, .it.date:disabled:focus {outline: 1px solid var(--BK_a20);}



/****** checkBox ******/
.check-wrap {display: inline-flex; align-items: center;}
.check-wrap input {
	appearance: none; -webkit-appearance: none;
	width: 3.2rem; height: 3.2rem;
	margin: 0;
	background-repeat: no-repeat; background-position: center; background-size: contain;
	cursor: pointer;
	transition: background-image 0.2s ease;
}

/* class */
.check-wrap input.w24 {width: 2.4rem; height: 2.4rem;}
.check-wrap input.w24 + span {padding-left: 6px; font-weight: 700;} 
.check-wrap input.w48 {width: 4.8rem; height: 4.8rem;}

.check-wrap input[type="checkbox"]{background-image: url("../img/ico_check.svg");}
.check-wrap input[type="checkbox"]:disabled,
.check-wrap input[type="checkbox"]:disabled:active,
.check-wrap input[type="checkbox"]:disabled:focus{
	background-image: url("../img/ico_check.svg");
	cursor: not-allowed; pointer-events: none;
}

.check-wrap input[type="checkbox"]:checked,
.check-wrap input[type="checkbox"]:checked:disabled,
.check-wrap input[type="checkbox"]:checked:disabled:active,
.check-wrap input[type="checkbox"]:checked:disabled:focus {background-image: url("../img/ico_checked.svg");}
.check-wrap input[type="checkbox"]:disabled + span  {cursor: not-allowed !important;}

/* WT checkbox */
.check-wrap.WT {position: absolute; bottom: -4.2rem; left: 2rem;}
.check-wrap.WT input[type="checkbox"]{background-image: url("../img/ico_check_WT.svg");}
.check-wrap.WT input[type="checkbox"]:checked,
.check-wrap.WT input[type="checkbox"]:checked:disabled {background-image: url("../img/ico_checked_WT.svg");}

.check-wrap.WT input[type="checkbox"]:disabled,
.check-wrap.WT input[type="checkbox"]:disabled:active,
.check-wrap.WT input[type="checkbox"]:disabled:focus {
	background-image: url("../img/ico_checkDis_WT.svg") !important;
	cursor: not-allowed; pointer-events: none;
}
.check-wrap.WT input + span {color: var(--WT); font-size: 1.6rem; line-height: 2.2rem; padding-top: 5px; cursor: pointer;}


/****** radio ******/
.check-wrap input[type="radio"],
.check-wrap input[type="radio"]:disabled {background-image: url("../img/ico_radio.svg");}

.check-wrap input[type="radio"]:checked ,
.check-wrap input[type="radio"]:checked:disabled {background-image: url("../img/ico_radio_checked.svg");}

.check-wrap span {
	height: 100%;
	padding-left: 1.2rem;
	display: inline-flex; align-items: center;
}
span.noTxt {padding-left: 0; text-indent: -9999px}

/* 박스 라디오 */
.radio-box {
	display: inline-flex; align-items: center; gap: 4px;
	flex: 0 0 auto; width: auto;
}
.radio-box .radio-btn {position: relative;}
.radio-box .radio-btn input {position: absolute; left: 0; top: 0; opacity: 0;}
.radio-box .radio-btn span {
	padding: 1.3rem 2.1rem;
	font-size: 1.6rem; line-height: 2.2rem; font-weight: 500;
	outline: 1px solid var(--BK_20); outline-offset: -1px; border-radius: 4px; color: var(--BK);
	transition: outline 0.2s ease;
	cursor: pointer;
}

/* state */
.radio-box .radio-btn span:hover {outline-color: var(--BK);}
.radio-box .radio-btn input:checked + span,
.radio-box .radio-btn input:active + span, 
.radio-box .radio-btn input:focus + span {outline: 2px solid var(--BK); font-weight: 700;}

.radio-box .radio-btn input:disabled + span {outline: 1px solid var(--BK_20); color: var(--BK_20); pointer-events: none;} 




/****** select ******/
.st-origin{position: absolute; top: 0; left: 0; opacity:0; cursor: none; pointer-events: none;}
.st-wrap {position: relative; display: block;}
.tbl td > .st-wrap:not(.tbl.list td > .st-wrap) {display: flex; align-items: center; justify-content: center;}
.st-wrap + label:not(.srch-wrap) {margin-left: 8px;}

.st-toggle {
	width: 100%;
	min-width: 9.7rem;
	min-height: 4.8rem;
	display: flex; align-items: center;
	flex: 0 0 auto;
	height: 4.8rem;
	padding: 0 3.2rem 0 1.6rem;
	text-align: left;
	font-weight: 500; color: var(--BK_a40);
  outline: 1px solid var(--BK_20); outline-offset: -1px; border-radius: 4px;
  
	background-image: url("../img/ico_drop_arrw.svg");
	background-repeat: no-repeat; 
	background-size: 2.4rem 2.4rem;
	background-position: right 1.2rem center;
	transition: all 0.2s ease;
	
	white-space: nowrap;
	overflow: hidden;
  text-overflow: ellipsis;
}
.st-toggle.on {background-image: url("../img/ico_up_arrw.svg"); color: var(--BK);}

/* .selected : 선택완료 후 / 기본적으로 선택이 되있는 상태일때 */
.st-toggle.selected {color: var(--BK);}
.st-toggle:focus {color: var(--BK);}
.st-toggle:disabled {
	outline-color: var(--BK_20); color: var(--BK_20); 
	background-image: url("../img/ico_drop_arrw_disabled.svg");
	cursor: default; pointer-events: none; cursor: not-allowed;
}

/* class */
.st-toggle.w68 {min-width: 6.8rem;}
.st-toggle.w8 {width: 8rem;}
.st-toggle.w10 {width: 10rem;}
.st-toggle.w12 {width: 12rem;}
.st-toggle.w14 {width: 14rem;}
.st-toggle.w15 {width: 15rem;}
.st-toggle.w16 {width: 16rem;}
.st-toggle.w18 {width: 18rem;}
.st-toggle.w20 {width: 20rem;}
.st-toggle.full {width: 100%;}
.st-toggle.full + .st-list {width: 100%;}


.st-list {
	max-height: 0; 
	width: max-content; min-width: 100%;
	white-space: nowrap;
	overflow-y: auto;
	display: flex; flex-direction: column; align-items: flex-start;
	border: 1px solid var(--BK); border-radius: 4px;
	background-color: var(--WT); box-shadow: var(--boxshadow);
	position: absolute; top: calc(100% + 8px); left:0; z-index: 90;
	opacity: 0;
	transition: max-height 0.3s ease, opacity 0.2s linear;
	
}
.st-list.on { opacity: 1; max-height: 48rem;}
.st-list .st-option {
	width: 100%;
	min-height: 4.8rem; line-height: 4.8rem;
	padding: 0 1.6rem;
	display: flex; align-items: center; justify-content: space-between;
	font-size: 1.6rem; color: var(--BK);
	cursor: pointer;
	background-color: var(--WT);
}
.st-list .st-option + .st-option {border-top: 1px solid var(--BK_a4);}
.tbl.list td  .st-list {min-width: 0;}



/* class */
.st-list .st-option.selected {background-color: var(--BK_2);}
.st-list .st-option.selected::after {content:'';
	display: inline-block; margin-left: 2rem;
	width: 2.4rem; height: 2.4rem;
	background: url("../img/ico_st_checked.svg") no-repeat center / contain; 
}

/* state */
.st-toggle:hover {outline-color: var(--BK);}
.st-toggle:focus, .st-toggle:active {outline: 2px solid var(--BK); color: var(--BK);}

.st-toggle:disabled:hover, 
.st-toggle:disabled:active, 
.st-toggle:disabled:focus {outline-color: var(--BK_20); color: var(--BK_20);}
.st-list .st-option:hover, 
.st-list .st-option.selected:hover {background-color: var(--BK_2);}


/****** textarea ******/
textarea {
	width: 100%; padding: 1.3rem 1.6rem;
	box-sizing: border-box; resize: none; overflow-y: scroll;
	font-size: 1.6rem; line-height: 2.2rem; color: var(--BK);
	border: 0; border-radius: 4px; 
	outline: 1px solid var(--BK_a20); 
	transition: all 0.3s ease;
}
textarea.h40 {height: 40rem;}

/* state */
textarea:hover {outline-color: var(--BK);}
textarea:active, textarea:focus {outline: 2px solid var(--BK);}



/*----------------------------------------------------------------------------------*/
/* Datepicker
/*----------------------------------------------------------------------------------*/
/* reset */
.datepicker {width: 26.8rem; box-shadow: none; -webkit-box-shadow: none;}
.datepicker table {width: 100%;}
.datepicker-dropdown {padding: 0; padding-bottom: 2rem;}
.datepicker-dropdown::after, 
.datepicker-dropdown.datepicker-orient-bottom:before,
.datepicker-dropdown.datepicker-orient-top:before {display: none;}
.dropdown-menu {border: 1px solid var(--BK);}

.datepicker table tr td, .datepicker table tr th {
	width: 3.2rem; height: 3.2rem;
	font-size: 1.4rem; font-weight: 500; line-height: 2.2rem; color: var(--BK);
	border-radius: 10rem;
}
.datepicker-days table tr {
	display: flex; align-items: center; justify-content: center; gap: 2px;
	padding: 0 8px; margin-top: 4px;
}
.datepicker-days table tr:first-of-type {margin-top: 0;}
.datepicker table tr td.new, .datepicker table tr td.old {color: var(--BK_40); font-weight: 400;}

/* 상단 헤더 + 버튼 */
 .datepicker table thead tr:nth-of-type(2) {
	position: relative; inset: 0;
	width: 100%; height: 4rem;
	margin-top: 0;
	border-bottom: 1px solid var(--BK_20);
}
.datepicker .datepicker-switch { 
	padding-right: 2rem;
	text-align: left;
	position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	color: var(--BK); font-weight: 700; margin-left: 1.1rem;
	display: flex; align-items: center;
}
.datepicker .datepicker-switch::after {content: '';
	width: 2.4rem; height: 2.4rem;
	background-image: url("../img/ico_drop_arrw.svg"); background-repeat: no-repeat;
	background-position: right center;
}

.datepicker .prev, .datepicker .next{
	position: absolute; right: 8px; top: 50%; transform: translateY(-50%); 
	font-size: 0; padding: 0; 
	width: 2.4rem; height: 2.4rem;
	display: flex; align-items: center; justify-content: center;
}
.datepicker .prev {right: 3.2rem;}
.datepicker .prev::before, .datepicker .next::before{content:'';
	display: inline-block;
	width: 2.4rem; height: 2.4rem;
	background-repeat: no-repeat; background-size: contain; 
}
.datepicker .prev::before {background-image: url("../img/datepicker_prev.svg");}
.datepicker .next::before {background-image: url("../img/datepicker_next.svg");} 


/* 날짜 */
.datepicker table tr th.dow {color: var(--BK_a48); padding-top: 9px; font-weight: 600;}
.datepicker table tr td.today,
.datepicker table tr td span.focused {border: 0; outline: 2px solid var(--BK); outline-offset: -2px; background-color: var(--WT);}
.datepicker-days table tr td:nth-child(1):not(.old.day, .new.day){color: var(--Red_Main);}


/* 월 */
.datepicker table tbody tr td:hover:not(.datepicker-days table tr td) {background-color: transparent;}
.datepicker table tr td span {border-radius: 10rem;}
.datepicker table tr td span:not(.datepicker-days table tr td) {width: 5.2rem; height: 5.2rem; line-height: 5rem;} 
.datepicker table tr td span:not(.datepicker-days table tr td).focused {color: var(--BK);}
.datepicker table tr td span:not(.datepicker-days table tr td).active {color: var(--WT);}

.datepicker table tr td:not(.datepicker-days table tr td) {
	width: 100%; height: 100%;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	padding: 4.9rem 2rem;
}

/* state */
.datepicker .datepicker-switch:hover {background-color: transparent;} 
.datepicker .prev:hover, .datepicker .next:hover {background-color: transparent;}
.datepicker table tr td.today:hover,
.datepicker table tr td span:hover {outline-color: var(--BK) !important; background-color: var(--WT);}
.datepicker table tr td:hover,
.datepicker table tr td span:hover {background-color: var(--BK_4);}
.datepicker table tr td span.focused {background-color: var(--WT)}

.datepicker table tr td.active.active, 
.datepicker table tr td.active.highlighted.active, 
.datepicker table tr td.active.highlighted:active, 
.datepicker table tr td.active:active,
.datepicker table tr td span.active.active, 
.datepicker table tr td span.active.disabled.active, 
.datepicker table tr td span.active.disabled:active, 
.datepicker table tr td span.active.disabled:hover.active, 
.datepicker table tr td span.active.disabled:hover:active, 
.datepicker table tr td span.active:active, 
.datepicker table tr td span.active:hover.active, 
.datepicker table tr td span.active:hover:active,

.datepicker table tr td.active.active:hover, 
.datepicker table tr td.active.highlighted.active:hover, 
.datepicker table tr td.active.highlighted:active:hover, 
.datepicker table tr td.active:active:hover,
.datepicker table tr td span.active.active:hover, 
.datepicker table tr td span.active.disabled.active:hover, 
.datepicker table tr td span.active.disabled:active:hover, 
.datepicker table tr td span.active.disabled:hover.active:hover, 
.datepicker table tr td span.active.disabled:hover:active:hover, 
.datepicker table tr td span.active:active:hover, 
.datepicker table tr td span.active:hover.active:hover, 
.datepicker table tr td span.active:hover:active:hover {
	background-color: var(--BK);
	color: var(--WT);
	border-color: var(--BK);
}
.datepicker table tr td span,
.datepicker table tr td span:hover,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active.active:hover,
.datepicker table tr td span.focused.active,
.datepicker table tr td span.focused.active:hover
{line-height: 5rem;}


/*----------------------------------------------------------------------------------*/
/* 첨부파일
/*----------------------------------------------------------------------------------*/
.addfile {display: flex; align-items: center; gap: 1.6rem;}
.addfile-btn {position: relative; cursor: pointer;}
.addfile-btn input {
	width: calc(100% + 60rem); height: 100%;
	position: absolute; top: 0; left: -100%;
	cursor: pointer; opacity: 0; 
}
.addfile-btn input:hover + span {color: var(--BK); background-color: var(--BK_a12);}
.addfile-txt {color: var(--BK_48); display: flex; align-items: center;}
.addfile-txt.on {color:var(--BK);}
.addfile-txt.desc::before {content: '';
	display: inline-block;
	width: 2px; height: 2px;
	margin-right: 1rem;
	background-color: var(--BK_40); border-radius: 10rem;
}
.addfile-txt.on::before, .addfile-txt.on.desc::before {content:'';
	display: inline-block;
	width: 1.6rem; height: 1.6rem;
	background-image: url("../img/ico_addfile.svg"); background-repeat: no-repeat;
	margin-right: 4px; background-color: transparent; border-radius: 0;
}


/*----------------------------------------------------------------------------------*/
/* 0-7. Tab
/*----------------------------------------------------------------------------------*/
[class*=tabMenu_] {display: flex; align-items: center; gap: 8px;}
[class*=tabMenu_] button{
	padding: 1.2rem 2.1rem;
	font-size: 1.6rem; line-height: 2.2rem; font-weight: 500;
	outline: 1px solid var(--BK_20); outline-offset: -1px; border-radius: 4px; color: var(--BK_64);
	transition: border-color 0.2s ease;
	cursor: pointer;
}
[class*=tabMenu_] button.on {outline: 2px solid var(--BK); color: var(--BK);}

[class*=tabCont_] {display: none;}
[class*=tabCont_].on {display: flex; gap: 8px;}
[class*=tabCont_] > .btn {margin-left: 4px;}



/*----------------------------------------------------------------------------------*/
/* 0-8. error page
/*----------------------------------------------------------------------------------*/
main.error {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.sec.error {
	max-width: 1200px; height: 100%;
	margin: auto;
	display: flex; align-items: center; justify-content: center;
}
.sec.error .sec-cont {
	display: flex; flex-direction: column; align-items:center; justify-content: center; 
	gap: 6rem;
	padding: 8.4rem 0 12rem 0;
}
.sec.error .sec-cont .hd-logo {min-width: 15.8rem;}
.sec.error .sec-cont .hd-logo img {width: 100%; height: 100%; flex: 1;}
.sec.error .sec-cont .message-box {display: flex; flex-direction: column; align-items: center; justify-content: center;}
.sec.error .sec-cont .message-box .err-noti {font-size: 2.8rem; font-weight: 700; line-height: 3.6rem;}
.sec.error .sec-cont .message-box .desc {font-size: 1.6rem; font-weight: 500; line-height: 2.2rem; text-align: center; padding-top: 2rem;}
.sec.error .sec-cont .message-box .err-code {
	margin-top: 2rem;
	padding: 0.9rem 2rem;
	background-color: var(--BK_a2); border-radius: 2rem;
	color: var(--BK_48);
}
.sec.error .sec-cont .BK-btn {
	width: 30rem; height: 6.4rem;
	font-size: 2rem; font-weight: 700; line-height: 2.6rem;
	background-color: var(--BK); color: var(--WT); border-radius: 8px;
	
}


/*----------------------------------------------------------------------------------*/
/* ===================================== 사용자  =====================================
/*----------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------*/
/* SU : 2층 구독
/*----------------------------------------------------------------------------------*/
.filter-card .f-group .g14 {display: flex; align-items: center; gap: 1.4rem;}
.filter-card .f-group .g14 .check-wrap input.w24 + span {font-weight: 500;}

.tbl-info {
	height: 5rem; 
	display: flex; align-items: center; justify-content: space-between; 
	padding: 0 1.2rem;
	border-top: 1px solid var(--BK);
}
.tbl-info .unit {margin-left: auto; color: var(--BK_48);}
.tbl.list .itBox {display: flex; align-items: center; gap: 4px; width: auto; padding-right: 0;}
.tbl.list .itBox .it.sm {width: 38.4rem;}
.tbl.list .itBox .it.xs {width: 7.3rem; text-align: center;}
.tbl.list .itBox .btn.xs{width: 9.5rem; padding: 0; margin-left: 4px;}
.sec-cont + .btnBox {margin-top: 3.3rem;}

.tbl  thead.ml12 th {padding-inline: 0 !important; 	cursor: pointer;}
.sort-wrap {display: flex; align-items: center; justify-content: center; gap: 6px; margin-left: 1.2rem;}
.sortBtn {width: 6px; height: 20px; transition: all 0.2s ease;}
.sortBtn.up {background-image: url("../img/ico_sort_arrw.svg");}
.sortBtn.down {background-image: url("../img/ico_sort_arrw.svg"); transform: scale(-1);}


/*----------------------------------------------------------------------------------*/
/* PV : 프리미엄 바우처
/*----------------------------------------------------------------------------------*/
.sec .frm {display: flex; flex-direction: column; align-items: center; gap: 4rem;}
.filter-card.ty2 {padding: 2.4rem 2.8rem;}
.filter-card.ty2 .f-cont {gap: 1.2rem;}
.filter-card.ty2 .f-group  label {width: 12rem; flex-shrink: 0; font-weight: 700; font-size: 1.6rem; line-height: 2.2rem; color: var(--BK);}
.it-wrap.g4 {gap: 4px; color: var(--BK_20);}
.it-wrap.g4 .it {width: 14.2rem;}

.filter-wrap .group, .group {display: flex; align-items: center; gap: 1.2rem;}
.filter-wrap .group.g28 {gap: 2.8rem;}
.filter-wrap label, span.label { flex-shrink: 0; font-weight: 700; font-size: 1.6rem; line-height: 2.2rem; color: var(--BK); padding: 0; margin-right: 0.8rem;}
span.label.no {margin-right: 0;}
span.label.ml12 {margin-left: 8px;}
span.label.w120 {width: 12rem; margin-right: 0;}



/*----------------------------------------------------------------------------------*/
/* CV : 코스트코 바우처
/*----------------------------------------------------------------------------------*/
.box {display: flex; align-items: center; gap: 4px;}
.group.g28 .box label {margin-right: 8px;}
.box > .it + .btn {margin-left: 8px;}
.it-wrap > input.date + .btn {margin-left: 4px;}



/*----------------------------------------------------------------------------------*/
/* pg : PG 하위몰
/*----------------------------------------------------------------------------------*/
/* .filter-wrap .box > .btn {margin-left: 4px} */
.filter-wrap.ty2 {justify-content: center; padding-bottom: 4rem;}
.c-red {color: var(--costco_Red); margin-left: 4px;}
.itBox {width: 100%; display: flex; align-items: center; gap: 8px;}

.group.g20 {gap: 2rem;}
.group.g20 .box label {margin-right: 0.8rem;}
.group.g20 .box .it-wrap + .btn,
.group.g20 .box .st-wrap + .btn {margin-left: 4px;}

.it-wrap.g4 .it.w52 {width: 5.2rem;}
.it-wrap.g4 .it.w62 {width: 6.2rem;}
.it-wrap.g4 .it.w82 {width: 8.2rem;}



/*----------------------------------------------------------------------------------*/
/* tf : 대학등록금
/*----------------------------------------------------------------------------------*/
.orderBox {display: flex; align-items: center; justify-content: center; gap: 8px;}
.orderBox .order {
	width: 3.2rem; height: 3.2rem;
	background-color: var(--BK_a4); border-radius: 10rem;
	position: relative;
}
.orderBox .order::before {content: '';
	display: inline-block;
	width: 3.2rem; height: 3.2rem;
	background-image: url("../img/ico_drop_arrw.svg"); 
	background-repeat: no-repeat;
	position: absolute; top: 4px; left: 4px;
}
.orderBox .order.up {transform:scale(-1);}
.orderBox .order:hover, .orderBox .order:active {background-color: var(--BK_a16);}

.orderBox .order:disabled,
.orderBox .order:disabled:hover,
.orderBox .order:disabled:active,
.orderBox .order:disabled:focus {background-color: var(--BK_a4);}
.orderBox .order:disabled::before,
.orderBox .order:disabled:hover::before, 
.orderBox .order:disabled:active::before,
.orderBox .order:disabled:focus::before {background-image: url("../img/ico_drop_arrw_disabled.svg");}

.filter-wrap.flexEnd {align-items: flex-end;}
.filter-wrap .f-inner {display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem;}
.time-info {display: flex; align-items: center; gap: 1.2rem;}
.time-info  span {font-family: "YouandiNewKR"; font-size: 1.4rem; font-weight: 500; color: var(--BK);}
.time-info  span.point, .point {color: var(--Point);}

.sec + .sec.mt52 {margin-top: 5.2rem;}

td .group.g12 {display: flex; align-items: center; gap: 1.6rem;}
.charge-txt {display: flex; align-items: center;}
.charge-txt span {font-size: 1.6rem; line-height: 2.2rem; color: var(--BK); }

.tbl table td.noHover > .col {margin-bottom: 2.6rem;}


/***** 자료실01 *****/
.tbl.Hover tbody tr:hover a.titles {border-bottom: 0;}
.tbl td a.titles {
	text-decoration: none; border-bottom: 0;
	display: flex; align-items: center; gap: 8px;
}

/***** 자료실02 *****/
.tbl td span.BK {color: var(--BK);}
.tbl .txtarea {
	min-height: 20rem;
	padding: 2.4rem 0.8rem;
	text-align: left;
}
.tbl tbody tr:hover td.noHover {background-color: var(--WT); cursor: default;}

.attach-box {display: flex; align-items: center; justify-content: space-between;}
.attach-box .files { height: 3.2rem; display: flex; align-items: center; padding-left: 2.4rem; color: var(--BK); font-size: 1.4rem; line-height: 2rem;}
.attach-box .files::before{content:'';
	display: inline-block;
	width: 1.6rem; height: 1.6rem; margin-right: 1rem;
	background-image: url("../img/ico_addfile.svg");
}
.count {color: var(--Auto); font-weight: 700;}
.attach-box .downBox {display: flex; align-items: center; gap: 1rem;}

.attach-box.bg {background-color: var(--BK_2); border-radius: 8px;}
.attach-wrap ul {margin-top: 8px; display: flex; flex-direction: column; gap: 4px;}
.attach-list {
	height: 4.8rem;
	padding-left: 1.6rem;
	display: flex; align-items: center; gap: 8px
}
.attach-list p {color: var(--BK); line-height: 2rem; font-weight: 500; font-size: 1.4rem;}
.attach-box.bg .fileSize {
	padding-right: 2.4rem;
	font-size: 1.4rem; font-weight: 500; font-family: "YouandiNewKR" 
}

a.post-wrap {
	width: 100%;
	padding-inline: 8px;
	display: flex; align-items: center; justify-content: space-between;
}
a.post-wrap .post-head {display: flex; align-items: center; gap: 1rem;}
a.post-wrap .post-head .point {
	font-weight: 700; color: var(--Point);
	display: flex; align-items: center;
}
a.post-wrap .post-head .point::before {content:'';
	width: 3.2rem; height: 3.2rem;
	background-image: url("../img/ico_arrw_blue.svg");
	background-repeat: no-repeat; background-size: contain;
}
a.post-wrap .post-head .point.next::before{transform: scale(-1);}
a.post-wrap .post-head p{color: var(--BK);}





/*----------------------------------------------------------------------------------*/
/* ===================================== 관리자  =====================================
/*----------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------*/
/* admin_alo : 통합관리자
/*----------------------------------------------------------------------------------*/
.quick-link {display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; padding: 4.4rem 2.4rem;}
.quick-link a{
	width: calc((100% - 4rem)/3); height: 15.4rem;
	padding: 4rem;
	background-color: var(--BK_a8); border-radius: 1.2rem;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.quick-link a .tit {font: 500 2.8rem / 3.6rem "YouandiNewKR"; color: var(--BK);}
.quick-link a span{display: flex; align-items: center; font-size: 1.6rem; line-height: 2.2rem; color: var(--BK_a48);}
.quick-link a span::after {content: '';
	width: 1.6rem; height: 1.6rem;
	background: url("../img/ico_go.svg") no-repeat center / contain;
}

/* state */
.quick-link a:hover {background-color: var(--BK_a12);}
.quick-link a:active, .quick-link a:focus {background-color: var(--BK_a16);}



/*----------------------------------------------------------------------------------*/
/* admin_me : 가맹점
/*----------------------------------------------------------------------------------*/
.itBox.g8 {gap: 8px;}
.filelist {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	background-image: url("../img/ico_file.svg");
	background-repeat: no-repeat; background-size: 3.2rem 3.2rem;
	background-position: center;
}



/*----------------------------------------------------------------------------------*/
/* admin_tf : 대학등록금
/*----------------------------------------------------------------------------------*/
.sec .rowsec {display: flex; align-items: flex-start; gap: 4rem;}
.btnBox.mt70 {margin-top: 7rem;}
.it-wrap .btn.p13 {margin-left: 2px;}
.tbl td span.Red_Main {color: var(--Red_Main);}
.tbl td span.Red_Main:hover {color: var(--Red_Main);}

.tbl.fr .fbtween.g4 {gap: 4rem; padding-inline: 2.4rem;}
.tbl.fr .fbtween.g4 span {font-weight: 500; color: var(--BK_a64);}
.tbl.fr .fbtween.g4 span strong {font-weight: 700; color: var(--BK); margin-right: 1.2rem;}
.tbl.fr .fbtween.g4 .g4 {display: flex; gap: 4rem;}
.attach-wrap.mt12 {margin-top: 1.2rem;}
.attach-wrap.mt12 > .attach-box {margin-bottom: 1.2rem;}


/* textarea 고정시키고 안에 텍스트 생길때 span 생성 + 스크롤 동기화 */
.textAreaWithLines {
	width: 120rem; height: 60.2rem;
	overflow: hidden;
	position: relative;
}
.lineObj {
	width: 3rem; 
  /* padding-top: 1.6rem;  */
	display: flex; flex-direction: column;
	position: absolute; top: 1.6rem; left: 0;
}
.lineObj > span {text-align: right; font-size: 1.4rem; line-height: 2.4rem;}
.codeTextarea {
	width: 113rem; height: 60rem;
	padding: 0 1.6rem;
	position: absolute; right: 1.6rem; top: 1px;
	font-size: 1.4rem; line-height: 2.4rem; font-weight: 500;
}



/*----------------------------------------------------------------------------------*/
/* 0-9. LayerPopup
/*----------------------------------------------------------------------------------*/
.layer {
	width: 100%; min-height: 100vh;
	position: fixed; inset: 0; z-index: 1000;
	display: flex; align-items: center; justify-content: center;
	display: none;
}
.layer.on {display: flex;}
.layer-dimmed {
	width: 100%; min-height: 100vh;
	background-color: var(--BK_a80);
	position: relative; z-index: -1;
}
.layer-wrap {
	width: 68.8rem; 
	height: 63.7rem;
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100;
	background-color: var(--WT); border-radius: 2.4rem;
}
.layer-head {
	width: 100%; 
	padding: 4rem 4rem 0 4rem;
	display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.layer-head strong {font-weight: 700; font-size: 2.4rem; line-height: 3.2rem;}

.layer-cont {padding: 4rem;}
.layer-cont .itWrap {
	width: 100%; height: 5.6rem;
	position: relative;
	display: flex; align-items: center; justify-content: space-between; 
}
.layer-cont .itWrap .it.srch {
	width: 100%;
	padding-left:0;
	outline: 0; border: 0; border-radius: 0;
	border-bottom: 2px solid var(--BK_a20);
	font-size: 2rem; line-height: 2.6rem; font-weight: 700; color: var(--BK);
	position: absolute; right: 0;
}
.layer-cont .itWrap .it.srch:hover,
.layer-cont .itWrap .it.srch:active, 
.layer-cont .itWrap .it.srch:focus {border-color: var(--BK);}

.layer-cont .itWrap .it.srch::placeholder {font-size: 2rem; line-height: 2.6rem; font-weight: 700; color: var(--BK_a40);}
.layer-cont .itWrap .it.srch:focus::placeholder {color: transparent;}
.layer-cont .txtWrap {
	width: 100%; 
	margin-top: 2.4rem;
	display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.layer-cont .txtWrap > strong {font-weight: 600; font-size: 1.8rem; line-height: 2.2rem;}
.layer-cont .txtWrap ul li {font-weight: 500; font-size: 1.4rem; line-height: 2rem; color: var(--BK_48);}
.layer-cont .txtWrap ul li>span {color: var(--BK);}

.layer-cont.scroll {padding: 4rem 1rem 0 1rem;}
.layer-cont.scroll > .itWrap {width: calc(100% - 6rem); margin: auto;}
.layer-cont.scroll .addWrap {padding: 0 3rem; margin-top: 2.4rem; cursor: pointer;}
.layer-cont .addWrap {
	width: 100%; max-height: 44.1rem;
	overflow-y: auto; 
}
.addBox {
	width: 100%; 
	padding: 2.4rem 0;
	display: flex; align-items: center; justify-content: space-between;
}
.addWrap .addBox + .addBox {border-top: 1px solid var(--BK_a8);}
.addBox .ad1 {font-weight: 500; font-size: 1.8rem; line-height: 2.2rem; }
.addBox .ad2 {font-weight: 500; font-size: 1.4rem; line-height: 2rem; color: var(--BK_a48); margin-top: 4px; }
.addBox .zipcode {font-weight: 700; font-size: 1.6rem; line-height: 2.2rem;}

.layer .btnBox {gap: 1rem; position: absolute; bottom: 4rem; left: 50%; transform: translateX(-50%); }
.layer .btnBox button {
	width: 14.8rem; height: 4.8rem;
	font-weight: 700; font-size: 1.6rem; line-height: 2.2rem;
}

/* button */
.ico { 
	width: 3.2rem; height: 3.2rem;
	background-repeat: no-repeat; background-size: contain;
	cursor: pointer; opacity: 1 !important;
}
.ico.close {background-image: url("../img/ico_close.svg");}
.ico.srch {background-image: url("../img/ico_search.svg");}
.ico.file {background-image: url("../img/ico_addfile.svg"); background-size: 1.6rem 1.6rem; background-position: center left 0;}
.ico.del {background-image: url("../img/ico_delete.svg"); background-size: 2.8rem 2.8rem; background-position: center left 0;}
.layer .ico.srch {position: absolute; right: 0;}


/********** 업종코드선택 : 1200px **********/
.layer.w1200 .layer-wrap {width: 120rem; height: 82rem; overflow: hidden}
.layer.w1200 .layer-head .ico.close {position: absolute; right: 3.4rem; top: 3.4rem;}
.layer.w1200 .layer-cont {padding: 0 8px;}
.layer.w1200 .sec-header {padding: 4rem 7.2rem 4.8rem 7.2rem; margin-bottom: 0;}
.layer.w1200 .tbl-info {margin: 0 7.2rem; border-top: 1px solid var(--BK); border-bottom: 1px solid var(--BK_40);}

.tbl-headers, .tbl-row {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 4rem;
	padding: 0 7.2rem;
}
.layer.w1200 .tbl-row {height: 61rem; overflow-y: auto;  padding-bottom: 16.8rem;	}
.layer.w1200 .tbl {border-top: 0;}
.layer.w1200 .tbl table tr:first-of-type {border-top: 0;}
.layer.w1200 .tbl table td {word-break: keep-all; white-space: normal; overflow-wrap: break-word;}
.layer.w1200 .tbl table td span { transition: 0.2s ease; cursor: pointer;}
.tbl table td:hover > span.code {text-decoration: underline; color: var(--Point); text-underline-offset: 2px; cursor: pointer;}
.tbl table td:hover > span.Red_Main {text-decoration: underline; color: var(--Red_Main); text-underline-offset: 2px; cursor: pointer;}



/********** 차수선택 : 688*758 **********/
.layer.h758 .layer-wrap {height: 75.8rem;}
.layer.h758 .layer-cont {padding: 4rem 0.8rem 4rem 0.8rem;}

.layer.h758 .tbl-headers {padding-inline: 3.2rem;}
.layer  .tbl {border-color: var(--BK); border-bottom: 0;}
.layer.h758 .tbl-row {padding: 0;}
.layer.h758 .tbl-row .tbl {border-top: 0; max-height: 46.8rem; overflow-y: auto; padding-inline: 3.2rem;}
.layer.h758 .tbl-row .tbl td {padding: 0 8px;}



/********** 서식 자료 상세 : 960*490 **********/
.layer.w960 .layer-wrap {width: 96rem; height: auto;}
.layer.w960 .layer-cont{padding-bottom: 10.6rem;}


/********** 학교명 선택 : 688*758 **********/
.filter-wrap.p32 {padding-inline: 3.2rem;}
.filter-wrap.p32 label {padding-inline: 1.2rem}
.itBox.relative {position: relative; padding-right: 0;}
.itBox.relative .ico.srch.w24 {position: absolute; right: 1.2rem; width: 2.4rem; height: 2.4rem; background-position: center;}


/********** 처리결과 : 1200 **********/
.layer.w1200 .mi72 {margin-inline: 7.2rem;}
.layer.w1200 .sec-header.pb18 {padding-bottom: 1.8rem;}
.layer.w1200 .textarea.h60,
.layer.w1200 .textarea.h60 > pre {
  width: 100%; height: 60rem;
   padding: 1.3rem 1.6rem;
   overflow: scroll;
   box-sizing: border-box; resize: none;
   font-size: 1.6rem; line-height: 2.2rem;
   color: var(--BK);
   border: 0; border-radius: 4px; background-color: var(--WT);
   outline: 1px solid var(--BK_a20); outline-offset: -1px;
   transition: all 0.3s ease;
}
.layer.w1200 .textarea.h60:hover {outline-color: var(--BK);}


/********** 관리자 인증 : 688*442 **********/
.layer.h442 .layer-wrap {height: 44.2rem;}
.layer.h442 .btnBox {position: static; transform: none; margin-top: 2.4rem;}


/********** 가맹점 : 688*360-600 **********/
.layer.me .layer-wrap{ min-height: 36rem; height: auto;}
.layer.me .layer-head {padding: 3.2rem 4rem 0 4rem;}
.layer.me .layer-head button {margin-left: auto;}
.layer.me .layer-cont {padding: 1.6rem 0.8rem 4.8rem 0.8rem;}
.layer.me .auto-grow {
	min-height: 23.2rem; max-height: 52rem; overflow-y: scroll; padding: 0 7.6rem;
	outline: 0; font-size: 1.6rem;
}
.layer.me textarea.auto-grow:hover,
.layer.me textarea.auto-grow:active,
.layer.me textarea.auto-grow:focus {outline: 0;}


/********** 푸터 : 1024*566 **********/
.layer.w1024 .layer-wrap {width: 102.4rem; height: 56.6rem;}
.layer.w1024 .layer-wrap .layer-cont {height: 49.4rem; padding: 4rem 0.8rem 4rem 0.8rem;}
.layer.w1024 .layer-wrap .layer-cont .sec { overflow-y: scroll; padding: 0 3.2rem;}

.layer.w1024 dt.familysite__title {font-size: 2.4rem; font-weight: 700; line-height: 3.2rem;}
.layer.w1024 .familysite__box--list{ 
	position: relative;
	margin-top: 1.2rem; margin-bottom: 8rem; 
	display: flex;flex-wrap: wrap;
	padding: 2rem 2.4rem;
}
.layer.w1024 .familysite__box--list::before {content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 1px;
  background-color: #000;
  opacity: 0.12;
}
.layer.w1024 .familysite__box--list.family_group {display: flex; flex-wrap: wrap; padding: 2rem 2.4rem;}
.layer.w1024 .familysite__box--list.family_group li {
  width: calc(100% / 3);
  font-size: 1.6rem; line-height: 2.2rem;
  margin-bottom: 1.2rem;
  transition: all 0.3s ease;
}
.layer.w1024 .familysite__box--list.family_group li:hover a,
.layer.w1024 .familysite__box--list.group__com > li dd:hover a {
	text-decoration: underline; text-decoration-color: var(--BK);
	text-underline-offset: 2px;
}
.layer.w1024 .familysite__box:last-child {margin-bottom: 0;}
.layer.w1024 .familysite__box--list.w25p > li {width: 25%;}
.layer.w1024 .familysite__box--list.group__com > li {margin-bottom: 5.6rem;}
.layer.w1024 .familysite__box--list.group__com > li dt, 
.layer.w1024 .familysite__box--list.group__com > li dd a{
	font-size: 1.6rem; line-height: 2.2rem;
  margin-bottom: 1.2rem;
 }
 .layer.w1024 .familysite__box--list.group__com > li dt {font-weight: 700;}



/********** 세션종료 : 588*385 **********/
.layer.w588 .layer-wrap{width: 58.8rem; height: 38.5rem;}
.layer.w588 .sec-tit.tac {
	width: 100%;
	font-size: 2rem; line-height: 2.8rem;
	text-align: center;
}
.layer.w588 .sec-cont p {text-align: center; color: var(--BK_64);}


/*----------------------------------------------------------------------------------*/
/* 0-10. loading
/*----------------------------------------------------------------------------------*/
.loading {
	width: 100%; min-height: 100dvh; height: 100%;
	position: absolute; inset: 0;
	z-index: 100;
}
.loading .loading-dimmed {
	width: 100%; height: 100%;
	background-color: rgba(255 ,255, 255, 0.6);
	position: absolute; inset: 0;
} 
.loading .loading-dimmed .loading-img {
	width: 3.2rem; height: 3.2rem;
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%,-50%);
}