@charset "utf-8";
/* CSS Document */

/*捲軸樣式*/
::-webkit-scrollbar {  
    width: 5px;
    height: 5px;
	border-radius: 4px;
    background-color: #f3f3f3;
}  
  
::-webkit-scrollbar-track {    
    border-radius: 4px;
    background-color: #f3f3f3;
}  
  
::-webkit-scrollbar-thumb {  
    border-radius: 4px;
    background-color: #ccc;
}

img {
	width: 100%;
	height: auto;
	display: block;
}

html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

body {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	background-color: #000;
	font-family: 'Noto Sans TC';
}

.pmv_img {
	display: block !important;
}

.mv_img {
	display: none;
}

.pmv_img {
	width: 100%;
	height: auto;
}

.mv_img {
	width: 100%;
	height: auto;
}

.main {
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: 100%;
	max-width: 1920px;
	max-height: 1200px;
}

.index {
	position: relative;
	background-color: #ececec;
	height: 100%;
	background-image: url(images/overflow_bg.jpg);
	background-position: left top;
	background-repeat: repeat;
	background-size: 50% auto;
}

.index .mv {
	position: relative;
	margin: 0;
	background-color: #a691e7;
	overflow: hidden;
}

.index h2 {
	margin: 0;
}

.index .mv h2 {
    position: absolute;
    left: 32.9%;
    top: 5.3%;
    max-width: 34.2%;
	z-index: 2;	
}

.index .mv .little_title {
    position: absolute;
    left: 50%;
    top: 25.3%;
	margin: 0;
    max-width: 38.6%;
	z-index: 1;
	transform: translateX(-50%);
}

.index .mv .m_little_title {
    position: absolute;
    left: 0%;
    bottom: 0%;
	margin: 0;
    max-width: 100%;
	z-index: 5;
	display: none;
}



.index .mv .forbid {
    position: absolute;
    left: 4.6%;
    top: 24.7%;
    max-width: 90.7%;
	z-index: 1;
	display: none;
}

.index .mv .forbid_mask {
    position: absolute;
    left: 4.6%;
    top: 24.7%;
    max-width: 90.7%;
	z-index: 4;
	display: none;
}

.index .mv .covid_purple {
    position: absolute;
    left: 23.5%;
    top: 55.3%;
    max-width: 28.9%;
	z-index: 5;
	animation:1s 0s forwards covid_purple_sideup, 2.1s 1s infinite covid_purple_move;
	transition: 0.5s;
}

@keyframes covid_purple_sideup {
    0% {
		top: 100%;
    }
	
    100% {
		top: 55.3%;
    }
}

@keyframes covid_purple_move {
    0% {
		top: 55.3%;
		
    }
	
    50% {
		top: 53.3%;
		
    }
	
    100% {
		top: 55.3%;
    }
}

.index .mv .covid_green {
    position: absolute;
    left: 4.4%;
    top: 65.2%;
    max-width: 26.3%;
	z-index: 4;
	animation:1s 0s forwards covid_green_sideup, 2.2s 1s infinite covid_green_move;
	transition: 0.5s;
}

@keyframes covid_green_sideup {
    0% {
		top: 100%;
    }
	
    100% {
		top: 65.2%;
    }
}

@keyframes covid_green_move {
    0% {
		top: 65.2%;
		
    }
	
    50% {
		top: 63.2%;
		
    }
	
    100% {
		top: 65.2%;
    }
}

.index .mv .covid_pink {
    position: absolute;
    right: 30.7%;
    top: 59.4%;
    max-width: 24.1%;
	z-index: 3;
	animation:1s 0s forwards covid_pink_sideup, 2.4s 1s infinite covid_pink_move;
	transition: 0.5s;
}

@keyframes covid_pink_sideup {
    0% {
		top: 100%;
    }
	
    100% {
		top: 59.4%;
    }
}

@keyframes covid_pink_move {
    0% {
		top: 59.4%;
		
    }
	
    50% {
		top: 57.4%;
		
    }
	
    100% {
		top: 59.4%;
    }
}

.index .mv .covid_yellow {
    position: absolute;
    right: 14.1%;
    top: 66.3%;
    max-width: 23.3%;
	z-index: 2;
	animation:1s 0s forwards covid_yellow_sideup, 2.6s 1s infinite covid_yellow_move;
	transition: 0.5s;
}

