@import "common.css";

/*.container{
    margin-bottom: 80px;
}*/

.container .right{
    width: 860px;
}
.right>ul>li{
    width: 860px;
    height: 298px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    position: relative;
}
.right>ul>li:hover{
    cursor: pointer;
    border: 1px solid #0d539b;
}
.right>ul>li>span{
    width: 258px;
    height: 258px;
    overflow: hidden;
    position: absolute;
    left: 20px;
    top: 20px;

}
.right>ul>li>span img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.right>ul>li h2{
    font: 24px/54px "microsoft yahei";
    width: 540px;
    border-bottom: 1px solid #808080;
    display: inline-block;
    position: absolute;
    left: 307px;
    top: 33px;
}
.right>ul>li:hover a{
    color: #0d539b;
}
.right>ul>li p{
    width: 532px;
    font: 14px/24px "microsoft yahei";
    color: #808080;
    display: inline-block;
    position: absolute;
    left: 307px;
    top: 100px;
}
.right .comment{
    width: 532px;
    position: absolute;
    left: 307px;
    top: 233px;
    vertical-align: middle;
}
.right .comment span.active{
    background-color: #0d539b;
}
.comment span:nth-child(1){
    width: 22px;
    height: 22px;
    background: url("../images/product_details/liulanliang02.png") no-repeat;
    margin-right: 5px;
    vertical-align: middle;
}
.comment span:nth-child(3){
    width: 24px;
    height: 22px;
    background: url("../images/product_details/pinglunliang01.png") no-repeat;
    margin-left: 25px;
    margin-right: 5px;
    vertical-align: middle;

}
.comment span{
    font: 12px/30px "microsoft yahei";
    color: #808080;
    vertical-align: middle;
}
.comment span:nth-child(5){
    display: inline;
    width: 100px;
    background-color: #999;
    font: 14px/30px "microsoft yahei";
    color: #fff;
    float: right;
    text-align: center;
}

/*��߲���*/
.left{
    width: 300px;
    margin-bottom:  40px;
}