@charset "utf-8";

*{margin:0; padding:0;box-sizing: border-box;min-width: 0;font-size: 12px;color: #000;font-family: '맑은고딕',Malgun Gothic;letter-spacing: -.5px;}

@font-face {
font-family: Malgun Gothic;
/*
	숫자만 적용하는 유니코드
	unicode-range:U+0030-0039;
*/
unicode-range:U+0030-0039;
font-style: normal;
font-size:11px;
  src: url(roboto/Roboto-Regular.woff2) format('woff2'),
       url(roboto/Roboto-Regular.woff) format('woff'),
       url(roboto/Roboto-Regular.otf) format('opentype');

}

.gridbox > *{box-sizing:initial !important;}

:root{
    --main-header-bg: #323232;
    --main-left_sidemenu-bg: #323232;
    --main-left_nav-bg:#eeeeee;
    --main-rightcon-bg: #aebfaf;
    --main-contents_show-bg:#f5f5f5;
    --main-point-color:#442a71;
    --main-point-color2:#9b89bc;
    --cont-bg:#fff;
    --cont-line:#dbd9da;
    --red:#fff;
}

/* 초기화
   ========================================================================== */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figcaption, figure, footer, header, hgroup, menu, nav, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-size:12px; vertical-align:baseline; background:transparent;}

html {
  line-height: 1.5; /* 1. 모든 브라우저에서 줄 높이를 수정합니다. */
  -webkit-text-size-adjust: 100%; /*2. iOS에서 방향 변경 후 글꼴 크기 조정을 방지합니다. 리베하얀 -webkit-text-size-adjust:none; */
  -webkit-touch-callout:none; -webkit-user-select:text; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  word-break: keep-all;
  font-size:16px;
    /*text-rendering: optimizeLegibility;*/
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }
body {
  min-width:320px;
  margin: 0; /* 모든 브라우저 여백 제거 */
}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section,main {
  display: block; /* IE에서 일관되게 렌더링 */
}
h1 {
  font-size: 2em; /* h1요소 글꼴 크기 및 여백 수정 -크롬,파이어폭스,사파리 */
  margin: 0.67em 0;
}

/* 컨텐츠 그룹화
   ========================================================================== */

/* hr {
  box-sizing: content-box; 파이어폭스에서 올바른 박스크기
  height: 0;  파이어폭스에서 올바른 박스크기
  overflow: visible; 엣지와 IE에서 오버플로 표시
  display: block;
  border:0;
  border-top:1px solid #ccc;
  padding:0;
  margin:1em 0;
} */
pre {
  font-family: monospace, monospace; /* 모든 브라우저에서 글꼴 크기의 상속 및 배율 조정, 모든 브라우저에서 이상한 em 글꼴크기 수정 */
  font-size: 1em; /* 2 */
}

/* 텍스트 수준 의미론
   ========================================================================== */

a {
  background-color: transparent; /* IE10에서 활성 링크 회색 배경 제거*/
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    display: block;
	text-decoration:none;
}
abbr[title] {
  border-bottom: none; /* 크롬57에서 하단 테두리 제거 */
  text-decoration: underline; /* 크롬, 엣지, IE, 오페라, 사파리에서 올바른 텍스트 */
  text-decoration: underline dotted; /* 크롬, 엣지, IE, 오페라, 사파리에서 올바른 텍스트 */
}
b,
strong {
  font-weight: bolder; /* 크롬, 엣지, 사파리에서 올바른 글꼴 두께 */
  vertical-align:baseline;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 모든 브라우저에서 글꼴 크기 상속 및 배율 조정 */
  font-size: 1em; /* 모든 브라우저에서 이상한 em 글꼴크기 수정 */
}
nav ul, ol, ul, li{list-style: none;}
small {
  font-size: 95%; /* 모든 브라우저 글꼴 크기 추가 */
}
sub,sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; /* 모든 브라우저상 요소가 줄 높이 영향 주지 않도록 */
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}
del{text-decoration: line-through;}
/* Embedded content
   ========================================================================== */

img {
  border-style: none; /* IE10 링크 내부 이미지 테두리 제거 */
}

