/* ================================
   인트로
================================ */
.intro {position: relative; width: 100%; height: 100dvh; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.intro .logo {position: relative; z-index: 500; display: flex; gap: 0 10px;}
.intro .logo span {display: inline-block; color: #fff; opacity: 0; transition: opacity 0.8s;}
.intro .logo span img {height: 60px; width: auto; transition: all 0.3s ease;}
.intro .logo span:last-child {margin-left: 3px;}
.intro .split {position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%;}
.intro .split .left-wrapper, .intro .split .right-wrapper {width: 50%; height: 100%;}
.intro .split .left, .intro .split .right {transform: scaleY(0); transition: transform 1s ease, margin 0.5s; width: 100%; height: 100%; transition: all .5s;}
.intro .split .left a, .intro .split .right a {display: block; width: 100%; height: 100%; transition: all .5s; transition: transform 1.2s ease;}
.intro .split .left {transform-origin: top;}
.intro .split .right {transform-origin: bottom;}
.intro .split .left.show {transform: scaleY(1);}
.intro .split .right.show {transform: scaleY(1);}
.intro .split .left a .bg, .intro .split .right a .bg {position: absolute; top: -1px; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; transition: opacity 0.5s;}
.intro .split .left a video, .intro .split .right a video {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;}
.intro .split .left a .txt, .intro .split .right a .txt {position: relative; color: #fff; z-index: 3; opacity: 0; transition: all 0.8s ease;}
.intro .split .left-wrapper:hover, .intro .split .right-wrapper:hover {cursor: pointer;}
.intro .split .left-wrapper:hover .txt, .intro .split .right-wrapper:hover .txt {display: none;}
.intro .split .left-wrapper:hover .left, .intro .split .right-wrapper:hover .right {margin: 100px 0;}
.intro .split .left-wrapper:hover .left, .intro .split .right-wrapper:hover .right {height: calc(100% - 200px);}
.intro .split a .txt {text-decoration: none; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; transform: translateY(-50px); color: #fff; gap: 80px;}
.intro .split a .txt p {text-align: center; font-size: 72px; font-weight: 700; line-height: 1.2;}
.intro .split a .txt b span {position: relative; padding: 0 15px; font-size: 24px; font-weight: 400;}
.intro .split a .txt b span:before {position: absolute; left: 0; top: 9px; width: 1px; height: 20px; background: rgba(255,255,255,.6); display: block; content: '';}
.intro .split a .txt b span:first-child:before {display: none;}
.intro .split .right a .txt {transform: translateY(50px);}
.intro .split .left a .txt.show {opacity: 1; transform: translateY(0);}
.intro .split .right a .txt.show {opacity: 1; transform: translateY(0);}
@media (max-width: 1400px) {
	.intro .split a .txt p {font-size: 60px;}
	.intro .split a .txt b span {font-size: 20px;}
}
@media (max-width: 1040px) {
	.intro {overflow-y: auto;}
	.intro .logo {position: absolute; left: 50%; transform: translateX(-50%); top: 40px; gap: 0 5px;}
	.intro .logo span {opacity: 1;}
	.intro .logo span img {height: 30px;}
	.intro .split {flex-direction: column;}
	.intro .split .left-wrapper, .intro .split .right-wrapper {width: 100%; height: 50%; min-height: 300px;}
	.intro .split .left-wrapper:hover .left, .intro .split .right-wrapper:hover .right {margin: 0;}
	.intro .split .left-wrapper:hover .left, .intro .split .right-wrapper:hover .right {height: 100%;}
	.intro .split .left-wrapper:hover .txt, .intro .split .right-wrapper:hover .txt {display: flex;}
	.intro .split .left, .intro .split .right {position: relative; width: 100%; height: 100%; transform: none;}
	.intro .split .left a, .intro .split .right a {padding: 40px;}
	.intro .split .left a .txt, .intro .split .right a .txt {opacity: 1;}
	.intro .split .left a video, .intro .split .right a video {display: none;}
	.intro .split .right a .txt {transform: none;}
	.intro .split a .txt {justify-content: flex-end; gap: 20px; transform: none;}
	.intro .split a .txt p {font-size: 32px;}
	.intro .split a .txt p br {display: none;}
}
@media (max-width: 767px) {
	.intro .split a .txt {gap: 15px;}
	.intro .split a .txt p {font-size: 28px; font-weight: 600;}
	.intro .split a .txt b span {font-size: 18px; padding: 0 10px;}
	.intro .split a .txt b span:before {height: 12px;}
	.intro .split .right {border-top: 3px solid rgb(54 56 67);}
	.intro .split .left a .bg, .intro .split .right a .bg {top: 0;}
}
@media (max-width: 480px) {
	.intro .logo {top: 25px; gap: 0 4px;}
	.intro .logo span img {height: 20px;} 
	.intro .split .left, .intro .split .right {min-height: 250px;}
	.intro .split .left a, .intro .split .right a {padding: 30px;}
	.intro .split a .txt {gap: 7px;}
	.intro .split a .txt p {font-size: 24px;}
	.intro .split a .txt b span {font-size: 15px;}
	.intro .split a .txt b span:before {top: 3px;}
}
@media (max-width: 360px) {
	.intro .split a .txt b span {font-size: 14px; padding: 0 5px;}
}/*

.intro .split .left-wrapper, .intro .split .right-wrapper {pointer-events: none;}
.intro .split .left-wrapper.active, .intro .split .right-wrapper.active {pointer-events: none;}*/