html, body{
    padding: 0; margin: 0; width: 100%; height: 100%; font-size: 14px;
}
a{
    color: #000; text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

.header{
    width: 1200px; margin: 0 auto; height: 100px; padding-top: 10px;
}
.header > .logo{
    padding: 10px; display: inline-block;
}
.header > .navigation{
    display: inline-block; float: right; height: 100%;
}
.header > .navigation > .top-area{
    height: 50%; vertical-align: middle;
}
.header > .navigation > .top-area > a{
    margin-right: 20px; margin-top: 15px; float:right;
}
.search{
    margin-right: 20px; display: inline-block; width: 273px; height: 40px; background: url('../images/search_bg.jpg') no-repeat; position: relative; float: right; margin-top: 11px;
}
.search > input{
    width: 85%; height: 100%; border: none; background: transparent; padding-left: 20px; outline: none;
}
.search > input:focus{
    border: none;
}
.header > .navigation > .menu-area{
    float: right; padding-top: 12px;
}
.header > .navigation > .menu-area > a{
    display: inline-block; 
    padding: 8px 15px 5px 15px;
    text-decoration: none;
    font-size: 18px;
    color: #000;
    margin: 0 8px;
}
.header > .navigation > .menu-area > .current, .header > .navigation > .menu-area > a:hover{
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#EDC13F), to(#EE5B4C));
    color: #fff;
    border-radius: 10px 10px 0 0;
}

.content {
    width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
}
.content > .banner{
    width: 100%;
}
.content > .banner > img{
    width: 100%;
}
.content > .column{
    width: 100%; padding-top: 20px;
}
.content > .column > .grid{
    width: 31.5%;
    min-height: 100px;
    border-radius: 10px;
    display: inline-block;
    box-shadow: 2px 2px 5px #888888;
}
.content > .column > .center{
    margin: 0 2% 0 2%;
}
.content > .column > .grid > .title{
    width: 100%; padding-bottom: 10px;
}
.content > .column > .grid > .title > img{
    width: 100%; border-radius: 10px 10px 0 0;
}
.content > .column > .grid > .list{
    width: 100%; padding-bottom: 10px;
}
.content > .column > .grid > .list > a{
    display: inline-block; width: 100%; font-size: 16px; color: #000; line-height: 40px; text-decoration: none;
}
.content > .column > .grid > .list > a:hover{
    /* text-decoration: underline; */
}
.content > .column > .grid > .list > a::before{
    content: "○"; font-size: 14px; padding: 0 10px 0 10px;
}

.footer {
    width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
    background-color: #F2F2F0;
}
.footer > .title{
    font-size: 18px; padding: 0 20px;
}
.footer > .detail{
    padding: 20px 0 10px 20px; line-height: 25px; color: #575757;
}

.content > .breadcrumbs{
    border-bottom: 1px solid #ccc; padding: 10px 20px;
}
.content > .list-container{
    padding: 10px 0;
}
.content > .list-container > .line{
    padding: 20px; display: inline-block; width: 96%;
}
.content > .list-container > .line > div{
    height: 80px;
}
.content > .list-container > .line > .icon{
    width: 80px; height: 80px; border-radius: 10px; background-color: red; float: left;
}
.content > .list-container > .line > .icon > img{
    width: 100%; height: 100%; border-radius: 10px;
}
.content > .list-container > .line > .text{
    float: left; width: 80%; padding: 0 30px;
}
.content > .list-container > .line > .text > .title{
    font-size: 18px; padding: 10px 0;
}
.content > .list-container > .line > .text > .title > a{
    color: #000; text-decoration: none;
}
.content > .list-container > .line > .text > .desc{
    color: #575757;
}
.content > .list-container > .line > .time{
    width: 80px; float: right; text-align: center; line-height: 80px;
}
.content > .list-container > .page{
    padding: 20px; display: inline-block; width: 96%; text-align: right;
}
.content > .list-container > .no-result{
    padding: 50px 0; text-align: center;
}

.content > .detail-container{
    padding: 10px 0;
}
.content > .detail-container > .title{
    font-size: 18px; padding: 10px 20px;
}
.content > .detail-container > .content{
    padding: 0 20px; line-height: 30px; color: #575757;
}
.content > .detail-container > .time{
    padding: 20px; display: inline-block; width: 96%;
}
.content > .detail-container > .time > .next{
    float: left;
}
.content > .detail-container > .time > .click{
    float: right;
}

/* 登录框 */
.login-container{
    width: 480px; min-height: 100px; border-radius: 10px; box-shadow: 2px 2px 5px #888888; margin: 0 auto; margin-top: 100px; margin-bottom: 100px;
}
.login-container > .title{
    width: 100%; height: 50px; text-align: center; background-color: #027AB7; font-size: 24px; color: #fff; border-radius: 10px 10px 0 0; line-height: 50px;
}
.login-container > .content{
    width: 94%; margin-left: 3%; padding: 30px 0 0 0;
}
.login-container > .content input{
    display: block; width: 100%; height: 50px; outline: none; font-size: 18px; border: 1px solid #F6F4F5; color: #9D9B9C; margin-bottom: 30px; padding-left: 70px;
}
.login-container > .content input::placeholder{
    color: #9D9B9C;
}
.login-container > .content > .username:before{
    width: 58px; height: 48px; background-color: #F8F8F8; position: absolute; display: block; content: ""; border: 1px solid #E6E2E1; background: url("../images/icon_username.jpg") no-repeat center;
}
.login-container > .content > .password:before{
    width: 58px; height: 48px; background-color: #F9F7F8; position: absolute; display: block; content: ""; border: 1px solid #E6E2E1; background: url("../images/icon_password.jpg") no-repeat center;
}
.submit{
    display: block; border: none; width: 90%; margin: 0 auto; height: 50px; font-size: 20px; letter-spacing: 10px; color: #fff; background-color: #F87729; outline: none;
}
.login-container > .bottom-line{
    width: 90%; margin: 0 auto; padding: 10px 0;
}
.login-container > .bottom-line > .foget{
    color: red;
}
.login-container > .bottom-line > .register{
    float: right;
}
.login-container > .bottom-line > .register:before{
    content: ""; display: block; position: absolute; width: 20px; height: 20px; margin: 0 0 0 -25px; background: url("../images/icon_register.jpg") no-repeat center;
}
.login-container > .register{
    background-color: #4CA22F;
}
.publish-button{
    background: #F6D798;
    color: #000;
    text-decoration: none;
    padding: 5px 15px 8px 15px;
    display: inline-block;
    text-align: center;
    border-radius: 20px;
}
.publish-button:hover{
    text-decoration: none;
}

/* vip */
.content > .vip-container{
    background: url("../images/vip-bg.jpg") no-repeat; width: 100%; height: 370px; margin: 10px 0 50px 0; background-size: contain; display: inline-block;
}
.content > .vip-container > .top{
    width: 100%; text-align: center; padding: 20px 0 20px 0;
}
.content > .vip-container > .bottom{
    width: 100%; vertical-align: bottom; height: calc(100% - 123px);
}
.content > .vip-container > .bottom > .vip-grid-container{
    width: 50%; height: 100%; display: block; margin:0 auto; margin-top: 23px;
}
.content > .vip-container > .bottom > .vip-grid-container > .vip-grid{
    width: 240px; height: 242px; background: url("../images/vip-list-bg.png") no-repeat; vertical-align: bottom; display: inline-block; float: left; font-size: 24px; color: #DC9C31;
}
.content > .vip-container > .bottom > .vip-grid-container > .vip-grid > .title{
    padding: 40px 0 0 40px;
}
.content > .vip-container > .bottom > .vip-grid-container > .vip-grid > .price{
    padding: 60px 0 0 40px;
}

/* pay */
.content > .pay-container{
    background: url("../images/pay-bg.jpg") no-repeat; width: 100%; height: 370px; margin: 10px 0 50px 0; background-size: contain; display: inline-block;
}
.content > .pay-container > .top{
    width: 100%; text-align: center; padding: 20px 0 20px 0;
}
.content > .pay-container > .bottom{
    width: 100%; vertical-align: bottom; height: calc(100% - 123px);
}
.content > .pay-container > .bottom > .pay-grid-container{
    width: 240px; height: 100%; display: block; margin:0 auto; margin-top: 28px;
}
.content > .pay-container > .bottom > .pay-grid-container > .pay-grid{
    width: 240px; height: 242px; background: url("../images/vip-list-bg.png") no-repeat; vertical-align: bottom; display: inline-block; float: left; font-size: 24px; color: #DC9C31;
}
.content > .pay-container > .bottom > .pay-grid-container > .pay-grid > .title{
    padding: 40px 0 0 40px; color: red;
}
.content > .pay-container > .bottom > .pay-grid-container > .pay-grid > .price{
    padding: 60px 0 0 40px; color: red;
}

/* publish */
.publish-container{
    padding: 10px 0;
}
.publish-container > .form-line{
    width: 70%; margin: 0 auto;
}
.publish-container > .form-line > div{
    line-height: 30px; display: inline-block; padding: 10px 0;
}
.publish-container > .form-line > .left{
    vertical-align: top; min-width: 100px; text-align: right;
}
.publish-container > .form-line > .right{
    padding-left: 20px; min-width: 300px;
}
.form-input{
    height: 30px; min-width: 300px; outline: none; border: 1px solid #ccc; padding: 0 10px;
}
.form-select{
    height: 30px; line-height: 30px; border: 1px solid #ccc; outline: none; padding: 5px;
}

.button{
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#EDC13F), to(#EE5B4C));
    color: #fff;
    text-decoration: none;
    padding: 5px 15px 8px 15px;
    display: inline-block;
    text-align: center;
    border-radius: 20px;
    outline: none; border: none;
}
.button:hover{
    text-decoration: none;
}

.list-button{
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#EDC13F), to(#EE5B4C));
    color: #fff;
    text-decoration: none;
    padding: 5px 15px 8px 15px;
    display: inline-block;
    text-align: center;
    border-radius: 20px;
    outline: none; border: none;
    width: auto !important;
    font-size: 14px !important;
    color: #fff !important;
    line-height: 20px !important;
    float: right;
    margin-left: -90px;
    position: absolute;
    z-index: 20;
}
.list-button::before{
    display: none !important;
}
.list-button:hover{
    text-decoration: none;
}