@charset "UTF-8";
/*--------------------------------------------*/
@keyframes floatY {
				0% {
								transform: translateY(0);
				}
				100% {
								transform: translateY(10px);
				}
}
@keyframes floatX {
				0% {
								transform: translateX(-3px);
				}
				100% {
								transform: translateX(3px);
				}
}
@keyframes scaleX {
				0% {
								opacity: 0.8;
								transform: scaleX(0.9);
				}
				100% {
								opacity: 0.4;
								transform: scaleX(1.05);
				}
}
@keyframes space_floatX {
				0% {
								transform: scale(1);
								background-position-x: 100%;
								opacity: 1;
				}
				33% {
								transform: scale(1.04);
				}
				50% {
								opacity: 0.8;
				}
				67% {
								transform: scale(1);
				}
				100% {
								transform: scale(1.06);
								background-position-x: 0%;
								opacity: 1;
				}
}
@keyframes fadeUp {
				0% {
								opacity: 0;
								transform: translateY(40%);
				}
				100% {
								opacity: 1;
								transform: translateY(0%);
				}
}
@keyframes scaleFade {
				0% {
								opacity: 0.8;
								transform: scale(1);
				}
				100% {
								opacity: 0;
								transform: scale(2);
				}
}
@keyframes floatShadow {
				0% {
								opacity: 0.8;
								transform: scale(1.2);
				}
				100% {
								opacity: 1;
								transform: scale(0.8);
				}
}
html {
				font-size: 16px;
}

body {
				font-family: "Roboto", "Noto Sans TC", "Microsoft Jhenghei", "微軟正黑", sans-serif;
}

a {
				color: inherit;
}
a:hover {
				text-decoration: none;
}

.area {
				max-width: 1280px;
				margin-left: auto;
				margin-right: auto;
}

.obj_box {
				line-height: 1.2;
}
.obj_box .obj_name {
				color: #6fc1c1;
				font-size: 1.25em;
}
.obj_box .obj_valu {
				color: #fff;
				font-size: 1.75em;
				font-weight: 900;
}
.obj_box .strong {
				color: #f7e3aa;
}

@media (max-width: 1280px) {
				.area {
								max-width: 1140px;
				}
}
@media (max-width: 1080px) {
				.area {
								max-width: 960px;
				}
}
@media (max-width: 768px) {
				.area {
								max-width: 90%;
				}
}
.all_bg {
				position: fixed;
				left: 0;
				top: 0;
				z-index: 1;
				width: 100%;
				height: 100vh;
}
.all_bg img {
				width: 100%;
}
.all_bg .kv_bg {
				width: 100%;
				height: 100vh;
				background: url("../img/space.jpg") center/cover no-repeat;
}
.all_bg .kv_ship {
				position: absolute;
				top: 58%;
				left: 50%;
				width: 75%;
				transform: translate(-50%, -50%);
}

.all_wrap {
				position: relative;
				z-index: 2;
}

.g_kv .kv_tit {
				position: relative;
}
.g_kv .kv_tit .aos_wrap {
				padding-top: 13.6%;
}
.g_kv .kv_tit img {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
}
.g_kv .kv_tit .layer2 {
				mix-blend-mode: overlay;
}
.g_kv .kv_tit .layer3,
.g_kv .kv_tit .layer4 {
				animation: floatX 3s linear infinite;
				animation-direction: alternate;
				opacity: 0.8;
}
.g_kv .kv_tit .layer4 {
				animation-direction: alternate-reverse;
}

#particles-js {
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 1;
				background-color: #000022;
				background: linear-gradient(0deg, #000022, #020217);
}

body {
				overflow-x: hidden;
}

