@font-face {
	font-family: 'Avenir Next';
	src: url('./Avenir Next.ttc');
}

@font-face {
	font-family: 'SFText';
	font-weight: 300;
	src: url('./GlowSansTC-Normal-Medium.otf') format("opentype");
}

@font-face {
	font-family: 'SFText';
	font-weight: 500;
	src: url('./SweiSansCJKjp-Mediumsubset.ttf') format("opentype");
}

@font-face {
	font-family: 'SFText';
	font-weight: 700;
	src: url('./SweiSansCJKjp-Boldsubset.ttf') format("opentype");
}

@font-face {
	font-family: 'SFText';
	font-weight: 900;
	src: url('./SweiSansCJKjp-Blacksubset.ttf') format("opentype");
}


/* @font-face {
	font-family: 'SFText';
	font-weight: 300;
	src: url('./SFCompactText-Medium.otf') format("opentype");
}

@font-face {
	font-family: 'SFText';
	font-weight: 500;
	src: url('./SFCompactText-Semibold.otf') format("opentype");
}

@font-face {
	font-family: 'SFText';
	font-weight: 700;
	src: url('./SFCompactText-Bold.otf') format("opentype");
}

@font-face {
	font-family: 'SFText';
	font-weight: 900;
	src: url('./SFCompactText-Heavy.otf') format("opentype");
} */

html {
	font-size: 16px
}

body,
html {
	width: 100%;
	height: 100%
}

body {
	min-height: 100vh
}

blockquote,
body,
button,
code,
dd,
div,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
legend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
	margin: 0;
	padding: 0
}

body {
	background: #fff;
	font-family: Avenir next, SFText, -apple-system, Helvetica Neue, Helvetica, PingFang SC, Microsoft YaHei, sans-serif
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 400;
	font-size: 100%
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style: normal;
	font-weight: 400
}

a,
a:hover {
	text-decoration: none
}

img {
	border: none
}

li,
ol,
ul {
	list-style: none
}

button,
input,
select,
textarea {
	font: 14px Verdana, Helvetica, Arial, sans-serif
}

table {
	border-collapse: collapse
}

html {
	overflow-y: scroll
}

@media screen and (max-width: 414px) {
	.content-animation {
		-webkit-animation: none;
		animation: none
	}
}

@media screen and (min-width: 375px) {
	html {
		font-size: calc(100% + (200vw - 750px)/39);
		font-size: calc(16px + (200vw - 750px)/39)
	}
}

@media screen and (min-width: 414px) {
	html {
		font-size: calc(112.5% + (400vw - 1656px)/586);
		font-size: calc(18px + (400vw - 1656px)/586)
	}
}

@media screen and (min-width: 600px) {
	html {
		font-size: calc(125% + (400vw - 2400px)/400);
		font-size: calc(20px + (400vw - 2400px)/400)
	}
}

@media screen and (min-width: 1000px) {
	html {
		font-size: calc(137.5% + (600vw - 6000px)/1000);
		font-size: calc(22px + (600vw - 6000px)/1000)
	}
}

@media screen and (max-width: 414px) {
	body {
		background-color: #0f0f0f
	}
}

.leadingFadeIn {
	animation: leadingFadeIn .5s ease;
}

@keyframes leadingFadeIn {
	from {
		-webkit-transform: translateY(-100px);
		transform: translateY(-100px);
		opacity: 0;
	}

	to {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

.leadingFadeOut {
	animation: leadingFadeOut .5s ease;
}

@keyframes leadingFadeOut {
	from {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}

	to {
		-webkit-transform: translateY(-100px);
		transform: translateY(-100px);
		opacity: 0;
	}
}



.bgIn {
	background-position: 0 0;
	position: fixed;
	width: 48.93370805rem;
	height: 24.7148289rem;
	top: 45%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)scale(1.4);
	background-size: 51.00016532rem 52.07472309rem;
	z-index: -1;
	opacity: 0;
}

@media screen and (max-width: 414px) {
	.bgIn {
		opacity: 1;
	}
}

.menuBg {
			    width: 100%;
			    height: 100%;
			    position: fixed;
			    top: 50%;
			    left: 50%;
			    -webkit-transform: translate(-50%, -50%);
			    object-fit: cover;
			    z-index: -1;
			   }