@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');

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

@font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v109/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}


.material-icons {display: inline-block; font-family: 'Material Icons' !important; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;}
.material-icons-outlined {display: inline-block; font-family: 'Material Icons Outlined' !important; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal;  direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;}


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

.wrapper{width: 100%; height: 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;
    width: 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}
.fz-50{font-size: 50px !important}

/*** border radius ***/
.bdrs0{border-radius:0 !important;}
.bdrs4{border-radius:4px !important;}
.bdrs8{border-radius:8px !important;}
.bdrs0-25{border-radius:0 0 25px 25px !important;}

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

/*background*/
.bg-w {background: var(--white);}
.bg-a {background: var(--alert);}
.bg-aw {background: #FFC2C2 !important;}
.bg-t {background: transparent !important;}
.bg-bw {background: var(--blue150) !important;}

/*border*/
.bb {border-bottom: 1px solid var(--light100);}
.border-alert {border-color: var(--alert) !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;}
.tac::placeholder{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, bottom right,left , 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;}

.pb0{padding-bottom:0 !important;}
.pb5{padding-bottom:5px !important;}
.pb8{padding-bottom:8px !important;}
.pb10{padding-bottom:10px !important;}
.pb12{padding-bottom:12px !important;}
.pb15{padding-bottom:15px !important;}
.pb16{padding-bottom:16px !important;}
.pb20{padding-bottom:20px !important;}
.pb24{padding-bottom:24px !important;}
.pb25{padding-bottom:25px !important;}
.pb30{padding-bottom:30px !important;}
.pb32{padding-bottom:32px !important;}
.pb35{padding-bottom:35px !important;}
.pb40{padding-bottom:40px !important;}
.pb45{padding-bottom:45px !important;}
.pb50{padding-bottom:50px !important;}
.pb55{padding-bottom:55px !important;}
.pb60{padding-bottom:60px !important;}
.pb100{padding-bottom:100px !important;}
.pb120{padding-bottom:120px !important;}

.pr0{padding-right:0 !important;}
.pr5{padding-right:5px !important;}
.pr8{padding-right:8px !important;}
.pr10{padding-right:10px !important;}
.pr12{padding-right:12px !important;}
.pr15{padding-right:15px !important;}
.pr16{padding-right:16px !important;}
.pr20{padding-right:20px !important;}
.pr24{padding-right:24px !important;}
.pr25{padding-right:25px !important;}
.pr30{padding-right:30px !important;}
.pr32{padding-right:32px !important;}
.pr35{padding-right:35px !important;}
.pr40{padding-right:40px !important;}
.pr45{padding-right:45px !important;}
.pr50{padding-right:50px !important;}
.pr55{padding-right:55px !important;}
.pr60{padding-right:60px !important;}
.pr100{padding-right:100px !important;}
.pr120{padding-right:120px !important;}

.pl0{padding-left:0 !important;}
.pl5{padding-left:5px !important;}
.pl8{padding-left:8px !important;}
.pl10{padding-left:10px !important;}
.pl12{padding-left:12px !important;}
.pl15{padding-left:15px !important;}
.pl16{padding-left:16px !important;}
.pl20{padding-left:20px !important;}
.pl24{padding-left:24px !important;}
.pl25{padding-left:25px !important;}
.pl30{padding-left:30px !important;}
.pl32{padding-left:32px !important;}
.pl35{padding-left:35px !important;}
.pl40{padding-left:40px !important;}
.pl45{padding-left:45px !important;}
.pl50{padding-left:50px !important;}
.pl55{padding-left:55px !important;}
.pl60{padding-left:60px !important;}
.pl100{padding-left:100px !important;}
.pl120{padding-left:120px !important;}


.px-4 { padding: 0 4px !important;}
.px-8 { padding: 0 8px !important;}
.px-12 { padding: 0 12px !important;}
.px-16 { padding: 0 16px !important;}
.px-20 { padding: 0 20px !important;}
.px-24 { padding: 0 24px !important;}

.py-4 { padding: 4px 0 !important;}
.py-8 { padding: 8px 0 !important;}
.py-12 { padding: 12px 0 !important;}
.py-16 { padding: 16px 0 !important;}
.py-20 { padding: 20px 0 !important;}


/*** width ***/
/* auto, px 단위 */
.wa{width:auto !important;}
.w5{ width:5px !important;}
.w10{ width:10px !important;}
.w20{ width:20px !important;}
.w24{ width:24px !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;}
.w45p{ width:45% !important;}
.w50p{ width:50% !important;}
.w55p{ width:55% !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;}
.mt12{margin-top:12px !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;}
.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;}
.h28{ height:28px !important;}
.h30{ height:30px !important;}
.h40{ height:40px !important;}
.h50{ height:50px !important;}
.h60{ height:60px !important;}
.h64{ height:64px !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;}

