@import url('https://fonts.googleapis.com/css?family=Abel');
body,h1,h2,h3,h4,h5,h6,p,caption,ul{
	padding:0;
	margin:0;
	font-weight: normal;
}
html{
	font-size: 62.5%;
	letter-spacing: 1px;
}
body{
	font-family: 'Abel',  "Microsoft JhengHei",sans-serif;
	background: #1f1f1f;
	font-weight:normal;
}
.green{
	color:#3fac2a;
}
.gray{
	color:#737376;
}

.normal{
	line-height:2;
}
.blue{
	color:#1898e1;
}
.blue2{
	color:#18cce0;
}
.yellow{
	color:#faad41;
}
.green2{
	color:#94ad38;
}
.pink{
	color:#ff61bd;
}
.yellow2{
	color:#ffdb4c;
}
.ft15{
	font-size: 1.5em;
	font-weight: normal;
}
ul{
	padding:0;
	margin:0;
}
a{
	text-decoration: none;
}
p{
	font-size: 1.2em;
}
/*桌機版*/

@media screen and (min-width:768px) { 

		#dropmenu{
			display:none;
			position: absolute;
			top:-100%;
		}
		.loginSec{
			background: #1f1f1f;
			height:30px;
			border-bottom:1px solid #2e2e2e;
			text-align: right;
			padding-right:120px;
			line-height: 30px;
			color:#d4d4d4;
		}
		.loginSec a{
			color:#d4d4d4;
			text-decoration: none;
		}
		.loginSec a:hover{
			color:#14a3ff;
		}
		header{
			border-top:2px solid #2e2e2e;
			border-bottom:2px solid #2e2e2e;
			height:96px;
			background: #2d2d2d;
			position: relative;
			}
		header .logo{
			background: url(images/logo.png) top left no-repeat;
			background-size:cover;
			width:286px;
			height:66px;
			position: absolute;
			left:97px;
			top:18px;
		}
		header nav{
			position: absolute;
			right:97px;
			height:96px;
			top:36px;
		}
		header nav li{
			list-style:none;
			float:left; 
			font-size: 1.5em;
			width:113px;
			border-left:2px solid #3b3b3b;
			border-right:2px solid #1a1a1a;
			text-align: center;
		}
		header nav li:first-child{
			border-left:none;
		}
		header nav li:last-child{
			border-right:none;
		}
		header nav li a{
			line-height: 33px;
			display:block;
			color:#bdbdbd;
			text-decoration: none;
			position:relative;
			text-shadow: 0px 2px 10px  rgba(0,0,0,.8);
			transition: 0.6s ease; /* 转换效果持续 1秒 */
		}
		header nav li a:after{
			content:'';
			width:26px;
			height:2px;
			background: #14a3ff;
			position: absolute;
			top:36px;
			left:0;
			margin-left:-13px;
			text-shadow: 0px 2px 10px  rgba(0,0,0,.8);
			transition: 0.6s ease; /* 转换效果持续 1秒 */
			opacity:0;
		}
		header nav li a:hover{
			color:#14a3ff;
		}
		header nav li a.turnon{
			color:#14a3ff;
		}
		header nav li a.on:after,header nav li a:hover:after{
			content:'';
			width:26px;
			height:2px;
			background: #14a3ff;
			position: absolute;
			top:36px;
			left:50%;
			margin-left:-13px;
			text-shadow: 0px 2px 10px  rgba(0,0,0,.8);
			opacity:1;
		}
		header nav li ul{
			position: absolute;
			width:110px;
			z-index:100;
			border:3px solid #1291e1;
			top:43px;
			display:none;
		}
		header nav li ul li{
			width:110px;
			z-index:100;
			border:none;
			display:block;
			height:30px;
			font-size:1.3rem;
			background: #3f3e40;
			color:#fff;
		}
		header nav li ul li:hover{
			background:  #1291e1;
			color:#fff;
		}
		
		.mainbanner{
			position: relative;
			height:400px;
			z-index:10;
			border:1px solid #000;
		}
		.mainbanner .slogan{
			position: absolute;
			font-size:3.2em;
			left:50%;
			top:84px;
			color:#fff;
			margin-left:-25%;
			letter-spacing: 4px;
		}

		.mainbanner img{
			width:100%;
		}
		.service{
			background: #2d2d2d;
			text-align: center;
			min-height:292px;
			padding:16px 0 10px;

		}
		.service h2{
			font-weight:normal;
			color:#1eb5fe;
			position: relative;
			height:40px;
			display:inline-block;
			font-size: 3em;
			width:300px;
			margin-top:15px;
			/*overflow: hidden;
			text-indent: -900px;*/

		}/*
		.service h2:before{
			content:'Service Introduction';
			color:#1eb5fe;
			position: absolute;
			top:20px;
			left:26px;
			z-index:10;text-indent: 0px;

		}*/

		.service_card{
			width:1000px;
			margin:10px auto 0;
		}
		.service_card li{
			float:left;
			list-style:none; 
			margin-left:3px;
		}
		.icon_hidden{
			display:none;
		}
		.service_iconset{
				width:70px;
				height:70px;
				background: url(images/icon_set1.png) top left no-repeat;
				background-size: cover;
				margin:30px 0 0 39px;
		}

		.icon2{
		background-position: 0 -70px;
		}
		.icon3{
		background-position: 0 -140px;
		}
		.icon4{
		background-position: 0 -210px;
		}
		.icon5{
		background-position: 0 -280px;
		}
		.icon6{
		background-position: 0 -350px;
		}
		
		/*翻轉語法*/
		.photo-container {
			-webkit-perspective: 1200px; /* 透视视图 */
			perspective: 1200px; /* 透视视图 */
			width:156px;
			min-height:225px;
			background: #282828;
			border:2px solid #3d3d3d;
			border-radius: 8%;
			-moz-box-shadow:3px 3px 3px #1f1f1f inset;               /* For Firefox3.6+ */
			-webkit-box-shadow:3px 3px 3px #1f1f1f inset;            /* For Chrome5+, Safari5+ */
			box-shadow:3px 3px 3px #1f1f1f inset;
			position: relative;


		                    /* For Latest Opera */
		}
		.photo-container:after {
			 content:'';
			 position: absolute;
			 top:0;
			 left:0;
			 width:158px;
			 min-height:227px;
			 border-radius: 8%;
			-moz-box-shadow:3px 3px 3px #1f1f1f;               /* For Firefox3.6+ */
			-webkit-box-shadow:3px 3px 3px #1f1f1f;            /* For Chrome5+, Safari5+ */
			box-shadow:3px 3px 3px #1f1f1f;  
		}

		.rotate-box {
			position: relative;
			-webkit-transform-style: preserve-3d; /* 3D 转换 */
			transform-style: preserve-3d; /* 3D 转换 */
			transition: 1s ease; /* 转换效果持续 1秒 */
			
		}
		.rotate-box h3{
			color:#1eb4ff;
			font-size:1.5em;
		}
		.rotate-box p{
			color:#656565;
			font-size:1.2em;
			margin-top:6px;
		}
		.rotate-box img{
			width:106px;
			margin-top: 25px;
    		margin-left: 26px;
		}

		.text {
		 	border-radius: 8%;
			position:absolute;
			top:0px;
			width:100%;
			-webkit-transform: rotateY(180deg) translateZ(1px); /* 反转180度 并设置z轴让其置于图片背面 */
			transform: rotateY(180deg) translateZ(1px); /* 反转180度 并设置z轴让其置于图片背面 */
			color:#fff;
			opacity:0;
			transition: 1s opacity;
			font-size:1.2em;
			line-height:1.6;
			padding:10px;
			box-sizing: border-box;
			min-height:225px;
			-moz-box-shadow:3px 3px 3px #1f1f1f inset;               /* For Firefox3.6+ */
			-webkit-box-shadow:3px 3px 3px #1f1f1f inset;            /* For Chrome5+, Safari5+ */
			box-shadow:3px 3px 3px #1f1f1f inset;
		}

		.photo-container:hover .rotate-box{
			-webkit-transform: rotateY(180deg);
			transform: rotateY(180deg);
			
		}
		.photo-container:hover .text{
			opacity: 1;
			background-color: #2d2d2d;
			border-radius: 8%;
		}

		.text h3{
			font-size:1.3em;
			margin:10px 0 20px;
		}
		.text h3:after{
			content:'';
			width:26px;
			height:2px;
			background: #14a3ff;
			position: absolute;
			top:52px;
			left:50%;
			margin-left:-13px;
			text-shadow: 0px 2px 10px  rgba(0,0,0,.8);
		}




		.product{
			background: #2d2d2d;
			text-align: center;
			min-height:292px;
			padding:0;
		}
		.product h2{
			font-weight:normal;
			color:#3fac2a;
			position: relative;
			height:72px;
			display:inline-block;
			font-size: 3em;
			width:300px;
			overflow: hidden;
			text-indent: -900px;
			
		}
		.product h2:before{
			content:'Product Introduction';
			color:#3fac2a;
			position: absolute;
			top:20px;
			left:26px;
			z-index:10;
			text-indent: 0px;

		}

		.product_list{
			background: url(images/product_list_bg.jpg) center center no-repeat;
			background-size: cover;
			height:240px;
		}

		.twopart{
			width:1000px;
			margin:0 auto;
			
		}

		.system_part{
			float:left;
			width:700px;
			padding-top:24px;
		}
		.application_part{
			float:left;
			width:280px;
			margin-left:15px;
			padding-top:24px;
		}
		.system_part h3,.application_part h3{
			text-align: left;
			width:100%;
			border-bottom:8px solid rgba(200,255,255,.6);
			color:#00ffff;
			font-size:2em;
			line-height:2;
		}
		.application_part h3{
			color:#8bfe41;
		}
		.system_part ul,.application_part ul{
			
		}
		.system_part li,.application_part li{
			width:140px;
			float:left;
			list-style: none;
			text-align: center;
		}

		.system_part li:first-child,.application_part li:first-child{
			margin-left:0;

		}
		.iconbox{
			width:114px;
			height:114px;
			box-sizing: border-box;
			text-align: center;
			padding:12px;
			box-sizing: border-box;
			transition: 1s ease; /* 转换效果持续 1秒 */
		}
		.iconbox:hover{
			
		}
		.product_iconset{
				width:100px;
				height:100px;
				background: url(images/icon_set2.png) top left no-repeat;
				background-size: cover;
				-webkit-transform: scale(0.66);
				-moz-transform: scale(0.66);
				-ms-transform: scale(0.66);
				-o-transform: scale(0.66);
				transform: scale(0.66);
				
				transition: 0.6s ease; /* 转换效果持续 1秒 */
				margin:10px 0 0 10px;
				
		}
		.iconbox:hover .product_iconset{
				
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				-ms-transform: scale(1);
				-o-transform: scale(1);
				transform: scale(1);
				
		}
		.p_icon2{
		background-position: 0 -96px;
		}
		.p_icon3{
		background-position: 0 -202px;
		}
		.p_icon4{
		background-position: 0 -298px;
		}
		.p_icon5{
		background-position: 0 -402px;
		}
		.p_icon6{
		background-position: 0 -500px;
		}
		.p_icon7{
		background-position: 0 -600px;
		}
		.p_name{
			color:#fff;
			font-size: 1.5em;
			margin-top:16px;
		}
		.p_descript{
			color:#fff;
			font-size:1.2em;
			text-align: left;
			display:none;
		}
		.mail{
			padding:41px 0;
			background: #2d2d2d;
		}
		.icon_mail{
			width:74px;
			height:74px;
			background: #242424 url(images/icon_mail.png) center center no-repeat;
			background-size: 55% 55%;
			background-position: 25px 25px;
			border-radius: 100%;
			-moz-box-shadow:3px 3px 3px #0b0b0b inset;               /* For Firefox3.6+ */
			-webkit-box-shadow:3px 3px 3px #0b0b0b inset;            /* For Chrome5+, Safari5+ */
			box-shadow:3px 3px 3px #0b0b0b inset;
			margin:0 auto;
		}
		.icon_mail:hover{
			cursor: pointer;
			
		}
		.icon_top{
			width:100px;
			height:100px;
			background: #242424 url(images/icon_top.png) center center no-repeat;
			background-size: 55% 55%;
			background-position: 30px 30px;
			border-radius: 100%;
			-moz-box-shadow:3px 3px 3px #0b0b0b inset;               /* For Firefox3.6+ */
			-webkit-box-shadow:3px 3px 3px #0b0b0b inset;            /* For Chrome5+, Safari5+ */
			box-shadow:3px 3px 3px #0b0b0b inset;
			margin:0 auto 20px;
		}
		.copyright{
			background-color:#1f1f1f;
			font-size:1em;
			color:#1274ac;
			line-height:90px;
			text-align: center;
		}
