body {
    font-family: "microsoft yahei";
    color: #333;
    background-color: #F5F8F9;
}

.bg {
    background: transparent url("../image/bj.png") repeat top left scroll !important;
}

.mr5 {
    margin-right: 5px;
}

.w900 {
    width: 900px;
}

.w300 {
    width: 300px;
}

.block {
    display: block !important;
}

/* ico banner */
.ico-banner {
    position: relative;
    width: 100%;
    min-width: 1200px;
    height: 500px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    overflow: hidden;
}

.ico-banner .banner-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 50px 0;
    background-color: rgba(0, 0, 0, 0.35);
}

.ico-banner .banner-wrapper .banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: auto;
    width: 1200px;
}

.banner-inner .image-box {
    display: flex;
    align-items: center;
    width: 600px;
    height: 400px;
}

.banner-inner .image-box .image-item {
    width: 100%;
}

.banner-inner .text-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 40px;
    width: 600px;
    height: 400px;
    color: #efefef;
}

.banner-inner .text-box h3,
.banner-inner .text-box p {
    margin: 0 0 40px;
}

.banner-inner .text-box h3 {
    font-size: 36px;
}

.banner-inner .text-box p {
    font-size: 16px;
}


/* ico navbar */
.ico-navbar {
    width: 100%;
    min-width: 1200px;
    background-color: #f3f3f3;
}

.ico-navbar .list-none {
    display: flex;
    margin: auto;
    width: 1200px;
}

.ico-navbar .list-none li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    line-height: 50px;
    min-width: 240px;
    font-size: 16px;
}

.ico-navbar .list-none .label {
    margin-left: 4px;
}

/* ico content */
.ico-content {
    display: flex;
    margin: auto;
    width: 1200px;
    min-width: 1200px;
}

.ico-content .content-images {
    width: 800px;
}

.ico-content .content-images .title {
    margin: 0 0 30px;
    font-size: 20px;
    text-align: center;
}

.ico-content .content-images .sub-title {
    margin-bottom: 30px;
    text-align: center;
}

.ico-content .content-images .sub-title .text {
    display: inline-flex;
    padding: 5px 10px;
    font-size: 26px;
    border: 1px solid #333;
    border-left: none;
    border-right: none;
}

.ico-content .content-images img {
    width: 100% !important;
}

.ico-content .ico-list {
    width: 360px;
}

.ico-content .content-images~.ico-list,
.ico-content .ico-list~.content-images {
    margin-left: 40px;
}

.ico-list .ico-item {
    padding: 15px;
    margin-bottom: 30px;
    background-color: #f2f2f2;
}

.ico-list .ico-item .title {
    position: relative;
    padding-left: 30px;
    margin: 0 0 20px;
    line-height: 30px;
}

.ico-list .ico-item .image-box {
    width: 100px;
}

.ico-list .ico-item .ico-info {
    width: 230px;
}

.ico-list .ico-item .image-item {
    width: 80px;
    border-radius: 50%;
}

.ico-list .ico-item .title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 24px;
    height: 24px;
    background-color: #EE3531;
}

.ico-list .ico-item .money {
    position: relative;
    padding-right: 90px;
    line-height: 40px;
}

.ico-list .ico-item .money .text-color {
    margin-left: 4px;
    font-size: 22px;
    letter-spacing: -0.2px;
}

.ico-list .ico-item .list-none {
    display: flex;
    flex-wrap: wrap;
}

.ico-list .ico-item .list-none li {
    line-height: 26px;
    width: 50%;
    color: #666;
    font-size: 12px;
}

.ico-list .ico-item .list-none .block {
    width: 100%;
}

.ico-list .ico-item .btn {
    background-color: #c0c0c0;
    box-shadow: none;
    color: #fff;
    border-color: #c0c0c0;
    transition: 0.233s;
}

.ico-list .ico-item .btn:hover {
    color: #333;
    border-color: #333;
}

.status {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 5px;
    right: 0;
    bottom: 5px;
    min-width: 80px;
    background-color: #EE3531;
    color: #fff;
}

.status::before {
    content: "";
    position: absolute;
    left: -6px;
    bottom: 0;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: 6px solid #EE3531;
}

.ico-tags {
    padding: 10px 0;
    margin: 30px auto 0;
    width: 1200px;
    border-top: 1px dashed #ddd;
}

.ico-tag a {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 3px;
    background-color: #f2f2f2;
    color: #999;
    font-size: 12px;
    transition: 0.233s;
    border-radius: 2px;
}

.ico-tag a:hover {
    background-color: #ddd;
}

/* ui banner */
.banner-slider {
    height: 500px;
}

