@import url("./root-color.css");

* {
  word-break: keep-all !important;
}

@media screen and (max-width: 400px) {
  .topWrapper {
    font-size: 2vw;
  }

  /* #main-divide {
    margin-top: 1.5625rem;
  } */
}

@media screen and (min-width: 401px) and (max-width: 575px) {
  .topWrapper {
    font-size: 1.5vw;
  }

  /* #main-divide {
    margin-top: 3.125rem;
  } */
}

@media screen and (max-width: 576px) {
  .topWrapper {
    font-size: 1vw;
  }

  .list-detail {
    font-size: 3em;
  }

  /* #main-divide {
    margin-top: 25%;
  } */
}

@media screen and (max-width: 1920px) {
  .topWrapper {
    font-size: 1vw;
  }

  .list-detail {
    font-size: 4em;
  }

}

.TOP_TITLE {
  text-align: center;
  font-size: 4.5em;
  color: #006960;
  margin-top: 20px;
  margin-bottom: 30px;
}

.SUB_TITLE {
  text-align: center;
  font-size: 3em;
  color: #101212;
}

.DISCRIPTION {
  margin-top: 20px;
  text-align: center;
  font-size: 2em;
  color: #404444;
}

.DISCRIPTION2 {
  text-align: center;
  font-size: 2em;
  color: #404444;
}

.info {
  margin-top: 10px;
  text-align: center;
  font-size: 1em;
  color: #696b6b;
}

.SampleTitle {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
  align-content: center;
  text-align: center;
  align-items: center;
}

.deco {
  align-self: center;
  background-color: rgb(5, 64, 43);
  font-size: 1.5em;
  width: 11em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  padding-left: 0.4em;
  padding-right: 0.4em;
  border-radius: 1em;
  text-align: center;
  color: white;
  box-shadow: 0.15em 0.15em 0.01em 0.05em rgba(1, 81, 21, 0.2);
}

.image-wrapper {
  align-content: center;
  width: 100%;
}

#indexImage {
  width: 100%;
  max-width: 1024px;
}

#sampleImage {
  width: 97%;
  /*border: #ccc solid 1px;*/
}

.closebtn {
  position: fixed;
  right: 25px;
  top: 15px;
  float: left;
  padding: 10px;
  font-size: 25px;
  border-radius: 8px;
  background: rgb(0, 17, 168);
  color: white;
}

/*#body,*/
/*#main-divide {*/
/*  height: calc(100vh - 56px - 126px);*/
/*}*/

#main-divide .card {
  margin: auto;
  max-width: 25rem;
}

.card-title {
  font-weight: bolder;
}

@media (max-width: 386px) {
  .card-title {
    font-size: 5.6vw;
  }

  #main-divide .card {
    font-size: 1.4vw;
    border-radius: 4em;
  }

  #main-divide img {
    border-radius: 4em;
  }

  #main-divide p {
    margin-bottom: 0px;
  }
}

@media (max-width: 576px) {
  #main-divide .card {
    margin-bottom: 1.875rem;
    width: 90vw;
  }

  #main-divide img {
    border-radius: 1em;
  }
}

@media (min-width: 576px) {
  #main-divide .card {
    border-radius: 1em;
  }

  #main-divide img {
    border-radius: 1em;
  }
}