/*內頁開始*/
				/*服務項目*/
							.main{
								width:100%;
								max-width:1100px;
								margin:0 auto;
								background: #212121;
							}
							.main img{
								width:100%;
								max-width:1100px;

							}
							.service_intro{
								width:848px;
								margin:0 auto;
								overflow: hidden;
								padding-bottom:60px;
							}
							.service_intro ul{ margin:0;padding:0; }
							.service_intro li{
								margin:50px 0 0;padding:0;height:80px;
							}
							.service_intro .service_iconset{
								display:inline-block;
								vertical-align: middle;
								margin:20px 0 0;
							}


							.service_item{
								display:inline-block;
								vertical-align: middle;
								color:#1fb4ff;
								font-size:2.4em;
								width:167px;
								text-align:center;
								border-right:1px solid #141414;
								border-left:1px solid #3b3b3b;
								height:100%;
								line-height:90px;
							}
							.service_item_normal{
								display:inline-block;
								vertical-align: middle;
								color:#1fb4ff;
								font-size:2.4em;
								width:127px;
								text-align:center;
								border-right:1px solid #141414;
								border-left:1px solid #3b3b3b;
								height:100%;
								
								padding:0 20px;
							}						
							.service_des{
								display:inline-block;
								vertical-align: middle;
								width:500px;
								border-left:1px solid #3b3b3b;
								color:#e4e5e6;
								padding-left:24px;
								height:100%;
								font-size:1.2em;
							}

							.flow_iconset{
									width:55px;
									height:46px;
									background: url(images/flow_icon.png) top left no-repeat;
									background-size: cover;
									margin:16px auto 0;
							}

							.f_icon2{
							background-position: 0 -46px;
							}
							.f_icon3{
							background-position: 0 -92px;
							}
							.f_icon4{
							background-position: 0 -138px;
							}
							.f_icon5{
							background-position: 0 -186px;
							}
							.flow {
								padding-top:45px;
							}
							.flow li{
								border-left:1px solid #00cfff;
								border-right:1px solid #00cfff;
								width:138px;
								position: relative;
								float:left;
								list-style:none; 
								margin:0 34px 0 0;
								min-height:172px;
							background: -webkit-linear-gradient(rgba(33,33,33,1) 0%, rgba(53,53,53,1) 50%, rgba(33,33,33,1) 100%);
							background: -o-linear-gradient(rgba(33,33,33,1) 0%, rgba(53,53,53,1) 50%, rgba(33,33,33,1) 100%);
							background: linear-gradient(rgba(33,33,33,1) 0%, rgba(53,53,53,1) 50%, rgba(33,33,33,1) 100%); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
							}
							.flow li:last-child{
								margin-right:0;
							}
							.flow li:after{
								content:''; height:0; width:0; display:block; border:16px transparent solid; border-right-width:0; border-left-color:#00cfff; position:absolute; top:42%; right:-17px;
							}
							.flow li:last-child:after{
								border:none;
							}
							.flow h3{
								color:#1fb4ff;
								font-size:1.5em;
								text-align: center;
								padding:10px 0;
								position: relative;
								margin-bottom:15px;
							}
							.flow h3:after{
								position: absolute;
								content:'';
								width:38px;
								height:2px;
								background: #ffffff;
								bottom:0px;
								left:50%;
								margin-left:-19px;
							}
							.flow p{
								font-size:1.2em;
								width:50%;
								margin:0 auto;
								color:#c4c6c7;
							}



				/*產品*/
							.sub{
								
								text-align: center;
								font-size:2.4em;
								color:#fff;
								padding:20px 0;
								background: #212121;
							}
							.sub a{
								color:#fff;
								text-decoration:none; 
								display:inline-block;
								padding:0 5px;
							}
							.sub a:hover,.subitem a:hover{
								color:#1997e1;
								text-decoration:none; 
							}						
							.sub a .choose{
								color:#1997e1;
							}
							.subitem a{
								color:#fff;
								text-decoration:none; 
								display:inline-block;
								padding:0 5px;
								font-size:1.5em;
							}
							.subitem{margin:0 auto;text-align: center;color:#fff;padding:20px 0;}

							.product_con1{ 
								background:#2d2d2d url(images/system_bg1.png) center center no-repeat;
								
							}
							.product_con2{
								background:#212121 url(images/system_bg2.png) center center no-repeat;
								display:none;
							}
							.product_con3{
								background:#2d2d2d url(images/system_bg3.png) center center no-repeat;
								background-position-y: 80px;
								display:none;
							}
							.product_con4{
								background:#212121 url(images/system_bg4.png) center center no-repeat;
								background-position-y: 350px;
								display:none;
							}
							.product_con5{
								background:#2d2d2d url(images/system_bg5.png) center center no-repeat;
								background-position-y: 80px;
								display:none;
								
							}
							.product_con1,.product_con2,.product_con3,.product_con4,.product_con5{
								padding:120px 0;
								min-height:360px;

							}

							.product_con1 p,.product_con2 p,.product_con3 p,.product_con4 p,.product_con5 p{
								width:848px;
								margin:0 auto;
								font-size:1.5em;
								line-height:1.5;
							}
							.product_con2 p,.product_con5 p{
								width:550px;
								font-size:1.5rem;

							}
							.product_con1 h2,.product_con2 h2,.product_con3 h2,.product_con4 h2,.product_con5 h2{
								text-align: center;
								font-size:3.6em;
								width:848px;
								margin:0 auto;
								margin-bottom:60px;
								position:relative;
							}
							.product_con1 h2:after,.product_con2 h2:after,.product_con3 h2:after,.product_con4 h2:after,.product_con5 h2:after{
								content:'';
								display:block;
								width:76px;
								height:3px;
								background: #47c12e;
								position: absolute;
								left:50%;
								margin-left:-38px;
								top:70px;
							}
							.product_con2 h2:after,.product_con4 h2:after{
								background: #1898e1;
							}
							.con_title{
								font-size:1.8rem;
								color:#cfd0d2;
								margin:30px 0 12px -27px;
								display:inline-block;
							}
							.appintro{
								width:848px;
								margin:0 auto;
								color:#e4e4e4;
							}
							.appintro ul{
								padding:0;
								margin:60px 0 60px;
								list-style:none; 
							}
							.appintro li{
								padding:0;
								margin:0;
								list-style:none; 
								margin:13px 0 0;

							}
							
							.appintro li .applogo{
								width:162px;
								display:inline-block;
								border-right:1px solid #212121;
								vertical-align: middle;
							}
							.applogo img{
								width:82px;
								margin:20px 40px;
							}
							.appintro ul:after{
								content:'';
								display:block;
								clear:both;
							}
							.appintro li .app{
								border-left:1px solid #282828;
								display:inline-block;
								width:580px;
								padding-left:40px;
								box-sizing: border-box;
								vertical-align: middle;
								color:#7d7d7d;
							}
							.appname{
								font-size:2.4em;
								margin-bottom:6px;
							}

				/*夥伴*/	

							.partner{
								background: #fff;
								padding:179px 0 70px;

							}
							.partner ul{
								width:600px;
								margin:0 auto;
								padding:0;
							}
							.partner li{
								list-style:none;
								float:left; 
								padding:0;
								margin:30px 30px 0 0 ;
							}
							.partner li:last-child{
								margin-right:0;
							}
							.partner:after,.partner ul:after{
								content:'';
								display:block;
								clear:both;
							}
							.partner p{
								font-size:2.5em;
								text-align: center;
								margin-top:267px;
							}
							.partner img{
								width:170px;
							}
				/*關於我們*/
							.about_title{
								background: url(images/img_about2.jpg) top left no-repeat;
								background-size: cover;
								width:520px;
								height:30px;
								margin:60px auto 30px;

							}
							.about_intro{
								width:60%;
								margin:0 auto;
								color:#fff;
								
								margin-bottom:60px;
								text-align:center;
							}
							.about_intro h3{
								font-size:1.5em;
								padding:15px 0;
							}
							.about_intro p{
								font-size:1.5em;
							}
							iframe{
								width:100%;
								height:380px;
								margin-bottom:30px;
							}



							.intro{
							
								margin:0 auto;
								background:#2d2d2d;
								padding:80px 0;
							}

							.info{
								width:848px;
								margin:0 auto;
							}							
							.logo2{
								min-width:368px;
								display:inline-block;
								border-right:2px solid #121212;
								vertical-align: middle;
								line-height:140px;
							}
							.logo2 img{
								width:330px;
							}
							.info_detail{
								border-left:1px solid #3b3b3b;
								display:inline-block;
								width:450px;
								padding-left:40px;
								box-sizing: border-box;
								min-height:140px;
								vertical-align: middle;
								color:#7d7d7d;
								line-height:2;
							}
							.contact{
								background:#212121 ;
								padding:48px 0;
							}
							.contact h2{
								text-align: center;
								font-size:3.6em;
								width:848px;
								margin:0 auto;
								margin-bottom:40px;
								position:relative;
							}
							.contact h2:after{
								content:'';
								display:block;
								width:76px;
								height:3px;
								background: #1898df;
								position: absolute;
								left:50%;
								margin-left:-38px;
								top:50px;
							}
							.contact p{
								width:600px;
								color:#e4e5e6;
								margin:0 auto 28px;
								text-align: center;
							}
							.contactform{
								width:600px;
								margin:0 auto;
							}
							.contactform li{
								display:inline-block;
								margin-bottom:8px;
								list-style:none; 
								width:100%;
							}
							.contactform li input,.contactform li textarea{
								width:100%;
								background: #414143;
								border:none;
								line-height:35px;
								padding-left:10px;
								box-sizing: border-box;
							}
							.contactform li.short{
								width:49%;
							}
							.contactform li:nth-child(2),.contactform li:nth-child(4){
								margin-left:8px;
							}
							.btn_sent{
								text-align: right;
							}
							.btn_sent input{
								background:#004972;
								width:160px;
								line-height:30px;
								border:none;
								border-radius: 5px;
								margin-left:5px;
								color:#fff;
								padding-left:10px;box-sizing: border-box;
								font-size:1.5em;
							}
							.btn_sent input:hover{
								background:#414143;
							}
							.product_li{
								margin:0 auto;
								width:800px;
								font-size:1.5rem;
							}
							.product_li li{
								list-style:none;
								position: relative;
								
							}
							.product_li li:after{
								content:'◆';
								display:block;
								width:20px;
								height:20px;
								position: absolute;
								top:0;
								left:-20px;
								
							}
							.product_li2{
								margin:0 auto;
								width:560px;
								font-size:1.5rem;
							}
							.product_li2 li{
								list-style:none;
								position: relative;
								
							}
							.product_li2 li:after{
								content:'◆';
								display:block;
								width:20px;
								height:20px;
								position: absolute;
								top:0;
								left:-20px;
								
							}						
}


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

		.loginSec{
			display:none;
		}

		header{
			border-top:2px solid #2e2e2e;
			border-bottom:2px solid #2e2e2e;
			height:44px;
			background: #2d2d2d;
			position: relative;
			width:100%;
			}
		header .logo{
			background: url(images/logo.png) top left no-repeat;
			background-size:cover;
			width:143px;
			height:33px;
			margin:6px auto 0;
		}
		header .dropmenu{
			position: absolute;
			right:5px;
			top:20px;
			width:40px;
			height:40px;
		}
		header nav{
			display:none;
		}

		.mainbanner{
			position: relative;
			height:420px;
			z-index:10;
		}
		.loginSec{
			background: #1f1f1f;
			height:30px;
			border-bottom:1px solid #2e2e2e;
			text-align: right;
			padding-right:20px;
			line-height: 30px;
			color:#d4d4d4;
		}
		header{
			border-top:2px solid #2e2e2e;
			border-bottom:2px solid #2e2e2e;
			height:80px;
			background: #2d2d2d;
			position: relative;
			}
		header .logo{
			background: url(images/logo.png) top left no-repeat;
			background-size:cover;
			width:220px;
			height:51px;
			position: absolute;
			left:27px;
			top:10px;
		}
		header nav{
			position: absolute;
			right:0px;
			height:96px;
			top:36px;
		}
				/*夥伴*/	

							.partner{
								background: #fff;
								padding:179px 0 70px;

							}
							.partner ul{
								width:80%;
								margin:0 auto;
								padding:0;
							}
							.partner li{
								list-style:none;
								float:left; 
								padding:0;
								margin:40px 20px 0 0 ;
							}
							.partner li:last-child{
								margin-right:0;
							}
							.partner li img{
								width:260px;
							}	
							.partner:after,.partner ul:after{
								content:'';
								display:block;
								clear:both;
							}
							.partner p{
								font-size:1.8em;
								text-align: center;
								margin-top:267px;
							}
									/*按鈕小圖示*/
							.menuicon{width:60px; height:60px;}
							.menuicon:before{
								content:''; height:3px; width:20px; background:#babcbe; 
								border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px; 
								display:block; position:absolute; top:7px; left:0; 
								box-shadow:0 9px #babcbe, 0 18px #babcbe;
								-webkit-box-shadow:0 8px #babcbe, 0 16px #babcbe;
								-moz-box-shadow:0 8px #babcbe, 0 16px #babcbe;}

		/*dropmenu*/
		#dropmenu{
			position: fixed;
			top:-100%;
			left:0;
			width:100%;
			height:100%;
            background: -webkit-linear-gradient(left, rgba(0,116,200,0.9) 0%,rgba(1,117,198,0.9) 1%,rgba(58,171,40,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right, rgba(0,116,200,0.9) 0%,rgba(1,117,198,0.9) 1%,rgba(58,171,40,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			z-index:9999;
			font-size:1.5rem;
			overflow: scroll;
			-webkit-transition: all 0.3s ease-in; /* set transition type and time */
  			transition: all 0.3s ease-in;

		}
		#dropmenu.open{
			top:0;
			left:0;
			overflow: scroll;			
		}

		#dropmenu .close{
			position: absolute;
			right:6px;
			top:-4px;
			width:40px;
			height:40px;
		}
		#dropmenu ul{
			margin-top:10px;
		}
		#dropmenu li{
			
			list-style:none;
			border-bottom:1px solid #fff;
			padding:0;
			line-height:92px;
		}
		#dropmenu li:nth-child(3){

			line-height:56px;
		}
		#dropmenu li ul{
			margin-top:0px;
			width:80%;
			margin:0 auto;
			padding:0;
		}
		#dropmenu li ul:after{
			content:'';
			clear:both;
			display:block;
		}
		#dropmenu li ul li{
			
			width:50%;
			float:left;
			padding:0;
			border-bottom:none;
			padding: 0;
			margin-bottom:20px;
			font-size:1.3rem;
			line-height:20px;
			box-sizing: border-box;
		}
		#dropmenu li ul li:first-child{
			border-right:1px solid #fff;
		}
		#dropmenu a{
			display:block;
			color:#fff;
			text-align: center;
			text-decoration: none;
			font-size:1.2em;
		}

		#dropmenu span{
			 height:40px; width:40px; display:inline-block; position:relative;vertical-align: middle;
		}
}




