@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');
/* CSS Document */

body{
    background: #f2f2f2;
}
a,
a:active,
a:hover{
    color: #000;
    transition: .2s linear;
}
/* 內容外殼 */
.outer{
    width: 100%;
    max-width: 1260px;
    margin: 0 auto 30px;
    background: #fff;
}
/* 內容內殼 */
.inner_box{
    width: min(1160px, 100%);
    margin: 0 auto;
    padding: 15px 2% 15px;
    text-align: center;
}
#olympic2024 button{
    cursor: pointer;
}

/*------------------------------*\
            Top Button
\*------------------------------*/
.top {
    clear:both;
    display:none;
    width:45px;
    height:45px;
    border-radius:100%;
    cursor:pointer;
    box-shadow:0 0 6px 1px rgba(0,0,0,0.2);
    position:fixed;
    bottom:120px;
    right:30px;
    z-index:2;
    background:#0f5d7f;
}
.top div:before {
    content: "︿";
    display:inline-block;
    color:#fff;
    font-size:25px;
    font-weight:600;
    position:relative;
    top:-2px;
    left:11px;
}
.top div:after{
    content: "TOP";
    color: #fff;
    font-size:15px;
    font-weight: 600;
    letter-spacing: 1px;
    position: relative;
    top:-3px;
    left:7px;
}

/*---------------------------*\
			  廣告
\*---------------------------*/
.suggest {
    width:100%;
    text-align:center;
    margin:0 auto;
    overflow: hidden;
}
.suggest div,
.suggest a,
.suggest img {
    line-height:0;
}
div.suggestBottom {
    margin-top: -10px;
    margin-bottom:20px;
}
div.suggestTop {
    margin-top:20px;
}
div.suggestCenter {
    margin-left:auto;
    margin-right:auto;
}
/* 廣告切換電腦版手機版 */
.suggest_m {
    display: none;
}
.suggest_pc {
    display: block;
}
/* 巨橫幅廣告 */
.suggest div#ad-K1 {
    margin:20px auto;
}
/* 浮水印廣告 + 關閉鍵 */
.suggest div#ad-I1-bottom {
    margin:0;
    z-index: 100;
}
.door-bottom-head{
    position: fixed;
    z-index:0;
}
.door-bottom{
    text-align:center;
    bottom: 0;
    width: 100%;
    height: 50px;
}
.door-bottom-space{
    float: left;
    position:relative;
    background-color:#fff;
    z-index:-1;
}
.door-bottom i.close{
    width:30px;
    height:30px;
    border:1px solid #999;
    border-radius:100%;
    background-color:rgba(0,0,0,0.15);
    position:absolute;
    top:-30px;
    left:0;
    display:none;
}
.door-bottom i.close:before{
    content:"×";
    font-size:2rem;
    color:#555;
    font-style:normal;
    line-height:0.9;
}

@media screen and (max-width:970px) {
    /* 廣告用 */
    /* 廣告切換電腦版手機版 K2 pad不出*/
    .suggest_pc{
        display: none;
    }
    .description { margin-top: 20px;}
}
@media screen and (max-width:600px) {
    /* 廣告用 */
    /* 廣告切換電腦版手機版 */
    .suggest_pc{
        display: none;
    }
    .suggest_m{
        display: block;
    }
    /* 行動裝置中所有廣告歸 0 */
    .suggest > div{
        margin:0px;
    }
    div.suggestBottom{
        margin-top: -15px;
        margin-bottom:15px;
    }
    div.suggestTop{
        margin-top:15px;
    }
    div.suggestCenter{
        margin-left:auto;
        margin-right:auto;
    }
}

