a {
    display: inline-block;
    color: inherit;
    cursor: pointer
}

a:hover {
    text-decoration: none
}

a, img, div, span {
    outline: 0;
    border: 0
}

a:hover, img:hover, div:hover {
    outline: 0;
    border: 0
}

a:active, img:active, div:active {
    outline: 0;
    border: 0
}

em {
    font-style: normal
}

.anm {
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: "Microsoft YaHei,-apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif";
    font-size: 16px;
    color: #212529;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

a:focus, input:focus, p:focus, div:focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

input, button, select, textarea {
    outline: 0
}

::-moz-selection {
    background: #FF7E0C;
    color: white
}

::selection {
    background: #FF7E0C;
    color: white
}

::-moz-selection {
    background: #FF7E0C;
    color: white
}

::-webkit-selection {
    background: #FF7E0C;
    color: white
}

::-webkit-scrollbar: {
    display: none;
    width: 0;
    height: 0
}

.fl {
    float: left
}

.fr {
    float: right
}

.clear::after {
    display: block;
    content: "";
    clear: both
}

#mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999
}

.pop .abtn[name=close] i {
    margin-top: 1px
}

#main {
    width: 100%;
    height: 100%;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    background-color: #fff
}

#main .top, #main .bottom {
    position: absolute;
    width: 100%;
    left: 0;
    z-index: 1
}

#main .top {
    -webkit-box-shadow: 0 .5rem 2rem rgba(0, 0, 0, 0.5);
    box-shadow: 0 .5rem 2rem rgba(0, 0, 0, 0.5)
}

.bottom .l > a {
    padding: 5px
}

.bottom .l img {
    max-height: 30px
}
.top .icon {
    width: 1.5rem;
}
#main .abtn .iconfont {
    position: absolute;
    display: inline-block;
    width: 1.3rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    left: 0;
    top: 0.13rem;
    right: 0;
    bottom: 0;
    margin: auto;
}

#layers {
    position: absolute;
    width: 100%;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

#layers .lay {
    width: inherit;
    height: 0;
    position: relative;
    -webkit-perspective: 800px;
    perspective: 800px
}

#layers .lay::before {
    content: "";
    position: absolute;
    width: calc(100% - 50px);
    bottom: 0;
    height: 12px;
    -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 1);
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

#layers .lay > div {
    position: absolute;
    width: 100%;
    left: 50%;
    bottom: 0;
    height: 6px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

#layers .lay::after {
    content: "";
    position: absolute;
    width: 100%;
    left: 50%;
    bottom: 6px;
    height: 50px;
    -webkit-transform: rotateX(76deg) translateX(-50%);
    transform: rotateX(76deg) translateX(-50%);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom
}

#main[name=skin-1] {
    background: url("../images/bg.jpg");
}

#main[name=skin-1] .top {
    background: url("../images/top-nav.jpg")
}

#main[name=skin-1] .top .m {
    color: #6f4d17;
    padding-left: 0.5rem;
    text-shadow: 1px 1px 0 #F5BC9F
}

#main[name=skin-1] .bottom {
    background: url("../images/bottom-nav.jpg")
}

#main[name=skin-1] .booksbox {
    height: 100%
}

#main[name=skin-1].bookSort .booksbox {
    background: 0
}

#main[name=skin-1] .abtn {
    -webkit-box-shadow: 0 1px 1px #E2BBA8 inset;
    box-shadow: 0 1px 1px #E2BBA8 inset;
    border: 1px solid #AF7662;
    background-color: #D29981;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#CB8967), color-stop(50%, #DEA47E), to(#E8AF89));
    background-image: -o-linear-gradient(bottom, #CB8967 0, #DEA47E 50%, #E8AF89 100%);
    background-image: linear-gradient(to top, #CB8967 0, #DEA47E 50%, #E8AF89 100%);
    text-shadow: 0 1px #D6B0A0;
    color: #43310F
}

#main[name=skin-1] .abtn:hover {
    background-color: #D29981;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#D6906C), color-stop(50%, #E5AA81), to(#F2B48B));
    background-image: -o-linear-gradient(bottom, #D6906C 0, #E5AA81 50%, #F2B48B 100%);
    background-image: linear-gradient(to top, #D6906C 0, #E5AA81 50%, #F2B48B 100%)
}

#main[name=skin-1] .abtn:active {
    background-color: #D29981;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#CB8967), color-stop(50%, #DEA47E), to(#D6906C));
    background-image: -o-linear-gradient(bottom, #CB8967 0, #DEA47E 50%, #D6906C 100%);
    background-image: linear-gradient(to top, #CB8967 0, #DEA47E 50%, #D6906C 100%)
}

#main[name=skin-1] .abox a {
    -webkit-box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.25);
    box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.25)
}

#main[name=skin-1] .abox > .showname {
    pointer-events: none
}

#main[name=skin-1] .bottom .m > div {
    background-color: #43310F;
    color: #F3BB9B;
    -webkit-box-shadow: 2px 2px 2px #191919 inset;
    box-shadow: 2px 2px 2px #191919 inset;
    text-shadow: 0 1px #191919
}

#main[name=skin-1] .bottom .l > a > i {
    position: static;
    color: #6f4d17;
    text-shadow: 1px 1px #D6B0A0
}

#main[name=skin-1].bookSort .sortinfo {
    color: #43310F;
    text-shadow: 1px 1px 0 #f3bb9b
}

#main[name=skin-1] .sortBox .input-form {
    background: #43310F;
    border-color: #f3bb9b;
    color: #f3bb9b;
    -webkit-box-shadow: inset 1px 2px 3px #1A1A1A, 0 1px 3px #f3bb9b;
    box-shadow: inset 1px 2px 3px #1A1A1A, 0 1px 3px #f3bb9b
}

