bhouseWeb_static/themes/hugo-lamp/static/css/templates/_section.scss

/* 顏色設定 */
$gray-content-color: #666666; // 次要內容
$link-color: #2980B8; // 超連結

section-style {
	padding: 80px 0;

	.block {
		p {
			// padding-top: 20px;
			line-height:20px;
		}
		img {
			width: 100%;
		}
		.start {
			padding-top: 30px;
		}
	}

	.content {
		padding: 0 30px;

		@media (min-width: 992px) {
			padding: 0 50px;
		}
	}

	.card-text {
		padding-bottom: 5px;
		font-size: 0.8rem;
		color: #666666;
	}

	.sub-title {
		color: #000;
	}
}

.section1 {
	@extend section-style;

	table {
		border-collapse: collapse;
	}

	td {
		border: none;
	}
}

.section2 {
	@extend section-style;

	background-color: #F2F2F2;
}

.section3 {
	@extend section-style;
}

.section4 {
	@extend section-style;
}

.section5 {
	@extend section-style;

	background-color: #ECECEC;

	.card {
		background-color: #ECECEC;
	}
}

.section6 {
	@extend section-style;
	color: $gray-content-color;

	h2 {
		color: #000;
	}
}

.section7 {
	@extend section-style;
	padding: 40px 0;
	margin-bottom: 60px;
	color: $gray-content-color;
	background-color: #F2F2F2;
	
	a {
		color: #000;
		font-weight: 600;
		padding: 0 15px;

		&:hover { 
			color: #78AD42;
			text-decoration:none;
		}
	}
}

.section8 {
	@extend section-style;

	color: $gray-content-color;

	h2 {
		font-weight: 600;
		color: #000;
	}

	p {
		font-size: 0.8rem;
		color: #666666;
	}
}

.section9 {
	@extend section-style;

	color: $gray-content-color;

	h1 {
		font-weight: 600;
		color: #000;
	}

	h2 {
		font-weight: 600;
		color: #000;
	}

	p {
		font-size: 0.8rem;
		color: #666666;
	}

	.title {
		color: #000;
	}
}

.section10 {
	@extend section-style;

	font-weight: 600;

	.l1 {
		font-size: 0.8rem;
		margin-top: 60px;
		color: #B4B4B4;
	}
	
	.l2 {
		font-size: 0.8rem;
		color: #D1C7A8;
	}

	.l3 {
		font-size: 0.8rem;
		color: #A5AA91;
	}
}

.section11 {
	@extend section-style;

	background-color: #ECECEC;
}

.section12 {
	color: $gray-content-color;

	h2 {
		font-weight: 600;
		color: #000;
	}

	.li {
		list-style-type: disc;
		padding-left: 0px;
	}

	a.reservation-link {
		text-decoration: underline;
    }
}

.section13 {
	@extend section-style;

	padding: 0;
}

.section14 {
	@extend section-style;

	padding: 60px;
	height: 200px;

	.title {
		color: #78AD42;
	}
}

.section15 {
	.title {
		color: #78AD42;
	}
}

.section16 {
	@extend section-style;

	h2 {
		color: #78AD42;
	}

	.row {
		margin-bottom: 60px;
	}

	.title {
		color: #78AD42;
	}

	.img-resize {
		padding: 0 2.5rem;
	}
}

.section17 {
	@extend section-style;

	background-color: #F1F1F1;

	h2 {
		color: #78AD42;
	}

	.row {
		margin-bottom: 60px;
	}

	.title {
		color: #78AD42;
	}

	.img-resize {
		padding: 0 2.5rem;
	}
}

.section18 {
	@extend section-style;

	color: #FFF;
	font-weight: 600;

	background-color: #333333;

	a {
		color: #2ABFF4;
		padding: 0 15px;

		text-decoration: underline;

		&:hover { 
			color: #78AD42;	
		}
	}
}

.section19 {
	@extend section-style;

	h2 {
		color: #78AD42;
	}

	.title {
		color: #78AD42;
	}

	.sub-title {
		color: #4D4D4D;
	}

	@media (min-width: 768px) {
		.img-padding {
			padding: 0 330px;
		}
	}
}

.section22 {
	@extend section-style;

	.title {
		color: #78AD42;
	}

	@media (min-width: 768px) {
		.img-padding {
			padding: 0 100px 0 0;
		}
	}
}

.section24 {
	@extend section-style;

	padding: 50px 0;

	.title {
		color: #78AD42;
	}
}

.section25 {
	@extend section-style;

	background-color: #F1F1F1;

	h2 {
		color: #78AD42;
	}

	.title {
		color: #78AD42;
	}

	.sub-title {
		color: #4D4D4D;
	}

	// .signature {
	// 	color: #666666;
	// 	font-size: 1.5rem;
	// 	font-family: "標楷體";
	// }

	@media (min-width: 768px) {
		.img-padding {
			padding: 0px 350px;
		}
	}
}

.section26 {
	@extend section-style;

	background-color: #F1F1F1;

	.title {
		color: #78AD42;
	}

	@media (min-width: 768px) {
		.img-padding {
			padding: 80px 280px;
		}
	}
}

.section27 {
	@extend section-style;

	h2 {
		color: #78AD42;
	}

	.row {
		margin-bottom: 60px;
	}

	.title {
		color: #78AD42;
	}
}

.section28 {
	@extend section-style;

	background-color: #F1F1F1;

	h2 {
		color: #78AD42;
	}

	.row {
		margin-bottom: 60px;
	}

	.step {
		margin-bottom: 20px;
	}

	.title {
		color: #78AD42;
	}
}

.section29 {
	@extend section-style;

	background-color: #F1F1F1;

	.title {
		color: #78AD42;
	}
}

