@charset "UTF-8";
/* CSS Document */
@import url(../public/css/contentbuilder.css);
.itemList::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.hisTopBox .classic_m_List li::before, .hisTopBox .classic_m_List li::after, .hisTopBox .rectPrev,
.hisTopBox .rectNext, .hisTopBox .rectPrev::before,
.hisTopBox .rectNext::before, .hisTopBox .yearText, .itemList::before, .itemList::after, .itemList li::before, .itemList li .item {
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  transition: all .4s; }

/******文字******/
.contentBox .textEditor {
  display: block;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto; }
  @media (min-width: 1181px) {
    .contentBox .textEditor {
      margin: 55px auto;
      padding-bottom: 55px; } }
  @media (min-width: 641px) and (max-width: 1180px) {
    .contentBox .textEditor {
      margin: 40px auto; } }
  @media (max-width: 500px) {
    .contentBox .textEditor {
      margin-top: 30px; } }
  .contentBox .textEditor .txtList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0; }
    @media (max-width: 1180px) {
      .contentBox .textEditor .txtList {
        max-width: 700px;
        margin: 0 auto; } }
    .contentBox .textEditor .txtList > li {
      position: relative;
      padding-bottom: 5px; }
      @media (min-width: 1181px) {
        .contentBox .textEditor .txtList > li.size6 {
          -webkit-box-flex: 6;
          -ms-flex: 6;
          flex: 6; }
        .contentBox .textEditor .txtList > li.size5 {
          -webkit-box-flex: 5;
          -ms-flex: 5;
          flex: 5; } }
      @media (min-width: 641px) and (max-width: 1180px) {
        .contentBox .textEditor .txtList > li {
          width: 50%;
          margin-bottom: 50px; } }
      @media (max-width: 640px) {
        .contentBox .textEditor .txtList > li {
          width: 100%;
          margin-bottom: 50px;
          text-align: center; } }
      @media (min-width: 641px) and (max-width: 1180px) {
        .contentBox .textEditor .txtList > li:nth-of-type(even)::before {
          display: none; } }
      .contentBox .textEditor .txtList > li:not(:last-of-type)::before {
        content: '';
        position: absolute;
        top: 0;
        right: 30px;
        width: 1px;
        height: 100%;
        background-color: #d6d9da;
        -webkit-transform: rotate(17deg);
        -ms-transform: rotate(17deg);
        transform: rotate(17deg); }
        @media (max-width: 640px) {
          .contentBox .textEditor .txtList > li:not(:last-of-type)::before {
            top: calc(100% + 20px);
            right: 0;
            width: 100%;
            height: 2px;
            -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
            transform: rotate(0);
            opacity: 0.8; } }
      .contentBox .textEditor .txtList > li h3 {
        font-size: 40px;
        font-family: "Artegra Bold", "Poppins", "微軟正黑體", sans-serif;
        font-style: italic;
        color: #333f48; }
        @media (max-width: 640px) {
          .contentBox .textEditor .txtList > li h3 {
            font-size: 28px; } }
        .contentBox .textEditor .txtList > li h3 span {
          margin-left: 3px;
          font-size: 28px; }
        .contentBox .textEditor .txtList > li h3 b {
          margin-left: 3px;
          font-size: 32px;
          color: #ff671f; }
      .contentBox .textEditor .txtList > li p {
        padding-left: 5px;
        margin-top: 20px;
        font-size: 17px;
        font-family: "Artegra Medium", "Poppins", "微軟正黑體", sans-serif;
        line-height: 24px;
        color: #858c91; }
        @media (max-width: 580px) {
          .contentBox .textEditor .txtList > li p {
            margin-top: 10px; } }

/******類別******/
.hisTopBox {
  position: relative;
  width: 100%;
  padding-top: 80px;
  padding-bottom: 60px; }
  @media (min-width: 1451px) {
    .hisTopBox {
      max-width: 1000px;
      margin: 0 auto; } }
  @media (min-width: 1351px) and (max-width: 1450px) {
    .hisTopBox {
      max-width: 900px;
      margin-left: 150px; } }
  @media (min-width: 1251px) and (max-width: 1350px) {
    .hisTopBox {
      max-width: 800px;
      margin-left: 100px; } }
  @media (min-width: 1181px) and (max-width: 1250px) {
    .hisTopBox {
      max-width: 800px;
      margin-left: 50px; } }
  @media (max-width: 766px) {
    .hisTopBox {
      padding-top: 50px;
      padding-bottom: 45px;
      text-align: center; } }
  .hisTopBox::before {
    content: '';
    position: absolute;
    top: 0;
    right: -145px;
    width: 200%;
    height: 100%;
    background-color: #5c656d;
    -webkit-transform: skewX(-17deg);
    -ms-transform: skewX(-17deg);
    transform: skewX(-17deg); }
    @media (min-width: 1921px) {
      .hisTopBox::before {
        width: calc(1920px * 2); } }
  .hisTopBox h3 {
    position: relative;
    display: inline-block;
    font-size: 40px;
    font-family: "Artegra Bold", "Poppins", "微軟正黑體", sans-serif;
    font-weight: 400;
    font-style: italic;
    color: #fff;
    letter-spacing: 0;
    border-bottom: 2px solid #fff; }
    @media (min-width: 481px) and (max-width: 766px) {
      .hisTopBox h3 {
        font-size: 36px; } }
    @media (max-width: 480px) {
      .hisTopBox h3 {
        font-size: 30px; } }
  .hisTopBox .txtExp {
    position: relative;
    margin-top: 20px;
    font-size: 17px;
    font-family: "Artegra Medium", "Poppins", "微軟正黑體", sans-serif;
    font-style: italic;
    color: #d6d9da; }
  .hisTopBox .classic_m_List {
    position: relative;
    z-index: 1;
    margin-top: 20px;
    margin-left: -70px;
    margin-right: -70px; }
    .hisTopBox .classic_m_List::before {
      content: '';
      position: absolute;
      top: 54px;
      right: -59px;
      z-index: -1;
      width: 200%;
      height: 4px;
      background-color: #d6d9da;
      -webkit-transform: skewX(-17deg);
      -ms-transform: skewX(-17deg);
      transform: skewX(-17deg); }
      @media (min-width: 1921px) {
        .hisTopBox .classic_m_List::before {
          width: calc(1920px * 2); } }
    .hisTopBox .classic_m_List li {
      position: relative;
      display: inline-block;
      padding: 80px 10px 0;
      text-align: center; }
      .hisTopBox .classic_m_List li::before, .hisTopBox .classic_m_List li::after {
        content: '';
        position: absolute;
        left: 50%;
        height: 35px;
        background-color: #d6d9da;
        -webkit-transform: rotate(17deg);
        -ms-transform: rotate(17deg);
        transform: rotate(17deg); }
      .hisTopBox .classic_m_List li::before {
        top: 40px;
        width: 1px; }
      .hisTopBox .classic_m_List li::after {
        top: -40px;
        left: calc(50% + 20px);
        width: 2px;
        height: 60px;
        background-color: #fff;
        opacity: 0; }
      .hisTopBox .classic_m_List li a {
        position: relative;
        display: block;
        font-size: 15px;
        font-family: "Artegra Bold", "Poppins", "微軟正黑體", sans-serif;
        color: #d6d9da;
        line-height: 60px; }
        .hisTopBox .classic_m_List li a::before, .hisTopBox .classic_m_List li a::after {
          content: '';
          position: absolute;
          border-radius: 50%;
          opacity: 0;
          -webkit-transform: scale(0);
          -ms-transform: scale(0);
          transform: scale(0); }
        .hisTopBox .classic_m_List li a::before {
          top: -36px;
          left: calc(50% - 13px);
          width: 24px;
          height: 24px;
          border: 1px solid rgba(255, 255, 255, 0.3); }
        .hisTopBox .classic_m_List li a::after {
          top: -30px;
          left: calc(50% - 7px);
          width: 14px;
          height: 14px;
          background-color: #fff; }
      .hisTopBox .classic_m_List li:hover a {
        color: #ff671f; }
      .hisTopBox .classic_m_List li.current::before {
        opacity: 0;
        -webkit-transition: all 0s;
        -o-transition: all 0s;
        transition: all 0s; }
      .hisTopBox .classic_m_List li.current::after {
        top: 0;
        left: calc(50% + 6px);
        opacity: 1; }
      .hisTopBox .classic_m_List li.current a {
        font-size: 50px;
        letter-spacing: .5px;
        color: #ff671f; }
        @media (max-width: 400px) {
          .hisTopBox .classic_m_List li.current a {
            font-size: 36px; } }
        .hisTopBox .classic_m_List li.current a::before, .hisTopBox .classic_m_List li.current a::after {
          opacity: 1;
          -webkit-transform: scale(1);
          -ms-transform: scale(1);
          transform: scale(1);
          -webkit-animation: bounceIn .7s ease;
          animation: bounceIn .7s ease; }
  .hisTopBox .rectPrev,
  .hisTopBox .rectNext {
    margin: 0 10px 0 0; }
    .hisTopBox .rectPrev::before,
    .hisTopBox .rectNext::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #858c91;
      -webkit-transform: skewX(-17deg);
      -ms-transform: skewX(-17deg);
      transform: skewX(-17deg); }
    .hisTopBox .rectPrev:hover::before,
    .hisTopBox .rectNext:hover::before {
      background-color: #ff671f; }
    .hisTopBox .rectPrev span,
    .hisTopBox .rectNext span {
      -webkit-transform: rotate(5deg);
      -ms-transform: rotate(5deg);
      transform: rotate(5deg); }
      .hisTopBox .rectPrev span::before,
      .hisTopBox .rectNext span::before {
        top: calc(50% - 1px);
        right: calc(50% - 3px);
        width: 5px;
        height: 12px; }
      .hisTopBox .rectPrev span::after,
      .hisTopBox .rectNext span::after {
        bottom: calc(50% - 1px);
        right: calc(50% - 3px);
        width: 5px;
        height: 12px; }
    .hisTopBox .rectPrev.disabled,
    .hisTopBox .rectNext.disabled {
      cursor: auto;
      opacity: .2; }
      .hisTopBox .rectPrev.disabled::before,
      .hisTopBox .rectNext.disabled::before {
        background-color: #858c91; }
      .hisTopBox .rectPrev.disabled span::before, .hisTopBox .rectPrev.disabled span::after,
      .hisTopBox .rectNext.disabled span::before,
      .hisTopBox .rectNext.disabled span::after {
        background-color: #d6d9da; }
  .hisTopBox .rectNext {
    position: absolute;
    top: 100px;
    right: -80px; }
    @media (min-width: 767px) and (max-width: 1180px) {
      .hisTopBox .rectNext {
        right: 0; } }
    @media (max-width: 766px) {
      .hisTopBox .rectNext {
        top: auto;
        bottom: 100px;
        right: 40px; } }
    @media (min-width: 361px) and (max-width: 500px) {
      .hisTopBox .rectNext {
        right: 0; } }
    @media (max-width: 360px) {
      .hisTopBox .rectNext {
        right: -20px; } }
    .hisTopBox .rectNext span::before {
      top: auto;
      bottom: calc(50% - 1px); }
    .hisTopBox .rectNext span::after {
      bottom: auto;
      top: calc(50% - 1px); }
  .hisTopBox .rectPrev {
    position: absolute;
    top: 100px;
    right: 0; }
    @media (min-width: 767px) and (max-width: 1180px) {
      .hisTopBox .rectPrev {
        right: 80px; } }
    @media (max-width: 766px) {
      .hisTopBox .rectPrev {
        top: auto;
        bottom: 100px;
        right: auto;
        left: 50px; } }
    @media (min-width: 361px) and (max-width: 500px) {
      .hisTopBox .rectPrev {
        left: 10px; } }
    @media (max-width: 360px) {
      .hisTopBox .rectPrev {
        left: -10px; } }
  .hisTopBox .yearText {
    position: absolute;
    top: calc(100% + 30px);
    left: calc(100% - 200px);
    font-size: 190px;
    font-family: "Artegra Bold", "Poppins", "微軟正黑體", sans-serif;
    font-style: italic;
    color: rgba(234, 235, 236, 0.5);
    line-height: 1;
    letter-spacing: 0;
    word-wrap: normal;
    word-break: normal; }
    @media (min-width: 1401px) and (max-width: 1600px) {
      .hisTopBox .yearText {
        left: calc(100% - 300px);
        font-size: 170px; } }
    @media (min-width: 1351px) and (max-width: 1400px) {
      .hisTopBox .yearText {
        left: calc(100% - 300px);
        font-size: 150px; } }
    @media (min-width: 1251px) and (max-width: 1350px) {
      .hisTopBox .yearText {
        left: calc(100% - 200px);
        font-size: 150px; } }
    @media (min-width: 1181px) and (max-width: 1250px) {
      .hisTopBox .yearText {
        left: calc(100% - 150px);
        font-size: 120px; } }
    @media (min-width: 769px) and (max-width: 1180px) {
      .hisTopBox .yearText {
        left: auto;
        top: calc(100% + 60px);
        right: 0;
        font-size: 120px; } }
    @media (max-width: 768px) {
      .hisTopBox .yearText {
        display: none; } }

@-webkit-keyframes yearTextIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes yearTextIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  20% {
    -webkit-transform: scale3d(1.9, 1.9, 1.9);
    transform: scale3d(1.9, 1.9, 1.9); }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.5, 1.5, 1.5);
    transform: scale3d(1.5, 1.5, 1.5); }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97); }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  20% {
    -webkit-transform: scale3d(1.9, 1.9, 1.9);
    transform: scale3d(1.9, 1.9, 1.9); }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.5, 1.5, 1.5);
    transform: scale3d(1.5, 1.5, 1.5); }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97); }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

/******列表******/
.hisBtmBox {
  position: relative;
  width: 100%;
  max-width: 1020px;
  min-height: 20vh;
  margin: 0 auto;
  padding-top: 50px;
  overflow: hidden; }
  @media (min-width: 767px) {
    .hisBtmBox {
      padding-top: 100px; } }
  .hisBtmBox .classicListBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none; }
    .hisBtmBox .classicListBox.current {
      position: relative;
      opacity: 1;
      visibility: visible;
      pointer-events: auto; }

.itemList {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-top: 30px;
  padding-bottom: 80px;
  margin-left: -60px;
  margin-right: -60px; }
  .itemList::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% - 1px);
    width: 3px;
    height: calc(100% + 20px);
    background-color: rgba(92, 101, 109, 0.3);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, rgba(92, 101, 109, 0.3)), to(rgba(92, 101, 109, 0)));
    background: -webkit-linear-gradient(top, rgba(92, 101, 109, 0.3) 70%, rgba(92, 101, 109, 0) 100%);
    background: -o-linear-gradient(top, rgba(92, 101, 109, 0.3) 70%, rgba(92, 101, 109, 0) 100%);
    background: linear-gradient(to bottom, rgba(92, 101, 109, 0.3) 70%, rgba(92, 101, 109, 0) 100%); }
  .itemList::after {
    content: '';
    position: absolute;
    top: -9px;
    left: calc(50% - 4px);
    width: 9px;
    height: 9px;
    background-color: #fff;
    border: 2px solid rgba(133, 140, 145, 0.85);
    border-radius: 50%; }
  .itemList li {
    position: relative;
    padding: 0 60px 80px;
    padding-bottom: 0; }
    @media (min-width: 767px) {
      .itemList li + li {
        padding-top: 80px; } }
    @media (max-width: 766px) {
      .itemList li {
        margin-top: 30px;
        margin-bottom: 20px; } }
    .itemList li::before {
      content: '';
      position: absolute;
      top: 137px;
      left: -8px;
      width: 17px;
      height: 17px;
      background-color: #ff671f;
      border-radius: 50%; }
      @media (max-width: 766px) {
        .itemList li::before {
          top: -8px;
          left: calc(50% - 9px);
          z-index: 1; } }
    .itemList li .item {
      position: relative;
      padding: 35px;
      background-color: #eff0f1;
      border-radius: 3px; }
      @media (max-width: 400px) {
        .itemList li .item {
          padding: 30px 25px 25px; } }
      .itemList li .item::before {
        content: '';
        position: absolute;
        top: 35px;
        left: -15px;
        z-index: -1;
        width: 65px;
        height: 65px;
        background-color: #eff0f1;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg); }
        @media (max-width: 766px) {
          .itemList li .item::before {
            display: none; } }
      .itemList li .item::after {
        content: '';
        position: absolute;
        top: 66px;
        left: -60px;
        z-index: -2;
        width: 70px;
        height: 1px;
        background-color: rgba(92, 101, 109, 0.18); }
        @media (max-width: 766px) {
          .itemList li .item::after {
            display: none; } }
    @media (min-width: 767px) {
      .itemList li:first-of-type::before {
        top: 57px; }
      .itemList li:nth-of-type(even) {
        top: 35px; }
      .itemList li:nth-of-type(odd)::before {
        left: auto;
        right: -9px; }
      .itemList li:nth-of-type(odd) .item::before {
        left: auto;
        right: -15px; }
      .itemList li:nth-of-type(odd) .item::after {
        left: auto;
        right: -60px; } }
    .itemList li .Txt h3 {
      margin-bottom: 15px;
      font-size: 22px;
      font-family: "Artegra Bold", "Poppins", "微軟正黑體", sans-serif;
      font-weight: normal;
      line-height: 32px; }
    .itemList li .Txt .txtExp {
      padding-left: 3px;
      line-height: 26px; }
    .itemList li .Txt img {
      display: block;
      max-width: 100%; }
  .itemList::before, .itemList::after {
    opacity: 0; }
  .itemList::before {
    height: 0; }
  .itemList li::before {
    opacity: 0; }
  .itemList li .item {
    opacity: 0; }
    @media (min-width: 767px) {
      .itemList li .item {
        -webkit-transform: translateX(-50px);
        -ms-transform: translateX(-50px);
        transform: translateX(-50px); } }
    @media (max-width: 766px) {
      .itemList li .item {
        -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
        transform: translateY(50px); } }
  @media (min-width: 767px) {
    .itemList li:nth-of-type(odd) .item {
      -webkit-transform: translateX(50px);
      -ms-transform: translateX(50px);
      transform: translateX(50px); } }

.classicListBox.current .itemList::before, .classicListBox.current .itemList::after {
  opacity: 1;
  -webkit-transition-delay: .1s;
  -o-transition-delay: .1s;
  transition-delay: .1s; }

.classicListBox.current .itemList::before {
  height: calc(100% + 20px);
  -webkit-transition: height .8s .1s ease;
  -o-transition: height .8s .1s ease;
  transition: height .8s .1s ease; }

.classicListBox.current .itemList li::before {
  opacity: 1;
  -webkit-transition-delay: .3s;
  -o-transition-delay: .3s;
  transition-delay: .3s; }

.classicListBox.current .itemList li .item {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: .4s;
  -o-transition-delay: .4s;
  transition-delay: .4s; }

.classicListBox.current .itemList li:nth-of-type(even)::before {
  -webkit-transition-delay: .4s;
  -o-transition-delay: .4s;
  transition-delay: .4s; }