a,
body,
div,
h1,
html,
li,
span,
ul {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline
}

html {
	line-height: 1
}

ul {
	list-style: none
}

a {
	display: block;
	text-decoration: none;
}

img {
	max-width: 100%;
}

.outline_hidden {
	text-align: -99999px;
	font-size: 0
}

body {
	background-color: #000;
	font-family: "微軟正黑體", Nanum Barun Gothic, sans-serif;
}

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

p {
	font-size: 1.2rem;
	padding: 0;
	margin: 0;
	margin-top: 0.5rem;
}

h1 {
	font-size: 1.3rem;
	font-weight: bolder;
	margin-top: 0.5rem;
}

/* main */

#main {
	width: 100vw;
	position: relative;
}

.wrap {
	position: relative;
	overflow: hidden;
	/* min-width: 1580px; */
}

.header {
	position: relative;
	background: transparent;
	z-index: 1;
	background: transparent url(../img/main-bg.jpg) no-repeat center 0;
	height: 1123px;
	width: 100%;
	background-size: cover;
}

.header:before {
	content: "";
	background: url(../img/light.png);
	background-size: contain;
	height: 811px;
	width: 110%;
	position: absolute;
	top: 10%;
	left: 0;
	mix-blend-mode: overlay;
	opacity: 0.7;
	filter: blur(1.3);
	animation: light infinite 2s ease-in-out;
}

@keyframes light {
	from {
		left: 10%;
		top: 0;
	}

	to {
		left: -10%;
		top: 10%;
	}
}

.header::after {
	content: "";
	background: url(../img/light-2.png);
	filter: blur(1.3);
	height: 807px;
	width: 1003px;
	position: absolute;
	top: 0;
	right: 0;
	mix-blend-mode: overlay;
	opacity: 0.5;
	transform: rotate(19deg);
	animation: light2 infinite 4s ease;
}

@keyframes light2 {
	from {
		right: 10%;
		top: 30%;
	}

	to {
		right: -10%;
	}
}

#main .logo {
	width: 100%;
	max-width: 100%;
	position: absolute;
	text-align: center;
	top: 1.6em;
	z-index: 999;
}

#main .logo:hover {
	filter: brightness(1.2);
}

.titBox {
	position: absolute;
	z-index: 1;
	width: 100%;
	max-width: 100%;
	top: 0;
	text-align: center;
	margin-top: 21vh;
}

.titBox .title {
	position: relative;
	margin: 11px auto;
}

.titBox .title img {
	max-height: 39vh;
	position: relative;
}


.btnBox {
	position: absolute;
	text-align: center;
	width: 100%;
	max-width: 100%;
	z-index: 999;
	left: 0;
	top: 44vh;
	margin: auto;
}

.btn-up {
	display: flex;
	justify-content: center;
}

.btn-up-m {
	display: none;
}

.btnBox ul li a {
	background: url(../img/main-btns.png) no-repeat;
	width: 162px;
	height: 32px;
	cursor: pointer;
	margin: 0 10px;
}

.btnBox ul li a:hover {
	background: url(../img/main-btns_hover.png) no-repeat;
}

.btnBox ul li:nth-child(2) a {
	background-position-x: -163px;
}

.btnBox ul li:last-child a {
	background-position-x: -326px;
}

.btn-down {
	margin-top: 111px;
}

.btn-down a {
	background: url(../img/mian-laboom.png) no-repeat;
	width: 282px;
	height: 173px;
	margin: auto;
	background-position-y: center;
}

.btn-down a:hover {
	filter: brightness(1.3);
}

.bg {
	position: relative;
	margin-top: 89px;
	z-index: 99;
}

/* navbar */

.main .navbar {
	position: absolute;
	top: -453px;
	z-index: 1001;
	width: 100%;
}

.main .nav li {
	padding: 0 10px;
	cursor: pointer;
}

.main .nav {
	width: 59%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: auto;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	top: -3px;
	left: 50%;
	transform: translateX(-50%);
}

