/*
 * 2026 So-net 夏日避暑計畫
 * Cleaned CSS: only the styles used by current pages are kept.
 */

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500;700;800&display=swap');

:root{
    --blue:#0094ea;
    --sky:#45caf5;
    --deep-blue:#1f7fcf;
    --yellow:#ffbf31;
    --yellow-light:#ffdd88;
    --yellow-bright:#fff100;
    --orange:#f0b54a;
    --white:#fff;
    --text-gray:#777;
}

*{ box-sizing:border-box; }

html,body{
    min-width:320px;
}

body{
    font-family:'Noto Sans TC','微軟正黑體','Microsoft JhengHei',Verdana,Arial,sans-serif;
    background:var(--sky);
}

img{ max-width:100%; }

a{ text-decoration:none; }

.center-element{ text-align:center; }
.flex-box{ display:flex; }
.hide-sm{ display:block; }
.hide-lg{ display:none; }

/*----------------------------------------------------
    Header
----------------------------------------------------*/
header{
    position:sticky;
    z-index:1000;
    top:0;
    left:0;
    width:100%;
    height:60px;
    background:#fff;
    box-shadow:0 0 10px rgba(0,0,0,.3);
}

header .inner{
    line-height:1;
    position:relative;
    clear:both;
    overflow:hidden;
    width:1000px;
    margin:0 auto 10px;
}

header .inner h1{ width:100%; }

header .inner h1 img{
    float:left;
    margin:15px;
}

header .inner h1 span{
    font-size:.9em;
    display:block;
    float:right;
    padding-top:25px;
    padding-right:18px;
    text-align:right;
    color:#999;
}

header .inner h1 span a{ color:#999; }
header .inner h1 span a:hover{ color:var(--deep-blue); }

/*----------------------------------------------------
    Layout
----------------------------------------------------*/
main{
    position:relative;
    overflow:hidden;
    width:100%;
    height:auto;
    margin:0 auto;
}
main.whole-bg{
    min-height:calc(100vh - 130px);
}
article{
    display:block;
    clear:both;
    overflow:hidden;
    height:auto;
    padding-top:10px;
}

article .inner{
    position:relative;
    width:1000px;
    margin:0 auto;
}

.whole-bg{
    background-color:var(--sky);
    background-image:url(../images/top-bg_1920.jpg);
    background-position:center top;
    background-repeat:no-repeat;
    background-size:auto;
}

.content_wrapper{
    width:100%;
    padding:0 0 1vw;
}

/*----------------------------------------------------
    Menu
----------------------------------------------------*/
#headerWrap{
    position:relative;
    z-index:9999;
    padding:10px 0 14px;
    background-color:transparent;
}

#headerWrap.sticky{
    position:fixed;
    z-index:9999;
    top:60px;
    left:0;
    width:100%;
    background-color:var(--blue);
    border-bottom:1px solid var(--blue);
}

nav{
    width:350px;
    margin:auto;
    text-align:center;
    justify-content:space-between;
    align-items:center;
}

nav a{
    font:500 1.125em/1.5 'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif;
    color:#fff;
    letter-spacing:2px;
}

