@import url("font-awesome.min.css");
/*@import url("https://fonts.googleapis.com/css?family=Lato:300,400,900");*/

@font-face {
  font-family: '微軟正黑體';
  src: url('../fonts/MicrosoftJhengHei.ttf') format('truetype');
  src: url('../fonts/NotoSansCJKtc-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'Arial';
  src: url('../fonts/Arial.ttf') format('truetype');
}

/*
	Twenty by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/* Reset */

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
		scroll-behavior: smooth;
	}

	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block;
	}

	body {
		line-height: 1;
	}

	ol, ul {
		list-style: none;
	}

	blockquote, q {
		quotes: none;
	}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	body {
		-webkit-text-size-adjust: none;
	}

/* Box Model */

	*, *:before, *:after {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

/* Basic */

	body {
		width: 100%;
		background: #FFF;
	}

		body.is-loading *, body.is-loading *:before, body.is-loading *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

	body, input, select, textarea {
		font-family: Arial, "Arial", Sans-Serif, "微軟正黑體";
		color: ;
		font-size: 1em;
		letter-spacing: 0.025em;
		line-height: 1.75em;
	}

	a {
		-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		color: #FFF;
		text-decoration: none;
		border-bottom: dotted 0px;
	}

		a:hover {
			color: #FFF;
			font-weight: bold;
			border-bottom-color: transparent;
		}

	strong, b {
		font-weight: 400;
	}

	p, ul, ol, dl, table, blockquote {
		margin: 0 0 2em 0;
	}

	h1, h2, h3, h4, h5, h6 {
		color: inherit;
		font-weight: 400;
		line-height: 1.75em;
		margin-bottom: 1em;
		text-transform: ;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
			border: 0;
		}

	h2 {
		font-size: 1.5em;
		letter-spacing: 0.1em;
	}

	h3 {
		font-size: 2em;
		color: #FFF;
		letter-spacing: 0.025em;
	}

	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	hr {
		border-top: solid 1px rgba(124, 128, 129, 0.2);
		border: 0;
		margin-bottom: 1.5em;
	}

	blockquote {
		border-left: solid 0.5em rgba(124, 128, 129, 0.2);
		font-style: italic;
		padding: 1em 0 1em 2em;
	}


/* Wrapper */

	.wrapper {
		padding: 0;
	}

/* setting */

	.tes {
		position: absolute;
		margin: 0 auto;
		width: 100%;
		height: 860px;
		z-index: 99;
		border: solid 0px #FF0000;
	}

	.tes1 {
		position: absolute;
		margin: 0 auto;
		width: 100%;
		height: 860px;
		z-index: 99;
		border: solid 0px #FF0000;
	}


	.logoindex {
		position: relative;
		margin: 6% auto 4.1% auto;
		width: 52%;
		height: auto;
	}

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

				    .nav_logoab1 {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						opacity: 0;
						
					    animation: nav1;
					    animation-duration: 6s;
						animation-iteration-count: infinite;
					    -moz-animation: nav1;
					    -moz-animation-duration: 6s;
						-moz-animation-iteration-count: infinite;
					    -webkit-animation: nav1;
					    -webkit-animation-duration: 6s;
						-webkit-animation-iteration-count: infinite;
					    -ms-animation: nav1;
					    -ms-animation-duration: 6s;
						-ms-animation-iteration-count: infinite;
				    } 

				    .nav_logoab2 {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						opacity: 0;
						
					    animation: nav2;
					    animation-duration: 6s;
						animation-iteration-count: infinite;
					    -moz-animation: nav2;
					    -moz-animation-duration: 6s;
						-moz-animation-iteration-count: infinite;
					    -webkit-animation: nav2;
					    -webkit-animation-duration: 6s;
						-webkit-animation-iteration-count: infinite;
					    -ms-animation: nav2;
					    -ms-animation-duration: 6s;
						-ms-animation-iteration-count: infinite;
				    } 

				    .nav_logoab3 {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						opacity: 0;
						
					    animation: nav3;
					    animation-duration: 6s;
						animation-iteration-count: infinite;
					    -moz-animation: nav3;
					    -moz-animation-duration: 6s;
						-moz-animation-iteration-count: infinite;
					    -webkit-animation: nav3;
					    -webkit-animation-duration: 6s;
						-webkit-animation-iteration-count: infinite;
					    -ms-animation: nav3;
					    -ms-animation-duration: 6s;
						-ms-animation-iteration-count: infinite;
				    } 


				    .nav_logoab4 {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						opacity: 0;
						
					    animation: nav4;
					    animation-duration: 6s;
						animation-iteration-count: infinite;
					    -moz-animation: nav4;
					    -moz-animation-duration: 6s;
						-moz-animation-iteration-count: infinite;
					    -webkit-animation: nav4;
					    -webkit-animation-duration: 6s;
						-webkit-animation-iteration-count: infinite;
					    -ms-animation: nav4;
					    -ms-animation-duration: 6s;
						-ms-animation-iteration-count: infinite;
				    }

				    .nav_logoab5 {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						opacity: 0;
						
					    animation: nav5;
					    animation-duration: 6s;
						animation-iteration-count: infinite;
					    -moz-animation: nav5;
					    -moz-animation-duration: 6s;
						-moz-animation-iteration-count: infinite;
					    -webkit-animation: nav5;
					    -webkit-animation-duration: 6s;
						-webkit-animation-iteration-count: infinite;
					    -ms-animation: nav5;
					    -ms-animation-duration: 6s;
						-ms-animation-iteration-count: infinite;
				    }

				    .nav_logoab6 {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						opacity: 0;
						
					    animation: nav6;
					    animation-duration: 6s;
						animation-iteration-count: infinite;
					    -moz-animation: nav6;
					    -moz-animation-duration: 6s;
						-moz-animation-iteration-count: infinite;
					    -webkit-animation: nav6;
					    -webkit-animation-duration: 6s;
						-webkit-animation-iteration-count: infinite;
					    -ms-animation: nav6;
					    -ms-animation-duration: 6s;
						-ms-animation-iteration-count: infinite;
				    }

				    .nav_logoab7 {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						opacity: 0;
						
					    animation: nav7;
					    animation-duration: 6s;
						animation-iteration-count: infinite;
					    -moz-animation: nav7;
					    -moz-animation-duration: 6s;
						-moz-animation-iteration-count: infinite;
					    -webkit-animation: nav7;
					    -webkit-animation-duration: 6s;
						-webkit-animation-iteration-count: infinite;
					    -ms-animation: nav7;
					    -ms-animation-duration: 6s;
						-ms-animation-iteration-count: infinite;
				    }

				    .nav_logoab8 {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						opacity: 0;
						
					    animation: nav8;
					    animation-duration: 6s;
						animation-iteration-count: infinite;
					    -moz-animation: nav8;
					    -moz-animation-duration: 6s;
						-moz-animation-iteration-count: infinite;
					    -webkit-animation: nav8;
					    -webkit-animation-duration: 6s;
						-webkit-animation-iteration-count: infinite;
					    -ms-animation: nav8;
					    -ms-animation-duration: 6s;
						-ms-animation-iteration-count: infinite;
				    }

				    .nav_logoab9 {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						opacity: 0;
						
					    animation: nav9;
					    animation-duration: 6s;
						animation-iteration-count: infinite;
					    -moz-animation: nav9;
					    -moz-animation-duration: 6s;
						-moz-animation-iteration-count: infinite;
					    -webkit-animation: nav9;
					    -webkit-animation-duration: 6s;
						-webkit-animation-iteration-count: infinite;
					    -ms-animation: nav9;
					    -ms-animation-duration: 6s;
						-ms-animation-iteration-count: infinite;
				    }

				    .nav_logoab10 {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						opacity: 0;
						
					    animation: nav10;
					    animation-duration: 6s;
						animation-iteration-count: infinite;
					    -moz-animation: nav10;
					    -moz-animation-duration: 6s;
						-moz-animation-iteration-count: infinite;
					    -webkit-animation: nav10;
					    -webkit-animation-duration: 6s;
						-webkit-animation-iteration-count: infinite;
					    -ms-animation: nav10;
					    -ms-animation-duration: 6s;
						-ms-animation-iteration-count: infinite;
				    }

				    .nav_logoab11 {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						opacity: 0;
						
					    animation: nav11;
					    animation-duration: 6s;
						animation-iteration-count: infinite;
					    -moz-animation: nav11;
					    -moz-animation-duration: 6s;
						-moz-animation-iteration-count: infinite;
					    -webkit-animation: nav11;
					    -webkit-animation-duration: 6s;
						-webkit-animation-iteration-count: infinite;
					    -ms-animation: nav11;
					    -ms-animation-duration: 6s;
						-ms-animation-iteration-count: infinite;
				    }

				    .nav_logoab12 {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						opacity: 0;
						
					    animation: nav12;
					    animation-duration: 6s;
						animation-iteration-count: infinite;
					    -moz-animation: nav12;
					    -moz-animation-duration: 6s;
						-moz-animation-iteration-count: infinite;
					    -webkit-animation: nav12;
					    -webkit-animation-duration: 6s;
						-webkit-animation-iteration-count: infinite;
					    -ms-animation: nav12;
					    -ms-animation-duration: 6s;
						-ms-animation-iteration-count: infinite;
				    }

				    .nav_logoab13 {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						opacity: 0;
						
					    animation: nav13;
					    animation-duration: 6s;
						animation-iteration-count: infinite;
					    -moz-animation: nav13;
					    -moz-animation-duration: 6s;
						-moz-animation-iteration-count: infinite;
					    -webkit-animation: nav13;
					    -webkit-animation-duration: 6s;
						-webkit-animation-iteration-count: infinite;
					    -ms-animation: nav13;
					    -ms-animation-duration: 6s;
						-ms-animation-iteration-count: infinite;
				    }

				    .nav_logoab14 {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						opacity: 0;
						
					    animation: nav14;
					    animation-duration: 6s;
						animation-iteration-count: infinite;
					    -moz-animation: nav14;
					    -moz-animation-duration: 6s;
						-moz-animation-iteration-count: infinite;
					    -webkit-animation: nav14;
					    -webkit-animation-duration: 6s;
						-webkit-animation-iteration-count: infinite;
					    -ms-animation: nav14;
					    -ms-animation-duration: 6s;
						-ms-animation-iteration-count: infinite;
				    }

				    .nav_logoab15 {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						opacity: 0;
						
					    animation: nav15;
					    animation-duration: 6s;
						animation-iteration-count: infinite;
					    -moz-animation: nav15;
					    -moz-animation-duration: 6s;
						-moz-animation-iteration-count: infinite;
					    -webkit-animation: nav15;
					    -webkit-animation-duration: 6s;
						-webkit-animation-iteration-count: infinite;
					    -ms-animation: nav15;
					    -ms-animation-duration: 6s;
						-ms-animation-iteration-count: infinite;
				    }

				    .nav_logoab16 {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						opacity: 0;
						
					    animation: nav16;
					    animation-duration: 6s;
						animation-iteration-count: infinite;
					    -moz-animation: nav16;
					    -moz-animation-duration: 6s;
						-moz-animation-iteration-count: infinite;
					    -webkit-animation: nav16;
					    -webkit-animation-duration: 6s;
						-webkit-animation-iteration-count: infinite;
					    -ms-animation: nav16;
					    -ms-animation-duration: 6s;
						-ms-animation-iteration-count: infinite;
				    }

				    .nav_logoab17 {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						opacity: 0;
						
					    animation: nav17;
					    animation-duration: 6s;
						animation-iteration-count: infinite;
					    -moz-animation: nav17;
					    -moz-animation-duration: 6s;
						-moz-animation-iteration-count: infinite;
					    -webkit-animation: nav17;
					    -webkit-animation-duration: 6s;
						-webkit-animation-iteration-count: infinite;
					    -ms-animation: nav17;
					    -ms-animation-duration: 6s;
						-ms-animation-iteration-count: infinite;
				    }

				    .nav_logoab18 {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						opacity: 0;
						
					    animation: nav18;
					    animation-duration: 6s;
						animation-iteration-count: infinite;
					    -moz-animation: nav18;
					    -moz-animation-duration: 6s;
						-moz-animation-iteration-count: infinite;
					    -webkit-animation: nav18;
					    -webkit-animation-duration: 6s;
						-webkit-animation-iteration-count: infinite;
					    -ms-animation: nav18;
					    -ms-animation-duration: 6s;
						-ms-animation-iteration-count: infinite;
				    }

				    .nav_logoab19 {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						opacity: 0;
						
					    animation: nav19;
					    animation-duration: 6s;
						animation-iteration-count: infinite;
					    -moz-animation: nav19;
					    -moz-animation-duration: 6s;
						-moz-animation-iteration-count: infinite;
					    -webkit-animation: nav19;
					    -webkit-animation-duration: 6s;
						-webkit-animation-iteration-count: infinite;
					    -ms-animation: nav19;
					    -ms-animation-duration: 6s;
						-ms-animation-iteration-count: infinite;
				    }

				    .nav_logoab20 {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						opacity: 0;
						
					    animation: nav20;
					    animation-duration: 6s;
						animation-iteration-count: infinite;
					    -moz-animation: nav20;
					    -moz-animation-duration: 6s;
						-moz-animation-iteration-count: infinite;
					    -webkit-animation: nav20;
					    -webkit-animation-duration: 6s;
						-webkit-animation-iteration-count: infinite;
					    -ms-animation: nav20;
					    -ms-animation-duration: 6s;
						-ms-animation-iteration-count: infinite;
				    }


				    @keyframes nav1 {
				        0%    {opacity: 0; transform: scale(20); left: 9000px;}
				        5%    {opacity: 0.4; transform: scale(1); left: 0px;}
				        7%    {opacity: 1;}
				        98%   {opacity: 1;}
				        100%  {opacity: 0;}
				    }

				    @keyframes nav2 {
				        0%    {left: -10px; opacity: 0;}
				        7%    {left: -10px; opacity: 0;}
				        12%    {left: 0; opacity: 1;}
				        98%   {left: 0; opacity: 1;}
				        100%  {left: 0; opacity: 0;}
				    }

				    @keyframes nav3 {
				        0%    {left: -10px; opacity: 0;}
				        12%    {left: -10px; opacity: 0;}
				        17%   {left: 0; opacity: 1;}
				        98%   {left: 0;opacity: 1;}
				        100%  {left: 0;opacity: 0;}
				    }

				    @keyframes nav4 {
				        0%    {left: -10px; opacity: 0;}
				        17%   {left: -10px; opacity: 0;}
				        22%   {left: 0; opacity: 1;}
				        98%   {left: 0; opacity: 1;}
				        100%  {left: 0; opacity: 0;}
				    }

				    @keyframes nav5 {
				        0%    {left: -10px; opacity: 0;}
				        22%   {left: -10px; opacity: 0;}
				        27%   {left: 0; opacity: 1;}
				        98%   {left: 0; opacity: 1;}
				        100%  {left: 0; opacity: 0;}
				    }

				    @keyframes nav6 {
				        0%    {left: -10px; opacity: 0;}
				        27%   {left: -10px; opacity: 0;}
				        32%   {left: 0; opacity: 1;}
				        98%   {left: 0; opacity: 1;}
				        100%  {left: 0; opacity: 0;}
				    }

				    @keyframes nav7 {
				        0%    {left: -10px; opacity: 0;}
				        32%   {left: -10px; opacity: 0;}
				        37%   {left: 0; opacity: 1;}
				        98%   {left: 0; opacity: 1;}
				        100%  {left: 0; opacity: 0;}
				    }

				    @keyframes nav8 {
				        0%    {left: -10px; opacity: 0;}
				        37%   {left: -10px; opacity: 0;}
				        42%   {left: 0; opacity: 1;}
				        98%   {left: 0; opacity: 1;}
				        100%  {left: 0; opacity: 0;}
				    }

				    @keyframes nav9 {
				        0%    {top: -25px; opacity: 0;}
				        42%   {top: -25px; opacity: 0;}
				        47%   {top: 0; opacity: 1;}
				        98%   {top: 0; opacity: 1;}
				        100%  {top: 0; opacity: 0;}
				    }

				    @keyframes nav10 {
				        0%    {left: 0; opacity: 0;}
				        47%   {left: 0; opacity: 0;}
				        48%   {left: 0; opacity: 1;}
				        98%   {left: 0; opacity: 0;}
				        100%  {left: 0; opacity: 0;}
				    }

				    @keyframes nav11 {
				        0%    {left: 0; opacity: 0;}
				        48%   {left: 0; opacity: 0;}
				        49%   {left: 0; opacity: 1;}
				        98%   {left: 0; opacity: 0;}
				        100%  {left: 0; opacity: 0;}
				    }

				    @keyframes nav12 {
				        0%    {left: 0; opacity: 0;}
				        49%   {left: 0; opacity: 0;}
				        50%   {left: 0; opacity: 1;}
				        98%   {left: 0; opacity: 0;}
				        100%  {left: 0; opacity: 0;}
				    }

				    @keyframes nav13 {
				        0%    {left: 0; opacity: 0;}
				        50%   {left: 0; opacity: 0;}
				        51%   {left: 0; opacity: 1;}
				        98%   {left: 0; opacity: 0;}
				        100%  {left: 0; opacity: 0;}
				    }

				    @keyframes nav14 {
				        0%    {left: 0; opacity: 0;}
				        51%   {left: 0; opacity: 0;}
				        52%   {left: 0; opacity: 1;}
				        98%   {left: 0; opacity: 0;}
				        100%  {left: 0; opacity: 0;}
				    }

				    @keyframes nav15 {
				        0%    {left: 0; opacity: 0;}
				        52%   {left: 0; opacity: 0;}
				        53%   {left: 0; opacity: 1;}
				        98%   {left: 0; opacity: 0;}
				        100%  {left: 0; opacity: 0;}
				    }

				    @keyframes nav16 {
				        0%    {left: 0; opacity: 0;}
				        53%   {left: 0; opacity: 0;}
				        54%   {left: 0; opacity: 1;}
				        98%   {left: 0; opacity: 0;}
				        100%  {left: 0; opacity: 0;}
				    }

				    @keyframes nav17 {
				        0%    {left: 0; opacity: 0;}
				        54%   {left: 0; opacity: 0;}
				        55%   {left: 0; opacity: 1;}
				        98%   {left: 0; opacity: 0;}
				        100%  {left: 0; opacity: 0;}
				    }

				    @keyframes nav18 {
				        0%    {left: 0; opacity: 0;}
				        55%   {left: 0; opacity: 0;}
				        56%   {left: 0; opacity: 1;}
				        98%   {left: 0; opacity: 0;}
				        100%  {left: 0; opacity: 0;}
				    }

				    @keyframes nav19 {
				        0%    {left: 0; opacity: 0;}
				        56%   {left: 0; opacity: 0;}
				        57%   {left: 0; opacity: 1;}
				        98%   {left: 0; opacity: 0;}
				        100%  {left: 0; opacity: 0;}
				    }

				    @keyframes nav20 {
				        0%    {left: 0; opacity: 0;}
				        57%   {left: 0; opacity: 0;}
				        58%   {left: 0; opacity: 1;}
				        97%   {left: 0; opacity: 1;}
				        98%   {left: 0; opacity: 0;}
				        100%  {left: 0; opacity: 0;}
				    }

	.logopage {
		margin: 6% auto 0 auto; transform: scale(1);
		position: relative;
		width: 52%;
		height: auto;
		
		animation: gotop;
		animation-duration: 0.5s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-delay: 0.1s;
		-moz-animation: gotop;
		-moz-animation-duration: 0.5s;
		-moz-animation-iteration-count: 1;
		-moz-animation-fill-mode: forwards;
		-moz-animation-delay: 0.1s;
		-webkit-animation: gotop;
		-webkit-animation-duration: 0.5s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
		-webkit-animation-delay: 0.1s;
		-ms-animation: gotop;
		-ms-animation-duration: 0.5s;
		-ms-animation-iteration-count: 1;
		-ms-animation-fill-mode: forwards;
		-ms-animation-delay: 0.1s;
	}

	@keyframes gotop {
	   0%    {margin: 6% auto 0 auto; transform: scale(1);}
	   50%   {margin: 6% auto 0 auto; transform: scale(1);}
	   100%  {margin: 0 auto 0 auto;  transform: scale(0.5);}
	}

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



	.firstline {
		position: relative;
		margin: 0 auto;
		width: 93%;
		height: auto;
	}

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

	.flex-3 {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: stretch;
		position: relative;
		margin: 0 auto;
		width: 82%;
	}

	    .flex-3-div1 {
		    display: block;
			position: relative;
		    width: 37%;
		    height: auto;
			cursor: pointer;
	    }

            .flex-3-div1 img {
				display: block;
				width: 100%;
	        }

            .flex-3-div1ab {
				display: block;
				position: absolute;
				width: 100%;
				opacity: 0;
	        }

            .flex-3-div1re {
				display: block;
				position: relative;
				width: 100%;
				opacity: 1;
	        }

	        .flex-3-div1:hover .flex-3-div1re {
			    opacity: 0;
			    -webkit-transition:all 0.1s ease-in-out;
	            transition:all 0.1s ease-in-out;
	        }

	        .flex-3-div1:hover .flex-3-div1ab {
			    opacity: 1;
			    -webkit-transition:all 0.1s ease-in-out;
	            transition:all 0.1s ease-in-out;
	        }


	    .flex-3-div2 {
		    display: block;
			position: relative;
		    width: 19%;
		    height: auto;
			cursor: pointer;
	    }

            .flex-3-div2 img {
				display: block;
				width: 100%;
	        }

            .flex-3-div2ab {
				display: block;
				position: absolute;
				width: 100%;
				opacity: 0;
	        }

            .flex-3-div2re {
				display: block;
				position: relative;
				width: 100%;
				opacity: 1;
	        }

	        .flex-3-div2:hover .flex-3-div2re {
			    opacity: 0;
			    -webkit-transition:all 0.1s ease-in-out;
	            transition:all 0.1s ease-in-out;
	        }

	        .flex-3-div2:hover .flex-3-div2ab {
			    opacity: 1;
			    -webkit-transition:all 0.1s ease-in-out;
	            transition:all 0.1s ease-in-out;
	        }


	    .flex-3-div3 {
		    display: block;
			position: relative;
		    width: 19%;
		    height: auto;
			cursor: pointer;
	    }

            .flex-3-div3 img {
				display: block;
				width: 100%;
	        }

            .flex-3-div3ab {
				display: block;
				position: absolute;
				width: 100%;
				opacity: 0;
	        }

            .flex-3-div3re {
				display: block;
				position: relative;
				width: 100%;
				opacity: 1;
	        }

	        .flex-3-div3:hover .flex-3-div3re {
			    opacity: 0;
			    -webkit-transition:all 0.1s ease-in-out;
	            transition:all 0.1s ease-in-out;
	        }

	        .flex-3-div3:hover .flex-3-div3ab {
			    opacity: 1;
			    -webkit-transition:all 0.1s ease-in-out;
	            transition:all 0.1s ease-in-out;
	        }

	    .flex-3-div4 {
		    display: block;
			position: relative;
		    width: 19%;
		    height: auto;
			cursor: pointer;
	    }

            .flex-3-div4 img {
				display: block;
				width: 100%;
	        }

            .flex-3-div4ab {
				display: block;
				position: absolute;
				width: 100%;
				opacity: 0;
	        }

            .flex-3-div4re {
				display: block;
				position: relative;
				width: 100%;
				opacity: 1;
	        }

	        .flex-3-div4:hover .flex-3-div4re {
			    opacity: 0;
			    -webkit-transition:all 0.1s ease-in-out;
	            transition:all 0.1s ease-in-out;
	        }

	        .flex-3-div4:hover .flex-3-div4ab {
			    opacity: 1;
			    -webkit-transition:all 0.1s ease-in-out;
	            transition:all 0.1s ease-in-out;
	        }


	.flex-3-zh {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: stretch;
		position: relative;
		margin: 30px auto 0 auto;
		width: 82%;
	}

	    .flex-3-zh > * a {
		    color: #878788;
			font-size: 26px;
	    }

	    .flex-3-zh > * a:hover {
		    color: #88B83E;
	    }

	    .flex-3-zh-div1 {
		    display: block;
			position: relative;
			padding-left: 0px;
		    width: 37%;
		    height: auto;
			cursor: pointer;
	    }

	    .flex-3-zh-div2 {
		    display: block;
			position: relative;
			padding-left: 0px;
		    width: 19%;
		    height: auto;
			cursor: pointer;
	    }

	    .flex-3-zh-div3 {
		    display: block;
			position: relative;
			padding-left: 0px;
		    width: 19%;
		    height: auto;
			cursor: pointer;
	    }

	    .flex-3-zh-div4 {
		    display: block;
			position: relative;
			padding-left: 0px;
		    width: 19%;
		    height: auto;
			cursor: pointer;
	    }



	.a1a2 {
		display: flex;
		justify-content: center;
		align-content: center;
		margin: 0px auto;
	}


	.a1 {
		position: relative;
		width: 30px;
		height: auto;
		opacity: 0;
		
		animation: a1;
		animation-duration: 0.5s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-delay: 1s;
		-moz-animation: a1;
		-moz-animation-duration: 0.5s;
		-moz-animation-iteration-count: 1;
		-moz-animation-fill-mode: forwards;
		-moz-animation-delay: 1s;
		-webkit-animation: a1;
		-webkit-animation-duration: 0.5s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
		-webkit-animation-delay: 1s;
		-ms-animation: a1;
		-ms-animation-duration: 0.5s;
		-ms-animation-iteration-count: 1;
		-ms-animation-fill-mode: forwards;
		-ms-animation-delay: 1s;
	}

	@keyframes a1 {
	   0%    {left: 300px; opacity: 0}
	   100%  {left: 0px;   opacity: 1;}
	}

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


	.a2 {
		position: relative;
		width: 30px;
		height: auto;
		opacity: 0;
		
		animation: a2;
		animation-duration: 0.5s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-delay: 1s;
		-moz-animation: a2;
		-moz-animation-duration: 0.5s;
		-moz-animation-iteration-count: 1;
		-moz-animation-fill-mode: forwards;
		-moz-animation-delay: 1s;
		-webkit-animation: a2;
		-webkit-animation-duration: 0.5s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
		-webkit-animation-delay: 1s;
		-ms-animation: a2;
		-ms-animation-duration: 0.5s;
		-ms-animation-iteration-count: 1;
		-ms-animation-fill-mode: forwards;
		-ms-animation-delay: 1s;
	}

	@keyframes a2 {
	   0%    {left: -300px; opacity: 0}
	   100%  {left: 0px;    opacity: 1;}
	}

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


	.a3 {
		display: block;
		position: relative;
		margin: 0 25px 10px 25px;
		width: auto;
		height: auto;
		font-size: 50px;
		color: #FFF;
		font-style: italic;
		opacity: 0;

		animation: a3;
		animation-duration: 0.5s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-delay: 1.5s;
		-moz-animation: a3;
		-moz-animation-duration: 0.5s;
		-moz-animation-iteration-count: 1;
		-moz-animation-fill-mode: forwards;
		-moz-animation-delay: 1.5s;
		-webkit-animation: a3;
		-webkit-animation-duration: 0.5s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
		-webkit-animation-delay: 1.5s;
		-ms-animation: a3;
		-ms-animation-duration: 0.5s;
		-ms-animation-iteration-count: 1;
		-ms-animation-fill-mode: forwards;
		-ms-animation-delay: 1.5s;
	}

	@keyframes a3 {
	   0%    {opacity: 0}
	   100%  {opacity: 1;}
	}


	.slect {
		display: flex;
		justify-content: center;
		align-content: center;
		margin: 20px auto 0 auto;
		font-size: 30px;
		color: #88B83E;
		font-style: italic;
		opacity: 0;
		animation: slect;
		animation-duration: 0.5s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-delay: 2s;
		-moz-animation: slect;
		-moz-animation-duration: 0.5s;
		-moz-animation-iteration-count: 1;
		-moz-animation-fill-mode: forwards;
		-moz-animation-delay: 2s;
		-webkit-animation: slect;
		-webkit-animation-duration: 0.5s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
		-webkit-animation-delay: 2s;
		-ms-animation: slect;
		-ms-animation-duration: 0.5s;
		-ms-animation-iteration-count: 1;
		-ms-animation-fill-mode: forwards;
		-ms-animation-delay: 2s;
	}


	@keyframes slect {
	   0%    {opacity: 0}
	   100%  {opacity: 1;}
	}



	.adwon {
		display: flex;
		justify-content: center;
		align-content: center;
		margin: 0 auto;
		opacity: 1;
	}

	    .adwon img {
		    display: block;
			position: absolute;
		    width: 100px;
		    height: auto;
		    
			animation: adwon;
		    animation-duration: 1s;
		    animation-iteration-count: infinite;
		    animation-fill-mode: backwards;
		    animation-delay: 2s;
		    -moz-animation: adwon;
		    -moz-animation-duration: 1s;
		    -moz-animation-iteration-count: infinite;
		    -moz-animation-fill-mode: backwards;
		    -moz-animation-delay: 2s;
		    -webkit-animation: adwon;
		    -webkit-animation-duration: 1s;
		    -webkit-animation-iteration-count: infinite;
		    -webkit-animation-fill-mode: backwards;
		    -webkit-animation-delay: 2s;
		    -ms-animation: adwon;
		    -ms-animation-duration: 1s;
		    -ms-animation-iteration-count: infinite;
		    -ms-animation-fill-mode: backwards;
		    -ms-animation-delay: 2s;
	    }

	    @keyframes adwon {
		    0%    {margin-top: 10px; opacity: 0}
		    100%  {margin-top: 30px; opacity: 1;}
	    }



	.mlist {
		display: flex;
		justify-content: space-between;
		align-content: flex-start;
		margin: 80px auto 0 auto;
		width: 93%;
		color: #FFF;
		
		animation: mlist;
		animation-duration: 0.5s;
		animation-iteration-count: 1;
		animation-fill-mode: backwards;
		animation-delay: 2.5s;
		-moz-animation: mlist;
		-moz-animation-duration: 0.5s;
		-moz-animation-iteration-count: 1;
		-moz-animation-fill-mode: backwards;
		-moz-animation-delay: 2.5s;
		-webkit-animation: mlist;
		-webkit-animation-duration: 0.5s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-fill-mode: backwards;
		-webkit-animation-delay: 2.5s;
		-ms-animation: mlist;
		-ms-animation-duration: 0.5s;
		-ms-animation-iteration-count: 1;
		-ms-animation-fill-mode: backwards;
		-ms-animation-delay: 2.5s;
	}

	    @keyframes mlist {
		    0%    {margin-top: 150px; opacity: 0}
		    100%  {margin-top: 80px;  opacity: 1;}
	    }



	    .mlist-div1 {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			width: 46%;
	    }

	    .mlist-div2 {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			width: 22.8%;
	    }

	    .mlist-div3 {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			width: 15%;
	    }

	    .mlist-div4 {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			width: 7.25%;
	    }

	    .mlist-div5 {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			width: 7.25%;
	    }


	    .mlist-div-r1 {
			display: flex;
			position: relative;
			justify-content: center;
			align-items: center;
			margin-bottom: 0;
			width: auto;
			height: auto;
			background-color: #717071;
			text-align: center;
	    }

	        .mlist-div-r1 img {
			    display: block;
				margin: 0 auto;
				width: 80%;
				height: auto;
				z-index: 1;
	        }

	    .mlist-div-r2 {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 5px;
			padding: 10px 0;
			width: 100%;
	    }

	        .mlist-div1-r2-ev {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				margin-bottom: 5px;
			    width: 15.83%;
	        }

	        .mlist-div2-r2-ev {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				margin-bottom: 5px;
			    width: 31.8%;
	        }

	        .mlist-div3-r2-ev {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				margin-bottom: 5px;
			    width: 48.2%;
	        }

	        .mlist-div4-r2-ev {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				margin-bottom: 0;
			    width: 100%;
	        }

	        .mlist-div5-r2-ev {
				display: flex;
				position: relative;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				margin-bottom: 0;
			    width: 100%;
	        }

	            .mlist-div-r2-ev-pic {
					display: block;
					position: relative;
					margin-bottom: 10px;
			        width: 100%;
	            }

	                .mlist-div-r2-ev-pic img {
					    display: block;
						position: relative;
			            width: 100%;
			            border: solid 0.5px #CCC;
						z-index: 1;
	                }

	                .mlist-div-r2-ev-pic img:hover {
					    background: #000;
					    transform: scale(1.5);
					    -webkit-transition:all 0.4s ease-in-out;
					    transition:all 0.4s ease-in-out;
						z-index: 99999999;
	                }


	            .mlist-div-r2-ev-r2 {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 2px;
					background: #717071;
					padding: 3px 0;
			        width: 100%;
					min-height: 50px;
			        color: #FFF;
					font-size: 23px;
					line-height: 135%;
					word-break: keep-all;
					text-align: center;
	            }

	            .mlist-div-r2-ev-r3 {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 0;
					background: #DCDCDC;
					padding: 5px;
			        width: 100%;
					min-height: 50px;
			        color: #000;
					font-size: 23px;
					line-height: 135%;
					word-break: keep-all;
					text-align: center;
	            }

	            .mlist-div-r2-ev-r4 {
					display: flex;
					justify-content: center;
					align-items: center;
					background: #DCDCDC;
					padding: 5px;
			        width: 100%;
					min-height: 50px;
			        color: #000;
					font-size: 23px;
					line-height: 135%;
					word-break: keep-all;
					text-align: center;
	            }

	.machinetop {
		display: flex;
		justify-content: center;
		align-items: stretch;
		position: relative;
		margin: 0 auto;
		width: 100%;
		height: auto;
		background: #000;
	}

	    .machinetop-l {
		    display: flex;
			flex-direction: column;
		    justify-content: center;
		    align-items: center;
			padding: 0;
		    width: 20%;
		    height: auto;
	    }

	     .machinetop-r {
		    display: flex;
			flex-direction: column;
		    justify-content: flex-start;
		    align-items: stretch;
			position: relative;
			padding: 10px 0 0 0;
		    width: 70%;
		    height: auto;
			overflow: hidden;
			border: solid 0px #CCCFFF;
	    }


	     .side-menu {
		    display: flex;
			flex-direction: column;
		    justify-content: center;
		    align-items: center;
			position: relative;
			padding: 0;
		    width: 100%;
		    height: auto;
			overflow: hidden;
	    }

	    .logomachine {
			display: block;
		    margin: 10px auto;
		    position: relative;
		    width: 70%;
		    height: auto;
	    }

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

	    .gline {
		    position: relative;
		    margin: 5px auto;
		    width: 85%;
		    height: 1px;
		    background: #878788;
	    }

	    .side-menu-div {
			display: flex;
			justify-content: center;
			align-items: center;
		    position: relative;
		    margin: 15px auto;
		    position: relative;
		    width: 85%;
		    height: auto;
			color: #FFF;
			font-size: 1.5em;
			text-align: center;
	    }



	    .gcolor1 {
			color: #88B83E;
	    }

	    .gcolor1 a {
			color: #88B83E;
	    }

	    .gcolor1 a:hover {
			color: #88B83E;
	    }

	.machinemenu {
		margin: 0 auto;
		width: 40%;
	}

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

	.machineclick {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10% auto 0 auto;
	}

	    .machineclick-word {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 10px;
			width: 60%;
	    }

	        .machineclick-word img {
			    display: inline;
				width: 100%;
	        }

	    .machineclick-icon {
		    display: flex;
			width: 7%;
	    }

	        .machineclick-icon img {
		        display: block;
				position: relative;
			    width: 100%;
				
			    animation: goclick;
			    animation-duration: 0.8s;
			    animation-iteration-count: infinite;
			    animation-fill-mode: backwards;
			    animation-delay: 0;
			    -moz-animation: goclick;
			    -moz-animation-duration: 0.8s;
			    -moz-animation-iteration-count: infinite;
			    -moz-animation-fill-mode: backwards;
			    -moz-animation-delay: 0s;
			    -webkit-animation: goclick;
			    -webkit-animation-duration: 0.8s;
			    -webkit-animation-iteration-count: infinite;
			    -webkit-animation-fill-mode: backwards;
			    -webkit-animation-delay: 0s;
			    -ms-animation: goclick;
			    -ms-animation-duration: 0.8s;
			    -ms-animation-iteration-count: infinite;
			    -ms-animation-fill-mode: backwards;
			    -ms-animation-delay: 0s;	
	        }

	        @keyframes goclick {
		        0%    {transform: translateX(0);}
		        100%  {transform: translateX(15px);}
	        }

	.gobackselect {
		display: inline-block;
		margin: 20% auto;
		padding: 8px 20px;
		width: auto;
		font-size: 1.5em;
		text-align: center;
		color: #FFF;
		border: solid 1px #FFF;
		border-radius: 50px;
		cursor: pointer;
	}

	    .gobackselect:hover {
		    color: #000;
			background: #FFF;
		    border: solid 1px #FFF;
	    }


	.mechmenutop {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		position: relative;
		width: 94%;
	}

	    .mechmenutop-div {
		    display: block;
			width: 12.2%;
			box-sizing: border-box;
			border: solid 5px #000;
	    }

	        .mechmenutop-div img {
		        display: block;
			    width: 100%;
	       }

	.mechmenumiddle {
		display: block;
		position: relative;
		margin: 5px 0 5px 5px;
		width: 93.25%;
		height: 1px;
		background: #878788;
	}

	.mechmenubuttem_linet {
		display: block;
		position: absolute;
		margin: 5px 0;
		left: 12.3%;
		width: 1.5px;
		height: 93.5%;
		background: #878788;
	}

	.mechmenubuttem_line {
		display: block;
		position: absolute;
		margin: 5px 0;
		left: 12.3%;
		width: 1.5px;
		height: 97%;
		background: #878788;
	}

	.mechmenubuttem {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		position: relative;
		width: 94%;
	}

	    .mechmenubuttem-div {
		    display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			width: 12.2%;
	    }

	    .mechmenubuttem-div-rt {
		    display: block;
			margin: 0 0 0px 0;
			width: 100%;
			box-sizing: border-box;
			border: solid 5px #000;
	    }

	        .mechmenubuttem-div-rt img {
		        display: block;
			    width: 100%;
	       }

	    .mechmenubuttem-div-rb {
		    display: block;
			margin: 0;
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;
			border: solid 5px #000;
	    }

	        .mechmenubuttem-div-rb img {
		        display: block;
			    width: 100%;
	       }

	    .mechmenubuttem-divp {
		    display: flex;
			position: relative;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 12.2%;
			height: 100%;
			background: #F1F1F1;
			overflow: hidden;
			cursor: pointer;
			box-sizing: border-box;
			border: solid 5px #000;
	    }

	        .mechmenubuttem-divp img {
			    display: block;
				width: 100%;
				height: 100%;
	        }

	        .mechmenubuttem-divp:hover {
			    /*border: solid 5px #00984B;*/
	        }

	        .mechmenubuttem-divp:hover img {
		        transform: scale(1.3);
			    -webkit-transition:all 0.2s ease-in-out;
			    -moz-transition:all 0.2s ease-in-out;
			    -ms-transition:all 0.2s ease-in-out;
			    transition:all 0.4s ease-in-out;
	        }

	    .mechmenubuttem-divp-1 {
		    display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 12.2%;
			background: #F1F1F1;
			box-sizing: border-box;
			border: solid 5px #00984B;
			overflow: hidden;
			cursor: pointer;
	    }

	        .mechmenubuttem-divp-1 img {
			    display: block;
				width: 100%;
	        }

	        .mechmenubuttem-divp-1:hover img {
		        transform: scale(1.3);
			    -webkit-transition:all 0.2s ease-in-out;
			    -moz-transition:all 0.2s ease-in-out;
			    -ms-transition:all 0.2s ease-in-out;
			    transition:all 0.4s ease-in-out;
	        }

	    .mechmenubuttem-divp2 {
		    display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			width: 12.2%;
	    }

	    .mechmenubuttem-divpp-rt {
		    display: block;
			margin: 0 0 5px 0;
			width: 100%;
			box-sizing: border-box;
			border: solid 5px #000;
			overflow: hidden;
	    }

	        .mechmenubuttem-divpp-rt img {
		        display: block;
			    width: 100%;
				background: #F1F1F1;
	       }

	    .mechmenubuttem-divpp-rt:hover img {
		    transform: scale(1.3);
			-webkit-transition:all 0.2s ease-in-out;
			-moz-transition:all 0.2s ease-in-out;
			-ms-transition:all 0.2s ease-in-out;
			transition:all 0.4s ease-in-out;
	    }

	    .mechmenubuttem-divpp-rb {
		    display: block;
			margin: 0;
			width: 100%;
			box-sizing: border-box;
			border: solid 5px #000;
			overflow: hidden;
	    }

	        .mechmenubuttem-divpp-rb img {
		        display: block;
			    width: 100%;
				background: #F1F1F1;
	       }

	    .mechmenubuttem-divpp-rb:hover img {
		    transform: scale(1.3);
			-webkit-transition:all 0.2s ease-in-out;
			-moz-transition:all 0.2s ease-in-out;
			-ms-transition:all 0.2s ease-in-out;
			transition:all 0.4s ease-in-out;
	    }


	    .mechmenubuttem-divpp-rt-1 {
		    display: block;
			margin: 0 0 5px 0;
			width: 100%;
			box-sizing: border-box;
			border: solid 5px #00984B;
			overflow: hidden;
	    }

	        .mechmenubuttem-divpp-rt-1 img {
		        display: block;
			    width: 100%;
				background: #F1F1F1;
	       }

	        .mechmenubuttem-divpp-rt-1:hover img {
	            transform: scale(1.3);
	            -webkit-transition:all 0.2s ease-in-out;
	            -moz-transition:all 0.2s ease-in-out;
	            -ms-transition:all 0.2s ease-in-out;
	            transition:all 0.4s ease-in-out;
	        }

	    .mechmenubuttem-divpp-rb-1 {
		    display: block;
			margin: 0;
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;
			border: solid 5px #00984B;
	    }

	        .mechmenubuttem-divpp-rb-1 img {
		        display: block;
			    width: 100%;
	       }

	        .mechmenubuttem-divpp-rb-1:hover img {
	            transform: scale(1.3);
	            -webkit-transition:all 0.2s ease-in-out;
	            -moz-transition:all 0.2s ease-in-out;
	            -ms-transition:all 0.2s ease-in-out;
	            transition:all 0.4s ease-in-out;
	        }


	.machinebuttem {
		display: flex;
		justify-content: center;
		align-items: stretch;
		margin: 0 auto;
		width: 98%;
		height: auto;
		background: #FFFFFF;
		overflow: hidden;
	}

	    .machinebuttem-3part-1 {
		    display: flex;
			position: relative;
			flex-direction: column;
		    justify-content: flex-start;
		    align-items: flex-start;
		    width: 35%;
		    height: auto;
			border-left: solid 1px #FB4C27;
	    }

	    .machinebuttem-3part-2 {
		    display: flex;
			position: relative;
			flex-direction: column;
		    justify-content: flex-start;
		    align-items: flex-start;
		    width: 35%;
		    height: auto;
			border-left: solid 1px #FB4C27;
	    }

	    .machinebuttem-3part-3 {
		    display: flex;
			position: relative;
			flex-direction: column;
		    justify-content: flex-start;
		    align-items: flex-start;
		    width: 24.9%;
		    height: auto;
			border-left: solid 1px #FB4C27;
	    }

	        .machbb-name {
				display: inline-block;
				position: absolute;
				background-color: #FB4C27;
				padding: 10px 5px;
				top: 0%;
				left: 0%;
				width: 32px;
				font-size: 20px;
				line-height: 120%;
				color: #FFF;
	        }

	        .machpp {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				margin: 10px 0 0 0;
				width: 100%;
	        }

	            .machpp-div {
				    display: flex;
				    width: 28%;
	            }

	               .machpp-div img {
				       display: block;
				       width: 100%;
	               }

	            .machpp-div:hover img {
				    transform: scale(1.1);
	            }


	            .machpp-div2 {
				    display: flex;
				    width: 40%;
	            }

	               .machpp-div2 img {
				       display: block;
				       width: 100%;
	               }

	            .machpp-div2:hover img {
				    transform: scale(1.1);
	            }

                /* 淡化 */
	            .machpp-div-op {
				    display: flex;
					position: relative;
				    width: 28%;
	            }

	               .machpp-div-op img {
				       display: block;
				       width: 100%;
					   opacity: 0.1;
	               }


	            .machpp-div2-op {
				    display: flex;
					position: relative;
				    width: 40%;
	            }

	               .machpp-div2-op img {
				       display: block;
					   position: relative;
				       width: 100%;
					   opacity: 0.1;
	               }



                /* 覆蓋綠框白底 */
	            .machpp-div-opab {
				    display: block;
					position: absolute;
				    width: 100%;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
	            }

	               .machpp-div-opab img {
				       display: block;
				       width: 100%;
					   opacity: 1;
	               }


	            .machpp-div2-opab {
				    display: block;
					position: absolute;
				    width: 100%;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
	            }

	               .machpp-div2-opab img {
				       display: block;
				       width: 100%;
					   opacity: 1;
	               }


	.mechmenuunder {
		display: flex;
		justify-content: flex-start;
		align-items: stretch;
		margin: 5px 0 10px 0;
		width: 94%;
		height: 22px;
	}

	    .mechmenuunder-name {
			padding: ;
		    display: block;
			width: 12.1%;
		    height: 22px;
	    }

	        .mechmenuunder-name img {
		        display: block;
				margin: 0 auto;
			    width: 95%;
				height: 22px;
	        }

	    .mechmenuunder-space {
			padding-left: 5px;
		    display: block;
			width: 12px;
		    height: 20px;
	    }

	    .greenbox {
		    display: block;
			width: 75%;
		    height: 20px;
		    background: #000;
	    }

	    .mechmenuunder-space1 {
		    display: block;
			width: 12.8%;
		    height: 20px;
	    }

	    .greenbox1 {
		    display: block;
			width: 86.8%;
		    height: 20px;
		    background: #00984B;
	    }

	    .mechmenuunder-space2 {
		    display: block;
			width: 13.4%;
		    height: 20px;
		    background: #000;
	    }

	    .greenbox2 {
		    display: block;
			width: 74.3%;
		    height: 20px;
		    background: #00984B;
	    }

	    .mechmenuunder-space3 {
		    display: block;
			width: 13.4%;
		    height: 20px;
		    background: #000;
	    }

	    .greenbox3 {
		    display: block;
			width: 49.2%;
		    height: 20px;
		    background: #00984B;
	    }

	    .mechmenuunder-space4 {
		    display: block;
			width: 25.9%;
		    height: 20px;
		    background: #000;
	    }

	    .greenbox4 {
		    display: block;
			width: 61.8%;
		    height: 20px;
		    background: #00984B;
	    }

	    .mechmenuunder-space5 {
		    display: block;
			width: 25.8%;
		    height: 20px;
		    background: #000;
	    }

	    .greenbox5 {
		    display: block;
			width: 36.8%;
		    height: 20px;
		    background: #00984B;
	    }

	    .mechmenuunder-space6 {
		    display: block;
			width: 38.5%;
		    height: 20px;
		    background: #000;
	    }

	    .greenbox6 {
		    display: block;
			width: 49.2%;
		    height: 20px;
		    background: #00984B;
	    }

	    .mechmenuunder-space7 {
		    display: block;
			width: 38.5%;
		    height: 20px;
		    background: #000;
	    }

	    .greenbox7 {
		    display: block;
			width: 24.1%;
		    height: 20px;
		    background: #00984B;
	    }



	.maplink {
		display: block;
		position: relative;
		margin: 0 auto;
		width: 88%;
	}

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

	.maplinkab {
		display: flex;
		position: absolute;
		justify-content: space-between;
		align-items: stretch;
		flex-wrap: wrap;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		min-width: 100%;
		min-height: 100%;
		z-index: 9;
	}

	    .maplinkab-div1 {
		    display: block;
		    width: 16.6%;
		    height: auto;
			outline: none;
			border: solid 0px #ccc;
	    }

	        .maplinkab-div1 img {
			   display: block;
		       width: 100%;
			   height: 100%;
			   outline: none;
	        }



    /* word */

    .fontfame1 {
		font-family: Arial, 'Arial', '微軟正黑體', Sans-Serif;
    }



    /* popup */

    #secondbox{
        height:100%;
        width:100%;
    }

    .modal {
      opacity: 0;
      padding: 30px;
      position: absolute;
      z-index: 1100;
      -webkit-transition: opacity 600ms linear 600ms;
      -moz-transition: opacity 600ms linear 600ms;
      -ms-transition: opacity 600ms linear 600ms;
      -o-transition: opacity 600ms linear 600ms;
      transition: opacity 600ms linear 600ms;
    }

    .modal_info {
      background: #D1E0DD;
      padding: 15px 15px;
      text-align: center;
    }

    .modal_overlay {
      background: rgba(0, 0, 0, 0.5);
      bottom: 0;
      left: 0;
      opacity: 0;
      overflow: auto;
      position: fixed;
      right: 0;
      top: 0;
      visibility: hidden;
      z-index: 900;
      -webkit-transition: opacity 200ms linear;
      -moz-transition: opacity 200ms linear;
      -ms-transition: opacity 200ms linear;
      -o-transition: opacity 200ms linear;
      transition: opacity 200ms linear;
    }

    .display {
      opacity: 1;
      visibility: visible;
    }

    .conceal {
      visibility: visible;
    }

    .btn_container {
      height: 100%;
      text-align: center;
    }

    .btn_container:before {
      width: 0;
    }

    .open_button {
      -webkit-transition: opacity 100ms linear;
      -moz-transition: opacity 100ms linear;
      -ms-transition: opacity 100ms linear;
      -o-transition: opacity 100ms linear;
      transition: opacity 100ms linear;
    }

    a.open_button {
    }
 
    a.open_button:hover {
    }

    a.open_button.load {
      opacity: 0;
    }

    button.modal_close {
      background: #1A5554;
      border: none;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      border-radius: 50%;
      color: #FFFFFF;
      cursor: pointer;
      outline: none;
      width: 52px;
      height: 52px;
      position: absolute;
      right: 10px;
      top: 10px;
      -webkit-transition: -webkit-transform 600ms;
      -moz-transition: -moz-transform 600ms;
      -ms-transition: -ms-transform 600ms;
      -o-transition: -o-transform 600ms;
      transition: transform 600ms;
    }

    button.modal_close:hover {
      background: #337473;
      -webkit-transform: rotate(360deg) scale(1.10);
      -moz-transform: rotate(360deg) scale(1.10);
      -ms-transform: rotate(360deg) scale(1.10);
      -o-transform: rotate(360deg) scale(1.10);
      transform: rotate(360deg) scale(1.10);
      -webkit-transition: -webkit-transform 600ms;
      -moz-transition: -moz-transform 600ms;
      -ms-transition: -ms-transform 600ms;
      -o-transition: -o-transform 600ms;
      transition: transform 600ms;
    }

    button.modal_close span, span:before, span:after {
      background: #FFFFFF;
      content: '';
      cursor: pointer;
      display: block;
      height: 2px;
      position: absolute;
      width: 20px;
    }

    button.modal_close span:first-child {
      background: none;
      bottom: 0;
      left: 0;
      margin: auto;
      position: absolute;
      right: 0;
      top: 0;
    }

    button.modal_close span:before {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
    }

    button.modal_close span:after {
      -webkit-transform: translateY(-2px) rotate(-45deg);
      -moz-transform: translateY(-2px) rotate(-45deg);
      -ms-transform: translateY(-2px) rotate(-45deg);
      -o-transform: translateY(-2px) rotate(-45deg);
      transform: translateY(-2px) rotate(-45deg);
      top: 2px;
    }




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

	            .mlist-div-r2-ev-r2 {
					margin-bottom: 2px;
					padding: 3px 5px;
					min-height: 45px;
					font-size: 22px;
					line-height: 125%;
	            }

	            .mlist-div-r2-ev-r3 {
					margin-bottom: 0;
					padding: 3px;
					min-height: 45px;
					font-size: 22px;
					line-height: 125%;
	            }

	            .mlist-div-r2-ev-r4 {
					padding: 3px;
					min-height: 45px;
					font-size: 22px;
					line-height: 125%;
	            }
	
	
	.gobackselect {
		font-size: 1.4em;
	}
	
	
}

