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

/* 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;
		margin: 0; 
		padding: 0;
        -webkit-text-size-adjust: none;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased; /* macOS/Safari/Chrome 優化 */
        -moz-osx-font-smoothing: grayscale; /* Firefox 優化 */
	}

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


/* 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", sans-serif, serif;
		color: #000;
		font-size: 1em;
		letter-spacing: 0;
		line-height: 1.35em;
		text-align: left;
	}


	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;
		text-decoration: none;
	}

		a:hover {
			color: #E71f19;
			border-bottom-color: transparent;
		}

	strong, b {
		font-weight: 400;
	}

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

	h1, h2, h3, h4, h5, h6 {
		line-height: 1.75em;
	}

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

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

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


/* header */

	#header {
		display: block;
		position: absolute;
		padding: 0 0 0 0;
		background: ;
		width: 100%;
		height: auto;
		overflow: hidden;
		border: 0;
		z-index: 1000;
		overflow-x: hidden;
	}

		#header nav {
			display: flex;
			position: relative;
			justify-content: flex-end;
			align-items: center;
            margin: auto;
            padding: 1.1em 0 1em 0;
			width: 100%;
			z-index: 98;
		}


			#header nav ul li {
                display: flex;
                float: left;
                justify-content: center;
                align-items: center;
                margin: 0 5px;
				font-size: 1.2em;
                font-weight: bold;
				text-align: center;
                letter-spacing: 0;
                height: 40px;
                text-shadow: 1px 1px 2px #000;
			}

			    #header nav ul li:hover {    
                    color: #FFF;
			    }

			    #header nav ul li:first-child {
                    margin-right: ;
                    background: none;
                    border-radius: 0;
			    }

                /* 倒數第2個 */
			    #header nav ul li:nth-last-child(2) {
			    }

			    #header nav ul li:last-child {
                    margin-right: 0;
                    color: #FFF;
			    }

			#header nav ul li > ul {
				display: none;
			}

			    #header nav ul li a {
				    color: #FFF;
                    word-wrap: break-word;      /* 長單字自動換行 */
                    overflow-wrap: break-word;   /* 標準換行屬性 */
                    white-space: normal;         /* 取消預設的單行顯示 */
                    line-height: 115%;
			    }

			    #header nav ul li a:hover {
				    color: #FFF;
                    border-radius: 50px;
			    }

				#header nav ul li input[type="button"],
				#header nav ul li input[type="submit"],
				#header nav ul li input[type="reset"],
				#header nav ul li .button {
					
				}

					.navlogo {
						display: flex;
                        position: absolute;
                        left: 0;
                        justify-content: center;
                        align-items: center;
						width: 160px;
					}

					   .navlogo img {
                           margin: auto 0;
						   width: 100%;
					   }


					.len {
					    display: flex;
					    position: relative;
					    justify-content: center;
					    align-items: center;
					    width: auto;
                        padding: 0 10px;
					}

					   .len_txt {
                           display: block;
                           padding: 0 6px;
                           border-radius: 30px;
                           font-size: 80%;
                           color: #FFF;
					   }

					   .len_txt:hover {
                           color: #E71F19;
					   }

					   .len_txt-p {
                           display: block;
                           padding: 0 6px;
                           border-radius: 30px;
                           font-size: 80%;
                           color: #E71F19;
					   }


				#header nav ul li.submenu {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
                    padding: 0 8px;
					width: auto;
                    border-radius: 50px;
                    word-break: break-all; 
				}

				#header nav ul li.submenu:hover {
					background-color: #E71F19;
                    color: #FFF;
				}

				#header nav ul li.submenu1 {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
                    padding: 0 8px;
					width: auto;
                    border-bottom: solid 2px #E71f19; 
                    word-break: break-all; 
                    /* border-radius: 50px;*/
				}

				    #header nav ul li.submenu1 > a {
						color: #E71F19;
				    }

				    #header nav ul li.submenu1:hover {
						border-bottom: solid 2px #FFF; 
				    }

				#header nav ul li.current {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
                    padding: 0 8px;
					width: auto;
                    border-radius: 50px;
                    word-break: break-all; 
				}

				#header nav ul li.current:hover {
					background-color: #E71F19;
                    color: #FFF;
				}

				#header nav ul li.current1 {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
                    padding: 0 8px;
					width: auto;
                    border-bottom: solid 2px #E71f19;
                    word-break: break-all; 
				}

				    #header nav ul li.current1 > a {
					    color: #E71F19;
				    }

				    #header nav ul li.current1:hover {
						border-bottom: solid 2px #FFF; 
				    }

				#header nav ul li.active > a, #header nav ul li:hover > a {
                    color: #FFF;
					-moz-transition: all 0.2s ease-in-out;
					-webkit-transition: all 0.2s ease-in-out;
					-ms-transition: all 0.2s ease-in-out;
					transition: all 0.2s ease-in-out;
				}

				#header nav ul li.active > a, #header nav ul li:last-child:hover > a {
                    
				}


		#header.reveal {
			-moz-animation: reveal-header 0.5s;
			-webkit-animation: reveal-header 0.5s;
			-ms-animation: reveal-header 0.5s;
			animation: reveal-header 0.5s;
		}

		#header.alt {
			-moz-animation: none;
			-webkit-animation: none;
			-ms-animation: none;
			animation: none;
			box-shadow: none;
		    width: 100%;	
            background: rgba(0,0,0, 0.7);
		}

				#header.alt nav ul li.active > a, #header.alt nav ul li:hover > a {
					
				}


	.len_m {
	    display: none;
	}


	    .len-icon {
	        display: block;
			margin-right: 5px;
			width: 2em;
	    }

	        .len-icon img {
	            display: block;
		    	width: 100%;
		    	height: auto;
	        }

	    .len1 {
	        display: block;
			width: auto;
			color: #FFFFFF;
	    }

	        .len1 a {
			    color: #FFFFFF;
	        }

	        .len1 a:hover {
			    color: #CCCCCC;
	        }


	    .len2 {
	        display: block;
			width: auto;
			color: #5BBC2B;
	    }

	        .len2 a {
			    color: #5BBC2B;
	        }

	        .len2 a:hover {
			    color: #CCCCCC;
	        }


	.mlogo {
	    display: none;
	}



/* Dropotron 選單子層 */

	.dropotron {
		display: block;
        position: absolute;
		background: #FFF;
		box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5);
		line-height: 1.7em;
        padding: 0 10px;
		min-width: 7em;
		text-transform: none;
		*margin-top: calc(-1em + 1px);
		z-index: 999999;
	}

		.dropotron.level-0 {
			font-size: 1.1em;
			font-weight: 400;
			margin-top: 10px;
			margin-left: ;
			
            border-top: solid 2px #E71f19;
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome, "微軟正黑體";
			text-transform: none !important;
			content: '\f0da';
		}

			/*.dropotron.level-0 > li > a:after {
				margin-left: 0.5em;
				content: '\f0da';
			}

			.dropotron.level-0:before {
				border-bottom: solid 0.5em rgba(225, 225, 225, 0.9);;
				border-left: solid 0.5em transparent;
				border-right: solid 0.5em transparent;
				content: '';
				left: 0.75em;
				position: absolute;
				top: -0.45em;
			}
            */

		.dropotron > li {
            width: auto;
			border-top: solid 2px rgba(225, 225, 225, 0.9);
		}

			.dropotron > li > a {
				-moz-transition: none;
				-webkit-transition: none;
				-ms-transition: none;
				transition: none;
				color: inherit;
				text-decoration: none;
				padding: 0.25em 0.5em;
				border: 0;
                text-align: center;
			}

			.dropotron > li:hover > a {
				background: ;
				color: #E71f19;
				font-weight: bold;

			}

/* Banner */

	.banner {
		display: block;
		position: relative;
		overflow-x: hidden;
		z-index: 1;
	}

	    .banner img {
			display: block;
		    width: 100%;
	    }

		.inner {
			display: block;
			position: relative;
			margin: 0 auto;
			padding: 0;
            overflow: hidden;
			z-index: 1;
			
		}

	    .inner img {
		     display: block;
			 width: 100%;
	     }


	.bannerab1 {
		display: block;
		position: absolute;
		margin: 0 auto;
		width: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
        
		/*-webkit-mask-image: linear-gradient(to right, black 25%, transparent 50%);
		mask-image: linear-gradient(to right, black 25%, transparent 50%);
		-webkit-mask-size: 400% 100%;
		mask-size: 400% 100%;*/
  
		/* 設定 8 秒動畫，並無限循環 (infinite) */
		animation: reveal-loop 7s linear infinite;
	}

		@keyframes reveal-loop {
		    0% {
		        -webkit-mask-position: 0% 0; /* 初始隱藏 */
 		     }
		    25% {
		        -webkit-mask-position: 0% 0;   /* 2秒時完全顯現 (8s * 25% = 2s) */
 		    }
 		    95% {
		        -webkit-mask-position: 0% 0;   /* 持續顯示至接近末尾 */
  		        opacity: 1;
            }
  		    100% {
 		        -webkit-mask-position: 0% 0; 
  		        opacity: 1;                    /* 結尾稍微淡出，讓回到 0% 重新開始時更平滑 */
  		      }
		}


	.bannerab2 {
		display: block;
		position: absolute;
		margin: 0 auto;
		width: 100%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
	
		-moz-animation-name: head2;
		-moz-animation-duration: 8s;
		-moz-animation-delay: 0s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: head2;
		-webkit-animation-duration: 8s;
		-webkit-animation-delay: 0;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: head2;
		-ms-animation-duration: 8s;
		-ms-animation-delay: 0;
		-ms-animation-iteration-count: infinite;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: head2;
		-o-animation-duration: 8s;
		-o-animation-delay: 0;
		-o-animation-iteration-count: infinite;
		-o-animation-fill-mode: forwards;
		animation-name: head2;
		animation-duration: 8s;
		animation-delay: 0;
		animation-iteration-count: infinite;
		animation-fill-mode: forwards;
	}

        @keyframes head2 {
            0%    {left: 60%; opacity:0;}
            20%   {left: 60%; opacity:0;}
            25%   {left: 50%; opacity:1;}
            95%   {left: 50%; opacity:1;}
            100%  {left: 50%; opacity:0;}
        }


	.bannerab3 {
		display: block;
		position: absolute;
		margin: 0 auto;
		width: 100%;
		top: 50%;
        left: 50%;
		transform: translate(-50%, -50%);
		z-index: 3;
	
		-moz-animation-name: head3;
		-moz-animation-duration: 8s;
		-moz-animation-delay: 0s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: head3;
		-webkit-animation-duration: 8s;
		-webkit-animation-delay: 0;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: head3;
		-ms-animation-duration: 8s;
		-ms-animation-delay: 0;
		-ms-animation-iteration-count: infinite;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: head3;
		-o-animation-duration: 8s;
		-o-animation-delay: 0;
		-o-animation-iteration-count: infinite;
		-o-animation-fill-mode: forwards;
		animation-name: head3;
		animation-duration: 8s;
		animation-delay: 0;
		animation-iteration-count: infinite;
		animation-fill-mode: forwards;
	}

        @keyframes head3 {
            0%    {left: 60%; opacity:0;}
            23%   {left: 60%; opacity:0;}
            35%   {left: 50%; opacity:1;}
            95%   {left: 50%; opacity:1;}
            100%  {left: 50%; opacity:0;}
        }


	.bannerab4 {
		display: block;
		position: absolute;
		width: 100%;
		margin: 0 auto;
		top: 50%;
        left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		z-index: 4;
	
		-moz-animation-name: head4;
		-moz-animation-duration: 8s;
		-moz-animation-delay: 0s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: head4;
		-webkit-animation-duration: 8s;
		-webkit-animation-delay: 0;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: head4;
		-ms-animation-duration: 8s;
		-ms-animation-delay: 0;
		-ms-animation-iteration-count: infinite;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: head4;
		-o-animation-duration: 8s;
		-o-animation-delay: 0;
		-o-animation-iteration-count: infinite;
		-o-animation-fill-mode: forwards;
		animation-name: head4;
		animation-duration: 8s;
		animation-delay: 0;
		animation-iteration-count: infinite;
		animation-fill-mode: forwards;
	}

        @keyframes head4 {
            0%    {left: 60%; opacity:0;}
            20%   {left: 60%; opacity:0;}
            32%   {left: 50%; opacity:1;}
            95%   {left: 50%; opacity:1;}
            100%  {left: 50%; opacity:0;}
        }


	.bannerab5 {
		display: block;
		position: absolute;
		margin: 0 auto;
        width: 100%;
		top: 50%;
        left: 50%;
		transform: translate(-50%, -50%);
		z-index: 5;
	
		-moz-animation-name: head5;
		-moz-animation-duration: 8s;
		-moz-animation-delay: 0s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: head5;
		-webkit-animation-duration: 8s;
		-webkit-animation-delay: 0;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: head5;
		-ms-animation-duration: 8s;
		-ms-animation-delay: 0;
		-ms-animation-iteration-count: infinite;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: head5;
		-o-animation-duration: 8s;
		-o-animation-delay: 0;
		-o-animation-iteration-count: infinite;
		-o-animation-fill-mode: forwards;
		animation-name: head5;
		animation-duration: 8s;
		animation-delay: 0;
		animation-iteration-count: infinite;
		animation-fill-mode: forwards;
	}

        @keyframes head5 {
            0%    {left: 60%; opacity:0;}
            25%   {left: 60%; opacity:0;}
            34%   {left: 50%; opacity:1;}
            95%   {left: 50%; opacity:1;}
            100%  {left: 50%; opacity:0;}
        }


	.bannerab6 {
		display: block;
		position: absolute;
        width: 100%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 6;
	
		-moz-animation-name: head6;
		-moz-animation-duration: 8s;
		-moz-animation-delay: 0s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: head6;
		-webkit-animation-duration: 8s;
		-webkit-animation-delay: 0;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: head6;
		-ms-animation-duration: 8s;
		-ms-animation-delay: 0;
		-ms-animation-iteration-count: infinite;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: head6;
		-o-animation-duration: 8s;
		-o-animation-delay: 0;
		-o-animation-iteration-count: infinite;
		-o-animation-fill-mode: forwards;
		animation-name: head6;
		animation-duration: 8s;
		animation-delay: 0;
		animation-iteration-count: infinite;
		animation-fill-mode: forwards;
	}

        @keyframes head6 {
            0%    {left: 60%; opacity:0;}
            28%   {left: 60%; opacity:0;}
            42%   {left: 50%; opacity:1;}
            95%   {left: 50%; opacity:1;}
            100%  {left: 50%; opacity:0;}
        }


	.bannerab7 {
		display: block;
		position: absolute;
        width: 100%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 7;
	
		-moz-animation-name: head7;
		-moz-animation-duration: 8s;
		-moz-animation-delay: 0s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: head7;
		-webkit-animation-duration: 8s;
		-webkit-animation-delay: 0;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: head7;
		-ms-animation-duration: 8s;
		-ms-animation-delay: 0;
		-ms-animation-iteration-count: infinite;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: head7;
		-o-animation-duration: 8s;
		-o-animation-delay: 0;
		-o-animation-iteration-count: infinite;
		-o-animation-fill-mode: forwards;
		animation-name: head7;
		animation-duration: 8s;
		animation-delay: 0;
		animation-iteration-count: infinite;
		animation-fill-mode: forwards;
	}

        @keyframes head7 {
            0%    {left: 60%; opacity:0;}
            35%   {left: 60%; opacity:0;}
            48%   {left: 50%; opacity:1;}
            95%   {left: 50%; opacity:1;}
            100%  {left: 50%; opacity:0;}
        }


	.bannerab8 {
		display: block;
		position: absolute;
        width: 100%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 8;
	
		-moz-animation-name: head8;
		-moz-animation-duration: 8s;
		-moz-animation-delay: 0s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: head8;
		-webkit-animation-duration: 8s;
		-webkit-animation-delay: 0;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: head8;
		-ms-animation-duration: 8s;
		-ms-animation-delay: 0;
		-ms-animation-iteration-count: infinite;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: head8;
		-o-animation-duration: 8s;
		-o-animation-delay: 0;
		-o-animation-iteration-count: infinite;
		-o-animation-fill-mode: forwards;
		animation-name: head8;
		animation-duration: 8s;
		animation-delay: 0;
		animation-iteration-count: infinite;
		animation-fill-mode: forwards;
	}

        @keyframes head8 {
            0%    {left: 60%; opacity:0;}
            40%   {left: 60%; opacity:0;}
            55%   {left: 50%; opacity:1;}
            95%   {left: 50%; opacity:1;}
            100%  {left: 50%; opacity:0;}
        }

         .bannerab1 img, .bannerab2 img, .bannerab3 img .bannerab4 img .bannerab5 img, .bannerab6 img, .bannerab7 img .bannerab8 img {
             display: block;
             width: 100%;
         }

     .bannerli_txt {
		display: block;
		position: absolute;
        width: 38%;
		top: 50%;
        left: 10%;
		transform: translate(0%, -50%);
		z-index: 110;
	
		-moz-animation-name: bsli_txt;
		-moz-animation-duration: 7s;
		-moz-animation-delay: 0s;
		-moz-animation-iteration-count: 1;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: bsli_txt;
		-webkit-animation-duration: 7s;
		-webkit-animation-delay: 0;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: bsli_txt;
		-ms-animation-duration: 7s;
		-ms-animation-delay: 0;
		-ms-animation-iteration-count: 1;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: bsli_txt;
		-o-animation-duration: 7s;
		-o-animation-delay: 0;
		-o-animation-iteration-count: 1;
		-o-animation-fill-mode: forwards;
		animation-name: bsli_txt;
		animation-duration: 7s;
		animation-delay: 0;
		animation-iteration-count: 1;
		animation-fill-mode: forwards; 
     }

		    @keyframes bsli_txt1 {
			     0%   {opacity: 0; }
			    10%   {opacity: 1; }
			    100%  {opacity: 1; }
		    }


	.bannerconus1 {
		display: block;
		position: absolute;
		margin: 0 auto;
		width: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
	
		-moz-animation-name: conus1;
		-moz-animation-duration: 8s;
		-moz-animation-delay: 0s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: conus1;
		-webkit-animation-duration: 8s;
		-webkit-animation-delay: 0;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: conus1;
		-ms-animation-duration: 8s;
		-ms-animation-delay: 0;
		-ms-animation-iteration-count: infinite;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: conus1;
		-o-animation-duration: 8s;
		-o-animation-delay: 0;
		-o-animation-iteration-count: infinite;
		-o-animation-fill-mode: forwards;
		animation-name: conus1;
		animation-duration: 8s;
		animation-delay: 0;
		animation-iteration-count: infinite;
		animation-fill-mode: forwards;
	}

        @keyframes conus1 {
            0%    {opacity:0;}
            2%    {opacity:0;}
            8%    {opacity:1;}
            100%  {opacity:1;}
        }

	.bannerconus2 {
		display: block;
		position: absolute;
		margin: 0 auto;
		width: 100%;
        left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
	
		-moz-animation-name: conus2;
		-moz-animation-duration: 8s;
		-moz-animation-delay: 0s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: conus2;
		-webkit-animation-duration: 8s;
		-webkit-animation-delay: 0;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: conus2;
		-ms-animation-duration: 8s;
		-ms-animation-delay: 0;
		-ms-animation-iteration-count: infinite;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: conus2;
		-o-animation-duration: 8s;
		-o-animation-delay: 0;
		-o-animation-iteration-count: infinite;
		-o-animation-fill-mode: forwards;
		animation-name: conus2;
		animation-duration: 8s;
		animation-delay: 0;
		animation-iteration-count: infinite;
		animation-fill-mode: forwards;
	}

        @keyframes conus2 {
            0%    {top: 60%; opacity:0;}
            3%    {top: 60%; opacity:0;}
            10%   {top: 50%; opacity:1;}
            100%  {top: 50%; opacity:1;}
        }


	.bannerconus3 {
		display: block;
		position: absolute;
		margin: 0 auto;
		width: 100%;
		top: 50%;
        left: 50%;
		transform: translate(-50%, -50%);
		z-index: 3;
	
		-moz-animation-name: conus3;
		-moz-animation-duration: 8s;
		-moz-animation-delay: 0s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: conus3;
		-webkit-animation-duration: 8s;
		-webkit-animation-delay: 0;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: conus3;
		-ms-animation-duration: 8s;
		-ms-animation-delay: 0;
		-ms-animation-iteration-count: infinite;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: conus3;
		-o-animation-duration: 8s;
		-o-animation-delay: 0;
		-o-animation-iteration-count: infinite;
		-o-animation-fill-mode: forwards;
		animation-name: conus3;
		animation-duration: 8s;
		animation-delay: 0;
		animation-iteration-count: infinite;
		animation-fill-mode: forwards;
	}

        @keyframes conus3 {
            0%    {top: 60%; opacity:0;}
            7%    {top: 60%; opacity:0;}
            15%   {top: 50%; opacity:1;}
            100%  {top: 50%; opacity:1;}
        }













		.bannersub {
		    display: block;
			position: relative;
		    width: 100%;
		    height: auto;
		}

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

		    .bannersub_txt {
		        display: block;
			    position: absolute;
                width: auto;
                left: 12.5%;
                top: 59%;
                transform: translate(0%, -50%);
                z-index: 10;
                border-bottom: solid 1.5px #FF0000;
		    }


	.path {
		display: flex;
		position: relative;
		justify-content: center;
		align-items: center;
		margin: 0;
		padding: 2px 0 1px 0;
		width: 100%;
		background-color: #484848;
		font-size: 1em;
		color: #FFF;
	}

	    .path a {
		    color: #FFF;
	    }

	    .path a:hover {
		    color: #E71f19;
	    }


/* Wrapper */

	.wrapper {
		position: relative;
	}

		.wrapper.style1 {  
			display: block;
			margin: 0 auto;
			width: 100%;
		}

		.wrapper.style2 {  
			display: block;
			margin: 0 auto;
			width: 100%;
		}





/* area-container */

	.headcontainer {  
		position: relative;
		margin: 0 auto;
		width: 80%;
	}

	.pathcontainer {  
		position: relative;
		margin: 0 auto;
		width: 75%;
	}

	.bodycontainer1 {  
		position: relative;
		margin: 0 auto;
		width: 80%;
	}

	.bodycontainer2 {  
		position: relative;
		margin: 0 auto;
		padding: 2em auto;
		width: 78%;
	}

	.bodycontainer3 {  
		position: relative;
		margin: 0 auto;
		width: 75%;
	}

	.bodycontainer4 {  
		position: relative;
		margin: 0 auto;
		width: 70%;
	}

	.bodycontainer5 {  
		position: relative;
		margin: 0 auto;
		width: 60%;
	}

	.bodycontainer6 {  
		position: relative;
		margin: 0 auto;
		width: 85%;
	}

	.footercontainer {  
		position: relative;
		margin: 0 auto;
		width: 90%;
	}


