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

/* Reset */

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

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

	body {
		line-height: 1;
		margin: 0; 
		padding: 0;
        -webkit-text-size-adjust: none;
        overflow-x: hidden;
	}

	ol, ul {
		list-style: none;
	}

	blockquote, q {
		quotes: none;
	}

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

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


/* Box Model */

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


/* Basic */

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

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

	body, input, select, textarea {
		font-family: "Arial", "微軟正黑體", sans-serif, serif;
		color: #000;
		font-size: 1em;
		letter-spacing: 0.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;
	}

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

	strong, b {
		font-weight: 400;
	}

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

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

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

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

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

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

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

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


/* header */

	#header {
		display: block;
		position: absolute;
		padding: 1.5em 0 0 0;
		background: ;
		width: 100%;
		height: auto;
		overflow: hidden;
		border: 0;
		z-index: 1000;
		overflow-x: hidden;
		
		-moz-animation-name: nnav;
		-moz-animation-duration: 1s;
		-moz-animation-iteration-count: 1;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: nnav;
		-webkit-animation-duration: 1s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: nnav;
		-ms-animation-duration: 1s;
		-ms-animation-iteration-count: 1;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: nnav;
		-o-animation-duration: 1s;
		-o-animation-iteration-count: 1;
		-o-animation-fill-mode: forwards;
		animation-name: nnav;
		animation-duration: 1s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;		
	}

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

		#header nav {
			display: flex;
			position: relative;
			justify-content: flex-end;
			align-items: center;
            margin: auto;
			width: 100%;
			height: 60px;
            border-radius: 60px;
            background: rgba(255,255,255,0.5);
			z-index: 98;
		}


			#header nav ul li {
                display: flex;
                float: left;
                justify-content: center;
                align-items: center;
                margin: 0 15px;
				font-size: 1.2em;
				text-align: center;
                height: 40px;
			}

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

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

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

			    #header nav ul li:last-child {
                    background: #FFF;
                    border-radius: 50px;
                    margin-right: 1.5em;
			    }

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

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

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

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

					.navlogo {
						display: flex;
                        position: absolute;
                        left: 1%;
                        justify-content: center;
                        align-items: center;
                        padding-top: 7px;
						width: 160px;
					}

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


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

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

					   .len_txt:hover {
                           color: #C43932;
					   }

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


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

				#header nav ul li.submenu1 {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
                    padding: 0 10px;
					width: auto;
                    background: #21487F;
                    color: #FFF;
                    border-radius: 50px;
				}

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

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

				#header nav ul li.current1 {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
                    padding: 0 10px;
					width: auto;
                    background: #21487F;
                    color: #FFF;
                    border-radius: 50px;
				}


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

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

				#header nav ul li.active, #header nav ul li:hover {
                    background: #2855A5;
                    color: #FFF;
                    border-radius: 50px;
					-moz-transition: all 0.2s ease-in-out;
					-webkit-transition: all 0.2s ease-in-out;
					-ms-transition: all 0.2s ease-in-out;
					transition: all 0.2s ease-in-out;
				}


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

				#header nav ul li:first-child:hover.active, #header nav ul li:first-child:hover:hover {
                    background: none;
					-moz-transition: all 0.2s ease-in-out;
					-webkit-transition: all 0.2s ease-in-out;
					-ms-transition: all 0.2s ease-in-out;
					transition: all 0.2s ease-in-out;
				}


				#header nav ul li:last-child:hover.active, #header nav ul li:last-child:hover:hover {
                    background: #FFF;
				}


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

		#header.alt {
			-moz-animation: none;
			-webkit-animation: none;
			-ms-animation: none;
			animation: none;
			box-shadow: none;
			position: relative;
		    width: 100%;	
		}

			#header.alt nav {
				position: relative;
			}

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


	.len_m {
	    display: none;
	}


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

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

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

	        .len1 a {
			    color: #FFFFFF;
	        }

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


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

	        .len2 a {
			    color: #5BBC2B;
	        }

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


	.mlogo {
	    display: none;
	}



/* Dropotron 選單子層 */

	.dropotron {
		display: block;
		background: #FFF;
		box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5);
		line-height: 2.25em;
		min-width: 7em;
		text-transform: none;
		/*margin-top: calc(-1em + 1px);*/
		border-left: solid 4px #2855A5;
		z-index: 999999;
	}

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

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

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

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

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

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

			}




/* Banner */

	.banner {
		display: block;
		position: relative;
		margin: 0 auto;
		padding: 0;
		width: 100%;
		height: auto;
		/*background-color: rgba(0,128,189,0.2);*/
		background-color: rgba(0,128,189,0.5);
	}

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

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

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


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

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

		    .bannerli1 {
		       display: block;
			    position: relative;
		        width: 100%;
		        height: auto;
                z-index: 1;
                
			    -moz-animation-name: bsli1;
			    -moz-animation-duration: 4s;
			    -moz-animation-iteration-count: 4;
			    -moz-animation-fill-mode: forwards;
			    -webkit-animation-name: bsli1;
			    -webkit-animation-duration: 4s;
			    -webkit-animation-iteration-count: 1;
			    -webkit-animation-fill-mode: forwards;
			    -ms-animation-name: bsli1;
			    -ms-animation-duration: 4s;
			    -ms-animation-iteration-count: 1;
			    -ms-animation-fill-mode: forwards;
			    -o-animation-name: bsli1;
			    -o-animation-duration: 4s;
			    -o-animation-iteration-count: 1;
			    -o-animation-fill-mode: forwards;
			    animation-name: bsli1;
			    animation-duration: 4s;
			    animation-iteration-count: 1;
			    animation-fill-mode: forwards;	 
		    }

		    @keyframes bsli1 {
			    0%   {top: 0; opacity: 0;}
			    15%  {top: 0; opacity: 1;}
		    }


		    .bannerli2 {
		       display: block;
			    position: absolute;
		        width: 100%;
		        height: auto;
                z-index: 10;
                
			    -moz-animation-name: bsli2;
			    -moz-animation-duration: 4s;
			    -moz-animation-iteration-count: 4;
			    -moz-animation-fill-mode: forwards;
			    -webkit-animation-name: bsli2;
			    -webkit-animation-duration: 4s;
			    -webkit-animation-iteration-count: 1;
			    -webkit-animation-fill-mode: forwards;
			    -ms-animation-name: bsli2;
			    -ms-animation-duration: 4s;
			    -ms-animation-iteration-count: 1;
			    -ms-animation-fill-mode: forwards;
			    -o-animation-name: bsli2;
			    -o-animation-duration: 4s;
			    -o-animation-iteration-count: 1;
			    -o-animation-fill-mode: forwards;
			    animation-name: bsli2;
			    animation-duration: 4s;
			    animation-iteration-count: 1;
			    animation-fill-mode: forwards;	 
		    }

		    @keyframes bsli2 {
			     0%  {top: 0; opacity: 0;}
			    20%  {top: 0; opacity: 0;}
			    35%  {top: 0; opacity: 1;}
		    }


		    .bannerli3 {
		       display: block;
			    position: absolute;
		        width: 100%;
		        height: auto;
                z-index: 30;
                
			    -moz-animation-name: bsli3;
			    -moz-animation-duration: 4s;
			    -moz-animation-iteration-count: 4;
			    -moz-animation-fill-mode: forwards;
			    -webkit-animation-name: bsli3;
			    -webkit-animation-duration: 4s;
			    -webkit-animation-iteration-count: 1;
			    -webkit-animation-fill-mode: forwards;
			    -ms-animation-name: bsli3;
			    -ms-animation-duration: 4s;
			    -ms-animation-iteration-count: 1;
			    -ms-animation-fill-mode: forwards;
			    -o-animation-name: bsli3;
			    -o-animation-duration: 4s;
			    -o-animation-iteration-count: 1;
			    -o-animation-fill-mode: forwards;
			    animation-name: bsli3;
			    animation-duration: 4s;
			    animation-iteration-count: 1;
			    animation-fill-mode: forwards;	 
		    }

		    @keyframes bsli3 {
			     0%  {top: 0; opacity: 0;}
			    40%  {top: 0; opacity: 0;}
			    55%  {top: 0; opacity: 1;}
		    }


		    .bannerli4 {
		       display: block;
			    position: absolute;
		        width: 100%;
		        height: auto;
                z-index: 50;
                
			    -moz-animation-name: bsli4;
			    -moz-animation-duration: 4s;
			    -moz-animation-iteration-count: 4;
			    -moz-animation-fill-mode: forwards;
			    -webkit-animation-name: bsli4;
			    -webkit-animation-duration: 4s;
			    -webkit-animation-iteration-count: 1;
			    -webkit-animation-fill-mode: forwards;
			    -ms-animation-name: bsli4;
			    -ms-animation-duration: 4s;
			    -ms-animation-iteration-count: 1;
			    -ms-animation-fill-mode: forwards;
			    -o-animation-name: bsli4;
			    -o-animation-duration: 4s;
			    -o-animation-iteration-count: 1;
			    -o-animation-fill-mode: forwards;
			    animation-name: bsli4;
			    animation-duration: 4s;
			    animation-iteration-count: 1;
			    animation-fill-mode: forwards;	 
		    }

		    @keyframes bsli4 {
			     0%  {top: 0; opacity: 0;}
			    60%  {top: 0; opacity: 0;}
			    70%  {top: 0; opacity: 1;}
		    }


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

		    @keyframes bsli_txt {
			     0%   {opacity: 0; }
			    75%   {opacity: 0; }
			    95%   {opacity: 1; }
			    100%  {opacity: 1; }
		    }


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

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

		    .bannersub_txt {
		        display: block;
			    position: absolute;
                width: 28%;
                left: 1%;
                top: 55%;
                transform: translate(0%, -50%);
                z-index: 10;
		    }


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

	    .path a {
		    color: #FFF;
	    }

	    .path a:hover {
		    color: #2855A5;
	    }


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



/* Wrapper */

	.wrapper {
		position: relative;
	}

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

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

		.wrapper.style3 {  
			display: block;
			margin: 0 auto;
			width: 100%;
			background: ;
			background-image: url("../../images/pic_indqc_bg.png");
			background-repeat: no-repeat;
			background-position: top right;
			background-size: cover;
		}

		.wrapper.style4 {  
			display: block;
			margin: 0 auto;
			width: 100%;
			background: ;
			background-image: url("../../images/pic_abus_bg.png");
			background-repeat: no-repeat;
			background-position: top center;
			background-size: 100%;
		}



/* area-container */

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

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

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

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

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

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

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


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


/* setting */
    

    /*-- 首頁slick設定 --*/
	.instorslick {
		display: flex;
		flex-direction: column;
		position: relative;
		align-items: stretch;
		margin: -40px auto 20px auto;
		width: 100%;
        z-index: 100;
	}

	    .instorslick-r1 {
		    display: inline-block;
            margin: 0 auto 2em auto;
		    width: 100%;
            padding: 0 1em;
	    }

	        .instorslick-r1-div {
		        display: flex;
                position: relative;
                justify-content: center;
                align-items: center;
                margin: 0;
                padding: 1.5em 2em;
                border-radius: 10px;
                background-color: #f2f2f2;
		        width: auto;
                text-align: center;
	        }

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

	        .instorslick-pic-b {
		        display: block;
		        width: 42%;
	        }

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

	        .instorslick-txt {
		        display: flex;
				justify-content: space-between;
				align-items: flex-start;
				flex-wrap: wrap;
		        width: 57%;
	        }

	        .instorslick-bt {
		        display: block;
                position: relative;
				margin-bottom: 1em;
				padding: 0;
		        width: 18%;
                border-radius: 10px;
				cursor: pointer;
	        }

	            .instorslick-bt img {
	                position: absolute;
                    left: 0;
                    width: 100%;
                    border-radius: 10px;
	            }

	            .instorslick-bt:first-child img.top {
				    opacity: 0;
	            }

	            .instorslick-bt:hover img.top {
	                opacity: 0;
	            }



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

	.indproCarousel {
		display: block;
		position: relative;
		align-items: stretch;
		margin: 1em auto 0 auto;
		width: 100%;
	}

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

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

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

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

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

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

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

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

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

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

	    .carousel_card_proname {
		    display: block;
            position: absolute;
            top: 66%;
            left: 50%;
            transform: translate(-50%, 0);
		    width: auto;
            writing-mode: vertical-rl;
            writing-mode: tb-rl;
            letter-spacing: 2px;
            z-index: 20;
	    }

	    .carousel_card_bg1 {
		    display: block;
            position: relative;
		    width: 100%;
            background-image: url("../../images/p_indflex_bg1-1.png");
            background-position: center bottom;
            background-size: 100%;
            background-repeat: no-repeat;
	    }

	    .carousel_card_bg2 {
		    display: block;
            position: relative;
		    width: 100%;
            background-image: url("../../images/p_indflex_bg2-1.png");
            background-position: center bottom;
            background-size: 100%;
            background-repeat: no-repeat;
	    }

	        .carousel_card_bg1 img, .carousel_card_bg2 img {
                position: relative;
                left: 0;
		        display: block;
		        width: 100%;
	        }


	    .carousel_card:hover .carousel_card_bg1 img.top {
	        opacity: 0;
	    }

	    .carousel_card:hover .carousel_card_proname {
	        color: #FFF;
	    }

	    .carousel_card:hover .carousel_card_bg2 img.top {
	        opacity: 0;
	    }


.f-parallax {
	display: block;
	width: 100%;
	height: 100%;
}

