/* ======================================================= */
/* 大事記css */
/* ======================================================= */


.right.no_left .wrap{

}

.right_contentBg{
    display: flex;
    flex-direction: column;
    gap: clamp(3.3872rem, 5.4688vw, 6.5625rem) 0; /* 54.20px , 5.4688vw , 105.00px */
}








    
    .timeline {
      position: relative;
      max-width: 56.25rem; /*900*/
      max-width: 66.875rem; /*1070*/
      margin: auto;
      /* padding: 2rem 0; */
      display: flex;
      flex-direction: column;
      /* gap: 70px 0; */
      row-gap:  clamp(3.2259rem, 5.2083vw, 6.2500rem); /* 51.61px , 5.2083vw , 100.00px */
      color: var(--dark_color);
    }

    .timeline-item {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      position: relative;
    }
    .timeline-item:last-child{
        position: relative;
    }
     .timeline-item:last-child::before{
        position: absolute;
        content: "";
        width: 38px;
        height: calc(100% + 0px);
        background-color: #ffffff;
        left: 50%;
        top: calc(100% + -5px);
        transform: translateX(-50%);
    }

    .timeline-item .content,
    .timeline-item .year {
      /* width: 40%; */
      width: clamp(calc((100% - 1.8750rem) / 2  - 1.5625rem), calc((100% - 2.3438vw) / 2  - 1.5625rem), calc((100% - 2.8125rem) / 2  - 1.5625rem)); /* 最小值 30.00px、大小約 2.3438vw、最大值 45.00px */
    }

        .timeline-item .content ul{
            padding-left: 1.625rem; /*26*/
        }
            /* .timeline-item .content li{
            } */
			.timeline-item .content li{
				font-size: inherit;
        color: inherit;
        list-style-image: url('../../../images/title_icon.svg');
			}



    .timeline-item .icon {
      width: clamp(1.875rem, 2.3438vw, 2.8125rem); /* 30px , 2.3438vw , 45.00px */
      aspect-ratio: 1;
      background-color: #fff;
      /* border: 2px solid var(--primary_color); */
      border: 1px solid rgb(70, 70, 70);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      position: relative;
      z-index: 2;
    }
    .timeline-item .icon img{
      width: 55%;
      height: auto;
    }

    .timeline-item.odd {
      flex-direction: row-reverse;
      text-align: right;
    }

    .timeline-item.even {
      flex-direction: row;
      text-align: left;
    }

    .timeline-item .year {
      font-size: clamp(1.6130rem, 2.6042vw, 3.125rem); /* 25.81px , 2.6042vw , 50.00px */
      font-weight: bold;
      font-family: var(--foreign_font);
      color: var(--primary_color);
    }

    .timeline-item .content {
      font-size: 1rem;
      line-height: 1.6;
      text-align: left;
    }





/*動畫預設樣式------------------------*/
.timeline-item {
  /* opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease; */
}

/* .timeline-item.active_animate_down {
  opacity: 1;
  transform: translateY(0);
} */

/* .timeline_line {
  height: 0; 
  transition: height 0.3s ease;
  z-index: 0;
}*/
  .timeline_line{
      position: absolute;
      left: 50%;
      top: clamp(1.875rem, 2.3438vw, 2.8125rem); /* 30px , 2.3438vw , 45.00px */
      bottom: 0;
      width: 0.125rem;
      height: 100%;
      background: var(--dark_color_third);
      transform: translateX(-50%);
  }














/* 在螢幕寬度大於991時，套用這裡的特定樣式 */
@media screen and (min-width: 991px) {


    .timeline-item:nth-of-type(2n){

    }
    .timeline-item:nth-of-type(2n+1){
       flex-direction: row-reverse;
    }

    .timeline_line{
        position: absolute;
        left: 50%;
        top: clamp(1.875rem, 2.3438vw, 2.8125rem); /* 30px , 2.3438vw , 45.00px */
        bottom: 0;
        width: 0.125rem;
        background: var(--dark_color_third);
        transform: translateX(-50%);
    }

    .timeline-item:nth-of-type(2n) .year{
      text-align: right;
    }


}





@media (max-width: 990px) {

        
    .timeline {
      margin: 0;
      max-width: unset;
      row-gap:clamp(1.2904rem, 2.0833vw, 2.5000rem); /* 20.65px , 2.0833vw , 40.00px */
    }

    .timeline_line{
        position: absolute;
        left: calc((1.875rem / 2) - 1px); /*(30 / 2)*/
        top: 2px;
        bottom: unset;
        width: 0.125rem;
        height: 100%;
        background: var(--dark_color_third);
        transform: translateX(0%);
        
        /* height: 0; */
    }   


     .timeline-item:last-child::before{
        left: 0;
        height: calc(100% + 5px);
        transform: translateX(0%);
        top: calc(0% + 0px);
        width: 25px;
    }

    .timeline-item {
        flex-direction: column;
        justify-content: unset;
        padding-left:clamp(2.2581rem, 3.6458vw, 4.3750rem); /* 36.13px , 3.6458vw , 70.00px */
        row-gap: .9375rem; /*15*/
    }

    .timeline-item .year,
    .timeline-item .content {
        width: auto;
    }

    .timeline-item .year {
      /*font-size:clamp(1.5625rem, 1.8229vw, 2.1875rem); *//* 25px , 1.8229vw , 35.00px */
      font-size:1.875rem; /*30*/
    }
    .timeline-item .content {
    
    }

    .timeline-item .icon {
        /* margin: 1rem 0; */
        order: -2;
        position: absolute;
        left: 0;
        width: 1.875rem;
    }


}