@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*/
.demo{
    padding: 1em 0;
}
.box{
    position: relative;
    perspective: 1000px;
}
.box .box-img{
    transform: rotateY(0);
    transition: all 0.50s ease-in-out 0s;
}
.box:hover .box-img{
    transform: rotateY(-90deg);
}
.box .box-img img{
    width: 100%;
    height: auto;
}
.box .box-content{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 60px 20px;
    text-align: center;
    background: rgba(0,0,0,0.7);
    transform: rotateY(90deg);
    transition: all 0.50s ease-in-out 0s;
}
.box:hover .box-content{
    transform: rotateY(0);
}
.box .title{
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
}
.box .description{
    font-size: 14px;
    line-height: 24px;
    color: #fff;
}
.box .title:after,
.box .description:after{
    content: "";
    width: 80%;
    display: block;
    border-bottom: 1px solid #fff;
    margin: 15px auto;
}
.box .social-links{
    margin: 0;
    padding: 0;
    list-style: none;
}
.box .social-links li{
    display: inline-block;
    margin: 0 10px;
}
.box .social-links li a{
    font-size: 20px;
    color: #a6a6a6;
}
.box .social-links li a:hover{
    text-decoration: none;
    color: #fff;
}
@media only screen and (max-width: 990px) {
    .box{  margin-bottom:20px; }
}
@media only screen and (max-width: 479px) {
    .box .box-content{ padding: 20px; }
}