@charset "utf-8";
/* ----------TRANSITION---------- */
	#moving,
	.switch,
	.map_filter li{
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
/* ----------SEC_NEARBY---------- */
	.sec_nearby{
		padding: 70px 0;
	}
	#moving{
		border:1px solid #ffffff;
		border-radius: 5px;
		width: 270px;
		height: 210px;
		margin:0 auto;
		text-align: center;
		cursor: pointer;
		position: relative;
	}
	#moving:hover{
		border-color: #cc0033;
		-webkit-transform: translateY(-2px);
		   -moz-transform: translateY(-2px);
		    -ms-transform: translateY(-2px);
		     -o-transform: translateY(-2px);
		        transform: translateY(-2px);
	}
	#moving:hover #moving_pin{
		-webkit-animation: none;
		   -moz-animation: none;
		    -ms-animation: none;
		     -o-animation: none;
		        animation: none;
	}
	#moving:active{
		border-color: #cc0033;
		-webkit-transform: translateY(0px);
		   -moz-transform: translateY(0px);
		    -ms-transform: translateY(0px);
		     -o-transform: translateY(0px);
		        transform: translateY(0px);
	}
	#moving_map{
		padding: 20px 20px 5px;
		margin-top: 70px;
	}
	#moving_pin{
		position: absolute;
		top: 40px;
		left: 0;
		right: 0;
		margin:0 auto;
		-webkit-animation: here 1s ease infinite;
		   -moz-animation: here 1s ease infinite;
		    -ms-animation: here 1s ease infinite;
		     -o-animation: here 1s ease infinite;
		        animation: here 1s ease infinite;
	}
	#moving p{
		letter-spacing: 3px;
	}
/* ----------SEC_MENU------------ */
	.sec_menu{
		text-align: center;
		border:1px solid #00275D;
	}
	.sec_menu li{
		padding: 10px;
		font-size: 18px;
		letter-spacing: 2px;
		font-weight: 400;
		cursor: pointer;
	}
	.switch span:first-child,
	.switch.active span:last-child{
		display: block;
	}
	.switch span:last-child,
	.switch.active span:first-child{
		display: none;
	}

	#map_search{
		width: 100%;
		box-shadow: 0 10px 10px rgba(0,0,0,.1);
		margin-top: 1px;
		display: none;
	}
	#map_search input{
		width: 100%;
		padding: 20px;
		letter-spacing: 2px;
		text-align: center;
		font-size: 18px;
	}
/* ----------SEC_LIST------------ */
	.title{
		padding: 0 5%;
		font-size: 14px;
		text-align: center;
	}
	.title li{
		display: inline-block;
		border-left: 1px solid #dddddd;
		padding: 5px;
		margin-left: -5px;
	}
	.title li:first-child{
		width: 35%;
	}
	.title li:nth-child(2){
		width: 20%;
	}
	.title li:nth-child(3){
		width: 20%;
	}
	.title li:last-child{
		width: 25%;
		border-right: 1px solid #dddddd;
	}

	.content{
		padding: 15px 6%;
		font-size: 14px;
	}

	.list{
		height: 640px;
	}

	.list li{
		margin-left: 60px;
		margin-right: 10px;
		border-bottom: 1px solid #d5d5d5;
	}
	.list li:after{
		content:'';
		display: block;
		clear:both;
	}
	.list li a{
		display: block;
		padding: 20px 0;
		cursor: pointer;
	}
	.list li a:after{
		content:'';
		display: block;
		clear:both;
	}
	.list li:last-child{
		border-bottom: 0;
	}
/*
	.list li span{
		float: left;
		letter-spacing: 2px;
	}
*/
	.list li span:first-child:before{
		content:'';
		display: block;
		width: 28px;
		height: 38px;
		background: url(../img/icon/pin-w.png) center center no-repeat;
		position: absolute;
		top: 0;
		bottom: 0;
		left: -50px;
		margin:auto 0;
	}