/*** 회전값 ***/
.rotate-0	{transform: rotate(0deg);}
.rotate-1	{transform: rotate(1deg);}
.rotate-2	{transform: rotate(2deg);}
.rotate-3	{transform: rotate(3deg);}
.rotate-6	{transform: rotate(6deg);}
.rotate-12	{transform: rotate(12deg);}
.rotate-45	{transform: rotate(45deg);}
.rotate-90	{transform: rotate(90deg);}
.rotate-180	{transform: rotate(180deg);}

/*** 수평값 조절 ***/
.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;}
.ts7 {transform: scale(0.7);}

/***** 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 */
/* .input-opt는 밑줄형 + 글자수 세기 좌측형 배치입니다. 밑줄형을 사용할 때는 .input-u로 사용해주세요. */
input.input-r{border-radius: 16px; padding: 12px 20px;}
input.input-u, .input-opt{border:none; border-radius: 0; padding: 10px 0; border-bottom: 1px solid var(--light500);}
textarea.input-opt{padding-right: 64px; overflow: hidden; min-height: 42px;}
input.alert{border-color: var(--alert); outline: none;} /* input에 Alert 표시, 에러메시지와 같이 표시됨. */
.textarea{border-radius: 16px; padding: 16px 20px; background: var(--white); position: relative;}
.textarea-u{border:none; border-radius: 0; padding: 10px 0; border-bottom: 1px solid var(--light500); overflow:hidden; min-height: 42px;}
.textarea-u:focus{border-color: var(--dark800);}


/* 글자수 세기형 */
/* 기본 설정 : 글자수 위치 정렬을 위한 세팅 */
span.txt-cnt, div.txt-cnt:has(span.counter){position: relative; width: 100%;}
span.txt-cnt, div.txt-cnt:has(span.counter-c){position: relative; width: 100%;}

