@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,figure,article
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    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;
}
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%;}

.left { float: left;}
.right { float: right;}

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

#backtop { z-index: 9999; position: relative;}

body {
    font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;
    background-color: #000000;    
}

#web-outer {
	max-width: 2000px;
	overflow: hidden;
	font-size:15px;
    color:#ffffff;
}


/*======================
====Main CSS=====
=======================*/

.first { padding-top:120px; margin-top: -120px;}
.second { padding-top:110px; margin-top: -110px; }

.mainpic {  margin:0 auto; margin-bottom: 20px; position: relative;  }
.pic-outer {  position: relative; z-index: 300; /*display:inline-block; width:72%; margin-left: -20%; z-index: 100;*/ }
.main-title { position: absolute; top:200px; z-index: 900;  }
/*
header {     
    text-align: center;
    margin-top: -50px;
}
*/
header h1 {
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
}
/*======================
==== Slider CSS=====
=======================*/

#demo-1 {
    position: relative; /* can either be relative, absolute or fixed. If position is not set (i.e. static), it would be set to "relative" by script */
    overflow: hidden; /* to bound the empty top space created by inner element's top margin */
    width: 100%;
    min-height: 755px;
}

/*======================
====nav CSS=====
=======================*/

#main-nav {
    z-index: 990;
    position: relative;
}

.block_menu {
	width: 100%;
	text-align: center;
  height: 132px;
  background: url("../images/bg-menu.webp") right top no-repeat;
  padding-bottom: 30px;
}

.sticky {
    top: 30px;
}
#main-nav ul {  margin:0 auto; text-align: center; margin-top: 0px; padding-top:46px; }
#main-nav ul li {  
    display:inline-block;  
    margin:0 7px 10px 7px; background: transparent;
    text-align: left; 
}
#main-nav ul li a { 
    display:block; width:100%; height:100%; text-decoration: none; background: #000000;  
    color:#969696; padding:3px 4px; font: 700 20px "微軟正黑體"; border:1px solid #969696;
}
#main-nav ul li a em { font-size: 14px; font-style: normal; padding-left: 2px;}
#main-nav ul li a span { font-size: 10px; display: block;}

#main-nav ul li a:hover, #main-nav ul li a.active { color:#ffffff; background: #9f170f; border:1px solid #9f170f;}

#main-nav ul li.bank-link a { background:#969696; color: #000000; }
#main-nav ul li.bank-link a:hover, #main-nav ul li.bank-link a.active { color:#ffffff; background: #9f170f; border:1px solid #9f170f;}

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

/*-----背景-------*/

    .bg-line { background: url("../images/bg-line.webp") center top no-repeat; }
    .bg-dot { background: url("../images/bg-dot.webp") center top repeat-y; }
    .bg-top { background: url("../images/bg-top.webp") center top no-repeat; }
    .bg-bom1 { background: url("../images/bg-bom01.webp") center bottom no-repeat; padding-bottom: 150px; }
    .bg-bom2 { background: url("../images/bg-bom02.webp") center bottom no-repeat; padding-bottom: 150px;}
    .bg-bom3 { background: url("../images/bg-bom03.webp") center bottom no-repeat; padding-bottom: 150px;}

/*----table----*/

.table-outer { 
    max-width: 1200px; background: #05111d; 
    border-radius: 20px 20px 0 0 ; margin:0 auto;
    margin-bottom: 150px;
}
.bg-table-outer { 
    background: url("../images/bg-table.webp") top left no-repeat; 
    margin:0 auto; padding:18px; 
}
  :root{
    --gap: 12px;
    --radius: 8px;
    --bg: #05111d;
    --card-bg: #0b1220;
    --muted: #94a3b8;
    --accent: #28c6e8;
    --cell-padding: 12px 14px;
  }

  /* 基本表格桌面樣式 */
  .responsive-table{
    width: 100%;
    margin:0 auto;
    border-collapse: collapse;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "PingFang TC", "Microsoft JhengHei", sans-serif;
    color: #e6eef8;
    background: var(--bg) ;
    box-shadow: 0 2px 10px rgba(2,6,23,0.45);
    border-radius: 10px;
    overflow: hidden;
  }

  .responsive-table thead{
    background: #0d314a;
  }
  .responsive-table thead th {
    font-size: 18px;
    color: var(--accent);
  }
  .responsive-table th,
  .responsive-table td{
    padding: var(--cell-padding);
    text-align: left;
    border-bottom: 1px solid #454656;
    font-size: 16px;
  }
  .responsive-table td img{
    vertical-align:middle;
    padding-right: 8px;
  }

  .responsive-table th{
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 2px;
    padding: 18px 20px;
  }

  .responsive-table tbody tr:hover{
    background: rgba(255,255,255,0.03);
  }
  .responsive-table td > .td-value span {
      line-height: 1.8em;
      padding-right: 20px;
  }