.main .nav li>a>div {
	background-size: contain !important;
}

.main .nav li a>div>img:hover, .main .nav li a>div>img:active, .main .nav li.on a>div>img {
	opacity: 0;
}


.main .nav.fixed {
	position: fixed;
	top: 0;
}

/* page01 */

.main .cont_01 {
	padding-bottom: 60px;
	background: #322774 url(../img/bgshapes_02.png) no-repeat center 0;
}

.cont_01 .item::before {
	content: "";
	background: url(../img/c1.png);
	width: 596px;
	height: 764px;
	position: absolute;
	left: -376px;
	bottom: -186px;
}

.cont_01 .frame::before {
	content: "";
	background: url(../img/c2.png);
	width: 544px;
	height: 886px;
	position: absolute;
	right: -489px;
	top: 25px;
	z-index: 1;
}

.cont_01 .describe2 .frame {
	position: relative;
	background: url(../img/frame-border.png) no-repeat;
	width: 960px;
	height: 700px;
	margin: auto;
	margin-top: 1rem;
}

.cont_01 .describe .l:after {
	content: "";
	background: url(../img/npc01.png)no-repeat center;
	width: 120px;
	height: 164px;
	margin-left: 16px;
	display: inline-block;
}

.cont_01 td {
	padding: 3%;
}

/* page02 */

.main .cont_02 {
	padding-bottom: 60px;
	background: #322774 url(../img/bgshapes_02.png) no-repeat center 0;
}

.cont_02 .item::before {
	content: "";
	background: url(../img/c2-1.png);
	width: 612px;
	height: 538px;
	position: absolute;
	left: -340px;
	bottom: -89px;
}

.cont_02 .describe2 .frame {
	position: relative;
	background: url(../img/frame-border2.png) no-repeat;
	width: 960px;
	height: 820px;
	margin: auto;
	margin-top: 1rem;
}

.cont_02 .frame::before {
	content: "";
	background: url(../img/c2-2.png);
	width: 532px;
	height: 600px;
	position: absolute;
	right: -484px;
	top: 437px;
	z-index: 1;
}

.cont_02 .describe .l:after {
	content: "";
	background: url(../img/npc02.png)no-repeat center;
	width: 120px;
	height: 176px;
	position: relative;
	margin-left: 16px;
}

.cont_02 .frame::after {
	content: "";
	background: url(../img/prop01.png);
	width: 120px;
	height: 151px;
	position: absolute;
	left: -15%;
	top: 30%;
}



/* page03 */

.cont_03::after {
	bottom: 230px !important;
}

.main .cont_03 {
	padding-bottom: 150px;
	background: #322774 url(../img/bgshapes_03.png) no-repeat center 0;
}

.cont_03 .item::before {
	content: "";
	background: url(../img/c3-1.png);
	width: 570px;
	height: 896px;
	position: absolute;
	left: -394px;
	bottom: -384px;
	z-index: 1;
}

.cont_03 .frame::before {
	content: "";
	background: url(../img/c3-2.png);
	width: 500px;
	height: 1066px;
	position: absolute;
	right: -466px;
	bottom: -197px;
	z-index: 1;
}

.cont_03 .describe2 .frame {
	position: relative;
	background: url(../img/frame-border3.png) no-repeat;
	width: 960px;
	height: 1420px;
	margin: auto;
	margin-top: 1rem;
}

.cont_03 .describe .l:after {
	content: "";
	background: url(../img/npc03.png)no-repeat center;
	width: 166px;
	height: 158px;
	margin-left: 16px;
	margin-top: 19px;
	display: inline-block;
}

.cont_03 .frame::after {
	content: "";
	background: url(../img/prop02.png);
	width: 129px;
	height: 630px;
	position: absolute;
	left: -15%;
	bottom: 4%;
}

/* common*/
.content {
	position: relative;
	z-index: 98;
}

.content::before {
	content: "";
	background: url(../img/bgshapes_01.png) no-repeat center 0;
	width: 100%;
	height: 434px;
	position: absolute;
	top: -403px;
}

