/* Minification failed. Returning unminified contents.
(291,11): run-time error CSS1038: Expected hex color, found '#ffff'
(1104,12): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-top-offset'
(1105,14): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-sides-offset'
(1109,12): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-top-offset'
(1110,13): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-sides-offset'
(1439,14): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-sides-offset'
(1443,13): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-sides-offset'
(1855,13): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-top'
(3070,13): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-top'
(3240,13): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-top-offset'
(3394,14): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-top'
 */
/* Set padding to keep content from hitting the edges */
.body-content {
	padding-left: 15px;
	padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
	white-space: normal;
}

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header,
hgroup, main, nav, section, summary {
	display: block;
}

audio, canvas, video {
	display: inline-block;
}

	audio:not([controls]) {
		display: none;
		height: 0;
	}

[hidden] {
	display: none;
}

body {
	margin: 0;
	overflow-y: auto;
	overflow-x: hidden;
}

main {
	background: #EBF9F9;
}

img {
	border: 0;
	display: block;
	cursor: pointer;
}

button, input, select, textarea {
	margin: 0;
	text-decoration: none;
}

	button, html input[type="button"], input[type="reset"], input[type="submit"] {
		cursor: pointer;
		-webkit-appearance: button;
	}

		button[disabled], html input[disabled] {
			cursor: default;
		}

	input[type="checkbox"],
	input[type="radio"] {
		padding: 0;
		box-sizing: border-box;
	}

	input[type="search"] {
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		-webkit-appearance: textfield;
	}

		input[type="search"]::-webkit-search-cancel-button,
		input[type="search"]::-webkit-search-decoration {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			-webkit-appearance: none;
		}

	input[type="file"] {
		display: block;
	}

	button::-moz-focus-inner, input::-moz-focus-inner {
		padding: 0;
		border: 0;
	}

textarea {
	overflow: auto;
	vertical-align: top;
}

table {
	max-width: 100%;
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

/*----------------------------------Salam Taiwan 穆斯林友善旅遊資訊網----------------------------------*/

body {
	font-family: "Noto Sans CJK TC","Noto Sans TC","Arial";
}

a {
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}

	a:hover, a:active, a:visited {
		text-decoration: none;
		outline: none;
	}

	a:focus {
		color: inherit;
	}

h1, h2, h3, h4, h5, h6 {
	margin: 0px;
	display: inline;
}

ul, ol, li {
	list-style: none;
}

h1 {
	font-size: 2.75em;
	letter-spacing: 0;
	font-weight: bold;
}

h2 {
	font-size: 2.8125em;
	letter-spacing: 0;
	font-weight: 600;
	position: relative;
}

h3 {
	font-size: 1.25em;
	font-weight: 600;
	letter-spacing: 0;
}

h4 {
	font-size: 1.125em;
	font-weight: normal;
	letter-spacing: 0;
}

h5 {
	font-size: 1em;
	font-weight: normal;
	letter-spacing: 0;
	line-height: 1.7;
}

h6 {
	font-size: 0.875em;
	letter-spacing: 0;
	font-weight: normal;
}

/*------------Layout︱Layout︱Layout------------*/

.wrap {
	max-width: 1400px;
	margin: 0 auto;
	position: relative;
	box-sizing: border-box;
	text-align: center;
	z-index: 2;
}

.line-light {
	height: 20px;
	width: 1px;
	background-color: #FFF;
	display: block;
}

.line-dark {
	height: 20px;
	width: 1px;
	background-color: #3A435C;
	display: block;
}
/*------------a11y setting︱a11y setting︱a11y setting------------*/
a:focus, .a11y_focus:focus, input[type="radio"]:focus,
input[type="text"]:focus,
input[type="date"]:focus,
select:focus, textarea:focus,
button:focus, .card:focus {
	outline: 3px dashed #c82b23 !important;
}

.gotoContent {
	font-size: 0rem;
	font-weight: 500;
	color: #fff;
	background: #c9420d;
	padding: 0;
	outline: 0px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 889;
}

	.gotoContent:focus {
		font-size: 0.875rem;
		padding: 6px 12px;
	}

#AU, #AC, #AZ {
	font-size: 1rem;
	color: #707070;
}
/*------------Component︱Component︱Component------------*/

/*----------gotop----------*/
#gotop {
	font-size: 1.25em;
	font-weight: 800;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	right: 4%;
	bottom: 10%;
	color: #F4BE47;
	background: #FFF;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	border: 3px solid #F4BE47;
	z-index: 888;
}

	#gotop:hover {
		color: #28A2A0;
		border: 3px solid #28A2A0;
	}
/*----------pager----------*/
.wrap.pager {
	padding: 60px 0 120px;
	display: block;
	width: 100%;
	border-top: 1px solid #D9D9D9;
}

.pager ul {
	display: flex;
	justify-content: center;
	width: 330px;
	margin: 0 auto;
	list-style: none;
	padding: 0;
}

.pager li {
	margin: 0 10px;
}

	.pager li a {
		color: #707070;
		font-size: 1rem;
		background: #fff;
		border-radius: 10px;
		padding: 4px 10px;
		text-align: center;
		transition: 0.3s ease-in-out;
	}

		.pager li a:hover,
		.pager li .active {
			color: #ffff;
			background: #28A2A0;
		}

.pager .more::before {
	content: "...";
	font-size: 1rem;
	font-weight: 600;
	color: #707070;
}
/*----------card----------*/
.card-group {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 30px;
	padding: 0;
	margin: 48px 0 0;
}

.card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-content {
	text-align: left;
}

	.card-content h3 {
		display: block;
		font-size: 1.25rem;
		font-weight: 600;
		margin-bottom: 10px;
		color: #fff;
		text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.16);
	}

	.card-content .location {
		font-size: 1.125rem;
		font-weight: 400;
		display: block;
		color: #fff;
		text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.16);
	}

		.card-content .location::before {
			content: "";
			background: url(../Images/Icon/icon_location_w.svg) no-repeat;
			background-size: contain;
			display: inline-block;
			width: 13px;
			height: 18px;
			margin-right: 4px;
		}

/*breadcrumb*/
.breadcrumb ol {
	display: flex;
	justify-content: start;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

.breadcrumb a:hover {
	color: #63C7F2;
}

.breadcrumb ol li a {
	padding: 0 4px;
	font-size: 1em;
	letter-spacing: 0px;
	color: #707070;
}

	.breadcrumb ol li a:hover {
		color: #F4BE47;
	}

.breadcrumb ol li:last-child {
	color: #28A2A0;
}

.breadcrumb ol li a,
.breadcrumb ol li {
	padding-right: 4px;
	text-align: left;
}

.wrap .breadcrumb ol li {
	display: flex;
	align-items: center;
}

.Arrow_scroll {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translate(-50%, -50%);
}

.breadcrumb_home {
	position: relative;
}

	.breadcrumb_home::before {
		content: "";
		background: url(../Images/Icon/icon_home.svg) no-repeat;
		background-size: contain;
		display: inline-block;
		width: 11px;
		height: 21px;
		margin-right: 6px;
	}

.Arrow_circle {
	display: block;
	position: relative;
	border: 2px solid #FFF;
	border-radius: 46px;
	width: 46px;
	height: 46px;
	background: rgba(255,255,255,0) url(../Images/Icon/Arrow_down_white.svg) no-repeat 20px center;
	transition: all 0.1s ease-in-out;
	cursor: pointer;
}

	.Arrow_circle:hover {
		background: rgba(255,255,255,1) url(../Images/Icon/Arrow_down_blue.svg) no-repeat 20px center;
		box-shadow: 0 0px 8px rgba(70,70,70,0.5);
		animation: UpDown 1s ease-in-out infinite;
	}
/*btn*/
.btn button {
	padding: 8px 19px;
	font-size: 1rem;
	margin: 0 auto;
	display: flex;
	background: #28A2A0;
	color: #fff;
	font-weight: 400;
	border: 0px;
	border-radius: 50px;
	cursor: pointer;
	transition: 0.2s ease-in-out;
}

	.btn button:hover {
		background: #F4BE47;
		color: #fff;
	}

/*------------Header︱Header︱Header------------*/

header {
	width: 100%;
	z-index: 890;
	overflow: hidden;
	position: relative;
	padding-bottom: 14.687%;
}

.header {
	height: 97px;
	width: 100%;
	position: relative;
	background-color: #fff;
}

.menu-deco {
	background: url(../Images/deco.svg) no-repeat center center;
	background-size: contain;
	width: 102%;
	height: 65.60%;
	position: absolute;
	top: 17%;
	left: -3px;
}

.menu_wrap {
	max-width: 1800px;
	padding-left: 160px;
	padding-top: 24px;
	margin: 0 auto;
}

.menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 1%;
}

	.menu .logo {
		background: url(../Images/Logo/logo.svg) no-repeat center center;
		background-size: contain;
		position: absolute;
		top: 24.57%;
		left: 1.8%;
		cursor: pointer;
		width: 8.5%;
		height: 100%;
		z-index: 9997;
	}

		.menu .logo img {
			width: 100%;
		}

	.menu ul {
		display: flex;
		list-style: none;
		padding: 0;
		margin: 0;
		z-index: 999;
	}

	.menu > ul li {
		position: relative;
		display: flex;
		align-items: center;
		word-break: keep-all;
	}

		.menu > ul li a {
			padding: 8px 12px;
			transition: all 0.2s ease-in-out;
			font-size: 1.25em;
			letter-spacing: 0;
		}

			.menu > ul li a::before {
				content: "";
				background: url(../Images/Icon/srtar_y.svg) no-repeat;
				background-size: contain;
				display: inline-block;
				width: 24px;
				height: 24px;
				margin-right: 4px;
			}

		.menu > ul li:first-child a::before {
			display: none;
		}

		.menu > ul li a:hover {
			color: #F4BE47;
		}

	.menu .font_zoomer {
		margin: 0 14px;
	}

