@charset "UTF-8";
/* Mixin 自訂函式 by Lu Ming Shan v20180301 */
/* 變數設定 */
/* 自訂共用樣式 by Lu Ming Shan v20180226 */
.mAuto {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.mpReset {
  margin: 0;
  padding: 0; }

.ulReset {
  margin: 0;
  padding: 0;
  list-style-type: none; }

/*柵欄系統 v20190121*/
.row {
  display: flex; }
  .row .col {
    padding: 1.0416%;
    flex-grow: 1;
    flex-basis: 0; }
    .row .col.half {
      width: 50%;
      flex: none; }
    .row .col.half-five {
      width: 41.6666%;
      flex: none; }
    .row .col.half-four {
      width: 33.3333%;
      flex: none; }
    .row .col.half-three {
      width: 25%;
      flex: none; }
    .row .col.half-two {
      width: 16.6666%;
      flex: none; }
  @media (max-width: 660px) {
    .row {
      display: block; }
      .row .col.half, .row .col.half-five, .row .col.half-four, .row .col.half-three, .row .col.half-two {
        width: auto; } }
  .row.keep-flex {
    display: flex; }
    .row.keep-flex .col.half {
      width: 50%; }
    .row.keep-flex .col.half-five {
      width: 41.6666%; }
    .row.keep-flex .col.half-four {
      width: 33.3333%; }
    .row.keep-flex .col.half-three {
      width: 25%; }
    .row.keep-flex .col.half-two {
      width: 16.6666%; }

/* BODY */
body {
  position: relative;
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;
  overflow: auto;
  right: 0;
  background-color: #febd2e;
  background-position: 50% 60px;
  background-repeat: no-repeat;
  background-image: url("../../summer_vacation/img/kanban.jpg");
  background-color: #febd2e; }
  @media (max-width: 960px) {
    body {
      -webkit-background-size: 1320px 303px;
      background-size: 1320px 303px; }
      body.showMenu {
        overflow: hidden;
        right: 260px;
        background-position: calc(50% - 260px) 60px; } }
  @media (max-width: 660px) {
    body {
      -webkit-background-size: 960px 220px;
      background-size: 960px 220px; } }
  @media (max-width: 480px) {
    body {
      -webkit-background-size: 640px 147px;
      background-size: 640px 147px; } }

/*讀取效果*/
#loading {
  position: fixed;
  z-index: 3;
  width: 56px;
  height: 56px;
  top: 50%;
  left: 50%;
  margin-top: -28px;
  margin-left: -28px;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
  background-image: url(data:image/gif;base64,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); }

#loading-cover {
  position: fixed;
  width: 100%;
  height: 3px;
  top: 0;
  left: 0;
  z-index: 9; }
  #loading-cover div {
    position: relative;
    width: 0%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #E5005A;
    box-shadow: 0 0 12px #E5005A;
    -webkit-transition: all 100ms ease;
    transition: all 100ms ease;
    z-index: -1; }
  #loading-cover > div.done {
    width: 100%;
    -webkit-transition: all 800ms ease;
    transition: all 800ms ease; }

/*半透明黑色區塊*/
#blackOverlay {
  display: none;
  position: fixed;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMi8zMS8xNdOFLqwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAGElEQVQYlWNkYGBoYCACMBGjaFQh9RQCANyeAJRQ3dKnAAAAAElFTkSuQmCC); }

/* 置中包覆 */
.wrapper {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  position: relative; }
  .lt-ie9 .wrapper {
    width: 960px; }
  .wrapper.error {
    padding-top: 60px;
    font-weight: bold;
    color: #3a80ac; }
    @media (max-width: 960px) {
      .wrapper.error {
        text-align: center; } }
  @media (max-width: 960px) {
    #kanban .wrapper {
      max-width: 660px; } }
  @media (max-width: 660px) {
    #kanban .wrapper {
      max-width: 480px; } }
  @media (max-width: 480px) {
    #kanban .wrapper {
      max-width: 320px;
      height: 100%; } }

