@charset "utf-8";
/* --.i_newsIMGTXT1：首頁消息，第一則圖文，其餘文字 */
.i_newsIMGTXT1 {}
.i_newsIMGTXT1 .item {

}

.i_newsIMGTXT1 .IMG > span,
.i_newsIMGTXT1 .IMG {
  display: block;
  aspect-ratio: 16 / 9;      /* 你要的橫圖比例，可改 4/3、3/2 */
  overflow: hidden;
}

.i_newsIMGTXT1 .item a {}
.i_newsIMGTXT1 .item:hover a {}
.i_newsIMGTXT1 .IMG {}
.i_newsIMGTXT1 .IMG > span {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}
.i_newsIMGTXT1 .IMG > img {}

.i_newsIMGTXT1 .TXT {}
.i_newsIMGTXT1 .TXT .date {}
.i_newsIMGTXT1 .TXT .category {}
.i_newsIMGTXT1 .TXT .s_more {}



.i_newsIMGTXT1 > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}
.i_newsIMGTXT1 .n_L, .i_newsIMGTXT1 .n_R {width: calc(50% - 15px);}

.i_newsIMGTXT1 .n_L {}
.i_newsIMGTXT1 .n_L .item {}
.i_newsIMGTXT1 .n_L .item .IMG {}
.i_newsIMGTXT1 .n_L .item:hover .IMG {
    
}
.i_newsIMGTXT1 .n_L .item .TXT {
    padding-top: 1.5rem;
}

.i_newsIMGTXT1 .n_R {}
.i_newsIMGTXT1 .n_R .item {
    padding-bottom: 0.785rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px dashed var(--bs-gray-500);
}
.i_newsIMGTXT1 .n_R .item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}
.i_newsIMGTXT1 .n_R .item > a {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    transition: 0.35s;
}
.i_newsIMGTXT1 .n_R .item:hover > a {

}

.i_newsIMGTXT1 .n_R .item .IMG {
    width: 215px;
}
.i_newsIMGTXT1 .n_R .item .IMG > span {
    min-height: 115px;
}
.i_newsIMGTXT1 .n_R .item .TXT {
    width: calc(100% - 215px);
    padding: 1.5rem 0 0.35rem 1.5rem;
}
.i_newsIMGTXT1 .n_R .TXT h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dateCategory {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
    line-height: 1;
}
.dateCategory p {
    margin: 0;
    display: inline-flex;
}
.dateCategory .yC {
    align-items: center;
    justify-content: center;
    background-color: var(--bs-gray-400);
    color: #fff;
    border-radius: var(--bs-border-radius);
    padding: 0.375rem 1rem 0.35rem;
    font-size: 0.8rem;
    transition: background 0.25s;
}
.item:hover .dateCategory .yC {
    background-color: var(--hoverC2);
}
.dateCategory .category {}
.dateCategory .year {
    font-family: sans-serif;
    padding-right: 1rem;
    position: relative;
    top: 1.5px;
}
.dateCategory .year::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 0.25rem;
    width: 0.45rem;
    height: 1px;
    background-color: #fff;
}
.dateCategory .mD {
    width: 115px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.dateCategory .month, .dateCategory .day {
    font-family: fantasy, sans-serif;
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--transparentW7);
    -webkit-text-stroke: 0.25px var(--bs-gray-400);
    position: relative;
    bottom: -3px;
    width: 45px;
    display: flex;
    justify-content: center;
    transition: 0.25s;
}
.item:hover .dateCategory .month, .item:hover .dateCategory .day {
    color: var(--hoverC2);
    -webkit-text-stroke: 0.25px #fff;
}
.dateCategory .line {
    width: 7px;
    height: 2px;
    background-color: var(--bs-gray-500);
    position: relative;
    top: 6px;
    margin: 0 0.225rem 0 0.15rem;
    opacity: 0.65;
    transition: background 0.25s;
}
.item:hover .dateCategory .line {background-color: var(--hoverC2);}

.dateCategory .c-name {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-gray-400);
    color: #fff;
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
    padding: 0.375rem 1rem 0.35rem 1.25rem;
    font-size: 0.8rem;
    position: relative;
    left: -1.25rem;
    transition: 0.25s;
}
.item:hover .dateCategory .c-name {
    background-color: var(--hoverC2);
}
.dateCategory .YMD {
    font-family: sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1;
    color: var(--bs-gray-400);
    -webkit-text-stroke: 0.25px var(--transparentW7);
    display: flex;
    justify-content: center;
    transition: 0.25s;
}
.item:hover .dateCategory .YMD {
    color: var(--hoverC2);
}
.dateCategory .YMD .y {}
.dateCategory .YMD .m {}
.dateCategory .YMD .d {}
.dateCategory .YMD > span {}

