@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}
/*-----------------style------------------*/
#wrapper {
	background-size: cover;
	background-attachment: fixed;
	background-image: url(image/bg.jpg);
	background-repeat: no-repeat;
}
/*====menu====*/
.nav1 {    
	font-family: Arial, Helvetica, sans-serif ;
	font-size: 11px;
	letter-spacing: 0.8px;
	color:#FFF
	}
    a.nav1:link, a.nav1:visited{
	color: #FFFFFF;
	text-decoration: none;
    }
    a.nav1:hover,a.nav1:active {
	text-decoration: none;
	color: #FFECC8;
    }
.pmenu {
	}
	a.pmenu:link, a:visited {
	color:#CCCCCC;
	text-decoration: none;
	display:block;
	padding:5px 8px;
    }
    a.pmenu:hover, a:active {
	text-decoration: none;
	color: #FFECC8;
	background-color: rgba(255,255,153,0.2);
	border-radius:3px;
    }

/*====line gradient====*/
.line0{
    margin:20px auto 10px auto ;
	border:0;
	background-image:-webkit-linear-gradient(left,#7BB0C5,#fff,#7BB0C5);
	height:2px;
	width:300px;
}
.line1{
    margin:20px auto 10px auto ;
	border:0;
	background-image:-webkit-linear-gradient(left,#7594A9,#fff,#7594A9);
	height:2px;
	width:300px;
}
.line2{
    margin:20px auto 10px auto ;
	border:0;
	background-image:-webkit-linear-gradient(left, #666,#fff, #666);
	height:2px;
	width:300px;
}
.line3{
    margin:20px auto 10px auto ;
	border:0;
	background-image:-webkit-linear-gradient(left, #c3dfc9,#fff, #54bac9);
	height:2px;
	width:300px;
}
/*====text====*/
.h1 {/*====meantitle====*/
	font-family:'Maven Pro', sans-serif;
	font-weight: 900;
	letter-spacing: 3px;
	font-size: 30px;
		
    }
.h2 {/*====copyright====*/
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 100;
	letter-spacing:1.2px;
	font-size: 13.5px;
	line-height: 25px;
	color: #CCC;
	text-align: left;
	}
.h3{ /*==pj-title==*/
	font-family:Arial, Helvetica, sans-serif,
	Noto Sans, sans-serif, WenQuanYi Zen Hei, 
	體-繁, Heiti TC, 微軟正黑體,
	Microsoft JhengHei, 
	標楷體, DFKai-SB, sans-serif;
	line-height: 5px;
	font-size: 15px;
	letter-spacing: 1px;
}
.h4{ /*==pj-article==*/
    font-family:Arial, Helvetica, sans-serif,
	Noto Sans, sans-serif, WenQuanYi Zen Hei, 
	體-繁, Heiti TC, 微軟正黑體,
	Microsoft JhengHei, 
	標楷體, DFKai-SB, sans-serif;
	font-weight:100;
	line-height: 20px;
	font-size: 13px;
	letter-spacing: 0.8px;
}
.sub1{
	height:100px;
	margin:95px 0px 0px 0px;
	text-align:center;
    text-shadow: rgb(224, 224, 224) 1px 1px 0px;
}
.sub2{
	height:100px;
	margin:95px 0px 0px 0px;
	text-align:center;
    text-shadow: rgb(224, 224, 224) 1px 1px 0px;
}
.sub3{
	height:100px;
	margin:95px 0px 20px 0px;
	text-align:center;
    text-shadow: rgb(224, 224, 224) 1px 1px 0px;
}
.article0,.article1,.article2 {
	font-family:Arial, Helvetica, sans-serif,
	Noto Sans, sans-serif, WenQuanYi Zen Hei, 
	體-繁, Heiti TC, 微軟正黑體,
	Microsoft JhengHei, 
	標楷體, DFKai-SB, sans-serif;
	width:70%;	
	margin:20px auto;
	padding:5px;
	line-height: 30px;
}

.s1{
	background:rgba(172,222,224,0.8);
}
.s2{
	background:rgba(151,215,217,0.8);
}
.s3{
	background:rgba(129,208,211,0.8);
}
.s4{
	background:rgba(106,201,205,0.8);
}
.s5{
	background:rgba(78,195,199,0.8);
}
.s6{
	background:rgba(47,188,190,0.8);
}
.p1{
	background: rgba(72,193,167,0.6);
}
.p2{
	background:rgba(84,186,201,0.6);
}
.p3{
	background:rgba(178,159,130,0.6);
}
.p4{
	background:rgba(203,201,104,0.6);
}
.p5{
	background:rgba(0,140,207,0.6);
}
.p6{
	background:rgba(150,118,181,0.6);
}
.p7{
	background:rgba(241,119,174,0.6);
}
.p8{
	background: rgba(120,171,122,0.6);
}

.ic{
	margin:18px auto;
	width:60%;
}
.iw{
	font-family:Arial, Helvetica, sans-serif,
	Noto Sans, sans-serif, WenQuanYi Zen Hei, 
	體-繁, Heiti TC, 微軟正黑體,
	Microsoft JhengHei, 
	標楷體, DFKai-SB, sans-serif;
	margin:18px auto 10px auto;
	width:99%;
	text-align:center;
	color:#FFF;
	line-height: 20px;
}
.googlemap{
	margin:40px 3px;
	height:220px;
	width:auto;
}

/*-----------------style------------------*/


/* Mobile Layout: 480px and below. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
}
#wrapper {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.iw{
	font-size: 15px;
	letter-spacing:2px;
}
/*-------header-------480px and below-----*/
#header { 
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	height: 55px;
	display: block;
	position:fixed;
	box-shadow: 0px 1px 8px 0px #333;
	background:rgba(0, 0, 0, 0.8);
}
#logo {
	clear: none;
	float: left;
	margin : 10px 0px 0px 5px;
	width: 70%;
	height: 35px;
	display: block;
}
#nav1 {
	clear:none;
	float:right;
	margin:15px 8px 5px 0px;
	width:auto;
	display:block;
	color: #FFF;
}
#main_menu {
	clear: none;
	float: right;
	margin:5px 0px 0px 0px;
	display: block;
}
/*-------header-------480px and below-----*/
/*-------news-------480px and below-----*/
#news {
	clear: both;
	float: left;
	margin: 0px 0px 0px 0px;
	width: 100%;
	color: rgba(20, 49, 67,0.8);
	background: linear-gradient(175deg, rgba(196, 226, 235, 0.7)39%, rgba(198, 216, 215, 0.7)89%); 
    background: -moz-linear-gradient(175deg, rgba(196, 226, 235, 0.7)39%, rgba(198, 216, 215, 0.7)89%); 
    background: -webkit-linear-gradient(175deg, rgba(196, 226, 235, 0.7)39%, rgba(198, 216, 215, 0.7)89%); 
    background: -o-linear-gradient(175deg, rgba(196, 226, 235, 0.7)39%, rgba(198, 216, 215, 0.7)89%);
	box-shadow: 0px 1px 8px 0px #333;
	display: block;
}
.article0{
	color: #666;
	text-align: center;
	font-size: 17px;
	letter-spacing: 1px;
	line-height: 25px;
}
/*-------news-------480px and below-----*/
/*-------service-------480px and below-----*/
#service {
	clear: both;
	float: left;
	margin: 0px 0px 0px 0px;
	width: 100%;
	color: rgba(20, 49, 67,0.8);
	background: linear-gradient(91deg, rgba(20, 46, 67, 0.7)0%, rgba(117, 148, 169, 0.7)70%);
	background: -moz-linear-gradient(91deg, rgba(20, 46, 67, 0.7)0%, rgba(117, 148, 169, 0.7)70%);
	background: -webkit-linear-gradient(91deg, rgba(20, 46, 67, 0.7)0%, rgba(117, 148, 169, 0.7)70%);
	background: -o-linear-gradient(91deg, rgba(20, 46, 67, 0.7)0%, rgba(117, 148, 169, 0.7)70%);
	box-shadow: 0px 1px 8px 0px #333;
	display: block;
}

