html, body {
    padding:0;
    margin:0;
    overflow-x:hidden;
    overflow-y:auto;
}

.blog-top {
    position: fixed;
    width: 100vw;
    height: 50px;
    font-size: 24px;
    line-height: 50px;
    text-align: right;
    overflow: hidden;
    z-index:99;
}
.blog-top-back {
    background-color: #cccccc33;
    position: fixed;
    left:0;
    top:0;
    height: 50px;
    width: 100vw;
    z-index: 1;
}

.blog-top-div {
    display: inline-block;
    padding-left: 50px;
    padding-right: 50px;
    line-height: 50px;
    font-size: 24px;
    font-family: "楷体";
    color:#000;
}

    .blog-top-div:hover {
        background-color: #ffffff99;
        cursor: pointer;
    }

.main-box {
    width:100vw;
    /*height:100vh;*/
}
.main-top-box {
    width:100%;
    height:50vh;
    min-height:350px;
    background-color:#eee;
}

.main-self {
    width: 100%;
    height: auto;
    border-top: 1px solid #00000033;
    border-bottom: 1px solid #00000033;
}
.main-nav {
    width:100%;
    min-height:25vh;
    height:auto;
}
.main-nav-head {
    padding:40px;
    font-size:35px;
    line-height:60px;
    color:green;
    font-family:"楷体";
    text-align:center;
    width:100%;
    height:auto;
}
.main-nav-head-bottom {
    width:100%;
    height:3px;
    background: linear-gradient(to right,#fff,#00ff00,#fff);
}

.blog-copyright {
    width: 100%;
    height: auto;
    background-color:white;
    /*border-top: 1px solid #ccc;*/
    /*box-shadow:#ccc 1px 1px inset;*/
}

.main-content {
    width:60%;
    min-width:900px;
    height:100%;
    /*background-color:#00000005;*/
    margin:0 auto;
    padding:10px;
}

.main-content-self {
    width: 100%;
    text-align: center;
    height:auto;
    padding: 20px;
    padding-top: 20px;
    font-family: "楷体";
}
    .main-content-self::-webkit-scrollbar {
        display: none;
    }

.selft-text {
    text-align-last:left;
    text-align:left;
    text-indent:50px;
    line-height:30px;
    font-size:18px;
}

.self-sign {
    text-align:right;
    padding-right:50px;
    font-size:14px;
    color:#00000066;
    font-family:"楷体";
}
.main-content-project-list {
    margin-top:20px;
    margin-bottom:30px;
}

.main-content-project {
    width: 100%;
    height: 400px;
    padding: 25px;
}

.main-content-project-synopsisRBox {
    width: 60%;
    display: inline-block;
    height: 350px;
    text-align: right;
    padding-left:200px;
}

.main-content-project-synopsisLBox {
    width: 60%;
    height: 350px;
    text-align: left;
    padding-right:200px;
}

.main-content-project-imgBox {
    width: 40%;
    height: 350px;
    padding: 0px;
    margin: 0px;
}
.main-content-project-title {
    font-size:24px;
    font-family:"楷体";
    line-height:60px;
    font-weight:bold;
}
.main-content-project-text {
    font-size:18px;
    font-family:"宋体";
    line-height:40px;
}

.inline-box {
    display:table;
}

.inline-item {
    display:table-cell;
}

.project-list-box {
    width:100%;
    margin-top:50px;
}
















/*特效*/
/*div遮图片*/
.mask-inline-div {
    width: 250px;
    height: 250px;
    padding: 0;
    margin: 0;
    background-color: #cccccc88;
    position: absolute;
    transition: opacity .5s;
    text-align: center;
    line-height: 250px;
    font-size: 24px;
    opacity: 0;
}

    .mask-inline-div:hover {
        position: absolute;
        opacity: 1;
    }
/*调用案例<div><div class="mask-inline-div">hello</div><img src="" width="100" height="100"></div>*/