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

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

	video {
        mix-blend-mode: screen; /* 將黑色背景過濾掉顯示透明效果 */
        background-color: transparent;
	}


/* Box Model */

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


/* Basic */

	body {
		width: 100%;
	}

		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.5px;
		line-height: 1.75em;
		text-align: justify;
	}


	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;
        color: #666;
	}

		a:hover {
			color: #ED6C00;
			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: ;
	}

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

	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: relative;
		padding: 0;
		width: 100%;
		height: auto;
		z-index: 1000;
		
		-moz-animation-name: nnav;
		-moz-animation-duration: 1s;
		-moz-animation-iteration-count: 1;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: nnav;
		-webkit-animation-duration: 1s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: nnav;
		-ms-animation-duration: 1s;
		-ms-animation-iteration-count: 1;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: nnav;
		-o-animation-duration: 1s;
		-o-animation-iteration-count: 1;
		-o-animation-fill-mode: forwards;
		animation-name: nnav;
		animation-duration: 1s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;		
	}

		@keyframes nnav {
		    0%    {top: -100px;}
			100%  {top: 0; }
		}



		#header nav {
			display: flex;
			position: relative;
			justify-content: flex-end;
			align-items: center;
            margin: 0 auto;
			width: 100%;
            background: rgba(0,0,0,0);
			z-index: 98;
		}


			#header nav ul li {
                display: flex;
                float: left;
                justify-content: center;
                align-items: center;
                margin: 0;
                padding: 0 30px;
                height: 80px;
				font-size: 1.15em;
				text-align: center;
			}

			    #header nav ul li:hover {
                    background: #EFEFEF;
			    }

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

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

			    #header nav ul li:last-child {
                    margin-left: 5px;
                    margin-right: 1em;
                    padding: 0 20px;
                    border-left: solid 1px #CCC;
			    }


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

			    #header nav ul li a {
				    color: #000;
			    }

				#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 {
					
				}


				#header nav ul li.submenu {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: auto;
				}

				#header nav ul li.submenu1 {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: auto;
                    background: #ed6c00;
                    color: #FFF;
				}

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

				#header nav ul li.current {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: auto;
				}

				#header nav ul li.current1 {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: auto;
                    background: #ed6c00;
                    color: #FFF;
				}

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

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


				#header nav ul li.active > a, #header nav ul li:hover > a {
					-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, #header nav ul li:hover {       
					-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:first-child:hover.active, #header nav ul li:first-child:hover:hover {
                    background: none;
					-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.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;
			position: relative;
		    width: 100%;	
		}

			#header.alt nav {
				position: relative;
			}

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

		.navlogo {
		    display: flex;
		    position: absolute;
		    left: 3%;
		    justify-content: center;
		    align-items: center;
		    width: 228px;
		}

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

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


		.path {
		    display: block;
		    position: relative;
		    padding: 0.25em 0;
		}


		.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: 2em;
		min-width: 8em;
		text-transform:; /*  uppercase全大寫, lowercase全小寫, capitalize第1字母大  */
        /* margin-top: calc(-1em + 1px); */
		z-index: 999999;
        text-align: center;
	}

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


		.dropotron > li {
			border-top: solid 1px #CCC;
		}

			.dropotron > li > a {
				-moz-transition: none;
				-webkit-transition: none;
				-ms-transition: none;
				transition: none;
				color: inherit;
				text-decoration: none;
				padding: 0.25em 1em;
			}

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



/* Banner */

	#banner {
		display: block;
		position: relative;
		margin: 0 auto;
		padding: 0;
		width: 100%;
		height: auto;
	}

		.inner {
			display: block;
			position: relative;
			margin: 0 auto;
			padding: 0;
			overflow: hidden;
			opacity: 0;
			z-index: 1;
			
			-moz-animation-name: inneract;
			-moz-animation-duration: 1s;
			-moz-animation-iteration-count: 1;
			-moz-animation-fill-mode: forwards;
			-webkit-animation-name: inneract;
			-webkit-animation-duration: 1s;
			-webkit-animation-iteration-count: 1;
			-webkit-animation-fill-mode: forwards;
			-ms-animation-name: inneract;
			-ms-animation-duration: 1s;
			-ms-animation-iteration-count: 1;
			-ms-animation-fill-mode: forwards;
			-o-animation-name: inneract;
			-o-animation-duration: 1s;
			-o-animation-iteration-count: 1;
			-o-animation-fill-mode: forwards;
			animation-name: inneract;
			animation-duration: 1s;
			animation-iteration-count: 1;
			animation-fill-mode: forwards;	
		}

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

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

	.bannersubtxt {  
        display: block;
        position: absolute;
        bottom: 1em;
        left: 50%;
        transform: translate(-50%,0);
        color: #FFF;
	}

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

	.bannerabr1 {  
        opacity: 0;
        
		-moz-animation-name: indani;
		-moz-animation-duration: infinite;
		-moz-animation-iteration-count: 1;
		-moz-animation-delay: 1s;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: indani;
		-webkit-animation-duration: 1s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-delay: 1s;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: indani;
		-ms-animation-duration: 1s;
		-ms-animation-iteration-count: 1;
		-ms-animation-delay: 1s;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: indani;
		-o-animation-duration: 1s;
		-o-animation-iteration-count: 1;
		-o-animation-delay: 1s;
		-o-animation-fill-mode: forwards;
		animation-name: indani;
		animation-duration: 1s;
		animation-iteration-count: 1;
        animation-delay: 1s;
		animation-fill-mode: forwards;	 
	}

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

	.bannerabr2 {  
        opacity: 0;
        
		-moz-animation-name: indani;
		-moz-animation-duration: infinite;
		-moz-animation-iteration-count: 1;
		-moz-animation-delay: 1s;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: indani;
		-webkit-animation-duration: 1s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-delay: 1s;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: indani;
		-ms-animation-duration: 1s;
		-ms-animation-iteration-count: 1;
		-ms-animation-delay: 1s;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: indani;
		-o-animation-duration: 1s;
		-o-animation-iteration-count: 1;
		-o-animation-delay: 1s;
		-o-animation-fill-mode: forwards;
		animation-name: indani;
		animation-duration: 1s;
		animation-iteration-count: 1;
        animation-delay: 1s;
		animation-fill-mode: forwards;	 
	}


    .banner-video { 
        display: block;
        position: relative;
        margin: 0 auto;
        width: 100%;
    }

        .banner-video img { 
            display: block;
            position: relative;
            width: 100%;
        }


/* area-container */	

	.headcontainer {  
        margin: 0 auto;
		width: 100%;
	}

	.bannercontainer {  
        margin: 0 auto;
		width: 100%;
	}

	.pathcontainer {  
        margin: 0 auto;
		width: 70%;
	}

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

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

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

	.bodycontainer4 {   /* pro use */
        margin: 0 auto;
        position: relative;
		width: 1100px;
	}

	.bodycontainer5 {  /* news use */
        margin: 0 auto;
        position: relative;
		width: 85%;
        background: #FFF;
	}



	.footercontainer {  
        margin: 0 auto;
		width: 85%;
	}  


/* Wrapper */

	.wrapper {
		position: relative;
	}

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

		.wrapper.style2 {  
			display: block;
            position: relative;
			margin: 0 auto;
            padding: 0;
            background: #000;
			width: 100%;
		}

		.wrapper.style3 {  
			display: block;
            position: relative;
			margin: 0 auto;
            padding: 0;
            background: #f2f2f2;
			width: 100%;
		}



