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

body {
				background-color: #000022;
				height: 100vh;
}
body.lb_show {
				overflow: hidden;
}
body.lb_show .all_lightbox {
				top: 0;
				opacity: 1;
				transition-duration: 0ms, 600ms;
				transition-delay: 0ms, 100ms;
}

.all_bg,
.all_wrap {
				min-height: 700px;
				min-width: 920px;
				width: 100%;
				height: 100%;
}

.all_bg .kv_bg {
				animation: space_floatX 180s linear infinite;
				animation-direction: alternate;
}
.all_bg::after {
				background: radial-gradient(rgba(15, 13, 56, 0) 30%, #000022);
}

.g_ui {
				position: fixed;
				z-index: 3;
}

.u_left {
				left: 40px;
}

.u_right {
				right: 40px;
}

.u_top {
				top: 30px;
}

.u_bottom {
				bottom: 30px;
}

.main_menu .menu_btn {
				cursor: pointer;
				transition: transform 300ms;
}
.main_menu .menu_btn img {
				width: 56px;
}
.main_menu .menu_btn div {
				margin-top: 0.25em;
				font-size: 1.125em;
				line-height: 1;
				color: #fff;
				text-align: center;
				white-space: nowrap;
}
.main_menu .menu_btn:hover {
				transform: scale(1.05);
}

.news_row {
				margin-top: 15px;
				border: 1px solid #fff;
				background-color: rgba(0, 0, 0, 0.5);
				font-size: 1.125em;
				line-height: 1;
}
.news_row .name {
				padding: 0.5em 0.75em;
				color: #fff;
}
.news_row .value_box {
				position: relative;
				padding: 0.5em 0.75em;
				max-width: 540px;
}
.news_row .value_box::before {
				content: "";
				position: absolute;
				left: 0;
				top: 25%;
				height: 50%;
				border-left: 1px solid #fff;
}
.news_row .value_box .value {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
}
.news_row .value a {
				color: #c4af6e;
}
.news_row .value a:hover {
				text-decoration: underline;
}

.all_wrap .main_tit .tit {
				width: 450px;
}
.all_wrap .twcc_logo a {
				display: inline-block;
				height: 3vw;
}
.all_wrap .twcc_logo a img {
				height: 100%;
				width: auto;
}
.all_wrap .twcc_logo a:hover {
				opacity: 0.6;
}

.g_main {
				width: 100%;
				height: 100%;
}
.g_main .point {
				position: absolute;
				z-index: 3;
}
.g_main .point .point_area {
				position: relative;
				border-radius: 50%;
				border: 3px solid #fff;
				width: 40px;
				height: 40px;
				cursor: pointer;
				box-shadow: 0 0 5px 0 #c4af6e;
}
.g_main .point.p_normal .point_area {
				background-color: rgba(255, 255, 255, 0.5);
				transition: background 300ms;
}
.g_main .point.p_normal .point_area::before, .g_main .point.p_normal .point_area::after {
				content: "";
				position: absolute;
				left: -1px;
				top: -1px;
				border-radius: 50%;
				display: none;
				width: calc(100% + 2px);
				height: calc(100% + 2px);
				border: 1px solid #fff;
				animation-name: scaleFade;
				animation-iteration-count: infinite;
				animation-duration: 2.4s;
}
.g_main .point.p_normal .point_area::after {
				animation-delay: 1.2s;
}
.g_main .point.p_special .point_area {
				border-width: 2px;
}
.g_main .point.p_special .point_area::before, .g_main .point.p_special .point_area::after {
				content: "";
				position: absolute;
				background-color: #fff;
				transition: transform 400ms;
}
.g_main .point.p_special .point_area::before {
				left: 0;
				top: calc(50% - 1px);
				width: 100%;
				height: 2px;
}
.g_main .point.p_special .point_area::after {
				left: calc(50% - 1px);
				top: 0;
				height: 100%;
				width: 2px;
}
.g_main .point.p_special .hover_block {
				background-color: #917c3b;
				border-radius: 30px;
				margin-left: -90px;
				width: 180px;
}
.g_main .point.p_special .hover_block::after {
				height: 34px;
}
.g_main .point.p_attention .hover_block::after {
				height: 34px;
}
.g_main .point.p_attention .point_area {
				border: none;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background-color: #f7e3aa;
				transition: transform 300ms;
}
.g_main .point.p_attention .point_area::before, .g_main .point.p_attention .point_area::after {
				content: "";
				position: absolute;
				border: 1px solid #f7e3aa;
				border-radius: 50%;
				animation: pop 700ms infinite linear;
}
.g_main .point.p_attention .point_area::before {
				left: -6px;
				top: -6px;
				right: -6px;
				bottom: -6px;
}
.g_main .point.p_attention .point_area::after {
				left: -10px;
				top: -10px;
				right: -10px;
				bottom: -10px;
}
@keyframes pop {
				0% {
								transform: scale(1);
				}
				80% {
								transform: scale(1.1);
				}
				100% {
								transform: scale(1);
				}
}
.g_main .point .hover_block {
				position: absolute;
				top: -30px;
				left: 50%;
				margin-left: -100px;
				border-radius: 10px;
				padding: 0.6em 1em 0.5em;
				width: 200px;
				text-align: center;
				border: 2px solid #fff;
				background-color: rgba(0, 0, 0, 0.9);
				transition: transform 0ms 600ms, opacity 600ms;
				transform: translate(0, -500%);
				opacity: 0;
}
.g_main .point .hover_block .name {
				font-size: 1.5em;
				color: #fff;
				line-height: 1;
}
.g_main .point .hover_block .reward {
				margin-top: 4px;
				font-size: 1.125em;
				color: #6fc1c1;
				line-height: 1;
}
.g_main .point .hover_block::after {
				content: "";
				position: absolute;
				left: calc(50% - 1px);
				top: 100%;
				border-radius: 1px;
				width: 2px;
				height: 52px;
				background-color: #fff;
				transform-origin: 50% 100%;
				transform: scaleY(0);
				transition: transform 600ms;
}
.g_main .point.p1 {
				left: 8%;
				top: 70%;
}
.g_main .point.p2 {
				left: 40%;
				top: 48%;
}
.g_main .point.p3 {
				left: 65%;
				top: 61%;
}
.g_main .point.p4 {
				left: 52%;
				top: 28%;
}
.g_main .point.p5 {
				left: 73%;
				top: 16%;
}
.g_main .point.p6 {
				left: 94%;
				top: 42%;
}
.g_main .point.p7 {
				left: 90.5%;
				top: 18%;
}
.g_main .main_ship.show_point .point,
.g_main .point:hover {
				z-index: 10;
}
.g_main .main_ship.show_point .point .hover_block,
.g_main .point:hover .hover_block {
				transform: translate(0, -100%);
				opacity: 1;
				transition: transform 0ms 0ms, opacity 600ms;
}
.g_main .main_ship.show_point .point .hover_block::after,
.g_main .point:hover .hover_block::after {
				transform: scaleY(1);
}
.g_main .main_ship.show_point .point.p_normal .point_area,
.g_main .point:hover.p_normal .point_area {
				background-color: rgba(255, 255, 255, 0);
}
.g_main .main_ship.show_point .point.p_normal .point_area::before, .g_main .main_ship.show_point .point.p_normal .point_area::after,
.g_main .point:hover.p_normal .point_area::before,
.g_main .point:hover.p_normal .point_area::after {
				display: block;
}
.g_main .main_ship.show_point .point.p_special .point_area::before, .g_main .main_ship.show_point .point.p_special .point_area::after,
.g_main .point:hover.p_special .point_area::before,
.g_main .point:hover.p_special .point_area::after {
				transform: rotate(45deg);
}
.g_main .main_ship.show_point .point.p_attention .point_area,
.g_main .point:hover.p_attention .point_area {
				transform: scale(0.86);
}

.main_ship {
				position: absolute;
				top: 50%;
				left: 50%;
				z-index: 1;
				max-width: 66%;
				width: 100%;
				min-width: 920px;
				transform: translate(-50%, -50%);
}
.main_ship .ship_img {
				animation: floatY 10s linear infinite;
				animation-direction: alternate;
}
.main_ship .ship_img img {
				width: 100%;
}

.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;
				overflow-y: auto;
				transition-property: top, opacity;
				transition-duration: 0ms, 600ms;
				transition-delay: 600ms, 0ms;
}
.all_lightbox #particles-js {
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 1;
}
.all_lightbox .lightbox_content {
				position: relative;
				z-index: 2;
}
.all_lightbox .lightbox_content {
				min-height: 100vh;
}
.all_lightbox .lb_block {
				position: absolute;
				left: -100%;
				top: 0;
				width: 100%;
				height: 100%;
				color: #fff;
				transition: left 0ms 600ms;
				overflow-x: hidden;
				overflow-y: auto;
}
.all_lightbox .lb_block.is_active {
				left: 0;
				transition: left 0ms 0ms;
}
.all_lightbox .lb_block.is_active.lb_point .p_enemy .lines {
				top: 0;
				opacity: 1;
}
.all_lightbox .lb_block.is_active.lb_point .p_enemy .img {
				transform: translateY(0);
				opacity: 1;
}
.all_lightbox .lb_block .b_content,
.all_lightbox .lb_block .lb_menu_content {
				min-height: 720px;
}
.all_lightbox .lb_point .back_btn {
				position: absolute;
				left: 30px;
				top: 30px;
				z-index: 3;
				width: 100px;
				transition: transform 300ms, opacity 300ms;
				cursor: pointer;
}
.all_lightbox .lb_point .back_btn:hover {
				transform: translateX(-6px);
				opacity: 0.5;
}
.all_lightbox .lb_point .back_btn .ic_back {
				display: block;
				width: 100%;
				padding-top: 40%;
				background: url("../img/ic_back_arrow.svg") center/cover no-repeat;
}
.all_lightbox .lb_point .b_content {
				height: 100%;
				padding: 30px 60px;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
}
.all_lightbox .lb_point .b_content .p_name {
				border-bottom: 2px solid #fff;
				margin: 0 auto;
				margin-bottom: 20px;
				padding-bottom: 4px;
				font-size: 2em;
				line-height: 1.2;
}
.all_lightbox .lb_point .b_content .p_parag {
				font-size: 1.25em;
				max-width: 40em;
				margin: 0 auto;
				color: #bbfffc;
				text-align: left;
}
.all_lightbox .lb_point .b_content .p_enemy {
				margin-top: 20px;
}
.all_lightbox .lb_point .b_content .p_enemy .lines {
				position: absolute;
				top: 30px;
				left: 50%;
				z-index: 2;
				padding: 0.5em 1em;
				background-color: #048677;
				color: #fff;
				transform: translateX(-50%);
				white-space: nowrap;
				opacity: 0;
				transition-property: top, opacity;
				transition-duration: 400ms;
				transition-delay: 800ms;
}
.all_lightbox .lb_point .b_content .p_enemy .lines::after {
				content: "";
				position: absolute;
				left: calc(50% - 15px);
				top: 100%;
				border: 15px solid;
				border-color: #048677 transparent transparent transparent;
}
.all_lightbox .lb_point .b_content .p_enemy .img {
				position: relative;
				padding-top: 40px;
				width: 360px;
				height: 400px;
				transform: translateY(-10%);
				opacity: 0;
				transition-property: transform, opacity;
				transition-duration: 600ms;
				transition-delay: 300ms;
}
.all_lightbox .lb_point .b_content .p_enemy .img div {
				width: 100%;
				height: 100%;
				background: center top/contain no-repeat;
}
.all_lightbox .lb_point .b_content .p_enemy .enemy_right {
				text-align: left;
}
.all_lightbox .lb_point .b_content .p_enemy .name {
				font-size: 3em;
				color: #c4af6e;
				font-weight: 700;
}
.all_lightbox .lb_point .b_content .p_enemy .intro {
				margin-top: 0.5rem;
				max-width: 25em;
				font-size: 1.25em;
				line-height: 1.3;
}
.all_lightbox .lb_point .b_content .p_enemy .reward_block {
				margin-top: 30px;
				display: inline-block;
				position: relative;
				border: 1px solid #6fc1c1;
				border-radius: 30px;
				padding: 1.25em 4em;
}
.all_lightbox .lb_point .b_content .p_enemy .reward_block .tit_name {
				color: #6fc1c1;
}
.all_lightbox .lb_point .b_content .p_enemy .reward_block .tit .value,
.all_lightbox .lb_point .b_content .p_enemy .reward_block .tit .points {
				display: inline-block;
				vertical-align: middle;
}
.all_lightbox .lb_point .b_content .p_enemy .reward_block .tit .value {
				max-width: 8em;
				color: #f7e3aa;
				font-size: 1.75em;
				font-weight: 700;
				line-height: 1.1;
				white-space: normal;
}
.all_lightbox .lb_point .b_content .p_enemy .reward_block .tit .points {
				margin-left: 1rem;
				border-radius: 4px;
				padding: 0.5rem 1rem;
				background-color: #6fc1c1;
				color: #1b1464;
				font-size: 1.25em;
				font-weight: 400;
				line-height: 1;
}
.all_lightbox .lb_point .b_content .p_enemy .reward_block .tit .tip {
				margin-top: 0.5em;
}
.all_lightbox .lb_point .b_content .p_enemy .reward_block .tit .link {
				margin-left: 0.25em;
				color: #bbfffc;
				text-decoration: underline;
				cursor: pointer;
}
.all_lightbox .lb_point .b_content .p_enemy .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;
}
.all_lightbox .lb_point .b_content .p_enemy .cta .cta_btn.btn_positive {
				background-color: #3174d1;
				color: #fff;
}
.all_lightbox .lb_point .b_content .p_enemy .cta .cta_btn.btn_positive:hover {
				background-color: #08408c;
}
.all_lightbox .lb_point .b_content .p_enemy .cta .cta_btn.btn_negative {
				background-color: #e6e6e6;
				color: #808080;
}
.all_lightbox .lb_point .b_content .p_enemy .cta .cta_btn.btn_negative:hover {
				background-color: #bababa;
}
.all_lightbox .lb_point .b_content .p_enemy .cta {
				margin-top: 30px;
}
.all_lightbox .lb_point.b_special .p_parag {
				color: #fff;
				max-width: 30em;
}
.all_lightbox .lb_point.b_special .p_enemy .cta {
				text-align: center;
}
.all_lightbox .lb_point.b_special .p_enemy .reward_block {
				margin-top: 0;
}
.all_lightbox .lb_menu {
				height: 100%;
}
.all_lightbox .lb_menu_content {
				margin: 0 auto;
				height: 100%;
				width: calc(100% - 300px);
}
.all_lightbox .lb_menu_content .b_top {
				padding-top: 30px;
				text-align: center;
}
.all_lightbox .lb_menu_content .b_top .news_row {
				border-width: 0;
				margin-top: 0;
				font-size: 1.33em;
				border-radius: 4px;
				background-color: rgba(255, 255, 255, 0.15);
}
.all_lightbox .lb_menu_content .b_top .value_box {
				text-align: left;
				max-width: 800px;
}
.all_lightbox .lb_menu_content .menu_row {
				padding: 4em 0;
}
.all_lightbox .lb_menu_content .menu_row .item_wrap {
				text-align: center;
}
.all_lightbox .lb_menu_content .menu_row .item {
				display: inline-block;
				transition: transform 400ms;
}
.all_lightbox .lb_menu_content .menu_row .item img {
				width: 120px;
}
.all_lightbox .lb_menu_content .menu_row .item .text {
				font-size: 1.5em;
}
.all_lightbox .lb_menu_content .menu_row .item:hover {
				transform: scale(1.12);
				color: #fff;
}
.all_lightbox .lb_menu_content .b_bottom {
				padding: 30px 0;
}
.all_lightbox .lb_menu_content .function {
				margin-top: 1em;
}
.all_lightbox .lb_menu_content .function .sw_btn,
.all_lightbox .lb_menu_content .function .logout_btn {
				display: inline-block;
				font-size: 1.25em;
				line-height: 1;
				text-decoration: underline;
				color: #bbfffc;
}
.all_lightbox .lb_menu_content .function .sw_btn {
				position: relative;
				border-right: 2px solid #fff;
				padding-right: 1rem;
}
.all_lightbox .lb_menu_content .function .logout_btn {
				padding-left: 1rem;
}
.all_lightbox .lb_menu_content .function a:hover {
				color: #6fc1c1;
}
.all_lightbox .lb_menu_content .group_row {
				padding: 10px 0;
				margin-bottom: 10px;
}
.all_lightbox .lb_menu_content .group_row .logo {
				background-color: #000;
}
.all_lightbox .lb_menu_content .group_row .logo img {
				width: 150px;
				height: 75px;
				object-fit: contain;
				border: 1px solid #fff;
}
.all_lightbox .lb_menu_content .group_row .name {
				padding-left: 1em;
				padding-right: 2em;
				font-size: 1.33em;
}
.all_lightbox .lb_menu_content .group_row .usage {
				font-size: 0.875em;
}
.all_lightbox .lb_menu_content .group_row .usage .obj_valu {
				font-weight: 400;
}
.all_lightbox .lb_menu_content .group_row .usage .max {
				font-weight: 100;
}
.all_lightbox .lb_menu_content .group_row .usage .rate {
				color: #f7e3aa;
}
.all_lightbox .lb_menu_content .group_row .usage .tips_row {
				margin-top: 0.25em;
				color: #ababab;
}
.all_lightbox .lb_menu_content .group_row .sw_btn {
				font-size: 1.125em;
				line-height: 1;
				white-space: nowrap;
				cursor: pointer;
}
.all_lightbox .lb_menu_content .group_row .sw_btn span,
.all_lightbox .lb_menu_content .group_row .sw_btn img {
				display: inline-block;
				vertical-align: middle;
}
.all_lightbox .lb_menu_content .group_row .sw_btn span {
				padding-bottom: 6px;
				border-bottom: 1px solid #fff;
}
.all_lightbox .lb_menu_content .group_row .sw_btn img {
				margin-left: 10px;
				width: 48px;
}
.all_lightbox .lb_menu_content .progress_tit {
				font-size: 1.25em;
				color: #6fc1c1;
				padding-bottom: 6px;
}
.all_lightbox .lb_menu_content .progress_row {
				border: 1px solid rgba(255, 255, 255, 0.2);
				padding: 2em 1em;
				border-radius: 4px;
				background-color: rgba(0, 0, 0, 0.8);
}
.all_lightbox .lb_menu_content .progress_unit {
				padding-left: 10px;
				padding-right: 10px;
}
.all_lightbox .lb_menu_content .progress_unit .name {
				font-size: 1.5em;
				font-weight: 700;
}
.all_lightbox .lb_menu_content .progress_unit .bar .col {
				position: relative;
				padding-left: 2px;
				color: #f7e3aa;
				font-size: 0.875em;
}
.all_lightbox .lb_menu_content .progress_unit .bar .col::before {
				content: "";
				display: block;
				width: 100%;
				height: 6px;
				margin-bottom: 6px;
				background-color: #ccc;
}
.all_lightbox .lb_menu_content .progress_unit .bar .col.is_active::before {
				background-color: #7ac943;
}
.all_lightbox .lb_menu_content .progress_unit .bar .col:first-child {
				padding-left: 0;
}

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

