html,body {
	margin:0;padding:0;
}
html {
	font-size: 7.35vw;
}
@media (min-width: 1360px) {
	html {
		font-size: 100px;
	}
}

body {
	font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;
	font-size: 16px;
    color:#3D3E43;
    background-image: url(../images/bg-pc.svg);
    background-position: 50% 0;
    background-size: 3000px auto;
    background-repeat: no-repeat;
}
h1,h2,h3 {color:#03081A;font-weight: 700;}
ul,ol {list-style: none;margin: 0;padding: 0;}
article,footer {max-width: 1200px;margin: 0 auto;}
a,a:visited {
	color: #4069FF;
	text-decoration: none;
	font-weight: 700;
}
.swiper-container {
	width: 100%;
	height: 100vh;
}
.page-1 {
	height: 80vh;
	display: flex;
	align-items: center;
}
.page-1 h1 {
	font-size: 1rem;
	color: transparent;
	background-image: url(../images/logo-2021.svg);
	background-size: auto 90%;
	background-repeat: no-repeat;
	background-position: 0 50%;
}
.page-1 p {position: relative;font-size: .56rem;line-height: 1.5;letter-spacing: .1rem;}
.page-1 p::before {
	content: '';position: absolute;
	right: 102%;
	top: 8%;
	width: .24rem;
	height: .24rem;
	background-image: url(../images/icondot.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
article h2 {
	font-size: .56rem;
	position: relative;
}
article h2::before {
	content: '';position: absolute;
	right: 102%;
	top: 50%;
	transform: translateY(-50%);
	width: .20rem;
	height: .28rem;
	background-image: url(../images/iconplus.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
article p {
	font-size: .4rem;font-weight: 300;letter-spacing: .1rem;line-height: 1.5;
}
.join {
	text-align: center;
}
.join .btn {
	padding: 10px 40px;
    font-size: 32px;
    font-weight: 500;
    color: #fff;
    background-image: linear-gradient(180deg,#4069FF,#955af5);
    border-radius: 50px;
    display: inline-block;
}
.join .btn:hover {
	background-image: linear-gradient(180deg,#305bf7,#8641f5);
}

.page-3 {margin:1rem 0;}
.page-4 strong {font-weight: 500;}
.team {
	display: flex;
	grid-template-columns: repeat(6,1fr);
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
}
.member {width: 16.66%;padding-top: 24%;position: relative;margin: 0;overflow: hidden;}
.member .photo {position: absolute;left: 0;top: 0;object-fit: cover;object-position: 50% 30%;width: 100%;height: 100%;vertical-align: top;}
.member-info {
	position: absolute;left: 0;top: 0;right: 0;bottom: 0;visibility: hidden;
	padding:.2rem;
	background-color: rgba(0,0,0,.25);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	font-weight: 300;
}
/*.member:hover .photo {transform: scale(1.05);transition: transform 1s;}*/
.member:hover .member-info {visibility: visible;}
.member-info .name {font-size: .32rem;margin:0;color: inherit;}
.member-info .title {margin: 0;font-size: .18rem;}
.member-info .intro {margin-bottom: 0;}

.event-list {margin: .8rem 0 0;}
.event-list::before {
	content: '';
	display: block;
	margin: 0 auto;
	width: 1.5rem;
	height: .08rem;
	border-radius: 1em;
	background-color: #4069FF;
}
.event-item {
	display: flex;
	align-items: center;
	margin: .8rem 0 0;
}
/*.event-item:first-child {margin:0;}*/
.event-item .avatar {
	display: block;
	position: relative;
	flex-shrink: 0;
	width: 2.6rem;
	height: 3.46rem;
	margin: 0 .5rem 0 0;
}
.event-item .avatar img {
	/*position: absolute;
	left: 0;top: 0;*/
	vertical-align: top;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.event-detail {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.event-detail p {
	letter-spacing: .05rem;
}
.event-detail .user-info {
	
}
.event-detail .user-info .name {
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	font-size: .36rem;
	letter-spacing: .05rem;
}
.event-detail .user-info .title {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0 .16rem;
	font-size: .28rem;
	margin-right: auto;
	letter-spacing: .05rem;
}
.event-detail .user-info .intro {
	display: block;
	font-size: .22rem;
	margin: .05rem 0 0;
}
.event-content {margin: .2rem 0 0;}
.event-title {
	font-size: .44rem;margin: 0;
	letter-spacing: .05rem;
}
.event-infos {
	margin: 0;font-size: .18rem;
	color: #69708A;
}
.event-intro {
	color: #3D3E43;
	font-size: .22rem;
	margin: .15rem 0 0;
}

footer {text-align: center;margin-top: 1rem;padding: 0 0 .5rem;}
/*.event-item:nth-child(2n) {
	justify-content: flex-end;
}
.event-item:nth-child(2n) .avatar {
	order:2;
	margin: 0 0 0 .5rem;
}
.event-item:nth-child(2n) .event-detail {
	text-align: right;
}*/

@keyframes scrollArrow {
	0% {transform:translate3d(-50%,0%,0);}
	50% {transform:translate3d(-50%,15%,0);}
	100% {transform:translate3d(-50%,0%,0);}
}

@media (orientation: landscape) and (max-width: 1360px) {
	article {padding: 0 .5rem 0 1rem;}
}
@media (orientation: landscape) and (max-width: 1024px) {
	.team {display: block;width: auto;padding: 0 1rem;}
	.member {display: flex;margin-top:.5rem;padding: 0;height: 3.6rem;width: 100%;}
	.member:first-child {margin: 0;}
	.member .photo {position: static;width: 25%;}
	.member-info {position: static;visibility: visible;padding: 0;background-color: transparent;color:#03081a;display: block;margin-left: .5rem;}
	.member-info .name {font-size: .56rem;}
	.member-info .title {font-size: .36rem;color: #69708A;}
	.member-info .intro {margin-top: .4rem;font-size: .3rem;}
}
@media (orientation: portrait) and (max-width: 1024px) {
	html,body,.page-container,.page-wrapper {height: 100%;}
	html {
		font-size: 13.3333vw;
	}
	body {
		background-size: contain;
	}
	[class^="page-"] {
		height: 100%;
		position: relative;
	}
	article {margin:0;position: relative;z-index: 1;padding-left:.6rem;padding-right: .4rem;}
	.swiper-users,
	.swiper-party {padding: 0;height: 100%;}
	article h2 {font-size: 1rem;}
	article h2::before {display: none;}
	article p {font-size: .44rem;}
	.join {margin-top: 1rem;}
	.join .btn {font-size: 20px;}
	footer {display: none;}
	.swiper-pagination {
		position: absolute;
		left: 0;
	    right: 0;
		bottom: .2rem;
		bottom: calc(.2rem + constant(safe-area-inset-bottom));
		bottom: calc(.2rem + env(safe-area-inset-bottom));
	}
	.swiper-pagination-bullet {margin:0 2px;}
	.page-1 h1 {margin-top: 0;font-size: 1.2rem;}
	.page-1 p::before {display: none;}
	.page-1 p {line-height: 6vh;font-size: .48rem;}
	
	.page-2 p {line-height: 4vh;}
	.page-3 {margin: 0;}
	.member {
		padding-top: 0;
		width: 100%;
		flex-shrink: 0;
	}

	.member-info {
		position: relative;
		visibility: visible;
		background-color: transparent;
		color: #03081a;
		padding: .3rem .5rem;
		display: block;
	}
	.member-info::before,.event-item .avatar::before {
		content: '';
		position: absolute;
		height: 1.7rem;
		left: 0;right: 0;bottom: 99.4%;
		background-image: url(../images/photo-mask.svg);
		background-size: cover;
		background-repeat: no-repeat;
	}
	.member .photo {
		position: static;
		height: 60%;

	}
	.member-info .name,
	.member-info .title {
		display: inline-block;
		vertical-align: middle;
		
	}
	.member-info .name {
		font-size: .6rem;
	}
	.member-info .title {
		font-size: .36rem;
		margin-left: .14rem;
		color: #989eb4;
		font-weight: normal;
	}
	.member-info .intro {
		font-weight: 300;
		line-height: 1.8;
		letter-spacing: .04rem;
	}
	.event-list {margin: 0;}
	.event-list::before {display: none;}
	.event-item {display: block;margin: 0;}
	/*.event-item:first-child {margin:0;}*/
	.event-item .avatar {
		width: 100%;
		height: 50%;
		margin: 0;
	}
	.event-item .avatar::before {
		bottom: -2px;
	}
	.event-detail {
		display: block;
		padding: .3rem .5rem;
	}
	.event-detail .user-info {
		
	}
	.event-detail .user-info .name {
		font-size: .6rem;
	}
	.event-detail .user-info .title {
		font-size: .36rem;
	}
	.event-detail .user-info .intro {
		line-height: 1.8;
		letter-spacing: .04rem;
		font-size: inherit;
	}
	.event-content {}
	.event-title {
		
	}
	.event-infos {
		
	}
	.event-intro {
		font-size: inherit;
	}
	/* 翻页按钮 */
	.icon-scroll {
		position: fixed;z-index: 10;left: 50%;bottom:.5rem;color:transparent;width:.56rem;height:.56rem;
		bottom: calc(.5rem + constant(safe-area-inset-bottom));
		bottom: calc(.5rem + env(safe-area-inset-bottom));
		transform:translate3d(-50%,0%,0);
		opacity: .2;
		background-image: url(../images/uarrow.png);
		background-size: cover;
		animation: scrollArrow 1.5s infinite;
	}
}