@charset "UTF-8";
/* CSS Document */
@import url(public/css/reset.css);
@import url(public/css/font-awesome-4.7.0/font-awesome.min.css);
@import url(public/css/rwdgrid.css);
@import url(public/css/textEditor.css);
@import url(public/css/contentbuilder.css);
.mClassLink > ul, .mClassLink .main {
  box-sizing: border-box;
}

.dotsBox.circle ul.dots li button::before, ul.dots li button, .arrowTxtPrev::after,
.arrowTxtNext::after, .arrowTxtPrev::before,
.arrowTxtNext::before, .arrowTxtPrev,
.arrowTxtNext, .url360Btn svg,
.albumBtn svg, .side_share svg, .headerDrop .subItem, .headerDrop .topBox::after, header .menuBtn span::before, header .menuBtn span::after, header .menuBtn span {
  transition: all 0.5s;
}

*, *::before, *::after {
  box-sizing: border-box;
}
*:focus {
  outline: none;
}

address {
  font-style: normal;
}

body {
  letter-spacing: 0.02em;
  background-image: url("../images/bg1.jpg");
  word-wrap: break-word;
  word-break: break-word;
  color: #000;
  font-family: "Noto Sans TC", Arial, "微軟正黑體", Helvetica, Heiti TC, "メイリオ", sans-serif;
  font-size: 14px;
}

/*css3*/
a {
  color: #000;
  cursor: pointer;
  transition: all 0.4s ease;
}
a:hover {
  color: #fe5000;
}

[class*=col-] {
  float: left;
}

div.titan {
  /*--隱藏開影音、開相簿--*/
  display: none;
}

.col-1 {
  width: 100%;
}

.col-2 {
  width: 50%;
}

.col-3 {
  width: 33.33%;
}

.col-4 {
  width: 25%;
}

.col-5 {
  width: 20%;
}

input[type=text],
textarea {
  -webkit-appearance: none;
}

img {
  max-width: 100%;
}

.outerWrap {
  position: relative;
  overflow: hidden;
  opacity: 0;
  transition: all 0.8s ease-in-out;
}
.outerWrap.show {
  opacity: 1;
}

.wrap {
  width: 100%;
  max-width: 1400px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
}

#gmap {
  display: none;
  height: 400px;
}

.label {
  padding: 5px 7px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.8);
}

.flex {
  display: flex;
}
.flex_wrap {
  flex-wrap: wrap;
}
.flex_jcfs {
  justify-content: flex-start;
}
.flex_jcc {
  justify-content: center;
}
.flex_jcfe {
  justify-content: flex-end;
}
.flex_mla {
  margin-left: auto;
}

.cubeBox {
  position: relative;
}
.cubeBox::before, .cubeBox::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 105px;
  height: 105px;
  pointer-events: none;
}
.cubeBox::before {
  background-color: #d3d3d3;
}
.cubeBox::after {
  background-color: #fe5000;
}
.cubeBox.noOrange::after {
  display: none;
}

.btn a {
  display: inline-block;
  width: 100%;
  max-width: 200px;
  height: 40px;
  line-height: 40px;
  margin: 10px 5px 0;
  font-size: 14px;
  font-family: "Cardo", "Noto Sans TC", "微軟正黑體", Helvetica, Heiti TC, "メイリオ", sans-serif;
  font-weight: 300;
  color: #626262;
  letter-spacing: 0.8px;
  text-align: center;
  background-color: #eee;
}
.btn a:hover {
  color: #fff;
  background-color: #fe5000;
}
.btn.back {
  margin-top: 50px;
  text-align: center;
}
.btn.back a {
  height: 50px;
  line-height: 50px;
}
.btn.center {
  text-align: center;
}

a.btn_color1,
.btn a.btn_color1 {
  color: #fff;
  background-color: #fe5000;
}
a.btn_color1:hover,
.btn a.btn_color1:hover {
  color: #e0dace;
  background-color: #272727;
}

a.btn_color2,
.btn a.btn_color2 {
  color: #888;
  background-color: #fff;
}
a.btn_color2:hover,
.btn a.btn_color2:hover {
  color: #fff;
  background-color: #fe5000;
}

a.btn_color3,
.btn a.btn_color3 {
  color: #888;
  background-color: #fff;
}
a.btn_color3:hover,
.btn a.btn_color3:hover {
  color: #e0dace;
  background-color: #272727;
}

a.btn_color4:hover,
.btn a.btn_color4:hover {
  color: #e0dace;
  background-color: #272727;
}

a.btn_color5,
.btn a.btn_color5 {
  color: #fff;
  background-color: #464646;
}
a.btn_color5:hover,
.btn a.btn_color5:hover {
  color: #e0dace;
  background-color: #272727;
}

@media (min-width: 1181px) {
  .mobileShow {
    display: none !important;
  }
}

::selection {
  background-color: #eae6de;
}

/*-moduleBox--*/
.moduleBox {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-left: 20px;
  padding-right: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-property: top, opacity, visibility;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}
.moduleBox.show {
  opacity: 1;
  visibility: visible;
}
.moduleBox.show .mobuleWrap {
  opacity: 1;
  transform: translateY(0);
}

.mobuleWrap {
  position: relative;
  width: 100%;
  max-width: 960px;
  background-color: #fff;
  pointer-events: auto;
  padding-top: 50px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.5s;
}

.moduleContent {
  width: 100%;
  max-height: calc(90vh - 50px);
  overflow-y: auto;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
}

.moduleMask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 995;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.5s ease-in-out;
}
.moduleMask.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.moduleCloseStyle {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 50px;
  background: none;
  background-color: #fe5000;
  border: none;
  cursor: pointer;
}
.moduleCloseStyle::before, .moduleCloseStyle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -15px;
  margin-top: -0.5px;
  width: 30px;
  height: 1px;
  background-color: #fff;
}
.moduleCloseStyle::before {
  transform: rotate(45deg);
}
.moduleCloseStyle::after {
  transform: rotate(-45deg);
}

