@import "Style.css";
.main_page {float:left; box-sizing:border-box;width: 100%; text-align: center;}
.main_banner{width:100%;height: 750px;text-align:center;position:relative;display: flex;align-items: center;justify-content: center;overflow: hidden;background-image: url('/public/img/home/Fantasy_city.jpg');background-size: cover;background-position: center;}
.main_banner img{display: none;width:100%;}
.main_banner h2{position: absolute;top: 10px;box-sizing:border-box;width: 50%;height:60px;line-height: 60px;font-size: 3rem;font-weight:900;color: #2dd9fe;border-radius: 10px;padding: 0;margin: 0;}
.main_banner p{position:absolute;bottom: 50px;box-sizing:border-box;width: 80%;padding: 10px 20px;font-size: 2vw;font-weight:900;color:#fff;background: #00000061;border-radius: 10px;box-shadow: 0px 0px 11px 0px #2dd9fe;}
.section1{float:left;width:100%; height:450px; background:#d8f1f1; position:relative;}
.section1 .items{position:absolute; top:-150px; left:60px; right:60px; height:450px; display:flex; justify-content:space-between;}
.section1 .item{width:30%; height:100%; box-sizing:border-box; padding:40px 30px; background:#fff; border-radius:0 0 80px 0; position:relative;}
.section1 .item img{height:90px;}
.section1 .item h2{margin:15px 0; line-height:40px; font-size:24px; color:#333f4c;}
.section1 .item p{margin:0; font-size:16px; font-weight:600; line-height:25px;}
.section1 .item a{position:absolute;bottom:40px;left:calc(50% - 90px);width:180px;line-height:60px;border-radius:30px;display: none;}
.section2{float:left; box-sizing:border-box; width:100%; padding:120px 60px; display:flex; justify-content:space-between;}
.section2 .img_cont{width:33%;}
.section2 .img_cont img{width:100%;}
.section2 .text_cont{width:65%; display:flex; flex-direction:column; justify-content:center;}
.section2 .text_cont h2{margin:0; color:#333f4c; font-size:48px; font-weight:700; text-align:left;}
.section2 .text_cont p{margin:10px 0; font-size:18px; line-height:32px; text-align:left;}
.section2 .text_cont a{float:left;width:fit-content;box-sizing:border-box;line-height:60px;border:2px solid #fff;border-radius:32px;color:#4a9797;font-size:28px;font-weight:700;cursor:pointer;transition: flex 0.2s;display: none;}
.section2 .text_cont a:hover{border-color:#4a9797; padding:0 2px; margin-left:-2px;}
.section3{box-sizing:border-box;width:100%;padding:60px;color: #ffffff;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;}
.section3 h2{margin:0;color: #ffffff;font-size: 2rem;font-weight:700;width: 100%;}
.section3 p{margin: 20px 0%;font-size: 1.3rem;line-height:30px;color: #ffffff;width: 100%;}
.section3 a{
    line-height: 50px;
    display: block;
    color: #2dd9fe;
}
.section3 .smart{width:100%; display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
.section3 .smart .full{width:100%;border: 1px solid #777;line-height: 50px;box-sizing: border-box;}
.section3 .smart .half{width:50%;border: 1px solid #777;line-height: 50px;box-sizing: border-box;}

.section3 .pool{
    width: 23%;
}
.section3 .pool h3{
    background: #000000;
    color: #fff;
    border-radius: 10px;
    line-height: 50px;
    margin-bottom: 30px;
}
.section3 .pool .step{
    border-radius: 10px;
    height: 100px;
    margin: 10px 0;
    padding: 10px 0;
    background: #00000047;
    box-shadow: 0px 0px 11px 0px #2dd9fe;
}
.section3 .pool .step span{
    color: #2dd9fe;
    font-size: 1.4rem;
    font-weight: 900;
}
.section3 .pool i{
    font-size: 2vw;
    color: #2dd9fe;
    margin: 10px 0;
}
.section3 .pool .step .perWorth{
	font-size: 1.5vw;
}
.section3 .note{text-align: justify;font-size: 1rem;margin: 20px 0 0;}
.section3 .note span{font-size: 1.5vw;font-weight: 900;color: #2dd9fe;}

.section4{box-sizing:border-box;width:100%;padding:120px 60px;display:flex;justify-content:space-between;flex-wrap: wrap;}
.section4  h2{margin: 0;color: #ffffff;font-size: 2rem;font-weight: 700;width: 100%;}
.collection {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	margin: 50px 0;
	text-align: center;
	border-radius:20px;
}

.collection p{
	width: 100%;
}

.land{
	width: 23%;
	padding: 30px 20px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	overflow: hidden;
	margin-bottom: 50px;
	background: #00000061;
	border-radius: 10px;
	box-shadow: 0px 0px 11px 0px #2dd9fe;
	color: #fff;
	}

.land>img{
	width: 100%;
}

.land .worth{
	background: #0000005c;
	width: fit-content;
	line-height: 40px;
	height: 50px;
	font-size: 1.2rem;
	font-weight: 900;
	color: #2dd9fe;
	box-shadow: 0px 0px 11px 0px #2dd9fe;
	border-radius: 100px;
	margin: 20px 0% 10px;
	padding: 0 10px;
}

.land .price{
	font-size: 1.2rem;
	font-weight: 900;
	width: 100%;
}
.land .price span{
	color: #2dd9fe;
}

.land button{
	width: 100px;
	line-height: 30px;
	margin: 30px 0 0;
	cursor: pointer;
	font-size: 1rem;
	border: none;
}

.slideshow-container {
	float:left;
	width: 100%;
	height:270px;
	position: relative;
	margin-top:20px;
}
.mySlides {
	display: none;
	width: 100%;
	text-align:left;
}
.mySlides p{margin:0; font-size:27px; font-weight:700; line-height:30px; color:#333;}
.mySlides h4{margin:25px 0 10px; font-size:22px; font-weight:700; line-height:25px; color:#333;}
.mySlides h5{margin:0; font-size:17px; font-weight:500; line-height:25px; color:#333;}
.dots_cont{position:absolute; bottom:10px; width:100%; text-align:center;}
.dots_cont .dot {
	cursor: pointer;
	height: 10px;
	width: 10px;
	margin: 0 2px;
	background:#23232333;
	border-radius: 5px;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.dots_cont .dot:hover {
	background-color: #232323cc;
}
.dots_cont .active-slide {
	background-color: #232323cc;
	width:30px;
}

.section5{width:100%;height: 700px;display:flex;flex-direction:column;justify-content: right;align-items: end;background-image: url('/public/img/home/Screen-Main-v2-copy.jpg');background-size: cover;background-repeat: no-repeat;padding: 50px 4%;box-sizing: border-box;}
.section5 h2{margin:0;font-size: 3vw;font-weight: 900;color: #ffffff;width: 100%;}
.section5 p{margin: 20px 10%;color: #ffffff;text-align: justify;line-height: 36px;width: 80%;padding: 20px 3%;box-sizing: border-box;font-size: 1.2rem;font-weight: 700;background: #00000091;border-radius: 10px;box-shadow: 0px 0px 11px 0px #2dd9fe;}
.section5 .video_cont{height:90vh; width:160vh; border-radius:10px; overflow:hidden;}
.section5 .video_cont video{height:100%;}
.section6{box-sizing:border-box;width:100%;padding:100px 60px;display:flex;justify-content:space-between;}
.section6 .column{width:48%; min-height:185px;}
.section6 .column h3{margin:0 0 30px;font-size:40px;font-weight:700;text-align:left;color: #ffffff;}
.section6 .column p{margin:0;font-size:22px;line-height:27px;text-align:left;color: #b7b7b7;}
.section6 .column .form{width:70%; margin-left:30%; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start;}
.section6 .column .form label{font-size:20px;color: #fff;}
.section6 .column .form input{width:100%; line-height:60px; border:none; border-radius:0; border-bottom:1px solid #333; color:#333f4c; font-size:20px; padding:0 10px 1px; box-sizing:border-box; margin:15px 0 40px; background:none;}
.section6 .column .form input:focus{border-bottom:2px solid #4a97d7; padding-bottom:0;}
.section6 .column .form span{line-height:44px;padding:0 48px;border-radius: 10px;font-size:20px;cursor:pointer;}
.section6 .column .form span:hover{background:#333f4caf;}
.section6 .column .msg{float:right;width:70%;background:#ddd;color: #fff;font-size:16px;line-height:27px;text-align:center;padding:20px;box-sizing:border-box;display:none;}


@media(max-width: 768px) {
    .main_banner{
    height: 500px;
    background-position: center;
}
    .main_banner img {width: 100%;height: 100%;}
	.main_banner h2{
		top: 70px;
		padding: 0;
		width: 75%;
		font-size: 2rem;
	}
	.main_banner p{font-size: 5vw;}
	.section1{
		height: auto;
		overflow: hidden;
		min-height: 450px;
		padding: 20px 0 50px;
	}
	.section1 .items{
		top: 30px;
		flex-direction: column;
		height: auto;
		width: 80%;
		left: 10%;
		right: 10%;
		position: relative;
	}
	.section1 .item{
		width: 100%;
		margin-bottom: 30px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.section1 .item a{
		position: relative;
		bottom: 0;
		left: 0;
	}
	.section2{
		flex-direction: column;
		padding: 50px 0;
	}
	.section2 .img_cont {
		width: 100%;
	}
	.section2 .text_cont{
		width: 100%;
		padding: 10px 0;
		box-sizing: border-box;
	}
	.section2 .text_cont h2{
		font-size: 1.5rem;
		padding: 0 20px;
		box-sizing: border-box;
	}
	.section2 .text_cont p{
		font-size: 1rem;
		padding: 0 20px;
		box-sizing: border-box;
	}
	.section2 .text_cont a{
		padding: 0 20px;
		box-sizing: border-box;
	}
	
	.section3{
		padding: 50px 8%;
	}
	.section3 .pool .step h4 {
		font-size: 5vw;
	}
	.section3 .pool{
		width: 100%;
		margin-bottom: 30px;
	}.section3 .pool .step span {
		font-size: 7vw;
	}
	.section3 .pool i {
		font-size: 7vw;
	}
	.section3 .pool .step .perWorth {
		font-size: 6vw;
	}
	.section3 .note{
		font-size: 5vw;
		margin: 10px 0;
	}
	.section3 .note span{
		font-size: 5.2vw;
	}

	.section3 .pool .step{
		height: auto;
	}
	
	.section4{
		flex-direction: column;
		padding: 50px 0;
	}
	.section4 h2{
		font-size: 1.5rem;
		padding: 0 20px;
		box-sizing: border-box;
	}
	.collection {
		margin: 50px 2.5%;
		width: 95%;
	}
	.land{
		width: 90%;
	}
	.land .worth{
		width: 70%;
		font-size: 1.1rem;
	}

	.section5{
		height: 500px;
		background-position: center;
	}
	.section5 h2{
		font-size: 7vw;
		width: 100%;
	}
	.section5 p{
		width: 98%;
		box-sizing: border-box;
		font-size: 1rem;
		margin: 20px 0;
	}
	.section6{
		flex-direction: column;
		padding: 20px;
	}
	.section6 .column{
		width: 100%;
	}
	.section6 .column .form{
		width: 100%;
		margin: 0;
	}
	.footer{height: auto;padding: 50px 10px;}
	.logo_part_footer{
		width: 100%;
	}
	.logo_part_footer .logo{
		float: none;
		text-align: center;
		width: 100%;
		margin: 0 auto;
	}
	.logo img{float: none;}
	.footer_row{
		flex-direction: column;
	}
	.footer_row .column{
		width: 100%;
		text-align: center;
	}
	.footer_row .column .button{
		width: 100%;
	}
	.footer_row .column .social_media{
		float: none;
	}
}