@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);

/* banner */
	#mytext {
		height: 900px;
		left: 0;
		padding: 5em 0 0 0;
		position: absolute;
		text-align: left;
		width: 100%;
		z-index: 5;
		border: 0px solid #c0c000;
	}

		#mytext .inner {
			height: 100%;
			padding: 0 0 0 0;
			margin: 0 0 0 0;
			max-width: 100%;
			width: calc(100%);
			position: relative;
			z-index: 1;
			border: 0px solid #bcdd3d;
		}
		
		#mytext .tbox {
			width: 100%;
			position: absolute; /* 設為絕對定位(absolute) */
			bottom: 0px;
			left : 0px; /* 右邊上面都設0，則出現在右上方 */
			z-index: 2;
			border: 0px solid #df1112;
			background: -webkit-linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.8));
			background: -o-linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.8));
			background: -moz-linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.8));
			background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.8));
		}


			@media screen and (max-width: 1920px) {
				
				#mytext {
					height: 940px;
			  }
				
				#mytext .tbox {
					border: 0px solid #bcdd3d;
					width: 100%;
					padding: 0 2em 0 2em;
			    position: absolute; /* 設為絕對定位(absolute) */
			  }

				#mytext .inner {
					max-width: 100%;
					width: 100%;
				}
				#mytext h1 {
					max-width: 100%;
					width: 100%;
					font-size: 1em;
					margin: 0em 0em;
				}
				
				#mytext h2 {
					max-width: 100%;
					width: 100%;
					font-size: 0.5em;
					margin: 1em 0em;
				}

			}

			@media screen and (max-width: 1280px) {
				
				#mytext {
					height: 880px;
			  }
				
				#mytext .tbox {
					width: 100%;
			    position: absolute; /* 設為絕對定位(absolute) */
			  }

				#mytext .inner {
					max-width: 100%;
					width: 100%;
				}
				#mytext h1 {
					max-width: 100%;
					width: 100%;
					font-size: 1em;
					margin: 0em 0em;
				}
				
				#mytext h2 {
					max-width: 100%;
					width: 100%;
					font-size: 0.5em;
					margin: 1em 0em;
				}

			}

			@media screen and (max-width: 1024px) {
				
				#mytext {
					height: 660px;
			  }
				
				#mytext .tbox {
					width: 100%;
			    position: absolute; /* 設為絕對定位(absolute) */
			  }

				#mytext .inner {
					max-width: 100%;
					width: 100%;
				}
				#mytext h1 {
					max-width: 100%;
					width: 100%;
					font-size: 1em;
					margin: 0em 0em;
				}
				
				#mytext h2 {
					max-width: 100%;
					width: 100%;
					font-size: 0.5em;
					margin: 1em 0em;
				}

			}
		
			@media screen and (max-width: 768px) {
				
				#mytext .tbox {
					width: 100%;
			    position: absolute; /* 設為絕對定位(absolute) */
			  }

				#mytext .inner {
					max-width: 100%;
					width: 100%;
				}
				#mytext h1 {
					max-width: 100%;
					width: 100%;
					font-size: 1em;
					margin: 0em 0em;
				}
				
				#mytext h2 {
					max-width: 100%;
					width: 100%;
					font-size: 0.5em;
					margin: 1em 0em;
				}

			}
			
			@media screen and (max-width: 568px) {
				
				#mytext {
					height: 568px;
			  }
				
				#mytext .tbox {
					width: 100%;
			    position: absolute; /* 設為絕對定位(absolute) */
			  }

				#mytext .inner {
					max-width: 100%;
					width: 100%;
				}
				#mytext h1 {
					max-width: 100%;
					width: 100%;
					font-size: 1em;
					margin: 0em 0em;
				}
				
				#mytext h2 {
					max-width: 100%;
					width: 100%;
					font-size: 0.5em;
					margin: 1em 0em;
				}

			}

			@media screen and (max-width: 480px) {
				
				#mytext {
					height: 480px;
			  }
			  
				#mytext .tbox {
					width: 100%;
			    position: absolute; /* 設為絕對定位(absolute) */
			  }

				#mytext .inner {
					max-width: 100%;
					width: 100%;
				}
				#mytext h1 {
					max-width: 100%;
					width: 100%;
					font-size: 0.5em;
					margin: 0em 0em;
				}
				
				#mytext h2 {
					max-width: 100%;
					width: 100%;
					font-size: 0.5em;
					margin: 1em 0em;
				}

			}
			
			@media screen and (max-width: 320px) {
				
				#mytext {
					height: 320px;
			  }
				
				#mytext .tbox {
					width: 100%;
			    position: absolute; /* 設為絕對定位(absolute) */
			  }

				#mytext .inner {
					max-width: 100%;
					width: 100%;
				}
				#mytext h1 {
					max-width: 100%;
					width: 100%;
					font-size: 1em;
					margin: 0em 0em;
				}
				
				#mytext h2 {
					max-width: 100%;
					width: 100%;
					font-size: 0.5em;
					margin: 1em 0em;
				}

			}
			

			
	#mytext h1, #mytext h2, #mytext h3, #mytext h4 {
		color: #fff;
		text-shadow: 2px 2px 5px #000000;
		font-family: 'cwTeXYen', sans-serif;
		cursor: default;
	}
	
	#mytext h1 {
		max-width: 100%;
		width: 100%;
		padding: 0 20px 0 20px;
		font-size: 2em;
		letter-spacing: 5px;
		font-weight: 500;
		border: 0px solid #a70000;
	}
		#mytext h1 span {
			font-weight: 400;
		}
	
	#mytext h2 {
		padding: 0 20px 0 20px;
		font-size: 1.5em;
		letter-spacing: 5px;
		font-weight: 500;
		border: 0px solid #a70000;
	}
		#mytext h1 span {
			font-weight: 400;
		}
		#mytext a {
			color: #ffffff;
		}

		#mytext .more {
			background-image: url("images/arrow.svg");
			background-position: center 0.55em;
			background-repeat: no-repeat;
			background-size: auto;
			background-color: rgba(0, 0, 0, 0.4);
			border: 2px solid #ccc;
			border-radius: 20%;
			color: rgba(255, 255, 255, 0.75);
			display: block;
			height: 3em;
			text-indent: 3em;
			overflow: hidden;
			white-space: nowrap;
			width: 3em;
			z-index: 3;
			margin: 2em auto 2em auto;
		  left: 5em;
		}

			#mytext .more:hover {
				background-color: rgba(240, 240, 240, 0.20);
				border: 1px solid #fff;
				color: #FFF;
			}


		#mytext a {
			-moz-transition: color 0.2s ease-in-out;
			-webkit-transition: color 0.2s ease-in-out;
			-ms-transition: color 0.2s ease-in-out;
			transition: color 0.2s ease-in-out;
			display: inline-block;
			padding: 0 2em;
			color: #ffffff;
			text-decoration: none;
			text-transform: uppercase;
			font-weight: 700;
			font-size: .85em;
		}

			#mytext a:hover {
				color: rgba(255, 255, 255, 0.75);
			}

			#mytext a:last-child {
				padding-right: 0em;
			}

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

				#mytext a {
					padding: 0 0.5em;
				}

			}

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

		#mytext {
			min-width: 100%;
		}

	}
	
