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



.covid_purple, .covid_green, .covid_pink, .covid_yellow {
	cursor: crosshair;
}

/*捲軸樣式*/
::-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: #fff;
	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: #c19d68;
	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 .leaf_01 {
    position: absolute;
    right: -418px;
    top: -304px;
    max-width: 10.9%;
	z-index: 5;
	animation:15s 0s infinite leaf_01;
	transition: 0.5s;
	transform:rotate(0deg);
}

@keyframes leaf_01 {
    0% {
		top: -304px;
		right: -418px;
		max-width: 10.9%;
		transform:rotate(0deg);
    }
	
    100% {
		top: 1480px;
		right: 1000px;
		transform:rotate(360deg);
		max-width: 10.9%;
    }
}

.index .mv .leaf_02 {
    position: absolute;
    left: -234px;
    top: -284px;
    max-width: 6.1%;
	z-index: 5;
	animation:15s 1.5s infinite leaf_02;
	transition: 0.5s;
	transform:rotate(0deg);
}

@keyframes leaf_02 {
    0% {
		top: -284px;
		left: -234px;
		max-width: 6.1%;
		transform:rotate(0deg);
    }
	
    100% {
		top: 1480px;
		left: 1000px;
		transform:rotate(360deg);
		max-width: 6.1%;
    }
}

.index .mv .covid_purple {
    position: absolute;
    left: 24.2%;
    top: 55%;
    max-width: 28%;
	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%;
    }
}

@keyframes covid_purple_move {
    0% {
		top: 55%;
		
    }
	
    50% {
		top: 53%;
		
    }
	
    100% {
		top: 55%;
    }
}

.index .mv .covid_purple .covid_purple_wound01 {
	position: absolute;
	left: 61%;
	top: 15.5%;
	z-index: 6;
	max-width: 15.6%;
	animation:2s 0s forwards covid_purple_wound01;
	transition: 0.5s;
}

.index .mv .covid_purple .covid_purple_wound01 img {
	width: 100%;
	height: auto;
}

@keyframes covid_purple_wound01 {
    0% {
		top: 18%;
		max-width: 14.6%;
    }
	
    100% {
		top: 15.5%;
		max-width: 15.6%;
    }
}

.index .mv .covid_purple .covid_purple_wound02 {
	position: absolute;
	right: 86%;
	top: 36.1%;
	z-index: 6;
	max-width: 11.2%;
	animation:2s 0s forwards covid_purple_wound02;
	transition: 0.5s;
}

.index .mv .covid_purple .covid_purple_wound02 img {
	width: 100%;
	height: auto;
}

@keyframes covid_purple_wound02 {
    0% {
		top: 39.1%;
		max-width: 8.2%;
    }
	
    100% {
		top: 36.1%;
		max-width: 11.2%;
    }
}

.index .mv .covid_green {
    position: absolute;
    left: 3.1%;
    top: 64.6%;
    max-width: 26.8%;
	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: 64.6%;
    }
}

@keyframes covid_green_move {
    0% {
		top: 64.6%;
		
    }
	
    50% {
		top: 62.6%;
		
    }
	
    100% {
		top: 64.6%;
    }
}


.index .mv .covid_green .covid_green_wound {
	position: absolute;
	left: 71.8%;
	top: 38.3%;
	z-index: 6;
	max-width: 11.7%;
	animation:2s 0s forwards covid_green_wound;
	transition: 0.5s;
}

.index .mv .covid_green .covid_green_wound img {
	width: 100%;
	height: auto;
}

@keyframes covid_green_wound {
    0% {
		top: 38.3%;
		max-width: 8.7%;
    }
	
    100% {
		top: 35.3%;
		max-width: 11.7%;
    }
}





.index .mv .covid_pink {
    position: absolute;
    left: 48.8%;
    top: 60.5%;
    max-width: 19.6%;
	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: 60.5%;
    }
}

@keyframes covid_pink_move {
    0% {
		top: 60.5%;
		
    }
	
    50% {
		top: 58.5%;
		
    }
	
    100% {
		top: 60.5%;
    }
}