/*****網頁頭*****/
header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 50;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  background-color: #fff;
}
header .wrap {
  display: flex;
  align-items: center;
  max-width: 100%;
  padding: 0;
}
@media (max-width: 1180px) {
  header .wrap {
    height: 60px;
  }
}
header .logo {
  width: 110px;
  height: 52px;
  margin-left: 60px;
}
@media (max-width: 1740px) {
  header .logo {
    margin-left: 20px;
  }
}
@media (max-width: 640px) {
  header .logo {
    width: 70px;
    height: 33px;
  }
}
header .logo a {
  display: block;
}
header .logo img {
  display: block;
  width: 100%;
}
header .rightBox {
  display: flex;
  margin-left: auto;
  height: 100%;
}
header .bookingBtn {
  display: flex;
  align-items: center;
  color: #fff;
  font-family: "Roboto", "Noto Sans TC", sans-serif;
  text-transform: uppercase;
  padding-left: 50px;
  padding-right: 50px;
  font-size: 14px;
  letter-spacing: 0.05em;
  background-color: #272727;
}
@media (max-width: 1740px) {
  header .bookingBtn {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 1366px) {
  header .bookingBtn {
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (max-width: 480px) {
  header .bookingBtn {
    font-size: 12px;
    padding-left: 8px;
    padding-right: 8px;
  }
}
header .headerLink {
  display: flex;
  align-items: center;
  padding-left: 35px;
  padding-right: 35px;
  border-left: 1px solid #e5e5e5;
  font-size: 16px;
  letter-spacing: 0.06em;
}
@media (max-width: 1740px) {
  header .headerLink {
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (max-width: 1366px) {
  header .headerLink {
    font-size: 14px;
  }
}
header .languageBox .subItem a.current {
  color: #af8442;
}
header .menuBtn {
  position: relative;
  width: 140px;
  background-color: #fe5000;
}
@media (max-width: 1366px) {
  header .menuBtn {
    width: 100px;
  }
}
@media (max-width: 1180px) {
  header .menuBtn {
    width: 60px;
  }
}
header .menuBtn span {
  position: absolute;
  left: 50%;
  margin-left: -27.5px;
  top: 50%;
  margin-top: -1px;
  width: 55px;
  height: 2px;
  text-indent: -9999px;
  background-color: #fff;
}
@media (max-width: 1180px) {
  header .menuBtn span {
    width: 30px;
    margin-left: -15px;
  }
}
header .menuBtn span::before, header .menuBtn span::after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -27.5px;
  width: 55px;
  height: 2px;
  background-color: #fff;
}
@media (max-width: 1180px) {
  header .menuBtn span::before, header .menuBtn span::after {
    width: 30px;
    margin-left: -15px;
  }
}
header .menuBtn span::before {
  top: -8px;
}
header .menuBtn span::after {
  top: 8px;
}
header .menuBtn.open span {
  background-color: transparent;
}
header .menuBtn.open span::before {
  top: 0;
  transform: rotate(45deg);
  transition: all 0.3s ease, transform 0.25s 0.3s ease-out;
}
header .menuBtn.open span::after {
  top: 0;
  transform: rotate(-45deg);
  transition: all 0.3s ease, transform 0.25s 0.3s ease-out;
}
@media (max-width: 1180px) {
  header .menuBox,
header .headerLink,
header .storeBox {
    display: none;
  }
}
@media (min-width: 376px) {
  header .storeBox {
    width: 120px;
  }
}
@media (max-width: 375px) {
  header .storeBox {
    padding-left: 8px;
    padding-right: 8px;
  }
}
@media (max-width: 375px) {
  header .storeBox .topBox .title.tw {
    font-size: 12px;
  }
}

.headerDrop {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  border-left: 1px solid #e5e5e5;
}
@media (max-width: 1740px) {
  .headerDrop {
    width: 120px;
  }
}
@media (max-width: 1280px) {
  .headerDrop {
    width: auto;
    padding-left: 12px;
    padding-right: 12px;
  }
}
.headerDrop .topBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.headerDrop .topBox .icon {
  width: 20px;
  margin-right: 10px;
}
.headerDrop .topBox .icon img {
  display: block;
  width: 100%;
}
.headerDrop .topBox .title.tw {
  font-size: 16px;
  letter-spacing: 0.06em;
}
@media (max-width: 1366px) {
  .headerDrop .topBox .title.tw {
    font-size: 14px;
  }
}
.headerDrop .topBox .title.en {
  font-family: "Epilogue", "Noto Sans TC", sans-serif;
  font-weight: 600;
}
@media (max-width: 1366px) {
  .headerDrop .topBox .title.en {
    font-size: 13px;
  }
}
.headerDrop .topBox::after {
  content: "";
  position: relative;
  top: -3px;
  display: inline-block;
  margin-left: 10px;
  width: 8px;
  height: 8px;
  border-bottom: 1px solid #808080;
  border-right: 1px solid #808080;
  transform: rotate(45deg);
}
.headerDrop.open .topBox::after {
  top: 2px;
  transform: rotate(225deg);
}
.headerDrop .subItem {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-20px);
}
@media (max-height: 650px) {
  .headerDrop .subItem {
    height: 70vh;
    overflow-y: auto;
  }
}
.headerDrop .subItem a {
  display: block;
  padding: 8px;
  border-top: 1px solid #eae9e9;
  font-weight: 300;
  text-align: center;
  background-color: #fff;
}
.headerDrop .subItem a:not(:hover) {
  color: #a9a9a9;
}
.headerDrop.open .subItem {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.headerDrop.top .subItem {
  top: auto;
  bottom: 100%;
  height: auto;
  transform: translateY(20px);
}
.headerDrop.top.open .subItem {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.menu {
  display: flex;
}
.menu li > a {
  display: block;
  padding: 25px;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.06em;
}
@media (max-width: 1740px) {
  .menu li > a {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (max-width: 1480px) {
  .menu li > a {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 1366px) {
  .menu li > a {
    font-size: 14px;
  }
}
.menu li > a.current {
  color: #fe5000;
}

.popMenuArea {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding-top: 150px;
  padding-bottom: 100px;
  background-image: url("../images/bg1.jpg");
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s;
}
@media (max-width: 1180px) {
  .popMenuArea {
    padding-top: 60px;
    padding-bottom: 0;
  }
}
.popMenuArea .wrap {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 1100px;
  padding-left: 0;
  padding-right: 0;
  height: 100%;
}
@media (max-width: 1180px) {
  .popMenuArea .wrap {
    max-width: 100%;
    height: auto;
  }
}
.popMenuArea .bottomBox {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
}
.popMenuArea .bottomBox .right {
  display: flex;
  flex-direction: column;
}
.popMenuArea .socialBox {
  flex-wrap: wrap;
  text-align: right;
}
@media (max-width: 640px) {
  .popMenuArea .socialBox {
    text-align: left;
    justify-content: flex-start;
    padding-top: 10px;
  }
}
@media (max-width: 640px) {
  .popMenuArea .socialBox a {
    margin-left: 0;
    margin-right: 15px;
  }
}
.popMenuArea .copyright {
  margin-top: auto;
}
.popMenuArea .popMenuList,
.popMenuArea .popMenuBottomBox .left,
.popMenuArea .popMenuBottomBox .right {
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.5s;
}
.popMenuArea.show {
  opacity: 1;
  pointer-events: auto;
}
.popMenuArea.show .popMenuList,
.popMenuArea.show .popMenuBottomBox .left,
.popMenuArea.show .popMenuBottomBox .right {
  transform: translateY(0);
  opacity: 1;
}
.popMenuArea.show .popMenuList {
  transition-delay: 0.3s;
}
.popMenuArea.show .popMenuBottomBox .left {
  transition-delay: 0.4s;
}
.popMenuArea.show .popMenuBottomBox .right {
  transition-delay: 0.5s;
}

.popMenuBottomBox {
  margin-top: auto;
  width: 100%;
}

.popMenuBottomBox_top {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
@media (max-width: 1180px) {
  .popMenuBottomBox_top {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 640px) {
  .popMenuBottomBox_top {
    flex-direction: column;
    align-items: flex-start;
  }
}
.popMenuBottomBox_top .btn4 {
  margin-bottom: 15px;
}

.popMenuBottomBox_bottom {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
@media (max-width: 1180px) {
  .popMenuBottomBox_bottom {
    margin-bottom: 30px;
  }
}
@media (min-width: 1181px) {
  .popMenuBottomBox_bottom {
    display: none;
  }
}
.popMenuBottomBox_bottom .headerLink {
  width: 100%;
  text-align: center;
  padding: 20px;
  background-color: #000;
  color: #fff;
}
.popMenuBottomBox_bottom .headerDrop {
  width: 100%;
  height: 50px;
  background-color: #fff;
}

.popMenuBottomTitle {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  font-size: 16px;
  font-family: "Roboto", "Noto Sans TC", sans-serif;
}

.popMenuBox {
  position: relative;
  width: 100%;
}
@media (max-width: 1180px) {
  .popMenuBox {
    margin-bottom: 30px;
  }
}

.popMenuList {
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .popMenuList {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.popMenuList li {
  width: calc(100% / 6);
}
@media (max-width: 767px) {
  .popMenuList li {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .popMenuList .subMenu {
    display: none;
    padding-left: 20px;
    padding-right: 20px;
  }
}

.popMenuTitle {
  position: relative;
  display: block;
  font-size: 18px;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .popMenuTitle {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 12px;
    border-bottom: 1px solid #ddd;
  }
}
.popMenuTitle::before {
  content: "";
  position: absolute;
  right: 10px;
  top: 5px;
  font-family: FontAwesome;
  transition: all 0.5s;
}
@media (min-width: 768px) {
  .popMenuTitle::before {
    display: none;
  }
}
.popMenuTitle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20px;
  height: 3px;
  background-color: #fe5000;
}
@media (max-width: 767px) {
  .popMenuTitle::after {
    display: none;
  }
}
.popMenuTitle.open::before {
  transform: rotate(180deg);
}
.popMenuTitle span {
  display: inline-block;
  padding: 5px 8px;
  background-color: #000;
  color: #fff;
}

.popMenuSubTitle {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: #555;
}
.popMenuSubTitle:hover {
  color: #fe5000;
}

.popMenuInfo {
  font-family: "Roboto", "Noto Sans TC", sans-serif;
}
.popMenuInfo li {
  display: flex;
  padding-bottom: 10px;
}
.popMenuInfo a:hover {
  text-decoration: underline;
}
.popMenuInfo .left {
  display: flex;
  align-items: center;
  text-transform: uppercase;
  margin-right: 15px;
}
.popMenuInfo svg {
  opacity: 0.8;
  margin-right: 10px;
}
.popMenuInfo .iconPhone {
  width: 15px;
  height: 15px;
}
.popMenuInfo .iconFax {
  width: 18px;
  height: 14px;
}
.popMenuInfo .iconMail {
  width: 17px;
  height: 12px;
}

/*****banner*****/
.bannerArea .wrap {
  max-width: 100%;
  padding: 0;
}
.bannerArea .bannerBox {
  position: relative;
}
.bannerArea .bannerBox .slick-dotted.slick-slider {
  margin-bottom: 0;
}
.bannerArea .bannerBox .Img img {
  display: block;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/*****頁尾資訊*****/
footer {
  padding-top: 35px;
  padding-bottom: 35px;
  background-color: #fe5000;
}
footer .wrap {
  display: flex;
  align-items: center;
}
@media (max-width: 1180px) {
  footer .wrap {
    flex-wrap: wrap;
  }
}
@media (max-width: 960px) {
  footer .leftBox {
    width: 100%;
    margin-bottom: 20px;
  }
}
footer .rightBox {
  margin-left: auto;
}
@media (max-width: 960px) {
  footer .rightBox {
    width: 100%;
  }
}
footer .logo {
  width: 130px;
  margin-right: 50px;
}
@media (max-width: 1180px) {
  footer .logo {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }
}
footer .logo img {
  display: block;
  width: 100%;
  max-width: 130px;
  height: auto;
}
footer .copyright {
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #fff;
  font-family: "Epilogue", "Noto Sans TC", sans-serif;
}
@media (max-width: 960px) {
  footer .copyright {
    text-align: center;
  }
}
@media (max-width: 960px) {
  footer .socialBox {
    justify-content: center;
  }
}

.footerMenu {
  margin-bottom: 15px;
}
@media (max-width: 960px) {
  .footerMenu {
    display: none;
  }
}
.footerMenu a {
  position: relative;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #fff;
}
.footerMenu a:not(:last-child) {
  padding-right: 10px;
  margin-right: 10px;
}
.footerMenu a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -5px;
  width: 1px;
  height: 10px;
  background-color: #fff;
  opacity: 0.2;
}
.footerMenu a::after:last-child {
  display: none;
}

.footerInfo {
  display: flex;
  flex-wrap: wrap;
  font-family: "Roboto", "Noto Sans TC", sans-serif;
  color: #fff;
}
@media (max-width: 960px) {
  .footerInfo {
    justify-content: center;
  }
}
.footerInfo li {
  display: flex;
  margin-right: 25px;
  padding-bottom: 8px;
}
@media (max-width: 960px) {
  .footerInfo li {
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .footerInfo li {
    width: 100%;
    margin-right: 0;
  }
}
.footerInfo .full {
  width: 100%;
}
.footerInfo a {
  color: #fff;
}
.footerInfo a:hover {
  text-decoration: underline;
}
.footerInfo .left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-transform: uppercase;
  margin-right: 15px;
}
.footerInfo .left i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  opacity: 0.8;
  margin-right: 8px;
  font-size: 15px;
}
.footerInfo svg {
  opacity: 0.8;
  margin-right: 10px;
}
.footerInfo .iconPhone {
  width: 15px;
  height: 15px;
}
.footerInfo .iconFax {
  width: 18px;
  height: 14px;
}
.footerInfo .iconMail {
  width: 17px;
  height: 12px;
}

.socialBox {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}
.socialBox a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  margin-left: 15px;
  background-color: #fff;
  border-radius: 50%;
  font-size: 15px;
  color: #fe5000;
}
.socialBox a:hover {
  color: #fff;
  background-color: #fe5000;
}

.titleBox .en {
  margin-bottom: 25px;
  font-weight: 900;
  font-family: "Roboto", "Noto Sans TC", sans-serif;
  font-size: 43px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .titleBox .en {
    font-size: 35px;
  }
}
.titleBox .en.noMb {
  margin-bottom: 0;
}
.titleBox .en.line {
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.titleBox .en.line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 4px;
  background-color: #fe5000;
}
.titleBox .title {
  margin-bottom: 10px;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.06em;
}
.titleBox .title span {
  display: inline-block;
  padding: 3px 5px;
  color: #fff;
  background-color: #24191a;
}
.titleBox .text {
  line-height: 1.6;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #4c4c4c;
}
.titleBox .mainTitle {
  font-size: 40px;
  letter-spacing: 0.05em;
}
.titleBox.center {
  text-align: center;
}
.titleBox.ins {
  margin-bottom: 40px;
}
.titleBox.ins .en:not(.line) {
  margin-bottom: 10px;
}
.titleBox.white .en,
.titleBox.white .text {
  color: #fff;
}

.arrowStyle1 {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 45px;
  background-color: #000;
  color: #fff;
  overflow: hidden;
}
.arrowStyle1::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transform: translateY(-100%);
  width: 100%;
  height: 100%;
  background-color: #fe5000;
  transition: all 0.5s;
}
.arrowStyle1 .iconArrow {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -7.5px;
  margin-top: -3px;
  z-index: 2;
  width: 15px;
  height: 6px;
}
.arrowStyle1.prevArrow .iconArrow {
  transform: scaleX(-1);
}
.arrowStyle1.white {
  background-color: #fff;
  color: #000;
}
.arrowStyle1.nextArrow.border {
  border: 1px solid #e2e2e2;
}
@media (min-width: 1181px) {
  .arrowStyle1:hover {
    color: #fff;
  }
  .arrowStyle1:hover::before {
    transform: translateY(0);
  }
}

.arrowStyle2 {
  position: relative;
  width: 30px;
  height: 30px;
}
.arrowStyle2::after {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: FontAwesome;
  font-size: 20px;
}
.arrowStyle2.prevArrow::after {
  content: "";
}
.arrowStyle2.nextArrow::after {
  content: "";
}

.sectionCircleTitle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  text-transform: uppercase;
  font-size: 12px;
  font-family: "Roboto", "Noto Sans TC", sans-serif;
  text-transform: uppercase;
}
.sectionCircleTitle::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 35px;
  font-family: "Roboto", "Noto Sans TC", sans-serif;
  font-weight: bold;
  color: #000;
}
.sectionCircleTitle svg {
  display: block;
  overflow: visible;
  padding: 10px;
  width: 100%;
  height: 100%;
}
.sectionCircleTitle svg path {
  fill: none;
}
.sectionCircleTitle svg text {
  fill: #bbb;
}
.sectionCircleTitle.white::before {
  color: #fff;
}
.sectionCircleTitle.small {
  width: 100px;
  height: 100px;
}
.sectionCircleTitle.small::before {
  font-size: 24px;
}

.titleStyle1 {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 500;
}
.titleStyle1::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -5px;
  width: 20px;
  height: 10px;
  background-color: #fe5000;
}
.titleStyle1.small {
  font-size: 14px;
}
.titleStyle1.noMb {
  margin-bottom: 0;
}

.titleStyle2 {
  font-size: 18px;
  letter-spacing: 0.06em;
  color: #fff;
}
.titleStyle2 span {
  display: inline-block;
  background-color: #000;
  padding: 2px 5px;
}

.titleStyle3 {
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 15px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: #000;
}
.titleStyle3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20px;
  height: 3px;
  background-color: #fe5000;
}

/*--button--*/
.btn1 a {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  letter-spacing: 0.05em;
  font-weight: 900;
  font-family: "Roboto", "Noto Sans TC", sans-serif;
  text-transform: uppercase;
}
.btn1 a::after {
  content: "";
  display: inline-block;
  margin-left: 15px;
  width: 45px;
  height: 36px;
  background-image: url("../images/arrow1.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.btn1.white a::after {
  background-image: url("../images/arrow1_white.png");
}
.btn1.icon a {
  font-size: 0;
  text-indent: -9999px;
  overflow: hidden;
}
.btn1.icon a::after {
  margin-left: 0;
}

.btn2 a {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0.05em;
  font-family: "Roboto", "Noto Sans TC", sans-serif;
  text-transform: uppercase;
  font-weight: 900;
}
.btn2 a span {
  position: relative;
}
.btn2 a span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background-color: #000;
  transition: all 0.5s;
}
.btn2 a:hover span::after {
  background-color: #fe5000;
}

.btn3 a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: 50px;
  font-family: "Roboto", "Noto Sans TC", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background-color: #fe5000;
}
.btn3 a.dark {
  background-color: #24191a;
}
.btn3 a:hover {
  background-color: #000;
}

.btn4 a {
  position: relative;
  display: inline-block;
  min-width: 190px;
  text-align: center;
  padding: 10px 45px;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #fff;
  background-color: #fe5000;
}
.btn4 a:hover {
  background-color: #000;
}
.btn4.center {
  text-align: center;
}

/*--share--*/
.shareBox {
  position: relative;
  z-index: 2;
  width: 64px;
}
.shareBox .main {
  display: inline-block;
  width: 64px;
  height: 64px;
  background-image: url("../images/icon_share.png");
  background-repeat: no-repeat;
  background-position: 50%;
}
.shareBox.top .shareItem {
  top: -65px;
}
.shareBox .shareItem {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90px;
  pointer-events: none;
  padding-top: 15px;
}
.shareBox .shareItem a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  background-color: #fe5000;
  transform: translateY(10px);
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
.shareBox .shareItem a:hover {
  background-color: #000;
}
.shareBox .shareItem .iconLine {
  width: 20px;
  height: 20px;
}
.shareBox:hover .shareItem {
  pointer-events: auto;
}
.shareBox:hover .shareItem a {
  transform: translateY(0);
  opacity: 1;
}
.shareBox:hover .shareItem a:nth-child(2) {
  transition-delay: 0.2s;
}

/*****fixedBottomBtn*****/
.fixedBottomBtn {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 50px;
  border-top: 3px solid #af8442;
  border-bottom: 0px solid #999;
  text-align: center;
  background-color: #fff;
  transition: all 0.4s ease;
  display: none;
}
@media (min-width: 1181px) {
  .fixedBottomBtn {
    display: none;
  }
}
@media (min-width: 361px) {
  .fixedBottomBtn {
    padding: 0 20px;
  }
}
.fixedBottomBtn.hide {
  bottom: -50px;
}
.fixedBottomBtn a {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 300;
  color: #464646;
  line-height: 1.2;
}
.fixedBottomBtn a + a::before {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  left: 0;
  width: 1px;
  height: 12px;
  border-left: 1px solid #aaa;
}

.privacyBox {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 500;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.85);
}
.privacyBox .wrap {
  position: relative;
  display: flex;
  padding-top: 35px;
  padding-bottom: 35px;
}
@media (max-width: 767px) {
  .privacyBox .wrap {
    flex-wrap: wrap;
  }
}
.privacyBox .textEditor {
  width: 75%;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.02em;
}
@media (max-width: 767px) {
  .privacyBox .textEditor {
    width: 100%;
    padding-top: 15px;
  }
}
.privacyBox .link {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 25%;
}
@media (max-width: 767px) {
  .privacyBox .link {
    width: 100%;
    justify-content: flex-start;
    padding-top: 12px;
  }
}
.privacyBox .link a {
  color: #fff;
}
.privacyBox .link a:hover {
  color: #fe5000;
}
.privacyBox .closeBtn {
  position: absolute;
  right: 0;
  top: 0;
  width: 45px;
  height: 45px;
  background-color: #fe5000;
  cursor: pointer;
}
.privacyBox .closeBtn::before, .privacyBox .closeBtn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -0.5px;
  margin-top: -9px;
  width: 1px;
  height: 18px;
  background-color: #fff;
}
.privacyBox .closeBtn::before {
  transform: rotate(45deg);
}
.privacyBox .closeBtn::after {
  transform: rotate(-45deg);
}

.m_menu {
  display: none;
}

/*****內頁*****/
.mainArea {
  padding-top: 175px;
  padding-bottom: 100px;
}
@media (max-width: 1366px) {
  .mainArea {
    padding-bottom: 30px;
  }
}

.articleTitle {
  font-size: 18px;
  letter-spacing: 0.06em;
}

.featuresBox .cubeBox::before {
  left: 5px;
  top: -15px;
}
.featuresBox .cubeBox::after {
  right: 5px;
  bottom: -15px;
}
.featuresBox .topBox {
  display: flex;
  width: 100%;
  min-height: 65px;
  border: 1px solid #d6d6d6;
  background-color: #fff;
}
.featuresBox .rightBox {
  display: flex;
  margin-left: auto;
}
@media (max-width: 767px) {
  .featuresBox .rightBox {
    width: 100%;
  }
}
.featuresBox .category {
  display: flex;
  align-items: center;
  padding-left: 30px;
  padding-right: 30px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  font-family: "Roboto", "Noto Sans TC", sans-serif;
  text-transform: uppercase;
  border-left: 1px solid #d6d6d6;
}
@media (max-width: 767px) {
  .featuresBox .category {
    display: none;
  }
}
.featuresBox .pageMainTitle {
  display: flex;
  align-items: center;
  padding: 10px 25px;
  font-size: 20px;
  flex: 1;
}
.featuresBox .shareBox {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d6d6d6;
  border-top: none;
  border-bottom: none;
  margin-right: 30px;
}
.featuresBox .mTitleBox {
  display: flex;
  align-items: center;
  padding-right: 30px;
}
@media (max-width: 767px) {
  .featuresBox .classLinkBox {
    width: 100%;
  }
}
.featuresBox .mClassLink {
  width: 180px;
  height: 100%;
}
@media (max-width: 767px) {
  .featuresBox .mClassLink {
    width: 100%;
  }
}
.featuresBox .mClassLink .main {
  display: flex;
  align-items: center;
  height: 100%;
}

.groupBox .ins {
  display: inline-flex;
  background-color: #fff;
  border: 1px solid #d6d6d6;
}
.groupBox .bread li,
.groupBox .gropuList li {
  height: 65px;
}
@media (max-width: 1180px) {
  .groupBox .bread {
    display: none;
  }
}

.gropuList {
  display: flex;
}
.gropuList li:not(:last-child) {
  border-right: 1px solid #d6d6d6;
}
.gropuList a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-left: 30px;
  padding-right: 30px;
}
.gropuList .titleStyle1 {
  margin-left: 30px;
}
.gropuList .link {
  font-family: "Roboto", "Noto Sans TC", sans-serif;
  text-transform: uppercase;
}
.gropuList .link span {
  position: relative;
  font-weight: 900;
}
.gropuList .link span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background-color: #000;
  transition: all 0.5s;
}
.gropuList .link:hover span::after {
  background-color: #fe5000;
}

.bread {
  display: flex;
}
@media (max-width: 767px) {
  .bread {
    display: none;
  }
}
.bread ul {
  display: flex;
}
.bread ul li {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 14px;
  letter-spacing: 0.06em;
  font-weight: 500;
  border-right: 1px solid #d6d6d6;
}
.bread ul li:not(:first-child) {
  padding-left: 20px;
  padding-right: 20px;
}
.bread ul li:not(:first-child) a {
  padding: 0 20px;
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0 -20px;
}
.bread .home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85px;
  height: 100%;
}
.bread .home .iconHome {
  width: 13px;
  height: 13px;
}

