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-right: 0px;
 margin-right: 0px;
 padding-bottom: 20px;
 flex-wrap: nowrap;
 height: 100%;
 padding-left: 0px;
 box-sizing: border-box;
 padding-top: 20px;
 flex-direction: row;
 display: flex;
 width: 1200px;
}

.content .body .left {
 padding-right: 0px;
 padding-bottom: 0px;
 flex-wrap: nowrap;
 height: 100%;
 padding-left: 0px;
 box-sizing: border-box;
 padding-top: 0px;
 flex-direction: column;
 display: flex;
 width: 200px;
 margin-top: 0px;
 position: fixed;
}

.content .body .left .title {
 border-bottom-style: dashed;
 border-bottom-width: 1px;
 height: 40px;
 font-size: 16PX;
 padding-left: 10px;
 color: #C0C4CC;
 word-wrap: break-word;
 border-bottom-color: #C0C4CC;
 padding-top: 10px;
 flex-direction: row;
 display: inline-block;
 margin-top: 0px;
 line-height: 30px;
}

.content .body .left .sub-title-sel {
 background-color: #F2F6FC;
 color: #409EFF;
 flex-direction: row;
 word-wrap: break-word;
 display: inline-block;
 font-size: 16PX;
 padding-top: 10px;
 padding-left: 10px;
 margin-top: 2px;
 height: 40px;
 line-height: 30px;
}

.content .body .left .sub-title {
 height: 40px;
 font-size: 16PX;
 padding-left: 10px;
 color: #5F5F5F;
 word-wrap: break-word;
 padding-top: 10px;
 flex-direction: row;
 display: inline-block;
 margin-top: 0px;
 line-height: 30px;
}
.content .body .left .sub-title.active {
    background-color: #F2F6FC!important;
    color: #409EFF!important;
}

.content .body .right {
 padding-right: 0px;
 margin-right: 0px;
 padding-bottom: 0px;
 flex-wrap: wrap;
 min-height: 800px;
 align-items: flex-start;
 margin-bottom: 0px;
 padding-left: 20px;
 box-sizing: border-box;
 padding-top: 0px;
 flex-direction: row;
 display: flex;
 width: 1000px;
 margin-top: 0px;
 margin-left: 200px;
}

.content .body .right .ms-channel-path {
 margin-right: auto;
 padding-bottom: 0px;
 flex-wrap: nowrap;
 height: 30px;
 align-items: center;
 margin-left: auto;
 margin-bottom: 10px;
 padding-left: 0px;
 box-sizing: border-box;
 padding-top: 0px;
 flex-direction: row;
 display: flex;
 width: 100%;
 margin-top: 10px;
}

.content .body .right .ms-channel-path span {
 font-size: 16PX;
 color: #909399;
 word-wrap: break-word;
 flex-direction: row;
 display: inline-block;
}

.content .body .right .ms-channel-path .ms-channel-path-index {
 cursor: pointer;
 color: #000;
 text-decoration: none;
 font-size: 16PX;
 margin-bottom: 0px;
 margin-top: 0px;
}

.content .body .right .ms-channel-path>i {}

.content .body .right .ms-channel-path .ms-channel-path-link {
 cursor: pointer;
 color: #000;
 text-decoration: none;
 font-size: 16PX;
 margin-bottom: 0px;
 margin-top: 0px;
}

.content .body .right .list {
 padding-right: 0px;
 margin-right: 0px;
 padding-bottom: 0px;
 margin-bottom: 0px;
 /*position: absolute;*/
 padding-left: 0px;
 box-sizing: border-box;
 top: 70px;
 padding-top: 0px;
 flex-direction: row;
 display: flex;
 width: 980px;
 margin-top: 0px;
}

.content .body .right .list .list-body {
 margin-right: 0px;
 padding-bottom: 0px;
 flex-wrap: wrap;
 margin-bottom: 0px;
 /*position: absolute;*/
 padding-left: 0px;
 box-sizing: border-box;
 top: 120px;
 padding-top: 0px;
 flex-direction: row;
 display: flex;
 width: 988px;
 margin-top: 0px;
}

.content .body .right .list .list-body .product {
 padding-right: 0px;
 margin-right: 8px;
 padding-bottom: 0px;
 margin-bottom: 8px;
 padding-left: 0px;
 box-sizing: border-box;
 padding-top: 0px;
 background-color: #FFFFFF;
 flex-direction: column;
 display: flex;
 width: 320px;
 margin-top: 0px;
}

.content .body .right .list .list-body .product img {
 margin-right: 0px;
 padding-top: 0px;
 height: 100%;
 width: 100%;
 margin-bottom: 0px;
 margin-top: 0px;
}

.content .body .right .list .list-body .product a {
 text-align: center;
 flex-direction: row;
 word-wrap: break-word;
 display: inline-block;
 padding-right: 0px;
 padding-bottom: 0px;
 font-size: 16PX;
 padding-top: 10px;
 padding-left: 0px;
 margin-top: 10px;
 height: 48px; 
}
.content .body .right .list .list-body .product a.img-a{
 margin: 0 auto;
 min-height:220px;   
}

.content .body .right .list .page {
 flex-wrap: nowrap;
 height: 60px;
 align-items: center;
 bottom: 0px;
 justify-content: center;
 position: absolute;
 box-sizing: border-box;
 flex-direction: row;
 display: flex;
 width: 100%;
}