.index .mv .covid_pink .covid_pink_wound {
	position: absolute;
	right: 32.9%;
	top: 2.7%;
	z-index: 6;
	max-width: 21.5%;
	animation:2s 0s forwards covid_pink_wound;
	transition: 0.5s;
}

.index .mv .covid_pink .covid_pink_wound img {
	width: 100%;
	height: auto;
}

@keyframes covid_pink_wound {
    0% {
		top: 2.7%;
		max-width: 18.5%;
    }
	
    100% {
		top: 0.7%;
		max-width: 21.5%;
    }
}




.index .mv .covid_yellow {
    position: absolute;
    right: 16.1%;
    top: 66.3%;
    max-width: 18.6%;
	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_yellow .covid_yellow_wound {
	position: absolute;
	right: 58.7%;
	top: 15.4%;
	z-index: 6;
	max-width: 22.6%;
	animation:2s 0s forwards covid_yellow_wound;
	transition: 0.5s;
}

.index .mv .covid_yellow .covid_yellow_wound img {
	width: 100%;
	height: auto;
}

@keyframes covid_yellow_wound {
    0% {
		top: 15.4%;
		max-width: 19.6%;
    }
	
    100% {
		top: 13.4%;
		max-width: 22.6%;
    }
}



.index .mv .covid_cyan_blue {
    position: absolute;
    right: 3.6%;
    top: 65.2%;
    max-width: 16.3%;
	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: 65.2%;
    }
}

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

.index .mv .covid_red {
    position: absolute;
    left: -11.6%;
    top: 47.8%;
    max-width: 23.3%;
	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: -11.6%;
    }
}

@keyframes covid_red_move {
    0% {
		top: 47.8%;
		
    }
	
    50% {
		top: 45.8%;
		
    }
	
    100% {
		top: 47.8%;
    }
}

.index .mv .covid_kelly {
    position: absolute;
    right: -8.7%;
    top: 40.9%;
    max-width: 19.1%;
	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.7%;
    }
}

@keyframes covid_kelly_move {
    0% {
		top: 40.9%;
		
    }
	
    50% {
		top: 38.9%;
		
    }
	
    100% {
		top: 40.9%;
    }
}

.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 .tears_01 {
	position: absolute;
    left: 16%;
    top: 76.2%;
	width: 100%;
    max-width: 2%;
    z-index: 7;
	opacity: 0;
	animation:2s 2.1s infinite tears_01;	
}

@keyframes tears_01 {	
    0% {
		top: 76.2%;
		opacity: 100%;
    }
	
    100% {
		top: 79.2%;
		opacity: 0%;
    }
}

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

@keyframes tears_02 {	
    0% {
		top: 72.5%;
		opacity: 100%;
    }
	
    100% {
		top: 75.5%;
		opacity: 0%;
    }
}

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

@keyframes tears_03 {	
    0% {
		top: 70.9%;
		opacity: 100%;
    }
	
    100% {
		top: 73.9%;
		opacity: 0%;
    }
}

.index .mv .tears_04 {
    position: absolute;
    right: 18.5%;
    top: 78%;
    max-width: 1.5%;
	z-index: 7;
	opacity: 0;
	animation:2s 2.3s infinite tears_04;
}

@keyframes tears_04 {	
    0% {
		top: 78%;
		opacity: 100%;
    }
	
    100% {
		top: 81%;
		opacity: 0%;
    }
}

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

.menu li {
    position: absolute;
    margin: 8px;
    padding: 0;
    width: calc(18.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: #d5b380;
    top: 31.5%;
    left: 11.1%;
	transition: 0.5s;
}

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

.menu .menu_03 {
	background-color: #d5b380;
    top: 31.5%;
    left: 50.7%;
	transition: 0.5s;
}

.menu .menu_04 {
	background-color: #d5b380;
    top: 31.5%;
    left: 70.6%;
	transition: 0.5s;
}

.menu .menu_05 {
	background-color: #af9ee2;
	transition: 0.5s;
}

.menu .menu_06 {
	background-color: #af9ee2;
	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;
	transition: 0.5s;
}

.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_ig {
	top: 11%;
	right: 12%;
	background-color: #fff;
	border-radius: 99px;
}

.toolbar .toolbar_more {
	cursor: pointer;
}

.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;
	transition: 0.5s;
}

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