.colasale { color:#ffc501;}
.colasale td span a { color:#ffc501; text-decoration:underline; }

.table-width1 { width: 30%;}
.table-width2 { width: 15%;}
.table-width3 { width: 55%;}

  @media (max-width: 850px){

.table-width1 { width: 30%;}
.table-width2 { width: 20%;}
.table-width3 { width: 50%;}
}

  /* 小螢幕（卡片式） */
  @media (max-width: 720px){
    .responsive-table{
      display: block;
      border-radius: 0;
      box-shadow: none;
    }

    .responsive-table thead{
      display: none; /* 隱藏表頭，改用每個 cell 的 data-label */
    }

    .responsive-table tbody,
    .responsive-table tbody tr{
      display: block;
      width: 96%;
      margin: 0 auto;
      margin-bottom: var(--gap);
    }

    .responsive-table tbody tr{
      background: linear-gradient(180deg, var(--card-bg), rgba(11,18,32,0.85));
      border-radius: var(--radius);
      box-shadow: 0 6px 18px rgba(2,6,23,0.45);
      padding: 10px;
      overflow: hidden;
      border: 1px solid #94a3b8;
    }

    .responsive-table td{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      border-bottom: none;
      font-size: 16px;
    }
 
    /* 顯示欄位標籤（對應 thead） */
    .responsive-table td::before{
      content: attr(data-label);
      display: inline-block;
      margin-right: 12px;
      font-weight: 600;
      color: var(--muted);
      white-space: nowrap;
      max-width: 45%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* 若欄位內容較長，可換行 */
    .responsive-table td > .td-value{
      flex: 1;
      text-align: right;
      margin-left: 12px;
      word-break: break-word;
      color: #e6eef8;
    }
      .responsive-table td > .td-value span {
      display: block;
      padding-right: 0;
  }
}


.area { max-width: 1400px; margin:0 auto; padding:20px; display: flex; flex-wrap: nowrap; overflow: hidden; align-items: flex-start; }

.area-box { padding:16px 16px 0 16px ; margin:0 1%; width: 48%; background:rgba(0,0,0,0.3); border-radius: 16px; border:2px solid #727272;}
.area-box  p { font: 500 18px "微軟正黑體"; letter-spacing: 1px; line-height: 2em; margin-bottom:16px; padding:8px; }
.area-box  p.ps { font: 500 14px "微軟正黑體"; letter-spacing: 1px; line-height: 1.8em; color:#cacaca; text-align: right;  padding-top:16px;}

.row { margin:0 auto; padding:0 15px; }


.subtitle { text-align: center; margin:0 auto ; font: 600 46px "微軟正黑體"; padding-top: 20px; margin-top: 60px; margin-bottom: 40px;}
.subtitle em{ font-style:normal; font-size: 32px;  }
.subtitle span { text-align: left; padding-left: 240px; font: 700 22px "Play", sans-serif; display: block; letter-spacing: 3px; padding-top: 12px;}
.short { background: url("../images/bg-title-short.webp") center top no-repeat;  height: 181px; max-width: 610px; letter-spacing: 3px;  }
.long { background: url("../images/bg-title-long.webp") center top no-repeat; height: 181px; max-width: 650px; letter-spacing: 2px; }


.subtitle-tour { text-align: center; margin:80px 0 50px 0; }
.subtitle-table { 
    text-align: center; margin:60px 0 ; background: url("../images/title-info.webp") center center no-repeat; height: 40px;
    font: 500 34px "微軟正黑體"; letter-spacing: 1px; 
}
.title-map { text-align: center; margin:60px 0 20px 0 ; }

/*----tour-box----*/

.tour-container { max-width:960px; margin:0 auto; }
.tour-box { padding:16px; margin:0 1% 15px 1%;  background:rgba(0,0,0,0.7); border-radius: 16px; border:2px solid #727272;  position: relative;}
.tour-box a { text-decoration: none; display: block; width: 100%; height: 100%;  }
.type { color:#ffffff; font: 600 14px "微軟正黑體"; background: #c76000; padding:3px 4px; border-radius: 2px;}
.tour-name {  
    color:#ffffff; font: 600 20px "微軟正黑體"; line-height: 2em;   margin-top: 6px;
}
.tour-name span { border:2px solid #ffbe00; padding:3px 4px; font: 600 14px "微軟正黑體"; color:#ffbe00;  display: inline-block; margin-left: 8px; }
.tour-name span:empty { display: none;}

.tour-info-list { margin:0px 2px;  padding:8px 12px;  }

.tour-info-list li { 
    font: 600 15px "微軟正黑體"; color:#ffffff; line-height: 1.8em;
    padding-left: 31px; text-indent: -31px; 
    list-style: none;
}
.tour-info-list li::before {
    content: url("../images/icon02.webp");
    font-size: 22px;
    padding-right: 6px;
    vertical-align: middle;
}
.tour-info-list li span { color:#ffbe00;}

.tour-price { color: #ffbe00; font: 600 14px 'Roboto', sans-serif;  text-align: right; line-height: 40px; padding-right:10px; margin:0px 2px 2px 2px; /*position: absolute; bottom:0; right: 10px; */}
.tour-price span {  color:#ffbe00;  font: 600 30px 'Roboto', sans-serif;  }
/*.tour-price2 {right: 26px; }*/

.comingsoon { 
  border-radius: 16px; border:2px solid #727272; padding:16px; margin:0 1% 15px 1%; 
  background:rgba(0,0,0,0.7); color:#ffffff; font: 600 26px "微軟正黑體"; letter-spacing: 1px; text-align: center;
 }

.notice { margin:0 auto; max-width: 1024px; color:#dadada; font: 500 14px "微軟正黑體"; text-align: center; padding:20px 0; }
.notice span { display: block;}


/*---多個連結----*/
.main-tour-link {  display:flex; justify-content: flex-end;  margin-bottom: 40px; margin-top: -50px; padding-right: 16px; }
.main-tour-link a { text-decoration: none; color: #ffffff; height:100%; width:100px; text-align: center;
    border-radius: 26px; font-size: 15px; font-weight: 600; padding:2px 5px;
    line-height: 1.8em; margin:3px 5px 0 0; background:#c76000; 
}
.main-tour-link a:hover { background:#f0d801; color:#000000; }
.main-tour-link a:empty { display: none;}

/*----soldout----*/
.thanks { position:absolute; top: 0; left: 30%;}
.box-soldout { background:rgba(54, 54, 54, 0.7); }
.box-soldout .tour-name { color:#858585;}
.box-soldout .tour-info-list li { color:#858585;}
.box-soldout .tour-name span  { opacity: 0.5;}
.box-soldout .tour-price { opacity: 0.5;} 
.box-soldout .tour-price span { opacity: 0.5; }

@media only screen and (max-width:480px) 
{
    .thanks { top: 10%; left: 5%;}
}


/*----tour-box---*/

/*------media query----------*/

/*@media only screen and ( max-width:1500px) 
{
#main-nav ul {  text-align: left; margin-left: 80px; } 
}

@media only screen and ( max-width:1400px) 
{
#main-nav ul {  max-width: 1000px;  } 
}*/

@media only screen and ( max-width:1300px) 
{
    /*#main-nav ul {  max-width: 800px; margin-top: -10px;  } 
    #main-nav ul li { margin-bottom: 10px; }*/
    .main-title img { width: 80%;}
    
}

@media only screen and ( max-width:1024px) 
{
    #demo-1 { min-height: 630px; }
    .main-title img { width: 76%;}
    .area-box { padding:12px;}
   
}
@media only screen and ( max-width:900px) 
{
  /*  #main-nav ul { background: #000000;}
    #main-nav ul li { margin-bottom: 10px; }*/
 /*   .block_menu {
        background: #000000;
        border-bottom: 2px solid #ffffff;
    }*/
 #main-nav ul { max-width: 700px; padding-top: 0px; margin:-10px 20px 0 20px ; text-align: left; }
 #main-nav ul li { margin-bottom: 10px; }
}

@media only screen and ( max-width:812px)
{     
}
/*---平板-----*/

@media only screen and ( max-width:768px) 
{ 
    #demo-1 { min-height: 550px; }
    .bg-top { padding-top: 40px; }
    .main-title { top:140px;}
    .main-title img { width: 95%;}
    #main-nav { display: none; }
    .first { padding-top:0px; margin-top: 0px;}
    .second { padding-top:0px; margin-top: 0px; }   
    .tour-price { display: block; position:relative;}    
    .main-tour-link {  margin-bottom: 10px;  margin-top: 0px;}
    .area { flex-direction:column; align-items: center;  }
    .area-box { width: 98%;  margin:15px 1%; }   
    .subtitle-table { margin:0 0 60px 0 ; }
    #infomation .bg-top { padding-top: 10px;}


}

@media only screen and (max-width:600px) 
{
    #demo-1 { min-height: 500px; }
    .main-title img { width: 100%;}
    .main-title { top:100px;}
    .subtitle span { padding-left:38%; font-size:18px;padding-top: 15px; }
}
@media only screen and (max-width:480px) 
{
    .thanks { top: 10%; left: 5%;}
    #demo-1 { min-height: 400px; }
    .bg-top { padding-top: 20px; }
    .subtitle span { padding-left:34%;  letter-spacing: 1px;  }


}