
/*@media (max-width:1920px) {

}*/

/*@media (max-width:1440px) {

}*/



@media (max-width:1200px) {
	.logo{ width:35%; margin:20px 0 10px 2%; }
	
	/*------------*/
	
	nav{ 
		/*float:left;*/
		width:100%; 
		margin-top:0px; 
		margin-bottom:10px; 
		padding-left:0;
	}

	
	/*------------*/
}



@media (max-width:1024px) {
	
	.foot-info{ padding-top:0px; }
	
	.foot-qrcode{ padding-top:0px; }
	
	/*------------*/
	
}



@media (max-width:960px) {
	.header-lan{
		height:29.5px;
		line-height:29px;
		margin:0 0 0px 0;
	}
	
	.header-lan:before{
		position:absolute;
		top:0px;
		left:-25px;
		width:40px;
		height:30px;
		z-index:0;
		content:"";
		background:url(../images/header-lan.png) no-repeat;
		background-size:contain;
	}
	
	.header-lan a{
		font-size:13px;
	}
	
	/*------------*/
	
	.logo{
		width:60%;
		min-width:230px;
		margin:30px 0 10px 2%;
	}
	
	/*------------*/
	
	.pullcontainer {
		float:right;
		width:25%;
		text-align: right;
		padding: 50px 30px 5px 0;
	}
	
	.pullcontainer a#pull {
		display: block;
		float:right;
		background:#37393b;
		color: #ffffff;
		padding:5px 10px;
		-ms-border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		-o-bborder-radius:5px;
		border-radius:5px;
	}
	
	nav {
		position:absolute;
		bottom:0;
		left:0;
		z-index:500;
		height: 0px;
		width: 100%;
		margin: 10px 0 0 0;
		padding:0px;
		
	}
	
	nav > ul {
		width: 100%;
		display: none;
		height: auto;
		padding: 0;
		margin: 0px;
	}
	
	nav > ul > li{
		width: 100%;
		float: left;
		position: relative;
		margin: 0px;
	}

	nav  > ul > li > a {
		width: 100%;
		float: left;
		position: relative;
		padding: 15px 20px;
		text-align:left;
		margin: 0px;
		background:#ffffff;
	}
	
	
	
	/*次選單*/
	nav .sub-menu {
		width: 100%;
		height:auto;
		opacity: 1;
		visibility: visible;
		position: relative;
		margin: 0px;
		display:block;
		padding:0px;
		background:#FFF;
	}
	
	nav .sub-menu li {
		width:100%;
		background:#FFF;
		margin: 0px;
		padding:0px;
	}
	
	nav .sub-menu li a {
		width:100%;
		background:#FFF;
		padding:5px 40px;
		margin:0px;
		color: #5e6062;
		text-align:left;
		font-size:16px;
		border-bottom:1px dotted transparent;
	}
	
	nav .sub-menu li a:before {
		display:none;
	}
	
	nav .sub-menu li a:hover{
		color:#fb2525;
	}
	/*------------*/	
	.footer{
		width:96%;
		margin:100px 2% 0 2%;
	}
	
	.foot-logo{
		width:40%;
		margin-right:60%;
		padding:0 0 30px 0px;
	}
	
	.foot-info{
		width:88%;
		margin-left:0%;
		padding:0 0 0px 0px;
	}

	.foot-info01{
		width:25%;
	}
	
	.foot-info02{
		width:75%;
	}
	
	.foot-qrcode{ padding-bottom:10px; padding-right:0%;}
	
	/*------------*/	
	
	.index-box01{
		width:66%;
		height:33vw;
		margin: 30px 0 0 0.5%;
	}
	
	.index-box02{
		width:32%;
		height:32vw;
		margin:30px 0.5% 0 0.5%;
	}
	
	.index-box01-up , .index-box01-down{
		width:49%;
		height:32vw;
		margin:0vw 0.5% 0 0.5%;
	}
	
	.index-box03{
		width:100%;
		height:auto;
		margin:30px 0 0 0%;
	}	
	
	/*-----------*/

	.inedx-work-group{
		float:left;
		width:94%;
		margin:1.5vw 3% 0 3%;
		padding-bottom:20px;
		
	}
	
	.inedx-work-item{
		float:left;
		width:32%;
		height:auto;
		margin:0 0;
	}
	
	.inedx-work-item:nth-child(2){
		margin:0 2%;
	}
	
	.inedx-work-item img{
		height:auto;
		width:100%;
		margin:0 0;
	}
	
	/*-----------*/
	
	.news-cate-group{
		width:96%;
		margin:30px 2% 0 2%;
	}
	
	/*-----------*/
	
	.news-vi-intro-title:before{
		left:2%;
	}
	
	.news-vi-intro-info{
		width:100%;
		padding:30px 0px 0px 0px;
	}
	
	.news-vi-pic-group{
		float:left;
		width:100%;
		margin:30px 0 0 0;
		padding:0 0 0 0px;
	}
	
	.news-vi-pic{
		float:left;
		width:32.333333%;
		overflow:hidden;
		margin:0 1% 10px 0;
	}

	.news-vi-title{
		width:98%;
		margin:70px 2% 10px 0%;
	}
	
	.news-vi-intro-video-gp{
		float:left;
		width:48%;
		margin:0px 2% 0px 0%;
	}
	
	.news-vi-intro-download-gp{
		float:left;
		width:48%;
		margin:0px 0px 0% 2%;
	}

	.news-vi-intro-video{
		float:left;
		width:100%;
		margin:30px 0% 00px 0%;
		padding:0px 20px 0px 0px;
	}
	
	.news-vi-intro-video iframe{
		float:left;
		width:100%;
		height:300px;
	}
	
	.news-vi-download{
		width:100%;
	}
	
	.news-vi-download li{
		width:100%;
		margin:0px 0% 20px 0;
	}
	

	/*-----------*/
	
	.service-cate-group{
		width:96%;
		margin:50px 2% 0 2%;
	}
	
	.service-cate-item{
		width:31.33333%;
		margin:20px 1% 20px 1%;
	}
	
	.service-cate-item:nth-child(4n+1){
		clear:none;
		float:left;
	}
	
	.service-cate-item:nth-child(3n+1){
		clear:both;
		float:left;
	}
	
	/*-----------*/
	.service-group{
		width:96%;
		margin:50px 2% 0 2%;
	}

	.service-item{
		width:48%;
		margin:10px 1% 10px 1%;
	}
	
	.service-item:nth-child(4n+1){
		clear:none;
		float:left;
	}
	
	.service-item:nth-child(2n+1){
		clear:both;
		float:left;
	}
	
	/*-----------*/
	
	
	
}





