@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;}


.clearfix {
  overflow: auto;
}

img { max-width:100%;}

/************************************************************************************
STRUCTURE 主要區塊
*************************************************************************************/

body {   
	-webkit-text-size-adjust: none;/*防止allpe的safari瀏覽器字體變大*/	
}

/*基本變數*/
:root {
	/*基本*/
	--white-color:#fff;
	--black-color:#141115;
	--family-basic:Verdana,'微軟正黑體';
	--family-noto:"Noto Sans TC",Verdana;	
}

#web-outer{	
	clear: both;
	overflow: hidden;	
}

header {
  width: 100%;	
  height: auto;
  clear: both; 
  position: relative;  
  z-index: 1;
}

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

.header-content{
	width: 100%;
	position: relative;
	display: block;
	padding: 70px 0 10px 0;	
	position: relative;
	margin: 40px auto 0 auto;	
}

.header-content::before {
  content: "";
  position: absolute;  
  inset: 0;
  background: url("../img/header_bg.webp") top / contain no-repeat;  
  opacity: 0.9;
  z-index: 0;	
}

.product-slide{max-width: 950px;position: relative;z-index: 10;}
.product-slide .slick-dots{ bottom: 30px;}
.header-img{aspect-ratio: 19 / 14;}
.header-img img{border-radius: 0 200px 200px 0;}

.header-title{max-width: 482px;position: absolute;right: 22%;bottom: 15%; z-index: 50;}
.header-photo{max-width: 695px;position: absolute;right: 12%;top: 12%;  z-index: 30;/*aspect-ratio: 39 / 25;*/}
.header-girl{max-width: 350px;position: absolute;right: 1%;bottom: -53px;}

.mobile{display: none;aspect-ratio: 4 / 3;}

/*-------------------------------------選單---------------------------------------------*/
#main-nav{   
   z-index: 990;
   margin:0 auto;  
}

#block-menu {
	width: 100%;
	clear: both;
    overflow: hidden;
	position: absolute;	
}

.sticky {
    top:40px;
	position: fixed !important;
}

#main-nav ul {background-color: #0e8ab3; text-align: center; height: 60px;text-align: center;position: relative;z-index: 990;}

#main-nav ul li {
	font-family: var(--family-basic);
	display: inline-block;
	text-align: center;	
	color: #b1e0f0;
	font-weight: 600;
	font-size: 25px;
	padding: 8px 10px 10px 10px;}
#main-nav ul li a { display:block;font-size: 22px;font-weight: 600;  text-align: center; text-decoration: none;color: #abd2eb;border-radius: 22px;padding: 10px;border: 1px #0e8ab3 solid;}
#main-nav ul li a:hover,#main-nav ul li a.active {border-radius: 25px;border: 1px #fff solid;color: #fff;}
.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);
}

#main-nav:hover {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}


#railway{padding-top: 50px;position: relative;clear: both;overflow: hidden;}
#railway::before {
  content: "";
  position: absolute;
  max-height: 612px;
  inset: 0;
  background: url("../img/min_bg01.webp") top left / contain no-repeat;  
  z-index: 0;
}

.railway-wrap{
position: relative;
display:flex;
flex-wrap: wrap;
}

.railway-title{
max-width: 800px;	
width:30%;
position: relative;
margin: 30px auto 0 auto;
margin-left: 5%;	
}
.railway-title::before {
  content: "";
  position: absolute;
  max-width: 800px;
  inset: 0;
  background: url("../img/bg-shape01.webp") top / contain no-repeat;
  opacity: 0.9;
  z-index: 0;
}

.railway-box{width:62%;position: relative;padding-top: 80px;}
.railway-box::before{position: absolute;content: '';width:85%;height: 80%;top: 0;right: 0; background-color: #f3f0ea;border-radius: 80px 0 0 0; z-index: 1;}


#sport{padding-top: 50px;position: relative;clear: both;overflow: hidden;}
#sport::before {
  content: "";
  position: absolute;
  max-height: 612px;
  inset: 0;
  background: url("../img/min_bg02.webp") top right/ contain no-repeat;  
  z-index: 0;
}

