@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(//fonts.googleapis.com/earlyaccess/cwtexyen.css);
* {
    font-family: 'Noto Sans TC', sans-serif;
}
body { background: url('../images/bg.jpg');}

/*以下為共用*/
.setop { display: none }
/*.footer * { vertical-align: baseline; }*/

/* mainButton */
nav.mainButton { position: sticky; position: -webkit-sticky; top:0; width: 100%; background:#000 ; z-index: 10}
nav.mainButton ul { text-align: center; }
nav.mainButton ul li { display: inline-block; margin: 10px 0; padding: 0px 20px; font: 100 16px/16px "cwTeXYen"; color: #fff ; cursor: pointer; border-right: 1px solid #fff;
transition: .5s; -webkit-transition: .5s; }
nav.mainButton ul li:hover,
nav.mainButton ul li:hover a{ color: #fff200 }
nav.mainButton ul li img { vertical-align: top }
nav.mainButton ul li a,
nav.mainButton ul li a:link { font: 100 16px/16px "cwTeXYen"; color: #fff; }
/* mainButton */

.pageContainer{
	width: 100%;
	margin: auto;
	text-align: center;
	background-image: url('../images/bg.jpg');
}
img{
	width: 100%;
}
header h1{position: relative;}
header h1 .titleBg img{
	width: 100%;
}
header h1 .title{
	position: absolute;
	bottom: 0%;
	left: 5%;
}
header h1 .title img{
	width: 90%;
	max-width: 920px;
}
.fixBg{ background: url('../images/bg.jpg');}
.containerBase{
	width: 100%;
	padding: 20px;
}
.container1{
	background: url('../images/index_01.jpg'),top;
	background-size: 100%;
	padding: 20px 0px;
}
.container2{
	background: url('../images/index_02.jpg'),center;
	padding: 10% 0px;
}
.container3{
	background: url('../images/index_03.jpg'),center;
	padding: 10% 0px;
}
.container4{
	background: url('../images/index_04.jpg'),center;
	padding: 10% 0px;
}
.container5{
	background: url('../images/index_05.jpg'),center;
	padding: 10% 0px;
}
.ancArea{
	width: 90%;
	max-width: 1464px;
	margin: auto;
	padding: 20px 0px;
	font-size: 0px;
}
.ancBox{
	background-color: #0a626f;
	width: 49%;
	margin: 0.5%;
	padding: 1px;
	display: inline-block;
	cursor: pointer;
}
.ancBox .ancPhoto{
	width: 96%;
	margin: 2%;
	overflow: hidden;
}
.ancBox .ancPhoto img{
	width: 100%;
	transition: 1s;
}
/* .ancBox .ancPhoto img:hover{
	transform: scale(1.5, 1.5);
} */
.ancTxt{
	color: #fff;
	font-size: 16px;
	letter-spacing: 1px;
	margin: 15px 0px;
	font-weight: normal;
}
.mouseBase{
	margin: auto;
	width: 58px;
	height: 90px;
	border: 2px solid #fff;
	border-radius: 30px;
	background-color: rgba(255, 255, 255, 0.3);
	position: relative;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); 
}
.mouseRoad{
	position: absolute;
	width: 8px;
	height: 48px;
	border: 2px solid #fff;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.3);
	top: 5px;
	left: 23px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.mouseBall{
	position: absolute;
	width: 12px;
	height: 12px;
	top: 1px;
	left: -4px;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
	animation: mouse 2s infinite;
}
.infoArea{
	width: 90%;
	max-width: 1200px;
	margin: 1% auto;
	background-color: rgba(255, 255, 255, 0.8);
	font-size: 0px;
	text-align: left;
}
.infoImg,.infoTxt{
	display: inline-block;
	width: 90%;
	margin: 5%;
	vertical-align:middle;
}
.infoTxt{
	font-size: 16px;
	line-height: 30px;
	color: #333;
	font-weight: normal;
}
.infoTxt h3{
	color: #0a626f;
	font-size: 24px;
	line-height: 40px;
	padding-bottom: 15px;
}
.infoImg{
	overflow: hidden;
}
.infoImg img,.fullImg img{
	width: 100%;
}
.fullImg{
	margin: auto;
	width: 90%;
	padding-bottom: 20px;
}
@-webkit-keyframes mouse{
	0%{top:1px;}
	50%{top:30px;}
	100%{top:1px;}
}

/* c26 */
.group-type-ph{
	width: 90%;
	max-width: 1200px;
	margin-top: 10px;
	margin: auto;
	font-size: 0px;
}
.ph{
	display: inline-block;
	width: 100%;
	margin: 2% 0px;
	background-color: rgba(255, 255, 255, 0.8);
	position: relative;
}
.ph-img{
	width: 90%;
	margin: 5% auto;
}
.ph-img img{
	width: 100%;
}
.ph-title{
	color: #0a626f;
	font-size: 20px;
	line-height: 30px;
	font-weight: 500;
}
.ph-detail{
	color: #333;
	text-align: left;
	font-size: 16px;
	line-height: 20px;
	padding: 5%;
	height: 120px;
}
.price{
	color: #ff4a4a;
	position: absolute;
	bottom: 5px;
	right: 5px;
}
.price span{
	font-size: 24px;
	font-weight: 500;
}
.price i{
	vertical-align: baseline;
}


@media only screen and (max-width: 768px) {
	nav.mainButton { position: sticky; position: -webkit-sticky; top:0; z-index: 10; width: 100%; overflow: hidden;overflow-y: hidden; overflow-x:auto;-webkit-overflow-scrolling: touch;overflow-scrolling: touch; }
	nav.mainButton ul {position:relative; z-index: 10; padding: 0 0px; white-space:nowrap; width:auto; }	
	.buyButtonBase { position: fixed; top: calc(100vh - 60px) ; right: 0; width: 100%; height: 60px}
}
@media only screen and (min-width: 769px) {
	.ancBox{
		width: 23%;
		max-width: 350px;
	}
	.infoImg,.infoTxt{
		display: inline-block;
		width: 44%;
		margin: 3%;
	}
	.fullImg{
		margin: auto;
		width: 94%;
	}
	.container2{
		background: url('../images/index_02.jpg'),center;
		background-size: 100%;
	}
	.container3{
		background: url('../images/index_03.jpg'),center;
		background-size: 100%;
	}
	.container4{
		background: url('../images/index_04.jpg'),center;
		background-size: 100%;
	}
	.ph{
		width: 48%;
		margin: 1%;
	}
}
@media only screen and (min-width: 960px) {
	header h1 .title{
		top: calc(50% - 340px);
		left: calc(50% - 460px);
	}
	.ancTxt{
		font-size: 18px;
		margin: 25px 0px;
	}
	.infoTxt h3{
		font-size: 30px;
	}
	.container5{
		background: url('../images/index_05.jpg'),center;
		background-size: cover;
	}
}
@media only screen and (min-width: 1200px) {
	.ph{
		width: 23%;
		margin: 1%;
	}
	.ph:first-child{
		margin-left: 0%;
	}
	.ph:last-child{
		margin-right: 0%;
	}
}