/*頁頭*/
header {
  position: relative;
  width: 100%;
  height: 60px;
  background-color: #FFF;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease; }
  header div {
    height: 60px;
    text-align: right; }
    header div > a {
      display: inline-block;
      width: 70px;
      height: 60px;
      background-color: #F4F4F4;
      vertical-align: top;
      line-height: 60px;
      text-align: center;
      margin-right: 1px;
      font-size: 13px;
      cursor: pointer;
      -webkit-transition: all 400ms ease;
      transition: all 400ms ease; }
      @media (max-width: 960px) {
        header div > a {
          width: 60px; } }
      header div > a:hover {
        text-decoration: none;
        background-color: #E9E9E9; }
    header div #goHome {
      display: none; }
      @media (max-width: 960px) {
        header div #goHome {
          display: inline-block; } }

/*頁頭-產品類型切換*/
#productType {
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease; }
  #productType.fixed {
    position: fixed;
    z-index: 3;
    width: 640px;
    bottom: 20px;
    left: 50%;
    margin-left: -320px;
    overflow: hidden;
    border-radius: 60px;
    border: 1px solid #b1b1b1;
    -webkit-box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
    opacity: 0.95; }
    @media (max-width: 960px) {
      #productType.fixed {
        width: auto;
        bottom: 0;
        left: 0;
        margin-left: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        border-right: none;
        border-bottom: none;
        border-left: none;
        border-radius: 0; } }
    #productType.fixed a {
      width: 25%;
      margin-right: 0;
      border-left: 1px solid #b1b1b1; }
      #productType.fixed a:first-child {
        border-left: none; }
  .showMenu #productType {
    left: -260px;
    right: 260px; }
  @media (max-width: 960px) {
    #productType {
      position: fixed;
      height: 50px;
      width: auto;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 3;
      border-top: 1px solid #b1b1b1;
      opacity: 0.95; } }
  #productType a {
    width: 140px;
    font-family: "Noto Sans TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "HeiTi TC", "sans-serif";
    font-size: 18px;
    color: #808080;
    line-height: 58px; }
    @media (max-width: 960px) {
      #productType a {
        font-size: 16px;
        width: 25%;
        margin-right: 0;
        height: 50px;
        line-height: 48px;
        box-sizing: border-box;
        border-left: 1px solid #b1b1b1; }
        #productType a:first-child {
          border-left: none; } }
    @media (max-width: 480px) {
      #productType a {
        font-size: 14px;
        letter-spacing: 0; } }
    #productType a .icon {
      display: inline-block;
      vertical-align: middle;
      width: 30px;
      height: 30px;
      background-image: url(../img/sprite.png); }
      #productType a .icon.flag {
        background-position: -167px -106px; }
        @media (max-width: 960px) {
          #productType a .icon.flag {
            background-size: 500px;
            background-position: -130px -53px; } }
      #productType a .icon.map {
        background-position: -136px -106px; }
        @media (max-width: 960px) {
          #productType a .icon.map {
            background-size: 500px;
            background-position: -99px -53px; } }
      #productType a .icon.airplane {
        background-position: -167px -168px; }
        @media (max-width: 960px) {
          #productType a .icon.airplane {
            background-size: 500px;
            background-position: -192px -53px; } }
      #productType a .icon.hotel {
        background-position: -136px -168px; }
        @media (max-width: 960px) {
          #productType a .icon.hotel {
            background-size: 500px;
            background-position: -161px -53px; } }
      @media (max-width: 960px) {
        #productType a .icon {
          display: none; } }
    #productType a.active, #productType a:hover {
      color: #0054DE; }
      #productType a.active .flag, #productType a:hover .flag {
        background-position: -167px -137px; }
        @media (max-width: 960px) {
          #productType a.active .flag, #productType a:hover .flag {
            background-size: 500px;
            background-position: -130px -84px; } }
      #productType a.active .map, #productType a:hover .map {
        background-position: -136px -137px; }
        @media (max-width: 960px) {
          #productType a.active .map, #productType a:hover .map {
            background-size: 500px;
            background-position: -99px -84px; } }
      #productType a.active .airplane, #productType a:hover .airplane {
        background-position: -167px -199px; }
        @media (max-width: 960px) {
          #productType a.active .airplane, #productType a:hover .airplane {
            background-size: 500px;
            background-position: -192px -84px; } }
      #productType a.active .hotel, #productType a:hover .hotel {
        background-position: -136px -199px; }
        @media (max-width: 960px) {
          #productType a.active .hotel, #productType a:hover .hotel {
            background-size: 500px;
            background-position: -161px -84px; } }

