:root {
    --vh: 1vh;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
}

html,
body,
#app {
    width: 100%;
    height: 100%;
    background-color: #000000;
    -webkit-text-size-adjust: 100%;
    transition: height 100ms;
}

body {
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 0;
}

#app {
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: flex;
    justify-content: center;
    width: 100%;
    height: calc(var(--vh) * 100);
    max-height: 100vh;
    overflow: hidden;
}

img {
    -webkit-touch-callout: none;
}

#drama_download_banner {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 1.46rem;
}

.top_banner_btn {
    width: 100%;
    height: 1.2rem;
    align-items: center;
    padding: 0 0.32rem;
    background-color: #f0f0f0;
    display: -webkit-box;
    display: -moz-box;
    display: flex;
    justify-content: space-between;
}

.adLeft {
    flex: 1;
    display: -webkit-box;
    display: -moz-box;
    display: flex;
    align-items: center;
    flex-direction: row;
    column-gap: 0.16rem;
}

.topBannerLogo {
    width: 0.88rem;
    height: 0.88rem;
}

.topBannerIntro h2 {
    font-weight: bold;
    font-size: 0.32rem;
    color: rgba(0, 0, 0, 0.9);
    line-height: 0.44rem;
}

.topBannerIntroText {
    height: 0.34rem;
    font-size: 0.26rem;
    font-weight: 400;
    line-height: 0.32rem;
    color: rgba(0, 0, 0, 0.4);
    display: inline-block;
    width: 2.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.openBtn {
    display: inline-block;
    width: 3rem;
    height: 0.64rem;
    background-color: rgb(234, 111, 113);
    border-radius: 0.32rem;
    font-size: 0.3rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 0.64rem;
    text-align: center;
    white-space: nowrap;
}

.bagImg {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    object-fit: cover;
    filter: blur(4px);
    border: 0;
}

.bagAlpha {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 1) 51%, #000000 100%);
}

.logoIcon {
    display: none;
    position: absolute;
    top: 1.52rem;
    left: 50%;
    width: 1.81rem;
    height: 0.4rem;
    justify-content: center;
    z-index: 99;
    transform: translateX(-50%);
}

.contentBox {
    position: relative;
    z-index: 10;
    display: -webkit-box;
    display: -moz-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    transition: height 100ms;
    padding: 0.3rem 0.32rem 2.42rem;
    width: 100vw;
    overflow-x: hidden;
}

.bookCoverWrap {
    display: -webkit-box;
    display: -moz-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

#drama_download_cover {
    min-height: 5.76rem;
    min-width: 3rem;
    padding: 0.3rem 0.32rem 0.16rem;
    position: relative;
}

.bookCover {
    border: 0.1rem solid transparent;
    height: 6.14rem;
    border-radius: 0.23rem;
}

.bookViews {
    position: absolute;
    right: 0.53rem;
    bottom: 0.51rem;
    z-index: 2;
    font-size: 0.24rem;
    color: #ffffff;
    white-space: nowrap;
    display: -webkit-box;
    display: -moz-box;
    display: flex;
    align-items: center;
    flex-direction: row;
    visibility: hidden;
}

.bookViews::before {
    content: "";
    display: inline-block;
    width: 0.2rem;
    height: 0.2rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAAKlBMVEUAAAD///////////////////////////////////////////////////+Gu8ovAAAADnRSTlMA5tJNmhMGiIJewjksHU4PQUIAAACBSURBVCjPY6AZSG6fhiHGs1BQyABdMEhQUFAkAE2wUBAIlNEEFwqCgCuqIFgMYSxCEMNYQShQxhREGIsQRBiLEEQYixDENFYQCUzAJiiNTVAEm6AQPkHC2qWJdZIybm8SDhBXQoEMN5BgxClCDSScGC5hSzY8iggDESC5w4yBxgAA6rkdwvedDaoAAAAASUVORK5CYII=) 0 0/100% 100% no-repeat;
    margin-right: 0.05rem;
}

