html,body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
}
#navigation {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 34px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #FFFFFF;
}
#nav-content {
	display: flex;
	width: 1200px;
}
.hyperlink {
	text-decoration: none;
}
.mouseover {
	cursor: pointer;
}
.mouseover:hover {
	opacity: 0.75;
}
#headline {
	text-align: left;
	width: 150px;
	height: 34px;

	color: var(--primary-color-cyan-70, #489);
	font-family: system-ui;
	font-size: 26px;
	font-style: normal;
	font-weight: 700;
	line-height: 34px; /* 113.333% */
}
#opt-menu {
	display: flex;
	flex: auto;
	align-items: center;
	justify-content: flex-end;
	text-align: left;

	color: var(--secondary-color-gray-70, #666);
	/* Body - Med 16(13.3) */
	font-family: Noto Sans TC;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 13.3px; /* 83.125% */
}
#opt-sche {
	width: 64px;
	height: 14px;
	padding: 10px;
	text-align: center;
	display: none;
}
#opt-sign {
	width: 71px;
	height: 14px;
	padding: 10px;
	text-align: center;
	white-space: pre;
	display: none;
}
#opt-member {
	width: 14px;
	height: 14px;
	padding: 10px;
	border-radius: 50%;
    margin-right: 5px;
	text-align: center;
	white-space: pre;
	display: none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
#opt-sign-loading {
	width: 14px;
	height: 14px;
	padding: 10px;
	margin-right: 5px;
	background-image: url(./loading.gif);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
#hero {
	height: 320px;
	background-image: url(/welcome_image.png), linear-gradient(135deg, #AADDEE 0%, #66AABB 100%);
	background-size: cover;
	background-position: top;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
#slogan-area {
	display: grid;
	gap: 10px;
	padding: 10px;
}
#slogan {
	width: 1180px;
	height: 149px;
}
#slohan-titles {
	height: 78px;
}
#title {
	height: 41px;
	
	color: var(--secondary-color-gray-10, #F8F8F8);
	/* Text Shadow */
	text-shadow: 0px 0px 30px #ABC;
	/* Header 1 - Bold 28(24) */
	font-family: Noto Sans TC;
	font-size: 28px;
	font-style: normal;
	font-weight: 700;
	line-height: 24px; /* 85.714% */
}
#subtitle {
	height: 22px;
	margin-top: 15px;

	color: var(--secondary-color-gray-10, #F8F8F8);
	/* Body - Bold 16(13.3) */
	font-family: Noto Sans TC;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 13.3px; /* 83.125% */
}
#search {
	height:46px;
	margin-top: 25px;
}
#search-bar {
	display: flex;
	width: 460px;
	height: 46px;
}
#input {
	width: 400px;
	box-shadow: 0px 0px 20px 0px #AABBCC;
	background-color: #FFFFFF;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0px 0px 20px 0px #ABC;
}
#keyword {
	width: 370px;
	height: 16px;
	padding: 15px;
}
#search-btn {
	width: 60px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #448899;
	cursor: pointer;
}
#keyword {
	border: none;
}
#icon-search {
	width: 30px;
	height: 30px;
	background-image: url(/icon_search.png);
}
#main {
	/* height: auto; */
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 40px;
}
#list-bar {
	width: 1200px;
	display: flex;
	justify-content: space-around;
	padding-bottom: 20px;
}
#mrt-logo {
	height: 50px;
	width: 50px;
	background-image: url(/mrt-2.png);
	background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
