@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 .25rem;
	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 ******************************************************************/
/* 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; }