.font_zoomer li {
	color: #fff;
	margin: 0 4px;
}

	.font_zoomer li a {
		padding: 0px 6px;
		border-radius: 50px;
	}

.font_zoomer .active a,
.font_zoomer a:hover {
	background: #fff;
	color: #28A2A0;
}

.menu-burger {
	display: none;
}

.menu-btn {
	position: relative;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	top: 0px;
	right: 0px;
	height: 52px;
	cursor: pointer;
	z-index: 9997;
	border-radius: 50px;
	background-color: #28A2A0;
	padding: 0 4px;
}

	.menu-btn a {
		padding: 12px 16px;
		color: #FFF;
		font-size: 1em;
		line-height: 1em;
		letter-spacing: 0;
	}
/*		.share a::before {
			content: "";
			background: url(../Images/Icon/menu_share.svg) no-repeat center center;
			display: inline-block;
			top: 50%;
			width: 19px;
			height: 21px;
			margin-right: 8px;
			position: relative;
			transform: translateY(10%);
		}
		.menu-btn .share .dropdown a {
			padding: 12px 20px;
		}*/
.language a::before {
	content: "";
	background: url(../Images/Icon/menu_language.svg) no-repeat center center;
	display: inline-block;
	top: 50%;
	width: 23px;
	height: 23px;
	margin-right: 8px;
	position: relative;
	transform: translateY(10%);
}

.dropdown a::before {
	transform: translateY(-35%);
}

.language:hover .dropdown {
	display: flex;
	/*height: 137px;*/
	height: 90px;
	padding-top: 36px;
	top: 5px;
	z-index: -1;
}
/*.share:hover .dropdown {
			display: flex;
			width: 115px;
			height: 96.5px;
		}*/
.dropdown {
	display: none;
	flex-direction: column;
	position: absolute;
	background-color: rgba(40, 162, 160, 0.8);
	width: 140px;
	height: 0px;
	margin-top: 12px;
	border-radius: 0px 10px 10px 10px;
	overflow: hidden;
}

	.dropdown a {
		/*text-align: center;*/
	}

		.dropdown a:hover {
			background-color: rgba(48, 201, 199, 0.8);
		}



/*------------Footer︱Footer︱Footer------------*/

footer {
	padding: 0 0 5% 0;
	position: relative;
	background-color: #FFFFFF;
	z-index: 1;
	padding-top: 3%;
}

	footer p {
		font-size: 1em;
		color: #707070;
	}

.menu-deco.footer {
	transform: rotate(180deg);
	width: 100%;
	height: 100%;
	top: -82%;
}
/*.footer-header {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
	}
.info-group {
	width: 81%;
	display: flex;
	justify-content: start;
	align-items: center;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
}
	.info-group li {
		display: flex;
		justify-content: start;
		align-items: center;
		flex-wrap: nowrap;
		margin-right: 36px;
	}
		.info-group li p {
			margin-right: 8px;
		}
.footer-connect {
	display: flex;
	justify-content: end;
	align-items: center;
}
	.footer-connect .connect-link {
		padding: 10px 0;
		margin: 0 10px;
	}
		.footer-connect .connect-link a {
			font-size: 1em;
			letter-spacing: 0.8px;
			color: #FFF;
			padding: 10px;
			position: relative;
			background-color: #28A2A0;
			border-radius: 4px;
			width: 104px;
			display: block;
		}
		.footer-connect .connect-link span {
			content: "";
			background: url(../Images/Icon/footer_line_primary.svg) no-repeat center center;
			display: inline-block;
			width: 19px;
			height: 19px;
			position: relative;
			margin-left: 4px;
			transform: translateY(20%);
		}
		.footer-connect .connect-link.secondary {
			margin: 0;
		}
			.footer-connect .connect-link.secondary a {
				background-color: #06B4BF;
			}
			.footer-connect .connect-link a:hover {
				background-color: #63C7F2;
			}
		.footer-connect .connect-link.secondary span {
			content: "";
			background: url(../Images/Icon/footer_line_secondary.svg) no-repeat center center;
			display: inline-block;
			width: 19px;
			height: 19px;
			position: relative;
			margin-left: 4px;
			transform: translateY(20%);
		}*/
.footer-info {
	max-width: 926px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
}

.footer_logo {
	width: 200px;
	height: 81px;
	display: block;
}

	.footer_logo img {
		object-fit: contain;
		width: 100%;
		height: 81px;
	}

.copyright {
	width: 71.27%;
	margin: 0 0 0 2%;
}
/*------------Index︱Index︱Index------------*/
main {
	position: relative;
	width: 100%;
	height: 100%;
}

.banner {
	position: relative;
	top: -152px;
	width: 100%;
	height: 840px;
	margin-top: -6.5%;
}

.banner-inner .banner-video {
	width: 100%;
	height: 950px;
	object-fit: cover;
	object-position: center;
	filter: brightness(0.9);
}

.banner-inner img {
	width: 100%;
	height: 840px;
	object-fit: cover;
	object-position: center;
	filter: brightness(0.9);
}

/*.banner-inner .banner-title {
		font-size: 1.625em;
		letter-spacing: 5.2px;
		color: #28A2A0;
		padding: 10px 0;
		position: absolute;
		background-color: #FFF;
		border-radius: 50px;
		text-align: center;
		top: 556px;
		left: 50%;
		transform: translateX(-50%);
		width: 209px;
		filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
		margin: 0;
	}
		.banner .banner-title::before {
			content: "";
			display: block;
			width: 587px;
			height: 1px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%);
			background-color: #FFF;
			z-index: -1;
		}*/

.banner-logo {
	position: absolute;
	top: 400px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 800;
	filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
	margin: 0 auto;
}

	.banner-logo .logo-container {
		width: 100%;
		height: 100%;
	}

		.banner-logo .logo-container img {
			width: 100%;
			height: 100%;
		}

	.banner-logo h1 {
		font-size: 0;
	}

	.banner-logo p {
		display: inline-flex;
		font-size: 36px;
		word-break: keep-all;
		color: #fff;
		font-weight: 600;
		text-align: center;
		padding: 20px;
		border: 1px solid;
		align-items: center;
		background: #ffffff40;
	}

.swiper-pagination {
	top: 789px !important;
}

	.swiper-pagination .swiper-pagination-bullet {
		width: 14px;
		height: 14px;
		background-color: #FFF;
		opacity: 1 !important;
		margin: 0 7px !important;
	}

	.swiper-pagination .swiper-pagination-bullet-active {
		background-color: #28A2A0;
		opacity: 1 !important;
	}

