/* ======================================
	Media Queries
====================================================================================================================================== */


@media screen and (min-width: 641px) and (max-width: 992px) {
}


@media only screen and (max-width: 992px) {
	
	/* ======================================
		06. 頁首header設定
	========================================================================================================= */
	.header-flex .flex-left{width:calc(100% - 80px); margin-right:0; }
	.header-flex .flex-right{ width:80px; }
	
	.logo{ max-width:250px; }
	
	.menu-list{ display:none; }
	
	
	
	/* ======================================
		07. 小螢幕時選單設定
	========================================================================================================= */
	.menu-trigger{ display:block; }
	
	.menu-toggle-area{ display:block; }
	
	.page-overlay{
		display:none; 
		position:fixed;
		z-index:999;
		top:0;
		left:0; 
		width:100%;
		height:100vh;
		background:rgba(0,0,0,0.5);
		overflow:hidden;
	}
	.page-overlay.opened{ display:block; }

	body.overflow-hidden { overflow: hidden; }
	
	
	
	/* ======================================
		08. 頁尾footer設定
	========================================================================================================= */
	.footer-top-flex .flex-left{ order:2; width:100%; }
	.footer-top-flex .flex-right{ order:1; width:100%; padding:20px 20px; background:rgba(0,170,255,0.6); }
	.footer-top-flex .flex-right:before{
		height:75px;
	}

	.footer-menu-list{ display:none; }
	
	.footer-map .iftame{ height:200px; }
	
	.web-designer{ display:block; margin-top:5px; }
	
	
	
	
	/* ======================================
		10. 全頁面共同設定
	========================================================================================================= */
	/*分類*/
	.category-area{ display:none; }


	
	/* ======================================
		11. 首頁
	========================================================================================================= */
	
	/*首頁-營業項目*/
	.service-list li{ width:calc( 100% / 3); }



	/* ======================================
		14. 商品介紹
	========================================================================================================= */
	/*左右頁面布局*/
	.product-flex{ display:flex; flex-wrap:wrap; margin:30px 0 0 0; }
	.product-flex-left{ display:none; }
	.product-flex-right{ width:100%; }



	/* ======================================
		15. 聯絡我們
	========================================================================================================= */
	.contact-info-list li{ width:100%; }


}


@media only screen and (max-width: 768px) {
	
	/* ======================================
		10. 全頁面共同設定
	=================================================================================================================== */
	.two-cols-list > li{ width:calc( 100% / 2 ); }
	.three-cols-list > li{ width:calc( 100% / 2 ); }
	.four-cols-list > li{ width:calc( 100% / 2 ); }



	/* ======================================
		13. 最新消息
	========================================================================================================= */
	.post-item a{ padding:15px 10px 30px 10px; }
	.post-date{ position:relative;  top:auto;  left:auto; margin-bottom:5px; }
	.post-more-btn{ display:none; }
	
	
}


@media only screen and (max-width: 640px) {
	
	/* ======================================
		11. 首頁
	========================================================================================================= */
	
	/*首頁-營業項目*/
	.service-list li{ width:calc( 100% / 2); }
			

	/* ======================================
		13. 最新消息
	========================================================================================================= */
	.view-heading{ padding-right:0; }
	.view-heading .date{
		position:relative; 
		top:auto; 
		left:auto;
		font-size:14px;
		display:block;
		text-align:right;
		margin-top:5px;
	}


	/* ==14. 商品介紹======================================= */
	.product-view-flex .flex-left{ width:100%; margin-right:0; }
	.product-view-flex .flex-right{  width:100%; }

	.pro-view-photos{ max-width:330px; margin-left:auto; margin-right:auto; }
	.pro-dots-style .owl-dots .owl-dot span { width:20px; height:20px; margin:10px; }
	
		
		
}


@media only screen and (max-width: 480px) {
	
	/* ======================================
		10. 全頁面共同設定
	=================================================================================================================== */
	.two-cols-list > li{ width:100%; }
	.three-cols-list > li{ width:100%; }
	.four-cols-list > li{ width:100%; }
	
	.thumbnail-list.four-cols-list > li{ width:50%; }
	
	
	
}


@media only screen and (max-width: 360px) {
}