body {
    /*background: url(../images/background/index.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 1920px 1080px;
    overflow: hidden;
    font-family: 微軟正黑體,Lucida Sans Unicode,Arial, sans-serif;*/
    background: url(../images/background/index.jpg?v=20211005);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
    overflow: hidden;
    font-family: 微軟正黑體,Lucida Sans Unicode,Arial, sans-serif;
}

.topside {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%; /*93vw*/
    height: 10vh;
}

.top_left {
    width: auto;
    height: 10vh;
    max-width: 33vw;
    float: left;
}

.bottom_left {
    width: auto;
    height: 5vh;
    max-width: 33vw;
    float: left;
    opacity: 0.5;
}

.top_right {
    width: auto;
    height: 10vh;
    max-width: 33vw;
    float: right;
    font-size: 2.5vw;
    color: #303030;
    -webkit-text-stroke: 1px black;
    text-shadow: 4px 6px 6px rgba(0,0,0,0.5);
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.bottom_right {
    width: auto;
    height: 5vh;
    max-width: 33vw;
    float: right;
    font-size: 2.5vw;
    color: #303030;
    -webkit-text-stroke: 1px black;
    text-shadow: 4px 6px 6px rgba(0,0,0,0.5);
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    opacity: 0.5;
}

.midside {
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/background/modal.jpg?v=20211005);
    -webkit-box-shadow: 0px 0px 10px 5px grey;
    -moz-box-shadow: 0px 0px 10px 5px grey;
    box-shadow: 0px 0px 10px 5px grey;
    overflow: hidden;
    margin-top: 1vh;
}

#Carousel1 {
    /*padding: 0.5%;*/
    position: relative;
    padding-top: 2vh;
    width: 93vw;
    height: 32vh;
    margin-top: 1vh;
    margin-bottom: 1vh;
    /*border: 1px solid black;*/
}

#Carousel2 {
    position: relative;
    padding: 0px;
    width: 93vw;
    height: 32vh;
    margin-top: 1vh;
    padding-bottom: 2vh;
    /*border: 1px solid black;*/
}

.msg {
    white-space: nowrap;
    color: rgba(116,81,46,0.3);
    font-size: 5vh;
    /*font-weight: bold;*/
    width: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: inline;
}

.newbooks {
    text-align: center;
    width: 93vw;
    margin: 0 auto;
    clear: both;
    /*padding-left:1%;*/
    /*border:1px solid black;*/
}

.imgAndContent1 {
    vertical-align: top;
    /*border: 1px inset #808080;*/
}

.newbook-overlay {
    text-align: center;
    position: relative;
    font-family: 微軟正黑體,Lucida Sans Unicode,Arial, sans-serif;
    font-size: 1.2vw;
    font-weight: bold;
    width: 9.75vw;
    margin-left: 1.5vw;
    height: auto;
    max-height: 8.5vh;
    padding-top: 0.6vh;
    overflow: hidden;
    white-space: pre-line;
    clear: both;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.cycle-slideshow {
    height: 31.96vh;
    width: auto;
    padding: 0 0 0 0;
    position: absolute;
}

    /* slideshow images (for most of the demos, these are the actual "slides") */
    .cycle-slideshow img {
        /*
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */                
        width: 9.75vw;
        height: 13vw;
        display: block;
        left: 0px;
        top: 0px;
        float: left;
        /*border: 1px inset #808080;*/
        box-shadow: 1px -1px rgba(84, 84, 84, 0.8), 2px -2px rgba(89, 89, 89, 0.8), 3px -3px rgba(94, 94, 94, 0.8), 4px -4px rgba(99, 99, 99, 0.8), 5px -5px rgba(104, 104, 104, 0.8), 6px -6px rgba(109, 109, 109, 0.8), 7px -7px rgba(114, 114, 114, 0.8), 8px -8px rgba(119, 119, 119, 0.8), 9px -9px rgba(124, 124, 124, 0.8);
        /*width: 10.41667vw;*/ /* 200px; */
        /*height: 13.45484vw;*/ /* 258.333px*/
        margin-top: 2vh;
        margin-right: 2vw;
        margin-left: 1.5vw;
    }

        /* in case script does not load */
        .cycle-slideshow img:first-child {
            position: static;
            z-index: 100;
        }

.title_str {
    font-size: 3vw;
}


/*
    these are just the default styles used in the Cycle2 demo pages.
    you can use these styles or any others that you wish.
*/

/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 3.5vw;
    width: 93vw;
    height: 10vh;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /*-webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;*/
}

/*.footer {
    position: fixed;
    bottom: 0;
    right: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}*/