#main[name=skin-1] .select-options {
    border: 1px solid #f3bb9b;
    -webkit-box-shadow: inset 1px 2px 3px #1A1A1A, 0 1px 3px #f3bb9b;
    box-shadow: inset 1px 2px 3px #1A1A1A, 0 1px 3px #f3bb9b
}

#main[name=skin-1] .select-options > .options > div {
    background: #43310F;
    color: #f3bb9b
}

#main[name=skin-1] .select-options > .options > div:hover {
    background: #341A1A;
    color: #F5A476
}

#main[name=skin-1] #layers .lay > div {
    background: url("../images/top-nav.jpg?v=3.0") #E1AC84;
    border-top: 1px solid #F2B790
}

#main[name=skin-1] #layers .lay::after {
    background: url("../images/layer.jpg?v=3.0") #9D6958;
    border-top: 4px solid #8B5D4D;
    border-left: 2px solid #8B5D4D;
    border-right: 2px solid #8B5D4D
}

#main[name=skin-2] {
    background: url("../images/bg.jpg?v=3.0")
}

#main[name=skin-2] .top {
    background: url("../images/top-nav.jpg?v=3.0")
}

#main[name=skin-2] .top .m {
    color: #E3EFEF
}

#main[name=skin-2] .bottom {
    background: url("../images/bottom-nav.jpg?v=3.0")
}

#main[name=skin-2] .booksbox {
    height: 100%
}

#main[name=skin-2].bookSort .booksbox {
    background: 0
}

#main[name=skin-2] .abtn {
    -webkit-box-shadow: 0 1px 1px #F4F4F4 inset;
    box-shadow: 0 1px 1px #F4F4F4 inset;
    border: 1px solid #878787;
    background-color: #DBDBDB;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#C9C9C9), color-stop(50%, #DBDBDB), to(#E5E5E5));
    background-image: -o-linear-gradient(bottom, #C9C9C9 0, #DBDBDB 50%, #E5E5E5 100%);
    background-image: linear-gradient(to top, #C9C9C9 0, #DBDBDB 50%, #E5E5E5 100%);
    text-shadow: 0 1px #E9E9E9;
    color: #5B5B5B
}

#main[name=skin-2] .abtn:hover {
    background-color: #E5E5E5;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#D5D5D5), color-stop(50%, #E5E5E5), to(#F1F1F1));
    background-image: -o-linear-gradient(bottom, #D5D5D5 0, #E5E5E5 50%, #F1F1F1 100%);
    background-image: linear-gradient(to top, #D5D5D5 0, #E5E5E5 50%, #F1F1F1 100%)
}

#main[name=skin-2] .abtn:active {
    background-color: #E5E5E5;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#F1F1F1), color-stop(50%, #E5E5E5), to(#D5D5D5));
    background-image: -o-linear-gradient(bottom, #F1F1F1 0, #E5E5E5 50%, #D5D5D5 100%);
    background-image: linear-gradient(to top, #F1F1F1 0, #E5E5E5 50%, #D5D5D5 100%)
}

#main[name=skin-2] .abox a {
    -webkit-box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.25);
    box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.25)
}

#main[name=skin-2] .bottom .m > div {
    background-color: #EFEFEF;
    color: #191919;
    -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3) inset;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3) inset
}

#main[name=skin-2] .bottom .l > a > i {
    position: static;
    color: #E3EFEF
}

#main[name=skin-2].bookSort .sortinfo {
    color: #2F2F2F
}

#main[name=skin-2] .sortBox .input-form {
    background: #2F2F2F;
    border-color: #f3bb9b;
    color: #D4D4D4;
    -webkit-box-shadow: inset 1px 2px 3px #1A1A1A, 0 1px 3px #D4D4D4;
    box-shadow: inset 1px 2px 3px #1A1A1A, 0 1px 3px #D4D4D4
}

#main[name=skin-2] .select-options {
    border: 1px solid #D4D4D4;
    -webkit-box-shadow: inset 1px 2px 3px #1A1A1A, 0 1px 3px #D4D4D4;
    box-shadow: inset 1px 2px 3px #1A1A1A, 0 1px 3px #D4D4D4
}

#main[name=skin-2] .select-options > .options > div {
    background: #2F2F2F;
    color: #D4D4D4
}

#main[name=skin-2] .select-options > .options > div:hover {
    background: #341A1A;
    color: #D4D4D4
}

#main[name=skin-2] #layers .lay > div {
    background: url("../images/skin-2/bg.jpg?v=3.0") #F9F9F9;
    border-top: 1px solid #FAFAFA
}

#main[name=skin-2] #layers .lay::after {
    background: url("../images/layer.jpg?v=3.0") #E1E1E1;
    border-top: 4px solid #D8D8D8;
    border-left: 2px solid #D8D8D8;
    border-right: 2px solid #D8D8D8
}

#main[name=skin-3] .top {
    background: #fff;
    -webkit-box-shadow: none;
    box-shadow: none
}

#main[name=skin-3] .top .m {
    color: #191919
}

#main[name=skin-3] .bottom {
    background: #fff
}

#main[name=skin-3] .booksbox {
    background: #F8F8F8;
    height: 100%
}

#main[name=skin-3].bookSort .booksbox {
    background: 0
}

#main[name=skin-3].bookSort #gdbox {
    background: #F1F1F1
}

#main[name=skin-3] .abtn {
    color: #191919
}

#main[name=skin-3] .abtn:hover {
    color: #393939
}

#main[name=skin-3] .abtn:active {
    color: #191919
}

#main[name=skin-3] .abox a .thickness {
    display: none
}

#main[name=skin-3] .abox a {
    bottom: 1px;
    -webkit-transition: bottom .2s;
    -o-transition: bottom .2s;
    transition: bottom .2s
}

#main[name=skin-3] .abox a:hover {
    bottom: 5px
}

#main[name=skin-3] .bottom .m > div {
    background-color: #F5F5F5;
    color: #191919
}