.sport-wrap{
position: relative;
display:flex;
flex-wrap: wrap;	
}

.sport-title{
max-width: 800px;	
width:30%;
position: relative;
margin: 30px auto 0 auto;
margin-right: 5%;	
}

.sport-title::before {
  content: "";
  position: absolute;
  max-width: 800px;
  inset: 0;
  background: url("../img/bg-shape02.webp") top / contain no-repeat;
  opacity: 0.9;
  z-index: 0;
}

.sport-box{width:62%;position: relative;padding-top: 80px;}
.sport-box::before{position: absolute;content: '';width:85%;height: 80%;top: 0;left: 0; background-color: #def2f9;border-radius: 0 80px 0 0; z-index: 1;}


#hotel{padding-top: 50px;position: relative;clear: both;overflow: hidden;}
#hotel::before {
  content: "";
  position: absolute;
  max-height: 612px;
  inset: 0;
  background: url("../img/min_bg03.webp") top left / contain no-repeat;  
  z-index: 0;
}

.hotel-wrap{
position: relative;
display:flex;
flex-wrap: wrap;
}

.hotel-title{
max-width: 800px;	
width:30%;
position: relative;
margin: 30px auto 0 auto;
margin-left: 5%;	
}
.hotel-title::before {
  content: "";
  position: absolute;
  max-width: 800px;
  inset: 0;
  background: url("../img/bg-shape03.webp") top / contain no-repeat;
  opacity: 0.9;
  z-index: 0;
}

