.visual {
	position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
}
.visual:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: url("../images/main_color.svg")no-repeat 0 0 / cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.visual .swiper-container {
	width: 100%;
}
.visual .swiper-slide {
	width: 100%;
	height: 930px;
}
.visual .swiper-slide .box {
	position: absolute;
	top: 110px;
	font-family: 'Cafe24SsurroundAir';
	max-width: 590px;
}
.visual .swiper-slide .box p {
	font-size: 36px;
	margin-bottom: 20px;
}
.visual .swiper-slide .box img {
	width: 500px;
}
.visual .swiper-slide .box .txt {
	margin-top: 80px;
	font-size: 40px;
	line-height: 1.25;
}
.visual .swiper-slide .box .txt strong {
	font-family: 'Cafe24Ssurround';
}
.visual .swiper-slide .img {
	position: absolute;
	top: 0;
	right: -130px;
	width: 810px;
	opacity: 0;
	transition: all .5s;
}
.visual .swiper-slide .td2 {
	transform: translateY(30px);
	opacity: 0;
	transition: all .8s;
}
.visual .swiper-slide .td4 {
	transition-delay: .4s;
	opacity: 0;
	transform: translateY(30px);
	transition: all .8s;
}
.visual .swiper-slide .td6 {
	transition-delay: .6s;
	opacity: 0;
	transform: translateY(30px);
	transition: all .8s;
}
.visual .swiper-slide-active .td2 {
	transition-delay: .2s;
	opacity: 1;
	transform: translateY(0px);
}
.visual .swiper-slide-active .td4 {
	transition-delay: .4s;
	opacity: 1;
	transform: translateY(0px);
}
.visual .swiper-slide-active .td6 {
	transition-delay: .6s;
	opacity: 1;
	transform: translateY(0px);
}
.visual .swiper-slide-active .img {
	right: 0;
	opacity: 1;
	transition-delay: .5s;
}
.visual .swiper-slide .img img {
	width: 100%;
}
.visual .swiper-pagination {
	bottom: 275px;
	left: 0;
	width: auto;
	transition: width .3s;
}
.visual .swiper-pagination-bullet-active {
	width: 200px;
	border-radius: 50px;
}








.gallery {
	background: #F7F7F7;
	padding: 120px 0;
}
.gallery .more_btn {
	position: absolute;
	top: -7px;
	right: 20px;
	font-family: 'SUIT', sans-serif;
	display: block;
	width: 130px;
	height: 57px;
	line-height: 57px;
	text-align: center;
	background: #fff;
	font-size: 20px;
	font-weight: 400;
	border-radius: 50px;
	z-index: 1;
	overflow: hidden;
}
.gallery .more_btn:after {
	position: absolute;
	content: "";
	width: 0;
	height: 100%;
	top: 0;
	right: 0;
	z-index: -1;
	background-color: #1254FF;
	border-radius: 50px;
	transition: all 0.3s ease;
}
.gallery .more_btn:hover {
  color: #fff;
}
.gallery .more_btn:hover:after {
  left: 0;
  width: 100%;
}
.gallery .flex > div {
	position: relative;
	width: calc(25% - 2px);
	margin-right: 2px;
	margin-bottom: 2px;
}
.gallery .flex > div:nth-child(4n) {
	margin-right: 0;
}
.gallery .flex > div a {
	position: relative;
	display: block;
}
.gallery .flex > div a .img {
	overflow: hidden;
}
.gallery .flex > div a .img img {
	width: 100%;
	transition: all .5s;
	transform: scale(1);
}
.gallery .flex > div .info {
	display: table;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(18, 84, 255, 0.8);
	color: #fff;
	text-align: center;
	opacity: 0;
	transition: all .5s;
}
.gallery .flex > div .info .box {
	display: table-cell;
	vertical-align: middle;
}
.gallery .flex > div .info .box strong {
	display: block;
	margin-top: 20px;
	font-size: 20px;
}
.gallery .flex > div .info .box p {
	display: block;
	margin-top: 5px;
}
.gallery .flex > div a:hover .img img {
	transform: scale(1.1);
}
.gallery .flex > div a:hover .info {
	opacity: 1;
}
















