.tabs {
    color: #FFF;
    font-family: "微软雅黑";
}

    .tabs input {
        opacity: 0; /*隐藏input的选择框*/
    }

        .tabs input:checked + label {
            /*padding-bottom: 6px;*/
            font-weight: bold;
        }

label {
    cursor: pointer; /*鼠标移上去变成手状*/
    float: left;
    width: 120px;
    line-height: 40px;
    margin-right: 5px;
    text-align: center;
    font-size: 18px;
}

.tabs label:nth-of-type(1) {
    background: #5eb0de;
    background-color: rgba(0,0,205,0.5);
}

.tabs label:nth-of-type(2) {
    background: #86cad7;
    background-color: rgba(0,206,209,0.5);
}

.tabs label:nth-of-type(3) {
    background: #e9bab3;
    background-color: rgba(255,106,106,0.5);
}

.tabs label:nth-of-type(4) {
    background: #a8c194;
    background-color: rgba(60,179,113,0.5);
}

label:hover {
    font-weight: bold;
}
/*选择前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/
.tabs input:nth-of-type(1):checked ~ .panels .panel:nth-child(1) {
    opacity: 1;
    background: #5eb0de;
    -webkit-transition: .3s;
    background-color: rgba(0,0,205,0.3);
}

.tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2) {
    opacity: 1;
    background: #86cad7;
    -webkit-transition: .3s;
    background-color: rgba(0,206,209,0.3);
}

.tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3) {
    opacity: 1;
    background: #e9bab3;
    -webkit-transition: .3s;
    background-color: rgba(255,106,106,0.3);
}

.tabs input:nth-of-type(4):checked ~ .panels .panel:nth-child(4) {
    opacity: 1;
    background: #a8c194;
    -webkit-transition: .3s;
    background-color: rgba(60,179,113,0.3);
}

.panel {
    opacity: 0;
    position: absolute; /*使内容区域位置一样*/
    height: 330px;
    width: 95%;
    margin-top: 25px;
    padding: 0 20px;
}

.panel ul {
padding: 10px;
padding-top:20px;
}

.panel ul li {
            list-style: none;
            line-height: 37px;
            font-size: 18px;
        }
    .panel ul li a {
    display:block;
    float:left;
        color:#fff;
        width:40%;
        overflow:hidden;
        white-space:nowrap;
    }
    .panel ul li span {
    display:block;
    float:right;
    width:25%;
    font-size:15px;
    color:#aaa;
    padding:0px 5px;
    text-align:right;
    overflow:hidden;
    white-space:nowrap
    }

.panel_show {
    opacity: 1;
display:block;
}
.panel_hidden {

display:none;
}