.vs_area {
    position: relative;
    width: 100%;
    position: relative;
    overflow: hidden
}


.vs_area .covertxt:has(IMG) {
	padding:25rem 0 15rem;
	text-align:center;
}
.vs_area .covertxt > IMG {
	max-width: 70%;
}
@media (max-width: 1024px) {
	.vs_area .covertxt:has(IMG) {
		padding: 12rem 0;
	}
}






.flow_container{ margin-bottom:10rem; overflow:hidden;white-space:nowrap;position:relative;width:0;height:7rem;    background: linear-gradient(135deg, #dcd25d 0%, #804c31 50%, #f97316 100%); mask:linear-gradient(90deg,transparent 0%,black 10%,black 90%,transparent 100%);-webkit-mask:linear-gradient(90deg,transparent 0%,black 10%,black 90%,transparent 100%);animation:expandWidth .5s ease-out .5s forwards;transform:skewY(-7deg);transform-origin:center}
.flow_list{display:inline-flex;align-items:center;animation:flowText 30s linear infinite 1s;list-style:none;margin:0;padding:0;gap:10rem;height:100%;width:max-content;opacity:0;animation:fadeInAndFlow .3s ease-out 1s forwards,flowText 90s linear infinite 1s}
.flow_list li{display:inline-flex;align-items:center;font-size:2.6rem;font-weight:600;color:#fff;text-shadow:0 0.2rem 0.5rem #0000004d;white-space:nowrap;gap:2rem;flex-shrink:0}
@keyframes expandWidth {
    0%{width:0}
    100%{width:100%}
}
@keyframes fadeInAndFlow {
    0%{opacity:0}
    100%{opacity:1}
}
@keyframes flowText {
    0%{transform:translateX(100vw)}
    100%{transform:translateX(-100%)}
}
.flow_container:hover .flow_list{animation-play-state:paused}

@media (max-width: 768px) {
    .flow_container{height:5rem;animation:expandWidth .5s ease-out .5s forwards; transform-origin:center}
    .flow_list{gap:4rem;opacity:0;animation:fadeInAndFlow .3s ease-out 1s forwards,flowText 75s linear infinite 1s}
    .flow_list li{font-size:2rem;gap:1rem;color:#fff;text-shadow:0 2px 4px #0000004d}
    .program .cont{padding:0 2rem}
}














.evt_area h1 {
    font-size: 3.5rem
}

.evt_sd {
    margin-top: 5rem;
    position: relative;
    z-index: 1
}

.evt_sd::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10rem;
    height: 100%;
    background: linear-gradient(to right,#392108,transparent);
    z-index: 2;
    pointer-events: none
}

.evt_sd .swiper {
    width: 100%;
    height: auto;
    padding: 2rem 2rem 2rem 0
}

.evt_sd .swiper-slide {
    background: #ffffff1a;
    border-radius: 1.5rem;
    padding: 3rem;
    backdrop-filter: blur(10px);
    border: 1px solid #fff3;
    transition: all .3s ease;
    height: auto
}

.evt_sd .swiper-slide:hover {
    transform: translateY(-5px);
    background: #ffffff26;
    box-shadow: 0 1rem 3rem #0000004d
}

.evt_sd .swiper-slide .img {
    width: 100%;
    height: 32rem;
    background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}

.evt_sd .swiper-slide .tbox h3 {
    color: #fff;
    font-size: 2.4rem;
    font-weight: 600;
    margin-top: 3rem;
    margin-bottom: 1rem;
    letter-spacing:-1px;
}

.evt_sd .swiper-slide .tbox p {
    color: #fffc;
    line-height: 1.5;
}

.evt_sd .swiper-slide .tbox .date {
    font-weight: 600;
    opacity: .5;
    margin-top: 2rem;
}


.evt_sd .swiper-button-next,.evt_sd .swiper-button-prev {
    color: #fff;
    background: #ffffff1a;
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    backdrop-filter: blur(10px);
    border: 1px solid #fff3
}

.evt_sd .swiper-button-next:after,.evt_sd .swiper-button-prev:after {
    font-size: 1.6rem
}

.evt_sd .swiper-pagination-bullet {
    background: #ffffff80;
    opacity: 1
}

.evt_sd .swiper-pagination-bullet-active {
    background: #fff
}

.evt_sd .swiper-pagination {
    margin-left: 20rem;
    position: relative!important;
    margin-top: 2rem!important;
    height: 1rem!important;
    background: #fff3!important;
    border-radius: 1rem!important;
    overflow: hidden!important;
    display: block!important;
    visibility: visible!important;
    opacity: 1!important;
    z-index: 10!important
}

.evt_sd .swiper-pagination-progressbar-fill {
    background: linear-gradient(135deg,#8B5CF6 0%,#EC4899 50%,#F59E0B 100%);
    border-radius: 1rem!important;
    height: 100%!important;
    cursor: pointer!important;
    transition: all .3s ease!important;
    position: relative!important;
    top: 0!important;
    left: 0!important;
    display: block!important;
    visibility: visible!important;
    opacity: 1!important;
    box-shadow: 0 0.2rem 0.8rem #0000004d!important
}

.evt_area {
    background-color: #392108;
    padding: 10rem 0 10rem 20rem;
    color: #fff;
    position: relative;
    overflow: hidden
}

.evt_area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(2px 2px at 2rem 3rem,#fff,transparent),radial-gradient(2px 2px at 4rem 7rem,#fff,transparent),radial-gradient(1px 1px at 9rem 4rem,#fff,transparent),radial-gradient(1px 1px at 13rem 8rem,#fff,transparent),radial-gradient(2px 2px at 16rem 3rem,#fff,transparent),radial-gradient(1px 1px at 20rem 6rem,#fff,transparent),radial-gradient(2px 2px at 24rem 2rem,#fff,transparent),radial-gradient(1px 1px at 28rem 9rem,#fff,transparent),radial-gradient(1px 1px at 32rem 5rem,#fff,transparent),radial-gradient(2px 2px at 36rem 1rem,#fff,transparent),radial-gradient(1px 1px at 40rem 7rem,#fff,transparent),radial-gradient(2px 2px at 44rem 4rem,#fff,transparent),radial-gradient(1px 1px at 48rem 8rem,#fff,transparent),radial-gradient(1px 1px at 52rem 2rem,#fff,transparent),radial-gradient(2px 2px at 56rem 6rem,#fff,transparent),radial-gradient(1px 1px at 60rem 3rem,#fff,transparent),radial-gradient(2px 2px at 64rem 9rem,#fff,transparent),radial-gradient(1px 1px at 68rem 1rem,#fff,transparent),radial-gradient(1px 1px at 72rem 5rem,#fff,transparent),radial-gradient(2px 2px at 76rem 8rem,#fff,transparent);
    background-repeat: repeat;
    background-size: 80rem 10rem;
    animation: twinkle 4s ease-in-out infinite alternate;
    z-index: 0
}

.evt_area::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(1px 1px at 5rem 2rem,#ffd700,transparent),radial-gradient(1px 1px at 10rem 6rem,#ffd700,transparent),radial-gradient(2px 2px at 15rem 1rem,#ffd700,transparent),radial-gradient(1px 1px at 25rem 4rem,#ffd700,transparent),radial-gradient(1px 1px at 30rem 8rem,#ffd700,transparent),radial-gradient(2px 2px at 35rem 3rem,#ffd700,transparent),radial-gradient(1px 1px at 45rem 7rem,#ffd700,transparent),radial-gradient(1px 1px at 50rem 2rem,#ffd700,transparent),radial-gradient(2px 2px at 55rem 5rem,#ffd700,transparent),radial-gradient(1px 1px at 65rem 9rem,#ffd700,transparent),radial-gradient(1px 1px at 70rem 1rem,#ffd700,transparent),radial-gradient(2px 2px at 75rem 6rem,#ffd700,transparent);
    background-repeat: repeat;
    background-size: 80rem 10rem;
    animation: twinkle 3s ease-in-out infinite alternate-reverse;
    z-index: -1
}

@keyframes twinkle {
    0% {
        opacity: .3
    }

    50% {
        opacity: .8
    }

    100% {
        opacity: .4
    }
}


@keyframes shootingStar {
    0% {
        transform: translateX(-15rem) translateY(-15rem) rotate(40deg);
        opacity: 0
    }

    10% {
        opacity: 1
    }

    90% {
        opacity: 1
    }

    100% {
        transform: translateX(120vw) translateY(120vh) rotate(40deg);
        opacity: 0
    }
}

.evt_area .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5rem;
    position: relative;
    z-index: 1
}

.evt_area .top_content {
    flex: 1
}

.evt_controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    position: relative;
    z-index: 10;
    margin-right: 10%;
    gap: 0 3rem
}

.evt_area .evt_prev,.evt_area .evt_next {
    width: 6rem;
    height: 6rem;
    border: none;
    border-radius: 50%;
    background: #000c;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 10
}

.evt_prev:hover,.evt_next:hover {
    background: #ffffff80;
    transform: scale(1.1);
    box-shadow: 0 0.5rem 1.5rem #0000004d;
    border-color: #fffc
}

.evt_prev:active,.evt_next:active {
    transform: scale(0.95)
}

.evt_prev svg,.evt_next svg {
    width: 2rem!important;
    height: 2rem!important
}



.evt_sd .swiper {
    position: relative;
}

.evt_sd .swiper .evt_controls .swiper-button-prev,
.evt_sd .swiper .evt_controls .swiper-button-next {
    position: absolute;
}

.evt_sd .swiper .evt_controls .swiper-button-prev {
    left: 7rem;
    top: 26rem;
}

.evt_sd .swiper .evt_controls .swiper-button-next {
    right: -10rem;
    top: 26rem;
}

.evt_sd::after{content:'';position:absolute;top:0;right:0;width:10rem;height:100%;background:linear-gradient(to right,transparent,#392108);z-index:2;pointer-events:none}
.evt_sd .swiper-slide .img {
    overflow: hidden;
    position: relative;
}
.evt_sd .swiper-slide .img img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.evt_area { padding-left: 0; }
.evt_area .top { padding-left: 20rem; }



.evt_area.null {
	transform: skewY(-7deg);
	padding:15rem 0;
}
.evt_area.null + .evt_area {
	padding-top:0;
	margin-top: -15rem;
}

.flow_container ~ .evt_area {
	margin-top: -10rem;
}

.evt_area .titbox .tit {
    color: #ffffffcc;
}












.notice_area {
	padding: 10rem 0 10rem 20rem;
	color: #fff;
	position: relative;
	overflow: hidden
}