/*類別*/
.classLinkBox .classLink {
  display: none;
}
.classLinkBox .mClassLink {
  display: block;
}

.classRowBox {
  position: relative;
  z-index: 3;
  margin-bottom: 30px;
  border-bottom: 1px solid #e6e6e6;
  transition: all 0.5s ease-in-out;
}
.classRowBox > ul {
  justify-content: center;
  flex-wrap: wrap;
  display: flex;
}
@media (max-width: 1180px) {
  .classRowBox > ul {
    display: none;
  }
}
.classRowBox > ul > li:last-child a::after {
  display: none;
}
.classRowBox > ul a {
  position: relative;
  display: block;
  padding: 15px 40px;
  font-size: 15px;
  color: #666;
  letter-spacing: 0.07em;
  text-align: center;
}
.classRowBox > ul a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #fe5000;
  transition: all 0.5s ease-in-out;
}
.classRowBox > ul a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -8px;
  width: 1px;
  height: 16px;
  background-color: #e6e6e6;
}
.classRowBox > ul a.current::before, .classRowBox > ul a:hover::before {
  width: 100%;
}

.classColumnBox {
  position: relative;
  z-index: 3;
}
.classColumnBox > ul {
  border-top: 1px solid #e1e1e1;
}
@media (max-width: 1180px) {
  .classColumnBox > ul {
    display: none;
  }
}
.classColumnBox > ul > li > a {
  padding-top: 15px;
  padding-bottom: 15px;
  color: #5c5c5c;
  font-size: 15px;
  letter-spacing: 0.07em;
  border-bottom: 1px solid #e1e1e1;
}
.classColumnBox > ul ul {
  display: none;
  margin-bottom: 30px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.classColumnBox > ul ul li + li {
  border-top: 1px solid #ccc;
}
.classColumnBox > ul a {
  position: relative;
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 14px;
  color: #777;
}
.classColumnBox > ul a.current, .classColumnBox > ul a:hover {
  color: #fe5000;
}
.classColumnBox > ul .linkHasItems.open + ul {
  display: block;
}
.classColumnBox > ul .linkHasItems.open + ul > li {
  animation: 0.5s aniSlideLeft both ease-out 0.3s;
}

.mClassLink {
  position: relative;
  z-index: 3;
}
@media (min-width: 1181px) {
  .mClassLink {
    display: none;
  }
}
.mClassLink.open > ul {
  display: block;
}
.mClassLink .main {
  position: relative;
  display: block;
  font-weight: 500;
  font-size: 14px;
  padding: 10px 30px 10px 10px;
  color: #fff;
  letter-spacing: 1px;
  cursor: pointer;
  background-color: #fe5000;
}
.mClassLink .main::before {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  z-index: 1;
  margin-top: -6px;
  line-height: 1;
  font-size: 15px;
  color: #fff;
  font-family: FontAwesome;
}
.mClassLink > ul {
  position: absolute;
  left: 0;
  top: calc(100% - 1px);
  z-index: 1;
  display: none;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.mClassLink > ul > li + li {
  border-top: 1px solid #f2f2f2;
}
.mClassLink > ul > li.current > a {
  color: #fe5000;
}
.mClassLink > ul a {
  position: relative;
  z-index: 1;
  display: block;
  padding: 14px 20px;
  color: #000;
  font-size: 14px;
  background-color: #fff;
}
.mClassLink ul {
  display: none;
}
.mClassLink .linkHasItems {
  position: relative;
  padding-right: 40px;
}
.mClassLink .linkHasItems::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 17px;
  z-index: 1;
  line-height: 1;
  margin-top: -7px;
  font-family: FontAwesome;
}
.mClassLink .linkHasItems.open::after {
  transform: rotateX(180deg);
}
.mClassLink .linkHasItems.open + ul {
  display: block;
}
.mClassLink .linkHasItems + ul {
  background-color: #efefef;
}
.mClassLink .linkHasItems + ul a {
  padding: 10px 5px 10px 30px;
  background-color: #efefef;
}
.mClassLink .linkHasItems + ul a.current {
  color: #fe5000;
}

/*側邊_相關訊息*/
@media (min-width: 1181px) {
  .side_news,
.sideRelatedBox {
    margin-top: 30px;
  }
}
@media (max-width: 1180px) {
  .side_news .titleEnMark,
.side_news .titleMark,
.sideRelatedBox .titleEnMark,
.sideRelatedBox .titleMark {
    text-align: center;
  }
}
@media (min-width: 1181px) {
  .side_news .titleMark,
.sideRelatedBox .titleMark {
    margin: 0;
  }
}

.side_news .listTopBox {
  display: flex;
  align-items: flex-end;
  margin-bottom: 25px;
}
@media (max-width: 767px) {
  .side_news .listTopBox {
    flex-wrap: wrap;
  }
}
.side_news .arrowBox {
  margin-left: auto;
}
@media (max-width: 640px) {
  .side_news .arrowBox {
    width: 100%;
    margin-top: 12px;
  }
}

.otherNewsList,
.sideRelatedList {
  margin-left: -16px;
  margin-right: -16px;
}
@media (max-width: 1023px) {
  .otherNewsList,
.sideRelatedList {
    margin-left: -8px;
    margin-right: -8px;
  }
}
.otherNewsList li,
.sideRelatedList li {
  width: 33.333%;
  margin-bottom: 30px;
  padding-left: 16px;
  padding-right: 16px;
}
@media (max-width: 1023px) {
  .otherNewsList li,
.sideRelatedList li {
    padding-left: 8px;
    padding-right: 8px;
  }
}
.otherNewsList .item,
.sideRelatedList .item {
  background-color: #fff;
}
.otherNewsList .topBox,
.sideRelatedList .topBox {
  padding: 25px;
}
@media (max-width: 1023px) {
  .otherNewsList .topBox,
.sideRelatedList .topBox {
    padding: 15px;
  }
}
.otherNewsList .topBox .top,
.sideRelatedList .topBox .top {
  position: relative;
}
.otherNewsList .dateBox,
.sideRelatedList .dateBox {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background-color: #000;
}
.otherNewsList .dateBox::after,
.sideRelatedList .dateBox::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -22px;
  margin-top: -0.5px;
  transform: rotate(-45deg);
  width: 44px;
  height: 1px;
  background-color: #fff;
  opacity: 0.2;
}
.otherNewsList .dateBox .itemDate,
.sideRelatedList .dateBox .itemDate {
  width: 44px;
  height: 22px;
  color: #fff;
  font-family: "Roboto", "Noto Sans TC", sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.02em;
}
.otherNewsList .dateBox .itemDate.left,
.sideRelatedList .dateBox .itemDate.left {
  text-align: left;
}
.otherNewsList .dateBox .itemDate.right,
.sideRelatedList .dateBox .itemDate.right {
  text-align: right;
}
.otherNewsList .Img img,
.sideRelatedList .Img img {
  display: block;
}
.otherNewsList .Txt,
.sideRelatedList .Txt {
  padding-top: 25px;
}
.otherNewsList .title,
.sideRelatedList .title {
  display: block;
  padding-bottom: 5px;
  font-size: 18px;
  letter-spacing: 0.06em;
}
.otherNewsList .text,
.sideRelatedList .text {
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.6;
  max-height: 44px;
}
.otherNewsList .bottomBox,
.sideRelatedList .bottomBox {
  display: flex;
  border-top: 1px solid #ccc;
}
.otherNewsList .bottomBox .left,
.otherNewsList .bottomBox .right,
.sideRelatedList .bottomBox .left,
.sideRelatedList .bottomBox .right {
  width: 50%;
  height: 65px;
}
.otherNewsList .bottomBox .left,
.sideRelatedList .bottomBox .left {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #ccc;
}
.otherNewsList .titleStyle1,
.sideRelatedList .titleStyle1 {
  font-size: 14px;
  margin-bottom: 0;
}
.otherNewsList .btn2 a,
.sideRelatedList .btn2 a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/*側邊_分享*/
@media (min-width: 1181px) {
  .side_share {
    position: fixed;
    top: 30%;
    display: none;
    width: 50px;
    text-align: center;
  }
}
@media (min-width: 1601px) {
  .side_share {
    right: 95px;
  }
}
@media (min-width: 1501px) and (max-width: 1600px) {
  .side_share {
    right: 50px;
  }
}
@media (min-width: 1401px) and (max-width: 1500px) {
  .side_share {
    right: 30px;
  }
}
@media (min-width: 1181px) and (max-width: 1400px) {
  .side_share {
    right: 0;
    width: 55px;
    padding: 15px 0;
    border-radius: 4px 0 0 4px;
    box-shadow: -5px 3px 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }
}
@media (max-width: 1180px) {
  .side_share {
    margin-top: 30px;
  }
}
@media (max-width: 640px) {
  .side_share {
    text-align: center;
  }
}
@media (min-width: 1181px) {
  .side_share a {
    display: block;
    margin-top: 14px;
  }
}
@media (max-width: 1180px) {
  .side_share a {
    display: inline-block;
    vertical-align: middle;
    padding-top: 5px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
    text-align: center;
    background-color: #fff;
  }
}
@media (min-width: 641px) and (max-width: 1180px) {
  .side_share a {
    margin-left: 15px;
  }
  .side_share a + a {
    margin-left: 12px;
  }
}
@media (max-width: 640px) {
  .side_share a {
    margin-left: 5px;
    margin-right: 5px;
  }
}
.side_share svg {
  width: 18px;
  height: 18px;
  fill: #808080;
}
.side_share a:hover svg {
  fill: #fe5000;
}
.side_share span {
  font-size: 12px;
  color: #626262;
  text-transform: uppercase;
}
@media (min-width: 1181px) {
  .side_share span {
    display: inline-block;
  }
}
@media (max-width: 640px) {
  .side_share span {
    display: block;
    margin-bottom: 15px;
  }
}
@media (min-width: 1181px) {
  .side_share span::before {
    content: "";
    display: block;
    width: 45px;
    height: 45px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: url(../images/icon/icon_share.png) no-repeat center, #fff;
  }
}
@media (min-width: 1401px) {
  .side_share span::before {
    box-shadow: 0 7px 10px rgba(0, 0, 0, 0.1);
  }
}

