@font-face {
  font-family: 'source';   /*字体名称*/
  src: url('../font/SourceHanSansCN-Normal.otf');       /*字体源文件*/
}
*{
	padding: 0;
	margin: 0;
	font-family: source;
}
#main{
	background-image: url(../img/bg.png);
	background-position: 0 0;
	background-size: cover;
}

#page1{
	width: 100%;
	height: calc(100vh - 94px);
	display: flex;
	align-items: center;
	justify-content: center;
}
#page1-right{
	margin-left:10%;
	width: 60%;
}
#page1-right img{
	width: 17vw;
	margin-left: 21px;
}
.row-flex{
	display: flex;
	align-items: center;
	flex-direction: row;
}
.main-text{
	font-size:60px;
	font-family:PingFangSC-Semibold,PingFang SC;
	font-weight:600;
	color:rgba(39,53,71,1);
}
#make-up{
	width:70px;
	height:40px;
	border-radius:4px;
	border:2px solid rgba(44,128,255,1);
	font-size:24px;
	font-family:PingFangSC-Regular,PingFang SC;
	font-weight:400;
	color:rgba(39,53,71,1);
	line-height: 40px;
	text-align: center;
	margin-left: 10px;
}
.sub-text{
	font-size:26px;
	font-family:PingFangSC-Regular,PingFang SC;
	font-weight:400;
	color:rgba(39,53,71,0.7);
	height: 30px;
	line-height: 30px;
	margin-top: 34px;
}
#interval{
	padding-left: 13px;
	border-left: 1px solid rgba(39,53,71,0.7);
	margin-left: 17px;
}
#download-button{
	width: 270px;
	height: 70px;
	margin-top: 92px;
}
.no-comparison-no-harm{
	display: inline-flex;
	align-items: center;
	flex-direction: column;
	margin-left: 42px;
}
.model{
	width: 318px;
	height: 430px;
	box-shadow: 8px -8px var(--box-shadow-color);
	border-radius:10px;
}
.flat-dot{
	width:30px;
	height:6px;
	border-radius:3px;
	margin-top: 20px;
}
.explain-text{
	margin-top: 10px;
	font-size:18px;
	font-family:PingFangSC-Regular,PingFang SC;
	font-weight:400;
}
#cut{
	width: 100%;
	height: 70px;
	background-color: #0064FA;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: scroll-out-for-cut 0.5s;
}
#cut>img{
	width:30px;
}
.page{
	position: relative;
	width: 100%;
	height: 1050px;
	padding-left: 260px;
	box-sizing: border-box;
	padding-top: 68px;
}
.num-line{
	position: absolute;
	left: 149px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.num-line>img{
	width: 62px;
	height: 62px;
	animation:bubble-out 0.5s
}
.num-line>div{
	width: 1px;
	background-color: #979797;
	animation: scroll-out 0.5s;
	height: 988px;
}
.pages-main-title{
	font-size:30px;
	font-weight:600;
	color:rgba(87,87,87,1);
	animation: gradually-get-in 0.5s;
}
.pages-sub-title{
	font-size:20px;
	font-weight:400;
	color:rgba(87,87,87,1);
	margin-top: 14px;
	animation: gradually-get-in 0.5s;
}
.pages-sub-title>p{
	line-height:34px;
}
#page25{
	width: 1400px;
	/* height: 628.57px; */
	margin-top: 44px;
	animation: gradually-get-in 0.5s;
}
.page-down-tick{
	position: absolute;
	width: 28px;
	height: 16px;
	bottom: 20px;
	left: 945px;
}
#page3-gear{
	width: 1400px;
	height: 700px;
	margin-top: 44px;
	position: relative;
}
#page35{
	width: 1400px;
	height: 700px;
	animation:bubble-out 0.5s
}
#page36{
	width: 1400px;
	height: 700px;
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	animation: scroll-out-for-cover 3s;
}
#page361{
	width: 180px;
	height: 180px;
	position: absolute;
	z-index: 3;
	left: 170px;
	top: 144px;
	display: none;
	animation:bubble-out 0.5s
}
#page362{
	width: 136px;
	height: 136px;
	position: absolute;
	z-index: 3;
	right: 170px;
	top: 54px;
	display: none;
	animation:bubble-out 0.5s
}
#page363{
	width: 104px;
	height: 104px;
	position: absolute;
	z-index: 3;
	right: 360px;
	top: 322px;
	display: none;
	animation:bubble-out 0.5s
}
#page37{
	width: 132px;
	height: 132px;
	position: absolute;
	z-index: 3;
	right: 634px;
	top: 349px;
	animation:bubble-out 0.5s
}
#page45{
	width: 1400px;
	height: 700px;
	position: relative;
	margin-top: 44px;
	animation: gradually-get-in 0.5s;
}
.bg1{
	position: absolute;
	left: 0;
	background-position: 0 0;
	background-size: cover;
	width: 100%;
	z-index: 5;
	height: 100%;
	/* background-attachment:fixed; */
}
.bg3{
	position: absolute;
	left: 50%;
	background-position: right top;
	background-size: cover;
	width: 50%;
	z-index: 7;
	height: 100%;
	/* background-attachment:fixed; */
}
.pointer{
	width: 244px;
	height: 700px;
	background-image: url(../img/icon_contrast.png);
	background-position: 0 0;
	background-size: 244px 700px;
	position: absolute;
	left: calc( 50% - 122px );
	z-index: 10;
	bottom: 0;
	cursor: e-resize;
	user-select:none;
}
#page46{
	width: 270px;
	height: 70px;
	margin-left: 565px;
	margin-top: 50px;
	animation: gradually-get-in 0.5s;
}
.footer{
	margin-top:100px;
}
/* 公用的几个动画效果 */
@keyframes gradually-get-in {
	0% {
		transform: translateY(-50px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: inherit;
	}
}
@keyframes bubble-out {
	0% {
		transform:scale(0,0);
	}
	75%{
		transform:scale(1.2,1.2);
	}
	100% {
		transform: scale(1,1);
	}
}
@keyframes scroll-out {
	0% {
		/* transform: scale(1,0); */
		height: 0;
	}
	100% {
		/* transform: scale(1,1); */
		height: calc(100vh - 62px);
	}
}
@keyframes scroll-out-for-cover {
	0% {
		/* transform: scale(1,0); */
		height: 0;
	}
	100% {
		/* transform: scale(1,1); */
		height: 700px;
	}
}
@keyframes scroll-out-for-cut {
	0% {
		/* transform: scale(1,0); */
		height: 0;
	}
	100% {
		/* transform: scale(1,1); */
		height: 70px;
	}
}