#main[name=skin-3] .bottom .l > a > i {
    position: static;
    color: #191919
}

#main[name=skin-3].bookSort .sortinfo {
    color: #191919
}

#main[name=skin-3].bookSort .top {
    -webkit-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.05);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.05)
}

#main[name=skin-3].bookSort .bottom {
    -webkit-box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.05);
    box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.05)
}

#main[name=skin-3] .sortBox .input-form {
    background: #F1F1F1;
    border-color: #f3bb9b;
    color: #191919
}

#main[name=skin-3] .select-options {
    border: 1px solid #FCFCFC
}

#main[name=skin-3] .select-options > .options > div {
    background: #191919;
    color: #FCFCFC
}

#main[name=skin-3] .select-options > .options > div:hover {
    background: #FCFCFC;
    color: #191919
}

#main[name=skin-3] .abox > .showname {
    bottom: 0
}

#main[name=skin-3] #layers {
    width: 100% !important
}

#main[name=skin-3] #layers .lay > div {
    display: none
}

#main[name=skin-3] #layers .lay::after {
    display: none
}

#main[name=skin-3] #layers .lay::before {
    display: none
}

#main[name=skin-3] #layers .lay {
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.03)), color-stop(rgba(0, 0, 0, 0.01)), to(rgba(0, 0, 0, 0)));
    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0))
}

#main[name=skin-4] .top {
    background: rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: none;
    box-shadow: none
}

#main[name=skin-4] .top .m {
    color: #fff
}

#main[name=skin-4] .bottom {
    background: rgba(0, 0, 0, 0.7)
}

#main[name=skin-4] {
    background-size: cover cover;
    background-color: #99ffc7;
    background-image: -o-radial-gradient(at 15% 88%, hsla(66, 63%, 61%, 1) 0, transparent 50%), -o-radial-gradient(at 65% 81%, hsla(295, 74%, 73%, 1) 0, transparent 50%), -o-radial-gradient(at 73% 84%, hsla(110, 64%, 77%, 1) 0, transparent 50%), -o-radial-gradient(at 40% 8%, hsla(214, 79%, 66%, 1) 0, transparent 50%), -o-radial-gradient(at 27% 36%, hsla(98, 70%, 62%, 1) 0, transparent 50%), -o-radial-gradient(at 78% 71%, hsla(278, 93%, 61%, 1) 0, transparent 50%), -o-radial-gradient(at 59% 77%, hsla(121, 68%, 70%, 1) 0, transparent 50%);
    background-image: radial-gradient(at 15% 88%, hsla(66, 63%, 61%, 1) 0, transparent 50%), radial-gradient(at 65% 81%, hsla(295, 74%, 73%, 1) 0, transparent 50%), radial-gradient(at 73% 84%, hsla(110, 64%, 77%, 1) 0, transparent 50%), radial-gradient(at 40% 8%, hsla(214, 79%, 66%, 1) 0, transparent 50%), radial-gradient(at 27% 36%, hsla(98, 70%, 62%, 1) 0, transparent 50%), radial-gradient(at 78% 71%, hsla(278, 93%, 61%, 1) 0, transparent 50%), radial-gradient(at 59% 77%, hsla(121, 68%, 70%, 1) 0, transparent 50%)
}

#main[name=skin-4] .abtn {
    color: #fff
}

#main[name=skin-4] .abtn:hover {
    color: #E3E3E3
}

#main[name=skin-4] .abtn:active {
    color: #E5E5E5
}

#main[name=skin-4] .abox a .thickness {
    display: none
}

#main[name=skin-4] .abox a {
    bottom: 1px;
    -webkit-transition: bottom .2s;
    -o-transition: bottom .2s;
    transition: bottom .2s
}

#main[name=skin-4] .abox a:hover {
    bottom: 5px
}

#main[name=skin-4] .bottom .m > div {
    background-color: #F5F5F5;
    color: #191919
}

#main[name=skin-4] .bottom .l > a > i {
    position: static;
    color: #fff
}

#main[name=skin-4].bookSort .sortinfo {
    color: #191919
}

#main[name=skin-4].bookSort .top {
    -webkit-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.05);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.05)
}

#main[name=skin-4].bookSort .bottom {
    -webkit-box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.05);
    box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.05)
}

#main[name=skin-4] .sortBox .input-form {
    background: #F1F1F1;
    border-color: #f3bb9b;
    color: #191919
}

#main[name=skin-4] .select-options {
    border: 1px solid #FCFCFC
}

#main[name=skin-4] .select-options > .options > div {
    background: #191919;
    color: #FCFCFC
}

#main[name=skin-4] .select-options > .options > div:hover {
    background: #FCFCFC;
    color: #191919
}

#main[name=skin-4] .abox > .showname {
    bottom: 0
}

#main[name=skin-4] #layers {
    width: 100% !important
}

#main[name=skin-4] #layers .lay > div {
    display: none
}

#main[name=skin-4] #layers .lay::after {
    display: none
}

#main[name=skin-4] #layers .lay::before {
    display: none
}

#main[name=skin-4] #layers .lay {
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.1)), color-stop(rgba(0, 0, 0, 0.01)), to(rgba(0, 0, 0, 0)));
    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0))
}

#main .top {
    height: 60px;
    top: 0
}

#main .bottom {
    height: 42px;
    bottom: 0
}

#main table .l {
    padding-left: 10px
}

#main table .r {
    padding-right: 10px
}

#main .bottom td {
    width: 33%
}

#main .top .m {
    font-size: 1.2em;
    font-weight: bold
}
.jfds {
    height: 4rem;
    font-size: 1.1rem;
    padding-top: 2rem;
    color: #ffffff;
    width: 96vw;
    margin: 0 auto;
    text-align: center;
    text-shadow: 2px 2px 2px #4a4a4a;
}
#main .abtn {
    display: inline-block;
    border-radius: 20px;
    line-height: normal;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 3px
}

