@charset "euc-kr";
:root { 
    --color-blue: #4C64FF;
    --color-red: #FA5757;
} 
/*°øÅë*/
.eventWrap .evSection { padding: 140px 0; } 
.con_tit .end::after { background: #000; } 
.con_tit .point { color: var(--color-blue); } 
.btn_wrap { display: flex; align-items: center; justify-content: center; gap: 30px; } 
.btn_wrap .btn { width: 420px; height: 90px; border-radius: 90px; color: #fff; } 
.btn_wrap .btn a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } 
.btn_wrap .btn.black { background: #000; } 
.btn_wrap .btn.gry { background: #666666; } 
.btn_wrap .btn.blue { background: var(--color-blue); } 
.btn_wrap .btn.red { background: var(--color-red); } 


/*evCon1*/
.eventWrap .evSection.evCon1 { padding: 50px 0 68px; position: relative; background-image: url("https://image.megagong.net/m/2025/0422_oxgong/evCon1_bg.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; } 
.evCon1 .con_tit {position: relative; margin:0 auto; width: fit-content;}
.evCon1 .tit2 {position: absolute; bottom:0; left: 50%; transform: translateX(-50%);}
.evCon1 .tit3 {position: absolute;top: -4%;right: 18%; animation:bounce 0.45s ease infinite alternate;}
.evCon1 .tit4 {position: absolute;top: 21%;left: 18%; animation:bounce 0.45s ease infinite alternate;}
.evCon1 .mini_tit {margin: -10px 0 36px;} 
.evCon1 .btn-base {display:block;margin: 40px auto 25px;}
.evCon1 .btn-base.mo {display:none;}
.evCon1 .btn-base > * {border-radius: 80px; background-color: #FA5757; color:#fff; padding: 28px 130px;}


@-webkit-keyframes bounce { 
    100%{
        transform: translate(0, -8px);
    }
}

/*stepCon1*/
.eventWrap .evSection.stepCon1 { background-color: #C8EA5D; padding: 80px 0 140px; } 
.stepCon1 .con_tit { margin: 0 0 60px; } 
.stepCon1 .con_box { padding: 50px 105px 60px; border-radius: 80px; background: #FFF; } 
.stepCon1 .chk_list_wrap { margin: 0 auto 50px; padding: 20px 0; border-radius: 100px; background: #F3F3F3; } 
.stepCon1 .chk_list li { margin:5px 0; display: flex; align-items: center; justify-content: center; gap: 10px; } 
.stepCon1 .chk_list li::before { content: ""; display: block; width: 19px; height: 13px; background-image: url("https://image.megagong.net/m/2025/0422_oxgong/s_chk.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; } 
.stepCon1 .progressbar_wrap { margin: 0 0 80px; background: #F3F4FF; border-radius: 10px; overflow: hidden; height: 15px; } 
.stepCon1 .progressbar { height: 100%; background: var(--color-blue); transition: width 0.3s ease; } 
.stepCon1 .question { margin: 0 auto 50px; padding: 24px 0; width: 100%; border-radius: 100px; background: #F3F3F3; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: bold; } 
.stepCon1 .choice_wrap { margin:0 0 50px; display: flex; justify-content: center; gap: 97px; } 
.stepCon1 .choice { position: relative; width: 352px; height: 352px; overflow: hidden; cursor: pointer; } 
.stepCon1 .choice label {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: 4px solid #000; border-radius: 43px; } 
.stepCon1 .choice img { object-fit: contain; pointer-events: none; } 
.stepCon1 .choice input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; width: 100%; height: 100%; top: 0; left: 0; margin: 0; z-index: 2; border:none; } 
.stepCon1 .choice:hover label { border-color: var(--color-blue); } 
.stepCon1 .toggle {height: 102px;}
.stepCon1 .toggle.on img {display: none;}
.stepCon1 .toggle img {margin:0 auto; display: block; height: 100%;}

/*stepCon2*/
.stepCon2 { background: linear-gradient(180deg, #FCFFE6 25.88%, #F6FFBA 100%); } 
.stepCon2 .con_tit { margin: 0 0 70px; } 
.stepCon2 .cat_wrap { display: flex; align-items: center; justify-content: center; } 
.stepCon2 .cat_wrap .cat { display: flex; flex-direction: column; align-items: center; } 
.stepCon2 .cat .after { position: relative; } 
.stepCon2 .cat .fin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
.stepCon2 .btn_wrap { gap: 58px; } 


/*ox ÄûÁî ·¹À̾îÆ˾÷*/
.stepClearPop_wrap {position: fixed; top:0; left:0; width: 100vw; height: 100vh;     overflow: hidden; z-index:1045; }
.stepClearPop_wrap .stepClearPop {position: absolute; top:50%; left: 50%; transform:translate(-50%, -50%); border-radius: 15px; width: 500px; padding: 40px 0; background-color: #fff; text-align: center; z-index:11; } 
.stepClearPop p { margin:20px 0; } 
.stepClearPop .btn a { margin: 0 auto; width:160px; height: 60px; display: flex;  justify-content: center; align-items: center; border-radius: 8px; background: #111; color: #fff; } 
.stepClearPop .close {position: absolute; z-index: 12;top:-17%;right: 0%; }


/*´ç÷ Æ˾÷*/
.mg_popup_wrap .img_wrap {margin: 27px auto 20px; display: flex; align-items: center; justify-content: center;}


/*event1*/
#event1 { background-image: url("https://image.megagong.net/m/2025/0422_oxgong/event_bg.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; } 
.event1 .con_tit .point { color: var(--color-red); } 
.event1 .form_wrap { margin: 60px 0 0; border-radius: 30px; border: 2px solid var(--color-red); background: #FFF; overflow: hidden; } 
.event1 .regist_form_area { background-color: var(--color-red); border-radius: 0; } 
.event1 .regist_form_area .check_area .info { color: #e1e1e1; opacity: 1; } 
.event1 .btn-base.xl>* { border-radius: 60px; } 
.step_base_wrap { border-radius: 30px; border: 2px solid var(--color-red); background: #FFF; } 
.step_base_wrap .step_list li .box_area .label,
.step_base_wrap .hashtag { color: var(--color-red); } 
.eventWrap .evSection.evtoggleWarning { padding: 0; } 
.warningList li ul li a { color:var(--color-red); } 



@media screen and (max-width: 1200px){
    .eventWrap .evSection { padding: 14% 0; } 
    .con_tit {font-size:clamp(23px,4.9vmin,44px);}
    .btn_wrap .btn { height: auto; padding: 2.5vmin 0; } 

    .eventWrap .evSection.evCon1 { padding: 8% 0; } 
    .eventWrap .evSection.stepCon1 { padding: 9% 0 12%; } 
    .stepCon1 .con_tit { margin: 0 0 8%; } 
    .stepCon1 .con_box { padding: 6% 5%; border-radius: 40px; } 
    .stepCon1 .chk_list_wrap { margin: 0 auto 8%; } 
    .stepCon1 .progressbar_wrap { margin: 0 0 8%; } 
    .stepCon1 .question { margin: 0 auto 6%; } 
    .stepCon1 .choice_wrap { gap: 4vmin; justify-content: space-between; margin: 0 0 8%; } 
    .stepCon1 .choice { width: calc(50% - 2vmin); height: auto; } 
    .stepCon1 .choice label { padding: 8% 0; } 
    .stepCon2 .con_tit { margin: 0 0 10%; } 
    .stepCon2 .btn_wrap { gap: 30px; } 
    .stepCon2 .cat .tit {display: block; margin: 0 0 10px; width: 30vmin;}

    .evCon1 .con_tit .tit3 { right: 13%; top: -4%; width: 17%; } 
    .evCon1 .tit4 { top: 9%; left: 6%; width: 12%; } 
}

@media screen and (max-width: 1024px){
    .evCon1 .con_tit .tit1 {width: 111vw;margin-left: -9.5vw;max-width: unset;}
    .evCon1 .con_tit .tit2 {bottom: -10%;}
    /* .evCon1 .con_tit .tit3 { right: 17%;top: -14%;} */
    .evCon1 .mini_tit {margin: 4% 0 5%;} 
    .stepCon1 .chk_list_wrap {border-radius: 10px;}
}

@media screen and (max-width: 768px){
    .btn_wrap { gap: 10px; } 
    .btn_wrap .btn {width: max-content;min-width: 36vmin;height: auto;padding: 3vmin;} 

    .evCon1 .con_tit .tit2 {bottom: -12%;width: 87%;}
    /* .evCon1 .con_tit .tit3 { right: 10%;width: 26%;} */
    .evCon1 .btn-base {margin: 0 auto 8%;}
    .evCon1 .btn-base > * {padding: 4vmin 8vmin; width: 92%;}
    .evCon1 .btn-base.pc {display:none;}
    .evCon1 .btn-base.mo {display:block;}

    .stepCon1 .con_box { border-radius: 10px; } 
    .stepCon1 .chk_list_wrap { padding: 3% 20px; } 
    .stepCon1 .chk_list { width: max-content; margin: 0 auto; } 
    .stepCon1 .chk_list li { display:block; } 
    .stepCon1 .chk_list li::before { display:inline-block; margin-right: 10px; width: 10px; height: 8px; } 
    .stepCon1 .chk_list li p { width: calc(100% - 20px); } 
    .stepCon1 .choice label { border-radius: 10px; } 
    .stepCon1 .choice label img {width: 65%;}
    .stepCon1 .toggle {height: 12vmin;}

    .stepCon2 .cat .fin {width: 17vmin;}

    [class*=mg_popup_wrap] .tit_area {font-size: 16px;}
    .stepClearPop_wrap .stepClearPop { width: 350px;height: auto;padding: 8% 0;}
    .stepClearPop h4 img {height: 30px;}

    .step_base_wrap { border-radius: 10px; } 
    .event1 .form_wrap { border-radius: 10px; } 

 
    .share_base_wrap .share_list li dl dd, .share_base_wrap .share_list.col4 li dl dd {width: calc(25% - 6px); font-size: 12px}
    .share_base_wrap .share_list li dl dd.small {font-size: 11px;}
    .share_base_wrap .share_list li dl dd a {padding: 9px 0;}
    .share_base_wrap {padding: 20px 10px; }

    .evCon1 .con_tit .tit3 { right: 6%; top: 4%; width: 20%; } 
    .evCon1 .tit4 { top: 9%; left: 3%; width: 15%; }
}

@media screen and (max-width: 576px){
    .btn_wrap .btn {min-width: calc(50% - 5px); padding: 4vmin 2vmin;} 

    .stepCon1 .chk_list_wrap {padding: 3% 10px;}
    .stepCon1 .con_box { padding: 6% 4%; } 
    .stepCon2 .btn_wrap { gap: 10px; } 
    .stepCon2 .btn_wrap .btn {padding: 3vmin 2vmin;}
    .stepCon1 .btn_wrap .btn a {font-size: 14px;}
}