@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;
}