@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:#fff; padding:50px 0 50px 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*/
div, ul, li, body, p { margin: 0; padding: 0; font-size: 14px; font-family: "Microsoft Yahei", "微软雅黑", sans-serif; }
.clearfix::after { clear: both; display: block; height: 0; content: ''; }
ul, li { list-style: none; }
#container { width: 816px; margin: 0 auto; }
#container li { position: relative; width: 230px; border: 1px solid #ccc; height: 150px; line-height: 150px; text-align: center; margin: 20px; float: left; cursor: pointer; overflow: hidden; }
#container li p { height: 150px; width: 100%; position: absolute; left: 0; top: -150px; color: #ffffff; z-index: 2; }
#container li .img { width: 230px; height: 150px; display: block; -moz-transition: .5s ease-in; -webkit-transition: .5s ease-in; -o-transition: .5s ease-in; -ms-transition: .5s ease-in; transition: .5s ease-in; }
#container li:hover .img { transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1) }
#container li p i { width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; z-index: -1; background: #000000; opacity: 0.7; -moz-opacity: 0.7; filter: alpha(opacity=70); font-size: 16px; }
#container li p span { display: block; width: 94%; margin: 0 auto; line-height: 24px; font-size: 12px; padding-top: 60px; }
#container li p a { display: block; position: absolute; width: 32px; height: 32px; left: 50%; margin-left: -16px; top: 20px; background: url("../jQuery判断鼠标划入图片方向显示遮罩层特效 - 【科e互联】_files/images/link.png") no-repeat 0 0; }
.explain { display: block; margin: 0 auto; }