@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;
}

.all_bg::after {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.6);
}

.g_kv {
				margin: 5% auto;
				width: 66%;
}
.g_kv .kv_tit {
				position: relative;
				padding-top: 13.6%;
}

.g_main .left_block {
				margin-left: auto;
				margin-right: 30px;
				max-width: 480px;
				border: 1px solid #fff;
				color: #fff;
				padding: 4rem;
				background-color: rgba(0, 0, 0, 0.8);
				font-size: 1.5em;
				line-height: 1.6;
}
.g_main .left_block .c_white {
				color: #f7e3aa;
}
.g_main .left_block .link {
				font-size: 0.875em;
				color: #6fc1c1;
				text-decoration: underline;
}
.g_main .left_block .link:hover {
				color: #bbfffc;
}
.g_main .right_block {
				max-width: 480px;
				margin: 0 auto;
}
.g_main .right_block .title {
				font-size: 2.25em;
				font-weight: 700;
				color: #fff;
}
.g_main .right_block .tip {
				position: relative;
				padding-left: 2em;
				font-size: 1.25em;
				color: #fff;
}
.g_main .right_block .tip::before {
				content: "";
				position: absolute;
				left: 10px;
				top: -0.25rem;
				border: 1px solid #fff;
				border-width: 0 0 1px 1px;
				width: 1.125em;
				height: 1em;
}
.g_main .right_block .tip a {
				color: #bbfffc;
				text-decoration: underline;
}
.g_main .right_block .tip a:hover {
				color: #6fc1c1;
}
.g_main .right_block .cp_form .item {
				margin-top: 1em;
				padding: 10px 20px;
				border-radius: 10px;
				border: 1px solid #fff;
				background-color: rgba(0, 0, 0, 0.5);
				width: 100%;
				text-align: left;
}
.g_main .right_block .cp_form .item .key {
				color: #f7e3aa;
}
.g_main .right_block .cp_form .item .input input {
				display: block;
				border: 0;
				outline-width: 0;
				padding: 0 0 6px;
				width: 100%;
				background-color: transparent;
				font-size: 1.5em;
				font-weight: 300;
				color: #fff;
}
.g_main .right_block .cp_form .item_tip {
				text-align: left;
				padding: 6px 20px;
				color: #fff;
}
.g_main .right_block .cp_form .cta {
				margin-top: 1.5rem;
}
.g_main .right_block .cp_form .cta .cta_btn {
				font-size: 2em;
}
.g_main .right_block .cp_form .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 .right_block .cp_form .cta .cta_btn.btn_positive {
				background-color: #3174d1;
				color: #fff;
}
.g_main .right_block .cp_form .cta .cta_btn.btn_positive:hover {
				background-color: #08408c;
}
.g_main .right_block .cp_form .cta .cta_btn.btn_negative {
				background-color: #e6e6e6;
				color: #808080;
}
.g_main .right_block .cp_form .cta .cta_btn.btn_negative:hover {
				background-color: #bababa;
}

.all_lightbox {
				position: fixed;
				top: 100%;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 19;
				background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.99));
				opacity: 0;
				transition-property: top, opacity;
				transition-duration: 0ms, 600ms;
				transition-delay: 600ms, 0ms;
}
.all_lightbox.is_show {
				top: 0;
				opacity: 1;
				transition-duration: 0ms, 600ms;
				transition-delay: 0ms, 100ms;
}
.all_lightbox #particles-js {
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 1;
}
.all_lightbox .lightbox_content {
				position: relative;
				z-index: 2;
				display: flex;
				align-items: center;
				width: 100%;
				height: 100%;
}