.menu-group {
	max-width: 940px;
	margin: 72px auto 64px;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-column-gap: 60px;
	padding: 0;
}

	.menu-group li a {
		font-size: 1.25rem;
		color: #707070;
		position: relative;
		display: block;
		text-align: center;
		white-space: pre;
	}

		.menu-group li a:hover {
			color: #F4BE47;
		}

	.menu-group a::before {
		content: "";
		display: block;
		width: 120px;
		height: 120px;
		position: absolute;
		top: -148px;
		left: 50%;
		transform: translateX(-50%);
	}

	.menu-group .menu-item_1::before {
		background: url(../Images/Icon/m_01.png) no-repeat center center;
		background-size: contain;
	}

	.menu-group .menu-item_2::before {
		background: url(../Images/Icon/m_02.png) no-repeat center center;
		background-size: contain;
	}

	.menu-group .menu-item_3::before {
		background: url(../Images/Icon/m_03.png) no-repeat center center;
		background-size: contain;
	}

	.menu-group .menu-item_4::before {
		background: url(../Images/Icon/m_04.png) no-repeat center center;
		background-size: contain;
	}

	.menu-group .menu-item_5::before {
		background: url(../Images/Icon/m_05.png) no-repeat center center;
		background-size: contain;
	}

	.menu-group .menu-item_6::before {
		background: url(../Images/Icon/m_06.png) no-repeat center center;
		background-size: contain;
	}


.section-attraction {
	position: relative;
	width: 100%;
	z-index: 1;
	margin: 20px auto 120px;
}

.wrap_header {
	display: flex;
	justify-content: space-between;
	align-items: end;
	color: #28A2A0;
	position: relative;
}

	.wrap_header h2 {
		font-size: 3.75rem;
		font-weight: 600;
		text-align: left;
		color: #28A2A0;
		width: 28%;
	}

	.wrap_header span {
		display: block;
		width: 70%;
		border-bottom: 2px dashed #1EB9B8;
		margin: 0 16px 10px;
	}

	.wrap_header a {
		width: 9%;
		font-size: 1.125rem;
	}

		.wrap_header a::after {
			content: "";
			background: url(../Images/Icon/icon_more_b.svg) no-repeat;
			display: inline-block;
			width: 15px;
			height: 15px;
			margin-left: 8px;
		}
/*---------熱門景點---------*/
.card-group.top .card-img {
	height: 347px;
	border-radius: 10px 200px 10px 10px;
	overflow: hidden;
}

	.card-group.top .card-img img {
		height: 347px;
	}

.card-group.top .card::before {
	content: "";
	background: url(../Images/Icon/card_deco.svg) no-repeat;
	background-size: contain;
	display: block;
	width: 134px;
	height: 307px;
	position: absolute;
	top: 26px;
	right: 0;
	z-index: -1;
}

.card-group.top .card::after {
	content: "";
	background: url(../Images/Icon/star_w.svg) no-repeat;
	background-size: contain;
	display: block;
	width: 56px;
	height: 57px;
	position: absolute;
	top: 55px;
	right: 11px;
}

.card-group.top .card.first::before {
	top: 60px;
}

.card-group.top .card.first::after {
	top: 89px;
}

.card-group.top .card.first {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
}

	.card-group.top .card.first h3 {
		font-size: 1.5rem;
	}

	.card-group.top .card.first .location {
		font-size: 1.25rem;
	}

	.card-group.top .card.first .card-img {
		height: 725px;
		border-radius: 10px 250px 10px 10px;
		overflow: hidden;
	}

		.card-group.top .card.first .card-img img {
			height: 725px;
		}

.card-group.top .card {
	position: relative;
}

.card-group.top .card-content {
	position: absolute;
	bottom: 15px;
	left: 15px;
}
/*---------清真美食---------*/
.section-food {
	background: #28A2A0;
	padding: 120px 0 287px;
}

	.section-food .wrap_header h2,
	.section-food .wrap_header .dash,
	.section-food .wrap_header a {
		color: #fff;
	}

		.section-food .wrap_header a::after {
			background: url(../Images/Icon/icon_more_w.svg) no-repeat;
		}

.cardSwiper {
	width: 100%;
	height: auto;
	margin: 48px 0 0;
	padding-bottom: 120px;
}