.article1{
	color:#FFF;
	text-align:left;
	font-size: 15px;
	letter-spacing: 1px;
}

#sicon{
	clear: none;
	float: none;
	margin:0px auto 50px auto;
	width:100%;
	text-align :center;
}

.s1,.s2,.s3,.s4,.s5,.s6{
	margin: 4px 2px;
	width: 45%;
	border-radius: 3px;
    box-shadow:1px 0px 1px  #7AB9B2;
	display: inline-block;
}

/*-------service-------480px and below-----*/
/*-------product-------480px and below-----*/
#product {
	clear: both;
	float: left;
	padding: 0px 0px 0px 0px;
	width: 100%;
	color: rgba(51,51,51,0.8);
	background: linear-gradient(-90deg, rgba(203, 225, 238, 0.8)0%, rgba(255, 255, 255, 0.8)100%); 
    background: -moz-linear-gradient(-90deg, rgba(203, 225, 238, 0.8)0%, rgba(255, 255, 255, 0.8)100%); 
    background: -webkit-linear-gradient(-90deg, rgba(203, 225, 238, 0.8)0%, rgba(255, 255, 255, 0.8)100%); 
    background: -o-linear-gradient(-90deg, rgba(203, 225, 238, 0.8)0%, rgba(255, 255, 255, 0.8)100%); 
	box-shadow: 0px 1px 8px 0px #333;
	display: block;
}

