@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap");
@font-face { font-family: 'CookieRunOTF-Bold'; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/CookieRunOTF-Bold00.woff") format("woff"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'Binggrae'; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Binggrae.woff") format("woff"); font-weight: normal; font-style: normal; }

body, button { font-weight: normal; background-color: #7DAAF0; font-family: "Noto Sans KR", sans-serif; word-break: keep-all; user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

header { background-color: white; z-index: 2; }

.bg-point { background-color: #7DAAF0; }

.bg-point2 { background-color: #F6F6F6 !important; }

.bg-point3 { background-color: #E3F2FF !important; }

.btn-point { color: white !important; background-color: black; border-radius: 0; }

.btn-point:hover { color: white !important; background-color: black; border-radius: 0; }

.btn-point-outline { color: white !important; background-color: black; border-radius: 0; }

.btn-point-outline:hover { color: white !important; background-color: black; border-radius: 0; }

.btn-point-secondary { color: #7DAAF0 !important; background-color: #F6F6F6; }

.btn-fat { padding: 1rem 1rem; }

.badge-secondary { color: #fff; background-color: #aaaaaa; border-radius: 0; }

.text_wrapper { position: relative; display: block; overflow: hidden; padding-top: 0.2em; }

.letter { display: inline-block; }

.button_inner { display: flex; align-items: center; height: 100%; justify-content: center; }

#logo_inner { display: none; }

#start_inner { position: relative; font-family: 'Binggrae'; }

#start_inner img { width: 100%; margin-left: auto; margin-right: auto; height: auto; }

#start_inner #main_decoration { width: 8%; height: auto; margin-left: auto; margin-right: auto; margin-bottom: -11%; animation: hypnosis 1s ease-in-out alternate infinite; }

@keyframes hypnosis { 0% { transform: rotate(-30deg);
    transform-origin: top; }
  100% { transform: rotate(30deg);
    transform-origin: top; } }

#start_inner h1 { font-family: 'CookieRunOTF-Bold'; font-size: 35px; letter-spacing: 2px; }

#start_inner h2 { font-size: 20px; font-weight: normal; letter-spacing: 1px; }

#start_inner #test_start { font-family: 'CookieRunOTF-Bold'; color: black !important; background-color: white; border: 2px solid black; border-radius: 999px; font-size: 28px; line-height: 1.0; letter-spacing: 2px; margin-left: auto; margin-right: auto; }

#start_inner #test_view { font-family: 'Binggrae'; font-size: 16px; line-height: 16px; }

#start_inner .sponsor_row { margin-left: 18%; margin-right: 7%; }

#start_inner .sponsor_zone { display: block; margin-left: auto; margin-right: auto; background-color: transparent; user-select: none; }

#start_inner .sponsor_zone img { width: 100%; height: auto; }

#start_inner #main_poomang_logo { padding-right: 10%; }

#start_inner #collabo_decoration { padding-left: 15%; padding-right: 5%; }

#start_inner .mt_1percent { margin-top: 1%; }

#start_inner #sponsor_logo { padding-left: 15%; padding-right: 35%; }

#intro_inner { display: none; cursor: pointer; background-color: #7DAAF0; font-family: 'Binggrae'; font-size: 20px; }

#intro_inner a, #intro_inner a:active { color: white; border-bottom: 2px solid white; }

#intro_inner .intro_motion { background-color: transparent; height: 0; }

@media (max-width: 500px) { #intro_inner .intro_motion { width: 100vw; } }

@media (min-width: 501px) { #intro_inner .intro_motion { width: 500px; } }

#intro_inner #intro_motion_upper { z-index: 1; position: absolute; top: 0; }

#intro_inner #intro_motion_lower { z-index: 1; position: absolute; bottom: 0; }

#intro_inner #intro2 { display: none; }

#intro_inner #intro2 span { opacity: 0; }

#progress_inner { display: none; border: none; font-size: 14px; }

#progress_inner .progress_row { font-size: 18px; font-family: 'Binggrae'; }

#progress_inner .progress_row .progress_bar { background-color: white; border-radius: 999px; height: 6px; }

#progress_inner .progress_row .progress_bar .progress_gauge { width: 0%; border-radius: 999px; background-color: black; height: inherit; border-radius: inherit; }

#progress_inner .progress_row img { position: absolute; width: 25px; height: auto; left: 0; margin-left: -10px; top: -18px; }

.question_inner { position: relative; display: none; }

.question_inner .title_row h1 { font-size: 20px; font-family: 'Binggrae'; }

.question_inner .next_question, .question_inner .next_question:hover { min-height: 86px; }

.question_inner .next_question p, .question_inner .next_question:hover p { font-size: 18px; }

#question_narration_inner { display: none; font-size: 20px; font-family: 'Binggrae'; animation: fadeOut 1s linear forwards; animation-delay: 6s; }

#question_narration_inner span { opacity: 0; animation: fadeIn 1.5s linear forwards; }

#question_narration_inner span:nth-child(1) { animation-delay: 0s; }

#question_narration_inner span:nth-child(2) { animation-delay: 1.5s; }

#question_narration_inner span:nth-child(3) { animation-delay: 3s; }

#question_narration_inner span:nth-child(4) { animation-delay: 4.5s; }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }

#loading_inner { position: relative; display: none; }

#loading_inner * { margin: 0; padding: 0; }

#loading_inner .dna { width: 180px; margin: 0 auto; perspective: 270px; transform-style: preserve-3d; letter-spacing: -5px; }

#loading_inner .ele { width: 6px; height: 6px; display: inline-block; animation: rotate 3s linear infinite; transform: rotateX(-360deg) translateZ(0); transform-style: preserve-3d; margin-left: 0px; }

#loading_inner .ele:nth-of-type(2n) .dot:before { background: black; }

#loading_inner .dot { width: inherit; height: inherit; transform: translateZ(-20px); transform-style: preserve-3d; }

#loading_inner .dot:before { content: ''; width: inherit; height: inherit; display: block; background: white; border-radius: 50%; animation: rotate 3s linear infinite reverse; transform: rotateX(-360deg) translateZ(0); }

#loading_inner .ele:nth-of-type(1), #loading_inner .ele:nth-of-type(1) .dot:before { animation-delay: -0.1s; }

#loading_inner .ele:nth-of-type(1):nth-of-type(odd) { animation-delay: -1.6s; }

#loading_inner .ele:nth-of-type(2), #loading_inner .ele:nth-of-type(2) .dot:before { animation-delay: -0.2s; }

#loading_inner .ele:nth-of-type(2):nth-of-type(odd) { animation-delay: -1.7s; }

#loading_inner .ele:nth-of-type(3), #loading_inner .ele:nth-of-type(3) .dot:before { animation-delay: -0.3s; }

#loading_inner .ele:nth-of-type(3):nth-of-type(odd) { animation-delay: -1.8s; }

#loading_inner .ele:nth-of-type(4), #loading_inner .ele:nth-of-type(4) .dot:before { animation-delay: -0.4s; }

#loading_inner .ele:nth-of-type(4):nth-of-type(odd) { animation-delay: -1.9s; }

#loading_inner .ele:nth-of-type(5), #loading_inner .ele:nth-of-type(5) .dot:before { animation-delay: -0.5s; }

#loading_inner .ele:nth-of-type(5):nth-of-type(odd) { animation-delay: -2s; }

#loading_inner .ele:nth-of-type(6), #loading_inner .ele:nth-of-type(6) .dot:before { animation-delay: -0.6s; }

#loading_inner .ele:nth-of-type(6):nth-of-type(odd) { animation-delay: -2.1s; }

#loading_inner .ele:nth-of-type(7), #loading_inner .ele:nth-of-type(7) .dot:before { animation-delay: -0.7s; }

#loading_inner .ele:nth-of-type(7):nth-of-type(odd) { animation-delay: -2.2s; }

#loading_inner .ele:nth-of-type(8), #loading_inner .ele:nth-of-type(8) .dot:before { animation-delay: -0.8s; }

#loading_inner .ele:nth-of-type(8):nth-of-type(odd) { animation-delay: -2.3s; }

#loading_inner .ele:nth-of-type(9), #loading_inner .ele:nth-of-type(9) .dot:before { animation-delay: -0.9s; }

#loading_inner .ele:nth-of-type(9):nth-of-type(odd) { animation-delay: -2.4s; }

#loading_inner .ele:nth-of-type(10), #loading_inner .ele:nth-of-type(10) .dot:before { animation-delay: -1s; }

#loading_inner .ele:nth-of-type(10):nth-of-type(odd) { animation-delay: -2.5s; }

#loading_inner .ele:nth-of-type(11), #loading_inner .ele:nth-of-type(11) .dot:before { animation-delay: -1.1s; }

#loading_inner .ele:nth-of-type(11):nth-of-type(odd) { animation-delay: -2.6s; }

#loading_inner .ele:nth-of-type(12), #loading_inner .ele:nth-of-type(12) .dot:before { animation-delay: -1.2s; }

#loading_inner .ele:nth-of-type(12):nth-of-type(odd) { animation-delay: -2.7s; }

#loading_inner .ele:nth-of-type(13), #loading_inner .ele:nth-of-type(13) .dot:before { animation-delay: -1.3s; }

#loading_inner .ele:nth-of-type(13):nth-of-type(odd) { animation-delay: -2.8s; }

#loading_inner .ele:nth-of-type(14), #loading_inner .ele:nth-of-type(14) .dot:before { animation-delay: -1.4s; }

#loading_inner .ele:nth-of-type(14):nth-of-type(odd) { animation-delay: -2.9s; }

#loading_inner .ele:nth-of-type(15), #loading_inner .ele:nth-of-type(15) .dot:before { animation-delay: -1.5s; }

#loading_inner .ele:nth-of-type(15):nth-of-type(odd) { animation-delay: -3s; }

#loading_inner .ele:nth-of-type(16), #loading_inner .ele:nth-of-type(16) .dot:before { animation-delay: -1.6s; }

#loading_inner .ele:nth-of-type(16):nth-of-type(odd) { animation-delay: -3.1s; }

#loading_inner .ele:nth-of-type(17), #loading_inner .ele:nth-of-type(17) .dot:before { animation-delay: -1.7s; }

#loading_inner .ele:nth-of-type(17):nth-of-type(odd) { animation-delay: -3.2s; }

#loading_inner .ele:nth-of-type(18), #loading_inner .ele:nth-of-type(18) .dot:before { animation-delay: -1.8s; }

#loading_inner .ele:nth-of-type(18):nth-of-type(odd) { animation-delay: -3.3s; }

#loading_inner .ele:nth-of-type(19), #loading_inner .ele:nth-of-type(19) .dot:before { animation-delay: -1.9s; }

#loading_inner .ele:nth-of-type(19):nth-of-type(odd) { animation-delay: -3.4s; }

#loading_inner .ele:nth-of-type(20), #loading_inner .ele:nth-of-type(20) .dot:before { animation-delay: -2s; }

#loading_inner .ele:nth-of-type(20):nth-of-type(odd) { animation-delay: -3.5s; }

#loading_inner .ele:nth-of-type(21), #loading_inner .ele:nth-of-type(21) .dot:before { animation-delay: -2.1s; }

#loading_inner .ele:nth-of-type(21):nth-of-type(odd) { animation-delay: -3.6s; }

#loading_inner .ele:nth-of-type(22), #loading_inner .ele:nth-of-type(22) .dot:before { animation-delay: -2.2s; }

#loading_inner .ele:nth-of-type(22):nth-of-type(odd) { animation-delay: -3.7s; }

#loading_inner .ele:nth-of-type(23), #loading_inner .ele:nth-of-type(23) .dot:before { animation-delay: -2.3s; }

#loading_inner .ele:nth-of-type(23):nth-of-type(odd) { animation-delay: -3.8s; }

#loading_inner .ele:nth-of-type(24), #loading_inner .ele:nth-of-type(24) .dot:before { animation-delay: -2.4s; }

#loading_inner .ele:nth-of-type(24):nth-of-type(odd) { animation-delay: -3.9s; }

#loading_inner .ele:nth-of-type(25), #loading_inner .ele:nth-of-type(25) .dot:before { animation-delay: -2.5s; }

#loading_inner .ele:nth-of-type(25):nth-of-type(odd) { animation-delay: -4s; }

#loading_inner .ele:nth-of-type(26), #loading_inner .ele:nth-of-type(26) .dot:before { animation-delay: -2.6s; }

#loading_inner .ele:nth-of-type(26):nth-of-type(odd) { animation-delay: -4.1s; }

#loading_inner .ele:nth-of-type(27), #loading_inner .ele:nth-of-type(27) .dot:before { animation-delay: -2.7s; }

#loading_inner .ele:nth-of-type(27):nth-of-type(odd) { animation-delay: -4.2s; }

#loading_inner .ele:nth-of-type(28), #loading_inner .ele:nth-of-type(28) .dot:before { animation-delay: -2.8s; }

#loading_inner .ele:nth-of-type(28):nth-of-type(odd) { animation-delay: -4.3s; }

#loading_inner .ele:nth-of-type(29), #loading_inner .ele:nth-of-type(29) .dot:before { animation-delay: -2.9s; }

#loading_inner .ele:nth-of-type(29):nth-of-type(odd) { animation-delay: -4.4s; }

#loading_inner .ele:nth-of-type(30), #loading_inner .ele:nth-of-type(30) .dot:before { animation-delay: -3s; }

#loading_inner .ele:nth-of-type(30):nth-of-type(odd) { animation-delay: -4.5s; }

@keyframes rotate { to { transform: none; } }

#loading_inner .content { opacity: 0; font-family: 'Binggrae'; animation: fadeIn 1s linear forwards; }

#loading_inner span { opacity: 0; font-family: 'Binggrae'; animation: fadeIn 1s linear forwards; }

#loading_inner span:nth-child(1) { animation-delay: 1s; }

#loading_inner span:nth-child(2) { animation-delay: 2s; }

#loading_inner span:nth-child(3) { animation-delay: 3s; }

#result_container .image_row img { width: 100%; height: auto; }

#result_container .title_row { position: relative; }

#result_container .title_row h1 { font-size: 26px; font-family: "CookieRunOTF-Bold"; }

#result_container .content_row { border-left: 1px solid black; border-right: 1px solid black; }

#result_container .content_row .content_title_row { font-family: "Binggrae"; font-size: 23px; border-bottom: 1px solid black; }

#result_container .ad_row { border: 1px solid black; border-radius: 5px; }

#result_container .ad_row a { font-family: "CookieRunOTF-Bold"; background-color: #427EDC; border-radius: 999px; border: 1px solid black; }

#result_container .result_row { margin-top: -1px; margin-bottom: -1px; box-shadow: 2px 5px 6px rgba(0, 0, 0, 0.1); }

#result_container .result_row .result_col { border-radius: 5px; }

#result_container .result_row img { width: 100%; height: auto; }

#result_container .result_row .note_decoration_lower { transform: rotate(180deg); }

#result_container .match_row img { width: 100%; height: auto; border-radius: 10px; }

#result_container .match_row .match_content_row { height: 100%; border: 1px solid black; border-radius: 10px; font-family: "Binggrae"; }

#result_container .match_row .match_content_row .match_type_col { font-size: 20px; }

#result_container .match_row .match_content_row .match_title { border-bottom: 1px solid black; }

#result_container .match_row .match_content_row span { color: #828282; font-family: "Noto Sans KR", sans-serif; }

#result_container .btn_row a { font-family: "Binggrae"; color: black !important; background-color: white; border: 1px solid black; box-shadow: 2px 5px 6px rgba(0, 0, 0, 0.1); border-radius: 4px; }

#result_container .share_row { font-size: 19px; }

#result_container .share_row p { font-family: "Binggrae"; }

#result_container .share_row .share_col .btn.share { padding: 0; margin: 0 2px; cursor: pointer; }

#result_container .share_row a, #result_container .share_row a:visited { color: #4f4f4f; font-size: 16px; text-decoration: underline; }

#result_container .floating_wrapper { width: 100%; position: fixed; bottom: 0; z-index: 1; background-color: black; }

#result_container .floating_wrapper .row { padding: 10px 15px; }

#result_container .floating_wrapper a, #result_container .floating_wrapper button { padding: 0.25rem 0 0.25rem 0; border: 2px solid white; border-radius: 999px; font-size: 25px; letter-spacing: 2px; color: white; font-family: "CookieRunOTF-Bold"; }

#result_container .floating_wrapper .retry_btn { width: 50px; height: 50px; align-items: center; position: relative; }

#result_container .floating_wrapper .retry_btn img { position: absolute; top: 11px; left: 7px; }

.jquery-modal { padding-top: 0; }

#type_modal { height: calc(100vh - 20px); overflow-y: scroll; }

#type_modal .modal_inner { background-color: #E5E5E5; }

#ad_modal1, #ad_modal2 { font-family: "Binggrae"; }

#ad_modal1 .modal_inner, #ad_modal2 .modal_inner { background-color: #CDE1FF; }

#ad_modal1 .ad_modal_content, #ad_modal2 .ad_modal_content { background-color: #345D9D; color: white; border-radius: 5px; border: 1px solid black; }

#ad_modal1 .ad_bubble_img, #ad_modal2 .ad_bubble_img { width: 100%; height: auto; }

.modal { background-color: transparent; width: 100%; border-radius: 0 !important; position: relative; }

.modal .modal_title { font-family: "Binggrae"; font-size: 20px; border-bottom: 1px solid black; }

.modal .modal_content { border-radius: 10px; border: 1px solid black; }

.modal .modal_row { background-color: #7DAAF0; border: 2px solid black; border-top-left-radius: 999px; border-top-right-radius: 999px; }

.modal .modal_row img { width: 80%; height: auto; margin-left: auto; margin-right: auto; margin-top: 10%; }

.modal .ad_modal_row { background-color: #7DAAF0; border-radius: 2px; border: 1px solid black; }

.modal .ad_modal_row img { width: 80%; height: auto; margin-left: auto; margin-right: auto; }

.modal #modal_lower_btn, .modal .ad_btn { font-family: "CookieRunOTF-Bold"; background-color: black; color: white; border-radius: 0; font-size: 23px; }

@media (max-width: 540px) { .modal #modal_lower_btn, .modal .ad_btn { width: calc(100vw - 40px); } }

@media (min-width: 541px) { .modal #modal_lower_btn, .modal .ad_btn { width: 500px; } }

.modal #modal_lower_btn { position: fixed; top: calc(100vh - 86px); align-self: center; }

.modal .close-modal { display: none !important; }

.modal::-webkit-scrollbar { display: none; }