#web{
	margin: 0;
	padding: 0;
	font-family: 'Tenor Sans', sans-serif;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
}
/**---header--*/
.header{
	height: 100vh;
	width: 100%;
	position: relative;
}
.ban1, .ban2, .ban3, .ban4{
	height: 100vh;
	width: 100%;
	position: absolute;
	left: 0;
	top:0;
}
.imgs{
	width: 110%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	animation: fade-in 3s linear infinite;
}
@keyframes zoom-out{
	100%{
		width: 100%;
	}
}

.text-box{
	width: 600px;
	position: absolute;
	top: 200px;
	left: 100px;
	color: #fff;
	animation: textup 12s linear infinite;
	transform: translateY(100px);
}
.text-box h1{
	margin-bottom: 40px;
}
.text-box p{
	font-size: 14px;
	line-height: 18px;
	margin-top: 80px;
}
.text-box span{
	background: red;
	height: 1px;
	width: 100px;
	position: absolute;
	left: 0;
}
.ban1{
	animation: slide1 12s linear infinite;
}
.ban2{
	animation: slide2 12s linear infinite;
}
.ban3{
	animation: slide3 12s linear infinite;
}
.ban4{
	animation: slide4 12s linear infinite;
}
@keyframes slide1{
	0%{
		visibility: visible;
	}
	25%{
		visibility: hidden;
	}
	50%{
		visibility: hidden;
	}
	75%{
		visibility: hidden;
	}
	100%{
		visibility: visible;
	}
}
@keyframes slide2{
	0%{
		visibility: hidden;
	}
	25%{
		visibility: hidden;
	}
	50%{
		visibility: visible;
	}
	75%{
		visibility: hidden;
	}
	100%{
		visibility: hidden;
	}
}
@keyframes slide3{
	0%{
		visibility: hidden;
	}
	25%{
		visibility: hidden;
	}
	50%{
		visibility: hidden;
	}
	75%{
		visibility: visible;
	}
	100%{
		visibility: hidden;
	}
}
@keyframes slide4{
	0%{
		visibility: hidden;
	}
	25%{
		visibility: hidden;
	}
	50%{
		visibility: hidden;
	}
	75%{
		visibility: hidden;
	}
	100%{
		visibility: visible;
	}
}

