@charset "utf-8";

/*
	** INTRO CSS
*/

.intro-wrapper {
	background:url("../img/intro-bg.jpg") no-repeat right top / cover;
	width: 100%;
	min-height: 100vh;
	padding:1% 6%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-x: hidden;
	overflow-y: auto;
}
.intro-container {
	width: 100%;
	position: relative;
	z-index: 10;
}
.intro-title {
	font-size: var(--font-size-26);
	text-align: center;
	line-height: 1.2;
}
.intro-title .strong {
	display: block;
	font-size: var(--font-size-26);
	font-weight: 900;
	color: var(--primary-color);
}
.intro-box {
	display: flex;
	gap:0 2%;
	margin:3% 0;
}
.intro-box .item {
	flex:1;
	width: 100%;
	padding-top:32%;
	position: relative;
	border-radius: 30px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;
	background-image: url("../img/intro-item-bg01.jpg");
	transition: 0.3s ease-in-out;
}
.intro-box .item.item02 {background-image: url("../img/intro-item-bg02.jpg");}
.intro-box .item.item03 {background-image: url("../img/intro-item-bg03.jpg");}
.intro-box .item:hover {
	outline:4px solid #007fef;
	box-shadow: 5px 5px 8px rgba(0,0,0,0.4);
	background-size: 110%;
}
.intro-wrapper:has(.intro-box .item:hover) .intro-box .item:not(:hover) {
	filter: grayscale(0.8);
	opacity: 0.7;
}
.intro-box .item.item02:hover {outline-color: #227c07;}
.intro-box .item.item03:hover {outline-color: #000;}
.intro-box .cont {
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding:8%;
	color: #fff;
	gap:10px 0;
}
.intro-box .title {
	font-size: var(--font-size-28);
	font-weight: 800;
}
.intro-box .desc {
	font-weight: 300;
}
.intro-box .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	width: 100px;
	height: 100px;
	position: absolute;
	right:8%;
	top:8%;
	background:#007fef;
	text-align: center;
	color: #fff;
}
.intro-box .item02 .btn {background:#227c07;}
.intro-box .item03 .btn {background:#000;}
.intro-lnk {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap:0 5%;
}
@media all and (max-width: 1199px) {
	.intro-wrapper {
		padding:1% 3%;
	}
	.intro-lnk {
		gap:0 3%;
	}
	.intro-box .btn {
		width: 90px;
		height: 90px;
	}
}
@media all and (max-width: 1023px) {
	.intro-box {
		margin:5% 0;
	}
	.intro-box .item {
		padding-top:45%;
		background-size: cover !important;
	}
	.intro-box .item.item03 .cont {
		background-size: cover !important;
	}
	.intro-box .title {
		font-size: var(--font-size-24);
	}
	.intro-box .desc br {
		display: none;
	}
	.intro-box .item03 .btn {
		width: 80px;
		height: 80px;
		font-size: var(--font-size-15);
	}
	.intro-lnk {
		overflow-x: auto;
		gap:0 40px;
		justify-content: flex-start;
	}
	.intro-lnk::-webkit-scrollbar {
		display: none;
	}
	.intro-lnk img {
		max-width: none;
	}
}
@media all and (max-width: 767px) {
	.intro-wrapper {
		padding:10px 20px;
		align-items: center;
	}
	.intro-title {
		font-size: var(--font-size-18);
	}
	.intro-title .strong {
		margin-top:5px;
	}
	.intro-box {
		margin:25px 0;
		flex-direction: column;
		gap:15px 0;
	}
	.intro-box .item {
		padding:0;
		height: 100px;
		flex:auto;
		border-radius: 15px;
	}
	.intro-box .item:hover {
		outline-width: 2px;
	}
	.intro-box .cont {
		position: relative;
		left: auto;
		top:auto;
		padding:15px;
		justify-content: center;
		background:rgba(0,0,0,0.15);
	}
	.intro-box .title {
		font-size: var(--font-size-20);
		text-align: center;
		font-weight: 500;
	}
	.intro-box .desc {
		display: none;
	}
	.intro-box .btn {
		display: none;
	}
	/*
	.intro-box .item.item03 .btn {
		width: 100%;
		height: 100%;
		right: 0;
		top: 0;
		border-radius: 0;
		display: flex;
		background-color: rgba(0, 0, 0, 0.7);
		font-size: var(--font-size-20);
	}
	*/
	.intro-lnk {
		gap:0 25px;
	}
	.intro-lnk img {
		max-height: 35px;
		max-width: 135px;
	}
}