@charset "utf-8";
	@keyframes fadeUp {
		from {
			transform: translateY(50px);
			opacity: 0;
		}
	
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}
	@keyframes fadeIn {
		from {
			transform: translateY(0);
			opacity: 0;
		}
	
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}
		.conWrap > div:nth-child(1), .conWrap > div:last-child  { 
			transform: translateY(0);
			opacity: 0;
			animation: 3000ms ease fadeIn;
			animation-fill-mode: forwards;
	}
	
		.conWrap > div:nth-child(2) > div {
			transform: translateY(50px);
			opacity: 0;
			animation: 1200ms ease fadeUp;
			animation-fill-mode: forwards;
	}

.introWrap {
	width:100%;
	float:left;
}
.conWrap {
	width:1120px;
	margin:0 auto;
	font-family:Pretendard; 
}
.conWrap > div { 
	text-align:center;
	margin-top:80px;
}
.conWrap > div:nth-child(2) {
	display:flex;
	gap:40px;
}
.conWrap > div:nth-child(2) > div { 
	display:flex;
	flex-direction: column;
	justify-content:center;
	width:540px;
	height:700px;
	border-radius:25px;
	font-size:24px;
	color:#fff;
	cursor:pointer;
}
.conWrap > div:nth-child(2) > div.boxBg1 {
	background:url(../images/boxBg1.jpg) no-repeat center;
	background-size: 100%;
	 transition: background-size 1s ease;
    -moz-transition: background-size 1s ease;
    -web-kit-transition: background-size 1. ease;
}
.conWrap > div:nth-child(2) > div.boxBg2 {
	background:url(../images/boxBg2.jpg) no-repeat center;
	background-size: 100%;
	 transition: background-size 1s ease;
    -moz-transition: background-size 1s ease;
    -web-kit-transition: background-size 1s ease;
}
.conWrap > div:nth-child(2) > div.boxBg1mo, .conWrap > div:nth-child(2) > div.boxBg2mo { display:none;}

.conWrap > div:nth-child(2) > div:hover {
	background-size: 120%;
    transition: background-size 3s ease;
    -moz-transition: background-size 3s ease;
    -web-kit-transition: background-size 3s ease;
}
.conWrap > div:nth-child(2) > div > p {
	margin:0;
}
.conWrap > div:nth-child(2) > div > p:nth-child(2) {
	padding-bottom:25px;
}
.conWrap > div:last-child, .conWrap > div:last-child > a { 
	font-size:11px;
	color:#bcbcbc;
	text-decoration:none;
}


@media all and (max-width:1120px){
	.conWrap {
	width:90%;
	margin:0 auto;
	}
	.conWrap > div:nth-child(2) {
		gap:4%;
	}
	.conWrap > div:nth-child(2) > div { 
		width:48%;
		height:400px;
		border-radius:25px;
		font-size:20px;
	}
}

@media all and (max-width:800px){
	.conWrap {
	width:320px;
	margin:0 auto;
	}
	.conWrap > div { 
	margin-top:40px;
}
	.conWrap > div:nth-child(1) > img { width:50%; }
	.conWrap > div:nth-child(2) {
	flex-direction: column;
	gap:20px;
	}
	.conWrap > div:nth-child(2) > div { 
	width:320px;
	height:320px;
	align-content: center;
	}
	.conWrap > div:last-child { 
	padding-bottom:20px;
	}

	.conWrap > div:nth-child(2) > div.boxBg1, .conWrap > div:nth-child(2) > div.boxBg2 { display:none;}
	.conWrap > div:nth-child(2) > div.boxBg1mo { 
	display:block;
	background:url(../images/boxBg1_mo.jpg) no-repeat center;
	}
	.conWrap > div:nth-child(2) > div.boxBg2mo { 
	display:block;
	background:url(../images/boxBg2_mo.jpg) no-repeat center;
	}
	.conWrap > div:nth-child(2) > div > p > img {
	width:100px;
	}
}
