.sub-header {
  background: url(../images/subTop/sub_top_bg.jpg) no-repeat center center / cover;
  padding: 4rem 0;
  position: relative;
}

.sub-header .container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.sub-header span {
  display: block;
}

.sub-header span:first-child {
  width: 100%;
}

.side-quick-menu {
  position: absolute;
  bottom: -100px;
  right: 0;
  width: 8rem;
  padding: 3rem 0.8rem 2rem;
  background-color: #fff;
  border: solid 1px var(--color-border);
  border-radius: 2rem 0 0 2rem;
  transform: translateY(100%);
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.side-quick-menu.fixed {
  position: fixed;
  top: 12rem;
  bottom: auto;
  transform: translateY(0);
}

.side-quick-menu ul {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-size: 1.4rem;
  font-weight: 700;
  border-bottom: solid 1px var(--color-border);
  padding-bottom: 2rem;
}

.side-quick-menu ul a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
  line-height: 1.1;
}

.side-quick-menu ul a:hover {
  position: relative;
}

.side-quick-menu ul a:hover::after {
  content: "";
  position: absolute;
  top: .5rem;
  left: 30%;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: rgba(236 141 27 /.3);
  transform: translate(-50%, -50%);
  animation: scale 1s ease-in-out infinite;
}

@keyframes scale {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.5);
  }

  70% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

.side-quick-menu .topBtn {
  width: 100%;
  transition: all .3s ease-out 0s;
}

.side-quick-menu .topBtn:hover {
  transform: translateY(-1rem);
}

.side-quick-menu .topBtn i {
  font-size: 2em;
  display: block;
  transform: rotate(90deg);
  transition: all .3s ease-out 0s;
}

@media (max-width:1550px) {
  .side-quick-menu {
    position: fixed !important;
    top: auto;
    bottom: 20px;
    right: 10px;
    transform: none;
    padding: 0;
    border-radius: .5rem;
    background: var(--color-primary);
    color: #fff;
    border-color: transparent;
    opacity: .5;
    font-size: .8em;
    width: 5rem;
    height: 5rem;
    transition: all .3s ease-out 0s;
  }

  .side-quick-menu.fixed {
    position: fixed !important;
    top: auto;
    bottom: 20px;
    right: 10px;
    transform: none;
  }

  .side-quick-menu:hover {
    opacity: 1;
  }

  .side-quick-menu ul {
    display: none;
  }

  .side-quick-menu .topBtn {
    margin-top: 0;
    border-top: none;
    padding: 0;
    height: 100%;
  }

  .side-quick-menu .topBtn:hover {
    transform: none;
  }

  .side-quick-menu .topBtn i {
    font-size: 1.6rem;
  }
}

.sub-top {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.sub-top .sub-title {
  font-size: 2.5em;
  text-align: center;
  padding: 1rem;
  font-weight: 700;
}

.sub-top .cont-btns {
  display: flex;
  justify-content: center;
  align-items: center;
}

.location {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-size: .9em;
  color: #606060;
}

.location a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #000;
}

/* lnb */
.lnb {
  border-bottom: solid 1px var(--color-border);
  margin-bottom: -1px;
}

.lnb ul {
  display: flex;
  font-size: var(--txt-lg-1);
  font-weight: 500;
  letter-spacing: -1px;
  border-left: solid 1px var(--color-border)
}

.lnb li {
  flex-grow: 1;
}

.lnb ul a {
  display: block;
  padding: 2rem;
  position: relative;
  text-align: center;
  border-right: solid 1px var(--color-border);
  border-top: solid 1px var(--color-border);
  transition: all .3s ease 0s;

}

.lnb a:focus {
  color: var(--color-secondary);
}

.lnb a.active,
.lnb a:hover {
  color: var(--color-secondary);
  font-weight: 700;
  background: var(--color-primary);
  color: #fff;
}

.lnb .lnb-btn {
  display: none;
}

