/* 공통 */
* { box-sizing: border-box } 
.event-wrap { overflow: hidden; width: 100%; } 
.inner_w { width: 2560px; position: relative; text-align: center; left: 50%; transform: translateX(-50%); margin: 0; } 
.inner { width: 1000px; margin: 0 auto; } 
.p_r { position: relative; } 
.p_c { position: absolute; left:50%; transform: translateX(-50%); } 

/* evt_main */
.evt_main .evt_gif {position: absolute; left: 50%; top: 17%; transform: translateX(-50%);}
.evt_main .evt_btn {display: block; width: 620px; height: 125px; position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);}

/* cont01 */
.cont01 {opacity: 0;}
.cont01.active {animation: opacity 1.2s ease forwards;}

@keyframes opacity {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

/* cont02 */
.cont02 .ani_wrap01 {width: 500px; position: absolute; left: 50%; top: 75px; transform: translateX(-50%); margin-left: 255px;}
.cont02 .ani_wrap01 img {margin-bottom: 12px; transform: translateY(25px); opacity: 0;}
.cont02 .ani_wrap01 img:nth-last-of-type(1) {margin-bottom: 0;}
.cont02 .ani_wrap01.active img:nth-of-type(1) { animation: scroll_ani 0.6s ease forwards;} 
.cont02 .ani_wrap01.active img:nth-of-type(2) { animation: scroll_ani 0.6s ease forwards 0.4s; } 
.cont02 .ani_wrap01.active img:nth-of-type(3) { animation: scroll_ani 0.6s ease forwards 0.8s; } 
.cont02 .ani_wrap02 {position: absolute; left: 50%; top: 910px; transform: translateX(-50%); margin-left: 10px; opacity: 0;}
.cont02 .ani_wrap02.active {animation: opacity 1.2s ease forwards;}
.cont02 .scroll_area {position: absolute; left: 0; top: 1560px;}

@keyframes scroll_ani {
    0% {opacity: 0; transform: translateY(25px);}
    100% {opacity: 1; transform: translateY(0);}
}

/* cont03 */
.cont03 .evt_btn {display: block; width: 115px; height: 40px; position: absolute; left: 50%; top: 395px; transform: translateX(-50%); margin-left: -419px;}

/* cont04 */
.cont04 .tab_area {width: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 56px; border-bottom: 1px solid #EAD5FE;}
.cont04 .tab_area li a {display: inline-block; padding: 5px 10px; color: #b59fcb; font-size: 24px; font-weight: bold;}
.cont04 .tab_area li.active a {color: #7801e7; position: relative;}
.cont04 .tab_area li.active a::after {content: ''; display: block; width: 100%; height: 3px; background-color: #7801e7; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);}
.cont04 .tab_cont li {display: none; position: relative;}
.cont04 .tab_cont li.active {display: block;}
.cont04 .tab_cont li a {display: block; position: absolute; left: 50%; transform: translateX(-50%);}
.cont04 .tab_cont li .video_btn {width: 450px; height: 260px; left: 50%; top: 450px; margin-left: -254px;}
.cont04 .tab_cont li .link_btn {width: 24%; height: 120px; left: 50%; bottom: 100px; transform: translateX(-50%);}

/* cont05 */
.cont05 ul {width: 870px; margin: 40px auto 0; padding-bottom: 100px;}
.cont05 ul li {text-align: left; margin-bottom: 20px;}
.cont05 ul li h4 {border-bottom: 2px solid #d3d3d3; margin-bottom: 10px; position: relative;}
.cont05 ul li h4 a {display: block; width: 100%; padding: 15px; box-sizing: border-box; color: #333; font-size: 20px; font-weight: bold;}
.cont05 ul li h4 i {display: block; width: 22px; height: 22px; position: absolute; right: 15px; top: 50%; transform: translateY(-50%);}
.cont05 ul li h4 i::before {content: ''; display: block; width: 100%; height: 3px; background-color: #222; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg);}
.cont05 ul li h4 i::after {content: ''; display: block; width: 100%; height: 3px; background-color: #222; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0deg);}
.cont05 ul li h4 a.active i::before {display: none !important;}
.cont05 ul li div {display: none; padding: 20px 35px; background-color: #f6f6f6; color: #4e4e4e; border-radius: 12px; font-size: 16px; line-height: 1.6;}
.cont05 ul li div.active {display: block;}
.cont05 .col_red {color: #e50000;}

/* cont06 */
.cont06 .evt_btn {display: block; width: 390px; height: 100px; position: absolute; left: 50%; bottom: 55px; transform: translateX(-50%); margin-left: 295px;}

/* quick_bnr */
.quick_bnr {position: fixed; right: 50%; top: 200px; transform: translateX(-50%); margin-right: -850px; z-index: 10;}
.quick_bnr ul {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.quick_bnr li {width: 100%; height: 50%;}
.quick_bnr li a {display: block; width: 100%; height: 100%;}

/* fixed_bnr */
.fixed_bnr {position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 15;}

/* video_pop */
.video_pop_bg {display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; top: 0; z-index: 11;}
.video_pop_wrap {display: none; max-width: 950px; width: 50%; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 12;}
.video_pop_wrap a {display: block; width: 35px; height: 35px; position: absolute; right: 0; top: -35px;}
.video_pop_wrap a::before {content: ''; display: block; width: 80%; height: 2px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg);}
.video_pop_wrap a::after {content: ''; display: block; width: 80%; height: 2px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg);}
.video_pop_wrap video {width: 100%;}
.video_pop_bg.active {display: block;}
.video_pop_wrap.active {display: block;}