html,
body {
    margin: 0;
    padding: 0;
    position: relative;
    overflow-x: hidden;
    font-family: SourceHanSansCN-Regular;
}

a {
    color: unset;
}

input {
    outline: 0;
}

.container {
    width: 1170px;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

a {
    text-decoration: none;
}

.home-header>.row {
    justify-content: space-between;
    padding: 35px 0;
}

.search-from {
    width: 308px;
    height: 44px;
    border-radius: 22px;
    border: solid 1px #ff56923b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-repeat: no-repeat; */
    /* background-position: center right; */
    background-position-x: 95%;
    text-indent: 30px;
    /* background-image: url(../img/search-icon.png); */
}

.my-book {
    width: 140px;
    height: 44px;
    border-radius: 22px;
    border: solid 1px #ff56923b;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.head-message {
    margin: 0 20px;
}

.header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 892px;
}

.right-1 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.right-1>.row {
    align-items: center;
}

.menu-item span {
    font-size: 16px;
    color: #000000;
}

.menu-item {
    display: flex;
    align-items: center;
    position: relative;
}

.menus {
    width: 892px;
    justify-content: space-between;
    padding: 15px 0;
    display: flex;
    flex-wrap: wrap;
}

.menu-item img {
    margin-right: 10px;
}

.header-2>.row {
    justify-content: space-between;
}

.web-logo.web-logo-22 {
    width: 122px;
}

.web-logo.web-logo-22 img {
    width: 100%;
}

.menus.menus-22 {
    width: unset;
}

.menus.menus-22 {}

.menus.menus-22 .menu-item {
    margin: 0 15px;
}

form.search-form.search-form-22 {
    width: 212px;
    height: 44px;
}

form.search-form.search-form-22 {
    /* display: flex; */
    /* align-items: center; */
}

form.search-form.search-form-22 input.search-from {
    width: 100%;
}

.main-content {
    width: 892px;
}

.home-swiper {
    width: 892px;
    height: 302px;
    border-radius: 8px;
}

.swiper-navs {
    position: absolute;
    bottom: 0;
}

.swiper-navs {
    height: 44px;
    width: 100%;
    z-index: 99;
    display: flex;
    align-items: center;
}

.nav-item {
    flex-grow: 1;
    /* text-align: center; */
    background-color: #0000004d;
    height: 100%;
    /* line-height: 100%; */
    display: flex;
    align-items: center;
    cursor: pointer;
    color: white;
    font-size: 14px;
    position: relative;
}

.nav-item.active {
    background-color: #ff5692;
}

.nav-item span {
    display: inline-block;
    width: 100%;
    text-align: center;
    border-left: 1px solid;
    line-height: 23px;
}

.nav-item.active span,
.nav-item:nth-child(1) span,
.nav-item.active+.nav-item span {
    border-left: 0;
}

.search-from:focus {
    border-color: #ff5692;
    outline: 0;
}

.search-from:hover {
    border: solid 1px #ff5692;
}

.my-book:hover {
    border-color: #EFEFF5;
    cursor: pointer;
}

.block-4 {
    width: 250px;
    height: 262px;
    border-radius: 8px;
    background-image: url(../img/book-4-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px 18px;
}

.main.container {
    padding-top: 20px;
}

.main.container>.row {
    justify-content: space-between;
}

ul.block-4-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}

ul.block-4-list li {
    width: 50%;
    padding-bottom: 16px;
}

.block-4-title {
    display: flex;
    padding-bottom: 25px;
}

.block-4-title h3 {
    margin: 0;
    font-size: 16px;
}

.block-4-title {}

.block-4-title span {
    font-size: 16px;
    color: #b5b5bf;
    margin-left: 10px;
}

ul.block-4-list span.num {
    font-size: 16px;
    color: #b5b5bf;
    font-weight: bold;
    margin-right: 10px;
}

span.tag-name {
    background-color: rgb(0 0 0 / 0.03);
    border-radius: 15px;
    font-size: 13px;
    padding: 7px 18px;
    display: inline-block;
}

ul.block-4-list span.num.pink {
    color: #ff5692;
}

.s2-swiper {
    margin-top: 30px;
}

.s2-item-box {
    width: 130px;
}

.s2-img-box {
    width: 130px;
    height: 184px;
}

.s2-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

p.s2-title,
p.s2-author {
    margin: 0;
}

p.s2-author {}

p.s2-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: black;
    margin-top: 10px;
    margin-bottom: 5px;
}

p.s2-author {
    font-size: 12px;
    color: #8e8e93;
}

.block-5 {
    width: 236px;
    height: 220px;
    background-color: #f8fbff;
    border-radius: 8px;
    padding: 20px;
    margin-top: 30px;
}

.block-5>h3 {
    font-size: 16px;
    margin: 0;
}

.block5-item {
    font-size: 13px;
    padding: 10px 0px;
}

.block5-item p {
    margin: 0;
}

.block5-list {
    padding-top: 20px;
}

.s2-next,
.s2-prev {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background-color: #0000001c;
    position: absolute;
    top: 65px;
    z-index: 99;
    background-repeat: no-repeat;
    background-position-y: 25px;
    cursor: pointer;
}

.s2-next:focus,
.s2-prev:focus {
    outline: 0;
}

.s2-prev {
    left: -25px;
    background-image: url(../img/prev.png);
    background-position-x: 35px;
}

.s2-next {
    right: -25px;
    background-image: url(../img/next.png);
    background-position-x: 20px;
}

.title-111 {
    background-image: url(../img/jiantou.png);
    font-size: 22px;
    padding-right: 15px;
    background-position: center right;
    background-repeat: no-repeat;
    font-weight: bold;
    color: #000000;
}

.block-6 {
    padding-top: 40px;
}

.block-6-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 30px;
}

.block6-item {
    width: 276px;
    height: 184px;
    background-color: #ffffff;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    margin-bottom: 40px;
}

.block-6-list:after {
    width: 276px;
    display: block;
}

