@charset "UTF-8";
@import "/css/font/font.css";

:root{
    /**** !! 코딩시 지우지 말 것 !! ****/
    /* 컬러 */
    --basic:#ddd;
    --main:#e74c3c;
    --point: #98CA32;
    --border:#e3e3f0;
    
    --bg_dark:#232f40;
    --bg_black:#18202b;
    --bg_dark_border: #20262d;
    --bg_border: rgba(0, 0, 0, .25);
    
    --primary: #51a7e3;
    --secondary: #d7d7e7;
    --danger: #f66f9c;
    --success: #60cc7e;
    --info: #5abaef;
    --warning: #f2bc64;
    --light: #ebebf6;
    
    --black:#1b1b1c;
    --white:#fff;
    --gray-100: #f0f0f0;
    --gray-200: #e0e0e0;
    --gray-300: #d0d0d0;
    --gray-400: #b0b0b0;
    --gray-500: #909090;
    --gray-600: #707070;
    --gray-700: #505050;
    --gray-800: #303030;
    --gray-900: #101010;
    
    --fs10: 0.588rem;
    --fs11: 0.647rem;
    --fs12: 0.706rem;
    --fs13: 0.765rem;
    --fs14: 0.824rem;
    --fs15: 0.882rem;
    --fs16: 0.941rem;
    --fs17: 1.000rem;
    --fs18: 1.059rem;
    --fs19: 1.118rem;
    --fs20: 1.176rem;
    --fs21: 1.235rem;
    --fs22: 1.294rem;
    --fs23: 1.353rem;
    --fs24: 1.412rem;
    --fs25: 1.471rem;
    --fs26: 1.529rem;
    --fs27: 1.588rem;
    --fs28: 1.647rem;
    --fs29: 1.706rem;
    --fs30: 1.765rem;
    --fs31: 1.824rem;
    --fs32: 1.882rem;
    --fs33: 1.941rem;
    --fs34: 2.000rem;
    --fs35: 2.059rem;
    --fs36: 2.118rem;
    --fs37: 2.176rem;
    --fs38: 2.235rem;
    --fs39: 2.294rem;
    --fs40: 2.353rem;
    --fs41: 2.412rem;
    --fs42: 2.471rem;
    --fs43: 2.529rem;
    --fs44: 2.588rem;
    --fs45: 2.647rem;
    --fs46: 2.706rem;
    --fs47: 2.765rem;
    --fs48: 2.824rem;
    --fs49: 2.882rem;
    --fs50: 2.941rem;
    --fs51: 3.000rem;
    --fs52: 3.059rem;
    --fs53: 3.118rem;
    --fs54: 3.176rem;
    --fs55: 3.235rem;
    --fs56: 3.294rem;
    --fs57: 3.353rem;
    --fs58: 3.412rem;
    --fs59: 3.471rem;
    --fs60: 3.529rem;
    --fs61: 3.588rem;
    --fs62: 3.647rem;
    --fs63: 3.706rem;
    --fs64: 3.765rem;
    --fs65: 3.824rem;
    --fs66: 3.882rem;
    --fs67: 3.941rem;
    --fs68: 4.000rem;
    --fs69: 4.059rem;
    --fs70: 4.118rem;
    --fs71: 4.176rem;
    --fs72: 4.235rem;

    /* 폰트 */
    --eng: 'Pretendard', sans-serif;
    --icon: 'Material Symbols Outlined';

    /* 높이 */
    --px01: 0.0625rem;
    --px02: 0.125rem;
    --px03: 0.1875rem;
    --px04: 0.25rem;
    --px05: 0.3125rem;
    --px06: 0.375rem;
    --px07: 0.4375rem;
    --px08: 0.5rem;
    --px09: 0.5625rem;
    --px10: 0.625rem;
    --px11: 0.6875rem;
    --px12: 0.75rem;
    --px13: 0.8125rem;
    --px14: 0.875rem;
    --px15: 0.9375rem;
    --px16: 1rem;
    --px17: 1.0625rem;
    --px18: 1.125rem;
    --px19: 1.1875rem;
    --px20: 1.25rem;
    --px21: 1.3125rem;
    --px22: 1.375rem;
    --px23: 1.4375rem;
    --px24: 1.5rem;
    --px25: 1.5625rem;
    --px26: 1.625rem;
    --px27: 1.6875rem;
    --px28: 1.75rem;
    --px29: 1.8125rem;
    --px30: 1.875rem;
    --px31: 1.9375rem;
    --px32: 2rem;
    --px33: 2.0625rem;
    --px34: 2.125rem;
    --px35: 2.1875rem;
    --px36: 2.25rem;
    --px37: 2.3125rem;
    --px38: 2.375rem;
    --px39: 2.4375rem;
    --px40: 2.5rem;
    --px41: 2.5625rem;
    --px42: 2.625rem;
    --px43: 2.6875rem;
    --px44: 2.75rem;
    --px45: 2.8125rem;
    --px46: 2.875rem;
    --px47: 2.9375rem;
    --px48: 3rem;
    --px49: 3.0625rem;
    --px50: 3.125rem;
    --px51: 3.1875rem;
    --px52: 3.25rem;
    --px53: 3.3125rem;
    --px54: 3.375rem;
    --px55: 3.4375rem;
    --px56: 3.5rem;
    --px57: 3.5625rem;
    --px58: 3.625rem;
    --px59: 3.6875rem;
    --px60: 3.75rem;
    --px61: 3.8125rem;
    --px62: 3.875rem;
    --px63: 3.9375rem;
    --px64: 4rem;
    --px65: 4.0625rem;
    --px66: 4.125rem;
    --px67: 4.1875rem;
    --px68: 4.25rem;
    --px69: 4.3125rem;
    --px70: 4.375rem;
    --px71: 4.4375rem;
    --px72: 4.5rem;
    --px73: 4.5625rem;
    --px74: 4.625rem;
    --px75: 4.6875rem;
    --px76: 4.75rem;
    --px77: 4.8125rem;
    --px78: 4.875rem;
    --px79: 4.9375rem;
    --px80: 5rem;
    --px81: 5.0625rem;
    --px82: 5.125rem;
    --px83: 5.1875rem;
    --px84: 5.25rem;
    --px85: 5.3125rem;
    --px86: 5.375rem;
    --px87: 5.4375rem;
    --px88: 5.5rem;
    --px89: 5.5625rem;
    --px90: 5.625rem;
    --px91: 5.6875rem;
    --px92: 5.75rem;
    --px93: 5.8125rem;
    --px94: 5.875rem;
    --px95: 5.9375rem;
    --px96: 6rem;
    --px97: 6.0625rem;
    --px98: 6.125rem;
    --px99: 6.1875rem;
    --px100: 6.25rem;
    --px101: 6.3125rem;
    --px102: 6.375rem;
    --px103: 6.4375rem;
    --px104: 6.5rem;
    --px105: 6.5625rem;
    --px106: 6.625rem;
    --px107: 6.6875rem;
    --px108: 6.75rem;
    --px109: 6.8125rem;
    --px110: 6.875rem;
    --px111: 6.9375rem;
    --px112: 7rem;
    --px113: 7.0625rem;
    --px114: 7.125rem;
    --px115: 7.1875rem;
    --px116: 7.25rem;
    --px117: 7.3125rem;
    --px118: 7.375rem;
    --px119: 7.4375rem;
    --px120: 7.5rem;
    --px121: 7.5625rem;
    --px122: 7.625rem;
    --px123: 7.6875rem;
    --px124: 7.75rem;
    --px125: 7.8125rem;
    --px126: 7.875rem;
    --px127: 7.9375rem;
    --px128: 8rem;
    --px129: 8.0625rem;
    --px130: 8.125rem;
    --px131: 8.1875rem;
    --px132: 8.25rem;
    --px133: 8.3125rem;
    --px134: 8.375rem;
    --px135: 8.4375rem;
    --px136: 8.5rem;
    --px137: 8.5625rem;
    --px138: 8.625rem;
    --px139: 8.6875rem;
    --px140: 8.75rem;
    --px141: 8.8125rem;
    --px142: 8.875rem;
    --px143: 8.9375rem;
    --px144: 9rem;
    --px145: 9.0625rem;
    --px146: 9.125rem;
    --px147: 9.1875rem;
    --px148: 9.25rem;
    --px149: 9.3125rem;
    --px150: 9.375rem;
    --px200: 12.5rem;
    --px250: 15.625rem;
    --px280: 17.5rem;
    
    --pxm01: -0.0625rem;
    --pxm02: -0.125rem;
    --pxm03: -0.1875rem;
    --pxm04: -0.25rem;
    --pxm05: -0.3125rem;
    --pxm06: -0.375rem;
    --pxm07: -0.4375rem;
    --pxm08: -0.5rem;
    --pxm09: -0.5625rem;
    --pxm10: -0.625rem;
    --pxm11: -0.6875rem;
    --pxm12: -0.75rem;
    --pxm13: -0.8125rem;
    --pxm14: -0.875rem;
    --pxm15: -0.9375rem;
    --pxm16: -1rem;
    --pxm17: -1.0625rem;
    --pxm18: -1.125rem;
    --pxm19: -1.1875rem;
    --pxm20: -1.25rem;
    --pxm21: -1.3125rem;
    --pxm22: -1.375rem;
    --pxm23: -1.4375rem;
    --pxm24: -1.5rem;
    --pxm25: -1.5625rem;
    --pxm26: -1.625rem;
    --pxm27: -1.6875rem;
    --pxm28: -1.75rem;
    --pxm29: -1.8125rem;
    --pxm30: -1.875rem;
    --pxm31: -1.9375rem;
    --pxm32: -2rem;
    --pxm33: -2.0625rem;
    --pxm34: -2.125rem;
    --pxm35: -2.1875rem;
    --pxm36: -2.25rem;
    --pxm37: -2.3125rem;
    --pxm38: -2.375rem;
    --pxm39: -2.4375rem;
    --pxm40: -2.5rem;
    --pxm41: -2.5625rem;
    --pxm42: -2.625rem;
    --pxm43: -2.6875rem;
    --pxm44: -2.75rem;
    --pxm45: -2.8125rem;
    --pxm46: -2.875rem;
    --pxm47: -2.9375rem;
    --pxm48: -3rem;
    --pxm49: -3.0625rem;
    --pxm50: -3.125rem;
    --pxm51: -3.1875rem;
    --pxm52: -3.25rem;
    --pxm53: -3.3125rem;
    --pxm54: -3.375rem;
    --pxm55: -3.4375rem;
    --pxm56: -3.5rem;
    --pxm57: -3.5625rem;
    --pxm58: -3.625rem;
    --pxm59: -3.6875rem;
    --pxm60: -3.75rem;
    --pxm61: -3.8125rem;
    --pxm62: -3.875rem;
    --pxm63: -3.9375rem;
    --pxm64: -4rem;
    --pxm65: -4.0625rem;
    --pxm66: -4.125rem;
    --pxm67: -4.1875rem;
    --pxm68: -4.25rem;
    --pxm69: -4.3125rem;
    --pxm70: -4.375rem;
    --pxm71: -4.4375rem;
    --pxm72: -4.5rem;
    --pxm73: -4.5625rem;
    --pxm74: -4.625rem;
    --pxm75: -4.6875rem;
    --pxm76: -4.75rem;
    --pxm77: -4.8125rem;
    --pxm78: -4.875rem;
    --pxm79: -4.9375rem;
    --pxm80: -5rem;
    --pxm81: -5.0625rem;
    --pxm82: -5.125rem;
    --pxm83: -5.1875rem;
    --pxm84: -5.25rem;
    --pxm85: -5.3125rem;
    --pxm86: -5.375rem;
    --pxm87: -5.4375rem;
    --pxm88: -5.5rem;
    --pxm89: -5.5625rem;
    --pxm90: -5.625rem;
    --pxm91: -5.6875rem;
    --pxm92: -5.75rem;
    --pxm93: -5.8125rem;
    --pxm94: -5.875rem;
    --pxm95: -5.9375rem;
    --pxm96: -6rem;
    --pxm97: -6.0625rem;
    --pxm98: -6.125rem;
    --pxm99: -6.1875rem;
    --pxm100: -6.25rem;
    --pxm101: -6.3125rem;
    --pxm102: -6.375rem;
    --pxm103: -6.4375rem;
    --pxm104: -6.5rem;
    --pxm105: -6.5625rem;
    --pxm106: -6.625rem;
    --pxm107: -6.6875rem;
    --pxm108: -6.75rem;
    --pxm109: -6.8125rem;
    --pxm110: -6.875rem;
    --pxm111: -6.9375rem;
    --pxm112: -7rem;
    --pxm113: -7.0625rem;
    --pxm114: -7.125rem;
    --pxm115: -7.1875rem;
    --pxm116: -7.25rem;
    --pxm117: -7.3125rem;
    --pxm118: -7.375rem;
    --pxm119: -7.4375rem;
    --pxm120: -7.5rem;
    --pxm121: -7.5625rem;
    --pxm122: -7.625rem;
    --pxm123: -7.6875rem;
    --pxm124: -7.75rem;
    --pxm125: -7.8125rem;
    --pxm126: -7.875rem;
    --pxm127: -7.9375rem;
    --pxm128: -8rem;
    --pxm129: -8.0625rem;
    --pxm130: -8.125rem;
    --pxm131: -8.1875rem;
    --pxm132: -8.25rem;
    --pxm133: -8.3125rem;
    --pxm134: -8.375rem;
    --pxm135: -8.4375rem;
    --pxm136: -8.5rem;
    --pxm137: -8.5625rem;
    --pxm138: -8.625rem;
    --pxm139: -8.6875rem;
    --pxm140: -8.75rem;
    --pxm141: -8.8125rem;
    --pxm142: -8.875rem;
    --pxm143: -8.9375rem;
    --pxm144: -9rem;
    --pxm145: -9.0625rem;
    --pxm146: -9.125rem;
    --pxm147: -9.1875rem;
    --pxm148: -9.25rem;
    --pxm149: -9.3125rem;
    --pxm150: -9.375rem;
}

