@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::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_ship {
				position: absolute;
				top: 46%;
				left: 50%;
				width: 66%;
				transform: translate(-50%, -50%);
}
.g_kv .kv_ship img {
				animation: floatY 5s linear infinite;
				animation-direction: alternate;
}
.g_kv .kv_tit {
				position: absolute;
				left: 6%;
				top: 4vw;
				width: 46%;
				margin: 0;
}
.g_kv .kv_tit .aos_wrap {
				width: 100%;
				padding-top: 14%;
}
.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_parag {
				position: absolute;
				left: 6%;
				top: 11vw;
				padding-left: 1%;
				color: #fff;
				font-size: 1.66em;
				font-weight: 700;
				line-height: 1.33;
}
.g_kv .kv_other {
				position: absolute;
				right: 6%;
				top: 4vw;
}
.g_kv .kv_other img {
				margin-left: 6px;
				width: auto;
				height: 40px;
}
.g_kv .kv_other .fb_share {
				padding: 6px;
				padding-right: 0;
}

.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;
}
.cta .cta_btn.btn_positive {
				background-color: #3174d1;
				color: #fff;
}
.cta .cta_btn.btn_positive:hover {
				background-color: #08408c;
}
.cta .cta_btn.btn_negative {
				background-color: #e6e6e6;
				color: #808080;
}
.cta .cta_btn.btn_negative:hover {
				background-color: #bababa;
}

