.transportation .table>tbody>tr>td{
	background-color: #f9f9f9;
	height: 80px;
}
.transportation_subtitle{
	font-size: 25px;
	color: #588293;
	text-align: center;
	margin-bottom: 25px;
	text-align: center;
	position: relative;
}
	body[lang="en"] .transportation_subtitle,
	body[lang="jp"] .transportation_subtitle{
		font-size: 20px;
	}
	.transportation_subtitle .type{
		
		position: absolute;
		margin-bottom: 10px;
		padding-left: 30px;
		// background-color: red;
	}
	.transportation_subtitle .type[lang='en']{
		margin-top: -40px;
	}

	.transportation_subtitle .type i{
		margin-right: 20px;
	}
	.transportation_subtitle .words{
		position: relative;
		font-size: 20px;
		// background-color: red;
	}
.transportation_content{
	font-size: 16px;
	line-height: 35px;
	margin-bottom: 50px;
	margin-left: 220px;
	margin-right: 30px;
	text-align: left;
	max-width: 1080px;
}
	.transportation_content[lang='en']{
		margin-bottom: 70px;
	}
.transportation_content .text_line{
	color: #999;
	margin-top: 20px;
}
.transportation_content .li_title{
	color: #588293;
	font-size: 20px;
	text-align: center;
	margin-top: 30px;
	padding-left: -220px;
}
.transportation ul li{
    margin-left: -10px;
}


/* table */ 
.transportation_content table {
    margin: auto;
    margin-bottom: 20px;
    margin-left: 0px;
    font-size: 16px;
    vertical-align: middle;
    background-color: #FFF;
}
.transportation_content thead {
    background: rgba(8, 65, 90, 0.7);
    color: #fff;
}

.none{
	display: none;
}



/* blog */ 



.transportation-wrap-blog .each{
	background-size: auto 100%;
	background-position: center;
	-webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    position: relative;
    width: 33.33%;
    height: 85vh;
    float: left;
    overflow: hidden;
}
	.transportation-wrap-blog .each:hover{
		background-size: auto 120%;
	}
	.transportation-wrap-blog .each:hover > .black{
		background: rgba(0, 0, 0, 0);
	}
	.transportation-wrap-blog .each:hover > .black .content{
		background: rgba(100%, 100%, 100%, 0.95);
	}
	.transportation-wrap-blog .each:hover > .black .button{
		background: rgba(0, 0, 0, 0.5);
	}
		.transportation-wrap-blog .each:hover > .black .button:hover{
			background: rgba(0, 0, 0, 0.7);
			color: #FFF;
		}

.transportation-wrap-blog .content{
	background: rgba(100%, 100%, 100%, 0.8);
	position: absolute;
	top: 27%;
	width: 80%;
	left: 10%;
	z-index: 1;
	padding: 30px;
	color: #FFF;

	-webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;

}
.transportation-wrap-blog .button{
	border: 2px solid #FFF;
	padding: 15px;
	text-align: center;
	font-size: 18px;
	background: rgba(0, 0, 0, 0.3);
	margin-top: 50px;
	color: #FFF;
	width: 50%;

	-webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.transportation-wrap-blog .title{
	font-size: 30px;
	color: #FFF;
	margin-bottom: 15px;

}
.transportation-wrap-blog .text{
	font-size: 15px;
	color: #000;
	line-height: 30px;
	overflow: hidden;
	height: 90px;

}

.transportation-wrap-blog .black{
	background: rgba(100%, 100%, 100%, 0.2);
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 0;

}

.transportation-wrap-blog .bandage{
	background-color: #FFF;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);

    text-align: center;
    position: absolute;
    width: 140px;
    left: -30px;
    top: 25px;
    height: 30px;
    line-height: 30px;
    font-weight: bold;

        -webkit-transition: all 0.3s; /* For Safari 3.1 to 6.0 */
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;

    -webkit-box-shadow: 4px 5px 10px 3px rgba(0%,0%,0%,0.3);
    -moz-box-shadow: 4px 5px 10px 3px rgba(0%,0%,0%,0.3);
    -o-box-shadow: 4px 5px 10px 3px rgba(0%,0%,0%,0.3);
    box-shadow: 4px 5px 10px 3px rgba(0%,0%,0%,0.3);

}

	.transportation-wrap-blog .bandage.type-yellow{
		background-color: #F4F320;
	    color: #82830D;
	}
	.transportation-wrap-blog .bandage.type-blue{
		background-color: #4195E4;
	    color: #1C517C;
	}
	.transportation-wrap-blog .bandage.type-green{
		background-color: #CADC92;
	    color: #50710C;
	}



.transportation-top{
	// background-color: #F0F0EF;
	// background-color:rgba(100%,100%,100%,0.8);
	// margin-bottom: -100px;
	position: relative;
	width: 100%;
	padding-top:15px;
	width: 100vw;
	z-index: 15;
	border-top: 1px solid #e9e9e9;
	border-bottom: 1px solid #e9e9e9;
}


.transportation .each-wrap-in{
	width: 100%;
	max-width: 1080px;

}

/* Subclass */ 

.restaurant-subclass-wrap{
	// background-color: #e9e9e9;
	height: 100px;
	// border-bottom: 2px solid #e9e9e9;
	margin-bottom: 30px;
	position: relative;
}
	.restaurant-subclass-in{
		// background-color: #e9e9e9;
		height: 100%;
		width: 100%;
		margin: auto;
		max-width: 800px;
	}
	.restaurant-subclass-each{
		width: 50%;
		float: left;
		text-align: center;
		line-height: 100px;
		font-size: 20px;
		border-bottom: 2px solid #e9e9e9;
		cursor: pointer;
	}
	.restaurant-subclass-each.select{
		background-color: #588293;
		color: #FFF;
	}

.transportation-blog-more{
	position: absolute;
	right: 0px;
	// background-color: #e9e9e9;
	height: 50px;
	width: 200px;
	top: -1px;
	border-left: 2px solid #e9e9e9;
	font-size: 18px;
	line-height: 50px;
	text-align: center;
	margin-top: 25px;
	cursor: pointer;
	opacity: 0.6;
}
	.transportation-blog-more:hover{
		opacity: 1;
	}
	.transportation-blog-more:active{
		line-height: 54px;
	}
.transportation-banner{
	height:350px;
	background-image: url('../images/transportation/banner.jpg');
	position: relative;
	background-size: cover;
    background-position: left;
    background-attachment: fixed;
}
.transportation_helicopter{
	margin-left: 220px;
	margin-right: 30px;
	text-align: left;
}

	body[lang="en"] .transportation_helicopter,
	body[lang="jp"] .transportation_helicopter{
		margin-top: 90px;
	}

	body[lang="en"] .transportation_helicopter.helicopter,
	body[lang="jp"] .transportation_helicopter.helicopter{
		margin-top: 0px;
	}

	body[lang="en"] .each-wrap.transportation-page[page="drive"],
	body[lang="jp"] .each-wrap.transportation-page[page="drive"]{
		margin-top: -50px;
	}

	//與右邊一樣置中
	#shuttle{
		padding-left: 220px;
	}

