@charset "utf-8";

@import 'https://cdn.jsdelivr.net/npm/@typehaus/metropolis@12.0.0-next.7/800.css';

#subWrap {
	width:100%;
	min-height:600px;
	padding:4.35rem 6rem;
	display:flex;
	flex-direction:column;
	align-items:center;
}
#subWrap .cotentWrap {
	width:100%;
	max-width:1400px;
}
#subWrap h1.subTitle {
	position:relative;
	font-family:'Paperlogy', sans-serif;
	font-size:7em;
	color:#000;
	white-space:nowrap !important;
	text-transform:uppercase;
	transition:all 0.25s ease-in-out;
	display:inline-block;
}
#subWrap h1.subTitle .char {
	display: inline-block;
	opacity: 0;
	animation: char-reveal 0.1s forwards;
	animation-delay: calc(var(--char-index) * 0.1s + 0.5s);
}
	
@keyframes char-reveal {
	to { opacity: 1; }
}
	
#subWrap h1.subTitle .cursor {
	display: none;
	width: 0.6em;
	height: 5px;
	background-color: currentColor;
	margin-left: 0.15em;
	vertical-align: baseline;
	animation: cursor-blink 0.8s step-end infinite;
}
#subWrap h1.subTitle .cursor.active {
	display: inline-block;
}
	
@keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

#subWrap .content {
	width:100%;
	margin-top:2rem;
}

/*
+--------------------------------------------------------------------------------------+
+ Desktop Device greater than 1201px											+
+--------------------------------------------------------------------------------------+
*/
@media all and (min-width:1201px) {
	#subWrap { padding:4.35rem 6rem; 	}
	#subWrap h1.subTitle { font-size:7em; }
	#subWrap .content { margin-top:2rem; }
}

/*
+--------------------------------------------------------------------------------------+
+ Tablet Device Less than 769px or greater than 1200px					+
+--------------------------------------------------------------------------------------+
*/
@media all and (min-width:769px) and (max-width:1200px) {
	#subWrap { padding:4.35rem 4rem; 	}
	#subWrap h1.subTitle { font-size:6em; }
	#subWrap .content { margin-top:2rem; }
}

/*
+--------------------------------------------------------------------------------------+
+ Tablet Device Less than 577px or greater than 768px					+
+--------------------------------------------------------------------------------------+
*/
@media all and (min-width:577px) and (max-width:768px) {
	#subWrap { padding:4.35rem 2rem; 	}
	#subWrap h1.subTitle { font-size:5em; }
	#subWrap .content { margin-top:2rem; }
}

/*
+----------------------------------------------------------+
+ Mobile Device Less than 576px					+
+----------------------------------------------------------+
*/
@media all and (max-width:576px) {
	#subWrap { padding:4.35rem 1rem; 	}
	#subWrap h1.subTitle { font-size:4em; }
	#subWrap .content { margin-top:2rem; }
}