@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: 100%;
				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-top: 0.25em;
				padding-left: 0.5rem;
				font-size: 3.8em;
				font-weight: 900;
				color: #fff;
				text-shadow: 3px 3px 0 #3174d1;
				line-height: 1.1;
}

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

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

.sec_calendar {
				overflow-y: hidden;
}
.sec_calendar .calendar_wrap {
				position: relative;
				width: 960px;
				margin: 0 auto 100px;
}
.sec_calendar .calendar_wrap::after {
				content: "";
				position: absolute;
				left: calc(50% - 1px);
				top: 6px;
				height: calc(100% - 12px);
				width: 2px;
				background-color: #fff;
}
.sec_calendar .year_row {
				display: flex;
}
.sec_calendar .year_item {
				position: relative;
				flex: 0 1 50%;
				margin: 6px 0;
				padding: 20px;
				background-color: rgba(255, 255, 255, 0.166);
				overflow: hidden;
}
.sec_calendar .year_item::before {
				content: "";
				position: absolute;
				bottom: 100%;
				z-index: 3;
				width: calc(100% - 1px);
				height: 200%;
				background-color: #6fc1c1;
				transition-name: bottom;
				transition-duration: 1000ms;
				transition-timing-function: linear;
}
.sec_calendar .year_item::after {
				content: "";
				position: absolute;
				top: 50%;
				z-index: 1;
				width: 10px;
				height: 1px;
				background-color: #fff;
				transform: translateY(-50%);
}
.sec_calendar .year_item.is_online {
				margin-right: auto;
}
.sec_calendar .year_item.is_online::before {
				left: 0;
}
.sec_calendar .year_item.is_online::after {
				right: 0;
}
.sec_calendar .year_item.is_offline {
				margin-left: auto;
				flex-direction: row-reverse;
}
.sec_calendar .year_item.is_offline::before {
				right: 0;
}
.sec_calendar .year_item.is_offline::after {
				left: 0;
}
.sec_calendar .year_item .date,
.sec_calendar .year_item .line,
.sec_calendar .year_item .text .t {
				opacity: 0;
				transition-name: opacity;
				transition-duration: 0;
				transition-delay: 300ms;
}
.sec_calendar .year_item .date {
				font-size: 1.5em;
				font-weight: 700;
				color: #f7e3aa;
}
.sec_calendar .year_item .line_col {
				padding: 0 10px;
}
.sec_calendar .year_item .line {
				height: 1px;
				width: 100%;
				opacity: 0;
}
.sec_calendar .year_item .text {
				position: relative;
}
.sec_calendar .year_item .text .t {
				font-size: 1.5em;
				font-weight: 100;
}
.sec_calendar .year_row.side_alone {
				margin-top: -32px;
				margin-bottom: -32px;
}
.sec_calendar .year_row.aos-animate .year_item::before {
				bottom: -200%;
}
.sec_calendar .year_row.aos-animate .year_item .date,
.sec_calendar .year_row.aos-animate .year_item .line,
.sec_calendar .year_row.aos-animate .year_item .text .t {
				opacity: 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;
				}

				.mb_calendar {
								padding: 6%;
				}
				.mb_calendar .categ_row {
								margin-bottom: 2em;
				}
				.mb_calendar .categ_tit {
								font-size: 2em;
								color: #bbfffc;
				}
				.mb_calendar .year_item {
								padding: 0.5em 0;
								border-bottom: 1px solid rgba(255, 255, 255, 0.3);
				}
				.mb_calendar .year_item .date {
								color: #f7e3aa;
								font-weight: 700;
				}
				.mb_calendar .year_item:nth-child(2n) .date {
								color: #c4af6e;
				}
}