.page-h1 {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#indexwrapper{
    max-width: 1540px;
    margin: 0 auto;
}
#newsandcontact{
	position: relative;
	background: #1e7f5f;
}
#newsandcontact .newstitle{
	padding: 40px 2.5%;
	text-align: left;
	border-bottom: 1px solid #ffffff5e;
}
#newsandcontact .newstitle img{
	width: 50px;
}
#newsandcontact .contacttitle{
	width: 100%;
	overflow:
	hidden;
	padding: 50px 0 0;
}
#newsandcontact .contacttitle video{
    width: 100%;
}
#newsandcontact .contacttitle:hover b{
	animation-name:shake;
	animation-duration:3s;
}
#newsandcontact .newstitle p,
#newsandcontact .contacttitle p{
	display:inline-block;
	margin-left:10px;
	font-size: 32px;
	color: #fff;
}
#newsandcontact .newstitle p a{
	color:#fff;
}
#newsandcontact .contacttitle p a{
	color:#1e7f5f;
}
#newsandcontact .contacttitle b{
	display: inline-block;
    float: right;
}
#news{background: #1e7f5f;padding-top: 20px;}
#news .newslist{
}
#news .newslist .box{
	padding: 25px;
	border-right: 1px solid #ffffff24;
	overflow: hidden;
}
#news .newslist .box:hover{
	background:#147152;
}
#news .newslist .box .date{
	float: left;
	width: 34%;
	margin-right: 20px;
}
#news .newslist .box .date a{
	display: block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
	transition:all ease-in-out 0.2s;
}
#news .newslist .box .date p{
	font-size:23px;
}
#news .newslist .box .date p.bottom{
	font-size:30px;
	margin-top: 15px;
}

#news .newslist .box .newsinfo{
	float: left;
	width: 60%;
}
#news .newslist .box .newsinfo h3{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
#news .newslist .box .newsinfo h3 a{
	color:#fff;
	font-size: 18px;
}
#news .newslist .box .newsinfo article{
	color: #ffffffa6;
	font-size: 12px;
	height: 36px;
	overflow: hidden;
	margin-top: 8px;
	line-height: 150%;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
#about{
}
#about section{
	background-repeat:no-repeat;
	background-position:0 100%;
	padding: 30px 0;
}
#about .about-wrap{
	width:50%;
	float: left;
	overflow:hidden;
}
#about .about-wrap article{
	width: 60%;
	float: right;
	margin-top: 130px;
	line-height: 180%;
	margin-right: 5%;
	color:#444444;
	font-size:14px;
}
#about .about-wrap p{
	float: right;
    width: 60%;
    margin-top: 30px;
    text-align: right;
	margin-right: 5%;
}
#about .about-wrap p a{
	color:#fff;
	background:#cea330;
	display: inline-block;
    padding: 10px 50px;
}
#index-article{
}
#index-article h2,
#product h2{
	font-size: 40px;
	color:#313131;
	padding: 25px 0 10px;
	position:relative;
	line-height: 100%;
}
#index-article h2 b,
#product h2 b{
	color: #6b6b6b;
	font-size: 28px;
}
#index-article h2:after,
#product h2:after{
	position:absolute;
	display:block;
	content:'';
	width: 6em;
	height: 8px;
	background: rgb(240, 148, 51);
	bottom:-4px;
	left:0;
}
#index-article .articleList{
	overflow:hidden;
	margin: 40px 0;
}
#index-article .articleList a{
    height: 400px;
    display: block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100%;
    margin: 0 10px;
    transition:all ease-in-out 0.3s;
}
#index-article .articleList a:hover{
	background-size:110%;
	filter: grayscale(50%);
}

#product{
	margin: 20px 0 60px;
} 
#product .product-show{
	margin-top: 30px;
}
#product .product-show .p-box{
	position: relative;
	margin: 0 10px;
}
#product .product-show .p-box .photo a{
    display: block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}
#product .product-show .p-box h3{
	text-align:center;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	background:rgba(0,0,0,0.7);
	padding: 5px 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#product .product-show .p-box h3 a{
	color:#fff;
	font-size:16px;
}
#service{
	background-image: url(/images/32/services-bg.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	padding: 90px 0;
}
#service .freebox{
	width: 40%;
	float:right;
	padding: 25px 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Safari only override */
    ::i-block-chrome, #service {
		background-attachment:initial;
    }
}

