@charset "euc-kr";

:root { 
    --point-color1: #654dff; 
} 
 
/*°øÅë*/
.con_tit .end::after { background: #111; } /* ÀÌº¥Æ®Á¾·á ¾ÆÀÌÄÜ »ö»óº¯°æ */
.evSection { line-height: 1.3; padding: 150px 0; } 
.evSection .con_tit { margin: 0 0 60px; line-height: 1.3; } 
.evSection .mini_tit { font-weight: 400; } 
.evSection .point { color: var(--point-color1); } 
.clp-fs70 { font-size: 70px; } 
.btn-base.xl > * { min-width: 367px; } 
.input-base-wrap.ver_input-btn .input-base {border-color: #7c7c7c;}
.input-base-wrap.ver_input-btn .input-base::placeholder {color:#7c7c7c;}
.share_base_wrap .share_list li dl dd {width: 198px;}
.eventVideo .video_box {z-index:1;}
.con_tit .end {z-index:1;}


/*evCon1*/
.eventWrap .evSection.evCon1 { position: relative; padding: 62px 0 70px; background-position: center center; background-repeat: no-repeat; background-size: cover; background-image: url("https://image.megagong.net/m/2025/0930_njobopen/evCon1_bg.png"); overflow-x: hidden; overflow-y: visible; } 
.evCon1 .mini_tit.top { letter-spacing: 2px; line-height: 1.5; color: #333; font-weight: 600; } 
.evCon1 .con_tit { margin: 30px auto 35px; opacity: 0; transform: scale(0.86); transform-origin: center; will-change: transform, opacity; } 
.evCon1.show_in .con_tit { animation: logoPopDouble 1.6s both; } 
.evCon1 .nextjob_logo .s1,
.evCon1 .nextjob_logo .s2 { animation-duration: 2.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } 
.evCon1 .nextjob_logo .s1 { animation-name: gradPing1; } 
.evCon1 .nextjob_logo .s2 { animation-name: gradPing2; animation-delay: -1.25s; } 
.evCon1 .date_wrap { margin: 0 auto 24px; padding: 10px 20px; border-radius: 50px; width: max-content; background: rgba(243, 243, 243, 0.8); display: flex; align-items: center; gap: 10px; } 
.evCon1 .date_wrap .d_day { border-radius: 33px; width: 120px; height: 33px; display: flex; align-items: center; justify-content: center; background-color: #111; color: #fff; } 
.evCon1 .mini_tit.bot { color: #333; font-weight: 400; } 
.evCon1 .mini_tit.bot .point { font-weight: bold; color: #c475ff; } 
.evCon1 .gifts { margin-top: -40px; transform: rotate(0deg); transform-origin: center bottom; } 
.evCon1.show_in .gifts { animation: tiltBounce 2s ease-out both; } 
.evCon1 .btn-base-wrap { margin-top: -20px; transition: transform 0.3s; } 
.evCon1 .btn-base.black:hover > * { background-color: var(--point-color1); border: 1px solid var(--point-color1); } 
.evCon1 .nextjob_logo { margin: 0 auto; } 



@keyframes logoPopDouble { 
    0% { 
        transform: scale(0.86); 
        opacity: 0; 
        filter: brightness(0.98) saturate(1.05); 
    } 
    25% { 
        transform: scale(1.03); 
        opacity: 1; 
        filter: none; 
        animation-timing-function: cubic-bezier(0.25, 1.3, 0.5, 1); 
    } 
    45% { 
        transform: scale(1); 
        animation-timing-function: cubic-bezier(0.2, 0.8, 0.25, 1); 
    } 
    65% { 
        transform: scale(1.08); filter: brightness(1.06) saturate(1.07); animation-timing-function: cubic-bezier(0.25, 1.5, 0.5, 1); 
    } 
    80% { 
        transform: scale(0.985);
        filter: none; 
        animation-timing-function: cubic-bezier(0.2, 0.8, 0.25, 1); 
    } 
    100% { 
        transform: scale(1); 
        opacity: 1; 
        filter: none; 
    } 
}
@keyframes gradPing1 { 
    from { stop-color: #c475ff; } 
    to { stop-color: #22d3ee; } 
}
@keyframes gradPing2 { 
    from { stop-color: #248fd6; } 
    to { stop-color: #654dff; } 
}
@keyframes tiltBounce { 
    0% { 
        transform: rotate(-2deg); 
    } 
    25% { 
        transform: rotate(1deg); 
    } 
    50% { 
        transform: rotate(-2deg); 
    } 
    75% { 
        transform: rotate(1deg); 
    } 
    100% { 
        transform: rotate(0deg); 
    } 
}
@keyframes tiltBounce { 
    0% { 
        transform: rotate(-2deg); 
    } 
    25% { 
        transform: rotate(1deg); 
    } 
    50% { 
        transform: rotate(-2deg); 
    } 
    75% { 
        transform: rotate(1deg);
    } 
    100% { 
        transform: rotate(0deg); 
    } 
}


/*fix_ban*/
#fix_ban { display: none; } 

/*evCon2*/
.evCon2 .vs_wrap { position: relative; display: flex; align-items: stretch; gap: 72px; justify-content: center; } 
.evCon2 .vs_wrap .vs { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; } 
.evCon2 .vs_wrap .item { position: relative; border-radius: 18px; width: 405px; height: auto; background-color: #fff; } 
.evCon2 .vs_wrap .item .inner { padding: 27px 0 60px; width: 100%; } 
.evCon2 .vs_wrap .item .tit { color: #666666; } 
.evCon2 .vs_wrap .item .img_off { display: block; } 
.evCon2 .vs_wrap .item .img_on { display: none; } 
.evCon2 .vs_wrap .item.toggle.on { background: linear-gradient(180deg, #fff 0%, #e2deff 100%); } 
.evCon2 .vs_wrap .item.toggle.on .tit { color: #111; } 
.evCon2 .vs_wrap .item.toggle.on::after { content: ""; position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; border-radius: 18px; border: 3.6px solid #654dff; } 
.evCon2 .vs_wrap .item.toggle.on .img_off { display: none; } 
.evCon2 .vs_wrap .item.toggle.on .img_on { display: block; } 
.evCon2 .s_tit { margin: 60px auto 20px; color: #111; font-weight: 400; } 
.evCon2 .sub_tit { color: #000927; display: flex; flex-direction: column; justify-content: center; align-items: center; } 
.evCon2 .sub_tit .underline { text-decoration: underline; } 

/*evCon3*/
.evCon3 .pr_review_swiper_wrap .pr_review_swiper { margin: 0 auto 60px; } 
.evCon3 .pr_review_swiper_wrap .swiper-slide { padding: 0 80px; } 
.evCon3 .pr_review_swiper_wrap .swiper-slide.padright { padding: 0 40px 0 80px; } 
.evCon3 .pr_review_swiper_wrap .swiper-slide .review_text .tit { margin: 0 0 30px; } 
.evCon3 .pr_review_swiper_wrap .swiper-slide .review_text .det { display: flex; flex-direction: column; gap: 10px; color: #333; } 
.evCon3 .pr_review_swiper_wrap .swiper-slide .review_row { flex-direction: row; gap: 0; } 
.evCon3 .pr_review_swiper_wrap .float_txt { position: absolute; top: 20px; right: 20px; color: #666; } 
.evCon3 .pr_content_wrap .pr_content_swiper .swiper-wrapper {gap: 20px;}
.evCon3 .pr_content_wrap .pr_content_swiper .swiper-slide { background-color: #5240c7; gap: 20px; width: calc(33% - 10px);} 
.evCon3 .pr_content_wrap .pr_content_swiper .con { margin-top: 0; color: #fff; } 
.evCon3 .pr_review_swiper .swiper-slide .review_author .txt { color: #fff; opacity: 0.8; } 
.evCon3 .evt_con_base.sm { margin: 10px auto 0; font-size: 13px; color: #fff; text-align: right; } 

/*event1*/
.event1 { background-color: #fff; } 
.event1 .keyword_wrap { margin: 60px auto; padding: 30px 70px; border: 2px solid #654dff; width: max-content; background: #fff; box-shadow: 0 0 37px 0 rgba(151, 139, 255, 0.3); display: flex; align-items: center; justify-content: center; } 
.event1 .input-base-wrap.ver_input-btn { border-radius: 100px; border: 3px solid #111; height: 96px; } 
.event1 .input-base-wrap.ver_input-btn .for_mobile {display: flex; align-items: center; justify-content: center; gap: 30px;}
.event1 .input-base-wrap.ver_input-btn .input-base { width: 210px; height: 60px; padding: 15px 5px; font-size: 24px; text-align: center; } 
.event1 .name_wrap { display: flex; align-items: center; gap: 30px; } 
.event1 .keyword_wrap .name_wrap { gap: 0; } 
.event1 .input-base-wrap.ver_input-btn .input-base::placeholder { font-size: 24px; text-align: center; } 

.event1 .evt_con_base_wrap.first { margin: 30px auto 60px; } 
.event1 .show_down { margin: 0 auto 60px; display: flex; flex-direction: column; gap: 15px; align-items: center; justify-content: center; font-weight: 700; } 
.double_benefit .con_tit { margin: 0 auto 20px; } 
.double_benefit .con_tit + .mini_tit { margin: 0 auto 60px; color: #333; opacity: 0.6; font-weight: 500; } 
.event1 .evt_con_base_wrap.second { margin: 30px auto 0; } 
.event1 .evt_con_base_wrap .evt_con_base > a { color: #0082ff; font-weight: bold; } 
.event1 .name_swiper { position: relative; width: 260px; height: 40px; margin: 0 auto; border-bottom: 1px solid #000; overflow: hidden; } 
.event1 .name_swiper .swiper-slide { display: flex; flex-direction: column; align-items: center; justify-content: center; } 
.event1 .show_down {margin: 0 auto 60px; display: flex; flex-direction: column; gap:15px; align-items: center; justify-content: center; font-weight: 700; animation:updown 1s infinite ease-in-out;}

@keyframes updown {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(14px);
    }
    100% {
        transform: translateY(0px);
    }
}


/*event2*/
.event2 { background: linear-gradient(180deg, #654dff 0%, #fafaff 100%); } 
.event2 .container_info .info .noti { color: #fff; } 
.event2 .gift_list_wrap li .badge { background-color: var(--point-color1); } 
.event2 .step_base_wrap .hashtag { color: var(--point-color1); } 
.event2 .regist_form_area { border-radius: 0 0 3px 3px; background-color: var(--point-color1); } 

.evtoggleWarning { padding: 0 !important; } 

@media screen and (max-width: 1200px){
    .evSection { padding: 12% 0; } 
    .evSection .con_tit { margin: 0 auto 7%; } 
    .evSection .mini_tit { margin: 0 0 4%; display: block; } 
    .clp-fs70 { font-size: clamp(32px, 7.5vmin, 70px); } 
    .share_base_wrap .share_list li dl dd {width: calc(20% - 8px);}

    /*evCon1*/
    .eventWrap .evSection.evCon1 { padding: 12% 0; } 
    .evCon1 .con_tit { margin: 0 auto 7%; } 
    .evCon1 .mini_tit.top { margin: 0 auto 2%; font-size: clamp(13px, 2.5vmin, 20px); } 
    .evCon1 .btn-base.xl > * { width: max-content; padding: 20px 20%; } 

    /*fix_ban*/
    #fix_ban { position: fixed; display: block; width: 100%; bottom: 71px; z-index: 2; } 
    #fix_ban .btn_wrap { display: flex; align-items: stretch; justify-content: center; } 
    #fix_ban .btn_wrap li { flex: 1; } 
    #fix_ban .btn_wrap li + li a { border-left: 1px solid #e4e4eb; } 
    #fix_ban .btn_wrap a { display: block; padding: 20px 0; width: 100%; height: 100%; font-weight: bold; background-color: #F1EFFF; color: #111; } 
    #fix_ban .btn_wrap li.on a { background-color: #000; color: #fff; } 

    /*evCon2*/
    .evCon2 .vs_wrap .vs { height: 34%; } 

    /*evCon3*/
    .evCon3 .pr_review_swiper_wrap .pr_review_swiper { margin: 0 auto 5%; } 

    /*event1*/
    .event1 .keyword_wrap { margin: 5% auto; } 
    .double_benefit .con_tit { margin: 0 auto 2%; } 
    .double_benefit .con_tit + .mini_tit { margin: 0 auto 6%; } 
    .event1 .keyword_wrap { padding: 10px 20px; } 
    .event1 .input-base-wrap.ver_input-btn .input-base,
    .event1 .input-base-wrap.ver_input-btn .input-base::placeholder { font-size: clamp(15px, 2.9vmin, 24px); } 
    .event1 .input-base-wrap.ver_input-btn .for_mobile { gap: 10px; } 
}
 
 @media screen and (max-width: 1024px) { 
    /*evCon2*/
    .evCon2 .vs_wrap { gap: 20px; } 
    .evCon2 .vs_wrap .item { flex: 1 1 0; width: auto; } 
    .evCon2 .vs_wrap .item.toggle .inner { padding: 24px 0 10px;}
    .evCon2 .vs_wrap .item:not(.toggle) .inner { padding: 24px 30px 10px; } 
    .evCon3 .pr_review_swiper_wrap .swiper-slide .review_text .tit { margin: 0 0 20px; } 
    
    /*event1*/
    .event1 .input-base-wrap.ver_input-btn { margin: 0 auto; border-radius: 10px; padding: 20px; width: max-content; height: auto;  min-width: 504px; } 
    .event1 .input-base-wrap.ver_input-btn .for_mobile {gap: 10px; display:flex; flex-direction: column; width: max-content;}
    .event1 .input-base-wrap.ver_input-btn .input-base { width: 150px; height: 36px; } 
    .event1 .keyword_wrap { flex-direction: column; } 
}
 
@media screen and (max-width: 768px) { 
    .share_base_wrap .share_list li dl dd {width:calc(25% - 8px)}

    /*evCon1*/
    .evCon1 .mini_tit.top { line-height: 1.3; margin: 0 auto 5%; letter-spacing: 1px; } 
    .evCon1 .date_wrap .d_day { width: max-content; padding: 3px 20px; height: auto; } 
    .evCon1 .gifts { margin-top: -20px; width: clamp(250px, 50vmin, 470px); } 
    .evCon1 .btn-base-wrap { margin-top: 0; } 
    
    /*evCon3*/
    .evCon3 .pr_review_swiper_wrap .review_author { display: none !important; } 
    .evCon3 .pr_review_swiper_wrap .float_txt {position: static; margin: 0 auto 10px; display: block;}
    .evCon3 .pr_review_swiper_wrap .swiper-slide { padding: 20px 0; text-align: center; display: flex; flex-direction: column; justify-content: center; } 
    .evCon3 .pr_review_swiper_wrap .swiper-slide.padright { padding: 20px 0; } 
    .evCon3 .swiper-pagination-bullet { background-color: #fff; } 
    .evCon3 .evt_con_base.sm { margin: 20px auto 0; text-align: center; } 
    .evCon3 .pr_content_wrap .pr_content_swiper .swiper-wrapper {gap: 0;}
    .evCon3 .pr_content_wrap .pr_content_swiper .swiper-slide {width: auto; display: flex; flex-direction: column; align-items: center; text-align: center;}
    
    /*event1*/
    .event1 .btn-base-wrap > * { flex: auto; } 
}
 
@media screen and (max-width: 576px){
    .share_base_wrap .share_list li dl dd {height: 54px;}

    /*evCon1*/
    .evCon1 .date_wrap { margin: 0 auto 15px; flex-direction: column-reverse; border-radius: 10px; gap: 5px; } 
    .evCon1 .nextjob_logo { width: 95%; } 
    .evCon1 .btn-base.xl > * { width: 100%; } 

    /*fix_ban*/
    #fix_ban {bottom: 55px;}

    /*evCon2*/
    .evCon2 .vs_wrap .item:not(.toggle) .inner { padding: 24px 10px 10px; } 
    
    /*evCon3*/
    .evCon3 .pr_review_swiper_wrap .swiper-slide .review_text .tit { font-size: 18px; } 
    
    /*event1*/
    .event1 .name_wrap { gap: 10px; } 
    .event1 .name_swiper { width: 176px; } 
    .event1 .input-base-wrap.ver_input-btn { min-width: 100%; } 

    /*event2*/
    .event2 .check-base { right: unset; left: 20px; bottom: 14px; } 
}
 