@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');

#mainBlock {
    background-color: #fff;
    font-family: 'Noto Sans TC', sans-serif;
    overflow-x: hidden;
    font-size: 1vw;
    line-height: 3vw;
}

#mainBlock ul, #mainBlock ol, #mainBlock dl {
    padding: 0;
    margin: 0;
}

.emptyBlock {
    width: 5vw;
}

#mainBlock a {
    color: #481bd1;
    text-decoration: underline;
}

#mainBlock a:hover {
    color: #871dbe;
    text-decoration: underline;
}

#goTopBtn {
    position: fixed;
    width: 80px;
    bottom: 6vh;
    right: 20px;
    display: none;
    /* 初始隱藏 */
    z-index: 999;
    cursor: pointer;
    transition: .2s all;
}

#goTopBtn img {
    width: 100%;
}

#goTopBtn:hover {
    transition: .2s all;
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    filter: brightness(1.1);
}

.logo {
    width: 15%;
    padding-top: 1%;
    padding-left: 1%;

}

#mainBlock header {
    width: 100%;
    height: 98vh;
    /* 滿版高 */
    padding: 1vh 0;
    position: relative;
    background: url(../../images/dec_reward/kv.jpg)#f6f6f6 top center no-repeat;
    background-size: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.slogan {
    display: block;
    width: 35%;
    margin: 0 auto;
}

#mainBlock nav {
    width: 90%;
    display: block;
    margin: 0 auto;
    max-width: 1100px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.header_buttom {
    bottom: 0;
}

#mainBlock nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

}

#mainBlock nav ul li {
    width: 23%;
    margin: 1% 1%;
    display: block;
    list-style: none;
    transition: .2s all;
}

#mainBlock nav ul li img {
    width: 100%;
    cursor: pointer;
}

#mainBlock nav ul li:hover {
    transition: .2s all;
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    filter: brightness(1.1);
}

