@charset "UTF-8";

/* -------------------------------------------------------------------- */

/**
 * Fonts
 */
 
 @font-face {
  font-family: "RawMarukoGothicCjkTc";
  src: url("../fonts/RawMarukoGothicCjkTc-Regular.ttf");
}

/* -------------------------------------------------------------------- */

/**
 * Common
 */
 
* {
    *zoom: 1;
    -webkit-text-size-adjust: none;

}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

html, body{
	width: 100%;
    min-width: 320px;
    min-height: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.2;
	overflow-x: hidden;
}

html {
    background-color: #6653ac;
}

body {
	font-family: 'RawMarukoGothicCjkTc';
    font-size: 36px;
    color: #ffffff;
	background-color: #6653ac;

}

a {
	cursor: pointer;
    color: #ffffff;
	text-decoration: none;
}
a:hover,
a:focus,
a:active {
    color: #ffffff;
	text-decoration: none;
}

.desktop-container {
	display: block;
}
.mobile-container {
	display: none;
}

@media (max-width: 1199px)
{
	.desktop-container {
		display: none;
	}
	.mobile-container {
		display: block;
	}
}

@media (max-width: 991px)
{
	body {
		font-size: 18px;
	}
}
@media (max-width: 575px)
{
	body {
		font-size: 14px;
	}
}

/* -------------------------------------------------------------------- */

/**
 * Header
 */

.site-header {
    width: 100%;
    height: 211px;
    background-image: url('../images/header-background.jpg');
    background-repeat: repeat-x;
	background-position: center;
	background-size: contain;
}
	.site-header .navbar-brand {
		position: relative;
		display: inline-block;
		width: 250px;
		height: 72px;
		text-align: center;
	}
		.site-header .navbar .nav-link {
			padding: 5px 40px;
		}
		.site-header .navbar-brand .site-logo {
			background-image: url('../images/logo.svg');
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}
	
	.site-header .header-destination {
		font-size: 24px;
		color: #666666;
		padding-top: 1.5rem;
		padding-bottom: .8rem;
	}
		.site-header .header-destination .destination {
			padding-left: 0.5rem;
			padding-right: 1.5rem;
		}
		.site-header .header-destination .destination .btn-apply {
			display: inline-block;
			padding: 5px 10px;
			background-color: #655EB3;
			border-radius: 18px;
			margin-top: -10px;
		}

@media (min-width: 992px)
{
	.site-header .navbar {
		padding-top: 1rem;
		padding-bottom: 3rem;
	}
}
@media (max-width: 991px)
{
	.site-header {
		height: 150px;
	}
		.site-header .navbar {
			padding-bottom: 2.4rem;
		}
			.site-header .navbar-brand {
				width: 178px;
				height: 51px;
			}
			.site-header .navbar .nav-link {
				padding: 5px 40px;
			}
		.site-header .header-destination {
			font-size: 12px;
			padding-top: 1.2rem;
			padding-bottom: 1.2rem;
		}
}
@media (max-width: 767px) {
	.site-header .navbar .nav-link {
		padding: 5px 15px;
	}
}
@media (max-width: 575px)
{
	.site-header {
		height: 80px;
	}
		.site-header .navbar {
			padding-top: 8px;
			padding-bottom: 16px;
		}
			.site-header .navbar-brand {
				width: 78px;
				height: 24px;
			}
			.site-header .navbar .navbar-collapse {
				margin-right: -10px;
			}
			.site-header .navbar .nav-link {
				padding: 5px 10px;
				padding-left: 10px;
			}
			
		.site-header .header-destination {
			padding-top: 1px;
			padding-bottom: 0;
		}
			.site-header .header-destination .destination {
				padding-left: .25rem;
				padding-right: .25rem;
			}
				.site-header .header-destination .destination .btn-apply {
					margin-top: 2px;
				}
}

@media (max-width: 320px) {
	.site-header .navbar .nav-link{
		padding: 0px 3px;
		padding-left: 6px;
		font-size: 12px;	
	}
	.site-header .header-destination .destination{
		padding:0;
	}
		.site-header .header-destination .destination span{
			font-size: 12px;
		}
	.site-header .header-destination .destination .btn-apply {
		margin-top:-9px;
	}
	.site-header .header-destination .destination-apply {
		width: 15%;
	}

}


/* -------------------------------------------------------------------- */

/**
 * Banner
 */
.site-banner {
	position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
	padding-top: 211px;
}
.site-banner .banner {
	position: relative;
	display: block;
	width: 100%;
	padding-top: 50%;
}
	.site-banner .banner>.img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		
	}

@media (max-width: 991px)
{
	.site-banner {
		padding-top: 150px;
	}
}
@media (max-width: 575px)
{
	.site-banner {
		padding-top: 80px;
	}
}
		
/* -------------------------------------------------------------------- */

/**
 * Body
 */
 