.banner-slider li {
    height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.banner-slider+.unslider-nav {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    top: auto;
    margin: 0;
    z-index: 100;
}

.banner-slider+.unslider-nav ol {
    list-style: none;
    text-align: center;
}

.banner-slider+.unslider-nav ol li {
    display: inline-block;
    float: none;
    width: 6px;
    height: 6px;
    margin: 0 4px;
    padding: 3px;
    background: transparent;
    border-radius: 5px;
    overflow: hidden;
    text-indent: -999em;
    border: 2px solid #fff;
    cursor: pointer;
    opacity: .4;
}

.banner-slider+.unslider-nav ol li.unslider-active {
    background: #fff;
    cursor: default;
    opacity: 1;
}

.ui-banner .unslider {
    position: relative;
}

.ui-banner .unslider-arrow {
    display: block;
    width: 49px;
    height: 85px;
    top: 50%;
    right: 200px;
    left: auto;
    margin-top: -40px;
    overflow: hidden;
    background: url("../image/arrowsright.png") no-repeat;
    border-radius: 80px;
    text-indent: -999em;
    opacity: .75;
    transition: opacity .2s;
    z-index: 1000;
}

.ui-banner .unslider-arrow:hover {
    opacity: 1;
    background-image: url("../image/arrowsright1.png");
}

.ui-banner .unslider-arrow.prev {
    left: 200px;
    right: auto;
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.ui-banner .unslider-nav {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    top: auto;
    min-height: 25px;
    margin: 0;
    z-index: 10;
}

.ui-banner .unslider-nav ol li {
    display: inline-block;
    float: none;
    width: 16px;
    height: 16px;
    margin: 0 4px;
    padding: 3px;
    background: transparent;
    border-radius: 16px;
    overflow: hidden;
    text-indent: -999em;
    border: 2px solid #fff;
    cursor: pointer;
    opacity: .4;
}

.ui-banner .unslider-nav ol li.unslider-active {
    background: #fff;
    cursor: default;
    opacity: 1;
}

/* ui content */
.ui-content {
    padding: 20px;
    margin: auto;
    width: 1200px;
    min-width: 1200px;
    background: #fff;
}


/* ico projects */
.ico-projects {
    margin-bottom: 30px;
}

.ico-projects .title {
    line-height: 24px;
    text-transform: uppercase;
    color: #666;
}

.ico-projects .sub-title {
    position: relative;
    margin-left: 30px;
    margin-bottom: 20px;
    line-height: 30px;
    font-size: 24px;
    color: #333;
    text-transform: uppercase;
}

.ico-projects .sub-title::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 3px;
    width: 24px;
    height: 24px;
    background-color: #EE3531;
}

.ico-projects .project-list {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.ico-projects .ico-project {
    display: inline-block;
    margin-bottom: 15px;
    width: 380px;
    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.075);
    transition: 0.233s;
}

.ico-projects .ico-project:hover {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15);
}

.ico-project .image-box {
    position: relative;
}

.ico-project .image-box img {
    width: 380px;
    height: 225px;
    vertical-align: bottom;
}

.ico-project .image-box .image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    visibility: hidden;
    opacity: 0;
    transition: 0.233s;
}

.ico-project .image-box .image-wrapper a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #efefef;
    font-size: 60px;
    opacity: 0;
    transition: 0.233s;
}

.ico-project .image-box:hover .image-wrapper {
    visibility: visible;
    opacity: 1;
    transition: 0.233s;
}

.ico-project .image-box:hover .image-wrapper a {
    width: 40px;
    height: 40px;
    font-size: 16px;
    opacity: 1;
}

.ico-project .project {
    padding: 10px;
    background-color: #fff;
}

.ico-project .project .name {
    margin: 0;
    line-height: 36px;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ico-project .project .name a {
    color: #009AFF !important;
}

.ico-project .project p {
    line-height: 24px;
    text-align: center;
    font-size: 14px;
}

.ico-project .project .btn.btn-dark {
    background-color: #333;
    color: #fff;
    transition: 0.233s;
}

.ico-project .project .btn.btn-default {
    background-color: #fff;
    border-color: #ddd;
}

.ico-project .project .btn.btn-dark:hover {
    color: #EE3531;
}

/* ico slider */
.ico-slider {
    min-height: 180px;
}

.ico-slider .unslider-wrap li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-right: 8px;
    min-height: 180px;
}

.ico-slider .slider-wrapper {
    display: flex;
    margin-bottom: 30px;
    padding: 20px;
    width: 580px;
    background-color: #fff;
    transition: 0.233s;
    float: left;
}

.ico-slider .slider-wrapper .slider-avatar img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.ico-slider .slider-wrapper .slider-info {
    width: 420px;
    padding-left: 20px;
}

