@charset "UTF-8";
/*-------------------------------------------------

Title       : singo(신고센터) Sub2
Author      : EASESOFT
Create Date : 2024-08

-------------------------------------------------*/
.c020101 .division {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  gap: 5rem;
  padding: 5rem 4rem;
}
.c020101 .division div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
  position: relative;
}
.c020101 .division strong {
  background: #39A5CE;
  color: #fff;
  border-radius: 20rem;
  padding: 3px 3rem;
  font-size: 2rem;
}
.c020101 .division p {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: #F3F7F9;
  border-radius: 0.8rem;
  text-align: center;
  padding: 1rem;
  word-break: keep-all;
  word-wrap: break-word;
}
.c020101 .division.arrow {
  gap: 10rem;
}
.c020101 .division.arrow div {
  align-items: stretch;
  text-align: center;
}
.c020101 .division.arrow div + div::before {
  content: "\ea6c";
  position: absolute;
  left: -7.1rem;
  top: calc(50% - 2.1rem);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 4.2rem;
  height: 4.2rem;
  font-size: 2rem;
  background: #000;
  color: #fff;
  font-family: "remixicon";
  border-radius: 100%;
}
.c020101 .division .image {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 4rem;
  width: 100%;
}

.c020200 .step .box_group.col3 {
  grid-template-columns: 1fr 1.5fr 1fr;
}
.c020200 .step dl {
  position: relative;
}
.c020200 .step dl + dl::before {
  content: "\ea4e";
  position: absolute;
  left: calc(50% - 2.1rem);
  top: -5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 4.2rem;
  height: 4.2rem;
  font-size: 2.5rem;
  background: #000;
  color: #fff;
  font-family: "remixicon";
  border-radius: 100%;
}
.c020200 .step .cont_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}
.c020200 .step .cont_box.bg {
  background: #264B90;
  color: #fff;
}

/*-------------------------------------------------

Responsive

-------------------------------------------------*/
/* Media Query */
@media (max-width: 1024px) {
  .c020101 .division {
    flex-direction: column;
  }
  .c020101 .division.arrow div + div::before {
    position: absolute;
    left: calc(50% - 2.1rem);
    top: -7.1rem;
    transform: rotate(90deg);
  }
}
@media (max-width: 768px) {
  .c020101 .division {
    padding: 3rem 2rem;
  }
  .c020101 .division .image {
    flex-direction: column;
    gap: 2rem;
  }
  .c020102 .cont_box img {
    max-width: 14rem;
  }
  .c020102 .cont_box img.mark {
    width: 10rem;
  }
  .c020200 .step .cont_box {
    font-size: 1.6rem;
  }
}