#main{
	width:100%;
	background:#111;
	margin:0;
	padding:0;
}

.visual{
	width:100%;
	height:100vh;
	position:relative;
	margin:0;
	padding:0;
	box-sizing:border-box;
}


.visual .bg{
	width:100%;
	height:100%;
	position:absolute;
	overflow:hidden;
}

.visual .bg video{
    opacity:0.7;
    height:180%;
    left:50%;
    top:50%;
    position:relative;
    transform:translate(-50%, -50%)
}

.visual .txA{
	width:100%;
	text-align:Center;
	position:absolute;
	z-index:1;
	top:120px;
	font-size:96px;
	color:#fff;
	font-family:'poppins';
	line-height:96px;

}

.visual .txA b{
	display:block;
}


.visual .scrollA{
	width:100%;
	position:absolute;
	z-index:1;
	bottom:30px;
	text-align:Center;
}


.visual .scrollA .scroll{
	width:30px;
	position:Relative;
	animation:bagEvntBounce 2s ease-in-out infinite;
	/* left:50%;
	margin-left:-9px */
	margin:0 auto;
}

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

.visual .scrollA .scroll img{
	width:100%;
}


.toggle_wrapper{
	position: relative; 
	display:inline-block;  
	width: auto; 
	margin-top:40px; 
	height: auto;  
	border-radius: 50px;  
	justify-content:center; 
	overflow:hidden;
}

.toggle_item {
	position: relative; 
	width: 142px; 
	padding:16px 0px; 
	font-size: 22px; 
	color: #fff; 
	text-align: center; 
	overflow: hidden; 
	background:#222;   
	border:3px solid #FF3939;   
	cursor: pointer; 
	-webkit-backface-visibility: hidden;  
	-moz-backface-visibility: hidden; 
	-webkit-transform: translate3d(0, 0, 0); 
	-moz-transform: translate3d(0, 0, 0);
	float:left;
	display:inline-block;
}


.toggle_item:last-child{
	border-radius:0px 50px 50px 0px;
	border-left: 0;
}

.toggle_item.is-active {
	color:#fff; 
	background:#FF3939
}

.toggle_item_inner { 
	transform: translateX(0); 
	animation: marquee var(--duration) linear infinite; 
	animation-play-state: running;  
	animation-delay: .4s;
}

.toggle_item_inner span::after {
	opacity: 1;
}

.toggle_item_inner{
	display: block; 
	width: 100%;
}

.toggle_item_inner span::after {
	content: attr(data-text); 
	position: absolute;  
	display: block;  
	width: 100%;  
	left: var(--interval); 
	top: 0; 
	opacity: 0;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(var(--interval) * -1));
  }
}



































.mainTit{
	position:relative;
	font-size:48px;
	color:#fff;
	font-family:'poppins';
	display:inline-block;
}

.mainTit:before{
	width:6px;
	height:6px;
	position:absolute;
	content:'';
	background:#FF3939;
	border-radius:6px;
	left:-20px;
	top:50%;
	transform:translateY(-50%);
	animation: ball 1s ease-in-out infinite alternate; 
	animation-delay: 0.8s;
	transition: all 0.5s; 
	transition-delay:1s;
}

.mainTit:after{
	width:6px;
	height:6px;
	position:absolute;
	content:'';
	background:#FF3939;
	border-radius:6px;
	right:-20px;
	top:50%;
	transform:translateY(-50%);
	animation: ball 1s ease-in-out infinite alternate; 
	animation-delay: 0.8s;
	transition: all 0.5s; 
	transition-delay:1s;
}

@keyframes ball {
    0% {
        transform:translateY(30px) scaley(1);
		opacity:1;
    }
    20% {
        transform:translateY(-15px) scaley(1.2);
		opacity:1;
    }
	40% {
        transform:translateY(10px) scaley(0.9);
		opacity:1;
    }
    60% {
        transform:translateY(0) scaley(1);
		opacity:1;
    } 
	100% {
        transform:translateY(0) scaley(1);
		opacity:1;
    } 
}

#main .highlight{
	width:1920px;
	box-sizing:border-box;
	padding:120px 0%;
    box-sizing:border-box;
    text-align:center;
    margin:0 auto;
}

#main .highlight .highlightVisual{
	width:100%;
	margin-top:60px;
}

#main .highlight .highlightVisual li{
	width:100%;
	margin:0px 10px;
	border-radius:20px;
	overflow:hidden;
	transform:scale(0.85);
	opacity:0.3
}

#main .highlight .highlightVisual li img{
	width:100%;
}

#main .highlight .highlightVisual li.slick-center{
	transform:scale(1);
	box-sizing:border-box;
	opacity:1;
}


#main .highlight .highlightVisual li.slick-center img{
	border:10px solid #FF3939;
	border-radius:21px;
	box-sizing:border-box;
}





#main .story{
	width:1920px;
	margin:0 auto;
	padding:0px 6% 120px 6%;
	box-sizing:border-box;
	text-align:center;
}

#main .story .tabList{
	width:100%;
	display:flex;
	justify-content:center;
	gap:8px;
	flex-flow:wrap;
	margin-top:20px;
}

#main .story .tabList li{
	display:inline-block;
	padding:12px 24px;
	background:#222;
	color:#999;
	font-size:14px;
	border-radius:50px;
	cursor:pointer;
}


#main .story .tabList li.current{
	background:#FF3939;
	color:#fff;
}


#main .story .storyList{
	width:100%;
	margin-top:60px;
	display:flex;
	flex-flow:wrap;
	gap:20px;
}

#main .story .storyList li{
	width:calc(100% / 4 - 15px);
	border-radius:20px;
	overflow:hidden;
	background:#000;
	transition:all 1s;
	position:Relative;
}

#main .story .storyList li img{
	width:100%;
	opacity:1;
	transition:all 1s;
}

#main .story .storyList li:hover img{
	opacity:0.6;
}

#main .story .storyList li .hoverCt{
	width:100%;
	position:absolute;
	transition:all 1s;
	padding:20px;
	box-sizing:border-box;
	bottom:-100%;
}


#main .story .storyList li .hoverCt .subj{
	width:100%;
	font-size:18px;
	color:#fff;
	text-align:left;
	font-weight:500;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

#main .story .storyList li .hoverCt .tag{
	width:100%;
	margin-top:12px;
	display:flex;
	flex-flow:wrap;
	gap:2px;
}

#main .story .storyList li .hoverCt .tag div{
	width:auto;
	padding:8px 12px;
	background:rgba(0,0,0,0.5);
	color:#fff;
	font-size:14px;
	border-radius:50px;
	border:1px solid #444;
}

#main .story .storyList li:hover .hoverCt{
	bottom:0%;
}

#main .story .more{
	width:56px;
	margin:60px auto 0;
}

#main .story .more img{
	width:100%;
}