@font-face { font-family: 'SB Aggro B'; src: url("../font/SB_B.db23c0c4136c.ttf") format("truetype"); font-style: normal; font-weight: normal; }

@font-face { font-family: 'SB Aggro M'; src: url("../font/SB_M.59acc8332214.ttf") format("truetype"); font-style: normal; font-weight: normal; }

.sb_b { font-family: 'SB Aggro B'; }

.sb_m { font-family: 'SB Aggro M'; }

@keyframes pop1 { 50% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes pop2 { 50% { opacity: 1; }
  100% { opacity: 0; } }

body, button { font-weight: normal; 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; }

img { height: auto; }

a { cursor: pointer; }

img { height: auto; }

.bg-point2 { background-color: #fff8f0; }

.btn-point { background-color: #6d35fe; }

.btn-point:hover { background-color: #6d35fe; }

.btn-point-outline { color: #fff !important; background-color: #6d35fe; }

.btn-point-outline:hover { color: #fff !important; background-color: #6d35fe; }

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

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

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

#start_inner h1 { position: absolute; opacity: 0; }

#start_inner h2 { position: absolute; opacity: 0; }

#start_inner .img_row img { width: 80%; }

#start_inner #test_start { letter-spacing: 2px; line-height: 1.0; margin: 0; margin-top: auto; margin-left: auto; margin-right: auto; padding: 1rem 0 0.75rem 0; }

#start_inner .btn_start { background-color: white; color: #6d35fe !important; border-radius: 5px; }

#start_inner .btn_start .txt_start { font-size: 25px; letter-spacing: -1px; }

#start_inner .btn_start .txt_count { font-size: 12px; font-weight: 900; letter-spacing: 0px; }

#start_inner .percent_row { color: white; }

#start_inner .percent_row .percent_col { border: 2px solid #FFFFFF; border-radius: 5px; display: flex; justify-content: center; align-items: center; }

#start_inner .percent_row .percent_col .lever_wrapper { position: relative; }

#start_inner .percent_row .percent_col .lever_wrapper img { width: 30px; }

#start_inner .percent_row .percent_col .lever_wrapper .lever_bottom { transform: translateY(0.1px); }

#start_inner .percent_row .percent_col .lever_wrapper .lever1 { position: absolute; animation: 0.6s pop1 step-end infinite; }

#start_inner .percent_row .percent_col .lever_wrapper .lever2 { position: absolute; opacity: 0; animation: 0.6s pop2 step-end infinite; }

#start_inner .percent_row .percent_col .percent_txt { padding-top: 2px; display: flex; justify-content: flex-end; }

#start_inner .percent_row .percent_col .percentage { font-size: 30px; border-left: 1px solid white; padding-top: 4px; }

#intro_inner { display: none; font-size: 22px; color: black; cursor: pointer; }

#intro_inner .intro_col { font-size: 28px; }

#intro_inner .lever_wrapper { position: relative; width: 40px; }

#intro_inner .lever_wrapper img { width: 40px; }

#intro_inner .lever_wrapper .lever_bottom { transform: translateY(0.1px); }

#intro_inner .lever_wrapper .lever1 { position: absolute; animation: 0.6s pop1 step-end infinite; }

#intro_inner .lever_wrapper .lever2 { position: absolute; opacity: 0; animation: 0.6s pop2 step-end infinite; }

#intro_inner .click_txt { color: #6d35fe; font-size: 12px; }

#intro_inner #blink { animation: 0.75s blink linear alternate infinite; }

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

#intro_inner .bottom_desc { font-size: 10px; color: #961111; }

#progress_inner { display: none; border: none; font-size: 15px; color: white; position: relative; }

@media (max-width: 440px) { #progress_inner { font-size: 12px; } }

@media (max-width: 354px) { #progress_inner { font-size: 10px; } }

#progress_inner .progress_row .text_col { flex: 1; display: flex; justify-content: space-between; align-items: center; }

#progress_inner .progress_row .text_col #progress_count { color: #6d35fe; }

#progress_inner .progress_row #progress_time { color: #B7B5B5; }

#progress_inner .progress_row .bar_col .gauge_row { align-items: center; }

#progress_inner .progress_row .bar_col .gauge_row .lever_wrapper img { width: 20px; }

@media (max-width: 440px) { #progress_inner .progress_row .bar_col .gauge_row .lever_wrapper { width: 18px; } }

#progress_inner .progress_row .bar_col .gauge_row .lever_wrapper .lever_bottom { transform: translateY(0.1px); }

#progress_inner .progress_row .bar_col .gauge_row .lever_wrapper .lever1 { position: absolute; animation: 0.6s pop1 step-end infinite; }

#progress_inner .progress_row .bar_col .gauge_row .lever_wrapper .lever2 { position: absolute; opacity: 0; animation: 0.6s pop2 step-end infinite; }

#progress_inner .progress_row .bar_col .gauge_row .gauge_block { margin-top: 5px; width: 8px; height: 17px; border-radius: 1px; background-color: #B7B5B5; margin-left: 1px; margin-right: 1px; }

@media (max-width: 440px) { #progress_inner .progress_row .bar_col .gauge_row .gauge_block { margin-top: 4px; width: 6px; height: 13px; } }

@media (max-width: 344px) { #progress_inner .progress_row .bar_col .gauge_row .gauge_block { margin-top: 3px; width: 5px; height: 11px; } }

@media (max-width: 366px) { #progress_inner .progress_row .bar_col .gauge_row .gauge_block { margin-top: 3px; width: 4.5px; height: 10.5px; } }

#progress_inner .progress_row .text_col { display: flex; justify-content: space-between; align-items: center; }

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

.question_inner .question_img_col img { width: 100px; }

.question_inner .question_img_col .shake { animation: shake 0.1s linear; animation-iteration-count: 6; }

@keyframes shake { 0% { transform: translateY(2px); }
  33% { transform: translateX(-2px); }
  66% { transform: translateX(2px); }
  100% { transform: translateY(-2px); } }

.question_inner .title_row h1 { font-size: 22px; }

.question_inner .next_question, .question_inner .next_question:hover { border-radius: 5px; min-height: 86px; color: #6d35fe !important; background-color: white; border: 2px solid #6d35fe; }

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

#loading_inner { position: relative; display: none; color: white; background-color: white; height: 100%; }

#loading_inner .title_row .lever_wrapper { position: relative; width: 40px; }

#loading_inner .title_row .lever_wrapper img { width: 40px; }

#loading_inner .title_row .lever_wrapper .lever_bottom { transform: translateY(0.1px); }

#loading_inner .title_row .lever_wrapper .lever1 { position: absolute; animation: 0.6s pop1 step-end infinite; }

#loading_inner .title_row .lever_wrapper .lever2 { position: absolute; opacity: 0; animation: 0.6s pop2 step-end infinite; }

#loading_inner .title_row .loading_txt2 { color: black; font-size: 28px; }

#loading_inner .title_row .gauge_row { align-items: center; }

#loading_inner .title_row .gauge_row .gauge_block { width: 8px; height: 17px; border-radius: 1px; background-color: #B7B5B5; margin: 0 1px; }

#loading_inner .title_row .gauge_row .loading_gauge_block1 { animation: fill1 1.5s step-end infinite; }

@keyframes fill1 { 0% { background-color: #6E35FE; } }

#loading_inner .title_row .gauge_row .loading_gauge_block2 { animation: fill2 1.5s step-end infinite; }

@keyframes fill2 { 5% { background-color: #6E35FE; } }

#loading_inner .title_row .gauge_row .loading_gauge_block3 { animation: fill3 1.5s step-end infinite; }

@keyframes fill3 { 10% { background-color: #6E35FE; } }

#loading_inner .title_row .gauge_row .loading_gauge_block4 { animation: fill4 1.5s step-end infinite; }

@keyframes fill4 { 15% { background-color: #6E35FE; } }

#loading_inner .title_row .gauge_row .loading_gauge_block5 { animation: fill5 1.5s step-end infinite; }

@keyframes fill5 { 20% { background-color: #6E35FE; } }

#loading_inner .title_row .gauge_row .loading_gauge_block6 { animation: fill6 1.5s step-end infinite; }

@keyframes fill6 { 25% { background-color: #6E35FE; } }

#loading_inner .title_row .gauge_row .loading_gauge_block7 { animation: fill7 1.5s step-end infinite; }

@keyframes fill7 { 30% { background-color: #6E35FE; } }

#loading_inner .title_row .gauge_row .loading_gauge_block8 { animation: fill8 1.5s step-end infinite; }

@keyframes fill8 { 35% { background-color: #6E35FE; } }

#loading_inner .title_row .gauge_row .loading_gauge_block9 { animation: fill9 1.5s step-end infinite; }

@keyframes fill9 { 40% { background-color: #6E35FE; } }

#loading_inner .title_row .gauge_row .loading_gauge_block10 { animation: fill10 1.5s step-end infinite; }

@keyframes fill10 { 45% { background-color: #6E35FE; } }

#loading_inner .title_row .gauge_row .loading_gauge_block11 { animation: fill11 1.5s step-end infinite; }

@keyframes fill11 { 50% { background-color: #6E35FE; } }

#loading_inner .title_row .gauge_row .loading_gauge_block12 { animation: fill12 1.5s step-end infinite; }

@keyframes fill12 { 55% { background-color: #6E35FE; } }

#loading_inner .title_row .gauge_row .loading_gauge_block13 { animation: fill13 1.5s step-end infinite; }

@keyframes fill13 { 60% { background-color: #6E35FE; } }

#loading_inner .title_row .gauge_row .loading_gauge_block14 { animation: fill14 1.5s step-end infinite; }

@keyframes fill14 { 65% { background-color: #6E35FE; } }

#loading_inner .title_row .gauge_row .loading_gauge_block15 { animation: fill15 1.5s step-end infinite; }

@keyframes fill15 { 70% { background-color: #6E35FE; } }

#loading_inner .title_row .gauge_row .loading_gauge_block16 { animation: fill16 1.5s step-end infinite; }

@keyframes fill16 { 75% { background-color: #6E35FE; } }

#loading_inner .title_row .gauge_row .loading_gauge_block17 { animation: fill17 1.5s step-end infinite; }

@keyframes fill17 { 80% { background-color: #6E35FE; } }

#loading_inner .title_row .gauge_row .loading_gauge_block18 { animation: fill18 1.5s step-end infinite; }

@keyframes fill18 { 85% { background-color: #6E35FE; } }

#loading_inner .title_row .gauge_row .loading_gauge_block19 { animation: fill19 1.5s step-end infinite; }

@keyframes fill19 { 90% { background-color: #6E35FE; } }

#loading_inner .title_row .gauge_row .loading_gauge_block20 { animation: fill20 1.5s step-end infinite; }

@keyframes fill20 { 95% { background-color: #6E35FE; } }

#loading_inner .title_row .loading_txt1 { color: #B7B5B5; font-size: 12px; }

#loading_inner .title_row .loading_txt1 .fade_anime { opacity: 0; }

#loading_inner .title_row .loading_txt1 .dot1 { margin-left: -3px; animation: popDot1 1.5s step-end infinite; }

@keyframes popDot1 { 0% { opacity: 0; }
  0% { opacity: 1; }
  75% { opacity: 0; } }

#loading_inner .title_row .loading_txt1 .dot2 { margin-left: -3px; animation: popDot2 1.5s step-end infinite; }

@keyframes popDot2 { 0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 0; } }

#loading_inner .title_row .loading_txt1 .dot3 { margin-left: -3px; animation: popDot3 1.5s step-end infinite; }

@keyframes popDot3 { 0% { opacity: 0; }
  50% { opacity: 1; }
  75% { opacity: 0; } }

#result_container { border: none; color: black; }

#result_container .image_row { color: white; background-color: #6D35FE; }

#result_container .image_row img { position: relative; width: 100%; }

#result_container .image_row .save_img_col { font-size: 12px; }

#result_container .image_row .lv_col { font-size: 40px; text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.25); }

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

#result_container .percent_row { border: 3px solid #6D35FE; border-radius: 5px; color: #6D35FE; }

#result_container .percent_row .percent_txt { font-size: 16px; }

#result_container .percent_row .percent_col { display: flex; justify-content: space-between; align-items: center; }

#result_container .percent_row .percent_col .percent_num { font-size: 17px; }

#result_container .percent_row .percent_col img { width: 180px; height: 14.5px; }

#result_container .result_row .result_col { background-color: #EEEEEE; }

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

#result_container .tip_row { background-color: #6d35fe; }

#result_container .tip_row .tip_col { font-size: 22px; }

#result_container .tip_row .tip_col1 { color: #FFD500; text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.25); }

#result_container .tip_row .tip_col2 { background-color: white; border-radius: 5px; }

#result_container .match_row { border: 2px solid #7F7F7F; border-radius: 5px; position: relative; }

#result_container .match_row .match_best, #result_container .match_row match_worst { cursor: pointer; }

#result_container .match_row .center_line { position: absolute; height: 100%; top: 0%; left: 50%; transform: translateX(-50%); }

#result_container .match_row .dashed { border-right: 0.5px dashed #7F7F7F; }

#result_container .match_row .match_content_row { height: 100%; }

#result_container .match_row .match_content_row .match_type_col { background-color: #7F7F7F; color: white; font-size: 22px; padding-top: 3px; position: relative; }

#result_container .match_row .match_content_row .match_type_col .cover_line { position: absolute; width: 5px; height: 41px; background-color: #7F7F7F; top: 0; left: 100%; }

#result_container .match_row .match_content_row .match_title_col { font-size: 22px; color: #7F7F7F; }

#result_container .match_modal_row::-webkit-scrollbar { display: none; }

#result_container .match_modal_row { display: none; z-index: 2; position: fixed; background-color: rgba(0, 0, 0, 0.5); top: 0; left: 0; width: 100%; justify-content: center; align-items: center; height: 100vh; overflow-y: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }

#result_container .match_modal_row .match_modal_wrapper { position: relative; max-width: 480px; background-color: white; }

#result_container .match_modal_row .match_modal_wrapper .best { display: none; }

#result_container .match_modal_row .match_modal_wrapper .worst { display: none; }

#result_container .match_modal_row .match_modal_wrapper .back_btn_wrapper { position: fixed; bottom: -3px; width: 100%; color: white; left: 50%; transform: translateX(-50%); }

#result_container .match_modal_row .match_modal_wrapper .back_btn_wrapper .back_btn { width: 100%; max-width: 500px; font-size: 24px; background-color: black; color: white; border: none; }

#result_container .match_modal_row .match_modal_wrapper .back_btn_wrapper .back_btn:focus { outline: 0; }

#result_container .ad_comment_row .ad_comment_col .ad_comment1 { font-size: 22px; }

#result_container .ad_comment_row .ad_comment_col .ad_comment2 { font-size: 14px; }

#result_container .ad_btn_row a { border-radius: 5px; color: #6d35fe !important; font-size: 22px; box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.25); border: 2px solid #6D35FE; background-color: #FFD500; }

#result_container .btn_row a { background-color: white; border: 2px solid #6D35FE; box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.25); border-radius: 5px; color: #6d35fe !important; font-size: 22px; }

#result_container .ad_btn_row .ad_btn_col a { border-radius: 0; border: 3px solid #FFFFFF; box-shadow: 0px 4px 0px #828282; margin-bottom: 4px; }

#result_container .share_row { letter-spacing: 1px; font-size: 18px; }

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

#result_container .share_row .share_col .btn.share img { width: 53px; height: 53px; }

#result_container .share_row a, #result_container .share_row a:visited { font-size: 15px; text-decoration: underline; }

#result_container .sponsor_row { align-items: center; }

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

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

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

#result_container .sponsor_row #main_poomang_logo { padding-left: 20%; padding-right: 5%; }

#result_container .sponsor_row #collabo_decoration { width: 50%; height: auto; }

#result_container .sponsor_row #sponsor_logo { width: 100%; height: auto; padding-left: 5%; padding-right: 20%; }

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

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

#result_container .floating_wrapper a, #result_container .floating_wrapper button { font-size: 25px; letter-spacing: 2px; padding: 0.25rem 0 0.25rem 0; border: 2px solid white; border-radius: 999px; 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%; border-radius: 0 !important; position: relative; color: white; }

.modal .modal_inner { background-color: #6d35fe; }

.modal .modal_title .modal_txt_sub { display: flex; align-items: center; justify-content: center; font-size: 16px; }

.modal .modal_title .modal_txt_main { font-size: 40px; text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.25); }

.modal img { width: 100%; height: auto; }

.modal .deco_col { height: 5px; background-color: #F9F9F9; }

.modal #modal_lower_btn { position: fixed; top: calc(100vh - 70px); align-self: center; border-radius: 0; background-color: black; color: white; font-size: 24px; 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; } }

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

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

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