@charset "utf-8";
@import url(./fonts.css);
/* Reset */
* {
  box-sizing: border-box;
  user-select: none;
}
html,
body {
  width: 100%;
  height: 100%;
}
html {
  overflow-y: scroll;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
form,
fieldset,
p,
button {
  font-family: "NotoSansKR_Regular", sans-serif;
  margin: 0;
  padding: 0;
  word-break: break-all;
  word-break: keep-all;
}
body,
h1,
h2,
h3,
h4,
input,
button {
  font-size: 14px;
  color: #333;
}
body {
  background-color: #fff;
  text-align: center;
  *word-break: break-all;
  -ms-word-break: break-all;
}
img,
fieldset,
iframe {
  border: 0 none;
}
li {
  list-style: none;
}
input,
select,
button {
  outline: none;
}
input {
  text-indent: 16px;
}
img {
  vertical-align: top;
}
i,
em,
address {
  font-style: normal;
}
label,
button {
  cursor: pointer;
}
button {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
button * {
  position: relative;
}
button img {
  left: -3px;
  *left: auto;
}
html:first-child select {
  height: 40px;
  padding-right: 0;
}
option {
  padding-right: 6px;
}
legend {
  *width: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
input::-ms-clear {
  display: none;
}
input {
  -webkit-appearance: none;
}
canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
svg {
  width: 100%;
}
textarea {
  width: 100%;
  border: 1px solid #e2e2e2;
}
a {
  color: #000;
}
a,
input,
select {
  outline-style: none;
}
a:focus,
input:focus,
select:focus {
  outline-style: none;
}

/* 키보드로 버튼에 포커스 시 */
a:focus-visible,
textarea:focus-visible,
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible,
button:focus-visible {
  outline-style: 2px solid #f90;
  -moz-outline-style: 2px solid #f90;
  -webkit-outline-style: 2px solid #f90;
}
/* 마우스, 터치로 버튼에 포커스 시 */
a:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
input[type="radio"]:focus:not(:focus-visible),
input[type="checkbox"]:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
button:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline-style: none; /*box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);*/
  -moz-outline-style: none;
  -webkit-outline-style: none;
}
.normal {
  font-weight: 400;
}
.bold {
  font-weight: 700;
}
.bolder {
  font-weight: 800;
}
.light {
  font-weight: 300;
}

.placeholder {
  color: #d2d2d2 !important;
}

@keyframes shrink-bounce {
  0% {
    transform: scale(1);
  }
  33% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes checkbox-check {
  0% {
    width: 0;
    height: 0;
    border-color: #fff;
    transform: translate3d(0, 0, 0) rotate(45deg);
  }
  33% {
    width: 0.3em;
    height: 0;
    transform: translate3d(0, 0, 0) rotate(45deg);
  }
  100% {
    width: 0.3em;
    height: 0.6em;
    border-color: #fff;
    transform: translate3d(0, -0.5em, 0) rotate(45deg);
  }
}
/* 웹접근성 */
.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  overflow: hidden;
}
/* txt/tit */

.tit {
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
}

/*input*/
input[type="radio"] {
  position: absolute;
  left: -9999999px;
}

input[type="radio"]:checked + label > span {
  border: 1px solid #e1e1e1;
  background: #fff;
  animation: shrink-bounce 200ms cubic-bezier(0.5, 0, 0.23, 1);
}

input[type="radio"]:checked + label > span:before {
  content: "";
  position: absolute;
  top: 51%;
  left: 51%;
  margin-top: -0.4em;
  margin-left: -0.4em;
  width: 0.8em;
  height: 0.8em;
  background: #025eaa;
  border-radius: 400px;
  vertical-align: middle;
}
.select_lng_box_wrap {
  width: 100%;
  height: 54px;
  text-align: right;
}
.select_lng_box {
  width: 150px;
  height: 54px;
  float: right;
}

.input {
  width: 100%;
  height: 40px;
  background: #f9f9f9;
  border-top: none;
  border-left: none;
  border-right: none;
  line-height: 25px;
  box-sizing: border-box;
  border-bottom: 1px solid #fff;
}
.input_id {
  background: #378ad8;
}
.input_pw {
  background: #378ad8;
}
.input {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #fff;
  border: 1px solid #e2e2e2;
  text-indent: 8px;
  box-sizing: border-box;
  border-radius: 2px;
  color: #333;
}
.input_id:hover {
  border-bottom: 1px solid #daedfa !important;
  border-top: none;
  border-left: none;
  border-right: none;
}
.input_pwt:focus {
  border-bottom: 1px solid #daedfa;
  border-top: none;
  border-left: none;
  border-right: none;
}

.input_id_icon {
  position: relative;
  width: 100%;
}
.input_id_icon:after {
  position: absolute;
  left: 0px;
  top: 20px;
  content: "\f364";
  font-size: 1.6em;
  font-family: "LineAwesome";
  color: #fff;
  z-index: 1;
}
.input_id_icon_wrap {
  height: 54px;
}
.input_id_icon_wrap:hover .input_id_icon:after {
  color: #daedfa;
}
.input_id_icon_wrap .placeholder {
  color: #fff !important;
}
.input_pw_icon_wrap .placeholder {
  color: #fff !important;
}

.input_pw_icon {
  position: relative;
  width: 100%;
}
.input_pw_icon:after {
  position: absolute;
  left: 0px;
  top: 20px;
  content: "\f271";
  font-size: 1.6em;
  font-family: "LineAwesome";
  color: #fff;
  z-index: 1;
}
.input_pw_icon_wrap {
  height: 54px;
}
.input_pw_icon_wrap:hover .input_pw_icon:after {
  color: #daedfa;
}

.input_sel {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #fff;
  border: 1px solid #e2e2e2;
  box-sizing: border-box;
  border-radius: 2px;
}
.input_sel {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #fff;
  border: 1px solid #e2e2e2;
  box-sizing: border-box;
  border-radius: 2px;
}
.input_sel:focus {
}
.input_txt {
  width: 100%;

  background: #fff;
  border: 1px solid #e2e2e2;
  text-indent: 8px;
  box-sizing: border-box;
  border-radius: 2px;
  color: #333;
  height: 40px;
  line-height: 40px;
}
.input_txt:hover {
  border: 1px solid #43acff;
}
.input_txt:focus {
  border: 1px solid #43acff;
}
.input_txt_scr {
  width: 100%;
  height: 200px;
  vertical-align: top;
  overflow: scroll;
}

.input_100 {
  width: 100%;
  height: 40px;
  background: #fff;
  border: 1px solid #9e9e9e;
  line-height: 25px;
  box-sizing: border-box;
}
.input_50 {
  width: 50%;
  height: 40px;
  background: #fff;
  border: 1px solid #9e9e9e;
  line-height: 25px;
  box-sizing: border-box;
}

.input_file {
  text-indent: 0 !important;
}
.input_dis {
  background: #f5f5f5;
}

/* Textarea */
.textarea {
  width: 100%;
  padding: 0 7px;
  background: #fff;
  border: 1px solid #9e9e9e;
  line-height: 25px;
}
.textarea:hover {
  border: 1px solid #478bf4;
}
.textarea:focus {
  background: #f7f7f7;
  border: 1px solid #478bf4;
}
/* color */

.grn {
  background-color: #51a699;
}
.blu {
  background-color: #2977b7;
}
.skyblu {
  background-color: #5c87c4;
}
/*space*/

/* bg */

/* bg */
.grey {
  background-color: #f1f1f1;
}

/* space */

.space_L5 {
  padding: 0 10px;
  display: inline-block;
}
.space_L15 {
  padding-left: 15px;
}

.space_R3 {
  padding-right: 3px;
}
.space_R5 {
  padding-right: 5px;
}
.space_R8 {
  padding-right: 8px;
}
.space_R10 {
  display: inline-block;
  padding-right: 10px;
}
.space_L10 {
  display: inline-block;
  padding-left: 10px;
}
.space_L30 {
  display: inline-block;
  padding-left: 28px;
}
.space_R15 {
  padding-right: 15px;
}
.space_B50 {
  padding-bottom: 50px;
}
.space_B100 {
  padding-bottom: 100px;
}

.height_10 {
  margin-top: 10px;
}
.height_20 {
  margin-top: 20px;
}
.height_30 {
  margin-top: 30px;
}
.height_40 {
  margin-top: 40px;
}
.height_50 {
  margin-top: 50px;
}
.height_100 {
  margin-top: 100px;
}
.height_200 {
  display: inline-block;
  height: 200px !important;
}
.height_300 {
  display: inline-block;
  height: 300px !important;
}
.mb_20 {
  margin-bottom: 20px;
}
/* width */

.width_70 {
  width: 70px;
}
.width_80 {
  width: 80px;
}
.width_100 {
  width: 100px;
}
.width_130 {
  width: 130px;
}
.width_144 {
  width: 144px;
}

.width_150 {
  width: 150px;
}
.width_180 {
  width: 180px;
}
.width_200 {
  width: 200px;
}
.width_250 {
  width: 250px;
}
.width_300 {
  display: inline-block;
  width: 300px;
}
.width_350 {
  width: 350px;
}
.width_380 {
  width: 380px;
}
.width_400 {
  width: 400px;
}
.width_430 {
  width: 430px;
}

.width_450 {
  width: 450px;
}
.width_500 {
  width: 500px;
}
.width_700 {
  width: 700px;
}

.width_100p {
  width: 100%;
  display: inline-block;
  float: left;
}
.width_70p {
  width: 70%;
  display: inline-block;
  float: left;
}

.width_60p {
  width: 60%;
  display: inline-block;
  float: left;
}
.width_48p_l {
  width: 48%;
  display: inline-block;
  float: left;
}

.width_50p_r {
  width: 50%;
  display: inline-block;
  float: right;
}
.width_50p {
  width: 50%;
  display: inline-block;
  float: left;
}
.width_46p {
  width: 46%;
  display: inline-block;
}

.width_42p {
  width: 42%;
  display: inline-block;
  float: left;
}
.width_40p {
  width: 40%;
  display: inline-block;
  float: left;
}
.width_34p {
  width: 34%;
  display: inline-block;
  float: left;
}
.width_33p {
  width: 33%;
  display: inline-block;
  float: left;
}
.width_30p {
  width: 30%;
  display: inline-block;
  float: left;
}

.width_25p {
  width: 25%;
  display: inline-block;
  float: left;
}
.width_20p {
  width: 20%;
  display: inline-block;
  float: left;
}
.width_8p {
  width: 8%;
  display: inline-block;
  float: left;
}

.width_80 {
  width: 80px;
  display: inline-block;
}
.width_50 {
  width: 50px;
  display: inline-block;
}
.width_20 {
  width: 20px;
}

/*center,left,right*/
.box_center {
  text-align: center;
}
.box_100p {
  width: 100%;
}
.box_50p {
  width: 50%;
}
/* txt_color */
.red_txt {
  display: inline-block;
  padding: 10px 0;
  font-size: 14px;
  color: #ff8181;
}
/*box_left*/
.box_left {
  float: left;
}

/* font align */
.txt_left {
  text-align: left !important;
}
.txt_center {
  text-align: center !important;
}

/*font color*/
.txt_blue {
  color: #478bf4;
}
.txt_red {
  color: #ff5a71;
}
.txt_grey {
  color: #999;
}
.txt_bold {
  font-weight: bold;
}
.txt_line {
  text-decoration: underline;
}

.bor_blu {
  border: 1px solid #2977b7;
}

.bor_grn {
  border: 1px solid #51a699;
}
.bor_skyblu {
  border: 1px solid #5c87c4;
}

.inst_check {
    font-size: 14px;
    display:inline-block;
    padding-right: 10px;
}

/*select*/
.login_idcheck {
  font-size: 14px;
display:inline-block;
padding:20px 0;
}
.login_idcheck input[type="checkbox"] + label > span {
  position: relative;
  display: inline-block;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  background: #fff;
  border: 1px solid #e1e1e1;
  vertical-align: top;
  padding-left: 6px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1);
  margin-right: 6px;
  vertical-align: middle;
}
input[type="checkbox"] + label {
  width: 22px;
  display: inline-block;
  vertical-align: top;
  align-items: center;
  color: #333333;
  transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1);
}
input[type="checkbox"]:checked + label > span {
  border: 1px solid #033265;
  background: #025eaa;
  animation: shrink-bounce 200ms cubic-bezier(0.5, 0, 0.23, 1);
}
input[type="checkbox"]:checked + label > span:before {
  content: "\f17b";
  font-family: "LineAwesome";
  color: #fff;
  position: absolute;
  top: -8px;
  left: 2px;
  font-weight: 900;
}