/* 폰트크기 */
.font_14 { font-size: var(--fs14); line-height: 1.71; letter-spacing: -0.03em; }
.font_15 { font-size: var(--fs15); line-height: 1.73; letter-spacing: -0.03em; }
.font_16 { font-size: var(--fs16); line-height: 1.75; letter-spacing: -0.03em; }
.font_17 { font-size: var(--fs17); line-height: 1.65; letter-spacing: -0.03em; }
.font_18 { font-size: var(--fs18); line-height: 1.6; letter-spacing: -0.03em; }
.font_19 { font-size: var(--fs19); line-height: 1.5; letter-spacing: -0.03em; }
.font_20 { font-size: var(--fs20); line-height: 1.4; letter-spacing: -0.03em; }
.font_21 { font-size: var(--fs21); line-height: 1.4; letter-spacing: -0.04em; }
.font_22 { font-size: var(--fs22); line-height: 1.4; letter-spacing: -0.04em; }
.font_23 { font-size: var(--fs23); line-height: 1.41; letter-spacing: -0.04em; }
.font_24 { font-size: var(--fs24); line-height: 1.41; letter-spacing: -0.05em; }
.font_25 { font-size: var(--fs25); line-height: 1.4; letter-spacing: -0.04em; }
.font_26 { font-size: var(--fs26); line-height: 1.38; letter-spacing: -0.04em; }
.font_27 { font-size: var(--fs27); line-height: 1.35; letter-spacing: -0.04em; }
.font_28 { font-size: var(--fs28); line-height: 1.35; letter-spacing: -0.04em; }
.font_29 { font-size: var(--fs29); line-height: 1.35; letter-spacing: -0.04em; }
.font_30 { font-size: var(--fs30); line-height: 1.4; letter-spacing: -0.03em; }
.font_31 { font-size: var(--fs31); line-height: 1.35; letter-spacing: -0.05em; }
.font_32 { font-size: var(--fs32); line-height: 1.31; letter-spacing: -0.05em; }
.font_33 { font-size: var(--fs33); line-height: 1.3; letter-spacing: -0.05em; }
.font_34 { font-size: var(--fs34); line-height: 1.3; letter-spacing: -0.05em; }
.font_35 { font-size: var(--fs35); line-height: 1.29; letter-spacing: -0.05em; }
.font_36 { font-size: var(--fs36); line-height: 1.27; letter-spacing: -0.05em; }
.font_37 { font-size: var(--fs37); line-height: 1.27; letter-spacing: -0.05em; }
.font_38 { font-size: var(--fs38); line-height: 1.27; letter-spacing: -0.05em; }
.font_39 { font-size: var(--fs39); line-height: 1.26; letter-spacing: -0.05em; }
.font_40 { font-size: var(--fs40); line-height: 1.26; letter-spacing: -0.05em; }
.font_41 { font-size: var(--fs41); line-height: 1.26; letter-spacing: -0.05em; }
.font_42 { font-size: var(--fs42); line-height: 1.26; letter-spacing: -0.05em; }
.font_43 { font-size: var(--fs43); line-height: 1.26; letter-spacing: -0.05em; }
.font_44 { font-size: var(--fs44); line-height: 1.26; letter-spacing: -0.05em; }
.font_45 { font-size: var(--fs45); line-height: 1.26; letter-spacing: -0.05em; }
.font_46 { font-size: var(--fs46); line-height: 1.26; letter-spacing: -0.05em; }
.font_47 { font-size: var(--fs47); line-height: 1.23; letter-spacing: -0.05em; }
.font_48 { font-size: var(--fs48); line-height: 1.2; letter-spacing: -0.05em; }
.font_49 { font-size: var(--fs49); line-height: 1.2; letter-spacing: -0.05em; }
.font_50 { font-size: var(--fs50); line-height: 1.2; letter-spacing: -0.05em; }

