@charset "utf-8";
/* CSS Document */


.tour{
	width: 100%;
	max-width:1150px;
	padding-left: 0% ;
	padding-right: 0% ;
	margin: auto;
	box-sizing: border-box;	 
	display: table;
	
}
.tour .row {
  margin-left: 0px!important;
	margin-right:0px!important;

}
.tour .box{
	width: 100%;
    padding: 4% 0%;
   
}
.tour ul {
	padding-left: 20PX;
    list-style-type: disc!important;
}
.tour .row {
   
}

.tour b {
    font-weight: 500 ;
}
.tour img{
	max-width: 100%;
	margin: 0 auto;
}
.tour .pic-full img{
	max-width: 100%;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	
}


.tour .BGblack p,.tour .BGblack ul,.tour .BGblack li,.tour .BGblack h1,.tour .BGblack h2{
	 color: #fff!important;
}
.tour .BGblack h5 {
    color: #000;    
    background-color: #ffffff;
    border: 0.0625rem solid black;
    font-family: 'Noto Sans TC', 'Jost', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-weight: bold;
    padding: 0.625rem 1.875rem;
    text-transform: uppercase;
    width: auto;
}
.tour h1 {
    font-size: 26px;
    display: inline-block;
    line-height: 1.3;
    letter-spacing: 1px;
    font-weight: 700;
    font-family: "Noto Sans TC", Jost, sans-serif;
    margin-top: 2%;
    margin-bottom: 5px;
    color: #333;
}
.tour h1 span{
   display: inline-block;
    letter-spacing: 1px;
    float: right;
    text-align: center;
    font-weight: 400;
    font-family: 'Noto Sans TC', 'Jost', sans-serif;
    margin-left: 5px;
    margin-top: -3px;
   
}
.tour h1 span a{
       font-size: 14px;
    line-height: 1;
    color: #fff;
    background: #697766;
    padding: 5px;
    border-radius: 8px;
}
.tour h1 span a:hover{
      
    color: #fff;
    background: #4fb1e2;
   
}
.tour h2{
	    font-size: 18px;
    line-height: 24px;
    font-weight: 300 !important;
    margin-bottom: 15px;
    font-family: 'Noto Sans TC', 'Jost', sans-serif;
    margin-top: 0px;
}
.tour .slogan{    font-size: 18px ;
    line-height: 24px ;
    text-align: center;
    font-weight: 300;
     font-family: 'Noto Sans TC','Jost', sans-serif ;
    margin-top: 0 ;
    margin-bottom: 2% ;
    color: #404040 ;}
.tour .add{ 
    font-size: 18px ;
    line-height: 24px ;
    font-weight: 100;
    font-family: 'Noto Sans TC','Jost', sans-serif ;
    margin-top: 0 ;
    margin-bottom: 2% ;
    color: #404040 ;
    text-decoration-line: underline;}

.tour h3 {
      font-size: 26px ;
    line-height: 30px ;
    color: #2c2c2c ;
    margin-top: 10px;
    margin-bottom: 24px ;
    font-family: 'Noto Sans TC','Jost', sans-serif ;
    font-weight: 100 ;
}

.tour h4{
	display: flex;
    color: #fff;
    width: 80px;
    margin: 0 auto;
    padding: 6px 4PX;
    background: #eaad5a;
    border-radius: 5.5em;
    font-size: 14px;
    margin-bottom: 0px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}










.tour h6{
	    font-size: 22px;
    line-height: 45px;
    color: #2c2c2c ;
    margin-top: 10px;
    margin-bottom: 0px !important;
    font-family: 'Noto Sans TC','Jost', sans-serif ;
    font-weight: 100 ;
}
.tour h5 {   
   
    color: #ffffff;   
    word-break: break-word;
    display: inline-block;
    background-color: #000000;
    border: 0.0625rem solid black;
    font-family: 'Noto Sans TC','Jost', sans-serif ;
    font-size:14px;
    line-height: 1.5;
    font-weight: bold;
    padding: 0.625rem 1.875rem;
    text-transform: uppercase;
    width: auto;
}

.tour h5 span{
	font-size: 14px ;
    line-height: 23px ;
    color: #7e8b83;
    padding: 0 5px ;
	
}
.tour h7 {   
      font-family: 'Noto Sans TC', 'Jost', sans-serif;
    text-align: center;
    display: inline-block;
    font-weight: 600;
    font-size: 19PX;
    line-height: 2;
    margin-top: 0px;
}



.tour .tour_logo{
	align-items: center;   
    vertical-align: middle;
    display: flex;
    
}

.mobile_n{
		display: block;
	}
.mobile_on{
		display: none;
	}


.tour .imgDown{
	margin-top:30px;
}

/*color*/
.tour .pinkcolor {
    color: #ec7f7a ;
}
.BGgrey{
	background-color:#f7f7f7;
}

.BGblack{
	background: #0d0e0c;
}
.BGblue{
	background-color: #D8EEFF;
}
.BGblue_3d90e9{
	background-color: #3d90e9 ;
}
.BGyellow{
	background-color: #f9f5dc;
}
.BGgreen{
	background-color: #697766;
}

.BGgreen_97a58c{
	background-color: #97a58c ;
}
@media all and (max-width:640px){
	.tour h1 span a {
    font-size: 10px;
   
}
	.tour .tour_logo{
    display: none;
   
}   
	.tour h6{margin-bottom: 0px ;font-size: 16px ;
    line-height: 24px ;   }
	.tour h2 {
    font-size: 16px;
        line-height: 1.2;
        margin: 8px 0 12px 0;
}
	
	.tour h5 {    
            font-size: 14px;
        line-height: 1.5;
}
	.tour h1 {
     font-size: 21px;
        line-height: 2;
        margin-top: 8px;}
	.tour p {
    font-size: 16px ;
    line-height: 24px ;    
    margin-bottom: 5px;
    
}
	
	.tour .slogan {
    font-size: 14px ;
    line-height: 24px ;   
    
    margin-bottom: 5px ;
    
}.tour .hoteltit {
    font-size: 18px;
    
}
	.tour h4 {
    font-size: 16px ;
    line-height: 26px ;
    margin-bottom: 0 ;
    padding: 0 5px ;
}
	
	.tour h3 {
        font-size: 18px ;
    line-height: 20px ;
    margin-bottom: 5px ;}
	.tour h3 span {
        font-size: 24px ;
    line-height: 28px ;
    }
	.tour h7 {       
		margin-top:0px;
    margin-bottom: 0px ;
}
.tour h7:before, .tour h7:after {   
    width: 15%;   
}

}



/*頁籤*/
.tour_card {background: #FFF none repeat scroll 0% 0%; /*box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);*/    width: 98%;
    margin: 0 auto; }
.tab-nav > li > a::after { background: #5a4080 none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.tab-content{padding:5px}

.nav-tabs ul,.nav-tabs1 ul,.nav-tabs2 ul,.nav-tabs3 ul{width: 100%;}
/*1*/

.nav-tabs { border-bottom: 2px solid #DDD; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.nav-tabs > li > a { border: none; color: #ffffff;background: #5a4080;     font-size: 16px;display: flex;
    justify-content: center;height: 50px;
    flex-direction: column}
.nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none;  color: #5a4080  ; background: #fff; }
.nav-tabs > li > a::after { content: ""; background: #5a4080; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
.nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }
.nav-tabs > li  {width: 33.33%; text-align:center;float: left;}



@media all and (max-width:724px){
.nav-tabs > li > a > span {font-size: 14px;}	
.nav-tabs > li > a {padding: 5px 5px;}
}



/*2*/

.nav-tabs1 { border-bottom: 2px solid #DDD; }
.nav-tabs1 > li.active > a, .nav-tabs1 > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.nav-tabs1 > li > a { border: none; color: #ffffff;background: #5a4080;     font-size: 16px;display: flex;
    justify-content: center;height: 50px;
    flex-direction: column}
.nav-tabs1 > li.active > a, .nav-tabs1 > li > a:hover { border: none;  color: #5a4080  ; background: #fff; }
.nav-tabs1 > li > a::after { content: ""; background: #5a4080; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
.nav-tabs1 > li.active > a::after, .nav-tabs1 > li:hover > a::after { transform: scale(1); }
.nav-tabs1 > li  {width: 50%; text-align:center;float: left;}



@media all and (max-width:724px){
.nav-tabs1 > li > a > span {font-size: 14px;}	
.nav-tabs1 > li > a {padding: 5px 5px;}
}

/*3*/

.nav-tabs2 { border-bottom: 2px solid #DDD; }
.nav-tabs2 > li.active > a, .nav-tabs2 > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.nav-tabs2 > li > a { border: none; color: #ffffff;background: #5a4080;     font-size: 16px;display: flex;
    justify-content: center;height: 50px;
    flex-direction: column}
.nav-tabs2 > li.active > a, .nav-tabs2 > li > a:hover { border: none;  color: #5a4080  ; background: #fff; }
.nav-tabs2 > li > a::after { content: ""; background: #5a4080; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
.nav-tabs2 > li.active > a::after, .nav-tabs2 > li:hover > a::after { transform: scale(1); }
.nav-tabs2 > li  {width: 25%;float: left;text-align:center;}



@media all and (max-width:724px){
.nav-tabs2 > li > a > span {font-size: 14px;}	
.nav-tabs2 > li > a {padding: 5px 5px;}
}
/*4*/

.nav-tabs3 { border-bottom: 2px solid #DDD; }
.nav-tabs3 > li.active > a, .nav-tabs3 > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.nav-tabs3 > li > a { border: none; color: #ffffff;background: #5a4080;     font-size: 16px;display: flex;
    justify-content: center;height: 50px;
    flex-direction: column}
.nav-tabs3 > li.active > a, .nav-tabs3 > li > a:hover { border: none;  color: #5a4080  ; background: #fff; }
.nav-tabs3 > li > a::after { content: ""; background: #5a4080; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
.nav-tabs3 > li.active > a::after, .nav-tabs3 > li:hover > a::after { transform: scale(1); }
.nav-tabs2 > li  {width: 25%;float: left;text-align:center;}



@media all and (max-width:724px){
.nav-tabs3 > li > a > span {font-size: 14px;}	
.nav-tabs3 > li > a {padding: 5px 5px;}
}







/*輪播*/
.boxrun{
    width: 100%;
    height: 400PX;    
    position: relative;
  }
  .boxrun>div{
    display: block;
    position: absolute;
    top:0;
    left:0;
    opacity: 0;
    filter: alpha(opacity=0);
    /*當圖片數量增加，影片長度需更改，變為5s*圖片數量*/
    -webkit-animation: silder 15s linear infinite;
            animation: silder 15s linear infinite;
  }
  .boxrun>div>img{
    max-width: 100%;
	  height: auto;
  }



/*每個圖片各延遲5秒*/
  .boxrun>div:nth-child(3) {
    -webkit-animation-delay: 10s;
            animation-delay: 10s;             
  }

  .boxrun>div:nth-child(2) {
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
  }

  .boxrun>div:nth-child(1) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;    
  }
/*滑入時停止播放*/
  .boxrun:hover>div{
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}


.boxrun01{
    width: 100%;
    height: 550PX;    
    position: relative;
  }
  .boxrun01>div{
    display: block;
    position: absolute;
    top:0;
    left:0;
    opacity: 0;
    filter: alpha(opacity=0);
    /*當圖片數量增加，影片長度需更改，變為5s*圖片數量*/
    -webkit-animation: silder 15s linear infinite;
            animation: silder 15s linear infinite;
  }
  .boxrun01>div>img{
    max-width: 100%;
	  height: auto;
  }



/*每個圖片各延遲5秒*/
  

  .boxrun01>div:nth-child(2) {
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
  }

  .boxrun01>div:nth-child(1) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;    
  }
/*滑入時停止播放*/
  .boxrun01:hover>div{
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}








/*動畫關鍵影格*/
  @-webkit-keyframes silder {
      3% {
          opacity: 1;
          filter: alpha(opacity=100);
      }
      27% {
          opacity: 1;
          filter: alpha(opacity=100);
      }
      30% {
          opacity: 1;
          filter: alpha(opacity=1);
      }
  }
  @keyframes silder {
      3% {
          opacity: 1;
          filter: alpha(opacity=100);
      }
      27% {
          opacity: 1;
          filter: alpha(opacity=100);
      }
      30% {
          opacity: 1;
          filter: alpha(opacity=1);
      }
  }




@media all and (max-width:640px){
	.boxrun{
   
    height: 130PX;    
   
  }
	.boxrun01{
   
    height: 180PX;    
    
  }
}


/*表格*/
.tour .specs-container {
   display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0;
    /* background-color: #f9f9f9; */
    border-radius: 8px;
}

.tour .spec-item {
        background-color: #ffffff00;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #333;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /*flex: 1 1 calc(50% - 20px);
    min-width: 150px;*/
}

.tour .spec-title {
    font-size: 17PX !important;
    font-weight: bold;
    color: #697766;
    text-align: center;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    border-bottom: 1px solid #333;
    /* padding-bottom: 5px;*/
}

.tour .spec-value {
    font-size: 14px;
    color: #333;
    margin: 0;
    text-align: center;
}

.tour .spec-sub-value {
    font-size: 14px;
    color: #555;
    margin: 3px 0;
}

/* 針對小螢幕 (手機) 的響應式設計 */
@media (max-width: 600px) {
    .tour .spec-item {
        /* 在小螢幕上，讓每個項目佔滿整行 */
       flex: 1 1 calc(33.333% - 20px); /* 每行三個項目 */
    }
}

/* 針對大螢幕 (平板/桌面) 的響應式設計 */
@media (min-width: 900px) {
	.tour .specs-container {
    
    padding: 10PX;
   
}
    .tour .spec-item {
        /* 在大螢幕上，嘗試讓項目更緊湊 */
           flex: 1 1 calc(18% - 20px);
     /* 每行三個項目 */
    }
    
    /* 讓難易度項目佔滿一行 */
    .tour .spec-difficulty {
        flex: 1 1 30%;
        text-align: center;
    }
    
    .tour .difficulty-values {
        display: flex;
        justify-content: center;
        gap: 30px;
    }
}