:root {

	--mainColor: rgba(30, 30, 30, 1);

	--mainFontColor: rgba(30, 30, 30, 1);

	--mainBorder: 1.5px solid var(--mainFontColor);

}



#home {

	/* background-image: url(img/home.jpg);

	background-position: left; */

	height: auto;

	max-height: initial;

}



.homeCover {

	/* background-color:rgba(240,240,240,0.5); */

}



.homeCover h4 {

	width: auto;

	background-color: #fff;

	padding: 0 10px;

}



.homeCover h4:first-child {

	margin-bottom: 1.7em;

}



#mainBg {

	background-image: url(img/.jpg);

}



.mainCover {

	background-color: rgba(240, 240, 240, 0.2);

}



.menuTitle {

	text-align: center !important;

	margin-bottom: 1em !important;

	font-weight: 300;

	font-size: 20px;

	color: gray;

	letter-spacing: 2px;

	margin: auto;

}



.menuText {

	color: gray;

	font-size: 15px !important;

	line-height: 23px !important;

}



.menuLine {

	height: 2px;

	background-color: var(--mainColor);

	width: 40px;

	margin: 0 auto 10px;

}



.menuArea h3,

.menuArea li {

	text-align: center;

}



.mainList li a {

	font-weight: bold;

}



.scollMenu {

	background-color: #ffffff90;

}



header {

	background-color: #ffffff90;

}



h3 {

	font-weight: 700;

}



article>h3 {

	text-align: center;

	margin-bottom: 30px;

	color: var(--mainColor);

}



p,

li,

a,

h2 {

	font-weight: 400;

}



#sns ul li a,

.slick-next,

.slick-arrow {

	filter: brightness(0);

}



.newsArea a {

	margin: auto;

	padding: 10px;

	width: 90%;

	text-align: center;

	background-color: var(--mainColor);

	color: #eccb89;

}



.newsArea a:hover {

	opacity: 0.7;

}



.number ul {

	list-style-type: disc;

	list-style-position: outside;

	list-style: normal !important;

	margin: 0px;

	padding-left: 2em;

}



.number li {

	list-style: inherit !important;

	display: list-item;

}



.aboutFlex {

	display: flex;

	flex-wrap: wrap;

	justify-content: space-between;

}



.aboutFlex div {

	width: 49%;

	margin-bottom: 30px;

}



.aboutFlex>div {

	align-self: center;

}



.aboutFlex p {

	text-align: justify;

	width: 80%;

	margin: auto;

	max-width: 800px;

}



article {

	overflow: hidden;

}



article>p {

	text-align: center;

}



#product>article {

	overflow: visible;

}



#roomType2 h3,

#roomType2 p {

	text-align: justify;

	line-height: 1.5;

	margin-bottom: 15px;

}



.roomTypeItem a :hover {

	transform: scale(0.8);

	transition: 0.5s;

}



.roomTypeArea h3,

.roomTypeArea p {

	text-align: center;

}



.roomTypeText p {

	font-size: 18px;

}



p {

	font-size: 18px;

}



.roomTypeText>p>img {

	width: 30px;

	height: 30px;

	margin: 0;

}



.roomTypeText p {

	display: flex;

}



#roomType1 p {

	justify-content: center;

}

.btn{
	float: left;
}
.btn a{
	border: #000 solid 2px;
	padding: 10px;
	margin:5px;
	width: 30%;
	text-align: center;
}
.animateLeftToRight {

	position: relative;

	right: 100px;

	opacity: 0;

	transition: opacity 1s ease-in-out, right 1s ease-in-out;

}



.animateRightToLeft {

	position: relative;

	left: 100px;

	opacity: 0;

	transition: opacity 1s ease-in-out, left 1s ease-in-out;

}



.animateBottomToTop {

	position: relative;

	top: 100px;

	opacity: 0;

	transition: opacity 1s ease-in-out, top 1s ease-in-out;

}



.supportLine {

	height: 2px;

	width: 60px !important;

	background-color: var(--mainColor);

	margin: 0 auto 50px;

}



#sns .tel {

	background-image: url(img/tel.svg);

}



#sns .map {

	background-image: url(img/map.svg);

}



#traffic div {

	width: 100%;

}



.trafficText li {

	text-align: center;

	min-width: 300px;

	margin: 20px 0;

}



.trafficText ol {

	display: flex;

	flex-wrap: wrap;

	justify-content: space-around;

	align-items: center;

}



.menuItem span {

	font-size: 0.5em;

}



#menu article {

	padding-bottom: 0px;

}



.how {

	display: flex;

	align-items: center;

	justify-content: center;

	margin-bottom: 30px;

}



.how h3 {

	margin: 0;

}



.how>div {

	max-width: 603px;

}



.how img {

	width: 80px;

	height: 80px;

	margin-right: 20px;

}