#service h2{
	text-align: right;
	color:#fff;
	font-size: 55px;
	font-weight:normal;
}
#service h2 span{
	display: block;
    margin: 0 auto 25px;
    text-align: center;
}
#service article{
	text-align: right;
	color: #ffffffbf;
	font-size:18px;
	margin: 30px 0 0;
	line-height: 190%;
}
@media screen and (max-width: 1280px) {
	#news .newslist .box .date{
		width: 90%;
		margin: 0 auto;
		float: none;
	}
	#news .newslist .box .newsinfo{
		width: 100%;
		float:none;
		padding: 23px 30px 0;
		text-align: center;
		margin-left: -31px;
	}
	#newsandcontact .contacttitle{
	    padding: 12px 2.5% 13px;	
	}
	#index-article .articleList .article-list{
		margin-right: 0;
	}
}
@media screen and (max-width: 980px) {
	#newsandcontact{
	    margin-top: 0;	
	}
	#news .newslist .box{
	    padding: 25px;	
	}
	#news .newslist .box .date p{
	    font-size: 18px;	
	}
	#news .newslist .box .date p.bottom{
	    font-size: 26px;	
	}
	#about section{
		background-size: 50%;	
	}
	#about .about-wrap{
		width:60%;
	}
	#service h2{
		font-size: 30px;		
	}
	#service article{
		font-size: 16px;
		margin: 30px 0 0;		
	}
	#about section{
	    padding: 0px 0 30px;	
	}
}
@media screen and (max-width: 768px) {
	#about .about-wrap{
		width:100%;
	}
	#newsandcontact .contacttitle{
		width:100%;
		text-align:center;
		margin:0 auto;
		float:none;
	}
	#newsandcontact .newstitle{
		text-align:center;
		padding: 11px 0 40px;
	}
	#index-article h2{
		text-align: center;
		padding: 50px 0 10px;
	}
	#index-article h2:after, #product h2:after{
		text-align:center;
		left: calc((100% / 2) - 100px);
	}
	
	#index-article .articleList a{
		height:300px;
	}
	#product h2{
		text-align: center;
		padding: 0 0 10px;
	}
	#product .product-show{
		margin-top: 52px;
	}
	#service{
		background-position: 85% 50%;
		padding: 10px 0;
	}
}
@media screen and (max-width: 640px) {
	#newsandcontact .newstitle,
	#newsandcontact .contacttitle{
	   width:95%;
	}
	#service{
		background-position: 60% 50%;
		padding: 0;
	}
}
@media screen and (max-width: 480px) {
	#about .about-wrap article{
	    margin-top: 170px;	
	}
    #index-article h2{font-size: 35px;}
	#newsandcontact .newstitle p, #newsandcontact .contacttitle p{font-size: 26px;}
	#index-article .articleList a{height: 430px;}
	#service .freebox{width: 60%;}
}



/* ====== NEWS區塊 ====== */
:root{
  --tu-green:#1e7f5f;
  --tu-green-2:#20a27f;
  --tu-green-3:#177d62;
  --tu-ink:#0f2a22;
  --tu-line:rgba(255,255,255,.18);
  --tu-card:rgba(255,255,255,.08);
  --tu-card2:rgba(0,0,0,.12);
  --tu-txt:#eefaf6;
  --tu-sub:rgba(238,250,246,.82);
  --tu-accent:#ffde00;
}

/* --- 外框背景（你截圖那塊綠底） --- */
#tu-casino-coverage,
#casino-news{
  background: linear-gradient(180deg, var(--tu-green-2), var(--tu-green-3));
}

/* --- 標題列 --- */
.tu-news-head{padding:18px 0 10px}
.tu-news-head__inner{
  width:min(95vw,1280px);
  margin:0 auto;
}
.tu-news-head__crumb{
  margin:0;
  color:var(--tu-txt);
  font-weight:800;
  font-size:22px;
  letter-spacing:.5px;
  display:flex;
  align-items:center;
  gap:10px;
}
.tu-news-head__link{
  color:var(--tu-txt);
  text-decoration:none;
  position:relative;
}
.tu-news-head__link:hover{color:var(--tu-accent)}
.tu-news-head__sep{opacity:.75}
.tu-news-head__text{opacity:.92}

