@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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family:微軟正黑體;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*---------------------------------------------------------------------*/


body {
	margin: 0;
	padding: 0;
	width:100%;
	height:100%;
	
}
img {border: 0;}
hr {
	margin: 0;
	padding: 0;
	clear: both;
	visibility:hidden;
}

ul,li,p{
	margin:0;
	padding:0;
}
h1,h2,h3 {display:none;}
.container {margin:50px 0px 30px 0px;}
.container2 {width:100%; position:relative; margin-top:0px; }

.logo {display: block; max-width: 624px; position: absolute; margin-left:36%; margin-top:200px; z-index: 200;}

@media screen and (min-width: 1000px) and (max-width: 1400px) {
.logo {display: block; max-width: 624px; position: absolute; margin-left:25%; margin-top:200px; z-index: 200;}
.logo img {width:90%; margin:0 auto;}
}
@media screen and (min-width: 960px) and (max-width: 1110px) {
.logo {display: block; max-width: 624px; position: absolute; margin-left:20%; margin-top:200px; z-index: 200;}	
.logo img {width:90%; margin:0 auto;}
}
@media screen and (max-width: 959px) {
.logo {display: block; max-width: 624px; position: absolute; margin-left:18%; margin-top:200px; z-index: 200;}	
.logo img {width:90%; margin:0 auto;}
}
@media screen and (max-width: 768px) {
.logo {display: block; max-width: 624px; position: absolute; margin-left:18%; margin-top:30px; z-index: 200;}	
.logo img {width:80%; margin:0 auto;}
}
@media screen and (max-width: 640px) {
.logo {display: block; max-width: 624px; position: absolute; margin-left:17%; margin-top:0px; z-index: 200;}	
.logo img {width:75%; margin:0 auto;}
}

#r1 {float:left; background: url(../images/bg2.jpg) top center repeat-y; background-size: cover; padding:80px 0px;}
#r2 {float:left; background: url(../images/bg2.jpg) top center repeat-y; background-size: cover; padding:80px 0px;}
#r3 {float:left; background: url(../images/bg2.jpg) top center repeat-y; background-size: cover; padding:80px 0px;}
#r4 {float:left; background: url(../images/bg2.jpg) top center repeat-y; background-size: cover; padding:80px 0px;}
#r5 {float:left; background: url(../images/bg2.jpg) top center repeat-y; background-size: cover; padding:80px 0px;}
.bg-bottom-1 {z-index: 200;}

#korea-r1 {float:left; background: url(../images/bg3.jpg) top center repeat-y; background-size: cover; padding:80px 0px;}
#korea-r2 {float:left; background: url(../images/bg3.jpg) top center repeat-y; background-size: cover; padding:80px 0px;}
#korea-r3 {float:left; background: url(../images/bg3.jpg) top center repeat-y; background-size: cover; padding:80px 0px;}
#korea-r4 {float:left; background: url(../images/bg3.jpg) top center repeat-y; background-size: cover; padding:80px 0px;}
#korea-r5 {float:left; background: url(../images/bg3.jpg) top center repeat-y; background-size: cover; padding:80px 0px;}

@media screen and (max-width: 640px) {
#r1 {float:left; background: url(../images/bg2.jpg) top center repeat-y; background-size:contain; padding:80px 0px;}
#r2 {float:left; background: url(../images/bg2.jpg) top center repeat-y; background-size:contain; padding:80px 0px;}
#r3 {float:left; background: url(../images/bg2.jpg) top center repeat-y; background-size:contain; padding:80px 0px;}
#r4 {float:left; background: url(../images/bg2.jpg) top center repeat-y; background-size:contain; padding:80px 0px;}
#r5 {float:left; background: url(../images/bg2.jpg) top center repeat-y; background-size:contain; padding:80px 0px;}
	
#korea-r1 {float:left; background: url(../images/bg3.jpg) bottom center no-repeat #fbf4d7; background-size:contain; padding:80px 0px;}
#korea-r2 {float:left; background: url(../images/bg3.jpg) bottom center no-repeat #fbf4d7; background-size:contain; padding:80px 0px;}
#korea-r3 {float:left; background: url(../images/bg3.jpg) bottom center no-repeat #fbf4d7; background-size:contain; padding:80px 0px;}
#korea-r4 {float:left; background: url(../images/bg3.jpg) bottom center no-repeat #fbf4d7; background-size:contain; padding:80px 0px;}
#korea-r5 {float:left; background: url(../images/bg3.jpg) bottom center no-repeat #fbf4d7; background-size:contain; padding:80px 0px;}
	
}

.japan-title {background: url(../images/title-bg.png) center center no-repeat; background-size:contain;}
.japan-title img {margin:0 auto; }
.korea-title {background: url(../images/title-bg2.png) center center no-repeat; background-size:contain;}
.korea-title img {margin:0 auto; }
.picture {background: url(../images/pic-bg.png) center center no-repeat; background-size:auto; height:225px;}
.picture img {width:90%; margin:0 auto; margin-top:20px;}
.korea-picture {background: url(../images/pic-bg2.png) center center no-repeat; background-size:auto; height:225px;}
.korea-picture img {width:90%; margin:0 auto; margin-top:20px;}