.f-parallax img {
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-left: calc(var(--f-progress2, 0%) - 1px);
  transform: translateX(calc(var(--f-progress1, 0%)));
}






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

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

	    .indsolution-c {
		    display: block;
            position: absolute;
		    margin: 0 auto;
            top: 5%;
		    width: 100%;
            z-index: 10;
	    }

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

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

	    .indsolution1-distxt {
		    display: none;
            position: relative;
            width: 100%;
	   }


	    .indsolution1-c {
		    display: block;
            position: absolute;
		    margin: 0 auto;
            bottom: 5%;
		    width: 100%;
            z-index: 10;
	    }



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

	    .indsolution2 img {
		    display: block;
            position: relative;
            margin-bottom: 0.5em;
            width: 100%;
	   }


	.indsolution2-c {
		display: block;
        position: absolute;
		margin: 0 auto;
        top: 2%;
		width: 100%;
        z-index: 1;
	}


	    .indsolution_tt {
		    display: block;
            position: relative;
            margin: 1.5em auto 0 auto;
            width: 60%;
            text-align: center;
	    }

	    .indsolution_txt {
		    display: block;
            position: relative;
            margin: 1em auto;
            width: 45%;
            text-align: center;
            text-shadow: 2px 2px 2px #333;
	    }

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

    
    /* 專業製造 特點 */
	.indsolution-eveadv {
		display: none;
	}


    /* 品質 */
 	.indqc {
		display: flex;
        position: relative;
        justify-content: flex-start;
        align-items: stretch;
        margin: 1em auto 0.5em auto;
        padding: 1em 0;
        width: 100%;
        min-height: 300px;
	}
    
    
 		.indqc_div1 {
			display: flex;
            position: relative;
            flex-direction: column;
        	justify-content: flex-start;
            padding: 1em 0;
            width: 40%;
		}

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

 				.indqc_div1-c-flex-div {
					display: flex;
           			position: relative;
        			justify-content: center;
                    align-items: center;
                    text-align: center;
           	    	width: 22%;
                    color: #2855A5;
                    border-bottom: 7px solid;
                    border-image: linear-gradient(to right, rgba(40, 85, 165, 0) 20%, rgba(40, 85, 165, 1) 100%) 2;
				}


 		.indqc_div2 {
			display: flex;
            position: absolute;
        	justify-content: center;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 33%;
		}
    
 			.indqc_div2 img {
				display: block;
            	position: relative;
            	width: 100%;
                z-index: 10;
			}
    
 			.indqc_line {
				display: block;
            	position: absolute;
            	width: 2px;
                height: 60px;
                background: #2855A5;
                top: 0%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 1;
			}


    /* index 3flex */
 	.ind3flex {
		display: flex;
        position: relative;
        justify-content: flex-start;
        align-items: stretch;
        margin: 0.5em auto;
        width: 100%;
	}

 	    .ind3flex-div {
            display: flex;
			position: relative;
			width: 33.33%;
			height: 100%;
			float: left;
			overflow: hidden;
			text-align: center;
			cursor: default;
            border-right: solid 0.5px #FFF;
		}

 	    .ind3flex-div:last-child {
            border-right: none;
		}

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

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

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

			.ind3flex-div .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;
			}

			.ind3flex-divab {
				display: block;
				position: absolute;
				overflow: hidden;
                margin: 0.25em 0 0 0;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #FFF;
			}


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

 		.apl1sflex-div {
			display: inline-block;
        	position: relative;
            margin: 0 1em 1em 1em;
        	width: auto;
            border-bottom: solid 2px #2855A5;
		}

 		    .apl1sflex-div:hover {
			    color: #c43932;
                border-bottom: solid 2px #c43932;
		    }

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

 		    .apl1sflex-div a:hover {
			    color: #c43932;
		    }


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

 	    .apl1s_le1 {
		    display: flex;
            position: relative;
            justify-content: center;
            align-items: flex-start;
            width: 50%;
	    }

 	    .apl1s_le2 {
		    display: flex;
            position: relative;
            justify-content: center;
            align-items: flex-start;
            width: 50%;
	    }

 	    .apl1s_ri1 {
		    display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            padding: 0 0 1em 7%;
            width: 50%;
            background-image: url("../../images/pic_apl_pic_s1.png");
            background-position: center top;
            background-repeat: no-repeat;
            background-size: 120%;
	    }

 	    .apl1s_ri2 {
		    display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-end;
            padding: 0 7% 1em 1em;
            width: 50%;
            background-image: url("../../images/pic_apl_pic_s2.png");
            background-position: center top;
            background-repeat: no-repeat;
            background-size: 120%;
	    }

 	        .apl1s_le1 img, .apl1s_le2 img, .apl1s_ri1 img, .apl1s_ri2 img {
		        display: block;
                width: 120%;
	        }

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

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

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

 	        .apl1s_icon1 img, .apl1s_icon2 img, .apl1s_word_transspce img {
		        display: block;
                width: 120%;
	        }

 	        .apl1s_word1 {
		        display: flex;
                position: absolute;
                justify-content: flex-end;
                align-items: flex-end;
                flex-direction: column;
                bottom: 2%;
                left: 0%;
                transform: translate(0, 0);
                width: 75%;
                height: 37%;
	        }

 	        .apl1s_word1-2 {
		        display: flex;
                position: absolute;
                justify-content: flex-end;
                align-items: flex-end;
                flex-direction: column;
                bottom: 2%;
                right: 0;
                transform: translate(0, 0);
                width: 75%;
                height: 37%;
	        }

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

 	            .apl1s_txt {
		            display: block;
                    position: relative;
                    width: 100%;
                    margin-bottom: 1em;
	           }

 	        .apl1s_word2 {
		        display: flex;
                position: relative;
                justify-content: flex-end;
                align-items: flex-end;
                flex-direction: column;
                margin-top: 1%;
                width: 75%;
	        }

 	        .apl1s_word2-1 {
		        display: flex;
                position: relative;
                justify-content: flex-end;
                align-items: flex-end;
                flex-direction: column;
                margin-top: 2%;
                width: 75%;
	        }


 	.aboutarea {
		display: block;
        background-image: url("../../images/pic_abus_bg.png");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 110%;
        width: 100%;
        padding: 1em 0 3em 0;
	}

 	.about_pic1 {
		display: block;
        position: relative;
        margin: 0 auto;
        width: 50%;
        height: auto;
	}

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

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

 	    .about_pic1 img, .about_pic1-ab {
		    display: block;
            width: 100%;
            height: auto;
	    }


 	.about_textarea {
		display: block;
        margin: 0 auto;
        width: 65%;
        height: auto;
	}


 	.aboutarea2 {
		display: block;
        background: #F2F2F2;
        width: 100%;
        padding: 1em 0;
	}

 		.about_2nflex {
			display: flex;
        	justify-content: center;
        	align-items: stretch;
        	margin: 2em auto;
       		width: 100%;
       		height: auto;
		}

 		    .about_2nflex-div {
                display: flex;
 		        position: relative;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin: 0 10px;
 		        padding: 5em 0;
                width: 14%;
                background: linear-gradient(to top, #ccc 0%, #fff 55%);
                border-radius: 200px;
                box-shadow: 0 0 10px #CCC;
 		        &::before {
   		            content: "";
   		            position: absolute;
    		        inset: 0;
    		        border-width: 3px;
    		        border-style: solid;
     		        border-color: transparent;
     		        border-radius: 200px;
     		        background-image: linear-gradient(to top, #2855a5, #fff, #2855a5);
     		        background-origin: border-box;
    		        mask-image: linear-gradient(white, white), linear-gradient(white, white);
    		        mask-clip: padding-box, border-box;
    		        mask-composite: exclude, add;
   		        }
 		    }

 		    .about_2nflex-div-pic {
				display: block;
                position: relative;
        		width: 60%;
                margin: 0 0 1em 0;
			}

 		    	.about_2nflex-div-pic img {
					display: block;
                	position: relative;
                    margin: 0 auto;
        			width: 100%;
				}

 		    .about_2nflex-div-word {
				display: flex;
                position: relative;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                margin: 0 auto;
                padding: 0 1em;
        		width: 90%;
                text-align: center;
			}

 		    	.about_2nflex-div-w-t {
					display: inline-block;
                	position: relative;
                    margin: 0 auto 15px auto;
                    padding: 0 0 5px 0;
        			width: auto;
                    text-align: center;
                    border-bottom: solid 1px #2855a5;
				}


  	.pocessarea1 {
		display: block;
        background-image: url("../../images/pic_pocess_bg1.jpg");
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100%;
        width: 100%;
	}
    
   	.pocessarea2 {
		display: block;
        background-image: url("../../images/pic_pocess_bg2.jpg");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100%;
        width: 100%;
	}
    
  	.pocessaw {
		display: block;
        position: relative;
        margin: 3em auto 0 auto;
        width: 52%;
	}

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

  	.pocessriteline {
		display: block;
        position: relative;
        margin: 0 auto;
        width: 4px;
        height: 80px;
        background: #2855a5;
	}

	.pocess_4flex {  
        display: flex;
		position: relative;
        justify-content: space-between;
        align-items: center;
        margin: 2em auto;
        width: 90%;
	}

	    .pocess_4flex-d1 {  
            display: flex;
		    position: relative;
            justify-content: space-between;
            align-items: center;
            width: 22%;
	    }

	        .pocess_4flex-d1 img {  
                display: flex;
		        position: relative;
                width: 100%;
	        }

	    .pocess_4flex-d2 {  
            display: flex;
		    position: relative;
            justify-content: space-between;
            align-items: center;
            margin: 0 10px;
            width: 22px;
	    }

	        .pocess_4flex-d2::before {  
                content: "";
                position: absolute;
                width: 22px;
                height: 30px;
                background: #CCC;
                clip-path: polygon(100% 50%, 0 0, 0 100%);
	        }

	    .pocess_4flex-d2-1 {  
            display: none;
	    }


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

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

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

		    @keyframes air1 {
			     0%   {left: 52%; opacity: 0; }
			    10%   {left: 50%; opacity: 1; }
			    80%   {opacity: 1; }
			    90%   {opacity: 0; }
			    100%  {opacity: 0; }
		    }


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

		    @keyframes air2 {
			     0%   {opacity: 0; }
			    10%   {left: 52%; opacity: 0; }
			    20%   {left: 50%; opacity: 1; }
			    80%   {opacity: 1; }
			    90%   {opacity: 0; }
			    100%  {opacity: 0; }
		    }

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

		    @keyframes air3 {
			     0%   {opacity: 0; }
			    20%   {left: 52%; opacity: 0; }
			    30%   {left: 50%;opacity: 1; }
			    80%   {opacity: 1; }
			    90%   {opacity: 0; }
			    100%  {opacity: 0; }
		    }


	.pocess_note {  
        display: flex;
		position: relative;
        justify-content: center;
        align-items: center;
        margin: 4em 0 0 0;
        padding: 2em 1em;
		width: 100%;
        border-top: solid 1px #bdbdbd;
	}

	.pocess_note_flex {  
        display: flex;
		position: relative;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
        padding: 0;
		width: 100%;
	}

	    .pocess_note_flex-div {  
            display: flex;
		    position: relative;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding: 2em 1em;
		    width: 33%;
            border-top: solid 1px #bdbdbd;
            border-right: solid 1px #bdbdbd;
	    }

	        .pocess_note_flex-div:nth-child(3) {  
                border-right: none;
	        }

	        .pocess_note_flex-div:nth-child(6) {  
                border-right: none;
	        }

	    .pocess_note_icon1 {  
            display: block;
            position: relative;
            margin-right: 20px;
		    width: 10%;
            border: solid 1px #dcdcdc;
            border-radius: 20%;
	    }

	    .pocess_note_icon2 {  
            display: block;
            position: relative;
            margin: 0 auto;
		    width: 30%;
            border: solid 1px #dcdcdc;
            border-radius: 20%;
	    }

	        .pocess_note_icon1 img, .pocess_note_icon2 img {  
                display: block;
                position: relative;
		        width: 100%;
	        }

	    .pocess_note_word1 {  
            display: block;
            position: relative;
            margin: 1em 0;
		    width: 60%;
	    }

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

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


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

	    .qc_flex-div-L1 {  
            display: flex;
		    position: relative;
            justify-content: flex-end;
            align-items: center;
            margin: 0 0 1.5em 0;
		    width: 50%;
            background: #f2f2f2;
	    }

	        .qc_flex-div-L1::after {  
                content: "";
                position: absolute;
                left: 100%;
                width: 4%;
                height: 30%;
                background: #F2F2F2;
                clip-path: polygon(100% 50%, 0 0, 0 100%);
                z-index: 5;
	        }

	        .qc_flex-div-L1::before {  
                content: "";
                position: absolute;
                left: 100%;
                width: 2%;
                height: 15%;
                background: #2855A5;
                clip-path: polygon(100% 50%, 0 0, 0 100%);
                z-index: 10;
	        }

	        .qc_flex-div-L1-abup {  
                position: absolute;
                right: 0;
                top: 0;
                width: 3%;
                height: 8%;
                background: #FFF;
                clip-path: polygon(0 0, 100% 100%, 100% 0);
                z-index: 2;
	        }

	        .qc_flex-div-L1-abdbm {  
                position: absolute;
                right: 0;
                bottom: 0;
                width: 3%;
                height: 8%;
                background: #FFF;
                clip-path: polygon(100% 0, 0% 100%, 100% 100%);
                z-index: 2;
	        }


	    .qc_flex-div-R1 {  
            display: flex;
		    position: relative;
            justify-content: flex-start;
            align-items: center;
            margin: 0 0 1.5em 0;
            padding-left: 4%;
		    width: 50%;
	    }

	    .qc_flex-div-L2 {  
            display: flex;
		    position: relative;
            justify-content: flex-end;
            align-items: center;
            margin: 0 0 1.5em 0;
            padding-right: 4%;
		    width: 50%;
	    }

	    .qc_flex-div-R2 {  
            display: flex;
		    position: relative;
            justify-content: flex-start;
            align-items: center;
            margin: 0 0 1.5em 0;
		    width: 50%;
            background: #F2F2F2;
	    }

	        .qc_flex-div-R2::after {  
                content: "";
                position: absolute;
                left: -4%;
                width: 4%;
                height: 30%;
                background: #F2F2F2;
                clip-path: polygon(100% 0%, 100% 100%, 0 50%);
                z-index: 5;
	        }

	        .qc_flex-div-R2::before {  
                content: "";
                position: absolute;
                left: -2%;
                width: 2%;
                height: 15%;
                background: #2855A5;
                clip-path: polygon(100% 0%, 100% 100%, 0 50%);
                z-index: 10;
	        }

	        .qc_flex-div-R2-abup {  
                position: absolute;
                top: 0;
                left: 0;
                width: 3%;
                height: 8%;
                background: #FFF;
                clip-path: polygon(100% 0, 0 0, 0 100%);
                z-index: 2;
	        }

	        .qc_flex-div-R2-abbm {  
                position: absolute;
                bottom: 0;
                left: 0;
                width: 3%;
                height: 8%;
                background: #FFF;
                clip-path: polygon(100% 100%, 0 0, 0 100%);
                z-index: 2;
	        }

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

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

	         .qc-div-word-title {  
                 display: inline-block;
		         position: relative;
		         width: auto;
                 margin-bottom: 1em;
                 padding: 0.35em 2em;
                 border-top: solid 1.5px #2855a5;
                 border-bottom: solid 1.5px #2855a5;
	         }

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


	.kno_title {  
        display: inline-flex;
		position: relative;
        justify-content: center;
        align-items: center;
        background: #2855A5;
        margin: 0 auto;
		min-width: 25%;
        padding: 0.35em 1.5em;
        min-height: 50px;
        border-radius: 50px;
	}

	    .kno_title_word {  
            display: flex;
		    position: relative;
            justify-content: flex-start;
            align-items: center;
            width: auto;
            text-align: left;
	    }

	        .kno_title_word::before {
                content: ''; 
                display: inline-block;
                margin-right: 5px;
                width: 38px; 
                height: 38px; 
                background-image: url("../../images/pic_kno_tticon.png");
                background-size: 100%;
                background-repeat: no-repeat;
	        }


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

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

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

	    .kno_box_picab2 {  
            display: block;
		    position: absolute;
            top: 15%;
		    width: 100%;
            z-index: 10;
	    }

	    .kno_box_pic_txt {  
            display: block;
		    position: relative;
            margin: 0 auto;
            width: 90%;
            text-shadow: 2px 2px 5px #FFF;
	    }


	.kno_box {  
        display: block;
		position: relative;
        justify-content: center;
        align-items: center;
        background: #2855A5;
        margin: 8% auto;
        padding: 2em 0;
		width: 100%;
        background: #f2f2f2;
	}

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

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

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

	        .kno_box_f1-d1 {  
                display: flex;
		        position: relative;
                flex-direction: column;
                justify-content: flex-start;
                align-items: stretch;
		        width: 16%;
	        }

	        .kno_box_f1-d2 {  
                display: flex;
		        position: relative;
                justify-content: space-between;
                align-items: flex-start;
		        width: 3.85%;
	        }

	            .kno_box_f1-d1 img, .kno_box_f1-d2 img {  
                    display: block;
		            position: relative;
		            width: 100%;
	            }

	            .kno_box_f1-d1-txt {  
                    display: block;
		            position: relative;
                    justify-content: space-between;
                    align-items: stretch;
		            width: 100%;
                    margin: 1em 0 0 0;
                    padding: 1em 0 0 0;
                    border-top: solid 1.5px #bdbdbd;
                    text-align: center;
	            }


	        .talk_border {
                display: block;
                position: relative;
                margin: 0 auto;
                padding: 0.25em 0;
	        	width: auto;
                height: auto;
                border-bottom: solid 2px #bdbdbd;
                text-align: center;
	        }

	            .talk_border::before {
                    content:"";
                    position: absolute;
                    top: 90%;
                    left: 50%;
                    transform: translate(-50%, 0);
	        	    width: 30px;
                    height: 18px;
                    background: #f2f2f2;
                    clip-path: polygon(100% 0, 0 0, 55% 100%);
                    z-index: 5;
	            }

	            .talk_border::after {
                    content:"";
                    position: absolute;
                    top: 100%;
                    left: 50%;
                    transform: translate(-50%, 0);
	        	    width: 30px;
                    height: 18px;
                    background: #bdbdbd;
                    clip-path: polygon(100% 0, 0 0, 55% 100%);
                    z-index: 1;
	            }

	        .kno_talk_flex {
                display: flex;
                position: relative;
                justify-content: space-between;
                align-items: flex-start;
                margin: 2em auto 1em auto;
                width: 80%;
	        }

	            .kno_talk_flex-div {
                    display: flex;
                    position: relative;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: flex-start;
                    padding: 0.2em 1em;
                    width: 49%;
	            }

	            .kno_talk_flex-div-list {
                    display: inline-block;
                    position: relative;
                    width: 100%;
                    padding-left: 1.15em;
                    text-indent: -1.15em;
	            }


	        .kno_gray_box_pic {
                display: block;
                width: 100%;
	        }

	            .kno_gray_box_pic img {
                    display: block;
                    margin: 0 auto;
                    width: 100%;
	            }

	        .kno_gray_box_spc {
                display: block;
                width: 100%;
                overflow: auto;
	        }

	            .kno_gray_box_spc img {
                    display: block;
                    margin: 0 auto;
                    width: 860px;
	            }



	        .kno_gray_box_gam {
                display: none;
	        }


	.QA { 
        display: block;
        position: relative; 
        width: 100%;
        border-bottom: solid 1px #CCC;
    }

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

        .qa-title { 
            display: flex;
            position: relative;
            justify-content: flex-start;
            align-items: center;
            padding: 0.55em 20px 0.5em 40px;
            width: 100%;
            min-height: 50px;
            border-top: solid 1px #CCC;
            cursor: pointer; 
         }

            .qa-title::before { 
                content: 'Q'; 
                position: absolute; 
                left: 0; 
                display: flex;
                justify-content: center;
                align-items: center;
                width: 30px;
                height: 30px;
                background: #484848;
                border-radius: 40px;
                text-align: center;
                color: #FFF;
            }

            .qa-title::after { 
                content: '+'; 
                position: absolute; 
                left: 98%; 
            }

            .qa-title.active::after { 
                content: '-'; /* 展開時變減號 */
            } 

            .qa-content { 
                display: none; /* 預設隱藏 */
                justify-content: flex-start;
                align-items: center;
                padding: 0 0 0.7em 40px;
                background: #FFF;
            } 

                .qa-content::before { 
                    content: 'A'; 
                    position: absolute; 
                    left: 0; 
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 30px;
                    height: 30px;
                    background: #2855a5;
                    border-radius: 40px;
                    text-align: center;
                    color: #FFF;
                }


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

	    .news_kflex-div { 
            display: flex;
            position: relative; 
            justify-content: center;
            align-items: center;
            margin: 0 1em;
            padding-bottom: 0.2em;
            width: auto;
            border-bottom: solid 2px #2855A5;
        }

 		    .news_kflex-div:hover {
			    color: #c43932;
                border-bottom: solid 2px #c43932;
		    }

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

 		    .news_kflex-div a:hover {
			    color: #c43932;
		    }

 		 .news_kflex-div1 {
            display: flex;
            position: relative; 
            justify-content: center;
            align-items: center;
            margin: 0 1em;
            padding-bottom: 0.2em;
            width: auto;
			color: #c43932;
            border-bottom: solid 2px #c43932;
		  }


	.news_show { 
        display: flex;
        position: relative; 
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        margin: 4em auto 3em auto;
        width: 100%;
        border-bottom: solid 0.5px #484848;
    }

	    .news_show-div { 
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding: 1.5em 1em;
            border-right: solid 0.5px #484848;
            border-bottom: solid 0.5px #484848;
            padding-bottom: 0.2em;
            width: 33%;
        }

	        .news_show-div:nth-last-child(-n+3) { 
                border-bottom: none;
            }

	        .news_show-div:nth-child(3n){ 
                border-right: none;
            }

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

	        .news_show-div-pic img { 
                display: block;
                position: relative;
                margin-bottom: 0.5em;
                width: 100%;
            }

	    .news_show-div-title { 
            display: flex;
            position: relative;
            justify-content: center;
            align-items: center;
            width: 100%;
            min-height: 3.5em;
            padding: 0.5em 0.5em;
            background: #E3E3E3;
        }

	        .news_show-div:hover .news_show-div-title { 
                background: #2855A5;
                color: #FFF;
                -webkit-transition: all 0.2s ease-in-out;
	            transition: all 0.2s ease-in-out;
            }

	    .news_show-div-word { 
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            padding: 0.5em 0.5em;
        }

	        .news_show-div-list { 
                display: flex;
                position: relative;
                flex-direction: column;
                justify-content: center;
                width: 100%;
                padding: 0.1em 0.1em;
                text-align: center;
            }

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


	.news_cover { 
        display: flex;
        position: relative; 
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: stretch;
        margin: 4em auto 3em auto;
        width: 860px;
    }

	    .news_cover-div { 
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding: 0;
            width: 30%;
            height: 100%;
            float: left;
			overflow: hidden;
        }

	    .news_cover-div-pic {
		    position: relative;
		    width: 100%;
		    height: 100%;
		    float: left;
		    overflow: hidden;
		    text-align: center;
		    cursor: default;
            border: solid 1px #CCC;
	    }

	        .news_cover-div-pic img {
		        display: block;
		        position: relative;
                width: 100%;
		        -webkit-transition:all .3s linear;
		        transition:all .3s linear;
	        }

	        .news_cover-div:hover .news_cover-div-pic img {
                cursor: pointer;
	            -ms-transform:scale(1.1);
		        -webkit-transform:scale(1.1);
		        transform:scale(1.1);
	        }

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

	        .news_cover-div .overlay {
	        	width:100%;
	        	height:100%;
	        	position:absolute;
	        	overflow:hidden;
	        	top: 50%;
	        	left: 50%;
	        	opacity:0;
                transform: translate(-50%, -50%);
	        	background-color:rgba(40,85,165,0.8);
	        	-webkit-transition:all 0.4s ease-in-out;
	        	transition:all 0.4s ease-in-out;
	        	cursor: pointer;
	        }

	        .news_cover-divab {
		        display: block;
		        position: absolute;
		        overflow: hidden;
		        top: 50%;
		        left: 50%;
		        transform: translate(-50%, -50%);
                width: 25%;
                height: 25%;
	        }

	        .news_cover-divab img {
                opacity: 0;
		        display: block;
                margin: auto;
                width: 100%;
                z-index: 9;
	        }

	        .news_cover-div:hover .news_cover-divab img {
                opacity: 1;
            }

	        .news_cover-name {
		        display: flex;
                justify-content: center;
                align-items: center;
                margin: auto;
                width: 100%;
                padding: 0.35em 0;
                text-align: center;
                color: #484848;
	        }

	        .news_cover-div:hover .news_cover-name {
		        color: #c43931;
	        }


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

	    .gmap_m { 
            display: block;
            position: relative;
            width: 100%;
            height: 500px;
        }


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

	    .contact-div1 { 
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 auto;
            width: 52%;
        }

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


	    .contact-div2 { 
            display: block;
            position: relative;
            margin: 0 auto;
            padding: 1em;
            width: 45%;
        }

	    .contact-div2_list { 
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin: 2px 0 2px 0;
            width: 100%;
        }

	    .contact-div2_list a { 
            color: #000000;
        }

	    .contact-div2_list a:hover { 
            color: #C43932;
        }


	    .contact-div2_icon { 
            display: block;
            position: relative;
            margin-right: 5px;
            width: 1.5em;
            height: 1.5em;
        }

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


	.contact_community { 
        display: inline-flex;
        justify-content: center;
        align-items: stretch;
        margin: 1em auto;
        width: 100%;
    }

	    .contact_community_icon { 
            display: block;
            position: relative;
            margin: 5px 0.5em;
            width: 2.5em;
            height: 2.5em;
        }

	    .contact_community_icon img { 
            display: block;
            position: absolute;
            width: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 2em;
        }

		.contact_community_icon img:last-child:hover {
            opacity: 0;
            -webkit-transition: opacity .2s ease-in-out;
            -moz-transition: opacity .2s ease-in-out;
            -o-transition: opacity .2s ease-in-out;
            transition: opacity .2s ease-in-out;
		}



	.pro1 { 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        margin: 1em auto;
        width: 100%;
    }


	    .pro1_pic { 
            display: flex;
            justify-content: center;
            align-items: stretch;
            margin: 1em auto;
            padding: 0 5%;
            width: 65%;
            background: #FFF;
            z-index: 10;
        }

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

	.pro1_box { 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        margin: -10% auto 0 auto;
        width: 100%;
        border: solid 2px #2855A5;
        border-radius: 50px;
    }

	    .pro1_r1 { 
            display: block;
            margin: 10% auto 0 auto;
            padding: 0 5%;
            width: 90%;
        }

	        .pro1_r1_txt { 
                display: block;
                margin: 1em auto 0 auto;
                width: 100%;
                text-align: center;
            }

	    .pro1_r2 { 
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            margin: 2em auto -25% auto;
            padding: 0 5%;
            background: #FFF;
            width: 90%;
        }

	        .pro1_r2_div-le { 
                display: flex;
                position: relative;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                margin: 0 auto;
                margin: 0 auto;
                background-image: url("../../images/pic_pro_le2.jpg");
                background-size: 100%;
                background-repeat: no-repeat;
                background-position: top center;
                width: 48%;
                text-align: center;
                border: solid 1px #CCC;
                border-radius: 50px;
            }

	            .pro1_r2_div-le:hover {
	                background-image: url("../../images/pic_pro_le1.jpg");
                    background-size: 100%;
                    background-repeat: no-repeat;
                    background-position: top center;
                    -webkit-transition:all 0.3s ease-in-out;
	                transition:all 0.3s ease-in-out;
	            }

	        .pro1_r2_div-ri { 
                display: flex;
                position: relative;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                margin: 0 auto;
                background-image: url("../../images/pic_pro_ri2.jpg");
                background-size: 100%;
                background-repeat: no-repeat;
                background-position: top center;
                width: 47%;
                text-align: center;
                border: solid 1px #CCC;
                border-radius: 50px;
            }

	            .pro1_r2_div-ri:hover {
	                background-image: url("../../images/pic_pro_ri1.jpg");
                    background-size: 100%;
                    background-repeat: no-repeat;
                    background-position: top center;
                    -webkit-transition:all 0.3s ease-in-out;
	                transition:all 0.3s ease-in-out;
	            }

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

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


	        .pro1_r2_dtitle { 
                display: block;
                position: relative;
                margin: 0.5em auto;
                width: 80%;
            }

	        .pro1_r2_dtxt { 
                display: block;
                position: relative;
                margin: 0 auto;
                width: 80%;
                display: -webkit-box; /* 早期 Webkit 語法 */
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3; /* 最多顯示 3 行 */
                overflow: hidden;                
            }

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


	.pro_sub { 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        margin: 1em auto 0 auto;
        width: 100%;
    }

	    .pro_sub_menu { 
            display: flex;
            justify-content: center;
            align-items: stretch;
            margin: 0 auto;
            padding: 1em 2em;
            width: auto;
            background: #FFF;
            z-index: 9;
        }

	        .pro_sub_menu_div { 
                display: flex;
                position: relative; 
                justify-content: center;
                align-items: center;
                margin: 0 1em;
                width: auto;
                text-align: center;
                border-bottom: solid 2px #2855A5;
            }

 		        .pro_sub_menu_div:hover {
			        color: #c43932;
                    border-bottom: solid 2px #c43932;
		        }

 		        .pro_sub_menu_div a {
			        color: #484848;
		        }

 		        .pro_sub_menu_div a:hover {
			        color: #c43932;
		        }


	        .pro_sub_menu_div1 { 
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: stretch;
                margin: 0 1em;
                width: auto;
                color: #c43932;
                text-align: center;
                border-bottom: solid 2px #c43932;
            }

	        .pro_sub_menu_div1 a { 
                color: #c43932;
            }



	.pro_sub_box { 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin: -1.5em auto 0 auto;
        width: 75%;
        border-top: solid 2px #2855A5;
        border-left: solid 2px #2855A5;
        border-right: solid 2px #2855A5;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
    }

	    .pro_sub_box_r1 { 
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            margin: 3em auto 0 auto;
            padding: 0 0 5% 0;
            width: 80%;
        }


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

	    .pro_sub-prolist-div { 
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            margin-bottom: 2em;
            width: 24%;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        }

        /* 如果最后一行是3个元素 */
        .pro_sub-prolist-div:last-child:nth-child(4n - 1) {
            margin-right: calc(24% + 4% / 3);
        }

        /* 如果最后一行是2个元素 */
        .pro_sub-prolist-div:last-child:nth-child(4n - 2) {
            margin-right: calc(48% + 8% / 3);
        }

	    .pro_sub-prolist-d-pic { 
            display: block;
            position: relative;
            width: 100%;
            background: #f2f2f2;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        }

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

	    .pro_sub-prolist-d-name { 
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding-top: 12%;
            width: 100%;
            background: #FFF;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
        }

	    .pro_sub-prolist-d-name-r1 { 
            display: block;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, 0%);
            width: 100%;
        }

	    .pro_sub-prolist-d-name-r2 { 
            display: block;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -22%);
            width: 100%;
        }

        .poligon {
            display: flex;
            position: relative;
            justify-content: center;
            align-items: center;
            width: 70%;
            height: auto;
            margin: -1.5em auto 0 auto;
            padding: 0.95em 1em;
            background-color: #FFF;
            box-sizing: border-box;
            -webkit-clip-path: polygon(15% 0%, 88% 0%, 100% 50%, 88% 100%, 15% 100%, 0% 50%, 0% 50%);
            clip-path: polygon(15% 0%, 88% 0%, 100% 50%, 88% 100%, 15% 100%, 0% 50%, 0% 50%);
            border-radius: 20%;
            text-align: center;
            line-height: 120%;
            color: #484848;
        }

            .poligon::after {
                content: "";
                position: absolute;
                width: 98.8%;
                height: 97%;
                background-color: #FFF;
                -webkit-clip-path: polygon(15% 0%, 88% 0%, 100% 50%, 88% 100%, 15% 100%, 0% 50%, 0% 50%);
                clip-path: polygon(15% 0%, 88% 0%, 100% 50%, 88% 100%, 15% 100%, 0% 50%, 0% 50%);
                border-radius: 20%;
                z-index: -1;  
            }

	    .pro_sub-prolist-d-more { 
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 1em auto 2em auto;
            width: 100%;
            z-index: 1;
        }

	        .pro_sub-prolist-d-moreab { 
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                height: 1px;
                border-bottom: solid 0.5px #CCC;
                z-index: 1;
             }

	    .pro_sub-prolist-div:hover .pro_sub-prolist-d-name { 
            background: #2855a5;
            -webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
        }

	    .pro_sub-prolist-div:hover .poligon { 
            background-color: #2855a5;
            color: #2855a5;
            -webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
        }

	    .pro_sub-prolist-div:hover .pro_sub-prolist-d-moreab { 
            display: none;
        }


        .pro_sub-prolist-div:hover .more4 {  
            color: #FFF;
            background: #2855A5;
            -webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
        }

        .pro_sub-prolist-div:hover .morebt4 {  
            width: 60px;
            border: solid 0.5px #FFF;
		    color: #FFF;
            background: #2855A5;
            -webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
        }

        .pro_sub-prolist-div:hover .morebt4word {  
            display: inline-block;
            color: #FFF;
            -webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
        }

        .pro_sub-prolist-div:hover .morebt4ab {  
            width: 40px;
            border-bottom: solid 0.5px #FFF;
            -webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
        }

        .pro_sub-prolist-div:hover .morebt4ab::before {  
            left: 40px;
            border-bottom: solid 4px #FFF;
            -webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
        }

        .pro_sub-prolist-div:hover .morebt4ab::after {  
            left: 40px;
            border-bottom: solid 3px #FFF;
            -webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
        }



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

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

	        .pro_info-pic img { 
                display: flex;
                position: relative;
                width: 100%;
            }

	    .pro_info-div { 
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            width: 56%;
        }

	    .pro_info-d-title { 
            display: block;
            position: relative;
            width: 100%;
        }

	        .pro_info-d-titleline { 
                display: block;
                position: absolute;
                width: 100%;
                height: 1.5px;
                background: #2855A5;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

	        .pro_info-nav { 
                display: block;
                float: left;
                margin: 1em 0 2em 0;
		        width: 100%;
                padding: 0 1em;
                
            }

	            .pro_info-nav-p { 
                    width: 100%;
                    margin: 0 0.7em;
                    background: #F2F2F2; 
                }

	            .pro_info-nav-p img { 
                    width: 100%;
                    background: #F2F2F2; 
                }

	        .pro_info-mode { 
                display: inline-block;
                margin: 5px 0;
		        width: 100%;
            }

	            .pro_info-mode img { 
		            width: 100%;
                }

	        .pro_info-features { 
                display: inline-block;
                margin: 2px 0;
                padding-left: 1.1em;
		        width: 100%;
            }

	            .pro_info-features::before { 
                    content: "▶";
                    display: block;
                    position: absolute;
                    left: 0;
                    color: #2855A5;
                }

	        .pro_info-features1 { 
                display: inline-block;
                margin: 2px 0;
                padding-left: 1.1em;
		        width: 100%;
            }

	        .pro_info-conten { 
                display: inline-block;
                margin: 0 auto 2em auto;
		        width: 100%;
            }

	        .pro_info-conten-title { 
                display: block;
                position: relative;
                margin: 2.5em 0;
                width: 100%;
            }

	        .pro_info-conten-titleline { 
                display: block;
                position: absolute;
                width: 100%;
                height: 1px;
                background: #2855A5;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

	        .pro_info-conten-word { 
                display: block;
                position: relative;
                width: 100%;
            }

	        .pro_info-conten-word-tt { 
                display: block;
                position: relative;
                margin-bottom: 0.5em;
                width: 100%;
            }

	        .pro_info-conten-word-tt1 { 
                display: block;
                position: relative;
                padding-left: 1.2em;
                text-indent: -1.2em;
                margin-bottom: 0.1em;
                width: 100%;
            }

	        .pro_info-conten-word-tt2 { 
                display: block;
                position: relative;
                padding-left: 1.8em;
                text-indent: -1.8em;
                margin-bottom: 0.1em;
                width: 100%;
            }

	        .pro_info-conten-word-blue { 
                display: block;
                position: relative;
                margin: 0.2em 0;
                padding: 0.2em 1em 0.2em 2em;
                width: 80%;
                background: #2855a5;
                color: #FFF;
                text-indent: -1em;
            }

	        .pro_info-conten-word-li { 
                display: block;
                position: relative;
                margin: 0.1em 0;
                padding: 0.1em 1em 0.1em 1em;
                width: 100%;
                text-indent: -1em;
            }

	        .pro_info-conten-word-li-en { 
                display: block;
                position: relative;
                margin: 0.1em 0;
                padding: 0.1em 1em 0.1em 1em;
                width: 100%;
                text-indent: -1.2em;
            }

	        .pro_info-conten-word-li2 { 
                display: block;
                position: relative;
                margin: 0.5em 0;
                padding: 0;
                width: 100%;
            }


	        .pro_info-conten-word-li-list { 
                display: block;
                position: relative;
                padding: 0.1em 1em 0.1em 1.3em;
                width: 100%;
                text-indent: -1em;
            }


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

	            .pro_info-conten-word-bu-1 { 
                    display: flex;
                    position: relative;
                    justify-content: center;
                    align-items: center;
                    background: #2855a5;
                    padding: 0.2em 1em;
                    text-align: justify;
                    text-align-last: justify; /* 強制最後一行也分散對齊 */
                    vertical-align: middle;
                    width: 9em;
                }

	            .pro_info-conten-word-bu-2 { 
                    display: inline-block;
                    position: relative;
                    padding: 0.2em 1em;
                    flex: 1;
                }


	        .pro_info-conten-word-bu1 { 
                display: flex;
                position: relative;
                justify-content: space-between;
                align-items: flex-start;
                margin: 5px 0;
                width: 100%;
            }

	            .pro_info-conten-word-bu1-l { 
                    display: flex;
                    position: relative;
                    justify-content: center;
                    align-items: center;
                    padding: 0.2em 0.5em;
                    text-align: center;
                    vertical-align: middle;
                    width: 12em;
                }

	            .pro_info-conten-word-bu1-r { 
                    display: inline-block;
                    position: relative;
                    padding: 0.2em 0.5em;
                    flex: 1;
                }





	    .pro_spc { 
            display: block;
            position: relative;
            width: 100%;
            overflow: auto;
        }

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

	    .pro_spc-big { 
            display: block;
            position: relative;
            width: 100%;
            overflow: auto;
        }

	        .pro_spc-big img { 
                display: block;
                position: relative;
                width: 120%;
	        }    

	    .pro_spc-larg { 
            display: block;
            position: relative;
            width: 100%;
            overflow: auto;
        }

	        .pro_spc-larg img { 
                display: block;
                position: relative;
                width: 320%;
	        }    




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

	        .pro_spcbox-div { 
                display: inline-block;
                position: relative;
                text-align: center;
                margin-right: 1em;
                margin-bottom: 1em;
                padding: 0.2em 1.5em;
                width: 5em;
                background: #2855A5;
	        }    


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

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

	        .pro_infoma_flex-div-list { 
                display: block;
                position: relative;
                margin: 0.2em 0;
                width: 100%;
                padding-left: 1em;
                text-indent: -1em;
	        }   

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

	        .pro_wordpic_flex-d1 { 
                display: block;
                position: relative;
                width: 68%;
	        }   

	        .pro_wordpic_flex-d2 { 
                display: block;
                position: relative;
                width: 32%;
	        }   

	        .pro_wordpic_flex-d1 img, .pro_wordpic_flex-d2 img { 
                width: 100%;
	        }   


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

	        .pro_proapicon-div { 
                display: flex;
                position: relative;
                justify-content: space-between;
                align-items: center;
                width: calc((100% - 2%) / 3); 
                margin-right: 1%; 
                margin-bottom: 10px;
                box-sizing: border-box;
            }

	        .pro_proapicon-div:nth-child(3n) {
                margin-right: 0;
	        }

	            .pro_proapicon-div-pic { 
                    display: block;
                    position: relative;
                    width: 25%;
                }

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

	            .pro_proapicon-div-word { 
                    display: block;
                    position: relative;
                    padding-right: 1em;
                    width: 72%;
                }


	    .pro_profuflex { 
            display: flex;
            position: relative;
            justify-content: space-between;
            align-items: stretch;
            padding: 0.3em 0;
            margin: 0 auto 1em auto;
            width: 100%;
            border-bottom: solid 1px #484848;
        }

	        .pro_profuflex:last-child { 
                border-bottom: none;
            }

	        .pro_profuflex-d1 { 
                display: flex;
                position: relative;
                justify-content: flex-start;
                align-items: flex-start;
                width: 15%;
                margin-bottom: 10px;
            }

	            .pro_profuflex-d1-title { 
                    display: block;
                    position: relative;
                    text-align: center;
                    padding: 0.2em;
                    width: 100%;
                    background: #2855A5;
                }

	        .pro_profuflex-d2 { 
                display: block;
                position: relative;
                padding-left: 1em;
                width: 50%;
                margin-bottom: 10px;
                text-align: justify;
            }

	        .pro_profuflex-d3 { 
                display: flex;
                position: relative;
                justify-content: flex-start;
                align-items: center;
                width: 45%;
                margin-bottom: 10px;
            }

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




	.sidemeunu {  
        display: block;
		position: fixed;
        top: 50%;
        left: 0;
        transform: translate(0,-50%);
        width: 220px;
        background: #FFF;
        text-align: center;
        z-index: 50;
	}

	    .sidemeunu-r1 {  
            display: block;
		    position: relative;
            background: #2855A5;
            padding: 0.3em 0;
            width: 100%;
            cursor: pointer;
	    }

	        .sidemeunu-r1-lsit-bottom {  
                display: block;
		        position: relative;
                width: 100%;
                height: 14px;
                background: #3d96d8;
	        }

	        .sidemeunu-r1::after {  
                content: "▴";
                position: absolute;
                color: #FFF;
                top: 80%;
                left: 50%;
                transform: translate(-50%, 0%);
                z-index: 10;
	        }

            .sidemeunu-r1.active::after { 
                content: '▾'; /* 展開時變減號 */
            } 

	    .sidemeunu-r1-lsit {  
            display: block;
		    position: relative;
            padding: 0 1em 0 0;
            width: 100%;
	    }

	    .sidemeunu-r2-lsit {  
            display: none;
		    position: relative;
            padding: 0 1em 0 0;
            width: 100%;
	    }

	        .sidemeunu-lsit-div {  
                display: block;
		        position: relative;
                padding: 0.2em 0;
                width: 100%;
                color: #000;
                border-bottom: solid 1px #CCC;
	        }

	        .sidemeunu-lsit-div:hover {  
                color: #2855A5;
                background: #EFEFEF;
                -webkit-transition: all 0.2s ease-in-out;
	            transition: all 0.2s ease-in-out;
	        }

	        .sidemeunu-lsit-div1 {  
                display: block;
		        position: relative;
                padding: 0.2em 0;
                width: 100%;
                color: #2855A5;
                font-weight: bold;
                border-bottom: solid 1px #CCC;
	        }

	    .sidemeunu-r2 {  
            display: block;
		    position: relative;
            background: #808080;
            padding: 0.3em 0;
            width: 100%;
            cursor: pointer;
	    }

	        .sidemeunu-r2::after {  
                content: "▾";
                position: absolute;
                color: #FFF;
                top: 80%;
                left: 50%;
                transform: translate(-50%, 0%);
                z-index: 10;
	        }

	        .sidemeunu-r2-lsit-bottom {  
                display: block;
		        position: relative;
                width: 100%;
                height: 14px;
                background: #bdbdbd;
	        }

            .sidemeunu-r2.active::after { 
                content: '▴'; /* 展開時變減號 */
            } 


/* title border setting */

	.titlesub {  
        display: inline-block;
		position: relative;
        padding-bottom: 10px;
		width: inherit;
        border-bottom: solid 2px;
        border-image: linear-gradient(to right, #2855a5 72%, #c43932 72%) 2;
	}

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

	    .abustitle::before {  
            content: url("../../images/pic_abus_titlebefore.svg");
            position: absolute;
            top: 0;
            left: -12px;
            width: 8px;
            height: 100%;
	    }

	    .abustitle::after {  
            content: url("../../images/pic_abus_titleafter.svg");
            position: absolute;
            top: 0;
            right: -12px;
            width: 8px;
            height: 100%;
	    }


	.titlegrtoblu {  
        display: inline;
		position: relative;
        margin: 0 auto;
        padding-bottom: 10px;
		width: inherit;
        border-bottom: solid 3px;
        border-image: linear-gradient(to right, #5bbc2b 75%, #2855a5 75%) 2;
	}





/* area setting */

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

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

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

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

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

	.txt-area {  
        display: block;
		position: relative;
        margin: 0.7em auto;
		width: 100%;
 		/* 超過行數變... */
		overflow:hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: normal;
		/* 超過行數變... end */
	}

	.txt-area1 {  
        display: block;
		position: relative;
        margin: 0.5em auto;
		width: 70%;
	}





	.timelinearea {
		margin: 0 auto;
        padding: 0 0 1em 0;
		width: 80%;
	}

/* myBtn - go top */

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

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


/* vedio */
	.vdvideo {
		display: block;
		position: relative;
		margin: 0 auto;
		width: 100%;
	}

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

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

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

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


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

/* Footer */

	#footer {
		position: relative;
		background-color: #E6E6E6;
		width: 100%;
		padding: 0;
		text-align: left;
		overflow: hidden;
		border-top: solid 7px #494949;
	}

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

	#footer .footerc1 {
		display: flex;
		position: relative;
		flex-direction: column;
		justify-content: space-between;
		align-items: stretch;
		width: 100%;
        padding: 0;
        background: #ccc;
	}

		#footer .fre1 {
		    display: flex;
			display: -webkit-flex; /* Safari */
		    justify-content: space-between;
			align-items: stretch;
			flex-wrap: wrap;
			margin: 0 auto;
            padding: 3em 0 1em 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%;
                    padding: 0 1.5em 0.3em 0;
                    border-bottom: solid 4px #424e94;
	             }

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

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

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


		#footer .fre2 {
		    display: flex;
			display: -webkit-flex; /* Safari */
		    justify-content: space-between;
			align-items: center;
			margin: 0 auto;
            padding: 1em 0 0.5em 0;
			width: 100%;
	     }

		    #footer .fre2-div1 {
		        display: flex;
                position: relative;
                flex-direction: column;
			    display: -webkit-flex; /* Safari */
		        justify-content: center;
			    align-items: center;
                margin-bottom: 0.5em;
			    width: 60%;
	         }

		    #footer .fre2-div2 {
		        display: flex;
                position: relative;
                flex-direction: column;
			    display: -webkit-flex; /* Safari */
		        justify-content: flex-end;
			    align-items: center;
                margin-bottom: 0.5em;
			    width: 38%;
	         }

		        #footer .fre2-div_companey {
		            display: flex;
                    position: relative;
                    justify-content: flex-start;
                    align-items: stretch;
                    width: 100%;
	             }

		        #footer .fre2-div_companey_logo {
		            display: block;
                    position: relative;
                    margin-right: 10px;
                    width: 10%;
	             }

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

		        #footer .fre2-div_companey_word {
		            display: flex;
                    position: relative;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 89%;
	             }

		            #footer .fre2-div_companey_ww1 {
		                display: block;
                        position: relative;
                        width: 100%;
	                 }

		            #footer .fre2-div_companey_ww2 {
		                display: block;
                        position: relative;
                        width: 100%;
	                 }

		        #footer .fre2-div2_community {
		            display: flex;
                    position: relative;
                    justify-content: flex-end;
                    align-items: center;
                    margin-bottom: 5px;
                    width: 100%;
                    height: 2.2em;
	             }

		        #footer .fre2-div2_commu_icon {
		            display: block;
                    position: relative;
                    width: 2.2em;
                    height: 2.2em;
                    margin-left: 15px;
                    border-radius: 5px;
		        }

		            #footer .fre2-div2_commu_icon img {
		                display: block;
                        position: absolute;
                        width: 100%;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        border-radius: 5px;
		            }

		            #footer .fre2-div2_commu_icon img:last-child:hover {
		                opacity:0;
		                -webkit-transition: opacity .2s ease-in-out;
		                -moz-transition: opacity .2s ease-in-out;
		                -o-transition: opacity .2s ease-in-out;
		                transition: opacity .2s ease-in-out;
		            }

		        #footer .fre2-div2_cc {
		            display: flex;
                    position: relative;
                    justify-content: flex-end;
                    align-items: center;
                    width: 100%;
                    text-align: right;
		        }


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

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

		    #footer .ftitle1 a:hover {
			    color: #2855A5;
		    }

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

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

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



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

 

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