.section30 {
	@extend section-style;

	.title {
		color: #78AD42;
	}
}

.section31 {
	@extend section-style;

	h2 {
		color: #78AD42;
	}

	.title {
		color: #78AD42;
	}

	@media (min-width: 768px) {
		.img-padding {
			padding: 0 200px;
		}
		.img-padding2 {
			padding: 0 330px;
		}
	}
}

.section32 {
	@extend section-style;

	padding: 0 0 80px 0;
	background-color: #F1F1F1;

	h2 {
		color: #78AD42;
	}

	.title {
		color: #78AD42;
	}

	.sub-title {
		color: #4D4D4D;
	}
}

.section33 {
	@extend section-style;

	padding: 0 0 80px 0;

	h2 {
		color: #78AD42;
	}

	.title {
		color: #78AD42;
	}

	.sub-title {
		color: #4D4D4D;
	}
}

.section34 {
	@extend section-style;

	.title {
		color: #78AD42;
	}

	@media (min-width: 768px) {
		.img-padding {
			padding-right: 250px;
			padding-left: 250px;
		}
	}
}

.section35 {
	@extend section-style;

	padding: 0 0 80px 0;

	h2 {
		color: #78AD42;
	}

	.title {
		color: #78AD42;
	}

	.sub-title {
		color: #4D4D4D;
	}

	@media (min-width: 768px) {
		.img-padding {
			padding: 0 150px;
		}
	}
}

.section36 {
	@extend section-style;

	.title {
		color: #78AD42;
	}

	.img-padding2 {
		padding: 0 50px;
	}

	@media (min-width: 768px) {
		.img-padding {
			padding: 0 200px;
		}
		.img-padding2 {
			padding: 0 400px;
		}
	}
}

.section37 {
	@extend section-style;

	padding: 0 0 80px 0;
	background-color: #F1F1F1;

	h2 {
		color: #78AD42;
	}

	.title {
		color: #78AD42;
	}

	.sub-title {
		color: #4D4D4D;
	}

	@media (min-width: 768px) {
		.img-padding {
			padding: 0 150px;
		}
	}
}

.section38 {
	@extend section-style;
	padding: 40px 0;
	margin-bottom: 60px;
	color: $gray-content-color;
	background-color: #F2F2F2;
	
	color: #777777;

	.title {
		color: #000;
		font-weight: 600;
		font-size: 1.3rem;
	}

	.bar {
		font-size: 1.6rem;
	}

	a {
		color: #777777;
		padding: 0 15px;

		&:hover { 
			color: #78AD42;
			text-decoration:none;
		}
	}
}

.section_banner {
	padding-top: 20px;
}

.section39 {
	@extend section-style;
	padding: 40px 0;
	margin-bottom: 60px;
	color: $gray-content-color;
	background-color: #333333;
	
	color: #fff;

	.bar {
		font-size: 1.6rem;
	}

	a {
		color: #fff;
		padding: 0 15px;

		&:hover { 
			color: #78AD42;
			text-decoration:none;
		}
	}
}

.section40 {
	@extend section-style;

	padding: 80px 0;
	background-color: #F1F1F1;

	h2 {
		color: #333333;
		font-weight: 600;
	}

	a {
		color: #2ABCF1;
		font-weight: 600;

		&:hover { 
			color: #78AD42;
			text-decoration:none;
		}
	}

	@media (min-width: 768px) {
		.card {
			padding-right: 100px;
			padding-left: 100px;
		}
		.mx-md-4 {
			margin-right: 1.5rem !important;
			margin-left: 1.5rem !important;
		}
	}
}

.section41 {
	padding: 40px 0;

	table {
		border-collapse: collapse;
	}

	td {
		padding: 40px;
		border: 0px;
		border-bottom: 1px dashed #B3B3B3;
	}

	a {
		color: #000;

		&:hover { 
			color: #78AD42;
			text-decoration:none;
		}
	}
}

.section42 {
	padding: 30px 0;

	table {
		border-collapse: collapse;
	}

	td {
		padding: 40px 40px 40px 0;
		border: 0px;
		border-bottom: 1px dashed #B3B3B3;
	}

	a {
		&:hover { 
			color: #78AD42;
			text-decoration:none;
		}
	}

	.back {
		color: #666666;
	}
}

.section43 {
	@extend section-style;

	color: #FFF;
	background-color:#333333;

	padding: 40px;
	height: 200px;
}

.section44 {
	@extend section-style;
	
	padding: 60px 0;

	color: #4D4D4D;

	h3 {
		font-weight: 600;
	}

	.title {
		color: #78AD42;
	}

	.detail {
		color: #4D4D4D;
		div {
			line-height:40px;
		}
	}

	.card {
		padding: 20px;
		margin-top: 40px;
		border-color: #4D4D4D;
	}

	.description {
		font-size: 1.1rem;
		line-height: 40px;

		@media (min-width: 992px) {
			padding-bottom: 80px;
		}
	}

	.spec {
		font-size: 1.1rem;
		margin-top: 80px;
	}

	.image {
		margin-top: 80px;
	}

	a {
		color: #4D4D4D;

		&:hover { 
			color: #78AD42;
			text-decoration:none;
		}
	}

	.amp-carousel-button-prev {
		display: none;
	}

	.amp-carousel-button-next {
		display: none;
	}

	.carousel-preview > button {
		border-width: 0px;
	}
}

.section45 {
	@extend section-style;
	padding: 40px 0;
	color: $gray-content-color;
	background-color: #333333;
	
	color: #fff;

	.bar {
		font-size: 1.6rem;
	}

	a {
		color: #fff;
		padding: 0 15px;

		&:hover { 
			color: #78AD42;
			text-decoration:none;
		}
	}
}