.more_list {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 5;
}

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

.more_list li {
    margin: 0 10px 0 0;
    list-style: none;
    line-height: 29px;
    display: inline-block;
    font-size: 14px;
}

.more_list li:last-child {
	margin: 0;
}

.more_list li a {
    color: #000;
    text-decoration: none;
    background-color: #fff;
    border-radius: 10px;
    display: inline-block;
    padding: 2px 10px;
    box-sizing: border-box;
}

.more_list li a:hover {
	background-color: #f5d34d;
	transition: 0.5s;
}

.more_list li a img {
    margin: 0 4px 0 0;
    width: 20px;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

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

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

@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;
	background-color: #af9ee2;
}

.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: 25%;
	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;
}

.more_list {
    position: fixed;
    right: 15px;
    bottom: 93px;
    background-color: #fff;
    border-radius: 10px;
    z-index: 21;
    box-shadow: 3px 5px 5px rgba(0,0,0,0.05);
	top: inherit;
	display: none;
}

.more_list ul {
    margin: 0;
    padding: 15px;
}

.more_list ul:after {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #fff transparent transparent transparent;
    content: "";
    display: block;
    position: absolute;
    right: 30px;
    bottom: -10px;
}

.more_list li {
    margin: 0 0 10px 0;
    padding: 0;
    list-style: none;
    display: block;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
	line-height: 24px;
}

.more_list li:last-child {
    margin: 0;
}

.more_list li a {
    color: #000;
    font-size: 15px;
    text-decoration: none;
}

.more_list li a img {
    margin: 0 10px 0 0;
    padding: 0;
    max-width: 24px !important;
    display: inline-block;
    vertical-align: middle;
    line-height: 24px;
}

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

.menu .menu_01, .menu .menu_02, .menu .menu_03, .menu .menu_04 {
	background-color: #af9ee2;
}

.menu .menu_05, .menu .menu_06 {
	display: inline-block !important;
}

.index .mv .covid_purple {
	position: absolute;
    left: 34.8%;
    top: inherit;
    bottom: -20.7%;
    max-width: 36.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: 1%;
    top: inherit;
    bottom: 0%;
    max-width: 36%;
    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: 6%;
    left: inherit;
    top: inherit;
    bottom: -3%;
    max-width: 25%;
    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 .tears_01 {
    position: absolute;
    left: 10%;
    top: 68%;
    max-width: 3.3%;
	z-index: 3;
	opacity: 0;
	animation:2s 2.1s infinite m_tears_01;	
}

.index .mv .tears_02 {
    position: absolute;
    left: 26%;
    top: 60%;
    max-width: 4.9%;
	z-index: 3;
	opacity: 0;
	animation:2s 2s infinite m_tears_02;	
}

.index .mv .tears_03 {
    position: absolute;
    right: 1%;
    top: 57%;
    max-width: 4.5%;
	z-index: 3;
	opacity: 0;
	animation:2s 2.2s infinite m_tears_03;	
}

.index .mv .tears_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: 2%;
    }
}

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

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

@keyframes m_covid_pink_move {
    0% {
		bottom: -4%;
		
    }
	
    50% {
		bottom: 1%;
		
    }
	
    100% {
		bottom: -4%;
    }
}

@keyframes m_tears_01 {	
    0% {
		top: 68%;
		opacity: 100%;
    }
	
    100% {
		top: 71%;
		opacity: 0%;
    }
}

@keyframes m_tears_02 {
    0% {
		top: 60%;
		opacity: 100%;
    }
	
    100% {
		top: 63%;
		opacity: 0%;
    }
}

@keyframes m_tears_03 {
    0% {
		top: 57%;
		opacity: 100%;
    }
	
    100% {
		top: 60%;
		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 {
    font-size: 13px;
}

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

}

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

.menu li p {
	font-size: 12px;
    padding: 3px 10px;
}

}