/*--blog--*/
.blog-section {
  background: #0d0d0d; /* 採用第二份 CSS 的背景色 */
  padding: 70px 0; /* 統一與其他部分的間距 */
}

.blog-section h3 {
  color: #ffffff;
  font-family: 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
  font-weight: 700;
  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 35px;
  text-align: center;
  position: relative;
}

.blog-section h3:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background: #c20000; /* 採用第二份 CSS 的主題色 */
}

.blog {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 40px;
  background: transparent; /* 移除原藍色背景，與第二份 CSS 風格一致 */
}

.blog-text,
.blog-text.two,
.welcome-img,
.blog-img.two {
  flex: 1 1 100%; /* 預設全寬，供小螢幕使用 */
  padding: 0 15px; /* 內邊距與 Bootstrap一致 */
  box-sizing: border-box;
}

/* 文字區塊樣式 */
.blog-text,
.blog-text.two {
  background: transparent; /* 移除原藍色背景 */
  text-align: left;
  padding: 20px 0;
}

.blog-text h5,
.blog-text.two h5 {
  color: #c4c4c4; /* 採用第二份 CSS 的次要文字色 */
  font-size: 14px;
  font-style: italic;
  font-family: 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
  margin-bottom: 10px;
}

.blog-text a h4,
.blog-text.two a h4 {
  color: #ffa011; /* 採用第二份 CSS 的主要文字色 */
  font-size: 20px;
  font-weight: 700;
  font-family: 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
  text-transform: uppercase;
  line-height: 28px;
  text-decoration: none;
  transition: color 0.3s;
}

.blog-text a h4:hover,
.blog-text.two a h4:hover {
  color: #c20000; /* 懸停時使用主題色 */
}

.blog-text p,
.blog-text.two p {
  font-size: 16px;
  line-height: 24px;
  color: #c4c4c4;
  font-family: 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
  margin-bottom: 0;
}

/* 圖片區塊樣式 */
.welcome-img,
.blog-img.two {
  position: relative;
  overflow: hidden;
}

.welcome-img img,
.blog-img.two img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.75s ease-out;
}

.welcome-img img:hover,
.blog-img.two img:hover {
  transform: scale(1.15); /* 保留原縮放效果 */
}

/* 圖片區塊樣式 */
.welcome-img2,
.blog-img2.two {
  position: relative;
  overflow: hidden;
}

.welcome-img2 img,
.blog-img2.two img {
  width: 100px;
  height: 100px;
  display: block;
  transition: transform 0.75s ease-out;
}

.welcome-img2 img:hover,
.blog-img2.two img:hover {
  transform: scale(1.35); /* 保留原縮放效果 */
}

.welcome-img2 a {
  all: unset;              /* 移除所有預設樣式 */
  display: contents;       /* 讓 <a> 不影響排版，只保留功能 */
  pointer-events: auto;    /* 確保仍可點擊 */
}

.welcome-img2 img {
  outline: none;
  border: none;
}


/* 標籤樣式 */
a.mask {
  display: block;
  text-decoration: none;
}

/* 第一組：文字左，圖片右 */
.blog:nth-child(odd) {
  flex-direction: row;
}

.blog:nth-child(odd) .blog-text {
  order: 1;
}

.blog:nth-child(odd) .welcome-img {
  order: 2;
}

/* 第二組：圖片左，文字右 */
.blog:nth-child(even) {
  flex-direction: row;
}

.blog:nth-child(even) .blog-img.two {
  order: 1;
}

.blog:nth-child(even) .blog-text.two {
  order: 2;
}



/***** Hera *****/
/*-----------------*/

figure.effect-hera {
	background: #303fa9;
}

figure.effect-hera h2 {
	font-size: 158.75%;
}

figure.effect-hera h2,
figure.effect-hera p {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
}

figure.effect-hera figcaption::before {
	position: absolute;
	  top: 49%;
	  left: 49%;
	  width: 160px;
	  height: 160px;
	border: 2px solid #fff;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
	transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
}

