@font-face {
	font-family: MSungHK;
	src: url('../font/MSungHK-Medium.otf');
}


/* 
================================================
--- MOBILE CSS 
================================================
*/
html, body {
	width: 100%; height: 100%;
}
body {
	font-family: MSungHK,"微軟正黑體", "Microsoft JhengHei", 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
}


.content {
	width: 95%;
	margin: 0 auto;

}
.h40 { width: 100%; height: 40px;}
img { width: 100%; }

.fp-controlArrow.fp-next {
	background-image: url('../images/mobile/Fillet_Right_Phone.png');
	border: none;
	width: 52px;
	height: 104px;
	opacity: 0.8;
	right: 0;
}

.fp-controlArrow.fp-prev {
	background-image: url('../images/mobile/Fillet_Left_Phone.png');
	border: none;
	width: 52px;
	height: 104px;
	opacity: 0.8;
	left: 0;
}

.fp-controlArrow.fp-next:hover {
	opacity: 1;
}

.fp-controlArrow.fp-prev:hover {
	opacity: 1;
}

/*-- S0 --*/
.Sec0home {
	background: url('../images/mobile/home1.jpg') center bottom no-repeat;
	background-size: cover;
    height: calc(100% - 41px);
    position: relative;
}

.hlogo {
	position: absolute;
	top: 30%;
    width: 60%;
    left: 20%;
}
.htxt {
    position: absolute;
    bottom: 14%;
    font-size: 14px;
    color: #bf9d5b;
    font-family: MSungHK,"微軟正黑體", "Microsoft JhengHei", 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    letter-spacing: 2px;
    text-align: center;
    width: 100%;
}

.logo_mob {
	position: fixed;
	z-index: 999;
	bottom: 4px;
	left: 77px;
}
	.logo_mob img {
		height:28px;
		width:auto;
	}

@media screen and (max-width: 800px) {
	.logo_mob {
		left: 27px;
	}
}
@media screen and (max-width: 480px) {
	.logo_mob {
		display:none;
	}
}

/*-- S0 --*/


/*-- S1 --*/
#section1 {
	overflow: hidden;
	position: relative;
}


	#section1 .p360 {
		height: 100%;
	}

@media screen and (min-width: 1920px) {
	.view360.slide {
		display: none;
	}

	.Sec1img1 {
		background: url(../images/mobile/s1/sec1img01.jpg) center top no-repeat;
		background-size: cover;
		height: 100vh;
		position: relative;
	}
}
/*-- S1 --*/

/*-- S2 --*/


/*-- S2 --*/


/*-- S3 --*/

/*-- S3 --*/




/*-- S4 --*/

/*-- S4 --*/

/*-- S5 --*/
#google_map {
	width: 100%;
	height: 40vh;
}

#section5 {
	background: url(../images/mobile/Bg_Mobile_01.jpg) center top repeat-y;
}

#section5 .text {
	width: 35%;
	display: inline-block;
	vertical-align: top;
	padding-bottom: 10%;
}
@media screen and (max-width: 1200px) {
	#section5 .text {
		width: 45%;
	}
}

@media screen and (max-width: 992px) {
	#section5 .text {
		width: 55%;
	}
}

@media screen and (max-width: 768px) {
	#section5 .text {
		width: 70%;
	}
}

@media screen and (max-width: 576px) {
	#section5 .text {
		width: 80%;
	}
	#section5 .text .tableline table th {
		font-size: 14px;
	}
	#section5 .text .tableline table td {
		font-size: 12px;
	}

}