.article2{
	color: #666;
	text-align:left;
	font-size: 15px;
	letter-spacing: 1px;
}

#picon{
	clear: none;
	float: none;
	margin:0px auto 0px auto;
	width:100%;
	text-align :center;
}

.p1,.p2,.p3,.p4,.p5,.p6,.p7,.p8{
	margin:0px;
	width:100%;
	border-radius:3px ;
	box-shadow: 0px 1px 5px 1px  #89A8B9;
	display: inline-block;
}
/*-------product-------480px and below-----*/
/*-------project------480px and below-----*/	

#project {
	clear: both;
	float: left;
	padding: 0px 0px 0px 0px;
	width: 100%;
	color: rgba(51,135,147,0.9);
	background: linear-gradient(180deg, rgba(84, 186, 201, 0.8)0%, rgba(195, 223, 201, 0.8)100%); 
    background: -moz-linear-gradient(180deg, rgba(84, 186, 201, 0.8)0%, rgba(195, 223, 201, 0.8)100%); 
    background: -webkit-linear-gradient(180deg, rgba(84, 186, 201, 0.8)0%, rgba(195, 223, 201, 0.8)100%); 
    background: -o-linear-gradient(180deg, rgba(84, 186, 201, 0.8)0%, rgba(195, 223, 201, 0.8)100%); 
	box-shadow: 0px 1px 8px 0px #333;
	display: block;
}

#pjname{
	clear: none;
	float: none;
	margin:0px auto 60px auto;
	width:100%;
}

.pjname1,.pjname2,.pjname3,.pjname4,.pjname5,.pjname6{
	clear: none;
	float: left;
	margin:5px 7.5%;
	width:85%;
	color: #666;
	border-top-style: ridge;
	border-top-color: #999;
	border-top-width: 1px;
	text-align:left;
}

#pj{
	clear: none;
	float: none;
	margin:0px auto 50px auto;
	width:80%;
	text-align :center;
}

.pj1,.pj2,.pj3,.pj4,.pj5,.pj6,.pj7,.pj8,.pj9,.pj10,.pj11,.pj12{
	margin:0;
	width:80px;
	height:80px;
	background:rgba(122,185,178,0.1);
	border: 2px; 
	border-color:rgba(255,255,255,0.3);
	border-radius:4px ;
	box-shadow: 1px 1px 0px 1px  #7AB9B2;
	display: inline-block;
}

.pj1{
	background: url(image/pj1-80.png) no-repeat;
}
.pj2{
	background: url(image/pj2-80.png) no-repeat;
}
.pj3{
	background: url(image/pj3-80.png) no-repeat;
}
.pj4{
	background: url(image/pj4-80.png) no-repeat;
}
.pj5{
	background: url(image/pj5-80.png) no-repeat;
}
.pj6{
	background: url(image/pj6-80.png) no-repeat;
}
.pj7{
	background: url(image/pj7-80.png) no-repeat;
}
.pj8{
	background: url(image/pj8-80.png) no-repeat;
}
.pj9{
	background: url(image/pj9-80.png) no-repeat;
}
.pj10{
	background: url(image/pj10-80.png) no-repeat;
}
.pj11{
	background: url(image/pj11-80.png) no-repeat;
}
.pj12{
	background: url(image/pj12-80.png) no-repeat;
}
/*-------project------480px and below-----*/
/*--------footer------480px and below-----*/
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background:url(image/footer%20bg.jpg);
	box-shadow: 0px 1px 8px 0px #333;
}

