@charset "utf-8";

.footer{ padding-top:30px; }
.footer:before{
	left:-15px;
	width:calc(100% + 30px);
	height:15px;
}

/*專案作品詳細頁*/
.works-view-pd{ padding-right:0px; }
.float-price-box{ width:100%; }
#float-price-box{ margin:20px auto 0px auto; margin-bottom:30px; }
#float-price-box , #float-price-box.fixed{ position:relative; top:auto; right:auto; margin-right:auto;}
	
.works-view-contact-item span{ display:block; }
	
@media (min-width: 360px) { 
	.container { width: 340px; } 
	.footer:before{ width:340px; height:23px;}
}

@media (min-width: 480px) { 
	.container { width: 460px; } 
	.footer:before{ width:460px; height:31px;} 
	.footer{ padding-top:40px; }
}

@media (min-width: 640px) { 
	.container { width: 630px; } 
	.wrapper-content{ width: calc(100% - 60px); } 
	.footer:before{ width:605px; height:40px;} 
	.footer{ padding-top:50px; }
}

@media (min-width: 768px) { 
	.container { width: 760px; } 
	.footer:before{ width:740px; height:49px;} 
	.footer{ padding-top:60px; }
	
	.float-price-box{ width:80%; }
}

@media (min-width: 992px) { 
	.container { width: 990px; } 
	.footer:before{ left:-30px; width:980px; height:65px; } 
	.footer{ padding-top:85px; } 
}

@media (min-width: 1200px) { 
	.container { width: 1200px; } 
	.footer:before{ width:1200px; height:80px;} 
	
	/*專案作品詳細頁*/
	.works-view-pd{ padding-right:180px; }
	.float-price-box{ width:160px; }
	#float-price-box{ position:absolute; top:0; right:0; z-index:2; margin:0; }
	#float-price-box.fixed{ position:fixed; top:20px; right:50%; margin-right:-535px; }
	.works-view-contact-item span{ display:block; }
}
@media (min-width: 1440px) { 
	.container { width: 1280px; } 
	.footer:before{ width:1280px; height:85px;}
	
	/*專案作品詳細頁*/
	#float-price-box.fixed{ position:fixed; top:20px; right:50%; margin-right:-575px; }
}

	
	
	
	
	
/*=============================================================================================================	
=============================================================================================================*/
	

	
@media only screen and (max-width: 1200px) {
	
	/*主選單*/
	.menu-list li{ margin-left:0; margin-right:0; }
	
	/*左側分類*/
	.category-list li a{ margin-left:10px; }
	

}


@media only screen and (max-width: 992px) {
	
	.header-left{ width:55%; margin-right:5%; }
	.header-right{ width:40%; }
	
	/*主選單*/
	.menu-list{ display:none; }
	
	.menu-trigger{ display:block; }
	.menu-toggle-content{ display:none; }
	.menu-toggle-content.opened{ display:block; }
	
	.main-left{ display:none; }
	.main-right{ width:100%; }
	
	
	/*專案作品詳細頁*/
	.works-view-photos .owl-nav-style .owl-prev:before , .works-view-photos .owl-nav-style .owl-prev:after , 
	.works-view-photos .owl-nav-style .owl-next:before , .works-view-photos .owl-nav-style .owl-next:after{ background:#ccc; }
	.works-view-photos .owl-nav-style .owl-prev , .works-view-photos .owl-nav-style .owl-next{ opacity:1; }
	
	
	
	.headline-flex > .flex-left{ order:2; width:100%; }
	.headline-flex > .flex-right{ order:1; width:100%; text-align:right; margin-bottom:15px; }
		
	
	
	
}


@media only screen and (max-width: 768px) {
	
	.works-thrmb-item{ width:23.5%; margin-right:2%; }
	.works-thrmb-item:nth-child(5n){ margin-right:2%; }
	.works-thrmb-item:nth-child(4n){ margin-right:0; }
	
	
	/*選版區塊*/
	.choose-temp-box{ width:31%; }

}


@media only screen and (max-width: 640px) {
	
	.header , .main , .footer{ padding-left:3px; padding-right:3px; }
	
	.main-right{ 
		-webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
		-moz-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
		-o-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
		box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
	}

	
	/*專案作品*/
	.works-list-item{ padding-left:0; padding-bottom:10px; margin-bottom:30px; }
	.works-list-photo{ position:relative; width:100%; height:100%;  }
	.works-list-heading{ padding-top:20px; padding-right:0; }
	.works-list-num{ position:relative; bottom:auto; right:auto; display:inline-block;  margin-bottom:15px; }

	.works-list-sn{ position:relative; bottom:auto; right:auto; margin-top:10px; }
}


@media only screen and (max-width: 480px) {
	
	.footer-info-list li span{ display:block; }
	
	.works-thrmb-item{ width:48%; margin-right:2%; }
	.works-thrmb-item:nth-child(2n){ margin-right:0; }


	/*選版區塊*/
	.choose-temp-box{ width:48%; }
	
	
	.wrapper{ background:#fff; }

}


@media only screen and (max-width: 320px) { 
	.menu-trigger{ width:100px; height:55px; }
}