@media screen and  (min-width :480px) {
	#google_map {
		height: 50vh;
	}
}


	#section5 .tableline {
		/*    border-top: 1px solid #C09D5B;
    border-bottom: 1px solid #C09D5B;
    padding: 12% 0;*/
	}

	#section5 .text .tableline table {
		width: 100%;
	}

		#section5 .text .tableline table th {
			padding-bottom: 8px;
			line-height: 1.5em;
			text-align: left;
			font-size: 20px;
			color: white;
			border-bottom: 1px solid rgba(255,255,255,0.5);
		}

		#section5 .text .tableline table td {
			padding-bottom: 8px;
			line-height: 1.5em;
			text-align: left;
			font-size: 18px;
			color: white;
			border-bottom: 1px solid rgba(255,255,255,0.5);
		}

			#section5 .text .tableline table td:nth-child(1) {
				width: 100px;
			}

	#section5 .text .storey38 {
		width: 90%;
		margin: 0 auto;
		padding: 20px 0;
	}

		#section5 .text .storey38 img {
			width: 90%;
		}

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


		#section5 .text .tableline table th {
			font-size: 14px;
		}

		#section5 .text .tableline table td {
			font-size: 12px;
		}
}

		/*-- S5 --*/

		/*-- S6 --*/
#section6 {
	background: url(../images/mobile/Bg_Mobile_02_Long.jpg) center top repeat-y;
}