.bookInfo {
    width: 100%;
    max-width: 6.84rem;
    line-height: 1.5;
    display: -webkit-box;
    display: -moz-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.bookInfo .bookName {
    font-size: 0.36rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 0.56rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding-bottom: 0.1rem;
    text-align: center;
}

.bookTag {
    padding: 0 0 0.12rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    display: none;
}

.bookTagItem {
    font-size: 0.26rem;
    display: inline-block;
    max-width: 6.84rem;
    text-align: center;
    padding: 0 0.24rem;
    height: 0.56rem;
    line-height: 0.56rem;
    border-radius: 0.28rem;
    background-color: rgba(255, 255, 255, 0.15);
    margin: 0.06rem 0.08rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bookInfo .bookDec {
    font-size: 0.26rem;
    font-weight: 400;
    text-align: left;
    color: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

#drama_download_btn {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0.9rem;
    padding: 0.32rem;
    z-index: 99;
    width: 270px;
    height: 1.52rem;
}

.downloadBtn {
    position: relative;
    width: 100%;
    height: 100%;
    box-shadow: 0 0.04rem 0.12rem 0.04rem #0505051f;
    display: -webkit-box;
    display: -moz-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.44rem;
    background: radial-gradient(50% 50% at 50% 50%, #E82F59, rgba(255, 255, 255, 0)), radial-gradient(100% 50% at 32% 50%, rgba(255, 255, 255, 0), #E82F5914 99.99%, rgba(255, 255, 255, 0)), linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.5) 3.65%, rgba(255, 255, 255, 0) 80.73%, rgba(255, 255, 255, 0.4)), #E82F59;
    border: 1px solid;
    border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.1) 27.67%, rgba(255, 255, 255, 0.04) 89.06%, rgba(255, 255, 255, 0.08) 100%);
    font-size: 0.32rem;
    font-weight: 500;
    white-space: nowrap;
}

.downloadBtn::before {
    content: "";
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANIAAADSCAMAAAAIR25wAAAAY1BMVEUAAAD/+OP/+93///7/++H///7///7/////++L//////////////////N///d7///////7///////////7//eH/+97///3//eD//OP/+eL//fD//vP//ej//OT//Oj//uv//esQOj7ZAAAAIXRSTlMADBOeKpaohxuPXoBnNCFwsHp1tjpMvURWQISObF5kdHticqQrAAASW0lEQVR42uzYi07bQBCFYcxFLaqKhETVhub2/k/ZnfXZ/DuedRoROxjJJ+GSFqg/zuyQcrdmzZo1a9asWbOcdLqXF958wXDdSCB+PRiYDoYe1cQvoXJXTht041D6sAXD9L0HMNYSYntZ9hh2OLhmOjnT0gKnkKusW0oPW5HFfdrSmqIXvvdcv+7VDVn5tGXtQXo5qboOQzMUyE5ZyJ7wB6YrHij33LkphUxDC1mA7hyoATzZ4tL/kStMugUsCl2GQHAo50z0Ia5TWvq8Q8UxkIduLors+mT2xG1BNFS3BKjF+V4lshRUdH/LdLz1nkAZy2AIWYSfg1IzBURampd0c6ke1izyGSiDUJFYbDbHsbtPNiLzKG11f58xcACx4Tyopjy+PCqeFlVs9bk1UcXWpiD6KZQzKSzFN8Xw3QLGP8JWABQ5F7NYFfq6PKuYVdUN1hweQHAuZzlUVum4zgxyozA4QyOenyPxKlBM321UtERHARQ5l7BiU2705hKpIL1qgVqct5yNbumeElwRxepjw04P4pUyAnKYjeV3lY3lzRJUzfFjw5LJS4qiCDKMKL9CRIM1bIrdd1eN30wqfqEQQRRkHjB/BgG2oasWiiVBT3M88VbczA0LMo8su91+v99WSQ93uwLry/ovar4fT2w6RIDw5HpMkyyHw/H47nI8HA4m2/UsugIVTPzomLwjebwIEP0kTtIY5q/l6ZT8sIdtrS5jUVU06bkEoKk7Us6A+n62W+PUlIecmmas7TapVFUTRU8yddNhEDUrEsg8adrEMYcomfNgN6Vi7a0qoZg+9nn4beZEoniMAOkIWUE2b8kDxxghFSupEipXBYqi7jFNVxNfio4QuYYMdLR+uGYyxrKujoeIiiZqmgilkgTyIoHsAMkD57mRouo/VlXt8vj12699oDgB14LYDIjc0G36hvLE0U/g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) 0/100% no-repeat;
    width: 0.7rem;
    height: 0.7rem;
    animation: afterScale 1s infinite linear;
    position: absolute;
    top: 0.55rem;
    right: 0.2rem;
    z-index: 2;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

@-webkit-keyframes afterScale {
    0%,
    100% {
        top: 0.55rem;
        right: 0.1rem;
    }
    50% {
        top: 0.4rem;
        right: 0.1rem;
    }
}

@keyframes afterScale {
    0%,
    100% {
        top: 0.55rem;
        right: 0.1rem;
    }
    50% {
        top: 0.4rem;
        right: 0.1rem;
    }
}

@-webkit-keyframes beforeScale {
    0%,
    100% {
        transform: scale(1);
        opacity: 0;
    }
    25% {
        transform: scale(1.5);
        opacity: 1;
    }
    50% {
        transform: scale(2);
        opacity: 0.8;
    }
    75% {
        transform: scale(2);
        opacity: 0.1;
    }
}

@keyframes beforeScale {
    0%,
    100% {
        transform: scale(1);
        opacity: 0;
    }
    25% {
        transform: scale(1.5);
        opacity: 1;
    }
    50% {
        transform: scale(2);
        opacity: 0.8;
    }
    75% {
        transform: scale(2);
        opacity: 0.1;
    }
}

/*横屏 css*/
@media screen and (orientation: landscape) and (min-width: 500px) {
    #app {
        transform: translateZ(1px);
    }

    #drama_download_banner {
        display: none !important;
    }

    .logoIcon {
        display: inline-block !important;
        top: 0.24rem;
    }

    .contentBox {
        padding: 0.88rem 0 !important;
        flex-direction: row;
        justify-content: center;
    }

    .bagImg {
        top: 0;
    }

    .bookCoverWrap {
        flex: 0;
    }

    #drama_download_cover {
        padding: 0;
        min-width: 2.5rem;
        min-height: 4.4rem;
    }

    .bookCover {
        width: auto;
        height: 4.4rem !important;
    }

    .bookViews {
        right: 0.21rem;
        bottom: 0.19rem;
    }

    .bookInfo {
        margin-left: 0.8rem;
        padding-bottom: 0;
    }

    #drama_download_btn {
        margin-top: 0.32rem;
        position: relative;
        transform: translateX(0%);
        left: 0;
        bottom: 0;
        padding: 0;
        z-index: 99;
        width: 100%;
        height: 0.88rem;
    }
}

/* Extracted SVG into class based styling for optimal DOM */
.pauseIconOpt {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 1.12rem;
    height: 1.12rem;
    transform: translate(-50%, -50%);
    display: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 112 112' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-319, -577)'%3E%3Cg transform='translate(319, 577)'%3E%3Ccircle stroke-opacity='0.5' stroke='%23FFFFFF' stroke-width='3' fill-opacity='0.45' fill='%23000000' cx='56' cy='56' r='54.5'%3E%3C/circle%3E%3Cpath d='M68.5019,43.5500377 L83.8296348,66.6862413 C85.6597733,69.4487143 84.9039667,73.1717615 82.1414936,75.0019 C81.1589175,75.6528566 80.0063784,76 78.8277349,76 L48.1722651,76 C44.8585566,76 42.1722651,73.3137085 42.1722651,70 C42.1722651,68.8213565 42.5194085,67.6688174 43.1703652,66.6862413 L58.4981,43.5500377 C60.3282385,40.7875646 64.0512857,40.031758 66.8137587,41.8618964 C67.4838731,42.3058472 68.0579492,42.8799233 68.5019,43.5500377 Z' fill='%23FFFFFF' transform='translate(63.5, 56) rotate(-270) translate(-63.5, -56)'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
}