/*英雄开始*/
.hero{ display:flex; margin-top: 20px; background:#fff; padding:40px; border-radius:24px; min-height: 400px; background-image: url(../images/hero-bg.webp);}
.hero-body {display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr);}
.hero-content-left {justify-content: center; display: flex; flex-direction: column; gap:30px;}
.hero-btn {display: flex; gap:12px;}
.hero-content-left h1, .hero-content-left p {color:#fff;}
.hero-content-left h1 {line-height: 1.4; font-size: 30px;}
.hero-content-left h1 span {color:gold;}
.hero-content-right {}
.hero-content-right img {width:100%; height:100%;}
/*英雄结束*/

/*热门游戏开始*/
.popular-game {padding:0;}
.game-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; }
.game-item{ position:relative; overflow:hidden; border-radius:18px; cursor:pointer;}
.game-item img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 0.3s ease;}
.game-item:hover img {}
.style-name{ position:absolute; left:0; right:0; bottom:0; color:#fff; font-size:16px; font-weight:600; background:linear-gradient(#00000000, #000000c9, #000000a3); text-align:center; padding: 10px 10px; overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}
/*热门游戏结束*/
/*为什么选择开始*/
.why-choose { background:#fff; border-radius:24px;}
.choose-grid {display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr);}
.choose-card{border-radius:20px; border:1px solid #ccc; box-shadow: 0px 6px 10px #00000040;overflow: hidden;}
.choose-content {padding:20px;}
.choose-content h3 {font-size:18px; text-align:center; margin-top:15px;}
.choose-content p {text-align:center;margin:10px 0;}
.choose-img {}
.choose-img img {width: 100%; object-fit: cover;}
/*为什么选择结束*/

/*游戏类型开始*/
.game-type{background:#fff; border-radius:24px;}
.type-item{ display:flex; align-items:center; gap:60px; margin-top:80px;}
.type-item .img{ flex:1; }
.type-item .game-content{ flex:1; }
.game-content h3 {margin-bottom:20px; font-size:24px;}
.game-content p {margin-bottom:20px}
.game-content a {border-radius: 50px; background: linear-gradient(to right, rgb(221, 15, 56), rgb(255, 102, 52)); color: #fff; font-size: 16px; font-weight: 600; display: block; width: 146px; height: 36px; line-height: 36px; text-align: center;box-shadow: 0 2px 8px rgba(255, 106, 0, 0.3);}
.type-item:nth-child(even){ flex-direction:row-reverse;}
.game-img {max-width:400px;}
.type-item img{ width:100%; display:block;}
/*游戏类型结束*/

/*app下载开始*/
.app-download {background: url(../images/app-download-bg.webp) center center / cover no-repeat; border-radius:24px;}
.download-content {display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr);}
.download-left {justify-content: center;display: flex;flex-direction: column;color: #fff;}
.download-left h2 {margin-bottom:24px;color: #b24fff;}
.download-left p {margin-bottom:10px;}
.download-left .down-btn { display:flex; gap:20px;}
.down-btn a{ background: linear-gradient(to right, rgb(221, 15, 56), rgb(255, 102, 52)); color: #fff; padding:10px 24px; border-radius:20px;}
.mobile-app {display: flex; justify-content: flex-end;}
.mobile-app img{width: 100%;}
/*app下载结束*/

/*支付开始*/
.payment {background: url(../images/payment-bg.webp) center center / cover no-repeat; border-radius:24px;}
.payment .section-header {color:#fff;}
.payment-content {display: grid; gap:40px; grid-template-columns:repeat(2, 1fr);color:#fff;}
.payment-mode {display: flex; flex-direction: column; gap: 14px;}
.mode-card {display: flex; align-items: center; gap: 1rem;     background: #414141b5; backdrop-filter: blur(20px); border: 1px solid #ccc; padding: 10px; border-radius: 10px;}
.mode-img {height:30px; width:30px;}
.mode-img img {height:30px; width:30px;}
.mode-content h3 { font-size: 1.1rem; font-weight: 600;}
.mode-content p {font-size: 0.9rem; color: #d8d8d8;}
.payment-img {display: flex; justify-content: flex-end;}
.payment-img img {width:100%;}
/*支付结束*/

/*怎么玩开始*/
.how-play {background:#fff; border-radius:24px;}
.how-play .article-content h3 {margin: 1.5rem 0 1rem; line-height: 1.3; color: #222;}
.how-play .article-content p{margin-bottom: 1.5rem; line-height: 1.5; color: #333;}
/*怎么玩结束 

/*联系开始*/
.connect {background: #fff; border-radius:24px;}
.connect-header h2 {text-align:center; margin-bottom:20px;}
.connect-grid {display: grid;gap: 40px;grid-template-columns: repeat(2, 1fr);}
.connect-img img{ width:100%}
.connect-card {display: grid;gap: 12px;grid-template-columns: repeat(2, 1fr);}
.connect-item {border-radius:20px;border: 1px solid #cccccc;padding:12px; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); position: relative;}
.connect-item h3 {margin:20px 0 10px; }
.connect-item.live-chat {background: linear-gradient(to right, #dd0f38, #ff6634);}
.connect-item.hotline {background: linear-gradient(to right, #3D81E2, #438DFF);}
.connect-item.email {background: linear-gradient(to right, #CC8529, #DA9621);}
.connect-item.viber {background: linear-gradient(to right, #7F4DA0, #7C3FBA);}
.connect-mode {color:#fff;}
.connect-mode a{display:block; margin-top:10px;text-align:right;font-size:16px;}
.connect-item img {margin-top:10px;position: absolute;top:10px;right:10px;}
/*联系结束*/

/*安全开始*/
.safety{background: url(../images/legality-bg.webp) center center / cover no-repeat; border-radius:24px;}
.safety-connect {display: grid;gap: 12px;grid-template-columns: repeat(2, 1fr); align-items: center; color: #fff;}
.safety-left h2 {margin-bottom:24px; }
.safety-right {display:flex; justify-content:flex-end;}
.safety-card {display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); margin-top:30px;}
.safety-item {background: #ffffffb5; backdrop-filter: blur(20px); border: 1px solid #ccc; border-radius: 20px; padding: 10px 20px;}
.item-header {display: flex; align-items: center; gap: 12px; margin-bottom: 10px;}
.item-header img{ width: 40px;height: 40px;    background: #cb0000;  border-radius: 10px 0 10px;  padding: 5px;}
.item-header h3 {font-size:18px;}
/*安全结束*/

/*常见问题开始*/
.faqs {padding:0;}
.faqs h2 {font-size: 22px;}
.faq-item h3 {margin: 0;}
.faq-list {border-radius: 10px;overflow: hidden;border: 1px solid #e0e0e0;background: #fff;box-shadow: 0 4px 12px rgba(0,0,0,0.05);}
.faq-item { border-bottom: 1px solid #e0e0e0;}
.faq-item:last-child {border-bottom: none;}
.faq-question { color:#000; width: 100%; text-align: left; padding: 1rem; font-size: 1.05rem; font-weight: 600; border: none; background: linear-gradient(90deg,#f9f9f9,#f9f9f9); cursor: pointer; outline: none; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s;}
.faq-question:hover {background: linear-gradient(90deg,#f1f1f1,#f1f1f1);}
.faq-question::after {content: '\25BC';transition: transform 0.4s ease;font-size: 0.8rem;color: #555;}
.faq-question[aria-expanded="true"]::after {transform: rotate(180deg);}
.faq-answer {font-size: 0.95rem;line-height: 1.6;color: #333;overflow: hidden;max-height: 0;opacity: 0;padding: 0 1.5rem;transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;}
.faq-answer.show {opacity: 1;max-height: 1000px;padding: 1.2rem 1rem;}
.faq-answer.show p {margin-bottom: 0;}
.faq-item.active {box-shadow: 0 4px 20px rgba(0,0,0,0.08);border-radius: 10px;}
.faq-item.active .faq-question {background: #0050ff;}
.faq-item.active .faq-question, .faq-item.active .faq-question::after { color: #fff; }
/*常见问题结束*/

/*CTA开始*/
.call {padding:0;}
.call-reward {  position:relative; border-radius:12px; overflow:hidden; background:
    linear-gradient(
      rgba(0,0,0,.35),
      rgba(0,0,0,.35)
    ),
    url("../images/bingoplus-bonus-bg.webp") center/cover no-repeat;
	background-position:top center; min-height:110px; display:flex; align-items:center; justify-content:space-between; text-align:left; padding:24px;}
.call-content{ position:relative; z-index:2; color:#fff;}
.call-title{ font-size:30px; font-weight:700; margin-bottom:24px; line-height:1.4;}
.call-desc{ font-size:20px; line-height:1.5; margin-bottom:34px;}
.call-desc span{font-size:40px; font-weight:900; color:#ffee00; -webkit-text-stroke: 1px #7a2d00;}
.claim-btn{ border:none; background:linear-gradient(180deg, #df1438, #fd6234); color:#fff; font-size:20px; font-weight:700; padding:12px 24px; border-radius:18px;
  border:2px solid rgba(255,255,255,.35);cursor:pointer; box-shadow: inset 0 1px 2px rgba(255,255,255,.25), 0 4px 10px rgba(0,0,0,.25);}
/*CTA结束*/

/*移动布局*/
@media (max-width: 768px) {
    .hero {margin:0; border-radius:0px;}
    .hero-btn {justify-content: center;}
    .hero-body {margin-top:80px;}
    .hero-content-left h1 {font-size:26px;}
    .hero-body, .choose-grid, .download-content, .payment-content,.connect-grid, .safety-connect,.connect-card{ grid-template-columns: repeat(1, 1fr);}
    .game-grid{ grid-template-columns:repeat(3, 1fr); }
    .type-item {margin-top:40px;}
    .type-item, .type-item:nth-child(even){flex-direction:column; gap:20px;}
    .down-btn {justify-content:center;}
    .payment-left h2, .safety-left h2 {text-align:center;}
    .safety-card {grid-template-columns: repeat(1, 1fr);}
    .call-reward { flex-direction: column; min-height:320px; border-radius:28px; justify-content:center; text-align:center; padding:40px 24px;}
}