.swiper-slide {
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.cardSwiper .swiper-button-next {
	top: var(--swiper-navigation-top-offset, 96%);
	right: var(--swiper-navigation-sides-offset, 5%);
}

.cardSwiper .swiper-button-prev {
	top: var(--swiper-navigation-top-offset, 96%);
	left: var(--swiper-navigation-sides-offset, 5%);
}

.swiper-slide .swiper-img {
	display: block;
	width: 216px;
	height: 216px;
	border-radius: 100px;
	overflow: hidden;
	margin: 0 auto;
}

	.swiper-slide .swiper-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

.swiper-content h3 {
	color: #fff;
	display: block;
	margin: 12px 0;
}

.swiper-content .location {
	color: #F4BE47;
	padding: 2px 0;
	background: #fff;
	border-radius: 50px;
	display: block;
	width: 120px;
	margin: 0 auto;
}

	.swiper-content .location::before {
		content: "";
		background: url(../Images/Icon/icon_location_y.svg) no-repeat center center;
		background-size: contain;
		width: 20px;
		height: 20px;
		display: inline-block;
		position: relative;
		top: 3px;
		margin-right: 4px;
	}
/*---------清真旅館---------*/
.section-hotel {
	padding: 0 0 120px;
	position: relative;
	background: #fff;
}

	.section-hotel::before {
		content: "";
		display: block;
		width: 100%;
		height: 400px;
		border-radius: 200px 200px 0 0;
		background: #fff;
		position: absolute;
		top: -178px;
	}

	.section-hotel::after {
		content: "";
		background: url(../Images/Icon/hotel_deco.svg) no-repeat;
		display: block;
		width: 130px;
		height: 130px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -242px;
		z-index: 2;
	}

.card-group.hotel {
	margin-top: 76px;
}

	.card-group.hotel .card {
		position: relative;
	}

		.card-group.hotel .card::before {
			content: "";
			background: url(../Images/Icon/srtar_y.svg) no-repeat;
			background-size: contain;
			display: block;
			width: 66px;
			height: 66px;
			position: absolute;
			top: -33px;
			left: 50%;
			transform: translateX(-50%);
			z-index: -1;
		}

	.card-group.hotel .card-img {
		height: 552px;
		border-radius: 200px 200px 10px 10px;
		overflow: hidden;
		border: 6px solid #f4be47;
	}

	.card-group.hotel h3, .card-group.hotel .location {
		color: #000;
		text-align: center;
		text-shadow: 0px 0px 0px;
		margin: 20px 0 0;
	}

	.card-group.hotel .card-content {
		position: relative;
	}

	.card-group.hotel h3::after {
		content: "";
		display: block;
		width: 100px;
		height: 3px;
		border-radius: 50px;
		background: #F4BE47;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 20px;
	}

	.card-group.hotel .location {
		color: #707070;
	}

	.card-group.hotel .card-content .location::before {
		background: url(../Images/Icon/icon_location_y.svg) no-repeat;
		background-size: contain;
	}
/*---------campaign---------*/
.section-campaign {
	display: block;
	padding-bottom: 120px;
	background: #fff;
}

.campaign-bn-mb {
	display: none;
}

.campaign-bn {
	width: 100%;
	height: 285px;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

	.campaign-bn img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
/*---------清真商店---------*/
.section-shop {
	padding-bottom: 120px;
	background: #fff;
}

.card-group.shop {
	/*grid-auto-flow: row;
	direction: rtl;*/
	grid-template-columns: 1fr 1fr 1fr 1fr;
	margin: 84px 0 0;
}
	/*.card-group.shop .card.first {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
		position: relative;
	}*/
	.card-group.shop .card {
		position: relative;
	}

		.card-group.shop .card:nth-child(2n-1)::before {
			content: "";
			background: url(../Images/Icon/shop_deco.svg) no-repeat;
			background-size: contain;
			display: block;
			width: 180px;
			height: 55px;
			position: absolute;
			top: -50px;
			left: 50%;
			transform: translateX(-50%);
		}

	.card-group.shop .card-img {
		height: 321px;
		border: 6px solid #28A2A0;
		border-radius: 20px;
		overflow: hidden;
	}

		.card-group.shop .card-img img {
			height: 321px;
		}

	/*.card-group.shop .card.first .card-img {
			height: 761px;
		}
			.card-group.shop .card.first .card-img img {
				grid-column: 1 / 2;
				grid-row: 1 / 3;
				height: 761px;
			}*/
	.card-group.shop h3, .card-group.shop .location {
		color: #000;
		text-shadow: 0 0 0;
	}

	.card-group.shop h3 {
		margin: 10px 0;
		position: relative;
	}

		.card-group.shop h3::before {
			content: "";
			background: url(../Images/Icon//icon-shopping-car.svg) no-repeat;
			background-size: contain;
			display: inline-block;
			width: 24px;
			height: 23px;
			margin-right: 8px;
		}

	.card-group.shop .location {
		color: #707070;
	}

	.card-group.shop .card-content .location::before {
		content: "";
		background: url(../Images/Icon/icon_location_y.svg) no-repeat;
		background-size: contain;
		display: inline-block;
		width: 13px;
		height: 18px;
		margin: 0 10px;
	}

/*---------清真清真寺---------*/
.section-mosque {
	padding: 120px 0 60px;
	background: url(../Images/musque_bg.png) no-repeat center bottom;
	background-size: contain;
	background-color: #F4BE47;
	width: 100%;
}

	.section-mosque .wrap_header h2,
	.section-mosque .wrap_header a {
		color: #fff;
	}

		.section-mosque .wrap_header a::after {
			background: url(../Images/Icon/icon_more_w.svg) no-repeat;
		}

	.section-mosque .wrap_header span {
		border-bottom: 2px dashed #fff;
	}

.card-group.mosque {
	grid-template-columns: 1fr 1fr;
	margin: 48px 0 0;
}

	.card-group.mosque .card-img {
		height: 357px;
		border: 2px solid #FFFFFF;
		border-radius: 60px;
		overflow: hidden;
	}

		.card-group.mosque .card-img img {
			height: 357px;
		}

	.card-group.mosque .card {
		position: relative;
	}

	.card-group.mosque .card-content {
		position: absolute;
		bottom: 24px;
		left: 32px;
	}
/*---------清真祈禱室---------*/
.wrap.prayer {
	padding: 60px 0 120px;
}
/*---------友站連結---------*/
.linksdSwiper {
	width: 59%;
	height: auto;
	margin: 0 auto;
	z-index: 111;
	padding: 0 48px;
}
	/*.linksdSwiper .swiper-slide {
		width: auto;
	}*/
	.linksdSwiper .swiper-img {
		width: 100%;
		height: 73px;
		border-radius: 0;
	}

		.linksdSwiper .swiper-img img {
			width: 100%;
			height: 73px;
			object-fit: contain;
		}

.swiper-button-prev:after,
.swiper-button-next:after {
	color: #fff;
	font-size: 1.875rem;
}

.linksdSwiper .swiper-button-next {
	right: var(--swiper-navigation-sides-offset, -5px);
}

.linksdSwiper .swiper-button-prev {
	left: var(--swiper-navigation-sides-offset, -5px);
}
/*---------Page layout---------*/
.banner.page {
	height: 736px;
}

	.banner.page img {
		width: 100%;
		height: 736px;
		object-fit: cover;
	}

.page-header {
	background: rgba(244, 190, 71, 0.74);
	padding: 24px 0 84px;
	width: 100%;
	position: absolute;
	top: 346px;
}

	.page-header .wrap {
		max-width: 1160px;
		margin: 0 auto;
		padding: 0 30px;
	}

		.page-header .wrap a,
		.page-header .wrap li,
		.page-header .wrap li:last-child,
		.page-header .wrap h2 {
			color: #fff;
			text-align: left;
			text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.16);
		}

		.page-header .wrap h2 {
			display: block;
			margin: 36px 0 24px;
		}

.section-content {
	position: relative;
	width: 100%;
	padding: 0 0 120px 0;
}
/*---------Page 友善場域特搜---------*/
.explore .page-header {
	top: 267px;
}

.section-content.explore {
	padding: 0 0 60px 0;
}

.search-group {
	width: 100%;
	padding: 20px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.16);
}

.select-group {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 12px;
}

	.select-group select {
		width: 100%;
		border: 0px;
		margin-bottom: 12px;
		font-family: "Noto Sans TC";
		font-weight: 400;
		font-size: 1rem;
		letter-spacing: 0;
		padding: 0 8px;
		height: 44px;
		outline: none;
		box-sizing: border-box;
		border-radius: 5px;
		color: #707070;
		background: #D9D9D9;
	}

		.select-group select option {
			background: #fff;
			color: #707070;
		}

.search {
	display: flex;
	justify-content: space-between;
}

	.search input {
		width: 86.5%;
		border: 1px solid #D9D9D9;
		font-family: "Noto Sans TC";
		font-weight: 400;
		font-size: 1rem;
		letter-spacing: 0;
		padding-left: 8px;
		height: 44px;
		outline: none;
		box-sizing: border-box;
		border-radius: 5px;
		color: #3E3E3E;
	}

.search-btn {
	width: 12.5%;
	border: 0;
	border-radius: 5px;
	background: #28A2A0;
	position: relative;
}

	.search-btn:hover {
		background: #39C4C1;
	}

	.search-btn::after {
		content: "";
		background: url(../Images/Icon/icon_search.svg) no-repeat;
		background-size: contain;
		display: block;
		position: absolute;
		width: 27px;
		height: 25px;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

.card-group.explore {
	grid-gap: 40px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

	.card-group.explore .card {
		position: relative;
	}

.label {
	background: url(../Images/Icon/label_top.svg) no-repeat;
	background-size: contain;
	display: block;
	width: 80px;
	height: 80px;
	border-radius: 200px;
	border: 10px solid #EBF9F9;
	position: absolute;
	top: -18px;
	left: -18px;
}

	.label.Attraction {
		background: url(../Images/Icon/label_top.svg) no-repeat;
		background-size: contain;
		display: block;
		width: 80px;
		height: 80px;
		border-radius: 200px;
		border: 10px solid #EBF9F9;
		position: absolute;
		top: -18px;
		left: -18px;
	}

	.label.Food {
		background: url(../Images/Icon/label_food.svg) no-repeat;
		background-size: contain;
		display: block;
		width: 80px;
		height: 80px;
		border-radius: 200px;
		border: 10px solid #EBF9F9;
		position: absolute;
		top: -18px;
		left: -18px;
	}

	.label.Hotel {
		background: url(../Images/Icon/label_hotel.svg) no-repeat;
		background-size: contain;
		display: block;
		width: 80px;
		height: 80px;
		border-radius: 200px;
		border: 10px solid #EBF9F9;
		position: absolute;
		top: -18px;
		left: -18px;
	}

	.label.Shop {
		background: url(../Images/Icon/label_shop.svg) no-repeat;
		background-size: contain;
		display: block;
		width: 80px;
		height: 80px;
		border-radius: 200px;
		border: 10px solid #EBF9F9;
		position: absolute;
		top: -18px;
		left: -18px;
	}

	.label.Mosque {
		background: url(../Images/Icon/label_mosque.svg) no-repeat;
		background-size: contain;
		display: block;
		width: 80px;
		height: 80px;
		border-radius: 200px;
		border: 10px solid #EBF9F9;
		position: absolute;
		top: -18px;
		left: -18px;
	}

	.label.PrayerRoom {
		background: url(../Images/Icon/label_prayer.svg) no-repeat;
		background-size: contain;
		display: block;
		width: 80px;
		height: 80px;
		border-radius: 200px;
		border: 10px solid #EBF9F9;
		position: absolute;
		top: -18px;
		left: -18px;
	}

.hala {
	height: 32px;
	border-radius: 50px;
	border: 2px solid #EBF9F9;
	background: #9A9A9A;
	font-size: 1rem;
	color: #fff;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2px 24px;
	white-space: pre;
	word-break: keep-all;
}

.card-group.explore .card:hover .hala {
	background: #F4BE47;
}

.card-group.explore .card-img {
	height: 317px;
	border-radius: 10px 10px 100px 100px;
	overflow: hidden;
	margin-bottom: 24px;
}

.card-group.explore .card-img {
	height: 317px;
}

.card-group.explore h3 {
	color: #000;
	margin-bottom: 8px;
	text-align: center;
	display: block;
	text-shadow: 0 0 0;
}

.card-group.explore .location {
	color: #707070;
	text-align: center;
	display: block;
	text-shadow: 0 0 0;
}

	.card-group.explore .location::before {
		content: "";
		background: url(../Images/Icon/icon_location_g.svg) no-repeat;
		background-size: contain;
	}
/*---------Page 友善場域特搜-內頁---------*/
.wrap.detail {
	margin-top: -276px;
	z-index: 1000;
	padding: 150px 30px 60px;
}

.detail #AC {
	font-size: 1rem;
	color: #707070;
	text-align: left;
	display: block;
	margin-bottom: 12px;
}

.detail .breadcrumb_home::before {
	background: url(../Images/Icon/icon_home_g.svg) no-repeat;
	background-size: contain;
}

.section-content.detail {
	background: url(../Images/content_news_bg.png) repeat bottom left;
	background-repeat: repeat-x;
	background-size: contain;
	width: 100%;
}

.content-header {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: 15px;
}

	.content-header ul {
		width: 22%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0;
		justify-content: end;
	}

		.content-header ul li {
			margin-left: 8px;
		}

.content-share {
	display: block;
	width: 36px;
	height: 36px;
}

	.content-share img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

.content-copy {
	font-size: 1rem;
	color: #fff;
	background: #28A2A0;
	padding: 4px 12px;
	height: 36px;
	border-radius: 5px;
	display: block;
}

	.content-copy::before {
		content: "";
		background: url(../Images/Icon/icon-link.svg) no-repeat;
		background-size: contain;
		display: inline-block;
		width: 19px;
		height: 19px;
		margin-right: 8px;
	}

.detail h2 {
	display: block;
	width: 100%;
	text-align: left;
	margin-right: 12px;
}

	.detail h2::before {
		content: "";
		background: url(../Images/Icon/srtar_y.svg) no-repeat;
		background-size: contain;
		display: inline-block;
		width: 55px;
		height: 55px;
		margin-right: 4px;
	}

.content-main {
	display: block;
	width: 100%;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 10px #00000029;
	padding: 40px;
}

.main-header {
	display: flex;
	justify-content: space-between;
	align-items: start;
	margin-bottom: 30px;
}

.mail-img {
	width: 36.5%;
	height: 460px;
	border-radius: 10px;
	overflow: hidden;
	margin-right: 2.75%;
}

	.mail-img .swiper-pagination {
		position: relative;
		top: var(--swiper-pagination-top, -8%) !important;
	}

	.mail-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

.mail-info {
	width: 60%;
}

	.mail-info li {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 10px;
		margin-bottom: 10px;
		border-bottom: 1px solid #F4BE47;
	}

		.mail-info li:last-child {
			border-bottom: 0px solid #F4BE47;
			padding-bottom: 0px;
			margin-bottom: 0px;
		}

		.mail-info li span {
			font-size: 1.25rem;
			color: #707070;
			width: 16%;
			display: block;
			margin-right: 8%;
			text-align: left;
		}

		.mail-info li p,
		.mail-info li a {
			font-size: 1.25rem;
			color: #000;
			font-weight: 600;
			line-height: 1.75;
			text-align: left;
			width: 78%;
			margin: 0;
		}

		.mail-info li a {
			color: #28A2A0;
			word-break: break-all;
		}

			.mail-info li a:hover {
				color: #F4BE47;
			}

.map-header {
	display: block;
	width: 100%;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #F4BE47;
}

.map-links {
	width: 30%;
	display: flex;
	justify-content: end;
	align-items: center;
	margin: 0 0 0 auto;
}

	.map-links a {
		font-size: 1rem;
		color: #707070;
		padding: 4px 12px;
		height: 36px;
		border-radius: 5px;
		display: block;
		margin-left: 8px;
	}

	.map-links .google {
		border: 1px solid #707070;
		background: #fff;
	}

		.map-links .google::before {
			content: "";
			background: url(../Images/Icon/icon-googlemap.svg) no-repeat;
			background-size: contain;
			display: inline-block;
			width: 12px;
			height: 17px;
			margin-right: 8px;
		}

	.map-links .halamap {
		color: #fff;
		background: #813C91;
	}

		.map-links .halamap::before {
			content: "";
			background: url(../Images/Icon/icon-halamap.svg) no-repeat;
			background-size: contain;
			display: inline-block;
			width: 17px;
			height: 15px;
			margin-right: 8px;
		}

.map-containter {
	width: 100%;
	height: 600px;
	display: block;
	border-radius: 10px;
	overflow: hidden;
	padding: 12px 0 36px;
}

	.map-containter iframe {
		width: 100%;
	}
/*--Page 推薦友善場域--*/
.banner.form {
	height: 623px;
}

.form .page-header {
	background: rgba(40, 162, 160, 0.74);
}

.banner.page img {
	height: 660px;
}

.form .wrap {
	max-width: 1100px;
	padding: 0 3%;
}

	.form .wrap > p {
		font-size: 1.25rem;
		text-align: left;
		margin: 24px;
	}

.form_box {
	display: block;
	width: 100%;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 10px #00000029;
	padding: 5%;
}

.form input[type=text] {
	height: 34px;
	width: 100%;
	border-radius: 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #DDD;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1) inset;
	outline: none;
	padding: 8px;
	font-family: "Noto Sans TC";
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0;
	box-sizing: border-box;
	margin: 8px 0;
	color: #3E3E3E;
}

.form select {
	width: 100%;
	border: 1px solid #DDD;
	font-family: "Noto Sans TC";
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1) inset;
	outline: none;
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: 0;
	padding-left: 8px;
	height: 34px;
	outline: none;
	box-sizing: border-box;
	border-radius: 5px;
	color: #707070;
	margin: 8px 0;
}

.form textarea {
	border: 1px solid #DDD;
	border-radius: 5px;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1) inset;
	outline: none;
	padding: 8px 12px;
	font-family: "Noto Sans TC";
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0;
	box-sizing: border-box;
	width: 100%;
	resize: none;
	height: 220px;
	line-height: 1.5;
	text-align: left;
	margin: 8px 0;
}

