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

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

/* Reset */

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

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

	body {
		line-height: 1;
	}

	ol, ul {
		list-style: none;
	}

	blockquote, q {
		quotes: none;
	}

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

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

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


	img {
		display: block;
	}

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

	    .body1 {
	        background-color: #F1F1F1;
	    }


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

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

	strong, b {
		font-weight: 400;
	}

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

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

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

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

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

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

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

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

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


/* header */

	#header {
		display: block;
		position: absolute;
		margin: 0 auto;
		cursor: default;
		background: rgba(255,255,255,0.9);
		width: 100%;
		height: 91px;
		z-index: 999;
		overflow: hidden;
		border: solid 0px #000;
	}

		#header nav {
			display: flex;
			display: -webkit-flex; /* Safari */
			position: relative;
			justify-content: flex-end;
			align-items: flex-start;
			width: 100%;
			height: auto;
		    font-size: 1.15em;
			font-weight: bold;
			z-index: 999;
		}


			#header nav ul li {
				display: inline-flex;
				align-items: center;
				margin: 0 10px;
				padding: 5px 15px;
				color: #333333;
			}

			#header nav ul li:last-child {
				display: none;
				margin: 0;
				padding: 0;
				height: auto;
			}

			#header nav ul li:nth-last-child(-n+2) {
				display: none;
				margin: 0;
				padding: 0;
				height: auto;
			}


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

			#header nav ul li a {

			}

				#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 {
					min-width:;
					width: auto;
				}

				#header nav ul li.submenu {
					font-weight: normal;
					color: #333333;
					text-decoration: none;
				}

				#header nav ul li.submenu:hover {
					padding-bottom: 5px;
					font-weight: bold;
					color: #2B346F;
					border-bottom: solid 3px #2B346F;
				}

				#header nav ul li.submenu1 {
					padding-bottom: 5px;
					color: #2B346F;
					border-bottom: solid 3px #2B346F;
				}

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

					#header nav ul li.submenu > a:after {
						-moz-osx-font-smoothing: grayscale;
						-webkit-font-smoothing: antialiased;
						font-family: FontAwesome, "Arial",sans-serif, serif;
						font-style: normal;
						font-weight:400;
						text-transform: none !important;
					}

					#header nav ul li.submenu > a:after {
						margin-left: 0.3em;
						content: '\f0d7';
					}

					#header nav ul li.submenu1 > a:after {
						-moz-osx-font-smoothing: grayscale;
						-webkit-font-smoothing: antialiased;
						font-family: FontAwesome, "Arial",sans-serif, serif;
						font-style: normal;
						font-weight:400;
						text-transform: none !important;
					}

					#header nav ul li.submenu1 > a:after {
						margin-left: 0.3em;
						content: '\f0d7';
					}

				#header nav ul li.active > a, #header nav ul li:hover > a {
					-moz-transition: all 0.2s ease-in-out;
					-webkit-transition: all 0.2s ease-in-out;
					-ms-transition: all 0.2s ease-in-out;
					transition: all 0.2s ease-in-out;
					/*background: rgba(188, 202, 206, 0.15);*/
					/*border-top: solid 22px #008BD3;*/
				}


				#header nav ul li.current {
					font-weight: normal;
					color: #333;
				}

				#header nav ul li.current:hover {
					padding-bottom: 5px;
					font-weight: bold;
					color: #2B346F;
					border-bottom: solid 3px #2B346F;
				}

				#header nav ul li.current1 {
					color: #2B346F;
					padding-bottom: 5px;
					border-bottom: solid 3px #2B346F;
				}

				#header nav ul li.current1 a {
					color: #2B346F;
				}


		#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;
			background:;
			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 {
					/*border: solid 1px #FFF;*/
				}

		.headlogo {
			display: block;
			position: absolute;
			top: 22px;
			left: 0;
		    width: 198px;
			height: auto;
			z-index: 9999;
		}

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


		.mlogo {
			display: none;
		}


/* Dropotron 選單子層 */

	.dropotron {
		background: rgba(255, 255, 255, 0.8);
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.075);
		line-height: 2em;
		min-width: 7.5em;
		width: auto;
		padding: 0;
		text-transform: none;
		margin-top: calc(0 + 0);
		text-align: center;
		color: #4D4D4D;
		border: solid 0px #FFF;
	}

		.dropotron.level-0 {
			font-size: 1.1em;
			font-weight: normal;
			/*text-transform:uppercase;*/
			margin-top: 0;
			margin-left: 0;
		}

			.dropotron.level-0:before {
				border-bottom: solid 0.5em transparent;
				border-left: solid 0.5em transparent;
				border-right: solid 0.5em transparent;
				content:'';
				left: 0em;
				position: absolute;
				top: 0em;
			}

		.dropotron > li {
			border-top: solid 0.5px #FFF;
		}

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

			.dropotron > li:hover > a {
				background: rgba(43,52,111,0.8);
				color: #FFF;
			}

			.dropotron > li:first-child {
				border-top: 0;
			}


/* banner */

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

	    .banner img {
		     width: 100%;
	    }

		.inner {
			display: block;
			position: relative;
			margin: 0 auto;
			padding: 0;
			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-fill-mode: 1;
			-ms-animation-fill-mode: forwards;
			-o-animation-name: inneract;
			-o-animation-duration: 1s;
			-o-animation-fill-mode: 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;}
		    }


	.bannerab1 {
		display: block;
		position: absolute;
		margin: 0 auto;
		opacity: 0;
		z-index: 110;
	
		-moz-animation-name: head1;
		-moz-animation-duration: 1s;
		-moz-animation-delay: 0.5s;
		-moz-animation-iteration-count: 1;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: head1;
		-webkit-animation-duration: 1s;
		-webkit-animation-delay: 0.5s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: head1;
		-ms-animation-duration: 1s;
		-ms-animation-delay: 0.5s;
		-ms-animation-iteration-count: 1;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: head1;
		-o-animation-duration: 1s;
		-o-animation-delay: 0.5s;
		-o-animation-iteration-count: 1;
		-o-animation-fill-mode: forwards;
		animation-name: head1;
		animation-duration: 1s;
		animation-delay: 0.5s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}

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

		    @keyframes head1 {
			    0%    {bottom: 20%;  opacity:0;}
			    100%  {bottom: 9.5%; opacity:1;}
		    }

	.bannerab2 {
		display: block;
		position: absolute;
		margin: 0 auto;
		width: 20%;
		z-index: 150;
		opacity: 0;
	
		-moz-animation-name: head2;
		-moz-animation-duration: 1s;
		-moz-animation-delay: 0.5s;
		-moz-animation-iteration-count: 1;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: head2;
		-webkit-animation-duration: 1s;
		-webkit-animation-delay: 0.5s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: head2;
		-ms-animation-duration: 1s;
		-ms-animation-delay: 0.5s;
		-ms-animation-iteration-count: 1;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: head2;
		-o-animation-duration: 1s;
		-o-animation-delay: 0.5s;
		-o-animation-iteration-count: 1;
		-o-animation-fill-mode: forwards;
		animation-name: head2;
		animation-duration: 1s;
		animation-delay: 0.5s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}

		    @keyframes head2 {
			    0%    {top: 58%; left: 0%;   opacity: 0;}
			    100%  {top: 58%; left: 8.3%; opacity: 1;}
		    }

	.bannerab3 {
		display: block;
		position: absolute;
		margin: 0 auto;
		width: 20%;
		z-index: 150;
		opacity: 0;
	
		-moz-animation-name: head3;
		-moz-animation-duration: 1s;
		-moz-animation-delay: 1s;
		-moz-animation-iteration-count: 1;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: head3;
		-webkit-animation-duration: 1s;
		-webkit-animation-delay: 1s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: head3;
		-ms-animation-duration: 1s;
		-ms-animation-delay: 1s;
		-ms-animation-iteration-count: 1;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: head3;
		-o-animation-duration: 1s;
		-o-animation-delay: 1s;
		-o-animation-iteration-count: 1;
		-o-animation-fill-mode: forwards;
		animation-name: head3;
		animation-duration: 1s;
		animation-delay: 1s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}

		    @keyframes head3 {
			    0%    {top: 56%; left: 77%;  opacity: 0;}
			    100%  {top: 56%; left: 77%; opacity: 1;}
		    }

	.bannerab4 {
		display: block;
		position: absolute;
		margin: 0 auto;
		color: #F1E219;
		width: 28%;
		z-index: 150;
		opacity: 0;
	
		-moz-animation-name: head4;
		-moz-animation-duration: 1s;
		-moz-animation-delay: 1s;
		-moz-animation-iteration-count: 1;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: head4;
		-webkit-animation-duration: 1s;
		-webkit-animation-delay: 1s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: head4;
		-ms-animation-duration: 1s;
		-ms-animation-delay: 1s;
		-ms-animation-iteration-count: 1;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: head4;
		-o-animation-duration: 1s;
		-o-animation-delay: 1s;
		-o-animation-iteration-count: 1;
		-o-animation-fill-mode: forwards;
		animation-name: head4;
		animation-duration: 1s;
		animation-delay: 1s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}

		    @keyframes head4 {
			    0%    {top: 68%; left: 8.3%; opacity: 0;}
			    100%  {top: 68%; left: 8.3%; opacity: 1;}
		    }


	.bannerab2-page {
		display: block;
		position: absolute;
		margin: 0 auto;
		width: 20%;
		z-index: 150;
		opacity: 0;
	
		-moz-animation-name: head2-page;
		-moz-animation-duration: 1s;
		-moz-animation-delay: 0.5s;
		-moz-animation-iteration-count: 1;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: head2-page;
		-webkit-animation-duration: 1s;
		-webkit-animation-delay: 0.5s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: head2-page;
		-ms-animation-duration: 1s;
		-ms-animation-delay: 0.5s;
		-ms-animation-iteration-count: 1;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: head2-page;
		-o-animation-duration: 1s;
		-o-animation-delay: 0.5s;
		-o-animation-iteration-count: 1;
		-o-animation-fill-mode: forwards;
		animation-name: head2-page;
		animation-duration: 1s;
		animation-delay: 0.5s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}

		    @keyframes head2-page {
			    0%    {top: 52%; left: 0%;   opacity: 0;}
			    100%  {top: 52%; left: 8.3%; opacity: 1;}
		    }

	.bannerab4-page {
		display: block;
		position: absolute;
		margin: 0 auto;
		color: #F1E219;
		width: 28%;
		z-index: 150;
		opacity: 0;
	
		-moz-animation-name: head4-page;
		-moz-animation-duration: 1s;
		-moz-animation-delay: 1s;
		-moz-animation-iteration-count: 1;
		-moz-animation-fill-mode: forwards;
		-webkit-animation-name: head4-page;
		-webkit-animation-duration: 1s;
		-webkit-animation-delay: 1s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
		-ms-animation-name: head4-page;
		-ms-animation-duration: 1s;
		-ms-animation-delay: 1s;
		-ms-animation-iteration-count: 1;
		-ms-animation-fill-mode: forwards;
		-o-animation-name: head4-page;
		-o-animation-duration: 1s;
		-o-animation-delay: 1s;
		-o-animation-iteration-count: 1;
		-o-animation-fill-mode: forwards;
		animation-name: head4-page;
		animation-duration: 1s;
		animation-delay: 1s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}

		    @keyframes head4-page {
			    0%    {top: 65%; left: 8.3%; opacity: 0;}
			    100%  {top: 65%; left: 8.3%; opacity: 1;}
		    }





	.path {
		display: block;
		position: absolute;
		left: 8.5%;
		bottom: 0;
		color: #4D4D4D;
		font-size: 1em;
		z-index: 99;
		opacity: 1;
	}


/* 語系 */

	#pretty-select {
	    display: block;
		position: relative;
		float: right;
		min-width: 8.1em;
		font-size: 1em;
		cursor: default;
		z-index: 9999;
	}	
	
	.pretty-select {
		/*移除箭頭樣式*/
		appearance:none;
		-moz-appearance:none;
		-webkit-appearance:none;

		/*改變右邊箭頭樣式*/
		background:url("../../images/select1.svg"), url("../../images/select.svg");
		background-position: left center, right center;
		background-repeat: no-repeat;
		outline: none;
		cursor: pointer;
		padding-left: 1.5em;
		width: 100%;
		color: #4D4D4D;
		border: none;
		border: solid 1px #4D4D4D;
		border-radius: 50px;
	}

	/* IE隱藏箭頭樣式 */
	.pretty-select::-ms-expand { 
		display: none; 
	}

	.pretty-select:focus {
	    box-shadow: ;
	}

    /* 知識庫 */
	.kno { 
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 30px;
		padding: 0 14px 0 3px;
		border: solid 1px #333333;
	    border-radius: 25px;
	}

	    .kno img { 
			display: inline-block;
			width: 30px;
			height: 30px;
	    }


	.kno1 { 
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 30px;
		padding: 0 14px 0 3px;
		border: solid 1px #333333;
	    border-radius: 25px;
		background: #333333;
		color: #FFF ;
	}

	    .kno1 img { 
			display: inline-block;
			width: 30px;
			height: 30px;
	    }


/* area-container */

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

	.bodycontainer1 {  
		position: relative;
		margin: 40px auto;
		width: 83%;
	}

	.bodycontainer1-0margin {  
		position: relative;
		margin: 0px auto;
		width: 83%;
	}

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

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

	.bodycontainer4 {  
		position: relative;
		margin: 30px auto 60px auto;
		width: 74.5%;
	}

	.bodycontainer-p {  
		position: relative;
		margin: 40px auto 0 auto;
		width: 83%;
	}

	.bodycontainer-p-c {  
		position: relative;
		margin: 0 auto;
		width: 90%;
	}

	.footercontainer {  /* footer */
		position: relative;
		margin: 0 auto;
		width: 83%;
	}