/*---------------------------*\
			大欄位標題
\*---------------------------*/
.title_ribbon{
    width: 100%;
    height: 60px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f2f2f2;
    margin-bottom: 20px;
    /* title_bg 長寬比 0.3333 */
    --bgWidth: 330px;
    --bgHeight:calc(var(--bgWidth) * 0.3333);
    --bgSize: var(--bgWidth) auto;
}
.title_ribbon::before{
    content: "";
    display: block;
    width: var(--bgWidth);
    height: var(--bgHeight);
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1;
}
.title_ribbon::after{
    content: "";
    display: block;
    width: 100%;
    height: 56px;
    position: absolute;
    bottom: -4px;
    left: 0;
    z-index: 0;
}
.title_ribbon p{
    font-size: 28px;
    letter-spacing: -0.5px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 6px rgba(0, 0, 0, .8);
    padding-top: 20px;
    z-index: 1;
}
@media screen and (max-width: 500px) {
    .title_ribbon{
        --bgWidth: 290px;
    }
    .title_ribbon p{
        font-size: 25px;
        padding-top: 18px;
    }
    .title_ribbon::after{
        height: 50px;
        bottom: 1px;
    }
}
/* 通用中獎底 */
.title_ribbon::before{
    background: url(../images/title_winner.png) no-repeat center;
    background-size: 74%;
}
.title_ribbon::after{
    background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0, rgb(193 193 193) 100%);
}

/* 強打知識王 */
.knowledge .title_ribbon::before{
    background: url(../images/bartit_05.png) no-repeat center;
    background-size:  100%;
}
.knowledge .title_ribbon::after{
    background: url(../images/bar02_cfe.png) no-repeat center;
}

/* 勝負神預測 */
.match .title_ribbon::before{
    background: url(../images/bartit_07.png) no-repeat center;
    background-size:  100%;
}
.match .title_ribbon::after{
    background: url(../images/bar03_brn.png) no-repeat center;
}

/* 冠軍殊死戰 */
.predicts .title_ribbon::before{
    background: url(../images/bartit_06.png) no-repeat center;
    background-size:  100%;
}

.predicts .title_ribbon::after{
    background: url(../images/bar04_db.png) no-repeat center;
}

/* 冠軍殊死戰 - 最新積分榜 */
.score .title_ribbon::before{
    background: url(../images/bartit_08.png) no-repeat center;
    background-size:  100%;
}

.score .title_ribbon::after{
    background: url(../images/bar05_pp.png) no-repeat center;
}

/* 活動次頁 - 活動獎項 */
.knowledge .swiperBox .title_ribbon::before,
.match .swiperBox .title_ribbon::before,
.predicts .swiperBox .title_ribbon::before{
    background: url(../images/bartit_03.png) no-repeat center;
    background-size: 100%;
}

/* 活動次頁 - 活動辦法 */
.knowledge .rule .title_ribbon::before,
.match .rule .title_ribbon::before,
.predicts .rule .title_ribbon::before{
    background: url(../images/bartit_02.png) no-repeat center;
    background-size: 100%;
}

/* 活動次頁 - 活動辦法、活動獎項共用藍背景 */
.knowledge .swiperBox .title_ribbon::after,
.knowledge .rule .title_ribbon::after,
.match .swiperBox .title_ribbon::after,
.match .rule .title_ribbon::after,
.predicts .swiperBox .title_ribbon::after,
.predicts .rule .title_ribbon::after{
    background: url(../images/bar01_blue.png) no-repeat center;
}

/* 應援加油團 - 贊助商 */
.sponsor .title_ribbon::before{
    background: url(../images/bartit_04.png) no-repeat center;
    background-size: 100%;
}
.sponsor .title_ribbon::after{
    background: url(../images/bar01_blue.png) no-repeat center;
}

/* ----- 內容收合 共用 ----- */
#olympic2024 .closeBtn,
.moreContent{
    display: none;
}

/*---------------------------*\
		   TOP BANNER
\*---------------------------*/
.jumbotron{
    width: 100%;
    overflow: hidden;
    margin: 0 auto 10px;
}
.jumbotron_box img{
    width: 100%;
    height: auto;
}
.img_pad,
.img_mob{
    display: none;
}
@media screen and (max-width: 980px){
    .img_web{
        display: none;
    }
    .img_pad{
        display: block;
    }
}
@media screen and (max-width: 736px){
    .img_pad{
        display: none;
    }
    .img_mob{
        display: block;
    }
}