/* header */	
	
			#header nav ul li {
                display: flex;
                float: left;
                justify-content: center;
                align-items: center;
                margin: 0 10px;
				font-size: 1.2em;
				text-align: center;
                height: 40px;
			}
    
/* banner */
    
		    .bannerli_txt {
                width: 34%;
                left: 50%;
                top: 60%;
             }
    
	
/* Wrapper */
	
/* area-container */	

/* setting */

    
    
    
    
    
    
/* Footer */
	
}


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

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

	.headcontainer {  
		width: 85%;
	}

    
/* wordarea */
	
/* setting */
	
/* Footer */
	
}

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

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

	
/* banner */
	

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

	.headcontainer {  
		width: 85%;
	}

	.pathcontainer {  
		width: 85%;
	}

	.bodycontainer1 {  
		width: 85%;
	}

	.bodycontainer2 {  
		width: 85%;
	}

	.bodycontainer3 {  
		width: 80%;
	}

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

	.bodycontainer5 {  
		width: 65%;
	}
    
	.footercontainer {  
		width: 85%;
	}
		
	
/* setting */
    
	.indsolutionab {

	}

	    .indsolution_tt {
            margin: 1.5em auto 0 auto;
            width: 70%;
            text-align: center;
	    }

	    .indsolution_txt {
		    display: block;
            position: relative;
            margin: 0 auto 0.7em auto;
            width: 50%;
            text-align: center;
	    }
    
    
 	.aboutarea {
		display: block;
        background-image: url("../../images/pic_abus_bg_m1440.png");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100%;
        width: 100%;
	}

 	.about_pic1 {
		display: block;
        margin: 0 auto;
        width: 55%;
        height: auto;
	}

    
 		.about_2nflex {
        	margin: 2em auto;
		}

 		    .about_2nflex-div {
                margin: 0 10px;
 		        padding: 3.5em 0;
                width: 15%;
                border-radius: 200px;
                background: linear-gradient(to top, #ccc 0%, #fff 55%);
                box-shadow: 0 0 10px #CCC;
 		        &::before {
   		            content: "";
   		            position: absolute;
    		        inset: 0;
    		        border-width: 3px;
    		        border-style: solid;
     		        border-color: transparent;
     		        border-radius: 200px;
     		        background-image: linear-gradient(to top, #2855a5, #fff, #2855a5);
     		        background-origin: border-box;
    		        mask-image: linear-gradient(white, white), linear-gradient(white, white);
    		        mask-clip: padding-box, border-box;
    		        mask-composite: exclude, add;
   		        }
 		    }
    
    
	        .kno_talk_flex {
                margin: 2em auto 1em auto;
                width: 90%;
	        }

	            .kno_talk_flex-div {
                    justify-content: space-between;
                    align-items: flex-start;
                    padding: 0.2em 1em;
                    width: 49%;
	            }

	            .kno_talk_flex-div-list {
                    padding-left: 1.15em;
                    text-indent: -1.15em;
	            }
    
	        .kno_gray_box_spc {
                width: 100%;
                overflow: auto;
	        }

	            .kno_gray_box_spc img {
                    width: 700px;
	            }
    
    
	.contact { 
        margin: 1em auto;
        width: 75%;
    }

	    .contact-div1 { 
            margin: 0 auto;
            width: 52%;
        }
    
	    .contact-div2 { 
            margin: 0 auto;
            padding: 1em;
            width: 45%;
        } 
    
    
	    .pro_spc { 
            width: 100%;
            overflow: auto;
        }

	        .pro_spc img { 
                width: 1024px;
        }    
   
	    .pro_spc-big { 
            width: 100%;
            overflow: auto;
        }

	        .pro_spc-big img { 
                width: 120%;
	        }    
    
	    .pro_spc-larg { 
            width: 100%;
            overflow: auto;
        }

	        .pro_spc-larg img { 
                width: 380%;
	        }    

    
    
    
    
/* wordarea */

/* Footer */

	
}
	

/* Normal */

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

/* Basic */
    
/* header */	
    
			#header nav ul li {
                margin: 0;
				font-size: 1.1em;
                height: 40px;
			}
	
	
					.navlogo {
                        left: 1%;
                        padding-top: 7px;
						width: 130px;
					}


	