/* Forms
   ========================================================================== */

input,
button,
optgroup,
select,
textarea {
  font-family: inherit; /* 모든 브라우저에서 글꼴 스타일을 변경 */
  padding:0.25em 0.375em;
  margin: 0; /* Firefox 및 Safari에서 여백을 제거 */
  min-height:27px;
/*   border-radius:5px; */
}
button,
optgroup,
select,
textarea{
  line-height: 1.15; /* 모든 브라우저에서 글꼴 스타일을 변경 */
}

/* table{border-collapse: collapse; border-spacing: 0;} */

button,
input { /* IE에서 오버플로를 표시 */
  overflow: visible;
}

button,
select { /* Edge, Firefox 및 IE에서 텍스트 변환의 상속을 제거 */
  text-transform: none;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: no-repeat right center / 1em;
  padding-right: 1em;
}

/* 키보드로 버튼에 포커스 시 */
button:focus-visible {outline:#000 solid 2px;}


/* 마우스, 터치로 버튼에 포커스 시 box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);  */
button:focus:not(:focus-visible) { outline: none; }


/**
 * Change the inconsistent appearance in all browsers (opinionated).
 */

select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
  background-color:#fff;
  background-size:auto;
  padding-right:21px;
  background-repeat: no-repeat;
  background-position: right;
}


[type="color"],
[type="range"] {
  border-width: 0;
  padding: 0;
}

/**
 * Change the inconsistent appearance in IE (opinionated).
 */

::-ms-expand {
  display: none;
}

/**
 * Correct the inconsistent appearance in IE (opinionated).
 */

:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.54);
}



