@charset "utf-8";

/* CSS Document */



/*play-hover*/

.video-play-button {

	position: relative;

	display: block;

	float: left;

	border-radius: 50%;

}



/*play-hover*/

.testi-wrapp .video-play-button {

	position: absolute;

	display: block;

	width: 33px;

	float: left;

	margin: 0 auto 0;

	left:0; right:0; top:50%; transform:translateY(-50%);

}





 @-webkit-keyframes pulse-border {

 0% {

 -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

 opacity: 1;

}

 100% {

 -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);

 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);

 opacity: 0;

}

}

 @keyframes pulse-border {

 0% {

 -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

 opacity: 1;

}

 100% {

 -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);

 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);

 opacity: 0;

}

}



.scroll-effect1 { width: 21px; height: 31px; margin: auto; position: absolute; z-index: 99; left: 0; right: 0; margin: auto; bottom: 30px; }

.scroll-effect1 a span { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 31px; border: 1px solid #003859; border-radius: 50px; box-sizing: border-box; margin: 0 0 0; }

.scroll-effect1 a:after { content: ""; width: 12px; height: 6px; background: url(../images/scroll-arrow1.svg) no-repeat center / cover; position: absolute; right: 0; bottom: -12px; left: 0; margin: auto; }

.scroll-effect1 a span::before { position: absolute; top: 0; right: 0; left: 0; content: ''; width: 1px; height: 6px; margin: 0 auto; background: #003859; border-radius: 50%; -webkit-animation: sdb10 2s infinite; animation: sdb10 2s infinite; box-sizing: border-box; }

 @-webkit-keyframes sdb10 {  0% {

 -webkit-transform: translate(0, 0);

 opacity: 0;

}

 40% {

 opacity: 1;

}

 80% {

 -webkit-transform: translate(0, 20px);

 opacity: 0;

}

 100% {

 opacity: 0;

}

}

@keyframes sdb10 {  0% {

 transform: translate(0, 0);

 opacity: 0;

}

 40% {

 opacity: 1;

}

 80% {

 transform: translate(0, 20px);

 opacity: 0;

}

 100% {

 opacity: 0;

}

}



/*map-color*/

.map-color {

	-webkit-filter: grayscale(100%);

	-moz-filter: grayscale(100%);

	-ms-filter: grayscale(100%);

	-o-filter: grayscale(100%);

	filter: grayscale(100%);

}



/* Image-effect */

.image-effect1 {

	overflow: hidden;

	cursor: pointer;

}

.image-effect1 img {

	filter: none;

	-o-filter: grayscale(0);

	-ms-filter: grayscale(0);

	-moz-filter: grayscale(0);

	-webkit-filter: grayscale(0);

	-o-transition: all .8s ease-in-out;

	-ms-transition: all .8s ease-in-out;

	-moz-transition: all .8s ease-in-out;

	-webkit-transition: all .8s ease-in-out;

}

.image-effect1:hover img {

	filter: gray;

	-o-filter: gray;

	-ms-filter: gray;

	-moz-filter: gray;

	-webkit-filter: gray;

	filter: grayscale(1);

	-o-filter: grayscale(1);

	-ms-filter: grayscale(1);

	-moz-filter: grayscale(1);

	-webkit-filter: grayscale(1);

	transform: scale(1.04);

	-o-transform: scale(1.04);

	-ms-transform: scale(1.04);

	-moz-transform: scale(1.04);

	-webkit-transform: scale(1.04);

}





/*Smartphone css*/

@media screen and (max-width: 480px) {

.scroll-effect1 { display:none;}



}



@media screen and (min-width:481px) and (max-width:600px) {

.scroll-effect1 { display:none;}

}



@media screen and (min-width:601px) and (max-width:767px) {

.scroll-effect1 { display:none;}

}



@media screen and (min-width:768px) and (max-width:900px) {

.scroll-effect1 { bottom:30px;}

}



@media screen and (min-width:901px) and (max-width:1024px) {

.scroll-effect1 { bottom:36px;}

}



@media screen and (min-width:1025px) and (max-width:1240px) {



}