/* 下底線（像你圖上的分隔線） */
.tu-news-head__inner::after{
  content:"";
  display:block;
  height:1px;
  background:var(--tu-line);
  margin-top:12px;
}

/* --- News Grid --- */
.tu-news{padding:18px 0 26px}
.tu-news__grid{
  width:min(95vw,1280px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

/* ====== Carousel 主體 ====== */
.tu-news__carousel{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}

/* 隱藏 scrollbar（但可滑） */
.tu-news__carousel::-webkit-scrollbar{display:none}
.tu-news__carousel{scrollbar-width:none}

/* 每張卡片 */
.tu-news__carousel .tu-news-card{
  flex:0 0 calc(33.333% - 12px); /* 預設 3 個 */
  scroll-snap-align:start;
}

/* 大螢幕 4 個 */
@media (min-width:1600px){
  .tu-news__carousel .tu-news-card{
    flex:0 0 calc(25% - 14px);
  }
}

/* 平板 */
@media (max-width:1024px){
  .tu-news__carousel .tu-news-card{
    flex:0 0 calc(50% - 10px);
  }
}

/* 手機 */
@media (max-width:600px){
  .tu-news__carousel .tu-news-card{
    flex:0 0 82%;
  }
}

/* --- 卡片 --- */
.tu-news-card{
  background:linear-gradient(180deg, var(--tu-card), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.16);
  transform:translateY(0);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tu-news-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(0,0,0,.24);
  border-color:rgba(255,255,255,.26);
}

/* 圖片：用背景圖 cover，不用舊 blank.png */
.tu-news-card__media{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio: 16 / 9;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.tu-news-card__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 80% at 70% 25%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.32));
  opacity:.95;
  transition:opacity .18s ease;
}
.tu-news-card:hover .tu-news-card__overlay{opacity:1}

/* 內容 */
.tu-news-card__body{
  padding:14px 14px 16px;
}
.tu-news-head__title{
  margin:0 0 8px;
  font-size:26px;
  font-weight:900;
  letter-spacing:.6px;
  line-height:1.25;
  color:#eafff6;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
  position:relative;
  display:inline-block;
}

/* 左側裝飾線 */
.tu-news-head__title::before{
  content:"";
  position:absolute;
  left:-14px;
  top:50%;
  transform:translateY(-50%);
  width:6px;
  height:70%;
  border-radius:4px;
  background:linear-gradient(
    180deg,
    #ffde00,
    #20a27f
  );
}

@media (max-width:600px){
  .tu-news-head__title{
    font-size:20px;
    padding-left:14px;           
  }
  .tu-news-head__title::before{
    left:0;                       
    width:5px;
    height:70%;
  }
}

.tu-news-card__title{
  margin:0 0 8px;
  font-size:16px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:.2px;
}
.tu-news-card__titleLink{
  color:var(--tu-txt);
  text-decoration:none;
}
.tu-news-card__titleLink:hover{color:var(--tu-accent)}

.tu-news-card__desc{
  margin:0;
  color:var(--tu-sub);
  font-size:13px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(13px * 1.55 * 2); /* 兩行高度固定，卡片對齊 */
}

/* 底部操作 */
.tu-news-card__meta{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.tu-news-card__more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.14);
  color:var(--tu-txt);
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.tu-news-card__more:hover{
  transform:translateY(-1px);
  background:rgba(0,0,0,.22);
  border-color:rgba(255,255,255,.28);
  color:var(--tu-accent);
}

/* --- RWD --- */
@media (max-width:1024px){
  .tu-news__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tu-news-head__crumb{font-size:20px}
}
@media (max-width:560px){
  .tu-news__grid{grid-template-columns:1fr}
  .tu-news-head{padding:14px 0 8px}
  .tu-news-head__crumb{font-size:18px}
}


.tu-news{ position:relative; }

