@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: "Noto Sans TC", sans-serif;
	max-width: 2000px;
	overflow: hidden;
  color:#363636;
  background: url("../images/bg.webp") center top repeat-y;
}

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

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

.nav {  margin:0 auto; }
.nav li {  
    display:inline-block; font-weight: 500; font-size: 22px ;letter-spacing: 2px;
    color:#e2ebeb; margin: 0 12px; 
}
.nav li a { display:block; width:100%; height:100%; text-align: center; text-decoration: none; color:#e2ebeb; background: #099496; border-radius: 20px 20px 0 0; padding:12px; }
.nav li a:hover,.nav li a.active { color:#ffffff; background: #575fb0; }

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

.main-content {
  position: relative;
  z-index: 2;
}
.main-content-xs { display: none;}

h1 {
  position: absolute;
  color: white;
  font-size: 90px;
  font-weight: 800;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.5); /* 讓字在影片上更清晰 */
  top: 50%;
  margin-left: 70px;
  z-index: 800;
}

h1 span {
  font-size: 50px;
  font-weight: 400;
  padding-left: 12px;
}

h1 span em {
  font-style: normal;
  border:2px solid #ffffff;
  border-radius: 0 15px;
  padding:0 8px;
  margin-right: 6px;
}

.nz-logo {
  position: absolute;
  top: 40px;  
  left: 50px;  
  background: #000000;
  padding:15px;
  border-radius: 0 0 30px 30px;
  z-index: 999;
}

.slick-box  { position: relative;}
.rslides p {
  position: absolute; left: 70px; bottom: 40px; font-size: 20px;  font-weight: 500;
  padding: 0 5px; color:#ffffff; line-height: 1.3em;
}
.rslides p span { font-weight: 600; padding-left: 21px; display: block; font-size: 18px; }
.rslides p::before { 
	content: url('../images/area_icon.webp');
	padding-right:6px;
}

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

  h1 { font-size: 80px;  font-weight: 700; }
  h1 span { font-size: 40px; }
  .nz-logo figure { width: 150px;}
}

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

  h1 { font-size: 70px;  }
  h1 span { font-size: 30px; }
  .nz-logo figure { width: 120px;}
}

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

  h1 { font-size: 65px;  }
  .nz-logo figure { width: 100px;}
  .rslides p { bottom: 20px; }
}
@media screen and (max-width:768px)  {
  h1 { top:40%; margin-left: 40px;}
  .nz-logo { padding:8px; border-radius: 0 0 15px 15px;}
  .nz-logo figure { width: 80px;}
  .rslides p { left: 40px; }
}

@media screen and (max-width:650px)  {
  h1 { font-size: 50px; top:45%;}
  h1 span { font-size: 22px; }
  .nz-logo figure { width: 70px;}
  .rslides p { font-size: 15px; bottom: 10px; }
  .rslides p span { font-size: 13px; }
}

@media screen and (max-width:500px)  {
  .slider-box { display: none;}
  header h1 {
      text-indent: 101%;
      overflow: hidden;
      white-space: nowrap;
      position: absolute;
  }
  .main-content-xs { display: block;}
  .nz-logo {left: 10px;  }
}

@media screen and (max-width:400px)  {
  .nz-logo figure { width: 50px;}
}
/*-----*/

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

h2.subtitle { 
  font-size: 34px; font-weight: 500;  letter-spacing: 1px; color: #3c4c80; padding:60px 0 20px 0;
  text-align: center;  border-bottom:6px solid #7e8fc0 ; text-align: right; max-width: 50%; 
}
h2.subtitle span { 
  font-size: 50px;  border: 3px solid #7e8fc0; border-radius: 10px; padding:0 5px; margin-right: 6px;
}

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

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

.tour-title::before { 
  content: url('../images/tour_icon.webp');
	padding-right:6px;
 }