@media only screen and (max-width:768px) {
	.main-title-path{
		display:none;
	}
	
	.foot-info02 span{
		margin-left:28px;
		visibility:hidden;
	}
	
	/*-----------*/
	
	.about-intro-title{
		text-align:center;
	}
	
	.about-intro-title:before{
		position:absolute;
		z-index:1;
		bottom:-10px;
		left:50%;
	}
	
	
	.about-intro-info{
		float:left;
		width:100%;
		margin:00px 0% 0 0%;
		padding:30px 0px 0px 0px;
	}
	
	.about-pic{
		float:left;
		width:100%;
		margin:0px 0% 0 0%;
		padding:50px 0px 0px 0px;
		text-align:center;
	}
	
	/*-----------*/
	
	.news-cate-item{
		width:98%;
		margin:0px 1% 40px 1%;
	}
	
	.news-cate-item:nth-child(even){
		float:left;
		margin:0px 1% 40px 1%;
	}
	
	
	/*-----------*/
	
	.service-vi-intro-title{
		text-align:center;
	}
	
	.service-vi-intro-title:before{
		position:absolute;
		z-index:1;
		bottom:-10px;
		left:50%;
	}
	
	/*作品細項頁同服務項目細項頁*/
	.works-view-page .service-vi-intro-title:before{
		position:absolute;
		z-index:1;
		bottom:-10px;
		left:50%;
	}
	
	
	.service-vi-intro-info{
		float:left;
		width:100%;
		margin:00px 0% 0 0%;
		padding:30px 0px 0px 0px;
	}
	
	.service-vi-download{
		float:left;
		width:100%;
		margin:0px 0% 0 0%;
		padding:50px 0px 0px 0px;
		text-align:center;
	}
	
	.service-vi-download li:nth-child(1){
		float:left;
		width:47.5%;
		margin:0px 2.5% 0px 0;
	}
	
	.service-vi-download li:nth-child(2){
		float:left;
		width:47.5%;
		margin:0px 2.5% 0px 0;
	}
	
	/*-----------*/
	
	.service-vi-title{
		text-align:center;
	}
	
	/*-----------*/
	
	
	.works-cate-group{
		width:96%;
		margin:50px 2% 0 2%;
		padding:0px 0px 0 0px;
	}
	
	.works-cate-item{
		width:31.33333%;
		margin:20px 1% 20px 1%;
	}
	
	.works-cate-item:nth-child(4n+1){
		clear:none;
		float:left;
	}
	
	.works-cate-item:nth-child(3n+1){
		clear:both;
		float:left;
	}
	
	/*-----------*/
	.works-group{
		width:96%;
		margin:50px 2% 0 2%;
	}

	.works-item{
		width:48%;
		margin:10px 1% 10px 1%;
	}
	
	.works-item:nth-child(3n+1){
		clear:none;
		float:left;
	}
	
	.works-item:nth-child(2n+1){
		clear:both;
		float:left;
	}
	
	/*-----------*/
	
	.process-intro-title{
		text-align:center;
	}
	
	.process-intro-title:before{
		position:absolute;
		z-index:1;
		bottom:-10px;
		left:50%;
	}
	
	
	.process-intro-info{
		float:left;
		width:100%;
		margin:00px 0% 0 0%;
		padding:30px 0px 0px 0px;
	}
	
	.process-pic{
		float:left;
		width:100%;
		margin:0px 0% 0 0%;
		padding:50px 0px 0px 0px;
		text-align:center;
	}
	
	
	/*-----------*/
	
	
	.technology-intro-title{
		text-align:center;
	}
	
	.technology-intro-title:before{
		position:absolute;
		z-index:1;
		bottom:-10px;
		left:50%;
	}
	
	
	.technology-intro-info{
		float:left;
		width:100%;
		margin:00px 0% 0 0%;
		padding:30px 0px 0px 0px;
	}
	
	.technology-pic{
		float:left;
		width:100%;
		margin:0px 0% 0 0%;
		padding:50px 0px 0px 0px;
		text-align:center;
	}
	
	
	/*-----------*/
	
	
	.contact-intro-title{
		text-align:center;
	}
	
	.contact-intro-title:before{
		position:absolute;
		z-index:1;
		bottom:-10px;
		left:50%;
	}
	
	
	.contact-form{
		float:left;
		width:100%;
		margin:0px 0% 0 0%;
		padding:30px 0px 0px 0px;
	}
	
	.contact-w01{
		width:100%;
	}
	
	.contact-w02{
		width:100%;
	}
	
	#fm-contact .form--button{
		text-align:center;
	}
		
	.contact-cominfo{
		float:left;
		width:100%;
		margin:0px 0% 0 0%;
		padding:50px 0px 0px 0px;
	}
	
	.contact-cominfo01{
		width:50%;
	}
	
	.contact-m-show{
		display:block;
	}
	
	.contact-cominfo01 span{
		margin-left:26px;
		visibility:hidden;
	}
	
	/*-----------*/
	
	#fm-contact .form-button{
		text-align:center;
	}
	
	
}