#main .abtn > span {
    width: 3rem;
    height: 100%;
    position: relative;
    display: inline-block;
    float: left
}

#main .abtn > b {
    line-height: 32px
}

#main a[name=more], #main a[name=backSort], #main a[name=share], #main a[name=skin] {
    width: 3rem;
    height: 30px;
    text-align: center
}

#main a[name=name], #main a[name=date] {
    padding: 0 10px;
    height: 34px;
    text-align: center;
    font-size: 13px
}

#main a[name=name] > span, #main [name=date] > span {
    width: 26px
}

#main a[name=share] {
    margin-left: 20px
}

#main a[name=name] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0
}

#main a[name=date] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

#main .bottom .m > div {
    height: 28px;
    line-height: 28px;
    border-radius: 30px;
    display: inline-block;
    padding: 0 25px;
    font-size: 70%
}

#main .bottom .m > div > em {
    margin: 0 4px
}

#gdbox {
    position: absolute;
    top: 60px;
    width: 100%;
    height: calc(100% - 60px - 42px);
    overflow: hidden;
    overflow-y: auto;
}

#map {
    margin: 0 auto
}

#map > .box {
    float: left;
    position: relative
}

#map .abox {
    width: 100%;
    position: absolute;
    bottom: 0
}

#map .abox a {
    display: inline-block;
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

#map .abox img {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4) url() no-repeat center center
}

#main.bookSort .abox a {
    -webkit-box-shadow: none;
    box-shadow: none;
    text-align: center
}

.loading {
    -webkit-transform: translate3d(0, 600%, 0);
    transform: translate3d(0, 600%, 0)
}

.bookSort #map .abox img {
    background: 0;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.bookSort #map > .box {
    height: 180px
}

.sortinfo {
    text-align: center;
    position: absolute;
    width: 100%;
    left: 0;
    top: 48%;
    padding: 0 30px 0 17px
}

.sortinfo > .sortname {
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    word-break: break-all;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden
}

.sortinfo > .sortnum {
    font-size: 12px;
    background-color: rgba(150, 86, 86, 0.25);
    border-radius: 10px;
    display: inline;
    padding: 0 6px
}

.openSort.custom .sortinfo {
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.openSort.custom .sortinfo > .sortname {
    position: absolute;
    bottom: 0;
    font-size: 10px;
    width: 100%;
    padding: 3px;
    font-weight: 400;
    border-radius: 3px
}

.openSort.custom .sortinfo > .sortnum {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, -150%);
    -ms-transform: translate(-50%, -150%);
    transform: translate(-50%, -150%)
}

#main[name=skin-1] .openSort.custom .sortinfo > .sortname {
    background-color: #43310F;
    color: #F3BB9B;
    text-shadow: 0 1px #191919
}

#main[name=skin-2] .openSort.custom .sortinfo > .sortname {
    background-color: #2F2F2F;
    color: #fff
}

#main[name=skin-3] .openSort.custom .sortinfo > .sortname {
    background-color: #191919;
    color: #fff
}

#main[name=skin-4] .openSort.custom .sortinfo > .sortname {
    background: rgba(0, 0, 0, 0.7);
    color: #fff
}

#main[name=skin-1] .openSort.custom .sortinfo > .sortnum {
    background-color: #6F4D17;
    color: #F3BB9B;
    -webkit-box-shadow: 1px 1px 1px #43310F inset;
    box-shadow: 1px 1px 1px #43310F inset;
    text-shadow: 0 1px #191919
}

#main[name=skin-2] .openSort.custom .sortinfo > .sortnum {
    background-color: #E3E3E3;
    color: #191919;
    -webkit-box-shadow: 1px 1px 1px #D5D5D5 inset;
    box-shadow: 1px 1px 1px #D5D5D5 inset
}

#main[name=skin-3] .openSort.custom .sortinfo > .sortnum {
    background-color: #E3E3E3;
    color: #191919;
    border: 1px solid #D1D1D1
}

#main[name=skin-4] .openSort.custom .sortinfo > .sortnum {
    background-color: rgba(0, 0, 0, 0.05);
    color: #191919;
    border: 1px solid #D1D1D1
}

.booksbox.sort2 {
    padding-top: 56px;
    background-position: 0 56px !important
}

.sortBox {
    position: absolute;
    width: 100%;
    top: 20px;
    left: 0;
    display: none
}

.booksbox.sort2 .sortBox {
    display: block
}

.sortBox .select-arrow {
    position: absolute;
    top: 50%;
    right: 14px;
    margin-top: -8px
}

.sortBox .selectBookSort {
    width: 224px;
    height: 26px;
    margin: 0 auto;
    position: relative;
    padding-left: 15px
}

.sortBox .input-form {
    font-size: 16px;
    border-radius: 50px;
    border: 0
}

.sortBox .select-value {
    margin-left: 15px;
    line-height: 24px;
    position: absolute;
    left: 0;
    top: 1px;
    bottom: 0;
    width: 175px;
    overflow: hidden
}

.sortBox .select-arrow {
    position: absolute;
    top: 50%;
    right: 14px;
    margin-top: -8px
}

.sortBox .select-arrow > .arrow-up {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid;
    margin: 2px
}

.sortBox .select-arrow > .arrow-down {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid;
    margin: 2px
}

.select-options {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    z-index: 99999
}

.select-options > .options > div {
    padding: 3px 15px;
    cursor: pointer;
    word-break: break-all
}

#main.right {
    -webkit-transform: translate3d(260px, 0, 0);
    transform: translate3d(260px, 0, 0)
}

#leftbox {
    width: 260px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
    color: #EBEBEB;
    padding: 28px
}

#leftbox .box > a {
    display: block;
    line-height: 42px;
    font-size: 18px
}

