@keyframes myfirst {
    0% {
        background: red;
        left: 0px;
        top: 0px;
    }

    25% {
        background: yellow;
        left: 200px;
        top: 0px;
    }

    50% {
        background: blue;
        left: 200px;
        top: 200px;
    }

    75% {
        background: green;
        left: 0px;
        top: 200px;
    }

    100% {
        background: red;
        left: 0px;
        top: 0px;
    }
}

@media screen and (min-width:600px) {
}

body {
    background-attachment: fixed;
    /*background: radial-gradient(circle, transparent 20%, rgba(216, 255, 215, 0.70) 20%, rgba(216, 255, 215, 0.70) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgba(216, 255, 215, 0.70) 20%, rgba(216, 255, 215, 0.70) 80%, transparent 80%, transparent) 50px 50px, linear-gradient(#d8ffd7 8px, transparent 8px) 0 -4px, linear-gradient(90deg, #d8ffd7 8px, transparent 8px) -4px 0;
    background-color: rgba(135, 255, 135, 0.8);
    background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;*/
    /*background-color: rgba(135, 255, 135, 0.2);*/
    /*background: url(../images/background/bg.jpg);*/
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
    margin:0;
    /*width: 99%;
    height: 99%;*/
    overflow: hidden;
    /*border: 1px solid black;*/
    font-family: 微軟正黑體,Lucida Sans Unicode,Arial, sans-serif;
}

.rank_ReaderTitleRow {
    background: rgba(40%, 20%, 70%, .7);
}

.rank_UnitTitleRow {
    background: rgba(70%, 20%, 40%, .7);
}

.rank_doubleRow {
    background: rgba(100%, 100%, 100%, .8);
}

.rank_singleRow {
    background: rgba(80%, 75%, 85%, .8);
}

.ranking_table {
    color: black;
}

.clear_float {
    clear: both;
}

.title_str {
    color: #202020;
    position: relative;
    font-weight: bold;
    -webkit-text-stroke: 1px black;
    text-shadow: 2px 6px 6px rgba(0,0,0,0.2), 0px -5px 20px rgba(255,255,255,0.3);
}

.count_title {
    color: #405050;
    position: relative;
    font-weight: bold;
    /*-webkit-text-stroke: 1px #405050;*/
    text-shadow: 2px 6px 6px rgba(0,0,0,0.2), 0px -5px 20px rgba(255,255,255,0.3);
}

.count_show {
    color: brown;
    position: relative;
    font-weight: bold;
    /*-webkit-text-stroke: 1px brown;*/
    text-shadow: 2px 6px 6px rgba(0,0,0,0.2), 0px -5px 20px rgba(255,255,255,0.3);
    text-align: center;
    font-family: Arial,Times New Roman, 微軟正黑體;
}

.title_table {
    position: relative;
    font-weight: bold;
    letter-spacing: 5px; /* for Chinese */
    /*letter-spacing: 2px;*/ /* for English */
    text-align: center;
    text-shadow: 2px 6px 6px rgba(0,0,0,0.2), 0px -5px 20px rgba(255,255,255,0.3);
    border-bottom: 4px solid rgba(0%, 0%, 0%, .8);
    color: rgba(100%, 100%, 100%, .9);
}

#ErrMes {
}

/*
    單冊書籍資訊
*/
#bookDetail {
    /*width: 1200px;
    height: 700px;*/
    max-height: 95vh;
    max-width: 90vw; /* 覆蓋.modal */
    width: auto; /* 覆蓋.modal */
    /*padding: 30px;*/ /* 覆蓋.modal */
}

#BookData {
    height: 95vh;
    width: 90vw;
    overflow: hidden;
}

.CoverPanel {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    /*align-items: flex-end;*/
    align-items: center;
    /*text-align: right;
    vertical-align: middle;*/
    /*margin: 20px;*/
    /*width: 49%;
    padding-left: 18%;*/
    margin-left: 0vw;
    width: 25vw;
    height: 92vh;
}

    .CoverPanel .BookCoverImage {
        width: 15vw;
        height: 20vw;
        /*max-width: 300px;
        max-height: 400px;*/
        background-size: 100% 100%;
        background-position: right center;
        background-repeat: no-repeat;
        -webkit-box-shadow: 0 10px 6px -6px #777;
        -moz-box-shadow: 0 10px 6px -6px #777;
        box-shadow: 0px 10px 6px -6px #777;
    }

.underCoverPanel {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.InfoScroll {
    width: 58vw;
    height: 92vh;
    overflow: auto;
}

.InfoPanel {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    /*text-align: left;
    vertical-align: middle;*/
    /*max-width: 62.5vw;
    min-width: 31.25vw;*/
    width: 57vw;
    height: 92vh;
}

    .InfoPanel .title,
    .InfoPanel .data {
        display: inline-block;
        font-size: 2vw;
        color: black;
        vertical-align: text-top;
        /*padding: 1px 2px;*/
        padding: 1px 0px;
    }

    .InfoPanel .title {
        text-align: right;
        width: 14vw;
        font-weight: bold;
    }

    .InfoPanel .data {        
        text-align: left;
        width: 41vw;
        padding-left: 1vw;
    }

#VideoPlay {
    /*width: 1200px;
    height: 700px;*/
    max-height: 95vh;
    max-width: 90vw; /* 覆蓋.modal */
    width: auto; /* 覆蓋.modal */
    /*padding: 30px;*/ /* 覆蓋.modal */
}

#VideoData {
    height: 95vh;
    width: 90vw;
    overflow: hidden;
}

