@charset "utf-8";

@media (min-width: 1920px) {
}
@media (max-width: 1880px) {
  .after .bna_box {
    width: 100%;
    justify-content: space-between;
    gap: 6rem;
  }
  .after .bna_box .img_box {
    flex: 1 0;
    flex-direction: column;
    align-items: flex-end;
  }
  .after .bna_box .img_box figure {
    width: 100%;
    max-width: 48rem;
  }
}
@media (max-width: 1440px) {
  main .content_card.st2 {
    width: 85%;
    flex-direction: column;
    justify-content: flex-start;
  }
  main .content_card.st2 img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-position: center 60%;
  }
  main .content_card.st1 .text_box {
    padding: 0 6rem;
  }
  .process .step article .text_box {
    padding: 3rem 5rem;
  }
  .process .step article .text_box p br,
  .process .step article .text_box small br {
    display: none;
  }
  .after {
    padding-bottom: 15rem;
  }
  .after .title hr {
    display: none;
  }
  .after .con_box {
    display: flex;
    flex-direction: column;
    margin-top: 6rem;
  }
  .after .con_box img {
    width: 680px;
    margin-bottom: 0;
  }
  .after .con_box .t_box {
    position: relative;
    bottom: auto;
    right: auto;
    width: 740px;
    background: none;
    color: #f8f8fa;
    padding: 6rem 0 0;
  }
  .after .con_box .t_box hr {
    margin-bottom: 4rem;
  }
  .survey .graph {
    padding: 6rem 8rem;
  }
  .insurance .box {
    padding: 7rem 6rem 4.5rem;
  }
  .insurance .box .r_txt {
    width: 48%;
    padding-left: 4rem;
  }
  .insurance .box .r_txt strong {
    font-size: 3.1rem;
    line-height: 4rem;
  }
}
@media (max-width: 1024px) {
  main .content_card.st1 {
    width: 85%;
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
  }
  main .content_card.st1 img {
    width: 100%;
    height: auto;
    max-height: 400px;
  }
  main .content_card.st1 .text_box {
    padding: 6rem 5rem;
  }
  main .content_card.st2 .text_box {
    padding: 6rem;
  }
  .advantage.c3 .continer {
    gap: 2rem;
  }
  .advantage.c3 .continer div {
    width: calc(33.33% - 1.34rem);
  }
  .advantage .compare > div {
    padding: 5rem;
  }
  .process .step article {
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
  }
  .process .step article img {
    width: 100%;
  }
  .process .step article .text_box {
    padding: 4rem 0;
  }
  .process .step article:last-child .text_box {
    padding-bottom: 0;
  }
  .after .con_box img {
    width: 75%;
  }
  .after .con_box .t_box {
    width: 622px;
  }
  .after .bna_box {
    flex-direction: column;
    justify-content: flex-start;
    gap: 7rem;
  }
  .survey .graph {
    padding: 6rem 5rem;
  }
  .survey .graph .l_box p {
    padding-right: 4rem;
  }
  .survey .graph img {
    min-width: 200px;
    margin-left: 2rem;
  }
  .insurance .box {
    flex-direction: column;
    justify-content: flex-start;
    padding: 6rem 4.5rem;
  }
  .insurance .box .l_txt {
    width: 100%;
    padding-bottom: 4rem;
  }
  .insurance .box .r_txt {
    width: 100%;
    border: 0;
    border-top: 1px solid #d9d9d9;
    padding: 4.5rem 0 0;
  }
  .safe .zero {
    gap: 13rem;
    padding-right: 2.8%;
  }
  .safe .zero div h6 {
    font-size: 3.24rem;
  }
  .safe .zero div strong {
    font-size: 8.1rem;
    margin-left: 4rem;
  }
}
@media (max-width: 768px) {
  main .content_card.st1,
  main .content_card.st2 {
    width: 95%;
  }
  main .content_card.st1 img,
  main .content_card.st2 img {
    max-height: 340px;
  }
  main .content_card.st2 .text_box {
    padding: 4.5rem 4rem;
  }
  main .content_card .text_box .ckeck_box {
    max-width: 310px;
  }
  main .content_card .text_box .ckeck_box .checklist p {
    font-size: 14px;
  }
  .process .step article .text_box small.point {
    font-size: 13px;
  }
  .after .con_box img {
    width: 100%;
  }
  .after .con_box .t_box {
    width: 100%;
  }
  .advantage .continer {
    justify-content: center;
  }
  .advantage .continer div {
    width: calc(50% - 2rem);
    max-width: 220px;
  }
  .advantage.c3 .continer {
    row-gap: 0rem;
  }
  .advantage.c3 .continer div {
    width: calc(50% - 1rem);
    max-width: 260px;
  }
  .advantage.c3 .continer div:first-child {
    margin: 0 25% -2%;
  }
  .advantage .continer div p {
    margin-top: 1.5rem;
  }
  .advantage .compare {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 2.5rem;
  }
  .advantage .compare > div {
    width: 95%;
    padding: 3.5rem;
    max-width: 400px;
  }
  .advantage .compare > div hr {
    margin: 1.5rem 0 2.6rem;
  }
  .advantage .compare > div p {
    margin-top: 1.5rem;
  }
  .survey .graph {
    flex-direction: column;
    padding: 5rem 4.5rem;
  }
  .survey .graph .l_box {
    width: 100%;
  }
  .survey .graph .l_box p {
    padding-right: 0rem;
  }
  .survey .graph .l_box .colors {
    flex-direction: row;
    gap: 12px;
    row-gap: 5px;
    margin-top: 2rem;
    margin-bottom: 5rem;
    padding-left: 0;
    flex-wrap: wrap;
  }
  .survey .graph img {
    margin-left: 0;
  }
  .insurance .box .l_txt p {
    font-size: 14px;
    line-height: 20px;
  }
  .safe .zero {
    justify-content: space-between;
    gap: 0;
    width: 90%;
    max-width: 480px;
  }
  .safe .zero div h6 {
    font-size: 2.88rem;
  }
  .safe .zero div strong::before {
    height: 1.5px;
  }
  .safe .zero div strong {
    font-size: 7.2rem;
    margin-left: 1rem;
    margin-top: 3rem;
  }
}
@media (max-width: 480px) {
  .intro {
    background-image: url(../img/new2.jpg);
    background-position: 95% center;
  }
  main .content_card.st1,
  main .content_card.st2 {
    width: 100%;
  }
  main .content_card.st1 img,
  main .content_card.st2 img {
    max-height: 240px;
  }
  main .content_card.st1 {
    margin-bottom: 0;
  }
  main .content_card.st1 .text_box {
    padding: 4rem;
  }
  main .content_card .text_box .ckeck_box {
    max-width: 260px;
  }
  main .content_card .text_box .ckeck_box .checklist {
    row-gap: 4px;
  }
  main .content_card .text_box .ckeck_box .checklist div::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background: #a9a9a9;
  }
  main .content_card .text_box .ckeck_box .checklist div {
    padding-left: 10px;
  }
  main .content_card .text_box .ckeck_box .checklist div img {
    display: none;
  }
  .process .step article .text_box small.point {
    font-size: 12px;
  }
  .after {
    padding: 12rem 0;
  }
  .after .con_box .t_box {
    padding: 5rem 0 0;
  }
  .after .bna_box .t_box p br {
    display: none;
  }
  .after .bna_box .img_box figure {
    max-width: none;
  }
  .advantage.c3 {
    padding: 13rem 0;
  }
  .advantage .continer {
    gap: 2rem;
  }
  .advantage .continer div {
    width: calc(50% - 1rem);
  }
  .advantage .continer div p {
    font-size: 14px;
    line-height: 20px;
    margin-top: 1rem;
  }
  .advantage.c3 .continer {
    flex-direction: column;
    align-items: center;
    row-gap: 2.5rem;
  }
  .advantage.c3 .continer div {
    width: 80%;
    max-width: 195px;
  }
  .advantage.c3 .continer div:first-child {
    margin: 0;
  }
  .survey .graph {
    padding: 6rem 5rem;
  }
  .survey .graph .l_box p {
    width: 90%;
  }
  .insurance {
    padding-bottom: 15rem;
  }
  .insurance .box {
    padding: 6rem 5rem;
  }
  .insurance .box .r_txt small:first-of-type {
    margin-top: 3rem;
    margin-bottom: 5px;
  }
  .safe {
    padding-bottom: 15rem;
  }
  .safe .zero {
    width: 97%;
    max-width: 340px;
  }
  .safe .zero div h6 {
    font-size: 2.52rem;
  }
  .safe .zero div strong::before {
    height: 1px;
  }
  .safe .zero div strong {
    font-size: 6.3rem;
  }
}