/* setting */
	.pop-text {
	  /* 【核心關鍵 1】消除 HTML 斷行產生的中文字間距 */
	  font-size: 0; 
	}

	.pop-text span {
	  /* 【核心關鍵 2】在 span 內部重新指定正確的中文字體大小 */
	  font-weight: bold;
	  font-family: "Microsoft JhengHei", sans-serif; /* 設定適合中文字的字體 */
	  display: inline-block;
	  color: #FFFFFF;
  
	  /* 【核心關鍵 3】利用負的 margin 自由縮小中文字距（數字越負字越近） */
	  margin-right: -8px; 
  
	  /* 初始狀態 */
 	 transform: scale(0);
 	 opacity: 0;
  
 	 /* 3.5 秒循環動畫 */
 	 animation: fadeInHoldAndOut 3.5s ease infinite;
 	 animation-delay: calc(0.12s * var(--i)); 
	}

	/* 第一個文字為橘色 */
	.pop-text span:first-child {
	  color: #ED6C00;
	}

	/* 動態軌跡保持不變 */
	@keyframes fadeInHoldAndOut {
	  0% {
          transform: scale(0);
          opacity: 0;
	  }
	  15% {
          transform: scale(1.15);
          opacity: 1;
 	  }
 	  20% {
          transform: scale(1);
          opacity: 1;
	  }
 	  /* 停頓 2 秒 */
 	  80% {
          transform: scale(1);
          opacity: 1;
  	  }
 	  /* 一起淡出 */
 	  88% {
          transform: scale(1);
          opacity: 0;
 	  }
	  100% {
          transform: scale(0);
          opacity: 0;
	  }
	}


	.ind {  
	    display: flex;
 	    position: relative;
	    justify-content: center;
 	    align-items: stretch;
 	    margin: -100px auto 1em auto;
 	    width: 100%; /* 改為 100% 才能發揮 justify-content 效果 */
  	    height: 220px;
  	    z-index: 999;
	}

	.ind-div1 {  
    	display: flex;
    	position: relative;
    	flex-direction: column;
    	justify-content: center;
    	align-items: center;
    	width: 240px;
    	height: 220px;
    	background: #FFF;
    	transition: all 0.2s ease-in-out; /* 將過渡效果放在這裡，移入移出都有動畫 */
    	transition: all 0.2s ease-in-out;
    	border-right: solid 1px #CCC; 
    	box-sizing: border-box; /* 確保邊框不撐開寬度 */
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
	}

	.ind-div2 {  
    	display: flex;
    	position: relative;
    	flex-direction: column;
    	justify-content: center;
    	align-items: center;
    	width: 240px;
    	height: 220px;
    	background: #FFF;
    	transition: all 0.2s ease-in-out; /* 將過渡效果放在這裡，移入移出都有動畫 */
    	border-right: solid 1px #CCC; 
    	box-sizing: border-box; /* 確保邊框不撐開寬度 */
        border-radius: 0;
	}

	.ind-div3 {  
    	display: flex;
    	position: relative;
    	flex-direction: column;
    	justify-content: center;
    	align-items: center;
    	width: 240px;
    	height: 220px;
    	background: #FFF;
    	transition: all 0.2s ease-in-out; /* 將過渡效果放在這裡，移入移出都有動畫 */
    	box-sizing: border-box; /* 確保邊框不撐開寬度 */
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
	}

		.ind-div1:hover, .ind-div2:hover, .ind-div3:hover {  
    		color: #FFF;
    		background: #ed6c00;
    		cursor: pointer;
		}


	.ind-div-c {  
	    display: flex;
 	    position: relative;
        flex-direction: column;
	    justify-content: center;
 	    align-items: center;
        width: 100%;
        height: 100%;
	}

	    .ind-div-c-pic {  
	        display: block;
 	        position: relative;
            margin: 0 auto;
            width: 50%;
	    }

	        .ind-div-c-pic img {  
 	            position: relative;
                width: 100%;
	        }

	    #picp2 {  
	        display: none;
	    }

	    .ind-div-c-name {  
	        display: block;
 	        position: relative;
            margin: 0 auto;
            width: 80%;
            text-align: center;
	    }

		.ind-div1:hover .ind-div-c-name, .ind-div2:hover .ind-div-c-name, .ind-div3:hover .ind-div-c-name {  
    		color: #FFF;
		}


		.ind-div1:hover #picp2, .ind-div2:hover #picp2, .ind-div3:hover #picp2 {  
    		display: block;
		}

		.ind-div1:hover #picp1, .ind-div2:hover #picp1, .ind-div3:hover #picp1 {  
    		display: none;
		}



	.ind_wind-area {  
	    display: inline-block;
 	    position: absolute;
        padding: 50px;
        top: 2%;
        left: 50%;
        transform: translate(-50%, 0%);
        width: 1000px;
        z-index: 1;
        background: #000;
        border-radius: 100%;
	}


	.ind_wind {  
	    display: block;
        position: relative;
        margin: 0 auto;
        width: 92%;
        z-index: 1;
        
        animation: spin 15s linear infinite;
        transform-origin: center;
	}

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

	    @keyframes spin {
    	    from {
        	    transform: rotate(0deg); /* 起始角度 */
    	    }
    	    to {
       	     transform: rotate(-360deg); /* 結束角度 */
 	       }
	    }



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

	    .ind_pinfo-word {  
	        display: flex;
 	        position: relative;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            width: 60%;
            padding: 5em 3em 5em 2em;
            
            background-image: url("../../images/pic_indbg_grid.webp"), url("../../images/pic_indbg_wind.webp");
            background-size: 100%, 25%;
            background-position: left top, 90% 90%;
            background-repeat: repeat, no-repeat;
	    }

	    .ind_pinfo-pro {  
	        display: flex;
 	        position: relative;
            justify-content: space-between;
            align-items: stretch;
            width: 40%;
            padding-bottom: 2em;
	    }


	.ind_team {  
	    display: flex;
 	    position: relative;
        justify-content: space-between;
        align-items: stretch;
        padding: 3em 2em;
        width: 100%;
        background: #e8e8e8;
        background-image: url("../../images/pic_indt_bg.webp"), url("../../images/pic_indt_bg2.webp");
        background-repeat: no-repeat, no-repeat;
        background-position: left top, right top;
        background-size: 100%, 18%;
	}

	    .ind_team-wind {  
	        display: flex;
 	        position: relative;
            justify-content: center;
            align-items: flex-start;
            width: 32%;
            z-index: 10;
	    }

	        .ind_team-windab {  
	            display: block;
 	            position: absolute;

                animation: spin 3s linear infinite;
                transform-origin: center;
                z-index: 10;
	        }

	        .ind_team-wind img {  
	            display: block;
 	            position: relative;
                width: 100%;
	        }

	    .ind_team-partner {  
	        display: flex;
 	        position: relative;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            width: 63%;
            padding: 1.5em 1em 1em 1em;
            z-index: 10;
	    }

	        .partner_flex {  
	            display: flex;
 	            position: relative;
                justify-content:space-between;
                align-items: stretch;
                margin: 0.35em 0;
                width: 100%;
	        }

	            .partner_flex_icon {  
	                display: flex;
                    position: relative;
                    justify-content: center;
                    align-items: center;
                    flex: 0 0 80px;
	            }

	                .partner_flex_icon img {  
	                    width: 100%;
	                }

	            .partner_flex_instru {  
	                display: flex;
                    position: relative;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    flex: 1;
                    padding-left: 1em;
	            }


        /*-- 夥伴 line --*/
	    .ind_team-partner-line {  
	        display: inline-block;
 	        position: relative;
            margin: 0 0 1em 0;
            padding: 1.5em 1.5em 0 0;
            width: auto;
            border-top: solid 1.5px #CCC;
            border-right: solid 1.5px #CCC;
            text-align: left;
	    }

	    .ind_team-wind::before {  
            content: "";
	        display: block;
 	        position: absolute;
            border-top: solid 1.5px #CCC;
            width: 60%;
            top: 1.5em;
            left: 56%;
            z-index: 1;
	    }


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

	    .ind_fu_r1 {  
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            padding: 1em 3em 3em 3em;
            width: 40%;
            margin-left: 11%;
            background: rgba(255,255,255, 0.8);
	    }

	    .ind_fu_r1-tt {  
            margin-bottom: 1.5em;
	    }


	    .ind_fu_r2 {  
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            width: 80%;
            margin: 3em auto 0 auto;
	    }

	        .ind_fu_r2-div1 {  
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 8%;
                width: 12%;
	        }

	        .ind_fu_r2-div2 {  
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: -2%;
                width: 12%;
	        }

	        .ind_fu_r2-div3 {  
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: -10%;
                width: 12%;
	        }

	        .ind_fu_r2-div4 {  
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 4%;
                width: 12%;
	        }


	            .ind_fu_r2-div1 img, .ind_fu_r2-div2 img, .ind_fu_r2-div3 img, .ind_fu_r2-div4 img {  
                    display: block;
                    width: 100%;
	            }


    /*-- 首頁產品輪播設定 --*/

	.indproCarousel {
		display: block;
		position: relative;
		align-items: stretch;
		margin: 2em auto 2em auto;
		width: 100%;
        z-index: 10;
	}

      #myCarousel {
          
        --f-carousel-spacing: 0;
        --f-carousel-slide-width: 100%;
        --f-progress-color: transparent;
		  
        --f-carousel-slide-width: calc((100% - 60px) / 2); 
        --f-carousel-spacing: 0;

        --f-button-next-pos: 0rem;
        --f-button-prev-pos: 0rem;

        --f-button-width: 50px;
        --f-button-height: 50px;
        --f-button-border-radius: 50%;

        --f-button-color: #3c5da5;
        --f-button-hover-color: #5BBC2B;
        --f-button-active-color: #5BBC2B;

        --f-button-bg: rgba(0, 0, 0, 0);
        --f-button-hover-bg: rgba(0, 0, 0, 0);
        --f-button-active-bg: rgba(0, 0, 0, 0);

        --f-button-svg-width: 50px;
        --f-button-svg-height: 50px;
        --f-button-svg-stroke-width: 2;  
      }

      #myCarousel .f-carousel__slide {
        padding: 0;
		width: 33%;
		height: 100%;
      }


	.carousel_card {
		display: flex;
		flex-direction: column;
		position: relative;
		align-items: stretch;
		margin: 0;
        padding: 0;
		width: 100%;
        cursor: pointer;
	}

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

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

	    .carousel_card_proname {
		    display: block;
            position: absolute;
            top: 85%;
            left: 50%;
            transform: translate(-50%, 0);
		    width: 100%;
            /*writing-mode: vertical-rl;
            writing-mode: tb-rl;*/
            letter-spacing: 2px;
            text-align: center;
            z-index: 20;
	    }



      #Carousel {
        --f-carousel-spacing: 0;
        --f-carousel-slide-width: 100%;
        --f-progress-color: transparent;
		  
        --f-carousel-slide-width: 100%;
        --f-carousel-spacing: 0;

        --f-button-next-pos: 0;
        --f-button-prev-pos: 0;

        --f-button-width: 25px;
        --f-button-height: 100px;
        --f-button-border-radius: 0;

        --f-button-color: #ed6c00;
        --f-button-hover-color: #ed6c00;
        --f-button-active-color: #ed6c00;

        --f-button-bg: rgba(0, 0, 0, 0.1);
        --f-button-hover-bg: rgba(0, 0, 0, 0.2);
        --f-button-active-bg: rgba(0, 0, 0, 0.2);

        --f-button-svg-width: 30px;
        --f-button-svg-height: 30px;
        --f-button-svg-stroke-width: 2;  
      }

      #Carousel .f-carousel__slide {
          display: flex;
          justify-content: center;
          align-content: center;
          margin: auto;
		  width: 100%;
      }

      .carousel_pro {
	      display: flex;
	      flex-direction: column;
	      position: relative;
          justify-content: center;
	      align-items: center;
	      margin: 0 auto;
	      width: 100%;
      }

          .carousel_pro-pic {
	          display: block;
	          position: relative;
	          margin: 0 auto;
              padding: 3em 1em 0.5em 1em;
	          width: 85%;
          }

              .carousel_pro-pic img {
	              display: block;
	              width: 100%;
              }

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


      /*-- 產品應用 --*/

      .apli-list {
	      display: grid;
	      position: relative;
          flex-wrap: wrap;
          grid-template-columns: repeat(2, 48%); /* n格, m寬度 */
          justify-content: space-between;
          align-items: stretch;
	      margin: 0 auto 3em auto;
	      width: 100%;
      }

          .apli-list-div {
	          display: flex;
	          flex-direction: column;
	          position: relative;
              justify-content: center;
	          align-items: center;
	          margin: 0 auto 3em auto;
	          width: 100%;
              overflow: hidden;
          }

              .apli-list-div img {
	              display: block;
                  position: relative;
	              width: 100%;
                  -webkit-transition:all .2s linear;
	              transition:all .2s linear;
              }

              .apli-list-div:hover img {
              	  -ms-transform:scale(1.1);
              	  -webkit-transform:scale(1.1);
              	  transform:scale(1.1);
              }

              .apli-list-div:hover .overlay{
              	  opacity:1;
              	  filter:alpha(opacity=100);
              }

              .apli-list-div .overlay {
                  width:100%;
                  height:100%;
                  position:absolute;
                  overflow:hidden;
                  top:0;
                  left:0;
                  opacity:0;
                  background-color:rgba(0,0,0,0.7);
                  -webkit-transition:all 0.4s ease-in-out;
                  transition:all 0.4s ease-in-out;
                  cursor: pointer;
              }


          .apli-list-div-ab {
	          display: block;
              position: absolute;
              bottom: 0;
              padding: 1.5em 3em 1em 3em;
              width: 100%;
              height: auto;
              background: rgba(255,255,255,0.9);
              z-index: 10;
          }

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

              .apli-list-div-flex-icon {
	              display: block;
                  position: relative;
                  flex: 0 0 90px;
              }

                  .apli-list-div-flex-icon img {
	                  display: block;
                      position: relative;
                      width: 100%;
                  }


              .apli-list-div-flex-word {
	              display: flex;
                  position: relative;
                  justify-content: flex-start;
                  align-items: center;
                  padding: 0 0 0 1em;
                  flex: 1 1 auto;
              }

                  .apli-list-div-flex-word a {
	                  color: #ED6C00;
                  }


          .apli-list-note {
	          display: -webkit-box;
              position: relative;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              margin: 0.5em auto;
              width: 100%;
          }


      /*-- 產品應用內頁--*/

      .apli_ptitlearea {
	      display: block;
          position: relative;
          padding: 2em 0;
          width: 100%;
          z-index: 20;
      }

      .apli_icon {
	      display: block;
          position: relative;
          margin: 0 auto 1.5em auto;
          width: 92px;
          z-index: 1;
      }

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

      .apli_img {
	      display: block;
          position: relative;
          width: 100%;
          margin-top: -10%;
          z-index: 1;
      }

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


      .apli-pflex {
	      display: grid;
	      position: relative;
          flex-wrap: wrap;
          grid-template-columns: repeat(2, 46%); /* n格, m寬度 */
          justify-content: space-between;
          align-items: stretch;
	      margin: 0 auto 3em auto;
	      width: 100%;
      }

          .apli-pflex-div {
	          display: flex;
	          flex-direction: column;
	          position: relative;
              justify-content: flex-start;
	          align-items: flex-start;
	          margin: 0 auto 2em auto;
	          width: 100%;
          }

              .apli-pflex-div-tt {
	              display: block;
	              margin: 0 auto;
                  padding: 0;
	              width: 100%;
              }

              .apli-pflex-div-txt {
	              display: block;
	              margin: 0 auto;
                  padding: 1em 0;
	              width: 100%;
                  border-bottom: dashed 1px #000;
              }

              .apli-pflex-div-txt-flex {
	              display: flex;
	              position: relative;
                  flex-wrap: wrap;
                  justify-content: flex-start;
                  align-items: stretch;
                  margin: 0.35em 0 0 0;
              }

                  .apli-pflex-div-txt-flex-dd {
	                  display: flex;
	                  position: relative;
                      justify-content: flex-start;
                      align-items: flex-start;
                      min-width: 15em;
                      padding-left: 1em;
                      text-indent: -1em;
                      text-align: left;
                  }

              .apli-pflex-div-txt1 {
	              display: block;
	              margin: 0 auto;
                  padding: 1em 0;
	              width: 100%;
              }

                  .apli-pflex-div-txt-flex-dd1 {
	                  display: flex;
	                  position: relative;
                      justify-content: flex-start;
                      align-items: center;
                      margin-right: 1em;
                      width: auto;
                      text-align: left;
                  }

                  .apli-pflex-div-txt-icon {
	                  display: block;
	                  width: 48px;
                      padding-right: 5px;
                  }

                  .apli-pflex-div-txt-icon img {
	                  display: block;
	                  width: 100%;
                  }


    /*-- 產品 --*/

    .pro_sub-prolist { 
        display: grid;
        position: relative;
        grid-template-columns: repeat(4, 25%); /* 4格, 23%寬度 */
        justify-content: space-between;
        align-items: stretch;
        margin: 0 auto 3em auto;
        width: 840px;
    }

	    .pro_sub-prolist-div { 
    	    display: flex;
    	    position: relative;
    	    flex-direction: column;
    	    justify-content: center;
    	    align-items: center;
    	    width: 100%;
    	    background: #FFF;
    	    transition: all 0.2s ease-in-out; /* 將過渡效果放在這裡，移入移出都有動畫 */
    	    transition: all 0.2s ease-in-out;
    	    border-right: solid 1px #CCC; 
    	    box-sizing: border-box; /* 確保邊框不撐開寬度 */
        }

	    .pro_sub-prolist-div:last-child { 
    	    border-right: solid 0px #CCC; 
        }

	        .pro_sub-prolist-div-pic { 
    	        display: block;
    	        position: relative;
                width: 100%;
            }

	        .pro_sub-prolist-div-pic img { 
    	        display: block;
    	        position: relative;
                width: 100%;
            }

	    #picp2 {  
	        display: none;
	    }

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

		.ind-div1:hover .pro_sub-prolist-div-name {  
    		color: #FFF;
		}


		.pro_sub-prolist-div:hover #picp2 {  
    		display: block;
		}

		.pro_sub-prolist-div:hover #picp1 {  
    		display: none;
		}


    .pro_area { 
        display: block;
        position: relative;
        background: #f2f2f2;
        background-image: url("../../images/pic_pro_bg2.png"), url("../../images/pic_pro_bg.webp");
        background-repeat: no-repeat, no-repeat;
        background-position: right top, left top;
        background-size: 15%, 100%;
    }

    .pro_info { 
        display: block;
        position: relative;
        padding: 4em 0 6em 0;
        width: 100%;
    }

    .pro_infoflex { 
        display: grid;
        position: relative;
        grid-template-columns: repeat(2, 48%); /* n格, m%寬度 */
        justify-content: space-between;
        align-items: stretch;
        margin: 0 auto 2em auto;
        width: 100%;
    }

    .pro_infoflex-div1 { 
        display: block;
        position: relative;
        width: 95%;
    }

    .pro_infoflex-div2 { 
        display: block;
        position: relative;
        width: 100%;
    }

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

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

        .pro_infoflex-div-nav { 
            display: block;
            position: relative;
            margin: 0 auto;
            width: 80%;
        }

        .pro_infoflex-div-tt1 { 
            display: block;
            position: relative;
            margin: 3em auto 0 auto;
            width: 100%;
        }


        .pro_infoflex-div-tt2 { 
            display: block;
            position: relative;
            margin: 0.75em auto 0.5em auto;
            width: 100%;
        }


        .pro_infoflex-div-box { 
            display: block;
            position: relative;
            margin: 0.5em auto;
            padding: 0.35em 1em 0.3em 1em;
            width: 100%;
            background: #ED6C00;
            color: #FFF;
        }


        .pro_infoflex-div-txt1 { 
            display: block;
            position: relative;
            margin: 1em auto 2em auto;
            width: 100%;
        }

        .pro_infoflex-div-txt2 { 
            display: block;
            position: relative;
            margin: 1em auto;
            width: 100%;
        }


    .pro_ptflex { 
        display: grid;
        position: relative;
        grid-template-columns: repeat(3, 33.33%); 
        justify-content: space-between;
        align-items: stretch;
        margin: 5em auto 2em auto;
        width: 100%;
    }

        .pro_ptflex-div, .pro_ptflex-div1, .pro_ptflex-div2 { 
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 1.5em 2em;
            width: 100%;
            border: solid 1px #CCC;
        }

            .pro_ptflex-div-pic { 
                display: block;
                position: relative;
                margin: 0 auto;
                width: 115px;
            }

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

            .pro_ptflex-div-txt1 { 
                display: block;
                position: relative;
                padding: 0.75em 0;
                width: 100%;
                text-align: center;
            }

            .pro_ptflex-div-txt2 { 
                display: block;
                position: relative;
                padding: 0;
                width: 100%;
                text-align: center;
            }


    .pro_ptable { 
        display: inline-block;
        position: relative;
        justify-content: space-between;
        align-items: stretch;
        margin: 0.5em auto 1em auto;
        border-top: solid 1px #b3b3b3;
    }

        .pro_ptable-r { 
            display: flex;
            position: relative;
            justify-content: flex-start;
            align-items: stretch;
            width: auto;
            border-bottom: solid 1px #b3b3b3;
        }

            .pro_ptable-r1 { 
                display: flex;
                position: relative;
                justify-content: flex-start;
                align-items: center;
                padding: 0.3em 2em 0.25em 2em;
                width: auto;
                min-width: 15em;
                background-color: #e6e6e6;
                text-align: left;
            }

            .pro_ptable-r1-1 { 
                display: flex;
                position: relative;
                justify-content: flex-start;
                align-items: center;
                padding: 0.3em 2em 0.25em 2em;
                width: auto;
                min-width: 15em;
                background-color: #FFF;
                text-align: left;
            }

            .pro_ptable-r2 { 
                display: flex;
                position: relative;
                justify-content: flex-start;
                align-items: center;
                padding: 0.3em 2em 0.25em 2em;
                width: auto;
                text-align: left;
            }

    .pro_pnote { 
        display: inline-block;
        position: relative;
        justify-content: space-between;
        align-items: stretch;
        margin: 0.5em auto 1em auto;
        padding: 1em 0 0 0;
        width: 100%;
        border-top: solid 1px #b3b3b3;
    }


    .pro_pnote_flex { 
        display: flex;
        position: relative;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: stretch;
        margin: 0.5em auto 1em auto;
        width: 100%;
    }

        .pro_pnote_flex-div { 
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: space-between;
            align-items: stretch;
            margin-bottom: 1em;
            width: 48%;
        }

        .pro_pnote_flex-list { 
            display: block;
            position: relative;
            padding: 0.15em 0 0.15em 1em;
            width: 100%;
            text-indent: -1em;
        }


    /*-- about us --*/

    .about-a1 { 
        display: block;
        position: relative;
        width: 100%;
        background: #f2f2f2;
        background-image: url("../../images/pic_about_bg1.png");
        background-size: 20%;
        background-position: right bottom;
        background-repeat: no-repeat;
        z-index: 1;
    }

    .about-nav { 
        display: grid;
        position: relative;
        grid-template-columns: repeat(4, 25%); /* 4格, 23%寬度 */
        justify-content: space-between;
        align-items: stretch;
        margin: 0 auto;
        padding: 0;
        width: 840px;
        background: #FFF;
        z-index: 20;
    }

        .about-nav-div { 
            display: flex;
            position: relative;
            justify-content: center;
            align-items: center;
            padding: 1.5em 0;
            width: 100%;
            border-bottom: solid 4px #f2f2f2;
            color: #000;
            transition: all 0.2s ease-in-out; /* 將過渡效果放在這裡，移入移出都有動畫 */
    	    transition: all 0.2s ease-in-out;
        }

        .about-nav-div:hover { 
            border-bottom: solid 4px #ED6C00;
            color: #ED6C00;
        }

            .about-nav-div-c { 
                display: block;
                position: relative;
                padding: 0;
                width: 100%;
                border-right: solid 1px #CCC;
                cursor: pointer;
                text-align: center;
            }

            .about-nav-div-c1 { 
                display: block;
                position: relative;
                padding: 0;
                width: 100%;
                cursor: pointer;
                text-align: center;
            }


    .about-line { 
        display: block;
        position: relative;
        margin: 2em auto;
        width: 1.5px;
        height: 80px;
        background: linear-gradient(to bottom, rgba(208,109,0,0),#ED6C00,rgba(208,109,0,0));
        background-size: 100% 200%;
        /*background: #E71f19;*/
        animation: vertical-move 3s linear infinite;
        z-index: 20;
    }

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


    .about-txt { 
        display: block;
        position: relative;
        margin: 0.5em auto;
        width: 800px;
        opacity: 0;
		z-index: 20;
        
        -moz-animation-name: movup;
		-moz-animation-duration: 1s;
		-moz-animation-iteration-count: 1;
		-moz-animation-fill-mode: forwards;
		-moz-animation-delay:0.5s;
		-webkit-animation-name: movup;
		-webkit-animation-duration: 1s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
		-webkit-animation-delay:0.5s;
		-ms-animation-name: movup;
		-ms-animation-duration: 1s;
		-ms-animation-iteration-count: 1;
		-ms-animation-fill-mode: forwards;
		-ms-animation-delay:0.5s;
		-o-animation-name: movup;
		-o-animation-duration: 1s;
		-o-animation-iteration-count: 1;
		-o-animation-fill-mode: forwards;
		-o-animation-delay:0.5s;
		animation-name: movup;
		animation-duration: 1s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
        animation-delay:0.5s;
    }

	 @keyframes movup {
 	     0%   {top: 100px; opacity: 0;}
 	     100% {top: 0em; opacity: 1;}
     }


    /* -- 計數 -- */
    .stats {
        display: grid;
        position: relative;
        grid-template-columns: repeat(4, 25%); 
        /*grid-template-columns: repeat(4, 1fr);*/
        margin: 2em auto 0 auto;
        padding: 2em 0 5em 0;
        text-align: center;
        width: 60%;
    }
 
    .stat-number {
        font-size: 4.2em;
        font-weight: 800;
        line-height: 1;
        color: #000;
    }

    .stat-label {
        margin-top: 18px;
        font-size: 1em;
        font-weight: 600;
        color: #000;
    }


    .about-bg2 { 
        display: block;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 80%;
        z-index: 1;
    }

        .about-bg2 img { 
            display: block;
            width: 100%;
            z-index: 1;
        }

    /* 經營理念 */
    .about-a2 { 
        display: block;
        position: relative;
        width: 100%;
        padding: 4em 0;
        background-image: url("../../images/pic_about_bg3.webp");
        background-repeat: repeat-y;
        background-size: 100%;
    }


    .about-line1 { 
        display: block;
        position: absolute;
        bottom: -40px;
        left: 50%;
        width: 1.5px;
        height: 80px;
        background: linear-gradient(to bottom, rgba(208,109,0,0),#ED6C00,rgba(208,109,0,0));
        background-size: 100% 200%;
        /*background: #E71f19;*/
        animation: vertical-move1 3s linear infinite;
        z-index: 20;
    }

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

    .about-ani { 
        display: block;
        position: relative;
        margin: 0 auto;
        width: 700px;
    }

        .about-ani img { 
            display: block;
            position: relative;
            width: 100%;
        }

    /* 未來願景 */
    .about-a3 { 
        display: block;
        position: relative;
        width: 100%;
        padding: 4em 0;
        background-image: url("../../images/pic_about_bg4.png"), url("../../images/pic_about_bg5.png");
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 20%, cover;
    }

    .about-txt2 { 
        display: block;
        position: relative;
        margin: 0.5em auto;
        width: 800px;
        text-align: center;
		z-index: 20;
    }

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

        .about-ani2 img { 
            display: block;
            position: relative;
            width: 100%;
        }

    /* 歷史沿革 */
    .about-a4 {   
        display: block;
        position: relative;
        width: 100%;
        padding: 4em 0 5em 0;
    }

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

    .about-his_flex {   
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border-bottom: solid 1px #999999;
        transition: all 0.2s ease-in-out; /* 將過渡效果放在這裡，移入移出都有動畫 */
        transition: all 0.2s ease-in-out;
    }

        .about-his_flex:hover {   
            color: #ED6C00;
        }

        .about-his_flex-date {   
            display: flex;
            position: relative;
            justify-content: space-between;
            padding: 0.7em 0;
            width: 180px;
            font-size: 60px;
            font-weight: bold;
        }

        .about-his_flex-icon {   
            display: block;
            position: relative;
            margin-left: 15px;
            width: 25px;
            height: 25px;
            animation: spin1 2s linear infinite;
            transform-origin: center;
        }

            .about-his_flex-icon img {   
                display: block;
                position: relative;
                width: 100%;
            }

	    @keyframes spin1 {
    	    from {
        	    transform: rotate(0deg); /* 起始角度 */
    	    }
    	    to {
       	     transform: rotate(-360deg); /* 結束角度 */
 	       }
	    }

        .about-his_flex-div {   
            display: block;
            position: relative;
            flex: 1 1 auto;
            padding: 0 0 0 1em;
            text-align: left;
        }



    /* -- 技術優勢 -- */
    .tech-a1 { 
        display: block;
        position: relative;
        width: 100%;
        background: #f2f2f2;
        padding: 0 0 3em 0;
        z-index: 1;
    }

    .tech-nav { 
        display: grid;
        position: relative;
        grid-template-columns: repeat(3, 33%); 
        justify-content: space-between;
        align-items: stretch;
        margin: 0 auto;
        padding: 0;
        width: 840px;
        background: #FFF;
        z-index: 20;
    }

        .tech-nav-div { 
            display: flex;
            position: relative;
            justify-content: center;
            align-items: center;
            padding: 1.5em 0;
            width: 100%;
            border-bottom: solid 4px #f2f2f2;
            color: #000;
            transition: all 0.2s ease-in-out; /* 將過渡效果放在這裡，移入移出都有動畫 */
    	    transition: all 0.2s ease-in-out;
        }

        .tech-nav-div:hover { 
            border-bottom: solid 4px #ED6C00;
            color: #ED6C00;
        }

            .tech-nav-div-c { 
                display: block;
                position: relative;
                padding: 0;
                width: 100%;
                border-right: solid 1px #CCC;
                cursor: pointer;
                text-align: center;
            }

            .tech-nav-div-c1 { 
                display: block;
                position: relative;
                padding: 0;
                width: 100%;
                cursor: pointer;
                text-align: center;
            }


    .tech-abili { 
        display: grid;
        position: relative;
        grid-template-columns: repeat(2, 50%); 
        justify-content: space-between;
        align-items: stretch;
        margin: 5em auto;
        width: 80%;
        z-index: 20;
    }

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

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

        .tech-abili-div { 
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            width: 100%;
            padding: 0 3em;
        }

            .tech-abili-div-list { 
                display: block;
                position: relative;
                width: 100%;
                padding: 1em 0;
                border-bottom: solid 1px #ED6C00;
            }

            .tech-abili-div-list:hover { 
                color: #ED6C00;
            }

            .tech-abili-div-list-t { 
                margin-bottom: 5px;
            }


    .tech-a2 { 
        display: block;
        position: relative;
        width: 100%;
        padding: 3em 0;
        z-index: 1;
    }

    .conform_ani { 
        display: block;
        position: relative;
        padding: 0em 0 0 0;
        width: 100%;
        z-index: 1;
    }

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

    .conform_aniab { 
        display: block;
        position: absolute;
        width: 100%;
        z-index: 2;
        animation: revealAndFade 7s ease-in-out infinite;
    }

        @keyframes revealAndFade {
          /* 【階段一：由左到右出現】耗時 1 秒 (0% - 10%) */
          0% {
            clip-path: inset(0 100% 0 0);
            opacity: 1;
          }
          10% {
            clip-path: inset(0 0 0 0);
            opacity: 1;
          }

          /* 【階段二：原地停頓不變】持續 8 秒 (10% - 90%) */
          90% {
            clip-path: inset(0 0 0 0);
            opacity: 1;
          }

          /* 【階段三：淡出透明消失】耗時 1 秒 (90% - 100%) */
          100% {
            clip-path: inset(0 0 0 0);
            opacity: 0;
          }
        }


    .conform_card { 
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .service-card1 {
        display: block;
        position: absolute;
        top: 57%;
        left: 37%;
        transform: translate(-50%, -50%);
        width: 18%;
        padding: 2em;
        border: 2px solid #ED6C00;
        border-radius: 15px;
        background-color: #fff;
        box-sizing: border-box;
        z-index: 10;
        animation: upup1 7s ease-in-out infinite;
    }

    .service-card2 {
        display: block;
        position: absolute;
        top: 52%;
        left: 57%;
        transform: translate(-50%, -50%);
        width: 18%;
        padding: 2em;
        border: 2px solid #ED6C00;
        border-radius: 15px;
        background-color: #fff;
        box-sizing: border-box;
        z-index: 10;
        animation: upup2 7s ease-in-out infinite;
    }

    .service-card3 {
        display: block;
        position: absolute;
        top: 38%;
        left: 77%;
        transform: translate(-50%, -50%);
        width: 18%;
        padding: 2em;
        border: 2px solid #ED6C00;
        border-radius: 15px;
        background-color: #fff;
        box-sizing: border-box;
        z-index: 10;
        animation: upup3 7s ease-in-out infinite;
    }

        @keyframes upup1 {
          0%   {top: 60%; opacity: 0;}
          10%  {top: 60%; opacity: 0;} 
          15%  {top: 57%; opacity: 1;}
          90%  {opacity: 1;}
          100% {opacity: 0;}
        }

        @keyframes upup2 {
          0%   {top: 55%; opacity: 0;}
          13%  {top: 55%; opacity: 0;} 
          18%  {top: 52%; opacity: 1;}
          90%  {opacity: 1;}
          100% {opacity: 0;}
        }

        @keyframes upup3 {
          0%   {top: 42%; opacity: 0;}
          16%  {top: 42%; opacity: 0;} 
          22%  {top: 38%; opacity: 1;}
          90%  {opacity: 1;}
          100% {opacity: 0;}
        }

        /* 右上角標誌容器 */
        .icon-badge {
          position: absolute;
          top: -45px;
          right: 20px;
          width: 6em;
          height: 6em;
        }

        /* 內容文字樣式 */
        .service-card-tt {
          margin-bottom: 10px;
          font-weight: bold;
        }

        /* 下方對話框尖角 */
        .pointer {
          position: absolute;
          bottom: -33px; /* 根據邊框粗細調整 */
          left: 65%;
          transform: translateX(-50%);
          width: 60px;
          height: 30px;
        }

        /* 使用偽元素製作空心三角形 */
        .pointer::before, .pointer::after {
          content: "";
          position: absolute;
          border-style: solid;
        }

        /* 外層橘色大三角 */
        .pointer::before {
          border-width: 27px 25px 0 25px;
          border-color: #ED6C00 transparent transparent transparent;
          top: 0;
          left: 0;
        }

        /* 內層白色小三角 (蓋掉中間變成空心) */
        .pointer::after {
          border-width: 25px 23px 0 23px;
          border-color: #fff transparent transparent transparent;
          top: -2px; /* 向上微調以對齊邊框線 */
          left: 2px;
        }


    .tech-a3 { 
        display: block;
        position: relative;
        width: 100%;
        background: #f2f2f2;
        padding: 0 0 3em 0;
        z-index: 1;
    }


	.timelinearea {
        display: block;
        position: relative;
		margin: 3em auto 0 auto;
		width: 70%;
	}

	    .timelinearea-line {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
		    width: 1px;
            height: 100%;
            background: #999999;
	    }

	    .time-dl {
            display: flex;
            position: relative;
            justify-content: space-between;
            align-items: stretch;
            margin: 0 0 3em 0;
            width: 100%;
            z-index: 5;
	    }

	        .time-dd1 {
                display: flex;
                position: relative;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 43%;
	        }

	            .time-dd2-tt {
                    display: block;
                    position: relative;
                    margin-bottom: 5px;
                    width: 100%;
	            }

	            .time-dd2-txt1 {
                    display: block;
                    position: relative;
                    margin-bottom: 5px;
                    width: 100%;
	            }

	            .time-dd2-txt2 {
                    display: block;
                    position: relative;
                    margin-bottom: 5px;
                    width: 100%;
                    padding-left: 1em;
                    text-indent: -1em;
	            }


	        .time-pic {
                display: flex;
                position: relative;
                justify-content: flex-start;
                align-items: center;
                width: 43%;
	        }

	            .time-pic img {
                    display: block;
                    position: relative;
                    width: 100%;
                    border-radius: 10px;
	            }

	        .time-pt {
                display: flex;
                position: relative;
                justify-content: center;
                align-items: center;
                width: 8%;
	        }

	        .time-pt-pp {
                display: block;
                position: relative;
                width: 30px;
                height: 30px;
                background: #ED6C00;
                border-radius: 30px;
	        }


    /* -- QC -- */
    .QCr1_flex { 
        display: grid;
        position: relative;
        grid-template-columns: repeat(2, 50%); 
        justify-content: space-between;
        align-items: stretch;
        margin: 0 auto;
        width: 100%;
    }

        .QCr1_flex-div-cf { 
            display: flex;
            position: relative;
            justify-content: flex-end;
            margin: 0 auto;
            padding: 5em 0;
            padding-right: 20%;
            width: 100%;
            background-image: url("../../images/pic2_qc_cf_bg.webp");
            background-size: cover;
        }

            .QCr1_flex-div-cf-pic { 
                display: block;
                position: relative;
                width: 50%;
            }

            .QCr1_flex-div-cf-pic img { 
                display: block;
                position: relative;
                width: 100%;
            }

        .QCr1_flex-div-export { 
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            margin: 0 auto;
            padding: 2em 1em;
            width: 100%;
            background: #FFF;
            background-image: url("../../images/pic2_qc_cf_bg3.webp"), url("../../images/pic2_qc_cf_bg2.webp");
            background-size: 50%, cover;
            background-position: right 60%, top center;
            background-repeat: no-repeat, repeat-y;
            border: solid 1px #CCC;
        }

        .QCr1_flex-div-exprot-r1 { 
            display: block;
            position: relative;
            margin: 0 auto 1.35em 8%;
            width: 80%;
            text-align: left;
        }

        .QCr1_flex-div-exprot-r2 { 
            display: block;
            position: relative;
            margin: 0 auto 2.5em 8%;
            padding-bottom: 2.5em;
            width: 80%;
            border-bottom: solid 1px #ED6C00;
        }

        .QCr1_flex-div-exprot-r3 { 
            display: block;
            position: relative;
            margin: 0 auto 1em 8%;
            width: 80%;
            text-align: left;
        }

        .QCr1_flex-cfS-nav { 
            display: block;
            position: relative;
            margin: 1em auto 1em 8%;
            width: 80%;
        }

        .slider-nav-static {
           display: flex;
           flex-wrap: wrap; 
           gap: 12px;
           justify-content: flex-start;
        }

        /* 單個縮圖樣式 */
        .thumb-item {
           width: 80px;
           cursor: pointer;
           opacity: 0.5;
           transition: all 0.3s ease;
           border-radius: 4px;
           overflow: hidden;
           border: 2px solid transparent;
        }
        .thumb-item img {
           width: 100%;
           height: 100%;
           object-fit: cover;
        }

        /* 滑鼠懸停與選中狀態 */
        .thumb-item:hover {
           opacity: 0.8;
        }
        .thumb-item.active {
           opacity: 1;
           border: solid 1px #ED6C00; 
        }

        .slider-nav-name {
           display: flex;
           flex-wrap: wrap; 
           gap: 12px;
           justify-content: flex-start;
        }

        /* 單個縮圖樣式 */
        .sname-item {
           width: 80px;
           cursor: pointer;
           opacity: 0.5;
           transition: all 0.3s ease;
           border-radius: 4px;
           overflow: hidden;
        }

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

        .QCr_cf_flex-div { 
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 1em;
            width: 33%;
        }

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

            .QCr_cf_flex-div-txt { 
                display: block;
                position: relative;
                padding: 0.25em 1em;
                width: 100%;
                text-align: center;
            }


    .QCr_adm { 
        display: block;
        position: relative;
        background: #FFF;
        background-image: url("../../images/pic2_qc_qtbg1.webp");
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        margin: 0 auto;
        padding: 5em 0 10em 0;
        width: 100%;
    }

    .QCr_admbgab { 
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        animation: reveal1 3s ease-in-out infinite;
        z-index: 1;
    }

        @keyframes reveal1 {
          /* 【階段一：由左到右出現】耗時 1 秒 (0% - 10%) */
          0% {
            clip-path: inset(0 50% 0 50%);
            opacity: 0;
          }
          15% {
            clip-path: inset(0 0 0 0);
            opacity: 1;
          }

          /* 【階段二：原地停頓不變】持續 8 秒 (10% - 90%) */
          85% {
            clip-path: inset(0 0 0 0);
            opacity: 1;
          }

          /* 【階段三：淡出透明消失】耗時 1 秒 (90% - 100%) */
          100% {
            clip-path: inset(0 0 0 0);
            opacity: 0;
          }
        }


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


    .QCr_adm_flex { 
        display: grid;
        position: relative;
        grid-template-columns: repeat(6, 13%); 
        justify-content: space-between;
        align-items: stretch;
        margin: 2em auto;
        padding: 2em 0;
        width: 85%;
        z-index: 10;
    }

        .QCr_adm_flex-div { 
            display: flex;
            position: relative;
            justify-content: space-between;
            align-items: stretch;
            width: 100%;
            border: solid 1px #000;
        }

        .QCr_adm_flex-div { 
            display: flex;
            position: relative;
            justify-content: space-between;
            align-items: stretch;
            border: solid 2px #ed6c00;
            background: #FFF;
            padding: 0.5em;
            width: 100%;
            border-radius: 200px;
        }

        .QCr_adm_flex-dc { 
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: space-between;
            align-items: stretch;
            background: #fdf0e5;
            padding: 1em;
            width: 100%;
            border-radius: 200px;
        }

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

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

        .QCr_adm_flex-dc-tt { 
            display: block;
            position: relative;
            padding: 0.5em 0;
            width: 100%;
            border-bottom: solid 1px #ED6C00;
            text-align: center;
        }

        .QCr_adm_flex-dc-txt { 
            display: block;
            position: relative;
            padding: 1em 0;
            width: 100%;
            min-height: 200px;
        }


    .QCr_test { 
        display: block;
        position: relative;
        background: #FFF;
        background-image: url("../../images/pic2_qc_qtbg3.webp");
        background-size: 100%;
        background-position: bottom center;
        background-repeat: no-repeat;
        margin: 0 auto;
        padding: 1em 0 10em 0;
        width: 100%;
    }

    .QCr_test_flex { 
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: stretch;
        margin: 2em auto;
        padding: 2em 0;
        width: 85%;
        z-index: 10;
    }

        .QCr_test_flex-div1 { 
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: space-between;
            align-items: stretch;
            width: 31%;
        }

        .QCr_test_flex-divtt { 
            display: block;
            position: relative;
            width: 35%;
        }

        .QCr_test_flex-div2 { 
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: space-around;
            align-items: stretch;
            width: 31%;
        }


        .QCr_test_flex-div-flex { 
            display: flex;
            position: relative;
            justify-content: space-between;
            align-items: stretch;
            margin-bottom: 10px;
            width: 100%;
        }

           .QCr_test_flex-div-pic { 
                display: block;
                position: relative;
                width: 40%;
            }

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

            .QCr_test_flex-div-txt { 
                display: flex;
                position: relative;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 55%;
            }

                .QCr_test_flex-div-txttt { 
                    display: block;
                    position: relative;
                    padding-bottom: 0.5em;
                    width: 100%;
                    border-bottom: solid 1px #ED6C00;
                }

                .QCr_test_flex-div-txtword { 
                    display: block;
                    position: relative;
                    padding-top: 0.5em;
                    width: 100%;
                }

            .QCr_test_flex-divtt-c { 
                display: flex;
                position: relative;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin: 0 auto;
                border: solid 1px #ED6C00;
                background: #FFFFFF;
                border-radius: 90%;
                width: 450px;
                height: 450px;
                z-index: 10;
            }

            .QCr_test_flex-divtt-r1 { 
                display: block;
                position: relative;
                padding-bottom: 0.5em;
                border-bottom: solid 1px #ED6C00;
                width: 80%;
                text-align: center;
            }

            .QCr_test_flex-divtt-r2 { 
                display: block;
                position: relative;
                padding: 0.5em 1em 0 1em;
                width: 80%;
            }

            .QCr_test_flex-divtt-line1 { 
                display: block;
                position: absolute;
                top: 50%;
                left: 0%;
                width: 100%;
                height: 1px;
                background: #ED6C00;
                transform: rotate(30deg);
                transform-origin: 50% 50%; /* 繞著左上角旋轉 */
                z-index: 1;
            }

            .QCr_test_flex-divtt-line2 { 
                display: block;
                position: absolute;
                top: 50%;
                left: 0%;
                width: 100%;
                height: 1px;
                background: #ED6C00;
                transform: rotate(0deg);
                transform-origin: 50% 50%; /* 繞著左上角旋轉 */
                z-index: 1;
            }

            .QCr_test_flex-divtt-line3 { 
                display: block;
                position: absolute;
                top: 50%;
                left: 0%;
                width: 100%;
                height: 1px;
                background: #ED6C00;
                transform: rotate(-25deg);
                transform-origin: 50% 50%; /* 繞著左上角旋轉 */
                z-index: 1;
            }


    /* -- 知識庫-- */

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

        .kno_flex-div { 
            display: inline-block;
            position: relative;
            justify-content: center;
            align-items: center;
            padding: 0 1em;
            width: auto;
            color: #000;
        }

        .kno_flex-div:first-child { 
            border-right: solid 1px #CCC;
        }

        .kno_flex-div a { 
            color: #000;
        }

        .kno_flex-div a:hover { 
            color: #ED6C00;
        }


    .kno_QA { 
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: stretch;
        margin: 0 auto 2em auto;
        width: 100%;
    }

        .kno_QA-icon { 
            display: flex;
            position: relative;
            justify-content: center;
            align-items: center;
            padding: 0 2em 0 0;
            width: 20%;
        }

            .kno_QA-icon img { 
                display: block;
                position: relative;
                width: 100%;
            }

        .kno_QA-word { 
            display: flex;
            position: relative;
            justify-content: center;
            align-items: center;
            widows: 70%;
        }


	.kno_box {  
        display: block;
		position: relative;
        justify-content: center;
        align-items: center;
        background: #FFF;
        border-radius: 10px;
        margin: 3em auto 5em auto;
        padding: 2em 0;
		width: 100%;
	}

	.kno_box1 {  
        display: block;
		position: relative;
        justify-content: center;
        align-items: center;
        background: #FFF;
        border-radius: 10px;
        margin: 3em auto 5em auto;
        padding: 2em 0;
		width: 100%;
        border: solid 1px #CCC;
	}


	    .kno_box_title {  
            display: flex;
		    position: absolute;
            align-items: center;
            justify-content: center;
            left: 50%;
            top: 0%;
            transform: translate(-50%, -50%);
            background: #ED6C00;
            border-radius: 50px;
            width: 60%;
	    }

	    .kno_box_title_word {  
            display: block;
		    position: relative;
            padding: 0.35em 2em;
	    }

	    .kno_box_word {  
            display: flex;
		    position: relative;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 1.5em auto 0 auto;
		    width: 90%;
	    }

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

	        .kno_flex1-d1 {  
                display: flex;
		        position: relative;
                flex-direction: column;
                justify-content: flex-start;
                align-items: stretch;
                padding: 0 5% 0 0;
		        width: 60%;
                border-right: solid 1px #808080;
	        }

	        .kno_flex1-d2 {  
                display: flex;
		        position: relative;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                padding: 0 0 0 5%;
		        width: 40%;
	        }

	            .kno_flex1-d-list {  
                    display: block;
		            position: relative;
                    margin-bottom: 0.25em;
		            width: 100%;
	            }

	            .kno_flex1-d-pic {  
                    display: block;
		            position: relative;
                    margin: 1em auto;
		            width: 100%;
	            }

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

	            .kno_flex1-d-flex {  
                    display: flex;
		            position: relative;
                    margin: 0.5em 0;
		            width: 100%;
	            }

	                .kno_flex1-d-flex-icon {  
                        display: block;
		                position: relative;
		                width: 75px;
	                }

	                .kno_flex1-d-flex-icon img {  
                        display: block;
		                position: relative;
		                width: 100%;
	                }


	                .kno_flex1-d-flex-txt {  
                        display: flex;
		                position: relative;
                        justify-content: flex-start;
                        align-items: center;
                        padding-left: 1em;
		                width: 68%;
	                }

	            .kno_flex1-d-able-txt1 {  
                    display: block;
		            position: relative;
                    margin: 0 auto 1em auto;
                    width: 800px;
	            }

	            .kno_flex1-d-able {  
                    display: block;
		            position: relative;
                    margin: 0 auto;
                    width: 100%;
                    overflow: auto;
	            }

	                .kno_flex1-d-able img {  
                        display: block;
		                position: relative;
                        margin: 0 auto;
                        width: 800px;
	                }


	        .kno_flex4-flex {  
	            display: flex;
	            position: relative;
                justify-content: space-between;
                flex-wrap: wrap;
	            margin: 0 auto;
	            width: 100%;
	        }

	            .kno_flex4-flex-d1 {  
	                display: flex;
	                position: relative;
                    flex-direction: column;
	                margin: 0 auto;
                    padding: 1em;
	                width: 50%;
                    border-right: solid 1px #808080;
                    border-bottom: solid 1px #808080;
	            }

	            .kno_flex4-flex-d-list {  
	                display: block;
                    position: relative;
                    padding-left: 1.1em;
                    width: 100%;
	            }

	            .kno_flex4-flex-d-list1 {  
	                display: inline-flex;
                    position: relative;
                    flex-wrap: wrap;
                    padding-left: 1.1em;
                    width: 100%;
	            }

	            .kno_flex4-flex-d-dbox {  
	                display: block;
                    position: relative;
                    margin: 4px 10px 4px 0;
                    padding: 0.25em 1em;
                    background: #f1f1f1;
	            }

	            .kno_flex4-flex-d2 {  
	                display: flex;
	                position: relative;
                    flex-direction: column;
	                margin: 0 auto;
                    padding: 1em;
	                width: 50%;
                    border-bottom: solid 1px #808080;
	            }

	            .kno_flex4-flex-d3 {  
	                display: flex;
	                position: relative;
                    flex-direction: column;
	                margin: 0 auto;
                    padding: 1em;
	                width: 50%;
                    border-right: solid 1px #808080;
	            }

	            .kno_flex4-flex-d4 {  
	                display: flex;
	                position: relative;
                    flex-direction: column;
	                margin: 0 auto;
                    padding: 1em;
	                width: 50%;
	            }


    .kno_fan-flex {  
        display: flex;
        position: relative;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 2em auto 6em auto;
        width: 100%;
    }

        .kno_fan-flex-div {  
            display: flex;
            position: relative;
            flex-direction: column;
            margin: 0 auto;
            width: 49.8%;
        }

            .kno_fan-flex-div-pic {  
                display: flex;
                position: relative;
                justify-content: space-between;
                align-items: center;
                margin: 0 auto;
                width: 100%;
            }

                .kno_fan-flex-div-pic-1 {  
                    display: block;
                    position: relative;
                    flex-direction: column;
                    margin: 0 auto;
                    width: 40%;
                }

                .kno_fan-flex-div-pic-2 {  
                    display: block;
                    position: relative;
                    flex-direction: column;
                    margin: 0 auto;
                    padding: 0 1em 0 0;
                    width: 58%;
                }

                    .kno_fan-flex-div-pic-1 img {  
                        display: block;
                        position: relative;
                        width: 100%;
                    }

            .kno_fan-flex-div-li1 {  
                display: flex;
                position: relative;
                justify-content: center;
                align-items: center;
                padding: 3px 0;
                width: 100%;
                background: #808080;
                color: #FFF;
                border-bottom: solid 1px #FFF;
            }

            .kno_fan-flex-div-li2 {  
                display: flex;
                position: relative;
                justify-content: center;
                align-items: center;
                padding: 3px 0;
                width: 100%;
                background: #f1f1f1;
                border-bottom: solid 1px #FFF;
            }

    .kno_tech_title {  
        display: block;
        position: relative;
        margin: 2em auto 0.5em auto;
    }

    .kno_tech_title2 {  
        display: block;
        position: relative;
        margin: 0 auto 2em auto;
        padding: 10px 2em;
        background: #e6e6e6;
    }


    .kno_fan_anayflex {  
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: stretch;
        margin: 2em auto 5em auto;
        width: 80%;
    }

        .kno_fan_anayflex_pic {  
            display: block;
            position: relative;
            width: 35%;
        }

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

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

            .kno_fan_anayflex_div-list {  
                display: block;
                position: relative;
                margin-bottom: 5px;
                width: 100%;
            }

            .kno_fan_anayflex_div-list2 {  
                display: block;
                position: relative;
                margin-bottom: 15px;
                width: 100%;
            }

            .kno_fan_anayflex_div-list3 {  
                display: inline-flex;
                position: relative;
                justify-content: flex-start;
                align-items: center;
                margin-bottom: 5px;
                width: 100%;
            }

            .kno_fan_anayflex_div-list4 {  
                display: inline-block;
                position: relative;
                background: #F2F2F2;
                border-radius: 10px;
                padding: 10px;
            }

            .kno_fan_anayflex_div-mark {  
                position: relative;
                padding: 2px 5px;
                background: #F2F2F2;
                border-radius: 5px;
            }

            .kno_fan_anayflex_div-line {  
                display: block;
                margin: 1em 0;
                width: 100%;
                height: 1px;
                border-bottom: solid 1px #000;
            }


    .kno_word_list-row {  
        display: inline-flex;
        position: relative;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0.5em 0;
        width: 100%;
        
    }





    /* -- news -- */
    .news_flex { 
        display: grid;
        position: relative;
        grid-template-columns: repeat(3, 31%); 
        justify-content: space-between;
        align-items: stretch;
        margin: 0 auto;
        width: 80%;
    }

	    .news_flex-div { 
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 2em;
            width: 100%;
            background: #f5f5f5;
        }

	    .news_flex-div-pic { 
            display: block;
            width: 100%;
        }

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

	    .news_flex-div-news { 
            display: block;
            width: 100%;
            padding: 0.5em 1.5em;
            min-height: 13em;
        }

	        .news_flex-div-news-tt { 
                display: block;
                width: 100%;
                margin: 0.5em 0;
                text-align: left;
            }

	        .news_flex-div-news-date { 
                display: block;
                width: 100%;
                margin: 0.5em 0;
                padding-left: 3.2em;
                text-indent: -3.2em;
                text-align: left;
            }

	        .news_flex-div-news-add { 
                display: block;
                width: 100%;
                margin: 0.5em 0;
                padding-left: 3.2em;
                text-indent: -3.2em;
                text-align: left;
            }

	        .news_flex-div-news-more { 
                display: block;
                width: 100%;
                margin: 1em 0;
                color: #4d4d4d;
                padding: 0 1.5em;
                text-align: left;
            }

	            .news_flex-div-news-more::after { 
                    content: " ";
                    display: inline-block;
                    margin-left: 5px;
                    border-top: 7px solid transparent;
                    border-bottom: 7px solid transparent;
                    border-left: 10px solid #4d4d4d;
                }

	            .news_flex-div-news-more:hover { 
                    color: #ED6C00;
                }

	            .news_flex-div-news-more:hover::after { 
                    content: " ";
                    display:inline-block;
                    margin-left: 5px;
                    border-top: 7px solid transparent;
                    border-bottom: 7px solid transparent;
                    border-left: 10px solid #ED6C00;
                }


    /* -- 聯絡我們 -- */

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

        .contus_flex-map { 
            display: block;
            position: relative;
            margin: 0 auto;
            width: 50%;
        }

            .gmap { 
                display: block;
                position: relative;
                margin: 0 auto;
                width: 100%;
                min-height: 628px;
            }  

        .contus_flex-info { 
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            padding: 3em 2em;
            width: 50%;
        }

            .cominfu { 
                display: block;
                position: relative;
                margin: 0 auto;
                padding-right: 3em;
            }  

            .cominfu-logo { 
                display: block;
                position: relative;
                margin-bottom: 0.5em;
                width: 50%;
            }  

            .cominfu-logo1 { 
                display: block;
                position: relative;
                margin-bottom: 1em;
                width: 70%;
            }  

                .cominfu-logo img, .cominfu-logo1 img { 
                    display: block;
                    position: relative;
                    width: 100%;
                }  

            .cominfu_icon { 
                display: flex;
                position: relative;
                justify-content: flex-start;
                align-items: center;
                margin: 1em auto;
            }  

                .cominfu_icon img { 
                    display: block;
                    position: relative;
                    width: 3em;
                }  


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

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

        .contus_fuab { 
            display: block;
            position: absolute;
            width: 80%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #FFF;
            text-align: center;
            text-shadow: 3px 3px 10px #000000;
            z-index: 100;
        }

/* area-setting */

	.page_sub {  
	    display: block;
 	    position: relative;
        padding: 3em 2em 3em 2em;
        width: 100%;
	}

	.page_sub2 {  
	    display: block;
 	    position: relative;
        margin: 0 auto;
        padding: 3em 0;
        width: 1000px;
        text-align: center;
	}

	.page_sub3 {  
	    display: block;
 	    position: relative;
        margin: 0 auto;
        padding: 3em 0;
        width: 50%;
        text-align: center;
	}


    .ttcenter-1 {
        display: inline-block;
        position: relative;
        margin: 1.5em auto 0.5em auto;
        width: 100%;
        text-align: center;
        z-index: 5;
    }

    .ttcenter-2 {
        display: inline-block;
        position: relative;
        margin: 0 auto 0.75em auto;
        width: 100%;
        text-align: center;
        z-index: 5;
    }

    .ttle-1 {
        display: inline-block;
        position: relative;
        margin: 1.5em auto 0.5em auto;
        width: 100%;
        z-index: 5;
    }

    .txtcenter-1 {
        display: inline-block;
        position: relative;
        margin: 0 auto;
        width: 100%;
        text-align: center;
        z-index: 5;
    }

    .txt-1-le {
        display: inline-block;
        position: relative;
        margin: 0 auto;
        width: 100%;
        z-index: 5;
    }

    .txt-2-le {
        display: inline-block;
        position: relative;
        margin: 0.25em auto;
        width: 100%;
        z-index: 5;
    }




/* myBtn - go top */

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

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


	.conside {
		display: block;
		position: fixed;
		padding: 0;
		top: 10%;
		right: 0;
		width: 80px;
		height: 80px;
		border: 0;
		background: none;
		cursor: pointer;
		z-index: 1000;
	    outline: none;
	}

	.conside img {
		width: 100%;
		height: auto;
	    outline: none;
	}





/* Footer */

	#footer {
		position: relative;
		background-color: #E6E6E6;
		width: 100%;
		padding: 0;
		text-align: left;
		overflow: hidden;
	}

	#footer .footerc {
		display: flex;
		position: relative;
		justify-content: space-between;
		align-items: stretch;
		width: 100%;
        padding: 3em 0 1em 0;
        border-bottom: solid 1px #ccc;
	}

	#footer .footerc1 {
		display: flex;
		position: relative;
		flex-direction: column;
		justify-content: space-between;
		align-items: stretch;
        text-align: center;
		width: 100%;
        padding: 2em 0 2.5em 0;
	}


		#footer .frecom {
		    display: flex;
			display: -webkit-flex; /* Safari */
		    justify-content: flex-start;
            flex-direction: column;
			align-items: stretch;
			flex-wrap: wrap;
			margin: 0 auto;
            flex: 0 1 360px;
		}

		    #footer .frecom-logo {
		        display: block;
                position: relative;
                margin-bottom: 20px;
			    width: 200px;
		    }

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

		    #footer .frecom-comname {
		        display: block;
                position: relative;
			    width: 330px;
		    }

		        #footer .frecom-comname img {
		            display: block;
                    position: relative;
			        width: 100%;
		        }

		    #footer .frecom-comword {
		        display: block;
                position: relative;
                margin-top: 20px;
			    width: 100%;
		    }

		        #footer .frecom-comword-list {
		            display: block;
                    position: relative;
			        width: 100%;
		        }


		#footer .flow {
		    display: block;
			margin: 0 auto;
			width: auto;
	     }

		#footer .ficon {
		    display: flex;
			display: -webkit-flex; /* Safari */
		    justify-content: flex-end;
			align-items: stretch;
			margin: 1em auto 0 auto;
            padding-right: 2em;
			width: 100%;
	     }

		    #footer .ficon-div {
		        display: block;
                position: relative;
                width: 2.8em;
                margin-left: 5px;
		    }

		        #footer .ficon-div img {
		            display: block;
                    position: relative;
                    width: 100%;
		        }

		    #footer .ficon-div:hover {
		        opacity: 0.7;
		    }



		#footer .fre1 {
		    display: flex;
			display: -webkit-flex; /* Safari */
		    justify-content: space-between;
			align-items: stretch;
			flex-wrap: wrap;
			margin: 0 auto;
            padding: 2em 0 0 2em;
			width: 100%;
	     }

		    #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: auto;
                flex: auto;
	         }

		        #footer .fre1-div_titile {
		            display: block;
                    position: relative;
                    width: 100%;
                    padding: 0 1.5em 0.2em 0;
	             }

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

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


		#footer .ftitle1 {
			display: block;
			margin: 0 0 5px 0;
			width: 100%;
			font-size: 1.2em;
            font-weight: bold;
		}

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

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

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

		    #footer .ftxt1 a, #footer .ftxt1-TEL a, #footer .ftxt1-ADD1 a, #footer .ftxt1-ADD2 a {  
		         color: #555;   
		    }

		    #footer .ftxt1 a:hover, #footer .ftxt1-TEL a:hover, #footer .ftxt1-ADD1 a:hover, #footer .ftxt1-ADD2 a:hover {  
		         color: #ed6c00;
		    }



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

 

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