.form .send input {
	font-size: 1rem;
	width: 100%;
	padding: 12px 40%;
	color: #fff;
	background: #28A2A0;
	font-weight: 600;
	border: 0px solid #fff;
	border-radius: 5px;
	z-index: 990;
	position: relative;
}

	.form .send input:hover {
		background: #F4BE47;
	}

.form .form-label {
	text-align: left;
	display: block;
	color: #707070;
}

.field-validation-error {
	display: block;
	width: 100%;
	text-align: right;
	color: #c82b23;
}
/*--Page 觀光地圖--*/
.guide .page-header {
	background: rgba(165, 146, 210, 0.75);
}

.malal-btn {
	max-width: 940px;
	margin: 72px auto 64px;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-column-gap: 60px;
	padding: 0;
}

	.malal-btn li button {
		font-size: 1rem;
		color: #707070;
		position: relative;
		display: block;
		text-align: center;
		background: #EBF9F9;
		border: 0px;
	}

		.malal-btn li button::before {
			content: "";
			display: block;
			width: 120px;
			height: 120px;
			position: absolute;
			top: -148px;
			left: 50%;
			transform: translateX(-50%);
		}

	.malal-btn .menu-item_0::before {
		background: url(../Images/Icon/m_00.svg) no-repeat center center;
		background-size: contain;
	}

	.malal-btn .menu-item_1::before {
		background: url(../Images/Icon/m_01.png) no-repeat center center;
		background-size: contain;
	}

	.malal-btn .menu-item_2::before {
		background: url(../Images/Icon/m_02.png) no-repeat center center;
		background-size: contain;
	}

	.malal-btn .menu-item_3::before {
		background: url(../Images/Icon/m_03.png) no-repeat center center;
		background-size: contain;
	}

	.malal-btn .menu-item_4::before {
		background: url(../Images/Icon/m_04.png) no-repeat center center;
		background-size: contain;
	}

	.malal-btn .menu-item_5::before {
		background: url(../Images/Icon/m_05.png) no-repeat center center;
		background-size: contain;
	}

	.malal-btn .menu-item_6::before {
		background: url(../Images/Icon/m_06.png) no-repeat center center;
		background-size: contain;
	}
/*Google map*/
#map {
	width: 100%;
	height: 100%;
	border-radius: 10px;
	overflow: hidden;
}

	#map span {
		display: block;
		padding-bottom: 3px;
	}

.gm-style-iw-chr > button {
	margin-top: 3px !important;
	margin-right: 3px !important;
}

.gm-style-iw-ch {
	padding-top: 10px;
	font-size: 1.25rem !important;
	text-align: left;
	color: #a47850;
	font-weight: 600;
}

.gm-full-width, .full-width {
	width: 100% !important;
}

.view-link {
	display: none;
}

.address > div {
	display: inline-block;
	text-align: left;
}

.gm-style-iw-d > div {
	font-size: 1.15rem;
	margin-bottom: 10px;
	min-width: 200px;
}

#map button {
	appearance: button;
	background-color: #a47850;
	border: solid transparent;
	border-radius: 8px;
	padding: 5px;
	color: #FFF;
	display: inline-block;
	letter-spacing: .8px;
	margin-top: 10px;
	opacity: 0.7;
}

	#map button:hover {
		background-color: #a47850;
	}

.content-left {
	text-align: left;
}

.controller-button {
	margin: 10px;
	border-radius: 5px;
	padding: 5px 15px;
	text-decoration: none;
	color: #fff;
	border: 0;
	font-size: 1.125rem;
	background-color: #e67e22;
	box-shadow: 0px 5px 0px 0px #CD6509;
}

	.controller-button:hover {
		background-color: #FF983C;
	}