@media screen and (max-width: 1440px) {
	
	.a3 {
		margin: 0 25px 10px 25px;
		font-size: 45px;
	}
		
	            .mlist-div-r2-ev-r2 {
					margin-bottom: 2px;
					padding: 3px 5px;
					min-height: 45px;
					font-size: 18px;
					line-height: 125%;
	            }

	            .mlist-div-r2-ev-r3 {
					margin-bottom: 0;
					padding: 3px;
					min-height: 45px;
					font-size: 18px;
					line-height: 125%;
	            }

	            .mlist-div-r2-ev-r4 {
					padding: 3px;
					min-height: 45px;
					font-size: 18px;
					line-height: 125%;
	            }
	
	
	.gobackselect {
		font-size: 1.2em;
	}
	
	    .flex-3-zh > * a {
			font-size: 30px;
	    }
	
}

@media screen and (max-width: 1280px) { 
	
	.a3 {
		margin: 0 25px 10px 25px;
		font-size: 40px;
	}
		
	            .mlist-div-r2-ev-r2 {
					margin-bottom: 2px;
					padding: 3px 5px;
					min-height: 45px;
					font-size: 17px;
					line-height: 125%;
	            }

	            .mlist-div-r2-ev-r3 {
					margin-bottom: 0;
					padding: 3px;
					min-height: 45px;
					font-size: 17px;
					line-height: 125%;
	            }

	            .mlist-div-r2-ev-r4 {
					padding: 3px;
					min-height: 45px;
					font-size: 17px;
					line-height: 125%;
	            }
	
	.gobackselect {
		font-size: 1.1em;
	}
	
	
	.flex-3-zh {
		margin: 20px auto 0 auto;
	}
	
	    .flex-3-zh > * a {
			padding-left: 5px;
			font-size: 28px;
	    }
	
	
	
}