/* Wrapper */

	.wrapper {
		position: relative;
		padding:;
	}

		.wrapper.stylebar {  /* 最上面iconbar */
			width: 100%;
			display: block;
			justify-content: flex-end;
			align-items: stretch;
			position: relative;
			padding: 15px 0 5px 0;
			z-index: 999;
		}

		    .iconbar {  /* nav上面的bar */
				display: flex;
				justify-content: flex-end;
				align-items: center;
			    position: relative;
		     }

		        .iconbar img {  
				    display: block;
					height: 22px;
					margin-right: 10px;
		         }

		        .iconbar img:hover {  
				    opacity: 0.7;
		         }

		    .topbarbox1 {  
				display: flex;
				align-items: center;
				background-color: #999999;
				padding: 5px 14px;
				color: #FFF;
				font-size: 1.3em;
				letter-spacing: 1px;
		     }

		    .topbarbox2 { 
				display: flex;
				align-items: center;
				background-color: #999999;
				margin-left: 10px;
				padding: 5px 5px;
				color: #FFF;
				letter-spacing: 1px;
		     }

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

		.wrapper.style2 {  
			display: block;
			background-color: #F1F1F1;
			margin: 0 auto;
			padding: 3em 0;
			width: 100%;
		}

		.wrapper.style3 {  
			display: block;
			margin: 0 auto;
			padding: 2em 0;
			width: 100%;
		}

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


