.shuttle-box{
	width:100%;
	color: #58595a;
	position: relative;
	font-size: 0px;
	margin-bottom: 20px;
	min-height: 300px;
}

.shuttle-content{
	display: inline-block;
	width: 33%;
	padding: 25px;
	background-color: #f2f2f2;
	vertical-align: top;
}
.shuttle-map{
	display: inline-block;
	max-width:67%;
	width: 67%;
	height: 100%;
	overflow: hidden;
	vertical-align: top;
	position: relative;	
}

.shuttle-map img{
	height:100%;
	display: block;
	position: relative;
	position: absolute;
	width: auto;

	top: 0;
	left: 50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

@media screen and (max-width: 768px){
	.shuttle-content{
		width: 100%;
		display: block;
	}
	.shuttle-map{
		width:100%;
		max-width: 100%;
	}
	.shuttle-map img{
		position: relative;
		width: 100%;
		height: auto;
	}
}


.shuttle-title + .shuttle-table{
	margin-top: 25px;
}
.shuttle-table{
	width:100%;
	border-collapse: collapse;
}
.shuttle-table-col1, .shuttle-table-col2{
	font-size: 16px;
	color: black;
	background-color: white;
}
.shuttle-table-col1{
	padding-left: 8px;
	padding-right: 8px;
	font-size: 15px;
	text-align: center;
}
.shuttle-table-col1 div{
	margin: 5px 0;
}
.shuttle-table-col1 img{
	width: auto !important;
}
.shuttle-table-col2{
	padding: 10px;
}
.shuttle-table-bus-stop{
	font-weight: 700;
	color: #ff0000;
}
.shuttle-table-location{
	font-weight: 500;
	color: black;
}
.shuttle-table-annot{
	color: #666666;
	font-size: 15px;
}

.shuttle-title{
	width: 100%;
	font-size: 0px;
}
.shuttle-title span{
	display: inline-block;
	vertical-align: middle;
	font-size: 28px;
	color: #ff0000;
	font-weight: 500;	
}
span.symbol-to-fro-dot{
	display: block;
	position: absolute;
	height: 9px;
	width: 9px;
	top:-4px;
	background-color: #ff0000;
	border-radius: 50%;
	vertical-align: middle;
	font-size: 0px;
}
span.symbol-to-fro{
	display: inline-block;
	height:1px;
	width: 12.5%;
	vertical-align: middle;
	background-color: #ff0000;
	font-size: 0px;	
}
span.symbol-to-fro-line{
	display: block;
	position: relative;
	height:1px;
	width: 100%;
	vertical-align: middle;
	background-color: #ff0000;
	font-size: 0px;	
}

.shuttle-content-spacer{
	height:0;
}


p.transport-icon{
	margin: 30px 0;
}
p.transport-icon.mobile{
	display: none;
}
#g-map{
	width:100%;
	height: 400px;
	margin-bottom: 10px;
}
@media screen and (max-width: 768px){
	p.transport-icon.mobile{
		display: block;
	}
	p.transport-icon.desktop{
		display: none;
	}	
	#g-map{
		width: 100%;
	}	
}
.what-photo-wrapper{
	position: relative;
	font-size: 0px;
}
.what-photo-box{
	display: inline-block;
	position: relative;
	width: 48%;
	overflow: hidden;
	height: 0;
	padding-top: 28.8%;
	margin-bottom: 4%;
	text-decoration: none;

	cursor: pointer;
	margin-right: 4%;
}
.what-photo-box:nth-child(2n){
	margin-right: 0;
}
.what-photo-img{
	display: block;
	position: absolute;
	width: 100%;
	top: 0;
}
.what-photo-title-box, .what-photo-content-box{
	position: absolute;
	width: 100%;
	color: white;
	text-align: center;

	background-color: rgba(0,0,0,0.5);
	opacity: 1;
	transition: 0.5s;
}
.what-photo-title-box{
	bottom: 0;
	transition: 0.6s;
}
.what-photo-content-box{
	height: 100%;
	top: 100%;
	transition: 0.6s;
}

.what-photo-box-center{
	position:absolute;

	width: 100%;
 	top: 40%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.what-photo-box:hover .what-photo-title-box{
	opacity: 0;
}
.what-photo-box:hover .what-photo-content-box{
	top: 0;
}

.what-photo-title{
	font-size: 32px;
	line-height: 1.5;
	padding: 10px 20px;
}
.what-photo-content{
	line-height: 1.5;
	/*font-weight: 300;*/
	/*font-size: 18px;*/

	font-weight: 400;
	font-size: 20px;
}
.what-photo-btn-box{
	position: absolute;
	bottom: 30px;
	text-align: center;
	width: 100%;
}
.what-photo-btn{
	display: inline-block;
	padding: 15px;
	font-size: 14px;
	line-height: 1;
	background-color: #277a80;
	cursor: pointer;

	transition: 0.3s;
}
.what-photo-btn:hover{
	background-color: #034973;
}


@media screen and (max-width: 992px){
	.what-photo-title{
		font-size: 20px;
		line-height: 1.5;
		padding: 10px 20px;
	}
	.what-photo-box-center{
		top:50%;
	}
	.what-photo-btn-box{
		display: none;
	}
}
@media screen and (max-width: 768px){
	.what-photo-title-box{
		display: none;
	}
	.what-photo-content-box{
		top:0;
	}
	.what-photo-title{
		font-size: 16px;
		line-height: 1.5;
		padding: 10px 20px;
	}
}

