/* 整體容器 */

.container{
  max-width:1200px;
  margin:auto;
  padding:0px 20px;
  color: #808080;
}

/* 封面 */

.container .hero{
    width:100vw;
    height:30vh;
    margin-left:calc(50% - 50vw);
    overflow:hidden;
    position:relative;
    background: #7C9CC9;
    background-image:url(/static/UploadFile/images/case/case-hero-banner_9427334692051072810657.webp);
    background-size:cover; 
    background-repeat:no-repeat;
    background-position:center;
}

.container .hero img{
   /*width:100%;
   height:100%;
   object-fit:cover;
   display:block;*/
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%); /* 修正圖片本身寬高的一半 */
}

.container .hero img.hero-overlay
{
   max-height:100%!important;
   width:Auto!important;
  max-width:none!important;
   max-width:none!important;
}

@media screen and (max-width:660px){
  .container .project{
      display:block;
  }
 
  .container .section .responsive {
      flex-wrap:wrap;
   }

   .container .section .responsive > .desktop-group {
       width:100%;
   }

   .container .section .responsive > .desktop-group .desktop-frame .desktop-screen{
       height:250px;
   }


   .container .section .responsive > .mobile {
       width:100%;
   }

   .container .section .responsive > .mobile .mobile-frame{
       width:100%!important;
   }
   .container .section .responsive > .mobile .mobile-frame .mobile-screen{
       height:620px;
   }




}

.color-block{
   width: 50%;
   height:calc(50% - 50vh);
   margin: 0 auto;    
}

.case-link{
    width:30px;
    height:30px;

    background:rgba(0,0,0,0.5);
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.3s;
}

.case-link:hover{
    background:rgba(0,0,0,0.8);
    transform:scale(1.1);
}

.case-link img{
    width:15px;
    height:15px;
}

/* 專案資訊 */

.project{
  margin-top:70px;
  display:grid;
  grid-template-columns:280px 1fr;
  gap:60px;
}

/* 左側資訊 */

.meta{
  border-left:3px solid #808080;
  padding-left:20px;
}

.meta h3{
  margin-top:0;
  font-size:18px;
  color:#808080;
}

.meta p{
  margin:14px 0;
}

/* 右側介紹 */

.description h1{
  margin-top:0;
  font-size:34px;
}

.description p{
  color:#808080;
}

/* 長圖展示 */

.section{
  margin-top:90px;
}

.section h2{
  margin-bottom:30px;
  font-size:26px;
}

.desktop-preview img{
  width:100%;
  border-radius:10px;
  box-shadow:
    0 20px 40px rgba(0,0,0,0.3),
    inset 0 0 0 3px #222;
}

/* 桌機 + 手機展示 */

.responsive{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:80px;
}

.desktop-group{
  display:flex;
  flex-direction:column;
  gap:40px;
  width:70%;
}

.desktop h3 {
  text-align:center;
}

.mobile{
  width:24%;
}

/* 手機外框 */

.mobile-frame{
    position:relative;

    width:280px;
    padding:14px;

    background:#111;
    border-radius:40px;

    box-shadow:
    0 20px 40px rgba(0,0,0,0.3),
    inset 0 0 0 3px #222;
}

.mobile-screen{
    border-radius:28px;
    overflow:hidden;
    background:#000;
}

.mobile-screen img{
    width:100%;
    display:block;
}

.notch{
    position:absolute;

    top:10px;
    left:50%;
    transform:translateX(-50%);

    width:120px;
    height:22px;

    background:#000;
    border-radius:0 0 14px 14px;

    z-index:2;
}

.mobile-frame img{
  width:100%;
  border-radius:20px;
}

/* 桌機外框 */

.desktop-frame{
    position:relative;

    width:100%;
    background:#111;
    border-radius:14px;

    padding:14px 14px 20px 14px;

    box-shadow:
    0 20px 40px rgba(0,0,0,0.3),
    inset 0 0 0 3px #222;
}

/* 螢幕上方bar */

.desktop-bar{
    height:14px;
    margin-bottom:10px;

    border-radius:10px;

    background:
    radial-gradient(circle at 12px center,#ff5f57 4px,transparent 5px),
    radial-gradient(circle at 32px center,#febc2e 4px,transparent 5px),
    radial-gradient(circle at 52px center,#28c840 4px,transparent 5px),
    #1c1c1c;
}

/* 螢幕畫面 */

.desktop-screen{
    border-radius:8px;
    overflow-y:hidden;
    height:520px;   /* 可調整螢幕高度 */
    background:#000;
}

/* 讓 scrollbar 隱藏 */
.desktop-screen::-webkit-scrollbar{
    display:none;
}

/* 網站截圖 */

.desktop-screen img{
    width:100%;
    display:block;
    transition:transform 12s linear 0.5s;
}



/* 圖片hover */

.desktop-frame:hover .desktop-screen img{
    transform:translateY(calc(-100% + 520px));
}

/* 返回 */

.back{
  margin-top:120px;
  text-align:center;
}

.back a{
  color:#aaa;
  text-decoration:none;
  border:1px solid #aaa;
  padding:12px 30px;
  border-radius:6px;
}

.back a:hover{
  background:#aaa;
  color:#fff;
}



<!-- Table -->

table {
    border-collapse: collapse;
    width: 100%;
}

.table-wrapper {
    overflow-x: auto;
}
.table-wrapper table {
    border-collapse: collapse;
    width: 100%;
    min-width:800px;
}
.table-wrapper th, .table-wrapper  td {
    border: 1px solid #fff;
    padding: 10px;
    text-align: center;
}
.table-wrapper th {
    /*background-color: #f5f5f5;*/
}
.table-wrapper  .highlight {
    background-color: #fef9e7;
}
.table-wrapper  .plan-name {
    font-weight: bold;
    font-size: 1.1em;
}

@media (max-width: 768px) {
    .table-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0; /* 確保左右沒有額外空間 */
    }
    .table-wrapper  table {
        /*min-width: 100%;*/ /* 讓表格至少跟螢幕一樣寬 */
        /*width: max-content;*/ /* 表格會依內容撐開 */
        /*display: table;*/ /* 避免 block 造成的定位錯亂 */
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        min-width: 351px; /* 保持最小寬度 */
    }
    .table-wrapper  thead {
        display: none;
    }
    .table-wrapper   tr {
        display: block;
        margin-bottom: 15px;
        /*width: 351px;*/
    }
    .table-wrapper td.mobile-head { 
        display: block; 
        text-align: center !important;
        /*width: 100%;*/ /* 撐滿整個區塊 */ 
        /*text-align: center;*/ /* 文字置中 */ 
        /*font-weight: bold;*/
        /*margin-left: -40px;*/
    }
    .table-wrapper td {
        display: flex;
        /*justify-content: flex-start;
        padding: 8px;
        border: 1px solid #fff;
        word-wrap: break-word;
        word-break: break-word;
        white-space: normal;*/
        /*font-weight: bold;*/
    }
    .table-wrapper td::before {
        text-align: right;
        content: attr(data-label);
        flex: 0 0 30%;
        /*font-weight: bold;*/
        padding-right: 12px;
    }
    .Frontend :not(font[style]) > DIV, .Frontend :not(font[style]) > SPAN, .Frontend :not(font[style]) > IMG, .Frontend :not(font[style]) > TD, .Frontend :not(font[style]) > INPUT, .Frontend :not(font[style]) > A, .Frontend :not(font[style]) > SPAN, .Frontend :not(font[style]) > IFRAME, .Frontend :not(font[style]) > textarea {
        font-family: "FontFamily_110";
        font-size: 1em;
    }
}