@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400&family=Noto+Serif+TC:wght@600&display=swap");
/* clearBoth */
* {
  box-sizing: border-box; }

html {
  font-size: 16px; }

body {
  margin: 0 auto;
  padding: 0;
  font-size: 100%;
  font-family: 'Microsoft JhengHei', sans-serif;
  letter-spacing: 1px;
  line-height: 1.5;
  font-size: 18px;
  color: #000000; }
  body.gOpen {
    overflow: hidden; }
  @media (max-width: 414px) {
    body {
      font-size: 16px; } }

h1 {
  font-size: 36px;
  font-weight: bold;
  color: #000000;
  font-family: 'Microsoft JhengHei', sans-serif;
  margin-bottom: 10px; }
  @media (max-width: 414px) {
    h1 {
      font-size: 28px; } }

h2 {
  font-size: 1.5rem;
  font-weight: 500;
  font-family: "Noto Sans TC", serif;
  color: #232323;
  margin-bottom: 1rem; }
  @media (max-width: 414px) {
    h2 {
      font-size: 1.375rem; } }
  @media (max-width: 320px) {
    h2 {
      font-size: 1.25rem; } }

h3 {
  font-size: 1.25rem;
  font-weight: 500;
  font-family: "Noto Sans TC", serif;
  color: #232323; }
  @media (max-width: 320px) {
    h3 {
      font-size: 1.125rem; } }

h1, h2, h3, h4, h5, h6 {
  font-weight: bold; }

p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 20px; }
  p a {
    color: #5e69ca;
    font-weight: bold; }
  @media (max-width: 414px) {
    p {
      font-size: 16px; } }

a {
  text-decoration: none; }

img {
  width: 100%;
  max-width: 100%;
  display: block; }

.wrapper {
  width: 1100px;
  position: relative;
  margin: 0 auto;
  clear: both;
  zoom: 1; }
  .wrapper:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0; }
  @media (max-width: 1100px) {
    .wrapper {
      width: calc(100% - 40px); } }

.wrapper-m {
  width: 750px;
  position: relative;
  margin: 0 auto;
  clear: both;
  zoom: 1; }
  .wrapper-m:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0; }
  @media (max-width: 768px) {
    .wrapper-m {
      width: calc(100% - 40px); } }

.wrapper-s {
  width: 370px;
  position: relative;
  margin: 0 auto;
  clear: both;
  zoom: 1; }
  .wrapper-s:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0; }
  @media (max-width: 768px) {
    .wrapper-s {
      width: calc(100% - 40px); } }

.pcShow {
  display: block; }
  @media (max-width: 768px) {
    .pcShow {
      display: none; } }

.mbShow {
  display: none; }
  @media (max-width: 768px) {
    .mbShow {
      display: block; } }

.desktop {
  display: block; }
  @media (max-width: 414px) {
    .desktop {
      display: none; } }

.phone {
  display: none; }
  @media (max-width: 414px) {
    .phone {
      display: block; } }

/**/
.materiaBG {
  background-image: url("../img/bk_texture1.png");
  background-position: center center;
  background-repeat: repeat;
  position: relative; }

.historyBG {
  background-image: url("../img/bk_texture2.jpg");
  background-position: center center;
  background-repeat: repeat;
  position: relative; }

.mainKV {
  background-image: url("../img/1-1.png");
  background-position: center -100px;
  background-repeat: no-repeat;
  height: 70vh; }
  @media (max-width: 2100px) {
    .mainKV {
      height: 84vh; } }
  @media (max-width: 1600px) {
    .mainKV {
      background-size: cover;
      height: 80vh; } }
  @media (max-width: 1280px) {
    .mainKV {
      height: 50vh;
      background-position: center top; } }
  @media (max-width: 1024px) {
    .mainKV {
      background-position: center 0;
      height: 60vh; } }
  @media (max-width: 414px) {
    .mainKV {
      background-image: url("../img/1-1s.png");
      background-size: contain;
      height: 64vh; } }

.mainTitle {
  width: 390px;
  margin: 0 auto;
  padding: 80px 0 0 0; }
  @media (max-width: 1600px) {
    .mainTitle {
      width: 300px;
      padding: 40px 0 0 0; } }
  @media (max-width: 414px) {
    .mainTitle {
      width: 60%;
      padding: 60px 0 0 0; } }

