@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,article,figure,
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: hidden;
  zoom: 1;
}

img { max-width:100%;}

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

#web-outer {
    font-family: "微軟正黑體";
	max-width: 2000px;
	overflow: hidden;
    background:#e2eff3;
}

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

.hero-section {
  position: relative;
  width: 100%;
  height: 100vh; /* 影片全螢幕高度 */
  margin-left: 10%;
  margin-top:40px;
  overflow: hidden;
}

.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 禁止滑鼠操作 (避免點到影片) */
  overflow: hidden;
  border-bottom-left-radius: 175px; /* 左下角圓弧 */
}

.video-background iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;   /* 多留一點，避免黑邊 */
  height: 120%;
  transform: translate(-50%, -50%);
}

.hero-content {
  position: absolute;
  bottom: 140px;   /* 距離底部 */
  left: 50px;     /* 距離左側 */
  z-index: 2;
}

.hero-content h1 {
  color: white;
  font-size: 90px;
  font-family: "微軟正黑體";
  font-weight: bold;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.5); /* 讓字在影片上更清晰 */
}

.hero-content h1 span {
  font-size: 30px;
  font-weight: 400;
  display: block;
  padding-top: 20px;
}
.sydney-logo {
  position: absolute;
  top: 40px;   /* 距離底部 */
  left: 0;     /* 距離左側 */
  background: #e2eff3;
  border-radius: 0 0 80px 0;
  padding:35px 35px 25px 35px;
  z-index: 999;
  text-align: center;
}
/*---平板-----*/
@media screen and (max-width:1400px)  {

.hero-section {  margin-left: 5%;  aspect-ratio: 16 / 9;  /* 保持16:9比例 */  height: auto; }
.sydney-logo {  padding:35px 35px 10px 35px; max-width: 190px;}

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

  .hero-content h1 { font-size: 70px; }
  .hero-content h1 span { font-size: 24px; }
  .hero-content { bottom: 80px; }
  .video-background { border-bottom-left-radius: 120px; }
}
@media screen and (max-width:900px)  {
  .sydney-logo {  border-radius: 0 0 40px 0; padding:25px 15px 10px 15px;  max-width: 150px; }
  .hero-content { bottom: 60px; left: 40px;}
  .hero-content h1 span { padding-top: 15px; }
}

@media screen and (max-width:768px)  {
  .sydney-logo {   max-width: 120px; padding:15px 15px 10px 15px;  }
  .hero-content h1 { font-size: 55px; }
  .hero-content h1 span { font-size: 18px; padding-top: 10px;}
  .hero-content { bottom: 40px; }
}

@media screen and (max-width:600px)  {
  .hero-content h1 { font-size: 40px; }
  .hero-content { bottom: 30px; left: 20px; }
  .video-background { border-bottom-left-radius: 60px; }
  .sydney-logo {  max-width: 100px; padding:15px 8px 8px 8px; }
}

@media screen and (max-width:480px)  {
  .hero-content h1 { font-size: 36px; }
  .hero-content h1 span {  font-size: 15px; padding-top: 6px;  }
  .hero-content { bottom: 20px; }
  .hero-section {  margin-left: 3%; }
  .sydney-logo {  max-width: 80px;  }
  }


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

#main-nav{
    width: 100%;
    z-index: 990;  
    background:#e2eff3;
    margin:0 auto;
    padding:12px 0;   
}
 
 #block_menu {
     text-align: right ; 
     font-weight: 600;
     overflow: hidden;
 }
 
 .sticky {
     top:40px;
 }

