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

.clean { clear:both;}

.clearfix {
  overflow: hidden;
  zoom: 1;
}


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

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

/* 外部容器：設定高度和相對定位 */
.header-carousel {
    position: relative;
    width: 100%;
    height: 798px; /* **設定您想要的高度** */
    overflow: hidden;
	margin-bottom: 20px;
	margin-top: 10px;
}

/* 輪播軌道：現在只是作為投影片的父容器，不進行位移 */
.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 投影片項目：實現堆疊和淡入淡出效果 */
.slide-item {
    position: absolute; /* 絕對定位：將所有投影片堆疊在一起 */
    top: 0;
    left: 0;
    width: 100%; /* 佔滿父容器 */
    height: 100%;
    
    opacity: 0; /* **預設隱藏** */
    transition: opacity 1s ease-in-out; /* **設定淡入淡出的時間** (例如 1 秒) */
    z-index: 1; /* 保持在一般圖層 */

    /* ==== 底圖設定：底圖不會縮放 (不變) ==== */
    background-repeat: no-repeat;
    background-position: center center; 
    background-size: cover; 
}

/* 顯示中的投影片 (淡入) */
.slide-item.active {
    opacity: 1; /* **顯示** */
    z-index: 2; /* 確保顯示中的投影片在上方 */
}


/* 為每個strong投影片設定不同的背景圖片 (不變) */
.slide-1 { background-image: url('../img/big_pic01.webp'); }
.slide-2 { background-image: url('../img/big_pic02.webp'); }
.slide-3 { background-image: url('../img/big_pic03.webp'); }
.slide-4 { background-image: url('../img/big_pic04.webp'); }

/* 前景中間圖片：實現「中間圖片會縮放」效果 (不變) */
.middle-image {
    /* 定位：水平與垂直置中 */
    position: absolute; 
    top: 45%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    
    /* 大小：圖片會隨外部容器寬度縮放 (Scaling) */
    width: 100%; 
    max-width: 430px; 
    height: auto; 
    z-index: 10; 
}

/* 點點導航區塊定位 */
.carousel-pagination {
    position: absolute;
    bottom: 40px; /* 距離底部 40px */
    left: 50%;
    transform: translateX(-50%); /* 水平置中 */
    z-index: 20; /* 確保在所有圖片上方 */
    display: flex;
    gap: 8px; /* 點點間距 */
}

/* 單個點點的樣式 */
.dot {
    width: 10px;
    height: 10px;
    background-color: rgba(35, 35, 35, 0.8); /* 半透明白色 */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
    border: 1px solid #232323; /* 白色邊框增加辨識度 */
}

/* 目前活躍點點的樣式 */
.dot.active {
    background-color: #fff; /* 實心白色 */
    /* 也可以放大或改變形狀 */
    /* transform: scale(1.2); */
}



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

.menu {}
.menu01 a { width: 194px;height: 54px;text-indent:-5000px;background: url("../img/nav.webp") 0 0 no-repeat;}
.menu01 a:hover, .menu01 a.active{ background: url("../img/nav.webp")0px -54px;}
.menu02 a { width: 194px;height: 54px;text-indent:-5000px;background: url("../img/nav.webp") -194px 0 no-repeat;}
.menu02 a:hover, .menu02 a.active{ background: url("../img/nav.webp") -194px -54px;}

 .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;padding-top: 150px;margin-top: -150px;}
.block-first02{overflow: hidden;padding-top: 100px;margin-top: -100px;}

.bg01{background: url("../img/bg_01.webp") top repeat;}
.bg02{background: url("../img/bg_02.webp") top repeat;}
.bg03{background: url("../img/bg_03.webp") top repeat;}
.bg04{background: url("../img/bg_04.webp") top no-repeat;}

.main{max-width: 960px;width: 95%; margin: 0 auto;padding: 50px 0;clear: both;overflow: hidden;} 
.main02{max-width: 960px;width: 95%; margin: 0 auto;padding: 50px 0;clear: both;overflow: hidden;} 