.summary {
  width: 750px;
  margin: 0 auto; }
  @media (max-width: 1600px) {
    .summary {
      margin: 30px auto 0; } }
  @media (max-width: 768px) {
    .summary {
      width: calc(100% - 40px);
      margin: 20px auto 0; } }

.coltitle {
  font-size: 32px;
  font-weight: bold;
  color: #000000;
  margin-bottom: 20px; }
  .coltitle.alignC {
    text-align: center; }
  @media (max-width: 768px) {
    .coltitle {
      font-size: 28px;
      margin-bottom: 15px;
      text-align: center; } }

.coltext {
  line-height: 1.7; }

.aboveBox {
  clear: both;
  zoom: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 1200px;
  margin: 125px auto 0; }
  .aboveBox:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0; }
  @media (max-width: 1600px) {
    .aboveBox {
      margin: 80px auto 0; } }
  @media (max-width: 1200px) {
    .aboveBox {
      width: calc(100% - 40px); } }
  @media (max-width: 768px) {
    .aboveBox {
      display: block; } }

.aboveLeft {
  width: 695px;
  margin-right: 40px; }
  @media (max-width: 1024px) {
    .aboveLeft {
      width: 580px; } }
  @media (max-width: 768px) {
    .aboveLeft {
      width: 100%;
      margin-right: 0;
      margin-bottom: 25px; } }

.aboveRight {
  width: calc(100% - 735px); }
  @media (max-width: 1024px) {
    .aboveRight {
      width: calc(100% - 620px); } }
  @media (max-width: 768px) {
    .aboveRight {
      width: 100%; } }

/* sticky */
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0; }

.sticky:before,
.sticky:after {
  content: '';
  display: table; }

.scrollContainer {
  z-index: 6;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center; }

.stickyMaskTop {
  position: fixed;
  background-image: url(../img/bk_texture1.png);
  background-position: center center;
  background-repeat: repeat;
  left: 0;
  width: 100%;
  height: calc((100vh - 485px)/2);
  z-index: 5;
  overflow: hidden;
  display: none;
  top: 0; }
  @media (max-width: 1600px) {
    .stickyMaskTop {
      height: calc((100vh - 400px)/2); } }

.stickyMaskBottom {
  position: fixed;
  background-image: url(../img/bk_texture1.png);
  background-position: center center;
  background-repeat: repeat;
  left: 0;
  width: 100%;
  height: calc((100vh - 485px)/2);
  z-index: 5;
  overflow: hidden;
  display: none;
  bottom: 0; }
  @media (max-width: 1600px) {
    .stickyMaskBottom {
      height: calc((100vh - 400px)/2); } }

.stickyMaskTop.show,
.stickyMaskBottom.show {
  display: block; }

.stickyGo .stickLiver {
  display: block; }
  @media (max-width: 768px) {
    .stickyGo .stickLiver {
      display: none; } }

@media (max-width: 768px) {
  .stickyGo .stickyMobileBottom {
    display: block; } }

.stickyGo .rowLiver {
  background-color: transparent; }

.stickyMobileBottom {
  width: 100%;
  height: 47vh;
  background-color: #504c4c;
  position: fixed;
  z-index: 5;
  overflow: hidden;
  display: none;
  left: 0;
  bottom: 0; }