@media screen and (max-width: 780px) {
  .lnb {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column-reverse;
    border-bottom: none;
  }

  .lnb ul {
    flex-direction: column;
    display: none;
    border-left: none;
  }

  .lnb li {
    flex-grow: 0;
  }

  .lnb ul a {
    text-align: left;
    border-right: none;
    border-top: none;
  }

  .lnb.open ul {
    display: flex;
    border: solid 1px var(--color-border);
  }

  .lnb .lnb-btn {
    background-color: #fff !important;
    padding: 2rem;
    text-align: center;
    border-bottom: solid 1px var(--color-border);
    color: #000 !important;
    border: solid 1px var(--color-border);
    width: 100%;
    display: flex;
    border-radius: .4rem;
    position: relative;
  }

  .lnb .lnb-btn::after {
    content: "\ea4e";
    font-family: "remixicon";
    font-size: 1.5rem;
    margin-left: auto;
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    transition: all .3s ease-out 0s;
  }

  .lnb.open .lnb-btn::after {
    transform: translateY(-50%) rotate(180deg);
  }

  .lnb ul a {
    border-bottom: dashed 1px var(--color-border);
  }

  .lnb ul li:last-child a {
    border-bottom: none;
  }
}

.cont-body {
  border-top: solid 1px var(--color-border);
  padding-top: 5rem;
}

.cont-group {
  padding: 0 0 5rem;
}

.contTitle-0 {
  font-size: 1.75em;
  font-weight: 700;
  margin-bottom: 2rem;
}

/* 개인정보처리방침 */
.security-box {
  border-radius: 1.2rem;
  padding: 4rem;
  background: #F9F9F9 url(../images/subTop/symbol2.png) no-repeat 0 100%;
  background-size: 25.5rem;
}

.security-box i {
  padding: 0 4rem;

}

.security-box img {
  max-width: none;
}

@media (max-width:780px) {
  .security-box {
    padding: 2rem;
  }
}

@media (max-width:580px) {
  .security-box i {
    display: none;
  }
}

/* QNA */

.qna-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.qna-list li {
  background-color: #F5F5F5;
  padding: 1rem 3.6rem;
  border-radius: .4rem;
}

.qna-list li .qna-item-header {
  font-weight: 700;
  font-size: 1.2em;
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  padding: 2rem 2rem 2rem 4rem;
  background-color: transparent;
  border: none;
  cursor: pointer;
  position: relative;
}

.qna-list li .qna-item-header::before {
  content: 'Q';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-blue);
  border-radius: 50%;
  margin-right: 1rem;
  color: #fff;
  font-size: 0.8em;
  font-weight: 300;
  flex-shrink: 0;
  position: absolute;
  left: 0;
  top: .5rem;
  transform: translateY(50%);
}

.qna-list li .qna-item-header::after {
  content: "";
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  background: url(../images/icon_arrowDown.svg) no-repeat center center / contain;
  transition: all .3s ease-out 0s;
}

.qna-list li .qna-item-header.active::after {
  transform: translateY(-50%) rotate(180deg);
}

.qna-list li .qna-item-content {
  font-weight: 400;
  padding-left: 4rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
  display: none;
}

.qna-list li .qna-item-content.active {
  display: block;
}

/* file-list */
.file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  gap: 1rem;
}

.file-list li {
  background-color: #fff;

  border-radius: .4rem;
  flex-grow: 1;
  flex-basis: calc(50% - 1rem);
  border: solid 1px var(--color-border);
}

.file-list li a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 2rem 3.6rem;
  position: relative;
  padding-right: 5rem;
}

.file-list li a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  aspect-ratio: 1/1;
  border-left: solid 1px var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../images/icon_download.svg) no-repeat center center / contain;
  background-size: 2rem;
  transition: all .3s ease-out 0s;
}

.file-list li a:hover::after {
  background-color: #F9F9F9;
}