/*
	.list li span:first-child{
		width: 32%;
		margin-left: 0;
		padding-left: 5px;
		padding-right: 4%;
		position: relative;
	}
	.list li span:first-child small{
		display: inline-block;
		padding-left: 5px;
	}
	.list li span:nth-child(2){
		width: 21%;
		padding-left: 4%;
	}
	.list li span:nth-child(3){
		width: 21%;
		padding-left: 5%;
	}
	.list li span:last-child{
		width: 25%;
		padding-left:4%;
	}
	.list .note{
		display: inline-block;
		width: 25%;
		padding-left: 4%;
		float: right;
		margin:-10px 15px 10px;
		color:#a5a5a5;
		letter-spacing: 2px;
	}
*/
	.list .note::selection {
		color:#fafafa;
	}
	.list .note .btn-frame{
		display: inline-block;
		border:2px solid #cc0033;
		padding:5px 20px;
		color:#cc0033;
	}
	.list .note .sec_btns{
		padding:8px 0;
	}

	.list a:hover{
		color:#cc0033;
	}
	.list a:hover span:first-child:before{
		background-image: url(../img/icon/pin-r.png);
		-webkit-animation: here 1s ease infinite;
		   -moz-animation: here 1s ease infinite;
		    -ms-animation: here 1s ease infinite;
		     -o-animation: here 1s ease infinite;
		        animation: here 1s ease infinite;
	}
	.list .note .btn-frame:hover{
		background-color: #cc0033;
		color:#fafafa;
	}

	.mCSB_outside+.mCSB_scrollTools{
		right: -22px;
	}
	.mCSB_scrollTools .mCSB_draggerRail{
		background-color: #d10025;
	}
	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
	.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
	.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
	.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{
		background-color: #cc0033;
	}
/* ----------SEC_MAIN------------ */
	.sec_main{
		overflow: hidden;
	}
	.sec_main > .container{
		width: 200%;
		margin-left: 0;
		-webkit-transition: all .8s ease;
		   -moz-transition: all .8s ease;
		    -ms-transition: all .8s ease;
		     -o-transition: all .8s ease;
		        transition: all .8s ease;
	}
	.sec_main.active > .container{
		margin-left: -100%;
	}
	.sec_list,
	.sec_map{
		width: 50%;
		height: 700px;
		position: relative;
	}
	.sec_map{
		overflow:hidden;
	}
	/* ----------MAP--------- */
		#map{
			width: 100%;
			height: 710px;
		}
		.gm-style-iw * {
			display: block;
	    }
	    .gm-style-iw h4,
	    .gm-style-iw p {
			margin: 0;
			padding: 0;
	    }
	    .gm-style-iw a {
			color: #54B4B2;
	    }
	    .gm-style-iw a.btn-frame{
			display: inline-block;
			border: 2px solid #cc0033;
			padding: 5px 20px;
			color: #cc0033;
			margin-top: 5px;
	    }
	    .gm-style-iw a.btn-frame:hover{
			background-color: #cc0033;
			color: #fafafa;
	    }
	    .gm-style-iw p{
	    	font-family: '微軟正黑體', 'Microsoft JhengHei', 'Helvetica', 'Arial', sans-serif;
	    	color:#cc0033;
	    	font-size: 16px;
	    }
	    .gm-style-iw p.txt-grey{
	    	color:#a5a5a5;
	    }
		.gm-style-iw b{
			font-weight: 600;
		}
	    .gm-style img{
	    	max-height: none;
	    	margin-top: 10px;
	    	max-width: 100%;
	    }
	    .map_info{
	    	max-width: 400px;
	    	background-color:#ffffff;
	    	padding:5px;
	    	width:auto;
	    	margin:0 auto;
	    	color:#cc0033;
	    }

		.map_filter{
			position: absolute;
			top:20px;
			left: 0;
			right: 0;
			margin:0 auto;
			z-index: 5;
			color:#cc0033;
		}
		.map_filter li{
	    	display: inline-block;
	    	background-color: #ffffff;
	    	width: 20%;
	    	padding: 10px;
	    	margin:10px 1.8%;
	    	letter-spacing: 2px;
	    	cursor: pointer;
	    	border:1px solid #a7aeae;
	    }
	    .map_filter li:hover{
	    	background-color: #cc0033;
	    	color:#ffffff;
	    	-webkit-transform: translateY(-2px);
	    	   -moz-transform: translateY(-2px);
	    	    -ms-transform: translateY(-2px);
	    	     -o-transform: translateY(-2px);
	    	        transform: translateY(-2px);
	    }
	    .map_filter li:active{
	    	-webkit-transform: translateY(0);
	    	   -moz-transform: translateY(0);
	    	    -ms-transform: translateY(0);
	    	     -o-transform: translateY(0);
	    	        transform: translateY(0);
	    }
	    #drag_hint{
	    	width: 100%;
	    	height: 100%;
	    	position: absolute;
	    	top: 0;
	    	left: 0;
	    	background-color: rgba(0,0,0,.2);
	    	z-index: 10;
	    	display: none;
	    }
	    #drag_hint p{
	    	width: 100%;
	    	color:#fafafa;
	    	font-size: 4em;
	    	height: 4em;
	    	text-align: center;
	    	position: absolute;
	    	top: 0;bottom: 0;
	    	margin:auto 0;
	    }
	    .sec_map:hover  #drag_hint{
	    	display: block;
	    	pointer-events: none;
			-webkit-animation: showHint 2s forwards;
			   -moz-animation: showHint 2s forwards;
			    -ms-animation: showHint 2s forwards;
			     -o-animation: showHint 2s forwards;
			        animation: showHint 2s forwards;
	    }
	    .sec_map:hover  #drag_hint p{
			-webkit-animation: showHintTxt 2s forwards;
			   -moz-animation: showHintTxt 2s forwards;
			    -ms-animation: showHintTxt 2s forwards;
			     -o-animation: showHintTxt 2s forwards;
			        animation: showHintTxt 2s forwards;
	    }