.stickLiver {
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  display: none;
  position: fixed; }
  .stickLiver::before {
    content: '';
    display: block;
    height: 485px;
    width: 100%;
    position: absolute;
    top: 50%;
    margin-top: -242.5px;
    left: 0;
    background-color: #504c4c; }
  @media (max-width: 768px) {
    .stickLiver {
      height: 100vh;
      transform: none; } }

.rowLiver {
  height: 485px;
  width: 100%;
  background-color: #504c4c; }
  @media (max-width: 1600px) {
    .rowLiver {
      height: 400px; } }
  @media (max-width: 768px) {
    .rowLiver {
      height: 100vh;
      background-color: transparent; } }

.liverImg {
  width: 685px;
  transform: translateY(100px);
  float: right;
  position: relative; }
  .liverImg img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 0.3s ease-in; }
  .liverImg img.show {
    opacity: 1; }
  @media (max-width: 1600px) {
    .liverImg {
      width: 500px; } }
  @media (max-width: 768px) {
    .liverImg {
      float: none;
      transform: none;
      width: 100%;
      margin: 0 auto; }
      .liverImg img {
        transform: translateY(90%); } }
  @media (max-width: 414px) {
    .liverImg img {
      transform: translateY(150%); } }

.finalFixBox {
  display: none;
  width: 370px;
  position: absolute;
  top: 110px;
  color: #ffffff; }
  .finalFixBox.show {
    display: block; }
  @media (max-width: 1600px) {
    .finalFixBox {
      width: 555px; } }
  @media (max-width: 1024px) {
    .finalFixBox {
      width: 370px; } }
  @media (max-width: 768px) {
    .finalFixBox {
      width: 100%; } }

.descBox {
  position: relative;
  z-index: 2;
  clear: both;
  zoom: 1; }
  .descBox:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0; }
  @media (max-width: 768px) {
    .descBox {
      background-color: #504c4c; } }

.debox {
  float: left;
  width: 370px; }
  .debox p {
    color: #ffffff; }
  @media (max-width: 1600px) {
    .debox {
      width: 555px; } }
  @media (max-width: 1024px) {
    .debox {
      width: 370px; } }
  @media (max-width: 768px) {
    .debox {
      float: none;
      width: 100%; }
      .debox.mbAhead {
        margin-top: -600px; } }

.dsxtitle {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px; }

.mbAhead .dsxtitle {
  padding-top: 50px; }

.scrollBlock {
  position: relative;
  height: 120px; }
  @media (max-width: 414px) {
    .scrollBlock {
      height: 60px; } }

.scrollbox {
  width: 100%;
  position: absolute;
  bottom: 0; }
  .scrollbox::before {
    content: 'scroll';
    position: absolute;
    color: #000000;
    bottom: -30px;
    left: 50%;
    margin-left: -25px; }
    @media (max-width: 414px) {
      .scrollbox::before {
        font-size: 0.875rem; } }

.scrollhint {
  width: 1px;
  height: 96px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  overflow: hidden; }
  .scrollhint .sline {
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(to bottom, black 50%, rgba(255, 255, 255, 0) 50%);
    background-position: 0 -96px;
    background-size: 100% 200%;
    -webkit-animation: scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
    animation: scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite; }
    @media (max-width: 414px) {
      .scrollhint .sline {
        width: 100%;
        height: 100%;
        display: block;
        background: linear-gradient(to bottom, black 50%, rgba(255, 255, 255, 0) 50%);
        background-position: 0 -48px;
        background-size: 100% 200%;
        -webkit-animation: scrolldown2 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
        animation: scrolldown2 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite; } }
  @media (max-width: 414px) {
    .scrollhint {
      height: 48px; } }

@-webkit-keyframes scrolldown {
  0% {
    background-position: 0 -96px; }
  75% {
    background-position: 0 0; }
  100% {
    background-position: 0 96px; } }

@keyframes scrolldown {
  0% {
    background-position: 0 -96px; }
  75% {
    background-position: 0 0; }
  100% {
    background-position: 0 96px; } }

@-webkit-keyframes scrolldown2 {
  0% {
    background-position: 0 -48px; }
  75% {
    background-position: 0 0; }
  100% {
    background-position: 0 48px; } }

@keyframes scrolldown2 {
  0% {
    background-position: 0 -48px; }
  75% {
    background-position: 0 0; }
  100% {
    background-position: 0 48px; } }

.scroll-space-aaa {
  height: 1500px; }
  @media (max-width: 2100px) {
    .scroll-space-aaa {
      height: 1000px; } }
  @media (max-width: 768px) {
    .scroll-space-aaa {
      height: 500px; } }

.scroll-space-bbb {
  height: 1200px; }
  @media (max-width: 2100px) {
    .scroll-space-bbb {
      height: 700px; } }
  @media (max-width: 768px) {
    .scroll-space-bbb {
      height: 500px; } }

.scroll-space-ccc {
  height: 1200px; }
  @media (max-width: 2100px) {
    .scroll-space-ccc {
      height: 700px; } }
  @media (max-width: 768px) {
    .scroll-space-ccc {
      height: 500px; } }

.scroll-space-l {
  height: 1500px; }
  @media (max-width: 2100px) {
    .scroll-space-l {
      height: 1000px; } }
  @media (max-width: 768px) {
    .scroll-space-l {
      height: 500px; } }

.scroll-space-b {
  height: 600px; }
  @media (max-width: 414px) {
    .scroll-space-b {
      height: 500px; } }

.scroll-space-m {
  height: 250px; }
  @media (max-width: 768px) {
    .scroll-space-m.beforeComp {
      height: 100px; } }
  @media (max-width: 768px) {
    .scroll-space-m.beforeComp {
      height: 50px; } }

/* comp */
.compWrapper {
  width: 1100px;
  clear: both;
  zoom: 1;
  position: relative; }
  .compWrapper:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0; }
  @media (max-width: 1100px) {
    .compWrapper {
      width: calc(100% - 40px); } }

.compContPadding {
  padding: 0 0 0 0; }
  @media (max-width: 1024px) {
    .compContPadding {
      padding: 0 0 0 0; } }
  @media (max-width: 1024px) {
    .compContPadding {
      padding: 0 0 25px 0; } }

.compFlex {
  display: flex;
  align-items: flex-end;
  justify-content: center; }

.compColumn {
  flex-direction: column; }

.compStyle1 {
  margin: 200px auto; }
  .compStyle1 p {
    margin-bottom: 0; }
  .compStyle1 .compTitle span::after {
    background-color: #cda38b; }
  .compStyle1 .compText {
    width: 380px; }
  .compStyle1 .compImg {
    margin-right: 55px; }
    .compStyle1 .compImg img {
      position: relative;
      z-index: 2;
      right: 50px;
      bottom: 50px; }
    .compStyle1 .compImg::before {
      content: '';
      display: block;
      height: 400px;
      width: 600px;
      background-color: #cda38b;
      position: absolute;
      bottom: 0;
      right: 0; }
      @media (max-width: 1024px) {
        .compStyle1 .compImg::before {
          width: 450px;
          height: 300px; } }
      @media (max-width: 768px) {
        .compStyle1 .compImg::before {
          width: calc(100vw - 65px);
          height: calc((100vw - 65px)*0.66); } }
  @media (max-width: 1024px) {
    .compStyle1 .compImg {
      margin-left: 55px; } }
  @media (max-width: 768px) {
    .compStyle1 {
      margin: 100px auto;
      flex-wrap: wrap-reverse; }
      .compStyle1 .compText {
        width: 290px; }
      .compStyle1 .compImg {
        margin-left: 20px;
        margin-right: 0;
        margin-top: 60px; }
        .compStyle1 .compImg img {
          bottom: 25px;
          right: 25px; } }
  @media (max-width: 414px) {
    .compStyle1 {
      margin: 80px auto; }
      .compStyle1 .compText {
        width: 100%; } }

.compStyle2 {
  margin: 200px auto; }
  .compStyle2 p {
    margin-bottom: 0; }
  .compStyle2 .compText {
    width: 380px; }
  .compStyle2 .compTitle span::after {
    background-color: #cebd91; }
  .compStyle2 .compImg {
    margin-left: 55px; }
    .compStyle2 .compImg img {
      position: relative;
      z-index: 2;
      left: 50px;
      top: 0; }
    .compStyle2 .compImg::before {
      content: '';
      display: block;
      height: 400px;
      width: 600px;
      position: absolute;
      background-color: #cebd91;
      left: 0;
      top: -50px; }
      @media (max-width: 1024px) {
        .compStyle2 .compImg::before {
          width: 450px;
          height: 300px; } }
      @media (max-width: 768px) {
        .compStyle2 .compImg::before {
          width: calc(100vw - 65px);
          height: calc((100vw - 65px)*0.66); } }
  @media (max-width: 768px) {
    .compStyle2 {
      margin: 100px auto;
      display: block; }
      .compStyle2 .compText {
        margin: 0 auto 50px;
        width: 290px; }
      .compStyle2 .compImg {
        margin-left: 0; }
        .compStyle2 .compImg img {
          left: 25px; }
        .compStyle2 .compImg::before {
          top: -25px; } }
  @media (max-width: 414px) {
    .compStyle2 {
      margin: 80px auto; }
      .compStyle2 .compText {
        width: 100%; } }

.compStyle3 {
  margin: 200px auto; }
  .compStyle3 p {
    margin-bottom: 0; }
  .compStyle3 .compTitle span::after {
    background-color: #cda38b; }
  .compStyle3 .compText {
    width: calc(100% - 815px); }
  @media (max-width: 768px) {
    .compStyle3 {
      margin: 100px auto;
      flex-wrap: wrap-reverse; }
      .compStyle3 .compText {
        width: 290px; } }
  @media (max-width: 414px) {
    .compStyle3 {
      margin: 80px auto; }
      .compStyle3 .compText {
        width: 100%; } }

.compStyle4 {
  margin: 200px auto; }
  .compStyle4 p {
    margin-bottom: 0; }
  .compStyle4 .compText {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 70px 0 0 0; }
  .compStyle4 .compTitle {
    margin-right: 60px; }
  .compStyle4 .compTitle span::after {
    background-color: #cebd91; }
  .compStyle4 .compSingle {
    position: relative; }
    .compStyle4 .compSingle img {
      position: relative;
      z-index: 2;
      left: 50px;
      bottom: 50px; }
    .compStyle4 .compSingle::before {
      content: '';
      display: block;
      height: 100%;
      width: 100%;
      background-color: #cebd91;
      position: absolute;
      left: 0;
      bottom: 0; }
  @media (max-width: 1024px) {
    .compStyle4 .compText {
      width: 100%;
      padding: 0 10%;
      box-sizing: border-box; } }
  @media (max-width: 768px) {
    .compStyle4 {
      margin: 100px auto;
      flex-wrap: wrap-reverse;
      flex-direction: row; }
      .compStyle4 .compText {
        display: block;
        width: 290px;
        padding: 0;
        margin: 0 0 50px 0; }
      .compStyle4 .compTitle {
        margin: 0 auto 25px; }
      .compStyle4 .compSingle img {
        position: relative;
        z-index: 2;
        left: 25px;
        bottom: 25px;
        width: calc(100% - 25px); }
      .compStyle4 .compSingle::before {
        left: -25px; } }
  @media (max-width: 414px) {
    .compStyle4 {
      margin: 80px auto; } }

@media (max-width: 768px) {
  .compStyle4.compFlex.compColumn.compWrapper {
    width: 100%; } }

.compImg {
  position: relative;
  height: 400px;
  width: 600px; }
  @media (max-width: 1024px) {
    .compImg {
      width: 450px;
      height: 300px; } }
  @media (max-width: 768px) {
    .compImg {
      width: calc(100vw - 65px);
      height: calc((100vw - 65px)*0.66); } }

.compSingle {
  width: 900px; }
  @media (max-width: 1024px) {
    .compSingle {
      width: 80%;
      margin: 0 auto; } }
  @media (max-width: 768px) {
    .compSingle {
      width: 100%; } }

.compTitle {
  position: relative;
  z-index: 2;
  margin-bottom: 55px;
  line-height: 1;
  display: block;
  font-size: 28px;
  font-weight: 400;
  color: #000000; }
  .compTitle span {
    position: relative;
    z-index: 2;
    display: inline-block; }
    .compTitle span::after {
      content: '';
      display: block;
      height: 12px;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: -1; }
  @media (max-width: 768px) {
    .compTitle {
      margin-bottom: 30px;
      font-size: 24px;
      text-align: center; } }

.compFrame {
  position: relative;
  width: 290px;
  padding: 30px 0; }
  .compFrame::before {
    content: '';
    background-image: url(../img/3-1.svg);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15px; }
  .compFrame::after {
    content: '';
    background-image: url(../img/3-2.svg);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 15px; }
  @media (max-width: 1024px) {
    .compFrame {
      margin: 0 auto; } }

.compTwin {
  padding: 0 45px 50px 100px;
  margin: 0 55px 0 0;
  display: inline-block;
  vertical-align: bottom;
  width: 750px;
  position: relative; }
  .compTwin img {
    display: inline-block;
    vertical-align: bottom;
    width: 280px;
    position: relative;
    z-index: 2; }
  .compTwin img:nth-of-type(1) {
    margin-right: 20px; }
  .compTwin::before {
    content: '';
    display: block;
    height: 85px;
    width: 100%;
    position: absolute;
    background-color: #cda38b;
    left: 0;
    bottom: 0; }
  @media (max-width: 1024px) {
    .compTwin {
      padding: 0 45px 50px 45px;
      width: 500px;
      text-align: center; }
      .compTwin img {
        width: 190px; } }
  @media (max-width: 768px) {
    .compTwin {
      padding: 0 0 16px 0;
      margin: 30px auto 0;
      width: calc(100% - 40px); }
      .compTwin img {
        width: calc(50% - 10px);
        display: block;
        float: left; }
      .compTwin::before {
        height: 46px; } }

/* carousel */
.carouselBG {
  background-color: #cda38b;
  padding: 100px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end; }
  @media (max-width: 768px) {
    .carouselBG {
      padding: 50px 20px;
      display: block; } }

.galleryRight {
  width: 1300px; }
  @media (max-width: 1600px) {
    .galleryRight {
      width: 1000px; } }
  @media (max-width: 1024px) {
    .galleryRight {
      width: 800px; } }
  @media (max-width: 768px) {
    .galleryRight {
      width: 100%; } }

.galleryLeft {
  width: 370px;
  margin: 0 80px 0 0; }
  @media (max-width: 1600px) {
    .galleryLeft {
      margin: 0 80px 0 0; } }
  @media (max-width: 1440px) {
    .galleryLeft {
      margin: 0 40px; } }
  @media (max-width: 1024px) {
    .galleryLeft {
      margin: 0 20px;
      width: calc(100% - 840px); } }
  @media (max-width: 768px) {
    .galleryLeft {
      width: 100%;
      margin: 0 0 20px 0;
      text-align: center; } }

.swiper {
  width: 100%;
  height: 285px; }
  @media (max-width: 768px) {
    .swiper {
      height: calc( (100vw - 40px)*0.66); } }

.mySwiper .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative; }
  @media (max-width: 768px) {
    .mySwiper .swiper-slide {
      height: calc( (100vw - 40px)*0.66); } }

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  cursor: pointer; }

.mySwiper .swiper-scrollbar {
  background: rgba(255, 255, 255, 0.5); }
  @media (max-width: 768px) {
    .mySwiper .swiper-scrollbar {
      display: none; } }

.mySwiper .swiper-scrollbar-drag {
  background: #ffffff; }

.mySwiper.swiper-horizontal > .swiper-scrollbar {
  left: 0;
  width: 100%; }

.btn-next {
  background-image: url(../img/arrow_right.svg);
  background-position: center center;
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -15px;
  z-index: 2;
  cursor: pointer; }

.btn-prev {
  background-image: url(../img/arrow_left.svg);
  background-position: center center;
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  position: absolute;
  left: 16px;
  top: 50%;
  margin-top: -15px;
  z-index: 2;
  cursor: pointer; }

.galleryBox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  align-items: center;
  justify-content: center; }
  .galleryBox.open {
    display: flex; }

.galleryCenter {
  width: 800px;
  height: 600px;
  position: relative;
  z-index: 6; }
  @media (max-width: 768px) {
    .galleryCenter {
      width: 100vw;
      height: 75vw; } }

.galleryInfo {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  text-align: center;
  color: #ffffff;
  background-color: #000000;
  z-index: 6; }

.galleryOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 5; }

.prev-photo {
  background-image: url(../img/arrow.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 50px;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 7;
  left: 20px; }
  .prev-photo.disabled {
    cursor: default;
    opacity: 0.5; }

.next-photo {
  background-image: url(../img/arrow.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 50px;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 7;
  transform: rotate(180deg);
  right: 20px; }
  .next-photo.disabled {
    cursor: default;
    opacity: 0.5; }

.closeGallery {
  background-image: url(../img/close.svg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 30px;
  top: 30px;
  z-index: 8; }

/* 貴賓們 */
.guestBlock {
  padding: 220px 0 200px 0; }
  @media (max-width: 1024px) {
    .guestBlock {
      padding: 110px 0 100px 0; } }
  @media (max-width: 414px) {
    .guestBlock {
      padding: 50px 0 0; } }

.circleFlex {
  display: flex;
  align-items: flex-start;
  justify-items: center;
  flex-wrap: wrap;
  width: 890px;
  margin: 50px auto 0; }
  @media (max-width: 768px) {
    .circleFlex {
      width: 100%;
      box-sizing: border-box;
      padding: 0 17px; } }
  @media (max-width: 414px) {
    .circleFlex {
      padding: 0;
      margin: 15px auto 0; } }

.circleBox {
  width: 20%;
  text-align: center;
  margin: 0 0 50px 0; }
  @media (max-width: 768px) {
    .circleBox {
      width: 50%; } }

.circleWrap {
  width: 130px;
  height: 130px;
  overflow: hidden;
  border-radius: 100%;
  position: relative;
  margin: 0 auto 15px; }
  .circleWrap img {
    position: relative;
    z-index: 1; }
  .circleWrap:before {
    content: '';
    display: block;
    border: 3px solid #3C3C3C;
    border-radius: 100%;
    position: absolute;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    left: 0;
    top: 0;
    z-index: 2; }

.thtitle {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  margin-bottom: 8px; }

.name {
  font-weight: bold;
  color: #a38767; }

/* cuiBox */
.cuiBlock {
  padding: 0 0 200px 0; }
  @media (max-width: 1024px) {
    .cuiBlock {
      padding: 0 0 100px 0; } }
  @media (max-width: 768px) {
    .cuiBlock {
      padding: 0 0 50px 0; } }

.cuiBox {
  margin-top: 150px;
  display: flex;
  align-items: flex-end;
  justify-content: center; }
  .cuiBox .left {
    margin-right: 75px; }
  @media (max-width: 1024px) {
    .cuiBox {
      padding: 0 40px;
      margin-top: 150px; } }
  @media (max-width: 768px) {
    .cuiBox {
      padding: 0;
      margin-top: 50px; }
      .cuiBox:nth-of-type(1) {
        margin-top: 25px; }
      .cuiBox .left {
        margin-right: 0; }
      .cuiBox.flexReverse {
        flex-wrap: wrap-reverse; }
      .cuiBox.flexWrap {
        flex-wrap: wrap; } }

.cuiWrap {
  width: 650px; }
  @media (max-width: 768px) {
    .cuiWrap {
      width: 100%; } }

.cuiDesc {
  width: 370px; }
  @media (max-width: 768px) {
    .cuiDesc {
      width: 100%; } }

.cuibefore {
  font-size: 32px; }
  @media (max-width: 768px) {
    .cuibefore {
      text-align: center;
      font-size: 24px; } }

.cuiTitle {
  width: 290px;
  margin: 12px 0 30px 0; }
  @media (max-width: 768px) {
    .cuiTitle {
      margin: 12px auto 30px; } }
  @media (max-width: 414px) {
    .cuiTitle {
      width: 200px;
      margin: 15px auto; } }

/* history */
.ribbon {
  margin-bottom: 80px; }
  @media (max-width: 414px) {
    .ribbon {
      margin-bottom: 30px; } }

.collection {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 75px 0 0 0; }
  .collection img {
    display: block;
    width: 850px;
    margin: 100px 0;
    position: relative;
    z-index: 2; }
  .collection:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -340px;
    background-color: #edd3c1;
    width: 680px;
    height: 100%; }
  @media (max-width: 768px) {
    .collection img {
      width: 100%;
      margin: 50px 0; }
    .collection:before {
      left: 0;
      margin-left: 0;
      width: 100%; } }
  @media (max-width: 414px) {
    .collection {
      margin: 25px 0 0 0; } }

/* 延伸閱讀 */
.relatedBlcok {
  padding: 96px 0; }
  @media (max-width: 1024px) {
    .relatedBlcok {
      padding: 50px 0; } }

.newsItems {
  clear: both;
  zoom: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap; }
  .newsItems:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0; }
  @media screen and (max-width: 414px) {
    .newsItems {
      padding: 0 0 32px 0; } }

.relateTitle {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  padding: 0 0 32px 0; }
  @media screen and (max-width: 414px) {
    .relateTitle {
      padding: 0 0 20px 0;
      font-size: 20px; } }

.itemBox {
  width: 300px;
  margin: 0 30px 50px 0; }
  .itemBox a:link {
    color: #232323; }
  .itemBox a:hover {
    color: #232323; }
  .itemBox a:active {
    color: #232323; }
  .itemBox a:visited {
    color: #232323; }
  .itemBox:nth-child(3n) {
    margin-right: 0; }
  .itemBox .wrap {
    height: 200px; }
  .itemBox img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }
  .itemBox .title {
    height: 60px;
    padding-top: 16px;
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
    font-weight: 400; }
  @media screen and (max-width: 768px) {
    .itemBox {
      width: calc((100% - 40px) / 3 - 10px); }
      .itemBox .wrap {
        height: calc(((100% - 40px) / 3 - 10px) * 0.66); } }
  @media screen and (max-width: 414px) {
    .itemBox {
      width: 100%;
      height: inherit;
      margin: 0 0 24px 0;
      clear: both;
      zoom: 1; }
      .itemBox:last-child {
        margin: 0; }
      .itemBox:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0; }
      .itemBox .wrap {
        width: 165px;
        height: 125px;
        float: left;
        margin-right: 14px; }
      .itemBox .title {
        float: left;
        width: calc(100% - 180px);
        height: inherit;
        line-height: 1.5;
        padding-top: 0; } }