/* setting */

	.indap1 {  
		display: block;
	    margin: -90px auto 0 auto;
		padding-bottom: 90px;
		width: 100%;
		background-image: url("../../images/pic_indap_bg1.png");
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: 100%;
		z-index: 1;
	}

	.indap2 {  
		display: block;
		position: relative;
	    margin: 0 auto;
		width: 100%;
		background-image: url("../../images/pic_indap_bg2.png"), url(../../images/pic_indap_bg2-2.png);
		background-repeat: no-repeat, repeat-y;
		background-position: center top, center bottom;
		background-size: 100%;
		z-index: 9;
	}

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

	.indap3 {  
		display: block;
	    margin: 0 auto;
		width: 100%;
		background-image: url("../../images/pic_indap_bg3.png");
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 100%;
		z-index: 1;
	}

	.indap4 {  
		display: block;
	    margin: 0 auto;
		width: 100%;
		background-image: url("../../images/pic_indap_bg4.png");
		background-repeat: repeat-y;
		background-position: center top;
		background-size: 100%;
		z-index: 1;
	}

	.indap5 {  
		display: block;
	    margin: 0 auto;
		width: 100%;
		background-image: url("../../images/pic_indap_bg5.png");
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 100%;
		z-index: 1;
	}

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

	.indap6 {  
		display: block;
	    margin: 0 auto;
		width: 100%;
		z-index: 1;
	}

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

	    .ind5flex-d1 {  
		    display: block;
		    position: relative;
			width: 19%;
	    }

	    .ind5flex-d2 {  
		    display: block;
		    position: relative;
			margin-top: 100px;
			width: 19%;
	    }

	    .ind5flex-d3 {  
		    display: block;
		    position: relative;
			margin-top: 150px;
			width: 19%;
	    }

	        .ind5flex-d1 img, .ind5flex-d2 img, .ind5flex-d3 img  {  
		       display: block;
			   width: 100%;
	        }


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

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

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

	        .ind5flex-ddab1 img, .ind5flex-ddab2 img, .ind5flex-ddab3 img  {  
		       display: block;
			   width: 100%;
	        }


	.ind7proflex {  
		display: flex;
		position: relative;
		justify-content: center;
	    margin: 0 auto;
		padding: 60px 0 30px 0;
		width: 100%;
	}

	    .ind7proflex-div {  
		    display: block;
		    position: relative;
			width: 14%;
			overflow: hidden;
	    }

	        .ind7proflex-divpic {  
		        display: block;
		        position: relative;
			    width: 100%;
				background-color: #FFF;
	        }

	            .ind7proflex-divpic img  {  
		           display: block;
			       width: 100%;
					
	            }

	            .ind7proflex-divpic:hover  {  
	            	-ms-transform: scale(1.2);
	            	-ms-transition: all .2s linear;
	            	-webkit-transform: scale(1.2);
					-webkit-transition: all .2s linear;
	            	transform: scale(1.2);
					transition: all .2s linear;
	            }

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

	            .ind7proflex-divpic .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;
	            }

	            .ind7proflex-divpicab {
		            display: flex;
					justify-content: center;
					align-items: center;
		            position: absolute;
		            overflow: hidden;
   	                padding: 2px 5px;
		            top: 50%;
		            left: 50%;
		            transform: translate(-50%, -40%);
		            color: #FFF;
					text-align: center;
					font-size: 0.9em;
					line-height: 110%;
	            }

	                .ind7proflex-divpicab img {
						display: inline-block;
						margin-left: 2px;
						top: 5px;
						width: 18px;
						height: 18px;
	                }

	        .ind7proflex-divname {  
		        display: block;
		        position: relative;
				padding: 10px 20px;
			    width: 100%;
				background-color: #29AAE1;
				border: solid 2px #FFF;
				color: #FFF;
				text-align: center;
				font-size: 1.3em;
	        }

	                .ind7proflex-divname a {
						color: #FFF;
	                }

	                .ind7proflex-divname a:hover {
						color: #FFF;
						font-size: 110%;
	                }

	.ind2fucflex {  
		display: flex;
		position: relative;
		flex-wrap: wrap;
		justify-content: space-between;
	    margin: 0 auto 70px auto;
		width: 100%;
		background-image: url("../../images/pic_indap_bg6.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center top;
	}

	    .ind2fucflex-div1 {
		    display: flex;
			justify-content: flex-start;
			align-items: stretch;
			margin-bottom: 10px;
			padding: 25px 10px;
		    width: 49.03%;
			background-image: url("../../images/pic_twobox1.png");
			background-repeat: no-repeat;
			background-size: cover;
			background-position: right center;
	    }

	    .ind2fucflex-div2 {
		    display: flex;
			justify-content: flex-start;
			align-items: stretch;
			margin-bottom: 10px;
			padding: 25px 10px;
		    width: 49.05%;
			background-image: url("../../images/pic_twobox2.png");
			background-repeat: no-repeat;
			background-size: cover;
			background-position: right center;
	    }

	    .ind2fucflex-div3 {
		    display: flex;
			justify-content: flex-start;
			align-items: stretch;
			margin-top: 10px;
			padding: 25px 10px;
		    width: 49.05%;
			background-image: url("../../images/pic_twobox3.png");
			background-repeat: no-repeat;
			background-size: cover;
			background-position: right center;
	    }

	    .ind2fucflex-div4 {
		    display: flex;
			justify-content: flex-start;
			align-items: stretch;
			margin-top: 10px;
			padding: 25px 10px;
		    width: 49.05%;
			background-image: url("../../images/pic_twobox4.png");
			background-repeat: no-repeat;
			background-size: cover;
			background-position: right center;
	    }

	        .ind2fucflex-div-c-left {
		        display: flex;
				flex-direction: column;
				width: 40%;
	        }

	            .ind2fucflex-div-c-left-pic {
		            display: block;
					margin: 0 auto 15px auto;
				    width: 45%;
	            }

	            .ind2fucflex-div-c-left-pic img {
		            display: block;
				    width: 100%;
	             }

	.machine1 {  
		display: block;
		position: absolute;
		width: 20%;
		max-width: 380px;
		top: 38%;
		left: 8%;
		transform: translate(0, -50%);
	}

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


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

	    .knoqaflex-div {  
		    display: flex;
		    position: relative;
			flex-direction: column;
			background-color: #F1F1F1;
			margin: 15px 0;
			padding: 0 50px 40px 50px;
		    width: 49%;
			text-align: justify;
	    }

	        .knoqaflex-divno1 {  
				display: inline-block;
				position: relative;
				background-color: #0071BB;
				margin: 0 auto;
				padding: 10px 15px;
				width:;
				font-size: 2.2em;
				color: #FFF;
				text-align: center;
				letter-spacing: 2px;
	        }

	        .knoqaflex-divno2 { 
				display: inline-block;
				font-size: 75%;
	        }

	        .knoqaflex-divtitle {  
				display: inline-block;
				position: relative;
				margin: 20px auto;
				padding: 15px 0;
				width: 100%;
				font-size: 1.7em;
				color: #0071BB;
				text-align: center;
				letter-spacing: 1px;
				border-bottom: solid 1px #0071BB;
	        }


	.knopic1 {  
		display: block;
		position: relative;
	    margin: 20px 0 0 auto;
		width: 45%;
	}

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

	.knopic2 {  
		display: block;
		position: relative;
	    margin: 20px 0 0 auto;
		width: 30%;
	}

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

	.knopic3 {  
		display: block;
		position: relative;
	    margin: 20px 0 0 auto;
		width: 25%;
	}

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


	.appk5flex {  
		display: flex;
		flex-wrap: wrap;
		position: relative;
		justify-content: center;
		margin: 30px auto;
		width: 75%;
	}

	    .appk5flex-div {  
		    display: inline-block;
		    position: relative;
			margin: 5px 10px;
			padding: 5px 20px 4px 20px;
		    min-width: 14em;
			text-align: center;
			color: #293D82;
			border: solid 1px #293D82;
			cursor: pointer;
	    }

	        .appk5flex-div:hover {  
			    background-color: #293D82;
			    color: #FFF;
			    border: solid 1px #293D82;
	        }


	.apppic4flex {  
		display: flex;
		flex-wrap: wrap;
		position: relative;
		justify-content: space-between;
		margin: 30px auto;
		width: 80%;
	}

	    .apppic4flex-div {  
		    display: inline-block;
		    position: relative;
			margin: 10px 0;
			width: 24%;
	    }

	        .apppic4flex-divpic {  
		        display: block;
				margin-bottom: 10px;
			    width: 100%;
	         }

	            .apppic4flex-divpic img {  
		            display: block;
			        width: 100%;
	             }

	        .apppic4flex-divname {  
		        display: block;
				margin-top: 10px;
				padding: 10px 5px;
			    width: 100%;
				border-top: solid 1px #293D82;
				text-align: center;
				line-height: 145%;
	         }


	.apppic3flex {  
		display: flex;
		flex-wrap: wrap;
		position: relative;
		justify-content: space-between;
		margin: 30px auto;
		width: 80%;
	}

	    .apppic3flex-div {  
		    display: inline-block;
		    position: relative;
			margin: 10px 0;
			width: 32%;
	    }

	        .apppic3flex-divpic {  
		        display: block;
				margin-bottom: 10px;
			    width: 100%;
	         }

	            .apppic3flex-divpic img {  
		            display: block;
			        width: 100%;
	             }


	.prokind7flex {  
		display: flex;
		flex-wrap: wrap;
		position: relative;
		justify-content: center;
		align-items: stretch;
		margin: 30px auto;
		width: 80%;
	}

	    .prokind7flex-div {  
		    display: inline-block;
		    position: relative;
			margin: 0 5px 50px 5px;
			width: 23%;
	    }

	        .prokind7flex-divpic {  
		        display: block;
				position: relative;
				background-image: url("../../images/pic_pkindbg.png");
				background-repeat: no-repeat;
				background-position: center bottom;
				background-size: 100%;
				margin-bottom: 10px;
			    width: 100%;
	         }

	            .prokind7flex-divpic img {  
		            display: block;
			        width: 100%;
	             }

	            .prokind7flex-divpic img:hover {  
		            -ms-transform: scale(1.15);
	            	-ms-transition: all .3s linear;
	            	-webkit-transform: scale(1.15);
					-webkit-transition: all .3s linear;
					transform: scale(1.15);
					transition: all .3s linear;
					transform-origin: bottom center;
	             }

	            .prokind7flex-div:hover .prokind7flex-divpic {  
		            background-image: url("../../images/pic_pkindbg2.png");
	             }

	    .prokind7flex-divname {  
		    display: block;
		    padding: 5px 5px;
		    width: 100%;
		    text-align: center;
		    line-height: 145%;
			color: #293D82;
	    }
	

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

	    .qc2flex-div {  
		    display: inline-block;
		    position: relative;
			margin: 10px 15px;
			padding: 5px 50px;
			border: solid 1px #29A9E0;
			color: #29A9E0;
			text-align: center;
			cursor: pointer;
	    }

	        .qc2flex-div:hover {  
			    border: solid 1px #29A9E0;
			    background-color: #29A9E0;
				color: #FFF;
	        }

	.qc2atitle {  
		display: inline;
		position: relative;
		margin: 0 auto;
		padding: 0 10px;
		width: 100%;
		color: #293D82;
		text-align: center;
		padding-bottom: 5px;
		border-bottom: solid 3px #293D82;
	}

	.qc2txt {  
		display: flex;
		justify-content: center;
		margin: 30px auto;
	}

	.qc2txt1 {  
		display: block;
		margin: 30px auto;
		text-align: justify;
	}

	.qc2gboxtxt {  
		display: block;
		margin: 30px auto 10px auto;
		padding: 5px 0;
		text-align: center;
		color: #293D82;
		background-color: #E5E5E5;
	}

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

	    .qc6cfflex-div {  
		    display: block;
			position: relative;
			margin: 10px 5px;
			width: 24%;
	    }

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

	    .qc6cfflex-div-name {  
		    display: block;
			position: relative;
			margin-top: 20px;
			padding: 5px 0;
			border-top: solid 1px #293D82;
			width: 100%;
	    }

	        .qc6cfflex-div-pic img, .qc6cfflex-div-name img {  
		       display: block;
			   width: 100%;
	        }

	    .qc6cfflex-div-txt {  
		    display: block;
			position: relative;
			color: #666666;
			text-align: center;
			line-height: 145%;
	    }


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

	    .qctestflex-div {  
		    display: block;
			position: relative;
			margin: 10px 0;
			width: 24%;
	    }

	        .qctestflex-div img {  
		        display: block;
			    width: 100%;
				border: solid 1px #293D82;
	        } 

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

	    .rd3flex-div {  
		    display: block;
			position: relative;
			margin: 10px 0;
			width: 32%;
	    }

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


	.rdtititle {  
		display: inline-block;
		position: relative;
		margin: 30px auto;
		padding: 0 10px;
		width: 100%;
		color: #293D82;
		text-align: center;
	}

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

	    .rd2flex-div {  
		    display: block;
			position: relative;
			margin: 10px 0;
			width: 47%;
	    }

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


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

	    .map2flex-map {  
		    display: block;
			position: relative;
			margin: 10px 0;
			width: 68%;
			border: solid 1px #293D82;
	    }

	        .goodglemap {  
				display: block;
				width: 100%;
				height: 412px;
	        }

	        .map2flex-map img {  
				display: block;
				width: 100%;
				height: auto;
	        }


	    .map2flex-div {  
		    display: flex;
			position: relative;
			flex-direction: column;
			justify-content: flex-start;
			align-content: stretch;
			margin: 10px 0;
			padding: 0 30px;
			width: 30%;
	    }

	        .map2flex-divlogo1 {  
		        display: block;
				width: 75%;
				margin-bottom: 20px;
	        }

	        .map2flex-divlogo1 img {  
		        display: block;
				width: 100%;
	        }

		    .map2flex-divtxt {  
				margin: 0 auto;
				width: 100%;
				text-align: left;
	        }


	.abou4flex {  
		display: flex;
		position: relative;
		justify-content: space-between;
		align-items: stretch;
		margin: 40px auto;
		width: 840px;
	}

	    .abou4flex-div {  
		    display: flex;
			flex-direction: column;
			position: relative;
			justify-content: center;
			align-content: center;
			margin: 10px auto;
			background-color: #F1F1F1;
			width: 20%;
	    }

	        .abou4flex-div-icon {  
				display: flex;
				justify-content: center;
				align-items: stretch;
				margin: 0 auto;
				padding: 15px 10px 0 10px;
				width: 100%;
	        }

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

		   .abou4flex-div-txt {  
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    padding: 10px 5px 20px 5px;
				width: 100%;
			    color: #293D82;
	        }


	.aboufour {  
		display: block;
		position: relative;
		margin: 40px auto;
		width: 800px;
		z-index: 1;
	}

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

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

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

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

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

	    .aboufourab5 {  
		    display: block;
		    position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			opacity: 1;
			
			animation: aboufour5;
			animation-duration: 6s;
			animation-iteration-count: infinite;
			-moz-animation: aboufour5;
			-moz-animation-duration: 6s;
			-moz-animation-iteration-count: infinite;
			-webkit-animation: aboufour5;
			-webkit-animation-duration: 6s;
			-webkit-animation-iteration-count: infinite;
			-ms-animation: aboufour5;
			-ms-animation-duration: 6s;
			-ms-animation-iteration-count: infinite;
	}


		    @keyframes aboufour1 {
			   0%    {opacity: 0;}
			   10%   {opacity: 0;}
			   15%   {opacity: 1;}
			   98%   {opacity: 1;}
			   100%  {opacity: 0;}
		    }

		    @keyframes aboufour2 {
			   0%    {opacity: 0;}
			   15%   {opacity: 0;}
			   20%   {opacity: 1;}
			   98%   {opacity: 1;}
			   100%  {opacity: 0;}
		    }

		    @keyframes aboufour3 {
			   0%    {opacity: 0;}
			   20%   {opacity: 0;}
			   25%   {opacity: 1;}
			   98%   {opacity: 1;}
			   100%  {opacity: 0;}
		    }

		    @keyframes aboufour4 {
			   0%    {opacity: 0;}
			   25%   {opacity: 0;}
			   30%   {opacity: 1;}
			   98%   {opacity: 1;}
			   100%  {opacity: 0;}
		    }

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


	.aboufour-m {  
		display: none;
	}


	.abcompic { 
		display: flex;
		position: relative;
		justify-content: space-between;
		align-content: stretch;
	    margin: 50px auto;
		width: 63%;
	}

	    .abcompic-div1 {
		    display: block;
			margin: 0 auto;
		    width: 66.8%;
	    }

	    .abcompic-div2 {
		    display: block;
			margin: 0 auto;
		    width: 23%;
	    }

            .abcompic-div1 img, .abcompic-div2 img {
				display: block;
				width: 100%;
	        }


	.abgnelect { 
		display: flex;
		position: relative;
		justify-content: space-between;
		align-content: stretch;
	    margin: 50px auto;
		width: 63%;
	}

	    .abgnelect-div {
		    display: block;
			margin: 0 auto;
			background-color: #7DB36B;
			border-radius: 100%;
		    width: 18%;
	    }

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

	.abgnpic { 
		display: block;
		margin: 0 auto;
		width: 80%;
	}

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

	.abgnpic2 { 
		display: block;
		margin: 0 auto;
		width: 500px;
	}

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


	.abgnpic3 { 
		display: block;
		margin: 40px auto;
		width: 54%;
	}

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


	.abgnpic2-tb { 
		color: #29AAE1;
	}


	.absel { 
		display: flex;
		position: relative;
		justify-content: center;
		align-content: stretch;
	    margin: 60px auto;
		width: 85%;
	}

	    .absel-div {
		    display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;
			margin: 10px 20px;
			padding: 30px 40px;
			background-color: #FFF;
		    width: 30%;
			border: solid 1px #29AAE1;
			box-shadow: 8px 8px 10px #888;
	    }

            .absel-divpic {
				display: block;
				margin: 0 auto;
				width: 45%;
	        }

                .absel-divpic img {
				    display: block;
				    width: 100%;
	            }


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

            .absel-divtitle {
		        display: flex;
			    flex-direction: column;
			    justify-content: center;
			    align-items: center;
				padding: 10px 0;
				width: 100%;
				color: #29AAE1;
				border-bottom: solid 3px #29AAE1;
	        }

            .absel-divtxt {
		        padding: 20px 0 0 0;
				text-align: justify;
	        }


	.p7flex { 
		display: flex;
		position: relative;
		justify-content: space-between;
		align-content: stretch;
		width: 100%;
		border-bottom: solid 2px #29A9E0;
		z-index: 99;
	}

	    .p7flex > * {
			padding: 3px 0 2px 0;
			font-size: 120%;
			font-weight: bold;
	    }

	    .p7flex-div {
		    display: flex;
			position: relative;
			justify-content: center;
			align-items: center;
			background-color: #FFFFFF;
		    width: 12.2%;
			color: #29A9E0;
			text-align: center;
	    }

	    .p7flex-div1 {
		    display: flex;
			position: relative;
			justify-content: center;
			align-items: center;
			background-color: #29A9E0;
		    width: 12.2%;
			color: #FFF;
			text-align: center;
	    }

	        .p7flex-div1:after {
				content: "";
				width: 0;
				height: 0;
				border: 18px solid transparent;
				border-top-color: #29A9E0;
				position: absolute;
				top: 100%;
				left: 50%;
				transform: translate(-50%, 0);
	    	}


	    .p7flex-div a {
			color: #29A9E0;
	    }

	    .p7flex-div1 a {
			color: #FFFFFF;
	    }

	    .p7flex-div a:hover, .p7flex-div1 a:hover {
			color: #293D82;
	    }


	.parea {   /* 產品內容區 */
		display: block;
		position: relative;
	    margin: 0 auto;
		padding: 30px 0;
		width: 100%;
		background-color: #F0F0F0;
	}


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

	    .proinfo-flex-div {
		    display: flex;
			position: relative;
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;
			margin: 0 auto;
			width: 48%;
	    }

	    .proinfo-flex-div1 {
		    display: flex;
			position: relative;
			flex-direction: column;
			justify-content: space-between;
			align-items: stretch;
			margin: 0 auto 0 auto;
			width: 48%;
	    }

	    .proinfo-flex-div2 {
		    display: flex;
			position: relative;
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;
			margin: 0 auto 0 auto;
			width: 48%;
	    }

	    .proinfo-flex-div3 {
		    display: block;
			margin: 0 auto;
			width: 98%;
	    }


	    .proinfo-flex-div-r1 {
		    display: flex;
			position: relative;
			justify-content: flex-start;
			align-items: stretch;
			width: 100%;
			border-bottom: solid 2px #293D82;
	    }

	    .proinfo-flex-div-r1-1 {
		    display: flex;
			position: relative;
			justify-content: flex-start;
			align-items: stretch;
			width: 100%;
			border-bottom: solid 2px #293D82;
	    }

	    .proinfo-flex-div-r2 {
		    display: flex;
			position: relative;
			justify-content: flex-start;
			align-items: stretch;
			width: 100%;
	    }

	        .proinfo-flex-div-r-d1 {
		        display: flex;
			    position: relative;
			    justify-content: flex-start;
			    align-items: stretch;
				padding: 15px 0;
			    flex: 0 0 80px;
	        }

	        .proinfo-flex-div-r-d1-1 {
		        display: flex;
			    position: relative;
			    justify-content: flex-start;
			    align-items: stretch;
				padding: 15px 0;
			    flex: 0 0 80px;
	        }

	        .proinfo-flex-div-r-d2 {
		        display: flex;
				flex-direction: column;
			    position: relative;
			    justify-content: flex-start;
			    align-items: stretch;
				padding: 15px 0;
				width: 85%;
	        }

	        .proinfo-flex-div-r-d2-1 {
		        display: flex;
				flex-direction: column;
			    position: relative;
			    justify-content: flex-start;
			    align-items: stretch;
				padding: 15px 0;
				width: 85%;
	        }

	        .proinfo-flex-div-r-d2-2 {
		        display: flex;
				flex-direction: column;
			    position: relative;
			    justify-content: flex-start;
			    align-items: stretch;
				padding: 15px 0;
				width: 85%;
	        }


	        .proinfo-flex-d-title {
		        font-size: 1.6em;
				font-weight: bold;
	        }

	        .proinfo-flex-d-txttitle {
		        font-size: 1.2em;
				font-weight: bold;
	        }

	        .proinfo-flex-d-txt {
		        padding-left: 1.2em;
				text-indent: -1.2em;
	        }

	        .proinfo-flex-d-txt-1 {
		        padding-left: 0;
				text-indent: 0;
	        }

	        .proinfo-flex-d-txt-2 {
		        padding-left: 1.6em;
				text-indent: -1.6em;
	        }




	.areatitle {  /* - title center - */
		display: block;
		position: relative;
	    margin: 0 auto;
		width: 100%;
		text-align: center;
	}

	    .areatitle img {
		    display: block;
			margin: 0 auto;
		    width: 150px;
	    }

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

	.areatitleab {  /* - title center - */
		display: block;
		position: absolute;
		width: 100%;
	    top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 99;
	}

	    .areatitleab img {
		    display: block;
			margin: 0 auto;
		    width: 150px;
	    }

    
 	.areaart {  /* - artcl center - */
		display: block;
		position: relative;
	    margin: 20px auto;
		width: 50%;
		text-align: justify;
	}

 	.areaart-60 {  /* - artcl center - */
		display: block;
		position: relative;
	    margin: 20px auto;
		width: 60%;
		text-align: justify;
	}

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

	    .areaapptitle img {
		    display: block;
			margin: 0 auto;
		    width: 120px;
	    }

	    .areaapptitle-word {
		    display: block;
			margin: 10px auto;
			text-align: center;
	    }


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


	.area404pic {  
		display: block;
		position: relative;
	    margin: 0 auto;
		width: 600px;
	}

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

	.area404title {  
		display: block;
		position: relative;
	    margin: 10px auto;
		font-size: 3.3em;
		line-height: 145%;
		font-weight: bold;
	}

	.area404txt {  
		display: block;
		position: relative;
	    margin: 20px auto 30px auto;
		line-height: 155%;
		font-size: 1.5em;
	}

	.area404goback {  
		display: inline;
		position: relative;
	    margin: 40px auto;
		padding: 8px 25px;
		font-size: 1.8em;
		color: #2B346F;
		border: solid 1px #2B346F;
		border-radius: 50px;
	}

	.area404goback:hover {  
		color: #FFF;
		background-color: #2B346F; 
	}


    /* ---- space ---- */
	.under_space_1em {
		display: block;
	    padding: 1em;
	}

	.under_space_2em {
		display: block;
	    padding: 2em;
	}

	.under_space_3em {
		display: block;
	    padding: 3em;
	}

	.under_space_5em {
		display: block;
	    padding: 5em;
	}

	.under_space_6em {
		display: block;
	    padding: 6em;
	}

/* setting word */

	.majorcolor {
		color: rgba(43,52,111,1);
		/*color: #2B346F;*/
	}

	.redcolor {
		color: #A51932;
	}

	.bluecolor {
		color: #0071BC;
	}

	.deepgraycolor {
		color: #4D4D4D;
	}

	.textceter {
		text-align: center;
	}

	.txt1 {
		font-size: 1.1em;
	}

	.txt1-39 {
		padding-left: 3.9em;
		font-size: 1.1em;
	}

	.txt1-b {
		font-size: 1.1em;
		font-weight: bold;
	}

	.txt1-indent {
		padding-left: 0.9em;
		text-indent: -0.9em;
		font-size: 1.1em;
	}

	.txt2 {
		font-size: 1.25em;
		line-height: 150%;
	}

	.txt2-b {
		font-size: 1.25em;
		font-weight: bold;
		line-height: 150%;
	}

	.txt3 {
		font-size: 1.25em;
		line-height: 150%;
	}

	.txt4 {
		font-size: 1.35em;
		line-height: 150%;
	}

	.txt4-b {
		font-size: 1.35em;
		line-height: 150%;
		font-weight: bold;
	}

	.bigtitle {
		font-size: 1.8em;
		line-height: 160%;
	}

	.bigtitle-b {
		font-size: 1.8em;
		line-height: 160%;
		font-weight: bold;
	}

	.bigtitle1 {
		font-size: 1.8em;
		line-height: 120%;
	}

	.bigtitle1-b {
		margin-bottom: 10px;
		font-size: 1.8em;
		font-weight: bold;
		line-height: 130%;
	}

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


	.more1 {
		display: inline-flex;
		position: relative;
		justify-content: center;
		align-content: center;
		padding: 5px 20px 3px 20px;
		color: #293D82;
		background-color: #CBCBCB;
		border: solid 1px #CBCBCB;
		cursor: pointer;
	}

	    .more1:hover {
			font-weight: bold;
			font-size: 115%;
	    }

	    .more1 img  {
			display: block;
			margin: 3px 0 0 3px;
			width: 20px;
			height: 20px;
	    }

	.more2 {
		display: inline-flex;
		position: relative;
		justify-content: center;
		align-content: center;
		padding: 3px 15px 1px 15px;
		color: #293D82;
		border: solid 1px #293D82;
		cursor: pointer;
	}

	    .more2:hover {
			font-weight: bold;
			font-size: 105%;
			background-color: rgba(255,255,255, 0.3);
	    }

	    .more2 img  {
			display: block;
			margin: 3px 0 0 3px;
			width: 20px;
			height: 20px;
	    }



/* myBtn - go top */

	#myBtn {
		display: block;
		position: fixed;
		background-color: #FFF;
		border-radius: 0;
		border: 0;
		width: 45px;
		height: 45px;
		bottom: 2em;
		right: 1em;
		cursor: pointer;
		border-top: solid 4px #293D82;
		/* box-shadow: 3px 3px 5px #666; */
		z-index: 9999;
	    outline: none;
	}

	#myBtn img{
	    outline: none;
	}


