/*=======TOOL=======*/

.mContent {
  position: relative;
}

.mContent .middleTools {
  width: 100%;
  padding: 40px 120px;
  position: absolute;
  z-index: 3;
}

.mContent .middleTools .container {
  padding: 0;
  max-width: 1280px;
  margin: 0 auto;
}

.mContent .middleTools .container .col-l {
  position: relative;
  width: calc(100% - 300px);
}

ul.tools {
  float: left;
  position: relative;
  margin-left: 15px;
}

ul.tools li {
  display: inline-block;
  vertical-align: top;
  margin-left: 5px;
}

ul.tools li:first-child {
  margin-left: 0;
}

ul.tools li a {
  width: 40px;
  height: 40px;
  display: block;
  background-color: #eaeaea;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  border-radius: 50%;
  text-indent: -9999px;
  overflow: hidden;
  color: #676767;
}

ul.tools li a:hover {
  background-color: #ec6aa4;
}

ul.tools li.tool_1 a {
  background-image: url(../images/icon/icon_print_bk.svg);
}

ul.tools li.tool_1 a:hover {
  background-image: url(../images/icon/icon_print_w.svg);
}

ul.tools li.tool_2 a {
  background-image: url(../images/icon/icon_share_bk.svg);
}

ul.tools li.tool_2 a:hover {
  background-image: url(../images/icon/icon_share_w.svg);
}

ul.tools li.tool_2 {
  position: relative;
}

/*分享*/

.tools .tool_2 .sf-menu ul {
  top: 115%;
}

.tools .tool_2 .sf-menu ul li {
  display: block;
  margin: 0 0 5px 0;
}

.tools .tool_2 .sf-menu ul li {
  border-radius: 50%;
  margin-bottom: 5px;
  visibility: visible;
}

.tools .tool_2 li.nav1 {
  background: #4cb234;
}

.tools .tool_2 li.nav2 {
  background: #3b5998;
}

.tools .tool_2 li.nav3 {
  /* background: #00aced; */
  background: #3a3a3a;
}

.tools .tool_2 li.nav4 {
  background: #d64136;
}

.tools .tool_2 li.nav5 {
  background: #cf682f;
}

.tools .tool_2 li.nav1 a,
.tools .tool_2 li.nav1 a:hover {
  background: url(../images/icon/icon_share_line.svg) no-repeat center;
  background-size: 75%;
}

.tools .tool_2 li.nav2 a,
.tools .tool_2 li.nav2 a:hover {
  background: url(../images/icon/icon_share_facebook.svg) no-repeat center;
  background-size: 50%;
}

.tools .tool_2 li.nav3 a,
.tools .tool_2 li.nav3 a:hover {
  background: url(../images/icon/icon_share_twitter.svg) no-repeat center;
  /* background-size: 50%; */
  background-size: 85%;
}

.tools .tool_2 li.nav4 a,
.tools .tool_2 li.nav4 a:hover {
  background: url(../images/icon/icon_share_gplus.svg) no-repeat center;
  background-size: 50%;
}

.tools .tool_2 li.nav5 a,
.tools .tool_2 li.nav5 a:hover {
  background: url(../images/icon/icon_share_plurk.svg) no-repeat center;
  background-size: 50%;
}

.fontSize {
  float: right;
  margin-left: 15px;
}

.fontSize ul {
  display: inline-block;
  vertical-align: top;
}

.fontSize ul {
  padding: 5px 10px;
  background: #eaeaea;
  border-radius: 30px;
}

.fontSize li {
  float: left;
  margin-left: 5px;
}

.fontSize li a {
  display: block;
  background: center center no-repeat;
  font-size: 0;
  text-align: center;
  overflow: hidden;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: relative;
  line-height: 30px;
  color: #676767;
  padding-left: 4px;
  border: 1px solid #eaeaea;
}

.fontSize li.current a,
.fontSize li a:hover {
  color: #186bad;
  border: 1px solid #41b5e6;
}

.fontSize li a::before {
  text-indent: 0;
  content: "A";
  font-weight: bolder;
}

.fontSize li.sizeS a::before {
  font-size: 1.1rem;
}

.fontSize li.sizeM a::before {
  font-size: 1.4rem;
}

.fontSize li.sizeL a::before {
  font-size: 1.8rem;
}

.fontSize li.current a::before,
.fontSize li a:hover::before {
  color: #186bad;
}

/*=======麵包屑=======*/

.breadcumb {
  float: left;
  color: #555555;
  width: 100%;
}

.breadcumb li {
  display: inline-block;
  padding-left: 18px;
  color: #111;
  position: relative;
  font-size: 98%;
  line-height: 1.6;
}

.breadcumb li::before {
  content: ">";
  position: absolute;
  left: 0;
  top: 0;
  color: #555555;
}