/* setting */

	.ind_a1 {  
        display: inline-block;
		position: relative;
        margin: 0 auto;
        padding: 3em 0 0 0;
		width: 100%;
        background: url("../../images/pic_indbg1.png"), url("../../images/pic_indbg1_ft.png");
        background-position: top center;
        background-repeat: no-repeat, repeat;
        background-size: cover, 100%;
	}

	.ind_a1-r1pic {  
        display: block;
		position: relative;
        margin: 0 auto;
		width: 90%;
	}

	    .ind_a1-r1pic img {  
            display: block;
            margin: 0 auto;
		    width: 100%;
	    }


	.ind_a1-r1picab1 {  
        display: block;
		position: relative;
        z-index: 1;
        
        -moz-animation-name: light1;
        -moz-animation-duration: 5s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-fill-mode: forwards;
        -webkit-animation-name: light1;
        -webkit-animation-duration: 5s;
        -webkit-animation-delay: 0;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-fill-mode: forwards;
        -ms-animation-name: light1;
        -ms-animation-duration: 5s;
        -ms-animation-delay: 0;
        -ms-animation-iteration-count: infinite;
        -ms-animation-fill-mode: forwards;
        -o-animation-name: light1;
        -o-animation-duration: 5s;
        -o-animation-delay: 0;
        -o-animation-iteration-count: infinite;
        -o-animation-fill-mode: forwards;
        animation-name: light1;
        animation-duration: 5s;
        animation-delay: 0;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;  
	}


	.ind_a1-r1picab2 {  
        display: block;
		position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        
        -moz-animation-name: light2;
        -moz-animation-duration: 5s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-fill-mode: forwards;
        -webkit-animation-name: light2;
        -webkit-animation-duration: 5s;
        -webkit-animation-delay: 0;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-fill-mode: forwards;
        -ms-animation-name: light2;
        -ms-animation-duration: 5s;
        -ms-animation-delay: 0;
        -ms-animation-iteration-count: infinite;
        -ms-animation-fill-mode: forwards;
        -o-animation-name: light2;
        -o-animation-duration: 5s;
        -o-animation-delay: 0;
        -o-animation-iteration-count: infinite;
        -o-animation-fill-mode: forwards;
        animation-name: light2;
        animation-duration: 5s;
        animation-delay: 0;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;   
	}


	.ind_a1-r1picab3 {  
        display: block;
		position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
        
        -moz-animation-name: light3;
        -moz-animation-duration: 5s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-fill-mode: forwards;
        -webkit-animation-name: light3;
        -webkit-animation-duration: 5s;
        -webkit-animation-delay: 0;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-fill-mode: forwards;
        -ms-animation-name: light3;
        -ms-animation-duration: 5s;
        -ms-animation-delay: 0;
        -ms-animation-iteration-count: infinite;
        -ms-animation-fill-mode: forwards;
        -o-animation-name: light3;
        -o-animation-duration: 5s;
        -o-animation-delay: 0;
        -o-animation-iteration-count: infinite;
        -o-animation-fill-mode: forwards;
        animation-name: light3;
        animation-duration: 5s;
        animation-delay: 0;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards; 
	}

	.ind_a1-r1picab4 {  
        display: block;
		position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 4;
         
        -moz-animation-name: light4;
        -moz-animation-duration: 5s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-fill-mode: forwards;
        -webkit-animation-name: light4;
        -webkit-animation-duration: 5s;
        -webkit-animation-delay: 0;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-fill-mode: forwards;
        -ms-animation-name: light4;
        -ms-animation-duration: 5s;
        -ms-animation-delay: 0;
        -ms-animation-iteration-count: infinite;
        -ms-animation-fill-mode: forwards;
        -o-animation-name: light4;
        -o-animation-duration: 5s;
        -o-animation-delay: 0;
        -o-animation-iteration-count: infinite;
        -o-animation-fill-mode: forwards;
        animation-name: light4;
        animation-duration: 5s;
        animation-delay: 0;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards; 
	}


		@keyframes light1 {
		     0%  {opacity: 1; }
		    10%  {opacity: 1; }
		    20%  {opacity: 1; }
		    30%  {opacity: 0; }
		    60%  {opacity: 0; }
		    80%  {opacity: 0; }
		    90%  {opacity: 1; }
		   100%  {opacity: 1; }
		}

		@keyframes light2 {
		     0%  {opacity: 0; }
		    20%  {opacity: 0; }
		    30%  {opacity: 1; }
		    40%  {opacity: 0; }
		    60%  {opacity: 0; }
		    70%  {opacity: 0; }
		    80%  {opacity: 1; }
		    90%  {opacity: 0; }
		   100%  {opacity: 0; }
		}

		@keyframes light3 {
		     0%  {opacity: 0; }
		    30%  {opacity: 0; }
		    40%  {opacity: 1; }
		    50%  {opacity: 0; }
		    60%  {opacity: 1; }
		    70%  {opacity: 1; }
		    80%  {opacity: 0; }
		   100%  {opacity: 0; }
		}

		@keyframes light4 {
		     0%  {opacity: 0; }
		    40%  {opacity: 0; }
		    50%  {opacity: 1; }
		    60%  {opacity: 1; }
		    70%  {opacity: 0; }
		    80%  {opacity: 0; }
		    90%  {opacity: 0; }
		   100%  {opacity: 0; }
		}



    /*-- 首頁slick設定 --*/
	.instorslick {
		display: flex;
		flex-direction: column;
		position: absolute;
		align-items: stretch;
		padding: 2em auto;
        bottom: 10%;
        left: 50%;
        transform: translate(-50%, 0);
		width: 80%;
        z-index: 5;
	}

	    .instorslick-div {
		    display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 auto 2em auto;
            padding: 1em;
            width: 32%;
	    }

	        .instorslick-div-pic {
		        display: block;
                position: relative;
                margin: 0 auto 0 auto;
                padding: 0 1em;
                width: 100%;
	        }

	            .instorslick-div-pic img {
		            display: block;
                    position: relative;
                    width: 100%;
                    z-index: 5;
	            }

	            .instorslick-div-picab {
		            display: block;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translate(-50%, 0);
                    width: 100%;
                    height: 65%;
                    background: #FFF;
                    border-radius: 15px;
                    z-index: 1;
	            }

	            .instorslick-div-picab img {
		            display: block;
                    position: relative;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 100%;
                    z-index: -1;
	            }

	        .instorslick-div-title {
		        display: block;
                position: relative;
                margin: -7% 0 0 0;
                padding: 0.5em 0.5em 0 0.5em;
                width: 100%;
                height: 3em;
                text-align: center;
                z-index: 5;
	        }

	        .instorslick-div-txt {
		        display: block;
                position: relative;
                margin: 0.5em 0;
                padding: 0 1em;
                width: 100%;
                z-index: 5;
                
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
	        }

	        .instorslick-div-more {
		        display: flex;
                position: relative;
                justify-content: center;
                align-items: center;
                padding: 0.5em;
                width: 100%;
                z-index: 5;
	        }

	            .instorslick-div-more-bt {
		            display: block;
                    position: relative;
                    width: 50px;
                    height: 50px;
                    border-radius: 50px;
                    background: #989898;
                    cursor: pointer;
	            }

	            .instorslick-div-more-bt::before {
		            content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 30px;
                    height: 1px;
                    background: #FFF;
	            }

	            .instorslick-div-more-bt::after {
		            content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 1px;
                    height: 30px;
                    background: #FFF;
	            }

	            .instorslick-div-more-bt-in {
		            display: block;
                    position: absolute;
                    width: 5px;
                    height: 5px;
                    top: 50%;
                    left: 50%;
                    background: #989898;
                    transform: translate(-50%, -50%);
                    z-index: 10;
	            }


	    .instorslick-div:hover .instorslick-div-picab {
		    background: #808080;
            -webkit-transition:all 0.2s ease-in-out;
            transition:all 0.4s ease-in-out;
	    }

	    .instorslick-div:hover .instorslick-div-more-bt {
		    background: #E71f19;
            -webkit-transition:all 0.2s ease-in-out;
            transition:all 0.4s ease-in-out;
	    }

	    .instorslick-div:hover .instorslick-div-more-bt-in {
		    background: #E71f19;
            -webkit-transition:all 0.2s ease-in-out;
            transition:all 0.4s ease-in-out;
	    }

	    .instorslick-div:hover .instorslick-div-title {
		    color: #FFF;
            -webkit-transition:all 0.2s ease-in-out;
            transition:all 0.4s ease-in-out;
	    }

	    .instorslick-div:hover .instorslick-div-txt {
		    color: #FFF;
            -webkit-transition:all 0.2s ease-in-out;
            transition:all 0.4s ease-in-out;
	    }


    /*-- 首頁slick設定 end --*/


	.ind_a2 {  
        display: inline-block;
		position: relative;
        margin: 0 auto;
        padding: 0 0 6em 0;
		width: 100%;
        background: url("../../images/pic_indr2_bg1.png"), url("../../images/pic_indr2_bg2.png");
        background-position: top center, top center;
        background-repeat: no-repeat;
        background-size: 100%, cover;
	}


	.ind_a2_light {  
        display: block;
		position: absolute;
        
        top: 0%;
        left: 50%;
        transform: translate(-50%,0);
        width: 90%;
        height: auto;
        z-index: -1;  
	}

	    .ind_a2_light img {  
            display: block;
            position: relative;
		    width: 100%;
	    }


	.ind_a2_light2 {  
        display: block;
		position: absolute;
        
        top: 0%;
        left: 50%;
        transform: translate(-50%,0);
        width: 90%;
        height: auto;
        z-index: -1;
        opacity: 1;
        
        -moz-animation-name: a21;
        -moz-animation-duration: 2s;
        -moz-animation-delay: 0s;
        -moz-animation-iteration-count: ;
        -moz-animation-fill-mode: forwards;
        -webkit-animation-name: a21;
        -webkit-animation-duration: 2s;
        -webkit-animation-delay: 0s;
        -webkit-animation-iteration-count: ;
        -webkit-animation-fill-mode: forwards;
        -ms-animation-name: a21;
        -ms-animation-duration: 2s;
        -ms-animation-delay: 0s;
        -ms-animation-iteration-count: ;
        -ms-animation-fill-mode: forwards;
        -o-animation-name: a21;
        -o-animation-duration: 2s;
        -o-animation-delay: 0s;
        -o-animation-iteration-count: ;
        -o-animation-fill-mode: forwards;
        animation-name: a21;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-iteration-count: ;
        animation-fill-mode: forwards;   
	}

	    .ind_a2_light2 img {  
            display: block;
            position: relative;
		    width: 100%;
	    }

		@keyframes a23 {
		     0%  {top:0%; opacity: 0; }
		    50%  {top:0%; opacity: 1; }
		   100%  {top:0%; opacity: 1; }
		}


	.ind_a2_content {  
        display: inline-block;
		position: relative;
        padding: 2em auto;
		width: 100%;
        z-index: 10;
        opacity: 0;
        
        -moz-animation-name: a2c;
        -moz-animation-duration: 3s;
        -moz-animation-delay: 1s;
        -moz-animation-iteration-count: ;
        -moz-animation-fill-mode: forwards;
        -webkit-animation-name: a2c;
        -webkit-animation-duration: 3s;
        -webkit-animation-delay: 1s;
        -webkit-animation-iteration-count: ;
        -webkit-animation-fill-mode: forwards;
        -ms-animation-name: a2c;
        -ms-animation-duration: 3s;
        -ms-animation-delay: 1s;
        -ms-animation-iteration-count: ;
        -ms-animation-fill-mode: forwards;
        -o-animation-name: a2c;
        -o-animation-duration: 3s;
        -o-animation-delay: 1s;
        -o-animation-iteration-count: ;
        -o-animation-fill-mode: forwards;
        animation-name: a2c;
        animation-duration: 3s;
        animation-delay: 1s;
        animation-iteration-count: ;
        animation-fill-mode: forwards; 
	}

		@keyframes a2c {
		     0%  {opacity: 0; }
		    50%  {opacity: 1; }
		   100%  {opacity: 1; }
		}



	.ind_a2_content_txt1 {  
        display: block;
		position: relative;
        margin: 0 auto;
        padding: 0 1em;
		width: 720px;
        z-index: 5;
	}

	.ind_a2_content_applist {  
        display: flex;
		position: relative;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        margin: 0 auto;
		width: 100%;
	}

	    .ind_a2_content_applist-div {  
            display: flex;
		    position: relative;
            justify-content: center;
            align-items: center;
            padding: 0 1em;
            margin-bottom: 0.5em;
		    width: 25%;
            border-right: solid 1px #484848;
            text-align: center;
            line-height: 120%;
	    }

	    .ind_a2_content_applist-div:nth-child(4n) {  
            border-right: none;
	    }

	    .ind_a2_content_applist-div a {  
            color: #484848;
	    }

	    .ind_a2_content_applist-div a:hover {  
            color: #E71f19;
	    }


	.ind_a2_c_icon_name {  
        display: block;
		position: absolute;
        top: 10%;
        left: 50%;
        transform: translate(-50%, 0%);
		width: 50%;
        text-align: center;
        z-index: 50;
	}


	.ind_a2_icons {  
        display: block;
		position: relative;
        margin: 0 auto;
		width: 50%;
        z-index: 1;
	}

	    .ind_a2_icons img{  
            display: block;
            position: relative;
		    width: 100%;
            z-index: -1;
	    }


	        .ind_a2_icon-icon-in1 {
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100%;
                height: 100%;
                transform: translate(-50%, -50%);
                z-index: 20;
	        }

	        .ind_a2_icon-icon-in2 {
                display: none;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100%;
                height: 100%;
                transform: translate(-50%, -50%);
                z-index: 20;
	        }

	        .ind_a2_icon-icon-bor {
                display: block;
                position: absolute;
                top: 0%;
                left: 0%;
                border: solid 0 #E71f19;
                width: 100%;
                height: 100%;
                z-index: 110;
	        }


	        .ind_a2_icon-icon1 {
                display: block;
                position: absolute;
                top: 7%;
                left: 4.2%;
                width: 16.5%;
                background: rgba(178,178,178,0.8);
                transform: rotate(45deg); 
	        }

	           .ind_a2_icon-icon1:hover .ind_a2_icon-icon-in1 {
                  
	           }

	           .ind_a2_icon-icon1:hover .ind_a2_icon-icon-in2 {
                  
	           }

	           .ind_a2_icon-icon1:hover .ind_a2_icon-icon-bor {
                   border: solid 2px #E71f19;
                   clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
	           }



	        .ind_a2_icon-icon2 {
                display: block;
                position: absolute;
                top: 27%;
                left: 16.8%;
                width: 16.5%;
                background: rgba(178,178,178,0.9);
                transform: rotate(45deg); 
	        }

	           .ind_a2_icon-icon2:hover .ind_a2_icon-icon-in1 {
                  /* display: none; */
	           }

	           .ind_a2_icon-icon2:hover .ind_a2_icon-icon-in2 {
                  /* display: block; */
	           }


	        .ind_a2_icon-icon3 {
                display: block;
                position: absolute;
                top: 47%;
                left: 29.2%;
                width: 16.5%;
                background: rgba(178,178,178,0.8);
                transform: rotate(45deg); 
	        }

	           .ind_a2_icon-icon3:hover .ind_a2_icon-icon-in1 {
                  /* display: none; */
	           }

	           .ind_a2_icon-icon3:hover .ind_a2_icon-icon-in2 {
                  /* display: block; */
	           }


	        .ind_a2_icon-icon4 {
                display: block;
                position: absolute;
                top: 67%;
                left: 42%;
                width: 16%;
                background: rgba(178,178,178,0.8);
                transform: rotate(45deg); 
	        }

	           .ind_a2_icon-icon4:hover .ind_a2_icon-icon-in1 {
                  /* display: none; */
	           }

	           .ind_a2_icon-icon4:hover .ind_a2_icon-icon-in2 {
                  /* display: block; */
	           }

	        .ind_a2_icon-icon5 {
                display: block;
                position: absolute;
                top: 47%;
                left: 54.5%;
                width: 16.5%;
                background: rgba(178,178,178,0.8);
                transform: rotate(45deg); 
	        }

	           .ind_a2_icon-icon5:hover .ind_a2_icon-icon-in1 {
                  /* display: none; */
	           }

	           .ind_a2_icon-icon5:hover .ind_a2_icon-icon-in2 {
                  /* display: block; */
	           }


	        .ind_a2_icon-icon6 {
                display: block;
                position: absolute;
                top: 27%;
                left: 67%;
                width: 16.5%;
                background: rgba(178,178,178,0.9);
                transform: rotate(45deg); 
	        }

	           .ind_a2_icon-icon6:hover .ind_a2_icon-icon-in1 {
                  /* display: none; */
	           }

	           .ind_a2_icon-icon6:hover .ind_a2_icon-icon-in2 {
                  /* display: block; */
	           }

	        .ind_a2_icon-icon7 {
                display: block;
                position: absolute;
                top: 7%;
                left: 79.5%;
                width: 16.5%;
                background: rgba(178,178,178,0.8);
                transform: rotate(45deg); 
	        }

	           .ind_a2_icon-icon7:hover .ind_a2_icon-icon-in1 {
                   /* display: none; */
	           }

	           .ind_a2_icon-icon7:hover .ind_a2_icon-icon-in2 {
                  /* display: block; */
	           }

	        .ind_a2_icon-icon8 {
                display: block;
                position: absolute;
                top: 27.4%;
                left: 42%;
                width: 16%;
                background: rgba(178,178,178,0.8);
                transform: rotate(45deg); 
	        }

	           .ind_a2_icon-icon8:hover .ind_a2_icon-icon-in1 {
                  /* display: none; */
	           }

	           .ind_a2_icon-icon8:hover .ind_a2_icon-icon-in2 {
                  /* display: block; */
	           }


	.ind_a3 {  
        display: inline-block;
		position: relative;
        margin: -5% auto 0 auto;
        padding: 3% 0 10em 0;
		width: 100%;
        background: url("../../images/pic_indr3_bg1.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
	}

	.ind_a3flex {  
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        margin: 0 auto;
        width: 92%;
	}

	    .ind_a3flex-div {  
            display: block;
            position: relative;
            width: 13%;
	    }

	    .ind_a3flex-div1 {  
            display: block;
            position: relative;
            width: 13%;
	    }

	        .ind_a3flex-divpic {  
                display: block;
                position: relative;
                padding: 0 20px;
                width: 100%;
	        }

	        .ind_a3flex-divpicab {  
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 80%;
                z-index: 100;
	        }


	        .ind_a3flex-divpic img {  
                display: block;
                position: relative;
                width: 100%;
	        }

	        .ind_a3flex-divtxt {  
                display: block;
                position: relative;
                width: 100%;
                padding: 0.5em 0;
                text-align: center;
	        }


	.ind_a4 {  
        display: inline-block;
		position: relative;
        margin: 0 auto;
        padding: 0 0 8em 0;
		width: 100%;
        background: url("../../images/pic_indr4_bg.png");
        background-position: top left;
        background-repeat: no-repeat;
        background-size: cover;
        border-top: solid 1px #FFF;
	}


	.ind_a4_titlebe {  
        display: block;
		position: relative;
        margin: -130px auto 0 auto;
		width: auto;
        text-align: center;
        z-index: 30;
	}

	    .ind_a4_titlebe img {  
            display: block;
		    position: relative;
            margin: 0 auto;
            width: 260px;
	    }


	.ind_a4_qcflex {  
        display: flex;
		position: relative;
        justify-content: flex-end;
        a;align-items: stretch;
        margin: 0 auto;
		width: 100%;
	}

	    .ind_a4_qcflex-div {  
            display: flex;
		    position: relative;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 2em auto;
		    width: 33%;
	    }

	        .ind_a4_qcflex-div-txt {  
                display: block;
		        position: relative;
		        width: 80%;
	        }


	    .ind_a4_qcflex-animate {  
            display: block;
		    position: relative;
            margin: 0 auto;
		    width: 70%;
	    }

	        .ind_a4_qcflex-animate img {  
                display: block;
		        width: 100%;
	        }

	        .ind_a4_qcflex-animateab1 {  
                display: block;
		        position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
		        width: 100%;
                z-index: 10;

		        -moz-animation-name: aa1;
		        -moz-animation-duration: 6s;
		        -moz-animation-iteration-count: infinite;
		        -moz-animation-fill-mode: forwards;
		        -webkit-animation-name: aa1;
		        -webkit-animation-duration: 6s;
		        -webkit-animation-delay: 0;
		        -webkit-animation-iteration-count: infinite;
		        -webkit-animation-fill-mode: forwards;
		        -ms-animation-name: aa1;
		        -ms-animation-duration: 6s;
		        -ms-animation-delay: 0;
		        -ms-animation-iteration-count: infinite;
		        -ms-animation-fill-mode: forwards;
		        -o-animation-name: aa1;
		        -o-animation-duration: 6s;
		        -o-animation-delay: 0;
		        -o-animation-iteration-count: infinite;
		        -o-animation-fill-mode: forwards;
		        animation-name: aa1;
		        animation-duration: 6s;
		        animation-delay: 0;
		        animation-iteration-count: infinite;
		        animation-fill-mode: forwards; 
	        }

		        @keyframes aa1 {
			         0%   {opacity: 0; }
			        20%   {opacity: 1; }
			        30%   {opacity: 1; }
			        95%   {opacity: 1; }
			        100%  {opacity: 0; }
		        }

	        .ind_a4_qcflex-animateab2 {  
                display: block;
		        position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
		        width: 100%;
                z-index: 10;

		        -moz-animation-name: aa2;
		        -moz-animation-duration: 6s;
		        -moz-animation-iteration-count: infinite;
		        -moz-animation-fill-mode: forwards;
		        -webkit-animation-name: aa2;
		        -webkit-animation-duration: 6s;
		        -webkit-animation-delay: 0;
		        -webkit-animation-iteration-count: infinite;
		        -webkit-animation-fill-mode: forwards;
		        -ms-animation-name: aa2;
		        -ms-animation-duration: 6s;
		        -ms-animation-delay: 0;
		        -ms-animation-iteration-count: infinite;
		        -ms-animation-fill-mode: forwards;
		        -o-animation-name: aa2;
		        -o-animation-duration: 6s;
		        -o-animation-delay: 0;
		        -o-animation-iteration-count: infinite;
		        -o-animation-fill-mode: forwards;
		        animation-name: aa2;
		        animation-duration: 6s;
		        animation-delay: 0;
		        animation-iteration-count: infinite;
		        animation-fill-mode: forwards; 
	        }

		        @keyframes aa2 {
			         0%   {opacity: 0; }
			        20%   {opacity: 0; }
			        40%   {opacity: 1; }
			        50%   {opacity: 1; }
			        95%   {opacity: 1; }
			        100%  {opacity: 0; }
		        }

	        .ind_a4_qcflex-animateab3 {  
                display: block;
		        position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
		        width: 100%;
                z-index: 10;

		        -moz-animation-name: aa3;
		        -moz-animation-duration: 6s;
		        -moz-animation-iteration-count: infinite;
		        -moz-animation-fill-mode: forwards;
		        -webkit-animation-name: aa3;
		        -webkit-animation-duration: 6s;
		        -webkit-animation-delay: 0;
		        -webkit-animation-iteration-count: infinite;
		        -webkit-animation-fill-mode: forwards;
		        -ms-animation-name: aa3;
		        -ms-animation-duration: 6s;
		        -ms-animation-delay: 0;
		        -ms-animation-iteration-count: infinite;
		        -ms-animation-fill-mode: forwards;
		        -o-animation-name: aa3;
		        -o-animation-duration: 6s;
		        -o-animation-delay: 0;
		        -o-animation-iteration-count: infinite;
		        -o-animation-fill-mode: forwards;
		        animation-name: aa3;
		        animation-duration: 6s;
		        animation-delay: 0;
		        animation-iteration-count: infinite;
		        animation-fill-mode: forwards; 
	        }

		        @keyframes aa3 {
			         0%   {opacity: 0; }
			        40%   {opacity: 0; }
			        60%   {opacity: 1; }
			        90%   {opacity: 1; }
			        95%   {opacity: 1; }
			        100%  {opacity: 0; }
		        }


	.ind_a5 {  
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: stretch;
        margin: -4em auto 3em auto;
        width: 80%;
	}

	    .ind_a5-div {  
            display: block;
            position: relative;
            width: 31%;
            box-shadow: 2px 2px 5px #333;
            border-top: solid 5px #666;
            overflow: hidden;
	    }

	        .ind_a5-div img {  
                display: block;
                position: relative;
                width: 100%;
	        }

	        .ind_a5-div:hover {  
                border-top: solid 5px #E71f19;
	        }

			.ind_a5-div:hover .overlay {
				opacity:0.5;
				filter:alpha(opacity=100);
			}

			.ind_a5-div:hover img {
				-webkit-transition:all .3s linear;
				transition:all .3s linear;
				-ms-transform:scale(1.1);
				-webkit-transform:scale(1.1);
				transform:scale(1.1);
			}

			.ind_a5-div .overlay {
				width: 100%;
				height: 100%;
				position: absolute;
				overflow: hidden;
				top: 0;
				left: 0;
				opacity: 1;
				background-color:rgba(0,0,0,0.8);
				-webkit-transition:all 0.2s ease-in-out;
				transition:all 0.3s ease-in-out;
				cursor: pointer;
			}

			.ind_a5-div-divab {
				display: block;
				position: absolute;
				overflow: hidden;
                margin: 0.25em 0 0 0;
                width: 75%;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #CCC;
                text-align: center;
			}


	        .ind_a5-div:hover .ind_a5-div-divab {  
                color: #FFF;
	        }


	.ap_r1 {  
        display: inline-block;
        position: relative;
        margin: 0 auto;
        background: url("../../images/pic_ap_r1bg1.png"), url("../../images/pic_ap_r1bg2.png");
        background-position: top center;
        background-repeat: no-repeat, repeat-y;
        background-size: 100%, 100%;
        padding: 1em 0 0 0;
        width: 100%;
        border-bottom-right-radius: 250px;
	}


	.ap_kind {  
        display:flex;
		position: relative;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin: 1em auto;
		width: 100%;
	}

	    .ap_kind-div {  
            display:flex;
		    position: relative;
            justify-content: center;
            align-items: center;
            margin-bottom: 0.5em;
            padding: 0.5em 1em;
		    width: auto;
            border-left: solid 0.5px #808080;
            text-align: center;
            color: #808080;
	    }    

	        .ap_kind-div:hover {  
                color: #FFF;
	        }    

	       .ap_kind-div:last-child {  
               border-right: solid 0.5px #808080;
	       }   


	.ap_info {  
        display:flex;
		position: relative;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
        margin: 3em auto;
		width: 100%;
	}

	    .ap_info-r1 {  
            display:flex;
		    position: relative;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
		    width: 100%;
            z-index: 1;
            overflow: hidden;
	    }

	    .ap_info-r1-1 {  
            display: block;
		    position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0, -50%);
            background: rgba(0,0,0, 0.8);
		    width: 25%;
            height: auto;
            z-index: 10;
	    }


	        .ap_info-r1 img, .ap_info-r1-1 img {  
                display:block;
		        position: relative;
		        width: 100%;
	        }

	    .ap_info-r2 {  
            display:flex;
		    position: relative;
            justify-content: space-between;
            align-items: stretch;
            padding: 0 0 0 0;
		    width: 100%;
	    }

	    .ap_info-r2-1 {  
            display: flex;
		    position: relative;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding: 1em;
		    width: 25%;
            background: rgba(0,0,0, 0.8);
	    }

	        .ap_info-title {  
                display:flex;
		        position: relative;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                text-align: center;
	        }

	        .ap_info-txt {  
                display: block;
		        position: relative;
                padding: 0 1em;
                color: #AAAAAA;
                width: 100%;
	        }

	    .ap_info-r2-2 {  
            display:flex;
		    position: relative;
            flex-wrap: wrap;
            justify-content: ;
            align-items: center;
            background: rgba(0,0,0, 0.5);
            padding: 1em;
		    width: 75%;
	    }

	        .ap_info-r2txt {  
                display: flex;
		        position: relative;
                flex-direction: column;
                justify-content: center;
                align-content: center;
                padding: 1.5em 2em 1.5em 1.5em;
                color: #AAAAAA;
                width: 100%;
                height: 100%;
	        }

	            .ap_info-r2txt::before {  
                    content: "";
                    display: block;
                    position: absolute;
                    background: #AAAAAA;
                    width: 50px;
                    height: 1px;
                    top: 0;
                    left: 0;
	            }

	            .ap_info-r2txt::after {  
                    content: "";
                    display: block;
                    position: absolute;
                    background: #AAAAAA;
                    width: 1px;
                    height: 50px;
                    top: 0;
                    left: 0;
	            }

	        .ap_info-r2txt_list {  
                display: block;
		        position: relative;
                margin: 3px 0;
                width: 100%;
                padding-left: 1.4em;
                text-indent: -1.4em;
	        }


	.ap_r2 {  
        display: inline-block;
        position: relative;
        margin: 0 auto;
	}

	.ap_info_light {  
        display:flex;
		position: relative;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin: 3em auto;
		width: 100%;
        background: #484848;
	}


	.ap_r3 {  
        display: inline-block;
        position: relative;
        margin: 0 auto;
        background: url("../../images/pic_ap_r1bg1.png"), url("../../images/pic_ap_r1bg2.png");
        background-position: top center;
        background-repeat: no-repeat, repeat-y;
        background-size: 100%, 100%;
        padding: 1em 0 0 0;
        width: 100%;
        border-bottom-right-radius: 250px;
        border-top-left-radius: 250px;
	}


	.adv_r1 {  
        display: inline-block;
        position: relative;
        margin: 0 auto;
        background: url("../../images/pic_adv_bg1.png"), url("../../images/pic_ap_r1bg2.png");
        background-position: top center, top center;
        background-repeat: no-repeat, repeat-y;
        background-size: 100%, 100%;
        padding: 1em 0 0 0;
        width: 100%;
	}


	.adv_animat {  
        display: flex;
		position: relative;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        background: url("../../images/pic_adv_bg2.png");
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: 100%;
        margin: 3em auto 0 auto;
		width: 100%;
	}

	.adv_trapezoid1 {
        display: inline-block;
        position: relative;
        margin: 0 auto;
  		width: 100%;
  		height: auto;
  		background: linear-gradient(
  		    to right, 
  		    rgba(255, 255, 255, 0.3) 0%,   /* 起點：純白 */
  		    rgba(255, 255, 255, 0.2) 10%,   /* 起點：純白 */
  		    rgba(255, 255, 255, 0) 20%,   /* 起點：純白 */
  		    rgba(255, 255, 255, 0) 50%,  /* 中間：全透明 */
  		    rgba(255, 255, 255, 0) 80%,  /* 中間：全透明 */
  		    rgba(255, 255, 255, 0.2) 90%,  /* 中間：全透明 */
  		    rgba(255, 255, 255, 0.3) 100%  /* 終點：純白 */
  		);
  		clip-path: polygon(0% 100%, 100% 100%, 90% 0%, 10% 0%); /* 定義梯形 */
        z-index: 5;
        /*
        border-top: solid 1px #E71f19;
        border-bottom: solid 1px #E71f19;
        border-image-source: linear-gradient(to right, rgba(231,31,25,0), #E71f19, rgba(231,31,25,0));
        border-image-slice: 1;
        animation: scroll-transparent 3s linear infinite;*/
	}


	.adv_trapezoid1::before,.adv_trapezoid2::before, .adv_trapezoid3::before,
	.adv_trapezoid1::after, .adv_trapezoid2::after, .adv_trapezoid3::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		height: 1.5px; /* 邊框粗細 */
  
		/* 你的漸層語法：兩端透明、中間紅 */
		background: linear-gradient(to right, 
		rgba(231,31,25,0) 0%, 
		#E71f19 50%, 
    	rgba(231,31,25,0) 100%
  	    );
        
  		background-size: 200% 100%;
  		animation: borderFlow 4s linear infinite;
    }


	.adv_trapezoid1::before, .adv_trapezoid2::before, .adv_trapezoid3::before {
        top: 0;
    }

	.adv_trapezoid1::after,.adv_trapezoid2::after,.adv_trapezoid3::after {
        bottom: 0;
        animation-direction: reverse;
    }

    @keyframes borderFlow {
      0%   {background-position: 200% 0;}
      100% {background-position: -200% 0;}
    }


	.adv_trapezoid2 {
        display: inline-block;
        position: relative;
        margin: 0 auto;
  		width: 100%;
  		height: auto;
  		background: linear-gradient(
  		    to right, 
  		    rgba(255, 255, 255, 0.3) 0%,   /* 起點：純白 */
  		    rgba(255, 255, 255, 0.2) 10%,   /* 起點：純白 */
  		    rgba(255, 255, 255, 0) 20%,   /* 起點：純白 */
  		    rgba(255, 255, 255, 0) 50%,  /* 中間：全透明 */
  		    rgba(255, 255, 255, 0) 80%,  /* 中間：全透明 */
  		    rgba(255, 255, 255, 0.2) 90%,  /* 中間：全透明 */
  		    rgba(255, 255, 255, 0.3) 100%  /* 終點：純白 */
  		);
  		clip-path: polygon(0% 100%, 100% 100%, 90% 0%, 10% 0%); /* 定義梯形 */
        border-bottom: solid 1px #E71f19;
        z-index: 5;
	}


	.adv_trapezoid3 {
        display: inline-block;
        position: relative;
        margin: 0 auto;
  		width: 100%;
  		height: auto;
  		background: linear-gradient(
  		    to right, 
  		    rgba(255, 255, 255, 0.3) 0%,   /* 起點：純白 */
  		    rgba(255, 255, 255, 0.2) 10%,   /* 起點：純白 */
  		    rgba(255, 255, 255, 0) 20%,   /* 起點：純白 */
  		    rgba(255, 255, 255, 0) 50%,  /* 中間：全透明 */
  		    rgba(255, 255, 255, 0) 80%,  /* 中間：全透明 */
  		    rgba(255, 255, 255, 0.2) 90%,  /* 中間：全透明 */
  		    rgba(255, 255, 255, 0.3) 100%  /* 終點：純白 */
  		);
  		clip-path: polygon(0% 100%, 100% 100%, 90% 0%, 10% 0%); /* 定義梯形 */
        z-index: 5;
	}


	    .adv_animat_vline {  
            display: block;
            position: relative;
            margin: 3em auto;
            width: 100%;
	    }   

	    .adv_animat_vline-up {  
            display: block;
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 1px;
            height: 50px;
            background: linear-gradient(to bottom, rgba(231,31,25,0),#E71f19,rgba(231,31,25,0));
            background-size: 100% 200%;
            /*background: #E71f19;*/
            animation: vertical-move 2s linear infinite;
            z-index: 1;
	    }    

	        @keyframes vertical-move {
 	           0%   {background-position: 0% 200%;}
 	           100% {background-position: 0% -200%;}
	        }

	    .adv_animat_vline-down {  
            display: block;
            position: absolute;
            bottom: -45px;
            left: 50%;
            transform: translateX(-50%);
            width: 1px;
            height: 70px;
            background: linear-gradient(to bottom, rgba(231,31,25,0),#E71f19,rgba(231,31,25,0));
            background-size: 100% 200%;
            animation: vertical-move 2.5s linear infinite;
            z-index: 1;
	    }    

	    .adv_animat_vline-down1 {  
            display: block;
            position: absolute;
            top: 105%;
            left: 50%;
            transform: translateX(-50%);
            width: 1px;
            height: 200px;
            background: linear-gradient(to bottom, rgba(231,31,25,0),#E71f19,rgba(231,31,25,0));
            background-size: 100% 200%;
            animation: vertical-move 3s linear infinite;
            z-index: 1;
	    }    

	.adv_animat_flex {
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: stretch;
        margin: 1em auto;
        padding: 1em;
  		width: 80%;
        z-index: 9;
	}

	    .adv_animat_flex_div {
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
  		    width: 30%;
	    }

	        .adv_animat_flex_div_tt {
                display: block;
                position: relative;
                padding: 8px 1em;
  		        width: auto;
                background: rgba(0,0,0, 0.7);
                text-align: center;
	        }

	        .adv_animat_flex_div_txt {
                display: block;
                position: relative;
                padding: 10px 1em;
  		        width: 100%;
                text-align: left;
	        }


	.adv_animat_marknote {
        display: flex;
        position: relative;
        justify-content: center;
        margin: 0 auto;
        padding: 1em;
  		width: auto;
        text-align: center;
	}

	    .adv_animat_marknote_mark {
            display: inline-block;
  		    width: 6em;
            text-align: center;
            
		    -moz-animation-name: mark;
		    -moz-animation-duration: 4s;
		    -moz-animation-iteration-count: infinite;
		    -moz-animation-fill-mode: forwards;
		    -webkit-animation-name: mark;
		    -webkit-animation-duration: 4s;
		    -webkit-animation-delay: 0;
		    -webkit-animation-iteration-count: infinite;
		    -webkit-animation-fill-mode: forwards;
		    -ms-animation-name: mark;
		    -ms-animation-duration: 4s;
		    -ms-animation-delay: 0;
		    -ms-animation-iteration-count: infinite;
		    -ms-animation-fill-mode: forwards;
		    -o-animation-name: mark;
		    -o-animation-duration: 4s;
		    -o-animation-delay: 0;
		    -o-animation-iteration-count: infinite;
		    -o-animation-fill-mode: forwards;
		    animation-name: mark;
		    animation-duration: 4s;
		    animation-delay: 0;
		    animation-iteration-count: infinite;
		    animation-fill-mode: forwards; 
	    }

		    @keyframes mark {
			    0%    { transform: translateX(-15px); }
			    50%   { transform: translateX(8px);  }
			    100%  { transform: translateX(-15px); }
		    }


	.adv_animat_cc {
        display: block;
        position: relative;
  		width: 100%;
	}

	    .adv_animat_cc img {
            display: block;
            position: relative;
            mix-blend-mode: multiply;
  		    width: 100%;
            opacity: 0.9;
	    }

	.adv_animat_ccab {
        display: block;
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translate(-50%, 0);
  		width: 100%;
        z-index: 10;
	}

	.adv_animat_cc2 {
        display: inline-block;
        position: relative;
        margin: 0 auto;
  		width: 100%;
        background: #FFF;
        border-top: solid 30px #000;
        background: url("../../images/pic_adv_ccbg2.png");
        background-size: 100%;
        background-position: center top;
        background-repeat: no-repeat;
	}

	    .adv_animat_cc2 img {
            display: block;
            position: relative;
  		    width: 100%;
	    }

	.adv_animat_cc2ab {
        display: block;
        position: relative;
        margin: 0;
  		width: 100%;
        z-index: 10;
	}

	.adv_animat_cc2ab1 {
        display: block;
        position: relative;
        margin: 1em 0 5em 0;
        width: 100%;
	}


	.adv_animat_cc_flex {
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: stretch;
        margin: -15% auto 0 auto;
  		width: 80%;
        z-index: 999;
	}

	    .adv_animat_cc_flex_div {
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            margin-bottom: 2em;
  		    width: 18%;
            color: #AAAAAA;
	    }

	    .adv_animat_cc_flex_divab {
            display: block;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 0);
            width: 100%;
            height: 50%;
            background: #333333;
            z-index: -1;
	    }

	    .adv_animat_cc_flex_pic {
            display: block;
            position: relative;
            width: 100%;
            z-index: 10;
	    }

	        .adv_animat_cc_flex_pic img {
                margin: 0 auto;
                width: 50%;
	        }

	    .adv_animat_cc_flex_tt {
            display: block;
            position: relative;
            padding: 1em 0 0.5em 0;
            background: #333333;
            width: 100%;
            text-align: center;
            z-index: 10;
	    }

	    .adv_animat_cc_flex_txt {
            display: block;
            position: relative;
            padding: 0 1.5em 1.5em 1.5em;
            background: #333333;
            width: 100%;
            z-index: 10;
	    }



	.adv_animat_ww {
        display: block;
        position: relative;
  		width: 100%;
	}


	.adv_animat_weav {
        display: block;
        position: relative;
  		width: 100%;
	}

	    .adv_animat_weav img {
            display: inline-block;
            position: relative;
  		    width: 100%;
	    }

	    .adv_animat_weav1 {
            display: inline-block;
            position: absolute;
  		    width: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            
		    -moz-animation-name: wav1;
		    -moz-animation-duration: 10s;
		    -moz-animation-iteration-count: infinite;
		    -moz-animation-fill-mode: forwards;
		    -webkit-animation-name: wav1;
		    -webkit-animation-duration: 10s;
		    -webkit-animation-delay: 0;
		    -webkit-animation-iteration-count: infinite;
		    -webkit-animation-fill-mode: forwards;
		    -ms-animation-name: wav1;
		    -ms-animation-duration: 10s;
		    -ms-animation-delay: 0;
		    -ms-animation-iteration-count: infinite;
		    -ms-animation-fill-mode: forwards;
		    -o-animation-name: wav1;
		    -o-animation-duration: 10s;
		    -o-animation-delay: 0;
		    -o-animation-iteration-count: infinite;
		    -o-animation-fill-mode: forwards;
		    animation-name: wav1;
		    animation-duration: 10s;
		    animation-delay: 0;
		    animation-iteration-count: infinite;
		    animation-fill-mode: forwards; 
            
		    -webkit-mask-image: linear-gradient(to right, black 25%, transparent 50%);
		    mask-image: linear-gradient(to right, black 25%, transparent 50%);
		    -webkit-mask-size: 400% 100%;
		    mask-size: 400% 100%;      
	    }

		    @keyframes wav1 {
		    0% {
		        -webkit-mask-position: 100% 0; /* 初始隱藏 */
 		     }
		    20% {
		        -webkit-mask-position: 0% 0;   /* 2秒時完全顯現 (8s * 25% = 2s) */
 		    }
 		    55% {
		        -webkit-mask-position: 0% 0;   /* 持續顯示至接近末尾 */
  		        opacity: 1;
            }
 		    95% {
		        -webkit-mask-position: 0% 0;   /* 持續顯示至接近末尾 */
  		        opacity: 1;
            }
  		    100% {
 		        -webkit-mask-position: 0% 0; 
  		        opacity: 0;                    /* 結尾稍微淡出，讓回到 0% 重新開始時更平滑 */
  		      }
		    }

	    .adv_animat_weav2 {
            display: inline-block;
            position: absolute;
  		    width: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 20;
            
		    -moz-animation-name: wav2;
		    -moz-animation-duration: 8s;
		    -moz-animation-iteration-count: infinite;
		    -moz-animation-fill-mode: forwards;
		    -webkit-animation-name: wav2;
		    -webkit-animation-duration: 8s;
		    -webkit-animation-delay: 2s;
		    -webkit-animation-iteration-count: infinite;
		    -webkit-animation-fill-mode: forwards;
		    -ms-animation-name: wav2;
		    -ms-animation-duration: 8s;
		    -ms-animation-delay: 2s;
		    -ms-animation-iteration-count: infinite;
		    -ms-animation-fill-mode: forwards;
		    -o-animation-name: wav2;
		    -o-animation-duration: 8s;
		    -o-animation-delay: 2s;
		    -o-animation-iteration-count: infinite;
		    -o-animation-fill-mode: forwards;
		    animation-name: wav2;
		    animation-duration: 8s;
		    animation-delay: 2s;
		    animation-iteration-count: infinite;
		    animation-fill-mode: forwards;  
         
	    }

		    @keyframes wav2 {
			    0%    {opacity: 0}
			    20%   {opacity: 0;}
			    30%   {opacity: 100%;}
			    50%   {opacity: 0%;}
			    100%  {opacity: 0;}
		    }

	    .adv_animat_weav3 {
            display: inline-block;
            position: absolute;
  		    width: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 40;
            
		    -moz-animation-name: wav3;
		    -moz-animation-duration: 8s;
            -moz-animation-delay: 4s;
		    -moz-animation-iteration-count: infinite;
		    -moz-animation-fill-mode: forwards;
		    -webkit-animation-name: wav3;
		    -webkit-animation-duration: 8s;
		    -webkit-animation-delay: 4s;
		    -webkit-animation-iteration-count: infinite;
		    -webkit-animation-fill-mode: forwards;
		    -ms-animation-name: wav3;
		    -ms-animation-duration: 8s;
		    -ms-animation-delay: 4s;
		    -ms-animation-iteration-count: infinite;
		    -ms-animation-fill-mode: forwards;
		    -o-animation-name: wav3;
		    -o-animation-duration: 8s;
		    -o-animation-delay: 4s;
		    -o-animation-iteration-count: infinite;
		    -o-animation-fill-mode: forwards;
		    animation-name: wav3;
		    animation-duration: 8s;
		    animation-delay: 4s;
		    animation-iteration-count: infinite;
		    animation-fill-mode: forwards; 
	    }

		    @keyframes wav3 {
			    0%    {opacity: 0}
			    30%   {opacity: 0;}
			    40%   {opacity: 100%;}
			    50%   {opacity: 0%;}
			    100%  {opacity: 0;}
		    }


	    .adv_animat_weav4 {
            display: inline-block;
            position: absolute;
  		    width: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 60;
            
		    -webkit-mask-image: linear-gradient(to right, black 25%, transparent 50%);
		    mask-image: linear-gradient(to right, black 25%, transparent 50%);
		    -webkit-mask-size: 400% 100%;
		    mask-size: 400% 100%;
  
		    /* 設定 8 秒動畫，並無限循環 (infinite) */
		    animation: ww4 2s linear infinite;
            
	    }

		@keyframes ww4 {
		    0% {
		        -webkit-mask-position: 100% 0; /* 初始隱藏 */
 		     }
		    25% {
		        -webkit-mask-position: 0% 0;   /* 2秒時完全顯現 (8s * 25% = 2s) */
 		    }
 		    95% {
		        -webkit-mask-position: 0% 0;   /* 持續顯示至接近末尾 */
  		        opacity: 1;
            }
  		    100% {
 		        -webkit-mask-position: 0% 0; 
  		        opacity: 0;                    /* 結尾稍微淡出，讓回到 0% 重新開始時更平滑 */
  		      }
		}




	    .adv_animat_weavnote_icon {
            display: inline-block;
            position: relative;
            margin: 0 auto;
  		    width: 100%;
            text-align: center;
	    }

	        .adv_animat_weavnote_icon img {
                margin: 0 auto;
  		        width: 30px;
	        }

	    .adv_animat_weavnote_tt {
            display: block;
            position: relative;
            margin: 10px 0;
  		    width: 100%;
            text-align: center;
	    }

	    .adv_animat_weavnote_txt {
            display: block;
            position: relative;
            margin: 5px 1em 1em 1em;
  		    width: 100%;
	    }


	    .adv_animat_weavnote1 {
            display: flex;
            position: absolute;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            top: 65%;
            transform: translate(-50%, 0);
  		    width: 15%;
            z-index: 99;
            
		    -moz-animation-name: aw1;
		    -moz-animation-duration: 10s;
		    -moz-animation-iteration-count: infinite;
		    -moz-animation-fill-mode: forwards;
		    -webkit-animation-name: aw1;
		    -webkit-animation-duration: 10s;
		    -webkit-animation-delay: 0;
		    -webkit-animation-iteration-count: infinite;
		    -webkit-animation-fill-mode: forwards;
		    -ms-animation-name: aw1;
		    -ms-animation-duration: 10s;
		    -ms-animation-delay: 0;
		    -ms-animation-iteration-count: infinite;
		    -ms-animation-fill-mode: forwards;
		    -o-animation-name: aw1;
		    -o-animation-duration: 10s;
		    -o-animation-delay: 0;
		    -o-animation-iteration-count: infinite;
		    -o-animation-fill-mode: forwards;
		    animation-name: aw1;
		    animation-duration: 10s;
		    animation-delay: 0;
		    animation-iteration-count: infinite;
		    animation-fill-mode: forwards; 
	    }

	    .adv_animat_weavnote2 {
            display: block;
            position: absolute;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            top: 44.5%;
            left: ;
            transform: translate(-50%, 0);
  		    width: 15%;
            z-index: 99;
            
		    -moz-animation-name: aw2;
		    -moz-animation-duration: 10s;
		    -moz-animation-iteration-count: infinite;
		    -moz-animation-fill-mode: forwards;
		    -webkit-animation-name: aw2;
		    -webkit-animation-duration: 10s;
		    -webkit-animation-delay: 0;
		    -webkit-animation-iteration-count: infinite;
		    -webkit-animation-fill-mode: forwards;
		    -ms-animation-name: aw2;
		    -ms-animation-duration: 10s;
		    -ms-animation-delay: 0;
		    -ms-animation-iteration-count: infinite;
		    -ms-animation-fill-mode: forwards;
		    -o-animation-name: aw2;
		    -o-animation-duration: 10s;
		    -o-animation-delay: 0;
		    -o-animation-iteration-count: infinite;
		    -o-animation-fill-mode: forwards;
		    animation-name: aw2;
		    animation-duration: 10s;
		    animation-delay: 0;
		    animation-iteration-count: infinite;
		    animation-fill-mode: forwards;    
	    }


	    .adv_animat_weavnote3 {
            display: block;
            position: absolute;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            top: 65%;
            left: ;
            transform: translate(-50%, 0);
  		    width: 15%;
            z-index: 99;
            
		    -moz-animation-name: aw3;
		    -moz-animation-duration: 10s;
		    -moz-animation-iteration-count: infinite;
		    -moz-animation-fill-mode: forwards;
		    -webkit-animation-name: aw3;
		    -webkit-animation-duration: 10s;
		    -webkit-animation-delay: 0;
		    -webkit-animation-iteration-count: infinite;
		    -webkit-animation-fill-mode: forwards;
		    -ms-animation-name: aw3;
		    -ms-animation-duration: 10s;
		    -ms-animation-delay: 0;
		    -ms-animation-iteration-count: infinite;
		    -ms-animation-fill-mode: forwards;
		    -o-animation-name: aw3;
		    -o-animation-duration: 10s;
		    -o-animation-delay: 0;
		    -o-animation-iteration-count: infinite;
		    -o-animation-fill-mode: forwards;
		    animation-name: aw3;
		    animation-duration: 10s;
		    animation-delay: 0;
		    animation-iteration-count: infinite;
		    animation-fill-mode: forwards;    
	    }

	    .adv_animat_weavnote4 {
            display: block;
            position: absolute;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            top: 45%;
            left: ;
            transform: translate(-50%, 0);
  		    width: 15%;
            z-index: 99;
            
		    -moz-animation-name: aw4;
		    -moz-animation-duration: 10s;
		    -moz-animation-iteration-count: infinite;
		    -moz-animation-fill-mode: forwards;
		    -webkit-animation-name: aw4;
		    -webkit-animation-duration: 10s;
		    -webkit-animation-delay: 0;
		    -webkit-animation-iteration-count: infinite;
		    -webkit-animation-fill-mode: forwards;
		    -ms-animation-name: aw4;
		    -ms-animation-duration: 10s;
		    -ms-animation-delay: 0;
		    -ms-animation-iteration-count: infinite;
		    -ms-animation-fill-mode: forwards;
		    -o-animation-name: aw4;
		    -o-animation-duration: 10s;
		    -o-animation-delay: 0;
		    -o-animation-iteration-count: infinite;
		    -o-animation-fill-mode: forwards;
		    animation-name: aw4;
		    animation-duration: 10s;
		    animation-delay: 0;
		    animation-iteration-count: infinite;
		    animation-fill-mode: forwards; 
	    }


	    .adv_animat_weavnote5 {
            display: block;
            position: absolute;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            top: 65%;
            left: 85%;
            transform: translate(-50%, 0);
  		    width: 15%;
            z-index: 99;
            
		    -moz-animation-name: aw5;
		    -moz-animation-duration: 10s;
		    -moz-animation-iteration-count: infinite;
		    -moz-animation-fill-mode: forwards;
		    -webkit-animation-name: aw5;
		    -webkit-animation-duration: 10s;
		    -webkit-animation-delay: 0;
		    -webkit-animation-iteration-count: infinite;
		    -webkit-animation-fill-mode: forwards;
		    -ms-animation-name: aw5;
		    -ms-animation-duration: 10s;
		    -ms-animation-delay: 0;
		    -ms-animation-iteration-count: infinite;
		    -ms-animation-fill-mode: forwards;
		    -o-animation-name: aw5;
		    -o-animation-duration: 10s;
		    -o-animation-delay: 0;
		    -o-animation-iteration-count: infinite;
		    -o-animation-fill-mode: forwards;
		    animation-name: aw5;
		    animation-duration: 10s;
		    animation-delay: 0;
		    animation-iteration-count: infinite;
		    animation-fill-mode: forwards;
	    }


		    @keyframes aw1 {
			    0%    {left: 11%; opacity: 0}
			    10%   {left: 11%; opacity: 0}
			    20%   {left: 16%; opacity: 1;}
			    95%   {left: 16%; opacity: 1;}
			    100%  {left: 16%; opacity: 0;}
		    }

		    @keyframes aw2 {
			    0%    {left: 28%; opacity: 0}
			    20%   {left: 28%; opacity: 0}
			    30%   {left: 33%; opacity: 1;}
			    95%   {left: 33%; opacity: 1;}
			    100%  {left: 33%; opacity: 0;}
		    }

		    @keyframes aw3 {
			    0%    {left: 45%; opacity: 0}
			    30%   {left: 45%; opacity: 0}
			    40%   {left: 50.5%; opacity: 1;}
			    95%   {left: 50.5%; opacity: 1;}
			    100%  {left: 50.5%; opacity: 0;}
		    }

		    @keyframes aw4 {
			    0%    {left: 62%; opacity: 0}
			    40%   {left: 62%; opacity: 0}
			    50%   {left: 67%; opacity: 1;}
			    95%   {left: 67%; opacity: 1;}
			    100%  {left: 67%; opacity: 0;}
		    }

		    @keyframes aw5 {
			    0%    {left: 80%; opacity: 0}
			    50%   {left: 80%; opacity: 0}
			    60%   {left: 85%; opacity: 1;}
			    95%   {left: 85%; opacity: 1;}
			    100%  {left: 85%; opacity: 0;}
		    }



	.adv_animat_final {
        display: block;
        text-align: center;
        margin: 5em auto 0 auto;
        width: fit-content;
        padding: 10px 20px;
        border-bottom: solid 2px transparent;
        border-image: linear-gradient(to right, #FFFFFF 0%, #E71f19 30%, #E71f19 70%, #FFFFFF 100%);
        border-image-slice: 1;
        width: 80%;
	}


	.pro_a2 {
        display: block;
        position: relative;
        padding: 1em 0;
        background: linear-gradient(to right, #FFFFFF 0%, #9fa0a0 10%);
        width: 100%
	}

	    .pro_flex {
            display: flex;
            position: relative;
            justify-content: flex-start;
            align-items: stretch;
            margin: 1em auto 0 auto;
            width: 100%;
	    }

	        .pro_flex_L {
                display: flex;
                position: relative;
                justify-content: space-between;
                align-items: stretch;
                width: 30%;
                border-bottom: 4px solid transparent;
                border-image: linear-gradient(to right, #9fa0a0 0%, #E71f19 30%, #E71f19 70%, #9fa0a0 100%);
                border-image-slice: 1;
	        }

	            .pro_flex_L img {
                    display: block;
                    position: relative;
                    width: 100%;
	            }

	            .pro_flex_L_ab {
                    display: block;
                    position: absolute;
                    width: 100%;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 100;
                    text-align: center;
	            }

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

	            .pro_flex_R-div {
                    display: flex;
                    position: relative;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: stretch;
                    width: 32%;
	            }

	                .pro_flex_R-div-name {
                        display: block;
                        position: relative;
                        padding: 0.2em 1em;
                        width: 100%;
                        text-align: center;
	               }

	                .pro_flex_R-div img {
                        display: block;
                        position: relative;
                        width: 100%;
	               }


	            /*-- pro slick設定 --*/
	            .proslick {
		            display: block;
		            position: relative;
                    padding: 3em 3em 3em 0;
		            width: 100%;
	            }


	    .pro_note {
            display: block;
            position: relative;
            margin: 2em 0;
            padding: 2em 2em 2em 10%;
            width: 100%;
            background: #4d4d4d;
	    }

	        .pro_note_title {
                display: block;
                position: relative;
                margin-bottom: 10px;
                width: 95%;
	        }

	        .pro_note_txt {
                display: block;
                position: relative;
                width: 95%;
	        }


	.rd_a1 {  
        display: inline-block;
        position: relative;
        margin: 0 auto;
        background: url("../../images/pic_adv_bg1.png"), url("../../images/pic_ap_r1bg2.png");
        background-position: top center, top center;
        background-repeat: no-repeat, repeat-y;
        background-size: 100%, 100%;
        margin: 0 0 1em 0;
        padding: 1em 0 5em 0;
        width: 100%;
	}

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

	    .rd_a2-div_L {
            display: block;
            position: relative;
            width: 50%;
            border-top: solid 1.5px #E71f19;
            border-right: solid 1.5px #E71f19;
            border-top-right-radius: 500px;
            z-index: 5;
	    }

	    .rd_a2-div_R {
            display: block;
            position: relative;
            width: 50%;
            border-top: solid 1.5px #E71f19;
            border-left: solid 1.5px #E71f19;
            border-top-left-radius: 500px;
            z-index: 5;
	    }

	        .rd_a2-div_L img {
                display: block;
                position: relative;
                width: 100%;
                border-top-right-radius: 500px;
	        }

	        .rd_a2-div_R img {
                display: block;
                position: relative;
                width: 100%;
                border-top-left-radius: 500px;
	        }

	        .rd_a2-divab_r {
                display: block;
                position: absolute;
                height: 100%;
                bottom: 0;
                left: 50%;
                width: 2px;
                height: 110%;
                transform: translate(-50%, 0);
                border-left: 2px solid transparent;
                border-image: linear-gradient(to top, #E71f19 30%, rgba(255,255,255,0) 100%);
                border-image-slice: 1;
                z-index: 100;
	        }

	        .rd_a2-divab {
                display: block;
                position: absolute;
                height: 100%;
                bottom: 0;
                left: 50%;
                transform: translate(-50%, 0);
	        }

	        .ray {
	            position: absolute;
	            bottom: 0;
	            left: 0;
	            width: 2px;
	            height: 0;
	            opacity: 0;
	            background: linear-gradient(to top, #E71f19, rgba(255,0,0,0));
	            transform-origin: bottom center;
	            animation: grow-fade-ray 2s ease-in-out infinite;
	        }

	        .ray:nth-child(2)   { transform: rotate(-20deg); animation-delay: 0s;   }
	        .ray:nth-child(3)   { transform: rotate(-18deg); animation-delay: 0.1s; }
	        .ray:nth-child(4)   { transform: rotate(-16deg); animation-delay: 0.3s; }
	        .ray:nth-child(5)   { transform: rotate(-14deg); animation-delay: 0.2s; }
	        .ray:nth-child(6)   { transform: rotate(-12deg); animation-delay: 0.3s; }
	        .ray:nth-child(7)   { transform: rotate(-10deg); animation-delay: 1.4s; }
	        .ray:nth-child(8)   { transform: rotate(-8deg);  animation-delay: 0.2s; }
	        .ray:nth-child(9)   { transform: rotate(-6deg);  animation-delay: 0.3s; }
	        .ray:nth-child(10)  { transform: rotate(-4deg);  animation-delay: 0s;   }
	        .ray:nth-child(11)  { transform: rotate(-2deg);  animation-delay: 1.9s; }
	        .ray:nth-child(12)  { transform: rotate(0deg);   animation-delay: 0.2s; }
	        .ray:nth-child(13)  { transform: rotate(2deg);   animation-delay: 0s;   }
	        .ray:nth-child(14)  { transform: rotate(4deg);   animation-delay: 0.2s; }
	        .ray:nth-child(15)  { transform: rotate(6deg);   animation-delay: 1.2s; }
	        .ray:nth-child(16)  { transform: rotate(8deg);   animation-delay: 0.5s; }
	        .ray:nth-child(17)  { transform: rotate(10deg);  animation-delay: 0.2s; }
	        .ray:nth-child(18)  { transform: rotate(12deg);  animation-delay: 0s;   }
	        .ray:nth-child(19)  { transform: rotate(14deg);  animation-delay: 1.2s; }
	        .ray:nth-child(20)  { transform: rotate(16deg);  animation-delay: 0.3s; }
	        .ray:nth-child(22)  { transform: rotate(18deg);  animation-delay: 0.4s; }
	        .ray:nth-child(23)  { transform: rotate(20deg);  animation-delay: 0.6s; }
      

	        @keyframes grow-fade-ray {
	             0% {height: 0; opacity: 0;}
	            30% {height: 110%; opacity: 1;}
 	           100% {height: 110%; opacity: 0;}
	        }

	        .rd_a2-rd_icon {
                display: block;
                position: absolute;
                bottom: -30px;
                left: 50%;
                width: 150px;
                transform: translate(-50%, 0);
                z-index: 100;
	        }

	        .rd_a2-rd_icon img {
                display: block;
                width: 100%;
	        }


	.rd_a3 {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        margin: 3em auto;
        width: 70%;
	}

	#rd_note {
        font-size: 1.1em;
        color: #AAAAAA;
	}

	.rd_cadslickbg {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        margin: 2em auto;
        width: 70%;
	}

	    .rd_cadslickbg img {
            display: block;
            position: relative;
            width: 100%;
	    }

	.rd_cadslic {
        display: block;
        position: absolute;
        top: 7%;
        left: 50%;
        transform: translate(-50%,0%);
        width: 42%;
        z-index: 999;
	}

	    .rd_cadslic-pic {
            display: block;
            width: 100%;
            height: 100%;
            z-index: 9999;
	    }
	    .rd_cadslic-pic img {
            display: block;
            width: 100%;
	    }


	.DFM {
        display: block;
        position: relative;
        margin: 0 auto;
        width: 390px;
        text-align: center;
        border: solid 1px #E71f19;
        
		-moz-animation-name: DF;
		-moz-animation-duration: 2s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: DF;
		-webkit-animation-duration: 2s;
		-webkit-animation-delay: 0;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: DF;
		-ms-animation-duration: 2s;
		-ms-animation-delay: 0;
		-ms-animation-iteration-count: infinite;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: DF;
		-o-animation-duration: 2s;
		-o-animation-delay: 0;
		-o-animation-iteration-count: infinite;
		-o-animation-fill-mode: forwards;
		animation-name: DF;
		animation-duration: 2s;
		animation-delay: 0;
		animation-iteration-count: infinite;
		animation-fill-mode: forwards;   
	}

	        @keyframes DF {
	             0% {width: 390px;}
	            50% {width: 420px;}
 	           100% {width: 390px;}
	        }


		.DFM-t {
       	 	display: block;
        	position: relative;
        	margin: -10px auto 0.3em auto;
            background: url("../../images/pic_ap_r1bg2.png");
       	 	width: 70%;
        	text-align: center;
        	z-index: 999;
		}

		.DFM-t2 {
       	 	display: block;
        	position: relative;
        	margin: 10px auto -10px auto;
            background: url("../../images/pic_ap_r1bg2.png");
       	 	width: 70%;
        	text-align: center;
        	z-index: 999;
		}


	.qc_r1 {  
        display: inline-block;
        position: relative;
        margin: 0 auto;
        background: url("../../images/pic_adv_bg1.png"), url("../../images/pic_ap_r1bg2.png");
        background-position: top center, top center;
        background-repeat: no-repeat, repeat-y;
        background-size: 100%, 100%;
        padding: 1em 0 0 0;
        width: 100%;
	}


	.qcslick {  
        display: block;
        position: relative;
        margin: 2em auto;
        padding: 0 1em;
        width: 90%;
	}

	    .qcslick-div {  
            display: block;
            position: relative;
	    }

	        .qcslick-div img {  
                display: block;
                position: relative;
                width: 100%;
	        }

	        .qcslick-div::after {  
                content: " ";
                display: block;
                position: absolute;
                top: 120px;
                right: -2.8em;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 8px 0 8px 10px;
                border-color: transparent transparent transparent #ff0000;
	        }

	    .qcslick-div-pic {  
            display: block;
            position: relative;
            background: #bebebe;
	    }


	    .qcslick-div-name {  
            display: flex;
            position: relative;
            justify-content: center;
            align-items: center;
            background: rgba(100,100,100, 0.5);
            padding: 0.5em;
            text-align: center;
            height: 4em;
	    }

	    .qcslick-div-txt {  
            display: block;
            position: relative;
            padding: 0.5em 0;
            text-align: left;
	    }


	.qcani {  
        display: block;
        position: relative;
        margin: 2em auto 0 auto;
        padding: 0;
        width: 100%;
	}

	    .qcani img {  
            display: block;
            width: 100%;
	    }

	.qcaniab1 {  
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50%, -50%);
        width: 100%;
        z-index: 2;
	}


	.qcaniab2 {  
        display: block;
        position: absolute;
        height: 80%;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 99;
	}

	        .qcray {
	            position: absolute;
	            bottom: 27.65%;
	            left: 2px;
	            width: 2px;
	            height: 0;
	            opacity: 0;
	            transform-origin: bottom center;
	            animation: grow-fade-qcray 1.5s ease-in-out infinite;
	        }

	        @keyframes grow-fade-qcray {
	             0% {height: 80%; opacity: 1; background: linear-gradient(to top, rgba(255,0,0,0) 40%, #E71f19 100%);}
	            50% {height: 40%; opacity: 1; background: linear-gradient(to top, rgba(255,0,0,0) 60%, #E71f19 100%);}
	            50% {height: 20%; opacity: 1; background: linear-gradient(to top, rgba(255,0,0,0) 90%, #E71f19 100%);}
	            50% {height:  0%; opacity: 1; background: linear-gradient(to top, rgba(255,0,0,0) 90%, #E71f19 100%);}
	        }

	        .qcray:nth-child(2) { transform: rotate(-52.5deg);  animation-delay: 0s; }
	        .qcray:nth-child(3) { transform: rotate(-39.5deg);  animation-delay: 0s; }
	        .qcray:nth-child(4) { transform: rotate(-23deg);  animation-delay: 0s; }
	        .qcray:nth-child(5)  { transform: rotate(0deg);    animation-delay: 0s; }
	        .qcray:nth-child(6)  { transform: rotate(24deg);   animation-delay: 0s; }
	        .qcray:nth-child(7)  { transform: rotate(40deg);   animation-delay: 0s; }
	        .qcray:nth-child(8)  { transform: rotate(55deg);   animation-delay: 0s; }
	        .qcray:nth-child(9)  { transform: rotate(-23deg);  animation-delay: 0s; }


	.qcaniab3 {  
        display: block;
        position: absolute;
        bottom: 3%;
        left: 50%;
        transform: translate(-50%, 0);
        width: 80%;
        text-align: center;
        z-index: 1000;
	}

	    .qcaniab3 > * {  
            margin-top: 0.5em;
            text-shadow: 2px 2px 5px #000;
	    }



	.qc_qcani {  
        display: block;
        position: relative;
        width: 100%;
        overflow-x: hidden;
	}


	.qc_qcani-aniray {  
        display: block;
        position: relative;
        margin: 0 auto;
        width: 100%;
        z-index: 99;
	}

	.qc_qcani-pic {  
        display: block;
        position: relative;
        margin: 0 auto;
        width: 38%;
        z-index: 99;
        overflow: hidden;
	}

	    .qc_qcani-picab {  
            display: block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            z-index: 100;
            transition: top 1s ease-in-out;
            animation: upDown 5s ease-in-out infinite alternate;
	    }

	       @keyframes upDown {
  	          0%   { top: 35%; }
   	          25%  { top: 65%; }
   	          50%  { top: 55%; }
   	          75%  { top: 35%; }
   	          100% { top: 35%; }
	       }

	    .qc_qcani-picab1 {  
            display: block;
            position: absolute;
            bottom: 0;
            left: 0%;
            transform: translateX(0%);
            width: 100%;
            z-index: 40;
            animation: trun 10s linear infinite;
            transform-origin: center center; /* 或 50% 50% */
	    }

	       @keyframes trun {
  	          from { transform: rotate(0deg); }
              to { transform: rotate(720deg); }
	       }



	    .qc_qcani-picno {  
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            z-index: 50;
	    }

	    .qc_qcani-pic-txt {  
            display: block;
            position: absolute;
            bottom: 13%;
            left: 50%;
            transform: translateX(-50%);
            width: 22%;
            text-align: center;
            z-index: 100;
	    }

	    .qc_qcani-pic img, .qc_qcani-picab img {  
            display: block;
            position: relative;
            width: 100%;
	    }

	.qc_qcani-pic_tt {  
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 300;
        color: #FFF;
	}


	.qc_qcani-flexarea {  
        display: block;
        position: absolute;
        bottom: 3em;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -30%);
        width: 100%;
	}

	.qc_qcani-flex1 {  
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: stretch;
        width: 100%;
        background: #e5e5e5;
	}

	.qc_qcani-flex2 {  
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: stretch;
        width: 100%;
	}

        .qc_qcani-flex-div1 {  
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            padding: 1.5em 1em 1.5em 4em;
            width: 31%;
        }

        .qc_qcani-flex-div2 {  
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            padding: 1em 2em;
            width: 31%;
        }

        .qc_qcani-flex-div3 {  
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            padding: 1.5em 4em 1.5em 1em;
            width: 31%;
        }

            .qc_qcani-flex-div-no {  
                display: none;
                width: auto;
            }

            .qc_qcani-flex-div-tt {  
                display: block;
                margin-bottom: 5px;
                width: 100%;
            }

            .qc_qcani-flex-div-txt {  
                display: block;
                text-align: left;
                width: 100%;
            }



	.qc_test {  
        display: block;
        position: relative;
        background-image: url("../../images/pic_qc_test.png");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        margin: -3em auto 0 auto;
        padding: 3em 0;
        width: 100%;
	}

	.qc_flex1 {  
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        width: 100%;
	}

	    .qc_flex1-div {  
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding-bottom: 1em;
            width: 50%;
	    }


	.qc_flex2 {  
        display: flex;
        position: relative;
        justify-content: flex-start;
        align-items: stretch;
        margin: 1em auto 3em auto;
        width: 100%;
	}

	    .qc_flex2-div {  
            display: flex;
            position: relative;
            justify-content: flex-start;
            align-items: center;
            background: #AAAAAA;
            border-radius: 50%;
            margin-right: 3em;
            width: 9%;
            z-index: 10;
	    }

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

	        .qc_flex2-div-line {  
               position: absolute;
               top: 77%;
               left: 0;
               transform: translateY(-50%);
            }
	        
	        .qc_flex2-div-line img {  
                display: block;
                width: 100%;
	        }

	.qc_flex3 {  
        display: flex;
        position: relative;
        margin: 0 0 0.7em 0;
        justify-content: flex-start;
        align-items: stretch;
        width: 100%;
	}

	    .qc_flex3-div-L {  
            display: flex;
            position: relative;
            justify-content: space-between;
            align-items: flex-start;
            flex-basis: 9em;
	    }

	    .qc_flex3-div-R {  
            display: flex;
            position: relative;
            justify-content: flex-start;
            align-items: center;
            flex: 1; /* 讓它佔滿剩餘空間 */
	    }


	.qc_sellsev {  
        display: block;
        position: relative;
        background-image: url("../../images/pic_qc_sellsev.png");
        background-repeat: repeat-y;
        background-position: center top;
        background-size: 100%;
        margin: 1.5em 0;
        padding: 1em 0 2em 0;
        width: 100%;
	}

	.qc_sellsev::before {  
          content: "";
          position: absolute;
          top: 0;       /* 放在元素下方 */
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-left: 300px solid transparent;
          border-right: 300px solid transparent;
          border-top: 170px solid #FFF; /* 控制三角形的朝向與顏色 */
	}

	.qc_sellsev::after {  
          content: "";
          position: absolute;
          bottom: 0;       
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-left: 300px solid transparent;
          border-right: 300px solid transparent;
          border-bottom: 170px solid #FFF; 
	}


	.qc_sellsev_icon {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30%;
        z-index: 1;
	}  

	    .qc_sellsev_icon img {
            display: block;
            width: 100%;
	    }  


	.qc_sellsev_flex {
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: stretch;
        width: 100%;
        z-index: 10;
	}  

	    .qc_sellsev_flex-div1 {
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            width: 33%;
            padding-left: 3%;
	    }  

	    .qc_sellsev_flex-div2 {
            display: block;
            position: relative;
            width: 33%;
	    }  

	    .qc_sellsev_flex-div3 {
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            width: 33%;
            padding-right: 3%;
	    }  


	    .qc_sellsev_d1flex1-div1 {
            display: flex;
            position: relative;
            justify-content: space-between;
            align-items: center;
            margin: 1em 0;
            width: 100%;
            background: #bebebe;
            border-left: solid 3px #E71f19;
            padding: 1.5em 2em 1.5em 0;
	    }  

	    .qc_sellsev_d1flex1-div2 {
            display: flex;
            position: relative;
            justify-content: space-between;
            align-items: stretch;
            margin: 1.5em 0;
            width: 100%;
            background: #e5e5e5;
            border-left: solid 3px #E71f19;
            padding: 1.5em 2em 1.5em 0;
	    }  

	        .qc_sellsev_d1flex1-div1_L {
                display: flex;
                position: relative;
                justify-content: center;
                align-items: center;
                padding: 0 1em;
                width: 8em;
                line-height: 130%;
	        }  

	        .qc_sellsev_d1flex1-div1_R {
                display: flex;
                position: relative;
                justify-content: center;
                align-items: center;
                flex: 1;
	        }  


	.company_r1 {  
        display: inline-block;
        position: relative;
        margin: 0 auto;
        background: url("../../images/pic_compnay_bg.png");
        background-position: top left;
        background-repeat: repeat-x;
        background-size: contain;
        padding: 1em 0 0 0;
        width: 100%;
	}


	.companyani {  
        display: block;
        position: relative;
        width: 100%;
        overflow: hidden;
	}

	    .companyani img {  
            display: block;
            position: relative;
            width: 100%;
	    }


	.companyani1 {  
        display: block;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        z-index: 1;
        
        opacity: 0;
  
        /* 柔和遮罩設定 */
        -webkit-mask-image: linear-gradient(to right, 
            transparent, 
            black calc(50% - var(--p)), 
                    black calc(50% + var(--p)), 
            transparent
        );
        mask-image: linear-gradient(to right, 
            transparent, 
            black calc(50% - var(--p)), 
            black calc(50% + var(--p)), 
            transparent
        );
  
        /* 定義動畫：總長 7 秒 */
        animation: expand-logic 7s linear infinite;
        
	}

        @keyframes expand-logic {
          0% {
            opacity: 0;
            --p: 0%;
          }
            
          15% {
            opacity: 0.1;
            --p: 1%;
          }
            
          40% {
            opacity: 1;
            --p: 100%;
          }
            
          95% {
            opacity: 1;
            --p: 100%;
          }
            
          100% {
            opacity: 0;
            --p: 0%;
          }  
            
        }

        /* 為了讓 CSS 變數能跑動畫，需要註冊變數 (Chrome 支援度高) */
        @property --p {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 0%;
        }


	.companyani2 {  
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        z-index: 10;
        
		-moz-animation-name: ccani2;
		-moz-animation-duration: 7s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: ccani2;
		-webkit-animation-duration: 7s;
		-webkit-animation-delay: 0;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: ccani2;
		-ms-animation-duration: 7s;
		-ms-animation-delay: 0;
		-ms-animation-iteration-count: infinite;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: ccani2;
		-o-animation-duration: 7s;
		-o-animation-delay: 0;
		-o-animation-iteration-count: infinite;
		-o-animation-fill-mode: forwards;
		animation-name: ccani2;
		animation-duration: 7s;
		animation-delay: 0;
		animation-iteration-count: infinite;
		animation-fill-mode: forwards;       
	}

	       @keyframes ccani2 {
  	          0%   { opacity: 0; }
  	          10%  { opacity: 0; }
  	          15%  { opacity: 1; }
  	          20%  { opacity: 0; }
  	          95%  { opacity: 0; }
   	          100% { opacity: 0; }
	       }



	.companyani3 {  
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        z-index: 10;
        
		-moz-animation-name: ccani3;
		-moz-animation-duration: 7s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: ccani3;
		-webkit-animation-duration: 7s;
		-webkit-animation-delay: 0;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: ccani3;
		-ms-animation-duration: 7s;
		-ms-animation-delay: 0;
		-ms-animation-iteration-count: infinite;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: ccani3;
		-o-animation-duration: 7s;
		-o-animation-delay: 0;
		-o-animation-iteration-count: infinite;
		-o-animation-fill-mode: forwards;
		animation-name: ccani3;
		animation-duration: 7s;
		animation-delay: 0;
		animation-iteration-count: infinite;
		animation-fill-mode: forwards;       
	}

	       @keyframes ccani3 {
  	          0%   { opacity: 0; }
  	          20%  { opacity: 0; }
  	          25%  { opacity: 1; }
  	          95%  { opacity: 1; }
   	          100% { opacity: 0; }
	       }


	.companyani4 {  
        display: block;
        position: absolute;
        width: 100%;
        z-index: 10;
        
		-moz-animation-name: ccani4;
		-moz-animation-duration: 7s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name:ccani4;
		-webkit-animation-duration: 7s;
		-webkit-animation-delay: 0;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: ccani4;
		-ms-animation-duration: 7s;
		-ms-animation-delay: 0;
		-ms-animation-iteration-count: infinite;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: ccani4;
		-o-animation-duration: 7s;
		-o-animation-delay: 0;
		-o-animation-iteration-count: infinite;
		-o-animation-fill-mode: forwards;
		animation-name: ccani4;
		animation-duration: 7s;
		animation-delay: 0;
		animation-iteration-count: infinite;
		animation-fill-mode: forwards;       
	}

	       @keyframes ccani4 {
  	          0%   { opacity: 0; transform: rotate(200deg);}
  	          20%  { opacity: 0; transform: rotate(200deg);}
  	          40%  { opacity: 1; transform: rotate(360deg);}
  	          95%  { opacity: 1; transform: rotate(360deg);}
   	          100% { opacity: 0; transform: rotate(360deg);}
	       }


	.companyani5 {  
        display: block;
        position: absolute;
        width: 100%;
        z-index: 10;
        
		-moz-animation-name: ccani5;
		-moz-animation-duration: 7s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: ccani5;
		-webkit-animation-duration: 7s;
		-webkit-animation-delay: 0;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: ccani5;
		-ms-animation-duration: 7s;
		-ms-animation-delay: 0;
		-ms-animation-iteration-count: infinite;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: ccani5;
		-o-animation-duration: 7s;
		-o-animation-delay: 0;
		-o-animation-iteration-count: infinite;
		-o-animation-fill-mode: forwards;
		animation-name: ccani5;
		animation-duration: 7s;
		animation-delay: 0;
		animation-iteration-count: infinite;
		animation-fill-mode: forwards;       
	}

	       @keyframes ccani5 {
  	          0%   { opacity: 0; }
  	          40%  { opacity: 0; }
  	          60%  { opacity: 1; }
  	          95%  { opacity: 1; }
   	          100% { opacity: 0; }
	       }



    .timeline-slider {
        display: block;
        position: relative;
        margin: 1em auto;
        width: 85%;
    }

	    .timeline_line { 
            display: block;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, 0);
            width: 1px;
            height: 100%;
            border-left: solid 2px #E71f19;
            z-index: 5;
	    }

	    .timeline_point { 
            display: block;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, 0);
            width: 25px;
            height: 25px;
            border-radius: 30px;
            background: #E71f19;
            z-index: 5;
	    }

	    .timestory_flex { 
            display: flex;
            position: relative;
            justify-content: space-between;
            align-items: stretch;
            margin: 0 auto 0.5m auto;
            width: 100%;
            z-index: 1;
	    }

	    .timestory_flex-div-le { 
            display: flex;
            position: relative;
            justify-content: flex-end;
            flex-direction: column;
            width: 50%;
	    }

	    .timestory_flex-div-pp { 
            display: flex;
            position: absolute;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            top: 80px;
            left: 50%;
            transform: translate(-50%, 0);
            width: 16px;
            height: 16px;
            background: #E71f19;
	    }

	    .timestory_flex-div-rt { 
            display: flex;
            position: relative;
            flex-direction: column;
            width: 50%;
	    }

	    /* 主要外框容器 */
	    .milestone-card {
            display: flex;
            position: relative;
            justify-content: space-between;
            align-items: stretch;
            border-top: 1px solid #808080; 
            border-bottom: 1px solid #808080; 
            border-left: 1px solid #808080; 
            padding: 0 2em 0 0;
            width: 100%;
            box-sizing: border-box;
	    }

	    /* 頂部紅色橫線 */
	    .milestone-card::before {
            content: "";
            position: absolute;
            top: -1px; /* 覆蓋原本的灰線 */
            left: -1px;
            right: 0;
            height: 2px;
            background-color: #E71f19;
            z-index: 1;
	    }

	    /* 左側紅色半截直線 */
	    .milestone-card::after {
            content: "";
            position: absolute;
            top: -1px;
            left: -1px;
            width: 2px;
            height: 50%; /* 視覺上大約佔整體高度的一半 */
            background-color: #E71f19;
            z-index: 1;
	    }

	    /* 主要外框容器 */
	    .milestone-card1 {
            display: flex;
            position: relative;
            justify-content: space-between;
            align-items: stretch;
            border-top: 1px solid #808080; 
            border-bottom: 1px solid #808080; 
            border-right: 1px solid #808080; 
            padding: 0 0 0 2em;
            width: 100%;
            box-sizing: border-box;
	    }

	    /* 頂部紅色橫線 */
	    .milestone-card1::before {
            content: "";
            position: absolute;
            top: -1px; /* 覆蓋原本的灰線 */
            left: -1px;
            right: 0;
            height: 2px;
            background-color: #E71f19;
            z-index: 1;
	    }

	    /* 右側紅色半截直線 */
	    .milestone-card1::after {
            content: "";
            position: absolute;
            top: -1px;
            right: -1px;
            width: 2px;
            height: 50%; /* 視覺上大約佔整體高度的一半 */
            background-color: #E71f19;
            z-index: 1;
	    }

        .year1 {
            padding: 0.5em;
            font-weight: bold;
            color: #96694c;
            text-align: right;
        }

        .year2 {
            padding: 0.5em;
            font-weight: bold;
            color: #96694c;
            text-align: left;
        }

        .year3 {
            padding: 0.5em;
            font-weight: bold;
            text-align: center;
        }

        .time-icon1 {
            display: block;
            position: relative;
            width: 25%;
        }

            .time-icon1 img {
                display: block;
                position: absolute;
                top: -2%;
                left: -15%;
                width: 100%;
                z-index: 1115;
            }

        .time-icon2 {
            display: block;
            position: relative;
            width: 25%;
        }

            .time-icon2 img {
                display: block;
                position: absolute;
                top: 15%;
                left: 22%;
                width: 100%;
                z-index: 1115;
            }

        .time-icon3 {
            display: block;
            position: relative;
            width: 25%;
        }

            .time-icon3 img {
                display: block;
                position: absolute;
                top: -11%;
                left: -16%;
                width: 100%;
                z-index: 1115;
            }

        .time-icon4 {
            display: block;
            position: relative;
            width: 25%;
        }

            .time-icon4 img {
                display: block;
                position: absolute;
                top: 50%;
                left: 80%;
                transform: translate(-50%, -50%);
                width: 100%;
                z-index: 1115;
            }

        .desc1 {
            display: flex;
            position: relative;
            flex-direction: column;
            padding: 0;
            justify-content: flex-start;
            padding: 1em 0;
            width: 75%;
            color: #CCC;
        }

        .desc-list {
            display: block;
            position: relative;
            width: 100%;
            text-align: right;
        }

        .desc-list1 {
            display: block;
            position: relative;
            width: 100%;
        }

	    .timestory_1979 { 
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            align-items: stretch;
            margin: -2em auto 0.5m auto;
            padding: 1em 0;
            width: 100%;
            text-align: center;
	    }



	.company_r2 {  
        display: inline-block;
        position: relative;
        margin: 0 auto;
        background: #000;
        background-image: url("../../images/pic_compnay_r2bg.png"), url("../../images/pic_compnay_r2bg2.png");
        background-position: top left, bottom left;
        background-repeat: repeat-x;
        background-size: 10%, 12%;
        width: 100%;
	}


	.company_r3 {  
        display: inline-block;
        position: relative;
        margin: 0 auto;
        background: url("../../images/pic_ab_factor.png"), url("../../images/pic_compnay_bg.png");
        background-position: center bottom, top left;
        background-repeat: no-repeat, repeat-x;
        background-size: 100%, 100%;
        padding: 1em 0 0 0;
        width: 100%;
	}

    .r3_t1 {
        display: inline-block;
        position: relative;
    }

    .r3_t1::before {
        content: "";
        display: block;
        position: absolute;
        top: 110%;       /* 放在元素下方 */
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 17px solid #E71f19;; /* 控制三角形的朝向與顏色 */
    }


	.company_flex {  
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: flex-start;
        margin: 5em auto 2em auto;
        width: 100%;
	}

	.company_flex-div {  
        display: block;
        position: relative;
        width: 20%;
	}

	    .company_flex-div-pic {  
            display: block;
            position: relative;
            margin: 0.5em auto;
            width: 100%;
            text-align: center;
	    }

	        .company_flex-div img {  
                display: block;
                position: relative;
                margin: 0 auto;
                width: 60%;
	        }

	        .company_flex-div-ab1 {  
                display: block;
                position: absolute;
                width: 60%;
                height: 100%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                transform-origin: 0 0;
                z-index: -1;
	        }

	        .company_flex-div-ab1 img {  
                display: block;
                width: 100%;
                opacity: 0.8;
	        }

	        .company_flex-div-ab2 {  
                display: block;
                position: absolute;
                width: 60%;
                height: 100%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                transform-origin: 0 0;
                z-index: -1;
	        }

	        .company_flex-div-ab2 img {  
                display: block;
                width: 100%;
                opacity: 0.8;
	        }




	    .company_flex-div-txt {  
            display: block;
            position: relative;
            margin: 1em 0;
            width: 100%;
            text-align: center;
	    }


	.company_graybox {  
        display: block;
        width: 100%;
        height: 18px;
        background: #999999;
	}

	.company_graybox1 {  
        display: block;
        padding: 2em 0;
        width: 100%;
        background: #262626;
	}


	.company_r4 {  
        display: inline-block;
        position: relative;
        margin: 0 auto;
        background: url("../../images/pic_ab_seg.png"), url("../../images/pic_ab_seg2.png");
        background-position: center top, center bottom;
        background-repeat: no-repeat;
        background-size: 100%;
        padding: 1em 0 15em 0;
        width: 100%;
	}

	.company_segnote {  
        display: block;
        padding: 1em 0;
        width: 100%;
        text-align: center;
        color: #000;
	}

	.company_segflex {  
        display: flex;
        position: relative;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: stretch;
        width: 100%;
	}

	.company_segflex-div {  
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        margin: 0 0 1em 0;
        padding: 2em;
        width: 60%;
        border-top: solid 2px #E71f19;
	}
    
    .company_segflex-pic {  
        display: block;
        position: relative;
        width: 40%;
        border-top: solid 2px #E71f19;
    }

	        .company_segflex-pic img {  
                display: block;
                position: relative;
                width: 100%;
	        }

    .company_segflex-content {  
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto; 
        width: 80%;
    }

	    .company_segflex-div-no {  
            display: block;
            position: relative;
            width: 100px;
            font-size: 7em;
            font-weight: bold;
            color: #999999;
	    }

	    .company_segflex-div-txt {  
            display: block;
            position: relative;
            width: 85%;
	    }



	.equ_a1 {  
        display: inline-block;
        position: relative;
        margin: 0 auto;
        background: url("../../images/pic_equ_machinebg.png"), url("../../images/pic_ap_r1bg2.png");
        background-position: top center;
        background-repeat: no-repeat, repeat-y;
        background-size: 100%, 100%;
        padding: 1em 0 0 0;
        width: 100%;
	}


	.equ_macthine {  
        display: block;
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: 100%;
	}

	.equ_macthine-flxe {  
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: stretch;
        width: 100%;
	}

	    .equ_macthine-flxe-L {  
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            width: 50%;
    	}

	    .equ_macthine-flxe-R {  
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-start;
            width: 50%;
    	}


	    .equ_macthine-flxe-sall-firt {  
            display: flex;
            position: relative;
            justify-content: space-between;
            align-items: stretch;
            width: 100%;
            height: 200px;
    	}

	    .equ_macthine-flxe-sall {  
            display: flex;
            position: relative;
            justify-content: space-between;
            align-items: stretch;
            width: 100%;
    	}

	        .equ_macthine-flxe-pic {  
                display: flex;
                position: relative;
                justify-content: center;
                align-items: center;
                width: 50%;
                order: 1;
    	    }

	        .equ_macthine-flxe-pic1 {  
                display: flex;
                position: relative;
                justify-content: center;
                align-items: center;
                width: 50%;
                order: 2;
    	    }

	            .equ_macthine-flxe-pic img, .equ_macthine-flxe-pic1 img {  
                    display: block;
                    position: relative;
                    width: 100%;
                    opacity: 0.3;
    	        }

    	        .equ_macthine-flxe-pic img:hover , .equ_macthine-flxe-pic1 img:hover { 
                    opacity: 1;
                    -webkit-transition:all 0.2s ease-in-out;
                    transition:all 0.2s ease-in-out;
    	        }

	        .equ_macthine-flxe-txt {  
                display: flex;
                position: relative;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                width: 50%;
    	    }

	        .equ_macthine-flxe-txt1 {  
                display: flex;
                position: relative;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                width: 50%;
                order: 2;
    	    }

	        .equ_macthine-flxe-txt2 {  
                display: flex;
                position: relative;
                flex-direction: column;
                justify-content: center;
                align-items: flex-end;
                width: 50%;
                order: 1;
    	    }

	        .equ_macthine-flxe-info {  
                display: block;
                position: relative;
                width: 80%;
    	    }

	        .equ_macthine-flxe-name {  
                display: block;
                position: relative;
                padding: 0 1.5em;
                padding-bottom: 0.5em;
                width: 100%;
                border-bottom: solid 2px #E71f19;
    	    }

	        .equ_macthine-flxe-name:hover {  
                color: #FFF;
    	    }

	        .equ_macthine-flxe-video {  
                display: flex;
                position: relative;
                justify-content: flex-start;
                align-items: center;
                padding: 0 1.5em;
                padding-top: 0.5em;
                width: 100%;
    	    }

	            .equ_macthine-flxe-video::before {  
                    content: url("../../images/pic_video.png");
                    display: block;
                    position: relative;
                    margin-top: 4px;
                    margin-right: 10px;
    	        }

	            .equ_macthine-flxe-video:hover {  
                    color: #FFF;
    	        }

	            .equ_macthine-flxe-video:hover::before {  
                    content: url("../../images/pic_video1.png");
                    display: block;
                    position: relative;
                    margin-top: 4px;
                    margin-right: 10px;
    	        }



	.equslick {  
        display: block;
        position: relative;
        margin: 4em auto 3em auto;
        padding: 0;
        width: 100%;
	}

	.equslick-div {  
        display: block;
        position: relative;
	}

	    .equslick-pic {  
            display: block;
            position: relative;
            width: 100%;
	    }

	        .equslick-pic img {  
                display: block;
                position: relative;
                width: 100%;
	        }

	    .equslick-txt {  
            display: block;
            position: relative;
            padding: 0.5em 0;
            width: 100%;
            text-align: center;
	    }


	.equ_m_flex {  
        display: flex;
        position: relative;
        justify-content: center;
        align-items: stretch;
        width: 100%;
	}

	    .equ_m_flex_L {  
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: space-between;
            align-items: stretch;
            width: 45%;
            background: url("../../images/pic_ap_r1bg1.png"), url("../../images/pic_ap_r1bg2.png");
            background-position: top center;
            background-repeat: no-repeat, repeat-y;
            background-size: 100%, 100%;
	    }

	    .equ_m_flex_R {  
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 2em 4%;
            width: 55%;
            background: #CCC;
	    }

	    .equ_m_flex_L-c {  
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            margin: 0 auto;
            width: 90%;
	    }

	        .equ_m_flex_L-c-div {  
                display: block;
                width: 31%;
                border-bottom: solid 2px #E71f19;
	        }

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

	    .equ_m_flex_L-c2 {  
            display: block;
            padding: 1em 0;
            width: 100%;
            text-align: center;
	    }

	    .equ_m_flex_R-c1 {  
            display: block;
            margin: 0 auto 0 0;
            width: auto;
            text-align: center;
	    }

	    .equ_m_flex_R-c2 {  
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: stretch;
            margin: 0 auto;
            width: 100%;
	    }

	        .equ_m_flex_R-c2-div {  
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 30%;
	        }

	        .equ_m_flex_R-c2-div-p {  
                display: block;
                position: relative;
                width: 25%;
                background: #484848;
	        }

	            .equ_m_flex_R-c2-div-p img {  
                    display: block;
                    position: relative;
                    width: 100%;
	            }

	        .equ_m_flex_R-c2-div-t {  
                display: block;
                position: relative;
                padding-left: 1em;
                width: 75%;
	        }

	    .equ_m_flex_R-c3 {  
            display: block;
            margin: 2em auto 1em auto;
            width: 100%;
	    }


	.equtech {  
        display: inline-block;
        position: relative;
        background: url("../../images/pic_equtechbg.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        margin: 0 auto 1em auto;
        padding: 2em 0 3em 0;
        width: 100%;
	}


	.equtech_word {  
        display: inline-flex;
        position: relative;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        text-align: center;
        width: 100%;
        
	}

	    .equtech_word1 {  
            display: inline-block;
            position: relative;
            width: auto;
            color: #FFF;
            letter-spacing: 1.5px;
	    }

	    .equtech_word2 {  
            display: inline-block;
            position: relative;
            width: auto;
            color: #FFF;
	    }

	    .equtech_word3 {  
            display: block;
            position: relative;
            margin: 0 auto;
            width: 80%;
            text-align: center;
	    }

	    .x-icon {
  	        position: relative;
  	        width: 100px;
 	        height: 80px;
            
		    -moz-animation-name: xxx;
		    -moz-animation-duration: 1.5s;
		    -moz-animation-iteration-count: infinite;
		    -moz-animation-fill-mode: forwards;
		    -webkit-animation-name: ccani5;
		    -webkit-animation-duration: 1.5s;
		    -webkit-animation-delay: 0;
		    -webkit-animation-iteration-count: infinite;
		    -webkit-animation-fill-mode: forwards;
		    -ms-animation-name: xxx;
		    -ms-animation-duration: 1.5s;
		    -ms-animation-delay: 0;
		    -ms-animation-iteration-count: infinite;
		    -ms-animation-fill-mode: forwards;
		    -o-animation-name: xxx;
		    -o-animation-duration: 1.5s;
		    -o-animation-delay: 0;
		    -o-animation-iteration-count: infinite;
		    -o-animation-fill-mode: forwards;
		    animation-name: xxx;
		    animation-duration: 1.5s;
		    animation-delay: 0;
		    animation-iteration-count: infinite;
		    animation-fill-mode: forwards;  
	    }

	       @keyframes xxx {
  	          0%   { transform: scale(0.5)}
  	          50%  { transform: scale(1)}
   	          100% { transform: scale(0.5)}
	       }



	    .x-iconab {
  	        position: absolute;
  	        width: 10px;
 	        height: 10px;
            background: #000;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
	    }

	    .x-icon::before,
	    .x-icon::after {
 	         content: "";
 	         position: absolute;
 	         top: 50%;
 	         left: 50%;
 	         width: 65px;
 	         height: 3px;
 	         background-color: #E71f19;
 	         transform-origin: center;
	    }

	    .x-icon::before {
  	        transform: translate(-50%, -50%) rotate(45deg);
	    }

	    .x-icon::after {
 	        transform: translate(-50%, -50%) rotate(-45deg);
	    }







	.conus {  
        display: inline-block;
        position: relative;
        margin: 0 auto;
        background: url("../../images/pic_ap_r1bg1.png"), url("../../images/pic_ap_r1bg2.png");
        background-position: top center;
        background-repeat: no-repeat, repeat-y;
        background-size: 100%, 100%;
        padding: 1em 0 1em 0;
        width: 100%;
	}

	.conus_flex {  
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: stretch;
        padding: 1em 0 0 0;
        width: 100%;
	}

	    .conus_flex-map {  
            display: flex;
            position: relative;
            justify-content: center;
            align-items: stretch;
            width: 60%;
            min-height: 520px;
	    }

	    .conus_flex-map img {  
            display: block;
            position: relative;
            width: 100%;
	    }

	        .cmap {  
                display: block;
                position: relative;
                width: 100%;
	        }

	    .conus_flex-info {  
            display: flex;
            position: relative;
            justify-content: center;
            align-items: center;
            background: rgba(0,0,0,0.3);
            width: 40%;
	    }

	        .company {  
                display: block;
                position: relative;
                margin: 0 auto;
                width: 80%;
	        }

	            .company_list {  
                    display: block;
                    position: relative;
                    margin: 1em auto;
                    width: 100%;
	            }

	                .company_list a {  
                        color: #AAAAAA;
	                }

	                .company_list a:hover {  
                        color: #E71f19;
	                }


	            .company_trs {  
                    display: flex;
                    position: relative;
                    justify-content: flex-start;
                    align-items: stretch;
                    margin: 1em auto;
                    width: 100%;
	            }

	            .company_icon {  
                    display: block;
                    position: relative;
                    margin-right: 20px;
                    width: 3em;
	            }

	                .company_icon img {  
                        width: 100%;
	                }

	                .company_icon img:hover {  
                        opacity: 0.5;
	                }

	            .company_txtmuddzz {  
                    display: inline-flex;
                    position: relative;
                    width: 2.65em;
                    float: left;
	            }




/* area setting */

	.ttv1 {  
        display: block;
        position: relative;
        margin: 15px auto;
        width: 125px;
        
        -moz-animation-name: ttm1;
        -moz-animation-duration: 2s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-fill-mode: forwards;
        -webkit-animation-name: ttm1;
        -webkit-animation-duration: 2s;
        -webkit-animation-delay: 0;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-fill-mode: forwards;
        -ms-animation-name: ttm1;
        -ms-animation-duration: 2s;
        -ms-animation-delay: 0;
        -ms-animation-iteration-count: infinite;
        -ms-animation-fill-mode: forwards;
        -o-animation-name: ttm1;
        -o-animation-duration: 2s;
        -o-animation-delay: 0;
        -o-animation-iteration-count: infinite;
        -o-animation-fill-mode: forwards;
        animation-name: ttm1;
        animation-duration: 2s;
        animation-delay: 0;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;  
	}

	    .ttv1 img {  
            display: block;
            width: 100%;
	    }

		@keyframes ttm1 {
		     0%   { top: -10px; }
		     50%  { top: 0; }
            100%  { top: -10px; }
		}


	.ttv1Q {  
        display: block;
        position: relative;
        margin: 0 auto;
        width: 70%;
	}


	.ttv1Q img {  
        display: block;
        position: relative;
        width: 60%;
	}


	.ttv1-1 {  
        display: block;
        position: relative;
        margin: 15px auto;
        width: 100%;
        
        -moz-animation-name: ttm1-1;
        -moz-animation-duration: 2s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-fill-mode: forwards;
        -webkit-animation-name: ttm1-1;
        -webkit-animation-duration: 2s;
        -webkit-animation-delay: 0;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-fill-mode: forwards;
        -ms-animation-name: ttm1-1;
        -ms-animation-duration: 2s;
        -ms-animation-delay: 0;
        -ms-animation-iteration-count: infinite;
        -ms-animation-fill-mode: forwards;
        -o-animation-name: ttm1-1;
        -o-animation-duration: 2s;
        -o-animation-delay: 0;
        -o-animation-iteration-count: infinite;
        -o-animation-fill-mode: forwards;
        animation-name: ttm1-1;
        animation-duration: 2s;
        animation-delay: 0;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;  
	}

		@keyframes ttm1-1 {
		     0%   { top: -10px; }
		     50%  { top: 0; }
            100%  { top: -10px; }
		}




	.title-center {  
        display: block;
		position: relative;
        margin: 2em auto;
		width: auto;
        text-align: center;
	}



	.title-center-m0 {  
        display: block;
		position: relative;
        margin: 0 auto;
		width: 80%;
        text-align: center;
	}

	.title-center-mtop1 {  
        display: block;
		position: relative;
        margin: 3em auto 0 auto;
		width: auto;
        text-align: center;
	}

	.title-center-mtop2 {  
        display: block;
		position: relative;
        margin: 1em auto 0 auto;
		width: auto;
        text-align: center;
	}

	.title-center-mtop3 {  
        display: block;
		position: relative;
        margin: 0.5em auto 1em auto;
		width: auto;
        text-align: center;
	}


	.txt-center {  
        display: block;
		position: relative;
        margin: 1em auto;
		width: 960px;
        text-align: center;
	}

	.txt-center-short {  
        display: block;
		position: relative;
        margin: 1em auto;
		width: 80%;
        text-align: center;
	}

	.txt-center-m0 {  
        display: block;
		position: relative;
        margin: 0 auto;
		width: 960px;
        text-align: center;
	}

	.txt-center-m080 {  
        display: block;
		position: relative;
        margin: 0 auto;
		width: 720px;
        text-align: center;
	}

	.txt-center-m0720 {  
        display: block;
		position: relative;
        margin: 0 auto;
		width: 980px;
        text-align: center;
	}

	.txt-center-m060 {  
        display: block;
		position: relative;
        margin: 0 auto;
		width: 50%;
        text-align: center;
	}

	.txt-center-m1 {  
        display: block;
		position: relative;
        margin: 1em auto;
		width: 100%;
        text-align: center;
	}

	.txt-center-m1-L {  
        display: block;
		position: relative;
        margin: 1em auto;
		width: 100%;
	}


	.subminatitle {
		display: inline-block;
		position: relative;
        margin: 1em auto;
		padding: 0 0.35em;
		width: auto;
		text-align: center;
        border-left: solid 1px #E71f19;
        border-right: solid 1px #E71f19;
	}






/* myBtn - go top */

	#myBtn {
		display: block;
		position: fixed;
		padding: 0;
		bottom: 3em;
		right: 2em;
		width: 60px;
		height: auto;
		border: 0;
		background: none;
		cursor: pointer;
		z-index: 1000;
	    outline: none;
	}

	#myBtn img {
		width: 100%;
		height: auto;
	    outline: none;
	}


/* vedio */
	.vdvideo {
		display: block;
		position: relative;
		margin: 0 auto;
		width: 100%;
		object-fit: cover; /* 填滿容器並裁切，或 object-fit: contain; */
		/* object-fit: fill; /* 拉伸填滿，但可能變形 */
	}

	.video-container {
		position: relative;
		padding-bottom: 0;
		height: 0;
		overflow: hidden;
	}

	.video-container iframe, .video-container object, .video-container embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

      .vedio_play {
		  display: block;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
          width: 80px;
		  height: auto;
      }

          .vedio_play img {
              width: 100%;
		      height: auto;
          }


	.indvideo1 {
		display: block;
		position: relative;
		margin: 0 auto;
		width: 100%;
	}






/* Footer */

	#footer {
		position: relative;
		background-color: #484848;
		width: 100%;
		padding: 0;
		text-align: left;
		overflow: hidden;
        color: #FFF;
        letter-spacing: 0.5px;
        line-height: 165%;
	}

	#footer .footerc {
		display: flex;
		position: relative;
		justify-content: space-between;
		align-items: stretch;
        padding: 2em 0 0 0;
		width: 100%;
	}


		#footer .fre1 {
		    display: flex;
			display: -webkit-flex; /* Safari */
		    justify-content: flex-start;
			align-items: stretch;
			flex-wrap: wrap;
			margin: 0;
            padding: 3em 0 1em 0;
			width: 75%;
	     }


		    #footer .fre1-div {
		        display: flex;
                position: relative;
                flex-direction: column;
			    display: -webkit-flex; /* Safari */
		        justify-content: flex-start;
			    align-items: stretch;
                margin-bottom: 1em;
			    width: 22%;
                flex: auto;
	         }

		        #footer .fre1-div_titile {
		            display: block;
                    position: relative;
                    width: 100%;
                    padding: 0 1.5em 0.3em 0;
                    border-bottom: solid 1px #E71f19;
	             }

		        #footer .fre1-div_titile:last-child {
                    padding: 0 0 0.3em 0;
	             }

		        #footer .fre1-div_linklist {
		            display: block;
                    position: relative;
                    width: 100%;
                    padding: 0.3em 0 0 0;
                    text-align: left;
	             }

		            #footer .fre1-div_linklist > * {
		                display: block;
                        position: relative;
                        width: 100%;
                        padding: 0 1.5em 0.3em 0;
	                }


		#footer .fre2 {
		    display: flex;
			display: -webkit-flex; /* Safari */
            flex-direction: column;
		    justify-content: flex-start;
			align-items: center;
			margin: 0 auto;
            padding: 1em 0;
			width: 20%;
	     }

		    #footer .fre2-logo {
		        display: inline-block;
			    width: 100%;
                margin-bottom: 1em;
	         }

		        #footer .fre2-logo img {
		            display: block;
                    position: relative;
			        width: 100px;
	            }


		    #footer .fre2-div {
		        display: flex;
                position: relative;
                flex-direction: column;
			    display: -webkit-flex; /* Safari */
		        justify-content: flex-start;
			    width: 100%;
	         }

		        #footer .fre2-div-list {
		            display: flex;
                    position: relative;
                    flex-direction: column;
			        display: -webkit-flex; /* Safari */
		            justify-content: flex-start;
                    margin-bottom: 0.5em;
			        width: 100%;
	             }



	            #footer .txtmuddzz {  
                    display: inline-flex;
                    position: relative;
                    width: 2.65em;
                    float: left;
	            }


		#footer .ftitle1 {
			display: block;
			margin: 0 0 5px 0;
			width: 100%;
			font-size: 1.25em;
            color: #FFF;
		}

		    #footer .ftitle1 a {
			    color: #FFF;
		    }

		    #footer .ftitle1 a:hover {
			    color: #E71f19;
		    }

		#footer .ftxt1 {  
			font-size: 1em;
			line-height: 135%;
            color: #CCCCCC;
		}

		#footer .ftxt2 {  
            margin: 0 0 5px 0;
			font-size: 1em;
			line-height: 120%;
            color: #FFF;
		}

		    #footer .ftxt1 a {  
		         color: #CCCCCC;   
		    }

		    #footer .ftxt2 a {  
		         color: #FFF;   
		    }

		    #footer .ftxt1 a:hover, #footer .ftxt2 a:hover {  
		         color: #E71f19;
		    }