.tour-title { margin:40px 0 10px 0;}
.tour-title span { font-size: 22px; font-weight: 500; color:#239394; padding: 5px 20px 5px 0px; line-height: 1.8em;}

.tour-list li  { 
  color: #000000;  
  line-height: 1.8em;
  margin:10px 0;
  padding:6px 8px;
  background: #ffffff;
}

.tour-list li a { 
  color: #000000; text-decoration:none; width: 100%; height:100%; display:flex; overflow:hidden;   
}

.name_l { width:80%;  }
.price_r { width:20%;  text-align: right; color: #000000; font-size: 13px; font-weight: 600;}
.price_r span { font-size: 24px; font-weight: 800; color:#de6014;  padding:0 2px; font-family: "Mukta Mahee", sans-serif;}

.tour-list li a h3.name_l { font-size: 18px; font-weight: 500;  font-family: "Noto Sans TC", sans-serif; }
.tour-list li a h3.name_l span { font-style: normal; font-size: 18px; font-weight: 800; font-family: "Mukta Mahee", sans-serif; color:#de8c4a; text-decoration: none; padding-left:6px; }
.tour-list li a h3 span:empty { display:none;}

/*---viedo---*/

.bg-video { background: url("../images/video-bg.webp") right bottom no-repeat; min-height: 860px; margin-top: 70px; }
.bg-video-frame { background: #b8bdc9 ; padding-top:30px; max-height: 500px; }
.subtitle-video { 
  padding-left: 32%; background: url("../images/video-line.webp")  top center no-repeat;
  min-height: 64px; padding-bottom: 50px; 
  font-size: 40px; font-weight: 600; color:#ffffff;
}
.subtitle-video span { font-size: 32px; padding-right: 8px; }
.video-ct { text-align: center; max-width: 1100px; margin:0 auto; margin-bottom: 100px;}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;  } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*-------*/

.north-content { 
  background: #dbdde7 url("../images/bg-north.webp") left top no-repeat; 
  border-radius: 0 170px 0 0; padding:10px 100px 80px 100px;
}
.south-content { 
  background: #d6e3e9 url("../images/bg-south.webp") right top no-repeat; 
  border-radius: 0 170px 0 0; padding:10px 100px 80px 100px;
}

.content-box { display: flex; margin-top: 50px; align-items:center; align-content:center;}

.map { width: 20%;}
.north-info,.south-info { width: 30%; margin:0 4%; background: #f6f6f6;  border: 6px solid transparent; padding:20px 30px 40px 30px;}
.info-pic { width: 42%; }
.info-pic img {  border-radius: 93px 216px 0px 100px; }
.north-content .info-border { 
  border-image: linear-gradient(to bottom right, #bcc7e6 0%, #ffffff 100%);
	border-image-slice: 1;
}
.south-content .info-border { 
  border-image: linear-gradient(to bottom right, #7ec1da 0%, #ffffff 100%);
	border-image-slice: 1;
}

.north-info p,.south-info p {  font-size: 18px; font-weight: 500; color:#333333; line-height: 1.6em; padding:6px 0;}
.north-info figure,.south-info figure { padding:20px 0 6px 0;}
.north-title { 
  font-size: 50px; font-weight: 500; color: #e7ecf8; margin-top: -50px;
  background: #4e66ac; text-align: center; max-width: 230px; 
  border-radius: 25px; letter-spacing: 1px; line-height: 60px;
  }
.south-title { 
  font-size: 50px; font-weight: 500; color: #e7ecf8; margin-top: -50px;
  background: #017eae; text-align: center; max-width: 230px; 
  border-radius: 25px; letter-spacing: 1px; line-height: 60px;
  }
.north-title span,.south-title span { font-size: 35px; font-weight: 500; }

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

.spots-box { margin-top: 90px; padding-bottom: 70px;}

.slick-box { 
  background: #dbdde7;
  border-radius: 70px; 
 }

#south .slick-box { 
  background: #d6e4ea;
 }

.slick-box .pic img { border-radius: 70px 70px 70px 0; margin-bottom: 25px; }

.slick-box .pic figcaption span::before { 
  content: url('../images/spot_icon.webp');
	padding-right:6px; 
}

#south .slick-box .pic figcaption span::before { 
  content: url('../images/spot_icon02.webp');
}

.slick-box .pic figcaption span { 
  background: #fffbf1 ;
  border-radius:28px;
  font-size: 30px;
  font-weight: 600;
  color:#3c4c80;
  line-height: 1.8em;
  padding:10px 16px;
  margin:0 25px;
}

.slick-box .pic figcaption span em { 
  font-size: 20px;
  font-weight: 500;
  font-style: normal;
  padding:0px 4px;
}


#south .slick-box .pic figcaption span { 
  color:#005c87;
}

.slick-box p.txt { 	
  font-size: 18px;
  font-weight: 400;
  color:#0b0b0b;
  line-height: 1.8em;
  padding:20px;
  margin:0 15px;
  min-height: 260px;
}

* { 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 screen and (max-width:1400px)  {

  .subtitle-video { padding-left: 20%; }
  .north-content,.south-content { padding:10px 30px 80px 30px; }

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

  .map { width: 18%;}
  .north-info,.south-info { width: 38%; margin:0 2%;  padding:20px 15px 20px 15px; }
  .info-pic { width: 40%; }
  .info-pic img {  border-radius: 43px 120px 0px 50px; }
  .north-info figure,.south-info figure { padding:20px 0 6px 0;}
  .north-info p,.south-info p {  font-size: 16px; }
  .north-title,.south-title { font-size: 44px; }
  .north-title span,.south-title span { font-size: 28px;  }
}

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

  .subtitle-video { padding-left: 2%; }
  .bg-video { min-height: auto; padding-bottom: 300px;}

}

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

  .bg-video { min-height: auto; padding-bottom: 230px;}
  .content-box { flex-wrap: wrap; }
  .map { width: 25%;}
  .north-info,.south-info { width: 69%; margin:0 3%; }
  .info-pic { width: 100%; margin-top: 40px; text-align: center; order:3; }
  .south-content { background: #d6e3e9 url("../images/bg-south.webp") left top no-repeat; }
  }

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

  #main-nav { display: none;}
  .first { padding-top:30px; margin-top: -30px;}
  h2.subtitle { padding-top:40px;}
  .bg-video { padding-bottom: 140px;}
  .map { width: 34%;}
  .north-info,.south-info { width: 60%; }
  .north-content,.south-content { border-radius: 0 80px 0 0;}
  .name_l { width: 70%; }
  .price_r { width: 30%; align-self:flex-end;}
}

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

  .subtitle-video { padding-left: 3%;  font-size: 34px;}
  .subtitle-video span { font-size: 26px;}
  .bg-video { padding-bottom: 50px;}
  .map { width: 38%;}
  .north-info,.south-info { width: 58%; margin:0 2%;}
  .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)  {

  h2.subtitle { font-size: 30px; max-width: 70%; }
  .subtitle-video span { display: block; line-height: 2em;}
  .bg-video { padding-bottom: 10px;}
  .north-content,.south-content { padding:10px 15px 80px 15px; }
  .content-box { flex-direction: column;}
  .map { width: 70%; order:3; margin-top: 20px;}
  .north-info,.south-info { width: 100%; margin:0 0%; order:1; }
  .info-pic { width: 100%; margin-top: 40px; text-align: center; order:2; }
	.tour-list li  {font-size:17px; } 
  .slick-box .pic figcaption span { font-size: 24px; }
  .slick-box p.txt {  font-size: 17px; padding:20px 10px;}
  .slick-box .pic figcaption span em { font-size: 18px;}
}


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

  .slick-box .pic figcaption span { font-size: 21px; margin:0 15px; }
  .slick-box .pic figcaption span em { font-size: 14px; padding:0px 2px;}
}