/* header */	

			#header nav ul li {
                padding: 0 25px;
                height: 80px;
				font-size: 1.15em;
			} 
    
/* banner */

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

/* setting */

	.ind {  
        margin: -90px auto 2em auto;
  	    height: 200px;
	}

	.ind-div1 {  
        width: 230px;
    	height: 200px;
	}

	.ind-div2 {  
        width: 230px;
    	height: 200px;
	}

	.ind-div3 {  
        width: 230px;
    	height: 200px;
	} 
    
    
	.ind_wind-area {  
        width: 860px;
	}


	.ind_wind {  
	    display: block;
        position: relative;
        margin: 0 auto;
        width: 100%;
        z-index: 1;
        
        animation: spin 15s linear infinite;
        transform-origin: center;
	} 
    
    
    .QCr_adm_flex { 
        grid-template-columns: repeat(6, 13%); 
        margin: 2em auto;
        padding: 2em 0;
        width: 85%;
    }
    
    
    .QCr_test { 
        padding: 1em 0 10em 0;
        width: 100%;
    }

    .QCr_test_flex { 
        margin: 2em auto;
        padding: 2em 0;
        width: 85%;
        z-index: 10;
    }

        .QCr_test_flex-div1 { 
            width: 31%;
        }

        .QCr_test_flex-divtt { 
            width: 33%;
        }

        .QCr_test_flex-div2 { 
            width: 31%;
        }

        .QCr_test_flex-div-flex { 
            margin-bottom: 10px;
            width: 100%;
        }

           .QCr_test_flex-div-pic { 
                width: 35%;
            }

            .QCr_test_flex-div-txt { 
                width: 60%;
            }
    
            .QCr_test_flex-divtt-c { 
                width: 370px;
                height: 370px;
            }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
