:root{
--N10: #fafafb;
--N20: #f5f6f6;
--N30: #ecedee;
--N40: #e0e1e3;
--N50: #c3c6c9;
--N60: #b5b8bc;
--N70: #a9adb2;
--N80: #9b9fa5;
--N90: #8c9198;
--N100: #7e838b;
--N200: #70767e;
--N300: #616871;
--N400: #555c66;
--N500: #474f59;
--N600: #3b434f;
--N700: #2a3340;
--N800: #1c2533;
--N900: #101a28;
--B10: #f0f7ff;
--B50: #ebf0fa;
--B75: #abc2e8;
--B100: #88a8df;
--B200: #5583d1;
--B300: #3269c8;
--B400: #234a8c;
--B500: #1f407a;
--R10: #fff3f2;
--R50: #fee9e6;
--R100: #fed3cd;
--R200: #fdb4aa;
--R300: #fc8979;
--R400: #fb6a57;
--R500: #fa4f38;
--R600: #f93015;
--R700: #e01f06;
--R800: #c71c05;
--R900: #b31905;
--Y10: #fffbe8;
--Y50: #fff8d6;
--Y100: #fff2b2;
--Y200: #ffeb84;
--Y300: #ffe047;
--Y400: #fad500;
--Y500: #ffc400;
--Y600: #ffab00;
--Y700: #ff991f;
--Y800: #f08c00;
--Y900: #e67b00;
--G10: #f2faf7;
--G50: #e4f6ef;
--G100: #c9eddf;
--G200: #a9e5cc;
--G300: #82d9b5;
--G400: #4eca97;
--G500: #37b983;
--G600: #31a575;
--G700: #2a8d64;
--G800: #267e59;
--G900: #227251;

--hover: rgba(177, 186, 202, 0.1);
--TD000: rgba(0, 0, 0, 0);
--TD004: rgba(0, 0, 0, 0.04);
--TD006: rgba(0, 0, 0, 0.06);
--TD015: rgba(0, 0, 0, 0.15);
--TD030: rgba(0, 0, 0, 0.3);
--TD054: rgba(0, 0, 0, 0.54);
--TD068: rgba(0, 0, 0, 0.68);
--TD084: rgba(0, 0, 0, 0.84);
--TL000: rgba(255, 255, 255, 0);
--TL004: rgba(255, 255, 255, 0.04);
--TL006: rgba(255, 255, 255, 0.06);
--TL015: rgba(255, 255, 255, 0.15);
--TL030: rgba(255, 255, 255, 0.3);
--TL054: rgba(255, 255, 255, 0.54);
--TL068: rgba(255, 255, 255, 0.68);
--TL084: rgba(255, 255, 255, 0.84);
}



/* 단축css */
.width100{width:100% !important;}
.width95{width:95% !important;}
.width90{width:90% !important;}
.width85{width:85% !important;}
.width80{width:80% !important;}
.width75{width:75% !important;}
.width70{width:70% !important;}
.width65{width:65% !important;}
.width60{width:60% !important;}
.width55{width:55% !important;}
.width50{width:50% !important;}
.width45{width:45% !important;}
.width40{width:40% !important;}
.width35{width:35% !important;}
.width30{width:30% !important;}
.width25{width:25% !important;}
.width20{width:20% !important;}
.width15{width:15% !important;}
.width10{width:10% !important;}
.width5{width:5% !important;}