/*頁籤*/
.tab {
  margin-top: 30px;
  text-align: center;
}
.tab a {
  display: inline-block;
  padding: 5px 10px;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  color: #808080;
}
.tab a:hover, .tab a.current {
  border-bottom-color: #fe5000;
}
.tab a.current {
  color: #191919;
}

.tabContent {
  margin-top: 40px;
}
.tabContent .textEditor {
  margin: 0;
  padding: 0;
}

/*內頁_設施內容/開放時間*/
@media (min-width: 641px) {
  .facItemList {
    display: flex;
    flex-wrap: wrap;
  }
}
@media (min-width: 1301px) {
  .facItemList {
    margin-top: 40px;
  }
}
@media (max-width: 1300px) {
  .facItemList {
    margin-top: 15px;
  }
}
.facItemList li {
  position: relative;
  min-height: 50px;
  padding: 0 30px 0 90px;
  font-size: 15px;
  color: #2a2a2a;
}
@media (min-width: 641px) {
  .facItemList li:not(:last-of-type) {
    border-right: 1px solid #e5e5e5;
  }
}
@media (min-width: 1301px) {
  .facItemList li {
    min-width: 20%;
  }
}
@media (min-width: 851px) and (max-width: 1300px) {
  .facItemList li {
    min-width: 30%;
  }
}
@media (min-width: 641px) and (max-width: 850px) {
  .facItemList li {
    min-width: 50%;
  }
}
@media (max-width: 640px) {
  .facItemList li {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 70px;
    font-size: 14px;
  }
}
@media (min-width: 641px) and (max-width: 1300px) {
  .facItemList li {
    margin-top: 20px;
  }
}
@media (max-width: 640px) {
  .facItemList li + li {
    border-top: 1px solid #e5e5e5;
  }
}
.facItemList li img {
  position: absolute;
  left: 30px;
}
@media (min-width: 641px) {
  .facItemList li img {
    top: 0;
    width: 50px;
  }
}
@media (max-width: 640px) {
  .facItemList li img {
    top: 15px;
    width: 35px;
  }
}
.facItemList li span {
  display: block;
  margin-bottom: 3px;
  font-weight: 300;
  color: #959595;
}
.facItemList li a {
  display: inline-block;
}
.facItemList li a:hover {
  text-decoration: underline;
}