#contact {
	clear: none;
	float: left;
	margin:0px 5px;
	width: 80%;
	padding:10px 20px;
	display: block;
	color:#FFF;
}

#map {
	clear: none;
	float: left;
	margin:0% 5%;
	width:90%;
	display: block;
	color: #FFF;
}

#copyright {
	clear: none;
	float: left;
	width:100%;
	display: block;
	background: rgba(220, 220, 220, 0.2);
	border-top-style: ridge;
	border-top-color: #999;
	border-top-width: 1px;
	text-align: center;	
}
/*--------footer------480px and below-----*/



/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
}
#wrapper {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.iw{
	font-size: 13px;
	letter-spacing:0.6px;
}
/*--------headr-------481px to 768px-------*/
#header {
	clear: both;
	float: left;
	margin-left: 0%;
	width: 100%;
	display: block;
	position: fixed;
	height: 85px;
	box-shadow: 0px 1px 8px 0px #333;
	background:rgba(0, 0, 0, 0.8);
}
#logo {
	clear: none;
	float: left;
	margin : 10px 0px 0px 30px;
	width:65%;
	height:38px;
	display: block;
}

#nav1 {
	clear: none;
	float: right;
	margin: 15px 18px 0px 0px;
	width: auto;
	display: block;
	color: #FFF;
}

#main_menu {
	clear: both;
	float: right;
	margin:5px 0px auto auto;
	display: block;
}

/*--------headr-------481px to 768px-------*/
/*-------news------481px to 768px------*/
#news {
	clear: both;
	float: left;
	margin: 85px 0px 0px 0px;
	width: 100%;
	color: rgba(20, 49, 67,0.8);
	background: linear-gradient(175deg, rgba(196, 226, 235, 0.7)39%, rgba(198, 216, 215, 0.7)89%); 
    background: -moz-linear-gradient(175deg, rgba(196, 226, 235, 0.7)39%, rgba(198, 216, 215, 0.7)89%); 
    background: -webkit-linear-gradient(175deg, rgba(196, 226, 235, 0.7)39%, rgba(198, 216, 215, 0.7)89%); 
    background: -o-linear-gradient(175deg, rgba(196, 226, 235, 0.7)39%, rgba(198, 216, 215, 0.7)89%);
	box-shadow: 0px 1px 8px 0px #333;
	display: block;
}

.article0{
	color:#666;
	text-align:center;
	font-size: 20px;
	letter-spacing: 1px;
	line-height: 50px;
}
/*-------news------481px to 768px------*/
/*-------service------481px to 768px------*/
#service {
	clear: both;
	float: left;
	margin: 85px 0px 0px 0px;
	width: 100%;
	color: rgba(20, 49, 67,0.8);
	background: linear-gradient(91deg, rgba(20, 46, 67, 0.7)0%, rgba(117, 148, 169, 0.7)70%);
	background: -moz-linear-gradient(91deg, rgba(20, 46, 67, 0.7)0%, rgba(117, 148, 169, 0.7)70%);
	background: -webkit-linear-gradient(91deg, rgba(20, 46, 67, 0.7)0%, rgba(117, 148, 169, 0.7)70%);
	background: -o-linear-gradient(91deg, rgba(20, 46, 67, 0.7)0%, rgba(117, 148, 169, 0.7)70%);
	box-shadow: 0px 1px 8px 0px #333;
	display: block;
}

.article1{
	color:#FFF;
	text-align:center;
	font-size: 16px;
	letter-spacing: 1px;

}
#sicon{
	clear: none;
	float: none;
	margin:0px auto 60px auto;
	width:85%;
	text-align :center;
}

.s1,.s2,.s3,.s4,.s5,.s6{
	margin:8px 8px;
	width:28%;
	border-radius:3px ;
	box-shadow: 1px 1px 0px 1px  #7AB9B2;
	display: inline-block;
}
/*-------service------481px to 768px------*/
/*-------product------481px to 768px------*/
#product {
	clear: both;
	float: left;
	padding: 0px 0px 0px 0px;
	width: 100%;
	color: rgba(51,51,51,0.8);
	background: linear-gradient(-90deg, rgba(203, 225, 238, 0.8)0%, rgba(255, 255, 255, 0.8)100%); 
    background: -moz-linear-gradient(-90deg, rgba(203, 225, 238, 0.8)0%, rgba(255, 255, 255, 0.8)100%); 
    background: -webkit-linear-gradient(-90deg, rgba(203, 225, 238, 0.8)0%, rgba(255, 255, 255, 0.8)100%); 
    background: -o-linear-gradient(-90deg, rgba(203, 225, 238, 0.8)0%, rgba(255, 255, 255, 0.8)100%); 
	box-shadow: 0px 1px 8px 0px #333;
	display: block;
}