/* banner end */

/* about */

	#kuma {
		height: 100%;
		padding: 5em 0 0em 0;
		margin: 0 0 0 0;
		position: static;
		text-align: left;
		width: 100%;
		z-index: 1;
		border: 0px solid #c0c000;
		}
	
		#kuma .inner {
			height: 800;
			max-width: 100%;
			width: calc(100%);
			padding: 0 0 0em 0;
			margin: 0 auto;
			position: relative;
			z-index: 2;
			border: 0px solid #a70000;
		}

			@media screen and (max-width: 1920px) {
				
				#kuma {
					padding: 10em 0 0em 0;
					margin: 0 0 0 0;
					position: static;
					border: 0px solid #a70000;
			  }
				
				#kuma .inner {
					max-width: 95%;
					width: 100%;
					border: 0px solid #a70000;
				}
				#kuma h1 {
					max-width: 100%;
					width: 100%;
					font-size: 1em;
					margin: 0em 0em;
					padding: 0 0em 0 0em;
				}
				
				#kuma h2 {
					max-width: 100%;
					width: 100%;
					font-size: 0.5em;
					margin: 0em 0em;
					padding: 0 0em 0 0em;
				}

			}

			@media screen and (max-width: 1280px) {
				
				#kuma {
					padding: 10em 0 0em 0;
					margin: 0 0 0 0;
					position: static;
					border: 0px solid #a70000;
			  }
				
				#kuma .inner {
					max-width: 95%;
					width: 100%;
					border: 0px solid #a70000;
				}
				#kuma h1 {
					max-width: 100%;
					width: 100%;
					font-size: 1em;
					margin: 0em 0em;
					padding: 0 0em 0 0em;
				}
				
				#kuma h2 {
					max-width: 100%;
					width: 100%;
					font-size: 0.5em;
					margin: 0em 0em;
					padding: 0 0em 0 0em;
				}

			}		

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

			#kuma h1{
				font-size: 1em;
			}

		}
		

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

			#kuma h1{
				font-size: 1em;
				}

		}
		
			@media screen and (max-width: 568px) {
				
				#kuma {
					padding: 5em 0 0em 0;
					margin: 0 0 0 0;
					position: static;
			  }
				
				#kuma .inner {
					max-width: 100%;
					width: 100%;
				}
				#kuma h1 {
					max-width: 100%;
					width: 100%;
					font-size: 1em;
					margin: 0em 0em;
					padding: 0 0em 0 0em;
				}
				
				#kuma h2 {
					max-width: 100%;
					width: 100%;
					font-size: 0.5em;
					margin: 0em 0em;
					padding: 0 0em 0 0em;
				}

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

			#kuma .inner{
				width: 100%;
			}

		}

	#kuma h1, #kuma h2, #kuma h3, #kuma h4 {
		color: #1c1c1c;
		font-family: 'cwTeXYen', sans-serif;
		cursor: default;
	}
	
	#kuma h1 {
		max-width: 100%;
		width: 100%;
		font-size: 2em;
		color: #e5474b;
		margin: 0em 0em;
		padding: 0 20px 0 20px;
		letter-spacing: 8px;
		font-weight: 600;
		border: 0px solid #a70000;
	}
		#kuma h1 span {
			font-weight: 400;
		}
	
	#kuma h2 {
		max-width: 100%;
		width: 100%;
		font-size: 1.2em;
		margin: 2em 0em;
		padding: 0 20px 0 20px;
		letter-spacing: 0px;
		font-weight: 600;
		border: 0px solid #a70000;
	}
		#kuma h2 span {
			font-weight: 400;
		}

		#kuma .more {
			background-image: url("images/arrow.svg");
			background-position: center 0.55em;
			background-repeat: no-repeat;
			background-color: rgba(0, 0, 0, 0.4);
			background-size: auto;
			border: 2px solid #aaa;
			border-radius: 20%;
			color: rgba(0, 0, 0, 0.4);
			display: block;
			height: 3em;
			text-indent: 3em;
			overflow: hidden;
			white-space: nowrap;
			width: 3em;
			margin: 2em auto 2em auto;
		  position:absolute;
		  left: 2em;
		}
		
			#kuma .more:hover {
				background-color: rgba(0, 0, 0, 0.6);
				border: 1px solid #aaa;
				color: #aaa;
			}

	.product {
		border: 0px solid #000;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: stretch;
		-webkit-align-items: stretch;
		-ms-align-items: stretch;
		align-items: stretch;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

		.product .textbox {
			margin: 1em 1em;
			width: 45%;
			border: 0px solid #005;
		}
		
		.textbox .inner {
			margin: 0em;
			padding: 0em;
			width: 100% !important;
			border: 0px solid #000;
			text-shadow: 0px 0px 0px #A2A2A2;
			font-family: 'cwTeXYen', sans-serif;
			cursor: default;
	}
		}
		
		.textbox > :last-child,
		.textbox > :last-child > :last-child,
		.textbox > :last-child > :last-child > :last-child {
			margin-bottom: 0;
		}

		.textbox .image.fit {
			border: 0px solid #000;
		}
		
		.textbox .image {
			position: relative;
			display: inline-block;
			margin: 0em;
			width: 100%;
			overflow: hidden;
			border-radius: 2%;
		}

		.textbox .image img {
			-moz-transition: -moz-transform 0.2s ease-in-out;
			-webkit-transition: -webkit-transform 0.2s ease-in-out;
			-ms-transition: -ms-transform 0.2s ease-in-out;
			transition: transform 0.2s ease-in-out;
			-webkit-backface-visibility: hidden;
			-webkit-transform: translate3D(0, 0, 0);
			border: 0px solid #000;
			border-radius: 2%;
		}

		.textbox .image:hover img {
			-moz-transform: scale(1.1);
			-webkit-transform: scale(1.1);
			-ms-transform: scale(1.1);
			transform: scale(1.1);
			border: 0px solid #000;
			border-radius: 2%;
		}
		
		.textbox .image:active img {
			-moz-transform: scale(1.1);
			-webkit-transform: scale(1.1);
			-ms-transform: scale(1.1);
			transform: scale(1.1);
			border: 0px solid #000;
			border-radius: 2%;
		}
		
			@media screen and (max-width: 1920px) {

				.product .textbox {
					width: 30%;
					border: 0px solid #000;
				}

			}

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

				.product .textbox {
					width: 30%;
					border: 0px solid #000;
				}

			}

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

				.product .textbox {
					width: 30%;
					border: 0px solid #000;
				}

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

				.product .textbox {
					width: 45%;
					border: 0px solid #000;
				}

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

				.product .textbox {
					width: 45%;
					border: 0px solid #000;
				}

			}

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

				.product .textbox {
					width: 100%;
					border: 0px solid #000;
				}

			}
			
			@media screen and (max-width: 568px) {
				
				.product .textbox {
					width: 100%;
					border: 0px solid #000;
				}

			}
			
			@media screen and (max-width: 480px) {
				
				.product .textbox {
					width: 100%;
					border: 0px solid #000;
				}

			}

	.button1 {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		border-radius: 0;
		border: 0;
		cursor: pointer;
		display: inline-block;
		font-size: .8em;
		font-weight: 700;
		height: 3.5em;
		line-height: 3.65em;
		padding: 0 2.25em;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}	
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button1:hover,
		.button1:hover {
			text-decoration: none;
		}
		.button1.alt {
			background-color: transparent;
			box-shadow: inset 0 0 0 1px #e5474b;
			color: #e5474b !important;
		}
		
			input[type="submit"].alt:hover,
			input[type="reset"].alt:hover,
			input[type="button"].alt:hover,
			button1.alt:hover,
			.button1.alt:hover {
				background: #e7b1b1;
			}

			input[type="submit"].alt:active,
			input[type="reset"].alt:active,
			input[type="button"].alt:active,
			button1.alt:active,
			.button1.alt:active {
				background-color: #f9dadb;
			}

			input[type="submit"].alt.icon:before,
			input[type="reset"].alt.icon:before,
			input[type="button"].alt.icon:before,
			button1.alt.icon:before,
			.button1.alt.icon:before {
				color: #717171;
			}