.content .body .right .list .page span {
 justify-content: center;
 font-size: 14px;
 word-wrap: break-word;
 flex-direction: row;
 display: inline-block;
}
@media (max-width: 768px){
    .content 
    {
            align-items:center;
            flex-direction:row;
            display:flex;
            padding-right:0px;
            box-sizing:border-box;
            justify-content:center;
            padding-bottom:0px;
            flex-wrap:nowrap;
            width:100%;
            margin-bottom:0px;
            padding-top:0px;
            padding-left:0px;
            margin-top:0px;
    }
.content .body {
padding-bottom: 20px;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
display: flex;
padding-right: 0px;
width: 100%;
box-sizing: border-box;
padding-top: 20px;
padding-left: 0px;
}

.content .body .left {
padding-bottom: 0px;
flex-wrap: nowrap;
flex-direction: column;
display: flex;
padding-right: 0px;
width: 90%;
box-sizing: border-box;
padding-top: 0px;
padding-left: 0px;
margin-top: 0px;
height: 100%;
}

.content .body .left .sub-title-sel {
background-color: #F2F6FC;
color: #409EFF;
flex-direction: row;
word-wrap: break-word;
display: inline-block;
font-size: 16PX;
padding-top: 10px;
padding-left: 10px;
margin-top: 2px;
height: 40px;
}

.content .body .left .sub-title {
color: #5F5F5F;
flex-direction: row;
word-wrap: break-word;
display: inline-block;
font-size: 16PX;
padding-top: 10px;
padding-left: 10px;
margin-top: 0px;
height: 40px;
}

.content .body .right {
padding-bottom: 0px;
flex-wrap: nowrap;
flex-direction: column;
display: flex;
padding-right: 0px;
width: 90%;
height: unset;
margin-bottom: 0px;
box-sizing: border-box;
padding-top: 0px;
padding-left: 0px;
margin-top: 0px;
}

.content .body .right .ms-channel-path {
align-items: center;
flex-direction: row;
display: flex;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
padding-bottom: 0px;
flex-wrap: nowrap;
width: 100%;
margin-bottom: 10px;
padding-top: 0px;
padding-left: 0px;
margin-top: 10px;
height: 30px;
}

.content .body .right .ms-channel-path span {
color: #909399;
flex-direction: row;
word-wrap: break-word;
display: inline-block;
font-size: 16PX;
}

.content .body .right .ms-channel-path .ms-channel-path-index {
cursor: pointer;
color: #000;
font-size: 16PX;
text-decoration: none;
margin-bottom: 0px;
margin-top: 0px;
}

.content .body .right .ms-channel-path .ms-channel-path-link {
cursor: pointer;
color: #000;
font-size: 16PX;
text-decoration: none;
margin-bottom: 0px;
margin-top: 0px;
}

.content .body .right .list {
margin-right: 0px;
padding-bottom: 0px;
flex-direction: column;
display: flex;
padding-right: 0px;
width: 100%;
margin-bottom: 0px;
box-sizing: border-box;
padding-top: 0px;
padding-left: 0px;
margin-top: 0px;
height: unset;
position: unset;
}

.content .body .right .list .list-body {
margin-right: 0px;
flex-wrap: wrap;
flex-direction: row;
display: flex;
width: 100%;
margin-bottom: 0px;
box-sizing: border-box;
margin-top: 0px;
justify-content: center;
position: unset;
}
.content .body .right .list .page {
position:unset;
}
.content .body .right .list .list-body .product {
background-color: #FFFFFF;
flex-direction: column;
display: flex;
padding-right: 0px;
box-sizing: border-box;
margin-right: 8px;
padding-bottom: 0px;
width: 90%;
margin-bottom: 8px;
padding-top: 0px;
padding-left: 0px;
margin-top: 0px;
}

.content .body .right .list .list-body .product img {
padding-bottom: 0px;
width: 100%;
padding-top: 0px;
margin-top: 0px;
height: 100%;
}

.content .body .right .list .list-body .product a {
padding-bottom: 0px;
text-align: center;
flex-direction: row;
word-wrap: break-word;
display: inline-block;
padding-right: 0px;
font-size: 16PX;
padding-top: 10px;
padding-left: 0px;
margin-top: 10px;
height: 48px;
}

}

.content .body .left a img {
    display: block;
    height: 30px;
    float: left;
    margin-right: 5px;
    width: 30px;
    border-radius: 15px;
}
.tool-list{
    padding: 10px;
    background: #fff;    
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.tool-list .top{
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    font-size: 16px;;
    border-bottom: 1px solid #eee;
    padding-left: 10px;
}


.tool-list .tool-ul{
    margin: 0;    
    padding: 10px 0;
}
.tool-list .tool-item{
    list-style: none;  
    display: inline-block;    
    width: 200px;    
    box-shadow: 0 0 5px #eee;
    padding: 5px;
    overflow: hidden;
    border-radius: 5px;
    margin: 0 5px 5px 0;  
    border: 1px solid #eee;  
}
.tool-list .tool-item:hover{
    box-shadow: 0px 0px 7px #333;
    transition: all 0.5s;    
}
.tool-list .item-top{
    height: 50px;
    line-height: 40px;
    padding: 5px;
    font-size: 16px;    
    font-weight: bold;
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 显示省略号 */
}
.tool-list .item-top img{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    margin-right: 5px;
    float: left;
}
.tool-list .tool-item .item-content{
    width: 100%;
    height: 40px; /* 字体大小16px，两行高度为16px * 2 + 行间距 */
    font-size: 12px;
    line-height: 20px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.tool-list .item-bottom{
    font-size: 14px;
    margin-top: 3px;
}
.tool-list .item-bottom span{
    display: block;
    width: 40%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;    
    border-radius: 4px;
    border: 1px solid #a8d2fc;
}
.tool-list .item-bottom span:hover{
    border-bottom: 1px solid #409EFF;
    background-color: #409EFF;
    transition: all 0.5s;
}
.tool-list .item-bottom span:hover a{
    color: #fff!important;
}
.tool-list .item-bottom .b-left{
    float: left;
}
.tool-list .item-bottom .b-right{
    float: right;
}