@charset "UTF-8";

@font-face {
    font-family: 'lexend';
    src: url('/font/Lexend-ExtraLight-d360327f4d01c8429da0416e4511c4bd.ttf') format('truetype');
}

body {
	background-color: #16161D;
}

.MainBanner {
	position: relative;
	height: 57rem;
	background-image: url('/img/main1-c84382b1a4243fbcc354eecf73f9882c.png');
	background-color: #27272F;
	overflow: hidden;
	background-position: 50%;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat
}

.MainBanner .school-banner-content {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	z-index: 0;
}

.MainBanner .school-banner-content .banner-text {
	/* text-align: center; */
	width: 100%;
	position: absolute;
	padding-top: 16rem;
	display: flex;
	flex-direction: column;
}

.banner-text p {
	color: white;
	font-size: 28px;
	margin-top: 15px;
	font-weight: 500;
	font-family: lexend;
}

.title1 {
	position: absolute;
	left: 9.6%;
	top: 117%;
}

.title2 {
	position: absolute;
	left: 3%;
	top: 134%;
}

.title3 {
	position: absolute;
	/* left: 6%;
	top: 151%; */
	left: 5%;
	top: 135%;
}

.title4 {
	position: absolute;
	/* left: 5%;
	top: 167%; */
	left: 5%;
	top: 154%;
}

.MainBanner .school-banner-content .banner-text .banner-text-title {
	font-size: 4.5rem;
	color: #ffffff;
	font-weight: bold;
	font-family: "NanumSquare", sans-serif;
}

.MainBanner .school-banner-content .banner-text .banner-text-explain {
	margin-top: 15px;
	font-size: 28px;
	color: #ffffff;
	font-weight: 500;
	/* margin-bottom: 5.9322033898%; */
}

.MainBanner .school-banner-content .banner-watch-now-button {
	/* text-align: center; */
	/* width: 100%; */
	margin-top: 2.9322033898%;
	position: absolute;
	left: 11.5%;
	/* top: 202%; */
	top: 180%;
}

.MainBanner .school-banner-content .banner-watch-now-button button {
	font-size: 1.5rem;
	font-weight: 500;
	font-family: lexend;
	color: #ffffff;
	/* width: 15%; */
	width: 150px;
	height: 55px;
	border: 2px solid white;
	border-radius: 10px;
	background: #27272F;
	cursor: pointer;
	letter-spacing: 2px;
}

.MainBanner .school-banner-content .banner-watch-now-button button:hover
	{
	background: #ffffff;
	color: black;
}

.MainBanner .school-banner-content .banner-img {
	position: relative;
	height: 100%;
	z-index: -1;
}

.MainBanner .school-banner-content .banner-img img {
	width: 100%;
	max-width: 100%;
}

.MainBanner .school-banner-content .banner-img .cloud1 {
	position: absolute;
	left: 4%;
	top: 24%;
	width: 11.0169491525%;
}

.MainBanner .school-banner-content .banner-img .cloud2 {
	position: absolute;
	left: -14%;
	bottom: 44%;
	width: 18.6440677966%;
}

.MainBanner .school-banner-content .banner-img .cloud3 {
	position: absolute;
	left: 20%;
	bottom: 30%;
	width: 14.406779661%;
}

.MainBanner .school-banner-content .banner-img .cloud4 {
	position: absolute;
	right: -4%;
	top: 25%;
	width: 16.9491525424%;
}

.MainBanner .school-banner-content .banner-img .cloud5 {
	position: absolute;
	right: 15%;
	top: 46%;
	width: 14.406779661%;
}

.MainBanner .school-banner-content .banner-img .cloud6 {
	position: absolute;
	right: -6%;
	bottom: 32%;
	width: 11.8644067797%;
}

.MainBanner .school-banner-content .banner-img .ari-vr {
	position: absolute;
	bottom: -1%;
	right: 39%;
	width: 20.7627118644%;
}

