.particle{
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: 790px;
	touch-action: none;
	color: #FF6681;
}
.particle span{
	position: absolute; 
	border-radius: 50%; 
}
.particle span:nth-child(even){
	animation: fluffy 2s ease-in-out infinite;
}
.particle span:nth-child(odd){
	animation: fluffy 3s ease-in-out infinite reverse;
}
.particle span.blue{background-color: #4CD9F9;}
.particle span.blue2{background-color: #AEE7F5;}
.particle span.purple.blur5{background-color: #9297FF;}
.particle span.purple{background-color: #A7ABFB; }
.particle span.green{background-color: #AFF3C5; }
.particle span.green2{background-color: #DBF7E4; }
.particle span.w26{width: 26px; height: 26px;}
.particle span.w15{width: 15px; height: 15px;}
.particle span.w10{width: 10px; height: 10px;}
.particle span.w8{width: 8px; height: 8px;}
.particle span.blur10{filter: blur(10px);}
.particle span.blur5{filter: blur(5px);}

.particle span:nth-child(1){
	left: 15.69444444444%;
	top: 26.96202531646%;
}
.particle span:nth-child(2){
	left: 8.19444444444%;
	top: 60%;
}
.particle span:nth-child(3){
	left: 23.19444444444%;
	top: 42.6582278481%;
}
.particle span:nth-child(4){
	left: 80.55555555556%;
	top: 22.53164556962%;
}
.particle span:nth-child(4){
	left: 80.55555555556%;
	top: 22.53164556962%;
}
.particle span:nth-child(5){
	left: 78.61111111111%;
	top: 33.16455696203%;
}
.particle span:nth-child(6){
	left: 8.19444444444%;
	top: 144.55696202532%;
}
.particle span:nth-child(7){
	left: 83.19444444444%;
	top: 113.03797468354%;
}
.particle span:nth-child(8){
	left: 93.05555555556%;
	top: 140.37974683544%;
}
.particle span:nth-child(9){
	left: 12.56944444444%;
	top: 168.60759493671%;
}
.particle span:nth-child(10){
	left: 86.875%;
	top: 173.54430379747%;
}
.particle span:nth-child(11){
	left: 14.86111111111%;
	top: 232.78481012658%;
}
.particle span:nth-child(12){
	left: 68.19444444444%;
	top: 253.16455696203%;
}
.particle span:nth-child(13){
	left: 81.52777777778%;
	top: 258.60759493671%;
}
.particle span:nth-child(14){
	left: 7.22222222222%;
	top: 318.22784810127%;
}
.particle span:nth-child(15){
	left: 15.90277777778%;
	top: 326.07594936709%;
}
.particle span:nth-child(16){
	left: 75.34722222222%;
	top: 327.3417721519%;
}
.particle span:nth-child(17){
	left: 53.40277777778%;
	top: 371.26582278481%;
}
.particle span:nth-child(18){
	left: 74.44444444444%;
	top: 19.74683544304%;
}
.particle span:nth-child(19){
	left: 64.86111111111%;
	top: 44.05063291139%;
}
.particle span:nth-child(20){
	left: 33.75%;
	top: 76.20253164557%;
}
.particle span:nth-child(21){
	left: 68.75%;
	top: 69.24050632911%;
}
.particle span:nth-child(22){
	left: 81.52777777778%;
	top: 75.06329113924%;
}
.particle span:nth-child(23){
	left: 86.66666666667%;
	top: 70.50632911392%;
}

@keyframes fluffy{
	0%{
		transform: translateY(200%);
	}
	50%{
		transform: translateY(0);
	}
	100%{
		transform: translateY(200%);
	}
}

/* main page */
main{
	width: 100%;
	overflow-x: hidden;
	background-color: #F9F9F9;
}
.tag_list{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.tag_list > li{
	position: relative;
	padding: 4px 20px;
	border-radius: 50px;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	transform: rotate(0);
	transition: 0.2s ease-in-out;
}
.tag_list .blue_t{background-color: #AEE7F5;}
.tag_list .green_t{background-color: #AFF3C5;}
.tag_list .purple_t{background-color: #9297FF;}


.sec_home{
	position: relative;
	z-index: 10;
	padding-top: 234px;
}
.sec_home .blue_t{transform: rotate(-1.734deg); right: -6px; left: auto;}
.sec_home .green_t{transform: rotate(8.541deg); top: -15px;}
.sec_home .purple_t{transform: rotate(-6.465deg); left: -7px; top: 2px;}

.marquee{
	position: relative;
	z-index: 10;
	gap: 40px;
	width: max-content;
}
.marquee > div{
	display: flex;
	gap: 40px;
}
.marquee .marquee_txt{
	/* animation: marquee 20s linear infinite; */
	gap: 40px;
}
@keyframes marquee{
	0%{
		transform: translateX(0%);
	}
	100%{
		transform: translateX(-100%);
	}
}


.sec_project{
	position: relative;
	z-index: 10;
	padding-bottom: 174px;
	padding-bottom: 320px;
	padding-bottom: 180px;
}
.sec_project .inner_sm {
	--inner_sm_mw : 592px;
	--inner_sm_w : calc(100% - 80px);
}
.sec_project .inner_base{
	--inner_base_mw : 800px;
	--inner_base_w : calc(100% - 48px);
}
.sec_project .wv_tab .tab_btn_wrap{
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 68px;
}
.sec_project .project_tab{
	padding: 15px 28px;
	border-radius: 40px;
	border: 1px solid #C4C5CA;
}
.sec_project .project_tab.active{
	border-color: #9297FF;
	background-color: #9297FF;
	color: #fff;
}
.sec_project .tab_content_wrap{
	/*padding-left: 104px;*/
	/*padding-right: 80px;*/
}
.sec_project .tab_content_wrap .tab_content:nth-child(n+1) a > img{
	animation: fluffy2 3s ease-in-out infinite;
}
.sec_project .tab_content_wrap .tab_content:nth-child(n+2) a > img{
	animation: fluffy2 3s 0.25s ease-in-out infinite;
}
.sec_project .tab_content_wrap .tab_content:nth-child(n+3) a > img{
	animation: fluffy2 3s 0.5s ease-in-out infinite;
}
@keyframes fluffy2{
	0%{
		transform: translateY(0);
	}
	50%{
		transform: translateY(12.5%);
	}
	100%{
		transform: translateY(0);
	}
}
.sec_project .tab_content_wrap .tab_content:not(:last-child){
	margin-bottom: 20px;
}
.sec_project .tab_content_wrap .tab_content:nth-child(even) a{
	flex-direction: row-reverse;
}
.sec_project .tab_content_wrap .tab_content:nth-child(odd) a{
	flex-direction: row;
}
.sec_project .tab_content_wrap .tab_content a{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sec_project .tag_list:nth-of-type(1):hover .blue_t:nth-of-type(1){
	transform: rotate(4.482deg);
	right: -6px;
}
.sec_project .tag_list:nth-of-type(1):hover .blue_t:nth-of-type(2){
	transform: rotate(-5.184deg);
	top: 10px;
	left: -2px;
}
.sec_project .tag_list:nth-of-type(1):hover .blue_t:nth-of-type(3){
	transform: rotate(3.98deg);
	left: -4px; top: 2px;
}
.sec_project .tag_list:nth-of-type(2):hover .green_t:nth-of-type(1){
	transform: rotate(-4.482deg);
	right: -6px;
}
.sec_project .tag_list:nth-of-type(2):hover .green_t:nth-of-type(2){
	transform: rotate(5.184deg);
	top: 10px;
	left: -2.5px;
}
.sec_project .tag_list:nth-of-type(2):hover .green_t:nth-of-type(3){
	transform: rotate(-3.98deg);
	left: -4px; top: 2px;
}


.scr_tab_wrap{
	display: none;
}
.tab_content_wrap{
	margin-top: 120px;
}
/* main page END */



@media all and (max-width: 768px){
	.particle{
		height: 667px;
	}
	.particle span:nth-child(1){
		left: 92.53333333333%;
		top: 46.32683658171%;
	}
	.particle span:nth-child(2){
		left: 85.86666666667%;
		top: 23.08845577211%;
	}
	.particle span:nth-child(4){
		left: 18.4%;
		top: 93.70314842579%;
	}
	.particle span:nth-child(7){
		left: 9.86666666667%;
		top: 207.1964017991%;
	}
	.particle span:nth-child(11){
		left: 38.13333333333%;
		/*top: 475.26236881559%;*/
		display: none;
	}
	.particle span:nth-child(12){
		left: 81.86666666667%;
		top: 238.83058470765%;
	}
	.particle span:nth-child(14){
		left: 77.86666666667%;
		top: 284.10794602699%;
	}
	.particle span:nth-child(15){
		left: 17.6%;
		top: 305.39730134933%;
	}
	.particle span:nth-child(16){
		left: 74.66666666667%;
		top: 390.4047976012%;
	}
	
	.sec_home{
		padding-top: 162px;
	}
	.marquee,
	.marquee .marquee_txt{
		gap: 30px;
	}
	.sec_project .wv_tab .scr_tab_wrap{
		width: 100vw;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		overflow-x: scroll;
		padding: 0 24px;
	}
	.sec_project .wv_tab .scr_tab_wrap {
		-ms-overflow-style: none; /* IE and Edge */
		scrollbar-width: none; /* Firefox */
	}
	.sec_project .wv_tab .scr_tab_wrap::-webkit-scrollbar {
		display: none; /* Chrome, Safari, Opera*/
	}
	.sec_project .wv_tab .scr_tab_wrap .tab_btn_wrap{
		width: max-content;
		margin-bottom: 0;
		padding: 0 8px;
	}
	.sec_project .project_tab{
		font-size: 16px;
		padding: 13px 28px;
	}
	.sec_project .tab_content_wrap{
		padding: 0;
		margin-top: 60px;
	}
	.sec_project .tab_content_wrap .tab_content:nth-child(odd) a{
		flex-direction: column-reverse;
		margin-right: auto;
	}
	.sec_project .tab_content_wrap .tab_content:nth-child(even) a{
		flex-direction: column-reverse;
		margin-left: auto;
	}
	.sec_project .tab_content_wrap .tab_content a{
		width: max-content;
		align-items: flex-start;
	}
	.sec_project .tab_content_wrap .tab_content a.cont1 > img{
		width: 220px;
	}
	.sec_project .tab_content_wrap .tab_content a.cont2 > img{
		width: 200px;
	}
	.sec_project .tab_content_wrap .tab_content a.cont3 > img{
		width: 168px;
	}
	.sec_project{
		padding-bottom: 120px;
	}


	.sec_project .tab_content_wrap .tab_content .cont1 img{
		margin-left: 18px;
	}
}