.file-list li a span {
  display: flex;
  align-items: center;
  width: calc(100% - 4rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.file-list li a::before {
  content: "";
  width: 1.4rem;
  height: 1.6rem;
  background: url(../images/icon_file.svg) no-repeat center center / contain;
  flex-shrink: 0;
}

.img-height-170 img {
  height: 17rem;
  object-fit: cover;
  max-width: none;
}

/* footer */
.footer {
  background-color: #fff !important;
  color: #404040;
  border-top: solid 1px var(--color-border);
}

.footer-bottom {
  background-image: url(../images/main/logo.svg);
}

.footer-bottom ul {
  border-top-color: var(--color-border);
}

/* form */
.inline-group,
.inline-group.center {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.inline-group.nowrap {
  flex-wrap: nowrap;
}

.inline-group.top {
  align-items: flex-start;
}

.inline-group.bottom {
  align-items: flex-end;
}

.inline-group.flex-mbl-col,
.inline-group.flex-mini-col {
  align-items: flex-start;
}


.form-label {
  font-size: 0.9em;
  font-weight: 500;
}

.inline-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* login */
.login-wrap {
  background-color: #f9f9f9;
  padding: 10rem;
  display: flex;
  justify-content: center;
  color: #606060;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.login-group {
  display: flex;
  max-width: 980px;
  width: 100%;
  position: relative;
}

.login-group>* {
  flex-grow: 1;
}

.login-group .left {
  padding-right: 5rem;
  border-right: solid 1px var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-group .right {
  padding-left: 5rem;
}

.cell-division>* {
  padding-left: 1em;
  padding-right: 1em;
  position: relative;
}

.cell-division>*::after {
  content: "";
  width: 1px;
  height: 0.8em;
  position: absolute;
  top: 50%;
  right: -1px;
  transform: translateY(-50%);
  background-color: var(--color-border);
}

.cll-division>*:first-child {
  padding-left: 0;
}

.cell-division>*:last-child {
  padding-right: 0;
}

.cell-division>*:last-child::after {
  display: none;
}

@media (max-width: 920px) {
  .login-wrap {
    padding: 4rem;
  }
}

@media (max-width: 740px) {
  .login-group {
    flex-direction: column;
  }

  .login-group .left {
    align-items: center;
    justify-content: center;
    border-right: none;
    text-align: center;
    margin-bottom: 3rem;
    padding-right: 0;
  }

  .login-group .left br {
    display: none;
  }

  .login-group .left p {
    margin-top: 1rem !important;
  }

  .login-group .right {
    padding-left: 0;
  }
}

/* 회사소개 */
.icons-list {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 1rem;
  width: 80%;
}

.icons-list li {
  width: 100%;
  /*  aspect-ratio: 1/1;*/
  border: solid 1px var(--color-border);
  border-radius: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

@media (max-width: 1280px) {
  .icons-list {
    grid-template-columns: repeat(5, auto);
  }
}

@media (max-width: 940px) {
  .icons-list {
    grid-template-columns: repeat(4, auto);
  }
}

@media (max-width: 640px) {
  .icons-list {
    grid-template-columns: repeat(3, auto);
  }
}

@media (max-width: 460px) {
  .icons-list {
    grid-template-columns: repeat(2, auto);
  }
}

.gray-box-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 80%;
}

.gray-box-list li {
  background-color: #f4f4f4;
  padding: 1rem 1.6rem;
  border-radius: 1.2rem;
}

.gray-box-list li .num {
  display: inline-flex;
  width: 1.5em;
  height: 1.5em;
  font-size: 0.8em;
  align-items: center;
  justify-content: center;
  background-color: #c0c0c0;
  color: #fff;
  border-radius: 50%;
  margin-right: 1rem;
}
.history-group .title-group {
  background: url(../images/intrcn/history_img_01.jpg);
  padding: 7rem;
  display: flex;
  justify-content: space-between;
  color: #fff;
  background-size: cover;
  border-radius: 1.2rem;
}

.history-group .title-group .tit {
  font-size: var(--txt-xl-1);
  font-weight: 500;
}

.history-group .title-group .comment {
  font-size: var(--txt-lg-1);
  line-height: 1.5;
  text-align: right;
  font-weight: 300;
}

.history-group .history-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
  position: relative;
}

.history-group .history-list::before {
  content: "";
  width: 1px;
  height: 100%;
  background-color: var(--color-border);
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 0;
}

.history-group .history-list ol {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.history-group .history-list ol .year {
  font-weight: 700;
  font-size: var(--txt-lg-2);
}

.history-group .history-list ol>li {
  display: flex;
  flex-direction: column;
  position: relative;
}

.history-group .history-list ol>li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: solid 2px var(--color-primary);
  position: absolute;
  top: 0.8rem;
  background-color: #fff;
  z-index: 3;
}

.history-group .history-list ol>li:nth-child(odd) {
  transform: translateX(50%);
  padding-left: 2rem;
}

.history-group .history-list ol>li:nth-child(odd)::before {
  left: -2px;
}

.history-group .history-list ol>li:nth-child(even) {
  transform: translateX(-50%);
  align-items: flex-end;
  padding-right: 2rem;
  text-align: right;
}

.history-group .history-list ol>li:nth-child(even)::before {
  right: -4px;
}

.history-group .history-list ol>li:last-child::after {
  content: "";
  position: absolute;
  width: 5px;
  height: calc(100% - 7px);
  background-color: #fff;
  left: -2px;
  bottom: 0;
  z-index: 2;
}

@media (max-width: 780px) {

  .history-group .title-group .comment,
  .history-group::after,
  .history-group::before {
    display: none;
  }

  .history-group .title-group {
    justify-content: center;
  }

  .history-group .organization-group {
    padding: 2rem;
  }

  .history-group .history-list ol>li:nth-child(odd) {
    transform: none;
  }

  .history-group .history-list ol {
    width: 100%;
  }

  .history-group .history-list ol li {
    text-align: left !important;
  }

  .history-group .history-list ol>li:nth-child(even) {
    align-items: flex-start;
    transform: none;
    padding-left: 2rem;
    padding-right: 0;
  }

  .history-group .history-list ol>li::before {
    left: 2px !important;
    right: auto;
  }

  .history-group .history-list::before {
    left: 5px;
    top: 5rem;
  }

  .history-group .history-list {
    overflow: hidden;
  }

  .history-group .history-list ol>li:last-child::after {
    left: 2px;
  }
}

/* 업무 리스트 */
.buisiness-list-wrap {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.buisiness-list-wrap .search-wrap {
  background-color: #fafafa;
  border: solid 1px var(--color-border);
  border-radius: 0.8rem;
  width: 320px;
  flex-shrink: 0;
  overflow: hidden;
}

.buisiness-list-wrap .search-wrap.close {
  width: auto;
}

.buisiness-list-wrap .search-wrap.close .head-group {
  padding: 0;
  border: none;
}

.buisiness-list-wrap .search-wrap.close .search-grup,
.buisiness-list-wrap .search-wrap.close .search-grup2,
.buisiness-list-wrap .search-wrap.close .btn-group,
.buisiness-list-wrap .search-wrap.close .tit {
  display: none;
}

.buisiness-list-wrap .search-wrap .head-group {
  background-color: #fff;
  padding: 1.3rem 2rem;
  font-weight: 700;
  border-bottom: solid 1px var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.buisiness-list-wrap .search-wrap .head-group .search-toggle {
  display: flex;
  height: 3rem;
  padding: 0 .5rem;
}

.buisiness-list-wrap .search-wrap .head-group .search-toggle::before {
  content: "\f2e3";
  font-family: "remixicon";
  font-weight: 300;
  font-size: 2rem;
}

.buisiness-list-wrap .search-wrap.close .head-group .search-toggle::before {
  content: "\f0d1";
  font-family: "remixicon";
}

.buisiness-list-wrap .search-wrap .search-grup {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 2rem;
  align-items: flex-end;
}
.buisiness-list-wrap .search-wrap .search-grup2 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
  padding: 2rem;
  align-items: flex-end;
}
.buisiness-list-wrap .search-wrap .btn-group {
  display: flex;
  gap: 0.5rem;
  padding: 0 2rem 2rem;
  justify-content: center;
}

.buisiness-list-wrap .list-group {
  flex-grow: 1;
  overflow: auto;
}

.buisiness-list-wrap .list-group table {
  flex-shrink: 0;
}

@media (max-width: 1280px) {
  .buisiness-list-wrap {
    flex-direction: column;
  }

  .buisiness-list-wrap .search-wrap {
    width: 100%;
  }

  .buisiness-list-wrap .search-wrap .head-group {
    display: none;
  }

  .buisiness-list-wrap .search-wrap .search-grup {
    display: flex;
    flex-wrap: wrap;
    row-gap: 1rem;
  }

  .buisiness-list-wrap .search-wrap .search-grup2 {
    display: flex;
    flex-wrap: wrap;
    row-gap: 1rem;
  }
  .buisiness-list-wrap .search-wrap .search-grup>* {
    flex-grow: 1;
  }
  .buisiness-list-wrap .search-wrap .search-grup2>* {
    flex-grow: 1;
  }
  .buisiness-list-wrap .list-group {
    width: 100%;
  }

  .buisiness-list-wrap .search-wrap .btn-group {
    justify-content: center;
    padding-top: 0;
  }

  .buisiness-list-wrap .search-wrap .btn-group>* {
    flex-grow: 0;
  }

  .buisiness-list-wrap .search-wrap .head-group {
    display: flex;
    padding: 1rem 2rem !important;
    gap: 1rem;
  }

  .buisiness-list-wrap .search-wrap .head-group .search-toggle::before {
    content: "\f2ea";
    font-family: "remixicon";
  }

  .buisiness-list-wrap .search-wrap.close .head-group .search-toggle::before {
    content: "\f2e0";
    font-family: "remixicon";
  }

  .buisiness-list-wrap .search-wrap.close .tit {
    display: block;
  }
}

/* 회원가입 */
.join-step1-group {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: center;
  padding: 10rem 4rem;
  background-color: #fafafa;
}

.join-step1-group .icon {
  font-size: 2.2em;
  font-weight: 700;
  background-color: var(--color-primary);
  color: #fff;
  display: flex;
  width: 2em;
  aspect-ratio: 1/1;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
}

.join-step1-group .links {
  display: flex;
  gap: 2rem;
  width: 100%;
  max-width: 580px;
  margin-top: 2rem;
}

.join-step1-group .links a {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1/1;
  flex-basis: 50%;
  flex-grow: 1;
  border: solid 1px var(--color-border);
  border-radius: 0.8rem;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  font-size: var(--txt-lg-2);
  font-weight: 500;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  gap: 2rem;
  transition: all .5s ease-in-out 0s;
}

.join-step1-group .links a:hover {
  transform: translateY(-10px);
  box-shadow: 5px 5px 5px rgba(100, 100, 100, .2);
}

.join-step1-group .links .icon {
  position: relative;
  display: block;
  width: 50%;
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: 50%;
  background-color: #fafafa;
}

.join-step1-group .links .icon.building {
  background-image: url(../images/mbr/icon_building.svg);
}

.join-step1-group .links .icon.user {
  background-image: url(../images/mbr/icon_user.svg);
}

@media (max-width: 780px) {
  .join-step1-group {
    padding: 5rem 2rem;
  }
}

.join-wrap {
  display: flex;
  gap: 5rem;
}

.join-wrap>*:not(.process-bar) {
  flex-grow: 1;
}

.process-bar {
  position: relative;
  background: #fff;
  padding: 2rem 4rem 2rem 0;
}

.process-bar ol {
  display: flex;
  flex-direction: column;
}

.process-bar li {
  position: relative;
  padding-left: 17px;
  display: flex;
  flex-direction: column;
  font-size: 0.825em;
  padding-bottom: 4rem;
  color: #999;
}

.process-bar li:last-child {
  padding-bottom: 0;
}

.process-bar li.past,
.process-bar li.active {
  color: #333;
}

.process-bar li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: solid 2px #dcdcdc;
  position: absolute;
  top: 0.3em;
  left: 2px;
  background-color: #fff;
  z-index: 3;
}

.process-bar li.active::before {
  border-color: var(--color-primary);
}

.process-bar li.past::before {
  border-color: #000;
}

.process-bar li::after {
  content: "";
  width: 1px;
  height: 100%;
  background-color: var(--color-border);
  position: absolute;
  left: 5px;
  top: 0.7em;
  z-index: 1;
}

.process-bar li.past::after {
  background-color: #000;
}

.process-bar li:last-child::after {
  display: none;
}

.process-bar .step {
  font-weight: 700;
  white-space: nowrap;
}

.process-bar li.active .step {
  color: var(--color-primary);
  white-space: nowrap;
}

@media (max-width: 780px) {
  .join-wrap {
    flex-direction: column;
    gap: 2rem;
  }

  .process-bar {
    padding-top: 0;
    padding-right: 2rem;
  }

  .process-bar ol {
    flex-direction: row;
  }

  .process-bar li {
    padding-bottom: 0;
    padding-right: 4rem;
    padding-left: 0;
    padding-top: 2rem;
  }

  .process-bar li::after {
    width: 100%;
    height: 1px;
    top: 6px;
  }
}

/* 진행절차 */
.procedure-gorup {
  background-color: #fafafa;
  border-radius: .8rem;
  padding: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.procedure-gorup ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 1000px;
}

.procedure-gorup ol li {
  display: flex;
  justify-content: center;
  padding: 4rem 0;
  position: relative;
}

.procedure-gorup ol li::before {
  content: "\ea6c";
  font-family: "remixicon";
  font-size: 3rem;
  position: absolute;
  right: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
}


.procedure-gorup ol li .group {
  border: solid 1px var(--color-border);
  border-radius: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  background-color: #fff;
  width: 80%;
  aspect-ratio: 1/1;
  position: relative;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .04);
}

.procedure-gorup ol li .step {
  position: absolute;
  right: 2rem;
  top: 2rem;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
  padding: .5rem 1.2rem;
  border-radius: .4rem;
}

.procedure-gorup ol li:nth-child(even) .step {
  background-color: var(--color-secondary);
}

.procedure-gorup ol li .step-icon img {
  height: 50px;
  max-width: 50px;
  object-fit: contain;
}

.procedure-gorup .txt,
.icon-list .txt {
  font-weight: 500;
  font-size: 1.1em;
}

.procedure-gorup ol li:nth-child(5) {
  order: 8;
}

.procedure-gorup ol li:nth-child(6) {
  order: 7;
}

.procedure-gorup ol li:nth-child(7) {
  order: 6;
}

.procedure-gorup ol li:nth-child(8) {
  order: 5;
}

@media (min-width: 979px) {
  .procedure-gorup ol li:nth-child(4)::before {
    top: 100%;
    right: auto;
    left: auto;
    transform-origin: bottom;
    transform: translateY(-100%) translateX(-50%) rotate(90deg);
  }

  .procedure-gorup ol li:nth-child(5)::before,
  .procedure-gorup ol li:nth-child(6)::before,
  .procedure-gorup ol li:nth-child(7)::before {
    left: -1.5rem;
    right: auto;
    transform: translateY(-50%) rotate(180deg);
  }
}

.procedure-gorup ol li:nth-child(8)::before {
  display: none;
}

@media (max-width: 1120px) {
  .procedure-gorup {
    padding: 2rem;
  }

  .procedure-gorup ol {
    width: 100%;
  }

  .procedure-gorup ol li {
    padding: 2rem 0;
  }
}

@media (max-width: 980px) and (min-width: 779px) {
  .procedure-gorup ol {
    grid-template-columns: repeat(3, 1fr);
  }

  .procedure-gorup ol li:nth-child(4) {
    order: 6;
  }

  .procedure-gorup ol li:nth-child(5) {
    order: 5;
  }

  .procedure-gorup ol li:nth-child(6) {
    order: 4;
  }

  .procedure-gorup ol li:nth-child(7) {
    order: 7;
  }

  .procedure-gorup ol li:nth-child(8) {
    order: 8;
  }

  .procedure-gorup ol li:nth-child(3)::before,
  .procedure-gorup ol li:nth-child(6)::before {
    top: 100%;
    right: auto;
    left: auto;
    transform-origin: bottom;
    transform: translateY(-100%) translateX(-50%) rotate(90deg);
  }

  .procedure-gorup ol li:nth-child(4)::before,
  .procedure-gorup ol li:nth-child(5)::before {
    left: -1.5rem;
    right: auto;
    transform: translateY(-50%) rotate(180deg);
  }

}


@media (max-width: 780px) and (min-width: 479px) {
  .procedure-gorup ol {
    grid-template-columns: repeat(2, 1fr);
  }

  .procedure-gorup ol li .group {
    aspect-ratio: auto;
    padding: 3rem;
  }

  .procedure-gorup ol li:nth-child(3) {
    order: 4;
  }

  .procedure-gorup ol li:nth-child(4) {
    order: 3;
  }

  .procedure-gorup ol li:nth-child(5) {
    order: 5;
  }

  .procedure-gorup ol li:nth-child(6) {
    order: 6;
  }

  .procedure-gorup ol li:nth-child(7) {
    order: 8;
  }

  .procedure-gorup ol li:nth-child(8) {
    order: 7;
  }

  .procedure-gorup ol li:nth-child(even)::before {
    top: 100%;
    right: auto;
    left: auto;
    transform-origin: bottom;
    transform: translateY(-100%) translateX(-50%) rotate(90deg);
  }

  .procedure-gorup ol li:nth-child(3)::before,
  .procedure-gorup ol li:nth-child(7)::before {
    left: -1.5rem;
    right: auto;
    transform: translateY(-50%) rotate(180deg);
  }

  .procedure-gorup .info-txt {
    text-align: left !important;
  }
}

@media (max-width: 480px) {
  .procedure-gorup ol {
    grid-template-columns: repeat(1, 1fr);
  }

  .procedure-gorup ol li .group {
    aspect-ratio: auto;
    padding: 4rem;
  }

  .procedure-gorup ol li:nth-child(3) {
    order: 3;
  }

  .procedure-gorup ol li:nth-child(4) {
    order: 4;
  }

  .procedure-gorup ol li:nth-child(5) {
    order: 5;
  }

  .procedure-gorup ol li:nth-child(6) {
    order: 6;
  }

  .procedure-gorup ol li:nth-child(7) {
    order: 7;
  }

  .procedure-gorup ol li:nth-child(8) {
    order: 8;
  }

  .procedure-gorup ol li::before {
    top: 100%;
    right: auto;
    left: auto;
    transform-origin: bottom;
    transform: translateY(-100%) translateX(-50%) rotate(90deg);
  }

  .procedure-gorup .info-txt {
    text-align: left !important;
  }
}

/* 오시는길 */
.map-group {

  border: solid 1px var(--color-border);
}

.map-group .map {
  padding: 2rem;
  background-color: #fafafa;
  width: 100%;
  aspect-ratio: 1/0.5;
}

.map-group .map>* {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-group .info {
  padding: 2rem;
  border-top: solid 1px var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* icon-list */
.icon-list {
  background-color: #f9f9f9;
  padding: 4rem;
  display: flex;
  justify-content: center;
  color: #606060;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
  height: auto;
}

.icon-list ul {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.icon-list ul li {
  flex-grow: 1;
  max-width: 200px;
  flex-basis: 100%;
}

.icon-list ul li.drop-wrap {
  position: relative;
}

.icon-list>ul>li>a {
  display: flex;
  width: 100%;
  /*height: 100%;*/
  flex-direction: column;
  border: solid 1px var(--color-border);
  aspect-ratio: 1/.8;
  border-radius: 0.8rem;
  justify-content: center;
  align-items: center;
  transition: all .5s ease-in-out 0s;
  background-color: #fff;
  gap: 1rem;
}

.icon-list ul>li>a:hover {
  box-shadow: 3px 3px 10px rgba(255, 0, 0, 0.1);
  border-color: rgba(255, 0, 0, 0.3);
  transform: translateY(-10px);
}

.icon-list ul li.drop-wrap.active>a {
  transform: translateY(-10px);
  border-color: rgba(255, 0, 0, 0.3);
  box-shadow: 3px 3px 10px rgba(255, 0, 0, 0.1);
  color: var(--color-primary);
}

.icon-list ul li img {
  height: 50px;
  max-width: 50px;
  object-fit: contain;
}

.icon-list .link-group {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0px;
  background-color: #fff;
  transform: translateY(100%);
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  z-index: 2;
}

.icon-list ul li.drop-wrap .link-group {
  display: none;
}

.icon-list ul li.drop-wrap.active .link-group {
  display: block;
  border: solid 1px var(--color-border);
}

.icon-list .link-group a {
  padding: 1rem;
  border-bottom: dashed 1px var(--color-border);
  font-size: .95em;
}

.icon-list .link-group a:hover {
  background-color: var(--color-primary);
  color: #fff;
}

.icon-list .link-group a:last-child {
  border-bottom: none;
}

@media (max-width) {
  .icon-list {}
}

/* popup table 추가 */
.pop-buisiness-list-wrap {
  flex-direction: column;
}

.pop-buisiness-list-wrap .search-wrap {
  width: 100%;
}

.pop-buisiness-list-wrap .search-wrap .head-group {
  display: none;
}

.pop-buisiness-list-wrap .search-wrap .search-grup {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex-wrap: wrap;
  row-gap: 1rem;
}

.pop-buisiness-list-wrap .search-wrap .search-grup>* {
  flex-grow: 1;
}

.pop-buisiness-list-wrap .list-group {
  width: 100%;
}

.pop-buisiness-list-wrap .search-wrap .btn-group {
  justify-content: center;
  padding-top: 0;
}

.pop-buisiness-list-wrap .search-wrap .btn-group>* {
  flex-grow: 0;
}

.pop-buisiness-list-wrap .search-wrap .head-group {
  display: flex;
  padding: 1rem 2rem !important;
  gap: 1rem;
}

.pop-buisiness-list-wrap .search-wrap .head-group .search-toggle::before {
  content: "\f2ea";
  font-family: "remixicon";
}

.pop-buisiness-list-wrap .search-wrap.close .head-group .search-toggle::before {
  content: "\f2e0";
  font-family: "remixicon";
}

.pop-buisiness-list-wrap .search-wrap.close .tit {
  display: block;
}

.textL {
  text-align: left;
}

.textR {
  text-align: right;
}

.textC {
  text-align: center;
}



.labeling_list {display: flex;flex-wrap: wrap;width: calc(100% + 2.5rem);margin-top:4rem;word-break: keep-all;}
.labeling_list li {display: flex;border: 1px solid #E7E8EA;width: calc(33.3% - 2.5rem);margin: 0 2.5rem 2.5rem 0;padding:0 1.5rem;min-height: 22rem;align-items: center;justify-content: center;text-align: center;border-radius:2rem}
.labeling_list li .item {text-align: center;letter-spacing: -.05rem}
.labeling_list li .item strong {display: block;margin: 1.7rem 0 .6rem;font-size: 1.6rem;font-weight: bold;color: #242427}
.labeling_list li .item p {line-height: 2.2rem;font-size: 1.4rem;}
.labeling_list li .anchor_btn {margin-top: 1rem}

.privacy_list_wrap {padding: 2rem 3rem;background-color: #fff;border: 1px solid #E7E8EA;word-break: keep-all;border-radius:2rem;word-break:keep-all}
.privacy_list {display: flex;flex-flow: row wrap;overflow: hidden}
.privacy_list > li {width: 60%;margin: .5rem 0;padding-right: 2rem;line-height: 2.5rem}
.privacy_list > li:nth-child(even) {width: 40%}
.privacy_list > li > a {display: block;position: relative;padding-left: 2.8rem}
.privacy_list > li > a > img {position: absolute;left: 0;top: .5rem;height: 2rem;margin-right: .5rem}