/* ----------ANIMATION----------- */
	@-webkit-keyframes here {
		0%{
			-webkit-transform: translateY(-5%);
		   -moz-transform: translateY(-5%);
		    -ms-transform: translateY(-5%);
		     -o-transform: translateY(-5%);
		        transform: translateY(-5%);
		}
		20%  {
			-webkit-transform: translateY(-20%);
		   -moz-transform: translateY(-20%);
		    -ms-transform: translateY(-20%);
		     -o-transform: translateY(-20%);
		        transform: translateY(-20%);
		}
		100%  {
			-webkit-transform: translateY(0);
		   -moz-transform: translateY(0);
		    -ms-transform: translateY(0);
		     -o-transform: translateY(0);
		        transform: translateY(0);
		}
	}
	@keyframes here {
		0%{
			-webkit-transform: translateY(-5%);
		   -moz-transform: translateY(-5%);
		    -ms-transform: translateY(-5%);
		     -o-transform: translateY(-5%);
		        transform: translateY(-5%);
		}
		20%  {
			-webkit-transform: translateY(-20%);
		   -moz-transform: translateY(-20%);
		    -ms-transform: translateY(-20%);
		     -o-transform: translateY(-20%);
		        transform: translateY(-20%);
		}
		100%  {
			-webkit-transform: translateY(0);
		   -moz-transform: translateY(0);
		    -ms-transform: translateY(0);
		     -o-transform: translateY(0);
		        transform: translateY(0);
		}
	}
	@-webkit-keyframes showHint{
		0%{opacity: 0; }
		30%, 50%{opacity: 1; }
		100%{opacity: 0; }
	}
	@keyframes showHint{
		0%{opacity: 0; }
		30%, 50%{opacity: 1; }
		100%{opacity: 0; }
	}
	@-webkit-keyframes showHintTxt{
		0%{-webkit-transform: scale(.5); }
		30%, 50%, 100%{-webkit-transform: scale(1); }
	}
	@keyframes showHintTxt{
		0%{transform: scale(.5); }
		30%, 50%, 100%{transform: scale(1); }
	}