/* banner */

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

/* setting */
    
	    .indsolution_txt1 {
            margin: 0 auto 0.5em auto;
            width: 38%;
            text-align: center;
	    }
    
 	        .apl1s_word1 {
                bottom: 0;
                width: 75%;
                height: 37%;
	        }

 	        .apl1s_word1-2 {
                bottom: 0;
                width: 75%;
                height: 37%;
	        }
    
 	        .apl1s_word2 {
                margin-top: 2%;
                width: 75%;
	        }

 	        .apl1s_word2-1 {
                margin-top: 3%;
                width: 75%;
	        }
    
    

 	.aboutarea {
		display: block;
        background-image: url("../../images/pic_abus_bg_m1440.png");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100%;
        width: 100%;
	}

 	.about_pic1 {
		display: block;
        margin: 0 auto;
        width: 60%;
        height: auto;
	}


 	.about_textarea {
		display: block;
        margin: 0 auto;
        width: 85%;
        height: auto;
	}  
    
    
 		.about_2nflex {
        	margin: 2em auto;
		}

 		    .about_2nflex-div {
                margin: 0 10px;
 		        padding: 2.5em 0;
                width: 15%;
                border-radius: 200px;
                background: linear-gradient(to top, #ccc 0%, #fff 55%);
                box-shadow: 0 0 10px #CCC;
 		        &::before {
   		            content: "";
   		            position: absolute;
    		        inset: 0;
    		        border-width: 3px;
    		        border-style: solid;
     		        border-color: transparent;
     		        border-radius: 200px;
     		        background-image: linear-gradient(to top, #2855a5, #fff, #2855a5);
     		        background-origin: border-box;
    		        mask-image: linear-gradient(white, white), linear-gradient(white, white);
    		        mask-clip: padding-box, border-box;
    		        mask-composite: exclude, add;
   		        }
 		    } 
    
    
    
	.qc_flex {
        
	}
    
	    .qc_flex-div-R1 {  
            display: flex;
		    position: relative;
            justify-content: flex-start;
            align-items: center;
            margin: 0 0 1.5em 0;
            padding-left: 0;
		    width: 50%;
	    }

	    .qc_flex-div-L2 {  
            display: flex;
		    position: relative;
            justify-content: flex-end;
            align-items: center;
            margin: 0 0 1.5em 0;
            padding-right: 0;
		    width: 50%;
	    }
    
	    .qc-div-word {  
            justify-content: center;
            align-items: center;
		    width: 85%;
	    }
    
	         .qc-div-word-title {  
                 padding: 0.35em 1em;
                 border-top: solid 1.5px #2855a5;
                 border-bottom: solid 1.5px #2855a5;
	         }
    
    
	        .kno_talk_flex {
                margin: 2em auto 1em auto;
                width: 100%;
	        }

	            .kno_talk_flex-div {
                    justify-content: space-between;
                    align-items: flex-start;
                    padding: 0.2em 1em;
                    width: 49%;
	            }

	            .kno_talk_flex-div-list {
                    padding-left: 1.15em;
                    text-indent: -1.15em;
	            }
    

	.news_cover { 
        justify-content: space-between;
        align-items: stretch;
        margin: 4em auto 3em auto;
        width: 85%;
    }

    
	.contact { 
        margin: 1em auto;
        width: 75%;
    }

	    .contact-div1 { 
            margin: 0 auto;
            width: 48%;
        }
    
	    .contact-div2 { 
            margin: 0 auto;
            padding: 1em;
            width: 50%;
        }  
    
    
        .poligon {
            width: 85%;
        }

    
    
    
    
    
    
    
/* area setting */

	.title-center {  
        margin: 1.5em auto 1em auto;
		width: auto
	}

	.txt-center {  
        margin: 1em auto;
		width: 95%;
	}


	.txt-center-short {  
        margin: 1em auto;
		width: 95%;
	}
    
	.txt-center-m0 {  
        margin: 0 auto;
		width: 95%;
	}
    
	.txt-area1 {  
        margin: 0.5em auto;
		width: 95%;
	}

    

/* Footer */

		#footer .fre2 {
            flex-direction: column;
			align-items: center;
			margin: 0 auto;
            padding: 1.5em 0 1em 0;
			width: 100%;
	     }

		    #footer .fre2-div1 {
		        justify-content: center;
			    align-items: center;
                margin-bottom: 0.5em;
			    width: 100%;
	         }

		    #footer .fre2-div2 {
		        justify-content: flex-start;
			    align-items: center;
                margin-bottom: 0.5em;
			    width: 100%;
	         }
    
		        #footer .fre2-div_companey {
                    justify-content: flex-start;
                    align-items: stretch;
                    width: 100%;
	             }

		        #footer .fre2-div_companey_logo {
                    margin-right: 10px;
                    width: 80px;
	             }

		        #footer .fre2-div_companey_word {
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 89%;
	             }

		        #footer .fre2-div2_community {
                    justify-content: flex-start;
                    align-items: center;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    height: 2.2em;
	             }

		        #footer .fre2-div2_commu_icon {
                    width: 2.2em;
                    height: 2.2em;
                    margin-left: 0;
                    margin-right: 15px;
                    border-radius: 5px;
		        }

		        #footer .fre2-div2_cc {
                    justify-content: flex-start;
                    align-items: flex-start;
                    text-align: left;
		        }
    
    
    
    
    
    
    
    
    
}