.cont {
	width: 100%;
	text-align: center;
}

.cont::before {
	content: "";
	background: url(../img/s1.png)no-repeat;
	width: 460px;
	height: 657px;
	position: absolute;
	right: -15px;
	top: 0;
}

.cont::after {
	content: "";
	background: url(../img/s2.png)no-repeat;
	width: 288px;
	height: 285px;
	position: absolute;
	left: 36px;
	bottom: 68px;
}

/* .cont .describe ul {
	float: left;
} */

.cont .describe .l {
	display: flex;
	position: relative;
	align-items: center;
}

.cont .describe ul li {
	padding-left: 33px;
}

.cont .describe ul li::before {
	content: "";
	background: url(../img/btn01.png);
	width: 23px;
	height: 23px;
	position: absolute;
	margin-left: -27px;
	margin-top: 3px;
}

.cont .describe ul li:nth-child(2)::before {
	background: url(../img/btn02.png);
}

.cont .describe ul li:nth-child(3)::before {
	background: url(../img/btn03.png);
}

.cont .describe ul li:nth-child(4)::before {
	background: url(../img/btn04.png);
}

.cont .describe ul li:nth-child(5)::before {
	background: url(../img/btn05.png);
}

.cont .describe ul li:nth-child(6)::before {
	background: url(../img/btn06.png);
}

.cont .title {
	position: relative;
	top: -242px;
	color: #fff;
}

.cont .title img {
	max-width: 100%;
	margin-bottom: 1rem;
}

.cont .d {
	position: relative;
	top: -211px;
	margin-top: 6rem;
}

.cont .d>.tit {
	color: #fef36a;
}

.cont .d>.tit::before {
	content: "★";
}

.cont .d>.tit:after {
	content: "★";
}

.cont .d>.tit+p {
	color: #bd7aff;
	font-size: 0.9rem;
	padding: 0;
}

.cont .describe {
	color: #fff;
	line-height: 1.8rem;
	text-align: left;
	margin: auto;
	font-size: 1rem;
	border-radius: 85px;
	background: linear-gradient(48deg, #7148b5, #7c3cff, #8769e9, #9103ff, #715dd3);
	display: inline-block;
	padding: 47px 129px;
}

.cont .describe::before {
	content: "";
	position: absolute;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	border-radius: 79px;
	background: #402694;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}




.cont .item {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 3rem;
	width: 60%;
	margin: auto;
	margin-top: 3rem;
}

.cont .item>div {
	margin: 0 10px;
}

table {
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	border: 0;
	border-collapse: collapse;
	border-radius: 83px;
	overflow: hidden;
	width: calc(100% - 18px);
	height: calc(100% - 18px);
}

th {
	border: solid 1px #8769e9;
	padding: 35px 8px;
}

td {
	border: dashed 1px #8769e9;
	border-right: solid 1px #8769e9;
	border-left: solid 1px #8769e9;
	text-align: center;
	line-height: 1.3rem;
}

/* notic */

.notic {
	background: #170f44;
	color: #fff;
	position: relative;
	z-index: 999;
	text-align: center;
}

.notic:before {
	content: "";
	background: url(../img/notic.png) no-repeat;
	width: 65px;
	height: 65px;
	position: absolute;
	top: -32.5px;
	transform: translateX(-50%);
}

.notic::after {
	content: "";
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(179, 147, 255, 0.2));
	width: 100%;
	height: 100%;
	position: absolute;
	top: -100%;
	left: 0;
	z-index: -11;
}

.notic ul {
	line-height: 2rem;
	padding: 50px 0 60px;
}

/* copyright */

.copyright {
	text-align: center;
	padding: 30px 0;
	background: #0c0820;
	text-align: center;
	position: relative;
	z-index: 99;
}

@media (min-width: 2560px) {
	.header {
		height: 1360px;
		width: 100%;
		background-size: cover;
	}

	.content::before {
		content: "";
		background: url(../img/bgshapes_01.png) no-repeat center 0;
		width: 100%;
		height: 462px;
		position: absolute;
		top: -432px;
		background-size: cover;
	}

	.main .cont {
		width: 100%;
		background-size: cover !important;
	}

	.main .cont .title {
		position: relative;
		top: -276px;
	}
}

@media (max-width: 1230px) {
	.header {
		height: 1317px;
	}

	.main .nav {
		flex-wrap: wrap;
		width: 100%;
	}

	.main .navbar.fixed {
		top: -27px;
	}

	.main .nav img {
		max-width: 300px;
	}

	#main {
		width: auto;
		height: auto;
		position: relative;
	}

	#main .logo a img {
		width: 150px;
	}

	.cont .describe {
		padding: 40px 10%;
	}

	.cont .describe .l {
		flex-direction: column;
	}

	.cont .describe2 .frame {
		border-radius: 53px;
		background: linear-gradient(48deg, #7148b5, #7c3cff, #8769e9, #9103ff, #715dd3);
		display: inline-block;
		width: 100%;
	}

	.cont .describe2 .frame::after {
		content: "";
		position: absolute;
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		border-radius: 47px;
		background: #402694;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.cont .describe2 .frame table {
		z-index: 1;
	}

	.cont::before {
		display: none;
	}

	.cont .frame::before {
		display: none;
	}

	.cont .item::before {
		display: none;
	}

	.cont_03::after {
		bottom: 30px !important;
	}

	.cont::after {
		background-position-y: bottom;
		max-width: 50%;
		bottom: 30px;
		background-size: contain;
	}

	table {
		border-radius: 53px;
	}


}