@media (max-width: 768px) {
				.u_left {
								left: 20px;
				}

				.u_right {
								right: 20px;
				}

				.all_bg,
.all_wrap,
.main_ship {
								min-height: auto;
								min-width: auto;
				}

				.all_wrap::after {
								content: "";
								position: fixed;
								left: 0;
								bottom: 0;
								width: 100%;
								height: 42vw;
								background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 50%, rgba(0, 0, 0, 0));
				}
				.all_wrap .main_tit {
								position: absolute;
								left: 0;
								width: 100%;
								padding-left: 20PX;
								padding-right: 90px;
				}
				.all_wrap .main_tit .tit {
								width: 100%;
				}
				.all_wrap .main_tit .news_row {
								flex-wrap: wrap;
				}
				.all_wrap .main_menu {
								right: 20px;
				}
				.all_wrap .main_menu .menu_btn img {
								background-color: rgba(27, 20, 100, 0.8);
				}
				.all_wrap .twcc_logo {
								bottom: 15px;
				}
				.all_wrap .twcc_logo a {
								display: block;
								height: 12vw;
				}

				.main_ship {
								position: static;
								left: 0;
								padding-top: 120px;
								padding-bottom: 20px;
								transform: translate(0, 0);
								max-width: 100%;
				}
				.main_ship .point {
								display: none;
				}

				.mobile_content {
								padding-bottom: 120px;
				}
				.mobile_content .mb_point {
								padding: 40px 20px;
								color: #fff;
								background-color: rgba(0, 0, 0, 0.5);
				}
				.mobile_content .mb_point:nth-child(2n) {
								background-color: rgba(0, 0, 0, 0.8);
				}
				.mobile_content .p_name {
								text-align: center;
				}
				.mobile_content .p_name span {
								display: inline-block;
								border-bottom: 2px solid #fff;
								margin-bottom: 10px;
								font-size: 1.5em;
								font-weight: 700;
				}
				.mobile_content .p_parag {
								color: #bbfffc;
				}
				.mobile_content .enemy_info {
								margin-top: 0.5em;
				}
				.mobile_content .enemy_info .name {
								font-size: 1.5em;
								color: #c4af6e;
				}
				.mobile_content .enemy_info .intro {
								line-height: 1.4;
				}
				.mobile_content .reward_block {
								border-radius: 20px;
								border: 1px solid #6fc1c1;
								margin: 0.5em 0 0.75em;
								padding: 1em 1.5em;
								text-align: center;
				}
				.mobile_content .reward_block .tit_name {
								font-size: 0.875em;
								color: #bbfffc;
				}
				.mobile_content .reward_block .value {
								font-weight: 700;
								font-size: 1.5em;
								color: #f7e3aa;
				}
				.mobile_content .reward_block .points {
								display: inline-block;
								margin-top: 0.25rem;
								border-radius: 4px;
								padding: 0.25em 0.75em;
								background-color: #6fc1c1;
								font-size: 1.125em;
				}
				.mobile_content .reward_block .tip {
								margin-top: 0.5em;
								line-height: 1.3;
				}
				.mobile_content .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;
				}
				.mobile_content .cta .cta_btn.btn_positive {
								background-color: #3174d1;
								color: #fff;
				}
				.mobile_content .cta .cta_btn.btn_positive:hover {
								background-color: #08408c;
				}
				.mobile_content .cta .cta_btn.btn_negative {
								background-color: #e6e6e6;
								color: #808080;
				}
				.mobile_content .cta .cta_btn.btn_negative:hover {
								background-color: #bababa;
				}
				.mobile_content .cta {
								text-align: center;
				}
				.mobile_content .enemy_img {
								display: none;
				}

				.all_lightbox .lb_point {
								display: none;
				}
				.all_lightbox .lb_menu_content {
								min-width: none;
								width: 100%;
								padding: 20px;
				}
				.all_lightbox .lb_menu_content .b_top {
								padding-top: 40px;
				}
				.all_lightbox .lb_menu_content .b_top .news_row {
								text-align: left;
								font-size: 1.25em;
				}
				.all_lightbox .lb_menu_content .b_top .news_row .name {
								padding-top: 0.65em;
								padding-bottom: 0;
				}
				.all_lightbox .lb_menu_content .b_top .news_row .value_box::before {
								display: none;
				}
				.all_lightbox .lb_menu_content .b_top .value_box {
								color: #c4af6e;
				}
				.all_lightbox .lb_menu_content .menu_row {
								margin: 0;
								padding: 2em 0;
				}
				.all_lightbox .lb_menu_content .menu_row .item .text {
								font-size: 1.25em;
								line-height: 1.2;
				}
				.all_lightbox .lb_menu_content .group_row,
.all_lightbox .lb_menu_content .progress_tit,
.all_lightbox .lb_menu_content .function {
								text-align: center;
				}
				.all_lightbox .lb_menu_content .group_row .name {
								padding: 0.25em 0 0.5em;
				}
				.all_lightbox .lb_menu_content .group_row .usage .tips_row {
								margin-top: 0.5em;
				}
				.all_lightbox .main_menu .menu_btn img {
								background-color: rgba(0, 0, 0, 0.9);
				}
}