figure.effect-hera p {
	width: 100px;
	text-transform: none;
	font-size: 121%;
	line-height: 2;
}

figure.effect-hera p a {
	color: #fff;
}

figure.effect-hera p a:hover,
figure.effect-hera p a:focus {
	opacity: 0.6;
}

figure.effect-hera p a i {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-hera p a:first-child i {
	-webkit-transform: translate3d(-60px,-60px,0);
	transform: translate3d(-60px,-60px,0);
}

figure.effect-hera p a:nth-child(2) i {
	-webkit-transform: translate3d(60px,-60px,0);
	transform: translate3d(60px,-60px,0);
}

figure.effect-hera p a:nth-child(3) i {
	-webkit-transform: translate3d(-60px,60px,0);
	transform: translate3d(-60px,60px,0);
}

figure.effect-hera p a:nth-child(4) i {
	-webkit-transform: translate3d(60px,60px,0);
	transform: translate3d(60px,60px,0);
}

figure.effect-hera:hover figcaption::before {
	opacity: 1;
	-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
	transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
}

figure.effect-hera:hover h2 {
	opacity: 0;
	-webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
	transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
}

figure.effect-hera:hover p i:empty {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /* just because it's stronger than nth-child */
	opacity: 1;
}
a  i.download,a  i.heart,a i.service,a i.share{
 width:32px;
 height:32px;
 display:inline-block;
 background:url(../images/icons.png) no-repeat -6px -60px;
   margin-right: 0.6em;
}
a  i.download:hover{
 background:url(../images/icons.png) no-repeat  -6px -92px;
}
a  i.heart{
  background:url(../images/icons.png) no-repeat  -37px -60px;
}
a  i.heart:hover{
  background:url(../images/icons.png) no-repeat  -37px -92px;
}
a  i.service{
  background:url(../images/icons.png) no-repeat  -68px -60px;
}
a  i.service:hover{
  background:url(../images/icons.png) no-repeat  -68px -92px;
}
a  i.share{
  background:url(../images/icons.png) no-repeat  -98px -60px;
}
a  i.share:hover{
  background:url(../images/icons.png) no-repeat  -98px -92px;
}

	figure.effect-hera p {
	  width: 100px;
	  font-size: 38%;
	  line-height: 2;
	}
	figure.effect-hera h2 {
	  font-size: 1.2em;
	}
	figure.effect-hera figcaption::before {
	  position: absolute;
	  top: 49%;
	  left: 49%;
	  width: 120px;
	  height: 120px;
	  }

@media (max-width: 480px) {
  .blog-section .blog {
    display: flex !important; /* 強制使用 Flexbox，覆蓋 Bootstrap */
    flex-direction: column !important; /* 確保垂直排列 */
    flex-wrap: nowrap !important; /* 禁用換行，確保單列 */
  }
  .blog-section .blog .blog-text,
  .blog-section .blog .blog-text.two,
  .blog-section .blog .welcome-img,
  .blog-section .blog .blog-img.two {
    flex: 1 1 100% !important; /* 確保全寬 */
    padding: 10px 0 !important; /* 內邊距 */
    float: none !important; /* 清除Bootstrap可能的float */
    display: block !important; /* 確保每個子元素獨立顯示 */
    order: initial !important; /* 重置order，遵循DOM順序 */
  }
  .blog-section .blog .col-md-6,
  .blog-section .blog .col-md-6 {
    width: 100% !important; /* 覆蓋Bootstrap的col-md-*寬度 */
    float: none !important; /* 清除Bootstrap的float */
    margin: 0 !important; /* 清除可能的margin */
  }
  .blog-section .blog .clearfix {
    display: none !important; /* 隱藏清除浮動元素 */
  }
  .blog-text a h4,
  .blog-text.two a h4 {
    font-size: 16px;
  }
  .blog-text p,
  .blog-text.two p {
    font-size: 12px;
    line-height: 20px;
    max-height: 80px;
    overflow: hidden;
  }
  .blog-text h5,
  .blog-text.two h5 {
    font-size: 12px;
    margin-bottom: 8px;
  }
}