@keyframes covid_yellow_sideup {
    0% {
		top: 100%;
    }
	
    100% {
		top: 66.3%;
    }
}

@keyframes covid_yellow_move {
    0% {
		top: 66.3%;
		
    }
	
    50% {
		top: 64.3%;
		
    }
	
    100% {
		top: 66.3%;
    }
}

.index .mv .covid_cyan_blue {
    position: absolute;
    right: 2.2%;
    top: 64%;
    max-width: 20.1%;
	z-index: 1;
	animation:1s 0s forwards covid_cyan_blue_sideup, 2.8s 1s infinite covid_cyan_blue_move;
	transition: 0.5s;
}

@keyframes covid_cyan_blue_sideup {
    0% {
		top: 100%;
    }
	
    100% {
		top: 64%;
    }
}

@keyframes covid_cyan_blue_move {
    0% {
		top: 64%;
		
    }
	
    50% {
		top: 62%;
		
    }
	
    100% {
		top: 64%;
    }
}

.index .mv .covid_red {
    position: absolute;
    left: -6.2%;
    top: 45.9%;
    max-width: 16.5%;
	z-index: 1;
	animation:1s 0s forwards covid_red_sideup, 2.8s 1s infinite covid_red_move;
	transition: 0.5s;
}

@keyframes covid_red_sideup {
    0% {
		left: -100%;
    }
	
    100% {
		left: -6.2%;
    }
}

@keyframes covid_red_move {
    0% {
		top: 45.9%;
		
    }
	
    50% {
		top: 43.9%;
		
    }
	
    100% {
		top: 45.9%;
    }
}

.index .mv .covid_kelly {
    position: absolute;
    right: -8.5%;
    top: 34.4%;
    max-width: 19.2%;
	z-index: 1;
	animation:1s 0s forwards covid_kelly_sideup, 2.8s 1s infinite covid_kelly_move;
	transition: 0.5s;
}

@keyframes covid_kelly_sideup {
    0% {
		right: -100%;
    }
	
    100% {
		right: -8.5%;
    }
}

@keyframes covid_kelly_move {
    0% {
		top: 34.4%;
		
    }
	
    50% {
		top: 32.4%;
		
    }
	
    100% {
		top: 34.4%;
    }
}

.index .mv .blockade {
	position: absolute;
	top: 90.3%;
	left: 0;
	z-index: 8;
	animation:3s 1s infinite blockade;
}

@keyframes blockade {
    0% {
		top: 90.3%;
		
    }
	
    50% {
		top: 89.3%;
		
    }
	
    100% {
		top: 90.3%;
    }
}

.index .mv .sweat_01 {
	position: absolute;
    left: 10.4%;
    top: 80.8%;
	width: 100%;
    max-width: 2.1%;
    z-index: 7;
	opacity: 0;
	animation:2s 2.1s infinite sweat_01;	
}

@keyframes sweat_01 {	
    0% {
		top: 80.8%;
		opacity: 100%;
    }
	
    100% {
		top: 85.8%;
		opacity: 0%;
    }
}

.index .mv .sweat_02 {
    position: absolute;
    left: 26.9%;
    top: 72.5%;
    max-width: 2.3%;
	z-index: 7;
	opacity: 0;
	animation:2s 2.1s infinite sweat_02;
}

@keyframes sweat_02 {	
    0% {
		top: 72.5%;
		opacity: 100%;
    }
	
    100% {
		top: 77.5%;
		opacity: 0%;
    }
}

.index .mv .sweat_03 {
    position: absolute;
    right: 51.6%;
    top: 81.7%;
    max-width: 2.1%;
	z-index: 7;
	opacity: 0;
	animation:2s 2.1s infinite sweat_03;
}

@keyframes sweat_03 {	
    0% {
		top: 81.7%;
		opacity: 100%;
    }
	
    100% {
		top: 86.7%;
		opacity: 0%;
    }
}

.index .mv .sweat_04 {
    position: absolute;
    right: 17.6%;
    top: 77%;
    max-width: 3.3%;
	z-index: 7;
	opacity: 0;
	animation:2s 2.3s infinite sweat_04;
}

@keyframes sweat_04 {	
    0% {
		top: 77%;
		opacity: 100%;
    }
	
    100% {
		top: 82%;
		opacity: 0%;
    }
}