.tu-news__nav{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  transform:translateY(-50%);
  display:flex;
  justify-content:space-between;
  pointer-events:none; 
  z-index:5;
}

.tu-news__btn{
  pointer-events:auto;
  width:40px;height:40px;border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(0,0,0,.14);
  cursor:pointer;
  position:relative;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.tu-news__btn:hover{ transform:translateY(-1px); background:rgba(0,0,0,.22); border-color:rgba(255,255,255,.30); }
.tu-news__btn--prev{ margin-left:8px; }
.tu-news__btn--next{ margin-right:8px; }
.tu-news__btn::before{
  content:"";
  position:absolute; inset:0;
  margin:auto;
  width:10px;height:10px;
  border-right:2px solid rgba(255,255,255,.86);
  border-bottom:2px solid rgba(255,255,255,.86);
  transform:rotate(-45deg);
}
.tu-news__btn--prev::before{ transform:rotate(135deg); }
.tu-news__btn.is-disabled{
  opacity:.35;
  pointer-events:none;
}
@media (max-width:768px){
  .tu-news__nav{ display:none; } /* 手機直接滑就好 */
}

/* dots */
.tu-news__dots{
  width:min(95vw,1280px);
  margin:10px auto 0;
  display:flex;
  justify-content:center;
  gap:8px;
}
.tu-dot{
  width:8px;height:8px;border-radius:999px;
  border:0;
  background:rgba(255,255,255,.30);
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, width .12s ease;
}
.tu-dot.is-active{
  background:#ffde00;
  width:22px;
}

.tu-news-note{
  width:min(95vw,1280px);
  margin:14px auto 0;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-sizing:border-box;
}

.tu-news-note__text{
  margin:0;
  color:rgba(238,250,246,.86);
  font-size:13px;
  line-height:1.55;
  min-width:0;
  flex:1 1 auto;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.tu-news-note__cta{
  flex:0 0 auto;
  padding:10px 14px;
  border-radius:999px;
  background:linear-gradient(180deg,#ffde00,#f2c900);
  color:#103025;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 10px 18px rgba(0,0,0,.18);
  transform:translateY(0);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

@media (hover:hover){
  .tu-news-note__cta:hover{
    transform:translateY(-2px);
    filter:saturate(115%);
    box-shadow:0 14px 26px rgba(0,0,0,.26);
    background:linear-gradient(180deg,#20a27f,#177d62);  /* 變綠 */
    color:#eafff6;
  }
}

@media (max-width:768px){
  .tu-news-note{
    flex-direction:column;
    align-items:stretch;
    padding:12px;
  }
  .tu-news-note__cta{
    width:100%;
    max-width: 200px;
    margin: 0 auto;
    text-align:center;
    padding:12px 14px;
  }
}
/* ====== NEWS區塊 end====== */

/* ====== 產品區塊 start====== */
:root{
  --prod-bg1:#0b1b2a;      /* 深藍 */
  --prod-bg2:#122f45;      /* 藍綠深 */
  --prod-card:rgba(255,255,255,.06);
  --prod-line:rgba(255,255,255,.14);
  --prod-txt:#eaf4ff;
  --prod-sub:rgba(234,244,255,.76);
  --prod-accent:#7c5cff;   /* 紫色點綴 */
  --prod-accent2:#23d5b5;  /* 藍綠點綴 */
}

/* 外層底色（和綠色 news 區做區隔） */
#tu-featured{
  background:linear-gradient(180deg, var(--prod-bg1), var(--prod-bg2));
  padding:30px 0 26px;
  border-radius: 20px;
  margin:5px;
}

.tu-prod{
  width:min(95vw,1280px);
  margin:0 auto;
}

/* 標題區 */
.tu-prod__head{margin-bottom:16px}
.tu-prod__title{
  margin:0 0 6px;
  color:var(--prod-txt);
  font-size:26px;
  font-weight:900;
  letter-spacing:.6px;
  line-height:1.25;
  position:relative;
  display:inline-block;
  text-shadow:0 10px 28px rgba(0,0,0,.35);
  padding-left:14px;
}
.tu-prod__title::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:6px;
  height:70%;
  border-radius:6px;
  background:linear-gradient(180deg, var(--prod-accent), var(--prod-accent2));
}
.tu-prod__sub{
  margin:0;
  color:var(--prod-sub);
  font-size:13px;
  line-height:1.6;
}
.tu-prod-card__desc{
  margin:0 12px 10px;
  color:rgba(234,244,255,.82);
  font-size:13px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
  overflow-wrap:anywhere;
}

@media (max-width:600px){
  .tu-prod-card__desc{
    font-size:14px;
    line-height:1.6;
    -webkit-line-clamp:3;
  }
}
/* 橫向滑動（像 news，但更像入口列） */
.tu-prod__track{position:relative}
.tu-prod__list{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:6px 2px 10px;
}
.tu-prod__list::-webkit-scrollbar{display:none}
.tu-prod__list{scrollbar-width:none}

/* 卡片：比 news 更「入口」風格 */
.tu-prod-card{
  flex:0 0 calc(25% - 12px);  /* 桌機 4 個 */
  scroll-snap-align:start;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.08));
  border:1px solid var(--prod-line);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tu-prod-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 20px 44px rgba(0,0,0,.34);
}

/* 圖：用背景 cover，不用 blank.png */
.tu-prod-card__media{
  display:block;
  width:100%;
  aspect-ratio: 16/9;
  background-size:cover;
  background-position:center;
  position:relative;
}
.tu-prod-card__glow{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 80% at 70% 15%, rgba(124,92,255,.25), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45));
  opacity:.95;
  transition:opacity .18s ease;
}
.tu-prod-card:hover .tu-prod-card__glow{opacity:1}

