.f_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.ai_c {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.f_col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.jc_c {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.jc_sb {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.jc_sa {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.jc_fs {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.jc_fe {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.f_wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.ai_str {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.f_auto {
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
}

.flex_30 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30%;
          flex: 0 0 30%;
}

.flex_70 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 70%;
          flex: 1 1 70%;
}

.f_123 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}

.f_1 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}

.f_2 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 48%;
          flex: 0 0 48%;
}

.f_3 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30%;
          flex: 0 0 30%;
}

.f_4 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 22%;
          flex: 0 0 22%;
}

.fit_box_img_wrap {
  position: relative;
  overflow: hidden;
}

.fit_box_img_wrap:before {
  content: "";
  display: block;
  padding-top: calc(9/16 * 100%);
}

.fit_box_img_wrap img {
  position: absolute;
  top: -100%;
  right: -100%;
  bottom: -100%;
  left: -100%;
  margin: auto;
  display: block;
  min-width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.opa7:hover {
  opacity: 0.7;
}

.fc_fff {
  color: #fff;
}

.ta_c {
  text-align: center;
}

.ta_r {
  text-align: right;
}

.p0 {
  padding: 0;
}

.p5, .p_S {
  padding: 5px;
}

.p10, .p_M {
  padding: 10px;
}

.p20, .p_L {
  padding: 20px;
}

.hp_p {
  padding: 4px 8px;
}

.m0 {
  margin: 0;
}

.m5 {
  margin: 5px;
}

.m10 {
  margin: 10px;
}

.m20 {
  margin: 20px;
}

.mb0 {
  margin-bottom: 0;
}

.mb5, .mb_S {
  margin-bottom: 5px;
}

.mb10, .mb_M {
  margin-bottom: 10px;
}

.mb20, .mb_L {
  margin-bottom: 20px;
}

.mr10 {
  margin-right: 10px;
}

.mla {
  margin-left: auto;
}

.mra {
  margin-right: auto;
}

.m0a {
  margin: 0 auto;
}

.w80 {
  width: 80%;
}

.w90 {
  width: 90%;
}

.w100 {
  width: 100%;
}

.h30 {
  height: 30%;
}

.h100 {
  height: 100%;
}

.db {
  display: block;
}

.dn {
  display: none;
}

.dib {
  display: inline-block;
}

.lsn {
  list-style: none;
}

.vam {
  vertical-align: middle;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.z1 {
  z-index: 1;
}

.z2 {
  z-index: 2;
}

.z3 {
  z-index: 3;
}

.z5 {
  z-index: 5;
}

.left0 {
  left: 0;
}

.right0 {
  right: 0;
}

.top0 {
  top: 0;
}

.bottom0 {
  bottom: 0;
}

.t50 {
  top: 50%;
}

.t_15 {
  top: -15px;
}

.of_h {
  overflow: hidden;
}

.f0030px {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30px;
          flex: 0 0 30px;
}

.line_clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.lc1 {
  -webkit-line-clamp: 1;
  max-height: 1.5em;
}

.lc2 {
  -webkit-line-clamp: 2;
  max-height: 3em;
}

.lc3 {
  -webkit-line-clamp: 3;
  max-height: 4.5em;
}

.br3 {
  border-radius: 3px;
}

.br50 {
  border-radius: 50%;
}

.b404 {
  margin: -22px -22px 20px;
}

.b404 div {
  padding: 0;
}

.b404 img {
  margin: 0 auto;
  display: block;
}

.m_s {
  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
}

.h_box {
  -webkit-box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
          box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
}

.h_box:hover {
  -webkit-box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
          box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
}

.no_bg {
  background: transparent;
}

.tap_no {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

.scale_13:hover {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

.trans_10 {
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.trans_10:hover {
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.fi15 {
  -webkit-animation: fadein 1.5s;
  animation: fadein 1.5s;
}

@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ry360 {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@keyframes ry360 {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@media screen and (max-width: 560px) {
  .f_col100 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .jc_c100 {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .f_2, .f_3, .f_4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
  }
  .f_2.f_col, .f_3.f_col, .f_4.f_col {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 48%;
            flex: 0 0 48%;
  }
}

@media screen and (min-width: 561px) {
  .f_123 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 49%;
            flex: 0 0 49%;
  }
}

@media screen and (min-width: 960px) {
  .f_123 {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 32%;
            flex: 0 1 32%;
  }
}
