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

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

.UhBeepuding { font-family: 'UhBeepuding'; }

.bg-main { background-color: #FDF8EC; }

body, button { font-weight: normal; font-family: 'KyoboHand'; color: #000000; background-color: white; 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; }

body { background: #FFA277; }

header { background-color: #FFFFFF; border-bottom: 1px solid #f2f2f2; }

.btn-point { color: #000000; background-color: white; border-radius: 0; }

.btn-point:hover { color: #000000; background-color: white; border-radius: 0; }

.btn-point-outline { color: #000000; background-color: white; border-radius: 0; }

.btn-point-outline:hover { color: #000000; background-color: white; border-radius: 0; }

.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; color: #8C2E00; }

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

#start_inner h1 { line-height: 1.2; letter-spacing: 2px; position: relative; }

@media (max-width: 320px) { #start_inner .quote { width: 15px; } #start_inner h2 { font-size: 18px; } }

@media (min-width: 321px) { #start_inner .quote { width: 21px; } }

@media (max-width: 370px) { #start_inner h1 { font-size: calc(50vw * 100/370); } #start_inner h2 { font-size: 18px; } }

@media (min-width: 371px) { #start_inner h1 { font-size: 60px; } }

#start_inner .main_col { background: linear-gradient(180deg, #FFF6DE 0%, #FBEACC 29.17%, #FFDEBF 100%); border: 3px solid #8C2E00; border-top-left-radius: 3px; border-bottom-left-radius: 3px; }

#start_inner .quote { height: auto; }

#start_inner .quote_r { transform: scaleX(-1); -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); }

#start_inner #test_start { background-image: url("../img/start.954d13fbc1be.svg"); background-repeat: no-repeat; background-size: 100%; background-position: center; background-color: transparent; border: none; border-radius: 0; line-height: 1.0; letter-spacing: 2px; color: white; margin: auto; }

#start_inner #test_view { line-height: 1.0; }

@media (max-width: 320px) { #start_inner #test_start { font-size: calc(21vw * 100/370); } #start_inner #test_view { font-size: calc(12vw * 100/370); } }

@media (min-width: 321px) and (max-width: 370px) { #start_inner #test_start { font-size: calc(28vw * 100/370); } #start_inner #test_view { font-size: calc(16vw * 100/370); } }

@media (min-width: 371px) { #start_inner #test_start { font-size: 28px; } #start_inner #test_view { font-size: 16px; } }

#start_inner .main_decoration_col { width: 20px; background: linear-gradient(90deg, #FDF8EC 2px, #8C2E00 2px, #8C2E00 4px, #FDF8EC 4px, #FDF8EC 6px, #8C2E00 6px, #8C2E00 8px, #FDF8EC 8px, #FDF8EC 10px, #8C2E00 10px); border: 3px solid #8C2E00; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }

#start_inner .decoration1 { width: 25px; height: 30px; position: absolute; top: 20px; right: -8px; background-color: #F55B04; }

#start_inner .decoration2 { width: 20px; height: 30px; position: absolute; top: 70px; right: -3px; background-color: #FFE178; }

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

#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 .mt_1percent { margin-top: 1%; }

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

#start_inner #main_poomang_logo { padding-left: 45%; padding-right: 5%; }

#start_inner #collabo_decoration { width: 40%; height: auto; }

#start_inner #sponsor_logo { width: 100%; height: auto; padding-left: 5%; padding-right: 45%; }

#progress_inner { display: none; border: none; }

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

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

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

.question_inner { position: relative; display: none; border-bottom: 3px solid #8C2E00; }

.question_inner .date_col { font-size: 23px; border-bottom: 2px solid #FFD1BA; }

.question_inner .title_row h1 { font-size: 23px; font-weight: normal; }

.question_inner .image_row img { width: 50%; height: auto; }

.question_inner .next_question, .question_inner .next_question:hover { min-height: 86px; box-shadow: 0px 2px 2px #D7C0B6; border-radius: 2px; }

.question_inner .next_question p, .question_inner .next_question:hover p { font-size: 18px; font-family: "Noto Sans KR", sans-serif; }

.question_decoration { width: 60%; height: auto; }

#loading_inner { position: relative; display: none; border-bottom: 3px solid #8C2E00; }

#loading_inner #loading_image1 { width: 16%; height: auto; margin-left: 47%; margin-bottom: -5%; animation: 0.7s coinfall ease-in-out forwards; animation-delay: 0.1s; }

#loading_inner #loading_image2 { width: 16%; height: auto; margin-left: 37%; margin-bottom: 3%; animation: 0.7s coinfall ease-in-out forwards; }

@keyframes coinfall { 0% { transform: translateY(0); }
  100% { transform: translateY(170%); } }

#loading_inner #loading_image3 { width: 50%; height: auto; animation: 0.5s vibrate ease-in-out forwards; animation-delay: 0.5s; }

@keyframes vibrate { 0% { transform: translatex(0); }
  3% { transform: translatex(-2px); }
  6% { transform: translatex(-2px); }
  9% { transform: translatex(2px); }
  12% { transform: translatex(2px); }
  15% { transform: translatex(-2px); }
  18% { transform: translatex(-2px); }
  21% { transform: translatex(2px); }
  24% { transform: translatex(2px); }
  27% { transform: translatex(-2px); }
  30% { transform: translatex(-2px); }
  33% { transform: translatex(2px); }
  36% { transform: translatex(2px); }
  39% { transform: translatex(-2px); }
  42% { transform: translatex(-2px); }
  45% { transform: translatex(2px); }
  48% { transform: translatex(2px); }
  51% { transform: translatex(-2px); }
  54% { transform: translatex(-2px); }
  57% { transform: translatex(2px); }
  60% { transform: translatex(2px); }
  63% { transform: translatex(-2px); }
  66% { transform: translatex(-2px); }
  69% { transform: translatex(2px); }
  72% { transform: translatex(2px); }
  75% { transform: translatex(-2px); }
  78% { transform: translatex(-2px); }
  81% { transform: translatex(2px); }
  84% { transform: translatex(2px); }
  87% { transform: translatex(-2px); }
  90% { transform: translatex(-2px); }
  93% { transform: translatex(2px); }
  96% { transform: translatex(2px); }
  99% { transform: translatex(-2px); }
  100% { transform: translatex(0); } }

#loading_inner .loading_content1 { font-size: 24px; }

#loading_inner .loading_content2 { font-size: 15px; color: #F55B04; }

#loading_inner .fade_anime { opacity: 0; }

.bg-noon { background-image: linear-gradient(180deg, #BFE8FF 0%, #F7FDFF 25%); background-attachment: fixed; }

.bg-evening { background-image: linear-gradient(180deg, #FF9568 0%, #FFD178 25%, #FFE1B4 50%); background-attachment: fixed; }

.bg-night { background-image: linear-gradient(180deg, #82A5D6 0%, #FAD9F8 50%); background-attachment: fixed; }

#result_container { position: relative; border: none; }

#result_container .sub_title { color: #8C2E00; background: #FFFFFF; border: 2px solid #8C2E00; border-radius: 5px; margin-bottom: -2px; }

#result_container .triangle1 { z-index: 1; width: 16px; height: 16px; border-top: 16px solid white; border-left: 8px solid transparent; border-right: 8px solid transparent; }

#result_container .triangle2 { z-index: 0; width: 20px; height: 20px; border-top: 20px solid #8C2E00; border-left: 10px solid transparent; border-right: 10px solid transparent; margin-top: -16px; }

#result_container .img_decoration { height: 30px; background: #D9D9D9; border: 2px solid #8C2E00; box-shadow: inset 0px -10px 0px #8B7F79; }

#result_container .image_row { background: #FFD9C8; border: 2px solid #8C2E00; box-shadow: inset 0px 7px 0px #FFA277; margin: 0 18px; }

#result_container .image_row img { width: 100%; height: auto; border: 2px solid #8C2E00; }

#result_container h1 { color: #F55B04; background-image: url("../img/results/title.3620208cc98d.svg"); background-repeat: no-repeat; background-size: 100%; background-position: center; }

#result_container .decoraion_row { position: relative; }

#result_container .decoraion_row .upper_decoration1 { position: absolute; width: 40px; height: 25px; left: 15px; top: -27px; background: #F55B04; border: 1px solid #8C2E00; }

#result_container .decoraion_row .upper_decoration2 { position: absolute; width: 40px; height: 20px; left: 60px; top: -22px; background: #FFE178; border: 1px solid #8C2E00; }

#result_container .content_upper_decoration { height: 16px; background: linear-gradient(#8C2E00 3px, #FDF8EC 3px, #FDF8EC 5px, #8C2E00 5px, #8C2E00 7px, #FDF8EC 7px, #FDF8EC 9px, #8C2E00 9px, #8C2E00 11px, #FDF8EC 11px, #FDF8EC 13px, #8C2E00 13px); margin-top: -2px; }

#result_container .result_row { color: #341A0D; font-size: 19px; border-bottom: 4px dotted #FFA277; }

#result_container .result_row .content_title_decoration { width: 30px; height: 30px; }

#result_container .result_row .content_title { color: black; font-size: 26px; }

#result_container .result_row .ad_description { color: black; font-size: 20px; }

#result_container .result_row .ad_title { color: #8C2E00; font-size: 24px; }

#result_container .result_row span { color: #FF6720; }

#result_container .result_row .ad_btn { font-size: 20px; font-family: "Noto Sans KR", sans-serif; color: white; background: #FF6720; box-shadow: 0px 2px 2px #D7C0B6; border-radius: 999px; vertical-align: middle; }

#result_container .match_row { font-size: 24px; color: #F55B04; }

#result_container .match_row img { width: 100%; height: auto; border: 2px solid #8C2E00; }

#result_container .ad_row { position: relative; }

#result_container .ad_row #product_img { width: 50%; height: auto; }

#result_container .ad_row #donate_img1 { width: 80px; height: 80px; margin-top: 20px; margin-right: -32px; }

#result_container .ad_row #donate_img2 { z-index: 1; width: 80px; height: 80px; margin-left: -32px; }

#result_container .ad_row .donation_row { color: #FF6720; background: #FFFFFF; border: 3px solid #FF6720; border-radius: 999px; }

#result_container .ad_row .notice_col { font-size: 13px; }

#result_container .btn_row a { font-family: "Noto Sans KR", sans-serif; color: white; background: #FF6720; box-shadow: 0px 2px 2px #D7C0B6; border-radius: 999px; }

#result_container .share_row { font-family: "Noto Sans KR", sans-serif; font-size: 19px; }

#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: #FF6720; }

#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-family: "Noto Sans KR", sans-serif; font-size: 25px; letter-spacing: 2px; color: white; }

#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; }

.modal { background-color: transparent; width: 100%; height: calc(100vh - 20px); overflow-y: scroll; border-radius: 0 !important; position: relative; font-size: 20px; }

.modal .modal_decoration { height: 30px; background: #D9D9D9; border: 2px solid #8C2E00; box-shadow: inset 0px -10px 0px #8B7F79; }

.modal .content_row { background: #FFD9C8; border: 2px solid #8C2E00; box-shadow: inset 0px 7px 0px #FFA277; margin: 0 20px; }

.modal img { border: 2px solid #8C2E00; }

.modal .modal_triangle1 { z-index: 0; width: 20px; height: 20px; border-bottom: 20px solid #8C2E00; border-left: 10px solid transparent; border-right: 10px solid transparent; margin-bottom: -16px; }

.modal .modal_triangle2 { z-index: 1; width: 16px; height: 16px; border-bottom: 16px solid white; border-left: 8px solid transparent; border-right: 8px solid transparent; }

.modal .modal_row { color: #8C2E00; background: #FFFFFF; border: 2px solid #8C2E00; border-radius: 5px; margin-top: -2px; }

.modal .modal_row .modal_title { color: black; font-size: 24px; }

.modal #modal_lower_btn { z-index: 2; position: fixed; top: calc(100vh - 86px); align-self: center; border-radius: 0; background-color: #FF6720; color: white; font-family: "Noto Sans KR", sans-serif; font-size: 23px; letter-spacing: 2px; }

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

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

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

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