.proArea {

	display: flex;

	flex-wrap: wrap;

	justify-content: space-around;

}



.proArea p {

	text-align: center;

}



.item2 {

	width: 46%;

	margin: 0 2% 80px 2%;

}



.item3 {

	margin-bottom: 40px;

}



.item4 {

	width: 25%;

	margin-bottom: 40px;

}

.btn_group a:hover {

    background-color:#ab7a52;

    color:white;

}

.btn_group a {

    padding: 5px;

    border: 2px solid black;

    color: black;

    font-size: 18px;

    margin-top: 20px;

    width: 30%;

    text-align: center;

    transition: 0.5s;

}

.btn_group a {

   margin: auto;

   flex-wrap: wrap;

}

a:hover {

    text-decoration: none;

}



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

.picture article {

	display: flex;

	flex-wrap: wrap;

	justify-content: space-around;

}



.picture article h3 {

	width: 100%;

}



.picture article p {

	width: 100%;

}



.picture article a {

	width: 46%;

	margin: 20px 2%;

}



.picture article.cc1 a {

	width: 90%;

	margin: 20px auto;

}



.picture article.cc2 a {

	width: 40%;

	margin: 20px 5%;

}



.picture article .clear {

	width: 46%;

	margin: 0 2%;

}



.picture article.cc1 .clear {

	width: 90%;

	margin: 0 auto;

}



.picture article.cc2 .clear {

	width: 40%;

	margin: 0 5%;

}



.picture article a span {

	position: absolute;

	bottom: 0;

	left: 0;

	display: block;

	width: calc(100% - 20px);

	padding: 10px 10px;

	background-color: rgba(18, 18, 18, 0.85);

}



.picture a {

	overflow: hidden;

}



.picture a img {

	transition: all 0.35s, transform 0.35s;

	transform: scale3d(1.05, 1.05, 1);

}



.picture a:hover img {

	transform: scale3d(1, 1, 1);

}



.picture article a span {

	color: #fff;

}



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



.videoDiv {

	width: 48%;

	margin-bottom: 15px;

}



.video-container {

	position: relative;

	padding-bottom: 56.25%;

	padding-top: 30px;

	height: 0;

	overflow: hidden;

}



.video-container iframe,

.video-container object,

.video-container embed {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

}





@media only screen and (max-width: 1200px) {

	.aboutFlex {

		flex-wrap: wrap;

	}



	.aboutFlex div {

		width: 100% !important;

	}

}



@media only screen and (max-width: 1052px) {

	.trafficText p {

		display: none;

	}



	.aboutFlex p {

		width: 100%;

	}



}



@media only screen and (max-width: 950px) {

	ul.mainList li a {

		color: #ffffff;

	}

}



@media only screen and (max-width: 770px) {





	.item4 {

		width: 50%;

	}



	.videoDiv {

		width: 100%;

	}



	.how h3 {

		font-size: 24px;

	}



	p {

		font-size: 16px;

	}



	.roomTypeText p {

		font-size: 16px;

	}



	#roomType2 .roomTypeArea>div:nth-of-type(1) {

		order: 10;

	}



	#roomType2 .roomTypeArea>div:nth-of-type(2) {

		order: 20;

	}



	#roomType2 .roomTypeArea>div:nth-of-type(3) {

		order: 40;

	}



	#roomType2 .roomTypeArea>div:nth-of-type(4) {

		order: 30;

	}



	#roomType2 .roomTypeArea>div:nth-of-type(5) {

		order: 50;

	}



	#roomType2 .roomTypeArea>div:nth-of-type(6) {

		order: 60;

	}



	#roomType2 .roomTypeArea>div:nth-of-type(7) {

		order: 60;

	}



	#roomType2 .roomTypeArea>div:nth-of-type(8) {

		order: 70;

	}

}



@media only screen and (max-width: 600px) {

	/* .item3 {

		width: 100% !important;

	} */



	header {

		background-color: #fff;



	}



	.scollMenu {

		background-color: #ffffff;

	}



	#home {

		padding-top: 92px;

	}



	.navBar {

		filter: brightness(0);

	}

}



@media only screen and (max-width: 480px) {

	.item2 {

		width: 80%;

		margin: 0 auto 40px auto;

	}



	.picture article a {

		width: 100%;

	}



	#sns {

		left: 5px;

		bottom: -2px;

	}



	.roomTypeText>p>img {

		width: 25px;

		height: 25px;

	}

}



/* ===========新增button style============= */



#btn_add {

	float: right;

	outline: none;

	transition: all 0.5s;

	width: 100px;

	border-radius: 30px;

	height: 30px;

	border: 1px solid black;

}



#btn_add[value="點我至賣場"] {

	color: rgb(0, 0, 0);

}



#btn_add:hover {

	background-color: rgb(0, 0, 0);

}



#btn_add[value="點我至賣場"]:hover {

	color: blanchedalmond;

}