/* 名稱 */
.tu-prod-card__name{
  margin:12px 12px 8px;
  font-size:15px;
  line-height:1.35;
  font-weight:900;
}
.tu-prod-card__link{
  color:var(--prod-txt);
  text-decoration:none;
}
.tu-prod-card__link:hover{color:#ffde00}

/* 按鈕 */
.tu-prod-card__meta{
  padding:0 12px 14px;
  display:flex;
  justify-content:flex-end;
}
.tu-prod-card__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.16);
  color:rgba(234,244,255,.9);
  font-size:13px;
  font-weight:900;
  text-decoration:none;
  transform:translateY(0);
  transition:transform .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
}
@media (hover:hover){
  .tu-prod-card__btn:hover{
    transform:translateY(-1px);
    background:linear-gradient(180deg, var(--prod-accent), #5a3dff);
    border-color:rgba(255,255,255,.22);
    color:#fff;
  }
}

/* RWD：桌機 4、一般桌機 3、平板 2、手機 1.2 滑 */
@media (max-width:1280px){
  .tu-prod-card{flex:0 0 calc(33.333% - 11px);} /* 3 */
}
@media (max-width:980px){
  .tu-prod-card{flex:0 0 calc(50% - 10px);}     /* 2 */
}
@media (max-width:600px){
  .tu-prod__title{font-size:20px}
  .tu-prod-card{flex:0 0 82%;}                  /* 1.2 滑 */
}

.tu-prod-card__media{ position:relative; }

.tu-badges{
  position:absolute;
  top:10px;
  left:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  z-index:6;              
  pointer-events:none;
}

.tu-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color:#eafff6;
  background:rgba(0,0,0,.36);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.tu-badge.is-soft{ background:rgba(0,0,0,.24); }

@media (max-width:600px){
  .tu-badges{ top:8px; left:8px; gap:6px; }
  .tu-badge{ font-size:11px; padding:5px 9px; }
}
/* ====== 產品區塊 end====== */


/* ====== FAQ 區塊 ======  */

:root{
  --bg:#ffffff;
  --text:#111;            /* 主要文字 */
  --muted:#4b5563;        /* 次要文字 */
  --border:#e5edf3;       /* 邊線 */

  /* 主題色：以 #14815e 衍生三段漸層 */
  --brand-1:#14815e;      /* 基準綠 */
  --brand-2:#0f6b4e;      /* 深一階 */
  --brand-3:#0b4b37;      /* 最深 */

  /* 活動提醒：綠系一致 */
  --accent:#0f6b4e;       /* 左側強調線 */
  --note-bg:#e9f7f2;      /* 淡綠底 */
  --note-text:#0f3d2f;    /* 深綠字 */

  --link:#0c7a56;         /* 連結色 */
  --time:#0c7a56;         /* 更新時間 */

  --bubble-bg:#ffffff;
  --bubble-text:#1f2937;
  --bubble-bg-hover:#eef8f4;

  --focus:#0ea5a6;        /* 可視化焦點 */
}

/* 容器 */
.faq-section{
  font-family:"Noto Sans TC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  padding:2rem;
  border-radius:14px;
  max-width:980px;
  margin:0 auto;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}

/* 標題：上下綠系漸層線 */
.faq-section h2{
  font-size:1.9rem;font-weight:800;margin-bottom:1.25rem;
  padding:1rem 0;text-align:center;position:relative;letter-spacing:.5px;color:#0f3d2f;
}
.faq-section h2::before,.faq-section h2::after{
  content:"";position:absolute;left:0;right:0;height:2.5px;
  background:linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
  opacity:.95;
}
.faq-section h2::before{top:0;}
.faq-section h2::after{bottom:0;}

/* 引導文 */
.faq-guide{text-align:center;margin-bottom:1.5rem;}
.faq-guide h3{font-size:1.2rem;font-weight:700;margin-bottom:.35rem;color:#0f3d2f;}
.faq-guide p{font-size:1rem;color:var(--muted);}

/* 活動提醒 + 更新時間 */
.leo-announcement{
  max-width:1540px;
  margin:0 auto 20px auto; 
  padding:0 16px;         
}

p.activity-highlight{
  background:var(--note-bg);
  border-left:4px solid var(--accent);
  padding:12px 14px;margin:16px 5px;border-radius:10px;
  line-height:1.7;color:var(--note-text);
}
p.activity-highlight a{color:var(--link);text-decoration:none;}
p.activity-highlight a:hover{text-decoration:underline;}
.update-note{font-size:.92rem;color:var(--muted);margin:6px 0 18px 4px;font-style:italic;}
.update-note time{color:var(--time);font-weight:700;}

/* 快速導覽泡泡 */
html{scroll-behavior:smooth;}
.faq-bubbles{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 1.25rem;
}
.faq-bubbles a{
  padding:8px 14px;border:1px solid var(--border);border-radius:999px;
  font-size:.95rem;color:var(--bubble-text);text-decoration:none;
  background:var(--bubble-bg);
  transition:background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.faq-bubbles a:hover,
.faq-bubbles a:focus-visible{
  background:var(--bubble-bg-hover);border-color:var(--brand-2);color:var(--brand-2);
  outline:none;box-shadow:0 0 0 2px color-mix(in srgb, var(--brand-2) 28%, transparent);
}

/* 手風琴 */
.faq-item{
  border-bottom:1px solid var(--border);
  padding:1rem 0;margin-bottom:12px;
}
.faq-question{
  font-size:1.1rem;font-weight:700;cursor:pointer;position:relative;padding-right:2rem;color:#0f3d2f;
}
.faq-question::after{
  content:"+";position:absolute;right:0;top:0;line-height:1;font-weight:800;color:var(--brand-2);
}
.faq-item.open .faq-question::after{content:"-";}
.faq-answer{display:none;margin-top:.55rem;line-height:1.85;color:var(--muted);}
.faq-item.open .faq-answer{display:block;}

/* 可達性 */
.faq-question:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;border-radius:6px;
}

/* RWD */
@media (max-width:768px){
  .faq-section{padding:1.25rem;width: auto;margin: 10px;}
  .faq-section h2{font-size:1.55rem;}
  .faq-guide h3{font-size:1.05rem;}
  .faq-guide p{font-size:.95rem;}
  .faq-bubbles a{font-size:.78rem;padding:6px 10px;}
  .faq-question{font-size:1rem;}
  .faq-answer{font-size:.95rem;}
}
/* ======  FAQ 區塊 end====== */

.tu-service {
  background: #1f3f35;
  padding: 60px 0;
  border-radius: 20px;
  margin: 10px;
}

.tu-service__wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  color: #eef6f3;
}

.tu-service__head {
  margin-bottom: 28px;
}

.tu-service__title {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 10px;
}

.tu-service__sub {
  color: rgba(238,246,243,.85);
  line-height: 1.6;
}

.tu-service__content {
  background: rgba(255,255,255,.06);
  border-radius: 20px;
  padding: 28px;
}

.tu-service__feature {
  font-size: 20px;
  margin-bottom: 10px;
}

.tu-service__text {
  line-height: 1.7;
  margin-bottom: 14px;
}

.tu-service__list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}