.article2{
	color: #666;
	text-align:center;
	font-size: 16px;
	letter-spacing: 1px;
}

#picon{
	clear: none;
	float: none;
	margin:0px auto 60px auto;
	width:75%;
	text-align :center;
}

.p1,.p2,.p3,.p4,.p5,.p6,.p7,.p8{
	margin:10px 4px;
	width:35%;
	border-radius:3px ;
	box-shadow: 0px 1px 5px 1px  #89A8B9;
	display: inline-block;
}
/*-------product------481px to 768px------*/
/*-------project------481px to 768px-----*/
#project {
	clear: both;
	float: left;
	padding: 0px 0px 0px 0px;
	width: 100%;
	color: rgba(51,135,147,0.9);
	background: linear-gradient(180deg, rgba(84, 186, 201, 0.8)0%, rgba(195, 223, 201, 0.8)100%); 
    background: -moz-linear-gradient(180deg, rgba(84, 186, 201, 0.8)0%, rgba(195, 223, 201, 0.8)100%); 
    background: -webkit-linear-gradient(180deg, rgba(84, 186, 201, 0.8)0%, rgba(195, 223, 201, 0.8)100%); 
    background: -o-linear-gradient(180deg, rgba(84, 186, 201, 0.8)0%, rgba(195, 223, 201, 0.8)100%); 
	box-shadow: 0px 1px 8px 0px #333;
	display: block;
}

#pj{
	clear: none;
	float: none;
	margin:0px auto 60px auto;
	width:80%;
	text-align :center;
}

.pj1,.pj2,.pj3,.pj4,.pj5,.pj6,.pj7,.pj8,.pj9,.pj10,.pj11,.pj12{
	margin:0;
	width:120px;
	height:120px;
	background:rgba(122,185,178,0.1);
	border: 2px;
	border-color:rgba(255,255,255,0.3);
	border-radius:4px ;
	box-shadow: 1px 1px 0px 1px  #7AB9B2;
	display: inline-block;
}

.pj1{
	background: url(image/pj1-120.png) no-repeat;
}
.pj2{
	background: url(image/pj2-120.png) no-repeat;
}
.pj3{
	background: url(image/pj3-120.png) no-repeat;
}
.pj4{
	background: url(image/pj4-120.png) no-repeat;
}
.pj5{
	background: url(image/pj5-120.png) no-repeat;
}
.pj6{
	background: url(image/pj6-120.png) no-repeat;
}
.pj7{
	background: url(image/pj7-120.png) no-repeat;
}
.pj8{
	background: url(image/pj8-120.png) no-repeat;
}
.pj9{
	background: url(image/pj9-120.png) no-repeat;
}
.pj10{
	background: url(image/pj10-120.png) no-repeat;
}
.pj11{
	background: url(image/pj11-120.png) no-repeat;
}
.pj12{
	background: url(image/pj12-120.png) no-repeat;
}
#pjname{
	clear: none;
	float: none;
	margin:0px auto 60px auto;
	width:90%;
	text-align :center;
}

.pjname1,.pjname2,.pjname3,.pjname4,.pjname5,.pjname6{
	clear: none;
	float: left;
	margin:5px 1%;
	width:31%;
	height:290px;
	color: #666;
	border-top-style: ridge;
	border-top-color: #999;
	border-top-width: 1px;
	text-align:left;
	display: inline-block;
}
/*-------project------481px to 768px-----*/
/*------footer-------480px to 768px-----*/
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background:url(image/footer%20bg.jpg);
	box-shadow: 0px 1px 8px 0px #333;
}
#contact {
	clear: none;
	float: left;
	margin:0px 5px;
	width: 45%;
	display: block;
	color:#FFF;
}
#map {
	clear: none;
	float: left;
	margin:10px;
	width: 35%;
	display: block;
	color:#FFF;
}