.facItemBox {
  position: relative;
  margin-top: 35px;
  font-size: 15px;
  font-weight: 300;
  color: #626262;
  background-color: #f8f8f8;
}
@media (min-width: 961px) {
  .facItemBox {
    display: flex;
    flex-wrap: wrap;
  }
}
@media (min-width: 1251px) {
  .facItemBox {
    padding: 15px 50px;
  }
}
@media (min-width: 1181px) and (max-width: 1250px) {
  .facItemBox {
    padding: 15px 25px;
  }
}
@media (min-width: 501px) and (max-width: 1180px) {
  .facItemBox {
    padding: 15px 40px;
  }
}
@media (max-width: 500px) {
  .facItemBox {
    padding: 15px 20px;
  }
}
@media (max-width: 960px) {
  .facItemBox {
    text-align: center;
  }
}
.facItemBox + .facItemBox {
  margin-top: 15px;
}
.facItemBox span {
  position: relative;
  font-size: 18px;
  font-weight: 400;
  color: #191919;
}
@media (min-width: 961px) {
  .facItemBox span {
    margin-right: 30px;
  }
}
@media (min-width: 961px) {
  .facItemBox span::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 55px;
    height: 55px;
    margin-right: 18px;
    background-repeat: no-repeat;
    background-position: center center;
  }
}
.facItemBox.time span::before {
  background-image: url(../images/icon/icon_clock.png);
}
.facItemBox.price span::before {
  background-image: url(../images/icon/icon_price.png);
}
@media (max-width: 500px) {
  .facItemBox.menuDownload {
    padding-left: 15px;
    padding-right: 10px;
  }
}
.facItemBox.menuDownload span::before {
  background-image: url(../images/icon/icon_dining.png);
}
.facItemBox.menuDownload a {
  display: inline-block;
  margin-right: 25px;
  border-bottom: 2px solid transparent;
}
.facItemBox.menuDownload a:not(:last-of-type)::after {
  content: "|";
  position: relative;
  right: -13px;
  color: #c9c9c9;
}
.facItemBox.menuDownload a:hover {
  border-bottom-color: #fe5000;
}
.facItemBox .txt {
  padding-top: 12px;
  padding-bottom: 5px;
  line-height: 1.8;
}
.facItemBox .txt b {
  font-weight: 400;
  color: #000;
}
.facItemBox + .textEditor {
  margin-top: 55px;
}