.VideoPanel {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    /*max-width: 62.5vw;
    min-width: 31.25vw;*/
    width: 100%;
    height: 100%;
}

    .VideoPanel .title,
    .VideoPanel .data {
        display: inline-block;
        font-size: 1.5vw;
        vertical-align: text-top;
        padding: 1px 2px;
    }


    .VideoPanel .title {
        width: 13.6vw;
        text-align: right;
        font-weight: bold;
    }

    .VideoPanel .data {
        width: auto;
        max-width: 80vw;
        min-width: 17vw;
        text-align: left;
    }

#Bookstore {
    /*width: 1200px;
    height: 700px;*/
    max-height: 95vh;
    max-width: 90vw; /* 覆蓋.modal */
    width: auto; /* 覆蓋.modal */
    /*padding: 30px;*/ /* 覆蓋.modal */
}

.my-close-modal {
    position: absolute;
    /*top: -25px;
    right: -25px;*/
    display: block;
    width: 3vw;
    height: 3vw;
    transform: translateY(-1.5vw);
    text-indent: -9999px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==');
}

.MapFloor {
    /*padding: 20px;*/
    text-align: center;
    height: 456px;
    width: 516px;
    margin: 20px auto 0px;
    /*background: rgba(182, 225, 252, 1.0);*/
}

.ShelfMapMsg {
    padding: 0 0 10px;
    font-size: large;
    font-weight: bold;
}

.ShelfMapPanel,
.ShelfMapPanel > svg {
    /*position:  absolute;
    top: 0;
    left: 0;*/
    margin: 0px auto;
    /*設定跟管理端同步*/
    /* (678:783)*0.76 */
    /*width: 515px;
    height: 595px;*/
    /* (760:860)*0.6 */
    width: 456px;
    height: 516px;
    background-size: contain;
    background-position: center top;
    background-attachment: local;
    background-repeat: no-repeat;
}

    .ShelfMapPanel > .MapHiddenField {
        display: none;
    }

.clearbtn {
    text-align: center;
    font-size: 1.7vw;
    font-family: Times New Roman,微軟正黑體,Lucida Sans Unicode,Arial, sans-serif;
    width: auto;
    height: auto;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    border: 5px #BCD2E6;
    border-style: ridge;
    background-color: rgba(240,255,255,0.8);
}

.upbtn {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 2.6vw 2.6vw 2.6vw;
    border-color: transparent transparent #0a6691 transparent;
}

    .upbtn:hover {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 2.6vw 2.6vw 2.6vw;
        border-color: transparent transparent lightblue transparent;
    }

    .upbtn:active {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 2.6vw 2.6vw 2.6vw;
        border-color: transparent transparent lightblue transparent;
    }

.downbtn {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 2.6vw 2.6vw 0 2.6vw;
    border-color: #0a6691 transparent transparent transparent;
}

    .downbtn:hover {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 2.6vw 2.6vw 0 2.6vw;
        border-color: lightblue transparent transparent transparent;
    }

    .downbtn:active {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 2.6vw 2.6vw 0 2.6vw;
        border-color: lightblue transparent transparent transparent;
    }

/*
    書目瀏覽
*/
.BrowseBooksPanel {
    display: block;
    overflow: hidden;
    text-align: center;
    margin: 10px 0%;
    padding: 3vh 1%;
    /*background-color: rgba(255, 255, 255, 0.9);*/
    background-image: url(../images/glass-frame.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    /*border: 10px solid transparent;
    border-image-source: url('images/glass-frame-00.png');
    border-image-outset: 0px;
    border-image-slice: 40%;
    border-image-repeat: stretch;
    border-image-width: 100px; */
}

.BooksPanel {
    position: relative;
    padding: 0pt 30pt;
    width: 90vw;
    height: 20vw;
    padding-left: 3.5vw;
    padding-top: 4vh;
}

.BooksPanel2 {
    position: relative;
    padding: 0px 2.5vw;
    width: 88.15vw;
    height: 30vh;
    margin-top: 1vh;
}

.Book {
    max-width: 263px;
    min-width: 263px;
}

.btn {
    font-family: 微軟正黑體,Lucida Sans Unicode,Arial, sans-serif;
    text-align: center;
    min-width: 70%;
    max-width: 100%;
    height: 2.9vw;
    font-size: 2vw;
    font-weight: bold;
    background-color: rgba(160, 120, 220, 0.8);
    outline: none;
}

.btn-default {
    border: 3px outset rgb(183, 223, 243);
    background-color: rgba(182, 225, 252, 1.0);
    /*padding: 10px 20px;*/
    font-weight: bold;
    font-family: 微軟正黑體,Lucida Sans Unicode,Arial, sans-serif;
    outline: none;
}

.ddl_temp {
    width: 14vw;
    height: 2.5vw;
    padding-left: 4.5vw;
    font-family: 微軟正黑體,Lucida Sans Unicode,Arial, sans-serif;
    font-size: 1.5vw;
}

.hand_icon {
    position: absolute;
    top: 25%;
    width: 31px;
    height: 44px;
    margin-top: -70px;
    z-index: 0;
    cursor: pointer;
    background-size: 31px 44px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/hand.png);
    outline: none;
}

.video_icon {
    width: 10vw;
    height: auto;
    /*margin-right: 2.5vw;*/
    margin-right: 1vw;
    margin-left: 1vw;
    margin-top: 2.5vh;
    outline: none;
}

.bgazure {
    background-color: azure;
}