body{
	width: 100vw;
	overflow-x: hidden;
	background: #f5f5f5;
	font-size: 16px;
}


h1, h2, h3, h4, h5, h6{
	font-family: 'Roboto', "Noto Sans TC", sans-serif;
}

h1{
	font-size: 3.4em;
	font-weight: 700;
	line-height: 1.2em;
}

h2{
	font-size: 1.8em;
	font-weight: 700;
	line-height: 1.4em;
	margin-bottom: 10px;
}

h3{
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.4em;
}

h4{
	font-size: 1.25em;
	font-weight: 700;
}

h5{
	font-size: 1.125em;
	font-weight: 500;
}

h6{
	font-size: 1.1em;
    font-weight: 500;
}

p{
	font-family: 'Roboto', "Noto Sans TC", sans-serif;
	text-align: justify;
	font-size: 1em;
    line-height: 1.4em;
    font-weight: 400;
}

::selection {
    color: #000000;
    background: #ffcc00;
}

.show{
	display: block;
}

.hide{
	display: none;
}

.mobile{
	display: none;
}

.desktop{
	display: block;
}

.clearfix{
	clear: both;
}

section{
	position: relative;
	width: 100%;
	margin: 0 auto;
	/* overflow: hidden; */
}




/* ============================================================
MAP
============================================================ */
section.map{
	width: 100%;
	height: 100vh;
	position: relative;
	margin: 0 auto;
	/* background: #6794cf; */
	background-image: url(../img/map_sea.jpg);
	background-size: cover;
}

.map-drag{
	width: 100%;
	height: 60vh;
	position: relative;
	overflow: hidden;
}



/* map drag */
#imgContainer {
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#positionButtonDiv {
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(58, 56, 63);
	/* RGBa with 0.6 opacity */
	background: rgba(58, 56, 63, 0.5);
	/* border: solid 1px #100000; */
	color: #FFFFFF;
	padding: 8px;
	text-align: left;
	position: absolute;
	right: 0;
	top: 0;
}

#positionButtonDiv .positionButtonSpan img {
	float: right;
	border: 0;
}

.positionMapClass area {
	cursor: pointer;
}

.zoomButton {
	border: 0;
	cursor: pointer;
}

.zoomableContainer {
	background-image: url("assets/transparent.png");
}

.map_large{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
}

.circle-road1{
	width: 500px;
	height: 500px;
	line-height: 500px;
	text-align: center;
	font-size: 2rem;
	border-radius: 50%;
	background: radial-gradient(circle,rgba(210, 43, 12, 0),rgba(210, 43, 12, 0),rgba(210, 43, 12, .4));
	position: absolute;
	top: 19.5%;
    left: 51%;
    cursor: pointer;
    transform: scale(1);
	animation: circleRoad 1.5s forwards infinite linear;
	z-index: 2;
}

