@charset "utf-8";
.clear{clear:both;}
.popular{overflow: hidden;margin: 0 0 2em 0;}
.popular ol{
	 width: 100%;
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/
    margin: 0;
    padding: 0;
}
.popular ol > li{position: relative; width:100%; margin:0.8em 0 0 0; height:9.1em;
}
.popular ol > li a{background-position:center center;background-size:cover;display:flex;text-align: center;align-items: flex-end; width:100%;height:100%;color:#fff;}
.popular ol img{ width:100%}
.popular ol .poptxt{position: relative; flex:1 1 auto;}
.popular ol a:hover .poptxt{}
.popular ol .poptxt::before{content: "";display: block; position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: -moz-linear-gradient(top,rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b3000000',GradientType=0 );z-index: 1;transition:all .5s;}
.popular ol a:hover .poptxt::before{opacity: 0.5}
.popular ol .poptxt_box{margin:1em 1em 0;position: relative;z-index: 2; display:block; padding:0.6em 0 0 0;vertical-align:middle;border-top:1px solid rgba(255,255,255,.5);font-size: 1.1em}
.popular ol .poptxt .place{display: block; font-size:0.9em;line-height:1.3em;padding:0 0 10px 0;}
.popular ol .poptxt .place::after,
.popular ol .poptxt .place::before{content:" - ";}
#twnmap{}
#map{position: relative; overflow:hidden;margin:0 0 1.5em; transition:background-color 1s;}
#map.k4{background-color:#bbebf3}
.mappic{float:left; position:relative; width:100%;height: 870px; transition:width 0.57s linear}
#map::before,
.mappic::before{content:" "; display:block; clear:both}
#panel{position: relative; top:100%; left:100%;opacity:0;}
#panel .box{  position:absolute;top:0.5em;left:-9em;background-color:rgba(255,255,255,0.8); font-size:1.1em; line-height:1.5em;z-index:5; padding:0.5em 0.8em; border:1px solid #999; border-radius:0.5em; width:8em; height:5.4em;transition:opacity 0.2s;}

.svg_twmap{cursor: pointer;
  display:block;
  width:200%;margin: 0 auto;
  height: 240%;
  stroke: #360;
  fill: currentColor;
  stroke-width:0.05;
  stroke-dasharray: 5, 0;transition:transform 0.5s;
transform:scale(0.65) translate(-50%, -39%);
}

.svg_twmap a{fill:inherit;stroke:inherit;}

.svg_twmap text{fill:#000; opacity:0;transition:opacity 0.5s;}
.svg_twmap text.text2{opacity:1;fill:#004871}
.north text.text2,
.central text.text2,
.east text.text2,
.island text.text2{opacity:0;}
.north .svg_twmap{transform:scale(1.34) translate(-49%, 6%);}
.east .svg_twmap{transform:scale(1) translate(-50%, -23.5%);}
.central .svg_twmap{transform:scale(1.34) translate(-37%, -8%);}
.south .svg_twmap{transform:scale(1.34) translate(-32%, -29%);}
.island .svg_twmap{transform:scale(1) translate(0%, -14%);}
.svg_twmap_island{transition:transform 0.5s;}
.island .svg_twmap_island{transform:translate(-1.5%, 0);}

	   
.svgbackground{fill:#dcf4f8;stroke-width: 0;background-color: #dcf4f8;}
.svg_twmap_east,
.svg_twmap_north,
.svg_twmap_south,
.svg_twmap_central,
.svg_twmap_island{fill:#d8e47d;}
.svg_twmap_east:hover,
.svg_twmap_north:hover,
.svg_twmap_south:hover,
.svg_twmap_central:hover{fill:#d0de69;}

/* 島大區域 */
.path20,
.path29,
.path32{fill:#FFF;stroke-width:0;}
.penghu:hover .path20,
.kinmen:hover .path29,
.matsu:hover .path32{fill:rgba(255,255,255,0.5);}
.north .svg_twmap_north,
.central .svg_twmap_central,
.south .svg_twmap_south,
.east .svg_twmap_east,
.island .svg_twmap_island{fill:#c2d150;}
.north .svg_twmap_north g:hover,
.central .svg_twmap_central g:hover,
.south .svg_twmap_south g:hover,
.east .svg_twmap_east g:hover,
.island .svg_twmap_island > g:hover{fill:#b2c23c;}


.island .svg_twmap_island > text,
.kinmen,
.matsu,
.south .svg_twmap_island,
.central .svg_twmap_island,
.line{ opacity:0;transition:opacity 0.5s;}

.svg_twmap_island > text{fill:#666;}
.svg_twmap_island > text,
.north .svg_twmap_north text,
.central .svg_twmap_central text,
.south .svg_twmap_south text,
.east .svg_twmap_east text,
.island .svg_twmap_island g text,
.island .kinmen,
.island .matsu,
.south .line,
.north .line{ opacity:1}

/*
.region .north,
.region .central,
.region .south,
.region .east,
.region .island{display:none;position:absolute;top:2em;left:3em; background:#fff;border-radius:0.5em 0.5em 0.8em; padding:0.5em;width: 6.5em;}
.region h3{ font-size:1.1em; padding:0.5em;text-align: center;width: 5em;}
.north .region .north,
.central .region .central,
.south .region .south,
.east .region .east,
.island .region .island{ display:block;}
.region li{margin:0.2em}
.region a{ display:block;text-align:center; line-height:2em; color:#000;padding:0 1em;border-radius:0.5em;}
.region li.in a,
.region a:hover{ background-color:#036; color:#fff}
.region .island{width:auto;}
.region .island h3{width: 4.2em;}
.region .island li{float: left;min-width: 5em;}*/


.county{margin:0em 0 2.5em 0;}
.county .swiper-slide{width:250px;}
.county.gridlists .swiper-container{margin:0.7em 0 0 0;}
.county.gridlists .grid_list{width:100%;margin:0;padding:0;}
.county.gridlists .grid_pic{float:none;width:100%;height:190px;}
.county.gridlists .grid_name{margin:0.5em 0.3em 0.5em 0.3em; font-size: 1.2em;}
.county.gridlists .grid_txt{height: 2.9em;}

.hotel3{margin:0em 0 1em 0;}
.hotel3 .swiper-slide{width:250px;}
.hotel3.gridlists .swiper-container{margin:0.7em 0;}
.hotel3.gridlists .grid_list{width:100%;margin:0;padding:0;}
.hotel3.gridlists .grid_pic{float:none;width:100%;height:190px;}
.hotel3.gridlists .grid_name{margin:0.55em 0.3em 0em 0.3em; font-size: 1.2em;}
.hotel3.gridlists .grid_txt{height: 5em;}
.hotel3.gridlists .grid_rate{position:relative;bottom:0;margin:3px 0 0 0}
.hotel3.gridlists .grid_prices{font-size:1em;}
.hotel3.gridlists .grid_prices em{font-size:1.6em;}

.tourist{margin:0em 0 1em 0;}
.tourist .swiper-slide{width:13em;}
.tourist.gridlists .swiper-container{margin:0.7em 0;}
.tourist.gridlists .grid_list{width:100%;margin:0;padding:0;}
.tourist.gridlists .grid_pic{float:none;width:100vw;height:100vw;max-width:208px;max-height:208px; border-radius:50%;}
.tourist.gridlists .grid_name{margin:0.5em 0.3em 0.5em 0.3em;text-align: center;font-size: 1.2em;}
.tourist.gridlists .grid_txt{height: 2.9em;}




/*footer*/
.new-copyright{clear: both;
	margin: 0;
	border: 0;
	font-size: 13px;
	color: #999;
	text-align: center;
	position: relative;
	background: #f5f5f5;
	padding: 1em 0;
}


@media screen and (min-width:970px){.region .south{top: 22em;}
.region .east{top: 20em;left: 33em;}
.region ul::after{content:" "; display:block; clear:both}
.region section::after{content:" ";display:block;position:absolute;width:0;height:0;line-height:0;}
.region .north::after{
    right:-7em;
    top: 7em;
    transform-origin: left;
    transform: skewY(35deg);
    border: 7em solid #FFF;
	border-width: 1em 0 1em 7em;
    border-top-color: transparent;
    border-bottom-color: transparent;}
.region .central::after{
    bottom:-8em;
    left:2.5em;
    transform-origin: top;
    transform: skewX(27deg);
    border: 0.3em solid #FFF;
    border-width: 8em 0.8em 0;
    border-left-color: transparent;
    border-right-color: transparent;}
.region .south::after{
    right:-7em;
    bottom: 3em;
    transform-origin: left;
    transform: skewY(-35deg);
    border: 7em solid #FFF;
	border-width: 1em 0 1em 7em;
    border-top-color: transparent;
    border-bottom-color: transparent;}
.region .east::after{
    left:-4em;
    bottom: 4em;
    transform-origin: right;
    transform: skewY(30deg);
    border: 4em solid #FFF;
	border-width: 1em 4em 1em 0;
    border-top-color: transparent;
    border-bottom-color: transparent;}

}


@media screen and (max-width:970px){
	#content{margin: 0 0;}
.mappic{width:100%;height: auto;margin: 0px 0 -170% 0;}
#map{margin:1em 0 1.5em;}
.popular ol .poptxt{ opacity:1;}
.popular ol a:hover .poptxt{opacity:0; }
.svg_twmap text.text2{transform: scale(0.25) translate(120px, 37px);}
}
@media screen and (min-width: 1180px){

.main{margin: 0 -450px 0 0;padding: 0 450px 0 0;}
.side{ width:430px}
}