.pro-box { max-width: 980px; margin: auto; background: #fff; padding: 8px; margin-top: 40px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.36);}
.pro-box-bd { border: 1px solid #2A1607; padding: 15px;}
.pro-box-bg { background: url(../../img/prodact/bg1.png) center center;}
.pro-box-photo { width: 45%; display: inline-block; vertical-align: middle; text-align: center; padding: 10px;}
.pro-box-content { width: 55%; display: inline-block; vertical-align: middle; padding: 0 30px;}
.pro-box-content ul li { font-size: 20px; line-height: 190%; color: #2A1607; position: relative; padding-left: 25px;}
.pro-box-content ul li:before { content: "◆"; font-size: 20px; color: #79783F; position: absolute; left: 0; top: 0px;}

.pro-photo100 { margin-top: 2%;}
.pro-photo100-mgt0 { margin-top: 0%;}
.pro-photo50 { width: 49%; display: inline-block; vertical-align: top; margin-right: 2%;}
.pro-photo50:nth-child(2n) { margin-right: 0;}

.pro-photo33 { width: 32%; display: inline-block; vertical-align: top; margin-right: 2%}
.pro-photo33:nth-child(3n) { margin-right: 0;}

.pro-content { padding: 0 40px; margin-bottom: 45px;}
.pro-content-mgb0 { padding: 0 40px; margin-bottom: 0px;}

.pro-100 { margin-top: 45px;}
.pro-100-mgt20 { margin-top: 20px;}
.pro-50 { width: 49%; display: inline-block; vertical-align: top; margin-right: 2%;}
.pro-50:nth-child(2n) { margin-right: 0;}

.pro-33 { width: 32%; display: inline-block; vertical-align: top; margin-right: 2%; margin-bottom: 40px;}
.pro-33:nth-child(3n) { margin-right: 0;}
.pro-33-title { text-align: center; margin-top: 20px;}

@media screen and (max-width:767px) {
  .pro-content { padding: 0; margin-bottom: 20px;}
  .pro-box-bd { padding: 5px;}
  .pro-box-photo { width: 100%;}
  .pro-box-content { width: 100%; margin-top: 20px; padding: 0;}
  .pro-box-content ul li { font-size: 14px;}
  .pro-100 { margin-top: 20px;}
}

@media screen and (max-width:640px) {
  .pro-100 { text-align: center;}
  .pro-50 { width: 100%; margin-bottom: 10px; text-align: center;}
  .pro-50-r { text-align: center;}
  .pro-33 { width: 49%; display: inline-block; vertical-align: top; margin-right: 2%; margin-bottom: 40px;}
  .pro-33:nth-child(3n) { margin-right: 2%;}
  .pro-33:nth-child(2n) { margin-right: 0;}
}
@media screen and (max-width:480px) {
  .pro-33 { width: 100%; vertical-align: top; margin-right: 0%;}
  .pro-33:nth-child(3n) { margin-right: 0%;}
  .pro-33:nth-child(2n) { margin-right: 0;}
}