/*---------------------------*\
			SHARE SNS
\*---------------------------*/
.share_bar{
    width: 100%;
    height: 70px;
    background: url(../images/bartit_01.png) no-repeat;
    background-size: 300px auto;
    background-position: center -2px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    padding-top: 0px;
}
.index .share_bar{
    margin-bottom: 0px;
}
.share_bar::before,
.share_bar::after{
    content: "";
    width: 50%;
    height: 56px;
    position: absolute;
    bottom: 6px;
    z-index: -1;
}
.share_bar::before{
    background: #3eac4a;
    left: 0;
}
.share_bar::after{
    background: #1480c5;
    right: 0;
}
.share_bar > div{
    width: 200px;
    margin: 0 70px 4px;
}
.share_bar .share_btn{
    display: flex;
    align-items: center;
    width: 25%;
    height: 56px;
}
.share_bar .share_btn:first-of-type{
    justify-content: flex-end;
}
.share_bar .share_btn:hover div{
  animation: tada;
  animation-duration: 2s;
}
.share_bar .share_btn > div{
    width: 150px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    padding: 6px 0;
    border: 1px solid #fff;
    border-radius: 5px;
    box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.share_bar .share_btn > div::after{
    display: inline-block;
    content: "";
    background: url(../images/redo_arrow.png) no-repeat;
    background-size: cover;
    background-position: center;
    width: 26px;
    height: 26px;
    margin-left: 5px;
}

@media screen and (max-width: 736px){
    .share_bar{
        background-size: 200px auto;
    }
    .share_bar::before,
    .share_bar::after{
        height: 60px;
        bottom: 0px;
    }
    #olympic2024 .share_bar .share_btn{
        width: 50%;
        height: 60px;
        position: absolute;
        top: 10px;
        right: 0;
        padding: 0 2% 0 14%;
    }
    #olympic2024 .share_bar .share_btn:first-of-type{
        right: initial;
        left: 0;
        padding: 0 14% 0 2%;
    }
    .share_bar .share_btn > div{
        width: 130px;
        padding: 8px 0;
        margin: 0 auto;
    }
    .share_bar > div{
        font-size: 26px;
        margin: 0 auto 10px;
    }
}
@media screen and (max-width: 600px){
    .share_bar{
        height: 60px;
        background: initial;
    }
    .share_bar::before,
    .share_bar::after{
        bottom: 0;
    }
    #olympic2024 .share_bar .share_btn{
        position: initial;
    }
    .share_bar > div{
        display: none;
    }
    .share_bar .share_btn{
        padding: 0!important;
    }
    .share_bar .share_btn > div{
        font-size: 16px;
    }
}

/*---------------------------*\
			輪播
\*---------------------------*/
.swiperBox {
    width: 100%;
    padding: 0 0 30px;
    background: #f2f2f2;
    overflow: hidden;
    margin-bottom: 20px;
}
.index .swiperBox{
    padding-top: 10px;
}
.swiperBox .swiperPosition{
    position:relative;
}
.swiper-container.inner_box{
    width: initial;
    padding: 0;
    margin-top: 20px;
}
.swiper-slide .img_box {
    width:100%;
    height:0;
    padding:0 0 67.2%;
    overflow:hidden;
}
.swiper-slide img {
    width:100%;
    height:auto;
}
.index .swiper-slide .img_box {
    position: relative;
    overflow: hidden;
}
.index .swiper-slide .img_box::after {
    content: "";
    width: calc(100% / 3.5);
    min-width: 120px;
    height: 76px;
    background: url(../images/enterBtn.svg) no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
    position: absolute;
    bottom: 7%;
    right: 5%;
}

/* 分頁 */
.swiper-pagination{
    width: 100%;
    bottom: -25px;
    z-index: 1;
}
.swiper-pagination-bullet {
    width:10px;
    height:10px;
    background-color:#c1c1c1;
    opacity: 1;
    margin: 0 4px;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
    background-color:#FBB03B;
}