/* Footer */
	
}



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

/* header */	
    
			#header nav ul li {
                padding: 0 20px;
                height: 80px;
				font-size: 1.15em;
			} 
    
			    #header nav ul li:last-child {
                    margin-left: 5px;
                    margin-right: 1em;
                    padding: 0 18px;
			    }
    
/* banner */

/* area-container */	   
    
	.bodycontainer3 {  
		width: 75%;
	}
    
    
/* Wrapper */
 
/* setting */
    
	.ind {  
        margin: -70px auto 2em auto;
  	    height: 190px;
	}

	.ind-div1 {  
        width: 220px;
    	height: 190px;
	}

	.ind-div2 {  
        width: 220px;
    	height: 190px;
	}

	.ind-div3 {  
        width: 220px;
    	height: 190px;
	}   
    
    
	.ind_wind-area {  
        width: 860px;
	}

	.ind_wind {  
	    display: block;
        position: relative;
        margin: 0 auto;
        width: 100%;
        z-index: 1;
        
        animation: spin 15s linear infinite;
        transform-origin: center;
	} 
     
    
	.ind_fu {  
        margin: 2em auto 0 auto; 
        padding: 3em 2em 5em 2em;
        width: 100%;
	}

	    .ind_fu_r1 {  
            width: 45%;
            margin-left: 11%;
	    }

	    .ind_fu_r1-tt {  
            margin-bottom: 1.2em;
	    }


	    .ind_fu_r2 {  
            width: 80%;
            margin: 3em auto 0 auto;
	    }

	        .ind_fu_r2-div1 {  
                margin-top: 8%;
                width: 15%;
	        }

	        .ind_fu_r2-div2 {  
                margin-top: -2%;
                width: 15%;
	        }

	        .ind_fu_r2-div3 {  
                margin-top: -10%;
                width: 15%;
	        }

	        .ind_fu_r2-div4 {  
                margin-top: 4%;
                width: 15%;
	        } 
    
    
      /*-- 產品應用 --*/

      .apli-list {
          
      }
    
          .apli-list-div-ab {
              padding: 1.5em 2em 0.5em 2em; 
          }
    
              .apli-list-div-flex-icon {
                  flex: 0 0 75px;
              }
    
    
    .about-bg2 { 
        width: 90%;
    }
    
    
    .conform_ani { 
        display: block;
        position: relative;
        padding: 3em 0 0 0;
        width: 100%;
        z-index: 1;
    }
    
    .service-card1 {
        top: 46%;
        left: 37%;
        transform: translate(-50%, -50%);
        width: 18%;
        padding: 2em;
    }

    .service-card2 {
        top: 40%;
        left: 57%;
        transform: translate(-50%, -50%);
        width: 18%;
        padding: 2em;
    }

    .service-card3 {
        top: 28%;
        left: 77%;
        transform: translate(-50%, -50%);
        width: 18%;
        padding: 2em;
    }

        @keyframes upup1 {
          0%   {top: 49%; opacity: 0;}
          10%  {top: 49%; opacity: 0;} 
          15%  {top: 46%; opacity: 1;}
          90%  {opacity: 1;}
          100% {opacity: 0;}
        }

        @keyframes upup2 {
          0%   {top: 43%; opacity: 0;}
          13%  {top: 43%; opacity: 0;} 
          18%  {top: 40%; opacity: 1;}
          90%  {opacity: 1;}
          100% {opacity: 0;}
        }

        @keyframes upup3 {
          0%   {top: 31%; opacity: 0;}
          16%  {top: 31%; opacity: 0;} 
          22%  {top: 28%; opacity: 1;}
          90%  {opacity: 1;}
          100% {opacity: 0;}
        }
    
        .icon-badge {
          position: absolute;
          top: -55px;
          right: 10px;
          width: 6em;
          height: 6em;
        }


	.timelinearea {
		margin: 3em auto 0 auto;
		width: 80%;
	}
 
	        .time-pt-pp {
                width: 25px;
                height: 25px;
                border-radius: 25px;
	        }
    
    
    .QCr_adm_flex { 
        grid-template-columns: repeat(6, 14%); 
        margin: 2em auto;
        padding: 2em 0;
        width: 85%;
    }
       
    
    .QCr_test { 
        padding: 1em 0 10em 0;
        width: 100%;
    }

    .QCr_test_flex { 
        margin: 2em auto;
        padding: 2em 0;
        width: 85%;
        z-index: 10;
    }
    
        .QCr_test_flex-div-flex { 
            margin-bottom: 10px;
            width: 100%;
        }

        .QCr_test_flex-div1 { 
            width: 30%;
        }

        .QCr_test_flex-divtt { 
            width: 35%;
        }

        .QCr_test_flex-div2 { 
            width: 30%;
        }
    
    
        .QCr_test_flex-div-flex { 
            margin-bottom: 10px;
            width: 100%;
        }
    
           .QCr_test_flex-div-pic { 
                width: 35%;
            }

            .QCr_test_flex-div-txt { 
                width: 60%;
            }
    
            .QCr_test_flex-divtt-c { 
                width: 350px;
                height: 350px;
            }
    
    
    
    
    

