@charset "UTF-8";
body {
    margin: 0;
/*    font-family: "Microsoft JhengHei", sans-serif;*/
    font-family: "Noto Sans TC", sans-serif;
    background-image: url('../img/bg3.png'), linear-gradient(#002f4b, #005b96);
    background-position: top center;
/*    background-size: cover;*/
    background-repeat: no-repeat;
    font-weight: 700;
    color: white;
    text-align: center;
    min-height: 100vh;
}
.full {
    width: 100%;
}
.logo_car {
    width: 11.77vw;
    position: absolute;
    left: 0;
    top: 0;
    margin: 2.8vw;
}
.logo {
    width: 42vw;
    margin: auto;
    padding: 9vw 0 2vw;
}

h1 {
    font-size: 2em;
    margin-bottom: 0.2em;
}

.subtitle {
    font-size: 3.2vw;
/*    margin-bottom: 1vw;*/
/*    line-height: 1.2;*/
    border-radius: 10px;
}
.down .subtitle {
    background: #005752;
}
.up .subtitle {
    background: rgba(232, 32, 136, 46%);
}
#close-text {
/*    font-size: 5.6vw;*/
}
.down .hl2 {
    color: #638c0b;
}
.up .hl2 {
    color: #e34999;
}

.bonus {
/*    font-size: 2vw;*/
    font-size: 1.8vw;
/*    margin: 0 0 2vw;*/
}

.btn {
/*    background: #3a944a;*/
    padding: 0.5vw;
    border: none;
    color: white;
    font-size: 1.8vw;
    border-radius: 100px;
    cursor: pointer;
    display: block;
    width: 100%;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.3vw;
    text-decoration: none;
    box-sizing: border-box;
}
.down .btn {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#327d47+0,1e684a+100 */
background: linear-gradient(to bottom,  rgba(50,125,71,1) 0%,rgba(30,104,74,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.up .btn {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e24999+0,b84086+100 */
background: linear-gradient(to bottom,  rgba(226,73,153,1) 0%,rgba(184,64,134,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

.btn2 {
/*    background: #3a944a;*/
/*    padding: 0.5vw;*/
    border: none;
    color: white;
    font-size: 2.2vw;
/*    border-radius: 100px;*/
    cursor: pointer;
    display: block;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.3vw;
    text-decoration: none;
    box-sizing: border-box;
    aspect-ratio: 427/67;
    width: 22.2vw;
    background-image: url('../img/bg-btn.png');
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#chart-container {
    width: 31.3vw;
/*    height: 9vw;*/
    aspect-ratio: 601 / 175;
    
}

#priceChart {
/*    width: 31.3vw !important;*/
/*    height: 9vw !important;*/
    width: 100% !important;
    height: 100% !important;
}

.desc {
    color: #c9c9c9;
    font-size: 1.4vw;
    font-weight: normal;
    line-height: 1.5;
    margin-bottom: 6.3vw;
}
.car_wrap {
    display: grid;    
    grid-template-areas:
        "a c"
        "a c";
    padding-left: 1.5vw;
}
.btns_wrap {
    display: flex;
    justify-content: center;
    gap: 1.5vw;
    margin-bottom: 1.5vw;
    align-items: center;
    grid-area: a;
}
.ps {
    font-size: 0.6vw;
    font-weight: 300;
    color: #898989;
    max-width: 52.2vw;
    text-align: right;
    letter-spacing: -0.1em;
    grid-area: b;
}
.car {
    width: 40.6vw;
    grid-area: c;
}

.logo2 {
    width: 17.6vw;
}
.bonus_wrap {
    display: flex;
    gap: 1.5vw;
    margin-bottom: 2vw;
    justify-content: center;
    align-items: flex-end;
}
.bonus .num {
    font-size: 3.2vw;
}
.bonus .hl {
    font-size: 4.4vw;
    color: #00ffff;
}

.pc {
    display: block;
}
.mo {
    display: none;
}

@media only screen and (max-width: 1024px) {
    body {
        background-image: url('../img/bg3-m.png'), linear-gradient(#002f4b, #005b96);
        background-size: 100% auto;
    }
    main {
        padding: 0 3vw;
    }
    .logo {
        width: 58vw;
        padding: 12.4vw 0 7.4vw;
    }
    .subtitle {
        font-size: 8vw;
/*        margin-bottom: 5vw;*/
    }
    #close-text {
/*        display: block;*/
/*        font-size: 17vw;*/
    }
    .bonus_wrap {
        flex-direction: column-reverse;
/*        padding: 0 3vw;*/
        gap: 5vw;
        margin-bottom: 5.5vw;
    }
    .bonus_wrap .item {
        width: 100%;
    }
    #chart-container {
        width: 100%;
/*        height: 32.6vw;*/
    }
    #priceChart {
/*        width: 94vw !important;*/
/*        height: 32.6vw !important;*/
    }
    .bonus {
        font-size: 4.5vw;
    }
    .bonus .num {
        font-size: 8vw;
    }
    .bonus .hl {
        font-size: 11.4vw;
    }
    .btn {
        width: 74.6vw;
        margin: auto;
        font-size: 4.9vw;
        padding: 1vw;
        letter-spacing: 0.9vw;
    }
    .car_wrap {
/*        gap: 5vw;*/
        padding: 0 0 2vw;
        grid-template-areas:
        "a"
        "c"
        "b";
    }
    .btns_wrap {
        margin-bottom: 5vw;
        gap: 3vw;
    }
    .car {
        width: 72vw;
        margin: 0 auto;
    }
    .logo2 {
        width: 51.6vw;
    }
    .logo_car {
        width: 21.3vw;
        margin: 3.8vw;
    }
    .desc {
        font-size: 3.6vw;
    }
    .btn2 {
        width: auto;
        font-size: 4.5vw;
        flex: 1;
    }
    .ps {
        font-size: 2.1vw;
        text-align: left;
        max-width: none;
    }
    .pc {
        display: none;
    }
    .mo {
        display: block;
    }
}

/* 2025-08-18 renew */
.bg_deco {
    background-image: url('../img/k.png');
    background-size: cover;
    background-position: center;
    height: 39.322vw;
    width: 100%;
    position: absolute;
    left: 0;
    top: 24vw;
    opacity: .2;
    z-index: -1;
}
#sec3 {
    padding: 4.7vw;
}
.actway {
    text-align: left;
    font-size: 1vw;
    line-height: 1.5;
    font-weight: normal;
}
.actway ol li {
    margin-bottom: 10px;
}
@media only screen and (max-width: 1024px) {
    #sec3 {
        padding: 6.6vw;
    }
    .actway {
        font-size: 4.8vw;
    }
    .bg_deco {
        height: 100vw;
        top: 175vw;
    }
}