.breadcumb li a {
  text-decoration: none;
  color: #555555;
  display: inline-block;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcumb li a:hover {
  color: #ec6aa4;
}

.breadcumb li.home {
  padding: 0;
}

.breadcumb li.home a {
  background-image: url(../images/icon/icon_home.svg);
  background-repeat: no-repeat;
  background-position: center top;
  text-indent: -9999px;
  background-size: 80%;
  width: 34px;
  height: 34px;
  /*margin-top: -1px;*/
  margin-right: 6px;
}

.breadcumb li.home a:hover {
  background-image: url(../images/icon/icon_home_pk.svg);
}

.breadcumb li.home::before {
  display: none;
}

/*=======中間區塊header=======*/

/*=======title=======*/

.mContent-hdr {
  padding-top: 70px;
  display: table;
  width: 100%;
  text-align: center;
  position: relative;
}

.mContent-hdr h1,
.mContent-hdr h2 {
  color: #2b9ae1;
  font-size: 250%;
  text-align: center;
  font-weight: bolder;
  position: relative;
  padding: 20px 10px 10px 10px;
  display: inline-block;
  z-index: 2;
}

.mContent-hdr h1 i,
.mContent-hdr h2 i {
  position: absolute;
  top: 80px;
  width: 200px;
  left: 50%;
  margin-left: -100px;
}

.mContent-hdr h1 i img,
.mContent-hdr h2 i img {
  width: 50px;
}

.mContent-hdr h1 i::before,
.mContent-hdr h1 i::after,
.mContent-hdr h2 i::before,
.mContent-hdr h2 i::after {
  content: "";
  display: block;
  height: 1px;
  background-color: #111;
  position: absolute;
  top: 25px;
  width: 200px;
}

.mContent-hdr h1 i::before,
.mContent-hdr h2 i::before {
  left: 0;
  margin-left: -150px;
}

.mContent-hdr h1 i::after,
.mContent-hdr h2 i::after {
  right: 0;
  margin-right: -150px;
}

.mContent-hdr p {
  color: #555555;
  font-size: 110%;
  padding: 0 10rem;
  text-align: center;
  padding-top: 50px;
}

/*=======換頁按鈕=======*/

.categories {
  padding: 40px 120px;
  text-align: center;
}

article.news .textArea .categories ul {
  overflow: hidden;
  padding: 0 10%;
  list-style: none;
}

.categories li {
  float: left;
  width: 50%;
}

.categories li a {
  display: inline-block;
  font-size: 130%;
  padding: 15px;
  padding-left: 70px;
  background-color: #fff;
  border: 1px solid rgba(255, 255, 255, 0);
  line-height: 1.3;
}

.categories li a img {
  width: 15%;
}

.categories li a strong {
  padding-left: 10px;
  position: relative;
  font-size: 1rem;
}

.categories li a strong::before {
  content: "";
  display: block;
  position: absolute;
  left: -50px;
  top: 50%;
  margin-top: -22px;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: contain;
}

.categories li a:hover,
.categories li.current a {
  border: 1px solid #ec6aa4;
  border-radius: 10px;
  color: #d4357c;
}

/*中間內文*/

.mContent-contArea {
  width: 100%;
  height: auto;
}

.mContent-contArea .container {
  position: static;
  overflow: hidden;
  margin: 20px auto;
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 0;
}

.content_text {
  margin-top: 20px;
}

.mContent-contArea .container p {
  line-height: 2;
  visibility: visible;
  text-align: justify;
  margin-top: 10px;
  letter-spacing: 0;
}

.mContent-contArea .container p.noData {
  text-align: center;
  font-size: 1.25rem;
  padding: 8px 0;
  font-weight: 500 !important;
  margin-bottom: 75px;
}

.dataView {
  padding-top: 18px;
  border-top: 1px solid #d3d3d3;
  color: #676767;
  overflow: hidden;
  font-size: 90%;
}

.dataView span {
  float: right;
  padding-left: 20px;
}

article {
  float: left;
  width: calc(100% - 300px);
  position: relative;
}

/* article.news {
  width: 100%;
} */

aside {
  float: right;
  width: 280px;
  background: #000;
  position: relative;
}

/*一般上搞*/

h2.common,
h2.common2 {
  color: #ec6aa4;
  font-size: 176%;
  margin: 10px 0 25px 0;
  border-bottom: 1px solid #d3d3d3;
  clear: both;
  padding: 10px 0;
}

h2.common2 {
  border-bottom: none;
  margin: 0;
}

.photo2box,
.photo3Rbox {
  margin: 30px 0;
  overflow: hidden;
}

.photo2box .photo {
  float: left;
  width: calc((100% - 20px) / 2);
}

.photo2box .photo:first-child {
  margin-right: 20px;
}

.photo2box .photo img {
  width: 100%;
}

.photo figcaption {
  padding-left: 10px;
  position: relative;
  font-size: 100%;
  margin-bottom: 20px;
}

.photo figcaption::before {
  content: "|";
  position: absolute;
  left: 0;
  top: -2px;
}

.photo3Rbox .photo {
  float: left;
  border-radius: 50%;
  width: calc((100% - 40px) / 3);
  height: 0;
  padding-top: calc((100% - 40px) / 3);
  margin-right: 20px;
  position: relative;
  overflow: hidden;
}

.photo3Rbox .photo:last-child {
  margin-right: 0;
}

.photo3Rbox .photo img {
  position: absolute;
  top: 0;
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, -webkit-transform 1s;
  -o-transition: opacity 1s, transform 1s;
  transition: opacity 1s, transform 1s;
  transition: opacity 1s, transform 1s, -webkit-transform 1s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 50%;
}

.textWrapper .textArea ol li ul li {
  list-style-type: circle;
  margin: 0;
  margin-left: 20px;
}

ul.Info li {
  margin-left: 20px;
  position: relative;
}

ul.Info li::before {
  content: "";
  color: #ec6aa4;
  position: absolute;
  left: -20px;
  top: 8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5.5px 0 5.5px 8px;
  border-color: transparent transparent transparent #ec6aa5;
}

ul.Info li span {
  color: #d4357c;
  font-size: 120%;
}

ul.Info li li::before {
  display: none;
}

article .news p a {
  padding: 10px 0;
}

/*流程*/

ul.process {
  padding-bottom: 20px;
}

ul.process li {
  float: left;
  margin-right: 40px;
  position: relative;
}

ul.process li::after {
  content: "→";
  color: #3baaef;
  position: absolute;
  right: -30px;
  font-weight: bold;
}

ul.process li:last-child:after {
  display: none;
}

/*內頁表格設定 */
@media screen and (max-width: 480px) {
  .table-wrap {
    overflow-x: scroll;
  }
}

.textArea table {
  border-collapse: collapse;
  box-sizing: border-box;
  width: 100%;
  margin: 2rem 0;
}

.textArea table a {
  border: 0px #006633 solid;
}

.textArea table th {
  background-color: #0b7ac1;
  padding: 10px 10px 10px 10px;
  color: #ffffff;
  text-align: left;
}

.textArea table td {
  padding: 10px;
}

.textArea table td a {
  border: 0px #ff6600 solid;
  padding: 0px;
}

.textArea table th,
.textArea table tr,
.textArea table td {
  border: 1px #d0d0d0 solid;
}

.normalForm .foot input[type="submit"] {
  margin-bottom: 5px;
}

/*雜湊值*/

.hashing-link {
  color: #eb65a1;
  text-indent: -9999px;
  display: inline-block !important;
  margin-left: 10px;
  padding: 0 !important;
  position: relative;
}

.hashing-link::after {
  content: "";
  width: 16px;
  height: 16px;
  display: block;
  background-image: url(../images/icon/key.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 6px;
}

/*空白頁設定*/

/*==================共用end==================*/

/*=======最新消息內頁======*/

article.news h1 {
  font-size: 195%;
  margin: 10px 0;
  padding-right: 0;
  letter-spacing: 0;
}

article.news .textArea {
  line-height: 1.8;
  visibility: visible;
  text-align: justify;
  letter-spacing: 0;
  font-size: 100%;
}

article.news img {
  width: 100%;
  margin: 0 auto;
  display: block;
  height: auto;
}

article.news .textArea ul {
  /* list-style-type: disc; */
  padding-left: 20px;
}

article h4 {
  font-size: 125%;
  color: #555;
}

article.news .info {
  font-size: 110%;
}

aside li.more {
  background-color: #d4357c;
}

aside li.more a {
  color: #fff;
  padding: 10px 0;
}

.storageBox li.more a.current > span,
.storageBox li.more a:hover > span,
.storageBox li.more a:focus > span {
  color: #fff;
}

aside li.more:hover {
  background-color: #f34d97;
}

article.news .textArea iframe {
  width: 100%;
  height: 672px;
}

.wrap article .pageInfo ul,
article.news .textArea ul.Info {
  list-style: none;
}

/*玩樂景點*/

.categories li.district,
.categories li.recommend,
.categories li.topic {
  width: 33.33%;
}

.categories li.district a strong::before {
  background-image: url(../images/icon/icon_btn_district.svg);
}

.categories li.recommend a strong::before {
  background-image: url(../images/icon/icon_btn_recommend.svg);
}

.categories li.topic a strong::before {
  background-image: url(../images/icon/icon_btn_topic.svg);
}

.scenery .container {
  position: relative;
  min-height: 800px;
  max-width: 1440px;
}

.scenery {
  background-image: url(../images/img_bg_scenery.JPG);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-attachment: inherit \9;
}

*::-ms-backdrop,
.scenery {
  background-attachment: inherit;
}

.scenery.s01 {
  background-image: url(../images/S-01.JPG);
}

.scenery.s02 {
  background-image: url(../images/S-02.JPG);
}

.scenery.s03 {
  background-image: url(../images/S-03.JPG);
}

.scenery.s04 {
  background-image: url(../images/S-04.JPG);
}

.scenery.s05 {
  background-image: url(../images/S-05.JPG);
}

.scenery.s06 {
  background-image: url(../images/S-06.JPG);
}

.scenerymap {
  position: absolute;
  bottom: 110px;
  left: 140px;
  opacity: 0.9;
  -o-transition: all 0.15s linear;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}

.scenerymap:hover {
  opacity: 1;
  -o-transition: all 0.15s linear;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}

.scenerymap .mapL-DistrictName {
  position: relative;
  width: 733px;
  height: 500px;
  padding-bottom: 30%;
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: center;
}

.scenerymap .mapL-DistrictName {
  background-image: url(../images/mapLBg.png);
}

.scenerymap .mapL-DistrictName i.mapL-District {
  position: absolute;
  top: 26px;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 90%;
  background-position: top center;
  font-size: 0;
  opacity: 0;
  -o-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.scenerymap .mapL-DistrictName i.mapL-District.open {
  opacity: 1;
}

.scenerymap .mapL-DistrictName i.D01 {
  background-image: url(../images/map_01.png);
}

.scenerymap .mapL-DistrictName i.D02 {
  background-image: url(../images/map_02.png);
}

.scenerymap .mapL-DistrictName i.D03 {
  background-image: url(../images/map_03.png);
}

.scenerymap .mapL-DistrictName i.D04 {
  background-image: url(../images/map_04.png);
}

.scenerymap .mapL-DistrictName i.D05 {
  background-image: url(../images/map_05.png);
}

.scenerymap .mapL-DistrictName i.D06 {
  background-image: url(../images/map_06.png);
}

.scenerymap .mapL-DistrictName a {
  display: block;
  color: #111;
  position: absolute;
  font-weight: bold;
}

.scenerymap .mapL-DistrictName a:hover {
  position: absolute;
}

.scenerymap .mapL-DistrictName a.DistrictName_1 {
  top: 95px;
  left: 165px;
  padding: 30px;
}

.scenerymap .mapL-DistrictName a.DistrictName_2 {
  top: 65px;
  left: 260px;
  padding: 10px 50px;
}

.scenerymap .mapL-DistrictName a.DistrictName_3 {
  top: 106px;
  left: 390px;
  padding: 40px 5px;
}

.scenerymap .mapL-DistrictName a.DistrictName_4 {
  top: 205px;
  left: 440px;
  padding: 25px;
}

.scenerymap .mapL-DistrictName a.DistrictName_5 {
  top: 310px;
  left: 105px;
  padding: 30px 0;
}

.scenerymap .mapL-DistrictName a.DistrictName_6 {
  top: 280px;
  left: 510px;
  padding: 10px 70px 0 0;
}

.scenerybox {
  background-color: #ec6aa4;
  padding: 40px;
  margin-right: 10%;
  width: 400px;
}

.scenerybox h2 {
  color: #fff;
  position: relative;
  padding-left: 60px;
  font-weight: bold;
}

.scenerybox h2::before {
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  top: 50%;
  margin-top: -25px;
  width: 100%;
  height: 50px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../images/icon/icon_lighthouse2_w.svg);
}

.scenerybox ul {
  margin-top: 15px;
}

.scenerybox li a {
  color: #fff67f;
  line-height: 2;
  font-size: 110%;
}

.scenerybox li a:hover {
  padding-left: 20px;
}

/*景點搜尋*/

.ecNetUlTabContent.SearchBox {
  margin-top: 20px;
}

/*必玩景點*/

ul.rowbox {
  margin: 0 auto;
  min-height: 50px;
}

ul.rowbox li {
  display: inline-block;
  width: calc((100% - 75px) / 3);
  margin: 10px;
  position: relative;
  vertical-align: top;
  padding: 0;
}

ul.rowbox li figure {
  width: 100%;
  overflow: hidden;
}

ul.rowbox li figure.crown-coast::after {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  background-image: url('../images/icon/logo-crowncoast.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
  position: absolute;
  top: 15px;
  right: 15px;
}

ul.rowbox li figure span.imgLiquid {
  display: block;
  height: 0;
  padding-bottom: 65%;
  -o-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

ul.rowbox li:hover figure span.imgLiquid {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -o-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

ul.rowbox li figure span img {
  border-radius: 0;
}

ul.rowbox li .info {
  background: #fff;
  padding: 15px 75px 40px 15px;
  position: relative;
  border: 1px solid #3baaef;
  border-top: none;
  min-height: 160px;
}

ul.rowbox li .info::before {
  content: "";
  display: block;
  position: absolute;
  right: 20px;
  top: 60px;
  margin-top: -40px;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: contain;
}

ul.rowbox li .info h4,
ul.rowbox li .info .h4 {
  font-size: 100%;
  color: #0b7ac1;
  padding-top: 15px;
}

ul.rowbox li .info h3,
ul.rowbox li .info .h3 {
  font-size: 140%;
  color: #3fabef;
  font-weight: bold;
  margin: 0;
}

ul.rowbox li .info h4.good,
ul.rowbox li .info .good {
  position: absolute;
  right: 32px;
  text-align: left;
  top: 80px;
  font-weight: bold;
  font-size: 120%;
}

ul.rowbox li a.moreBtn {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  top: 0;
  left: 0;
  text-indent: -9999px;
  color: #0b7ac1;
}

ul.rowbox li a.moreBtn:hover {
  color: #eb65a1;
}

ul.recommendbox li .info::before {
  background-image: url(../images/icon/icon_btn_recommend.svg);
}

/*景點主題推薦*/

.topicwapper {
  background-image: url(../images/topicBG.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}

.topicbox {
  position: relative;
  margin-bottom: 8%;
}

.topicbox figure {
  float: right;
}

.topicbox figure span img {
  width: 70%;
}

.topicInfobox {
  position: absolute;
  background: #fff;
  top: 75px;
  left: calc((100% - 1080px) / 2);
  width: calc((100% - 120px) / 3);
  min-height: 350px;
}

.topicInfobox:hover {
  background: #3baaef;
}

.topicInfo {
  position: relative;
  padding: 20px 40px;
}

.topicInfo h2 {
  font-weight: bold;
  padding-left: 65px;
  position: relative;
}

.topicInfobox:hover .topicInfo h2,
.topicInfobox:hover .topicInfo li a {
  color: #fff;
}

.topicInfobox:hover .topicInfo li a:hover {
  padding-left: 20px;
}

.topicInfo h2:before {
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  top: 50%;
  margin-top: -25px;
  width: 100%;
  height: 50px;
  background-repeat: no-repeat;
  background-size: contain;
}

.tib_1 .topicInfo h2::before {
  background-image: url(../images/icon/icon_btn_topic.svg);
}

.tib_1:hover .topicInfo h2::before {
  background-image: url(../images/icon/icon_btn_topic_w.svg);
}

.tib_2 .topicInfo h2::before {
  background-image: url(../images/icon/icon_btn_temple.svg);
}

.tib_2:hover .topicInfo h2::before {
  background-image: url(../images/icon/icon_btn_temple_w.svg);
}

.tib_3 .topicInfo h2::before {
  background-image: url(../images/icon/icon_btn_bicycle.svg);
}

.tib_3:hover .topicInfo h2::before {
  background-image: url(../images/icon/icon_btn_bicycle_w.svg);
}

.tib_4 .topicInfo h2::before {
  background-image: url(../images/icon/icon_btn_mountains.svg);
}

.tib_4:hover .topicInfo h2::before {
  background-image: url(../images/icon/icon_btn_mountains_w.svg);
}

.tib_5 .topicInfo h2::before {
  background-image: url(../images/icon/icon_btn_beach.svg);
}

.tib_5:hover .topicInfo h2::before {
  background-image: url(../images/icon/icon_btn_beach_w.svg);
}

.tib_6 .topicInfo h2::before {
  background-image: url(../images/icon/icon_btn_garden.svg);
}

.tib_6:hover .topicInfo h2::before {
  background-image: url(../images/icon/icon_btn_garden_w.svg);
}

.mContent-contArea .container .topicInfo p {
  padding-top: 15px;
}

.topicInfo ul {
  margin-top: 15px;
}

.topicInfo li a {
  line-height: 1.8;
  font-size: 120%;
}

.topicInfo a.topicbtn {
  position: absolute;
  background: #d4357c;
  color: #fff;
  padding: 5px 30px;
  border-radius: 5px;
  right: 35px;
  font-size: 110%;
  font-weight: bold;
  bottom: 30px;
}

.topicInfobox:hover .topicInfo a.topicbtn {
  background: #fff;
  color: #3baaef;
}

.topicbox:nth-child(odd) figure {
  padding-right: calc((100% - 1080px) / 2);
}

.topicbox:nth-child(odd) figure span img {
  float: right;
}

.topicwapper .topicbox:nth-child(even) {
  padding-left: calc((100% - 1080px) / 2);
}

.topicwapper .topicbox:nth-child(even) figure {
  float: left;
}

.topicwapper .topicbox:nth-child(even) .topicInfobox {
  left: inherit;
  right: calc((100% - 1080px) / 2);
}

/*景點內頁*/

.mContent .wrap {
  padding-top: 80px;
}

.wrap article h1 {
  font-weight: bold;
  padding-bottom: 10px;
  font-size: 230%;
  padding-right: 145px;
}

.wrap article h2 {
  color: #eb65a1;
  font-size: 160%;
  margin-bottom: 10px;
}

.wrap article .pageInfo h2 {
  padding: 40px 0 10px 63px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.wrap article .pageInfo.dictionary h2 {
  background: url(../images/icon/icon_btn_dictionary.svg) no-repeat left 0px/40px
    40px;
  padding: 0px 50px 10px 50px;
}

.wrap article .pageInfo.traffic h2 {
  background: url(../images/icon/icon_btn_traffic.svg) no-repeat left 30px/50px
    50px;
}

.wrap article .pageInfo.travel h2 {
  background: url(../images/icon/icon_btn_travel.svg) no-repeat left 30px/50px
    50px;
}

.wrap article .pageInfo.pagemapbox h2 {
  background: url(../images/icon/icon_btn_pagemap.svg) no-repeat left 30px/50px
    50px;
  border-bottom: none;
}

.wrap article .pageInfo.morebox h2 {
  background: url(../images/icon/icon_btn_morebox.svg) no-repeat left 30px/55px
    55px;
}

.wrap article .pageInfo.barrier-free h2 {
  background: url(../images/icon/icon_btn_tour04_blue.svg) no-repeat left 30px/50px
    50px;
}

.wrap article .pageInfo.motorcycle h2 {
  background: url(../images/icon/icon_traffic_motorcycle.svg) no-repeat left
    30px/50px 50px;
}

.wrap article .pageInfo.bus h2 {
  background: url(../images/icon/icon_traffic_bus.svg) no-repeat left 30px/50px
    50px;
}

.wrap article .pageInfo.bus2 h2 {
  background: url(../images/icon/icon_btn_tour07.svg) no-repeat left 30px/50px
    50px;
}

.wrap article .pageInfo.hashtag h2 {
  background: url(../images/icon/icon_btn_hashtag.svg) no-repeat left 30px/50px
    50px;
}

.wrap article .pageInfo.voice h2 {
  background: url(../images/icon/icon_btn_voice.svg) no-repeat left 30px/50px
    50px;
}

.wrap article .pageInfo.service h2 {
  background: url(../images/icon/icon_btn_service.svg) no-repeat left 30px/50px
    50px;
}

.wrap article .pageInfo.muslimservice h2 {
  background: url(../images/icon/icon_btn_muslimservice.svg) no-repeat left 30px/50px
    50px;
}

.morefestival h2 {
  background: url(../images/icon/icon_fireworks.svg) no-repeat left 30px/55px
    55px;
}

.muslim h2 {
  background: url(../images/icon/icon_btn_tour06.svg) no-repeat left 30px/55px
    55px;
}

.wrap article h3 {
  color: #0b7ac1;
  font-size: 1.5rem;
}

.wrap article ul,
.wrap article ol {
  line-height: 1.8;
  margin: 10px 0;
}

.wrap article ol {
  list-style-type: decimal;
  padding-left: 25px;
}

.wrap article ol li {
  margin: 10px 0;
}

.wrap article strong {
  font-weight: bold;
  color: #0b7ac1;
}

.textArea {
  color: #111;
}

.wrap article .dataView {
  margin: 50px 0;
}

.wrap article .dataView span {
  padding-bottom: 10px;
}

.pageInfo.dictionary {
  padding-top: 30px;
}

.pageInfo.hashtag,
.pageInfo.voice {
  margin-bottom: 20px;
}

.pageInfo.hashtag a {
  padding: 10px;
  border: 1px solid #ec6aa4;
  border-radius: 5px;
  margin-right: 10px;
  display: inline-block;
  margin-bottom: 10px;
}

.pageInfo.hashtag a:hover {
  color: #0b7ac1;
  border: 1px solid;
}

.pageInfo.voice audio {
  width: 100%;
}

audio::-webkit-media-controls-panel {
  background-color: #e0f3ff;
}

audio::-webkit-media-controls-timeline {
  border: #3baaef;
}

.pageInfo.service ul li,
.pageInfo.muslimservice ul li {
  display: inline-block;
  margin-right: 40px;
  margin-bottom: 10px;
}

.pageInfo.service ul li::before,
.pageInfo.muslimservice ul li::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 20px;
  background-color: #3ba9f0;
  border-radius: 5px;
  vertical-align: middle;
  margin-right: 5px;
  margin-top: -3px;
}

.recommendBox {
  background: #d4357c;
  border-radius: 5px;
  position: absolute;
  top: 0;
  right: 0;
  width: 130px;
  height: 60px;
}

.recommendBox .RecommendBtn {
  float: left;
  width: 40%;
  height: 60px;
  border-right: 1px solid #fff;
}

.recommendBox a {
  font-size: 0;
  display: block;
  text-align: center;
  margin: 10px 0 10px 4px;
  color: #ffffff;
}

.recommendBox a img {
  width: 80%;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.recommendBox a:hover img {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.recommendBox .RecommendNumber {
  color: #fff;
  font-size: 120%;
  text-align: center;
  vertical-align: middle;
  padding-top: 20px;
}

.recommendBox:hover,
.recommendBox.ok {
  background: #f54593;
}

/*景點周邊列表頁*/

.Peripherybox {
  position: relative;
}

.Peripherybox ul.rowbox {
  padding: 0;
}

.Peripherybox h1 {
  padding-right: 260px;
}

.gomap {
  position: absolute;
  right: 5%;
  top: 80px;
}

.gomap a {
  display: block;
  padding: 15px;
  border-radius: 10px;
  background-color: #d4357c;
  color: #fff;
}

.gomap a span {
  font-size: 110%;
  font-weight: bold;
  padding: 20px 0 20px 50px;
  background: url(../images/icon/icon_btn_district_w.svg) no-repeat left
    center/35px;
  color: #fff;
}

.gomap2 a:hover {
  background: #ef4792;
}

.gomap2 a {
  display: inline-block;
  padding: 15px;
  border-radius: 10px;
  background-color: #d4357c;
  color: #fff;
}

.gomap2 a span {
  font-size: 110%;
  font-weight: bold;
  padding: 20px 0 20px 50px;
  background: url(../images/icon/icon_btn_district_w.svg) no-repeat left
    center/35px;
  color: #fff;
}

.gomap2 a:hover {
  background: #ef4792;
}

ul.bookmark {
  clear: both;
  padding-bottom: 0;
  text-align: center;
  margin: 50px 0;
  border-bottom: 1px solid #555;
}

ul.bookmark li {
  display: inline-block;
  margin: 0 20px;
  position: relative;
  border: 1px solid #fff;
}

ul.bookmark li.current,
ul.bookmark li:hover {
  border: 1px solid #555;
  border-bottom: 1px solid #fff;
}

ul.bookmark li.current::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: #fff;
  z-index: 2;
}

ul.bookmark li a {
  display: block;
  padding: 10px 80px;
  color: #676767;
}

ul.bookmark li.current a {
  color: #d4357c;
}

ul.bookmark li a span {
  font-size: 140%;
  font-weight: bold;
  padding: 20px 0 20px 50px;
}

.Peripherybox ul.bookmark li:nth-child(1) a span {
  background: url(../images/icon/icon_btn_map01.svg) no-repeat left center/40px;
}

.Peripherybox ul.bookmark li:nth-child(2) a span {
  background: url(../images/icon/icon_btn_map02.svg) no-repeat left center/35px;
}

.Peripherybox ul.bookmark li:nth-child(3) a span {
  background: url(../images/icon/icon_btn_map03.svg) no-repeat left center/40px;
}

/*相簿*/

.attractionsContent {
  width: 100%;
  height: 0;
  padding-bottom: 55%;
  position: relative;
  /* margin-bottom: 1.5rem; */
}

.attractionsContent + .textWrapper {
  margin-top: 40px;
}

.attractionsContent .album {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.attractionsContent .album > ul {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

.attractionsContent .album > ul li a {
  width: 100%;
  height: 100%;
  display: block;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

.attractionsContent .album > ul li a:focus {
  -webkit-box-shadow: inset 0 0 0 0.2rem #eb65a1;
  box-shadow: inset 0 0 0 0.2rem #eb65a1;
  position: relative;
  z-index: 2;
}

.attractionsContent .album .slick-list {
  width: 100%;
  height: 100%;
  position: absolute;
}

.attractionsContent .album .slick-track {
  height: 100%;
}

.attractionsContent .album .slick-next,
.attractionsContent .album .slick-prev {
  width: 50px;
  height: 50px;
  display: block;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.6);
  background-size: 30%;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: all 0.8s;
  -o-transition: all 0.8s;
  transition: all 0.8s;
  border-radius: 100%;
}

.attractionsContent .album .slick-next::before,
.attractionsContent .album .slick-prev::before {
  content: "";
}

.attractionsContent .album .slick-next:hover,
.attractionsContent .album .slick-prev:hover,
.attractionsContent .album .slick-next:focus,
.attractionsContent .album .slick-prev:focus,
.attractionsContent .album .slick-next:active,
.attractionsContent .album .slick-prev:active {
  background-color: #111;
}

.attractionsContent .album .slick-next {
  right: 1%;
  top: 50%;
  background-image: url(../images/icon/right.svg);
}

.attractionsContent .album .slick-prev {
  left: 1%;
  top: 50%;
  background-image: url(../images/icon/left.svg);
}

.attractionsContent .album .slick-dots {
  bottom: 3%;
}

.attractionsContent .album .slick-dots li {
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 100%;
  opacity: 0.6;
  margin: 0 10px;
}

.attractionsContent .album .slick-dots li.slick-active {
  opacity: 1;
}

.attractionsContent .album .slick-dots li button {
  width: 100%;
  height: 100%;
}

.attractionsContent .album .slick-dots li button:focus::before {
  -webkit-box-shadow: inset 0 0 0 0.2rem #eb65a1;
  box-shadow: inset 0 0 0 0.2rem #eb65a1;
  opacity: 1;
}

.attractionsContent .album .slick-dots li button::before {
  color: transparent;
}

.attractionsContent .album .slick-prev:focus,
.attractionsContent .album .slick-next:focus {
  -webkit-box-shadow: inset 0 0 0 0.2rem #eb65a1;
  box-shadow: inset 0 0 0 0.2rem #eb65a1;
  opacity: 1;
}

.attractionsContent .video {
  position: absolute;
  width: 100%;
  height: 100%;
  /* background-color: #111; */
  display: none;
  /* margin-top: 10px; */
}

.attractionsContent .video video,
.attractionsContent .video iframe {
  width: 100%;
  /* height: 100%; */
  height: calc(100% - 10px);
  position: absolute;
  left: 0;
  top: 10px;
}

.container article h2,
.container article h3 {
  font-weight: bold;
}

.container article h3 {
  margin: 5px 0;
}
.container article h3 a{
  cursor: auto;
}

/*相簿/影音切換按鈕*/

.attractionsBox .btnBox {
  text-align: center;
  margin-bottom: 1.5rem;
  width: 100%;
  background-color: #e5f5fb;
  margin: 0;
  display: flex;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow: hidden;
}

@media screen and (max-width: 812px) {
  .attractionsBox .btnBox {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }

  @media screen and (max-width: 480px) {
    .attractionsBox .btnBox {
      margin-top: 62px;
    }
  }
}

.attractionsBox .btnBox li {
  flex: 1;
  display: inline-block;
}

.attractionsBox .btnBox li .toolBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 0;
}

.attractionsBox .btnBox li .toolBtn:hover, 
.attractionsBox .btnBox li .toolBtn:focus-visible,
.attractionsBox .btnBox li .toolBtn.current  {
  /* background-color: #FF6DA7; */
}
.attractionsBox .btnBox li .toolBtn:hover span , 
.attractionsBox .btnBox li .toolBtn:focus-visible span ,
.attractionsBox .btnBox li .toolBtn.current span  {
  color: #d4357c;
}
.attractionsBox .btnBox li .videoBtn:hover::before , 
.attractionsBox .btnBox li .videoBtn:focus-visible::before ,
.attractionsBox .btnBox li .videoBtn.current::before  {
  background-image: url(../images/icon/attr_video_hover.svg);
}
.attractionsBox .btnBox li .albumBtn:hover::before , 
.attractionsBox .btnBox li .albumBtn:focus-visible::before ,
.attractionsBox .btnBox li .albumBtn.current::before  {
  background-image: url(../images/icon/attr_photo_hover.svg);
}
.attractionsBox .btnBox li .vrBtn:hover::before , 
.attractionsBox .btnBox li .vrBtn:focus-visible::before ,
.attractionsBox .btnBox li .vrBtn.current::before  {
  background-image: url(../images/icon/attr_360VR_hover.svg);
}

.attractionsBox .btnBox li .toolBtn::before {
  content: '';
  display: inline-block;
  width: 38px;
  height: 38px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: .5em;
  /* background-color: #0b7ac1; */
}

@media screen and (max-width: 812px) {
  .attractionsBox .btnBox li .toolBtn::before {
    width: 30px;
    height: 30px;
  }

}


.attractionsBox .btnBox li .toolBtn span {
  color: #0b7ac1;
  font-weight: 600;
  font-size: 1rem;
}

.attractionsBox .videoBtn::before {
  background-image: url(../images/icon/attr_video.svg);
}

.attractionsBox .albumBtn::before {
  background-image: url(../images/icon/attr_photo.svg);
}

.attractionsBox .vrBtn::before {
  background-image: url(../images/icon/attr_360VR.svg);
}

/*內頁地圖*/

.pagemapbox .linkBox {
  text-align: center;
  margin-bottom: 1.5rem;
}

.pagemapbox .linkBox li {
  display: inline-block;
  margin: 0 5px;
}

.pagemapbox .linkBox li a {
  border-radius: 100%;
  display: table;
  text-align: center;
  border: 2px #fff solid;
  width: 120px;
  height: 120px;
  background-repeat: no-repeat;
  background-position: center 30%;
  background-size: 40%;
  background-color: #3baaef;
  position: relative;
  -o-transition: all 0s linear;
  -webkit-transition: all 0s linear;
  transition: all 0s linear;
}

.pagemapbox .linkBox li a:hover {
  background-color: #ec6aa4;
  -o-transition: all 0s linear;
  -webkit-transition: all 0s linear;
  transition: all 0s linear;
}

.pagemapbox .linkBox li a:hover::after,
.pagemapbox .linkBox li a.current::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  margin-left: -20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 20px 0 20px;
  border-color: #ec6aa4 transparent transparent transparent;
}

.pagemapbox .linkBox li a span {
  display: table-cell;
  vertical-align: middle;
  color: #fff;
  padding-top: 55%;
  font-size: 1rem;
}

.pagemapbox .pageMap {
  width: 100%;
  height: 600px;
  background: #a3ccff;
  position: relative;
}

.pagemapbox .pageMap iframe {
  width: 100%;
  height: 600px;
}

.wrap article ul.pagemapInfoBox,
div.pagemapInfoBox {
  position: absolute;
  right: -1px;
  top: 0;
  width: calc((100%) / 4);
  height: 600px;
  background: #3baaef;
  margin-top: 0;
}

ul.pagemapInfoBox li.pagemapInfo,
.wrap article ul.pagemapInfo {
  position: relative;
  margin: 30px 40px 10px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

ul.pagemapInfoBox li.pagemapInfo figure {
  width: 100%;
  overflow: hidden;
}

ul.pagemapInfoBox li.pagemapInfo figure span.imgLiquid {
  display: block;
  height: 0;
  padding-bottom: 65%;
  -o-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

ul.pagemapInfoBox li.pagemapInfo figure span img {
  border-radius: 0;
}

ul.pagemapInfoBox li.pagemapInfo h3 {
  color: #fff;
}

ul.pagemapInfoBox li.pagemapInfo a.moreBtn {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  top: 0;
  left: 0;
  text-indent: -9999px;
  position: absolute;
}

div.pagemapInfoBox {
  padding: 25px;
  color: #fff;
  /*height: 450px;*/
}

.wrap article ul.pagemapInfo {
  border-bottom: none;
  margin: 0;
}

.wrap article ul.pagemapInfo li {
  width: 100%;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
}

.wrap article ul.pagemapInfo li a {
  background: #fff;
  border-radius: 5px;
  display: block;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  /*height: 44pt;*/
}

.wrap article ul.pagemapInfo li a:hover {
  background: #ec6aa4;
  color: #fff;
}

.wrap article ul.pagemapInfo li a span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 6px 0 6px 50px;
  text-align: left;
  line-height: 1.3;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 35px;
}

.wrap article ul.pagemapInfo li:nth-child(1) a span {
  background-image: url(../images/icon/icon_btn_map01.svg);
}

.wrap article ul.pagemapInfo li:nth-child(2) a span {
  background-image: url(../images/icon/icon_btn_map02.svg);
  background-size: 40px;
}

.wrap article ul.pagemapInfo li:nth-child(3) a span {
  background-image: url(../images/icon/icon_btn_map03.svg);
  background-size: 40px;
}

.wrap article ul.pagemapInfo li:nth-child(4) a span {
  background-image: url(../images/icon/icon_btn_district.svg);
}

.wrap article ul.pagemapInfo li:nth-child(5) a span {
  background-image: url(../images/icon/icon_btn_pagemap.svg);
}

.wrap article ul.pagemapInfo li:nth-child(1) a:hover span {
  background-image: url(../images/icon/icon_btn_map01_w.svg);
}

.wrap article ul.pagemapInfo li:nth-child(2) a:hover span {
  background-image: url(../images/icon/icon_btn_map02_w.svg);
}

.wrap article ul.pagemapInfo li:nth-child(3) a:hover span {
  background-image: url(../images/icon/icon_btn_map03_w.svg);
}

.wrap article ul.pagemapInfo li:nth-child(4) a:hover span {
  background-image: url(../images/icon/icon_btn_district_w.svg);
}

.wrap article ul.pagemapInfo li:nth-child(5) a:hover span {
  background-image: url(../images/icon/icon_btn_pagemap_w.svg);
}

.wrap article .pageInfo.downloadArea h2 {
  border-bottom: none;
  background: url(../images/icon/icon_btn_download.svg) no-repeat left 30%/35px;
  padding: 0px 50px 0px 45px;
}

/*內頁相關連結*/

.morebox {
  clear: both;
}

.morebox .link {
  overflow: hidden;
}

.morebox .link li {
  float: left;
  margin-right: 20px;
}

.morebox .link li a {
  padding: 5px 20px;
  background-color: #d4357c;
  display: inline-block;
  border-radius: 5px;
  margin-bottom: 10px;
}

.morebox .link li a:hover {
  background-color: #f34d97;
}

.morebox .link li a span {
  color: #fff;
}

/*側邊選單裡的下拉式收納選單*/

.storageBtn {
  display: block;
  background-color: #0b7ac1;
  padding: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.storageBtn > span {
  display: block;
  color: #fff;
  position: relative;
  min-height: 30px;
  padding-right: 40px;
  font-size: 1.2rem;
  margin-left: 10px;
}

.storageBtn.cut > span::after {
  content: "";
  width: 25px;
  height: 25px;
  display: block;
  background: url(../images/icon/down.svg) no-repeat center/contain;
  position: absolute;
  right: 0;
  top: calc((100% - 25px) / 2);
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.storageBtn.cut.selt > span::after {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.storageBox {
  background-color: #ececec;
  display: none;
}

.storageBox li {
  padding: 0 1em;
}

.storageBox li a {
  padding: 10px 0;
  display: block;
  border-top: 1px solid #dedede;
  color: #595757;
}

.storageBox li a:hover,
.storageBox li a.current {
  color: #ff2d8b;
}

.storageBox li:first-child a,
.storageBox li.more a {
  border: none;
}

.storageBox li a > span {
  letter-spacing: 0;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  line-height: 1.5;
}

/*===============遊程推薦==================*/

.categories.tour li {
  width: calc((100% - 1px) / 7);
}

.categories.tour li a {
  padding-left: 20px;
  padding-top: 75px;
}

.categories.tour li a strong {
  padding-left: 0;
  display: block;
  font-size: 1.125rem;    
  font-weight: 700;
}
.categories.tour li a strong::before {
  left: 50%;
  top: -60px;
  /* margin-left: -25px; */
  /* transform: translateX(-50%); */
  margin-top: 0;
}

@media screen and (min-width:481px){
  .categories.tour li a strong::before {
    transform: translateX(-50%);
  }
}

/*.categories.tour li:nth-child(1) a strong:before {
background-image: url(../images/icon/icon_btn_tour01.svg);
}*/
/* ./common/images/icon/nav-4-8.svg */
.categories.tour li:nth-child(1) a strong::before {
  background-image: url(../images/icon/nav-4-1.svg);
}

.categories.tour li:nth-child(2) a strong::before {
  background-image: url(../images/icon/nav-4-2.svg);
}

.categories.tour li:nth-child(3) a strong::before {
  background-image: url(../images/icon/nav-4-3.svg);
}

.categories.tour li:nth-child(4) a strong::before {
  background-image: url(../images/icon/nav-4-4.svg);
}

.categories.tour li:nth-child(5) a strong::before {
  background-image: url(../images/icon/nav-4-5.svg);
}

.categories.tour li:nth-child(6) a strong::before {
  background-image: url(../images/icon/nav-4-6.svg);
}

.categories.tour li:nth-child(7) a strong::before {
  background-image: url(../images/icon/nav-4-7.svg);
}

.categories.tour li:nth-child(8) a strong::before {
  background-image: url(../images/icon/nav-4-8.svg);
}

.tourwapper .topicInfo {
  min-height: 350px;
}

.tourwapper .topicInfo h2 {
  padding-left: 0;
}

.tourwapper .topicInfobox:hover .topicInfo p {
  color: #fff;
}

.tourwapper .topicInfo a.moreBtn {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  top: 0;
  left: 0;
  text-indent: -9999px;
}

.tourwapper .topicbox:nth-child(even) {
  padding-left: calc((100% - 1080px) / 2);
}

.tourwapper .topicbox:nth-child(even) figure {
  float: left;
}

.tourwapper .topicbox:nth-child(even) .topicInfobox {
  left: inherit;
  right: calc((100% - 1080px) / 2);
}

.pageInfo.muslim {
  padding-top: 50px;
}

.pageInfo .col {
  margin-top: 25px;
  overflow: hidden;
  border: 1px solid #aedaec;
  padding: 30px;
  border-radius: 10px;
}

.pageInfo .col-l {
  width: 45%;
}

.pageInfo .col-r {
  width: calc((55% - 30px));
}

article.news .pageInfo img {
  width: 100%;
  margin: 0;
  border-radius: 10px;
  vertical-align: middle;
}

.bficon li {
  margin-bottom: 10px;
}

.festivalList ul li ul.bficon {
  padding-top: 0;
}

article.news .bficon li img {
  margin: 0;
  width: 35px;
  height: 35px;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
}

article.news .bficon li.bf08 img {
  width: 100px;
}

.bfInfo {
  margin: 20px 0;
}

.bfInfo b {
  background-color: #c64f0c;
  color: #fff;
  padding: 5px 10px;
}

/*穆斯林專區*/

.Muslim_friendly {
  background-color: #9ad4e0;
  position: relative;
}

.wrap article .Muslim_friendly h2 {
  text-align: center;
  padding-top: 20px;
  color: #105188;
  font-size: 170%;
  font-weight: bold;
}

.muslimbox {
  background-color: #72bdcb;
  margin: 15px;
  padding: 15px;
}

article.news .muslimbox img {
  width: 40%;
  display: inline-block;
  vertical-align: top;
  border: 5px solid #fff;
}

.muslimcontent {
  display: inline-block;
  vertical-align: top;
  margin-left: 20px;
  box-sizing: border-box;
  width: 55%;
}

.wrap article .muslimcontent h3 {
  font-size: 170%;
  color: #125188;
  margin: 10px 0;
}

.muslimcontent ul {
  list-style: none;
  margin-left: 0px;
  font-size: 130%;
  letter-spacing: 1.2px;
  line-height: 1.8;
  color: #424242;
}

.muslimcontent a {
  color: #8b0015;
}

.muslimcontent a:hover {
  color: #b6011d;
}

.muslimfacility {
  list-style: none;
  margin-left: 0;
  text-align: left;
}

.muslimfacility li {
  display: inline-block;
  background-color: #105188;
  color: #ffffff;
  margin: 5px 0;
  padding: 8px 15px;
  text-align: left;
}

/*===========節慶活動===========*/

.mContent.fullbg {
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: top;
  background-color: #5abff6;
  padding-bottom: 560px;
  background-attachment: inherit \9;
}

*::-ms-backdrop,
.mContent.fullbg {
  background-attachment: inherit;
}

.mContent.fullbg.P05 {
  background-color: #0b7ac1;
  background-image: url(../images/fullBg_p05.png);
  background-size: contain \9;
}

*::-ms-backdrop,
.mContent.fullbg.P05 {
  background-size: contain;
}

.mContent.fullbg.P05:before {
  content: "";
  width: 100%;
  height: 0;
  padding-bottom: 30%;
  background-image: url(../images/kite.png);
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50px;
  right: 0;
  -webkit-animation: floating 5s infinite;
  animation: floating 5s infinite;
}

@-webkit-keyframes floating {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
  }
}

@keyframes floating {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
  }
}

.mContent.fullbg.P05::after {
  content: "";
  width: 100%;
  height: 0;
  padding-bottom: 30%;
  background-image: url(../images/fullBg_p05-3.png);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 0;
}

.mContent.fullbg .breadcumb li,
.mContent.fullbg .breadcumb li:before,
.mContent.fullbg .breadcumb li a,
.mContent.fullbg .mContent-hdr h1,
.mContent.fullbg .mContent-hdr p,
.mContent.fullbg {
  color: #fff;
}

.mContent.fullbg .breadcumb li a:hover {
  color: #ffa6ce;
  text-shadow: none;
}

.mContent.fullbg .breadcumb li.home a {
  background-image: url(../images/icon/icon_home_w.svg);
}

.mContent.fullbg .breadcumb li.home a:hover {
  background-image: url(../images/icon/icon_home_pk.svg);
}

.mContent.fullbg .mContent-hdr h1 {
  text-shadow: 2px 2px 5px #00000070;
}

.mContent.fullbg .mContent-hdr h1 i::before,
.mContent.fullbg .mContent-hdr h1 i::after,
.mContent.fullbg .mContent-hdr h2 i::before,
.mContent.fullbg .mContent-hdr h2 i::after {
  background-color: #fff;
}

/*時間軸*/

.festivalList {
  margin: 0 10%;
}

.festivalList ul li {
  display: block;
  position: relative;
}

.festivalList ul li .festivalSeason {
  position: absolute;
  left: 0;
  top: 0;
}

.festivalList ul li::before {
  content: "";
  display: block;
  width: 4px;
  height: 100%;
  background: #ec6aa4;
  position: absolute;
  left: 43px;
}

.festivalList ul li:first-child::before {
  /* height: 80%; 老鷹先隱藏 */
  /*top:16%;*/
}

.festivalList ul li:last-child::before {
  /* height: calc((100% + 100px)); 老鷹先隱藏 */
}

.festivalList ul li#winter:last-child::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -120px;
  left: 32px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #ec6aa4;
}

.festivalList ul li .festivalSeason .circleBtn {
  background-color: #d4357c;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.festivalList ul li .festivalSeason .circleBtn span {
  color: #fff;
  font-weight: bold;
  font-size: 230%;
}

article.news .textArea .festivalList ul li ul {
  padding-top: 20px;
  padding-left: 0;
}

.festivalList ul li ul li.festivalInfo {
  margin: 80px 0;
  padding-left: 100px;
  position: relative;
  padding-top: 100px;
}

.festivalList ul li ul li.festivalInfo .info {
  width: 67%;
  float: left;
}

.festivalList ul li ul li.festivalInfo .info h3,
.festivalList ul li ul li.festivalInfo .info h2 {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.festivalList ul li ul li.festivalInfo .info p {
  padding-left: 10px;
  border-left: 1px solid #fff;
  margin: 30px 0;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  padding-right: 85px;
}

.festivalList ul li ul li.festivalInfo::after {
  content: "";
  display: block;
  position: absolute;
  top: 115px;
  left: 32px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #ec6aa4;
}

.festivalList ul li ul li.festivalInfo .info a.more {
  background-color: #fff;
  padding: 11px 20px;
  border-radius: 5px;
}

.festivalList ul li ul li.festivalInfo .info a.more span {
  color: #0b7ac1;
  vertical-align: middle;
  margin: 0 auto;
}

.festivalList ul li ul li.festivalInfo .festivalimg {
  width: 30%;
  display: inline-block;
}

.festivalList ul li ul li.festivalInfo .festivalimg figure {
  float: right;
}

.festivalList ul li ul li.festivalInfo .festivalimg figure span {
  display: block;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #fff center center no-repeat;
  -webkit-transition: -webkit-box-shadow 0.3s;
  transition: -webkit-box-shadow 0.3s;
  -o-transition: box-shadow 0.3s;
  transition: box-shadow 0.3s;
  transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
  margin: 0 auto;
  background-size: contain;
  -webkit-box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
  border: 2px solid #fff;
}

.festivalList ul li ul li.festivalInfo .festivalimg figure span img {
  border-radius: 50%;
}

/*增加滾動視差*/

.festivalList ul li#summer::after {
  /* content: ""; 老鷹先隱藏*/
  width: 100%;
  height: 0;
  padding-bottom: 30%;
  background-image: url(../images/festival/img02_12-2.png);
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -70px;
  left: 0;
  -webkit-transition: all 1.5s ease-out;
  -o-transition: all 1.5s ease-out;
  transition: all 1.5s ease-out;
  -webkit-animation: baloon_1 3s infinite;
  animation: baloon_1 3s infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

@-webkit-keyframes baloon_1 {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  50% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

@keyframes baloon_1 {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  50% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

.festivalList ul li#fall::after {
  content: "";
  width: 400px;
  height: 0;
  padding-bottom: 50%;
  background-image: url(../images/sakura.png);
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: -325px;
  display: none;
}

.festivalList ul li#fall ul li.festivalInfo:nth-child(2) .info::before {
  content: "";
  width: 20%;
  height: 0;
  padding-bottom: 25%;
  background-image: url(../images/sakura-s.png);
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  display: block;
  top: 0;
  left: -210px;
  -webkit-transition: all 1.5s ease-out;
  -o-transition: all 1.5s ease-out;
  transition: all 1.5s ease-out;
  -webkit-transform-origin: 0% 0%;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
  height: 100%;
  -webkit-animation-name: snow_falling_fore;
  animation-name: snow_falling_fore;
  top: -100%;
  opacity: 0;
  display: none;
}

@-webkit-keyframes snow_falling_fore {
  0% {
    top: -50%;
    opacity: 0;
  }
  1% {
    top: -50%;
    opacity: 1;
  }
  99.8% {
    top: 30%;
    opacity: 1;
  }
  99.9% {
    opacity: 0;
  }
  100% {
    top: -50%;
    opacity: 0;
  }
}

@keyframes snow_falling_fore {
  0% {
    top: -50%;
    opacity: 0;
  }
  1% {
    top: -50%;
    opacity: 1;
  }
  99.8% {
    top: 30%;
    opacity: 1;
  }
  99.9% {
    opacity: 0;
  }
  100% {
    top: -50%;
    opacity: 0;
  }
}

/*右選單*/

.festivalList .rightnav {
  width: auto;
  position: fixed;
  z-index: 9999;
  right: 36px;
  top: 45vh;
}

.festivalList .rightnav ul {
  margin: 0;
  padding: 0;
}

.festivalList .rightnav ul li {
  margin: 15px 0;
  padding: 0;
  width: 100%;
}

.festivalList .rightnav ul li a {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: #d4357c;
  color: #fff;
  margin: auto;
  display: table;
  text-align: center;
  font-size: 120%;
}

.festivalList .rightnav ul li a:hover {
  background: #ec4590;
}

.festivalList .rightnav ul li a span {
  display: table-cell;
  vertical-align: middle;
}

.festivalList .rightnav ul li::before {
  display: none;
}

/*=================最新消息=================*/

.newswapper {
  margin-top: 20px;
}

.newsList li.newsBox {
  padding: 30px;
  padding-left: 127px;
  margin-bottom: 10px;
}

.newsList li.newsBox h2 {
  font-size: 140%;
}

.newsList li.newsBox p {
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  color: #555;
  line-height: 1.5;
  padding-top: 10px;
}

.pageBtn a {
  /* display: inline-block; */
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  margin-bottom: 10px;

  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.pageBtn a span {
  padding: 5px 20px;
  background-color: #d4357c;
  display: inline-block;
  border-radius: 5px;
  margin-right: 10px;
  color: #fff;
}

.pageBtn a:hover span {
  background-color: #f34d97;
}

.pageBtn.back {
  text-align: center;
  margin-top: 30px;
}

.pageBtn.back a span {
  margin-right: 0;
  margin-bottom: 0;
  margin-top: 20px;
  padding: 10px 20px;
}

.newsList li.newsBox::before {
  top: 35%;
}

/*頁碼*/

.PagerInfo {
  clear: both;
  margin: 0;
}

.PagerInfo {
  text-align: right;
  color: #676767;
  margin-top: 100px;
  line-height: 2;
}

.PagerInfo .col {
  display: inline-block;
  margin-right: 15px;
}

.PagerInfo span {
  color: #0b7ac1;
}

.PagerInfo a {
  color: #909090;
  font-weight: bolder;
}

.paginationSec {
  text-align: center;
  margin: 55px 0;
}

.paginationSec > div {
  display: inline-block;
  vertical-align: baseline;
  background: #d6d6d6;
}

.paginationSec > div * {
  float: left;
  line-height: 55px;
  font-size: 1.2rem;
}

.paginationSec > div a {
  display: inline-block;
  color: #4a4a4a;
  padding: 0 10px;
  text-decoration: none;
  -o-transition: all 0.15s linear;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
  line-height: 50px;
  position: relative;
}

.paginationSec > div a.current,
.paginationSec > div a:hover {
  color: #ffffff;
  -o-transition: all 0.15s linear;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
  background: #0b7ac1;
}

.paginationSec > div a.current::before,
.paginationSec > div a:hover::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #007ac5;
  display: block;
  content: "";
}

.paginationSec > div a.prev,
.paginationSec > div a.next {
  text-indent: -9999px;
  color: #4a4a4a;
  position: relative;
  padding: 0 25px;
}

.paginationSec > div a.prev::after,
.paginationSec > div a.next::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-size: 100%;
  background-position: center;
  background-color: transparent;
  margin: -7px 0 0 -7px;
}

.paginationSec > div a.prev::after {
  background-image: url(../images/icon/icon-arrowL_gray.svg);
}

.paginationSec > div a.next::after {
  background-image: url(../images/icon/icon-arrowR_gray.svg);
}

.paginationSec > div a.prev:hover::after {
  background-image: url(../images/icon/icon-arrowL_w.svg);
}

.paginationSec > div a.next:hover::after {
  background-image: url(../images/icon/icon-arrowR_w.svg);
}

.paginationSec > div a.txt {
  padding: 0 13px;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.pages {
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.paginationSec > div a:last-child {
  border-right: 0;
}

/*下載專區*/

.pageInfo.downloadArea {
  margin-top: 40px;
}

.pageInfo.downloadArea li {
  background-color: #e6e6e6;
  padding: 10px 0;
  border-top: 1.5px solid #fff;
  position: relative;
}

.pageInfo.downloadArea li:hover {
  background-color: #d0cece;
}

.pageInfo.downloadArea li:nth-child(1) {
  border-top: none;
}

.pageInfo.downloadArea li a {
  display: block;
  margin: 0 40px;
  font-size: 120%;
  font-weight: bold;
}

.pageInfo.downloadArea li a i img {
  width: 45px;
  margin: 0;
  float: right;
}

.pageInfo.downloadArea li a .data {
  display: none;
  position: absolute;
  top: -15px;
  right: -215px;
  background-color: #eb6ba4;
  border-radius: 5px;
  padding: 10px;
  color: #fff;
  font-size: 80%;
  width: 200px;
  text-align: left;
}

.pageInfo.downloadArea li a .data::before {
  content: "";
  position: absolute;
  bottom: 30%;
  left: 0;
  margin-left: -20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 20px 15px 0;
  border-color: transparent #eb6ba4 transparent transparent;
  line-height: 0px;
  _border-color: #000000 #007bff #000000 #000000;
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

.pageInfo.downloadArea li:hover a .data {
  display: block;
}

.pageInfo.downloadArea li a .data * {
  visibility: visible;
}

.pageInfo.downloadArea li a .data ul {
  margin: 0;
}

.pageInfo.downloadArea li a .data li {
  display: block;
  padding-left: 0;
  margin-bottom: 0;
  background-color: #eb6ba4;
  padding: 0;
  border-top: none;
  position: inherit;
}

.pageInfo.downloadArea li a .data li:hover {
  background-color: #eb6ba4;
}

.pageInfo.downloadArea li a .data li i {
  font-style: normal;
}

article.news .pageInfo.downloadArea table tr td a img {
  width: 45px;
  margin: 0;
  vertical-align: middle;
}

/*------*/

.downloadArea table {
  border-collpase: collpase;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  margin: 0px;
  margin-top: 20px;
}

.downloadArea table tr {
  border: 1px #d3d3d3 solid;
}

.downloadArea table th {
  background-color: #ececec;
  padding: 10px 10px 10px 10px;
  color: #000000;
  text-align: left;
}

.downloadArea table td {
  line-height: 1.8;
  padding: 10px;
}

.downloadArea table td a {
  padding: 10px;
  display: block;
}

.downloadArea table td a img {
  width: 50px;
}

/*認識北觀*/

.mContent.fullbg.P02 {
  background-color: #000;
  background-image: url(../images/fullBg_p02.jpg);
  padding-bottom: 10px;
  position: relative;
}

.mContent.fullbg.P02:after {
  content: "";
  width: 335px;
  height: 40vh;
  position: absolute;
  background-image: url(../images/word.png);
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 105px;
  right: 80px;
}

/*數位典藏*/

.mContent.fullbg.P07 {
  background-color: #000;
  background-image: url(../images/fullBg_p07.jpg);
  padding-bottom: 10px;
}

.P07 .categoriesLevelTwo li a i,
.P07 .mContent-hdr .categoriesLevelTwo li a > div {
  background: #3baaef center center no-repeat;
}

.P07 .categoriesLevelTwo li a:hover strong,
.P07 .mContent-hdr .categoriesLevelTwo li.current a strong {
  background-color: #3baaef;
}

.P07 .categoriesLevelTwo li a strong {
  background-color: #0b7ac1;
}

/*相片集錦*/

.mContent .Photobox .wrap {
  padding: 0;
}

.Photobox ul.bookmark li:nth-child(1) a span {
  background: url(../images/icon/icon_btn_photo01.svg) no-repeat left
    center/40px;
}

.Photobox ul.bookmark li:nth-child(2) a span {
  background: url(../images/icon/icon_btn_photo02.svg) no-repeat left
    center/35px;
}

.Photobox ul.bookmark li:nth-child(3) a span {
  background: url(../images/icon/icon_btn_photo03.svg) no-repeat left
    center/40px;
}

.photoAlbum > ul {
  overflow: hidden;
}

.photoAlbum > ul > li {
  height: 0;
  padding-bottom: 20%;
  float: left;
  position: relative;
  margin-bottom: 10px;
  background-color: #111;
}

.photoAlbum > ul > li:nth-child(6n + 1),
.photoAlbum > ul > li:nth-child(6n + 3),
.photoAlbum > ul > li:nth-child(6n + 4),
.photoAlbum > ul > li:nth-child(6n + 5) {
  margin-right: 10px;
}

.photoAlbum > ul > li:nth-child(6n + 1) {
  width: calc((40% - 10px));
  padding-bottom: 35%;
  clear: both;
}

.photoAlbum > ul > li:nth-child(6n + 2) {
  width: 60%;
  padding-bottom: 35%;
}

.photoAlbum > ul > li:nth-child(6n + 3) {
  width: calc((40% - 10px));
  clear: both;
}

.photoAlbum > ul > li:nth-child(6n + 4),
.photoAlbum > ul > li:nth-child(6n + 5) {
  width: calc((20% - 10px));
}

.photoAlbum > ul > li:nth-child(6n + 6) {
  width: 20%;
}

.photoAlbum > ul > li > .picBox {
  position: absolute;
  width: 100%;
  height: 100%;
}

.photoAlbum > ul > li > .picBox > a {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
}

.photoAlbum > ul > li .picName {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  display: block;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  z-index: 2;
}

.photoAlbum > ul > li .picName > p {
  color: #fff;
  font-weight: bold;
  font-size: 130%;
  display: block;
  width: 100%;
  margin: 0;
  text-shadow: 0 0 9px rgba(0, 0, 0, 0.6);
  padding: 10px 20px;
  text-align: left;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 60px;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  background: rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.photoAlbum > ul > li .picName:hover p,
.photoAlbum > ul > li .picName:focus p {
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  background: rgba(0, 0, 0, 0.5);
  height: auto;
  -webkit-line-clamp: inherit;
  line-clamp: inherit;
}

.proclaim {
  margin-top: 30px;
}

.proclaim p {
  font-size: 100%;
}

.proclaim strong {
  font-weight: bold;
}

.proclaim ul {
  margin-top: 10px;
}

.proclaim li {
  line-height: 2;
  list-style: disc;
  margin-left: 25px;
  font-size: 90%;
}

.Photobox .dataView {
  margin: 50px 0px;
}

/*出版品*/

.mContent .wrap.Bookbox {
  padding-top: 0;
}

.rowbox .info ul {
  margin-top: 10px;
}

.rowbox .info li {
  width: 100%;
  line-height: 1.5;
}

ul.rowbox li:hover .info li {
  color: #fff;
}

ul.rowbox.downloadbook li figure span.imgLiquid {
  padding-bottom: 120%;
}

ul.downloadbook li .info::before {
  background-image: url(../images/icon/download.svg);
}

ul.downloadbook li:hover .info::before {
  background-image: url(../images/icon/download_w.svg);
}

.Bookbox ul.bookmark li:nth-child(1) a span {
  background: url(../images/icon/icon_btn_paper.svg) no-repeat left center/40px;
}

.Bookbox ul.bookmark li:nth-child(2) a span {
  background: url(../images/icon/icon_btn_p07_1_g.svg) no-repeat left
    center/40px;
}

.Bookbox ul.bookmark li:nth-child(3) a span {
  background: url(../images/icon/icon_btn_book.svg) no-repeat left center/40px;
}

.Bookbox ol li {
  list-style-type: decimal;
  margin-left: 25px;
}

/*--NEW--*/

.publishing .sec {
  margin-bottom: 5rem;
  padding-bottom: 5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
}

.publishing .sec:first-child {
  padding-top: 3rem;
}

.publishing .sec:last-child {
  border-bottom: none;
}

.publishing .sec .col:first-child {
  float: right;
  width: 80%;
  padding-left: 3rem;
}

.publishing .sec .col:nth-child(2) {
  float: left;
  width: 20%;
}

.publishing .sec .col:nth-child(2) img {
  width: 100%;
}

.publishing h2,
.publishing h3 {
  color: #eb65a1;
  font-size: 200%;
  line-height: 1.6;
}

.publishing ul {
  margin-top: 15px;
}

.publishing li {
  line-height: 1.8;
}

.publishing figure {
  width: 100%;
  overflow: hidden;
}

/*方的*/

.publishing figure span {
  display: block;
}

.publishing figure span img {
  border-radius: 0;
}

.Bookbox .PagerInfo {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/*=====================主題專區導覽頁=================*/

.mContent.fullbg.theme {
  background-color: #000;
  background-image: url(../images/fullBg_theme.jpg);
  background-position: center center;
  padding-bottom: 10px;
}

@media screen and (min-width: 1440px) {
  .mContent.fullbg.theme .categoriesLevelTwo li {
    margin: 0 4% 50px 4%;
  }
}

@media screen and (max-width: 769px) and (min-width: 590px) {
  .mContent.fullbg.theme .categoriesLevelTwo ul {
    display: flex;
    flex-wrap: wrap;
  }
  .mContent.fullbg.theme .categoriesLevelTwo ul li {
    width: 50%;
    display: block;
    margin: 0;
    margin-bottom: 45px;
  }
}

@media screen and (max-width: 589px) {
  .mContent.fullbg.theme .categoriesLevelTwo ul {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .mContent.fullbg.theme .categoriesLevelTwo ul li {
    width: 100%;
    display: block;
    margin: 0;
    margin-bottom: 45px;
  }
}
.mContent.fullbg.theme .categoriesLevelTwo li strong {
  font-size: 125%;
  background-color: #EA438D;
  /* font-family: "Noto Sans TC"; */
}
.mContent.fullbg.theme .categoriesLevelTwo li img {
  width: 50%;
  padding-top: 25%;
}
.mContent.fullbg.theme .categoriesLevelTwo li img[src="common/images/icon/topic-5.svg"] {
/* .mContent.fullbg.theme .categoriesLevelTwo li img.bigger { */
  /* 新北藝術季 */
  width: 65%;
  padding-top: 17.5%;
}

.categoriesLevelTwo li a[target="_blank"] strong::after {
  content: '';
  display: inline-block;
  width: .8em;
  height: .8em;
  margin-left: .3em;
  background-image: url(../images/icon/out_w.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}


/*=====================食宿購行=================*/

.mContent.fullbg.P06 {
  background-color: #000;
  background-image: url(../images/fullBg_p06.jpg);
  padding-bottom: 10px;
}

.P06 .categoriesLevelTwo li a:hover strong,
.P06 .mContent-hdr .categoriesLevelTwo li.current a strong {
  background-color: #ea438d;
}

.P06 .desc {
  display: none;
}

.sitemap.categoriesP6 {
  padding: 0 10%;
  margin-top: 80px;
}

.categoriesP6 i {
  display: inline-block;
  width: 30%;
  vertical-align: middle;
}

.categoriesP6 strong {
  display: inline-block;
  vertical-align: middle;
}

.sitemap.categoriesP6 > ul > li > a {
  padding: 1rem 4rem 1rem 2rem;
}

.sitemap.categoriesP6 > ul > li > a::before {
  top: 2.5rem;
}

.sitemap.categoriesP6 > ul > li li a::before {
  top: 9px;
}

ul.categoriesLevelThree {
  display: none;
}

ul.categoriesLevelThree li {
  margin: 0;
  float: inherit;
  width: 100%;
}

/*美食情報*/

.P06_2,
.P06_3,
.P06_2 .main,
.P06_3 .main {
  background-repeat: no-repeat;
  background-size: 35%;
}

.P06_2 {
  background-position: left top;
  background-image: url(../images/fullBg_p06_2-1.png);
}

.P06_2 .main {
  background-position: right top;
  background-image: url(../images/fullBg_p06_2-2.png);
}

.P06_3 {
  background-position: left top;
  background-image: url(../images/fullBg_p06_2-3.png);
}

.P06_3 .main {
  background-position: right top;
  background-image: url(../images/fullBg_p06_2-4.png);
}

.P06_2 .breadcumb li,
.P06_3 .breadcumb li {
  background: #fff;
  border-radius: 10px;
}

.P06_2 .categories ul,
.P06_3 .categories ul {
  padding: 0 20%;
}

.P06_2 .categories li {
  width: 50%;
}

.categories li.restaurant a strong::before {
  background-image: url(../images/icon/icon_btn_map02.svg);
}

.categories li.food a strong::before {
  background-image: url(../images/icon/icon_btn_food.svg);
}

/*旅館民宿*/

.categories li.hotel,
.categories li.room,
.categories li.stay {
  width: 50%;
}

.categories li.hotel a strong::before {
  background-image: url(../images/icon/icon_btn_map03.svg);
}

.categories li.room a strong::before {
  background-image: url(../images/icon/icon_btn_room.svg);
}

.categories li.stay a strong::before {
  background-image: url(../images/icon/stay.png);
}

.cssHotelItem {
  overflow: hidden;
}

.cssHotelItem li {
  float: left;
  width: 25%;
  position: relative;
  padding-left: 30px;
  margin-bottom: 5px;
}

.cssHotelItem li::before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  left: 2px;
  background-image: url(../images/icon/check.svg);
  background-size: cover;
  background-repeat: no-repeat;
}

/*------------------訂閱電子報--------------*/

.Newsletter {
  margin-top: 30px;
}

/*填表樣式*/

.subscription {
  padding: 30px 56px;
  border-radius: 10px;
  background-color: #eaeaea;
  color: #111;
}

.subscription p {
  padding: 12px;
  color: #666;
}

.subscription b {
  color: #666;
  font-size: 90%;
}

.subscription a {
  color: #bd2a6c;
}

.subscription dl {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.subscription dl dt {
  float: left;
  line-height: 40px;
  padding: 2px;
}

.subscription dl dt > span,
.subscription dl dt > label {
  padding: 0 12px;
}

.subscription dl dd {
  overflow: hidden;
  margin-bottom: 10px;
  padding: 5px;
}

.subscription input[type="file"],
.subscription input[type="text"],
.subscription textarea {
  margin: 3px 4px;
  height: auto;
  padding: 5px 13px;
  background: rgb(255, 255, 255);
}

.subscription select {
  margin: 3px 4px;
  height: auto;
  padding: 4px 9px;
  background: rgb(255, 255, 255);
}

.subscription dl dd > input[type="text"],
.subscription dl dd > input[type="file"],
.subscription dl dd > textarea {
  width: 100%;
}
.subscription dl dd > input[type="text"].obj {
  width: 25%;
  min-width: 100px;
  max-width: 145px;
  margin: 0;
  padding: 8px 13px;
  vertical-align: middle;
}

.subscription dl dd span {
  vertical-align: -webkit-baseline-middle;
}

.subscription dl dd span.quantity-range {
  display: flex;
  align-items: center;
}

.subscription dl dd span.quantity-range > input[type="text"]{
  width: 100%;
}

.subscription dl dd span input,
.subscription dl dd span label {
  margin-bottom: 15px;
}

.subscription dl dd span input:focus + label {
  outline: 2px solid #000;
}

.subscription dl dd img {
  vertical-align: middle;
  width: 10%;
}

.subscription dd .reload,
.subscription dd .voiceServices {
  display: inline-block;
  margin: 0;
  padding: 10px 10px 10px 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 92%;
  background-color: #217ac1;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0px;
  position: relative;
}

.subscription dd .reload::before,
.subscription dd .voiceServices::before {
  content: "";
  display: block;
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -13px;
  width: 25px;
  height: 25px;
  background-repeat: no-repeat;
  background-size: contain;
}

.subscription dd .reload::before {
  background-image: url(../images/icon/reload.svg);
}

.subscription dd .voiceServices::before {
  background-image: url(../images/icon/sound.svg);
}

.subscription dd .reload:hover,
.subscription dd .voiceServices:hover {
  background-color: #00a6ec;
}

.subscription dd textarea {
  border: 0;
  font-size: 100%;
  font-family: 微軟正黑體, Arial, Helvetica, "Microsoft JhengHei", sans-serif,
    "Noto Sans TC";
  line-height: 1.5;
  width: 100%;
}

.subscription .step {
  clear: both;
  text-align: center;
  margin: 30px 6px 10px 6px;
}

.subscription .step input {
  clear: both;
  font-size: 110%;
  background-color: #d4367c;
  color: rgb(255, 255, 255);
  padding: 5px 30px;
  margin: 0px 10px;
  border-radius: 5px;
  border-width: 0px;
  height: auto;
  cursor: pointer;
}

.subscription .step input:focus {
  -webkit-box-shadow: 0 0 0 0.2rem #2b9ae1;
  box-shadow: 0 0 0 0.2rem #2b9ae1;
}

.subscription .step input:nth-child(2) {
  background-color: #676767;
}

.subscription .step input:hover {
  background-color: #ec448f;
}

.subscription dd a.map {
  display: inherit;
  width: auto;
  background: url(../images/icon/icon_place_red.svg) no-repeat top / 40%;
}

/*送出後的表單*/

.subscription.sugg dl {
  margin-top: 20px;
}

.subscription.sugg dl dt {
  float: none;
  padding: 0;
  line-height: 2;
  color: #777;
}

.subscription.sugg dl dd {
  overflow: inherit;
  margin: 0;
  padding: 2px 0 2px 5px;
  line-height: 2;
  color: #2fa8e6;
  background: #fff;
  margin-bottom: 10px;
}
.subscription.sugg dl dd.captcha {
  background: transparent;
}

.subscription.sugg .step input {
  background-color: #ef8bb7;
}

.subscription.sugg .step input:nth-child(2) {
  background-color: rgb(235, 107, 164);
}

.subscription.sugg .step input:hover {
  background-color: #ec448f;
}

.subscription.sugg h2.success {
  padding-left: 75px;
  position: relative;
}

.subscription.sugg h2.success::before {
  content: "";
  width: 50px;
  height: 50px;
  background-image: url(../images/icon/checked.svg);
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  left: 15px;
}

a#ctl00_ContentPlaceHolder1_Notice_hlBack {
  font-size: 110%;
  background-color: rgb(235, 107, 164);
  color: rgb(255, 255, 255);
  padding: 5px 30px;
  border-radius: 5px;
  border-width: 0px;
  height: auto;
  cursor: pointer;
  display: block;
  margin: 20px auto;
  width: 100px;
  text-align: center;
}

/*歷史電子報*/

.letterlist {
  margin-top: 20px;
  position: relative;
}

.letterlist h2 {
  color: #eb65a1;
}

.letterlist .SearchBox {
  width: inherit;
  margin-bottom: 0;
  text-align: right;
}

/*影音專區*/

.videoBlock {
  margin-bottom: 15px;
}

.videoBlock a {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 55%;
  overflow: hidden;
  position: relative;
  background: #111;
}

.videoBlock a img {
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, -webkit-transform 1s;
  -o-transition: opacity 1s, transform 1s;
  transition: opacity 1s, transform 1s;
  transition: opacity 1s, transform 1s, -webkit-transform 1s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.videoBlock a:hover img,
.videoBlock a:focus img {
  opacity: 0.5;
  -webkit-transform: scale3d(1.1, 1.1, 1);
  transform: scale3d(1.1, 1.1, 1);
}

.videoBlock a::before {
  top: 50%;
  left: 50%;
  content: " ";
  height: 70px;
  width: 70px;
  margin: -35px 0 0 -35px;
  position: absolute;
  background-image: url("../images/icon/icon-play.svg");
  background-size: 100%;
  display: block;
  z-index: 2;
}

.videoBlock a:hover::before,
.videoBlock a:focus::before {
  background-position: center 100%;
}

.gridList_oneThird .gridItem {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: calc((50% - 5px));
  margin-bottom: 50px;
}

.gridList_oneThird .gridItem:nth-child(odd) {
  padding-left: 5px;
}

.gridList_oneThird .gridItem:nth-child(even) {
  padding-right: 5px;
}

.gridList_oneThird .gridItem .info {
  padding-left: 22px;
  position: relative;
}

.gridList_oneThird.videoList .gridItem .h3 {
  font-size: 150%;
  color: #d4357c;
}

.descrip > a {
  cursor: pointer;
  display: inline-block;
  padding: 5px 15px;
  margin-bottom: 1.5rem;
  border-radius: 5px;
  color: #fff;
  background: #3baaef;
  font-weight: 500;
  font-size: 120%;
  position: relative;
  padding-right: 40px;
  display: none;
}

.descrip > a:hover {
  background: #109cf3;
}

.descrip > a::after {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  background: url(../images/icon/down.svg) no-repeat center/contain;
  position: absolute;
  right: 10px;
  top: calc((100% - 25px) / 2);
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.descrip .hiddenContent {
  display: none;
  text-align: left;
  line-height: 1.8;
  color: #111;
  display: block;
}

.videoList .gridItem:first-child {
  width: 100%;
  padding: 0;
}

/*.gridList_oneThird.videoList .gridItem:first-child h2 {
    font-size: 3.5rem;
    position: absolute;
    width: 100%;
    top: 60%;
    color: #fff;
    text-shadow: 0 0 6px rgba(0, 0, 0, .6);
}*/

.videoList .gridItem:first-child .descrip > a {
  display: none;
}

.videoList .gridItem:first-child .descrip .hiddenContent {
  display: block;
}

.videoList .gridItem:first-child .videoBlock a::before {
  height: 120px;
  width: 120px;
  margin: -60px 0 0 -60px;
}

/*======================行程內頁================*/

.travelpage .festivalList {
  margin: 0;
  position: relative;
}

.travelpage .title {
  position: absolute;
  top: 0;
  left: 100px;
  width: 300px;
  font-size: 150%;
  color: #d4357c;
  font-weight: bold;
}

.travelpage .circleBtn {
  width: 50px;
  height: 50px;
}

.travelpage .festivalList ul li .festivalSeason .circleBtn span {
  font-size: 110%;
}

.travelpage .festivalList ul li::before {
  left: 24px;
}

.travelpage .festivalList ul li:first-child::before {
  height: 100%;
}

.travelpage .festivalList ul li ul li.festivalInfo::after {
  top: 25px;
  left: 13px;
}

.travelpage .festivalList ul li ul li.festivalInfo .info {
  width: 100%;
  float: inherit;
  display: inline-block;
}

.travelpage .festivalList ul li ul li.festivalInfo .info h3,
.travelpage .festivalList ul li ul li.festivalInfo .info h2 {
  text-shadow: none;
}

.travelpage .festivalList ul li ul li.festivalInfo .info h3 a,
.travelpage .festivalList ul li ul li.festivalInfo .info h2 a {
  color: #d4357c;
}

.travelpage .festivalList ul li ul li.festivalInfo .info h3 a:hover,
.travelpage .festivalList ul li ul li.festivalInfo .info h2 a:hover {
  color: #ef4792;
}

.travelplaceBtn {
  position: relative;
}

.travelplaceBtn span {
  color: #676767;
}

.travelplaceBtn:hover span,
.travelplaceBtn:focus span {
  color: #0fb30f;
}

.travelplaceBtn span::after {
  content: "";
  width: 25px;
  height: 25px;
  display: block;
  background: url(../images/icon/down_g.svg) no-repeat center/80%;
  position: absolute;
  right: -35px;
  top: calc((100% - 25px) / 2);
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.travelplace {
  border: 1px solid #d3d3d3;
  border-radius: 10px;
}

.travelpage .festivalList ul li ul li ul.travelplace {
  padding: 0;
}

.travelplace .placeInfo {
  overflow: hidden;
  border-bottom: 1px solid #c5dbe8;
  padding: 20px;
}

.travelplace .placeInfo.nolink:hover {
  background-color: #d8effd;
}

.travelplace .placeInfo:last-child {
  border-bottom: none;
}

.travelplace .placeInfo .col-l {
  width: 40%;
  margin-right: 20px;
}

.travelplace .placeInfo .col-l img {
  margin: 0;
  border-radius: 10px;
  width: 100%;
}

.travelplace .placeInfo .col-r {
  width: calc((60% - 20px));
}

.travelplace .placeInfo .col-r h4,
.travelplace .placeInfo .col-r h4 a {
  color: #d4357c;
  font-weight: bold;
  margin: 10px 0;
}

.travelplace .placeInfo .col-r h4 a:hover {
  color: #ef4792;
}

.travelpage
  .festivalList
  ul
  li
  ul
  li.festivalInfo
  .info
  .travelplace
  .placeInfo
  .col-r
  p {
  padding: 0;
  border-left: none;
  margin: 0;
  color: #555;
  height: auto;
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

.travelplace .placeInfo a.moreBtn {
  padding: 10px 15px;
  border: 1px solid #ec6aa4;
  border-radius: 5px;
  display: inline-block;
  margin-top: 15px;
  float: right;
  clear: both;
}

.travelplace .placeInfo a.moreBtn:hover {
  background-color: #ef4792;
  color: #fff;
}

.festivalList ul.travelplace li::before {
  display: none;
}

.travelpage .festivalList ul::after {
  content: "";
  display: block;
  position: absolute;
  /* bottom: -110px; */
  bottom: 0;
  left: 34px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #ec6aa4;
}

.travelpage .festivalList ul li ul:last-child::after {
  display: none;
}

.travelpage .traffic {
  margin-top: 130px;
}

.travelpage .gomap {
  margin-top: 20px;
  position: static;
  text-align: center;
}

.wrap article .travelpage .pageInfo.traffic h2 {
  border: none;
}

.travialmap {
  margin-top: 115px;
  display: block;
}

article.news .travelpage img {
  width: 100%;
}

.travelpage .festivalList ul li ul li.festivalInfo {
  padding-top: 0;
}

article.news .textArea .travelpage .festivalList ul li ul.bficon {
  padding-top: 0;
}

/*======================節慶內頁================*/

.mContent.fullbgpage,
.mContent.fullbgpage .breadcumb li,
.mContent.fullbgpage .breadcumb li::before,
.mContent.fullbgpage .mContent-hdr h1,
.mContent.fullbgpage .mContent-hdr p {
  color: #fff;
}

.mContent.fullbgpage .breadcumb a {
  background-color: #ffffff;
  padding: 0 10px;
  border-radius: 50px;
  margin-right: 5px;
}

.mContent.fullbgpage .breadcumb li.home a {
  background-color: rgba(255, 255, 255, 0);
  background-image: url(../images/icon/icon_home_w.svg);
}

.mContent.fullbgpage .breadcumb li.home a:hover {
  background-image: url(../images/icon/icon_home_pk.svg);
}

.mContent.fullbgpage .container,
.mContent.fullbgpage .wrap {
  padding: 0;
  max-width: inherit;
}

.mContent.fullbgpage h1 {
  color: #fff;
  font-weight: bold;
  font-size: 330%;
  padding-left: 200px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.mContent.fullbgpage .fullimg h2,
.mContent.fullbgpage .fullimg .h2 {
  line-height: 1.5;
  font-weight: bold;
  padding-top: 215px;
  padding-left: 200px;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.fullimg figure {
  width: 100vw;
  height: 100vh;
  background-attachment: fixed;
  background-attachment: inherit \9;
}

*::-ms-backdrop,
.fullimg figure {
  background-attachment: inherit;
}

/*IE11&Edge瀏覽器*/

/* @charset "
 <Any Modern Browser but MSIE 10- or FF 18->";
 _:-ms-lang(x), .fullimg figure {
    background-attachment: inherit;
} */

.mContent.fullbgpage .textWrapper {
  padding: 70px 120px;
}

.floatbox {
  margin-left: 85px;
  margin-top: -640px;
  color: #fff;
  width: calc((50% - 300px));
  background-color: #c9484e;
  padding: 20px 40px 30px 40px;
}

.floatbox.fast1 {
  background-color: #c9484e;
}

.fast2 .floatbox {
  background-color: #d4357c;
}

.fast2 .floatimg {
  margin-top: -160px;
}

.fast3 .floatbox {
  background-color: #8c5b49;
}

.fast4 .floatbox {
  background-color: #e884b0;
}

.fast5 .floatbox {
  background-color: #917216;
}

.fast5 .mt,
.fast6 .mt,
.fast9 .mt {
  margin-top: 125px;
}

.fast9 .floatbox {
  background-color: #478500;
}

.fast10 .floatbox {
  background-color: #008175;
}

.fullbgpage .wrap article .floatbox h3,
.fullbgpage .wrap article .floatbox h2 {
  background: url(../images/icon/icon_fireworks_w.svg) no-repeat left
    center/55px 55px;
  padding-left: 63px;
  line-height: 2;
  margin-bottom: 10px;
  color: #fff;
  font-size: 200%;
}

.floatbox ul {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #fff;
}

.floatbox li,
.floatbox p {
  line-height: 2;
}

.floatbox li {
  font-size: 115%;
}

.floatbox li strong {
  font-weight: bold;
  color: #fff;
}

.floatbox li:nth-child(3) strong {
  display: block;
}

.fullbgpage article {
  width: 100%;
}

.floatimg {
  float: right;
  width: 40%;
  margin-top: -200px;
  margin-right: 200px;
}

.fast3 .floatimg {
  width: 50%;
  margin-right: 50px;
  margin-top: -240px;
}

.mt {
  margin-top: 300px;
  padding: 30px 5%;
  background-color: #fff;
}

.fullbgpage article .textArea .col {
  margin-top: 60px;
  overflow: hidden;
}

.fullbgpage article .textArea .col-l {
  width: 44%;
  margin-right: 30px;
}

.fullbgpage article .textArea .col-r {
  width: calc((56% - 30px));
}

.fullbgpage .pageInfo {
  padding: 0 11%;
}

.morefestival ul.rowbox {
  padding: 0;
}

.morefestival ul.rowbox li .info {
  padding: 5px 15px 5px 15px;
}

.morefestival ul.rowbox li a.moreBtn {
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.fullbgpage a.more,
.fullbgpage a.less {
  display: block;
  text-align: center;
  border: 1px solid #3baaef;
  padding: 15px 0;
  margin: 30px 10px;
  position: relative;
  background-color: #3baaef;
  color: #fff;
}

.fullbgpage a.more:hover,
.fullbgpage a.less:hover {
  background-color: #ec6aa4;
  border: 1px solid #ec6aa4;
}

.fullbgpage a.more span::before,
.fullbgpage a.more span::after,
.fullbgpage a.less span::before,
.fullbgpage a.less span::after {
  content: "";
  position: absolute;
  display: block;
  width: 1px;
  height: 10px;
  left: calc((100% + 100px) / 2);
  top: 21px;
  background: #fff;
  -webkit-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transform-origin: 50% 95%;
  -ms-transform-origin: 50% 95%;
  transform-origin: 50% 95%;
}

.fullbgpage a.more span::before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.fullbgpage a.more span::after {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.fullbgpage a.less span::before,
.fullbgpage a.less span::after {
  top: 14px;
}

.fullbgpage a.less span::before {
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.fullbgpage a.less span::after {
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}

.fullbgpage a.less {
  display: none;
}

.fullbgpage .wrap article .dataView {
  margin: 50px 11%;
}

/*RSS*/

ul.rssList {
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin-top: 60px;
}

.rssList li {
  float: left;
  margin: 30px 50px 10px 0;
}

a.rssBtn {
  position: relative;
  display: inline-block;
  padding: 5px 5px 5px 50px;
  color: #d4357c;
  font-size: 120%;
}

a.rssBtn::before {
  content: "";
  width: 40px;
  height: 40px;
  display: block;
  background: url(../images/icon/btn_rss-hover.svg) no-repeat center/100%;
  position: absolute;
  top: 50%;
  margin-top: -20px;
  left: 5px;
}

a.rssBtn:hover {
  color: #eb6ba4;
}

/*交通資訊*/

.special li {
  color: #555;
  position: relative;
}

.special li span {
  color: #111;
}

span.t2,
span.g1,
span.f64 {
  display: inline-block;
  background-size: 35px;
  padding-left: 50px;
  background-repeat: no-repeat;
  background-position: 10px 50%;
}

span.t2 {
  background-image: url(../images/icon/traffic_t2.svg);
}

span.g1 {
  background-image: url(../images/icon/traffic_g1.svg);
}

span.f64 {
  background-image: url(../images/icon/traffic_f64.svg);
}

/*加油據點table*/

.tableStyle {
  display: table;
  width: 100%;
  margin-bottom: 30px;
}

.tableStyle dl {
  display: table-row;
}

.tableStyle dl dt,
.tableStyle dl dd {
  display: table-cell;
  width: 25%;
  border-bottom: 1px #d3d3d3 solid;
  vertical-align: middle;
}

.tableStyle dl dt,
.tableStyle dl dd .tableStyle dl dt:first-child,
.tableStyle dl dd:first-child {
  width: 15%;
}

.tableStyle dl dt:nth-child(2),
.tableStyle dl dd:nth-child(2) {
  width: 35%;
}

.tableStyle dl dt {
  background-color: #c0e0ef;
  padding: 10px 10px 10px 10px;
  color: #111111;
  text-align: left;
  border: 1px #ffffff solid;
}

.tableStyle dl dd {
  line-height: 1.8;
  padding: 10px;
}

.tableStyle.table_2 dl dt:first-child,
.tableStyle.table_2 dl dd:first-child {
  width: 20%;
}

.tableStyle.table_2 dl dt:nth-child(2),
.tableStyle.table_2 dl dd:nth-child(2),
.tableStyle.table_2 dl dt:nth-child(3),
.tableStyle.table_2 dl dd:nth-child(3) {
  width: 40%;
}

.tableStyle.table_3 dl dt:first-child,
.tableStyle.table_3 dl dd:first-child,
.tableStyle.table_3 dl dt:nth-child(2),
.tableStyle.table_3 dl dd:nth-child(2) {
  width: 40%;
}

.tableStyle.table_3 dl dt:nth-child(3) .tableStyle.table_3 dl dd:nth-child(3) {
  width: 20%;
}

.tableStyle.table_4 dl dt:first-child,
.tableStyle.table_4 dl dd:first-child,
.tableStyle.table_4 dl dt:nth-child(3),
.tableStyle.table_4 dl dd:nth-child(3) {
  width: 20%;
}

.tableStyle.table_4 dl dt:nth-child(2) .tableStyle.table_3 dl dd:nth-child(2) {
  width: 60%;
}

.tableStyle.table_5 dl dt:first-child,
.tableStyle.table_5 dl dd:first-child,
.tableStyle.table_5 dl dt:nth-child(2),
.tableStyle.table_5 dl dd:nth-child(2),
.tableStyle.table_5 dl dt:nth-child(4),
.tableStyle.table_5 dl dd:nth-child(4) {
  width: 20%;
}

.tableStyle.table_5 dl dt:nth-child(3),
.tableStyle.table_5 dl dd:nth-child(3) {
  width: 30%;
}

.tableStyle.table_5 dl dt:nth-child(5),
.tableStyle.table_5 dl dd:nth-child(5) {
  width: 10%;
}

.tableStyle.table_5 dl dd:nth-child(4),
.tableStyle.table_5 dl dd:nth-child(5) {
  text-align: center;
}

/* footable */

.footable > thead > tr > th {
  background-color: #c0e0ef;
  padding: 10px 10px 10px 10px;
  border: 1px #ffffff solid;
  text-align: left;
  line-height: 1.8;
  color: initial;
}

.footable > tbody > tr > td {
  padding: 10px;
  line-height: 1.8;
  border-bottom: 1px #d3d3d3 solid;
}

.wrap article .pageInfo.sleep h2 {
  background: url(../images/icon/icon_btn_map03.svg) no-repeat left 30px/50px
    50px;
}

.tableStyle.table_6 dl dt:first-child,
.tableStyle.table_6 dl dd:first-child {
  width: 50%;
}

.tableStyle.table_6 dl dt:nth-child(2),
.tableStyle.table_6 dl dd:nth-child(2) {
  width: 30%;
}

.tableStyle.table_6 dl dt:nth-child(3),
.tableStyle.table_6 dl dd:nth-child(3) {
  width: 20%;
}

.tableStyle.table_7 dl dt:nth-child(1),
.tableStyle.table_7 dl dd:nth-child(1),
.tableStyle.table_7 dl dt:nth-child(2),
.tableStyle.table_7 dl dd:nth-child(2),
.tableStyle.table_7 dl dt:nth-child(3),
.tableStyle.table_7 dl dd:nth-child(3) {
  width: 20%;
}

.tableStyle.table_7 dl dt:nth-child(4),
.tableStyle.table_7 dl dd:nth-child(4) {
  width: 40%;
}

/*QA*/

.QAWrapper {
  margin: 20px 0;
  width: 100%;
  clear: both;
  padding-top: 20px;
}

.QAWrapper a.Qtitle {
  display: table;
  color: #fff;
  text-decoration: none;
  padding: 20px 30px 20px 70px;
  overflow: hidden;
  background-color: #ececec;
  border-bottom: 2px solid #fff;
  position: relative;
  min-height: 45px;
  width: 100%;
}

.wrap article a.Qtitle h2 {
  display: table-cell;
  font-size: 110%;
  font-weight: bold;
  color: #111111;
  vertical-align: middle;
  padding: 0;
  border-bottom: 0;
}

.QAWrapper a.Qtitle::before {
  content: "Q";
  width: 40px;
  height: 40px;
  top: 13px;
  left: 15px;
  border-radius: 50%;
  line-height: 2;
  text-align: center;
  position: absolute;
  border: 1px solid #3baaef;
  color: #3baaef;
  font-weight: bold;
}

.Answer {
  display: none;
  position: relative;
  overflow: hidden;
  padding: 20px 30px 20px 70px;
  border-bottom: 2px solid #f1f2f3;
}

.QAWrapper .Answer::before {
  content: "A";
  width: 40px;
  height: 40px;
  top: 20px;
  left: 15px;
  border-radius: 50%;
  line-height: 2.2;
  text-align: center;
  position: absolute;
  background-color: #eb6ba4;
  color: #fff;
}

.QAWrapper .less .Answer::before {
  -o-transition: background-position 0.2s linear;
  -webkit-transition: background-position 0.2s linear;
  transition: background-position 0.2s linear;
  -webkit-transition-delay: 0.3s;
  /* Safari */
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
  background-position: 0 40px;
}

.QAWrapper .Answer > ul {
  list-style: none;
}

.QAWrapper .Answer > ul li {
  position: relative;
}

.QAWrapper .Answer > ul > li b {
  font-weight: bold;
  font-size: 110%;
  color: #3baaef;
}

.QAWrapper .linkOut {
  display: inline-block;
  padding: 2px 50px 2px 20px;
  background: #f99b20;
  color: #fff;
  border-radius: 30px;
  position: relative;
  font-size: 90%;
}

.QAWrapper .linkOut::after {
  content: "";
  width: 15px;
  height: 15px;
  background: url(../../images/icon/ExternalLink.png) no-repeat center/contain;
  position: absolute;
  right: 22px;
  top: 12px;
  z-index: 1;
}

.QAWrapper .QBox:last-child .Answer {
  border-bottom: 0;
}

article.news .photo img {
  margin: 0;
}

.QAWrapper.QA2 a.Qtitle::before {
  content: "v";
}

.QAWrapper.QA2 .Answer::before {
  display: none;
}

/*網站導覽*/

.sitemap a {
  display: block;
}

.sitemap a i {
  margin-right: 0.5rem;
  font-style: initial;
}

.sitemap ul {
  margin-left: 0;
  margin-bottom: 2rem;
  margin-top: 1rem;
  list-style: none;
}

.sitemap > ul {
  font-size: 0;
}

.sitemap > ul > li {
  display: inline-block;
  vertical-align: top;
  width: calc((100% - 3rem) / 4);
  padding: 0 1.5rem;
  margin-bottom: 3rem;
  font-size: 1.2rem;
}

.sitemap > ul > li > a {
  padding: 1.2rem 4rem 1.2rem 2rem;
  background: #c0e0ef;
  color: #111111;
  margin-bottom: 2rem;
  position: relative;
}

.sitemap > ul > li > a::before {
  position: absolute;
  content: "";
  right: 1.5rem;
  top: 1.5rem;
  width: 14px;
  height: 15px;
  background: url("../images/icon/icon-arrowR_white.svg") no-repeat
    center/contain;
  -o-transition: all 0.15s linear;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}

.sitemap > ul > li > a:hover {
  background: #ec6aa4;
}

.sitemap > ul > li > a:hover::before {
  right: 1rem;
}

.sitemap > ul > li li {
  padding-left: 1rem;
  margin-bottom: 1rem;
}

.sitemap > ul > li li a {
  padding-left: 2rem;
  position: relative;
  color: #362e2b;
}

.sitemap > ul > li li a::before {
  position: absolute;
  content: "";
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  background: #ec6aa4;
  border-radius: 50%;
}

.sitemap > ul > li li a:hover {
  color: #ec6aa4;
}

.sitemap > ul > li li li a {
  color: #676767;
  padding-left: 15px;
}

.sitemap > ul > li li li a::before {
  display: none;
}

.sitemap ul ul {
  position: relative;
}

.sitemap ul ul ul::before {
  position: absolute;
  display: block;
  content: "";
  left: 3px;
  top: 0;
  width: 1px;
  height: 100%;
  background: #f1a1c4;
}

/*全文檢索*/

.searchKeyword,
.mContent-hdr h2.searchKeyword {
  font-size: 160%;
  margin-bottom: 20px;
}

.searchKeyword b {
  font-size: 70%;
  color: #555;
  padding-left: 10px;
}

.searchKeyword span {
  color: #ec6aa4;
}

.searchResult > article {
  margin-bottom: 2rem;
  position: relative;
  float: none;
  width: 100%;
}

.searchResult > article .info {
  padding: 30px 0;
  background: #ffffff;
  position: relative;
}

.searchResult > article .info strong {
  font-weight: normal;
}

.searchResult > article .info h2 {
  font-size: 150%;
  font-weight: 700;
  margin-bottom: 10px;
}

.searchResult > article .info p {
  font-size: 110%;
  line-height: 1.8;
  margin-bottom: 2rem;
  word-break: break-all;
}

.searchResult > article span.hLight {
  background: #ffeb3b;
  padding: 0.3rem;
}

.searchResult > article .searchResultInfo {
  clear: both;
  width: 100%;
  text-align: right;
  color: #8a8a8a;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 1rem;
}

.searchResult > article .searchResultInfo .col {
  margin-right: 0px;
  margin-left: 15px;
  display: inline-block;
  vertical-align: top;
  padding-bottom: 10px;
}

.searchResult > article .searchResultInfo .col span {
  color: #3baaef;
  padding: 0 0.5rem;
}

.searchResult > article .searchResultInfo a {
  color: #3baaef;
}

.searchResult > article .searchResultInfo a:hover {
  text-decoration: underline;
}

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

/*第三層按鈕(自然生態.人文淺談)*/

.categories.natural,
.categories.lang,
.categories.culture,
.categories.natural ul,
.categories.culture ul,
.categories.help,
.categories.help ul,
.categories.BF_travel,
.categories.BF_travel ul,
.categories.M_travel,
.categories.M_travel ul {
  padding: 10px 0;
}

.categories.natural li,
.categories.help li {
  width: 33.33%;
}

.categories.lang ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.categories.lang li {
  width: auto;
  padding: 0 0 0 15px;
  float: unset;
}

.categories.natural li a strong::before {
  background-image: url(../images/icon/icon_btn_natural.svg);
}

.categories.lang li a strong::before {
  background-image: url(../images/icon/earth.svg);
}

.categories.lang li a {
  border: 1px solid #ec6aa4;
  background-color: #ec6aa4;
  border-radius: 10px;
}

.categories.lang li a strong {
  color: white;
}

.categories.lang li a:hover {
  border: 1px solid #ec6aa4;
  border-radius: 10px;
  color: #d4357c;
}

.categories.culture li a strong::before {
  background-image: url(../images/icon/icon_btn_temple.svg);
}

.categories.culture li {
  width: 20%;
}

.categories.help li:nth-child(1) a strong::before {
  background-image: url(../images/icon/icon_help01.svg);
}

.categories.help li:nth-child(2) a strong::before {
  background-image: url(../images/icon/icon_help02.svg);
}

.categories.help li:nth-child(3) a strong::before {
  background-image: url(../images/icon/icon_help03.svg);
}

article.news .textArea .categories.BF_travel ul,
article.news .textArea .categories.M_travel ul {
  padding: 0;
}

.categories.BF_travel li {
  width: 33.33%;
}

.categories.BF_travel li a strong::before {
  background-image: url(../images/icon/icon_btn_tour04.svg);
}

.categories.M_travel li {
  width: 50%;
}

.categories.M_travel li a strong::before {
  background-image: url(../images/icon/icon_btn_tour06.svg);
}

/*更多連結*/

.LinkList li {
  float: left;
  margin-bottom: 20px;
  margin-right: 20px;
  width: calc((100% - 80px) / 4);
  height: auto;
}

.LinkList li:nth-child(4n) {
  margin-right: 0;
  width: calc((100%) / 4);
}

.LinkList li a {
  display: block;
}

.LinkList li a > img {
  width: 100%;
  height: 110px;
}

article.news .LinkList img {
  margin-top: 0;
}

/*錯誤頁*/

.errorpage {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.errorpage .logo {
  width: 350px;
  height: 112px;
  position: absolute;
  left: 35px;
  top: 25px;
}

.errerInfo {
  width: 768px;
  height: 550px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.errerInfo .col-l {
  width: 40%;
  margin-right: 20px;
  padding: 20px;
}

.errerInfo .col-r {
  margin-top: 60px;
  text-align: center;
  width: calc((60% - 20px));
}

.errerInfo h1 {
  font-size: 400%;
  font-weight: bold;
}

.errerInfo h2 {
  font-size: 150%;
  line-height: 1.5;
  letter-spacing: 0px;
}

.errerInfo h3 {
  font-size: 130%;
}

.errerInfo h4 {
  font-size: 120%;
}

.errerInfo p {
  clear: both;
  line-height: 1.8;
}

.errerInfo ul {
  margin-top: 40px;
}

.errerInfo li {
  display: inline-block;
  margin: 0 25px;
}

.errerInfo li a {
  display: block;
  text-align: center;
  width: 330px;
  background-color: #ec6aa4;
  color: #fff;
  padding: 15px;
  font-weight: bold;
  font-size: 130%;
  border-radius: 50px;
  -webkit-box-shadow: 0px 7px 25px rgba(138, 138, 138, 0.5);
  box-shadow: 0px 7px 25px rgba(138, 138, 138, 0.5);
}

.errerInfo li a:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
}

/*達人專區*/

.news-block-list.carousel {
  list-style: none;
  padding-left: 0px;
  margin-bottom: 20px;
}

.news-block-list .slick-slide {
  outline: none;
}

.news-block {
  padding: 0px 5px;
  margin: 10px 0;
}

.news-block-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  overflow: hidden;
  width: 100%;
  height: 430px;
  border-width: 1px;
  border-color: rgba(200, 200, 200, 0.5);
  border-style: solid;
}

.news-block figure {
  width: 45%;
  height: 100%;
  position: relative;
}

.news-block figure > img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  -o-object-fit: cover;
  object-fit: cover;
}

.news-block .news-block-content {
  width: 55%;
  height: 100%;
  position: relative;
  padding: 20px;
  font-size: 0rem;
}

.news-block .news-block-title {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 30px;
  max-height: 60px;
  margin-bottom: 15px;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.news-block .hashtag {
  margin-bottom: 15px;
  height: 30px;
  overflow: hidden;
}

.news-block .news-block-writer {
  font-size: 0rem;
  margin-bottom: 15px;
  height: 50px;
  overflow: hidden;
}

.news-block .news-block-writer .writer-name {
  display: inline-block;
  vertical-align: top;
  font-size: 1.125rem;
  line-height: 50px;
  padding-left: 10px;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-block .news-block-writer .writer-img {
  width: 50px;
  height: 50px;
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.news-block .news-block-writer .writer-img > img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}

.news-block .news-block-info {
  font-size: 1.125rem;
  line-height: 30px;
  margin-bottom: 15px;
}

.morebtn {
  width: 200px;
  display: block;
  border: 1px #ec6aa4 solid;
  padding: 3px 10px;
  margin: 0px auto 20px;
  text-align: center;
  background-color: #fff;
  color: #ec6aa4;
  font-size: 1.125rem;
  line-height: 30px;
}

.morebtn:hover,
.morebtn:focus {
  background-color: #ec6aa4;
  color: #fff;
}

.news-block .morebtn {
  display: inline-block;
  margin-bottom: 0px;
}

@media screen and (max-width: 1024px) {
  .news-block-wrap {
    display: block;
    height: auto;
  }
  .news-block figure {
    width: 100%;
    height: 0;
    padding-bottom: 67%;
  }
  .news-block .news-block-content {
    width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 480px) {
  .news-block .news-block-content {
    padding: 15px;
  }
  .news-block .news-block-title {
    font-size: 1.3rem;
    margin-bottom: 10px;
  }
  .news-block .hashtag {
    margin-bottom: 10px;
  }
  .news-block .morebtn {
    display: block;
    padding: 10px 20px;
    border-radius: 0px;
  }
}

@media screen and (max-width: 400px) {
  .news-block .news-block-content {
    padding: 10px;
  }
}

/* 格狀排版 Grid */

.grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 20px !important;
}

.grid > li {
  width: 100%;
  padding: 0px 0.5em;
}

.grid > li:first-child {
  padding-left: 0;
}

.grid > li:last-child {
  padding-right: 0;
}

.grid.grid-100 > li {
  width: 100%;
}

.grid.grid-50 > li {
  width: 50%;
}

.grid.grid-33 > li {
  width: 33.3%;
}

.grid.grid-25 > li {
  width: 25%;
}

.grid.grid-left {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.grid.grid-left > li:nth-child(odd) {
  width: 40%;
  padding-left: 0px;
}

.grid.grid-left > li:nth-child(even) {
  width: 60%;
  padding-right: 0px;
}

.grid.grid-right {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.grid.grid-right > li:nth-child(odd) {
  width: 40%;
  padding-right: 0px;
}

.grid.grid-right > li:nth-child(even) {
  width: 60%;
  padding-left: 0px;
}

.content .grid {
  list-style: none;
  padding-left: 0px;
}

.content .grid img {
  display: block;
  max-width: 100%;
  margin: 0px auto 20px;
}

@media screen and (max-width: 900px) {
  .grid.grid-left,
  .grid.grid-right {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .grid.grid-left > li:nth-child(odd),
  .grid.grid-right > li:nth-child(odd) {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
  }
  .grid.grid-left > li:nth-child(even),
  .grid.grid-right > li:nth-child(even) {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
  }
}

@media screen and (max-width: 480px) {
  .grid > li {
    padding: 0px;
  }
  .grid.grid-100 > li {
    width: 100%;
  }
  .grid.grid-50 > li {
    width: 100%;
  }
  .grid.grid-33 > li {
    width: 100%;
  }
  .grid.grid-25 > li {
    width: 100%;
  }
}

/*Safari設定*/

/*
@media not all and (min-resolution: 0.001dpcm) {
  article.news h1,
  .mContent-hdr h1,
  .mContent-hdr h2,
  .topicInfo h2 {
    font-weight: 500;
  }
  .container article h2,
  .container article h3,
  .scenerybox h2,
  .festivalList .rightnav ul li a span,
  .festivalList ul li ul li.festivalInfo .info p,
  .festivalList ul li ul li.festivalInfo .info a.more span,
  ul.rowbox li .info h3,
  .wrap article a.Qtitle h2,
  .wrap article strong {
    font-weight: 400;
  }
  .categoriesLevelTwo li a strong,
  ul.rowbox li .info h4,
  .subscription dl dt label,
  select,
  ul.bookmark li a span,
  .downloadArea table,
  .sitemap > ul > li li a {
    font-weight: 300;
  }
  .mContent-contArea .container p,
  .SearchBox legend,
  .wrap article ol li,
  .tableStyle,
  .textArea ul li {
    font-weight: 200;
  }
  .categories li a strong {
    font-size: 100%;
    font-weight: 400;
  }
}
*/


/*---------20190523 Peggy新增---------*/

.map-bg {
  background: none;
}

.map-bg .scenerymap {
  left: 50%;
  transform: translate(-50%, 50%);
  bottom: 50%;
}

.map-bg .container {
  padding: 0;
  min-height: 550px;
}

.list-zone h2 {
  font-weight: bold;
  color: #2b9ae1;
  padding-left: 11px;
  padding-bottom: 10px;
  font-size: 150%;
}

.list-zone h2:before {
  content: "";
  display: inline-block;
  width: 56px;
  height: 56px;
  background-image: url(../images/icon/icon_lighthouse.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: sub;
  margin-right: 10px;
}

.hashtag-zone {
  display: flex;
  flex-flow: row wrap;
}

.hashtag-zone a {
  width: 45%;
  text-align: left;
  padding: 5px;
  border-radius: 5px;
  margin: 8px 8px 0 0;
  color: #d4357c;
}

.hashtag-page {
  display: flex;
  flex-flow: row wrap;
}

.hashtag-page a {
  width: 15%;
  text-align: left;
  padding: 10px 5px 10px 15px;
  border-radius: 5px;
  margin: 10px;
  border: 1px solid #c8c8c8;
  color: #d4357c;
}

.hashtag-page a span {
  color: #717171;
  margin-left: 10px;
  float: right;
  padding-right: 10px;
  padding-top: 2px;
}

.hashtag-page a:hover {
  border: 1px solid #eb65a1;
  background-color: #eb65a1;
  color: #fff;
}

.hashtag-page a:hover span {
  color: #fff;
}

.list-zone .rowbox li .info {
  padding: 15px 75px 20px 15px;
}

.mContent-hdr .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 0 0;
  overflow: hidden;
}

.hashtag-title {
  float: left;
}

.hashtag-btn-list {
  float: right;
}

a.hashtag-btn-list {
  float: right;
  background-color: #ffffff;
  padding: 10px 20px;
  color: #d4357c;
  border-radius: 8px;
  border: 1px solid #eb65a1;
  margin-top: 30px;
  font-weight: bold;
}

@media (min-width: 1024px) {
  .list-zone ul.rowbox li .hashtag-zone a:hover {
    padding-left: 10px;
  }
  a.hashtag-btn-list:hover {
    background-color: #eb65a1;
    color: #fff;
    border: 1px solid #eb65a1;
  }
}

@media (max-width: 768px) {
  .list-zone .rowbox li .info {
    padding: 15px 60px 20px 15px;
  }
}

@media (max-width: 480px) {
  .list-zone .rowbox li .info {
    padding: 15px 47px 20px 15px;
  }
}

@media (max-width: 568px) {
  .mContent-hdr .hashtag-title {
    width: 100%;
    text-align: left;
  }
  a.hashtag-btn-list {
    float: left;
    margin: 10px;
  }
}

/*台灣觀巴行程20200522更新*/
.strokebox {
  border-bottom: 1px solid #d3d3d3;
  padding: 20px 0;
}
.strokebox.end{
  border: none;
}


article.news .textArea .new-line ul {
  padding: 0;
}
.new-line ul {
  padding-left: 0;
}

.new-line ul li {
  list-style: none;
}

.new-line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 768px) {
  .new-line .line-map {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
  }
}

.new-line .line-map li {
  border-radius: 5px;
  margin-right: 30px;
  padding: 5px 10px;
  float: left;
  margin-bottom: 14px;
}

@media screen and (max-width: 768px) {
  .new-line .line-map li {
    margin: 0 0 40px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    float: inherit;
  }
}

.new-line .line-map-blue {
  background-color: #fff;
  border: 1px solid #2fa7ea;
}

.new-line .line-map-pink {
  color: #fff;
  background-color: #d4367c;
  border: 1px solid #fff;
}
.new-line .line-map-pink:hover {
  background-color: #ec65a1;
}
.new-line .line-map-pink a {
  color: #fff;
}
.new-line .line-map-pink a:hover {
  color: #ffeb3b;
}

.new-line .arrow-icon {
  position: relative;
}

.new-line .arrow-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -25px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: block;
  background-image: url(../images/icon/icon-arrow.svg);
  width: 20px;
  height: 20px;
}

@media screen and (max-width: 768px) {
  .new-line .arrow-icon::after {
    top: 120%;
    right: auto;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
}

.bf__icon {
  display: flex;
  align-items: center;
  padding-left: 0 !important;
}
.bf__icon li {
  list-style: none;
  margin-right: 0.5rem;
}
.bf__icon li img {
  margin: 0;
  width: 35px !important;
  height: 35px;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
}

.bf__icon li .bf__both {
  width: 100px !important;
  height: 35px;
}

.bf__icon li .bf__both-s {
  width: 70px !important;
  height: 35px;
}

.socialLinks{
  width: 290px;
}

.socialLinks-video {
  width: 84%;
  height: 90%;
  display: block;
  margin-bottom: 10px;
  text-align: center;
  border-radius: 5px;
  position: relative;
  background-color: #da9a2e;
  transition: .2s;
}
.socialLinks-video:hover{
  background-color: #f5ad32;

}

.socialLinks-video a {
  color: #fff;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  padding: 5%;
  display: block;
  font-size: 1.2em;
}
.socialLinks-video a span {
  padding-left: 45px;
  position: relative;
}

.socialLinks-video a span::before {
  content: "";
  width: 40px;
  height: 40px;
  display: block;
  position: absolute;
  top: 50%;
  left: -7px;
  margin-top: -20px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url(../images/icon/logotype.svg);
}

.bigtext{
  font-size: 110%;
}




/*-----------------20210308-台灣好行切版-直接套東北角改-----------------*/

/*上稿貼文樣式*/
    .travelInfo {
      margin-bottom: 1rem
    }

    .travelInfo-row {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      position: relative;
      line-height: 1.8em;
      margin-top: 1rem;
      margin-bottom: 1rem;
      padding-left: calc(1.8em + 7px)
    }

    @media screen and (min-width: 1025px) {
      .travelInfo-row {
          padding-left:calc(1.8em + 17px)
      }
    }

    .travelInfo-title {
      margin-bottom: 0.5rem;
      color: #676767
    }

    .travelInfo-title::before {
      content: '';
      width: 1.8em;
      height: 1.8em;
      display: none;
      vertical-align: top;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 60%;
      position: absolute;
      top: -5px;
      left: 0px
    }

    @media screen and (min-width: 1025px) {
      .travelInfo-title::before {
          left:10px
      }
    }

    .travelInfo-title.icon-phone::before {
      display: inline-block;
      background-image: url("../images/icon/icon-phone.svg")
    }

    .travelInfo-title.icon-ticket::before {
      display: inline-block;
      background-image: url("../images/icon/icon-ticket.svg")
    }

    .travelInfo-title.icon-link::before {
      display: inline-block;
      background-image: url("../images/icon/icon-link.svg")
    }

    .travelInfo-title.icon-info::before {
      display: inline-block;
      background-image: url("../images/icon/icon-bus.svg")
    }



    .travelInfo-content {
      color: #161211
    }

    .travelInfo-content p:last-child {
      margin-bottom: 0px
    }

    .travelInfo-content img {
      height: 1.8em;
      display: inline-block;
      vertical-align: top;
      margin-bottom: 0px
    }

    .travelInfo-title {
      margin-bottom: 0.5rem;
      color: #0778BF;
      font-size: 1.3rem;
      font-weight: 600;
    }

    .bus-table{
      width: 100%;
      text-align: center;
      font-size: 1.15rem;
    }

    .bus-table th , .bus-table td {
      text-align: center;
      padding: 10px;
    }

    .bus-table th{
      /* height: 80px; */
      font-weight: 600;
    }

    /* .bus-table tr:nth-child(1) td{
      color: #0778BF;
      font-weight: 600;
    } */

    .bluestyle thead th {
      color: #0778BF;
      font-weight: 600;
    }

    .bluestyle caption {
      background-color: #D6EFF9;
      color: #0778BF;
      text-align: center;
      padding: 20px 0;
      font-weight: 600;
    }

    .bluestyle , .bluestyle th , .bluestyle td{
      border: 1px solid #D6EFF9;
    }

    /* .bluestyle th{
      background-color: #D6EFF9;
      color: #0778BF;
    } */

    .bus-table .acc-icon{
      position: relative;
    }


    .bus-table .acc-icon::before{
      content: '';
      width: 20px;
      height: 20px;
      display: block;
      position: absolute;
      left: -25px;
      top: 0;
      background-image: url(../images/icon/icon-barrier.svg);
      background-size: 100%;
      background-repeat: no-repeat;
    }
    .prompt-station{
      margin-bottom: 0.5rem;
      color: #0778BF;
      font-size: 1.3rem;
      font-weight: 600;
      position: relative;
    }

    .prompt-station::before {
      content: '';
      width: 1.8em;
      height: 1.8em;
      vertical-align: sub;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 75%;
      margin-top: 5px;
      display: inline-block;
      background-image: url(../images/icon/icon-guide.svg);
  }


    .bus.acc-icon{
      font-size: 0;
    }

    .bus.acc-icon::before{
      content: '';
      width: 20px;
      height: 20px;
      display: inline-block;
      background-image: url(../images/icon/icon-barrier.svg);
      background-size: 100%;
      background-repeat: no-repeat;
      vertical-align: middle;
      margin-right: 5px;
      margin-top: -11px;
    }

    .one-day-ticket{
      margin-left: 47px;
    }

    .one-day-ticket img{
        width: 200px;
    }


    @media screen and (max-width: 1024px) {
      .one-day-ticket{
        margin-left: 38px;
      }
    }

    .pinkstyle , .pinkstyle th , .pinkstyle td{
      border: 1px solid #FFCFE5;
    }

    .pinkstyle th{
      background-color: #FFCFE5;
      color: #CD3A80;
    }




/*公車站跳轉連結樣式*/
    .audioPlayer .audio {
      width: 100% !important;
    }


    .routeList {
      list-style: none;
      padding-left: 0px;
      margin-bottom: 2rem
    }

    @media screen and (min-width: 768px) {
      .routeList {
          display:-webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap
      }
    }

    .routeList>li {
      display: block;
      margin-top: 10px;
      margin-bottom: 10px
    }


    .routeList>li::after {
        content: '';
        width: 2rem;
        height: 3rem;
        margin-right: 5px;
        display: inline-block;
        vertical-align: top;
        background: url(../images/icon/icon-arrow.svg) no-repeat center/60%;
    }

    .routeList>li:last-child::after {
        display: none
    }
  

    .routeList-item {
      width: 100%;
      display: block
    }

    @media screen and (min-width: 768px) {

      .routeList>li::after {
        content: '';
        width: 2rem;
        height: 3rem;
        margin-right: 5px;
        display: inline-block;
        vertical-align: top;
        background: url(../images/icon/icon-arrow.svg) no-repeat center/60%;
    }
      
      .routeList-item {
          width:auto;
          display: inline-block;
          vertical-align: top
      }
    }

    @media screen and (max-width: 767px) {
      .routeList-item {
        display: inline;
      }
    }

    @media screen and (min-width: 1025px) {
      .routeList-item:hover span,.routeList-item:focus span {
          color:#fff;
          border-color: #CD3A80;
          background-color: #CD3A80;
      }
    }

    .routeList-item span {
      max-width: calc(100% - 1.8em - 10px);
      display: inline-block;
      vertical-align: top;
      padding: 10px 15px;
      line-height: 1.4em;
      border: 1px #51B431  solid;
      border-radius: 5px;
      color: #161211
    }

    @media screen and (min-width: 768px) {
      .routeList-item span {
          max-width:none
      }
    }




/*本體遊程樣式*/
    .tourList {
      margin-top: 2rem;
      margin-bottom: 5rem;
      padding-left: 50px;
      position: relative;
      counter-reset: tourList-date
    }

    .tourList::before {
      content: '';
      width: 1px;
      height: calc(100% - (35px / 2));
      display: block;
      background-color: #EA629F;
      position: absolute;
      top: 17.5px;
      left: 17px
    }

    @media print {
      .tourList {
          padding-left: 0px
      }
    }

    .tourList-date {
      margin-top: 3rem;
      margin-bottom: 3rem;
      position: relative;
      color: #0C6CB7;
      font-size: 1.5rem;
      line-height: 35px;
      counter-increment: tourList-date
    }

    .tourList-date:first-child {
      margin-top: 0px
    }

    .tourList-date::before {
      content: counter(tourList-date);
      width: 35px;
      height: 35px;
      display: block;
      border: 1px #EA629F solid;
      border-radius: 100%;
      color: #EA629F;
      text-align: center;
      font-size: 1.25rem;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background-color: #fff;
      position: absolute;
      top: 0px;
      left: -50px
    }


    .tourList .photo2box .photo{
      height: 0px;
      padding-bottom: 30%;
      display: block;
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }

    @media screen and (max-width: 1024px) {
      .tourList .photo2box .photo{
        padding-bottom: 66%;
        margin: 10px 0;
      }
    }

    .tourList .photo2box .photo img{
      width: 100%;
      height: 100%;
      position: absolute;
      -o-object-fit: cover;
      object-fit: cover;
      margin: 0px;
    }



    .tourList-item {
      margin-top: 1rem;
      margin-bottom: 1rem;
      position: relative
    }

    .tourList-route {
      margin-top: 1rem;
      margin-bottom: 1rem;
      position: relative
    }

    .tourList-route::before {
      content: '';
      width: 20px;
      height: 20px;
      display: block;
      background: #fff url("../images/icon/icon-cars.svg") no-repeat center/contain;
      position: absolute;
      top: calc((100% - 20px)/2);
      left: -42.5px
    }

    .tourList-title {
      line-height: 1.6em;
      color: #0C6CB7;
      font-size: 1.5rem;
      font-weight: 600;
    }

    .tourList-title a {
      text-decoration: none
    }

    .tourList-title::before {
      content: '';
      width: 15px;
      height: 15px;
      display: block;
      border-radius: 100%;
      background-color: #EA629F;
      position: absolute;
      top: calc((1.6em - 15px)/2);
      left: -40px
    }


    .tourList-subtitle {
      margin-top: 1rem;
      margin-bottom: 1rem;
      font-size: 1.25rem;
      color: #303030;
      font-weight: 600;
    }


    @media screen and (min-width: 768px) {
      .tourList-content {
          width:calc(100% - 330px);
          padding-left: 20px
      }
    }

    .tourList-content .btn {
      margin-top: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }


    .tourList-media {
      margin-top: 1rem;
      margin-bottom: 1rem
    }

    .tourList-media .audioPlayer {
      margin-top: 10px
    }

    @media screen and (min-width: 1025px) {
      .tourList-media .audioPlayer {
          width:850px;
          display: inline-block;
          vertical-align: top;
          margin: 0px
      }
    }

    @media print {
      .tourList-media {
          display: none
      }
    }

    .tourList-media-row {
      margin-bottom: 1rem
    }

    @media screen and (min-width: 1025px) {
      .tourList-media-row {
          display:-webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center
      }
    }

    @media screen and (min-width: 1025px) {
      .tourList-media-title {
          margin-right:15px;
          min-width: max-content;
      }
    }

    .tourList-media-scenerybtn {
      margin-bottom: 1rem;
    }




/*各種按鈕*/
    a.tourTraffic-btn {
      border: 1px solid #EA629F;
      border-radius: 5px;
      padding: 15px;
      margin-bottom: 15px;
      display: inline-block;
      position: relative;
    }

    @media screen and (max-width: 768px){
      a.tourTraffic-btn {
        padding-right: 45px;
      }
    }


    a.scenery-btn{
      border: 1px solid #EA629F;
      background-color:#EA629F;
      color: #fff;
      border-radius: 5px;
      padding: 15px;
      padding-left: 45px;
      margin-bottom: 15px;
      display: inline-block;
      position: relative;
    }

    a.scenery-btn::before {
      content: '';
      width: 1.6em;
      height: 1.6em;
      display: block;
      background: url('../images/icon/icon-360.svg') no-repeat center/contain;
      position: absolute;
      left: 10px;
      top: 10px;
    }


    .tourTraffic-btn::after {
      content: '';
      width: 1.6em;
      height: 1.6em;
      display: block;
      background: url('../images/icon/icon-googlemap.svg') no-repeat center/contain;
      position: absolute;
      right: 10px;
      top: 10px;
    }

    @media screen and (min-width: 768px){
      .tourTraffic-btn::after {
          position: static;
          display: inline-block;
          vertical-align: sub;
          margin-left: 10px;
      }
    }

/*遊程卡片樣式*/

    .card-landscape-list {
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 1rem;
      margin-bottom: 1rem;
      margin-left: -10px;
      margin-right: -10px;
      height: 100%;
    }
    @media screen and (max-width: 1024px) {
      .card-landscape-list {
        white-space: nowrap;
      }
    }

    @media screen and (min-width: 371px) {
      .card-landscape-list {
          margin-left:-15px;
          margin-right: -15px
      }
    }

    @media screen and (min-width: 481px) {
      .card-landscape-list {
          margin-left:-20px;
          margin-right: -20px
      }
    }

    @media screen and (min-width: 1025px) {
      .card-landscape-list {
          margin-left:0px;
          margin-right: 0px
      }
    }

    .tourList .card-landscape-list {
      margin: 1rem 0px
    }



    .card-landscape-list {
      list-style: none;
      padding-left: 5px;
      padding-right: 5px;
      margin-bottom: 1rem;
      display: flex;
      flex-flow: wrap;
    }

    @media screen and (min-width: 1025px) {
      .card-landscape-list {
          padding-left:0px;
          padding-right: 0px;

      }
    }

    .card-landscape-list li {
      display: inline-block;
      vertical-align: top;
      padding-left: 5px;
      padding-right: 5px;

    }

    .card-landscape-list li:nth-child(1) {
      margin-left: 0;
    }


    @media screen and (min-width: 1025px) {
      .card-landscape-list li:nth-child(4n+1) {
        margin-left: 0;
      }
    }



    .card-landscape-list li .card {
      width: 245px;
      height: 100%;
      display: block;
    }

    @media screen and (min-width: 481px) {
      .card-landscape-list li .card {
          width:300px
      }
    }

    @media screen and (min-width: 1025px) {
      .card-landscape-list li .card {
          width:100%
      }
    }

    @media screen and (min-width: 1025px) {
      .card-landscape-list li {
          /*display: block;*/
          width:calc((100% - 3rem)/4);
          display: inline-block;
          padding-left: 0px;
          padding-right: 0px;
          margin-left: 1rem;
          margin-bottom: 1rem
      }
    }


    .card-landscape-list .card-title,.card-landscape-list .card-text,.card-landscape-list .card-subtitle {
      white-space: initial
    }

    .mCSB_horizontal.mCSB_inside>.mCSB_container{
      display: flex;
    }

    .card-wrap{
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
    }
    @media screen and (min-width: 1025px) {
      .card-wrap{
        width: 100%;
      }
    }
    .card-body {
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      display: block;
      padding: 1rem 0.7rem;
      background-color: #fff;
      border: 1px #A7DAEE solid;
      border-top: none;
    }

    .card-image {
      width: 100%;
      height: 0px;
      padding-bottom: 66.66%;
      display: block;
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }

    .card-image img {
      width: 100%;
      height: 100%;
      position: absolute;
      -o-object-fit: cover;
      object-fit: cover;
      margin: 0px;
    }


    .card-text p {
      margin-bottom: 0px;
      font-size: 1.125rem;
      color: #000;
    }
    .card-second-title{
      color: #0C6CB7;
    }

    .card-title{
      color: #0C6CB7;
      font-weight: 600;
      font-size: 1.3rem;
    }


    .card-text .icon-distance::before {
      content: '';
      width: 30px;
      height: 30px;
      margin-right: 10px;
      display: inline-block;
      vertical-align: top;
      background: url(../images/icon/icon-distance.svg) no-repeat center/contain;
    }



/*卡片橫卷軸*/
    .mCS-my-theme.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
      background-color: #EA629F; 
    }

    .mCS-my-theme.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
      background-color: #EA629F; 
    }

    .mCS-my-theme.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar:hover{
      background-color: #EA629F; 
    }

    .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 
    .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
      background-color: #EA629F !important; 
    }

    .mCS-my-theme.mCSB_scrollTools .mCSB_draggerRail{ 
      background-color:#ececec; 
    } 

/*360lightbox硬修改*/

    .mfp-iframe-holder .mfp-close {
      width: 40px !important; 
      height: 40px !important; 
      padding: 0 !important; 
      top: 0 !important; 
      right: 0 !important; 
      line-height: 30px !important; 
      text-align: center !important; 
      font-size: 2rem !important; 
      background-color: #e4e4e4 !important; 
      color: #000000 !important; 
    }

    @media screen and (max-width: 1024px) {
      .mfp-iframe-holder .mfp-content {
        height: 80vh !important; 
      }
    }


  /*20210507-自行車年專頁切版*/


    .bikepage-part1 , .bikepage-part2 , .bikepage-part3,
    .bikepage-part4 , .bikepage-part5 , .bikepage-part6,
    .bikepage-part7{
        display: block;
        margin-bottom: 30px;
    }

    .bike-title{
      color: #0b7ac1;
      font-size: 1.5rem;
      font-weight: 600;
    }

    .bike-title::before {
      content: '';
      width: 40px;
      height: 30px;
      vertical-align: sub;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 75%;
      margin-top: 5px;
      margin-right: 5px;
      display: inline-block;
      background-image: url(../images/bike/icon-bike.svg);
  }


    /*自行車店家*/
  .wrap article ul.bick-location{
    display: flex;
    margin-bottom: 50px;
    justify-content: left;
    padding: 0;
  }

  @media screen and  (max-width: 1280px) {
    .wrap article ul.bick-location{
      flex-flow: wrap;
    }
  }


  .bick-location li{
    width: calc((100% - 120px)/4);
    margin-right: 30px;
  }

  .bick-location a{
    width: 100%;
    color: #000000;
    display: inline-block;
    padding: 20px;
    border: 1px solid #D3D3D3;
    border-radius: 5px;
    height: 100%;
  }

  .bick-location a:hover{
    border: 1px solid #eb65a1;
  }

  .bick-location .title{
    font-weight: 600;
    font-size: 1.2rem;
  } 

  .bick-location .title:before{
    content: '';
    width: 25px;
    height: 25px;
    vertical-align: sub;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75%;
    margin-top: 5px;
    display: inline-block;
    background-image: url(../images/bike/icon-place.svg);
  }

  ul.rowbox.bikepage li {
    width: calc((100% - 40px) / 2);
  }

  article.news .textArea ul.bikepage{
    padding: 0;
    display: flex;
    flex-flow: wrap;
  }

  @media screen and  (max-width: 480px) {
      ul.rowbox.bikepage li {
        width: calc((100% - 20px));
      }
  }

  /*個人&自行車裝備*/

  .wrap article ul.bikepage.rowbox li .info {
    min-height: initial;
    padding: 15px;
  }

  .equipped-box{
     display: flex;
  }



  .personal-equipped .left , .bike-equipped .left ,
  .personal-equipped .right , .bike-equipped .right{
      flex: 1;
  }

  .personal-equipped  .pic{
    background: url(../images/bike/per-equipped-bd.svg) no-repeat center top;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    background-size: 100%;
    width: 640px;
    height: 640px;
  }

  .bike-equipped .pic{
    background: url(../images/bike/bike-equipped-bd.svg) no-repeat center top;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    background-size: 100%;
    width: 640px;
    height: 640px;
  }


  @media screen and  (max-width: 768px) {
    .equipped-box{
      flex-flow: column;
    }

    .bike-equipped{
      flex-flow:column-reverse;
    }
    .personal-equipped .pic , .bike-equipped .pic {
      width: 100%;
      height: calc(100vw - 120px);
    }
  }


  @media screen and  (max-width: 480px) {
    .personal-equipped .pic , .bike-equipped .pic{
      width: 100%;
      height: calc(100vw - 30px);
    }
  }



  .equipped-box .pic a{
      position: absolute;
      width: 13%;
      height: 13%;
      padding: 5px;
      border-radius: 50%;
      overflow: hidden;
  }

  .equipped-box .pic a.current{
      border: 2px solid #12AAE8;
  }

  .equipped-box .pic a:nth-child(1){
    left: 45%;
    top:3% ;
  }
  .equipped-box .pic a:nth-child(2){
    left: 67%;
    top: 13%;
  }

  .equipped-box .pic a:nth-child(3){
    left: 83%;
    top: 38%;
  }

  .equipped-box .pic a:nth-child(4){
    left: 78%;
    top: 63%;
  }

  .equipped-box .pic a:nth-child(5){
    left: 56%;
    top: 80%;
  }

  .equipped-box .pic a:nth-child(6){
    left: 32%;
    top: 80%;
  }

  .equipped-box .pic a:nth-child(7){
    left: 12%;
    top: 65%;
  }
  .equipped-box .pic a:nth-child(8){
    left: 3%;
    top: 37%;
  }

  .equipped-box .pic a.personalbtn-8 {
    left: 3%;
    top: 42%;
  }

  .equipped-box .pic a:nth-child(9){
    left: 18%;
    top: 13%;
  }


  .equipped-box  .pic a img{
      width: 100%;
      height: 100%;
  }

  .personal-equipped .question{
      margin-left: 50px;
  }

  article.news .textArea ul.question {
    padding: 0;
  }


  .bike-equipped .question{
      margin-right: 50px;
  }

  @media screen and  (max-width: 1024px) {
      .personal-equipped .question{
        margin-left: 0;
      }

      .bike-equipped .question{
        margin-right: 0;
      }
  }



  .equipped-box .question li a{
      border-bottom: 2px solid #D3D3D3;
      padding: 10px;
      font-size: 1.4rem;
      font-weight: 600;
      color: #000;
      display: block;
      position: relative;
  }
  
  .equipped-box .question li a::after{
      content: '';
      width: 25px;
      height: 25px;
      display: inline-block;
      background-image: url(../images/bike/icon-arrow-1.svg);
      background-size: 100%;
      background-repeat: no-repeat;
      vertical-align: middle;
      margin-right: 5px;
      margin-top: 10px;
      position: absolute;
      right: 0;
  }

  .equipped-box .question li a.current::after{
    content: '';
    width: 25px;
    height: 25px;
    display: inline-block;
    background-image: url(../images/bike/icon-arrow-2.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 5px;
    margin-top: 10px;
    position: absolute;
    right: 0;
}


  .equipped-box .question .question-content{
      display: none;
  }

  .wrap article ul.repair-tool{
    display: flex;
    justify-content: left;
    flex-flow: wrap;
    margin: 50px 0;
    padding: 0;
  }

  .repair-tool li{
      width: calc((100% - 62px)/3);
      margin-right: 30px;
      margin-bottom: 30px;
  }

  .repair-tool li:nth-child(3){
    margin-right: 0px;
  }

  
  @media screen and  (max-width: 768px) {
    .repair-tool li{
      width: calc((100% - 62px)/2);
    }
    .repair-tool li:nth-child(3){
      margin-right: 30px;
    }
    .repair-tool li:nth-child(2){
      margin-right: 0px;
    }
  
  }

  @media screen and  (max-width: 480px) {
    .repair-tool li{
      width: 100%;
      margin-right: 0;
    }
    .repair-tool li:nth-child(3){
      margin-right: 0;
    }
  }





  .repair-tool .tool-img{
    width: 100%;
    height: 0;
    padding-bottom: 66%;
    position: relative;
    overflow: hidden;
  }

  .repair-tool .tool-img img{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    -o-object-fit: cover;
    object-fit: cover;
  }

  .repair-tool .tool-title{
      color: #008175;
      font-size: 1.4rem;
      font-weight: 600;
  }

  .mContent-contArea .container .repair-tool  p {
    margin-top: 0px;
  }

  .bick-location li{
    width: calc((100% - 120px)/4);
    margin-bottom: 20px;
  }

  @media screen and  (max-width: 1280px) {
    .bick-location li{
      width: calc((100% - 100px)/3);
    }
  }

  @media screen and  (max-width: 480px) {
    .bick-location li{
      width: 100%;
      margin-right: 0px;
    }
  }

    
  /*自行車快速按鈕*/
  .bikepage-fast-btn{
      position: fixed;
      right: 0;
      top:30%;
      display: none;
  }

  .bikepage-fast-btn a{
      position: relative;
      display: block;
      width: 20px;
      height: 20px;
      background-color: #CD3A80;
      margin: 10px 30px 10px 0;
      border-radius: 50%;
  }
  .bikepage-fast-btn a span{
      position: absolute;
      background-color: #CD3A80;
      color: #fff;
      top: -10px;
      right: 0;
      padding: 8px;
      border-radius: 10px;
      width: 150px;
      text-align: center;
      margin-right: 50px;
  }


  .bikespot-iconbox{
      background-color: #F2F2F2;
      padding: 30px;
      margin: 15px 0;
  }


  .serviceicons{
      display: flex;
       flex-flow: wrap;
  }


  @media screen and  (max-width: 1280px) {
      .serviceicons{
        flex-flow: wrap;
      }
  }

  .serviceicons .one-icon{
      width: calc(100% / 4);
      margin-top: 10px;
  }


  @media screen and  (max-width: 1280px) {
    .serviceicons .one-icon{
      width: calc(100% / 4);
    }
  }

  @media screen and  (max-width: 768px) {
    .serviceicons .one-icon{
      width: calc(100% / 3);
    }
  }

  @media screen and  (max-width: 480px) {
    .serviceicons .one-icon{
      width: calc(100% / 2);
    }
  }



  .bikeicon{
    width: 38px;
    height: 38px;
    display: inline-block;
    background-size: 100%;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin: 5px;
    font-size: 0;
  }


  @media screen and  (max-width: 480px) {
    .bikeicon{
      width: 35px;
      height: 35px;
    }
    .serviceicons .bikeicon{
      width: 30px;
      height: 30px;
    }
  }


  .bikeicon01{
      background-image: url(../images/bike/icon-01.svg);
  }
  .bikeicon02{
    background-image: url(../images/bike/icon-02.svg);
  }
  .bikeicon03{
    background-image: url(../images/bike/icon-03.svg);
  }
  .bikeicon04{
    background-image: url(../images/bike/icon-04.svg);
  }
  .bikeicon05{
    background-image: url(../images/bike/icon-05.svg);
  }
  .bikeicon06{
    background-image: url(../images/bike/icon-06.svg);
  }
  .bikeicon07{
    background-image: url(../images/bike/icon-07.svg);
  }
  .bikeicon08{
    background-image: url(../images/bike/icon-08.svg);
  }



  .bike-spot{
    font-size: 1.2rem;
    width: 100%;
    margin: 0 0 30px 0;
  }


  .bike-spot th{
      padding: 15px;
      background-color: #C0E0EF;
      border-right: 2px solid #fff;
  }

  .bike-spot td{
      padding: 15px;
      border-bottom: 2px solid #F2F2F2;
      text-align: left;
  }

  .bike-spot td:nth-child(1){
      width: 30%;
  }

  .bike-otherlink{
    background-color:  #EA629F;
    color: #fff;
    border-radius: 5px;
    padding: 15px;
    padding-right: 45px;
    margin-bottom: 15px;
    display: inline-block;
    position: relative;
    margin-right: 10px;
  }

  .bike-otherlink:hover{
    color: #fff;
    background-color: #CD3A80;
  }



  .bike-otherlink::after{
    content: '';
    width: 22px;
    height: 22px;
    display: block;
    background: url(../images/bike/out_wh.svg) no-repeat center/contain;
    position: absolute;
    right: 10px;
    top: 14px;
  }


/* 即時影像內頁 liveAreaInside css by 張詠銓 20200302 */
/* 字體改成 em 不特別要求 // iframe加title // a 連結 title 描述 targe blank*/
/* icon 可以用 class 放 // 如有意義需加 alt // */

/* 即時影像 */
.liveArea .map {
  height: 763px;
  width: 763px;
  margin: 0 auto;
  position: relative;
  background-image: url('../images/mapLBg.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 80%;
  z-index: 0;
}
.liveArea .map-mobile {
  display: none;
}
@media screen and (max-width: 1280px) {
  .liveArea .map {
    height: 400px;
    width: 400px;
    margin: 0 auto;
    position: relative;
    background-image: url('../images/mapLBg.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 90%;
  }
}
.liveArea .districtName {
  position: absolute;
  color: white;
  text-shadow: 0px 2px 5px #2C6A81;
}
.districtName.districtName01 {
  top: 480px;
  left: 150px;
}
.districtName.districtName02 {
  top: 260px;
  left: 220px;
}
.districtName.districtName03 {
  top: 220px;
  left: 335px;
}
.districtName.districtName04 {
  top: 310px;
  left: 415px;
}
.districtName.districtName05 {
  top: 360px;
  left: 475px;
}
.districtName.districtName06 {
  top: 410px;
  left: 540px;
}
.liveArea .liveAreaDot {
  position: absolute;
  height: 12px;
  width: 12px;
  background: #EB65A1;
  border: 1px solid white;
  border-radius: 50%;
  font-size: 0;
}
.liveArea .liveAreaDot::before {
  content: '';
  position: absolute;
  display: block;
  z-index: -1;
}
.liveAreaDot.liveAreaDot_1 {
  top: 230px;
  left: 285px;
}
.liveArea .liveAreaDot_1::before {
  height: 100px;
  width: 70px;
  border-left: 1px solid #EB65A1;
  border-top: 1px solid #EB65A1;
  right: 90px;
  top: 48%;
  -webkit-transform: skew(300deg);
  transform: skew(300deg);
}
.liveAreaDot.liveAreaDot_2 {
  top: 338px;
  left: 532px;
}
.liveArea .liveAreaDot_2::before {
  width: 202px;
  bottom: 5px;
  left: 5px;
  border-bottom: 1px solid #EB65A1;
}
.liveAreaDot.liveAreaDot_3 {
  top: 410px;
  left: 625px;
}
.liveArea .liveAreaDot_3::before {
  height: 80px;
  width: 90px;
  border-right: 1px solid #EB65A1;
  border-top: 1px solid #EB65A1;
  left: 38px;
  top: 48%;
  -webkit-transform: skew(40deg);
  transform: skew(40deg);
}
.liveAreaDot.liveAreaDot_4 {
  top: 283px;
  left: 436px;
}
.liveArea .liveAreaDot_4::before {
  height: 80px;
  width: 60px;
  border-right: 1px solid #EB65A1;
  border-bottom: 1px solid #EB65A1;
  left: 50px;
  bottom: 5px;
  -webkit-transform: skew(310deg);
  transform: skew(310deg);
}

.liveAreaDot.liveAreaDot_5 {
  top: 454px;
  left: 159px;
}
.liveArea .liveAreaDot_5::before {
  height: 100px;
  width: 1px;
  border-left: 1px solid #EB65A1;
  border-top: 1px solid #EB65A1;
  right: 75px;
  top: 48%;
  -webkit-transform: skew(305deg);
  transform: skew(305deg);
}

.liveAreaDot.liveAreaDot_6 {
  top: 222px;
  left: 315px;
}

.liveArea .liveAreaDot_6::before {
  height: 40px;
  width: 181px;
  border-right: 1px solid #EB65A1;
  border-top: 1px solid #EB65A1;
  right: 5px;
  bottom: 0;

}


@media screen and (max-width: 1280px) {
  .liveArea .districtName {
    font-size: 0.8em;
  }
  .districtName.districtName01 {
    top: 255px;
    left: 50px;
  }
  .districtName.districtName02 {
    top: 125px;
    left: 95px;
  }
  .districtName.districtName03 {
    top: 100px;
    left: 175px;
  }
  .districtName.districtName04 {
    top: 145px;
    left: 220px;
  }
  .districtName.districtName05 {
    top: 180px;
    left: 250px;
  }
  .districtName.districtName06 {
    top: 210px;
    left: 290px;
  }
  .liveArea .liveAreaDot {
    height: 9px;
    width: 9px;
  }
  .liveAreaDot.liveAreaDot_1 {
    top: 107px;
    left: 143px;
  }
  .liveAreaDot.liveAreaDot_2 {
    top: 174px;
    left: 288px;
  }
  .liveAreaDot.liveAreaDot_3 {
    top: 218px;
    left: 343px;
  }
  .liveAreaDot.liveAreaDot_4 {
    top: 142px;
    left: 231px;
  }
  .liveAreaDot.liveAreaDot_5 {
    top: 243px;
    left: 67px;
  }  
  .liveAreaDot.liveAreaDot_6 {
    top: 104px;
    left: 163px;
  }

  .liveArea .liveAreaDot_1::before {
    width: 40px;
  }
  .liveArea .liveAreaDot_2::before {
    width: 50px;
  }
  .liveArea .liveAreaDot_3::before {
    width: 30px;
  }
  .liveArea .liveAreaDot_4::before {
    height: 40px;
    width: 20px;
    left: 30px;
  }
  .liveAreaDot.liveAreaDot_6::before {
    right: 3px;
    height: 30px;
  }
}
.liveArea a.liveAreaImg {
  position: absolute;
  display: block;
  /* z-index: 2; */
}
.liveArea a.liveAreaImg figure span {
  display: block;
  /* width: 270px; */
  /* height: 270px; */
  width: 200px;
  height: 200px;
  border: 6px solid #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 20%);
  border-radius: 50%;
}
.liveArea a.liveAreaImg .liveAreaImgTiltle{
  position:absolute;
  left: 50%;
  top: 70%;
  color: white;
  font-size: 1.5em;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  text-shadow: 0px 2px 5px #2C6A81;
  text-align: center;
}
.liveArea a.liveAreaImg figure
{
  border: 3px solid transparent;
  border-radius: 50%;
}
.liveArea a.liveAreaImg:hover figure,
.liveArea a.liveAreaImg:focus figure
{
  border: 3px solid #EB65A1;
}
.liveArea a.liveAreaImg:hover figure span,
.liveArea a.liveAreaImg:focus figure span
{
  border: 8px solid #fff;
  box-shadow: 0px 0px 0px #000;
}
.liveArea .map a.liveAreaImg_1 {
  top: 220px;
  left: -140px;
}
.liveArea .map a.liveAreaImg_2 {
  top: 220px;
  left: 725px;
}
.liveArea .map a.liveAreaImg_3 {
  top: 437px;
  left: 756px;
}
.liveArea .map a.liveAreaImg_4 {
  top: 70px;
  left: 523px;
}
.liveArea .map a.liveAreaImg_5 {
  top: 462px;
  left: -115px;
}
.liveArea .map a.liveAreaImg_6 {
  top: 46px;
  left: 25px;
}
@media screen and (max-width: 1280px) {
  .liveArea a.liveAreaImg figure span {
    width: 110px;
    height: 110px;
  }
  .liveArea a.liveAreaImg .liveAreaImgTiltle{
    font-size: 0.8em;
  }
  .liveArea .map a.liveAreaImg_1 {
    top: 130px;
    left: -75px;
  }
  .liveArea .map a.liveAreaImg_2 {
    top: 105px;
    left: 335px;
  }
  .liveArea .map a.liveAreaImg_3 {
    top: 210px;
    left: 404px;
  }
  .liveArea .map a.liveAreaImg_4 {
    top: 20px;
    left: 245px;
  }
  .liveArea .map a.liveAreaImg_5 {
    top: 250px;
    left: -100px;
  }
  .liveArea .map a.liveAreaImg_6 {
    top: 20px;
    left: -30px;
}
}
@media screen and (max-width: 768px) {
  .liveArea .map-mobile {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
  }
  .liveArea .map {
    display: none;
  }
  .liveArea a.liveAreaImg {
    position: relative;
    display: inline-block;
    margin: 20px auto;
  }
  .liveArea a.liveAreaImg .liveAreaImgTiltle{
    font-size: 1.5em;
  }
  .liveArea a.liveAreaImg figure span {
    width: 270px;
    height: 270px;
  }
}

.liveAreaInside .h3 {
  color: #eb65a1;
  font-weight: bold;
}

/* 即時影像 youtube iframe區 */
.liveAreaInside .youtube-iframe {
  width: 100%;
  min-height: 720px;
}
@media screen and  (max-width: 768px) {
  .liveAreaInside .youtube-iframe {
    min-height: 420px;
  }
}
@media screen and  (max-width: 480px) {
  .liveAreaInside .youtube-iframe {
    min-height: 220px;
  }
}

/* 即時影像 天氣訊息 大小標題 */
.live-weather {
  margin-top: 22px;
  padding: 0px 32px;
  background: #F1FAFF;
}
@media screen and  (max-width: 480px) {
  .live-weather {
    padding: 0px 20px;
  }
}
.live-weather .h3 {
  font-size: 1.625em;
  font-weight: bold;
  color: #0B7AC1;
  background: url(../images/icon/icon-location.svg) no-repeat left 15px/30px 30px;
  padding: 10px 0 10px 35px;
}
@media screen and  (max-width: 480px) {
  .live-weather .h3 {
    font-size: 1.5em;
  }
}
.live-weather .outer-link {
    padding: 20px 0px;
    text-align: right;
}
.live-weather .outer-link a {
    color: #303030;
    font-size: 0.8em;
    padding: 0 20px 0 0;
    background: url(../images/icon/icon-foreign.svg) no-repeat right bottom;
}
.live-weather .outer-link a:hover, .live-weather .outer-link a:focus {
   color: #eb65a1;
}

/* 即時影像 天氣訊息 內容指標 */
ul.live-weather-info {
  background: white;
  padding: 20px 0px;
  border-radius: 10px;
  display: flex;
}
@media screen and  (max-width: 1024px) {
  ul.live-weather-info {
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media screen and  (max-width: 768px) {
  ul.live-weather-info {
    justify-content: start;
  }
}
.weather-item {
  display: flex;
  order: 0;
  justify-content: center;
  align-items: center;
  margin: 15px 0;
  width: 20%;
}
@media screen and  (max-width: 1024px) {
  .weather-item {
    width: 30%;
  }
}
@media screen and  (max-width: 768px) {
  .weather-item {
    width: 50%;
    justify-content: start;
    padding-left: 12%;
  }
  .weather-item.md-last {
    order: 1;
  }
}
@media screen and  (max-width: 480px) {
  .weather-item {
    width: 100%;
  }
}
/* 氣候圖標 */
.weather-item img {
  width: 60px;
  height: 60px;
  margin-right: 18px;
}
@media screen and  (max-width: 768px) {
  .weather-item img {
    width: 45px;
    height: 45px;
    margin-right: 15px;
  }
}
.weather-indicator h5 {
  font-size: 1em;
}
.weather-indicator span {
  font-size: 1.125em;
}
@media screen and  (max-width: 480px) {
  .weather-indicator h5 , .weather-indicator span {
    font-size: 1.125em;
  }
  /* 取消換行 */
  .weather-indicator br {
    display: none;
  }
}

/* 即時影像內文區 */
.live-intro {
  margin-top: 20px;
  margin-bottom: 30px;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}
.live-intro .content {
  width: 50%;
}
.live-intro .map-iframe {
  width: 50%;
  min-height: 468px;
}

@media screen and  (max-width: 1024px) {
  .live-intro .content {
    width: 100%;
  }
  .live-intro .map-iframe {
    width: 100%;
    min-height: 268px;
  }
  .live-intro {
    display: flex;
    flex-direction: column;
  }
}

.live-intro .content {
  display: flex;
  flex-direction: column;
}
.live-intro .content article {
  width: 100%;
}
.live-intro .content article .h3{
  font-size: 1.5em;
  color: #eb65a1;
}

.live-intro .content a {
  margin-top: auto;
  padding: 10px;
  background: #eb65a1;
  color: white;
  border: 1px solid transparent;
  border-radius: 5px;
  transition: all .5s ease-in-out;
  text-align: center;
}
.live-intro .content a:hover, .live-intro .content a:focus {
  background: white;
  color: #eb65a1;
  border: 1px solid #eb65a1;
}
@media screen and  (max-width: 1024px) {
  .live-intro .content button {
    margin-top: 30px;
  }
}

.btn-wrap {
  text-align: center;
  margin: 25px 0;
  padding-bottom: 25px;
}
a.btn-md {
  display: block;
  /* min-width: 300px;    */
  padding: 10px;
  background: #eb65a1;
  color: white;
  border: 1px solid transparent;
  border-radius: 5px;
  text-align: center;
}
a.btn-md:hover, a.btn-md:focus-visible {
  background: white;
  color: #eb65a1;
  border: 1px solid #eb65a1;
}

@media screen and  (min-width: 768px) {
  a.btn-md {
    min-width: 310px;   
    display: inline-block;
  }
}

.live-video {
  margin-bottom: 30px;
}
.live-video .h3 {
  padding-left: 11px;
}
.live-video .h3::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url(../images/icon/icon-video.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: sub;
  margin-right: 10px;
}
.livebox .videoBlock {
  margin-bottom: 0;
}
ul.rowbox.livebox li .info {
  padding: 15px;
  min-height: 50px;
}
  
/* 永續旅遊 */
.mContent.bannerPage .container, .mContent.bannerPage .wrap {
  padding: 0;
  max-width: inherit;
}
.mContent.bannerPage .breadcumb li.home a {
  background-color: rgba(255, 255, 255, 0);
  background-image: url(../images/icon/icon_home_w.svg);
}
.mContent.bannerPage .breadcumb a {
  background-color: #ffffff;
  padding: 0 10px;
  border-radius: 50px;
  margin-right: 5px;
}
.mContent.bannerPage .breadcumb li::before {
  color: #ffffff;
}
.mContent.bannerPage .wrap article .dataView {
  max-width: 1280px;
  margin: 0 auto;
  margin-bottom: 20px;
}
.bannerPage article {
  width: 100%;
}
/* .bannerPage .textWrapper {
  max-width: 1280px;
  padding: 0 20px;
  margin: 0 auto;
} */

.bannerPage figure.bannerPage-banner {
  position: relative;
  height: 0;
  padding-bottom: 75%;
}
@media screen and (min-width: 1025px) {
  .bannerPage figure.bannerPage-banner {
    padding-bottom: 31.25%;
  }
}

.bannerPage .bannerPage-banner > h1 {
  /* position: relative; */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50% , -50%);
  z-index: 1;
  font-weight: bold;
  font-family: "Noto Sans TC";
  padding-bottom: 0;
  padding-right: 0;
  font-size: 2rem;
  color: #fff;
  white-space: nowrap;
  text-shadow: 3px 3px 5px #00000029;
}
@media screen and (min-width: 821px) {
  .bannerPage .bannerPage-banner > h1 {
    font-size: 3rem;
  }
}
.bannerPage .bannerPage-banner > picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bannerPage .bannerPage-banner > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-link {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  box-shadow: 0px 3px 6px #00000029;
  margin-bottom: 50px;
}
.nav-link a {
  display: block;
  flex: 1;
  text-align: center;
  background-color: #fff;
  color:  #D4357C;
  padding: 22px 5px;
  line-height: 1.5;
  font-size: 1.5rem;
  font-weight: 500;
  font-family: "Noto Sans TC";
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 821px) {
  .nav-link {
    transform: translateY(-50%);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  .nav-link a {
    padding: 10px;
    font-size: 1.25rem;
  }
  .nav-link a span {
    max-width: 4.5em;
    display: block;
    width: fit-content;
    margin: 0 auto;
  }
}
.nav-link a:not(:last-child) {
  border-right: 1px solid #D3D3D3;
}
.nav-link a.current , .nav-link a:hover, .nav-link a:focus-visible {
  background-color: #EB65A1;
  color: #fff;
}

@font-face {
  font-family: "Noto Sans TC";
  font-style: 400;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/noto-sans-tc-400.woff") format("woff")
}

@font-face {
  font-family: "Noto Sans TC";
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/noto-sans-tc-500.woff") format("woff")
}

@font-face {
  font-family: "Noto Sans TC";
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/noto-sans-tc-700.woff") format("woff")
}

/* 永續旅遊上搞 h2 h3 h4 */

.bannerPage-banner + .gstc-article {
  margin-top: 60px;
}

.gstc-article {
  color: #111111;
  font-family: "Noto Sans TC";
}
.gstc-article .text-wrap {
  max-width: 1280px;
  padding: 0 20px;
  margin: 0 auto;
}
.gstc-article h2, .gstc-article .h2 ,
.gstc-article h3, .gstc-article .h3 ,
.gstc-article h4, .gstc-article .h4  {
  font-weight: 500;
  /* font-family: "Noto Sans TC"; */
  line-height: 1.46;
}
.wrap .gstc-article h2, .gstc-article .h2 {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 700px;
  padding: 0 20px;
  color: #D4357C;
  font-size: 1.875rem;
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .wrap .gstc-article h2, .gstc-article .h2 {
    font-size: 2.5rem;
    margin-bottom: 60px;
  }
  .wrap .gstc-article h2::after , .gstc-article h2::before {
    content: '';
    display: inline-block;
    width: 100%;
    font-size: 1.875rem;
    flex: 1;
    height: 1px;
    background-color: #D4357C;
    white-space: nowrap;
    min-width: 60px;
  }
}

.gstc-article h2::after {
  margin-left: 35px;
}
.gstc-article h2::before {
  margin-right: 35px;
}

.gstc-article h3, .gstc-article .h3 {
  color: #186BAD;
  font-size: 2rem;
  margin-bottom: 25px;
  text-align: center;
}

  @media screen and (max-width:768px){
    .gstc-article h3, .gstc-article .h3 {
      font-size: 1.75rem;
    }
}


.gstc-article h4, .gstc-article .h4 {
  color: #D4357C;
  font-size: 1.5rem;
  margin-bottom: 15px;
}
.wrap .gstc-article ul:not(.rowbox), .wrap .gstc-article p {
  font-size: 1.125rem;
  margin-bottom: 30px;
  /* line-height: 1.55; */
  line-height: 1.8;
}
.gstc-article ul:not(.rowbox) li {
  position: relative;
  padding-left: 1.5em;
  line-height: 2;
}
.gstc-article h3 + .subH3, .gstc-article .h3 + .subH3 {
  text-align: center;
}

.gstc-article ul:not(.rowbox) li::before {
  content: '';
  position: absolute;
  left: .75em;
  top: 1em;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #41B5E6;
  /* margin: 0 0.5em 0.125em 0.5em; */
}

.gstc-article figure.shadow-img {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  box-shadow: 15px 15px 0px #A5DCF2;
  /* aspect-ratio: 1/1; */
}
.gstc-article figure.shadow-img img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gstc-article .d-flex {
  margin-bottom: 40px;
}

@media screen and (max-width: 1023px) {
  .gstc-article .d-flex figure {
    width: 80%;
    margin: 0 auto;
  }
  .gstc-article .d-flex figure.shadow-img {
    padding-bottom: 80%;
  }
}
@media screen and (min-width: 1024px) {
  .gstc-article .d-flex  {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
  }
  .gstc-article .d-flex.d-reverse  {
    flex-direction: row-reverse;
  }
  .gstc-article .d-flex.d-reverse .left {
    margin-right: 0px;
    margin-left: 30px;
  }
  .gstc-article .d-flex .left {
    flex: 0 0 calc(50% - 15px);
    margin-right: 30px;
  }
  .gstc-article .d-flex .right {
    flex: 0 0 calc(50% - 15px);
  }
  .gstc-article .d-flex.text-more.d-reverse .left {
    margin-right: 0px;
    margin-left: 60px;
  }
  .gstc-article .d-flex.text-more .left {
    flex: 0 0 65%;
    margin-right: 60px;
  }
  .gstc-article .d-flex.text-more .right {
    /* flex: 0 0 33%; */
    flex: 1;
  }
}

.gstc-article .btn {
  background-color: #EB65A1;
  color: #fff;
  border-radius: 5px;
  font-size: 1.25rem;
  padding: 10px 30px;
  display: block;
  margin-bottom: 20px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .gstc-article .btn {
    padding: 10px 80px;
    width: fit-content;
  }
}
.gstc-article .rowbox a {
  display: block;
  color: #111111;
}
.gstc-article .rowbox a:hover, .gstc-article .rowbox a:focus-visible {
  color: #EB65A1;
}
.gstc-article .rowbox a figure {
  width: 100%;
  position: relative;
  height: 0;
  padding-bottom: 75%;
}
.gstc-article .rowbox a figure img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gstc-article .rowbox a .info {
  padding: 10px 15px;
  min-height: unset;
  line-height: 1.4;
  font-size: 1.25rem;
}
.gstc-article .rowbox a .info::before {
  display: none;
}
.gstc-article .bg-blue {
  background-color: #E2F6FE;
  border-radius: 10px;
  padding: 25px;
  margin-bottom: 50px;
}
@media screen and (min-width: 768px) {
  .gstc-article .bg-blue{
    padding: 50px;
  }
}

.gstc-article .bg-attachment {
  /* min-height: 480px; */
  background-image: url('../images/eTravel/img1-2-m.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 45px 20px;
  margin-bottom: 60px;
    /* background-attachment: fixed; */
  @supports(background-attachment: fixed) {
      background-attachment: fixed;   
  }
}
@media screen and (min-width: 768px) {
  .gstc-article .bg-attachment {
    background-image: url('../images/eTravel/img1-2.jpg');
  }
}

.gstc-article .bg-attachment .slogan {
  width: fit-content;
  margin: auto auto;
  padding: 30px 30px;
  background-color: rgba(255, 255, 255, 0.7);
  text-align: center;
}
@media screen and (min-width: 768px) {
  .gstc-article .bg-attachment .slogan {
    padding: 30px 120px;
  }
}
.bg-attachment .slogan .slogan-title {
  font-size: 1.625rem;
  line-height: 1.4;
  font-weight: 500;
  margin-bottom: 15px;
}
@media screen and (min-width: 768px) {
  .bg-attachment .slogan .slogan-title {
    font-size: 1.875rem;
  }
}
.bg-attachment .slogan .slogan-subtitle {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 400;
  margin-bottom: 15px;
}
@media screen and (min-width: 768px) {
  .bg-attachment .slogan .slogan-subtitle {
    font-size: 1.5rem;
  }
}
.bg-attachment .slogan .slogan-content {
  font-size: 1.125rem;
  font-weight: 400;
  position: relative;
}
@media screen and (min-width: 768px) {
  .bg-attachment .slogan .slogan-subtitle {
    font-size: 1.25rem;
  }
}
.bg-attachment .slogan .slogan-content::before, .bg-attachment .slogan .slogan-content::after {
  font-size: 2.5rem;
  position: absolute;
  
}
.bg-attachment .slogan .slogan-content::before {
  content: "“";
  bottom: 45%;
  right: 100%;
}

.bg-attachment .slogan .slogan-content::after {
  content: "”";
  top: 75%;
  left: 100%;
}

/* 散步地圖 */

.pic-album > ul > li:not(:first-child) {
  display: none;
}

.pic-album > ul.album-list > li {
  padding-left: 0;
  list-style: none;
}

.pic-album > ul.album-list > li::before {
  display: none;
}

.pic-album > ul.album-list > li a {
  display: block;
  position: relative;
}

.pic-album > ul.album-list > li a::after {
  content: '';
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #00000080;
  background-image: url('../images/icon/nav-search.svg');
  background-position: center;
  background-size: 50%;
  background-repeat: no-repeat;
  display: block;
  z-index: 1;
}

.pic-album img {
  width: 100%;
  margin-bottom: 0;
  display: block;
}



@media screen and (min-width: 1025px) {
  .exhibit-around .exhibit:nth-child(even){
    flex-direction: row-reverse;
  }

  .exhibit {
    display: flex;
  }
  .exhibit .exhibit-image {
    width: 50%;
  }
  .exhibit .exhibit-content {
    padding: 50px;
    width: 50%;
    display: flex;
    flex-direction: column;
  }

  .exhibit .exhibit-content .exhibit-text {

    flex-grow: 1;
    height: 0;

    overflow: auto;
  }

  .exhibit .exhibit-content .exhibit-text .simplebar-track.simplebar-vertical {
    width: 4px;
    background-color: #dcdcdc;
  }

  .exhibit .exhibit-content  .simplebar-content {
    padding-right: 10px !important;
  }
  .exhibit .exhibit-content .exhibit-text .simplebar-scrollbar::before {
    background-color: #0b7ac1;
    left: 0;
    right: 0;
  }

}

.exhibit {
  margin-bottom: 45px;
}

.exhibit .exhibit-image .pic-album ul.album-list {
  margin-bottom: 0;
  margin-top: 0;
}

.exhibit .exhibit-content {
  padding: 20px;
  box-sizing: border-box;
  background-color: #F5F5F5;
}
@media screen and (min-width: 1025px) {
  .exhibit .exhibit-content {
    /* padding: 50px; */
    padding: 50px 50px 40px 50px;
  }
}
/* .exhibit .exhibit-content .link {
  display: inline-block;
  background-color: #D4357C;
  color: #fff;
  border-radius: 5px;
  padding: 12px 35px;
  font-size: 1.125rem;
  line-height: 1.68;
  text-align: center;
  width: fit-content;
  margin-top: auto;
  margin-left: auto;
} */
.exhibit .exhibit-footer {
  margin-top: auto;
  display: flex;
}
.exhibit .exhibit-footer .link {
  display: inline-block;
  background-color: #D4357C;
  color: #fff;
  border-radius: 5px;
  padding: 12px 35px;
  font-size: 1.125rem;
  line-height: 1.68;
  text-align: center;
  width: fit-content;
  margin-top: 20px;
  margin-left: auto;
}
@media screen and (max-width: 1025px) {
  .exhibit .exhibit-content .link {
    display: inline-block;
  }
}

.exhibit .exhibit-content p {
  line-height: 1.8;
}

.exhibit-title {
  display: flex;
  align-items: flex-start;
  font-size: 1.5rem;
  font-weight: 500;
  color: #186BAD;
  margin-bottom: 20px;
}

.exhibit-title span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  line-height: 36px;
  color: #ffffff;
  background-color: #186BAD;
  text-align: center;
  font-family: 'Roboto';
  font-size: 1.25rem;
  margin-right: .5em;
  flex: 0 0 36px;
}

.exhibit-subtitle {
  font-size: 1.25rem;
  padding-left: .5em;
  margin-bottom: 20px;
  line-height: 1.4;
  position: relative;
}
.exhibit-subtitle::before {
  content: '';
  width: 2px;
  height: calc(1em * 1.4);
  background-color: #3BAAEF;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
}

.exhibit .exhibit-content .exhibit-text p{
 margin-top: 0;
 margin-bottom: .5em;
} 


/* 問卷調查 */
.footable.footable_quiz tr, .footable.footable_quiz td {
  border: none ;
  /* font-size: 18px; */
  font-size: 1.125rem;
  /* font-family: "Noto Sans TC"; */
}
.footable.footable_quiz th {
  background-color: #EA78AB33;
  border-width: 1px 0;
  border-color: #EB65A1;
  border-style: solid;
}

@media screen and (min-width: 600px) {
  .footable.footable_quiz tr:nth-child(even) {
    background-color: #EEEEEEA6;
  }
}

@media screen and (max-width: 600px) {
  .footable.footable_quiz tr {
    border-bottom: 1px solid #EEEEEE99;
  }
}
.footable.footable_quiz .footable-row-detail-cell {
  padding: 0;
}

.footable.footable_quiz .footable-row-detail-inner {
  width: 100%;
}
.footable.footable_quiz .footable-row-detail-name {
  background-color: #EA78AB33;
}
.footable.footable_quiz .footable-row-detail-name, .footable.footable_quiz .footable-row-detail-value {
  padding: 18px;
}
.footable.footable_quiz .footable-row-detail-row:nth-child(even) .footable-row-detail-value {
  background-color: #EEEEEEA6;
}
.footable.footable_quiz .footable-row-detail-row:nth-child(odd) .footable-row-detail-value {
  background-color: #E2E2E21F;
}
.quiz-title {
  font-size: 1.375rem;
  color: #D4367C;
  font-weight: bold;
  margin-bottom: 15px;
}
.quiz-title + hr {
  background-color: #111111;
  opacity: .2;
  margin: 15px 0;
}
.footable_quiz .quiz-btn {
  background-color: #D4367C;
  font-size: 1.125rem;
  border-radius: 18px;
  line-height: 27px;
  padding: 4px 18px ;
  margin: 3px 5px;
  color: #fff;
  display: inline-block;
}
.footable_quiz .quiz-btn:hover, .footable_quiz .quiz-btn:focus-visible {
  background-color: #f34d97;
}

.progress {
  margin-bottom: 20px;
}
.progress + hr {
  background-color: #111111;
  margin: 15px 0;
  opacity: .2;
}
.progress .progress-text {
  margin-bottom: 12px;
  font-size: 1.25rem;
  font-family: "Noto Sans TC";
  font-weight: 300;
}
.progress .progress-bar {
  background-color: #ECECEC;
  height: 20px;
  position: relative;
}
.progress .progress-value {
  position: absolute;
  top: 0;
  left: 0;
  width: 66%;
  height: 20px;
  background-color: #EB65A1;
}

span.lg-close.lg-icon:focus {
  outline: 3px solid #fff;
}

.videoLG.lg-hide-items .lg-toolbar {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* 北觀二日遊 新增旅宿推薦 */
.hotel-command-title {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  margin-bottom: 15px;
}
.hotel-command-title::before {
  content: '';
  display: inline-block;
  width: 33px;
  height: 25px;
  background-image: url(../images/icon/theme-crown-coast.svg);
  background-position: center;
  background-size: contain;
  margin-right: .5em;
}
.hotel-command + a.outer-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.125rem;
  /* width: 33%; */
  width: calc((100% - 40px) / 3);
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 5px;
  background-color: #fff;
  border: 1px solid #EB3F83;
  border-radius: 5px;
  color: #EB3F83;
}
.hotel-command + a.outer-link:hover, .hotel-command + a.outer-link:focus {
  background-color: #EB3F83;
  color: #fff;
}
.hotel-command + a.outer-link:hover::after, .hotel-command + a.outer-link:focus::after {
  background-image: url(../images/icon/new-window.svg);
}

.hotel-command + a.outer-link::after {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url(../images/icon/out_p.svg);
  background-position: center;
  background-size: contain;
  margin-left: .5em;
}

@media screen and (max-width: 1024px) {
  .hotel-command + a.outer-link {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  .hotel-command + a.outer-link {
    width: 100%;
  }
}

.hotel-command-item figure {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 66%;
}
.hotel-command-item figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hotel-command-item-content {
  border: 1px solid #A7DAEE;
  padding: 15px 10px;
  text-decoration: none;
  color: #0C6CB7;
}
.hotel-command-item-locate {
  font-size: 1.125rem;
  font-weight: 500;
}
.hotel-command-item-name {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
}
a.hotel-command-item:hover .hotel-command-item-locate, 
a.hotel-command-item:hover .hotel-command-item-name, 
a.hotel-command-item:hover .hotel-command-item-locate, 
a.hotel-command-item:hover .hotel-command-item-name {
  color: #EB3F83;
}
.hotel-command {
  display: flex;
  flex-wrap: wrap;
}
.hotel-command-item {
  display: inline-block;
  width: 100%;
  margin-bottom: 20px;
}

@media screen and (min-width:1025px) {
  .hotel-command-item {
    width: calc((100% - 40px) / 3);
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .hotel-command-item:nth-child(3n+3) {
    margin-right: 0;
  }
}
@media screen and (min-width:569px) and (max-width: 1024px) {
  .hotel-command-item {
    width: calc((100% - 20px) / 2);
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .hotel-command-item:nth-child(even) {
    margin-right: 0;
  }
}

@media screen and (max-width:568px){
  .hotel-command {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    margin-bottom: 20px;
  }
  .hotel-command-item {
    width: 66%;
    flex: 0 0 66%;
  }
  .hotel-command-item:not(:last-child) {
    margin-right: 20px;
  }
}
.festivalList ul li:not(:last-child) ul li.festivalInfo:last-child {
  margin-bottom: 30px;
}

/* 語音專區 */
.bg-blue {
  margin: 15px 0;
  background-color: #E3F3FF;
  border-radius: 30px;
  padding: 40px 50px;
}
@media screen and (max-width: 1024px) {
  .bg-blue {
    padding: 30px 25px;
  }
}

.audio-item {

}

.audio-item:not(:last-child) {
  margin-bottom: 30px;
}

.audio-item .title {
  font-size: 1.25rem;
  font-weight: 500;
  font-family: 'Noto Sans TC';
  margin-bottom: 15px;
}

.audio-item .audio-panel {

}

@media screen and (min-width: 1025px) {
  .audio-item .audio-panel {
    display: flex;
    align-items: center;
  }
}

.audio-item audio {
  height: 40px;
  width: 100%;
}
.audio-item .audio-text-btn {
  white-space: nowrap;
  margin-left: 15px;
  font-size: 1.125rem;
  background-color: #A5DCF2;
  padding: 8px 20px;
  border-radius: 40px;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 1024px) {
  .audio-item .audio-text-btn {
    margin-top: 8px;
    margin-left: 0px;
    width: fit-content;
  }
}

.audio-item .audio-text-btn::after {
  content: '';
  display: block;
  margin-left: 8px;
  width: 10px;
  height: 10px;
  background-image: url('../images/icon/down-arrow.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.audio-item .audio-text-btn.open::after {
  transform: rotate(180deg);
}

.audio-item .audio-text {
  display: none;
  height: 100px;
  overflow-y: auto;
  margin-top: 10px;
  padding-right: 10px;
}

.audio-item .audio-text .simplebar-track.simplebar-vertical {
  width: 4px;
  background-color: #dcdcdc;
}
.audio-item .audio-text .simplebar-scrollbar::before {
  background-color: #0b7ac1;
  left: 0;
  right: 0;
}

.audio-item audio::-webkit-media-controls-panel {
  background-color: #fff;
}

audio::-webkit-media-controls-timeline {
  border: #3baaef;
}

/* 社群新訊 */
.navbtn-row {
  margin-top: 40px;
}
@media screen and (min-width: 1025px) {
  .navbtn-row {
    margin-top: 100px;
  }
}
.socialCard-container {
  display: flex;
  flex-wrap: wrap;
}

.socialCard-container .socialCard-item {
  margin-bottom: 20px;
  width: 100%;
}

.socialCard-container a.socialCard {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow .3s;
}
a.socialCard:hover,  a.socialCard:focus-visible {
  box-shadow: 0 0 11px #21212133;
}
a.socialCard:hover .card-text,  a.socialCard:focus-visible .card-text {
  color: #ec6aa4;
}
a.socialCard .card-image {
  overflow: hidden;
}
a.socialCard .card-image img {
  transition: transform .5s ease;
}
a.socialCard:hover .card-image img,  a.socialCard:focus-visible .card-image img {
  transform: scale(1.05);
}

.socialCard-container a.socialCard.hide {
  display: none;
}

.socialCard-container .socialCard .card-date {
  font-size: .875em;
  font-weight: 600;
  color: #EB3F83;
}

.socialCard-container .socialCard .card-body {
  padding: 20px;
  flex-grow: 1;
  display: block;
  background-color: #fff;
  border: 1px #3BAAEF solid;
  border-top: none;
}

.socialCard-container .socialCard .card-text {
  margin-top: 0;
  font-size: 1em;
  display: block;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 30px;
  color: #676767;
}

@media screen and (min-width: 1025px) {
  .socialCard-container .socialCard-item {
      margin-right: 20px;
      width: calc((100% - 40px) / 3);
  }
  .socialCard-container .socialCard-item:nth-child(3n+3) {
      margin-right: 0;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .socialCard-container .socialCard-item {
      margin-right: 20px;
      width: calc((100% - 20px) / 2);
  }
  .socialCard-container .socialCard-item:nth-child(2n+2) {
      margin-right: 0;
  }
}

.countText {
  color: #676767;
  font-size: 1.125rem;
  margin: 10px 0 20px;
}

.text-right {
  text-align: right;
}

.socialCard-btn {
  color: white;
  padding: 13px 18px;
  font-size: 1.125rem;
  background-color: #2881DB;
  border-radius: 5px;
  display: flex;
  align-items: center;
  width: fit-content;
  margin-left: auto;
}
.socialCard-btn::before {
  content: '';
  display: block;
  width: 10px;
  height: 20px;
  margin-right: 8px;
  /* background-color: white; */
  background-image: url('../images/icon/facebook_w__social_btn.svg');
}
.socialCard-btn:hover {
  color: white;
}

.SocialLightbox.featuresLightbox {
  border-radius: 0;
}
@media screen and (min-width: 901px) {
  .SocialLightbox.featuresLightbox {
      max-height: 700px;
  }
}

@media screen and (max-width: 900px) {
  .SocialLightbox.featuresLightbox .mfp-close{
    right: unset;
    left: 20px;
  }
}

.SocialLightbox.featuresLightbox .featuresLightbox-content {
  max-height: 600px;
  height: 600px;
}

@media screen and (max-height: 900px) and (min-width: 1025px) {
  .SocialLightbox.featuresLightbox .featuresLightbox-content {
      max-height: 600px;
  }
}
@media screen and (min-width: 901px) {
  .SocialLightbox.featuresLightbox .featuresLightbox-content {
      max-height: 600px;
      height: 600px;
  }
  .socialLightbox-wrapper {
    display: flex;
  }
}

.SocialLightbox.featuresLightbox .featuresLightbox-wrapper {
  padding: 0;
}

.socialLightbox-img {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #676767;
  max-height: 600px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  position: relative;
}

.socialLightbox-img-wrap {
  position: relative;
  display: flex
;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 100%;
  height: 100%;
}
.socialLightbox-img-wrap>img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.socialLightboxContent .socialLightboxContent-header {
  padding: 18px 20px 0;
  padding-right: 64px;
  text-align: justify;
}
.socialLightboxContent .socialLightboxContent-header .date {
  font-weight: bold;
  color: #EB3F83;
  font-size: 1rem;
  line-height: 1.4;
}
.socialLightbox-img .socialLightbox-img-zoomin, .socialLightbox-img .socialLightbox-img-zoomout {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: #000;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-image: url(../images/icon/icon-zoom-out.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;
  font-size: 0;
  opacity: .5;
}
.socialLightbox-img .socialLightbox-img-zoomin:hover, .socialLightbox-img .socialLightbox-img-zoomout:hover,
.socialLightbox-img .socialLightbox-img-zoomin:focus-visible, .socialLightbox-img .socialLightbox-img-zoomout:focus-visible {
  opacity: 1;
}
.socialLightbox-img .socialLightbox-img-zoomin.unactive, .socialLightbox-img .socialLightbox-img-zoomout.unactive {
  cursor: not-allowed;
  pointer-events: none;
  opacity: .2;
}
.socialLightbox-img .socialLightbox-img-zoomin {
  right: 60px;
  background-image: url(../images/icon/icon-zoom-in.svg);
}

.socialLightboxContent-header .socialCard-btn {
  margin-left: 0;
  display: flex;
  color: white;
  font-size: 1rem;
  padding: 8px 15px;
  margin-top: 10px;
  height: 40px;
}
.socialLightboxContent .socialLightboxContent-body {
  /* height: 500px; */
  height: 450px;
  padding: 10px 15px 15px 20px;
  overflow: hidden;
}
.socialLightboxContent-text {
  font-size: 1rem;
  line-height: 1.4;
}
.socialLightboxContent .socialLightboxContent-footer {
  position: relative;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.socialLightboxContent .socialLightboxContent-footer::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #e4e4e4;
  position: absolute;
  top: 0;
  left: 0;
}

.socialLightbox-wrapper .prevBtn, .socialLightbox-wrapper .nextBtn {
  position: absolute;
  top: 25%;
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
  font-size: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;
  transform: translate(0, -50%);
  opacity: .6;
}

.socialLightbox-wrapper .nextBtn {
  right: 10px;
  background-image: url(../images/icon/icon-right-gray.svg);
}
.socialLightbox-wrapper .prevBtn {
  left: 10px;
  background-image: url(../images/icon/icon-left-gray.svg);
}
.socialLightbox-wrapper .nextBtn:hover, .socialLightbox-wrapper .nextBtn:focus-visible {
  background-color: #009ddc;
  background-image: url(../images/icon/icon-right-white.svg);
}
.socialLightbox-wrapper .prevBtn:hover, .socialLightbox-wrapper .prevBtn:focus-visible {
  background-color: #009ddc;
  background-image: url(../images/icon/icon-left-white.svg);
}

@media screen and (min-width: 901px) {
  .socialLightbox-wrapper .prevBtn, .socialLightbox-wrapper .nextBtn {
      top: 50%;
      opacity: 1;
  }
  .socialLightbox-wrapper .prevBtn {
    transform: translate(-100%, -50%);
    left: -25px;
  }
  .socialLightbox-wrapper .nextBtn {
    transform: translate(100%, -50%);
    right: -25px;
  }
}


@media screen and (max-width: 900px) {
  .SocialLightbox.featuresLightbox {
    width: 100%;
    height: 100%;
    max-height: none;
    max-width: none;
    min-width: none;
  }
  .SocialLightbox.featuresLightbox .featuresLightbox-content {
    height: 100%;
    margin: 0;
    max-height: none;
  }
  .SocialLightbox.featuresLightbox .featuresLightbox-wrapper {
    height: 100%;
  }
  .socialModal.mfp-container {
    padding: 0;
  }
  .socialModal.mfp-container .mfp-content {
      height: 100%;
  }
  .socialLightbox-wrapper {
      height: 100%;
  }
  .socialLightbox-img {
      height: 50%;
  }
  .socialLightboxContent {
    height: 50%;
  }
  .socialLightboxContent .socialLightboxContent-body {
      /* height: calc(100% - 60px - 1px - 41px); */
      /* padding-top: 20px; */
      height: calc(100% - 60px - 1px - 60px);
      padding-top: 15px;
  }

  .socialLightboxContent .socialLightboxContent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 30px;
  }

  .socialLightboxContent-header .socialCard-btn {
    margin-top: 0;
  }
}

.socialLink-list {
  flex: 1;
  margin-left: .5em;
  display: flex;
  align-items: center;
  z-index: 2;
}
.socialLink-list>a {
  width: 40px;
  height: 40px;
  font-size: 0;
  border: 1px solid #bebebe;
  border-radius: 50%;
  display: inline-block;
  background-position: center;
  background-size: 50%;
  background-repeat: no-repeat;
}
.socialLink-list>a:not(:last-child) {
  margin-right: 10px;
}

.socialLink-list>a.facebook {
  background-image: url("../images/icon/share-fb.svg")
}

.socialLink-list>a.facebook:hover,.socialLink-list>a.facebook:focus-visible {
  background-color: #2881db;
  background-image: url("../images/icon/share-fb-white.svg")
}

.socialLink-list>a.line {
  background-image: url("../images/icon/share-line.svg")
}

.socialLink-list>a.line:hover,.socialLink-list>a.line:focus-visible {
  background-color: #2cbe13;
  background-image: url("../images/icon/share-line-white.svg")
}

.socialLink-list>a.twitter {
  background-image: url("../images/icon/share-twitter.svg")
}

.socialLink-list>a.twitter:hover,.socialLink-list>a.twitter:focus-visible {
  background-color: #000;
  background-image: url("../images/icon/share-twitter-white.svg")
}

.socialLink-list>a.plurk {
  background-image: url("../images/icon/share-plurk.svg")
}

.socialLink-list>a.plurk:hover,.socialLink-list>a.plurk:focus-visible {
  background-color: #e57c3e;
  background-image: url("../images/icon/share-plurk-white.svg")
}

.socialLink-list>a.copy {
  background-image: url("../images/icon/share-copy.svg");
  position: relative
}

.socialLink-list>a.copy:hover,.socialLink-list>a.copy:focus-visible {
  background-color: #676767;
  background-image: url("../images/icon/share-copy-white.svg")
}

.socialLink-list>a.copy .copied {
  cursor: auto;
  font-size: 1rem;
  position: absolute;
  bottom: 118%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #0c6cb7;
  padding: 5px 8px;
  border-radius: 3px;
  color: #fff;
  line-height: 1.4;
  display: none
}

.socialLink-list>a.copy .copied::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #0c6cb7 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);
  border-width: 3px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%)
}

@media screen and (min-width: 901px) {
  .socialLightbox-img {
      min-width: calc(100% - 350px);
  }
  .socialLightboxContent {
    min-width: 350px;
    max-width: 350px;
    border-left: 1px solid #e4e4e4;
    display: flex
;
    flex-direction: column;
    justify-content: space-between;
}
}

/* 內文上稿頁語言連結 */
article.news .textArea .lang-switch ul{
  padding-left: 0;
  gap: 12px;
  display: flex;
  flex-wrap: wrap;
}
.lang-switch li {
  flex-shrink: 0;
}
.lang-switch li a {
  display: inline-flex;
  align-items: center;
  background-color: #ec6aa4;
  padding: 8px 12px;
  gap: 4px;
  border-radius: 10px;
  min-width: 200px;
}

.lang-switch li a:hover{
  background-color: #D4357C;
}

.lang-switch li a::before{
  content: "";
  background-image: url(../images/icon/earth.svg);
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
}

.lang-switch li a strong{
  color: #fff;
}

@media screen and (max-width: 768px) {
  article.news .textArea .lang-switch ul{
    gap: 4px;
  }
  .lang-switch li a {
    min-width: 148px;
    font-size: 14px;
  }
  .lang-switch li a::before{
    display: none;
  }
}

#en, #ja, #ko, #in, #th, #fil, #vi{
  scroll-margin-top: 25vh;
}