@media screen and (max-width: 1200px) {
    
/* Basic */
	
/* header */	
	
			#header nav ul li {
				font-size: 1.05em;
                height: 40px;
			}
	
			    #header nav ul li:last-child {
                    margin-right: 0.5em;
			    }
	
					.navlogo {
                        left: 0.5em;
                        padding-top: 7px;
						width: 125px;
					}  
    
    
/* banner */
    
		    .bannerli_txt {
                width: 37%;
                left: 50%;
                top: 60%;
             }
    
    
/* Wrapper */

		.wrapper.style3 {  
			background-image: url("../../images/pic_indqc_bg.png");
			background-repeat: no-repeat;
			background-position: top center;
			background-size: cover;
		}
    
/* area-container */
    
/* setting */
    
    /* 品質 */
 	.indqc {
		display: flex;
        position: relative;
        flex-direction: column;
        padding: 1em 0;
        width: 100%;
	}
    
    
 		.indqc_div1 {
			display: flex;
            position: relative;
            flex-direction: column;
        	justify-content: flex-start;
            padding: 1em 0;
            width: 100%;
            order: 2;
		}

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

 				.indqc_div1-c-flex-div {
					display: flex;
           			position: relative;
        			justify-content: center;
                    align-items: center;
                    text-align: center;
           	    	width: 22%;
                    color: #2855A5;
                    border-bottom: 7px solid;
                    border-image: linear-gradient(to right, #e5e5e5 10%, #2855A5 100%) 2;
				}


 		.indqc_div2 {
            position: relative;
        	justify-content: center;
            top: 0;
            left: 0;
            margin: 0 auto;
            transform: translate(0,0);
            width: 65%;
            order: 1;
		}


	.pro_sub_box { 
        width: 90%;
    }
    
    
    .pro_sub-prolist { 
        margin: 0 auto;
        width: 100%;
    }

	    .pro_sub-prolist-div { 
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            margin-bottom: 2em;
            width: 32%;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        }

        /* 如果最后一行是3个元素 */
        .pro_sub-prolist-div:last-child:nth-child(4n - 1) {
            margin-right: calc(24% + 4% / 3);
        }

        /* 如果最后一行是2个元素 */
        .pro_sub-prolist-div:last-child:nth-child(4n - 2) {
            margin-right: 0;
        }
 
    
    
    
    
    
    
    
    
/* Footer */

	
}