/* --- 輪播css end --- */

 

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

/* header */	
	
			#header nav ul li {
                justify-content: center;
                align-items: center;
				text-align: center;
                height: 40px;
			}
    
/* banner */
    

/* Wrapper */
	
/* area-container */	

/* setting */

	.ind_a2_icons {  
		width: 44%;
	}
    
    
	.adv_animat_ww {
        display: block;
        position: relative;
        margin: -8em 0 0 0;
  		width: 100%;
	}
    
    
	.qc_qcani-flexarea {  
        bottom: 3em;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -40%);
        width: 100%;
	}

    
        .time-icon1 {
            width: 25%;
        }

            .time-icon1 img {
                top: -2%;
                left: -15%;
                width: 100%;
            }

        .time-icon2 {
            width: 25%;
        }

            .time-icon2 img {
                top: 13%;
                left: 22%;
            }

        .time-icon3 {
            display: block;
            position: relative;
            width: 25%;
        }

            .time-icon3 img {
                top: -11%;
                left: -16%;
            }

        .time-icon4 {
            width: 25%;
        }

            .time-icon4 img {
                top: 50%;
                left: 80%;
                transform: translate(-50%, -50%);
            }
    
/* Footer */
	
}


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

/* header */	
	
			#header nav ul li {
                margin: 0 2px;
				font-size: 1.1em;                                                                                                                         height: 40px;
			}   
    
