html { background: #F1F1F1; }
.social-responsibility-container { max-width: 1300px; margin: 0 auto; padding: 80px 0; display: -webkit-box; display: -ms-flexbox; display: flex; }
.left { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-negative: 0; flex-shrink: 0; }
.left-top { height: 200px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.left-top-icon { display: block; width: 94px; -ms-flex-negative: 0; flex-shrink: 0; }
.left-top-right { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-left: 40px; padding-right: 90px; }
.left-top-right-title { font-size: 32px; color: #333333; font-weight: 400; margin-bottom: 16px; }
.left-top-right-details { font-size: 14px; color: #888888; line-height: 1.6; }
.left-bottom { display: block; }
.left-bottom-image-box { height: 400px; background: #FFFFFF; background-position: center; background-repeat: no-repeat; background-size: cover; }
.left-bottom-image { display: block; width: 100%; display: none; }
.left-bottom-article-box { padding: 40px 30px 50px; color: #FFFFFF; background: #D3291A; }
.left-bottom-article-title { font-size: 22px; font-weight: 400; margin-bottom: 20px; }
.left-bottom-article-details { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.7); }
.right { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-negative: 0; flex-shrink: 0; }
.right-row { display: -webkit-box; display: -ms-flexbox; display: flex; height: 200px; background: #FFFFFF; }
.right-row.reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
.right-row-image-box { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-negative: 0; flex-shrink: 0; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; }
.right-row-image { display: block; width: 100%; display: none; }
.right-row-article { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-negative: 0; flex-shrink: 0; }
.right-row-article-box { padding: 32px 26px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.right-row-article-title { font-size: 20px; color: #333333; font-weight: 400; margin-bottom: 18px; -ms-flex-negative: 0; flex-shrink: 0; }
.right-row-article-details { font-size: 14px; line-height: 1.6; color: #888888; }


/**
 * 媒体查询
 */
@media screen and (max-width: 1300px) {
  .social-responsibility-container { padding: 80px 20px; }
  .left-top { height: 180px; }
  .left-top-icon { width: 86px; }
  .left-top-right-title { font-size: 30px; }
  .left-top-right-details { font-size: 14px; }
  .left-bottom-image-box { height: 370px; }
  .left-bottom-article-box { padding: 35px 26px 45px; }
  .left-bottom-article-title { font-size: 20px; }
  .right-row { height: 180px; }
  .right-row-article-box { padding: 28px 22px; }
  .right-row-article-title { font-size: 18px; margin-bottom: 12px; }
  .right-row-article-details { font-size: 14px; }
}

@media screen and (max-width: 1200px) {
  .social-responsibility-container { padding: 70px 20px; }
  .left-top { height: 170px; }
  .left-top-icon { width: 82px; }
  .left-top-right-title { font-size: 28px; }
  .left-top-right-details { font-size: 14px; }
  .left-bottom-image-box { height: 350px; }
  .left-bottom-article-box { padding: 32px 24px 42px; }
  .left-bottom-article-title { font-size: 18px; }
  .right-row { height: 170px; }
  .right-row-article-box { padding: 26px 20px; }
  .right-row-article-title { font-size: 18px; margin-bottom: 12px; }
  .right-row-article-details { font-size: 14px; }
}

@media screen and (max-width: 1024px) {
  .social-responsibility-container { padding: 60px 18px; }
  .left-top { height: 150px; }
  .left-top-icon { width: 70px; }
  .left-top-right-title { font-size: 24px; }
  .left-top-right-details { font-size: 13px; }
  .left-bottom-image-box { height: 300px; }
  .left-bottom-article-box { padding: 26px 20px 36px; }
  .left-bottom-article-title { font-size: 16px; }
  .right-row { height: 150px; }
  .right-row-article-box { padding: 20px 14px; }
  .right-row-article-title { font-size: 16px; margin-bottom: 10px; }
  .right-row-article-details { font-size: 13px; }
}

@media screen and (max-width: 800px) {
  .social-responsibility-container { padding: 60px 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .left-top { height: 130px; padding: 0 20px; }
  .left-top-icon { width: 60px; }
  .left-top-right { padding-right: 0; }
  .left-top-right-title { font-size: 20px; margin-bottom: 12px; }
  .left-top-right-details { font-size: 13px; }
  .left-bottom-image-box { display: none; }
  .left-bottom-image { display: block; }
  .left-bottom-article-box { padding: 20px 20px 30px; }
  .left-bottom-article-title { font-size: 16px; margin-bottom: 12px; }
  .right-row { height: auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 0px; margin-top: 12px; }
  .right-row.reverse { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .right-row-image { display: block; }
  .right-row-article-box { padding: 20px 20px 30px; background: #FFFFFF; }
  .right-row-article-title { font-size: 16px; margin-bottom: 12px; }
  .right-row-article-details { font-size: 13px; }
}