@charset "utf-8";


/************************************/


/*    TRISTAR活動頁模板 main CSS    */


/*      Created at 2019/09/03       */


/************************************/

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #F5F5F5;
}


*::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #F5F5F5;
}


*::-webkit-scrollbar-thumb {
    background-color: #CCC;
    border-radius: 10px;
}

body {
    font-family: arial, "微軟正黑體";
    color: #333;
    font-size: 14px;
}

a {
    color: #333;
    text-decoration: none;
}

a:hover {
    color: #333;
    text-decoration: none;
    color: inherit;
}

/* --------  福泰 header & footer 樣式 ---------- */

    .text_size_md{
        font-size: 18px;
    }

    /* --------  header style1 classname : tristar_nav_style1 ---------- */

        /* -- navbar-brand -- */

        .tristar_nav .navbar-brand {
            padding: 0;
            width: 130px;
        }




        /*  -- logo --  */

        .logo_box {
            width: 125px;
            padding: 3.5px 0px 1px 20px;
        }

        .logo_box img {
            width: 100%;
        }

        .tristar_nav_style1 {
            background-color: #fff;
            /*border-color: #e7e7e7;*/
            border: none;
            box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
        }

        .navbar-default.tristar_nav_style1 .navbar-nav>.active>a{
            background-color: transparent;
            color: #ff7103;
        }

        .tristar_nav_style1 .navbar-nav>li>a {
            font-weight: bold;
            color: #666;
            font-size: 16px;
            letter-spacing: 2px;
        }

        .tristar_nav_style1 .navbar-nav.navbar-right>li>button,
        .tristar_nav_style1 .navbar-nav.navbar-right>li>a {
            color: #ff7103;
        }


        .tristar_nav_style1 .navbar-nav.navbar-right>li>.dropdown>button {
            border: none;
            color: #ff7103;
            font-size: 16px;
        }


        .tristar_nav_style1 .navbar-nav.navbar-right>li>.dropdown>button:hover,
        .tristar_nav_style1 .navbar-nav.navbar-right>li>.dropdown>button:focus,
        .tristar_nav_style1 .navbar-nav.navbar-right>li>.dropdown>button:active,
        .tristar_nav_style1 .collapse .navbar-nav.navbar-right>li>button:focus,
        .tristar_nav_style1 .collapse .navbar-nav.navbar-right>li>button:active {
            background: #fffbf7;
        }


        .tristar_nav_style1 .caret {
            margin-left: 5px;
        }

        .tristar_nav_style1 .user_function+.user_function_list {
            width: 141px;
            color: #666;
            background: #fff;
            padding: 16px 10px 10px 10px;
            margin-top: -15px;
            position: absolute;
            right: 0;
            text-align: left;
            list-style: none;
            border-radius: 5px;
            box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.1);
            display: none;
        }


        .tristar_nav_style1 .user_function+.user_function_list.open {
            display: block;
        }

        .tristar_nav_style1 .user_function+.user_function_list a {
            display: inline-block;
            line-height: 33px;
            width: 100%;
        }


        .tristar_nav_style1 .user_function+.user_function_list a.logout {
            border-top: 1px solid #eee;
            margin-left: -10px;
            margin-right: -10px;
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 8px;
            margin-top: 8px;
            width: calc(100% + 20px);
        }

        @media (min-width: 768px) {
            .tristar_nav_style1 .navbar-nav>li>a {
                padding-top: 20px;
                padding-bottom: 20px;
                padding-left: 15px;
                padding-right: 15px;
            }


            .tristar_nav_style1 .navbar-nav.navbar-right>li>.dropdown>button,
            .tristar_nav_style1 .navbar-nav>li>button {
                padding-top: 19px;
                padding-bottom: 18px;
                padding-left: 0px;
                padding-right: 0px;
            }

            .tristar_nav_style1 .navbar-nav.navbar-right>li>.dropdown>button+.dropdown-menu {
                padding-top: 10px;
                padding-bottom: 10px;
                border: none;
                border-radius: 8px;
            }

            .tristar_nav_style1 .navbar-nav.navbar-right>li>.dropdown>button+.dropdown-menu>li>a {
                line-height: 34px;
            }


            .tristar_nav_style1 .navbar-nav:not(.navbar-right)>li>a:hover {
                background: rgba(238, 238, 238, 0.3);
                color: #333;
            }

            .tristar_nav_style1 .collapse .navbar-nav {
                float: left;
                margin: 0;
                text-align: center;
                width: calc(100% - 260px);
            }

            .tristar_nav_style1 .collapse .navbar-nav.navbar-right {
                width: 130px;
                text-align: right;
            }

            .tristar_nav_style1 .collapse .navbar-nav.navbar-right>li>button:hover,
            .tristar_nav_style1 .collapse .navbar-nav.navbar-right>li>a:hover {
                background: #fffbf7;
                box-shadow: none;
            }

            .tristar_nav_style1 .collapse .navbar-nav>li {
                display: inline-block;
                float: none;
            }
        }

        @media (max-width: 1090px) and (min-width: 992px) {
            .tristar_nav_style1 .navbar-nav>li>a {
                padding: 20px 5px;
            }

            .tristar_nav_style1 .collapse .navbar-nav {
                width: auto;
                width: calc(100% - 250px);
                /* test */
            }

            .tristar_nav_style1 .collapse .navbar-nav.navbar-right {
                width: auto;
            }
        }

        @media (max-width: 991px) and (min-width: 768px) {
            .tristar_nav_style1 .navbar-nav>li>a {
                padding: 11px 4px;
                font-size: 16px;
                width: 45px;
                line-height: 19px;
                vertical-align: text-top;
                margin-right: 8px;
            }

            .tristar_nav_style1 .navbar-nav>li>a[href*='login.h'] ,
            .tristar_nav_style1 .navbar-nav>li>a[href*='r/login'] {
                width: auto;
                margin-top: 8px;
            }

            .tristar_nav_style1 .navbar-nav>li>a[href*='coupon.h'] ,
            .tristar_nav_style1 .navbar-nav>li>a[href*='/ticket/'] {
                position: relative;
                top: -10px;
            }

            .tristar_nav_style1 .collapse .navbar-nav {
                width: auto;
                width: calc(100% - 250px);
            }

            .tristar_nav_style1 .collapse .navbar-nav.navbar-right {
                width: auto;
            }
        }

        @media screen and (min-width:0\0) and (max-width: 991px) and (min-width: 768px){
            /* for ie 10 9 */
            .tristar_nav_style1 .navbar-nav>li>a[href*='/ticket/'] {
                float: left;
                top: 5px;
            }
        }

        @media (max-width: 767px) {
            .tristar_nav_style1 .container-fluid>.navbar-header {
                height: 60px;
            }

            .tristar_nav_style1.navbar-default .navbar-toggle {
                margin-top: 14px;
            }

            .navbar-fixed-top.tristar_nav_style1 .navbar-collapse {

            }

            .tristar_nav_style1 .navbar-nav>li>button {
                background: transparent;
                width: 100%;
                border-radius: 0;
                text-align: left;
            }

            .tristar_nav_style1 .navbar-nav.navbar-right>li>.dropdown>button {
                width: 100%;
                text-align: left;
                border: 1px solid #eee;
                border-radius: 8px;
                margin-left: 5px;
                padding: 10px 4px;
                text-align: center;
            }

            .tristar_nav_style1 .navbar-nav {
                width: 50%;
                float: left;
                padding-left: 12px;
                margin: 10px 0;
            }

            .tristar_nav_style1 .navbar-nav li {
                width: 60px;
                float: left;
                border: 1px solid #eee;
                border-radius: 8px;
                text-align: center;
                height: 60px;
                text-align: center;
                margin: 5px;
            }

            .tristar_nav_style1 .navbar-nav>li>a {
                padding: 10px 10px;
            }

            .tristar_nav_style1 .dropdown .btn-default {
                height: 60px;
                width: 60px;
                padding: 0 6px;
                background: transparent;
                text-align: center;
                border: 1px solid #eee;
                border-radius: 8px;
                white-space: normal;
                overflow: hidden;
            }

            .tristar_nav_style1 .dropdown .btn-default .caret {
                display: none;
            }

            .tristar_nav_style1 .navbar-nav.navbar-right > li {
                border: none;
            }


            .tristar_nav_style1 .navbar-nav.navbar-right > li .dropdown-menu li a {
                height: 60px;
                width: 60px;
                padding: 10px;
                white-space: normal;
                color: #666;
            }

            .navbar-nav .dropdown-menu {
                position: static;
                float: none;
                width: auto;
                margin-top: 0;
                background-color: transparent;
                border: 0;
                -webkit-box-shadow: none;
                box-shadow: none;
                display: block;
            }

            .tristar_nav_style1 .navbar-nav.navbar-right > li .dropdown-menu li a[href*='/logout'] {
                padding: 18px 0;
            }

            .tristar_nav_style1 .navbar-nav li a[href*='coupon.h'],
            .tristar_nav_style1 .navbar-nav li a[href*='/ticket/'] {
                padding: 18px 10px;
            }

            .tristar_nav_style1 .navbar-nav li a[href*='login.'],
            .tristar_nav_style1 .navbar-nav li a[href*='/login'] {
                border: 1px solid #eee;
                border-radius: 8px;
                text-align: center;
                width: 130px;
                padding: 20px 10px;
                height: 60px;
            }
        }


        @media (max-width: 515px) {
            .tristar_nav_style1 .navbar-nav li {
                margin: 2px;
            }
        }

    /* ---------------------- footer --------------------------- */

        .footer {
            float: left;
            width: 100%;
            letter-spacing: 1px;
        }

        .footer .jumbotron {
            background: #eff1f3;
            padding: 0;
            margin: 0;
        }

        .footer .main_footer {
            background: #eff1f3;
        }


        .footer .main_footer .footer_content {
            overflow: hidden;
            margin: 0 auto;
        }


        .footer .main_footer .footer_content .box {
            float: left;
            width: 25%;
            padding-top: 60px;
            padding-bottom: 60px;
        }


        .footer .main_footer .footer_content .box .list_title {
            font-size: 18px;
            color: #333;
            font-weight: bold;
            margin-bottom: 20px;
        }


        .footer .main_footer .footer_content .box ul {
            padding: 0;
            list-style: none;
        }

        .footer .main_footer .footer_content .box ul a {
            text-decoration: none;
            font-size: 12px;
            color: #888;
        }

        .footer .main_footer .footer_content .box ul li {
            margin-bottom: 12px;
            text-decoration: none;
            font-size: 14px;
            color: #888;
        }

        .footer .main_footer .footer_content .box ul li.service_time {
            float: left;
        }


        .footer .main_footer .footer_content .bottom_box {
            float: left;
            width: 100%;
            padding-top: 13px;
            padding-bottom: 23px;
            border-top: 1px solid #EEE;
            line-height: 26px;
            color: #666;
            font-size: 14px;
        }



        .footer .main_footer .footer_bottom {
            float: left;
            width: 100%;
            height: 30px;
            line-height: 30px;
            background-color: #333;
            color: #fff;
            text-align: center;
            font-size: 12px;
            letter-spacing: 1px;
        }



        @media (min-width: 768px) {
            .footer .main_footer .footer_content {
                width: 750px;
            }

            .footer .main_footer .footer_content .box ul li.service_time {
                margin-left: 0px;
            }

        }

        @media (min-width: 992px) {
            .footer .main_footer .footer_content {
                width: 970px;
            }

            .footer .main_footer .footer_content .box ul li.service_time {
                margin-left: 70px;
            }
        }

        @media (min-width: 1200px) {
            .footer .main_footer .footer_content {
                width: 1170px;
            }
        }


        @media (max-width: 767px) {
            .footer .main_footer .footer_content {
                display: none;
            }

            .footer .main_footer .footer_bottom {
                letter-spacing: 0px;
            }

            .footer .link_list_item li{
                margin-left: 0;
            }

            .footer .link_list_item.item_style1 li + li:before {
                display: none;
            }

            .footer .container-fluid:nth-child(2) span {
                line-height: 50px;
                font-size: 12px;
            }

            .footer .container-fluid:nth-child(2) .link_list_item li {
                margin: 0;
                margin-right: 5px;
            }

            .footer .container-fluid:nth-child(2) .link_list_item a {
                line-height: 40px;
                padding: 10px 0;
            }
        }


        .footer .container-fluid:nth-child(1) {
            background: #eff1f3;
            padding-bottom: 15px;
        }

        .footer .container-fluid:nth-child(1) .link_list_item {
            border-bottom: 1px solid #ddd;
            margin-bottom: 20px;
        }

        .footer .container-fluid:nth-child(1) .link_list_item a {
            line-height: 70px;
            padding: 27px 0;
        }

        .footer .container-fluid:nth-child(1) .icon_list_item {
            margin-top: -52px;
            float: right;
        }

        .footer .container-fluid:nth-child(1) .icon_list_item li {
            /*width: 51px;*/
        }

        .footer .container-fluid:nth-child(2) {
            background: #000;
            color: #fff;
        }

        .footer .container-fluid:nth-child(2) span {
            line-height: 70px;
        }

        .footer .container-fluid:nth-child(2) .link_list_item a {
            line-height: 70px;
            padding: 27px 0;
        }

        .footer .container-fluid:nth-child(2) * {
            color: #fff;
        }

        @media (max-width: 991px){
            .footer .container-fluid:nth-child(1) .icon_list_item {
                float: none;
                margin-top: 0px;
            }
        }

        .footer .text_color_content{
            color: #666
        }

        /*----- link_list_item ----*/

            .link_list_item{
                padding-left: 0;
                list-style: none;
                margin-bottom: 0;
            }

            .link_list_item li{
                display: inline-block;
            }

            .link_list_item li a:hover{
                text-decoration: underline;
            }


            .link_list_item.item_style1 li + li:before{
                content: "．";
                padding: 0 6px;
            }

            .link_list_item li.back_top *{
                cursor: pointer;
            }

            .link_list_item li.back_top{
                float: right;
                font-weight: bold;
            }

            .link_list_item.item_style1 li + li.back_top:before{
                content: "";
                padding: 0;
            }

        /*--- icon_list_item ---*/

            .icon_list_item{
                list-style: none;
            }

            .icon_list_item li{
                display: inline-block;
            }

        /*--- pic box ---*/
            .pic_box{
                width: 100%;
            }

