@charset "euc-kr";
/* bg url: https://image.megagong.net/m/2025/ */

/* settings */
:root {
    --color-primary: #005DFF;
}
.evSection {padding: 150px 0 50px;}
.evSection .mini_tit {font-weight: 400; line-height: 1.6; color: #555;}
.evSection .mini_tit strong {color: #111;}
.evSection .con_tit + .mini_tit {margin-bottom: 80px;}
.tx_primary {color: var(--color-primary);}
.step_btn > * {border-radius: 100px;}
.btn-base.green > * {width: 100%; background-color: #08CB00; color: #FFF; border: 1px solid #08CB00;}
.btn-base.purple > * {width: 100%; background-color: #5A18FE; color: #FFF; border: 1px solid #5A18FE;}
.btn-base-wrap .btn-base.black > * {width: 100%;}

.evSection.event .con_tit {font-weight: 400;}
.evSection.event .mini_tit span {font-weight: 500;}
.con_tit .end::after {background: #111;} /* À̺¥Æ®Á¾·á ¾ÆÀÌÄÜ »ö»óº¯°æ */
.gift_full_wrap {max-width: 1080px;}
.evt_con_base.evt_noti {color: var(--color-primary); margin: 40px auto 10px;}
.evt_con_base + .btn-base-wrap {margin-top: 0;}

/* evBnr */
.evBnr {color: #F4F8FF; background: #111; position: absolute; visibility: hidden; opacity: 0;}
.evBnr.fixed {position: fixed; top: 0; left: 0; width: 100%; border-top: none; z-index: 3; visibility: visible; opacity: 1;}
.evBnr li {flex: 1; position: relative;}
.evBnr li + li::before {content: ''; position: absolute; top: 20%; left: 0; width: 1px; height: 60%; background: rgba(244, 248, 255, 0.5);}
.evBnr li a {display: block; padding: 2vmin 0;}
.evBnr li .badge {display: inline-block; background: var(--color-primary); border-radius: 450px; padding: 2px 10px; margin-bottom: 5px;}
.evBnr li strong {display: block;}

/* evCon1 */
.evCon1 {padding: 150px 0 50px; background: #fff;}
.evCon1 h3 {position: relative; width: fit-content; font-weight: 400; font-size: 104px; letter-spacing: -0.04em; line-height: 1.2; text-align: left;}
.evCon1 h3 strong {display: block; width: fit-content; font-size: 112px; background: linear-gradient(270deg, #09A1FF 12.62%, #005DFF 61.36%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.evCon1 h3 .typing_highlight {color: #FFF; background: linear-gradient(180deg, transparent 20%, #111 20%, #111 90%, transparent 90%); transition: background-color 0.5s ease;}
.evCon1 h3 strong .typing_highlight {color: #FFF; -webkit-text-fill-color: initial;}
.evCon1 .arrow_obj {position: absolute; right: -187px; bottom: -32px; width: 293px; height: 227px; pointer-events: none;}
.evCon1 .arrow_obj::before {content: ''; position: absolute; width: 100%; max-width: 240px; height: 51px; left: 6px; bottom: -50px; background: url(https://image.megagong.net/m/2025/0814_first/con1_shadow.png) no-repeat 50% 50%; background-size: 100% auto; opacity: 0; animation: shadowFade 3s ease-in-out infinite;}
.evCon1 .arrow_obj img {position: absolute; top: 0; left: 20px; opacity: 0; transform: translateX(-20px); animation: arrowFade 9s ease-in-out infinite;}
.evCon1 .arrow_obj img:nth-child(1) {animation-delay: 0s;}
.evCon1 .arrow_obj img:nth-child(2) {animation-delay: 3s;}
.evCon1 .arrow_obj img:nth-child(3) {animation-delay: 6s;}
.evCon1 .info {display: flex; justify-content: flex-start; align-items: center; gap: 16px; margin: 30px auto 80px;}
.evCon1 .info::before {content: ''; display: inline-block; width: 2px; height: 18px; background: #111; opacity: 0.4;}
.evCon1 .info_title {font-weight: 700; order: -1;}
.evCon1 .btn-base-wrap .bubble {position: absolute; top: 14px; left: 50%; transform: translate(-50%, -100%); padding: 10px 30px; background: var(--color-primary); border-radius: 10px;   animation: floatUpDown 2s ease-in-out infinite; z-index: 1;}
.evCon1 .btn-base-wrap .bubble::before {content: ''; position: absolute; bottom: -5px; left: calc(50% - 5px); border-top: 6px solid var(--color-primary); border-right: 10px solid transparent;}

@keyframes shadowFade {
0% {
    opacity: 0;
}
10% {
    opacity: 1;
}
90% {
    opacity: 1;
}
100% {
    opacity: 0;
}
}

@keyframes arrowFade {
0% {
    opacity: 0;
    transform: translateX(-20px);
}
10% {
    opacity: 1;
    transform: translateX(0);
}
30% {
    opacity: 1;
    transform: translateX(0);
}
40% {
    opacity: 0;
    transform: translateX(20px);
}
100% {
    opacity: 0;
    transform: translateX(20px);
}
}

@keyframes floatUpDown {
    0% {
        transform: translate(-50%, -100%);
    }
    50% {
        transform: translate(-50%, -120%);
    }
    100% {
        transform: translate(-50%, -100%);
    }
}
/* evCon2 */
.evCon2 {background: #fff;}
.evCon2 .bubble_wrap {position: relative; min-height: 560px; background: url(https://image.megagong.net/m/2025/0814_first/con2_bubble_bg.png) no-repeat 50% 50%; background-size: 100% auto;}
.evCon2 .bubble_wrap .item {position: absolute; width: 506px; font-weight: 400; border-radius: 20px; border: 3px solid var(--color-primary); background: #FFF; padding: 35px 0;}
.evCon2 .bubble_wrap .item:nth-child(1) {top: 15px; right: 10px; color: #FFF; background: var(--color-primary);}
.evCon2 .bubble_wrap .item:nth-child(2) {width: 435px; top: 130px; left: 10px;}
.evCon2 .bubble_wrap .item:nth-child(3) {bottom: 75px; right: 165px;}
.evCon2 .bubble_wrap .item:nth-child(3)::before {content: ''; position: absolute; top: -37px; right: -29px; width: 115px; height: 131px; background: url(https://image.megagong.net/m/2025/0814_first/con2_obj.png) no-repeat; background-size: contain;}

/* evCon3 */
.evCon3 {background: #fff;}
.evCon3 .con_tit + .mini_tit {margin-bottom: 60px;}
.evCon3 .step_box {position: relative; align-items: flex-end; gap: 20px; margin-bottom: 60px;}
.evCon3 .step_box::before {content: ''; position: absolute; top: 124px; width: 100%; height: 151px; background-size: 100% auto; background: url(https://image.megagong.net/m/2025/0814_first/con3_line.png) no-repeat; background-size: 100% auto;}
.evCon3 .step_box .item {position: relative; flex: 1; display: flex; flex-wrap: wrap; align-items: center;}
.evCon3 .step_box .step {position: relative; flex-basis: 100%;}
.evCon3 .step_box .step::after {content: ''; display: block; width: 56px; height: 62px; background: url(https://image.megagong.net/m/2025/0814_first/con3_obj.png) no-repeat; margin: 14px auto 0;}
.evCon3 .step_box .step p {position: relative; display: inline-block; font-weight: 700; border-radius: 10px; background: var(--color-primary); padding: 10px 30px;}
.evCon3 .step_box .step p::before {content: ''; position: absolute; bottom: -5px; left: calc(50% - 5px); border-top: 6px solid var(--color-primary); border-right: 10px solid transparent;}
.evCon3 .step_box .box {width: 255px; border-radius: 10px; background: #F8F8F8; padding: 40px 10px;}
.evCon3 .step_box .tit .num {display: inline-block; font-weight: 700; color: var(--color-primary); margin-bottom: 5px;}
.evCon3 .step_box .box p {font-weight: 400; color: #555; line-height: 1.6; margin: 10px 0;}
.evCon3 .step_box .btn-base {max-width: 180px;}
.evCon3 .step_box .btn-base a {display: block; font-weight: 700; border: 1px solid #111;}
.evCon3 .step_box .item:nth-child(1) .step {margin-bottom: 63px;}
.evCon3 .step_box .item:nth-child(2) {flex: 2; gap: 0 20px; margin-bottom: 60px;}
.evCon3 .step_box .item:nth-child(2) .step {margin-bottom:11px;}
.evCon3 .step_box .item:nth-child(2) .box {flex: 1;}
.evCon3 .step_box .item:nth-child(2) .box:last-child {margin-bottom: 60px;}
.evCon3 .step_box .item:nth-child(3) {margin-bottom: 180px;}
.evCon3 .step_box .item:nth-child(3) .step {margin-bottom: 22px;}
.evCon3 .table_tit {font-weight: 700; margin-bottom: 20px;}
.evCon3 .table-base th {font-weight: 700; color: #111; background: #F4F8FF;}
.evCon3 .table-base-wrap + .evt_con_base {font-weight: 400; margin-top: 20px;}
.evCon3 .tip_wrap {position: relative; align-items: center; gap: 40px; margin-top: 60px;}
.evCon3 .tip_wrap ul {flex: 1; text-align: left;}
.evCon3 .tip_wrap li {border-radius: 500px; background: #F8F8F8; padding: 30px 80px;}
.evCon3 .tip_wrap li + li {margin-top: 10px;}
.evCon3 .tip_wrap li p {position: relative; color: #888; line-height: 1.6; padding-left: 30px;}
.evCon3 .tip_wrap li p::before {content: ''; position: absolute; top: 6px; left: 0; width: 20px; height: 15px; background: url(https://image.megagong.net/m/2025/0814_first/ico_check.png) no-repeat; background-size: contain;}
.evCon3 .tip_wrap li strong {color: var(--color-primary);}

/* TIP Æ˾÷ */
#tipPopup .content_area .content_inner {padding: 40px;}
#tipPopup p {font-weight: 400; color: #555; text-align: center; line-height: 1.5;}
#tipPopup p strong {color: var(--color-primary);}

/* evCon4 */
.evCon4 {padding: 150px 0; background: #fff;}
.evCon4 .step_tit {display: flex; justify-content: center; align-items: center; gap: 14px; margin-bottom: 40px;}
.evCon4 .step_tit::after {content: ''; display: block; width: 91px; height: 65px; background: url(https://image.megagong.net/m/2025/0814_first/con4_obj.png) no-repeat; background-size: contain;}
.evCon4 .step_tit u {color: var(--color-primary); text-underline-offset: 15px; text-decoration-thickness: 3px;}
.evCon4 .step_wrap {justify-content: center; gap: 110px;}
.evCon4 .step_wrap li {position: relative; width: 260px; height: 260px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border-radius: 50%; background: #F8F8F8;}
.evCon4 .step_wrap li + li::before {content: ''; position: absolute; top: calc(50% - 17px); left: -72px; width: 34px; height: 34px; background: url(https://image.megagong.net/m/2025/0814_first/ico_arrow.png) no-repeat; background-size: contain;}
.evCon4 .step_wrap li .num {font-weight: 700; color: var(--color-primary);}
.evCon4 .step_wrap li.done {background: var(--color-primary);}
.evCon4 .step_wrap li.done .num {color: #FFDE58;}
.evCon4 .step_wrap li.done strong {color: #FFF;}

/* stepWrap */
.stepWrap {padding: 50px 0; background: linear-gradient(180deg, rgba(138, 208, 251, 0.00) 0%, #8AD0FB 100%);}
.stepWrap .evSection {padding: 100px 0;}

/* evCon7 */
.evCon7.event .mini_tit {margin-bottom: 30px;}
.evCon7 .gift_full_wrap {margin-top: 30px;}
.evCon7 .btn-base + .evt_con_base {color: #111; opacity: 0.5; margin-top: 10px;}

/* evCon8 */
.evCon8 {padding: 150px 0; background: linear-gradient(180deg, #003CFF 0%, rgba(111, 144, 255, 0.50) 40%, rgba(166, 187, 255, 0.25) 60%, rgba(221, 229, 255, 0.00) 80%);}
.evCon8 .mini_tit {color: #FFF; opacity: 0.8;}
.evCon8 .btn-base a {width: 100%;}

.roulette_base_wrap .roulette_wrap {position: relative; padding: 24px; background: url(https://image.megagong.net/m/2025/0814_first/roulette_bg.png) no-repeat 50% 50%; background-size: auto 100%;}
.roulette_base_wrap .roulette_wrap::before {content: ''; position: absolute; bottom: -60px; left: 0; width: 100%; height: 114px; background: url(https://image.megagong.net/m/2025/0814_first/roulette_bg_shadow.png) no-repeat 50% 50%; background-size: auto 100%; z-index: -1;}
.roulette_base_wrap .roulette_wrap .startBox {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 160px; height: 160px; top: 50%; border-radius: 50%; background: linear-gradient(90deg, #2853FF 0%, #2AA0FF 100%); color: #FFF;}
/* .roulette_base_wrap .roulette_wrap .roulette {padding: 24px; background: url(https://image.megagong.net/m/2025/0814_first/roulette_bg.png) no-repeat 50% 50%; background-size: auto 100%;} */

/* ´ç÷ Æ˾÷ */
[class*="popupRoulette"] {font-weight: 500; text-align: center;}
[class*="popupRoulette"] .md_tit {margin-bottom: 20px;}
[class*="popupRoulette"] .sm_tit {color: #777; margin-bottom: 10px;}
.popupRouletteResult .content_area .content_inner {padding: 40px 0;}
.popupRouletteResult .gift_name {background: #D8D8D8; padding: 16px 0; margin: 30px 0;}
.popupRouletteResult .caution {color: #888; margin: 0 30px; line-height: 1.3; margin: 0 30px;}
.popupRouletteResult .caution li {text-indent: -5px; padding-left: 10px;}
.popupRouletteResult .caution li::before {content: '\2022'; display: inline-block; width: 5px;}
.popupRouletteResult .caution li a {font-weight: 700; color: #111;}

/* ´ç÷ ÇöȲ Æ˾÷ */
.popupRouletteStatus .content_area .content_inner {padding: 40px 30px;}
.popupRouletteStatus .table-base-wrap {margin-top: 30px;}
.popupRouletteStatus .table-base {font-size: 13px;}
.popupRouletteStatus .table-base.tp2 th,
.popupRouletteStatus .table-base.tp2 td {padding: 10px;}
.popupRouletteStatus .none {margin: 60px 0;}

/* evtoggleWarning */
.evtoggleWarning {padding: 0 !important;}

@media screen and (max-width: 1200px){
    /* settings */
    .evSection {padding: 14% 0 4%;}
    .evSection .con_tit + .mini_tit {margin-bottom: 8%;}

    .btn-base.xl > * {padding: 21px 10px;}
    .evt_con_base.evt_noti {margin-top: 4%;}

    /* evCon1 */
    .evCon1 h3 {font-size:clamp(36px,9.5vmin,100px);}
    .evCon1 h3 strong {font-size:clamp(40px,10.5vmin,110px);}
    .evCon1 .arrow_obj {right: 9vmin; transform: translateX(100%);}

    .evCon2 .bubble_wrap .item:nth-child(3) {bottom: 40px;}
    
    /* evCon3 */
    .evCon3 .con_tit + .mini_tit {margin-bottom: 6%;}
    .evCon3 .step_box {gap: 10px;}
    .evCon3 .step_box .item:nth-child(2) {gap: 0 10px;}
    .evCon3 .step_box .box {width: 100%;}
    .evCon3 .tip_wrap {gap: 20px;}
    .evCon3 .tip_wrap li {padding: 30px 45px;}

    /* evCon4 */
    .evCon4 {padding: 14% 0;}

    /* stepWrap */
    .stepWrap {padding: 4% 0;}
    .stepWrap .evSection {padding: 10% 0;}

    /* evCon8 */
    .evCon8 .btn-base {flex-grow: 0; flex-basis: 50%;}
}
@media screen and (max-width: 992px){
    .evCon2 .bubble_wrap {min-height: auto;}
    .evCon2 .bubble_wrap .item,
    .evCon2 .bubble_wrap .item:nth-child(2) {width: 70%;}
    .evCon2 .bubble_wrap .item {position: static;}
    .evCon2 .bubble_wrap .item + .item {margin-top: 20px;}
    .evCon2 .bubble_wrap .item:nth-child(odd) {margin-left: auto;}

    .evCon3 .tip_wrap .img {width: 20%;}
    .evCon3 .tip_wrap li {padding: 30px 15px 30px 30px;}

    .evCon4 .step_wrap {gap: 6vmin;}
    .evCon4 .step_wrap li {width: 29.333vmin; height: 29.333vmin;}
    .evCon4 .step_wrap li + li::before {left: calc(-3vmin - 17px);}
}
@media screen and (max-width: 768px){
    .evCon1 .arrow_obj {width: 30vmin; height: 26vmin;}

    .evCon3 .step_box {flex-direction: column;}
    .evCon3 .step_box::before {width: 16px; height: 100%; top: 0; left: 0; background-image: url(https://image.megagong.net/m/2025/0814_first/con3_line_mo.png); background-position: 50% 100%;}
    .evCon3 .step_box .step {position: absolute; top: 6vmin; left: -30px; z-index: 1;}
    .evCon3 .step_box .step::after {position: absolute; left: -2px; bottom: -30px; width: 20px; height: 20px; background-image: url(https://image.megagong.net/m/2025/0814_first/con3_obj_mo.png);}
    .evCon3 .step_box .step p {padding: 10px;}
    .evCon3 .step_box .item {width: calc(100% - 30px); margin-bottom: 0 !important;}
    .evCon3 .step_box .item:nth-child(2) {flex-direction: column;}
    .evCon3 .step_box .item:nth-child(2) .box:last-child {margin-top: 10px; margin-bottom: 0;}
    .evCon3 .step_box .item:nth-child(3) .step {top: -25px; transform: translateY(-100%);}
    .evCon3 .step_box .box {padding: 30px 10px;}
    .evCon3 .step_box .tit {font-size: 18px;}
    .evCon3 .step_box .tit .num {font-size: 15px;}
    .evCon3 .table-base-wrap {overflow-x: auto;}
    .evCon3 .table-base {min-width: 730px;}
    .evCon3 .tip_wrap .img {display: none;}
    .evCon3 .tip_wrap li {padding: 20px 30px;}
}
@media screen and (max-width: 576px){
    .evt_con_base.xs {font-size: 12px;}

    .evBnr ul {flex-wrap: wrap;}
    .evBnr li {flex-basis: 50%;}
    .evBnr li:nth-child(odd)::before {content: none;}
    .evBnr li:nth-child(even)::before {top: 0; height: 100%;}
    .evBnr li:nth-child(n+3) {border-top: 1px solid rgba(244, 248, 255, 0.5);}
    .evBnr li a {padding: 1vmin 0;}
    .evBnr li .badge {padding: 0 5px; font-size: 12px; margin-bottom: 3px;}
    .evBnr li strong {font-size: 13px;}

    .evCon1 .arrow_obj {bottom: 0;}
    .evCon1 .arrow_obj::before {bottom: -35px;}
    .evCon1 .btn-base-wrap .bubble {padding: 5px 20px;}

    .evCon2 .bubble_wrap .item,
    .evCon2 .bubble_wrap .item:nth-child(2) {width: 100%; padding: 20px 0;}
    .evCon2 .bubble_wrap .item:nth-child(3)::before {top: -20px; right: 0; width: 69px; height: 79px;}

    .evCon3 .tip_wrap li {padding: 15px; border-radius: 10px;}
    .evCon3 .tip_wrap li p {padding-left: 15px;}
    .evCon3 .tip_wrap li p::before {width: 10px; height: 7.5px;}

    #tipPopup .content_area .content_inner {padding: 40px 20px;}

    .gift_full_wrap {width: 120%; margin-left: -10%;}

    .evCon4 .con_tit {margin: 0 -2%;}
    .evCon4 .step_tit::after {width: 45.5px; height: 32.5px;}
    .evCon4 .step_wrap li + li::before {width: 17px; height: 17px; top: calc(50% - 8.5px); left: calc(-3vmin - 8.5px);}

    .evCon7 .btn-base + .evt_con_base {font-size: 13px; margin-top: 5px;}

    .roulette_base_wrap .roulette_wrap {padding: 14px;}
    .roulette_base_wrap .roulette_wrap .startBox {width: 120px; height: 120px;}
    .popupRouletteStatus .content_area .content_inner {padding: 40px 10px;}
}