/* banner */
	

    
/* Wrapper */
	
/* area-container */	

	.headcontainer {  
		width: 85%;
	}

    
/* wordarea */
	
/* setting */
    

	.ind_a2_icons {  
		width: 40%;
	}
   
	    .qc_qcani-pic-txt {  
            bottom: 13%;
            width: 24%;
	    }
    
    
	.qc_qcani-flexarea {  
        bottom: 3em;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -60%);
        width: 100%;
	}
	
    
    
    
/* Footer */

	#footer {

	}

	#footer .footerc {
        padding: 2em 0 0 0;
	}


		#footer .fre1 {
            padding: 3em 0 1em 0;
			width: 70%;
	     }
    

		#footer .fre2 {
		    justify-content: flex-start;
			align-items: center;
			margin: 0 auto;
            padding: 1em 0;
			width: 25%;
	     }

		    #footer .fre2-logo {
                margin-bottom: 1em;
	         }

		        #footer .fre2-logo img {
			        width: 26%;
	            }

	
}

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

/* header */	
	
			#header nav ul li {
                margin: 0px;
				font-size: 1.1em;
                height: 40px;
			}
	

	
/* banner */
	

/* Wrapper */
	
	
/* area-container */	

	.headcontainer {  
		width: 85%;
	}

	.pathcontainer {  
		width: 85%;
	}

	.bodycontainer1 {  
		width: 85%;
	}

	.bodycontainer2 {  
		width: 85%;
	}

	.bodycontainer3 {  
		width: 80%;
	}

	.bodycontainer4 {  
		max-width: 1920px;
		width: 75%;
	}

	.bodycontainer5 {  
		width: 65%;
	}

	.footercontainer {  
		width: 90%;
	}
		
	