.tu-service__list li {
  margin-bottom: 6px;
}

.tu-service__cta {
  margin-top: 10px;
}

.tu-service__btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 999px;
  background: linear-gradient(180deg,#ffde00,#f2c900);
  color: #103025;
  font-weight: 800;
  text-decoration: none;
}




.tu-compare{
  max-width:1280px;
  margin:0 auto;
  padding:0 16px 80px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

/* === 區塊標頭（不是文章標題） === */
.tu-compare__head{
  margin:40px 0 28px;
  padding-left:16px;
  border-left:4px solid #2f74ff;
}

.tu-compare__eyebrow{
  display:inline-block;
  margin-bottom:8px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  color:#2f74ff;
  text-transform:uppercase;
}

/* 主標 */
.tu-compare__h2{
  margin:0 0 10px;
  font-size:28px;
  font-weight:900;
  line-height:1.3;
  color:#0f2c4f;
}

.tu-compare__h2 em{
  font-style:normal;
  margin:0 .15em;
  font-weight:700;
  color:#7a8da6;
}

/* 說明文字 */
.tu-compare__sub{
  margin:0;
  max-width:720px;
  font-size:15px;
  line-height:1.7;
  color:#5c6b7a;
}

/* ====== ① 平台區（兩欄） ====== */
.platform-wrap{
  margin:26px auto 54px;
  display:grid;
  grid-template-columns:1.05fr 1.95fr;
  gap:28px;
  align-items:stretch;
}

/* 大卡片 */
.platform-left,
.platform-right{
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  border-radius:22px;
  padding:26px 26px 22px;
  border:1px solid rgba(120,160,220,.28);
  box-shadow:
    0 18px 40px rgba(40,80,150,.14),
    0 2px 8px rgba(40,80,150,.06);
  position:relative;
  overflow:hidden;
}

/* ✅ 修遮擋：光暈在底層 */
.platform-left::before,
.platform-right::before{
  content:"";
  position:absolute;
  inset:-120px -80px auto -80px;
  height:230px;
  background: radial-gradient(circle at 30% 40%, rgba(90,160,255,.18), transparent 62%);
  pointer-events:none;
  z-index:0; /* ✅ 底層 */
}

/* ✅ 內容層全部抬高（避免被 ::before 壓到） */
.platform-left > *,
.platform-right > *{
  position:relative;
  z-index:1;
}

.platform-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(120,160,220,.22);
}
.platform-head h3{
  margin:0;
  font-size:18px;
  font-weight:900;
  letter-spacing:.02em;
}
.platform-check{
  width:22px;height:22px;
  display:grid;place-items:center;
  border-radius:999px;
  background: rgba(70,150,255,.14);
  color:#2f74ff;
  font-weight:900;
}