.content {color:#000000; font-size:18px;}
.content p {line-height: 40px; font-weight: bold; padding-top:30px;}
.korea-content {color:#472503; font-size:18px;}
.korea-content p {line-height: 40px; font-weight: bold; padding-top:30px;}

.price {display: block; float:left; width:100%; margin:0 auto;text-align: center; font-weight: bold; color:#ff3; margin:15px 0px 10px 0px;}
em {font-size:30px;}

.eRoute {width:99%; float:left; margin:0 auto; margin-top:50px; margin-bottom:10px;}
.eRoute li {float:left; margin:5px;}
.route-bg-icon {width:34px; height:61px; position:absolute; z-index: 200; background: url(../images/route-bg-icon.png) 0 0 no-repeat; left:50%; margin-top:-40px;}
.route-bg-icon2 {width:34px; height:61px; position:absolute; z-index: 200; background: url(../images/route-bg-icon2.png) 0 0 no-repeat; left:50%; margin-top:-40px;}
.route-bg {float:left; background: #880113; padding:8px; border-radius: 20px;}
.route-bg2 {float:left; background: #72420f; padding:8px; border-radius: 20px;}
.thbg-1 {background:#b10219; width:100%; float:left;}
.thbg-2 {background:#905c25;}
.route-pic {margin:0 auto; margin-top:20px;}
.route-pic img {width:100%; height:auto; margin:0 auto;}
.route-title {width:100%; float:left; text-align: center; border-bottom: 1px dashed #a1525a; padding: 10px 0px; margin-top:5px; line-height: 21px;}
.title-ch {display: block; font-size: 20px; font-weight: bold; color:#ffffff; margin:8px 0px; line-height: 24px;}
.title-en {display: block; font-size: 13px; color:#ffffff;}
.star {padding:5px; color:#fce39d; font-weight: bold;}
.sp {color:#ff3; font-weight: bold;}



.route-content {float:left;  width:96%; margin: 0 auto; margin-top:10px;}
.route-content li { float:left; width:100%; color:#fce39d; font-size:13px; display: block; margin:5px 0px; background: url(../images/list-icon.png) 0 0 no-repeat; padding-left:21px; line-height: 18px;}

.btn-go {max-width:257px; margin:0 auto;}
.btn-go img {width:100%; height:58px; margin:0 auto; margin-bottom:-14px; overflow: hidden;}


.btn-more,.btn-more2 {width:164px; height:44px; float:right; margin-top:10px; text-decoration: none; color:#b10219;}
.btn-more a {
	display:block; 
	width:100%; 
	height:50px; 
	background: url(../images/btn-more.png) 0 0 no-repeat; 
	padding-left:60px; 
	line-height: 30px; 
	color:#b10219;
	text-decoration: none;
	font-weight: bold; 
	text-decoration: none;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-more2 a {
	display:block; 
	width:100%; 
	height:50px; 
	background: url(../images/btn-more2.png) 0 0 no-repeat; 
	padding-left:60px; 
	line-height: 30px; 
	color:#72420f;
	text-decoration: none;
	font-weight: bold; 
	text-decoration: none;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-more:after,.btn-more2:after {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	text-decoration: none;
	color:#f35281;
}
.btn-more a:hover,.btn-more2 a:hover { 
	text-decoration: none; 
	color:#f35281; 
	-webkit-transform: translateX(2%);
	-moz-transform: translateX(2%);
	-ms-transform: translateX(2%);
	transform: translateX(2%);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-more a:focus,.btn-more2 a:focus {
	text-decoration: none;
	color:#f35281;
}
.hotel-btn {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.hotel-btn:after {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.hotel-btn:hover {
	-webkit-transform: translateY(1%);
	-moz-transform: translateY(1%);
	-ms-transform: translateY(1%);
	transform: translateY(1%);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
} 


@media screen and (min-width: 960px) {
.header {margin:0 auto; display:block; max-width:960px; position: relative;}
.header-sm {display: none;}
.sakura-title {background: url(../images/title-bg.png) center center no-repeat; background-size:contain;}
.picture img {width:90%; margin:0 auto; margin-top:20px;}
.korea-picture img {width:90%; margin:0 auto; margin-top:20px;}
.picture-flower {width:98px; height:83px; position: absolute; background: url(../images/pic-bg-maple.png) 0 0; margin-top:280px; z-index: 150;}

}


@media screen and (max-width: 959px) {
.header {display: none;}
.header-sm {display: block; margin-top:150px;}
.header-sm img {margin:0 auto;}
.sakura-title {background: none;}
.picture img {width:95%; margin:0 auto; margin-top:20px;}
.korea-picture img {width:95%; margin:0 auto; margin-top:20px;}	
	


}

@media screen and (max-width: 890px) {
.picture img {width:98%; margin:0 auto; margin-top:30px;}
.korea-picture img {width:98%; margin:0 auto; margin-top:30px;}
}

@media screen and (max-width: 768px) {

.picture {float:left; background: none; height:auto; }
.picture img {max-width:100%; background:#fec8cf; padding:15px; }
.korea-picture {float:left; background: none; height:auto; }
.korea-picture img {max-width:100%; background:#fbd972; padding:15px; }	
	
.picture-flower {display: none;}

.content {float:left;}

.eRoute li {float:left; margin:18px 3px;}
.route-content li {float:left; margin:5px 0px; line-height: 24px;}
	
	
.nav {display: none;}
.navbg {display: none;}
	
}