/*頁頭-五福企業標誌*/
#WUFU_Logo {
  width: 147px;
  height: 36px;
  margin: 0;
  background-position: -296px 0;
  background-image: url(../img/sprite.png);
  position: absolute;
  left: 0px;
  top: 11px; }
  @media (max-width: 960px) {
    #WUFU_Logo {
      left: 10px;
      -webkit-background-size: 500px;
      background-size: 500px;
      background-position: 0 0; } }
  #WUFU_Logo a {
    display: block;
    height: 100%;
    text-decoration: none; }

/*主視覺*/
#kanban {
  background-position: top center;
  overflow: hidden; }
  @media (max-width: 960px) {
    #kanban {
      background-size: 1320px 343.75px; } }
  @media (max-width: 660px) {
    #kanban {
      background-size: 960px 250px; } }
  @media (max-width: 480px) {
    #kanban {
      background-size: 639.36px 166.5px; } }
  #kanban .wrapper {
    height: 500px; }
    @media (max-width: 960px) {
      #kanban .wrapper {
        height: 343.75px; } }
    @media (max-width: 660px) {
      #kanban .wrapper {
        height: 250px; } }
    @media (max-width: 480px) {
      #kanban .wrapper {
        height: 166.5px; } }

/*社群按鈕*/
#social {
  display: block;
  position: absolute;
  bottom: 20px;
  left: 110px;
  text-align: left; }
  @media (max-width: 960px) {
    #social {
      bottom: 55px;
      left: -5px; } }
  @media (max-width: 660px) {
    #social {
      bottom: 10px;
      left: 60px; } }
  @media (max-width: 480px) {
    #social {
      bottom: -5px;
      left: 51px; } }
  #social div, #social iframe {
    display: inline-block;
    vertical-align: baseline; }

/*預設隱藏*/
#openMenu {
  position: relative;
  display: none; }

/*漢堡按鈕*/
@media (max-width: 960px) {
  #openMenu {
    display: inline-block; }
    #openMenu span {
      position: absolute;
      display: block;
      width: 50%;
      height: 4px;
      background-color: #0000C8;
      top: 50%;
      left: 50%;
      margin-top: -2px;
      border-radius: 4px;
      margin-left: -25%;
      -webkit-transition: all 400ms ease;
      transition: all 400ms ease; }
      #openMenu span:before, #openMenu span:after {
        position: absolute;
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        background-color: #0000C8;
        border-radius: 4px;
        -webkit-transition: all 600ms ease;
        transition: all 600ms ease; }
      #openMenu span:before {
        top: -10px; }
      #openMenu span:after {
        bottom: -10px; }
    .showMenu #openMenu span {
      background-color: rgba(255, 255, 255, 0); }
      .showMenu #openMenu span:before {
        top: 0;
        transform: rotate(45deg); }
      .showMenu #openMenu span:after {
        bottom: 0;
        transform: rotate(-45deg); } }