.ico-slider .slider-info .name {
    margin: 0;
    height: 30px;
    font-weight: normal;
    font-size: 20px;
}

.ico-slider .slider-info .name a:not(.btn):hover {
    color: #EE3531;
}

.ico-slider .slider-info .name .btn {
    color: #333;
    border-color: #333;
    background-color: #fff;
    box-shadow: none;
    letter-spacing: 3px;
    opacity: 0;
    visibility: hidden;
    transition: 0.233s;
}

.ico-slider .slider-wrapper:hover {
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.25);
    transition: 0.233s;
}

.ico-slider .slider-wrapper:hover .btn {
    opacity: 1;
    visibility: visible;
    transition: 0.233s;
}

.ico-slider .slider-info .text-sub {
    line-height: 20px;
    font-size: 12px;
}

.ico-slider .slider-info .slider-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    height: 60px;
    border-top: 1px solid #ddd;
}

.ico-slider .slider-info .slider-group .slider-item {
    display: inline-flex;
    width: 33.333%;
    font-size: 12px;
    color: #666;
}

.ico-slider .slider-info .slider-group .slider-item span {
    margin: 0 5px;
}

.ico-slider~.unslider-nav ol li {
    width: 10px;
    height: 10px;
    border: 1px solid #ddd;
    border-radius: 50%;
    transition: 0.233s;
}

.ico-slider~.unslider-nav ol li.unslider-active {
    background-color: #EE3531;
    border-color: #EE3531;
}

/**/
.ui-filter-tags {
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.ui-filter-tags li a {
    display: inline-block;
    margin: 0 5px;
    font-weight: 600;
    font-size: 14px;
    color: #999;
}

.ui-filter-tags li a span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 15px;
    width: 20px;
    background-color: #ddd;
    color: #fff;
    font-size: 12px;
    border-radius: 2px;
    font-weight: normal;
}

.ui-filter-tags li a.active,
.ui-filter-tags li a:hover {
    color: #009AFF;
}

.ui-filter-tags li a.active span,
.ui-filter-tags li a:hover span {
    background-color: #009AFF;
}

.ui-filter-list {
    margin-bottom: 20px;
    border: 1px solid #EAEAEA;
}

.ui-filter-list .ui-filter-item:not(:last-child) {
    border-bottom: 1px solid #EAEAEA;
}

.ui-filter-list .ui-filter-item {
    display: flex;
}

.ui-filter-list .ui-filter-item .ui-filter-lead {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    min-height: 50px;
    background-color: #F5F5F5;
    font-size: 12px;
}

.ui-filter-list ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-filter-list ul li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px;
}

.ui-filter-list ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 24px;
    font-size: 12px;
    padding: 0 3px;
}

.ui-filter-list ul li a:hover,
.ui-filter-list ul li.active a {
    background-color: #009AFF;
    color: #fff;
}

.ui-project-header {
    margin-bottom: 20px;
    background-color: #fff;
}

.ui-project-header .pro-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    min-width: 1200px;
    width: 1200px;
}

.ui-project-header .pro-content .pro-left {
    font-size: 30px;
    color: #333;
}

.ui-project-header .pro-content ul {
    display: flex;
}

.ui-project-header .pro-content ul li {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    min-height: 100px;
}

.ui-project-header .pro-content ul li a {
    font-size: 16px;
    color: #666;
    text-decoration: none;
}

.ui-project-header .pro-content ul li.active ::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background-color: #009AFF;
}

.ui-project-header .pro-content ul li.active a {
    color: #009AFF;
}

/* ui discus */
.ui-discus {
    background-color: #fff;
}

.ui-group .header {
    position: relative;
    padding: 40px 0;
    text-align: center;
}

.ui-group .header::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-bottom: 1px solid #efefef;
    z-index: -1;
}

.ui-group .header .text {
    display: inline-block;
    padding: 10px 20px;
    font-size: 36px;
    background-color: #fff;
}

.ui-discus-list {
    display: flex;
    flex-wrap: wrap;
}

.ui-discus-list li {
    position: relative;
    padding-left: 190px;
    margin-bottom: 20px;
    width: 50%;
}

.ui-discus-list .image-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 120px;
    vertical-align: bottom;
}

.ui-discus-list .info .title {
    line-height: 30px;
    font-size: 20px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    transition: 0.35s;
}

.ui-discus-list .info .title:hover {
    color: #009AFF;
}

.ui-discus-list .info p {
    line-height: 25px;
    font-size: 14px;
    color: #999;
}

.ui-discus-list .group {
    display: flex;
    align-items: center;
    min-height: 40px;
    color: #999;
    font-size: 12px;
}

.ui-discus-list .group .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 40px;
    color: #999;
}