@keyframes textup{
	10%{
		transform: translateY(0px);
	}
	100%{
		transform: translateY(0px);
	}
}
.text-box1{
	animation-delay: 0s;
}
.text-box2{
	animation-delay: 3s;
}
.text-box3{
	animation-delay: 6s;
}
.text-box4{
	animation-delay: 9s;
}
/*---ctn-----*/
.content{
    width:100%;
    position:relative;
    overflow:auto;
}
}
.ctn{
	margin: 50px 0;
	background-image:url(../images/10.jpg);
	background-size: cover;
	background-position: center;
	border-radius: 10px;
	padding: 5%;
	color: #fff;
}
.ctn-btn{
	background: #fff;
	color: #000;
	text-decoration: none;
	padding: 10px 20px;
	border-radius: 8px;
	margin-top: 20px;
	display: inline-block;
}
svg{
	font-size: 5vw;
	padding-top: 15%;
	line-height: 5.3 vw;
	font-weight: 500;	
}
.copy{
	fill: none;
	stroke: #fff;
	stroke-width: 3px;
	stroke-dasharray: 8% 30%;
	stroke-dashoffset: 0%;
	animation: textanimation 6s linear infinite;
}
@keyframes textanimation{
	100%{
		stroke-dashoffset: -35%;
	}
}
.copy1{
	stroke: #673ab7;
	animation-delay: -1s;
}
.copy2{
	stroke: #e91e63;
	animation-delay: -2s;
}
.copy3{
	stroke: #ff5722;
	animation-delay: -3s;
}
.copy4{
	stroke: #f44336;
	animation-delay: -4s;
}
.copy5{
	stroke: #ffc107;
	animation-delay: -5s;
}
/*----ctnt-----*/
.ctnt{
	background: #fff;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.sliders{
	position: relative;
	width: 200px;
	height: 200px;
	transform-style: preserve-3d;
	/*animation: rotate 30s linear infinite;*/
}
@keyframes rotate{
	0%{
		transform: perspective(1000px) rotateY(0deg);
	}
	100%{
		transform: perspective(1000px) rotateY(360deg);
	}
}
.sliders strong{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: center;
	transform-style: preserve-3d;
	transform: rotateY(calc(var(--i)*55deg)) translateZ(350px);
}
.sliders strong img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 100px;
	object-fit: cover;
	transition: 0.5s;
	z-index: 2;
}
.sliders strong:hover img{
	transform: translateY(-50px) scale(1.2);
}
/**---footer--*/
footer{
	position: relative;
	width: 100%;
	background: #3586ff;
	min-height: 100px;
	padding: 20px 50px;
	display: flex;
	flex-direction: column;
}
footer .social_icon,
footer .menu-link
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 10px 0;
	flex-wrap: wrap;
}
footer .social_icon li,
footer .menu-link li
{
	list-style: none;
}
footer .social_icon li a
{
	font-size: 2em;
	color:#fff;
	margin: 0 10px;
	display: inline-block;
	transition: 0.5s;
	z-index: 2;
}
footer .social_icon li a:hover{
	transform: translateY(-10px);
}
footer .menu-link li a{
	font-size: 1.2em;
	color:#fff;
	margin: 0 10px;
	display: inline-block;
	text-decoration: none;
	opacity: 0.75;
	z-index: 2;
}
footer .menu-link li a:hover{
	opacity: 1;
}
footer p{
	color: #fff;
	text-align: center;
	margin-top: 15px;
	margin-bottom: 10px;
	font-size: 1.1em;
}
footer .wave{
	position: absolute;
	top: -100px;
	left: 0;
	width: 100%;
	height: 100px;
	background:url(../images/wave.png);
	background-size: 1000px 100px;
}
footer .wave#wave1{
	z-index: 1000;
	opacity:1;
	bottom: 0;
	animation: animateWave 4s linear infinite;
}
footer .wave#wave2{
	z-index: 999;
	opacity: 0.5;
	bottom: 10px;
	animation: animateWave_02 4s linear infinite;
}
footer .wave#wave3{
	z-index: 1000;
	opacity: 0.2;
	bottom: 15px;
	animation: animateWave 3s linear infinite;
}
footer .wave#wave4{
	z-index: 999;
	opacity: 0.7;
	bottom: 20px;
	animation: animateWave_02 3s linear infinite;
}
@keyframes animateWave{
	0%
	{
		background-position-x: 1000px;
	}
	100%
	{
		background-position-x: 0px;	
	}
}
@keyframes animateWave_02
{
	0%
	{
		background-position-x: 0px;	
	}
	100%{
		background-position-x: 1000px;	
	}
}
@media only screen and (max-width: 700px){
    .imgs{
    	top: 20%;
    	transform: translate(-50%,-50%);
    	animation: fade-in 3s linear infinite;
    }
	.ctn{
		padding: 15% 5%;
	}
	svg{
		font-size: 17vw;
		line-height: 16vw;
	}
	.copy{
		font-size: 17vw;
		line-height: 16vw;
	}
	.ctn-btn{
		padding: 4px 13px;
		border-radius: 4px;
		margin-top: 10px;
		font-size: 12px;
	}
	.text-box h1{
		font-size: 30px;
	}
	.text-box p{
		font-size: 10px;
	}
	.text-box{
		width: 300px;
		position: absolute;
		top: 100px;
		left: 50px;
		color: #fff;
		animation: textup 12s linear infinite;
		transform: translateY(80px);
	}
	.ctnt{
		height: 40vh;
	}
	.footers{
		font-size:12px;
	}
}