#leftbox .box > a > .l {
    margin-right: 10px
}

#leftbox .box .children {
    padding: 10px 0
}

#leftbox i.r {
    float: right
}

#leftbox .box ul {
    margin: 0;
    line-height: 30px
}

#leftbox .box ul li {
    cursor: pointer
}

#leftbox .box ul li:hover {
    background-color: rgba(255, 255, 255, 0.1)
}

.booklist {
    font-size: 14px;
    height: calc(100% - 44px);
    overflow: hidden
}

.booklist ul {
    list-style: none;
    padding: 0;
    line-height: 30px;
    font-size: 12px
}

.booklist ul li a {
    display: block;
    position: relative;
    height: 30px
}

.booklist ul li .r {
    color: #7B7B7B;
    right: 0;
    position: absolute
}

.booklist ul li .l {
    display: inline-block;
    width: 125px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis
}

#searchgo {
    border: 0;
    border-radius: 20px;
    width: 100%;
    padding: 4px 10px
}

#searchlist {
    max-height: calc(100% - 77px);
    padding-top: 10px;
    font-size: 12px
}

#webpage {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    background-image: url('../images/jz.gif');
    background-position: center center;
    background-repeat: no-repeat
}

#webpage .iosiframe {
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overflow: auto
}

#webpage iframe {
    width: 100%;
    height: 100%;
    border: 0
}

#webpage .tcgb {
    position: absolute;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    line-height: 30px
}

#webpage .tcgb i {
    font-size: 14px
}

#webpage .tcgb:hover {
    color: #fff
}

.abox > div {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 0px;
    width: calc(100% - 16px);
    padding: 3px 5px;
    margin: 0 10px 0 7px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 1;
    font-size: 1.2rem;
    text-align: center;
    border-radius: 3px;
    line-height: 16px;
}

#main[name=skin-1] .abox > div {
    background-color: rgba(67, 49, 15, 0.95);
    color: #F3BB9B;
    text-shadow: 0 1px #191919
}

.bookshelfInfo {
    font-size: 12px;
    position: absolute;
    bottom: 10px;
    width: calc(100% - 28px - 28px);
    text-align: center;
    color: #626262
}

.bookshelfInfo > i {
    font-size: 12px;
    margin-right: 5px
}

.bookshelfInfo > span {
    margin-right: 2px
}