#left-container {
	display: flex;
	align-items: center;
	justify-content: end;
	padding-top: 9px;
	padding-bottom: 9px;
	padding-left: 15px;
}
#left-button {
	height: 32px;
	width: 32px;
	background-image: url(/Arrow_left.png);
}
#right-container {
	display: flex;
	align-items: center;
	justify-content: start;
	padding-top: 9px;
	padding-bottom: 9px;
	padding-right: 15px;
}
#right-button {
	height: 32px;
	width: 32px;
	background-image: url(/Arrow_right.png);
}
#container {
	width: 1056px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 13px;
	padding-bottom: 13px;
	display: flex;
    flex-direction: column;
    justify-content: center;
}
#listItems {
	width: 1036px;
	height: 24px;
	grid-template-rows: 24px;
	overflow-x: hidden;
	position: relative;
	scroll-behavior: smooth;
}
#list-item-all {
	display: grid;
	grid-template-rows: 24px;
	column-gap: 4px;
	transition: transform 0.3s ease;
}
.item {
	grid-row: 1;
	white-space: pre;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 15px;
	padding-right: 15px;
}
.item-text {
	height: 14px;
	cursor: pointer;

	font-family: Noto Sans TC;
	font-size: 16px;
	font-weight: 500;
	line-height: 13px;
	letter-spacing: 0em;
	text-align: center;
	color: #666666;
}
#attractions {
	width: 1200px;
	height: auto;
}
#attractions-group {
	padding: 15px;
	display: grid;
	row-gap: 30px;
	width: 1170px;
	grid-template-columns: repeat(4,272px);
	justify-content: space-between;
}
.attraction {
	width: 270px;
	height: 240px;
	border-radius: 5px;
	border: 1px solid #E8E8E8;
	background: var(--White, #FFF);
	cursor: pointer;
}
.attr-pic {
	position: relative;
	margin-bottom: -5px;
}
.attr-Img {
	width: 270px;
	height: 197px;
	background: #C4C4C4;
	object-fit: cover;
	border-radius: 5px 5px 0 0;
}
.attr-name-place {
	display: flex;
	align-items: center;
	width: 270px;
	height: 40px;
	opacity: 0.6;
	background: #000000;
	position: absolute;
	bottom: 5px;
}
.txt-name {
	width: 250px;
	height: 20px;
	padding: 10px;
	font-family: Noto Sans TC;
	font-size: 16px;
	font-weight: 700;
	text-align: left;
	color: #FFFFFF;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.attr-note {
	display: flex;
	align-items: center;
	margin-top: 0;
}
.infos {
	width: 250px;
	height: 25px;
	padding: 10px;
	display: flex;
	align-items: center;
}
.txt-mrt {
	color: var(--secondary-color-gray-50, #757575);
	/* Body - Med 16(13.3) */
	font-family: Noto Sans TC;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 13.3px; /* 83.125% */
}
.txt-cate {
	color: var(--secondary-color-gray-50, #555);
	text-align: right;
	flex: auto;
	justify-content: flex-end;

	/* Body - Med 16(13.3) */
	font-family: Noto Sans TC;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 13.3px; /* 83.125% */
}
#loading{
	display: flex;
    justify-content: center;
}
#loading-picture {
	width: 100px;
	height: 100px;
	opacity: 0.9;
}
#main-end {
	height: 40px;
}
#footer {
	height: 104px;
	background-color: #757575;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-grow: 1;
}
#footer-content {
	width: 234px;
	height: 24px;
	padding-top: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
#footer-text {
	height: 14px;
	font-family: Noto Sans TC;
	font-size: 16px;
	font-weight: 700;
	line-height: 13px;
	letter-spacing: 0em;
	text-align: left;
	color: #FFFFFF;
	white-space: pre;
}
/* for attraction.html */
.separator {
	margin-block: 0;
	height: 1px;
	width: 100%;
	border: none;
	background-color: var(--Gray-300, #E8E8E8);
}
#section-area {
	display: flex;
	justify-content: center;
}
#section {
	margin-top: 40px;
	margin-bottom: 40px;
	width: 1200px;
	height: 400px;
	box-sizing: border-box;
	padding-left: 15px;
	padding-right: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#picture-current {
	width: 540px;
	height: 406px;
	border-radius: 5px;
	position: relative;
}
.picture-slide {
	border-radius: 5px;
	width: 540px;
	height: 406px;
	background: lightgray 50% / cover no-repeat;
	object-fit: cover;
}
#attr-page-left-button, #attr-page-right-button {
	width: 36px;
	height: 36px;
	position: absolute;
	opacity: 0.75;
}
#attr-page-left-button {
	top: 185px;
	left: 10px;
}
#attr-page-right-button {
	top: 185px;
	right: 10px;
}
#circle-set-area {
	position: absolute;
	bottom: 13px;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}
