/* 전체 */

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

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

body {
    background-color: #1f1f1f;
    color: #ffffff;
    font-family: "NEXON Lv1 Gothic OTF";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff")
      format("woff");
    font-weight: normal;
    font-style: normal;
}
article {
    display: flex;
    flex-direction: column;
}
.copyright-text {
    font-family: "NEXON Lv1 Gothic OTF";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff")
      format("woff");
    font-weight: normal;
    font-style: normal;
}

/* 시작화면 */
.question {
    display: none;
}
.main-title {
    font-size: 14px;
    color: #7c7c7c;
}
.sub-title {
    font-size: 24px;
    font-weight: 100;
    color: #ebebeb;
}
.updown-slash {
    width: 166px;
    margin: 0 auto;
}
.start-cover {
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-start {
    font-size: 16px;
    color:#ff9300;
    background-color: #1f1f1f;
    border:#1f1f1f;
}
.btn-start, .btn-start:visited, .btn-start:hover, .btn-start:active {
    font-size: 16px;
    color:#ff9300;
    background-color: #1f1f1f;
    border:#1f1f1f;
}
.btn-start:active, .btn-start:focus {
    background-color: #ff9300 !important;
    border:#1f1f1f !important;
    font-size: 16px;
    color:#ffffff;
}

/* 문제 화면 */
.btn-answer, .btn-answer:visited, .btn-answer:hover, .btn-answer:active, .btn-answer:focus {
    background-color: #1f1f1f;
    border:#1f1f1f;
    width: 288px;
    margin: 0 auto;
    font-size: 15px;
    color: #ffffff;
}
.btn-answer:hover {
    background-color: #ff9300 !important;
    border:#1f1f1f !important;
    width: 288px;
    margin: 0 auto;
    font-size: 15px;
    color: #ffffff;
}
.progress-bar {
    background-color: #ff9300;
}
.progress {
    background-color: #525764;
}
.likelion-logo {
    width: 96px;
    margin: 0 auto;
}
.slash-element {
    width: 24px;
    margin: 0 auto;
}
.question-content {
    font-size: 17px;
    color: #ff9300;
}
.rectangle {
    width: 288px;
    height: 8px;
    background-color: #383a43;
    margin: 0 auto;
}
.mid-rectangle {
    width: 288px;
    height: 1px;
    background-color: #383a43;
    margin: 0 auto;
}

/* 결과 화면 */
.result-message {
    color: #ff9300;
    margin: 0 auto;
    font-size: 24px;
    font-weight: 100;
}
.result-animal {
    font-size: 18px;
    font-weight: 100;
    color: #ebebeb;
}
.result-explain {
    font-size: 15px;
    font-weight: normal;
    color: #ebebeb;
}
.share-message {
    margin: 0 auto;
    color:#383a43;
    font-size: 15px;
    font-weight: 100;
}
.result {
    display: none;
}
#img {
    width: 300px;
    height: 300px;
    margin: 0 auto;
}
.share {
    margin: 0 auto;
}
.kakao_ad {
    width: 320px;
    margin: 0 auto;
}
.banner {
    display: flex;
    justify-content: center;
    width: 300px;
    margin: 0 auto;
}
.banner-img {
    width: 300px;
    height: 405.17px;
}