/* vedio */
	.video-container {
		position: relative;
		padding-bottom: 56.25%;
		padding-top: ;
		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;
	}


/* Footer */

	#footer {
		position: relative;
		width: 100%;
		background-image: url("../../images/pic_footerbg.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: right center;
		padding: 0;
		text-align: left;
		overflow: hidden;
	}

		#footer .fdivall {
		    display: flex;
			display: -webkit-flex; /* Safari */
			flex-wrap: wrap;
			margin: 0 auto;
		    width: 100%;
		    justify-content: space-between;
		    padding: 3em 0 4em 0;
	     }

		#footer .fre1 {
		    display: flex;
			display: -webkit-flex; /* Safari */
			margin: 0 auto;
		    width: 100%;
		    justify-content: flex-end;
	     }

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


		#footer .fdiv1 {
			width: 16%;
			font-weight:normal;
		}

		#footer .fdiv2 {
			width: 23%;
			font-weight:normal;
		}

		#footer .fdiv3 {
			display: flex;
			display: -webkit-flex; /* Safari */
			flex-direction: column;
			width: 55%;
		}

		    #footer .div3-div-rw {
			    display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: stretch;
				line-height: 110%;
			    width: 100%;
				margin-left: -0.6em;
		    }

		        #footer .div3-div-rw-c {
			        display: flex;
					flex-wrap: wrap;
				    justify-content: flex-start;
				    align-items: center;
					margin: 5px 0;
		        }


		#footer .flogo {
			display: block;
			position: relative;
			margin-bottom: 20px;
			width: 100%;
		}

		    .flogopic {
			    width: 90%;
		    }

		        .flogopic img {
			        width: 100%;
		        }

		    .ficon {
				margin-left: 10px;
			    width: auto;
		    }

		        .ficon img {
			        height: 35px;
		        }

		        .ficon:hover {
			        opacity: 0.6;
		        }


		#footer .cc {
		    display: block;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 26px;
			background-color: rgba(6,4,81,0.8);
			width: 100%;
	     }

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

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

		#footer .ftxt1 {  /* 定義所有字母均為大寫 */
			/*text-transform: uppercase;*/
			font-size: 1.1em;
			line-height: 150%;
			margin-left: 3em;
		    text-indent: -3em;
			color: #000;
		}

		#footer .ftxt2 {  /* 定義所有字母均為小寫 */
			text-transform: lowercase;
		}

		#footer .ftxt3 {  /* 定義單字的第一個字母大寫，其他字母小寫 */
			text-transform: capitalize;
			font-size: 1em;
			line-height: 150%;
			margin-left: 3.8em;
		    text-indent: -3.8em;
			color: #666666;
		}


		#footer .ftxt3-1 {  /* 定義單字的第一個字母大寫，其他字母小寫 */
			ext-transform:capitalize;
			font-size: 1em;
			line-height: 150%;
			color: #4D4D4D;
		}

		    #footer .ftxt3-1 a  { 
			     color: #4D4D4D;
		     }

		    #footer .ftxt3-1 a:hover {  
			     color: #315793;
		     }

		#footer .ftxt3-1b {  /* 定義單字的第一個字母大寫，其他字母小寫 */
			ext-transform:capitalize;
			font-size: 1em;
			line-height: 150%;
			font-weight: bold;
			color: #000000;
		}

		    #footer .ftxt3-1b a  { 
			     color: #000000;
		     }

		    #footer .ftxt3-1b a:hover {  
			     color: #315793;
		     }


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

	.pin {
		display: block;
		margin: 0 auto;
		padding: 0 2em;
		width: 100%;
		height: 100%;
		text-align: center;
   
		overflow: hidden;
		
		animation-name:kkk;
		animation-duration:1s;	
		animation-fill-mode:forwards;
	}

		@keyframes kkk {
		    0%{
    		  opacity: 0;
		    }
		    50%{
   		      opacity: 0.5;
		    }
		    50%{
		      opacity: 1;
		    }
		}

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

	.pin-list {
		width:100%;
		height: 100%;
		display: inline-block;
		text-align: center;
        padding: 0.5em;
		overflow: hidden;
	}

	.pin-list img {
		width:100%;
		height: auto;
	}

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


/*--- 產品大小圖 ---*/


	.pcess {
		display: flex;
		justify-content: center;
		align-items: stretch;
		margin: 1em auto 0 auto;
		width: 80%;
		text-align: center;
	}

	.pcessd {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		margin: 0 10px;
		width: 11%;
		text-align: center;
		cursor: pointer;
		border: solid 2px #293D82;
		overflow: hidden;
	}

	    .pcessd img {
			display: block;
		    width: 100%;
			outline: none;
	    }

	    .pcessd:focus {
		    border: solid 2px #29A9E0;
	    }

	    .pcessd:hover {
		    border: solid 2px #29A9E0;
		    -webkit-transition:all .2s ease-in-out;
		    transition:all .2s ease-in-out;
	     }

	    .pcessd:hover img {
		    transform: scale(1.2);
		    -webkit-transition:all .3s ease-in-out;
		    transition:all .3s ease-in-out;
	     }


	.pcesspic {
		display: block;
		margin: 2em auto 1em auto;
		width: 50%;
	}

	    .pcesspic img{
		    width:100%;
	    }

	.pcessbox1 {
		position: relative;
		display: block;
		padding: 20px 0 0 0;
	}

/*--- 產品大小圖 end ---*/




/* Wide */

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

/* header */	
	
			#header nav ul li {
				margin: 0 5px;
				padding: 5px 15px;
			}
	
/* banner */

	
/* area-container */
	



/* Wrapper */
	
	
/* setting */
	
	.machine1 {  
		display: block;
		position: absolute;
		width: 21%;
		top: 37%;
		left: 7%;
		transform: translate(0, -50%);
	}

/* setting word */

	
/* Footer */


	
}


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

/* header */	

		#header nav {
			font-size: 1.1em;
		}

			#header nav ul li {
				margin: 0 5px;
				padding: 5px 10px;
			}
	
		.headlogo {
		    width: 200px;
		}
	
	
	.kno {  /* 知識庫 */
		margin-right: 30px;
	}
	
	
/* banner */

		.inner {
			padding: 0 0 5px 0;
		}
	
	.bannerab1 {

	}

		    @keyframes head1 {
			    0%    {bottom: 20%;  opacity:0;}
			    100%  {bottom: 11.5%; opacity:1;}
		    }
	
	
	
/* area-container */
	
	.bodycontainer2 {  
		width: 83%;
	}
	
	.bodycontainer3 {  
		width: 83%;
	}

	.bodycontainer4 {  
		margin: 30px auto 60px auto;
		width: 88%;
	}
	
/* Wrapper */
	
	
/* setting */
	
	.ind7proflex {  
		padding: 40px 0 25px 0;
	}
	
	            .ind2fucflex-div-c-left-pic {
		            display: block;
					margin: 0 auto 10px auto;
				    width: 60%;
	            }
	
	
	.machine1 {  
		display: block;
		position: absolute;
		width: 21%;
		top: 45%;
		left: 7%;
		transform: translate(0, -50%);
	}
	
	
	.appk5flex {  
		margin: 30px auto;
		width: 85%;
	}

	    .appk5flex-div {  
			margin: 5px 10px 4px 10px;
			padding: 5px 10px;
		    min-width: 14em;
	    }
	
	
	.map2flex {  
		margin: 50px auto;
		width: 100%;
	}

	    .map2flex-map {  
			margin: 10px 0;
			width: 62%;
	    }

	        .goodglemap {  
				display: block;
				width: 100%;
				height: 412px;
	        }

	    .map2flex-div {  
			margin: 10px 0;
			padding: 0 30px;
			width: 35%;
	    }

	        .map2flex-divlogo1 {  
				width: 70%;
				margin-bottom: 20px;
	        }

	
	.abgnpic3 { 
		margin: 40px auto;
		width: 59%;
	}
	
	
	.absel { 
	    margin: 60px auto;
		width: 100%;
	}

	    .absel-div {
			margin: 10px 20px;
			padding: 30px 35px;
			background-color: #FFF;
		    width: 28%;
	    }

            .absel-divpic {
				width: 35%;
	        }


            .absel-divtitle {
			    flex-direction: column;
			    justify-content: center;
			    align-items: center;
				padding: 10px 0;
				width: 100%;
	        }

            .absel-divtxt {
		        padding: 20px 0 0 0;
	        }

	
	
/* setting word */

	
/* Footer */
	
		#footer .fdiv1 {
			width: 20%;
		}

		#footer .fdiv2 {
			width: 25%;
		}

		#footer .fdiv3 {
			width: 50%;
		}
	
	
	.pcess {
		width: 90%;
	}

	.pcessd {
		width: 15%;
	}
	
	.pcesspic {
		display: block;
		margin: 2em auto 1em auto;
		width: 50%;
	}
	
	.pcessbox1 {
		position: relative;
		display: block;
		padding: 20px 0 0 0;
	}
	
	
	
}
	

/* Normal */

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

/* header */

		#header nav {
			font-size: 1.1em;
		}

			#header nav ul li {
				margin: 0 0.25em 0 1em;
				padding: 5px 0;
			}

		.headlogo {
			top: 20px;
		    width: 200px;
		}
	

/* banner */
	
		.inner {
			padding: 0 0 5px 0;
		}
	
	

/* area-container */

	.bodycontainer4 {  
		margin: 30px auto 60px auto;
		width: 88.5%;
	}

/* Wrapper */


	
/* setting */

	.indap1 {  
		margin: 0 auto;
		padding-bottom: 30px;
		background-image: url("../../images/pic_indap_bg1.png");
	}

	.indap2 {  
		justify-content: space-between;
		background-image: url("../../images/pic_indap_bg2.png"), url(../../images/pic_indap_bg2-2.png);
		background-repeat: no-repeat, repeat-y;
		background-position: center top, center bottom;
		background-size: 100%;
		z-index: 9;
	}

	.indap3 {  
	}
	
	.ind5flex {  
		width: 100%;
	}

	    .ind5flex-d1 {  
			width: 19%;
	    }

	    .ind5flex-d2 {  
			margin-top: 50px;
			width: 19%;
	    }

	    .ind5flex-d3 {  
			margin-top: 100px;
			width: 19%;
	    }
	
	
	.ind7proflex {  
		padding: 35px 0 25px 0;
	}
	
	        .ind7proflex-divname {  
				font-size: 1.1em;
	        }
	
	
	.machine1 {  
		display: block;
		position: absolute;
		width: 21%;
		top: 45%;
		left: 7%;
		transform: translate(0, -50%);
	}
	
	
	.knopic1 {  
	    margin: 30px auto 0 auto;
		width: 60%;
	}

	.knopic2 {  
	    margin: 20px 0 0 auto;
		width: 40%;
	}

	.knopic3 {  
	    margin: 20px 0 0 auto;
		width: 35%;
	}
	
	
	.appk5flex {  
		margin: 30px auto;
		width: 90%;
	}

	    .appk5flex-div {  
			margin: 5px 10px 4px 10px;
			padding: 5px 10px;
		    min-width: 14em;
	    }
	
	
	.apppic4flex {  
		margin: 30px auto;
		width: 85%;
	}

	    .apppic4flex-div {  
			margin: 10px 0;
			width: 24%;
	    }
	
	
	.apppic3flex {  
		margin: 30px auto;
		width: 85%;
	}

	    .apppic3flex-div {  
			margin: 10px 0;
			width: 32%;
	    }

	
	.map2flex {  
		margin: 50px auto;
		width: 100%;
	}

	    .map2flex-map {  
			margin: 10px 0;
			width: 60%;
	    }

	        .goodglemap {  
				display: block;
				width: 100%;
				height: 412px;
	        }

	    .map2flex-div {  
			margin: 10px 0;
			padding: 0 30px;
			width: 38%;
	    }

	        .map2flex-divlogo1 {  
		        display: block;
				width: 75%;
				margin-bottom: 20px;
	        }

	
	.abcompic { 
	    margin: 50px auto;
		width: 73.5%;
	}

	    .abcompic-div1 {
		    width: 66.8%;
	    }

	    .abcompic-div2 {
		    width: 23%;
	    }
	
	
	.abgnelect { 
	    margin: 50px auto;
		width: 73.5%;
	}

	    .abgnelect-div {
			border-radius: 100%;
		    width: 18%;
	    }
	
	
	
	
	
	
	
	.areatitle {  
		
	}

	    .areatitle img {
		    width: 140px;
	    }

	.areatitleab { 
		
	}

	    .areatitleab img {
		    width: 140px;
	    }

 
 	.areaart {  /* - artcl center - */
	    margin: 20px auto;
		width: 70%;
	}

 	.areaart-60 {  /* - artcl center - */
	    margin: 20px auto;
		width: 70%;
	}
	
