/* marquee animation */
.marquee_compo{
	
}
.marquee_compo .marquee{
	display: flex;
	gap: 1rem;
	white-space: nowrap;
}
.marquee_compo .marquee[data-direction=right]{
	flex-direction: row-reverse;
}
/* marquee animation END */


/* fade animation */
.anim.fade{
	transform: translateY(10%);
	opacity: 0.1;
	transition: opacity 0.5s ease,
	transform 0.5s ease;
}
.anim.fade.show{
	transform: translateY(0);
	opacity: 1;
}
/* fade animation END */


/* splitText animation */
.splitText{
	width: max-content;
}
.splitText > span{
	display: inline-block;
}
.split_parent{
	overflow: hidden;
}
.split_child {
	display: inline-block;
}
/* splitText animation END */






/* animation */



.sec_category .anim_obj1{background-color: #21004E;}
.sec_category .anim_obj2{background-color: #146153;}
.sec_category .anim_obj3{background-color: #193776;}
.sec_category .anim_obj4{background-color: #7F7F7F;}
.sec_category .anim_obj5{background-color: #8E3E9F;}
.sec_category .anim_obj6{background-color: #fff; border: 1px solid #E5E7EB;}
.anim_obj1{
	position: relative;
}
.anim_obj1 svg{
	width : 700px;
	height: 700px;
	position : absolute;
	right:-18%;
	animation: rotateSVG 40s linear infinite;
	opacity:0;
	transition: opacity 3s ease-in-out;
}
@keyframes rotateSVG{
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.anim_obj2{
	position: relative;
}
.anim_obj2 svg{
	width : 600px;
	height: 600px;
	position : absolute;
	top:50px;
	right:-14%;
	opacity: 0;
	transition: opacity 3s ease-in-out;
	animation: rotateSVG 40s linear infinite;
	animation-delay: var(--delay);
}
.sec_category .anim_obj6 .anim_obj2{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	min-height: 10.125rem;
	overflow: hidden;
	background-color: transparent;
}

.anim_obj3{
	position : relative;
}
.anim_obj3 > div{
	position : absolute;
	right:-18%;
	top:0;
	width : 700px;
	height: 700px;
	animation: rotateSVG 40s linear infinite;
	opacity: 0;
	transition: opacity 3s ease-in-out;
	animation-delay: var(--delay);
}
.anim_obj3 > div span{
	position : absolute;
	width : 100%;
	height: 100%;
}
.anim_obj3 > div span:nth-child(1){animation-delay: 0s;}
.anim_obj3 > div span:nth-child(2){animation-delay: 0.5s;}
.anim_obj3 > div span:nth-child(3){animation-delay: 1s;}
.anim_obj3 > div span:nth-child(4){animation-delay: 1.5s;}
.anim_obj3 > div span:nth-child(5){animation-delay: 2s;}
.anim_obj3 > div span:nth-child(6){animation-delay: 2.5s;}
.anim_obj3 > div span:nth-child(7){animation-delay: 3s;}
.anim_obj3 > div span:nth-child(8){animation-delay: 3.5s;}
.anim_obj3 > div span:nth-child(9){animation-delay: 4s;}
.anim_obj3 > div span:nth-child(10){animation-delay: 4.5s;}
.anim_obj3 > div span:nth-child(11){animation-delay: 5s;}
.anim_obj3 > div span:nth-child(12){animation-delay: 5.5s;}
.anim_obj3 > div span {
	transform: rotate(calc(30deg * var(--i))) scaleX(1.2);
	animation: anim3 6s linear infinite;
}
.anim_obj3 > div span::before{
	content: "";
	position : absolute;
	top: 10%;
	left: 50%;
	transform: translateX(-50%) rotate(90deg) scaleY(0.6);
	width : 214px;
	height: 85px;
	border-radius: 50%;
	background-color: #2E4C89;
}
@keyframes anim3{
	0%{
		transform: rotate(calc(30deg * var(--i))) scaleX(1.2);
	}
	50%{
		transform: rotate(calc(30deg * var(--i))) scaleX(0.3);
	}
	100%{
		transform: rotate(calc(30deg * var(--i))) scaleX(1.2);
	}
}

.anim_obj4{
	position : relative;
	top: 5%;
}
.anim_obj4 svg{
	display : block;
	transform:  translate(-50%,-50%) rotate(0deg) scale(1);
	animation: rotateSVG2 40s linear infinite;
	position : absolute;
	width : 800px;
	height: 800px;
	right : -54%;
	top: 346px;
	opacity: 0;
	transition: opacity 3s ease-in-out;
	animation-delay: var(--delay);
}
@keyframes rotateSVG2{
	0% {
		transform:  translate(-50%,-50%) rotate(0deg) scale(1);
	}
	50% {
		transform: translate(-50%,-50%) rotate(180deg) scale(1.2);
	}
	100%{
		transform: translate(-50%,-50%) rotate(360deg) scale(1);
	}
}

.anim_obj5{
	position: relative;
	top: 8%;
}
.anim_obj5 svg{
	animation: rotateSVG 40s linear infinite;
	width : 600px;
	height: 600px;
	position : absolute;
	right:-14%;
	top: 40px;
	opacity: 0;
	transition: opacity 3s ease-in-out;
	animation-delay: var(--delay);
}
.anim_obj5 svg .rot{
	transform-origin: center;
	animation: rotateSVG 40s linear infinite;
}
/* animation  END*/



/* category */
.sec_category ul{
	display: grid;
	grid-template-columns: repeat(5,1fr);
	justify-content: space-between;
	gap: 1.875rem;
}
.sec_category ul li{
	width : 100%;
	min-width : 100%;
	max-width : 14rem;
}
.sec_category .tit{
	display : flex;
	align-items: center;
	gap: 1.5rem;
}
.sec_category .tit h2{
	font-size: 2rem;
	font-weight: 600;
	line-height: 120%;
	color: #141414;
}
.sec_category .tit a{
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 120%;
	color: #637381
}
.sec_category .anim_box h3{color: #141414;}
.sec_category .anim_box a{color: #637381;}

.sec_category .anim_box > div{
	min-height: 9.75rem;
	overflow: hidden;
}
.sec_category .anim_box > div.anim_obj6{
	position : relative;
}
.sec_category .anim_obj2 svg{
	top: 4%;
	right: -11%;
	width: 11.125rem;
	height: 13.125rem;
	opacity:  0.6;
}
.sec_category .anim_obj3 > div{
	top: 6%;
	right: -18%;
	width: 13.75rem;
	height: 13.75rem;
	opacity:  1;
}
.sec_category .anim_obj3 > div span::before{
	width: 4.375rem;
	height: 2.188rem;
}

.sec_category .anim_obj4 svg{
	top: 73%;
	right: -90%;
	width: 16.75rem;
	height: 16.75rem;
	opacity:  1;
}
.sec_category .anim_obj5 svg{
	top: 15%;
	right: -8%;
	width: 13.125rem;
	height: 13.125rem;
	opacity:  0.6;
}

.sec_category .anim_obj6 .svg_motion_compo{
	position:absolute;
	top: 0;
	width : 100%;
	height: 100%;
	min-height: 10.125rem;
	opacity: 0;
	background-color: transparent;
	transition: opacity 0.6s ease-in-out;
}
.sec_category .anim_obj6 .svg_motion_compo.on{
	opacity: 1;
}
.sec_category .anim_obj6 .anim_obj3 > div span::before{
	background-color: #B9B9BE;
}
/* category END */







@media all and (max-width: 1024px){
	.sec_category .anim_obj4 svg{
		right : -96%;
	}
}