@media (max-width:640px) {
	
	.footer{
		width:90%;
		margin:100px 5% 0 5%;
	}
	
	.foot-logo{
		width:80%;
		margin-right:20%;
	}
	
	.foot-info{
		width:100%;
		margin-left:0%;
		font-size:14px;
	}

	.foot-info01 , .foot-info02{
		width:100%;
	}
	
	.foot-qrcode{
		display:none;
	}
	
	/*-----------*/
	
	.index-box01{
		width:96%;
		height:auto;
		margin: 0px 2% 0 2%;
	}
	
	.index-box01-up , .index-box01-down{
		width:100%;
		height:96vw;
		margin:30px 0% 0 0%;
	}
	
	.index-box02{
		width:96%;
		height:96vw;
		margin:30px 2% 0 2%;
	}
	
	/*-----------*/
	.inedx-work-title{
		padding-top:20px;
	}

	.inedx-work-title01{
		font-size: 6vw;
	}
	
	.inedx-work-title02{
		font-size: 4.5vw;
	}
	
	.inedx-work-title03{
		font-size: 5vw;
		margin-left:30px;
	}
	
	/*-----------*/
	
	.inedx-work-group{
		width:94%;
		margin:30px 3% 2 3%;
		padding-bottom:20px;
		
	}
	
	.inedx-work-item{
		width:100%;
		margin:30px 0;
	}
	
	.inedx-work-item:nth-child(2){
		margin:0 0%;
	}
	
	/*-----------*/
	
	.main-title-en{
		font-size:18px;
		padding-top:10px;
	}
	
	.main-title-ch{
		font-size:25px;
	}
	
	/*-----------*/
	
	.about-group{
		float:left;
		width:90%;
		margin:30px 5% 0 5%;
	}



	/*-----------*/
	.news-vi-group{
		float:left;
		width:90%;
		margin:30px 5% 0 5%;
	}
	
	.news-vi-intro-title{
		text-align:center;
	}
	.news-vi-intro-title:before{
		left:50%;
	}
	
	.news-vi-pic{
		width:100%;
		margin:0 0% 30px 0;
	}

	.news-vi-title{
		width:100%;
		margin:70px 0% 10px 0%;
	}
	
	.news-vi-intro-video-gp{
		width:100%;
		margin:0px 0% 0px 0%;
	}
	
	.news-vi-intro-download-gp{
		width:100%;
		margin:0px 0px 0% 0%;
	}

	.news-vi-intro-video{
		padding:0px 0px 0px 0px;
	}
	
	.news-vi-download {
		padding:30px 0px 0px 0px ;
	}
	
	
	/*-----------*/
	
	
	
	
	
	
	

	.service-cate-group{
		width:90%;
		margin:30px 5% 0 5%;
	}
		
	.service-cate-item a{
		text-align:left;
		padding:20px 20px 20px 40px;
	}
	
	.service-cate-item{
		width:98%;
		margin:10px 1% 10px 1%;
	}
	
	.service-cate-item:nth-child(3n+1){
		clear:none;
		float:left;
	}
	
	/*-----------*/
	
	.service-group{
		width:90%;
		margin:30px 5% 0 5%;
	}
		
	.service-item{
		width:100%;
		margin:10px 0% 10px 0%;
	}
	
	.service-item:nth-child(2n+1){
		clear:none;
		float:left;
	}
	
	/*-----------*/
	
	.service-vi-pic-group{
		margin:10px 0 50px 0;
	}

	.service-vi-pic{
		width:100%;
	}
	
	.service-vi-pic:nth-child(3n-1){
		margin:0px 0% 30px 0%;
	}
	
	
	/*-----------*/
	
	.works-cate-group{
		width:90%;
		margin:30px 5% 0 5%;
	}
		
	.works-cate-item a{
		text-align:left;
		padding:20px 20px 20px 40px;
	}
	
	.works-cate-item{
		width:98%;
		margin:10px 1% 10px 1%;
	}
	
	.works-cate-item:nth-child(3n+1){
		clear:none;
		float:left;
	}
	
	/*-----------*/
	
	.works-group{
		width:90%;
		margin:30px 5% 0 5%;
	}
		
	.works-item{
		width:100%;
		margin:10px 0% 10px 0%;
	}
	
	.works-item:nth-child(2n+1){
		clear:none;
		float:left;
	}
	
	/*-----------*/
		
	.process-group{
		float:left;
		width:90%;
		margin:30px 5% 0 5%;
	}

	/*-----------*/
	
	.technology-group{
		float:left;
		width:90%;
		margin:30px 5% 0 5%;
	}

	/*-----------*/
	
	.contact-group{
		float:left;
		width:90%;
		margin:30px 5% 0 5%;
	}

	/*-----------*/
	
	.contact-cominfo01{
		width:100%;
	}
	
	/*-----------*/
	
}



/*@media (max-width:480px) {	
	
}*/




/*@media (max-width:360px) {

}*/

/*@media (max-width:320px) {
	
}*/