
/* Common */
.s_set {
	padding:0px 3.33vw;
}

@media screen and (max-width:768px){
	.s_set {
		padding:0px 15px;
	}		
}

/* About */
.about {
	padding-top: 90px;
}

.about .sec01 {
	position:relative;
	width:100%;
	height: calc((var(--vh, 1vh)*100) - 90px);
	height: calc(100svh - 90px);
	overflow: hidden;
}

.about .sec01::after {
	content: "";
	display: block;
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background: url('../img/sub/about/sec01_bak.png') no-repeat center / cover;
	pointer-events: none;
	z-index:1;
}

.about .sec01 .s_set {
	width: 100%;
	height:100%;
}

.about .sec01 .bak {
	position: absolute;
	bottom: -5vw;
	right:0;
	width: 100%;
	height: 100%;
	animation: moveShape 18s cubic-bezier(0.455, 0.05, 0.55, 0.95) infinite alternate;	
	z-index: 3;
}

.about .sec01 .bak-ele {
	width:45vw;
	aspect-ratio: 1/1;
	background:linear-gradient(
		rgba(210,171,215,.5) 0%,
		rgba(175,131,221,0.8) 40%,
		rgba(120,40,202, 0.8) 100%
	);
	border-radius:30% 60% 60% 30% / 30% 40% 60% 60%;
	filter: blur(50px);
	opacity: .3;
	animation: changeShape 6s linear infinite, rotateShape 12s linear infinite;
}

.about .sec01 .sec-wrap {
	display: flex;
	flex-direction: column;
	justify-content:flex-end;
	align-items: center;
	position: relative;
	width: 100%;
	height:100%;
	padding-bottom: 5vw;
	/* padding-bottom: 6.25vw; */
	z-index:5;
}

.about .sec01 h2 {
	position: relative;
}

.about .sec01 .anchor {
  display: inline-block;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #7828ca;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
}

.about .sec01 .anchor.filled {
	position: absolute;
	top: 0;
  left: 0;
  -webkit-text-fill-color: #7828ca;
  clip-path: circle(0vw at 50% 50%);
}

.about .sec01 .anchor-align-left,
.about .sec01 .anchor-align-right {
	display: flex;
	gap:2.6041vw;
}

.about .sec01 .anchor-align-right {
	justify-content: flex-end;
}

.about .sec01 .anchor-align-left span,
.about .sec01 .anchor-align-left em,
.about .sec01 .anchor-align-right span,
.about .sec01 .anchor-align-right em {
	position: relative;
	display: inline-block;
	font-family: "Red Hat Display", sans-serif;
	font-size: 7.8125vw;
	font-weight: 900;
}

.about .sec01 .anchor-align-left span,
.about .sec01 .anchor-align-right span {
	display: flex;
	gap:4px;
}

.about .sec01 .anchor-align-left {
	text-align: left;
}

.about .sec01 .anchor-align-right {
	text-align: right;
}

.about .sec02 {
	position:relative;
	width:100%;
	padding:7.8125vw 0px 15.625vw;
	background-color: #7828ca;
	overflow:hidden;
}

.about .sec02 .txt {
	position: relative;
	z-index: 5;
}

.about .sec02 .txt:not(:last-child) {
	padding-bottom:7.8125vw;
}

.about .sec02 .txt .t01 {
	font-size:3vw;
	margin-bottom:2.083vw;
}

.about .sec02 .txt .t02 {
	font-size:1.25vw;
	line-height:1.7;
}

.about .sec02 .elem {
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	z-index: 1;
	pointer-events: none;
}

.about .sec02 .char {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap:1.0416vw;
	position: absolute;
	top:11vw;
	left:50%;
	transform: translateX(-50%);
}

.about .sec02 .char .char-txt {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 5.2083vw;
	height: 3.28125vw;
	padding:0px  0.5208vw;
	border-radius:10px;
	background-color: #fff;
	text-align: center;
	animation: char-updown-ani 3s ease-in-out infinite forwards;
}

.about .sec02 .char .char-txt::after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	bottom: -0.45vw;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.5208vw 0.3125vw 0px 0.3125vw;
	border-color: #ffffff transparent transparent transparent;
}

.about .sec02 .char .char-txt span {
	font-size: 0.7291vw;
	line-height:1.4;
}

.about .sec02 .char img {
	width:4.84375vw;
	height: 6.3020vw;
	animation: char-updown-ani 3s ease-in-out infinite forwards;
}

.about .sec02 svg {
	width: 100%;
	height: 100%;
	overflow: visible;
	visibility: visible;
}

.about .sec02 .svg01 {
	display: block;
	position: absolute;
	top:20vw;
	right: -4.16667vw;
	width: 16.6667vw;
	height: 16.6667vw;
	font-size: 0px;
}

.about .sec02 .svg01 .st {
	fill:#c9a9ea;
}

.about .sec02 .svg02 {
	display: block;
	position: absolute;
	left: 30vw;
	bottom: 3.6458vw;
	width:15.625vw;
	height:15.625vw;
	font-size: 0px;
}

.about .sec02 .svg02 .st {
	fill:#c9a9ea;
}

.about .sec02 .svg03 {
	position: absolute;
	right: -14.7vw;
	bottom: -41.6667vw;
	width: 84.3229vw;
	height: 84.3229vw;
}

.about .sec02 .svg03 .st01 {
	fill:none;
	stroke:#c9a9ea;
	stroke-width:2;
	stroke-miterlimit:10;
}

.about .sec02 .svg03 .st02 {
	fill:none;
	stroke:#c9a9ea;
	stroke-width:2;
	stroke-miterlimit:10;
	stroke-dasharray:5.0039,5.0039;
}

.about .sec02 .svg03 .st03 {
	fill:none;
	stroke:#c9a9ea;
	stroke-width:2;
	stroke-miterlimit:10;
	stroke-dasharray:5.0023,5.0023;
}

.about .sec02 .svg03 .st04 {
	fill:none;
	stroke:#c9a9ea;
	stroke-width:2;
	stroke-miterlimit:10;
	stroke-dasharray:5.0026,5.0026;
}

.about .sec02 .svg03 .st05 {
	fill:#c9a9ea;
}

.about .sec03 {
	padding:7.8125vw 0px;
}

.about .sec03 .hd {
	position:relative;
	padding:4.16667vw;
	margin-bottom:4.16667vw;
	border-radius:30px;
	background-color: #1b1b1b;
	overflow:hidden;
}

.about .sec03 .hd_txt {
	display: flex;
	gap:2.0833vw;
}

.about .sec03 .hd_txt h2 {
	font-size:3.75vw;
	line-height:0.8;
}

.about .sec03 .hd_txt span {
	display: block;
	position: relative;
	padding:0.8333vw 1.041vw;
	background-color: #fff;
	border-radius: 10px;
	font-size: 1.041vw;
}

.about .sec03 .hd_txt span::after {
	content: "";
	display: block;
	position: absolute;
	left: 6%;
	bottom: -0.5vw;
	border-bottom: 0.625vw solid transparent;
  border-top: 0.625vw solid transparent;
  border-left: 0.625vw solid #fff;
  border-right: 0.625vw solid transparent;
}

.about .sec03 .hd_bak {
	position:absolute;
	top:50%;
	right: 10.9375vw;
	transform: translateY(-50%);
	height: auto;
	font-size:0px;
}

