@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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*---------------------------------------------------------------------*/

body {	
    line-height: 1;	
	-webkit-text-size-adjust: none;/*防止allpe的safari瀏覽器字體變大*/	
}
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: hidden;
  zoom: 1;
}

img { width:100%;}

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

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

/*header kv*/
.kv{
	position: relative;
	height: 750px;
	clear: both;
	overflow: hidden;
}

.kv::after{
	content: '';
	position: absolute;
	background: url("../img/top_bg.webp") no-repeat;
	background-size: contain;
	top:0;
	left: 0;
	right: 0;
	width: 2000px;
	height: 234px;
}

/*大圖輪播*/
.main-slide{
	position: absolute;
	width: 100%;
	height: 750px;
    }

.main-title {max-width: 851px;padding-top: 190px;position:relative;/*left: 20%;right: 15%;top:150px;*/ margin: 0 auto;transition: 0.5s ease-in-out;z-index: 10;}
.top_bg{width: 100%;height: 234px; background: url("../img/top_bg.webp") top no-repeat;position: absolute;left: 0;top:0;}
.bottom_bg{width: 100%;height: 437px; background: url("../img/bottom_bg.webp") top no-repeat;position: absolute;left: 0;bottom: 0; z-index: 10;}

/*-------------------------------------選單---------------------------------------------*/
 
.sticky { top: 40px;}
#main-nav{}
#block_menu {
	width: 100%;	
	text-align: center;    
	z-index: 990;
	overflow: hidden;
	background: url("../img/nav_bg.webp") top no-repeat;
}

.class-nav {}
/*.nav-top ul{width: 740px;height: 103px; margin: 0 auto;text-align: center;} */
.nav-top {width: 580px;height: 103px;margin: 0 auto;} 
.nav-top p a {float: left; display: inline-block;text-indent:-5000px;width: 180px;height: 103px;margin-left: 5px;margin-right: 5px;}
p a.menu{width: 180px;height: 103px;background: url("../img/nav.webp") 0 0;}
p a.menu:hover,p a.menuon{width: 180px;height: 103px;background: url("../img/nav.webp") 0 -103px;}
 
p a.menu02 {background: url("../img/nav.webp") -180px 0;}
p a.menu02:hover,p a.menu02on{background: url("../img/nav.webp") -180px -103px;}

p a.menu03 {background: url("../img/nav.webp") -360px 0;}
p a.menu03:hover,p a.menu03on{background: url("../img/nav.webp") -360px -103px;}

p a.menu04 {background: url("../img/nav.webp") -540px 0;}
p a.menu04:hover,p a.menu04on{background: url("../img/nav.webp") -540px -103px;}

 .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);
 }


/*錨點*/
.block-first{overflow: hidden;margin-top: -80px;padding-top: 30px;}
.left{float: left;}
.right{float: right;}