/*選單*/
#nav {
  position: absolute;
  bottom: 10px;
  width: 400px;
  right: 0; }
  #nav a {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    text-align: center;
    border: 1px solid #0000C8;
    border-radius: 40px;
    margin: 0px 10px 0px 10px;
    color: #0000C8;
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease; }
    #nav a p {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      margin: 0; }
      #nav a p span {
        width: 20px;
        line-height: 1.2;
        text-align: center;
        font-style: 20px;
        font-family: "Noto Serif TC", Cambria, PMingLiU, "SongTi TC", "serif";
        font-weight: 500; }
    #nav a.active, #nav a:hover {
      background-color: #0000C8;
      text-decoration: none;
      color: #FFF; }
  @media (max-width: 1200px) {
    #nav {
      bottom: 20px; } }
  @media (max-width: 960px) {
    #nav {
      display: block;
      width: 260px;
      position: fixed;
      top: 0;
      bottom: 0;
      right: -270px;
      left: auto;
      z-index: 5;
      border-style: none;
      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
      overflow-y: auto;
      margin: 0;
      background-color: #F0F0F0;
      scrollbar-color: light;
      -webkit-overflow-scrolling: touch;
      -webkit-transition: all 400ms ease;
      transition: all 400ms ease; }
      #nav a {
        display: block;
        width: auto;
        height: 48px;
        line-height: 45px;
        font-size: 18px;
        padding-left: 10px;
        position: relative;
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid #999;
        text-align: left;
        border-radius: 0;
        margin: 0; }
        #nav a p {
          display: inline; }
          #nav a p span {
            display: inline; }
        #nav a:hover, #nav a:active {
          text-decoration: none; }
        #nav a.active {
          text-shadow: none;
          font-weight: normal; }
      .showMenu #nav {
        right: 0; }
      #nav:before, #nav:after {
        display: none; } }

/*產品大分類*/
nav {
  position: relative;
  z-index: 2;
  box-shadow: 0px 12px 12px rgba(152, 125, 0, 0.3);
  /*
  background-image: -webkit-linear-gradient(bottom, rgba(237, 237, 237, 1) 0%, rgba(255, 255, 255, 1) 100%);
  background-image: -o-linear-gradient(bottom, rgba(237, 237, 237, 1) 0%, rgba(255, 255, 255, 1) 100%);
  background-image: linear-gradient(to top, rgba(237, 237, 237, 1) 0%, rgba(255, 255, 255, 1) 100%);
  */
  background-color: #3f3f3f;
  text-align: center;
  white-space: nowrap;
  max-width: 1400px;
  border-radius: 50px;
  overflow: hidden;
  margin: 0 auto 0 auto; }
  nav.fixed {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    width: 100%; }
  @media (max-width: 1200px) {
    nav {
      border-radius: 0px;
      margin: 0 auto 0 auto;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch; } }
  @media (max-width: 960px) {
    nav {
      margin: -45px auto 0 auto; } }
  @media (max-width: 480px) {
    nav {
      margin: 5px auto 0 auto; } }
  nav #areaList {
    margin: 0;
    padding: 0;
    list-style-type: none; }
    nav #areaList li {
      position: relative;
      display: none;
      padding-top: 10px;
      padding-bottom: 5px; }
      nav #areaList li:first-child {
        display: block; }
  nav a {
    display: inline-block;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: 6px;
    min-width: 100px;
    height: 40px;
    line-height: 30px;
    text-align: center;
    box-sizing: border-box;
    border-radius: 50px;
    background-color: #3f3f3f;
    border: 1px solid #616161;
    font-family: "Noto Sans TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "HeiTi TC", "sans-serif";
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
    cursor: pointer; }
    nav a:hover {
      background-color: #ffa200;
      box-shadow: 0px 5px 12px rgba(152, 125, 0, 0.5);
      border: 1px solid #ffa200;
      color: #fff;
      text-decoration: none;
      transform: translateY(-4px); }
    nav a.active {
      background-image: none;
      background-color: #ffa200;
      border: 1px solid #ffa200;
      box-shadow: 0px 5px 12px rgba(152, 125, 0, 0.5);
      color: #fff;
      text-decoration: none; }
    nav a:first-child {
      margin-left: 20px; }
    nav a:last-child {
      margin-right: 20px; }

