@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Monda");
@import url("https://fonts.googleapis.com/css?family=Work+Sans:200,400");
@import url('https://fonts.googleapis.com/css2?family=Days+One&display=swap');
/* 
 * NanumSquare Web Fonts
*/
@font-face {
 font-family: 'NanumSquare';
 font-weight: 400;
 font-style: normal;
 src: url('../fonts/NanumSquareR.eot');
 src: url('../fonts/NanumSquareR.eot?#iefix') format('embedded-opentype'),
   url('../fonts/NanumSquareR.woff') format('woff'),
   url('../fonts/NanumSquareR.ttf') format('truetype');
}
@font-face {
 font-family: 'NanumSquare';
 font-weight: 600;
 font-style: normal;
 src: url('../fonts/NanumSquareB.eot');
 src: url('../fonts/NanumSquareB.eot?#iefix') format('embedded-opentype'),
   url('../fonts/NanumSquareB.woff') format('woff'),
   url('../fonts/NanumSquareB.ttf') format('truetype');
}

/* Noto Sans */ 
@font-face { 
font-family: 'notokr'; 
src: url('../fonts/notokr-light.eot'); 
src: url('../fonts/notokr-light.eot?#iefix') format('embedded-opentype'), 
url('../fonts/notokr-light.woff2') format('woff2'), 
url('../fonts/notokr-light.woff') format('woff'), 
url('../fonts/notokr-light.ttf') format('truetype'), 
url('../fonts/notokr-light.svg#notokr-regular') format('svg'); 
font-weight: 300; 
font-style: normal; 
}
@font-face { 
font-family: 'notokr'; 
src: url('../fonts/notokr-regular.eot'); 
src: url('../fonts/notokr-regular.eot?#iefix') format('embedded-opentype'), 
url('../fonts/notokr-regular.woff2') format('woff2'), 
url('../fonts/notokr-regular.woff') format('woff'), 
url('../fonts/notokr-regular.ttf') format('truetype'), 
url('../fonts/notokr-regular.svg#notokr-regular') format('svg'); 
font-weight: 400; 
font-style: normal; 
}
@font-face { 
font-family: 'notokr'; 
src: url('../fonts/notokr-bold.eot');
src: url('../fonts/notokr-bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/notokr-bold.woff2') format('woff2'),
url('../fonts/notokr-bold.woff') format('woff'),
url('../fonts/notokr-bold.ttf') format('truetype'),
url('../fonts/notokr-bold.svg#notokr-bold') format('svg');
font-weight: 600; 
font-style: normal;
}


/* 표준 선택자 */
* {-webkit-text-size-adjust:none; box-sizing:border-box}
::selection {color:#fff; background:#21bbb1}
body, td, input, textarea, div, th, p, a, address ul {font-family: 'Montserrat','notokr';  margin:0; padding:0; font-size:16px; color:#333; line-height:1.75}
a:link      {color:#333333; text-decoration:none}
a:visited   {color:#333333; text-decoration:none}
a:active    {color:#333333; text-decoration:none}
a:hover     {color:#666666; text-decoration:none}
form, p, h1, h2, h3, h4, h5, h6 {margin:0; padding:0}
h1, h2, h3, h4, h5, h6 {line-height:1}
fieldset, img {margin:0; padding:0; border:0}
caption, legend {display:none}
address, em, i {font-style:normal}
ul, ol {list-style-type:none; margin:0; padding:0}
input, button, select {font:inherit}
.clear {clear:both}
*:focus {outline:none}
/* 본문바로가기 */
#skipmenu {position:relative; margin:0 auto; padding:0; width:100%; z-index:1000}
a.skip_navi {position:absolute; display:block; width:100%; left:0; text-align:center; top:-10000px; font-size:13px; padding:0; margin:0; z-index:500;}
a.skip_navi:hover, a.skip_navi:focus, a.skip_navi:active {position:absolute; top:0 !important; margin:0; padding:10px 0; font-weight:bold; color:#fff; background:#21bbb1; z-index:1000}

.mobile-style {display:none !important;}
.pc-style {display:inline-block !important;}
.displaynone {display:none !important}
.displaybrblock {display:none}
@media screen and (max-width:768px) {
.mobile-style {display:inline-block !important;}
.pc-style {display:none !important;}
.displaybrnone {display:none !important}
.displaybrblock {display:block !important}
}

/* loading indicator */
#page-loader {position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; z-index:9999}
#page-loader > .inner2 {display:table; width:100%; height:100%}
.spinner {
  width: 40px;
  height: 40px;
  position: relative;
  margin:25% auto;
}
.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #121212;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
@media screen and (max-width:768px) {
.spinner {margin: 60% auto;}
}
.splitting .char {
  animation: slide-in 1s cubic-bezier(.5, 0, .5, 1) both;
  animation-delay: calc(60ms * var(--char-index));
}
@keyframes slide-in {
  from {
    /*transform: translateY(-1em) rotate(-.5turn) scale(0.5);*/
 transform: translateX(1.5em) scale(1);
    opacity: 0;
  }
}