#copyright {
	clear: none;
	float: left;
	width:100%;
	display: block;
	background: rgba(220, 220, 220, 0.2);
	border-top-style: ridge;
	border-top-color: #999;
	border-top-width: 1px;
	text-align: center;	
}

/*------footer-------480px to 768px-----*/
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 100%;
	max-width: 2000px;
	padding-left: 0%;
	padding-right: 0%;
	margin: auto;
}
#wrapper {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.iw{
	font-size: 13.5px;
	letter-spacing:0.6px;
}
/*--------headr-------up to 769px-------*/
#header {
	clear: both;
	float: left;
	margin-left: 0%;
	width: 100%;
	display: block;
	position: fixed;
	height: 85px;
	background: rgba(0, 0, 0, 0.8);
	box-shadow: 0px 1px 8px 0px #333;
	}
#logo {
	clear: none;
	float: left;
	margin : 10px 0px 0px 30px;
	width:65%;
	height:38px;
	display: block;
}

#nav1 {
	clear: none;
	float: right;
	margin: 15px 98px 0px 0px;
	width: auto;
	display: block;
	color: #FFF;
}
#main_menu {
	clear: both;
	float: right;
	margin:5px 90px auto auto;
	width:auto;
	display: block;
}
/*--------headr-------up to 769px-------*/
/*-------news------up to 769px-----*/
#news {
	clear: both;
	float: left;
	margin: 85px 0px 0px 0px;
	width: 100%;
	color: rgba(20, 49, 67,0.8);
	background: linear-gradient(175deg, rgba(196, 226, 235, 0.7)39%, rgba(198, 216, 215, 0.7)89%); 
    background: -moz-linear-gradient(175deg, rgba(196, 226, 235, 0.7)39%, rgba(198, 216, 215, 0.7)89%); 
    background: -webkit-linear-gradient(175deg, rgba(196, 226, 235, 0.7)39%, rgba(198, 216, 215, 0.7)89%); 
    background: -o-linear-gradient(175deg, rgba(196, 226, 235, 0.7)39%, rgba(198, 216, 215, 0.7)89%);
	box-shadow: 0px 1px 8px 0px #333;
	display: block;
}

.article0{
	color: #666;
	text-align: center;
	letter-spacing: 1px;
	font-size: 22px;
	line-height: 45px;
}
/*-------news------up to 769px-----*/
/*-------service------up to 769px-----*/
#service {
	clear: both;
	float: left;
	margin: 85px 0px 0px 0px;
	width: 100%;
	color: rgba(20, 49, 67,0.8);
	background: linear-gradient(91deg, rgba(20, 46, 67, 0.7)0%, rgba(117, 148, 169, 0.7)70%);
	background: -moz-linear-gradient(91deg, rgba(20, 46, 67, 0.7)0%, rgba(117, 148, 169, 0.7)70%);
	background: -webkit-linear-gradient(91deg, rgba(20, 46, 67, 0.7)0%, rgba(117, 148, 169, 0.7)70%);
	background: -o-linear-gradient(91deg, rgba(20, 46, 67, 0.7)0%, rgba(117, 148, 169, 0.7)70%);
	box-shadow: 0px 1px 8px 0px #333;
	display: block;
}

.article1{
	color:#FFF;
	text-align:center;
    font-size: 17px;
	letter-spacing: 1px;
}

#sicon{
	clear: none;
	float: none;
	margin:0px auto 60px auto;
	width:100%;
	text-align :center;
	
}
.s1,.s2,.s3,.s4,.s5,.s6{
	margin:4px;
	width:14%;
	border-radius:3px ;
	box-shadow: 1px 1px 0px 1px  #7AB9B2;
	display: inline-block;
}

/*-------service------up to 769px-----*/
/*-------product------up to 769px-----*/
#product {
	clear: both;
	float: left;
	padding: 0px 0px 0px 0px;
	width: 100%;
	color: rgba(51,51,51,0.8);
	background: linear-gradient(-90deg, rgba(203, 225, 238, 0.8)0%, rgba(255, 255, 255, 0.8)100%); 
    background: -moz-linear-gradient(-90deg, rgba(203, 225, 238, 0.8)0%, rgba(255, 255, 255, 0.8)100%); 
    background: -webkit-linear-gradient(-90deg, rgba(203, 225, 238, 0.8)0%, rgba(255, 255, 255, 0.8)100%); 
    background: -o-linear-gradient(-90deg, rgba(203, 225, 238, 0.8)0%, rgba(255, 255, 255, 0.8)100%); 
	box-shadow: 0px 1px 8px 0px #333;
	display: block;
}

