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

body { word-break: keep-all; }

.p-side { padding-left: 20px; padding-right: 20px; }

.m-side { margin-left: 20px; margin-right: 20px; }

.m-full { margin-left: -20px; margin-right: -20px; }

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

body, button { font-family: 'Noto Sans KR', sans-serif; font-weight: 500; background-color: black; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.btn-lg, .btn-group-lg > .btn { padding: 5px 16px; font-size: 20px; line-height: 1.7; border-radius: 0; }

.ls-lg { letter-spacing: 3px; }

.bg-point { background-color: black; }

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

.bg-point3 { background-color: #3C9182; }

.btn-point { color: #fff !important; border: none; }

.btn-point:hover { color: #fff !important; border: none; }

.btn_row { padding-left: 20px; padding-right: 20px; margin-bottom: 60px; }

.link_btn { font-family: "Noto Sans KR", sans-serif; width: 100%; padding: 15px 0; margin-bottom: 20px; font-size: 21px; line-height: 30px; border-radius: 0; outline: none !important; }

.sponsor_zone { display: flex; align-items: center; height: 100%; background-color: transparent; color: white; padding: 0 10px; user-select: none; }

#logo_inner { display: none; }

#start_inner { align-self: center; position: relative; }

#start_inner .decoration_shadow_row { margin-bottom: calc(-2500% / 320); z-index: 1; }

#start_inner h1 { position: absolute; color: #FFF6F1; top: 0; left: 0; }

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

#start_inner .title_image_row { position: relative; text-align: center; color: black; }

#start_inner .title_image_row h2 { font-weight: normal; font-size: 18px; }

#start_inner #main_image { max-width: 280px; width: 100%; height: auto; }

#start_inner .test_image_row { z-index: 0; position: relative; margin-left: auto; margin-right: auto; }

#start_inner #test_start { border: none; padding: 10px 0; margin: 0; line-height: 1.2; margin-left: auto; margin-right: auto; font-size: 15px; }

#start_inner #test_start #test_view { color: #F2F2F2; }

#start_inner #start_title { font-size: 25px; line-height: 30px; color: #F2F2F2; font-weight: bold; display: block; }

#intro_inner { pointer-events: none; position: relative; display: none; cursor: pointer; font-size: 21px; line-height: 30px; text-align: center; }

#intro_inner .title_row { font-family: 'ChosunLo'; font-size: 38px; color: #AADCD2; letter-spacing: 2px; }

#intro_inner .slide_carousel_item { z-index: 1; margin-right: -2px; transform: translateX(50vh); }

#intro_inner .slide_carousel_item img { width: auto; height: 70vh; max-height: 460px; }

#intro_inner #intro_image_row { z-index: 0; }

@media (max-height: 460px) { #intro_inner #intro_image_row { margin-left: calc(-70vh * 38 / 478); } }

@media (min-height: 461px) { #intro_inner #intro_image_row { margin-left: calc(-460px * 38 / 478); } }

#intro_inner #intro_img { width: auto; height: calc(70vh - 9rem); max-height: calc(460px - 144px); filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); }

#intro_inner #decoration_shadow_lr { z-index: 1; }

#intro_inner #decoration_right { transform: rotate(180deg); }

#intro_inner .intro_content_row { width: 90%; }

#intro_inner .intro_content { height: calc(70vh - 3rem); max-height: calc(460px - 48px); display: flex; }

#intro_inner .intro_content #intro_btn { font-size: 19px; color: #3C9182; opacity: 0.5; }

#intro_inner .intro_content #intro_btn span { border-bottom: 1px solid #3C9182; }

#intro_inner .font-weight-bold { font-size: 26px; }

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

.question_inner img, .question_inner svg { width: 100%; height: auto; }

.question_inner .decoration_col { width: 100%; }

@media (max-width: 500px) { .question_inner .decoration_col { height: calc((100vw - 0.5rem) * 45 / 330); } }

@media (min-width: 501px) { .question_inner .decoration_col { height: calc((500px - 0.5rem) * 45 / 330); } }

.question_inner .decoration_shadow_row { margin-bottom: calc(-2500% / 320); z-index: 1; }

.question_inner .title_row { position: relative; opacity: 0; }

.question_inner .title_row .question_number { line-height: 30px; font-size: 30px; user-select: none; text-align: center; }

.question_inner .title_row .question_content { color: black; line-height: 30px; font-size: 22px; padding: 0 30px; user-select: none; text-align: center; }

.question_inner .button_row { position: relative; opacity: 0; }

.question_inner .answer_button { font-weight: normal; background-color: rgba(80, 165, 150, 0.7); font-size: 17px; width: 100%; border: none; min-height: 72px; }

#loading_inner { display: none; color: #39897B; }

#loading_inner img { width: 30%; height: auto; margin-left: auto; margin-right: auto; }

#loading_inner #loading_sun { margin-bottom: -15%; }

#loading_inner #loading_sea { width: 60%; }

#result_container { position: relative; padding-bottom: 73px; z-index: 0; }

#result_container .image_row { padding-bottom: 16px; }

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

#result_container .image_row #title_image { width: 80%; max-width: 400px; margin-left: auto; margin-right: auto; align-self: center; height: auto; }

#result_container .result_content_title { font-size: 25px; border-bottom: 16px solid #AADCD2; margin-right: auto; margin-left: auto; }

#result_container .result_content_title p { margin-bottom: -16px; }

#result_container .result_detail { border: 2px solid #B8955C; border-top: none; }

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

#result_container .result_content_row { position: relative; z-index: 0; }

#result_container .decoration_shadow_row { position: relative; margin-bottom: calc(-2500% / 320); z-index: 1; }

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

#result_container #backlight1 { z-index: -1; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9) 76%, rgba(255, 255, 255, 0) 100%); }

@media (max-width: 500px) { #result_container #backlight1 { width: calc(100vw - 2rem); height: calc(100vw - 2rem); margin-bottom: calc(-100vw + 4rem); } }

@media (min-width: 501px) { #result_container #backlight1 { width: calc(500px - 2rem); height: calc(500px - 2rem); margin-bottom: calc(-500px + 4rem); } }

#result_container #backlight2 { z-index: -1; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9) 85%, rgba(255, 255, 255, 0.2) 90%, rgba(255, 255, 255, 0) 100%); }

@media (max-width: 500px) { #result_container #backlight2 { width: calc(100vw - 6rem); height: calc(100vw - 6rem); margin-bottom: calc(-110vw + 6.5rem); } }

@media (min-width: 501px) { #result_container #backlight2 { width: calc(500px - 6rem); height: calc(500px - 6rem); margin-bottom: calc(-550px + 6.5rem); } }

#result_container .result_row { position: relative; }

#result_container .result_row img { width: 100%; height: auto; z-index: 1; }

#result_container .result_row h1 { font-family: "ChosunLo"; color: #AADCD2; font-size: 38px; letter-spacing: 2px; }

#result_container .result_row h2 { color: #3C9182; font-size: 20px; line-height: 1.3; }

#result_container .result_row .character_col { font-size: 22px; }

#result_container .result_row .result_col { position: relative; padding: 14px 16px 20px 16px; font-family: 'Noto Sans KR', sans-serif; }

#result_container .result_row .result_col .content_title { font-weight: bold; font-size: 20px; }

#result_container .result_row .result_col .content_title span { color: #B8955C; font-size: 30px; line-height: 30px; }

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

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

#result_container .floating_wrapper a, #result_container .floating_wrapper button { border: 2px solid white; border-radius: 999px; color: white; }

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

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

.image_col { align-items: center; z-index: 1; }

@media (max-width: 500px) { .image_col { margin-top: calc(6.25rem - 102vw); } }

@media (min-width: 501px) { .image_col { margin-top: calc(6.25rem - 510px); } }

#type_modal { width: 100%; padding: 30px 20px; background-color: black; }

#type_modal .backlight_col { z-index: -1; background: radial-gradient(closest-side, white 89%, rgba(255, 255, 255, 0) 103%); }

@media (max-width: 540px) { #type_modal .backlight_col { width: calc(100vw - 3rem - 40px); height: calc(100vw - 3rem - 40px); } }

@media (max-width: 300px) { #type_modal .backlight_col { margin-bottom: calc(-90vw + 3rem + 40px); } }

@media (min-width: 301px) and (max-width: 320px) { #type_modal .backlight_col { margin-bottom: calc(-91vw + 3rem + 40px); } }

@media (min-width: 321px) and (max-width: 380px) { #type_modal .backlight_col { margin-bottom: calc(-92vw + 3rem + 40px); } }

@media (min-width: 381px) and (max-width: 420px) { #type_modal .backlight_col { margin-bottom: calc(-93vw + 3rem + 40px); } }

@media (min-width: 421px) and (max-width: 540px) { #type_modal .backlight_col { margin-bottom: calc(-94vw + 3rem + 40px); } }

@media (min-width: 541px) { #type_modal .backlight_col { width: calc(500px - 3rem); height: calc(500px - 3rem); margin-bottom: calc(-470px + 3rem); } }

#type_modal .animation_col { padding-right: 2rem; padding-left: 2rem; }

#type_modal img { width: 100%; height: auto; }

#type_modal .image_col { margin-top: calc(3.25rem - 100%); align-items: center; }

#type_modal .decoration_shadow_row { position: relative; margin-bottom: calc(-2500% / 320); z-index: 1; }

#type_modal .type_title { font-size: 30px; font-family: "ChosunLo"; color: #0A2D2D; }

#type_modal .modal_summary_row { position: relative; height: 100%; overflow: hidden; }

#type_modal .modal_title { font-size: 18px; }

#type_modal .modal_summary { font-family: "Noto Sans KR", sans-serif; font-size: 14px; line-height: 23px; padding-bottom: 20px; border-bottom: 1px solid #BDBDBD; }

.share_row { color: #3C9182; font-size: 20px; }

.share_row .text_col { opacity: 0.7; }

.share_row .share_col { margin: 15px 0 105px 0; }

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

.video_row { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; }

.video_row iframe, .video_row object, .video_row embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.animation-wrapper { width: 100%; padding-bottom: 100%; }

.sphere-animation { position: absolute; top: 50%; left: 50%; }

@media (max-width: 500px) { .sphere-animation { width: calc(100vw - 6rem); height: calc(100vw - 6rem); margin: calc(-50vw + 3rem) 0 0 calc(-50vw + 3rem); } }

@media (min-width: 501px) { .sphere-animation { width: calc(500px - 6rem); height: calc(500px - 6rem); margin: calc(-250px + 3rem) 0 0 calc(-250px + 3rem); } }

.sphere-animation svg { position: absolute; top: 0; left: 0; }

.sphere path { stroke: none; backface-visibility: hidden; }

#result .part1 path { fill: url("#sphereGradient1"); }

#result .part2 path { fill: url("#sphereGradient2"); }

#result .part3 path { fill: url("#sphereGradient3"); }

#result .part4 path { fill: url("#sphereGradient4"); }

#result .part5 path { fill: url("#sphereGradient5"); }

#result .part6 path { fill: url("#sphereGradient6"); }

#result .part7 path { fill: url("#sphereGradient7"); }

#result .part8 path { fill: url("#sphereGradient8"); }

#result .part9 path { fill: url("#sphereGradient9"); }

#result .part10 path { fill: url("#sphereGradient10"); }

#result .part11 path { fill: url("#sphereGradient11"); }

#result .part12 path { fill: url("#sphereGradient12"); }

#result .part13 path { fill: url("#sphereGradient13"); }

#result .part14 path { fill: url("#sphereGradient14"); }

#result .part15 path { fill: url("#sphereGradient15"); }

#result .part16 path { fill: url("#sphereGradient16"); }

#result .part17 path { fill: url("#sphereGradient17"); }

#result .part18 path { fill: url("#sphereGradient18"); }

#result .part19 path { fill: url("#sphereGradient19"); }

#result .part20 path { fill: url("#sphereGradient20"); }

#result .part21 path { fill: url("#sphereGradient21"); }