.circle-road1 a{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

@keyframes circleRoad{
	0%{
		transform: scale(1);
	}

	50%{
		transform: scale(1.2);
	}

	100%{
		transform: scale(1);
	}
}

.maplarge_in{
	animation: largeIn .5s forwards;
}

@keyframes largeIn{
	0%{
		opacity: 0;
	}

	100%{
		opacity: 1;
	}
}



/* animation */
.map-ng-art{
	width: 110px;
    position: absolute;
    top: 25%;
    left: 10%;
    animation: fadeShake 1.6s ease-in-out infinite;
}

.map-ng-art img{
	width: 100%;
}
@keyframes fadeShake{
  0%   { opacity: 1; transform: translateY(0); }
  50%  { opacity: 1; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.map-ng-art2{
	width: 110px;
    position: absolute;
    top: 32%;
    right: -2%;
    animation: fadeShake 1.6s ease-in-out infinite;
}

.map-ng-art2 img{
	width: 100%;
}


.map-boat-1{
	width: 700px;
    height: 180px;
    position: absolute;
    bottom: 4%;
    left: 25%;
    transform: scale(1);
}

.map-boat-1 .sea{
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
}

.map-boat-1 .boat{
	width: 70%;
	position: absolute;
	top: 0;
	left: 16%;
	transform: rotate(0);
	animation: boatMove 5s infinite forwards linear;
}

.map-boat-1 .wave{
	width: 90%;
	position: absolute;
	bottom: 10%;
	left: 10%;
	animation: waveMove 3s infinite forwards linear;
}

.map-boat-2{
	width: 500px;
    height: 150px;
    position: absolute;
    top: 27.5%;
	right: 4%;
    transform: scale(1);
}

.map-boat-2 .sea{
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
}

.map-boat-2 .boat{
	width: 70%;
	position: absolute;
	top: 0;
	left: 16%;
	transform: rotate(0);
	animation: boatMove 6s infinite forwards linear;
}

.map-boat-2 .wave{
	width: 90%;
	position: absolute;
	bottom: 10%;
	left: 10%;
	animation: waveMove 4s infinite forwards linear;
}

.map-boat-3{
	width: 250px;
    height: 100px;
    position: absolute;
    top: 15.5%;
	right: 4%;
    transform: scale(1);
}

.map-boat-3 .sea{
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
}

.map-boat-3 .boat{
	width: 70%;
	position: absolute;
	top: 0;
	left: 16%;
	transform: rotate(0);
	animation: boatMove 8s infinite forwards linear;
}

.map-boat-3 .wave{
	width: 90%;
	position: absolute;
	bottom: 10%;
	left: 10%;
	animation: waveMove 5s infinite forwards linear;
}

@keyframes boatMove{
	0%{
		left: 13%;
		transform: rotate(0);
	}

	50%{
		left: 23%;
		transform: rotate(-1deg);
	}

	100%{
		left: 13%;
		transform: rotate(0);
	}
}

@keyframes waveMove{
	0%{
		left: 5%;
	}

	50%{
		left: 15%;
	}

	100%{
		left: 5%;
	}
}


.map-cloud-1{
	width: 230px;
    position: absolute;
    top: 12%;
    left: 10%;
    animation: cloudRight 5s infinite forwards linear;
}

.map-cloud-2{
	width: 190px;
    position: absolute;
    top: 8%;
    left: 0%;
    animation: cloudLeft 8s infinite forwards linear;
}

.map-cloud-3{
	width: 150px;
    position: absolute;
    top: 9%;
    left: 80%;
    animation: cloudRight 6s infinite forwards linear;
}

.map-cloud-4{
	width: 150px;
    position: absolute;
    top: 11%;
    left: 86%;
    animation: cloudLeft 5s infinite forwards linear;
}

.map-cloud-5{
	width: 150px;
    position: absolute;
    top: 56%;
    left: 94%;
    animation: cloudRight 6s infinite forwards linear;
}

.map-cloud-6{
	width: 120px;
    position: absolute;
    top: 62%;
    left: 91%;
    animation: cloudLeft 5s infinite forwards linear;
}

.map-cloud-7{
	width: 150px;
    position: absolute;
    top: 85%;
    left: 19%;
    animation: cloudRight 9s infinite forwards linear;
}

.map-cloud-8{
	width: 150px;
    position: absolute;
    top: 87%;
    left: 24%;
    animation: cloudLeft 8s infinite forwards linear;
}

.map-cloud-9{
	width: 230px;
    position: absolute;
    top: 82%;
    left: 32%;
    animation: cloudRight 7s infinite forwards linear;
}

.map-cloud-10{
	width: 170px;
    position: absolute;
    top: 84%;
    left: 47%;
    animation: cloudLeft 10s infinite forwards linear;
}

.map-cloud img{
	width: 100%;
	opacity: 0.7;
}

@keyframes cloudRight{
	0%{
		margin-left: -50px;
	}

	50%{
		margin-left: 50px;
	}

	100%{
		margin-left: -50px;
	}
}

@keyframes cloudLeft{
	0%{
		margin-left: 50px;
	}

	50%{
		margin-left: -50px;
	}

	100%{
		margin-left: 50px;
	}
}

.mapbtn-switch{
	width: 200px;
	height: 60px;
	background: rgba(0, 0, 0, .7);
	position: absolute;
	top: 0;
	left: 0;
	color: #ffffff;
	z-index: 2;
	display: none;
}

.switch-btn{
	width: 200px;
	height: 60px;
	cursor: pointer;
	position: relative;
	display: none;
}

.switch-btn p{
	font-size: 1em;
	text-align: center;
	line-height: 60px;
}

.map-menu{
	width: 100%;
	/* min-height: 40vh; */
	position: relative;
	background: #ffffff;
}

.map-btn-container{
	width: 90%;
	position: relative;
	margin: 0 auto;
	padding: 10px 0;
}

.map-level1{
	width: 100%;
	position: relative;
	margin: 0 auto;
}

.map-level2{
	display: none;
}

.map-btn{
	width: 120px;
	height: 34px;
	box-sizing: border-box;
	border-radius: 1000px;
	margin: 5px;
	float: left;
	cursor: pointer;
}

.map-btn-spot{
	width: 100%;
	min-width: 200px;
	height: auto;
	border-radius: 0;
	padding: 5px;
}

.map-level1-btns:after, .map-btn-list:after{
	content: '';
	display: table;
	clear: both;
}

.map-btn h6{
	text-align: center;
	line-height: 33px;
}

.map-btn-spot h6{
	line-height: 1.4em;
}

.map-btn.red{
	border: 2px solid #ff731a;
}

.map-btn.red h6{
	color: #ff731a;
}

.map-btn.red.active{
	background: #ff731a;
}

.map-btn.red.active h6{
	color: #ffffff;
}

.map-btn.green{
	border: 2px solid #3469b6;
}

.map-btn.green h6{
	color: #3469b6;
}

.map-btn.green.active{
	background: #3469b6;
}

.map-btn.green.active h6{
	color: #ffffff;
}


.map-info{
	width: 100%;
	background: #ffffff;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 3;
}

.map-content{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.map-content-pic{
	width: 40%;
	/* padding-bottom: 30%; */
	position: relative;
	min-height: calc(40vh - 91px);
}

.map-content-pic img{
	width: 100%;
	height: 100%;
	position: absolute;
	object-fit: contain;
	object-position: 50% 50%;
	vertical-align: middle;
}

.map-content-pic-intro{
	text-align: center;
    font-size: 3em;
    line-height: calc(40vh - 91px);
}

.map-content-text{
	width: 60%;
	box-sizing: border-box;
	padding: 3.5%;
}

.map-info-close{
	display: none;
}

.spot_info_right{
	text-align: right;
	font-size: .85em;
}


.dot{
	width: 30px;
	height: 30px;
	border-radius: 50%;
	position: absolute;
	z-index: 2;
	cursor: pointer;
}

.dot.red{
	background: #ff731a;
}

.dot.green{
	background: #3469b6;
}

.dot a{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.dot.red:after{
	content: '';
	display: table;
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(1);
	background: rgba(210, 43, 12, .3);
	animation: dotAnimate 1s forwards infinite;
}

.dot.green:after{
	content: '';
	display: table;
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(1);
	background: rgba(25, 141, 136, .3);
	animation: dotAnimate 1s forwards infinite;
}

.dot-location{
	position: absolute;
	width: 70px;
	bottom: 0;
	left: -20px;
	animation: dotLocation 1s forwards infinite linear;
}

.dot-location img{
	width: 100%;
}

@keyframes dotLocation{
	0%{
		margin-bottom: 0;
	}

	50%{
		margin-bottom: 30px;
	}

	100%{
		margin-bottom: 0;
	}
}

.dot-1{
	top: 20%;
    left: 47.5%;
}

.dot-2{
	top: 26%;
    left: 39.5%;
}

.dot-3{
	top: 33.5%;
    left: 12.5%;
}

.dot-4{
	top: 32.5%;
    left: 17%;
}

.dot-5{
	top: 35%;
    left: 28%;
}
/* 隱藏掉紅色路線 6~10 的點 */
.dot-6,
.dot-7,
.dot-8,
.dot-9,
.dot-10 {
  display: none !important;
}

.dot-11{
	top: 35.5%;
	left: 93%;
}

.dot-12{
	top: 38%;
    left: 81%;
}

.dot-13{
	top: 52.5%;
    left: 81%;
}

.dot-14{
	top: 25%;
	left: 74%;
}

.dot-15{
	top: 62%;
    left: 73%;
}
/* 隱藏掉綠色路線 16~20 的點 */
.dot-16,
.dot-17,
.dot-18,
.dot-19,
.dot-20 {
  display: none !important;
}

@keyframes dotAnimate{
	0{
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}

	100%{
		transform: translate(-50%, -50%) scale(6);
		opacity: 0;
	}
}


@media all and (min-width: 1100px){
	section.map{
		display: flex;
	    justify-content: space-between;
	    flex-wrap: wrap;
	}

	.map-drag{
		width: 75%;
		height: auto;
		min-height: 100vh;
	}

	.map-menu{
		width: 25%;
	}

	.map-info{
		width: 25%;
	    min-height: 100vh;
	    background: rgba(0,0,0,.9);
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    opacity: 0;
	    display: none;
	}

	.map-btn-container{
		width: 85%;
		padding: 20px 0;
	}

	.map-level1{
		margin: 20px auto;
	}

	.map-level2{
		display: block;
	}

	.map-btn.red, .map-btn.red h6{
		transition: .2s linear;
	}

	.map-btn.red:hover{
		background: #ff731a;
	}

	.map-btn.red:hover.map-btn.red h6{
		color: #ffffff;
	}

	.map-btn.green, .map-btn.green h6{
		transition: .2s linear;
	}

	.map-btn.green:hover{
		background: #3469b6;
	}

	.map-btn.green:hover.map-btn.green h6{
		color: #ffffff;
	}

	.map-content{
		display: block;
		width: 90%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}

	.map-content-pic{
		width: 100%;
		height: auto;
		margin-bottom: 20px;
	}

	.map-content-text{
		width: 100%;
		color: #ffffff;
	}

	.map-info-close{
		display: block;
		position: absolute;
		top: 15px;
		right: 15px;
		font-size: 2em;
		color: #ffffff;
		cursor: pointer;
		z-index: 5;
	}

	.mapbtn-switch{
		height: 100px;
		top: auto;
		bottom: 0;
		left: 0;
	}

	.switch-btn{
		height: 100px;
	}

	.switch-btn p{
		line-height: 100px;
	}
}


/* ============================================================
MAP ARTICLES
============================================================ */
section.map-article{
	width: 100%;
	position: relative;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}

.article-range{
	width: 100%;
	position: relative;
}

.article-range.red{
	background: #ff731a;
}

.article-range.green{
	background: #3469b6;
}

.article-container{
	width: 90%;
	max-width: 700px;
	margin: 0 auto;
	padding: 20px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.article-pic{
	width: 48%;
	margin: 1%;
	padding-bottom: 40%;
	position: relative;
}

.article-pic img{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.article-text{
	width: 48%;
	margin: 1%;
}

.article-text h3{
	font-size: 1.3em;
	color: #ffffff;
	max-height: 75px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.article-text p{
	color: #ffffff;
	font-size: .95em;
	max-height: 85px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin-top: 5px;
}


.article-container a{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.article-text p.readmore{
	display: none;
}

@media all and (min-width: 480px){
	.article-text h3{
		font-size: 1.5em;
	}

	.article-text p{
		font-size: 1em;
		max-height: 85px;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 3;
	    margin-top: 10px;
	}

	.article-text p.readmore{
		display: block;
		text-align: right;
		position: relative;
		height: 20px;
		color: #ffffff;
		text-decoration: underline;
	}
}

@media all and (min-width: 768px){
	.article-text h3{
		font-size: 1.7em;
	}

	.article-text p{
		font-size: 1em;
		max-height: 85px;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 4;
	    margin-top: 10px;
	}
}

@media all and (min-width: 1100px){
	.article-range{
		width: 50%;
		position: relative;
		transition: .2s linear;
		opacity: 1;
	}

	.article-range:hover{
		opacity: .8;
	}

	.article-range.red .article-container{
		padding-left: calc(100% - 750px);
	}

	.article-range.green .article-container{
		margin: 0;
		padding-left: 30px;
	}
}