.hotel-box{width:62%;position: relative;padding-top: 80px;}
.hotel-box::before{position: absolute;content: '';width:85%;height: 80%;top: 0;right: 0; background-color: #f3e8ec;border-radius: 80px 0 0 0; z-index: 1;}


/* 標題 */
.min-title {	
position: relative;
font-size: 60px;
font-weight: 600;
font-family: "M PLUS Rounded 1c", sans-serif; 	
text-align: center;	
 letter-spacing: 5px;
 padding-top: 55px;
 margin-bottom: 10px;
 z-index: 10;
}

.r-color{color: #988f79;}
.s-color{color: #4f94aa;}
.h-color{color: #be8ba0;}

.min-title span {
  display: block;
  width: 50%;
  font-size: 30px;
  font-weight: 600;	
  font-family: "Zen Kurenaido", sans-serif; 
  margin: 10px auto 0 auto;  
  font-style: italic;
  text-align: right;
}

.r-min{color: #d3c9b1;}
.s-min{color: #c1d9e1;}
.h-min{color: #e7d1da;}

/* 主視覺 */
.visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 人物圖 */
.person img {
  width: 100%;
  max-width: 600px;  
  display: block;
}

/* 內文 */
.description { 
  position: relative;
  width: 65%;  
  font-size: 18px;
  font-weight: 600;
  color: #4d4d4d;
  line-height: 1.8em;
  font-family: var(--family-basic);
  margin: 10px auto 0 auto;
  z-index: 10;
}


/*錨點*/
.block-first{overflow: hidden;margin-bottom: 80px;}
.block-second{overflow: hidden;margin-bottom: 80px;}

.tour-wrap{
	position:relative;		
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;	
	margin: 0 auto 30px auto;
	z-index: 10;
	}

.ct50 {width:47%;display: inline-block; vertical-align: top;position: relative;margin: 0 10px;}

.tour-box a{display: flex;flex-direction: column;height: 100%;background-color: #fff;border: 1px #b3b3b3 solid;border-radius: 50px 50px 0 0;}
.tour-box .tour-pic{margin-bottom: -10px;position: relative;}
.area{position: absolute;left: 20px;top: 20px;color: #fff;font-family: var(--family-basic);font-size: 15px;border-radius: 5px;padding: 5px;font-weight: 600;}

.tour-box .tour-pic img{border-radius: 50px 50px 0 0;}
.tour-box .tour-txt{display: flex;flex-direction: column;}
.tour-box .title-tour{font-family: var(--family-basic);font-size: 20px;font-weight: 600; line-height: 1.8em; padding: 20px 10px 5px 10px;color: #333;}
.tour-box .tour-txt p{font-family: var(--family-basic);font-size: 15px;font-weight: 600; }

ul.tour-mark{width: 85%;height: 100%; padding-left: 30px; padding-right: 20px; text-align: left;padding-bottom: 50px;}
ul.tour-mark li{font-family: var(--family-basic);font-size: 15px;font-weight: 500; 	line-height: 1.8em;margin-top: 5px;margin-left: 5px; list-style-type: circle;}

.mark01{color: #7e7154;}
.mark02{color: #2a7b96;}
.mark03{color: #995773;}

.tour-box p.price{	
	color: #666;
	text-align: center;
	font-family: var(--family-basic);
	font-size: 15px; font-weight: 600;
	color: #be2550;
	padding: 10px 0;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	
}

.tour-box p.price strong {
	margin: 0 2px;
	display: inline-block;		
	letter-spacing:1px;	
	font-size: 25px;
	font-family: var(--family-basic);font-size: 22px; font-weight: 600; margin: 0 2px;letter-spacing:1px;
}


/*綜合行程*/
.tour-list {max-width: 1200px;width: 95%;margin: 0 auto;padding: 30px 0;}
.tour-list a {display:flex;padding: 15px 10px;overflow: hidden;border-bottom:1px #b3b3b3 solid;text-decoration: none;justify-content:space-between;align-items:center;}
.name-l{flex:0 0 85%;font-family: var(--family-basic);font-size: 20px;color:#333;line-height: 1.8em;}
.name-l em{font-style:normal;color: #fff;font-family: var(--family-basic);font-size: 15px;border-radius: 5px;padding: 5px;margin-right: 5px;}

.c-01{background-color: #a79773;}
.c-02{background-color: #45a1bf;}
.c-03{background-color: #ba7e97;}

.name-l p{line-height: 1.5em;padding-left: 8px;}
.name-l p.bit-01 span{display: inline-block;padding: 0 15px 0 5px; margin: 0 3px; font-size: 15px;font-weight: 500;color: #333;padding-left: 5px;text-indent: -12px;}
.name-l p.bit-01 span::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;  
  border-radius: 50%;
 background-color: #cbc2ad;	
  margin-right: 5px;
  vertical-align: middle;  
}

.name-l p.bit-02 span{display: inline-block;padding: 0 15px 0 5px;margin: 0 3px; font-size: 15px;font-weight: 500;color: #333;padding-left: 5px;text-indent: -12px;}
.name-l p.bit-02 span::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;  
  border-radius: 50%;
 background-color: #80bbce;	
  margin-right: 5px;
  vertical-align: middle;  
}

.name-l p.bit-03 span{display: inline-block;padding: 0 15px 0 5px;margin: 0 3px; font-size: 15px;font-weight: 500;color: #333;padding-left: 5px;text-indent: -12px;}
.name-l p.bit-03 span::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;  
  border-radius: 50%;
 background-color: #d3acbc;	
  margin-right: 5px;
  vertical-align: middle;  
}

.price-r{flex:0 0 15%; text-align:right;font-family: var(--family-basic);font-weight: 600; font-size: 15px;line-height: 1.2em;color: #be2550;}
.price-r strong{font-family: var(--family-basic);font-size: 22px; font-weight: 600; margin: 0 2px;letter-spacing:1px;}

.flex-center {	
	justify-content: center;
}

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

/*------media query----------*/
@media only screen and ( max-width:1900px) {
.header-title{right: 20%;}
.header-photo{right: 10%;}
}	
@media only screen and ( max-width:1800px) {
.header-title{right: 18%;}
.header-photo{right: 8%;}
.header-girl{max-width: inherit;width: 20%;right: 0;}	
}

@media only screen and ( max-width:1750px) {
	.header-title{right: 8%;}
	.header-photo{right: 5%;}	
	.header-girl{display: none;}
}	

@media only screen and ( max-width:1600px) {
	.header-title{right: 5%;}
	.header-photo{right: 3%;}
}

@media only screen and ( max-width:1550px) {
	.header-title{right: 4%;}
	.header-photo{right: 2%;}
}
@media only screen and ( max-width:1500px) {
	.product-slide{max-width: inherit;width: 60%;}
	.header-title{right: 3%;bottom: 10%;}
	.header-photo{right: 2%;}		
}

@media only screen and ( max-width:1400px) {
	.header-title{right: 2%;bottom: 8%;}
	.header-photo{right: 1%;}
	.railway-title,.sport-title,.hotel-title{width:40%;}
	.railway-box,.sport-box,.hotel-box{width:55%;}
	.ct50 {width:46%;}		
}

@media only screen and ( max-width:1300px) {
	.header-title{max-width: inherit;width: 35%;bottom: 13%;}
	.header-photo{max-width: inherit;top:15%;width: 40%;}
	
	#railway::before,#sport::before,#hotel::before {top:3%;max-height: 500px;}
	
}

@media only screen and ( max-width:1200px) {
	.header-title{bottom: 12%;}	
	.header-img img{border-radius: 0 150px 150px 0;}
	
	.railway-title,.hotel-title{width:43%;margin-left: 3%;}
	.sport-title{width:43%;margin-right: 3%;}
	.railway-box,.sport-box,.hotel-box{width:52%;}
	.ct50 {width:45%;}		
	.tour-wrap{max-width: inherit;width: 90%;}	
}

@media only screen and ( max-width:1100px) {
	.railway-title,.sport-title,.hotel-title{width:40%;}
	.railway-box,.sport-box,.hotel-box{width:55%;}
	.min-title {font-size: 50px;}
	.description {font-size: 15px;}	
}
@media only screen and ( max-width:959px) {
	.header-content{padding-bottom: 0;}	
	.header-title{bottom: 3%;}
	.header-photo{top:18%;width: 50%;}
	
	#railway,#sport,#hotel{padding-top: 0;}
	#railway::before,#sport::before,#hotel::before {top: 1%;max-height: 550px;}
	
	.railway-wrap,.sport-wrap,.hotel-wrap{
	display:inherit;
	flex-wrap:nowrap;
	margin: 0 auto;
	background: none;
	padding-top: 60px;
}	
	.railway-title,.sport-title,.hotel-title{width: 80%;position: inherit;margin: 0 auto;}	
	.railway-box,.sport-box,.hotel-box{width:100%;padding-top: 0;margin-top: 20px;}
	.railway-box::before,.sport-box::before,.hotel-box::before{width:85%;height: 80%;top: 5%;right: 0;}
	
	.ct50 {width:47%;}	
	.name-l{flex:0 0 77%;}
	.price-r{flex:0 0 23%;}	
	
}

@media only screen and ( max-width:850px) 	
{}	
@media only screen and ( max-width:800px) 	
{}
/*---平板-----*/
@media only screen and ( max-width:768px) 
{
#web-outer{padding-bottom: 80px;}	
.header-content{display: none;}	
.mobile{display: block;padding-top: 40px;}
#main-nav {display: none;}
.header-content{ padding: 50px 0 0 0;margin: 0 auto;clear: both;overflow: hidden;}
.railway-title,.sport-title,.hotel-title{width: 90%;}	
.ct50 {width:85%;margin: 20px auto 0 auto;}	
.tour-list{padding: 0 0 30px 0;}	
.tour-txt {margin-left:0;margin-top:-4px;border-radius: 0 0 30px 30px;border:none;}	
.tour-txt h3{border-radius: 0;}	
	
/*錨點*/
.block-first,.block-second{margin-bottom: 30px;}
	
}

@media only screen and ( max-width:600px) {
	
#railway::before,#sport::before,#hotel::before {max-height: 400px;}	
.railway-title,.sport-title,.hotel-title{width: 95%;}
	
.ct50 {width:95%;}
	
ul.tour-mark{width: 100%;}	
.tour-list a{display:inherit;}	
.name-l{flex:initial;width: 100%; display: block;}
.name-l p.bit-01 span,.name-l p.bit-02 span,.name-l p.bit-03 span{display: block;}	
	
.price-r{flex:initial;width: 100%;display: block;margin-top: 20px;text-align: center;}

}	
/*---手機版-----*/
@media only screen and (max-width:480px) {
	.min-title {font-size: 40px;padding-top: 40px;}
	.description {font-size: 13px;}	
}