/* --------  西遊紀行活動頁content ---------- */

  .westjr {
    font-family: "華康華綜體W5";
    color: #40220f;
  }

  .westjr_index {
    background:
                url("../images/flower_rt.png"),
                url("../images/flower_lt.png"),
                url("../images/bg.jpg");
    background-repeat: no-repeat,
                       no-repeat,
                       repeat-y;
    background-size: 18%, 18%, 100%;
    background-position:top right, top left, top center;

  }

  .westjr_location {
    background: url("../images/bg_2.jpg");
    background-repeat: repeat-y;
    background-size: 100%;
  }

    /* .flower img{
      width: 18%;
    }

      .flower img:first-child{
        position: absolute;
        top: 0;
        left: 0;
      }

      .flower img:last-child{
        position: absolute;
        top: 0;
        right: 0;
      } */

    .intro_block {
      padding-top: 155px;
    }

          .intro_block .block_title {
            text-align: center;
          }

            .intro_block .block_title img {
              width: 55%;
              max-width: 700px;
            }

            .intro_block .block_title h1 {
              opacity: 0;
            }

          .block_content {
            position: relative;
          }

          .info_box {
            margin: 0 auto;
            background-color: #fffdf5;
            position: relative;
            box-shadow: 5px 5px 10px rgba(0,0,0, 0.25);
          }

            .info_box .box_title {
              width: 200px;
              height: 50px;
              color: #fff;
              background-color: #ea6000;
            }

              .info_box .box_title h2 {
                text-align: center;
                position: relative;
                font-size: 25px;
                line-height: 50px;
                margin: 0;
              }

                .info_box .box_title h2::after {
                  content: "";
                  position: absolute;
                  top: -17px;
                  bottom: -20px;
                  left: -20px;
                  right: -20px;
                  background-image: url("../images/box_title.png");
                  background-size: contain;
                  background-repeat: no-repeat;

                }

              .info_box .box_title img {
                width: 327px;
                height: 346px;
                position: absolute;
                top: 0;
                left: 0;
              }

              .title_style1 {
                position: absolute;
                top: -12px;
                left: -45px;
              }

              .box_style1{
                margin-top: 80px;
                padding: 70px 60px;
                border: 2px dashed #f39800;
                border-radius: 30px;
              }

              .title_style2 {
                position: absolute;
                top: -25px;
                left: calc(50% - 100px);

              }

              .box_style2{
                margin-top: 160px;
                padding: 0px;
                border: 2px dashed #f39800;
                border-radius: 70px;
              }

              .info_box .box_content img{
                border-radius: 70px;
                width: 100%;
              }

            .intro_block .block_content img:last-child {
              position: absolute;
              width: 40%;
              top: -18%;
              left: -10%;
            }

    .middle_block {
      margin-top: 117px;
      background-color: rgba(204,35,13,0.8);
      background-image: url("../images/mt_decoration.png");
      background-repeat: no-repeat;
      background-position: 70% 50%;
      color: #fff;
      padding: 24px 0;
      position: relative;
    }

    .middle_block .block_title {
      display: flex;
      justify-content: center;
    }

    .middle_block .block_content h2::before{
      content:"";
      background-image: url("../images/tickets.svg");
      background-size: 15%;
      background-position: 3% 4%;
      background-repeat: no-repeat;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 300px;
    }

    .middle_block .container {
      width: 65%;
    }

    .middle_block .block_content h2{
        margin: 0 auto;
      margin-top: 52px;
      margin-bottom: 52px;
      text-align: center;
      font-size: 40px;
      width: 70%;
    }

    .middle_block .block_content {
      font-size: 24px;
      margin-left: auto;
      text-align: right;
    }

      .middle_block .block_content p {
        text-align: left;
        width: 70%;
        margin: 0 auto;
      }

      .middle_block .block_content a {
        display: inline-block;
        width: 230px;
        height: 83px;
        margin: 15px auto 25px;
        background-color: rgba(0,0,0,0);
        background-image: url("../icons/icon_buy.png");
        background-size: cover;
        background-repeat: no-repeat;
        border:none;
      }

      .middle_block .block_bottom {
        text-align: left;
        margin: 0 auto;
        border-radius: 15px;
        background-color: rgba(248, 248, 248, 0.2);
        padding: 16px 24px;
      }

        .middle_block span {
          color: #effc75;
        }

    .location_block {
      padding-bottom: 120px;
    }

    .location_block .block_title {
      text-align: center;
      margin: 0 auto;
      background-color: #ea6000;
      color: #fff;
      width: 477px;
      height: 77px;
      position: relative;
    }

    .location_block .block_title::after{
      content: "";
      position: absolute;
      top: -5px;
      bottom: -25px;
      right: -5px;
      left: -30px;
      background-image: url("../images/box_title_2.png");
      background-size: contain;
      background-repeat: no-repeat;
    }

      .location_block .block_title h2 {
        margin-top: 70px;
        line-height: 77px;
        font-size: 26px;
      }

    .location_block .block_content img {
      width: 100%;
      margin-top: 70px;
    }

    .location_box .card img{
      transform-style: preserve-3d;
      transition: all 1s ease-in-out;
    }

    .location_box .card a{
      display: inline-block;
      width: 85%;
      height: 100%;
      position: relative;
    }

    .location_box .card:hover img {
      -webkit-transform: rotateY(180deg); /* Safari prior 9.0 */
      transform: rotateY(180deg)
    }

    .location_box .card .front{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }

    .location_box .card:hover .front{
      z-index: 0;
    }


  .title_block {
    width: 100%;
    padding: 50px;
    background-color: rgba(204, 35, 13, 0.8)
  }

  .title_block img {
  height: 80%;
  }

  .landmark_block {
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 40%;
  }

  .okayama .landmark_block {
    background-image: url("../images/earth_okayama.png")
  }

  .hiroshima .landmark_block {
    background-image: url("../images/earth_hiroshima.png")
  }

  .kagawa .landmark_block {
    background-image: url("../images/earth_kagawa.png")
  }

  .yamaguchi .landmark_block {
    background-image: url("../images/earth_yamaguchi.png")
  }

  .ehime .landmark_block {
    background-image: url("../images/earth_ehime.png")
  }

  .landmark_block .block_title {
    text-align: left;
    font-size: 30px;
    color: #f39800;
    line-height: 130px;
    background-repeat: no-repeat;
    background-position: left;
    margin: 30px auto;
  }

    .okayama .landmark_block .block_title{
      background-image: url("../images/map_okayama.png");
      background-size: 140px;
    }

    .hiroshima .landmark_block .block_title{
      background-image: url("../images/map_hiroshima.png");
      background-size: 127px;
    }

    .kagawa .landmark_block .block_title{
      background-image: url("../images/map_kagawa.png");
      background-position: 25px 24px;
      background-size: 150px;
    }

    .yamaguchi .landmark_block .block_title{
      background-image: url("../images/map_yamaguchi.png");
      background-position: -1px 18px;
      background-size: 127px;
    }

    .ehime .landmark_block .block_title{
      background-image: url("../images/map_ehime.png");
      background-position: 34px 8px;
      background-size: 138px;
    }

      .landmark_block .block_title span {
        -webkit-text-stroke: 1px #f39800;
        text-stroke: 1px #f39800;
        display: inline-block;
        color: #fff;
        font-size: 40px;
      }


      @media(min-width:1200px){
        .row {
          display: flex;
          align-items: flex-end;
        }

      }

      .col-right{
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }

      .landmark_box {
        text-align: left;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
        margin-bottom: 70px;
        border: 8px solid #fff;
        background-color: #f39800;
      }

      .landmark_box .box_bg {
        width: 100.1%;
        padding: 30px;
        background-color: #fff;
        background-image: url("../images/corner_tl.svg"),
                       url("../images/corner_tr.svg"),
                       url("../images/corner_bl.svg"),
                       url("../images/corner_br.svg");
        background-position: top left,
                             top right,
                             bottom left,
                             bottom right;

        background-repeat: no-repeat;
        background-size: 3%;
      }

      .landmark_box.food {
        text-align: left;
        border: 8px solid #f39800;
        background-color: #fff;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
      }

      .landmark_box.food .box_bg{
        width: 100.1%;
        height: 100.1%;
        padding: 30px;
        background-color: #f39800;
        background-image: url("../images/corner_tl_2.svg"),
                       url("../images/corner_tr_2.svg"),
                       url("../images/corner_bl_2.svg"),
                       url("../images/corner_br_2.svg");
        background-position: top left,
                             top right,
                             bottom left,
                             bottom right;

        background-repeat: no-repeat;
        background-size: 3%;
      }

        .landmark_box .box_title {
          color: #f39800;
        }

        .landmark_box.food .box_title {
          color: #fff;
        }

        .landmark_box .box_title h3{
          display: inline;
          font-size: 25px;
        }

        .landmark_box .box_content {
          margin: 20px auto;
        }

        .landmark_box .box_bottom img{
          width: 100%;
        }

    .return_item .item_content {
      padding: 0 20px;
      display: inline-block;
      background-color: #fff;
      width: 140px;
      height: 70px;
      box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.25);
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 70px;
    }

    .return_item .item_content a{
      text-decoration: none;
      display: inline-block;
      font-size: 30px;
      line-height: 70px;
      color: #f39800;
      margin: 0;

    }

    .return_item span {
      display: inline-block;
      width: 20px;
      height: 40px;
      background-image: url("../icons/return.png");
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }