@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');@charset "utf-8";
/* CSS Document */
@import url(https://event.travel.com.tw/header2022/css/headerStyle.css);
.box {width: 1200px; margin:0 auto;  font:12pt/1.6em Verdana, Arial, Helvetica, sans-serif; position:relative;  }.pt4{padding-top:6%;}.grayT{ color: #666}
@media (max-width: 1200px) {.box {width: 100%;}}
img { height: auto;max-width: 100%;}.tc{  font-family: "Noto Sans TC", serif;  font-weight:400;}.jp{  font-family: "Noto Serif JP", serif; }.title01{ font-size: 25px; line-height: 1.6em;font-weight: 400;letter-spacing: .05em;}
.ch,big,h3,#menu01,.month{font-family:"Microsoft JhengHei","微軟正黑體", Arial, Helvetica, sans-serif;}
.red,#content a.list-group-item p.red{ color:#e5004f; }i{ margin-right:5px; }.fC{display: flex;  align-items: center;  justify-content: center;}hr{ padding: 0; margin: 0; width: 20%; border: 0; border-bottom: 1px solid #1058bd; margin: 0 auto;}
 /* 1. 輪播圖容器 */
    .carousel-container { position: relative; width: 100%; max-width: 100%; height: 870px; overflow: hidden; /* 隱藏放大超出的圖片邊緣 */  background-color: #000;    }
    /* 2. 單張輪播項目 */
    .carousel-slide {  position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;  transition: opacity 1s ease-in-out; /* 淡入淡出轉場時間 */   z-index: 1;    }
    .carousel-slide img { width: 100%; height: 100%;  object-fit: cover;  display: block;  }
    /* 3. 顯示中的幻燈片 (淡入) */
    .carousel-slide.active {  opacity: 1;  z-index: 2; }
    /* 4. 關鍵動畫：當 active 時播放縮小動畫 */
    .carousel-slide.active img {  animation: zoomOut 5s ease-out forwards; }
    /* 5. 動畫定義：從 1.3 倍逐漸縮小至 1.0 倍 */
    @keyframes zoomOut { 0% {  transform: scale(1.3);  } 100% {   transform: scale(1); }   }
    /* 1. 外層容器：固定尺寸與隱藏溢出 */
    .img-box { width: 100%;   height: 280px; overflow: hidden; /* 關鍵：隱藏超出容器的部分 */ border-radius: 30px; border: 1px solid #ccc; margin-bottom: 10px}
    /* 2. 圖片基礎設定與平滑轉場 */
    .img-box img {  width: 100%;  height: 100%; object-fit: cover; /* 設定平滑動畫：針對 transform 屬性，費時 0.4 秒，加速曲線 ease */  transition: transform 0.4s ease;  display: block;  }
    /* 3. 滑鼠懸停 (Hover) 時放大 1.15 倍 */
    .img-box:hover img {  transform: scale(1.15); }/**/
#ttile{ position: absolute;z-index: 99; top: 10%;}#bgW{ position: absolute;width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); z-index: 9}#girl{position: absolute; bottom: 0; z-index: 15}#text{position: absolute; z-index: 12;background-color: rgba(0,0,0,0.5); color: #fff; text-align: center; width: 100%; bottom: 0; padding: 1.5em; line-height: 1.7em; font-size: 12pt;}.girl{ background: url("../images/girl02.png") no-repeat; background-size: 100%;}#bgP{ background: url("../images/bgP.jpg") center bottom no-repeat; background-size: 100%; padding-bottom: 4%;}
#menu01{ font-size:15pt; padding: 1.5em 3em;letter-spacing: .1em;}
#menu01.nav-pills>li>a{ font-size: 30px; color: #88550d; font-family: "Noto Serif JP", serif;font-weight:500; padding-top: 0; padding-bottom: 0;}#menu01.nav-pills>li>a:hover{ color: #88550d; background: transparent;}
#menu01.nav-pills>li.active>a,#menu01.nav-pills>li.active>a:hover{  background-size: 45%; color:#88550d; background-color:  transparent; border-radius: 0;font-weight:500; font-size: 30px;font-family: "Noto Serif JP", serif; }
#content{  padding-bottom: 7%;}
.breadcrumb{ background:transparent; padding-top:0; margin-right:30px; margin-bottom:0; font-size: 10pt;}.breadcrumb a{ color:#333; font-size: 13pt;font-family: "Noto Sans TC", serif; }.breadcrumb a:hover{ color:#003399;}
#content h3{background:url(../images/titleBg.png) left bottom no-repeat; background-size:100%; height:55px; width:220px; margin-bottom:15px; margin-left: 3%; font-size:21px; margin-top:20px; position:relative;color:#555; font-family: "Noto Sans TC", serif; text-align: center;letter-spacing: .05em;}#content h3 a{ position:absolute; display:block; top:-110px;}.img-thumbnail{ background-color: transparent; }
#content a.list-group-item p{ margin-bottom:0; color:#363a43; font-size:11pt;}
#content a.list-group-item,#content a.list-group-item big{ font-size:13pt; }#content a.list-group-item span{ margin-left:1em;}#content a.list-group-item big{ color:#0033a0;font-family: "Noto Sans TC", serif;  }#content a:hover.list-group-item big{ color:#0066ff; }
#content a.list-group-item{ border:1px solid transparent; border-bottom:1px dotted #aaa; background-color:transparent;}#content .list-group{border-top:1px dotted #aaa; font-size: 12pt;}
#content a.list-group-item:first-child,#content a.list-group-item:last-child{ border-radius:0;}
#content a.list-group-item:focus,#content a.list-group-item:hover{ background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);}
.col-sm-4 img{ margin-bottom:15px;}
.tab-pane{ padding:0}.tab-pane h3{ padding:0;}.trip{ padding:0 3%;}
.modal-footer{ text-align:center;  border: none; color: #ccc; background-color: #434343; font-size: 10pt; }
#gotop { position:absolute; width:40px; height:40px; text-align:center; right:0; bottom:0; padding-top:5px; color:#333; font-size:13pt; line-height:13pt; cursor: pointer; opacity: 0.85;}
#share{position:fixed;right:0;bottom:0;background-color:rgba(255,255,255,0.5);padding:13px 5px 13px 15px}#share a{color:#333;font-size:13pt}#share i{margin-right:.3em;vertical-align:-.2em}#share i.fab{font-size:20pt;color:#193479;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%)}#share i.fa-line{color:#090}#share i.material-icons{padding-left: 5px}.badge{ background-color: transparent; font-size: 100%; color: #555; font-weight: normal;}
/* Add media queries for smaller screens */
@media (max-width: 1199px) {.carousel-container { height: 600px; }.girl{ background: none;}}
@media (max-width: 768px) {.fC{display:inherit;  align-items: inherit;  justify-content:inherit;}.trip{ padding:0 1%;}#menu01.nav-pills>li>a{ margin-top: 8px; margin-bottom: 8px;}.breadcrumb{ margin-right:10px;}.col-sm-4 img{ margin-bottom:0px;}#calendar{padding-left:30px; padding-right:30px;}#calendar .col-sm-6{ padding-left:15px; padding-right:15px;}#foot{ padding-bottom:50px; }.modal-footer{padding-bottom:50px; }}
@media (max-width: 567px) {#menu01{padding:10px 15px 10px 15px;}#text{text-align: left;  font-size:10pt}}