/*--Page 最新消息--*/
.news .wrap {
	max-width: 1100px;
}

.banner-outer.news {
	margin-top: -118px;
}

.news .page-header {
	background: rgba(236, 124, 34, 0.74);
}

.news .card-group {
	width: 100%;
	display: block;
}

	.news .card-group a {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-column-gap: 45px;
		margin-bottom: 24px;
		background: #fff;
		border-radius: 10px;
		box-shadow: 0px 0px 10px #00000029;
		padding: 3%;
	}

	.news .card-group li:nth-child(2n) a {
		grid-auto-flow: row;
		direction: rtl;
	}

	.news .card-group li:nth-child(2n) h3,
	.news .card-group li:nth-child(2n) p {
		direction: ltr;
	}

	.news .card-group li:last-child a {
		margin-bottom: 24px;
	}

	.news .card-group a:hover .card-content h3 {
		color: #F4BE47;
	}

	.news .card-group .card-img {
		width: 315px;
		height: 228px;
		border-radius: 5px;
		overflow: hidden;
	}

		.news .card-group .card-img img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

	.news .card-group .card-content {
		grid-column: 2 / 4;
	}

	.news .card-group h3 {
		font-size: 1.5rem;
		font-weight: 400;
		color: #000000;
		line-height: 1.3;
		text-shadow: 0px 0px 0px;
	}

	.news .card-group span {
		font-size: 1rem;
		padding: 12px 0;
		color: #28A2A0;
	}

	.news .card-group p {
		font-size: 1.125rem;
		color: #707070;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
		overflow: hidden;
		margin-bottom: 0;
	}
/*--Page 最新消息-內容頁--*/

.news.detail h2 {
	margin-right: 0;
}

.news.detail .time {
	display: block;
	width: 18%;
}

.news.detail .swiper {
	width: 100%;
	height: 300px;
	margin-left: auto;
	margin-right: auto;
}

.news.detail .swiper-slide {
	background-size: cover;
	background-position: center;
}

.news.detail .mySwiper2 {
	height: 600px;
	width: 100%;
}

.news.detail .mySwiper {
	height: 160px;
	box-sizing: border-box;
	padding: 10px 0;
}

	.news.detail .mySwiper .swiper-slide {
		width: 25%;
		height: 100%;
		opacity: 0.4;
	}

	.news.detail .mySwiper .swiper-slide-thumb-active {
		opacity: 1;
	}

.news.detail .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news.detail .mySwiper2 .swiper-slide img {
	height: 600px;
}

.edit_box {
	margin: 16px 0 36px 0;
	text-align: left;
	line-height: 1.8;
}

.news.detail .content-main {
	text-align: left;
	line-height: 1.8;
}

	.news.detail .content-main a, .edit_box a {
		color: #28A2A0;
	}

		.news.detail .content-main a:hover, .edit_box a:hover {
			color: #F4BE47;
		}
/*--Page 關於台灣--*/
.banner.about {
	margin-bottom: -5%;
}

.about .wrap {
	max-width: 1100px;
}

.about .page-header {
	background: rgba(129, 60, 145, 0.74);
}

.about .main-content {
	font-size: 1.25rem;
	text-align: left;
}

	.about .main-content > p {
		color: #707070;
	}

	.about .main-content a {
		color: #28A2A0;
	}

		.about .main-content a:hover {
			color: #F4BE47;
		}

	.about .main-content .content-text:first-child {
		max-width: 860px;
		margin: 0 auto 60px;
	}

.about .content-text {
	text-align: center;
	line-height: 2;
	margin-bottom: 60px;
}

	.about .content-text p:first-child {
		font-size: 3.75rem;
		font-weight: 600;
		margin: 0 0 36px;
		position: relative;
		line-height: 1.6;
	}

		.about .content-text p:first-child::after {
			content: "";
			display: block;
			width: 260px;
			height: 7px;
			background: #F4BE47;
			left: 50%;
			position: relative;
			transform: translateX(-50%);
			line-height: -13.5;
		}

.about .text_bottom {
	display: block;
	width: 100%;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 10px #00000029;
	padding: 5%;
	margin-bottom: 12px;
	text-align: left;
	position: relative;
}

	.about .text_bottom::before {
		content: "";
		background: url(../Images/about_deco1.svg) no-repeat;
		background-size: cover;
		display: block;
		width: 206px;
		height: 244px;
		position: absolute;
		top: -300px;
		left: -152px;
	}

	.about .text_bottom::after {
		content: "";
		background: url(../Images/about_deco2.svg) no-repeat;
		background-size: cover;
		display: block;
		width: 196px;
		height: 261px;
		position: absolute;
		bottom: -115px;
		right: -110px;
	}

	.about .text_bottom h3 {
		font-size: 2.25rem;
		text-align: center;
		display: block;
	}

	.about .text_bottom .content-img.logo {
		display: block;
		width: 215px;
		height: 133px;
		margin: 24px auto;
	}

		.about .text_bottom .content-img.logo img {
			width: 215px;
			height: 133px;
			object-fit: contain;
		}

	.about .text_bottom .content-img {
		display: block;
		width: 100%;
		max-width: 567px;
		height: 357px;
		margin: 0 auto;
		overflow: hidden;
		border-radius: 10px;
	}

		.about .text_bottom .content-img img {
			width: 100%;
			height: 357px;
			object-fit: cover;
		}
/*---------RWD / RWD / RWD / RWD / RWD---------*/
@media screen and (max-width: 1460px) {
	.wrap {
		padding: 0 6%;
	}

		.wrap.prayer {
			padding: 60px 30px 120px;
		}

	header {
		padding-bottom: 22%;
	}

	.wrap_header h2 {
		word-break: keep-all;
		letter-spacing: 0;
		width: 32%;
	}

	.header {
		height: 160px;
	}

	.menu {
		display: flex;
		justify-content: end;
		align-items: center;
		padding: 0 1%;
		flex-wrap: wrap;
	}

		.menu .logo {
			background: url(../Images/Logo/logo.svg) no-repeat center center;
			background-size: contain;
			position: absolute;
			top: -3%;
			left: 2.5%;
			cursor: pointer;
			width: 11.5%;
			height: 100%;
			z-index: 9997;
		}

		.menu ul {
			margin-bottom: 4px;
		}

	.menu-deco {
		width: 102%;
		top: 16.5%;
		left: -1%;
	}

	.banner {
		margin-top: -13.5%;
	}

	.menu-deco.footer {
		top: -79%;
	}
	/*.scrollbar::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
		background-color: #FFF;
	}

	.scrollbar::-webkit-scrollbar {
		height: 6px;
		background-color: black;
	}

	.scrollbar::-webkit-scrollbar-thumb {
		background-color: #63C7F2;
	}*/
	.info-group {
		width: 65%;
	}

		.info-group li {
			margin-top: 16px;
		}

	/*--index--*/
	.card-group.festival .card .card-content h3 {
		left: 20px;
	}

		.card-group.festival .card .card-content h3 .break {
			display: block;
		}
	/*--Page 友善場域特搜-內頁--*/
	.wrap.detail {
		margin-top: -314px;
	}

	.content-header ul {
		width: 32%;
	}

	.map-links {
		width: 35%;
	}
	/*--Page 最新消息--*/
	.news .card-group a {
		grid-column-gap: 25px;
	}

	.news .card-group .card-img {
		width: 272px;
		height: 198px;
		border-radius: 5px;
		overflow: hidden;
	}

	.news .card-group p {
		-webkit-line-clamp: 3;
	}
	/*--Page 最新消息-內頁--*/
	.news.detail .time {
		display: block;
		width: 22%;
		text-align: right;
	}
}

