@font-face {
    font-family: countdown-font;
    src: url('../font/NI7SEG.TTF');
}

.fileinput-button {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.fileinput-button input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    font-size: 200px !important;
    direction: ltr;
    cursor: pointer;
}

/* Fixes for IE < 8 */
@media screen\9 {
    .fileinput-button input {
        filter: alpha(opacity=0);
        font-size: 100%;
        height: 100%;
    }

}

input[type=file] {
    position: relative;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 30;
}

html, body {

    /* overflow: hidden; */
    -webkit-touch-action: none;
    -moz-touch-action: none;
    -o-touch-action: none;
    touch-action: none;
}

.ui-container {
    display: none;
    position: absolute;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.font-buffer {
    opacity: 0.1;
    position: absolute;
    bottom: 0;
}

* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

input {
    -webkit-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

#bg {
    display: block;
    background-size: 500% 200%;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-image: url('../image/動態/Background/spritesheet.png');
    animation-name: anim10;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: step-start;
}

#bg2 {
    display: block;
    background-size: 500% 200%;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-image: url('../image/動態/Background2/spritesheet.png');
    animation-name: anim10;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: step-start;
}

#p1 {
    background-size: 500% 200%;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-image: url('../image/動態/Homepage/spritesheet.png');
    animation-name: anim10;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: step-start;
}

#start-btn {
    position: absolute;
    left: 15%;
    width: 70%;
    height: 14%;
    top: 65%;
    background: none;
    background-image: url('../image/1 待機畫面/button_任務啟動.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#username {
    position: absolute;
    left: 30%;
    width: 50%;
    height: 5%;
    top: 54%;
    background: none;
    border: 1px white solid;
    color: white;
    box-sizing: border-box;
    padding: 0% 2%;
}

#password {
    position: absolute;
    left: 30%;
    width: 50%;
    height: 5%;
    top: 65%;
    background: none;
    border: 1px white solid;
    color: white;
    box-sizing: border-box;
    padding: 0% 2%;
}

