@font-face {
    font-family: zh;
    src: local("微軟正黑體"), local("Lantinghei TC"), local("MingLiU_HKSCS");
}

@font-face {
    font-family: test;
    src: url(../font/ct.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; */
}

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

.btn {
    background: none;
    border: none;
    position: absolute;
    z-index: 10;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.loading-mask {
    color: white;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 200;
    text-align: center;
    padding-top: 200px;
    display: none;
}

#p1 {
    background-image: url('../image/01-待機畫面/BG.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#bg-vid {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.landing-1 {
    position: absolute;
    z-index: 7;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-image: url('../image/220909/01WaitingArea-MiddleBook_2.gif');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.landing-2 {
    position: absolute;
    z-index: 6;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-image: url('../image/220909/01WaitingArea-MiddleLayer_2.gif');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.title-1 {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 20%;
    left: 0%;
    top: 9%;
    background-image: url('../image/01-待機畫面/01WaitingArea_01-Title.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.title-2 {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 7%;
    left: 0%;
    top: 71%;
    background-image: url('../image/01-待機畫面/01WaitingArea_01-Teacher.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#start-btn {
    position: absolute;
    z-index: 10;
    width: 64%;
    height: 11%;
    left: 18%;
    top: 82%;
}

#p2 {
    background-image: url('../image/01-待機畫面/BG.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#p2 .title {
    position: absolute;
    width: 100%;
    height: 12%;
    left: 0%;
    top: 5%;
    background-image: url('../image/02-選擇主題/02PickingItem_02-Title.png');
    background-size: contain;
    background-position: 34%;
    background-repeat: no-repeat;
}

.select-2 {
    position: absolute;
    width: 45%;
    height: 35%;
    border: none;
    background: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

#select-color-btn {
    background-image: url('../image/02-選擇主題/02PickingItem_02-Color.png');
    left: 9%;
    top: 18%;
}

#select-animal-btn {
    background-image: url('../image/02-選擇主題/02PickingItem_02-Animal.png');
    left: 50%;
    top: 18%;
}

#select-food-btn {
    background-image: url('../image/02-選擇主題/02PickingItem_02-Food.png');
    left: 10%;
    top: 54%;
}

#select-cover-btn {
    background-image: url('../image/02-選擇主題/02PickingItem_02-Book.png');
    left: 50%;
    top: 54%;
}

#p3-1 {
    background-image: url('../image/01-待機畫面/BG.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#p3-1 .title {
    position: absolute;
    width: 100%;
    height: 12%;
    left: 0%;
    top: 5%;
    background-image: url('../image/03-選擇喜愛的顏色/03PickingColor_03-Title.png');
    background-size: contain;
    background-position: 34%;
    background-repeat: no-repeat;
}

.select-3 {
    position: absolute;
    width: 40%;
    height: 21%;
    border: none;
    background: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

#select-color-black-btn {
    background-image: url('../image/03-選擇喜愛的顏色/03PickingColor_03-BlackWhite.png');
    left: 10%;
    top: 18%;
}

#select-color-red-btn {
    background-image: url('../image/03-選擇喜愛的顏色/03PickingColor_03-Red.png');
    left: 50%;
    top: 18%;
}

#select-color-orange-btn {
    background-image: url('../image/03-選擇喜愛的顏色/03PickingColor_03-Orange.png');
    left: 10%;
    top: 40%;
}

#select-color-yellow-btn {
    background-image: url('../image/03-選擇喜愛的顏色/03PickingColor_03-Yellow.png');
    left: 50%;
    top: 40%;
}

#select-color-green-btn {
    background-image: url('../image/03-選擇喜愛的顏色/03PickingColor_03-Green.png');
    left: 10%;
    top: 62%;
}

#select-color-blue-btn {
    background-image: url('../image/03-選擇喜愛的顏色/03PickingColor_03-Blue.png');
    left: 50%;
    top: 62%;
}

.test-1 {
    position: absolute;
    width: 100%;
    height: 12%;
    left: 0%;
    top: 50%;
    font-size: 30px;
    font-family: test;
    font-style: italic;
}

.test-2 {
    position: absolute;
    width: 100%;
    height: 12%;
    left: 0%;
    top: 60%;
    font-size: 30px;
    font-family: zh;
    font-style: italic;
    font-weight: bold;
}

#p3-2 {
    background-image: url('../image/01-待機畫面/BG.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#p3-2 .title {
    position: absolute;
    width: 100%;
    height: 13%;
    left: 0%;
    top: 5%;
    background-image: url('../image/04-選擇喜愛的食物/04PickingFood_04-Title.png');
    background-size: contain;
    background-position: 34%;
    background-repeat: no-repeat;
}

#select-food-wiki-btn {
    background-image: url('../image/04-選擇喜愛的食物/04PickingFood_04-Wiki.png');
    left: 10%;
    top: 18%;
}

#select-food-coffeetea-btn {
    background-image: url('../image/04-選擇喜愛的食物/04PickingFood_04-CoffeeTea.png');
    left: 50%;
    top: 18%;
}

#select-food-tw-btn {
    background-image: url('../image/04-選擇喜愛的食物/04PickingFood_04-TWFood.png');
    left: 10%;
    top: 40%;
}

