/* Default Style */
@font-face {
  font-family: "notosans";
  font-weight: 300;
  src: url("../fonts/NotoSansCJKkr/NotoSansCJKkr-DemiLight.eot");
  src: url("../fonts/NotoSansCJKkr/NotoSansCJKkr-DemiLight.eot") format("embedded-opentype"),
  url("../fonts/NotoSansCJKkr/NotoSansCJKkr-DemiLight.woff") format("woff"),
  url("../fonts/NotoSansCJKkr/NotoSansCJKkr-DemiLight.otf") format("truetype");
}

@font-face {
  font-family: "notosans";
  font-weight: 400;
  src: url("../fonts/NotoSansCJKkr/NotoSansCJKkr-Regular.eot");
  src: url("../fonts/NotoSansCJKkr/NotoSansCJKkr-Regular.eot") format("embedded-opentype"),
  url("../fonts/NotoSansCJKkr/NotoSansCJKkr-Regular.woff") format("woff"),
  url("../fonts/NotoSansCJKkr/NotoSansCJKkr-Regular.otf") format("truetype");
}

@font-face {
  font-family: "notosans";
  font-weight: 500;
  src: url("../fonts/NotoSansCJKkr/NotoSansCJKkr-Medium.eot");
  src: url("../fonts/NotoSansCJKkr/NotoSansCJKkr-Medium.eot") format("embedded-opentype"),
  url("../fonts/NotoSansCJKkr/NotoSansCJKkr-Medium.woff") format("woff"),
  url("../fonts/NotoSansCJKkr/NotoSansCJKkr-Medium.otf") format("truetype");
}

@font-face {
  font-family: "notosans";
  font-weight: 700;
  src: url("../fonts/NotoSansCJKkr/NotoSansCJKkr-Black.eot");
  src: url("../fonts/NotoSansCJKkr/NotoSansCJKkr-Black.eot") format("embedded-opentype"),
  url("../fonts/NotoSansCJKkr/NotoSansCJKkr-Black.woff") format("woff"),
  url("../fonts/NotoSansCJKkr/NotoSansCJKkr-Black.otf") format("truetype");
}

#skipnavi {
  position: relative;
  z-index: 9999;
}

#skipnavi a {
  position: absolute;
  top: -10000px;
}

#skipnavi a:hover, #skipnavi a:active, #skipnavi a:focus {
  display: block;
  font-size: 1rem;
  padding: 10px;
  background-color: #222;
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff
}

html {
  width: 100%;
  height: 100%;
  font-size: 100%;
}

body {
  font-family: "notosans", "Roboto", "Apple Gothic", "맑은고딕",
  "Malgun Gothic", Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.875;
  height: 100%;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, form, fieldset, p,
button {
  margin: 0;
  padding: 0;
}

body, h1, h2, h3, h4, input, select, button, textarea {
  color: #666;
}

body {
  background-color: #fff;
  *word-break: break-all;
  -ms-word-break: break-all;
}

img, fieldset, iframe {
  border: 0 none;
}

li {
  list-style: none;
}

input, select, button {
  vertical-align: middle;
  font-family: "notosans", "Roboto", "Apple Gothic", "맑은고딕",
  "Malgun Gothic", Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
}

img {
  vertical-align: middle;
}

i, em, address {
  font-style: normal;
}

label, button {
  cursor: pointer;
}

button {
  margin: 0;
  padding: 0;
  font-family: "notosans", "Roboto", "Apple Gothic", "맑은고딕",
  "Malgun Gothic", Helvetica, Arial, sans-serif;
}

a {
  text-decoration: none;
}

a:hover:not(.notunderline) {
  text-decoration: underline;
}

a:link, a:visited {
  color: #666666;
}

a:hover, a:active, a:focus {
  color: #333333;
}

button * {
  position: relative;
}

option {
  padding-right: 6px;
}

hr, caption {
  display: none;
}

legend {
  *width: 0;
}

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

textarea {
  resize: none;
  font-family: "notosans", "Roboto", "Apple Gothic", "맑은고딕",
  "Malgun Gothic", Helvetica, Arial, sans-serif;
}

dt, strong, b {
  font-weight: 500;
}

img {
  max-width: 100%;
}

img.internal-network {
  height: 711px;
}

:-ms-input-placeholder {
  color: #bbb !important;
}

::-webkit-input-placeholder {
  color: #bbb !important;
}

::-moz-placeholder {
  color: #bbb !important;
}

/*Form style*/

select {
  color: #666;
  padding-right: 30px;
  padding-left: 8px;
  line-height: 1.1;
  border-radius: 3px;
  height: 36px;
  border: 1px solid #c8d0da;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  background: #fff url(../images/bg_selectArrow.png) right center no-repeat
}

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

input[type=text], input[type=tel], input[type=date], input[type=password],
input[type=email] {
  color: #666;
  line-height: 1.1;
  height: 22px;
  border: 1px solid #c8d0da;
  background: #fff;
  border-radius: 3px;
  text-indent: 5px;
}

input[type=file] {
  color: #666;
  line-height: 1.1;
  height: 32px;
  padding-left: 5px;
}

textarea {
  border: 1px solid #c9d4dd;
  border-radius: 3px;
  padding-left: 5px;
}

input[type=checkbox] {
  border: 1px solid #c8d0da;
}

input.disable {
  background: #f4f9f9
}

/* align */
.tl {
  text-align: left !important;
}

.tr {
  text-align: right !important;
}

/* float */
.fr {
  float: right !important;
}

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

/* Margin Set */
.ml15 {
  margin-left: 15px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.mb15 {
  margin-bottom: 15px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt30 {
  margin-top: 30px !important;
}

/* Padding Set */
.pr10 {
  padding-right: 10px !important;
}

.hidden {
  display: none !important;
}

/* 화면에서는 감추되 화면 낭독기는 읽어야 하는 내용에 쓴다.
   .hidden 은 display:none 이라 낭독기도 건너뛰므로 표 설명이나 숨김 제목에는 쓸 수 없다 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}