/*關於*/
.about{background-color: #fff;margin-top: 50px;clear: both;position: relative;}
.about::after{
	content: '';
	position: absolute;
	background: url("../img/about_top.webp")no-repeat center;
	/*background-size: contain;*/
	top: 0;
	left: 0;
	width: 2000px;
	height: 316px;
}

.about::before{
	content: '';
	position: absolute;
	background: url("../img/about_bottom.webp")no-repeat center;	
	width: 2000px;
	height: 294px;
	left: 0;
	bottom: 0px;	
	z-index: 1;
}
.about-top{background: url("../img/about_top.webp") top no-repeat;}
.about-bottom{background: url("../img/about_bottom.webp") bottom no-repeat;}
.about-box{
	position: relative;	
    display:flex;
	flex-wrap: wrap;
	margin: 0 auto;	
	max-width:1400px;
	padding-top: 100px;
	z-index: 10;
	/*align-items:center;*/}
.about-txt{width: 35%;padding: 10px;z-index: 10;}
h2.about-title{font-family:"微軟正黑體", Arial, Helvetica, sans-serif;font-size: 35px;font-weight: 600; line-height: 2em;color: #e07630;text-align: center;}	
h2.about-title em{font-size: 25px;line-height: 2em;font-style:normal; color: #f0a316;}
.about-txt p{font-family:"微軟正黑體", Arial, Helvetica, sans-serif;font-size: 18px;line-height: 2em;color: #7e7e7e;}
.about-ph{width: 50%;margin: 0 30px; position: relative;z-index: 10;}
.about-ph img{border-radius: 0 10px 0 30px;}
.about-ph::before{
	content: '';
	position: absolute;
	background: url("../img/about_frame.webp")no-repeat;
	background-size: contain;
	width: 124px;
	height: 196px;
	top:-20px;
	right: -20px;	
	z-index: 1;
}
.about-img {aspect-ratio: 192 / 145;}
.about_bg01{background: url("../img/bg_japan.webp") right bottom 80px no-repeat;}
.about_bg02{background: url("../img/bg_korea.webp") right bottom 80px no-repeat;}
.about_bg03{background: url("../img/bg_usa.webp") right 30px bottom 40px no-repeat;}
.people-01{width: 126px;position: absolute;bottom:40px;right: -150px;}
.people-02{width: 209px;position: absolute;bottom:20px;right: -190px;}
.people-03{width: 146px;position: absolute;bottom:20px;right: -170px;}

.icon-01{width: 105px;position: absolute;top:-80px;left: -100px;}
.icon-02{width: 103px;position: absolute;top:190px;right: -190px;}

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

.main{width: 100%; margin: 0 auto 30px auto;}
/*推薦行程*/
.tour_bg01{width: 100%;background: url("../img/tour_bg.webp") top no-repeat;}
.tour_bg02{width: 100%;background: url("../img/tour_bg_02.webp") top no-repeat;}

/*標題*/
h2.big-title {
	max-width: 345px;	
	height: 96px;	
	background: url("../img/tilte_bg.webp") top no-repeat;
	text-align: center;
	margin: 50px auto 0 auto;
}

h2.big-title span {
	  font-size: 40px;
	line-height: 80px;
	  font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
      color: #562119;     
      font-weight: bold;      
      text-align: center;		
    }

/*行程*/
.all-main{max-width: 1100px;margin: 0 auto;}
.tour-list {width: 100%;margin: 0 auto;font-family:"微軟正黑體", Arial, Helvetica, sans-serif;}
.tour-list a {display:flex;padding: 10px;overflow: hidden;border-bottom: dashed 1px #dabc90;text-decoration: none;
			justify-content:space-between;align-items:center;}
.tour-list a:hover {}
.name-l{flex:0 0 85%;font-size: 18px;color:#bb5e30;line-height: 1.5em;font-weight: 600;}
.name-l02{flex:0 0 80%;font-size: 18px;color:#bb5e30;line-height: 1.5em;font-weight: 600;}
.name-l strong,.name-l02 strong{font-size: 15px;color: #5f8b44;margin-left: 5px;}
.price-r{flex:0 0 15%; text-align:right;font-weight: 600; font-size: 15px;line-height: 1.5em;color: #da1725;}
.price-r02{flex:0 0 20%; text-align:right;font-weight: 600; font-size: 15px;line-height: 1.5em;color: #da1725;}
.price-r strong,.price-r02 strong{font: 600 20px "Anton", sans-serif;margin: 0 2px;letter-spacing:1px;}

h3.small-tour{display: block; margin: 15px auto 0 auto;text-align: center;}
h3.small-tour span{display: inline-block;min-width: 60px; background-color: #a3080a;color: #fff;font-weight: 500;text-align: center;font-size: 20px;letter-spacing:2px;border-radius: 10px 0 10px 0;padding: 18px 10px;}
h3.small_tour-no{margin: 0 auto; max-width: 80%; border: #a3080a 1px solid;color: #a3080a;font-weight: 500;text-align: center;font-size: 32px;letter-spacing:2px;border-radius: 10px 0 10px 0;padding: 20px 10px;margin-top: 30px;}
h3.small-pkg{display: block; margin: 25px auto 0 auto;text-align: center;}
h3.small-pkg span{display: inline-block;min-width: 60px; background-color: #6e4e32;color: #fff;font-weight: 500;text-align: center;font-size: 20px;letter-spacing:2px;border-radius: 10px 0 10px 0;padding: 18px 10px;}
h3.small-area{display:block; width:80px; color: #a3080a;text-align: center;font-size: 15px;border: #a3080a 1px solid;border-radius:5px;padding: 8px;margin: 15px 0 0 0;}
.tour-more a{display: inline-block;background-color: #fbbf04; color: #562119;font-weight: 500;text-align: center;font-size: 15px;padding: 15px 10px 15px 15px;margin: 10px;text-decoration: none;box-shadow:4px 4px 0px #562119;border: #562119 1px solid;border-radius: 10px;float: right;}
.tour-more a:hover {box-shadow:none;position:relative; right:-4px;bottom:-4px;}

.maple_bottom01{width: 100%;height: 365px; background: url("../img/maple_bottom_01.webp") bottom no-repeat;}
.maple_bottom02{width: 100%;height: 352px; background: url("../img/maple_bottom_02.webp") bottom no-repeat;}
.maple_bottom03{width: 100%;height: 343px; background: url("../img/maple_bottom_03.webp") bottom no-repeat;}

.big-app{max-width: 1200px;margin: 0 auto 30px auto;}

@media screen and (min-width: 1501px) and (max-width: 2200px) {}

@media screen and (min-width: 960px) and (max-width: 1500px) {	
.people-01{display: none;}
.people-02{display: none;}
.people-03{display: none;}	
.about_bg01{background: none;}
.about_bg02{background: none;}
.about_bg03{background: none;}
.about_bg04{background: none;}
}
@media screen and (max-width: 1200px) {
.kv{height: 680px;}	
.main-slide{height: 680px;}	
.main-title{padding-top: 130px;}		
}
@media screen and (max-width: 1100px) {
.main{width: 95%;}
}

@media screen and (max-width: 959px) {
.kv{height: 600px;}	
.kv::after{background: none;}	
.main-slide{height: 600px;}	
.main-title {max-width: inherit;width: 90%;padding-top: 100px;}

.about::before{background: none;}
.about-box{
	position: inherit;	
    display:inherit;
	flex-wrap:nowrap;
	width: 85%;
	margin: 0 auto;
	padding: 100px 0 30px 0;
	}	
.about-ph{width:85%;margin: 0 auto;}
.about-txt{width: 100%;margin: 0 auto;}	
	
.left{float: inherit;}
.right{float: inherit;}	
.about_bg01{background: none;}
.about_bg02{background: none;}
.about_bg03{background: none;}
.about_bg04{background: none;}
	
.about-txt{width: 100%;}
.about-txt p{font-size: 15px;}
.about-ph{width: 100%;padding: 10px;}
	
.people-01{display: none;}
.people-02{display: none;}
.people-03{display: none;}
.icon-01{display: none;}
.icon-02{display: none;}	

.tour_list_box li{font-size: 16px;}	
.tour_list_box li em {font-size:13px;}	
.tour_list_box .price{		
	float: inherit;
	display: block;
	text-align: center;
	}	
	
.name-l{flex:0 0 80%;}
.name-l02{flex:0 0 75%;}	
.price-r{flex:0 0 20%;}
.price-r02{flex:0 0 25%;}	
	
}

/*平版*/
@media screen and (max-width: 768px) {
#main-nav{ display: none;}
#block_menu {display: none;}	
/*錨點*/
.block-first{padding-top: 40px;margin-top: -40px;}	
.bottom_bg{display: none;}	
.about{margin-top: 0px;}	
.about::after{background: none;}	
.about-box{padding: 50px 0 30px 0;}		
}	

@media only screen and ( max-width:600px) {
.tour-list a{display:inherit;}	
.name-l,.name-l02{flex:initial;width: 100%; display: block;}
.price-r,.price-r02{flex:initial;width: 100%;display: block;margin-top: 5px;}	
.tour-more{margin: 10px auto 25px auto;text-align: center;}	
.tour-more a{float: none;}
}

@media screen and (min-width: 481px) and (max-width: 600px) {
.kv{height: 400px;}		
.main-slide{height: 400px;}	
.main-title {top:50px;}	
.top_bg{display: none;}		
.small_area{width:80px;}
.maple_bottom01,.maple_bottom02,.maple_bottom03{display: none;}
.small_tour_no {max-width: 100%;font-size: 28px;padding: 20px 0px;}	
}

/*手機*/
@media screen and (max-width: 480px) {
.kv{height: 400px;}		
.main-slide{height: 400px;}	
.main-title {top:50px;}	
.top_bg{display: none;}	
.small_area{width:80px;}	
.maple_bottom01,.maple_bottom02,.maple_bottom03{display: none;}	
.small_tour_no {max-width: 100%;font-size: 28px;padding: 20px 0px;}		
}	

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