.font-xi:before{font-family:xeicon !important}
.btn.round{border-radius:25px !important;}
.notice-box{padding:.5rem; background:var(--N30); color:var(--N90); border-radius:5px; display:flex; justify-content:space-around; align-items:center; font-size:0.85rem;}
.notice-box .box-icon{width:20px;}
.notice-box p{margin:0; padding:0}
.notice-txt{color:var(--N90);font-size:0.9rem; margin:.5em 0;}
.hl-txt{font-weight:700; color:var(--bs-primary)}
.bottom-btn{position:relative; bottom:0; left:0; width:100%;  text-align: center; padding-top:2em; padding-bottom:10%; background:#fff;}
.bottom-btn a{color:#fff !important;}
.bottom-btn.double{display:Flex; justify-content:space-between;}
.bottom-btn.double button{width:48%;}

.fixed-btn{position:absolute; left:0; bottom:6%; width:100%; text-align: center;}

.text-right{text-align:right;}
.text-center{text-align:center;}
.text-left{text-align:left;}
.button-wrap{text-align: center; margin:2rem 0;}



.link-wrap{}
.link-wrap span{color:#999; font-size:0.825rem;}
.link-wrap span a{color:var(--bs-primary)}

.bold900{font-weight:900;}
.bold800{font-weight:800;}
.bold700{font-weight:700;}
.bold600{font-weight: 600;}
.bold500{font-weight: 500;}
.bold400{font-weight: 400;}
.bold300{font-weight: 300;}
.sub-notice-txt{font-size:14px;color:var(--N90);}
.size-sm{font-size:13px;}
.btn.size-sm{padding:0.3rem 0.5rem;}
.bg-white{background:#fff !important}


.header-title{font-size:1.15rem !important;}
.main-title{font-size:1.5rem}
.sub-notice-txt{font-size:0.875rem;color:var(--N90);}
.sub-menu-txt{font-size:0.875rem; font-weight: 400; margin: 1em .5em .5em; color: #778899;}
.boarding-txt{margin-top:10%; font-size:1.75rem;}
body.app h1{font-size:2rem;}
body.app h2{font-size:1.5rem;}
body.app h3{font-size:1.25rem;font-weight:700;}
body.app h4{font-size:1.15rem;}
body.app h5{font-size:1rem;}

.font-06x{font-size:0.6rem !important;}/* 10...px */
.font-07x{font-size:0.7rem !important;}/* 11.2px */
.font-08x{font-size:0.875rem !important;}/* 14.08px */
.font-1x{font-size:1rem !important;}/* 16px */
.font-115x{font-size:1.15rem !important;}/* 18px */
.font-12x{font-size:1.2rem !important;}/* 19.2px */
.font-125x{font-size:1.25rem !important;}/* 20px */
.font-15x{font-size:1.5rem !important;}/* 24px */
.font-175x{font-size:1.75rem !important;}/* 28px */
.font-2x{font-size:2rem !important;}/* 32px */
.font-25x{font-size:2.25rem !important;}/* 36px */
.font-25x{font-size:2.5rem !important;}/* 40px */
.font-3x{font-size:3rem !important;}/* 48px */
.font-325x{font-size:3.25rem !important;}/* 52px */

.radius-xs{border-radius:4px}
.radius-s{border-radius:8px;}
.radius-md{border-radius:12px;}
.radius-l{border-radius:16px;}

.por{position:relative}
.poa{position:absolute;}
/* .devide-area{border-top:8px solid #f5f6f8} */
/* .devide-area:after{content:'';position: absolute; margin-top:0; left:0; height:8px; width:100%; background:#f5f6f8;} */
.divider-area{position:absolute; width:100%; height:10px;  background:#f5f6f8; margin-top:0; left:0;}

.d-flex{display:flex !important;}
.d-flex.center{align-items:center !important;}
.d-flex.between {justify-content:space-between !important;}
.d-flex.justify-center{justify-content:center !important;}

/* body.app{background:#eee;} */
main{background:#fff; max-width:640px; margin:0 auto;padding-top:40px;overflow-x:hidden;}
body.app{font-family:Noto Sans KR, sans-serif !important; font-size:16px;}
/* body.app*:before, body.app*:after{font-family:'Material Symbols Rounded';} */

body.app header{height:40px; position:fixed; top:0; left:0; /* border-bottom:1px solid #eee; */ width:100%; background:#fff;z-index:999;}
body.app header nav {height:100%; padding:1rem; display:flex; justify-content:space-around; align-items:center; transition: background-color 1s ease; font-size:1.5rem;}
body.app header nav .nav-left{position:absolute; left:1rem; top:8px; font-size:1.3rem;}
/* body.app header a{position:absolute; } */
body.app header h1{width:100%; text-align: center; font-size:1.15rem; font-weight:600; width:100%; margin-bottom:0;}
body.app section{height:100%;}
/* body.app section{position: relative; width:100%; height:calc(100vh - 40px);overflow:hidden; transition:all .5s;
	display: flex;
    flex-direction: column;
    justify-content: space-between;} */
body.app section h2{font-weight:600;}
/* body.app i{font-family:xeicon;} */
body.app .container:first-of-type{padding-top:6%}
body.app .container{margin:0 auto; padding:4%;}
/* body.app .container{width:92%; margin:0 auto; padding:6% 0;} */
body.app section ul,section ul li{list-style:none; padding:0; margin:0;}
body.app .boarding-txt{margin-top:10%; font-size:28px;}
body.app .boarding-txt h2{line-height:1.4;}
body.app h3{font-weight:700; letter-spacing:-1px;}



/************************ 
   ajax Loader... style 
 ************************/
.ez-loader-overlay{
	display:table;
	text-align:center;
	width:100%;
	height:100vh;
	background:rgba(0,0,0,0.3);
	position:absolute; z-index:9999999999;
	top:0;
	left:0;
	cursor:wait;
}
.ez-loader-box{
	display:table-cell;
	vertical-align:middle;
	color:#fff;
}
.ez-loader {
	margin:5px;
	display: inline-block;
	border-style:solid;
	border-width:10px;
	border-color:#fff #3498db; /* Blue */
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: ajax-loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.ez-loader-box.small .ez-loader{
	margin:2px;
	border-width:5px;
	width: 18px;
	height: 18px;
}
.ez-loader-box.small .ez-loader-box-message {
	display:none
}
.ez-loader-target {
	position:relative;
}
@keyframes ajax-loader-ring {
	0% { transform: rotate(0deg) }
	100% { transform: rotate(360deg) }
}
/* ajax Loader... style */

::-webkit-scrollbar {width:0px; height:5.2px; }
::-webkit-scrollbar-button:start:decrement {display:none;}
::-webkit-scrollbar-button:end:increment {display:none;}
::-webkit-scrollbar-track { background: #f1f1f1;  border: 1px solid #efefef; border-radius:0 0 7px 0 }
::-webkit-scrollbar-thumb { background:#ddd; border-radius: 10px;}



#make-scrollale {
    position: absolute;
    left: 0;
    width: 1px;
    height: calc(100% + 1px);
}




/*주팀장 추가 2024.10.07*/
.joo-comment {margin-top:1em; background:#ffcc99;font-size:11px; white-space:pre; padding:.4em .6em;overflow-x:auto;}


a:link{ color:#333; text-decoration:none}
a:visited{ color:#333;}
a:hover{ color:#333; font-weight:bold}



/* 구글웹폰트 */
@font-face {
	font-family: 'Material Symbols Rounded';
	font-style: normal;
	font-weight: 100 700;
	src: url('/css/fonts/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2') format('woff2');
	/* src:url('/css/fonts/MaterialIconsRound-Regular.otf') format('otf'); */
}
.material-symbols-rounded {
	font-family: 'Material Symbols Rounded';
	font-weight: normal;
	font-style: normal;
	/* font-size: 24px; */
	/* font-size:1rem; */
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}



/*주팀장 임시용 2024.10.07*/

#deviceData { opacity:.7; width:100%; position:fixed; left:0; top:0; background:#ccc; z-index:100; font-size:11px; padding:3px 10px; border-radius:.5em .5em 0 0; z-index:10000}
#deviceData ul {  margin:0; padding:0 1em}
#deviceData ul li{ border-bottom:1px dotted #ccc; padding:0; margin:0; line-height:1; word-wrap:break-word !important; }


/* 주팀장 구글 심볼폰트 추가 2024.10.23 */
.material-symbols-rounded {color:inherit;font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48;}
.icon-fill, .icon-fill .material-symbols-rounded{font-variation-settings: 'FILL' 1}
.icon-size-inherit, .icon-size-inherit .material-symbols-rounded{ font-size:inherit !important}
.icon-size-10, .icon-size-10 .material-symbols-rounded{ font-size:10px !important}
.icon-size-20, .icon-size-20 .material-symbols-rounded{ font-size:20px !important}
.icon-size-30, .icon-size-30 .material-symbols-rounded{ font-size:30px !important}
.icon-size-40, .icon-size-40 .material-symbols-rounded{ font-size:40px !important}
.icon-size-50, .icon-size-50 .material-symbols-rounded{ font-size:50px !important}
.icon-size-60, .icon-size-60 .material-symbols-rounded{ font-size:60px !important}

.icon-size-16, .icon-size-16 .material-symbols-rounded{ font-size:16px !important}
.icon-size-24, .icon-size-24 .material-symbols-rounded{ font-size:24px !important}
.icon-size-36, .icon-size-36 .material-symbols-rounded{ font-size:36px !important}
.icon-size-48, .icon-size-48 .material-symbols-rounded{ font-size:48px !important}

.color-white {color:white !important; }
.color-blue {color:blue !important; opacity:.7}
.color-green {color:green !important; opacity:.7}
.color-purple {color:purple !important; opacity:.7}





/* media screen */
@media screen and (max-width: 360px ) {
	#login-main{padding-top:30% !important;}
	/* body.app{background:aliceblue;} */
}
@media screen and (max-width: 800px ) {
	#login-main{padding-top:30% !important;}
	/* body.app{background:aliceblue;} */
}