*, *::after, *::before{ margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box;}
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, li, table, th, td,  form, address, pre, caption, cite,dfn, var{
    font-family:'Inter','xeicon',sans-serif;
    font-style:normal !important;
    text-decoration: none; 
    font-weight: 400;
    font-size: 14px;
    color:#141414;
}
html,body {width:100%; height:100%;  }
a, span, p, li, div, button {color: #141414}
i, cite, em, var, address{font-style:normal !important}
a{text-decoration:none;}
img{border:0px}
ul,ol,dl {list-style-type:none;padding:0; margin:0}
article, aside, details, figcaption, footer, header, hgroup, menu, nav, section { display: block; }

table,body,input,select,textarea,td,tr{
  font-size:15px; font-style:normal; line-height:1.8; margin:0;word-spacing:2px;word-break:break-all;letter-spacing:-0.01em; border-collapse: collapse; list-style: none
}

link      { color: #141414; text-decoration: none }
a:link    { color: #141414; text-decoration: none }
a:visited { color: #141414; text-decoration: none }
a:active  { color: #141414; text-decoration: none }
a:hover   { color: #141414; text-decoration: none }

caption {visibility:hidden; overflow:hidden; width:0; height:0; margin:0; padding:0; font:0/0 Arial;}

input{border:solid 1px #aaaaaa; height:38px; font-size:15px; padding-left:10px}
input[type="date"]{border:solid 1px #aaaaaa; height:47px; font-size:15px; padding-left:10px}
textarea{border:solid 1px #aaaaaa; font-size:15px; padding-left:10px; width:100%; 
border-radius: 5px; -webkit-border-radius:5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px;} 
select{border:solid 1px #aaaaaa; height:38px;}
span{font-weight:normal; font-size:14px}

input[type="date"]::before {content:attr(data-placeholder);}


.ellipsis {max-width:100%; text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.tableEllipsis {text-overflow:ellipsis;overflow:hidden;white-space:nowrap; word-break:break-all; word-wrap:break-word}

.size0 { font-size: 0px }
.size9 { font-size: 9px }
.size10 { font-size: 10px }
.size11 { font-size: 11px }
.size12 { font-size: 12px }
.size13 { font-size: 13px }
.size14 { font-size: 14px }
.size15 { font-size: 15px }
.size16 { font-size: 16px }
.size17 { font-size: 17px }
.size18 { font-size: 18px }
.size19 { font-size: 19px }
.size20 { font-size: 20px }
.size21 { font-size: 21px }
.size22 { font-size: 22px }
.size23 { font-size: 23px }
.size24 { font-size: 24px }
.size25 { font-size: 25px }
.size26 { font-size: 26px }
.size27 { font-size: 27px }
.size28 { font-size: 28px }
.size29 { font-size: 29px }
.size30 { font-size: 30px }
.size31 { font-size: 31px }
.size32 { font-size: 32px }
.size33 { font-size: 33px }
.size34 { font-size: 34px }
.size35 { font-size: 35px }
.size36 { font-size: 36px }
.size37 { font-size: 37px }
.size38 { font-size: 38px }
.size39 { font-size: 39px }
.size40 { font-size: 40px }
.size41 { font-size: 41px }
.size42 { font-size: 42px }
.size43 { font-size: 43px }
.size50 { font-size: 50px }
.size100 { font-size: 100px }

.width2 {width:2px;}
.width3 {width:3px;}
.width4 {width:4px;}
.width5 {width:5px;}
.width14 {width:14px;}
.width20 {width:20px;}
.width30 {width:30px;}
.width40 {width:40px;}
.width50 {width:50px;}
.width60 {width:60px;}
.width70 {width:70px;}
.width80 {width:80px;}
.width90 {width:90px;}
.width100 {width:100px;}
.width110 {width:110px;}
.width120 {width:120px;}
.width130 {width:130px;}
.width140 {width:140px;}
.width150 {width:150px;}
.width160 {width:160px;}
.width170 {width:170px;}
.width180 {width:180px;}
.width190 {width:190px;}
.width200 {width:200px;}
.width210 {width:210px;}
.width220 {width:220px;}
.width230 {width:230px;}
.width240 {width:240px;}
.width250 {width:250px;}
.width260 {width:260px;}
.width270 {width:270px;}
.width280 {width:280px;}
.width290 {width:290px;}
.width300 {width:300px;}
.width302 {width:302px;}
.width400 {width:400px;}
.width500 {width:500px;}
.width600 {width:600px;}
.width700 {width:700px;}
.width800 {width:800px;}
.width900 {width:900px;}
.width1000 {width:1000px;}

.wid10{width:10%;}
.wid20{width:20%;}
.wid25{width:25%;}
.wid30{width:30%;}
.wid40{width:40%;}
.wid50{width:50%;}
.wid60{width:60%;}
.wid70{width:70%;}
.wid80{width:80%;}
.wid90{width:90%;}
.wid100{width:100%;}

.height2 {height:2px;}
.height5 {height:5px;}
.height10 {height:10px;}
.height12 {height:12px;}
.height15 {height:15px;}
.height20 {height:20px;}
.height23 {height:23px;}
.height30 {height:30px;}
.height32 {height:32px;}
.height35 {height:35px;}
.height40 {height:40px;}
.height50 {height:50px;}
.height60 {height:60px;}
.height70 {height:70px;}
.height80 {height:80px;}
.height90 {height:90px;}
.height100 {height:100px;}
.height110 {height:110px;}
.height120 {height:120px;}
.height130 {height:130px;}
.height140 {height:140px;}
.height150 {height:150px;}
.height160 {height:160px;}
.height170 {height:170px;}
.height180 {height:180px;}
.height190 {height:190px;}
.height200 {height:200px;}
.height210 {height:210px;}
.height220 {height:220px;}
.height230 {height:230px;}
.height240 {height:240px;}
.height250 {height:250px;}
.height300 {height:300px;}

/* 라인 */
.border0 {border: 0 !important;}
.border {border: 1px solid #d0d0d0;}
.border-t{border-top:1px solid #d0d0d0;}
.border-b{border-bottom:1px solid #d0d0d0;}
.border-2b{border-bottom:2px solid #d0d0d0}
.border-r{border-right:1px solid #d0d0d0;}
.border-l{border-left:1px solid #d0d0d0;}

.bddash-b{border-bottom:1px dashed #d0d0d0;}

/* 라디어스 */
.rad5{border-radius: 5px !important; -webkit-border-radius:5px !important; -ms-border-radius:5px !important;}
.rad10{border-radius: 10px !important; -webkit-border-radius:10px !important; -ms-border-radius:10px !important;}
.rad15{border-radius: 15px !important; -webkit-border-radius:15px !important; -ms-border-radius:15px !important;}
.rad20{border-radius: 20px !important; -webkit-border-radius:20px !important; -ms-border-radius:20px !important;}
.rad30{border-radius: 30px !important; -webkit-border-radius:30px !important; -ms-border-radius:30px !important;}
.rad40{border-radius: 40px !important; -webkit-border-radius:40px !important; -ms-border-radius:40px !important;}
.rad50{border-radius: 50px !important; -webkit-border-radius:50px !important; -ms-border-radius:50px !important;}

/* 말줄임 */
.ellipsis {max-width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.tableEllipsis {text-overflow:ellipsis;overflow:hidden;white-space:nowrap; word-break:break-all; word-wrap:break-word}
/*폰트 */
.dc-under{text-decoration: underline !important;}
.dc-middle{text-decoration:line-through !important;}v
.dc-top{text-decoration:overline !important;}

/* 가림*/
.overhidden{overflow: hidden;}

/* 마진 */
.mar0{margin:0 !important;}
.mar10{margin:10px;}
.mar20{margin:20px;}
.mar30{margin:30px;}
.mar40{margin:40px;}
.mar50{margin:50px;}

.mar-t0{margin-top:0px !important;}
.mar-t5{margin-top:5px !important;}
.mar-t10{margin-top:10px !important;}
.mar-t15{margin-top:15px !important;}
.mar-t20{margin-top:20px !important;}
.mar-t30{margin-top:30px !important;}
.mar-t40{margin-top:40px !important;}
.mar-t50{margin-top:50px !important;}
.mar-t60{margin-top:60px !important;}
.mar-t70{margin-top:70px !important;}

.mar-b0{margin-bottom:0px !important;}
.mar-b5{margin-bottom:5px !important;}
.mar-b10{margin-bottom:10px !important;}
.mar-b15{margin-bottom:15px !important;}
.mar-b20{margin-bottom:20px !important;}
.mar-b25{margin-bottom:25px !important;}
.mar-b30{margin-bottom:30px !important;}
.mar-b40{margin-bottom:40px !important;}
.mar-b60{margin-bottom:60px !important;}

.mar-l0{margin-left:0px  !important}
.mar-l5{margin-left:5px  !important}
.mar-l10{margin-left:10px  !important}
.mar-l15{margin-left:15px  !important}
.mar-l20{margin-left:20px  !important}
.mar-l30{margin-left:30px  !important}
.mar-l40{margin-left:40px  !important}
.mar-l50{margin-left:50px  !important}

.mar-r0{margin-right:0px !important}
.mar-r5{margin-right:5px !important}
.mar-r10{margin-right:10px !important}
.mar-r15{margin-right:15px !important}
.mar-r20{margin-right:20px !important}
.mar-r30{margin-right:30px !important}
.mar-r40{margin-right:40px !important}
.mar-r50{margin-right:50px !important}

.mar-h10{margin:0 10px !important;}
.mar-h15{margin:0 15px !important;}
.mar-h20{margin:0 20px !important;}
.mar-h30{margin:0 30px !important;}
.mar-h40{margin:0 40px !important;}

.mar-v10{margin:10px 0 !important;}
.mar-v15{margin:15px 0 !important;}
.mar-v20{margin:20px 0 !important;}
.mar-v30{margin:30px 0 !important;}
.mar-v40{margin:40px 0 !important;}

.center {margin:0 auto;}

/* 패딩 */
.pad0{padding:0px !important;}

.pad10{padding:10px !important;}
.pad15{padding:15px !important;}
.pad20{padding:20px !important;}
.pad25{padding:25px !important;}
.pad30{padding:30px !important;}
.pad40{padding:40px !important;}
.pad50{padding:50px !important;}

.pad-t10{padding-top:10px !important;}
.pad-t20{padding-top:20px !important;}
.pad-t30{padding-top:30px !important;}
.pad-t40{padding-top:40px !important;}
.pad-t60{padding-top:60px !important;}

.pad-b10{padding-bottom:10px !important;}
.pad-b15{padding-bottom:15px !important;}
.pad-b20{padding-bottom:20px !important;}
.pad-b30{padding-bottom:30px !important;}
.pad-b40{padding-bottom:40px !important;}

.pad-h10{padding:0 10px !important;}
.pad-h20{padding:0 20px !important;}
.pad-h30{padding:0 30px !important;}
.pad-h40{padding:0 40px !important;}

.pad-v05{padding:5px 0 !important;}
.pad-v10{padding:10px 0 !important;}
.pad-v15{padding:15px 0 !important;}
.pad-v20{padding:20px 0 !important;}
.pad-v30{padding:30px 0 !important;}
.pad-v40{padding:40px 0 !important;}

.hand{cursor:pointer;}


/* 라인 */

.hline{height:38px; border-right: 1px solid #d0d0d0; line-height: 38px; margin: 0 10px;}
.vline{width: 100%; border-bottom: 1px solid #d0d0d0; margin:10px 0;}


h1{font-size: 32px; font-weight: bold; line-height: 1;}
h2{font-size: 24px; font-weight: bold; line-height: 1;}
h3{font-size: 18px; font-weight: 300}

.line-d10{line-height: 1.0 }
.line-d12{line-height: 1.2 }
.line-d14{line-height: 1.4 }
.line-d18{line-height: 1.8 }
.line-d20{line-height: 2.0 }

.line-30{line-height: 30px; }
.line-40{line-height: 40px; }
.line-50{line-height: 50px; }
.line-60{line-height: 60px; }
.line-80{line-height: 80px; }

/* 정렬 */
.txt-r { text-align: right !important}
.txt-c { text-align: center !important}
.txt-l { text-align: left !important}


/* 폰트컬러 */
.color-white{color:#FFFFFF}
.color-black{color:#000000}
.color-red{color:#ce0000}
.color-blue{color:#0033da}
.color-skyblue{color:#00a8ff}
.color-yellow {color:#ffd200}
.color-green {color:#52a123}
.color-darkgray {color:#aaa}
.color-lightgray {color:#eee}


/* 색상 */
.bg-black{background-color: #141414 !important;}
.bg-dagray{background-color: #d0d0d0 !important;}
.bg-ligray{background-color: #eff3f8; color:#141414 !important;}
.bg-white{background-color: #ffffff; color:#141414 !important;}


/* display css-----------------------------------------------------------------------------------------------------------*/

.inblock{display: inline-block;}
.inblock:hover, .inblock:focus{display: inline-block;}
.block{display:block;}
.distable{display: table}

.fl-left{float: left}
.fl-left:after{content: ''; clear: both; display: block;}
.fl-right{float: right}
.fl-right:after{content: ''; clear: both; display: block;}

/* position css-----------------------------------------------------------------------------------------------------------*/

.relative{position: relative;}
.absolute {position:absolute}
.left {float:left}
.right {float:right}
.both {clear:both}

/* etc css-----------------------------------------------------------------------------------------------------------*/

.deco-none{text-decoration: none;}
.deco-under{text-decoration: underline;}


/* input css-----------------------------------------------------------------------------------------------------------*/

input,select {
  border: 1px solid #d0d0d0;
  height: 38px;
  line-height: 38px;
  margin:0;
  outline: 0;
  padding: 0 10px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius:3px;
  border-radius: 3px;
  -o-transition:background-color .3s;
  -moz-transition: background-color .3s;
  -webkit-transition: background-color .3s;
          transition: background-color .3s;
  position: relative;
  width: auto;
  outline-style:none; /* 포커스시 발생하는 효과 제거를 원한다면 */
}

input:hover{ box-shadow: inset 2px 2px 2px rgba(0,0,0,.075)}
input ~ .focus-border{position: absolute; bottom: 0; left: 0; width:0; height: 38px; border:0; }
input:focus ~ .focus-border{width: 100%; border:2px solid #77b6c2; transition: 0.4s;}

.input-relative{position: relative; vertical-align: top; display:inline-block;}


.input-icon label{
  width:38px; 
  height: 38px; 
  text-align: center;
  float: left;
  color: #aaa;
  position:absolute;
  z-index: 1;
}

.input-icon label i{line-height: 38px; font-size: 18px; clear: both;}
.input-icon label.bgcol{background-color: #77b6c2; color: #fff;border-radius: 3px 0 0 3px;  -moz-border-radius: 3px 0 0 3px;  -ms-border-radius: 3px 0 0 3px;-webkit-border-radius: 3px 0 0 3px; -o-border-radius: 3px 0 0 3px; }
.input-icon label.bgcol + input{padding-left: 45px}
.input-icon input{width:100%; padding-left: 38px}

.input-btn input{width:auto ;border-top-right-radius: 0; border-bottom-right-radius: 0; float: left; border-right: 0 !important}
.input-btn a{border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0;-ms-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0;-o-border-radius: 3px 0 0 3px; }


.input-two{position: relative; width: 49%; display: inline-block;}
.input-two:last-child{float: right;}
.input-two input{display: inline-block; }

.input-three{position: relative; width: 32%;float: left; margin: 0 2% 0 0;}
.input-three input{width: 100%}
.input-three:last-child{margin: 0; }
.input-three:last-child:after{content:''; clear:both;}

/*------------------------------------------ 테이블---- */
.board01 {table-layout:fixed}
.board01 th ,.board01 td {border-bottom:1px solid #cccccc; padding:5px; height:30px; line-height:2;}
.board01 th {background:#f4f3f1; border-top:1px solid #aaaaaa; border-bottom:1px solid #aaaaaa;}
.board01 td {color:#666666;}
.board01 th, .board01 tbody tr td.notice {color:#333333;}
.board01 tbody tr td.notice {background:#eef1f6;}

/*------------------------------------------ 테이블검색---- */

.tb-search{display: table; padding:10px; margin:0 auto; font-size: 0}
.tb-search td{background-color: transparent; vertical-align: middle;}
.tb-search .btn{ border-radius: 0 3px 3px 0 ;  -moz-border-radius: 0 3px 3px 0 ;  -ms-border-radius: 0 3px 3px 0 ; -webkit-border-radius: 0 3px 3px 0 ; -o-border-radius: 0 3px 3px 0 ; border-left: 0;vertical-align: top; font-size: 15px;margin:0;}
.tb-search input{ width: 100%; border-radius: 0; border-left:0; vertical-align: middle; font-size: 15px}
.tb-search select{  width: 120px; border-radius: 3px 0 0 3px;-moz-border-radius: 3px 0 0 3px; -ms-border-radius: 3px 0 0 3px;-webkit-border-radius: 3px 0 0 3px; -o-border-radius: 3px 0 0 3px; 
  : middle;}


/* ------------------------------------------------------------------------ 페이징 --*/


.paging{text-align: center; font-size: 0; padding:0; margin:0;}
.paging li{display: inline-block; 
  border:1px solid #d0d0d0; 
  overflow:hidden; 
  border-radius: 3px;
  font-size: 0;
}

.paging li a{width: 100%; display: block; line-height: 1; font-size: 15px; padding:8px 13px; background-color: #fff; color:#555;}
.paging li:hover > a{background-color: #77b6c2; color:#fff;}
.paging li a i{font-size: 14px; margin-bottom: 1px}

.paging .here a{background-color: #77b6c2; color:#fff;}
.paging li.double-pre a i:first-child,
.paging li.double-next a i:first-child{letter-spacing: -15px}


/* -------------------------------------------------------------폰트 ----*/