/* setting */
    
	.instorslick {
		width: 90%;
	}
    
	        .instorslick-div-more {
		        display: flex;
                position: relative;
                justify-content: center;
                align-items: center;
                padding: 0.3em 0;
                width: 100%;
                z-index: 5;
	        }

	            .instorslick-div-more-bt {
		            display: block;
                    position: relative;
                    width: 40px;
                    height: 40px;
                    border-radius: 50px;
                    background: #989898;
                    cursor: pointer;
	            }

	            .instorslick-div-more-bt::before {
                    width: 25px;
                    height: 1px;
	            }

	            .instorslick-div-more-bt::after {
                    width: 1px;
                    height: 20px;
	            }


	.ind_a2_icons {  
		width: 35%;
	}
    
	    .adv_animat_vline-down1 {  
            top: 85%;
            left: 50%;
            transform: translateX(-50%);
            width: 1px;
            height: 150px;
	    }   
    
	.ind_a2_content_txt1 {  
        padding: 0 1em;
		width: 520px;
        z-index: 5;
	}

	.ind_a2_content_applist {  
        flex-wrap: wrap;
        margin: 0 auto;
		width: 100%;
	}

	    .ind_a2_content_applist-div {  
            padding: 0 1em;
            margin-bottom: 0.5em;
		    width: 25%;
	    }
    
    
    
	.adv_animat_cc {
        display: block;
        position: relative;
  		width: 100%;
	}

	.adv_animat_ccab {
        display: block;
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, 0);
  		width: 100%;
        z-index: 10;
	}
    
	.adv_animat_cc2ab1 {
        margin: 1em 0 3em 0;
        width: 100%;
	}
    
	.adv_animat_cc_flex {
        flex-wrap: wrap;
        margin: -15% auto 0 auto;
  		width: 90%;
        z-index: 999;
	}

	    .adv_animat_cc_flex_div {
  		    width: 19%;
	    }

    
	.adv_animat_ww {
        display: block;
        position: relative;
        margin: -7em 0 0 0;
  		width: 100%;
	}
    
    
	.adv_animat_final {
        margin: 10em auto 0 auto;
	}
    
    
    
	.qcaniab3 {  
        position: absolute;
        bottom: 2%;
        left: 50%;
        transform: translate(-50%, 0);
	}
    
    
    .timeline-slider {
        display: block;
        position: relative;
        margin: 1em auto;
        max-width: 85%;
    }

        .time-icon1 {
            width: 25%;
        }

            .time-icon1 img {
                top: -2%;
                left: -15%;
                width: 100%;
            }

        .time-icon2 {
            width: 25%;
        }

            .time-icon2 img {
                top: 13%;
                left: 22%;
            }

        .time-icon3 {
            display: block;
            position: relative;
            width: 25%;
        }

            .time-icon3 img {
                top: -11%;
                left: -16%;
            }

        .time-icon4 {
            width: 25%;
        }

            .time-icon4 img {
                top: 50%;
                left: 80%;
                transform: translate(-50%, -50%);
            }

    
	    .equ_m_flex_R-c2 { 
            margin: 0 auto;
            width: 100%;
	    }

	        .equ_m_flex_R-c2-div {  
                justify-content: flex-start;
                align-items: flex-start;
                margin: 0 0 1em 0;
                width: 47%;
	        }
    
    
  	    .x-icon {
  	        position: relative;
  	        width: 60px;
 	        height: 60px;
	    }

	    .x-iconab {
  	        position: absolute;
  	        width: 10px;
 	        height: 10px;
            background: #000;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
	    }

	    .x-icon::before,
	    .x-icon::after {
 	         content: "";
 	         position: absolute;
 	         top: 50%;
 	         left: 50%;
 	         width: 55px;
 	         height: 3px;
 	         background-color: #E71f19;
 	         transform-origin: center;
	    }  
    
    
  	.qc_qcani-flexarea { 
        left: 50%;
        top: 12%;
        transform: translate(-50%, 0%);
        width: 100%;
	}
	
    
    
    