.about .sec03 .hd_bak::after {
	content: "";
	display: block;
	position: absolute;
	top:0;
	left:50%;
	transform: translateX(-50%);
	width: 18.4895vw;
	height: 12.2395vw;
	background: url('../img/sub/sec_hd_bak.svg') no-repeat center / cover;
	opacity:.6;
}

.about .sec03 .hd_bak .char {
	position: relative;
	width: 4.375vw;
	height: auto;
	z-index: 2;
	animation: char-updown-ani 3s ease-in-out infinite forwards;
}

.about .sec03 .bd-pc {
	display: block;
}

.about .sec03 .bd-mo {
	display: none;
}

.about .sec03 .list {
	display: flex;
	flex-wrap: wrap;
	margin:-1.5625vw -0.5208vw;
}

.about .sec03 .list li {
	flex:1 1 25%;
	max-width:25%;
	padding:1.5625vw 0.5208vw;
}

.about .sec03 .card {
	position:relative;
	padding:1.0416vw;
	border-radius:20px;
	transition: all .3s ease;
}

.about .sec03 .hover {
	position:relative;
	margin-bottom:1.0416vw;
}

.about .sec03 .hover_con {
	position:relative;
	z-index:10;
	opacity:0;
	visibility: hidden;
	transform: translateY(1.0416vw);
	transition:all 0s ease;
}

.about .sec03 .hover_img {
	position:absolute;
	top:0;
	left:50%;
	transform: translateX(-50%);
	width:20.4vw;
	height:19.79vw;
}

.about .sec03 .img {
	position: relative;
	font-size:0px;
	margin-bottom:1.0416vw;
	text-align: center;
}

.about .sec03 .img-speech {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: absolute;
	top:-1.5625vw;
	right: -1.5625vw;
	height: 2.8125vw;
	padding: 0px 1.0416vw;
	border-radius:10px;
	background-color: #e5e5e5;
	font-size: 0.8333vw;
	font-weight:700;
}

.about .sec03 .img img {
	width:28.28125vw;
}

.about .sec03 .tool {
	padding:1.0416vw;
	border-radius:20px;
	background-color: #fff;
}

.about .sec03 .tool .tit {
	font-size:0.9vw;
	margin-bottom:0.78125vw;
}

.about .sec03 .tool .info {
	display: flex;
	flex-wrap: wrap;
	margin:-0.2604vw -0.15625vw;
}

.about .sec03 .tool .info dd {
	flex:1 1 16.6667%;
	max-width:16.6667%;
	padding:0.2604vw 0.15625vw;
}

.about .sec03 .tool .info_ico {
	position: relative;
	width: 100%;
	height:0;
	padding-top:100%;
	border-radius:15px;
	overflow: hidden;
}

.about .sec03 .tool .info_ico img {
	display: block;
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height:100%;
}

.about .sec03 .con {
	display: flex;
	align-items: center;
	gap:12px;
	width:100%;
	padding: 1.0416vw;
	border-radius:20px;
	background-color: #fff;
}

.about .sec03 .icon {
	display: block;
	width:3.125vw;
	height:3.125vw;
	padding: 0.625vw;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius:50%;
	transition: all .5s ease;
}

.about .sec03 .name {
	font-size:1.25vw;
}

.about .sec03 .name span {
	display: block;
	margin-bottom:6px;
	font-size:0.9vw;
	line-height:1;
}

.about .sec03 .card01,
.about .sec03 .icon01 {
	background-color: #4d4d4d;
}

.about .sec03 .card02,
.about .sec03 .icon02 {
	background-color: #7b46f8;
}

.about .sec03 .card03,
.about .sec03 .icon03 {
	background-color: #f15413;
}

.about .sec03 .card04,
.about .sec03 .icon04 {
	background-color: #8a2ae3;
}

.about .sec03 .card05,
.about .sec03 .icon05 {
	background-color: #f7ea88;
}

.about .sec03 .card06,
.about .sec03 .icon06 {
	background-color: #eca7a7;
}

.about .sec03 .card07,
.about .sec03 .icon07 {
	background-color: #00b1d8;
}

.about .sec03 .card08,
.about .sec03 .icon08 {
	background-color: #ef82ed;
}

.about .sec03 .card09,
.about .sec03 .icon09 {
	background-color: #1fb671;
}

.about .sec03 .card10,
.about .sec03 .icon10 {
	background-color: #3a6a53;
}

.about .sec03 .card11,
.about .sec03 .icon11 {
	background-color: #f6adca;
}

.about .sec03 .card12,
.about .sec03 .icon12 {
	background-color: #ff7800;
}

.about .sec03 .card13,
.about .sec03 .icon13 {
	background-color: #34adc8;
}

.about .sec03 .card14,
.about .sec03 .icon14 {
	background-color: #3744e6;
}

.about .sec03 .card15,
.about .sec03 .icon15 {
	background-color: #ff8989;
}

.about .sec03 .card16,
.about .sec03 .icon16 {
	background-color: #508265;
}

.about .sec03 .card17,
.about .sec03 .icon17 {
	background-color: #7e8b98;
}

.about .sec03 .card18,
.about .sec03 .icon18 {
	background-color: #879f92;
}

.about .sec03 .card19,
.about .sec03 .icon19 {
	background-color: #574537;
}

.about .sec04 {
	position:relative;
	width: 100%;
	padding:0px 10.4166vw;
	background: url('../img/sub/about/sec04_bak.png') no-repeat center / cover;
}

.about .sec04 .din {
	display: flex;
	align-items: flex-start;
	position:relative;
	z-index:2;
}

.about .sec04 .lt {
	display: flex;
	align-items: center;
	position: sticky;
	top:0;
	left: 0;
	width:40%;
	min-height: 100vh;
	z-index:5;
}

.about .sec04 .rt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width:60%;
	min-height: 100vh;
	padding:15.625vw 0px;
}

.about .sec04 .txt i {
	display: block;
	width:3.125vw;
	height: 3.125vw;
	background: url('../img/sub/about/sec04_pin.png') no-repeat center / cover;
}

.about .sec04 .txt .t01 {
	font-size:4.27vw;
	margin:2.0833vw 0px 2.6041vw;
}

.about .sec04 .txt .t02 {
	font-size:1vw;
	line-height:1.5;
}

.about .sec04 .item {
	padding: 3.125vw 0px;
	opacity:0.2;
	transition:opacity .4s ease;
}

.about .sec04 .item-txt {
	position: relative;
	padding-left: 1.25vw;
	font-size: 1.875vw;
	line-height:1.5;
}