@media screen and (max-width: 1200px) {
	header {
		padding-bottom: 24%;
	}

	.header {
		height: 153px;
	}

	.menu-deco {
		width: 102%;
		top: 65px;
		left: -1%;
	}

	.banner {
		margin-top: -13.5%;
	}

	.menu-deco.footer {
		top: -77%;
	}
	/*--index--*/
	.menu-group {
		margin: 30px auto 180px;
	}

	.malal-btn {
		margin: 30px auto 30px;
	}

	.card-group.hotel .card::before {
		top: -30px;
	}

	.card-group.hotel .card-img {
		height: 420px;
	}

	.wrap_header h2 {
		word-break: unset;
		width: 100%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		display: block;
		text-align: center;
	}

	.wrap_header span {
		display: none;
	}

	.wrap_header a {
		width: 100%;
		text-align: right;
		margin-right: 2%;
	}

	.section-attraction {
		margin-bottom: 72px;
	}

	.section-hotel, .section-shop, .section-mosque > .wrap, .wrap.prayer {
		padding-bottom: 72px;
	}

	.section-food {
		padding: 210px 0 200px;
	}

	.section-hotel {
		padding: 60px 0 120px;
	}

	.cardSwiper {
		padding-bottom: 60px;
	}

	.card-group.shop .card.first .card-img,
	.card-group.shop .card.first .card-img img {
		height: 668px;
	}

	.card-group.shop .card-img,
	.card-group.shop .card-img img {
		height: 265px;
	}

	.section-shop .wrap {
		padding: 36px 6% 0;
	}

	.wrap.prayer {
		padding: 120px 30px 72px;
	}

	.menu-deco.footer {
		top: -76%;
	}
	/*--Page 友善場域特搜--*/
	.card-group.explore {
		grid-template-columns: 1fr 1fr 1fr;
	}
	/*--Page 友善場域特搜-內頁--*/
	.content-header {
		flex-direction: column;
	}

	.map-links {
		width: 50%;
	}
	/*--Page 關於台灣--*/
	.about .text_bottom::before {
		width: 176px;
		height: 208px;
		position: absolute;
		top: 21px;
		left: -30px;
	}

	.about .text_bottom::after {
		width: 196px;
		height: 261px;
		position: absolute;
		bottom: -161px;
		right: 17px;
	}
}

@media screen and (max-width: 1024px) {
	header {
		display: block;
		height: 75px;
		padding-bottom: 16%;
		position: fixed;
		top: 0;
		overflow: visible;
	}

	.header {
		height: 75px;
	}

	.menu {
		display: none;
	}

	#AU, #AC, #AZ {
		display: none;
	}
	/*------------Burger︱Burger︱Burger------------*/
	.menu-burger {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.bar {
		width: 30px;
		height: 3px;
		background-color: #28A2A0;
		margin: 6px 0;
		border-radius: 50px;
	}
	/*.burger-fixed {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		padding: 0 15px;
		position: relative;
		background-color: rgba(255, 255, 255);
		width: 100%;
	}*/
	.menu-burger .logo {
		width: 90px;
		margin: 10px 0 0 24px;
		z-index: 900;
	}

		.menu-burger .logo img {
			width: 100%;
			height: 60px;
			position: relative;
			display: flex;
			align-items: center;
		}

	.burger_toggle {
		display: block;
		width: 25px;
		position: relative;
		top: -55%;
		left: 93%;
		z-index: 999;
	}

	.burger-list {
		display: none;
		background-color: #28A2A0;
		position: absolute;
		top: 53px;
		left: 0;
		right: 0;
		padding: 10px 3% 0;
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16);
		opacity: 0;
		transition: all 0.3s ease-in-out;
		max-width: 100%;
		margin-left: 0;
		overscroll-behavior-y: contain;
	}

		.burger-list.show-header {
			display: block;
			opacity: 1;
			overscroll-behavior-y: contain;
		}
	/*.menu-burger input {
		display: none;
	}
*/
	/*.burger-list {
		width: 100%;*/
	/*height: 0;*/
	/*height: 720px;
		list-style: none;
		margin: 0;
		padding: 0;*/
	/*overflow-y: hidden;*/
	/*transition: all 0.3s ease-in-out;
		z-index: 849;
	}*/
	.menu-deco {
		z-index: 850;
		top: 64px;
	}

	.banner {
		margin-top: 210px;
	}
	/*input:checked ~ .burger-list {*/
	/*height: 720px;*/
	/*overflow-y: scroll;
		overscroll-behavior: contain;
		padding-top: 60px;
	}*/
	.burger-list li {
		background: #28A2A0;
		color: #FFF;
	}

		.burger-list li:hover {
			background: #39C4C1;
		}

		.burger-list li .current, .burger-list li .language .current {
			background: #39C4C1;
		}

		.burger-list li a {
			display: block;
			width: 100%;
			font-size: 1.25em;
			text-align: center;
			padding: 15px;
			border-bottom: 0.3px solid #fff;
			position: relative;
			z-index: 999;
		}

	.footer-header {
		flex-wrap: wrap;
		justify-content: center;
	}

	.burger-list .language a {
		background: #28A2A0;
		color: #FFF;
	}

		.burger-list .language a::before {
			top: 0;
		}

	.info-group {
		width: 100%;
		justify-content: center;
	}

	.footer-connect {
		margin-top: 24px;
		justify-content: center;
	}
	/*index*/
	.menu-group, .malal-btn {
		display: flex;
		grid-gap: 158px;
		flex-wrap: wrap;
		justify-content: center;
		margin: 30px auto 180px;
	}

	.card-group,
	.card-group.shop {
		grid-template-columns: 1fr 1fr;
	}

		.card-group.top .card.first,
		.card-group.shop .card.first {
			grid-column: 1 / 1;
			grid-row: 1 / 1;
		}

			.card-group.top .card.first .card-img,
			.card-group.top .card.first .card-img img,
			.card-group.shop .card.first .card-img,
			.card-group.shop .card.first .card-img img,
			.card-group.shop .card-img, .card-group.shop .card-img img {
				height: 347px;
			}

			.card-group.top .card.first::before {
				top: 26px;
			}

		.card-group.hotel {
			grid-row-gap: 60px;
		}

		.card-group, .card-group.shop {
			grid-row-gap: 72px;
		}

			.card-group.shop .card.first::before {
				top: -72px;
			}

			.card-group.shop h3::after,
			.card-group.shop .card-content .location::after {
				display: none;
			}

			.card-group.shop h3::before {
				content: "";
				background: url(../Images/Icon//icon-shopping-car.svg) no-repeat;
				background-size: contain;
				display: inline-block;
				width: 24px;
				height: 23px;
				margin-right: 8px;
			}

			.card-group.shop .card-content .location::before {
				content: "";
				background: url(../Images/Icon/icon_location_y.svg) no-repeat;
				background-size: contain;
				display: inline-block;
				width: 13px;
				height: 18px;
				margin: 0 10px;
			}

	.linksdSwiper {
		width: 85%;
	}
	/*--Page 友善場域特搜--*/
	.search input {
		display: block;
	}

	.card-group.explore {
		grid-template-columns: 1fr 1fr;
	}
	/*--Page 友善場域特搜-內頁--*/
	#AU, #AC, #AZ, .detail #AC {
		display: none;
	}

	.wrap.detail {
		margin-top: 12px;
		z-index: 800;
	}

	.main-header {
		flex-direction: column;
	}

	.content-header ul {
		width: 50%;
	}

	.mail-img, .mail-info {
		width: 100%;
		padding: 0;
	}

	.map-links {
		width: 60%;
	}

	.mail-img .swiper-pagination {
		top: var(--swiper-pagination-top, -32%) !important;
	}
	/*--Page 觀光地圖--*/
	.malal-btn {
		margin: 60px auto 60px;
	}
	/*--Page 最新消息-內頁--*/
	.news.detail .time {
		display: block;
		width: 40%;
		text-align: right;
	}
}