.g_main {
				position: relative;
				z-index: 3;
				margin-top: -120px;
				padding-bottom: 100px;
				color: #fff;
}
.g_main .wording_area {
				max-width: 90%;
				width: 860px;
				margin-left: auto;
				margin-right: auto;
}
.g_main .parag {
				width: 100%;
				margin: 0 auto;
				font-size: 1.75em;
				line-height: 1.8;
}
.g_main .parag .line .strong {
				color: #c4af6e;
}
.g_main .parag .hashtag {
				padding: 0.75rem 0;
				font-size: 0;
}
.g_main .parag .hashtag span {
				display: inline-block;
				vertical-align: middle;
				border-radius: 1.5rem;
				padding: 0.75rem 1.5rem;
				border: 1px solid #fff;
				font-size: 1.5rem;
				line-height: 1;
}
.g_main .wording {
				font-size: 1.5em;
				line-height: 1.75;
}
.g_main .sec_title {
				margin-top: 5rem;
				margin-bottom: 1rem;
				color: #c4af6e;
				font-size: 2em;
}
.g_main .list_wrap {
				margin-left: 10px;
				margin-bottom: 30px;
				padding-left: 0.25em;
				border-left: 4px solid #f7e3aa;
				line-height: 1.1;
}
.g_main .list_tit {
				font-size: 1.5em;
				color: #f7e3aa;
				padding-left: 0.5em;
}
.g_main .list {
				margin-top: 6px;
				margin-bottom: 1.125em;
				font-size: 1.25em;
}
.g_main .list li {
				padding-top: 6px;
				padding-bottom: 2px;
				line-height: 1.3;
}
.g_main .list li .strong_wrod {
				font-size: 1.5em;
				font-weight: 100;
}
.g_main .list span,
.g_main .list .link {
				display: inline-block;
				vertical-align: middle;
				line-height: 1.1;
}
.g_main .list .link {
				border: 1px solid currentColor;
				border-radius: 10px;
				margin-left: 0.8em;
				padding: 0.5em 0.8em 0.35em;
				font-size: 0.875rem;
				color: #60edff;
}
.g_main .list .link:hover {
				background-color: #60edff;
				color: #000;
}
.g_main .list .valu {
				margin-top: 0.25em;
				font-size: 0.875em;
				color: #bbfffc;
				font-weight: 300;
}
.g_main .tips {
				padding: 1.5em;
				background-color: rgba(255, 255, 255, 0.12);
}
.g_main .tips a {
				text-decoration: underline;
				color: #f7e3aa;
}
.g_main .tips a:hover {
				color: #c4af6e;
}
.g_main .nine_wrap .nine_col {
				padding: 0.5em 1em 2em 0;
}
.g_main .nine_wrap .nine_col:nth-child(1) .txt {
				transition-delay: 300ms;
}
.g_main .nine_wrap .nine_col:nth-child(1) .point::after {
				transition-delay: 100ms;
}
.g_main .nine_wrap .nine_col:nth-child(2) .txt {
				transition-delay: 500ms;
}
.g_main .nine_wrap .nine_col:nth-child(2) .point::after {
				transition-delay: 300ms;
}
.g_main .nine_wrap .nine_col:nth-child(3) .txt {
				transition-delay: 600ms;
}
.g_main .nine_wrap .nine_col:nth-child(3) .point::after {
				transition-delay: 400ms;
}
.g_main .nine_wrap .nine_col:nth-child(4) .txt {
				transition-delay: 800ms;
}
.g_main .nine_wrap .nine_col:nth-child(4) .point::after {
				transition-delay: 600ms;
}
.g_main .nine_wrap .nine_col:nth-child(5) .txt {
				transition-delay: 1000ms;
}
.g_main .nine_wrap .nine_col:nth-child(5) .point::after {
				transition-delay: 800ms;
}
.g_main .nine_wrap .nine_col:nth-child(6) .txt {
				transition-delay: 1200ms;
}
.g_main .nine_wrap .nine_col:nth-child(6) .point::after {
				transition-delay: 1000ms;
}
.g_main .nine_wrap .nine_col:nth-child(7) .txt {
				transition-delay: 1400ms;
}
.g_main .nine_wrap .nine_col:nth-child(7) .point::after {
				transition-delay: 1200ms;
}
.g_main .nine_wrap .nine_col:nth-child(8) .txt {
				transition-delay: 1600ms;
}
.g_main .nine_wrap .nine_col:nth-child(8) .point::after {
				transition-delay: 1400ms;
}
.g_main .nine_wrap .nine_col:nth-child(9) .txt {
				transition-delay: 1800ms;
}
.g_main .nine_wrap .nine_col:nth-child(9) .point::after {
				transition-delay: 1600ms;
}
.g_main .nine_wrap .nine_col.aos-animate .point .txt {
				opacity: 1;
}
.g_main .nine_wrap .nine_col.aos-animate .point::after {
				right: -200%;
}
.g_main .nine_wrap .point {
				position: relative;
				font-size: 2.5em;
				font-weight: 100;
				line-height: 1;
				color: #a8ffdb;
				display: inline-block;
				overflow: hidden;
}
.g_main .nine_wrap .point .txt {
				padding: 0.25rem 0;
				opacity: 0;
				transition-name: opacity;
				transition-duration: 0;
}
.g_main .nine_wrap .point::after {
				content: "";
				position: absolute;
				top: 0;
				right: 99%;
				width: 200%;
				height: 100%;
				background-color: #a8ffdb;
				transition-name: right;
				transition-duration: 1000ms;
}
@keyframes coverPass {
				0% {
								left: 0;
								right: 100%;
				}
				33% {
								left: 0;
								right: 0;
				}
				66% {
								left: 0;
								right: 0;
				}
				100% {
								left: 100%;
								right: 0;
				}
}
.g_main .nine_wrap .text {
				margin-top: 0.25em;
				font-size: 1.25em;
				line-height: 1.3;
}
.g_main .four_wrap {
				border: 2px solid #00001c;
}
.g_main .four_wrap .four_col {
				border-radius: 10px;
				border: 2px solid #00001c;
				padding: 1em 2rem;
				background-color: #4070c1;
}
.g_main .four_wrap .four_col:nth-child(2), .g_main .four_wrap .four_col:nth-child(3) {
				background-color: #1f7078;
}
.g_main .four_wrap .name {
				font-size: 1.75em;
				font-weight: 700;
				text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
}
.g_main .four_wrap ul {
				margin-top: 0.25em;
				margin-bottom: 0.25em;
				padding-left: 0;
				list-style-type: none;
}
.g_main .four_wrap li {
				font-size: 1.125em;
				padding: 0.25em 1rem;
				border-top: 1px dashed rgba(255, 255, 255, 0.5);
				font-weight: 100;
}
.g_main .three_wrap .three_col {
				overflow: hidden;
				padding: 0;
}
.g_main .three_wrap a {
				position: relative;
				display: block;
				padding: 0 1em 2em;
				height: 100%;
}
.g_main .three_wrap a .img::after {
				content: "";
				position: absolute;
				left: 0;
				top: -6px;
				width: 100%;
				height: 6px;
				background-color: #c4af6e;
				transition: top 300ms;
}
.g_main .three_wrap a:hover {
				color: #fff;
}
.g_main .three_wrap a:hover img {
				transform: translateX(-50%) scale(1.06);
}
.g_main .three_wrap a:hover .img::after {
				top: 0;
}
.g_main .three_wrap .front {
				line-height: 1.1;
				color: #f7e3aa;
}
.g_main .three_wrap .back {
				margin-top: 0.33em;
				font-size: 1.5em;
				line-height: 1;
}
.g_main .three_wrap .img {
				position: relative;
				padding-top: 56.25%;
				margin-top: 0.5em;
				margin-bottom: 0.5em;
				overflow: hidden;
}
.g_main .three_wrap .img img {
				position: absolute;
				left: 50%;
				top: 0;
				height: 100%;
				transform: translateX(-50%) scale(1);
				transition: transform 300ms;
				transform-origin: center top;
}