/* Footer */

	
}

@media screen and (max-width: 1300px) {
    
    
	#header {
        
	}
    
		#header nav {
            flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
		}
    
			#header nav ul li {
                margin: 0;
				font-size: 1.1em;
                height: 40px;
			}

			    #header nav ul li:first-child {
                    width: 100%;
			    }
    
					.navlogo {
                        position: relative;
						width: 100px;
					}

					   .navlogo img {
                           margin: auto 0;
						   width: 45%;
					   }
    

    
	    .qc_qcani-pic-txt {  
            bottom: 9%;
            width: 20%;
	    }
    
    
  	.qc_qcani-flexarea { 
        left: 50%;
        top: 5%;
        transform: translate(-50%, 0%);
        width: 100%;
	}
	
    
    
    

}
	

/* Normal */

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

/* Basic */
    
/* header */	
	
/* banner */

/* Wrapper */
	
/* area-container */
    
	.headcontainer {  
		width: 85%;
	}

/* setting */

    
	.ind_a2_icons {  
        display: flex;
		position: relative;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
		width: 80%;
        z-index: 1;
	}
    
    
 	.ind_a3 {  
        margin: -5% auto 0 auto;
        padding: 5% 0 8em 0;
	}
    
    
	.ind_a4_titlebe {  
        margin: -110px auto 0 auto;
	}

	    .ind_a4_titlebe img {  
            width: 220px;
	    }
    
    
	    .ind_a4_qcflex-animate {
		    width: 85%;
	    }
    
    
    
    
	.adv_animat_cc2 {
        background-size: 120%;
        background-position: center top;
        background-repeat: no-repeat;
	} 
    
    
 	        .qcslick-div::after {  
                top: 110px;
                right: -2.3em;
	        }

	.adv_animat_final {
        margin: 14em auto 0 auto;
	}
    
    
	    .qcslick-div-name {  
            height: 5em;
	    }
    
    
    
	.company_r3 {  
        background-size: 130%, 100%;
        padding: 1em 0 0 0;
        width: 100%;
	}  
    
    
	.company_flex {  
        margin: 3em auto 2em auto;
        width: 100%;
	}

	.company_flex-div {  
        display: block;
        position: relative;
        width: 22%;
	}

	    .company_flex-div-pic {  
            margin: 0.5em auto;
            width: 100%;
            text-align: center;
	    }
    
    
/* area setting */


	.txt-center-m060 {  
		width: 70%;
	}
    
	.txt-center-m080 {  
		width: 55%;
	}

	.txt-center-m0720 {  
		width: 65%;
	}

    
    
/* Footer */

	#footer {

	}

	#footer .footerc {
        padding: 2em 0 0 0;
	}


		#footer .fre1 {
            padding: 3em 0 1em 0;
			width: 70%;
	     }
    

		#footer .fre2 {
		    justify-content: flex-start;
			align-items: center;
			margin: 0 auto;
            padding: 1em 0;
			width: 25%;
	     }

		    #footer .fre2-logo {
                margin-bottom: 1em;
	         }

		        #footer .fre2-logo img {
			        width: 27%;
	            }

    
    
}



@media screen and (max-width: 1200px) {
    
/* Basic */
	
/* header */	
	
			#header nav ul li {
				font-size: 1.05em;
                height: 40px;
			}
	
			    #header nav ul li:last-child {
                    margin-right: 0;
			    }
	
					.navlogo {
						width: 125px;
					}  
    
    
/* banner */
    

    
    
/* Wrapper */


    
/* area-container */
    
	.headcontainer {  
		width: 88%;
	}
    
    
/* setting */
    

	.ind_a3flex {  
        width: 95%;
	}

	    .ind_a3flex-div {  
            width: 16%;
	    }
    
	        .ind_a3flex-div:first-child {  
                display: none;
	        }
    
	        .ind_a3flex-div:last-child {  
                display: none;
	        }

	    .ind_a3flex-div1 {  
            width: 16%;
	    }

	        .ind_a3flex-divpic {  
                padding: 0 10px;
	        }
    
    
	.adv_animat_flex {
        flex-direction: column;
        margin: 1em auto;
        padding: 1em;
  		width: 80%;
	}

	    .adv_animat_flex_div {
            justify-content: center;
            align-items: center;
            margin-bottom: 1em;
  		    width: 100%;
	    }

	        .adv_animat_flex_div_tt {
                padding: 5px 1em;
                background: rgba(0,0,0, 0.7);
                text-align: center;
	        }

	        .adv_animat_flex_div_txt {
                padding: 10px 1em;
  		        width: 100%;
                text-align: center;
	        }
    
    
	.adv_animat_final {
        margin: 18em auto 0 auto;
	}
    
    

	.qc_qcani-pic {  
        margin: 0 auto;
        width: 40%;
        z-index: 99;
	}

	    .qc_qcani-picab {  
            display: block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            z-index: 100;
            transition: top 1s ease-in-out;
            animation: upDown 5s ease-in-out infinite alternate;
	    }

	    .qc_qcani-pic-txt {  
            position: relative;
            margin: 0 auto 1em auto;
            width: 50%;
            bottom: 0;
            left: 0;
            transform: translateX(0%);
	    }

	.qc_qcani-pic_tt {  
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 300;
        color: #FFF;
	}
    
    
	.qc_qcani-flexarea {  
        position: relative;
        bottom: 0;
        left: 00%;
        transform: translate(0, 0);
        width: 100%;
	}

	.qc_qcani-flex1 {  
        justify-content: flex-start;
        align-items: stretch;
        background: #e5e5e5;
	}

	.qc_qcani-flex2 {
        justify-content: flex-start;
        align-items: stretch;
	}

        .qc_qcani-flex-div1 {  
            padding: 1.5em 2em;
            width: 47%;
        }

        .qc_qcani-flex-div2 {  
            display: none;
            width: 0;
        }

        .qc_qcani-flex-div3 {  
            padding: 1.5em 2em;
            width: 47%;
        }
    
            .qc_qcani-flex-div-no {  
                display: inline-block;
                width: auto;
            }
    
    
	.qc_test {  
        background-position: left top;
        margin: 0 auto;
        padding: 3em 0;
        width: 100%;
	}

    
    .qc_flex1-div {
        width: 100%;
    }
    
	.qc_flex2 {  
        width: 100%;
	}

	    .qc_flex2-div {  
            display: flex;
            position: relative;
            justify-content: flex-start;
            align-items: center;
            background: #AAAAAA;
            border-radius: 50%;
            margin-right: 2em;
            width: 12%;
            z-index: 10;
	    }

	        .qc_flex2-div-line {  
               top: 73%;
               left: 0;
               transform: translateY(-50%);
            }
    
    
	.qc_flex3 {  
        flex-direction: column;
        margin: 0 0 0.7em 0;
        justify-content: flex-start;
        align-items: stretch;
        width: 100%;
	}

	    .qc_flex3-div-L {  
            display: flex;
            position: relative;
            justify-content: flex-start;
            align-items: flex-start;
            flex-basis: 100%;
	    }

	    .qc_flex3-div-R {  
            display: flex;
            position: relative;
            justify-content: flex-start;
            align-items: center;
            width: 100%;
	    }
    
    
	.equ_macthine {  
        padding: 0;
        width: 100%;
	}

	.equ_macthine-flxe {  
        flex-direction: column;
        width: 100%;
	}

	    .equ_macthine-flxe-L {  
            width: 100%;
    	}

	    .equ_macthine-flxe-R {  
            width: 100%;
    	}


	    .equ_macthine-flxe-sall-firt {  
            margin: 1em 0 2em 0;
            width: 100%;
            height: auto;
    	}

	    .equ_macthine-flxe-sall {  
            display: flex;
            position: relative;
            justify-content: space-between;
            align-items: stretch;
            width: 100%;
    	}

	        .equ_macthine-flxe-pic {  
                display: flex;
                position: relative;
                justify-content: center;
                align-items: center;
                width: 50%;
                order: 1;
    	    }

	        .equ_macthine-flxe-pic1 {  
                display: flex;
                position: relative;
                justify-content: center;
                align-items: center;
                width: 50%;
                order: 2;
    	    }

	        .equ_macthine-flxe-txt {  
                width: 90%;
    	    }

	        .equ_macthine-flxe-txt1 {  
                display: flex;
                position: relative;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                width: 50%;
                order: 2;
    	    }

	        .equ_macthine-flxe-txt2 {  
                display: flex;
                position: relative;
                flex-direction: column;
                justify-content: center;
                align-items: flex-end;
                width: 50%;
                order: 1;
    	    }
    

	    #p4 {  
           order: 2;
    	}

   	    #t4  {  
           order: 1;
    	}
    
   	        #t4.equ_macthine-flxe-txt1  {  
               align-items: flex-end;
    	    }
 
	    #p5 {  
           order: 1;
    	}

   	    #t5 {  
           order: 2;
    	}
    
   	        #t5.equ_macthine-flxe-txt2  {  
               align-items: flex-start;
    	    }
 
 	    #p8 {  
           order: 2;
    	}

   	    #t8 {  
           order: 1;
    	}
    
   	        #t8.equ_macthine-flxe-txt1 {  
               align-items: flex-end;
    	    }
    
	    #p9 {  
           order: 1;
    	}

   	    #t9 {  
           order: 2;
    	}
    
   	        #t9.equ_macthine-flxe-txt2 {  
               align-items: flex-start;
    	    }
    
 	    #p12 {  
           order: 2;
    	}

   	    #t12 {  
           order: 1;
    	}
    
   	        #t12.equ_macthine-flxe-txt1 {  
               align-items: flex-end;
    	    }
    
 	    #p13 {  
           order: 1;
    	}

   	    #t13 {  
           order: 2;
    	} 
    
   	        #t13.equ_macthine-flxe-txt2 {  
               align-items: flex-start;
    	    }
    
    
/* Footer */

	
}



/* Narrower */

#navPanel, #navButton {
		display: none;
}


@media screen and (max-width: 1100px) {
    
/* Basic */

			html, body {
				overflow-x: hidden;
			}  
    
/* Button */

    
/* header */	
    
	#header {
		display: none;
	}

	.mlogo {
		display: flex;
		position: relative;
		justify-content: center;
		background: #333;
        padding: 0.5em 0;
		width: 100%;
		height: auto;
		z-index: 999;
	}
	
	    .mlogo img {
		    display: block;
			width: 150px;
	    }

/* banner */
    

/* Wrapper */
	
/* area-container */
    
	.bodycontainer5 {  
		width: 75%;
	}
     
    
    