/* 글자수 스타일 */
input + span.counter, .counter-c{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);}
.input-opt + p > span.counter{opacity: 1; color: var(--dark600);}
.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-opt + span.counter{position: absolute; top: 50%; right: 0; transform: translateY(-50%); opacity: 1; color: var(--dark600);}
.textarea + p .counter { position: absolute; bottom: 20px; right: 20px; color: var(--dark600);}
.textarea + .counter { position: absolute; bottom: 20px; right: 20px; 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 .custom-select i { position: absolute; top: 25%; right: 2px;}
.search-wrap .custom-select select { width: 100%; height: 100%; background: var(--light700); border-radius: 8px; padding: 2px 20px px 8px;}

/*** select ***/
/* TODO : css 수정 */
.nice-select{display:flex; align-items: center; justify-content: center; position:relative;width:124px;vertical-align:top;cursor:pointer;outline:0}
.nice-select .current{display:block;overflow:hidden;position:relative;width:100%;height:30px;padding:0 40px 0 14px;color:#333;font-size:14px;line-height:28px;text-overflow:ellipsis;white-space:nowrap;border-radius:4px;background-color:var(--light700);}
.nice-select .current:after{content:'';position:absolute;top:-1px;right:-1px;width:30px;height:30px;background:url('../assets/icon/ico_arrow_drop_down.png') no-repeat 50% 50%;background-size:18px;transition:background-color ease .3s}
.nice-select .list{display:none;overflow-y:auto;position:absolute;top:35px;right:0;left:0;max-height:151px;padding:8px 0;border:1px solid #eaeaea;border-radius:4px;background-color:#fff;box-shadow:4px 4px 10px rgba(0, 0, 0, 0.07);z-index:2;}
.nice-select ul.list{top:0;padding:0;box-shadow:none}
.nice-select .list li{padding:3px 14px;color:#333;font-size:14px;line-height:1.5}
.nice-select .list li:hover{background-color:#f7f7f7}
.nice-select .list li.selected{font-weight:700}
.nice-select .list li.disabled{display:none}
.nice-select .current:hover:after{background-image:url('../assets/icon/ico_arrow_drop_down_hover.png');}
.nice-select .mCustomScrollbar .mCSB_scrollTools_vertical{background-color:rgba(255,255,255,.3)}
.nice-select.open .current{box-shadow:4px 4px 10px rgba(0, 0, 0, 0.07)}
.nice-select.open .current:after{transform:rotate(180deg)}
.nice-select.open .list{display:block}
.nice-select.disabled .current{color:#ccc;background-color:#f7f7f7 !important;box-shadow:none;cursor:default}
.nice-select.disabled .current:after{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23ccc%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m6%209l6%206l6-6%22%2F%3E%3C%2Fsvg%3E');transform:none}
.nice-select.disabled .list{display:none}

.nice.nice-select{display:flex; align-items: center; justify-content: center; position:relative;width:100%;vertical-align:top;cursor:pointer;outline:0}
.nice.nice-select .current{width:100%; height:auto; padding: 8px 40px 8px 14px;border-radius:16px;background-color:var(--white); border: 1px solid var(--light100);}
.nice.nice-select:hover .current{border-color: var(--dark900)}
.nice.nice-select:focus .current{border-color: var(--blue500);}
.nice.nice-select .current:after{content:'';position:absolute;top:50%; transform: translateY(-50%); right:8px;width:30px;height:30px;background:url('../assets/icon/ico_arrow_drop_down.png') no-repeat 50% 50%;background-size:18px;transition:background-color ease .3s}
.nice.nice-select .list{display:none;overflow-y:auto;position:absolute;top:35px;right:0;left:0;max-height:151px;padding:8px 0;border:1px solid #eaeaea;border-radius:4px;background-color:#fff;box-shadow:4px 4px 10px rgba(0, 0, 0, 0.07);z-index:2;}
.nice.nice-select ul.list{top:0;padding:0;box-shadow:none}
.nice.nice-select .list li{padding:10px 14px;color:#333;font-size:14px;line-height:1.5}
.nice.nice-select .list li:hover{background-color:#f7f7f7}
.nice.nice-select .list li.selected{font-weight:700}
.nice.nice-select .list li.disabled{display:none}
.nice.nice-select .current:hover:after{background-image:url('../assets/icon/ico_arrow_drop_down_hover.png');}
.nice.nice-select .mCustomScrollbar .mCSB_scrollTools_vertical{background-color:rgba(255,255,255,.3)}
.nice.nice-select.open .current{box-shadow:4px 4px 10px rgba(0, 0, 0, 0.07)}
.nice.nice-select.open .current:after{transform:rotate(180deg)}
.nice.nice-select.open .list{display:block}
.nice.nice-select.disabled .current{color:#ccc;background-color:#f7f7f7 !important;box-shadow:none;cursor:default}
.nice.nice-select.disabled .current:after{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23ccc%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m6%209l6%206l6-6%22%2F%3E%3C%2Fsvg%3E');transform:none}
.nice.nice-select.disabled .list{display:none}

/* 비밀번호 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"] {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);}
label.radio-b:has(input[type=radio]:checked){background: var(--light700);}
/*** radio 끝 ***/

/*** checkbox 시작 ***/
label{cursor: pointer;}
label.check{display: flex; align-items: center; gap: 8px; padding: 10px;}
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;}
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;}
/*** checkbox 끝 ***/

/*** date 시작 ***/
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {display: none; -webkit-appearance: none;}
input[type="text"].ic-calendar {
    border-radius: 8px;
    width: fit-content;
    padding: 8px 0 8px 14px;
}
/*** date 끝 ***/

.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; min-width: 72px;}
[class*="btn-"]:focus,
[class*="btn-"]:hover        {outline: none;}
[class*="btn-"]:disabled     {opacity: 50%; pointer-events: none;}
[class*="btn-ico"]           {min-width: initial;}

/* 아이콘 버튼 */
.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;}
.btn-filter input {
    border: none;
    text-align: center;
    color: var(--dark600);
    font-size: 16px;
}


/* 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, .btn-g-b:active {
    border: 1px solid var(--light100);
    background: var(--light500);
}

/* 파란색 배경 */
.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); 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: fixed; 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);}

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

/* 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;}

/** 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, var(--white); 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: 35px; height: 20px;}
.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: 12px; width: 12px; 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(15px);-ms-transform: translateX(15px);transform: translateX(15px);}

/***** content *****/
/* 항목별 구분 */
.section-s{max-width: 600px;}
.section{max-width: 960px;}
.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; max-width: 720px; margin-bottom: 2rem;}
.box .subtit{margin-left: 40px; margin-bottom: 0.75rem;}

/* 비밀번호 설정 > 공통 비밀번호 */
.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: auto; overflow: hidden;}
.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-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;}
.setting-grid-title{margin-right: 10px; min-width: 50px;}
.grid-container span.chktag{background: var(--blue50); color: var(--dark900); border: 1px solid var(--blue150); border-radius: 4px; padding: 8px; margin: 0 4px; overflow: hidden;}
.grid-container span.chktag-g{background: var(--light400); color: var(--dark900); border-radius: 4px; padding: 4px; margin-left: 8px; overflow: hidden;}

.nav-tabs{border: none; !important;}

/* 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: end;}
.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 공통 폰트 사이즈 */
/* 제목, 부제목, 본문 기준으로 */
/*.wrapper .main-wrapper #content .content-wrapper{overflow-y:scroll;}*/
.page-wrapper{padding: 20px 28px; overflow-x: initial; overflow-y: initial;}
.tab-contents-outer{padding: 0; overflow-x: initial; overflow-y: initial;}
.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; margin-bottom: 10px;}
.btn-group{display: flex; justify-content: flex-start}
.btn-group button:not(:last-child){margin-right: 10px;}

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

/*badge*/
.badge-wrap {
    display: flex;
    gap: 8px;
}
.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-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);
}