/* 셀렉트 박스 */

select.styled {
  display: none;
}


.styled-select {
  width: 100% !important;
  padding-left: 16px;
  line-height: 40px;
  height: 40px;
  background-color: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 2px;
  font-size: 12px;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  float: left;
  text-align: left;
}
.styled-select .selected-display {
  display: block;
}
.styled-select .arrow-wrap {
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  right: 15px;
  text-align: center;
  font-size: 10px;
}
.styled-select .arrow-wrap:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #aaa;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}
.styled-select.open .arrow-wrap:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid #2196f3;
  border-top: 0;
}
.styled-select .options {
  width: 100%;
  max-height: 200px;
  background: #fff;
  overflow-y: auto;
  position: absolute;
  left: 0;
  z-index: 100;
  padding: 0;
  box-sizing: border-box;
  display: none;
  border: 1px solid #e9e9e9;
}
.styled-select .options .option {
  font-size: 12px;
  color: #1e1d1d;
  line-height: 18px;
  padding: 14px 16px;
}
.styled-select .options .option:hover {
  color: #333;
  font-weight: bold;
  background: #f1f1f1;
}
.styled-select .options .option.selected {
  color: #333;
  font-weight: bold;
}

/* Datepicker */

.sch_tbl_input_date:after {
  position: absolute;
  right: 10px;
  top: 8px;
  content: "\f15c";
  font-size: 1.6em;
  font-family: "LineAwesome";
  color: #d6d6d6;
  font-weight: 900;
}
.S_date {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0;
  border: 1px solid #d6d6d6;
  background: #ffffff;
  box-sizing: border-box;
  font-size: 14px;
  max-width: 144px;
}
.S_date:hover {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0;
  border: 1px solid #37a5f2;
  background: #ffffff;
  box-sizing: border-box;
}
.S_date:focus {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0;
  border: 1px solid #37a5f2;
  background: #f2f3f3;
  box-sizing: border-box;
}
.E_date {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0;
  border: 1px solid #d6d6d6;
  background: #ffffff;
  box-sizing: border-box;
  font-size: 14px;
  max-width: 144px;
}
.E_date:hover {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0;
  border: 1px solid #37a5f2;
  background: #ffffff;
  box-sizing: border-box;
}
.E_date:focus {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0;
  border: 1px solid #37a5f2;
  background: #f2f3f3;
  box-sizing: border-box;
}