/* setting */
    
        .time-icon1 {
            width: 25%;
        }

            .time-icon1 img {
                top: 50%;
                left: 25%;
                width: 100%;
                transform: translate(-50%, -50%);
            }

        .time-icon2 {
            width: 25%;
        }

            .time-icon2 img {
                top: 66%;
                left: 85%;
                width: 100%;
                transform: translate(-50%, -50%);
            }

        .time-icon3 {
            display: block;
            position: relative;
            width: 25%;
        }

            .time-icon3 img {
                top: 74%;
                left: 31%;
                width: 100%;
                transform: translate(-50%, -50%);
            }

        .time-icon4 {
            width: 25%;
        }

            .time-icon4 img {
                top: 50%;
                left: 75%;
                width: 100%;
                transform: translate(-50%, -50%);
            }
    
    
	.company_segflex {  
        display: flex;
        position: relative;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: stretch;
        width: 100%;
	}

	.company_segflex-div {  
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        margin: 0 0 1em 0;
        padding: 1em;
        width: 60%;
        border-top: solid 2px #E71f19;
	}
    
    .company_segflex-pic {  
        display: block;
        position: relative;
        width: 40%;
        border-top: solid 2px #E71f19;
    }

	        .company_segflex-pic img {  
                display: block;
                position: relative;
                width: 100%;
	        }

    .company_segflex-content {  
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto; 
        width: 80%;
    }

	    .company_segflex-div-no {  
            display: block;
            position: relative;
            width: 100px;
            font-size: 7em;
            font-weight: bold;
            color: #999999;
	    }

	    .company_segflex-div-txt {  
            display: block;
            position: relative;
            width: 85%;
	    }

    
	    .qcslick-div-name {  
            height: 4em;
	    }
    

/* Footer */
    
	#footer {

	}
    
		#footer .fre1 {
			flex-wrap: wrap;
			margin: 0;
            padding: 3em 0 1em 0;
			width: 70%;
	     }

		    #footer .fre1-div {
                margin-bottom: 1em;
			    width: 11em;
	         }
    
    

	/* Off-Canvas Navigation */

			#page-wrapper {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				padding-bottom: 0;
			}
		
			#navButton {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 60px;
				left: 0;
				position: fixed;
				top: 0;
				width:;
				z-index: 999;
			}

				#navButton .toggle {
					text-decoration: none;
					height: 50px;
					left: 0;
					position: absolute;
					text-align: center;
					top: 0;
					width: 100%;
					border: 0;
					outline: 0;
				}

					#navButton .toggle:before {
						-moz-osx-font-smoothing: grayscale;
						-webkit-font-smoothing: antialiased;
						font-family: FontAwesome, "Arial",sans-serif, serif;
						font-style: normal;
						font-weight: normal;
						text-transform: none !important;
					}

					#navButton .toggle:before {
						color: #FFF;
						border-radius: 5px;
						content: '\f0c9';
						font-size: 1.5em;
						height: 50px;
						left: 10px;
						line-height: 50px;
						opacity: 0.5;
						position: absolute;
						top: 10px;
						width: 50px;
						z-index: 1;
						box-shadow: 0 0 0px #000;
					}

					#navButton .toggle:after {
						background: #E71f19;
						border-radius: 5px;
						content: '';
						height: 50px;
						left: 10px;
						position: absolute;
						top: 10px;
						width: 50px;
					}

			#navPanel {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transform: translateX(-275px);
				-webkit-transform: translateX(-275px);
				-ms-transform: translateX(-275px);
				transform: translateX(-275px);
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 100%;
				left: 0;
				overflow-y: auto;
				position: fixed;
				top: 0;
				width: 275px;
				z-index: 10002;
				background: #1c2021;
				color: #fff;
				font-size: 0.9em;
				letter-spacing: 0.075em;
				text-transform:none;
				padding: 0.25em 0.75em 1em 0.75em;
			}

				#navPanel .link {
					border: 0;
					border-top: solid 1px rgba(255, 255, 255, 0.05);
					color: inherit;
					display: block;
					height: auto;
					line-height: 1.5em;
					opacity: 0.75;
					text-decoration: none;
					padding: 0.55em 0;
				}

					#navPanel .link.depth-0 {
						font-weight: 900;
					}
		
					#navPanel .link.depth-1 {
						margin-left: 1em;
					}

					#navPanel .link.depth-2 {
						margin-left: 2em;
					}

					#navPanel .link:first-child {
						border-top: 0;
					}

				#navPanel .indent-1 {
					display: inline-block;
					width: 0;
				}

				#navPanel .indent-2 {
					display: inline-block;
					width: 0;
				}
	
	
			body.navPanel-visible #page-wrapper {
				-moz-transform: translateX(275px);
				-webkit-transform: translateX(275px);
				-ms-transform: translateX(275px);
				transform: translateX(275px);
			}

			body.navPanel-visible #navButton {
				-moz-transform: translateX(275px);
				-webkit-transform: translateX(275px);
				-ms-transform: translateX(275px);
				transform: translateX(275px);
			}

			body.navPanel-visible #navPanel {
				-moz-transform: translateX(0);
				-webkit-transform: translateX(0);
				-ms-transform: translateX(0);
				transform: translateX(0);
			}

	
}




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

/* Basic */

/* header */ 
    
/* banner */

/* Wrapper */
	
/* area-container */	

	.headcontainer {  
		width: 90%;
	}

	.pathcontainer {  
		width: 85%;
	}

	.bodycontainer1 {  
		width: 85%;
	}

	.bodycontainer2 {  
		width: 78%;
	}

	.bodycontainer3 {  
		width: 80%;
	}

	.bodycontainer4 {  
		max-width: 1920px;
		width: 75%;
	}

	.footercontainer {  
		width: 85%;
	}


/* setting */
    
	.instorslick {
		padding: 2em auto;
        bottom: 5%;
		width: 90%;
	}

	.ind_a2_content_txt1 {  
		width: 50%;
	}

	.ind_a2_content_applist {  
		width: 100%;
	}
    
	.ind_a2_content_applist-div {  
		width: 30%;
	}

	    .ind_a2_content_applist-div:nth-child(4n) {  
            border-right: solid 1px #484848;
	    }

	    .ind_a2_content_applist-div:nth-child(3n) {  
            border-right: none;
	    }
    
 	    .ind_a2_content_applist-div:last-child {  
            border-right: none;
	    }
    
    
	.ind_a4_titlebe {  
        margin: -105px auto 0 auto;
	}

	    .ind_a4_titlebe img {  
            width: 210px;
	    }

	    .ind_a4_qcflex-animate {
		    width: 90%;
	    }
    
    
		    .bannersub_txt {
                top: 50%;
                transform: translate(0%, -50%);
		    }
    

	.adv_animat_cc2 {
        background-size: 175%;
        background-position: center top;
        background-repeat: no-repeat;
	} 
    
 	.qcaniab3 {  
        position: absolute;
        bottom: 1%;
        left: 50%;
        transform: translate(-50%, 0);
	}
    
    
	.qc_sellsev {
        background-size: 120%;
        margin: 1.5em 0;
        padding: 1em 0 2em 0;
	}  
    
	.qc_sellsev::before {  
          border-left: 200px solid transparent;
          border-right: 200px solid transparent;
          border-top: 150px solid #FFF; /* 控制三角形的朝向與顏色 */
	}

	.qc_sellsev::after {  
          border-left: 200px solid transparent;
          border-right: 200px solid transparent;
          border-bottom: 150px solid #FFF; 
	} 
    
    
    
 	.qc_sellsev_icon {
        display: block;
        position: relative;
        margin: 0 auto;
        top: 0;
        left: 0;
        transform: translate(0, 0);
        width: 60%;
        z-index: 1;
	}  

	.qc_sellsev_flex {
        width: 100%;
	}  
    
	    .qc_sellsev_flex-div1 {
            justify-content: flex-start;
            width: 48%;
            padding-left: 3%;
	    }  

	    .qc_sellsev_flex-div2 {
            display: none;
            width: 0;
	    }  

	    .qc_sellsev_flex-div3 {
            justify-content: flex-start;
            width: 48%;
            padding-right: 3%;
	    }  
    
	    .qc_sellsev_d1flex1-div1 {
            justify-content: flex-start;
            align-items: center;
            margin: 0 0 1em 0;
            width: 100%;
            background: #bebebe;
            border-left: solid 3px #E71f19;
            padding: 1.5em 2em 1.5em 0;
	    }  

	    .qc_sellsev_d1flex1-div2 {
            justify-content: flex-start;
            align-items: center;
            margin: 0 0 1em 0;
            width: 100%;
            background: #e5e5e5;
            padding: 1.5em 2em 1.5em 0;
	    }
    
    
    
    .timeline-slider {
        display: block;
        margin: 1em auto;
        max-width: 85%;
        transform: skewX(0); 
        transform-origin: 0% 100%;
    }
    

	.company_r3 {  
        background-size: 160%, 100%;
        padding: 1em 0 0 0;
        width: 100%;
	}  
    
    
/* Footer */

    
}



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

/* Wrapper */
	
/* area-container */
    
/* setting */
    
	.instorslick {
		padding: 2em auto;
        bottom: 2%;
		width: 90%;
	}
 
	.ap_r1 {  
        border-bottom-right-radius: 150px;
	}
    
	.ap_info {  
        margin: 3em auto;
		width: 100%;
        
	}

	    .ap_info-r1 {  
            justify-content: flex-start;
            align-items: center;
		    width: 100%;
            z-index: 1;
	    }

	    .ap_info-r2 {  
            flex-direction: column;
            padding: 0;
		    width: 100%;
	    }

	    .ap_info-r2-1 {  
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding: 1em;
		    width: 100%;
	    }

	    .ap_info-r2-2 {  
            display:flex;
		    position: relative;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
            background: rgba(0,0,0, 0.5);
            padding: 1em;
		    width: 100%;
	    }

	        .ap_info-r2txt {  
                display: flex;
		        position: relative;
                flex-direction: column;
                justify-content: center;
                align-content: center;
                padding: 1.5em 2em 1.5em 1.5em;
                color: #AAAAAA;
                width: 100%;
                height: 100%;
	        }

	            .ap_info-r2txt::before {  
                    content: "";
                    display: block;
                    position: absolute;
                    background: #AAAAAA;
                    width: 50px;
                    height: 1px;
                    top: 0;
                    left: 0;
	            }

	            .ap_info-r2txt::after {  
                    content: "";
                    display: block;
                    position: absolute;
                    background: #AAAAAA;
                    width: 1px;
                    height: 50px;
                    top: 0;
                    left: 0;
	            }

	        .ap_info-r2txt_list {  
                display: block;
		        position: relative;
                margin: 3px 0;
                width: 100%;
                padding-left: 1.4em;
                text-indent: -1.4em;
	        }   
    
    
	.ap_r3 {  
        border-bottom-right-radius: 150px;
        border-top-left-radius: 150px;
	}

    
	    .adv_animat_vline-down1 {  
            top: 85%;
            left: 50%;
            transform: translateX(-50%);
            width: 1px;
            height: 80px;
	    }   
    
	.adv_animat_cc {
        display: block;
        position: relative;
  		width: 100%;
	}

	    .adv_animat_cc img {
            display: none;
	    }

	.adv_animat_ccab {
        display: block;
        position: relative;
        top: 0;
        left: 0;
        transform: translate(0, 0);
  		width: 100%;
        z-index: 10;
	}

	.adv_animat_cc2 {
        background-size: 290%;
        background-position: center top;
        background-repeat: no-repeat;
        background: #000;
	} 
    
	.adv_animat_cc2ab {
        display: block;
        position: relative;
        top: 0;
        left: 0;
        transform: translate(0, 0);
  		width: 100%;
        z-index: 10;
	}
    
    
	.adv_animat_cc_flex {
        justify-content: center;
        flex-wrap: wrap;
        margin: 1em auto;
  		width: 85%;
        z-index: 999;
	}

	    .adv_animat_cc_flex_div {
            margin: 0 0.5em 1em 0.5em;
  		    width: 31%;
	    }
    
	    .adv_animat_cc_flex_pic {
            display: block;
            position: relative;
            width: 100%;
            z-index: 10;
	    }

	        .adv_animat_cc_flex_pic img {
                margin: 0 auto;
                width: 50%;
	        }

    
    
	.adv_animat_weav {
        position: relative;
  		width: 100%;
        margin: 8em 0 0 0;
        padding-bottom: 3em;
	}

    
	.adv_animat_weav img {
        display: none;
        position: relative;
  		width: 100%;
	}

	    .adv_animat_weavnote_tt {
            display: block;
            position: relative;
            margin: 5px auto 0 auto;
  		    width: 100%;
            color: #FFF;
	    }
    
	    .adv_animat_weavnote_txt {
            display: block;
            position: relative;
            margin: 5px auto 1em auto;
  		    width: 80%;
            text-align: center;
            color: #AAAAAA;
	    }


	    .adv_animat_weavnote1 {
            display: inline-flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            top: 0%;
            left: 0%;
            transform: translate(0%, 0);
  		    width: 100%;
	    }

	    .adv_animat_weavnote2 {
            display: inline-flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            top: 0%;
            left: 0%;
            transform: translate(0%, 0);
  		    width: 100%;
	    }

	    .adv_animat_weavnote3 {
            display: inline-flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            top: 0%;
            left: 0%;
            transform: translate(0%, 0);
  		    width: 100%;
	    }

	    .adv_animat_weavnote4 {
            display: inline-flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            top: 0%;
            left: 0%;
            transform: translate(0%, 0);
  		    width: 100%;
	    }

	    .adv_animat_weavnote5 {
            display: inline-flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            top: 0%;
            left: 0%;
            transform: translate(0%, 0);
  		    width: 100%;
	    }

    
		    @keyframes aw1 {
			    0%    {left: 0; opacity: 0}
			    10%   {left: 0; opacity: 1;}
			    95%   {left: 0; opacity: 1;}
			    100%  {left: 0; opacity: 0;}
		    }

		    @keyframes aw2 {
			    0%    {left: 0; opacity: 0}
			    10%   {left: 0; opacity: 0}
			    20%   {left: 0; opacity: 1;}
			    95%   {left: 0; opacity: 1;}
			    100%  {left: 0; opacity: 0;}
		    }

		    @keyframes aw3 {
			    0%    {left: 0; opacity: 0}
			    20%   {left: 0; opacity: 0}
			    30%   {left: 0; opacity: 1;}
			    95%   {left: 0; opacity: 1;}
			    100%  {left: 0; opacity: 0;}
		    }

		    @keyframes aw4 {
			    0%    {left: 0; opacity: 0}
			    30%   {left: 0; opacity: 0}
			    40%   {left: 0; opacity: 1;}
			    95%   {left: 0; opacity: 1;}
			    100%  {left: 0; opacity: 0;}
		    }

		    @keyframes aw5 {
			    0%    {left: 0; opacity: 0}
			    40%   {left: 0; opacity: 0}
			    50%   {left: 0; opacity: 1;}
			    95%   {left: 0; opacity: 1;}
			    100%  {left: 0; opacity: 0;}
		    }
    
	    .adv_animat_weav1 {
            display: none;
	    }
    
    
	.adv_animat_final {
        margin: 3em auto 0 auto;
	}
    
    
    
	        .rd_a2-rd_icon {
                bottom: -30px;
                width: 120px;
	        }

    
	.rd_cadslic {
        display: block;
        position: absolute;
        top: 38%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 75%;
        z-index: 999;
	}
    

 	.qcaniab3 {  
        position: relative;
        margin: 1em auto;
        bottom: 0;
        left: 0;
        transform: translate(0, 0);
	}  
    
    
    
    .timeline-slider {
        display: block;
        margin: 1em auto;
        max-width: 85%;
    }
    
	    .timeline_line { 
            top: 0;
            left: 0%;
            transform: translate(-50%, 0);
	    }
    
	    .timeline_point { 
            top: 100%;
            left: 0%;
            transform: translate(-50%, 0);
            width: 22px;
            height: 22px;
	    }
    
    
 	    .timestory_flex { 
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            margin: 0 auto 1em auto;
	    }
    
	    .timestory_flex-div-le { 
            justify-content: flex-start;
            flex-direction: column;
            width: 100%;
	    }

	    .timestory_flex-div-pp { 
            flex-direction: column;
            top: 68px;
            left: 0%;
            transform: translate(-50%, 0);
            width: 14px;
            height: 14px;
	    }

	    .timestory_flex-div-rt { 
            justify-content: flex-start;
            flex-direction: column;
            width: 100%;
	    }
    
    
	    /* 主要外框容器 */
	    .milestone-card {
            padding: 0 2em 0 0;
            border-right: solid 1px #808080; 
            border-left: none;
	    }
    
	    /* 左側紅色半截直線 */
	    .milestone-card::after {
            content: "";
            top: -1px;
            left: auto;
            right: -1px;
	    }
    
	    /* 主要外框容器 */
	    .milestone-card1 {
            padding: 0 2em 0 0;
	    }
    
	    /* 右側紅色半截直線 */
	    .milestone-card1::after {
            content: "";
            top: -1px;
            right: -1px;
	    }
    
        .year1 {
            text-align: left;
        }

        .year2 {
            text-align: left;
        }

        .year3 {
            padding: 0.5em 0 0.5em 0;
            text-align: left;
        }

    
        .time-icon1, .time-icon2, .time-icon3, .time-icon4 {
            display: block;
            position: relative;
            width: 20%;
            order: 2;
        }
    
        .time-icon1 img, .time-icon2 img, .time-icon3 img, .time-icon4 img {
            top: 50%;
            left: 95%;
            transform: translate(-50%, -50%);
            background: #000;
            z-index: 5;
        }

        .desc1 {
            padding: 1em 0;
            width: 80%;
            color: #CCC;
            order: 1;
        }

        .desc-list {
            display: block;
            position: relative;
            padding-left: 2em;
            width: 100%;
            text-align: left;
        }

        .desc-list1 {
            display: block;
            position: relative;
            padding-left: 2em;
            text-align: left;
            width: 100%;
        }
    
	    .timestory_1979 { 
            padding-left: 2em;
            text-align: left;
	    }
    
    
 
	.company_r3 {  
        background-size: 165%, 100%;
        padding: 1em 0 0 0;
        width: 100%;
	}  
    
    
    
	.equ_m_flex {  
        flex-direction: column;
        width: 100%;
	}

	    .equ_m_flex_L {  
            padding: 0 2%;
            width: 100%;
	    }

	    .equ_m_flex_R {  
            padding: 2em 10%;
            width: 100%;
	    }
    

/* area setting */
    
	.title-center-mtop1 {  
        margin: 2em auto 0 auto;
	}
    
	.txt-center-m080 {  
		width: 80%;
	}
    
/* Footer */
	
}




/* Mobile */

@media screen and (max-width: 840px) { 
		
 /* Basic */

/* header */	

/* banner */

/* Wrapper */
	
/* area-container */		
	
	.headcontainer {  
		width: 80%;
	}

	.pathcontainer {  
		width: 80%;
	}

	.bodycontainer1 {  
		width: 90%;
	}

	.bodycontainer2 {  
		width: 80%;
	}

	.bodycontainer3 {  
		width: 80%;
	}

	.bodycontainer4 {  
		width: 80%;
	}

	.footercontainer {  
		width: 85%;
	}
	
    
/* setting */
    
	.instorslick {
		padding: 2em auto;
        bottom: 2%;
		width: 75%;
	}


	.ind_a3 {  
        display: inline-block;
		position: relative;
        margin: -4.5% auto 0 auto;
        padding: 8% 0 6em 0;
		width: 100%;
	}
    
	.ind_a4 {  
        padding: 0 0 3em 0;
        background-position: top center;
        background-size: cover;
	}
    
 	.ind_a4_qcflex {  
        flex-direction: column;
        margin: 0 auto;
		width: 100%;
	}

	    .ind_a4_qcflex-div {  
            margin: 0 auto 1em auto;
		    width: 50%;
	    }
    
	        .ind_a4_qcflex-div-txt {  
		        width: 100%;
                text-align: center;
	        }

	    .ind_a4_qcflex-animate {  
            margin: 0 auto;
		    width: 100%;
	    }

    
	.ap_r1 {  
        border-bottom-right-radius: 100px;
	}
    
    
	.ap_r3 {  
        border-bottom-right-radius: 100px;
        border-top-left-radius: 100px;
	}
    
	.rd_a3 {
        margin: 3em auto;
        width: 80%;
	} 
    
    
    
	.qc_qcani-pic {  
        width: 60%;
	}
    
	.qc_qcani-flex1 {  
        flex-direction: column;
        width: 100%;
        background: #e5e5e5;
	}

	.qc_qcani-flex2 {  
        flex-direction: column;
        width: 100%;
	}
    
        .qc_qcani-flex-div1 {  
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            padding: 1.5em 3em;
            width: 100%;
        }

        .qc_qcani-flex-div3 {  
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            padding: 1.5em 3em;
            width: 100%;
        }
    
	    .qc_qcani-flex1 .qc_qcani-flex-div3 {  
            background: #FFF;
	    }

   	    .qc_qcani-flex2 .qc_qcani-flex-div1 {  
            background: #e5e5e5;
	    } 
    
    
	.qc_sellsev {
        background-size: cover;
        margin: 1.5em 0;
        padding: 0.3em 0 2em 0;
	}  
    
	.qc_sellsev::before {  
          border-left: 200px solid transparent;
          border-right: 200px solid transparent;
          border-top: 120px solid #FFF; /* 控制三角形的朝向與顏色 */
	}

	.qc_sellsev::after {  
          border-left: 200px solid transparent;
          border-right: 200px solid transparent;
          border-bottom: 120px solid #FFF; 
	}  
    
    
    
	.company_flex {  
        flex-wrap: wrap;
        margin: 3em auto 2em auto;
        width: 100%;
	}

	.company_flex-div {  
        display: block;
        position: relative;
        width: 48%;
	}

	    .company_flex-div-pic {  
            margin: 0.5em auto;
            width: 100%;
            text-align: center;
	    }  
    
	        .company_flex-div-pic img {  
                width: 40%;
	        }  
    
	        .company_flex-div-ab1 {  
                width: 100%;
	        }

	        .company_flex-div-ab2 {  
                width: 100%;
	        }

    
    
	    .equ_m_flex_R-c2 {  
            margin: 0 auto;
            width: 100%;
	    }

	        .equ_m_flex_R-c2-div {  
                justify-content: flex-start;
                align-items: flex-start;
                margin: 0 auto 1em auto;
                width: 100%;
	        }
    
	        .equ_m_flex_R-c2-div-p {  
                width: 80px;
                background: #484848;
	        }

	            .equ_m_flex_R-c2-div-p img {  
                    display: block;
                    position: relative;
                    width: 100%;
	            }

	        .equ_m_flex_R-c2-div-t {  
                display: block;
                position: relative;
                padding-left: 1em;
                flex: 1;
	        }
    
    
    
	.conus_flex {  
        flex-direction: column;
        margin: 1em 0;
        width: 100%;
	}

	    .conus_flex-map {  
            display: flex;
            position: relative;
            justify-content: center;
            align-items: stretch;
            width: 100%;
            min-height: 520px;
	    }
    
	    .conus_flex-info {  
            margin: 0 auto;
            background: rgba(0,0,0,0.3);
            width: 100%;
	    }

	        .company {  
                margin: 0 auto;
                width: auto;
	        }

	            .company_trs {  
                    margin: 1em auto;
                    width: 100%;
	            }

	            .company_icon { 
                    margin-right: 15px;
                    width: 2.5em;
	            }
    
    
    
	    .pro_flex {
            flex-direction: column;
            width: 100%;
	    }

	        .pro_flex_L {
                width: 100%;
	        }


	        .pro_flex_R {
                padding-left: 2em;
                width: 100%;
	        } 
    
	    .pro_note {
            margin: 0 0 2em 0;
            padding: 2em 2em 2em 10%;
	    }
    
    
    
	    .conus_flex-map {  
            order: 2;
	    }
    
	        .cmap {  
                width: 100%;
                height: 840px;
	        }
    
	    .conus_flex-info {  
            padding: 1em 0 0 0;
            order: 1;
	    }
    
    
    
 /* area setting */
    
	.title-center-mtop1 {  
        margin: 2em auto 1em auto;
	}  
    
	.txt-center-m1-L {  
        margin: 1em auto;
		width: 100%;
        text-align: center;
	}
    
	.txt-center-m060 {  
		width: 90%;
	}
    
    
    
    
/* Footer */
	
	#footer {

	}

	#footer .footerc {
        flex-direction: column;
        padding: 2em 0 0 0;
	}


		#footer .fre1 {
            padding: 3em 0 1em 0;
			width: 100%;
	     }
    
		#footer .fre2 {
		    justify-content: flex-start;
			align-items: center;
			margin: 0 auto;
            padding: 1em 0;
			width: 100%;
	     }

		    #footer .fre1-div {
			    width: 11em;
                flex: auto;
	         }
    
		    #footer .fre2-logo {
                margin-bottom: 1em;
	         }

		        #footer .fre2-logo img {
			        width: 75px;
	            }
    
 		        #footer .fre1-div_titile {
                    text-align: left;
	             }

		        #footer .fre1-div_linklist {
                    text-align: left;
	             }
    
    
    