.ftw500                {font-weight: 500 !important;}
.ftw600                {font-weight: 600 !important;}
.ftw500                {font-weight: 700 !important;}
.ftw800                {font-weight: 800 !important;}


/* 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, input {
    margin: 0; padding: 0;
    font-size: 100%; font: inherit; vertical-align: baseline;
    border: 0; box-sizing: border-box;    
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: ''; content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
button {
    border: none; background: none;
    padding: 0;
    cursor: pointer;
}
i {
    font-size: 16px;
}

/* html */
html {
    font-size: 16px; /* 기본값으로 강제 설정 */
}

/* body */
body {
    position: relative;
    height: 100vh;
    background-color: #f5f6fa; 
}

.bg_kakao {
    background-color: #fee500;
}
.bg_naver {
    background-color: #03c75a;
}
.bg_google {
    background-color: #ffffff;
    border: 1px solid var(--border);
}


/* CLASS 색상 설정 ******************************************************************/
.state {
    width: auto !important;
    padding: .1rem .5rem .1rem;
    border-radius: .2rem;
    background-color: var(--gray-100);
    color: #656565;
}
.class1 {
    background-color: #d7e2ea;
    color: #0056B3;
}
.class2 {
    background-color: #A3E6A0;
    color: #1C7430;
}
.class3 {
    background-color: #ffe46d;
    color: #745209;
}
.class4 {
    background-color: #A7C9FF;
    color: #003D79;
}
.class5 {
    background-color: #FF8A8A;
    color: #9E1A1A;
}
.class6 {
    background-color: #FFBC7A;
    color: #C24C12;
}
.class7 {
    background-color: #E0A8F3;
    color: #5A2E99;
}


/* 아이콘 설정 ******************************************************************/
.icon,.icon_w {width: 1.2rem; height: 1.2rem; margin-top: var(--px08);}
.icon_w {filter: invert(100%); opacity: 1.0 !important;}
.icon,.icon_w {display: inline-block;background-size: contain;background-repeat: no-repeat;background-position: center;opacity: 0.9;}

.title > .icon, .title > .icon_w {margin-left: .1rem; margin-top: 0rem;opacity: 0.4;cursor: pointer;}
.title > .icon:hover, .title > .icon_w:hover {opacity: 0.5;}

/*
<a href="#"><i class="icon icon-*"></i></a>
*/
.icon-home {background-image: url('/images/icons/home.svg');margin-right: 10px;}
.icon-trash {background-image: url('/images/icons/trash.svg');}
.icon-search {background-image: url('/images/icons/search.svg');}
.icon-cross {background-image: url('/images/icons/cross.svg');}
.icon-pen-field {background-image: url('/images/icons/pen-field.svg');}
.icon-settings {background-image: url('/images/icons/settings.svg');}
.icon-user-settings {background-image: url('/images/icons/user-settings.svg');}
.icon-dot-pending {background-image: url('/images/icons/dot-pending.svg');}
.icon-user {background-image: url('/images/icons/user.svg');margin-left: 6px;}
.icon-angle-left {background-image: url('/images/icons/angle-left.svg');}
.icon-users-alt {background-image: url('/images/icons/users-alt.svg');}
.icon-add-document {background-image: url('/images/icons/add-document.svg');}
.icon-pen-square {background-image: url('/images/icons/pen-square.svg');}
.icon-calendar-clock {background-image: url('/images/icons/calendar-clock.svg');}
.icon-print {background-image: url('/images/icons/print.svg');}
.icon-triangle {background-image: url('/images/icons/triangle.svg');}
.icon-triangle-left {background-image: url('/images/icons/triangle.svg');transform: rotate(-90deg);}
.icon-triangle-right {background-image: url('/images/icons/triangle.svg');transform: rotate(90deg);}
.icon-angle-left {background-image: url('/images/icons/angle-small-left.svg');}
.icon-angle-right {background-image: url('/images/icons/angle-small-left.svg');transform: rotate(180deg);}
.icon-angle-bottom {background-image: url('/images/icons/angle-small-left.svg');transform: rotate(270deg);}
.icon-angle-double-left {background-image: url('/images/icons/angle-double-small-left.svg');}
.icon-angle-double-right {background-image: url('/images/icons/angle-double-small-left.svg');transform: rotate(180deg);}
.icon-pencil {background-image: url('/images/icons/pencil.svg');}
.icon-parking {background-image: url('/images/icons/parking.svg');}
.icon-benefit-porcent {background-image: url('/images/icons/benefit-porcent.svg');}
.icon-coins {background-image: url('/images/icons/coins.svg');}
.icon-eye {background-image: url('/images/icons/eye.svg');}
.icon-eye-crossed {background-image: url('/images/icons/eye-crossed.svg');}
.icon-browser {background-image: url('/images/icons/browser.svg');}
.icon-window {background-image: url('/images/icons/window.svg');}
.icon-copy-alt {background-image: url('/images/icons/copy-alt.svg');}
.icon-picture {background-image: url('/images/icons/picture.svg');}
.icon-image-slash {background-image: url('/images/icons/image-slash.svg');}
.icon-list-check {background-image: url('/images/icons/list-check.svg');}
.icon-payroll-calendar {background-image: url('/images/icons/payroll-calendar.svg');}
.icon-menu-burger {background-image: url('/images/icons/menu-burger.svg');}
.icon-star {background-image: url('/images/icons/star-line.svg');}
.icon-star:hover {background-image: url('/images/icons/star-all.svg');}
.icon-star-all {background-image: url('/images/icons/star-all.svg');}
.icon-star-all:hover {background-image: url('/images/icons/star-line.svg');}