.g_fixed {
				position: fixed;
				right: 20px;
				bottom: -42px;
				z-index: 3;
				opacity: 0;
				transition: bottom 300ms, opacity 300ms;
}
.g_fixed .functions .item {
				padding: 6px;
				width: 42px;
				cursor: pointer;
}
.g_fixed .functions .item .icon {
				padding-top: 100%;
				background: url("../img/ic_t_arrow.svg") center/cover no-repeat;
				transition: transform 300ms;
}
.g_fixed .functions .item:hover .icon {
				transform: translateY(-6px);
}
.g_fixed.is_active {
				bottom: 20px;
				opacity: 1;
}

.g_footer {
				position: relative;
				z-index: 2;
				padding: 40px 0;
}
.g_footer .logos {
				color: #fff;
				max-width: 80%;
				width: 50em;
				margin: 0 auto;
}
.g_footer .logos img {
				height: 80px;
}

.modal-content {
				padding: 2rem;
}

.modal_title {
				border: 1px solid currentColor;
				padding-top: 0.5rem;
				padding-bottom: 0.5rem;
				font-size: 2em;
				font-weight: 700;
				color: #3174d1;
				background-color: #fff;
				text-align: center;
}

.content_wrap {
				padding: 1rem;
}
.content_wrap .resources_block {
				margin-bottom: 2em;
}
.content_wrap .resources_block .tit {
				font-size: 1.75em;
				font-weight: 700;
				color: #1b1464;
}
.content_wrap .resources_block .active {
				margin-top: 1rem;
				font-size: 0;
}
.content_wrap .resources_block .active > div {
				display: inline-block;
				font-size: 1rem;
}
.content_wrap .resources_block .active .way {
				border-radius: 6px;
				padding: 0.5em 0.75em;
				line-height: 1.1;
				background-color: #f7e3aa;
				color: #1b1464;
				font-weight: 700;
				font-size: 1.33rem;
}
.content_wrap .resources_block .active .way:nth-child(3) {
				background-color: #bbfffc;
}
.content_wrap .resources_block .active .or {
				padding: 0.5em;
				line-height: 1;
}
.content_wrap .resources_block .active .go {
				margin-left: 0.5em;
				font-size: 1.33rem;
				font-weight: 700;
				text-decoration: underline;
				color: #e14420;
}