/* 左右鍵 */
.swiper-button-prev,
.swiper-button-next {
    width:70px;
    height:120px;
    font-size:70px;
    color:#fff;
    font-family: cursive;
    position:absolute;
    top:50%;
    text-shadow: 0px 0px 12px black;
    z-index:1;
    transition: all .2s linear;
    transform: translate(0, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.swiper-button-prev {
    left: 0px;
}
.swiper-button-next {
    right:0px;
}
.swiper-button-prev:hover {
    left:-4px;
}
.swiper-button-next:hover {
    right:-4px;
}
@media screen and (max-width:500px){
    .swiper-button-prev,
    .swiper-button-next {
        width: 50px;
     }
    .swiper-container-horizontal>.swiper-pagination-bullets {
        bottom: 14px;
    }
}

/*-- 首頁 --*/
.index .swiper-slide a:hover{
    opacity: 0.85;
}

/*---------------------------*\
			得獎名單
\*---------------------------*/
.winList .winList_box{
    padding: 10px 0;
}
.winList .gameTitle{
    width: 200px;
    margin: 0 auto 10px;
    padding: 7px 10px 5px;
    text-align: center;
    border-radius: 15px;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
}
.winList .winList_box::before{
    content: "";
    display: block;
    width: 100%;
    margin-bottom: -22px;
}
.winList .showBtn,
.winList .closeBtn{
    display: block;
    width: 40%;
    padding: 10px;
    border-radius: 30px;
    text-align: center;
    color: #141414;
    margin: 15px auto 0px;
    transition: all .2s linear;
}

.winList .winList_box.game1::before{
    border-bottom: 12px solid #956134;
}
.winList .gameTitle.brown{
    background: #956134;
}
.winList .winList_box.game1 .showBtn,
.winList .winList_box.game1 .closeBtn{
    background-color: #be9069;
}

.winList .winList_box.game2::before{
    border-bottom: 12px solid #ea5514;
}
.winList .gameTitle.blue{
    background: #ea5514;
}
.winList .winList_box.game2 .showBtn,
.winList .winList_box.game2 .closeBtn{
    background-color: #f19770;
}

.winList .winList_box.game3::before{
    border-bottom: 12px solid #236092;
}
.winList .gameTitle.golden{
    background: #236092;
}
.winList .winList_box.game3 .showBtn,
.winList .winList_box.game3 .closeBtn{
    background-color: #87b2d6;
}

/* table */
.winList table{
    width: 100%;
    margin: 0 auto 12px;
    border-collapse: collapse;
    text-align: center;
}
.winList thead{
    background: #666;
    color: #fff;
}
.winList th,
.winList td{
    font-size: 18px;
    padding: 12px 6px;
    line-height: 1.4;
}
.winList tbody tr{
    border-bottom: 1px solid #bcbcbc;
}
.winList th+th,
.winList td+td{
    border-left: 1px solid #bcbcbc;
}
/*  */
.winList .inner_box a{
    display: block;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-align: right;
}
.winList .inner_box a span{
    color: #F39500;
}
.winList .inner_box a:hover{
    opacity: 0.6;
}

/* 領獎確認書區塊 */
.winnerForm_box {
    width: 100%;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #bcbcbc;
}
.winnerForm_title {
    font-size: 24px;
    font-weight: bold;
    color: #e31d1a;
    margin-bottom: 15px;
    text-align: center;
}
.winnerForm_links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.winnerForm_links a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 180px !important;
    padding: 10px 15px;
    background-color: #f39500;
    color: #fff !important;
    border-radius: 5px;
    font-size: 18px !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.winnerForm_links a:hover {
    background-color: #d88400;
    opacity: 1 !important;
}
@media screen and (max-width: 500px) {
    .winnerForm_title {
        font-size: 20px;
    }
    .winnerForm_links a {
        width: 140px !important;
        font-size: 16px !important;
    }
}

/*---------------------------*\
			應援加油團
\*---------------------------*/
.sponsor_box{
    display: flex;
    flex-wrap: wrap;
}
.sponsor_box li{
    flex: 0 0 calc(100% / 4);
    padding: 1.2%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.sponsor_box li img{
    width: 100%;
    height: auto;
}
@media screen and (max-width: 1000px){
    .sponsor_box li{
        flex: 0 0 calc(100% / 3);
    }
}
@media screen and (max-width: 600px){
    .sponsor_box{
        justify-content: space-between;
    }
    .sponsor_box li{
        flex: 0 0 calc(100% / 2.05);
        padding: 0 1%;
    }
}


/*---------------------------*\
			活動說明
\*---------------------------*/
.rule{
    background: transparent;
}
.rule_title{
    width: 100%;
    padding: 8px;
    background: #0092D3;
    color: #fff;
    text-align: center;
}
.rule_title p,
.rule_detail li a{
    font-size: 20px;
}
.rule .inner_box{
    width: 100%;
    margin-bottom: 10px;
    text-align: initial;
}
.rule_detail{
    width: 100%;
    padding-top: 20px;
    padding-left: 30px;
    margin-bottom: 20px;
}
.index .rule .inner_box{
    border: 2px solid #0092D3;
}
.index .rule_detail{
    padding: 20px 20px 0;
}
.rule_detail li{
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 10px;
    list-style: disc;
}
.rule_detail li a{
    color: #0082bc;
    transition: .5s linear;
}
.rule_detail li a:hover{
    opacity: 1!important;
    border-bottom: 1px solid #0082bc;
}
/* 展開 & 收合 */
.rule .showBtn,
.rule .closeBtn{
    display: inline-block;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
	cursor: pointer;
}
.rule .showBtn span,
.rule .closeBtn span{
    color: #0d506e;
}
.rule .showBtn:hover,
.rule .closeBtn:hover,
.rule .indexLink:hover{
    opacity: 0.6;
}

/*---------------------------*\
			活動題目
\*---------------------------*/
.question.outer{
    margin-bottom: 20px;
    background: transparent;
}
.question .inner_box{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    padding: 0;
}
.question .tip{
    width: 100%;
    padding: 25px 1%;
    text-align: center;
}
.question .tip a{
    font-size: max(min(2.5vw, 26px),24px);
    font-weight: bold;
    color: #0088d3;
    height: 35px;
    display: inline-flex;
    align-items: center;
    text-decoration: underline;
}
.question .tip a::after{
    content: "";
    width: 48px;
    height: 48px;
    margin-left: 5px;
    display: inline-block;
    background: url("../images/tip.png") no-repeat;
    background-size: cover;
    background-position: top;
}
.question .tip a:hover{
    animation: pulse;
    animation-duration: 0.5s;
}
.question .q_item{
    background: #fff;
    width: 100%;
    padding-top: 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
.question .q_item h1{
    width: min(98%, 550px);
    font-size: max(min(2.5vw, 34px),30px);
    line-height: 1.3;
    font-weight: bold;
    text-align: center;
    color: #c00;
    margin-bottom: 25px;
}
.question .answer{
    width: min(98%, 550px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 20px;
}
.question .answer label{
    display: flex;
    flex: 0 0 calc(100% / 2.8);
    line-height: 1.3;
    padding: 6px 0 6px 15px;
}
/* 帶圖題目.flagAns */
.question .flagAns{
    width: min(98%, 700px);
}
.question .flagAns label{
    display: flex;
    flex: 0 0 calc(100% / 4);
    line-height: 1.5;
    padding: 12px 6px;
    flex-wrap: nowrap;
    flex-direction: column;
}
.question .flagAns label img{
    width: 100%;
}
.question .flagAns label .option_txtBox{
    display: flex;    
    justify-content: center;
}
.question .flagAns label .option_txtBox input[type=radio] {
    flex: 0 0 20px;
    height: 38px;
    margin: 0px 4px 0px 0px;
}

.question .answer label .option_txt{
    font-size: max(min(2.5vw, 30px),26px);
    font-weight: bold;
}
.question .submitBtn{
    width: 230px;
    height: auto;
    display: block;
    margin-bottom: -5px;
    border: none;
}
.question .submit_btn{
    width: 100%;
    max-width: 230px;
}
.question .submit_btn img{
    width: 100%;
}
.question .submitBtn:hover,
.question .submit_btn:hover{
    animation: pulse;
    animation-duration: 0.8s;
    border: none;
}
input[type=radio] {
    flex: 0 0 40px;
    height: 26px;
    margin: 5px 0px 0px 5px;
}

/* 知識+ */
.knowledge .question .tip{
    background: #fff;
    border-bottom: 1px dashed #d2d2d2;
}
.knowledge .question .answer{
    display: block;
}


@media screen and (max-width: 500px){
    .predicts .question .answer label{
        flex: 0 0 calc(100% / 2);
        padding: 6px 0 6px 5px;
    }
    .predicts .question .flagAns label{
        flex: 0 0 calc(100% / 2);
        padding: 10px 6px;
    }
}


/*---------------------------*\
			活動結束
\*---------------------------*/
.gameEnd.outer{
    background: transparent;
    overflow: hidden;
}
.gameEnd .inner_box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f2f2f2;
    padding: 15px 2% 25px;
    width: 100%;
}
.gamenow_img img{
    width: 100%;
    min-width: 270px;
    max-width: 700px;
}
.gameEnd span{
    font-size: 34px;
    font-family: "Noto Serif TC", serif;
    font-weight: 800;
}
@media screen and (max-width: 736px){
    .gameEnd span{
        font-size: 26px;
        line-height: 1.4;
    }   
}
/* 活動即將開始 */
.beginImgPc,
.beginImgMob {
    width: 100%;
}
.beginImgMob {display: none;}
@media screen and (max-width: 736px){
    .beginImgPc{ display: none; }
    .beginImgMob {
        display: block;
    }
}


/*---------------------------*\
		 遊戲完成 popup
\*---------------------------*/
.mask_game {
    width:100%;
    height:100vh;
    z-index:10;
    position:fixed;
    top:0;
    left:0;
    right:0;
    background-color:rgba(0,0,0,0.6);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gameBgBox{
    padding: 185px 10px 0;
    width: 350px;
    height: calc(100vh - 10%);
    max-height: 700px;
    background: url(../images/popupbg.png) no-repeat;
    background-size: 100% auto;
    overflow: hidden;
    position: relative;
}
.gameBgBox .gameClose{
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border: 2px solid #fff;
    background: url(../images/x.png) no-repeat;
    background-size: 100%;
    background-position: center;
    opacity: 0.7;
}
.gameOK{
    max-width:330px;
    height: 480px;
    text-align:center;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 300px;
    background: rgba(255,255,255,0.6);
    border-radius: 10px;
    position: relative;
    overflow-y: scroll;
}
.gameOK::-webkit-scrollbar{
    /* 隱藏卷軸 */
    display: none;
}
.gameTxt{
    overflow: hidden;
    margin-bottom: 12px;
}
.gameOK p {
    font-size:20px;
    font-weight: bold;
    line-height:1.4;
    word-wrap:break-word;
    color:#111;
    margin-bottom: 15px;
    padding: 0 10px;
}
.gameOK input[type="tel"] {
    /* input內字體需要設定字體超過6px 否則M板iphone會放大螢幕 */
    display:block;
    text-align: center;
    font-size: 16px;
    width:80%;
    height:30px;
    background-color:#fff;
    border:1px solid #555;
    padding:0px 5px;
    margin:0px auto 10px;
}
.gameOK .okbt,
.gameOK .resend,
.gameOK .resendNoUse {
    display:block;
    width: 120px;
    padding: 9px 15px 8px;
    margin:0px auto ;
    font-size: 16px;
    text-align:center;
    color: #fff;
    background: linear-gradient(to bottom,  #82c9f3 0%,#1377cb 50%,#1377cb 50%,#0067c3 51%,#0067c3 100%);
    border: 1px solid #fff;
    border-radius: 3px;
}
/* BTN GROUP */
.gameOK .btGroup{
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    padding-top: 5px;
}
.gameOK .btGroup .okbt,
.gameOK .btGroup .resend,
.gameOK .resendNoUse{
    width: auto;
    padding: 9px  10px 8px;
    margin: 0;
}
.gameOK .resendNoUse{
    background: #999;
    color: #242424;
    border: 1px solid #646464;
}
.gameOK .btGroup .seconds{
    width: 50px;
    font-size: 15px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #7b6f6f;
    background: linear-gradient(to bottom,  #f2cdcd 0%,#f47373 100%);
}

.gameOK p.psbox { font-size:16px; font-weight: normal; padding: 0 14%; margin: 6px 0;} /* 小字附註 */
.gamebt {
    border:0; background-color: #3970c9; padding: 2% 4%; margin: 0 0 3%; font-size: 18px; color:#fff;border-radius:10px;
}

.gamenoOKbt { background-color: #c4ceef; padding: 6px; border-width: 1px; border-color: #6d717e; }


@media screen and (max-width:350px){
    .gameBgBox{
        width: 100%
    }
    .gameOK{
        height: 144vw;
    }
}

/* 共用：活動結束圖片 */
    .gamenow_img {width: 100%; margin:0 auto; padding-bottom: 1%;}
    .gameimgpc { display:block; margin: 0 auto;}
    .gameimgmob { display:none; }

@media screen and (max-width:736px) {
    .gameimgpc { display:none; }
    .gameimgmob { display:block; margin: 0 auto;}
}


/* ---- 勝負神預測 問答區 ---- */
/* 標頭換色 */
.predictstit { background-color: #e5ddd4; border-top: 8px solid #b1804c; }
.predictstit .titlewordbox { background-color: #b1804c;}

/* 看完整文字 - 按鈕開合隱藏區 */
a.show4, a.close4
{ display:block; width:200px; height:35px; line-height:45px; text-align:center; color:#b70135; margin:15px auto 0px; }
a.show4:hover, a.close4:hover { color:#fc044a; }
a.close4 { display:none; }

/* ---- 勝負神預測 下注區塊 ---- */
.FCbox { background: #dddddd; padding: 2%; margin-bottom: 2%; overflow: hidden;}

.FCgamelist { width:100%; padding: 0 4%; border-bottom: 1px solid #912a3f; overflow: hidden; display: flex; align-items: center;  justify-content: center;}
.FCboxall { width: 33%; float: left; padding: 1% 0 4px;  text-align: center; color: #333; }
.FCboxall .FCgroup { font-size: 20px; letter-spacing: 2px; padding: 4% 10% ; background-color: #912a3f; color: #fff; font-weight: 600;}
.FCboxall p { font-size: 30px; letter-spacing: 2px; font-weight: 600; }
.FCgamebox {width: 100%; overflow: hidden; padding: 0 4%;}
.FCflag img {width: 100%;}

.FCword .countrywin { font-size: 32px; padding: 2% 0; line-height: 1.2; }
.FCword .odds { font-size: 40px; line-height: 1.2;}
.FCword .oddsnumber { font-size: 40px; color:#df1919;}

.FCbet{ padding: 2% 14% ; width: 100%; display: flex; align-items: center; justify-content: center;}
.FCbet .FCnum { width:64px; text-align: center; font-size: 28px; }
.FCbet .FCbtn { font-size: 40px; padding: 0px 4%; color: #333; width: 30px; overflow: hidden; margin: 0 auto;}

@media screen and (max-width:500px){
    .FCboxall p { font-size: 20px;  }
    .FCflag { width: 90%; margin: 0 auto;}
    .FCword .countrywin { font-size: 28px; padding: 6% 0;}
    .FCword .odds { font-size: 20px; height: 24px;}
    .FCbet { padding: 6% 0; margin-top: 10%;}
}

@media screen and (max-width:430px){
    .FCboxall { padding: 4% 0 4px;}
    .FCword .countrywin { font-size: 16px; padding: 6% 0;}
    .FCword .odds { font-size: 20px;}
    .FCword .oddsnumber { font-size: 24px; }
    .FCbet { width: 90px; padding: 10% 0; margin: 0 auto; vertical-align: middle; position: relative;}
    .FCbet .FCnum { width: 42px; font-size: 16px; }
    .FCbet .FCbtn { font-size: 26px; width: 26px; height: 32px; position: absolute; }
    .FCbtnless { top:10px; left: -2px;}
    .FCbtnmore { top:12px; right: -6px;}
    .FCbet input { padding: 1px 1px; }
}

/* ---- 勝負神預測 ---- */
/* 標頭換色 */
.scoretit { background-color: #e1b0b0; border-top: 8px solid #ab1a1a; }
.scoretit .titlewordbox { color: #141414; background-color: #ab1a1a;}

/* 排名表設定 */
.scorelist_box .winlist_title { background-color:#d7d524 }
.scorelist_box .winlist_title .game01color { background-color:#d7d524; }
.scorelist_box .winlist_title p { font-size: 22px; width: 60%; background-color: #d7d524; text-align: center; margin: 0 auto; padding: 10px; border-radius: 30px; color: #141414; left: 20%; top:-26px; position: absolute; letter-spacing: 8px; font-family: 'Noto Sans TC','微軟正黑體';}
/* 中獎表格 */
.scorelist_tablebox { width: 100%; border-collapse: collapse; overflow-x: auto; margin:0 0 10px; font-size: 16px;}
.scorelist_tablebox thead tr td { padding: 5px; background-color: #6f25bc; color: #fff; line-height: 2; letter-spacing: 1px; text-align: center; vertical-align: middle; position: relative;}
.scorelist_tablebox tbody tr td { text-align: center; vertical-align: middle; line-height: 2;  padding: 5px; position: relative;}
.scorelist_tablebox tbody tr.first_gray td { background-color: #d5c7e3; }
.scorelist_tablebox thead tr td:nth-child(2) {  width: 45%; }

.scorelist_tablebox .td_num { width: 12%;}

.scorelist_tablebox thead tr td:before, .scorelist_tablebox tbody tr td:before { content: ""; position: absolute; width: 90px; height: 42px; top: 0; right: 0; background: linear-gradient(90deg, rgb(0 0 0 / 0%) 77%, #7e5757 140%); overflow: hidden;}
/* 中獎表格 看完整文字 收闔按鈕 morecon4、5、6*/
a.scoreshow1, a.scoreclose1 { display:block; width:40%; padding: 10px; border-radius: 30px; text-align: center; color: #141414; margin: 15px auto 0px; transition: all .2s linear;}
a.scoreclose1 { display:none; }

/* 中獎表格 按鈕顏色 */
a.scoreshow1, a.scoreclose1 { background-color: #62467e; color:#fff }
a.scoreshow1:hover, a.scoreclose1:hover { color:#fff; background-color: #271538;}

/* 投注已完成 並顯示當前積分 popup */

.gamepointpp { padding: 2%;}
.gamepointpp .blueword { font-size: 30px; color: #4a80d9; }
.gamepointpp .redword { font-size: 20px; color: #d30f0f; }
.pointnow { margin: 0 0 4%; font-size: 58px; font-weight: bold; color: #d30f0f;}
.gamepointpp .pointnow span { font-size: 20px; color: #000; }

/* 投注頁追加 頁籤樣式 */
.group_tabs {
    display: flex;
    justify-content: center;
    border-bottom: 2px solid #4e0b0b;
    gap: 10px;
    position: sticky;
    top: 69px;
    background: #8b3434;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 10px 0;
    width: 100%;
}

.tab_item {
    padding: 8px 14px;
    cursor: pointer;
    background: #f3eeee;
    color: #393939;
    font-weight: bold;
    border-radius: 5px;
    transition: all 0.3s;
    flex: 1;
    max-width: 160px;
    text-align: center;
    margin: 0 5px;
}

.tab_item.active {
    background: #cb5555;
    color: #fff;
}

.tab_item:hover:not(.active) {
    background: #ccc;
}

@media screen and (max-width:700px){
    .group_tabs {
    top: 59px;
    }
}
}