/*內頁_按鈕360/相簿*/
.url360Btn,
.albumBtn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 68px;
  height: 68px;
  padding: 0 10px;
  font-size: 12px;
}
.url360Btn svg,
.albumBtn svg {
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
}
.url360Btn:hover,
.albumBtn:hover {
  color: #fff;
  background-color: #272727;
}
.url360Btn:hover svg,
.albumBtn:hover svg {
  fill: #fff;
}

.url360Btn {
  color: #000;
  background-color: #eee;
}
.url360Btn svg {
  fill: #626262;
}

.albumBtn {
  color: #fff;
  background-color: #fe5000;
}
.albumBtn svg {
  fill: #fff;
}

/*標籤*/
.tagBox {
  position: relative;
  z-index: 1;
}
.tagBox .ins {
  position: relative;
  width: 100%;
}
.tagBox .ins.open ul {
  display: block;
}
.tagBox .tagMainTitle {
  position: relative;
  display: block;
  width: 100%;
  font-size: 14px;
  padding: 10px 30px 10px 10px;
  color: #fff;
  letter-spacing: 1px;
  cursor: pointer;
  background-color: #fe5000;
}
@media (min-width: 1181px) {
  .tagBox .tagMainTitle {
    display: none;
  }
}
.tagBox .tagMainTitle::before {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  z-index: 1;
  margin-top: -6px;
  line-height: 1;
  font-size: 15px;
  color: #fff;
  font-family: FontAwesome;
}
.tagBox ul {
  display: flex;
  flex-wrap: wrap;
}
@media (max-width: 1180px) {
  .tagBox ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    top: calc(100% - 1px);
    z-index: 1;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
}
@media (max-width: 1180px) {
  .tagBox ul > li + li {
    border-top: 1px solid #f2f2f2;
  }
}
.tagBox a {
  display: flex;
  align-items: center;
  padding-right: 15px;
  padding-bottom: 5px;
}
@media (max-width: 1180px) {
  .tagBox a {
    padding: 14px 20px;
  }
}
.tagBox a:hover .icon, .tagBox a.current .icon {
  border-color: #fe5000;
  background-color: #fe5000;
  color: #fff;
}
.tagBox a:hover .icon i, .tagBox a.current .icon i {
  opacity: 1;
}
.tagBox .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border: 1px solid #acacac;
  border-radius: 3px;
  transition: all 0.5s;
}
.tagBox .icon i {
  opacity: 0;
}
.tagBox.center .ins {
  display: flex;
  justify-content: center;
}
.tagBox.right .ins {
  display: flex;
  justify-content: flex-end;
}
.tagBox.right a {
  padding-left: 15px;
  padding-right: 0;
}

