html,
body {
  font-family: 'Noto Sans KR', sans-serif !important;
  font-weight: 200;
  /* overflow-x: hidden; */ /* Prevent scroll on narrow devices */
}

body {
  padding-top: 50px;
  margin-bottom: 30px;
}

b {
  font-weight:700;
}

a.nodec {
  text-decoration: none;
  color:inherit;
}

table tr td {white-space: normal; word-break: normal;}
.tlf {
  width:auto;
  table-layout: fixed
}

[contenteditable]:focus {
    outline: 0px solid transparent;
}

[placeholder]:empty::before {
    content: attr(placeholder);
    color: #555; 
}

[placeholder]:empty:focus::before {
    content: "";
}

a.title {text-decoration: none; color:#000;}

@media (max-width: 991.98px) {
  .offcanvas-collapse {
    position: fixed;
    top: 50px; /* Height of navbar */
    bottom: 0;
    left: -200px;
    width: 200px;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: #563d7c;
    transition-timing-function: ease-in-out;
    transition-duration: .3s;
    transition-property: left, visibility;
  }
  .offcanvas-collapse.open {
    left: 0;
    visibility: visible;
  }
}

li.nav-item {margin-bottom:0;}
.nav-link.dropdown-toggle {white-space: inherit;}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: hidden;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-underline .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
  color: #6c757d;
}

.nav-underline .nav-link:hover {
  color: #007bff;
}

.nav-underline .active {
  font-weight: 500;
  color: #343a40;
}

.navbar-dark {background-color:#333;}

.text-white-50 { color: rgba(255, 255, 255, .5); }

.bg-purple { background-color: #6f42c1; }

.lh-100 { line-height: 1; }
.lh-125 { line-height: 1.25; }
.lh-150 { line-height: 1.5; }

.w-90 {width:90%;}

.cut {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.helper {position:absolute; border:1px solid #999; border-radius:3px; background:RGBA(255,255,255,.9); z-index:5;}
#helper2 {position:absolute; border:1px solid #999; border-radius:3px; background:RGBA(255,255,255,.9); z-index:5;}

/* blink effect */
@keyframes blink {
    0%   {opacity: 1;}
    25%  {opacity: 0;}
    50%  {opacity: 1;}
    75%  {opacity: 0;}
    100% {opacity: 1;}
}

.blink {
  position:static;
  animation: blink 1s linear 250ms;
  opacity: 1;
}

.click {cursor:pointer;}
.hiding {display:none;}

/* bootstrap override */
.input-group-text {
    background-color: #7596d3;
    color:#fff;
    border:0;
}

/* bootstrap extent */
.shadow-xs {box-shadow:0.5px 0.5px 3px #dadada}
.shadow-s {box-shadow:1px 1px 1px #ddd}
.x-scroll {overflow-x:auto; white-space: nowrap}

@media (min-width: 1450px) {
  .d-xxl-block {
      display: block!important;
  }

  .d-xxl-inline {
      display: inline!important;
  }
}

@media (max-width: 991.98px) {
  .d-collapse-inline {
    display: inline !important;
  }
}

.copy.url {
  background-position: center;
  transition: background 0.8s;
}
.copy.url:hover {
  background: #ffeeba radial-gradient(circle, transparent 1%, #eee3cd 1%) center/15000%;
}
.copy.url:active {
  background-color: #fff3cd;
  background-size: 100%;
  transition: background 0s;
}

.glaze {
  background-position: center;
  transition: background 0.8s;
}

.glaze:hover {
  background: #fff radial-gradient(circle, transparent 1%, #eee 1%) center/15000%;
}

.glaze:active {
  background-color: #fff;
  background-size: 100%;
  transition: background 0s;
}

.attachFile {display:table; padding:8px 14px; margin:6px 0px; border:1px solid #ddd;}
.attachFile a {color:black; margin:10px;}

#search {width:100px; max-width:40%; border:0px; background-color:RGBA(255,255,255,.1)}
#search::placeholder {color:RGBA(255,255,255,.5);}

.searchLabel {display:none; font-size:0.8rem; color:RGBA(255,255,255,.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.searchLabel.dark {color:RGBA(0,0,0,.3);}

#userLayer {position:absolute; width:300px; top:55px; right:10px; background-color:RGBA(30,30,30,.9); color:#fff; display:none;}
#userLayer hr {background:#444;}
#userLayer a {color:#fff;}
#userLayer a:hover {text-decoration:none;}

@media (min-width: 992px) {
  body {
    padding-top:56px; 
  }
  #search {
      display: none;
  }
}

@media (max-width: 991.8px) {
  #userLayer {
    width:200px; top:50px; right:5px; font-size:0.9em;
  }
}

@media (max-width: 330px) {
  #search {
      display: none;
  }
}

.sidePromotion {
  width:16%;
  padding-bottom: 10px;
  position:absolute; 
  background:#f9f9f9; 
  right:20px; 
  top:200px; 
  box-shadow:#bbb 1px 1px 2px; 
  text-align:center;
}

.sidePromotion img.banner{ width:70%; margin-top:10px; }
.sidePromotion img.icon{ width:30%; }

@media screen and (max-width: 1800px){
  .sidePromotion { width:8%; }
  .sidePromotion img.icon{ width:70%; }
  .sidePromotion img.banner{ width:90%; }
}

#search {width:100px; max-width:40%; border:0px; background-color:RGBA(255,255,255,.1)}
#search::placeholder {color:RGBA(255,255,255,.5);}

.searchLabel {display:none; font-size:0.8rem; color:RGBA(255,255,255,.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.searchLabel.dark {color:RGBA(0,0,0,.3);}

#userLayer {position:absolute; width:300px; top:55px; right:10px; background-color:RGBA(30,30,30,.9); color:#fff; display:none;}
#userLayer hr {background:#444;}
#userLayer a {color:#fff;}
#userLayer a:hover {text-decoration:none;}

@media (min-width: 992px) {
  #search {
      display: none;
  }
}

@media (max-width: 991.8px) {
  #userLayer {
    width:200px; top:50px; right:5px; font-size:0.9em;
  }
}

/* 330픽셀 이하일 때 */
@media (max-width: 330px) {
  #search {
      display: none;
  }
}

.dpSm {display:none;}  
.forMobile {display:none}
@media (max-width: 575.98px) {
  .forMobile {display:block}
  .dpLg {display:none;}
  .dpSm {display:table-cell;}  
}

@media (max-width: 410px) {
  .result table {font-size:0.8rem;} 
}

.adWrap { height:100px; padding:0px}

.intro .nav {display:block !important; overflow-y:auto; white-space: nowrap}
.intro .nav li {display:inline-block; margin-right:10px; font-weight:bold; padding-right:10px; margin-bottom:15px; font-size:1.1rem;}
.intro .nav li a {display:block; text-decoration: none; color:#555;}
.intro .nav li a.active {color:#000;}
.intro .nav li a.active::after {content:""; position:relative; top:4px; display:block; height:3px; width:100%; background-color:#000; margin:0 auto;}