@media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1400px) {
	.visual .swiper-slide .img {
		width: 660px;
	}
}
@media screen and (max-width: 1280px) {
	.visual .swiper-slide {
		height: 710px;
	}
	.visual .swiper-slide .box p {
		font-size: 30px;
		margin-bottom: 20px;
	}
	.visual .swiper-slide .box img {
		width: 425px;
	}
	.visual .swiper-slide .box .txt {
		margin-top: 60px;
		font-size: 30px;
	}
	.visual .swiper-slide .img {
		width: 500px;
	}
	.visual .swiper-pagination {
		bottom: 185px;
	}
	
	
	
	
	
}
@media screen and (max-width: 1024px) {
	.visual .swiper-slide {
		height: 630px;
	}
	.visual .swiper-slide .box {
		top: 80px;
	}
	.visual .swiper-slide .box p {
		font-size: 25px;
	}
	.visual .swiper-slide .box img {
		width: 370px;
	}
	.visual .swiper-slide .img {
		width: 390px;
		top: 30px;
		margin-right: -30px;
	}
	.visual .swiper-pagination {
		bottom: 150px;
	}
	.visual .swiper-pagination-bullet {
		width: 10px;
		height: 10px;
	}
	.visual .swiper-pagination-bullet-active {
		width: 200px;
	}
	
	
	
}
@media screen and (max-width: 768px) {
	.visual .swiper-slide {
		height: 540px;
	}
	.visual .swiper-slide .box p {
		font-size: 20px;
	}
	.visual .swiper-slide .box img {
		width: 285px;
	}
	.visual .swiper-slide .box .txt {
		font-size: 20px;
	}
	.visual .swiper-slide .img {
		width: 60%;
		margin-right: -50px;
	}
	
	
	.gallery {
		padding: 60px 0;
	}
	.gallery .flex > div {
		width: calc(33.333% - 2px);
	}
	.gallery .flex > div:nth-child(4n) {
		margin-right: 2px;
	}
	.gallery .flex > div:nth-child(3n) {
		margin-right: 0;
	}
	.gallery .flex > div .info .box img {
		width: 35px;
	}
	.gallery .flex > div .info .box strong {
		margin-top: 10px;
		font-size: 18px;
	}
	.gallery .flex > div .info .box p {
		font-size: 14px;
	}
	.gallery .more_btn {
		position: static;
		display: block;
		width: 90px;
		height: 37px;
		line-height: 37px;
		font-size: 14px;
		margin: 40px auto 0;
	}
	
	
	
}
@media screen and (max-width: 480px) {
	.visual:before {
		background: #F5F5F5;
	}
	.visual .swiper-slide {
		height: 630px;
	}
	.visual .swiper-slide .box {
		top: 40px;
	}
	.visual .swiper-slide .box p {
		font-size: 20px;
		margin-bottom: 10px;
	}
	.visual .swiper-slide .box img {
		width: 200px;
	}
	.visual .swiper-slide .box .txt {
		font-size: 20px;
		margin-top: 365px;
	}
	.visual .swiper-slide .img {
		width: 310px;
		top: 120px;
		right: auto;
		left: 130px;
		margin-right: 0;
	}
	.visual .swiper-slide-active .img {
		right: auto;
		left: 0;
	}
	
	
	.gallery h3.tit {
		text-align: center;
	}
	.gallery .flex > div {
		width: calc(50% - 2px);
	}
	.gallery .flex > div:nth-child(3n) {
		margin-right: 2px;
	}
	.gallery .flex > div:nth-child(2n) {
		margin-right: 0;
	}
}
@media screen and (max-width: 380px) {
	.visual .swiper-slide .box .txt {
		font-size: 18px;
	}
}