@charset "UTF-8";
.cardList, .cardList .Img::before, .cardList .Img::after, .travelContentBox > strong, .travelContentBox h1, .travelContentBox > p, .travelInfoList, .spotList, .markerIconBox {
  -webkit-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  transition: all .5s ease-out; }

.cardList, .cardList .Img::after, .travelContentBox > strong, .travelContentBox h1, .travelContentBox > p, .travelInfoList, .spotList {
  opacity: 0; }

.cardList, .cardList .Img::after, .travelContentBox > strong, .travelContentBox h1, .travelContentBox > p, .travelInfoList, .spotList {
  -webkit-transform: translateY(20px);
  -ms-transform: translateY(20px);
  transform: translateY(20px); }

.cardList.show, .travelArea.show .travelContentBox > strong, .travelArea.show .travelContentBox h1, .travelArea.show .travelContentBox > p, .travelArea.show .travelInfoList, .travelArea.show .spotList {
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);
  opacity: 1; }

/*
	Authors: Alvin, Randy, Rex
    Version: 2.0
	Latest Update: 2020/03/13
*/
.cardList {
  margin-left: -15px;
  margin-right: -15px; }
  .cardList:not(.vertical) {
    margin-top: 60px; }
    .cardList:not(.vertical) > li {
      padding-left: 15px;
      padding-right: 15px; }
  @media (min-width: 1181px) {
    .cardList .item:hover .Img::before {
      opacity: 1; }
    .cardList .item:hover .Img::after {
      -webkit-transform: translate(0);
      -ms-transform: translate(0);
      transform: translate(0);
      opacity: 1;
      -webkit-transition-delay: .5s;
      -o-transition-delay: .5s;
      transition-delay: .5s; } }
  .cardList .Img {
    position: relative; }
    .cardList .Img::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.8);
      opacity: 0;
      pointer-events: none; }
    .cardList .Img::after {
      content: url("../images/itemShowLogo.png");
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
      margin-left: -40.5px;
      margin-top: -28px;
      pointer-events: none; }
  .cardList .Txt {
    position: relative;
    padding-top: 35px; }
    .cardList .Txt[data-m-title]::before {
      content: attr(data-m-title);
      position: absolute;
      top: 20px;
      left: 0;
      z-index: 1;
      font-size: 14px;
      color: #959595;
      letter-spacing: 1px; }
  .cardList h3 a {
    display: block;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 18px;
    font-weight: 400;
    color: #191919;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis; }
  .cardList p {
    max-height: 55px;
    line-height: 1.8; }

.travelArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  @media (max-width: 1180px) {
    .travelArea {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; } }
  .travelArea.show .travelContentBox h1 {
    -webkit-transition-delay: .3s;
    -o-transition-delay: .3s;
    transition-delay: .3s; }
  .travelArea.show .travelContentBox > p {
    -webkit-transition-delay: .5s;
    -o-transition-delay: .5s;
    transition-delay: .5s; }
  .travelArea.show .travelInfoList {
    -webkit-transition-delay: .7s;
    -o-transition-delay: .7s;
    transition-delay: .7s; }
  .travelArea.show .spotList {
    -webkit-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s; }
  .travelArea > .leftBox {
    -ms-flex-negative: 0;
    flex-shrink: 0; }
    @media (min-width: 1601px) {
      .travelArea > .leftBox {
        width: 815px; } }
    @media (min-width: 1181px) and (max-width: 1600px) {
      .travelArea > .leftBox {
        width: 600px; } }
  .travelArea .rightBox {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding-right: 20px; }
    @media (min-width: 1601px) {
      .travelArea .rightBox {
        max-width: calc(100% - 815px); } }
    @media (min-width: 1181px) and (max-width: 1600px) {
      .travelArea .rightBox {
        max-width: calc(100% - 600px); } }
    @media (min-width: 1181px) {
      .travelArea .rightBox {
        padding-top: 75px;
        padding-left: 65px; } }
    @media (max-width: 1180px) {
      .travelArea .rightBox {
        width: 100%;
        padding-top: 40px;
        padding-left: 20px; } }

@media (min-width: 1181px) {
  #mapBox {
    height: 100%; } }

@media (max-width: 1180px) {
  #mapBox {
    height: 400px; } }

#mapBox .label {
  color: #fcc800;
  font-size: 15px;
  font-family: "Noto Sans TC", sans-serif; }

@media (min-width: 1181px) {
  .travelContentBox {
    max-width: 675px; } }

