@charset "UTF-8";
.kv {
  position: relative;
  z-index: 1;
  width: 100%; }
  .kv .kv-inner {
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    height: 20.64583em;
    background: #ffffff url("../images/page/kv/bgm.jpg") left top no-repeat;
    background-size: auto 100%; }

@media (min-width: 992px) {
  .kv .kv-inner {
    height: 22.5em;
    background: #ffffff url("../images/page/kv/bg.jpg") left top no-repeat;
    background-size: auto 100%; } }
.sec-inner > .short {
  position: relative;
  padding-top: 3.22591em; }
  .sec-inner > .short span {
    color: #fff;
    font-size: 2.5em; }
.sec-inner > .cat {
  padding-top: 4.2253em; }
  .sec-inner > .cat a {
    margin: 0 0.32259em; }
  .sec-inner > .cat img {
    width: 20.3125em; }
    .sec-inner > .cat img:nth-child(1) {
      display: block; }
    .sec-inner > .cat img:nth-child(2) {
      display: none; }
  .sec-inner > .cat .active img:nth-child(1) {
    display: none; }
  .sec-inner > .cat .active img:nth-child(2) {
    display: block; }

@media (max-width: 991px) {
  .sec-inner > .short {
    width: 90%;
    margin: 0 auto; } }
@media (min-width: 992px) {
  .sec-inner > .short {
    text-align: center;
    padding-top: 3.125em; } }
@media (min-width: 992px) {
  .sec-inner > .short span {
    font-size: 1.375em; } }
@media (min-width: 992px) {
  .sec-inner > .cat {
    padding-top: 3.4375em; } }
@media (min-width: 992px) {
  .sec-inner > .cat a {
    margin: 0 1.25em; } }
@media (min-width: 992px) {
  .sec-inner > .cat img {
    width: 16.25em; } }
.selected-content {
  position: relative; }

