body {
    background-color: #F7F7F7;
}

.banner {
    height: 200px;
}

.small {
    height: 56px;
    border-bottom: 1px solid #e5e5e5;
    text-align: center;
    background-color: #ffffff;
}

.small > .w1640 > div {
    display: inline-block;
    width: 160px;
    height: 56px;
}

.small > .w1640 > div > a {
    display: flex;
    align-items: center;
    width: 160px;
    height: 100%;
    color: #333333;
    line-height: 56px;
}

.small > .w1640 > div > a > img {
    margin: 0px 10px 0px 25px;
}

.small > .w1640 > div > a.on, .small > .w1640 > div > a:hover {
    background-color: #3fb2a0;
    color: #ffffff;
   
}

.small > .w1640 > div > a.on > img,.small > .w1640 > div > a:hover > img {
    filter: brightness(100);
}

.catalog {
    padding: 47px 0 45px 0;
    text-align: center;
    font-size: 36px;
    line-height: 1;
}

.general {
    padding: 1em;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.general-nav {
    width: 100%;
    position: relative;
    line-height: 3;
    border-bottom: 1px solid #ddd;
    margin-bottom: 1.2em;
}

.general-nav::after {
    position: absolute;
    content: "";
    z-index: 1;
    left: 0;
    bottom: -1px;
    width: 35px;
    height: 2px;
    background-color: #ea0001;
}

.sidebar {
    width: 270px;
    overflow: hidden;
    margin: 35px 0px 0px 10;
}

.sidebar > .sidebar-header {
    height: 170px; 
    overflow: hidden; 
    color: #ffffff; 
    background: #0068a5;
    position: relative;
}

.sidebar > .sidebar-header::after {
    position: absolute;
    content: "";
    width: 130px;
    height: 31px;
    background: url("../../images/computer/catalog.png");
    right: 10px;
    bottom: 10px;
}

.sidebar > .sidebar-header > p {
    margin-left: 20px;
}

.sidebar > .sidebar-header > p:nth-child(1) {
    font-size: 28px;
    margin-top: 30px;
}

.sidebar > .sidebar-header > p:nth-child(2) {
    font-size: 14px;
}

.sidebar > .sidebar-menu {
    margin-bottom: 20px;
}

.sidebar > .sidebar-menu > a {
    display: block;
    height: 40px; 
    line-height: 40px; 
    margin: 10px 0px; 
    text-indent: 1em; 
    overflow: hidden; 
    background: url("../../images/computer/triangle.png") no-repeat 10px center, #effbff;
    background-size: 10px;
}

.sidebar > .sidebar-menu > a > span { 
    color: #333333;
    padding-left: 10px;
}

.sidebar > .sidebar-menu > a:hover, .sidebar > .sidebar-menu > a.on {
    background: url("../../images/computer/trianglehover.png") no-repeat 10px center, #0068a5;
    background-size: 10px;
   
}

.sidebar > .sidebar-menu > a:hover > span, .sidebar-menu > a.on > span { 
    color: #ffffff;
}

.sidebar > .sidebar-hot {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 10px 0px 20px 0px;
}

.sidebar > .sidebar-hot > div {
    width: 130px;
    overflow: hidden;
    margin-top: 10px;
}

.sidebar > .sidebar-hot > div > a > img {
    width: 130px;
    height: auto;
    border-radius: 6px;
}

.sidebar > .sidebar-hot > div > a > span {
    display: block;
    width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.sidebar > .sidebar-contact > a {
    display: block;
    line-height: 2;
    background-color: #f2f2f2;
    text-indent: 1em;
    margin: 0.5em 0em;
}

.contacts-haed {
    margin-top: 20px;
    height: 40px;
    overflow: hidden;
    line-height: 40px;
    color: #ffffff;
    font-size: 18px;
    background: #001431;
    text-indent: 2em;
}

.contacts {
    margin-top: 20px;
}

.contacts > li {
    line-height: 2;
}


.general-right {
    width: 1200px;
    min-height: 500px;
}

.pagination {text-align: right;}

.content{ width:100%; position:relative; overflow:hidden; }
.title{ padding-top:1em; text-align:center; font-size:20px; font-weight:bold; }
.content .attr{ padding-top:20px; color:#999; text-align:center; font-size:0.8em;}
.content .artContent{ position:relative; padding:1.5em 0 2em 0; width:100%; overflow:hidden;}
.content .artContent, .content .artContent div, .content .artContent p{ line-height:2.2; color:#666;}
.artContent img{ max-width:100%; height:auto; margin:10px 0; }

.layui-laypage .layui-laypage-curr .layui-laypage-em, .layui-progress-bar{
    background-color: #00736d;
}

.layui-laypage .layui-laypage-count, .layui-laypage .layui-laypage-skip {
    background-color: unset;
}

.art_list {
    display: flex;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #CFCFCF;
    border-radius: 0;
    height: 120px;
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.16);
    margin-bottom: 30px;
}
.art_list:hover {
    box-shadow: 18px 18px 26px rgba(0, 0, 0, 0.2) !important;
}

.art_list > .date {
    color: #ED6C0F;
    width: 144px;
    height: 100%;
    margin-top: 20px;
    text-align: center;
    float: left;
    overflow: hidden;
    position: relative;
    border-right: 1px solid #D1D1D1;
    line-height: 1.1;
    transform: skewX(-15deg);
    margin-top: 0;
    margin-left: -16px;
    text-indent: 16px;
    z-index: 5;
}
.art_list > .date > p {
    transform: skewX(15deg);
    line-height: 1;
}
.art_list > .date > p:nth-child(1) {
    color: #666;
    font-size: 16px;
    height: 16px;
    margin-top: 31px;
    margin-left: -20px;
    overflow: hidden;
}
.art_list > .date > p:nth-child(2) {
    color: #3fb2a0;
    font-size: 36px;
    margin: 12px auto 5px;
}
.art_list > .date::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background-color: #3fb2a0;
    opacity: 0;
    overflow: hidden;
    -webkit-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.art_list:hover > .date * {
    color: #fff !important;
    position: relative;
    z-index: 5;
}
.art_list:hover > .date::after{
    width: 100%;
    height: 100%;
    z-index: 4;
    opacity: 1;
}

.art_list > .info {
    width: 950px;
    overflow: hidden;
    margin-left: 26px;
    font-size: 14px;
    color: #666;
}

.art_list > .info > p:nth-child(1) {
    font-size: 20px;
    margin: 24px 0;
    color: #333;
}

.art_list > .icon {
    width: 28px;
    height: 28px;
    overflow: hidden;
    background-image: url("../../images/computer/n2.png");
    background-size: auto 28px;
    margin-top: 46px;
} 

.art_list:hover > .icon {
    background-image: url("../../images/computer/n1.png");
}

.art_news {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    background-color: #fff;
    border-radius: 8px;
}

.art_news_pic {
    width: 425px;
    height: 264px;
    overflow: hidden;
    position: relative;
    z-index: 5;
    background-color: #fff;
}

.art_news_pic > div {
    width: 425px;
    height: 264px;
    overflow: hidden;
    -webkit-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
    background-size: cover;
    background-position: center;
}

.art_news:hover > .art_news_pic > div {
    transform: scale(1.08, 1.08);
}

.art_news_info {
    width: 665px;
    height: 264px;
    padding-right: 46px;
    padding-left: 60px;
}

.art_news_info > .tit {
    font-size: 28px;
    color: #333;
    margin: 42px 0 29px 0;
    width: 670px;
    line-height: 1;
}

.art_news_info > .short {
    text-indent: 2em;
}

.art_news_info > .more {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.art_hover {
    position: relative;
}

.art_hover::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background-color: #3fb2a0;
    opacity: 0;
    overflow: hidden;
    -webkit-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.art_hover:hover::after {
    width: 100%;
    height: 100%;
    z-index: 4;
    opacity: 1;
}

.art_hover:hover * {
    color: #fff !important;
    position: relative;
    z-index: 5;
}

.listImg {
    display: flex;
    flex-wrap: wrap;
}

.listPic {
    width: 386px;
    height: 386px;
    overflow: hidden;
    background-color: #ffffff;
    margin: 40px 7px 0px 7px;
    border-radius: 8px;
}

.listPic:nth-child(-n + 3) {
    margin-top: 0;
}

.listPic:hover {
    color: #333333;
    box-shadow: 18px 18px 26px rgba(0, 0, 0, 0.2) !important;
}

.listPic > .listPic_img {
    height: 241px;
    overflow: hidden;
    margin: 0 !important;
    position: relative;
}
.listPic > .listPic_img > div {
    max-width: 100%;
    height: 100%;
    transition-duration: 0.8s;
}
.listPic:hover > .listPic_img > div {
    transform: scale(1.08, 1.08);
}

.listPic > .tit {
    color: #333;
    font-size: 18px;
    line-height: 30px;
    margin: 23px 20px 0px 20px;
    height: 73px;
    overflow: hidden;
}

.listPic > .date {
    display: flex;
    justify-content: space-between;
    margin: 0px 20px;
}

.listPic > .date > span:nth-child(2) {
    width: 28px;
    height: 28px;
    background: url("../../images/computer/n2.png") no-repeat;
    background-size: auto 28px;
}

.listPic:hover > .date > span:nth-child(2) {
    background: url("../../images/computer/n1.png") no-repeat;
    background-size: auto 28px;
}

.video {
    margin: auto auto;
}