/* 폰트 기본 설정 ******************************************************************/
h1, h2, h3, h4, h5, ul, ol, dl, div, span, dd, dt, li, p, a, 
fieldset, form, label, legend, input[type=file]::file-selector-button, 
table, caption, tbody, tfoot, thead, tr, th, td,
button, input, select, option, textarea {
    font-family: 'Noto Sans KR', 'Roboto',  Malgun Gothic,'Malgun Gothic', sans-serif;
    font-size: var(--fs15);
    font-weight:400;
    line-height:1.6;
    letter-spacing:-0.2px;
    word-break:break-all;
    text-decoration: none;
    color: var(--black);
}

/* 기본 애니메이션 ******************************************************************/
* {transition:all 0.1s ease; -webkit-transition:all 0.1s ease;}
button:hover, a:hover {opacity: 0.8;}

/* 인풋 기본 설정 ******************************************************************/
.app-container *::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.app-container *::-webkit-scrollbar-thumb {
    background-color: var(--gray-100);
    border-radius: 60px;
}

.app-container *::-webkit-scrollbar-track {
    background-color: #ffffff00;
}

/* 인풋 기본 설정 ******************************************************************/
.untouchable {
    background-color: #f5f5f580 !important;
    color: #757575 !important;
    pointer-events: none;
    border: none;
    padding: 0;
    margin: 0;
    -webkit-appearance: none; /* Safari, Chrome */
    -moz-appearance: none;    /* Firefox */
    appearance: none;         /* 기본 화살표 제거 */
}

#popup .untouchable{
    background-color: #fff !important;
}


.blind {
    display: none !important;
}

.not-data {
    width: 100%;
    height: 160px !important;
    justify-content: center;
    align-content: center;
    color: var(--gray-600);
    font-size: var(--fs18);
    background-color: #f5f6fa50 !important;
}

form {
    width: 100%;
    margin-top: var(--px10);
}

dl > dd,
dl > dt {
    width: 100%;
}

table>:not(caption)>*>* {
    padding: .0rem 1rem;
    text-align: center;
}

input, textarea, select {
    outline-color: #555;
}

input::placeholder,
textarea::placeholder {
    color: #acaab9;
}

label {
    display: flex;
    align-items: center;
    gap: var(--px05);
    cursor: pointer;
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
    border: 0.4em solid var(--bg_dark);
    accent-color: var(--bg_dark);
    background: var(--bg_dark);
}

[type="radio"] {
    vertical-align: middle;
    appearance: none;
    border: max(2px, 0.1em) solid var(--gray-500);
    border-radius: 50%;
    width: 1.25em;
    height: 1.25em !important;
}

.color-picker {
    width: var(--px50) !important;
    height: var(--px50);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
}
  
.color-picker::-webkit-color-swatch {
    border: none;
}

label:has(input[type="radio"]:checked),
label:has(input[type="checkbox"]:checked),
label:has(input[type="radio"]:checked) span,
label:has(input[type="checkbox"]:checked) span {
    color: var(--bg_dark);
}

.tb_radio,
.tb_check {
    flex-wrap: wrap;
    gap: 0.5rem 1.125rem;
    height: auto;
    display: flex;
}

.tb_radio label,
.tb_check label {
    min-width: fit-content;
}

select, input[type="text"], input[type="datetime-local"], input[type="date"], input[type="time"], input[type="password"], input[type="tel"], input[type="email"], input[type="number"] {
    width: 100%;
    height: var(--px55);
    font-size: var(--fs16);
    color: var(--black);
    padding: 0 var(--px20);
    border: 1px solid var(--border);
}
select:disabled {
    opacity: 1.0;
    background-color: #fafafa;
}

input[type="file"] {
    height: var(--px60);
    padding: 0 var(--px20);
    border: 1px solid #ddd;
    font-size: var(--fs16);
    color: #555;
    width: 100%;
    align-content: center;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

textarea {
    width: 100%;
    height: var(--px150);
    padding: var(--px12) var(--px18);
    border: 1px solid var(--border);
    font-size: var(--fs16);
    color: #555;
    resize: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.phone-number::after {
 content: "-";
}

.phone-number::after:last-of-type {
 content: none;
}

.tit-text {
    color: var(--primary);
    font-weight: 600;
}


/* 이미지 미리보기 ***************************************************/
#imageOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container {
    max-width: 90%;
    max-height: 90%;
    position: relative;
}

.preview-image {
    max-width: 100%;
    max-height: calc(90vh - 40px);
    object-fit: contain;
    display: block;
}

/* ajax 요청 화면 잠금 ***************************************************/
#loadingOverlay {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
 z-index: 1000; /* 다른 요소 위에 표시 */
 display: flex;
 align-items: center;
 justify-content: center;
}

.spinner {
 border: 8px solid rgba(255, 255, 255, 0.3);
 border-top: 8px solid white;
 border-radius: 50%;
 width: 50px;
 height: 50px;
 animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
}

/* 페이징 ***************************************************/
.paging {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.paging ul {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.paging li {
    margin: 0 5px;
}

.paging a {
    text-decoration: none;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 5px;
    transition: all 0.3s ease;
    font-weight: 600;
}

.paging a.active {
    background-color: var(--primary);
    color: white;
    font-weight: bold;
}

.paging i {
    margin-top: 0;
    font-size: 18px;
}

/* 에디터 ***************************************************/
.editor {
    display: flex;
    flex-direction: column;
    gap: var(--px10);
    background-color: #fff;
    width: 100%;
    padding: var(--px30);
}
.editor_wrap .quill_editor {
    height: 35rem;
    display: flex;
    flex-direction: column;
}

.quill_editor .ql-toolbar{
    background-color: #fff;
}
.quill_editor .ql-container{
    background-color: #fff;
    overflow: auto;
}

.editor h1,
.editor h1 span{
    font-size: var(--fs32) !important;    
}
.editor h2,
.editor h2 span{
    font-size: var(--fs28) !important;    
}
.editor p{
    font-size: var(--fs18) !important;    
}

.editor strong{
    font-weight: 600;
}

.editor em{
    font-style: italic;
}

.quill_table{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 50px;
    flex: 0 0 50px;
}

.quill_table input{
    width: var(--px150);
}

.quill_table button{
    background-color: #efefef;
    height: var(--px55);
    padding: 0 2rem;
}

#table-controls {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#table-controls > * {
    margin: 0 5px;
}

#table-style {
    padding: 5px;
}

.header-style-preview {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    vertical-align: middle;
    border: 1px solid #ddd;
}

.ql-editor table tr:first-child td {
    background-color: #f8f9fb !important;
    font-weight: 600 !important;
}

.ql-editor table * {
    font-weight: 400;
}

.ql-editor table tr td:first-child {
    width: 30% !important;
    border-radius: 0;
}

.ql-editor table tr td {
    padding: 1rem !important;
    border: 1px solid #dedede !important;
}

#table-action-buttons {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0;
    display: flex;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    position: absolute;
    display: none;
    z-index: 1000;
}

#table-action-buttons button {
    border: none;
    padding: 8px 16px;
    font-size: 12px;
    cursor: pointer;
    box-sizing: border-box;
}

#table-action-buttons button:first-child {
    border-right: 1px solid #ccc
}