.upid-select {
  position: relative;
  width: 100%;
  z-index: 3;
  padding-top: 3.9375em; }
  .upid-select .select-wrap {
    display: none;
    position: relative;
    width: 55.48568em; }
    .upid-select .select-wrap.active {
      display: block; }
  .upid-select .select-btn {
    position: relative;
    width: 100%;
    height: 7.5em;
    border-radius: 3.75em;
    background: url("../images/index/select2.png") right center no-repeat;
    background-size: auto 100%;
    padding-left: 1.75em; }
    .upid-select .select-btn span {
      color: #aa9e6a;
      padding-right: 0.25em;
      font-size: 3em; }
    .upid-select .select-btn:hover {
      cursor: pointer; }
  .upid-select .select-list {
    overflow: hidden;
    display: none;
    position: absolute;
    background: #684b2d;
    margin-top: 0.75em;
    top: 7.5em;
    width: 100%;
    height: 41.25em;
    border-radius: 3.75em; }
    .upid-select .select-list .select-list-inner {
      position: absolute;
      width: 98%;
      height: 90%;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto auto;
      overflow-y: scroll;
      scrollbar-width: thin;
      padding-left: 0.7097em;
      padding-right: 0.32259em; }
      .upid-select .select-list .select-list-inner ul {
        list-style: none;
        margin: 0;
        padding: 0; }
        .upid-select .select-list .select-list-inner ul li {
          padding-left: 0.7097em;
          padding-top: 0.875em;
          padding-bottom: 0.875em;
          border-bottom: 1px solid #c29f5b; }
          .upid-select .select-list .select-list-inner ul li span {
            padding-right: 0.25em;
            color: #fff;
            font-size: 3em; }
          .upid-select .select-list .select-list-inner ul li:hover {
            cursor: pointer; }

@media (min-width: 992px) {
  .upid-select {
    padding-top: 2.625em; } }
@media (min-width: 992px) {
  .upid-select .select-wrap {
    width: 48.75em; } }
@media (min-width: 992px) {
  .upid-select .select-btn {
    height: 3.125em;
    border-radius: 1.5625em; } }
@media (max-width: 991px) {
  .upid-select .select-btn {
    border: 1px solid #aa9e6a; } }
@media (min-width: 992px) {
  .upid-select .select-btn {
    background: url("../images/index/select.png") left top no-repeat;
    background-size: 100% auto; } }
@media (min-width: 992px) {
  .upid-select .select-btn span {
    font-size: 1.625em; } }
@media (min-width: 992px) {
  .upid-select .select-list {
    margin-top: 0.25em;
    top: 3.125em;
    height: 23.75em;
    border-radius: 1.5625em; } }
@media (min-width: 992px) {
  .upid-select .select-list .select-list-inner {
    padding-left: 0.6875em;
    padding-right: 0.3125em; } }
@media (min-width: 992px) {
  .upid-select .select-list .select-list-inner ul li {
    padding-left: 0.6875em;
    padding-top: 0.4375em;
    padding-bottom: 0.4375em; } }
@media (min-width: 992px) {
  .upid-select .select-list .select-list-inner ul li span {
    font-size: 1.375em; } }
.upid-select-b {
  padding-top: 0m;
  position: fixed;
  top: 9.87129em;
  z-index: -1;
  visibility: hidden; }

@media (min-width: 992px) {
  .upid-select-b {
    padding-top: 0em;
    top: 9.5625em; } }
body.upid-select-fixed .upid-select-a {
  visibility: hidden; }
body.upid-select-fixed .upid-select-b {
  z-index: 3;
  visibility: visible; }

.upid-content {
  position: relative;
  width: 55.48568em;
  padding-top: 2.25814em;
  padding-bottom: 2.25814em;
  margin-left: auto;
  margin-right: auto; }

@media (min-width: 992px) {
  .upid-content {
    width: 99.25em;
    padding-top: 2.1875em;
    padding-bottom: 2.1875em; } }
.upid-content-inner {
  position: relative;
  background: url("../images/index/linear-gradient_m_02.png") left top no-repeat;
  background-size: 100% 100%; }
  .upid-content-inner .sub1 img, .upid-content-inner .sub2 img {
    width: 39.375em; }

@media (min-width: 992px) {
  .upid-content-inner {
    background: url("../images/index/linear-gradient_02.png") left top no-repeat;
    background-size: 100% 100%; } }
@media (min-width: 992px) {
  .upid-content-inner .sub1 img {
    width: 26.25em; } }
@media (max-width: 991px) {
  .upid-content-inner .sub2 {
    padding-top: 3.75em; } }
@media (min-width: 992px) {
  .upid-content-inner .sub2 img {
    width: 26.25em; } }
.content-list {
  padding-top: 2.25814em;
  padding-bottom: 2.25814em; }
  .content-list > ul {
    margin: 0 auto;
    padding-left: 1.61296em;
    padding-right: 1.61296em; }
    .content-list > ul > li {
      margin: 0;
      padding-top: 1.59375em;
      padding-bottom: 1.125em; }
      .content-list > ul > li > div:nth-child(1) span.lang-tw {
        font-weight: bold;
        font-size: 3em; }
      .content-list > ul > li > div:nth-child(1) span.lang-en {
        font-weight: bold;
        font-size: 2.4375em; }
      .content-list > ul > li > div:nth-child(2) span.lang-tw {
        color: #ffffff;
        font-size: 3em; }
      .content-list > ul > li > div:nth-child(2) span.lang-en {
        color: #ffffff;
        font-size: 2.4375em; }
      .content-list > ul > li > div:nth-child(3) .tag-img {
        width: 1.35488em;
        height: 1.74199em; }
      .content-list > ul > li > div:nth-child(3) .tag {
        padding-right: 2.25em; }
      .content-list > ul > li > div:nth-child(3) span.lang-tw, .content-list > ul > li > div:nth-child(3) span.lang-en {
        font-size: 2.4375em; }

@media (min-width: 992px) {
  .content-list {
    padding-top: 2.1875em;
    padding-bottom: 2.1875em; } }
@media (min-width: 992px) {
  .content-list > ul {
    padding-left: 3.125em;
    padding-right: 3.125em; } }
@media (min-width: 992px) {
  .content-list > ul > li {
    padding-top: 1.0625em;
    padding-bottom: 0.75em; } }
@media (max-width: 991px) {
  .content-list > ul > li > div:nth-child(1) {
    line-height: 1.2; } }
@media (min-width: 992px) {
  .content-list > ul > li > div:nth-child(1) {
    width: 15.625em;
    padding-left: 0.75em; } }
@media (min-width: 992px) {
  .content-list > ul > li > div:nth-child(1) span.lang-tw {
    font-size: 1.625em; } }
@media (min-width: 992px) {
  .content-list > ul > li > div:nth-child(1) span.lang-en {
    font-size: 1.375em; } }
@media (max-width: 991px) {
  .content-list > ul > li > div:nth-child(2) {
    padding-top: 1.03229em;
    padding-bottom: 1.03229em; } }
@media (min-width: 992px) {
  .content-list > ul > li > div:nth-child(2) {
    width: 50.9375em;
    padding-left: 0.25em; } }
@media (min-width: 992px) {
  .content-list > ul > li > div:nth-child(2) span.lang-tw {
    font-size: 1.625em; } }
@media (min-width: 992px) {
  .content-list > ul > li > div:nth-child(2) span.lang-en {
    font-size: 1.375em; } }
@media (min-width: 992px) {
  .content-list > ul > li > div:nth-child(3) {
    width: 22.8125em; } }
@media (min-width: 992px) {
  .content-list > ul > li > div:nth-child(3) .tag-img {
    width: 1.25em;
    height: 1.5625em; } }
@media (min-width: 992px) {
  .content-list > ul > li > div:nth-child(3) .tag {
    padding-right: 0.5em; } }
@media (min-width: 992px) {
  .content-list > ul > li > div:nth-child(3) span.lang-tw {
    font-size: 1.375em; } }
@media (min-width: 992px) {
  .content-list > ul > li > div:nth-child(3) span.lang-en {
    font-size: 1.375em; } }
.content-list-a > ul > li:hover {
  cursor: pointer;
  opacity: 0.85; }
.content-list-a > ul > li:not(:last-child) {
  border-bottom: 1px solid #684b2d; }
.content-list-a > ul > li > div:nth-child(1) span {
  color: #c29f5b; }
.content-list-a > ul > li > div:nth-child(3) span {
  color: #aa9e6a; }

.content-list-b {
  padding-top: 1.29036em;
  padding-bottom: 2.25814em; }
  .content-list-b > ul > li:hover {
    cursor: pointer;
    opacity: 0.85; }
  .content-list-b > ul > li:not(:last-child) {
    border-bottom: 1px solid #999999; }
  .content-list-b > ul > li > div:nth-child(1) span, .content-list-b > ul > li > div:nth-child(3) span {
    color: #999999; }

@media (min-width: 992px) {
  .content-list-b {
    padding-top: 1.25em;
    padding-bottom: 2.1875em; } }
.popup {
  display: none;
  position: fixed;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  background: #000; }
  .popup .part {
    overflow-y: scroll; }
  .popup .box {
    position: relative;
    width: 59.35677em; }
    .popup .box .top-bar {
      position: relative;
      padding-top: 1.03125em;
      padding-bottom: 1.03125em; }
      .popup .box .top-bar a img {
        width: 9.65625em;
        height: 3.46875em; }
    .popup .box .bg1 {
      position: relative;
      width: 100%;
      overflow: hidden;
      border-radius: 2.19362em; }
    .popup .box .bg2 {
      position: relative;
      width: 100%;
      min-height: 55.09857em; }
    .popup .box .content {
      position: relative;
      margin-left: auto;
      margin-right: auto;
      width: 55.29212em;
      padding-top: 3.29043em;
      padding-bottom: 3.29043em; }
    .popup .box .pic {
      position: relative; }
      .popup .box .pic .logo, .popup .box .pic .photo {
        position: relative; }
    .popup .box .txt {
      padding-top: 1.93555em;
      padding-bottom: 1.93555em;
      padding-left: 0.64518em;
      padding-right: 0.64518em; }
      .popup .box .txt .txt1 {
        line-height: 1.2;
        font-weight: bold; }
        .popup .box .txt .txt1 .lang-tw {
          font-size: 3em; }
        .popup .box .txt .txt1 .lang-en {
          font-size: 2.4375em; }
      .popup .box .txt .txt2 .lang-tw {
        padding-top: 1em;
        font-size: 2.4375em;
        padding-top: 1.03229em; }
      .popup .box .txt .txt2 .lang-en {
        padding-top: 0.5em;
        font-size: 2.4375em; }
      .popup .box .txt td {
        vertical-align: top; }
    .popup .box .info {
      padding-left: 0.64518em;
      padding-right: 0.64518em; }
      .popup .box .info .txt1 {
        font-weight: bold;
        padding-top: 1.93555em; }
        .popup .box .info .txt1 .lang-tw, .popup .box .info .txt1 .lang-en {
          font-size: 2.4375em; }
      .popup .box .info .txt2 {
        font-weight: bold; }
        .popup .box .info .txt2 .lang-tw, .popup .box .info .txt2 .lang-en {
          font-size: 2.0625em; }
      .popup .box .info .txt3 {
        font-weight: bold; }
        .popup .box .info .txt3 .lang-tw, .popup .box .info .txt3 .lang-en {
          font-size: 2.0625em; }

@media (min-width: 992px) {
  .popup .box {
    width: 71.25em; } }
@media (min-width: 992px) {
  .popup .box .top-bar {
    padding-top: 0.6875em;
    padding-bottom: 0.6875em; } }
@media (min-width: 992px) {
  .popup .box .top-bar a img {
    width: 6.4375em;
    height: 2.3125em; } }
@media (min-width: 992px) {
  .popup .box .bg1 {
    border-radius: 2.125em; } }
@media (min-width: 992px) {
  .popup .box .bg2 {
    min-height: 54em; } }
@media (min-width: 992px) {
  .popup .box .content {
    width: 63.75em; } }
@media (min-width: 992px) {
  .popup .box .content {
    padding-top: 3.1875em;
    padding-bottom: 3.1875em; } }
@media (max-width: 991px) {
  .popup .box .pic .logo {
    width: 18.64577em;
    height: 18.64577em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5625em; } }
@media (min-width: 992px) {
  .popup .box .pic .logo {
    width: 18.0625em;
    height: 18.0625em;
    margin-left: 0.625em;
    margin-right: 3.6875em; } }
@media (max-width: 991px) {
  .popup .box .pic .photo {
    width: 50.9694em;
    height: 34.00111em;
    margin-left: auto;
    margin-right: auto; } }
@media (min-width: 992px) {
  .popup .box .pic .photo {
    width: 37.5em;
    height: 25em;
    margin-left: 0.625em;
    margin-right: 3.6875em; } }
@media (min-width: 992px) {
  .popup .box .txt {
    padding-top: 1.875em;
    padding-bottom: 1.875em; } }
@media (min-width: 992px) {
  .popup .box .txt {
    padding-left: 0.625em;
    padding-right: 0.625em; } }
@media (min-width: 992px) {
  .popup .box .txt .txt1 .lang-tw {
    font-size: 1.625em; } }
@media (min-width: 992px) {
  .popup .box .txt .txt1 .lang-en {
    font-size: 1.375em; } }
@media (min-width: 992px) {
  .popup .box .txt .txt2 .lang-tw {
    font-size: 1.125em; } }
@media (min-width: 992px) {
  .popup .box .txt .txt2 .lang-en {
    font-size: 1.125em; } }
@media (min-width: 992px) {
  .popup .box .info {
    padding-left: 0.625em;
    padding-right: 0.625em; } }
@media (min-width: 992px) {
  .popup .box .info .txt1 {
    padding-top: 1.875em; } }
@media (min-width: 992px) {
  .popup .box .info .txt1 .lang-tw {
    font-size: 1.625em; } }
@media (min-width: 992px) {
  .popup .box .info .txt1 .lang-en {
    font-size: 1.625em; } }
@media (min-width: 992px) {
  .popup .box .info .txt2 .lang-tw {
    font-size: 1.375em; } }
@media (min-width: 992px) {
  .popup .box .info .txt2 .lang-en {
    font-size: 1.375em; } }
@media (min-width: 992px) {
  .popup .box .info .txt3 .lang-tw {
    font-size: 1.375em; } }
@media (min-width: 992px) {
  .popup .box .info .txt3 .lang-en {
    font-size: 1.375em; } }
.popup1 .bg1 {
  background: #fff url("../images/popup/a/bgm1.jpg") center top no-repeat;
  background-size: 100% auto; }
  .popup1 .bg1 .bg2 {
    background: url("../images/popup/a/bgm2.jpg") center bottom no-repeat;
    background-size: 100% auto; }
.popup1 .txt {
  border-bottom: 1px solid #684b2d; }
  .popup1 .txt .txt1, .popup1 .txt .txt1 a {
    color: #a37b2c; }
.popup1 .info .txt1, .popup1 .info .txt2, .popup1 .info .txt3, .popup1 .info .txt1 a, .popup1 .info .txt2 a, .popup1 .info .txt3 a {
  color: #a37b2c; }

@media (min-width: 992px) {
  .popup1 .bg1 {
    background: #fff url("../images/popup/a/bg1.jpg") center top no-repeat;
    background-size: 100% auto; } }
@media (min-width: 992px) {
  .popup1 .bg1 .bg2 {
    background: url("../images/popup/a/bg2.jpg") center bottom no-repeat;
    background-size: 100% auto; } }
.popup2 .bg1 {
  background: #fff url("../images/popup/b/bgm1.jpg") center top no-repeat;
  background-size: 100% auto; }
  .popup2 .bg1 .bg2 {
    background: url("../images/popup/b/bgm2.jpg") center bottom no-repeat;
    background-size: 100% auto; }
.popup2 .txt {
  border-bottom: 1px solid #684b2d; }
  .popup2 .txt .txt1, .popup2 .txt .txt1 a {
    color: #3c4b8d; }
.popup2 .info .txt1, .popup2 .info .txt2, .popup2 .info .txt3, .popup2 .info .txt1 a, .popup2 .info .txt2 a, .popup2 .info .txt3 a {
  color: #3c4b8d; }

@media (min-width: 992px) {
  .popup2 .bg1 {
    background: #fff url("../images/popup/b/bg1.jpg") center top no-repeat;
    background-size: 100% auto; } }
@media (min-width: 992px) {
  .popup2 .bg1 .bg2 {
    background: url("../images/popup/b/bg2.jpg") center bottom no-repeat;
    background-size: 100% auto; } }
.popup .info-item-logo img {
  max-width: 50vw; }

.stage {
  position: relative;
  text-align: center; }
  .stage span {
    color: transparent;
    /* 文字顏色設為透明 */
    background-image: linear-gradient(45deg, #a7652c 0%, #dbbd6b 35%, #b7a05f 75%, #6a320d 100%);
    background-clip: text;
    /* 將背景剪裁至文字區域 */
    font-weight: bold; }

@media (max-width: 991px) {
  .stage {
    padding-top: 5.16146em; } }
@media (min-width: 992px) {
  .stage {
    padding-top: 5em; } }
@media (max-width: 991px) {
  .stage span {
    font-size: 3.87109em; } }
@media (min-width: 992px) {
  .stage span {
    font-size: 3.75em; } }