@charset "utf-8"; /*框架预览 CSS*/ .mkeBody { background:#121212; } .mkeHeadBox { padding:30px 10px; text-overflow:ellipsis; white-space:nowrap; margin:0; color:#fff; text-align:center; overflow:hidden; border-bottom:3px solid #666; box-shadow:inset 0 -2px 3px #000000; letter-spacing:1px; font:26px/26px "微软雅黑"; } .mkeFooterBox { padding:25px 10px; text-overflow:ellipsis; margin:0; color:#fff; font-size:14px; line-height:24px; text-align:center; overflow:hidden; border-top:3px solid #666; box-shadow:inset 0 2px 3px #000000; } .mkeContentBox { background:#222222; padding:0 } .mkeContentBox:after { height:0; clear:both; } .mkeFooterBox p,.mkeFooterBox div { padding:0; margin:0; line-height:26px; font-size:14px; } .mkeFooterBox a { color:#fff; white-space:nowrap } .mkeButton { background:#F36; display:inline-block; text-decoration:none; width:102px; border-radius:0.3em; transition:all 0.3s ease } .mkeButton:hover { background:#FF1550; } .mkeURL { font-size:24px; } .mkeFooterBox .mKeBannerAD { width:728px; height:90px; margin:18px auto 0; } .mkeFooterBox .mSmallKeBannerAD { display:none; } @media only screen and (max-width:900px) { .mkeButton { display:block; margin:8px auto 0; } }@media only screen and (max-width:767px) { .mkeHeadBox { font-size:18px; padding:15px 10px; } .mkeFooterBox p,.mkeFooterBox div { line-height:24px; font-size:12px; } .mkeURL { font-size:22px; } .mkeFooterBox .mKeBannerAD { display:none; } .mkeFooterBox .mSmallKeBannerAD { width:300px; height:250px; margin:18px auto 0; display:block; } }/*End*/ /*主要CSS*/ * { padding:0px; margin:0px; font-size:16px; font-family:"Microsoft YaHei"; } a,a:link,a:visited,a:hover,a:active { text-decoration:none; } ::-moz-selection { background:#338FFF; color:#fff; } ::-webkit-selection { background:#338FFF; color:#fff; } ::selection { background:#338FFF; color:#fff; } .clear::after { content:""; display:block; height:0px; clear:both; visibility:hidden; } .response-img { display:block; max-width:100%; } .text-overflow { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body { width:100%; max-width:1920px; min-width:1200px; } #knowledge { width:100%; height:100%; position:relative; color:#333; padding:40px 0; } .bookBox { width:1000px; height:600px; position:relative; margin:30px auto; -webkit-perspective-origin:50% 60%; perspective-origin:50% 60%; -webkit-perspective:1500px; perspective:1500px; background:url(http://www.jq22.com/img/cs/500x500-1.png) no-repeat 0 0; background-size:100% 100%; } .bookBox:hover .lastBtn { display:block; } .bookBox:hover .nextBtn { display:block; } /*书的高度*/ .bookPage { position:absolute; width:500px; height:580px; top:0; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; -o-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transition:all linear 2s; -moz-transition:all linear 2s; -ms-transition:all linear 2s; -o-transition:all linear 2s; transition:all linear 2s; background:url(http://www.jq22.com/img/cs/500x500-2.png) no-repeat; background-size:479.26px 780px; background-position:20.74px 8.3px; } .bookPage img { position:absolute; top:50px; left:50px; display:inline-block; width:400px; } .bookWord { position:absolute; top:50px; left:50px; display:inline-block; width:360px; padding:20px; font-size:20px; line-height:27px; backface-visibility:visible; background-color:#f0f0f0; word-break:break-all; -webkit-column-count:2; -webkit-column-gap:40px; -moz-column-count:2; -moz-column-gap:40px; -ms-column-count:2; -ms-column-gap:40px; column-count:2; column-gap:40px; } .bookWord span { font-size:30px; font-weight:600; line-height:40px; } .frist { left:0; z-index:1; } .frist img { z-index:1; } .last { right:0; z-index:1; } .last p { z-index:1; } .runPage { right:0; -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -ms-transform-origin:0 0; -o-transform-origin:0 0; transform-origin:0 0; } /*书的高度*/ .runPage,.bookPage:last-child { background:url(http://www.jq22.com/img/cs/500x500-3.png) no-repeat; background-size:479.26px 780px; background-position:0 8.3px; } .runClass { -webkit-transform:rotateY(-180deg); -moz-transform:rotateY(-180deg); -ms-transform:rotateY(-180deg); -o-transform:rotateY(-180deg); transform:rotateY(-180deg); } .lastBtn,.nextBtn { display:none; position:absolute; top:300px; cursor:pointer; z-index:999; font-size:50px; line-height:100px; color:#fff; text-decoration:none; background-color:rgba(0,0,0,.5); } .lastBtn { left:0; } .nextBtn { right:0; } .canvasBox { display:block; width:158px; height:158px; } /*页序号*/ .pageNumber { position:absolute; bottom:-40px; right:0; font-size:20px!important; line-height:30px; }