.menu ul {
	margin: 0 -8px;
	padding: 0;
	font-size: 0;
}

.menu li {
    position: absolute;
    margin: 8px;
    padding: 0;
    width: calc(16.3% - 16px);
    list-style: none;
    font-size: 24px;
    display: inline-block;
    border-radius: 30px;
    text-align: center;
	z-index: 5;
	transition: 0.5s;
	cursor: pointer;
}

.menu li img {
	max-width: 352px;
	margin: 0 auto;
}

.menu .menu_01 {
    background-color: #a0bae8;
    top: 31.5%;
    left: 7.6%;
	transition: 0.5s;
}

.menu .menu_02 {
	background-color: #bdb6da;
    top: 31.5%;
    left: 24.6%;
	transition: 0.5s;
}

.menu .menu_03 {
	background-color: #9ecddb;
    top: 31.5%;
    left: 41.7%;
	transition: 0.5s;
}

.menu .menu_04 {
	background-color: #83cbbe;
    top: 31.5%;
    left: 58.8%;
	transition: 0.5s;
}

.menu .menu_05 {
	background-color: #e9b3b3;
    top: 31.5%;
    left: 75.9%;
	transition: 0.5s;
}

.menu li p {
	position: absolute;
	bottom: 14px;
	left: 50%;
	background-color: #fff;
	border-radius: 99px;
	margin: 0;
	padding: 5px 20px;
	line-height: 100%;
	transform: translateX(-50%);
	white-space: nowrap;
	color: #273757;
}

.menu .label {
	position: absolute;
	right: 27px;
	top: 0;
	z-index: 1;
}

.menu .label img {
	max-width: 50px;
	transition: 0.5s;
}











.toolbar .toolbar_join {
	top: 11%;
	left: 12%;
	background-color: #fff;
	border-radius: 99px;
}

.toolbar .toolbar_buy {
	top: 11%;
	left: 21.5%;
	background-color: #fff;
	border-radius: 99px;
}

.toolbar .toolbar_event {
	top: 11%;
	right: 21.5%;
	background-color: #fff;
	border-radius: 99px;
}

.toolbar .toolbar_notice {
	top: 11%;
	right: 12%;
	background-color: #fff;
	border-radius: 99px;
}

.toolbar ul {
    margin: 0;
    padding: 0;
    font-size: 0;
}

