#center {
    background:#f5f5f5;
    padding-bottom:60px;
}

.center {
    width:1200px;
    zoom:1;
    margin:0 auto;
    text-align:left;
    overflow:hidden;
}

.center:after {
    content:"";
    display:block;
    clear:both;
    visibility:hidden;
}

.center-content{
    width: 100%;
    overflow: hidden;
}

.left {
    float:left;
    width:260px;
    border:1px solid #eee;
    box-sizing:border-box;
    padding:20px;
    background:#fff;
}

.right {
    float:right;
    width:920px;
    border:1px solid #eee;
    padding:30px;
    box-sizing:border-box;
    background:#fff;
}

.location {
    margin:15px 0;
}

.location a, .location {
    font-size:14px;
    color:#666;
}

.location a:hover {
    text-decoration:underline;
}

.location a:nth-child(n+3), .location span {
    margin-left:4px;
}

.location>span:last-child {
    color:#000;
}

.left{
    position: relative;
}

.left .title {
    width:100%;
    height:60px;
    line-height:60px;
    font-size:18px;
    color:#089740;
    position:relative;
}

.left .title span:hover {
    cursor:pointer;
}

.left li:not(:last-child) .title {
    border-bottom:1px solid #eee;
}

.left .title img {
    vertical-align:middle;
    position:relative;
    top:-2px;
    width:23px;
    height:22px;
    margin-right:8px;
}

.left .title .arrows {
    position:absolute;
    right:0;
    top:0;
    color: #999;
}

.left .title.slided .arrows{
    color: #089740;
}

.left .detail {
    padding-left:30px;
    box-sizing:border-box;
    height:0;
    visibility:hidden;
    opacity:0;
    overflow:hidden;
    transition:all .3s linear;
}

.left .detail p {
    margin-bottom:10px;
}

.left .detail a {
    font-size:16px;
    color:#666;
}

.left .detail a:hover, .left .detail a.active {
    color:#f4bd08;
}

.right .title {
    border-bottom:1px solid #eee;
}

.right h1 {
    font-size:22px;
    color:#333;
    font-weight:normal;
    padding-bottom:15px;
    border-bottom:2px solid #089740;
    display:inline-block;
    position:relative;
    top:1px;
}

.right .content {
    width:100%;
    font-size:14px;
    color:#666;
    margin-top:20px;
}

.right .content img{
    max-width: 100%;
}

/*移动端相关样式*/
.slideBtn{
    width: 22px;
    height: 44px;
    background-color: #b71c22;
    color: #fff;
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: -22px;
    text-align: center;
    line-height: 44px;
    display: none;
}

.slideBtn:hover, .slideBtn:focus{
    color: #fff;
}

@media screen and (max-width: 1200px){
    .center{
        width: 100%;
        padding: 0 20px;
    }
    
    .center-content{
        padding: 0;
        display: flex;
        display: -webkit-flex;
    }
    
    .left{
        min-width: 260px;
        margin-right: 20px;
    }
    
    .left .title, .left .title.slided .arrows{
        color: #b71c22;
    }
    
    .left .detail a:hover, .left .detail a.active{
        color: #089740;
    }
    
    .right{
        flex-grow: 1;
        padding: 20px;
    }
    
    .right h1{
        border-color: #b71c22;
    }
    
    .right .content{
        padding: 0;
    }
}

@media screen and (max-width: 900px){
    .location{
        display: none;
    }
    
    .center{
        padding: 20px;
    }
    
    .left{
        position: fixed;
        left: -260px;
        z-index: 1;
        height: 60%;
    }
    
    .navlist{
        height: 100%;
        overflow-y: auto;
    }
    
    .slideBtn{
        display: block;
    }
    
    .right h1{
        font-size: 18px;
        line-height: 1;
        font-weight: 500;
        border: 0;
        padding: 0 0 10px 10px;
        position: relative;
    }
    
    .right h1:before{
        content: "";
        width: 4px;
        height: 1em;
        background-color: #b71c22;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        position: absolute;
        left:0;
        top:0;
    }
    
    .right .content{
        margin-top: 10px;
        line-height: 1.7em;
    }
}