@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.2/font/bootstrap-icons.min.css');

/*font*/
@font-face {
    font-family: "Noto Sans KR";
    font-style: normal;
    font-weight: 100;
    src: url(../fonts/NotoSansKR-Thin.woff) format("woff"), url(../fonts/NotoSansKR-Thin.otf) format("opentype");
}

@font-face {
    font-family: "Noto Sans KR";
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/NotoSansKR-Light.woff) format("woff"), url(../fonts/NotoSansKR-Light.otf) format("opentype");
}

@font-face {
    font-family: "Noto Sans KR";
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/NotoSansKR-Regular.woff) format("woff"), url(../fonts/NotoSansKR-Regular.otf) format("opentype");
}

@font-face {
    font-family: "Noto Sans KR";
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/NotoSansKR-Medium.woff) format("woff"), url(../fonts/NotoSansKR-Medium.otf) format("opentype");
}

@font-face {
    font-family: "Noto Sans KR";
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/NotoSansKR-Bold.woff) format("woff"), url(../fonts/NotoSansKR-Bold.otf) format("opentype");
}

@font-face {
    font-family: "Noto Sans KR";
    font-style: normal;
    font-weight: 900;
    src: url(../fonts/NotoSansKR-Black.woff) format("woff"), url(../fonts/NotoSansKR-Black.otf) format("opentype");
}

/*common*/
* {
    box-sizing: border-box !important;
    font-family: Pretendard Variable, Pretendard JP Variable, serif !important;
    padding: 0;
    font-size: 14px;
}

ul {
    padding: 0 !important;
    margin: 0 !important;
}
select {
    appearance: none;

}

/*from main s*/
.wrapper {
    width: 100%;
    min-width: 1500px;
    height: 100%;
}

.main-wrapper {
    position: relative;
    width: 100%;
    display: flex;
}

/*sidebar*/
.bt-sidebar {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 10px;
    border-radius: 50%;
    background-color: var(--white);
    border: 1px solid var(--dark600);
    left: 188px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.bt-sidebar img {
    width: 12px;
}
.sidebar-menu-container {
    flex-direction: column;
    position: relative;
    white-space: nowrap;
    overflow-y: auto;
    border-right: 1px solid var(--light500);
    width: 200px;
    height: calc(100vh - 46px);
    background: var(--light600);
}

.sidebar-menu-container > .sidebar-menu-wrapper {
    scroll-behavior: smooth;
    overflow: overlay;
    overflow-x: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.main-wrapper .sidebar-menu-container::-webkit-scrollbar {
    width: 6px;
    display: inline;
}

.main-wrapper .sidebar-menu-container::-webkit-scrollbar-track {
    background: transparent;
}

.main-wrapper .sidebar-menu-container::-webkit-scrollbar-thumb {
    width: 6px;
    border-radius: 6px;
    background: #b6bdc1;
}
 .sidebar-menu-container .sidebar-menu-wrapper > .sidebar-main-menu > details > summary {
    cursor: pointer;
}

.sidebar-menu-container .sidebar-menu-wrapper details > summary:hover {
    background-color: rgba(40,80,150,.05);
}

.sidebar-menu-container .sidebar-menu-wrapper details > ul > li:hover{
    background-color: rgba(40,80,150,.05);
}

 .sidebar-menu-container .sidebar-menu-wrapper > .sidebar-main-menu > details > summary > .ic-submenu-open {
    content: url(../assets/ic_leftmenu_plus@3x.png);
    width: 10px;
    height: 10px;
}

 .sidebar-menu-container .sidebar-menu-wrapper > .sidebar-main-menu > details[open] > summary > .ic-submenu-open {
    content: url(../assets/ic_leftmenu_minus@3x.png);
    width: 10px;
    height: 10px;
}

.sidebar-menu-container .sidebar-menu-wrapper details > ul > li {
    cursor: pointer;
}

.sidebar-menu-container .sidebar-menu-wrapper details > ul > li > details > summary > .ic-submenu-open {
    content: url(../assets/ic_leftmenu_plus@3x.png);
    width: 8px;
    height: 8px;
}

.sidebar-menu-container .sidebar-menu-wrapper details > ul > li > details[open] > summary > .ic-submenu-open {
    content: url(../assets/ic_leftmenu_minus@3x.png);
    width: 8px;
    height: 8px;
}

.sidebar-menu-container .sidebar-menu-wrapper details summary {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 52px;
    font-weight: bold;
    color: var(--dark900);
}

.sidebar-menu-container .sidebar-menu-wrapper details.depth1 summary {
    padding-right: 20px;
}

.sidebar-menu-container .sidebar-menu-wrapper details.depth1 summary .menu-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 12px;
    line-height: 1.57;
    padding-left: 20px;
}

.sidebar-menu-container .sidebar-menu-wrapper .submenu-title {
    /*width: 180px;*/
    padding-right: 12px;
    padding-left: 54px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: bold;
    height: 48px;
}
.sidebar-menu-container .sidebar-menu-wrapper .submenu-title.active {
    border-radius: 4px;
    background-color: rgba(40,80,150,.05);
}

.sidebar-menu-container .sidebar-menu-wrapper ul.sidebar-bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 60px;
    margin-bottom: 13px;
    padding-left: 20px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.67;
    color: #dcfff5;
}

