/* 产品详情CSS */

/* 顶部详情 */

.inner{
    width: 77%;
    margin: 0 auto;
}
.xq-header{

    margin-top: 100px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
}

/* 详情左 */
.xq-h-left{
    width: 7%;
}
.xq-h-left>ul{
    display: flex;
    flex-flow: column;
    height: 100%;
    justify-content: space-between;
}
.xq-h-left>ul>li{
    height: 27%;
    border:1px solid #e9e9e9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0px;
}


/* hover--------------- */
.xq-h-left>ul>li:hover{
    border: 1px solid #e50112;
}

/* 点击后的样式 */
.xq-h-l-li-clk{
    border: 1px solid #e50112 !important;

}

/* 详情中 图片 */
.xq-h-middle{
    display: flex;
    align-items: center;
    width: 50%;
}
.xq-h-m-img{
    margin-top: 50px;
}
.xq-h-m-img>ul>li{
    display: none;
}
/* 点击后显示 */
.xq-h-m-img-xs{
    display: block !important;
}



/* 详情右 */
.xq-h-right{
    width: 27%;
    justify-content: space-between;
    display: flex;
    flex-flow: column;
}
/* 字体样式 */
.xq-h-right>h1{
    margin-top: 35px;
    font-size: 30px;
    color: #222222;
}
.xq-h-r-txt{

}

/* 按钮 */
.xq-h-r-btn{
    background: #e50112;
    text-align: center;
    width: 135px;
    color: #fff;
    height: 43px;
}
/* :hover------ */

.xq-h-r-btn:hover{
    background: #ff0316;
    color: #fff;
}


/* 中间部分 */
.xq-middle{
    margin-bottom: 34px;
}
/* 顶部切换 */

.m-top{
    width: 100%;
    height: 108px;
    overflow: hidden;
    margin-bottom: 77px;
}
.m-top>ul{
    display: flex;
    align-items: center;
    height: 100%;
}
.m-top>ul>li{
    width: 20%;
    background-color: #e50112;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 2px solid #f6fbfe;
    border-bottom: 2px solid #f6fbfe;
}

/* hover--- */
.m-top>ul>li:hover{
    background-color: #fff;
}
/* .m-top>ul>li:hover .m-top-img{
    animation-play-state:paused;
    text-indent: -10000px;
}*/
 .m-top>ul>li:hover img{
    animation-play-state:paused;
    filter: drop-shadow(10000px 0 #e50112)
} 
.m-top>ul>li:nth-child(1):hover .m-top-img>img{
    content: url('../imgs/cpxq-middle-top-1.png');
}

.m-top>ul>li:nth-child(2):hover .m-top-img>img{
    content: url('../imgs/cpxq-middle-top-2-2.png');
}


.m-top>ul>li:nth-child(3):hover .m-top-img>img{
    content: url('../imgs/cpxq-middle-top-3-3.png');
}


.m-top>ul>li:nth-child(4):hover .m-top-img>img{
    content: url('../imgs/cpxq-middle-top-4-4.png');
}


/*  */



.m-top>ul>li:hover a{
    color: #e50112 !important;
    animation-play-state:paused;

}

/* 更改背景 */
.m-top-bgc{
    background-color: #fff !important;
}
/* 移除原图 */
.m-top-img-x{
    animation-play-state:paused;
    text-indent: -10000px;
}
/* 更换阴影颜色 */
.m-top-img-color{
    animation-play-state:paused;
    filter: drop-shadow(10000px 0 #e50112)
}

.m-top-a-color{
    color: #e50112;
    animation-play-state:paused; 
}


.m-top>ul>li>a{
    display: flex;
    color: #fff;
    align-items: center;
    flex-flow: column;
}

.m-top-img{
    width: 24px;
}


/* 概况中间部分 */
.m-body>div>div>ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.m-body>div>div>ul>li{
    width: 24%;
    margin-bottom: 12px;
}
/* 点击后显示li */
.m-body>div{
    display: none;
}
.m-body-li{
    display: block !important;
    line-height: 2;
}

/* 字体样式 */
.m-body>div>div>h3{
    font-size: 18px;
    margin-bottom: 13px;
}
.m-body>div>div>p{
    margin-bottom: 44px;
    font-size: 16px;
    line-height: 25px;
    color: #555555;
}

.m-body-li-img>ul>li{
    overflow: hidden;
}


/* 图片的hover */
.m-body-li-img>ul>li>a>img{
    display: block;
    -webkit-transition:.5s;
    transition:.5s; 
}
.m-body-li-img>ul>li:hover img{
    transform:scale(1.2);
 
}



.tp1{
    content: url('../imgs/cpxq-middle-top-1.png');
}

.tp2{
    content: url('../imgs/cpxq-middle-top-2-2.png');
}

.tp3{
    content: url('../imgs/cpxq-middle-top-3-3.png');
}

.tp4{
    content: url('../imgs/cpxq-middle-top-5-5.png');
}

.tp5{
    content: url('../imgs/cpxq-middle-top-4-4.png');
}


.m-body>div>div>ul>li {
    width: 24%;
    margin-bottom: 12px;
}