/* ----------RWD---------- */
	@media screen and (max-width: 1550px) {
		.list li span:nth-child(2){
			padding-left: 1%;
		}
		.list li span:nth-child(3){
			padding-left: 3%;
		}
		.list li span:last-child,
		.list .note{
			padding-left: 1%;
		}
	}
	@media screen and (max-width: 1366px) {
		.sec_nearby{
			padding: 20px 0;
		}
		.title{
			padding: 0 10px 0 30px;
		}
		.content{
			padding: 10px 30px;
		}
		#map_search input{
			padding: 10px 20px;
		}
		.sec_list,
		.sec_map{
			height: 550px;
		}
		#map{
			height: 580px;
		}
		.map_filter{
			max-width: 768px;
		}
		.map_filter li{
			margin: 10px 2%;
		}
		.list{
			height: 500px;
		}
	}
	@media screen and (max-width: 768px) {
		.sec_menu li{
			margin-left: 0;
		}
		.content{
			padding: 10px 0;
		}
		.title{
			display: none;
		}

		.list li{
			margin-left: 0;
		}
		.list li a{
			padding: 10px 0;
		}
		.list li span{
			display: block;
			width: 100% !important;
			padding-left: 18% !important;
			margin-left: 0;
		}
		.list li span:first-child:before{
			left: 5%;
			top:60px;
		}
		.list li span:first-child:after{
			display: none;
		}
		.list .note{
			width: 100%;
			padding-left: 18%;
			margin:0 0 0 10px;
			padding-right: 30px;
		}
		.list .note .sec_btns{padding-bottom: 15px;}

		.sec_menu li{
			font-size: 16px;
		}

		.map_filter li{
			padding: 5px;
			margin: 5px;
		}
	    #drag_hint p{
	    	font-size: 2em;
	    	height: 2em;
	    }
	}
	@media screen and (max-width: 480px) {
		#map_search input{
			width: 100%;
			padding: 10px 20px;
		}

		.map_info{
	    	max-width: 250px;
	    	padding: 0;
	    }
	    .map_info p{
	    	font-size: 12px;
	    }
	    .map_filter{
	    	top: 10px;
	    }
	    .map_filter li{
			padding: 5px;
			margin: 2px 0px;
			min-width: 77px;
		}
	}

/* 2022.08 */
.map_filter li{
	width: calc(16.66% - 15px);
	margin: 10px 5px;
}
.sec_list{
	position: absolute;
	top: 100px;
	left: 10px;
	width: 300px;
	max-height: 550px;
	background-color: rgba(50,50,50,0.8);
	overflow-y: auto;
}
.sec_list::-webkit-scrollbar{
    width: 3px;
}
.sec_list::-webkit-scrollbar-track{
    border-radius: 10px;
}
.sec_list::-webkit-scrollbar-thumb{
    background-color: #eee;
    border-radius: 10px;
}
.list{
	height: auto;
}
.list li{
	padding-left: 50px;
	margin-left: 0;
	margin-right: 0;
}
.list li a{
	color: #fff;
}
.list li a:hover{
	color: #fcb838;
}
.list li span{
	position: relative;
	display: block;
	width: 100%;
	float: none;
	letter-spacing: 0;
}
.list li span:first-child::before{
	top: 22px;
	left: -45px;
}
.list .note{
	display: block;
	width: 100%;
	color: #ddd;
	padding-left: 0;
	margin: 0;
	margin-bottom: 15px;
	letter-spacing: 0;
}
.list .note .btn-frame{
	color: #fff;
	border: 1px solid #fff;
	background: none;
}
.list .note .btn-frame:hover{
	border-color: #cc0033;
}


@media(max-width: 1366px){
	.sec_list{
		max-height: 400px;
	}
}

@media(max-width: 768px){
	.map_filter{
		top: 0;
	}
	.map_filter li{
		width: calc(33.33% - 8px);
		margin: 2px;
	}
	.sec_list{
		position: relative;
		top: 0;
		left: 0;
		width: 50%;
		background-color: #fff;
	}
	.list li{
		padding-left: 0;
	}
	.list li a{
		color: #000;
	}
	.list li a:hover{
		color: #cc0033;
	}
	.list li span:first-child::before{
		left: 5%;
	}
	.list .note{
		color: #888;
		padding-left: 15px;
		padding-right: 15px;
	}
	.list .note .btn-frame{
		color: #cc0033;
		border-color: #cc0033;
	}
}