#slide {
		width: 480px;
		height: 900px;
		max-width: 100%;
		width: calc(100%);
		margin: 0 auto;
		overflow: hidden;
		position: relative;
		background-color: #1c1c1c;
		border: 0px solid #c0c000;
		z-index: 1;
		
}

		#slide .inner {
			height:100%;
			max-width: 100%;
			width: calc(100%);
			padding: 1em 0 4em 0;
			margin: 0 auto;
			position: relative;
			z-index: 2;
			border: 0px solid #a70000;
			background-color: rgba(0, 0, 0, 0.2);
		}

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

				#slide {
					height: 940px;
				}

			}

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

				#slide {
					height: 880px;
				}

			}

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

				#slide {
					height: 660px;
				}

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

				#slide {
					height: 568px;
				}

			}

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

				
				#slide {
					height: 480px;
				}
				
				#slide .inner {
					max-width: 100%;
					width: 100%;
				}

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

				#slide {
					height: 320px;
				}

			}

		#slide a {
			color: #ffffff;
		}

		#slide .more {
			background-image: url("images/arrow.svg");
			background-position: center 1.35em;
			background-repeat: no-repeat;
			background-size: auto;
			border: 1px solid #fff;
			border-radius: 100%;
			color: rgba(255, 255, 255, 0.75);
			display: block;
			height: 4em;
			text-indent: 4em;
			overflow: hidden;
			white-space: nowrap;
			width: 4em;
			z-index: 3;
			margin: 0 auto 2em auto;
		        position:absolute;
		        top: 80%;
		        left: 90%;
		}

			#slide .more:hover {
				background-color: rgba(240, 240, 240, 0.20);
				border: 1px solid #fff;
				color: #FFF;
			}

	#slide h1, #slide h2, #slide h3, #slide h4 {
		color: #fff;
		text-shadow: 2px 2px 5px #000000;
		font-family: 'cwTeXYen', sans-serif;
	}

	
	#slide h1 {
		font-size: 2em;
		margin: 0 0 2em 0;
		padding: 2em 0 0 2em;
		letter-spacing: 5px;
		font-weight: 700;
	}
		#slide h1 span {
			font-weight: 400;
		}

	#slide h2 {
		font-size: 1.5em;
		margin: 0 0 2.5em 0;
		padding: 0 0 0 2em;
		letter-spacing: 5px;
		font-weight: 700;
	}

		#slide h2 span {
			font-weight: 300;
		}

	#slide h3 {
		font-size: 1.5em;
		margin: 0 0 2.5em 0;
		padding: 0 0 0 2em;
		letter-spacing: 5px;
		font-weight: 700;
		position:absolute;
		top: 20%;
		left: 70%;
	}
	

	#slide h4 {
		font-size: 1.5em;
		margin: 0 0 2.5em 0;
		padding: 0 0 0 2em;
		letter-spacing: 5px;
		font-weight: 700;
		position:absolute;
		top: 50%;
		left: 20%;
	}	
	@media screen and (max-width: 1680px) {

		#slide {
			padding: 0 0 0 0;
		}

	}

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

		#slide {
			padding: 0 0 0 0;
		}

	}

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

			#slide {
				padding: 0 0 0 0;
			}

				#banner br {
					display: none;
				}

		}

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

			#slide {
				padding: 0 0 0 0;
			}

				#slide h1 {
					font-size: 1.75em;
				}

		}

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

			#slide {
				padding: 0 0 0 0;
			}

				#slide ul {
					margin-top: 0;
				}

		}