#circle-set {
	display: flex;
	gap: 12px;
}
.circle {
	opacity: 0.75;
	cursor: pointer;
}
#profile {
	width: 600px;
	height: 400px;
}
.head-title {
	line-height: calc(33/24);
	color: var(--secondary-color-gray-70, #666);
	/* Header 3 - Blod 24(24) */
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
}
#cate-mrt {
	margin-top: 15px;
	height: 22px;
	color: var(--secondary-color-gray-70, #666);
	/* Body - Med 16(13.3) */
	font-family: Noto Sans TC;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
}
#booking-form {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 15px 20px 0 20px;
	margin-top: 20px;
	height: 302px;
	border-radius: 5px;
	background: var(--secondary-color-gray-20, #E8E8E8);
}
.form-headline {
	color: var(--secondary-color-gray-70, #666);
	/* Body - Bold 16(13.3) */
	font-family: Noto Sans TC;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
}
.form-description {
	color: var(--secondary-color-gray-70, #666);
	/* Body - Med 16(13.3) */
	font-family: Noto Sans TC;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
}
#order-headline {
	height: 22px;
}

#order-description {
	margin-top: 15px;
	height: auto;
	line-height: 1.5;
}
#date-field {
	margin-top: 15px;
	height: 35px;
	display: flex;
	align-items: center;
	gap: 5px;
}
#date-headline {
	width: 81px;
}
#date-input-area {
	height: 35px;
	width: 193px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 5px 10px 5px 10px;
	background: var(--White, #FFF);
}
#calendar {
	height: 25px;
	width: 173px;
	border-width: 0px;
	border: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
	display: block;
	background: url("/calendar.png") no-repeat center;
	width: 24px;
	height: 24px;
}
#time-field {
	margin-top: 15px;
	height: 22px;
	display: flex;
	align-items: center;
	gap: 5px;
}
#time-headline {
	width: 81px;
}
.radio-select-area {
	width: 87px;
	height: 22px;
	box-sizing: border-box;
	padding: 0px 8px 0px 5px;
	display: flex;
	align-items: center;
	gap: 4px;
}
.time-button {
	display: flex;
	align-items: center;
}
#afternoon-select {
	display: none;
}
#price-field {
	margin-top: 15px;
	height: 22px;
	display: flex;
	align-items: center;
	gap: 5px;
}
#price-headline {
	width: 81px;
}
#booking-field {
	display: flex;
}
#booking-button {
	margin-top: 25px;
	padding: 10px 20px 10px 20px;
	border-radius: 5px;
	background: var(--primary-color-cyan-70, #489);
}
.button-text {
	color: var(--additional-color-white, #FFF);
	text-align: center;
	/* Button - Reg 19(16) */
	font-family: Noto Sans TC;
	font-size: 19px;
	font-style: normal;
	font-weight: 600;
	line-height: 16px; /* 84.211% */
}
#section-separator {
	width: 1200px;
}
#infors-area {
	display: flex;
	justify-content: center;
}
#infors {
	margin-top: 40px;
	margin-bottom: 40px;
	width: 1200px;
	box-sizing: border-box;
	padding: 10px 10px 0 10px;
}
.infor-headline {
	color: var(--secondary-color-gray-70, #666);
	/* Body - Bold 16(13.3) */
	font-family: infor-headline;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 32px;
}
.infors-description {
	color: var(--secondary-color-gray-70, #666);
	/* Content - Reg 16(Auto) */
	font-family: Noto Sans TC;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}
#description {
	white-space: pre-wrap;
}
#address {
	margin-top: 20px;
	height: 32px;
}
#transport {
	margin-top: 20px;
	height: 32px;
}
#transport-content {
	margin-bottom: 80px;
	white-space: pre-wrap;
}
/* for member.html */
.member-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	gap: 15px;
}
.member-data {
	width: 1200px;
}
.member-info {
	display: flex;
}
.edit-area:hover {
	border-color: blue;
	background-color: #ddddff3b;
}
#member-image {
	width: 100px;
	height: 100px;
	background-image: url(./loading.gif);
	background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
	border-radius: 50%;
	margin-left: 20px;
}
#change-image {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
}
.txt-lg {
	font-size: large;
}
#fileInput {
	font-size: 16px;
	line-height: 2.5;
}
.upload-submit {
	line-height: 2;
	width: fit-content;
    height: 30px;
    padding: 0 10px;
	text-align: center;
    border-radius: 10px;
	background-color: #37a;
	color: white;
}
.submit-status-place {
	display: flex;
    align-items: center;
}
#submit-waiting, #update-waiting {
	gap: 5px;
	color: rgb(34 120 201);
}
#submit-success, #update-success {
	color: rgb(19, 92, 19);
}
.submit-status {
	width: 40px;
	height: 40px;
}
#update-stop-txt, #update-password-stop-txt {
	color: rgb(150, 30, 30)
}
.order-data {
	width: 1200px;
}
.member-order-headline {
	display: flex;
}
.card-place {
	display: flex;
    flex: auto;
    justify-content: flex-end;
	gap: 10px;
    color: white;
}
.card {
    text-align: center;
	box-sizing: border-box;
    padding: 5px 10px;
	background-color: #489e;
	border-radius: 5px;
}
.member-info-item {
	display: flex;
}
.member-item {
	display: flex;
	padding: 2px 0 2px 0;
	gap: 10px;
}
.profile-image-place {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.item-highlight {
	color: #489;
}
.item-lg {
	font-weight: 800;;
}
.item-sm {
	font-weight: 400;;
}
.order-id {
	background-color: #4aa5;
	padding: 7px;
	line-height: 2;
}
.order-detail {
	background-color: #1871;
	padding: 10px;
}
.member-order-info {
	display: flex;
    flex-direction: column;
    gap: 5px;
	padding: 10px 15px 0 15px;
}
.member-change-area {
	padding: 15px;
    border-radius: 10px;
    border-style: solid;
    margin-top: 10px;
	background-color: #ccccdd3b;
}
.order-info {
	padding: 10px;
}
/* for sign dialog */
.sign-area {
	display: none;
	position: fixed;
	z-index: 2;
	left: calc(50% - 170px);
	width: 340px;
	min-height: 275px;
	border-radius: 6px;
	background: var(--White, #FFF);
	box-shadow: 0px 4px 60px 0px #AAA;
	animation: slide 0.5s forwards;
}
@keyframes slide {
	from {
		top: -10px;
	}
	to {
		top: 80px;
	}
}
.sign-area-position {
	position: relative;
	display: flex;
	flex-direction: column;
}
.sign-mask {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0.25;
	background: var(--Black, #000);
}
.sign-decorator {
	border-radius: 6px 6px 0 0;
	width: 100%;
	height: 10px;
	background: var(--additional-color-dark-cyan-gradient-0-deg, linear-gradient(270deg, #378 0%, #6AB 100%));
}
.sign-in-main {
	min-height: 235px;
	box-sizing: border-box;
	margin: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.sign-up-main {
	min-height: 292px;
	box-sizing: border-box;
	margin: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	display: none;
}
.sign-main-title {
	width: 100%;
	height: 27px;
	margin-bottom: 15px;
	color: var(--secondary-color-gray-70, #666);
	text-align: center;
	/* Header 3 - Blod 24(24) */
	font-family: Noto Sans TC;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
}
.sign-box {
	display: flex;
	width: 100%;
	height: 47px;
	background: var(--White, #FFF);
	margin-bottom: 10px;
}
.sign-input-text {
	width: 100%;
	border: none;
	box-sizing: border-box;
	padding: 15px;
	color: var(--secondary-color-gray-50, #757575);
	font-family: Noto Sans TC;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	border: 1px solid var(--Gray-500, #CCC);
	border-radius: 5px;
}
.sign-btn {
	display: flex;
	width: 100%;
	height: 47px;
	box-sizing: border-box;
	padding: 10px 20px 10px 20px;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	background: var(--primary-color-cyan-70, #489);
	margin-bottom: 10px;
	cursor: pointer;
}
.sign-btn-text {
	color: var(--additional-color-white, #FFF);
	text-align: center;
	/* Button - Reg 19(16) */
	font-family: Noto Sans TC;
	font-size: 19px;
	font-style: normal;
	font-weight: 400;
}
.sign-message {
	color: rgb(150, 30, 30);
	text-align: center;
	/* Body - Med 16(13.3) */
	font-family: Noto Sans TC;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	margin-bottom: 10px;
	display: none;
}
.sign-switch {
	height: 22px;
	color: var(--secondary-color-gray-70, #666);
	text-align: center;
	/* Body - Med 16(13.3) */
	font-family: Noto Sans TC;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	cursor: pointer;
}
.sign-close {
	position: absolute;
	width: 16px;
	height: 16px;
	right: 10px;
	top: 20px;
	padding: 7px;
}
.close-icon {
	width: 100%;
	height: 100%;
	background: url(/icon_close.svg);
	cursor: pointer;
}
.member-selection {
	display: none;
	justify-content: center;
	padding: 10px 0 10px 0;
    box-sizing: border-box;
	position: absolute;
	z-index: 2;
	top: 60px;
	right: calc(50% - 600px);
	width: 91px;
	min-height: 80px;
	background: #e1e6e880;
	border-radius: 5px;
	animation: fadeIn 0.3s;
}
@keyframes fadeIn {
	from {
		opacity: 0.5;
	}
	to {
		opacity: 1;
	}
}
.member-position {
	width: 90%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.member-selection-item {
	display: flex;
    justify-content: center;
    align-items: center;
}
.selection-item-text {
	text-align: center;
	color: var(--secondary-color-gray-70, #444);
    font-family: Noto Sans TC;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
}
/* for booking html */
.booking-section-area {
	display: flex;
	flex-direction: column;
}
.book-headline {
	margin-top: 40px;
	width: 1000px;
	height: 27px;
	box-sizing: border-box;
	padding: 6px 0 5px 0;
}
.greeting {
	color: var(--secondary-color-gray-70, #666);
	/* Button - Bold 19(16) */
	font-family: Noto Sans TC;
	font-size: 19px;
	font-style: normal;
	font-weight: 700;
	line-height: 16px; /* 84.211% */
}
.none-booked-info-part {
	width: 1000px;
    margin-top: 30px;
    margin-bottom: 40px;
	display: none;
}
.booking-section {
	width: 1000px;
	height: 200px;
	box-sizing: border-box;
	padding: 0 10px 0 10px;
	margin-top: 30px;
	margin-bottom: 40px;
	display: flex;
	position: relative;
}
.booking-picture {
	width: 250px;
	height: 200px;
	display: flex;
	justify-content: center;
}
.booking-image {
	width: 266px;
	height: auto;
	object-fit: cover;
	overflow: hidden;
}
.booking-infor {
	display: flex;
	justify-content: end;
	flex: auto;
}
.booking-content {
	width: 700px;
	height: 170px;
}
.content-frame {
	height: auto;
	line-height: 1.5;
	margin-bottom: 20px;
	color: var(--primary-color-cyan-70, #489);
	/* Body - Bold 16(13.3) */
	font-family: Noto Sans TC;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
}
.sub-frame {
	margin-bottom: 10px;
	display: flex;
	gap: 5px;
}
.sub-item {
	height: auto;
    line-height: 1.5;
	color: var(--secondary-color-gray-70, #666);
	/* Body - Bold 16(13.3) */
	font-family: Noto Sans TC;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
}
.sub-content {
	box-sizing: border-box;
	height: auto;
    line-height: 1.5;
	color: var(--secondary-color-gray-70, #666);
	/* Body - Med 16(13.3) */
	font-family: Noto Sans TC;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
}
.booking-delete-icon {
	position: absolute;
	right: 10px;
	width: 30px;
	height: 30px;
	background: url("/delete.svg") no-repeat center;
}
.contact-pay-area {
	display: flex;
	justify-content: center;
}
.contact-pay-form {
	display: flex;
	flex-direction: column;
	width: 980px;
	height: fit-content;
	margin-top: 40px;
	margin-bottom: 40px;
}
.contact-pay-frame {
	padding: 4px 0 4px 0;
	margin-bottom: 20px;
	color: var(--secondary-color-gray-70, #666);
	/* Button - Bold 19(16) */
	font-family: Noto Sans TC;
	font-size: 19px;
	font-style: normal;
	font-weight: 700;
	line-height: 16px; /* 84.211% */
}
.contact-pay-field {
	display: flex;
	margin-bottom: 15px;
}
.field-item-area {
	display: flex;
	align-items: center;
}
.field-item {
	width: 81px;
	height: 24px;
	color: var(--secondary-color-gray-70, #666);
	/* Body - Med 16(13.3) */
	font-family: Noto Sans TC;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
}
.booking-input-text {
	height: 18px;
	width: 180px;
	padding: 9px;
	color: var(--additional-color-black, #000);
	/* Body - Med 16(13.3) */
	font-family: Noto Sans TC;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	border: 1px solid var(--Gray-500, #CCC);
	border-radius: 5px;
}
.notice-text {
	height: auto;
	line-height: 1.5;
	color: var(--secondary-color-gray-70, #666);
	/* Body - Bold 16(13.3) */
	font-family: Noto Sans TC;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
}
.payment-form {
	display: flex;
	flex-direction: column;
	width: 980px;
	height: 188px;
	margin-top: 40px;
	margin-bottom: 40px;
}
.pay-area {
	display: flex;
	justify-content: center;
}
.pay-content {
	display: flex;
	flex-direction: column;
	align-items: end;
	width: 980px;
	height: 100px;
	margin-top: 40px;
	margin-bottom: 40px;
}
.confirm-price {
	height: 20px;
	color: var(--Gray-800, #666);
	text-align: right;
	/* Body - Bold 16(13.3) */
	font-family: Noto Sans TC;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
}
#pay-button {
	margin-top: 22px;
	padding: 10px 20px 10px 20px;
	border-radius: 5px;
	background: var(--primary-color-cyan-70, #489);
}
#thankyou-section-area {
	gap: 20px;
    align-items: center;
    margin: 30px;
}
#order-number {
	color: rgb(60, 152, 155);
}
.href-text {
	text-decoration: none;
}
/* 600 < screen size <= 1200 */
@media (max-width: 1200px) {
	#nav-content {
		width: 100%;
	}
	#hero {
		width: 100%;
	}
	#slogan-area {
		width: calc(100% - 20px);
		
	}
	#slogan {
		width: calc(100% - 40px);
	}
	#search-bar {
		width: 285px;
	}
	#input {
		width: 225px;
	}
	#list-bar {
		width: 100%;
	}
	#container {
		width: calc(100% - 184px); /* ( 114 = 47 * 2 + 10 * 2 )*/
	}
	#listItems {
		width: calc(100% - 20px);
	}
	#attractions {
		width: calc(100% - 8px);
		height: auto;

		padding-left: 4px;
		padding-right: 4px;
		display: block;
	}
	#attractions-group {
		gap: 15px;
		grid-template-columns: repeat(2,calc(50% - 7.5px));
		width: auto;
	}
	.attraction {
		width: auto;
		height: 280px;
	}
	.attr-pic {
		margin-bottom: -5px;
	}
	.attr-Img {
		width: 100%;
		height: 235px;
	}
	.attr-name-place {
		width: 100%;
	}
	.txt-name {
		width: auto;
	}
	.infos {
		width: 100%;
	}
	.txt-mrt {
		width: 50%;
	}
	.txt-cate {
		width: 50%;
	}
	/* for attraction.html */
	#section {
		width: 100%;
	}
	#picture-current {
		width: calc(50% - 20px);
	}
	.picture-slide {
		width: 100%;
	}
	#profile {
		width: 50%;
	}
	#section-separator {
		width: calc(100% - 20px);
	}
	#infors {
		width: 100%;
	}
	/* for attraction.html */
	.member-data {
		width: 100%;
	}
	.order-data {
		width: 100%;
	}
	/* for sign dialog */
	.member-selection {
		right: 6px;
	}
}

/* for booking.html */
/* screen size <= 1000 */
@media (max-width: 1000px) {
	.none-booked-info-part {
		width: 100%;
		padding: 0 10px 0 10px;
	}
	.booking-section-area {
		width: 100%;
	}
	.book-headline {
		width: 100%;
		padding: 6px 10px 5px 10px;
	}
	.booking-section {
		width: 100%;
	}
	.booking-content {
		width: calc(100% - 30px);
	}
	.contact-pay-area {
		padding: 0 10px 0 10px;
	}
	.notice-text {
		margin-top: 5px;
	}
	.pay-area {
		padding: 0 10px 0 10px;
	}
}

/* for attraction.html */
/* screen size <= 850 */
@media (max-width: 850px) {
	#section {
		flex-direction: column;
		height: auto;
		gap: 20px;
		padding: 0;
		margin-top: 0;
	}
	#picture-current {
		width: 100%;
		height: 350px;
	}
	.picture-slide {
		height: 350px;
		border-radius: 0;
	}
	#attr-page-left-button, #attr-page-right-button {
		top: 157px;
	}
	#circle-set-area {
		bottom: 10px;
	}
	#profile {
		width: 100%;
		box-sizing: border-box;
		padding: 0 10px 0 10px;
	}
	#booking-form {
		height: 300px;
	}
	#order-description {
		font-weight: 400;
	}
}

/* for index.html */
/* <= 600 */
@media (max-width: 600px) {
	#attractions-group {
		gap: 15px;
		grid-template-columns: repeat(1,100%);
	}
	/* for booking.html */
	.booking-section {
		flex-wrap: wrap;
		height: auto;
		margin-bottom: 30px;
	}
	.booking-picture {
		width: 100%;
	}
	.booking-image {
		width: 100%;
	}
	.booking-infor {
		margin-top: 30px;
		margin-bottom: 30px;
	}
	.booking-delete-icon {
		bottom: 0;
	}
	.booking-content {
		width: 100%;
	}
	.notice-text {
		margin-top: 5px;
	}
	.member-order-headline {
		flex-direction: column;
	}
}
/* defult unseen */
.booked-info-part {
	display: none;
}
.common-info-part {
	display: none;
}
.member-info-part {
	display: none;
}
.unseen {
	display: none;
}