@media (max-width: 1199px) {
.i_newsIMGTXT1 .n_R .item .IMG {
display: none;
}
.i_newsIMGTXT1 .n_R .item .TXT {
    width: 100%;
    padding: 0 0 0.35rem;
}
}

@media (max-width: 991px) {
.i_newsIMGTXT1 .n_L, .i_newsIMGTXT1 .n_R {width: 100%;}
.i_newsIMGTXT1 .n_R {
    padding-top: 3rem;
}
.i_newsIMGTXT1 .n_R .item {
    padding-bottom: 1.25rem;
    margin-bottom: 1.65rem;
    border-bottom: 1px dashed var(--bs-gray-500);
}
.i_newsIMGTXT1 .n_R .item:last-child {
    padding-bottom: 1.25rem;
    border-bottom: 1px dashed var(--bs-gray-500);
}
.i_newsIMGTXT1 .n_R .item .TXT {
    padding: 0;
}
.dateCategory .yC {
    flex-direction: column;
    border-radius: var(--bs-border-radius);
    padding: 0.65rem 0.8rem 0.5rem;
}
.dateCategory {
    justify-content: flex-start;
    flex-direction: row;
}
.dateCategory .year {
    padding-right: 1.25rem;
    padding-bottom: 0.15rem;
    top: 0;
}
.dateCategory .year::after {
    right: 0;
}
.dateCategory .mD {
    width: 105px;
    justify-content: flex-end;
    padding-bottom: 0.35rem;
}
.dateCategory .line {
    top: 1px;
}
.dateCategory .month, .dateCategory .day {
    font-size: 1.85rem;
    bottom: 0;
        width: 40px;
}
}

/* --.web-iP2 #imgTxt-list：內頁所有消息列表圖文顯示(右圖左文) */
.web-iP2 #imgTxt-list {margin: 0;}
.web-iP2 #imgTxt-list .item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 1.5rem 0 0;
    padding: 0;
    border: none;
}
.web-iP2 #imgTxt-list .item:first-child {margin: 0;}
.web-iP2 #imgTxt-list .item .IMG {
    width: 35%;
    align-items: flex-start;
}
.web-iP2 #imgTxt-list .item .TXT {
    width: calc(65% - 0.75rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}
.web-iP2 #imgTxt-list .dateCategory {
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    padding-bottom: 0;
}
.web-iP2 #imgTxt-list .dateCategory .c-name {
    border-radius: var(--bs-border-radius);
    left: 0;
}
.web-iP2 #imgTxt-list .dateCategory .c-name, .web-iP2 #imgTxt-list .dateCategory .YMD {
    padding: 0.475rem 1rem 0.375rem;
}

.web-iP2 #imgTxt-list .item .TXT h4 {
    text-align: justify;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

@media (max-width: 480px) {
.web-iP2 #imgTxt-list {margin: 0;}
.web-iP2 #imgTxt-list .item .IMG {width: 100%;}
.web-iP2 #imgTxt-list .item .TXT {
width: 100%;
padding: 1rem 0 0;
}
.web-iP2 #imgTxt-list .item .TXT h4 {margin-top: 0.45rem;}
}

/* --.web-iP3 #imgTxt-list：內頁所有消息列表圖文顯示(上圖下文) */

/* 讓列表用 grid，欄數由 --cols 控制 */
.web-iP3 #imgTxt-list{
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}

/* grid 情況下 item 不要再寫死 width */
.web-iP3 #imgTxt-list .item{
  width: auto;
}

.web-iP3 #imgTxt-list .item .IMG {
        margin-bottom: 1.5rem;
}
.web-iP3 #imgTxt-list .item .TXT {
    padding: 0 0.75rem 0.5rem;
}
.web-iP3 #imgTxt-list .dateCategory {
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    padding-bottom: 0;
    position: relative;
}
.web-iP3 #imgTxt-list .dateCategory .yC {}
.web-iP3 #imgTxt-list .dateCategory .yC .year {}
.web-iP3 #imgTxt-list .dateCategory .yC .category {}
.web-iP3 #imgTxt-list .dateCategory .mD {}
.web-iP3 #imgTxt-list .dateCategory .mD .month {}
.web-iP3 #imgTxt-list .dateCategory .mD .line {}
.web-iP3 #imgTxt-list .dateCategory .mD .day {}
.web-iP3 #imgTxt-list .item .TXT h4 {
    text-align: justify;
}

@media (min-width: 481px) {
.web-iP3 #imgTxt-list .item .TXT h4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
}

@media (max-width: 1400px) {
.web-iP3 #imgTxt-list .item {width: calc((100% / 2) - 0.5rem);}
}

@media (max-width: 480px) {
.web-iP3 #imgTxt-list {margin: 0;}
.web-iP3 #imgTxt-list .item {width: 100%;}
}