.only_date {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0;
  border: 1px solid #d6d6d6;
  background: #ffffff;
  box-sizing: border-box;
  font-size: 14px;
}
/*intro Layout*/
#login_container {
  height: 100%;
  position: relative;
  width: 100%;
  background-color: #f9f9f9;
}
#intro_container {
  position: relative;
  height: 100%;
  width: 100%;
  background: #f5f5f5;
}
#intro_container_img {
  height: 100%;
  width: 100%;
}
#intro_content {
  width: 100%;
  min-height: 100%;
  margin-top: 0;
  margin-bottom: -56px;
}
#intro_content #intro_content_area {
  width: 100%;
  padding-top: 0;
  padding-bottom: 56px;
  text-align: left;
}
#intro_footer {
  width: 100%;
  height: 56px;
  background: #232731;
}

/* width */
.width_70 {
  width: 70px;
}
.width_80 {
  width: 80px;
}
.width_100 {
  width: 100px;
}
.width_130 {
  width: 130px;
}
.width_144 {
  width: 144px;
}

.width_150 {
  width: 150px;
}
.width_180 {
  width: 180px;
}
.width_200 {
  width: 200px;
}
.width_250 {
  width: 250px;
}
.width_300 {
  width: 300px;
}
.width_350 {
  width: 350px;
}
.width_380 {
  width: 380px;
}
.width_400 {
  width: 400px;
}
.width_430 {
  width: 430px;
}