.block6-info {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.block6-info h4 {
    margin: 0;
    font-size: 16px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

p.block6-alt {
    font-size: 14px;
    color: #8e8e93;
    /*overflow: hidden;*/
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

span.block6-tag,
.purple-tag {
    font-size: 12px;
    color: #5a6dff;
    padding: 4px 7px;
    background-color: rgb(90 109 255 / 0.1);
    border-radius: 3px;
}

span.orderby-span:nth-last-child(1) {
    margin-right: 0;
}

.container.category-list-container>.row {
    justify-content: space-between;
}

.t-row span {
    margin-right: 10px;
}

p.block6-author {
    font-size: 13px;
    color: #8e8e93;
    margin: 0;
    margin-top: 30px;
}

.block-7 {
    padding-top: 20px;
}

.block-list-7 {
    /* padding-top: 20px; */
    width: 236px;
    height: 348px;
    background-color: #f8fbff;
    border-radius: 8px;
    padding: 30px 20px;
    margin-top: 25px;
}

span.block7-tag {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 22px;
    letter-spacing: 0px;
    color: #8e8e93;
}

span.block7-title {
    font-size: 14px;
    color: #000000;
}

.block7-item {
    margin-bottom: 15px;
}

.block8-title {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.block8-title img {
    margin-right: 10px;
}

.block8-warp {
    width: 280px;
}

.nol-title {
    display: flex;
    justify-content: space-between;
}

.block8-item {
    padding: 7px 0;
}

span.block8-num {
    font-size: 16px;
    font-family: Akrobat-Black;
    margin-right: 10px;
    font-weight: bold;
}

.block8-item:nth-child(1) span.block8-num,
.block8-item:nth-child(2) span.block8-num,
.block8-item:nth-child(3) span.block8-num {
    color: #ff5692;
}

.block-8-img {
    width: 138px;
    height: 184px;
    background-color: #d7d7d7;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.block-8-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.b8-img-num {
    width: 26px;
    height: 28px;
    background-image: url(../img/no1.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    position: absolute;
    top: 5px;
    left: 5px;
    color: white;
    text-align: center;
    line-height: 24px;
    font-weight: bold;
}

.hover-show-content {
    display: flex;
}

.hover-show-content p.block6-author {
    margin-top: 0;
}

p.timeout-str {
    font-size: 16px;
    color: #ff5692;
    margin: 0;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
}

span.read-count {
    font-size: 14px;
    color: #8e8e93;
}

.hover-show,
.block8-item:nth-child(1) .nol-title {
    display: none;
}

.block8-item:nth-child(1) .hover-show {
    display: block;
}

.block6-info.block-8-block6-info {
    width: 125px;
    padding-left: 15px;
}


/* .block8-list:hover .block8-item .nol-title {
    display: flex;
} */

.block8-list:hover .block8-item .hover-show {
    display: none;
}

.block8-list:hover .block8-item:hover .nol-title {
    display: none;
}

.block8-list:hover .block8-item:hover .hover-show {
    display: block;
}

.main.container.block-8 {
    padding-top: 50px;
}

.bs9-swiper {
    width: 276px;
    height: 500px;
    background-color: #fff8fa;
    border-radius: 4px;
    position: relative;
    margin: 0 !important;
}

.bs9-img {
    width: 130px;
    height: 184px;
    background-color: #d7d7d7;
    border-radius: 4px;
    overflow: hidden;
}

.bs9-swiper-slide-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.bs9-swiper .s2-next,
.bs9-swiper .s2-prev {
    top: 50%;
}

.bs9-swiper-title {
    margin: 0;
    font-size: 16px;
    padding-top: 15px;
}

span.tag-popule,
span.tag-pink {
    font-size: 12px;
    border-radius: 3px;
    display: inline-block;
    text-align: center;
    padding: 2px 5px;
    margin: 0 2px;
}

span.tag-popule {
    color: #5a6dff;
    background-color: #5a6dff1f;
}

span.tag-pink {
    color: #ff5692;
    background-color: #ff56911a;
}

.bs9-swiper-tags {
    padding-top: 10px;
}

.bs9-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bs9-s-author {
    display: flex;
    align-items: center;
    padding-top: 20px;
}

.bs9-s-author span {
    color: #ff5692;
    font-size: 14px;
    padding-left: 5px;
}

.bs9-s-alt {
    width: 210px;
    height: 34px;
    color: #8e8e93;
    font-size: 14px;
    margin-top: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.but-btn {
    width: 110px;
    height: 36px;
    background-image: linear-gradient(90deg, #ff5692 0%, #ff8e56 100%), linear-gradient(#ff5692, #ff5692);
    background-blend-mode: normal, normal;
    box-shadow: 0px 6px 12px 0px rgba(255, 86, 146, 0.3);
    border-radius: 18px;
}

.but-btn {
    width: 110px;
    height: 36px;
    background-image: linear-gradient(90deg, #ff5692 0%, #ff8e56 100%), linear-gradient(#ff5692, #ff5692);
    background-blend-mode: normal, normal;
    box-shadow: 0px 6px 12px 0px rgba(255, 86, 146, 0.3);
    border-radius: 18px;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    line-height: 36px;
    margin-top: 50px;
}

.b-b10 {
    margin-top: 40px;
}

.bs9-pagination .swiper-pagination-bullet {
    width: 30px;
    height: 3px;
    border-radius: 1px;
}

.bs9-pagination .swiper-pagination-bullet:focus {
    outline: 0;
}

.bs9-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #ff5692;
}

.bs9-title-row {
    width: 100%;
    display: flex;
    align-items: center;
    padding-bottom: 20px;
}

.bs9-title-row img {
    margin-right: 10px;
}

.bs9-title-row h3 {
    font-size: 22px;
}

.bs9 {
    width: 905px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.b9-2 {
    width: 560px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.block-9-2-item {
    width: 276px;
}

span.tag-11 {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 22px;
    letter-spacing: 0px;
    color: #8e8e93;
}

span.block-9-2-item-t {
    margin-left: 15px;
    font-size: 14px;
    font-weight: 500;
}

.block-10 {
    width: 276px;
}

h3.block-10-title {
    font-size: 22px;
}

.block-10-list-wrap {
    width: 236px;
    height: 460px;
    background-color: #f8fbff;
    border-radius: 8px;
    padding: 20px;
    margin-top: 40px;
}

.block-10-num {
    font-size: 14px;
    margin-right: 10px;
    font-weight: bold;
    width: 26px;
    height: 28px;
    text-align: center;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    text-align: center;
    line-height: 26px;
}

.block-10-item:nth-child(1) .block-10-num,
.block-10-item:nth-child(2) .block-10-num,
.block-10-item:nth-child(3) .block-10-num {
    color: #ff5692;
}

.block-10-item {
    padding: 6px 0;
    display: flex;
}

.hover10-show {
    display: flex;
    width: 190px;
}

.img-box10 {
    width: 69px;
    height: 92px;
}

.img-box10 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hover10-show {
    display: none;
}

.info-10 {
    display: flex;
    flex-direction: column;
    width: 80px;
    justify-content: space-between;
    padding-left: 10px;
}

span.info-10-t {
    font-size: 14px;
}

.info-10-author {
    color: #8e8e93;
    font-size: 12px;
}

span.info-10-read {
    color: #ff5692;
    font-size: 14px;
}

.block-10-item:nth-child(1) span.b10-t {
    display: none;
}

.block-10-item:nth-child(1) .hover10-show {
    display: flex;
}

.block-10-item:nth-child(1) span.block-10-num {
    background-image: url(../img/no1.png);
    color: white;
}

.block-10-list:hover .block-10-item:nth-child(1) span.b10-t {
    display: unset;
}

.block-10-list:hover .block-10-item:nth-child(1) span.block-10-num {
    background-image: unset;
}

.block-10-list:hover .block-10-item:nth-child(1) .hover10-show {
    display: none;
}

.block-10-list:hover .block-10-item:nth-child(1) span.block-10-num {
    color: #ff5692;
}

.block-10-item:hover span.block-10-num {
    color: white !important;
    background-image: url(../img/h-aa.png);
}

.block-10-list:hover .block-10-item:nth-child(1):hover span.block-10-num,
.block-10-item:nth-child(2):hover span.block-10-num,
.block-10-item:nth-child(3):hover span.block-10-num {
    background-image: url(../img/no1.png);
}

.block-10-list:hover .block-10-item:hover span.b10-t {
    display: none;
}

.block-10-list:hover .block-10-item:hover .hover10-show {
    display: flex;
}

.main.container.upload123 {
    margin-top: 40px;
    margin-bottom: 40px;
}

.block-11 {
    width: 892px;
}

.block-11-tiem {
    /* display: flex; */
    /* justify-content: space-between; */
}

span.book-titie-11 {}

span.book-titie-11 {
    font-size: 14px;
    margin-left: 20px;
    width: 230px;
    display: inline-block;
}

span.book-chart-11 {
    font-size: 14px;
    /* font-weight: normal; */
    /* font-stretch: normal; */
    /* line-height: 22px; */
    /* letter-spacing: 0px; */
    color: #000000;
    width: 350px;
    display: inline-block;
}

span.book-author-11 {
    font-size: 14px;
    /* font-weight: normal; */
    /* font-stretch: normal; */
    /* line-height: 22px; */
    /* letter-spacing: 0px; */
    color: #8e8e93;
    width: 120px;
    display: inline-block;
}

span.book-update-11 {
    color: #8e8e93;
    font-size: 14px;
    width: 78px;
    display: inline-block;
    text-align: right;
}

.block-11-tiem {
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.block-11-list {
    margin-top: 30px;
}

.title-row-11 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

span.update-text {
    color: #8e8e93;
    font-size: 14px;
}

.block-12 {
    width: 276px;
}

h3.block-12-title {
    margin: 0;
}

.author-item-12 {
    display: flex;
    padding: 15px 0;
    margin: 10px 0;
}

span.author-tag {
    border-radius: 3px;
    color: #5a6dff;
    font-size: 12px;
    border: solid 1px #5a6dff;
    display: inline-block;
    padding: 2px 5px;
}

span.author-name-12 {
    font-size: 14px;
}

.author-info12-1 {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.author-info {
    padding-left: 15px;
}

.author-list-12 {
    padding: 30px 20px;
    background-color: #f8fbff;
    border-radius: 8px;
    margin-top: 25px;
}

span.tag13 {
    color: #8e8e93;
    font-size: 14px;
}

.block-13 {
    width: 279px;
    height: 431px;
}

.block-13-item {
    padding: 11px 0;
}

.hover13-show {
    display: none;
}

.block-13-item:nth-child(1) .hover13-show {
    display: flex;
}

.block-13-item:nth-child(1) .noral-show {
    display: none;
}

.b13-img {
    width: 80px;
    height: 113px;
    background-color: #d7d7d7;
    border-radius: 4px;
}

.b13-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.b13-info h4 {
    font-size: 16px;
    margin: 0;
}

.b13-info {
    width: 170px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.b13-info p {
    color: #8e8e93;
    font-size: 14px;
    margin: 0;
}

.block-13-list {
    margin-top: 25px;
}

.noral-show {
    display: flex;
    justify-content: space-between;
}

.block-13-list:hover .hover13-show {
    display: none;
}

.block-13-item:hover .noral-show {
    display: none !important;
}

.block-13-item:hover .hover13-show {
    display: flex !important;
}

.main.container.home13 {
    margin-top: 50px;
}

.footer {
    width: 1200px;
    margin: auto;
}

.you-link {
    display: flex;
    justify-content: space-between;
    padding: 17px 0;
    border-top: 1px solid #f2f3f8;
    border-bottom: 1px solid #f2f3f8;
    font-size: 14px;
}

.you-link span {
    color: #8e8e93;
}

.you-link-list {
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    margin-left: 90px;
}

ul.footer-menus {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    font-size: 14px;
}

.footer-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
}

ul.footer-menus a {
    display: inline-block;
}

ul.footer-menus li {
    padding: 0 25px;
    border-left: 1px solid #00000038;
}

ul.footer-menus li:nth-last-child(1) {
    padding-right: 0;
}

ul.footer-menus li:nth-child(1) {
    border-left: 0;
}

.footer-3 p {
    margin: 0;
}

.footer-3 {
   /* display: flex;*/
    justify-content: space-between;
    padding: 15px 0;
    border-top: 1px solid #f2f3f8;
    font-size: 13px;
}

.category-row label {
    color: #8e8e93;
    font-size: 14px;
    /* padding-right: 20px; */
    padding-top: 8px;
    width: 60px;
}

.category-row {
    display: flex;
    padding: 10px 0;
    width: 100%;
}

span.tag-item {
    font-size: 14px;
    display: inline-block;
    padding: 7px 10px;
    margin: 0 9px;
    margin-bottom: 10px;
}

.cat-list {
    display: flex;
    flex-wrap: wrap;
    width: 1140px;
}

span.tag-item.active {
    background-image: linear-gradient(90deg, #ff5692 0%, #ffa200 100%), linear-gradient(#0078ff, #0078ff);
    background-blend-mode: normal, normal;
    border-radius: 4px 15px 15px 15px;
    color: white;
}

.container.cat-b2 {
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 1px solid #f2f3f8;
    border-bottom: 1px solid #f2f3f8;
}

.orderby-group {
    font-size: 14px;
}

span.orderby-span {
    margin-right: 20px;
}

span.orderby-span i.fa.fa-angle-down {
    color: #b5b5bf;
    margin-left: 2px;
}

span.orderby-span.active,
span.orderby-span.active i.fa.fa-angle-down {
    color: #ff5692;
}

.container.cat-b2>.row {
    justify-content: space-between;
}

.radio-group {
    display: flex;
}

.my-radio {
    margin-left: 20px;
    font-size: 14px;
    cursor: pointer;
}

.my-radio i.fa.fa-circle {
    color: #d8d8e2;
}

.my-radio i.fa.fa-check-circle {
    color: #ff5692;
}

.c-book-item {
    width: 400px;
}

.img-box123 {
    width: 131px;
    height: 184px;
    overflow: hidden;
    border-radius: 5px;
}

.c-book-item {
    width: 360px;
    margin: 30px 0;
    display: flex;
    height: 184px;
}

.c-book-info {
    width: 210px;
    display: flex;
    margin-left: 20px;
    flex-direction: column;
    justify-content: space-between;
}

.c-book-info h4 {
    margin: 0;
}

.container.category-list-container>.row:after {
    display: block;
    content: "";
    width: 360px;
}

.t-row {
    font-size: 12px;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    padding-top: 15px;
}

span.r-green {
    color: #18d275;
}

span.r-pink {
    color: #ff5692;
}

span.font-count-t {
    color: #8e8e93;
}

.book-info-1234 {
    font-size: 13px;
    color: #8e8e93;
    margin-top: 30px;
    position: relative;
}

.book-info-1234 span {
    margin-right: 15px;
}

.paging-row {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 60px;
    text-align: center;
}

span.paging-num,
.paging-prev,
.paging-next,
span.paging-jump {
    background-color: #f8f8f8;
    border-radius: 4px;
    display: inline-block;
    padding: 0 7px;
    margin: 0 5px;
    color: #8e8e93;
    min-width: 20px;
    height: 34px;
    line-height: 34px;
    cursor: pointer;
}

.paging-row {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 60px;
    text-align: center;
    color: #8e8e93;
    font-size: 16px;
}

input.page-input {
    width: 62px;
    height: 32px;
    background-color: #ffffff;
    border-radius: 4px;
    border: solid 1px #f2f3f8;
    outline: 0;
    text-align: center;
}

span.paging-num:hover,
.prev:hover,
.next:hover,
span.jump:hover {
    background-color: #ffe9f1;
    color: #ff5692;
}

span.paging-num.active {
    background-color: #ff5692;
    color: #ffffff;
}

.rotate-180 {
    transform: rotate(-180deg);
}

.container.ranking-tags>.row {
    justify-content: center;
}

span.ranking-tag {
    background-color: #f8f8f8;
    border-radius: 25px;
    display: inline-block;
    font-size: 18px;
    padding: 13px 25px;
    margin: 0 10px;
}

span.ranking-tag.active {
    background-color: #ff5692;
    color: white;
}

.container.ranking-tags {
    padding-top: 25px;
    padding-bottom: 60px;
}

.ranking-list-wrap {
    width: 360px;
    margin-bottom: 80px;
}

.ranking-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 25px;
}

.ranking-title-row h3 {
    font-size: 22px;
    margin: 0;
}

span.week-span {
    color: #ff5692;
    font-size: 14px;
    margin-right: 10px;
}

span.month-span {
    color: #8e8e93;
    font-size: 14px;
}

.ranking-list-w {
    height: 542px;
    background-color: #f8fbff;
    border-radius: 8px;
    padding: 15px;
}

.hover-show3,
.ranking-item:nth-child(1) .show3-title {
    display: none;
}

.ranking-item:nth-child(1) .hover-show3 {
    display: flex;
}

.container.rank-container>.row {
    justify-content: space-between;
}

.container.rank-container>.row:after {
    content: "";
    width: 360px;
    display: block;
}

.ranking-item {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    cursor: pointer;
}

span.rank-num {
    width: 26px;
    height: 28px;
    display: inline-block;
    text-align: center;
    margin-right: 20px;
}

.rank-img {
    width: 69px;
    height: 92px;
    overflow: hidden;
    border-radius: 3px;
}

.rank-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rank-info {
    margin-left: 15px;
    width: 190px;
}

.show3-title h4 {
    font-size: 16px;
    margin: 0;
}

.ranking-item {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    cursor: pointer;
}

span.rank-num {
    width: 26px;
    height: 28px;
    display: inline-block;
    text-align: center;
    margin-right: 20px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    font-weight: bold;
}

.rank-img {
    width: 69px;
    height: 92px;
    overflow: hidden;
    border-radius: 3px;
}

.rank-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rank-info {
    margin-left: 15px;
    width: 190px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.show3-title h4 {
    font-size: 16px;
    margin: 0;
}

.rank-info {}

.rank-info h4 {
    margin: 0;
    font-size: 16px;
}

span.hot-span {
    color: #ff5692;
    font-size: 14px;
    font-weight: bold;
}

span.author-span {
    color: #8e8e93;
    font-size: 13px;
}

.ranking-item:nth-child(1) span.rank-num.pink-num {
    background-image: url(../img/no1.png);
    color: white;
}

.ranking-list:hover .ranking-item .rank-num {
    color: black !important;
    background-image: unset !important;
}

.ranking-list:hover .ranking-item:hover span.rank-num {
    background-image: url(../img/h-aa.png) !important;
    color: white !important;
}

.ranking-list:hover .ranking-item:hover span.rank-num.pink-num {
    background-image: url(../img/no1.png) !important;
    color: white !important;
}

.ranking-list:hover .ranking-item .hover-show3,
.ranking-list:hover .ranking-item:hover .show3-title {
    display: none;
}

.ranking-list:hover .ranking-item .show3-title {
    display: block;
}

.ranking-list:hover .ranking-item:hover .hover-show3 {
    display: flex;
}

.menu-item.active span {
    color: #ff5692;
}

.menu-item.active:after {
    content: "";
    width: 20px;
    height: 5px;
    background-image: linear-gradient(90deg, #ff5692 0%, #ffa200 100%), linear-gradient(#ffffff, #ffffff);
    background-blend-mode: normal, normal;
    border-radius: 3px;
    position: absolute;
    width: 44%;
    left: calc(50% - 22%);
    bottom: -16px;
}

.header-2.container {
    padding-bottom: 15px;
}

.header-2.container {
    padding-bottom: 15px;
}

.rank-banner {
    margin-bottom: 30px;
    margin-top: 10px;
}

.rank-banner img {
    width: 100%;
}

.search-btn {
    position: absolute;
    background-image: url(../img/search-icon.png);
    border: 0;
    width: 24px;
    height: 27px;
    background-color: unset;
    background-position: center;
    background-repeat: no-repeat;
    right: 15px;
    top: 6px;
    cursor: pointer;
}

form.search-form {
    position: relative;
    margin: 0;
}

.search-key {
    width: 100%;
    font-size: 14px;
    color: #000000;
    padding-bottom: 60px;
}

.container.search-container {
    padding-top: 40px;
}

.res-img {
    width: 131px;
    height: 184px;
    overflow: hidden;
}

.res-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.res-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 184px;
    margin-bottom: 40px;
}

.read-btn {
    width: 110px;
    height: 36px;
    background-image: linear-gradient(90deg, #ff5692 0%, #ff8e56 100%), linear-gradient(#ff5692, #ff5692);
    background-blend-mode: normal, normal;
    box-shadow: 0px 6px 12px 0px rgba(255, 86, 146, 0.3);
    border-radius: 18px;
    text-align: center;
    line-height: 36px;
    font-size: 14px;
    color: white;
}

.res-info {
    display: flex;
    /* flex-grow: 1; */
    padding-left: 15px;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    width: 600px;
    padding-right: 20px;
}

.res-info h4 {
    margin: 0;
}

.t-row.t-row-2 {
    justify-content: flex-start;
}

.t-row.t-row-2 span {
    margin-right: 10px;
}

p.search-alt {
    font-size: 14px;
    color: #8e8e93;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.res-info-ro4 {
    color: #8e8e93;
    font-size: 13px;
    margin-top: 40px;
}

.res-info-ro4 span {
    margin-right: 5px;
}

span.chapter-span {
    color: #000000;
}

.main-content.search-res-list {
    margin-bottom: 100px;
}

.container.search-container>.row {
    justify-content: space-between;
}

.right-side.search-side {
    width: 276px;
}

.ss-img {
    width: 69px;
    height: 92px;
    overflow: hidden;
    border-radius: 3px;
}

.ss-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-side-item {
    display: flex;
    height: 92px;
    margin-bottom: 25px;
}

.ss-info {
    width: 146px;
    height: 100%;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

ss-info h4 {
    margin: 0;
    font-size: 14px;
}

.ss-info h4 {
    margin: 0;
    font-size: 14px;
}

span.author {
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 22px;
    letter-spacing: 0px;
    color: #8e8e93;
}

.ss-info p {
    margin: 0;
}

p.ss-alt {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    color: #8e8e93;
}

.right-side.search-side h3 {
    margin: 0;
    font-size: 18px;
}

.search-side-list {
    margin-top: 25px;
    padding: 20px;
    background-color: #f8fbff;
    border-radius: 8px;
}

button.search-btn {
    outline: unset !important;
}

.download-page {
    width: 100vw;
    height: 100vh;
    background-image: url(../img/download-bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.download-left {
    width: 40vw;
    margin-right: 8vw;
    margin-top: 2vw;
}

.download-left img {
    width: 100%;
}

img.download-title {
    width: 12.08vw;
}

img.icon-12 {
    width: 1.09vw;
    margin-left: 15px;
}

.download-group {
    display: flex;
    align-items: center;
}

.download-group h2 {
    font-size: 2.5vw;
}

.download-right {
    width: 24.84vw;
    position: relative;
    left: -4vw;
}

a.Android-a {
    width: 7.81vw;
    height: 2.6vw;
    background-color: #ff5692;
    border-radius: 1.3vw;
    font-size: 0.73vw;
    color: white;
    text-align: center;
    line-height: 2.6vw;
    margin-right: 2vw;
}

a.ios-a {
    width: 7.81vw;
    height: 2.6vw;
    background-color: #5a6dff;
    border-radius: 1.3vw;
    font-size: 0.73vw;
    color: white;
    line-height: 2.6vw;
    text-align: center;
}

.download-right p {
    font-size: 0.94vw;
    line-height: 1.8;
    margin-bottom: 4vw;
}

.book-1 {
    background-color: #fafafa;
    padding-bottom: 40px;
    padding-top: 40px;
}

.book-map-1 i {
    margin: 0 3px;
}

.book-map-1 {
    font-size: 14px;
    color: #8e8e93;
    letter-spacing: 1px;
    margin-bottom: 40px;
    width: 100%;
}

.cat-a-1,
.home-a {
    color: #000000;
}

.book-left {
    width: 883px;
    display: flex;
}

.book-right {
    width: 277px;
}

.book-img1 {
    width: 220px;
    height: 311px;
    background-color: #d7d7d7;
    border-radius: 4px;
    box-shadow: 2px 2px 5px 2px #d7d7d7;
    overflow: hidden;
    position: relative;
}

.book-img1::after {
    content: "";
    background-image: url(../img/book-xuxian.png);
    position: absolute;
    width: 36px;
    height: 311px;
    left: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.8;
}

.book-img1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.book-info {
    padding-left: 43px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.book-info-row span {
    border: solid 1px #efeff5;
    color: #8E8E93;
    font-size: 14px;
    padding: 3px 6px;
    border-radius: 4px;
    margin-right: 6px;
    display: inline-block;
}

.pink-span {
    background-color: #ff5692 !important;
    color: white !important;
}

.book-info h3 {
    margin: 0;
    font-size: 30px;
}

.book-info-row {
    padding-bottom: 15px;
    padding-top: 30px;
}

.book-info-row-2 label {
    font-size: 22px;
    font-weight: bold;
    margin-right: 20px;
}

.book-info-row-2 label span {
    font-size: 14px;
    color: #8e8e93;
    font-weight: 400;
    padding-left: 2px;
}

.chapter-update-row {
    display: flex;
    align-items: center;
    padding-top: 70px;
    padding-bottom: 10px;
}

.chapter-update-row p {
    font-size: 14px;
    margin: 0;
}

.chapter-update-row span {
    color: #8e8e93;
    margin-left: 10px;
}

.read-btn-1 {
    width: 150px;
    height: 50px;
    background-image: linear-gradient(90deg, #ff5692 0%, #ff8e56 100%), linear-gradient(#ff5692, #ff5692);
    background-blend-mode: normal, normal;
    box-shadow: 0px 6px 12px 0px rgba(255, 86, 146, 0.3);
    border-radius: 25px;
    display: inline-block;
    line-height: 50px;
    color: white;
    text-align: center;
    font-size: 16px;
}

.read-btn-1 img {
    margin-right: 6px;
    position: relative;
    top: 1px;
}

span.add-btn {
    width: 150px;
    height: 50px;
    border-radius: 25px;
    border: solid 1px #ff5692;
    display: inline-block;
    text-align: center;
    line-height: 50px;
    color: #ff5692;
    font-size: 16px;
    margin-left: 20px;
    cursor: pointer;
}

.b-row-last {
    display: flex;
}

span.add-btn img {
    margin-right: 6px;
    position: relative;
}

.book-right-1 {
    width: 276px;
    height: 315px;
    background-color: #ffffff;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.touxiang-img-wrap {
    width: 74px;
    height: 74px;
    position: relative;
}

.touxiang-img {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.touxiang-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.touxiang-img-wrap:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18px;
    height: 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../img/icon1111.png);
}

.tou-text {
    border-radius: 14px;
    font-size: 14px;
    border: solid 1px #5a6dff;
    color: #5a6dff;
    padding: 5px 10px;
}

.row-33 {
    display: flex;
    width: 90%;
    padding-top: 35px;
    justify-content: space-around;
}

.row-33-item {
    text-align: center;
    margin: 0 5px;
}

.row-33-item h3 {
    margin: 0;
    font-size: 20px;
}

.row-33-item span {
    color: #8e8e93;
    font-size: 12px;
}

.book-right-1 h5 {
    margin: 0;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.book-1>.container>.row {
    justify-content: space-between;
}

.tabs-menus {
    font-size: 22px;
    font-weight: bold;
    color: #b5b5bf;
    padding-bottom: 50px;
}

.tabs-menus span {
    cursor: pointer;
}

.tabs-menus span {
    position: relative;
    margin-right: 25px;
    display: inline-block;
}

.tab-container {
    width: 100%;
    padding-top: 40px;
}

.tabs-menus span.active {
    color: #000000;
}

.tabs-menus span.active:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 5px;
    background-image: linear-gradient(90deg, #ff5692 0%, #ffa200 100%), linear-gradient(#ffffff, #ffffff);
    background-blend-mode: normal, normal;
    border-radius: 3px;
    bottom: -20px;
    left: calc(50% - 10px);
}

.tab-content {
    display: none;
}

.show.tab-content {
    display: block;
}

.decription p {
    margin: 0;
}

.span-row1 {
    padding: 30px 0;
}

.span-row1 span {
    display: inline-block;
    padding: 3px 10px;
    margin-right: 10px;
    color: #8e8e93;
    font-size: 14px;
    background-color: #f8f8f8;
    border-radius: 3px;
    border: 1px solid #f8f8f8;
}

.span-row1 span.purple {
    background-color: #5a6dff1a;
    border: 1px solid #5a6dff1a;
    color: #5a6dff;
}

.r-i-1 {
    width: 276px;
    height: 122px;
    background-repeat: no-repeat;
    color: #ffffff;
    background-image: url(../img/qr-code-blue.png);
    font-size: 30px;
    line-height: 90px;
    text-indent: 50px;
}

.r-i-2 {
    width: 110px;
    height: 90px;
    background-color: rgb(90 109 255 / 0.1);
    border-radius: 8px;
    /* opacity: 0.1; */
    text-align: center;
    /* line-height: 90px; */
    /* margin-left: 20px; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: url(../img/puple-jiantou.png);
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 25px;
    cursor: pointer;
}

.route-item {
    display: flex;
    flex-wrap: wrap;
    /* margin-right: 55px; */
    width: 400px;
    justify-content: space-between;
}

.r-i-2 span {
    color: #5a6dff;
    padding-top: 30px;
    font-size: 16px;
}

.route-item h3 {
    width: 100%;
}

.route-row {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

.route-item.pink-route .r-i-2 {
    background-color: rgb(255 86 146 / 0.1);
}

.route-item.pink-route .r-i-1 {
    background-image: url(../img/qr-code-1.png);
}

.route-item.pink-route .r-i-2 span {
    color: #FF5692;
}

.route-item.pink-route .r-i-2 {
    background-image: url(../img/pink-jiantou.png);
}

.route-item .r-i-2:hover {
    background-image: url(../img/jaintou-white.png);
    background-color: #5A6DFF;
    color: white !important;
}

.route-item.pink-route .r-i-2:hover {
    background-color: #FF5692;
}

.route-item .r-i-2:hover span {
    color: white !important;
}

.route-item.pink-route {
    margin-right: 0;
}

.route-item h3 {
    font-size: 18px;
}

.container.book-container-2>.row {
    justify-content: space-between;
}

.tt3 {
    display: flex;
    animation-delay: c;
    padding-bottom: 10px;
}

.tt3 img {
    margin-right: 5px;
}

textarea.commtent-textarea {
    width: 843px;
    height: 114px;
    background-color: #ffffff;
    border-radius: 8px;
    border: solid 1px #f2f3f8;
    padding: 20px;
    font-size: 14px;
}

textarea.commtent-textarea::placeholder {
    color: #b5b5bf;
}

textarea.commtent-textarea:focus {
    outline: 0;
}

button.comments-submit {
    width: 110px;
    height: 36px;
    background-color: #ff5692;
    border-radius: 18px;
    outline: 0;
    border: 0;
    color: white;
    margin-top: 25px;
}

.comments-form {
    margin-top: 50px;
    margin-bottom: 40px;
    width: 100%;
}

.comment-item {
    display: flex;
    width: 100%;
    margin-top: 50px;
    justify-content: space-between;
}

.tou-xiang-1 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    /* flex-grow: 1; */
    margin-right: 20px;
}

.comment-content h5 {
    margin: 15px 0;
    color: #8e8e93;
    font-size: 14px;
    font-weight: 400;
}

.tou-xiang-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.like {
    width: 67px;
    color: #b5b5bf;
    text-align: right;
}

.comment-content p {
    font-size: 14px;
    padding-right: 40px;
    margin: 15px 0;
}

.reply-before {
    color: #8e8e93;
    font-size: 13px;
}

.reply-btn {
    font-size: 13px;
    margin-left: 10px;
    cursor: pointer;
}

.comment-content {
    flex: 1;
    padding-right: 30px;
}

.like i {
    font-size: 19px;
    /* margin-top: 1px; */
    position: relative;
    top: 2px;
    cursor: pointer;
}

.comment-item.comment-reply {
    width: calc(100% - 68px);
    padding-left: 68px;
    margin-top: 20px;
}

.like.is-like {
    color: #ff5692;
}

.purple-span-1,
.pink-span-1 {
    border-radius: 3px;
    font-size: 12px;
    color: white;
    margin-left: 15px;
    padding: 2px 6px;
}

.purple-span-1 {
    background-color: #5a6dff;
}

.pink-span-1 {
    background-color: #ff5692;
}

.more-comments {
    width: 660px;
    height: 38px;
    background-color: #fafafa;
    border-radius: 8px;
    color: #8e8e93;
    font-size: 12px;
    line-height: 38px;
    text-align: center;
    margin-left: 130px;
    margin-top: 30px;
    margin-bottom: 50px;
}

.swiper.bs9-swiper.book-bs9-swiper {
    height: 480px;
}

.swiper.bs9-swiper.book-bs9-swiper span.but-btn {
    margin-top: 25px;
}

.swiper-pagination.bs9-pagination {
    bottom: 20px;
}

.h3-111 {
    margin-top: 45px;
    font-size: 18px;
    margin-bottom: 30px;
}

.same-book-wrap {
    width: 276px;
    background-color: #f8fbff;
    border-radius: 8px;
}

.book-img2 {
    width: 68px;
    height: 92px;
    overflow: hidden;
}

.book-img2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.same-book-list {
    padding: 20px;
}

.same-book-item {
    padding: 10px 0;
    display: flex;
}

.book-info2 {
    width: 146px;
    display: flex;
    height: 100%;
    flex-direction: column;
    height: 92px;
    justify-content: space-between;
    padding-left: 15px;
}

.book-info2 p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #8e8e93;
    font-size: 12px;
    margin: 0;
}

.book-info2 h5 {
    margin: 0;
}

.book-info2 span {
    font-size: 12px;
    color: #8e8e93;
}

.same-book-block {
    margin-top: 60px;
}

h2.juan-title i {
    width: 4px;
    height: 4px;
    background: black;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    top: -5px;
}

h2.juan-title {
    font-size: 22px;
}

.list1 {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 30px;
}

.chapter-item {
    width: 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.chapter-item h4 {
    margin: 0;
    margin: 15px 0;
    font-size: 16px;
    font-weight: 400;
}

.container.book-container-2 {
    padding-bottom: 100px;
}

img.diamond {
    margin-left: 10px;
    position: relative;
    top: 3px;
}

.mas-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background: #00000033;
    z-index: 99;
    opacity: 0;
    transition: all 0.3s;
}

.mas-container {
    width: 490px;
    /* width: 590px; */
    height: 449px;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 50px;
}

.mas-wrap {
    display: none;
}

.mas-wrap.show {
    display: flex;
    opacity: 1;
}

.b-123-cc {
    height: 110px;
    background-color: #ffffff;
    box-shadow: 5px 4px 15px 2px rgb(156 156 156 / 41%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    display: flex;
    margin-top: 35px;
    justify-content: space-between;
    padding: 0 20px;
}

.b-123-row {
    display: flex;
    flex-direction: column;
    padding-left: 15px;
}

span.b-span1 {
    font-size: 24px;
    font-weight: bold;
}

span.b-span2 {
    color: #8e8e93;
    font-size: 14px;
}

.mas-container>h3 {
    font-size: 22px;
    margin: 0;
}

.mas-container>p {
    color: #8e8e93;
    font-size: 14px;
    padding: 5px 0;
    margin: 0;
}

.d-22-item {
    width: 150px;
    height: 50px;
    border-radius: 25px;
    border: solid 1px #f2f3f8;
    line-height: 50px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    margin: 10px 0;
    cursor: pointer;
}

.d-22-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;
}

.d-22-row:after {
    content: "";
    display: block;
    width: 150px;
}

span.d-22-item.selected {
    border: solid 1px #5a6dff;
    color: #5a6dff;
}

span.d-22-item.diy {
    color: #d8d8e2;
}

.last-row-22>p {
    font-size: 14px;
}

.last-row-22 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}

.route-btn {
    width: 110px;
    height: 36px;
    background-color: #5a6dff;
    border-radius: 18px;
    outline: 0;
    border: 0;
    color: white;
    cursor: pointer;
    font-size: 14px;
}

.b-123-cc1 {
    display: flex;
    align-items: center;
    height: 100%;
}

a.chongzhi-a {
    width: 90px;
    height: 36px;
    background-color: #ffffff;
    border-radius: 18px;
    border: solid 1px #18d275;
    line-height: 36px;
    text-align: center;
    color: #18d275;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashang-btn {
    background-color: #ff5692;
}

.login-mas-container {
    width: 900px;
    height: 480px;
    background-color: #ffffff;
    border-radius: 8px;
}

#no-login-btn {
    cursor: pointer;
}

.login-mas-container {
    width: 800px;
    height: 380px;
    background-color: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
}

.login-coloum {
    border-right: 1px solid #f2f3f8;
    width: 50%;
    height: 100%;
}

.login-coloum:nth-last-child(1) {
    border: 0;
}

.dsf-item {
    align-items: center;
    display: flex;
    width: 280px;
    height: 40px;
    border-radius: 8px;
    border: solid 1px #f2f3f8;
    padding: 15px;
    margin: 20px 0;
}

.dsf-item span {
    font-size: 14px;
    padding-left: 10px;
}

.login-coloum h4 {
    margin: 0;
    width: 100%;
    text-align: center;
}

h4.dsf-t {
    color: #8e8e93;
    font-size: 14px;
    width: 310px;
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

h4.dsf-t:before,
h4.dsf-t:after {
    content: "";
    width: 96px;
    height: 1px;
    background-color: #f2f3f8;
    display: block;
}

.login-c {
    width: 310px;
    margin: auto;
}

.login-title {
    font-size: 22px;
    margin-bottom: 35px;
    font-weight: bold;
}

.agree-row .fa-check-circle {
    color: #a5a5a5;
    cursor: pointer;
    font-size: 17px;
}

.agree-row i.fa.fa-check-circle.pink {
    color: #ff5692;
}

.code-span1,
.pwd-span1 {
    font-size: 14px;
}

button.login-btn {
    width: 310px;
    height: 50px;
    background-color: #ff5692;
    box-shadow: 0px 6px 12px 0px rgba(255, 86, 146, 0.3);
    border-radius: 25px;
    border: 0;
    outline: 0;
    color: white;
    font-size: 16px;
    margin-top: 25px;
    cursor: pointer;
}

.login-last-row {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
}

span.register-a {
    color: #ff5692;
    font-size: 14px;
    cursor: pointer;
}

.login-row input {
    border: 0;
    outline: 0;
}

.login-row {
    padding: 10px;
    border-bottom: 1px solid #f2f3f8;
    font-size: 14px;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

span.span-12 {
    font-size: 14px;
}

.agree-row {
    font-size: 14px;
    margin-bottom: 15px;
    margin-top: 40px;
}

.toggle-type {
    cursor: pointer;
}

.login-c.psd span.toggle-type.pwd-span1,
.login-c.psd .span-12.get-code,
.code-span1,
.forget-psd,
.login-c.psd .code-input,
.psd-input {
    display: none;
}

.login-c.psd .code-span1,
.login-c.psd .forget-psd,
.login-c.psd .psd-input {
    display: inline-block;
    cursor: pointer;
}

.register-mas-container {
    width: 800px;
    height: 350px;
    background-image: url(../img/bird.png);
    background-position-x: -30px;
    background-repeat: no-repeat;
}

h3.yqm-title {
    color: #434560;
    font-size: 14px;
    text-align: center;
    margin: 0;
}

.yqm-row {
    width: 310px;
    height: 50px;
    margin: auto;
    border-bottom: 1px solid #f2f3f8;
    line-height: 50px;
    margin-top: 40px;
}

.yqm-row input {
    width: 100%;
    border: 0;
    outline: 0;
    text-align: center;
}

.yqm-row input ::-webkit-input-placeholder {
    color: #b5b5bf;
    font-size: 14px;
}

.reg-c {
    width: 310px;
    margin: auto;
}

.eye-set {
    cursor: pointer;
    color: #d0d0d0;
    font-size: 18px;
}

.eye-set i.fa.fa-eye-slash,
.eye-set.yes i.fa.fa-eye {
    display: none;
}

.eye-set.yes i.fa.fa-eye-slash {
    display: inline-block;
}

.has-account-span {
    font-size: 14px;
    color: #ff5692;
    margin: auto;
    display: inline-block;
    cursor: pointer;
}

.get-code-pink {
    color: #ff5692;
    font-size: 14px;
    cursor: pointer;
}

h3.reg-title {
    margin: 0;
    margin-bottom: 20px;
    font-size: 22px;
}

.mas-container.reset-psd-container {
    width: 350px;
    height: 380px;
}

button.login-btn.register-btn.forget-btn1 {
    background-color: #d8d8e2;
    margin: auto;
    box-shadow: none;
    margin-top: 25px;
}

.yxql {
    color: #ff5692;
    font-size: 14px;
    margin-top: 10px;
    cursor: pointer;
    display: inline-block;
}

.tags-bg-123 {
    width: 100%;
}

.tags-bg-123 img {
    width: 100%;
}

.tags-list {
    width: 236px;
    height: 440px;
    background-color: #f8fbff;
    border-radius: 8px;
    padding: 20px;
}

span.num123 {
    color: #8e8e93;
    font-size: 16px;
    font-weight: bold;
    margin-right: 15px;
    width: 25px;
    display: inline-block;
}

.tag-item1 {
    margin: 20px 0;
    font-size: 14px;
    position: relative;
    padding-right: 20px;
}

.container.tags-container>.row {
    justify-content: space-between;
}

.tag-item1:after {
    content: "";
    width: 10px;
    height: 2px;
    background-color: #b5b5bf;
    display: block;
    position: absolute;
    right: 0;
    top: 10px;
}

.tag-item1.down:after {
    background-color: unset;
    background-image: url(../img/xia-icon.png);
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: auto;
    right: -6px;
}

.tag-item1.up:after {
    background-color: unset;
    background-image: url(../img/shang-icon.png);
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: auto;
    right: -6px;
}

.tags-coloum {
    margin-top: 40px;
}

.tags-coloum>h3 {
    margin-bottom: 30px;
}

.container.tags-container {
    margin-bottom: 100px;
}

.tags-des-wrap {
    background-color: #fafafa;
    padding-bottom: 40px;
    padding-top: 40px;
}

.tags-des-l {
    width: 800px;
    font-size: 14px;
}

.tags-des-r {
    width: 400px;
}

.tags-title-2 {
    font-size: 30px;
    font-weight: bold;
    padding-bottom: 20px;
}

.tags-title-2 span {
    color: #ff5692;
    font-size: 14px;
}

.tags-title-2 span {
    color: #ff5692;
    font-size: 14px;
    font-weight: 400;
    margin-left: 10px;
    position: relative;
    top: 3px;
}

.tags-i-row1 {
    display: flex;
    padding-top: 25px;
}

.tags-i-12 label {
    font-size: 22px;
    font-weight: bold;
    padding-right: 0px;
}

.tags-i-12 span {
    color: #8e8e93;
}

.tags-i-12 {
    margin-right: 20px;
}

.tags-i-row2 {
    display: flex;
    flex-wrap: wrap;
    color: #8e8e93;
    margin-top: 40px;
}

.tags-i-row2 label {
    width: 100%;
    margin-bottom: 20px;
}

.tags-i-row2 span {
    padding: 8px 15px;
    display: inline-block;
    background-color: #f0efef;
    border-radius: 15px;
    color: #8e8e93;
    margin-right: 20px;
}

.dingyue {
    cursor: pointer;
    background-image: linear-gradient(90deg, #ff5692 0%, #ff8e56 100%), linear-gradient(#ff5692, #ff5692);
    background-blend-mode: normal, normal;
    box-shadow: 0px 6px 12px 0px rgba(255, 86, 146, 0.3);
    border-radius: 18px;
    color: white;
    border: 0;
    font-size: 14px;
    padding: 10px 25px;
    outline: 0;
    margin-right: 30px;
    cursor: pointer;
}

.pingbi {
    font-size: 14px;
    padding: 10px 25px;
    border: 0;
    background-color: #434560;
    border-radius: 18px;
    color: white;
    outline: 0;
    cursor: pointer;
}

.tags-des-r {
    width: 400px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
}

.container.tags-row-tt h3 {
    margin: 0;
}

.container.tags-row-tt>.row {
    justify-content: space-between;
    align-items: flex-end;
}

.container.tags-row-tt {
    margin-top: 40px;
}

.author-wrap {
    background-color: #fafafa;
    padding-bottom: 40px;
    padding-top: 40px;
}

.author-wrap>.container>.row {
    align-items: center;
    justify-content: space-between;
}

.left-r-1 {
    width: 582px;
}

.author-row-11 h2 {
    margin: 0;
    font-size: 30px;
    font-weight: bold;
}

.author-row-11 {
    display: flex;
    align-items: flex-end;
}

span.a-r-span1 {
    height: 28px;
    background-color: #ff5692;
    border-radius: 14px;
    display: flex;
    font-size: 14px;
    color: white;
    line-height: 28px;
    padding: 0 15px;
    margin-left: 15px;
    align-items: center;
}

span.a-r-span2 {
    color: #5a6dff;
    width: 80px;
    height: 28px;
    border-radius: 14px;
    border: solid 1px #5a6dff;
    font-size: 14px;
    text-align: center;
    align-items: center;
    line-height: 28px;
    margin-left: 20px;
}

span.a-r-span1 img {
    margin-right: 5px;
}

.ddd-p {
    font-size: 14px;
    margin-top: 40px;
}

.c-book-item.c-book-item-1 {
    /* FONT-WEIGHT: 500; */
    width: 534px;
    height: 256px;
    background-color: #ffffff;
    box-shadow: 0px 20px 40px 0px rgba(67, 69, 96, 0.05);
    border-radius: 8px;
    flex-wrap: wrap;
    padding: 25px;
    align-items: flex-start;
}

.c-book-item.c-book-item-1 .c-book-info {
    height: 184px;
    /* width: 336px; */
    width: 370px;
}

.author-book-container>.row {
    justify-content: space-between;
}

.pink-btn-read {
    width: 110px;
    height: 36px;
    background-image: linear-gradient(90deg, #ff5692 0%, #ff8e56 100%), linear-gradient(#ff5692, #ff5692);
    background-blend-mode: normal, normal;
    box-shadow: 0px 6px 12px 0px rgba(255, 86, 146, 0.3);
    border-radius: 18px;
    border: 0;
    color: white;
    font-size: 14px;
    cursor: pointer;
}

.add-to-cart {
    width: 110px;
    height: 36px;
    background-color: #ffffff;
    border-radius: 18px;
    border: solid 1px #ff5692;
    font-size: 14px;
    color: #ff5692;
    margin-left: 10px;
}

.author-book-row33 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    align-items: flex-end;
}

.author-left-1 {
    width: 50%;
    display: flex;
    position: relative;
}

.author-img-11 {
    margin-left: -10px;
}

.author-img-11:nth-child(1) {
    margin: 0;
}

.author-r-11 {
    color: #8e8e93;
    font-size: 13px;
}

.author-book-row33 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    align-items: flex-end;
}

.author-left-1 {
    width: 50%;
    display: flex;
    position: relative;
}

.author-img-11 {
    width: 28px;
    margin-left: -10px;
    height: 28px;
    border: 2px solid white;
    border-radius: 50%;
}

.author-left-1 {}

.author-img-11:nth-child(1) {
    margin: 0;
}

.author-r-11 {
    color: #8e8e93;
    font-size: 13px;
}

.author-img-11 {}

.author-img-11 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.a-ttt {
    font-size: 22px;
}

.comments-container {
    background: white;
    margin: auto;
    width: 760px;
    padding: 40px 120px;
    margin: auto;
}

.comments-page {
    background-color: #f8f7f7;
    padding: 20px 0;
}

.c-item-2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.c-r-22 {
    text-align: center;
}

.c-r-22 i {
    font-size: 30px;
    margin-bottom: 5px;
    /* color: #d8d8e2; */
}

.c-r-22 {
    color: #d8d8e2;
}

.c-r-22 span {
    font-size: 14px;
}

.c-l-22 {
    width: 700px;
}

.author-22 {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
}

.author-img-22 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
}

.author-img-22 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-l-22 p {
    font-size: 14px;
}

.row-last-22 {
    font-size: 13px;
    padding-left: 60px;
}

.row-last-22 span:nth-child(1) {
    color: #8e8e93;
    margin-right: 10px;
}

.c-item-2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 0;
    border-bottom: 1px solid #f4f4f4;
}

.author-name-1 {
    color: #8e8e93;
    font-size: 14px;
    margin-left: 15px;
}

.c-item-2.c-item-2-black p {
    padding-left: 60px;
    padding-bottom: 0;
    margin: 0;
}

.c-item-2.c-item-2-black {
    border: 0;
}

.c-r-22.is-like {
    color: #ff5692;
}

.comment-c-233 {
    width: 1000px;
    height: 60px;
    background-color: #ffffff;
    box-shadow: 0px -8px 16px 0px rgba(67, 69, 96, 0.05);
    border-radius: 0px 0px 8px 8px;
    margin: auto;
    margin-top: 5px;
}

.comment-c-233 {
    width: 960px;
    /* height: 60px; */
    background-color: #ffffff;
    box-shadow: 0px -8px 16px 0px rgba(67, 69, 96, 0.05);
    border-radius: 0px 0px 8px 8px;
    /* margin-top: 20px; */
    margin: auto;
    margin-top: 5px;
    padding: 20px;
    display: flex;
    align-items: center;
}

.comment-c-233 textarea {
    width: 830px;
    /* height: 36px; */
    background-color: #ffffff;
    border-radius: 4px;
    border: solid 1px #f2f3f8;
}

.comment-c-233 button {
    width: 110px;
    height: 36px;
    background-color: #ff5692;
    border-radius: 18px;
    color: #ffffff;
    font-size: 14px;
    border: 0;
    outline: 0;
    margin-left: 9px;
    cursor: pointer;
}

.read-page {
    background-color: #f8f8f8;
    padding: 20px 0;
}

.read-container {
    border-radius: 4px;
    margin: auto;
    width: 1000px;
    /* padding: 10px; */
    /* background: white; */
    /* height: calc(38.23vw - 20px); */
    /* min-height: 610px; */
    /* display: flex; */
    /* justify-content: space-around; */
    /* align-items: center; */
    /* flex-direction: column; */
    transform: translate(0px, 0px);
}

.read-border-1 {
    border: 1px solid rgb(0 0 0 / 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 650px;
}

.read-fiex {
    position: fixed;
    width: 100%;
    left: 0;
    top: 20px;
    z-index: 1;
}

.read-fixed-content {
    width: 1000px;
    margin: auto;
    position: relative;
    height: 0;
}

.read-fixed {
    position: fixed;
    width: 100%;
    top: 20px;
}

.read-left-menus,
.read-right-menus {
    width: 60px;
    height: 263px;
    background-color: white;
    border-radius: 4px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.read-left-menus {
    left: -75px;
}

.read-right-menus {
    right: -75px;
    top: 410px;
}

.r-l-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60px;
    height: 60px;
    justify-content: center;
    border-bottom: 1px solid #eaeaea;
    cursor: pointer;
}

.r-l-item:nth-last-child(1) {
    border-bottom: 0;
}

.r-l-item span {
    font-size: 13px;
    color: #8e8e93;
    /* line-height: 30px; */
    margin-top: 5px;
}

h2.r-h2-t {
    font-size: 30px;
}

span.r-span22 {
    color: #8e8e93;
    font-size: 14px;
}

.read-row-info {
    display: flex;
}

.rri-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 45px;
    padding-top: 30px;
    padding-bottom: 20px;
}

.rri-1 label {
    font-size: 18px;
    font-weight: bold;
}

.rri-1 span {
    color: #8e8e93;
    font-size: 13px;
    margin-top: 5px;
}

p.r-p-1 {
    font-size: 12px;
    text-align: center;
    line-height: 24px;
    color: #8e8e93;
}

.read-c1 {
    padding: 10px;
    background: white;
}

.read-c2 {
    background: white;
    padding: 40px 0;
    margin-top: 20px;
}

.read-c2-container {
    /*  width: 763px;*/
    width: 903px;
    /* margin: 0; */
    margin: auto;
}

.read-c2-container>h2 {
    font-size: 22px;
    text-align: center;
}

.read-c2-container>h2 {}

.r-c-2-info {
    color: #8e8e93;
    font-size: 12px;
    text-align: center;
}

.r-c-2-info span {
    margin: 0 20px;
}

.read-content {
    padding: 0px;
    /* width: 752px; */
    /* font-size: 16px; */
    line-height: 2;
    border-top: 1px dashed #e3e5ea;
    margin-top: 40px;
    padding-top: 40px;
    font-size:17px;
}

.read-content p {
    text-indent: 0rem;
    padding:2px 0px 2px 0px;
    margin:1px
}

.read-span {
    background-image: url(../img/di-1.png);
    color: #8e8e93;
    font-size: 0.7rem;
    display: inline-block;
    text-indent: 0;
    background-repeat: no-repeat;
    width: 2rem;
    text-align: center;
    background-size: contain;
    line-height: rem;
    padding-bottom: 0.2rem;
    background-position: center;
    /* top: -0.08rem; */
    position: relative;
}

.read-pink {
    background-image: url(../img/rq.png);
    color: white;
    font-size: 0.7rem;
    display: inline-block;
    text-indent: 0;
    background-repeat: no-repeat;
    width: 2.8rem;
    /* text-align: center; */
    background-size: contain;
    line-height: rem;
    padding-bottom: 0.3rem;
    background-position: center;
    text-indent: 1rem;
    position: relative;
    top: -0.1rem;
}

.prev-next {
    display: flex;
    justify-content: space-between;
    padding-top: 50px;
}

.prev-next a {
    width: 370px;
    height: 60px;
    border-radius: 8px;
    border: solid 1px #e3e5ea;
    display: inline-block;
    text-align: center;
    line-height: 60px;
    color: #8e8e93;
    font-size: 16px;
}

.prev-next i {
    font-size: 14px;
    margin: 0 7px;
}

.r-t-d {
    display: flex;
    justify-content: space-between;
    padding-top: 70px;
}

.read-tj,
.read-ds {
    width: 370px;
    height: 100px;
    /* background-color: #5a6dff; */
    border-radius: 8px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    justify-content: space-between;
    cursor: pointer;
}

.read-tj {
    background-image: url(../img/read-tj.png);
}

.read-ds {
    background-image: url(../img/read-ds.png);
}

.left-33 {
    display: flex;
    flex-direction: column;
    padding-left: 30px;
}

.left-33 label {
    color: #ffffff;
    font-size: 30px;
}

.left-33 span {
    color: #ffffff;
    opacity: 0.7;
    font-size: 16px;
}

.left-33 i {
    color: white;
}

.read-tj i,
.read-ds i {
    color: white;
    margin-right: 30px;
    opacity: 0.5;
}

h2.zzs {
    text-align: unset;
    font-size: 22px;
    display: flex;
    align-items: center;
    margin-top: 40px;
}

h2.zzs img {
    width: 28px;
    height: 28px;
    margin-right: 10px;
}

.read-gallery img {
    float: left;
}

.read-gallery {
    column-count: 2;
    column-gap: 0;
    margin-top: 50px;
}

.read-gallery img {
    width: 365px;
    margin-bottom: 15px;
    border-radius: 8px;
}

.box-33 {
    width: 730px;
    height: 51px;
    margin: 25px 0;
    border-radius: 8px;
    border: solid 1px #f2f3f8;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inner-33 {
    width: 666px;
}

.dd-331 {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.dd-331 span {
    color: #8e8e93;
}

.dd-331 label {
    font-weight: 500;
}

.pes {
    width: 666px;
    height: 8px;
    background-color: #f2f3f8;
    border-radius: 4px;
    margin-top: 15px;
}

.pes-l {
    /* width: 270px; */
    height: 8px;
    background-image: linear-gradient(90deg, #fb2f78 0%, #ff679d 100%), linear-gradient(#ff5692, #ff5692);
    background-blend-mode: normal, normal;
    border-radius: 4px;
}

.want-check {
    width: 24px;
    height: 24px;
    background-color: #d8d8e2;
    opacity: 0.5;
    border-radius: 50%;
}

.want-check.checked {
    width: 24px;
    height: 24px;
    background-color: #ff5692;
    opacity: 1;
    background-image: url(../img/check-white.png);
    background-repeat: no-repeat;
    background-position: center;
}

.want-check input {
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.pes-group {
    padding-top: 10px;
}

h2.zzs i {
    font-size: 12px;
    margin-top: 7px;
}

textarea.read-comment-textarea {
    padding: 20px;
    border-radius: 8px;
    border: solid 1px #f2f3f8;
    width: 100%;
    outline: 0;
}

textarea.read-comment-textarea::-webkit-input-placeholder {
    color: #b5b5bf;
    font: 14px;
}

.read-comment-submit {
    width: 110px;
    height: 36px;
    background-color: #ff5692;
    border-radius: 18px;
    color: white;
    border: 0;
    outline: 0;
    cursor: pointer;
    margin-top: 20px;
}

.read-cats-container {
    width: 0;
    height: 0;
    background-color: #ffffff;
    box-shadow: 0px 10px 16px 0px rgba(67, 69, 96, 0.08);
    border-radius: 4px;
    transition: width 0.3s;
    position: absolute;
    z-index: 99;
    left: 0px;
    top: 0px;
    opacity: 0;
}

.read-cats-container.show {
    width: 720px;
    height: 734px;
    opacity: 1;
}

.r-l-item.active span {
    color: #ff5692;
}

.c-box-3 {
    position: relative;
    padding: 30px;
}

.close-icon {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 22px;
    height: 22px;
    background-color: #d8d8e2;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
}

.close-icon:before,
.close-icon:after {
    width: 2px;
    background-color: #ffffff;
    content: "";
    display: block;
    height: 60%;
    position: relative;
    transform: rotate(45deg);
    top: 20%;
    left: 46%;
}

.close-icon:after {
    transform: rotate(135deg);
    top: -40%;
    left: 47%;
}

.active-img,
.r-l-item.active .noral-img {
    display: none;
}

.r-l-item.active .active-img {
    display: block;
}

.read-dialong-title {
    font-size: 22px;
    margin: 0;
}

.chapter-item33 {
    border-top: 1px solid #f2f3f8;
    position: relative;
}

.c-c33 {
    margin-top: 20px;
    overflow-y: auto;
    height: 620px;
    overflow-x: hidden;
}

.chapter-item33 h3 {
    margin: 20px 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
}

.rr-44 {
    display: flex;
    flex-wrap: wrap;
}

ul.rr-44 {
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
    margin: 0;
    display: none;
    opacity: 0;
    transition: opacity 0.3s;
}

ul.rr-44 li {
    width: 50%;
    font-size: 14px;
    margin-bottom: 25px;
}

ul.rr-44 li.active a {
    color: #ff5692;
}

i.fa.fa-chevron-up.c-toggle {
    font-size: 14px;
    transition: transform 0.3s;
}

.chapter-item33.active i.fa.fa-chevron-up.c-toggle {
    transform: rotate(180deg);
}

.chapter-item33.active .rr-44 {
    opacity: 1;
    display: flex;
}

ul.rr-44 li .v-pink {
    margin-left: 10px;
    position: relative;
    top: 5px;
}

.read-set {
    width: 0;
    height: 0;
    background-color: #ffffff;
    box-shadow: 0px 10px 16px 0px rgba(67, 69, 96, 0.08);
    border-radius: 4px;
    border-radius: 4px;
    transition: width 0.3s;
    position: absolute;
    z-index: 99;
    left: 0px;
    opacity: 0;
    overflow: hidden;
}

.read-set.show {
    opacity: 1;
    width: 358px;
    height: 294px;
    padding: 30px;
}

.read-set-row {
    display: flex;
    padding: 15px 0;
    align-items: center;
}

ul.theme-select {
    display: flex;
    padding: 0;
    list-style: none;
    margin: 0;
}

ul.theme-select li {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #9E9E9E;
    margin-right: 10px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.read-set-row label {
    width: 84px;
    font-size: 14px;
}

li.active {}

ul.theme-select li.active {
    border: solid 2px #ff5692;
    width: 32px;
    height: 32px;
}

ul.theme-select li.active:after {
    content: "";
    width: 12px;
    height: 8px;
    display: block;
    position: absolute;
    background-image: url(../img/yes-1.png);
    left: 9px;
    top: 12px;
}

ul.font-select {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
}

ul.font-select li {
    padding: 0 16px;
    /* width: 62px; */
    height: 30px;
    background-color: #ffffff;
    border-radius: 4px;
    border: solid 1px #f2f3f8;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    margin-right: 20px;
    color: #b5b5bf;
    cursor: pointer;
}

.read-set-row {}

ul.font-select li.active {
    border: solid 1px #ff5692;
    color: #ff5692;
}

span.font-size-btn {
    width: 64px;
    height: 30px;
    background-color: #ffffff;
    border-radius: 4px;
    border: solid 1px #f2f3f8;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    color: #8e8e93;
    font-size: 14px;
    cursor: pointer;
}

.font-size-group span {
    margin-right: 20px;
}

button.default-theme-btn {
    width: 110px;
    height: 36px;
    background-color: #ff5692;
    border-radius: 18px;
    border: 0;
    outline: 0;
    color: white;
    margin-left: 123px;
    margin-top: 20px;
    cursor: pointer;
}

.Switch {
    /* cursor: pointer; */
    /* display: block; */
}

.Switch li {
    clear: both;
    line-height: 44px;
    border-bottom: 1px solid #CCC;
    list-style: none;
}

.Switch input {
    display: none
}

.Switch label {
    width: 44px;
    height: 24px;
    /* width: 52px; */
    /* background: #CCC; */
    /* height: 28px; */
    border-radius: 12px;
    float: right;
    /* margin: 8px 10px 0 0; */
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
    background-color: #d8d8e2;
    cursor: pointer;
}

.Switch label em {
    width: 20px;
    height: 20px;
    /* width: 26px; */
    /* height: 26px; */
    float: left;
    margin: 2px;
    border-radius: 50%;
    box-shadow: 2px 3px 8px rgba(0, 0, 0, .1);
    background: #FFF;
}

.Switch input:checked+label {
    background: #ff5692;
    cursor: pointer;
}

.Switch input:checked+label em {
    float: right;
}

.Switch input:disabled+label {
    opacity: 0.5
}

.vip-3-container {
    width: 760px;
    min-height: 500px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 10px 7px #eeeeee;
    margin: auto;
    padding-bottom: 40px;
}

.vip-3 {
    padding-top: 50px;
    border-top: 1px solid #f0f0f0;
    margin-top: 40px;
}

.tab-menus-2 {
    font-size: 22px;
    color: #b5b5bf;
    text-align: center;
    padding-top: 60px;
    font-weight: bold;
}

.tab-menus-2 label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #d8d8e2;
    border-radius: 50%;
    margin-right: 10px;
}

.tab-menus-2 label {
    margin: 0 20px;
    cursor: pointer;
}

.tab-menus-2 label.active:before {
    background-color: #ff5692;
    background-image: url(../img/check-white.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%
}

.tab-menus-2 label.active {
    color: #ff5692;
}

.vip-3-contents {
    width: 490px;
    margin: auto;
}

.v3-row-1 {
    display: flex;
    align-items: center;
    padding-top: 40px;
    justify-content: space-between;
}

button.bt-v3 {
    width: 110px;
    height: 36px;
    background-color: #ff5692;
    border-radius: 18px;
    border: 0;
    color: white;
    outline: 0;
}

.v3-left h3 {
    font-size: 22px;
    margin: 0;
    margin-bottom: 15px;
}

.v3-left p {
    font-size: 14px;
    margin: 0;
}

span.tuijian:after {
    content: "推荐";
    font-size: 12px;
    display: block;
    position: absolute;
    right: -54px;
    top: -17px;
    width: 56px;
    height: 43px;
    background-image: url(../img/ddd4.png);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: white;
    /* padding: 10px; */
    line-height: 33px;
    zoom: 0.8;
}

span.tuijian {
    position: relative;
}

.v3-row2 {
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.zddy {
    font-size: 14px;
}

button.v3-btn2 {
    width: 235px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 8px;
    border: solid 1px #e3e5ea;
    /* opacity: 0.5; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    outline: 0;
    padding: 0 15px;
    cursor: pointer;
}

button.v3-btn2 span {
    font-size: 14px;
    color: #ff5692;
    /* margin-right: 10px; */
}

button.v3-btn2 i {
    margin-left: 8px;
    color: #b5b5bf;
}

.vip-3-content {
    display: none;
}

.vip-3-content.show {
    display: block;
}

.mf-pink {
    width: 88px;
    height: 34px;
    /* background-color: #ffffff; */
    border-radius: 18px;
    border: solid 1px #ff5692;
    color: #ff5692;
    font-size: 14px;
    text-align: center;
    line-height: 34px;
}

button.purple-btn {
    width: 490px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 8px;
    border: solid 1px #e3e5ea87;
    /* opacity: 0.5; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-top: 35px;
    color: #b5b5bf;
    outline: 0;
    cursor: pointer;
}

button.purple-btn span {
    color: #5a6dff;
    font-size: 14px;
}

.v3-ddd2 {
    width: 100%;
    text-align: center;
}

a.pink-a {
    width: 150px;
    height: 50px;
    background-color: #ff5692;
    border-radius: 25px;
    color: white;
    display: inline-block;
    color: white;
    line-height: 50px;
    font-size: 14px;
    text-align: center;
}

a.purple-a {
    width: 150px;
    height: 50px;
    background-color: #5a6dff;
    border-radius: 25px;
    display: inline-block;
    color: white;
    line-height: 50px;
    font-size: 14px;
    text-align: center;
}

.download-row3 {
    display: flex;
    justify-content: space-around;
    margin-top: 100px;
}

.bird-bg {
    background-image: url(../img/bird-bg.png);
    background-position: center bottom;
    background-repeat: no-repeat;
}

.lock-title {
    padding-left: 30px;
    background-image: url(../img/icon-1111.png);
    background-position: left center;
    margin-bottom: 5px;
    background-repeat: no-repeat;
    margin-top: 50px;
}

.lock-container {
    width: 490px;
    margin: auto;
    padding-top: 50px;
}

span.b-span1.pink-2 {
    font-size: 18px;
}

.pink-2 {
    color: #ff5692;
}

.b-123-row.b-123-row-2 {
    margin-left: 20px;
}

.lock-container {}

.lock-container .b-123-cc {
    margin-top: 20px;
}

.b-123-row.b-123-row-3 .b-span1 {
    font-size: 18px;
    margin-bottom: 5px;
}

span.num-s2 {
    font-size: 30px;
    font-weight: bold;
    background-image: -webkit-linear-gradient(45deg, #5a6dff, #ff5692);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue6sinfinitelinear;
}

.b-123-row.b-123-row-3 {
    margin-left: 10px;
}

.b-123-cc.b-123-cc2 {
    margin-top: 50px;
}

.confirm-box {
    width: 340px;
    min-height: 160px;
    background-color: #ffffff;
    box-shadow: 0px 15px 30px 0px rgba(67, 69, 96, 0.05);
    border-radius: 8px;
    padding: 30px;
}

button.yes-btn1 {
    background-color: #ff5692;
    color: white;
    border: solid 1px #ff5692;
}

button.no-btn1 {
    background-color: #ffffff;
    border: solid 1px #f2f3f8;
    color: #b5b5bf;
}

.confirm-box button {
    border-radius: 18px;
    width: 110px;
    height: 36px;
    margin: 10px;
    font-size: 14px;
    cursor: pointer;
    outline: 0;
}

.confirm-box {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.empty-div {
    margin: auto;
    width: 290px;
    text-align: center;
    /* margin-top: 200px; */
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #8e8e93;
    margin-top: 150px;
}

.tips-column {
    position: fixed;
    width: 100%;
    height: 0;
    /* display: flex; */
    justify-content: center;
    width: 120px;
    left: calc(50% - 60px);
    /* top: 10px; */
}

.tip {
    width: 120px;
    height: 40px;
    background-color: #434560;
    box-shadow: 0px 15px 30px 0px rgba(67, 69, 96, 0.05);
    border-radius: 8px;
    opacity: 0.7;
    color: white;
    text-align: center;
    line-height: 40px;
    margin: 60px 0;
    font-size: 14px;
}

.tip.tip-success {
    background-color: #18d275;
}

.tip.tip-false {
    background-color: #ff5692;
}