@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');
/*@import url('https://fonts.googleapis.com/css2?family=Material+Symbols');*/
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.2/font/bootstrap-icons.min.css');

*{box-sizing: border-box !important; font-family: Pretendard Variable,Pretendard JP Variable,serif!important;padding: 0;}
ul{padding: 0 !important; margin: 0;}

.wrapper{width: 100%; background: var(--light600);}
.main-wrapper{width: 100%; display: flex;}
.nav-wrapper{background: var(--white);}
.content-wrapper{padding: 20px;}

/* reset */
body,html{width: 100%;}
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;
    /*KHP font-size: 100%;
    font: inherit;
    vertical-align: baseline;*/
    box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: "Noto Sans KR", sans-serif;
    height: 100%;
}

body {
    margin: 0;
    line-height: inherit;
    font-size: 14px;
    height: 100%;
}

ol, ul, details, summary {
    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;
}

button {
    all: unset;
    cursor: pointer;
    box-sizing: border-box;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

strong {
    font-weight: bolder;
}

small {
    font-size: 80%;
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
}

a {
    color: inherit;
    text-decoration: none !important;
    outline: none;
}

/* color */
:root {
    --white: #FFFFFF;
    --blue50: #EAF1FF;
    --blue100: #D5E3FF;
    --blue150: #C0D6FF;
    --blue200: #ABC8FF;
    --blue250: #96BAFF;
    --blue300: #80ACFF;
    --blue350: #6B9EFF;
    --blue400: #5691FF;
    --blue450: #4183FF;
    --blue500: #2C75FF; /* p-color */
    --blue550: #2869E6;
    --blue600: #235ECC;
    --blue650: #1F52B3;
    --blue700: #1A4699;
    --blue750: #163B80;
    --blue800: #122F66;
    --blue850: #0D234C;
    --blue900: #091733;
    --blue950: #040C19;
    --dark900: #222222; /* font color (basic), etc */
    --dark800: #555555; /* checked, input-hover, etc */
    --dark700: #777777; /* font color (title_sub), etc */
    --dark600: #999999; /* font color (sub), etc */
    --light100: #EAEAEA; /* border (basic) , etc */
    --light200: #FCFCFC; /* grid-list, etc */
    --light300: #F1F4F6;
    --light400: #E4EEF8;
    --light500: #E3E8EB;
    --light600: #F7F9FD;
    --light700: #F9F9F9;
    --alert: #FF6666;
    --green500: #05B989;

    /* opacity */
    --o90: rgba(44, 177, 255, 0.9);
    --o80: rgba(44, 177, 255, 0.8);
    --o70: rgba(44, 177, 255, 0.7);
    --o60: rgba(44, 177, 255, 0.6);
    --o50: rgba(44, 177, 255, 0.5);
    --o40: rgba(44, 177, 255, 0.4);
    --o30: rgba(44, 177, 255, 0.3);
    --o20: rgba(44, 177, 255, 0.2);
    --o10: rgba(44, 177, 255, 0.1);
}

/* font-weight */
.smbd{font-weight: 500;}
.bd{font-weight: 600;}
.exbd{font-weight: 700;}


/*** font size rem ***/
/* 1rem = 16px 기준 */
.H1       {font-size: 2.75rem;  /* 44px */  line-height: 160%; font-weight: 600;}
.H2       {font-size: 2rem;     /* 32px */  line-height: 160%; font-weight: 600;}
.H3       {font-size: 1.5rem;   /* 24px */  line-height: 160%; font-weight: 600;}
.head-l   {font-size: 2rem;     /* 32px */  line-height: 2.5rem; /* 40px */ font-weight: 600;}
.head-m   {font-size: 1.75rem;  /* 30px */  line-height: 36px; font-weight: 600;}
.head-s   {font-size: 1.5rem;   /* 24px */  line-height: 32px; font-weight: 600;}
.title-l  {font-size: 1.25rem;  /* 20px */  line-height: 160%; font-weight: 600;}
.title-m  {font-size: 1.125rem; /* 18px */  line-height: 160%; font-weight: 600;}
.title-s  {font-size: 1rem;     /* 16px */  line-height: 160%; font-weight: 600;}
.body-l   {font-size: 1rem;     /* 16px */  line-height: 160%;}
.body-m   {font-size: 0.875rem; /* 14px */  line-height: 160%;}
.body-s   {font-size: 0.75rem;  /* 12px */  line-height: 1rem;   /* 16px */}
.body-xl  {font-size: 1.125rem; /* 18px */  line-height: 160%;}
.label-l  {font-size: 0.875rem; /* 14px */  line-height: 1.25rem;/* 20px */}
.label-m  {font-size: 0.75rem;  /* 12px */  line-height: 1rem;   /* 16px */}
.label-s  {font-size: 0.6875rem;/* 11px */  line-height: 1rem;   /* 16px */}

/* 강제로 스타일 넣을 때 (퍼블리셔 거치지 않고 개발자 분께서 ) */
.fz-10{font-size: 10px !important}
.fz-11{font-size: 11px !important}
.fz-12{font-size: 12px !important}
.fz-13{font-size: 13px !important}
.fz-14{font-size: 14px !important}
.fz-15{font-size: 15px !important}
.fz-16{font-size: 16px !important}
.fz-17{font-size: 17px !important}
.fz-18{font-size: 18px !important}
.fz-19{font-size: 19px !important}
.fz-20{font-size: 20px !important}
.fz-21{font-size: 21px !important}
.fz-22{font-size: 22px !important}
.fz-23{font-size: 23px !important}
.fz-24{font-size: 24px !important}
.fz-25{font-size: 25px !important}
.fz-26{font-size: 26px !important}
.fz-27{font-size: 27px !important}
.fz-28{font-size: 28px !important}
.fz-29{font-size: 29px !important}
.fz-30{font-size: 30px !important}

/* font-color */
.fc-w{color: var(--white) !important;}
.fc-b{color: var(--blue500) !important;}
.fc-a{color: var(--alert) !important;}
.fc-gry{color: var(--dark600) !important;}
.fc-grn{color: var(--green500) !important;}

/*** display ***/
.dn{display:none !important;}
.db{display:block !important;}
.dib{display:inline-block !important;}
.dt{display:table !important;}
.dtc{display:table-cell !important;}
.vh{visibility:hidden !important;}
.vv{visibility:visible !important;}
.df{display:flex !important;}
.dif{display:inline-flex !important;}
.vh{visibility:hidden !important;}
.vv{visibility:visible !important;}

/*** flex ***/
.f1{flex: 1;}
.fxww{flex-wrap:wrap !important;}
.ffr{flex-flow: row !important;}
.ffc{flex-flow:column !important;}
.jcc{justify-content:center !important;}
.jcfs{justify-content:flex-start !important;}
.jcfe{justify-content:flex-end !important;}
.jcn{justify-content:normal !important;}
.jcsb{justify-content:space-between !important;}
.aic{align-items:center !important;}
.aie{align-items:end !important;}
.ais{align-items:start !important;}
.aist{align-items: stretch !important;}

/* flex */
.df-aic{display: flex; align-items: center;}
.df-jcc{display: flex; justify-content: center; align-items: center;}
.df-jcsb{display: flex; justify-content: space-between; align-items: center;}
.df-jcfs{display: flex; justify-content: flex-start; align-items: center;}
.df-jcfe{display: flex; justify-content: flex-end; align-items: center;}

/*flex - gap*/
.g8 {gap: 8px;}
.g12 {gap: 12px;}
.g16 {gap: 16px;}

/*** align ***/
.tal{text-align:left !important;}
.tac{text-align:center !important;}
.tar{text-align:right !important;}
.taj{text-align:justify !important;}
.vt{vertical-align:top !important;}
.vm{vertical-align:middle !important;}
.vb{vertical-align:bottom !important;}

/*** float ***/
.fl{float:left !important;}
.fr{float:right !important;}
.fn{float:none !important;}

/*** position ***/
.posr{position:relative !important;}
.posa{position:absolute !important;}
.posf{position:fixed !important;}
.poss{position:static !important;}

/* white-space */
.whsp{white-space:nowrap !important;}


/*** padding ***/
/* 전체 패딩, px 단위 */
.p0{padding:0 !important;}
.p4{padding:4px !important;}
.p5{padding:5px !important;}
.p6{padding:6px !important;}
.p8{padding:8px !important;}
.p10{padding:10px !important;}
.p12{padding:12px !important;}
.p16{padding:16px !important;}
.p20{padding:20px !important;}
.p24{padding:24px !important;}
.p28{padding:28px !important;}
.p32{padding:32px !important;}
.p40{padding:40px !important;}

/* padding-top, px 단위 */
.pt0{padding-top:0 !important;}
.pt5{padding-top:5px !important;}
.pt8{padding-top:8px !important;}
.pt10{padding-top:10px !important;}
.pt12{padding-top:12px !important;}
.pt15{padding-top:15px !important;}
.pt16{padding-top:16px !important;}
.pt20{padding-top:20px !important;}
.pt24{padding-top:24px !important;}
.pt25{padding-top:25px !important;}
.pt30{padding-top:30px !important;}
.pt32{padding-top:32px !important;}
.pt35{padding-top:35px !important;}
.pt40{padding-top:40px !important;}
.pt45{padding-top:45px !important;}
.pt50{padding-top:50px !important;}
.pt55{padding-top:55px !important;}
.pt60{padding-top:60px !important;}
.pt100{padding-top:100px !important;}
.pt120{padding-top:120px !important;}


/*** width ***/
/* auto, px 단위 */
.wa{width:auto !important;}
.w5{ width:5px !important;}
.w10{ width:10px !important;}
.w20{ width:20px !important;}
.w30{ width:30px !important;}
.w40{ width:40px !important;}
.w50{ width:50px !important;}
.w60{ width:60px !important;}
.w70{ width:70px !important;}
.w80{ width:80px !important;}
.w90{ width:90px !important;}
.w100{ width:100px !important;}
.w110{ width:110px !important;}
.w120{ width:120px !important;}
.w130{ width:130px !important;}
.w140{ width:140px !important;}
.w150{ width:150px !important;}
.w160{ width:160px !important;}
.w170{ width:170px !important;}
.w180{ width:180px !important;}
.w190{ width:190px !important;}
.w200{ width:200px !important;}
.w210{ width:210px !important;}
.w220{ width:220px !important;}
.w230{ width:230px !important;}
.w240{ width:240px !important;}
.w250{width:250px !important;}
.w260{ width:260px !important;}
.w270{ width:270px !important;}
.w280{ width:280px !important;}
.w290{ width:290px !important;}
.w300{ width:300px !important;}
.w400{ width:400px !important;}
.w450{ width:450px !important;}
.w500{ width:500px !important;}
.w550{ width:550px !important;}
.w600{ width:600px !important;}
.w650{ width:650px !important;}
.w700{ width:700px !important;}
.w750{ width:750px !important;}
.w800{ width:800px !important;}
.w850{ width:850px !important;}
.w900{ width:900px !important;}
.w950{ width:950px !important;}
.w1000{ width:1000px !important;}

/* % 단위 */
.w5p{ width:5% !important;}
.w10p{ width:10% !important;}
.w20p{ width:20% !important;}
.w30p{ width:30% !important;}
.w40p{ width:40% !important;}
.w50p{ width:50% !important;}
.w60p{ width:60% !important;}
.w70p{ width:70% !important;}
.w80p{ width:80% !important;}
.w90p{ width:90% !important;}
.w100p{width:100% !important;}

/*** margin ***/
/* 전체 패딩, px 단위 */
.mt-1{margin-top:-1px !important;}
.mt0{margin-top:0 !important;}
.mt3{margin-top:3px !important;}
.mt5{margin-top:5px !important;}
.mt8{margin-top:8px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt25{margin-top:25px !important;}
.mt30{margin-top:30px !important;}
.mt35{margin-top:35px !important;}
.mt40{margin-top:40px !important;}
.mt45{margin-top:45px !important;}
.mt50{margin-top:50px !important;}
.mt55{margin-top:55px !important;}
.mt60{margin-top:60px !important;}

.mr0{margin-right:0 !important;}
.mr1{margin-right:1px !important;}
.mr2{margin-right:2px !important;}
.mr4{margin-right:4px !important;}
.mr5{margin-right:5px !important;}
.mr8{margin-right:8px !important;}
.mr10{margin-right:10px !important;}
.mr15{margin-right:15px !important;}
.mr20{margin-right:20px !important;}
.mr25{margin-right:25px !important;}
.mr30{margin-right:30px !important;}
.mr35{margin-right:35px !important;}
.mr40{margin-right:40px !important;}
.mr45{margin-right:45px !important;}
.mr50{margin-right:50px !important;}
.mr55{margin-right:55px !important;}
.mr60{margin-right:60px !important;}

.mb0{margin-bottom:0 !important;}
.mb5{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb25{margin-bottom:25px !important;}
.mb28{margin-bottom:28px !important;}
.mb30{margin-bottom:30px !important;}
.mb35{margin-bottom:35px !important;}
.mb40{margin-bottom:40px !important;}
.mb45{margin-bottom:45px !important;}
.mb50{margin-bottom:50px !important;}
.mb55{margin-bottom:55px !important;}
.mb60{margin-bottom:60px !important;}

.ml0{margin-left:0 !important;}
.ml5{margin-left:5px !important;}
.ml10{margin-left:10px !important;}
.ml12{margin-left:12px !important;}
.ml15{margin-left:15px !important;}
.ml20{margin-left:20px !important;}
.ml25{margin-left:25px !important;}
.ml30{margin-left:30px !important;}
.ml32{margin-left:32px !important;}
.ml35{margin-left:35px !important;}
.ml40{margin-left:40px !important;}
.ml45{margin-left:45px !important;}
.ml50{margin-left:50px !important;}
.ml55{margin-left:55px !important;}
.ml60{margin-left:60px !important;}

/*** width ***/
/* rem 단위 */
.w-1	  {width: 0.25rem;} /* 4px */
.w-2	  {width: 0.5rem;} /* 8px */
.w-3	  {width: 0.75rem; }/* 12px */
.w-4	  {width: 1rem;} /* 16px */
.w-5	  {width: 1.25rem;} /* 20px */
.w-6	  {width: 1.5rem;} /* 24px */
.w-7	  {width: 1.75rem;} /* 28px */
.w-8	  {width: 2rem;} /* 32px */
.w-9	  {width: 2.25rem;} /* 36px */
.w-10	  {width: 2.5rem;} /* 40px */
.w-11	  {width: 2.75rem;} /* 44px */
.w-12	  {width: 3rem;} /* 48px */
.w-14	  {width: 3.5rem;} /* 56px */
.w-16	  {width: 4rem;} /* 64px */
.w-20	  {width: 5rem;} /* 80px */
.w-24	  {width: 6rem;} /* 96px */
.w-28	  {width: 7rem; }/* 112px */
.w-32	  {width: 8rem; }/* 128px */
.w-36	  {width: 9rem; }/* 144px */
.w-40	  {width: 10rem; }/* 160px */
.w-44	  {width: 11rem; }/* 176px */
.w-48	  {width: 12rem; }/* 192px */
.w-52	  {width: 13rem; }/* 208px */
.w-56	  {width: 14rem; }/* 224px */
.w-60	  {width: 15rem; }/* 240px */
.w-64	  {width: 16rem; }/* 256px */
.w-72	  {width: 18rem; }/* 288px */
.w-80	  {width: 20rem; }/* 320px */
.w-96	  {width: 24rem; }/* 384px */
.w-auto	{width: auto; }
/* % 단위 */
.w-1\/2	{width: 50%;}
.w-1\/3	{width: 33.333333%;}
.w-2\/3	{width: 66.666667%;}
.w-1\/4	{width: 25%;}
.w-2\/4	{width: 50%;}
.w-3\/4	{width: 75%;}
.w-1\/5	{width: 20%;}
.w-2\/5	{width: 40%;}
.w-3\/5	{width: 60%;}
.w-4\/5	{width: 80%;}
.w-1\/6	{width: 16.666667%;}
.w-2\/6	{width: 33.333333%;}
.w-3\/6	{width: 50%;}
.w-4\/6	{width: 66.666667%;}
.w-5\/6	{width: 83.333333%;}
.w-1\/12	{width: 8.333333%;}
.w-2\/12	{width: 16.666667%;}
.w-3\/12	{width: 25%;}
.w-4\/12	{width: 33.333333%;}
.w-5\/12	{width: 41.666667%;}
.w-6\/12	{width: 50%;}
.w-7\/12	{width: 58.333333%;}
.w-8\/12	{width: 66.666667%;}
.w-9\/12	{width: 75%;}
.w-10\/12	{width: 83.333333%;}
.w-11\/12	{width: 91.666667%;}
.w-full	 {width: 100%;}
.w-screen	{width: 100vw;}
.w-min	{width: min-content;}
.w-max	{width: max-content;}
.w-fit	{width: fit-content;}

/*** height ***/
/* px 단위 */
.ha{height:auto !important;}
.h100p{height:100% !important;}
.h10{ height:10px !important;}
.h20{ height:20px !important;}
.h30{ height:30px !important;}
.h40{ height:40px !important;}
.h50{ height:50px !important;}
.h60{ height:60px !important;}
.h70{ height:70px !important;}
.h80{ height:80px !important;}
.h90{ height:90px !important;}
.h100{ height:100px !important;}
.h110{ height:110px !important;}
.h120{ height:120px !important;}
.h130{ height:130px !important;}
.h140{ height:140px !important;}
.h150{ height:150px !important;}
.h160{ height:160px !important;}
.h170{ height:170px !important;}
.h180{ height:180px !important;}
.h190{ height:190px !important;}
.h200{ height:200px !important;}
.h210{ height:210px !important;}
.h220{ height:220px !important;}
.h230{ height:230px !important;}
.h240{ height:240px !important;}
.h250{ height:250px !important;}
.h260{ height:260px !important;}
.h270{ height:270px !important;}
.h280{ height:280px !important;}
.h290{ height:290px !important;}
.h300{ height:300px !important;}
.h400{ height:400px !important;}
.h500{ height:500px !important;}

/* % 단위 */
.h5p{ height:5% !important;}
.h10p{ height:10% !important;}
.h20p{ height:20% !important;}
.h30p{ height:30% !important;}
.h40p{ height:40% !important;}
.h50p{ height:50% !important;}
.h60p{ height:60% !important;}
.h70p{ height:70% !important;}
.h80p{ height:80% !important;}
.h90p{ height:90% !important;}
.h100p{ height:100% !important;}

/* rem 단위 */
.h-1	{height: 0.25rem;} /* 4px */
.h-2	{height: 0.5rem;} /* 8px */
.h-3	{height: 0.75rem;} /* 12px */
.h-4	{height: 1rem;} /* 16px */
.h-5	{height: 1.25rem;} /* 20px */
.h-6	{height: 1.5rem;} /* 24px */
.h-7	{height: 1.75rem;} /* 28px */
.h-8	{height: 2rem;} /* 32px */
.h-9	{height: 2.25rem;} /* 36px */
.h-10	{height: 2.5rem;} /* 40px */
.h-11	{height: 2.75rem;} /* 44px */
.h-12	{height: 3rem;} /* 48px */
.h-14	{height: 3.5rem;} /* 56px */
.h-16	{height: 4rem;} /* 64px */
.h-20	{height: 5rem;} /* 80px */
.h-24	{height: 6rem;} /* 96px */
.h-28	{height: 7rem;} /* 112px */
.h-32	{height: 8rem;} /* 128px */
.h-36	{height: 9rem;} /* 144px */
.h-40	{height: 10rem;} /* 160px */
.h-44	{height: 11rem;} /* 176px */
.h-48	{height: 12rem;} /* 192px */
.h-52	{height: 13rem;} /* 208px */
.h-56	{height: 14rem;} /* 224px */
.h-60	{height: 15rem;} /* 240px */
.h-64	{height: 16rem;} /* 256px */
.h-72	{height: 18rem;} /* 288px */
.h-80	{height: 20rem;} /* 320px */
.h-96	{height: 24rem;} /* 384px */

/* auto, % 단위 */
.h-auto	{height: auto;}
.h-1\/2	{height: 50%;}
.h-1\/3	{height: 33.333333%;}
.h-2\/3	{height: 66.666667%;}
.h-1\/4	{height: 25%;}
.h-2\/4	{height: 50%;}
.h-3\/4	{height: 75%;}
.h-1\/5	{height: 20%;}
.h-2\/5	{height: 40%;}
.h-3\/5	{height: 60%;}
.h-4\/5	{height: 80%;}
.h-1\/6	{height: 16.666667%;}
.h-2\/6	{height: 33.333333%;}
.h-3\/6	{height: 50%;}
.h-4\/6	{height: 66.666667%;}
.h-5\/6	{height: 83.333333%;}
.h-full	{height: 100%;}
.h-screen	{height: 100vh;}
.h-min	{height: min-content;}
.h-max	{height: max-content;}
.h-fit	{height: fit-content;}

/*** 수평값 조절 ***/
.space-x-0 > * + *	  {margin-left: 0px;}
.space-y-0 > * + *	  {margin-top: 0px;}
/*.space-x-0.5 > * + *	{margin-left: 0.125rem;} !* 2px *!*/
/*.space-y-0.5 > * + *	{margin-top: 0.125rem;} !* 2px *!*/
.space-x-1 > * + *	  {margin-left: 0.25rem;} /* 4px */
.space-y-1 > * + *	  {margin-top: 0.25rem;} /* 4px */
/*.space-x-1.5 > * + *	{margin-left: 0.375rem;} !* 6px *!*/
/*.space-y-1.5 > * + *	{margin-top: 0.375rem;} !* 6px *!*/
.space-x-2 > * + *	  {margin-left: 0.5rem;} /* 8px */
.space-y-2 > * + *	  {margin-top: 0.5rem;} /* 8px */
/*.space-x-2.5 > * + *	{margin-left: 0.625rem;} !* 10px *!*/
/*.space-y-2.5 > * + *	{margin-top: 0.625rem;} !* 10px *!*/
.space-x-3 > * + *	  {margin-left: 0.75rem;} /* 12px */
.space-y-3 > * + *	  {margin-top: 0.75rem;} /* 12px */
/*.space-x-3.5 > * + *	{margin-left: 0.875rem;} !* 14px *!*/
/*.space-y-3.5 > * + *	{margin-top: 0.875rem;} !* 14px *!*/
.space-x-4 > * + *	  {margin-left: 1rem;} /* 16px */
.space-y-4 > * + *	  {margin-top: 1rem;} /* 16px */
.space-x-5 > * + *	  {margin-left: 1.25rem;} /* 20px */
.space-y-5 > * + *	  {margin-top: 1.25rem;} /* 20px */
.space-x-6 > * + *	  {margin-left: 1.5rem;} /* 24px */
.space-y-6 > * + *	  {margin-top: 1.5rem;} /* 24px */
.space-x-7 > * + *	  {margin-left: 1.75rem;} /* 28px */
.space-y-7 > * + *	  {margin-top: 1.75rem;} /* 28px */
.space-x-8 > * + *	  {margin-left: 2rem;} /* 32px */
.space-y-8 > * + *	  {margin-top: 2rem;} /* 32px */
.space-x-9 > * + *	  {margin-left: 2.25rem;} /* 36px */
.space-y-9 > * + *	  {margin-top: 2.25rem;} /* 36px */
.space-x-10 > * + *	  {margin-left: 2.5rem;} /* 40px */
.space-y-10 > * + *	  {margin-top: 2.5rem;} /* 40px */
.space-x-11 > * + *	  {margin-left: 2.75rem;} /* 44px */
.space-y-11 > * + *	  {margin-top: 2.75rem;} /* 44px */
.space-x-12 > * + *	  {margin-left: 3rem;} /* 48px */
.space-y-12 > * + *	  {margin-top: 3rem;} /* 48px */
.space-x-14 > * + *	  {margin-left: 3.5rem;} /* 56px */
.space-y-14 > * + *	  {margin-top: 3.5rem;} /* 56px */
.space-x-16 > * + *	  {margin-left: 4rem;} /* 64px */
.space-y-16 > * + *	  {margin-top: 4rem;} /* 64px */
.space-x-20 > * + *	  {margin-left: 5rem;} /* 80px */
.space-y-20 > * + *	  {margin-top: 5rem;} /* 80px */
.space-x-24 > * + *	  {margin-left: 6rem;} /* 96px */
.space-y-24 > * + *	  {margin-top: 6rem;} /* 96px */
.space-x-28 > * + *	  {margin-left: 7rem;} /* 112px */
.space-y-28 > * + *	  {margin-top: 7rem;} /* 112px */
.space-x-32 > * + *	  {margin-left: 8rem;} /* 128px */
.space-y-32 > * + *	  {margin-top: 8rem;} /* 128px */
.space-x-36 > * + *	  {margin-left: 9rem;} /* 144px */
.space-y-36 > * + *	  {margin-top: 9rem;} /* 144px */
.space-x-40 > * + *	  {margin-left: 10rem;} /* 160px */
.space-y-40 > * + *	  {margin-top: 10rem;} /* 160px */
.space-x-44 > * + *	  {margin-left: 11rem;} /* 176px */
.space-y-44 > * + *	  {margin-top: 11rem;} /* 176px */
.space-x-48 > * + *	  {margin-left: 12rem;} /* 192px */
.space-y-48 > * + *	  {margin-top: 12rem;} /* 192px */
.space-x-52 > * + *	  {margin-left: 13rem;} /* 208px */
.space-y-52 > * + *	  {margin-top: 13rem;} /* 208px */
.space-x-56 > * + *	  {margin-left: 14rem;} /* 224px */
.space-y-56 > * + *	  {margin-top: 14rem;} /* 224px */
.space-x-60 > * + *	  {margin-left: 15rem;} /* 240px */
.space-y-60 > * + *	  {margin-top: 15rem;} /* 240px */
.space-x-64 > * + *	  {margin-left: 16rem;} /* 256px */
.space-y-64 > * + *	  {margin-top: 16rem;} /* 256px */
.space-x-72 > * + *	  {margin-left: 18rem;} /* 288px */
.space-y-72 > * + *	  {margin-top: 18rem;} /* 288px */
.space-x-80 > * + *	  {margin-left: 20rem;} /* 320px */
.space-y-80 > * + *	  {margin-top: 20rem;} /* 320px */
.space-x-96 > * + *	  {margin-left: 24rem;} /* 384px */
.space-y-96 > * + *	  {margin-top: 24rem;} /* 384px */
.space-x-px > * + *	  {margin-left: 1px;}
.space-y-px > * + *	  {margin-top: 1px;}
.space-y-reverse > * + *	{--tw-space-y-reverse: 1;}
.space-x-reverse > * + *	{--tw-space-x-reverse: 1;}

/*** elevation ***/
.elev01 {box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30);}
.elev02 {box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.25), 0 1px 2px 0 rgba(0, 0, 0, 0.30);}
.elev03 {box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15);}
.elev04 {box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15);}
.elev05 {box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15);}
.elev06 {box-shadow: -1.5px 4px 4px 0 rgba(0, 0, 0, 0.35);}/*icon-shadow*/