.g_kv {
				position: relative;
				z-index: 2;
}
.g_kv img {
				width: 100%;
}
.g_kv .vd_wrap {
				position: relative;
				padding-top: 56.25%;
}
.g_kv .vd_wrap .vd {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
}
.g_kv .kv_bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
}
.g_kv .kv_bg::after {
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 30vh;
				background: linear-gradient(to top, #000022 5%, rgba(0, 0, 34, 0));
}
.g_kv .kv_tit {
				position: relative;
				padding: 4vw 10%;
				width: 70%;
				margin: 0;
}
.g_kv .kv_tit img {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
}
.g_kv .kv_tit .layer2 {
				mix-blend-mode: overlay;
}
.g_kv .kv_tit .layer3,
.g_kv .kv_tit .layer4 {
				animation: scaleX 6s linear infinite;
				animation-direction: alternate;
				opacity: 0.8;
}
.g_kv .kv_tit .layer4 {
				animation-direction: alternate-reverse;
}
.g_kv .kv_tit .page_title {
				padding-left: 0.5rem;
				font-size: 3.8em;
				font-weight: 900;
				color: #fff;
				text-shadow: 3px 3px 0 #3174d1;
}

.g_main {
				position: relative;
				z-index: 3;
				color: #fff;
}
.g_main .cta .cta_btn {
				display: inline-block;
				border: none;
				border-radius: 0.4375rem;
				padding: 1rem 2.5rem;
				font-size: 1.5rem;
				line-height: 1em;
				cursor: pointer;
				transition: background 220ms;
}
.g_main .cta .cta_btn.btn_positive {
				background-color: #3174d1;
				color: #fff;
}
.g_main .cta .cta_btn.btn_positive:hover {
				background-color: #08408c;
}
.g_main .cta .cta_btn.btn_negative {
				background-color: #e6e6e6;
				color: #808080;
}
.g_main .cta .cta_btn.btn_negative:hover {
				background-color: #bababa;
}
.g_main > section {
				padding-bottom: 5rem;
}

.sec_tit {
				font-size: 4em;
				font-weight: 100;
}

.sec_ranking .ranking_wrap {
				max-width: 960px;
				margin: 0 auto;
}
.sec_ranking .ranking_wrap .no_word {
				width: 50px;
				padding-right: 15px;
}
.sec_ranking .ranking_wrap .logo {
				width: 160px;
}
.sec_ranking .ranking_wrap .name {
				padding-left: 15px;
				padding-right: 15px;
}
.sec_ranking .ranking_wrap .rate {
				padding-left: 15px;
				width: 110px;
				text-align: right;
}
.sec_ranking .account_tit {
				padding: 0 1rem;
				color: #6fc1c1;
}
.sec_ranking .account_tit .logo {
				padding-left: 15px;
}
.sec_ranking .account_tit .rate {
				text-align: center;
}
.sec_ranking .account_item {
				border-radius: 10px;
				margin: 1rem 0;
				padding: 0.25rem 20px;
				border: 1px solid #fff;
				background-color: rgba(0, 0, 0, 0.49);
}
.sec_ranking .account_item .no_word {
				font-style: italic;
				font-size: 2em;
				font-weight: 100;
				color: #f7e3aa;
}
.sec_ranking .account_item .name {
				font-size: 1.25em;
}
.sec_ranking .account_item .usage .obj_name {
				font-size: 1em;
}
.sec_ranking .account_item .usage .obj_valu {
				font-size: 1.75em;
				font-weight: 100;
}
.sec_ranking .account_item .rate {
				font-size: 2.4em;
				font-weight: 700;
				color: #c4af6e;
				line-height: 1;
}

@media (max-width: 768px) {
				.g_kv {
								overflow: hidden;
				}
				.g_kv .kv_bg,
.g_kv .kv_bg .vd_wrap {
								height: 100%;
				}
				.g_kv .vd_wrap {
								padding-top: 0;
				}
				.g_kv .vd_wrap .vd {
								width: auto;
								left: 50%;
								transform: translateX(-50%);
				}
				.g_kv .kv_tit {
								width: 90%;
								left: 5%;
								padding-left: 0;
								padding-right: 0;
				}
				.g_kv .kv_tit img:nth-child(1) {
								margin-top: 5px;
				}
				.g_kv .kv_tit img:nth-child(2) {
								margin-top: 10px;
				}
				.g_kv .kv_tit img:nth-child(3) {
								margin-top: 15px;
				}
				.g_kv .kv_tit .page_title {
								margin-top: 10px;
								padding-left: 0;
								text-align: center;
								font-weight: 100;
				}
				.g_kv .kv_ship {
								top: 57%;
								width: 90%;
				}

				.g_main {
								margin-top: 0;
								padding-bottom: 40px;
				}

				.sec_ranking .ranking_wrap {
								padding: 20px;
				}
				.sec_ranking .account_item {
								padding: 10px 20px 16px;
				}
				.sec_ranking .account_item .name {
								padding-left: 0;
								padding-right: 0;
								margin-bottom: 10px;
				}
				.sec_ranking .account_item .no_word {
								padding-right: 0;
				}
				.sec_ranking .account_item .rate {
								padding-left: 0;
								width: 2.5em;
								text-align: left;
								font-size: 1.75em;
				}
				.sec_ranking .account_item .usage .obj_valu {
								font-size: 1.5em;
				}
				.sec_ranking .account_item .usage .obj_name {
								font-size: 1rem;
				}
}