@charset "UTF-8";

/*
가장 기본이 되는 유니폼과 같은 css 만 여기다 넣자 
----------------------------------------
@import url( http://fonts.googleapis.com/earlyaccess/nanumgothic.css ); "Nanum Gothic"
@import url(http://cdn.jsdelivr.net/gh/joungkyun/font-d2coding/d2coding.css); D2Coding
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.woff2) format('woff2'),
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.ttf) format('truetype');
}
*/
@import url('/static/commons/fonts/NanumGothic/NanumGothic.css');



:root {
	--blue: #e6f0ff;
	--red : #ffe6e6;
	--green: #e6ffee;
	--yellow: #ffffe6;
	
	--th1-bc: black; 
	--th1-fc: white; 
	
	--table-border-color: #d0d0d0; 
	--table-header-bkcolor: #e6ecff;
	--input-border-color: #909090;
	--button-border-color : #a0a0a0;
	--button-bkcolor: #e6ffee;
	--input-height: 30px;
}

html {  height: 100vh;  }

* {
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
		box-sizing: border-box;
		
-webkit-background-clip: border-box;
   -moz-background-clip: border-box;
	    background-clip: border-box;

	margin: 0;
   padding: 0;
   vertical-align: middle ;
   font-family: "NanumGothic", "D2Coding",  "Consolas";
	
}

body, div, section, nav, input, select, span, label, ul, li, option, textarea {
     font-size: 12pt;
}


input[type=text], 
input[type=checkbox],
input[type=radio],
input[type=date],
input[type=datetime],
input[type=number],
input[type=button],
input[type=password],
input[type=datetime-local]   { height: var(--input-height); border: 0.1px solid var(--input-border-color); }

input[type=button] { padding-left:10px; padding-right: 10px; }
input.hover:enabled:hover { background-color: black; color: white; }
input[type=button]:disabled:hover { cursor: url('/static/commons/icon/red-x.png'),auto;  }

input[name]  { padding-left: 5px; padding-right: 5px; }
/*
input:disabled, input:read-only { border: 0.1px solid #d0d0d0!important; }
*/


button  { 
	border: 0.1px solid var(--button-border-color);
	background-color:  var(--button-bkcolor);
	text-align: center;
}
button.hover:enabled:hover { background-color: black; color: white; }
button:disabled:hover { cursor: url('/static/commons/icon/red-x.png'),auto;  }

select { 
	height: var(--input-height); 
	border: 0.1px solid var(--input-border-color); 
}
select[name] { padding-left: 5px; }

textarea {
	-moz-tab-size: 4; /* Firefox */
	  -o-tab-size: 4; /* Opera 10.6+ */
	     tab-size: 4; /* Standard */
		 padding: 5px; 
		 line-height: 1.3rem; 
}


input:disabled, select:disabled, textarea:disabled { border: none; }
input:readonly, select:readonly, textarea:readonly { border: none; }
[data-crud=d] { text-decoration: line-through;  color: gray; }


button.t1 { width: 26px; height: 26px; line-height: 26px;  border-radius: 40%; }
button.t2 { height: 26px; line-height: 26px;  border-radius: 5px;  padding: 0 20px; }

span { display: inline-block; }

/*
@keyframes blink-effect {
  50% {
    opacity: 0;
  }
}

.blink {
  animation: blink-effect 3s step-end infinite;

  animation-name: blink-effect;
  animation-duration: 1s;
  animation-iteration-count:infinite;
  animation-timing-function:step-end;
}
*/



.tar, .t-a-r { text-align: right; }
.tac, .t-a-c { text-align: center; }
.tal, .t-a-l { text-align: left; }
.hidden, .hide { display: none; }
.cp, .c-p { cursor : pointer; }
.vat, .v-a-t { vertical-align: top;}
.f-r { float: right; }
.pal { position: absolute; left:0; }
.par { position: absolute; right:0; }
.p-r { position: relative; }
.ime-kor { ime-mode: active /* IME기본 설정 언어로 입력 > 한글 우선 */ }
.ime-eng { ime-mode: inactive /* 영문 우선(한영키 사용 가능) */ }
.ime-eng-only { ime-mode: disabled /* 영문(한영키 사용 불가) */ }

.dib { display: inline-block; }
.di  { display: inline; }

