/*- common -*/
a {
  cursor: pointer;
}

html {
  font-size: 16px;
  font-weight: Medium;
  scroll-behavior: smooth;
}

@media screen and (max-width: 768px) {
  html {
    font-size: 12px;
  }
}

body {
  background: #f9f9f7;
  font-family: "Roboto", "Noto Sans TC";
  color: #4d4d4d;
  overflow: overlay;
}

body * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

* {
  -webkit-overflow-scrolling: touch;
}

a {
  text-decoration: none;
}

a:hover,
a:focus {
  color: #d9a06b;
  text-decoration: none;
}

ul {
  list-style: none;
}

figure {
  margin: 0;
  padding: 0;
}

img {
  /* 消圖片下面白邊 */
  vertical-align: middle;
}

.hidden {
  display: none;
}

@media screen and (max-width: 768px) {
  .phonemode-hidden {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .phonemode-show {
    display: block;
  }
}

.transition {
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.object_fit_contain {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: 100%;
}

.object_fit_cover {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* demo撐開中間內容高度 */
.demo-body {
  height: calc(100vh - 180px);
}