.toolbar li {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 7.9%;
	height: 12.7%;
	font-size: 17px;
	color: #273757;
	text-align: center;
	line-height: 100%;
	box-sizing: border-box;
	z-index: 10;
	transition: 0.5s;
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

.toolbar li:hover {
	background-color: #f5d34d;
}

.toolbar li img {
    max-width: 45.4%;
    margin: 0 auto;
}

.toolbar li a {
	text-decoration: none;
    color: #273757;
	padding: 0 0 8% 0;
}

.ig{ position:absolute; background: #fff; top: 10px; right: 10px; z-index: 10; padding: 5px 10px; border-radius: 10px; transition: .5s;}
.ig a{ color:#273757; text-decoration: none;}
.ig img{ max-width: 30px; display: inline-block; vertical-align: middle;}

@media (max-width:1140px){
.ig{ top: 8px; right: 0; padding: 0; width: 20%; background: transparent;  border-radius: 0; z-index: 20; font-size: 13px; text-align: center;}
.ig img{ max-width: 68px; display: block; margin: 0 auto;}
}

@media (max-width:600px){
.ig{}
.ig img{ max-width: 40px;}
}

.dot {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0px;
	height: 0px;
	display: block;
	border-radius: 100%;
	z-index: 10;
	transition: 0.5s;
}


.trans01 {
	animation:1.2s 0s forwards trans01;
}

.trans02 {
	animation:1.2s 0s forwards trans02;
}

.trans03 {
	animation:1.2s 0s forwards trans03;
}

.trans04 {
	animation:1.2s 0s forwards trans04;
}

.trans05 {
	animation:1.2s 0s forwards trans05;
}

.trans06 {
	animation:1.2s 0s forwards trans02;
}

@keyframes trans01 {	
    0% {
		width: 1vw;
		height: 1vh;
		opacity: 0%;
		background-color: #a0bae8;
    }
	
    20% {
		width: 30vw;
		height: 30vw;
		opacity: 100%;
		background-color: #a0bae8;
    }
	
    30% {
		width: 20vw;
		height: 20vw;
		opacity: 100%;
		background-color: #a0bae8;
    }
	
    100% {
		width: 300vw;
		height: 300vw;
		opacity: 100%;
		background-color: #a0bae8;
    }
}

@keyframes trans02 {	
    0% {
		width: 0vw;
		height: 0vh;
		opacity: 0%;
		background-color: #bdb6da;
    }
	
    20% {
		width: 30vw;
		height: 30vw;
		opacity: 100%;
		background-color: #bdb6da;
    }
	
    30% {
		width: 20vw;
		height: 20vw;
		opacity: 100%;
		background-color: #bdb6da;
    }
	
    100% {
		width: 300vw;
		height: 300vw;
		opacity: 100%;
		background-color: #bdb6da;
    }
}

@keyframes trans03 {	
    0% {
		width: 0vw;
		height: 0vh;
		opacity: 0%;
		background-color: #9ecddb;
    }
	
    20% {
		width: 30vw;
		height: 30vw;
		opacity: 100%;
		background-color: #9ecddb;
    }
	
    30% {
		width: 20vw;
		height: 20vw;
		opacity: 100%;
		background-color: #9ecddb;
    }
	
    100% {
		width: 300vw;
		height: 300vw;
		opacity: 100%;
		background-color: #9ecddb;
    }
}

@keyframes trans04 {	
    0% {
		width: 0vw;
		height: 0vh;
		opacity: 0%;
		background-color: #83cbbe;
    }
	
    20% {
		width: 30vw;
		height: 30vw;
		opacity: 100%;
		background-color: #83cbbe;
    }
	
    30% {
		width: 20vw;
		height: 20vw;
		opacity: 100%;
		background-color: #83cbbe;
    }
	
    100% {
		width: 300vw;
		height: 300vw;
		opacity: 100%;
		background-color: #83cbbe;
    }
}

@keyframes trans05 {	
    0% {
		width: 0vw;
		height: 0vh;
		opacity: 0%;
		background-color: #e9b3b3;
    }
	
    20% {
		width: 30vw;
		height: 30vw;
		opacity: 100%;
		background-color: #e9b3b3;
    }
	
    30% {
		width: 20vw;
		height: 20vw;
		opacity: 100%;
		background-color: #e9b3b3;
    }
	
    100% {
		width: 300vw;
		height: 300vw;
		opacity: 100%;
		background-color: #e9b3b3;
    }
}


@media screen and (max-width:1680px){

.menu .label img {
    max-width: 35px;
}

}


@media screen and (max-width:1440px){

.menu li {
	font-size: 16px;
}

.menu .label img {
    max-width: 25px;
}

.toolbar li {
	font-size: 15px;
}

}



@media screen and (max-width:1140px){

body {
	background-color: #ececec;
}

.pmv_img {
	display: none !important;
}

.mv_img {
	display: block !important;
}

.main {
	padding: 0;
	max-width: 100%;
	height: fit-content;
}

.index {
	padding: 16px 16px 114px 16px;
	background:none;
	background-color: #ececec;
}

.index .mv {
	margin: 0 0 8px 0;
	border-radius: 30px;
	
}

.index .mv h2 {
    left: 14.6%;
    top: 3.6%;
    max-width: 70.5%;
	animation:1s 0s forwards m_mv_h2;
}

.toolbar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	max-width: 1140px;
	height: 106px;
	background-color: #fff;
	z-index: 20;
}

.toolbar ul {
    margin: 0;
    padding: 8px 0 0 0;
    font-size: 0;
}

.toolbar li {
	position: inherit;
	margin: 0;
	padding: 0;
	width: 20%;
	display: inline-block;
	font-size: 17px;
	color: #273757;
	text-align: center;
	line-height: 100%;
}

.toolbar li:hover {
	background:none;
}

.toolbar li img {
    max-width: 68px;
    margin: 0 auto;
}

.toolbar li a {
	text-decoration: none;
    color: #273757;
}

.index .mv .little_title {
    display: none;
}

.index .mv .m_little_title {
	display: block;
}

.menu li {
    width: calc(50% - 16px);
    position: relative;
	top: inherit !important;
	left: inherit !important;
	font-size: 24px;
}

.menu .label img {
    max-width: 50px;
}

.index .mv .forbid {
	display: block;
}

.index .mv .forbid_mask {
	display: block;
}

.index .mv .covid_purple {
    position: absolute;
    left: 20.8%;
	top: inherit;
    bottom: -20.7%;
    max-width: 58.9%;
	z-index: 3;
	animation:1s 0s forwards m_covid_purple_sideup, 2s 1s infinite m_covid_purple_move;
}

.index .mv .covid_green {
    position: absolute;
    left: 3.5%;
	top: inherit;
    bottom: 0%;
    max-width: 39.1%;
	z-index: 2;
	animation:1s 0s forwards m_covid_green_sideup, 2s 1s infinite m_covid_green_move;
}

.index .mv .covid_pink {
    position: absolute;
    right: 5.8%;
	top: inherit;
    bottom: -2.4%;
    max-width: 33%;
	z-index: 2;
	animation:1s 0s forwards m_covid_pink_sideup, 2s 1s infinite m_covid_pink_move;
}

.blockade {
	display: none;
}

.index .mv .covid_yellow {
	display: none;
}

.index .mv .covid_red {
	display: none;
}

.index .mv .covid_cyan_blue {
	display: none;
}

.index .mv .covid_kelly {
	display: none;
}

.index .mv .sweat_01 {
    position: absolute;
    left: 12.3%;
    top: 73.9%;
    max-width: 3.3%;
	z-index: 3;
	opacity: 0;
	animation:2s 2.1s infinite m_sweat_01;	
}



.index .mv .sweat_02 {
    position: absolute;
    left: 27.6%;
    top: 56.4%;
    max-width: 4.9%;
	z-index: 3;
	opacity: 0;
	animation:2s 2s infinite m_sweat_02;	
}



.index .mv .sweat_03 {
    position: absolute;
    right: 28.7%;
    top: 69.6%;
    max-width: 4.5%;
	z-index: 3;
	opacity: 0;
	animation:2s 2.2s infinite m_sweat_03;	
}

.index .mv .sweat_04 {
	display: none;
}


}

@keyframes m_mv_h2 {
    0% {
		top: -100%;
    }
	
    100% {
		top: 3.6%;
    }
}

@keyframes m_covid_purple_sideup {
    0% {
		bottom: -100%;
    }
	
    100% {
		bottom: -20.7%;
    }
}

@keyframes m_covid_purple_move {
    0% {
		bottom: -20.7%;
		
    }
	
    50% {
		bottom: -22.7%;
		
    }
	
    100% {
		bottom: -20.7%;
    }
}

@keyframes m_covid_green_sideup {
    0% {
		bottom: -100%;
    }
	
    100% {
		bottom: 0%;
    }
}

@keyframes m_covid_green_move {
    0% {
		bottom: 0%;
		
    }
	
    50% {
		bottom: 2%;
		
    }
	
    100% {
		bottom: 0%;
    }
}

@keyframes m_covid_pink_sideup {
    0% {
		bottom: -100%;
    }
	
    100% {
		bottom: -2.4%;
    }
}

@keyframes m_covid_pink_move {
    0% {
		bottom: -2.4%;
		
    }
	
    50% {
		bottom: 0.4%;
		
    }
	
    100% {
		bottom: -2.4%;
    }
}

@keyframes m_sweat_01 {	
    0% {
		top: 68.9%;
		opacity: 100%;
    }
	
    100% {
		top: 73.9%;
		opacity: 0%;
    }
}

@keyframes m_sweat_02 {
    0% {
		top: 51.4%;
		opacity: 100%;
    }
	
    100% {
		top: 56.4%;
		opacity: 0%;
    }
}

@keyframes m_sweat_03 {
    0% {
		top: 64.6%;
		opacity: 100%;
    }
	
    100% {
		top: 69.6%;
		opacity: 0%;
    }
}



@media screen and (max-width:600px){

.index {
    padding: 16px 16px 85px 16px;
}

.menu li {
    border-radius: 12px;
}

.menu li p {
    bottom: 8px;
}

.menu .label {
    right: 10px;
}

.menu .label img {
    max-width: 25px;
}

.toolbar {
    height: 77px;
}

.toolbar li img {
    max-width: 40px;
}

.toolbar li a {
    font-size: 13px;
}

.menu li p {
	font-size: 13px;
}

}