@charset "UTF-8";

/* 805 x 1231 */
/* 공통 */
.event_container {
    position: relative;
    width: 100%;
    color: #000;
    font-family: 'noto4';
    overflow: hidden;
    background: #e6f6ff;
}

.event_container img {
    display: block;
    width: 100%;
    height: auto;
}

.event_container button {
    border: none;
    background: none;
    cursor: pointer;
}

.event_container li {
    float: none;
}

.event_container p,
.event_container h3,
.event_container strong {
    font-weight: normal;
}

.event_container .screen_out {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
}

.event_container .event_cont {
    position: relative;
}

.event_container .main_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: min(750px, 60.926vh, 93.168vw);
    height: 100%;
    margin: 0 auto;
}

.event_container .event_title {
    text-align: center;
}

.event_container .event_title h3 {
    line-height: 1.35;
    letter-spacing: -0.055em;
    font-size: min(36px, 2.924vh, 4.472vw);
    font-family: 'market-b';
}

.event_container .event_title em {
    padding: 0 min(10px, 0.812vh, 1.242vw);
    box-shadow: inset 0 max(-20px, -1.625vh, -2.485vw) 0 0 #faf9d7;
    font: inherit;
    color: #1fadff;
}

.event_container .button_wrap {
    display: flex;
    flex-direction: column;
    gap: min(20px, 1.625vh, 2.485vw);
    width: 100%;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes marquee-reverse {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(50%);
    }
}

@keyframes pointerBounceDiagonal {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(max(-10px, -0.812vh, -1.242vw), max(-10px, -0.812vh, -1.242vw));
    }
}

@keyframes floating {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(max(-10px, -0.812vh, -1.242vw));
    }

    100% {
        transform: translateY(0);
    }
}

/* 헤더 */
.event_header {
    background: #1fadff;
}

.event_header .header_title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.event_header .header_title img {
    width: 100%;
    height: auto;
}

/* 컨텐츠 */
.event_intro {
    height: min(1170px, 95.045vh, 145.342vw);
    padding: min(51px, 4.143vh, 6.335vw) 0 0;
    background: #47c0ff url('/img/event/9328/intro_bg.jpg') no-repeat center top / 100% auto;
}

.event_intro .main_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.event_intro .event_img {
    width: min(762px, 61.901vh, 94.658vw);
}

.event_intro .btn_quiz_next {
    position: absolute;
    top: min(617px, 50.122vh, 76.646vw);
    left: min(56px, 4.549vh, 6.957vw);
    width: min(640px, 51.99vh, 79.503vw);
    height: min(109px, 8.855vh, 13.54vw);
}

.event_intro .btn_quiz_next::after {
    content: '';
    position: absolute;
    right: min(10px, 0.812vh, 1.242vw);
    bottom: min(-19px, -1.543vh, -2.36vw);
    width: min(57px, 4.63vh, 7.081vw);
    height: min(65px, 5.28vh, 8.075vw);
    background: url('/img/event/8961/pc/btn_icon.png') no-repeat 0 0 / contain;
    animation: pointerBounceDiagonal 1s infinite;
}

.event_question {
    max-height: 100vh;
    padding: min(70px, 5.686vh, 8.695vw) 0 min(100px, 8.123vh, 12.422vw);
}

.event_question .content_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: min(450px, 36.556vh, 55.901vw);
    border: min(5px, 0.406vh, 0.621vw) solid #1fadff;
    border-radius: min(30px, 2.437vh, 3.727vw);
    background: #fff;
}

.event_question .question_index {
    position: absolute;
    top: min(30px, 2.437vh, 3.727vw);
    right: min(41px, 3.331vh, 5.093vw);
}

.event_question .question_index span {
    line-height: 1.2;
    letter-spacing: -0.05em;
    color: #1fadff;
    font-size: min(28px, 2.275vh, 3.478vw);
    font-family: 'noto4';
}

.event_question .q_item {
    display: none;
    line-height: min(50px, 4.062vh, 6.211vw);
    letter-spacing: -0.05em;
    text-align: center;
    font-size: min(36px, 2.924vh, 4.472vw);
    font-family: 'noto6';
}

.event_question .q_item.is_active {
    display: block;
}

.event_question .q_item em {
    color: #0093e8;
    font: inherit;
}

.event_question .button_wrap {
    margin-top: min(40px, 3.249vh, 4.969vw);
}

.event_question .button_wrap button {
    width: 100%;
    height: min(90px, 7.311vh, 11.18vw);
    line-height: 1.2;
    border: min(4px, 0.325vh, 0.497vw) solid #b0b0b0;
    border-radius: min(90px, 7.311vh, 11.18vw);
    letter-spacing: -0.055em;
    color: #606060;
    font-size: min(24px, 1.95vh, 2.981vw) !important;
    font-family: 'noto7';
    background: #fff;
}