/*產品小分類*/
#anchor {
  position: relative;
  text-align: center;
  white-space: nowrap;
  max-width: 1150px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 50px;
  background-color: #ffffff;
  box-shadow: 0px 4px 12px rgba(152, 125, 0, 0.5);
  overflow: hidden; }
  @media (max-width: 1150px) {
    #anchor {
      border-radius: 0px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch; } }
  @media (max-width: 960px) {
    #anchor {
      margin-bottom: 30px; } }
  @media (max-width: 480px) {
    #anchor {
      margin-bottom: 20px; } }
  #anchor.fixed {
    position: fixed;
    z-index: 1;
    top: 50px;
    left: 0;
    right: 0;
    width: 100%; }
    @media (max-width: 1400px) {
      #anchor.fixed {
        top: 50px; } }
  #anchor a {
    display: inline-block;
    min-width: 70px;
    height: 44px;
    line-height: 44px;
    padding-left: 10px;
    padding-right: 10px;
    color: #666;
    font-family: "Noto Sans TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "HeiTi TC", "sans-serif";
    font-size: 16px;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease; }
    #anchor a:hover {
      background-color: #FFF;
      color: #639376;
      text-decoration: none; }

/*產品內容*/
.fixed + main {
  margin-top: 50px;
  padding-top: 100px; }
  .fixed + main .error {
    padding-top: 0; }
  @media (max-width: 960px) {
    .fixed + main {
      margin-top: 30px; } }
  @media (max-width: 480px) {
    .fixed + main {
      margin-top: 20px; } }