/* myBtn - go top */

	#myBtn {
		bottom: 4em;
		right: 0.5em;
		width: 40px;
		height: 40px;
	}
	

}


@media screen and (max-width: 800px) {
	
/* setting */
    
	.instorslick {
		padding: 1em auto;
        bottom: 0;
		width: 85%;
	}
    

	        .cmap {  
                width: 100%;
                height: 800px;
	        }
	
}



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

/* banner */

/* Wrapper */
	
/* area-container */	
    
	.footercontainer {  
		width: 70%;
	}
	
    
/* setting */
    
	.instorslick {
        position: relative;
        margin: 0 auto;
        padding: 0 auto;
        top: 0;
        left: 0;
        transform: translate(0,0);
		width: 80%;
	} 
    
	    .ind_a1-r1pic img {  
            display: none;
	    }
    
	    .ind_a2_light img {  
            opacity: 0;
	    }

    
	.ind_a2 {  
        background: url("../../images/pic_indr2_bg1_mm.png"), url("../../images/pic_indr2_bg2.png");
        background-position: top center, top center;
        background-repeat: no-repeat;
        background-size: 100%, cover;
	}
    
	.ind_a2_light {  
        display: none;
	}
    
	.ind_a2_light2 {  
        display: none;
	}
    
    
	.ind_a2_content {  
        display: inline-block;
        position: relative;
        margin: 25% auto 0 auto;
        padding: 0;
        top: 0;
        left: 0%;
        transform: translate(0%, 0%);
		width: 100%;
        z-index: 5;
	}
    
	.ind_a2_content_txt1 {  
		width: 90%;
	}
    
	.ind_a2_content_applist {  
		width: 100%;
	}
    
	.ind_a2_c_icon_name {  
        top: 5%;
        left: 50%;
        transform: translate(-50%, 0%);
		width: 50%;
        text-align: center;
        z-index: 50;
	}
    
    
	.ind_a3flex {  
        width: 80%;
	}

	    .ind_a3flex-div {  
            width: 16%;
	    }
    
	        .ind_a3flex-div {  
                display: none;
	        }

	    .ind_a3flex-div1 {  
            width: 30%;
	    }

	        .ind_a3flex-divpic {  
                padding: 0 20px;
	        }
    
    
	.ind_a3 {  
        margin: -10% auto 0 auto;
        padding: 8% 0 6em 0;
		width: 100%;
	}
    
    
 	.ind_a4_qcflex {  
		width: 100%;
	}

	    .ind_a4_qcflex-div {  
            margin: 0 auto 1em auto;
		    width: 70%;
	    }
    
    
	.ind_a5 {  
        flex-direction: column;
        margin: -4em auto 3em auto;
        width: 400px;
	}

	    .ind_a5-div {  
            margin-bottom: 2em;
            width: 100%;
	    }
    
    
    
	.adv_animat_cc_flex {
        flex-direction: column;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 1em auto;
  		width: 85%;
        z-index: 999;
	}

	    .adv_animat_cc_flex_div {
            margin: 0 0  1em 0;
  		    width: 100%;
	    }
    
	    .adv_animat_cc_flex_pic {
            display: block;
            position: relative;
            width: 100%;
            z-index: 10;
	    }

	        .adv_animat_cc_flex_pic img {
                margin: 0 auto;
                width: 120px;
	        }
    
    
	        .rd_a2-rd_icon {
                bottom: -20px;
                width: 100px;
	        }
    

 	        .qcslick-div::after {  
                top: 43%;
                right: -2.3em;
	        }

    

	.qc_flex2 {  
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
        width: 100%;
        margin: 1em auto 2em auto;
        padding-bottom: 1em;
	}
    
	    .qc_flex2-div {  
            display: flex;
            position: relative;
            justify-content: center;
            align-items: center;
            background: #AAAAAA;
            border-radius: 50%;
            margin: 0 10px 10px 10px;
            width: 25%;
            z-index: 10;
	    }

	        .qc_flex2-div-line {  
               top: 100%;
               left: 0;
               transform: translateY(0);
               width: 100%;
               height: 2px;
               background: #E71f19;
            }
    
	        .qc_flex2-div-line img {  
               opacity: 0;
            }
    
    
 	.qc_sellsev_icon {
        margin: 0 auto;
        width: 80%;
	}  

    
	.qc_sellsev_flex {
        flex-direction: column;
        width: 100%;
	}  
    
	    .qc_sellsev_flex-div1 {
            justify-content: flex-start;
            width: 100%;
            padding: 0 10%;
	    }  

	    .qc_sellsev_flex-div3 {
            justify-content: flex-start;
            width: 100%;
            padding: 0 10%;
	    }  
    
	        .qc_sellsev_d1flex1-div1_R {
                justify-content: flex-start;
                align-items: center;
	        }  
    
    
	.company_segflex {  
        flex-wrap: wrap;
        flex-direction: column;
        width: 100%;
	}

	.company_segflex-div {  
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        margin: 0 0 1em 0;
        padding: 1em 0;
        width: 100%;
        border-top: solid 2px #E71f19;
        order: 2;
	}
    
    .company_segflex-pic {  
        display: block;
        position: relative;
        width: 100%;
        border-top: solid 2px #E71f19;
        order: 1;
    }

    .company_segflex-content {  
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: flex-start;
        margin: 0 auto; 
        padding: 0;
        width: 100%;
    }

	    .company_segflex-div-no {  
            padding-top: 0.3em;
            width: 100px;
            text-align: center;
            font-size: 5em;
	    }

	    .company_segflex-div-txt {  
            display: block;
            position: relative;
            width: 85%;
	    }

    
    
    
    
    
    
	.equ_macthine {  
        padding: 0;
        width: 75%;
	}

	.equ_macthine-flxe {  
        flex-direction: column;
        width: 100%;
	}

	    .equ_macthine-flxe-L {  
            width: 100%;
    	}

	    .equ_macthine-flxe-R {  
            width: 100%;
    	}


	    .equ_macthine-flxe-sall-firt {  
            margin: 0.5em 0 1em 0;
            width: 100%;
            height: auto;
    	}

	    .equ_macthine-flxe-sall {  
            flex-direction: column;
            width: 100%;
    	}

 	        .equ_macthine-flxe-name {  
                padding: 0 1.5em;
                padding-bottom: 0.5em;
                border-bottom: none;
    	    }
    
	        .equ_macthine-flxe-pic {  
                margin: 1em 0 0 0;
                width: 100%;
                order: 1;
    	    }

	        .equ_macthine-flxe-pic1 {  
                margin: 1em 0 0 0;
                width: 100%;
                order: 1;
    	    }

	        .equ_macthine-flxe-txt {  
                width: 100%;
    	    }

	        .equ_macthine-flxe-txt1 {  
                align-items: flex-start;
                padding: 0.5em 0 2em 0;
                width: 100%;
                order: 2;
    	    }

	        .equ_macthine-flxe-txt2 {  
                align-items: flex-start;
                padding: 0.5em 0 2em 0;
                width: 100%;
                order: 2;
    	    }  
    
	        .equ_macthine-flxe-info {  
                width: 100%;
    	    }
    
	        .equ_macthine-flxe-name {  
                padding: 0 0;
                padding-bottom: 0;
    	    }

	        .equ_macthine-flxe-video {  
                padding: 0 0;
                padding-top: 0;
    	    }
    

	    #p4 {  
           order: 1;
    	}

   	    #t4  {  
           order: 2;
    	}
    
   	        #t4.equ_macthine-flxe-txt1  {  
               align-items: flex-start;
    	    }
 
	    #p5 {  
           order: 1;
    	}

   	    #t5 {  
           order: 2;
    	}

 	    #p8 {  
           order: 1;
    	}

   	    #t8 {  
           order: 2;
    	}

	    #p9 {  
           order: 1;
    	}

   	    #t9 {  
           order: 2;
    	}

    
 	    #p12 {  
           order: 1;
    	}

   	    #t12 {  
           order: 2;
    	}
  
    
 	    #p13 {  
           order: 1;
    	}

   	    #t13 {  
           order: 2;
    	} 
    

    
	        .cmap {  
                width: 100%;
                height: 736px;
	        }
    
/* area setting */
    
	.title-center-mtop1 {  
        margin: 2em auto 0 auto;
	}  
      
    
    
/* Footer */
	
	#footer .footerc {
        flex-direction: column;
        padding: 2em 0 0 0;
	}


		#footer .fre1 {
            flex-wrap: wrap;
            justify-content: flex-start;
            padding: 3em 0 1em 0;
			width: 100%;
	     }
    
		#footer .fre2 {
		    justify-content: flex-start;
			align-items: center;
			margin: 0 auto;
            padding: 1em 0;
			width: 100%;
	     }

    
		    #footer .fre1-div {
			    width: 45%;
                flex: auto;
	         }
    
    
		    #footer .fre2-logo {
                margin-bottom: 1em;
	         }

		        #footer .fre2-logo img {
			        width: 75px;
	            }
    
 		        #footer .fre1-div_titile {
                    text-align: left;
	             }

		        #footer .fre1-div_linklist {
                    text-align: left;
	             }
	
}

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

/* banner */
    
     .bannerli_txt {
         width: 80%;
         left: 10%;
         transform: translate(0%, -50%);
         text-align: center;
     }
    
     .bannerli_txt > * {
         width: 100%;
		 text-align: center;
     }

/* Wrapper */
	
/* area-container */	
	
/* setting */
    
    
	.ind_a1-r1pic {  
        margin: 0 auto;
		width: 100%;
	}
    
    
	.DFM {
        padding: 0 1em;
        width: 60%;
	}
  
		.DFM-t {
       	 	width: 80%;
		}

		.DFM-t2 {
       	 	width: 80%;
		}

    
	.company_flex-div {  
        display: block;
        position: relative;
        width: 48%;
	}

	    .company_flex-div-pic {  
            margin: 0.5em auto;
            width: 100%;
	    }  
    
	        .company_flex-div-pic img {  
                width: 60%;
	        }  
    
    
    
    .timeline-slider {
        display: block;
        margin: 1em auto;
        max-width: 85%;
    }
    
	    .timeline_line { 
            top: 0;
            left: 0%;
            transform: translate(-50%, 0);
	    }
    
	    .timeline_point { 
            top: 100%;
            left: 0%;
            transform: translate(-50%, 0);
            width: 22px;
            height: 22px;
	    }
    
    
 	    .timestory_flex { 
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            margin: 0 auto 1em auto;
	    }
    
	    .timestory_flex-div-le { 
            justify-content: flex-start;
            flex-direction: column;
            width: 100%;
	    }

	    .timestory_flex-div-pp { 
            flex-direction: column;
            top: 68px;
            left: 0%;
            transform: translate(-50%, 0);
            width: 14px;
            height: 14px;
	    }

	    .timestory_flex-div-rt { 
            justify-content: flex-start;
            flex-direction: column;
            width: 100%;
	    }
    
    
	    /* 主要外框容器 */
	    .milestone-card {
            flex-direction: column;
            padding: 0 1em 0 0;
	    }
    
	    /* 左側紅色半截直線 */
	    .milestone-card::after {
            content: "";
            top: -1px;
            left: auto;
            right: -1px;
	    }
    
	    /* 主要外框容器 */
	    .milestone-card1 {
            flex-direction: column;
            padding: 0 1em 0 0;
	    }
    
	    /* 右側紅色半截直線 */
	    .milestone-card1::after {
            content: "";
            top: -1px;
            right: -1px;
	    }
    
        .year1 {
            text-align: left;
        }

        .year2 {
            text-align: left;
        }

        .year3 {
            padding: 0.5em 0 0.5em 0;
            text-align: left;
        }

    
        .time-icon1, .time-icon2, .time-icon3, .time-icon4 {
            display: block;
            position: relative;
            margin: 1em 0 0.5em 2em;
            width: 25%;
            order: 1;
        }
    
        .time-icon1 img, .time-icon2 img, .time-icon3 img, .time-icon4 img {
            position: relative;
            top: 0%;
            left: 0%;
            transform: translate(0,0);
        }

        .desc1 {
            padding: 0 0 1em 0;
            width: 100%;
            color: #CCC;
            order: 2;
        }

        .desc-list {
            padding-left: 1.5em;
            width: 100%;
            text-align: left;
        }

        .desc-list1 {
            padding-left: 1.5em;
            text-align: left;
            width: 100%;
        }
    
	    .timestory_1979 { 
            padding-left: 2em;
            text-align: left;
	    }
    
    
	        .cmap {  
                width: 100%;
                height: 600px;
	        }
    
    
/* Footer */
    
    

}

@media screen and (max-width: 500px) {
	
/* header */	

	.mlogo {

	}
	
	    .mlogo img {
		    display: block;
			width: 130px;
	    }
	
/* banner */

    
    
/* setting */
    
	.ind_a2_content_applist-div {  
		width: 48%;
	} 
    
	    .ind_a2_content_applist-div:nth-child(3n) {  
            border-right: solid 1px #484848;
	    }
    
	    .ind_a2_content_applist-div:nth-child(2n) {  
            border-right: none;
	    }
    
    
	.ind_a3flex {  
        flex-wrap: wrap;
        width: 180px;
	}

	    .ind_a3flex-div1 {  
            margin: 0 auto;
            width: 100%;
	    }

    
	.ind_a3 {  
        margin: -120px auto 0 auto;
        padding: 100px 0 6em 0;
		width: 100%;
	}   
    
    
	.ind_a5 {  
        flex-direction: column;
        margin: -4em auto 3em auto;
        width: 320px;
	}

	    .ind_a5-div {  
            margin-bottom: 1.5em;
            width: 100%;
	    }

    
    
	        .qcslick-div::after {  
                top: 35%;
                right: -1em;
                border-width: 5px 0 5px 7px;
	        }
    
    
	.qc_qcani-pic {  
        width: 75%;
	}
    
	    .qc_qcani-pic-txt {  
            position: relative;
            margin: 0.5em auto 2em auto;
            width: 80%;
	    }
    
    
	        .cmap {  
                width: 100%;
                height: 500px;
	        }
    
    
	    .qcslick-div {  
            width: 100%;
	    }
    
    
    
    
/* Footer */

	
	
}

@media screen and (max-width: 480px) {
		
	    .instorslick-div {
		    display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 auto 2em auto;
            padding: 1em;
            width: 100%;
	    }

	        .instorslick-div-pic {
		        display: block;
                position: relative;
                margin: 0 auto 0 auto;
                padding: 0 0;
                width: 100%;
	        }

	            .instorslick-div-picab {
                    height: 75%;
	            }

	        .instorslick-div-title {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
	        }

	        .instorslick-div-txt {
                margin: 0.5em 0;
                padding: 0 1em;
                width: 100%;
                z-index: 5;
                
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
	        }

    
	.mlogo {

	}
	
	    .mlogo img {
		    display: block;
			width: 100px;
	    }
    
    
	        .cmap {  
                width: 100%;
                height: 400px;
	        }
    
	
	#myBtn {
		bottom: 4em;
		right: 0.5em;
		width: 40px;
		height: 40px;
	}
    
    
	#footer .footerc {
        flex-direction: column;
        padding: 2em 0 0 0;
	}


		#footer .fre1 {
            flex-wrap: wrap;
            padding: 3em 0 1em 0;
			width: 100%;
	     }
    
		#footer .fre2 {
		    justify-content: flex-start;
			align-items: center;
			margin: 0 auto;
            padding: 1em 0;
			width: 100%;
	     }

    
		    #footer .fre1-div {
			    width: 55%;
                flex: auto;
	         }
    
    
		    #footer .fre2-logo {
                margin-bottom: 1em;
	         }

		        #footer .fre2-logo img {
			        width: 75px;
	            }
    
 		        #footer .fre1-div_titile {
                    text-align: left;
	             }

		        #footer .fre1-div_linklist {
                    text-align: left;
	             } 
	
    
			#page-wrapper {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
			}
		
			#navButton {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 60px;
				left: 0;
				position: fixed;
				top: 0;
				width:;
				z-index: 999;
			}

				#navButton .toggle {
					text-decoration: none;
					height: 50px;
					left: 0;
					position: absolute;
					text-align: center;
					top: 0;
					width: 100%;
					border: 0;
					outline: 0;
				}

					#navButton .toggle:before {
						-moz-osx-font-smoothing: grayscale;
						-webkit-font-smoothing: antialiased;
						font-family: FontAwesome, "Arial",sans-serif, serif;
						font-style: normal;
						font-weight: normal;
						text-transform: none !important;
					}

					#navButton .toggle:before {
						color: #FFF;
						border-radius: 5px;
						content: '\f0c9';
						font-size: 1em;
						width: 38px;
						height: 38px;
						left: 10px;
						line-height: 38px;
						opacity: 0.5;
						position: absolute;
						top: 10px;
						z-index: 1;
					}

					#navButton .toggle:after {
						background: #E71f19;
						border-radius: 5px;
						content: '';
						width: 38px;
						height: 38px;
						left: 10px;
						position: absolute;
						top: 10px;
					}
    
	
			#navPanel {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transform: translateX(-180px);
				-webkit-transform: translateX(-180px);
				-ms-transform: translateX(-180px);
				transform: translateX(-180px);
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 100%;
				left: 0;
				overflow-y: auto;
				position: fixed;
				top: 0;
				width: 180px;
				z-index: 10002;
				background: #1c2021;
				color: #fff;
				font-size: 0.8em;
				letter-spacing: 0.075em;
				text-transform:none;
				padding: 0.25em 0.75em 1em 0.75em;
			}
	
	
			body.navPanel-visible #page-wrapper {
				-moz-transform: translateX(180px);
				-webkit-transform: translateX(180px);
				-ms-transform: translateX(180px);
				transform: translateX(180px);
			}

			body.navPanel-visible #navButton {
				-moz-transform: translateX(180px);
				-webkit-transform: translateX(180px);
				-ms-transform: translateX(180px);
				transform: translateX(180px);
			}

			body.navPanel-visible #navPanel {
				-moz-transform: translateX(0);
				-webkit-transform: translateX(0);
				-ms-transform: translateX(0);
				transform: translateX(0);
			}
    
    
}


@media screen and (max-width: 400px) {
		
/* header */	

	.mlogo {

	}
	
	    .mlogo img {
		    display: block;
			width: 110px;
	    }
    
	.ind_a5 {  
        width: 75%;
	}

	    .ind_a5-div {  
            margin-bottom: 1.2em;
            width: 100%;
	    } 
    
    
	.company_flex-div {  
        display: block;
        position: relative;
        width: 45%;
	}

	    .company_flex-div-pic {  
            margin: 0.5em auto;
            width: 100%;
	    }  
    
	        .company_flex-div-pic img {  
                width: 60%;
	        }   
    
    
	.equtech_word {  
        flex-direction: column;
        margin: 0 auto 1em auto;
        text-align: center;
        width: 100%;
        
	}
    
  	    .x-icon {
  	        position: relative;
  	        width: 60px;
 	        height: 40px;
	    }

	    .x-iconab {
  	        position: absolute;
  	        width: 10px;
 	        height: 10px;
            background: #000;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
	    }

	    .x-icon::before,
	    .x-icon::after {
 	         content: "";
 	         position: absolute;
 	         top: 50%;
 	         left: 50%;
 	         width: 40px;
 	         height: 3px;
 	         background-color: #E71f19;
 	         transform-origin: center;
	    }  
    
    
	.DFM {
        display: block;
        position: relative;
        margin: 0 auto;
        width: 90%;
        text-align: center;
        border: solid 1px #E71f19;
        
		-moz-animation-name: DF;
		-moz-animation-duration: 2s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: DF;
		-webkit-animation-duration: 2s;
		-webkit-animation-delay: 0;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: DF;
		-ms-animation-duration: 2s;
		-ms-animation-delay: 0;
		-ms-animation-iteration-count: infinite;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: DF;
		-o-animation-duration: 2s;
		-o-animation-delay: 0;
		-o-animation-iteration-count: infinite;
		-o-animation-fill-mode: forwards;
		animation-name: DF;
		animation-duration: 2s;
		animation-delay: 0;
		animation-iteration-count: infinite;
		animation-fill-mode: forwards;   
	}

	        @keyframes DF {
	             0% {width: 300px;}
	            50% {width: 300px;}
 	           100% {width: 300px;}
	        }
    
    
		.DFM-t {
        	margin: -10px auto 0.3em auto;
       	 	width: 90%;
		}

		.DFM-t2 {
       	 	width: 90%;
		}
    

    
/* banner */


/* Wrapper */
	
	
/* area-container */	
	
	.footercontainer {  
		width: 68%;
	}    
	
/* setting */
    

    
/* Footer */


}


@media screen and (max-width: 370px) {
	
	.company_flex-div {  
        display: block;
        position: relative;
        width: 100%;
	}

	    .company_flex-div-pic {  
            margin: 0.5em auto;
            width: 100%;
	    }  
    
	        .company_flex-div-pic img {  
                width: 60%;
	        }   
 
	
}


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


			#page-wrapper {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
			}
		
			#navButton {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 60px;
				left: 0;
				position: fixed;
				top: 0;
				width:;
				z-index: 999;
			}

				#navButton .toggle {
					text-decoration: none;
					height: 50px;
					left: 0;
					position: absolute;
					text-align: center;
					top: 0;
					width: 100%;
					border: 0;
					outline: 0;
				}

					#navButton .toggle:before {
						-moz-osx-font-smoothing: grayscale;
						-webkit-font-smoothing: antialiased;
						font-family: FontAwesome, "Arial",sans-serif, serif;
						font-style: normal;
						font-weight: normal;
						text-transform: none !important;
					}

					#navButton .toggle:before {
						color: #FFF;
						border-radius: 5px;
						content: '\f0c9';
						font-size: 1em;
						width: 35px;
						height: 35px;
						left: 10px;
						line-height: 36px;
						opacity: 0.5;
						position: absolute;
						top: 10px;
						z-index: 1;
					}

					#navButton .toggle:after {
						background: #E71f19;
						border-radius: 5px;
						content: '';
						width: 35px;
						height: 35px;
						left: 10px;
						position: absolute;
						top: 10px;
					}
    
	
			#navPanel {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transform: translateX(-180px);
				-webkit-transform: translateX(-180px);
				-ms-transform: translateX(-180px);
				transform: translateX(-180px);
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 100%;
				left: 0;
				overflow-y: auto;
				position: fixed;
				top: 0;
				width: 180px;
				z-index: 10002;
				background: #1c2021;
				color: #fff;
				font-size: 0.8em;
				letter-spacing: 0.075em;
				text-transform:none;
				padding: 0.25em 0.75em 1em 0.75em;
			}
	
	
			body.navPanel-visible #page-wrapper {
				-moz-transform: translateX(180px);
				-webkit-transform: translateX(180px);
				-ms-transform: translateX(180px);
				transform: translateX(180px);
			}

			body.navPanel-visible #navButton {
				-moz-transform: translateX(180px);
				-webkit-transform: translateX(180px);
				-ms-transform: translateX(180px);
				transform: translateX(180px);
			}

			body.navPanel-visible #navPanel {
				-moz-transform: translateX(0);
				-webkit-transform: translateX(0);
				-ms-transform: translateX(0);
				transform: translateX(0);
			}
	
	
	
}




/*-------------滑鼠.hover--------------*/


.proicon {
	position:relative;
	width:100%;
	height:100%;
	float:left;
	overflow:hidden;
	text-align:center;
	cursor:default;
}

.proicon img {
	display:block;
	position:relative;
	-webkit-transition:all .4s linear;
	transition:all .4s linear;
}

.proicon:hover img {
	-ms-transform:scale(1.1);
	-webkit-transform:scale(1.1);
	transform:scale(1.1);
}

.proicon:hover .overlay{
	opacity:1;
	filter:alpha(opacity=100);
}

.proicon .overlay {
	width:100%;
	height:100%;
	position:absolute;
	overflow:hidden;
	top:0;
	left:0;
	opacity:0;
	background-color:rgba(0,0,0,0.8);
	-webkit-transition:all 0.4s ease-in-out;
	transition:all 0.4s ease-in-out;
	cursor: pointer;
}

.proiconab {
	display: block;
	position:absolute;
	overflow:hidden;
    padding: 2px 5px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #FFF;
}