@media (max-width: 750px) {

	.main .cont {
		padding-bottom: 85% !important;
	}

	.bg {
		margin-top: 0;
	}

	.cont .title {
		top: 46px;
	}

	.cont .d {
		top: 104px;
	}

	.header {
		position: relative;
		z-index: 1;
		background: #322774 url(../img/main-bg-s.png) no-repeat center 0;
		width: 100%;
		background-size: cover;
		height: 928px;
	}

	.header::after {
		display: none;
	}

	.header::before {
		display: none;
	}

	.main .navbar {
		top: -201px;
	}

	.content::before {
		display: none;
	}

	.btnBox ul li a {
		margin: 0;
	}

	.main .nav img {
		max-width: 221px;
	}

	.cont .item {
		flex-direction: column;
	}

	.cont .item>div {
		margin: 12px 10px;
	}

	th img {
		max-width: 100px;
	}
}

@media (max-width: 480px) {
	.header {
		width: 100%;
		background-size: cover;
	}

	.main .navbar {
		top: -110px;
	}

	.main .nav li {
		padding: 2px 5px;
	}

	.main .nav img {
		max-width: 174px;
	}

	.btnBox ul li:nth-child(1) a {
		display: none;
	}

	.btn-up {
		display: none;
	}

	.btn-up-m {
		display: flex;
		justify-content: center;
	}

	.titBox .title img {
		max-width: 90%;
	}

	.cont .describe {
		padding: 47px 26px;
	}

	.cont .describe .l br{
		display: none;
	}

	.cont .describe .l:after {
		width: 100%;
	}

	.cont_01 .describe2 .frame {
		height: 800px;
	}

	.cont_02 .describe2 .frame {
		height: 1100px;
	}

	.main-bg {
		position: absolute;
		top: 0;
		left: 0;
		height: 100vh;
	}

	.main-bg>div {
		position: relative !important;
	}

	.titBox {
		margin-top: 3rem;
	}

	.btnBox {
		top: 0;
	}

	.btn-down {
		margin-top: 0;
	}

	.btn-down a {
		max-width: 178px;
		background-size: contain;
		background-position: center 5px;
	}
}

@media (max-width: 375px) {
	.header {
		height: 100vh;
		width: 111%;
	}

	.main .nav img {
		max-width: 166px;
	}
}