.event_question .button_wrap button.is_active {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(to right, #63db57, #01b52b);
}

.event_question .btn_next {
    margin-top: min(70px, 5.686vh, 8.695vw);
}

.event_question .btn_next_2 {
    display: none;
}

.event_question .text_remain {
    margin-top: min(20px, 1.625vh, 2.485vw);
    text-align: center;
    letter-spacing: -0.05em;
    color: #998ea8;
    font-size: min(28px, 2.275vh, 3.478vw);
    font-family: 'noto4';
}

.event_result .result_wrap_1 {
    padding: min(57px, 4.63vh, 7.081vw) 0 min(77px, 6.255vh, 9.565vw);
}

.event_result .result_wrap_2 {
    padding: min(60px, 4.874vh, 7.453vw) 0 min(77px, 6.255vh, 9.565vw);
    background: #fff;
}

.event_result .result_item {
    display: none;
    flex-direction: column;
    gap: min(21px, 1.706vh, 2.609vw);
    width: 100%;
}

.event_result .result_item.is_active {
    display: flex;
}

.event_result .item_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border-radius: min(32px, 2.6vh, 3.976vw);
    background: #fff;
    box-shadow: 1px 1px min(6px, 0.487vh, 0.745vw) min(0px, 0vh, 0vw) rgba(12, 85, 126, 0.15);
}

.event_result .item_box:nth-of-type(1) {
    padding: min(205px, 16.653vh, 25.465vw) min(41px, 3.331vh, 5.093vw) min(40px, 3.249vh, 4.969vw);
    border-radius: min(30px, 2.437vh, 3.727vw);
    border: min(5px, 0.406vh, 0.621vw) solid #1fadff;
    box-shadow: min(4px, 0.325vh, 0.497vw) min(4px, 0.325vh, 0.497vw) min(15px, 1.219vh, 1.863vw) min(0px, 0vh, 0vw) rgba(31, 173, 255, 0.57);
}

.event_result .event_title {
    padding: min(57px, 4.63vh, 7.081vw) 0 0;
    background: url('/img/event/9328/deco_money.png') no-repeat center top / min(59px, 4.793vh, 7.33vw) auto;
}

.event_result .item_visual {
    position: absolute;
    top: 0;
    left: 0;
}

.event_result .item_note {
    width: 100%;
    line-height: 1.49;
    padding: min(37px, 3.006vh, 4.596vw) min(45px, 3.656vh, 5.59vw);
    border-radius: min(13px, 1.056vh, 1.615vw);
    letter-spacing: -0.03em;
    word-break: keep-all;
    color: #0091e5;
    font-size: min(27px, 2.193vh, 3.354vw);
    font-family: 'noto6';
    background: #e6f6ff;
}

.event_result .suggestion_list {
    display: flex;
    flex-direction: column;
    width: min(601px, 48.822vh, 74.658vw);
    margin: min(15px, 1.219vh, 1.863vw) 0 min(27px, 2.193vh, 3.354vw);
}

.event_result .suggestion_item {
    position: relative;
    width: 100%;
    padding: min(33px, 2.681vh, 4.099vw) 0 min(28px, 2.275vh, 3.478vw) min(114px, 9.261vh, 14.161vw);
}

.event_result .suggestion_item+.suggestion_item {
    background: url('/img/event/9328/deco_line.png') no-repeat 0 0 / 100% auto;
}

.event_result .suggestion_item::after {
    content: '';
    position: absolute;
    top: min(21px, 1.706vh, 2.609vw);
    left: min(60px, 4.874vh, 7.453vw);
    width: min(44px, 3.574vh, 5.466vw);
    height: min(44px, 3.574vh, 5.466vw);
    background: url('/img/event/9328/icon_indexs.png') no-repeat 0 0 / auto min(54px, 4.387vh, 6.708vw);
}

.event_result .suggestion_item:nth-child(1):after {
    background-position-x: max(-10px, -0.812vh, -1.242vw);
}

.event_result .suggestion_item:nth-child(2):after {
    background-position-x: max(-74px, -6.011vh, -9.193vw);
}

.event_result .suggestion_item:nth-child(3):after {
    background-position-x: max(-138px, -11.21vh, -17.143vw);
}

.event_result .suggestion_item:nth-child(4):after {
    background-position-x: max(-202px, -16.409vh, -25.093vw);
}

.event_result .suggestion_item:nth-child(5):after {
    background-position-x: max(-266px, -21.608vh, -33.044vw);
}

.event_result .suggestion_item strong {
    line-height: 1.2;
    letter-spacing: -0.04em;
    font-size: min(30px, 2.437vh, 3.727vw);
    font-family: 'noto7';
}