.p2-panel {
    position: absolute;
    left: 0%;
    width: 100%;
    height: 74%;
    top: 0%;
    background: none;
    background-image: url('../image/2 帳密登入/帳密登入_頁面.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#login-btn {
    position: absolute;
    left: 25%;
    width: 50%;
    height: 10%;
    top: 75%;
    background: none;
    background-image: url('../image/2 帳密登入/帳密登入_進入按鈕.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.p3-panel {
    position: absolute;
    left: 0%;
    width: 100%;
    height: 74%;
    top: 7%;
    background: none;
    background-image: url('../image/3 倒數和影片/倒數影片框.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#welcome-video {
    position: absolute;
    top: 40.8%;
    left: 8%;
    width: 84.5%;
    height: 27%;
}

#countdown-number {
    position: absolute;
    left: 51.5%;
    top: 25.5%;
    width: 20%;
    text-align: center;
    color: white;
    font-family: countdown-font;
}

#skip-video-btn {
    position: absolute;
    left: 25%;
    width: 50%;
    height: 5%;
    top: 76%;
    background: none;
    background-image: url('../image/3 倒數和影片/button_關閉指令.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.logo {
    position: absolute;
    width: 46%;
    height: 15%;
    left: 31%;
    top: 2%;
    display: block;
    background-size: 500% 200%;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-image: url('../image/動態/logo/spritesheet.png');
    animation-name: anim10;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: step-start;
}

.p4-panel {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    background: none;
    background-image: url('../image/4 主選單/主畫面選單.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#points-tally-btn {
    position: absolute;
    left: 3%;
    top: 4%;
    width: 20%;
    height: 5%;
    background: none;
    background-image: url('../image/4 主選單/主選單button_積分內容.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#points-tally-btn .lock {
    width: 45%;
    height: 84%;
    top: -35%;
    right: -5%;
}

#eid-badge-btn {
    position: absolute;
    left: 79%;
    top: 4%;
    width: 20%;
    height: 5%;
    background: none;
    background-image: url('../image/4 主選單/主選單button_電子證件.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#eid-badge-btn .lock {
    width: 45%;
    height: 84%;
    top: -35%;
    right: -5%;
}

.lock {
    pointer-events: none;
    position: absolute;
    background: none;
    background-image: url('../image/4 主選單/鎖定.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: none;
}

.locked .lock {
    display: block;
}

#day1-event-btn {
    position: absolute;
    left: 3%;
    top: 62%;
    width: 30%;
    height: 33%;
    background: none;
    background-image: url('../image/4 主選單/主選單button_D1_活動1.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#day1-event-btn .lock {
    width: 23%;
    height: 13%;
    top: -6%;
    right: -6%;
}

#day2-event1-btn {
    position: absolute;
    left: 36.5%;
    top: 62%;
    width: 28%;
    height: 10%;
    background: none;
    background-image: url('../image/4 主選單/主選單button_D2_活動1.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#day2-event1-btn .lock {
    width: 26%;
    height: 42%;
    top: -19%;
    right: -11%;
}

#day2-event2-btn {
    position: absolute;
    left: 36.5%;
    top: 73.5%;
    width: 28%;
    height: 10%;
    background: none;
    background-image: url('../image/4 主選單/主選單button_D2_活動2.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#day2-event3-btn {
    position: absolute;
    left: 36.5%;
    top: 85%;
    width: 28%;
    height: 10%;
    background: none;
    background-image: url('../image/4 主選單/主選單button_D2_活動3.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#day3-event-btn {
    position: absolute;
    left: 68%;
    top: 62%;
    width: 30%;
    height: 33%;
    background: none;
    background-image: url('../image/4 主選單/主選單button_D3_活動1.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#day3-event-btn .lock {
    width: 23%;
    height: 13%;
    top: -6%;
    right: -6%;
}

#registration-btn {
    display: none;
    position: absolute;
    left: 30%;
    top: 29%;
    width: 40%;
    height: 21%;
    background: none;
    background-size: 500% 200%;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-image: url('../image/動態/Login/spritesheet.png');
    animation-name: anim10;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: step-start;
}

.back-btn {
    position: absolute;
    left: 37%;
    top: 93%;
    width: 25%;
    height: 4%;
    background: none;
    background-image: url('../image/5 登錄資料/button_上一頁.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.suitcase {
    position: absolute;
    left: 37%;
    top: 88%;
    width: 25%;
    height: 9%;
    background: none;
    background-image: url('../image/5 登錄資料/裝飾品_手提箱.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.next-btn {
    position: absolute;
    left: 68%;
    top: 93%;
    width: 25%;
    height: 4%;
    background: none;
    background-image: url('../image/5 登錄資料/button_下一頁.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.p5-1-panel {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 79%;
    background: none;
    background-image: url('../image/5 登錄資料/身分登錄_保險資料.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#name {
    position: absolute;
    left: 30%;
    width: 50%;
    height: 5%;
    top: 52%;
    background: none;
    border: 1px white solid;
    color: white;
    padding: 0% 2%;
    box-sizing: border-box;
}

.p5-2-panel {
    pointer-events: none;
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 79%;
    background: none;
    background-image: url('../image/5 登錄資料/身分登錄_高鐵票選擇.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.p5-3-panel {
    pointer-events: none;
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 79%;
    background: none;
    background-image: url('../image/5 登錄資料/身分登錄_室友與飲食.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.p5-4-panel {
    pointer-events: none;
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 79%;
    background: none;
    background-image: url('../image/5 登錄資料/身分登錄_成功.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.p5-5-panel {
    pointer-events: none;
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    background: none;
    background-image: url('../image/5 登錄資料/身分登錄_已完成狀態.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#my-name {
    position: absolute;
    left: 34%;
    top: 42%;
    width: 45%;
    height: 5%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
    white-space: nowrap;
}

#my-hsr-ticket {
    position: absolute;
    left: 49%;
    top: 46.8%;
    width: 30%;
    height: 5%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
}

#my-roommate {
    position: absolute;
    left: 42%;
    top: 51.8%;
    width: 37%;
    height: 5%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
    white-space: nowrap;
}

#my-dietary {
    position: absolute;
    left: 42%;
    top: 56.8%;
    width: 37%;
    height: 5%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
    white-space: nowrap;
}

#hsr_ticket {
    position: absolute;
    left: 37%;
    width: 46%;
    height: 5%;
    top: 55%;
    border: 1px white solid;
    color: white;
}

.custom-select {
    appearance: none;
    background: none;
    background-image: url('../image/5 登錄資料/select-arrow.png');
    background-repeat: no-repeat;
    background-position: right 5% center;
    position: relative;
    background-size: 9%;
    box-sizing: border-box;
    padding-left: 1.5%;
}

.custom-select option {
    background-color: #fff;
    color: #000;
}

.custom-select option:hover {
    background-color: #e0e0e0;
}

#roommate {
    position: absolute;
    left: 37%;
    width: 46%;
    height: 5%;
    top: 52%;
    background: none;
    border: 1px white solid;
    color: white;
    padding: 0% 2%;
    box-sizing: border-box;
}

#dietary {
    position: absolute;
    left: 37%;
    width: 46%;
    height: 5%;
    top: 61%;
    background: none;
    border: 1px white solid;
    color: white;
    padding: 0% 2%;
    box-sizing: border-box;
}

.check {
    display: block;
    position: absolute;
    left: 35%;
    width: 30%;
    top: 24%;
    height: 17%;
    background-size: 400% 100%;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-image: url('../image/5 登錄資料/spritesheet.png');
}

#yes-btn {
    display: block;
    position: absolute;
    left: 29%;
    width: 16%;
    top: 81%;
    height: 7%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../image/5 登錄資料/身分登錄_是.png');
}

#no-btn {
    display: block;
    position: absolute;
    left: 55%;
    width: 16%;
    top: 81%;
    height: 7%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../image/5 登錄資料/身分登錄_否.png');
}

.p6-panel {
    position: absolute;
    left: 0%;
    width: 100%;
    height: 100%;
    top: 0%;
    background: none;
    background-image: url('../image/5 登錄資料/身分登錄_時間已過.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#back-5-1-btn, #back-5-2-btn, #back-5-3-btn {
    left: 7%;
}

@keyframes anim10 {
    0% {
        background-position: 0% 0%;
    }

    11% {
        background-position: 25% 0%;
    }

    22% {
        background-position: 50% 0%;
    }

    33% {
        background-position: 75% 0%;
    }

    44% {
        background-position: 100% 0%;
    }

    56% {
        background-position: 0% 100%;
    }

    67% {
        background-position: 25% 100%;
    }

    78% {
        background-position: 50% 100%;
    }

    89% {
        background-position: 75% 100%;
    }

    100% {
        background-position: 100% 100%;
    }

}