html, body{
    width: 100%;height: 100%;;
    background: #FFF5E5;
}

.page-top-bgimg{
    position: absolute;
    height: 8%;
    top:0px;
    left:180px;
    width: calc(100% - 180px);
    background-position: center;
    background-size: cover;;;
    background-image: url(../images/page-top.png);
    /* z-index: 999999; */
    z-index: 2000;
}
.page-bottom-bgimg{
    position: absolute;
    height: 12%;
    bottom: 0px;
    left: 180px;
    width: calc(100% - 180px);
    background-position: center;
    background-size: cover;
    background-image: url(../images/page-bottom.png);
    /* z-index: 999999; */
    z-index: 2000;
}
#webgl_view_content canvas{
    width:100vw !important;
    height:100vh !important;
  }
.page-main-box{
    position: absolute;
    height: 80%;
    top:8%;
    left:180px;
    width: calc(100% - 180px);
}
.page-main-title{
    position: absolute;
    left:0;
    top:0;
    width: 220px;
    height: 100%;;
}
.page-main-content{
    position: absolute;
    left:220px;
    top:0;
    width: calc(100% - 220px); 
    height: 100%;;
}
.page-main-content-top{
    width: 100%;;
    height: 115px;
    width: 100%;;
    display: flex;
    justify-content: center;
    align-items: center;
}
.page-main-content-bottom{
    width: 100%;;
    height: calc(100% - 115px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.page-main-title-box{
    position: absolute;
    right: 0;
    top: 115px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.page-main-title-box-image{
    display: block;
    background-image: url(../images/page-title-bg.png);
    background-size: contain;
    width: 72px;
    height: 59px;
}
.page-main-title-box-textbox{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 17px;
}
.page-main-title-box-textbox .smalltitle{
    width: 17px;
    height: 192px;
    font-size: 16px;
    font-weight: normal;
    color: #666666;
    line-height: 16px;    
    writing-mode: tb-rl;
}
.introbox-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.introbox-title2{
    font-size: 22px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    margin-bottom: 0;
    color: #BE966C;
    display: flex;
    justify-content: center;
    align-items: center;
}
.introbox-title2::before{
    content: '';
    display: inline-block;
    width:12px;
    height: 32px;;
    background-image: url(../images/icon-btn/intro-title-icon.png);
    background-size: contain;
}
.introbox-title2::after{
    content: '';
    display: inline-block;
    width:12px;
    height: 32px;;
    background-image: url(../images/icon-btn/intro-title-icon.png);
    background-size: contain;
    transform: rotateZ(180deg);
}

.introbox-title2-sound{
    display: inline-block;
    width:22px;
    height: 22px;;
    background-image: url(../images/icon-btn/yy.svg);
    background-size: contain;
    cursor: pointer;
}
.introbox-title2-sound.jinyong{
    background-image: url(../images/icon-btn/yy_sele.svg);
}
.introbox-html-content.content2{
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
}
.lil-gui{
    top:50% !important;
    z-index: 999999999999999999999999999999 !important;
}
.page-main-title-box-textbox .entitle{
    width: 18px;
    font-size: 16px;
    font-family: AdobeKaitiStd-Regular, AdobeKaitiStd;
    font-weight: 400;
    color: #BE966C;
    line-height: 12px;
    writing-mode: tb-rl;
}
.page-main-title-box-textbox .bigtitle{
    width: 40px;
    height: 164px;
    font-size: 36px;
    font-weight: normal;
    color: #BE966C;
    line-height: 41px;   
    writing-mode: tb-rl;
    font-family: SimSun;
    letter-spacing: 5px;
}
.page-main-content-top-btn{
    width: 140px;
    height: 40px;
    display: flex;
    background-image: url(../images/page-btn.png);
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #BE966C;
    line-height: 25px;
    cursor: pointer;
}
.page-main-content-top-btn:first-child{
    margin-right: 167px;
}
.page-main-content-top-btn.active{
    background-image: url(../images/page-btn-active.png);
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 25px;
}
.page-main-dataitem{
    width: 170px;;
    box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
    cursor: pointer;
}
.page-main-dataitem:hover{
    box-shadow: 0px 0px 10px #be966c;
    z-index: 999;
}
.page-main-dataitem-name{
    width: 100%;
    height: 62px;
    line-height: 62px;;
    background-image: url(../images/data-item-title.png);
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 25px;
    text-shadow: 0px 0px 8px rgb(0 0 0 / 20%);
    /* display: inherit; */
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
}
.page-main-dataitem-thumb{
    width: 100%;
    height: 142px;
    background-size: 100% 100%;
}
.swiper-pagination-bullet-active {
    /* background-color: #be966c !important; */
}
.page-main-dataitem-text{
    width: 100%;
    height: 300px;
    background-image: url(../images/data-item-bg.png);
    padding: 20px 15px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #333333;
    line-height: 22px;
    text-shadow: 0px 0px 8px rgba(0,0,0,0.2);
    overflow: hidden;
    padding-bottom: 10px;
}
.page-main-dataitem-text .htmlcontent{
    height: 100%;
    overflow: hidden;
    text-align: justify;
}
.mySwiper-datalist .swiper-slide:nth-child(1) .page-main-dataitem{
    transform: translateY(20px);
}
.mySwiper-datalist .swiper-slide:nth-child(2) .page-main-dataitem{
    transform: translateY(-50px);
}
.mySwiper-datalist .swiper-slide:nth-child(3) .page-main-dataitem{
    transform: translateY(-0px);
}
.mySwiper-datalist .swiper-slide:nth-child(4) .page-main-dataitem{
    transform: translateY(-50px);
}
.mySwiper-datalist .swiper-slide:nth-child(5) .page-main-dataitem{
    transform: translateY(-100px);
}
.mySwiper-datalist .swiper-slide:nth-child(6) .page-main-dataitem{
    transform: translateY(-60px);
}
.mySwiper-datalist .swiper-slide:nth-child(7) .page-main-dataitem{
    transform: translateY(20px);
}
.mySwiper-datalist .swiper-slide:nth-child(8) .page-main-dataitem{
    transform: translateY(-50px);
}
.mySwiper-datalist .swiper-slide:nth-child(9) .page-main-dataitem{
    transform: translateY(-0px);
}
.mySwiper-datalist .swiper-slide:nth-child(10) .page-main-dataitem{
    transform: translateY(-50px);
}
.mySwiper-datalist .swiper-slide:nth-child(11) .page-main-dataitem{
    transform: translateY(-100px);
}
.mySwiper-datalist .swiper-slide:nth-child(12) .page-main-dataitem{
    transform: translateY(-60px);
}
.mySwiper-datalist .swiper-slide:nth-child(13) .page-main-dataitem{
    transform: translateY(20px);
}
.mySwiper-datalist .swiper-slide:nth-child(14) .page-main-dataitem{
    transform: translateY(-50px);
}
.mySwiper-datalist .swiper-slide:nth-child(15) .page-main-dataitem{
    transform: translateY(-0px);
}
.mySwiper-datalist .swiper-slide:nth-child(16) .page-main-dataitem{
    transform: translateY(-50px);
}
.mySwiper-datalist .swiper-slide:nth-child(17) .page-main-dataitem{
    transform: translateY(-80px);
}
.mySwiper-datalist .swiper-slide:nth-child(18) .page-main-dataitem{
    transform: translateY(-60px);
}
.page-main-data-left:hover{
    box-shadow: 0px 0px 5px #871d17;
}
.page-main-data-right:hover{
    box-shadow: 0px 0px 5px #871d17;
}
.data-right:hover,.data-left:hover{
    box-shadow: 0px 0px 5px #871d17;
}
.page-main-data-left{
    display: block;
    width: 18px;
    height: 50px;
    background-image: url(../images/page-zuo.png);
    top: 50%;
    left: 130px;
    position: absolute;
    margin-top: -25px;
    cursor: pointer;
}
.page-main-data-right{
    display: block;
    width: 18px;
    height: 50px;
    background-image: url(../images/page-you.png);
    top: 50%;
    right:  130px;
    position: absolute;
    margin-top: -25px;
    cursor: pointer;
}
.data-left{
    display: block;
    width: 18px;
    height: 50px;
    background-image: url(../images/page-zuo.png);
    top: 50%;
    left: 10px;
    position: absolute;
    margin-top: -25px;
    cursor: pointer;
    z-index: 88;
}
.data-right{
    display: block;
    width: 18px;
    height: 50px;
    background-image: url(../images/page-you.png);
    top: 50%;
    right: 20px;
    position: absolute;
    margin-top: -25px;
    cursor: pointer;
    z-index: 88;
}
.page-main-content-info{
    position: absolute;
    width: calc(100% - 260px);
    height: calc(100% - 200px);
    background-image: url(../images/zkbg.jpg);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-size: 100% 100%;
}
.page-main-content-info .info-content{
    height: calc(100% - 130px);
    position: absolute;
    /* padding-left: 70px; */
    padding-right: 70px;
    padding-bottom: 10px;
    width: calc(100% - 140px);
    margin-left: 70px;
    overflow: auto;
}
.page-main-content-info .info-title{
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 33px;
    text-align: center;
    padding: 26px;
    padding-left: 150px !important;
    padding-right: 150px !important;

}
.page-main-content-info-icon{
    display: block;
    position: absolute;
    width: 40px;
    height: 37px;
    background-image: url(../images/fill.png);;
    background-size: contain;
}
.page-main-content-info-icon.lefttop{
    transform: rotateZ(180deg);
    left:10px;
    top:10px;
}
.page-main-content-info-icon.leftbottom{
    transform: rotateZ(90deg);
    left:10px;
    bottom:10px;
}
.page-main-content-info-icon.righttop{
    transform: rotateZ(-90deg);
    right:10px;
    top:10px;
}
.page-main-content-info-icon.rightbottom{
    transform: rotateZ(0);
    right:10px;
    bottom:10px;
}
.info-content-imgbox{
    display: flex;
}
.info-content-html{
    margin-top: 20px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
}


.mySwiper-imagelist{
    width: calc(100vw - 180px - 220px - 260px - 140px - 180px);;
    height: 450px;
}
.mySwiper-thumblist{
    width: 120px;
    height: 450px;
    margin-left: 60px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.mySwiper-thumblist .swiper-slide {
    height: 74px !important;
    cursor: pointer;
}
.mySwiper-thumblist .swiper-slide-thumb-active {
    border: 3px solid #871D17;
}
.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mySwiper-thumblist-contr{
    width: 120px;
    height: 32px;
    background-image: url(../images/swiper-contr.png);
    background-size: contain;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.mySwiper-thumblist-contr-back{
    display: inline-block;
    width: 26px;
    height: 17px;
    background-image: url(../images/icon-btn/shang.png);
    background-size: contain;
    cursor: pointer;
}
.mySwiper-thumblist-contr-next{
    display: inline-block;
    width: 26px;
    height: 17px;
    background-image: url(../images/icon-btn/shang.png);
    background-size: contain;
    transform: rotateZ(180deg);
    cursor: pointer;
}
.nicescroll-rails{
    transform: translateX(-15px);
}
.content-info-btbox{
    position: absolute;
    right:70px;
    top:30px;;
}
.content-info-btbox-moxing{
    display: inline-block;
    width: 28px;
    height: 28px;
    /* background-image: url(../images/bt_moxing.png);
    background-size: contain; */
    background: url(../images/moxing.svg) no-repeat center;
    background-size: 100% 100%;
    cursor: pointer;
}
.content-info-btbox-moxing:hover{
    /* background-image: url(../images/bt_moxing_sele.png); */
    background: url(../images/moxing_sele.svg) no-repeat center;
    background-size: 100% 100%;
}
.content-info-btbox-sound{
    display: inline-block;
    width: 28px;
    height: 28px;
    /* background-image: url(../images/bt_yuyin.png);
    background-size: contain; */
    background: url(../images/yuyin_norm.svg) no-repeat center;
    background-size: 100% 100%;
    cursor: pointer;
    margin-left: 20px;
    vertical-align: baseline;
}
.content-info-btbox-sound:hover{
    /* background-image: url(../images/bt_yuyin_sele.png); */
    background: url(../images/yuyin_sele.svg) no-repeat center;
    background-size: 100% 100%;

}
.mySwiper-datalist{
    width:70%;
    height: 100%;
    padding: 10px !important;
}
.mySwiper-datalist .swiper-slide{
    display: flex;
    justify-content: center;
    align-items: center;
    background: none !important;
}
.mySwiper-datalist .swiper-pagination-bullet {
    width: 24px;
    height: 16px;
    background: url(../images/icon-btn/norm.png) no-repeat center;
    background-size: 100% 100%;
    display: none;
}
.mySwiper-datalist .swiper-pagination-bullet-active{
    width: 24px;
    height: 16px;
    background: url(../images/icon-btn/sele.png) no-repeat center;
    background-size: 100% 100%;
    display: none;
}
.page-bottom-copyright{
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}
.modelViewBox{
    width: 100%;height:100%;position:absolute;left:0;top:0;;
    z-index: 9999999999;
}
.modelViewBox::before{
    content: "";
    width: 100%;height:100%;position:absolute;left:0;top:0;;
    background-color: black;
    opacity: 0.78;;
}
.modelViewBox-close{
    position: absolute;
    right:20px;
    top:20px;
    width: 50px;
    height: 50px;;
    display: flex;
    justify-content: center;
    align-items: center;
    color:white;
    font-size: 30px;
    cursor: pointer;
}
.rotationAnimation{
    animation: roation 15s linear infinite;
    -webkit-animation: roation 15s linear infinite;
}
.swiper-slide {
    background: unset !important;
}
.zsjk-list-item{
    border: 0px solid gray;
    width: 11.11%;
    height: calc(100% - 100px);
    position: absolute;
    left: 0;
    top: 0;
    background-size: 100% 100%;;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    cursor: pointer;
    box-shadow: 5px 0px 0px rgb(88 83 81);
}
.page-main-content-bottom.zsjk{
    position: relative;
    width: calc(100% - 260px);
    margin: 0 auto;
}
.zsjk-list-item:nth-child(1){left:0;background-image: url(../images/01.png);}
.zsjk-list-item:nth-child(2){left:11.111111%;background-image: url(../images/02.png);}
.zsjk-list-item:nth-child(3){left:22.222222%;background-image: url(../images/03.png);}
.zsjk-list-item:nth-child(4){left:33.333333%;background-image: url(../images/04.png);}
.zsjk-list-item:nth-child(5){left:44.444444%;background-image: url(../images/05.png);}
.zsjk-list-item:nth-child(6){left:55.5555555%;background-image: url(../images/06.png);}
.zsjk-list-item:nth-child(7){left:66.6666666%;background-image: url(../images/07.png);}
.zsjk-list-item:nth-child(8){left:77.7777777%;background-image: url(../images/08.png);}
.zsjk-list-item:nth-child(9){left:88.8888888%;background-image: url(../images/09.png);}

.zsjk-list-item-title{
    display: block;
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    writing-mode: vertical-lr;
    margin-bottom: 20px;;
    letter-spacing: 8px;
}
.zsjk-list-item-icon{
    display: block;
    width: 21px;
    height: 20px;
    background-image: url(../images/zk.png);
    background-size: cover;
    margin-bottom: 40px;;
}
.zsjk-list-item.active .zsjk-list-item-icon{
    display: block;
    width: 21px;
    height: 20px;
    background-image: url(../images/you.png);
    background-size: cover;
}
.zsjk-list-item-content{
    position: absolute;
    left:11.11%;
    top:0;
    width:88.8888%;
    background-image: url(../images/zkbg.png);
    background-size: 100% 100%;;
    visibility:hidden;
    opacity: 0;
}


@keyframes roation {
    0% {
        -webkit-transform: rotate(0deg) ;
        transform: rotate(0deg) ;
    }
    100% {
        -webkit-transform: rotate(360deg) ;
        transform: rotate(360deg) ;
    }
}

@media (min-width: 768px) {
    .page-main-title{
        width: 160px; 
    }
    .page-main-content{
        left:160px;
        width: calc(100% - 160px); 
    }

    .page-main-content-top{
        height: 55px;
    }
    .page-main-content-bottom{
        width: 100%;;
        height: calc(100% - 55px);
    }

    .page-main-content-bottom.gjmj{
        padding-left: 100px;
        padding-right: 100px;;
        padding-bottom: 55px;
    }
    .page-main-title-box{
        top: 55px;
    }
    .zsjk-list-item,.zsjk-list-item-content{
        height: calc(100% - 55px);
    }

    .page-main-content-top-btn:first-child{
        margin-right: 50px;
    }

    .page-main-dataitem{
        width: 100px;;
    }
    .page-main-dataitem-name{
        height: 42px;
        line-height: 42px;
    }
    .page-main-dataitem-thumb{
        height: 80px;
    }
    .page-main-dataitem-text{
        height: 200px;
        padding: 20px 20px;
        text-align: justify;
    }
    
    .introbox{
        width: 425px;
    }
}
@media (min-width: 992px) {
    .page-main-title{
        width: 200px; 
    }
    .page-main-content{
        left:200px;
        width: calc(100% - 200px); 
    }

    .page-main-content-top{
        height: 80px;
    }
    .page-main-content-bottom{
        width: 100%;;
        height: calc(100% - 80px);
    }

    .page-main-content-bottom.gjmj{
        padding-left: 100px;
        padding-right: 100px;;
        padding-bottom: 80px;
    }
    .page-main-title-box{
        top: 80px;
    }
    .zsjk-list-item,.zsjk-list-item-content{
        height: calc(100% - 80px);
    }

    .page-main-content-top-btn:first-child{
        margin-right: 80px;
    }

    .page-main-dataitem{
        width: 120px;;
    }
    .page-main-dataitem-name{
        height: 42px;
        line-height: 42px;
    }
    .page-main-dataitem-thumb{
        height: 80px;
    }
    .page-main-dataitem-text{
        height: 200px;
        padding: 20px 20px;
        text-align: justify;
    }

    .page-main-content-info{
        width: calc(100% - 260px);
        height: calc(100% - 160px);
    }
    .introbox{
        width: 425px;
    }

}
@media (min-width: 1200px) {
    .page-main-title{
        width: 160px; 
    }
    .page-main-content{
        left:160px;
        width: calc(100% - 160px); 
    }

    .page-main-content-top{
        height: 60px;
    }
    .page-main-content-bottom{
        width: 100%;;
        height: calc(100% - 80px);
    }
    .page-main-title-box{
        top: 60px;
    }

    .page-main-content-bottom.gjmj{
        padding-left: 100px;
        padding-right: 100px;;
        padding-bottom: 80px;
    }
    .page-main-content-top-btn:first-child{
        margin-right: 167px;
    }
    .zsjk-list-item,.zsjk-list-item-content{
        height: calc(100% - 40px);
    }

    .page-main-dataitem{
        width: 120px;;
    }
    .page-main-dataitem-name{
        height: 42px;
        line-height: 42px;
    }
    .page-main-dataitem-thumb{
        height: 100px;
    }
    .page-main-dataitem-text{
        height: 150px;
        padding: 20px 20px;
        text-align: justify;
    }

    .page-main-data-left{
        left:60px;
    }
    .page-main-data-right{
        right:60px;
    }
    .page-main-content-top-btn:first-child{
        margin-right:90px;
    }

    .page-main-content-info{
        width: calc(100% - 200px);
        height: calc(100% - 120px);
    }

    .mySwiper-imagelist {
        width: calc(100vw - 180px - 160px - 200px - 140px - 180px);
        height: 450px;
    }
    .page-main-content-info .info-title {
        padding: 16px;
    }
    .content-info-btbox {
        top: 20px;
    }
    .page-main-dataitem:nth-child(5) {
        transform: translateY(-118px);
    }
    .introbox{
        width: 425px;
    }
}

@media (min-width: 1600px) {
    .page-main-title{
        width: 220px; 
    }
    .page-main-content{
        left:220px;
        width: calc(100% - 220px); 
    }

    .page-main-content-top{
        height: 100px;
    }
    .page-main-content-bottom{
        width: 100%;;
        height: calc(100% - 100px);
    }
    .page-main-content-bottom.gjmj{
        padding-left: 130px;
        padding-right: 130px;;
        padding-bottom: 100px;
    }
    .page-main-title-box{
        top: 100px;
    }
    .zsjk-list-item,.zsjk-list-item-content{
        height: calc(100% - 100px);
    }

    .page-main-content-top-btn:first-child{
        margin-right: 167px;
    }

    .page-main-dataitem{
        width: 170px;;
    }
    .page-main-dataitem-name{
        height: 62px;
        line-height: 62px;
    }
    .page-main-dataitem-thumb{
        height: 142px;
    }
    .page-main-dataitem-text{
        height: 300px;
        padding: 20px 20px;
        text-align: justify;
    }
    
    .page-main-data-left{
        left:120px;
    }
    .page-main-data-right{
        right:120px;
    }
    .page-main-content-top-btn:first-child{
        margin-right: 167px;
    }

    .page-main-content-info{
        width: calc(100% - 260px);
        height: calc(100% - 200px);
    }

    .mySwiper-imagelist {
        width: calc(100vw - 180px - 220px - 260px - 140px - 180px);
        height: 450px;
    }
    
    .page-main-content-info .info-title {
        padding: 26px;
    }
    .content-info-btbox {
        top: 30px;
    }
    .introbox{
        width: 557px;
    }
}


.controlbox-btn{
    display:inline-block;
    width: 50px;
    height: 50px;;
    background-size: 100% 100%;
}
.controlbox-item .btn1{
    background-image: url(../images/icon-btn/btn1.svg);
}
.controlbox-item.active .btn1{
    background-image: url(../images/icon-btn/btn1_.svg);
}
.controlbox-item .btn2{
    background-image: url(../images/icon-btn/btn2.svg);
}
.controlbox-item .btn2_{
    background-image: url(../images/icon-btn/btn2_.svg);
}
.controlbox-item .btn3{
    background-image: url(../images/icon-btn/btn3.svg);
}
.controlbox-item .btn4{
    background-image: url(../images/icon-btn/btn4.svg);
}
.controlbox-item.active .btn4{
    background-image: url(../images/icon-btn/btn4_.svg);
}
.controlbox-item .btn5{
    background-image: url(../images/icon-btn/btn5.svg);
}
.controlbox-item .btn6{
    background-image: url(../images/icon-btn/btn6.svg);
}
.controlbox-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 50px;
    cursor: pointer;
}
.controlbox-item-name{
    height: 25px;
    font-size: 18px;
    font-family: Helvetica;
    color: #FFFFFF;
    line-height: 22px;
    margin-top: 13px;
}
.yzmapclose{
    background-image: url(../images/icon-btn/gb.svg);
    background-size: contain;
}
.fangwenliang{
    position: absolute;
    right: 28px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 50px;
}
.fangwenliang-item{
    font-size: 18px;
    font-family: Helvetica;
    color: #FFFFFF;
    line-height: 22px;
}
.toplogobox{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 47px;
    left: 31px;
}
.toplogobox-img{
    width: 160px;
}
.toplogobox-name{
    min-width: 162px;
    height: 45px;
    line-height: 45px;
    /* background: #871D17; */
    background: url(../images/title_bg.png) no-repeat;
    background-size: cover;
    font-size: 22px;
    font-family: STKaitiSC-Black, STKaitiSC;
    font-weight: 900;
    color: #FFFFFF;
    text-align: center;
}
.mapchange{
    position: absolute;
    top: 47px;
    right: 30px;
    background-image: url(../images/icon-btn/mapchange.png);
    width: 103px;
    height: 77px;
    background-size: contain;
    cursor: pointer;
}
.introbox{
    position: absolute;
    min-height: 306px;
    z-index: 99999;
    background-size: 100% 100%;
    background-image: url(../images/yzinfobg.png);
    right: 140px;
    top: 50%;
    transform: translateY(-50%);
    padding: 86px 50px;
    height: 70%;
}
.imgtextbox{
    background-size: 100% 100%;
    background-image: url(../images/yzinfobg.png);
    padding: 86px 25px;
    /* width: 580px;
    height: 726px; */
    width: 30%;
    height: 74.9%;
    display: inline-block;
    position: relative;
    border: 1px solid rgba(190, 150, 108);
}
.close_icon {
    height: 67px;
    width: 67px;
    background: url(/assets/images/closedia.png) no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    top: 47px;
    right: 47px;
    cursor: pointer;
}
.introbox-close{
    position: absolute;
    left:50%;
    bottom:20px;;
    cursor: pointer;
    width:140px;
    height: 40px;;
    transform: translateX(-50%);
    background-image: url(../images/icon-btn/gb.png);
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #BE966C;
    display: flex;
    justify-content: center;
    align-items: center;
}
.introbox-title{
    font-size: 22px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    text-align: center;
    top: 30px;
    position: absolute;
    width: 100%;
    margin-left: -50px;
}
.introbox-titles{
    top: 50px;
    position: absolute;
    width: 100%;
    width: calc(100% - 60px);
}
.introbox-html{
    height: 100%;;
}
.introbox-html-content{
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    text-align: justify;
    height: 100%;;
}
.introbox-html-content * {
    color:white !important;
}
.introbox .nicescroll-rails{
    transform: translateX(30px) !important;
}
.introbox-lefttopicon{
    display: block;
    position: absolute;
    left: 10px;
    top: 10px;
    background-image: url(../images/icon-btn/fill1.png);
    background-size: 100% 100%;
    width: 30px;
    height: 30px;
    transform: rotateZ(0deg);
}
.introbox-leftbottomicon{
    display: block;
    position:absolute;
    left:10px;
    bottom:10px;;
    background-image: url(../images/icon-btn/fill1.png);
    background-size: 100% 100%;
    width:30px;
    height:30px;;
    transform: rotateZ(-90deg);
}
.introbox-rightbottomicon{
    display: block;
    position:absolute;
    right:10px;
    bottom:10px;;
    background-image: url(../images/icon-btn/fill1.png);
    background-size: 100% 100%;
    width:30px;
    height:30px;;
    transform: rotateZ(180deg);
}
.introbox-righttopicon{
    display: block;
    position:absolute;
    right:10px;
    top:10px;;
    background-image: url(../images/icon-btn/fill1.png);
    background-size: 100% 100%;
    width:30px;
    height:30px;;
    transform: rotateZ(90deg);
}


.control-box{
    position: fixed;
    display: flex;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
}
.control-box.thumbopen{
    animation: thumbopen 0.5s;
    -webkit-animation: thumbopen 0.5s; /* Safari 与 Chrome */
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */
    /* animation-timing-function:ease-in; */
}
.control-box.thumclose{
    animation: thumclose 0.8s;
    -webkit-animation: thumclose 0.8s; /* Safari 与 Chrome */
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */
    /* animation-timing-function:ease-out; */
}

@keyframes thumbopen
{
    from {transform: translate(-50%, 0px);}
    to {transform: translate(-50%, -90px);}
}
 
@-webkit-keyframes thumbopen /* Safari 与 Chrome */
{
    from {transform: translate(-50%, 0px);}
    to {transform: translate(-50%, -90px);}
}
@keyframes thumclose
{
    from {transform: translate(-50%, -90px);}
    to {transform: translate(-50%, 0px);}
}
 
@-webkit-keyframes thumclose /* Safari 与 Chrome */
{
    from {transform: translate(-50%, -90px);}
    to {transform: translate(-50%, 0px);}
}
.my-thumb{

}
.my-thumb-open{
    animation: mythumbopen 0.8s;
    -webkit-animation: mythumbopen 0.8s; /* Safari 与 Chrome */
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */
}
.my-thumb-close{
    animation: mythumbclose 0.8s;
    -webkit-animation: mythumbclose 0.8s; /* Safari 与 Chrome */
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */
}

@keyframes mythumbopen
{
    from {transform: translate(0px, 100px);}
    to {transform: translate(0, 0px);}
}
 
@-webkit-keyframes mythumbopen /* Safari 与 Chrome */
{
    from {transform: translate(0px, 100px);}
    to {transform: translate(0, 0px);}
}
@keyframes mythumbclose
{
    from {transform: translate(0, 0px);}
    to {transform: translate(0, 100px);}
}
 
@-webkit-keyframes mythumbclose /* Safari 与 Chrome */
{
    from {transform: translate(0, 0px);}
    to {transform: translate(0, 100px);}
}



.control-box::before{
    content: '';

}
.control-box-left{
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 0 10px 20px;
}
.control-box-center{
    display: inline-flex !important;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 20px 10px 20px;
}
.control-box-right{
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 20px 10px 0px;
}
.control-box-action{
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.control-box-action span{
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
    margin-top: 4px;
}
.control-box-left .control-box-action{
    margin-right: 23px;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
}
.control-box-left .control-box-action:last-child{
    margin-right: 0px;
}
.control-box-right .control-box-action{
    margin-left: 23px;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
}
.control-box-right .control-box-action:first-child{
    margin-left: 0px;
}
.icon-outline{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/icon/outline.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.icon-play{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/icon/play.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.control-box-action.active .icon-play{
    background-image: url(../images/icon/play_active.png);
}
.icon-thumbs{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/icon/thumbs.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.icon-map{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/icon/map.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.icon-sound{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/icon/sound.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.icon-message{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/icon/message.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.icon-showhide{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/icon/showhide.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.icon-like{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/icon/like.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    transform: scale(3.5);
    pointer-events: none;
}

.icon-like.active {
    -webkit-animation: mymoveOK 0.8s linear;
    animation: mymoveOK 0.8s linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: steps(28);
    animation-timing-function: steps(28);
  }
  
  @-webkit-keyframes mymoveOK {
    from {
      background-position: left;
    }
    to {
      background-position: right;
    }
  }
  
  @keyframes mymoveOK {
    from {
      background-position: left;
    }
    to {
      background-position: right;
    }
  }
.icon-share{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/icon/share.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.icon-help{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/icon/help.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.icon-info{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/icon/info.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.icon-fullscreen{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/icon/fullscreen.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.icon-xz{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/icon/xz.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.yzdiver{
    display: none;;
}

.swiper-notification{
    display: none;
}

.message-box{
    width: 160px;
    height: 164px;
    position: absolute;
    bottom: 90px;
    left: -160px;
    margin-left: -5px;
    background-image: url(../images/icon-btn/messagebg.png);
    display: flex;
    justify-content: center;
    align-items: center;
}
.message-box::after{
    
}
.message-box-action input{
    width: 227px;
    height: 42px;
    line-height: 32px;
    font-size: 16px;
    color: #333;
    font-weight: 400;
    border: 1px solid #535353;
    border-radius: 3px;
    margin-right: 13px;;
    padding: 0px 10px;
}
.message-box-action span{
    width: 64px;
    height: 42px;
    padding: 0;
    font-size: 16px;
    color: #fff;
    background: #ec6941;
    border: none;
    border-radius: 3px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: 0 !important;
}
.message-box-list-item{
    line-height: 32px;
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    color: #606266;
}
.message-box-list-item2{
    margin-bottom: 10px;
}
.message-box-list-item:hover{
    text-decoration: underline;
    color: #ec6941;
}
.message-box-action{
    display: flex;
    justify-content: center;
    align-items: center;
}
.message-box-list{
    margin-bottom: 20px;
    margin-top: 20px;
}
.gomessagemore{
    position: absolute;
    top: 30px;
    right: -18px;
    z-index: 2;
    width: 113px;
    height: 41px;
    margin: 0;
    font-size: 14px;
    color: #fff;
    background-color: #af1922;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
}
.hot-message{
    display: inline-block;
    width:16px;
    height: 24px;
    background-image: url(../images/hot.png);
    background-size: contain;
}
.message-box-page-title{
    font-size: 20px;
    color: #1a1c1f;
    position: absolute;
    top: 15px;
    left: 15px;
}
.msgcontent-username{
    color: #4a7be5 !important;
    font-size: 16px !important;;
    font-family: Source Han Sans CN !important;;
}
.msgcontent-text{
    font-weight: 400 !important;;
    color: #666666 !important;;
    line-height: 18px !important;;
    font-size: 16px !important;;
    font-family: Source Han Sans CN !important;;
}
.msgcontent-pubtime{
    font-size: 14px !important;;
    color: #999 !important;;
    font-weight: 400 !important;;
}
.msgcontent-like{
    font-size: 14px !important;;
    color: #999 !important;;
    font-weight: 400 !important;;
    display: flex;
    justify-content: center;
    align-items: center;
}
.msgcontent-like span{
    font-size: 14px !important;;
    color: #999 !important;;
    font-weight: 400 !important;;
}
.msgcontent-like i{
    display: inline-block !important;;
    width: 18px;
    height: 18px;
    background-image: url(../images/icon/msg-like.png);
}
.msgcontent-like.active i{
    background-image: url(../images/icon/msg-like-active.png);
}
.msgbottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.help-box{
    position:fixed;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    ;
}
.help-box::after{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}
.help-box img{
    width: 80%;
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
}



.hide{
	display: none !important;
}
.potato_loading{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* left: 50%; */
    z-index: 99999;
    /* top: 50%; */
    /* transform: translate(-50%, -50%);    border: 1px solid ghostwhite; */
}
.potato_loading_zhe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
    opacity: 1;
    background-color: rgb(166 157 139);
	transition: opacity 0.4s ease;
    background-image: linear-gradient(to right, #f1e1c7,#f8f1e6, #f1e1c7);
}
.potato_loading_zhe_tr{
	
}
.potato_loading3_zhe_tr{
	opacity: 0.8!important;
}
.potato_loading1{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
    pointer-events: none;
	height: 100%;
	z-index: 99999;
	transition: opacity 0.4s ease;
}
.potato_loading2{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
    pointer-events: none;
	opacity: 0;
	z-index: 99999;
	transition: opacity 0.4s ease;
}
.potato_loading1_Icon {
    width: 100px;
    height: 100px;
  margin: 0;
  background: transparent;
  border-top: 5px solid #871d17;
  border-right: 3px solid transparent;
  border-radius: 50%;
  -webkit-animation: 1s spin linear infinite;
  animation: 1s spin linear infinite;
}
.potato_loading1_title{
    font-size: 14px;
    color: #9FB5DE;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 0px;
    color: #333333;
    margin-top: 20px;
}
.potato_loading2_title{
    font-size: 14px;
    color: #9FB5DE;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 0px;
    color: #333333;
    margin-top: 20px;
}
.potato_loading3_title{
	display: inline-block;
	padding: 10px 14px;
	border-radius: 10px;
	background-color: rgba(0,0,0,0.8);
	color: #fff;
	max-width: 80%;
	line-height: 0.44rem;
}
@keyframes spin{
  from {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
  }
  to {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
  }
}


@font-face {
	font-family: 'Stempel-Garamond-W01-Roman';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/Stempel-Garamond-W01-Roman.woff') format('woff');
	}

	body, ul, table, form{
		margin:0;
		padding:0;
		overflow:hidden;
	}

	.ebooktitle{
		position: absolute;
		top: 100px;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: white;
		padding: 10px 20px;
		font-size: 30px;
		width: 100%;
		text-align: center;
        box-shadow: 2px 10px 50px #888888;
	}

	.animated{
		-webkit-transition:margin-left 0.2s ease-in-out;
		-moz-transition:margin-left 0.2s ease-in-out;
		-o-transition:margin-left 0.2s ease-in-out;
		-ms-transition:margin-left 0.2s ease-in-out;
		transition:margin-left 0.2s ease-in-out;
	}


	#book-zoom{
		-webkit-transition: -webkit-transform 1s;
		-moz-transition: -moz-transform 1s;
		-ms-transition: -ms-transform 1s;
		-o-transition: -o-transform 1s;
		transition: transform 1s;
	}

	.sj-book{
		width:960px;
		height:600px;
	}

	.sj-book h1{
		font-family: "Stempel-Garamond-W01-Roman";
		font-size: 38px;
		font-weight: lighter;
		margin: 20px 0;
		color: #333;
		-webkit-text-fill-color: #333;
		-webkit-text-stroke-color: white;
		-webkit-text-stroke-width: 0.005em;
	}

	.sj-book h2{
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		color:#444;
		font-size:16px;
		letter-spacing:2px;
		font-weight: 400;
	}

	.sj-book .book-content{
		font-family: "Stempel-Garamond-W01-Roman";
		font-size:16px;
        margin: 30px 40px;
        height: 500px;
        /* overflow: hidden; */
	}

	.sj-book blockquote{
		color:#586078;
		margin:10px 0;
		font-style:italic;
	}

	.sj-book blockquote:before{
		content: "\201C";
		color:#333D53;
		font-size:20px;
	}

    .page-arrow-lefttop{
        display: block;
        position:absolute;
        left:0px;
        top:-3px;
        background-image: url(../images/icon/fill.png);
        width: 40px;
        height: 40px;;
        transform: rotateZ(180deg);
    }

    .page-arrow-leftbottom{
        display: block;
        position:absolute;
        left:-3px;
        bottom:0px;
        background-image: url(../images/icon/fill.png);
        width: 40px;
        height: 40px;; 
        transform: rotateZ(-270deg); 
    }

    .page-arrow-righttop{
        display: block;
        position: absolute;
        right: -3px;
        top: 0px;
        background-image: url(../images/icon/fill.png);
        width: 40px;
        height: 40px;
        transform: rotateZ(-90deg);
    }

    .page-arrow-rightbottom{
        display: block;
        position: absolute;
        right: 0px;
        bottom: -3px;
        background-image: url(../images/icon/fill.png);
        width: 40px;
        height: 40px;
    }

	.sj-book blockquote:after{
		content: "\201D";
		color:#333D53;
		font-size:20px;
	}

	.sj-book cite{
		font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size:13px;
		font-weight:200;
		font-style:normal;
		color:#666;
	}

	.sj-book .book-content .center-pic{
		margin:0;
		text-indent:0;
		text-align:center;
	}

	.sj-book .zoom-this:hover{
		opacity:0.9;
		cursor:pointer;
	}

	.sj-book .book-content p{
        word-break: break-all;
        color: #63696f !important;
	}
	.sj-book .book-content span{
        word-break: break-all;
        color: #63696f !important ;
	}
	.sj-book .left-pic{
		float:left;
		margin-top:15px;
		margin-right:15px;
		margin-bottom:15px;
	}

	.animated{
		-webkit-transition:margin-left 0.2s ease-in-out;
		-moz-transition:margin-left 0.2s ease-in-out;
		-o-transition:margin-left 0.2s ease-in-out;
		-ms-transition:margin-left 0.2s ease-in-out;
		transition:margin-left 0.2s ease-in-out;
	}

	.sj-book .shadow{
		-webkit-transition: -webkit-box-shadow 0.5s;
		-moz-transition: -moz-box-shadow 0.5s;
		-o-transition: -webkit-box-shadow 0.5s;
		-ms-transition: -ms-box-shadow 0.5s;

		-webkit-box-shadow:0 0 10px #999;
		-moz-box-shadow:0 0 10px #999;
		-ms-box-shadow:0 0 10px #999;
		-o-box-shadow:0 0 10px #999;
		box-shadow:0 0 10px #999;
	}

	.sj-book .page{
		-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
		-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
		-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
		-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
		box-shadow:0 0 20px rgba(0,0,0,0.2);
	}

	.zoom-pic{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background-color:rgba(0,0,0,0.2);
		z-index:999;
	}

	.zoom-pic img{
		-webkit-box-shadow:0 0 20px #999;
		-moz-box-shadow:0 0 20px #999;
		-o-box-shadow:0 0 20px #999;
		-ms-box-shadow:0 0 20px #999;
		box-shadow:0 0 20px #999;
	}
    
	.sj-book .p1,
	.sj-book .p2,
	
	.sj-book .plast1, 
	.sj-book .plast2{
		background-color:white;
		background-image:url(../pics/book-covers.jpg) !important;
	}

	.sj-book .p1{
		background-position:0 0;
	}

	.sj-book .p1 .side{
		width:5px;
		height:600px;
		position:absolute;
		top:0;
		left:475px;

		background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #bbb), color-stop(0.5,  #ddd), color-stop(1,  #bbb));
		background-image:-webkit-linear-gradient(left, #bbb, #ddd, #bbb);
		background-image:-moz-linear-gradient(left, #bbb, #ddd, #bbb);
		background-image:-ms-linear-gradient(left, #bbb, #ddd, #bbb);
		background-image:-o-linear-gradient(left, #bbb, #ddd, #bbb);
		background-image:linear-gradient(left, #bbb, #ddd, #bbb);
		
		-webkit-transform:rotateY(-90deg);
		-moz-transform:rotateY(-90deg);
		-o-transform:rotateY(-90deg);
		-ms-transform:rotateY(-90deg);
		transform:rotateY(-90deg);

		-webkit-transform-origin:top right;
		-moz-transform-origin:top right;
		-o-transform-origin:top right;
		-ms-transform-origin:top right;
		transform-origin:top right;
		z-index:100000;

	}

	.sj-book-transform div[page="1"] > div, .sj-book-transform div[page="2"] > div{
		overflow:visible !important;
	}

	.sj-book .depth{
		background-image:url(../pics/pages-depth.png);
		position:absolute;
		top:7px;
		width:16px;
		height:590px;
	}

	.sj-book .front-side .depth{
		left:4px;
		background-position:0 0;
	}

	.sj-book .back-side .depth{
		right:4px;
		background-position:right 0;
	}


	.sj-book .p2{
		background-position:-480px 0 !important;
	}


	/* .sj-book .p111{
		background-position:-960px 0 !important;
	}

	.sj-book .p112{
		background-position:-1440px 0 !important;
	} */
    .sj-book .plast1{
		background-position:-960px 0 !important;
	}

	.sj-book .plast2{
		background-position:-1440px 0 !important;
	}

	.sj-book .hard{
		width:480px;
		height:600px;
		background-color:white;
		-webkit-box-shadow:none;
		-moz-box-shadow:none;
		-ms-box-shadow:none;
		box-shadow:none;
	}

	.sj-book .page-wrapper{
		-webkit-perspective:2000px;
		-moz-perspective: 2000px;
		-ms-perspective: 2000px;
		perspective: 2000px;
	}

	.sj-book .own-size{
		width:460px;
		height:582px;
		background-color:white;
		overflow:hidden;
	}

	.sj-book .even{
		background:-webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
		background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%);
		background-image:-moz-linear-gradient(left, #fff 95%, #dadada 100%);
		background-image:-ms-linear-gradient(left, #fff 95%, #dadada 100%);
		background-image:-o-linear-gradient(left, #fff 95%, #dadada 100%);
		background-image:linear-gradient(left, #fff 95%, #dadada 100%);
	}

	.sj-book .odd{
		background:-webkit-gradient(linear, right top, left top, color-stop(0.95, #fff), color-stop(1, #cacaca));
		background-image:-webkit-linear-gradient(right, #fff 95%, #cacaca 100%);
		background-image:-moz-linear-gradient(right, #fff 95%, #cacaca 100%);
		background-image:-ms-linear-gradient(right, #fff 95%, #cacaca 100%);
		background-image:-o-linear-gradient(right, #fff 95%, #cacaca 100%);
		background-image:linear-gradient(right, #fff 95%, #cacaca 100%);
	}

	.sj-book .loader{
		background-image:url(../pics/loader.gif);
		width:22px;
		height:22px;
		position:absolute;
		top:280px;
		left:219px;
	}

	.sj-book .page-number{
		color:#999;
		width:100%;
		bottom:5px;
		position:absolute;
		display:block;
		text-align: center;
		line-height:30px;
		font-size:11px;
	}

	.sj-book .table-contents{
		font-size:16px;
		width:300px;
		margin:80px auto;
		color:#ccc;
	}

	.sj-book .table-contents li{
		list-style:none;
		line-height:25px;
	}

	.sj-book .table-contents span{
		float:right;
	}

	.sj-book .table-contents a{
		float:left;
		width:100%;
		clear:both;
		text-decoration:none;
		color:#333;
		margin:2px 0;
		padding:0 10px;
	}

	.sj-book .table-contents a:hover{
		background:#CAD1EE;
		float:left;
		width:100%;
		clear:both;
		text-decoration:none;
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
		-o-border-radius:10px;
		-ms-border-radius:10px;
		border-radius:10px;
	}

	.sj-book .book-content .capital,
	.sj-book .book-content .no-indent{
		text-indent: 0;
	}

	.sj-book .capital:first-letter {
		display:block;
		float:left;
		font-size: 300%;
		line-height: 70%;
		margin-right: 6px;
		margin-top: 7px;
		margin-left:18px;
	}

	.ie8 .sj-book .even,
	.ie9 .sj-book .even{
		background-image:url(../pics/gradient-page-left.jpg);
		background-position:right top;
		background-repeat:repeat-y;
	}

	.ie8 .sj-book .odd,
	.ie9 .sj-book .odd{
		background-image:url(../pics/gradient-page-right.jpg);
		background-position:left top;
		background-repeat:repeat-y;
	}