.ui-discus-list .group .avatar img {
    margin-right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.ui-discus-list .group .commet .item {
    margin-right: 10px;
}

.ui-discus-list~.read-more a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 20px;
    background-color: #E5E9ED;
    color: #9d9d9d;
    border-radius: 4px;
    transition: 0.35s;
}

.ui-discus-list~.read-more a:hover {
    background-color: #009AFF;
    color: #fff;
}

.read-more .ico-more {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADqElEQVR4Xu2agXXTMBCGkwmACUgngE6AmYB2gqYTABMAE1AmIJ2AdgLSCWgnIJ0AmCD8P+/c55baOp3uHCex3stzKJZ0/6fTSSdlOtnzMt1z/ZMRwOgBe05gnAJ77gD9BcH1ev0UsF/gUwn0+lmPwVK+8HkznU5/9zE4oVMAol9CxImI5vecco2XCeMcMPg9pIQAgHCKfodPrug2kQRwBhDn3hRcAUD4EQz8jM/M21Bpb4Xne4C48GrfBYDM72/i6l62dbVDAKcecaIYAMRXMIbiGeT6LAySx4DAOGEuRQAgfo6ev5p796lIT1hYmzIDGIj4WrcZggnAwMQXQcgGIHP+u9Xlguu9zo0JWQAk2v/cQMDTcmNgPMhZHXIBMNpzrR9yuQCAY62BagCyySGAbSjqqZADgK4/2wb1sHEFLzjQ2KoCMNCon9KnWhq1AH6gN6/EJmW41/9fwwsOU40lAUhKSwDbWA5TqbQGwBmUv91G9bD5CwAwLW8tGgDb6P614OQ06AQgG59fhtH/gzpPDPW6qljbfNa1MUoBqGBR7rb3FHXq4ywvCBRPWxiIc7PPzj1BCsBHdPghYyTvlh4JnksHT/gnvg5mhiX5E+pSx6MlDAB7c4BwT7y0Oc/0giIAHMFXGR7AV+9tQAogeIinPZfwgNb8JeUBFgAeELzE05YrAGD8ME0BK4ASCJ7iNwrAAsFbfPEUYPTMWQUeczNtTIgQT3uKgqAHAI0nRIkvBsDgkbsRaos3bZ7A9+/Wef7DsNa39cm/F22EeNlh2QrnQJg0MzZn8bTDvhWW0eC2ltfaXqX1oCJAPK/ZO88xNNlgRDr8H4QA8Rwwl3SYBCMORJp5wxx95CY5Go8sPxAJmga18cwcWSLEJ92fHSenQEBU1oycxzt+h6ICYYXncw/LemjjFsFvpulH5QECgBnV/l6MCAT+MuONhuwG3+lMfx/apfYAAcCNEaeC11GXNyduqWdhl6MCocLTa3vsDUB9J1h3nOUBdaWgTUspDFXUL5oCzcoDg2ASTz0mDxiYJ5jFFwNoxASuDn0HRga8IwS8ZcncKfKAhidwdVj0uEReoq95TrRvg+QCoAGCmyVmj1E7xlsRXjTqTRiuAB7EBt7Kep0j3BAsRpxe5lpCADRAMJWe41MZYFA0R3rRPDFyVY/GQgE0jZWbZgIhDBZ+r39fzJ+38eSJhaJ5rc2/hZfeAIQrMXYwAjCC25lqowfszFAahYweYAS3M9X+AlIzjlA1afutAAAAAElFTkSuQmCC") no-repeat center;
    background-size: 90%;
    border-radius: 50%;
    transform: rotate(-90deg);
}

/* ui join */
.ui-join {
    position: relative;
    margin-bottom: 30px;
    width: 100%;
    min-height: 400px;
    background: transparent url("http://img.54xdj.com/join.jpg") no-repeat center;
    background-size: cover;
}

.ui-join .ui-group-wrapper {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 100px;
    align-items: flex-start;
    justify-content: center;
}

.ui-join .avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-40px);
    transition: 0.4s;
}

.ui-join .info {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 10px 20px;
    margin-left: 50px;
    min-height: 200px;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(40px);
    transition: 0.4s;
}

.ui-join .ui-group-wrapper:hover .avatar img {
    transform: translateX(0px);
    opacity: 1;
    visibility: visible;
}

.ui-join .ui-group-wrapper:hover .info {
    transform: translateY(0px);
    opacity: 1;
    visibility: visible;
}

.ui-join .info::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 24px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 24px solid #fff;
}

.ui-join .info h3 {
    font-size: 36px;
    line-height: 60px;
}

.ui-join .info p {
    font-size: 24px;
    line-height: 50px;
    color: #666;
}