/* Narrower */

#navPanel, #navButton {
		display: none;
}


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

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

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

/* List */

			ul.featured-icons {
				margin: 0;
			}

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

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

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

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

/* banner */
    
		    .bannerli_txt {
                width: 40%;
                left: 50%;
                top: 60%;
             }

/* Wrapper */
	
/* area-container */
    
	.bodycontainer5 {  
		width: 75%;
	}
     
    
    
/* setting */
    
	.news_show { 
        margin: 3em auto 3em auto;
        width: 100%;
    }

	    .news_show-div { 
            align-items: center;
            padding: 1.5em 1em;
            border-right: solid 0.5px #484848;
            padding-bottom: 0.2em;
            width: 50%;
        }

	        .news_show-div:nth-child(n+4) { 
                border-bottom: solid 0.5px #484848;
            }

	        .news_show-div:nth-last-child(-n+2) { 
                border-bottom: none;
            }
    
	        .news_show-div:nth-child(3n){ 
                border-right: solid 0.5px #484848;
            }
    
	        .news_show-div:nth-child(2n){ 
                border-right: none;
            }


	    .news_show-div-pic { 
            width: 100%;
        }

	    .news_show-div-title { 
            width: 100%;
            min-height: 4.5em;
            padding: 0.5em 0.5em;
            background: #E3E3E3;
        }

	    .news_show-div-word { 
            padding: 0.5em 0.5em;
        }
    
    
	    .pro_wordpic_flex { 
            flex-direction: column;
            justify-content: center;
            width: 100%;
        }

	        .pro_wordpic_flex-d1 { 
                width: 100%;
	        }   

	        .pro_wordpic_flex-d2 { 
                margin: 0 auto;
                width: 55%;
	        }   
    
    
	        .pro_proapicon-div { 
                width: calc((100% - 1%) / 2); 
                margin-right: 1%; 
                margin-bottom: 10px;
                box-sizing: border-box;
            }

	        .pro_proapicon-div:nth-child(2n) {
                margin-right: 0;
	        }
    
    
	    .pro_profuflex { 
            flex-wrap: wrap;
            padding: 0.3em 0;
            margin: 0 auto 1em auto;
            width: 100%;
        }

	        .pro_profuflex-d1 { 
                justify-content: flex-start;
                align-items: flex-start;
                width: 20%;
                margin-bottom: 10px;
            }

	        .pro_profuflex-d2 { 
                display: block;
                position: relative;
                padding-left: 1em;
                width: 80%;
                margin-bottom: 10px;
                text-align: justify;
            }

	        .pro_profuflex-d3 { 
                margin: 0 auto;
                width: 60%;
                margin-bottom: 10px;
            }
 
    
    
    
    
    
    
    
    
    
    .sidemeunu {
        display: none;
    }

/* Footer */


	/* Off-Canvas Navigation */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	
}




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

/* Basic */

/* header */ 
    
		    .bannerli_txt {
                width: 37%;
                left: 50%;
                top: 60%;
             }
    
/* banner */

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

	.headcontainer {  
		width: 90%;
	}

	.pathcontainer {  
		width: 85%;
	}

	.bodycontainer1 {  
		width: 85%;
	}

	.bodycontainer2 {  
		width: 78%;
	}

	.bodycontainer3 {  
		width: 80%;
	}

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

	.footercontainer {  
		width: 85%;
	}

    
/* setting */

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

	.indsolution-c {
        position: absolute;
		margin: 0 auto;
        top: 0;
		width: 100%;
	}
    
	    .indsolution1-distxt {
		    display: block;
            position: relative;
            width: 100%;
	   }


	.indsolutionab1 {
        display: none;
	}
    
	    .indsolution_tt {
		    display: block;
            position: relative;
            margin: 1em auto 0 auto;
            width: 80%;
            text-align: center;
	    }

	    .indsolution_txt {
		    display: block;
            position: relative;
            margin: 1em auto;
            width: 80%;
	    }
    
    
    /* 專業製造 特點 */
	.indsolution-eveadv {
		display: flex;
        position: relative;
        justify-content: space-between;
        align-items: stretch;
        margin: 0 auto;
		width: 80%;
	}  
    
	    .indsolution-adv {
		    display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            text-align: center;
		    width: 15%;
            
	    }

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

	    .indsolution-adv-txt {
		    display: block;
            width: 100%;
	    }

 	        .apl1s_word2 {
                margin-top: 3%;
                width: 75%;
	        }

 	        .apl1s_word2-1 {
                margin-top: 4%;
                width: 75%;
	        }  
    
    
 	.aboutarea {
		display: block;
        background-image: url("../../images/pic_abus_bg_m1440.png");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 110%;
        padding: 1em 0 2em 0;
	}

 	.about_pic1 {
		display: block;
        margin: 0 auto;
        width: 60%;
        height: auto;
	}
    
 	.about_textarea {
		display: block;
        margin: 0 auto;
        width: 100%;
        height: auto;
	}  
    
    
	.pocess_note {  
        display: flex;
		position: relative;
        justify-content: center;
        align-items: center;
        margin: 4em 0 0 0;
        padding: 2em 1em;
		width: 100%;
        border-top: solid 1px #bdbdbd;
	}

	.pocess_note_flex {  
        display: flex;
		position: relative;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
        padding: 0;
		width: 100%;
	}

	    .pocess_note_flex-div {  
            display: flex;
		    position: relative;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding: 2em 1em;
		    width: 50%;
            border-top: solid 1px #bdbdbd;
            border-right: solid 1px #bdbdbd;
	    }

	        .pocess_note_flex-div:nth-child(odd) {  
                border-right: solid 1px #bdbdbd;
	        }

	        .pocess_note_flex-div:nth-child(even) {  
                border-right: none;
	        }


	    .pocess_note_icon1 {  
            display: block;
            position: relative;
            margin-right: 20px;
		    width: 10%;
            border: solid 1px #dcdcdc;
            border-radius: 20%;
	    }

	    .pocess_note_icon2 {  
            display: block;
            position: relative;
            margin: 0 auto;
		    width: 30%;
            border: solid 1px #dcdcdc;
            border-radius: 20%;
	    }

	        .pocess_note_icon1 img, .pocess_note_icon2 img {  
                display: block;
                position: relative;
		        width: 100%;
	        }

	    .pocess_note_word1 {  
            display: block;
            position: relative;
            margin: 1em 0;
		    width: 60%;
	    }

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

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


	.kno_box {  
        margin: 10% auto;
        padding: 2em 0;
	} 
    
    
	        .kno_gray_box_gam {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-self: stretch;
                margin: 1em auto;
                padding: 1em 0;
                width: 95%;
                border-top: solid 2px #bdbdbd;
	        }

	            .kno_gray_box_gam-list {
                    display: inline-block;
                    position: relative;
                    margin-bottom: 0.5em;
                    width: 48%;
	            }
    
    
	.gmap { 
        margin: 2em auto 1em auto;
        width: 100%;
    }
    
    
	.contact { 
        margin: 1em auto 0 auto;
        width: 90%;
    }

	    .contact-div1 { 
            margin: 0 auto;
            width: 48%;
        }
    
	    .contact-div2 { 
            margin: 0 auto;
            padding: 1em;
            width: 50%;
        }      
    
    