nav a:hover{ color:#f4ee34; }

nav a:after{
    display:block;
    width:20px;
    height:3px;
    margin:8px auto 0;
    content:'';
    border-radius:2px;
    background-color:#f4ee34;
}

body.kv-small .kv-title{
    width:90%;
    margin:0 auto;
}

body.kv-small .kv-title h2{
    max-width:1080px;
    transform:none;
}

body.kv-small .desktop_title{
    width:100%;
}

body.kv-small .desktop_bear{
    width:34%;
    right:10%;
    top:-2%;
}

body.kv-small .desktop_ball{
    width:7%;
    right:39%;
    top:37%;
}

/*----------------------------------------------------
    KV
----------------------------------------------------*/


.desktop_title{
    display:block;
}

.mobile_title{
    display:none;
}

.kv-title{
    transform:scale(.86);
    transform-origin:top center;
    margin-bottom:-120px;
}

.kv-title h2{
    position:relative;
    width:100%;
    max-width:1347px;
    margin:0 auto;
    line-height:0;
    transform:translateX(-12%);
}

.desktop_title,
.desktop_bear,
.desktop_ball{
    pointer-events:none;
}

.desktop_title{
    position:relative;
    z-index:5;
    display:block;

    width:100%;
    max-width:none;
    height:auto;
    left:0;

    opacity:0;
    animation:titleIn 1s ease-out forwards;
}

@keyframes titleIn{
    0%{
        opacity:0;
        transform:translateY(80px) scale(.85);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.desktop_bear{
    position:absolute;
    z-index:10;

    width:43%;
    max-width:none;
    height:auto;

    right:-8%;
    top:-3%;

    opacity:0;
    animation:
        bearIn .8s ease-out .4s forwards,
        bearFloat 6s ease-in-out 1.3s infinite;
}

@keyframes bearIn{
    0%{
        opacity:0;
        transform:translateY(40px) scale(.8);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes bearFloat{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }
}

.desktop_ball{
    position:absolute;
    z-index:20;

    width:9%;
    max-width:none;
    height:auto;

    right:32%;
    top:37%;

    opacity:0;
    animation:
        ballIn .6s ease-out 1s forwards,
        ballFloat 4.8s ease-in-out 1.6s infinite;
}

@keyframes ballIn{
    0%{
        opacity:0;
        transform:translateY(20px) scale(.8);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes ballFloat{
    0%,100%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(-6px) rotate(6deg);
    }
}

/*----------------------------------------------------
    Event content
----------------------------------------------------*/
.event{
    width:100%;
    margin:auto;
    padding:0;
    color:#fff;
}

.event h3{
    font:800 1.3125rem/1.4 'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    margin:1.6em auto 0;
    padding:2%;
    color:#509dd0;
    background:transparent url(../images/title-bg2.png) center center no-repeat;
    background-size:contain;
}

.event h3.title-b{ background-image:url(../images/title-bg2.png); }

.event h4{
    font:400 2.4rem/1.4 'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif;
    text-align:center;
    margin:0 auto;
    padding:0;
    color:#fff;
}

.event p{
    font:500 1.313em/2 'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif;
    margin:3% auto 0;
    text-align:center;
    text-shadow:0 2px 4px rgba(0,148,234,.35);
}

.event p.game-intro{
    font:700 1.4em/1.5 'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif;
    margin-top:6%;
}

.event a{
    color:var(--yellow);
    text-decoration:underline;
}

.text-underline{
    position:relative;
    display:inline-block;
    color:var(--yellow-bright);
}

.text-underline:after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:2px;
    background-color:var(--yellow-bright);
}

.event button{
    font:700 1.0em/2 'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif;
    display:block;
    width:20%;
    margin:8% auto 3%;
    cursor:pointer;
    color:#fff;
    border:0;
    border-radius:10px;
    background-color:#00a1ef;
}

.event button:hover{
    transition:.3s ease;
    background-color:#4dbbf0;
    box-shadow:0 3px 9px rgba(98,98,98,.3);
}

.event button.back{  width:30%; font-size:1.35rem; }
.event button.back a{ color:#ffffff; text-decoration:none; }

.apply-wrap{
    justify-content:center;
    align-items:center;
    gap:20px;
}

.apply-wrap > a{ transition:ease-in-out 250ms; }
.apply-wrap > a:hover{ transform:translateY(-3px); }
.apply-wrap img{
    width:100%;
    max-width:400px;
    height:auto;
}

/*----------------------------------------------------
    Game cards
----------------------------------------------------*/
.summer-game{
    width:100%;
    max-width:1000px;
    margin:80px auto;
    text-align:center;
}

.game-title{
    margin:0;
    font-size:2rem;
    font-weight:700;
    color:#fff;
    text-shadow:0 2px 8px rgba(0,148,234,.4);
}

.selected-answer{
    display:block;
    margin-top:10px;
    padding:0;
    background:none;
    color:var(--yellow-bright);
    font-size:2.0rem;
    font-weight:500;
}

.game-card-wrap{
    width:90%;
    max-width:940px;

    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:22px;

    margin:50px auto 0;
}

.game-card{
    width:95%;
    margin:auto;
}
.card-front{
    display:block;
    position:relative;
    z-index:1;
    opacity:1;
}

.card-front img{
    display:block;
    width:100%;
    height:auto;
}

.card-back{
    position:absolute;
    inset:0;
    z-index:2;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    opacity:0;
    pointer-events:none;

    background:rgba(255,255,255,.94);
    border-radius:28px;
    text-align:center;
    transition:.25s ease;
}

.gift-icon{ margin-bottom:12px; }
.gift-icon img{ width:50px; height:auto; }

.card-back p{
    color:#2b79bf;
    font-size:1rem;
    margin:0 0 8px;
}

.card-back h3{
    color:#1f7fcf;
    font-size:2rem;
    font-weight:700;
    margin:0 0 6px;
}

.card-back h4{
    color:var(--orange);
    font-size:1.3rem;
    line-height:1.5;
    margin:0;
}

.game-card.active .card-front{
    opacity:0;
}

.game-card.active .card-back{
    opacity:1;
    pointer-events:auto;
}

.game-card:hover,
.game-card.active{
    transform:translateY(-6px);
    box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.join-game-btn{
    display:flex;
    justify-content:center;
    align-items:center;
}

.join-game-btn img{
    width:80%;
    max-width:300px;
    height:auto;
    margin:50px auto 0;
}
/*----------------------------------------------------
    Gift images
----------------------------------------------------*/
.gift-img{
    max-width:1000px;
    margin:0 auto;
    display:grid;
    justify-content:center;
    justify-items:center;
    grid-template-columns:420px 420px;
    column-gap:16px;
    row-gap:40px;
}

.gift-img > img{
    width:70%;
    height:auto;
}

.gift-img > img.main-gift{
    width:50%;
    max-width:520px;
    grid-column:1 / -1;
    margin:0 auto 24px;
}

/*----------------------------------------------------
    Form/Login
----------------------------------------------------*/
.form_wrap{ width:100%; margin:auto; }
.form_container{ margin:0 auto; }
.form_body{ width:80%; margin:auto; padding-top:2%; }
.form_body2{ width:100%; margin:auto; padding-top:2%; }

.form_body h3,.winnerbox h3{
    font:400 1.5em/1.6 'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif;
    background-image:none;
    color:#fff;
}

.form_label{
    justify-content:space-between;
    align-items:center;
}

.form_label.login-page{ justify-content:flex-start; }
.form_title{ font-weight:normal; display:inline-block; text-align:justify; }
.form_body2 .list{ margin:20px 0 20px 1%; }

.form_container .form_body2 .list{
    font:700 1.35rem/2 '微軟正黑體',Verdana,Arial,Helvetica,sans-serif;
    display:block;
    overflow:hidden;
    letter-spacing:.1vw;
}

.form_container .form_body2 input[type=text],
.form_container .form_body2 input[type=password]{
    display:block;
    width:65%;
    padding:10px 30px;
    margin-left:2%;
    color:#999;
    border:#ddd 1px solid;
    border-radius:9px;
    outline:none;
    box-shadow:inset 0 2px 6px rgba(90,90,90,.3);
}

.form_container .form_body2 input.ipt_vcode{ width:50%; }

input::placeholder{
    font-family:'微軟正黑體',Arial,sans-serif;
    font-size:18px;
    letter-spacing:7px;
    color:#999;
}

.form_footer{
    width:98%;
    margin:5% auto 0;
    justify-content:space-around;
    align-items:center;
    flex-wrap:wrap;
}

.form_container .form_body2 .flex-box .submit-btn,
.submit-btn{
    font:800 1.125em/2.5 '微軟正黑體',Verdana,Arial,Helvetica,sans-serif;
    display:inline-block;
    width:40%;
    padding:5px 15px;
    cursor:pointer;
    transition:.5s ease;
    letter-spacing:2px;
    color:#fff;
    border:none;
    border-radius:8px;
    background-color:#00a1ef;
}

.form_container .form_body2 .flex-box .submit-cancel,
.submit-cancel{ background-color:#4dbbf0; }

.bottom_text{
    flex:0 0 100%;
    width:70%;
    margin:25px auto 0;
    color:var(--yellow-bright);
    font-size:0.95em;
    line-height:1.6;

}

.bottom_text p{
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
    margin:0 0 0px;
    text-align:left;
}

.bottom_text span{
    flex:0 0 120px;
    text-align:right;
    white-space:nowrap;
}

.bottom_text a{
    color:var(--yellow-bright);
    text-decoration:underline;
}
/* login 表單置中 */
.form_body2{
    width:80%;
    max-width:900px;
    margin:0 auto;
}

.form_container .form_body2 .list{
    width:100%;
}

.form_label.login-page{
    justify-content:center;
}

.form_title{
    width:100px;
    flex:0 0 100px;
    text-align:right;
}

.form_container .form_body2 input[type=text],
.form_container .form_body2 input[type=password]{
    width:65%;
    margin-left:30px;
}

.form_container .form_body2 input.ipt_vcode{
    width:50%;
}

/*----------------------------------------------------
    Notice
----------------------------------------------------*/
.notice{
    width:90%;
    max-width:900px;
    margin:30px auto 0;
    padding-bottom:0;
}

.notice .content{
    display:block;
    margin:0 auto;
    padding:40px;

    color:#fff;
    font-size:1em;

    background:rgba(0,102,170,.42);
    backdrop-filter:blur(4px);

    border:1px solid rgba(255,255,255,.18);
    border-radius:24px;
}

.notice ol li{
    line-height:1.5;
    margin-bottom:10px;
    margin-left:20px;
    list-style-type:decimal;
}

.notice .content p{ line-height:1.5; margin:1% auto; }
.notice .content strong{ color:#fff; }
.notice dl{ margin:0; }
.notice dd{ margin-left:0; }

.notice ol{
    margin:0;
    padding-left:22px;
}

.notice ol li{
    line-height:1.5;
    margin-bottom:10px;
    margin-left:0;
    list-style-type:decimal;
}

/*----------------------------------------------------
    Winner
----------------------------------------------------*/
.winnerbox{
    width:90%;
    margin:auto;
    padding:0;
    color:#fff;
}

.winner_gift {
    font-size: 70%;
}

table.winner-wrap{
    width:100%;
    margin:0 auto 5%;
    overflow:hidden;

    border:1px solid rgba(255,255,255,.18);
    border-radius:24px;

    background:rgba(0,102,170,.42);
    backdrop-filter:blur(4px);
}

table.winner-wrap thead {
    background: transparent;
}

table.winner-wrap tr.winner-header{
    font-size:1.5em;
    line-height:2;

    color:#fff;

    background:rgba(0,70,130,.55);
}

table.winner-wrap tr.winner-header th {
    margin: auto;
}

table.winner-wrap tr{
    line-height:3;

    display:flex;

    color:#fff;

    background:rgba(255,255,255,.05);

    flex-wrap:wrap;
    justify-content:space-between;
}

table.winner-wrap tr:nth-child(even){
    background:rgba(255,255,255,.20);
}

table.winner-wrap td[colspan]:not([colspan="1"]) {
    width: auto;
}

table.winner-wrap tr td {
    display: inline-block;

    width: 30%;
    padding: 0 1.5%;
}

table.winner-wrap tr td:nth-child(odd){
    border-right:1px solid rgba(255,255,255,.50);
    border-left:1px solid rgba(255,255,255,.50);
}

table.winner-wrap tr td:first-child {
    border-left-width: 0;
}

table.winner-wrap tr.fix-flex {
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
}


/*----------------------------------------------------
    Scroll to top + footer
----------------------------------------------------*/
.scroll-to-top-container{
    width:25px;
    height:55px;
    margin:10px auto;
}

.scroll-to-top-button{
    position:fixed;
    z-index:2;
    right:50px;
    bottom:30px;
    display:none;
    width:25px;
    height:25px;
    cursor:pointer;
    border-radius:12px;
    background:url('../images/scroll_to_top.png') no-repeat;
    background-size:25px 25px;
}

footer{
    position:absolute;
    left:0;
    width:100%;
}
footer .footer_b{ background:#000; }
footer .inner_b{
    overflow:hidden;
    width:1000px;
    margin:0 auto;
    text-align:center;
    color:#fff;
    background:#000;
}
footer .logo{ line-height:70px; margin-right:20px; }
footer .logo img{ vertical-align:middle; }
footer .copy{ font-size:.725em; line-height:1; letter-spacing:1px; }


.winner-page{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.winner-page main{
    flex:1;
}

.winner-page footer{
    position:relative;
}
/*----------------------------------------------------
    RWD
----------------------------------------------------*/

/* 平板 */
@media screen and (max-width:1024px){

    article .inner,
    header .inner,
    footer .inner_b{
        width:100%;
    }

    .kv-title{
        transform:scale(.92);
        transform-origin:top center;
        margin-bottom:-80px;
    }

    .kv-title h2{
        transform:translateX(-12%);
    }

    .desktop_bear{
        right:-2%;
        top:-2%;
    }

    .desktop_ball{
        right:46%;
        top:38%;
    }

    footer .inner_b,
    footer .inner_w{
        width:100%;
    }
}



/* 手機 */
@media screen and (max-width:820px){

    header{
        height:50px;
    }

    header .inner{
        width:100%;
    }

    header .inner h1 img{
        width:80px;
        height:auto;
        margin:12px 15px;
    }

    header .inner h1 span{
        font-size:.75em;
        padding-top:18px;
        padding-right:12px;
    }

    #headerWrap{
        padding:8px 0 10px;
    }

    #headerWrap.sticky{
        top:50px;
    }

    nav{
        width:100%;
        padding:0 5%;
    }

    nav a{
        font-size:.95em;
        letter-spacing:1px;
    }

    .whole-bg{
        background-image:url(../images/bg_mobile.png);
        background-position:top center;
        background-size:100% auto;
        background-repeat:no-repeat;
        background-color:var(--sky);
        background-attachment:scroll;
    }

    article{
        padding-top:0;
        overflow:hidden;
    }

    article .inner{
        width:100%;
        max-width:none;
        margin:0 auto;
        overflow:hidden;
    }

    /* 手機 KV：只吃 mobile_title */
    .desktop_title,
    .desktop_bear,
    .desktop_ball{
        display:none;
    }

    .kv-title{
        width:100%;
        max-width:none;
        margin:0;
        padding:0;
        overflow:hidden;
        transform:none;
    }

    .kv-title h2{
        width:100%;
        max-width:none;
        min-height:auto;
        margin:0;
        padding:0;
        overflow:hidden;
        transform:none;
        line-height:0;
    }

    .mobile_title{
        display:block;
        width:100%;
        max-width:none;
        height:auto;
        margin:0;
    }

    /* 活動內容 */
    .event{
        width:100%;
        overflow:hidden;
        padding:2% 0 0;
    }

    .event h3{
        font-size:1.15rem;
        width:220px;
        height:58px;
        margin:1.2em auto 0;
        padding:0;
        background-size:100% auto;
    }

    .event h3.title-b{
        background-image:url(../images/title-bg3.png);
    }

    .event p{
        width:90%;
        margin-left:auto;
        margin-right:auto;
        padding:0;
        font-size:1em;
        white-space:normal;
        word-break:break-word;
        overflow-wrap:break-word;
    }

    .event p.game-intro{
        margin-top:1%;
    }

    .event button{
        width:80%;
        font-size:0.8em;
    }

    .event button.back{
        width:48%;
    font-size:1.2rem;
    }

	
    .apply-wrap{
        flex-direction:column;
    }

    .apply-wrap img{
        width:92%;
        max-width:400px;
        margin:2% 4%;
    }

    .gift-img{
        grid-template-columns:1fr;
        row-gap:24px;
    }

    .gift-img > img{
        width:73%;
        max-width:420px;
    }

 .gift-img > img.main-gift{
    width:80%;
    max-width:520px;
    grid-column:1 / -1;
    margin:0 auto 24px;
}

    /* 小遊戲 */
    .summer-game{
        width:100%;
        margin:35px auto 60px;
        padding:0 5%;
    }

    .game-title{
        font-size:1.25rem;
        line-height:1.5;
    }

    .selected-answer{
        font-size:1rem;
    }

    .game-card-wrap{
        width:100%;
        grid-template-columns:1fr;
        gap:22px;
        margin-top:30px;
    }

    .card-back{
        border-radius:22px;
    }

    .gift-icon img{
        width:46px;
    }

    .card-back p{
        font-size:.85rem;
    }

    .card-back h3{
        font-size:1.55rem;
    }

    .card-back h4{
        font-size:1.05rem;
    }

    .join-game-btn img{
        width:60%;
        margin-top:50px;
    }

    /* 表單 */
    .form_body,
    .form_body2{
        width:95%;
    }

    .form_label{
        flex-direction:column;
        align-items:flex-start;
    }

    .form_container .form_body2 input[type=text],
    .form_container .form_body2 input[type=password]{
        width:85%;
        margin:0 auto;
    }

    .form_container .form_body2 input.ipt_vcode{
        width:85%;
    }

    .form_container .form_body2 .flex-box .submit-btn,
    .submit-btn{
        width:80%;
        margin:2% auto;
    }

    .bottom_text{
        font-size:1em;
        margin:0 5px;
    }
	
	  .form_body2{
        width:86%;
        margin:0 auto;
        padding-top:20px;
    }

    .form_container .form_body2 .list{
        margin:0 0 28px;
        overflow:visible;
        letter-spacing:0;
    }

    .form_label.login-page{
        display:block;
    }

    .form_title{
        display:block;
        width:100%;
        margin:0 0 10px;
        text-align:left;
        font-size:1.25rem;
        letter-spacing:4px;
    }

    .form_container .form_body2 input[type=text],
    .form_container .form_body2 input[type=password],
    .form_container .form_body2 input.ipt_vcode{
        width:100%;
        margin:0;
        padding:12px 20px;
    }

    .form_container .form_body2 input.ipt_vcode{
        width:100%;
    }

    .vcode{
        display:block;
        margin:10px 0 0;
    }

    input::placeholder{
        font-size:16px;
        letter-spacing:5px;
    }

    .form_footer{
        width:86%;
        margin:35px auto 0;
        gap:16px;
    }

    .form_container .form_body2 .flex-box .submit-btn,
    .submit-btn{
        width:100%;
        margin:0 0 14px;
    }

 .bottom_text{
        width:90%;
        margin:20px auto 0;
        font-size:.9rem;
        text-align:center;
	   line-height:1.4;
    }

    .bottom_text p{
        display:block;
        text-align:center;
        margin:0 0 10px;
		line-height:1.4;
    }

    .bottom_text span{
        display:inline;
        width:auto;
        flex:none;
    }

    /* 注意事項 */
    .notice{
        width:92%;
        max-width:none;
    }

    .notice .content{
        padding:24px;
    }

    /* 中獎名單 */
     .winnerbox{
        width:90%;
        min-height:auto;
        margin:0 auto;
        padding:60px 0 120px;
        display:block;
        text-align:center;
    }

    .winnerbox p,
    .winnerbox h3,
    .winnerbox h4{
        max-width:100%;
        white-space:normal;
        word-break:break-word;
        overflow-wrap:break-word;
        line-height:1.8;
        font-size:1.25rem;
    }

    /* Footer */
    footer .inner_b{
        width:100%;
        padding:0 15px 20px;
        text-align:center;
    }

    footer .logo{
        display:inline-block;
        vertical-align:middle;
        margin-right:15px;
    }

    footer .copy{
        display:inline-block;
        vertical-align:middle;
        margin:0;
        line-height:1.2;
        white-space:normal;
    }
}

/* ===== 手機翻牌 ===== */
@media screen and (max-width:768px){

    .game-card-wrap{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:22px !important;
        overflow:visible !important;
    }

    .game-card{
        position:relative !important;
        display:block !important;
        overflow:hidden !important;
        height:auto !important;
    }

    .card-front{
        display:block !important;
        position:relative !important;
        opacity:1 !important;
        z-index:1 !important;
    }

    .card-front img{
        display:block !important;
        width:100% !important;
        height:auto !important;
    }

    .card-back{
        position:absolute !important;
        inset:0 !important;
        z-index:5 !important;

        display:flex !important;
        opacity:0 !important;
        pointer-events:none !important;
    }

    .game-card.active .card-front{
        opacity:0 !important;
    }

    .game-card.active .card-back{
        opacity:1 !important;
        pointer-events:auto !important;
    }
	
	
	/* ===== winner ===== */

	  table.winner-wrap{
        width:92%;
        margin:0 auto 30px;
        border-radius:18px;
    }

    table.winner-wrap tr.winner-header{
        font-size:1.1rem;
        line-height:1.5;
        padding:14px 10px;
    }

    table.winner-wrap tr.winner-header th{
        display:block;
        width:100%;
    }

 table.winner-wrap tr{
        display:block;
        padding:0;
        background:transparent;
    }

    table.winner-wrap tr td{
        display:block;
        width:100%;
        padding:8px 16px;
        line-height:1.4;
        text-align:center;
        border:0 !important;
        box-shadow:none;
        color:#fff;
    }

    table.winner-wrap tr td:nth-child(odd){
        background:rgba(255,255,255,.06);
    }

    table.winner-wrap tr td:nth-child(even){
        background:rgba(255,255,255,.14);
    }

    table.winner-wrap tr.winner-header{
        background:rgba(0,70,130,.65);
    }
	
	table.winner-wrap tr td,
    table.winner-wrap tr td:nth-child(odd){
        border:none !important;
    }

    .winner_gift{
        display:block;
        margin-top:4px;
        font-size:.85em;
    }
}