/* Footer */
	
		#footer .fdiv1 {
			width: 20%;
		}

		#footer .fdiv2 {
			width: 30%;
		}

		#footer .fdiv3 {
			width: 45%;
		}
	
	
}


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

/* header */

			#header nav ul li {
				margin: 0 0.5em;
				padding: 5px 0;
			}
	
		.headlogo {
			top: 10px;
		    width: 160px;
		}

/* banner */
	
		.inner {
			padding: 0 0 8px 0;
		}
	
/* area-container */
	
	
/* Wrapper */
	

	
/* setting */
	
	.indap1 {  
		margin: 20px auto 0 auto;
		padding: 30px 0;
		background-image: url("../../images/pic_indap_bg1.png");
		background-size: 150%;
	}

	.indap2 {  
		background-image: url("../../images/pic_indap_bg2.png"), url(../../images/pic_indap_bg2-2.png);
		background-repeat: no-repeat, repeat-y;
		background-position: center top, center bottom;
		background-size: 150%;
		z-index: 9;
	}

	.indap3 {  
		background-size: 150%;
	}
	
	.indap5 {  
		background-image: url("../../images/pic_indap_bg5.png");
		background-repeat: repeat-y;
		background-position: center top;
		background-size: 100%;
	}
	
	
	.ind5flex {  
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
	}

	    .ind5flex-d1 { 
			margin: 0 8px;
			width: 28%;
	    }

	    .ind5flex-d2 {  
			margin: 0 8px;
			width: 28%;
	    }

	    .ind5flex-d3 {  
			margin: 0 8px;
			width: 28%;
	    }
	
	
	.ind7proflex {  
		flex-wrap: wrap;
	    margin: 0 auto;
		padding: 40px 0 30px 0;
	}

	    .ind7proflex-div {  
			margin: 10px 5px;
			width: 23%;
	    }

	
	.qc6cfflex {  
		flex-wrap: wrap;
		justify-content: center;
		margin: 30px auto 0 auto;
	}

	    .qc6cfflex-div {  
			margin: 10px 10px;
			width: 22%;
	    }
	
	
	
	.areatitle {  
		
	}

	    .areatitle img {
		    width: 140px;
	    }

	.areatitleab { 
		
	}

	    .areatitleab img {
		    width: 140px;
	    }

 
 	.areaart {  /* - artcl center - */
	    margin: 20px auto;
		width: 70%;
	}

 	.areaart-60 {  /* - artcl center - */
	    margin: 20px auto;
		width: 70%;
	}
	

	
/* setting word */


	
/* Footer */


	
}


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

/* header */


/* banner */


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

/* setting */
	
	.map2flex {  
		margin: 50px auto;
		width: 100%;
	}

	    .map2flex-map {  
			margin: 10px 0;
			width: 55%;
	    }

	        .goodglemap {  
				display: block;
				width: 100%;
				height: 412px;
	        }

	    .map2flex-div {  
			margin: 10px 0;
			padding: 0 30px;
			width: 42%;
	    }

	
	.abgnpic3 { 
		margin: 40px auto;
		width: 75%;
	}
	
	
	.absel { 
		flex-wrap: wrap;
	    margin: 40px auto;
		width: 100%;
	}

	    .absel-div {
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin: 10px 20px;
			padding: 20px 45px 25px 35px;
		    width: 75%;
	    }

            .absel-divpic {
				margin-right: 10px;
				width: 20%;
	        }

            .absel-divnote {
			    flex-direction: column;
			    justify-content: flex-start;
			    align-items: stretch;
				width: 88%;
	        }
	
            .absel-divtitle {
			    flex-direction: column;
			    justify-content: flex-start;
			    align-items: flex-start;
				padding: 10px 0;
				width: 100%;
	        }

            .absel-divtxt {
		        padding: 20px 0 0 0;
	        }
	
	

/* setting word */


/* Footer */
	
		#footer .fre2 {
		    justify-content: flex-start;
			align-items: flex-start;
	     }

		#footer .fdiv1 {
			margin-right: 30px;
			width: 30%;
		}

		#footer .fdiv2 {
			width: 66%;
		}

		#footer .fdiv3 {
			margin: 20px 0 0 0;
			width: 100%;
		}
	
		#footer .ftitle2 {
			margin: 20px 0 10px 0;
		}
	
	
	
}

/* Normal */

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

/* header */

		.headlogo {
			top: 10px;
		    width: 150px;
		}
	
/* banner */
	
		.inner {
			padding: 0 0 12px 0;
		}

	.bannerab1 {

	}

		    @keyframes head1 {
			    0%    {bottom: 20%;  opacity:0;}
			    100%  {bottom: 13%; opacity:1;}
		    }
	
	
/* area-container */
	
	.bodycontainer4 {  
		margin: 30px auto 60px auto;
		width: 90%;
	}
	
/* Wrapper */
	
	
/* setting */
	
	.ind5flex {  
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
	}

	    .ind5flex-d1 { 
			margin: 0 8px;
			width: 31%;
	    }

	    .ind5flex-d2 {  
			margin: 0 8px;
			width: 31%;
	    }

	    .ind5flex-d3 {  
			margin: 0 8px;
			width: 31%;
	    }
	
	
	.ind2fucflex {  
	    margin: 0 auto 50px auto;
	}
	
	    .ind2fucflex-div1 {
			margin-bottom: 7px;
			padding: 15px 10px;
		    width: 49.03%;
	    }

	    .ind2fucflex-div2 {
			margin-bottom: 7px;
			padding: 15px 10px;
		    width: 49.05%;
	    }

	    .ind2fucflex-div3 {
			margin-top: 7px;
			padding: 15px 10px;
		    width: 49.05%;
	    }

	    .ind2fucflex-div4 {
			margin-top: 7px;
			padding: 15px 10px;
		    width: 49.05%;
	    }
	
	        .ind2fucflex-div-c-left {
		        display: flex;
				flex-direction: column;
				width: 40%;
	        }

	            .ind2fucflex-div-c-left-pic {
		            display: block;
					margin: 0 auto 10px auto;
				    width: 68%;
	            }
	
	
	.machine1 {  
		display: block;
		position: absolute;
		width: 24%;
		top: 50%;
		left: 8%;
		transform: translate(0, -50%);
	}
	
	.appk5flex {  
		margin: 30px auto;
		width: 100%;
	}

	    .appk5flex-div {  
			margin: 5px 5px 4px 5px;
			padding: 5px;
		    min-width: 13em;
	    }
	
	.apppic4flex {  
		margin: 20px auto;
		width: 100%;
	}

	    .apppic4flex-div {  
			margin: 10px 0;
			width: 24%;
	    }
	
	
	.apppic3flex {  
		margin: 20px auto;
		width: 100%;
	}

	    .apppic3flex-div {  
			margin: 10px 0;
			width: 32%;
	    }

	.prokind7flex {  
		margin: 30px auto;
		width: 100%;
	}

	    .prokind7flex-div {  
			margin: 0 5px 50px 5px;
			width: 23%;
	    }
	
	
	.proinfo-flex {  
		flex-direction: column;
		justify-content: space-between;
		align-items: stretch;
	    margin: 50px auto;
	}

	    .proinfo-flex-div {
			margin: 0 auto 20px auto;
			width: 95%;
	    }

	    .proinfo-flex-div1 {
			margin: 0 auto;
			width: 95%;
	    }

	    .proinfo-flex-div2 {
			margin: 0 auto;
			width: 95%;
			border: none;
	    }
	
	    .proinfo-flex-div3 {
		    display: block;
			margin: 0 auto;
			width: 95%;
			border: none;
	    }
	
	    .proinfo-flex-div-r1-1 {
			display: none;
			height: 0;
	    }
	
	        .proinfo-flex-div-r-d1 {
		        display: flex;
			    position: relative;
			    justify-content: flex-start;
			    align-items: stretch;
				padding: 15px 0;
			    flex: 0 0 80px;
	        }
	
	        .proinfo-flex-div-r-d1-1 {
		        display: flex;
			    position: relative;
			    justify-content: flex-start;
			    align-items: stretch;
				padding: 10px 0;
			    flex: 0 0 80px;
	        }

	        .proinfo-flex-div-r-d2 {
			    justify-content: flex-start;
			    align-items: flex-start;
				padding: 15px 0 0 0;
			    width: 100%;
	        }
	
	        .proinfo-flex-div-r-d2-1 {
		        display: flex;
				flex-direction: column;
			    position: relative;
			    justify-content: flex-start;
			    align-items: stretch;
				padding: 15px 0 0 0;
				width: 85%;
	        }
	
	        .proinfo-flex-div-r-d2-2 {
		        display: flex;
				flex-direction: column;
			    position: relative;
			    justify-content: flex-start;
			    align-items: stretch;
				padding: 0;
				width: 85%;
	        }
	
	
	.areaapptitle {  
	    margin: 0 auto;
		width: 100%;
	}

	    .areaapptitle img {
		    width: 100px;
	    }
	

/* setting word */

	.more2 {
		padding: 2px 10px 0 10px;
	}

	    .more2 img  {
			margin: 4px 0 0 3px;
			width: 18px;
			height: 18px;
	    }
	
/* Footer */
	
	
	.pcess {
		flex-wrap: wrap;
		justify-content: center;
		width: 95%;
	}

	.pcessd {
		margin: 10px 10px;
		width: 15%;
	}
	
	.pcesspic {
		display: block;
		margin: 2em auto 1em auto;
		width: 50%;
	}
	
	.pcessbox1 {
		position: relative;
		display: block;
		padding: 15px 0 0 0;
	}


}

/* Narrower */

#navPanel, #navButton {
		display: none;
}

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

			html, body {
				overflow-x: hidden;
			}

			header.major {
				padding-bottom: 0.25em;
			}

			header.special {
				margin-bottom: 4em;
				padding-top: 5em;
			}

				header.special:before, header.special:after {
					width: 40%;
				}

				header.special h2 + p {
					padding-top: 1.25em;
				}

		/* 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;
			justify-content: center;
			align-items: center;
			position: absolute;
			background-color: rgba(255,255,255, 0.7);
			width: 100%;
			z-index: 9999;
		}
	
		    .mlogopic {
			    display: block;
			    position: relative;
				margin: 10px auto 5px auto;
				padding: 0;
			    width: 40%;
		    }
	
		        .mlogopic img {
					display: block;
                    width: 100%;
		        }
	

/* banner */

	.bannerab1 {

	}
		    @keyframes head1 {
			    0%    { bottom: 15%; opacity:0;}
			    100%  { bottom: 0%;  opacity:1;}
		    }

	.bannerab2 {
		width: 28%;
		
	}
		    @keyframes head2 {
			    0%    {top: 37%; left: 2%;  opacity: 0;}
			    100%  {top: 37%; left: 8%; opacity: 1;}
		    }

	.bannerab3 {
		width: 28%;
	}

		    @keyframes head3 {
			    0%    {top: 65%; left: 8%; opacity: 0;}
			    100%  {top: 64%; left: 8%; opacity: 1;}
		    }

	.bannerab4 {
		width: 40%;
	}

		    @keyframes head4 {
			    0%    {top: 52%; left: 8.2%; opacity: 0;}
			    100%  {top: 52%; left: 8.2%; opacity: 1;}
		    }	
	
	.bannerab2-page {
		width: 28%;
		
	}
		    @keyframes head2-page {
			    0%    {top: 45%; left: 2%;  opacity: 0;}
			    100%  {top: 45%; left: 8%; opacity: 1;}
		    }
	
	.bannerab4-page {
		width: 40%;
	}

		    @keyframes head4-page {
			    0%    {top: 60%; left: 8.2%; opacity: 0;}
			    100%  {top: 60%; left: 8.2%; opacity: 1;}
		    }	
	
	
/* area-container */
	
	.bodycontainer4 {  
		margin: 30px auto 60px auto;
		width: 91.5%;
	}
	
