/* Common */
.sec-title {
	margin-bottom:60px;
}

.sec-title h4 {
	display: inline-block;
	position: relative;
	font-size:4.4rem;
}

@media screen and (max-width:1024px) {
	.sec-title {
		margin-bottom:30px;
	}

	.sec-title h4 {
		font-size:4rem;
	}
}
@media screen and (max-width:768px) {
	.sec-title h4 {
		font-size:3.6rem;
	}
}
@media screen and (max-width:576px) {
	.sec-title {
		margin-bottom:20px;
	}

	.sec-title h4 {
		font-size:3rem;
	}
}


/* Sec01 */
.sec01 {
	width:100%;
}

.sec01 .swiper {
	position: relative;
	overflow: hidden;
	height:100%;
}

.sec01 .swiper-wrapper {
	height:100%;
}

.sec01 .swiper-slide {
	height:100%;
	overflow: hidden;
}

.sec01 .img {
	font-size:0px;
}

.sec01 .prev,
.sec01 .next {
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	width:32px;
	height:56px;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	opacity:.7;
	z-index:5;
	-webkit-transition:opacity .4s ease;
	transition:opacity .4s ease;
}

.sec01 .prev {
	left:5%;
	background-image: url('../img/main/bnr_btn_prev.png');
}

.sec01 .next {
	right:5%;
	background-image: url('../img/main/bnr_btn_next.png');
}

@media screen and (min-width:1201px) {
	.sec01 .prev:hover,
	.sec01 .next:hover {
		opacity: 1;
	}
}
@media screen and (min-width:1025px) {
	.sec01 {
		height:500px;
	}

	.sec01 .img {
		position: relative;
		width: 100%;
		height:100%;
	}

	.sec01 .img img {
		display: block;
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height:100%;
	}
}
@media screen and (max-width:1024px) {
	.sec01 .prev,
	.sec01 .next {
		width:26px;
		height:46px;
		background-size:auto 46px;
	}	

	.sec01 .prev {
		left:15px;
	}
	
	.sec01 .next {
		right:15px;
	}
}
@media screen and (max-width:768px) {
	.sec01 .prev,
	.sec01 .next {
		width:24px;
		height:40px;
		background-size:auto 40px;
	}	
}
@media screen and (max-width:576px) {
	.sec01 .prev,
	.sec01 .next {
		width:16px;
		height:28px;
		background-size:auto 28px;
	}	
}


/* Sec02 */
.sec02 .list {
	display: flex;
	gap:40px;
}

.sec02 .list li {
	flex:1 1 calc(20% - 40px);
	max-width:20%;
}

.sec02 .list .img-wrap {
	position: relative;
}

.sec02 .list .img {
	position: relative;
	width: 100%;
	height:0;
	padding-top:calc(300/300*100%);
	background-color: #f6f6f6;
	border-radius:50%;
	overflow: hidden;
}

.sec02 .list .img img {
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	width:70%;
}

.sec02 .list .arr {
	display: block;
	position: absolute;
	right:0;
	bottom:0;
	width:76px;
	height:76px;
	border-radius:50%;
	background: #7f7f7f url('../img/main/dis_arr.png') no-repeat center / auto 24px;
	transition:all .4s ease;
}

.sec02 .list p {
	font-size: 2rem;
}

@media screen and (min-width:1201px) {
	.sec02 .list li:hover .arr {
		background-color: #222;
	}
}
@media screen and (max-width:1366px) {
	.sec02 .list {
		gap:20px;
	}

	.sec02 .list li {
		flex:1 1 calc(20% - 20px);
	}
}
@media screen and (max-width:1200px) {
	.sec02 .list {
		gap:16px;
	}

	.sec02 .list li {
		flex:1 1 calc(20% - 16px);
	}

	.sec02 .list .arr {
		width:56px;
		height:56px;
		background-size:auto 20px;
	}
}
@media screen and (max-width:1024px) {
	.sec02 .list {
		flex-wrap: wrap;
	}

	.sec02 .list li {
		flex:1 1 calc(33.33% - 16px);
		max-width: 33.33%;
	}

	.sec02 .list p {
		font-size:1.8rem;
	}

	.sec02 .list .arr {
		width:56px;
		height:56px;
		background-size:auto 24px;
	}
}
@media screen and (max-width:768px) {
	.sec02 .list {
		max-width:600px;
		width: 100%;
		margin:0 auto;
	}

	.sec02 .list li {
		flex:1 1 calc(50% - 16px);
		max-width:50%;
	}

	.sec02 .list p {
		font-size:1.6rem;
	}

	.sec02 .list .arr {
		background-size:auto 18px;
	}
}
@media screen and (max-width:576px) {
	.sec02 .list {
		gap:12px;
	}

	.sec02 .list li {
		flex:1 1 calc(50% - 12px);
	}

	.sec02 .list p {
		font-size:1.6rem;
	}

	.sec02 .list .arr {
		width:40px;
		height:40px;
		background-size:auto 12px;
	}
}