body[lang="en"] #freeAirportPickup .type{
	margin-top:-40px;
}
body[lang="en"] #freeBus .type{
	margin-top:-40px;
}


#hotel-position .transportation_subtitle img{
	position: absolute;
	left: 30px;
}
#hotel-position .transportation_subtitle i{
	position: absolute;
	left: 30px;
	font-size: 28px;
    margin-left: 3px;
}

#hotel-position .transportation_subtitle .text{
	margin-left: 50px;
    position: relative;
    width: 110px;
    text-align: left;
}

	

/* --------------------------------------- RWD ---------------------------------------------------- */ 

@media screen and (max-width: 980px) {
	.transportation-banner{
		height:250px;
		background-attachment: scroll;
		background-position: left top;
		background-size: auto 700px;
		
	}
	.transportation_content {
	    margin-left: 0px;
	    margin-top: 0px;
	    margin-bottom: 30px;
	    font-size: 14px;
	}
	.transportation_subtitle .type{
		position: relative;
		margin-left: 0px !important;
		padding-left: 0px !important;
		font-size: 22px;
	}
	
	.transportation_subtitle{
		margin-bottom: 0px;
	}
	.transportation_drive{
		width: 100%;
	}
	.transportation_helicopter{
		margin-left: 0px;
		margin-right: 0px;
	}
	.transportation-wrap-blog .each{
		width: 100%;
		height: 240px;
		background-size: cover;
	}
		.transportation-wrap-blog .each:hover{
			background-size: cover;
		}
	.transportation-wrap-blog .each a{
		display: block;
	}
	.transportation-wrap-blog .button{
		    position: relative;
		    margin: 0px;
		    margin-top: 0px;
		    margin-left: 0px;
		    width: 100%;
		    height: 40px;
		    /* opacity: 0; */
		    padding: 0px;
		    font-size: 15px;
		    line-height: 40px;
		    margin-top: 10px;
	}
	.transportation-wrap-blog .text{
		height: 50px;
		line-height: 25px;
	}
	.transportation-wrap-blog .title{
		font-size: 20px;
		margin-bottom: 10px;
	}
	.transportation-wrap-blog .content{
		padding: 20px;
		top: 30px;
	    width: calc(100% - 60px);
	    left: 30px;
	}
	.map_information{
		width: 100% !important;
	    float: none !important;
	    position: relative !important;
	    height: 400px !important;
	}
	.map_area {
	    width: 100% !important;
	    height: 400px !important;
	    float: none;
	    position: relative;
	}
	.map_content .photo{
		height: 150px !important;
	}
	.map_content .gradient{
		height: 80px !important;
	}
	.map_list{
		display: none;
	}
	.map_information{
		display: none;
	}
	.transportation-blog-more{
		    width: 78px;
		    font-size: 10px;
	}
	body[lang="en"] .transportation_helicopter,
	body[lang="jp"] .transportation_helicopter{
		margin-top: auto;
		text-align: left;
		font-size: 14px;
	}
	body[lang="en"] .each-wrap-in.shuttle,
	body[lang="jp"] .each-wrap-in.shuttle{
		margin-top: auto;
	}
	body[lang="en"] .transportation_helicopter.helicopter,
	body[lang="jp"] .transportation_helicopter.helicopter{
		margin-top: auto;
	}
	.transportation_content table{
		font-size: 13px;
	}
	.transportation_content table.helicopter{
		margin-left: 0px;
	}

	.transportation .about-top-banner-title{
		margin-top: -5px;
	}
	body[lang="en"].transportation .about-top-banner-title{
		margin-top: -25px;
	}




	#hotel-position .transportation_subtitle img{
		position: static;
		left: 0px;
		display: inline-block;
	}
	#hotel-position .transportation_subtitle i{
		position: static;
		left: 0px;
		font-size: 28px;
	    margin-left: 0px;
	    display: inline-block;
	}

	#hotel-position .transportation_subtitle .text{
		margin-left: 0px;
	    position: static;
	    width: auto;
	    text-align: center;
	    display: inline-block;
	}
		


}