.content_wrap .step_block {
				margin-bottom: 2em;
}
.content_wrap .step_block .tit {
				float: left;
}
.content_wrap .step_block .tit .step {
				text-decoration: underline;
				color: #c4af6e;
}
.content_wrap .step_block .tit .valu {
				margin-left: 0.5rem;
				font-size: 1.5em;
				font-weight: 700;
}
.content_wrap .step_block .cta {
				float: right;
}
.content_wrap .step_block .cta_btn {
				padding: 0.75rem 1rem;
				font-size: 1rem;
}
.content_wrap .step_block .content {
				clear: both;
}
.content_wrap .step_block ol {
				padding-left: 1.125em;
				margin: 0;
}
.content_wrap .step_block li {
				padding: 0.25em 0;
				line-height: 1.2;
}
.content_wrap .table_box .tit {
				font-size: 1.5em;
				font-weight: 700;
}
.content_wrap .table_box .list_tit {
				padding-top: 0.25rem;
				color: #6fc1c1;
				font-size: 1.25em;
}
.content_wrap .table_box .list {
				margin-bottom: 0.5rem;
				border: 1px solid #78787878;
}
.content_wrap .table_box .li:not(:last-child) {
				border-bottom: 1px solid #78787878;
}
.content_wrap .table_box .intro {
				padding: 0.5em 1em;
				line-height: 1.4;
}
.content_wrap .table_box .intro .tip {
				font-size: 0.875em;
				color: #ff1d25;
}
.content_wrap .table_box .reward {
				padding: 0.5em 1em;
				line-height: 1.5;
				color: #000;
}
.content_wrap .table_box .gold {
				color: #c4af6e;
				font-weight: 700;
				font-size: 1.25rem;
}
.content_wrap .table_box .grey {
				color: #787878;
				font-size: 0.875rem;
}

@media (max-width: 768px) {
				.g_kv {
								overflow: hidden;
				}
				.g_kv .kv_tit {
								width: 90%;
								top: 5vh;
								left: 5%;
				}
				.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_ship {
								top: 60%;
								width: 90%;
				}
				.g_kv .vd_wrap {
								padding-top: 60vh;
				}
				.g_kv .vd_wrap .vd {
								width: auto;
								left: 50%;
								transform: translateX(-50%);
				}
				.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_parag {
								left: 5%;
								top: calc(8vh + 12.6vw);
								padding-left: 0;
								width: 90%;
								font-size: 1em;
								font-weight: 300;
								line-height: 1.5;
				}
				.g_kv .kv_parag br {
								display: none;
				}
				.g_kv .kv_parag .cta {
								position: absolute;
								margin: 0;
								width: 100%;
								top: 36vh;
								text-align: center;
				}
				.g_kv .kv_parag .cta .cta_btn {
								padding: 1rem 2rem;
								font-size: 1.25rem;
				}

				.g_main {
								margin-top: 0;
								padding-bottom: 40px;
				}
				.g_main .sec_title {
								margin-top: 3rem;
				}
				.g_main .parag,
.g_main .wording {
								font-size: 1.25em;
				}
				.g_main .list .link {
								margin-left: 0;
								margin-top: 6px;
				}
				.g_main .parag .hashtag {
								padding: 0.5rem 0;
				}
				.g_main .parag .hashtag span {
								margin: 5px 0;
								padding: 0.5rem 1.25rem;
								font-size: 1.25rem;
				}
				.g_main .list li .strong_wrod {
								font-size: 1.25em;
				}
				.g_main .nine_wrap .nine_col {
								padding-bottom: 1.5em;
				}
				.g_main .nine_wrap .text {
								margin-top: 0;
				}

				.g_footer .logos > .row {
								padding: 1em 0;
				}
				.g_footer .logos img {
								height: 60px;
				}
}