.travelContentBox > strong {
  display: block;
  color: #959595;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px; }

.travelContentBox h1 {
  padding-top: 5px;
  padding-bottom: 10px;
  font-weight: 400;
  font-size: 22px;
  color: #191919;
  letter-spacing: 1px; }

.travelContentBox > p {
  letter-spacing: 1px;
  line-height: 1.8; }

.travelInfoList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #e5e5e5;
  margin-bottom: 45px;
  font-size: 14px;
  color: #454545;
  letter-spacing: 1px; }
  .travelInfoList li {
    margin-right: 35px; }
  .travelInfoList span {
    margin-right: 10px;
    padding-right: 10px;
    color: #fcc800;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #e5e5e5), to(#e5e5e5)) 100% 50%/1px 14px no-repeat;
    background: -webkit-linear-gradient(left, #e5e5e5 0, #e5e5e5 100%) 100% 50%/1px 14px no-repeat;
    background: -o-linear-gradient(left, #e5e5e5 0, #e5e5e5 100%) 100% 50%/1px 14px no-repeat;
    background: linear-gradient(to right, #e5e5e5 0, #e5e5e5 100%) 100% 50%/1px 14px no-repeat; }

.spotList {
  height: 625px;
  overflow-y: auto;
  padding-top: 10px;
  padding-left: 23px;
  padding-right: 70px;
  background-image: -webkit-gradient(linear, left top, right top, from(#e5e5e5), to(#e5e5e5)), -webkit-gradient(linear, left top, right top, from(#e5e5e5), to(#e5e5e5));
  background-image: -webkit-linear-gradient(left, #e5e5e5, #e5e5e5), -webkit-linear-gradient(left, #e5e5e5, #e5e5e5);
  background-image: -o-linear-gradient(left, #e5e5e5, #e5e5e5), -o-linear-gradient(left, #e5e5e5, #e5e5e5);
  background-image: linear-gradient(to right, #e5e5e5, #e5e5e5), linear-gradient(to right, #e5e5e5, #e5e5e5);
  background-position: 23px 0, calc(100% - 1px) 0;
  background-size: 1px 100%;
  background-repeat: no-repeat; }
  @media (max-width: 1181px) {
    .spotList {
      padding-right: 30px; } }
  @media (max-width: 400px) {
    .spotList {
      padding-left: 0;
      background-position: 15px 0, calc(100% - 1px) 0; } }
  .spotList::-webkit-scrollbar {
    width: 3px; }
  .spotList::-webkit-scrollbar-thumb, .spotList::-webkit-scrollbar-track {
    border-radius: 2px; }
  .spotList::-webkit-scrollbar-thumb {
    background-color: #353535; }
  .spotList .current .markerIconBox {
    background-color: #fcc800; }
  .spotList .item {
    position: relative;
    padding-left: 50px;
    padding-bottom: 55px; }
    @media (min-width: 1181px) {
      .spotList .item:hover .markerIconBox {
        background-color: #fcc800; } }
    @media (max-width: 400px) {
      .spotList .item {
        padding-left: 40px; } }
  .spotList p {
    margin-bottom: 20px;
    color: #808080; }
  .spotList .Img {
    max-width: 215px;
    margin-bottom: 10px; }
    .spotList .Img img {
      display: block;
      max-width: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden; }
  .spotList h3 {
    font-weight: 400;
    font-size: 13px;
    color: #2a2a2a; }
    .spotList h3::before {
      content: attr(data-tip) "：";
      color: #959595; }

.markerIconBox {
  position: absolute;
  top: -10px;
  left: -22.5px;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #cecece; }
  @media (max-width: 400px) {
    .markerIconBox {
      top: 0;
      left: 0;
      width: 30px;
      height: 30px; } }
  .markerIconBox svg {
    width: 12px;
    height: 18px;
    fill: #fff; }

.spotTitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 10px;
  letter-spacing: 1px;
  color: #fcc800;
  cursor: pointer; }
  .spotTitle h2 {
    font-weight: 400;
    font-size: 16px; }

.spotTime {
  margin-right: 10px;
  font-size: 18px; }

.sideRelatedBox {
  margin-top: 0;
  padding: 30px 60px 80px 50px;
  border-top: none;
  background-image: -webkit-gradient(linear, left top, right top, from(#e5e5e5), to(#e5e5e5)), -webkit-gradient(linear, left top, right top, from(#e5e5e5), to(#e5e5e5));
  background-image: -webkit-linear-gradient(left, #e5e5e5, #e5e5e5), -webkit-linear-gradient(left, #e5e5e5, #e5e5e5);
  background-image: -o-linear-gradient(left, #e5e5e5, #e5e5e5), -o-linear-gradient(left, #e5e5e5, #e5e5e5);
  background-image: linear-gradient(to right, #e5e5e5, #e5e5e5), linear-gradient(to right, #e5e5e5, #e5e5e5);
  background-size: 1px 100%, calc(100% - 110px) 1px;
  background-position: 23px 0, 50% 0;
  background-repeat: no-repeat; }
  @media (max-width: 1180px) {
    .sideRelatedBox {
      padding-right: 30px;
      padding-bottom: 30px; } }
  .sideRelatedBox .sectionTitle {
    margin-top: 0; }