* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

}



/* common css */

ul,

ol {

  list-style-type: none;

  margin: 0;

  padding: 0;

}



a {

  display: inline-block;

  text-decoration: none;

}



img,

video {

  max-width: 100%;

}



body {

	display: flex;

	justify-content: center;

}



.row {

  display: flex;

  flex-wrap: wrap;

  padding-top: 20px;

  min-height: 100vh;

  margin: 0 -12px;

}

.container, .container-fluid {



  width: 100%;

}



.row>* {

  padding: 0 12px;

  width: 100%;

}



/* landing css */



#landing {

	width: 100%;

	max-width: 480px;

	background-color: #04A1D4;
	position: relative;

}

.logo-box,.text-box{

  text-align: center;

}

.logo-box img {

	width: 100%;

	max-width: 140px;

	margin-bottom: 20px;

}

.text-box img {

	max-width: 80%;

	width: 100%;

	margin: 0 auto;

	display: block;

	padding-bottom: 10px;

}

.mobile-box .bbl {

	width: 90%;

}

.btn-box a {

	max-width: 70%;

	display: block;

	margin: 0 auto;

	width: 100%;

}

.btn-box a img {

	width: 100%;

	animation: bounce-in 2s ease infinite;

}

#landing .button-box a {

	max-width: 50%;

	margin: 0 auto;

	display: block;

}

#landing .button-box {

	text-align: center;

}



.landing-box {

	min-height: 100vh;

	background-image: url('../images/background.png');

	background-repeat: no-repeat;

	background-size: cover;

	background-position: center;

	display: flex;

	flex-direction: column;

	justify-content: center;

	padding: 20px 0 100px;

}

.mobile-box {

	text-align: center;

	padding-top: 10px;

}

.content {

	display: flex;

	align-items: flex-end;

	padding: 0 20px;

	flex-wrap: wrap;

	justify-content: center;

}

.content .mantext {

	max-width: 200px;

	width: 55%;

	margin-bottom: 15px;

}

.content .man {

	max-width: 175px;

	width: 45%;

	margin-left: auto;

}

.content .latext {

	width: 90%;

	margin-top: -20px;

}

.btn-box {

	position: fixed;

	left: 50%;

	bottom: 4%;

	transform: translateX(-50%);

	width: 100%;

	max-width: 480px;

}

.mobile-box .video .gif {

	position: absolute;

	left: 50%;

	top: 50%;

	transform: translate(-50%, -50%);

	width: 92%;

	height: 88%;

	object-fit: fill;

	border-radius: 12px;

}

#landing .top-box {

	min-height: 55vh;

	display: flex;

	flex-direction: column;

	justify-content: center;

}

/**/
.whatsapp-icon {
    position: absolute;
    left: 18%;
    bottom: 42%;
}
.whatsapp-icon a {
    display: block;
}
.animates {
    animation: tada 1.4s linear infinite;
}
.zoom {
  animation: zoom 1s linear alternate infinite;
}

@keyframes zoom {
  0% {
    transform: scale(.8);
  }

  100% {
    transform: scale(1);
  }
}

.animates {
  animation: tada 1.4s linear infinite;
}

@-webkit-keyframes tada {
  0% {
    transform: scaleX(1);
  }
  10%, 20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
  }
  to {
    transform: scaleX(1);
  }
}
/**/


@media (max-width: 375px) {

	.logo-box img {

		max-width: 120px;

	}

	.landing-box {

		padding: 20px 0 90px;

	}

	.mobile-box .bbl {
    width: 70%;
	}

}

@media (max-width: 320px) {
	.text-box img {
    max-width: 70%;
	}

	.mobile-box .bbl {
    width: 65%;
}

}



@keyframes bounce-in {

	0% {

	  opacity: 0;

	  transform: scale(.3);

	}

	50% {

	  opacity: 1;

	  transform: scale(1.05);

	}

	70% { transform: scale(.9); }

	100% { transform: scale(1); }

  }