@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,
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%;}

* { box-sizing: border-box; }
  
.left { float: left;}
.right { float: right;}

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

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

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

#web-outer {
	max-width: 2000px;
	overflow: hidden;
	_overflow: none;
}

header {     
  text-align: center;
  margin-top: 30px;
}

header h1 {
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
}

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

.bg01 { background: #40125a url("../images/bg01.jpg") left top no-repeat; }
.bg02 { background: #281d45 url("../images/bg02.jpg") left top no-repeat; }
.icon { text-align: center; margin-bottom: 10px;}
.s-title { 
  text-align: center; background: url("../images/line.png") center bottom no-repeat; 
  padding:0 0 14px 0; font-family: 'Noto Serif TC', serif; font-weight: 600; letter-spacing: 1px;
  font-size: 1.1em; margin-bottom: 18px;
}
.en { text-align: center; }

/*body section#topheader::before, body section#topheader::after,
html section#topheader::before,
html section#topheader::after {
  content: "";
  display: table;
}
body section#topheader::after,
html section#topheader::after {
  clear: both;
}*/

.myCarousel h2 { text-align: center; }
.myCarousel {
    position: relative;
    overflow: hidden;
  }
  .myCarousel .slides-wrapper .slides {
    position: absolute;
  }
  .myCarousel .slides-wrapper .slides.content {
    height: 100%;
    width: 45%;
    top: 0;
    left: 0;
  }
  .myCarousel .slides-wrapper .slides.content .bodytext {
    padding: 0 50px;
    position: relative;
    top: 45%;
    transform: translateY(-50%);
    color:#ffffff;
  }
  .myCarousel .slides-wrapper .slides.content .title {
    font-size: 3.8em;
    margin: 0;
    margin-bottom: 20px;
    font-family: 'Noto Serif TC', serif; letter-spacing: 1px;
    background:linear-gradient(to bottom, #ffffff, #d1efed);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
  .myCarousel .slides-wrapper .slides.content .subtitle {
    font-size: 0.95em;
    line-height: 1.7;
    padding:0 20%;
  }
  .myCarousel .slides-wrapper .slides.content .subtitle-long {
    padding:0 8%;
  }
  .myCarousel .slides-wrapper .slides.content .subtitle span {
    display: block;
  }
  .myCarousel .slides-wrapper .slides.content .subtitle-long span {
    margin-bottom:12px;
  }

  .myCarousel .slides-wrapper .slides.content .photo-xs {
    display: none;
  }

  .myCarousel .slides-wrapper .slides.photo {
    height: 100%;
    width: 55%;
    top: 0;
    right: 0;
  }
  .myCarousel .slides-wrapper .slides.photo .image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }
  .myCarousel .slides-wrapper .slides.title {
    height: 10%;
    width: 45%;
    bottom: 0;
    left: 0;
  }
  .myCarousel .slides-wrapper .slides.title .bodytext {
    padding: 0 50px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding-bottom:20px;
  }
  .myCarousel .slides-wrapper .slides.title .title {
    margin: 0;
    color: #fff;
    margin-bottom: 5px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 2em;
    letter-spacing: 2px;
  }
  .myCarousel .slides-wrapper .slides.title .data {
  font-size: 1.8em;
  margin-bottom: 12px;
}

  .myCarousel a { text-decoration: none;  }
  .myCarousel .slides-wrapper .slides.title .link {
    position: relative;
    color: #fff;
    text-transform: uppercase;
    font-size: 1em;
    letter-spacing: 2px;
    margin-top: 2px;
    float: right;
  }
  .myCarousel .slides-wrapper .slides.title .link:after {
    content: "";
    position: absolute;
    top: 0px;
    right: -15px;
    width: 7px;
    height: 7px;
    transform: rotate(135deg);
    border: 1px solid;
    border-left: 0;
    border-bottom: 0;
    transition: top 0.3s;
  }
  .myCarousel .slides-wrapper .slides.title .link:hover span {
    opacity: 0.5;
  }
  .myCarousel .slides-wrapper .slides.title .link:hover:after {
    /*right: -18px;*/
    top:4px;
  }
  .myCarousel .slides-wrapper .slides.title .purple {
    background-color:#7d4697;
  }
  .myCarousel .slides-wrapper .slides.title .purple .title,
  .myCarousel .slides-wrapper .slides.title .purple .link {
    color: #fff
  }
  .myCarousel .slides-wrapper .slides.title .blue {
    background-color: #524199;
  }

  .myCarousel .slides-wrapper .slides.price {
    height: 20%;
    width: 25%;
    bottom: 0;
    left: 55%;
    background-color: #333;
  }
  .myCarousel .slides-wrapper .slides.price > * {
    transition-delay: 0.2s;
  }
  .myCarousel .slides-wrapper .slides.price .bodytext {
    padding: 0 50px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  .myCarousel .slides-wrapper .slides.price .bodytext span {
    display: block;
    color: #fff;
  }
  .myCarousel .slides-wrapper .slides.price .bodytext .title {
    text-transform: uppercase;
    margin-bottom: 10px;
  }
 /* .myCarousel .slides-wrapper .slides.price .bodytext .title.purple {
    color: #62247f;
  }
  .myCarousel .slides-wrapper .slides.price .bodytext .title.blue {
    color: #524199;
  }*/
  .myCarousel .slides-wrapper .slides.price .bodytext .label {
    font-size: 2em;
  }
  .myCarousel .slides-wrapper .slides.counter {
    position: absolute;
    top: 40%;
    right: 0;
    width: 50px;
    height: 50px;
    background-color: #fff;
    color: #333;
    line-height: 50px;
    text-align: center;
    font-size: 12px;
  }
  .myCarousel .slides-wrapper .counter-content {
    position: absolute;
    top: 40%;
    margin-top: 50px;
    right: 0;
    width: 50px;
    background-color: #fff;
  }
  .myCarousel .slides-wrapper .counter-content hr {
    position: relative;
    display: block;
    transform: rotate(-45deg);
    width: 20px;
  }
  .myCarousel .slides-wrapper .counter-content span {
    display: block;
    text-align: center;
    line-height: 50px;
    color: #333;
    font-size: 12px;
  }
  .myCarousel #arrows {
    position: absolute;
    top: 40px;
    left: 0;
    padding: 20px 0 0 50px;
  }
  .myCarousel #arrows span {
    margin: 0 10px;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 1;
    font-weight: bold;
  }
  .myCarousel #arrows .prev,
  .myCarousel #arrows .next {
    width: auto;
    height: auto;
    /*border: none !important;*/
    text-transform: uppercase;
    font-size: 13px;
    line-height: 1;
    font-weight: bold;
    color: #fff;
    border: 1px solid #fff;
    padding:6px 8px;
    border-radius: 10px;
    margin-right: 12px;
  }
  .myCarousel #arrows .prev.disable,
  .myCarousel #arrows .next.disable {
   /* display: none;*/
  }
  .myCarousel #arrows .prev:hover,
  .myCarousel #arrows .next:hover {
    opacity: 0.5;
  }

  @media only screen and (max-width:1100px) 
  {  
    .myCarousel .slides-wrapper .slides.content .subtitle-long {
      padding:0 5%;
    }  
    .myCarousel .slides-wrapper .slides.title .link {
      float: none;
    }  
    .myCarousel .slides-wrapper .slides.title {
      text-align: center;
    } 
    .myCarousel .slides-wrapper .slides.title .data {
      margin-top: 12px;
    }
    .myCarousel .slides-wrapper .slides.photo {
      width: 50%;
    }
    .myCarousel .slides-wrapper .slides.content {
      width: 50%;
    }
    .myCarousel .slides-wrapper .slides.title {
      width: 50%;
    }  
  }
  @media only screen and (max-width:960px) 
  {  
    .myCarousel .slides-wrapper .slides.content .bodytext {
      padding: 0 20px;
    }  
    .myCarousel .slides-wrapper .slides.content .subtitle {
      padding:0 10px;
    }  
    .myCarousel .slides-wrapper .slides.content .subtitle-long {
      padding:0 0;
    }  
  }
  @media only screen and (max-width:850px) 
  {
    .myCarousel .slides-wrapper .slides.content .title {
      font-size: 3.2em;
    }   
  }
  @media only screen and (max-width:710px) 
  {
    .myCarousel .slides-wrapper .slides.content .title span {
      display: block;
      margin-bottom: 8px;
      font-size: 1.2em;
      letter-spacing: 1px;
    }   
  }

  @media only screen and (max-width:650px) 
  {
    .myCarousel {
      height: 1000px;
    }
    .myCarousel .slides-wrapper .slides.content {
      width: 100%;
    }
    .myCarousel .slides-wrapper .slides.title {
      width: 100%;
    }  
    .myCarousel .slides-wrapper .slides.content .title span {
      display: inline;
    }
    .myCarousel .slides-wrapper .slides.photo {
      display: none;
    }
 .myCarousel .slides-wrapper .slides.content .photo-xs {
      display: block;
    }   
    .myCarousel .slides-wrapper .slides.counter {
      display: none;
    }
    .myCarousel .slides-wrapper .counter-content {
      display: none;
    }
    .icon { display: none;}  
    .myCarousel #arrows {
      top: 20px;
      left:50px;
    }
    .myCarousel .slides-wrapper .slides.title .bodytext {
      margin-top:10px;
    }
    
  }
  @media only screen and (max-width:500px) 
  {
    .myCarousel {
      height: 900px;
    }
  }
  @media only screen and (max-width:420px) 
  {
    .myCarousel .slides-wrapper .slides.content .title {
      font-size: 2.6em;
    }   
  }
  @media only screen and (max-width:350px) 
  {
    .myCarousel .slides-wrapper .slides.content .title {
      font-size: 2.4em;
    } 
    .myCarousel {
      height: 850px;
    }
    .myCarousel #arrows {
      left:20px;
    }
  }