.event_result .suggestion_item p {
    line-height: 1.2;
    margin: min(5px, 0.406vh, 0.621vw) 0 0;
    letter-spacing: -0.04em;
    font-size: min(24px, 1.95vh, 2.981vw);
    word-break: keep-all;
    font-family: 'noto5';
}

.event_result .tip_list {
    display: flex;
    flex-direction: column;
    gap: min(17px, 1.381vh, 2.112vw);
    width: 100%;
    margin: min(44px, 3.574vh, 5.466vw) 0 min(57px, 4.63vh, 7.081vw);
}

.event_result .tip_item {
    min-height: min(24px, 1.95vh, 2.981vw);
    line-height: 1.7;
    padding: 0 0 0 min(168px, 13.647vh, 20.87vw);
    letter-spacing: -0.04em;
    font-size: min(24px, 1.95vh, 2.981vw);
    font-family: 'noto5';
    background: url('/img/event/9328/index_finger.png') no-repeat min(107px, 8.692vh, 13.292vw) min(7px, 0.569vh, 0.869vw) / min(42px, 3.412vh, 5.217vw) auto;
}

.event_result .tip_item em {
    box-shadow: inset 0 max(-29px, -2.95vh, -3.981vw) 0 0 rgba(182, 228, 255, 0.67);
    font-family: 'noto6';
}

.event_result .button_wrap {
    margin: min(36px, 2.924vh, 4.472vw) 0 0;
}

.event_result .product_list {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: min(33px, 2.681vh, 4.099vw) 0 0;
}

.event_result .product_list .list_item {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: min(294px, 23.883vh, 36.522vw);
    padding: min(51px, 4.143vh, 6.335vw) 0 0 min(66px, 5.361vh, 8.199vw);
    border: min(4px, 0.325vh, 0.497vw) solid #1fadff;
    border-radius: min(19px, 1.543vh, 2.36vw);
    overflow: hidden;
    background: #fff url('/img/event/9328/result_benefit.png') no-repeat 0 0 / 100% auto;
}

.event_result .product_list .item_title {
    line-height: 1.2;
    letter-spacing: -0.055em;
    font-size: min(38px, 3.087vh, 4.721vw);
    font-family: 'noto6';
}

.event_result .product_list .item_desc {
    line-height: 1.2;
    margin: min(20px, 1.625vh, 2.485vw) 0 0;
    letter-spacing: -0.05em;
    font-size: min(24px, 1.95vh, 2.981vw);
    font-family: 'noto5';
}

.event_result .product_list .btn_go {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: min(54px, 4.387vh, 6.708vw);
    line-height: min(55px, 4.468vh, 6.832vw);
    margin: min(18px, 1.462vh, 2.236vw) 0 0;
    letter-spacing: -0.055em;
    text-align: center;
    color: #fff;
    font-size: min(26px, 2.112vh, 3.23vw);
    font-family: 'noto6';
    background: #1fadff;
}

.event_result .product_noti {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: min(20px, 1.625vh, 2.485vw) 0 0;
    padding: min(29px, 2.356vh, 3.603vw) min(58px, 4.712vh, 7.205vw);
    border-radius: min(20px, 1.625vh, 2.485vw);
    background: #eef3f5;
}

.event_result .product_noti .noti_title {
    position: relative;
    line-height: 1.2;
    letter-spacing: -0.045em;
    font-size: min(24px, 1.95vh, 2.981vw);
    font-family: 'noto6';
}

.event_result .product_noti .noti_title::before {
    content: '';
    position: absolute;
    top: 0;
    left: max(-35px, -2.843vh, -4.348vw);
    width: min(29px, 2.356vh, 3.603vw);
    height: min(29px, 2.356vh, 3.603vw);
    background: url('/img/event/9328/icon_info.png') no-repeat 0 0 / contain;
}

.event_result .product_noti .noti_list {
    display: flex;
    flex-direction: column;
    gap: min(6px, 0.487vh, 0.745vw);
    width: 100%;
    margin: min(14px, 1.137vh, 1.739vw) 0 0;
}

.event_result .product_noti li {
    position: relative;
    line-height: 1.3;
    letter-spacing: -0.045em;
    font-size: min(17px, 1.381vh, 2.112vw);
    font-family: 'noto3';
}

.event_answer {
    padding: min(130px, 10.561vh, 16.149vw) 0 min(120px, 9.748vh, 14.907vw);
}

.event_answer .main_inner {
    max-width: none;
}

.event_answer .event_table {
    width: min(1100px, 89.358vh, 136.646vw);
    margin: 0 auto;
    border: 1px solid #2e0468;
    border-top: min(5px, 0.406vh, 0.621vw) solid #2e0468;
    border-collapse: collapse;
}