.sidebar-menu-container .sidebar-menu-wrapper .sidebar-bottom i{
    color: var(--dark900);
}

.sidebar-menu-container .sidebar-menu-wrapper ul.sidebar-bottom li {
    cursor: pointer;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.sidebar-menu-container.show details.depth1 summary .menu-title {
    gap: 12px;
}

.wrapper .main-wrapper .sidebar-menu-container .siderbar-help {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    font-size: 11px;
    font-weight: 500;
    color: #5c7099;
    border-top: 1px solid #e2e5e9;
}

/* content */
.wrapper .main-wrapper #content {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 60px);
}

.wrapper .main-wrapper #content .content-wrapper {
    flex: 1;
    background: #f7f7f7;
    height: calc(100% - 8px);
    margin: 2px;
}

.wrapper .main-wrapper .content-wrapper .tab-container {
    height: 28px;
    position: relative;
    display: flex;
    justify-content: space-between;
    border: solid 1px #c3cbd8;
}

.wrapper .main-wrapper .content-wrapper .tab-container .tab-arrow-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
}

.wrapper .main-wrapper .content-wrapper .tab-container .tab-arrow-wrapper .btn-tab-clear {
    cursor: pointer;
    width: 22px;
    min-width: initial;
    height: 20px;
    margin-right: 5px;
    padding: 4px;
    border-radius: 2px;
    border: solid 1px #9aa6b8;
    background-color: #fff;
    color: #5c7099;
}

.wrapper .main-wrapper .content-wrapper .tab-container .tab-arrow-wrapper ul.tab-clear-list {
    display: none;
    position: absolute;
    z-index: 3;
    right: 53px;
    top: 100%;
    padding: 10px;
    font-weight: normal;
    color: #152c5b;
    font-size: 12px;
    line-height: 2;
    box-shadow: 0 3px 15px 0 rgba(42, 97, 255, 0.1);
    border: solid 1px #c3cbd8;
    background-color: #fff;
}

.wrapper .main-wrapper.content-wrapper .tab-container .tab-arrow-wrapper ul.tab-clear-list li {
    white-space: nowrap;
}

.wrapper .main-wrapper .content-wrapper .tab-container .tab-arrow-wrapper .btn-tab-arrow {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 20px;
    border: solid 1px #e2e5e9;
    border-radius: 2px;
    background-color: #fff;
    min-width: initial;
}

.wrapper .main-wrapper .content-wrapper .tab-container .tab-arrow-wrapper .btn-tab-arrow.on {
    border: solid 1px #9aa6b8;
}

.wrapper .main-wrapper .content-wrapper .tab-container .tab-arrow-wrapper .btn-tab-arrow.left img {
    content: url(../assets/ic_tab_arrow_left_d@3x.png);
    width: 5px;
    height: 8px;
}

.wrapper .main-wrapper .content-wrapper .tab-container .tab-arrow-wrapper .btn-tab-arrow.left.on img {
    content: url(../assets/ic_tab_arrow_left_n@3x.png);
}

.wrapper .main-wrapper .content-wrapper .tab-container .tab-arrow-wrapper .btn-tab-arrow.right img {
    content: url(../assets/ic_tab_arrow_right_d@3x.png);
    width: 5px;
    height: 8px;
}

.wrapper .main-wrapper .content-wrapper .tab-container .tab-arrow-wrapper .btn-tab-arrow.right.on img {
    content: url(../assets/ic_tab_arrow_right_n@3x.png);
}

.wrapper .main-wrapper .content-wrapper .tab-container ul.tab {
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
}

.wrapper .main-wrapper .content-wrapper .tab-container ul.tab li.tab-menu {
    cursor: pointer;
    flex: 0 0 auto;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #c3cbd8;
    font-size: 13px;
    font-weight: 400;
    color: #3c3d42;
}

