@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;*/
		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 {
		display: block;
        mix-blend-mode: screen; /* 將黑色背景過濾掉顯示透明效果 */
        background-color: transparent;
		image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
	}


/* 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: #1FACCC;
	}

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

	strong, b {
		font-weight: 800;
	}

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


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

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

	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.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 */


/* 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;
			border-bottom: solid 20px #1FACCC;
			
			-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%;
			 height: auto;
	     }

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


		.inner1 {
			display: block;
			position: relative;
			margin: 0 auto;
			padding: 0;
			overflow: hidden;
			opacity: 0;
			line-height: 0;
			border-bottom: solid 20px #1FACCC;
			
			-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;	
		}	

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

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

    .banner_txt { 
        display: block;
        position: absolute;
		bottom: 30%;
		left: 50%;
		transform: translate(-50%, 0%);
		color: #FFF;
		text-shadow: 2px 2px 8px #000;
		z-index: 10;
    }

    .banner_path { 
        display: block;
        position: absolute;
		padding: 0.2em 0;
		width: 100%;
		bottom: 0%;
		left: 50%;
		transform: translate(-50%, 0%);
		background-color: rgba(255, 255, 255, 0.8);
		z-index: 10;
    }

        .banner_path a { 
            color: #000;
        }

        .banner_path a:hover { 
            color: #1FACCC;
        }


	.SCROLL {  
		display: flex;
		position: absolute;
		justify-content: center;
		left: 50.45%;
		top: 78%;
		transform: translate(-50%, 0);
        margin: 0 auto;
		width: 1%;
		height: 100%;
		z-index: 10;
	}

        .SCROLL_line { 
			margin: 0 auto;
            width: 1px;
			height: 100%;
			background: #FFF;
        }

        .SCROLL_word { 
			display: block;
			position: relative;
			width: 1em;
            writing-mode: vertical-rl; /* 從右到左的直書（最符合中文傳統閱讀習慣） */
			color: #FFF;
			animation: floatVertical 2s infinite ease-in-out;
        }

  @keyframes floatVertical {
    0%, 100% {
      transform: translateY(0); /* 原位 */
    }
    50% {
      transform: translateY(20px); /* 往上飄移 15 像素 */
    }
  }




/* area-container */	

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

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

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

	.bodycontainer1 {  
        margin: 0 auto;
        position: relative;
		max-width: 1920px;
		width: 90%;
	}

	.bodycontainer2 {  
        margin: 0 auto;
        position: relative;
		max-width: 1344px;
		width: 80%;
	}

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

	.bodycontainer5 {  
        margin: 0 auto;
        position: relative;
		max-width: 1344px;
		width: 80%;
	}

	.bodycontainer6 {  
        margin: 0 auto;
        position: relative;
		max-width: 1440px;
		width: 80%;
	}


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


/* Wrapper */

	.wrapper {
		position: relative;
		overflow: hidden;
	}

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

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

/* setting */



/*  首頁設定  */



.ind_r1 {
	position: relative;
	background: #e6e6e6;
    width: 100%;
}

    .ind_slik_c {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3; 
		overflow: hidden;  
    }	

	.evtitle {  
        display: inline-flex;
        position: relative;
		justify-content: center;
		margin: 2em 0;
		width: 100%;
	}

	.evtitle_l {  
        display: inline-flex;
        position: relative;
		justify-content: flex-start;
		margin: 2em 0;
		width: 100%;
	}

	.evtitle_icon {  
        position: relative;
		margin-right: 5px;
		width: 2em;
	}

		.evtitle_icon img {  
            position: relative;
		    width: 2em;
			height: auto;
			transform: translateY(4px);
	    }



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

    .ind_r2-a1 {
		display: block;
	    position: relative;
		padding: 1em 5em 0.5em 5em;
        width: 100%;
		background-image: url(../../images/pic_ind_r2_bg.png), url(../../images/pic_ind_r2_bg2.png);
		background-position: right bottom;
		background-size: 100%;
		background-repeat: no-repeat, repeat;
    } 

    .ind_r2-a2 {
		display: flex;
	    position: relative;
		justify-content: space-between;
		align-items: stretch;
        width: 100%;
		margin-bottom: 3em;
    } 

        .ind_r2-a2-le {
		    display: block;
	        position: relative;
			padding: 1em 1.5em 1em 1.5em;
            width: 43%;
			background: #b3b3b3;
			border-bottom-left-radius: 22px;
        } 

        .ind_r2-a2-ri {
		    display: block;
	        position: relative;
			padding: 1em 1.5em 1em 1.5em;
            width: 57%;
			background: #c2c2c2;
			border-bottom-right-radius: 22px;
        } 

            .ind_r2_mm1 { 
                display: grid;
                position: relative;
                grid-template-columns: repeat(3, 30%); 
                justify-content: space-between;
                align-items: stretch;
                margin: 0 auto;
                width: 100%;
            }

	            .ind_r2_mm1-div { 
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: stretch;
                    width: 100%;
                }

	            .ind_r2_mm1-div-pic { 
                    display: block;
                    width: 100%;
					height: auto;
                }

	            .ind_r2_mm1-div-pic img { 
                    display: block;
                    width: 100%;
					height: auto;
                }

	            .ind_r2_mm1-div-word { 
                    display: block;
                    width: 100%;
					height: auto;
					padding: 0.3em 1em;
					text-align: center;
                }

            .ind_r2_mm2 { 
                display: grid;
                position: relative;
                grid-template-columns: repeat(4, 22%); 
                justify-content: space-between;
                align-items: stretch;
                margin: 0 auto;
                width: 100%;
            }

	            .ind_r2_mm2-div { 
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: stretch;
                    width: 100%;
                }


