@charset "euc-kr";

.con_tit .end::after { background: #000; } /* À̺¥Æ®Á¾·á ¾ÆÀÌÄÜ »ö»óº¯°æ */
.evSection .con_tit { margin: 0 0 60px; line-height: 1.3; } 
.evSection .mini_tit { margin: 0 auto 20px; } 
.evSection { padding: 150px 0; } 
.blindw { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; } 
.eventWrap { width: 100%; text-align: center; position: relative; font-size: 18px; line-height: 1.4; letter-spacing: -0.03em; overflow: hidden; } 
.txt_point { color: #ff421a; } 
.flt_inner.renewal li:first-child {margin-top: 40px;}


/*common*/
.line { position: absolute; top: 0; left: 0; display: block; font-size: 0; width: 0%; height: 85px; background: #969e97; border-top: 30px solid #eff503; border-bottom: 30px solid #eff503; } 
@keyframes line { 
    0% { width: 0; } 
    100% { width: 100%; } 
}

/* evCon1 */
.evCon1 { padding: 120px 0 90px; width: 100%; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; background-image: url("https://img.megagong.net/m/2025/1106_anniversary/evCon1_bg.png"); } 

.evCon1 .mini_tit,
.evCon1 .con_tit {margin: 0 auto 65px;}
.evCon1 .con_tit > strong {display: block;margin: 0 auto 43px;}
.evCon1 .time_table_wrap {border-radius: 100px; padding: 20px 0; background: #FFF;}
.evCon1 .time_table {display: flex; align-items: center; justify-content: center; gap: 20px;}
.evCon1 .time_table > li,
.evCon1 .time_table .tit {display: flex; align-items: center; gap: 14px;}
.evCon1 .time_table .tit::before {content:""; display: block; width:6px; height:6px; border-radius: 50%; background-color: #111111 ; }
.evCon1 .time_table .tit::after {content:""; display: block; width: 2px; height: 18px; background-color: #a0a0a0;}
.evCon1 .time_table .noti { display: block; color: #999999; }
.evCon1 .scroll {margin: 120px auto 30px;display: block;animation: scroll 1s infinite;} 

@keyframes scroll { 
    0%,
    100% { transform: translateY(0%); } 
    50% { transform: translateY(20%); } 
}

#fix_ban {display: none;}

/*evCon2*/
.evCon2 { background-position: center center; background-repeat: no-repeat; background-size: cover; background-image: url(https://img.megagong.net/m/2022/0630_sobang/bg_con1.png); } 
.evCon2 .point_wrap { flex-direction: column; gap: 20px; align-items: center; } 
.evCon2 .point_wrap .item { position: relative; border-radius: 10px; padding: 50px 0 45px; width: 900px; background-color: #fff; } 
.evCon2 .point_wrap .item + .item::before { content: ""; position: absolute; top: -40px; margin:0 auto; display: block; width: 100%; height: 81px; background-position: center center; background-repeat: no-repeat; background-size: 81px 64px; background-image: url(https://img.megagong.net/m/2025/1106_anniversary/arr.png); } 
.evCon2 .point_wrap .item,
.evCon2 .point_wrap .item::before {opacity: 0;}
.evCon2.active .point_wrap .item,
.evCon2.active .point_wrap .item::before{animation: fade_down 0.8s ease forwards;}
.evCon2.active .point_wrap .item:nth-child(1) { animation-delay: 0s; }
.evCon2.active .point_wrap .item:nth-child(2)::before { animation-delay: 0.4s; }
.evCon2.active .point_wrap .item:nth-child(2) { animation-delay: 0.8s; }
.evCon2.active .point_wrap .item:nth-child(3)::before {  animation-delay: 1.2s; }
.evCon2.active .point_wrap .item:nth-child(3) { animation-delay: 1.6s; }
.evCon2.active .point_wrap .item:nth-child(4)::before { animation-delay: 2s; }
.evCon2.active .point_wrap .item:nth-child(4) { animation-delay: 2.4s; }
@keyframes fade_down {
    0% { opacity: 0; transform: translateY(-12px); }
    100% { opacity: 1; transform: translateY(0); }
}

/*evCon3*/
.evCon3 .news_Sld { margin: 0 auto 60px; } 
.evCon3 .news_Sld .swiper-wrapper {gap: 14px; flex-wrap: wrap;}
.evCon3 .news_Sld .swiper-slide {width: calc(50% - 7px); }
.evCon3 .txt { line-height: 1.5; } 

/*event*/
.evSection.event { padding: 0; } 
.evSection.event .con_tit { margin: 0 auto 20px; } 
.evtoggleWarning { padding: 0 !important; } 

/*event1*/
.event1 .con_tit + .mini_tit { opacity: 0.6; } 
.event1.on .line { width: 100%; animation: line 1s; } 
.event1 .part1 { padding: 245px 0 150px; background: linear-gradient(0deg, #fff 13.94%, #ff421a 66.79%); } 
.event1 .part1 .gift_full_wrap { margin: 0 auto; } 
.event1 .part1 .evt_con_base { color: #fff; } 
.event1 .part1 .evt_con_base.gry { color: #666666; } 
.event1 .part1 .btn-base.xl { margin: -36px auto 30px; } 
.event1 .part1 .btn-base.xl > * { min-width: 367px; } 
.event1 .name_wrap { margin: 0 auto 20px; align-items: center; justify-content: center; gap: 16px; font-weight: bold; } 
.event1 .name_wrap li:nth-child(2) { height: 14px; width: 1px; background: #111; } 
.event1 .part1 .con_tit2 { margin: 100px auto 60px; } 
.event1 .part1 .gift_item,
.event1 .part1 .phone { position: relative; } 
.event1 .part1 .icon5 { position: absolute; top: 5%; left: 34%; animation: upDown1 1.4s infinite; } 
.event1 .part1 .icon6 { position: absolute; top: 26%; left: 16%; animation: upDown2 0.9s infinite; animation-delay: 0.2s; } 
.event1 .part1 .icon7 { position: absolute; top: 14%; right: 19%; animation: upDown2 0.9s infinite; animation-delay: 0.4s; } 

.event1 .part1 .gift_result_base { position: absolute; top: -2%; right: 20%; width: 80px; height: 80px; background: rgba(255, 66, 26, 0.80);} 
.event1 .part1 .gift_result_base.black {position: absolute;top: 31%;left: 3%;width: 100px;height: 100px;background: rgba(0, 0, 0, 0.80);color:#fff;} 
.event1 .part2 .inner { padding: 0 0 150px; } 
.event1 .part2 .heart_tit { display: block; margin: 0 auto 30px; } 
.event1 .part2 .mini_tit { margin: 0 auto 50px; } 
.event1 .countBox { margin: 80px auto 0; width: 650px; } 
.event1 .heartbox li { display: inline-block; vertical-align: top; margin: 0 5px; width: 109px; height: 92px; font-size: 0; background: url("https://img.megagong.net/m/2022/0630_sobang/icon_1.png")
 no-repeat; background-size: 100%; } 
.event1 .heartbox li.on { /*animation:heart_change .5s; */
 background: url("https://img.megagong.net/m/2022/0630_sobang/icon_33.png")
 no-repeat; background-size: 100%; } 
.event1 .count { margin-top: 30px; font-weight: 900; font-size: 0; } 
.event1 .count li { display: inline-block; vertical-align: top; margin: 0 6px; } 
.event1 .count li.box { border: 1px solid #232323; width: 114px; height: 130px; line-height: 130px; font-size: 100px; } 
.event1 .count li p { font-size: 90px; } 
.event1 .part2 { --step: 1.2s; --arrow-dur: 1.2s; --fade-dur: 0.8s; --pop-dur: 0.6s; } 
.event1 .part2 .goods {  margin:80px auto 100px; justify-content: center; align-items: stretch; gap: 100px; } 
.event1 .part2 .goods > li { height: auto; position: relative; } 
.event1 .part2 .goods .img_wrap { position: relative; } 
.event1 .part2 .arrow { position: relative; overflow: visible; } 
.event1 .part2 .arrow svg { position: relative; transform-origin: 50% 100%; transform: scaleY(0); will-change: transform; } 
.event1 .part2 .heart { position: absolute; top: 16%; left: 50%; transform: translateX(-50%); opacity: 0; transform: translateX(-50%) scale(0.86); filter: brightness(0.98) saturate(1.05); will-change: transform, opacity, filter;} 
.event1 .part2 .arrow > strong { position: absolute; left: 50%; top: 27%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center;  opacity: 0; transform: translateX(-50%) scale(0.8); will-change: transform, opacity;} 
.event1 .part2 .gift,
.event1 .part2 .cir { opacity: 0; transform: translateY(12px); will-change: opacity, transform; } 
.event1 .part2 .gift { position: absolute; left: 0; bottom: 62px; } 
.event1 .part2 .cir { margin: -26px auto; display: flex; align-items: center; justify-content: center; width: 150px; height: 40px; border-radius: 40px; background: #000; color: #fff; } 
.event1 .part2.active .goods > li { --bd: calc(var(--i) * var(--step)); } 
.event1 .part2.active .goods > li:nth-child(1) { --i: 0; } 
.event1 .part2.active .goods > li:nth-child(2) { --i: 1; } 
.event1 .part2.active .goods > li:nth-child(3) { --i: 2; } 
.event1 .part2.active .arrow svg { animation: rise var(--arrow-dur) cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: var(--bd); }
.event1 .part2.active .gift,
.event1 .part2.active .cir { animation: fade_up var(--fade-dur) ease forwards; animation-delay: calc(var(--bd) + var(--arrow-dur) * 0.9); } 
.event1 .part2.active .heart { animation: bounce 0.75s ease-out forwards; animation-delay: calc(var(--bd) + var(--arrow-dur) * 0.6); } 
.event1 .part2.active .arrow > strong { animation: fade_pop 0.45s ease-out forwards; animation-delay: calc(var(--bd) + var(--arrow-dur) * 0.6); } 

.event1 .regist_form_area { background-color: #ff001f; } 
.event1 .part2 .star {position: absolute; right: -74px; top: -24px; animation: upDown2 0.9s infinite;}


/*event2*/
.evSection.event2 { padding: 245px 0 160px; background: linear-gradient(180deg, #cfff9b 0%, rgba(207, 255, 155, 0) 100%); } 
.event2 .con_tit .end {right: -58px; top: -46px;}
.event2.on .line { width: 100%; animation: line 1s; } 
.event2 .regist_form_area { background-color: #2fca36; } 
.event2 .gift_item_wrap,
.event2 .step_base_wrap {margin-top: 60px;}
.event2 .step_base_wrap .hashtag {color:#777777;}
.event2 .step_base_wrap .point {color: #2FCA36;}
.share_base_wrap .share_list li dl dd {width: 198px;}
.event2 .img_wrap,
.event2 .img_wrap .gift { position: relative; } 
.event2 .img_wrap .icon1 { position: absolute; bottom: 56%; left: -22%; animation: upDown2 0.9s steps(2, end) infinite; } 
.event2 .img_wrap .icon2 { position: absolute; bottom: 26%; left: -18%; animation: upDown2 0.9s steps(2, end) infinite; animation-delay: 0.2s; } 
.event2 .img_wrap .icon3 { position: absolute; bottom: 18%; left: 7%; animation: upDown2 0.9s steps(2, end) infinite; animation-delay: 0.4s; } 
.event2 .img_wrap .icon4 { position: absolute; bottom: 19%; right: -15%; animation: upDown2 0.9s steps(2, end) infinite; animation-delay: 0.3s; } 
.event2 .img_wrap .icon5 { position: absolute; bottom: 49%; right: -21%; animation: upDown2 1s steps(4, end) infinite; animation-delay: 0.5s; } 
.event2 .gift_result_base { position: absolute; top: -2%; right: -6%; } 
@keyframes upDown1 { 
    0% { transform: translateY(0); } 
    25% { transform: translateY(-8px); } 
    50% { transform: translateY(-4px); } 
    75% { transform: translateY(-8px); } 
    100% { transform: translateY(0px); } 
}
@keyframes upDown2 { 
    0% { transform: translateY(0); } 
    50% { transform: translateY(-8px); } 
    100% { transform: translateY(0px); } 
}
@keyframes rise { 
    0% { transform: scaleY(0); } 
    100% { transform: scaleY(1); } 
}
@keyframes bounce { 
    0% { transform: translateX(-50%) scale(0.85); opacity: 0; filter: brightness(0.95) saturate(1.05); } 
    40% { transform: translateX(-50%) scale(1.08); opacity: 1; filter: none; } 
    70% { transform: translateX(-50%) scale(0.97); } 
    100% { transform: translateX(-50%) scale(1); opacity: 1; filter: none; } 
}
@keyframes fade_up { 
    0% { opacity: 0; transform: translateY(12px); } 
    100% { opacity: 1; transform: translateY(0); } 
}
@keyframes fade_pop { 
    0% { transform: translateX(-50%) scale(0.9); opacity: 0; } 
    100% { transform: translateX(-50%) scale(1); opacity: 1; } 
}



@media (max-width: 1200px){
    .evSection { padding: 12% 0; } 
    .evSection .con_tit { margin: 0 auto 7%; } 
    .evSection .mini_tit { margin: 0 0 5%; } 

    /*common*/
    .line { height: 55px; border-top-width: 20px; border-bottom-width: 20px; } 

    .evCon1 .mini_tit, .evCon1 .con_tit {margin: 0 auto 8%;}
    .evCon1 .con_tit > strong {font-size: clamp(16px, 4.1vmin, 46px);margin: 0 auto 4%;}
    .evCon1 .time_table_wrap {padding: 20px 0;}
    .evCon1 .time_table {font-size: clamp(12px, 2.5vmin, 20px);}
    .evCon1 .time_table .noti {font-size: clamp(11px, 2.5vmin, 20px);}
    .evCon1 .scroll {margin: 10% auto 0;max-width: 43px;width: 7%;} 
    .evCon1 .scroll img { width: 100%; } 

    /*evCon2*/
    .evCon2 .point_wrap .item {width: 90%; padding: 30px 0;}

    /*evCon3*/
    .evCon3 .news_Sld {margin: 0 auto 7%;}

    /*event*/
    .evSection.event .con_tit { margin: 0 auto 3%; } 

    /*event1*/
    .event1 .part1 { padding: 14% 0 12%; } 
    .event1 .part1 .con_tit2 { margin: 11% auto 7%; } 
    .event1 .part2 .inner { padding: 0 0 12%; } 
    .event1 .part2 .mini_tit { margin: 0 auto 6%; } 
    .event1 .countBox { margin: 5vw auto 0; max-width: 600px; width: 100%; } 
    .event1 .heartbox { width: 100%; } 
    .event1 .heartbox li { margin: 0 3px; width: 17%; height: 13vw; background-size: 100% !important; } 
    .event1 .heartbox li.on { background-size: 100% !important; } 
    .event1 .count { margin-top: 5vw; } 
    .event1 .count li { margin: 0 3px; } 
    .event1 .count li.box { width: 16%; height: 135px; line-height: 135px; font-size: 80px; } 
    .event1 .count li p { font-size: 70px; line-height: 135px; } 
    .event1 .part2 .goods {gap: 10px;}
    .event1 .part2 .goods > li {width: calc(33.333% - 5px);}
    .event1 .part2 .arrow svg {width: 100% !important; height: auto;}
    .event1 .part2 .arrow > strong {font-size: clamp(15px,2vmin,24px);}

    /*event2*/
    .evSection.event2 { padding: 14% 0 12%; } 
    .event2 .con_tit .end {right:0; top:-5%;}
    .share_base_wrap .share_list li dl dd {width: calc(21% - 8px);}

}

@media (max-width: 1024px){
    /*fix_ban*/
    #fix_ban { position:fixed; left:0; bottom:71px; z-index:2; display:block; width:100%;  border-top: 1px solid #111; background: #EFF503; } 
    #fix_ban .btn_wrap { margin: 0 auto; display: flex; align-items: stretch; justify-content: center; } 
    #fix_ban .btn_wrap li { flex: 1; position: relative; height: 100%; } 
    #fix_ban .btn_wrap li a { display: flex; align-items: center; justify-content: center; padding:10px 0; width: 100%; height: 100%; min-height:65px;  color:#111; font-size: 14px; font-weight: bold; gap:10px; font-size: 16px;} 

    /*evCon3*/
    .evCon3 .news_Sld .swiper-wrapper {gap: 0; flex-wrap: unset;}
    .evCon3 .news_Sld .swiper-slide {width: 100% !important;}
    .evCon3 .swiper-pagination {margin-top: 10px;}
    .evCon3 .swiper-pagination-bullet {background-color: #777; opacity: 1;}
    .evCon3 .swiper-pagination-bullet-active {background-color: #fff;}
}

@media (max-width: 950px){
    /*evCon1*/
    .evCon1 .time_table_wrap {border-radius: 10px;padding: 14px 20px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    .evCon1 .time_table {flex-direction: column; width: fit-content; gap: 8px;}
    .evCon1 .time_table > li, 
    .evCon1 .time_table .tit {gap: 4px;}
    .evCon1 .time_table > li {justify-content: flex-start;width: 100%;}

    /*event1*/
    .event1 .part1 .icon5 {width: 20%;}
    .event1 .part1 .icon6 {width: 4%;}
    .event1 .part1 .icon7 {width: 5%;}
}

@media (max-width: 768px) { 
    /*common*/
    .line { height: 35px; border-top-width: 10px; border-bottom-width: 10px; } 

    /*event*/
    .share_base_wrap .share_list li dl dd {width: calc(24.8% - 5.4px);}

    /*event1*/
    .event1 .part1 .gift_result_base {width: 60px; height: 60px;}
    .event1 .part1 .gift_result_base.black {width: 70px; height: 70px; top: 23%;}
    .event1 .gift_item_wrap {width: 100%;margin: 10% auto;}
    .event1 .countBox { min-width: 320px; width: 50%; } 
    .event1 .heartbox li { margin: 0 1px; height: 9vw; } 
    .event1 .count { margin-top: 3%; } 
    .event1 .count li { margin: 0 3px; } 
    .event1 .count li.box { width: 16%; height: 75px; line-height: 75px; font-size: 60px; } 
    .event1 .count li p { font-size: 50px; line-height: 75px; } 
    .event1 .part2 .goods {gap: 80px 0;flex-wrap: wrap;margin: 8% auto 17%;}
    .event1 .part2 .goods > li {width: 50%;}
    .event1 .part2 .arrow .heart {width: 15%;}
    .event1 .part2 .cir {margin: -36px auto;}
    
}

@media (max-width: 576px) { 
    /*evCon1*/
    .evCon1 .mini_tit {max-width: unset; width: 75%}

    #fix_ban {bottom: 56px;}

    /*evCon2*/
    .evCon2 .point_wrap .item {width: 97%; padding: 24px 0;}
    .evCon2 .point_wrap .item + .item::before  {height: 56px; background-size: 70px 56px;}

    /*evCon3*/
    .evCon3 .news_Sld .swiper-slide {padding: 0 10px;}
    .evCon3 .news_Sld .swiper-slide img {width: 100%;}

    /*event*/
    .gift_item_wrap .gift_item {width: 130%; left: -11%;}
    .share_base_wrap .share_list li dl dd {min-height: 56px;}

    /*event1*/
    .event1 .input-base-wrap.ver_input-btn {align-items: stretch;}
    .event1 .input-base-wrap.ver_input-btn .textarea-base {height: 80px !important;}
    .event1 .input-base-wrap.ver_input-btn .btn-base.ms > * {height: 100%; display: flex; align-items: center; justify-content: center;}
    .event1 .countBox { width: 100%; min-width: 100%; } 
    .event1 .heartbox li { margin: 0 1px; height: 9vw; width: 11%; } 
    .event1 .count li.box { width: 14%; height: 65px; line-height: 65px; font-size: 40px; } 
    .event1 .count li p { font-size: 40px; line-height: 65px; } 
    .event1 .name_wrap {font-size: 13px;gap: 4px;}
    .event1 .part1 .evt_con_base {font-size: 12px;}
    
    /*event2*/
    .event2 .img_wrap .icon1 {width: 15%;left: -2%;bottom: 52%;}
    .event2 .img_wrap .icon2 {width: 14%;left: -5%;}
    .event2 .img_wrap .icon3 {width: 14%;left: 12%;}
    .event2 .img_wrap .icon4 {width: 26%;right: 0;bottom: 27%;}
    .event2 .img_wrap .icon5 {width: 9%;right: -20px;}
    
}