#slide > div {
	  width: 100%;
	  height: 100%;
	  background-size: cover;
	  position: absolute;
	  animation: slide 80s infinite;
	  opacity: 0;
}

#slide > div:nth-child(2) {
	  animation-delay: 8s;
}

#slide > div:nth-child(3) {
	  animation-delay: 16s;
}

#slide > div:nth-child(4) {
	  animation-delay: 24s;
}

#slide > div:nth-child(5) {
	  animation-delay: 32s;
}

#slide > div:nth-child(6) {
	  animation-delay: 40s;
}

#slide > div:nth-child(7) {
	  animation-delay: 48s;
}

#slide > div:nth-child(8) {
	  animation-delay: 56s;
}

#slide > div:nth-child(9) {
	  animation-delay: 64s;
}

#slide > div:nth-child(10) {
	  animation-delay: 72s;
}


	@keyframes slide {
	  2.5% {
	    opacity: 1;
	/* 4秒 淡入*/
	  }
	  12.5% {
	    opacity: 1;
	  }
	/* 8秒 靜止*/
	  15% {
	    opacity: 0;
	/* 4秒 淡出*/
	  }
	  40% {
	    transform: scale(1.2);
	  }
	}


/*自定义一个透明度从0到1的动画，它的名称是text-slide*/
@keyframes text-slide{  
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-webkit-keyframes text-slide{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-ms-keyframes text-slide{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-o-keyframes text-slide{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-moz-keyframes text-slide{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
.first-words{ 
    opacity: 0;      /*实先规定文字的状态是不显示的*/
    animation: text-slide 4s ease 2s 1;    /*调用名称为text-slide的动画，全程动画显示时间4S，进入方式为ease，延时0S进入，播放次数1次*/
	-webkit-animation: text-slide 4s ease 2s 1;
    -moz-animation: text-slide 4s ease 2s 1;
    -o-animation: text-slide 4s ease 2s 1;
    -ms-animation: text-slide 4s ease 2s 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.second-words{ 
    opacity: 0;    
    animation: text-slide 4s ease 4s 1;
    -webkit-animation: text-slide 4s ease 4s 1;
    -moz-animation: text-slide 4s ease 4s 1;
    -o-animation: text-slide 4s ease 4s 1;
    -ms-animation: text-slide 4s ease 4s 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.third-words{ 
    opacity: 0;    
    animation: text-slide 4s ease 6s 1;
    -webkit-animation: text-slide 4s ease 6s 1;
    -moz-animation: text-slide 4s ease 6s 1;
    -o-animation: text-slide 4s ease 6s 1;
    -ms-animation: text-slide 4s ease 6s 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.four-words{ 
    opacity: 0;    
    animation: text-slide 4s ease 6s 1;
    -webkit-animation: text-slide 4s ease 6s 1;
    -moz-animation: text-slide 4s ease 6s 1;
    -o-animation: text-slide 4s ease 6s 1;
    -ms-animation: text-slide 4s ease 6s 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}