.box-20 { width: 20px; height: 20px; border-radius: 40%; }
.box-22 { width: 22px; height: 22px; border-radius: 40%; }
.box-24 { width: 24px; height: 24px; border-radius: 40%; }

.w100p { width: 100%; }
.h100p { height: 100%; }


.pos-abs-b-r { position: absolute; bottom: 0; right:0; }




.w10   { width:   10px; }
.w11   { width:   11px; }
.w12   { width:   12px; }
.w13   { width:   13px; }
.w14   { width:   14px; }
.w15   { width:   15px; }
.w16   { width:   16px; }
.w17   { width:   17px; }
.w18   { width:   18px; }
.w19   { width:   19px; }

.w20   { width:   20px; }
.w21   { width:   21px; }
.w22   { width:   22px; }
.w23   { width:   23px; }
.w24   { width:   24px; }
.w25   { width:   25px; }
.w26   { width:   26px; }
.w27   { width:   27px; }
.w28   { width:   28px; }
.w29   { width:   29px; }

.w30   { width:   30px; }
.w35   { width:   35px; }
.w40   { width:   40px; }
.w45   { width:   45px; }
.w50   { width:   50px; }
.w55   { width:   55px; }
.w60   { width:   60px; }
.w65   { width:   65px; }
.w70   { width:   70px; }
.w75   { width:   75px; }
.w80   { width:   80px; }
.w85   { width:   85px; }
.w90   { width:   90px; }
.w95   { width:   95px; }
.w100  { width:  100px; }
.w110  { width:  110px; }
.w120  { width:  120px; }
.w130  { width:  130px; }
.w140  { width:  140px; }
.w150  { width:  150px; }
.w160  { width:  160px; }
.w170  { width:  170px; }
.w180  { width:  180px; }
.w190  { width:  190px; }
.w200  { width:  200px; }
.w210  { width:  210px; }
.w220  { width:  220px; }
.w230  { width:  230px; }
.w240  { width:  240px; }
.w250  { width:  250px; }
.w260  { width:  260px; }
.w270  { width:  270px; }
.w280  { width:  280px; }
.w290  { width:  290px; }
.w300  { width:  300px; }
.w400  { width:  400px; }
.w500  { width:  500px; }
.w600  { width:  600px; }
.w700  { width:  700px; }
.w800  { width:  800px; }
.w900  { width:  900px; }
.w1000 { width: 1000px; }
.w1100 { width: 1100px; }
.w1200 { width: 1200px; }
.w1300 { width: 1300px; }
.w1400 { width: 1400px; }
.w1500 { width: 1500px; }
.w1600 { width: 1600px; }
.w1700 { width: 1700px; }
.w1800 { width: 1800px; }
.w1900 { width: 1900px; }

.h5  { height:  5px; }
.h10 { height: 10px; }
.h11 { height: 11px; }
.h12 { height: 12px; }
.h13 { height: 13px; }
.h14 { height: 14px; }
.h15 { height: 15px; }
.h16 { height: 16px; }
.h17 { height: 17px; }
.h18 { height: 18px; }
.h19 { height: 19px; }
.h20 { height: 20px; }
.h21 { height: 21px; }
.h22 { height: 22px; }
.h23 { height: 23px; }
.h24 { height: 24px; }
.h25 { height: 25px; }
.h26 { height: 26px; }
.h27 { height: 27px; }
.h28 { height: 28px; }
.h29 { height: 29px; }
.h30 { height: 30px; }
.h31 { height: 31px; }
.h32 { height: 32px; }
.h33 { height: 33px; }
.h34 { height: 34px; }
.h35 { height: 35px; }
.h36 { height: 36px; }
.h37 { height: 37px; }
.h38 { height: 38px; }
.h39 { height: 39px; }
.h40 { height: 40px; }
.h41 { height: 41px; }
.h42 { height: 42px; }
.h43 { height: 43px; }
.h44 { height: 44px; }
.h45 { height: 45px; }
.h46 { height: 46px; }
.h47 { height: 47px; }
.h48 { height: 48px; }
.h49 { height: 49px; }
.h50 { height: 50px; }
.h60 { height: 50px; }
.h70 { height: 50px; }
.h80 { height: 50px; }
.h90 { height: 50px; }
.h100 { height: 100px; }
.h150 { height: 150px; }
.h200 { height: 200px; }
.h250 { height: 250px; }
.h300 { height: 300px; }