/* 产品详情CSS */

/* 顶部详情 */
img{
    -webkit-transition:0s;
    transition:0s;
}
.inner{
    width: 77%;
    margin: 0 auto;
}
.xq-header{

    margin-top: 100px;
    display: flex;
    justify-content: space-between;
    height: 350px;
    margin-bottom: 200px;
}

/* 详情左 */
.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;
}
.xq-h-left>ul>li>img{
    width: 65%;
}


/* 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: 35%;
}
.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: 47%;
    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>ul{
    display: flex;
    flex-wrap: wrap;
    margin-left: -70px;

}
.xq-h-r-txt>ul>li{
    width: 27%;
    border-right: 1px solid #cccccc;
    justify-content: space-between;
    align-items: center;
    display: flex;
    flex-flow: column;
    height: 50px;
    margin-top: 36px;
}
.xq-h-r-txt>ul>li>p:nth-child(2){
    color: #e50112;
}
.xq-h-r-txt>ul>li:nth-child(3),.xq-h-r-txt>ul>li:nth-child(6){
    border-right: 0px solid #cccccc !important;

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

.xq-h-r-btn:hover{
    background: #12468d;
    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: 25%;
    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 a{
    color: #e50112 !important;
    animation-play-state:paused;

}

/* 更改背景 */
.m-top-bgc{
    background-color: #fff !important;
}


.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%;
}
/* 点击后显示li */
.m-body>div{
    display: none;
}
.m-body-li{
    display: flex !important;
    justify-content: space-between;
}

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

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


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


/* 底部图片 */
.m-body-li-right{
    padding: 0 94px;
}


.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');
}

/* 图片更换 */
.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-4-4.png');
}