/* 공통 */
* { 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 .top_cover {position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 2;}
.evt_main .video_area {display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;}
.evt_main .video_area.active {display: block;}
.evt_main .video_area video {display: block; border: 0; outline: none; box-shadow: none; background: transparent; -webkit-mask-image: -webkit-radial-gradient(white, black); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;}
.evt_main .video_area video:focus {outline: none;}
.evt_main .main_cont {position: absolute; left: 50%; top: 106px; transform: translateX(-50%); z-index: 2;}
.evt_main .main_cont img:nth-last-of-type(1) {margin-top: 50px;}

/* 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: 166px; 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 {margin-top: -200px;}

/* 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 .link_btn1 {width: 210px; height: 45px; left: 50%; top: 185px; margin-left: -425px;}
.cont04 .tab_cont li .video_btn {width: 450px; height: 260px; left: 50%; top: 245px; margin-left: -315px;}
.cont04 .tab_cont li .link_btn2 {width: 500px; height: 130px; left: 50%; top: 725px; margin-left: 200px;}

/* cont05 */
.cont05 .ani_wrap03 {position: absolute; left: 50%; top: 235px; transform: translateX(-50%); opacity: 0;}
.cont05.active .ani_wrap03 {animation: opacity 1.2s ease forwards;}

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

/* quick_bnr */
.quick_bnr {position: fixed; right: 50%; top: 200px; transform: translateX(-50%); margin-right: -850px; z-index: 10; }

/* 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;}