.event_1 {
    width: 100%;
    height: 98vh;
    /* 滿版高 */
    position: relative;
    padding: 1vh 0;
    background: url(../../images/dec_reward/event_1_bg.jpg)#f6f6f6 center center no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*.event_1_in img,
.event_2_in img {
    cursor: pointer;
}*/

.event_1_in,
.event_2_in {
    width: 34%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.event_3_in {
    width: 42%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.event_4_in {
    width: 40%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.event_1_in ul,
.event_2_in ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.title {
    width: 20vw;
    max-width: 475px;
    padding-bottom: 2%;
}

/*.title2 {
    width: 20vw;
    max-width: 475px;
    padding-bottom: 2%;
}*/

.event_1_in li,
.event_2_in li {
    width: 33%;
    list-style: none;
    display: block;
}

.event_1_in li img,
.event_2_in li img {
    width: 100%;
}

.event_1_7,
.event_2_7 {
    width: 100%;
}

.btn_notice {
    width: 5vw;
    max-width: 475px;
    cursor: pointer;
    transition: .2s all;
}

.btn_notice img {
    width: 100%;
}

.btn_notice:hover {
    transition: .2s all;
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

.btn_login {
    cursor: pointer;
}

.btn_login2 {
    width: 5vw;
    max-width: 475px;
    animation: pulse_2 1.2s infinite;
/*    cursor: pointer;*/
}

.title_block {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 1%;
}

.title_block img {
    margin: 0 1%;

}

.event_2 {
    width: 100%;
    height: 100vh;
    /* 滿版高 */
    position: relative;
    background: url(../../images/dec_reward/event_2_bg.jpg)#f6f6f6 center center no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.event_3 {
    width: 100%;
    height: 100vh;
    /* 滿版高 */
    position: relative;
    background: url(../../images/dec_reward/event_3_bg.jpg)#f6f6f6 center center no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.event_4 {
    width: 100%;
    height: 100vh;
    /* 滿版高 */
    position: relative;
    background: url(../../images/dec_reward/event_4_bg.jpg)#f6f6f6 center center no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.event_3_award_in {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 2% 0;
}

.inset-border-img {
    width: 100%;
    display: block;
    border: 5px solid deeppink;
    box-sizing: border-box;
    /* 關鍵：讓邊框佔據圖片尺寸之內 */
}

.black_box {
    filter: brightness(50%);
}

.event_3_award_in_center {
    width: 60%;
}

.event_3_award_in img {
    width: 100%;
}

.event_3_award_in_left {
    width: 20%;
}

.event_3_award_in_right {
    width: 20%;
}

.event_3_btn button {
    width: 48%;
    padding: 1%;
}

.event_3_btn button img {
    width: 100%;
    transition: .2s all;
}

.event_3_btn {
    width: 80%;
    margin: 0 auto;
}

.event_3_btn img:hover {
    transition: .2s all;
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    filter: brightness(1.1);
}

.event_3 span {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 1.4rem;
    color: #2f1906;
    font-weight: bold;
}

.event_4 ul {
    width: 100%;
}

.event_4 li {
    display: block;
}

.event_4 ul img {
    width: 100%;
}

/* 遮罩背景 */
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
}

/* 登入視窗 */
#login-modal,
#notice1-modal,
#notice2-modal,
#notice3-modal,
#notice4-modal,
#share-modal,
#prize-modal,
#invite-modal {
    display: none;
    /* 初始隱藏 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #f8f8f8;
    border-radius: 10px;
    width: 85%;
    padding: 2%;
    max-width: 474px;
    max-height: 80vh;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    flex-direction: column;
    /* flex 設定保留，等待 jQuery 動態觸發 */
    overflow: hidden;
    color: #383e4a;
    line-height: 1.6em;
    font-size: 1em;
    background: url(../../images/dec_reward/event_3_bg.jpg)#e4e4e4 top center no-repeat;
    background-size: cover;
}

/* 標題與關閉按鈕 */
.s-modal-header {
    display: flex;
    justify-content: flex-end;
}

.close-btn {
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 2%;
}

/* 滾動區塊設為 modal-body */
.modal-body {
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 10px;
    /* 預留卷軸空間 */
    font-size: 1rem;
}

.modal-body p {
    margin: 4% 0;
}

/* 內文區塊 */
.modal-body h2 {
    font-size: 20px;
    margin-bottom: 15px;
    text-align: center;
}

.modal-body input {
    width: 100%;
    padding: 4px;
    margin-bottom: 10px;
    font-size: 16px;
    box-sizing: border-box;
}

.captcha {
    background: #ccc;
    padding: 10px;
    text-align: center;
    margin-bottom: 15px;
}

.submit-btn {
    width: 50%;
    display: block;
    margin: 0 auto;
    padding: 10px;
    border: none;
    cursor: pointer;
    background: transparent;
    transition: .2s all;
}

.item_off {
    filter: grayscale(100%);
}

.submit-btn img {
    width: 100%;
}

.submit-btn:hover {
    transition: .2s all;
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

.login_teach {
    font-size: 18px;
    display: block;
    width: 100%;
    text-align: center;
    padding: 4px 0;
    color: #a32121;
    text-decoration: underline;
}

.login_teach:hover {
    color: #f92f2f;
}

.login_notice {
    display: block;
    width: 100%;
    text-align: center;
    color: #a32121;
    font-weight: bold;
}

.reset {
    display: block;
    width: 100%;
    text-align: right;
}

.share_box {
    width: 94%;
    position: relative;
    margin: 0 auto;
    background: url(../../images/dec_reward/share_bg.png)center center no-repeat;
    background-size: 100%;
    padding: 3%;
}

.share_box img {
    width: 100%;
}

.share_site {
    width: 90%;
    padding: 2% 5%;
    margin: 3% 0 0 0;
    border-radius: 20px;
    font-size: 1.2em;
    color: #000000;
    background-color: #8e8e8e;
}

.share_icon {
    width: 100%;

}

.share_icon img {
    width: 10%;
    margin: 1%;
}

@keyframes pulse_2 {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.05);
        filter: brightness(1.1);
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@media(max-width: 1024px) {
    #mainBlock {
        background-color: #fff;
        font-family: 'Noto Sans TC', sans-serif;
        overflow-x: hidden;
        font-size: 5vw;
        line-height: 8vw;
    }

    #mainBlock header {
        background: url(../../images/dec_reward/kv_m.jpg)#f6f6f6 top center no-repeat;
        background-size: 100%;
        height: auto;
        aspect-ratio: 6 / 7;
    }

    .logo {
        width: 25%;
    }

    .slogan {
        display: block;
        width: 80%;
        margin: 0 auto;
    }

    #mainBlock nav {
        width: 90%;
    }

    #mainBlock nav ul li {
        width: 46%;
        margin: 1% 2%;
        list-style: none;
        transition: .2s all;
    }

    .event_1,
    .event_2,
    .event_3 {
        height: auto;
        padding: 5vh 0;

    }

    .event_4 {
        height: auto;
        padding: 5vh 0 20vh;
    }

    .event_1_in,
    .event_2_in,
    .event_3_in,
    .event_4_in {
        width: 90%;
        max-width: 1000px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .btn_notice {
        width: 12vw;
        max-width: 117px;
        left: 85%;
        top: 2%;
    }

    .title {
        width: 65%;
        max-width: 475px;
        padding-bottom: 3%;
    }

    .emptyBlock {
        width: 15vw;
    }
/*    .title2 {
        width: 65%;
        max-width: 475px;
        padding-bottom: 3%;
        padding-left: 15%;
    }*/

    .btn_login2 {
        width: 15vw;
        max-width: 475px;
        animation: pulse_2 1.2s infinite;
        cursor: pointer;
    }
}