.hidden{opacity: 0;}
.show{display: inline-block;}

/***** component *****/
.blind{position:absolute;top:-9999px;text-indent:-9999px}
.hidden{display: none;}

/*** input 시작 ***/
/* 상태값 */
input[type="text"], input[type="password"], input[type="email"], input[type="number"], .textarea {border: 1px solid var(--light100); font-size: 1rem; color: var(--dark900); width: 100%;}
input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, input[type="number"]:hover,.textarea:hover {border-color: var(--dark900); outline: none;}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus,.textarea:focus {border-color: var(--blue500); outline: none;}
input[type="text"].input-opt:focus{border-bottom: 1px solid var(--dark900); padding: 10px 80px 10px 0;}
textarea{padding: 12px 16px; border-radius: 20px;}

/* 기본형, 밑줄형, 경고문, textarea */
/* .input-opt는 밑줄형 + 글자수 세기 좌측형 배치입니다. 밑줄형을 사용할 때는 .input-u로 사용해주세요. */
input.input-r{border-radius: 16px; padding: 12px 20px;}
input.input-u, input.input-opt{border:none; border-radius: 0; padding: 10px 0; border-bottom: 1px solid var(--light500);}
input.alert{border-color: var(--alert); outline: none;} /* input에 Alert 표시, 에러메시지와 같이 표시됨. */
.textarea{font-size: 1rem; color: var(--dark900); border: 1px solid var(--light100); border-radius: 16px; padding: 0 0 16px 0; width: 100%; background: var(--white); position: relative;}
.textarea-u{border:none; border-radius: 0; padding: 10px 0; border-bottom: 1px solid var(--light500); overflow:hidden}
.textarea-u:focus{border-color: var(--dark800);}

