@font-face {
	font-family: 'Montserrat';
	src: url(../font/Montserrat-Light.otf);
}

@font-face {
	font-family: 'Montserrat';
	src: url(../font/Montserrat-Bold.ttf);
	font-weight: bold;
}

@font-face {
	font-family: 'Montserrat';
	src: url(../font/Montserrat-Black.otf);
	font-weight: 900;
}

@font-face {
	font-family: 'Montserrat';
	src: url(../font/Montserrat-Regular.ttf);
	font-weight: 400;
}

@font-face {
	font-family: 'Montserrat';
	src: url(../font/Montserrat-Light.otf);
	font-weight: 300;
}

@font-face {
	font-family: 'Montserrat';
	src: url(../font/Montserrat-Hairline.otf);
	font-weight: 100;
}

@font-face {
	font-family: 'Poppins-Bold';
	src: url(../font/Poppins-Bold.ttf);
}
@font-face {
	font-family: 'DINPro-Black';
	src: url(../font/DINPro-Black.otf);
}
@font-face {	
	font-family: 'Paralines-Regular';
	src: url(../font/Paralines-Regular.otf);
}


body {
	font-family: "Montserrat", "NotoSansHans", "SourceHanSansSC", "SourceHanSansCN", "Noto Sans SC", "PingFang SC", "微软雅黑", "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", Arial, Tahoma, Helvetica, \5b8b\4f53, "宋体", sans-serif;
}

p,h1 {
	margin: 0;
}



.js-scroll {
	opacity: 0;
	transition: opacity 500ms;
}

.js-scroll.scrolled {
	opacity: 1;
}

.scrolled.fade-in {
	animation: fade-in 0.6s ease-in-out both;
}

.scrolled.fade-in-bottom {
	animation: fade-in-bottom 0.6s ease-in-out both;
}

.scrolled.slide-left {
	animation: slide-in-left 0.6s ease-in-out both;
}

.scrolled.slide-right {
	animation: slide-in-right 0.6s ease-in-out both;
}

@keyframes slide-in-left {
	0% {
		transform: translateX(-100px);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slide-in-right {
	0% {
		transform: translateX(100px);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes fade-in-bottom {
	0% {
		transform: translateY(50px);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}


@keyframes zhuan {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.zhuan{
    animation: zhuan 1s linear;
    animation-iteration-count: infinite;
    /* Safari and Chrome */
    -webkit-animation: zhuan 1s linear;
    -webkit-animation-iteration-count: infinite;
}