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

:root {
    --color-point1: #001eff;
    --color-point2: #f5fb51;
}

/* settings */
.evSection {padding: 140px 0;}
.evSection .con_tit {margin: 0 auto 70px;}
.evSection .con_tit h4 {font-weight: 900; font-size: 42px; letter-spacing: -0.05em;}
.evSection .con_tit h4 span {color: var(--color-point1);}
.evSection .con_tit .sub_tit {font-weight: 500; font-size: 24px; color: rgba(0, 0, 0, 0.6);}
.evSection .con_tit .sub_tit + h4 {margin-top: 15px;}
.evSection.event .con_tit h4 {font-size: 44px; color: #fff;}
.evSection.event .con_tit h4 span {color: var(--color-point2);}
.evSection.event .con_tit .sub_tit {font-size: 26px; color: rgba(255, 255, 255, 0.6);}
.evSection.event .con_tit .label {display: inline-block; max-width: 34%; margin: 0 auto 40px;}

.con_tit .end {top: 8%; right: -15%;}
.con_tit .end::after {background: var(--color-point2);} /* À̺¥Æ®Á¾·á ¾ÆÀÌÄÜ »ö»óº¯°æ */

.event .container_info {font-size: 20px; margin: 0 40px; padding: 42px 0;}
.event .container_info::before {content: ''; position: absolute; width: 1000%; height: 100%; top: 0; left: -500%; background: #fff; opacity: 0.12;}

.event .container_info .info .info_title {width: 140px; color: #000; background: #fff;}
.event .container_info .info .info_date {color: #fff;}
.event .container_info .info .noti {font-size: 15px; margin-left: 0; padding-left: 0; color: var(--color-point2); opacity: 0.8;}
.event .container_info .info .noti::before {content: none;}

.sec_tit {position: relative; z-index: 0; margin: 0 auto 40px;}
.sec_tit::before {content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #000; opacity: 0.4; z-index: -1;}
.sec_tit span {display: inline-block; width: 200px; max-width: 34%; font-weight: 500; font-size: 22px; color: #fff; background: #121212; border-radius: 25px; padding: 10px 0;}

/* evCon1 */
.evCon1 {padding: 90px 0 98px; background: #42d2ff url(https://image.megagong.net/m/2024/0705_shin242/con1_bg.jpg) no-repeat;}
.evCon1 .sub_tit {font-weight: 500; font-size: 22px; letter-spacing: 0.1em; margin: 0 auto 25px;}
.evCon1 h3 {margin: 0 -156px 0 -150px;}
.evCon1 .badge {position: absolute; left: -114px; bottom: 246px;}
.evCon1 .badge.next {bottom: 445px;}
.evCon1 .home {display: inline-block; max-width: 40%; margin-top: 40px;}

.evCon1 .badge_wrap {position: absolute;left: -120px;bottom: 175px;display: flex;flex-direction: column;gap: 10px;}
.evCon1 .badge_wrap .badge.before{position: relative; left: auto !important; bottom: auto !important;}
.evCon1 .badge_wrap .badge.next{position: relative; left: auto !important; bottom: auto !important;}
.evCon1 .badge_wrap .badge.event{position: relative; left: auto !important; bottom: auto !important;}

/* evCon2 */
.evCon2 {background: #a0e8ff;}
.evCon2 .sec_tit {margin-bottom: 60px;}

/* evCon3 */
.evCon3 {background: #fdfdfd;}
.evCon3 h4 sup {font-size: 14px; vertical-align: text-top; line-height: 2.5; color: #aeaeae;}
.evCon3 .con_box .tiny_noti:first-child {text-align: right; color: #aeaeae;}
.evCon3 .goal {margin-bottom: 140px;}
.evCon3 .goal .gray {position: relative; font-size: 22px; color: #222; background: #ededed; border-radius: 32px; padding: 16px 0; margin: 0 auto 75px;}
.evCon3 .goal .gray::before {content: ''; position: absolute; left: 50%; bottom: 20px; width: 111px; height: 104px; background: url(https://image.megagong.net/m/2024/0705_shin242/con3_arrow0.png) no-repeat; transform: translate(-50%, 100%); z-index: 1;}
.evCon3 .goal ul li {position: relative; flex: 1; font-weight: 700; font-size: 20px; color: #fff; line-height: 68px;}
.evCon3 .goal ul li:nth-child(1) {background: #98b7fe;}
.evCon3 .goal ul li:nth-child(2) {background: #6594fe;}
.evCon3 .goal ul li:nth-child(3) {background: #004eff;}
.evCon3 .goal ul li::after {content: ''; position: absolute; top: 0; right: 0; width: 44px; height: 68px; background-repeat: no-repeat; background-size: contain;}
.evCon3 .goal ul li:nth-child(1)::after {background-image: url(https://image.megagong.net/m/2024/0705_shin242/con3_arrow1.png);}
.evCon3 .goal ul li:nth-child(2)::after {background-image: url(https://image.megagong.net/m/2024/0705_shin242/con3_arrow2.png);}
.evCon3 .goal ul li:nth-child(3)::after {background-image: url(https://image.megagong.net/m/2024/0705_shin242/con3_arrow3.png); width: 30px;}
.evCon3 .ani {position: relative; width: fit-content; margin: 0 auto;}
.evCon3 .ani > div:nth-child(n+2) {position: absolute; top: 0; left: 0;}
.evCon3 .ani > div:nth-child(4) {top: -7.5vmin;}

/* evCon4 */
.evCon4 {background: #ecfaff;}
.evCon4 .eventVideo {margin-bottom: 120px;}
.evCon4 .eventVideo .badge {position: absolute; top: -25px; right: 30px; width: 113px; height: 113px; background: #f5fb51; display: flex; justify-content: center; align-items: center; border-radius: 50%; font-style: normal; font-weight: 700; font-size: 18px; line-height: 1.2; z-index: 2;}
.evCon4 .eventVideo .video_box {z-index: 1;}
.evCon4 .effect {padding: 50px 0; background: rgba(171, 230, 251, 0.3); margin-bottom: 50px;}

/* evCon5 */
.evCon5 {background: #fdfdfd;}
.evCon5 .tab_base {position: relative; display: flex; justify-content: center; align-items: center; gap: 2px;}
.evCon5 .tab_base::before {content: ''; position: absolute; width: 1000%; height: 3px; left: -500%; bottom: 0; background: #000; z-index: 1;}
.evCon5 .tab_base li {flex: 1;}
.evCon5 .tab_base li a {position: relative; display: block; font-weight: 900; font-size: 24px; padding: 25px 0; color: #c5c5c5; background: #e9e9e9; border: 3px solid transparent; border-bottom: none}
.evCon5 .tab_base li.on a {color: #000; background: #fff; border-color: #000;}
.evCon5 .tab_base li.on a::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: #fff; z-index: 1;}
.evCon5 .panel_base {padding-top: 100px;}
.evCon5 .book_wrap {display: flex; justify-content: center; align-items: flex-start; gap: 70px; margin-bottom: 60px;}
.evCon5 .book_wrap .book_cover {position: relative; width: fit-content;}
.evCon5 .book_wrap .book_cover .badge {position: absolute; top: -20px; left: -80px;}
.evCon5 .book_wrap .book_cover .tiny_noti {color: #a6a6a6;}
.evCon5 .book_wrap .book_slide {width: 50%; max-width: 362px;}
.evCon5 .book_wrap .book_slide .slick-dots {display: flex; justify-content: center; align-items: center; gap: 6px;}
.evCon5 .book_wrap .book_slide .slick-dots li button {font-size: 0; width: 9px; height: 9px; border-radius: 50%; background: #000; opacity: 0.4;}
.evCon5 .book_wrap .book_slide .slick-dots li.slick-active button {opacity: 1;}
.evCon5 .feature {gap: 15px; margin-bottom: 50px;}
.evCon5 .feature li {flex: 1; height: 145px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 18px; background: #fff; border-radius: 16px; box-shadow: 10px 10px 24px rgba(0, 0, 0, 0.11);}
.evCon5 .link_btn {display: block; width: 70%; max-width: 430px; font-weight: 700; font-size: 20px; color: #fff; background: #000; padding: 24px 0; border-radius: 38px; margin: 0 auto;}

/* evCon6 */
.evCon6 {background: #0072ff;}
.evCon6 .con_tit {margin: 0 auto 60px;}
.evCon6 .container_info {margin-bottom: 80px;}
.evCon6 .container_info .info .info_title {color: #0072ff;}

/* evCon7 */
.evCon7 {padding: 140px 0 0; background: #112d7f;}
.evCon7 .con_tit {margin: 0 auto 100px;}
.evCon7 .container_gift_wrap {margin: 0 20px 80px;}
.evCon7 .container_info {margin-bottom: 100px;}
.evCon7 .container_info .info .info_title {color: #112d7f;}
.evCon7 .container_info .info:last-child .noti {font-size: 12px; color: #fff; opacity: 1;}
.evCon7 .step_wrap {justify-content: center; align-items: center; gap: 8px; margin: 0 auto 50px;}


@media screen and (max-width: 1400px){
    .evCon1 h3 {margin: 0 -2%;}
    .evCon1 .badge {left: 0;}

    .evCon1 .badge_wrap {left: 0;bottom: 190px;}

}
@media screen and (max-width: 1200px){
    /* settings */
    .evSection {padding: 14% 0;}
    .evSection .con_tit {margin: 0 auto 7%;}
    .evSection .con_tit h4 {font-size: clamp(20px, 4.4vmin, 42px);}
    .evSection .con_tit .sub_tit {font-size: clamp(15px, 2.6vmin, 24px);}
    .evSection .con_tit .sub_tit + h4 {margin-top: 2%;}
    .evSection.event .con_tit h4 {font-size: clamp(20px, 4.6vmin, 44px);}
    .evSection.event .con_tit .sub_tit {font-size: clamp(15px, 2.8vmin, 26px);}
    .evSection.event .con_tit .label {margin: 0 auto 4%;}

    .con_tit .end {top: 8%; right: 0;}

    .event .container_info {font-size: clamp(14px, 2.2vmin, 20px); margin: 0; padding: 4vw 0;}
    .event .container_info .info .info_title {width: clamp(90px, 16vmin, 140px);}
    .event .container_info .info .noti {font-size: clamp(11px, 1.4vmin, 15px);}

    .sec_tit {margin-bottom: 4%;}
    .sec_tit span {font-size: clamp(14px, 2.4vmin, 22px); padding: 0.5vw 0;}

    /* evCon1 */
    .evCon1 {padding: 8% 0 9%; background-size: auto 80%;}
    .evCon1 .sub_tit {font-size: clamp(14px, 2.4vmin, 22px);margin: 0 auto 9%;}
    .evCon1 h3 {margin: 0 auto;}
    .evCon1 .badge {bottom: 24vmin;}
    .evCon1 .badge img{width: 17vw;}
    .evCon1 .badge.next {bottom: 43vmin;}
    .evCon1 .home {margin-top: 4%;}

    /* evCon2 */
    .evCon2 .sec_tit {margin-bottom: 6%;}

    /* evCon3 */
    .evCon3 h4 sup {font-size: clamp(10px, 2vmin, 14px);}
    .evCon3 .goal {margin-bottom: 12%;}
    .evCon3 .goal .gray {font-size: clamp(14px, 2.4vmin, 22px); padding: 1.5vw 0; margin: 0 auto 10%;}
    .evCon3 .goal .gray::before {bottom: 2%; width: 10vmin; height: 11vmin; background-size: contain;}
    .evCon3 .goal ul li {font-size: clamp(13px, 2.2vmin, 20px); line-height: 7vmin; padding-right: 4vmin;}
    .evCon3 .goal ul li::after {height: 7vmin; background-size: contain; background-position: 100% 0;}
    .evCon3 .goal ul li:nth-child(1) {flex-basis: 45%;}
    .evCon3 .goal ul li:nth-child(2) {flex-basis: 35%;}
    .evCon3 .goal ul li:nth-child(3) {flex-basis: 30%;}

    /* evCon4 */
    .evCon4 .eventVideo {margin-bottom: 12%;}
    .evCon4 .eventVideo .badge {top: -5%; right: 2%; width: 15vmin; height: 15vmin; font-size: clamp(12px, 2vmin, 18px);}
    .evCon4 .effect {padding: 4vw 1vw; margin-bottom: 5%;}

    /* evCon5 */
    .evCon5 .tab_base li a {font-size: clamp(16px, 2.6vmin, 24px); padding: 2.5vmin 0 3.5vmin;}
    .evCon5 .panel_base {padding-top: 10%;}
    .evCon5 .book_wrap {gap: 3vw; margin-bottom: 6%;}
    .evCon5 .book_wrap .book_cover .badge {top: -2%; left: -4%; max-width: 40%;}
    .evCon5 .feature {gap: 1vw; margin-bottom: 5%;}
    .evCon5 .feature li {font-size: clamp(13px, 2vmin, 18px);}
    .evCon5 .link_btn {font-size: clamp(14px, 2.2vmin, 20px); padding: 3vmin 0;}

    /* evCon6 */
    .evCon6 .container_info {margin-bottom: 8%;}

    /* evCon7 */
    .evCon7 {padding: 14% 0 0;}
    .evCon7 .container_gift_wrap {margin: 0 auto 8%;}
    .evCon7 .container_info {margin-bottom: 8%;}
    .evCon7 .step_wrap {margin: 0 auto 5%;}
}
@media screen and (max-width: 992px){
    .evCon5 .feature {flex-direction: column;}
    .evCon5 .feature li {padding: 2vw 0; height: clamp(75px, 18vmin, 110px); flex-basis: auto;}


    .evCon1 .badge_wrap .badge{overflow: hidden;background: #f4fb3e;border-radius: 10px;}
    .evCon1 .badge img{margin: -13% -10%;}
}
@media screen and (max-width: 768px){
    .evCon3 .con_box .tiny_noti:first-child {font-size: 10px; margin-bottom: 2%;}
    
    .evCon5 .book_wrap {flex-direction: column; align-items: center;}
    .evCon5 .book_wrap .book_cover {width: 50%;}

    .evCon7 .step_wrap {flex-wrap: wrap;}
    .evCon7 .step_wrap li {width: fit-content; max-width: calc(50% - 4px);}
}
@media screen and (max-width: 576px){
    .evCon1 .badge {left: unset;right: 0;bottom: 28vw !important;}
    .evCon1 .badge.next {left: 0;right: unset;}
    .evCon1 .badge img{width: 27vw;}

    .evCon1 .badge_wrap{bottom: 19vmin;gap: 5px;bottom: 23vmin;}
    .evCon1 .badge_wrap img{width: 20vw;}

    .event .container_info .info {flex-direction: column; justify-content: center; align-items: center;}
}