@media screen and (max-width: 1100px) { 
	
	
	            .mlist-div-r2-ev-r2 {
					margin-bottom: 2px;
					padding: 3px 5px;
					min-height: 50px;
					font-size: 16px;
					line-height: 125%;
	            }

	            .mlist-div-r2-ev-r3 {
					margin-bottom: 0;
					padding: 3px;
					min-height: 50px;
					font-size: 16px;
					line-height: 125%;
	            }

	            .mlist-div-r2-ev-r4 {
					padding: 3px;
					min-height: 50px;
					font-size: 16px;
					line-height: 125%;
	            }
	
	.gobackselect {
		margin: auto;
		padding: 8px 7px;
		font-size: 1.2em;
		line-height: 100%;
	}
	
	
}


@media screen and (max-width: 1024px) { 
		
	.flex-3-zh {
		margin: 15px auto 0 auto;
	}
	
	    .flex-3-zh > * a {
			padding-left: 2px;
			font-size: 24px;
	    }

	
}

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

	
	            .mlist-div-r2-ev-r2 {
					margin-bottom: 2px;
					padding: 3px 5px;
					min-height: 40px;
					font-size: 14px;
					line-height: 125%;
	            }

	            .mlist-div-r2-ev-r3 {
					margin-bottom: 0;
					padding: 3px;
					min-height: 40px;
					font-size: 14px;
					line-height: 125%;
	            }

	            .mlist-div-r2-ev-r4 {
					padding: 3px;
					min-height: 50px;
					font-size: 14px;
					line-height: 125%;
	            }
	
	
}