@media screen and (max-width: 768px) {
	header {
		padding-bottom: 36%;
	}

	.wrap_header h2 {
		font-size: 3rem;
		position: relative;
		width: 100%;
		margin-bottom: 12px;
		letter-spacing: 0;
	}

	.wrap_header {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #28A2A0;
		position: relative;
		flex-direction: column;
	}

		.wrap_header a {
			width: 100%;
			text-align: center;
			margin-right: 2%;
		}

	.footer-info {
		flex-direction: column;
		padding: 16px 0;
	}

	.footer_logo {
		width: 180px;
	}

	.copyright {
		width: 100%;
		margin: 2% 0 0 0;
	}

	.banner-logo {
		top: 198px;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: 200px;
	}

		.banner-logo p {
			display: inline-flex;
			font-size: 22px;
			word-break: keep-all;
			color: #fff;
			font-weight: 600;
			text-align: center;
			padding: 20px;
			border: 1px solid;
			align-items: center;
			background: #ffffff40;
			width: 250px;
		}

		.banner-logo .logo-container {
			position: absolute;
			width: 250PX;
			left: 50%;
			transform: translateX(-50%);
		}

	.banner .banner-title {
		font-size: 1.375em;
		padding: 8px 0;
		width: 180px;
	}

		.banner .banner-title::before {
			width: 460px;
		}

	.more-btn {
		margin: 30px auto 0;
	}

	.wrap.pager {
		padding: 40px 0 48px;
	}

	.menu-deco {
		background: url(../Images/deco_mb.svg) no-repeat center center;
		background-size: contain;
		width: 102%;
	}

		.menu-deco.footer {
			top: -63%;
		}
	/*--index--*/
	.banner, .swiper-slide {
		height: 350px;
	}

	.menu-group, .malal-btn {
		margin: 0px auto 45px;
		grid-column-gap: 76px;
		grid-row-gap: 156px;
	}

		.menu-group li a {
			width: 110px;
		}

		.menu-group a::before {
			top: -130px;
		}

	.section-food {
		padding: 60px 0 54px;
	}

	.card-group, .cardSwiper {
		margin: 24px 0 0;
	}

	.section-hotel {
		padding: 0px 0 120px;
	}

		.section-hotel::before {
			content: "";
			display: block;
			width: 100%;
			height: 158px;
			border-radius: 66px 66px 0 0;
			background: #fff;
			position: absolute;
			top: -62px;
		}

		.section-hotel::after {
			content: "";
			background: url(../Images/Icon/hotel_deco.svg) no-repeat;
			display: block;
			background-size: contain;
			width: 60px;
			height: 60px;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: -90px;
			z-index: 2;
		}

	.cardSwiper .swiper-button-next,
	.cardSwiper .swiper-button-prev {
		top: var(--swiper-navigation-top-offset, 88%)
	}

	.card-group.hotel {
		margin-top: 48px;
	}

		.card-group.hotel .card-img {
			height: 327px;
		}

		.card-group.hotel h3, .card-group.hotel .location,
		.card-group.hotel h3::after {
			margin: 12px 0 0;
		}

	.campaign-bn {
		display: none;
	}

	.campaign-bn-mb {
		display: block;
		width: 100%;
		height: 196px;
		border-radius: 10px;
		overflow: hidden;
		background: #fff;
	}

		.campaign-bn-mb img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

	.section-campaign,
	.section-hotel, .section-shop,
	.section-mosque > .wrap, .wrap.prayer {
		padding-bottom: 60px;
	}

		.section-shop .wrap {
			padding: 0 6%;
		}

	.card-group.shop .card.first::before {
		top: -33px;
		width: 120px;
	}

	.card-group, .card-group.shop {
		grid-template-columns: 1fr;
		grid-row-gap: 43px;
	}

		.card-group.shop {
			margin: 60px 0 0;
		}

			.card-group.shop .card:nth-child(2n-1)::before {
				width: 122px;
				top: -33px;
			}

	.section-mosque {
		padding: 48px 0 36px;
	}

	.card-group.mosque {
		grid-template-columns: 1fr;
		margin: 24px 0 0;
	}

	.card-group.shop .card:nth-child(2n-1)::before {
		width: 120px;
		top: -32px;
	}

	.wrap.prayer {
		padding: 18px 30px 120px;
	}

	.section-campaign, .section-hotel,
	.section-shop, .section-mosque > .wrap, .wrap.prayer {
		padding-bottom: 30px;
	}

	.section-mosque .swiper-slide {
		height: 100%;
	}

	.linksdSwiper {
		width: 83%;
	}
	/*---------Page layout---------*/
	.section-content {
		padding: 0 0 48px 0;
	}

		.section-content::before {
			background: url(../Images/bg_attraction_mb.png) no-repeat top center;
			height: 405px;
		}
	/*--Page 友善場域特搜--*/
	.card-group.explore {
		grid-template-columns: 1fr;
	}
	/*--Page 友善場域特搜-內頁--*/
	.wrap.detail {
		padding: 120px 30px 30px;
		z-index: 800;
	}

	.breadcrumb ol {
		flex-wrap: wrap;
	}

	.detail h2 {
		font-size: 1.75rem;
	}

		.detail h2::before {
			width: 25px;
			height: 25px;
		}

	.content-header ul,
	.map-links {
		width: 100%;
	}

	.content-share {
		display: block;
		width: 30px;
		height: 30px;
	}

	.content-copy {
		height: 30px;
	}

	.content-header {
		margin-bottom: 12px;
	}

	.content-main {
		padding: 20px;
	}

	.mail-img {
		height: 320px;
	}

		.mail-img .swiper-pagination {
			top: var(--swiper-pagination-top, -10%) !important;
		}

	.mail-info li p, .mail-info li a {
		font-size: 1.125rem;
	}

	.mail-info li {
		padding-bottom: 12px;
		margin-bottom: 12px;
	}

	.map-links {
		flex-direction: column;
		align-items: end;
	}

		.map-links .google {
			margin-bottom: 8px;
		}

	.main-header {
		margin-bottom: 24px;
		padding-bottom: 12px;
	}

	.map-containter {
		height: 400px;
		padding: 0 0 24px;
	}

	footer {
		padding-top: 3%;
	}

	.menu-deco.footer {
		top: -75.3%;
	}
	/*--Page 觀光地圖--*/
	.malal-btn {
		margin: 60px auto 60px;
	}
	/*--Page 最新消息--*/
	.banner-outer.news {
		margin-top: -168px;
	}

	.news .card-group a {
		grid-template-columns: 1fr;
		grid-row-gap: 24px;
	}

	.news .card-group .card-img {
		width: 100%;
	}

	.news .card-group .card-content {
		grid-column: 1 / 1;
	}
	/*--Page 最新消息-內頁--*/
	.news.detail .mySwiper2 {
		height: 228px;
	}

	.news.detail .mySwiper {
		height: 120px;
	}

	.edit_box {
		margin: 12px 0 24px 0;
	}

	.news.detail .time {
		display: block;
		width: 100%;
		text-align: right;
	}
	/*--Page 關於台灣--*/
	.news .card-group .card-content {
		grid-column: 1 / 1;
	}

	.about .text_bottom::before, .about .text_bottom::after {
		display: none;
	}
}

@media screen and (max-width: 480px) {
	header .wrap {
		padding: 0 15px;
	}

	.burger_toggle {
		top: -63%;
		left: 88%;
	}

	.menu-burger .logo {
		width: 83px;
		margin: 3px 0 0 12px;
		z-index: 900;
	}

	.info-group li {
		margin-right: 0;
		flex-wrap: wrap;
	}

		.info-group li p {
			width: 100%;
			margin: 0;
		}

		.info-group li .info-img {
			width: 100%;
		}

			.info-group li .info-img img {
				margin: 0 auto;
			}
	/*.footer-connect {
		margin-top: 18px;
		flex-wrap: wrap;
	}

		.footer-connect .connect-link {
			padding: 0;
			width: 100%;
			margin: 10px;
		}

			.footer-connect .connect-link a {
				margin: 0 auto;
			}*/
	.pager li {
		margin: 0 4px;
	}

		.pager li a {
			font-size: 0.875rem;
			border-radius: 5px;
		}
	/*--index--*/

	.card-group .card, .card-group.festival .card {
		width: 100%;
	}

	.section-festival {
		background: transparent linear-gradient(180deg, #FFFFFF 0%,#FFFFFF 60%,#FFFFFF00 100%) 0% 0% no-repeat padding-box;
	}

	.card-group.festival .card .card-content h3 .break {
		display: none;
	}

	/*--Page 友善場域特搜--*/
	.page-header {
		padding: 24px 0 48px;
	}

		.page-header .wrap h2 {
			margin: 24px 0 16px;
		}

	.select-group {
		grid-template-columns: 1fr 1fr;
	}

		.select-group select:last-child {
			grid-column: 1 / 3;
		}


	.card-group.explore {
		grid-gap: 24px;
	}
	/*--Page 觀光地圖--*/
	.malal-btn {
		grid-gap: 43px;
		margin: -143px auto 24px;
	}

		.malal-btn li button {
			padding: 25px 0px;
		}

			.malal-btn li button::before {
				content: "";
				display: block;
				width: 60px;
				height: 60px;
				position: absolute;
				top: -42px;
				left: 50%;
				transform: translateX(-50%);
			}

	#map {
		height: 400px !important;
	}
}

@media screen and (max-width: 375px) {
	.banner .banner-title {
		top: 456px;
	}

	.swiper-pagination {
		top: 589px !important;
	}

	.banner-logo {
		top: 204px;
	}

	.banner .banner-title::before {
		display: none;
	}
	/*--index--*/
	.section-attraction {
		margin-top: 0px;
	}

	.card-group.festival .card, .card-group.festival .card .card-img img {
		height: 460px;
	}
}

@media screen and (max-width: 320px) {
	/*---------Page layout---------*/
	.breadcrumb {
		align-items: start;
	}

		.breadcrumb ol {
			flex-wrap: wrap;
		}
}