.ui-join .info a {
    display: inline-flex;
    justify-content: center;
    padding: 8px 24px;
    min-width: 150px;
    color: #fff;
    background-color: #009AFF;
    border-radius: 4px;
    transition: 0.35s;
}

.ui-join .info a:hover {
    opacity: 0.7;
}

/* ui partner */
.ui-partner {
    margin-bottom: 20px;
}

.ui-partner .header .text {
    background-color: #F5F8F9;
}

.list-partner {
    display: flex;
    flex-wrap: wrap;
}

.list-partner li {
    padding: 5px;
    width: 240px;
}

.list-partner li a {
    display: block;
    transition: 0.35s;
}

.list-partner li a:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

.list-partner li a img {
    width: 230px;
    height: 110px;
    vertical-align: bottom;
}

.ui-wrapper {
    display: flex;
    justify-content: space-between;
}

.ui-wrapper .ui-left {
    padding-right: 10px;
    width: 850px;
}

.ui-wrapper .ui-right {
    padding-left: 10px;
    width: 350px;
}

.ui-release .header {
    position: relative;
    padding: 10px;
    line-height: 24px;
    font-size: 16px;
    border-bottom: 1px solid #efefef;
}

.ui-release .header::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 0;
    bottom: 12px;
    width: 4px;
    background-color: #009AFF;
}

.ui-release .ui-release-user {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px 10px;
}

.ui-release .ui-release-user img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    vertical-align: bottom;
}

.ui-release .ui-release-user .info {
    padding: 10px;
    min-width: 210px;
    color: #999aaa;
}

.ui-release .ui-release-user .info h4 {
    margin: 0;
    line-height: 34px;
    font-size: 16px;
    color: #666;
}

.ui-release .ui-release-user .info p {
    line-height: 24px;
    font-size: 14px;
    color: #9d9d9d;
}

.ui-release .desc {
    padding: 30px;
    min-height: 90px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
}

.ui-release .desc .desc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ui-release .desc .desc-item>div:nth-child(1) {
    line-height: 22px;
    color: #4a4d52;
}

.ui-release .desc .desc-item>div:nth-child(2) {
    color: #999aaa;
    line-height: 22px;
    padding: 3px 0;
}

.ui-release .desc p {
    line-height: 24px;
    color: #666;
}

.ui-wrapper .ico-tags {
    width: 100%;
}

.ui-example .header {
    position: relative;
    padding: 5px 0 0 18px;
    font-size: 16px;
    line-height: 34px;
    border-bottom: 1px dashed #ddd;
}

.ui-example .header::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 0;
    width: 10px;
    height: 10px;
    background-color: #009AFF;
}

.ui-example .ui-example-content {
    padding: 10px 0;
}

.ui-example .ui-example-content .btn {
    color: #fff;
}

.ui-wrapper .media-list {
    padding: 10px;
    background: #fff;
}

.ui-wrapper .media-list .media {
    padding-top: 15px;
    border-top: 1px dashed #ddd;
}

.ui-wrapper .media-list .media-object {
    width: 40px;
    height: 40px;
    vertical-align: bottom;
    border-radius: 50%;
}

.ui-wrapper .media-list .media-heading {
    font-size: 12px;
}

.ui-wrapper .media-list .media-heading span {
    color: #9d9d9d;
}

.ui-wrapper .media-list .media-body p {
    margin-bottom: 5px;
    min-height: 30px;
    line-height: 22px;
    color: #666;
    font-size: 12px;
}

