<template>
  <div class="culture-content-box">
    <div class="video-box">
      <video
        src="https://webapp-pub.ezijing.com/www/pc/%E7%B4%AB%E8%8D%86%E5%AE%A3%E4%BC%A0%E7%89%8720201224.mp4"
        width=""
        height=""
        controls="controls"
        preload="none"
      ></video>
    </div>
    <div class="honor-content">
      <div class="tit">{{ $t('about.culture.title') }}</div>
      <ul>
        <li>
          <div class="tits">{{ $t('about.culture.item1H1') }}</div>
          <div class="h2">{{ $t('about.culture.item1H2') }}</div>
          <div class="txts">
            <div class="p" v-html="$t('about.culture.item1Txt')"></div>
          </div>
        </li>
        <li>
          <div class="tits">{{ $t('about.culture.item2H1') }}</div>
          <div class="h2">{{ $t('about.culture.item2H2') }}</div>
          <div class="txts">
            <div class="p" v-html="$t('about.culture.item2Txt')"></div>
          </div>
        </li>
        <li>
          <div class="tits">{{ $t('about.culture.item3H1') }}</div>
          <div class="h2">{{ $t('about.culture.item3H2') }}</div>
          <div class="txts">
            <div class="p" v-html="$t('about.culture.item3Txt')"></div>
          </div>
        </li>
        <li>
          <div class="tits">{{ $t('about.culture.item4H1') }}</div>
          <div class="h2">{{ $t('about.culture.item4H2') }}</div>
          <div class="txts">
            <div class="p" v-html="$t('about.culture.item4Txt')"></div>
          </div>
        </li>
      </ul>
      <!-- <ul>
        <li>
          <div class="flex">
            <img src="https://zws-imgs-pub.ezijing.com/static/public/9f22659632f43c0b1bb93d6adf49bd4c.png" alt="" />
            <div class="text">
              2015年<br />
              将五道口金融学院<br />
              在线教育中心商业化<br />
              成立清控紫荆教育
            </div>
          </div>
          <div class="flex">
            <img src="https://zws-imgs-pub.ezijing.com/static/public/48b2ab5dfc414d3f6c8500e8328f6b28.png" alt="" />
            <div class="text">
              2015年9月<br />
              签约索菲亚大学推出<br />
              在线MBA学位项目
            </div>
          </div>
        </li>
        <li>
          <div class="flex">
            <img src="https://zws-imgs-pub.ezijing.com/static/public/a37b13b8fa98ee448850bbb32a5fcd2f.png" alt="" />
            <div class="text">
              行业技术优秀服务商<br />
              ——在线教育资讯网
            </div>
          </div>
          <div class="flex">
            <img src="https://zws-imgs-pub.ezijing.com/static/public/00cdb23e91efa803bb711058e251e962.png" alt="" />
            <div class="text">
              综合实力突出教育集团<br />
              ——中国教育网
            </div>
          </div>
        </li>
        <li>
          <div class="flex">
            <img src="https://zws-imgs-pub.ezijing.com/static/public/5fdb3a042efcb0f8fb0eea8d4376eacc.png" alt="" />
            <div class="text">
              年度城市教育行业<br />
              影响力机构<br />
              ——巨量引擎
            </div>
          </div>
        </li>
      </ul> -->
    </div>
  </div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.culture-content-box {
  width: 1000px;
  padding-bottom: 100px;
  img {
    width: 100%;
    display: block;
  }
  .video-box {
    width: 1000px;
    height: 552px;
    background: #aa1941;
    padding: 25px 50px;
    box-sizing: border-box;
    video {
      width: 100%;
      height: 100%;
    }
  }
  .honor-content {
    padding: 50px 90px 20px;
    background: #fff;
    .tit {
      font-size: 22px;
      font-weight: 500;
      line-height: 100%;
      color: #424242;
      margin-bottom: 30px;
    }
    ul{
      display: flex;
      flex-wrap: wrap;
      li{
        margin-right: 70px;
        width: 370px;
        min-height: 430px;
        margin-top: 30px;
        &:nth-child(even){
          margin-right: 0;
        }
        .tits{
          font-size: 22px;
          font-weight: bold;
          line-height: 100%;
          color: #424242;
          margin-bottom: 12px;
        }
        .h2{
          height: 46px;
          line-height: 100%;
          border-bottom: 1px solid #98002E;
          font-size: 20px;
          line-height: 100%;
          color: #424242;
        }
        .txts{
          padding-top: 18px;
          .p{
            font-size: 16px;
            line-height: 34px;
            color: #424242;
          }
        }
      }
    }
    // ul {
    //   li {
    //     display: flex;
    //     justify-content: space-between;
    //     margin-bottom: 80px;
    //     .flex {
    //       align-items: center;
    //       display: flex;
    //     }
    //     img {
    //       width: 211px;
    //       display: block;
    //     }
    //     .text {
    //       font-size: 16px;
    //       font-weight: 300;
    //       line-height: 32px;
    //       color: #424242;
    //       margin-left: 38px;
    //     }
    //   }
    // }
  }
}
</style>