/* 左側平台卡片 */
.platform-card{
  border:2px solid rgba(120,160,220,.32);
  border-radius:18px;
  padding:30px 16px 22px;
  margin:0 0 18px;
  text-align:center;
  background:#fff;
  box-shadow: 0 12px 26px rgba(30,70,140,.10);
}
.platform-card img{width:92px; height:auto; margin:0 auto 10px; display:block;}
.platform-name{margin:0; font-weight:900; color:#2f5fd8}

/* 右側特點 grid */
.feature-grid{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
.feature-grid li{
  border:2px solid rgba(120,160,220,.30);
  border-radius:18px;
  padding:18px 14px 16px;
  background:#fff;
  box-shadow: 0 12px 26px rgba(30,70,140,.10);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  min-height:150px;
  gap:10px;
}
.feature-grid li img{
  width:64px;
  height:64px;
  object-fit:contain;
  display:block;
  margin:0 auto;
}
.feature-grid li .feat-text{
  margin:0;
  color:#2f5fd8;
  font-size:14px;
  line-height:1.6;
  font-weight:750;
}

/* 右側小 CTA */
.tu-mini-cta{margin-top:16px; display:flex; flex-direction:column; gap:8px}
.tu-mini-cta__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:999px;
  background: linear-gradient(180deg,#ffde00,#f2c900);
  color:#103025;
  font-weight:900;
  text-decoration:none;
  box-shadow: 0 12px 26px rgba(255,210,0,.22);
  transition:transform .14s ease, filter .14s ease;
}
.tu-mini-cta__btn:hover{transform:translateY(-1px); filter:brightness(1.02)}
.tu-mini-cta__hint{color:#66788a}

/* ====== ② 遊戲介紹 ====== */
.tu-games{margin:28px 0 48px}
.tu-games__head{margin-bottom:18px}
.tu-games__h2{margin:0 0 10px; font-size:26px; font-weight:900}
.tu-games__sub{margin:0; color:#5c6b7a; line-height:1.7}

.tu-games__grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:14px;
}
.tu-game-card{
  border-radius:18px;
  padding:16px 14px;
  background: linear-gradient(180deg, #2b78d6, #1c5fb6);
  color:#fff;
  box-shadow: 0 14px 30px rgba(20,70,140,.18);
}
.tu-game-card__t{margin:0 0 8px; font-size:16px; font-weight:900}
.tu-game-card__d{margin:0; color:rgba(255,255,255,.86); line-height:1.6; font-size:13px}

/* ====== ③ 優劣勢比較（表格 + list 感） ====== */
.tu-adv{margin-top:24px}
.tu-adv__h2{margin:0 0 14px; font-size:26px; font-weight:900}

.tu-adv__panel{
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(120,160,220,.28);
  box-shadow: 0 18px 40px rgba(40,80,150,.14), 0 2px 8px rgba(40,80,150,.06);
  background: linear-gradient(180deg, #cfe0f5, #bcd0ef);
  position:relative;
}

.tu-adv__cap{
  text-align:center;
  font-weight:900;
  padding:14px 10px 12px;
  color:#143b6b;
  background: rgba(255,255,255,.35);
  border-bottom: 1px solid rgba(20,60,120,.12);
}

.tu-adv__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  background: #2c68b7;
  color:#fff;
}

/* 兩欄 */
.tu-adv__col{
  padding:20px 18px 18px;
  min-height:260px;
}
.tu-adv__col + .tu-adv__col{
  border-left: 1px solid rgba(255,255,255,.18);
}

.tu-adv__t{
  margin:0 0 14px;
  font-size:16px;
  font-weight:900;
  letter-spacing:.02em;
  color:#eef6ff;
}

.tu-adv__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.tu-adv__list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  line-height:1.6;
  color:rgba(255,255,255,.92);
}

.tu-ico{
  width:22px; height:22px;
  display:grid; place-items:center;
  border-radius:6px;
  flex:0 0 22px;
  font-weight:900;
}
.tu-ico.ok{background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22)}
.tu-ico.no{background: rgba(0,0,0,.12); border:1px solid rgba(255,255,255,.18)}

.tu-adv__foot{
  background: rgba(255,255,255,.28);
  color:#0f2c4f;
  padding:14px 16px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid rgba(20,60,120,.12);
}
.tu-adv__link{
  color:#0f2c4f;
  font-weight:900;
  text-decoration:none;
  background: linear-gradient(180deg,#ffde00,#f2c900);
  padding:10px 12px;
  border-radius:999px;
}
.tu-adv__link:hover{filter:brightness(1.02)}

/* ====== RWD ====== */
@media(max-width:980px){
  .platform-wrap{grid-template-columns:1fr; gap:18px;}
  .feature-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .tu-games__grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .tu-adv__grid{grid-template-columns:1fr;}
  .tu-adv__col + .tu-adv__col{border-left:none; border-top:1px solid rgba(255,255,255,.18);}
}
@media(max-width:520px){
  .feature-grid{grid-template-columns:1fr;}
}