.width_450 {
  width: 450px;
}
.width_500 {
  width: 500px;
}
.width_700 {
  width: 700px;
}

.width_100p {
  width: 100%;
  display: inline-block;
  float: left;
}
.width_70p {
  width: 70%;
  display: inline-block;
  float: left;
}

.width_60p {
  width: 60%;
  display: inline-block;
  float: left;
}
.width_48p_l {
  width: 48%;
  display: inline-block;
  float: left;
}

.width_50p_r {
  width: 50%;
  display: inline-block;
  float: right;
}
.width_50p {
  width: 50%;
  display: inline-block;
  float: left;
}
.width_46p {
  width: 46%;
  display: inline-block;
}

.width_42p {
  width: 42%;
  display: inline-block;
  float: left;
}
.width_40p {
  width: 40%;
  display: inline-block;
  float: left;
}
.width_34p {
  width: 34%;
  display: inline-block;
  float: left;
}
.width_33p {
  width: 33%;
  display: inline-block;
  float: left;
}
.width_30p {
  width: 30%;
  display: inline-block;
  float: left;
}

.width_25p {
  width: 25%;
  display: inline-block;
  float: left;
}
.width_20p {
  width: 20%;
  display: inline-block;
  float: left;
}
.width_8p {
  width: 8%;
  display: inline-block;
  float: left;
}

.width_80 {
  width: 80px;
  display: inline-block;
}
.width_50 {
  width: 50px;
  display: inline-block;
}
.width_20 {
  width: 20px;
}

.red_dot {
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: #ff8181;
  display: inline-block;
  margin-bottom: 2px;
  margin-left: 5px;
}