#table-action-buttons button:hover {
    background-color: #efefef;
}
/* ERROR ***************************************************/
.err-wrap {
    background-color: #fff;
    border-radius: var(--px03);
    padding: 10rem 0;
    margin-top: var(--px20);
    width: 100%;
    margin-bottom: var(--px50);
    box-shadow: 0 2px 10px 0 rgba(165, 180, 200, .15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--px10);
}

.err-wrap h3 {
    font-size: var(--fs30);
    color: var(--gray-400);
    font-weight: 700;
    margin-bottom: -15px;
}

.err-wrap h2 {
    font-size: var(--fs42);
    color: #245b81;
    font-weight: 600;
}

.err-wrap p {
    font-size: 18px;
    color: #555;
}

.err-wrap a {
    margin-top: var(--px10);
    text-align: center;
    display: inline-block;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    padding: 1.0rem 0;
    width: var(--px130);
    border-radius: var(--px03);
    background-color: var(--primary);
}

/* 공용 class ******************************************************************/
.click { cursor: pointer !important; }

/* display 속성 */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.ib { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }
.fl { float: left; }
.fr { float: right; }
.fn { float: none; }

.flex_none { flex:none; }
.row { flex-direction: row; }
.col { flex-direction: column; }
.wrap { flex-wrap: wrap; }
.nowrap { flex-wrap: nowrap; }

.jc { justify-content: center; }
.jsb { justify-content: space-between; }
.jsa { justify-content: space-around; }
.js { justify-content: start; }
.je { justify-content: end; }

.aic { align-items: center; }
.ais { align-items: start; }
.aie { align-items: end; }
.ais { align-items: stretch; }


/* 커서속성 */
.cd {cursor: default !important;}
.cp {cursor: pointer !important;}

/* 텍스트 정렬 */
.tr {text-align: right !important;}
.tl {text-align: left !important;}
.tc {text-align: center !important;}

/* 포인트 컬러 */
.color_gray { color: var(--gray-600) !important;}

/* 선 */
.ba_1 {border: 1px solid var(--border);}
.bb_1 {border-bottom: 1px solid var(--border); padding-bottom: var(--px20);}
.bl_1 {border-left: 1px solid var(--border);}
.br_1 {border-right: 1px solid var(--border);}
.bt_1 {border-top: 1px solid var(--border);}

/* gap */
.gap-d-10 {display: flex; justify-content: center; align-items: center; gap: var(--px10);}
.gap-dc-10 {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--px10);}
.gap-d-20 {display: flex; justify-content: center; align-items: center; gap: var(--px20);}
.gap-dc-20 {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--px20);}


/* 반응형
========================================================================== */
/* 패딩 전체 */
.p-10 { padding: 0.625rem; }        /* 10px */
.p-20 { padding: 1.25rem; }         /* 20px */
.p-30 { padding: 1.875rem; }        /* 30px */
.p-40 { padding: 2.5rem; }          /* 40px */
.p-50 { padding: 3.125rem; }        /* 50px */
.p-60 { padding: 3.75rem; }         /* 60px */
.p-70 { padding: 4.375rem; }        /* 70px */
.p-80 { padding: 5rem; }            /* 80px */
.p-90 { padding: 5.625rem; }        /* 90px */
.p-100 { padding: 6.25rem; }        /* 100px */
.p-110 { padding: 6.875rem; }       /* 110px */
.p-120 { padding: 7.5rem; }         /* 120px */
.p-130 { padding: 8.125rem; }       /* 130px */
.p-140 { padding: 8.75rem; }        /* 140px */
.p-150 { padding: 9.375rem; }       /* 150px */
.p-160 { padding: 10rem; }          /* 160px */
.p-170 { padding: 10.625rem; }      /* 170px */
.p-180 { padding: 11.25rem; }       /* 180px */
.p-190 { padding: 11.875rem; }      /* 190px */
.p-200 { padding: 12.5rem; }        /* 200px */

/* 패딩 좌우 */
.px-10 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-20 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-30 { padding-left: 1.875rem; padding-right: 1.875rem; }
.px-40 { padding-left: 2.5rem; padding-right: 2.5rem; }
.px-50 { padding-left: 3.125rem; padding-right: 3.125rem; }
.px-60 { padding-left: 3.75rem; padding-right: 3.75rem; }
.px-70 { padding-left: 4.375rem; padding-right: 4.375rem; }
.px-80 { padding-left: 5rem; padding-right: 5rem; }
.px-90 { padding-left: 5.625rem; padding-right: 5.625rem; }
.px-100 { padding-left: 6.25rem; padding-right: 6.25rem; }
.px-110 { padding-left: 6.875rem; padding-right: 6.875rem; }
.px-120 { padding-left: 7.5rem; padding-right: 7.5rem; }
.px-130 { padding-left: 8.125rem; padding-right: 8.125rem; }
.px-140 { padding-left: 8.75rem; padding-right: 8.75rem; }
.px-150 { padding-left: 9.375rem; padding-right: 9.375rem; }
.px-160 { padding-left: 10rem; padding-right: 10rem; }
.px-170 { padding-left: 10.625rem; padding-right: 10.625rem; }
.px-180 { padding-left: 11.25rem; padding-right: 11.25rem; }
.px-190 { padding-left: 11.875rem; padding-right: 11.875rem; }
.px-200 { padding-left: 12.5rem; padding-right: 12.5rem; }

/* 패딩 상하 */
.py-10 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-20 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-30 { padding-top: 1.875rem; padding-bottom: 1.875rem; }
.py-40 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-50 { padding-top: 3.125rem; padding-bottom: 3.125rem; }
.py-60 { padding-top: 3.75rem; padding-bottom: 3.75rem; }
.py-70 { padding-top: 4.375rem; padding-bottom: 4.375rem; }
.py-80 { padding-top: 5rem; padding-bottom: 5rem; }
.py-90 { padding-top: 5.625rem; padding-bottom: 5.625rem; }
.py-100 { padding-top: 6.25rem; padding-bottom: 6.25rem; }
.py-110 { padding-top: 6.875rem; padding-bottom: 6.875rem; }
.py-120 { padding-top: 7.5rem; padding-bottom: 7.5rem; }
.py-130 { padding-top: 8.125rem; padding-bottom: 8.125rem; }
.py-140 { padding-top: 8.75rem; padding-bottom: 8.75rem; }
.py-150 { padding-top: 9.375rem; padding-bottom: 9.375rem; }
.py-160 { padding-top: 10rem; padding-bottom: 10rem; }
.py-170 { padding-top: 10.625rem; padding-bottom: 10.625rem; }
.py-180 { padding-top: 11.25rem; padding-bottom: 11.25rem; }
.py-190 { padding-top: 11.875rem; padding-bottom: 11.875rem; }
.py-200 { padding-top: 12.5rem; padding-bottom: 12.5rem; }

/* Top */
.pt-0  { padding-top: 0 !important; }
.pt-5  { padding-top: 0.3125rem !important; }    /* 5px */
.pt-10 { padding-top: 0.625rem !important; }     /* 10px */
.pt-15 { padding-top: 0.9375rem !important; }    /* 15px */
.pt-20 { padding-top: 1.25rem !important; }      /* 20px */
.pt-25 { padding-top: 1.5625rem !important; }    /* 25px */
.pt-30 { padding-top: 1.875rem !important; }     /* 30px */
.pt-35 { padding-top: 2.1875rem !important; }    /* 35px */
.pt-40 { padding-top: 2.5rem !important; }       /* 40px */
.pt-45 { padding-top: 2.8125rem !important; }    /* 45px */
.pt-50 { padding-top: 3.125rem !important; }     /* 50px */

