@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap");
* {
  font-family: 微軟正黑體;
  letter-spacing: 1.5px; }

a {
  text-decoration: none;
  color: black; }

@keyframes fade {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-down {
  0% {
    opacity: 0;
    transform: translate(0, -5%); }
  100% {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes slide-fade1 {
  0% {
    transform: translate(-10%, 0);
    opacity: 0; }
  100% {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes shakeleft {
  0% {
    opacity: 0.5;
    margin-left: -3%; }
  50% {
    margin-left: -5%;
    opacity: 1; }
  100% {
    opacity: 0.5;
    margin-left: -3%; } }

@keyframes shakeright {
  0% {
    transform: translate(0, 0); }
  50% {
    transform: translate(10%, 0); }
  100% {
    transform: translate(0, 0); } }

.fade-enter, .fade-leave-to {
  opacity: 0; }

.fade-enter-active, .fade-leave-active {
  transition: all 0.5s ease; }

.whiteFade-enter, .whiteFade-leave-to {
  opacity: 0; }

.whiteFade-enter-active {
  transition: all 1s ease; }

.rightIn-enter {
  transform: translateX(10%);
  opacity: 0; }

.rightIn-leave-to {
  opacity: 0; }

.rightIn-enter-active {
  transition: all 0.8s ease; }

.noEnterFade-enter, .noEnterFade-leave-to {
  opacity: 0; }

.noEnterFade-leave-active {
  transition: all 0.5s ease; }

.noLeaveFade-enter, .noLeaveFade-leave-to {
  opacity: 0; }

.noLeaveFade-enter-active {
  transition: all 0.5s ease; }

.loadingfade-leave-to {
  opacity: 0; }

.loadingfade-leave-active {
  transition: all 0.5s ease; }

.slide {
  width: 100%;
  height: 100%;
  height: 860px;
  position: relative;
  box-sizing: border-box; }
  @media all and (max-width: 1800px) {
    .slide {
      height: 600px; } }
  @media all and (max-width: 1200px) {
    .slide {
      height: 600px; } }
  @media all and (max-width: 900px) {
    .slide {
      height: 400px; } }
  @media all and (max-width: 610px) {
    .slide {
      height: 650px; } }
  .slide .slideBlock {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row; }
    @media all and (max-width: 610px) {
      .slide .slideBlock {
        display: flex;
        flex-direction: column-reverse; } }
    .slide .slideBlock .slideArti {
      width: 24.5%;
      height: 100%;
      background-color: #DFDFDF;
      box-sizing: border-box;
      position: relative;
      padding: 350px 0 0 0;
      display: flex;
      flex-direction: column;
      align-items: center; }
      @media all and (max-width: 1800px) {
        .slide .slideBlock .slideArti {
          padding: 200px 0 0 0; } }
      @media all and (max-width: 1200px) {
        .slide .slideBlock .slideArti {
          padding: 250px 0 0 0; } }
      @media all and (max-width: 900px) {
        .slide .slideBlock .slideArti {
          padding: 70px 0 0 0; } }
      @media all and (max-width: 610px) {
        .slide .slideBlock .slideArti {
          height: 50%;
          padding: 30px 0;
          width: 100%; } }
      .slide .slideBlock .slideArti .slideArtiTitleBlock {
        width: 80%;
        /* height: 25%; */
        box-sizing: border-box;
        position: relative;
        /* overflow: hidden; */
        text-overflow: ellipsis;
        /* white-space: nowrap; */
        display: flex;
        flex-direction: column; }
        @media all and (max-width: 1200px) {
          .slide .slideBlock .slideArti .slideArtiTitleBlock {
            width: 80%;
            height: 23%; } }
        @media all and (max-width: 900px) {
          .slide .slideBlock .slideArti .slideArtiTitleBlock {
            width: 80%;
            height: 18%; } }
        @media all and (max-width: 610px) {
          .slide .slideBlock .slideArti .slideArtiTitleBlock {
            height: 30%; } }
        .slide .slideBlock .slideArti .slideArtiTitleBlock .slideArtiTitle {
          width: 100%;
          margin-bottom: 10px;
          position: relative;
          font-size: 35px;
          /* overflow: hidden; */
          text-overflow: ellipsis;
          /* white-space: nowrap; */
          font-weight: bold;
          letter-spacing: 5px; }
          @media all and (max-width: 1200px) {
            .slide .slideBlock .slideArti .slideArtiTitleBlock .slideArtiTitle {
              font-size: 30px; } }
          @media all and (max-width: 900px) {
            .slide .slideBlock .slideArti .slideArtiTitleBlock .slideArtiTitle {
              font-size: 20px; } }
          @media all and (max-width: 610px) {
            .slide .slideBlock .slideArti .slideArtiTitleBlock .slideArtiTitle {
              font-size: 25px; } }
        .slide .slideBlock .slideArti .slideArtiTitleBlock .slideArtiSubTitle {
          width: 100%;
          height: 40%;
          margin-bottom: 10px;
          position: relative;
          font-size: 25px;
          letter-spacing: 3px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap; }
          @media all and (max-width: 1200px) {
            .slide .slideBlock .slideArti .slideArtiTitleBlock .slideArtiSubTitle {
              font-size: 20px; } }
          @media all and (max-width: 900px) {
            .slide .slideBlock .slideArti .slideArtiTitleBlock .slideArtiSubTitle {
              font-size: 15px; } }
          @media all and (max-width: 610px) {
            .slide .slideBlock .slideArti .slideArtiTitleBlock .slideArtiSubTitle {
              font-size: 18px; } }
      .slide .slideBlock .slideArti .slideArtiText {
        position: relative;
        width: 80%;
        color: #707070;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 10;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        line-height: 30px;
        letter-spacing: 1px;
        font-size: 15px; }
        @media all and (max-width: 1800px) {
          .slide .slideBlock .slideArti .slideArtiText {
            -webkit-line-clamp: 8; } }
        @media all and (max-width: 1500px) {
          .slide .slideBlock .slideArti .slideArtiText {
            -webkit-line-clamp: 8;
            font-size: 15px; } }
        @media all and (max-width: 1200px) {
          .slide .slideBlock .slideArti .slideArtiText {
            line-height: 22px;
            font-size: 13px;
            letter-spacing: 2px;
            -webkit-line-clamp: 10; } }
        @media all and (max-width: 900px) {
          .slide .slideBlock .slideArti .slideArtiText {
            line-height: 22px; } }
        @media all and (max-width: 610px) {
          .slide .slideBlock .slideArti .slideArtiText {
            line-height: 25px;
            -webkit-line-clamp: 7;
            font-size: 13px; } }
    .slide .slideBlock .slidePic {
      width: 75.5%;
      min-height: 100%;
      position: relative; 
    width:100%;
    background-size:cover;
    background-position: center center;

  }
      @media all and (max-width: 610px) {
        .slide .slideBlock .slidePic {
          width: 100%;
          /*min-height: 50%;*/
          
         } }
      .slide .slideBlock .slidePic .slidePrev {
        width: 2vw;
        height: 2vw;
        position: absolute;
        top: 50%;
        left: 2%;
        margin-top: -1vw;
        background: url("../assets/slide/prev.png");
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        cursor: pointer; }
        @media all and (max-width: 610px) {
          .slide .slideBlock .slidePic .slidePrev {
            width: 25px;
            height: 25px; } }
      .slide .slideBlock .slidePic .slideNext {
        width: 2vw;
        height: 2vw;
        position: absolute;
        top: 50%;
        left: 95%;
        margin-top: -1vw;
        background: url("../assets/slide/next.png");
        cursor: pointer;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat; }
        @media all and (max-width: 610px) {
          .slide .slideBlock .slidePic .slideNext {
            width: 25px;
            height: 25px;
            left: 92%; } }
      .slide .slideBlock .slidePic .slideDot {
        /*display: flex;
        flex-direction: row;
        width: 100%;
        min-height: 100%;
        align-items: flex-end;
        justify-content: center;
        box-sizing: border-box;*/
        /*padding: 0 0 25px 0; */
        display: flex;
        width:100%;
        /*height: 100%;*/
      justify-content: center;
      align-items:flex-end;
      position: absolute;
      bottom:20px;
      }
        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
          .slide .slideBlock .slidePic .slideDot {
            position: relative;
            margin-top: 55%;
            min-height: 0; } }
        .slide .slideBlock .slidePic .slideDot .Dot {
          width: 15px;
          height: 15px;
          background-color: #fff;
          margin-left: 0.5vw;
          border-radius: 100px; 
          cursor: pointer;}
          @media all and (max-width: 1200px) {
            .slide .slideBlock .slidePic .slideDot .Dot {
              margin-left: 10px; } }
          @media all and (max-width: 900px) {
            .slide .slideBlock .slidePic .slideDot .Dot {
              width: 10px;
              height: 10px; } }
          @media all and (max-width: 610px) {
            .slide .slideBlock .slidePic .slideDot .Dot {
              width: 10px;
              height: 10px;
              margin-left: 10px; } }
          .slide .slideBlock .slidePic .slideDot .Dot.active {
            background-color: Black; }