.MainBanner .school-banner-content .banner-img .castle {
	position: absolute;
	right: 0%;
	bottom: -1%;
	width: 30.593220339%;
}

.MainBanner .school-banner-content .banner-img .dinosaur {
	position: absolute;
	left: 0%;
	bottom: -1%;
	width: 30.593220339%;
}


@media all and (min-width: 1280px) and (max-width: 1599px) {
	.MainBanner {
		height: 35rem;
	}
	.banner-text p{
		font-size: 23px;
	}
	.title1 {
	left: 16.6%;
	top: 78%;
}

.title2 {
	left: 11%;
	top: 95%;
}

.title3 {
	/* left: 13%;
	top: 112%; */
	left: 13%;
	top: 97%;
}

.title4 {
	/* left: 12%;
	top: 130%; */
	left: 14%;
	top: 116%;
}

.MainBanner .school-banner-content .banner-watch-now-button {
	/* left: 16%;
	top: 159%; */
	
	left: 18%;
	top: 140%;
}
	
}


@media all and (min-width: 1600px) and (max-width: 1919px) {
	.MainBanner {
		height: 40rem;
	}
	
		
.title1 {
	left: 15.6%;
	top: 80%;
}

.title2 {
	left: 9%;
	top: 98%;
}

.title3 {
	/* left: 12%;
	top: 117%; */
	left: 11%;
	top: 101%;
}

.title4 {
	/* left: 11%;
	top: 136%; */
	left: 11%;
	top: 121%;
}

.MainBanner .school-banner-content .banner-watch-now-button {
	left: 18%;
	top: 165%;
}
	
}



@media all and (min-width: 1920px) and (max-width: 2199px) {
	.MainBanner {
		height: 45rem;
	}
	
	
.title1 {

	/* top: 85%; */
	top:103%;
}

.title2 {

	top: 103%;
}

.title3 {

	top: 122%;
}

.title4 {

	top: 141%;
}

.MainBanner .school-banner-content .banner-watch-now-button {

	top: 172%;
}

}


@media all and (min-width: 2200px) {
	.MainBanner {
		height: 57rem;
	}
}




@media all and (min-width: 1200px) {
	.school-banner-content {
		width: 1100px;
		padding: 0 10px;
	}
}

@media all and (max-width: 1024px) {
	.MainBanner {
		height: 38rem;
	}
	.MainBanner .school-banner-content .banner-text {
		padding-top: 10rem;
	}
	.MainBanner .school-banner-content .banner-text .banner-text-title {
		font-size: 3.8rem;
	}
	
	
	.MainBanner .school-banner-content .banner-watch-now-button button{
	width: 150px;
	}
}

@media all and (max-width: 768px) {
	.banner-img {
		display: none;
	}
	.MainBanner {
		height: 35rem;
	}
	.MainBanner .school-banner-content .banner-text .banner-text-title {
		font-size: 3.2rem;
	}
	.MainBanner .school-banner-content .banner-text .banner-text-explain {
		font-size: 1.3rem;
	}
}

@media all and (max-width: 700px) {
	
	
.MainBanner .school-banner-content .banner-text{
	text-align: center;
	padding-top: 0em;
}
	
.title1 {
	position: relative;
	left: 0;
}

.title2 {
	position: relative;
	left: 0;
}

.title3 {
	position: relative;
	left: 0;
}

.title4 {
	position: relative;
	left: 0;
}

.MainBanner .school-banner-content .banner-watch-now-button{
	position: relative;
	left: 0;
	padding-top: 5%;
}

.MainBanner .school-banner-content{
	display: flex;
	align-items: center;
}
	
	.MainBanner {
		height: 400px;
		background-image: none;
	}
	.MainBanner .school-banner-content .banner-text .banner-text-title {
		font-size: 30px;
	}
	.MainBanner .school-banner-content .banner-text .banner-text-explain {
		font-size: 0.8rem;
	}
}