@charset "utf-8";

/*@media (min-width: 360px) { .container { width: 340px; } }
@media (min-width: 480px) { .container { width: 460px; } }
@media (min-width: 640px) { .container { width: 620px; } }
@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }
@media (min-width: 1440px) { .container { width: 1280px; } }*/

	
@media only screen and (max-width: 1200px) {
	
	.header .container{ width:100%; padding:0 15px; }
	
	/*選單*/
	.menu-list li a{ padding-left:10px; padding-right:10px; } 
	
	
	/*logo和選單列*/
	/*.header-left{ width:350px; }
	.header-right{ width:calc(100% - 350px ); }*/
	

	/*月份陳列與搜尋*/
	.month-choose-left{ width:100%;  margin-right:0;  }
	.month-choose-right{ width:100%; margin-left:auto; }
	
}


@media screen and (min-width: 993px) and (max-width: 1100px) {
	
	/*選單*/
	.menu-list li a{ padding-left:5px; padding-right:5px; } 
}
	

@media only screen and (max-width: 992px) {
	
	.main .container{ width:98%; }
	
	
	
	/*logo和選單列*/
	/*.header{ min-height:auto; border-bottom: 1px solid #ccc; box-shadow:0 2px 5px rgba(0, 0, 0, 0.1); }
	.header-flex{ align-items:center; align-items:center; min-height:58px; }
	.header-left{ width:calc(100% - 70px); }
	.header-right{ width:70px; }*/
	
	.header .container{ width:100%; }
	
	.logo{ max-width:400px; margin:4px 0; }
	
	.tel-number{ display:none; }
	
	
	/*小螢幕時選單鈕*/
	.menu-trigger{ display:inline-block; }
	.menu-toggle-content{
		display:none;
		position: absolute; z-index:90; top:100%; left:0;
		width: 100%;
		background:#fff;
		border-top:1px solid #ccc;
		border-bottom: 5px solid #e71f19;
		padding:20px 0;
		
		opacity:0;
		visibility: hidden;
		
		transition: all 0.5s;
		-o-transition: all 0.5s;
		-webkit-transition: all 0.5s;
	}
	.menu-toggle-content.opened{
        visibility: visible;
        display: block;
        opacity: 1;
    }
	
	.menu-list li{ width:100%; padding:5px 0; text-align:center; }
	.menu-list li.menu-mobile-show{ display:block; }
	.menu-list li a{ padding:15px 10px; }
	.menu-list li a .menu-text{ min-width:100px; text-align:left; }
	
	
	
	/*.mobile-fixed-btbar{ display:block; }*/
	
	
	
	/*輪播區塊*/
	.slider-banner{ padding:0; }
	
	
	/*.month-all-box{ display:none; }*/
	
	
	/*月份陳列與搜尋*/
	.choose-area{ margin-bottom:15px; }
	.year-choose-box{ width:calc( ( 100% - 100px - 10px - 10px ) / 2); max-width:150px; background:transparent; padding-left:0; padding-right:0;}
	.month-choose-box{ width:calc( ( 100% - 100px - 10px - 10px ) / 2); max-width:150px; height:50px; padding:7px 10px; transform:skewX(-15deg); }
	.all-choose-box{ width:100px; }
	
	.all-choose-box{ }
	.all-choose-box a{
		position:relative;
		display:block; 
		background:#ccc; 
		color:#fff; 
		font-size:24px;
		padding:5px;
		text-align:center;
		font-weight:600;
		line-height:1.4;
		transform:skewX(0);
		
		-ms-border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		-o-bborder-radius:5px;
		border-radius:5px;
	}
	.all-choose-box a:before , .all-choose-box a:after{ display:none; }
	.all-choose-box a span{ transform:skewX(0); }
	
	
	
	.month-choose-flex{ width:94%; margin-left:auto; margin-right:auto; } 
	
	.month-choose-list{ display:none; }
	.month-choose-frame{ display:block; }
	
	
	.category-area{ display:none; }
	
	
	.view-heading{ width:94%; margin-left:auto; margin-right:auto; }
	
	.view-tab-fixed{display:block; }
	
	/*分頁內容 tab*/
	.tab-left{ display:none; }
	.tab-right{ width:100%; }
	.participate-area.mobile-show{ display:block; }
	.participate-area.mobile-hide{ display:none; }
	.view-right-content{
		margin-top:15px;
		text-align:center;
	}
	.tabs-name{
		background:transparent;
		color:#8E1E22;
		font-size:20px; font-weight:600;
		padding:5px 5px;
		margin-bottom:1rem;
	}
	.tabs-name:before, 
	.tabs-name:after{
		position:absolute; top:50%; content:"";
		width:1000px; height:1px;
		background:#8E1E22;

		border-width:0;
		opacity:0.3;
	}
	.tabs-name:before{ left:-1010px; }
	.tabs-name:after{ right:-1010px; }


	.tabs-content{ 
		padding:0;
		border-width:0px;
		min-height:300px;
		text-align:left;
	}
	.tabs-list{
		background:transparent;
		border-width:0px;
		padding:0;
		
		border-radius:0;
		box-shadow:0px 0px 0px rgba(0, 0, 0, 0);
	}
	.tabs-list li{ 
		width:50%;
		
		border:1px solid rgba(255,255,255,0.2);
		/*border-right-width:0px;
		border-bottom-width:0px;*/
	}
	.tabs-list li a{
		color:#fff;
		font-size:15px;
		background:none;
		text-align:left;
	}
	.tabs-list li.active a , .tabs-list li.active a:hover{ background:none; color:#fff; }
	
	.tabs-list li a .icon.sta-current{ display:none; }
	.tabs-list li a .icon.sta-hover{ display:block; }
	.tabs-list li a .icon.sta-active{ display:none; }
	
	.tabs-list li a:hover .icon.sta-current{ display:none; }
	.tabs-list li a:hover .icon.sta-hover{ display:block; }
	.tabs-list li a:hover .icon.sta-active{ display:none; }
	
	.tabs-list li.active a .icon.sta-current{ display:none; }
	.tabs-list li.active a .icon.sta-hover{ display:block; }
	.tabs-list li.active a .icon.sta-active{ display:none; }

	.tabs-list li.active a:before{ border-left-color:#fff; }
	
		
	.activity-note-wrap{ display:none; }
	
	
	/*頁尾*/
	.footer{ padding-bottom:60px; }
	
	
	/*view_news.php*/
	.post-date{ position:relative; bottom:auto; right:auto; display:block; }
	.post-name{ padding-right:0px; }
	
	
	/*搜尋區塊*/
	.search-flex{ padding-left:0; padding-right:0; }


	/*13. 規劃師*/
	.page-headline-wrap.planner{ position:relative; margin-bottom:90px; }
	.page-headline-wrap.planner .search-box{ position:absolute; top:75px; right:0; width:100%; max-width:100%; }


	.promotion-item .name{ padding-right:0; }
	.promotion-item .name .title{ display:block; font-size:18px; font-weight:600; color:#975F6F; }
	.promotion-item .name .date{  display:block; position:relative; bottom:auto; right:auto; font-size:14px; }
	
	
	
	/*活動剪影*/
	.albums-headline-wrap{ width:94%; margin-left:auto; margin-right:auto; }
	
	
			
}


@media only screen and (max-width: 768px) {
	
	/*月活動日曆*/
	.activity-calendar{ width:1000%; margin-right:0; margin-bottom:30px; }
	.activity-month-area{ width:1000%; }
	

	/*活動列表*/
	.acitity-list li{ width:49%; margin-right:2%;}
	.acitity-list li:nth-child(3n){ margin-right:2%; }
	.acitity-list li:nth-child(2n){ margin-right:0; }
	
	
	/*頁尾*/
	.footer-flex-left{ width:100%; margin-bottom:1rem; }
	.footer-flex-right{ width:100%; }
	.copyright{ text-align:left; }
	.social-list{ text-align:left; }
	.social-list li{ margin-left:0; margin-right:14px; }
	
	.footer-info-list.right-side{ text-align:left; }
	
	
	/*服務說明*/
	.service-healine-wrap{ padding:15px 10px; }
	
	.service-list li{ width:48%; margin-right:4%; }
	.service-list li:nth-child(3n){ margin-right:4%; }
	.service-list li:nth-child(2n){ margin-right:0; }

	
	/*活動剪影*/
	.albums-headline-wrap{ padding:45px 0; }
	.albums-list li{ width:32%; margin-right:2%; }
	.albums-list li:nth-child(5n){ margin-right:2%; }
	.albums-list li:nth-child(3n){ margin-right:0; }

	
	
	/*報名資料填寫*/
	.form-area .form-line{ width:100%; margin-left:0; margin-right:0; }
	.form-line.half-part{ width:100%; margin-left:0; margin-right:0; }
	.form-area .form-line .fm-wrap .control-input , .form-area .form-line .fm-wrap .control-textarea{ padding:10px 10px; }
	
	
	/*13. 規劃師*/
	.store-list{ max-width:550px; margin-left:auto; margin-right:auto; }
	.store-list > li{ width:48%; margin-right:4%; margin-bottom:45px; }
	.store-list > li:nth-child(2n){ margin-right:0; }

	.introduction-flex{ max-width:400px; margin-right:auto; margin-left:auto; }
	.introduction-flex .flex-left{ width:100%; margin-right:0; margin-bottom:15px; }
	.introduction-flex .flex-right{ width:100%; }
	
	.contact-flex{ display:flex; flex-wrap:wrap; }
	.contact-flex .flex-left { order:2;  width:100%;  }
	.contact-flex .flex-right{ order:1; width:100%; margin-left:0; margin-bottom:15px; }
	.contact-map iframe{ height:300px; }

	.promotion-flex{ max-width:400px; margin-right:auto; margin-left:auto; }
	.promotion-flex .flex-left{ width:100%; margin-bottom:15px; }
	.promotion-flex .flex-right{ width:100%; margin-left:0; }
	.promotion-item .photo { max-width:350px; margin-left:auto; margin-right:auto; }
	.promotion-item .name{ text-align:center; }
		
	
}


@media only screen and (max-width: 640px) {
	
	/*詳細頁*/
	.participate-btn{ padding-left:10px; padding-right:10px; min-width:auto; }
	
	.albums-list li{ width:49%; margin-right:2%; }
	.albums-list li:nth-child(3n){ margin-right:2%; }
	.albums-list li:nth-child(2n){ margin-right:0; }
	
}


@media only screen and (max-width: 480px) {
	
	.header-flex{ min-height:50px; }
	
	.logo{ max-width:250px; }

	.item-box{
		/*padding-left:10px; 
		padding-right:10px;  */
		border-width:0px; 
		/*border-top-width:1px;*/
		margin-top:10px;
		border-color:#333;
		-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
		-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
		-o-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
		box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
	}
	.item-box-headline{ 
		/*left:10%;
		width:80%;*/
		/*text-align:center; */
	}
	.item-box-headline .title{ font-size:1.2em; font-weight:600; color:#333; }
	
	
	/*活動列表*/
	.acitity-list li{ width:100%; margin-right:0;}
	.acitity-list li:nth-child(3n){ margin-right:0; }
	
	
	/*服務說明*/
	.service-list li{ width:100%; margin-right:0; }
	.service-list li:nth-child(3n){ margin-right:0; }
	
	
	/*報名資料填寫*/
	.form-area .form-line .fm-title , .form-area .form-line .fm-wrap{ display:block; width:100%; }
	.form-area .form-line .fm-title{ margin-bottom:5px; }
	
	
	/* == 15. 我要加入 =======================================*/
	.form-title-line > .form-title-area , .form-title-line > .form-content-area{ padding:2px 3px; }
	.form-title-line > .form-title-area{ width:100%; text-align:left;}
	.form-title-line > .form-content-area{  width:100%; }			

	
}


@media only screen and (max-width: 360px) { 

	.logo{ max-width:200px; }

}