/* Footer */

	
}
	

/* Normal */

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

/* Basic */
    
/* header */	

			#header nav ul li {
                padding: 0 18px;
                height: 80px;
				font-size: 1.15em;
			} 

			    #header nav ul li:last-child {
                    margin-left: 5px;
                    margin-right: 0;
                    padding: 0 18px;
			    }
    
					.navlogo {
						display: flex;
                        position: absolute;
                        left: 2%;
                        justify-content: center;
                        align-items: center;
						width: 210px;
					}

    
/* banner */

/* Wrapper */

/* area-container */	
    
	.bodycontainer4 {   /* pro use */
        margin: 0 auto;
        position: relative;
		width: 75%;
	}
    
    
    
/* setting */
    
	.ind_wind-area {  
        width: 60%;
	}


	.ind_wind {  
	    display: block;
        position: relative;
        margin: 0 auto;
        width: 100%;
        z-index: 1;
        
        animation: spin 15s linear infinite;
        transform-origin: center;
	} 
       
    
	.ind_pinfo {  
        width: 100%;
	}

	    .ind_pinfo-word {  
            width: 55%;
            padding: 3em 3em 3em 2em;
	    }  
    
	    .ind_pinfo-pro {  
            width: 45%;
	    }
    
    
	.ind_fu {  
        margin: 2em auto 0 auto; 
        padding: 3em 2em 5em 2em;
        width: 100%;
	}

	    .ind_fu_r1 {  
            width: 55%;
            margin-left: 11%;
	    }

	    .ind_fu_r1-tt {  
            margin-bottom: 1.2em;
	    }


	    .ind_fu_r2 {  
            width: 80%;
            margin: 3em auto 0 auto;
	    }

	        .ind_fu_r2-div1 {  
                margin-top: 8%;
                width: 15%;
	        }

	        .ind_fu_r2-div2 {  
                margin-top: -2%;
                width: 15%;
	        }

	        .ind_fu_r2-div3 {  
                margin-top: -10%;
                width: 15%;
	        }

	        .ind_fu_r2-div4 {  
                margin-top: 4%;
                width: 15%;
	        }  
    
    
   /* -- 計數 -- */
   .stats {
       display: grid;
       position: relative;
       grid-template-columns: repeat(4, 25%); /* 4格, 23%寬度 */
       /*grid-template-columns: repeat(4, 1fr);*/
       margin: 2em auto 0 auto;
       padding: 2em 0;
       text-align: center;
       width: 85%;
   }

   .stat-number {
       font-size: 3.8em;
   }

   .stat-label {
       margin-top: 18px;
       font-size: 1em;
   }
    
    
    .conform_ani { 
        padding: 7em 0 0 0;
        width: 100%;
    }
    
    .service-card1 {
        top: 35%;
        left: 37%;
        transform: translate(-50%, -50%);
        width: 18%;
        padding: 2em;
    }

    .service-card2 {
        top: 33%;
        left: 57%;
        transform: translate(-50%, -50%);
        width: 18%;
        padding: 2em;
    }

    .service-card3 {
        top: 20%;
        left: 77%;
        transform: translate(-50%, -50%);
        width: 18%;
        padding: 2em;
    }

        .icon-badge {
          position: absolute;
          top: -55px;
          right: 10px;
          width: 6em;
          height: 6em;
        }
 
        @keyframes upup1 {
          0%   {top: 38%; opacity: 0;}
          10%  {top: 38%; opacity: 0;} 
          15%  {top: 35%; opacity: 1;}
          90%  {opacity: 1;}
          100% {opacity: 0;}
        }

        @keyframes upup2 {
          0%   {top: 36%; opacity: 0;}
          13%  {top: 36%; opacity: 0;} 
          18%  {top: 33%; opacity: 1;}
          90%  {opacity: 1;}
          100% {opacity: 0;}
        }

        @keyframes upup3 {
          0%   {top: 23%; opacity: 0;}
          16%  {top: 23%; opacity: 0;} 
          22%  {top: 20%; opacity: 1;}
          90%  {opacity: 1;}
          100% {opacity: 0;}
        }
    
    
    /* -- QC -- */
    .QCr1_flex { 
        grid-template-columns: repeat(2, 50%); 
        width: 100%;
    }

        .QCr1_flex-div-cf { 
            justify-content: flex-end;
            margin: 0 auto;
            padding: 5em 0;
            padding-right: 20%;
        }

        .QCr1_flex-div-export { 
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 2em 1em 0 1em;
            width: 100%;
        } 
    
        .QCr1_flex-div-exprot-r1 { 
            margin: 0 auto 1.35em 1em;
            width: 90%;
        }

        .QCr1_flex-div-exprot-r2 { 
            margin: 0 auto 1em 1em;
            padding: 0 0 1.5em 0;
            width: 90%;
        }
    
        .QCr1_flex-div-exprot-r3 { 
            margin: 0 auto 2em 1em;
            width: 90%;
        }

        .QCr1_flex-cfS-nav { 
            display: block;
            position: relative;
            margin: 0 auto 2em 1em;
            width: 90%;
        }
    
    
    .QCr_cf_flex { 
        flex-wrap: wrap;
        margin: 0 auto;
        padding: 0 0 3em 0;
        width: 90%;
    }

        .QCr_cf_flex-div { 
            width: 33%;
        }

            .QCr_cf_flex-div-icon { 
                width: 70%;
            }

    
    .QCr_adm { 
        margin: 0 auto;
        padding: 3em 0 3em 0;
        width: 100%;
    }
    
    .QCr_adm_flex { 
        grid-template-columns: repeat(6, 15%); 
        margin: 2em auto;
        padding: 2em 0;
        width: 85%;
    }
        
    
    .QCr_test { 
        padding: 1em 0 10em 0;
        width: 100%;
    }

    .QCr_test_flex { 
        margin: 2em auto;
        padding: 2em 0;
        width: 85%;
        z-index: 10;
    }
    
        .QCr_test_flex-div-flex { 
            margin-bottom: 10px;
            width: 100%;
        }

        .QCr_test_flex-div1 { 
            width: 30%;
        }

        .QCr_test_flex-divtt { 
            width: 38%;
        }

        .QCr_test_flex-div2 { 
            width: 30%;
        }
    
           .QCr_test_flex-div-pic { 
                width: 35%;
            }

            .QCr_test_flex-div-txt { 
                width: 60%;
            }
    
            .QCr_test_flex-divtt-c { 
                width: 350px;
                height: 350px;
            }
    
    
    
    
    
    
    
    
    
    
    /* -- news -- */
    .news_flex { 
        grid-template-columns: repeat(3, 31%); 
        width: 90%;
    }
    
	    .news_flex-div-news { 
            display: block;
            width: 100%;
            padding: 0.5em 1.5em;
            min-height: 14em;
        }

    
    /* -- 聯絡我們 -- */
    
    .contus_flex { 
        margin: 0 auto;
        width: 100%;
    }

        .contus_flex-map { 
            width: 50%;
        }

            .gmap { 
                min-height: 450px;
            }  

        .contus_flex-info { 
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            padding: 0 2em 0 2em;
            width: 50%;
        }

            .cominfu { 
                display: block;
                position: relative;
                margin: 0 auto;
                padding: 0 3em;
            }  

            .cominfu-logo { 
                display: block;
                position: relative;
                width: 55%;
            }  

            .cominfu-logo1 { 
                margin-bottom: 1em;
                width: 75%;
            }  


	.conside {
		width: 70px;
		height: 70px;
	}

    