.g_pick_account {
				width: 100%;
				padding-top: 5em;
				padding-bottom: 5em;
}
.g_pick_account .cp_pick_account {
				max-width: 1020px;
				margin: 0 auto;
}
.g_pick_account .cp_pick_account .roles_tit {
				margin-bottom: 10px;
}
.g_pick_account .cp_pick_account .roles_cta {
				margin-top: 1.5em;
				text-align: center;
}
.g_pick_account .cp_pick_account .tips_row {
				margin-top: 0.5rem;
				text-align: center;
				color: #ababab;
}
.g_pick_account .cp_pick_account .roles_tit {
				font-size: 1.5em;
				color: #fff;
				font-weight: 700;
				text-align: center;
}
.g_pick_account .cp_pick_account .roles_wrap {
				border: 2px solid #fff;
				background-color: #000;
				max-height: 400px;
				overflow-y: auto;
}
.g_pick_account .cp_pick_account .roles_content {
				padding: 0 30px;
}
.g_pick_account .cp_pick_account .roles_content .item {
				padding: 20px;
				border-bottom: 2px solid #fff;
}
.g_pick_account .cp_pick_account .roles_content .item:last-child {
				border-bottom: 0;
}
.g_pick_account .cp_pick_account .roles_content .logo img {
				width: 150px;
}
.g_pick_account .cp_pick_account .roles_content .name {
				padding: 0 1em;
				font-size: 1.5em;
				color: #fff;
				font-weight: 700;
}
.g_pick_account .cp_pick_account .roles_content .cta {
				padding: 0 10px;
				cursor: pointer;
}
.g_pick_account .cp_pick_account .roles_content .cta .icon {
				display: block;
				width: 48px;
}
.g_pick_account .cp_pick_account .roles_content .cta .icon .ic_r_arrow line,
.g_pick_account .cp_pick_account .roles_content .cta .icon .ic_r_arrow circle {
				stroke: #fff;
				stroke-width: 5px;
}
.g_pick_account .cp_pick_account .roles_content .cta .icon .ic_r_arrow line {
				stroke-linecap: round;
}
.g_pick_account .cp_pick_account .roles_content .cta .icon .ic_r_arrow circle {
				fill: none;
}
.g_pick_account .cp_pick_account .roles_content .cta .icon:hover line,
.g_pick_account .cp_pick_account .roles_content .cta .icon:hover circle {
				stroke: #c4af6e;
}
.g_pick_account .cp_pick_account .roles_content .status .auditing {
				color: #c4af6e;
				font-size: 1.75em;
				font-weight: 700;
}
.g_pick_account .cp_pick_account .roles_content .status .unfinish {
				display: inline-block;
				border: 1px solid #ff1d25;
				padding: 0.75em 1.5em 0.5em;
				color: #ff1d25;
				line-height: 1;
}
.g_pick_account .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_pick_account .cta .cta_btn.btn_positive {
				background-color: #3174d1;
				color: #fff;
}
.g_pick_account .cta .cta_btn.btn_positive:hover {
				background-color: #08408c;
}
.g_pick_account .cta .cta_btn.btn_negative {
				background-color: #e6e6e6;
				color: #808080;
}
.g_pick_account .cta .cta_btn.btn_negative:hover {
				background-color: #bababa;
}

@media (max-width: 768px) {
				.g_kv {
								margin: 10% auto;
								width: 90%;
				}

				.g_main .right_block .cp_form .cta {
								text-align: center;
				}

				.g_pick_account .cp_pick_account .roles_wrap {
								max-height: calc(100vh - 200px);
				}
				.g_pick_account .cp_pick_account .roles_content {
								padding: 0 20px;
				}
				.g_pick_account .cp_pick_account .roles_content .logo {
								text-align: center;
				}
				.g_pick_account .cp_pick_account .roles_content .item {
								padding: 10px;
				}
				.g_pick_account .cp_pick_account .roles_content .name {
								padding: 0;
								margin-top: 0.25em;
								margin-bottom: 0.25em;
				}
				.g_pick_account .cp_pick_account .roles_content .cta {
								position: relative;
								bottom: 16px;
								padding: 0;
				}
				.g_pick_account .cp_pick_account .roles_content .cta .icon {
								margin-left: auto;
				}
				.g_pick_account .cp_pick_account .obj_box .obj_name {
								font-size: 1.125em;
				}
				.g_pick_account .cp_pick_account .obj_box .obj_valu {
								font-size: 1.5em;
				}
}