/*手機版*/
@media screen and  (max-width: 767px) { 
		.loginSec{
			display:none;
		}

		header{
			border-top:2px solid #2e2e2e;
			border-bottom:2px solid #2e2e2e;
			height:44px;
			background: #2d2d2d;
			position: relative;
			width:100%;
			}
		header .logo{
			background: url(images/logo.png) top left no-repeat;
			background-size:cover;
			width:143px;
			height:33px;
			margin:6px auto 0;
		}
		header .dropmenu{
			position: absolute;
			right:0px;
			top:6px;
			width:40px;
			height:40px;
		}
		header nav{
			display:none;
		}
		.mainbanner{
			position: relative;
			height:213px;
		}
		.mainbanner img{
			width:100%;
		}
		.mainbanner .slogan{
			position: absolute;
			font-size:1.5em;
			left:50%;
			top:80px;
			color:#fff;
			margin-left:-35%;
			letter-spacing: 4px;
		}
		.mainbanner .slogan h2{
			display:inline-block;
			font-size:4.8rem;
			line-height: 1.3;
			border-bottom:1px solid #fff;
			margin-bottom:12px;
			letter-spacing: 6px;
		}

		.service{
			background: #2d2d2d;
			text-align: center;
			min-height:292px;
			padding:46px 0 30px;
			overflow: hidden;
		}
		.service h2{
			font-weight:normal;
			color:#1eb5fe;
			position: relative;
			height:42px;
			display:inline-block;
			font-size: 1.8em;
			width:300px;
			overflow: hidden;
			text-indent: -900px;

		}
		.service h2:before{
			content:'Service Introduction';
			color:#1eb5fe;
			position: absolute;
			top: 8px;
		    left: 50%;
		    z-index: 10;
		    text-indent: 0px;
		    display: inline-block;
		    margin-left: -25%;
		}
		.service h2:after{
			content:'';
			background:#2b4856;
			position: absolute;
			top:0px;
			left:50%;
			width:6px;
			height:40px;
			z-index:1;
			transform:skewX(-30deg);

		}
		.service_card{
			width:92%;
			margin:10px auto 0;
		}
		.service_card li{
			width:48%;
			float:left;
			list-style:none; 
			margin :4% 0 0 4%;
		}
		.service_card li:nth-child(2n+1){
			margin-left:0;
		}

		.service_iconset{
				width:106px;
				height:106px;
				background: url(images/icon_set1.png) top left no-repeat;
				background-size: cover;
				margin:30px auto 0;
				transform:translate(12%,0);
				display:block;
		}

		.icon2{
		background-position: 0 -106px;
		transform:translate(12%,0);
		}
		.icon3{
		background-position: 0 -212px;
		transform:translate(12%,0);
		}
		.icon4{
		background-position: 0 -318px;
		transform:translate(12%,0);
		}
		.icon5{
		background-position: 0 -424px;
		transform:translate(12%,0);
		}
		.icon6{
		background-position: 0 -530px;
		transform:translate(12%,0);
		}
		
		/*翻轉語法*/
		.photo-container {
			-webkit-perspective: 1200px; /* 透视视图 */
			perspective: 1200px; /* 透视视图 */
			min-height:225px;
			background: #282828;
			border:2px solid #3d3d3d;
			border-radius: 10px;
			-moz-box-shadow:3px 3px 3px #1f1f1f inset;               /* For Firefox3.6+ */
			-webkit-box-shadow:3px 3px 3px #1f1f1f inset;            /* For Chrome5+, Safari5+ */
			box-shadow:3px 3px 3px #1f1f1f inset;
			position: relative;
			width:100%;


		                    /* For Latest Opera */
		}
		.photo-container:after {
			 content:'';
			 position: absolute;
			 top:0;
			 left:0;
			 
			 min-height:227px;
			 border-radius: 8%;
			-moz-box-shadow:3px 3px 3px #1f1f1f;               /* For Firefox3.6+ */
			-webkit-box-shadow:3px 3px 3px #1f1f1f;            /* For Chrome5+, Safari5+ */
			box-shadow:3px 3px 3px #1f1f1f;  
		}

		.rotate-box {
			position: relative;
			-webkit-transform-style: preserve-3d; /* 3D 转换 */
			transform-style: preserve-3d; /* 3D 转换 */
			transition: 1s ease; /* 转换效果持续 1秒 */
			min-height: 125px;
		}
		.rotate-box img{
			width:106px;
			margin-top: 25px;
    		margin-left: 26px;
		}
		.rotate-box h3{
			color:#1eb4ff;
			font-size:1.5em;
		}
		.rotate-box p{
			color:#656565;
			font-size:1.2em;
			margin-top:6px;
		}

		.rotate-box:after {
		    content: ' ';
		    display: block;
		    width: 100%;
		    -webkit-transform: rotateX(90deg);
		    transform: rotateX(90deg);
		    background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
		}

		.text {
		 	border-radius: 8%;
			position:absolute;
			top:0px;
			width:100%;
			-webkit-transform: rotateY(180deg) translateZ(1px); /* 反转180度 并设置z轴让其置于图片背面 */
			transform: rotateY(180deg) translateZ(1px); /* 反转180度 并设置z轴让其置于图片背面 */
			color:#fff;
			opacity:0;
			transition: 1s opacity;
			font-size:1.2em;
			line-height:1.6;
			padding:5%;
			box-sizing: border-box;
			min-height:225px;
			-moz-box-shadow:3px 3px 3px #1f1f1f inset;               /* For Firefox3.6+ */
			-webkit-box-shadow:3px 3px 3px #1f1f1f inset;            /* For Chrome5+, Safari5+ */
			box-shadow:3px 3px 3px #1f1f1f inset;
		}

		.photo-container:hover .rotate-box{
			-webkit-transform: rotateY(180deg);
			transform: rotateY(180deg);
			
		}
		.photo-container:hover .text{
			opacity: 1;
			background-color: #2d2d2d;
			border-radius: 10px;
		}

		.text h3{
			font-size:1.3em;
			margin:10px 0 20px;
		}
		.text h3:after{
			content:'';
			width:26px;
			height:2px;
			background: #14a3ff;
			position: absolute;
			top:52px;
			left:50%;
			margin-left:-13px;
			text-shadow: 0px 2px 10px  rgba(0,0,0,.8);
		}




		.product{
			background: #383838;
			text-align: center;
			min-height:292px;
			padding:35px 0 0;
			overflow: hidden;
		}
		.product h2{
			font-weight:normal;
			color:#3fac2a;
			position: relative;
			height:42px;
			display:inline-block;
			font-size: 1.8em;
			width:300px;
			
			text-indent: -900px;
			margin-bottom:25px;
		}


		.product h2:before{
			content:'Product Introduction';
			color:#3fac2a;
			position: absolute;
			top: 8px;
		    left: 50%;
		    z-index: 10;
		    text-indent: 0px;
		    display: inline-block;
		    margin-left: -25%;
		}
		.product h2:after{
			content:'';
			background:#395036;
			position: absolute;
			top:0px;
			left:50%;
			width:6px;
			height:40px;
			z-index:1;
			transform:skewX(-30deg);

		}
		.product_list{
			background: url(images/product_list_bg2.jpg) top center no-repeat;
			background-size: cover;
			min-height:544px;
			overflow: hidden;
			padding-bottom: 25px;
		}

		.twopart{
			width:92%;
			margin:0 auto;
			
		}

		.system_part{
			float:left;
			width:100%;
		}
		.application_part{
			float:left;
			width:100%;
			
		}
		.system_part h3,.application_part h3{
			text-align: center;
			width:100%;
			border-bottom:8px solid rgba(200,255,255,.6);
			color:#00ffff;
			font-size:2.4em;
			line-height:2;
			margin-top:30px;
		}
		.application_part h3{

			color:#8bfe41;
		}
		.system_part ul,.application_part ul{
			margin-top:13px;
		}
		.system_part li,.application_part li{
			width:100%;
			float:left;
			list-style: none;
			text-align: center;
			color:#fff;
			min-height:94px;
			border-bottom:2px solid rgba(255,255,255,.6);
			padding: 10px 0;
			box-sizing: border-box;
		}
		.system_part li:nth-child(2n) .iconbox,.application_part li:nth-child(2n+1) .iconbox{
			float:right;
			margin-left:15px;
		}

		.iconbox{
			width:76px;
			height:76px;
			box-sizing: border-box;
			border:2px solid #fff;
			text-align: center;
			padding:12px;
			box-sizing: border-box;
			float:left;
			margin-right:15px;
		}
		.iconbox:hover{
			background: #0883d1;
		}
		.product_iconset{
				width:34px;
				height:34px;
				background: url(images/icon_set2.png) top left no-repeat;
				background-size: cover;
				margin:10px 0 0 10px;
		}

		.p_icon2{
		background-position: 0 -34px;
		transform:translate(-8%,0);
		}
		.p_icon3{
		background-position: 0 -68px;
		transform:translate(-8%,0);
		}
		.p_icon4{
		background-position: 0 -102px;
		transform:translate(-8%,0);
		}
		.p_icon5{
		background-position: 0 -136px;
		transform:translate(-8%,0);
		}
		.p_icon6{
		background-position: 0 -170px;
		transform:translate(-8%,0);
		}
		.p_icon7{
		background-position: 0 -204px;
		transform:translate(-8%,0);
		}
		.p_name{
			color:#fff;
			font-size: 2.1em;

			text-align: left;
		}
		.p_descript{
			color:#fff;
			text-align: left;
			font-size:1.2em;
		}
		.mail{
			padding:20px 0; /* Chrome10-25,Safari5.1-6 */
		background: -webkit-linear-gradient(#383838 50%, #383838 50%, #2c2c2c 50%);
		background: -o-linear-gradient(#383838 50%, #383838 50%, #2c2c2c 50%);
		background: linear-gradient(#383838 50%, #383838 50%, #2c2c2c 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		}
		.icon_mail{
			width:52px;
			height:52px;
			background: #242424 url(images/icon_mail.png) center center no-repeat;
			background-size: 55% 55%;
			background-position: 18px 18px;
			border-radius: 100%;
			-moz-box-shadow:3px 3px 3px #0b0b0b inset;               /* For Firefox3.6+ */
			-webkit-box-shadow:3px 3px 3px #0b0b0b inset;            /* For Chrome5+, Safari5+ */
			box-shadow:3px 3px 3px #0b0b0b inset;
			margin:0 auto;
		}

		.icon_mail:hover{
			cursor: pointer;
			
		}
		.icon_top{
			width:52px;
			height:52px;
			background: #242424 url(images/icon_top.png) center center no-repeat;
			background-size: 55% 55%;
			background-position: 18px 18px;
			border-radius: 100%;
			-moz-box-shadow:3px 3px 3px #0b0b0b inset;               /* For Firefox3.6+ */
			-webkit-box-shadow:3px 3px 3px #0b0b0b inset;            /* For Chrome5+, Safari5+ */
			box-shadow:3px 3px 3px #0b0b0b inset;
			margin:0 auto 10px;
		}
		.copyright{
			background-color:#1f1f1f;
			font-size:1em;
			color:#1274ac;
			line-height:43px;
			text-align: center;
		}

		/*按鈕小圖示*/
		.menuicon{width:40px; height:40px;}
		.menuicon:before{
			content:''; height:3px; width:20px; background:#babcbe; 
			border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px; 
			display:block; position:absolute; top:7px; left:0; 
			box-shadow:0 9px #babcbe, 0 18px #babcbe;
			-webkit-box-shadow:0 8px #babcbe, 0 16px #babcbe;
			-moz-box-shadow:0 8px #babcbe, 0 16px #babcbe;}

		.icon_close:before, .icon_close:after{content:''; height:3px; width:28px; display:block; background:#fff; border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px; position:absolute; top:28px; left:0px; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);}

		.icon_close:after{transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);}



		/*dropmenu*/
		#dropmenu{
			position: fixed;
			top:-100%;
			left:0;
			width:100%;
			height:100%;
            background: -webkit-linear-gradient(left, rgba(0,116,200,0.9) 0%,rgba(1,117,198,0.9) 1%,rgba(58,171,40,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right, rgba(0,116,200,0.9) 0%,rgba(1,117,198,0.9) 1%,rgba(58,171,40,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			z-index:9999;
			font-size:1.5rem;
			overflow: scroll;
			-webkit-transition: all 0.3s ease-in; /* set transition type and time */
  			transition: all 0.3s ease-in;

		}
		#dropmenu.open{
			top:0;
			left:0;
			overflow: scroll;			
		}

		#dropmenu .close{
			position: absolute;
			right:6px;
			top:-4px;
			width:40px;
			height:40px;
		}
		#dropmenu ul{
			margin-top:10px;
		}
		#dropmenu li{
			
			list-style:none;
			border-bottom:1px solid #fff;
			padding:0;
			line-height:92px;
		}
		#dropmenu li:nth-child(3){

			line-height:56px;
		}
		#dropmenu li ul{
			margin-top:0px;
			width:80%;
			margin:0 auto;
			padding:0;
		}
		#dropmenu li ul:after{
			content:'';
			clear:both;
			display:block;
		}
		#dropmenu li ul li{
			
			width:50%;
			float:left;
			padding:0;
			border-bottom:none;
			padding: 0;
			margin-bottom:20px;
			font-size:1.3rem;
			line-height:20px;
			box-sizing: border-box;
		}
		#dropmenu li ul li:first-child{
			border-right:1px solid #fff;
		}
		#dropmenu a{
			display:block;
			color:#fff;
			text-align: center;
			text-decoration: none;
			font-size:1.2em;
		}

		#dropmenu span{
			 height:40px; width:40px; display:inline-block; position:relative;vertical-align: middle;
		}