.ui-wrapper .media-list .ref {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.media-list .ref-item a {
    font-size: 12px;
    color: #999;
    transition: 0.333s;
}

.media-list .ref-item a:hover,
.media-list .ref-item a.active,
.media-list .ref-item a:hover .fa,
.media-list .ref-item a.active .fa {
    color: #009AFF;
}

.media-list .ref-item .fa {
    color: #999;
}

.media-list .ref-item .glyphicon {
    margin-right: 3px;
}

.media-list .ref-item:not(:last-child) {
    margin-right: 20px;
}

/* 新闻 */
.news-head {
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.news-head .news-title {
    line-height: 34px;
    font-size: 18px;
    font-weight: 600;
}

.search-group {
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-group input {
    display: inline-block;
    padding: 6px 10px;
    height: 34px;
    border: 1px solid #eee !important;
    outline: none !important;
    transition: 0.3s;
}

.search-group input:focus {
    border-color: #2BAAFB;
}

.search-group button {
    display: inline-block;
    height: 34px;
    width: 40px;
    border: 1px solid #eee;
    border-left: none;
    background-color: transparent;
    outline: none !important;
    transition: 0.3s;
}

.search-group button:hover {
    background-color: #2BAAFB;
    border-color: #2BAAFB;
    color: #fff;
}

.news-item {
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    border-bottom: 1px solid #f5f5f5;
}

.news-item .thumbnail {
    position: relative;
    display: inline-flex;
    padding: 0;
    margin-bottom: 0;
    border: none;
}

.news-item .thumbnail a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: 0.35s;
}

.news-item .thumbnail:hover a {
    opacity: 1;
    visibility: visible;
}

.news-item .thumbnail:hover a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAEYUlEQVR4Xu1bgXXTMBBNJoANaCdomYBkAsoGYQJgAsIElAlIJ6BMQDJB2wkIE0AnCP/3nXmKfJLOtmyLJHpPz6kjyff/fUmnczqdHHmZHjn+yYmAkwL+EwZ2u90lTH2FeoXKz88d0+/xmfUWdTOdTv9YYRU/BQD8DGA+oi6MoLZotwQJN5b2RRMA8AT92fO2BRfbUBHzlBqKJQDg6fWlFW2gHdXwBiSQDLUUSQDAf01IfiMe5lznesD6IoAxqoTiCEiA/wBvXmtAZZFc4bsL5fs1+s21fkUREAH/QEXEpFyBwxicNpw+fuFU4C6xV4ohIAF+llrMXFQBErYY47xIAnKCd5TAue9Ph5e+ikZXQB/gSQLGneHyw/P4FxDw3r03KgF9gXdUsPMIYJRIYv6V0QjoG7yoYI0rw+eqlEHAEOCFAG6Z7/Y8DgmMqoChwAcU8AD8DJrGmQJDghcCfuPqnhrHmwIAz2PsN29R4p8Mchrt88oYtVtyivzpfXEDBSxGUUAgOOkFvHifZJN0t9SiwcF2AWVf7hO8prZHeN+dDk/EDEaAeIWGUYJr1FWT8NYie3kGFzkGQD7YT3je0h9nUAKsINq2kxOhBv4XxrzUCD8YAiLgH2WRVZMiB0FABDzF9BaeX4VUlZUAGMKoi/N8i8rkhTk7K4skszrfG/YLzfkk+KyLoBLkEIi/DamO8PqStHMLCV08XxmSRQGBCE/ddnwGAn2jsk2s9ibPZyMgEt7Wzt5G8GxWS1y4fXN4PgsBXWL7SN9auNoX+E5rwCGAb03AoYBvRcBI4M9g7B1qLZZP7fOh/b/VGtAR/AwP9ZOUtCM652XFZz7/tQImuVtkI6ALeAGxwJWvvNySBC9917i6uT3e7gzePAW6ghcQlO8W9ZkwYAIvff3jbRbwJgJygK9cjrFIAsHc+y8oUlKVvZ/T6BZ9SWSWEo0E8VC+ROD7eb/0lszIgqrBIEEChs7hNbA5a1OVAJEqE4r+tnMwnq9YDBGwRAP/FXMwq9LVJZLBZRKTR9s1KpOX5qN0l+eHCPDfqfEZcxhF47IWURvjA/eFRfIglcuIGgGBud+LQQHwxGbeIrsSoRGgyT96PG1jRAR8b2rT7NQIoMz3oi5IP0vipDIgAT5bkGNxjIWADfDPLINZ2pQEnvYOSkBp4K0ETHJMgRLBhwjIvgiWCj5EgPZisfU2WDJ4lQDehNFZAqHSwccI0KbBFh0YD5hCVC+89TeIQbe62O4UOwwRcJW8qMbgPRrPWCFYAJ6vyEhi9hyeZatt0iZ2HF5gID+FVY29wgdW/ujoSRHicf4ykzmEWcCIYjxf2ZdKiNCL2g+PXXxUBT2tedttVxx4GpcMcSNZIavS+H6ev/RmZre4kiRA5M2t8Ro19E8JIWDMIVw1zf8NyZKJACGBEuf8XhiIIHD+49JqSDBtnmUmwB1cMrTVu38mMrgQci3gNWvWtg2oJn1aEdDkAaW3PRFQuof6tu/oFfAXrjBMX31GQUYAAAAASUVORK5CYII=") no-repeat center;
    opacity: 0.7;
}

.news-item .thumbnail img {
    width: 240px;
    height: 144px;
}

.news-item .news-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    width: 300px;
    margin-left: 15px;
}