.event_answer .event_table thead {
    background: #7d32e6;
}

.event_answer .event_table tr {
    border-top: 1px solid #ad9ec2;
}

.event_answer .event_table td+td,
.event_answer .event_table th+td,
.event_answer .event_table th+th {
    border-left: 1px solid #ad9ec2;
}

.event_answer .event_table thead th {
    padding: min(6px, 0.487vh, 0.745vw) 0 min(11px, 0.894vh, 1.367vw);
    letter-spacing: -0.03em;
    text-align: center;
    color: #fff;
    font-size: min(24px, 1.95vh, 2.981vw);
    font-family: 'noto5';
    font-weight: normal;
}

.event_answer .event_table tbody th {
    letter-spacing: -0.03em;
    text-align: center;
    font-size: min(24px, 1.95vh, 2.981vw);
    font-family: 'noto6';
    background: #f8f8f8;
}

.event_answer .event_table tbody td {
    padding: min(22px, 1.787vh, 2.733vw) min(28px, 2.275vh, 3.478vw) min(21px, 1.706vh, 2.609vw);
    letter-spacing: -0.04em;
    font-size: min(24px, 1.95vh, 2.981vw);
    font-family: 'noto4';
    background: #fff;
}

.event_answer .event_table tbody td:last-of-type {
    text-align: center;
}

.event_answer .event_table tbody td p {
    line-height: min(34px, 2.762vh, 4.223vw);
    letter-spacing: -0.07em;
    word-break: keep-all;
    font-size: min(24px, 1.95vh, 2.981vw);
    font-family: 'noto4';
}

.event_answer .event_table tbody td em {
    color: #7d32e6;
    font: inherit;
}

.event_answer .event_table tbody td span {
    font-family: 'noto6';
}

.event_answer .btn_retry {
    display: block;
    width: min(750px, 60.926vh, 93.168vw);
    margin: min(70px, 5.686vh, 8.695vw) auto 0;
}

/* 푸터 */
.event_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: min(110px, 8.936vh, 13.665vw);
    background: rgba(0, 0, 0, 0.6);
    z-index: var(--z-index-floating, 10);
}

.event_footer .share_wrap {
    display: flex;
    justify-content: center;
    gap: min(50px, 4.062vh, 6.211vw);
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 0;
    opacity: 0;
    transition: 0.3s ease-in-out;
    overflow: hidden;
}

.event_footer .share_wrap.is_active {
    width: 100%;
    opacity: 1;
}

.event_footer .share_wrap li {
    padding-bottom: min(20px, 1.625vh, 2.485vw);
}

.event_footer .btn_wrap {
    display: flex;
    gap: 0;
    height: 100%;
}

.event_footer .btn_wrap button {
    width: 100%;
    height: 100%;
}

.event_footer .btn_wrap img {
    width: auto;
    height: 100%;
}

.event_footer .btn_wrap .btn_retry {
    display: none;
}

/* 모달 */
.event_modal {
    display: none;
    align-items: flex-end;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
}

.event_modal.is_active {
    display: flex;
}

.event_modal .modal_content {
    width: 100%;
    padding: min(71px, 5.768vh, 8.82vw) 0 min(76px, 6.174vh, 9.441vw);
    background: #fff;
}

.event_modal .modal_content p {
    line-height: min(50px, 4.062vh, 6.211vw);
    text-align: center;
    letter-spacing: -0.05em;
    font-size: min(36px, 2.924vh, 4.472vw);
    font-family: 'noto6';
}

.event_modal .modal_content p em {
    color: #ff0048;
    font: inherit;
}

.event_modal .modal_content .btn_close {
    display: block;
    margin-top: min(49px, 3.981vh, 6.087vw);
}

.event_modal .modal_content .btn_close::after {
    content: '';
    position: absolute;
    bottom: min(-6px, -0.487vh, -0.745vw);
    right: min(20px, 1.625vh, 2.485vw);
    width: min(57px, 4.63vh, 7.081vw);
    height: min(65px, 5.28vh, 8.075vw);
    background: url('/img/event/8961/pc/btn_icon.png') no-repeat 0 0 / contain;
    animation: pointerBounceDiagonal 1s infinite;
}

/* 영역 노출 */
.event_cont {
    display: none;
}

.is_active_intro .event_header {
    display: none;
}

.is_active_question .event_footer,
.is_active_answer .event_footer {
    display: none;
}

.is_active_intro .event_intro,
.is_active_question .event_question,
.is_active_result .event_result,
.is_active_answer .event_answer {
    display: block;
}

@media screen and (max-width: 750px) {
    .event_container .event_footer .main_inner {
        max-width: 100vw;
    }
}