:root {
  --main: #0A326D;
  --main2: #D54D27;
  --main3: #ECF8FF;
  --black: #122239;
  --light-black: #5C5C5D;
  --gray: #B2B9C5;
  --light: #f7f8fb;
  --white: #fff;
  --white-opacity: rgba(255, 255, 255, 0.14);
  --red: red;
}

.contrast-high {
  --main: #ffeb87;
  --main2: #ffeb87;
  --main3: #ffeb87;
  --black: #ffeb87;
  --light-black: #ffeb87;
  --gray: #B2B9C5;
  --light: #f7f8fb;
  --white: #2b2a29;
  --red: #ffeb87;
}

.atut {
  position: relative;
  z-index: 2;
}
.atut .atut_wrap {
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .atut .atut_wrap {
    flex-wrap: wrap;
  }
}
.atut .atut_wrap .img {
  width: 45%;
  align-self: stretch;
  overflow: hidden;
  position: relative;
  z-index: -1;
  min-height: 300px;
}
@media only screen and (max-width: 768px) {
  .atut .atut_wrap .img {
    width: 100%;
  }
}
.atut .atut_wrap .img img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.atut .atut_wrap .desc {
  padding: 50px 30px;
  width: 65%;
  margin-left: -10%;
}
@media only screen and (max-width: 768px) {
  .atut .atut_wrap .desc {
    width: 100%;
    padding: 15px;
    margin-left: 0;
    margin-top: -50px;
  }
}
.atut .atut_wrap .desc .desc_wrap {
  background-color: var(--white);
  padding: 30px;
}
@media only screen and (max-width: 768px) {
  .atut .atut_wrap .desc .desc_wrap {
    padding: 15px;
  }
}
.atut .atut_wrap.left .img {
  order: 2;
}
@media only screen and (max-width: 768px) {
  .atut .atut_wrap.left .img {
    order: 1;
  }
}
.atut .atut_wrap.left .desc {
  order: 1;
  margin-left: 0%;
  margin-right: -10%;
}
@media only screen and (max-width: 768px) {
  .atut .atut_wrap.left .desc {
    order: 2;
  }
}/*# sourceMappingURL=atut.css.map */