/* 글자수 세기형 */
/* 기본 설정 : 글자수 위치 정렬을 위한 세팅 */
span.txt-cnt, div.txt-cnt:has(span.counter){position: relative; width: 100%;}
/* 글자수 스타일 */
input + span.counter{position: absolute; top: 50%; right: 20px; transform: translateY(-50%); opacity: 1; color: var(--dark600);}
input.input-r + span.counter{opacity: 1; color: var(--dark600);}
input.input-u + p{display: flex; justify-content: flex-end; margin-top: 0.125rem;}
input.input-u.alert + p{justify-content: space-between;}
input.input-u.alert + p > span.red{color: var(--alert);}
input.input-u + p > span.counter{opacity: 1; color: var(--dark600);}
.textarea:has(.counter) {position: relative; padding-bottom: 32px;}
.textarea + .counter { position: absolute; bottom: 10px; right: 20px; color: var(--dark600);}
.textarea > p:has(.counter) {color: var(--dark600); text-align: right; padding-right: 20px;}
.textarea-u + p{display: flex; justify-content: flex-end; margin-top: 0.125rem;}
.textarea-u.red + p{justify-content: space-between;}
.textarea-u.red + p > span.red{color: var(--alert);}
.textarea-u + p > span.counter{opacity: 1; color: var(--dark600);}
input.input-opt + span.counter{position: absolute; top: 50%; right: 0; transform: translateY(-50%); opacity: 1; color: var(--dark600);}

