@import url(reset.css);
/*横版*/
@media (orientation:landscape){
    @media only screen and (max-width:1920px){
        #pc{
            display: block;
        }
        #mb{
            display: none;
        }
        header .logo{
            width: 260px;
            position: absolute;
            top: 25px;
            right: 50px;
        }
        header .back{
            position: absolute;
            top: 33px;
            left: 65px;
            width: 175px;
            height: 48px;
            background-color: #c8ff4c;
            border: none;
            border-radius: 8px;
            font-size: 20px;
            color: #000;
            font-weight: bold;
        }
        header .back:hover{
            background-color: #abff2c;
        }
        header .bg{
            width: 100%;
        }
        body{
            background: url("/assets/images/image/book-background.jpg") no-repeat;
            background-size: 100% auto;
            background-color: #f0f0f0;
            background-position: 0 100%;
        }
        section{
            width: 100%;
            height: auto;
        }

        section .content{
            position: relative;
            left: calc( (100% - 1200px) / 2);
            top: -111px;
            width: 1200px;
        }
        section .content-logo{
            position: absolute;
            margin-top: -4vh;
            left: 0;
            width: 100%;
            text-align: center;
        }
        section .content-logo >img{
            height: 10vh;
        }
        section .content .info{
            width: 1200px;
            border: 2px solid #c6dc40;
            border-radius:  55px;
            background-color: #fff;
        }
        #new-footer {
            width: 100%;
            height: 340px;
            background-color: #000;
            color: #a9bc8c;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 15%;
        }
        #new-footer>div {
            width: 70vh;
            margin: 0 auto;
            font-size: 1.5vh;
        }
        #new-footer>img{
            height: 5vh;
        }
        .text-hidden{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            /*-webkit-line-clamp: 4;*/
            /*-webkit-box-orient: vertical;*/
        }
        .plat-links {
            position: fixed;
            right: 20px;
            /*top: 541px;*/
            bottom: 200px;
            z-index: 99;
        }
        .plat-links a {
            position: absolute;
            /* background-color: red; */
            color: #000;
            width: 100px;
            right: 80px;
        }
        .plat-links a.weibo {
            top: 51px;
        }
        .plat-links a.weixin {
            top: 132px;
        }
        .plat-links a.weixin1 {
            top: 211px;
        }
        .plat-links a.img {
            right: 53px;
            top: 348px;
            width: 116px;
            height: 115px;
            background: url('/assets/images/image/code.png') no-repeat;
            background-size: 100% 100%;
            /* background-color: red; */
        }
        .plat-links .nav-line{
            width: 2px;
            height: 22px;
            display:none;
            margin: 0 auto;
            background-color: #70b62e;
        }
        .plat-links .up{
            display:none;
            position: absolute;
            top: 542px;
            right: 85.5px;
        }
        .info .content-type{
            margin: 0 auto;
            margin-top: 105px;
            padding-bottom: 44px;
            width: 952px;
        }
        .hr{
            width: 1111px;
            height: 1px;
            margin: 0 auto;
            background-color:#dcdcdc;
        }
        .info .content-type ul{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
        }
        .title-active{
            background: url("/assets/images/image/title-active.png") no-repeat;
            background-size: 100% 100%;
        }
        .info .content-type ul div li {
            width: 21vh;
            height: 6vh;
            text-align: center;
            line-height: 6vh;
            cursor: pointer;
            border-radius: 3vh;
            font-size: 2.5vh;
            color: #fff;
        }
        .info .content-type ul div .title-no{
            background: url("/assets/images/image/title-no.png") no-repeat;
            background-size: 100% 100%;
        }
        .info .content-type ul div .title-no:hover{
            background: url("/assets/images/image/title-active.png") no-repeat;
            background-size: 100% 100%;
        }
        .item-desc{
            display:none;
            position: fixed;
            height: auto;
            width: 20vw;
            background: url('/assets/images/content/4/item-back-2.png') no-repeat;
            background-size: 100% 100%;
            padding: 1vh;
            top: 0;
            left: 0;
            z-index: 15;
        }
        .item-desc>.icon{
            width: 10vh;
            background: url('/assets/images/content/4/item-back-1.png') no-repeat;
            background-size: 100% 100%;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            height: 15vh;
            padding: 1vh;
            justify-content: center;
            align-items: center;
        }
        .item-desc>.icon>img{
            max-width: 100%;
            max-height: 100%;
        }
        .item-desc>.detail{
            flex: 1;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            padding-bottom: 2vh;
            padding-left: 2vh;
        }
        .item-desc>.detail>h3{
            font-weight: bold;
            font-size:2vh;
        }
        .item-desc>.detail>i{
            height: 0.5vh;
            width: 3vh;
            background-color: #aac944;
            border-radius: 1vh;
            margin-top: 0.5vh;
            margin-bottom: 1vh;
        }
        .item-desc>.detail>.text{
            flex: 1;
            /*text-overflow: ellipsis;*/
            /*display: -webkit-box;*/
            /*-webkit-line-clamp: 3;*/
            /*-webkit-box-orient: vertical;*/
        }
        .content-book-type{
            margin: 35px 89px 44px 150px;
            position: relative;
            display:flex;
        }
        .content-book-type .search{
            position: absolute;
            right: 0;
            height: auto;
            top: 0;
            width: 25vh;
        }
        .content-book-type .list{
            position: absolute;
            left: 0;
            height: auto;
            top: -5px;
            width: 70vh;
        }
        .content-book-type .list::-webkit-scrollbar{
            height: 0.5vh;
            border-radius: 0.5vh;
            background-color: #626262;
        }
        .content-book-type .list::-webkit-scrollbar-thumb{
            background-color: #32b16c;
        }
        .content-book-type .search input{
            width: 86%;
            height: 35px;
            outline: none;
            border: 1px solid #b5b5b5;
            border-radius: 15px;
            padding-left: 15px;
            z-index:0;
        }
        .content-book-type .search button{
            position: absolute;
            height: 35px;
            width: 20%;
            right: 0;
            z-index: 1;
            background-color: #8fb2a8;
            text-align: center;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }
        .content-book-type .search button>img{
            position: absolute;
            right: 10px;
            top: 2px;
            width: auto;
            height: 30px;
        }
        .content-book-type ul{
            display: inline-flex;
            width: 100%;
            flex-wrap: wrap;
        }
        .content-book-type ul li{
            font-size: 1.5vh;
            color: #232323;
            margin-right: 1vh;
            width: 6vh;
            margin-bottom: 5px;
            text-align: center;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            cursor: pointer;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .content-book-type ul li:hover i{
            display: block;
        }
        .content-book-type ul li span{
            position: relative;
            z-index: 1;
        }
        .content-book-type ul li i{
            width: 100%;
            height: 0.5vh;
            background-color: #32b16c;
            position: relative;
            display: none;
            z-index: 0;
            margin-top: -0.5vh;
        }
        .content-book-type ul li.active{
            /*border-bottom: 6px solid #32b16c;*/
        }
        .content-book-type ul li.active i{
            display: block;
        }
        .content-list{
            margin: 0 89px 64px 150px;
            position: relative;
        }
        .content-list ul{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
        }
        .content-list ul li{
            position: relative;
            width: 10vh;
            cursor: pointer;
            height: 10vh;
            margin: 1vh;
        }
        .content-list ul li>img{
            width: 100%;
            height: 100%;
            border-radius:50%;
            border: 0.5vh solid #32b16c;
        }
        .description{
            display: none;
        }
        .content-list ul li:hover .description{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }
        .content-list ul li:hover .item-desc{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }
        .content-list ul .description{
            background-color: #36a252;
            position: absolute;
            width: 100%;
            text-align: center;
            height: 100%;
            opacity: 0.8;
            border-radius: 50%;
            border: 2px solid #32b16c;
            color: #fff;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .content-list ul .description div{
            font-size: 16px;
        }
        .content-list .more{
            margin-top: 77px;
            text-align: center;
            font-size: 16px;
            color: #8faa3d;
            font-family: ALBR85W;
        }
        .content-list .more div{
            margin-bottom: 14px;
        }
        .content-list ul::-webkit-scrollbar {
            width: 7px;
        }
        .content-list ul::-webkit-scrollbar-thumb {
            background: #32b16c;
        }

        .content-list ul::-webkit-scrollbar-track {
            background: #626262;
        }
        .content-article{
            width: 900px;
            margin: 0 auto;
        }
        .content-article #back img{
            position: relative;
            cursor: pointer;
            margin-top: 30px;
        }
        .content-article .pic-introduce{
            padding: 10px;
            position: relative;
            height: 440px;
        }
        .pic-flex-row{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }
        .pic-flex-column{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
        }
        .content-article .pic-book{
            width: auto;
            position: relative;
            height: 100%;
        }
        .content-article .pic-book img:first-child{
            position: absolute;
            z-index: 10;
            width: 420px;
            height: 420px;
        }
        .content-article .pic-book .book-seat{
            position: absolute;
            top: 198px;
            left: 20px;
        }
        .content-article .pic-info{
            position: absolute;
            right: 84px;
            top:  57px;
            width: 300px;
        }
        .pic-info .division{
            width: 11px;
            height: 50px;
            border-radius: 10px;
            margin-right: 20px;
            margin-top: 5px;
            background-color: #90b13a;
        }
        .pic-info .book-name{
            font-size: 41px;
        }
        .pic-info .book-keyword{
            margin-top: 60px;
        }
        .keyword-logo{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .pic-info .book-keyword > div{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            margin-bottom: 11px;
        }
        .pic-info .book-keyword img{
            margin-right: 15px;
        }
        .progress{
            display: inline-block;
            width: 230px;
            height: 10px;
            border-radius: 1vh;
            position: relative;
            background-color: #313131;
        }
        .progress em{
            display: block;
            width: 100px;
            height: 10px;
            position: absolute;
            border-radius: 1vh;
            background-color: #90b13a;
        }
        #new-footer {
            width: 100%;
            height: 200px;
            background-color: #000;
            color: #a9bc8c;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 19%;
        }
        #new-footer>div {
            width: 780px;
            margin: 0 auto;
            font-size: 12px;
        }
        #new-footer div div {
            /*padding-top: 27px;*/
            /*padding-bottom: 16px;*/
        }
        .article-introduce{
            font-size: 13px;
            margin-top: 20px;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            margin-bottom: 10vh;
        }
        .article-introduce button{
            width: 130px;
            height: 35px;
            cursor: default;
            border-radius: 20px;
            margin-bottom: 13px;
            color: #90b13a;
            background: transparent;
            border: 2px solid #90b13a;
        }
        .article-introduce .attack{
            width: 431px;
            margin-right: 85px;
        }
        .show {
            height: auto;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
        }
        .common-attack>div{
            padding-left: 1vh;
        }
        .ultimate-attack>div{
            padding-left: 1vh;
        }
        .show> button{
            width: 130px;
            height: 35px;
            cursor: default;
            border-radius: 20px;
            margin-bottom: 13px;
            color: #90b13a;
            border: 2px solid #90b13a;
            background:transparent;
        }
        .show ul{
            margin-top: 10px;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }
        .show ul li{
            margin-right: 5px;
        }
    }
    @media only screen and (min-width:1921px){
        #pc{
            display: block;
        }
        #mb{
            display: none;
        }
        header .logo{
            width: 25vh;
            position: absolute;
            top: 5vh;
            right: 10vh;
        }
        header .back{
            position: absolute;
            top: 6vh;
            left: 7vh;
            width: 15vh;
            height: 4vh;
            background-color: #c8ff4c;
            border: none;
            border-radius: 1vh;
            font-size: 1.5vh;
            color: #000;
            font-weight: bold;
        }
        header .bg{
            width: 100%;
        }
        body{
            background: url("/assets/images/image/book-background.jpg") no-repeat;
            background-size: 100% auto;
            background-color: #f0f0f0;
            background-position: 0 100%;
        }
        section{
            width: 100%;
            height: auto;
        }

        section .content{
            position: relative;
            left: calc( (100% - 1200px) / 2);
            top: -111px;
            width: 1200px;
        }
        section .content-logo{
            position: absolute;
            margin-top: -51px;
            width: 100%;
            text-align: center;
        }
        section .content .info{
            /* width: 95vh; */
            width: 1200px;
            height:auto;
            border: 2px solid #c6dc40;
            border-radius: 5vh;
            background-color: #fff;
        }
        .plat-links {
            position: fixed;
            right: 20px;
            top: 541px;
        }
        .plat-links a {
            position: absolute;
            /* background-color: red; */
            color: #000;
            width: 100px;
            right: 74px;
        }
        .plat-links a.weibo {
            top: 51px;
        }
        .plat-links a.weixin {
            top: 132px;
        }
        .plat-links a.weixin1 {
            top: 211px;
        }
        .plat-links a.img {
            right: 53px;
            top: 348px;
            width: 116px;
            height: 115px;
            background: url('/assets/images/image/code.png') no-repeat;
            background-size: 100% 100%;
            /* background-color: red; */
        }
        .plat-links .nav-line{
            width: 2px;
            height: 22px;
            display:none;
            margin: 0 auto;
            background-color: #70b62e;
        }
        .plat-links .up{
            position: absolute;
            top: 542px;
            display:none;
            right: 85.5px;
        }
        .info .content-type{
            margin: 0 auto;
            margin-top: 9vh;
            padding-bottom: 4vh;
            width: 90%;
        }
        .hr{
            /* width: 1111px; */
            width: 100vh;
            height: 1px;
            margin: 0 auto;
            background-color:#dcdcdc;
        }
        .info .content-type ul{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
        }
        .title-active{
            background: url("/assets/images/image/title-active.png") no-repeat;
            background-size: 100% 100%;
        }
        .info .content-type ul div li {
            width: 20vh;
            cursor: pointer;
            height: 6vh;
            text-align: center;
            line-height: 6vh;
            border-radius: 3vh;
            font-size: 2.5vh;
            color: #fff;
        }
        .info .content-type ul div .title-no{
            background: url("/assets/images/image/title-no.png") no-repeat;
            background-size: 100% 100%;
        }
        .info .content-type ul div .title-no:hover{
            background: url("/assets/images/image/title-active.png") no-repeat;
            background-size: 100% 100%;
        }
        .content-book-type{
            margin: 35px 89px 44px 150px;
            position: relative;
        }
        .content-book-type .search{
            position: absolute;
            right: 0;
            height: auto;
            top: 0;
            width: 25vh;
        }
        .content-book-type .list{
            position: absolute;
            left: 0;
            height: auto;
            top: -10px;
            width: 70vh;
        }
        .content-book-type .list::-webkit-scrollbar{
            height: 0.5vh;
            border-radius: 0.5vh;
            background-color: #626262;
        }
        .content-book-type .list::-webkit-scrollbar-thumb{
            background-color: #32b16c;
        }
        .content-book-type .search input{
            /* width: 20vh;
            height: 3vh;
            outline: none;
            border: 1px solid #b5b5b5;
            border-radius: 1vh;
            padding-left: 1vh; */
            width: 86%;
            height: 35px;
            outline: none;
            border: 1px solid #b5b5b5;
            border-radius: 15px;
            padding-left: 15px;
        }
        .content-book-type .search button{
            position: absolute;
            height: 35px;
            width: 20%;
            right: 0;
            background-color: #8fb2a8;
            text-align: center;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }
        .content-book-type ul{
            display: inline-flex;
            flex-wrap: wrap;
        }
        .content-book-type ul li{
            font-size: 1.5vh;
            color: #232323;
            margin-right: 1vh;
            cursor: pointer;
            height: 2.5vh;
            margin-bottom: 5px;
            width: 6vh;
            text-align: center;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .content-book-type ul li span{
            position: relative;
            z-index: 1;
        }
        .content-book-type ul li i{
            display: none;
            width: 100%;
            height: 0.5vh;
            background-color: #32b16c;
            position: relative;
            z-index: 0;
            margin-top: -0.8vh;
        }
        .content-book-type ul li:hover i{
            display: block;
        }
        .content-book-type ul li.active i{
            display: block;
        }
        .content-list{
            margin: 8vh 89px 64px 150px;
            position: relative;
        }
        .content-list ul{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
        }
        .content-list ul li{
            position: relative;
            width: 10vh;
            cursor: pointer;
            height: 10vh;
            margin: 1vh;
        }
        .content-list ul li>img{
            width: 100%;
            height: 100%;
            border-radius:50%;
            border: 0.5vh solid #32b16c;
        }
        .description{
            display: none;
        }
        .content-list ul li:hover .description{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }
        .content-list ul .description{
            background-color: #36a252;
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.8;
            text-align: center;
            border-radius: 50%;
            border: 2px solid #32b16c;
            flex-direction: column;
            justify-content:center;
            align-items: center;
            color: #fff;
        }
        .item-desc{
            display:none;
            position: fixed;
            height: auto;
            width: 20vw;
            background: url('/assets/images/content/4/item-back-2.png') no-repeat;
            background-size: 100% 100%;
            padding: 1vh;
            top: 0;
            left: 0;
            z-index: 15;
        }
        .item-desc>.icon{
            width: 10vh;
            background: url('/assets/images/content/4/item-back-1.png') no-repeat;
            background-size: 100% 100%;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            height: 15vh;
            padding: 1vh;
            justify-content: center;
            align-items: center;
        }
        .item-desc>.icon>img{
            max-width: 100%;
            max-height: 100%;
        }
        .item-desc>.detail{
            flex: 1;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            padding-bottom: 2vh;
            padding-left: 2vh;
        }
        .item-desc>.detail>h3{
            font-weight: bold;
            font-size:2vh;
        }
        .item-desc>.detail>i{
            height: 0.5vh;
            width: 3vh;
            background-color: #aac944;
            border-radius: 1vh;
            margin-top: 0.5vh;
            margin-bottom: 1vh;
        }
        .item-desc>.detail>.text{
            flex: 1;
            /*text-overflow: ellipsis;*/
            /*display: -webkit-box;*/
            /*-webkit-line-clamp: 3;*/
            /*-webkit-box-orient: vertical;*/
        }
        .content-list ul .description div{
            font-size: 16px;
        }
        .content-list .more{
            margin-top: 4vh;
            text-align: center;
            font-size: 2vh;
            color: #8faa3d;
            font-family: ALBR85W;
        }
        .content-list .more div{
            margin-bottom: 14px;
        }
        .content-list ul::-webkit-scrollbar {
            width: 7px;
        }
        .content-list ul::-webkit-scrollbar-thumb {
            background: #32b16c;
        }

        .content-list ul::-webkit-scrollbar-track {
            background: #626262;
        }
        .content-article{
            width: 75vh;
            margin: 0 auto;
        }
        .content-article .back img{
            position: absolute;
        }
        .content-article .pic-introduce{
            padding: 2vh;
            position: relative;
            height: 25vh;
        }
        .content-article .pic-book img:first-child{
            position: absolute;
            z-index: 10;
            min-height: 16vh;
        }
        .content-article .pic-book .book-seat{
            position: absolute;
            top: 15vh;
        }
        .content-article .pic-info{
            position: absolute;
            right: 8vh;
            top: 5vh;
            width: 22vh;
        }
        .pic-introduce .pic-book{
            height: 100%;
            width: 30vh;
            padding: 0 5vh;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .pic-info .division{
            width: 11px;
            height: 56px;
            border-radius: 10px;
            margin-right: 15px;
            background-color: #90b13a;
        }
        .pic-info .book-name{
            font-size: 41px;
        }
        .pic-info .book-keyword{
            margin-top: 3vh;
        }
        .keyword-logo{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .pic-info .book-keyword > div{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            margin-bottom: 1vh;
            font-size: 1.2vh;
        }
        .pic-info .book-keyword img{
            margin-right: 1vh;
            width: 3vh;
        }
        .progress{
            display: inline-block;
            border-radius: 1vh;
            width: 230px;
            height: 10px;
            position: relative;
            background-color: #313131;
        }
        .progress em{
            display: block;
            width: 100px;
            height: 10px;
            position: absolute;
            border-radius: 1vh;
            background-color: #90b13a;
        }
        #new-footer {
            width: 100%;
            height: 15vh;
            background-color: #000;
            color: #a9bc8c;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 15%;
        }
        #new-footer>div {
            width: 70vh;
            margin: 0 auto;
            font-size: 1.5vh;
        }
        #new-footer>img{
            height: 5vh;
        }
        .article-introduce{
            font-size: 1vh;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }
        .article-introduce button{
            width: 10vh;
            height: 3vh;
            background-color: #90b13a;
            border-radius: 1vh;
            color: white;
            margin-bottom: 1vh;
            margin-top: 3vh;
            font-size: 1.5vh;
        }
        .article-introduce .attack{
            width: 431px;
            margin-right: 85px;
        }
        .show ul{
            margin-top: 10px;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }
        .show ul li{
            margin-right: 5px;
        }
    }
}
@media (orientation:portrait){
    body{
        height: 100%;
    }
    #pc{
        display: none;
    }
    #mb{
        display: block;
    }
    #nav{
        position:fixed;
        width: 100%;
        background-color: #a2ea4f;
        font-size:1.5vh;
        font-weight: bold;
        z-index: 15;
    }
    #nav> div{
        display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        height: 100%;
        justify-content: center;
        align-items:center;
    }
    #nav> div .icon{
        width: 4vh;
        height: 4vh;
        margin-left: 1vh;
        margin-top: 1vh;
    }
    #nav> div a{
        width: 10vh;
        padding: 5px;
        margin: 12px 5px;
        text-align: center;
        color: #0a0a0a;
        font-weight: bold;
    }
    header{
        padding-top: 51px;
        position: relative;
    }
    header .back{
        /*display: none;*/
        position: absolute;
        top: 30%;
        left: 4%;
        width: 20%;
    }
    header .logo{
        position: absolute;
        width: 21vh;
        top: 7vh;
        left: 4vh;
    }
    header .bg{
        width: 100%;
    }
    header:after{
        content: '';
        display: block;
        height: 9px;
        width: 100%;
        background: #b4d202;
    }
    section{
        background: url("/assets/images/image/mb-book-background.png") no-repeat;
        background-size: 100% auto;
        background-position: bottom;
    }
    .content{
        position: relative;
        width: 90%;
        margin: 0 auto;
        min-height: 58vh;
        padding-bottom: 1vh;
    }
    .book-header-logo{
        position: relative;
        top: -4vh;
        display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        justify-content: center;
    }
    .book-header-logo img{
        width: 50%;
    }
    .type-list{
        margin-top: -1vh;
    }
    .type-list ul{
        display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        justify-content: space-between;
    }

    .type-list ul div li{
        /*width: 23%;*/
        height: 3vh;
        line-height: 3vh;
        text-align: center;
        /*background-color: #10b485;*/
        background: url('/assets/images/image/title-no.png') no-repeat;
        background-size: 100% 100%;
        color: #fff;
        border-radius: 20px;
        font-size:1vh;
    }
    .type-list ul div .active{
        /*width: 23%;*/
        height: 3vh;
        line-height: 3vh;
        text-align: center;
        /*background-color: #10b485;*/
        background: url('/assets/images/image/title-active.png') no-repeat;
        background-size: 100% 100%;
        color: #fff;
        border-radius: 20px;
        font-size:1vh;
    }
    .search{
        margin-top: 2vh;
        display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
    }
    .search input{
        width: 100%;
        outline: none;
        height: 27px;
        padding-left: 10px;
        border: 1px solid #b5b5b5;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    .search button{
        background-color: #8fb2a8;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    .book-type-list{
        margin-top: 2vh;
    }
    .book-type-list ul{
        display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        flex-wrap: wrap;
    }
    .book-type-list ul li{
        text-align: center;
        margin: 0 0.5vh;
    }
    .book-type-list ul li:hover:after{
        content: '';
        display: block;
        height: 2px;
        width: 100%;
        background-color: #32b16c;
    }
    .book-type-list ul li.active:after{
        content: '';
        display: block;
        height: 4px;
        margin-top: -1vh;
        width: 100%;
        background-color: #32b16c;
    }
    .book-list .list{
        display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        flex-wrap: wrap;
    }
    .book-list .list li{
        font-size: 12px;
        width: 25%;
        padding: 1vh 0px;
        display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .item-desc{
        width: 100%;
        padding: 2vh 2vh 2vh 0vh;
        height: auto;
        display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        background: url('/assets/images/content/4/item-back-2.png') no-repeat;
        background-size: 100% 100%;
    }
    .item-desc>.icon{
        width: 16vh;
        display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        height: 100%;
        align-items: center q;
    }
    .item-desc>.icon>img{
        max-width: 100%;
        max-height: 100%;
    }
    .item-desc>.detail{
        flex: 1;
        display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        flex-direction: column;
        padding-bottom: 2vh;
    }
    .item-desc>.detail>h3{
        font-weight: bold;
        font-size:2vh;
    }
    .item-desc>.detail>i{
        height: 0.5vh;
        width: 3vh;
        background-color: #aac944;
        border-radius: 1vh;
        margin-top: 0.5vh;
        margin-bottom: 1vh;
    }
    .item-desc>.detail>.text{
        flex: 1;
    }
    .book-list .list img{
        width: 80%;
        border: 2px solid #32b16c;
        border-radius: 50%;
    }
    .book-description .book-pic-info{
        display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        margin-right: 6%;
        position: relative;
    }
    .book-pic-info .show{
        flex: 1;
        display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        align-items: center;
    }
    .book-pic-info .show img{
        width: 43%;
        position: relative;
    }
    .more{
        margin-top: 4vh;
        text-align: center;
        font-size: 2vh;
        color: #8faa3d;
        font-family: ALBR85W;
        margin-bottom: 4vh;
    }
    .more div{
        margin-bottom: 1vh;
    }
    .book-pic-info .show img:first-child{
        z-index: 10;
        width: 88%;
    }
    .book-pic-info .show img:last-child{
        width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .book-pic-info .title{
        width: 100%;
        height: auto;
        display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        margin-bottom: 12px;
        margin-top: 31px;
    }
    .book-pic-info .title .tag{
        background-color: #90b13a;
        border-radius: 1vh;
        width: 1vh;
        height: 4vh;
        margin-right: 5px;
    }
    .book-pic-info h3{
        flex: 1;
        font-size: 22px;
    }
    .book-pic-info ul li{
        margin-bottom: 10px;
        display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
    }
    .book-pic-info ul li img{
        margin-right: 5px;
        width: 7vw;
    }
    .book-pic-info ul li .progress{
        width: 25vw;
        height: 1vh;
        background-color: #313131;
        display: block;
        position: relative;
        border-radius: 1vh;
    }
    .progress em{
        display: block;
        position: absolute;
        height: 1vh;
        background-color: #90b13a;
        border-radius: 1vh;
    }
    .book-article-info{
        margin: 2vh 6% 0;
    }
    .book-article-info button{
        width: 37%;
        text-align: center;
        border-radius:3vh;
        height: 4vh;
        line-height: 4vh;
        color: #90b13a;
        margin: 30px 0 14px 0;
        background: transparent;
    }
    .book-article-info div:first-child button{
        margin-top: 0;
    }
    .book-article-info .big{
        width: 100%;
        border: 2px solid #92b937;
        border-radius: 1vh;
    }
    .book-article-info ul{
        margin: 20px 0;
        display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        flex-wrap: wrap;
    }
    .book-article-info ul li{
        width: 25%;
        padding: 0.5vh;
    }
    .book-article-info ul img{
        width: 100%;
    }
    footer.mb-footer{
        width: 100%;
        height: auto;
        background-color: #000;
        color: #a9bc8c;
        display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    footer.mb-footer >div{
        /*height: 115px;*/
        /*width: 80%;*/
        /*margin: 0 auto ;*/
        /*display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;*/
        /*flex-direction: column;*/
        /*font-size: 12px;*/
        /*justify-content: center;*/
    }
    footer.mb-footer .link{
        display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        justify-content: space-between;
    }
}