@charset "utf-8";
    /* reset start */
    body {
        font-family: "微软雅黑";
        font-size: 18px;
        color: #BCBCBC;
    }
    .forclear:after{
        clear:both;
        content:'.';
        display:block;
        width: 0;
        height: 0;
        visibility:hidden;
    }
    body,
    p,
    ul,
    h1,
    h2 {
        margin: 0;
        padding: 0;
    }
    
    h1 {
        font-size: 48px;
        color: #010101;
    }
    
    h2 {
        color: #545454;
        font-size: 30px;
        font-weight: normal;
    }
    
    li {
        list-style: none;
    }
    
    a {
        text-decoration: none;
    }
    
    img {
        vertical-align: middle;
        max-width: 100%;
        width: auto;
        height: auto;
    }
    
    p {
        color: #bcbcbc;
        font-size: 18px;
        line-height: 36px;
        margin: 15px 0 0;
    }
    
    .header .head .jszq p {
        margin: 0;
    }
    /* reset end */
    /*global start*/
    
    .fl {
        float: left;
    }
    
    .fr {
        float: right;
    }
    
    .clearfix:after {
        content: '';
        display: block;
        clear: both;
    }
    
    .rj-darkBg {
        background-color: #F4F4F4;
    }
    
    .box {
        margin: 0 auto;
        width: 1100px;
        position: relative;
    }
    
    .m1 .content,
    .m2 .content,
    .m3 .content,
    .m4 .content {
        padding-left: 100px;
    }
    
    .cur_def {
        cursor: default;
    }
    /*global end*/
    /*m0 start*/
    
   .m0 {
       padding-top: 140px;
   }

   .content0{
       width: 1018px;
       margin:0 auto;
   }
   .toppage{
       position: relative;
       padding-left: 440px;
       margin-bottom: 136px;
   }
   .booksphone{
       position: absolute;
       top: 0;
       left: -6px;
   }
   .notice{
       color: #f00;
       font:100 18px/38px "microsoft yahei"
   }
   .toppage h3{
       font:100 60px/108px "microsoft yahei";
       padding-bottom:20px;
       border-bottom:1px dashed #c8c8c8;
       color: #000;
       margin-bottom: 34px;
   }
   .introduce{
       font:100 18px/30px "microsoft yahei";
       color: #d4d4d4;
       margin-bottom: 75px;
   }
   .btnander{
       padding-left: 6px;
   }
   .btnPage{
       width: 280px;
   }
   .forbtn{
       width: 280px;
       height: 68px;
       border:2px solid #ebb942;
       background-color: #ebaf1f;
       border-radius: 8px;
       margin-bottom:14px;
       padding: 0;
       position: relative;
       padding-left:85px;

   }
   .forbtn .icon{
       width: 50px;
       border-right:2px solid #e6a60b;
       height: 46px;
       display: block;
       background: url("../image/eBooks/ping.png") no-repeat 0 center;
       position: absolute;
       top: 10px;
       left: 16px;

   }
   #forand{
       background-color: #8ac602;
       border:2px solid #9ecd34;

   }
   #forand .icon{
       border-right:2px solid #81ba00;
       background: url("../image/eBooks/anzhuo.png") no-repeat 0 center;

   }
   #forwin{
       background-color: #00d6f1;
       border:2px solid #33d8ec;
   }
   #forwin .icon{
       border-right:2px solid #00b3c9;
       background: url("../image/eBooks/widows.png") no-repeat 0 center;

   }
   .btntext{
       width: 100%;

   }
   .btntext p{
       font:100 16px/20px "microsoft yahei";
       margin: 0;
       text-align: left;
       color: #fff;
   }
   .erweima{
       width: 238px;
       height: 238px;
   }
   .erweima img{
       width: 100%;
       height: 100%;
   }
   .howfind{
       width: 540px;
       height: 60px;
       margin:0 auto;
       font:100 28px/60px "microsoft yahei";
       color: #fff;
       text-align: center;
       background-color: #06a9f7;
       margin-bottom: 60px;
   }
   .bottompage{
       margin-bottom: 140px;
       position: relative;
       overflow: hidden;
   }
   .bottompage li{
       width: 286px;
       margin-right:80px;
       float: left;
   }
    .bottompage li:nth-child(3){
        margin-right: 0;
    }
    .bottompage p{
        color: #000;
        font:100 16px/16px "microsoft yahei";
        position: relative;
        margin-bottom: 28px;
    }
    .bottompage p span{
        color: #bcbcbc;
        position: absolute;
        top: 0;
        left: 6px;
    }
    .pagebody{
        width: 286px;
        margin:0 auto;
    }
    .btnlr{
        position: absolute;
        height: 70px;
        left: 0;
        top: 50%;
        display: none;
        width: 100%;
    }
    .btnlr div{
        width: 21px;
        height: 35px;
    }
    /*m0 end*/
    /*m1 start*/
    
    .m1 {
        padding-bottom: 40px;
    }
    
    .m1 .content {
        float: left;
        margin: 137px 0 0 20px;
        background: url(http://image.mypep.cn/book/tjjy-index-images/n1.jpg) no-repeat;
    }
    
    .m1 h2 {
        margin-bottom: 40px;
    }
    
    .m1 p {
        width: 374px;
    }
    
    .m1 .img {
        float: right;
        margin: 56px 0 0 0;
    }
    /*m1 end*/
    /*m2 start*/
    
    .m2 {
        padding-bottom: 40px;
    }
    
    .m2 .content {
        float: right;
        margin-top: 140px;
        margin-right: 180px;
        background: url(http://image.mypep.cn/book/tjjy-index-images/n2.jpg) no-repeat;
    }
    
    .m2 p {
        width: 274px;
    }
    
    .m2 .img {
        float: left;
        margin-top: 83px;
    }
    /*.m2 .content {float:left; }*/
    /*m2 end*/
    /*m3 start*/
    
    .m3 {
        padding-bottom: 100px;
    }
    
    .m3 .content {
        float: left;
        margin: 100px 0 0 20px;
        background: url(http://image.mypep.cn/book/tjjy-index-images/n3.jpg) no-repeat;
    }
    
    .m3 p {
        width: 316px;
    }
    
    .m3 .img {
        float: right;
        margin: 56px 0 0 70px;
    }
    /*m3 end*/
    /*m4 start*/
    
    .m4 {
        padding-bottom: 70px;
    }
    
    .m4 .content {
        float: right;
        margin: 95px 37px 0 20px;
        background: url(http://image.mypep.cn/book/tjjy-index-images/n4.jpg) no-repeat;
    }
    
    .m4 p {
        width: 420px;
    }
    
    .m4 .img {
        float: left;
        margin-top: 56px;
    }
    
    .m4 .clear {
        float: right;
        margin: 70px 90px 0 0;
    }
    
    .downArea img,
    .clear img {
        float: left;
    }
    
    .m4 .downArea {
        float: right;
        margin-right: 0;
    }
    /*m4 end*/
    /*ft*/
    
    .ft {
        padding: 20px 70px 20px 0;
    }
    
    .bottom {
        float: right;
        width: 50%;
        box-sizing: border-box;
        text-align: left;
        line-height: 24px;
        font-size: 12px;
        color: #898989;
    }
    /*ft end*/
    /*downArea start*/
    
    .downArea {
        float: right;
        margin-left: 22px;
    }
    
    .downArea ul {
        float: right;
        padding-left: 22px;
    }
    
    .downArea li {
        width: 194px;
        height: 44px;
        margin-bottom: 10px;
        font-size: 12px;
    }
    
    .downArea li a {
        display: block;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
    }
    
    .d_w a {
        background-image: url(http://image.mypep.cn/book/tjjy-index-images/down.png);
        background-position: 0 0;
    }
    
    .d_a a {
        background-image: url(../image/eBooks/android.png);
    }
    
    .d_i a {
        background-image: url(../image/eBooks/ios1.png);
    }
    
    .downArea .d_t {
        height: 83px;
    }
    
    .d_t a {
        background-image: url(../image/eBooks/instructions.png);
        cursor: pointer;
    }
    /*downArea end*/
    @media screen and (max-width: 1038px) {
        .content0{
            width: 100%;
        }
        .toppage{
            padding-left: 0;
        }
        .booksphone{
            position: static;
            margin: 0 auto;
            width: 344px;
        }
        .textbody{
            width: 578px;
            margin:0 auto;
        }
        .notice,.toppage h3{
            text-align: center;
        }
        .bottompage li{
            margin: 0;
            width: 33.3%;
        }
        .m0{
            padding-top: 70px;
        }
        .toppage h3{
            margin-bottom: 0;
            line-height: 80px;
        }
        .introduce{
            margin-bottom: 35px;
        }
        .btnander{
            margin-bottom: 20px;
        }
    }

    @media screen and (max-width: 1100px) {
        .m1,
        .m2,
        .m3,
        .m4 {
            overflow: hidden;
        }
        .box {
            width: 100%;
        }
        .m0 .box {
            padding-bottom: 40%;
        }
        .m0 .content,
        .m1 .content,
        .m2 .content,
        .m3 .content,
        .m4 .content {
            margin-top: 55px;
            width: 90%;
            box-sizing: border-box;
            margin-left: auto;
            margin-right: auto;
            float: none;
            position: relative;
        }
        .m0 .content {
            margin-top: 70px;
            width: 560px;
        }
        .m0 .content h1 {
            text-align: center;
            padding-top: 24px;
        }
        .m0 .content h1 img {
            top: 12px;
        }
        .m1 p,
        .m2 p,
        .m3 p,
        .m4 p {
            width: auto;
            margin-right: 100px;
        }
        .m0 .img,
        .m1 .img,
        .m2 .img,
        .m3 .img,
        .m4 .img {
            float: none;
            width: 70%;
            margin-left: auto;
            margin-right: auto;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        .m0 .img {
            left: 50%;
            margin-left: -35%;
        }
        .m1 .img,
        .m2 .img,
        .m3 .img,
        .m4 .img {
            max-width: 520px;
            margin-top: 36px;
        }
        .m4 img {
            vertical-align: top;
        }
        .m4 .clear {
            float: none;
            margin-left: 100px;
            margin-top: 0;
            padding-top: 0;
            clear: both;
            width: 80%;
            margin-left: auto;
            margin-right: auto;
        }
        .m4 .clear:after {
            content: '';
            display: block;
            clear: both;
        }
        .downArea {
            float: none;
            margin-left: 0;
        }
        .downArea ul {
            display: inline-block;
            float: none;
        }
        .downArea img {
            vertical-align: top;
        }
        .m4 .downArea {
            float: none;
            display: inline-block;
            padding-left: 22px;
        }
        .bottom {
            width: 80%;
            float: none;
            margin: auto;
            margin-right: auto;
        }
    }
    @media screen and (max-width: 872px) {
        .anibody{
            position: absolute;
            left: 0;
            top: 0;
        }
        .bottompage{
            height: 634px;
        }
        .btnlr{
            display: block;
        }

    }
    @media screen and (max-width: 650px) {
        .header .head {
            padding: 0 8px;
        }
        .header .head .menu {
            width: 46px;
        }
        .header .head .jszq p {
            border-left: none;
            padding-left: 0;
        }
    }
    
    @media screen and (max-width: 600px) {
        /*body {background: red;}*/
        html,
        body {
            width: 100%;
        }
        .m3 {
            padding-bottom: 40px;
        }
        .m4 {
            padding-bottom: 35px;
        }
        .m0 .content {
            padding-top: 24px;
            width: 100%;
            margin-top: 15px;
        }
        .m0 .content h1 img {
            top: 4px;
            width: 70px;
        }
        .m1 .content,
        .m2 .content,
        .m3 .content,
        .m4 .content {
            padding-left: 0;
            background-size: 40px 40px;
        }
        h1 {
            font-size: 30px;
            width: 80%;
            margin-left: auto;
            margin-right: auto;
        }
        .m0 .line {
            width: 100%;
            margin-top: 0;
        }
        h2 {
            font-size: 16px;
            line-height: 22px;
        }
        .m1 h2,
        .m2 h2,
        .m3 h2,
        .m4 h2 {
            padding-left: 50px;
            margin-bottom: 16px;
        }
        .m0 p {
            box-sizing: border-box;
            width: 90%;
            margin-left: auto;
            margin-right: auto;
        }
        .m1 p,
        .m2 p,
        .m3 p,
        .m4 p {
            margin-right: 0;
            font-size: 14px;
            line-height: 26px;
        }
        .m4 .clear {
            width: 100%;
            margin-left: 0;
        }
        .m4 .clear > img {
            margin-left: auto;
            margin-right: auto;
            display: block;
            margin-bottom: 35px;
        }
        .downArea>img {
            margin-left: auto;
            margin-right: auto;
            display: block;
            margin-bottom: 15px;
            width: 40%;
        }
        .downArea ul {
            margin-top: 35px;
            display: block;
            padding-left: 0;
        }
        .downArea img,
        .clear img {
            float: none;
        }
        .downArea li {
            margin-left: auto;
            margin-right: auto;
        }
        .m0 .downArea {
            margin-top: 30px;
        }
        .m4 .downArea {
            display: block;
            margin-left: auto;
            margin-right: auto;
            padding-left: 0;
            width: auto;
            width: 194px;
        }
        .ft {
            padding-right: 0;
        }
        .ft .bottom {
            width: 90%;
            margin: 0 5%;
        }
    }
    @media screen and (max-width: 596px) {
        .textbody,.howfind{
            width: 100%;

        }
        .btnPage,.erweima{
            float: none;
            margin:0 auto;
        }
        .erweima{
            padding-top: 30px;
            padding-bottom: 30px;
            height: 298px;;
        }
        .howfind{
            font: 100 18px/60px "microsoft yahei";
        }

    }
    @media screen and (max-width: 450px) {
        .m0 .content h1{
            text-align: left;
        }
        .m0 .content h1 img {
            top: 12px;
            width: 56px;
        }
        .booksphone{
            width: 288px;
        }
        .booksphone img{
            width: 100%;
        }
    }
    @media screen and (max-width: 370px) {
        .notice{
            font: 100 16px/38px "microsoft yahei"
        }
    }
        .site_top,
    .site_bot {
        font: 12px/1.5 tahoma, arial, \5b8b\4f53;
        color: #333;
    }
    
    .site_top p,
    .site_bot p {
        color: #666;
        font-size: 12px;
        line-height: normal;
        margin: 0;
    }
    
    .site_bot p,
    .site_bot li {
        line-height: 30px;
    }
    
    .header .head .menu .menubgc .sdg {
        background: rgba(0, 0, 0, 0) url("../image/studentimg/arrow.png") no-repeat scroll center center;
        height: 100%;
        width: 100%;
    }
    
    .mescontent h4 {
        color: rgba(0, 0, 0, 0.87);
    }

.warning{
    color: red;
    text-align: center;
}