/* Wrapper */
	
	
/* setting */
	
	.knoqaflex {  
		flex-direction: column;
		margin: 20px auto;
	}

	    .knoqaflex-div {  
			margin: 15px 0;
			padding: 0 50px 40px 50px;
		    width: 100%;
	    }
	
	        .knoqaflex-divtitle {  
				margin: 20px auto;
				padding: 15px 0;
				font-size: 1.5em;
	        }
	
	.knopic1 {  
	    margin: 30px auto 0 auto;
		width: 200px;
	}

	.knopic2 {  
	    margin: 20px auto 0 auto;
		width: 150px;
	}

	.knopic3 {  
	    margin: 20px auto 0 auto;
		width: 120px;
	}
	
	
	.prokind7flex {  
		margin: 30px auto;
		width: 100%;
	}

	    .prokind7flex-div {  
			margin: 0 5px 50px 5px;
			width: 30%;
	    }
	
	
	.map2flex {  
		flex-direction: column;
		margin: 50px auto;
		width: 100%;
	}

	    .map2flex-map {  
			margin: 10px auto;
			width: 85%;
	    }

	        .goodglemap {  
				display: block;
				width: 100%;
				height: 300px;
	        }

	    .map2flex-div {  
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			flex-direction: row;
			align-content: flex-start;
			margin: 10px auto;
			padding: 0 30px;
			width: 85%;
			justify-content: center;
			align-content: center;
	    }

	        .map2flex-divlogo1 {  
				margin: 0;
				width: 40%;
	        }
	
		    .map2flex-divtxt {  
				margin: 0 auto;
				width: 50%;
	        }
	
	
	.abou4flex {  
		justify-content: space-between;
		align-items: stretch;
		margin: 40px auto;
		width: 100%;
	}
	
	    .abou4flex-div {  
			margin: 10px auto;
			background-color: #F1F1F1;
			width: 22%;
	    }


	.aboufour {  
		margin: 40px auto;
		width: 90%;
	}
	
	
	.abcompic { 
		justify-content: space-between;
		align-content: stretch;
	    margin: 50px auto;
		width: 100%;
	}

	    .abcompic-div1 {
		    width: 66.8%;
	    }

	    .abcompic-div2 {
		    width: 23%;
	    }
	
	
	.abgnelect { 
	    margin: 50px auto;
		width: 80%;
	}

	    .abgnelect-div {
			border-radius: 100%;
		    width: 20%;
	    }
	
	
	.abgnpic { 
		width: 100%;
	}
	
	.abgnpic2 { 
		width: 70%;
	}
	
	
	.p7flex { 
		margin: 0 auto 10px auto;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: stretch;
		width: 100%;
		border-bottom: none;
	}
	
	    .p7flex > * {
			margin: 5px 0;
			padding: 3px 0 2px 0;
			font-size: 120%;
			font-weight: bold;
	    }

	    .p7flex-div {
		    display: flex;
			position: relative;
			justify-content: center;
			align-items: center;
			background-color: #FFFFFF;
		    width: 32%;
			color: #29A9E0;
			text-align: center;
			border: solid 1px #29A9E0;
	    }

	    .p7flex-div1 {
		    display: flex;
			position: relative;
			justify-content: center;
			align-items: center;
			background-color: #29A9E0;
		    width: 32%;
			color: #FFF;
			text-align: center;
			border: solid 1px #29A9E0;
	    }

	        .p7flex-div1:after {
				content: "";
				width: 0;
				height: 0;
				border: none;
	    	}

	
	
/* setting word */

 	.areaart-60 {  /* - artcl center - */
	    margin: 20px auto;
		width: 95%;
	}

	.txt1 {
		font-size: 1.1em;
	}

	.txt1-b {
		font-size: 1.1em;
		font-weight: bold;
	}

	.txt1-indent {
		padding-left: 0.9em;
		text-indent: -0.9em;
		font-size: 1.1em;
	}

	.txt2 {
		font-size: 1.25em;
		line-height: 150%;
	}

	.txt2-b {
		font-size: 1.25em;
		font-weight: bold;
		line-height: 150%;
	}

	.txt3 {
		font-size: 1.25em;
		line-height: 150%;
	}

	.bigtitle {
		font-size: 1.7em;
		line-height: 160%;
	}

	.bigtitle-b {
		font-size: 1.7em;
		line-height: 160%;
		font-weight: bold;
	}

	.bigtitle1 {
		font-size: 1.8em;
		line-height: 120%;
	}

	.bigtitle1-b {
		margin-bottom: 10px;
		font-size: 1.8em;
		font-weight: bold;
		line-height: 130%;
	}

	
	
	
/* Footer */

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

		#footer .fdiv1 {
			margin-right: 30px;
			width: 30%;
		}

		#footer .fdiv2 {
			width: 65%;
		}

		#footer .fdiv3 {
			margin: 20px 0 0 0;
			width: 100%;
		}
	
		#footer .ftitle2 {
			margin: 20px 0 10px 0;
		}
	
	.pcess {
		flex-wrap: wrap;
		justify-content: center;
		width: 95%;
	}

	.pcessd {
		margin: 10px 10px;
		width: 16%;
	}
	
	.pcessbox1 {
		padding: 10px 0 0 0;
	}

	
	/* 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: 100000;
			}

				#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: rgba(43,52,111,1);
						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: 3em;
					line-height: 3em;
					opacity: 0.75;
					text-decoration: none;
				}

					    #navPanel .link:hover {
						    background-color: #333;
					    }
	
					#navPanel .link.depth-0 {
						font-weight: 900;
					}
	
	                /*
					   #navPanel .link.depth-0:after {
						    -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;
							content: '\f0d7';
							margin-left: 2px;
					    }
	                */

					#navPanel .link:first-child {
						/*display: none;
						border-top: 0;*/
					}

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

				#navPanel .indent-2 {
					display: inline-block;
					width: 2em;
				}

				#navPanel .indent-3 {
					display: inline-block;
					width: 3em;
				}

				#navPanel .indent-4 {
					display: inline-block;
					width: 4em;
				}

				#navPanel .indent-5 {
					display: inline-block;
					width: 5em;
				}

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

		
}



/* Mobile */

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

			body {
				min-width: 320px;
			}

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

			h3 {
				font-size: 1em;
				letter-spacing: 0.025em;
			}

			p {
				text-align: justify;
			}
		
/* header */	

	
/* banner */

	
/* area-container */
	
	.bodycontainer4 {  
		margin: 30px auto 60px auto;
		width: 92.5%;
	}
	
/* Wrapper */
	
	
/* setting */
	
	.indap1 {  
		margin: 20px auto 0 auto;
		padding: 30px 0;
		background-image: url("../../images/pic_indap_bg1.png");
		background-size: 250%;
	}

	.indap2 {  
		background-image: url("../../images/pic_indap_bg2.png"), url(../../images/pic_indap_bg2-2.png);
		background-repeat: no-repeat, repeat-y;
		background-position: center top, center bottom;
		background-size: 250%;
		z-index: 9;
	}

	.indap3 {  
		background-size: 250%;
	}
	
	.indap5 {  
		background-image: url("../../images/pic_indap_bg5.png");
		background-repeat: repeat-y;
		background-position: center top;
		background-size: 100%;
	}
	
	
	.ind5flex {  
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
	}

	    .ind5flex-d1 { 
			margin: 0 8px;
			width: 47%;
	    }

	    .ind5flex-d2 {  
			margin: 0 8px;
			width: 47%;
	    }

	    .ind5flex-d3 {  
			margin: 0 8px;
			width: 47%;
	    }
	
	
	.ind7proflex {  
		flex-wrap: wrap;
		justify-content: space-between;
	    margin: 0 auto;
		padding: 50px 0 30px 0;
	}

	    .ind7proflex-div {  
			margin: 10px 0;
			width: 32%;
	    }

	        .ind7proflex-divname {  
				padding: 10px 10px;
				font-size: 1.2em;
	        }
	
	
	.machine1 {  
		display: none;
	}
	
	.knoqaflex {  
		flex-direction: column;
		margin: 15px auto;
	}

	    .knoqaflex-div {  
			margin: 15px 0;
			padding: 0 50px 40px 50px;
		    width: 100%;
	    }
	
	        .knoqaflex-divno1 {  
				padding: 10px 15px;
				font-size: 2em;
				letter-spacing: 2px;
	        }
	
	        .knoqaflex-divtitle {  
				margin: 15px auto;
				padding: 10px 0;
				font-size: 1.45em;
	        }
	
	.knopic1 {  
	    margin: 30px auto 0 auto;
		width: 200px;
	}

	.knopic2 {  
	    margin: 20px auto 0 auto;
		width: 150px;
	}

	.knopic3 {  
	    margin: 20px auto 0 auto;
		width: 120px;
	}	
	
	
	.apppic4flex {  
		margin: 20px auto;
		width: 100%;
	}

	    .apppic4flex-div {  
			margin: 10px 0;
			width: 32%;
	    }
	
	
	.apppic3flex {  
		margin: 20px auto;
		width: 100%;
	}

	    .apppic3flex-div {  
			margin: 10px 0;
			width: 32%;
	    }
	
	
	.areaapptitle {  
	    margin: 0 auto;
		width: 100%;
	}

	    .areaapptitle img {
		    width: 100px;
	    }
	
	.qc6cfflex {  
		flex-wrap: wrap;
		justify-content: center;
		margin: 30px auto 0 auto;
	}

	    .qc6cfflex-div {  
			margin: 10px 10px;
			width: 30%;
	    }
	

	.abou4flex {  
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;
		margin: 40px auto;
		width: 100%;
	}
	
	    .abou4flex-div {  
			flex-direction: row;
			justify-content: space-between;
			align-content: center;
			margin: 5px auto;
			width: 49%;
	    }
	
	        .abou4flex-div-icon {  
				margin: 0;
				padding: 10px 0;
				width: 40%;
	        }

		   .abou4flex-div-txt {  
			    justify-content: flex-start;
			    align-items: center;
			    padding: 0;
				width: 60%;
			    color: #293D82;
	        }

	
	.abgnelect { 
	    margin: 50px auto;
		width: 100%;
	}

	    .abgnelect-div {
			border-radius: 100%;
		    width: 18%;
	    }
	
	
	.area404 {  
		width: 75%;
	}


	.area404pic {  
		width: 100%;
	}
	
	.area404title {  
		font-size: 3em;
	}

	.area404txt {  
		font-size: 1.3em;
	}
	

	
	
	
/* setting word */

	.more2 {
		padding: 2px 5px 0 5px;
	}

	    .more2 img  {
			margin: 4px 0 0 3px;
			width: 18px;
			height: 18px;
	    }
	
/* Footer */
	
}

/* Mobile */

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

/* header */	

		    .mlogopic {
				margin: 10px auto 5px auto;
				padding: 0;
			    width: 150px;
		    }

/* banner */

		.inner {
			padding: 0 0 18px 0;
		}
	
	.bannerab1 {
	}
		    @keyframes head1 {
			    0%    { bottom: 20%; opacity:0;}
			    100%  { bottom: 4%;  opacity:1;}
		    }
	
	
/* area-container */
	
	.bodycontainer4 {  
		margin: 30px auto 60px auto;
		width: 93.5%;
	}
	
