@charset "utf-8";
html{font-size: 312.5% !important;}
.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; width: 100%;}
.con50{width: 50%; float: left;}
.con25 {width: 25%; float: left;}
.con500{width: 41.67%; float: left;}
.con400{width: 33.33%; float: left;}

.con a{display: block; position: relative;}
.imgpic img,.colorpic img{display: block; width: 100%;}
.imgpic p,.colorpic p{text-align: center; color: #fff; font-size: 18px; line-height: 28px; position: absolute; bottom: 0; width: 100%; left: 0;/* display: none;*/}
.colorpic p{/*width: 70%;*/ bottom: 28%; top: 40%; /*padding: 9% 0;left: 15%;*/}
.colorpic p.lh3{top: 35%; }
.con400 .colorpic p{top: 42%;}
.imgpic p{background:#000; background: rgba(0,0,0,.5); padding: 8px 0;}
.con04 .colorpic p{ bottom: 32%; top: 33%; padding: 8% 0; }

@media (max-width: 767px) {
.context{padding: 0;}
.context_detail{margin-top: 0;}
.imgpic p, .colorpic p{font-size: 15px;}
.con01,.con04{width: 100%;}
.con02,.con03{width: 145%; margin-left: -22.5%;}
}