/* Footer */



    
}



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

/* Wrapper */
	
/* area-container */
    
/* setting */
    
 	.apl1s {
		flex-direction: column;
        margin: 2em auto;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
	}
    
 	    .apl1s_le1 {
            justify-content: center;
            align-items: center;
            width: 100%;
	    }

 	    .apl1s_le2 {
            justify-content: center;
            align-items: center;
            width: 100%;
	    }
    
 	        .apl1s_le1 img, .apl1s_le2 img, .apl1s_ri1 img, .apl1s_ri2 img {
		        display: block;
                margin: 0 auto;
                width: 100%;
	        }

 	    .apl1s_ri1 {
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 1em 0 0 0;
            width: 100%;
            background-image: none;
            order: 2;
	    }

 	    .apl1s_ri2 {
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 1em 0 0 0;
            width: 100%;
            background-image: none;
            order: 2;
	    }
    
    
 	    .apl1s_icon1 {
            position: absolute;
            top: 50%;
            left: 83%;
            transform: translate(0%,-50%);
            width: 17%;
            z-index: 10;
	    }

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

 	    .apl1s_word_transspce {
		    display: none;
	    }

 	        .apl1s_icon1 img, .apl1s_icon2 img {
		        display: block;
                width: 100%;
	        }

 	        .apl1s_word1 {
		        display: flex;
                position: relative;
                justify-content: flex-end;
                align-items: flex-end;
                flex-direction: column;
                bottom: 0;
                left: 0%;
                transform: translate(0, 0);
                width: 75%;
                height: 37%;
	        }

 	        .apl1s_word1-2 {
		        display: flex;
                position: absolute;
                justify-content: flex-end;
                align-items: flex-end;
                flex-direction: column;
                bottom: 2%;
                right: 0;
                transform: translate(0, 0);
                width: 75%;
                height: 37%;
	        }

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

 	            .apl1s_txt {
		            display: block;
                    position: relative;
                    width: 100%;
                    margin-bottom: 1em;
	           }

 	        .apl1s_word2 {
                justify-content: flex-start;
                align-items: flex-start;
                flex-direction: column;
                margin: 0 auto;
                width: 90%;
	        }

 	        .apl1s_word2-1 {
                justify-content: flex-start;
                align-items: flex-start;
                flex-direction: column;
                margin: 0 auto;
                width: 90%;
	        }

    
	.pocess_4flex {  
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 2em auto;
        width: 80%;
	}

	    .pocess_4flex-d1 {  
            display: flex;
		    position: relative;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1em;
            width: 42%;
	    }

	    .pocess_4flex-d2 {  
            margin: 0 auto;
            width: 15px;
	    }

	        .pocess_4flex-d2::before {  
                content: "";
                position: absolute;
                width: 15px;
                height: 18px;
                background: #CCC;
                clip-path: polygon(100% 50%, 0 0, 0 100%);
	        }

	    .pocess_4flex-d2-1 {  
            display: block;
            margin: 0 auto;
            width: 15px;
            opacity: 0;
	    }
    
	        .pocess_4flex-d2-1::before {  
                content: "";
                position: absolute;
                width: 15px;
                height: 18px;
                background: #CCC;
                clip-path: polygon(100% 50%, 0 0, 0 100%);
	        }
    
    
	        .kno_gray_box_spc {
                width: 100%;
                overflow: auto;
	        }

	            .kno_gray_box_spc img {
                    width: 670px;
	            }
    
    
	.news_cover { 
        justify-content: space-between;
        align-items: stretch;
        margin: 4em auto 3em auto;
        width: 100%;
    }
 
    
	.pro_info { 
        margin: 2em auto;
        width: 100%;
    }

	    .pro_info-pic { 
            width: 46%;
        }

	    .pro_info-div { 
            width: 48%;
        } 

    
    
    
/* Footer */
	
}



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

		    .bannerli_txt {
                width: 45%;
                left: 50%;
                top: 60%;
             }
    
/* Wrapper */
	
/* area-container */
    
/* setting */

 		.about_2nflex {
            flex-wrap: wrap;
            justify-content: center;
        	margin: 2em auto;
            width: 85%;
		}

 		    .about_2nflex-div {
                flex-direction: row;
                justify-content: center;
                align-items: center;
                margin: 0 0 1em 0;
 		        padding: 2.5em 2em;
                width: 100%;
                border-radius: 50px;
                background: linear-gradient(to top, #ccc 0%, #fff 55%);
                box-shadow: 0 0 10px #CCC;
 		        &::before {
   		            content: "";
   		            position: absolute;
    		        inset: 0;
    		        border-width: 3px;
    		        border-style: solid;
     		        border-color: transparent;
     		        border-radius: 50px;
     		        background-image: linear-gradient(to top, #2855a5, #fff, #2855a5);
     		        background-origin: border-box;
    		        mask-image: linear-gradient(white, white), linear-gradient(white, white);
    		        mask-clip: padding-box, border-box;
    		        mask-composite: exclude, add;
   		        }
 		    } 
      
 		    .about_2nflex-div-pic {
				display: block;
                position: relative;
        		width: 25%;
                margin: auto 0 auto auto;
			}
    
 		    .about_2nflex-div-word {
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                margin: 0 auto;
                padding: 0 1em;
        		width: 70%;
                text-align: left;
			}
    
 		    	.about_2nflex-div-w-t {
					display: inline;
                	position: relative;
                    margin: auto auto 10px 0;
                    padding: 0 0 5px 0;
        			width: 100%;
                    text-align: left;
				}

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

	    .qc_flex-div-L1 {  
            display: flex;
		    position: relative;
            justify-content: flex-end;
            align-items: center;
            margin: 0;
		    width: 100%;
            order: 1;
	    }

	        .qc_flex-div-L1::after {  
                display: none;
	        }

	        .qc_flex-div-L1::before {  
                display: none;
	        }

	        .qc_flex-div-L1-abup {  
                display: none;
	        }

	        .qc_flex-div-L1-abdbm {  
                display: none;
	        }


	    .qc_flex-div-R1 {  
            display: flex;
		    position: relative;
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: 1em 0;
		    width: 100%;
            order: 2;
	    }

	    .qc_flex-div-L2 {  
            display: flex;
		    position: relative;
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: 1em 0;
		    width: 100%;
            order: 2;
	    }

	    .qc_flex-div-R2 {  
            display: flex;
		    position: relative;
            justify-content: flex-start;
            align-items: center;
            margin: 0;
		    width: 100%;
            background: #F2F2F2;
            order: 1;
	    }

	        .qc_flex-div-R2::after {  
                display: none;
	        }

	        .qc_flex-div-R2::before {  
                display: none;
	        }

	        .qc_flex-div-R2-abup {  
                display: none;
	        }

	        .qc_flex-div-R2-abbm {  
                display: none;
	        }

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

	    .qc-div-word {  
            justify-content: center;
            align-items: center;
		    width: 90%;
            height: 100%;
	    }
    
	         .qc-div-word-title {  
                 display: inline-block;
		         position: relative;
		         width: auto;
                 margin-bottom: 1em;
                 padding: 0.35em 1em;
                 border-top: none;
                 border-bottom: solid 1.5px #2855a5;
	         }

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

	        .kno_box_f1-d1 {  
                display: flex;
		        position: relative;
                flex-direction: column;
                justify-content: flex-start;
                align-items: stretch;
                margin-bottom: 1em;
		        width: 40%;
	        }

	        .kno_box_f1-d2 {  
                display: flex;
		        position: relative;
                justify-content: space-between;
                align-items: flex-start;
		        width: 8.6%;
	        }

	            .kno_box_f1-d1-txt {  
                    display: block;
		            position: relative;
                    justify-content: space-between;
                    align-items: stretch;
		            width: 100%;
                    margin: 0.5em 0 0 0;
                    padding: 0.5em 0 0 0;
                    text-align: center;
	            }

    
	.kno_box {  
        margin: 12% auto;
        padding: 2em 0;
	} 
       
	        .kno_talk_flex {
                flex-direction: column;
                justify-content: center;
                margin: 2em auto 1em auto;
                width: 100%;
	        }

	            .kno_talk_flex-div {
                    justify-content: center;
                    align-items: flex-start;
                    margin: 0 auto;
                    padding: 0 1em;
                    width: 75%;
	            }

    
    
	    .pro1_r2 { 
            flex-direction: column;
            margin: 2em auto -25% auto;
            padding: 0 5%;
            background: #FFF;
            width: 90%;
        }

	        .pro1_r2_div-le {
                margin: 1em auto;
                width: 100%;
                text-align: center;
                border: solid 1px #CCC;
                border-radius: 50px;
            }

	        .pro1_r2_div-ri { 
                width: 100%;
                text-align: center;
                border: solid 1px #CCC;
                border-radius: 50px;
            }
    

	    .pro_sub1_menu { 
            padding: 1em 0.5em;
        }    

 	        .pro_sub1_menu_div { 
                margin: 0 0.5em;
            }
    
 	        .pro_sub1_menu_div1 { 
                margin: 0 0.5em;
            }
    
	.pro_sub_box { 
        width: 100%;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        
    } 
    
    
    .pro_sub-prolist { 
        margin: 0 auto;
        width: 100%;
    }

	    .pro_sub-prolist-div { 
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            margin-bottom: 2em;
            width: 48%;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        }

        /* 如果最后一行是3个元素 */
        .pro_sub-prolist-div:last-child:nth-child(4n - 1) {
            margin-right: calc(24% + 4% / 3);
        }

        /* 如果最后一行是2个元素 */
        .pro_sub-prolist-div:last-child:nth-child(4n - 2) {
            margin-right: 0;
        }  
    
    
	.pro_info { 
        flex-direction: column;
        margin: 2em auto;
        width: 100%;
    }

	    .pro_info-pic { 
            width: 100%;
        }

	    .pro_info-div { 
            margin: 2em 0 0 0;
            width: 100%;
        }
    
	        .pro_info-nav { 
                display: none;
            }
    
	        .pro_info-mode { 
                display: inline-block;
                margin: 15px 0 5px 0;
		        width: 100%;
            }
    

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

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

    
	    .pro_spc { 
            width: 100%;
            overflow: auto;
        }

	        .pro_spc img { 
                width: 920px;
        }    
    
	    .pro_spc-big { 
            display: block;
            position: relative;
            width: 100%;
            overflow: auto;
        }

	        .pro_spc-big img { 
                display: block;
                position: relative;
                width: 1240px;
	        }    
    
    
	    .pro_spc-larg { 
            width: 100%;
            overflow: auto;
        }

	        .pro_spc-larg img { 
                width: 3000px;
	        }    
    
    
    
/* Footer */


	
}


/* Mobile */

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

/* header */	

/* banner */

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

	.pathcontainer {  
		width: 80%;
	}

	.bodycontainer1 {  
		width: 90%;
	}

	.bodycontainer2 {  
		width: 80%;
	}

	.bodycontainer3 {  
		width: 80%;
	}

	.bodycontainer4 {  
		width: 80%;
	}

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

	.pocess_note {  
        margin: 3em auto 0 auto;
        padding: 1em 0;
		width: 90%;
        border-top: solid 1px #bdbdbd;
	}

	.pocess_note_flex { 
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        margin: 0 auto;
        padding: 0;
        width: 90%;
	}

	    .pocess_note_flex-div {  
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            padding: 1em 0;
		    width: 100%;
            border-top: solid 1px #bdbdbd;
            border-right: none;
	    }

	        .pocess_note_flex-div:nth-child(odd) {  
                border-right: none;
	        }

	        .pocess_note_flex-div:nth-child(even) {  
                border-right: none;
	        }


	    .pocess_note_icon1 {  
            margin-right: 20px;
		    width: 18%;
            border: solid 1px #dcdcdc;
            border-radius: 20%;
	    }

	    .pocess_note_icon2 {  
            margin-right: 20px;
		    width: 18%;
            border: solid 1px #dcdcdc;
            border-radius: 20%;
	    }

	    .pocess_note_word1 {  
            display: block;
            position: relative;
            margin: 1em 0;
		    width: 80%;
	    }

	    .pocess_note_word2 {  
            display: block;
            position: relative;
            margin: 1em 0;
		    width: 80%;
            text-align: left;
	    }

	        .pocess_note_title {  
                margin: 0 0 0.5em 0;
		        width: 100%;
                text-align: left;
	        }
 
    
    
	.kno_box_pic {  
        margin: 0 auto;
        padding: 0;
		width: 100%;
	}

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

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

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

	    .news_show-div { 
            align-items: center;
            padding: 2em 1em;
            border-right: solid 0.5px #484848;
            padding-bottom: 0.2em;
            width: 100%;
        }

	        .news_show-div:nth-child(n+4) { 
                border-bottom: solid 0.5px #484848;
            }

	        .news_show-div:nth-last-child(-n+1) { 
                border-bottom: none;
            }

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


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

	    .news_show-div-title { 
            width: 100%;
            min-height: 3.5em;
            padding: 0.3em 0.3em;
            background: #E3E3E3;
            text-align: center;
        }

	    .news_show-div-word { 
            padding: 0.3em 0.3em;
        }
    
    
	.news_cover {
        justify-content: space-between;
        align-items: stretch;
        margin: 3em auto 3em auto;
        width: 100%;
    }

	    .news_cover-div { 
            margin-bottom: 20px;
            width: 47%;
            height: 100%;
        }
 
    
	.contact { 
        flex-direction: column;
        margin: 1em auto 0 auto;
        width: 90%;
    }

	    .contact-div1 { 
            margin: 0 auto;
            width: 80%;
        }
    
	    .contact-div2 { 
            justify-content: flex-start;
            align-items: flex-start;
            margin: 0 auto;
            padding: 1em;
            width: 80%;
        }      
      
    
	    .pro_wordpic_flex { 
            width: 100%;
        }

	        .pro_wordpic_flex-d1 { 
                width: 100%;
	        }   

	        .pro_wordpic_flex-d2 { 
                margin: 0 auto;
                width: 80%;
	        }  
    
    
    
    
    
    
/* Footer */

	
	
/* myBtn - go top */

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

}


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