#select-food-jp-btn {
    background-image: url('../image/04-選擇喜愛的食物/04PickingFood_04-JananeseFood.png');
    left: 50%;
    top: 40%;
}

#select-food-foreigner-btn {
    background-image: url('../image/04-選擇喜愛的食物/04PickingFood_04-ForeignerFood.png');
    width: 92%;
    left: 4%;
    top: 62%;
    height: 22%;
}

#p3-3 {
    background-image: url('../image/01-待機畫面/BG.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#p3-3 .title {
    position: absolute;
    width: 100%;
    height: 13%;
    left: 0%;
    top: 5%;
    background-image: url('../image/05-選擇喜愛的動物/05PickingAnimal_05-Title.png');
    background-size: contain;
    background-position: 34%;
    background-repeat: no-repeat;
}

#select-animal-cat-btn {
    background-image: url('../image/05-選擇喜愛的動物/05PickingAnimal_05-Cat.png');
    left: 10%;
    top: 18%;
}

#select-animal-dog-btn {
    background-image: url('../image/05-選擇喜愛的動物/05PickingAnimal_05-Dog.png');
    left: 50%;
    top: 18%;
}

#select-animal-ground-btn {
    background-image: url('../image/05-選擇喜愛的動物/05PickingAnimal_05-GroundAni.png');
    left: 10%;
    top: 40%;
}

#select-animal-air-btn {
    background-image: url('../image/05-選擇喜愛的動物/05PickingAnimal_05-AirAni.png');
    left: 50%;
    top: 40%;
}

#select-animal-ocean-btn {
    background-image: url('../image/05-選擇喜愛的動物/05PickingAnimal_05-OceanAni.png');
    width: 92%;
    left: 4%;
    top: 62%;
    height: 22%;
}

#p3-4 {
    background-image: url('../image/01-待機畫面/BG.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#p3-4 .title {
    position: absolute;
    width: 100%;
    height: 12%;
    left: 0%;
    top: 5%;
    background-image: url('../image/06-選擇喜愛的特色書封/06PickingBook_06-Title.png');
    background-size: contain;
    background-position: 34%;
    background-repeat: no-repeat;
}

#select-cover-award-btn {
    background-image: url('../image/06-選擇喜愛的特色書封/06PickingBook_06-Award.png');
    width: 92%;
    left: 4%;
    top: 16%;
    height: 38%;
}

#select-cover-designer-btn {
    background-image: url('../image/06-選擇喜愛的特色書封/06PickingBook_06-Designer.png');
    width: 92%;
    left: 4%;
    top: 53%;
    height: 38%;
}

#p4 {
    background-image: url('../image/01-待機畫面/BG.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg {
    z-index: 3;
    position: absolute;
    width: 100%;
    left: 0%;
    top: 5%;
    height: 90%;
    background-image: url('../image/07-推薦書籍/07SuggestBook_07-AllItem.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.book-list {
    z-index: 3;
    position: absolute;
    width: 100%;
    left: 0%;
    top: 75%;
    height: 17%;
    overflow-x: auto;
    overflow-y: hidden;
}

#book-list-container {
    position: absolute;
}

.book-item {
    float: left;
    background: none;
    position: relative;
}

.cover-type-1,
.cover-type-2,
.cover-type-3 {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 65%;
    position: absolute;
    left: 0%;
    top: 0%;
}

#book-list-container .book-name {
    position: relative;
    top: 70%;
    text-align: center;
    height: 30%;
    overflow: hidden;
    height: 3.0em;
    line-height: 1.5;
}

#book-cover {
    position: absolute;
    left: 0%;
    top: 21%;
    width: 100%;
    height: 29%;
    z-index: 5;
}

#title {
    position: absolute;
    left: 12%;
    top: 41%;
    width: 76%;
    height: 10%;
    text-align: center;
    z-index: 10;
    font-weight: bold;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#author {
    position: absolute;
    left: 12%;
    top: 46%;
    width: 36%;
    height: 10%;
    text-align: right;
    z-index: 10;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #666;
    font-weight: bold;
}

#publisher {
    position: absolute;
    left: 50%;
    top: 45%;
    width: 38%;
    height: 10%;
    text-align: left;
    z-index: 10;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #666;
    font-weight: bold;
}

#publish_date {
    position: absolute;
    left: 50%;
    top: 47%;
    width: 38%;
    height: 10%;
    text-align: left;
    z-index: 10;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #666;
    font-weight: bold;
}

#intro {
    position: absolute;
    left: 12%;
    top: 50%;
    width: 76%;
    height: 14%;
    text-align: left;
    z-index: 10;
    text-align: justify;
    overflow: hidden;
    height: 9em;
    line-height: 1.5;
    color: #000000;
    font-weight: bold;
}

.bar {
    position: absolute;
    left: 49%;
    top: 45%;
    width: 42%;
    height: 4%;
    border-left: #999999 solid 2px;
    z-index: 10;
}

#location {
    position: absolute;
    left: 8%;
    top: 9%;
    width: 80%;
    height: 4%;
    z-index: 10;
    font-style: italic;
    font-weight: bold;
    text-shadow: rgba(0, 0, 0, 0.2) 3px 3px 3px;
}

#more {
    display: none;
    position: absolute;
    left: 12%;
    top: 63%;
    width: 80%;
    height: 4%;
    z-index: 10;
    font-weight: bold;
}