/*!* focus : 글자수 표시 *!*/
/*input[type=text]:focus + p > span.counter{opacity: 1; color: var(--dark600);}*/
/*input[type=text]:focus + p.counter{opacity: 1; color: var(--dark600);}*/
/*input[type=text]:focus + span.counter{opacity: 1; color: var(--dark600);}*/
/*textarea:focus + p > span.counter{opacity: 1; color: var(--dark600);}*/
/*textarea:focus + p.counter{opacity: 1; color: var(--dark600);}*/
/*textarea:focus + span.counter{opacity: 1; color: var(--dark600);}*/


/* input, button 일렬 정렬 */
.inp-btn{display: flex; align-items: center; margin-top: 8px;}
.inp-btn span.input{flex-grow: 1;}
.inp-btn button{flex-shrink: 0; margin-left: 12px;  padding: 0 12px; height: 50px;}

/* 검색창 */
.search-wrap {display: flex; justify-content: space-between; background: var(--light700); border-radius: 25px; padding: 0 10px;}
.search-wrap>input[type="text"]{background: transparent; border: none; padding: 8px; flex: 1; border: 0px;}
.search-wrap .bt-wrap button>img{width: 16px; height: 16px;}
/* 검색창 + 필터 */
.search-wrap .custom-select {position: relative; min-width: 120px; font-size: 1rem;}
.search-wrap .options-value{position: relative;}
.search-wrap .options-value .selected-option {display: block; padding: 10px; cursor: pointer;}
.search-wrap .options-value i{position: absolute; top: 50%; right: 8px; transform: translateY(-50%);}
.search-wrap .options-list {display: none; list-style: none; padding: 0; margin: 0; position: absolute; top: 100%; left: 0; background-color: #fff; border: 1px solid #ccc; min-width: 120px; z-index: 999;}
.search-wrap .options-list li {padding: 8px; cursor: pointer;}
.search-wrap .options-list li[aria-selected="true"] {background: var(--blue50);}
.search-wrap .options-list li:hover {background-color: #f0f0f0;}

/* selectbox */
.sel-box{padding: 0 10px; background: var(--light700); border-radius: 10px;}
.sel-box .custom-select {position: relative; min-width: 120px; font-size: 1rem;}
.sel-box .options-value{position: relative;}
.sel-box .options-value .selected-option {display: block; padding: 10px; cursor: pointer;}
.sel-box .options-value i{position: absolute; top: 50%; right: 8px; transform: translateY(-50%);}
.sel-box .options-list {display: none; list-style: none; padding: 0; margin: 0; position: absolute; top: 100%; left: 0; background-color: #fff; border: 1px solid #ccc; min-width: 120px; z-index: 999;}
.sel-box .options-list li {padding: 8px; cursor: pointer;}
.sel-box .options-list li[aria-selected="true"] {background: var(--blue50);}
.sel-box .options-list li:hover {background-color: #f0f0f0;}

/* 비밀번호 4자리 입력 */
.num-wrap {width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px;}
.num-wrap input {width: 64px; height: 64px; text-align: center;}

/* 비밀번호 입력 */
.pwd input[type=password] {font-size: 1rem; color: var(--dark900); border: 1px solid var(--light100); border-radius: 16px; padding: 12px 20px; width: 100%;background: url("../assets/icon/ico_pwd.png") no-repeat right 20px center / 14px 14px;}
/*** input 끝 ***/

/*** radio 시작 ***/
/* 공통 */
/*input[type="radio"], span{vertical-align: middle;}*/
input[type="radio"] {vertical-align: middle; appearance: none; border: 0.4em solid var(--light500); border-radius: 50%; width: 1.25em; height: 1.25em; margin: 5px 6px;}
/* 상태값 */
input[type="radio"]:hover {box-shadow: 0 0 0 max(4px, 0.2em) var(--light500); cursor: pointer;}
input[type="radio"]:hover + span{cursor: pointer;}
input[type="radio"]:disabled {background-color: lightgray; box-shadow: none; opacity: 0.7; cursor: not-allowed;}
input[type="radio"]:disabled + span {opacity: 0.7; cursor: not-allowed;}
/*기본형 - 파랑 색상*/
label.radio>input[type="radio"]:checked {border: 0.4em solid var(--blue500);}
label.radio>input[type="radio"]:focus-visible {outline: max(2px, 0.1em) dotted var(--blue500); outline-offset: max(2px, 0.1em);}
/*색상 변경 - 검정 색상*/
label.radio-b>input[type="radio"]:checked{border: 0.4em solid var(--dark900);}
label.radio-b>input[type="radio"]:focus-visible{outline: max(2px, 0.1em) dotted var(--dark900);}
/*** radio 끝 ***/

/*** checkbox 시작 ***/
label.check{display: flex; align-items: center; gap: 8px; padding: 10px; cursor: pointer;}
label.check input[type=checkbox]{display: none;}
label.check input[type=checkbox] + label { width: 18px; height: 18px; display: block; background: url("../assets/icon/input_check.png") no-repeat 0 0 / cover; cursor: pointer;}
label.check input[type=checkbox]:checked + label{width: 18px; height: 18px; display: block; background: url("../assets/icon/input_check_c.png") no-repeat 0 0 / cover;}
label.check input[type=checkbox]:disabled + label{opacity: .8; cursor: no-drop;}
label.check:has(input[type=checkbox]:disabled){cursor: no-drop;}
/*** checkbox 끝 ***/


.sch-input{position: relative;}
.sch-input input.sch-box{min-width: 360px; padding: 8px 16px; background: var(--light600); border-radius: 25px; padding-right: 60px;}
.sch-input button.btn-sch{position: absolute; transform: translateY(-50%); top: 50%; right: 16px; border-radius: 50%; padding: 12px; background: url('../assets/ic_search.svg') no-repeat center/cover;}
.sch-input button.btn-sch:hover{background-color: var(--light500);}

.sch-input-f{display: flex; align-items: center; border: 1px solid var(--light500); background: var(--light600); border-radius: 25px; position: relative;}
.sch-input-f select{padding: 0 20px;}
.sch-input-f input{border: none; background: none; padding: 8px 48px 8px 8px;}
.sch-input-f button.btn-sch{position: absolute; transform: translateY(-50%); top: 50%; right: 16px; border-radius: 50%; padding: 12px; background: url('../assets/ic_search.svg') no-repeat center/cover;}
.sch-input-f button.btn-sch:hover{background-color: var(--light500);}



/*** button ***/
[class*="btn-"]              {display:inline-flex; align-items: center; justify-content: center; border-radius: 50px; line-height: 160%; font-weight: 500; cursor: pointer; border: 0;}
[class*="btn-"]:focus,
[class*="btn-"]:hover        {outline: none;}
[class*="btn-"]:disabled     {opacity: 50%; pointer-events: none;}

/* 아이콘 버튼 */
.btn-ico{display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;}
.btn-ico:hover{background-color: var(--light500); transition: 0.3s;}

.btn-ico-g{display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--dark600); border: 1px solid var(--light500); border-radius: 5px;}
.btn-ico-g:disabled{opacity: .5;}

.btn-ico-a{display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--alert)}
.btn-ico-a:disabled{opacity: .5;}

.btn-ico-filter{padding: 10px; background: var(--dark600);}
.btn-add-ico-p{color: var(--blue500)}
.btn-add-ico-p>i{font-size: 1.5rem;}
.btn-filter{font-size: 0.875rem; border: 1px solid var(--light100); border-radius: 20px; padding: 8px 16px;}
.btn-filter>i{padding-left: 10px;}


/* icon 테두리 없음 */
.btn-ico12 {width: 12px; height: 12px;}
.btn-ico12 img {width: 12px;}
.btn-ico20 {width: 20px; height: 20px;}
.btn-ico20 img {width: 20px;}
.btn-ico24 {width: 24px; height: 24px;}
.btn-ico24 img {width: 24px;}
.btn-ico28 {width: 28px; height: 40px;}
.btn-ico28 > img {width: 28px;}
.btn-ico30 {width: 30px; height: 30px;}
.btn-ico30 img {width: 30px;}
.btn-ico40 {width: 40px; height: 40px;}
.btn-ico40 > img {width: 40px;}

/* icon 테두리 있음 */
.btn-ico40-ol{width: 40px; height: 40px; border: 1px solid var(--light300); border-radius: 4px;}
.btn-ico40-ol > img {font-size: 24px;}
.btn-ico28-ol{width: 28px; height: 28px; border: 1px solid var(--light300); border-radius: 4px;}
.btn-ico28-ol > img {font-size: 20px;}

/* 회색 배경 */
.btn-g{background: var(--light300); color: var(--dark700); border-radius: 8px; padding: 8px 12px;}
.btn-g:hover{background-color: var(--light500); transition: 0.3s;}
.btn-g:active{background-color: var(--dark600); color: var(--white); transition: 0.5s;}

/*회색 배경, 보더*/
.btn-g-b {
    background: var(--light300);
    color: var(--dark900);
    border: 1px solid var(--dark600);
    border-radius: 10px;
    padding: 4px 12px;
}
.btn-g-b:hover {
    border: 1px solid var(--light100);
    background: var(--light500);
}

/*연한 회색 배경, 보더*/
.btn-gw-b {
    background: var(--light200);
    border: 1px solid var(--light100);
    color: var(--dark700);
    border-radius: 8px;
    padding: 8px 12px;
}
.btn-gw-b:hover{background-color: var(--light500); transition: 0.3s;}
.btn-gw-b:active{background-color: var(--dark600); color: var(--white); transition: 0.5s;}

/* 파란색 배경 */
.btn-p{background: var(--blue500); color: var(--white); border-radius: 8px; padding: 8px 12px;}
.btn-p:hover{background-color: var(--blue600); transition: 0.3s;}
.btn-p:active{background-color: var(--blue400);}

/* 추가 버튼 : 파란 배경 */
.btn-add-p{background: url(../assets/ico_add_w.png) var(--blue500) no-repeat 10px center; border: 1px solid var(--blue600); border-radius: 8px; padding: 8px 12px 8px 36px; color: var(--white)}
.btn-add-p:hover{background-color:var(--blue600); transition: 0.3s;}
.btn-add-p:active{background-color: var(--blue400);}

/* 파란색-흰색 배경 */
.btn-pw{background: var(--blue50); color: var(--dark900); border: 1px solid var(--blue150); border-radius: 10px; padding: 8px;}
.btn-pw:hover{background: var(--blue150); padding: 8px 12px; transition: 1s;}
/* 추가 버튼 : 파란색-흰색 배경 */
.btn-add-pw{background: url(../assets/ico_add.png) var(--blue50) no-repeat 10px center; border: 1px solid var(--blue150); border-radius: 8px; padding: 8px 12px 8px 36px;}
.btn-add-pw:hover{background-color:var(--blue150); transition: 0.3s;}

.btn-add-ab{background: var(--blue500); color: var(--white); position: absolute; bottom: 40px; right: 60px; border-radius: 16px; width: 48px; padding: 12px 0;}
.btn-add-ab>i{font-size: 20px;}
.btn-add-ab>span{display: none;}
.btn-add-ab:hover{width: auto; padding: 12px 20px; transition: .3s;}
.btn-add-ab:hover>span{display: inline-block;}

/* 빨간색 배경 */
.btn-a{background: var(--alert); color: var(--white); border-radius: 8px; padding: 8px 12px;}
.btn-a:active{opacity: 60%; transition: 0.3s;}

/* 옵션 추가 */
.btn-opt-add{background: url(../assets/ico_add.png) no-repeat 4px center; justify-content: flex-start; width: 100%; border-radius: 8px; padding: 10px 12px 10px 40px;}
.btn-opt-add:hover{background-color: var(--light500); transition: 0.3s;}

/* toggle */
.btn-toggle{padding: 8px; min-width: 36px; border-radius: 20px; font-size: 0.875rem;}
.btn-toggle.on{background: var(--blue50); color : var(--blue500);}

/* input, button 일렬 정렬 */
.inp-btn{display: flex; align-items: center; margin-top: 8px;}
.inp-btn span.input{flex-grow: 1;}
.inp-btn button{flex-shrink: 0; margin-left: 12px;  padding: 0 12px; height: 50px;}

/*버튼 묶는 div*/
.bt-wrap {
    display: flex;
    gap: 10px;
    align-items: center;
}

/** select **/
.select{display: block; margin-top: 8px; font-size: 1rem; color: var(--dark900); border: 1px solid var(--light100); border-radius: 8px; width: 100%; background: url(../assets/icon/ico_down.png) no-repeat 98% 50% / 24px 24px; padding: 12px 20px;}
.select-s{border: 1px solid var(--light100); border-radius: 8px; background: url(../assets/icon/ico_down.png) no-repeat 90% 50% / 24px 24px; padding: 8px 32px 8px 12px;}
.select-m{display: block; margin-top: 8px; font-size: 1rem; color: var(--dark900); border: 1px solid var(--light100); border-radius: 8px; width: 100%; background: url(../assets/icon/ico_down.png) no-repeat 98% 50% / 24px 24px; padding: 8px 12px;}
select:hover{border-color: var(--dark900); outline: none;}
select:focus{border-color: var(--blue500); outline: none;}
select:disabled{background: rgba(239, 239, 239, 0.3)}

/* select option 설정*/
div.select datalist div.option{padding: 8px 0;}

.sel-box{display: flex; justify-content: space-between; align-items: center;}
.sel-box > select:not(:first-child){margin-left: 10px;}

/** toggle **/
.toggle>span{margin: 6px 10px 6px; display: inline-block;}
.switch {position: relative; display: inline-block; width: 56px; height: 28px;}
.switch input {opacity: 0; width: 0; height: 0;} /* Hide default HTML checkbox */

/* The slider */
.slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; border-radius: 34px;}
.slider:before {position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; border-radius: 50%;}
input:checked + .slider {background-color:#2196F3;}
input:focus + .slider {box-shadow: 0 0 1px #2196F3;}
input:checked + .slider:before {-webkit-transform: translateX(26px);-ms-transform: translateX(26px);transform: translateX(26px);}

/*badge*/
.badge-wrap .badge {
    font-size: 14px;
    padding: 6px 8px;
    border-radius: 5px;
    font-weight: 400;
}
.badge-wrap .badge.b {
    background: var(--blue50);
    color: var(--blue400);
    border: none;
}
.badge-wrap .badge.a {
    background: #fcdada;
    color: var(--alert);
    border: none;
}
.badge-wrap .badge.g {
    background: var(--light300);
    color: var(--dark600);
    border: none;
}
.badge-wrap .badge-r {
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid var(--dark600);
    border-radius: 15px;
    color: var(--dark900);
    cursor: pointer;
}
.badge-wrap .badge-r.on {
    border-color: var(--dark900);
    background: var(--dark800);
    color: var(--white);
}

/***** content *****/
/* 항목별 구분 */
.section-bd{max-width: 960px; padding: 1.5rem 0;}
.section-bd:not(:first-child){border-top: 1px solid var(--light500);}

button.info{background: url(../assets/ico_help.png) no-repeat center/cover; width: 20px; height: 20px; margin-left: 5px;}

/* detail box */
.box p{margin: 0; padding: 0;}
.box{background: var(--light300); border-radius: 10px; padding: 20px;}
.box .subtit{margin-left: 40px; margin-bottom: 0.75rem;}

/*흰색 박스*/
.box-w {
    background: var(--white);
    border: 1px solid var(--light100);
    border-radius: 12px;
    padding: 12px;
}

/* 비밀번호 설정 > 공통 비밀번호 */
.pwd_set{margin-top: 1rem;}
.pwd_common_inp input{max-width: 120px; margin-left: 40px; padding: 8px 10px; border-color: var(--light500); text-align: center; margin-right: 10px;}
.pwd_common_inp input:hover{border-color: var(--dark900); outline: none;}
.pwd_common_inp input:focus{border-color: var(--blue500); outline: none;}

/***** grid *****/
.grid-section{border: 1px solid var(--light500); border-radius: 20px; width: 100%;}
.grid-header{display: flex; justify-content: space-between; align-items: center; padding: 16px 20px;}
.grid-header .grid-total{display: flex; align-items: center;}
.grid-header .total{color: var(--blue500); margin-left: 4px;}
.grid-container{width: 100%; min-height: 40rem; border-top: 1px solid var(--light500); border-bottom: 1px solid var(--light500); overflow: scroll}

/* footer */
.grid-footer{padding: 16px 20px;}
.grid-f-top{width: 100%; display: flex; justify-content: center;}
.pagination {display: inline-block;}
.pagination a {color: black; float: left; border-radius: 25px; padding: 8px 16px; text-decoration: none; margin: 0 4px;}
.pagination a.active {background-color: var(--blue500); color: var(--white);}
.pagination a:hover:not(.active) {background-color: var(--light500)}
.pagination a.nav{border: 1px solid var(--light500)}
.grid-footer .grid-f-bottom{display: flex; justify-content: space-between;}
.grid-footer .grid-f-bottom .del-box{flex-grow: 1;}
.grid-footer .grid-f-bottom .page-num{display: flex; justify-content: flex-start; align-items: center;}
.grid-footer .grid-f-bottom .page-num > * + *{margin-left: 0.75rem;} /* 12px */
.grid-footer .btn-g{min-width: 80px; text-align: center; border: 1px solid var(--light500)}
.grid-tg-box{display: flex; align-items: center; justify-content: flex-start; gap: 10px;}
.grid-tg-box .grid-tg-lst{display: flex; align-items: center; justify-content: flex-start;}
.grid-tg-box .grid-tg-lst>.grid-tag{display: flex; align-items: center; background: var(--light300); color: var(--dark600); font-size: 1rem; padding: 6px 10px; border-radius: 12px; gap: 5px;}

/* font-size 공통 폰트 사이즈 */
/* 제목, 부제목, 본문 기준으로 */
.content-body{margin: 0 auto; max-width: 800px;}
.tit{font-size: 1.125rem; /* 20px */ line-height: 160%; font-weight: 600; margin-bottom: 0.5rem;}
.subtit{font-size: 1rem; /* 16px */ line-height: 1.5rem; /* 24px */ font-weight: 600; margin-bottom: 0.5rem;}

[class*="detail-"]{font-size: 0.875rem; /* 14px */ line-height: 1.25rem; /* 20px */ font-weight: 400;}
.detail-g{color: var(--dark600)}
.detail-p{font-size: 0.875rem; /* 14px */ line-height: 1.25rem; /* 20px */ font-weight: 400; color: var(--blue500)}

.content-header{display: flex; justify-content: space-between; align-items: center;}
.btn-group{display: flex; justify-content: flex-start}
.btn-group button:not(:last-child){margin-right: 10px;}

.content-filter{padding: 10px; border: 1px solid var(--light500); display: flex; align-items: center}
.content-filter>i{font-size: 20px;}

/* 로딩 화면 */
#load {width: 100%; height: 100%; top: 0; left: 0; position: fixed; display: block; text-align: center; z-index:99998;}
#load div{width: 100%; height: 100%; top: 0; left: 0; position: fixed; display: block; opacity: 0.3; background: black; }
#load > img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; width: 80px; height: 80px;}

/* splash 화면 */
@keyframes jump-shaking {
    0% { transform: translateX(0) }
    25% { transform: translateY(-9px) }
    35% { transform: translateY(-9px) rotate(5deg) }
    55% { transform: translateY(-9px) rotate(-5deg) }
    65% { transform: translateY(-9px) rotate(5deg) }
    75% { transform: translateY(-9px) rotate(-5deg) }
    100% { transform: translateY(0) rotate(0) }
}
div.constant-jump-shake {
    animation: jump-shaking 1s 1;
}
div.splash{
    position: absolute;
    top: calc(50% - 40px);
    left: calc(50% - 60px);
    display: flex;
    align-items: center;
    flex-direction: column; gap: 10px;
}