.mainWp .container .row {
     width: 876px !important;
     text-align: left;
 }


 .section1 {
     display: none;
 }

 .section1D {
     display: inherit;
     position: relative;
     height: 388px;
 }


 .section1D .section1BgD {
     position: absolute;
     top: 0px;
     left: 50%;
     margin-left: -423px;
     width: 846px;
     height: auto;
 }

 .section1D .section1BoyD {
     position: absolute;
     top: 104px;
     left: 50%;
     margin-left: 152px;
     width: 214px;

     animation: bounce 1s ease-in-out infinite;
     animation-delay: 1.6s;

 }





 .section2 {
     display: none;
 }

 .section2D {
     display: inherit;
 }







 .section3 {
     display: none;
 }

 .section3D {
     width: 846px;
     position: relative;

     display: inherit;
     height: 1343px;

     background-image: url(../images/dianbao/d/section3BgD.jpg);
     background-repeat: no-repeat;
     background-size: contain;

     margin: 0 auto;
 }

 .section3D .boy {
     position: absolute;
     top: 0px;
     left: 0px;
 }

 .section3D .section3B1D {
     left: 211px;
     top: 164px;
     width: 168px;
     height: auto;
 }

 .section3D .section3B2D {
     left: calc(1275px / 2);
     top: calc(581px /2);
     width: 176px;
     height: auto;
 }

 .section3D .section3B3D {
     left: calc(67px / 2);
     top: calc(1479px /2);
     width: calc(351px / 2);
     height: auto;
 }

 .section3D .section3B4D {
     left: calc(1252px / 2);
     top: calc(1170px /2);
     width: calc(336px / 2);
     height: auto;
 }


 .section3D .section3B5D {
     left: calc(515px / 2);
     top: calc(2221px /2);
     width: calc(330px / 2);
     height: auto;
 }

 .section3D .section3B6D {
     left: calc(907px / 2);
     top: calc(1635px /2);
     width: calc(336px / 2);
     height: auto;
 }

 .section3D .section3B7D {
     left: calc(614px / 2);
     top: calc(805px /2);
     width: calc(330px / 2);
     height: auto;
 }



 /* 自訂類別 no-gutter 來移除列間距 */
 /*
 .section4 .no-gutter [class*='col-'] {
     padding-left: 0;
     padding-right: 0;
 }
*/



 .section4 a .boyM,
 .section4 .boyM {
     display: none;
}

 .section4 a .boy {
     width: 100%;
     /* 確保圖片在列中填滿 */
     height: auto;
     display: block;
     /* 移除圖片底部空隙 */

     position: relative;
     /* 确保 .moreArea 的绝对定位相对于 .boy */
     border-radius: 30px;
     background-color: #fff;

     margin-bottom: 30px;
     overflow: hidden;
     /* 防止滑入的 .moreArea 溢出 */
     cursor: pointer;
     /* 可选：鼠标悬停时显示手型光标 */

 }

 .section4 a .boy img {
     border-radius: 30px;
     /* 确保图片也有相同的圆角 */
     display: block;
     width: 100%;
     height: auto;
     border: 1px solid rgba(78, 187, 193, 0.75);
     /* 修正 border-color 为 border */
 }

 .section4 a .boy .moreArea {
     position: absolute;
     top: 0;
     left: 100%;
     /* 初始位置在右侧外 */
     width: 100%;
     height: 100%;
     background-color: rgba(78, 187, 193, 0.75);
     z-index: 1;
     border-radius: 30px;
     transition: left 0.5s ease;
     /* 平滑滑动 */
     display: flex;
     /* 使用 Flexbox 进行对齐 */
     align-items: center;
     /* 垂直居中 */
     justify-content: center;
     /* 水平居中 */
 }

 .section4 a .boy:hover .moreArea {
     left: 0;
     /* 滑入到视图中 */
 }

 .section4 a .boy .moreArea p {
     color: #fff;
     text-align: center;
     opacity: 0;
     /* 初始隐藏 */
     transition: opacity 0.5s ease 0.5s;
     /* 延迟显示，匹配滑动时间 */
     font-size: 1.2em;
     /* 可根据需要调整字体大小 */
     font-weight: bold;
     /* 可选：加粗文字 */
     margin: 0;
     /* 移除默认的 p 元素外边距 */
 }

 .section4 a .boy:hover .moreArea p {
     opacity: 1;
     /* 显示 "MORE" */
 }

 /* 已有的 CSS 保持不變 */

 /* 新增的 CSS */
 .section4 a .boy .moreArea.clicked {
     left: 0;
 }

 .section4 a .boy .moreArea.clicked p {
     opacity: 1;
 }