body {background-color: #fff;box-sizing: border-box;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Segoe UI", "Helvetica Neue", "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei", 微软雅黑, sans-serif;moz-box-sizing: border-box;webkit-box-sizing: border-box;}

.content {align-items: center;flex-direction: column;display: flex;padding-right: 0px;box-sizing: border-box;justify-content: flex-start;margin-right: 0px;padding-bottom: 0px;flex-wrap: nowrap;width: 100%;margin-bottom: 0px;padding-top: 0px;padding-left: 0px;margin-top: 0px;}
.content .body {padding: 0 0 20px 0;margin-right: 0px;flex-wrap: nowrap;height: 100%;box-sizing: border-box;flex-direction: column;display: flex;width: 1200px;}
.banner{width:100%;height: 160px;}

.breadcrumb-row{margin-top:10px;}

.sa-box{position: relative;padding: 0 15px;overflow: hidden;font-size: 16px; height: 400px;margin-top: 25px;cursor:pointer;}
.sa-box .box-img{height:180px;overflow: hidden;position: relative;}
.sa-box .box-img .el-image{height: auto;width: 100%;position: absolute;transform: translateY(-50%);top: 50%;left: 0;transition: all 0.5s;}
.sa-box .box-text{background: #f8f8f8;text-align: left;padding: 20px 20px 25px 20px;height: 250px;}
.sa-box .box-text .title{font-size: 1em;font-weight: bold;line-height: 1.625em;overflow: hidden;margin-bottom: 10px;}
.sa-box .box-text .info {font-size: 0.875em;height: 46px;overflow: hidden;margin-bottom: 0px;}
.sa-box .box-text .text{font-size: 0.875em;line-height: 1.6875em;color: #666;clear: both;max-height: 190px;}
.sa-box .box-b-line{position: absolute;width: calc(100% - 30px);left: 15px;right: 15px;bottom: 0;height: 4px;background-color: #c7d3d9;}
.sa-box .box-b-line .b-line-r{position: absolute;left: 0;width: 20%;height: 100%;background-color: #0c5ca8;overflow: hidden;}
.sa-box:hover .box-img .el-image {transform: translateY(-50%) scale(1.1);left: 0;top: 50%;width: 100%;height: auto;}
.sa-box:hover .box-text{background: #f2f2f2;}
.sa-box:hover .box-b-line .b-line-r{animation: saBoxHover 0.5s; animation-fill-mode:forwards;}
@keyframes saBoxHover{ from{width: 20%;} to{width:100%;} }

@media (min-width: 961px) and (max-width: 1199px) {
    .content .body {width: 100%;}
    .breadcrumb-row{margin :10px;}

    .sa-box{padding: 0 12px;font-size: 15px; height: 360px;margin-top: 20px;}
    .sa-box .box-img{height:160px;}
    .sa-box .box-text{padding: 10px 10px 15px 10px;height: 200px;}
    .sa-box .box-text .title{margin-bottom: 8px;line-height: 1.2em;}
    .sa-box .box-text .text {font-size: 0.85em;line-height: 1.65em;}
    .sa-box .box-b-line{width: calc(100% - 24px);left: 12px;right: 12px;}
}

@media (min-width: 769px) and (max-width: 960px) {
    .content .body {width: 100%;}
    .breadcrumb-row{margin :10px;}

    .sa-box{padding: 0 12px;font-size: 15px; height: 310px;margin-top: 15px;}
    .sa-box .box-img{height:140px;}
    .sa-box .box-text{padding: 5px 5px 10px 5px;height: 170px;}
    .sa-box .box-text .title{font-size: 0.9em;margin-bottom: 5px;line-height: 1em;}
    .sa-box .box-text .text {font-size: 0.8em;line-height: 1.5em;}
    .sa-box .box-b-line{width: calc(100% - 24px);left: 12px;right: 12px;}
}

@media (max-width: 768px) {
    .content .body {width: 100%;}
    .breadcrumb-row{margin :10px;}

    .sa-box{padding: 0 5px;font-size: 15px; height: 280px;margin-top: 10px;}
    .sa-box .box-img{height:130px;}
    .sa-box .box-text{padding: 5px 5px 10px 5px;height: 150px;}
    .sa-box .box-text .title{font-size: 0.9em;margin-bottom: 5px;line-height: 1em;}
    .sa-box .box-text .text {font-size: 0.8em;line-height: 1.5em;max-height: 130px;}
    .sa-box .box-b-line{display: none;}
}