* { margin:0; padding:0; box-sizing:border-box; }
body {
	width:100%; height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
	font-family:"Pretendard", sans-serif;
	background:#fff;
	overflow:hidden;
}


.intro_wrap {
	width: 100%; 
	height: 100%;
	display: flex;
	position:relative;
}

/* 좌/우 패널 */
.panel {
	flex: 1;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background 0.35s ease;
	background: #fff;
	cursor: pointer;
	position: relative;
}


/* 기본 텍스트 스타일 */
.panel span {
	font-size: 2.5rem;
	font-weight: 700;
	transition: color 0.35s ease;
	padding: 0 0 0.5rem;
	border-bottom: 0.5rem solid transparent;
}

.panel.left span { border-bottom-color: #8a2332; }
.panel.right span { border-bottom-color: #052357; }


/* 로고 중앙 원형 */
.center_logo {
	position: absolute;
	left: 50%; 
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius:50%;
	background: var(--title-color);
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 1.1rem;
	z-index: 10;
}

.center_logo img {
	width: 60%;
}

.center_logo p {
	margin: 15px 0 0;
}


/* Hover 색 변환 */
.panel.left:hover { background: #8a2332; }
.panel.right:hover { background: #052357; }
.panel:hover span { color:#fff; }


/* 375px */
@media (min-width:375px) {
	.intro_wrap {
		flex-direction: column;
	}
	.center_logo {
		width: 160px;
		height: 160px;
		font-size: 1rem;
	}
	.panel span {
		font-size: 2.5rem;
		padding: 0 0 0.08rem;
	}

	.center_logo p {
		font-size: 0.85rem;
		margin: 15px 0 0;
	}
	
	.panel.left {
		border-bottom: 2px solid #222;
		/* background-color: rgba(138, 35, 50, 0.9); 모바일 컬러 */
		
	}

	.panel.right {
		/* background-color: rgba(7, 46, 113, 0.9); 모바일 컬러 */
	}
}


/* 768px */
@media (min-width: 768px) {
	.intro_wrap {
		flex-direction: row;
	}
	.panel span { 
		font-size: 2.4rem; 
		color: #000;
	}
	.center_logo {
		width: 135px;
		height: 135px;
	}
	.center_logo p {
		font-size: 0.795rem;
		margin: 15px 0 0;
	}

	.panel.left {
		border-bottom: none;
		border-right: 2px solid #222;
		background-color: #fff;
	}

	.panel.right {
		background-color: #fff;
	}
}


/* 992px */
@media (min-width:992px) {
	.panel span { 
		font-size: 2.5rem; 
	}
	.center_logo {
		width: 160px;
		height: 160px;
	}
	.center_logo p {
		font-size: 0.85rem;
		margin: 15px 0 0;
	}

	
}

/* 1200px */
@media (min-width:1200px) {
	.panel span { 
		font-size: 3.95rem;
	}

	.center_logo {
		width: 200px;
		height: 200px;
	}

	.center_logo p {
		font-size: 1.1rem;
		margin: 15px 0 0;
	}
}