@charset "utf-8";

.author{color:#666;float:right;margin:0 0 0.6em 0;font-size:0.9em;padding:0;}
.error{font-size:0.9em;color:#c60;float:right;margin:0.6em 0.5em;}
.error .PointError_iframe{background-color:#559100;border-radius:5px;color:#fff;padding:3px 5px;white-space:nowrap;}

#point_data{background-color:#f2f2f2;margin:0;padding:0 0.5em;border:1px solid #CCC;font-size:0.9em;}
#point_data h3{margin:0;padding:0 0.2em 0 0;float:left;width:15%;text-align:right;}
#point_data .address,
#point_data .point_list{padding:0.5em 0 0.5em 0;}
#point_data .point_list{border-top:1px dashed #999;}
#point_data .point_list::after{content:"";display:block;clear:both;}
#point_data p,
#point_data .route ul,
#point_data .attractions ul{margin:0;width:85%;overflow:hidden}
.point_m{display: none}
/* 行程 */
#point_data .route ul{padding:0;color:#999;}
#point_data .route li{margin:0;}
#point_data .route li a{display:block;text-decoration:none;color:#069;text-align:left;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
#point_data .route li a:hover{color:#000;}

/* 交通 */
.shared_google_mapicon {
    background: rgba(0, 0, 0, 0) url("/images/googlemapicon2.png") no-repeat scroll 0 0 / auto 1em;
    display: inline-block;
    font-size: 1.3em;
    height: 1em;
    margin: 0 0 0 2%;
    vertical-align: middle;
    width: 4em;
}
/*#point_data .point_traffic h3{ position:relative;width:15%;padding: 0 0 0 0;}*/
#point_data .point_traffic .text{padding:0.2em 0 0 0;overflow:hidden;line-height:1.5em;}
#point_data .point_traffic .text p{width:100%;}
 .point_traffic .shared_google_mapicon { position:absolute; left:50%; top:0.2em;}

.shared_google_map{width:100%}
.shared_google_map iframe{height:350px;width:100%}

/* 景點 */
#point_data .attractions ul{padding:0;color:#999;}
#point_data .attractions li{float:left;margin:0;width:33.333%;}
#point_data .attractions li a{display:block;text-decoration:none;color:#069;padding:0 0.5em 0 0;text-align:left;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
#point_data .attractions li a:hover{color:#000;}


#point_data .more{text-align:right;padding:0;}
#point_data .more a{display:block;font-size:12px;line-height:16px;background:url(/tourguide/twnmap/images/icon_06.gif) no-repeat left center;width:auto;float:right;margin:0px 10px 0px auto;padding:0px 0px 5px 15px;overflow:hidden;color:#333;text-decoration:none;}
#point_data .more a:hover{color:#f33;text-decoration:underline;}
#point_data .opening{}
#point_data .opening:hover{background-position:left bottom;}
#point_data .closing{background-position:right top;}
#point_data .closing:hover{background-position:right bottom;} 


/* 新聞 */
.side_news ul{display:block;/*max-height:420px;*/overflow:hidden;line-height:1.5}
.side_news li{border-bottom:1px solid #CCC;}
.side_news li a{display:flex;align-items:center;padding:10px 0;transition:background 0.5s,color 0.5s;overflow: hidden;}
.side_news li a:hover{background:rgba(0,0,0,0.1)}
.side_news li img{float:left;min-width:96px;height:100px;flex:0;object-fit:cover;vertical-align: middle;margin: 0 5px 0 0}
/*.side_news .more{position: relative; display:block;float:right; color:#666; padding:0.5em 0.5em 0.5em 0.7em; font-size:1.04em;line-height:1.5em;vertical-align: middle;}
.side_news .more:hover{color:#F60;}
.side_news ul .more::after{content:" ";display:inline-block;width: 0;height: 0;line-height: 0; margin:0 0 0.3em 0.5em;border: 5px solid #666;border-right: none;border-bottom-color: transparent;border-top-color: transparent; vertical-align: middle;}*/


#mappic{position: relative; font-size:15px;margin:0 0 1.5em 0;}
#mappic > a{display: block;position: relative;}
#mappic > a::before{position:absolute;display: block;width: 100%;top: 0;left: 0;background:rgba(0,0,0,0);height: 80px;content:" ";transition:background 0.2s;}
#mappic > a:hover:before{background:rgba(0,0,0,0.2);}
#mappic .box{display:block;color:#000;}
#mappic .box > span{display:block;line-height: 1.3em; padding:0.3em 0}
#mappic .box > span span{ display:block; vertical-align:top;}
/*#mappic .box > span.hours span{display: inline-block;}*/
.news_lists{margin:1em 0 0.7em 0}

@media screen and (max-width:970px){
#news_story{width:96%;}
#news_story .swiper-button-next, #news_story .swiper-button-prev{display:none}
#point_data h3{ text-align:left; float:none; width:auto}
#point_data .point_traffic .text{width:auto;}
#point_data .point_traffic h3{ width:auto}
#point_data p,
#point_data .route ul,
#point_data .attractions ul{ float:none; width:auto}
#mappic{display:none}
.point_m_f{display:block;height:50px;}
.point_m{display: flex;margin:0 2% 0 0;top:0;transition:top 0.5s;z-index:12;max-width:550px;background:#fff;background: -moz-linear-gradient(top,  rgba(255,255,255,1) 50px, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 50px,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,1) 50px,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );

}
.f .point_m{position: fixed;margin:0;padding:0 2% 30px 0;top:63px;left: 0;right: 0;}
.point_m li{flex:1;margin:0 0 0 2%;}
.point_m a{max-width:7em;display: block;padding:5px 0 0 0; text-align: center; border-bottom:2px solid #ccc;color:#000;transition:padding 0.5s;}
.f .point_m a{padding: 15px 0 0 0;}
.point_m li.on a{border-bottom:2px solid #F90;}
}
@media screen and (max-width:600px){
#point_data .attractions li{float:none;width:100%;}
}