@media screen and (max-width: 840px) {
	
	    .flex-3-zh > * a {
			padding-left: 2px;
			font-size: 22px;
	    }
	
	.mlist {
		display: flex;
		flex-wrap: wrap;
	}
	
	    .mlist-div1 {
			width: 100%;
	    }
	
	    .mlist-div2 {
			width: 49.5%;
	    }
	
	    .mlist-div3 {
			width: 32.8%;
	    }
	
	    .mlist-div4 {
			width: 15.9%;
	    }
	
	    .mlist-div5 {
			width: 15.9%;
	    }
	
	            .mlist-div-r2-ev-r2 {
					margin-bottom: 2px;
					padding: 3px 5px;
					min-height: 40px;
					font-size: 20px;
					line-height: 125%;
	            }

	            .mlist-div-r2-ev-r3 {
					margin-bottom: 0;
					padding: 3px;
					min-height: 40px;
					font-size: 20px;
					line-height: 125%;
	            }

	            .mlist-div-r2-ev-r4 {
					padding: 3px;
					min-height: 40px;
					font-size: 20px;
					line-height: 125%;
	            }

}	


@media screen and (max-width: 600px) {
	
	@keyframes gotop {
	   0%    {margin: 6% auto 0 auto; transform: scale(1);}
	   50%   {margin: 6% auto 0 auto; transform: scale(1);}
	   100%  {margin: 3% auto 0 auto;  transform: scale(0.7);}
	}

	.a1 {
		margin-top: 3px;
		width: 20px;
	}
		
	.a2 {
		margin-top: 3px;
		width: 20px;
	}
	
	.a3 {
		margin: 0 25px 10px 25px;
		font-size: 28px;
	}
	
	.slect {
		margin: 0 auto;
		font-size: 22px;	
	}
		
	    .adwon img {
		    width: 80px;
	     }
	
	
	.flex-3-zh {
		margin: 5px auto 0 auto;
	}
	
	    .flex-3-zh > * a {
			font-size: 16px;
	    }
	
	
	            .mlist-div-r2-ev-r2 {
					margin-bottom: 2px;
					padding: 3px 5px;
					min-height: 35px;
					font-size: 16px;
					line-height: 125%;
	            }

	            .mlist-div-r2-ev-r3 {
					margin-bottom: 0;
					padding: 3px;
					min-height: 35px;
					font-size: 16px;
					line-height: 125%;
	            }

	            .mlist-div-r2-ev-r4 {
					padding: 3px;
					min-height: 35px;
					font-size: 16px;
					line-height: 125%;
	            }
	
	
	
}


@media screen and (max-width: 400px) {
	
	.flex-3-zh {
		margin: 2px auto 0 auto;
	}
	
	    .flex-3-zh > * a {
			font-size: 13px;
	    }

}