.site-content {
	position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    background-image: url('../images/site-background.jpg?v=1');
	background-repeat: repeat;
	background-position: top center;
	background-size: 150%;
	
}

/* -------------------------------------------------------------------- */

/**
 * 禮遇
 */

.treatment-wrap {
	position: relative;
    top: 0;
    left: 0;
    width: 100%;
}
	.treatment-wrap .treatment-intro {
		margin-top: 100px;
		text-align: center;
		text-shadow: 0 0 1px #ffffff, -2px 5px 7px #000000;
		letter-spacing: 0.5px;
	}
			.treatment-wrap .treatment-intro .treatment-date {
				display: inline-block;
				background-color: #FF1F7A;
				padding: 10px 35px;
				border-radius: 35px;
				font-size: 48px;
				color: #E9C564;
				text-shadow: 0 0 2px #e9c564, -2px 8px 7px #000000;
			}
		
		.treatment-wrap .treatment-details-header {
				position: relative;
				width: 100%;
				height: 0;
				padding-top: 44%;
				margin-top: 10px;
				z-index: 1;
			}
				.treatment-wrap .treatment-details-header>.img {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center;
					
				}
				
		.treatment-wrap .treatment-details {
			position: relative;
			top: 0;
			left: 0;
			margin-top: -160px;
			background-color: #FFC55A;
			padding: 30px;
			padding-top: 145px;
			border-radius: 15px;
			text-align: center;
		}
			.treatment-wrap .treatment-details .treatment-limit-title-header {
				position: relative;
				width: 100%;
				height: auto;
				padding-top: 10%;
			}
				.treatment-wrap .treatment-details .treatment-limit-title-header>.img {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center;
					z-index: 0;
				}
			
			.treatment-wrap .treatment-details .treatment-limit-title {
				z-index: 1;
			}
			.treatment-wrap .treatment-details h2.treatment-title {
				display: inline-block;
				font-size: 48px;
				background-color: #ffffff;
				padding: 5px 35px;
				border-radius: 35px;
				color: #e21e79;
				text-shadow: 0 0 2px #e21e79;
				margin-bottom: 15px;
			}
			.treatment-wrap .treatment-details h3.treatment-title {
				display: inline-block;
				font-size: 46px;
				background-color: #ffffff;
				opacity: 0.78;
				padding: 5px 35px;
				border-radius: 35px;
				color: #e21e79;
				text-shadow: 0 0 2px #e21e79;
				margin-bottom: 15px;
			}
			.treatment-wrap .treatment-details .treatment-desc {
				color: #662D86;
				text-shadow: 0 0 1px #662D86;
			}
			.treatment-wrap .treatment-details .treatment-details-social-wrap {
				width: 100%;
				margin-top: 15px;
				margin-bottom: 15px;
				padding: 0 25%;
			}
				.treatment-wrap .treatment-details .treatment-details-social-wrap .btn-social {
					display: inline-block;
					position: relative;
					width: 145px;
					height: 145px;
				}
					.treatment-wrap .treatment-details .treatment-details-social-wrap .btn-social>.img {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background-size: contain;
						background-repeat: no-repeat;
						background-position: center;
						z-index: 0;
					}
			.treatment-wrap .treatment-details .treatment-followus {
				display: inline-block;
				font-size: 60px;
				background: linear-gradient(180deg, transparent 50%, #FFFF00 50%), #FFC55A;
				background-blend-mode: multiply;
				padding: 5px 35px;
				color: #662D86;
				text-shadow: 0 0 2px #662D86;
				margin-bottom: 45px;
			}
			.treatment-wrap .treatment-details .treatment-address {
				display: inline-block;
				color: #E21E79;
				text-shadow: 0 0 2px #E21E79;
				margin-bottom: 15px;
			}
			
		.treatment-wrap .treatment-details-followus-img {
			position: absolute;
			bottom: 55px;
			width: 25%;
			padding-top: 38%;
			background-size: contain;
			background-repeat: no-repeat;
			z-index: 0;
		}
		.treatment-wrap .treatment-details-followus-img.img-left {
			background-position: left;
			left: -40px;
		}
		.treatment-wrap .treatment-details-followus-img.img-right {
			background-position: right;
			right: -40px;
		}
		
@media (max-width: 991px)
{
	.treatment-wrap .treatment-intro .treatment-date {
		padding: 5px 24px;
		border-radius: 24px;
		font-size: 24px;
	}
	.treatment-wrap .treatment-details h2.treatment-title {
		padding: 5px 24px;
		border-radius: 24px;
		font-size: 24px;
	}
	.treatment-wrap .treatment-details h3.treatment-title {
		padding: 5px 22px;
		border-radius: 22px;
		font-size: 22px;
	}
	.treatment-wrap .treatment-details .treatment-details-social-wrap {
		padding: 0 20%;
	}
		.treatment-wrap .treatment-details .treatment-details-social-wrap .btn-social {
			width: 96px;
			height: 96px;
		}
	.treatment-wrap .treatment-details .treatment-followus {
		font-size: 48px;
	}
	.treatment-wrap .treatment-details-followus-img {
		padding-top: 60%;
	}
}

@media (max-width: 575px)
{
	.treatment-wrap .treatment-intro {
		margin-top: 80px;
	}
		.treatment-wrap .treatment-intro .treatment-date {
			padding: 5px 14px;
			border-radius: 14px;
			font-size: 14px;
		}
		.treatment-wrap .treatment-details-header {
			margin-top: 12px;
		}
		.treatment-wrap .treatment-details {
			margin-top: -66px;
			padding-top: 68px;
		}
			.treatment-wrap .treatment-details h2.treatment-title {
				padding: 5px 18px;
				border-radius: 18px;
				font-size: 18px;
			}
			.treatment-wrap .treatment-details h3.treatment-title {
				padding: 5px 16px;
				border-radius: 16px;
				font-size: 16px;
			}
		.treatment-wrap .treatment-details .treatment-details-social-wrap {
			padding: 0 20%;
		}
			.treatment-wrap .treatment-details .treatment-details-social-wrap .btn-social {
				width: 68px;
				height: 68px;
			}
		.treatment-wrap .treatment-details .treatment-followus {
			font-size: 24px;
		}
		.treatment-wrap .treatment-details-followus-img.img-left {
			left: -8px;
		}
		.treatment-wrap .treatment-details-followus-img.img-right {
			right: -8px;
		}
		.treatment-wrap .treatment-details .treatment-address {
			font-size: 14px;
		}
}

@media (max-width: 320px) {
	.treatment-wrap .treatment-intro{
		margin-top:30px;
	}

	.treatment-wrap .treatment-details .treatment-details-social-wrap {
		padding: 0 10%;
	}
	.treatment-wrap .treatment-details .treatment-followus {
		font-size: 16px;
		padding: 5px 15px;
	}
	.treatment-wrap .treatment-details-followus-img {
		width: 23%
	}
}
/* -------------------------------------------------------------------- */

/**
 * 打卡熱點
*/
.hotspot-wrap {
	position: relative;
    top: 0;
    left: 0;
    width: 100%;
	margin-top: 50px;
}
	/* Hotspot Title */
	.hotspot-wrap .hotspot-title-header {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		text-align: center;
	}
		.hotspot-wrap .hotspot-title-header .hotspot-header-img {
			background-repeat: no-repeat;
			background-size: contain;
			width: 100%;
			height: 383px;
			position: absolute;
			left: 53px;
			top: 0;
		}
		.hotspot-wrap .hotspot-title-header .hotspot-title {
			font-size: 90px;
			text-align: center;
			background-color: #C480E4;
			border-radius: 50px;
			display: inline-block;
			padding: 8px 50px;
			padding-left: 264px;
			margin-top: 132px;
			margin-bottom: 130px;
			text-shadow: 0 0 2px #ffffff;
		}

	.hotspot-wrap .hotspot-card-wrap {
		margin-top: 40px;
	}
		/* Hotspot Card 1 */
		.hotspot-wrap .hotspot-card-wrap .hotspot-card1 {
			width: 100%;
			height: 600px;
			padding: 50px 20px;
			background-color: #EBE2F0;
			border-radius: 15px;
			text-align: center;	
			position: relative;
		}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card1 .hotspot-gps-title {
				text-shadow: 0 0 2px #ffffff;
				background-color: #7836BB;
				border-radius: 50px;
				padding: 5px 10px 5px 30px;
				position: absolute;
				left: 113px;
				top: -27px;
			}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card1 .hotspot-gps-img {
				background-repeat: no-repeat;
				background-size: contain;
				width: 74px;
				height: 134px;
				position: absolute;
				left: 105px;
				top: -100px;
				z-index: 1;
			}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card1 .hotspot-img .hotspot-card-01-img {
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
				width: 100%;
				height: 513px;
				display: block;
			}

		/* Hotspot Card 2 */
		.hotspot-wrap .hotspot-card-wrap .hotspot-card2 {
			width: 100%;
			height: 340px;
			padding: 50px 20px;
			background-color: #EBE2F0;
			border-radius: 15px;
			text-align: center;	
			position: relative;
			margin-bottom: 200px;
		}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card2 .hotspot-gps-title {
				text-shadow: 0 0 2px #ffffff;
				background-color: #7836BB;
				border-radius: 50px;
				padding: 5px 5px 5px 35px;
				position: absolute;
				left: 0px;
				top: -60px;
				width: 464px;
				font-size: 30px;
			}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card2 .hotspot-gps-img {
				background-repeat: no-repeat;
				background-size: contain;
				width: 74px;
				height: 134px;
				position: absolute;
				left: -5px;
				top: -100px;
				z-index: 1;
			}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card2 .hotspot-img .hotspot-card-02-img {
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
				width: 100%;
				height: 270px;
				display: block;
			}

		/* Hotspot Card 3 */
		.hotspot-wrap .hotspot-card-wrap .hotspot-card3 {
			width: 100%;
			height: 340px;
			padding: 40px 20px;
			background-color: #EBE2F0;
			border-radius: 15px;
			text-align: center;	
			position: relative;
		}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card3 .hotspot-gps-title {
				text-shadow: 0 0 2px #ffffff;
				background-color: #7836BB;
				border-radius: 50px;
				padding: 5px;
				position: absolute;
				left: 113px;
				top: -27px;
				padding-left: 39px;
			}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card3 .hotspot-gps-img {
				background-repeat: no-repeat;
				background-size: contain;
				width: 74px;
				height: 134px;
				position: absolute;
				left: 107px;
				top: -113px;
				z-index: 1;
			}
		.hotspot-wrap .hotspot-card-wrap .hotspot-card3 .hotspot-img .hotspot-card-03-img {
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
			width: 100%;
			height: 270px;
			display: block;
		}


	/* Trip route */
	.hotspot-wrap .trip-route {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 30px 0;
	}

	.hotspot-wrap .trip-route .trip-route-title {
		display: inline-block;
		font-size: 48px;
		background-color: #C480E4;
		padding: 5px 35px;
		border-radius: 35px;
		color: #FFFFFF;
		text-shadow: 0 0 2px #FFFFFF;
		color: #FFFFFF;
		margin-bottom: 30px;
	}

	.hotspot-wrap .trip-route .trip-route-desc {
		color: #FFFFFF;
	}
		.hotspot-wrap .trip-route .trip-route-desc span {
			text-shadow: 1px 1px 1px #662d86, -1px 1px 1px #662d86, 1px -1px 1px #662d86, -1px -1px 1px #662d86;
			font-size: 28px
		}


	/* COMMING SOON - Hotspot footer */
	.hotspot-wrap .hotspot-footer {
		height: 132px;
	}	

		.hotspot-wrap .hotspot-footer .hotspot-footer-img-warp {
			display: inline-block;

		}
		.hotspot-wrap .hotspot-footer .hotspot-footer-img {
			background-repeat: no-repeat;
			background-size: contain;
			height: 130px;
			width: 130px;
			display: inline-block;
		}	

		.hotspot-wrap .hotspot-footer .hotspot-footer-text {
			display: inline-block;
			text-shadow: 1px 1px 1px #662d86, -1px 1px 1px #662d86, 1px -1px 1px #662d86, -1px -1px 1px #662d86;
		}

@media (max-width: 991px) {
	.hotspot-wrap {
		margin-top: 100px;
		scroll-margin-top: 160px;
	}
	/* Hotspot-header */
	.hotspot-wrap .hotspot-title-header .hotspot-header-img {
		height: 200px;
		left: 57px;
	}

	.hotspot-wrap .hotspot-title-header .hotspot-title {
		font-size: 70px;
		padding-left: 130px;
		margin-top: 50px;	
	}

	/* Hotspot Card 1 */
	.hotspot-wrap .hotspot-card-wrap .hotspot-card1 {
		height: 475px;
		padding: 50px 20px;
	}
		.hotspot-wrap .hotspot-card-wrap .hotspot-card1 .hotspot-gps-title {
			font-size: 34px;
			left: 61px;
		}
		.hotspot-wrap .hotspot-card-wrap .hotspot-card1 .hotspot-gps-img {
			height: 120px;
			left: 55px;
			top: -92px;
		}
		.hotspot-wrap .hotspot-card-wrap .hotspot-card1 .hotspot-img .hotspot-card-01-img {
			height: 405px;
		}
	/* Hotspot Card 2 */
	.hotspot-wrap .hotspot-card-wrap .hotspot-card2 {
		height: 280px;
		padding: 50px 20px;
	}
		.hotspot-wrap .hotspot-card-wrap .hotspot-card2 .hotspot-gps-title {
			font-size: 24px;
			width: 356px;
			top: -35px;
			padding: 5px 5px 5px 42px;	
			left: -7px;	
		}
		.hotspot-wrap .hotspot-card-wrap .hotspot-card2 .hotspot-gps-img {
			height: 120px;
			top: -90px;
			left: -17px;
		}
		.hotspot-wrap .hotspot-card-wrap .hotspot-card2 .hotspot-img .hotspot-card-02-img {
			height: 203px;
		}		
	/* Hotspot Card 3 */
	.hotspot-wrap .hotspot-card-wrap .hotspot-card3 {
		height: 280px;
		padding: 50px 20px;
	}
		.hotspot-wrap .hotspot-card-wrap .hotspot-card3 .hotspot-gps-title {
			font-size: 34px;
			width: 250px;
			top: -28px;
			left: 50px;
		}
		.hotspot-wrap .hotspot-card-wrap .hotspot-card3 .hotspot-gps-img {
			height: 120px;
			top: -90px;
			left: 50px
		}
		.hotspot-wrap .hotspot-card-wrap .hotspot-card3 .hotspot-img .hotspot-card-03-img {
			height: 206px;
		}	
	/* hotspot footer */
	.hotspot-wrap .hotspot-footer .hotspot-footer-text {
		font-size: 34px;
	}
	
}

@media (max-width: 767px) {
	.hotspot-wrap {
		margin-top: 50px;
		scroll-margin-top: 170px;
	}

	/* Hotspot-header */
	.hotspot-wrap .hotspot-title-header .hotspot-header-img {
		height: 200px;
		left:0px;
	}

	.hotspot-wrap .hotspot-title-header .hotspot-title {
		font-size: 60px;
		padding-left: 130px;
		margin-top: 50px;	
	}

	/* Hotspot Card 1 */
	.hotspot-wrap .hotspot-card-wrap .hotspot-card1 {
		height: 355px;
		padding: 40px 20px;
	}
		.hotspot-wrap .hotspot-card-wrap .hotspot-card1 .hotspot-gps-title {
			font-size: 28px;
			left: 28px;
		}
		.hotspot-wrap .hotspot-card-wrap .hotspot-card1 .hotspot-gps-img {
			height: 100px;
			left: 28px;
			top: -82px;
		}
		.hotspot-wrap .hotspot-card-wrap .hotspot-card1 .hotspot-img .hotspot-card-01-img {
			height: 285px;
		}
	/* Hotspot Card 2 */
	.hotspot-wrap .hotspot-card-wrap .hotspot-card2 {
		height: 200px;
		padding: 40px 20px;
		margin-bottom: 150px;
	}
		.hotspot-wrap .hotspot-card-wrap .hotspot-card2 .hotspot-gps-title {
			font-size: 18px;
			width: 254px;
			top: -35px
		}
		.hotspot-wrap .hotspot-card-wrap .hotspot-card2 .hotspot-gps-img {
			height: 100px;
			top: -80px;
		}
		.hotspot-wrap .hotspot-card-wrap .hotspot-card2 .hotspot-img .hotspot-card-02-img {
			height: 143px;
		}		
	/* Hotspot Card 3 */
	.hotspot-wrap .hotspot-card-wrap .hotspot-card3 {
		height: 200px;
		padding: 40px 20px;
	}
		.hotspot-wrap .hotspot-card-wrap .hotspot-card3 .hotspot-gps-title {
			font-size: 28px;
			width: 212px;
			top: -23px;
			left: 23px;
		}
		.hotspot-wrap .hotspot-card-wrap .hotspot-card3 .hotspot-gps-img {
			height: 100px;
			top: -80px;
			left: 27px;
		}
		.hotspot-wrap .hotspot-card-wrap .hotspot-card3 .hotspot-img .hotspot-card-03-img {
			height: 143px;
		}		
	/* hotspot footer */
	.hotspot-wrap .hotspot-footer .hotspot-footer-img {
		height: 90px;
		width: 90px;
	}

	.hotspot-wrap .hotspot-footer .hotspot-footer-text {
		font-size: 28px;
	}

	/* Trip Route */
	.hotspot-wrap .trip-route .trip-route-desc span{
		font-size: 24px;
	}

}

@media (max-width: 575px) {
	.hotspot-wrap {
		margin-top: 20px;
		scroll-margin-top: 100px;
	}

	/* Hotspot-header */
	.hotspot-wrap .hotspot-title-header .hotspot-header-img {
		height: 160px;
		left:0px;
	}

	.hotspot-wrap .hotspot-title-header .hotspot-title {
		font-size: 40px;
		padding-left: 100px;
		margin: 58px 0 0 20px;
	}
	.hotspot-wrap .hotspot-card-wrap {
		margin-top: 60px;
	}
		/* Hotspot Card 1 */
		.hotspot-wrap .hotspot-card-wrap .hotspot-card1 {
			height: 223px;
			padding: 20px 20px;
		}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card1 .hotspot-gps-title {
				font-size: 16px;
				width: 123px;
				top: -14px;
				left: 30px;
				padding: 5px 5px 5px 20px;
			}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card1 .hotspot-gps-img {
				height: 70px;
				top: -52px;
				left: 26px;
			}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card1 .hotspot-img .hotspot-card-01-img {
				height: 185px;
			}
		/* Hotspot Card 2 */
		.hotspot-wrap .hotspot-card-wrap .hotspot-card2 {
			height: 135px;
			padding: 25px 20px;
			margin-bottom: 130px;
		}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card2 .hotspot-gps-title {
				font-size: 12px;
				width: 179px;
				top: -23px;
				padding: 5px 5px 5px 20px;
				left: 0;
			}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card2 .hotspot-gps-img {
				height: 70px;
				top: -55px;
				left: -8px;
			}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card2 .hotspot-img .hotspot-card-02-img {
				height: 93px;
			}		
		/* Hotspot Card 3 */
		.hotspot-wrap .hotspot-card-wrap .hotspot-card3 {
			height: 135px;
			padding: 25px 20px;
		}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card3 .hotspot-gps-title {
				font-size: 16px;
				width: 123px;
				top: -14px;
				left: 30px;
				padding: 5px 5px 5px 20px;
			}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card3 .hotspot-gps-img {
				height: 70px;
				top: -52px;
				left: 26px;
			}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card3 .hotspot-img .hotspot-card-03-img {
				height: 93px;
			}	
	/* hotspot footer */
	.hotspot-wrap .hotspot-footer{
		height: 1px;
		margin-top: 20px;
	}
		.hotspot-wrap .hotspot-footer .hotspot-footer-img {
			height: 70px;
			width: 70px;
		}
		.hotspot-wrap .hotspot-footer .hotspot-footer-text {
			font-size: 18px;
		}

	/* Trip route */
	.hotspot-wrap .trip-route .trip-route-title {
		font-size: 40px;
	}
	
	.hotspot-wrap .trip-route .trip-route-desc span {
		font-size: 20px;
	}
}

@media (max-width:395px) {
	.hotspot-wrap .hotspot-title-header .hotspot-title {
		font-size: 30px;
		padding-left: 70px;
		margin: 58px 0 0 40px;	
	}
}

@media (max-width:320px) {
	.hotspot-wrap .hotspot-title-header .hotspot-header-img {
		height:100px
	}
	.hotspot-wrap .hotspot-title-header .hotspot-title {
		font-size: 30px;
		padding-left: 50px;
		margin: 23px 0 0 20px;	
	}
		/* Card 1 */
		.hotspot-wrap .hotspot-card-wrap .hotspot-card1 {
			height: 200px;
			padding: 12px 10px;	
		}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card1 .hotspot-gps-title {
				width: 123px;
				left: 10px;
				padding: 5px 5px 5px 20px;
			}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card1 .hotspot-gps-img {
				left: 5px;
			}

		/* Card 2 */
		.hotspot-wrap .hotspot-card-wrap .hotspot-card2 {
			height: 120px;
			padding: 21px 10px;
			margin-bottom: 70px;	
		}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card2 .hotspot-gps-title {
				padding: 5px 5px 5px 15px;
				left: -18px;	
			}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card2 .hotspot-gps-img {
				left: -28px;
			}

		/* Card 3 */
		.hotspot-wrap .hotspot-card-wrap .hotspot-card3 {
			height: 120px;
			padding: 21px 10px;
			margin-bottom: 70px;	
		}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card3 .hotspot-gps-title {
				width: 123px;
				left: 10px;
				padding: 5px 5px 5px 20px;
			}
			.hotspot-wrap .hotspot-card-wrap .hotspot-card3 .hotspot-gps-img {
				left: 5px;
			}
			.hotspot-wrap .trip-route .trip-route-title {
				font-size: 30px;
			}
			.hotspot-wrap .trip-route .trip-route-desc span {
				font-size: 16px;
			}
			.hotspot-wrap .trip-route {
				margin:10px 0;
			}
}


/* -------------------------------------------------------------------- */

/**
 * 下載專區
*/
.wallpaper-wrap {
	position: relative;
    top: 0;
    left: 0;
    width: 100%;
	padding-bottom: 30px;
}
	/* Wallpaper Title */
	.wallpaper-wrap .wallpaper-title-header {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		text-align: center;
	}
		.wallpaper-wrap .wallpaper-title-header .wallpaper-header-img {
			background-repeat: no-repeat;
			background-size: contain;
			width: 100%;
			height: 246px;
			position: absolute;
			left: 22px;
			top: 0;
		}
		.wallpaper-wrap .wallpaper-title-header .wallpaper-title {
			font-size: 65px;
			text-align: center;
			background-color: #C480E4;
			border-radius: 50px;
			display: inline-block;
			padding: 5px 50px;
			padding-left: 227px;
			margin-top: 85px;
			margin-bottom: 70px;
			text-shadow: 0 0 2px #ffffff;
		}

	/* Comming Soon */
	.wallpaper-wrap .commingsoon-wrap {
		position: relative;
		height: 600px;
	}

	.wallpaper-wrap .commingsoon-wrap .commingsoon-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;	
	}

	.wallpaper-wrap .launch-wrap .wallpaper-header-wrap {
		position: relative;
		width: 100%;
		text-align: center;
	}

		.wallpaper-wrap .launch-wrap .wallpaper-header-wrap .ig-label {
			font-size: 14px;
			text-align: center;
			color: #C480E4 !important;
			font-weight: bold;
			display: inline-block;
			background-color: white;
			border-radius: 5px;
			padding: 3px 10px;
		}

		.wallpaper-wrap .launch-wrap .wallpaper-header-wrap .social-moon-logo {
			position: relative;
			display: inline-block;
			width: 25%;
			height: 0;
			padding-top: 19%;
		}
		.wallpaper-wrap .launch-wrap .wallpaper-header-wrap .social-moon-ig {
			position: relative;
			display: inline-block;
			width: 14.3%;
			height: 0;
			padding-top: 19%;
		}
			.wallpaper-wrap .launch-wrap .wallpaper-header-wrap .social-moon-ig .btn-social {
				display: block;
				position: absolute;
    			top: 0;
				height: 100%;
			}
				.wallpaper-wrap .launch-wrap .wallpaper-header-wrap .social-moon-ig .btn-social .social-moon-ig-img-wrap {
					position: relative;
					display: block;
					width: 100%;
					height: 77%;
				}

			.wallpaper-wrap .launch-wrap .wallpaper-header-wrap .img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				z-index: 0;
			}

	.wallpaper-wrap .launch-wrap .wallpaper-desc {
		text-align: center;
		text-shadow: 0 0 2px #ffffff;
		margin:20px 0 ;
		font-size: 30px;
	}

	
	.wallpaper-wrap .launch-wrap .wallpaper-alert {
		font-size: 24px;
	}

		.copyright {
			text-shadow: 0 0 2px #ffffff;
			font-size: 15px;
		}

	/* Wallpaper Cards */
	.wallpaper-wrap .launch-wrap .row {
		justify-content: center;
	}

	.wallpaper-wrap .wallpaper-card-wrap {
		background-color: #E5E4E5;
		margin: 10px 0;
		padding: 20px;
		border-radius: 10px;
		height: 744px;
	}

		.wallpaper-wrap .wallpaper-card-wrap .card-img-wrap {
			position: relative;
			top: 0;
			left: 0;
			width: 100%;
			padding-top: 100%;
		}

		.wallpaper-wrap .wallpaper-card-wrap .img-sequence {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-repeat: repeat;
			background-position: 0 0;
			background-size: auto 100%;
		}
			
			@keyframes imgSeq {
				100% { background-position: 100% 0; }
			}
			
			/* Thumbnail animation - 1 */
			.wallpaper-wrap .wallpaper-card-wrap .animation-1 {
				animation: imgSeq .7s steps(29) infinite ;
			}
			
			/* Thumbnail animation - 2 */
			.wallpaper-wrap .wallpaper-card-wrap .animation-2 {
				animation: imgSeq .7s steps(37) infinite ;
			}
			/* Thumbnail animation - 3 */
			.wallpaper-wrap .wallpaper-card-wrap .animation-3 {
				animation: imgSeq .7s steps(32) infinite ;
			}

		.wallpaper-wrap .wallpaper-card-wrap .card-img {
			height: 430px;
			width: 100%;
			background-position: center;
			background-size: cover;
			margin: 0 auto;
		}

		.wallpaper-wrap .wallpaper-card-wrap .card-title {
			color: #4D4d4D;
		}

		.wallpaper-wrap .wallpaper-card-wrap .card-btn {
			background-color: #FFC55A;
			border-radius: 50px;
			color: #8536D3;
			font-weight: 700;
			display: inline-block;
			font-size: 20px;
		}

	
	@media (max-width: 1199px) {
		.wallpaper-wrap .wallpaper-card-wrap {
			height: 580px;
		}
	}
	
 	@media (max-width: 991px) {
		.wallpaper-wrap  {
			margin-top: 50px;
			scroll-margin-top: 150px
		}
			/* Wallpaper /title */
			.wallpaper-wrap .wallpaper-title-header .wallpaper-title {
				font-size: 50px;
				margin-left: 140px;
				padding-left: 44px;

			}
			.wallpaper-wrap .wallpaper-title-header .wallpaper-header-img {
				height: 193px; 
				left: 7px; 
				top: 20px;
			}

			/* Comming Soon */
			.wallpaper-wrap .commingsoon-wrap {
				height: 500px;
				height: 744px;
			}

			/* Description */
			.wallpaper-wrap .launch-wrap .wallpaper-desc {
				font-size: 25px;
			}

			.wallpaper-wrap .launch-wrap .wallpaper-header-wrap .social-moon-ig {
				width: 17%;
			}
				.wallpaper-wrap .launch-wrap .wallpaper-header-wrap .social-moon-ig .btn-social .social-moon-ig-img-wrap {
					height: 83%;
				}

			.wallpaper-wrap .launch-wrap .wallpaper-header-wrap .ig-label {
				font-size: 12px;
			}

			.copyright {
				font-size: 18px;
			}

			/* Wallpaper thumbnail */
			.wallpaper-wrap .wallpaper-card-wrap {
				min-height: 465px ;
				height: 494px;
				padding:15px;
			}
			.wallpaper-wrap .wallpaper-card-wrap .card-img {
				height: 330px;
			}
	}
	
	@media (max-width: 767px) {
		.wallpaper-wrap  {
			margin-top: 50px;
			scroll-margin-top: 150px
		}
			/* Wallpaper /title */
			.wallpaper-wrap .wallpaper-title-header .wallpaper-title {
				font-size: 35px;
				margin: 40px 0 40px 108px;
				padding: 15px 44px;
			}

			.wallpaper-wrap .wallpaper-title-header .wallpaper-header-img {
				height: 167px;
				left: -15px;
				top:0
			}

			/* Comming Soon */
			.wallpaper-wrap .commingsoon-wrap {
				height: 400px;
			}
			
			/* Description */
			.wallpaper-wrap .launch-wrap .wallpaper-desc {
				font-size: 18px;
			}

			.wallpaper-wrap .launch-wrap .wallpaper-header-wrap .social-moon-ig {
				width: 23%;
			}
				.wallpaper-wrap .launch-wrap .wallpaper-header-wrap .social-moon-ig .btn-social .social-moon-ig-img-wrap {
					height: 77%;
				}

			.copyright {
				font-size: 15px;
			}

			/* Wallpaper thumbnail */
			.wallpaper-wrap .wallpaper-card-wrap {
				min-height: 350px ;
				height: 363px;
				padding:10px;
			}

			.wallpaper-wrap .wallpaper-card-wrap .card-body {
				padding: 0.5rem 0.5rem;
			}

			.wallpaper-wrap .wallpaper-card-wrap .card-img {
				height: 240px;
			}

			.wallpaper-wrap .wallpaper-card-wrap .card-btn, .wallpaper-wrap .wallpaper-card-wrap .card-title {
				font-size: 16px;
			}

	}
	
	@media (max-width: 575px) {
		/* Wallpaper /title */
		.wallpaper-wrap  {
			margin-top: 40px;
			scroll-margin-top: 100px
		}
			.wallpaper-wrap .wallpaper-title-header .wallpaper-title {
				font-size: 25px;
				margin: 28px 0;
				margin-left: 75px;
				padding: 10px 25px;
				padding-left: 45px;
			}
			.wallpaper-wrap .wallpaper-title-header .wallpaper-header-img {
				height: 120px;
				left: 2px;
				top:0
			}
		/* Description */
		.wallpaper-wrap .wallpaper-desc {
			font-size: 15px;
		}

		.wallpaper-wrap .launch-wrap .wallpaper-header-wrap .social-moon-logo {
			width: 49%;
			padding-top: 20%;
		}
			.wallpaper-wrap .launch-wrap .wallpaper-header-wrap .social-moon-logo .img {
				background-position: right center;
			}

		.wallpaper-wrap .launch-wrap .wallpaper-header-wrap .social-moon-ig {
			width: 49%;
		}
		
			.wallpaper-wrap .launch-wrap .wallpaper-header-wrap .social-moon-ig .btn-social .social-moon-ig-img-wrap {
				height: 68%;
			}

			.wallpaper-wrap .launch-wrap .wallpaper-header-wrap .social-moon-ig .btn-social .social-moon-ig-img-wrap > .img {
				margin-top: -3px;
			}

		.wallpaper-wrap .launch-wrap .wallpaper-alert {
			font-size:12px
		}

		.copyright {
			font-size: 12px;
		}

		/* Wallpaper thumbnail */
		.wallpaper-wrap .wallpaper-card-wrap {
			min-height: 250px;
			height: 260px;
			padding:5px
		}
		.wallpaper-wrap .wallpaper-card-wrap .card-img {
			height: 160px;
		}

		.wallpaper-wrap .wallpaper-card-wrap .card-btn, .wallpaper-wrap .wallpaper-card-wrap .card-title {
			font-size: 12px;
		}
	}

	/* For Galaxy Fold */

	/* Wallpaper Cards */
	 /* @media (max-width: 513px) {
		
		.wallpaper-wrap .wallpaper-card-wrap .card-img-wrap {
			padding-top: 73%;
		}
	}  */

	@media (max-width: 320px) {
		.wallpaper-wrap .wallpaper-title-header .wallpaper-title {
			font-size: 16px;
			margin-left: 45px;
		}	
		.wallpaper-wrap .wallpaper-title-header .wallpaper-header-img {
			height:100px;
		}
		.wallpaper-wrap .wallpaper-card-wrap {
			min-height: 220px;
			height: 220px;
		}
	}
	
 /* -------------------------------------------------------------------- */

/**
 * Desktop Banner
 */

.desktop-container {
	width: 100%;
	padding-top: 56%;
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
}


 /* -------------------------------------------------------------------- */

/**
 * Bootstrap Replacement
 */
 
.nav-link {
	color: #ffffff;
}
.nav-link:hover,
.nav-link:focus,
.nav-link:active {
	color: #ffffff;
}