/* Wrapper */
	
	
/* setting */
	
	.ind5flex {  
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
	}

	    .ind5flex-d1 { 
			margin: 0 8px;
			width: 46%;
	    }

	    .ind5flex-d2 {  
			margin: 0 8px;
			width: 46%;
	    }

	    .ind5flex-d3 {  
			margin: 0 8px;
			width: 46%;
	    }
	
	
	.ind7proflex {  
		padding: 40px 0 30px 0;
	}

	    .ind7proflex-div {  
			margin: 10px 0;
			width: 49%;
	    }	

	
	.ind2fucflex {  
	    margin: 0 auto 30px auto;
	}
	
	    .ind2fucflex-div1 {
			margin-bottom: 0;
			padding: 20px 10px;
		    width: 100%;
	    }

	    .ind2fucflex-div2 {
			margin-bottom: 0;
			padding: 20px 10px;
		    width: 100%;
	    }

	    .ind2fucflex-div3 {
			margin-top: 0;
			padding: 20px 10px;
		    width: 100%;
	    }

	    .ind2fucflex-div4 {
			margin-top: 0;
			padding: 20px 10px;
		    width: 100%;
	    }
	
	        .ind2fucflex-div-c-left {
		        display: flex;
				flex-direction: column;
				width: 33%;
	        }

	            .ind2fucflex-div-c-left-pic {
		            display: block;
					margin: 0 auto 10px auto;
				    width: 60%;
	            }
	
	
	.appk5flex {  
		margin: 30px auto;
		width: 100%;
	}

	    .appk5flex-div {  
			margin: 5px 5px 4px 5px;
			padding: 5px;
		    min-width: 13em;
	    }
	
	.apppic4flex {  
		margin: 20px auto;
		width: 100%;
	}

	    .apppic4flex-div {  
			margin: 10px 0;
			width: 49%;
	    }
	
	    .apppic4flex-divname {  
			font-size: 100%;
	    }
	
	.apppic3flex {  
		margin: 20px auto;
		width: 100%;
	}

	    .apppic3flex-div {  
			margin: 10px 0;
			width: 49%;
	    }
	
	.qc6cfflex {  
		justify-content: space-between;
		margin: 30px auto 0 auto;
	}

	    .qc6cfflex-div {  
			margin: 10px 0;
			width: 48%;
	    }
	
	
	.qctestflex {  
		flex-wrap: wrap;
		margin: 0 auto 0 auto;
		width: 100%;
	}

	    .qctestflex-div {  
		    display: block;
			position: relative;
			margin: 5px auto;
			width: 100%;
	    }
	
	
	.rd3flex {  
		flex-direction: column;
		width: 100%;
	}

	    .rd3flex-div {  
			margin: 15px auto;
			width: 80%;
	    }
	
	.rd2flex {  
		width: 80%;
	}

	    .rd2flex-div {  
			width: 100%;
	    }
	
	
	.map2flex {  
		flex-direction: column;
		margin: 50px auto;
		width: 100%;
	}

	    .map2flex-map {  
			margin: 10px auto;
			width: 90%;
	    }


	    .map2flex-div {  
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			flex-direction: column;
			align-content: flex-start;
			margin: 10px auto;
			padding: 0 10px;
			width: 100%;
			justify-content: center;
			align-content: center;
	    }

	        .map2flex-divlogo1 {  
				margin: 0 auto;
				width: 70%;
	        }
	
		    .map2flex-divtxt {  
				margin: 20px auto;
				width: 70%;
	        }
	
	
	.abcompic { 
		justify-content: space-between;
		align-content: stretch;
	    margin: 30px auto;
		width: 100%;
	}

	    .abcompic-div1 {
		    width: 66.8%;
	    }

	    .abcompic-div2 {
		    width: 23%;
	    }
	
	
	.abgnelect { 
	    margin: 50px auto;
		width: 100%;
	}

	    .abgnelect-div {
			border-radius: 100%;
		    width: 20%;
	    }	
	
	
	.abgnpic3 { 
		margin: 40px auto;
		width: 84%;
	}
	
	
	.absel { 
		flex-wrap: wrap;
	    margin: 40px auto;
		width: 100%;
	}

	    .absel-div {
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin: 10px 20px;
			padding: 20px 45px 25px 35px;
		    width: 85%;
	    }

            .absel-divpic {
				margin-right: 10px;
				width: 20%;
	        }

            .absel-divnote {
			    flex-direction: column;
			    justify-content: flex-start;
			    align-items: stretch;
				width: 88%;
	        }
	
            .absel-divtitle {
			    flex-direction: column;
			    justify-content: flex-start;
			    align-items: flex-start;
				padding: 10px 0;
				width: 100%;
	        }

            .absel-divtxt {
		        padding: 20px 0 0 0;
	        }
	
	.proinfo-flex {  
	    margin: 30px auto 20px auto;
	}
	
	    .proinfo-flex-div-r1 {
			flex-direction: column;
	    }

	
	    .proinfo-flex-div-r2 {
			flex-direction: column;
			width: 100%;
	    }

	        .proinfo-flex-div-r-d1 {
		        display: flex;
			    position: relative;
			    justify-content: flex-start;
			    align-items: stretch;
				padding: 15px 0 10px 0;
			    flex: 0 0 100%;
	        }

	        .proinfo-flex-div-r-d1-1 {
		        display: none;
	        }


	        .proinfo-flex-div-r-d2 {
			    justify-content: flex-start;
			    align-items: flex-start;
				padding: 10px 0;
			    width: 100%;
	        }
	
	        .proinfo-flex-div-r-d2-1 {
		        display: flex;
				flex-direction: column;
			    position: relative;
			    justify-content: flex-start;
			    align-items: stretch;
				padding: 0;
				width: 85%;
	        }


	        .proinfo-flex-d-title {
		        font-size: 1.5em;
				font-weight: bold;
	        }

	        .proinfo-flex-d-txttitle {
		        font-size: 1.2em;
	        }

	
/* setting word */

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

		#footer .fdiv1 {
			margin-right: 30px;
			width: 42%;
		}

		#footer .fdiv2 {
			width: 100%;
		}

		#footer .fdiv3 {
			margin: 20px 0 0 0;
			width: 100%;
		}
	
		#footer .ftitle2 {
			margin: 10px 0 10px 0;
		}
	
		    #footer .div2-div-rw {
				justify-content: flex-start;
		    }
	
		        #footer .div2-div-rw-c {
			        margin: 0 20px 15px 0;
		        }
	
	
		#footer .flogo {
			margin-bottom: 10px;
		}
	
		    .ficon {
				margin-left: 15px;
		    }

		        .ficon img {
			        height: 30px;
		        }
	
	
	.pcess {
		flex-wrap: wrap;
		justify-content: center;
		width: 95%;
	}

	.pcessd {
		margin: 8px 5px;
		width: 20%;
	}
	
	.pcesspic {
		margin: 2em auto 1em auto;
		width: 80%;
	}

	
	
	

		/* Off-Canvas Navigation */

			#navButton .toggle:before {
				top: 8px;
				left: 8px;
				width: 45px;
				height: 45px;
				line-height: 45px;
			}

			#navButton .toggle:after {
				top: 8px;
				left: 8px;
				width: 45px;
				height: 45px;
			}
	
	
}



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


/* banner */

	.bannerab1 {
	}
		    @keyframes head1 {
			    0%    { bottom: 20%; opacity:0;}
			    100%  { bottom: 4%;  opacity:1;}
		    }
	
/* area-container */
	
	.bodycontainer4 {  
		margin: 30px auto 60px auto;
		width: 96%;
	}
	
/* Wrapper */
	
	
/* setting */
	
	.ind7proflex {  
		padding: 30px 0 20px 0;
	}

	    .ind7proflex-div {  
			margin: 8px 0;
			width: 49%;
	    }	

	        .ind7proflex-divname {  
				padding: 5px 10px;
				font-size: 1.2em;
	        }
	
	
	.knoqaflex {  
		margin: 15px auto;
	}

	    .knoqaflex-div {  
			margin: 15px 0;
			padding: 0 40px 40px 40px;
		    width: 100%;
	    }
	
	        .knoqaflex-divno1 {  
				padding: 10px 15px;
				font-size: 1.8em;
				letter-spacing: 2px;
	        }
	
	        .knoqaflex-divtitle {  
				margin: 15px auto;
				padding: 10px 0;
				font-size: 1.4em;
	        }
	
	.knopic1 {  
	    margin: 30px auto 0 auto;
		width: 170px;
	}

	.knopic2 {  
	    margin: 20px auto 0 auto;
		width: 130px;
	}

	.knopic3 {  
	    margin: 20px auto 0 auto;
		width: 100px;
	}		
	
	.prokind7flex {  
		margin: 30px auto;
		width: 100%;
	}

	    .prokind7flex-div {  
			margin: 0 5px 10px 5px;
			width: 47%;
	    }
	
	
	.qc2flex {  
		flex-direction: column;
		position: relative;
		justify-content: center;
		align-items: stretch;
		margin: 30px auto;
		width: 83%;
	}

	    .qc2flex-div {  
		    display: block;
			margin: 8px auto;
			padding: 5px 0;
			width: 90%;
	    }
	
	
	.map2flex {  
		flex-direction: column;
		margin: 50px auto;
		width: 100%;
	}

	    .map2flex-map {  
			margin: 10px auto;
			width: 90%;
	    }

	    .map2flex-div {  
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			flex-direction: column;
			align-content: flex-start;
			margin: 10px auto;
			width: 100%;
			justify-content: center;
			align-content: center;
	    }

	        .map2flex-divlogo1 {  
				margin: 0 auto;
				width: 70%;
	        }
	
	            .map2flex-divlogo1 img {  
				    width: 100%;
	            }
	
		    .map2flex-divtxt {  
				margin: 20px auto;
				width: 70%;
	        }
	
	
	.abou4flex {  
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		margin: 30px auto;
		width: 100%;
	}
	
	    .abou4flex-div {  
			flex-direction: column;
			justify-content: flex-start;
			align-content: center;
			margin: 5px auto;
			width: 48%;
	    }
	
	        .abou4flex-div-icon {  
				margin: 0 auto;
				padding: 15px 0 0 0;
				width: 70%;
	        }

		   .abou4flex-div-txt {  
			    justify-content: center;
			    align-items: center;
			    padding: 20px 5px;
				width: 100%;
			    color: #293D82;
			    text-align: center;
	        }
	
	
	.aboufour {  
		display: none;
	}
	
	.aboufour-m {  
		display:  block;
		position: relative;
		margin: 20px auto;
		width: 100%;
	}
	
	    .aboufour-m-logo {  
		   display: block;
		   position: relative;
		   width: 60%;
	    }
	
	         .aboufour-m-logo img {  
		       display: block;
		       width: 100%;
	         }
	
	    .aboufour-m-flex {  
		    display: flex;
			flex-direction: column;
		    justify-content: center;
			align-items: stretch;
		    position: relative;
		    margin: 10px auto;
		    width: 100%;
	    }
	
	         .aboufour-m-flex-div1 { 
		         display: flex;
				 justify-content: center;
				 align-items: center;
				 margin: 5px auto;
				 padding: 20px 20px 18px 20px;
		         width: 100%;
				 background-color: #CBDFF3;
				 border-radius: 10px;
	         }
	
	         .aboufour-m-flex-div2 { 
		         display: flex;
				 justify-content: center;
				 align-items: center;
				 margin: 5px auto;
				 padding: 20px 20px 18px 20px;
		         width: 100%;
				 background-color: #E5E5E5;
				 border-radius: 10px;
	         }
	
	             .aboufour-m-flex-div-icon { 
		             display: flex;
				     justify-content: flex-start;
				     align-items: center;
		             width: 20%;
	             }
	
	             .aboufour-m-flex-div-icon img { 
		             display: block;
		             width: 80%;
	             }
	
	             .aboufour-m-flex-div-txt { 
		             display: flex;
					 flex-direction: column;
				     justify-content: flex-start;
				     align-items: flex-start;
		             width: 80%;
	             }
	
	
	.abgnelect { 
	    margin: 40px auto;
		width: 100%;
	}

	    .abgnelect-div {
			margin: 10px auto;
			border-radius: 100%;
		    width: 22%;
	    }
	
	
	.abgnpic2 { 
		width: 90%;
	}
	
	.abgnpic3 { 
		margin: 40px auto;
		width: 92%;
	}
	
	
	.absel { 
		flex-wrap: wrap;
	    margin: 40px auto;
		width: 100%;
	}

	    .absel-div {
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin: 10px 20px;
			padding: 10px 30px 15px 15px;
		    width: 100%;
	    }

            .absel-divpic {
				margin-right: 10px;
				width: 23%;
	        }

            .absel-divnote {
			    flex-direction: column;
			    justify-content: flex-start;
			    align-items: stretch;
				width: 75%;
	        }
	
            .absel-divtitle {
			    flex-direction: column;
			    justify-content: flex-start;
			    align-items: flex-start;
				padding: 10px 0;
				width: 100%;
	        }

            .absel-divtxt {
		        padding: 10px 0 0 0;
	        }
	
	
	.area404 {  
		width: 75%;
	}


	.area404pic {  
		width: 100%;
	}
	
	.area404title {  
		line-height: 135%;
		font-size: 2.2em;
	}

	.area404txt {  
		margin: 10px auto 20px auto;
		font-size: 1.2em;
	}
	
	.area404goback {  
		display: inline-block;
	    margin: 0 auto;
		padding: 8px 25px;
		width: 100%;
		font-size: 1.4em;
		border-radius: 15px;
	}

	
	
/* setting word */

	
/* Footer */

		#footer .fre2 {
			flex-direction: column;
		    justify-content: flex-start;
			align-items: flex-start;
	     }

		#footer .fdiv1 {
			margin-right: 30px;
			width: 45%;
		}

		#footer .fdiv2 {
			width: 100%;
		}

		#footer .fdiv3 {
			margin: 20px 0 0 0;
			width: 100%;
		}
	
		#footer .ftitle2 {
			margin: 10px 0 10px 0;
		}
	
		    #footer .div2-div-rw {
				justify-content: flex-start;
		    }
	
		        #footer .div2-div-rw-c {
			        margin: 0 20px 15px 0;
		        }
	
	
		    .ficon {
				margin-left: 15px;
		    }

		        .ficon img {
			        height: 30px;
		        }
	
	
	.pcess {
		margin: 0 auto;
		flex-wrap: wrap;
		justify-content: center;
		width: 95%;
	}

	.pcessd {
		margin: 8px 5px;
		width: 20%;
	}
	
	.pcesspic {
		margin: 2em auto 1em auto;
		width: 80%;
	}

	
	
	
}


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

/* header */	
	
		.mlogo {
			position: relative;
			background-color: rgba(255,255,255, 1);
			width: 100%;
		}

		    .mlogopic {
				margin: 15px auto 5px auto;
				padding: 0;
			    width: 140px;
		    }

/* banner */
	
		.inner {
			padding: 0 0 20px 0;
		}
	
		    .inner img {
			    width: 105%;
		    }

	.bannerab1 img {
		width: 105%
	}
		    @keyframes head1 {
			    0%    { bottom: 17%; opacity:0;}
			    100%  { bottom: 7%;  opacity:1;}
		    }

	.bannerab2 {
		width: 38%;
		
	}
		    @keyframes head2 {
			    0%    {top: 22%; left: 2%;  opacity: 0;}
			    100%  {top: 22%; left: 8%; opacity: 1;}
		    }

	.bannerab3 {
		width: 42%;
	}

		    @keyframes head3 {
			    0%    {top: 56%; left: 8%;  opacity: 0;}
			    100%  {top: 56%; left: 8%; opacity: 1;}
		    }

	.bannerab4 {
		width: 50%;
	}

		    @keyframes head4 {
			    0%    {top: 40%; left: 8%; opacity: 0;}
			    100%  {top: 40%; left: 8%; opacity: 1;}
		    }
	
	.bannerab2-page {
		width: 38%;
		
	}
		    @keyframes head2-page {
			    0%    {top: 25%; left: 2%;  opacity: 0;}
			    100%  {top: 25%; left: 8%; opacity: 1;}
		    }

	.bannerab4-page {
		width: 60%;
	}

		    @keyframes head4-page {
			    0%    {top: 46%; left: 8%; opacity: 0;}
			    100%  {top: 46%; left: 8%; opacity: 1;}
		    }
	
	
	
	
/* area-container */
	
	.bodycontainer1 {  
		margin: 25px auto;
		width: 83%;
	}
	