.nav {  margin:0 auto; }
.nav li {  
    display:inline-block; font: 900 22px "微軟正黑體"; letter-spacing: 1px;
    color:#4b4e50; margin: 0 12px; 
}
.nav li a { display:block; width:100%; height:100%; text-align: center; text-decoration: none; color:#4b4e50;  border: 1px solid #e2eff3;   border-radius: 28px 28px; padding:6px 12px;}
.nav li a:hover,.nav li a.active { color:#004b76; border: 1px solid #027088; background: #E2EFF3;
background: linear-gradient(0deg,rgba(226, 239, 243, 1) 0%, rgba(200, 240, 252, 1) 100%); }


/*-----*/

.first { padding-top:100px; margin-top: -100px;}

h2.subtitle { 
    background: url("../images/subtitle.webp") center center no-repeat; 
    text-align: center;  padding:30px 0;
}
h2.subtitle span { 
  background:linear-gradient(90deg,rgba(6, 25, 62, 1) 0%, rgba(35, 81, 145, 1) 50%, rgba(6, 25, 62, 1) 100%);  
  background-clip: text; color: transparent; font-size: 50px; font-weight: 500;  letter-spacing: 1px;  
}
.bg-tour { background: #f3fcff url("../images/bg-tour.webp") center center no-repeat; border-radius: 0 175px 0 0; padding:60px 0;  }

/*----tour-list---*/

.tour-box { max-width: 1100px; margin: 0 auto; padding:30px 15px 30px 15px;}

.tour-title { margin:50px auto 16px auto; text-align: center;}
.tour-title:first-child { margin:0px auto 16px auto; }
.tour-title span { font: 500 22px "微軟正黑體"; background:#209ebd; border-radius: 22px 22px; color:#ffffff; padding: 5px 20px 5px 20px; line-height: 1.8em;}

.tour-list li  { 
    font: 700 18px "微軟正黑體" ; color: #000000;  
    line-height: 1.8em;
    border-bottom: 1px dashed #509482;
    margin:8px 0;
    padding:6px 0px;
}

.tour-list li a { 
    color: #000000;  text-decoration:none; width: 100%; height:100%; display:flex; overflow:hidden; text-indent: -28px; padding-left: 30px;
}
.tour-list li a h3.name_l::before {
	content: url('../images/icon02.webp');
	padding-right:6px;
  
}

.name_l { width:80%;  }
.price_r { width:20%;  text-align: right; color: #000000; font: 600 13px "微軟正黑體";}
.price_r span { font: 600 24px "微軟正黑體"; color:#ed5316;  padding:0 2px; font-family: 'Barlow', sans-serif; }

.tour-list li a h3.name_l span { font-style: normal; font: 600 15px "微軟正黑體" ; color:#c06e05; text-decoration: none; padding-left:6px; }
.tour-list li a h3 span:empty { display:none;}

/*---classic-sydney---*/

.classic-header { background: url("../images/sydney-pic.webp") center center no-repeat; padding: 360px 10% 0 60%; }
.classic-subtitle { width:280px; height: 280px; background: #ffffff; border-radius: 50%; text-align: center; padding-top:115px; }
.classic-subtitle span {   
  background:linear-gradient(90deg,rgba(6, 25, 62, 1) 0%, rgba(35, 81, 145, 1) 50%, rgba(6, 25, 62, 1) 100%);  
  background-clip: text; color: transparent; font-size: 50px; font-weight: 500;  letter-spacing: 1px; 
 }
.content-box { display: flex; margin-top: 50px;}
.content-box:last-child { margin-bottom: 100px;}
.bigp { flex:0 0 45%; padding-left: 50px;}
.bigp img { border-radius:85px 235px 12px 156px; }
.classic-spots { flex:0 0 24%; margin: 110px 1% 0 3%; padding:0 25px; background: url("../images/txt-deco.webp") left top no-repeat;  }
.smallp { flex:0 0 28%; margin-top: 100px;}
#classic-sydney h3 { font: 400 40px "微軟正黑體"; color:#026989; margin-bottom: 20px; }
#classic-sydney h4 { font: 400 20px "微軟正黑體"; color:#020202; line-height: 1.8em; }

.left-pic .classic-spots { margin: 80px 3% 0 1%; }
.left-pic .bigp { padding-right: 50px; }

/*----spots----*/

.spots-header { background: url("../images/bg01.webp") top center no-repeat;  }
.spot-subtitle { 
  background: url("../images/subtitle02.webp") center center no-repeat; color: #ffffff;
  text-align: center;  padding:20px 0; font-size: 32px; font-weight: 500;  letter-spacing: 5px; 
}

/*----slick 自訂-----*/

.spots-box { padding-bottom: 70px;}
.slick-box { 
  padding:25px;
  background: #bddce5;  
 }
.slick-box .pic { border-radius: 35px; position: relative;}
.slick-box .pic figcaption span { 
  background: #bddce5 url("../images/txt-deco2.webp") bottom center no-repeat; 
  border-radius:0 35px 0 0;
  font-size: 32px;
  font-weight: bold;
  font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif; 
  color:#005c87;
  line-height: 1.8em;
  padding:16px 22px 16px 0;
  position: absolute; bottom:0;
}

.slick-box p.txt { 	
  font-size: 22px;
  font-weight: 500;
  font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif; 
  color:#0b0b0b;
  line-height: 1.8em;
  padding:20px;
  min-height: 160px;
}

* { box-sizing: border-box; }

.slider {
  width: 100%;
  margin: 20px auto; 
}
.slick-slide { margin: 0px 15px; }

.slick-slide img {
  width: 100%;
  border-radius: 25px;
}

.slick-prev:before,
.slick-next:before {  color: fffff; }

.slick-slide {
  transition: all ease-in-out .3s;
  opacity: 1;
}
.slick-active { opacity: 1; }
.slick-current { opacity: 1; }

@media only screen and ( max-width:600px) 
{ 
  .slick-box p.txt { 	
  position:relative; top:0;
  background:none;
}

}



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

.bigp { padding-left: 0px;}
.bigp img { border-radius:55px 165px 12px 100px; }
.classic-spots { margin: 90px 1% 0 3%;  }

#classic-sydney h3 { font-size:36px; }
#classic-sydney h4 { font-size:18px; }

.left-pic .bigp { padding-right: 0px;}
}

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

.bigp { flex:0 0 41%; }
.bigp img { border-radius:55px 125px 12px 80px; }
.classic-spots { flex:0 0 32%; margin: 50px 0% 0 2%; padding:0 0 0 25px;  }
.smallp { flex:0 0 26%; }

#classic-sydney h3 { font-size:32px; }
#classic-sydney h4 { font-size:17px; }

}

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

    #main-nav { display: none;}
    .first { padding-top:50px; margin-top: 0px;}
    .bg-tour { border-radius: 0 50px 0 0;  }

    .classic-header { background: url("../images/sydney-pic-xs.webp") center center no-repeat; padding: 160px 10% 0 56%; }
    .classic-subtitle { width:200px; height: 200px;  padding-top:80px; }
    .classic-subtitle span {font-size: 40px;}
    .content-box { flex-wrap: wrap; }
    .bigp { flex:0 0 96%; margin-left: 4%; }
    .bigp img { border-radius:55px 205px 12px 140px; }
    .classic-spots { flex:0 0 57%; margin: 30px 1% 0 8%; padding:0 0 0 25px; background: url("../images/txt-deco.webp") left top no-repeat;  }
    .smallp { flex:0 0 34%;}

    .left-pic .classic-spots { margin: 10px 8% 0 1%; }

    .name_l { width: 70%; }
    .price_r { width: 30%;   align-self:flex-end;}
}

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

    .tour-list li a { display: block;}

    .name_l { width: 95%; display: block; }
    .price_r { width: 100%; display: block; padding-top:16px; text-align: right;}
}

/*---手機版-----*/
@media screen and (max-width:480px)  {

  .classic-header { padding: 200px 10% 0 56%; }
  .classic-subtitle { width:160px; height: 160px;  padding-top:65px; }
  .classic-subtitle span {font-size: 35px;}
  .content-box { flex-direction: column;}
  .bigp img { border-radius:55px 125px 12px 80px;  }
  .smallp { max-width: 60%; align-self: flex-end; margin-top: 15px;}
  .left-pic .bigp { order:-1;}
  .left-pic .smallp { order:2; align-self: flex-start; margin-top: 15px; }
  .left-pic .classic-spots { margin: 30px 2% 0 7%;  }
	.tour-list li  {font-size:17px; } 
  .slick-box .pic figcaption span { font-size: 26px; padding:10px 22px 10px 0; }
  .slick-box p.txt {  font-size: 18px;}
}