.about .sec04 .item-txt::before {
	content: "";
	display: block;
	position: absolute;
	top:50%;
	left:0;
	transform: translateY(-50%);
	width: 3px;
	height:0px;
	background-color: #c4b8f2;
	transition: height 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

.about .sec04 .item.active {
	opacity:1;
}

.about .sec04 .item.active .item-txt::before {
	height: calc(100% - 10px);
}


.about .sec05 {
	padding: 7.8125vw 0px;
}

@media screen and (min-width:1025px) {
	.about .sec03 li:hover .hover_con {
		opacity: 1;
		visibility: visible;
		transform: translateY(0px);
		transition:all .6s ease;
	}

	.about .sec03 li:hover .hover_img {
		opacity: 0;
		visibility:hidden;
		transition:all .1s ease;
	}

	.about .sec03 li:hover .card01,
	.about .sec03 li:hover .icon01 {
		background-color: #363636;
	}

	.about .sec03 li:hover .card02,
	.about .sec03 li:hover .icon02 {
		background-color: #5631ae;
	}

	.about .sec03 li:hover .card03,
	.about .sec03 li:hover .icon03 {
		background-color: #c1430f;
	}

	.about .sec03 li:hover .card04,
	.about .sec03 li:hover .icon04 {
		background-color: #611d9f;
	}

	.about .sec03 li:hover .card05,
	.about .sec03 li:hover .icon05 {
		background-color: #cfbe42;
	}

	.about .sec03 li:hover .card06,
	.about .sec03 li:hover .icon06 {
		background-color: #d08e8e;
	}

	.about .sec03 li:hover .card07,
	.about .sec03 li:hover .icon07 {
		background-color: #008ead;
	}

	.about .sec03 li:hover .card08,
	.about .sec03 li:hover .icon08 {
		background-color: #bf68be;
	}

	.about .sec03 li:hover .card09,
	.about .sec03 li:hover .icon09 {
		background-color: #19925a;
	}

	.about .sec03 li:hover .card10,
	.about .sec03 li:hover .icon10 {
		background-color: #2e5542;
	}

	.about .sec03 li:hover .card11,
	.about .sec03 li:hover .icon11 {
		background-color: #c58aa2;
	}

	.about .sec03 li:hover .card12,
	.about .sec03 li:hover .icon12 {
		background-color: #d56400;
	}

	.about .sec03 li:hover .card13,
	.about .sec03 li:hover .icon13 {
		background-color: #2a8aa0;
	}

	.about .sec03 li:hover .card14,
	.about .sec03 li:hover .icon14 {
		background-color: #2c36b8;
	}

	.about .sec03 li:hover .card15,
	.about .sec03 li:hover .icon15 {
		background-color: #cc6e6e;
	}

	.about .sec03 li:hover .card16,
	.about .sec03 li:hover .icon16 {
		background-color: #406851;
	}

	.about .sec03 li:hover .card17,
	.about .sec03 li:hover .icon17 {
		background-color: #656f7a;
	}

	.about .sec03 li:hover .card18,
	.about .sec03 li:hover .icon18 {
		background-color: #6c7f75;
	}

	.about .sec03 li:hover .card19,
	.about .sec03 li:hover .icon19 {
		background-color: #46372c;
	}

	.about .sec03 li:hover .img-speech {
		opacity: 1;
		visibility: visible;
	}
}
@media screen and (max-width:1536px) {

}
@media screen and (max-width:1366px) {

}
@media screen and (max-width:1200px) {
	.about {
		padding-top: 68px;
	}

	.about .sec01::after {
		background-position: right center;
	}

	.about .sec01 {
		height: calc((var(--vh, 1vh)*100) - 68px);
		height: calc(100svh - 68px);
	}

	.about .sec01 .bak {
		bottom: -25vw;
	}
}
@media screen and (max-width:1024px) {

}
@media screen and (max-width:768px) {
	.about {
		padding-top: 64px;
	}

	.about .sec01 {
		height: calc((var(--vh, 1vh)*100) - 64px);
		height: calc(100svh - 64px);
		background-color: #fff;
	}

	.about .sec01::after {
		top:unset;
		bottom: 0;
		height: 120vw;
		background-size: 251.4516vw auto;
		background-position: right 22% center;
	}

	.about .sec01 .bak {
		bottom: 2vw;
		width: 100%;
		height: 100vw;
	}

	.about .sec01 .bak-ele {
		width: 100%;
	}

	.about .sec01 .sec-wrap {
		padding-bottom: 18.75vw;
	}

	.about .sec01 .anchor {
		justify-content: unset;
	}

	.about .sec01 .anchor.filled {
		clip-path: circle(200vw at 100% 100%) !important;
	}

	.about .sec01 .about-title {
		width: 100%;
	}

	.about .sec01 .anchor-align-left, .about .sec01 .anchor-align-right {
		flex-direction: column;
	}

	.about .sec01 .anchor-align-left span, .about .sec01 .anchor-align-left em, .about .sec01 .anchor-align-right span, .about .sec01 .anchor-align-right em {
		font-size: 12.5vw;
		line-height:.8;
	}

	.about .sec01 .anchor-align-left {
		margin-bottom: 7.5vw;
	}

	.about .sec01 .anchor-align-right {
		margin-left: auto;
	}

	.about .sec01 .anchor-align-right span {
		justify-content: flex-end;
	}

	.about .sec02 {
		padding:17.5vw 0px 0px;
	}

	.about .sec02 .txt:not(:last-child) {
		padding-bottom:17.5vw;
	}

	.about .sec02 .txt .t01 {
		font-size:7.25vw;
		margin-bottom: 5vw;
	}

	.about .sec02 .txt .t02 {
		font-size: 3.5vw;
	}

	.about .sec02 .char {
		gap:2.5vw;
		top:19.5vw;
	}

	.about .sec02 .char .char-txt {
		width:24.25vw;
		height:11.25vw;
		padding: 1vw 3.375vw 0.8vw;
	}

	.about .sec02 .char .char-txt::after {
		bottom: -1.4vw;
		border-width: 1.5vw  1.25vw 0px 1.25vw;
	}

	.about .sec02 .char .char-txt span {
		font-size:3vw;
	}

	.about .sec02 .char img {
		width: 20.625vw;
		height: 24.125vw;
	}

	.about .sec02 .elem {
		position: relative;
		top:unset;
		left: 50%;
		transform: translateX(-50%);
		width: 100vw;
		height:0;
		padding-top:105vw;
	}

	.about .sec02 .svg01 {
		top:-28.75vw;
		right:-16vw;
		width: 40vw;
		height:40.625vw;
	}

	.about .sec02 .svg02 {
		display: none;
	}
	
	.about .sec02 .svg03 {
		position: absolute;
		top:2vw;
		right: unset;
		bottom: unset;
		left:50%;
		transform: translateX(-50%);
		width:200vw;
		height:200vw;
	}

	.about .sec03 .hd {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap:5vw;
		padding:5vw;
		margin-bottom:3.75vw;
	}

	.about .sec03 .hd_txt {
		gap:5vw;
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	.about .sec03 .hd_txt h2 {
		order: 2;
		width: 100%;
		font-size:7.5vw;
	}

	.about .sec03 .hd_txt span {
		order: 1;
		padding: 2vw 2.5vw;
		font-size: 2.5vw;
	}

	.about .sec03 .hd_txt span::after {
		bottom:-1.6vw;
		border-width:2.5vw;
	}

	.about .sec03 .hd_txt em {
		position: relative;
		z-index:5;
	}

	.about .sec03 .hd_bak {
		position: relative;
		top:unset;
		right: unset;
		transform: none;
	}

	.about .sec03 .hd_bak::after {
		width: 39.5vw;
		height: 26.125vw;
	}

	.about .sec03 .hd_bak .char {
		width: 11.375vw;
	}

	.about .sec03 .bd-pc {
		display:none;
	}

	.about .sec03 .bd-mo {
		display:block;
	}

	.about .sec03 .bd-mo .swiper {
		overflow: visible;
	}

	.about .sec03 .bd-mo .swiper-top {
		margin-bottom: 2vw;
	}

	.about .sec03 .bd-mo .swiper-wrapper {
		-webkit-transition-timing-function:linear !important;
		transition-timing-function:linear !important;
	}

	.about .sec03 .bd-mo .swiper-slide {
		width: calc(50% - 1vw);
		margin-right:2vw;
	}

	.about .sec03 .bd-mo .swiper-slide .con {
		direction: ltr;
		text-align: left;
	}

	.about .sec03 .card {
		padding: 2.5vw;
		border-radius: 12px;
	}

	.about .sec03 .con {
		gap:1.75vw;
		padding: 2vw 1.75vw;
		border-radius: 12px;
	}

	.about .sec03 .icon {
		width:6.25vw;
		height:6.25vw;
	}
	
	.about .sec03 .name {
		font-size:3vw;
	}

	.about .sec03 .name span {
		font-size:2.25vw;
		margin-bottom:2px;
	}


	/* .about .sec03 li {
		flex:1 1 50%;
		max-width:50%; 
	} */

	/* .about .sec03 .card {
		padding: 2.5vw;
		border-radius: 12px;
	}

	.about .sec03 .con {
		gap:1.75vw;
		padding: 2vw 1.75vw;
		border-radius: 12px;
	}

	.about .sec03 .icon {
		width:6.25vw;
		height:6.25vw;
	}
	
	.about .sec03 .name {
		font-size:3vw;
	}

	.about .sec03 .name span {
		font-size:2.25vw;
		margin-bottom:2px;
	}

	.about .sec03 .hover_img {
		position: relative;
		top:unset;
		width: 37.5vw;
		height: 37.5vw;
	}

	.about .sec03 .hover_con {
		display: none;
	}

	.about .sec03 .tool {
		padding: 2vw;
	}

	.about .sec03 .tool .tit {
		font-size: 1.2rem;
	}

	.about .sec03 .tool .info {
		margin:-0.8vw;
	}

	.about .sec03 .tool .info dd {
		padding:0.8vw;
	}

	.about .sec03 .tool .info_ico {
		border-radius:10px;
	} */

	.about .sec04 {
		padding:18.75vw 15px;
		background-position: left 20% center;
	}

	.about .sec04 .din {
		flex-wrap: wrap;
	}

	.about .sec04 .lt {
		position: relative;
		width: 100%;
		min-height: auto;
	}

	.about .sec04 .rt {
		width: 100%;
		min-height: auto;
		padding:0px;
	}

	.about .sec04 .txt {
		margin-bottom:18.75vw;
	}

	.about .sec04 .txt i {
		width: 7.5vw;
		height: 7.5vw;
	}

	.about .sec04 .txt .t01 {
		font-size:10.25vw;
		margin: 5vw 0px 7.5vw;
	}

	.about .sec04 .txt .t02 {
		font-size:3vw;
	}

	.about .sec04 .item {
		padding:0px;
	}

	.about .sec04 .item:not(:last-child) {
		margin-bottom:12.5vw;
	}

	.about .sec04 .item-txt {
		padding-left: 2.5vw;
		font-size:4.5vw;
	}
}
@media screen and (max-width:576px) {

}


/* Portfolio */
.portfolio .sec01 {
	position:relative;
	width:100%;
	height: calc(var(--vh, 1vh)*100);
	height: 100svh;
	/* overflow:hidden; */
}

.portfolio .sec01 .s_set {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.portfolio .sec01 .bak {
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 35vw;
}

.portfolio .sec01 .bak-ani {
	position: absolute;
	top:0;
	right:0;
	width: 100%;
	height: 100%;
	animation: moveShape 18s cubic-bezier(0.455, 0.05, 0.55, 0.95) infinite alternate;	
	z-index: 3;
}

.portfolio .sec01 .bak-ele {
	width:35vw;
	aspect-ratio: 1/1;
	background:linear-gradient(
		rgba(210,171,215,.5) 0%,
		rgba(175,131,221,0.8) 0%,
		rgba(120,40,202, 1) 100%
	);
	border-radius:30% 60% 60% 30% / 30% 40% 60% 60%;
	filter: blur(50px);
	opacity: .3;
	animation: changeShape 6s linear infinite, rotateShape 12s linear infinite;
}


.portfolio .sec01 .texts {
	text-align: center;
	position:relative;
	z-index:5;
}

.portfolio .sec01 .txt {
	display:inline-block;
	position:relative;
	font-size:0px;
}

.portfolio .sec01 .txt:not(:last-child) {
	margin-bottom:3.6458vw;
}

.portfolio .sec01 .txt h2 {
	display:inline-block;
	position: relative;
	font-size: 11.9791vw;
	line-height:.8;
	color:#222;
}

.portfolio .sec01 .txt h2 div {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	clip-path: inset(0px 100% 0px 0px);
}

.portfolio .sec01 .txt .pin {
	display:inline-block;
	position:absolute;
	z-index: 10;
}

.portfolio .sec01 .txt .pin img {
	height: 2.34375vw;
}

.portfolio .sec01 .txt .pin01 {
	top:-1.56vw;
	left:-2.08vw;
	transform: rotate(-15deg);
}

.portfolio .sec01 .txt .pin01 img {
	width:6.19vw;
}

.portfolio .sec01 .txt .pin02 {
	top:-1.56vw;
	left:52%;
	transform: rotate(15deg);
}

.portfolio .sec01 .txt .pin02 img {
	width:5.41vw;
}

.portfolio .sec01 .txt .pin03 {
	right:0px;
	bottom:-1vw;
	transform: rotate(-15deg);
}

.portfolio .sec01 .txt .pin03 img {
	width:5.67vw;
}

.portfolio .sec01 .elements {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	pointer-events: none;
	font-size: 0px;
	z-index:1;
}

.portfolio .sec01 .elements .ele {
	position:absolute;
}

.portfolio .sec01 .elements .ele01 {
	top:1vw;
	left:1vw;
	transform: rotate(-15deg);
}

.portfolio .sec01 .elements .ele01 img {
	width:6.875vw;
	height:6.875vw;
}

.portfolio .sec01 .elements .ele02 {
	top:7vw;
	left: 4.6875vw;	
}

.portfolio .sec01 .elements .ele02 img {
	width:8.125vw;
	height: 7.6vw;
}

.portfolio .sec01 .elements .ele03 {
	top:-5.7291vw;
	right:11.45vw;
	transform: rotate(-15deg);
}

.portfolio .sec01 .elements .ele03 img {
	width:3.22vw;
	height: 3.17vw;
}

.portfolio .sec01 .elements .ele04 {
	top:-3.125vw;
	right:6.77vw;
}

.portfolio .sec01 .elements .ele04 img {	
	width:3.33vw;
	height: 3.125vw;
}

.portfolio .sec01 .elements .ele05 {
	top:1vw;
	right:4.53125vw;
	opacity: .8;
}

.portfolio .sec01 .elements .ele05 img {
	width:9.58vw;
	height: 8.22vw;
}

.portfolio .sec01 .elements .ele06 {
	top:15.625vw;
	right:0.6770vw;
	opacity:.8;
}

.portfolio .sec01 .elements .ele06 img {
	width:12.5vw;
	height:15.416667vw;
}

.portfolio .sec01 .elements .ele07 {
	top:7.8125vw;
	right:0.625vw;
	opacity:.8;
}

.portfolio .sec01 .elements .ele07 img {
	width:4.7916vw;
	height:7.7083vw;
}

.portfolio .sec01 .elements .ele08 {
	right:0.625vw; 
	bottom: -9.8958vw;
}

.portfolio .sec01 .elements .ele08 img {
	width:4.11vw;
	height:4.21vw;
}

.portfolio .sec02 {
	padding: 7.8125vw 0px;
}

.portfolio .sec02 .hd {
	position:relative;
	padding:4.16667vw;
	margin-bottom:4.16667vw;
	border-radius:30px;
	background-color: #7828ca;
	overflow:hidden;
}

.portfolio .sec02 .hd_txt {
	display: flex;
	gap:40px;
}

.portfolio .sec02 .hd_txt h2 {
	font-size:3.75vw;
	line-height:0.8;
}

.portfolio .sec02 .hd_txt span {
	display: block;
	position: relative;
	padding:0.8333vw 1.041vw;
	background-color: #fff;
	border-radius: 10px;
	font-size: 1.041vw;
}

.portfolio .sec02 .hd_txt span::after {
	content: "";
	display: block;
	position: absolute;
	left: 6%;
	bottom: -0.5vw;
	border-bottom: 0.625vw solid transparent;
  border-top: 0.625vw solid transparent;
  border-left: 0.625vw solid #fff;
  border-right: 0.625vw solid transparent;
}

.portfolio .sec02 .hd_bak {
	position:absolute;
	top:50%;
	right: 10.9375vw;
	transform: translateY(-50%);
	height: auto;
	font-size:0px;
}

.portfolio .sec02 .hd_bak::after {
	content: "";
	display: block;
	position: absolute;
	top:0;
	left:50%;
	transform: translateX(-50%);
	width: 18.4895vw;
	height: 12.2395vw;
	background: url('../img/sub/sec_hd_bak.svg') no-repeat center / cover;
	opacity:.6;
}

.portfolio .sec02 .hd_bak .char {
	position: relative;
	width: 4.375vw;
	height: auto;
	z-index: 2;
	animation: char-updown-ani 3s ease-in-out infinite forwards;
}

.portfolio .sec03 {
	padding-bottom: 9.375vw;
}

.portfolio-view .img {
	font-size: 0px;
}

@media screen and (max-width:1536px) {

}
@media screen and (max-width:1366px) {

}
@media screen and (max-width:1200px) {
	.portfolio .sec01 {
		height: calc(var(--vh, 1vh)*100 - 68px);
		height: calc(100svh - 68px);
	}
}
@media screen and (max-width:1024px) {

}
@media screen and (max-width:768px) {
	.portfolio .sec01 {
		height: auto;
		/* padding: 41.4910vh 0px; */
		height: calc(var(--vh, 1vh)*100 - 64px);
		height: calc(100svh - 64px);
	}

	.portfolio .sec01 .s_set {
		position: relative;
	}

	.portfolio .sec01 .txt:not(:last-child) {
		margin-bottom: 5vw;
	}

	.portfolio .sec01 .txt h2 {
		font-size: 14.25vw;
	}

	.portfolio .sec01 .txt .pin01 {
		top:-4vw;
		left:-5vw;
	}

	.portfolio .sec01 .txt .pin01 img {
		width: 14vw;
		height: auto;
	}

	.portfolio .sec01 .txt .pin02 {
		top:-4vw;
		left: 50%;
	}

	.portfolio .sec01 .txt .pin02 img {
		width: 12vw;
		height: auto;
	}

	.portfolio .sec01 .txt .pin03 {
		right: -3vw;
		bottom: -3vw;
	}

	.portfolio .sec01 .txt .pin03 img {
		width:12vw;
		height: auto;
	}

	.portfolio .sec01 .elements .ele01 {
		top:-26vw;
		left: 16vw;
	}

	.portfolio .sec01 .elements .ele01 img {
		width: 11vw;
		height: auto;
	}

	.portfolio .sec01 .elements .ele02 {
		top:-18vw;
		left: 3vw;
	}

	.portfolio .sec01 .elements .ele02 img {
		width: 13vw;
		height: auto;
	}

	.portfolio .sec01 .elements .ele03 {
		top:-31vw;
		right: 18vw;
	}

	.portfolio .sec01 .elements .ele03 img {
		width: 6vw;
		height: auto;
	}

	.portfolio .sec01 .elements .ele04 {
		top:-25vw;
		right:9vw;
	}

	.portfolio .sec01 .elements .ele04 img {
		width:7.8vw;
		height: auto;
	}

	.portfolio .sec01 .elements .ele05 {
		top:-18vw;
		right:7vw;
	}

	.portfolio .sec01 .elements .ele05 img {
		width:19vw;
		height: auto;
	}

	.portfolio .sec01 .elements .ele06 {
		top:unset;
		bottom: -33vw;
		right: 26vw;
		transform: rotate(45deg);
	}

	.portfolio .sec01 .elements .ele06 img {
		width: 26vw;
		height: auto;
	}

	.portfolio .sec01 .elements .ele07 {
		top: unset;
		bottom: -20vw;
		right: 9vw;
		transform: rotate(45deg);
	}

	.portfolio .sec01 .elements .ele07 img {
		width:9.8vw;
		height: auto;
	}

	.portfolio .sec01 .elements .ele08 {
		top:-6vw;
		right: 0vw;
		bottom: unset;
	}

	.portfolio .sec01 .elements .ele08 img {
		width: 9vw;
		height: auto;
	}

	/* .portfolio .sec01 .txt img {
		height:3vw;
	}

	.portfolio .sec01 .txt .pin img {
		height: 4.34375vw;	
	}

	.portfolio .sec01 .txt .pin01 {
		top:-3vw;
		left:-5vw;
	}

	.portfolio .sec01 .txt .pin01 img {
		width:14.25vw;
	}

	.portfolio .sec01 .txt .pin02 {
		top:-2vw;
		left:51%;
	}

	.portfolio .sec01 .txt .pin02 img {
		width:8.41vw;
	}

	.portfolio .sec01 .txt .pin03 {
		right:-2%;
		bottom:-1vw;
	}

	.portfolio .sec01 .txt .pin03 img {
		width:8.67vw;
	}

	.portfolio .sec01 .elements .ele01 {
		top: 16vw;
    left: 5vw;
	}

	.portfolio .sec01 .elements .ele01 img {
		width: 8.875vw;
    height: 8.875vw;
	}

	.portfolio .sec01 .elements .ele02 {
		top: 28vw;
    left: 7.6875vw;
	}

	.portfolio .sec01 .elements .ele02 img {
		width: 10.125vw;
    height: 9.6vw;
	}

	.portfolio .sec01 .elements .ele03 {
		top: 9.2709vw;
    right: 11.45vw;
	}

	.portfolio .sec01 .elements .ele03 img {
		width: 7.22vw;
    height: 7.17vw;
	}

	.portfolio .sec01 .elements .ele04 {
		top: 17.875vw;
    right: 6.77vw;
	}

	.portfolio .sec01 .elements .ele04 img {
		width: 7.33vw;
    height: 7.125vw;
	}

	.portfolio .sec01 .elements .ele05 {
		top: 28vw;
    right: 14.53125vw;	
	}

	.portfolio .sec01 .elements .ele05 img {
		width: 12.58vw;
    height: 11.22vw;
	}

	.portfolio .sec01 .elements .ele06 {
		top:unset;
		bottom: 25vw;
		right: 4.677vw;
	}

	.portfolio .sec01 .elements .ele06 img {
		width: 15.5vw;
    height: 18.416667vw;
	}

	.portfolio .sec01 .elements .ele07 {
		top: 38.8125vw;
		right: 7.625vw;
	}

	.portfolio .sec01 .elements .ele07 img {
		width: 5.7916vw;
    height: 8.7083vw;
	}

	.portfolio .sec01 .elements .ele08 {
		right: unset;
		left: 5vw;
		bottom: 29.1042vw;
	}

	.portfolio .sec01 .elements .ele08 img {
		width: 7.11vw;
    height: 7.21vw;
	} */



	.portfolio .sec02 .hd {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap:5vw;
		padding:5vw;
		margin-bottom:3.75vw;
	}

	.portfolio .sec02 .hd_txt {
		gap:5vw;
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	.portfolio .sec02 .hd_txt h2 {
		order: 2;
		width: 100%;
		font-size:7.5vw;
	}

	.portfolio .sec02 .hd_txt span {
		order: 1;
		padding: 2vw 2.5vw;
		font-size: 2.5vw;
	}

	.portfolio .sec02 .hd_txt span::after {
		left: 50%;
		bottom:-1.6vw;
		transform: translateX(-50%);
		border-width:2.5vw;
	}

	.portfolio .sec02 .hd_txt em {
		position: relative;
		z-index:5;
	}

	.portfolio .sec02 .hd_bak {
		position: relative;
		top:unset;
		right: unset;
		transform: none;
	}

	.portfolio .sec02 .hd_bak::after {
		width: 39.5vw;
		height: 26.125vw;
	}

	.portfolio .sec02 .hd_bak .char {
		width:11.375vw;
	}
}
@media screen and (max-width:576px) {

}


/* Service */
.service .sec01 {
	position:relative;
	width:100%;
	height: calc(var(--vh, 1vh)*100);
	height: 100svh;
	overflow:hidden;
}

.service .sec01 .s_set {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.service .sec01 .bak {
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 35vw;
}

.service .sec01 .bak-ani {
	position: absolute;
	top:0;
	right:0;
	width: 100%;
	height: 100%;
	animation: moveShape 18s cubic-bezier(0.455, 0.05, 0.55, 0.95) infinite alternate;	
	z-index: 3;
}

.service .sec01 .bak-ele {
	width:35vw;
	aspect-ratio: 1/1;
	background:linear-gradient(
		rgba(210,171,215,.5) 0%,
		rgba(175,131,221,0.8) 0%,
		rgba(120,40,202, 1) 100%
	);
	border-radius:30% 60% 60% 30% / 30% 40% 60% 60%;
	filter: blur(50px);
	opacity: .3;
	animation: changeShape 6s linear infinite, rotateShape 12s linear infinite;
}

.service .sec01 .texts {
	text-align: center;
	position:relative;
	/* padding:14.5833vw 0px; */
	z-index:5;
}

.service .sec01 .txt {
	display:inline-block;
	position:relative;
	font-size:0px;
}

.service .sec01 .txt:not(:last-child) {
	margin-bottom:3.6458vw;
}

.service .sec01 .txt h2 {
	display:inline-block;
	position: relative;
	font-size: 11.9791vw;
	line-height:.8;
	color:#222;
}

.service .sec01 .txt h2 div {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	clip-path: inset(0px 100% 0px 0px);
}

.service .sec01 .txt .pin {
	display:inline-block;
	position:absolute;
	z-index:10;
}

.service .sec01 .txt img {
	height: 2.34375vw;
}

.service .sec01 .txt .pin01 {
	top:-1.56vw;
	left:-2.5vw;
	transform: rotate(-15deg);
}

.service .sec01 .txt .pin01 img {
	width:10.4166vw;
}

.service .sec01 .txt .pin02 {
	top:-1.5vw;
	right:6%;
}

.service .sec01 .txt .pin02 img {
	width:10.4166vw;
}

.service .sec01 .txt .pin03 {
	right:27.34%;
	bottom:-1vw;
	transform: rotate(15deg);
}

.service .sec01 .txt .pin03 img {
	width:7.8125vw;
}

.service .sec01 .txt .pin04 {
	left: 6%;
	bottom: -1.5vw;
	transform: rotate(10deg);
}

.service .sec01 .txt .pin04 img {
	width:8.8541vw;
}

.service .sec01 .txt .pin05 {
	top:-2.1vw;
	left:28%;
	transform: rotate(-10deg);
}

.service .sec01 .txt .pin05 img {
	width: 8.8541vw;
}

.service .sec01 .txt .pin06 {
	right: -5%;
	bottom: -1.5vw;
	/* top:-2.1vw;
	left:28%; */
	transform: rotate(-10deg);
}

.service .sec01 .txt .pin06 img {
	width: 9.375vw;
}

.service .sec01 .elements {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	pointer-events: none;
	font-size: 0px;
	z-index:1;
}

.service .sec01 .elements .ele {
	position:absolute;
}

.service .sec01 .elements .ele01 {
	left:5.2083vw;
	bottom:-5.2083vw;
}

.service .sec01 .elements .ele01 img {
	width:14.5833vw;
	height:9.375vw;
}

.service .sec01 .elements .ele02 {
	top:3.125vw;
	right: 5.2083vw;	
}

.service .sec01 .elements .ele02 img {
	width:9.4791vw;
	height: 6.6145vw;
}

.service .sec02 {
	position: relative;
	padding: 7.8125vw 0px 9.8125vw;
	/* padding:7.8125vw 0px; */
}

.service .sec02 .s_set {
	position: relative;
}

.service .sec02 .item-group {
	position: relative;
}

.service .sec02 .pin-spacer {
	pointer-events: none;
}

.service .sec02 .item-wrap {
	position: relative;
}

.service .sec02 .item {
	position: relative;
	display: flex;
	gap:7.2916vw;
	width: 100%;
	padding: 0px 2vw;
	/* position: sticky; */
	background-color: #2f2f2f;
	border:1px solid #4d4d4d;
	border-radius:20px;
	transition: all .3s ease;
}

.service .sec02 .item .cursor {
	display: block;
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height:100px;
	cursor: pointer;
	pointer-events: auto;
}

.service .sec02 .item .cursor01 {
	z-index: 500;
}

.service .sec02 .item .cursor02 {
	z-index: 400;
}

.service .sec02 .item .cursor03 {
	z-index: 300;
}

.service .sec02 .item .cursor04 {
	z-index: 200;
}

.service .sec02 .item .cursor05 {
	z-index: 100;
}

.service .sec02 .item .lt {
	width:71%;
	margin-top:2vw;
}

.service .sec02 .item .rt {
	width:29%;
	margin:2vw 0px 2vw;
}

.service .sec02 .txt .t01 {
	display: flex;
	align-items: center;
	gap:1vw;
	color:#a6a6a6;
}

.service .sec02 .txt .t01 h2 {
	display: flex;
	gap:1vw;
	font-size: 2.5vw;
	line-height:.8;
	font-weight:700;
	transition: all .3s ease;
}

.service .sec02 .txt .t01 em {
	font-size: 0.9375vw;
	line-height: 1;
	transition: all .3s ease;
}

.service .sec02 .txt .t01 span {
	font-size: 1.25vw;
	transition: all .3s ease;
}

.service .sec02 .txt .t02 {
	font-size: 1.1458vw;
	margin:2.4vw 0px 2vw;
}

.service .sec02 .txt .t03 {
	font-size:1.041vw;
	line-height:1.5;
}

.service .sec02 .txt .t04 {
	font-size: 0.9375vw;
	line-height:1.7;
	margin-top: 2vw;
}

.service .sec02 .info {
	display: flex;
	gap:0.5208vw;
	margin-top: 2vw;
}

.service .sec02 .info dd {
	flex:1 1;
}

.service .sec02 .info .card {
	position: relative;
	padding: 1.041vw;
	background-color: #4c4c4c;
	border-radius:10px;
}

.service .sec02 .info em {
	display: block;
	position: absolute;
	top:0.5208vw;
	right: 0.5208vw;
	font-size: 0.7291vw;
}

.service .sec02 .info p {
	font-size: 0.9375vw;
}

.service .sec02 .info p span {
	display: inline-block;
	font-size: 0.7291vw;
	margin-bottom:4px;
}

.service .sec02 .caution {
	display: inline-block;
	margin-top: 0.5208vw;
	font-size: 0.7291vw;
	color:#a6a6a6;
}

.service .sec02 .thumb {
	position: relative;
	width: 100%;
	height:0;
	padding-top:100%;
	background-color: #000;
	border-radius:20px;
	overflow: hidden;
}

.service .sec02 .thumb video {
	display: block;
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height:100%;
	object-fit: cover;
}

.service .sec03 .hd {
	position:relative;
	padding:4.16667vw;
	margin-bottom:4.16667vw;
	border-radius:30px;
	background-color: #7828ca;
	overflow:hidden;
}

.service .sec03 .hd_txt {
	display: flex;
	gap:40px;
}

.service .sec03 .hd_txt h2 {
	font-size:3.75vw;
	line-height:0.8;
}

.service .sec03 .hd_txt span {
	display: block;
	position: relative;
	padding:0.8333vw 1.041vw;
	background-color: #fff;
	border-radius: 10px;
	font-size: 1.041vw;
}

.service .sec03 .hd_txt span::after {
	content: "";
	display: block;
	position: absolute;
	left: 6%;
	bottom: -0.5vw;
	border-bottom: 0.625vw solid transparent;
  border-top: 0.625vw solid transparent;
  border-left: 0.625vw solid #fff;
  border-right: 0.625vw solid transparent;
}

.service .sec03 .hd_bak {
	position:absolute;
	top:50%;
	right: 10.9375vw;
	transform: translateY(-50%);
	height: auto;
	font-size:0px;
}

.service .sec03 .hd_bak::after {
	content: "";
	display: block;
	position: absolute;
	top:0;
	left:50%;
	transform: translateX(-50%);
	width: 18.4895vw;
	height: 12.2395vw;
	background: url('../img/sub/sec_hd_bak.svg') no-repeat center / cover;
	opacity:.6;
}

.service .sec03 .hd_bak .char {
	position: relative;
	width: 4.375vw;
	height: auto;
	z-index: 2;
	animation: char-updown-ani 3s ease-in-out infinite forwards;
}

.service .sec03 ul {
	display: flex;
	flex-wrap: wrap;
	gap:2.6041vw 0px;
}

.service .sec03 li {
	flex:1 1 16.6667%;
	max-width:16.6667%;
}

.service .sec03 .img {
	position: relative;
	text-align: center;
	font-size: 0px;
}

.service .sec03 .img img {
	transition: all .3s ease;
}

.service .sec03 .img img.hover {
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	opacity:0;
}

.service .sec04 {
	padding:7.8125vw 0px 9.375vw;
}


@media screen and (min-width:1281px) {
	.service .sec02 .item-wrap.active .item {
		background-color: #424242;
	}

	.service .sec02 .item-wrap.active .item01 .txt .t01 h2 {
		color:#7b46f8;
	}

	.service .sec02 .item-wrap.active .item02 .txt .t01 h2 {
		color:#fa51a2;
	}

	.service .sec02 .item-wrap.active .item03 .txt .t01 h2 {
		color:#34adc8;
	}

	.service .sec02 .item-wrap.active .item04 .txt .t01 h2 {
		color:#903ae8;
	}

	.service .sec02 .item-wrap.active .item05 .txt .t01 h2 {
		color:#f58466;
	}

	.service .sec02 .item-wrap.active .txt .t01 span {
		color:#fff;
	}

}
@media screen and (min-width:1201px) {
	.service .sec03 li:hover img {
		opacity: 0;
		/* visibility: visible; */
	}


	.service .sec03 li:hover img.hover {
		opacity: 1;
		/* visibility: visible; */
	}
}
@media screen and (max-width:1536px) {

}
@media screen and (max-width:1366px) {

}
@media screen and (max-width:1280px) {
	.service .sec02 .item-wrap:not(:last-child) {
		margin-bottom:2vw;
	}
}
@media screen and (max-width:1200px) {
	.service .sec01 {
		height: calc(var(--vh, 1vh)*100 - 68px);
		height: calc(100svh - 68px);
	}
}
@media screen and (max-width:1024px) {

}
@media screen and (max-width:768px) {
	.service .sec01 {
		height: calc(var(--vh, 1vh)*100 - 64px);
		height: calc(100svh - 64px);
	}

	.service .sec01 .txt:not(:last-child) {
		margin-bottom: 5vw;
	}

	.service .sec01 .txt h2 {
		font-size: 14.75vw;
	}

	.service .sec01 .txt img {
		height: 3vw;
	}

	.service .sec01 .txt .pin01 {
		top:-2.3vw;
		left:-4.75vw;
	}

	.service .sec01 .txt .pin01 img {
		width:15.25vw;
	}

	.service .sec01 .txt .pin02 {
		top:-2.5vw;
	}

	.service .sec01 .txt .pin02 img {
		width:13.75vw;
	}

	.service .sec01 .txt .pin03 {
		right:26.34%;
		bottom:-2.5vw;
	}

	.service .sec01 .txt .pin03 img {
		width:11.25vw;
	}

	.service .sec01 .txt .pin04 {
		bottom: -2.5vw;
	}

	.service .sec01 .txt .pin04 img {
		width:12.5vw;
	}

	.service .sec01 .txt .pin05 {
		top:-2.5vw;
		left:27%;
	}

	.service .sec01 .txt .pin05 img {
		width:12.5vw;
	}

	.service .sec01 .txt .pin06 {
		right: -5%;
		bottom: -2.2vw;
	}

	.service .sec01 .txt .pin06 img {
		width: 13.125vw;
	}

	.service .sec01 .elements .ele01 {
		left: -3vw;
		bottom: -10vw;
	}

	.service .sec01 .elements .ele01 img {
		width: 18.125vw;
		height: 11.75vw;
	}

	.service .sec01 .elements .ele02 {
		top:3.5vw;
		right: -2vw;
		transform: rotate(-15deg);
	}

	.service .sec01 .elements .ele02 img {
		width: 11vw;
		height: 8.25vw;
	}

	.service .sec02 .item-group {
		display: flex;
		flex-direction: column;
		gap:7.5vw;
	}

	.service .sec02 .item-wrap:not(:last-child) {
		margin-bottom: 0px;
	}

	.service .sec02 .item {
		flex-direction: column;
		gap:7.5vw;
		padding: 5vw 3.75vw;
	}

	.service .sec02 .item .lt {
		width: 100%;
		margin:0px;
	}

	.service .sec02 .item .rt {
		width: 100%;
		margin:0px;
	}

	.service .sec02 .txt .t01 {
		flex-wrap: wrap;
		gap:3.5vw;
		position: relative;
		padding-left: 6.25vw;
	}

	.service .sec02 .txt .t01 h2 {
		gap:0px;
		font-size: 6.5vw;
		line-height:1.15;
	}

	.service .sec02 .txt .t01 em {
		display: block;
		position: absolute;
		top:1.25vw;
		left:0;
		font-size: 2.5vw;
	}

	.service .sec02 .txt .t01 span {
		display: block;
		width: 100%;
		font-size: 4vw;
	}

	.service .sec02 .txt .t02 {
		font-size:3.5vw;
		line-height:1.35;
		margin: 6.25vw 0px 5vw;
	}

	.service .sec02 .txt .t03 {
		font-size: 3vw;
		line-height: 1.55;
	}

	.service .sec02 .txt .t03 br {
		display: none;
	}

	.service .sec02 .txt .t04 {
		font-size:2.75vw;
		line-height:1.55;
		margin-top:5vw;
	}

	.service .sec02 .info {
		flex-wrap: wrap;
		gap:1.25vw;
	}

	.service .sec02 .info dd {
		flex:1 1 calc(50% - 1.25vw);
		max-width: 50%;
	}

	.service .sec02 .info em {
		top:1.125vw;
		right: 0.875vw;
		font-size: 2vw;
	}

	.service .sec02 .info .card {
		padding:3vw 2.5vw 3.3vw;
	}

	.service .sec02 .info p {
		font-size: 3vw;
	}

	.service .sec02 .info p span {
		font-size: 2.25vw;
	}

	.service .sec02 .thumb {
		padding-top: 46.58%;
	}

	.service .sec02 .caution {
		font-size:2vw;
		margin-top: 1.25vw;
	}

	.service .sec02 .item01 .txt .t01 h2 {
		color:#7b46f8;
	}

	.service .sec02 .item02 .txt .t01 h2 {
		color:#fa51a2;
	}

	.service .sec02 .item03 .txt .t01 h2 {
		color:#34adc8;
	}

	.service .sec02 .item04 .txt .t01 h2 {
		color:#903ae8;
	}

	.service .sec02 .item05 .txt .t01 h2 {
		color:#f58466;
	}

	.service .sec02 .txt .t01 span {
		color:#fff;
	}

	.service .sec03 .hd {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap:5vw;
		padding:5vw;
		margin-bottom:3.75vw;
	}

	.service .sec03 .hd_txt {
		gap:5vw;
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	.service .sec03 .hd_txt h2 {
		order: 2;
		width: 100%;
		font-size:7.5vw;
	}

	.service .sec03 .hd_txt span {
		order: 1;
		padding: 2vw 2.5vw;
		font-size: 2.5vw;
	}

	.service .sec03 .hd_txt span::after {
		bottom:-1.6vw;
		border-width:2.5vw;
	}

	.service .sec03 .hd_txt em {
		position: relative;
		z-index:5;
	}

	.service .sec03 .hd_bak {
		position: relative;
		top:unset;
		right: unset;
		transform: none;
	}

	.service .sec03 .hd_bak::after {
		width: 39.5vw;
		height: 26.125vw;
	}

	.service .sec03 .hd_bak .char {
		width:11.375vw;
	}

	.service .sec03 ul {
		gap:6.25vw 0px;
	}

	.service .sec03 li {
		flex:1 1 33.33%;
		max-width:33.33%;
	}

	.service .sec03 img {
		width: 30.75vw;
		height: 7.177vw;
	}
}
@media screen and (max-width:576px) {

}


/* Contact */
.contact .sec01 {
	position:relative;
	width:100%;
	height: calc(var(--vh, 1vh)*100);
	height: 100svh;
	background-color: #191919;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
}

.contact .sec01 .s_set {
	display: flex;
	align-items: center;
	width:100%;
	height:100%;
}

.contact .sec01 .bak {
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 35vw;
}

.contact .sec01 .bak-ani {
	position: absolute;
	top:0;
	right:0;
	width: 100%;
	height: 100%;
	animation: moveShape 18s cubic-bezier(0.455, 0.05, 0.55, 0.95) infinite alternate;	
	z-index: 3;
}

.contact .sec01 .bak-ele {
	width:35vw;
	aspect-ratio: 1/1;
	background:linear-gradient(
		rgba(210,171,215,.5) 0%,
		rgba(175,131,221,0.8) 0%,
		rgba(120,40,202, 1) 100%
	);
	border-radius:30% 60% 60% 30% / 30% 40% 60% 60%;
	filter: blur(50px);
	opacity: .3;
	animation: changeShape 6s linear infinite, rotateShape 12s linear infinite;
}

.contact .sec01 .txt {
	position: relative;
	z-index:10;
}

.contact .sec01 .txt .t01 {
	font-size: 7.81vw;
	line-height: 1;
	margin-bottom: 4.16667vw;
}

.contact .sec01 .txt .t02 {
	position: relative;
	font-size: 2.18vw;
	color:#747474;
	line-height:1.5;
}

.contact .sec01 .txt .t02 em {
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	clip-path: inset(0px 100% 0px 0px);
}

.contact .sec01 .txt .t03 {
	font-size:1vw;
	line-height: 1.5;
	margin-top: 2.604vw;
}

.contact .sec01 .img {
	position: absolute;
	top: 50%;
	right: 11.4583%;
	transform: translateY(-50%);
}

.contact .sec01 .img::after {
	content: "";
	display: block;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	width: 37.7604vw;
	height: 24.9479vw;
	background: url('../img/sub/contact/sec01_bak.svg') no-repeat center / cover;
	opacity:.6;
	z-index: 1;
}

.contact .sec01 .img img {
	display: block;
	position: relative;
	width: 14.375vw;
	height:20.2604vw;
	z-index: 5;
	animation: char-updown-ani 3s ease-in-out infinite forwards;
}

.contact .sec02 {
	padding:7.8125vw 0px 9.375vw;
}

.contact .sec02 .item {
	border-bottom: 1px solid #626262;
}

.contact .sec02 .item01 {
	padding-bottom: 5.208vw;
}

.contact .sec02 .item02,
.contact .sec02 .item03 {
	padding: 5.208vw 0px;
}

.contact .sec02 .item-hd h2 {
	font-size: 7.81vw;
	line-height:0.8;
	margin-bottom:3.125vw;
}

.contact .sec02 .item-hd p {
	font-size: 3vw;
	margin-bottom:4.16667vw;
}

@media screen and (max-width:1536px) {

}
@media screen and (max-width:1366px) {

}
@media screen and (max-width:1200px) {

}
@media screen and (max-width:1024px) {

}
@media screen and (max-width:768px) {
	.contact .sec01 {
		border-bottom-left-radius: 20px;
		border-bottom-right-radius: 20px;
	}

	.contact .sec01 .txt {
		margin-bottom:12vw;
	}

	.contact .sec01 .txt .t01 {
		font-size: 11vw;
	}

	.contact .sec01 .txt .t02 {
		font-size:4vw;
		/* color:#fff; */
	}

	.contact .sec01 .txt .t03 {
		font-size: 2vw;
	}

	.contact .sec01 .img {
		position: relative;
		top:unset;
		right: unset;
		transform: none;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 70%;
		margin:0 auto;
	}

	.contact .sec01 .img::after {
		width:56.7604vw;
		height: 34.9479vw;
		background-size: auto 34.9479vw;
	}

	.contact .sec01 .img img {
		width: 25.375vw;
		height: 31.2604vw;
	}

	.contact .sec02 .item-hd h2 {
		font-size: 11vw;
		margin-bottom: 2.5vw;
	}

	.contact .sec02 .item-hd p {
		font-size:3.5vw;
		margin-bottom:3.75vw;
	}
}
@media screen and (max-width:576px) {

}