/* Wrapper */
	
	
/* setting */
	
	.indap1 {  
		margin: 20px auto 0 auto;
		padding: 30px 0;
		background-image: url("../../images/pic_indap_bg1.png");
		background-size: 450%;
	}

	.indap2 {  
		background-image: url("../../images/pic_indap_bg2.png"), url(../../images/pic_indap_bg2-2.png);
		background-repeat: no-repeat, repeat-y;
		background-position: center top, center bottom;
		background-size: 450%;
		z-index: 9;
	}

	.indap3 {  
		background-size: 450%;
	}
	
	.indap5 {  
		background-image: url("../../images/pic_indap_bg5.png");
		background-repeat: repeat-y;
		background-position: center top;
		background-size: 100%;
	}
	
	
	.ind5flex {  
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
	}

	    .ind5flex-d1 { 
			margin: 0;
			width: 90%;
	    }

	    .ind5flex-d2 {  
			margin: 0;
			width: 90%;
	    }

	    .ind5flex-d3 {  
			margin: 0;
			width: 90%;
	    }
	
	
	.ind7proflex {  
		padding: 30px 0 10px 0;
	}

	    .ind7proflex-div {  
			margin: 5px 0;
			width: 49%;
	    }	

	        .ind7proflex-divname {  
				padding: 5px 10px;
				font-size: 1.1em;
	        }
	
	
	
	.appk5flex {  
		margin: 30px auto;
		width: 100%;
	}

	    .appk5flex-div {  
			margin: 5px 5px 4px 5px;
			padding: 5px;
		    min-width: 1;
			width: 95%;
	    }
	
	.apppic4flex {  
		margin: 20px auto;
		width: 100%;
	}

	    .apppic4flex-div {  
			margin: 10px 0;
			width: 49%;
	    }

	    .apppic4flex-divname {  
			font-size: 95%;
			line-height: 115%;
	    }
	
	.apppic3flex {  
		margin: 20px auto;
		width: 100%;
	}

	    .apppic3flex-div {  
			margin: 10px 0;
			width: 49%;
	    }
	
	
	.rd3flex {  
		width: 100%;
	}

	    .rd3flex-div {  
			margin: 15px auto;
			width: 90%;
	    }
		
	
	.rd2flex {  
		flex-direction: column;
		width: 100%;
	}

	    .rd2flex-div {  
			width: 100%;
	    }
	
	
	.map2flex {  
		flex-direction: column;
		margin: 50px auto;
		width: 100%;
	}

	    .map2flex-map {  
			margin: 10px auto;
			width: 90%;
	    }

	    .map2flex-div {  
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			flex-direction: column;
			align-content: flex-start;
			margin: 10px auto;
			padding: 0 30px;
			width: 100%;
			justify-content: center;
			align-content: center;
	    }

	        .map2flex-divlogo1 {  
				margin: 0 auto;
				width: 100%;
	        }
	
	            .map2flex-divlogo1 img {  
				    width: 100%;
	            }
	
		    .map2flex-divtxt {  
				margin: 20px auto;
				width: 100%;
	        }
	
	
	.abgnelect { 
		flex-wrap: wrap;
	    margin: 20px auto;
		width: 80%;
	}

	    .abgnelect-div {
			margin: 10px auto;
			border-radius: 100%;
		    width: 40%;
	    }
	
	
	.abgnpic3 { 
		margin: 20px auto;
		width: 88%;
	}
	

	
	
	
	.areatitle {  /* - title center - */

	}

	    .areatitle img {
		    width: 120px;
	    }

	.areatitleab {  /* - title center - */

	}

	    .areatitleab img {
		    width: 125px;
	    }

    
 	.areaart {  /* - artcl center - */
		display: block;
		position: relative;
	    margin: 20px auto;
		width: 90%;
		text-align: justify;
	}


	
	

/* setting word */

	
/* Footer */
	
		#footer .fdivall {
		    display: flex;
			display: -webkit-flex; /* Safari */
			flex-wrap: wrap;
			margin: 0 auto;
		    width: 100%;
		    justify-content: space-between;
		    padding: 2em 0 3em 0;
	     }
	
		#footer .fre1 {
			margin: 0 auto 20px auto;
	     }
	
		#footer .fre2 {
			flex-direction: column;
		    justify-content: flex-start;
			align-items: flex-start;
	     }

		#footer .fdiv1 {
			margin-right: 30px;
			width: 60%;
		}

		#footer .fdiv2 {
			width: 100%;
		}

		#footer .fdiv3 {
			margin: 20px 0 0 0;
			width: 100%;
		}
	
		#footer .ftitle2 {
			margin: 10px 0 10px 0;
		}
	
		    #footer .div2-div-rw {
				justify-content: flex-start;
		    }
	
		        #footer .div2-div-rw-c {
			        margin: 0 20px 15px 0;
		        }
	
	
		    .ficon {
				margin-left: 10px;
		    }

		        .ficon img {
			        height: 30px;
		        }
	
	
/* myBtn - go top */

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

	
		/* Off-Canvas Navigation */

			#navButton .toggle:before {
				top: 8px;
				left: 8px;
				width: 40px;
				height: 40px;
				line-height: 40px;
			}

			#navButton .toggle:after {
				top: 8px;
				left: 8px;
				width: 40px;
				height: 40px;
			}
	
	
	


	
}

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

		.mlogo {
			position: relative;
			background-color: rgba(255,255,255, 0.7);
			width: 100%;
		}

		    .mlogopic {
				margin: 12px auto 5px auto;
				padding: 0;
			    width: 145px;
		    }
	
/* banner */

		.inner {
			padding: 0 0 22px 0;
		}
	
	.bannerab1 {
	}
		    @keyframes head1 {
			    0%    { bottom: 20%; opacity:0;}
			    100%  { bottom: 11%;  opacity:1;}
		    }

	.bannerab2 {
		width: 45%;
		
	}
		    @keyframes head2 {
			    0%    {top: 15%; left: 2%; opacity: 0;}
			    100%  {top: 15%; left: 8%; opacity: 1;}
		    }

	.bannerab3 {
		width: 50%;
	}

		    @keyframes head3 {
			    0%    {top: 50%; left: 8%; opacity: 0;}
			    100%  {top: 50%; left: 8%; opacity: 1;}
		    }

	.bannerab4 {
		width: 50%;
	}

		    @keyframes head4 {
			    0%    {top: 36%; left: 8.5%; opacity: 0;}
			    100%  {top: 36%; left: 8.5%; opacity: 1;}
		    }
	
	.bannerab2-page {
		width: 45%;
		
	}
	
		    @keyframes head2-page {
			    0%    {top: 22%; left: 2%; opacity: 0;}
			    100%  {top: 22%; left: 8%; opacity: 1;}
		    }
	
	.bannerab4-page {
		width: 60%;
	}
	
		    @keyframes head4-page {
			    0%    {top: 45%; left: 8.5%; opacity: 0;}
			    100%  {top: 45%; left: 8.5%; opacity: 1;}
		    }
	
	
	
/* area-container */
	
	.headcontainer {  
		width: 83%;
	}

	.bodycontainer1 {  
		margin: 20px auto;
		width: 83%;
	}

	.bodycontainer1-0margin {  
		width: 83%;
	}

	.bodycontainer2 {  
		width: 83%;
	}

	.bodycontainer3 {  
		width: 83%;
	}
	
	.footercontainer {  /* footer */
		width: 83%;
	}
	
	
	
	
/* Wrapper */
	
	
/* setting */
	
	.ind5flex {  
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
	}

	    .ind5flex-d1 { 
			margin: 0;
			width: 85%;
	    }

	    .ind5flex-d2 {  
			margin: 0;
			width: 85%;
	    }

	    .ind5flex-d3 {  
			margin: 0;
			width: 85%;
	    }
	
	.ind7proflex {  
		padding: 30px 0 10px 0;
	}
	
	
	.ind7proflex {  
		padding: 40px 0 30px 0;
	}

	    .ind7proflex-div {  
			margin: 10px 0;
			width: 49%;
	    }	

	
	.ind2fucflex {  
	    margin: 0 auto 30px auto;
	}
	
	    .ind2fucflex-div1 {
			margin-bottom: 0;
			padding: 10px 10px;
		    width: 100%;
	    }

	    .ind2fucflex-div2 {
			margin-bottom: 0;
			padding: 10px 10px;
		    width: 100%;
	    }

	    .ind2fucflex-div3 {
			margin-top: 0;
			padding: 10px 10px;
		    width: 100%;
	    }

	    .ind2fucflex-div4 {
			margin-top: 0;
			padding: 10px 10px;
		    width: 100%;
	    }
	
	        .ind2fucflex-div-c-left {
		        display: flex;
				flex-direction: column;
				width: 40%;
	        }

	            .ind2fucflex-div-c-left-pic {
		            display: block;
					margin: 0 auto 5px auto;
				    width: 70%;
	            }
	
	
	.knoqaflex {  
		margin: 15px auto;
	}

	    .knoqaflex-div {  
			margin: 15px 0;
			padding: 0 30px 35px 30px;
		    width: 100%;
	    }
	
	        .knoqaflex-divno1 {  
				padding: 10px 15px;
				font-size: 1.8em;
				letter-spacing: 2px;
	        }
	
	        .knoqaflex-divtitle {  
				margin: 15px auto;
				padding: 10px 0;
				font-size: 1.4em;
	        }
	
	.knopic1 {  
	    margin: 30px auto 0 auto;
		width: 140px;
	}

	.knopic2 {  
	    margin: 20px auto 0 auto;
		width: 120px;
	}

	.knopic3 {  
	    margin: 20px auto 0 auto;
		width: 90px;
	}		
	
	
	.abgnelect { 
		flex-wrap: wrap;
	    margin: 20px auto;
		width: 95%;
	}

	    .abgnelect-div {
			margin: 5px auto;
			border-radius: 100%;
		    width: 40%;
	    }
	
	
	.absel { 
		flex-wrap: wrap;
	    margin: 40px auto;
		width: 100%;
	}

	    .absel-div {
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			margin: 10px 20px;
			padding: 10px 30px 15px 25px;
		    width: 100%;
	    }

            .absel-divpic {
				margin: 0 auto;
				width: 30%;
	        }

            .absel-divnote {
			    flex-direction: column;
			    justify-content: center;
			    align-items: stretch;
				width: 100%;
	        }
	
            .absel-divtitle {
			    flex-direction: column;
			    justify-content: center;
			    align-items: center;
				padding: 10px 0;
				width: 100%;
	        }

            .absel-divtxt {
		        padding: 10px 0 0 0;
	        }
	
	
	.p7flex { 
		margin: 0 auto 10px auto;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: stretch;
		width: 100%;
		border-bottom: none;
	}
	
	    .p7flex > * {
			margin: 5px 0;
			padding: 3px 0 2px 0;
			font-size: 120%;
			font-weight: bold;
	    }

	    .p7flex-div {
		    width: 48%;
	    }

	    .p7flex-div1 {
		    width: 48%;
	    }
	
	
	
	
	
	.areatitle {  /* - title center - */
		
	}

	    .areatitle img {
		    width: 110px;
	    }

	.areatitletxt {  /* - title center - */
	    margin: 0 auto 20px auto;
	}

	
	.areatitleab {  /* - title center - */

	}

	    .areatitleab img {
		    width: 110px;
	    }

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

	    .areaapptitle img {
		    width: 85px;
	    }
	
 	.areaart {  /* - artcl center - */
		display: block;
		position: relative;
	    margin: 10px auto;
		width: 90%;
		text-align: justify;
	}
	

	
/* setting word */

	.txt1 {
		font-size: 1em;
		line-height: 155%;
	}
	
	.txt1-39 {
		padding-left: 3.9em;
		font-size: 1em;
	}

	.txt1-b {
		font-size: 1em;
		font-weight: bold;
		line-height: 155%;
	}

	.txt1-indent {
		padding-left: 1em;
		text-indent: -1em;
		font-size: 1em;
		line-height: 155%;
	}

	.txt2 {
		font-size: 1.2em;
		line-height: 150%;
	}

	.txt2-b {
		font-size: 1.2em;
		font-weight: bold;
		line-height: 150%;
	}

	.txt3 {
		font-size: 1.2em;
		line-height: 150%;
	}

	.bigtitle {
		font-size: 1.5em;
		line-height: 160%;
	}

	.bigtitle-b {
		font-size: 1.5em;
		line-height: 160%;
		font-weight: bold;
	}

	.bigtitle1 {
		font-size: 1.8em;
		line-height: 120%;
	}

	.bigtitle1-b {
		margin-bottom: 10px;
		font-size: 1.8em;
		font-weight: bold;
		line-height: 130%;
	}
	
	.more2 {
		transform: scale(0.85);
		padding: 2px 10px 0 10px;
	}

	    .more2 img  {
			margin: 4px 0 0 3px;
			width: 18px;
			height: 18px;
	    }
	
/* Footer */


		/* Off-Canvas Navigation */

			#navButton .toggle:before {
				top: 5px;
				left: 8px;
				width: 40px;
				height: 40px;
				line-height: 40px;
			}

			#navButton .toggle:after {
				top: 5px;
				left: 8px;
				width: 40px;
				height: 40px;
			}
	
	
	.pcess {
		margin: 0 auto;
		flex-wrap: wrap;
		justify-content: center;
		width: 95%;
	}

	.pcessd {
		margin: 5px 5px;
		width: 29%;
	}
	
	.pcesspic {
		margin: 1em auto 5px auto;
		width: 90%;
	}

	

}



@media screen and (max-width: 379px) {
	
	.txt1-39 {
		padding-left: 0;
		font-size: 1em;
	}
	

}




/*-------------滑鼠.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;
}