@charset "utf-8";
/* CSS Document */
body, html {
  height: 100%;
  margin: 0;
}

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(img/BGwhite.jpg);
  background-size: cover;
  background-position: center;
  z-index: -1; /* 将背景图放在z轴的底部，以便其他内容在上方 */
}

.bg-red {
  position: relative;
  width: 80vw;
  height: 100vh;
  background-size: cover;
  background-repeat:no-repeat;
  z-index: 3;
}
 
.image-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.img-L {
	/*background-color:#00F;*/
  position: absolute;
  max-width: 100vw;
  max-height: 100vh;
  background-size: contain;
  background-repeat:no-repeat;
  z-index: 2;
}
.img-R {
	/*background-color:#00F;*/
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 4;
  overflow: hidden; /* 确保图像不会溢出容器 */
}

.img-R img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 让图像填满容器并保持比例 */
  display: block; /* 避免底部空白问题 */
}
.highlight {
    color: #AD0000;
}
.text-red {
  position: absolute;
  color:#C4284D;
  font-family:"Noto Sans Traditional Chinese",sans-serif;
}
.text-white-right {
 /*background-color:#0FF;*/
  position: absolute;
  bottom: 8px;
  right: 5px;
  max-width: 90%;
  color: #FFFFFF;
  text-align: right;
  line-height: 1;
  letter-spacing: 3.5px;
  font-family:"Noto Sans Traditional Chinese",sans-serif;
  opacity: 0;
}
.text-white-left {
 /*background-color:#0FF;*/
  position: absolute;
  top: 6px;
  left: 5px;
  max-width: 90%;
  color: #FFFFFF;
  text-align: left;
  line-height: 1;
  letter-spacing: 3.5px;
  font-family:"Noto Sans Traditional Chinese",sans-serif;
  opacity: 0;
}

   <!-- 文字滑出效果 -->
    .text-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
	    transition: opacity 0.5s ease-out; /* 添加過渡效果 */
    }
	.fade-from-right {
        animation: fadeFromRight 1s ease-out forwards; /* 使用动画效果，持续1秒，渐出，最后停留在动画结束状态 */
    }
	@keyframes fadeFromRight {
        from {
            opacity: 0; /* 从透明开始 */
            transform: translateX(100%); /* 从右侧滑入 */
        }
        to {
            opacity: 1; /* 渐入至完全不透明 */
            transform: translateX(0); /* 移动到初始位置 */
        }
    }
	.fade-from-left {
        animation: fadeFromLeft 1s ease-out forwards; /* 使用动画效果，持续1秒，渐出，最后停留在动画结束状态 */
    }
	@keyframes fadeFromLeft {
        from {
            opacity: 0; /* 从透明开始 */
            transform: translateX(-100%); 
        }
        to {
            opacity: 1; /* 渐入至完全不透明 */
            transform: translateX(0); /* 移动到初始位置 */
        }
    }

.new-text {
    opacity: 0; /* 初始時將新文字的透明度設為0 */
    position: absolute;
	color:#F8E7CD;
    font-size: 1.2vw;
	width:30vw;
	text-align:center;
    max-width: 90%;
    top: 50%;
    left: 50%;
	text-shadow: 3px 5px 4px rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -50%);
    transition: opacity 0.5s ease-out; /* 添加過渡效果 */
}

.img-R:hover .text-container {
  opacity: 0;
}

.img-R:hover .new-text {
    opacity: 1; /* 在懸停時顯示新文字 */
    pointer-events: auto; /* 啟用鼠標事件 */
}