.wrap { position: relative; background: #fff; z-index: 998; }
.wrap #wrapBox >div { position: relative; }
.wrap #wrapBox .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; top: 0; left: 0; opacity: .4; }

/* more */
p.more { padding: 20px 0; text-align: center; }
p.more a { position: relative; overflow: hidden; padding: 0 30px; display: inline-block; align-items: center; border: #d3d3d3 solid; border-width: 0 0 1px 1px; letter-spacing: .06em; line-height: 30px; transition: 1.2s ease 1.8s; transform: translateX(0%); }
p.more a:before { position: absolute; width: 100%; height: 100%; background: #000; top: 0; left: 0; transform: translateX(-140%) skewX(63deg); transition: .4s cubic-bezier(.23,1,.32,1); content: "" }
p.more a:after { position: absolute; width: 85%; height: 1px; background: #d3d3d3; display: block; top: 0; left: 0; content: ""; }
p.more a font { position: relative; padding: 7px 0; display: inline-block; color: #000; z-index: 2; }
p.more a span { position: relative; margin-left: 70px; width: 100px; height: 1px; background: #000; display: inline-block; transition: transform .4s cubic-bezier(.23,1,.32,1),background .4s ease; transform-origin: center left; }
p.more a span:after { position: absolute; width: 0; height: 0; border-style: solid; border-width: 3px 0 3px 6px; border-color: transparent transparent transparent #000; display: block; right: 0; top: -3px; content: ""; }

/* bgTxt */
.bgTxt { position: absolute; z-index: 1; }
.bgTxt.stitle { -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; font-size: 70px; }
.bgTxt.title { width: 100%; text-align: right; font-size: 140px; color: #edf1f3; }

/* NewsBox */
#NewsBox , #productBox { padding-bottom: 5vw; }

#NewsBox ul , #productBox .wall { position: relative; margin-bottom: 0; padding: 7vw 0 0; display: block; font-size: 0; z-index: 2; }
#NewsBox ul li { position: relative; text-align: right; }
#NewsBox ul li .img { position: relative; padding: 0 10px 10px 0; width: calc(60% - 10px); display: inline-block; }
#NewsBox ul li .img:before { position: absolute; width: calc(100% - 10px); height: calc(100% - 10px); background: url(/images/34/img-bgline.png); top: 10px; left: 10px; -webkit-animation: newimg 1s linear infinite; animation: newimg 1s linear infinite; content: ""; }
#NewsBox ul li .img a.photo { transform-origin: center top; transform: translate3d(0,0,-300px) rotateZ(-3deg) rotateY(30deg) rotateX(-15deg); transition-property: transform,opacity; transition-duration: 3s,.5s; transition-timing-function: cubic-bezier(.755,.05,.855,.06),ease; opacity: 0; }
#NewsBox ul li.slick-current .img a.photo { transform: translate3d(0,0,0) rotateZ(0deg) rotateY(0deg) rotateX(0deg); transition: transform 1s cubic-bezier(.23,1,.32,1) .2s,opacity .6s ease .2s; opacity: 1; }
#NewsBox ul li .info p a { padding: 2px 15px; background: #000; display: inline-block; color: #fff; vertical-align: middle; }
#NewsBox ul li .info p font { margin-left: 10px; display: inline-block; }
#NewsBox ul li .info h3 { margin: 10px 0; }
#NewsBox ul li .info h3 a { height: 60px; font-size: 18px; color: #000; -webkit-line-clamp: 2; }
#NewsBox .btn { position: absolute; left: calc(35% - 80px); bottom: 10px; z-index: 10; }
#NewsBox .btn a { margin: 0 10px; color: #000; }
#NewsBox p.more { margin-top: 50px; }

/* productBox */
#productBox .bgTxt.stitle { top: -4vw; z-index: 3; }
#NewsBox ul , #productBox .wall { padding: 5vw 0 0; }
#productBox .wall-column { width: calc(100% / 3); display: inline-block; box-sizing: border-box; }
#productBox .article { position: relative; margin: 15px 10px 40px; background: #fff; }
#productBox .article a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 10; }
#productBox .article .imgBox { position: relative; overflow: hidden; }
#productBox .article .imgBox article { position: absolute; padding: 20px 20px 30px; width: calc(100% - 40px); background: #fff; color: #777070; bottom: -99px; z-index: 2; }
#productBox .article .imgBox article p { height: 58px;  -webkit-line-clamp: 2; }
#productBox .article .imgBox:after { position: absolute; width: 60%; height: 20px; background: #fff; display: block; left: 0; bottom: 0; z-index: 1; content: ""; }
#productBox .article .info { position: relative; margin-top: -15px; padding: 0 20px 15px; z-index: 9; }
#productBox .article .info p span { display: inline-block; color: #d80707; }
#productBox .article .info p span.old { margin-right: 10px; color: #8f8f8f; }
#productBox .article .info h3 { margin: 20px 0; height: 30px; font-weight: 400; font-size: 18px; -webkit-line-clamp: 1; }

/* aboutBox */
#aboutBox { overflow: hidden; position: relative; background: #f2f8fa; }
#aboutBox:before { position: absolute; width: 20vw; height: 100%; background: #f2f8fa; background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgb(242, 248, 250) 75%); background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgb(242, 248, 250) 75%); background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgb(242, 248, 250) 75%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#f2f8fa',GradientType=1 ); display: block; top: 0; left: calc(30vw + 1px); z-index: 2; content: ""; }
#aboutBox .imgs { position: absolute; width: 50vw; height: 100%; top: 0; left: 0; z-index: 1; }
#aboutBox .imgs .list { height: 35vw; background: no-repeat 50% / cover; }
#aboutBox .info { position: relative; padding: 70px 0 70px 50vw; width: 490px; z-index: 3; }
#aboutBox .info .title { font-size: 40px; }
#aboutBox .info .stitle { margin-bottom: 25px; padding: 5px 0 15px; background: url(/images/34/img-dot.png) repeat-x 0 bottom; font-size: 20px; }
#aboutBox .info article { font-size: 16px; line-height: 200%; color: #545454; }
#aboutBox #SeoStarRating { margin: 15px 0 30px; text-align: right; }
#aboutBox p.more { text-align: left; }

/* bookBox */
#bookBox { padding: 50px 0 50px calc((100% - 1100px) / 2); font-size: 0; }
#bookBox .row { position: relative; width: 50%; display: inline-block; z-index: 2; }
#bookBox #customBox .bgTxt.stitle { z-index: 2; }
#bookBox #customBox ul { position: relative; padding: 0 10% 0 20%; z-index: 3; }
#bookBox #customBox ul li h3 { font-size: 40px; }
#bookBox #customBox p.more a { border-color: #000; }
#bookBox #customBox p.more a:after { background: #000; }
#bookBox #BookList ul { overflow: hidden; }
#bookBox #BookList ul li { position: relative; margin-bottom: 1px; float: left; width: 25%; }
#bookBox #BookList ul li:nth-child(6n) { width: 50%; }
#bookBox #BookList ul li a.photo { margin-right: 1px; }
#bookBox #BookList ul li h3 { position: absolute; padding: 5px 20px; width: calc(100% - 41px); background: rgba(0, 0, 0, .7); left: 0; bottom: 0; }
#bookBox #BookList ul li h3 a { height: 30px; color: #fff; text-align: center; -webkit-line-clamp: 1; }

@keyframes newimg { 0% { background-position: 0; } to { background-position: -7px; } }
@-webkit-keyframes newimg { 0% { background-position: 0; } to { background-position: -7px; } }

@media screen and (min-width: 1281px) {
	p.more a:hover { border-color: #000; }
	p.more a:hover:before { transform: translateX(0) skewX(0); }
	p.more a:hover:after { background: #000; }
	p.more a:hover font { color: #fff; }
	p.more a:hover span { background: #fff; transform: scale(1.1); }
	p.more a:hover span:after { border-color: transparent transparent transparent #fff; }
	#productBox .wall-column .article:hover .imgBox article { bottom: 0; }
}
@media screen and (max-width: 1280px) {
	#aboutBox .imgs , #bookBox .row { width: 100%; }
	#aboutBox .imgs .list { height: 100vw; }
	#aboutBox .info { padding: 70px 15%; width: 70%; background: rgba(242, 248, 250, .7); }
	#aboutBox:before { opacity: 0; }
	#aboutBox p.more a:after { background: #000; }
	#aboutBox p.more a { border-color: #000; }
	#bookBox { padding: 50px 5%; font-size: 0; }
	#bookBox #customBox ul { padding: 0 0 0 130px; }
	#bookBox #BookList { padding: 50px 0 20px; }
}
@media screen and (min-width: 981px) {
	#NewsBox ul li .info { position: absolute; width: 39%; left: 0; bottom: 20%; }
}
@media screen and (max-width: 980px) {
	.bgTxt.stitle { position: relative; font-size: 10vw; -webkit-writing-mode: inherit; writing-mode: inherit; }
	.bgTxt.title { display: none; }
	#NewsBox ul li { text-align: center; }
	#NewsBox ul li .img { width: calc(80% - 10px); }
	#NewsBox ul li .info { margin-top: 20px; width: calc(80% - 10px); display: inline-block; }
	#NewsBox .btn { left: auto; right: 0; }
	#productBox .bgTxt.stitle { padding: 6vw 0 0; top: 0; }
	#productBox .wall-column { width: 50%; }
	#aboutBox .info .title { font-size: 8vw; }
	#aboutBox .info .stitle { font-size: 5vw; }
	#bookBox #customBox ul { padding: 0; }
	#bookBox #BookList ul li , #bookBox #BookList ul li:nth-child(6n) { width: calc(100% / 3); }
}
@media screen and (max-width: 680px) {
	#productBox .wall { margin: auto; width: 80%; }
	#productBox .wall-column { width: 100%; }
	#aboutBox .imgs .list { height: 180vw; }
}
@media screen and (max-width: 500px) {
	#NewsBox .btn { bottom: -10px; }
	#bookBox #BookList ul li , #bookBox #BookList ul li:nth-child(6n) { width: 50%; }
	#bookBox #BookList ul li:nth-child(3n) { width: 100%; }
}
@media screen and (max-width: 450px) {
	#productBox .wall { width: 100%; }
	#aboutBox .info { padding: 10vw 5vw; width: 90vw; }
}










/* ============= 共用：section 容器（最大寬度 1520px） ============= */
.utown-section { width:100%; box-sizing:border-box; padding:56px 20px; }
.utown-section__inner { max-width:1520px; margin:0 auto; }

/* 可選：讓 section 區塊更分明（白底卡片感） */
.utown-section--card {
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  padding:32px 20px;
}
@media (max-width: 768px){
  .utown-section { padding:40px 16px; }
  .utown-section--card { padding:24px 16px; border-radius:12px; }
}

/* ============= 你的標題（品牌金/深色＋白底版） ============= */
.utown-h2-title {
  position: relative;
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  text-align: center;
  letter-spacing: 1px;
  margin: 0 auto 28px;
  padding: 0.6em 1.2em;
  background: linear-gradient(90deg, rgba(203,145,87,0.15), rgba(77,77,77,0) 60%);
  border-left: 4px solid #cb9157;
  border-right: 4px solid #cb9157;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(203,145,87,0.25);
  text-shadow: 0 3px 10px rgba(0,0,0,0.5);
  overflow: hidden;
  animation: utown-glow 4s infinite linear;
  transition: transform .3s ease, box-shadow .3s ease;
}
.utown-h2-title strong, .utown-h2-title b {
  background: linear-gradient(90deg, #cb9157, #9e744c, #8f6a49) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 12px rgba(218,138,81,0.45) !important;
}
.utown-h2-title :where(strong, b) {
  font: inherit;                
  font-weight: 800;             
  font-family: inherit;         
  color: inherit;               
  letter-spacing: inherit;
  text-shadow: inherit;         
  vertical-align: baseline;
  white-space: nowrap;           
}

@keyframes utown-glow {
  0%{ box-shadow:0 0 15px rgba(203,145,87,.25) }
  50%{ box-shadow:0 0 28px rgba(203,145,87,.45) }
  100%{ box-shadow:0 0 15px rgba(203,145,87,.25) }
}
.utown-h2-title:hover{ transform:translateY(-2px); box-shadow:0 0 25px rgba(218,138,81,.45) }
@media (max-width:768px){
  .utown-h2-title{ font-size:clamp(18px,5vw,24px); border-radius:8px; margin-bottom:20px; }
}
/* 白底/淺底版 */
.utown-h2-title--light{
  color:#333; background:linear-gradient(90deg, rgba(218,138,81,.18), rgba(255,255,255,0) 70%);
  border-left-color:#cb9157; border-right-color:#cb9157;
  box-shadow:0 0 10px rgba(203,145,87,.15); text-shadow:none; animation:none;
}
.utown-h2-title--light strong,.utown-h2-title--light b{
  background:linear-gradient(90deg, #cb9157, #9e744c, #8f6a49);
  -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; text-shadow:none !important;
}
.utown-h2-title--light:hover{ transform:translateY(-1px); box-shadow:0 0 18px rgba(203,145,87,.25) }

/* ============= 主功能 4 卡片 ============= */
.utown-home-popular__wrapper{
  display:flex; flex-wrap:wrap; justify-content:center; gap:24px; margin-top:32px;
}
.utown-home-popular__card{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex:1 1 calc(25% - 24px); min-width:260px; max-width:320px;
  padding:20px; border-radius:16px; text-decoration:none;
  color:#fff; background:linear-gradient(90deg, #289d82 0%, #2779d9 100%);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.utown-home-popular__card:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,.14) }
.utown-home-popular__icon{ width:60px; height:60px }
.utown-home-popular__text{ font-size:16px; font-weight:700 }
.utown-home-popular__btn{
  background:#000; color:#fff; padding:8px 14px; border-radius:8px; font-size:14px; font-weight:700;
  transition:transform .2s ease; white-space:nowrap;
}
.utown-home-popular__btn:hover{ transform:scale(1.06) }
/* 個別卡片的漸層動態（保留你的設定） */
.utown-home-popular__card.number-game{ animation:gradientChangeNumberGame 3s ease infinite alternate }
@keyframes gradientChangeNumberGame{ 0%{background:linear-gradient(90deg,#289d82,#2779d9)} 100%{background:linear-gradient(90deg,#008f6e,#005f4e)} }
.utown-home-popular__card.ranking-board{ animation:gradientChangeRankingBoard 3s ease infinite alternate }
@keyframes gradientChangeRankingBoard{ 0%{background:linear-gradient(90deg,#f39c12,#f1c40f)} 100%{background:linear-gradient(90deg,#d68910,#e67e22)} }
.utown-home-popular__card.prediction{ animation:gradientChangePrediction 3s ease infinite alternate }
@keyframes gradientChangePrediction{ 0%{background:linear-gradient(90deg,#e74c3c,#c0392b)} 100%{background:linear-gradient(90deg,#d35400,#e67e22)} }
.utown-home-popular__card.personal-achievement{ animation:gradientChangePersonalAchievement 3s ease infinite alternate }
@keyframes gradientChangePersonalAchievement{ 0%{background:linear-gradient(90deg,#9b59b6,#8e44ad)} 100%{background:linear-gradient(90deg,#6c3483,#5b2c6f)} }
@media (max-width:1024px){
  .utown-home-popular__card{ flex:1 1 calc(50% - 24px) }
}
@media (max-width:768px){
  .utown-home-popular__wrapper{ gap:16px }
  .utown-home-popular__card{ flex:1 1 100%; border-radius:12px }
  .utown-home-popular__icon{ width:50px; height:50px }
  .utown-home-popular__btn{ font-size:12px; padding:6px 12px }
}

/* ============= Vendor 跑馬燈（1520px 內） ============= */
.vendor-marquee-shell{ margin-top:28px }
.vendor-marquee-container{
  width:100%; overflow:hidden; position:relative; background:#f9f9f9;
  border-radius:16px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.vendor-marquee-container::before,
.vendor-marquee-container::after{
  content:""; position:absolute; top:0; bottom:0; width:60px; pointer-events:none; z-index:2;
}
.vendor-marquee-container::before{
  left:0; background:linear-gradient(90deg, #f9f9f9 0%, rgba(249,249,249,0) 100%);
}
.vendor-marquee-container::after{
  right:0; background:linear-gradient(270deg, #f9f9f9 0%, rgba(249,249,249,0) 100%);
}
.vendor-marquee-content{ display:flex; gap:20px; padding:18px; animation:vendor-marquee 30s linear infinite }
@keyframes vendor-marquee{ from{transform:translateX(100%)} to{transform:translateX(-100%)} }
.vendor-home-card{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:150px }
.vendor-card-home__img{ width:120px; height:auto; border-radius:12px }
@media (max-width:1024px){
  .vendor-marquee-content{ animation-duration:45s }
  .vendor-home-card{ width:100px }
  .vendor-card-home__img{ width:90px }
}











    .home-section {
    padding: 20px;
    background-color: #f9f9f9;
}

.section-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.betting-transaction__tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.nav-pill__wrapper {
    display: flex;
}

.nav-pill2 {
    background: #5d5d61; 
    border-radius: 15px;
    color: #fff; 
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    margin-right: 1rem;
    padding: 10px 35px;
    white-space: nowrap;
    text-align: center;
}

.nav-pill2.selected {
    background-color: #fabb2e;
    color: #000;
}

.betting-transaction__view-more {
    color: #007bff;
    text-decoration: none;
}

.betting-transaction__table-wrapper {
    overflow-x: auto;
}

.betting-transaction__table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 15px; /* 表格的圓角 */
    overflow: hidden; /* 確保圓角生效 */
}

.betting-transaction__table th, .betting-transaction__table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

.betting-transaction__table th {
    background-color: #f1f1f1;
    font-weight: bold;
}

.betting-transaction__icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.member-platinum {
    color: #e5b806;
}

.member-bronze {
    color: #cd7f32;
}

.flex-align {
    display: flex;
    align-items: center;
}

.flex-align svg {
    margin-left: 5px; /* 增加圖標與文字間的間距 */
}

.account-summary__tooltip {
    position: relative;
    display: inline-block;
}

.account-summary__tooltip:hover .account-summary__tooltip-desc {
    display: block;
}

.account-summary__tooltip-desc {
    display: none;
    position: absolute;
    top: 30px;
    left: 0;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 15px; /* 匯率框的圓角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 100;
    width: 180px; /* 限制寬度 */
    height: auto;
    max-height: 150px; /* 最大高度 */
    overflow: hidden;  /* 禁用滾動條 */
    text-align: center; /* 內容置中對齊 */
    font-size: 12px; /* 字體變小 */
}

.account-summary__tooltip:hover .account-summary__tooltip-desc {
    display: block;
}

.account-summary__tooltip-icon {
    cursor: pointer;
}

.betting-table__tips-rate {
    list-style-type: none; /* 移除列表點 */
    padding: 0;
    margin: 0;
}

.betting-table__tips-rate li {
    line-height: 1.5;
}

.betting-table__tips-usd, .betting-table__tips-rate, .account-summary__tooltip-desc p {
    text-align: center; /* 所有內容置中對齊 */
}


  .home-section { padding: 20px; background-color: #f9f9f9; }
  .section-title { font-size: 24px; font-weight: bold; margin-bottom: 20px; }
  .betting-transaction__tab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
  .nav-pill__wrapper { display: flex; }
  .nav-pill2 { background:#5d5d61; border-radius:15px; color:#fff; cursor:pointer; font-size:14px; font-weight:700; margin-right:1rem; padding:10px 35px; white-space:nowrap; text-align:center; }
  .nav-pill2.selected { background-color:#fabb2e; color:#000; }
  .betting-transaction__view-more { color:#007bff; text-decoration:none; }
  .betting-transaction__table-wrapper { overflow-x:auto; }
  .betting-transaction__table { width:100%; border-collapse:collapse; border-radius:15px; overflow:hidden; }
  .betting-transaction__table th, .betting-transaction__table td { padding:10px; border-bottom:1px solid #ddd; text-align:left; }
  .betting-transaction__table th { background-color:#f1f1f1; font-weight:bold; }
  .betting-transaction__icon { width:24px; height:24px; margin-right:10px; }
  .member-platinum { color:#e5b806; }
  .member-bronze { color:#cd7f32; }
  .flex-align { display:flex; align-items:center; }
  .flex-align svg { margin-left:5px; }
  .account-summary__tooltip { position:relative; display:inline-block; }
  .account-summary__tooltip:hover .account-summary__tooltip-desc { display:block; }
  .account-summary__tooltip-desc { display:none; position:absolute; top:30px; left:0; background:#fff; padding:10px; border:1px solid #ddd; border-radius:15px; box-shadow:0 4px 8px rgba(0,0,0,.1); z-index:100; width:180px; max-height:150px; overflow:hidden; text-align:center; font-size:12px; }
  .betting-table__tips-rate { list-style:none; padding:0; margin:0; }
  .betting-table__tips-rate li { line-height:1.5; }