/* Right */
.pr-0  { padding-right: 0 !important; }
.pr-5  { padding-right: 0.3125rem !important; }  /* 5px */
.pr-10 { padding-right: 0.625rem !important; }   /* 10px */
.pr-15 { padding-right: 0.9375rem !important; }  /* 15px */
.pr-20 { padding-right: 1.25rem !important; }    /* 20px */
.pr-25 { padding-right: 1.5625rem !important; }  /* 25px */
.pr-30 { padding-right: 1.875rem !important; }   /* 30px */
.pr-35 { padding-right: 2.1875rem !important; }  /* 35px */
.pr-40 { padding-right: 2.5rem !important; }     /* 40px */
.pr-45 { padding-right: 2.8125rem !important; }  /* 45px */
.pr-50 { padding-right: 3.125rem !important; }   /* 50px */

/* Bottom */
.pb-0  { padding-bottom: 0 !important; }
.pb-5  { padding-bottom: 0.3125rem !important; } /* 5px */
.pb-10 { padding-bottom: 0.625rem !important; }  /* 10px */
.pb-15 { padding-bottom: 0.9375rem !important; } /* 15px */
.pb-20 { padding-bottom: 1.25rem !important; }   /* 20px */
.pb-25 { padding-bottom: 1.5625rem !important; } /* 25px */
.pb-30 { padding-bottom: 1.875rem !important; }  /* 30px */
.pb-35 { padding-bottom: 2.1875rem !important; } /* 35px */
.pb-40 { padding-bottom: 2.5rem !important; }    /* 40px */
.pb-45 { padding-bottom: 2.8125rem !important; } /* 45px */
.pb-50 { padding-bottom: 3.125rem !important; }  /* 50px */

/* Left */
.pl-0  { padding-left: 0 !important; }
.pl-5  { padding-left: 0.3125rem !important; }   /* 5px */
.pl-10 { padding-left: 0.625rem !important; }    /* 10px */
.pl-15 { padding-left: 0.9375rem !important; }   /* 15px */
.pl-20 { padding-left: 1.25rem !important; }     /* 20px */
.pl-25 { padding-left: 1.5625rem !important; }   /* 25px */
.pl-30 { padding-left: 1.875rem !important; }    /* 30px */
.pl-35 { padding-left: 2.1875rem !important; }   /* 35px */
.pl-40 { padding-left: 2.5rem !important; }      /* 40px */
.pl-45 { padding-left: 2.8125rem !important; }   /* 45px */
.pl-50 { padding-left: 3.125rem !important; }    /* 50px */


/* 마진 전체 */
.m-10 { margin: 0.625rem; }        /* 10px */
.m-20 { margin: 1.25rem; }         /* 20px */
.m-30 { margin: 1.875rem; }        /* 30px */
.m-40 { margin: 2.5rem; }          /* 40px */
.m-50 { margin: 3.125rem; }        /* 50px */
.m-60 { margin: 3.75rem; }         /* 60px */
.m-70 { margin: 4.375rem; }        /* 70px */
.m-80 { margin: 5rem; }            /* 80px */
.m-90 { margin: 5.625rem; }        /* 90px */
.m-100 { margin: 6.25rem; }        /* 100px */
.m-110 { margin: 6.875rem; }       /* 110px */
.m-120 { margin: 7.5rem; }         /* 120px */
.m-130 { margin: 8.125rem; }       /* 130px */
.m-140 { margin: 8.75rem; }        /* 140px */
.m-150 { margin: 9.375rem; }       /* 150px */
.m-160 { margin: 10rem; }          /* 160px */
.m-170 { margin: 10.625rem; }      /* 170px */
.m-180 { margin: 11.25rem; }       /* 180px */
.m-190 { margin: 11.875rem; }      /* 190px */
.m-200 { margin: 12.5rem; }        /* 200px */
.mm-10 { margin: -0.625rem; }        /* 10px */
.mm-20 { margin: -1.25rem; }         /* 20px */
.mm-30 { margin: -1.875rem; }        /* 30px */
.mm-40 { margin: -2.5rem; }          /* 40px */
.mm-50 { margin: -3.125rem; }        /* 50px */
.mm-60 { margin: -3.75rem; }         /* 60px */
.mm-70 { margin: -4.375rem; }        /* 70px */
.mm-80 { margin: -5rem; }            /* 80px */
.mm-90 { margin: -5.625rem; }        /* 90px */
.mm-100 { margin: -6.25rem; }        /* 100px */
.mm-110 { margin: -6.875rem; }       /* 110px */
.mm-120 { margin: -7.5rem; }         /* 120px */
.mm-130 { margin: -8.125rem; }       /* 130px */
.mm-140 { margin: -8.75rem; }        /* 140px */
.mm-150 { margin: -9.375rem; }       /* 150px */
.mm-160 { margin: -10rem; }          /* 160px */
.mm-170 { margin: -10.625rem; }      /* 170px */
.mm-180 { margin: -11.25rem; }       /* 180px */
.mm-190 { margin: -11.875rem; }      /* 190px */
.mm-200 { margin: -12.5rem; }        /* 200px */

/* 마진 좌우 */
.mx-10 { margin-left: 0.625rem; margin-right: 0.625rem; }
.mx-20 { margin-left: 1.25rem; margin-right: 1.25rem; }
.mx-30 { margin-left: 1.875rem; margin-right: 1.875rem; }
.mx-40 { margin-left: 2.5rem; margin-right: 2.5rem; }
.mx-50 { margin-left: 3.125rem; margin-right: 3.125rem; }
.mx-60 { margin-left: 3.75rem; margin-right: 3.75rem; }
.mx-70 { margin-left: 4.375rem; margin-right: 4.375rem; }
.mx-80 { margin-left: 5rem; margin-right: 5rem; }
.mx-90 { margin-left: 5.625rem; margin-right: 5.625rem; }
.mx-100 { margin-left: 6.25rem; margin-right: 6.25rem; }
.mx-110 { margin-left: 6.875rem; margin-right: 6.875rem; }
.mx-120 { margin-left: 7.5rem; margin-right: 7.5rem; }
.mx-130 { margin-left: 8.125rem; margin-right: 8.125rem; }
.mx-140 { margin-left: 8.75rem; margin-right: 8.75rem; }
.mx-150 { margin-left: 9.375rem; margin-right: 9.375rem; }
.mx-160 { margin-left: 10rem; margin-right: 10rem; }
.mx-170 { margin-left: 10.625rem; margin-right: 10.625rem; }
.mx-180 { margin-left: 11.25rem; margin-right: 11.25rem; }
.mx-190 { margin-left: 11.875rem; margin-right: 11.875rem; }
.mx-200 { margin-left: 12.5rem; margin-right: 12.5rem; }

