/******************************************************************************************
******************************************************************************************

---主題色系---
預設：藍綠色default：#00c4cc / hover-#00b0b7
藍色blue：#4285f4 / hover-#0d5bdd
紅色red：#ea4335 / hover-#bf2114
深灰色dark：#233446 / hover-#3d5a79
紫色purple：#6a3be4 / hover- #4619b9
奶茶色milktea：#E1A679 / hover- #d37c3a


白色：#fff
深灰：#666
淺灰：#e3e3e4
border-radius: 0.3rem;

******************************************************************************************
******************************************************************************************/

.text-main {
 color: #E1A679;
}
p {
	margin-bottom: .5rem;
	font-size: 16px;
}
.btn-secondary {
	border-radius: 0.3rem;
	background-color:transparent;
	color: #000;
	border-color: #000;
	padding: .75rem 1.5rem;
}
.active_timer {
	background: #E1A679 !important;
}
/******************************************************************************************

Title Area

******************************************************************************************/
.indextitle {
	overflow: hidden;
}
.indextitle h3:after {
	content:"";
	position: absolute;
	left: 0;
	top: 50%;
	width: 30%;
	height: 1px;
	background: #000;
}
.indextitle h3:before {
	content:"";
	position: absolute;
	right: 0;
	top: 50%;
	width: 30%;
	height: 1px;
	background: #000;
}
.card {
	border: none;
}
/******************************************************************************************

Reserve Index Area

******************************************************************************************/
.indextitle2 {
	border-bottom: 1px solid #e3e3e4;
	padding-left: 15px;
}
.button-box {
	margin-bottom: 120px;
	padding: 0 15px;
}


/******************************************************************************************

Main Area

******************************************************************************************/

.card-title span {
	font-size: 16px;
}
.card-img {
	overflow: hidden;
}
.card-img:hover img {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	-webkit-transition: all .6s ease-out;
  	-moz-transition: all .6s ease-out;
  	transition: all .6s ease-out;
}


/******************************************************************************************

Fixed Nav Area

******************************************************************************************/
.bottom-nav {
	height: 80px;
	background: #e3e3e4;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 2;
	width:100vw;
	margin-right:auto;
	margin-left:auto;
	padding-right:15px;
	padding-left:15px;
	max-width:100vw;
	overflow: hidden;
	-webkit-box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, .1);
	-moz-box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, .1);
	box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, .1);
}
.bottom-nav a {
	color: #000;
}
/* .nav-box:hover a {
	color: #E1A679;
	-webkit-transition: all .3s ease-in-out;
  	-moz-transition: all .3s ease-in-out;
  	transition: all .3s ease-in-out;
} */
.bottom-nav a img {
	width: 40px;
	max-width: 40px;
	height: auto;
}
/* .nav-box:hover .nav-img-1 {
	 content: url('../../images/nav-13.svg');
	-webkit-transition: all .5s ease-in-out;
  	-moz-transition: all .5s ease-in-out;
  	transition: all .5s ease-in-out;
}
.nav-box:hover .nav-img-2 {
	 content: url('../../images/nav-23.svg');
	-webkit-transition: all .5s ease-in-out;
  	-moz-transition: all .5s ease-in-out;
  	transition: all .5s ease-in-out;
}
.nav-box:hover .nav-img-3 {
	 content: url('../../images/nav-33.svg');
	-webkit-transition: all .5s ease-in-out;
  	-moz-transition: all .5s ease-in-out;
  	transition: all .5s ease-in-out;
}
.nav-box:hover .nav-img-4 {
	 content: url('../../images/nav-43.svg');
	-webkit-transition: all .5s ease-in-out;
  	-moz-transition: all .5s ease-in-out;
  	transition: all .5s ease-in-out;
} */
.nav-box span {
	display: block;
	font-size: 16px;
}
/******************************************************************************************

Inquire Area

******************************************************************************************/
.inquire {
	padding: 0 15px;
}
/******************************************************************************************

Cancel / Cancel Sucess Area

******************************************************************************************/
.cancel {
	background: #e3e3e4;
}
.Sucess-info {
	letter-spacing: 1px;
}
.Sucess-info a,
.Sucess-info a:hover,
.Sucess-info a:focus,
.Sucess-info a:active {
	color: #E1A679;
	text-decoration: underline;
}
/******************************************************************************************

Date Picker Area

******************************************************************************************/
.time-box {
	margin: 0 12px;
	font-size: 16px;
}

.time-box a,
.time-box a:focus,
.time-box a:active {
	color: #000;
}
.time-box span {
	color: #666;
}
.timer {
	padding: .5rem .75rem;
	border:1px solid #E1A679;
	border-radius: 2rem;
}
.timer:hover,
.timer:focus,
.timer:active {
	background: #E1A679;
}
.timer:hover a,
.timer:focus a,
.timer:active a {
	color: #fff;
}








/******************************************************************************************

Extra small devices (portrait phones, less than 576px)

******************************************************************************************/
@media (max-width: 320px) {
	.indextitle h3:after,
	.indextitle h3:before {
		width: 28%;
	}
	.nav-box span {
		font-size: 14px;
	}
	.bottom-nav {
		padding: 0;
	}
}


@media (max-width: 360px) {
	.indextitle h3:after,
	.indextitle h3:before {
		width: 28%;
	}
	.nav-box span {
		font-size: 14px;
	}
	.bottom-nav {
		padding: 0;
	}
}


@media (max-width: 480px) {
	.indextitle h3:after,
	.indextitle h3:before {
		width: 30%;
	}
	.nav-box span {
		font-size: 14px;
	}
	.bottom-nav {
		padding: 0;
	}
}



/******************************************************************************************

Small devices (landscape phones, 576px and up)

******************************************************************************************/

@media (min-width: 576px) and (max-width: 767px) {
	.nav-box span {
		font-size: 16px;
	}
	.bottom-nav {
		padding: 0;
	}
}



/******************************************************************************************

Medium devices (tablets, 768px and up)

******************************************************************************************/

@media (min-width: 768px) and (max-width: 991px) {
	.nav-box span {
		font-size: 16px;
	}
	.bottom-nav {
		height: 80px;
		padding-left: 15px;
	}
}


/******************************************************************************************

Extra large devices (large desktops, 1200px and up)

******************************************************************************************/

@media (min-width: 1200px) {
	.indextitle h3:after,
	.indextitle h3:before {
		width: 35%;
	}
	.nav-box span {
		font-size: 16px;
	}
	.bottom-nav {
		height: 80px;
		padding-left: 15px;
	}
}