.news-item .news-info h4 {
    margin: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-item .news-info p {
    margin-bottom: 0;
    color: #999;
}

.news-item .news-info a {
    text-decoration: none !important;
    color: #2BAAFB;
}

.news-item .news-info span {
    color: #ccc;
}

.news-item .news-info .fa {
    color: #9d9d9d;
}

/* 分页 */
.main-container .pagination li a {
    margin: 0 2px;
    border: none;
    background-color: #eee;
    color: #9d9d9d;
    border-radius: 0;
}

.main-container .pagination li.disabled a {
    background-color: #dfdfdf;
    color: #9d9d9d;
    cursor: text;
}

.main-container .pagination li:not(.disabled) a:hover,
.main-container .pagination li.active a {
    background-color: #2BAAFB;
    color: #fff;
}


/* 标题导航 */
.main-title li a {
    display: block;
    padding: 6px 12px;
    background-color: #f6f6f6;
    color: #9d9d9d;
    text-decoration: none !important;
}

.main-title li a.current {
    background-color: #2BAAFB;
    color: #fff;
}

.main-container .al-show {
    padding-bottom: 20px;
}

.main-container .al-show .thumbnail {
    position: relative;
    padding: 0;
    border: 0;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.main-container .al-show .thumbnail img {
    width: 100%;
    height: 240px;
}

.main-container .al-show .thumbnail::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: #f5f5f5;
    font-size: 48px;
    line-height: 240px;
    text-align: center;
    transition: 0.3s;
    z-index: -1;
}

.main-container .al-show .thumbnail:hover::before {
    content: "\f0c1";
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.main-container .al-show p {
    color: #9d9d9d;
}

.main-container .al-show p.caption {
    color: #2BAAFB;
    font-size: 16px;
    font-weight: 600;
}

/* 新闻详情 */
.news-detail .news-header {
    padding: 10px 20px;
    margin-bottom: 30px;
    text-align: center;
    border-bottom: 1px solid #efefef;
}

.news-detail .news-header h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 60px;
    margin-top: 60px;
}

.news-detail .news-header p {
    font-size: 12px;
    line-height: 30px;
    color: #9d9d9d;
}

.news-detail .news-infomation {
    padding: 20px 0;
    margin-bottom: 20px;
}

/* 博客 */

.ui-blog .blog-item {
    position: relative;
    padding: 20px;
    display: flex;
    background-color: #fff;
    border: 1px solid #f2f2f2;
}

.ui-blog .blog-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20px;
    width: 4px;
    height: 28px;
    background-color: #237BE0;
    z-index: 10;
}

.ui-blog .blog-item .blog-image-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    min-width: 200px;
    height: 150px;
    overflow: hidden;
}

.ui-blog .blog-item .blog-image-box::after {
    content: attr(data-name);
    position: absolute;
    left: 0;
    top: 0;
    min-width: 80px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #237BE0;
    color: #fff;
    z-index: 100;
}

.ui-blog .blog-item .blog-image-box img {
    height: 150px;
    transition: 0.6s;
}

.ui-blog .blog-item .blog-image-box:hover img {
    transform: scale(1.2);
}

.ui-blog .blog-item:not(:last-child) {
    margin-bottom: 20px;
}

.ui-blog .blog-item .blog-wrapper {
    padding-left: 20px;
}

.ui-blog .blog-item .blog-wrapper .title {
    margin: 0;
    height: 30px;
    font-size: 20px;
    font-weight: 600;
    transition: color 0.333s;
}

.ui-blog .blog-item .blog-wrapper .title a:hover {
    color: #237BE0;
}

.ui-blog .blog-item .blog-wrapper .wrapper {
    height: 90px;
    color: #777;
}

.ui-blog .blog-item .blog-wrapper .wrapper p {
    margin: 0;
    line-height: 24px;
}

.ui-blog .blog-item .blog-wrapper .group {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    height: 30px;
    color: #999;
}

.ui-blog .blog-item .blog-wrapper .group .item .glyphicon {
    margin-right: 3px;
}

.ui-blog .blog-item .blog-wrapper .group .item:not(:last-child) {
    margin-right: 10px;
}

.ui-blog .blog-item .blog-wrapper .more {
    position: absolute;
    right: -1px;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 32px;
    background-color: #237BE0;
    color: #fff;
    transition: 0.333s;
}

.ui-blog .blog-item .blog-wrapper .more:hover {
    background-color: #5e5e5e;
}

/* 博客侧边栏 */
.ui-blog-aside {
    padding-left: 15px;
}

.blog-aside-group {
    margin-bottom: 20px;
    border: 1px solid #f2f2f2;
    background-color: #fff;
}

.blog-aside-group .header {
    position: relative;
    padding-left: 30px;
    line-height: 34px;
    border-bottom: 1px solid #f2f2f2;
    font-weight: 600;
    font-size: 14px;
    background-color: #f5f5f5;
}