/* area-setting */

	.page_sub2 {  
        padding: 3em 0;
        width: 100%;
	}

	.page_sub3 {  
        padding: 3em 0;
        width: 80%;
	}
    
/* Footer */

		#footer .frecom {
            flex: 0 1 330px;
		}

		    #footer .frecom-logo {
                margin-bottom: 20px;
			    width: 180px;
		    }

		    #footer .frecom-comname {
			    width: 310px;
		    }   
    

}



@media screen and (max-width: 1200px) {
    
/* Basic */
    
/* header */	
    
			#header nav ul li {
                padding: 0 10px;
                height: 80px;
				font-size: 1.15em;
			} 

			    #header nav ul li:last-child {
                    margin-left: 5px;
                    margin-right: 0;
                    padding: 0 10px;
			    }
    
    
/* banner */

/* area-container */	
    
/* Wrapper */
    
/* setting */
    
	.ind {  
        margin: -55px auto 2em auto;
  	    height: 160px;
	}

	.ind-div1 {  
        width: 180px;
    	height: 160px;
	}

	.ind-div2 {  
        width: 180px;
    	height: 160px;
	}

	.ind-div3 {  
        width: 180px;
    	height: 160px;
	}   
    
    
	.ind_wind-area {  
        width: 700px;
	}

	.ind_wind {  
	    display: block;
        position: relative;
        margin: 0 auto;
        width: 100%;
        z-index: 1;
        
        animation: spin 15s linear infinite;
        transform-origin: center;
	} 
    
    
	.ind_pinfo {  
        width: 100%;
	}

	    .ind_pinfo-word {  
            width: 55%;
            padding: 2em 2em 2em 1em;
	    }  
    
	    .ind_pinfo-pro {  
            width: 45%;
	    }
    
    
    /*-- 產品--*/

    .pro_sub-prolist { 
        grid-template-columns: repeat(4, 25%); /* 4格, 23%寬度 */
        width: 100%;
    }

    
x
    
    
    
    
    
    
/* Footer */

	
}



/* Narrower */

#navPanel, #navButton {
		display: none;
}


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

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

			input[type="button"].small,
			input[type="submit"].small,
			input[type="reset"].small,
			.button.small {
				font-size: 0.8em;
				min-width: 18em;
				padding: 0.75em 0;
			}

/* List */

			ul.featured-icons {
				margin: 0;
			}

				ul.featured-icons li {
					display: inline-block;
					float: none;
					width: auto;
				}

					ul.featured-icons li .icon {
						font-size: 4em;
						width: 1.25em;
					}

			ul.buttons li {
				display: block;
				padding: 1em 0 0 0;
			}   
    
/* header */	
    
	#header {
		display: none;
	}


	.mlogo {
		display: flex;
		position: relative;
		justify-content: center;
		background: #FFF;
        padding: 15px 0;
		width: 100%;
		height: auto;
		z-index: 999;
	}
	
	    .mlogo img {
		    display: block;
			width: 130px;
	    }
    
    
/* banner */
    

/* banner */

/* Wrapper */

/* area-container */	

/* setting */
    
    .conform_ani { 
        padding: 10em 0 0 0;
        width: 100%;
        z-index: 1;
    }
    
    .service-card1 {
        top: 20%;
        left: 37%;
        transform: translate(-50%, -50%);
        width: 18%;
        padding: 2em;
    }

    .service-card2 {
        top: 18%;
        left: 57%;
        transform: translate(-50%, -50%);
        width: 18%;
        padding: 2em;
    }

    .service-card3 {
        top: 12%;
        left: 77%;
        transform: translate(-50%, -50%);
        width: 18%;
        padding: 2em;
    }

        .icon-badge {
          position: absolute;
          top: -55px;
          right: 10px;
          width: 5em;
          height: 5em;
        }
    
        @keyframes upup1 {
          0%   {top: 23%; opacity: 0;}
          10%  {top: 23%; opacity: 0;} 
          15%  {top: 20%; opacity: 1;}
          90%  {opacity: 1;}
          100% {opacity: 0;}
        }

        @keyframes upup2 {
          0%   {top: 22%; opacity: 0;}
          13%  {top: 22%; opacity: 0;} 
          18%  {top: 18%; opacity: 1;}
          90%  {opacity: 1;}
          100% {opacity: 0;}
        }

        @keyframes upup3 {
          0%   {top: 15%; opacity: 0;}
          16%  {top: 15%; opacity: 0;} 
          22%  {top: 12%; opacity: 1;}
          90%  {opacity: 1;}
          100% {opacity: 0;}
        }
    
    
	.timelinearea {
		margin: 3em auto 0 auto;
		width: 85%;
	}
    
	        .time-pt-pp {
                width: 20px;
                height: 20px;
                border-radius: 20px;
	        }
    
    
    
    .QCr_adm { 
        margin: 0 auto;
        padding: 3em 0 3em 0;
        width: 100%;
        background-image: url("../../images/pic2_qc_qtbg5.webp");
        background-size: cover;
    }
    
    .QCr_adm_flex { 
        flex-wrap: wrap;
        grid-template-columns: repeat(4, 20%); 
        margin: 2em auto;
        padding: 2em 0;
        width: 80%;
    }
    
    .QCr_adm_flex-div { 
        margin: 2em auto 1em auto;
    }
    
    
    
    .QCr_test { 
        background-image: url("../../images/pic2_qc_qtbg3.webp"), url("../../images/pic2_qc_qtbg4.webp");
        background-size: 100%;
        background-position: bottom center, top center;
        background-repeat: no-repeat;
        padding: 5em 0 5em 0;
        width: 100%;
    }

    .QCr_test_flex { 
        flex-wrap: wrap;
        margin: 2em auto;
        padding: 2em 0;
        width: 85%;
        z-index: 10;
    }
    
        .QCr_test_flex-div-flex { 
            margin-bottom: 10px;
            width: 100%;
        }

        .QCr_test_flex-div1 { 
            width: 48%;
            order: 2;
        }

        .QCr_test_flex-divtt { 
            margin-bottom: 2em;
            width: 100%;
            order: 1;
        }

        .QCr_test_flex-div2 { 
            width: 48%;
            order: 3;
        }
    
           .QCr_test_flex-div-pic { 
                width: 35%;
            }

            .QCr_test_flex-div-txt { 
                width: 60%;
            }
    
            .QCr_test_flex-divtt-c { 
                width: 380px;
                height: 380px;
            } 
    
            .QCr_test_flex-divtt-line1, .QCr_test_flex-divtt-line2, .QCr_test_flex-divtt-line3 { 
                display: none;
            }

        

	    .kno_flex1 {  
		    width: 100%;
	    }

	        .kno_flex1-d1 {  
                padding: 0 5% 0 0;
		        width: 60%;
	        }

	        .kno_flex1-d2 {  
                padding: 0 0 0 5%;
		        width: 40%;
	        }

	            .kno_flex1-d-list {  
                    display: block;
		            position: relative;
                    margin-bottom: 0.25em;
		            width: 100%;
	            }

	                .kno_flex1-d-flex-icon {  
                        display: block;
		                position: relative;
		                width: 60px;
	                }

    
    
    
    
    
    /* -- news -- */
    .news_flex { 
        grid-template-columns: repeat(2, 48%); 
        width: 80%;
    }
    
	    .news_flex-div-news { 
            padding: 0.5em 1.5em;
            min-height: 13em;
        }
    
    
/* Footer */


	/* 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: 1px;
			}
		
			#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: 2px 2px 2px #666;
					}

					#navButton .toggle:after {
						background: #555;
						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 */	

/* setting */
    
	.ind {  
        margin: -30px auto 1em auto;
        width: 100%;
  	    height: 140px;
	}

	.ind-div1 {  
        width: 25%;
    	height: 140px;
	}

	.ind-div2 {  
        width: 25%;
    	height: 140px;
	}

	.ind-div3 {  
        width: 25%;
    	height: 140px;
	}    
    
	    .ind-div-c-name {  
            width: 90%;
	    } 
    
    
	.ind_wind-area {  
        width: 680px;
	}

	.ind_wind {  
	    display: block;
        position: relative;
        margin: 0 auto;
        width: 100%;
        z-index: 1;
        
        animation: spin 15s linear infinite;
        transform-origin: center;
	} 
    
    
    .pro_ptflex { 
        grid-template-columns: repeat(2, 50%);  
        margin: 3em auto 2em auto;
        width: 100%;
    }

        .pro_ptflex-div, .pro_ptflex-div1, .pro_ptflex-div2 { 
            padding: 1.5em 2em;
            width: 100%;
        }  
    
            .pro_ptflex-div-pic { 
                width: 100px;
            }
    
    
        .pro_ptflex-div1:nth-child(5) { 
            display: none;
        }   
    
        .pro_ptflex-div1:last-child { 
            display: none;
        }    
    

    
    
    
    
    
    
    
    
    /* -- 聯絡我們 -- */
    
    .contus_flex { 
        margin: 0 auto;
        width: 100%;
    }

        .contus_flex-map { 
            width: 50%;
        }

            .gmap { 
                min-height: 450px;
            }  

        .contus_flex-info { 
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            padding: 0 2em 0 2em;
            width: 50%;
        }

            .cominfu { 
                display: block;
                position: relative;
                margin: 0 auto;
                padding: 0 3em;
            }  

            .cominfu-logo { 
                display: block;
                position: relative;
                width: 70%;
            }  

            .cominfu-logo1 { 
                margin-bottom: 1em;
                width: 85%;
            }    
    
    
/* Footer */

	#footer .footerc {
		flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
		width: 100%;
        padding: 2em 0 2.5em 0;
	}
    
		#footer .frecom {
		    justify-content: flex-start;
            flex-direction: column;
			align-items: stretch;
			flex-wrap: wrap;
			margin: 0 auto;
            flex: 0 1 100%;
            width: 100%;
		} 
    
		#footer .ficon {
            margin: 1em auto 0 auto;
            justify-content: flex-start;
            padding-right: 0;
	     }

		    #footer .ficon-div {
                width: 3em;
                margin-left: 0px;
                margin-right: 5px;
		    }
    
		#footer .fre1 {
            padding: 2em 0 0 0;
			width: 100%;
	     }  
    
}


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

/* header */ 
    
/* banner */

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

/* setting */
    
	.ind_wind-area {  
        width: 70%;
	}

	.ind_wind {  
	    display: block;
        position: relative;
        margin: 0 auto;
        width: 100%;
        z-index: 1;
        
        animation: spin 15s linear infinite;
        transform-origin: center;
	}   
    
    
        .ind_fu_r1 {
            width: 65%;
	    }
    
	    .ind_fu_r2 {  
            width: 80%;
            margin: 3em auto 0 auto;
	    }

	        .ind_fu_r2-div1 {  
                margin-top: 8%;
                width: 17%;
	        }

	        .ind_fu_r2-div2 {  
                margin-top: -2%;
                width: 17%;
	        }

	        .ind_fu_r2-div3 {  
                margin-top: -10%;
                width: 17%;
	        }

	        .ind_fu_r2-div4 {  
                margin-top: 4%;
                width: 17%;
	        }  
    
    
    .pro_pnote_flex { 
        flex-direction: column;
        margin: 0.5em auto 1em auto;
        width: 100%;
    }

        .pro_pnote_flex-div { 
            margin-bottom: 1em;
            width: 100%;
        }

    
    .about-nav {     
        width: 100%;
    }
    
    .about-txt { 
        width: 85%;
    } 
    
    .about-txt2 { 
        width: 85%;
    } 
    
    .about-ani { 
        width: 80%;
    }
    
    .about-ani2 { 
        width: 100%;
    }
    
    

    .tech-nav {     
        width: 100%;
    }
    
    .tech-abili { 
        grid-template-columns: repeat(1, 100%); 
        justify-content: space-between;
        align-items: stretch;
        margin: 3em auto;
        width: 80%;
        z-index: 20;
    }
    
        .tech-abili-div { 
            width: 100%;
            padding: 0.5em 0;
        }

    
    
    .conform_ani { 
        padding: 2em 0 0 0;
        width: 100%;
        z-index: 1;
    }
    
    .conform_card { 
        display: block;
        position: relative;
        margin: 0 0 -230px 0;
        width: 100%;
        height: 100%;
    }
    
    .service-card1 {
        position: relative;
        margin: 2em 3em 4em auto;
        top: 0;
        left: 0;
        transform: translate(0,0);
        width: 65%;
        padding: 2em 1.5em;
    }

    .service-card2 {
        position: relative;
        margin: 0 3em 4em auto;
        top: 0;
        left: 0;
        transform: translate(0,0);
        width: 65%;
        padding: 2em 1.5em;
    }

    .service-card3 {
        position: relative;
        margin: 0 3em 4em auto;
        top: 0;
        left: 0;
        transform: translate(0,0);
        width: 65%;
        padding: 2em 1.5em;
    }

        .icon-badge {
          position: absolute;
          top: -25px;
          right: 10px;
          width: 5em;
          height: 5em;
        }
    
    
    
    /* -- QC -- */
    .QCr1_flex { 
        flex-direction: column;
        grid-template-columns: repeat(1, 100%); 
        width: 100%;
    }

        .QCr1_flex-div-cf { 
            justify-content: center;
            margin: 0 auto;
            padding: 5em 0;
            padding-right: 0%;
        }

        .QCr1_flex-div-export { 
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 2em 1em 0 1em;
            width: 100%;
        } 
    
        .QCr1_flex-div-exprot-r1 { 
            margin: 0 auto 1.35em auto;
            width: 80%;
        }

        .QCr1_flex-div-exprot-r2 { 
            margin: 0 auto 1em auto;
            padding: 0 0 1.5em 0;
            width: 80%;
        }

        .QCr1_flex-div-exprot-r3 { 
            margin: 0 auto 2em auto;
            width: 80%;
        }

        .QCr1_flex-cfS-nav { 
            display: block;
            position: relative;
            margin: 0 auto 2em auto;
            width: 80%;
        }  
    
    .QCr_cf_flex { 
        flex-wrap: wrap;
        margin: 0 auto;
        padding: 0 0 3em 0;
        width: 80%;
    }

        .QCr_cf_flex-div { 
            width: 48%;
        }

            .QCr_cf_flex-div-icon { 
                width: 70%;
            }

    
    .kno_fan-flex {  
        margin: 2em auto;
        width: 100%;
    }

        .kno_fan-flex-div {  
            width: 49.8%;
        }

            .kno_fan-flex-div-pic {  
                flex-direction: column;
                width: 100%;
            }

                .kno_fan-flex-div-pic-1 {  
                    flex-direction: column;
                    margin: 0 auto;
                    width: 70%;
                }

                .kno_fan-flex-div-pic-2 {  
                    margin: 0 auto 0.5em auto;
                    padding: 0 1em 0 1em;
                    width: 100%;
                }  
    
    
    
    
    
    
