body {
  font-family: sans-serif;
  margin: 0;
}

:root {
  --box-size: 46vw;
  --img-size: 20vw;
}


.box {
  width: var(--box-size);
  margin: auto;
  margin-top: 20vh;
  background: hsla(0,0%,100%,0.85);
  /* background: hsla(0,0%,100%,0.5); */
  /* background: hsla(0,0%,0%,0.9); */
  height: 23vw; padding: 2vw;
}

img {
  width: var(--img-size);
  float: left;
  margin-right: 1vw;
}

.text {
  width: calc(var(--box-size) - 1vw - var(--img-size));
  float: left;
  color: hsl(0,0%,20%);
  /* color: hsl(0,0%,80%); */
  font-size: 1vw;
}

h1 {
  margin: 0;
  margin-top: 1vw;
  font-size: 5vw;
}

font {
  line-height: 1.7vw;
}

.bar {
  width: 4vw;
  height: 0.1vw;
  background: hsl(0,0%,20%);
  margin-bottom: 0.4vw;
}

span {
  color: hsl(0,0%,20%);
  font-weight: bold;
}

.extra {
  margin-top: 3vw;
  width: var(--box-size);
}


.stick {
  width: 300vw;
  height: 0.05vw;
  position: fixed;
  z-index: -10;
}



@media only screen and (max-width: 1200px) {
  :root {
    --box-size: 100vw;
    --img-size: 100vw;
  }
  html {
    text-align: center;}
  .box {
    margin-top: 0vw;
    padding: 0;
  }
  .text {
    font-size: 4vw;
    width: 100vw;
    padding: 0;
  }
  h1 {
    font-size: 19vw;
    margin-top: 9vw;
  }
  font {
    line-height: 8vw;
  }
  .extra {
    margin-top: 8vw;
    width: 90vw;
    padding: 0 5vw;
  }
  .bar {
    display: inline-block;
    width: 20vw;
    height: 0.6vw;
  }
  span {
    display: block;
    widht: 98vw;
    margin-bottom: 20vw;
  }
  .stick {
    display: none;
  }
}