button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* iOS 및 Safari에서 클릭 가능한 유형의 스타일을 지정할 수없는 문제를 수정 */
  cursor: pointer;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { /* Firefox에서 내부 테두리와 패딩을 제거 */
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring { /* 이전 규칙에서 설정하지 않은 초점 스타일을 복원 */
  outline: 1px dotted ButtonText;
}
button{background: transparent;border:none;}
fieldset { /* Firefox에서 패딩을 수정 */
  padding: 0.35em 0.75em 0.625em;
}
input, select { vertical-align:middle; border:1px solid #ccc;padding-left:10px;}

legend {
  box-sizing: border-box; /*  Edge 및 IE의 텍스트 줄 바꿈을 수정 */
  color: inherit; /* IE의`fieldset` 요소에서 색상 상속을 수정 */
  display: table; /*  Edge 및 IE의 텍스트 줄 바꿈을 수정 */
  max-width: 100%; /*  Edge 및 IE의 텍스트 줄 바꿈을 수정 */
  padding: 0; /* 개발자가 제로 아웃 할 때 걸리지 않도록 패딩을 제거 */
  white-space: normal; /*  Edge 및 IE의 텍스트 줄 바꿈을 수정 */
}

progress { /* Chrome, Firefox 및 Opera에서 올바른 수직 정렬 */
  vertical-align: baseline;
}
textarea {
  overflow: auto; /* IE 10+에서 기본 세로 스크롤바 제거 */
  padding:5px;
  line-height:1.4;
  resize: vertical;
  font-size:13px;
  border:0;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* IE 10에서 올바른 상자 크기를 추가 */
  padding: 0; /* IE 10에서 패딩을 제거 */
}


[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { /* Chrome에서 증가 및 감소 버튼의 커서 스타일을 수정 */
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield; /* Chrome 및 Safari에서 이상한 모양을 수정 */
  outline-offset: -2px; /* Safari에서 윤곽선 스타일을 수정 */
}
[type="search"]::-webkit-search-decoration { /*macOS의 Chrome 및 Safari에서 내부 패딩을 제거*/
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* iOS 및 Safari에서 클릭 가능한 유형의 스타일을 지정할 수없는 문제를 수정 */
  font: inherit; /* Safari에서 글꼴 속성을 '상속'으로 변경 */
}

/* Interactive
   ========================================================================== */

details {
  display: block; /* Edge, IE 10+ 및 Firefox에서 올바른 디스플레이를 추가 */
}
summary { /* 모든 브라우저에 올바른 디스플레이를 추가 */
  display: list-item;
}
template { /* IE 10+에서 올바른 디스플레이를 추가 */
  display: none;
}
[hidden] { /* IE 10에서 올바른 디스플레이를 추가 */
  display: none;
}
.clear {clear:both;}
.clear::after { content:""; display:block; clear:both;}
.f20{font-size:20px;}

/* 레이아웃 구조
   ========================================================================== */

.row-12{display: flex;flex-wrap: wrap;}
.row-12 > * {flex-shrink:0;width:100%;max-width:100%;}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    float: left;
  }
  .col-12 {
    width: 100%;
  }
  .col-11 {
    width: 91.66666667%;
  }
  .col-10 {
    width: 83.33333333%;
  }
  .col-9 {
    width: 75%;
  }
  .col-8 {
    width: 66.66666667%;
  }
  .col-7 {
    width: 58.33333333%;
  }
  .col-6 {
    width: 50%;
  }
  .col-5 {
    width: 41.66666667%;
  }
  .col-4 {
    width: 33.33333333%;
  }
  .col-3 {
    width: 25%;
  }
  .col-2 {
    width: 16.66666667%;
  }
  .col-1 {
    width: 8.33333333%;
  }
  .col-pdt{padding-top:10px;}
  .col-pdr{padding-right:5px;}
  .col-pdl{padding-left:5px;}
  .col-pd5{padding:5px;}
  .col-pd10{padding:10px;}
  .col-pdrl{padding:auto 5px;}
  .col-pdlr{padding:auto 5px;}
  .col-pdtb{padding:5px auto;}
  .col-pdbt{padding:5px auto;}
  .bdb0{border-bottom:0 !important;}
  .hide,caption,legend{line-height:0;font-size:0px;overflow:hidden;text-indent:-99999;}




  .hrow-12 {
    height: 100vh;
  }
  .hrow-11 {
    height: 91.66666667vh;
  }
  .hrow-10 {
    height: 83.33333333vh;
  }
  .hrow-9 {
    height: 75vh;
  }
  .hrow-8 {
    height: 66.66666667vh;
  }
  .hrow-7 {
    height: 58.33333333vh;
  }
  .hrow-6 {
    height: 50vh;
  }
  .hrow-5 {
    height: 41.66666667vh;
  }
  .hrow-4 {
    height: 33.33333333vh;
  }
  .hrow-3 {
    height: 25vh;
  }
  .hrow-2 {
    height: 16.66666667vh;
  }
  .hrow-1 {
    height: 8.33333333vh;
  }

  .hrow-12 {
    height: 100%;
  }
  .hrow-11 {
    height: 91.66666667%;
  }
  .hrow-10 {
    height: 83.33333333%;
  }
  .hrow-9 {
    height: 75%;
  }
  .hrow-8 {
    height: 66.66666667%;
  }
  .hrow-7 {
    height: 58.33333333%;
  }
  .hrow-6 {
    height: 50%;
  }
  .hrow-5 {
    height: 41.66666667%;
  }
  .hrow-4 {
    height: 33.33333333%;
  }
  .hrow-3 {
    height: 25%;
  }
  .hrow-2 {
    height: 16.66666667%;
  }
  .hrow-1 {
    height: 8.33333333%;
  }

/* 정렬 */
.vt {vertical-align:top !important}
.vb {vertical-align:bottom !important}
.vm {vertical-align:middle !important}
.ac {text-align:center !important;}
.ar {text-align:right !important}
.al {text-align:left !important}
.auto {margin:0 auto}


/* 여백 */
.mt0{margin-top:0 !important}
.mt2{margin-top:2px !important}
.mt4{margin-top:4px !important}
.mt5{margin-top:5px !important}
.mt7{margin-top:7px !important}
.mt10{margin-top:10px !important}
.mt15{margin-top:15px !important}
.mt20{margin-top:20px !important}
.mt25{margin-top:25px}
.mt30{margin-top:30px !important}
.mt35{margin-top:35px}
.mt40{margin-top:40px !important}
.mt45{margin-top: 45px !important;}

.ml-auto{margin-left:auto !important}
.mr-auto{margin-right:auto !important}
.ml0{margin-left:0 !important}
.ml3{margin-left:5px !important}
.ml5{margin-left:5px !important}
.ml7{margin-left:7px !important}
.ml8{margin-left:7px !important}
.ml10{margin-left:10px}
.ml20{margin-left:20px}

.mr5{margin-right:5px !important}
.mr10{margin-right:10px !important}
.mr15{margin-right:15px !important}
.mr20{margin-right:20px !important}


.mb0{margin-bottom:0px !important}
.mb5{margin-bottom:5px !important}
.mb6{margin-bottom:6px !important}
.mb7{margin-bottom:7px !important}
.mb10{margin-bottom:10px !important}
.mb15{margin-bottom:15px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb40{margin-bottom:40px}
.mb50{margin-bottom:50px}
.mb60{margin-bottom:60px}
.mb70{margin-bottom:70px}
.mb80{margin-bottom:80px}
.mb90{margin-bottom:90px}
.mb100{margin-bottom:100px}

.p0{padding:0 !important}
.p10{padding:10px !important}
.p7_bb{padding:7px !important;box-sizing:border-box !important;}

.pt0{padding-top:0 !important}
.pt5{padding-top:5px !important}
.pt10{padding-top:10px !important}
.pt15{padding-top:15px}
.pt20{padding-top:20px}
.pt25{padding-top:25px}
.pt30{padding-top:30px}

.pl4{padding-left:4px}
.pl5{padding-left:5px !important;}
.pl7{padding-left:7px !important;}
.pl8{padding-left:8px !important;}
.pl10{padding-left:10px}
.pl15{padding-left:15px}
.pl20{padding-left:20px}

.pr10{padding-right:10px}
.pr20{padding-right:20px !important}

.pb5{padding-bottom:5px}
.pb7{padding-bottom:7px}
.pb10{padding-bottom:10px}
.pb15{padding-bottom:15px}
.pb20{padding-bottom:20px}


/* width 값 */
.w10 {width:10px}
.w20 {width:20px}
.w30 {width:30px}
.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}
.w300 {width:300px}
.w400 {width:400px}

.w100p {width:100%}
.w98p {width:98%}
.w97p {width:97%}
.w96p {width:96%}
.w95p {width:95%}
.w94p {width:94%}
.w93p {width:93%}
.w92p {width:92%}
.w91p {width:91%}
.w90p {width:90%}
.w85p {width:85%}
.w80p {width:80%}
.w75p {width:75%}
.w70p {width:70%}
.w65p {width:65%}
.w60p {width:60%}
.w55p {width:55%}
.w50p {width:50%}
.w40p {width:40%}
.w30p {width:30%}
.w20p {width:20%}
.w10p {width:10%}

.fb {font-weight:bold;}
.normal {font-weight:normal;}
.f15 {font-size:15px !important;}
.f12 {font-size:12px !important;;}
.f11 {font-size:11px;}
.bgW {background:#fff}

.fl {float:left;}
.fr {float:right;}
.cl {clear:both !important;}
.cl:after {display: block;content:'';clear:both;}

.show, .block{display:block !important;}
.inblock {display:inline-block;}
.none{display:none !important;}
 .visible{visibility: visible;}

.wbbw{word-break:break-word;}

.bt0{border-top:0 !important;}
.bdT0 {border-top:0 !important}
.bdT2 {border-top:2px solid #bbb !important}
.bdT3 {border-top:1px solid #bbb !important}
.bdr1 {border-right:1px solid #ddd !important}
.bdr2 {border-right:1px solid #bbb !important}
.db_dot {border-top:1px dotted #bbb;height:1px;}
.bdb0 {border-bottom:0 !important}
.bdb1 {border-bottom:1px solid #ddd}
/* table 상단 보더값 */
.bdT1 tr {border-top:1px solid #bbb !important}
.bdT1 {border-top:1px solid #bbb !important}
.bd0{border:0;}


/* common */
.blind,legend,caption{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0px;white-space:nowrap}
#skip{height:0}
#skip a{display:block;position:absolute;left:0;top:-100px;width:100%;height:1px;text-align:center}
#skip a:focus,#skip a:active{position:absolute;top:0;z-index:200;height:23px;background:rgba(255,255,255,0.7);font-weight:bold;color:#333;font-size:14px;text-decoration:none;display:block;width:100%;border-bottom:1px solid #fff;}


.clear {clear:both;}
.clear:after { content:""; display:block; clear:both;}

/* ▼ */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* 프로그래스바 */
::-webkit-progress-bar {
  background-color: #eaecf4;
}

::-webkit-progress-value {
  background-color: #4f78d1;
}


/* 스크롤바 */

::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
    background-color: #ebebeb;
}

::-webkit-scrollbar-thumb {
    background-color: #fff;
    background-clip: padding-box;
    border: 4px solid transparent;
    border-radius:26px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #808080;
}

::-webkit-scrollbar-thumb:active {
    background-color: #808080;
}

/* Buttons */
::-webkit-scrollbar-button:single-button {
    background-color: #ebebeb;
    display: block;
    background-size: 10px;
    background-repeat: no-repeat;
}

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
    height: 12px;
    width: 16px;
    background-position: center 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='50,00 0,50 100,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");
}

/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
    height: 12px;
    width: 16px;
    background-position: center 2px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 100,0 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");
}

/* Left */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
    height: 12px;
    width: 12px;
    background-position: 3px 3px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,50 50,100 50,0'/></svg>");

}

::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,50 50,100 50,0'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,50 50,100 50,0'/></svg>");
}

/* Right */
::-webkit-scrollbar-button:single-button:horizontal:increment {
    height: 12px;
    width: 12px;
    background-position: 3px 3px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 0,100 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 0,100 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:increment:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 0,100 50,50'/></svg>");
}

.text-white {
  color: #fff !important;
}

.text-primary {
  color: #4e73df !important;
}

a.text-primary:hover, a.text-primary:focus {
  color: #224abe !important;
}

.text-secondary {
  color: #53596e !important;
}

a.text-secondary:hover, a.text-secondary:focus {
  color: #53596e !important;
}

.text-success {
  color: #1cc88a !important;
}

a.text-success:hover, a.text-success:focus {
  color: #13855c !important;
}
.text-warning {
  color: #f6c23e !important;
}

a.text-warning:hover, a.text-warning:focus {
  color: #dda20a !important;
}

.text-danger {
  color: #cd247a !important;
}

a.text-danger:hover, a.text-danger:focus {
  color: #cd247a !important;
}


.d-flex{display:flex;}
.flex-none{flex:none;}
.flex-max{flex:1;}
.flex-right{margin-left:auto !important;}

.flex-row {
    flex-direction: row !important
}

.flex-column {
    flex-direction: column !important
}

.flex-row-reverse {
    flex-direction: row-reverse !important
}

.flex-column-reverse {
    flex-direction: column-reverse !important
}

.flex-wrap {
    flex-wrap: wrap !important
}

.flex-nowrap {
    flex-wrap: nowrap !important
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse !important
}

.flex-fill {
    flex: 1 1 auto !important
}

.flex-grow-0 {
    flex-grow: 0 !important
}

.flex-grow-1 {
    flex-grow: 1 !important
}

.flex-shrink-0 {
    flex-shrink: 0 !important
}

.flex-shrink-1 {
    flex-shrink: 1 !important
}

.justify-content-start {
    justify-content: flex-start !important
}

.justify-content-end {
    justify-content: flex-end !important
}

.justify-content-center {
    justify-content: center !important
}

.justify-content-between {
    justify-content: space-between !important
}

.justify-content-around {
    justify-content: space-around !important
}

.align-items-start {
    align-items: flex-start !important
}

.align-items-end {
    align-items: flex-end !important
}

.align-items-center {
    align-items: center !important
}

.align-items-baseline {
    align-items: baseline !important
}

.align-items-stretch {
    align-items: stretch !important
}

.align-content-start {
    align-content: flex-start !important
}

.align-content-end {
    align-content: flex-end !important
}

.align-content-center {
    align-content: center !important
}

.align-content-between {
    align-content: space-between !important
}

.align-content-around {
    align-content: space-around !important
}

.align-content-stretch {
    align-content: stretch !important
}

.align-self-auto {
    align-self: auto !important
}

.align-self-start {
    align-self: flex-start !important
}

.align-self-end {
    align-self: flex-end !important
}

.align-self-center {
    align-self: center !important
}

.align-self-baseline {
    align-self: baseline !important
}

.align-self-stretch {
    align-self: stretch !important
}

.border-bottom{border-bottom:1px solid #e3e6f0;}


/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 22px;
  cursor: pointer;
  font-size: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  width: 14px;
  margin-top:3px;
  border:1px solid rgb(216, 216, 216);
  background:#fff;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
  top: 3px;
  left: 3px;
  width: 6px;
  height: 6px;
  background: white;
}


input[type=radio]{
  background-color: #FFFF;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin-left: 9px;
  border: 1px solid rgb(216, 216, 216);
  width: 14px;
  height: 14px;
  border-radius: 100%;
  min-height:auto !important;
}
input[type=radio]:checked{
  background:#2196F3;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  width: 14px;
  height: 14px;
  border-radius: 100%;
}


.form-check {
    display: block;
    min-height: 1.7rem;
    margin-bottom: .125rem;
}
label {
    display: inline-block;
	padding:0 3px;
	font-weight:bold;
	color:#53596e;
	vertical-align:middle;
}
.form-check-input {
    width: 1em;
    height: 1em;
    margin-top: .25em;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0,0,0,.25);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
}


.form-check-input:checked[type=radio] {
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.form-check-input[type=radio] {
    border-radius: 50%;
}
.form-check .form-check-input {
    float: left;
}

.bold{font-weight:bold;}

    #modal2 .modal_body{display: flex;flex-direction: column;padding:15px;}
    #modal2 div.viewerpop.modal_body{padding:0;}



	.wrap_box {margin:18px 11px 18px auto;}
	.wrap_box input{position:absolute; left:-1000%;}
	.wrap_box label {position:relative; display:block; width:50px; height:24px; background:#ccc; border-radius:30px;transition: background 0.4s;}
	.wrap_box label:after{content:""; position:absolute; left:5.5px; top:50%; width:18px; height:18px; border-radius:100%; background:#fff; transform:translateY(-50%); box-shadow: 1px 3px 4px rgba(0,0,0,0.2);}
	.wrap_box input:checked + label {background:#4f78d1; transition: all 0.4s;}
	/* input:checked + label:after {left:inherit; right:7.5px; } */
	.wrap_box input:checked + label:after {left:calc(100% - 23.5px); }
	.wrap_box label span {display:none;}
    .newch_add{font-weight:bold;}
    .newch_add ul li{display:flex;flex-direction:column;margin-bottom:12px;flex-wrap:wrap;}


.btn.style2{background-color:#4f78d1;color:#fff;}
#modal h2,#modal2 h2{
	margin:0;
	font-size:16px;
	color:#000;
}

#menuTabbars,#menuTabbars_btn{z-index:0;}




	 .modal_pop{
		display:none;
		width:100%;
		height:100%;
		z-index:888;
	}
	.modal_pop h2{
		margin:0;
		font-size:16px;
		color:#000;
	}
	.modal_pop button{
		display:inline-block;
	}


	.modal_pop .modal_layer{
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		z-index:888;
	}

	.modal_pop .modal_content{
		width:auto;
		margin:0 auto;
		background:#fff;
		position:fixed;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		display:flex;
		flex-direction:column;
		pointer-events:auto;
		border:1px solid #dadbdc;
		border-top:2px solid #1d48a0;
		z-index:999;
	}
	.modal_pop .modal_header{
		display:flex;
		justify-content:space-between;
		background:#f8f8fa;
	    padding: 5px 15px;
	    border-bottom:1px solid #dadbdc;
	    align-items:center;
	}
	.modal_pop .modal_body{
		flex:1 1 auto;
		position:relative;
		padding:10px 15px;
	}
	.modal_pop .modal_body .list{
	padding: 5px 0;
    border-bottom: 1px solid #e9eaed;
    }
	.modal_pop .modal_footer{
		display:flex;
		flex-wrap:wrap;
		flex-shrink:0;
		justify-content:flex-end;
		border-top:1px solid #dadbdc;
	}


	.workreport_title{font-weight:bold;font-size:13px;margin-left:10px;}
	.work_applier{font-weight:bold;color:#666;margin-left:5px;}
	.work_applier:before{content:'';display:inline-block; width:1px;height:10px; border-left:1px solid #888; margin-right:5px;}

	.modal_body label{padding:3px;}

	.dhtmlxcalendar_material div.dhtmlxcalendar_dates_cont ul.dhtmlxcalendar_line li.dhtmlxcalendar_cell_month_date{background:#1d48a0;}
	.dhtmlxcalendar_cell.dhtmlxcalendar_cell_month_date .dhtmlxcalendar_label,.dhtmlxcalendar_cell.dhtmlxcalendar_cell_month_date_hover .dhtmlxcalendar_label{color:#fff !important; background-color: #1d48a0;}

/* input box color 자동완성 파란색 수정 */
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #fff inset ; -webkit-text-fill-color: #666; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; }



.cmt_inputdiv textarea{
	min-height: 28px;
    margin-bottom: -4px !important;
    border-radius:0;
    resize:none;
}

#reportCn textarea{
	border:1px solid #000;
}
#modal_close_btn3{margin-left:auto;}
#reportCn{border:1px solid #000;}
#issueCn{border:1px solid #000;}
#consultCn{border:1px solid #000;}



a:link {color:#555;text-decoration:none}
a:visited {color:#555;text-decoration:none}
a:hover {color:#333; cursor:pointer}
a:active {color:#555;text-decoration:underline}



input[type=tel][readonly],
input[type=text][readonly],
input[type=password][readonly],
input[type=email][readonly],
input[type=search][readonly],
input[type=tel][disabled],
input[type=text][disabled],
input[type=password][disabled],
input[type=search][disabled],
input[type=email][disabled]{background:#eaeaea; border-color:#ced4da; color:#a6a6a6; -webkit-appearance:none;}



/* 캘린더 input */
.input_calen {width:90px;padding:0 6px;margin-right:3px;border:solid 1px #ced4da;background:#fff url(../img/sub/icon_calen.png) no-repeat 90% center !important; border-color:#ced4da; display:inline-block;transition : border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;}
.input_calen::-ms-clear {display:none}
.input_calen:hover {cursor:pointer;}
.input_calen:focus {background:#fff url(../img/sub/icon_calen_focus.png) no-repeat 90% center !important;}



.glyphicon.glyphicon-calendar {
    right:2.1rem;
    top: 0.18rem;
    color: #555555;
    font-size: .9rem;
    cursor: pointer;
    padding: .4rem;
    border-left: 1px solid #dedede;
}
.glyphicon.glyphicon-calendar:hover {
    transition: all 0.3s;
    background: #094f79;
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 0 .2rem .2rem 0;
    font-weight: normal;
    cursor:pointer;
}



/* 파일 찾기 */
.file_input label {position:relative; cursor:pointer; display:inline-block; vertical-align:middle; overflow:hidden; width:80px; height:20px; background:#fff; color:#212529; text-align:center; line-height:22px;  border:0; border:1px solid #dedede;}
.file_input label input {position:absolute; width:0; height:0; overflow:hidden; display:none; }
.file_input input[type=text] {vertical-align:middle; display:inline-block; line-height:22px; font-size:11px; padding:1px 3px; border:0; border:1px solid #dedede;}



/* 문자 줄바꿈, 단어 줄바꿈, 공백 있는 그대로 */
.word_break {word-wrap: break-word;word-break:normal;white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;}





/* 알림창 */
#wrap_notice {
    position: absolute;
    background: #fff;
    top: 30%;
    left: 40%;
    z-index: 2000;
    -webkit-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);
    box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);
}

#header_notice {
    height: 36px;
    padding:2px 0;
    background: #094f79;
    border-top-left-radius:4px;
    border-top-right-radius:4px;
}

#header_notice h2 {
    font-size: 0.85rem;
    color: #fff;
    font-weight: bold;
    line-height: 28px;
}

#content_notice {
    font-size: 0.75rem;
    color: #454545;
    padding: 10px;
    border-left: 1px solid #555;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
}

/* error */

div.error {
    position: absolute;
    z-index: 5;
    bottom: -25px;
    left: 0;
    width: 85px;
    background-color: orange;
    padding: 2px 8px;
    color: white;
    text-align: center;
    font-size:0.7rem;
    letter-spacing:-.5px;
    border-radius:4px;
    border:1px solid orange;
    opacity: 1;
    transition: opacity 1s;
    }


div.error:after, div.error:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

div.error:after {
    border-color: transparent;
    border-bottom-color: orange;
    border-width: 5px;
    margin-left: -5px;
}
div.error:before {
    border-color: transparent;
    border-bottom-color: orange;
    border-width: 5px;
    margin-left: -5px;
}
/* 라디오버튼  및 다중버튼 스위치 설정 */
.switch-field {
    overflow: hidden;
    display:inline-block;
    margin-top:-1px;
    vertical-align:middle
}
.switch-title {
    margin-bottom: .38rem;
}
.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}
.switch-field label {
    float: left;
    line-height: 1.6rem;
}
.switch-field label {
    display: inline-block;
    width: auto;
    background-color: #e9f0ff;
    color: #333333;
    font-size: 0.75rem;
    line-height:24px;
    height:1.5rem;
    font-weight: normal;
    text-align: center;
    text-shadow: none;
    padding-right: .8rem;
    padding-left: .8rem;
    border: 1px solid #dfe3ea;
    border-right:none;
    -webkit-box-shadow: inset 0 .03rem 0.1rem rgba(0, 0, 0, 0.1), 0 .03rem rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 .03rem 0.1rem rgba(0, 0, 0, 0.1), 0 .03rem rgba(255, 255, 255, 0.1);
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
.switch-field label:last-child {border-right: 1px solid rgba(0, 0, 0, 0.15);}

.switch-field label:hover {
    cursor: pointer;
    transition: all 0.3s;
}
.switch-field input:checked + label {
    background-color: #6596fc;
    -webkit-box-shadow: inset none 0px;
    box-shadow: inset none 0px;
    font-weight: 600;
    color: #FFFFFF;
    cursor: default;
}
.switch-field label:first-of-type {
    border-radius: .2rem 0 0 .2rem;
}
.switch-field label:last-of-type {
    border-radius: 0 .2rem .2rem 0;
}


.login_box li {position: relative;}
.login_box li .error {left: 55px;}

/* 스크롤바 */

::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
    background-color: #ebebeb;
}

::-webkit-scrollbar-thumb {
    background-color: #fff;
    background-clip: padding-box;
    border: 4px solid transparent;
    border-radius:26px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #808080;
    cursor:default;
}

::-webkit-scrollbar-thumb:active {
    background-color: #808080;
    cursor:default;
}

/* Buttons */
::-webkit-scrollbar-button:single-button {
    background-color: #ebebeb;
    display: block;
    background-size: 10px;
    background-repeat: no-repeat;
}

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
    height: 12px;
    width: 16px;
    background-position: center 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='50,00 0,50 100,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");
}

/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
    height: 12px;
    width: 16px;
    background-position: center 2px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 100,0 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");
}

/* Left */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
    height: 12px;
    width: 12px;
    background-position: 3px 3px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,50 50,100 50,0'/></svg>");

}

::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,50 50,100 50,0'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,50 50,100 50,0'/></svg>");
}

/* Right */
::-webkit-scrollbar-button:single-button:horizontal:increment {
    height: 12px;
    width: 12px;
    background-position: 3px 3px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 0,100 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 0,100 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:increment:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 0,100 50,50'/></svg>");
}

input:disabled{
	background:#eee!important;
}

input:disabled, textarea:disabled, input:disabled::placeholder, textarea:disabled::placeholder {
  color: currentcolor;
  -webkit-text-fill-color: currentcolor; /* 1. sets text fill to current `color` for safari */
  opacity: 1; /* 2. correct opacity on iOS */
}