@charset "utf-8";

#header,
#footer,
.fix-menu,
.fix-contact,
#banner{
	display: none;
}


.intro {
	display: flex;
	width: 100%;
	height: 100vh;
}

.intro .intro-area {
	width: 50%;
	height: 100%;
	position: relative;
}

.intro .dimmed{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--black);
	opacity: 0.4;
	/* transition: var(--transition); */
	transition:1s;
}

.intro .intro-text{
	display: flex;
	gap: 26px;
	position: absolute;
	left: 10%;
}

.intro .intro-text .text-box{}
.intro .intro-text .text-box h2,
.intro .intro-text .text-box strong,
.intro .intro-text .text-box p,
.intro .intro-text .text-box p span{
	color: var(--white);
}
.intro .intro-text .text-box p span{
	font-weight: var(--fw-600);
}

.intro .intro-text .text-box h2{
	font-size: 2.8125rem;
	font-weight: var(--fw-700);
}

.intro .intro-text .text-box strong{
	display: block;
	font-size: 1.875rem;
	font-weight: var(--fw-600);
	margin-top: 15px;
}

.intro .intro-text .text-box p{
	margin-top: 25px;
}

.intro .intro-area1{
	background: url('/img/intro1.jpg') no-repeat;
	background-size: cover;
    background-position: 76% 50%;
}

.intro .intro-area2{
	/* background: url('/img/intro2.jpg') no-repeat; */
	
	background:url('/img/intro_03.jpg') no-repeat;
	background-position: 60% center;
	background-size: cover;
}

.intro .intro-area1 .intro-text{
	bottom: 160px;
}

.intro .intro-area2 .intro-text{
	top: 160px;
}

/* 호버 효과 */
.intro .intro-area1:hover .dimmed,
.intro .intro-area2:hover .dimmed{
	opacity: 0;
}

	/* 미디어쿼리 */
	@media all and (max-width: 1400px){
		.intro .intro-text{
			left: 0;
		}
		.intro .intro-text .text-box h2{
			font-size: 1.75rem;
		}
		.intro .intro-text .text-box strong{
			font-size: 1.25rem;
			margin-top: 10px;
		}
		.intro .intro-text .text-box p {
			margin-top: 15px;
		}
	}

	@media all and (max-width: 1300px){
		.intro .intro-area .intro-text{
			flex-direction: column;
			gap: 18px;
		}
		.intro .intro-text .text-box {
			padding-left: 50px;
		}
	}

	@media all and (max-width: 1000px){
		.intro .intro-text .text-box p .mb{
			display: block;
		}
	}

	@media all and (max-width: 640px){
		.intro{
			flex-direction: column;
		}
		.intro .intro-area{
			width: 100%;
		}
		.intro .intro-area .intro-text i{
			width: 130px;
		}
	}