/* tab UI 수정 */
.wrapper .main-wrapper .content-wrapper .tab-container{height: auto; border: none;}
.wrapper .main-wrapper .content-wrapper .tab-container ul.tab{gap: 4px;}
.wrapper .main-wrapper .content-wrapper .tab-container ul.tab li.tab-menu{background: var(--light300); border: none; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 10px 20px;}
.wrapper .main-wrapper .content-wrapper .tab-container ul.tab li.tab-menu.on{background: var(--white); color: var(--dark900);}
.ic-tab-close{width: 12px; height: 12px;}
/* tab > 고정핀 */
.wrapper .main-wrapper .content-wrapper .tab-container ul.tab li.tab-menu >i{margin-right: 8px;}

/* breadcrumb 수정 */
.wrapper .main-wrapper .content-wrapper .breadcrumb {background: white; padding: 16px 28px; margin-bottom: 0; border-bottom: 1px solid var(--light300)}

/* tab 홈 버튼 */
.wrapper .main-wrapper .content-wrapper .tab-container .ic-tab-home-btn ul{border: none;}
.ic-tab-home-btn{background: white; border: none; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 10px;}

/* 에러 메시지 */
.err-msg{margin: 10px 0 0 4px; color: var(--alert); font-size: 0.875rem; /* 13px */ line-height: 1rem; /* 16px */}

/* 로딩 화면 */
#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;}

/* 모달 뒷 배경 */
.modal-dim{width: 100%; height: 100%; background : rgba(0,0,0,.5); position: fixed; z-index: 100; top:0; left: 0;}
.modal-dim.off{display: none;}