/*內頁開始*/
				/*服務項目*/
							.service_intro{
								width:80%;
								margin:0 auto;
								overflow: hidden;
							}
							.service_intro ul{ margin:0;padding:0; }

							.service_intro li{
								margin:0;
								padding-bottom:25px;
								border-bottom:1px solid #141414;
								border-top:1px solid #3b3b3b;
							}
							.service_intro li:first-child{
								border-top:none;
							}
							.service_intro li:last-child{
								border-bottom:none;
							}
							.service_item{
								display:block;
								vertical-align: middle;
								color:#1fb4ff;
								font-size:2.8em;
								text-align:center;
								margin:0 auto 10px;
							}
							.service_item_normal{
								display:block;
								vertical-align: middle;
								color:#1fb4ff;
								font-size:3em;
								
								text-align:center;
								line-height:45px;
								margin:0 auto;
							}						
							.service_des{
								display:block;
								vertical-align: middle;

								color:#e4e5e6;
								margin:0 auto;
								font-size:1.5em;
							}


							.flow_iconset{
									width:76px;
									height:64px;
									background: url(images/flow_icon.png) top left no-repeat;
									background-size: cover;
									margin:0 auto;
							}

							.f_icon2{
							background-position: 0 -64px;
							}
							.f_icon3{
							background-position: 0 -128px;
							}
							.f_icon4{
							background-position: 0 -192px;
							}
							.f_icon5{
							background-position: 0 -256px;
							}

							.flow li{
								
								border-bottom:1px solid #00cfff;
								width:100%;
								position: relative;
								float:left;
								list-style:none; 
								margin-bottom:20px;
								border-top:none;
							background: -webkit-linear-gradient(rgba(33,33,33,1) 0%, rgba(53,53,53,1) 50%, rgba(33,33,33,1) 100%);
							background: -o-linear-gradient(rgba(33,33,33,1) 0%, rgba(53,53,53,1) 50%, rgba(33,33,33,1) 100%);
							background: linear-gradient(rgba(33,33,33,1) 0%, rgba(53,53,53,1) 50%, rgba(33,33,33,1) 100%); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
							
							}
							.flow li:last-child{
								margin-right:0;
							}
							.flow li:after{
								content:''; height:0; width:0; display:block; border:16px transparent solid; border-bottom-width:0; border-top-color:#00cfff; position:absolute; bottom:-16px; left:50%;margin-left:-16px;
							}
							.flow li:last-child:after{
								border:none;
							}
							.flow h3{
								color:#1fb4ff;
								font-size:2em;
								text-align: center;
								padding:10px 0;
								position: relative;
								margin-bottom:10px;
							}
							.flow h3:after{
								position: absolute;
								content:'';
								width:38px;
								height:2px;
								background: #ffffff;
								bottom:0px;
								left:50%;
								margin-left:-19px;
							}
							.flow p{
								font-size:1.5em;
								width:50%;
								margin:0 auto;
								color:#c4c6c7;
								text-align: center;
							}

							.gray{
								
								display: inline-block;
								margin:0 auto;
							}

				/*產品*/
							.sub{
								
								text-align: center;
								font-size:1.8em;
								color:#fff;
								padding:20px 0;
								background: #212121;
							}
							.sub a,.subitem a{
								color:#fff;
								text-decoration:none; 
							}
							.sub a:hover,.subitem a:hover{
								color:#1997e1;
								text-decoration:none; 
							}						
							.sub a .choose{
								color:#1997e1;
							}

							.subitem{display:none;}

							.product_con1{ 
								background:#2d2d2d url(images/system_bg1.png) center center no-repeat;
								background-size: 80% auto;
								
							}
							.product_con2{
								background:#212121 url(images/system_bg2.png) center center no-repeat;
								background-size: 80% auto;
							}
							.product_con3{
								background:#2d2d2d url(images/system_bg3.png) center center no-repeat;
								background-position-y: 80px;
								background-size: 80% auto;
							}
							.product_con4{
								background:#212121 url(images/system_bg4.png) center center no-repeat;
								background-position-y: 350px;
								background-size: 80% auto;
							}
							.product_con5{
								background:#2d2d2d url(images/system_bg5.png) center center no-repeat;
								background-position-y: 80px;
								background-size: 80% auto;
							}
							.product_con1,.product_con2,.product_con3,.product_con4,.product_con5{
								padding:30px 0;
								min-height:300px;
							}

							.product_con1 p,.product_con2 p,.product_con3 p,.product_con4 p,.product_con5 p{
								width:80%;
								margin:0 auto;
								font-size:1.5em;
								line-height:1.5;
								text-align: justify;
							}
							
							.product_con1 h2,.product_con2 h2,.product_con3 h2,.product_con4 h2,.product_con5 h2{
								text-align: center;
								font-size:3em;
								width:100%;
								margin:0 auto;
								margin-bottom:30px;
								position: relative;
								font-weight: normal;
							}
							.product_con1 h2:after,.product_con2 h2:after,.product_con3 h2:after,.product_con4 h2:after,.product_con5 h2:after{
								content:'';
								display:block;
								width:60px;
								height:3px;
								background: #47c12e;
								position: absolute;
								left:50%;
								margin-left:-30px;
								top:50px;
							}
							.product_con2 h2:after,.product_con4 h2:after{
								background: #1898e1;
							}
							.con_title{
								font-size:1.8rem;
								color:#cfd0d2;
								margin:30px 0 12px;
								display:inline-block;
							}
							.appintro{
								width:80%;
								margin:0 auto;
								color:#e4e4e4;
							}
							.appintro ul{
								padding:0;
								margin:0;
								list-style:none; 
							}
							.appintro li{
								padding:0;
								margin:0;
								list-style:none; 
								margin:40px 0 60px;

							}
							
							.appintro li .applogo{
								width:80%;
								margin:0 auto;
								text-align: center;
							}
							.appintro li .applogo img{
								width:150px;
							}
							.appintro ul:after{
								content:'';
								display:block;
								clear:both;
							}
							.appintro li .app{
								
								margin:0 auto;
								box-sizing: border-box;
								min-height:180px;
								color:#7d7d7d;
								text-align: justify;
							}
							.appname{
								font-size:3em;
								margin:10px 0;
								text-align: center;
							}	

				/*夥伴*/	

							.partner{
								background: #fff;
								padding:50px 0 50px;

							}
							.partner ul{
								width:94%;
								margin:0 auto;
								padding:0;
							}
							.partner li{
								list-style:none;
								padding:0;
								margin-top:50px  ;
								text-align: center;
							}
							.partner li:first-child{
								margin-top:0;
							}
							.partner li img{
								width:185px;
							}							
							.partner p{
								font-size:1.5em;
								text-align: center;
								width:80%;
								margin:50px auto 0;
							}

				/*關於我們*/
							.about_title{
								background: url(images/img_about2.jpg) top left no-repeat;
								background-size: cover;
								width:280px;
								height:16px;
								margin:30px auto 15px;
								color:#fff;
							}
							.about_intro{
								width:90%;
								margin:0 auto;
								color:#fff;
								
								margin-bottom:30px;
								text-align:center;
							}
							.about_intro h3{
								font-size:1.5em;
								padding:10px 0;
							}
							.about_intro p{
								font-size:1.3em;
								text-align: left;
							}
							iframe{
								width:100%;
								height:200px;
								
							}



							.intro{
							
								margin:0 auto;
								background:#2d2d2d;
								padding:40px 0;
							}

							.info{
								width:90%;
								margin:0 auto;
							}							
							.logo2{
								width:90%;
								margin:0 auto 20px;
							}
							.logo2 img{
								width:100%;
							}
							.info_detail{
								width:90%;
								margin:0 auto;
								color:#7d7d7d;
								line-height:2;
							}
							.contact{
								background:#212121 ;
								padding: 20px 0 40px;
							}
							.contact h2{
								text-align: center;
								font-size:3.6em;
								width:90%;
								margin:0 auto;
								margin-bottom:30px;
								position:relative;
							}
							.contact h2:after{
								content:'';
								display:block;
								width:76px;
								height:3px;
								background: #1898df;
								position: absolute;
								left:50%;
								margin-left:-38px;
								top:50px;
							}
							.contact p{
								width:90%;
								color:#e4e5e6;
								margin:0 auto 28px;
								text-align: center;
							}
							.contactform{
								width:90%;
								margin:0 auto;
							}
							.contactform li{
								display:inline-block;
								margin-bottom:8px;
								list-style:none; 
								width:100%;
							}
							.contactform li input,.contactform li textarea{
								width:100%;
								background: #414143;
								border:none;
								line-height:35px;
							}
							.contactform li.short{
								
							}
							.contactform li:nth-child(2),.contactform li:nth-child(4){
								
							}
							.btn_sent{
								text-align: center;
							}
							.btn_sent input{
								background:#414143;
								width:47%;
								padding:20px 0;
								border:none;
								border-radius: 5px;
								margin-left:5px;
								color:#fff;
							}		
							.product_li{
								margin:0 auto;
								width:70%;
								font-size:1.5rem;
							}
							.product_li li{
								list-style:none;
								position: relative;
								
							}
							.product_li li:after{
								content:'◆';
								display:block;
								width:20px;
								height:20px;
								position: absolute;
								top:0;
								left:-20px;
								
							}
							.product_li2{
								margin:0 auto;
								width:70%;
								font-size:1.5rem;
							}
							.product_li2 li{
								list-style:none;
								position: relative;
								
							}
							.product_li2 li:after{
								content:'◆';
								display:block;
								width:20px;
								height:20px;
								position: absolute;
								top:0;
								left:-20px;
								
							}	
}