.ind_r3 {
    display: flex;
	position: relative;
	justify-content: center;
	padding: 0;
    width: 100%;
	background-image: url(../../images/pic_ind_r3_bg.webp);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

    .ind_r3-div-center {
        display: block;
	    position: relative;
	    justify-content: center;
		margin-top: -1px;
	    padding: 0 3em 2em 3em;
        width: 620px;
		min-height: 540px;
		background: #fff;
		clip-path: polygon(100% 0, 100% 70%, 50% 100%, 0 70%, 0 0);
    }

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

	            .ind_r3_mm-div { 
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: stretch;
                    width: 100%;
                }

	            .ind_r3_mm-pic { 
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: stretch;
                    width: 100%;
                }

				    .ind_r3_mm-pic img { 
                         width: 100%;
						 height: auto;
                    }

	            .ind_r3_mm-word { 
                    display: block;
					padding: 0.3em 1em;
                    width: 100%;
					text-align: center;;
                }


.ind_r4 {
    display: flex;
	position: relative;
	justify-content: center;
	margin-top: 3em;
	padding: 0;
    width: 100%;
    background-image: url(../../images/pic_ind_r4_bg3.webp);
    background-position: center;
	background-size: 100%;
	background-repeat: repeat;
}

    .ind_r4_f1e {
		display: flex;
		position: relative;
		justify-content: center;
		align-items: center;
		width: 67.7%;
        background-image: url(../../images/pic_ind_r4_bg1.webp);
	    background-position: center bottom;
	    background-size: cover;
	    background-repeat: no-repeat;
    }
	
        .ind_r4_f1e img {
		    position: relative;
		    width: 100%;
		    height: auto;
        }	

    .ind_r4_fri {
		display: flex;
		position: relative;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		padding: 1em 2em;
		width: 32.3%;
        background-image: url(../../images/pic_ind_r4_bg2.webp);
	    background-position: right bottom;
	    background-size: 100%;
	    background-repeat: no-repeat;
    }

        .ind_r4_fri_txt {
			width: 85%;
        }	

        .ind_r4_fri_c {
			margin: 0;
			width: 100%;
		    display: -webkit-box;
		    -webkit-box-orient: vertical;
		    -webkit-line-clamp: 4; /* 這裡輸入你想要限制的行數（例如：2行） */
		    overflow: hidden;       /* 超出範圍的部分隱藏 */
        }	


.flowing-line {
    position: absolute;
	bottom: 51%;
	left: 73.8%;
	text-replace: transform(0, 0);
    /* 1. 設定直線的尺寸與形狀 */
    width: 6px;             /* 直線的粗細，可自行調整 */
    height: 65%;            /* 直線的高度，可自行調整 */
    border-radius: 0;       /* 讓直線兩端稍微圓角（可選） */
    z-index: 11;

    /* 2. 製作藍色系的漸層背景（拉長延伸以利滾動） */
    background: linear-gradient(
      to bottom,
	  #00c6ff, /* 亮藍 */
      #0072ff, /* 深藍 */
	  #00c6ff, /* 亮藍（重複顏色才能無縫循環） */
	  #0072ff  /* 深藍 */
    
    );
  
    /* 3. 將背景高度放大到 200%，讓它有空間上下移動 */
    background-size: 200% 200%;

    /* 4. 套用流動動畫：時長 3 秒、無限循環、線性勻速 */
    animation: flowAnimation 3s linear infinite;
}

@keyframes flowAnimation {
  0% {
    background-position: 0% 0%; /* 從最上方開始 */
  }
  100% {
    background-position: 0% 100%; /* 動態向下滑動整整一個循環 */
  }
}


.ind_r5 {
    display: flex;
	position: relative;
	justify-content: space-between;
	padding: 0;
    width: 100%;
    background-image: url(../../images/pic_ind_r5_bg.webp);
    background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

    .ind_r5_f1e {
		display: flex;
		position: relative;
		justify-content: flex-end;
		align-items: center;
		padding: 1em 0;
		width: 67.8%;
		
    	background-image: url(../../images/pic_ind_r5_bg2.webp);
    	background-position: left top;
		background-size: 148%;
		background-repeat: no-repeat;
		z-index: 2;
    }

        .ind_r5_fle_space {
			display: block;
			position: relative;
			width:30%;
        }	

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

    .ind_r5_fri {
		width: 30%;
		z-index: 1;
    }


.ind_r6 {
    display: flex;
	position: relative;
	justify-content: space-between;
	align-items: stretch;
	padding: 0;
}

    .ind_r6_fle {
		display: block;
		width: 55%;
		background-image: url(../../images/pic_ind_r6_pic.webp);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top right;
    }

	    .ind_r6_fle img {
		    position: relative;
		    width: 100%;
			height: auto;
        }

    .ind_r6_fri {
		display: flex;
		position: relative;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 2em 2em 2em 0;
		width: 45%;
    }

		.ind_r6_c {
		    position: relative;
		    width: 100%;
			height: auto;
        }

		.ind_r6_txt {
		    position: relative;
		    width: 80%;
			height: auto;
        }

	    .ind_r6_3icon {
			display: flex;
		    position: relative;
			justify-content: flex-start;
			align-items: stretch;
			margin: 15px 0;
		    width: 100%;
        }

	    	.ind_r6_3icon-div {
				display: block;
		    	position: relative;
		    	width: 160px;
        	}

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

				.ind_r6_3icon-divpic img {
					display: block;
		    	    position: relative;
					margin: 0 auto;
		    	    width: 80%;
       	 	    }

			.ind_r6_3icon-txt {
				display: block;
		    	position: relative;
				padding: 5px 0;
		    	width: 100%;
				text-align: center;
       	 	}

	    	.ind_r6_3icon-divadd {
				display: flex;
		    	position: relative;
				flex-direction: column;
				justify-content: center;
				align-items: center;
		    	width: 40px;
       	 	}


.ind_r7 {
    display: flex;
	position: relative;
	justify-content: flex-end;
	align-items: stretch;
	margin: 3em auto;
	padding: 0;
}

    .ind_r7_div1 {
		display: flex;
		position: relative;
		justify-content: center;
		align-items: center;
		margin: 0 10px;
		width: 35.3%;
		overflow: hidden;
		cursor: pointer;
    }

    .ind_r7_div2 {
		display: flex;
		position: relative;
		justify-content: center;
		align-items: center;
		margin: 0 10px;
		width: 22%;
		overflow: hidden;
		cursor: pointer;
    }

    .ind_r7_div3 {
		display: flex;
		position: relative;
		justify-content: center;
		align-items: center;
		margin: 0 10px;
		width: 22%;
		overflow: hidden;
		cursor: pointer;
    }

    .ind_r7_divab {
		display: flex;
		position: absolute;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: auto;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 10;
    }

        .ind_r7_div_icon  {
		    display: block;
		    position: relative;
			margin-bottom: 10px;
		    width: 50px;
		    height: auto;
        }

		.ind_r7_div_name  {
		    display: block;
		    position: relative;
		    width: 100%;
		    height: auto;
			text-align: center;
        }

        .ind_r7_div1:hover img, 
		.ind_r7_div2:hover img, 
		.ind_r7_div3:hover img {
		    transform: scale(1.2);
			-webkit-transition:all 0.4s ease-in-out;
	        transition:all 0.4s ease-in-out;
        }

        .ind_r7_div1:hover .ind_r7_div_icon img, 
		.ind_r7_div2:hover .ind_r7_div_icon img, 
		.ind_r7_div3:hover .ind_r7_div_icon img {
		    transform: scale(1);
			-webkit-transition:all 0.3s ease-in-out;
	        transition:all 0.3s ease-in-out;
        }

        .ind_r7_div1 img, .ind_r7_div2 img, .ind_r7_div3 img, .ind_r7_div_icon img  {
		    display: block;
		    position: relative;
		    width: 100%;
		    height: auto;
        }


/*  關於澄倡  */

.about_r1_flex {
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	margin-bottom: 2em;
    width: 100%;
}

	.about_r1_flex-d1 {
		display: inline-block;
		position: relative;
    	width: auto;
    }

	.about_r1_flex-d2 {
		display: block;
		position: relative;
		margin: 0;
    	width: 185px;
    }

		.about_r1_flex-d2 img {
		    display: block;
		    position: relative;
    	    width: 100%;
        }

	.about_r1_flex-d3 {
		display: inline-block;
		position: relative;
    	width: auto;
    }


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

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

		/* 容器隨視窗大小變化，這裡以滿版為例，可自由調整 */
		.curve-container {
  			width: 60%;
  			height: 60%;
  			box-sizing: border-box;
  			padding: 20px; /* 可加上內邊距防止外框切到線條 */
		}

		.curve-container svg {
  			width: 100%;
  			height: 100%;
  			display: block;
		}

	.about_r2-ab2 {
		display: block;
		position: absolute;
    	width: 100%;
		top: 63%;
		left: 50%;
		transform: translate(-50%, 0);
		z-index: 5;
	}

		.about_r2 img, .about_r2-ab1 img, .about_r2-ab2 img {
			position: relative;
   	   	 	width: 100%;
			height: auto;
		}


.about_r3 {
	display: block;
	position: relative;
    width: 100%;
	background: #FFF;
}

.about_r3_line {
	position: absolute;
	top: 0;
	left: calc(50%);
	transform: translate(-50%, 80px);
    width: 0.37%;                          
    height: 80%;                       
    background: linear-gradient(to top, #0000ff, #0000ff); /* 漸層顏色 */

	opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

    .about_r3_line.is-visible {
        opacity: 1;
        transform: translate(-50%, 0px);
    }



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

	.about_r3_flex-dle {
		display: inline-block;
		position: relative;
		margin: 1em 30px;
    	width: 420px;
		text-align: right;
    }

	.about_r3_flex-dri {
		display: inline-block;
		position: relative;
		margin: 1em 30px;
    	width: 420px;
    }

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


	.about_r3_company-p1 {
		position: relative;
    	width: 100%;
	}

    .about_r3_company-p1-m {
        display: none;
    }

	.about_r3_company-p2 {
		position: relative;
		margin-top: -2%;
    	width: 100%;
		z-index: 50;
	}

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


.about_r3_title {
	display: inline-block;
	position: absolute;
	top: 30%;
	left: 51%;
	transform: translate(-50%, -50%);
    writing-mode: vertical-rl;  /* 設定文字由上到下、由右到左直排 */
    white-space: nowrap;       /* 強制不換行，確保維持 1 行 */
	z-index: 2000;

	opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

	.about_r3_title.is-visible {
		opacity: 1;
        transform: translateY(0);
	}

	.about_r3_comp1 {
		display: flex;
		position: absolute;
		justify-content: center;
		align-items: baseline;
		top: 5%;
		left: 22%;
    	width: 25%;
		z-index: 5;

		opacity: 0;
        transform: translateY(80px);
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

	.about_r3_comp1.is-visible {
		opacity: 1;
        transform: translateY(0);
	}

		.about_r3_comppic {
	        display: block;
		    position: relative;
    	    width: 100%;
			border-radius: 20px;
			overflow: hidden;
	    }

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

		.about_r3_comp1txt {
	        display: block;
		    position: relative;
			padding: 0.5em;
    	    writing-mode: vertical-rl;  /* 設定文字由上到下、由右到左直排 */
            white-space: nowrap;       /* 強制不換行，確保維持 1 行 */
	    }


	.about_r3_comp2 {
		display: flex;
		position: absolute;
		justify-content: center;
		align-items: stretch;
		top: 10%;
		left: 55%;
    	width: 25%;
		z-index: 5;

		opacity: 0;
        transform: translateY(80px);
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

	.about_r3_comp2.is-visible {
		opacity: 1;
        transform: translateY(0);
	}

	.line-wrapper {
  	    position: relative;
  	    width: 20%; 
  	    align-self: stretch;     /* 讓左欄高度跟著右欄圖片拉滿，方便畫垂直線 */
	}
	
	/* 水平線主體 */
	.pointer-line {
  	  position: absolute;
	  top: 38%;                /* 固定在圖片高度的 38% 位置（完美對齊手部） */
	  left: 10%;               /* 讓垂直線跟左邊邊緣保持一點安全距離 */
	  width: 90%;              /* 線條寬度直接拉滿到圖片邊緣 (10% + 90% = 100%) */
	  height: 2px;
	  background-color: #1FACCC;
	}

	/* 轉折向下的垂直線：利用父層高度（stretch）來達到真正的自動伸縮 */
	.pointer-line::before {
	    content: "";
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 2px;
	    height: 33cqi;           /* 使用容器查詢單位或相對長度，讓它隨圖片縮小而變短 */
	    background-color: #1FACCC;
	}

	/* 最底部的圓點 */
	.pointer-line::after {
	    content: "";
	    position: absolute;
 	    left: -4px;              /* 居中對齊 2px 的線 (2-10)/2 */
  
	    /* 用 calc 綁定上面垂直線的 height，垂直線多長，圓點就跟到哪 */
 	    top: calc(33cqi); 
	    /* 由於上面有限制最大最小值，這裡也要同步綁定 fallback */
	    top: clamp(100px, 33cqi, auto); 
  
	    width: 10px;
	    height: 10px;
	    border-radius: 50%;
 	    background-color: #1FACCC;
	}

		.about_r3_comp2txt {
	        display: block;
		    position: absolute;
			top: 10px;
			left: 15%;
    	    writing-mode: vertical-rl;  /* 設定文字由上到下、由右到左直排 */
            white-space: nowrap;       /* 強制不換行，確保維持 1 行 */
			z-index: 7;
	    }


	.about_r3_comp3 {
		display: flex;
		position: absolute;
		justify-content: center;
		align-items: stretch;
		top: 50%;
		left: 17%;
    	width: 25%;
		z-index: 5;

		opacity: 0;
        transform: translateY(80px);
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

	.about_r3_comp3.is-visible {
		opacity: 1;
        transform: translateY(0);
	}

	.line-wrapper3 {
  	    position: relative;
  	    width: 20%; 
  	    align-self: stretch;    
	}
	
	/* 水平線主體 */
	.pointer-line3 {
  	  position: absolute;
	  top: 38%;             
	  left: 0%;             
	  width: 90%;             
	  height: 2px;
	  background-color: #1FACCC;
	}

	/* 轉折向下的垂直線：利用父層高度（stretch）來達到真正的自動伸縮 */
	.pointer-line3::before {
	    content: "";
	    position: absolute;
	    top: 0;
	    right: 0;
	    width: 2px;
	    height: 15cqi;           /* 使用容器查詢單位或相對長度，讓它隨圖片縮小而變短 */
	    background-color: #1FACCC;
	}

	/* 最底部的圓點 */
	.pointer-line3::after {
	    content: "";
	    position: absolute;
 	    right: -4px;      
	   
 	    top: calc(15cqi); 
	    top: clamp(100px, 15cqi, auto); 
  
	    width: 10px;
	    height: 10px;
	    border-radius: 50%;
 	    background-color: #1FACCC;
	}

		.about_r3_comp3txt {
	        display: block;
		    position: absolute;
			top: 10px;
			right: 2%;
			padding: 0.5em;
    	    writing-mode: vertical-rl; 
            white-space: nowrap;      
			z-index: 7;
	    }


	.about_r3_comp4 {
		display: flex;
		position: absolute;
		justify-content: center;
		align-items: stretch;
		top: 50%;
		left: 61%;
    	width: 25%;
		z-index: 5;

		opacity: 0;
        transform: translateY(80px);
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

	.about_r3_comp4.is-visible {
		opacity: 1;
        transform: translateY(0);
	}

	.line-wrapper4 {
  	    position: relative;
  	    width: 20%; 
  	    align-self: stretch;     /* 讓左欄高度跟著右欄圖片拉滿，方便畫垂直線 */
	}
	
	/* 水平線主體 */
	.pointer-line4 {
  	  position: absolute;
	  top: 38%;                /* 固定在圖片高度的 38% 位置（完美對齊手部） */
	  left: 10%;               /* 讓垂直線跟左邊邊緣保持一點安全距離 */
	  width: 90%;              /* 線條寬度直接拉滿到圖片邊緣 (10% + 90% = 100%) */
	  height: 2px;
	  background-color: #1FACCC;
	}

	/* 轉折向下的垂直線：利用父層高度（stretch）來達到真正的自動伸縮 */
	.pointer-line4::before {
	    content: "";
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 2px;
	    height: 15cqi;           /* 使用容器查詢單位或相對長度，讓它隨圖片縮小而變短 */
	    background-color: #1FACCC;
	}

	/* 最底部的圓點 */
	.pointer-line4::after {
	    content: "";
	    position: absolute;
 	    left: -4px;              /* 居中對齊 2px 的線 (2-10)/2 */
  
	    /* 用 calc 綁定上面垂直線的 height，垂直線多長，圓點就跟到哪 */
 	    top: calc(15cqi); 
	    /* 由於上面有限制最大最小值，這裡也要同步綁定 fallback */
	    top: clamp(100px, 15cqi, auto); 
  
	    width: 10px;
	    height: 10px;
	    border-radius: 50%;
 	    background-color: #1FACCC;
	}

		.about_r3_comp4txt {
	        display: block;
		    position: absolute;
			top: 20px;
			left: 2%;
			padding: 0.5em;
    	    writing-mode: vertical-rl;  /* 設定文字由上到下、由右到左直排 */
            white-space: nowrap;       /* 強制不換行，確保維持 1 行 */
			z-index: 7;
	    }


		.about_r3_compline {
	        display: block;
		    position: absolute;
			bottom: -4%;
			left: 48.6%;
			width: 1px;
			height: 25%;
			background: #1FACCC;
			transform: rotate(45deg);
			transform-origin: bottom left; /* 設定旋轉中心點 */
			z-index: 1;
	    }


.about_r4 {
	display: inline-block;
	position: relative;
	width: 100%;
    background-color: #d3dee8;
	padding: 0 0 2em 0;
}

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

		.about_r4_flex-divle {
		    display: flex;
		    position: relative;
			flex-direction: column;
		    justify-content: flex-start;
		    align-items: flex-start;
		    margin: 1em auto;
			padding: 0 3em;
		    width: 50%;
			border-right: solid 1px #1FACCC;
	    }

		.about_r4_flex-divle-1 {
		    display: block;
		    position: absolute;
			right: 50%;
			top: -10px;
			width: 1px;
			height: 120px;
			background: #1FACCC;
	    }


		.about_r4_flex-divri {
		    display: flex;
		    position: relative;
			flex-direction: column;
		    justify-content: flex-start;
		    align-items: flex-start;
		    margin: 1em auto;
			padding: 0 3em;
		    width: 50%;
	    }

		    .about_r4_flex-drlist {
		        display: flex;
		        position: relative;
		        justify-content: flex-start;
		        align-items: center;
				margin: 1em 0 0.5em 0;
		        width: 100%;
	        }

		    .about_r4_flex-drlist-icon {
		        display: flex;
		        position: relative;
		        justify-content: flex-start;
		        align-items: stretch;
		        flex: 0 1 100px;
	        }

		    .about_r4_flex-drlist-icon2 {
		        display: flex;
		        position: relative;
		        justify-content: flex-start;
		        align-items: stretch;
				background: #1FACCC;
				clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%);
		        width: 100px;
	        }

		        .about_r4_flex-drlist-icon img {
		            position: relative;
					width: 100%;
					height: auto;
					background: #FFF;
					border-radius: 50%;
	            }

		        .about_r4_flex-drlist-icon2 img {
		            position: relative;
					width: 100%;
					height: auto;
	            }

		    .about_r4_flex-drlist-txt {
		        display: flex;
		        position: relative;
				flex-direction: column;
		        justify-content: center;
		        align-items: center;
				padding: 0;
		        flex: 1;
	        }

		    .about_r4_flex-drlist-word {
		        display: block;
		        position: relative;
				width: 100%;
				padding: 0.2em 0 0.2em 1em;
	        }

		    .about_r4_flex-drlist-word1 {
		        display: block;
		        position: relative;
				width: 100%;
				padding: 0.2em 0 0 1em;
				height: 2em;
	        }

		    .about_r4_flex-drlist-word2 {
		        display: block;
		        position: relative;
				width: 100%;
				padding: 0.2em 0 0.2em 1em;
				height: 2em;
	        }


.about_r5 {
	display: block;
	position: relative;
	width: 100%;
    background-image: url(../../images/pic_mo_company.webp), url(../../images/pic_abo_r5bg.webp);
	/* background-image: url(../../images/pic_mo_company.webp), url(../../images/pic_abo_r5bg.webp);*/
	background-repeat: no-repeat, repeat;
	background-size: cover, 100%;
	padding: 0;
}

	.about_r5_mainpic {
		display: block;
		position: relative;
		width: 100%;
		opacity: 0;
	}

		.about_r5_mainpic img {
			position: relative;
			width: 100%;
			height: auto;
		}

	.about_r5_row1, .about_r5_row2, .about_r5_row3 {
		display: block;
		position: relative;
		margin: 0.5em auto;
		width: 1200px;
	}

	.about_r5_madzz {
		display: block;
		position: absolute;
		padding: 1em 0;
		bottom: 0;
		width: 100%;
		background-image: url(../../images/pic_mo_company1.webp);
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: top center;
	}


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

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

		.about_r6_tt img {
		    display: block;
		    position: relative;
			margin: 0 auto;
	        width: 180px;
	    }

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

	.about_r6_flexle {
		display: block;
		position: relative;
		width: 70%;
	}

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

            .about_r6_flexl_pic_div { 
                display: block;
                position: relative;
				margin: 0 10px 10px 10px;
                width: 18%;
            }

                .about_r6_flexl_pic_div img { 
                    display: block;
                    position: relative;
                    width: 100%;
					border: solid 1px #CCC;
                }

                .about_r6_flexl_pic_div-name { 
                    display: block;
                    position: relative;
					padding: 10px 0;
                    width: 100%;
					text-align: center;
                }



	.about_r6_flexri {
		display: block;
		position: relative;
		width: 28%;
	}

		.about_r6row {
			display: block;
			position: relative;
			margin: 0.5em auto;
			width: 100%;
		}


/*  加工服務  */

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

.sev_r1_flex {
    display: flex;
    position: relative; 
    justify-content: center;
    align-items: stretch;
    margin: 1em auto 1em auto;
    width: fit-content;
}

    .sev_r1_flex_div {
        display: flex;
        align-items: center; /* 讓文字垂直置中 */
        position: relative;
        padding: 0.5em 1em;
        width: auto;
        border-right: solid 1px #FFF;
        color: #FFF;
        text-align: center;
        text-decoration: none; 
        background: #1FACCC;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.1s ease;
    }

    .sev_r1_flex_div_act {
        background: #0062a7;
    }

    .sev_r1_flex_div:hover {
        background: #0062a7;
    }

    .sev_r1_flex_div:active {
        background: #003663; 
        transform: scale(0.97); 
    }


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

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

        .flexg2-div img {
            display: block;
            position: relative;
            width: 100%;
		    height: auto;
        }

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

    .flexg2-div-c {
        display: flex;
        position: relative;
		margin: 0 auto;
		flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 80%;
    }


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

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

    .sev_r3_flex-divle {
        display: flex;
        position: relative;
		flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        width: 30%;
    }

    	.sev_r3_flex-divlepic {
            display: block;
            position: relative;
            width: 80%;
			z-index: 10;
        }

    	.sev_r3_flex-divlepic img {
            display: block;
            position: relative;
            width: 120%;
			height: 120;
			z-index: 10;
        }

    .sev_r3_flex-divri {
        display: flex;
        position: relative;
		flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 50%;
		
    }

.sev_r3_color {
    display: flex;
    position: absolute;
    justify-content: flex-end;
    align-items: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    width: 100%;
	background-color: #1FACCC;
}

    .sev_r3_color-divri {
        display: flex;
        position: relative;
		flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
		margin: 3em 0;
        width: 50%;
    }

	.sev_r3_color-divri_row {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		margin: 0.5em 0;
		color: rgba(255,255,255, 0.5);
    }
        
	.sev_r3_color-divri_row1 {
		display: block;
		position: relative;
		margin: 0.35em 0;
    }
	
	.sev_r3_color-divri_row2 {
		display: block;
		position: relative;
		margin: 0.35em 0;
		padding-left: 1em;
		text-indent: -1em;;
    }


	    /* 按鈕預設與 active 樣式 */
		.sev_r3_color-divri_bt {
		   margin: 0 1em;
		   color: rgba(255,255,255, 0.5);
		   cursor: pointer;
        }

		.sev_r3_color-divri_bt.active {
			color: #FFF;
			font-size: 1.4em;
        }

		.sev_r3_color-divri_bt:first-child {
		   margin-left: 0;
        }
		
        /* 內容區塊預設隱藏，只顯示 active 的區塊 */
        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }


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

.sev_r4_flex {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
	margin: -2px auto;
    width: 80%;
}

    .sev_r4_flex-divle {
        display: flex;
        position: relative;
		flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 40%;
    }

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

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

    .sev_r4_flex-divri {
        display: flex;
        position: relative;
		flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 46.8%;
		z-index: 11;
    }

	    .sev_r4_flex-divri-c {
            display: flex;
            position: relative;
		    flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
			margin: 0 auto;
            width: 80%;
        }

	    .sev_r4_flex-divri-cr1 {
            display: flex;
            position: relative;
		    flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
			padding: 0 0 1em 0;
			margin: 0 auto;
            width: 100%;
        }

	    .sev_r4_flex-divri-crab {
            display: block;
            position: absolute;
			top: 10%;
			right: 0;
			transform: translate(0%, 0);
            width: 150%;
			z-index: 11;
        }

	        .sev_r4_flex-divri-crab img {
                display: block;
                width: 100%;
            }


	    .sev_r4_flex-divri-icon {
            display: flex;
            position: relative;
			flex-wrap: wrap;
            justify-content: flex-start;
            align-items: flex-start;
			margin: 0 auto ;
            width: 100%;
        }

			.sev_r4_flex-divri-icon-div {
                display: flex;
                position: relative;
		        flex-direction: column;
                justify-content: center;
                align-items: center;
				margin: 0 10px 10px 0;
                width: 110px;
				height: 110px;
				border-radius: 110px;
				background-color: #ccc;
                color: #000;
			}


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


.sev_r5_row {
    display: block;
    position: relative;
	margin: 7em auto;
    width: 980px;
}

    .sev_r5_row_tt {
        display: block;
        position: relative;
	    margin: 3em auto;
        width: 100%;
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: solid 1px #64aa7a;
    }

	.sev_r5_ttcolor {
		background: linear-gradient(to right, #1FACCC,#1FB880);
   		background: -webkit-linear-gradient(to right, #1FACCC, #1FB880);
   		background-clip: text;
  		-webkit-background-clip: text;
   		color: transparent;
	}

.sev_r5_pic {
    display: flex;
    position: relative;
	flex-direction: column;
	margin: 0 auto;
    width: 100%;
}

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

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


    .sev_r5_pic img, .sev_r5_pic2 img, .sev_r5_pic2ab img {
        display: block;
        position: relative;
        width: 100%;
    }

    .sev_r5_ab1, .sev_r5_ab2, .sev_r5_ab3, .sev_r5_ab4 {
		padding: 1em;
		min-width: 14.5%;
		width: auto;
        background: #1FB880;
		color: #FFF;
		border-top-right-radius: 27px;
		border-bottom-left-radius: 27px;
		z-index: 11;

	    opacity: 0;
		transition: opacity 0.8s ease, transform 0.8s ease;
    }




    .sev_r5_ab1 {
        display: flex;
        position: absolute;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		top: 31%;
		left: 11%;
		transform: translate(-11%, 0%);
    }

        .sev_r5_ab1::after {
              content: "";
              position: absolute;
  
              /* 1. 定位在綠色框的右側中心點（或右下角，此處以右側偏下為例） */
              left: 100%;
              bottom: 60px; /* 控制線條出發的高度位置 */
              width: 90%;  /* 根據你需要的長度調整 */
              height: 2px;   /* 線條粗細 */
              background-color: #1FB880; /* 保持跟方框一樣的綠色 */
              /* 3. 設定旋轉軸心在左側端點，這樣旋轉時線條才不會位移 */
              transform-origin: left center;
              /* 4. 向下旋轉特定角度（正值為順時針向下傾斜） */
              transform: rotate(20deg); 
              /* 5. 確保線條不會被點擊干擾網頁操作 */
              pointer-events: none; 
        }


    .sev_r5_ab2 {
        display: flex;
        position: absolute;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		top: 2%;
		left: 27.5%;
		transform: translate(0%, -11%);
    }

        .sev_r5_ab2::after {
              content: "";
              position: absolute;
  
              /* 1. 定位在綠色框的右側中心點（或右下角，此處以右側偏下為例） */
              left: 70%;
              bottom: 0; /* 控制線條出發的高度位置 */
              width: 90%;  /* 根據你需要的長度調整 */
              height: 2px;   /* 線條粗細 */
              background-color: #1FB880; /* 保持跟方框一樣的綠色 */
              /* 3. 設定旋轉軸心在左側端點，這樣旋轉時線條才不會位移 */
              transform-origin: left center;
              /* 4. 向下旋轉特定角度（正值為順時針向下傾斜） */
              transform: rotate(65deg); 
              /* 5. 確保線條不會被點擊干擾網頁操作 */
              pointer-events: none; 
        }


    .sev_r5_ab3 {
        display: flex;
        position: absolute;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		top: 2%;
		left: 56%;
		transform: translate(0%, -11%);
    }

        .sev_r5_ab3::after {
              content: "";
              position: absolute;
  
              /* 1. 定位在綠色框的右側中心點（或右下角，此處以右側偏下為例） */
              left: 40%;
              bottom: 0; /* 控制線條出發的高度位置 */
              width: 102%;  /* 根據你需要的長度調整 */
              height: 2px;   /* 線條粗細 */
              background-color: #1FB880; /* 保持跟方框一樣的綠色 */
              /* 3. 設定旋轉軸心在左側端點，這樣旋轉時線條才不會位移 */
              transform-origin: left center;
              /* 4. 向下旋轉特定角度（正值為順時針向下傾斜） */
              transform: rotate(114deg); 
              /* 5. 確保線條不會被點擊干擾網頁操作 */
              pointer-events: none; 
        }


    .sev_r5_ab4 {
        display: flex;
        position: absolute;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		top: 33%;
		left: 76%;
		transform: translate(11%, 0%);
    }

        .sev_r5_ab4::after {
              content: "";
              position: absolute;
  
              /* 1. 定位在綠色框的右側中心點（或右下角，此處以右側偏下為例） */
              left: 1%;
              bottom: 15%; /* 控制線條出發的高度位置 */
              width: 120%;  /* 根據你需要的長度調整 */
              height: 2px;   /* 線條粗細 */
              background-color: #1FB880; /* 保持跟方框一樣的綠色 */
              /* 3. 設定旋轉軸心在左側端點，這樣旋轉時線條才不會位移 */
              transform-origin: left center;
              /* 4. 向下旋轉特定角度（正值為順時針向下傾斜） */
              transform: rotate(160deg); 
              /* 5. 確保線條不會被點擊干擾網頁操作 */
              pointer-events: none; 
        }


        .sev_r5_ab1.is-visible, .sev_r5_ab2.is-visible, .sev_r5_ab3.is-visible, .sev_r5_ab4.is-visible {
            opacity: 1;
			transform: translate(0%, 0%);
        }

        .sev_r5_ab-row {
            display: block;
            position: relative;
			margin: 0.35em 0;
            width: 100%;
			text-align: center;
        }

        .sev_r5_ab-row1 {
            display: flex;
            position: relative;
			justify-content: center;
			margin: 0.35em 0;
            width: 100%;
			text-align: center;
			transform: scaleX(0.8);
        }


        .sev_r5_ab-row2 {
            display: block;
            position: relative;
			margin: 1em 0 0 0;
            width: 100%;
			min-height: 3em;
			text-align: center;
			transform: scaleX(0.8);
        }

        .sev_r5_ab-rowab {
            display: block;
            position: absolute;
			top: 0%;
			left: 50%;
			transform: translate(-50%, 0%);
            width: 200%;
			height: 200px;
			text-align: center;
			text-shadow: 0 0 5px #1FB880;
			-webkit-text-stroke: 5px #1FB880; /* 外框粗細與顏色 */
			paint-order: stroke fill;
        }



    .row_bt {
        display: inline-block;
        position: relative;
		margin: 0 auto;
	    padding: 0.5em 2em 0.25em 2em;
        width: auto;
		background: #1FACCC;
		text-align: center;
		border-top-left-radius: 30px;
		border-top-right-radius: 30px;
    }


/*  聯絡我們  */

.cont_r1 {
	display: block;
	position: relative;
	width: 100%;
	padding: 0 0 0 0;
}

.cont_r2 {
    display: block;
	position: relative;
    width: 100%;
	background: #e6e6e6;
}

.cont_r2-pic {
    display: block;
	position: relative;
    width: 500px;
}

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


.cont_r2-flex {
    display: flex;
	position: relative;
	justify-content: space-between;
	align-items: flex-start;
	padding: 2em 0;
    width: 100%;
}

    .cont_r2-flex-le {
        display: block;
	    position: relative;
        width: 58%;
    }

    .cont_r2-flex-ri {
        display: block;
	    position: relative;
        width: 38%;
    }

.cont_row1_flex {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-end;
	margin-bottom: 10px;
	width: 100%;
}

    .cont_row1_flex-le {
        display: block;
	    position: relative;
        width: 300px;
		margin-right: 30px;
		margin-bottom: 5px;
    }

	    .cont_row1_flex-le img {
            display: block;
	        position: relative;
            width: 100%;
        }

    .cont_row1_flex-ri {
        display: block;
	    position: relative;
		margin-bottom: 1px;
        width: auto;
    }

    .gmap {
        display: block;
	    position: relative;
		margin: 2em 0;
        width: 100%;
		min-height: 550px;
    }

        .cont_r2-flex-ri-r1 {
            display: block;
	        position: relative;
		    margin-top: 1.5em;
            width: 100%;
        }

        .cont_r2-flex-ri-form {
            display: block;
	        position: relative;
		    margin: 1em auto;
            width: 100%;
        }

        .cont_form_text {
			position: relative;
            border: none;
			width: 100%;
			height: 45px;
			margin: 0.5em 0;
			padding: 0 5px 10px 5px;
        }

        .cont_form_msg {
			position: relative;
            border: none;
			width: 100%;
			height: 100px;
			margin: 0.5em 0;
			padding: 0 5px 10px 5px;
        }

		.cont_form-group {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: flex-end;
        }

		.cont_form_captcha-txt {
			margin: 0.5em 0;
			padding: 0 5px 10px 5px;
			width: auto;
        }

		.cont_form_captcha-pic {
			display: block;
			position: relative;
            border: none;
			width: 240px;
			margin: 0.5em 0;
			padding: 0 5px 10px 5px;
        }

		.cont_form_captcha-code {
			display: flex;
			position: relative;
            border: none;
			width: 180px;
			margin: 0.5em 0 1em 0;
			padding: 0 5px 10px 5px;
        }

		.cont_form_captcha-bt {
			display: block;
			position: relative;
			width: auto;
			margin: 0.5em 0;
			padding: 5px 10px;
        }

		.cont_form_captcha-bt2 {
			display: block;
			position: relative;
			width: auto;
			margin: 0 0 18px 0;
			padding: 5px 10px;
        }

		.cont_form_captcha-bt-area {
			display: block;
			position: relative;
        }

		
/*  最新消息  */

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


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

    .new_flex-div-le {
        display: flex;
	    position: relative;
		justify-content: flex-end;
		align-items: stretch;
		margin-bottom: 2em;
        width: 49%;
	    background: #f2f2f2;
    }

    .new_flex-div-ri {
        display: flex;
	    position: relative;
		justify-content: flex-start;
		align-items: stretch;
		margin-bottom: 2em;
        width: 49%;
	    background: #f2f2f2;
    }

	    .new_flex-div-pic {
            display: block;
	        position: relative;
            width: 33%;
        }

	       .new_flex-div-pic img {
			    display: block;
	            position: relative;
                width: 100%;
            }
    
	    .new_flex-div-txt {
            display: flex;
	        position: relative;
	        flex-direction: column;
			justify-content: space-between;
			padding: 0.5em 1em;
            width: 35%;
        }

	    .new_flex-div-txt-row1 {
            display: flex;
	        position: relative;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			margin: 2em 0 0 0;
			padding: 0 1em;
            width: 100%;
        }

	    .new_flex-div-txt-row2 {
            display: flex;
	        position: relative;
			flex-direction: column;
			justify-content: flex-end;
			align-items: flex-end;
            width: 100%;
        }

	    .new_flex-div-txt-tt {
            display: block;
	        position: relative;
			margin: 0 0 0.25em 0;
            width: 100%;
        }

	    .new_flex-div-txt-word {
            display: block;
	        position: relative;
            width: 100%;
			padding: 0 1em;
        }

	    .new_flex-div-txt-more {
            display: flex;
	        position: relative;
			justify-content: flex-end;
            width: 100%;
        }


/*  最新消息及實績-加工細節  */	

.detail_flex {
    display: flex;
	position: relative;
	flex-direction: column;
	justify-content: space-between;
    margin: 3em auto 3em auto;
    width: 100%;
}

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

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

    .detail_flex-tt {
        display: block;
	    position: relative;
		padding: 0.8em 1em;
        width: 100%;
		background: #1FACCC;
		color: #FFF;
		text-align: center;
    }

    .detail_flex-iconrow {
        display: block;
	    position: relative;
        width: 100%;
    }

        .detail_flex-icon {
            display: grid;
            position: relative;
            grid-template-columns: repeat(5, 20%); 
            justify-content: space-between;
            align-items: stretch;
		    width: 100%;
        }

            .detail_flex-icon-div {
                display: flex;
	            position: relative;
			    flex-direction: column;
			    justify-content: flex-start;
			    align-items: flex-start;
				margin-bottom: 2em;
                width: 100%;
            }

            .detail_flex-icon-div-p {
                display: block;
	            position: relative;
				padding: 0.8em 0;
                width: 100%;
				background: #f2f2f2;
            }

            .detail_flex-icon-div-p-c {
                display: block;
	            position: relative;
				border-right: solid 1px #636363;
                width: 100%;
            }

            .detail_flex-icon-div:last-child .detail_flex-icon-div-p-c {
                border-right: none;
            }

                .detail_flex-icon-div-p-c img {
                    display: block;
	                position: relative;
                    width: 100%;
                }

            .detail_flex-icon-div-word {
                display: block;
	            position: relative;
				padding: 0.5em 1em;
                width: 100%;
            }


.detail_list {
    display: flex;
	position: relative;
	flex-direction: column;
	justify-content: flex-start;
    margin: 3em auto 3em auto;
    width: 100%;
}

    .detail_list-div {
        display: block;
	    position: relative;
		padding: 0.5em 2em;
		text-indent: -1em;
        width: 100%;
    }

    .detail_list-div:nth-child(even) {
        background: #f2f2f2;
    }


.detail_equ {
    display: flex;
	position: relative;
	justify-content: space-between;
	align-items: center;
    margin: 3em auto;
    width: 100%;
}

    .detail_equ-img {
        display: block;
	    position: relative;
        width: 40%;
    }

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

    .detail_equ-div {
        display: block;
	    position: relative;
        width: 55%;
    }

	    .detail_equ-div-rr {
            display: block;
	        position: relative;
            width: 100%;
        }


/*  未來願景  */	

.fu_bg1 {
    display: block;
	position: absolute;
	top: 0;
	left: 5%;
	transform: translate(-50%, 0);
    width: 22%;
	z-index: -1;
}

.fu_bg2 {
    display: block;
	position: absolute;
	top: 0;
	left: 95%;
	transform: translate(-50%, 0);
    width: 22%;
	z-index: -1;
}

.fu_bg2 {
    display: block;
	position: absolute;
	top: 0;
	left: 95%;
	transform: translate(-50%, 0);
    width: 22%;
	z-index: -1;
}


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

    .fu_flex-div1 {
        display: flex;
		position: relative;
		flex-direction: column;
	    justify-content: flex-start;
	    align-items: flex-start;
	    width: 32%;
    }

    .fu_flex-div2 {
        display: flex;
		position: relative;
		flex-direction: column;
	    justify-content: flex-start;
	    align-items: flex-start;
	    width: 32%;
    }

    .fu_flex-div3 {
        display: flex;
		position: relative;
		flex-direction: column;
	    justify-content: flex-start;
	    align-items: flex-start;
	    width: 32%;
    }

        .fu_flex-divr1 {
            display: block;
		    position: relative;
	        width: 100%;
        }

        .fu_flex-icon {
            display: flex;
		    position: relative;
		    flex-direction: column;
	        justify-content: center;
	        align-items: center;
	        width: 100%;
        }

	    .fu_flex-iconab {
            display: flex;
		    position: absolute;
	        justify-content: center;
	        align-items: center;
		    top: 42%;
		    left: 50%;
		    transform: translate(-50%, -50%);
	        width: 35%;
			z-index: 5;
        }

	        .fu_flex-icon img, .fu_flex-iconab img {
			    position: relative;
			    width: 100%;
		    }


    /* 電池積木 */

    /* 外層容器 */
    .battery-container {
        max-width: 100%; /* 您可以自由修改總寬度，或改為 max-width: 100% */
        margin: 1em auto;
    }

    /* 上方 div */
    .battery-terminals {
        position: relative;
        width: 100%;
        height: 40px; /* 極端子的高度 */
        /* 使用負的 margin-bottom 將下方 div 往上吸，實現外框線條完美融合 */
        margin-bottom: -4px; 
        z-index: 2; /* 確保突出的極端子擋在主體線條上方 */
    }

    /* 利用偽元素 ::before 和 ::after 畫出左、右兩個極端子 */
    .battery-terminals::before,
    .battery-terminals::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 55px;  /* 極端子的寬度 */
        height: 40px; /* 極端子的高度 */
        border: 4px solid #5cb3db; /* 藍色邊框 */
        border-bottom: none; /* 底部不畫線，與下方主體相通 */
        background-color: #fff; /* 必須填滿背景色，用來遮蓋下方 div 的頂部框線 */
        box-sizing: border-box;
    }

    /* 左邊極端子的位置（距離左側外框 50px） */
    .battery-terminals::before {
        left: 50px;
    }

    /* 右邊極端子的位置（距離右側外框 50px） */
    .battery-terminals::after {
        right: 50px;
    }

    /* 下方 div（主體外框） */
    .battery-body {
        width: 100%;
        min-height: 250px; /* 設定一個最小初始高度，沒內容時也不會扁掉 */
        height: auto;      /* 高度自動，隨內容延伸 */
        border: 4px solid #5cb3db; /* 藍色邊框 */
        padding: 1.5em 2em;     /* 內邊距，避免裡面的文字貼到藍色外框 */
        box-sizing: border-box;
        background-color: #fff;
        z-index: 1;
    }

    /* 電池積木end */


        .fu_flex-divr2 {
            display: flex;
		    position: relative;
			justify-content: flex-start;
			align-items: center;
	        width: 100%;
			height: auto;
        }

            .fu_flex-divr2ab {
                display: flex;
		        position: absolute;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
			    top: 50%;
			    left: 50%;
			    transform: translate(-50%, -50%);
			    z-index: 2;
			    width: 85%;
			    height: 95%;
            }

            .fu_flex-divr-row1 {
                display: block;
		        position: relative;
	            width: 100%;
				text-align: center;
				z-index: 10;
            }

            .fu_flex-divr-row2 {
                display: block;
		        position: relative;
	            width: 100%;
				margin-bottom: 2%;
				text-align: center;
            }

            .fu_flex-divr-row3 {
                display: block;
		        position: relative;
	            width: 100%;
				text-align: center;
            }

        .fu_flex-divr3 {
            display: block;
		    position: relative;
			margin: -20px auto;
	        width: 100%;
			height: auto;
			border-top: 5px solid; 
            /* 使用 border-image 加上漸層方向與色彩 */
            border-image: linear-gradient(to right, #0000ff, #00c5ff, #0000ff) 1;
        }

            .fu_flex-divr3 img {
                display: block;
		        position: relative;
	            width: 100%;
			    height: auto;
            }


    .fu_flex_line1 {
        display: block;
	    position: absolute;
	    width: 105%;
	    height: 1px;
		top: 0%;
		left: 100%;
		transform: translate(0%, -5px);
	    border-top: 5px solid; 
        /* 使用 border-image 加上漸層方向與色彩 */
        border-image: linear-gradient(to right, #0000ff, #00c5ff, #0000ff) 1;
	    z-index: 10;
    }

    .fu_flex_line2 {
        display: block;
	    position: absolute;
	    width: 10%;
	    height: 1px;
		top: 0%;
		left: 0%;
		transform: translate(-65%, -5px);
	    border-top: 5px solid; 
        /* 使用 border-image 加上漸層方向與色彩 */
        border-image: linear-gradient(to right, #0000ff, #00c5ff, #0000ff) 1;
	    z-index: 10;
    }

/* Q&A */

    /* 網格排版：橫向3個 */
    .faq-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* 單一問答區塊 */
    .faq-item {
        display: flex;
        flex-direction: column;
		margin-bottom: 4em;
    }

    .faq-itemQ2 {
        margin-top: 3em;
    }

    /* 上半部：白色問題卡片 */
    .faq-question-card {
        background-color: #ffffff;
        border-radius: 20px;
        padding: 20px 30px 60px; /* 底部留白給按鈕 */
        text-align: center;
        position: relative;
        z-index: 2; /* 確保陰影與對話框尾巴蓋在灰色答案區上方 */
        box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    }

    /* 對話框的倒三角形尾巴 */
    .faq-question-card::after {
        content: '';
        position: absolute;
        bottom: -25px;
        left: 40px;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 25px solid #ffffff;
    }

    /* Q1, Q2 文字樣式 */
    .q-number {
        font-size: 72px;
        color: #1FACCC;
        font-weight: 500;
        line-height: 1;
        margin-bottom: 10px;
    }

    /* 分隔線 */
    .q-divider {
        border: none;
        height: 1px;
        background-color: #888;
        width: 100%;
        margin: 15px 0 20px;
    }

    /* 問題文字 */
    .q-text {
		display: block;
		margin: 1em auto 0.5em auto;
		width: 100%;
    }

	.a-text {
		display: block;
		position: relative;
		margin: 1em auto 0 auto;
		width: 100%;
		z-index: 200;
    }

    /* 圓形切換按鈕 */
    .toggle-btn {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background-color: #e6e6e6;
        color: #666;
        font-size: 24px;
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        outline: none;
        z-index: 3;
    }

    /* 下半部：灰色答案區塊 (外層控制動畫) */
    .faq-answer-wrapper {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.4s ease-out;
        margin-top: -20px; /* 往上提，藏在白色卡片後方 */
        position: relative;
        z-index: 1;
    }

    /* 內層限制溢出 */
    .faq-answer-inner {
        overflow: hidden;
        background-color: #e3e3e3;
        border-radius: 0 0 20px 20px;
    }

    /* 實際的答案內容與 Padding */
    .faq-answer-content {
        padding: 50px 30px 40px; /* 上方預留空間給被白色卡片覆蓋的部分 */
        position: relative;
    }


    /* 右下角的 A 浮水印 */
    .a-watermark {
        position: absolute;
        bottom: -10px;
        right: 10px;
        font-size: 120px;
        color: rgba(255, 255, 255, 0.4);
        font-weight: bold;
        line-height: 1;
        z-index: 1;
        user-select: none;
    }

    /* =========================================
       Active State (展開狀態的樣式)
       ========================================= */
    
    /* 展開時的答案區塊 */
    .faq-item.active .faq-answer-wrapper {
        grid-template-rows: 1fr;
    }

    /* 展開時的按鈕變化 */
    .faq-item.active .toggle-btn {
        background-color: #1FACCC;
        color: #ffffff;
        font-size: 18px; /* 'A' 的字體大小 */
    }


/*  加工能力技術  */

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

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

.tech_r2_picab {
	display: block;
	position: absolute;
	width: 69%;
	top: 0;
	right: 4%;
    transform: translate(0,0);
	z-index: 5;
}

.tech_r2_clock {
	display: block;
	position: absolute;
	width: 10%;
	height: auto;
	top: 25.5%;
	left: 59.3%;
    transform: translate(0%, 0%);
	z-index: 100;
}

	.tech_r2_pic img, .tech_r2_picab img, .tech_r2_clock img {
		display: block;
		position: relative;
		width: 100%;
		z-index: 1;
	}

.media-container {
	position: relative;
	margin: 0 auto;
    width: 100%;
    height: auto; 
}

.responsive-media {
	display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* 或 contain，依設計需求 */
    display: block;
}

	.responsive-media img {
		display: block;
    	width: 100%;
		height: auto;
	}

.tech_r2_word {
	display: block;
	position: absolute;
	width: 20%;
	height: auto;
	top: 50%;
	right: 2%;
    transform: translate(0%, 0%);
	z-index: 10;
	opacity: 0;
	background: rgba(255, 255, 255, 0.93);
	border: solid 3px #1FACCC;
	padding: 2em 3em;
	transition: opacity 0.8s ease, transform 0.8s ease;
}

	.tech_r2_word.is-visible {
		opacity: 1;
	}



.tech_r2_word-r1 {
	display: block;
	position: relative;
	margin-bottom: 1em;
	width: 100%;
	text-align: center;
}

.tech_r2_word-r2 {
	display: block;
	position: relative;
	width: 100%;
	line-height: 200%;
}

.tech_r2_word-r2-1 {
	line-height: 200%;
}


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

.tech_r4_flex {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin: -4em auto 0 auto;
	width: 100%;
}

	.tech_r3_flex_pic {
		display: block;
		position: relative;
		width: 55%;
	}

		.tech_r3_flex_pic img {
			display: block;
			width: 110%;
		}

	.tech_r3_flex_txt {
		display: flex;
		position: relative;
		justify-content: center;
		align-items: center;
		width: 45%;
	}

		.tech_r3_flex_txt-c {
			display: block;
			position: relative;
			width: 70%;
		}

		.tech_r3_flex_txt-c-tt {
			display: block;
			position: relative;
			margin-bottom: 0.5em;
			width: 100%;
		}



.mat_r1_flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	margin: 4em auto 4em auto;
	width: 90%;
	max-width: 1824px;
}

	.mat_r1_flex-div {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		margin: 0 auto 1.5em auto;
		padding: 1em 0 0 0;
		background: #f2f2f2;
		width: 32%;
	}

	.mat_r1_flex-div-r1 {
		display: block;
		padding: 0 1em 0.5em 1em;
		width: 100%;
		text-align: center;
	}

	.mat_r1_flex-div-r2 {
		display: block;
		padding: 0.25em 1em;
		background: #1FACCC;
		width: 100%;
		text-align: center;
	}

	.mat_r1_flex-div-r3-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: stretch;
		width: 100%;
		height: 100%;
	}

	.mat_r1_flex-div-r3 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		width: 100%;
		border-bottom: solid 1px #606060;
		flex: 1;
	}

		.mat_r1_flex-div-r3-le {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0.5em 0.5em;
			width: 25%;
			text-align: center;
		}

		.mat_r1_flex-div-r3-ri {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0.5em 1em;
			border-left: solid 1px #606060;
			flex: 1;
		}



    /* 圓圈div 主容器：用來定位圓框與文字 */
    .material-container {
		display: flex;
        position: relative;
        justify-content: center;
		margin: 150px auto 0 auto;
		max-width: 900px;
		width: 100%;
        align-items: center;
        padding: 120px 0; /* 預留空間給背景的圓框 */
		z-index: 10;
    }

	.material-container1 {
		display: flex;
        position: relative;
        justify-content: center;
		margin: -5% auto 120px auto;
		max-width: 900px;
		width: 100%;
        align-items: center;
        padding: 120px 0; /* 預留空間給背景的圓框 */
		z-index: 10;
    }

    /* ====== 背景漸層圓框 (核心技巧) ====== */
    .circle-border {
		display: block;
        position: absolute;
        top: 51%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 460px;  /* 圓框寬度 */
        height: 460px; /* 圓框高度 */
        border-radius: 50%;
        border: solid 5px #1FACCC; /* 設定統一的藍色邊框 */
        
        /* 使用 CSS 遮罩 (Mask) 讓左右兩側變透明 
           to right: 由左至右
           transparent: 左側開頭透明
           black: 中間部分(上下)保留實心顯示
           transparent: 右側結尾透明 */
        -webkit-mask-image: linear-gradient(to right, transparent 2%, black 35%, black 65%, transparent 98%);
        mask-image: linear-gradient(to right, transparent 2%, black 35%, black 65%, transparent 98%);
        
        z-index: 0; /* 置於底層 */
        pointer-events: none; /* 讓滑鼠可以穿透圓框選取到裡面的文字 */
    }

    /* ====== 文字內容區塊 ====== */
    .content-box {
        position: relative;
		padding: 0 2em;
		width: 100%;
        text-align: center;
		z-index: 1; /* 確保文字在圓框上方 */
    }


 .material-elements {
	display: block;
    position: relative;
	margin: -10% auto 0 auto;
	width: 100%;
}

	.material-elements img {
        position: relative;
		width: 100%;
    }

    .mlaser-line {
	    position: absolute;
	    top: 55%;
	    left: 50%;
	    transform: translate(-50%, -50%);
        width: 4px; /* 線條粗細 */
        height: 85%; /* 線條高度，可自行調整 */
        margin: 0 auto;
        z-index: 20;

      /* 核心：中間深藍色，往兩端漸層至完全透明 */
      background: linear-gradient(
        to bottom, 
        transparent 0%, 
        #00d2ff 20%, 
        #0000ff 50%, 
        #00d2ff 80%, 
        transparent 100%
      );

      /* 讓兩端微幅收尖，模擬圖片中變細的效果 */
      border-radius: 50% / 10%; 
      /* 選擇性加入：微弱的藍光外暈效果，更貼近圖片質感 */
     box-shadow: 0 0 4px rgba(0, 210, 255, 0.5); 
    }


    .hlaser-hline {
	    position: absolute;
	    top: 55%;
	    left: 50%;
	    transform: translate(-50%, -50%);
        width: 28%; /* 線條長度，可自行調整 */
        height: 4px; /* 線條粗細 */
		z-index: 20;

      /* 核心：從左到右，兩端透明，中間深藍 */
      background: linear-gradient(
        to right, 
        transparent 0%, 
        #00d2ff 20%, 
        #0000ff 50%, 
        #00d2ff 80%, 
        transparent 100%
      );

      /* 讓左右兩端收尖，模擬變細的效果 */
      border-radius: 10% / 50%; 
      /* 藍光外暈發光效果 */
      box-shadow: 0 0 4px rgba(0, 210, 255, 0.5); 
    }

	.mat_icon1 {
		display: block;
		position: absolute;
	    position: absolute;
	    top: 33%;
	    left: 50%;
	    transform: translate(-50%, -50%);
		width: 118px;
		z-index: 30;
	}

	.mat_icon2 {
		display: block;
		position: absolute;
	    position: absolute;
	    top: 55%;
	    left: 37%;
	    transform: translate(-50%, -50%);
		width: 118px;
		z-index: 30;
	}

	.mat_icon3 {
		display: block;
		position: absolute;
	    position: absolute;
	    top: 75%;
	    left: 50%;
	    transform: translate(-50%, -50%);
		width: 118px;
		z-index: 30;
	}
	
	.mat_icon1 img, .mat_icon2 img, .mat_icon3 img {
		display: block;
		width: 100%;
	}

	.mat_icontxt {
		display: block;
		position: absolute;
	    top: 55%;
	    left: 74%;
	    transform: translate(-50%, -50%);
		width: 400px;
		text-shadow: 2px 2px 8px #000;
		z-index: 30;
		color: #FFF;
	}

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

	.m_ai {
		display: block;
		position: absolute;
	    top: 23.2%;
	    left: 12.3%;
	    transform: translate(-50%, 0%);
		width: 10.8%;
		z-index: 5;

		opacity: 0;
		transform: scale(0.8);
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

	.m_sp {
		display: block;
		position: absolute;
	    top: 27.6%;
	    left: 69.9%;
	    transform: translate(-50%, 0%);
		width: 10.8%;
		z-index: 5;

		opacity: 0;
		transform: scale(0.8);
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

	.m_fe {
		display: block;
		position: absolute;
	    bottom: 10.2%;
	    left: 59.8%;
	    transform: translate(-50%, 0%);
		width: 10.8%;
		z-index: 5;

		opacity: 0;
		transform: scale(0.8);
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

        .mmpic img, .m_ai img, .m_sp img, .m_fe img {
			display: block;
            position: relative;
			width: 100%;
			height: auto;
		}

        .m_ai.is-visible, .m_sp.is-visible, .m_fe.is-visible {
			opacity: 1;
            transform: scale(1);
		}



    /* ==== 白色線框旋轉四角形，中間十字挖空 ====*/
    .dpad-container {
        position: absolute;
        top: 55.5%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 7%;  /* 整個控制器的寬度 */
        background: transparent;
        z-index: 100;
    }

        .dpad-container img {
            position: relative;
            width: 100%;
        }


		
    /* 產業應用 */

    .app-r1-container {
		display: flex;
		flex-direction: column;
        position: relative;
        width: 100%;
    }

    	.app-r1-c-row1 {
			display: flex;
			position: relative;
			justify-content: center;
			align-items: stretch;
        	width: 100%;
			min-height: 350px;
			background: #f2f2f2;
    	}

    	.app-r1-c-row2 {
			display: flex;
			position: relative;
			justify-content: center;
			align-items: stretch;
        	width: 100%;
			min-height: 350px;
			background: #e8f7fc;
    	}

    		.app-r1-c-row-center {
				display: flex;
				flex-direction: column;
        		position: relative;
				justify-content: flex-start;
				align-items: flex-start;
        		width: 25%;
				background: #FFF;
    		}
			
    		.app-r2-c-row-center {
				display: flex;
				flex-direction: column;
        		position: relative;
				justify-content: center;
				align-items: flex-end;
        		width: 25%;
				overflow: hidden;
				background: #FFF;
				clip-path: polygon(100% 0, 100% 30%, 50% 100%, 0 30%, 0 0);
    		}

    			.app-r2-c-row-center img {
					display: block;
        			width: 100%;
    			}

    		.app-r1-c-row-le {
				display: flex;
				flex-direction: column;
        		position: relative;
				justify-content: center;
				align-items: flex-start;
        		width: 25%;
    		}

    		.app-r1-c-row-ri {
				display: flex;
				flex-direction: column;
        		position: relative;
				justify-content: center;
				align-items: flex-end;
        		width: 25%;
    		}

    		.app-r1-icon {
				display: flex;
				flex-direction: column;
        		position: relative;
				justify-content: center;
				align-items: center;
				margin: 4em 0;
        		width: 180px;
    		}

			    .app-r1-icon-p {
				    display: block;
        		    position: relative;
					margin: 0 auto;
        		    width: 100%;
    		    }

			        .app-r1-icon-p img {
				        display: block;
        		        position: relative;
        		        margin: 0 auto;
        		        width: 70%;
    		        }

			    .app-r1-icon-txt {
				    display: block;
        		    position: relative;
        		    width: 100%;
					padding: 0.5em 1em;
					text-align: center;
    		    }	

    		.app-r1-blue {
				display: flex;
        		position: absolute;
				justify-content: flex-start;
				align-items: flex-start;
				top: 40%;
				left: 50%;
				transform: translate(-50%, 0%);
        		width: 33%;
				background: linear-gradient(135deg,#0072ff 0%, #00c6ff 20%, #0072ff 40%, #00c6ff 60%, #0072ff 80%, #00c6ff 100%);
				z-index: 10;
    		}
            
			/* 遮白-上 */
    		.app-r1-bo1 {
				display: block;
        		position: absolute;
				top: 0; 
				left: 50%;
				transform: translate(-50%, 0);
				width: 76%;
				height: 10px;
				background: #FFF;
				z-index: 10;
    		}

			/* 遮白-下 */
    		.app-r1-bo2 {
				display: block;
        		position: absolute;
				bottom: 0;
				left: 50%;
				transform: translate(-50%, 0);
				width: 76%;
				height: 10px;
				background: #FFF;
				z-index: 10;
    		}

			/* 遮白-左 */
    		.app-r1-bo3 {
				display: block;
        		position: absolute;
				top: 50%;
				left: 0%;
				transform: translate(0%, -50%);
				width: 76%;
				height: 50%;
				background: #FFF;
				z-index: 10;
    		}

			/* 遮白-右 */
    		.app-r1-bo4 {
				display: block;
        		position: absolute;
				top: 50%;
				right: 0%;
				transform: translate(0%, -50%);
				width: 76%;
				height: 50%;
				background: #FFF;
				z-index: 10;
    		}

    		.app-r1-blue-white {
				display: block;
        		position: relative;
				margin: 1% auto;
				padding: 1em 3em;
				width: 98%;
				height: 100%;
				background: #FFF;
				z-index: 30;
    		}

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


.app_list {
	display: flex;
    position: relative;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	margin: 0 auto;
	width: 100%;
}
		
	.app_list_pic {
		display: block;
   	    position: relative;
	    width: 50%;
    }
	
		.app_list_pic img {
		    display: block;
   	        position: relative;
	        width: 100%;
        } 

	.app_list_txt1 {
		display: flex;
		position: relative;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	    width: 50%;
		padding: 0 2em;
		overflow: hidden;
    }

	.app_list_txt2 {
		display: flex;
		position: relative;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
	    width: 50%;
		padding: 0 2em;
		overflow: hidden;
    }
	
		.app_list_txtbg1 {
		    position: absolute;
		    top: 0;
		    left: 0;
		    right: 15%;
		    bottom: 0; /* 強制底部與父元素對齊，不超高 */
		    box-sizing: border-box; /* 防止 padding 或 border 撐大子 1 */
    	    background: #f2f2f2;
    	    clip-path: polygon(0 0, 100% 0%, 100% 78%, 0% 100%);
    	    z-index: -1;
        }

		.app_list_txtbg2 {
		    display: block;
    	    position: absolute;
    	    box-sizing: border-box;
    	    top: 0;
    	    left: 15%;
    	    right: 0;  /* 新增：右邊貼齊 */
    	    bottom: 0; /* 新增：下邊貼齊 */
    	    background: #f2f2f2;
    	    clip-path: polygon(0 22%, 100% 0%, 100% 100%, 0% 100%);
			overflow: hidden;
    	    z-index: -1;
        }

	.app_list_txt-c1 {
		display: flex;
   	    position: relative;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	    width: 75%;
    }

	.app_list_txt-c2 {
		display: flex;
   	    position: relative;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
	    width: 75%;
    }


	.app_list_txt-row {
		display: flex;
		justify-content: flex-start;
		align-items: center;
   	    position: relative;
		margin: 1em 0 1em 0;
	    width: 100%;
    }

	.app_list_txt-row1 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
   	    position: relative;
	    width: 100%;
		display: -webkit-box;           /* 必須結合 Webkit 盒模型 */
        -webkit-line-clamp: 3;          /* 設定最多顯示的行數 */
        -webkit-box-orient: vertical;   /* 設定盒模型的排列方向為垂直 */
        overflow: hidden; 
    }

	.app_list_txt-row2 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
   	    position: relative;
		margin: 0;
	    width: 100%;
    }

		.app_list_icon {
		    display: block;
   	        position: relative;
	        width: 110px;
        } 	

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

		.app_list_title {
		    display: block;
   	        position: relative;
			padding: 0 0 0 1em;
	        flex: 1;
        } 


/* --- 航太 --- */		

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

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

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

	.app_aero1 {
		display: block;
   		position: absolute;
		top: 0;
		left: 8%;
		transform: translate(0%, -8%);
		width: 30%;
		z-index: 5;
		opacity: 0;
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

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

		.app_aero-name1 {
			display: inline-block;
   			position: absolute;
			padding: 0 1em 0 0;
			top: 0;
			left: 0;
			width: auto;
			background: #fff;
			z-index: 6;
		}

	.app_aero2 {
		display: block;
   		position: absolute;
		top: 0;
		right: 0%;
		transform: translate(0%, -8%);
		width: 52%;
		z-index: 5;
		opacity: 0;
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

		.app_aero-name2 {
			display: inline-block;
   			position: absolute;
			top: 0;
			right: 0;
			padding: 0 0 0 1em;
			width: auto;
			background: #fff;
			z-index: 6;
		}

	.app_aero3 {
		display: block;
   		position: absolute;
		bottom: 0;
		left: 21%;
		transform: translate(0%, 8%);
		width: 47%;
		z-index: 5;
		opacity: 0;
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

		.app_aero-name3 {
			display: inline-block;
   			position: absolute;
			bottom: 0.35em;
			right: 0;
			padding: 0 0 0 0.5em;
			background: #FFF;
			width: auto;
			z-index: 6;
		}

        .app_aero1.is-visible, .app_aero2.is-visible, .app_aero3.is-visible {
            opacity: 1;
            transform: translate(0%, 0%);
        }



	.app_semi1 {
		display: block;
   		position: absolute;
		top: 5%;
		left: 2.5%;
		transform: translate(0%, -8%);
		width: 41%;
		z-index: 5;
		opacity: 0;
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

		.app_semi-name1 {
			display: inline-block;
   			position: absolute;
			padding: 0 1em 0 0;
			top: 0;
			left: 0;
			width: auto;
			background: #fff;
			z-index: 6;
		}

	.app_semi2 {
		display: block;
   		position: absolute;
		top: 4.5%;
		left: 57%;
		transform: translate(0%, -8%);
		width: 38%;
		z-index: 5;
		opacity: 0;
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

		.app_semi-name2 {
			display: inline-block;
   			position: absolute;
			top: 0;
			right: 0;
			padding: 0 0 0 1em;
			width: auto;
			background: #fff;
			z-index: 6;
		}

	.app_semi3 {
		display: block;
   		position: absolute;
		bottom: 0;
		left: 5%;
		transform: translate(0%, -8%);
		width: 30.5%;
		z-index: 5;
		opacity: 0;
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

		.app_semi-name3 {
			display: inline-block;
   			position: absolute;
			bottom: 0;
			left: 0;
			padding: 0 1em 0 1em;
			background: #FFF;
			width: auto;
			z-index: 6;
		}
  
	.app_semi4 {
		display: block;
   		position: absolute;
		bottom: 0;
		right: 2%;
		transform: translate(0%, -8%);
		width: 33.5%;
		z-index: 5;
		opacity: 0;
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

		.app_semi-name4 {
			display: inline-block;
   			position: absolute;
			bottom: 0;
			right: 0;
			padding: 0 1em 0 1em;
			background: #FFF;
			width: auto;
			z-index: 6;
		}

	.app_semi5 {
		display: block;
   		position: absolute;
		top: 0%;
		left: 44%;
		transform: translate(0%, -8%);
		width: 12%;
		z-index: 5;
		opacity: 1;
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

		.app_semi-name5 {
			display: inline-block;
   			position: absolute;
			top: 7%;
			left: 50%;
			transform: translate(-50%, 0);
			padding: 0 1em 0 1em;
			background: #FFF;
			width: 120%;
			text-align: center;
			z-index: 6;
		}

        .app_semi1.is-visible, .app_semi2.is-visible, .app_semi3.is-visible, .app_semi4.is-visible {
            opacity: 1;
            transform: translate(0%, 0%);
        }


	.app_mach1 {
		display: block;
   		position: absolute;
		top: 10%;
		left: 4%;
		transform: translate(0%, -8%);
		width: 34%;
		z-index: 5;
		opacity: 0;
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

		.app_mach-name1 {
			display: inline-block;
   			position: absolute;
			padding: 0 1em 0 0;
			top: 40%;
			left: 40%;
			width: auto;
			z-index: 6;
		}

	.app_mach2 {
		display: block;
   		position: absolute;
		top: 20%;
		left: 44%;
		transform: translate(0%, -8%);
		width: 54%;
		z-index: 5;
		opacity: 0;
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

		.app_mach-name2 {
			display: inline-block;
   			position: absolute;
			top: 0%;
			right: 1%;
			padding: 0;
			width: auto;
			z-index: 6;
		}

	.app_mach3 {
		display: block;
   		position: absolute;
		bottom: 0;
		left: 1%;
		transform: translate(0%, -8%);
		width: 36.5%;
		z-index: 5;
		opacity: 0;
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

		.app_mach-name3 {
			display: inline-block;
   			position: absolute;
			bottom: 17%;
			right: 6%;
			padding: 0 1em 0 1em;
			width: auto;
			z-index: 6;
		}
  
	.app_mach4 {
		display: block;
   		position: absolute;
		bottom: 0;
		right: 5%;
		transform: translate(0%, -8%);
		width: 53%;
		z-index: 5;
		opacity: 0;
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

		.app_mach-name4 {
			display: inline-block;
   			position: absolute;
			bottom: 23%;
			left: 4%;
			padding: 0 0.5em;
			width: auto;
			z-index: 6;
		}

        .app_mach1.is-visible, .app_mach2.is-visible, .app_mach3.is-visible, .app_mach4.is-visible {
            opacity: 1;
            transform: translate(0%, 0%);
        }



	.app_elec1 {
		display: block;
   		position: absolute;
		top: 2%;
		left: 4%;
		transform: translate(0%, -8%);
		width: 50%;
		z-index: 5;
		opacity: 0;
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

		.app_elec-name1 {
			display: inline-block;
   			position: absolute;
			padding: 0 0.5em;
			top: 0.5%;
			left: 20%;
			background: #FFF;
			width: auto;
			z-index: 6;
		}

	.app_elec2 {
		display: block;
   		position: absolute;
		top: 56%;
		left: 0%;
		transform: translate(0%, -8%);
		width: 44%;
		z-index: 5;
		opacity: 0;
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

		.app_elec-name2 {
			display: inline-block;
   			position: absolute;
			bottom: 16%;
			right: 6%;
			padding: 0;
			width: auto;
			z-index: 6;
		}

	.app_elec3 {
		display: block;
   		position: absolute;
		bottom: 0;
		right: 1%;
		transform: translate(0%, -8%);
		width: 40%;
		z-index: 5;
		opacity: 0;
        transition: opacity 0.8s ease, transform 0.8s ease;
	}

		.app_elec-name3 {
			display: inline-block;
   			position: absolute;
			bottom: 21%;
			left: 5%;
			padding: 0 0.5em;
			width: auto;
			z-index: 6;
		}

        .app_elec1.is-visible, .app_elec2.is-visible, .app_elec3.is-visible {
            opacity: 1;
            transform: translate(0%, 0%);
        }






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

	.app_core_flex-div {
		display: block;
   		position: relative;
		background: #1FACCC;
		border-radius: 25px;
		padding: 1.5em 2em;
		width: 32%;
		color:#FFF;
	}

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

		.app_core_flex-r1-icon {
			display: flex;
   			position: relative;
			justify-content: center;
			align-items: center;
			width: 75px;
		}

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

		.app_core_flex-r1-tt {
			display: flex;
   			position: relative;
			justify-content: flex-start;
			align-items: center;
			padding-left: 0.5em;
			flex: 1;
		}

		.app_core_flex-r2 {
			display: block;
   			position: relative;
			padding: 0.5em 0 0 0;
			width: 100%;
		}


.app_essential_flex {
	display: flex;
    position: relative;
	justify-content: space-between;
	align-items: stretch;
	margin: 80px 0 0 auto;
	width: 90%;
}

	.app_essential_flex-pic {
		display: block;
   		position: relative;
		background: #f2f2f2;
		width: 40%;
	}

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

	.app_essential_flex-div {
		display: block;
   		position: relative;
		background: #f2f2f2;
		flex: 1;
	}

	.app_essential_flex-div-c {
		display: flex;
   		position: relative;
		flex-direction: column;
		padding-bottom: 1em;
		width: 80%;
		height: 100%;
		box-sizing: border-box;
	}

		.app_essential_flex-div-tt {
		    display: block;
   		    position: relative;
			padding: 0.5em 2.5em 0.5em 1em;
		    width: 100%;
			background: #1FACCC;
			clip-path: polygon(0 0, 95% 0, 90% 100%, 0% 100%);
			color: #FFF;
	    }


		.app_essential_flex-div-word {
			display: flex;
   			position: relative;
			flex-direction: column;
			justify-content: center;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
		}


		.app_essential_flex-div-rw1 {
		    display: block;
   		    position: relative;
			padding: 1em 1.3em;
			width: 100%;
	    }

		.app_essential_flex-div-rw2 {
		    display: flex;
   		    position: relative;
			justify-content: space-between;
			align-items: flex-start;
			margin: 0.5em 0;
			padding: 0 1.5em;
			width: 100%;
	    }

		    .app_essential_flex-div-rw2-le {
		        display: flex;
   		        position: relative;
			    justify-content: center;
			    align-items: center;
			    padding: 0.25em 0.5em;
			    width: 100px;
				text-align: center;
				background: #999;
	        }

		    .app_essential_flex-div-rw2-ri {
   		        position: relative;
				flex-wrap: nowrap;
			    justify-content: flex-start;
			    align-items: flex-start;
			    padding: 0.25em 0 0.25em 1em;
			    flex: 1;
				word-break: break-all;
	        }


/* --- 設備 --- */

.equ_flex1 {
	display: flex;
    position: relative;
	justify-content: space-between;
	align-items: stretch;
	margin: 80px 0 0 5%;
	width: 100%;
}

.equ_flex1_m {
	display: none
}

	.equ_flex1-pic {
	    display: flex;
        position: relative;
	    justify-content: center;
	    align-items: center;
	    width: 45%;
		clip-path: polygon(0% 0%, 100% 0%, 70% 100%, 0% 100%);
		background: #FFF;
		z-index: 1	;
    }

	.equ_flex1-picccc {
	    display: block;
        position: absolute;
		width: 45%;
		height: 100%;
		top: 0%;
		left: 0%;
		z-index: 110;
    }

	    .equ_flex1-pic img, .equ_flex1-picccc img {
	        display: block;
            position: relative;
	        width: 100%;
			z-index: 1;
        }

	    .equ_flex1-picab {
	        display: block;
            position: absolute;
			top: 5px;
			left: 3px;
			transform: translate(0,0);
	        width: 45%;
			height: 100%;
			clip-path: polygon(0 0, 100% 0%, 70% 100%, 0% 100%);
			background: #1FACCC;
			z-index: -1;
        }

	.equ_flex1-txt {
	    display: flex;
        position: relative;
	    justify-content: flex-start;
	    align-items: center;
		margin-top: 10px;
	    width: 55%;
		background: #FFF;
		z-index: 5;
    }

	    .equ_flex1-txtab {
	        display: block;
            position: absolute;
			top: 5px;
			right: 0;
			transform: translate(0,0);
	        width: 55%;
			height: 5px;
			background: #1FACCC;
			z-index: -1;
        }

	    .equ_flex1-txt-c {
	        display: flex;
            position: relative;
			margin: 0 auto 0 0;
			width: 80%;
        }

	    .equ_flex1-txt-flex {
	        display: flex;
            position: relative;
			justify-content: flex-start;
			align-items: flex-start;
			margin: 0 auto;
			width: 100%;
        }

	        .equ_flex1-txt-flex-le {
	            display: flex;
                position: relative;
				flex-direction: column;
				justify-content: center;
			    align-items: stretch;
				padding-right: 1em;
			    width: fit-content;
				height: 100%;
				border-right: solid 1.5px #94ade6;
            }

	        .equ_flex1-txt-flex-le1 {
	            display: flex;
                position: relative;
				flex-direction: column;
				justify-content: center;
			    align-items: stretch;
				padding-right: 1em;
			    width: fit-content;
				height: 100%;
				border-right: solid 1.5px #9dc9dc;
            }

	        .equ_flex1-txt-flex-le2 {
	            display: flex;
                position: relative;
				flex-direction: column;
				justify-content: center;
			    align-items: stretch;
				padding: 1em 1em 1em 0;
			    width: fit-content;
				height: 100%;
				border-right: solid 1.5px #a2dbbb;
            }

			.equ_flex1-txt-flex-ri {
	            display: flex;
                position: relative;
				flex-direction: column;
				justify-content: center;
			    align-items: flex-start;
				padding: 1em 0 1em 1em;
				height: 100%;
			    flex: 1;
            }

			.equ_flex1-txt-flex-ri-1 {
	            display: flex;
                position: relative;
				flex-direction: column;
				justify-content: center;
			    align-items: flex-start;
				padding: 1em 0 1em 1em;
				height: 100%;
			    flex: 1;
            }

			.equ_flex1-txt-flex-row {
	            display: flex;
                position: relative;
				justify-content: flex-start;
				align-items: baseline;
			    width: 100%;
            }

			.equ_flex1-txt-flex-row1 {
	            display: flex;
                position: relative;
				justify-content: flex-start;
				align-items: baseline;
			    width: 100%;
            }



.equ_flex2 {
	display: flex;
    position: relative;
	justify-content: space-between;
	align-items: stretch;
	margin: 5px 0 80px 5%;
	width: 100%;
	background: #f2f2f2;
}

.equ_flex2_m {
	display: none;
}


	.equ_flex2-le {
	    display: flex;
        position: relative;
		flex-direction: column;
	    justify-content: center;
	    align-items: flex-start;
		padding: 1em;
	    width: 31.5%;
		background-image: url(../../images/pic_equ_mdzz.webp);
		background-position: top right;
		background-size: cover;
		background-repeat: no-repeat;
    }

	.equ_flex2-lep2 {
	    display: flex;
        position: relative;
		flex-direction: column;
	    justify-content: center;
	    align-items: flex-start;
		padding: 1em;
	    width: 31.5%;
		background-image: url(../../images/pic_equ_mdzz1.webp);
		background-position: top right;
		background-size: cover;
		background-repeat: no-repeat;
    }

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

	.equ_flex2-ri-c {
	    display: block;
        position: relative;
		margin: 0 auto 0 0;
		padding: 1em;
	    width: 80%;
    }



/* area-setting */

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

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

	.more-right {  
        display: block;
        position: relative;
		margin: 0.5em 0;
		width: 100%;
		text-align: right;
	}

	.more-left {  
        display: block;
        position: relative;
		margin: 0 0 0.5em -0.5em;
		width: 100%;
	}

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

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

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

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

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

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

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

	.span1 {
	    display: inline-block;  /* 必須改為行內區塊，寬度才會生效 */
	    width: 8em;           /* 限制你的目標長度 */
	    text-align-last: justify; /* 達成最後一行（通常也是唯一一行）文字分散對齊 */
	    text-align: justify;    /* 傳統瀏覽器相容性支援 */
		white-space: nowrap;
		letter-spacing: 0;
	}

	.span1-1 {
	    display: inline-block;  /* 必須改為行內區塊，寬度才會生效 */
		margin-right: 1em;
	    width: 6.5em;           /* 限制你的目標長度 */
	    text-align-last: justify; /* 達成最後一行（通常也是唯一一行）文字分散對齊 */
	    text-align: justify;    /* 傳統瀏覽器相容性支援 */
		letter-spacing: 0;
	}

	.span1-2 {
	    display: inline-block;  /* 必須改為行內區塊，寬度才會生效 */
	    width: 7.1em;           /* 限制你的目標長度 */
	    text-align-last: justify; /* 達成最後一行（通常也是唯一一行）文字分散對齊 */
	    text-align: justify;    /* 傳統瀏覽器相容性支援 */
		letter-spacing: 0;
	}

	.span1-3 {
	    display: inline-block; 
	    width: 6em;          
	    text-align-last: justify; 
	    text-align: justify;   
		letter-spacing: 0;
	}


	.span2 {
	    display: inline-block;  
	    width: 205px;           
	    text-align-last: right; 
	    text-align: right;
		white-space: nowrap;
	}

	.span2-1 {
	    display: inline-block;  
		margin-left: 0.25em;
	    width: 210px;           
	    text-align-last: left; 
	    text-align: left; 
		white-space: nowrap;
	}

	.span2-2 {
	    display: inline-block;  
		margin-left: 0.25em;
	    width: 170px;           
	    text-align-last: left; 
	    text-align: left; 
		white-space: nowrap;
	}

	.span2-3 {
	    display: inline-block;  
		margin-left: 0.25em;
	    width: 2.5em;           
	    text-align-last: left; 
	    text-align: left; 
		white-space: nowrap;
	}


/* 首頁輪播 */

	.indproCarousel {
		display: inline-block;
		position: relative;
		margin: 0 auto 3em auto;
		width: 100%;
	}

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

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

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

	    .slick_card_ab {
		    display: block;
            position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
            width: 100%;
			height: 100%;
			background: linear-gradient(to top, #000 0%, transparent 80%);
			z-index: 12;
	    }

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

		    .slick_card_iconbg {
		        display: block;
                position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
		        width: 95%;
                height: 95%;
                z-index: -1;
				background: rgba(255, 255, 255, 0.85);
	        }

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


.comingsoon {
	display: flex;
	position: relative;
	flex-direction: column;
	justify-content: flex-end;
	background-image: url(../../images/comingsoon.webp);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	margin: 0 auto;
	flex-grow: 1;
    width: 100%;
	min-height: 100vh;
	height: auto;
}

.comcom {
	display: flex;
	position: relative;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	margin: 0 auto;
	padding: 0 0 3em 0;
    width: 1200px;
	min-height: ;
	height: auto;
}

	.comcom-pic {
		display: block;
		position: relative;
		margin: 0 auto;
		width: 100%;
		height: auto;
    }

		.comcom-pic img {
			position: relative;
			width: 100%;
			height: auto;
    	}

	.comcom-div {
		display: block;
		position: relative;
		width: 100%;
		height: auto;
		text-align: center;
    }
	
		.comcom-word {
			display: block;
			position: relative;
			width: 100%;
			background: rgba(0,0,0,0.8);
   		 }

		.comcom-bt {
			display: inline-block;
			position: relative;
			width: auto;
			padding: 0.5em 2em 0.5em 2em;
			background: rgba(0,0,0,0.8);
			border-radius: 100px;
			border: solid 1px #FFF;
			color:#b3b3b3;
			font-size: 1.3em;
			text-align: center;
   		 }

		.comcom-bt:hover {
			background: #1faccc;
			border-radius: 100px;
			border: solid 1px #1faccc;
			color:#FFF;
            -webkit-transition:all 0.2s ease-in-out;
	        transition:all 0.2s ease-in-out;
   		 }

	.comcomf1 {
		display: flex;
		position: relative;
		justify-content: center;
		margin: 0 auto;
		padding: 1.5em 1em 1.5em 1em;
		text-align: center;
		overflow: hidden;
		color: #FFF;
		font-size: 1em;
	}

	    .comcomf1 a {
	        color: #666;
	    }

	    .comcomf1 a:hover {
		    color: #1fACCC;
	    }

	    .comcomf1-logo {
	        display: block;
			position: relative;
			margin-right: 3em;
			width: 220px;
			text-align: left;
	    }

	        .comcomf1-logo img {
	            display: block;
			    position: relative;
			    width: 100%;
	        }

	    .comcomf1-name {
	        display: block;
			position: relative;
			margin-top: 0.5em;
			width: 100%;
			text-align: left;
			color: #666;
			font-size: 113%;
			font-weight: bold;
	    }

	    .comcomf1-word {
	        display: block;
			position: relative;
			width: auto;
			text-align: left;
			color: #666;
			line-height: 155%;
	    }






.comcomfooter {
	display: block;
	position: relative;
	bottom: 0;
	width: 100%;
	padding: 0;
	text-align: center;
	overflow: hidden;
	color: #FFF;
}

	.comcomf2 {
		display: block;
		position: relative;
		border-top:solid 5px #1FACCC;
		background: #000;
		width: 100%;
		padding: 1em 1em;
		text-align: center;
		overflow: hidden;
		color: #FFF;
	}



/* myBtn - go top */

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

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

	.contus {
		display: block;
		position: fixed;
		padding: 0;
		top: 30%;
		right: 1em;
		width: 120px;
		height: 120px;
		border: 0;
		background: none;
		cursor: pointer;
		z-index: 1000;
	    outline: none;
		z-index: 100;
	}

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

    .contus:active {
        transform: scale(0.9);
    }





/* Footer */

	#footer {
		position: relative;
		background-color: #000;
		border-top:solid 10px #1FACCC;
		width: 100%;
		padding: 0;
		text-align: left;
		overflow: hidden;
		color: #FFF;
	}

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

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


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

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

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

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

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

		#footer .fre1 {
		    display: flex;
			display: -webkit-flex; /* Safari */
		    justify-content: space-between;
			align-items: stretch;
			flex-wrap: wrap;
			margin: 0 auto;
            padding: 1em 0 0 0;
			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%;
					margin-right: 2em;
                    padding: 0 0 0.2em 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 2em 0.3em 0;
	                }

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


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

.app_essential_flex {
	display: flex;
    position: relative;
	justify-content: space-between;
	align-items: stretch;
	margin: 80px 0 0 auto;
	max-width: 1675px;
}

}

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

/* header */	
    
/* banner */

/* area-container */	
   

/* Wrapper */

/* setting */

.flowing-line {
    height: 72%;
}

.tech_r2_word {
	display: block;
	position: absolute;
	width: 24%;
	height: auto;
	top: 45%;
	right: 2%;
    transform: translate(0%, 0%);
	z-index: 10;
	background: rgba(255, 255, 255, 0.93);
	border: solid 3px #1FACCC;
	padding: 2em 3em;
}

.app_essential_flex {
	margin: 80px 0 0 auto;
	width: 90%;
}

	.app_essential_flex-div-c {
		width: 84%;
	}
    
/* Footer */
	
}



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

/* header */	
    
/* banner */

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

/* Wrapper */
 
/* setting */

    .ind_r5_f1e {
		display: flex;
		position: relative;
		justify-content: flex-end;
		align-items: center;
		padding: 1em 0;
		width: 67.8%;
		
    	background: #FFF;
		z-index: 2;
    }

        .ind_r5_fle_space {
			width:10%;
        }	

        .ind_r5_fle_txt {
			width:70%;
        }	

	.about_r4_flex {
		width: 85%;
	}

		.about_r4_flex-divle {
			padding: 0 2em;
		    width: 50%;
	    }

		.about_r4_flex-divri {
			padding: 0 2em;
		    width: 50%;
	    }

		    .about_r4_flex-drlist-icon {
		        flex: 0 1 80px;
	        }

		    .about_r4_flex-drlist-icon2 {
		        width: 80px;
	        }
		

	.about_r5_row1, .about_r5_row2, .about_r5_row3 {
		width: 1000px;
	}

.cont_r2-pic {
    width: 28%;
}

	    .new_flex-div-txt {
			padding: 0.5em 1em;
            width: 40%;
        }

            .fu_flex-divr-row1 {
				margin-bottom: 10%;
            }

            .fu_flex-divr-row2 {
				margin-bottom: 3%;
            }

			
 /* 電池積木 */

    /* 外層容器 */
    .battery-container {
        max-width: 100%; /* 您可以自由修改總寬度，或改為 max-width: 100% */
        margin: 1em auto;
    }

    /* 上方 div */
    .battery-terminals {
        height: 40px; /* 極端子的高度 */
        /* 使用負的 margin-bottom 將下方 div 往上吸，實現外框線條完美融合 */
        margin-bottom: -3px; 
    }

    /* 利用偽元素 ::before 和 ::after 畫出左、右兩個極端子 */
    .battery-terminals::before,
    .battery-terminals::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 55px;  /* 極端子的寬度 */
        height: 40px; /* 極端子的高度 */
        border: 3px solid #5cb3db; /* 藍色邊框 */
        border-bottom: none; /* 底部不畫線，與下方主體相通 */
        background-color: #fff; /* 必須填滿背景色，用來遮蓋下方 div 的頂部框線 */
        box-sizing: border-box;
    }

    /* 左邊極端子的位置（距離左側外框 50px） */
    .battery-terminals::before {
        left: 30px;
    }

    /* 右邊極端子的位置（距離右側外框 50px） */
    .battery-terminals::after {
        right: 30px;
    }

    /* 下方 div（主體外框） */
    .battery-body {
        width: 100%;
        min-height: 270px; /* 設定一個最小初始高度，沒內容時也不會扁掉 */
        height: auto;      /* 高度自動，隨內容延伸 */
        border: 3px solid #5cb3db; /* 藍色邊框 */
        padding: 1.5em 2em;     /* 內邊距，避免裡面的文字貼到藍色外框 */
    }

    /* 電池積木end */


    .mlaser-line {
        width: 4px; /* 線條粗細 */
        height: 90%; /* 線條高度，可自行調整 */
    }

    .hlaser-hline {
        width: 20%; /* 線條長度，可自行調整 */
        height: 4px; /* 線條粗細 */
    }

	.mat_icon1, .mat_icon2, .mat_icon3 {
		width: 110px;
	}

	.mat_icontxt {
	    top: 55%;
	    left: 75%;
		width: 400px;

	}

    		.app-r1-c-row-center {
        		width: 38%;
    		}
			
    		.app-r2-c-row-center {
				width: 38%;
    		}

    		.app-r1-c-row-le {
				align-items: flex-start;
        		width: 20%;
    		}

    		.app-r1-c-row-ri {
				align-items: flex-end;
        		width: 20%;
    		}

    		.app-r1-icon {
				justify-content: center;
				align-items: center;
				margin: 3em 0;
        		width: 180px;
    		}

			    .app-r1-icon-p {
					margin: 0 auto;
        		    width: 100%;
    		    }

			        .app-r1-icon-p img {
        		        margin: 0 auto;
        		        width: 60%;
    		        }

    		.app-r1-blue {
				top: 40%;
				left: 50%;
				transform: translate(-50%, 0%);
        		width: 48%;
    		}



/* Footer */

	
}
	

/* Normal */

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

/* Basic */
    
/* header */	

/* banner */

/* Wrapper */

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

	.bodycontainer2 {  
		width: 80%;
	}



/* setting */
    
.flowing-line {
    height: 75%;
}

	    .new_flex-div-txt {
			padding: 0.5em 1em;
            width: 50%;
        }


    .detail_flex-tt {
		padding: 0.5em 1em;
    }

        .detail_flex-icon {
            grid-template-columns: repeat(4, 25%); 
		    width: 100%;
        }

            .detail_flex-icon-div:last-child .detail_flex-icon-div-p-c {
                border-right: none;
            }

            .detail_flex-icon-div:nth-child(4) .detail_flex-icon-div-p-c {
                border-right: none;
            }


 /* 電池積木 */

    /* 外層容器 */
    .battery-container {
        max-width: 100%; /* 您可以自由修改總寬度，或改為 max-width: 100% */
        margin: 1em auto;
    }

    /* 上方 div */
    .battery-terminals {
        height: 40px; /* 極端子的高度 */
        /* 使用負的 margin-bottom 將下方 div 往上吸，實現外框線條完美融合 */
        margin-bottom: -3px; 
    }

    /* 利用偽元素 ::before 和 ::after 畫出左、右兩個極端子 */
    .battery-terminals::before,
    .battery-terminals::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 55px;  /* 極端子的寬度 */
        height: 40px; /* 極端子的高度 */
        border: 3px solid #5cb3db; /* 藍色邊框 */
        border-bottom: none; /* 底部不畫線，與下方主體相通 */
        background-color: #fff; /* 必須填滿背景色，用來遮蓋下方 div 的頂部框線 */
        box-sizing: border-box;
    }

    /* 左邊極端子的位置（距離左側外框 50px） */
    .battery-terminals::before {
        left: 25px;
    }

    /* 右邊極端子的位置（距離右側外框 50px） */
    .battery-terminals::after {
        right: 25px;
    }

    /* 下方 div（主體外框） */
    .battery-body {
        width: 100%;
        min-height: 310px; /* 設定一個最小初始高度，沒內容時也不會扁掉 */
        height: auto;      /* 高度自動，隨內容延伸 */
        border: 3px solid #5cb3db; /* 藍色邊框 */
        padding: 1.5em 2em;     /* 內邊距，避免裡面的文字貼到藍色外框 */
    }

    /* 電池積木end */


.tech_r2_word {
	display: block;
	position: absolute;
	width: 80%;
	height: auto;
	top: 65%;
	right: auto;
	left: 50%;
    transform: translate(-50%, 0%);
	z-index: 10;
	background: rgba(255, 255, 255, 0.85);
	border: solid 3px #1FACCC;
	padding: 2em 2em;
}

    .mlaser-line {
        width: 4px; /* 線條粗細 */
        height: 90%; /* 線條高度，可自行調整 */
    }

    .hlaser-hline {
        width: 20%; /* 線條長度，可自行調整 */
        height: 4px; /* 線條粗細 */
    }

	.mat_icon1, .mat_icon2, .mat_icon3 {
		width: 100px;
	}

	.mat_icontxt {
	    top: 55%;
	    left: 77%;
		width: 400px;

	}

	.m_ai {
	    top: 23.05%;
	    left: 12.3%;
	}

	.m_sp {
	    top: 27.3%;
	    left: 69.9%;
	}

	.m_fe {
	    bottom: 10.4%;
	    left: 59.8%;
	}




/* area-setting */

	.span1 {
	    display: inline-block;  /* 必須改為行內區塊，寬度才會生效 */
	    width: 8.2em;           /* 限制你的目標長度 */
	    text-align-last: justify; /* 達成最後一行（通常也是唯一一行）文字分散對齊 */
	    text-align: justify;    /* 傳統瀏覽器相容性支援 */
		white-space: nowrap;
	}

	.span1-1 {
	    display: inline-block;  /* 必須改為行內區塊，寬度才會生效 */
	    width: 6em;           /* 限制你的目標長度 */
	    text-align-last: justify; /* 達成最後一行（通常也是唯一一行）文字分散對齊 */
	    text-align: justify;    /* 傳統瀏覽器相容性支援 */
	}

	.span2 {
	    display: inline-block;  
	    width: 180px;           
	    text-align-last: right; 
	    text-align: right;
		white-space: nowrap;
	}

	.span2-1 {
	    display: inline-block;  
		margin-left: 0.25em;
	    width: 140px;           
	    text-align-last: left; 
	    text-align: left; 
		white-space: nowrap;
	}

	.span2-2 {
	    display: inline-block;  
		margin-left: 0.25em;
	    width: 110px;           
	    text-align-last: left; 
	    text-align: left; 
		white-space: nowrap;
	}

    
.comcom {
    width: 980px;
}

	.comcomf1 {
		flex-direction: column;
		margin: 0 auto;
		padding: 1.5em 1em 1.5em 1em;
		width: 80%;
		color: #FFF;
		font-size: 1em;
	}


	    .comcomf1-logo {
			margin: 0 auto 1em auto;
			width: 220px;
			text-align: left;
	    }


	    .comcomf1-name {
	        display: block;
			position: relative;
			margin-top: 0.5em;
			width: 100%;
			text-align: center;
	    }

	    .comcomf1-word {
			width: auto;
			text-align: center;
	    }


/* Footer */


}



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

/* Basic */
    
/* header */	

/* banner */

    .banner_path { 
        display: none;
    }

/* Wrapper */

/* area-container */	

	.bodycontainer2 {  
		width: 100%;
	}


/* setting */

	.evtitle {  
		margin: 1.5em 0;
		width: 100%;
	}

	.evtitle_l {  
		margin: 1.5em 0;
		width: 100%;
	}

    .ind_r2-a1 {
		padding: 1em 4em 0.5em 4em;
        width: 100%;
    } 

    .ind_r3-div-center {
	    padding: 0 3em 2em 3em;
        width: 550px;
		min-height: 540px;
    }


.ind_r6 {
    display: flex;
	position: relative;
}

    .ind_r6_fle {
		display: block;
		width: 45%;
    }

    .ind_r6_fri {
		padding: 2em 2em 2em 0;
		width: 55%;
    }

		.ind_r6_txt {
		    width: 100%;
        }

	    .ind_r6_3icon {
			margin: 15px 0;
		    width: 100%;
        }

	    	.ind_r6_3icon-div {
		    	width: 160px;
        	}

			.ind_r6_3icon-txt {
				padding: 5px 0;
		    	width: 100%;
				text-align: center;
       	 	}

	    	.ind_r6_3icon-divadd {
		    	width: 30px;
       	 	}


.ind_r7 {
	margin: 3em auto;
}

    .ind_r7_div1 {
		margin: 0 10px 0 0;
		width: 44.4%;
    }

    .ind_r7_div2 {
		margin: 0 10px;
		width: 27.8%;
    }

    .ind_r7_div3 {
		margin: 0 0 0 10px;
		width: 27.8%;
    }
	

	.about_r5_row1, .about_r5_row2, .about_r5_row3 {
		width: 80%;
	}


	    .sev_r4_flex-divri-icon {
            width: 100%;
        }

			.sev_r4_flex-divri-icon-div {
				margin: 0 10px 10px 0;
                width: 110px;
				height: 110px;
				border-radius: 110px;
			}
    

.sev_r5_row {
    display: block;
    position: relative;
	margin: 1em auto 2em auto;
    width: 80%;
}

			.sev_r4_flex-divri-icon-div {
                width: 100px;
				height: 100px;
			}


.fu_flex {
	margin: 3em auto 0 auto;
	width: 100%;
}

            .fu_flex-divr-row1 {
				margin-bottom: 6%;
            }

            .fu_flex-divr-row2 {
				margin-bottom: 1%;
            }


.tech_r4_flex {
	margin: -3em auto 0 auto;
	width: 100%;
}


.mat_r1_flex {
	flex-wrap: wrap;
	justify-content: center;
	margin: 4em auto 4em auto;
	width: 95%;
}

	.mat_r1_flex-div {
		margin: 0 10px 1.5em 10px;
		padding: 1em 0 0 0;
		width: 47%;
	}


    		.app-r1-c-row-le {
				align-items: flex-start;
        		width: 22%;
    		}

    		.app-r1-c-row-ri {
				align-items: flex-end;
        		width: 22%;
    		}

    		.app-r1-icon {
				margin: 3em 0;
        		width: 180px;
    		}

			    .app-r1-icon-p {
        		    width: 100%;
    		    }

			        .app-r1-icon-p img {
        		        width: 60%;
    		        }

    		.app-r1-blue {
				top: 30%;
				left: 50%;
        		width: 52%;
    		}






/* area-setting */

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

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





/* Footer */


}



/* Narrower */


@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 */	
    
/* banner */

/* Wrapper */

/* area-container */	

/* setting */

.about_r3_line {
	position: absolute;
	top: 0;
	left: calc(50%);
	transform: translate(-50%, 80px);
    width: 0.37%;                          
    height: 70%;                       
    background: linear-gradient(to top, #0000ff, #0000ff); /* 漸層顏色 */

	opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}


	.about_r3_company-p1 {
		display: none;
	}

	.about_r3_company-p1-m {
		display: block;
	}
    
	.about_r3_title-m {
		position: relative;
		margin: 0 auto 1em auto;
		width: auto;
		text-align: center;
		background: #FFF;
		z-index: 999;
	}

	.about_r3_company-p1-m_flex {
		display: grid;
        position: relative;
        grid-template-columns: repeat(4, 23%); 
        justify-content: space-between;
        align-items: stretch;
        margin: 1em auto;
		width: 80%;
	}

		.about_r3_company-p1-m_flex-d {
			display: flex;
        	position: relative;
			flex-direction: column;
			width: 100%;
		}

		.about_r3_company-p1-m_flex-dtxt {
			display: block;
        	position: relative;
			padding: 5px 0;
			width: 100%;
			text-align: center;
		}

.sev_r3 {
    margin: 3em auto;
}

    .sev_r3_flex-divle {
        justify-content: center;
        align-items: flex-start;
        width: 37%;
    }

.sev_r4_flex {
	margin: -2px auto;
    width: 100%;
}

    .sev_r4_flex-divle {
        align-items: center;
        width: 40%;
    }

    	.sev_r4_flex-divlepic {
            width: 100%;
			z-index: 10;
        }

    .sev_r4_flex-divri {
        width: 49.5%;
    }

.sev_r5_pic {
    display: flex;
    position: relative;
	flex-wrap: wrap;
	flex-direction: row;
	margin: 0 auto;
    width: 90%;
}

    .sev_r5_ab1, .sev_r5_ab2, .sev_r5_ab3, .sev_r5_ab4 {
		margin: 1em auto;
		position: relative;
		float: left;
		top: auto;
		left: auto;
		padding: 1em;
		width: 30%;
		z-index: 11;
    }

    .sev_r5_ab1::after, .sev_r5_ab2::after, .sev_r5_ab3::after, .sev_r5_ab4::after {
		display: none;
    }


.comcom {
    width: 100%;
}



/* Footer */

}


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

/* Basic */
    
/* header */	

/* banner */

/* Wrapper */

/* area-container */	

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

/* setting */



.cont_row1_flex {
	justify-content: center;
	margin-bottom: 10px;
	width: 100%;
}

    .cont_row1_flex-le {
        width: 300px;
		margin-right: 30px;
		margin-bottom: 5px;
    }

    .cont_row1_flex-ri {
        margin-bottom: 2px;
    }  

    .cont_r2-flex-le {
        display: block;
	    position: relative;
        width: 58%;
		text-align: center;
    }

        .cont_r2-flex-ri-r1 {
			text-align: center;
        }


.cont_r2-flex {
	flex-direction: column;
	padding: 2em 0;
    width: 100%;
}

    .cont_r2-flex-le {
        width: 100%;
    }

    .cont_r2-flex-ri {
		margin: 0 auto;
        width: 80%;
    }
    
		.cont_form-group {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: flex-end;
        }

		.cont_form_captcha-bt-area {
			display: flex;
			position: relative;
			justify-content: center;
			margin: 0 auto;
        }


.new_flex {
    flex-direction: column;
    margin: 1em auto 2em auto;
    width: 80%;
}

    .new_flex-div-le {
		justify-content: flex-start;
		align-items: stretch;
		margin-bottom: 2em;
        width: 100%;
    }

    .new_flex-div-ri {
		justify-content: flex-start;
		align-items: stretch;
		margin-bottom: 2em;
        width: 100%;
    }

	    .new_flex-div-pic {
            display: block;
	        position: relative;
            width: 35%;
			order: 1;
        }

	    .new_flex-div-txt {
            display: flex;
	        position: relative;
	        flex-direction: column;
			justify-content: space-between;
			padding: 1em 1em 0 0;
            width: 65%;
			order: 2;
        }

	    .new_flex-div-txt-row1 {
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			margin: 0;
			padding: 0 1em;
            width: 100%;
        }

	    .new_flex-div-txt-row2 {
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
            width: 100%;
        }

	    .new_flex-div-txt-tt {
			margin: 0 0 0.2em 0;
            width: 100%;
        }

	    .new_flex-div-txt-word {
            width: 100%;
			padding: 0 1em;
        }

	    .new_flex-div-txt-more {
			justify-content: flex-end;
            width: 100%;
        }


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

        .detail_flex-icon {
            grid-template-columns: repeat(3, 33.33%); 
		    width: 100%;
        }

            .detail_flex-icon-div:last-child .detail_flex-icon-div-p-c {
                border-right: none;
            }

            .detail_flex-icon-div:nth-child(3) .detail_flex-icon-div-p-c {
                border-right: none;
            }

            .detail_flex-icon-div:nth-child(4) .detail_flex-icon-div-p-c {
                border-right: solid 1px #636363;
            }


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


.fu_flex {
    flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}

    .fu_flex-div1 {
		margin: 0 10px 3em 10px;
	    width: 47%;
    }

    .fu_flex-div2 {
		margin: 0 10px 3em 10px;
	    width: 47%;
    }

    .fu_flex-div3 {
		margin: 0 10px 3em 10px;
	    width: 47%;
    }

 /* 電池積木 */

    /* 外層容器 */
    .battery-container {
        max-width: 100%; /* 您可以自由修改總寬度，或改為 max-width: 100% */
        margin: 1em auto;
    }

    /* 上方 div */
    .battery-terminals {
        height: 40px; /* 極端子的高度 */
        /* 使用負的 margin-bottom 將下方 div 往上吸，實現外框線條完美融合 */
        margin-bottom: -3.5px; 
    }

    /* 利用偽元素 ::before 和 ::after 畫出左、右兩個極端子 */
    .battery-terminals::before,
    .battery-terminals::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 55px;  /* 極端子的寬度 */
        height: 40px; /* 極端子的高度 */
        border: 3.5px solid #5cb3db; /* 藍色邊框 */
        border-bottom: none; /* 底部不畫線，與下方主體相通 */
        background-color: #fff; /* 必須填滿背景色，用來遮蓋下方 div 的頂部框線 */
        box-sizing: border-box;
    }

    /* 左邊極端子的位置（距離左側外框 50px） */
    .battery-terminals::before {
        left: 50px;
    }

    /* 右邊極端子的位置（距離右側外框 50px） */
    .battery-terminals::after {
        right: 50px;
    }

    /* 下方 div（主體外框） */
    .battery-body {
        width: 100%;
        min-height: 220px; /* 設定一個最小初始高度，沒內容時也不會扁掉 */
        height: auto;      /* 高度自動，隨內容延伸 */
        border: 3.5px solid #5cb3db; /* 藍色邊框 */
        padding: 1.5em 2em;     /* 內邊距，避免裡面的文字貼到藍色外框 */
    }

    /* 電池積木end */

    .fu_flex_line2 {
        display: none;
    }

        .faq-container {
            grid-template-columns: repeat(2, 1fr);
        }


.tech_r2_clock {
	display: block;
	position: absolute;
	width: 15%;
	height: auto;
	top: 22%;
	left: 56.8%;
    transform: translate(0%, 0%);
	z-index: 10;
}

.tech_r2_word {
	position: relative;
	width: 100%;
	height: auto;
	top: auto;
	right: auto;
	left: 0%;
    transform: translate(0%, 0%);
	z-index: 10;
	background: rgba(255, 255, 255, 0.85);
	border: none;
	padding: 2em 5em;
    order: 2;
}


    		.app-r1-c-row-le {
				align-items: flex-start;
        		width: 28%;
    		}

    		.app-r1-c-row-ri {
				align-items: flex-end;
        		width: 28%;
    		}

    		.app-r1-icon {
				margin: 3em 0;
        		width: 180px;
    		}

			    .app-r1-icon-p {
        		    width: 100%;
    		    }

			        .app-r1-icon-p img {
        		        width: 50%;
    		        }

    		.app-r1-blue {
				top: 30%;
				left: 50%;
        		width: 55%;
    		}
			
			
		.app_list_icon {
	        width: 80px;
        } 	

/* area-setting */

	.title-center1 {  
		margin: 1em auto 0.25em auto;
		width: 85%;
	}

	.txt-center5 {  
		margin: 0 auto 0.5em auto;
		width: 85%;
		text-align: justify;
	}
    
/* Footer */


}



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

/* Basic */
    
/* header */	

/* banner */

    .banner_txt { 
		bottom: 20%;
		left: 50%;
		transform: translate(-50%, -50%);
    }

/* Wrapper */

/* area-container */	

/* setting */
    .ind_r2-a1 {
		display: block;
    } 

    .ind_r2-a2 {
		flex-direction: column;
        width: 100%;
		margin-bottom: 2em;
    } 

        .ind_r2-a2-le {
			padding: 1em 1.5em 1em 1.5em;
            width: 100%;
			border-bottom-left-radius: 0;
        } 

        .ind_r2-a2-ri {
			padding: 1em 1.5em 1em 1.5em;
            width: 100%;
			border-bottom-right-radius: 22px;
			border-bottom-left-radius: 22px;
        } 

            .ind_r2_mm1 { 
                grid-template-columns: repeat(3, 30%); 
                width: 360px;
            }

            .ind_r2_mm2 { 
                grid-template-columns: repeat(4, 22%); 
                width: 500px;
            }

    .ind_r3-div-center {
	    padding: 0 3em 2em 3em;
        width: 500px;
		min-height: 480px;
		clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
    }

	
.ind_r4 {
    flex-direction: column;
	margin-top: 3em;
	padding: 0;
    width: 100%;
    background-image: url(../../images/pic_ind_r4_bg3.webp);
    background-position: center;
	background-size: 100%;
	background-repeat: repeat;
}

    .ind_r4_f1e {
		width: 100%;
    }

    .ind_r4_fri {
		padding: 1em 6em 0.5em 6em;
		width: 100%;
        background-image: none;
	    background: #86919b;
    }

        .ind_r4_fri_txt {
			width: 100%;
        }	
	
.flowing-line {
    display: none;
}


.ind_r5 {
    flex-direction: column;
	padding: 0;
    width: 100%;
    background-image: none;
}

    .ind_r5_f1e {
		justify-content: center;
		align-items: center;
		padding: 1em 0;
		width: 100%;

    	background-image: none;
		background: #FFF;
		order: 2;
    }

        .ind_r5_fle_space {
			display: none
        }	

        .ind_r5_fle_txt {
			width: 80%;
        }	

    .ind_r5_fri {
    	background-image: url(../../images/pic_ind_r5_bg3.webp);
    	background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		width: 100%;
		min-height: 280px;
		z-index: 1;
		order: 1;
    }


.ind_r6 {
    flex-direction: column;
}

    .ind_r6_fle {
		padding: 0 1em;
		width: 100%;
		min-height: 300px;
		background-image: url(../../images/pic_ind_r6_pic-1.webp);
		background-position: center;
    }

    .ind_r6_fri {
		display: flex;
		position: relative;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 1em 0;
		width: 100%;
    }

		.ind_r6_c {
		    margin: 0 auto;
		    width: 80%;
			height: auto;
        }

		.ind_r6_txt {
		    width: 100%;
			height: auto;
        }

	    .ind_r6_3icon {
			margin: 15px 0;
		    width: 100%;
        }

	    	.ind_r6_3icon-div {
		    	width: 160px;
        	}

	    	.ind_r6_3icon-divadd {
		    	width: 40px;
       	 	}

.ind_r7 {
	margin: 0 auto;
}

    .ind_r7_div1 {
		margin: 0 10px 0 0;
		width: 44.4%;
    }

    .ind_r7_div2 {
		margin: 0 10px;
		width: 27.8%;
    }

    .ind_r7_div3 {
		margin: 0 0 0 10px;
		width: 27.8%;
    }


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

	.about_r1_flex-d1, .about_r1_flex-d2 {
		padding: 0 1em;
		text-align: center;
    }


	.about_r1_flex-d2 {
		display: block;
		position: relative;
		margin: 1em 0;
    	width: 180px;
    }

	.about_r3_company-p1-m_flex {
        grid-template-columns: repeat(2, 45%); 
        margin: 1em auto;
		width: 80%;
	}

		.about_r3_company-p1-m_flex-d {
			margin-bottom: 1em;
		}

		.about_r3_compline {
	        display: none;
	    }

		

	.about_r4_flex {
		flex-direction: column;
		width: 75%;
	}

		.about_r4_flex-divle {
			padding: 0;
		    width: 100%;
			border-right: none;
	    }

		.about_r4_flex-divle-1 {
		    display: none;
	    }

		.about_r4_flex-divri {
			padding: 0;
		    width: 100%;
	    }

		    .about_r4_flex-drlist-icon {
		        flex: 0 1 80px;
	        }

		    .about_r4_flex-drlist-icon2 {
		        width: 80px;
	        }


.about_r5 {
	display: block;
	position: relative;
	width: 100%;
    background-image: url(../../images/pic_abo_r5bg.webp);
	/* background-image: url(../../images/pic_mo_company.webp), url(../../images/pic_abo_r5bg.webp);*/
	background-repeat: repeat;
	background-size: 100%;
	padding: 0;
}

	.about_r5_mainpic {
		width: 100%;
		opacity: 1;
	}

	.about_r5_madzz {
		display: block;
		position: relative;
		padding: 1em 0;
		bottom: 0;
		width: 100%;
		background-image: url(../../images/pic_mo_company1.webp);
		background-size: cover;
		background-repeat: no-repeat;
	}


	.about_r6_flex {
		flex-direction: column;
	    margin: 0 auto;
	    padding: 2em 0;
	    width: 100%;
	}

	.about_r6_flexle {
		width: 100%;
	}

	.about_r6_flexri {
		margin: 1em auto 0 auto;
		width: 88%;
	}

        .about_r6_flexl_pic {
			flex-wrap: wrap;
            justify-content: center;
        } 

            .about_r6_flexl_pic_div { 
                display: block;
                position: relative;
				margin: 0 10px 10px 10px;
                width: 30%;
            }



	    .sev_r4_flex-divri-cr1 {
			padding: 0 0 1em 0;
			margin: 0 auto;
            width: 100%;
        }

	    .sev_r4_flex-divri-crab {
			top: 9%;
			right: 0;
			transform: translate(0%, 0);
            width: 150%;
        }

	    .sev_r4_flex-divri-icon {
            width: 100%;
        }

			.sev_r4_flex-divri-icon-div {
				margin: 0 10px 10px 0;
                width: 80px;
				height: 80px;
				border-radius: 110px;
			}


.detail_equ {
	justify-content: space-between;
	align-items: center;
    margin: 3em auto;
    width: 100%;
}

    .detail_equ-img {
        width: 40%;
    }

    .detail_equ-div {
        width: 58%;
    }

.tech_r2_picab {
	width: 80%;
	top: 0;
	right: 3%;
    transform: translate(0,0);
	z-index: 5;
}

.tech_r2_clock {
	display: block;
	position: absolute;
	width: 15%;
	height: auto;
	top: 22%;
	left: 56.8%;
    transform: translate(0%, 0%);
	z-index: 10;
}


.tech_r3_flex {
	flex-direction: column;
	margin: 2em auto 0 auto;
	width: 100%;
}

.tech_r4_flex {
	flex-direction: column;
	margin: 0 auto;
	width: 100%;
}

	.tech_r3_flex_pic {
		display: block;
		position: relative;
		width: 100%;
		order: 1;
	}

		.tech_r3_flex_pic img {
			width: 100%;
		}

	.tech_r3_flex_txt {
		width: 100%;
		order: 2;
	}

		.tech_r3_flex_txt-c {
			display: block;
			position: relative;
			padding: 2em 0;
			width: 75%;
		}


    /* 圓圈div 主容器：用來定位圓框與文字 */
    .material-container {
		display: flex;
        position: relative;
        justify-content: center;
		margin: 80px auto 0 auto;
		max-width: 900px;
		width: 100%;
        align-items: center;
        padding: 120px 0; /* 預留空間給背景的圓框 */
    }

    /* ====== 背景漸層圓框 (核心技巧) ====== */
    .circle-border {
		display: block;
        position: absolute;
        width: 360px;  /* 圓框寬度 */
        height: 360px; /* 圓框高度 */
    }


    .mlaser-line {
        width: 4px; /* 線條粗細 */
        height: 100%; /* 線條高度，可自行調整 */
    }

    .hlaser-hline {
        width: 20%; /* 線條長度，可自行調整 */
        height: 4px; /* 線條粗細 */
    }

	.mat_icon1, .mat_icon2, .mat_icon3 {
		width: 95px;
	}

	.mat_icontxt {
	    top: 55%;
	    left: 82%;
		width: 400px;
	}


.app_core_flex {
	flex-direction: column;
	margin: 1em auto 2em auto;
	width: 100%;
}

	.app_core_flex-div {
		margin-bottom: 20px;
		padding: 1.5em 2em;
		width: 100%;
	}


.app_essential_flex {
	flex-direction: column;
	margin: 4em auto 0 auto;
	max-width: none;
	width: 80%;
}

	.app_essential_flex-pic {
		width: 100%;
	}

	.app_essential_flex-div {
		display: block;
   		position: relative;
		background: #f2f2f2;
		flex: 1;
	}

	.app_essential_flex-div-c {
		display: block;
   		position: relative;
		margin: 0 auto;
		max-width: auto;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}

		.app_essential_flex-div-tt {
		    display: block;
   		    position: relative;
			padding: 0.5em 1em;
		    width: 100%;
			background: #1FACCC;
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
			color: #FFF;
	    }


.equ_flex1 {
	display: none;
	flex-direction: column;
	margin: 3em auto 0 auto;
	width: 80%;
}

.equ_flex1_m {
	display: block;
	flex-direction: column;
	margin: 3em auto 0 auto;
	width: 80%;
}

	.equ_flex1-pic {
	    width: 100%;
		clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
		padding-bottom: 0;
    }

	.equ_flex1-picccc {
	    display: none;
    }


	.equ_flex1-txt {
		margin-top: 0;
		padding: 0;
	    width: 100%;
		z-index: 5;
    }

	    .equ_flex1-txtab {
	        width: 100%;
        }

	    .equ_flex1-txt-c {
	        display: flex;
            position: relative;
			margin: 0 auto 0 0;
			width: 100%;
        }

        .equ_flex1-txt-flex {
			margin: 1em 0;
		}

	        .equ_flex1-txt-flex-le {
	            display: flex;
				margin: 1em 0 0 0;
            }

	        .equ_flex1-txt-flex-le1 {
	            display: flex;
				margin: 1em 0 0 0;
            }

	        .equ_flex1-txt-flex-le2 {
	            display: flex;
				margin: 0;
            }



.equ_flex2 {
	display: none;
}

.equ_flex2_m {
	display: block;
	flex-direction: column;
	margin: 1em auto 80px auto;
	width: 80%;
	background: #f2f2f2;
}

	.equ_flex2-le {
		padding: 1em 1em;
	    width: 100%;
		align-items: center;
		text-align: center;
		background-color: #FFF;
		border-bottom: solid 1px #000;
    }

	.equ_flex2-lep2 {
		padding: 1em 1em;
	    width: 100%;
		align-items: center;
		text-align: center;
		background-color: #FFF;
		border-bottom: solid 1px #000;
    }

	.equ_flex2-ri-c {
		padding: 1em;
	    width: 100%;
    }




/* area-setting */

	.txt-center2 {  
		margin: 1em auto;
		width: 80%;
	}
    
	.txt-center3 {  
		width: 100%;
	}

	.txt-center4 {  
		width: 100%;
	}

	.txt-center4-1 {  
		width: 100%;
	}


	.span1 {
	    display: inline-block;  /* 必須改為行內區塊，寬度才會生效 */
	    width: 8.2em;           /* 限制你的目標長度 */
	    text-align-last: justify; /* 達成最後一行（通常也是唯一一行）文字分散對齊 */
	    text-align: justify;    /* 傳統瀏覽器相容性支援 */
		white-space: nowrap;
	}

	.span1-1 {
	    display: inline-block;  /* 必須改為行內區塊，寬度才會生效 */
	    width: 7em;           /* 限制你的目標長度 */
	    text-align-last: justify; /* 達成最後一行（通常也是唯一一行）文字分散對齊 */
	    text-align: justify;    /* 傳統瀏覽器相容性支援 */
	}

	.span2 {
	    display: inline-block;  
	    width: 160px;           
	    text-align-last: right; 
	    text-align: right;
		white-space: nowrap;
	}

	.span2-1 {
	    display: inline-block;  
		margin-left: 0.25em;
	    width: 110px;           
	    text-align-last: left; 
	    text-align: left; 
		white-space: nowrap;
	}

	.span2-2 {
	    display: inline-block;  
		margin-left: 0.25em;
	    width: 100px;           
	    text-align-last: left; 
	    text-align: left; 
		white-space: nowrap;
	}





/* Footer */
	#footer .footerc {
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
	}

		#footer .frecom {
			margin: 0 auto 2em auto;
			width: 100%;
            flex: 0 1 100%;
		}

		#footer .flow {
		    display: block;
			margin: 0 auto;
			width: 100%;
			flex: 1;
	     }

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

}

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

	.SCROLL {  
		display: none;
	}


.fu_flex {
    flex-direction: column;
	justify-content: center;
	width: 100%;
}

    .fu_flex-div1 {
		margin: 0 auto 3em auto;
	    width: 80%;
    }

    .fu_flex-div2 {
		margin: 0 auto 3em auto;
	    width: 80%;
    }

    .fu_flex-div3 {
		margin: 0 auto 3em auto;
	    width: 80%;
    }

 /* 電池積木 */

    /* 外層容器 */
    .battery-container {
        max-width: 100%; /* 您可以自由修改總寬度，或改為 max-width: 100% */
        margin: 1em auto;
    }

    /* 上方 div */
    .battery-terminals {
        height: 40px; /* 極端子的高度 */
        /* 使用負的 margin-bottom 將下方 div 往上吸，實現外框線條完美融合 */
        margin-bottom: -4px; 
    }

    /* 利用偽元素 ::before 和 ::after 畫出左、右兩個極端子 */
    .battery-terminals::before,
    .battery-terminals::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 55px;  /* 極端子的寬度 */
        height: 40px; /* 極端子的高度 */
        border: 4px solid #5cb3db; /* 藍色邊框 */
        border-bottom: none; /* 底部不畫線，與下方主體相通 */
        background-color: #fff; /* 必須填滿背景色，用來遮蓋下方 div 的頂部框線 */
        box-sizing: border-box;
    }

    /* 左邊極端子的位置（距離左側外框 50px） */
    .battery-terminals::before {
        left: 50px;
    }

    /* 右邊極端子的位置（距離右側外框 50px） */
    .battery-terminals::after {
        right: 50px;
    }

    /* 下方 div（主體外框） */
    .battery-body {
        width: 100%;
        min-height: 100px; /* 設定一個最小初始高度，沒內容時也不會扁掉 */
        height: auto;      /* 高度自動，隨內容延伸 */
        border: 4px solid #5cb3db; /* 藍色邊框 */
        padding: 1.5em 2em;     /* 內邊距，避免裡面的文字貼到藍色外框 */
    }

    /* 電池積木end */

    .fu_flex_line1 {
        display: none;
    }


    	.app-r1-c-row1 {
			display: flex;
			position: relative;
			flex-wrap: wrap;
			justify-content: center;
			align-items: stretch;
        	width: 100%;
			min-height: auto;
    	}

    	.app-r1-c-row2 {
			display: flex;
			position: relative;
			justify-content: center;
			align-items: stretch;
        	width: 100%;
			min-height: auto;
    	}

    		.app-r1-c-row-center {
				margin: 0 auto;
        		width: 80%;
				background: #FFF;
				order: 1;
    		}
			
    		.app-r2-c-row-center {
				display: none;
    		}

    		.app-r1-c-row-le {
				align-items: flex-end;
        		width: 30%;
				order: 3;
    		}

    		.app-r1-c-row-ri {
				align-items: flex-start;
        		width: 30%;
				order: 4;	
    		}

    		.app-r1-icon {
				margin: 2em 0;
        		width: 200px;
    		}

    		.app-r1-blue {
        		position: relative;
				top: auto;
				left: auto;
				transform: translate(0%, 0%);
        		width: 100%;
				height: 102%;
				order: 2;
    		}

    		.app-r1-blue-white {
				margin: 1% auto;
				padding: 1em 3em 0 3em;
				width: 98%;
				height: 100%;
    		}


.app_list {
	flex-direction: column;
	margin: 0 auto;
	width: 100%;
}
		
	.app_list_pic {
		display: block;
   	    position: relative;
	    width: 100%;
		order: 1;
    }

	.app_list_txt1 {
		margin: 0 0 1em 0;
	    width: 100%;
		padding: 0 2em;
		overflow: hidden;
		order: 2;
    }

	.app_list_txt2 {
		margin: 0 0 1em 0;
	    width: 100%;
		padding: 0 2em;
		overflow: hidden;
		order: 2;
    }

		.app_list_txtbg1 {
		    position: absolute;
		    top: 0;
		    left: 0;
		    right: 0%;
		    bottom: 0; /* 強制底部與父元素對齊，不超高 */
		    box-sizing: border-box; /* 防止 padding 或 border 撐大子 1 */
    	    background: #f2f2f2;
    	    clip-path: polygon(0 0, 100% 0%, 100% 75%, 0% 100%);
    	    z-index: -1;
        }

		.app_list_txtbg2 {
		    display: block;
    	    position: absolute;
    	    box-sizing: border-box;
    	    top: 0;
    	    left: 0;
    	    right: 0;  /* 新增：右邊貼齊 */
    	    bottom: 0; /* 新增：下邊貼齊 */
    	    background: #f2f2f2;
    	    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 75%);
			overflow: hidden;
    	    z-index: -1;
        }


	.app_list_txt-c1 {
		margin: 0 auto;
	    width: 80%;
    }

	.app_list_txt-c2 {
		margin: 0 auto;
	    width: 80%;
    }



	
}

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

/* Basic */
    
/* header */	

/* banner */

/* Wrapper */

/* area-container */	

/* setting */

/* 首頁輪播 */

	.indproCarousel {
		display: inline-block;
		position: relative;
		margin: 0 auto 3em auto;
		width: 100%;
	}

	.slick_card {
		margin: 0;
        padding: 0;
		width: 100%;
	}

	    .slick_card_pic {
		    width: 100%;
	    }

	    .slick_card_proname {
            bottom: 20px;
            left: 50%;
	    }


	.evtitle {  
		margin: 1em 0;
		width: 100%;
	}

	.evtitle_l {  
		margin: 1em 0;
		width: 100%;
	}
	
.ind_r7 {
	flex-direction: column;
	margin: 0 auto;
}

    .ind_r7_div1 {
		margin: 0;
		width: 100%;
    }

    .ind_r7_div2 {
		margin: 10px 0;
		width: 100%;
    }

    .ind_r7_div3 {
		margin: 0;
		width: 100%;
    }


.flexg2 {
    grid-template-columns: repeat(1, 100%);
    margin: 0 auto;
    width: 100%;
}

    .flexg2-div-c {
        display: flex;
        position: relative;
		margin: 1em auto 0 auto;
		flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 80%;
    }

.sev_r3 {
    margin: 3em auto 0 auto;
}

.sev_r3_flex {
	margin: 2em auto 0 auto;
    flex-direction: column;
}

    .sev_r3_flex-divle {
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
		background: #1FACCC;
    }

    .sev_r3_flex-divle img {
		margin: 1em auto 1em 8%;
        width: 100%;
		background: #1FACCC;
    }

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

    	.sev_r3_flex-divlepic img {
            width: 270px;
        }

.sev_r3_color {
    position: relative;
    justify-content: center;
    align-items: center;
	top: auto;
	left: auto;
	transform: translate(0, -10%);
}

    .sev_r3_color-divri {
        justify-content: flex-start;
        align-items: flex-start;
		padding: 1em 0;
		margin: 0;
        width: 80%;
    }


.sev_r4_flex {
	flex-direction: column;
	margin: 0 auto;
    width: 100%;
}

    .sev_r4_flex-divle {
        align-items: center;
        width: 80%;
    }

    	.sev_r4_flex-divlepic {
            width: 100%;
			z-index: 10;
        }

    .sev_r4_flex-divri {
		margin: 2em 0 0 0;
        width: 80%;
    }

	    .sev_r4_flex-divri-icon {
            width: 100%;
        }

			.sev_r4_flex-divri-icon-div {
				margin: 0 10px 10px 0;
                width: 100px;
				height: 100px;
				border-radius: 110px;
			}
    
	    .sev_r4_flex-divri-crab {
			display: none;
        }


.sev_r5_pic {
	flex-wrap: wrap;
	flex-direction: row;
	margin: 0 auto;
    width: 90%;
}

    .sev_r5_ab1, .sev_r5_ab2, .sev_r5_ab3, .sev_r5_ab4 {
		margin: 1em auto;
		float: left;
		padding: 1em;
		width: 48%;
		z-index: 11;
    }


.cont_r2-pic {
    width: 33%;
}

.cont_r2-flex {
	flex-direction: column;
	padding: 2em 0;
    width: 100%;
}

    .cont_r2-flex-le {
        width: 100%;
    }

    .cont_r2-flex-ri {
		margin: 0 auto;
        width: 100%;
    }


        .detail_flex-icon {
            grid-template-columns: repeat(2, 50%); 
		    width: 100%;
        }

            .detail_flex-icon-div:last-child .detail_flex-icon-div-p-c {
                border-right: none;
            }

            .detail_flex-icon-div:nth-child(2) .detail_flex-icon-div-p-c {
                border-right: none;
            }

            .detail_flex-icon-div:nth-child(3) .detail_flex-icon-div-p-c {
                border-right: solid 1px #636363;
            }

            .detail_flex-icon-div:nth-child(4) .detail_flex-icon-div-p-c {
              border-right: none;
            }

.detail_equ {
	flex-direction: column;
    margin: 4em auto;
    width: 100%;
}

    .detail_equ-img {
        width: 55%;
    }

    .detail_equ-div {
        width: 100%;
    }


    .faq-itemQ2 {
        margin-top: 0;
    }
	
        .faq-container {
            grid-template-columns: 1fr;
        }


.mat_r1_flex {
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	margin: 3em auto 3em auto;
	width: 80%;
}

	.mat_r1_flex-div {
		margin: 0 auto 1em auto;
		padding: 1em 0 0 0;
		width: 100%;
	}

	.mat_r1_flex-div-r3-content {
		width: 100%;
		height: auto;
	}

    .mlaser-line {
	    top: 65%;
	    left: 50%;
	    transform: translate(-50%, -50%);
        width: 4px; /* 線條粗細 */
        height: 120%; /* 線條高度，可自行調整 */
    }

    .hlaser-hline {
	    top: 55%;
	    left: 50%;
        width: 80%; /* 線條長度，可自行調整 */
        height: 4px; /* 線條粗細 */
    }

	.mat_icon1 {
		top: 55%;
	    left: 30%;
	    transform: translate(-50%, -50%);
		width: 80px;
	}

	.mat_icon2 {
		top: 55%;
	    left: 50%;
	    transform: translate(-50%, -50%);
		width: 80px;
	}

	.mat_icon3 {
		top: 55%;
	    left: 70%;
	    transform: translate(-50%, -50%);
		width: 80px;
	}

	.mat_icontxt {
	    top: 95%;
	    left: 50%;
		transform: translate(-50%, 0);
		text-shadow: 0px 0px 0px #FFF;
		width: 80%;
		text-align: center;
		color: #000;
	}

    /* ==== 白色線框旋轉四角形，中間十字挖空 ====*/
    .dpad-container {
        display: none;
    }

	.material-container1 {
		display: flex;
        position: relative;
        justify-content: center;
		margin: 5% auto 120px auto;
		max-width: 900px;
		width: 100%;
        align-items: center;
        padding: 120px 0; /* 預留空間給背景的圓框 */
		z-index: 10;
    }



.app_show {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
    position: relative;
	margin: 2em auto;
	width: 100%;
}

	.app_aero1, .app_aero2, .app_aero3 {
		margin: 0 auto;
   		position: relative;
		top: auto;
		left: auto;
		transform: translate(0%, -8%);
		width: 30%;
	}

		.app_aero-pic {
			display: block;
   			position: relative;
			width: 100%;
			order: 1;
		}

		.app_aero-name1, .app_aero-name2, .app_aero-name3 {
   			position: relative;
			top: auto;
			bottom: auto;
			right: auto;
			padding: 10px 0 10px 0;
			width: 100%;
			text-align: center;
			z-index: 6;
			order: 2;
		}


	.app_semi1, .app_semi2, .app_semi3, .app_semi4  {
		margin: 0 auto;
   		position: relative;
		top: auto;
		left: auto;
		transform: translate(0%, -8%);
		width: 30%;
	}

	.app_semi5  {
   		position: relative;
		top: 17%;
		left: 37.5%;
		transform: translate(0%, -8%);
		width: 30%;
	}

		.app_semi-name1, .app_semi-name2, .app_semi-name3,  .app_semi-name4 {
   			position: relative;
			top: auto;
			bottom: auto;
			right: auto;
			padding: 10px 0 10px 0;
			width: 100%;
			text-align: center;
			order: 2;
		}

		.app_semi-name5 {
   			position: relative;
			top: 0;
			bottom: auto;
			right: auto;
			padding: 10px 0 10px 0;
			width: 150%;
			text-align: center;
			order: 1;
		}


	.app_mach1, .app_mach2, .app_mach3, .app_mach4  {
		margin: 0 auto;
   		position: relative;
		top: auto;
		left: auto;
		transform: translate(0%, -8%);
		width: 30%;
	}

		.app_mach-name1, .app_mach-name2, .app_mach-name3,  .app_mach-name4 {
   			position: relative;
			top: auto;
			left: auto;
			bottom: auto;
			right: auto;
			padding: 10px 0 10px 0;
			width: 100%;
			text-align: center;
			order: 2;
		}


	.app_elec1, .app_elec2, .app_elec3 {
		margin: 0 auto;
   		position: relative;
		top: auto;
		left: auto;
		transform: translate(0%, -8%);
		width: 30%;
	}

		.app_elec-name1, .app_elec-name2, .app_elec-name3 {
   			position: relative;
			top: auto;
			left: auto;
			bottom: auto;
			right: auto;
			padding: 10px 0 10px 0;
			width: 100%;
			text-align: center;
			order: 2;
		}





/* area-setting */

	.contus {
		width: 80px;
		height: 80px;
	}



    
/* Footer */


}


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

/* Basic */
    
/* header */	

/* banner */

    .banner_txt { 
		top: 50%;
		bottom: auto;
		left: 50%;
		transform: translate(-50%, -50%);
    }
/* Wrapper */

/* area-container */	

	.bodycontainer1 {  
		width: 80%;
	}

/* setting */
    
            .ind_r2_mm1 { 
                grid-template-columns: repeat(3, 30%); 
                width: 70%;
            }

            .ind_r2_mm2 { 
                grid-template-columns: repeat(3, 30%); 
                width: 70%;
            }


            .ind_r3_mm { 
                display: grid;
                position: relative;
                grid-template-columns: repeat(3, 30%); 
                margin: 1.5em auto;
                width: 90%;
            }

			
        .about_r6_flexl_pic {
			flex-wrap: wrap;
            justify-content: center;
        } 

            .about_r6_flexl_pic_div { 
                display: block;
                position: relative;
				margin: 0 10px 10px 10px;
                width: 45%;
            }
			
.sev_r1_flex {
    display: flex;
    flex-direction: column; /* 轉為垂直排列 */
    width: 100% !important; /* 強制覆蓋 fit-content */
    max-width: 100%;        /* 確保解除任何最大寬度限制 */
     margin: 1em 0;          /* 左右置中的 auto 在 100% 時不需使用，改為 0 */
}

    .sev_r1_flex_div {
        width: 100%;            /* 滿寬 */
        box-sizing: border-box; /* 關鍵：防止 padding 和右邊框把 100% 撐破撐爆 */
        border-right: none;     /* 手機版垂直排，建議取消右邊框 */
        border-bottom: solid 1px #FFF; /* 改為下邊框，區隔每一個按鈕 */
        justify-content: center; /* 確保文字在滿寬時依然水平置中 */
    }



.cont_r2-pic {
    width: 40%;
}

.tech_r2_picab {
	width: 90%;
	top: 0;
	right: -15%;
    transform: translate(0,0);
	z-index: 5;
}

.tech_r2_clock {
	display: block;
	position: absolute;
	width: 15%;
	height: auto;
	top: 22%;
	left: 56.8%;
    transform: translate(0%, 0%);
	z-index: 10;
}

    		.app-r1-c-row-le {
				align-items: flex-end;
        		width: 45%;
				order: 3;
    		}

    		.app-r1-c-row-ri {
				align-items: flex-start;
        		width: 45%;
				order: 4;
    		}

    		.app-r1-icon {
				margin: 1.5em 0 0.5em 0;
        		width: 180px;
    		}

    		.app-r1-blue {
        		position: relative;
				top: auto;
				left: auto;
				transform: translate(0%, 0%);
        		width: 100%;
				height: 120%;
				order: 2;
    		}

    		.app-r1-blue-white {
				margin: 1% auto;
				padding: 1em 3em 0 3em;
				width: 98%;
				height: 100%;
    		}


	    .equ_flex1-txt-flex {
			flex-direction: column;
			margin: 0 auto;
			width: 100%;
        }

		.equ_flex2-le {
			margin-bottom: 0em;
            padding-bottom: 0.5em;
		}

		.equ_flex2-lep2 {
			margin-bottom: 0em;
            padding-bottom: 0.5em;
		}

	        .equ_flex1-txt-flex-le, .equ_flex1-txt-flex-le1, .equ_flex1-txt-flex-le2 {
	            width: 100%;
				border-right: none;
				text-align: center;
				padding-bottom: 1em;
            }

			.equ_flex1-txt-flex-ri {
				align-items: center;
				text-align: center;
				border-top: solid 1px #000;
				padding-top: 1em;
				padding-left: 0.5em;
	            width: 100%;
            }

			.equ_flex1-txt-flex-ri-1 {
				align-items: center;
				text-align: center;
				padding-top: 1em;
				padding-left: 0.5em;
	            width: 100%;
            }

			.equ_flex1-txt-flex-row {
	            display: flex;
                position: relative;
				justify-content: center;
				align-items: center;
				text-align: center;
			    width: 100%;
				padding: 0 1em;
            }


	.app_aero1, .app_aero2, .app_aero3 {
		margin: 0 auto 1em auto;
   		position: relative;
		width: 70%;
		border-bottom: solid 1px #CCC;
	}


	.app_semi1, .app_semi2, .app_semi3, .app_semi4 {
		margin: 0 auto 1em auto;
   		position: relative;
		width: 70%;
		border-bottom: solid 1px #CCC;
	}

	.app_mach1, .app_mach2, .app_mach3, .app_mach4 {
		margin: 0 auto 1em auto;
   		position: relative;
		width: 70%;
		border-bottom: solid 1px #CCC;
	}

	.app_elec1, .app_elec2, .app_elec3 {
		margin: 0 auto 1em auto;
   		position: relative;
		width: 70%;
		border-bottom: solid 1px #CCC;
	}


/* area-setting */
    
/* Footer */


}

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

/* Basic */
    
/* header */	

/* banner */

/* Wrapper */

/* area-container */	

/* setting */

            .ind_r2_mm1 { 
                grid-template-columns: repeat(2, 48%); 
                width: 60%;
            }

            .ind_r2_mm2 { 
                grid-template-columns: repeat(2, 48%); 
                width: 60%;
            }

    .ind_r3-div-center {
	    padding: 0 3em 2em 3em;
        width: 500px;
		min-height: 500px;
		clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
    }

            .ind_r3_mm { 
                display: grid;
                position: relative;
                grid-template-columns: repeat(2, 48%); 
				place-items: center;
				justify-items: center; /* 水平置中 */
                align-items: center;   /* 垂直置中 */
                margin: 1.5em auto;
                width: 80%;
            }

                .ind_r3_mm > *:nth-child(3) {
                    grid-column: span 2;     /* 讓它橫跨 2 欄（占滿第二排） */
                    justify-self: center;    /* 讓它在第二排的空間裡「單獨水平置中」 */
                    width: 48%;              /* （選填）若希望它的寬度跟第一排的物件一樣大 */
                }

    .ind_r4_fri {
		padding: 1em 3em 0.5em 3em;
		width: 100%;
        background-image: none;
	    background: #86919b;
    }


.about_r3_line {
	position: absolute;
	top: 0;
	left: calc(50%);
	transform: translate(-50%, 80px);
    width: 0.37%;                          
    height: 75%;                       
    background: linear-gradient(to top, #0000ff, #0000ff); /* 漸層顏色 */

	opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}




.sev_r5_pic {
	flex-wrap: wrap;
	flex-direction: column;
	margin: 0 auto;
    width: 90%;
}

    .sev_r5_ab1, .sev_r5_ab2, .sev_r5_ab3, .sev_r5_ab4 {
		margin: 0.5em auto;
		float: left;
		padding: 1em;
		width: 90%;
		z-index: 11;
    }


.new_flex {
    flex-direction: column;
    margin: 1em auto 2em auto;
    width: 80%;
}

    .new_flex-div-le {
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		margin-bottom: 1em;
        width: 100%;
    }

    .new_flex-div-ri {
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		margin-bottom: 1em;
        width: 100%;
    }

		.new_flex-div-txt-row1 {
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 0;
			padding: 0 1em;
            width: 100%;
        }

	    .new_flex-div-txt-row2 {
			flex-direction: column;
			justify-content: center;
			align-items: center;
            width: 100%;
        }

	    .new_flex-div-pic {
            width: 100%;
			order: 1;
        }

	    .new_flex-div-txt {
	        flex-direction: column;
			justify-content: center;
			padding: 1em 1em 0 0;
            width: 100%;
			text-align: center;
			order: 2;
        }
    
	    .new_flex-div-txt-more {
			margin-left: 1em;
			justify-content: center;
            width: 100%;
        }


.detail_equ {
	flex-direction: column;
    margin: 4em auto;
    width: 100%;
}

    .detail_equ-img {
        width: 75%;
    }

    .detail_equ-div {
        width: 100%;
    }

 /* 電池積木 */

    /* 外層容器 */
    .battery-container {
        max-width: 100%; /* 您可以自由修改總寬度，或改為 max-width: 100% */
        margin: 1em auto;
    }

    /* 上方 div */
    .battery-terminals {
        height: 40px; /* 極端子的高度 */
        /* 使用負的 margin-bottom 將下方 div 往上吸，實現外框線條完美融合 */
        margin-bottom: -3px; 
    }

    /* 利用偽元素 ::before 和 ::after 畫出左、右兩個極端子 */
    .battery-terminals::before,
    .battery-terminals::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 55px;  /* 極端子的寬度 */
        height: 40px; /* 極端子的高度 */
        border: 3px solid #5cb3db; /* 藍色邊框 */
        border-bottom: none; /* 底部不畫線，與下方主體相通 */
        background-color: #fff; /* 必須填滿背景色，用來遮蓋下方 div 的頂部框線 */
        box-sizing: border-box;
    }

    /* 左邊極端子的位置（距離左側外框 50px） */
    .battery-terminals::before {
        left: 20px;
    }

    /* 右邊極端子的位置（距離右側外框 50px） */
    .battery-terminals::after {
        right: 20px;
    }

    /* 下方 div（主體外框） */
    .battery-body {
        width: 100%;
        min-height: 100px; /* 設定一個最小初始高度，沒內容時也不會扁掉 */
        height: auto;      /* 高度自動，隨內容延伸 */
        border: 3px solid #5cb3db; /* 藍色邊框 */
        padding: 1.5em 2em;     /* 內邊距，避免裡面的文字貼到藍色外框 */
    }

    /* 電池積木end */


.tech_r2_word {
	padding: 2em 4em;
    order: 2;
}
	

    /* 圓圈div 主容器：用來定位圓框與文字 */
    .material-container {
		display: flex;
        position: relative;
        justify-content: center;
		margin: 40px auto 40px auto;
		max-width: 500px;
		width: 100%;
        align-items: center;
        padding: 20px 0; /* 預留空間給背景的圓框 */
		z-index: 10;
    }

	.material-container1 {
		display: flex;
        position: relative;
        justify-content: center;
		margin: 18% auto 20px auto;
		max-width: 900px;
		width: 100%;
        align-items: center;
        padding: 40px 0; /* 預留空間給背景的圓框 */
		z-index: 10;
    }

    /* ====== 背景漸層圓框 (核心技巧) ====== */
    .circle-border {
		display: none;
        position: absolute;
        width: 300px;  /* 圓框寬度 */
        height: 300px; /* 圓框高度 */
    }


	.mat_icon1 {
		top: 55%;
	    left: 25%;
	    transform: translate(-50%, -50%);
		width: 80px;
	}

	.mat_icon2 {
		top: 55%;
	    left: 50%;
	    transform: translate(-50%, -50%);
		width: 80px;
	}

	.mat_icon3 {
		top: 55%;
	    left: 75%;
	    transform: translate(-50%, -50%);
		width: 80px;
	}



/* area-setting */



    
/* Footer */

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

		#footer .fre1 {
			flex-direction: column;
            padding: 1em 0 0 0;
			width: 100%;
	     }

		    #footer .fre1-div {
                margin-bottom: 1em;
			    width: 100%;
                flex: auto;
	         }

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

}



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

	.span1 {
	    display: inline-block;  /* 必須改為行內區塊，寬度才會生效 */
	    width: 8em;           /* 限制你的目標長度 */
	    text-align-last: justify; /* 達成最後一行（通常也是唯一一行）文字分散對齊 */
	    text-align: justify;    /* 傳統瀏覽器相容性支援 */
		white-space: nowrap;
		letter-spacing: 0;
	}

	.span1-1 {
	    display: inline-block;  /* 必須改為行內區塊，寬度才會生效 */
	    width: 6.5em;           /* 限制你的目標長度 */
	    text-align-last: justify; /* 達成最後一行（通常也是唯一一行）文字分散對齊 */
	    text-align: justify;    /* 傳統瀏覽器相容性支援 */
		letter-spacing: 0;
	}

	.span1-2 {
	    display: inline-block;  /* 必須改為行內區塊，寬度才會生效 */
	    width: 7.1em;           /* 限制你的目標長度 */
	    text-align-last: justify; /* 達成最後一行（通常也是唯一一行）文字分散對齊 */
	    text-align: justify;    /* 傳統瀏覽器相容性支援 */
		letter-spacing: 0;
	}

	.span2 {
	    display: inline-block;  
		margin: 0 auto;
	    width: 160px;           
	    text-align-last:center; 
	    text-align: center;
		white-space: nowrap;
		letter-spacing: 0;
	}

	.span2-1 {
	    display: inline-block;  
		margin-left: 0.25em;
	    width: 110px;           
	    text-align-last: left; 
	    text-align: left; 
		white-space: nowrap;
	}

	.span2-2 {
	    display: inline-block;  
		margin-left: 0.25em;
	    width: 95px;           
	    text-align-last: left; 
	    text-align: left; 
		white-space: nowrap;
	}




}


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

/* Basic */
    
/* header */	

/* banner */

/* Wrapper */

/* area-container */	

/* setting */

    .ind_r3-div-center {
	    padding: 0 3em 2em 3em;
        width: 500px;
		min-height: 500px;
		clip-path: polygon(100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
    }

            .ind_r3_mm { 
                display: grid;
                position: relative;
                grid-template-columns: repeat(1, 100%); 
				place-items: center;
				justify-items: center; /* 水平置中 */
                align-items: center;   /* 垂直置中 */
				justify-self: center;
                margin: 1.5em auto;
                width: 50%;
            }

                .ind_r3_mm > *:nth-child(3) {
                    grid-column: span 1;     /* 讓它橫跨 2 欄（占滿第二排） */
                    justify-self: center;    /* 讓它在第二排的空間裡「單獨水平置中」 */
                    width: 100%;              /* （選填）若希望它的寬度跟第一排的物件一樣大 */
                }

	    .ind_r6_3icon {
			justify-content: flex-start;
			align-items: center;
			flex-direction: column;
			margin: 15px auto;
		    width: 100%;
        }

	    	.ind_r6_3icon-div {
		    	width: 140px;
        	}

	    	.ind_r6_3icon-divpic img {
		    	width: 100%;
        	}

			.ind_r6_3icon-txt {
				padding: 5px 0;
		    	width: 100%;
				text-align: center;
       	 	}

	    	.ind_r6_3icon-divadd {
				justify-content: center;
				align-items: center;
				padding: 2em 0 0 0;
		    	width: auto;
				height: 50px;
				text-align: center;
       	 	}


        .about_r6_flexl_pic {
			flex-wrap: wrap;
            justify-content: center;
        } 

            .about_r6_flexl_pic_div { 
                display: block;
                position: relative;
				margin: 0 10px 10px 10px;
                width: 75%;
            }

	.material-container1 {
		display: flex;
        position: relative;
        justify-content: center;
		margin: 22% auto 20px auto;
		max-width: 900px;
		width: 100%;
        align-items: center;
        padding: 40px 0; /* 預留空間給背景的圓框 */
		z-index: 10;
    }



    	.sev_r3_flex-divlepic img {
            width: 80%;
        }


.detail_flex {
    margin: 2em auto;
    width: 100%;
}

        .detail_flex-icon {
            grid-template-columns: repeat(1, 100%); 
		    width: 100%;
        }

            .detail_flex-icon-div {
				margin-bottom: 1em;
            }

            .detail_flex-icon-div .detail_flex-icon-div-p-c {
                border-right: none;
            }
 
            .detail_flex-icon-div:nth-child(3) .detail_flex-icon-div-p-c {
                border-right: none;
            }


.fu_flex {
	flex-direction: column;
    flex-wrap: wrap;
}

    .fu_flex-div1 {
		margin: 0 auto 3em auto;
	    width: 95%;
    }

    .fu_flex-div2 {
		margin: 0 auto 3em auto;
	    width: 95%;
    }

    .fu_flex-div3 {
		margin: 0 auto 3em auto;
	    width: 95%;
    }
		

    .mlaser-line {
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
        width: 4px; /* 線條粗細 */
        height: 120%; /* 線條高度，可自行調整 */
    }

	
    .hlaser-hline {
	    display: none;
    }

	.mat_icon1 {
		display: none;
	}

	.mat_icon2 {
		display: none;
	}

	.mat_icon3 {
		display: none;
	}



    .dpad-container {
        position: none;
    }

    		.app-r1-c-row-le {
				align-items: flex-end;
        		width: 50%;
				order: 3;
    		}

    		.app-r1-c-row-ri {
				align-items: flex-start;
        		width: 50%;
				order: 4;
    		}

    		.app-r1-icon {
				margin: 1.5em 0 0.5em 0;
        		width: 150px;
    		}

    
/* area-setting */
    
/* Footer */


}



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

	.span2-2 {
	    display: inline-block;  
		margin-left: 0.25em;
	    width: auto;           
	    text-align-last: center; 
	    text-align: center; 
		white-space: nowrap;
	}
}



/*-------------滑鼠.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;
}