.left{float: left;}
.right{float: right;}
.aomori-title{max-width: 390px;margin: 50px auto;}	
.area-frame{font-family:"微軟正黑體", Arial, Helvetica, sans-serif;font-size: 15px;line-height: 2em;color: #252525;clear: both;}
.area-frame02{font-family:"微軟正黑體", Arial, Helvetica, sans-serif;font-size: 15px;line-height: 2em;color: #252525;clear: both;padding: 0 0 60px 0;}
.area-txt{width: 48%;}
.area-ph{width: 48%;}
.area-ph img{border-radius: 30px;}
.area-title{max-width: 460px; margin: 0 auto;}
.note{padding: 10px;}

.area-box{width: 48%;padding: 30px 0;}
.area-txt2{width: 100%;}
.area-ph2{width: 100%;}
.area-ph2 img{border-radius: 30px;}

.area-box02{padding: 0px 0 30px 0;border-bottom: 5px #7f9c73 dotted;clear: both;overflow: hidden;}

.ph01{background: url("../img/ph_bg_01.webp") bottom 30px right no-repeat;}
.ph02{background: url("../img/ph_bg_02.webp") bottom 30px right no-repeat;}

/*推薦行程*/
.tour-title{max-width: 390px;margin: 50px auto 30px auto;}
.title-hidden {
	text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
}
	
/*行程*/
.tour-wrap{max-width: 1100px;width: 95%;margin:0 auto;z-index: 1;}
.tour-wrap a {text-decoration: none; display:flex; flex-wrap: nowrap;}

.ct55 {flex:0 0 55%; border-radius: 30px;
	justify-content:flex-start; align-items:flex-start; align-content: stretch;
	aspect-ratio: 3 / 2;}
.ct55 img{	
    border-radius: 30px;
	border: 2px #366b21 solid;
}
.ct45 {flex:0 0 45%;
	justify-content:flex-start; align-items:flex-start;  align-content: stretch;}
.tour-txt {margin-left:-40px;margin-top: 8%; background:#fff;border-radius: 25px;padding-bottom: 10px;border: 2px #366b21 solid;}
.tour-txt h3{font-family:"微軟正黑體", Arial, Helvetica, sans-serif;font-size: 18px;line-height: 1.8em;color:#fff;padding: 10px 15px;background-color: #366b21;border-radius: 22px 22px 0 0;}
.tour-txt h3 em{font-style:normal;background-color: #fff; color: #366b21;font-size: 15px;padding: 3px;margin-right: 5px;border-radius: 5px;}
.tour-txt h3 strong{color: #fffdd2;font-size: 15px;margin-left: 3px;}

ul.tour-mark{width: 90%;text-align: left;margin: 10px 10px 10px 30px;}
ul.tour-mark li{font-family:"微軟正黑體", Arial, Helvetica, sans-serif;font-size: 15px;font-weight: 500;	line-height: 2em;color: #666;margin-top: 10px;list-style-type: circle;}

.tour-txt p.price{	
	color:#5c5c5c;	
	text-align: right;
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 500;
	padding-right: 10px;
	font-weight: 600; 	
}

.tour-txt p em{	
	font-style:normal;
	color:#5c5c5c;	
	font-size: 15px;
}

.tour-txt p.price strong {
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;font-size: 22px; font-weight: 600;margin: 0 2px;letter-spacing:1px;color: #cd225e;}

/*綜合行程*/
.tour-list {max-width: 1100px;width: 95%;margin: 0 auto;padding: 10px 0 50px 0;}
.min-title{display: inline-block;font-family:"微軟正黑體", Arial, Helvetica, sans-serif;font-size: 18px;color: #fff;padding: 10px;margin-top: 15px;}
.t01{border-left: 3px solid #20457b;background-color: #4e75b1;}
.t02{border-left: 3px solid #971960;background-color: #d1539a;}
.t03{border-left: 3px solid #345f16;background-color: #628a47;}
.tour-list a {display:flex;padding: 10px;overflow: hidden;border-bottom:1px solid #a9a9a9;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:#5c5c5c;line-height: 1.5em;}
.name-l em{font-style:normal;color: #8dad80;font-family:"微軟正黑體", Arial, Helvetica, sans-serif;font-size: 15px;margin-left: 3px;}
.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:#5c5c5c;}
.price-r strong{font-family:"微軟正黑體", Arial, Helvetica, sans-serif;font-size: 22px;font-weight: 600;margin: 0 2px;letter-spacing:1px;color:#cd225e;	}


.train{width: 100%;display: block;text-align: right;padding-left: 10px;}
.train img{max-width: 743px;}

@media screen and (min-width: 960px) and (max-width: 2000px) {
.top_title{max-width: 395px;position: absolute;left: 43%;top:160px;}
}


@media screen and (max-width: 959px) {
.top_title{max-width: inherit;width: 50%;left:30%;top:30px;}
.area-box02{padding: 0px 0 20px 0;}		
.area-ph{padding-top: 5%;}	
}

/*平版*/
@media screen and (max-width: 768px) {
.header-carousel {height: 600px;}	
.top_title{max-width: inherit;width: 50%;left:30%;top:30px;}	
.block_menu{display: none;}	
	
.train img{max-width: inherit;width: 70%;}	

		
.left{float: inherit;}
.right{float: inherit;}
.area-frame{width: 85%;margin: 0 auto;font-family:"微軟正黑體", Arial, Helvetica, sans-serif;font-size: 15px;line-height: 2em;color: #252525;clear: both;}
.area-frame02{width: 85%;margin: 0 auto;font-family:"微軟正黑體", Arial, Helvetica, sans-serif;font-size: 15px;line-height: 2em;color: #252525;clear: both;padding: 0px 0 40px 0;}
.area-txt{width: 100%;padding-top: 10px;margin: 0 auto;}
.area-txt2{padding-top: 10px;}	
.area-ph{width: 100%;margin: 0 auto;padding-top: 0;}
.area-box{width:100%;margin: 0 auto;padding: 50px 0 10px 0;border-bottom: 5px #7f9c73 dotted;}	
.no-line{border-bottom: none !important;}
.area-box02{padding: 0px 0 10px 0;}	
	
	

/*錨點*/
.block-first{overflow: hidden;padding-top: 0;margin-top: 0;}
.block-first02{overflow: hidden;padding-top: 0;margin-top: 0;}	
.main{margin: 0 auto;padding: 30px 0;} 
.main02{margin: 0 auto;padding: 30px 0;} 	
.aomori-title{margin: 0 auto 20px auto;padding: inherit;}		
.tour-title{padding: inherit;}	

	
.tour-wrap a {	
	width: 100%;
	background: #fff;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
    border: 2px #366b21 solid;  
    border-radius: 30px; 
	padding: 0;
	margin: 0 auto;
 	}	
	
.ct55 {width:100%;margin: 0 auto;border-radius: 30px 30px 0 0; padding: 0;}
.ct55 img{border-radius: 30px 30px 0 0;border: none;}
.ct45 {width:100%;;margin: 0 auto;}	
.tour-txt {margin-left:0;margin-top:-4px;border-radius: 0 0 30px 30px;border:none;}	
.tour-txt h3{border-radius: 0;}	
	
.tour-pic{aspect-ratio: 3 / 2;}	
	
.name-l{flex:0 0 80%;}
.price-r{flex:0 0 20%;}	

}
@media screen and (max-width: 600px) {
.tour-wrap a {width: 100%;}		
.tour-list a{display:inherit;}		
.name-l{flex:initial;width: 100%; display: block;}
.price-r{flex:initial;width: 100%;display: block;margin-top: 5px;}
	
.area-frame,.area-frame02{width: 100%;}	
.main02{margin: 0 auto;padding: 30px 0 100px 0;} 	
}

/*手機*/
@media screen and (max-width: 480px) {
.header-carousel {height: 480px;}
.middle-image {max-width: inherit;width: 80%;}	
}	

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