/*------------*/


.first { padding-top:130px; margin-top: -20px; }
.second { padding-top:135px; margin-top: -135px;}

.bg-main { background: url("../images/bg-main.jpg") center top repeat-y;  }
#tour { background:url("../images/bg-bottom.png") center bottom no-repeat; padding-bottom: 150px ; clear: both; overflow: auto;}

.row { max-width: 960px; margin:0 auto; }
 
.subtitle {  background:url("../images/bg-subtitle.png") center center no-repeat; padding-top:20px; margin-bottom: 10px; text-align: center;}

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

.sp-box {   margin:0 auto; max-width: 1740px; /*max-width: 1100px;*/  
  display:flex; flex-wrap: wrap;  justify-content:center;  
  margin-bottom: 120px; padding-left: 1%; 
 }
.sp-tour { flex:0 0 31%; margin:15px 1%; /*flex:0 0 48%;*/  align-content: stretch; align-items:center;  }
.sp-tour a { text-decoration: none; border:1px solid #caf6fa; width: 100%; height: 100%; display: block;position: relative; background-color: #382a5c;}

.sp-ct-in { margin:3px; display: flex; flex-direction: column; }
.sp-tour-name { 
    color:#ffffff; font: 500 18px 'Noto Serif TC', serif;  line-height: 1.6em; text-align: left; padding:10px 20px;
}
.sp-city { text-align: center; font: 600 15px 'Noto Serif TC', serif; background:#8e0993 ; border-radius: 0 25px 0 0; color:#fff; padding:4px 18px 4px 8px; margin-right: 8px; position: absolute; top:0; left: 0;}
.notice { text-align: left; padding-left: 20px; letter-spacing: 1px; }
.notice span { border:1px solid #b682db; padding:3px 4px; border-radius: 10px; font: 600 14px 'Noto Serif TC', serif ; color:#d89aff;  display: inline-block; margin-bottom: 6px; margin-right: 5px; }
.tour-info-list { margin:0px 0px 60px 0px; padding:8px 10px; box-sizing: border-box; }
/*.sp-tour:first-child .tour-info-list { margin-top:29px; }*/
.tour-info-list li { 
    font: 600 14px "微軟正黑體" ; color:#ffffff; line-height: 1.6em;
    padding-left: 22px; text-indent: -22px; 
    text-align: left;
}
.tour-info-list li::before {
    content: url("../images/icon01.png");
    font-size:16px;
    padding-right: 6px;
    padding-top:6px;
}
.tour-info-list li span { color:#a4f8ff;}

.tour-price { color: #ffffff; font: 600 14px "微軟正黑體" ; text-align: center; background: url("../images/price-deco01.png") center center no-repeat; line-height: 40px; margin-top:20px; position:absolute;  bottom:0; left:0; right:0; }
.tour-price span {  color:#d89aff;  font: 600 32px 'Roboto', sans-serif; ; font-family: 'Barlow', sans-serif; }

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

/*.ct-box { max-width: 960px; margin:0 auto; clear:both; overflow: hidden; }

.main-tour a { text-decoration: none; display:flex; flex-wrap: nowrap; max-width: 960px; margin:0 auto; margin-bottom: 20px;  }

.ct55 {  flex:0 0 52%;  justify-content:flex-start; align-items:flex-start;  align-content: stretch; padding-right:10px; }
.ct45 {  flex:0 0 48%;  justify-content:flex-start; align-items:flex-start;  align-content: stretch; }


.ct-in { background: url("../images/tour-deco01.png") left top no-repeat;  margin-left:20px; margin-top: 10px; }
.city  { text-align: left; margin-left: 70px; font: 600 15px "微軟正黑體"; background:#edc0f3 ; border-radius: 8px 0 0 0; color:#7a119c; padding:4px 8px;}
.tour-name { 
    color:#f6f6f6; font: 600 20px "微軟正黑體" ; line-height: 1.6em; text-align: left; padding:10px 20px;  border-bottom: 4px solid #b65ad0;
}
.tour-name span { color:#e9bc76; font: 600 15px "微軟正黑體" ; padding-left: 6px;}*/


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

.tour-box { padding-top:20px; padding-bottom: 60px; }
.title-list { text-align: center; padding-bottom: 10px;} 
.tour-list { margin-top:5px; text-align: left; }

.tour-list li  { 
    font: 500 16px 'Noto Serif TC', serif; ; color: #ffffff; line-height: 1.8em;
    overflow: auto;
    margin-bottom:10px; 
    padding:7px 20px;
}

.tour-list li a { 
    color: #ffffff;  text-decoration:none; display: block; width: 100%; height:100%;  
    padding-bottom:6px;  border-bottom: 1px solid #9aced3;    
}
.tour-list li a span.name_l u { font-style: normal; font: 600 15px "微軟正黑體" ; color:#28eaf1; text-decoration: none; padding-left:6px; }

/*.tour-list li a strong { display: inline-block; font: 600 15px "微軟正黑體"; background: #edc0f3; border-radius: 8px 0 0 0; color:#7a119c; padding:3px 5px;margin-right: 8px;text-align: center; width:70px; }

.tour-list li a em { display:block; text-indent: 60px;}
.tour-list li a em span { font-style: normal; font: 600 14px "微軟正黑體" ; display:inline; color:#e2dfdc; line-height: 1.8em; padding-right: 4px; text-indent: 70px;}

.tour-list li a em span::before {
    content: url("../images/icon02.png");
    width:13px ;
    padding: 0 4px 0 6px ;        
 }

.tour-list li a span.price_r span { font: 600 22px "微軟正黑體"; color:#ff57f9; padding:0 2px; font-family: 'Barlow', sans-serif; }*/

.name_l { width:100%; display: inline-block; }
/*.price_r { width:17%; display: inline-block; text-align: right; color: #ffffff; font: 600 13px "微軟正黑體";}*/

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

@media only screen and ( max-width:1400px) 
{ 
    .mainpic { padding-bottom: 20px;}
}
@media only screen and ( max-width:1024px) 
{ 
    .mainpic { padding-bottom: 0px;}
    .tour-name span { display:inline;}        
    .item {  padding-bottom:20px;} 
    .sp-tour { flex:0 0 45%;}
}

@media only screen and ( max-width:850px) 
{ 
    .tour-list li a em { text-indent:0px; line-height: 1.6em;} 
    .sp-tour { flex:0 0 48%;}
}

/*---平板-----*/

@media only screen and ( max-width:768px) 
{ 
    #main-nav { display: none;}

    /*#main { margin-top:800px;}*/
    .sp-box { flex-wrap: wrap; }
    .sp-tour { flex:0 0 86%; margin:0 auto; justify-content:center; margin-bottom: 30px; }

    .row { padding:20px 0 ;  }
    .tour-info-list { margin:6px 0px 60px 0px; }
    .tour-name { text-align: center; }
    .tour-pic { text-align: center;}
    .tour-info-list li { text-align: center; }
    .tour-info-list li  { text-align: left; }
    .name_l { width: 100%; }
    .price_r { display: block;  width: 100%; }
}


/*---手機版-----*/

@media only screen and (max-width:480px) 
{   
    .tour-name { text-align: left;  }
    .tour-info-list li { font-size: 15px; text-align: left;  }  
    .tour-list li  { font-size: 16px; font-weight: 400;  }
    .tour-list li a em { font-size: 16px; }   
    .tour-list li a em span {  display:block; padding-right: 0px; text-indent: -18px; padding-right: 18px; margin-left: 16px; font-size:14px; line-height: 22px;}      
}