@charset "utf-8";
.context{ margin:0 auto; max-width:1200px;}
.con-img img{ display:block; height:auto; border-bottom:2px solid #c9c9c9;}

.context_detail{overflow: hidden; margin: 20px auto;}
.context li{float: left;}
.con{overflow: hidden; text-align: center;}
.conl{width: 61.67%;}
.conr{width: 38.33%;}
.con a{display: block; position: relative;}
.cont li{width: 50%;}
.conb,.conb li{width: 100%;}
.imgpic img,.colorpic img{display: block; width: 100%;}
.imgpic p,.colorpic p{text-align: center; color: #fff; font-size: 20px; line-height: 28px; position: absolute; bottom: 0; width: 100%; left: 0;}
.colorpic p{top: 39%;}
.imgpic p{background:#000; background: rgba(0,0,0,.5); padding: 8px 0;}

@media (max-width: 767px) {
.context{padding: 0;}
.context_detail{margin-top: 0;}
.conl,.conr{width: 100%;}
.imgpic p, .colorpic p{font-size: 16px;}

}