@font-face {
    font-family: 'NEXON Lv2 Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@import url('//fonts.googleapis.com/earlyaccess/kopubbatang.css');

.bg-gray {
    background-color: #EAE9E9;
}

.bg-board {
    background-color: #4475CA;
}

/* 3D Hover */
.transition-3d-hover {
    transition: all 0.2s ease-in-out;
}

.transition-3d-hover:hover, .transition-3d-hover:focus {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
}

.link-underline {
    border-bottom: 0.0625rem dashed #97a4af;
}

.center-cropped {
    background-position: center center;
    background-repeat: no-repeat;
    /*background-size: cover;*/
}

.board-title-img {
    width: 500px;
    height: autopx;
    background-position: center center;
    background-repeat: no-repeat;
}

.bg-image {
    display: block;
    width: 100%;
    height: auto;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    opacity: 0;
    transition: .5s ease;
}

.overlay-container:hover .overlay {
    opacity: 1;
}

/* Home overlay replacement (img/home/f01.png -> CSS/Text) */
.kz-home-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
}

.kz-home-overlay--blue { background-color: #4475CA; }
.kz-home-overlay--teal { background-color: #3aaec2; }
.kz-home-overlay--purple { background-color: #9a73b6; }

.kz-home-overlay__inner {
    width: 100%;
    height: 100%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    padding: 1.6rem 1.4rem;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.kz-home-overlay__content {
    width: 100%;
    max-width: 360px;
    color: #ffffff;
}

.kz-home-overlay__title {
    font-family: "NEXON Lv2 Gothic";
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1.2;
    text-align: center;
    color: #ffffff;
    margin: 0 0 1.5rem 0;
}

.kz-home-overlay__list {
    margin: 0;
    padding-left: 1.25rem;
}

.kz-home-overlay__list li {
    font-family: "NEXON Lv2 Gothic";
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.5;
    margin-bottom: 0.9rem;
}

.kz-home-overlay__list li:last-child {
    margin-bottom: 0;
}

.kz-home-overlay__list li::marker {
    font-size: 1.35em;
    color: #ffffff;
}

/* Tight spacing (used for '키즈젠의 장점') */
.kz-home-overlay--small-body .kz-home-overlay__inner {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

.kz-home-overlay--small-body .kz-home-overlay__title {
    margin-bottom: 1.0rem;
}

.kz-home-overlay--small-body .kz-home-overlay__list li {
    font-size: 0.98rem;
    line-height: 1.4;
    margin-bottom: 0.55rem;
}

@media (max-width: 991.98px) {
    .kz-home-overlay__title { font-size: 1.55rem; }
    .kz-home-overlay__list li { font-size: 1.1rem; }
    .kz-home-overlay--small-body .kz-home-overlay__list li { font-size: 0.92rem; }
}

@media (max-width: 575.98px) {
    .kz-home-overlay__title { font-size: 1.35rem; margin-bottom: 1.1rem; }
    .kz-home-overlay__list li { font-size: 1.0rem; }
    .kz-home-overlay--small-body .kz-home-overlay__list li { font-size: 0.88rem; }
}

.center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.header-text {
    font-family: 'KoPub Batang', serif;
    line-height: 1.2;
}

.title-text {
    font-family: "NEXON Lv2 Gothic";
    font-weight: lighter;
}

.btn-login {
    color: #fff;
    background-color: #fbad00;
    border-color: #fbad00;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn-login:hover {
    color: #fff;
    background-color: #fbad00;
    border-color: #fbad00;
}

.btn-kakao {
    color: #000;
    font-weight: bold;
    background-color: #FEE500;
    border-color: #FEE500;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn-naver {
    color: #fff;
    font-weight: bold;
    background-color: #1EC800;
    border-color: #1EC800;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.rounded-border {
    border:1px solid rgba(0, 158, 212, 0.8);
    border-radius: 0.5rem;
    border-style: dotted;
}

.rounded-border-bold {
    border:1px solid rgba(0, 158, 212, 0.8);
    border-radius: 1.5rem;
    border-style: dotted;
}