@charset "UTF-8";


/*********************************************
* BODY
*********************************************/ 
html	{ overflow: auto; overflow-y: scroll; } 
*, *:after, *:before   { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 
body  { background: #fff; font-family: 'Pretendard GOV', 'Malgun Gothic','맑은 고딕', dotum, '돋움', sans-serif, 'Arial', Tahoma; font-size: 100%; font-weight: 500; line-height: 1.7em; color: #333; margin: 0; padding: 0; } 
div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select  { margin: 0; padding: 0; font-family: inherit; font-size: inherit; letter-spacing: inherit; line-height: inherit; } 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; margin: 0; padding:0; }
img, fieldset   { border: none; }
em, address  { font-style: normal; }
table   { border-collapse: collapse; border-spacing: 0; }
table td   { word-spacing: normal; word-break: break-all; }
table caption { font-size:0; height:0; line-height:0; visibility:hidden; }
ol, ul, li   { list-style:none none; }
img  { outline:none; }  
mark   { background:none; color:inherit; }
hr    { border:none; size:0; color:#fff; }
pre  { font-family: inherit; }


@media only screen and (max-width: 400px) {
    body  { font-size: 85%; } 
}

/*********************************************
*  변수 정의
*********************************************/
:root  {
    --primary-color: #256ef4;
    --primary-deepcolor: #0b50d0;
    --second-color: #ecf2fe;

    --input-bdcolor: #b1b8be;

    --readonly-bgcolor: #eceff2;
    --disabled-bgcolor: #d9dce0;
    --disabled-fontcolor: #888;
    --input-placeholder: #b4b6b8;
    --grid-bdcolor: #d7d7d7;


    --topHeader-height: 100px;
    --sideCnt-width: 240px;
    --input-height: 30px;

    --main-bdcolor: #cdd1d5; 
    --main-bdradius: 10px; 
}


/*********************************************
* FORM
*********************************************/
a, button  { color: inherit; cursor: pointer; }
input          { background-color: inherit; }
textarea       { border: inherit; background-color: inherit; resize: vertical; }  


a:link , a:visited , a:active  		{ text-decoration: none; }  
a:not([class*='btnRefer_']):not(.ui-state-default):not(.fileDownload):not(.tabItem):hover		{ color: var(--primary-deepcolor); text-decoration: underline; }  


button:focus-visible ,
input:focus-visible ,
select:focus-visible ,
textarea:focus-visible ,
a:focus-visible  		{ outline-style: dashed; outline-width: 2px; outline-color: var(--primary-deepcolor); }

input, select, textarea   { -webkit-box-shadow: none; box-shadow: none; -webkit-border-radius: 0px; border-radius: 0; -webkit-appearance: none; }
input[type='text']:read-only  ,
input[type='search']:read-only  ,
textarea:read-only   { background-color: var(--readonly-bgcolor); }

input::-webkit-input-placeholder  { color: var(--input-placeholder); font-weight: normal; }
input::-moz-placeholder  { color: var(--input-placeholder); font-weight: normal; }
input:-ms-input-placeholder  { color: var(--input-placeholder); font-weight: normal; }
textarea::-webkit-input-placeholder  { color: var(--input-placeholder); font-weight: normal; }
textarea::-moz-placeholder  { color: var(--input-placeholder); font-weight: normal; }
textarea:-ms-input-placeholder  { color: var(--input-placeholder); font-weight: normal; }



/*********************************************
* contents 요소_base
*********************************************/
.disNon    { display: none !important;}
.disIn   { display: inline !important;}
.disInB   { display: inline-block !important;}
.disBlock   { display: block !important;}
.disTable   { display: table !important;}
.disFlex   { display: flex !important;}
.disInFlex   { display: inline-flex !important;}
.textLeft   { text-align: left !important;}
.textRight   { text-align: right !important;}
.textCenter   { text-align: center !important;}
.textUnderline		{ text-decoration: underline !important;} 
.valignM   { vertical-align: middle !important;}
.valignT   { vertical-align: top !important;}
.cursor    { cursor: pointer !important;}
.vHidden   { visibility: hidden !important; }
.flowHidden   { overflow: hidden !important; }
.flowAuto   { overflow: auto !important; }
.flowVisible   { overflow: visible !important; }
.alStart   { align-items: flex-start !important; }
.alEnd   { align-items: flex-end !important; }
.jcStart   { justify-content: flex-start !important; }
.jcEnd   { justify-content: flex-end !important; }
.jcCenter   { justify-content: center !important; }
.jcBeteen   { justify-content: space-between !important; }
.flexL   { flex-grow: 1 !important; justify-content: flex-start !important; }
.flexR   { flex-grow: 1 !important; justify-content: flex-end !important; }
.flexC   { flex-grow: 1 !important; justify-content: center !important; }
.flexN   { flex-grow: 0 !important; }
.flexG   { flex-grow: 1 !important; } 
.flexSH0   { flex-shrink: 0 !important; } 
.flexSH1   { flex-shrink: 1 !important; } 
.flexRow   { flex-direction: row !important; } 
.flexCol   { flex-direction: column !important; } 
.flexWrap   { flex-wrap: wrap !important; } 
.flexWrapN   { flex-wrap: nowrap !important; } 

.bdNone  { border: none !important; }


/*********************************************
* text
*********************************************/
.fBold       { font-weight: 700 !important; }
.fNormal     { font-weight: normal !important; }  
.fLine    { text-decoration: underline !important; }  
.fLineTh    { text-decoration: line-through !important; }  
.txtL  { text-align: left !important; }
.txtR  { text-align: right !important; }
.f11		{ font-size:11px !important;}
.f12		{ font-size:75% !important;}
.f14		{ font-size:87.5% !important;} 
.f16		{ font-size:100% !important;} 
.f18		{ font-size:1.1em !important;} 
.f20		{ font-size:1.25em !important;} 
.f22		{ font-size:1.35em !important;} 

.fRed  { color: #ff0000 !important; }
.fBlue  { color: var(--primary-deepcolor) !important; }
.fPurL  { color: #ad0a54 !important; }
.fGray  { color: #595959 !important; }
.link  { color: #1366ff; text-decoration: underline !important; }
.link:hover  { color: var(--primary-deepcolor); }

.wordKeep  { word-break: keep-all !important; }


/*********************************************
* 레이아웃 요소
*********************************************/
.floatLeft   { float:left !important; }
.floatRight   { float:right !important; }
.floatNone  { float:none !important; }
.clearBoth  { clear: both; }
.clearLeft  { clear: left; }

.heigh10   { height: 10px; }
.heigh15   { height: 15px; }
.heigh20   { height: 20px; }
.heigh25   { height: 25px; }
.heigh30   { height: 30px; }
.hAuto  { height: auto !important; }
.w100  { width: 100% !important; }
.w50  { width: 50% !important; }
.mWauto  { min-width: auto !important; }
.mxWauto  { max-width: none !important; }
.mxW100  { max-width: 100% !important; }
.mW60  { min-width: 60px !important; }
.mW70  { min-width: 70px !important; }
.mW80  { min-width: 80px !important; }
.mW90  { min-width: 90px !important; }
.mW100  { min-width: 100px !important; }
.mW120  { min-width: 120px !important; }
.mW130  { min-width: 130px !important; }
.mW140  { min-width: 140px !important; }
.mW150  { min-width: 150px !important; }
.mW160  { min-width: 160px !important; }
.mW170  { min-width: 170px !important; }
.mW180  { min-width: 180px !important; }
.mW190  { min-width: 190px !important; }
.mW200  { min-width: 200px !important; }
.flexb20    { flex-basis: 20%; }
.flexb25  ,  .flexb25 > li   { flex-basis: 25%; }
.flexb30  ,  .flexb30 > li   { flex-basis: 30%; }
.flexb40  ,  .flexb40 > li    { flex-basis: 40%; }
.flexb50  ,  .flexb50 > li     { flex-basis: 50%; }
.flexb60  ,  .flexb60 > li     { flex-basis: 60%; }
.flexb70  ,  .flexb70 > li     { flex-basis: 70%; }
.flexb80  ,  .flexb80 > li     { flex-basis: 80%; }

@media only screen and (max-width: 1000px) {
    .flexb30  ,  .flexb30 > li  ,
    .flexb40  ,  .flexb40 > li  ,
    .flexb50  ,  .flexb50 > li  ,
    .flexb60  ,  .flexb60 > li  ,
    .flexb70  ,  .flexb70 > li  ,
    .flexb80  ,  .flexb80 > li     { flex-basis: auto; }
}

/*********************************************
* margin
*********************************************/
.ma_center  {margin: 0 auto !important; } 
.mt_m10  {margin-top: -10px !important; }
.mt_m20  {margin-top: -20px !important; }