/* banner */

		    .bannerli_txt {
                width: 45%;
                left: 50%;
                top: 60%;
             }
    
/* Wrapper */
	
/* area-container */	
	
/* setting */
    
    
	.indsolution2-c {
		display: block;
        position: relative;
		margin: -30% auto 2em auto;
		width: 100%;
        z-index: 1;
	}
    
	    .indsolution_txt1 {
            margin: 0 auto 0.5em auto;
            width: 48%;
            text-align: center;
	    }
	
    
 	.apl1sflex {
		display: flex;
        position: relative;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        margin: 1em auto 2em auto;
        width: 100%;
	}

 		.apl1sflex-div {
			display: inline-block;
        	position: relative;
            margin: 0 1em 1em 1em;
        	width: auto;
            border-bottom: solid 2px #2855A5;
		}

 		    .apl1sflex-div:hover {
			    color: #c43932;
                border-bottom: solid 2px #c43932;
		    }

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

 		    .apl1sflex-div a:hover {
			    color: #c43932;
		    }
    
    
	.pocess_4flex {  
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 2em auto;
        width: 85%;
	}

	    .pocess_4flex-d1 {  
            display: flex;
		    position: relative;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1em;
            width: 85%;
	    }

	    .pocess_4flex-d2 {  
            margin: 0 auto;
            width: 25px;
	    }

	        .pocess_4flex-d2::before {  
                content: "";
                position: absolute;
                width: 25px;
                height: 28px;
                background: #CCC;
                clip-path: polygon(100% 50%, 0 0, 0 100%);
	        }

	    .pocess_4flex-d2-1 {  
            display: block;
            margin: 0 auto;
            width: 25px;
            opacity: 0;
	    }
    
	        .pocess_4flex-d2-1::before {  
                content: "";
                position: absolute;
                width: 25px;
                height: 28px;
                background: #CCC;
                clip-path: polygon(100% 50%, 0 0, 0 100%);
	        }
    
    
	        .kno_talk_flex {
                margin: 2em auto 1em auto;
                width: 100%;
	        }

	            .kno_talk_flex-div {
                    justify-content: center;
                    align-items: flex-start;
                    width: 80%;
	            }
    
    
	        .pro_info-conten-word-bu { 
                margin: 5px 0;
                width: 100%;
            }

	            .pro_info-conten-word-bu-1 { 
                    width: 7.5em;
                }


	    .pro_profuflex { 
            flex-wrap: wrap;
            padding: 0.3em 0;
            margin: 0 auto 1em auto;
            width: 100%;
        }

	        .pro_profuflex-d1 { 
                justify-content: flex-start;
                align-items: flex-start;
                width: 20%;
                margin-bottom: 10px;
            }

	        .pro_profuflex-d2 { 
                display: block;
                position: relative;
                padding-left: 1em;
                width: 80%;
                margin-bottom: 10px;
                text-align: justify;
            }

	        .pro_profuflex-d3 { 
                margin: 0 auto;
                width: 90%;
                margin-bottom: 10px;
            }
 
    
	        .pro_info-conten-word-bu1 { 
                flex-direction: column;
                margin: 5px 0;
                width: 100%;
            }

	            .pro_info-conten-word-bu1-l { 
                    padding: 0.2em 0.5em;
                    width: 12em;
                }

	            .pro_info-conten-word-bu1-r { 
                    padding: 0.2em 0.5em;
                    flex: 1;
                }
    
    
    
    
    
/* Footer */
	

	
}

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

/* banner */

/* Wrapper */
	
/* area-container */	
	
/* setting */
    
    /*-- 首頁slick設定 --*/
	.instorslick {

	}

	    .instorslick-r1 {
            margin: 0 auto;
		    width: 100%;
            padding: 0 1.5em;
	    }

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

	        .instorslick-pic-b {
                margin: 1em auto;
		        display: block;
		        width: 100%;
	        }

	        .instorslick-txt {
		        display: none;
	        }
 
    
	.indsolution {
		display: block;
        position: relative;
		margin: 0 auto;
		width: 100%;
        background: url("../../images/pic_indsolution_bg_600.png"), url("../../images/pic_indsolution_bg_600_1.png");
        background-repeat: no-repeat, repeat-y;
        background-position: center bottom, center top;
        background-size: 100%;
	}

	    .indsolution img {
            display: none;
		    opacity: 0;
	   }
    
    	.indsolution-c {
		    display: block;
            position: relative;
            padding: 0.5em 0 1.5em 0;
            top: 0;
            transform: translate(0, 0);
		    width: 100%;
	    }
    
    
	.indsolution1 {
		display: none;
	}

	    .indsolution_txt1 {
            margin: 1.5em auto 0.5em auto;
            width: 80%;
            text-align: center;
	    }
    
    
    
 		.indqc_div1 {

		}
    
 			.indqc_div1-c-flex {
                flex-wrap: wrap;
                margin: 1em 0 0.5em 0;
           	    width: 100%;
			}

 				.indqc_div1-c-flex-div {
                    margin-bottom: 1em;
           	    	width: 48%;
				}
    
    
 	.ind3flex {
		flex-direction: column;
	}

 	    .ind3flex-div {
			width: 100%;
			height: 100%;
		} 
    

 	.aboutarea {
        background-image: none;
	}

 	.about_pic1 {
		display: block;
        margin: 0 auto;
        width: 90%;
        height: auto;
	}
    
    
	.kno_box {  
        margin: 15% auto;
        padding: 2em 0;
	}   
    
	        .kno_talk_flex {
                margin: 2em 0 1em 0;
                width: 100%;
	        }

	            .kno_talk_flex-div {
                    justify-content: center;
                    align-items: flex-start;
                    padding-right: 1.15em;
                    width: 100%;
	            }
    
    
	        .kno_gray_box_gam {
                flex-direction: column;
                justify-content: center;
                align-self: stretch;
                margin: 1em auto 0 auto;
                padding: 1em 0 0 0;
                width: 95%;
                border-top: solid 2px #bdbdbd;
	        }

	            .kno_gray_box_gam-list {
                    margin: 0 auto 0.5em auto;
                    width: 70%;
	            }
    
    
	    .pro_proapicon { 
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            position: relative;
            justify-content: flex-start;
            align-items: stretch;
            margin: 0 auto 1em auto;
            width: 100%;
        }
    
	        .pro_proapicon-div { 
                width: 100%; 
                margin-right: 0; 
                margin-bottom: 10px;
                box-sizing: border-box;
            }
 
	            .pro_proapicon-div-word { 
                    padding-right: 0;
                }
    
    
	    .pro_proser { 
            display: block;
            position: relative;
            margin: 1em auto;
            width: 100%;
        }
    
	        .pro_proser img { 
                display: block;
                position: relative;
                width: 100%;
            }
    
    
    

/* area setting */

	.timelinearea {
		margin: 0 auto;
		width: 90%;
	}
 
	
/* Footer */
	
		#footer .fre2 {

	     }
	
		    #footer .fre2-d2-div {
				margin-bottom: 20px;
			    width: 33%;
		    }

}

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

	.mlogo {

	}
	
	    .mlogo img {
		    display: block;
			width: 130px;
	    }
	
/* banner */

		    .bannerli_txt {
                width: 50%;
                left: 50%;
                top: 60%;
             }
    

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

    
	.pocess_note {  
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin: 3em auto 0 auto;
        padding: 1em 0;
		width: 90%;
        border-top: solid 1px #bdbdbd;
	}

	.pocess_note_flex { 
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        padding: 0;
		width: 90%;
	}

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


	    .pocess_note_icon1 {  
            margin-right: 0;
		    width: 28%;
            border-radius: 20%;
	    }

	    .pocess_note_icon2 {  
            margin-right: auto;
		    width: 28%;
            border-radius: 20%;
	    }

	    .pocess_note_word1 {  
            position: relative;
            margin: 1em 0;
		    width: 100%;
	    }

	    .pocess_note_word2 {  
            position: relative;
            margin: 1em 0;
		    width: 100%;
            text-align: center;
	    }

	        .pocess_note_title {  
                margin: 0 0 0.5em 0;
		        width: 100%;
                text-align: center;
	        }
    
    
	        .kno_gray_box_gam {
                flex-direction: column;
                justify-content: center;
                align-self: stretch;
                margin: 1em auto 0 auto;
                padding: 1em 0 0 0;
                width: 95%;
	        }

	            .kno_gray_box_gam-list {
                    margin: 0 auto 0.5em auto;
                    width: 85%;
	            }

    
	    .pro_wordpic_flex { 
            width: 100%;
        }

	        .pro_wordpic_flex-d1 { 
                width: 100%;
	        }   

	        .pro_wordpic_flex-d2 { 
                margin: 0 auto;
                width: 100%;
	        }  
    
    

    
    

    
/* Footer */

	
	
}

@media screen and (max-width: 480px) {
		
    .pro_sub-prolist { 
        margin: 0 auto;
        width: 100%;
    }

	    .pro_sub-prolist-div { 
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            margin-bottom: 2em;
            width: 100%;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        }

        /* 如果最后一行是3个元素 */
        .pro_sub-prolist-div:last-child:nth-child(4n - 1) {
            margin-right: calc(24% + 4% / 3);
        }

        /* 如果最后一行是2个元素 */
        .pro_sub-prolist-div:last-child:nth-child(4n - 2) {
            margin-right: 0;
        }  

}


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

	.mlogo {

	}
	
	    .mlogo img {
		    display: block;
			width: 110px;
	    }
	
/* banner */


/* Wrapper */
	
	
/* area-container */	
	
	
/* setting */
    
	.kno_box {  
        margin: 70px auto;
        padding: 2em 0;
	}    
	
	.news_cover {
        justify-content: space-between;
        align-items: stretch;
        margin: 3em auto 3em auto;
        width: 90%;
    }

	    .news_cover-div { 
            margin-bottom: 10px;
            width: 100%;
            height: 100%;
        } 
    
    
	.contact { 
        flex-direction: column;
        margin: 1em auto 0 auto;
        width: 90%;
    }

	    .contact-div1 { 
            width: 100%;
        }
    
	    .contact-div2 {
            padding: 1em;
            width: 100%;
        }       
    
    
/* Footer */


}


@media screen and (max-width: 370px) {
	
     
    
	.QA { 
        
    }

        .qa-title { 
            display: flex;
            position: relative;
            justify-content: flex-start;
            align-items: flex-start;
            padding: 0.55em 20px 0.5em 40px;
            width: 100%;
            min-height: 50px;
            border-top: solid 1px #CCC;
            cursor: pointer; 
         }
	
}


@media screen and (max-width: 280px) {
	
	.mlogo {

	}
	
	    .mlogo img {
		    display: block;
			width: 100px;
	    }
	
	#myBtn {
		bottom: 1em;
		right: 0.5em;
		width: 40px;
		height: 40px;
	}
	

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

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

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

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

					#navButton .toggle:after {
						background: #2855A5;
						border-radius: 5px;
						content: '';
						width: 35px;
						height: 35px;
						left: 10px;
						position: absolute;
						top: 10px;
					}
	
			#navPanel {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transform: translateX(-180px);
				-webkit-transform: translateX(-180px);
				-ms-transform: translateX(-180px);
				transform: translateX(-180px);
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 100%;
				left: 0;
				overflow-y: auto;
				position: fixed;
				top: 0;
				width: 180px;
				z-index: 10002;
				background: #1c2021;
				color: #fff;
				font-size: 0.8em;
				letter-spacing: 0.075em;
				text-transform:none;
				padding: 0.25em 0.75em 1em 0.75em;
			}
	
	
			body.navPanel-visible #page-wrapper {
				-moz-transform: translateX(180px);
				-webkit-transform: translateX(180px);
				-ms-transform: translateX(180px);
				transform: translateX(180px);
			}

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

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




/*-------------滑鼠.hover--------------*/


.proicon {
	position:relative;
	width:100%;
	height:100%;
	float:left;
	overflow:hidden;
	text-align:center;
	cursor:default;
}

.proicon img {
	display:block;
	position:relative;
	-webkit-transition:all .4s linear;
	transition:all .4s linear;
}

.proicon:hover img {
	-ms-transform:scale(1.1);
	-webkit-transform:scale(1.1);
	transform:scale(1.1);
}

.proicon:hover .overlay{
	opacity:1;
	filter:alpha(opacity=100);
}

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

.proiconab {
	display: block;
	position:absolute;
	overflow:hidden;
    padding: 2px 5px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #FFF;
}