.blog-aside-group .header::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 2px;
    width: 26px;
    height: 26px;
    background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAk0lEQVQ4T2NkoBAwgvTv27fvASMjozyaWRccHR0NofIXgPL6aPIPgPKKMAMOODk5OSAr2L9//3+gArA8MhumBmgpWM8wMgAUiPeRw+D///+GQD8KQAPxA1D+PJq8IlBeARwGlADqGABKB0BXgDAyMED2AlDiApq8AtwLsDgdTQeomQmYDi4CA8kAV2YCyj+kSjoAANFTtBHg7iFnAAAAAElFTkSuQmCC") no-repeat center;
}

.blog-aside-group .content {
    padding: 15px 10px;
    font-size: 14px;
}

.blog-aside-group .group-list.list-thumbnail li {
    position: relative;
    padding-left: 100px;
    min-height: 75px;
}

.blog-aside-group .group-list.list-thumbnail li:not(:last-child) {
    margin-bottom: 15px;
}

.blog-aside-group .group-list.list-thumbnail .image-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 75px;
    overflow: hidden;
}

.blog-aside-group .group-list.list-thumbnail .image-box a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 75px;
}

.blog-aside-group .group-list.list-thumbnail .image-box img {
    width: 75px;
    height: 75px;
    transition: 0.6s;
}

.blog-aside-group .group-list.list-thumbnail .image-box:hover img {
    transform: scale(1.2);
}
.image-box-li{
    position: absolute;
    top: 0;
    left: 0;
    width: 75px !important;
    height: 75px;
    overflow: hidden;
}
.image-box-li:hover img{
    transform: scale(1.2);
}

.blog-aside-group .group-list.list-thumbnail .wrapper {
    padding-left: 5px;
    height: 75px;
    padding-left: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.blog-aside-group .group-list.list-thumbnail .wrapper .title {
    max-height: 50px;
    line-height: 20px;
    font-size: 14px;
    color: #666;
}

.blog-aside-group .group-list.list-thumbnail .wrapper .title a:hover {
    color: #009AFF;
}

.blog-aside-group .group-list.list-thumbnail .wrapper .group {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 25px;

}

.blog-aside-group .group-list.list-thumbnail .wrapper .group span {
    color: #9d9d9d;
    font-size: 12px;
    display: flex;
    align-items: center;
}

.blog-aside-group .group-list.list-catalog {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

.blog-aside-group .group-list.list-catalog li {
    width: 50%;
    overflow: hidden;
}

.blog-aside-group .group-list.list-catalog li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 34px;
    transition: 0.15s;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.blog-aside-group .group-list.list-catalog li:nth-child(odd) a {
    border-right: 1px solid #ddd;
}

.blog-aside-group .group-list.list-catalog li a:hover {
    background-color: #237BE0;
    color: #fff;
    border-color: #237BE0;
}

.blog-aside-group .group-list.list-only li {
    position: relative;
    padding-left: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blog-aside-group .group-list.list-only li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    height: 12px;
    width: 12px;
    background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAW0lEQVQ4T2NkoBAwUqifgTYGFBQUGIBcNmHChAuEXIjVBVADNgA1BxAyBKcXiDUEbxgQYwjBQCRkCG0NIGQ7KIZoE4jE2AxLH/jSAfkJiVDqQ5YnGAuEDKPYAABORzARUZw3uwAAAABJRU5ErkJggg==") no-repeat center;
}

.blog-aside-group .group-list.list-only li a {
    line-height: 30px;
    transition: color 0.35s;
    font-size: 14px;
}

.blog-aside-group .group-list.list-only li a:hover {
    color: #237BE0;
}

/* 博客详情 */
.ui-blog-detail .blog-detail-wrapper {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
    /*min-height: 400px;*/
    background-color: #fff;
    border: 1px solid #f5f5f5;
    overflow-wrap: break-word !important;
   
}

.ui-blog-detail .blog-detail-wrapper .wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 5px 10px;
    line-height: 34px;
    background-color: #f8f8f8;
}

/* 编辑框 */
.ui-reply #message-reply {
    width: 100%;
    min-height: 120px;
    border: none;
    outline: none;
    resize: none;
}

.ui-reply .btn-reply {
    display: inline-block;
    padding: 15px 100px;
    margin-top: 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    font-size: 14px;
    transition: 0.333s;
}

.ui-reply .btn-reply:hover {
    background-color: #237BE0;
    color: #fff;
    border-color: #237BE0;
}

.grid-container .header {
    position: relative;
    padding: 40px 0;
    text-align: center;
}

.grid-container .header::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-bottom: 1px solid #efefef;
    z-index: -1;
}

.grid-container .header .text {
    background-color: #F5F8F9;
}

.grid-container .header .text {
    display: inline-block;
    padding: 10px 20px;
    font-size: 36px;
}