/* 마진 상하 */
.my-10 { margin-top: 0.625rem; margin-bottom: 0.625rem; }
.my-20 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.my-30 { margin-top: 1.875rem; margin-bottom: 1.875rem; }
.my-40 { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.my-50 { margin-top: 3.125rem; margin-bottom: 3.125rem; }
.my-60 { margin-top: 3.75rem; margin-bottom: 3.75rem; }
.my-70 { margin-top: 4.375rem; margin-bottom: 4.375rem; }
.my-80 { margin-top: 5rem; margin-bottom: 5rem; }
.my-90 { margin-top: 5.625rem; margin-bottom: 5.625rem; }
.my-100 { margin-top: 6.25rem; margin-bottom: 6.25rem; }
.my-110 { margin-top: 6.875rem; margin-bottom: 6.875rem; }
.my-120 { margin-top: 7.5rem; margin-bottom: 7.5rem; }
.my-130 { margin-top: 8.125rem; margin-bottom: 8.125rem; }
.my-140 { margin-top: 8.75rem; margin-bottom: 8.75rem; }
.my-150 { margin-top: 9.375rem; margin-bottom: 9.375rem; }
.my-160 { margin-top: 10rem; margin-bottom: 10rem; }
.my-170 { margin-top: 10.625rem; margin-bottom: 10.625rem; }
.my-180 { margin-top: 11.25rem; margin-bottom: 11.25rem; }
.my-190 { margin-top: 11.875rem; margin-bottom: 11.875rem; }
.my-200 { margin-top: 12.5rem; margin-bottom: 12.5rem; }

/* Top */
.mt-0  { margin-top: 0 !important; }
.mt-5  { margin-top: 0.3125rem !important; }    /* 5px */
.mt-10 { margin-top: 0.625rem !important; }     /* 10px */
.mt-15 { margin-top: 0.9375rem !important; }    /* 15px */
.mt-20 { margin-top: 1.25rem !important; }      /* 20px */
.mt-25 { margin-top: 1.5625rem !important; }    /* 25px */
.mt-30 { margin-top: 1.875rem !important; }     /* 30px */
.mt-35 { margin-top: 2.1875rem !important; }    /* 35px */
.mt-40 { margin-top: 2.5rem !important; }       /* 40px */
.mt-45 { margin-top: 2.8125rem !important; }    /* 45px */
.mt-50 { margin-top: 3.125rem !important; }     /* 50px */

/* Right */
.mr-0  { margin-right: 0 !important; }
.mr-5  { margin-right: 0.3125rem !important; }  /* 5px */
.mr-10 { margin-right: 0.625rem !important; }   /* 10px */
.mr-15 { margin-right: 0.9375rem !important; }  /* 15px */
.mr-20 { margin-right: 1.25rem !important; }    /* 20px */
.mr-25 { margin-right: 1.5625rem !important; }  /* 25px */
.mr-30 { margin-right: 1.875rem !important; }   /* 30px */
.mr-35 { margin-right: 2.1875rem !important; }  /* 35px */
.mr-40 { margin-right: 2.5rem !important; }     /* 40px */
.mr-45 { margin-right: 2.8125rem !important; }  /* 45px */
.mr-50 { margin-right: 3.125rem !important; }   /* 50px */

/* Bottom */
.mb-0  { margin-bottom: 0 !important; }
.mb-5  { margin-bottom: 0.3125rem !important; } /* 5px */
.mb-10 { margin-bottom: 0.625rem !important; }  /* 10px */
.mb-15 { margin-bottom: 0.9375rem !important; } /* 15px */
.mb-20 { margin-bottom: 1.25rem !important; }   /* 20px */
.mb-25 { margin-bottom: 1.5625rem !important; } /* 25px */
.mb-30 { margin-bottom: 1.875rem !important; }  /* 30px */
.mb-35 { margin-bottom: 2.1875rem !important; } /* 35px */
.mb-40 { margin-bottom: 2.5rem !important; }    /* 40px */
.mb-45 { margin-bottom: 2.8125rem !important; } /* 45px */
.mb-50 { margin-bottom: 3.125rem !important; }  /* 50px */

/* Left */
.ml-0  { margin-left: 0 !important; }
.ml-5  { margin-left: 0.3125rem !important; }   /* 5px */
.ml-10 { margin-left: 0.625rem !important; }    /* 10px */
.ml-15 { margin-left: 0.9375rem !important; }   /* 15px */
.ml-20 { margin-left: 1.25rem !important; }     /* 20px */
.ml-25 { margin-left: 1.5625rem !important; }   /* 25px */
.ml-30 { margin-left: 1.875rem !important; }    /* 30px */
.ml-35 { margin-left: 2.1875rem !important; }   /* 35px */
.ml-40 { margin-left: 2.5rem !important; }      /* 40px */
.ml-45 { margin-left: 2.8125rem !important; }   /* 45px */
.ml-50 { margin-left: 3.125rem !important; }    /* 50px */

/* 가로 % 사이즈 */
.w-1-p { width: 1% !important; }
.w-2-p { width: 2% !important; }
.w-3-p { width: 3% !important; }
.w-4-p { width: 4% !important; }
.w-5-p { width: 5% !important; }
.w-6-p { width: 6% !important; }
.w-7-p { width: 7% !important; }
.w-8-p { width: 8% !important; }
.w-9-p { width: 9% !important; }
.w-10-p { width: 10% !important; }
.w-11-p { width: 11% !important; }
.w-12-p { width: 12% !important; }
.w-13-p { width: 13% !important; }
.w-14-p { width: 14% !important; }
.w-15-p { width: 15% !important; }
.w-16-p { width: 16% !important; }
.w-17-p { width: 17% !important; }
.w-18-p { width: 18% !important; }
.w-19-p { width: 19% !important; }
.w-20-p { width: 20% !important; }
.w-21-p { width: 21% !important; }
.w-22-p { width: 22% !important; }
.w-23-p { width: 23% !important; }
.w-24-p { width: 24% !important; }
.w-25-p { width: 25% !important; }
.w-26-p { width: 26% !important; }
.w-27-p { width: 27% !important; }
.w-28-p { width: 28% !important; }
.w-29-p { width: 29% !important; }
.w-30-p { width: 30% !important; }
.w-31-p { width: 31% !important; }
.w-32-p { width: 32% !important; }
.w-33-p { width: 33% !important; }
.w-34-p { width: 34% !important; }
.w-35-p { width: 35% !important; }
.w-36-p { width: 36% !important; }
.w-37-p { width: 37% !important; }
.w-38-p { width: 38% !important; }
.w-39-p { width: 39% !important; }
.w-40-p { width: 40% !important; }
.w-41-p { width: 41% !important; }
.w-42-p { width: 42% !important; }
.w-43-p { width: 43% !important; }
.w-44-p { width: 44% !important; }
.w-45-p { width: 45% !important; }
.w-46-p { width: 46% !important; }
.w-47-p { width: 47% !important; }
.w-48-p { width: 48% !important; }
.w-49-p { width: 49% !important; }
.w-50-p { width: 50% !important; }
.w-51-p { width: 51% !important; }
.w-52-p { width: 52% !important; }
.w-53-p { width: 53% !important; }
.w-54-p { width: 54% !important; }
.w-55-p { width: 55% !important; }
.w-56-p { width: 56% !important; }
.w-57-p { width: 57% !important; }
.w-58-p { width: 58% !important; }
.w-59-p { width: 59% !important; }
.w-60-p { width: 60% !important; }
.w-61-p { width: 61% !important; }
.w-62-p { width: 62% !important; }
.w-63-p { width: 63% !important; }
.w-64-p { width: 64% !important; }
.w-65-p { width: 65% !important; }
.w-66-p { width: 66% !important; }
.w-67-p { width: 67% !important; }
.w-68-p { width: 68% !important; }
.w-69-p { width: 69% !important; }
.w-70-p { width: 70% !important; }
.w-71-p { width: 71% !important; }
.w-72-p { width: 72% !important; }
.w-73-p { width: 73% !important; }
.w-74-p { width: 74% !important; }
.w-75-p { width: 75% !important; }
.w-76-p { width: 76% !important; }
.w-77-p { width: 77% !important; }
.w-78-p { width: 78% !important; }
.w-79-p { width: 79% !important; }
.w-80-p { width: 80% !important; }
.w-81-p { width: 81% !important; }
.w-82-p { width: 82% !important; }
.w-83-p { width: 83% !important; }
.w-84-p { width: 84% !important; }
.w-85-p { width: 85% !important; }
.w-86-p { width: 86% !important; }
.w-87-p { width: 87% !important; }
.w-88-p { width: 88% !important; }
.w-89-p { width: 89% !important; }
.w-90-p { width: 90% !important; }
.w-91-p { width: 91% !important; }
.w-92-p { width: 92% !important; }
.w-93-p { width: 93% !important; }
.w-94-p { width: 94% !important; }
.w-95-p { width: 95% !important; }
.w-96-p { width: 96% !important; }
.w-97-p { width: 97% !important; }
.w-98-p { width: 98% !important; }
.w-99-p { width: 99% !important; }
.w-100-p { width: 100% !important; }

.w-auto { width: auto !important; }
.w-10 { width: 0.625rem !important; }     /* 10px */
.w-20 { width: 1.25rem !important; }      /* 20px */
.w-25 { width: 1.5625rem !important; }    /* 25px */
.w-30 { width: 1.875rem !important; }     /* 30px */
.w-40 { width: 2.5rem !important; }       /* 40px */
.w-50 { width: 3.125rem !important; }     /* 50px */
.w-60 { width: 3.75rem !important; }      /* 60px */
.w-70 { width: 4.375rem !important; }     /* 70px */
.w-80 { width: 5rem !important; }         /* 80px */
.w-90 { width: 5.625rem !important; }     /* 90px */
.w-100 { width: 6.25rem !important; }     /* 100px */
.w-110 { width: 6.875rem !important; }    /* 110px */
.w-120 { width: 7.5rem !important; }      /* 120px */
.w-130 { width: 8.125rem !important; }    /* 130px */
.w-140 { width: 8.75rem !important; }     /* 140px */
.w-150 { width: 9.375rem !important; }    /* 150px */
.w-160 { width: 10rem !important; }       /* 160px */
.w-170 { width: 10.625rem !important; }   /* 170px */
.w-180 { width: 11.25rem !important; }    /* 180px */
.w-190 { width: 11.875rem !important; }   /* 190px */
.w-200 { width: 12.5rem !important; }     /* 200px */
.w-210 { width: 13.125rem !important; }   /* 210px */
.w-220 { width: 13.75rem !important; }    /* 220px */
.w-230 { width: 14.375rem !important; }   /* 230px */
.w-240 { width: 15rem !important; }       /* 240px */
.w-250 { width: 15.625rem !important; }   /* 250px */
.w-260 { width: 16.25rem !important; }    /* 260px */
.w-270 { width: 16.875rem !important; }   /* 270px */
.w-280 { width: 17.5rem !important; }     /* 280px */
.w-290 { width: 18.125rem !important; }   /* 290px */
.w-300 { width: 18.75rem !important; }    /* 300px */
.w-310 { width: 19.375rem !important; }   /* 310px */
.w-320 { width: 20rem !important; }       /* 320px */
.w-330 { width: 20.625rem !important; }   /* 330px */
.w-340 { width: 21.25rem !important; }    /* 340px */
.w-350 { width: 21.875rem !important; }   /* 350px */
.w-360 { width: 22.5rem !important; }     /* 360px */
.w-370 { width: 23.125rem !important; }   /* 370px */
.w-380 { width: 23.75rem !important; }    /* 380px */
.w-390 { width: 24.375rem !important; }   /* 390px */
.w-400 { width: 25rem !important; }       /* 400px */
.w-410 { width: 25.625rem !important; }   /* 410px */
.w-420 { width: 26.25rem !important; }    /* 420px */
.w-430 { width: 26.875rem !important; }   /* 430px */
.w-440 { width: 27.5rem !important; }     /* 440px */
.w-450 { width: 28.125rem !important; }   /* 450px */
.w-460 { width: 28.75rem !important; }    /* 460px */
.w-470 { width: 29.375rem !important; }   /* 470px */
.w-480 { width: 30rem !important; }       /* 480px */
.w-490 { width: 30.625rem !important; }   /* 490px */
.w-500 { width: 31.25rem !important; }    /* 500px */



/* 높이 % 사이즈 */
.h-1 { height: 1% !important; }
.h-2 { height: 2% !important; }
.h-3 { height: 3% !important; }
.h-4 { height: 4% !important; }
.h-5 { height: 5% !important; }
.h-6 { height: 6% !important; }
.h-7 { height: 7% !important; }
.h-8 { height: 8% !important; }
.h-9 { height: 9% !important; }
.h-10 { height: 10% !important; }
.h-11 { height: 11% !important; }
.h-12 { height: 12% !important; }
.h-13 { height: 13% !important; }
.h-14 { height: 14% !important; }
.h-15 { height: 15% !important; }
.h-16 { height: 16% !important; }
.h-17 { height: 17% !important; }
.h-18 { height: 18% !important; }
.h-19 { height: 19% !important; }
.h-20 { height: 20% !important; }
.h-21 { height: 21% !important; }
.h-22 { height: 22% !important; }
.h-23 { height: 23% !important; }
.h-24 { height: 24% !important; }
.h-25 { height: 25% !important; }
.h-26 { height: 26% !important; }
.h-27 { height: 27% !important; }
.h-28 { height: 28% !important; }
.h-29 { height: 29% !important; }
.h-30 { height: 30% !important; }
.h-31 { height: 31% !important; }
.h-32 { height: 32% !important; }
.h-33 { height: 33% !important; }
.h-34 { height: 34% !important; }
.h-35 { height: 35% !important; }
.h-36 { height: 36% !important; }
.h-37 { height: 37% !important; }
.h-38 { height: 38% !important; }
.h-39 { height: 39% !important; }
.h-40 { height: 40% !important; }
.h-41 { height: 41% !important; }
.h-42 { height: 42% !important; }
.h-43 { height: 43% !important; }
.h-44 { height: 44% !important; }
.h-45 { height: 45% !important; }
.h-46 { height: 46% !important; }
.h-47 { height: 47% !important; }
.h-48 { height: 48% !important; }
.h-49 { height: 49% !important; }
.h-50 { height: 50% !important; }
.h-51 { height: 51% !important; }
.h-52 { height: 52% !important; }
.h-53 { height: 53% !important; }
.h-54 { height: 54% !important; }
.h-55 { height: 55% !important; }
.h-56 { height: 56% !important; }
.h-57 { height: 57% !important; }
.h-58 { height: 58% !important; }
.h-59 { height: 59% !important; }
.h-60 { height: 60% !important; }
.h-61 { height: 61% !important; }
.h-62 { height: 62% !important; }
.h-63 { height: 63% !important; }
.h-64 { height: 64% !important; }
.h-65 { height: 65% !important; }
.h-66 { height: 66% !important; }
.h-67 { height: 67% !important; }
.h-68 { height: 68% !important; }
.h-69 { height: 69% !important; }
.h-70 { height: 70% !important; }
.h-71 { height: 71% !important; }
.h-72 { height: 72% !important; }
.h-73 { height: 73% !important; }
.h-74 { height: 74% !important; }
.h-75 { height: 75% !important; }
.h-76 { height: 76% !important; }
.h-77 { height: 77% !important; }
.h-78 { height: 78% !important; }
.h-79 { height: 79% !important; }
.h-80 { height: 80% !important; }
.h-81 { height: 81% !important; }
.h-82 { height: 82% !important; }
.h-83 { height: 83% !important; }
.h-84 { height: 84% !important; }
.h-85 { height: 85% !important; }
.h-86 { height: 86% !important; }
.h-87 { height: 87% !important; }
.h-88 { height: 88% !important; }
.h-89 { height: 89% !important; }
.h-90 { height: 90% !important; }
.h-91 { height: 91% !important; }
.h-92 { height: 92% !important; }
.h-93 { height: 93% !important; }
.h-94 { height: 94% !important; }
.h-95 { height: 95% !important; }
.h-96 { height: 96% !important; }
.h-97 { height: 97% !important; }
.h-98 { height: 98% !important; }
.h-99 { height: 99% !important; }
.h-100 { height: 100% !important; }