﻿/*20200722*/


/* ==================================================
   使用最小和最大中斷點寬度，
   也有一些 media queries 和 mixins 用於特定螢幕尺寸的其中一段
================================================== */

@media (max-width: 340px) {  /*xs-4吋手機,像是iphone5*/
  ...
}

@media (max-width: 575.98px) {  /*xs手機直式*/
  ...
}

@media (max-width: 767.98px) {  /*xs,sm手機直橫*/
	body {
		xxxxpadding-top:70px; /*同navbar height*/
	}
	body, p, .form-control {
		font-size:14.5px;
	}
	.h1, h1 {
		font-size:27px;
		line-height: 1.1;
	}
	h1.title-header {
		font-size:46px;
		xxxfont-weight:700;
		xxxletter-spacing: -0.5px;
		margin-bottom:1.25em;
	}
	h1.title-bg {
		font-size:52px; 
	}
	.h2, h2 {
		font-size:24.5px;
	}
	.h3, h3 {
		font-size:19px;
		font-weight:300;
	}
	.h4, h4 {
		font-size:18px;
	}
	.h5, h5 {
		font-size:17px;
	}
	.h6, h6 {
		font-size:15.5px;
	}
	footer {
		font-size: 14px;
		line-height: 1.25;
	}
	.mt-5,
	.my-5 {
		margin-top:1.5rem !important;
	}
	.mb-5,
	.my-5 {
		margin-bottom:1.5rem !important;
	}
	.btn {
		font-size: 14.5px;
	}
	.btn-3D > div > a {
		font-size:16px;
	}
	a.back {
		font-size:65px;
		line-height:0.5;
		margin-top:-2.5rem; 
		margin-bottom:1.5rem; 
	}
	/*活動內頁-自由填寫重要訊息*/
	.info {
		font-size:15.5px;
	}
}

@media (max-width:991.98px) { /*xs,sm手機,md平板直式*/
	.container {
		max-width:none;
		padding: 0;
	}
}

@media (min-width: 576px) and (max-width: 767.98px) {  /*sm手機橫式*/
  ...
}

@media (min-width: 768px) and (max-width: 991.98px) {  /*md平板直式*/
	body {
		xxxpadding-top:75px; /*同navbar height*/
	}
	h1.title-header {
		font-size:65px;
		margin-bottom:1rem;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {  /*lg平板橫式*/
  ...
}

@media (min-width: 768px) and (max-width: 1199.98px) {  /* md平板直式~lg平板橫式 */
  ...
}

@media (min-width: 992px) {  /*lg平板橫式~xl筆電桌機*/
  ...
}

@media (min-width: 1200px) {  /* xl筆電桌機 */
	.container {
		/*max-width:1140px;*/
		max-width:1120px;
	}
}

@media (min-width: 1600px) {  
	.container {
		max-width:1280px;
	}
	.pt-5,
	.py-5 {
		padding-top:4rem!important;
	}
	.pb-5,
	.py-5 {
		padding-bottom:4rem!important;
	}
}


 /* 橫式-限手機版 */ 
@media only screen and (orientation : landscape) and (max-height:600px) {
  ...
}

