body {
  background: #F7F7F7;
}

.toptit {
  margin: .175rem 0;
  text-align: right;
}
.otext {
  margin: 0 0 .15rem 0;
  /*padding: .4rem .58rem;*/
  padding: .4rem 0;
  box-sizing: border-box;
  border: 1px solid #DEDEDE;
  background-color: #fff;
}

.otext .p_box img {
    display: block;
    margin: 0 auto;
    width: 50%;
}

.otext .l {
  width: 40%;
}

.otext .r {
  width: 40%;
}

.otext .l img,
.otext .r .p_box img {
    /*position: relative;*/
    /*z-index: 999;*/
  display: block;
  width: 100%;
  margin: 15% auto .575rem auto;
  /*border: 1px solid  #888;*/
  /*border-radius: 30px;*/
        /*pointer-events: none;*/
  /*overflow: hidden;*/
}

.otext .r .p_box img:hover {
    box-shadow: 0 0 10px 2px rgba(0,0,0,0.2);
}

.otext h4 {
  margin: .125rem 0;
  font-size: 16px !important;
}

@font-face {
  font-family: 'MiSans';
  src: url("./fonts/MiSans-Regular.ttf") format("truetype");
}

body {
  font-family: 'MiSans';
}

.line .wtext {
  margin: 0 .15rem 0 0;
  padding: .375rem 1.2625rem;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #DEDEDE;
  width: 50%;
}

.line .wtext:last-child {
  margin: 0;
}

.line .wtext h4 {
    font-size: 16px !important;
  margin: .375rem 0 .125rem 0;
}

.line .wtext h4:first-child {
  margin: 0 0 .125rem 0;
}

.line_box {
  margin: 0 0 .5rem 0;
}

@media screen and (max-width: 980px) {
  .otext .l,
  .otext .r {
    width: 100%;
  }
  .otext {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 15px;
  }
  .otext .r .p_box img {
    margin: .125rem auto;
  }
  .line .wtext {
    margin: 0 0 .25rem 0;
    width: 100%;
  }
  .line {
    flex-wrap: wrap;
  }
  
  .otext>div {
      flex-wrap: wrap;
  }
  
  .otext>div .l,
  .otext>div .r {
      margin: 0 0 10px 0;
      width: 100%;
  }
}