/* Footer */

    
    
}



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

/* header */ 
    
/* banner */

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

/* setting */
    
	.ind_wind-area {  
        width: 75%;
	}

	.ind_wind {  
	    display: block;
        position: relative;
        margin: 0 auto;
        width: 100%;
        z-index: 1;
        
        animation: spin 15s linear infinite;
        transform-origin: center;
	}  
    
    
 	.ind_team {  
	    display: flex;
 	    position: relative;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
        padding: 3em 2em;
        width: 100%;
        background: #e8e8e8;
        background-image: url("../../images/pic_indt_bg.webp"), url("../../images/pic_indt_bg2.webp");
        background-repeat: no-repeat, no-repeat;
        background-position: left top, right top;
        background-size: 100%, 18%;
	}

	    .ind_team-wind {  
	        margin: 0 auto;
            width: 80%;
            z-index: 10;
	    }

	        .ind_team-windab {  
                animation: spin 3s linear infinite;
                transform-origin: center;
                z-index: 10;
	        }


	    .ind_team-partner {  
            width: 100%;
            padding: 1.5em 1em 1em 1em;
            z-index: 10;
	    }

	        .partner_flex {  
	            display: flex;
 	            position: relative;
                justify-content:space-between;
                align-items: stretch;
                margin: 0.35em 0;
                width: 100%;
	        }


        /*-- 夥伴 line --*/
	    .ind_team-partner-line {  
            margin: 0 0 1em 0;
            padding: 0;
            width: 100%;
            border-top: none;
            border-right: none;
            text-align: left;
	    }

	    .ind_team-wind::before {  
            content: "";
	        display: none;
	    }
    
        .ind_fu_r1 {
            width: 70%;
	    }
    
	    .ind_fu_r2 {  
            width: 80%;
            margin: 3em auto 0 auto;
	    }

	        .ind_fu_r2-div1 {  
                margin-top: 8%;
                width: 20%;
	        }

	        .ind_fu_r2-div2 {  
                margin-top: -2%;
                width: 20%;
	        }

	        .ind_fu_r2-div3 {  
                margin-top: -10%;
                width: 20%;
	        }

	        .ind_fu_r2-div4 {  
                margin-top: 4%;
                width: 20%;
	        }  
    
    
      /*-- 產品應用 --*/

      .apli-list {
          grid-template-columns: repeat(1, 100%); /* n格, m寬度 */
	      margin: 0 auto 3em auto;
      }
    
          .apli-list-div-ab {
              padding: 1.5em 2em 0.5em 2em; 
          }
    
              .apli-list-div-flex-icon {
                  flex: 0 0 80px;
              }
    
    
      .apli-pflex {
          grid-template-columns: repeat(1, 100%); /* n格, m寬度 */
      }

          .apli-pflex-div {
	          display: flex;
	          flex-direction: column;
	          position: relative;
              justify-content: flex-start;
	          align-items: flex-start;
	          margin: 0 auto 2em auto;
	          width: 100%;
          }

              .apli-pflex-div-tt {
	              display: block;
	              margin: 0 auto;
                  padding: 0;
	              width: 100%;
              }

              .apli-pflex-div-txt {
	              display: block;
	              margin: 0 auto;
                  padding: 1em 0;
	              width: 100%;
                  border-bottom: dashed 1px #000;
              }

              .apli-pflex-div-txt-flex {
	              display: flex;
	              position: relative;
                  flex-wrap: wrap;
                  justify-content: flex-start;
                  align-items: stretch;
                  margin: 0.35em 0 0 0;
              }

                  .apli-pflex-div-txt-flex-dd {
	                  display: flex;
	                  position: relative;
                      justify-content: flex-start;
                      align-items: flex-start;
                      min-width: 15em;
                      padding-left: 1em;
                      text-indent: -1em;
                      text-align: left;
                  }

              .apli-pflex-div-txt1 {
	              display: block;
	              margin: 0 auto;
                  padding: 1em 0;
	              width: 100%;
              }

                  .apli-pflex-div-txt-flex-dd1 {
	                  display: flex;
	                  position: relative;
                      justify-content: flex-start;
                      align-items: center;
                      margin-right: 1em;
                      width: auto;
                      text-align: left;
                  }

                  .apli-pflex-div-txt-icon {
	                  display: block;
	                  width: 48px;
                      padding-right: 5px;
                  }

                  .apli-pflex-div-txt-icon img {
	                  display: block;
	                  width: 100%;
                  }
    
    
    
     .pro_info { 
        display: block;
        position: relative;
        padding: 3em 0 2em 0;
        width: 100%;
    }
    
    
     .pro_infoflex { 
        grid-template-columns: repeat(1, 100%); /* n格, m%寬度 */
        width: 100%;
    }  
    
    .pro_infoflex-div1 { 
        display: block;
        position: relative;
        width: 100%;
    }

    
   /* -- 計數 -- */
   .stats {
       display: grid;
       position: relative;
       grid-template-columns: repeat(4, 25%); /* 4格, 23%寬度 */
       /*grid-template-columns: repeat(4, 1fr);*/
       margin: 2em auto 0 auto;
       padding: 2em 0;
       text-align: center;
       width: 85%;
   }

   .stat-number {
       font-size: 3em;
   }

   .stat-label {
       margin-top: 18px;
       font-size: 1em;
   }    
    
    
    .conform_ani { 
        padding: 2em 0 0 0;
        width: 100%;
        z-index: 1;
    }
    
    .conform_card { 
        margin: 0 0 -140px 0;
    }
    
    .service-card1 {
        position: relative;
        margin: 2em 3em 4em auto;
        top: 0;
        left: 0;
        transform: translate(0,0);
        width: 65%;
        padding: 2em 1.5em;
    }

    .service-card2 {
        position: relative;
        margin: 0 3em 4em auto;
        top: 0;
        left: 0;
        transform: translate(0,0);
        width: 65%;
        padding: 2em 1.5em;
    }

    .service-card3 {
        position: relative;
        margin: 0 3em 4em auto;
        top: 0;
        left: 0;
        transform: translate(0,0);
        width: 65%;
        padding: 2em 1.5em;
    }

        .icon-badge {
          position: absolute;
          top: -25px;
          right: 10px;
          width: 5em;
          height: 5em;
        } 
    
    
    
	.timelinearea {
		margin: 3em auto 0 auto;
		width: 90%;
	}

	    .timelinearea-line {
            top: 50%;
            left: 4%;
            transform: translate(0, -50%);
	    }

	    .time-dl {
            flex-wrap: wrap;
            margin: 0 0 3em 0;
            width: 100%;
	    }

	        .time-dd1 {
                margin: 0 0 0 20%;
                padding: 1em 0 0 0;
                width: 80%;
                order: 3;
	        }

	            .time-dd2-tt {
                    display: block;
                    position: relative;
                    margin-bottom: 5px;
                    width: 100%;
	            }


	        .time-pic {
                margin: 0 0 0 20%;
                width: 100%;
                order: 1;
	        }


	        .time-pt {
                display: flex;
                position: absolute;
                width: 8%;
                order: 1;
	        }

	        .time-pt-pp {
                position: relative;
                margin-top: 100%;
                width: 20px;
                height: 20px;
                border-radius: 20px;
	        }
    
    
    
    .QCr_adm { 
        margin: 0 auto;
        padding: 3em 0 3em 0;
        width: 100%;
    }
    
    .QCr_adm_flex { 
        flex-wrap: wrap;
        grid-template-columns: repeat(2, 48%); 
        margin: 2em auto;
        padding: 1em 0;
        width: 70%;
    }
    
    .QCr_adm_flex-div { 
        margin: 0em auto 1em auto;
        border-radius: 50px;
    } 
    
    .QCr_adm_flex-dc { 
        border-radius: 50px;
    } 
    
        .QCr_adm_flex-dc-pic { 
            display: block;
            position: relative;
            margin: 0 auto;
            width: 50%;
        }

        .QCr_adm_flex-dc-txt { 
            display: block;
            position: relative;
            padding: 1em 0;
            width: 100%;
            min-height: 100px;
        }
    
    
    .QCr_test { 
        padding: 5em 0 5em 0;
        width: 100%;
    }

    .QCr_test_flex { 
        flex-wrap: wrap;
        margin: 2em auto;
        padding: 2em 0;
        width: 75%;
        z-index: 10;
    }
    
        .QCr_test_flex-div-flex { 
            margin-bottom: 10px;
            width: 100%;
        }

        .QCr_test_flex-div1 { 
            margin-bottom: 10px;
            width: 100%;
            order: 2;
        }

        .QCr_test_flex-divtt { 
            margin-bottom: 2em;
            padding: 0;
            width: 100%;
            order: 1;
        }

        .QCr_test_flex-div2 { 
            width: 100%;
            order: 3;
        }
    
           .QCr_test_flex-div-pic { 
               width: 35%;
               order: 1;
            }

            .QCr_test_flex-div-txt { 
                width: 60%;
                order: 2;
            }
    
            .QCr_test_flex-divtt-c { 
                padding: 3em 0 2em 0;
                width: 100%;
                height: auto;
                border-radius: 30px;
            }   
    
    
    
    
	    .kno_box_title {  
            width: 80%;
	    }
    
    
	    .kno_flex1 {  
            flex-direction: column;
		    width: 100%;
	    }

	        .kno_flex1-d1 {  
                padding: 0 1em;
		        width: 100%;
                border-right: none;
	        }

	        .kno_flex1-d2 {  
                padding: 0 1em;
		        width: 100%;
	        }

	            .kno_flex1-d-list {  
                    display: block;
		            position: relative;
                    margin-bottom: 0.25em;
		            width: 100%;
	            }

	                .kno_flex1-d-flex-icon {  
                        display: block;
		                position: relative;
		                width: 60px;
	                }  
    
    
	            .kno_flex4-flex-d-list1 {  
                    flex-wrap: wrap;
                    padding-left: 1.1em;
                    width: 100%;
	            }
    
	            .kno_flex4-flex-d1 {  
                    padding: 1em;
	                width: 100%;
                    border-right: none;
                    border-bottom: solid 1px #808080;
	            }

	            .kno_flex4-flex-d2 {  
                    padding: 1em;
	                width: 100%;
                    border-bottom: solid 1px #808080;
	            }

	            .kno_flex4-flex-d3 {  
                    padding: 1em;
	                width: 100%;
                    border-right: none;
                    border-bottom: solid 1px #808080;
	            }

	            .kno_flex4-flex-d4 {  
                    padding: 1em;
	                width: 100%;
	                width: 100%;
	            }  
    
    
    .kno_fan_anayflex {  
        flex-direction: column;
        width: 95%;
    }

        .kno_fan_anayflex_pic {  
            display: block;
            position: relative;
            margin: 0 auto 2em auto;
            width: 70%;
        }

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

        .kno_fan_anayflex_div {  
            display: block;
            position: relative;
            width: 100%;
        }  
    
    
    
    
    
    
    
    
    
    
    /* -- 聯絡我們 -- */
    
    .contus_flex { 
        flex-direction: column;
        margin: 0 auto;
        width: 100%;
    }

        .contus_flex-map { 
            width: 100%;
        }

            .gmap { 
                min-height: 400px;
            }  

        .contus_flex-info { 
            justify-content: center;
            align-items: center;
            margin: 2em auto;
            padding: 0;
            width: 80%;
        }

            .cominfu { 
                display: block;
                position: relative;
                margin: 0 auto;
                padding: 0 3em;
            }  

            .cominfu-logo { 
                display: block;
                position: relative;
                width: 250px;
            }  

            .cominfu-logo1 { 
                margin-bottom: 1em;
                width: 300px;
            }      
    
    
    

	
/* myBtn - go top */

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

	.conside {
		width: 60px;
		height: 60px;
	}


    
    
    
/* Footer */

    
    
}	

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

/* header */ 
    
/* banner */

    .bannerabr2 {  
        display: none;
    }
    
/* area-container */	
    
