/*!******************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./assets/css/chronology.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
.swiper-button-prev,
.swiper-button-next {
  width: 3.3125rem;
  height: 3.3125rem;
  border-radius: 3.125rem;
  background-image: url(../../assets/img/swiper_btn.png);
  background-size: contain;
  background-position: center center;
  -webkit-transition: background-image .3s ease-out;
  -o-transition: background-image .3s ease-out;
  transition: background-image .3s ease-out; }
  .swiper-button-prev:after,
  .swiper-button-next:after {
    font-size: 0; }
  .swiper-button-prev:hover,
  .swiper-button-next:hover {
    background-image: url(../../assets/img/swiper_btn_hover.png); }

.swiper-button-prev {
  margin-left: -6.25rem; }
  @media screen and (max-width: 950px) {
    .swiper-button-prev {
      margin-left: -1.875rem; } }
  @media screen and (max-width: 480px) {
    .swiper-button-prev {
      margin-left: -1.25rem; } }

.swiper-button-next {
  -webkit-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
          transform: scaleX(-1);
  margin-right: -6.25rem; }
  @media screen and (max-width: 950px) {
    .swiper-button-next {
      margin-right: -1.875rem; } }
  @media screen and (max-width: 480px) {
    .swiper-button-next {
      margin-right: -1.25rem; } }

.swiper-pagination-bullet {
  margin: 0 0.5rem !important; }

.swiper-pagination-bullet {
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid #fff;
  background-color: transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  opacity: .5; }

.swiper-pagination-bullet-active {
  background-color: #fff;
  opacity: 1; }

.ck_editor {
  font-size: 1.125rem;
  font-family: "微軟正黑體", "蘋果儷黑體", Arial, sans-serif, Verdana;
  line-height: 1.9; }
  .ck_editor h2 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.9375rem; }
  .ck_editor h3 {
    font-size: 1.375rem;
    line-height: 1.4;
    margin-bottom: 0.9375rem; }
  .ck_editor h4 {
    font-size: 1.125rem;
    line-height: 1.4;
    margin-bottom: 0.3125rem; }
  .ck_editor h5 {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.9; }
  .ck_editor p {
    margin-bottom: 1.25rem; }
  .ck_editor img {
    width: auto;
    max-width: 100%;
    display: inline-block; }
  .ck_editor ol {
    list-style: decimal;
    margin-left: 1.25rem;
    margin-bottom: 1.25rem; }
  .ck_editor ul {
    list-style: disc;
    margin-left: 1.25rem;
    margin-bottom: 1.25rem; }
  .ck_editor li {
    line-height: 1.9; }
  .ck_editor table {
    font-size: 16;
    border: 2px solid #666;
    margin: 0 auto 1.875rem; }
  .ck_editor th,
  .ck_editor td {
    border: 1px solid #666;
    padding: 0.3125rem 0.9375rem; }
  .ck_editor th {
    color: #fff;
    background: #444; }
  .ck_editor a {
    display: inline; }
    .ck_editor a::before {
      content: '';
      width: 100%;
      height: 1px;
      background: #222;
      position: absolute;
      bottom: 0;
      left: 0;
      -webkit-transition: opacity .2s ease-out;
      -o-transition: opacity .2s ease-out;
      transition: opacity .2s ease-out; }
    .ck_editor a:hover::before {
      opacity: 0; }
  .ck_editor iframe {
    width: 100%;
    height: 31.25rem;
    margin-bottom: 1.5625rem; }
    @media screen and (max-width: 480px) {
      .ck_editor iframe {
        height: 65vw; } }

.sec_chronology {
  padding: 6.25rem 0 9.375rem; }
  .sec_chronology .container_inner {
    max-width: 72.5rem; }

.maintitle_row {
  margin-bottom: 3.125rem; }

@media screen and (max-width: 950px) {
  .maintitle_en {
    font-size: 7.5rem; } }

@media screen and (max-width: 480px) {
  .maintitle_en {
    font-size: 5.3125rem; } }

.breadcrumbs {
  margin-bottom: 1.25rem; }

.chronology_controller {
  position: relative; }
  .chronology_controller:before {
    content: '';
    width: 100vw;
    height: 100%;
    background: #eee;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%); }

.chronology_swiper_controller {
  padding: 3.75rem 0;
  overflow: hidden; }
  @media screen and (max-width: 950px) {
    .chronology_swiper_controller {
      padding: 1.875rem 0 5.625rem;
      margin-left: -1.25rem;
      margin-right: -1.25rem; } }
  @media screen and (max-width: 480px) {
    .chronology_swiper_controller {
      margin-left: -0.625rem;
      margin-right: -0.625rem; } }
  .chronology_swiper_controller .swiper {
    height: 5.25rem;
    border-bottom: 0.0625rem solid #000;
    overflow: visible; }
  .chronology_swiper_controller .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    position: relative; }
  @media screen and (max-width: 950px) {
    .chronology_swiper_controller .swiper-button-prev,
    .chronology_swiper_controller .swiper-button-next {
      top: 100%;
      margin-top: -3.9375rem; } }

.chronology_year, .chronology_month {
  font-size: 4.375rem;
  font-family: "DM Serif Display", "Noto Serif TC";
  line-height: 1;
  padding-bottom: 0.875rem;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transform-origin: center 80%;
      -ms-transform-origin: center 80%;
          transform-origin: center 80%;
  -webkit-transition: -webkit-transform .3s ease-out;
  transition: -webkit-transform .3s ease-out;
  -o-transition: transform .3s ease-out;
  transition: transform .3s ease-out;
  transition: transform .3s ease-out, -webkit-transform .3s ease-out; }

.chronology_month {
  font-size: 3.625rem; }
  .chronology_month span {
    font-family: "微軟正黑體", "蘋果儷黑體", Arial, sans-serif, Verdana;
    font-size: 2.5rem;
    margin-left: 0.3125rem; }

.swiper-slide-thumb-active .chronology_year, .swiper-slide-thumb-active .chronology_month {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1); }

.swiper-slide-thumb-active .chronology_month {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1); }

.swiper-slide-thumb-active .point:before {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1); }

.swiper-slide-thumb-active .point::after {
  -webkit-transform: scaleY(1);
      -ms-transform: scaleY(1);
          transform: scaleY(1); }

.point {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0; }
  .point:before {
    content: '';
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 0.4375rem;
    background: #000;
    position: absolute;
    left: 50%;
    top: 0;
    margin-top: -0.1875rem;
    margin-left: -0.1875rem;
    -webkit-transform: scale(0.6);
        -ms-transform: scale(0.6);
            transform: scale(0.6);
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    -o-transition: transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out; }
  .point::after {
    content: '';
    width: 0.0625rem;
    height: 6.25rem;
    background: #000;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: scaleY(0);
        -ms-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: center top;
        -ms-transform-origin: center top;
            transform-origin: center top;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    -o-transition: transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out; }

.chronology_records {
  padding: 3.125rem 0; }

.chronology_row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 2.1875rem; }
  @media screen and (max-width: 950px) {
    .chronology_row {
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; } }

.datetime {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 15.625rem;
          flex: 0 0 15.625rem;
  font-size: 1.0625rem;
  font-weight: bold;
  text-align: right;
  white-space: nowrap; }
  @media screen and (max-width: 950px) {
    .datetime {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      text-align: left;
      font-size: 1.25rem;
      margin-bottom: 0.3125rem; } }
  @media screen and (max-width: 480px) {
    .datetime {
      font-size: 1.375rem; } }

.dash {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 6.25rem;
          flex: 0 0 6.25rem;
  width: 6.25rem;
  height: 0.0625rem;
  background: #000;
  margin: 0 1.25rem;
  margin-top: 0.6875rem; }
  @media screen and (max-width: 950px) {
    .dash {
      margin: 0 0.625rem;
      margin-top: 1.25rem; } }

.chronology_txt {
  min-width: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 1.0625rem;
  line-height: 1.8; }
  @media screen and (max-width: 950px) {
    .chronology_txt {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 100%;
              flex: 0 0 100%; } }
  @media screen and (max-width: 480px) {
    .chronology_txt {
      font-size: 1.1875rem; } }