body {
	/* navbar 高度，不要讓下面的字被擋到，所以要設定 */
	padding-top: 3rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 1000;
}

a:link {
	text-decoration: none;
}

a:hover,
a:active {
	text-decoration: underline;
}

/** HEADER */

.navbar-container-width {
	max-width: 1350px;
}

.bg-gray {
	background-color: #f5f5f5;
}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
	margin-bottom: 1.5rem;
	text-align: center;
}
.marketing h2 {
	font-weight: 1000;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
	margin-right: 0.75rem;
	margin-left: 0.75rem;
}
/* rtl:end:ignore */

/* Featurettes
------------------------- */

.featurette-divider {
	margin: 3rem 0; /* Space out the Bootstrap <hr> more */
	background-color: transparent;
}

/* Thin out the marketing headings */
.featurette-heading {
	line-height: 1;
	/* rtl:remove */
	letter-spacing: -0.05rem;
}

.header-title a {
	width: 55%;
}

h1 {
	font-size: 2.75rem;
}

.bg-header {
	max-width: 521px;
	text-align: center;
}

.bg-suitable-for-you {
	position: relative;
	height: 479px;
	background-size: cover;
	background-repeat: no-repeat;
}

.suitable-info {
	max-width: 490px;
	padding: 64px;
	max-height: 287px;
}

/** FOOTER */

footer h5 {
	padding-left: 0;
	font-weight: 900;
}

footer {
	background-color: #374c67;
}

.footer-container {
	min-height: 365px;
	color: white;
	background: #374c67;
}

.footer-logo {
	width: 160px;
	/* height: 160px; */
}

.footer-ul li {
	padding-top: 15px;
}

/* RESPONSIVE CSS 響應式 CSS
-------------------------------------------------- */

/* screen >= (992px = 62em)  */
@media (min-width: 62em) {
	/* Bump up size of carousel content */
	.featurette-heading {
		/* margin-top: 7rem; */
	}
	h2 {
		font-size: 2.5rem;
	}
}
/* screen <= (1200px) */
@media (max-width: 1200px) {
	.header-title {
		text-align: center;
	}
	.featurette{
		text-align: center;
	}
}

/* screen <= (768px = 48em) */
@media (max-width: 768px) {

	.header-title h1 {
		font-size: 2.5rem; /* 40px */
	}

	/* 平板看會太大*/
	.header-title a {
		width: 90%;
	} 

	.header-title .lead {
		font-size: 1.25rem; /* 20px */
	}

	h2 {
		text-align: center;
		font-size: 1.75rem; /* 28px */
	}

	h4 {
		font-size: 1.25rem; /* 20px */
	}

	h5 {
		padding: 5px;
		font-size: 1rem; /* 16px */
	}

	.lead {
		font-size: 1rem;
		padding-right: 1.5rem !important;
		padding-left: 1.5rem !important;
		text-align: center;
	}

	.lead-center {
		padding-right: 1.5rem !important;
		padding-left: 1.5rem !important;
	}

	.featurette h2 {
		padding-top: 20px;
		padding-top: 20px;
	}
	.featurette-link {
		text-align: center;
	}

	/* image margin top medium dimensions*/
	.img-mt-md {
		margin-top: 30px;
	}

	.featurette-divider {
		margin: 1.25rem 0; /* Space out the Bootstrap <hr> more */
		background-color: transparent;
	}

	.bg-suitable-for-you {
		justify-content: center !important;
		position: "";
		padding: 20px;
		background-size: auto;
	}

	.suitable-info {
		background-color: red;
		align-self: center !important;
		padding: 20px;
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.footer-ul li {
		padding-top: 5px;
		font-size: 0.875rem;
	}
	.footer-logo {
		/* width: 20%; */
	}

	.footer-bottom a {
		font-size: 0.875rem; /* 15px*/
		padding-right: 5px;
	}
	.footer-bottom p {
		font-size: 0.75rem; /* 12px*/
	}
}

/*  screen >= (640px = 40em)  */
@media (min-width: 40em) {
	.featurette-heading {
		padding-top: 1rem;
	}
}

/* screen <= (576px) */
@media (max-width: 576px) { 
	.bg-header {
		max-width: 100%;
		text-align: center;
	}
	img{
		max-width: 100%;
	}
 }