/* Wrapper */	

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

	.ind_wind {  
	    display: block;
        position: relative;
        margin: 0 auto;
        width: 100%;
        z-index: 1;
        
        animation: spin 15s linear infinite;
        transform-origin: center;
	}  
    

	.ind_pinfo {  
        flex-direction: column;
        width: 100%;
        order: 2;
	}

	    .ind_pinfo-word {  
            width: 100%;
            padding: 1em 2em 1em 1em;
	    }  
    
	    .ind_pinfo-pro {  
            margin: 0 auto;
            width: 85%;
            order: 1;
	    } 
    

      #Carousel {
        --f-carousel-spacing: 0;
        --f-carousel-slide-width: 100%;
        --f-progress-color: transparent;
		  
        --f-carousel-slide-width: 100%;
        --f-carousel-spacing: 0;

        --f-button-next-pos: 0;
        --f-button-prev-pos: 0;

        --f-button-width: 20px;
        --f-button-height: 120px;
        --f-button-border-radius: 0;

        --f-button-color: #ed6c00;
        --f-button-hover-color: #ed6c00;
        --f-button-active-color: #ed6c00;

        --f-button-bg: rgba(0, 0, 0, 0.1);
        --f-button-hover-bg: rgba(0, 0, 0, 0.2);
        --f-button-active-bg: rgba(0, 0, 0, 0.2);

        --f-button-svg-width: 30px;
        --f-button-svg-height: 30px;
        --f-button-svg-stroke-width: 2;  
      }

      #Carousel .f-carousel__slide {
          display: flex;
          justify-content: center;
          align-content: center;
          margin: auto;
		  width: 100%;
      }

      .carousel_pro {

      }

          .carousel_pro-pic {
              padding: 0 1em 0.5em 1em;
	          width: 88%;
          }

          .carousel_pro-name {
              padding: 0.3em 1em;
          }
    
    
    
        .ind_fu_r1 {
            margin-left: auto;
            margin-right: auto;
            width: 90%;
	    }
    
	    .ind_fu_r2 {  
            justify-content: center;
            flex-wrap: wrap;
            width: 80%;
            margin: 3em auto 0 auto;
	    }

	        .ind_fu_r2-div1 {  
                margin: 0 2em 2em 2em;
                width: 32%;
	        }

	        .ind_fu_r2-div2 {  
                margin: 0 2em 2em 2em;
                width: 32%;
	        }

	        .ind_fu_r2-div3 {  
                margin: 0 2em 0 2em;
                width: 32%;
	        }

	        .ind_fu_r2-div4 {  
                margin: 0 2em 0 2em;
                width: 32%;
	        }    
    
    
   /* -- 計數 -- */
   .stats {
       display: grid;
       position: relative;
       grid-template-columns: repeat(2, 48%); /* 4格, 23%寬度 */
       /*grid-template-columns: repeat(4, 1fr);*/
       margin: 1em auto 0 auto;
       padding: 2em 0;
       text-align: center;
       width: 85%;
   }
    
   .stat-item {
       margin-bottom: 2em;
   }

   .stat-number {
       font-size: 3em;
   }

   .stat-label {
       margin-top: 18px;
       font-size: 1em;
   }       
    
    
    .about-txt { 
        width: 90%;
    } 
    
    .about-txt2 { 
        width: 90%;
    } 
    
    .about-ani { 
        width: 90%;
    }
    
    .about-ani2 { 
        width: 100%;
    }
    
    
     .about-his_flex {   
         flex-direction: column;
         justify-content: flex-start;
         align-items: center;
          width: 100%;
    }

        .about-his_flex-date {   
            justify-content: flex-start;
            padding: 0.8em 0 0 0;
            width: 100%;
            font-size: 45px;
            font-weight: bold;
        }

        .about-his_flex-icon {   
            margin-left: 15px;
            width: 20px;
        }

        .about-his_flex-div {   
            display: block;
            position: relative;
            width: 100%;
            padding: 1em 0 1.35em 0;
            text-align: justify;
        }

    
    .QCr_cf_flex { 
        margin: 0 auto;
        padding: 0 0 3em 0;
        width: 90%;
    }

        .QCr_cf_flex-div { 
            width: 100%;
        }

            .QCr_cf_flex-div-icon { 
                width: 200px;
            }
    

    .QCr_adm { 
        margin: 0 auto;
        padding: 3em 0 3em 0;
        width: 100%;
    }
    
    .QCr_adm_flex { 
        flex-wrap: wrap;
        grid-template-columns: repeat(1, 100%); 
        margin: 2em auto;
        padding: 1em 0;
    }
    
    .QCr_adm_flex-div { 
        margin: 0em auto 1em auto;
        padding: 1em;
        border-radius: 50px;
    } 
    
    .QCr_adm_flex-dc { 
        border-radius: 50px;
    } 
    
        .QCr_adm_flex-dc-pic { 
            display: block;
            position: relative;
            margin: 0 auto;
            width: 50%;
        }

        .QCr_adm_flex-dc-txt { 
            display: block;
            position: relative;
            padding: 1em 0;
            width: 100%;
            min-height: 100px;
        }
    
    
    
    
    /* -- news -- */
    .news_flex { 
        grid-template-columns: repeat(1, 100%); 
        width: 70%;
    }
    
	    .news_flex-div-news { 
            padding: 0.5em 1.5em;
            min-height: auto;
        }
    

    
    
/* Footer */

    
    
}


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

/* header */ 
    
/* banner */

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

/* setting */
    
	.ind {  
        flex-wrap: wrap;
        margin: -1em auto 1em auto;
        width: 100%;
  	    height: 120px;
	}

	.ind-div1 {  
        width: 25%;
    	height: 120px;
	}

	.ind-div2 {  
        width: 25%;
    	height: 120px;
	}

	.ind-div3 {  
        width: 25%;
    	height: 120px;
	}     
    
	    .ind-div-c-name { 
            transform: scale(0.8);
            width: 100%;
	    }    
    
    
    
	.ind_team {  
        padding: 3em 1em;
	}
    
	        .partner_flex {  
	            flex-direction: column;
                justify-content: flex-start;
                align-items: stretch;
                margin: 0.5em 0;
                width: 100%;
	        }

	            .partner_flex_icon {  
                    margin-bottom: 10px;
                    width: 80px;
	            }
    
	            .partner_flex_instru {  
                    width: 100%;
                    padding-left: 0;
	            } 
    
    
        .ind_fu_r1 {
            margin-left: auto;
            margin-right: auto;
            width: 90%;
	    }
    
	    .ind_fu_r2 {  
            justify-content: center;
            flex-wrap: wrap;
            width: 80%;
            margin: 3em auto 0 auto;
	    }

	        .ind_fu_r2-div1 {  
                margin: 0 2em 2em 2em;
                width: 32%;
	        }

	        .ind_fu_r2-div2 {  
                margin: 0 2em 2em 2em;
                width: 32%;
	        }

	        .ind_fu_r2-div3 {  
                margin: 0 2em 2em 2em;
                width: 32%;
	        }

	        .ind_fu_r2-div4 {  
                margin: 0 2em 2em 2em;
                width: 32%;
	        }   
    
    
      /*-- 產品應用 --*/

      .apli-list {
          
      }
    
              .apli-list-div-flex-icon {
                  flex: 0 0 70px;
              } 
    
    
    /*-- 產品--*/

    .pro_sub-prolist { 
        grid-template-columns: repeat(2, 50%); /* 4格, 23%寬度 */
        width: 100%;
    } 
    
	    .pro_sub-prolist-div { 
    	    display: flex;
    	    position: relative;
    	    flex-direction: column;
    	    justify-content: center;
    	    align-items: center;
    	    width: 100%;
    	    background: #FFF;
    	    transition: all 0.2s ease-in-out; /* 將過渡效果放在這裡，移入移出都有動畫 */
    	    transition: all 0.2s ease-in-out;
    	    border-right: solid 1px #CCC; 
    	    box-sizing: border-box; /* 確保邊框不撐開寬度 */
        }

    
	    .pro_sub-prolist-div:last-child { 
            padding-top: 1em;
    	    border-right: solid 0px #CCC; 
        }
    
	    .pro_sub-prolist-div:nth-child(2) { 
    	    border-right: solid 0px #CCC; 
            border-bottom: solid 1px #CCC;
        }
    
	    .pro_sub-prolist-div:nth-child(1) { 
            border-bottom: solid 1px #CCC;
        }
    
	    .pro_sub-prolist-div:nth-child(3) { 
            padding-top: 1em;
        } 
    
    
    .pro_ptflex { 
        grid-template-columns: repeat(2, 50%);  
        margin: 1em auto 1em auto;
        width: 100%;
    }

        .pro_ptflex-div, .pro_ptflex-div1, .pro_ptflex-div2 { 
            padding: 1.5em 2em;
            width: 100%;
        }  
    
            .pro_ptflex-div-pic { 
                width: 80px;
            } 
    
    
     .pro_ptable { 
         margin: 0.5em auto 1em auto;
         width: 100%;
         border-top: solid 1px #b3b3b3;
    }

        .pro_ptable-r { 
            justify-content: space-between;
            align-items: stretch;
            width: 100%;
            border-bottom: solid 1px #b3b3b3;
        }

            .pro_ptable-r1 { 
                justify-content: flex-start;
                align-items: center;
                padding: 0.3em 1em 0.25em 1em;
                width: 45%;
                min-width: auto;
                background-color: #e6e6e6;
            }

            .pro_ptable-r1-1 { 
                justify-content: flex-start;
                align-items: center;
                padding: 0.3em 1em 0.25em 1em;
                width: 45%;
                min-width: auto;
            }

            .pro_ptable-r2 { 
                justify-content: flex-start;
                align-items: center;
                padding: 0.3em 1em 0.25em 1em;
                width: 50%;
            }  
    
    
    .QCr_cf_flex { 
        margin: 0 auto;
        padding: 0 0 2em 0;
        width: 90%;
    }

        .QCr_cf_flex-div { 
            width: 100%;
        }

            .QCr_cf_flex-div-icon { 
                width: 150px;
            }
    
    
    .kno_fan-flex {  
        flex-direction: column;
        margin: 2em auto;
        width: 100%;
    }

        .kno_fan-flex-div {  
            margin-bottom: 2em;
            width: 100%;
        }

            .kno_fan-flex-div-pic {  
                flex-direction: column;
                width: 100%;
            }

                .kno_fan-flex-div-pic-1 {  
                    flex-direction: column;
                    margin: 0 auto;
                    width: 70%;
                }

                .kno_fan-flex-div-pic-2 {  
                    margin: 0 auto 0.5em auto;
                    padding: 0 1em 0 1em;
                    width: 100%;
                } 
    
    
    
    
    
    /* -- news -- */
    .news_flex { 
        grid-template-columns: repeat(1, 100%); 
        width: 80%;
    }
    
    
    
/* Footer */

    
    
}


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

/* header */ 
    
/* banner */

/* area-container */	

	.pathcontainer {  
        margin: 0 auto;
		width: 70%;
	}

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

	.bodycontainer2 {  
        width: 85%;
	}

	.bodycontainer3 {  
        width: 75%;
	}
    
	.bodycontainer4 {  
        width: 72%;
	}

	.footercontainer {  
        width: 80%;
	} 
    
/* Wrapper */

/* setting */

        .ind_fu_r1 {
            width: 100%;
            padding: 2em;
	    }
    
	    .ind_fu_r2 {  
            justify-content: center;
            flex-wrap: wrap;
            width: 90%;
            margin: 3em auto 0 auto;
	    }

	        .ind_fu_r2-div1 {
                width: 50%;
	        }

	        .ind_fu_r2-div2 {  
                width: 50%;
	        }

	        .ind_fu_r2-div3 {  
                width: 50%;
	        }

	        .ind_fu_r2-div4 {  
                width: 50%;
	        }   
    
    
    

    
    
    
    
    /* -- 聯絡我們 -- */
    
    .contus_flex { 
        flex-direction: column;
        margin: 0 auto;
        width: 100%;
    }

        .contus_flex-map { 
            width: 100%;
        }

            .gmap { 
                min-height: 400px;
            }  

        .contus_flex-info { 
            justify-content: center;
            align-items: center;
            margin: 2em auto;
            padding: 0;
            width: 95%;
        }

            .cominfu { 
                display: block;
                position: relative;
                margin: 0 auto;
                padding: 0 3em;
            }  

            .cominfu-logo { 
                display: block;
                position: relative;
                width: 70%;
            }  

            .cominfu-logo1 { 
                margin-bottom: 1em;
                width: 90%;
            }     
    
    
/* Footer */

		    #footer .frecom-logo {
		        display: block;
                position: relative;
                margin-bottom: 20px;
			    width: 60%;
		    }


		    #footer .frecom-comname {
		        display: block;
                position: relative;
			    width: 85%;
		    } 
    
}


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

/* header */ 
    
/* banner */

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

/* setting */
    
      /*-- 產品應用 --*/

      .apli-list {
          
      }
    
          .apli-list-div-ab {
              position: relative;
              padding: 1.5em 1.5em 1em 1.5em;
              width: 100%;
              height: auto;
              background: #F0F0F0;
              ovder:2;
          }

          .apli-list-div-flex {
              flex-direction: column;
          }
    
              .apli-list-div-flex-icon {
                  margin-bottom: 0.5em;
                  width: 80px;
              } 
    
              .apli-list-div-flex-word {
                  padding-left: 0;
	              width: 100%;
              }
    
    
    .pro_ptflex { 
        grid-template-columns: repeat(1, 100%);  
        margin: 1em auto 1em auto;
        width: 100%;
    }

        .pro_ptflex-div, .pro_ptflex-div1, .pro_ptflex-div2 { 
            margin: 0 auto;
            padding: 1.5em 2em;
            width: 85%;
        }  
    
            .pro_ptflex-div-pic { 
                width: 80px;
            } 
    
        .pro_ptflex-div:last-child { 
            display: none;
        }  
    
    
    
    .about-nav {     
        grid-template-columns: repeat(2, 50%); /* 4格, 23%寬度 */
    }

    
    .tech-nav {     
        display: none;
    }
    
    
    .conform_ani { 
        padding: 2em 0 0 0;
        width: 100%;
        z-index: 1;
    }
    
    .conform_card { 
        margin: 0 0 -100px 0;
    }
    
    .service-card1 {
        position: relative;
        margin: 2em 3em 4em auto;
        top: 0;
        left: 0;
        transform: translate(0,0);
        width: 65%;
        padding: 2em 1.5em;
    }

    .service-card2 {
        position: relative;
        margin: 0 3em 4em auto;
        top: 0;
        left: 0;
        transform: translate(0,0);
        width: 65%;
        padding: 2em 1.5em;
    }

    .service-card3 {
        position: relative;
        margin: 0 3em 4em auto;
        top: 0;
        left: 0;
        transform: translate(0,0);
        width: 65%;
        padding: 2em 1.5em;
    }

        .icon-badge {
          position: absolute;
          top: -25px;
          right: 10px;
          width: 5em;
          height: 5em;
        } 
    
    
    .QCr_cf_flex { 
        margin: 0 auto;
        padding: 0 0 2em 0;
        width: 90%;
    }

        .QCr_cf_flex-div { 
            width: 100%;
        }

            .QCr_cf_flex-div-icon { 
                width: 55%;
            }  
    
    
    
/* Footer */

    
    
}



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

/* header */ 
    
/* banner */

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

/* setting */
    
	    .ind_fu_r2 {  
            justify-content: center;
            flex-wrap: wrap;
            width: 90%;
            margin: 3em auto 0 auto;
	    }

	        .ind_fu_r2-div1 {
                width: 55%;
	        }

	        .ind_fu_r2-div2 {  
                width: 55%;
	        }

	        .ind_fu_r2-div3 {  
                width: 55%;
	        }

	        .ind_fu_r2-div4 {  
                width: 55%;
	        }   
    
    
    .QCr_test { 
        padding: 5em 0 5em 0;
        width: 100%;
    }

    .QCr_test_flex { 
        flex-wrap: wrap;
        margin: 2em auto;
        padding: 2em 0;
        width: 75%;
        z-index: 10;
    }
    
        .QCr_test_flex-div-flex { 
            margin-bottom: 10px;
            width: 100%;
        }

        .QCr_test_flex-div1 { 
            margin-bottom: 10px;
            width: 100%;
            order: 2;
        }

        .QCr_test_flex-divtt { 
            margin-bottom: 2em;
            padding: 0;
            width: 100%;
            order: 1;
        }

        .QCr_test_flex-div2 { 
            width: 100%;
            order: 3;
        }
    
        .QCr_test_flex-div-flex { 
            flex-direction: column;
            margin-bottom: 10px;
            width: 100%;
        }
    
           .QCr_test_flex-div-pic { 
               width: 35%;
               order: 1;
            }

            .QCr_test_flex-div-txt { 
                width: 100%;
                order: 2;
            }
    
            .QCr_test_flex-divtt-c { 
                padding: 3em 0 2em 0;
                width: 100%;
                height: auto;
                border-radius: 30px;
            }   
    
    
    
    
    
/* Footer */

		    #footer .frecom-logo {
		        display: block;
                position: relative;
                margin-bottom: 20px;
			    width: 70%;
		    }


		    #footer .frecom-comname {
		        display: block;
                position: relative;
			    width: 100%;
		    }  
    
}


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

/* header */ 
    
/* banner */

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

/* setting */
    
/* Footer */ 
    
}


@media screen and (max-width: 300px) {
	
    
    .conform_ani { 
        padding: 2em 0 0 0;
        width: 100%;
        z-index: 1;
    }
    
    .conform_card { 
        margin: 0 0 -80px 0;
    }
    
    .service-card1 {
        position: relative;
        margin: 2em 3em 4em auto;
        top: 0;
        left: 0;
        transform: translate(0,0);
        width: 65%;
        padding: 2em 1.5em;
    }

    .service-card2 {
        position: relative;
        margin: 0 3em 4em auto;
        top: 0;
        left: 0;
        transform: translate(0,0);
        width: 65%;
        padding: 2em 1.5em;
    }

    .service-card3 {
        position: relative;
        margin: 0 3em 4em auto;
        top: 0;
        left: 0;
        transform: translate(0,0);
        width: 65%;
        padding: 2em 1.5em;
    }

        .icon-badge {
          position: absolute;
          top: -25px;
          right: 10px;
          width: 4em;
          height: 4em;
        } 
    
    
	#myBtn {
		bottom: 4em;
		right: 0.5em;
		width: 40px;
		height: 40px;
	}
	
			#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: 1px;
			}
		
			#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;
						box-shadow: 2px 2px 2px #666;
					}

					#navButton .toggle:after {
						background: #555;
						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;
}