@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;}
.con a{display: block; position: relative;}
.con01{ width: 33.8%;}
.con02{ width: 66.2%;}
.con03{ width: 61.7%;}
.con04{ width: 38.3%;}
.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; display: none;}
.colorpic p{width: 70%; bottom: 28%; top: 29%; padding: 9% 0; border: 1px solid #fff; border-width: 2px 0; left: 15%;}
.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: 16px;}
.con01,.con04{width: 100%;}
.con02,.con03{width: 145%; margin-left: -22.5%;}
}