@charset "utf-8";
body {font:normal 16px/1.6 Arial,"Microsoft JhengHei", Helvetica, sans-serif;}
.wrapper{background:url(../images/bg-top.jpg) no-repeat top center,#e8e0d0 url(../images/bg.jpg) top repeat-x;padding:0px; margin:0 auto;position:relative;overflow:hidden;}
.area{margin:0 auto; max-width:96%;width:990px;position:relative; }
.area a{transition:all 0.5s;}
#header{position:relative; margin:0px auto;padding:0;z-index:5;display:block;}
#header h1{text-indent:-9999px;line-height: 0px;background-image: none;}
#header .logo{padding:0 0 0 55px;position: relative;}
#header .logo img{position:relative;margin:0 0 10px 0;z-index:2}
#header .logo p{position:relative;top:0;margin: 0 420px 30px 5px;color:#000;display:block;}

#menu{font-size: 18px;position:relative;z-index: 5;width: 55%}
#menu ul{display:flex;border:2px solid rgba(90,50,0,0.7);border-width:2px 0;margin:0 0 70px 55px;padding:2px 0;}
#menu li{flex:1;text-align:center;margin:0 0 0 3px}
#menu li:first-child{margin:0}
#menu a{display:block;margin: auto;background:#C00;color:#FFF;}
#menu a:hover{background:#900;}


.menu_nav .menu,
ul.share_bar{border-top: 1px solid #CCC;}
.menu_nav .menu ul{display: none;margin: 0 10px;}
.menu_nav .menu h2 a{font-size: 1.25em;color: #999; display: block;text-align: center;padding: 1em 0;}
#mobile_nav li a{font-size: 1.05em;}
.menu_nav .menu h2 a:hover,
#mobile_nav li a:hover{background:rgba(0,0,0,0.08);}

.area .line-2,#line-2{background: url(../images/sub-line-2.png) no-repeat left 10px;width: 989px;height: 40px; position:relative}
#line-2 img{display: block;position: absolute;right: 20px;top: 10px; }


/*  map  */
#map{ position: absolute;top:50px;right: 5px;overflow: hidden;font-size: 14px;width: 400px;height: 520px;z-index: 2;} 
#map .st0{fill:url(#svgid_1);}
#map #svgid_1 .stop0{stop-color:rgba(140,60,0,0.7);}
#map #svgid_1 .stop1{stop-color:rgba(80,50,0,0.8);}
#map .st5{clip-path:url(#SVGID_7_);}
#map a text,
#map a{transition:all 0.5s;}
#map a{cursor:pointer;}
/* #map a.over,
#map a:hover{transform:scale(1.1)} */
#map .st7{fill:none;stroke:rgba(0,0,0,0.8);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:0,3;transition: all 0.5s;}
#map a.over .st7,
#map a:hover .st7,
#map g.over .st7,
#map g:hover .st7{stroke:rgba(0,0,0,1);stroke-width:2.5;stroke-dasharray:0,4;}
#map .st8 svg{width:12px;height: 18px;}
#map .st8,
#map .st14{stroke-width:1;stroke:rgba(0,0,0,0.8);}
#map a.over .st8,
#map a.over .st14,
#map a:hover .st8,
#map a:hover .st14,
#map g.over .st8,
#map g.over .st14,
#map g:hover .st8,
#map g:hover .st14{stroke:rgba(0,0,0,1);}
#map .st8{fill:#Fb0;transition: all 0.5s;}
#map a.over .st8,
#map a:hover .st8,
#map g.over .st8,
#map g:hover .st8{fill:#Fe0;}
#map .st14,
#map .st15{fill:#C00;transition: all 0.5s;}
#map a.over .st14,
#map a:hover .st14{fill:#F00;}
#map .st16{fill:#FFF;}
#map a .st11,
#map a .st19{fill:none;stroke:#Fb0;stroke-width:20;stroke-linecap:round;stroke-miterlimit:10;transition: all 0.5s;}
#map a .st11{stroke:#Fb0;}
#map a .st19{stroke:#c00;}
#map a.over .st11,
#map a:hover .st11{stroke:#Fe0;}
#map a.over .st19,
#map a:hover .st19{stroke:#F00;}
#map a.over text,
#map a:hover text{}


/* *************老街介紹*********************** */
.container{overflow:hidden; position:relative;margin: 0 0 20px;z-index:4}
.container > h2{ margin:0 0 -20px 3px;position:relative;z-index:2;color:#fff;}
/* .container > h2::before{content:"";display:block;width: 100%;height:1px;position:relative;margin:19px 0 -19px 0;
background:rgba(80,50,0,0.3);
background: -moz-radial-gradient(center, ellipse cover,  rgba(80,50,0,0.4) 0%, rgba(80,50,0,0) 100%);
background: -webkit-radial-gradient(center, ellipse cover,  rgba(80,50,0,0.4) 0%,rgba(80,50,0,0) 100%);
background: radial-gradient(ellipse at center,  rgba(80,50,0,0.4) 0%,rgba(80,50,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66503200', endColorstr='#00503200',GradientType=1 );
} */
.container > h2 a{color:#fff;}
.container > h2 strong{position: relative; z-index:2; width: 130px;font-size: 1.1em;text-align: center; display:block;background:url(../images/nav_h2.svg) no-repeat 0 0;padding:0.3em 0}
.container .street{position: relative;margin:0 0 10px;overflow: hidden;display: block;color: #444;background: url(../images/sub-line-2.png) no-repeat center -1px;background-size: 100% 24px;padding:30px 0 15px;}
.container #year-1{background: none;}
.container .street .street_top{position: relative; display: flex;padding:5px 0 0 0;}
.container .street .street_link{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 5}
.container .street .street_link:hover{background:rgba(80,50,0,0.1)}
.container .street h2{font-size: 18px;font-weight: bold;overflow: hidden;color:#900;vertical-align: middle;}
.container .street h2::before{content:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'><polyline fill='none' stroke='%23CC0000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='12.6,20.1 11.2,20.1 7.8,16.7 15.2,16.7 15.2,28.5 1.7,15 15.2,1.5 15.2,13.3 7.8,13.3 11.2,9.9 12.6,9.9'/></svg>");display:inline-block;width:15px;vertical-align: inherit;margin: 3px 5px 0 0;}
.container .street .street_top figure{margin:0px 15px 5px 0;display: block;flex:0 0 300px;border:1px solid #75643F;padding:5px;background:#cba url(../images/loading.svg) no-repeat center;background-size:30px auto}
.container .street  .street_top figure img{border:1px solid #FFF;width:100%;height: 100%;object-fit: cover}
.container .street .txt{display: block; position:relative; padding:0 0 0.5em 0;}
.container .street p{overflow: hidden;display: block;}
.container .street aside{margin:0 0 10px 0;text-align: right;}
.container .street aside a{ color:#900; text-decoration: underline;padding:0 15px 0 0}
.container .street aside a:hover{ color:#000;}
.container .street .address{font-style:normal;color:#666;margin:0.5em 0 0 0;vertical-align: middle;}
.container .street .address::before{content:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'><path fill='%23E3AC00' stroke='%23352200' stroke-width='1.5' stroke-miterlimit='10' d='M10,2.4c-6.2,0-11,6.8-7.1,13.3 c0.9,1.6,7.1,12,7.1,12s6.2-10.4,7.1-12C20.9,9.2,16.2,2.4,10,2.4z M10,15.2c-5.7,0-5.7-8.7,0-8.7S15.8,15.2,10,15.2z'/></svg>");display:inline-block;width:13px;vertical-align: inherit;margin:0 5px 0 0;}
.container .street .feature{color:#000;overflow: hidden;display: block;margin:2px 0 6px 0;}
.PointRoute_iframe{color: #444;display:inline-block;width:6em;background:rgba(255,255,255,0.6);text-align: center;border-radius: 11px;transition:all 0.5s;vertical-align: inherit;}
.PointRoute_iframe:hover{background:rgba(255,255,255,1);color: #900;}

/* ***********推薦***************** */
.container .tour{margin: 0px 0 0.5em 0;padding: 0px;overflow: hidden;}
.container .tour h3{color: #856A00;float: left;}
.container .tour ul li{ float: left;padding: 0 10px 0 0;font-weight: bold;}
.container .tour ul li img{ padding-left: 10px;}
.container .tour ul li a{ color:#444;vertical-align: top;}
.container .tour ul li a:hover{ color:#900}
.container .tour aside{ position:absolute; bottom:10px; right:0px;}
.container .tour aside a{ color:#000; text-decoration: underline;}

.container .hotels{margin:0;padding: 0px;overflow: hidden;}
.container .hotels > h3{color: #856A00;padding: 0px 0 3px 0;}
.container .hotels ul{ float:left; padding: 0px;  }
.container .hotels ul li{float: left;padding: 0 16px 5px 0px;font-weight: bold;}
.container .hotels ul li a{ color:#444}
.container .hotels ul li a:hover{ color:#900}
.container .hotels aside{ position:absolute; bottom:0px; right:15px;}
.container .hotels aside a{ color:#900; text-decoration: underline;}
.hotels .gridlists{display:flex;margin:0 0 0 -10px;}
.hotels .grid_list{flex:1;display:flex;flex-wrap: wrap;border:1px solid rgba(150,130,90,0.8);margin:0 0 10px 10px;padding:5px;position:relative;max-width:320px;}
.hotels .grid_link{position:absolute;top:0;left:0;width:100%;height:100%;z-index: 2}
.hotels .grid_link:hover{background:rgba(100,60,0,0.1)}
.hotels .grid_pic{flex:2;min-width:100px;margin:0 10px 0 0}
.hotels .grid_pic img{width:100%;object-fit: cover;height: 100%;}
.hotels .grid_txt{flex:3;position:relative;vertical-align: sub;display: flex;flex-direction:column;justify-content:flex-start;min-width:175px;}
.hotels .grid_name{font-size: 16px;}
.hotels .grid_room{flex:1;}
.hotels .grid_room a{color:#666;}
.hotels .grid_booking{position: absolute;right: 0;bottom: 0; border-radius:3px;width:3.5em;background-color:#C00;color:#FFF;text-align: center;vertical-align:inherit;transition:all 0.5s;}
.hotels .grid_booking:hover{background-color:#F00;}
.hotels .grid_prices{color:#c00;vertical-align:inherit;font-size: 14px;}
.hotels .grid_prices em{vertical-align:text-bottom;vertical-align:inherit;font-size:1.8em;color:#c00;font-style:normal;line-height:1.4;position:relative;display: inline-block;margin:0 1px -6px 1px}
.hotels .grid_clear{display:none;}


#scroll-box{display:flex;font-size:16px;line-height: 1.6;margin:10px 0 0 0;}
.tour-works{margin:20px 0 0 20px;overflow: hidden;}
/* .tour-works h1{font-size:20px;color:#900;font-weight:bold;} */
.tour-works h1{font-size:18px;padding: 0.4em 1em 0.3em 1em;font-weight: bold; margin:0 0 3px;position:relative;z-index:2;color:#fff;background:url(../images/nav_h1.svg) no-repeat 0 0;width: 240px;text-align: center}

.tour-works h4{font-size:1.2em;color: #069;display:inline-block;margin:5px 0 0 0;}
.tour-works .PointRoute_iframe{margin: 0 0 3px 0;}
.tour-works p{margin:5px 0 15px;}
.attraction_page h2{background:rgba(80,60,0,0.2);}
#scroll-box h2{margin:0 0 5px 0}
#scroll-box .side{margin:0 0 0 20px;}
#side-box .grid_list{margin: 0 0 20px 0;max-width: inherit;border:0;}
#side-box h2 .more-arrow{background:none;}
#scroll-box .mappic a:hover .box{color:#900;}
#scroll-box .grid_list .grid_link{transition:all 0.5s;}
#scroll-box .grid_list .grid_link:hover{background:rgba(80,60,0,0.1);}
#scroll-box .point_data{background:rgba(255,255,255,0.4);margin: 0 0 30px;}
.attraction_page .point figcaption{padding:5px;}

.point .swiper-arrow{position: relative;}
#point{background:none;position: relative;padding: 20px 0 0 0;}
.point .swiper-button-prev,
.point .swiper-button-next{top:0;height:100%;margin:0;width:50px;background:rgba(80,60,0,0.2) no-repeat center center;background-size:20px auto;transition:all 0.4s}
.point .swiper-button-prev:hover,
.point .swiper-button-next:hover{background-color:rgba(80,60,0,0.4)}
.point .swiper-button-prev{left: -50px;background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23FFF'%2F%3E%3C%2Fsvg%3E");}
.point .swiper-button-next{right: -50px;background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23FFF'%2F%3E%3C%2Fsvg%3E");}
.swiper-arrow:hover .swiper-button-prev{left: 0;}
.swiper-arrow:hover .swiper-button-next{right:0;}
.point .swiper-button-prev.swiper-button-disabled{left: -50px;}
.point .swiper-button-next.swiper-button-disabled{right:-50px;}
#footer {width:100%}
#footer .box{margin: 0 auto;}

/* ********************** */
#top_bar{ position:fixed; right:0; bottom:0; display:none; z-index:5;}
#top_bar a{ display:block; width:42px; height:46px; background: url(../images/top_1.png); text-indent:-9999px; }

.scrollup {display: none;position:absolute;z-index:3;right:0;bottom:0;width:410px;font-size: 16px;}
.scrollup ul{position:relative;display:flex;flex-wrap: wrap;border: 2px solid rgba(80,50,0,0.5);background:rgba(255,255,255,0.3); border-radius: 7px;padding:5px 1px 1px 5px;}
.scrollup li{margin:0 4px 4px 0;flex:1 1 auto;}
.scrollup li a{display:block;border-radius:5px;margin:0;background:#C00;color:#FFF;text-align:center;white-space:nowrap;padding:4px 15px;vertical-align:text-top;}
.scrollup li a:hover{background:#F00;}
.swiper-slide{position: relative;}
#spotsinfo_main {font-size: 14px !important;}
@media screen and (max-width:970px){
#header{z-index:2;}
#header .logo p{margin: 0 410px 55px 0;}
	#header::after{content:"";display: block;position: absolute;top: 364px;right:0;background:url(../images/mapbg.png);width:50%;height:100px;z-index: 3;}
	#map{top:0;right:0;height: 440px;width:50%;padding:0 0 0 5%;}
	/* #menu{border-bottom:1px solid #CCC;} */
	.scrollup_ul{border: 10px solid #ddd;}
.main{float: none;width: auto;border-right:0;}
.side{float: none;width: auto;}
.main .tour-works{margin:0 0 7px 0;}
#scroll-box{margin:0;}
#scroll-box .side{margin:0;}
.point .swiper-button-prev{left:0;}
.point .swiper-button-next{right:0;}
}
@media screen and (max-width:900px){
#header .logo p{margin: 0 370px 55px 0;}
	.hotels .grid_list{flex-direction:column;}
	.hotels .grid_pic{margin: 0 0 5px 0;height: 21.5vw;min-height: 21.5vw;}
	#side-box .grid_list{flex-direction:row;}
	#header .logo{padding:0 0 0 5vw}
	#header .logo img{margin: 0 0 10px 0;}
}
@media screen and (max-width:800px){	
	#map{display: none;}
	#header .logo p{margin: 0 5vw 35px 0;}
	#header::after{display:none;}
}
@media screen and (max-width:650px){
	#header .logo a{display:block;position:relative;text-align:center;}
	#header .logo img{margin:0 auto 10px auto;max-width:95%;}
	.container .street .street_top{flex-direction:column;}
	.container .street .street_top figure{flex: 0 0 160px;margin: 0px 0 5px 0;}
	.container .street .street_top figure img{}
	.hotels .gridlists{flex-direction:column;}
	.hotels .grid_list{flex-direction:row;max-width:100%;}
	.hotels .grid_pic{margin: 0 10px 0 0;height:auto;min-height:0;max-width: 100px;}
}
/* @media screen and (min-width:1250px){
.main {width: 745px;margin: 0px 0 0 130px;}
.side {margin: 0 15px 0 0;}
}
@media screen and (min-width:1330px){
.main {width: 795px;margin: 0px 0 0 170px;}
.side {margin: 0 15px 0 0;}
} */