.article2{
	color: #666;
	text-align:center;
	font-size: 17px;
	letter-spacing: 1px;
}

#picon{
	clear: none;
	float: none;
	margin:0px auto 60px auto;
	width:80%;
 	text-align:center;
}

.p1,.p2,.p3,.p4,.p5,.p6,.p7,.p8{
	margin:10px 6px;
	width:20.8%;
	border-radius:3px ;
	box-shadow: 0px 1px 5px 1px  #89A8B9;
    display: inline-block;
}

/*-------product------up to 769px-----*/
/*-------project------up to 769px-----*/
#project {
	clear: both;
	float: left;
	padding: 0px 0px 0px 0px;
	width: 100%;
	color: rgba(51,135,147,0.9);
	background: linear-gradient(180deg, rgba(84, 186, 201, 0.8)0%, rgba(195, 223, 201, 0.8)100%); 
    background: -moz-linear-gradient(180deg, rgba(84, 186, 201, 0.8)0%, rgba(195, 223, 201, 0.8)100%); 
    background: -webkit-linear-gradient(180deg, rgba(84, 186, 201, 0.8)0%, rgba(195, 223, 201, 0.8)100%); 
    background: -o-linear-gradient(180deg, rgba(84, 186, 201, 0.8)0%, rgba(195, 223, 201, 0.8)100%); 
	box-shadow: 0px 1px 8px 0px #333;
	display: block;
}

#pj{
	clear: none;
	float: none;
	margin:0px auto 60px auto;
	width:90%;
	text-align :center;
}

.pj1,.pj2,.pj3,.pj4,.pj5,.pj6,.pj7,.pj8,.pj9,.pj10,.pj11,.pj12{
	margin:0px;
	width:120px;
	background:rgba(122,185,178,0.1);
	border: 2px;
	border-color:rgba(255,255,255,0.3);
	border-radius:4px ;
	box-shadow: 1px 1px 0px 1px  #7AB9B2;
	display: inline-block;
}

.pj1{
	background: url(image/pj1-120.png) no-repeat;
}
.pj2{
	background: url(image/pj2-120.png) no-repeat;
}
.pj3{
	background: url(image/pj3-120.png) no-repeat;
}
.pj4{
	background: url(image/pj4-120.png) no-repeat;
}
.pj5{
	background: url(image/pj5-120.png) no-repeat;
}
.pj6{
	background: url(image/pj6-120.png) no-repeat;
}
.pj7{
	background: url(image/pj7-120.png) no-repeat;
}
.pj8{
	background: url(image/pj8-120.png) no-repeat;
}
.pj9{
	background: url(image/pj9-120.png) no-repeat;
}
.pj10{
	background: url(image/pj10-120.png) no-repeat;
}
.pj11{
	background: url(image/pj11-120.png) no-repeat;
}
.pj12{
	background: url(image/pj12-120.png) no-repeat;
}

#pjname{
	clear: none;
	float: none;
	margin:0px auto 60px auto;
	width:90%;
	text-align :center;
}

.pjname1,.pjname2,.pjname3,.pjname4,.pjname5,.pjname6{
	clear: none;
	float: left;
	margin:5px 4%;
	width:25%;
	height:220px;
	color: #666;
	border-top-style: ridge;
	border-top-color: #999;
	border-top-width: 1px;
	text-align:left;
	display: inline-block;
}

/*-------project------up to 769px-----*/
/*-------footer-------up to 769px-------*/
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-image: url(image/footer%20bg.jpg);
	background-position: center;
	box-shadow: 0px 1px 8px 0px #333;	
}

#contact {
	clear: none;
	float: left;
	margin:0px 5px;
	width: 45%;
	display: block;
	color:#FFF;
}

#map {
	clear: none;
	float: left;
	margin:10px;
	width: 35%;
	height: 280px;
	display: block;
	color: #FFF;
}

#copyright {
	clear: none;
	float: left;
	width:100%;
	display: block;
	background: rgba(220, 220, 220, 0.2);
	border-top-style: ridge;
	border-top-color: #999;
	border-top-width: 1px;
	text-align: center;	
}


/*-------footer-------up to 769px-------*/

}