.wrap { position: relative; z-index: 10; }
.wrap h4.stitle { margin-bottom: 10px; text-transform: uppercase; font-family: 'Rubik', sans-serif; font-weight: 300; font-size: 20px; color: #db4048; }
.wrap h2.title { margin-bottom: 30px; font-size: 40px; color: #222; }
.wrap p.more a { padding: 14px 40px; background: #ff575f; display: inline-block; color: #fff; }
.wrap p.more a span { margin-right: 30px; }

/* productBox */
#productBox  { padding-bottom: 4vw; }
#productBox .bgTxt { position: absolute; width: 100%; font-weight: 700; text-align: center; font-family: 'Rubik', sans-serif; font-size: 10vw; color: #f1f1f1; z-index: 1; bottom: -8vw; left: 0; }
#productBox .list { position: relative; z-index: 2; }
#productBox .list .item { position: relative; margin: 0 30px 10px; background: #fff no-repeat 50% / cover; box-shadow: 0 0 10px rgba(0, 0, 0, .5); }
#productBox .list .item img { position: relative; width: 100%; z-index: 1; }
#productBox .list .item a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 3; }
#productBox .list .item .info { position: absolute; width: 100%; height: 100%; top: 150%; z-index: 2; }
#productBox .list .item .info h3 { margin: calc((100% - 117px) / 2) 0; padding: 0 15%; height: 61px; font-weight: normal; font-size: 20px; color: #fff; -webkit-line-clamp: 2; }
#productBox .list .item .info p { padding: 13px 20px; background: #fff; }

/* aboutBox */
#aboutBox { margin-bottom: 5vw; font-size: 0; }
#aboutBox >div , #customBox .row { margin: 0 5% 0 0; width: 40%; display: inline-block; }
#aboutBox .info , #customBox .youtubeBox { margin: 0 0 0 5%; }
#aboutBox .info p.arts { margin-bottom: 50px; color: #585858; }
#aboutBox .info p.more , #aboutBox .info #SeoStarRating { margin-bottom: 15px; text-align: right; }

/* customBox */
#customBox { position: relative; padding: 110px 0 0; font-size: 0; z-index: 2; }
#customBox:before { position: absolute; width: 100%; height: calc(100% - 110px); background: #16172e; display: block; top: 0; left: 0; z-index: 1; content: ""; }
#customBox .workframe { z-index: 2; font-size: 0; }
#customBox .row { vertical-align: top; }
#customBox .listBox ul li h3 { margin: 20px 0 10px; font-size: 40px; color: #fff; }
#customBox .listBox ul li article { font-size: 18px; color: #909090; }
#customBox .listBox .btn { text-align: right; }
#customBox .listBox .btn a { position: relative; color: #eee; text-align: center; }
#customBox .listBox .btn a#nextBtn:before { color: #6b6b78; content: "|"; }
#customBox .listBox .btn a span { position: absolute; width: 80px; height: 27px; display: block; text-align: center; line-height: 27px; top: 0; left: 0; -webkit-transform: translate(0) scale(0); transform: translate(0) scale(0); -webkit-transition: -webkit-transform .4s ease; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; }
#customBox .listBox .btn a i { text-align: center; width: 80px; height: 27px; font-size: 27px; -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); -webkit-transition: -webkit-transform .4s ease; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; }
#customBox .youtubeBox { position: relative; }
#customBox .youtubeBox:before { position: absolute; width: 40%; height: 100%; background: url(/images/33/dote.png) 0 0; top: -2vw; left: 90%; z-index: -1; opacity: 0.4; content: ""; }
#customBox .youtubeBox iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#customBox .youtubeBox .playBtn { position: absolute; width: 100px; height: 100px; background: #ff5860; border-radius: 50%; display: block; text-align: center; line-height: 100px; top: calc((100% - 100px) / 2); left: -50px; -webkit-animation: playbtn 1s infinite alternate ease-in-out; animation: playbtn 1s infinite alternate ease-in-out; }
#customBox .youtubeBox .playBtn i { font-size: 36px; color: #fff; }
#customBox .contact { position: absolute; padding-left: calc((100% - 1300px) / 2); width: 650px; height: 110px; background: #21bcd8; line-height: 110px; bottom: 0; left: 0; z-index: 3; }
#customBox .contact a { display: inline-block; }
#customBox .contact font { text-transform: uppercase; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 40px; color: #fff; }
#customBox .contact i { margin: 10px 0 10px 30px; font-size: 30px; color: #fff; -webkit-animation: arrowright 1s infinite alternate ease-in-out; animation: arrowright 1s infinite alternate ease-in-out; }

/* NewsBox */
#NewsBox { position: relative; padding: 80px 0; }
#NewsBox .bg , #bookBox .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; top: 0; left: 0; opacity: .4; }
#NewsBox h4.stitle , #NewsBox h2.title { text-align: center; }
#NewsBox #newList li >div { margin: 0 20px 20px 0; }
#NewsBox #newList li:nth-child(2n) >div { margin: 0 0 20px 20px; }
#NewsBox #newList li .img a.photo img , #bookBox ul li a.photo img { width: 100%; }
#NewsBox #newList li .info p a { margin-right: 15px; padding: 2px 15px; background: #ffd9db; display: inline-block; color: #ff5860; }
#NewsBox #newList li .info p font { font-family: 'Rubik', sans-serif; color: #656565; }
#NewsBox #newList li .info h3 a { margin-top: 10px; height: 70px; font-weight: 500; font-size: 22px; color: #434343; -webkit-line-clamp: 2; }
#NewsBox p.more , #bookBox p.more { margin-top: 60px; text-align: center; }

/* bookBox */
#bookBox { position: relative; padding: 80px 0; background: #222; }
#bookBox h2.title { text-align: center; color: #fff; }
#bookBox ul li a.photo , #bookBox ul li h3 { margin: 0 20px; background-color: #fff; }
#bookBox ul li h3 a { padding: 15px 25px; height: 32px; font-size: 19px; color: #222; -webkit-line-clamp: 1; }

@keyframes playbtn { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@-webkit-keyframes playbtn { 0%, 100% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } }
@keyframes arrowright { 0%, 100% { margin: 10px 0 10px 30px; } 50% { margin: 10px 10px 10px 20px; } }
@-webkit-keyframes arrowright { 0%, 100% { margin: 10px 0 10px 30px; } 50% { margin: 10px 10px 10px 20px; } }

@media screen and (max-width:1500px) {
	#customBox .contact { padding-left: calc((100% - 1280px) / 2); width: 640px; }
}
@media screen and (max-width:1360px) {
	#customBox .contact { padding-left: calc((100% - 1160px) / 2); width: 580px; }
}
@media screen and (min-width:1281px) {
	#productBox .list .item:hover img { background: rgba(27, 28, 56, .4); }
	#productBox .list .item:hover .info { top: 0; }
	#customBox .listBox .btn a:hover span { -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); }
	#customBox .listBox .btn a:hover i { -webkit-transform: rotate(0) scale(0); transform: rotate(0) scale(0); }
	#customBox .youtubeBox .playBtn:hover { background: #2c2a2a; }
	#NewsBox #newList li .info p a:hover { background: #ff5860; color: #fff; }
	#bookBox ul li:hover a.photo img { background: rgba(44, 44, 44, .6); }
}
@media screen and (max-width:1280px) {
	#productBox .list .item img { background: rgba(27, 28, 56, .4); }
	#productBox .list .item .info { top: 0; }
}
@media screen and (max-width:1024px) {
	#customBox { padding: 7vw 0; }
	#customBox:before { height: 100%; }
	#customBox .row { margin: 0 0 30px; width: 80%; }
	#customBox .youtubeBox { margin: 10px 0 0; width: auto; }
	#customBox .contact { padding-left: 5%; width: 85%; bottom: -20px; }
}
@media screen and (max-width:980px) {
	#productBox .bgTxt { font-size: 15vw; bottom: -12vw; }
	#aboutBox { position: relative; margin-bottom: 0; padding: 9vw 5% 1vw; width: 90%; }
	#aboutBox .aboutImg { position: absolute; width: 100%; height: 100%; display: block; left: 0; top: 0; z-index: 1; }
	#aboutBox .aboutImg a.photo { height: 100%; }
	#aboutBox .info { position: relative; margin: 0; width: 100%; display: block; z-index: 2; }
	#NewsBox #newList { margin: 0 auto; width: 80%; }
}
@media screen and (max-width:640px) {
	#productBox .list .item { margin: 0 10px 10px; }
}
@media screen and (max-width:600px) {
	#productBox .list .item { margin: 0 10vw 10px; }
}
@media screen and (max-width:500px) {
	#customBox .contact { height: 14vw; line-height: 14vw; }
	#customBox .contact font { font-size: 9vw; }
	#customBox .contact i { font-size: 8vw; }
	#NewsBox #newList { width: 100%; }
}


/* indexProduct */
  #ofajc-game-card {
    scroll-margin-top: 80px;
  }

  /* ===== 遊戲館選單外框 ===== */
  .game-menu-section {
    background: radial-gradient(circle at top left, #064a96 0%, #022140 45%, #010f24 100%);
    border-radius: 18px;
    max-width: 1520px;
    margin: 20px auto;
    padding: 18px 18px 12px;
    box-shadow: 0 14px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06);
  }

  .game-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }

  .game-menu-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
  }

  .game-menu-title img {
    width: 28px;
  }

  .game-menu-title span {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    color: #ffcf5a; /* 改成亮金色標題 */
  }

  /* 全站圖片安全設定 */
  .game-menu-section img {
    border: none;
    border-radius: 0;
    box-shadow: none;
    height: auto;
    max-width: 100%;
  }

  /* ===== 篩選列 ===== */
  .game-menu-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 10px;
  }

  .game-menu-filter label {
    color: #ffcf5a;
    font-size: 15px;
  }

  .game-menu-filter select {
    background: #021731;
    color: #fff;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    padding: 4px 16px;
    font-size: 0.95rem;
    outline: none;
  }

  .game-menu-filter select:focus {
    border-color: #ffcf5a;
    box-shadow: 0 0 0 1px rgba(255,207,90,.65);
  }

  /* ===== 遊戲列表 ===== */
  .games-list {
    display: none;
  }

  .games-list.active {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 16px;
  }

  .game-card {
    display: block;
    background: radial-gradient(circle at top, #163863 0%, #04152d 70%);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,.35);
    text-align: center;
    text-decoration: none;
    color: #fff;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }

  .game-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .game-card .game-name {
    padding: 8px 6px 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
  }

  .game-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 18px rgba(0,0,0,.45);
    filter: saturate(1.08);
  }

  /* ===== 載入更多按鈕 ===== */
  .load-more-btn {
    display: block;
    margin: 0 auto 24px;
    padding: 10px 16px;
    width: 100%;
    height: 48px;
    background: linear-gradient(145deg, #ffcf5a 0%, #f5b325 100%);
    color: #2b1800;
    border: none;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  }

  .load-more-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0,0,0,.35);
    filter: saturate(1.02);
  }

  .load-more-btn:active {
    transform: translateY(0) scale(.97);
    box-shadow: inset 0 3px 6px rgba(0,0,0,.45);
  }

  /* ===== RWD：平板 ===== */
  @media (max-width: 1024px) {
    .game-menu-section {
      margin: 10px 10px;
    }
    .games-list.active {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* ===== RWD：手機 ===== */
  @media (max-width: 600px) {
    .games-list.active {
      grid-template-columns: repeat(2, 1fr);
    }
  }