#section6 {
	color: #ffffff;
}


	#section6 h2 {
		color: #ffffff;
		font-size: 28px;
	}

	#section6 p {
		color: #ffffff;
		font-size: 16px;
	}

	#section6 button {
		color: #003853;
		font-weight: bold;
	}

	#section6 a {
		color: yellow;
	}

	#section6 .btn-block {
		color: #003853;
		background-color: #ffffff;
		font-weight: bold;
	}

	

		/*-- S6 --*/

		/*-- S7 --*/
	
		/*-- S7 --*/


		/*-- S8 --*/

		#section8 ul {
			width: 100%;
			margin: 0px auto 10px auto;
			font-size: 0px;
		}

			#section8 ul li {
				width: 24%;
				display: inline-table;
				text-align: center;
			}

				#section8 ul li a {
					text-decoration: none;
					color: #000000;
				}

				#section8 ul li img {
					width: 90%;
				}

				#section8 ul li span {
					display: block;
					font-size: 12px;
					line-height: 18px;
					letter-spacing: 1px;
					text-align: center;
					padding: 5px 0;
					font-family: MSungHK,"微軟正黑體", "Microsoft JhengHei", 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
				}



		#section8 {
			width: 100%;
			position: relative;
			margin: 0 auto;
		}

			#section8 .fp-tableCell {
				vertical-align: top;
			}

		#lineupto {
			text-align: left;
		}


		#section8 .content {
			padding-bottom: 1em;
			padding-top: 1em;
		}

		#section8 h2 {
			color: #454545;
			font-size: 1.2em;
			font-weight: 600;
			letter-spacing: 2px;
			padding-bottom: 10px;
		}

		#section8 h3 {
			color: #454545;
			font-size: 1em;
			font-weight: 600;
			padding-bottom: 15px;
		}

		#section8 p {
			padding-bottom: 10px;
			color: #000;
			font-size: 12px;
		}

		.red {
			color: #ff0000;
		}

		#section8 table {
			width: 100%;
			margin-bottom: 10px;
		}

			#section8 table td {
				padding: 3px;
			}

			#section8 table .inputbox {
				width: 100%;
				height: 30px;
				border: 1px solid #999999;
				border-radius: 5px;
				text-indent: 10px;
				font-size: .9em;
				font-family: MSungHK,"微軟正黑體", "Microsoft JhengHei", 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
			}

			#section8 table .selectbox {
				width: 100%;
				height: 30px;
				border: 1px solid #999999;
				border-radius: 5px;
				text-indent: 6px;
				font-size: .8em;
				font-family: MSungHK,"微軟正黑體", "Microsoft JhengHei", 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
			}

		.checkbox {
			padding: 10px 0;
			font-size: .8em;
		}

			.checkbox input[type="checkbox"] {
				display: none;
			}

				.checkbox input[type="checkbox"] + label {
					cursor: pointer;
				}

					.checkbox input[type="checkbox"] + label span {
						display: inline-block;
						width: 24px;
						height: 20px;
						margin: -2px 4px 0 0;
						vertical-align: middle;
						background: url(../images/mobile/checkbox-checked.png) right top no-repeat;
					}

				.checkbox input[type="checkbox"]:checked + label span {
					background: url(../images/mobile/checkbox-checked.png) left top no-repeat;
				}

		button {
			cursor: pointer;
			border: 0;
		}

		.sent {
			width: 100px;
			height: 30px;
			font-size: 15px;
			color: #ffffff;
			border-radius: 5px;
			background-color: #999999;
			font-family: MSungHK,"微軟正黑體", "Microsoft JhengHei", 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
		}

		@media screen and (min-width :480px) {
			.content {
				width: 80%;
			}

			#section8 .fp-tableCell {
				vertical-align: middle;
			}

			#section8 ul {
				width: 90%;
				margin: 2% auto;
			}

				#section8 ul li img {
					width: 70%;
				}

			#section8 h2 {
				font-size: 1.5em;
			}

			#section8 table {
				margin-bottom: 15px;
			}

			#section8 h3 {
				font-size: 1.2em;
			}

			#section8 p {
				padding-bottom: 15px;
				font-size: 15px;
			}

			.checkbox {
				font-size: 1em;
				padding: 10px 0 30px 0;
			}

			.sent {
				width: 150px;
				height: 35px;
				font-size: 18px;
			}
		}
		/*-- S8 --*/



		/*-- footer --*/

		#footer {
			width: 100%;
			height: 40px;
			background-color: #183149;
			text-align: right;
			position: fixed;
			bottom: 0;
			vertical-align: middle;
			border-top: 1px solid #e5c058;
		}

			#footer ul {
				width: 100%;
				padding-top: 10px;
			}

				#footer ul li {
					display: inline-block;
					font-size: 17px;
					color: #FFFFFF;
					padding: 0 5px;
					font-family: MSungHK,"微軟正黑體", "Microsoft JhengHei", 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
				}

					#footer ul li:nth-child(1) {
						padding-right: 10px;
					}

					#footer ul li a {
						font-size: 17px;
						color: #FFFFFF;
						text-decoration: none;
					}



		/*-- footer --*/


		/*==  旋轉通知 ==*/
		.lock_wrp {
			display: none;
			position: fixed;
			width: 100%;
			height: 100%;
			overflow: hidden;
			left: 0;
			top: 0;
			background-color: rgba(0,0,0,.9);
			color: rgba(255,255,255,.8);
			z-index: 99;
		}

		.lock {
			position: absolute;
			left: 50%;
			top: 50%;
			width: 250px;
			height: 150px;
			margin: -75px 0 0 -125px;
			text-align: center;
		}

			.lock i {
				position: relative;
				display: block;
				width: 68px;
				height: 110px;
				background: url(../images/mobile/notrans.png) 0 0 no-repeat;
				background-size: 100%;
				margin: 0 auto;
				-webkit-transform: rotate(-90deg);
				transform: rotate(-90deg);
				-webkit-animation: iphone 1.6s ease-in infinite;
				animation: iphone 1.6s ease-in infinite;
			}

		@-webkit-keyframes iphone {
			0% {
				-webkit-transform: rotate(-90deg)
			}

			25% {
				-webkit-transform: rotate(0deg)
			}

			50% {
				-webkit-transform: rotate(0deg)
			}

			75% {
				-webkit-transform: rotate(-90deg)
			}

			100% {
				-webkit-transform: rotate(-90deg)
			}
		}

		@keyframes iphone {
			0% {
				transform: rotate(-90deg)
			}

			25% {
				transform: rotate(0deg)
			}

			50% {
				transform: rotate(0deg)
			}

			75% {
				transform: rotate(-90deg)
			}

			100% {
				transform: rotate(-90deg)
			}
		}

		#content {
			position: absolute;
			width: 100%;
			height: 100%;
			background: #3c98d1;
			overflow: hidden;
			left: 0;
			top: 0;
			color: white;
		}

		@media screen and (orientation: landscape) {
			.lock_wrp {
				display: block;
			}
		}
		/*==  旋轉通知結束 ==*/