@media only screen and (max-width: 880px) {
    .abtn[name=date], .abtn[name=name] {
        display: none !important
    }
}
.index_tit {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    padding: 9px 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 1;
    font-size: 1.2rem;
    text-align: center;
    border-radius: 3px;
    line-height: 16px;
}
h1,h2,h3,h4,h5,h6{font-weight:400;margin:0}a{text-decoration:none}button{cursor:pointer}a:focus,p:focus,div:focus,input:focus,button:focus,textarea:focus,select:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);outline:0}input,button,select,textarea{outline:0}.data-loading{background:url('/static/index/img/jz.gif') no-repeat center center}.hide{display:none!important}.pop{position:fixed;z-index:1001;opacity:0;display:none;-webkit-transform:scale3d(0.5,0.5,0.5);transform:scale3d(0.5,0.5,0.5);background:#fff;left:0;top:0;bottom:0;right:0;margin:auto!important;border-radius:5px;line-height:normal;-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s}.pop.activ{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);opacity:1}.pop>.abtn[name=close]{position:absolute;width:40px;height:40px;top:0;right:-56px;color:#717785;background-color:#fff;border-radius:50%;font-weight:bold;line-height:40px;text-align:center}.slide{width:100%;border-top-right-radius:10px;border-top-left-radius:10px;overflow:hidden;background:#fff;position:fixed;left:0;bottom:0;z-index:1001;line-height:normal;-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.slide.activ{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.panel{border-radius:4px;border:1px solid #F8F9FA;margin-bottom:20px}.panel>div{padding:20px}.panel>.top,.panel>.bottom{height:60px;line-height:60px;padding:0 20px}.panel>.top{border-bottom:1px solid #F8F9FA;background-color:#F8F9FA}.panel>.top>i{margin-right:10px;font-size:20px}.panel>.bottom{border-top:1px solid #F8F9FA}.panel .ibtn{line-height:normal}.centerpop{width:660px;margin:auto!important}.centerpop .content{height:calc(100% - 120px);padding:20px 30px}.centerpop .cnavs{margin:0 0 13px}.centerpop .top{font-size:20px}.centerpop .content table{border:0;margin:0}.centerpop .content table td{border:0;height:50px;padding-bottom:16px}.centerpop .content table td:nth-child(1){width:160px}.centerpop .content table td:nth-child(2){width:430px}.centerpop .content table td:nth-child(1)>i{margin-left:5px}.centerpop .content table td img{height:39px}.centerpop .content table td .thelogo a.ibtn{margin-left:20px;margin:0 0 0 20px}.centerpop .content table input,.centerpop .content table textarea{margin:0}.centerpop .bottom{padding:0 10px}.centerpop .errortext{color:red;font-size:14px;display:inline-block;padding-left:10px}.centerpop .errortext i{margin-right:5px}.openbox{width:735px;height:435px}.openbox .h>a{padding:15px 26px;border-right:1px solid #F8F9FA}.openbox .h>a.activ,.openbox .h>a:hover{border-bottom:#FFB901 3px solid}.openbox .f{position:absolute;width:100%;bottom:0;padding:20px;text-align:center;color:#999;font-size:12px}.openbox .f em{margin-right:10px}.openbox .b{padding:40px 60px}.openbox .b::after{display:block;content:"";clear:both}.openbox .b .l .box{width:inherit;height:inherit;position:relative}.openbox .box .cover{position:absolute;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);bottom:46px;-webkit-box-shadow:0 0 18px rgba(0,0,0,0.15);box-shadow:0 0 18px rgba(0,0,0,0.15)}.openbox .box .cover img{width:100%;height:100%}.openbox .box .shelf{position:absolute;bottom:-26px;width:100%;height:86px;background:url("/static/index/img/shelf.png") no-repeat;background-size:280px}.openbox .box>div{width:260px;height:260px}.openbox .box img,.openbox .box canvas{width:100%;height:100%}.openbox .box>div.data-loading{background:url('/static/index/img/jz-s1.gif') no-repeat center center;background-color:#828282;border-radius:8px}.thickness{width:7px;position:absolute;top:0;right:-6px;height:100%}.thickness div{width:1px;position:relative;display:inline-block}.thickness div:nth-child(1){background-color:#B5B3B3;height:100%}.thickness div:nth-child(2){background-color:#E3E2E2;height:calc(100% - 1px);top:-1px}.thickness div:nth-child(3){background-color:#B5B3B3;height:calc(100% - 4px);top:-2px}.thickness div:nth-child(4){background-color:#E3E2E2;height:calc(100% - 6px);top:-3px}.thickness div:nth-child(5){background-color:#B5B3B3;height:calc(100% - 8px);top:-4px}.thickness div:nth-child(6){background-color:#E3E2E2;height:calc(100% - 10px);top:-5px}.openbox .b .l{float:left;width:280px;height:280px}.openbox .b .r{float:right;width:290px;height:280px;overflow:hidden;font-weight:400;position:relative}.openbox .b .r h3{font-weight:bold}.openbox .b .r .publisher{font-size:14px;color:#999;padding:5px 0}.openbox .b .r .introduce{color:#6C757D;height:100px;overflow-y:scroll;margin-top:20px;font-size:14px;padding-right:10px}.openbox .openclick{position:absolute;bottom:20px;width:100%}.openbox .openclick>.abtn{display:block;line-height:40px;text-align:center;background-color:#28A745;color:#fff;border-radius:3px}.openbox .openclick>.abtn.abtn:hover{background-color:#218838;color:#fff}.openbox .abtn[name=url]{background-color:#28A745}.openbox .abtn[name=url]:hover{background-color:#218838}.openbox .abtn[name=wxb]{background-color:#007BFF}.openbox .abtn[name=wxb]:hover{background-color:#0069D9}.openbox .abtn[name=xcx]{background-color:#6C757D}.openbox .abtn[name=xcx]:hover{background-color:#5A6268}.openbox .abtn[name=pdf]{background-color:#17A2B8}.openbox .abtn[name=pdf]:hover{background-color:#138496}.openbox .abtn[name=exe]{background-color:#343A40}.openbox .abtn[name=exe]:hover{background-color:#23272B}.openbox-mb{width:90%;max-width:500px;overflow:hidden;height:345px}.openbox-mb .h{background-color:#EBEBEB;line-height:50px;padding-left:20px;font-weight:bold;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis}.openbox-mb .h .abtn[name=close]{position:static;float:right;color:#000;background:0;border-radius:0;width:50px;height:50px;text-align:center}.openbox-mb .h .abtn[name=close]>i{line-height:50px;margin-top:0;font-size:12px}.openbox-mb .b{padding:20px}.openbox-mb .b h3{font-weight:bold;margin-bottom:10px}.openbox-mb .b .publisher{margin-bottom:10px;color:#999}.openbox-mb .b .introduce{margin-bottom:20px;color:#666;height:80px;overflow-y:auto;font-size:14px}.openbox-mb .b .openclick a{display:block;padding:10px 0;color:#fff;background-color:#1B7FCC;text-align:center;border-radius:4px}.openbox-mb .b .openclick a:active{background-color:#0F6CB7}.openbox-mb .f{padding:10px 20px;text-align:center;color:#999;font-size:12px;position:absolute;bottom:0;width:100%}.openbox-mb .f em{margin-right:10px}.sharebox{width:580px;height:400px;font-size:14px}.sharebox .h{height:100px;background:url("/static/index/img/fxbg.jpg") no-repeat;background-size:100%;color:#fff;padding:20px;border-top-left-radius:5px;border-top-right-radius:5px}.sharebox .b{height:300px;padding:40px}.sharebox .h h1{font-size:28px}.sharebox .h p{margin:5px 0 0 0}.sharebox .b>.l,.sharebox .b>.r{height:100%}.sharebox .b>.l{width:272px;border-right:1px solid #DEE2E6;float:left}.sharebox .b>.r{float:right;width:200px;margin-top:-10px;position:relative}.sharebox .b>.l .lbtnbox>a{width:50px;height:50px;display:inline-block;border-radius:50%;line-height:50px;text-align:center;margin:0 10px 10px 0}.sharebox .b>.l .lbtnbox>a>i{font-size:28px;color:#fff}.fx-wx{background:#51C332}.fx-er{background:#76BD30}.fx-lj{background:#29B6F6}.fx-qq{background:#64D5FC}.fx-kj{background:#F7AE32}.fx-wb{background:#EB452F}.fx-tb{background:#268FFA}.fx-db{background:#499A19}.fx-ly{background:#207CC6}.fx-yy{background:#05A57C}.fx-hb{background:#7EAA17}.fx-wx:hover{background:#31B212}.fx-er:hover{background:#4CAF50}.fx-lj:hover{background:#00A2EA}.fx-qq:hover{background:#51CBF8}.fx-kj:hover{background:#F09E30}.fx-wb:hover{background:#E3422D}.fx-tb:hover{background:#0F83F7}.fx-db:hover{background:#408919}.fx-ly:hover{background:#086CBC}.fx-yy:hover{background:#088B6A}.fx-hb:hover{background:#6A8E15}.sharebox .lfzkbox{margin-top:20px}.sharebox .lfzkbox .ljfz{margin-bottom:10px}.sharebox .lfzkbox input,.sharebox .lfzkbox button{height:32px;border:1px solid #E2E2E2;background:#fff;width:114px;color:#808080}.sharebox .lfzkbox input{border-top-left-radius:30px;border-bottom-left-radius:30px;padding:0 5px 0 20px}.sharebox .lfzkbox button{border-top-right-radius:30px;border-bottom-right-radius:30px;padding-right:20px;border-left:none}.sharebox .lfzkbox input:hover{border:1px solid #FF7E0C}.sharebox .lfzkbox button:hover{background:#FF7E0C;color:#fff;border:0}.sharebox .rbtnbox{position:absolute;bottom:-10px}.sharebox .rbtnbox button{display:inline-block;width:94px;background:#fff;color:#808080;border:1px solid #E2E2E2;height:30px}.sharebox .rbtnbox .wxb{border-right:0;border-top-left-radius:30px;border-bottom-left-radius:30px}.sharebox .rbtnbox .xcxb{border-top-right-radius:30px;border-bottom-right-radius:30px}.sharebox .rbtnbox .activ{background:#FF7E0C;color:#fff;border:0}.sharebox .rwmbox img,.sharebox .rwmbox canvas{width:188px;height:188px}.sharebox-mb .rwmbox img,.sharebox-mb .rwmbox canvas{width:188px;height:188px}.sharebox-mb .b .ewmbox{text-align:center}.sharebox-mb .rbtnbox button{display:inline-block;width:94px;background:#fff;color:#808080;border:1px solid #E2E2E2;height:30px}.sharebox-mb .rbtnbox .wxb{border-right:0;border-top-left-radius:30px;border-bottom-left-radius:30px}.sharebox-mb .rbtnbox .xcxb{border-top-right-radius:30px;border-bottom-right-radius:30px}.sharebox-mb .rbtnbox .activ{background:#FF7E0C;color:#fff;border:0}.mailbox{padding:60px 40px;text-align:center;position:relative}.mailbox a[name=mailbox-back]{position:absolute;left:20px;top:20px;color:#808080}.mailbox a[name=mailbox-back]:hover{color:#333}.mailbox .tt{font-size:22px}.mailbox input,#sjmailbox input{border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;-ms-border-radius:30px;-o-border-radius:30px;border:1px solid #E2E2E2;background:#fff;width:80%;max-width:300px;color:#808080;padding:12px;font-size:16px;text-align:center;margin:20px}.mailbox .ft a{display:block;margin:0 auto;margin-bottom:10px}.mailbox a[name=postmail]{width:150px;height:40px;line-height:40px;border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;-ms-border-radius:30px;-o-border-radius:30px;text-align:center;background:#FF7E0C;color:#fff}.mailbox a[name=postmail]:hover{background:#E5710A}.ft .er{color:red;margin-top:20px}.ft .er i,.ft .ok i{margin-right:5px}.ft .ok{color:green;margin-top:20px}.sharebox-mb .h,.sharebox-mb .f{padding:0 20px;line-height:50px;color:rgba(0,0,0,0.8)}.sharebox-mb .h .btnbox,.sharebox-mb .f{text-align:center}.sharebox-mb .h .r{float:right;font-size:12px}.sharebox-mb .h .ewmbox{color:#A9A9A9}.sharebox-mb .h .ewmbox>a{padding:0 10px;margin-left:-10px}.sharebox-mb .h .mailbox{text-align:center;position:relative}.sharebox-mb .mailbox{padding:0}.sharebox-mb .h .mailbox>a{padding:0 10px;position:absolute;left:-10px;top:0}.sharebox-mb .h{border-bottom:1px solid rgba(0,0,0,0.05)}.sharebox-mb .b{padding:20px}.sharebox-mb .f{border-top:1px solid rgba(0,0,0,0.05)}.sharebox-mb table{width:100%}.sharebox-mb td{text-align:center;height:90px;vertical-align:top}.sharebox-mb td a{width:50px;height:50px;display:inline-block;border-radius:50%;line-height:50px;text-align:center;margin-bottom:5px;font-size:12px}.sharebox-mb td a>i{font-size:28px;color:#fff}.sharebox-mb td a>p{line-height:20px;margin:0}.sharetips{position:fixed;left:0;top:0;z-index:1111;width:100%;height:100%;background:rgba(0,0,0,0.8) url("/static/index/img/sharetips.png") no-repeat center top;background-size:100%;display:none}#jtbox{width:480px;height:787px;background:url('/static/index/img/fxtbg.jpg') no-repeat 100% 100%;border-radius:5px;overflow:hidden;position:fixed;left:-2000px;top:0}#jtbox table{width:357px;height:357px;margin:0 auto;border-collapse:collapse;border-spacing:2px}#jtbox table td{text-align:center;vertical-align:bottom;display:table-cell}#jtbox table td img{max-height:250px;max-width:250px}#jtbox h3{font-size:27px;font-weight:400}#jtbox .nrbox{text-align:center}#jtbox .nrbox h3{margin-top:50px;color:#000;padding:10px 40px 10px 40px;margin-bottom:0}#jtbox .nrbox p{color:#6A6A6A;padding:10px 40px 10px 40px}#jtbox .nrbox div{margin-top:30px;padding:10px 40px 10px 40px}#jtbox .nrbox div>img{margin-right:8px;height:16px;vertical-align:middle}#jtbox .footbox{position:absolute;bottom:50px;left:30px}#jtbox .footbox h3{margin-top:0}#jtbox .footbox p{color:#A7A7A7;margin-bottom:2px}#jtbox .ewm{width:128px;height:128px;position:absolute;right:30px;bottom:30px}.bill{width:480px;height:787px;z-index:1002000;margin-top:20px;background:#000}.bill .canvasbox{width:100%;height:100%;background:url("/static/index/img/jz-s1.gif") #000 center center no-repeat;position:absolute;left:0;top:0;border-radius:5px;overflow:hidden}.bill .canvasbox>div{background-color:rgba(0,0,0,0.6);width:100%;height:50px;line-height:50px;position:absolute;top:0;left:0;opacity:0;text-align:center;-webkit-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s;color:#fff}.bill .canvasbox>div a{padding:5px 10px 5px 10px;border-radius:3px;background-color:#FF7E0C;line-height:30px;margin-top:5px}.bill .canvasbox:hover div{opacity:1}.bill .canvasbox>div span{float:left;margin-left:10px;font-size:14px}.bill .canvasbox>div a[name=close]{float:right;padding:0;width:30px;height:30px;text-align:center;line-height:30px;margin-right:10px;margin-top:10px;font-size:18px;position:static;background-color:#FF7E0C;color:#fff;border-radius:4px}.bill .canvasbox>div a[name=close]>i{font-size:16px;line-height:30px}.preview{padding:0 40px 40px 40px;width:calc(100% - 160px);height:calc(100% - 100px)}.preview .top{height:50px;text-align:center}.preview .top>a{display:inline-block;height:100%;line-height:52px;padding:0 5px;color:#838383}.preview .top>a.activ,.preview .top>a:hover{color:#000}.preview .top>a>i{font-size:26px}.preview .top>a>i.icon-below-s{font-size:12px;position:relative;top:-4px}.preview .top>a[name=qrcode]{position:relative}.preview .qrcodebox{position:absolute;top:55px;right:0;background:#fff;border-radius:5px;padding:6px;display:none;z-index:9999;-webkit-box-shadow:0 8px 8px rgba(0,0,0,0.2);box-shadow:0 8px 8px rgba(0,0,0,0.2)}.preview .qrcodebox p{line-height:30px;margin:0}.preview .top>a[name=qrcode]:hover .qrcodebox{display:block}.preview #qrcode{width:200px;height:200px}.preview #qrcode canvas{width:100%;height:100%}.preview .device{position:relative;margin:30px auto}.preview .device[name=pc]{width:100%;height:100%;margin:0}.preview .device[name=ipad]{width:885px;height:1151px;background:url("/static/index/img/preview/pad-port.png") no-repeat 100% 100%}.preview .device[name=ipad-h]{width:1211px;height:785px;background:url("/static/index/img/preview/pad-land.png") no-repeat 100% 100%}.preview .device[name=iphone]{width:383px;height:774px;background:url("/static/index/img/preview/phone-port.png") no-repeat 100% 100%}.preview .device[name=iphone-h]{width:774px;height:383px;background:url("/static/index/img/preview/phone-land.png") no-repeat 100% 100%;margin:100px auto}.preview .body{height:calc(100% - 50px);background:url("/static/index/img/preview/resp-bg.png") repeat-y;background-size:100%;overflow-y:auto}.preview .body iframe{position:absolute;background-color:#000}.preview .device[name=pc] iframe{width:100%;height:100%}.preview .device[name=ipad] iframe{width:786px;height:960px!important;top:76px;left:49px}.preview .device[name=ipad-h] iframe{width:1041px;height:703px!important;top:41px;left:75px}.preview .device[name=iphone] iframe{width:338px;height:606px!important;top:81px;left:22px}.preview .device[name=iphone-h] iframe{width:606px;height:337px!important;top:23px;left:82px}.preview.tp .body,.preview.tp .top{width:calc(100% - 300px)}.preview.tp .side i{margin-right:5px}.preview.tp .side{width:300px;height:100%;position:absolute;right:0;top:0;padding:50px 50px 40px 0}.preview.tp .side h2,.preview.tp .side h5,.preview.tp .side>div{margin-bottom:30px}.preview.tp .side .author img{width:35px;height:35px;border-radius:50%;margin-right:10px}.preview.tp .side .author a{float:right;border-radius:20px;border:1px solid #C0C0C0;color:#666;padding:0 10px;margin-top:5px;line-height:26px}.preview.tp .side .action{white-space:nowrap}.preview.tp .side .action span{margin-right:15px;color:#333}.preview.tp .side .action span i{color:#999}.preview.tp .side .action span[name=collection].activ>i{color:#DC3545}.preview.tp .side .info{padding:20px 0;border-top:1px solid #F3F3F3;border-bottom:1px solid #F3F3F3;color:#666}.preview.tp .side .info p>span:last-child{float:right}.preview.tp .side .buy{height:106px;width:250px;position:absolute;bottom:0;background-color:#fff;padding-top:10px}.preview.tp .side .buy .price{font-size:22px;color:#FF4534;font-weight:bold}.preview.tp .side .buy .abtn[name=recharge]{float:right;margin-top:5px;color:#FF7F73;border-bottom:1px solid #FF7F73}.preview.tp .side .buy .abtn[name=recharge]:hover{color:#FF4534}.preview.tp .side .buy .abtn[name=use]{width:100%;height:46px;text-align:center;line-height:46px;font-size:16px;background:#FF4534;display:block;color:#fff;border-radius:3px;margin:10px 0 10px 0;-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s}.preview.tp .side .buy .abtn[name=use]:hover{background:#F51703}.preview.tp .side a:hover{color:#999}.preview.tp .side .exp{position:relative}.preview.tp .side .exp>.ol{display:none;background-color:#fff;position:absolute;bottom:0;right:0;font-size:12px;width:460px;padding:40px;border-radius:10px;-webkit-box-shadow:0 .5rem 1rem rgba(0,0,0,0.15);box-shadow:0 .5rem 1rem rgba(0,0,0,0.15)}.preview.tp .side .exp h2{text-align:center;margin-bottom:20px}.preview.tp .side .exp ol{padding-left:0;color:#666}.preview.tp .side .exp ol li{margin:8px 0}.preview.tp .side .exp>a{float:right;font-size:14px;color:#666}.preview.tp .side .exp>a:hover+.ol{display:block}