@charset "utf-8";
/* CSS Document */
/************************************************************************************
RESET
*************************************************************************************/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, figure, mark, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    /*vertical-align: baseline;*/
    background: transparent;
}
body {line-height: 1; -webkit-text-size-adjust: none;/*防止allpe的safari瀏覽器字體變大*/}
/*ol, ul { list-style: none;}*/
ul { list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
/* remember to define focus styles! */
:focus {outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {
   /* border-collapse: collapse;*/
    border-spacing: 0;
}
a img {border: none;}
img {max-width: 100%;image-rendering: -webkit-optimize-contrast;}
.clean { clear:both;}
a {color: #333333; text-decoration: none; blr:expression(this.onFocus=this.blur()); outline: none; /* for Firefox */hlbr:expression(this.onFocus=this.blur());}
a:hover {}
a:focus{ -moz-outline-style: none;}
.b-box{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	margin: 0;
	padding: 0;
	font-size:15px;	
}

/*wow*/
.wow:first-child {
visibility: hidden;
visibility:visible \9;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   /* border-collapse: collapse;*/
    border-spacing: 0;
}

a img {
	border: none;
}

.clean { clear:both;}

img { max-width:100%;}

h1 {
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
	width: 100%;
}

#web-outer{	
	clear: both;
	overflow: hidden;
	background: url("../img/bg_01.jpg") top center repeat;
}

.header{clear:both;overflow: hidden;padding-bottom: 30px;}
.header_bg{background: url("../img/header_bg.png") bottom no-repeat;margin-bottom: 50px;}
.top_header{max-width: 1094px;margin: 0 auto;position: relative;height: 817px; }
.top_title{position: absolute;max-width: 473px;top: 220px;left: 370px;}
.spot_01{position: absolute;max-width: 422px;bottom: -20px;right: -80px;}
.spot_02{position: absolute;max-width: 211px;top: 70px;left: -220px;}
.spot_03{position: absolute;max-width: 251px;top: 320px;left: -300px;}
.spot_04{position: absolute;max-width: 214px;top: 600px;left: -150px;}
.spot_05{position: absolute;max-width: 264px;top: 100px;right: -300px;}
.spot_06{position: absolute;max-width: 238px;top: 400px;right: -270px;}
.spot_07{position: absolute;max-width: 191px;top: 50px;left: 60px;}

.floating-up{
	animation:Floatingx 5s infinite ease-in-out;
	-moz-animation:Floatingx 5s infinite ease-in-out;
	-webkit-animation:Floatingx 5s infinite ease-in-out}
	@keyframes Floatingx{from{transform:translate(0,0)}
	65%{transform:translate(0,10px)}to{transform:translate(0,0)}}
	@-webkit-keyframes Floatingx{from{-webkit-transform:translate(0,0)}
	65%{-webkit-transform:translate(0,10px)}to{-webkit-transform:translate(0,0)}}

.floating-up02 {
    animation: floating-up02 5s linear infinite;
    transform-origin: 50% 50%;
  }
  
  @keyframes floating-up02 {
    0% { transform: translateY(0) }
    50% { transform: translateY(-5px) }
    100% { transform: translateY(0) }
  } 


.header_md{display: none;}


/*-------------------------------------選單---------------------------------------------*/
#main-nav {
    z-index: 990;
    overflow: hidden;
 }
 
.block_menu {
     z-index: 990;
     width: 100%;
     text-align:center;
     font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;
	font-weight: 600;
     height: 50px;	      
     z-index: 990;
	background: url("../img/nav_bg.png") top center no-repeat;
	padding-top: 10px;
 }
 
.sticky { top: 40px; }
#nav ul{background-color: antiquewhite;} 
#nav li { display:inline-block;margin-right: 10px; }
#nav li a { display: inline-block;  }

.menu_box a{background: url("../img/nav_icon.png") top center no-repeat #918d78; text-decoration: inherit;font-size: 18px;color: #fff;line-height: 1.5em;padding: 20px;border-radius: 25px;}
.menu_box a:hover, .menu_box a.active{background-color: #623111;}


.menu {}
/*.menu01 a { width: 140px;height: 140px;text-indent:-5000px;background: url("../img/nav.png") 0 0 no-repeat;}
.menu01 a:hover, .menu01 a.active{ background: url("../img/nav.png")0 -140px;}
.menu02 a { width: 140px;height: 140px;text-indent:-5000px;background: url("../img/nav.png") -140px 0 no-repeat;}
.menu02 a:hover, .menu02 a.active{ background: url("../img/nav.png") -140px -140px;}
.menu03 a { width: 140px;height: 140px;text-indent:-5000px;background: url("../img/nav.png") -280px 0 no-repeat;}
.menu03 a:hover, .menu03 a.active{ background: url("../img/nav.png") -280px -140px;}
.menu04 a { width: 140px;height: 140px;text-indent:-5000px;background: url("../img/nav.png") -420px 0 no-repeat;}
.menu04 a:hover, .menu04 a.active{ background: url("../img/nav.png") -420px -140px;}*/
 .active {
     -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
 }

.bg01{background-color: #e1ddcc;}
.bg02{background: url("../img/bg_02.jpg") top center repeat;}
.bg03{background: url("../img/bg_03.png") center top 300px no-repeat;}
.bg04{background: url("../img/bg_04.jpg") top center repeat;}
.bg05{background: url("../img/bg_05.png") top center repeat;}
.bg06{background: url("../img/bg_06.jpg") top center repeat;}
.bg07{background: url("../img/bg_07.png") center top 100px no-repeat;}
.bg08{background-color: #d3cdb4;}

.main{max-width: 960px;margin: 0 auto;position: relative; clear: both;overflow: hidden;}

.big-title{margin: 0 auto;max-width: 369px;padding: 0 0 30px 0;}

.big-title01{max-width: 350px; width: 100%;height: 90px; background: url("../img/title_01.png");margin: 0 auto 30px auto;text-indent: -5000px;}
.big-title02{max-width: 350px; width: 100%;height: 90px; background: url("../img/title_02.png");margin: 0 auto 30px auto;text-indent: -5000px;}
.big-title03{max-width: 350px; width: 100%;height: 90px; background: url("../img/title_03.png");margin: 0 auto 30px auto;text-indent: -5000px;}
.big-title04{max-width: 350px; width: 100%;height: 90px; background: url("../img/title_04.png");margin: 0 auto 30px auto;text-indent: -5000px;}
.big-title05{max-width: 350px; width: 100%;height: 90px; background: url("../img/title_05.png");margin: 0 auto 30px auto;text-indent: -5000px;}
.big-title06{max-width: 350px; width: 100%;height: 90px; background: url("../img/title_06.png");margin: 0 auto 30px auto;text-indent: -5000px;}


/*推薦行程*/
#tour{}
.tour-main{padding: 80px 0 50px 0;margin: 0 auto;clear: both;overflow: hidden;}
.tour-wrap{max-width: 1100px;width: 95%; margin: 0 auto;padding: 0 20px;} 

/*小標名*/
.small_spring{width: 120px;background-color: #d44a88;color: #fff;font-weight: bold;text-align: center;font-size: 20px;border-radius: 0 25px 25px 0;padding:10px 0;margin: 20px 0 10px 0;}
.small_summer{width: 120px;background-color: #0e713d;color: #fff;font-weight: bold;text-align: center;font-size: 20px;border-radius: 0 25px 25px 0;padding:10px 0;margin: 20px 0 10px 0;}
.small_fall{width: 120px;background-color: #a35211;color: #fff;font-weight: bold;text-align: center;font-size: 20px;border-radius: 0 25px 25px 0;padding:10px 0;margin: 20px 0 10px 0;}
.small_fall{width: 120px;background-color: #a35211;color: #fff;font-weight: bold;text-align: center;font-size: 20px;border-radius: 0 25px 25px 0;padding:10px 0;margin: 20px 0 10px 0;}
.small_winter{width: 120px;background-color: #334a6c;color: #fff;font-weight: bold;text-align: center;font-size: 20px;border-radius: 0 25px 25px 0;padding:10px 0;margin: 20px 0 10px 0;}
.small_special{width: 120px;background-color: #be0750;color: #fff;font-weight: bold;text-align: center;font-size: 20px;border-radius: 0 25px 25px 0;padding:10px 0;margin: 20px 0 10px 0;}

.t-txt{width: 80px;color: #fff;padding: 5px;border-radius: 5px;margin-top: 10px;text-align: center;}
.txt-color01{background-color: #5d7692;}



.tour_list_box ul {
	width: 90%;
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
	padding: 10px 20px 10px 10px;
	background-color: #fff;
	border-radius: 10px;	
}
	
.tour_list_box li{
	font-size: 18px;	
	line-height: 1.5em;
	color:#4a4a4a;	
	border-bottom:1px dashed #d0d0d0;
	padding: 10px 0;
	
	
}
.tour_list_box li em  { color:#0c6b44; font-style:normal; padding-left:6px;font-size:15px;font-family:"微軟正黑體", Arial, Helvetica, sans-serif;}
.tour_list_box .price{	
	font-size:15px;
	line-height:2em;
	color:#c90021;		
	font-weight: bold;
	float: right;
}

.tour_list_box .price strong {	
	font-size:18px;
	line-height:2em;
		
}

.tour_list_box li a{	
	color:#4a4a4a;
	text-decoration:none;
	display:block;
	overflow:hidden;
	padding: 3px 5px;
	font-weight: bold;
}
.tour_list_box li a:hover{}
.tour_more{display: block;text-align: center;padding-top: 30px;}
.tour_more a{background-color: #c3bb99;padding: 10px;border-radius: 25px; font-size: 18px;line-height: 1.5em;color: #fff;text-decoration: none;}
.tour_more a:hover{background-color: #9f9b89;}


.tour-list {width: 95%;margin: 0 auto;padding: 10px; background: #fff;border-radius: 10px;}
.tour-list a {display:flex;padding: 10px;overflow: hidden;border-bottom:1px dashed #35322d;text-decoration: none;justify-content:space-between;align-items:center;}
.name-l{flex:0 0 85%;font-family:"微軟正黑體", Arial, Helvetica, sans-serif;font-size: 18px;color:#4a4a4a;line-height: 1.5em;}
.name-l em{color:#0c6b44; font-style:normal; padding-left:6px;font-size:15px;font-family:"微軟正黑體", Arial, Helvetica, sans-serif;}
.name-l strong{font-family:"微軟正黑體", Arial, Helvetica, sans-serif;font-size: 15px;color: #3e86c1;margin-left: 5px;}

.price-r{flex:0 0 15%; text-align:right;font-family:"微軟正黑體", Arial, Helvetica, sans-serif;font-weight: 600; font-size: 15px;line-height: 1.2em;color:#4a4a4a;}
.price-r strong{font-family:"微軟正黑體", Arial, Helvetica, sans-serif;font-size: 20px;font-weight: 600;margin: 0 2px;letter-spacing:1px;color:#bc012d;	}



/*認識東北*/
.about-main{padding: 80px 0 80px 0;margin: 0 auto;clear: both;overflow: hidden;} 
.about-wrap{
	position: relative;	
    display:flex;
	flex-wrap: wrap;
	margin: 50px auto 0 auto;	
	max-width:1100px;
	z-index: 30;
	align-items:center;	
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
}

.about-txt{width: 42%;margin: 0 1% 0 1%;}
.about-title{font-size: 30px;line-height: 1.8em; font-weight: 600;text-align: center;color: #115115;}
.about-txt p{display: inline-block;font-size: 18px;line-height: 2em;color: #4a4a4a;font-weight: bold;padding: 20px;border-radius: 10px;background-color: #f2f6d6;}
.about-txt p strong{color: #23825b;}
.about-ph{width: 54%;margin: 0 1% 0 1%;}


/*人氣旅館*/
.htoel-main{padding: 80px 0 80px 0;margin: 0 auto;clear: both;overflow: hidden;}
.hotel-wrap{
	position: relative;	
    display:flex;
	flex-wrap: wrap;
	margin: 50px auto 0 auto;	
	max-width:1500px;
	z-index: 30;
	align-items:center;	
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
}

.hotel-txt{width: 25%;margin: 0 1% 0 1%;text-align: center;}
.hote-title{font-size: 30px;line-height: 1.5em; font-weight: 600;text-align: center;color: #623111;
background-image: linear-gradient(0,#fff9e9 40%,transparent 40%);padding: 0 10px 0 10px; margin-bottom: 20px;display: inline-block;}
.hotel-txt p{font-size: 15px;line-height: 2em;text-align: left;}
.hotel-ph{width: 70%;margin: 0 1% 0 1%;}

.hotel-pic {display: none;margin: 0 0 80px 0;}

.accordion{ 
  width: 100%;
  height: 500px;
  display: flex;
  overflow: hidden;
  margin: 0 auto;
}
.tab{
  position: relative;
  width: 20%;
  height: inherit;
  margin: 0 5px;
  color: #FFF;
  cursor: pointer;
  transition: width .5s ease;
}
.tab img{
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	border-radius: 25px;
  object-fit: cover;
  transition: all .0s ease;	
}

/* --- Hover Effects --- */
.tab:hover img{opacity: 1;}
.tab:hover{width: 100%;}
.tab:hover .caption{transition: all .5s ease; opacity: 1;}

.content-img{display: none;}



/*推薦玩法*/
.play-main{padding: 80px 0 80px 0;margin: 0 auto;clear: both;overflow: hidden;}

.area-infor-space {
	width: 100%;
	max-width: 1500px;
	display: flex;
	gap: 40px 20px;
	margin: 0 auto;
	justify-content: center;	
	align-items: stretch;	
	flex-wrap: wrap;	
}

.area-infor-box{
	width: 32%;
	position: relative;
	display: inline-block;	
}

.area-infor-pic {
	width: 100%;
	max-width: 580px;
	position: relative;
	display: inline-block;	
}

.area-infor-pic img{border-radius: 25px;}

.area-infor-box:hover {
	overflow: hidden;
}

.area-infor-pic {
	line-height: 0px;
}

.area-infor-pic::before {
	content: '';
	width: 100%;
	position: absolute;
	left: 0px;
	top:0px;
	height: 100%;	
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 2;	
}

.area-infor-name {
	width: 100%;
	height: 64px;
	line-height: 64px;
	overflow: hidden;
	background: url(./../img/infor_name_bk.png) no-repeat center;
	text-align: center;
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	position: absolute;
    bottom: 20px;
	z-index: 3;
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
}

.area-infor-name em{
	font-style:normal;
	font-size: 15px;
	margin-right: 3px;
	color: #fff000;
}

.area-infor-text {
	font-size: 15px;
	line-height: 1.8em;
	color: #000;
	text-align: left;
	box-sizing: border-box;
	padding:80px 40px 0 40px;
	opacity: 0;
	position: absolute;
	left: 0px;
	top: 10%;
	display: inline-block;
	z-index: 2;
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
}

.area-infor-box:hover .area-infor-text {
	opacity: 1;
	-webkit-transition: all 0.3s;-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.area-infor-box:hover .area-infor-pic {
	background: #fefefe;
	border-radius: 25px;
}

.area-infor-box:hover .area-infor-name {
	-webkit-transition: all 0.3s;-moz-transition: all 0.3s;
	transition: all 0.3s;
	bottom: unset;
	top: 10%;
}

.area-infor-box:hover .area-infor-pic img {
	backdrop-filter: blur(10px) !important;
	-webkit-transition: all 0.3s;-moz-transition: all 0.3s;
	transition: all 0.3s;
	opacity: .15;		
}

/*四季東北*/
.four-main{padding: 80px 0 80px 0;margin: 0 auto;clear: both;overflow: hidden;}

.four_title{max-width: 369px;padding: 100px 0 30px 0; margin: 0 auto;}
.left{float: left;}
.right{float: right;}
.t_left{float: left;}
.t_right{float:right;}

.four_box{max-width: 1200px;clear: both;overflow: hidden;margin: 0 auto;padding: 30px 10px 20px 10px;}
.four_txt{width: 50%;}
.font_txt_title{width: 20%;margin-right: 10px;float: left;}
.font_txt_title02{width: 20%;margin-left: 10px;float: right;}
.big_title{max-width: 125px;}
.mini_title{display: none;}
.four_txt_box{width: 78%;position: relative;padding-bottom: 80px;}
.four_from01{max-width: 172px; position: absolute;left: 0;top:0;}
.four_from02{max-width: 172px; position: absolute;right: 0;bottom:0;}
.four_ph_box{max-width: 415px;padding: 30px 20px 20px 30px;}
.four_ph_box img{border-radius: 25px;}
.four_txt_box ul{color: #4a4a4a;font-size: 15px;font-weight: bold;line-height: 1.5em; font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;padding: 0 20px 20px 20px;}
.four_txt_box ul li{padding: 0 0 20px 0;height: 100%; clear: both;overflow: hidden;}
.four_txt_box ul li strong{color: #fede4a;}
/*.four_txt_box ul li em{font-style:normal;font-size: 13px;}	*/
.four_txt_box ul li span{width: 60px;text-align: center; font-weight: bold;border-radius: 25px;color: #fff;float: left;}
.four_txt_box ul li em{position: absolute;height: 100%; font-style:normal;left: 85px;padding-right: 15px;}
.color01{background-color: #d44a88;}
.color02{background-color: #0e713d;}
.color03{background-color: #a35211;}
.color04{background-color: #334a6c;}

.four_ph{width: 48%;position: relative;}

.icon_01{max-width: 93px;position: absolute;top:20px;left: 50px;z-index: 100;}
.icon_02{max-width: 124px;position: absolute;bottom:0px;left: 60px;z-index: 100;}
.icon_03{max-width: 174px;position: absolute;bottom:0px;left: 60px;z-index: 100;}
.icon_04{max-width: 64px;position: absolute;top:10px;left: 40px;z-index: 100;}
.icon_05{max-width: 84px;position: absolute;bottom:50px;right: 40px;z-index: 100;}
.icon_06{max-width: 107px;position: absolute;top:40px;left: 20px;z-index: 100;}
.icon_07{max-width: 123px;position: absolute;bottom:0px;left: 60px;z-index: 100;}
.icon_08{max-width: 134px;position: absolute;bottom:0px;left: 80px;z-index: 100;}
.icon_09{max-width: 144px;position: absolute;bottom:20px;right: 40px;z-index: 100;}

.rotate {animation: rotation 6s infinite linear;}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.rotate02{animation-name:ani01; 
	animation-duration:1.8s;
	animation-iteration-count:infinite; 
	animation-timing-function:ease-in-out;
	animation-delay: -1.5s;
	animation-direction: alternate;
	transform-origin:bottom center;}

@keyframes ani01{
0%{transform:rotate(-7deg);}
100%{transform:rotate(7deg);}
}


/*鐵道車介紹*/
.train-main{max-width:1000px;margin: 0 auto 30px auto;text-align: center;}
.train-big-title{font-size: 30px;line-height: 1.8em; font-weight: 600;text-align: center;color: #90705b;
background-image: linear-gradient(0,#fff 40%,transparent 40%);margin: 0 auto 20px auto;display: inline-block;padding: 0 10px;}
.train-wrap{
	position: relative;	
    display:flex;
	flex-wrap: wrap;
	margin: 0 auto 30px auto;	
	z-index: 30;
	align-items:center;	
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
}

.train-txt{width: 53%;margin: 0 1% 0 1%;text-align: left;}
.train-title{font-size: 18px;line-height: 2em; font-weight: 600;color: #115115;}
.train-txt p{font-size: 15px;line-height: 2em;}
.train-txt a{text-decoration: none; color: #115115;text-align: right;float: right;border-bottom: 1px #115115 solid;}
.train-map{width: 40%;margin: 0 1% 0 1%;}
.train-pic{max-width: 970px;margin: 0 auto;}



/*東北鐵路*/
.railway_title{max-width: 369px;margin: 0 auto 30px auto;}
.railway_small_title{max-width: 266px;margin: 30px auto 30px auto;}
.railway_from{
width: 100%;
padding: 100px 20px;
font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;	
font-size: 15px;
line-height: 25px;
color: #1d1d1d;
margin: 0 auto;
clear: both;
overflow: hidden;
}

#tab_wrap{	
	margin: 0 auto;	
}

ul.etabs {	
	padding: 0;
	max-width: 920px;
	margin: 0 auto;	
	}
.etabs-box01{}

ul.etabs{width: 100%;clear: both;overflow: hidden;padding-left: 40px;}

ul.etabs li {    
	float: left;
	/*position: relative;*/	
	text-indent:-5000px;
	margin: 10px 12px 0 0;
	overflow: hidden;
	}

	ul.etabs li a {
		display: block;
		width:100%;
		height:100%;
		color: #fff;
	}
	ul.etabs li#b1 {
	background: url("../img/railway.png") 0 0 no-repeat;
	width:98px;
	height: 102px;	
}
	ul.etabs li#b2 {
	background: url("../img/railway.png") -98px 0 no-repeat;	
	width:98px;
	height: 102px;	
}
	ul.etabs li#b3 {
	background: url("../img/railway.png") -196px 0 no-repeat;	
	width:98px;
	height: 102px;	
}
	ul.etabs li#b4 {
	background: url("../img/railway.png") -294px 0 no-repeat;	
	width:98px;
	height: 102px;	
}
ul.etabs li#b5 {
	background: url("../img/railway.png") -392px 0 no-repeat;	
	width:98px;
	height: 102px;	
}
ul.etabs li#b6 {
	background: url("../img/railway.png") -490px 0 no-repeat;	
	width:98px;
	height: 102px;	
}

ul.etabs li#b7 {
	background: url("../img/railway.png") -588px 0 no-repeat;	
	width:98px;
	height: 102px;	
}
ul.etabs li#b8 {
	background: url("../img/railway.png") -686px 0 no-repeat;	
	width:98px;
	height: 102px;	
}

ul.etabs li#b1 a:hover {background: url("../img/railway.png") 0 -102px no-repeat;}
ul.etabs li#b1.active {
	background: url("../img/railway.png") 0 -102px no-repeat;
	animation: car 3s infinite; 
}
ul.etabs li#b2 a:hover {background: url("../img/railway.png") -98px -102px no-repeat;}
ul.etabs li#b2.active {
	background: url("../img/railway.png") -98px -102px no-repeat;
	animation: car 3s infinite; 
}
ul.etabs li#b3 a:hover {background: url("../img/railway.png") -196px -102px no-repeat;}
ul.etabs li#b3.active {
	background: url("../img/railway.png") -196px -102px no-repeat;
	animation: car 3s infinite; 
}
ul.etabs li#b4 a:hover {background: url("../img/railway.png") -294px -102px no-repeat;}
ul.etabs li#b4.active {
	background: url("../img/railway.png") -294px -102px no-repeat;
	animation: car 3s infinite; 
}
ul.etabs li#b5 a:hover {background: url("../img/railway.png") -392px -102px no-repeat;}
ul.etabs li#b5.active {
	background: url("../img/railway.png") -392px -102px no-repeat;
	animation: car 3s infinite; 
}
ul.etabs li#b6 a:hover {background: url("../img/railway.png") -490px -102px no-repeat;}
ul.etabs li#b6.active {
	background: url("../img/railway.png") -490px -102px no-repeat;
	animation: car 3s infinite; 
}

ul.etabs li#b7 a:hover {background: url("../img/railway.png") -588px -102px no-repeat;}
ul.etabs li#b7.active {
	background: url("../img/railway.png") -588px -102px no-repeat;
	animation: car 3s infinite; 
}
ul.etabs li#b8 a:hover {background: url("../img/railway.png") -686px -102px no-repeat;}
ul.etabs li#b8.active {
	background: url("../img/railway.png") -686px -102px no-repeat;
	animation: car 3s infinite; 
}


@keyframes car {
    0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(0px, 5px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

.tab_box{
	margin-top: 20px;
}
.tab_container{
	width: 95%;margin: 0 auto;
}
.railway_box{
	background-color: #fff;
	border-radius: 10px;
	background-color: #fff;
	font-size: 18px;
	font-weight: bold;
	line-height:2em;	
	color: #4a4a4a;
	padding:10px;
	font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;
	clear: both;
	overflow: hidden;
}
.railway_txt{}
.txt{display: block;text-align: center;margin: 10px auto;}
.railway_txt span{
	display: inline-block;
	font-size: 20px;
	line-height:1.2em;
	text-align: center;
	padding: 10px;	
	color: #fff;
	font-weight: bold;
	font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;	
	border-radius: 25px;	
}

.bg_color01{background-color: #ed9700;}
.bg_color02{background-color: #695767;}
.bg_color03{background-color: #547edf;}
.bg_color04{background-color: #845f9a;}
.bg_color05{background-color: #2d46c8;}
.bg_color06{background-color: #e3494e;}
.bg_color07{background-color: #e5689a;}
.bg_color08{background-color: #1a5f54;}

.railway_ph{}
.railway_ph img{max-width: 920px;width: 100%; border-radius: 10px;}


.flex-center {	
	justify-content: center;
}
.flex-end {	
	justify-content: flex-end;	
}
.flex-between {	
	justify-content: Space-between;	
}
.flex-row-right {	
	flex-direction: row-reverse;	
}

/*錨點*/
.block-first{overflow: hidden;padding-top: 120px;margin-top: -120px;}
.block-first02{overflow: hidden;padding-top: 120px;margin-top: -120px;}

#back-top{z-index: 99;}


@media screen and (max-width: 1500px){
	.hotel-wrap{
	display:inherit;
	flex-wrap:nowrap;		
	max-width:inherit;
	width: 80%;
	margin: 0 auto;	
	}
	
.hotel-txt{width: 80%;margin: 0 auto 30px auto;}
.hotel-ph{width: 100%;margin: 0 auto 30px auto;}
	
.area-infor-space {
	width: 95%;
	max-width: inherit;
	display: flex;
	gap: 20px;	
}
	
}

@media screen and (min-width: 960px) and (max-width: 1020px) {
.font_txt_title{width: 15%;}
.font_txt_title02{width: 15%;}
.four_txt_box{width: 82%;}
}
@media screen and (min-width: 961px) and (max-width: 1050px){
	.top_title{left: 280px;}
}

@media screen and (max-width: 1200px){
.area-infor-box{
	width: 48%;	
}
}
@media screen and (max-width: 1000px){
.train-main{max-width:inherit;width: 95%;}
}


@media screen and (max-width: 959px) {
.header{padding-bottom:inherit;}	
.header_bg{display: none;}
.top_header{display: none;}	
.header_md{display: block;margin-top: 40px;margin-bottom: -3px;}	
#main-nav {display: none;}	
/*錨點*/
.block-first{padding-top: 0;margin-top: 0;}
.block-first02{padding-top: 0;margin-top: 0;}
	
.left{float: inherit;}
.right{float: inherit;}	
	
.four_txt{width: 70%;margin: 0 auto 10px auto;clear: both;overflow: hidden;}	
.four_ph{width: 70%;margin: 0 auto;}	
	
.railway_from{padding: 100px 0;}	
ul.etabs {max-width: 450px;}
ul.etabs{padding-left: 0;}
.tab_container{width: 90%;}
	
.tour_list_box .price{		
	float: inherit;
	display: block;
	text-align: center;
	}
.hotel-wrap{	
	width: 90%;
	margin: 0 auto;	
	}	
	
}
@media screen and (min-width: 769px) and (max-width: 850px) {
.four_txt{width: 80%;margin: 0 auto 10px auto;clear: both;overflow: hidden;}	
.four_ph{width: 80%;margin: 0 auto;}	
}


/*平版*/
@media screen and (max-width: 768px) {
	
.main{max-width: inherit;width: 98%;} 	
.font_txt_title{width: 100%;margin-right: 10px;float: inherit;}
.font_txt_title02{width: 100%;margin-left: 10px;float: inherit;}
.big_title{display: none;}
.mini_title{display: block; max-width: 320px;margin: 0 auto 10px auto;}
	
.name-l{flex:0 0 78%;}
.price-r{flex:0 0 22%;}	
	
	
.four_txt_box{width: 100%;padding-bottom: 20px;}	
.four_txt{width: 65%;margin: 0 auto 10px auto;clear: both;overflow: hidden;}	
.four_ph{width: 65%;margin: 0 auto;}
	
.icon_01,.icon_02,.icon_03,.icon_04,.icon_05,.icon_06,.icon_07,.icon_08,.icon_09{display: none;}
	
.tour_main{padding: 50px 0;}
.tour_list_box ul {width: 100%;}
	
.about_main{padding: 50px 0;} 
.four_title{padding: 50px 0 30px 0;}
.railway_from{padding: 50px 0;}	
	
.area-infor-box{width: 80%;}	
	
.hotel-ph{display: none;}
.hotel-pic {display: block;}	
	
.about-wrap{
	display:inherit;
	flex-wrap:nowrap;	
	max-width:inherit;
	width: 80%;
	margin: 0 auto 30px auto;
}	

.about-txt{width: 100%;margin: 0 0 30px 0;}
.about-ph{width: 100%;margin: 0;}	
}

@media screen and (max-width: 600px) { 	
.tour-list a{display:inherit;}	
.name-l{flex:initial;width: 100%; display: block;}
.price-r{flex:initial;width: 100%;display: block;margin-top: 5px;}	
	
.train-wrap{
	display:inherit;
	flex-wrap:nowrap;
	margin: 0 auto 50px auto;
}
.train-txt{width: 85%;margin: 0 auto 30px auto;}
.train-map{width: 85%;margin: 0 auto 30px auto;}
}

@media screen and (min-width: 481px) and (max-width: 550px) {
.four_txt{width: 90%;margin: 0 auto 10px auto;clear: both;overflow: hidden;}	
.four_ph{width: 90%;margin: 0 auto;}	
	
}

/*手機*/
@media screen and (max-width: 480px) {
.four_txt{width: 90%;margin: 0 auto 10px auto;clear: both;overflow: hidden;}	
.four_ph{width: 90%;margin: 0 auto;}
	
.hotel-txt{width: 95%;}	
.hote-title{font-size: 25px;}		
.area-infor-box{width: 95%;}
.area-infor-text {font-size: 13px;}	

.train-big-title{font-size: 25px;}	
	
	
.area-infor-box:hover .area-infor-name {	
	top: 5%;
}	
	
.area-infor-text {
	padding:70px 20px 0 20px;	
}	
	
	
}	
@media screen and (min-width: 321px) and (max-width: 460px) {
	ul.etabs {max-width: 310px;}	
	ul.etabs li {margin: 10px 5px 0 0;}
}
@media screen and (max-width: 320px) {
	ul.etabs {max-width: 310px;}
	ul.etabs li {margin: 10px 5px 0 0;}
}