@charset "utf-8";
/* CSS Document */

.gmap{ width:32%; float:left; margin:0 2px 20px 2px;}
.CheckCount{ display:none;}
div.radio-toolbar_none label{ cursor:pointer;}
.gmap .radio-toolbar_none{ width:100%; margin:0 auto; position: relative;}

.gmap .travel_name{ text-align:center; line-height:1.5; height: 45px; overflow: hidden;}

.sightStyle{ max-width:300px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; line-height:18px;}
div.sightStyle img{ width:108px; height:108px;}

/*===景點照片===*/
.viewpoint1,.viewpoint2,.viewpoint3,.viewpoint4,.viewpoint5,.viewpoint6,.viewpoint7{ width:100%; overflow:hidden;}
.viewpoint1 img,.viewpoint2 img,.viewpoint3 img,.viewpoint4 img,.viewpoint5 img,.viewpoint6 img,.viewpoint7 img{ border:5px solid #9f8f6c; box-sizing:border-box; transition: all 0.4s;}
.viewpoint1 img:hover,.viewpoint2 img:hover,.viewpoint3 img:hover,.viewpoint4 img:hover,.viewpoint5 img:hover,.viewpoint6 img:hover,.viewpoint7 img:hover{ border:5px solid #db3f2f;transition: all 0.4s;}
.viewpoint1 p,.viewpoint2 p,.viewpoint3 p,.viewpoint4 p,.viewpoint5 p,.viewpoint6 p,.viewpoint7 p{ display:none;}

/*===Radio Button 換成 images===*/

div.gmap input.CheckCount p{ color:#F00; font-size:50px;}

.MainFrame input {
	position: absolute;
	border: 0;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	/*display: none;*/
}

/* make the label relative, add padding to the left for adding the custom radio button */
.MainFrame input + label {
    /*padding-left: 23px;*/
	cursor: pointer;
	position: relative;
	display: inline-block;
	line-height: 24px;
	margin:0 0 8px 0;
}

/**
 * :before will be our new button!
 */
 
input + label:before{
	/*display:none\0/;*/
}

input + label:before {
	content: " ";
	z-index:9999;
	position: absolute;
	right: 10px;
	top: 10px;
	
	/* Your size */
	width: 26px;
	height: 26px;
	
	/* Your default background color */
	background-image:url(/Content/images/zh-TW/travel/check_box.png);
	background-position:left top;
	background-repeat:no-repeat;
}

input:checked + label:before {
	/* Your checked background color */
	background-image:url(/Content/images/zh-TW/travel/check_box.png));
	background-position:left bottom;
	background-repeat:no-repeat;
}



label.home{ margin:0;}
.homeText{ max-width:300px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; line-height:18px;}
div.homeStart{position: absolute; z-index:3; top:0; right:0; text-align:center; margin:5px 5px 0 0;}
label.home{background:#02abba; border:0; width:115px; height:40px; transition: all 0.4s; border-radius:2px; color:#FFF;}
label.home:hover{background:#1fbc77; transition: all 0.4s;}
div.viewpointMain p{ line-height:40px;}

.sightStyle p,.homeText p{ margin-bottom:5px;}
.sightStyle a:hover,.homeText p a:hover{background: url(/Content/images/zh-TW/travel/googleMap.png) no-repeat left center #1fbc77; transition: all 0.4s;}

@media screen and (max-width: 1200px){
	.gmap{ width:48%;}
}

@media screen and (max-width: 600px){
   .google_map{ height:230px;}
   div.sightStyle img{ display:none;}
}