/*頁碼*/
.pageBox {
  position: relative;
  display: flex;
  justify-content: center;
}
.pageBox .mainPage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  height: 50px;
}
@media (min-width: 1181px) {
  .pageBox .mainPage {
    display: none;
  }
}
.pageBox .mainPage::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: FontAwesome;
  transition: all 0.5s;
}
.pageBox .mainPage.show::after {
  transform: translateY(-50%) rotate(180deg);
}
.pageBox .ins {
  display: flex;
  border: 1px solid #d6d6d6;
}
@media (max-width: 1180px) {
  .pageBox .ins {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    max-height: 150px;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s;
  }
  .pageBox .ins.show {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (max-width: 1180px) {
  .pageBox .ins a:not(:last-child) {
    border-bottom: 1px solid #eee;
  }
}
.pageBox .ins a.current {
  background-color: #000;
  color: #fff;
}
.pageBox a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 65px;
  background-color: #fff;
}
.pageBox a:hover {
  color: #fff;
  background-color: #000;
}
@media (min-width: 1181px) {
  .pageBox a:not(:last-child) {
    border-right: 1px solid #d6d6d6;
  }
}
.pageBox .page {
  width: 65px;
}
@media (max-width: 1180px) {
  .pageBox .page {
    width: 100%;
    height: 30px;
    flex-shrink: 0;
  }
}
.pageBox .prevPage,
.pageBox .nextPage {
  width: 150px;
}
@media (max-width: 1180px) {
  .pageBox .prevPage,
.pageBox .nextPage {
    display: none;
  }
}
.pageBox .prevPage i {
  margin-right: 12px;
}
.pageBox .nextPage i {
  margin-left: 12px;
}

.nearPageBox {
  display: flex;
  justify-content: center;
  padding-top: 60px;
}
@media (max-width: 1180px) {
  .nearPageBox {
    padding-top: 20px;
  }
}
@media (max-width: 440px) {
  .nearPageBox {
    flex-wrap: wrap;
  }
}
.nearPageBox a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
  background-color: #fff;
}
@media (max-width: 640px) {
  .nearPageBox a {
    height: 50px;
  }
}
.nearPageBox .back {
  padding-left: 40px;
  padding-right: 40px;
  color: #fff;
  font-family: "Roboto", "Noto Sans TC", sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-color: #fe5000;
}
@media (max-width: 640px) {
  .nearPageBox .back {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 440px) {
  .nearPageBox .back {
    order: 3;
    width: 100%;
  }
}
.nearPageBox .back:hover {
  background-color: #000;
}
.nearPageBox .btn {
  padding-left: 20px;
  padding-right: 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
@media (max-width: 640px) {
  .nearPageBox .btn {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 440px) {
  .nearPageBox .btn {
    flex: 1;
  }
}
.nearPageBox .prevBtn i {
  margin-right: 10px;
}
.nearPageBox .nextBtn i {
  margin-left: 10px;
}
.nearPageBox .noPage {
  opacity: 0;
  pointer-events: none;
}

/*側邊_相簿*/
.side_album li {
  float: left;
  width: 33.33%;
  padding: 0 10px 10px 0;
}
.side_album a {
  display: block;
  box-shadow: 2px 2px 5px #c3c3c3;
}
.side_album a img {
  display: block;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/**箭頭**/
.arrowPrev,
.arrowNext {
  position: relative;
  z-index: 8;
  display: block;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.arrowPrev::before,
.arrowNext::before {
  content: "";
  position: absolute;
  top: calc(50% - 10px);
  width: 20px;
  height: 20px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
}

.arrowPrev::before {
  left: calc(50% - 5px);
  transform: rotate(-45deg);
}

.arrowNext::before {
  right: calc(50% - 5px);
  transform: rotate(135deg);
}

.arrowTxtPrev,
.arrowTxtNext {
  position: relative;
  z-index: 10;
  display: block;
  width: 90px;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  font-family: "Cardo", "Noto Sans TC", "微軟正黑體", Helvetica, Heiti TC, "メイリオ", sans-serif;
  color: #555;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}
.arrowTxtPrev::before,
.arrowTxtNext::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 30px;
  height: 1px;
  background-color: #555;
}
.arrowTxtPrev::after,
.arrowTxtNext::after {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-top: 1px solid #555;
}
.arrowTxtPrev:hover,
.arrowTxtNext:hover {
  color: #fe5000;
}
.arrowTxtPrev:hover::before,
.arrowTxtNext:hover::before {
  background-color: #fe5000;
}
.arrowTxtPrev:hover::after,
.arrowTxtNext:hover::after {
  border-color: #fe5000;
}

.arrowTxtNext {
  padding-right: 40px;
}
.arrowTxtNext::before {
  right: 0;
}
.arrowTxtNext::after {
  right: 0;
  border-right: 1px solid #555;
  transform: rotate(45deg);
}

.arrowTxtPrev {
  padding-left: 40px;
}
.arrowTxtPrev::before {
  left: 0;
}
.arrowTxtPrev::after {
  left: 0;
  border-left: 1px solid #555;
  transform: rotate(-45deg);
}

/**dots**/
.mainArea .slick-dotted.slick-slider {
  margin-bottom: 0;
}

ul.dots {
  position: relative;
  z-index: 5;
  margin: 0;
  padding: 0;
  text-align: center;
}
ul.dots li {
  padding: 0;
  position: relative;
  display: inline-block;
  margin: 0 4px;
}
ul.dots li button {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid #d2d2d2;
  font-size: 0;
  color: transparent;
  background: transparent;
  cursor: pointer;
}
ul.dots li.slick-active button, ul.dots li:hover button {
  border-color: #fe5000;
  background: #fe5000;
}

.dotsBox.circle ul.dots li button {
  border-radius: 50%;
}
.dotsBox.circle ul.dots li button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  width: 0;
  height: 1px;
  background-color: #ccc;
}
.dotsBox.circle ul.dots li.slick-active button {
  margin-right: 16px;
}
.dotsBox.circle ul.dots li.slick-active button::before {
  width: 10px;
}

/**********適應性**********/
@media (max-width: 480px) {
  .col-2 {
    float: none;
    width: 100%;
  }

  .col-3 {
    float: none;
    width: 100%;
  }

  .col-4 {
    float: none;
    width: 100%;
  }

  .col-5 {
    float: none;
    width: 100%;
  }
}
/***Hover效果1: 放大淡出***/
.imh_opacity {
  background-color: #000;
  overflow: hidden;
}
.imh_opacity img {
  transition: all 0.3s linear;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.imh_opacity a {
  display: block;
  width: 100%;
  height: 100%;
}
.imh_opacity:hover img {
  opacity: 0.8;
  transform: scale(1.05);
}

/***Hover效果1: 放大淡出Detail***/
.imh_detail {
  background-color: #000;
  overflow: hidden;
}
.imh_detail img {
  transition: all 0.3s linear;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.imh_detail a:before {
  content: "Details+";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 99;
  margin-left: -45px;
  margin-top: -80px;
  display: block;
  padding: 10px 20px;
  font-size: 13px;
  color: #fff;
  border: 2px solid #fff;
  opacity: 0;
  transition: all 0.3s ease;
}
.imh_detail:hover a:before {
  opacity: 1;
  margin-top: -20px;
}
.imh_detail:hover img {
  opacity: 0.3;
  transform: scale(1.05);
}

/***Hover效果1: 放大淡出zoom***/
.imh_zoom {
  position: relative;
  background-color: #000;
  overflow: hidden;
}
.imh_zoom img {
  transition: all 0.3s linear;
  -webkit-backface-visibility: hidden;
}
.imh_zoom a:before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: -30px;
  margin-top: -20px;
  margin-left: -20px;
  z-index: 99;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  font-size: 18px;
  color: #fff;
  font-family: FontAwesome;
  text-align: center;
  background-color: #000;
  transition: all 0.4s ease;
}
.imh_zoom:hover a:before {
  top: 50%;
}
.imh_zoom:hover img {
  opacity: 0.3;
  transform: scale(1.05);
}

/*--booking--*/
.openBooking {
  position: relative;
  display: block;
  width: 100%;
  padding: 12px 15px;
  text-align: center;
  letter-spacing: 0.05em;
  color: #fff;
  background-color: #fe5000;
}
@media (min-width: 641px) {
  .openBooking {
    display: none;
  }
}
.openBooking::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: FontAwesome;
  font-size: 16px;
}
.openBooking:hover {
  color: #fff;
}

.bookingOutArea {
  position: relative;
}

.bookingArea {
  position: absolute;
  left: 0;
  bottom: -35px;
  width: 100%;
}
@media (max-width: 1620px) {
  .bookingArea {
    position: relative;
    bottom: 0;
    background-color: #fff;
  }
}
@media (min-width: 641px) {
  .bookingArea {
    display: block !important;
  }
}
@media (max-width: 640px) {
  .bookingArea {
    display: none;
  }
}
@media (max-width: 1180px) {
  .bookingArea .wrap {
    padding-left: 0;
    padding-right: 0;
  }
}

.dropStoreBox {
  position: relative;
  z-index: 2;
}
@media (max-width: 480px) {
  .dropStoreBox {
    margin-bottom: 12px;
  }
}
.dropStoreBox .dropStoreTitle {
  position: relative;
  background-color: #2e2e2e;
  padding: 10px 45px;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #fff;
  text-align: center;
  cursor: pointer;
}
.dropStoreBox .dropStoreTitle::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: FontAwesome;
}
.dropStoreBox .list {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s;
}
.dropStoreBox .list li:not(:last-child) {
  border-bottom: 1px solid #eaeaea;
}
.dropStoreBox .list a {
  display: block;
  padding: 10px;
  text-align: center;
}
.dropStoreBox.show .list {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.bookingList {
  display: flex;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  height: 70px;
  background-color: #fff;
}
@media (max-width: 1420px) {
  .bookingList {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 1180px) {
  .bookingList {
    flex-wrap: wrap;
    height: auto;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 720px) {
  .bookingList {
    padding-left: 0;
    padding-right: 0;
  }
}
.bookingList > li {
  position: relative;
  flex: 1;
  height: 40px;
  padding-left: 25px;
  padding-right: 25px;
}
@media (max-width: 1420px) {
  .bookingList > li {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.bookingList > li.button {
  display: flex;
  justify-content: space-between;
  flex: 2;
}
@media (max-width: 1180px) {
  .bookingList > li.button {
    flex: auto;
    width: 50%;
  }
}
@media (max-width: 480px) {
  .bookingList > li.button {
    flex-wrap: wrap;
  }
}
.bookingList > li.button .dropStoreBox,
.bookingList > li.button .btn4 {
  width: 49%;
}
@media (max-width: 480px) {
  .bookingList > li.button .dropStoreBox,
.bookingList > li.button .btn4 {
    width: 100%;
  }
}
@media (min-width: 1181px) {
  .bookingList > li:last-child::after {
    display: none;
  }
}
@media (max-width: 1180px) {
  .bookingList > li {
    flex: auto;
    width: 50%;
    height: auto;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .bookingList > li:nth-child(even)::after {
    display: none;
  }
}
@media (max-width: 720px) {
  .bookingList > li {
    width: 100%;
  }
  .bookingList > li:not(:last-child) {
    border-bottom: 1px solid #e5e5e5;
  }
}
.bookingList > li::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: #e5e5e5;
}
@media (max-width: 720px) {
  .bookingList > li::after {
    display: none;
  }
}
.bookingList .item {
  display: flex;
  align-items: center;
  width: 100%;
}
.bookingList .title {
  width: 90px;
  position: relative;
  font-size: 14px;
  padding-left: 20px;
  font-family: "Roboto", "Noto Sans TC", sans-serif;
}
.bookingList .title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  background-color: #fe5000;
}
.bookingList .box {
  position: relative;
  width: calc(100% - 90px);
}
.bookingList .box::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: FontAwesome;
  font-size: 16px;
}
.bookingList input[type=text],
.bookingList select {
  width: 100%;
  height: 40px;
  padding-left: 20px;
  padding-right: 20px;
  border: none;
  font-family: "Roboto", "Noto Sans TC", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  border-radius: 0;
}
@media (max-width: 1280px) {
  .bookingList input[type=text],
.bookingList select {
    font-size: 14px;
    letter-spacing: 0;
  }
}
.bookingList select {
  -webkit-appearance: none;
          appearance: none;
}
.bookingList .btn4 a {
  width: 100%;
  min-width: auto;
}

/*--404--*/
.page404 {
  text-align: center;
}
.page404 .opps {
  padding-bottom: 15px;
  font-weight: 700;
  font-family: "Roboto", "Noto Sans TC", sans-serif;
  font-size: 38px;
  letter-spacing: 0.05em;
}
.page404 .text {
  padding-bottom: 10px;
  font-size: 16px;
}
.page404 .link a {
  display: inline-block;
  padding: 5px 8px;
  font-size: 16px;
}
.page404 .link a:not(:last-child)::after {
  content: "/";
  margin-left: 10px;
}