.ic-tab-close {
    content: url(../assets/ic_tab_n_close@3x.png);
    width: 8px;
    height: 8px;
    margin-left: 10px;
}

.wrapper .main-wrapper.content-wrapper .tab-container ul.tab li.tab-menu .ic-tab-close {
    display: none;
}

.wrapper .main-wrapper .content-wrapper .tab-container ul.tab li.tab-menu.on {
    color: white;
    background: var(--blue600);
    font-weight: bold;
}

.wrapper .main-wrapper .content-wrapper .tab-container ul.tab li.tab-menu.on .ic-tab-close {
    display: initial;
}

.wrapper .main-wrapper .content-wrapper .breadcrumb {
    padding-top: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 300;
}

.wrapper .main-wrapper .content-wrapper .breadcrumb .nav-home {
    display: flex;
    gap: 4px;
    align-items: center;
}

.wrapper .main-wrapper .content-wrapper .breadcrumb span{
    font-size: 13px;
}

.tab-contents-outer {
    display: flex;
    flex-direction: column;
    /*padding: 12px 24px 60px;*/
    background: var(--white);
    overflow-y: scroll;
    height: calc(100vh - 79px);
}

.wrapper .footer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    opacity: 0.8;
    border-top: 1px solid #9da9bf;
    background-color: var(--dark900);
    font-size: 9px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.44;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
}

.nav-wrapper {
    background: var(--white);
}

body, html {
    width: 100%;
}

input[type=number],
input[type=text],
input[type=password],
input[type=url],
input[type=email],
input[type=tel],
input[type=date],
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    outline: 0;
}

.input-login-wrapper input[type=text], .input-login-wrapper input[type=password], .input-login-wrapper input[type=date], .input-login-wrapper input[type=month], .input-login-wrapper input[type=time] {
    font-size: 1rem;
    border: 1px solid var(--light100);
    padding: 12px 20px;
}

button,
select {
    text-transform: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
}
img,
video {
    max-width: 100%;
    height: auto;
}

/*from main e*/

/*reset*/
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: 16px;
    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:has(i){
    display: flex;
    gap: 8px;
    align-items: center;
}

button>i{
    font-size: 12px;
}

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: #e8f1ed;
    --blue100: #d0e2da;
    --blue150: #b9d4c8;
    --blue200: #a2c5b6;
    --blue250: #8bb7a4;
    --blue300: #73a891;
    --blue350: #5c9a7f;
    --blue400: #458b6d;
    --blue450: #2d7d5a;
    --blue500: #166E48; /* p-color */
    --blue550: #146341;
    --blue600: #12583a;
    --blue650: #0f4d32;
    --blue700: #0d422b;
    --blue750: #0b3724;
    --blue800: #092c1d;
    --blue850: #072116;
    --blue900: #04160e;
    --blue950: #020b07;
    --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;
    --yellow : #FEFFBD;

    /* 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-y {
    background: var(--yellow);
}

.bg-a {
    background: var(--alert);
}

.bg-aw {
    background: #FFC2C2 !important;
}

.bg-t {
    background: transparent !important;
}

.bg-bw {
    background: var(--blue150) !important;
}

.bg-lv-1 {
    background: #A0D974 !important;
}
.bg-lv-2 {
    background: #D6EB83 !important;
}
.bg-lv-3 {
    background: #FFF388 !important;
}
.bg-lv-4 {
    background: #FCC674 !important;
}
.bg-lv-5 {
    background: #FC9574 !important;
}
.bg-lv-6 {
    background: #DD4949 !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;
}

.g20{
    gap: 20px;
}

/*** 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"], input[type="tel"], .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, input[type="tel"]: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, input[type="tel"]: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: 8px 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;
    border: 1px solid #0a0a0a;
    border-radius: 4px;
}

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;
    height: 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 12px;
}

.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 button {
    color: black;
    float: left;
    border-radius: 25px;
    padding: 8px 16px;
    text-decoration: none;
    margin: 0 4px;
}

.pagination button.active {
    background-color: var(--blue500);
    color: var(--white);
}

.pagination button:hover:not(.active) {
    background-color: var(--light500)
}

.pagination button.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 공통 폰트 사이즈 */
/* 제목, 부제목, 본문 기준으로 */
.page-wrapper {
    padding: 20px 28px;
    overflow-x: initial;
    overflow-y: initial;
    margin: 0 5px;
}

.content-body {
    margin: 0 auto;
    /*max-width: 800px;*/
    width: 100%;
}

.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;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--light500);
}

.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: 10px 20px;
    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;
}