main {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  padding-bottom: 40px;
  background-color: #febd2e;
  background-repeat: repeat;
  background-position: left top;
  background-size: 50px 50px; }
  @media (max-width: 960px) {
    main {
      padding-bottom: 20px; } }
  @media (max-width: 480px) {
    main {
      padding-bottom: 10px; } }
  @media (max-width: 960px) {
    main .wrapper {
      padding-left: 10px;
      padding-right: 10px; } }
  main section a {
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
    padding-top: 2.583%;
    padding-bottom: 2.083%;
    padding-left: 4.083%;
    margin-top: 40px;
    margin-bottom: 20px;
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
    display: table;
    font-family: "Noto Sans TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "HeiTi TC", "sans-serif";
    border-radius: 5px;
    border: 1px solid #ffffff;
    box-shadow: 0 12px 16px rgba(152, 125, 0, 0.5); }
    @media (max-width: 960px) {
      main section a {
        padding-top: 3.125%;
        padding-bottom: 3.125%;
        padding-left: 3.125%; } }
    @media (max-width: 660px) {
      main section a {
        padding-left: 0%;
        padding-top: 15px;
        padding-bottom: 15px;
        margin-top: 40px; } }
    main section a p {
      margin: 0; }
    main section a div {
      display: table-cell;
      box-sizing: border-box; }
    main section a .productInfo {
      width: 60%;
      padding-right: 4%;
      font-size: 18px;
      line-height: 30px; }
      @media (max-width: 960px) {
        main section a .productInfo {
          width: 53.125%; } }
      @media (max-width: 660px) {
        main section a .productInfo {
          display: block;
          width: auto;
          padding-right: 0;
          margin-left: 30px;
          margin-right: 30px; } }
      main section a .productInfo .area {
        height: 30px;
        border-radius: 12px;
        margin-bottom: 22px;
        background-image: -webkit-linear-gradient(left, #f0f0f0 0%, rgba(240, 240, 240, 0) 100%);
        background-image: -o-linear-gradient(left, #f0f0f0 0%, rgba(240, 240, 240, 0) 100%);
        background-image: linear-gradient(to right, #f0f0f0 0%, rgba(240, 240, 240, 0) 100%); }
        .lt-ie9 main section a .productInfo .area {
          background-color: #F4F4F4; }
        main section a .productInfo .area span {
          display: inline-block;
          vertical-align: top;
          padding: 8px;
          padding-left: 25px;
          padding-right: 25px;
          background-color: #999;
          color: #fff;
          font-size: 15px;
          line-height: 25px;
          border-radius: 50px; }
          @media (max-width: 660px) {
            main section a .productInfo .area span {
              display: block;
              text-align: center;
              font-size: 16px;
              line-height: 30px;
              margin-top: 5%;
              border-radius: 50px; } }
      main section a .productInfo .title {
        color: #333;
        font-size: 18px;
        font-weight: normal;
        margin: 0; }
      main section a .productInfo .event {
        color: #ff3067; }
    main section a .departureDay, main section a .productPrice {
      text-align: center;
      vertical-align: middle;
      width: 20%;
      padding-left: 10px;
      padding-right: 10px;
      border-left: 1px solid #febd2e;
      box-sizing: border-box; }
      @media (max-width: 960px) {
        main section a .departureDay, main section a .productPrice {
          width: 21.875%; } }
      @media (max-width: 660px) {
        main section a .departureDay, main section a .productPrice {
          display: block;
          width: auto;
          padding-left: 15px;
          padding-right: 15px;
          border: none; } }
      main section a .departureDay span, main section a .productPrice span {
        display: inline-block;
        font-size: 20px; }
        @media (max-width: 660px) {
          main section a .departureDay span, main section a .productPrice span {
            font-size: 20px;
            line-height: 25px; } }
        main section a .departureDay span small, main section a .productPrice span small {
          font-family: "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "HeiTi TC", "sans-serif";
          display: block;
          color: #333;
          text-align: left;
          line-height: 200%; }
          @media (max-width: 660px) {
            main section a .departureDay span small, main section a .productPrice span small {
              display: inline-block;
              vertical-align: top;
              line-height: 25px;
              font-size: 20px; }
              main section a .departureDay span small:after, main section a .productPrice span small:after {
                content: '：'; } }
    main section a .departureDay {
      text-align: left; }
      @media (max-width: 660px) {
        main section a .departureDay {
          font-family: "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "HeiTi TC", "sans-serif"; } }
      main section a .departureDay span {
        color: #333;
        font-size: 13px;
        text-align: left; }
        @media (max-width: 660px) {
          main section a .departureDay span {
            font-size: 16px; } }
    @media (max-width: 660px) {
      main section a .productPrice {
        margin-top: 9px;
        height: 60px;
        line-height: 60px;
        background-color: #F0F0F0; } }
    main section a .productPrice span {
      color: #ff3067;
      font-weight: bold; }
    main section a:hover {
      box-shadow: 0 12px 16px rgba(186, 128, 0, 0.5);
      text-decoration: none;
      transform: translateY(-4px); }
  main section:nth-child(1) a .area span {
    background-color: #ffa200; }
  main section:nth-child(2) a .area span {
    background-color: #f49000; }
  main section:nth-child(3) a .area span {
    background-color: #ff7e00; }
  main section:nth-child(4) a .area span {
    background-color: #E76C00; }
  main section:nth-child(5) a .area span {
    background-color: #DF000A; }
  main section:nth-child(6) a .area span {
    background-color: #DC167A; }
  main section:nth-child(7) a .area span {
    background-color: #2098DB; }
  main section:nth-child(8) a .area span {
    background-color: #2EA29A; }
  main section:nth-child(9) a .area span {
    background-color: #558657; }
  main section:nth-child(10) a .area span {
    background-color: #F5AE00; }
  main section:nth-child(11) a .area span {
    background-color: #E76C00; }
  main section:nth-child(12) a .area span {
    background-color: #DF000A; }
  main section:nth-child(13) a .area span {
    background-color: #DC167A; }
  main section:nth-child(14) a .area span {
    background-color: #bb005e; }

/*頁腳*/
footer {
  position: relative;
  background-color: #FFF;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
  font-size: 12px;
  padding-top: 40px;
  padding-bottom: 40px;
  font-family: PMingLiU, "SongTi TC", serif; }
  @media (max-width: 960px) {
    footer {
      padding-top: 20px;
      padding-bottom: 70px; } }
  @media (max-width: 480px) {
    footer {
      padding-top: 20px; } }
  @media (max-width: 960px) {
    footer .wrapper {
      width: 94%;
      margin-left: 3%;
      margin-right: 3%; } }
  @media (max-width: 660px) {
    footer .wrapper {
      text-align: center; } }
  footer .wrapper > span {
    margin-right: 5px;
    line-height: 150%; }
    footer .wrapper > span strong {
      font-weight: normal; }
  footer .wrapper hr {
    border: none;
    height: 2px;
    background-color: #E5015A;
    margin-top: 15px; }
  footer .wrapper #followUs {
    position: absolute;
    right: 0;
    top: 0; }
    @media (max-width: 660px) {
      footer .wrapper #followUs {
        position: relative; } }
    footer .wrapper #followUs span {
      vertical-align: middle;
      display: inline-block; }
      @media (max-width: 660px) {
        footer .wrapper #followUs span {
          display: block;
          text-align: center;
          margin-top: 5px; } }
    footer .wrapper #followUs a {
      display: inline-block;
      vertical-align: text-bottom;
      width: 25px;
      height: 25px;
      margin-left: 5px;
      margin-right: 5px;
      background-image: url(../img/sprite.png); }
      @media (max-width: 960px) {
        footer .wrapper #followUs a {
          width: 24.96px;
          height: 24.96px;
          -webkit-background-size: 312px;
          background-size: 312px; } }
      @media (max-width: 660px) {
        footer .wrapper #followUs a {
          width: 40px;
          height: 40px;
          -webkit-background-size: 500px;
          background-size: 500px; } }
    footer .wrapper #followUs #FB_Icon {
      background-position: -298px -37px; }
      @media (max-width: 960px) {
        footer .wrapper #followUs #FB_Icon {
          background-position: -138.528px 0; } }
      @media (max-width: 660px) {
        footer .wrapper #followUs #FB_Icon {
          background-position: -222px 0; } }
    footer .wrapper #followUs #Line_Icon {
      background-position: -324px -37px; }
      @media (max-width: 960px) {
        footer .wrapper #followUs #Line_Icon {
          background-position: -163.8px 0; } }
      @media (max-width: 660px) {
        footer .wrapper #followUs #Line_Icon {
          background-position: -262.5px 0; } }
    footer .wrapper #followUs #Instagram_Icon {
      background-position: -350px -37px; }
      @media (max-width: 960px) {
        footer .wrapper #followUs #Instagram_Icon {
          background-position: -189.072px 0; } }
      @media (max-width: 660px) {
        footer .wrapper #followUs #Instagram_Icon {
          background-position: -303px 0; } }

/*捲動至上方*/
#scrollUp {
  display: none;
  position: fixed;
  z-index: 2;
  bottom: -50px;
  right: 20px;
  width: 100px;
  height: 102px;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  background-position: -890px 0px;
  background-image: url(../img/sprite.png);
  background-color: transparent; }
  @media (max-width: 960px) {
    #scrollUp {
      width: 100px;
      height: 0px;
      background-image: none;
      bottom: 70px;
      right: 10px;
      z-index: 4; } }
  #scrollUp:before {
    content: 'GO TOP';
    position: absolute;
    width: 90%;
    margin-left: 5%;
    height: 24px;
    line-height: 24px;
    top: -30px;
    border-radius: 12px;
    font-size: 12px;
    color: #FFF;
    text-align: center;
    border: 1px solid #545D6A;
    background-image: -webkit-linear-gradient(bottom, #5a6471 0%, #707b8b 100%);
    background-image: -o-linear-gradient(bottom, #5a6471 0%, #707b8b 100%);
    background-image: linear-gradient(to top, #5a6471 0%, #707b8b 100%);
    opacity: 0.75; }
    @media (max-width: 960px) {
      #scrollUp:before {
        height: 40px;
        line-height: 40px;
        border-radius: 20px; } }
  #scrollUp:hover {
    bottom: -40px; }
    @media (max-width: 960px) {
      #scrollUp:hover {
        bottom: 68px; } }
  #scrollUp.active {
    -webkit-animation-duration: 400ms;
    animation-duration: 400ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: toUP;
    animation-name: toUP; }

@-webkit-keyframes toUP {
  from {
    -webkit-transform: translateY(0); }
  to {
    -webkit-transform: translateY(-1000px); } }
@keyframes toUP {
  from {
    transform: translateY(0); }
  to {
    transform: translateY(-1000px); } }
/* 跳窗 */
.popup {
  position: fixed;
  display: none;
  z-index: 6;
  width: 960px;
  height: 650px;
  top: 50%;
  left: 50%;
  margin-left: -480px;
  margin-top: -280px;
  background-color: #FFF;
  border-radius: 10px;
  overflow: hidden;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
  text-align: center;
  font-size: 0;
  letter-spacing: 0; }
  @media (max-width: 960px) {
    .popup {
      width: auto;
      height: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-top: auto;
      border-radius: 0px;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch; } }
  .popup h2 {
    margin: 0;
    height: 60px;
    line-height: 60px;
    background-color: #0000C8;
    color: #FFF;
    text-align: center;
    margin-bottom: 30px; }
    @media (max-width: 960px) {
      .popup h2 {
        margin-bottom: 10px; } }
  .popup .close {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background-image: url(../img/sprite.png);
    background-color: transparent;
    margin: 0;
    border: none;
    background-position: -565px -106px;
    opacity: 0.5; }
    .popup .close:hover {
      opacity: 1;
      border: none;
      -webkit-box-shadow: none;
      box-shadow: none; }
    @media (max-width: 960px) {
      .popup .close {
        background-size: 500px;
        background-position: -222px -53px; } }

/*國際機票跳窗*/
#airTicket-popup div > a {
  display: inline-block;
  width: 300px;
  height: 80px;
  box-sizing: border-box;
  background-color: #FFF;
  border: 1px solid #CCC;
  border-radius: 10px;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 10px;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease; }
  #airTicket-popup div > a:hover {
    border: 1px solid #DE0054;
    -webkit-box-shadow: 0px 2px 3px rgba(222, 0, 84, 0.4);
    box-shadow: 0px 2px 3px rgba(222, 0, 84, 0.4); }
  #airTicket-popup div > a img {
    display: block;
    width: 100%; }

/* 卡片盒子 */
.box {
  background-color: #FFF;
  border-radius: 10px;
  padding: 1.5em 1em 1.5em 1em;
  text-align: center; }
  .box h1 {
    margin: 0;
    color: #316409;
    font-size: 28px; }
  .box p {
    margin-top: 1em; }
  .box span {
    display: block; }
  @media (max-width: 480px) {
    .box h1 {
      font-size: 20px; }
    .box span {
      display: inline; } }

.card a {
  display: block;
  background-color: #FFF;
  border-radius: 5px;
  padding: 1em 1em 0.5em 1em;
  margin: 0; }
  .card a img {
    display: block;
    width: 100%; }
  .card a p {
    position: relative;
    display: block;
    line-height: 30px;
    margin: 0.5em 0 0 0; }
    .card a p button {
      position: absolute;
      top: 0;
      right: 0;
      width: 80px;
      height: 30px;
      font-size: 15px;
      color: #FFF;
      background-color: #D7081F;
      text-align: center;
      border: none;
      border-radius: 5px;
      cursor: pointer; }