@charset "UTF-8";

/* 공사소개 > 열린CEO > 경영방침 */
.paragraph[key=경영방침] .box2 {
  padding: 2.5rem 2rem;
  text-align: center;
}
.paragraph[key=경영방침] .box2 h6 {
  font-size: var(--fs-xl);
}
.paragraph[key=경영방침] .box2 .wrap-box2 {
  width: 100%;
  padding: 2rem;
}
.paragraph[key=경영방침] .box2 .wrap-box2 ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.paragraph[key=경영방침] .box2 .wrap-box2 ul li {
  width: 100%;
  padding: 1rem 0;
  background-color: var(--clr-white);
  border-radius: 8px;
  box-shadow: var(--shadow-7);
  position: relative;
}
.paragraph[key=경영방침] .box2 .wrap-box2 ul li span {
  font-size: var(--fs-md-18);
  font-family: var(--fm-scdream5);
}
.paragraph[key=경영방침] .box2 .wrap-box2 ul li:not(:last-of-type)::before {
  content: "";
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: url("../../img/sub/plus_circle-blue.png") center center no-repeat;
  position: absolute;
  top: 3.7rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.paragraph[key=경영방침] .box3.img-dl dl:first-of-type::after {
  background-image: url("../../img/sub/principle-01.png");
}
.paragraph[key=경영방침] .box3.img-dl dl:nth-of-type(2)::after {
  background-image: url("../../img/sub/online_meeting_img-05.png");
}
.paragraph[key=경영방침] .box3.img-dl dl:nth-of-type(3)::after {
  background-image: url("../../img/sub/ncs_recruit-img-06.png");
}

@media screen and (min-width: 1024px) {
  .paragraph[key=경영방침] .box2 {
    padding: 2.5rem 2rem;
    text-align: center;
  }
  .paragraph[key=경영방침] .box2 h6 {
    font-size: var(--fs-xl);
  }
  .paragraph[key=경영방침] .box2 .wrap-box2 {
    width: 100%;
    padding: 2rem;
  }
  .paragraph[key=경영방침] .box2 .wrap-box2 ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
  }
  .paragraph[key=경영방침] .box2 .wrap-box2 ul li {
    width: 27.6rem;
    padding: 2.1rem 0;
  }
  .paragraph[key=경영방침] .box2 .wrap-box2 ul li:not(:last-of-type)::before {
    top: 50%;
    left: unset;
    right: -2rem;
    transform: translateY(-50%);
    z-index: 1;
  }
}
/* 공사소개 > 열린CEO > 약력 */
.paragraph[key=약력] .bottom {
  margin-top: 8.6rem;
}
.paragraph[key=약력] .bottom .wrap-career-bottom {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.paragraph[key=약력] .bottom .wrap-career-bottom h5 {
  margin-bottom: 3.8rem;
  font-size: var(--fs-xl);
  font-family: var(--fm-scdream5);
}

@media screen and (min-width: 980px) {
  .paragraph[key=약력] .bottom {
    margin-top: 8.6rem;
  }
  .paragraph[key=약력] .bottom .wrap-career-bottom {
    display: flex;
    flex-direction: row;
  }
  .paragraph[key=약력] .bottom .wrap-career-bottom .left,
.paragraph[key=약력] .bottom .wrap-career-bottom .right {
    width: min(50%, 63rem);
    padding-left: 4.1rem;
  }
  .paragraph[key=약력] .bottom .wrap-career-bottom .left {
    border-right: 1px solid var(--clr-gray-light);
  }
}
/* 공사소개 > 열린CEO > 인사말 */
.paragraph[key=인사말] .top {
  height: 55rem;
}
.paragraph[key=인사말] .top .img-area {
  width: 37rem;
  height: auto;
  position: absolute;
  bottom: 0;
  right: -4rem;
}
.paragraph[key=인사말] .top .img-area img {
  object-fit: contain;
}
.paragraph[key=인사말] .top .text .title-thin {
  width: 60%;
}
.paragraph[key=인사말] .top::before {
  width: 120%;
}

@media screen and (min-width: 640px) {
  .paragraph[key=인사말] .top .img-area {
    width: 50rem;
    height: 50rem;
    right: -5rem;
  }
  .paragraph[key=인사말] .top .text .title-thin {
    width: 100%;
  }
}
@media screen and (min-width: 980px) {
  .paragraph[key=인사말] .top {
    height: initial;
  }
  .paragraph[key=인사말] .top .img-area {
    width: 85%;
    height: fit-content;
    position: relative;
    top: unset;
    right: -11rem;
  }
}
/* 공사소개 > 일반현황 > UPA 소개 */
.paragraph[key=upa소개] .upa-info dl {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--clr-black);
}
.paragraph[key=upa소개] .upa-info dl dt, .paragraph[key=upa소개] .upa-info dl dd {
  width: 100%;
  flex-grow: 1;
  height: 5rem;
  display: grid;
  align-items: center;
  border-bottom: 1px solid var(--clr-gray-light);
  border-right: 1px soild var(--clr-gray-light);
}
.paragraph[key=upa소개] .upa-info dl dt {
  background-color: var(--clr-white-dark);
  justify-content: center;
}
.paragraph[key=upa소개] .upa-info dl dt span {
  font-family: var(--fm-scdream6);
}
.paragraph[key=upa소개] .upa-info dl dd {
  text-align: center;
}
.paragraph[key=upa소개] .ci {
  padding: 5rem;
  display: grid;
  place-content: center;
  background: url("../../img/sub/bg-ci.png");
}
.paragraph[key=upa소개] .ci img {
  transform: scale(0.5);
}
.paragraph[key=upa소개] .mission .wrap-mission {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 6rem;
}
.paragraph[key=upa소개] .mission .wrap-mission .mission-items {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.paragraph[key=upa소개] .mission .wrap-mission .mission-items .item {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
  padding: 2rem 1rem;
  background-color: var(--clr-white-dark);
  border-radius: 0.5rem;
  text-align: center;
}
.paragraph[key=upa소개] .mission .wrap-mission .mission-goal {
  width: 16rem;
  height: 16rem;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  border-radius: 50%;
  border: 8px solid var(--clr-white-alt);
  position: relative;
}
.paragraph[key=upa소개] .mission .wrap-mission .mission-goal::before {
  content: "";
  width: 4.4rem;
  height: 15.4rem;
  background: url("../../img/icon/icon-arrow-right-big.png") center center no-repeat;
  background-size: contain;
  position: absolute;
  top: 73%;
  left: 50%;
  transform: translateX(-50%) rotate(-90deg);
}
.paragraph[key=upa소개] .mission .wrap-mission .mission-goal p {
  color: var(--clr-white);
}
.paragraph[key=upa소개] .mission .wrap-mission .mission-goal p span {
  font-family: var(--fm-scdream6);
  color: var(--clr-white);
}

@media screen and (min-width: 768px) {
  .paragraph[key=upa소개] .upa-info dl {
    display: flex;
    flex-wrap: wrap;
  }
  .paragraph[key=upa소개] .upa-info dl dt, .paragraph[key=upa소개] .upa-info dl dd {
    width: 25%;
    flex-grow: 1;
    height: 6.4rem;
  }
  .paragraph[key=upa소개] .upa-info dl dd {
    padding-left: 2rem;
  }
  .paragraph[key=upa소개] .upa-info dl dd:nth-of-type(4n) {
    border-right: none;
  }
  .paragraph[key=upa소개] .mission {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .paragraph[key=upa소개] .mission .wrap-mission {
    width: min(62rem, 100%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8.4rem;
    padding-left: 4rem;
    position: relative;
  }
  .paragraph[key=upa소개] .mission .wrap-mission::before {
    content: "";
    width: 0;
    height: 10rem;
    border: 1px dashed var(--clr-gray-light);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .paragraph[key=upa소개] .mission .wrap-mission .mission-items .item {
    display: grid;
    place-items: center;
    position: relative;
  }
  .paragraph[key=upa소개] .mission .wrap-mission .mission-items .item::before {
    content: "";
    width: 4rem;
    height: 0;
    border: 1px dashed var(--clr-gray-light);
    position: absolute;
    top: 50%;
    left: -4rem;
    transform: translateY(-50%);
  }
  .paragraph[key=upa소개] .mission .wrap-mission .mission-goal {
    width: 20rem;
    height: 20rem;
  }
  .paragraph[key=upa소개] .mission .wrap-mission .mission-goal::before {
    content: "";
    width: 4.4rem;
    height: 15.4rem;
    background: url("../../img/icon/icon-arrow-right-big.png") center center no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: -7rem;
    transform: translateY(-50%);
  }
  .paragraph[key=upa소개] .mission .wrap-mission .mission-goal p {
    font-size: var(--fs-lg);
  }
  .paragraph[key=upa소개] .mission .wrap-mission .mission-goal p span {
    font-size: var(--fs-lg);
  }
}
@media screen and (min-width: 1024px) {
  .paragraph[key=upa소개] .mission .wrap-mission {
    width: min(80rem, 100%);
    gap: 8.4rem;
  }
  .paragraph[key=upa소개] .mission .wrap-mission::before {
    height: 8.5rem;
  }
  .paragraph[key=upa소개] .mission .wrap-mission .mission-items .item {
    position: relative;
  }
  .paragraph[key=upa소개] .mission .wrap-mission .mission-items .item::before {
    content: "";
    width: 4rem;
    height: 0;
    border: 1px dashed var(--clr-gray-light);
    position: absolute;
    top: 50%;
    left: -4rem;
    transform: translateY(-50%);
  }
}
/* 공사소개 > 일반현황 > 비전 및 전략 */
.paragraph[key=공사소개_비전및전략] .wrap-vision {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  gap: 6rem;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .title.box2 {
  margin-bottom: 0;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .title .wrap-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .title .wrap-title .en {
  color: var(--clr-blue);
  font-family: var(--fm-cairo);
  text-transform: capitalize;
  font-size: var(--fs-md-18);
  text-align: center;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .title .wrap-title .ko {
  margin-top: 1rem;
  font-size: var(--fs-xl);
  display: inline-block;
  text-align: center;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .title .wrap-title .ko span {
  font-size: var(--fs-xl);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item {
  width: 100%;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-title {
  padding: 1.5rem 0;
  text-align: center;
  position: relative;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--clr-blue);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-title p {
  font-size: var(--fs-xl);
  font-family: var(--fm-scdream6);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1 {
  width: 100%;
  border-radius: 5px;
  border: 1px solid;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1 .name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: min(11rem, 100%);
  margin: 2rem 0;
  text-align: center;
  position: relative;
  font-family: var(--fm-scdream6);
  font-size: var(--fs-md-17);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1 .name::before {
  content: "";
  width: 4rem;
  height: 4rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1 .name_en {
  width: 100%;
  display: block;
  text-align: center;
  padding: 1.5rem 0;
  color: var(--clr-white);
  text-transform: capitalize;
  font-family: var(--fm-scdream6);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1:nth-of-type(1) {
  border-color: var(--clr-blue-alt);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1:nth-of-type(1) .name {
  color: var(--clr-blue-alt);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1:nth-of-type(1) .name_en {
  background-color: var(--clr-blue-alt);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1:nth-of-type(2) {
  border-color: var(--clr-blue);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1:nth-of-type(2) .name {
  color: var(--clr-blue);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1:nth-of-type(2) .name_en {
  background-color: var(--clr-blue);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1:nth-of-type(3) {
  border-color: var(--clr-sky-dark);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1:nth-of-type(3) .name {
  color: var(--clr-sky-dark);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1:nth-of-type(3) .name_en {
  background-color: var(--clr-sky-dark);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1:nth-of-type(4) {
  border-color: var(--clr-green);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1:nth-of-type(4) .name {
  color: var(--clr-green);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1:nth-of-type(4) .name_en {
  background-color: var(--clr-green);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type2 {
  width: 100%;
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type2 .name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  width: min(23rem, 100%);
  height: fit-content;
  margin: 2rem 0;
  padding-left: 7rem;
  text-align: left;
  position: relative;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type2 .name::before {
  content: "";
  width: 6rem;
  height: 6rem;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type2:not(:last-of-type) {
  position: relative;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type2:not(:last-of-type)::before {
  content: "";
  width: 3rem;
  height: 3rem;
  background: url("../../img/sub/plus_circle-blue.png") center center no-repeat;
  background-size: 2.9rem;
  position: absolute;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item.core_value .wrap-item .item-desc {
  position: relative;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item.core_value .wrap-item .item-desc::before {
  content: "";
  width: 90%;
  height: 4rem;
  background: url("../../img/sub/diagram_arrow-down.png") top center no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -4rem;
  left: 50%;
  transform: translateX(-50%);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item.core_value .wrap-item .item-desc .list .type1 .name {
  height: 8rem;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item.core_value .wrap-item .item-desc .list .type1:nth-of-type(1) .name::before {
  background-image: url("../../img/sub/01-vision-01.png");
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item.core_value .wrap-item .item-desc .list .type1:nth-of-type(2) .name::before {
  background-image: url("../../img/sub/01-vision-02.png");
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item.core_value .wrap-item .item-desc .list .type1:nth-of-type(3) .name::before {
  background-image: url("../../img/sub/01-vision-03.png");
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item.core_value .wrap-item .item-desc .list .type1:nth-of-type(4) .name::before {
  background-image: url("../../img/sub/01-vision-04.png");
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item.goal .wrap-item .item-desc .list .type1 .name {
  height: 10rem;
  font-family: var(--fm-scdream5);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item.goal .wrap-item .item-desc .list .type1 .name::before {
  width: 5rem;
  height: 5rem;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item.goal .wrap-item .item-desc .list .type1:nth-of-type(1) .name::before {
  background-image: url("../../img/sub/01-vision-05.png");
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item.goal .wrap-item .item-desc .list .type1:nth-of-type(2) .name::before {
  background-image: url("../../img/sub/01-vision-06.png");
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item.goal .wrap-item .item-desc .list .type1:nth-of-type(3) .name::before {
  background-image: url("../../img/sub/01-vision-07.png");
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item.goal .wrap-item .item-desc .list .type1:nth-of-type(4) .name::before {
  background-image: url("../../img/sub/01-vision-08.png");
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item.direction .wrap-item .item-desc .list .type2:nth-of-type(1) .name::before {
  background-image: url("../../img/sub/01-vision-09.png");
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item.direction .wrap-item .item-desc .list .type2:nth-of-type(2) .name::before {
  background-image: url("../../img/sub/01-vision-10.png");
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item.direction .wrap-item .item-desc .list .type2:nth-of-type(3) .name::before {
  background-image: url("../../img/sub/01-vision-11.png");
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .item.direction .wrap-item .item-desc .list .type2:nth-of-type(4) .name::before {
  background-image: url("../../img/sub/01-vision-12.png");
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .todo {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .todo .title {
  width: 100%;
  height: 5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5rem;
  position: relative;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .todo .title::before {
  content: "";
  width: 90%;
  height: 4rem;
  background: url("../../img/sub/diagram_arrow-down.png") center top no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -4rem;
  left: 50%;
  transform: translateX(-50%);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .todo .title p {
  font-size: var(--fs-md-18);
  font-family: var(--fm-scdream6);
  color: var(--clr-white);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo {
  width: 100%;
  border: 1px solid var(--clr-gray-light);
  border-radius: 5px;
  padding: 0.8rem;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo .todo-title {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.8rem;
  border-radius: 5px;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo .todo-title p {
  font-size: var(--fs-md-17);
  font-family: var(--fm-scdream5);
  color: var(--clr-white);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo .todo-desc {
  padding: 0.5rem;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo .todo-desc ul li.dot {
  margin-bottom: 0;
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo:nth-of-type(1) .todo-title, .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo:nth-of-type(2) .todo-title, .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo:nth-of-type(3) .todo-title {
  background-color: var(--clr-blue-alt);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo:nth-of-type(4) .todo-title, .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo:nth-of-type(5) .todo-title, .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo:nth-of-type(6) .todo-title {
  background-color: var(--clr-blue);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo:nth-of-type(7) .todo-title, .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo:nth-of-type(8) .todo-title, .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo:nth-of-type(9) .todo-title {
  background-color: var(--clr-sky-dark);
}
.paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo:nth-of-type(10) .todo-title, .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo:nth-of-type(11) .todo-title, .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo:nth-of-type(12) .todo-title {
  background-color: var(--clr-green);
}

@media screen and (min-width: 640px) {
  .paragraph[key=공사소개_비전및전략] .wrap-vision .title .wrap-title .en {
    font-size: var(--fs-xl);
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .title .wrap-title .ko {
    font-size: var(--fs-2xl);
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .title .wrap-title .ko span {
    font-size: var(--fs-2xl);
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item {
    width: 100%;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item {
    gap: 1.5rem;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-title p {
    font-size: var(--fs-xl);
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1 {
    width: 49%;
    flex-grow: 1;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1 .name {
    width: min(13rem, 100%);
    margin: 2rem 0;
    font-size: var(--fs-xl);
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1 .name::before {
    width: 4.5rem;
    height: 4.5rem;
    top: 8px;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type2 {
    width: calc(25% - 1rem);
    flex-grow: 1;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type2 .name {
    width: fit-content;
    justify-content: center;
    align-items: flex-end;
    height: 13rem;
    padding-left: 0;
    text-align: center;
    position: relative;
    font-size: var(--fs-lg);
    margin: 0;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type2 .name::before {
    content: "";
    width: 8rem;
    height: 8rem;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type2:not(:last-of-type)::before {
    position: absolute;
    bottom: unset;
    left: unset;
    top: 35%;
    right: -1.8rem;
    transform: translateY(-50%);
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item.core_value .wrap-item .item-desc::before {
    width: 100%;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item.core_value .wrap-item .item-desc .list .type1 .name {
    height: 10rem;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item.goal .wrap-item .item-desc .list .type1 .name {
    height: 14rem;
    font-size: var(--fs-lg);
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item.goal .wrap-item .item-desc .list .type1 .name::before {
    width: 6.5rem;
    height: 6.5rem;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item.direction .wrap-item .item-desc .list {
    row-gap: 6rem;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item.direction .wrap-item .item-desc .list .type2 {
    width: calc(50% - 1rem);
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item.direction .wrap-item .item-desc .list .type2:nth-of-type(2)::before {
    top: unset;
    bottom: -4rem;
    right: unset;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item.direction .wrap-item .item-desc .list .type2:nth-of-type(3)::before {
    top: -5rem;
    right: unset;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item.direction .wrap-item .item-desc .list .type2:nth-of-type(4) {
    position: relative;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item.direction .wrap-item .item-desc .list .type2:nth-of-type(4)::before {
    content: "";
    width: 3rem;
    height: 3rem;
    background: url("../../img/sub/plus_circle-blue.png") center center no-repeat;
    background-size: 2.9rem;
    position: absolute;
    top: 50%;
    right: unset;
    left: -2.2rem;
    transform: translateY(-50%);
    z-index: 1;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .todo {
    gap: 4.8rem;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .title {
    height: 9.2rem;
    border-radius: 10rem;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .title::before {
    width: 100%;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .title p {
    font-size: var(--fs-xl);
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo {
    width: calc(50% - 1rem);
    padding: 1.6rem 2rem;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo .todo-title {
    padding: 1.5rem;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo .todo-title p {
    font-size: var(--fs-md-18);
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo .todo-desc {
    padding: 2.2rem 0 1rem;
  }
}
@media screen and (min-width: 1024px) {
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item.direction .wrap-item .item-desc .list .type2 {
    width: calc(25% - 1rem);
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item.direction .wrap-item .item-desc .list .type2:nth-of-type(2)::before, .paragraph[key=공사소개_비전및전략] .wrap-vision .item.direction .wrap-item .item-desc .list .type2:nth-of-type(3)::before {
    top: 35%;
    bottom: unset;
    right: -2rem;
    left: unset;
    transform: translateY(-50%);
    z-index: 1;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item.direction .wrap-item .item-desc .list .type2:last-of-type::before {
    display: none;
  }
}
@media screen and (min-width: 1280px) {
  .paragraph[key=공사소개_비전및전략] .wrap-vision {
    align-items: flex-end;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .title {
    width: calc(100% - 23.8rem);
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item {
    width: 100%;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item {
    flex-direction: row;
    gap: 0;
    align-items: center;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-title {
    width: 23.8rem;
    text-align: left;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-title p {
    display: block;
    width: 50%;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-title::before {
    width: 10px;
    height: 10px;
    top: 50%;
    left: 50%;
    right: 0;
    transform: translateY(-50%);
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-title::after {
    content: "";
    width: 7.5rem;
    height: 0;
    border: 1px dashed var(--clr-gray-light);
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translateY(-50%);
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-title p {
    font-size: var(--fs-xl);
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc {
    width: calc(100% - 23.8rem);
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1 {
    width: 18.8rem;
    height: 23.8rem;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1 .name {
    margin: 2rem 0;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type1 .name::before {
    width: 4.5rem;
    height: 4.5rem;
    top: 0;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type2 {
    width: calc(25% - 1rem);
    flex-grow: 1;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type2 .name {
    width: fit-content;
    justify-content: center;
    align-items: flex-end;
    height: 14rem;
    padding-left: 0;
    text-align: center;
    position: relative;
    font-size: var(--fs-lg);
    margin: 0;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item .wrap-item .item-desc .list .type2 .name::before {
    width: 9rem;
    height: 9rem;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item.core_value .wrap-item .item-desc::before {
    height: 8rem;
    bottom: -8rem;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item.core_value .wrap-item .item-desc .list .type1 {
    justify-content: space-between;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item.core_value .wrap-item .item-desc .list .type1 .name {
    height: 10rem;
    margin-top: 5rem;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item.goal .wrap-item .item-desc .list .type1 .name {
    height: 17rem;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item.goal .wrap-item .item-desc .list .type1 .name::before {
    width: 9rem;
    height: 9rem;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .item.direction .wrap-item .item-desc .list {
    padding: 0 5rem;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .todo {
    width: calc(100% - 23.8rem);
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .title {
    height: 9.2rem;
    border-radius: 10rem;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .title::before {
    height: 7rem;
    bottom: -7rem;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .title p {
    font-size: var(--fs-xl);
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo {
    width: calc(32% - 1rem);
    flex-grow: 1;
    padding: 1.6rem 2rem;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo .todo-title {
    padding: 1.5rem;
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo .todo-title p {
    font-size: var(--fs-md-18);
  }
  .paragraph[key=공사소개_비전및전략] .wrap-vision .todo .wrap-todos .item-todo .todo-desc {
    padding: 2.2rem 0;
  }
}
/* 공사소개 > 일반현황 > 핵심가치 */
.paragraph[key=핵심가치] .core_value {
  width: 100%;
  position: relative;
  padding: 4rem;
  padding-top: 7.3rem;
  border: 1px solid var(--clr-gray-light);
  border-radius: 1rem;
}
.paragraph[key=핵심가치] .core_value h6 {
  width: 26.2rem;
  height: 5rem;
  display: grid;
  place-items: center;
  border-radius: 10rem;
  position: absolute;
  top: -2.2rem;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 400;
  z-index: 1;
}
.paragraph[key=핵심가치] .core_value h6 span {
  color: var(--clr-white);
}
.paragraph[key=핵심가치] .core_value h6::before {
  content: "";
  width: 0;
  height: 2rem;
  border: 1px dashed var(--clr-gray-light);
  position: absolute;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
}
.paragraph[key=핵심가치] .core_value .wrap-core_value {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  flex-wrap: wrap;
}
.paragraph[key=핵심가치] .core_value .wrap-core_value dl {
  position: relative;
}
.paragraph[key=핵심가치] .core_value .wrap-core_value dl dt {
  width: 100%;
  height: 6.4rem;
  text-align: center;
  border-radius: 0.5rem;
  margin-bottom: 1.2rem;
  display: grid;
  place-items: center;
}
.paragraph[key=핵심가치] .core_value .wrap-core_value dl dt > span {
  color: var(--clr-white);
  text-transform: capitalize;
}
.paragraph[key=핵심가치] .core_value .wrap-core_value dl dd {
  width: 100%;
  padding: 2rem;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 0.5rem;
  border: 1px solid var(--clr-gray-light);
}
.paragraph[key=핵심가치] .core_value .wrap-core_value dl:first-of-type dt {
  background-color: var(--clr-blue-primary);
}
.paragraph[key=핵심가치] .core_value .wrap-core_value dl:first-of-type::before {
  content: "";
  width: 0;
  height: 2rem;
  border: 1px dashed var(--clr-gray-light);
  position: absolute;
  top: -2.2rem;
  left: 50%;
  transform: translateX(-50%);
}
.paragraph[key=핵심가치] .core_value .wrap-core_value dl:nth-of-type(2) dt {
  background-color: var(--clr-blue-secondary);
}
.paragraph[key=핵심가치] .core_value .wrap-core_value dl:nth-of-type(2)::before {
  content: "";
  width: 0;
  height: 2rem;
  border: 1px dashed var(--clr-gray-light);
  position: absolute;
  top: -2.2rem;
  left: 50%;
  transform: translateX(-50%);
}
.paragraph[key=핵심가치] .core_value .wrap-core_value dl:nth-of-type(2)::after {
  content: "";
  width: 0;
  height: 2rem;
  border: 1px dashed var(--clr-gray-light);
  position: absolute;
  top: -4rem;
  left: 50%;
  transform: translateX(-50%);
}
.paragraph[key=핵심가치] .core_value .wrap-core_value dl:nth-of-type(3) dt {
  background-color: var(--clr-sky-dark);
}
.paragraph[key=핵심가치] .core_value .wrap-core_value dl:nth-of-type(3)::before {
  content: "";
  width: 0;
  height: 2rem;
  border: 1px dashed var(--clr-gray-light);
  position: absolute;
  top: -2.2rem;
  left: 50%;
  transform: translateX(-50%);
}
.paragraph[key=핵심가치] .core_value .wrap-core_value dl:nth-of-type(3)::after {
  content: "";
  width: 0;
  height: 2rem;
  border: 1px dashed var(--clr-gray-light);
  position: absolute;
  top: -4rem;
  left: 50%;
  transform: translateX(-50%);
}
.paragraph[key=핵심가치] .core_value .wrap-core_value dl:nth-of-type(4) dt {
  background-color: var(--clr-green);
}
.paragraph[key=핵심가치] .core_value .wrap-core_value dl:nth-of-type(4)::before {
  content: "";
  width: 0;
  height: 2rem;
  border: 1px dashed var(--clr-gray-light);
  position: absolute;
  top: -2.2rem;
  left: 50%;
  transform: translateX(-50%);
}
.paragraph[key=핵심가치] .core_value .wrap-core_value dl:nth-of-type(4)::after {
  content: "";
  width: 0;
  height: 2rem;
  border: 1px dashed var(--clr-gray-light);
  position: absolute;
  top: -4rem;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (min-width: 768px) {
  .paragraph[key=핵심가치] .core_value .wrap-core_value {
    flex-direction: row;
  }
  .paragraph[key=핵심가치] .core_value .wrap-core_value dl {
    width: calc(50% - 2rem);
  }
  .paragraph[key=핵심가치] .core_value .wrap-core_value dl dd {
    height: 11.8rem;
  }
  .paragraph[key=핵심가치] .core_value .wrap-core_value dl:first-of-type::after {
    content: "";
    width: calc(100% + 4rem);
    height: 0;
    border: 1px dashed var(--clr-gray-light);
    position: absolute;
    top: -2.2rem;
    left: 50%;
  }
  .paragraph[key=핵심가치] .core_value .wrap-core_value dl:nth-of-type(2)::after {
    border-color: transparent;
  }
  .paragraph[key=핵심가치] .core_value .wrap-core_value dl:nth-of-type(3)::after {
    content: "";
    width: 0;
    height: 2rem;
    border: 1px dashed var(--clr-gray-light);
    position: absolute;
    top: -4rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .paragraph[key=핵심가치] .core_value .wrap-core_value dl:nth-of-type(4)::after {
    content: "";
    width: 0;
    height: 2rem;
    border: 1px dashed var(--clr-gray-light);
    position: absolute;
    top: -4rem;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (min-width: 1200px) {
  .paragraph[key=핵심가치] .core_value .wrap-core_value {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .paragraph[key=핵심가치] .core_value .wrap-core_value dl {
    width: 100%;
  }
  .paragraph[key=핵심가치] .core_value .wrap-core_value dl:first-of-type::before {
    height: 2rem;
  }
  .paragraph[key=핵심가치] .core_value .wrap-core_value dl:first-of-type::after {
    content: "";
    width: calc(100% + 4rem);
    height: 0;
    border: 1px dashed var(--clr-gray-light);
    position: absolute;
    top: -2.2rem;
    left: 50%;
  }
  .paragraph[key=핵심가치] .core_value .wrap-core_value dl:nth-of-type(2)::before {
    height: 2rem;
  }
  .paragraph[key=핵심가치] .core_value .wrap-core_value dl:nth-of-type(2)::after {
    content: "";
    width: calc(100% + 4rem);
    height: 0;
    border: 1px dashed var(--clr-gray-light);
    position: absolute;
    top: -2.2rem;
    left: 50%;
    transform: unset;
  }
  .paragraph[key=핵심가치] .core_value .wrap-core_value dl:nth-of-type(3)::before {
    height: 2rem;
  }
  .paragraph[key=핵심가치] .core_value .wrap-core_value dl:nth-of-type(3)::after {
    content: "";
    width: calc(100% + 4rem);
    height: 0;
    border: 1px dashed var(--clr-gray-light);
    position: absolute;
    top: -2.2rem;
    left: 50%;
    transform: unset;
  }
  .paragraph[key=핵심가치] .core_value .wrap-core_value dl:nth-of-type(4)::before {
    height: 2rem;
  }
  .paragraph[key=핵심가치] .core_value .wrap-core_value dl:nth-of-type(4)::after {
    display: none;
  }
}

/* 공사소개 > 일반현황 > 기관연혁 */
/* 역대기관장 */
.paragraph.card1 .wrap-card1 {
  display: flex;
  gap: 2.8rem;
  flex-wrap: wrap;
  margin-top: 6rem;
}
.paragraph.card1 .wrap-card1 .card1-item {
  padding: 3.9rem;
  border-radius: 0.5rem;
  overflow: hidden;
  flex-grow: 1;
}
.paragraph.card1 .wrap-card1 .card1-item .card1-img {
  width: 100%;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: var(--clr-white-dark);
}
.paragraph.card1 .wrap-card1 .card1-item .card1-info {
  width: 100%;
  padding: 3.3rem 0 2.6rem;
  border-bottom: 1px solid var(--clr-blue-primary);
}
.paragraph.card1 .wrap-card1 .card1-item .card1-info dt {
  color: var(--clr-blue-secondary);
  font-family: var(--fm-scdream5);
  font-size: var(--fs-xs);
}
.paragraph.card1 .wrap-card1 .card1-item .card1-info dd {
  color: var(--clr-black);
  font-family: var(--fm-scdream6);
  font-size: var(--fs-xl);
}
.paragraph.card1 .wrap-card1 .card1-item .card1-period {
  margin-top: 2.9rem;
}
.paragraph.card1 .wrap-card1 .card1-item:hover {
  border: 1px solid var(--clr-blue-primary);
  box-shadow: var(--shadow-7);
}
.paragraph.card1 .wrap-card1 .card1-item.current {
  background-image: -moz-linear-gradient(-60deg, #284bb3 0%, #22387a 100%);
  background-image: -webkit-linear-gradient(-60deg, #284bb3 0%, #22387a 100%);
  background-image: -ms-linear-gradient(-60deg, #284bb3 0%, #22387a 100%);
  position: relative;
}
.paragraph.card1 .wrap-card1 .card1-item.current::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 14.5rem;
  left: 2.7rem;
  background: url("../../img/sub/logo_opacity_2.png") center right no-repeat;
}
.paragraph.card1 .wrap-card1 .card1-item.current .card1-info {
  border-bottom: 1px solid #ffffff70;
}
.paragraph.card1 .wrap-card1 .card1-item.current .card1-info dt {
  color: var(--clr-orange-alt);
}
.paragraph.card1 .wrap-card1 .card1-item.current .card1-info dd {
  color: var(--clr-white);
}
.paragraph.card1 .wrap-card1 .card1-item.current .card1-period {
  color: var(--clr-white);
}
.paragraph.card1 .wrap-card1 .card1-item.current .card1-period.dot::before {
  background-color: var(--clr-orange);
}

@media screen and (min-width: 1506px) {
  .paragraph.card1 .wrap-card1 {
    display: flex;
    gap: 2.8rem;
    flex-wrap: wrap;
    margin-top: 6rem;
    flex-grow: 1;
  }
  .paragraph.card1 .wrap-card1 .card1-item[key="0"], .paragraph.card1 .wrap-card1 .card1-item[key="1"] {
    flex-grow: 0;
  }
}
/* 공사소개 > 일반현황 > 기관연혁 */
/* 연혁 */
.paragraph[key=기관연혁] .wrap-history-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.paragraph[key=기관연혁] .wrap-history-list .history-item {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.paragraph[key=기관연혁] .wrap-history-list .history-item .img {
  width: 100%;
  height: fit-content;
  border: 1px solid var(--clr-gray-light);
  padding: 2rem;
}
.paragraph[key=기관연혁] .wrap-history-list .history-item .img .img-area {
  width: 100%;
  height: auto;
  aspect-ratio: 6/4;
}
.paragraph[key=기관연혁] .wrap-history-list .history-item .img .img-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.paragraph[key=기관연혁] .wrap-history-list .history-item .img .txt {
  margin-top: 2rem;
}
.paragraph[key=기관연혁] .wrap-history-list .history-item .img .txt p {
  text-align: center;
}
.paragraph[key=기관연혁] .wrap-history-list .history-item .content {
  padding-left: 3.5rem;
  width: 100%;
  position: relative;
}
.paragraph[key=기관연혁] .wrap-history-list .history-item .content::before {
  content: "";
  width: 1px;
  height: calc(100% - 35px);
  background-color: var(--clr-gray-light);
  position: absolute;
  top: 35px;
  left: 0.5rem;
}
.paragraph[key=기관연혁] .wrap-history-list .history-item .content h3 {
  font-size: var(--fs-xl);
  position: relative;
}
.paragraph[key=기관연혁] .wrap-history-list .history-item .content h3 .bullet {
  width: 8px;
  height: 8px;
  background-color: var(--clr-blue);
  border-radius: 50%;
  position: absolute;
  top: 6px;
  left: -3.5rem;
  outline: 4px solid var(--clr-gray-light);
}
.paragraph[key=기관연혁] .wrap-history-list .history-item .content .events {
  margin-top: 1rem;
}
.paragraph[key=기관연혁] .wrap-history-list .history-item .content .events dl {
  display: flex;
  gap: 1.5rem;
}

@media screen and (min-width: 840px) {
  .paragraph[key=기관연혁] .wrap-history-list .history-item {
    flex-direction: row;
    gap: 2rem;
  }
}
@media screen and (min-width: 1024px) {
  .paragraph[key=기관연혁] .wrap-history-list .history-item {
    flex-direction: row;
    gap: 4rem;
  }
}
/* 공사소개 > 일반현황 > 조직 및 부서안내 */
/* 조직도 */
.paragraph[key=조직도] .org {
  width: 100%;
  margin: 0 auto;
}
.paragraph[key=조직도] .org .wrap-org {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.paragraph[key=조직도] .org .wrap-org .main-1 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.paragraph[key=조직도] .org .wrap-org .main-1 dl {
  padding: 1.5rem 0;
  text-align: center;
}
.paragraph[key=조직도] .org .wrap-org .main-1 dl dt {
  color: var(--clr-white);
  font-size: var(--fs-2xs);
  font-family: var(--fm-scdream3);
}
.paragraph[key=조직도] .org .wrap-org .main-1 dl dd {
  margin-top: 0.5rem;
  color: var(--clr-white);
  font-size: var(--fs-lg);
  font-family: var(--fm-scdream6);
}
.paragraph[key=조직도] .org .wrap-org .main-1 .main-2 {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.paragraph[key=조직도] .org .wrap-org .main-1 .main-2 .part1 a {
  display: inline-block;
  width: 100%;
}
.paragraph[key=조직도] .org .wrap-org .main-1 .main-2 .part1 a span {
  display: inline-block;
  width: 100%;
  padding: 1.2rem;
  border: 1px solid var(--clr-blue);
  text-align: center;
  font-family: var(--fm-scdream5);
  color: var(--clr-blue);
}
.paragraph[key=조직도] .org .wrap-org .main-1 .main-2 .part2 > span {
  display: inline-block;
  width: 100%;
  padding: 1.2rem;
  background-color: var(--clr-sky);
  text-align: center;
  font-family: var(--fm-scdream5);
  color: var(--clr-white);
}
.paragraph[key=조직도] .org .wrap-org .main-1 .main-2 .part2 > ul {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.paragraph[key=조직도] .org .wrap-org .main-1 .main-2 .part2 > ul li a {
  display: inline-block;
  width: 100%;
}
.paragraph[key=조직도] .org .wrap-org .main-1 .main-2 .part2 > ul li a span {
  display: inline-block;
  width: 100%;
  padding: 1.2rem;
  text-align: center;
  background-color: var(--clr-white-dark);
  border: 4px solid var(--clr-gray-light);
}
.paragraph[key=조직도] .org .wrap-org .main-3-left ul {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.paragraph[key=조직도] .org .wrap-org .main-3-left ul li a {
  display: inline-block;
  width: 100%;
}
.paragraph[key=조직도] .org .wrap-org .main-3-left ul li a span {
  display: inline-block;
  width: 100%;
  padding: 1.5rem;
  text-align: center;
  font-family: var(--fm-scdream5);
  color: var(--clr-white);
}
.paragraph[key=조직도] .org .wrap-org .main-3-right ul {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.paragraph[key=조직도] .org .wrap-org .main-3-right ul li a {
  display: inline-block;
  width: 100%;
}
.paragraph[key=조직도] .org .wrap-org .main-3-right ul li a span {
  display: inline-block;
  width: 100%;
  padding: 1.5rem;
  text-align: center;
  font-family: var(--fm-scdream5);
  color: var(--clr-white);
}
.paragraph[key=조직도] .org .wrap-org .main-3-right ul li .part1 {
  margin-top: 0.5rem;
}
.paragraph[key=조직도] .org .wrap-org .main-3-right ul li .part1 a {
  display: inline-block;
  width: 100%;
}
.paragraph[key=조직도] .org .wrap-org .main-3-right ul li .part1 a span {
  display: inline-block;
  width: 100%;
  padding: 1.2rem;
  border: 4px solid var(--clr-gray-light);
  background-color: rgba(255, 255, 255, 0.7);
  text-align: center;
  font-family: var(--fm-scdream5);
  color: var(--clr-blue-secondary);
}

@media screen and (min-width: 840px) {
  .paragraph[key=조직도] .org .wrap-org {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 2rem;
  }
  .paragraph[key=조직도] .org .wrap-org .main-1 {
    grid-column: 2/3;
    grid-row: 1;
  }
  .paragraph[key=조직도] .org .wrap-org .main-3-left {
    grid-column: 1/2;
    grid-row: 1;
    margin-top: 5rem;
  }
  .paragraph[key=조직도] .org .wrap-org .main-3-right {
    grid-column: 3/4;
    grid-row: 1;
    margin-top: 5rem;
  }
}
@media screen and (min-width: 1146px) {
  .paragraph[key=조직도] .org .wrap-org {
    max-width: 1020px;
    margin: 0 auto;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    gap: 2rem;
    position: relative;
  }
  .paragraph[key=조직도] .org .wrap-org .main-1 {
    grid-column: 2/5;
    grid-row: 1;
    align-items: center;
  }
  .paragraph[key=조직도] .org .wrap-org .main-1 dl {
    width: 26rem;
    height: 26rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }
  .paragraph[key=조직도] .org .wrap-org .main-1 dl dt {
    color: var(--clr-white);
    font-size: var(--fs-2xs);
    font-family: var(--fm-scdream3);
  }
  .paragraph[key=조직도] .org .wrap-org .main-1 dl dd {
    margin-top: 0.5rem;
    color: var(--clr-white);
    font-size: var(--fs-lg);
    font-family: var(--fm-scdream6);
  }
  .paragraph[key=조직도] .org .wrap-org .main-1 dl::before {
    content: "";
    width: 1px;
    height: 16rem;
    background-color: var(--clr-gray-light);
    position: absolute;
    top: 26rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .paragraph[key=조직도] .org .wrap-org .main-1 dl::after {
    content: "";
    width: 54.5%;
    height: 1px;
    background-color: var(--clr-gray-light);
    position: absolute;
    top: 42rem;
    left: 47%;
    transform: translateX(-50%);
  }
  .paragraph[key=조직도] .org .wrap-org .main-1 .main-2 {
    margin-top: 5rem;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 6rem);
    gap: 1rem;
    transform: translateX(-24rem);
  }
  .paragraph[key=조직도] .org .wrap-org .main-1 .main-2 .part1 {
    grid-column: 1/2;
    grid-row: 1/2;
    position: relative;
    width: 50%;
    transform: translateX(20.2rem);
  }
  .paragraph[key=조직도] .org .wrap-org .main-1 .main-2 .part1 span {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
  .paragraph[key=조직도] .org .wrap-org .main-1 .main-2 .part1::before {
    content: "";
    width: 11rem;
    height: 1px;
    background-color: var(--clr-gray-light);
    position: absolute;
    top: 50%;
    right: -11rem;
    transform: translateY(-50%);
  }
  .paragraph[key=조직도] .org .wrap-org .main-1 .main-2 .part1::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-image: -moz-linear-gradient(-45deg, #f2b242 0%, #e19229 100%);
    background-image: -webkit-linear-gradient(-45deg, #f2b242 0%, #e19229 100%);
    background-image: -ms-linear-gradient(-45deg, #f2b242 0%, #e19229 100%);
    position: absolute;
    top: 50%;
    right: -11.2rem;
    transform: translateY(-50%);
  }
  .paragraph[key=조직도] .org .wrap-org .main-1 .main-2 .part2 {
    position: relative;
  }
  .paragraph[key=조직도] .org .wrap-org .main-1 .main-2 .part2 > span {
    display: inline-block;
    width: 100%;
    padding: 2rem 0;
  }
  .paragraph[key=조직도] .org .wrap-org .main-1 .main-2 .part2 > ul {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
  }
  .paragraph[key=조직도] .org .wrap-org .main-1 .main-2 .part2 > ul li span {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
  }
  .paragraph[key=조직도] .org .wrap-org .main-1 .main-2 .part2::before {
    content: "";
    width: 1px;
    height: 5rem;
    background-color: var(--clr-gray-light);
    position: absolute;
    top: -5rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .paragraph[key=조직도] .org .wrap-org .main-1 .main-2 > li:nth-of-type(2) {
    grid-column: 1/2;
    grid-row: 3/5;
  }
  .paragraph[key=조직도] .org .wrap-org .main-1 .main-2 > li:nth-of-type(2)::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-image: -moz-linear-gradient(-45deg, #f2b242 0%, #e19229 100%);
    background-image: -webkit-linear-gradient(-45deg, #f2b242 0%, #e19229 100%);
    background-image: -ms-linear-gradient(-45deg, #f2b242 0%, #e19229 100%);
    position: absolute;
    top: -5.4rem;
    right: -8.2rem;
  }
  .paragraph[key=조직도] .org .wrap-org .main-1 .main-2 > li:nth-of-type(3) {
    grid-column: 3/4;
    grid-row: 3/5;
  }
  .paragraph[key=조직도] .org .wrap-org .main-3-left {
    grid-column: 1/2;
    grid-row: 1;
    margin-top: 10rem;
  }
  .paragraph[key=조직도] .org .wrap-org .main-3-left > ul li span {
    padding: 2.5rem 0;
  }
  .paragraph[key=조직도] .org .wrap-org .main-3-right {
    grid-column: 5/6;
    grid-row: 1;
    margin-top: 10rem;
  }
  .paragraph[key=조직도] .org .wrap-org .main-3-right > ul li span {
    padding: 2.5rem 0;
  }
  .paragraph[key=조직도] .org .wrap-org .main-3-right > ul li .part1 span {
    padding: 1.6rem 0;
  }
}
/* 부서별 직원안내 */
/* 공사소개 > 일반현황 > 찾아오시는길 */
.paragraph[key=찾아오시는길] .contact-us {
  border: 1px solid var(--clr-gray-light);
  border-radius: 1rem;
  overflow: hidden;
}
.paragraph[key=찾아오시는길] .contact-us .map-area {
  height: 532px;
  overflow: hidden;
}
.paragraph[key=찾아오시는길] .contact-us .map-area .map {
  width: 100%;
  height: 100%;
}
.paragraph[key=찾아오시는길] .contact-us .info {
  border-top: 1px solid var(--clr-gray-light);
  padding: 3.6rem 4rem;
}
.paragraph[key=찾아오시는길] .contact-us .info .left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 4rem;
}
.paragraph[key=찾아오시는길] .contact-us .info .left dl {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.paragraph[key=찾아오시는길] .contact-us .info .left dl dt {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.paragraph[key=찾아오시는길] .contact-us .info .left dl dt div {
  width: 3rem;
  height: 3rem;
}
.paragraph[key=찾아오시는길] .contact-us .info .left dl dt div.address {
  background: url("../../img/icon/icon-location-blue.png") center center no-repeat;
  background-size: 3rem;
}
.paragraph[key=찾아오시는길] .contact-us .info .left dl dt div.phone {
  background: url("../../img/icon/icon-tel-blue.png") center center no-repeat;
  background-size: 3rem;
}
.paragraph[key=찾아오시는길] .contact-us .info .left dl dt div.fax {
  background: url("../../img/icon/icon-fax-blue.png") center center no-repeat;
  background-size: 3rem;
}
.paragraph[key=찾아오시는길] .contact-us .info .left dl:first-of-type {
  gap: 1.2rem;
}
.paragraph[key=찾아오시는길] .contact-us .btn {
  max-width: 260px;
  margin-inline: auto;
}

@media screen and (min-width: 768px) {
  .paragraph[key=찾아오시는길] .contact-us .info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  .paragraph[key=찾아오시는길] .contact-us .info .left {
    margin-bottom: 0;
  }
  .paragraph[key=찾아오시는길] .contact-us .btn {
    margin-inline: unset;
  }
}
@media screen and (min-width: 1200px) {
  .paragraph[key=찾아오시는길] .contact-us .info {
    align-items: center;
  }
  .paragraph[key=찾아오시는길] .contact-us .info .left {
    flex-direction: row;
  }
}

/* ESG 경영 > ESG 경영 > ESG 경영현황 */
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org {
  width: 100%;
  position: relative;
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org span.title {
  font-family: var(--fm-scdream5);
  font-size: var(--fs-lg);
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org span.desc {
  font-size: var(--fs-xs);
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 {
  width: 100%;
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .level-1 {
  display: grid;
  place-items: center;
  gap: 0.5rem;
  padding: 2rem 0;
  background-color: var(--clr-blue-primary);
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .level-1 span {
  color: var(--clr-white);
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 {
  width: 100%;
  margin-top: 1rem;
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 > li {
  width: 100%;
  display: flex;
  justify-content: center;
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 > li .level-2 {
  flex-grow: 1;
  padding: 1rem 0;
  display: grid;
  place-items: center;
  gap: 0.5rem;
  border: 8px solid var(--clr-white-alt);
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 > li .level-2 span {
  color: var(--clr-white);
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 {
  display: flex;
  gap: 0.5rem;
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .level-title {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .level-title.E {
  background-color: var(--clr-green);
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .level-title.S {
  background-color: var(--clr-sky-dark);
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .level-title.G {
  background-color: var(--clr-blue);
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .level-title span {
  color: var(--clr-white);
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .level-title span.title {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 2px solid var(--clr-white);
  border-radius: 50%;
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .level-title span.title span {
  line-height: 1;
  margin-top: 0.2rem;
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .level-title span.desc {
  line-height: 1;
  writing-mode: tb-rl;
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .sub-org {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .sub-org li {
  margin-bottom: 0;
  margin-left: 2rem;
  line-height: 1.6;
}
.paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .sub-org li span {
  color: var(--clr-gray);
}
.paragraph[key=ESG경영현황] .wrap-esg_env {
  width: 100%;
}
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-ex,
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in {
  width: 100%;
}
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-ex .title,
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in .title {
  display: grid;
  place-items: center;
  padding: 2rem 0;
  background-color: var(--clr-white-off);
  border-radius: 1rem;
}
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-ex .title span,
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in .title span {
  font-size: var(--fs-lg);
}
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-ex dl,
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in dl {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-ex dl dt,
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in dl dt {
  width: 100%;
  padding: 1.5rem 0;
  border-radius: 1rem;
  display: grid;
  place-items: center;
}
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-ex dl dt span,
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in dl dt span {
  color: var(--clr-white);
  font-size: var(--fs-md-17);
}
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-ex dl dd,
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in dl dd {
  padding: 1.5rem 2rem;
  background-color: var(--clr-white-dark);
  border-radius: 1rem;
}
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-ex dl dd p,
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in dl dd p {
  margin-bottom: 0;
  line-height: 1.6;
}
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-ex {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-ex dl dt {
  background-color: var(--clr-blue-primary);
}
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in dl:nth-of-type(1) dt, .paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in dl:nth-of-type(2) dt {
  background-color: var(--clr-blue);
}
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in dl:nth-of-type(3) dt, .paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in dl:nth-of-type(4) dt {
  background-color: var(--clr-sky-dark);
}
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in dl:nth-of-type(5) dt, .paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in dl:nth-of-type(6) dt {
  background-color: var(--clr-green);
}

@media screen and (min-width: 1024px) {
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org {
    width: 100%;
    position: relative;
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org span.title {
    font-size: var(--fs-xl);
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org span.desc {
    font-size: var(--fs-sm);
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .level-1 {
    width: 48rem;
    border-radius: 5rem;
    gap: 1rem;
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .level-1::before {
    content: "";
    width: 1px;
    height: 30rem;
    background-color: var(--clr-gray-light);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 {
    margin-top: 4.8rem;
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2::before {
    content: "";
    width: 59rem;
    height: 1px;
    background-color: var(--clr-gray-light);
    position: absolute;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 > li {
    align-items: center;
    position: relative;
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 > li::before {
    content: "";
    width: 1px;
    height: 3rem;
    background-color: var(--clr-gray-light);
    position: absolute;
    top: calc(100% + 1.5rem);
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 > li .level-2 {
    flex-grow: 0;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    place-items: unset;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 > li .level-2 span {
    color: var(--clr-white);
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 {
    flex-direction: row;
    justify-content: center;
    gap: 4rem;
    margin-top: 7.4rem;
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 {
    width: min(25.5rem, 100%);
    flex-grow: 0;
    flex-direction: column;
    gap: 1.2rem;
    position: relative;
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3::before {
    content: "";
    width: 1px;
    height: 5rem;
    background-color: var(--clr-gray-light);
    position: absolute;
    top: -5rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .level-title {
    position: relative;
    padding: 3rem 0 2.5rem;
    border-radius: 0.5rem;
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .level-title.E {
    background-color: var(--clr-green);
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .level-title.E .title {
    background-color: var(--clr-green);
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .level-title.S {
    background-color: var(--clr-sky-dark);
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .level-title.S .title {
    background-color: var(--clr-sky-dark);
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .level-title.G {
    background-color: var(--clr-blue);
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .level-title.G .title {
    background-color: var(--clr-blue);
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .level-title span {
    color: var(--clr-white);
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .level-title span.title {
    width: 4rem;
    height: 4rem;
    border: 3px solid var(--clr-white);
    position: absolute;
    top: -2.5rem;
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .level-title span.desc {
    line-height: 1;
    writing-mode: horizontal-tb;
    font-size: var(--fs-md-18);
  }
  .paragraph[key=ESG경영현황] .esg_org .wrap-esg_org .wrap-level-1 .wrap-level-2 .wrap-level-3 .level-3 .sub-org {
    border-radius: 0.5rem;
    padding: 2rem 0;
  }
  .paragraph[key=ESG경영현황] .wrap-esg_env {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 8rem repeat(3, 1fr);
    gap: 1.5rem;
  }
  .paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-ex dl,
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in dl {
    gap: 1.5rem;
  }
  .paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-ex dl dd,
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in dl dd {
    flex-grow: 1;
    display: grid;
    place-content: center;
  }
  .paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-ex dl dd p,
.paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in dl dd p {
    width: 26rem;
  }
  .paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-ex {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    grid-column: 1/2;
    margin-bottom: 0;
  }
  .paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-ex .title {
    grid-row: 1/2;
    height: auto;
  }
  .paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-ex dl:nth-of-type(1) {
    grid-row: 3/4;
  }
  .paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-ex dl:nth-of-type(2) {
    grid-row: 4/5;
  }
  .paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in {
    display: grid;
    grid-template-rows: 8rem repeat(3, 1fr);
    grid-template-columns: repeat(4, 1fr);
    grid-row: span 4;
    grid-column: 2/4;
    margin-bottom: 0;
  }
  .paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in .title {
    grid-row: 1/2;
    grid-column: 1/5;
  }
  .paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in dl:nth-of-type(2n-1) {
    grid-column: 1/3;
  }
  .paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in dl:nth-of-type(2n) {
    grid-column: 3/5;
  }
  .paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in dl:nth-of-type(3) dt, .paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in dl:nth-of-type(4) dt {
    background-color: var(--clr-sky-dark);
  }
  .paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in dl:nth-of-type(5) dt, .paragraph[key=ESG경영현황] .wrap-esg_env .esg_env-in dl:nth-of-type(6) dt {
    background-color: var(--clr-green);
  }
}

/* ESG 경영 > ESG 경영 > ESG 추진전략 및 과제 */
.paragraph[key=ESG추진전략] .prg-h5 {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.paragraph[key=ESG추진전략] .vision,
.paragraph[key=ESG추진전략] .slogan,
.paragraph[key=ESG추진전략] .goal {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.paragraph[key=ESG추진전략] .vision dt span,
.paragraph[key=ESG추진전략] .slogan dt span,
.paragraph[key=ESG추진전략] .goal dt span {
  display: block;
  color: var(--clr-white);
  font-family: var(--fm-cairo);
  padding: 0.9rem 1.1rem;
  border-radius: 1rem;
}
.paragraph[key=ESG추진전략] .vision dd span,
.paragraph[key=ESG추진전략] .slogan dd span,
.paragraph[key=ESG추진전략] .goal dd span {
  font-size: var(--fs-md-18);
}
.paragraph[key=ESG추진전략] .vision dd span strong,
.paragraph[key=ESG추진전략] .slogan dd span strong,
.paragraph[key=ESG추진전략] .goal dd span strong {
  font-size: var(--fs-md-18);
}
.paragraph[key=ESG추진전략] .vision {
  height: 11.2rem;
  border: 1px solid var(--clr-gray-light);
  border-radius: 1rem;
}
.paragraph[key=ESG추진전략] .vision dt span {
  background-color: var(--clr-blue-alt);
}
.paragraph[key=ESG추진전략] .vision dd {
  text-align: center;
}
.paragraph[key=ESG추진전략] .vision dd span {
  color: var(--clr-blue-alt);
}
.paragraph[key=ESG추진전략] .vision dd span strong {
  color: var(--clr-blue-alt);
}
.paragraph[key=ESG추진전략] .slogan {
  height: 11.2rem;
  border: 1px solid var(--clr-gray-light);
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}
.paragraph[key=ESG추진전략] .slogan dt span {
  background-color: var(--clr-blue-secondary);
}
.paragraph[key=ESG추진전략] .slogan dd span {
  color: var(--clr-blue-secondary);
}
.paragraph[key=ESG추진전략] .slogan dd span strong {
  color: var(--clr-blue-secondary);
}
.paragraph[key=ESG추진전략] .slogan::before {
  content: "";
  width: 10rem;
  height: 100%;
  background: url("../../img/sub/bg-esg-01.png") center center no-repeat;
  background-size: 10rem;
  position: absolute;
  top: 35px;
  left: 0;
}
.paragraph[key=ESG추진전략] .slogan::after {
  content: "";
  width: 10rem;
  height: 100%;
  background: url("../../img/sub/bg-esg-02.png") center center no-repeat;
  background-size: 10rem;
  position: absolute;
  top: 20px;
  right: -26px;
}
.paragraph[key=ESG추진전략] .goal {
  width: 100%;
}
.paragraph[key=ESG추진전략] .goal dt span {
  color: var(--clr-sky-dark);
  font-family: var(--fm-scdream6);
  font-size: var(--fs-md-18);
  padding: 0 !important;
}
.paragraph[key=ESG추진전략] .goal dd {
  width: 100%;
}
.paragraph[key=ESG추진전략] .goal dd ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.paragraph[key=ESG추진전략] .goal dd ul li {
  background-color: var(--clr-white-dark);
  display: grid;
  place-items: center;
  padding: 1.5rem 0;
  border-radius: 1rem;
  position: relative;
}
.paragraph[key=ESG추진전략] .goal dd ul li span {
  font-family: var(--fm-scdream5);
  font-size: var(--fs-sm);
}
.paragraph[key=ESG추진전략] .goal dd ul li:not(:last-of-type)::before {
  content: "";
  width: 2rem;
  height: 2rem;
  background: url("../../img/icon/icon-plus-multi.png") center center no-repeat;
  background-size: contain;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.paragraph[key=ESG추진전략] .direction,
.paragraph[key=ESG추진전략] .todo-strategy,
.paragraph[key=ESG추진전략] .todo-action,
.paragraph[key=ESG추진전략] .result {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  width: 100%;
}
.paragraph[key=ESG추진전략] .direction div,
.paragraph[key=ESG추진전략] .todo-strategy div,
.paragraph[key=ESG추진전략] .todo-action div,
.paragraph[key=ESG추진전략] .result div {
  width: 22rem;
  height: 6rem;
  display: grid;
  place-items: center;
  border-radius: 5rem;
}
.paragraph[key=ESG추진전략] .direction div span,
.paragraph[key=ESG추진전략] .todo-strategy div span,
.paragraph[key=ESG추진전략] .todo-action div span,
.paragraph[key=ESG추진전략] .result div span {
  color: var(--clr-white);
  font-family: var(--fm-scdream6);
  font-size: var(--fs-md-18);
}
.paragraph[key=ESG추진전략] .direction div.wrap-items,
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items,
.paragraph[key=ESG추진전략] .result div.wrap-items {
  width: 100%;
  height: fit-content;
}
.paragraph[key=ESG추진전략] .direction div.wrap-items > ul,
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  flex-grow: 1;
  border-radius: 0.5rem;
}
.paragraph[key=ESG추진전략] .direction div.wrap-items > ul > li span,
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul > li span,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul > li span,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul > li span {
  color: var(--clr-gray);
}
.paragraph[key=ESG추진전략] .direction div.wrap-items > ul .num-1,
.paragraph[key=ESG추진전략] .direction div.wrap-items > ul .num-2,
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul .num-1,
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul .num-2,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul .num-1,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul .num-2,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul .num-1,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul .num-2 {
  color: var(--clr-white);
}
.paragraph[key=ESG추진전략] .direction div.wrap-items > ul:nth-of-type(1) .num-1,
.paragraph[key=ESG추진전략] .direction div.wrap-items > ul:nth-of-type(1) .num-2,
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul:nth-of-type(1) .num-1,
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul:nth-of-type(1) .num-2,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul:nth-of-type(1) .num-1,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul:nth-of-type(1) .num-2,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul:nth-of-type(1) .num-1,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul:nth-of-type(1) .num-2 {
  background-color: var(--clr-green);
}
.paragraph[key=ESG추진전략] .direction div.wrap-items > ul:nth-of-type(2) .num-1,
.paragraph[key=ESG추진전략] .direction div.wrap-items > ul:nth-of-type(2) .num-2,
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul:nth-of-type(2) .num-1,
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul:nth-of-type(2) .num-2,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul:nth-of-type(2) .num-1,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul:nth-of-type(2) .num-2,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul:nth-of-type(2) .num-1,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul:nth-of-type(2) .num-2 {
  background-color: var(--clr-sky-dark);
}
.paragraph[key=ESG추진전략] .direction div.wrap-items > ul:nth-of-type(3) .num-1,
.paragraph[key=ESG추진전략] .direction div.wrap-items > ul:nth-of-type(3) .num-2,
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul:nth-of-type(3) .num-1,
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul:nth-of-type(3) .num-2,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul:nth-of-type(3) .num-1,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul:nth-of-type(3) .num-2,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul:nth-of-type(3) .num-1,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul:nth-of-type(3) .num-2 {
  background-color: var(--clr-blue);
}
.paragraph[key=ESG추진전략] .direction div.wrap-items ul li {
  position: relative;
  padding: 2rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-radius: 1rem;
}
.paragraph[key=ESG추진전략] .direction div.wrap-items ul li:nth-of-type(1) {
  background-color: var(--clr-green);
}
.paragraph[key=ESG추진전략] .direction div.wrap-items ul li:nth-of-type(2) {
  background-color: var(--clr-sky-dark);
}
.paragraph[key=ESG추진전략] .direction div.wrap-items ul li:nth-of-type(3) {
  background-color: var(--clr-blue);
}
.paragraph[key=ESG추진전략] .direction div.wrap-items ul li .title {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--clr-white);
}
.paragraph[key=ESG추진전략] .direction div.wrap-items ul li span {
  color: var(--clr-white);
}
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items,
.paragraph[key=ESG추진전략] .result div.wrap-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul {
  background-color: var(--clr-ivory);
  padding: 2.4rem;
}
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul > li,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul > li,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul > li {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
}
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul > li:not(:last-of-type),
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul > li:not(:last-of-type),
.paragraph[key=ESG추진전략] .result div.wrap-items > ul > li:not(:last-of-type) {
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--clr-gray-light);
}
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul > li .num-1,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul > li .num-1,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul > li .num-1 {
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  text-align: center;
  font-size: var(--fs-3xs);
  line-height: 2;
}
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul > li span,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul > li span,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul > li span {
  width: calc(100% - 2rem);
  font-family: var(--fm-scdream4);
  font-size: var(--fs-sm);
}
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul > li > ul,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul > li > ul,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul > li > ul {
  width: calc(100% - 2rem);
}
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul > li > ul .dot,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul > li > ul .dot,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul > li > ul .dot {
  margin-bottom: 0;
}
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul > li > ul .dot::before,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul > li > ul .dot::before,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul > li > ul .dot::before {
  top: 6px;
  left: 3px;
}
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul > li > .type-2,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul > li > .type-2,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul > li > .type-2 {
  width: 100%;
}
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul > li > .type-2 li,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul > li > .type-2 li,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul > li > .type-2 li {
  display: flex;
  gap: 0.5rem;
}
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul > li > .type-2 li .num-2,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul > li > .type-2 li .num-2,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul > li > .type-2 li .num-2 {
  display: block;
  width: 3.5rem;
  height: 2rem;
  border-radius: 5rem;
  text-align: center;
  font-size: var(--fs-3xs);
  line-height: 2;
}
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul > li > .type-2 li span,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul > li > .type-2 li span,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul > li > .type-2 li span {
  width: calc(100% - 3.5rem);
}
.paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul > li > .type-2 li:not(:last-of-type),
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul > li > .type-2 li:not(:last-of-type),
.paragraph[key=ESG추진전략] .result div.wrap-items > ul > li > .type-2 li:not(:last-of-type) {
  margin-bottom: 0.5rem;
}
.paragraph[key=ESG추진전략] .system,
.paragraph[key=ESG추진전략] .roadmap {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.paragraph[key=ESG추진전략] .system div:nth-of-type(1),
.paragraph[key=ESG추진전략] .roadmap div:nth-of-type(1) {
  width: 100%;
  height: 6rem;
  display: grid;
  place-items: center;
  background-color: var(--clr-white-dark);
  border-radius: 1rem;
}
.paragraph[key=ESG추진전략] .system div:nth-of-type(1) span,
.paragraph[key=ESG추진전략] .roadmap div:nth-of-type(1) span {
  font-family: var(--fm-scdream6);
  font-size: var(--fs-md-18);
}
.paragraph[key=ESG추진전략] .system div:nth-of-type(2),
.paragraph[key=ESG추진전략] .roadmap div:nth-of-type(2) {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.paragraph[key=ESG추진전략] .system div:nth-of-type(2) dl,
.paragraph[key=ESG추진전략] .roadmap div:nth-of-type(2) dl {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.paragraph[key=ESG추진전략] .system div:nth-of-type(2) dl dt,
.paragraph[key=ESG추진전략] .roadmap div:nth-of-type(2) dl dt {
  height: 4.5rem;
  display: grid;
  place-items: center;
  border-radius: 1rem;
}
.paragraph[key=ESG추진전략] .system div:nth-of-type(2) dl dt span,
.paragraph[key=ESG추진전략] .roadmap div:nth-of-type(2) dl dt span {
  color: var(--clr-white);
  font-family: var(--fm-scdream5);
}
.paragraph[key=ESG추진전략] .system div:nth-of-type(2) dl dd,
.paragraph[key=ESG추진전략] .roadmap div:nth-of-type(2) dl dd {
  background: var(--clr-blue-light-pale);
  border-radius: 1rem;
}
.paragraph[key=ESG추진전략] .system div:nth-of-type(2) dl dd ul,
.paragraph[key=ESG추진전략] .roadmap div:nth-of-type(2) dl dd ul {
  padding: 2.4rem;
}
.paragraph[key=ESG추진전략] .system div:nth-of-type(2) dl dd ul li:not(:last-of-type),
.paragraph[key=ESG추진전략] .roadmap div:nth-of-type(2) dl dd ul li:not(:last-of-type) {
  margin-bottom: 0.5rem;
}
.paragraph[key=ESG추진전략] .system div:nth-of-type(2) dl dd ul li.dot,
.paragraph[key=ESG추진전략] .roadmap div:nth-of-type(2) dl dd ul li.dot {
  margin-bottom: 0;
}
.paragraph[key=ESG추진전략] .system div:nth-of-type(1) span {
  color: var(--clr-blue-alt);
}
.paragraph[key=ESG추진전략] .system div:nth-of-type(2) dl dt {
  background-color: var(--clr-blue-alt);
}
.paragraph[key=ESG추진전략] .roadmap div:nth-of-type(1) span {
  color: var(--clr-blue-secondary);
}
.paragraph[key=ESG추진전략] .roadmap div:nth-of-type(2) dl dt {
  background-color: var(--clr-blue-secondary);
}

@media screen and (min-width: 768px) {
  .paragraph[key=ESG추진전략] .vision,
.paragraph[key=ESG추진전략] .slogan {
    flex-direction: row;
  }
  .paragraph[key=ESG추진전략] .vision dd span,
.paragraph[key=ESG추진전략] .slogan dd span {
    font-size: var(--fs-xl);
  }
  .paragraph[key=ESG추진전략] .vision dd span strong,
.paragraph[key=ESG추진전략] .slogan dd span strong {
    font-size: var(--fs-xl);
  }
  .paragraph[key=ESG추진전략] .vision::before, .paragraph[key=ESG추진전략] .vision::after,
.paragraph[key=ESG추진전략] .slogan::before,
.paragraph[key=ESG추진전략] .slogan::after {
    width: 15rem;
    background-size: 15rem;
  }
  .paragraph[key=ESG추진전략] .goal dt span {
    font-size: var(--fs-xl);
  }
  .paragraph[key=ESG추진전략] .goal dd ul li:not(:last-of-type)::before {
    width: 3rem;
    height: 3rem;
    top: 82%;
  }
  .paragraph[key=ESG추진전략] .direction div.wrap-items > ul {
    flex-direction: row;
  }
  .paragraph[key=ESG추진전략] .direction div.wrap-items > ul li {
    flex-grow: 1;
  }
  .paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul > li .num-1,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul > li .num-1,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul > li .num-1 {
    line-height: 1.7;
  }
  .paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul > li > .type-2 li .num-2,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul > li > .type-2 li .num-2,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul > li > .type-2 li .num-2 {
    line-height: 1.7;
  }
}
@media screen and (min-width: 1024px) {
  .paragraph[key=ESG추진전략] .prg-h5 {
    gap: 4.5rem;
  }
  .paragraph[key=ESG추진전략] .direction {
    gap: 7.4rem;
    position: relative;
  }
  .paragraph[key=ESG추진전략] .direction div:nth-of-type(1)::before {
    content: "";
    width: 0;
    height: 8rem;
    border: 1px dashed var(--clr-gray-light);
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
  }
  .paragraph[key=ESG추진전략] .direction div.wrap-items {
    position: relative;
  }
  .paragraph[key=ESG추진전략] .direction div.wrap-items::before {
    content: "";
    width: 68%;
    height: 0;
    border: 1px dashed var(--clr-gray-light);
    position: absolute;
    top: -60%;
    left: 50%;
    transform: translateX(-50%);
  }
  .paragraph[key=ESG추진전략] .direction div.wrap-items ul li {
    width: min(420px, 33%);
    position: relative;
  }
  .paragraph[key=ESG추진전략] .direction div.wrap-items ul li .title {
    position: absolute;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .paragraph[key=ESG추진전략] .direction div.wrap-items ul li:nth-of-type(1) .title {
    background-color: var(--clr-green);
  }
  .paragraph[key=ESG추진전략] .direction div.wrap-items ul li:nth-of-type(1) .title::before {
    content: "";
    width: 0;
    height: 2rem;
    border: 1px dashed var(--clr-gray-light);
    position: absolute;
    top: -2.2rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .paragraph[key=ESG추진전략] .direction div.wrap-items ul li:nth-of-type(2) .title {
    background-color: var(--clr-sky-dark);
  }
  .paragraph[key=ESG추진전략] .direction div.wrap-items ul li:nth-of-type(3) .title {
    background-color: var(--clr-blue);
  }
  .paragraph[key=ESG추진전략] .direction div.wrap-items ul li:nth-of-type(3) .title::before {
    content: "";
    width: 0;
    height: 2rem;
    border: 1px dashed var(--clr-gray-light);
    position: absolute;
    top: -2.2rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .paragraph[key=ESG추진전략] .todo-strategy,
.paragraph[key=ESG추진전략] .todo-action,
.paragraph[key=ESG추진전략] .result {
    gap: 2.8rem;
  }
  .paragraph[key=ESG추진전략] .todo-strategy div.wrap-items,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items,
.paragraph[key=ESG추진전략] .result div.wrap-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
  }
  .paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul {
    height: 100%;
    position: relative;
  }
  .paragraph[key=ESG추진전략] .todo-strategy div.wrap-items > ul::before,
.paragraph[key=ESG추진전략] .todo-action div.wrap-items > ul::before,
.paragraph[key=ESG추진전략] .result div.wrap-items > ul::before {
    content: "";
    width: 0;
    height: 14rem;
    border: 1px dashed var(--clr-gray-light);
    position: absolute;
    top: -14rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }
  .paragraph[key=ESG추진전략] .system div:nth-of-type(2),
.paragraph[key=ESG추진전략] .roadmap div:nth-of-type(2) {
    flex-direction: row;
  }
  .paragraph[key=ESG추진전략] .system div:nth-of-type(2) dl,
.paragraph[key=ESG추진전략] .roadmap div:nth-of-type(2) dl {
    flex-grow: 1;
  }
  .paragraph[key=ESG추진전략] .system div:nth-of-type(2) dl dd ul,
.paragraph[key=ESG추진전략] .roadmap div:nth-of-type(2) dl dd ul {
    display: grid;
    place-items: center;
  }
  .paragraph[key=ESG추진전략] .system div:nth-of-type(2) dl dd ul li,
.paragraph[key=ESG추진전략] .roadmap div:nth-of-type(2) dl dd ul li {
    min-width: 21rem;
  }
}
@media screen and (min-width: 1200px) {
  .paragraph[key=ESG추진전략] .goal dd ul {
    flex-direction: row;
  }
  .paragraph[key=ESG추진전략] .goal dd ul li {
    width: 16%;
    padding: 1.5rem;
    text-align: center;
  }
  .paragraph[key=ESG추진전략] .goal dd ul li:not(:last-of-type)::before {
    top: 50%;
    left: unset;
    right: -1.5rem;
    transform: translateY(-50%);
  }
}

/* ESG 경영 > ESG 경영 > ESG경영 보고서 */
/* UPA 교육신문 */
.report .wrap-report {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.report .wrap-report .report-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.report .wrap-report .report-item .img {
  width: 20rem;
  height: 25.8rem;
  box-shadow: var(--shadow-7);
}
.report .wrap-report .report-item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.report .wrap-report .report-item .info .title {
  font-size: var(--fs-md-18);
}
.report .wrap-report .report-item .info .title span {
  font-size: var(--fs-md-18);
}
.report .wrap-report .report-item .wrap-btn {
  margin-top: 1rem;
}

@media screen and (min-width: 640px) {
  .report .wrap-report {
    display: flex;
    flex-direction: row;
    gap: 4rem;
  }
  .report .wrap-report .report-item {
    width: calc(50% - 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  .report .wrap-report .report-item .wrap-btn {
    margin-top: 1rem;
  }
}
@media screen and (min-width: 1200px) {
  .report .wrap-report {
    display: flex;
    flex-direction: row;
    gap: 4rem;
  }
  .report .wrap-report .report-item {
    width: calc(50% - 2rem);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6rem;
  }
  .report .wrap-report .report-item .info {
    width: min(30rem, 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .report .wrap-report .report-item .info .title {
    width: min(20rem, 100%);
    font-size: var(--fs-xl-24);
    margin-bottom: 4rem;
  }
  .report .wrap-report .report-item .info .title span {
    font-size: var(--fs-xl-24);
  }
  .report .wrap-report .report-item .info .wrap-btn {
    margin-top: 1rem;
  }
}
/* ESG 경영 > 지속가능한 친환경 항만 > 탄소중립 실천 */
/* 온실가스 배출권 */
/* 신재생에너지 자립 항만 구축 */
.paragraph[key=온실가스배출권] .text .dot,
.paragraph[key=신재생에너지] .text .dot {
  margin-bottom: 0;
}
.paragraph[key=온실가스배출권] .text .note,
.paragraph[key=신재생에너지] .text .note {
  color: var(--clr-gray);
}
.paragraph[key=온실가스배출권] .text .note span,
.paragraph[key=신재생에너지] .text .note span {
  color: var(--clr-black);
  font-family: var(--fm-scdream5);
}
.paragraph[key=온실가스배출권] .tbl-basic.schedule tbody th, .paragraph[key=온실가스배출권] .tbl-basic.schedule tbody td,
.paragraph[key=신재생에너지] .tbl-basic.schedule tbody th,
.paragraph[key=신재생에너지] .tbl-basic.schedule tbody td {
  padding: 0;
}
.paragraph[key=온실가스배출권] .tbl-basic.schedule tbody tr:last-of-type th .bx, .paragraph[key=온실가스배출권] .tbl-basic.schedule tbody tr:last-of-type td .bx,
.paragraph[key=신재생에너지] .tbl-basic.schedule tbody tr:last-of-type th .bx,
.paragraph[key=신재생에너지] .tbl-basic.schedule tbody tr:last-of-type td .bx {
  color: var(--clr-black);
}
.paragraph[key=온실가스배출권] .tbl-basic.schedule tbody .bx,
.paragraph[key=신재생에너지] .tbl-basic.schedule tbody .bx {
  padding: 2.1rem 1rem 1.9rem 1rem;
  color: var(--clr-white);
}
.paragraph[key=온실가스배출권] .tbl-basic ul li,
.paragraph[key=신재생에너지] .tbl-basic ul li {
  text-align: left;
}

/* ESG 경영 > 안전과 포용의 항만 > 동반성장, 상생협력 생태계 조성 */
/* CEO 메시지 */
.paragraph[key=ceo메시지] .top {
  height: 55rem;
}
.paragraph[key=ceo메시지] .top .img-area {
  height: 40rem;
  position: absolute;
  bottom: 0;
  right: -6rem;
}
.paragraph[key=ceo메시지] .top .img-area img {
  width: min(38rem, 65%);
  object-fit: contain;
  position: absolute;
  bottom: 0;
}
.paragraph[key=ceo메시지] .top .text .title-thin {
  width: 60%;
}
.paragraph[key=ceo메시지] .top::before {
  width: 120%;
}
.paragraph[key=ceo메시지] .bottom {
  margin-top: 8.6rem;
}
.paragraph[key=ceo메시지] .bottom .wrap-text {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.paragraph[key=ceo메시지] .bottom .wrap-text p {
  font-size: var(--fs-md-18);
}
.paragraph[key=ceo메시지] .bottom .wrap-sign {
  margin-top: 4rem;
}
.paragraph[key=ceo메시지] .bottom .wrap-sign .sign-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
}

@media screen and (min-width: 640px) {
  .paragraph[key=ceo메시지] .top .img-area {
    height: 41rem;
    right: -5rem;
  }
  .paragraph[key=ceo메시지] .top .text .title-thin {
    width: 100%;
  }
}
@media screen and (min-width: 980px) {
  .paragraph[key=ceo메시지] .top {
    padding-top: 8rem;
    height: initial;
  }
  .paragraph[key=ceo메시지] .top .img-area {
    height: fit-content;
    position: relative;
    top: unset;
    right: 2.5rem;
  }
  .paragraph[key=ceo메시지] .top .img-area img {
    width: unset;
    position: inherit;
    bottom: unset;
    transform: unset;
  }
  .paragraph[key=ceo메시지] .top .text {
    width: 50%;
    top: 9.6rem;
  }
}
/* 동반성장 프로그램 소개 */
.paragraph[key=동반성장프로그램소개] .tab01 .box3.img-dl dl:first-of-type::after {
  background-image: url("../../img/sub/esg-030203-1.png");
}
.paragraph[key=동반성장프로그램소개] .tab01 .box3.img-dl dl:nth-of-type(2)::after {
  background-image: url("../../img/sub/online_meeting_img-05.png");
}
.paragraph[key=동반성장프로그램소개] .tab02 .box3.img-dl dl:first-of-type::after {
  background-image: url("../../img/sub/esg-030203-2.png");
}
.paragraph[key=동반성장프로그램소개] .tab02 .box3.img-dl dl:nth-of-type(2)::after {
  background-image: url("../../img/sub/esg-030203-3.png");
}
.paragraph[key=동반성장프로그램소개] .tab02 .box3.img-dl dl:nth-of-type(3)::after {
  background-image: url("../../img/sub/esg-030203-4.png");
}
.paragraph[key=동반성장프로그램소개] .tab03 .box3.img-dl dl:first-of-type::after {
  background-image: url("../../img/sub/esg-030203-5.png");
}
.paragraph[key=동반성장프로그램소개] .tab03 .box3.img-dl dl:nth-of-type(2)::after {
  background-image: url("../../img/sub/esg-030203-6.png");
}
.paragraph[key=동반성장프로그램소개] .tab03 .box3.img-dl dl:nth-of-type(3)::after {
  background-image: url("../../img/sub/esg-030203-7.png");
}
.paragraph[key=동반성장프로그램소개] .tab04 .box3.img-dl dl:first-of-type::after {
  background-image: url("../../img/sub/esg-030203-8.png");
}
.paragraph[key=동반성장프로그램소개] .tab04 .box3.img-dl dl:nth-of-type(2)::after {
  background-image: url("../../img/sub/esg-030203-9.png");
}
.paragraph[key=동반성장프로그램소개] .tab04 .box3.img-dl dl:nth-of-type(3)::after {
  background-image: url("../../img/sub/esg-030203-10.png");
}

/* 안전경영 > 안전보건 경영계획 */
.paragraph[key=안전경영] .wrap-safe_vision .top {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.paragraph[key=안전경영] .wrap-safe_vision .top p {
  font-family: var(--fm-cairo);
  text-transform: capitalize;
  text-align: center;
  font-size: var(--fs-lg);
}
.paragraph[key=안전경영] .wrap-safe_vision .top dl {
  margin-top: 1rem;
}
.paragraph[key=안전경영] .wrap-safe_vision .top dl dt {
  text-align: center;
  font-size: var(--fs-xl);
}
.paragraph[key=안전경영] .wrap-safe_vision .top dl dt span {
  font-size: var(--fs-xl);
  font-family: var(--fm-scdream6);
}
.paragraph[key=안전경영] .wrap-safe_vision .top dl dd {
  margin-top: 0.5rem;
  font-family: var(--fm-scdream5);
  text-align: center;
}
.paragraph[key=안전경영] .wrap-safe_vision .bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  position: relative;
}
.paragraph[key=안전경영] .wrap-safe_vision .bottom::before {
  content: "";
  width: 100%;
  height: 4rem;
  background: url("../../img/sub/diagram_arrow-down.png") center center no-repeat;
  background-size: contain;
  transform: rotate(180deg);
  position: absolute;
  top: -30px;
  left: 0;
}
.paragraph[key=안전경영] .wrap-safe_vision .bottom .item {
  width: 100%;
}
.paragraph[key=안전경영] .wrap-safe_vision .bottom .item dl dt {
  padding: 1.5rem;
  border-radius: 1rem;
  background-color: var(--clr-blue-primary);
  text-align: center;
}
.paragraph[key=안전경영] .wrap-safe_vision .bottom .item dl dt span {
  color: var(--clr-white);
}
.paragraph[key=안전경영] .wrap-safe_vision .bottom .item dl dd {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--clr-white-dark);
  border-radius: 1rem;
  padding: 2rem;
  margin-top: 1rem;
}
.paragraph[key=안전경영] .wrap-safe_certification .img {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.paragraph[key=안전경영] .wrap-safe_certification .img img {
  width: 100%;
}

@media screen and (min-width: 420px) {
  .paragraph[key=안전경영] .wrap-safe_certification .img {
    flex-direction: row;
  }
  .paragraph[key=안전경영] .wrap-safe_certification .img img {
    width: 50%;
  }
}
@media screen and (min-width: 768px) {
  .paragraph[key=안전경영] .wrap-safe_vision .bottom::before {
    top: -40px;
  }
}
@media screen and (min-width: 840px) {
  .paragraph[key=안전경영] .wrap-safe_vision .top p {
    font-family: var(--fm-cairo);
    text-transform: capitalize;
    text-align: center;
  }
  .paragraph[key=안전경영] .wrap-safe_vision .top dl dt {
    font-size: var(--fs-xl-24);
  }
  .paragraph[key=안전경영] .wrap-safe_vision .top dl dt span {
    font-size: var(--fs-xl-24);
  }
  .paragraph[key=안전경영] .wrap-safe_vision .top dl dd {
    font-size: var(--fs-md-18);
  }
  .paragraph[key=안전경영] .wrap-safe_vision .bottom::before {
    background-size: initial;
  }
  .paragraph[key=안전경영] .wrap-safe_vision .bottom .item {
    width: calc(50% - 1rem);
  }
}
/* ESG 경영 > 안전과 포용의 항만 > 재난, 안전관리 및 정보보호체계 고도화 */
.paragraph[key=재난안전관리및정보보호] .wrap-table-scroll .img img {
  max-width: 1080px;
}

@media screen and (min-width: 1024px) {
  .paragraph[key=재난안전관리및정보보호] .wrap-table-scroll .img img {
    width: 100%;
    max-width: unset;
  }
}
/* ESG 경영 > 투명과 책임의 항만 > 준법윤리경영 선도 */
/* 윤리인권경영소개 > CEO 메시지, 윤리경영 브랜드 소개, 윤리인권경영 실천프로그램 */
.paragraph[key=윤리인권경영소개] .ceo-message {
  margin-top: 0;
}
.paragraph[key=윤리인권경영소개] .ceo-message .top {
  padding-top: 4rem;
}
.paragraph[key=윤리인권경영소개] .ceo-message .top .text {
  position: initial;
}
.paragraph[key=윤리인권경영소개] .ceo-message .top .img-area {
  display: none;
}
.paragraph[key=윤리인권경영소개] .brand .ci {
  padding: 5rem;
  display: grid;
  place-content: center;
  background: url("../../img/sub/bg-ci.png");
}
.paragraph[key=윤리인권경영소개] .brand .ci img {
  transform: scale(0.5);
}
.paragraph[key=윤리인권경영소개] .brand .brand-text {
  font-size: var(--fs-3xl);
}
.paragraph[key=윤리인권경영소개] .program .img-dl dl:first-of-type::after {
  background-image: url("../../img/sub/who-recruit-img-01.png");
}
.paragraph[key=윤리인권경영소개] .program .img-dl dl:nth-of-type(2)::after {
  background-image: url("../../img/sub/esg-040301-3.png");
}
.paragraph[key=윤리인권경영소개] .program .img-dl dl:nth-of-type(3)::after {
  background-image: url("../../img/sub/esg-040301-4.png");
}
.paragraph[key=윤리인권경영소개] .program .img-dl dl:nth-of-type(4)::after {
  background-image: url("../../img/sub/esg-040301-5.png");
  height: 3.5rem;
  background-size: contain;
  top: 1rem;
}
.paragraph[key=윤리인권경영소개] .program .img-dl dl:nth-of-type(5)::after {
  background-image: url("../../img/sub/claim-img-01.png");
}

@media screen and (min-width: 500px) {
  .paragraph[key=윤리인권경영소개] .program .img-dl dl:nth-of-type(4)::after {
    width: 7rem;
    height: 7rem;
    top: 4rem;
    left: 0.9rem;
    transform: translateY(-50%);
    background-size: auto;
  }
}
@media screen and (min-width: 980px) {
  .paragraph[key=윤리인권경영소개] .ceo-message {
    margin-top: 0;
  }
  .paragraph[key=윤리인권경영소개] .ceo-message .top {
    padding-top: 0;
  }
  .paragraph[key=윤리인권경영소개] .ceo-message .top .text {
    position: absolute;
  }
  .paragraph[key=윤리인권경영소개] .ceo-message .top .img-area {
    display: block;
  }
}
@media screen and (min-width: 1370px) {
  .paragraph[key=윤리인권경영소개] .ceo-message {
    margin-top: 12rem;
  }
  .paragraph[key=윤리인권경영소개] .ceo-message .top .text {
    width: min(755px, 80%);
  }
}
/* 윤리인권경영규범 > 윤리인권경영 규범, 인권경영 규범 */
/* 국민참여 > 민원신고제안공모 > 통합신고센터 > 기명신고접수 */
.wrap-card2 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.wrap-card2 .card2 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}
.wrap-card2 .card2 .img {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: var(--clr-white-off);
  position: relative;
}
.wrap-card2 .card2 .title {
  width: 100%;
  flex-grow: 1;
  padding: 1.5rem;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  background-color: var(--clr-white-dark);
  box-shadow: var(--shadow-7);
  font-family: var(--fm-scdream5);
  text-align: center;
  word-break: keep-all;
}
.wrap-card2 .card2 .title2 {
  font-size: var(--fs-lg);
}
.wrap-card2 .card2 .wrap-btn {
  margin-top: 0;
}
.wrap-card2 .card2:hover, .wrap-card2 .card2:focus {
  border-color: var(--clr-blue-primary);
  box-shadow: var(--shadow-7);
}

@media screen and (min-width: 540px) {
  .wrap-card2 {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .wrap-card2 .card2 {
    width: calc(50% - 1rem);
    justify-content: space-between;
  }
  .wrap-card2 .card2.box3 {
    padding: 2rem;
  }
  .wrap-card2 .card2 .title {
    flex-grow: 0;
  }
}
@media screen and (min-width: 1024px) {
  .wrap-card2 .card2 {
    width: calc(33% - 2rem);
  }
  .wrap-card2 .card2.box3 {
    padding: 3rem 2rem;
  }
  .wrap-card2 .card2 .img {
    width: 8.5rem;
    height: 8.5rem;
  }
}
@media screen and (min-width: 1380px) {
  .wrap-card2 .card2 {
    width: calc(25% - 3rem);
  }
  .wrap-card2 .card2 .title {
    padding: 1.5rem 0;
  }
}
/* 국민참여 > 적극행정 > 적극행정 소개 */
.paragraph[key=적극행정소개] .wrap-vision {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
.paragraph[key=적극행정소개] .wrap-vision .title {
  width: 100%;
  padding: 2rem 3rem;
  border-radius: 10rem;
  text-align: center;
}
.paragraph[key=적극행정소개] .wrap-vision .title dt {
  font-size: var(--fs-xl-28);
  font-family: var(--fm-scdream6);
  color: var(--clr-white);
  margin-bottom: 1rem;
}
.paragraph[key=적극행정소개] .wrap-vision .title dd {
  color: var(--clr-white);
}
.paragraph[key=적극행정소개] .wrap-vision .strategy {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
}
.paragraph[key=적극행정소개] .wrap-vision .strategy::before {
  content: "";
  width: min(736px, 100%);
  height: 10rem;
  background: url("../../img/sub/diagram_arrow-up.png") center no-repeat;
  background-size: contain;
  position: absolute;
  top: -6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.paragraph[key=적극행정소개] .wrap-vision .strategy h2 {
  text-align: center;
  font-size: var(--fs-xl-28);
  font-family: var(--fm-scdream6);
}
.paragraph[key=적극행정소개] .wrap-vision .strategy dl {
  display: flex;
  gap: 1rem;
}
.paragraph[key=적극행정소개] .wrap-vision .strategy dl dt {
  padding: 2rem 3rem;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.paragraph[key=적극행정소개] .wrap-vision .strategy dl dt h3 {
  color: var(--clr-white);
  font-family: var(--fm-scdream6);
}
.paragraph[key=적극행정소개] .wrap-vision .strategy dl dd {
  width: 100%;
  padding: 2rem;
  border-radius: 0.5rem;
  font-family: var(--fm-scdream5);
  color: var(--clr-gray);
}
.paragraph[key=적극행정소개] .wrap-vision .todo {
  position: relative;
}
.paragraph[key=적극행정소개] .wrap-vision .todo::before {
  content: "";
  width: min(500px, 100%);
  height: 10rem;
  background: url("../../img/sub/diagram_arrow-up.png") center no-repeat;
  background-size: contain;
  position: absolute;
  top: -6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.paragraph[key=적극행정소개] .wrap-vision .todo .top {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.paragraph[key=적극행정소개] .wrap-vision .todo .top .title {
  width: 100%;
  border-radius: 1rem;
  background-color: var(--clr-blue-alt);
  display: flex;
  justify-content: center;
  gap: 3rem;
}
.paragraph[key=적극행정소개] .wrap-vision .todo .top .title h3 {
  color: var(--clr-white);
  font-size: var(--fs-md-18);
}
.paragraph[key=적극행정소개] .wrap-vision .todo .top dl {
  width: 100%;
  background-color: var(--clr-white-dark);
  padding: 2.5rem;
  padding-bottom: 3.5rem;
  border-radius: 1rem;
}
.paragraph[key=적극행정소개] .wrap-vision .todo .top dl dt {
  font-size: var(--fs-md-18);
  font-family: var(--fm-scdream6);
  text-align: center;
  margin-bottom: 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--clr-gray-light);
}
.paragraph[key=적극행정소개] .wrap-vision .todo .process {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}
.paragraph[key=적극행정소개] .wrap-vision .todo .process dl {
  position: relative;
}
.paragraph[key=적극행정소개] .wrap-vision .todo .process dl dt {
  padding: 2.5rem;
  font-size: var(--fs-lg);
  font-family: var(--fm-scdream5);
  color: var(--clr-white);
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.paragraph[key=적극행정소개] .wrap-vision .todo .process dl dd {
  padding: 2.5rem;
  padding-bottom: 3.5rem;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
.paragraph[key=적극행정소개] .wrap-vision .todo .process dl dd ul .dot {
  color: var(--clr-white);
}
.paragraph[key=적극행정소개] .wrap-vision .todo .process dl dd ul .dot::before {
  background-color: var(--clr-white);
}
.paragraph[key=적극행정소개] .wrap-vision .todo .process dl:nth-of-type(1) dt {
  background-color: var(--clr-blue-alt);
}
.paragraph[key=적극행정소개] .wrap-vision .todo .process dl:nth-of-type(1) dd {
  background-color: var(--clr-blue-secondary);
}
.paragraph[key=적극행정소개] .wrap-vision .todo .process dl:nth-of-type(1)::before {
  content: "";
  width: 3rem;
  height: 3rem;
  background: url("../../img/icon/icon-dir-left-round-blue.png") center no-repeat;
  background-size: contain;
  outline: 2px solid var(--clr-white);
  border-radius: 50%;
  position: absolute;
  bottom: -2.5rem;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  z-index: 1;
}
.paragraph[key=적극행정소개] .wrap-vision .todo .process dl:nth-of-type(2) dt {
  background-color: var(--clr-sky-dark-alt);
}
.paragraph[key=적극행정소개] .wrap-vision .todo .process dl:nth-of-type(2) dd {
  background-color: var(--clr-sky-dark);
}
.paragraph[key=적극행정소개] .wrap-vision .todo .process dl:nth-of-type(2)::before {
  content: "";
  width: 3rem;
  height: 3rem;
  background: url("../../img/icon/icon-dir-left-round-blue.png") center no-repeat;
  background-size: contain;
  outline: 2px solid var(--clr-white);
  border-radius: 50%;
  position: absolute;
  bottom: -2.5rem;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  z-index: 1;
}
.paragraph[key=적극행정소개] .wrap-vision .todo .process dl:nth-of-type(3) dt {
  background-color: var(--clr-green-dark);
}
.paragraph[key=적극행정소개] .wrap-vision .todo .process dl:nth-of-type(3) dd {
  background-color: var(--clr-green);
}

@media screen and (min-width: 640px) {
  .paragraph[key=적극행정소개] .wrap-vision .strategy {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .paragraph[key=적극행정소개] .wrap-vision .strategy::before {
    width: min(600px, 100%);
    top: -5rem;
  }
  .paragraph[key=적극행정소개] .wrap-vision .strategy h2 {
    width: 100%;
  }
  .paragraph[key=적극행정소개] .wrap-vision .strategy dl {
    width: calc(50% - 1rem);
    flex-direction: column;
  }
  .paragraph[key=적극행정소개] .wrap-vision .strategy dl dd {
    flex-grow: 1;
    text-align: center;
  }
  .paragraph[key=적극행정소개] .wrap-vision .todo::before {
    width: min(600px, 100%);
    top: -7rem;
  }
  .paragraph[key=적극행정소개] .wrap-vision .todo .top {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .paragraph[key=적극행정소개] .wrap-vision .todo .top .title {
    width: 100%;
  }
  .paragraph[key=적극행정소개] .wrap-vision .todo .top dl {
    width: calc(50% - 1rem);
  }
  .paragraph[key=적극행정소개] .wrap-vision .todo .process {
    flex-direction: row;
  }
  .paragraph[key=적극행정소개] .wrap-vision .todo .process dl {
    width: calc(33% - 1rem);
    display: flex;
    flex-direction: column;
  }
  .paragraph[key=적극행정소개] .wrap-vision .todo .process dl dt {
    text-align: center;
  }
  .paragraph[key=적극행정소개] .wrap-vision .todo .process dl dd {
    flex-grow: 1;
  }
  .paragraph[key=적극행정소개] .wrap-vision .todo .process dl:nth-of-type(1)::before, .paragraph[key=적극행정소개] .wrap-vision .todo .process dl:nth-of-type(2)::before {
    content: "";
    width: 3rem;
    height: 3rem;
    background: url("../../img/icon/icon-dir-left-round-blue.png") center no-repeat;
    background-size: contain;
    outline: 2px solid var(--clr-white);
    border-radius: 50%;
    position: absolute;
    bottom: unset;
    top: 50%;
    left: unset;
    right: -2.5rem;
    transform: translateY(-50%);
    z-index: 1;
  }
}
@media screen and (min-width: 1200px) {
  .paragraph[key=적극행정소개] .wrap-vision {
    gap: 10rem;
  }
  .paragraph[key=적극행정소개] .wrap-vision .strategy {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .paragraph[key=적극행정소개] .wrap-vision .strategy::before {
    width: min(736px, 100%);
    top: -10rem;
  }
  .paragraph[key=적극행정소개] .wrap-vision .strategy h2 {
    width: 100%;
  }
  .paragraph[key=적극행정소개] .wrap-vision .strategy dl {
    width: calc(25% - 1.5rem);
    flex-direction: column;
  }
  .paragraph[key=적극행정소개] .wrap-vision .strategy dl dt h3 {
    font-size: var(--fs-md-18);
  }
  .paragraph[key=적극행정소개] .wrap-vision .strategy dl dd {
    flex-grow: 1;
    text-align: center;
    padding: 2rem 20%;
    display: flex;
    align-items: center;
  }
  .paragraph[key=적극행정소개] .wrap-vision .todo::before {
    width: min(736px, 100%);
    top: -10rem;
  }
  .paragraph[key=적극행정소개] .wrap-vision .todo .top {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .paragraph[key=적극행정소개] .wrap-vision .todo .top .title {
    width: 8%;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
  }
  .paragraph[key=적극행정소개] .wrap-vision .todo .top .title h3:nth-of-type(2) {
    border-top: 1px dotted var(--clr-gray-light);
    padding-top: 3rem;
  }
  .paragraph[key=적극행정소개] .wrap-vision .todo .top dl {
    width: 20%;
    flex-grow: 1;
  }
  .paragraph[key=적극행정소개] .wrap-vision .todo .process {
    flex-direction: row;
    margin-top: 4rem;
  }
  .paragraph[key=적극행정소개] .wrap-vision .todo .process dl {
    width: calc(33% - 1rem);
    display: flex;
    flex-direction: column;
  }
  .paragraph[key=적극행정소개] .wrap-vision .todo .process dl dt {
    text-align: center;
  }
  .paragraph[key=적극행정소개] .wrap-vision .todo .process dl dd {
    flex-grow: 1;
  }
}
/* 국민참여 > 민원신고제안공모 > 통합신고센터 > 기명신고접수 이미지 */
.paragraph[key=기명신고접수] .wrap-card2 .card2 .img::before {
  content: "";
  width: 3.5rem;
  height: 3.5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.paragraph[key=기명신고접수] .wrap-card2 .card2:nth-of-type(1) .img::before {
  background-image: url("../../img/sub/01-vision-02.png");
}
.paragraph[key=기명신고접수] .wrap-card2 .card2:nth-of-type(2) .img::before {
  background-image: url("../../img/sub/claim-img-10.png");
}
.paragraph[key=기명신고접수] .wrap-card2 .card2:nth-of-type(3) .img::before {
  background-image: url("../../img/sub/claim-img-10.png");
}
.paragraph[key=기명신고접수] .wrap-card2 .card2:nth-of-type(4) .img::before {
  background-image: url("../../img/sub/ncs_recruit-img-04.png");
}
.paragraph[key=기명신고접수] .wrap-card2 .card2:nth-of-type(5) .img::before {
  background-image: url("../../img/sub/claim-img-01.png");
}
.paragraph[key=기명신고접수] .wrap-card2 .card2:nth-of-type(6) .img::before {
  background-image: url("../../img/sub/claim-img-11.png");
}
.paragraph[key=기명신고접수] .wrap-card2 .card2:nth-of-type(7) .img::before {
  background-image: url("../../img/sub/claim-img-12.png");
}
.paragraph[key=기명신고접수] .wrap-card2 .card2:nth-of-type(8) .img::before {
  background-image: url("../../img/sub/claim-img-13.png");
}
.paragraph[key=기명신고접수] .wrap-card2 .card2:nth-of-type(9) .img::before {
  background-image: url("../../img/sub/claim-img-14.png");
}
.paragraph[key=기명신고접수] .wrap-card2 .card2:nth-of-type(10) .img::before {
  background-image: url("../../img/sub/claim-img-15.png");
}

/* 청렴골든벨 */
.paragraph[key=청렴골든벨] .prg-h4 .box3 .prg-img {
  display: grid;
  place-items: center;
  margin-top: 0;
}
.paragraph[key=청렴골든벨] .prg-h4 .box3 .prg-img.whale {
  margin: 4rem 0 2.8rem;
}
.paragraph[key=청렴골든벨] .prg-h4 .box3 .box2 .desc {
  width: min(82.5rem, 100%);
  margin: 0 auto;
  color: var(--clr-gray);
  font-size: var(--fs-md-18);
}

@media screen and (min-width: 768px) {
  .paragraph[key=청렴골든벨] .prg-h4 .box3 .prg-img.whale {
    margin: 6rem 0 4.8rem;
  }
  .paragraph[key=청렴골든벨] .prg-h4 .box3 .box2 .desc {
    font-size: var(--fs-lg);
  }
}
/* ESG 경영 > 투명과 책임의 항만 > 지배구조 투명성 */
/* 근로자참관제 */
.paragraph[key=근로자참관제] .box2 {
  display: grid;
  place-items: center;
}
.paragraph[key=근로자참관제] .box2 p {
  width: min(51rem, 80%);
  font-size: var(--fs-lg);
  text-align: center;
}
.paragraph[key=근로자참관제] .box2 p span {
  font-size: var(--fs-lg);
}

/* 항만위원회 구성원 */
.paragraph.card3 .wrap-card3 {
  display: flex;
  gap: 2.8rem;
  flex-wrap: wrap;
  margin-top: 6rem;
}
.paragraph.card3 .wrap-card3 .card3-item {
  width: 100%;
  padding: 3.9rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
.paragraph.card3 .wrap-card3 .card3-item .card3-img {
  width: 100%;
  height: 190px;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: var(--clr-white-dark);
}
.paragraph.card3 .wrap-card3 .card3-item .card3-img img {
  transform: translateY(2.3rem);
}
.paragraph.card3 .wrap-card3 .card3-item .card3-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.paragraph.card3 .wrap-card3 .card3-item .card3-info dt {
  width: 100%;
  font-size: var(--fs-md-18);
  padding: 2.6rem;
  border-bottom: 1px solid var(--clr-gray-light);
  margin-bottom: 2.6rem;
  text-align: center;
  color: var(--clr-gray);
}
.paragraph.card3 .wrap-card3 .card3-item .card3-info dt span {
  font-family: var(--fm-scdream6);
  font-size: var(--fs-md-18);
  color: var(--clr-black);
}
.paragraph.card3 .wrap-card3 .card3-item .card3-info dd {
  width: fit-content;
  color: var(--clr-black);
  font-family: var(--fm-scdream6);
  font-size: var(--fs-xl);
}
.paragraph.card3 .wrap-card3 .card3-item:hover {
  border: 1px solid var(--clr-blue-primary);
  box-shadow: var(--shadow-7);
}
.paragraph.card3 .wrap-card3 .member-layer {
  display: none;
  position: fixed;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--clr-white);
  width: min(360px, 100%);
  border-radius: 2rem;
  z-index: 20;
  box-shadow: var(--shadow-7);
}
.paragraph.card3 .wrap-card3 .member-layer .wrap-member-layer {
  width: 100%;
  padding: 8rem 2.8rem 4rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.paragraph.card3 .wrap-card3 .member-layer .wrap-member-layer h4 {
  position: relative;
  font-size: var(--fs-xl-24);
  font-family: var(--fm-scdream3);
}
.paragraph.card3 .wrap-card3 .member-layer .wrap-member-layer h4 span {
  font-size: var(--fs-xl-24);
  font-family: var(--fm-scdream6);
  line-height: 1;
  color: var(--clr-black-alt);
  padding-top: 2.2rem;
  margin-bottom: 4.2rem;
  word-break: keep-all;
}
.paragraph.card3 .wrap-card3 .member-layer .wrap-member-layer h4::before {
  content: "";
  width: 35px;
  height: 4px;
  background: url("../../img/sub/h4-point.png") no-repeat;
  position: absolute;
  top: -1.8rem;
  left: 0;
}
.paragraph.card3 .wrap-card3 .member-layer .wrap-member-layer h5 {
  font-size: var(--fs-md-18);
  line-height: 1;
  color: var(--clr-black-off);
  padding-left: 2.2rem;
  margin-bottom: 2.4rem;
  position: relative;
  word-break: keep-all;
}
.paragraph.card3 .wrap-card3 .member-layer .wrap-member-layer h5::before {
  content: "";
  width: 12px;
  height: 18px;
  background: url("../../img/sub/h5-point.png") no-repeat;
  background-size: contain;
  position: absolute;
  top: -1px;
  left: 0;
}
.paragraph.card3 .wrap-card3 .member-layer .btn-close {
  width: 3rem;
  height: 3rem;
  background: url("../../img/icon/icon-close.png") center center no-repeat;
  background-size: 2rem;
  position: absolute;
  top: 2.8rem;
  right: 2.8rem;
}
.paragraph.card3 .wrap-card3 .member-layer.show {
  display: block;
}
.paragraph.card3 .member-layer-bg {
  display: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 5;
}
.paragraph.card3 .member-layer-bg.show {
  display: block;
}

@media screen and (min-width: 640px) {
  .paragraph.card3 .wrap-card3 .card3-item {
    width: calc(50% - 1.4rem);
  }
  .paragraph.card3 .wrap-card3 .member-layer {
    width: min(600px, 90%);
  }
}
@media screen and (min-width: 1024px) {
  .paragraph.card3 .wrap-card3 .card3-item {
    width: calc(33% - 1.6rem);
  }
}
@media screen and (min-width: 1340px) {
  .paragraph.card3 .wrap-card3 .card3-item {
    width: calc(25% - 2.1rem);
  }
}
/* 국민참여 > 민원·신고·제안·공모 > 민원·신고·제안·공모 */
.paragraph[key=민원신고제안공모] .box4 .box4-item {
  min-height: 27.6rem;
}
.paragraph[key=민원신고제안공모] .box4 .box4-item .wrap-btn {
  margin-top: 2rem;
}

/* 국민참여 > 민원·신고·제안·공모 > 민원신청 */
/* 울산항 목소리 */
.paragraph[key=울산항목소리] .wrap-img {
  width: 100%;
  position: relative;
}
.paragraph[key=울산항목소리] .wrap-img .img-area {
  width: 100%;
  height: 112px;
  background: url("../../img/sub/claim-img-07.png") no-repeat center;
  border-radius: 2rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.paragraph[key=울산항목소리] .wrap-img .img-area p {
  width: calc(100% - 20rem);
  font-size: var(--fs-lg);
  font-family: var(--fm-scdream7);
  color: var(--clr-blue-primary);
  text-align: center;
}
.paragraph[key=울산항목소리] .wrap-img .img-area p span {
  font-size: var(--fs-lg);
  font-family: var(--fm-scdream7);
  color: var(--clr-blue-secondary);
}
.paragraph[key=울산항목소리] .wrap-img .left {
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 6rem;
}
.paragraph[key=울산항목소리] .wrap-img .left img {
  width: 100%;
}
.paragraph[key=울산항목소리] .wrap-img .right {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 10rem;
}
.paragraph[key=울산항목소리] .wrap-img .right img {
  width: 100%;
}

@media screen and (min-width: 560px) {
  .paragraph[key=울산항목소리] .wrap-img .img-area p {
    width: calc(100% - 30rem);
    font-size: var(--fs-xl-24);
  }
  .paragraph[key=울산항목소리] .wrap-img .img-area p span {
    font-size: var(--fs-xl-24);
  }
  .paragraph[key=울산항목소리] .wrap-img .left {
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 8rem;
  }
  .paragraph[key=울산항목소리] .wrap-img .right {
    position: absolute;
    right: -8px;
    bottom: -9px;
    width: 12rem;
  }
}
@media screen and (min-width: 768px) {
  .paragraph[key=울산항목소리] .wrap-img .img-area p {
    width: calc(100% - 30rem);
    font-size: var(--fs-2xl);
  }
  .paragraph[key=울산항목소리] .wrap-img .img-area p span {
    font-size: var(--fs-2xl);
  }
  .paragraph[key=울산항목소리] .wrap-img .left {
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 10rem;
  }
  .paragraph[key=울산항목소리] .wrap-img .right {
    position: absolute;
    right: -8px;
    bottom: -14px;
    width: 14rem;
  }
}
@media screen and (min-width: 1080px) {
  .paragraph[key=울산항목소리] .wrap-img .left {
    position: absolute;
    left: 4%;
    bottom: -6px;
    width: 14rem;
  }
  .paragraph[key=울산항목소리] .wrap-img .right {
    position: absolute;
    right: 4%;
    bottom: -20px;
    width: 20rem;
  }
}
/* 국민참여 > 민원·신고·제안·공모 > 민원신청 > 고객서비스 헌장 */
.paragraph[key=고객서비스헌장] .ordered-list > li {
  margin-left: 2rem;
}
.paragraph[key=고객서비스헌장] .ordered-list > li span {
  font-family: var(--fm-scdream6);
  font-size: var(--fs-md-18);
}
.paragraph[key=고객서비스헌장] .ordered-list > li > ol {
  margin-left: 2rem;
}
.paragraph[key=고객서비스헌장] .ordered-list > li > ol > li ol {
  margin-left: 2rem;
}
.paragraph[key=고객서비스헌장] .ordered-list > li > ol > li:not(:last-of-type) {
  margin: 1rem 0;
}
.paragraph[key=고객서비스헌장] .ordered-list > li:not(:last-of-type) {
  margin-bottom: 2.5rem;
}
.paragraph[key=고객서비스헌장] .ordered-list .num_depthPoint {
  margin-left: 2rem;
}

/* 국민참여 > 민원·신고·제안·공모 > 민원신청 > 고객의 소리*/
.wrap-prg-h5[key=고객의소리_처리절차] {
  width: 100%;
}
.wrap-prg-h5[key=고객의소리_처리절차] .process-voc {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
}
.wrap-prg-h5[key=고객의소리_처리절차] .process-voc .process-voc-item {
  width: 100%;
  display: grid;
  place-items: center;
  padding: 3rem;
  border: 1px solid;
  border-color: var(--clr-gray-light);
  border-radius: 8px;
}
.wrap-prg-h5[key=고객의소리_처리절차] .process-voc .process-voc-item dl {
  padding-top: 8.6rem;
  position: relative;
}
.wrap-prg-h5[key=고객의소리_처리절차] .process-voc .process-voc-item dl dt {
  font-size: var(--fs-lg);
  font-family: var(--fm-scdream5);
  margin-bottom: 2.1rem;
}
.wrap-prg-h5[key=고객의소리_처리절차] .process-voc .process-voc-item dl::before {
  content: "";
  width: 6.6rem;
  height: 6.6rem;
  background-color: var(--clr-white-dark);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.wrap-prg-h5[key=고객의소리_처리절차] .process-voc .process-voc-item dl::after {
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
}
.wrap-prg-h5[key=고객의소리_처리절차] .process-voc .process-voc-item:hover {
  box-shadow: var(--shadow-7);
  border-color: var(--clr-blue-primary);
}
.wrap-prg-h5[key=고객의소리_처리절차] .process-voc .process-voc-item:first-of-type dl::after {
  content: "";
  background: url(../../img/sub/voc-img-01.png) center center no-repeat;
  background-size: contain;
}
.wrap-prg-h5[key=고객의소리_처리절차] .process-voc .process-voc-item:nth-of-type(2) dl::after {
  content: "";
  background: url(../../img/sub/voc-img-02.png) center center no-repeat;
  background-size: contain;
}
.wrap-prg-h5[key=고객의소리_처리절차] .process-voc .process-voc-item:nth-of-type(3) dl::after {
  content: "";
  background: url(../../img/sub/voc-img-03.png) center center no-repeat;
  background-size: contain;
}

@media screen and (min-width: 768px) {
  .wrap-prg-h5[key=고객의소리_처리절차] .process-voc {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .wrap-prg-h5[key=고객의소리_처리절차] .process-voc .process-voc-item {
    width: calc(50% - 1.4rem);
  }
  .wrap-prg-h5[key=고객의소리_처리절차] .process-voc .process-voc-item dl {
    padding-top: 10.6rem;
  }
  .wrap-prg-h5[key=고객의소리_처리절차] .process-voc .process-voc-item dl::before {
    content: "";
    width: 8.6rem;
    height: 8.6rem;
  }
  .wrap-prg-h5[key=고객의소리_처리절차] .process-voc .process-voc-item dl::after {
    width: 4rem;
    height: 4rem;
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (min-width: 1280px) {
  .wrap-prg-h5[key=고객의소리_처리절차] .process-voc .process-voc-item dl {
    padding-top: 0;
    padding-left: 10.6rem;
  }
  .wrap-prg-h5[key=고객의소리_처리절차] .process-voc .process-voc-item dl::before {
    content: "";
    width: 8.6rem;
    height: 8.6rem;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
  }
  .wrap-prg-h5[key=고객의소리_처리절차] .process-voc .process-voc-item dl::after {
    width: 4rem;
    height: 4rem;
    position: absolute;
    top: 50%;
    left: 22px;
    transform: translate(0, -50%);
  }
}

/* 국민참여 > 민원·신고·제안·공모 > 국민제안 */
/* 국민제안 안내 */
.paragraph[key=국민제안안내] .process {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.paragraph[key=국민제안안내] .process .left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.paragraph[key=국민제안안내] .process .left .title {
  padding: 2rem;
  border-radius: 5rem;
  background-color: var(--clr-blue-primary);
  text-align: center;
}
.paragraph[key=국민제안안내] .process .left .title span {
  font-size: var(--fs-lg);
  color: var(--clr-white);
  font-family: var(--fm-scdream6);
}
.paragraph[key=국민제안안내] .process .left dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 2rem;
}
.paragraph[key=국민제안안내] .process .left dl dt {
  grid-column: 1/2;
  padding: 2rem;
  background-color: var(--clr-white-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(10rem, 100%);
  height: auto;
  aspect-ratio: 1/1;
  align-self: center;
  border-radius: 50%;
  position: relative;
}
.paragraph[key=국민제안안내] .process .left dl dt .img img {
  width: 100%;
}
.paragraph[key=국민제안안내] .process .left dl dt p {
  font-family: var(--fm-scdream5);
}
.paragraph[key=국민제안안내] .process .left dl dt .bullet {
  position: absolute;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--clr-blue);
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.paragraph[key=국민제안안내] .process .left dl dt::before {
  content: "";
  width: 100%;
  height: 0;
  border: 1px dashed var(--clr-gray-light);
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  z-index: -1;
}
.paragraph[key=국민제안안내] .process .left dl dd {
  grid-column: 2/4;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  background-color: var(--clr-white-dark);
}
.paragraph[key=국민제안안내] .process .left dl dd p {
  text-align: center;
  font-family: var(--fm-scdream6);
  font-size: var(--fs-md-18);
}
.paragraph[key=국민제안안내] .process .left dl dd ul li {
  text-align: center;
}
.paragraph[key=국민제안안내] .process .left dl dd ul li:first-of-type {
  font-family: var(--fm-scdream5);
}
.paragraph[key=국민제안안내] .process .left dl dd ul li:nth-of-type(2) {
  font-size: var(--fs-xs);
  color: var(--clr-gray);
}
.paragraph[key=국민제안안내] .process .left dl:first-of-type dd {
  background-color: var(--clr-blue);
}
.paragraph[key=국민제안안내] .process .left dl:first-of-type dd ul li:first-of-type {
  color: var(--clr-white);
}
.paragraph[key=국민제안안내] .process .left dl:first-of-type dd ul li:nth-of-type(2) {
  color: var(--clr-white);
  opacity: 0.7;
}
.paragraph[key=국민제안안내] .process .left dl:nth-of-type(4) dt::after {
  content: "";
  width: 0;
  height: 21rem;
  border: 1px dashed var(--clr-gray-light);
  position: absolute;
  top: 50%;
  left: 100%;
  z-index: -1;
}
.paragraph[key=국민제안안내] .process .left dl:last-of-type dt {
  background: transparent;
}
.paragraph[key=국민제안안내] .process .left dl:last-of-type dt span {
  width: 47px;
}
.paragraph[key=국민제안안내] .process .right {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.paragraph[key=국민제안안내] .process .right .title {
  padding: 2rem;
  border-radius: 5rem;
  background-color: var(--clr-sky-dark);
  text-align: center;
}
.paragraph[key=국민제안안내] .process .right .title span {
  font-size: var(--fs-lg);
  color: var(--clr-white);
  font-family: var(--fm-scdream6);
}
.paragraph[key=국민제안안내] .process .right ol {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.paragraph[key=국민제안안내] .process .right ol li {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--clr-white-dark);
  height: 8rem;
}
.paragraph[key=국민제안안내] .process .right ol li span {
  font-family: var(--fm-scdream5);
}
.paragraph[key=국민제안안내] .process .right ol li:first-of-type {
  background-color: var(--clr-green);
}
.paragraph[key=국민제안안내] .process .right ol li:first-of-type span {
  color: var(--clr-white);
}

@media screen and (min-width: 640px) {
  .paragraph[key=국민제안안내] .process {
    width: min(92rem, 100%);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    flex-direction: unset;
    margin: 0 auto;
  }
  .paragraph[key=국민제안안내] .process .left {
    width: 100%;
    grid-column: 1/3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
  }
  .paragraph[key=국민제안안내] .process .left .title {
    grid-column: 2/4;
  }
  .paragraph[key=국민제안안내] .process .left dl {
    grid-column: 1/4;
    gap: 4rem;
  }
  .paragraph[key=국민제안안내] .process .left dl dt {
    width: 12rem;
  }
  .paragraph[key=국민제안안내] .process .left dl:nth-of-type(4) dt::after {
    content: "";
    width: 0;
    height: 23rem;
    border: 1px dashed var(--clr-gray-light);
    position: absolute;
    top: 50%;
    left: 100%;
    z-index: -1;
  }
  .paragraph[key=국민제안안내] .process .right {
    grid-column: 3/4;
  }
  .paragraph[key=국민제안안내] .process .right ol li {
    height: 12rem;
  }
  .paragraph[key=국민제안안내] .process .right ol li:nth-of-type(2) {
    height: 10rem;
  }
  .paragraph[key=국민제안안내] .process .right ol li:nth-of-type(3) {
    height: 40rem;
  }
  .paragraph[key=국민제안안내] .process .right ol li:nth-of-type(4) {
    height: 15rem;
  }
}
@media screen and (min-width: 1024px) {
  .paragraph[key=국민제안안내] .process .left dl:nth-of-type(4) dt {
    transform: translateY(5rem);
  }
  .paragraph[key=국민제안안내] .process .left dl:nth-of-type(4) dt::before {
    width: 2rem;
  }
  .paragraph[key=국민제안안내] .process .left dl:nth-of-type(4) dt::after {
    top: 1rem;
    left: unset;
    right: -2.5rem;
    height: 23rem;
  }
  .paragraph[key=국민제안안내] .process .left dl:nth-of-type(4) dd {
    position: relative;
  }
  .paragraph[key=국민제안안내] .process .left dl:nth-of-type(4) dd::before {
    content: "";
    width: 6.5rem;
    height: 0;
    border: 1px dashed var(--clr-gray-light);
    position: absolute;
    top: 50%;
    left: -6.5rem;
  }
  .paragraph[key=국민제안안내] .process .left dl:last-of-type dt::before {
    width: 8rem;
    left: calc(100% + 2.5rem);
  }
}
/* 국민참여과제 발굴 이벤트 */
.paragraph[key=국민참여과제] .box3 .wrap-box3 {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 768px) {
  .paragraph[key=국민참여과제] .box3 .wrap-box3 .wrap-btn {
    margin-top: 1.5rem;
  }
}
@media screen and (min-width: 1200px) {
  .paragraph[key=국민참여과제] .box3 .wrap-box3 {
    flex-direction: row;
    justify-content: space-between;
    gap: 2rem;
  }
  .paragraph[key=국민참여과제] .box3 .wrap-box3 p {
    width: 50%;
  }
  .paragraph[key=국민참여과제] .box3 .wrap-box3 .wrap-btn {
    margin-top: 0;
  }
}
/* 국민참여 > 민원·신고·제안·공모 > 입찰정보 > 입찰공고 */
.paragraph[key=입찰공고] .board.table .board-list.table > table > thead th.date {
  display: none;
}
.paragraph[key=입찰공고] .board.table .board-list.table > table > tbody td.date {
  display: none;
}

@media screen and (min-width: 768px) {
  .paragraph[key=입찰공고] .board.table .board-list.table > table > thead th.date {
    display: table-cell;
  }
  .paragraph[key=입찰공고] .board.table .board-list.table > table > tbody td.date {
    display: table-cell;
  }
}
/* 국민참여 > 민원·신고·제안·공모 > 민원신청 > 작업중지요청센터 */
.wrap-prg-h5.process[key=작업중지요청센터] .process-work .process-work-item:first-of-type dl::after {
  content: "";
  background: url("../../img/sub/stop-img-01.png") center center no-repeat;
  background-size: contain;
}
.wrap-prg-h5.process[key=작업중지요청센터] .process-work .process-work-item:nth-of-type(2) dl::after {
  content: "";
  background: url("../../img/sub/stop-img-02.png") center center no-repeat;
  background-size: contain;
}
.wrap-prg-h5.process[key=작업중지요청센터] .process-work .process-work-item:nth-of-type(3) dl::after {
  content: "";
  background: url("../../img/sub/stop-img-03.png") center center no-repeat;
  background-size: contain;
}
.wrap-prg-h5.process[key=작업중지요청센터] .process-work .process-work-item:nth-of-type(4) dl::after {
  content: "";
  background: url("../../img/sub/stop-img-04.png") center center no-repeat;
  background-size: contain;
}
.wrap-prg-h5.process[key=작업중지요청센터] .process-work .process-work-item:nth-of-type(5) dl::after {
  content: "";
  background: url("../../img/sub/stop-img-05.png") center center no-repeat;
  background-size: contain;
}

/* 인재채용 > NCS 채용 */
.wrap-prg-h5.process[key=NCS채용절차] .process-work .process-work-item dl::after {
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 7rem;
  left: 50%;
  transform: translateX(-50%);
}
.wrap-prg-h5.process[key=NCS채용절차] .process-work .process-work-item:first-of-type dl::after {
  content: "";
  background: url("../../img/sub/ncs_recruit-img-01.png") center center no-repeat;
  background-size: contain;
}
.wrap-prg-h5.process[key=NCS채용절차] .process-work .process-work-item:nth-of-type(2) dl::after {
  content: "";
  background: url("../../img/sub/ncs_recruit-img-02.png") center center no-repeat;
  background-size: contain;
}
.wrap-prg-h5.process[key=NCS채용절차] .process-work .process-work-item:nth-of-type(3) dl::after {
  content: "";
  background: url("../../img/sub/ncs_recruit-img-03.png") center center no-repeat;
  background-size: contain;
  left: 50.5%;
  top: 6.8rem;
}
.wrap-prg-h5.process[key=NCS채용절차] .process-work .process-work-item:nth-of-type(4) dl::after {
  content: "";
  background: url("../../img/sub/ncs_recruit-img-04.png") center center no-repeat;
  background-size: contain;
}
.wrap-prg-h5.process[key=NCS채용절차] .process-work .process-work-item:nth-of-type(5) dl::after {
  content: "";
  background: url("../../img/sub/ncs_recruit-img-05.png") center center no-repeat;
  background-size: contain;
}
.wrap-prg-h5.process[key=NCS채용절차] .process-work .process-work-item:nth-of-type(6) dl::after {
  content: "";
  background: url("../../img/sub/ncs_recruit-img-06.png") center center no-repeat;
  background-size: contain;
}

@media screen and (min-width: 1280px) {
  .wrap-prg-h5.process[key=NCS채용절차] .process-work .process-work-item dl::after {
    width: 4rem;
    height: 4rem;
    position: absolute;
    top: 8.5rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .wrap-prg-h5.process[key=NCS채용절차] .process-work .process-work-item:nth-of-type(3) dl::after {
    content: "";
    background: url("../../img/sub/ncs_recruit-img-03.png") center center no-repeat;
    background-size: contain;
    left: 52%;
    top: 8.5rem;
  }
}
/* 국민참여 > 민원신고제안공모 > 견학 및 교육프로그램 신청 */
.wrap-prg-h5.process[key=견학교육프로그램신청절차] .process-work .process-work-item:first-of-type dl::after {
  content: "";
  background: url("../../img/sub/stop-img-03.png") center center no-repeat;
  background-size: 2.6rem;
  top: 7rem;
}
.wrap-prg-h5.process[key=견학교육프로그램신청절차] .process-work .process-work-item:nth-of-type(2) dl::after {
  content: "";
  background: url("../../img/sub/online_meeting_img-04.png") center center no-repeat;
  background-size: contain;
}
.wrap-prg-h5.process[key=견학교육프로그램신청절차] .process-work .process-work-item:nth-of-type(3) dl::after {
  content: "";
  background: url("../../img/sub/ncs_recruit-img-03.png") center center no-repeat;
  background-size: contain;
  left: 50.5%;
  top: 7rem;
}
.wrap-prg-h5.process[key=견학교육프로그램신청절차] .process-work .process-work-item:nth-of-type(4) dl::after {
  content: "";
  background: url("../../img/sub/ncs_recruit-img-01.png") center center no-repeat;
  background-size: contain;
}
.wrap-prg-h5.process[key=견학교육프로그램신청절차] .process-work .process-work-item:nth-of-type(5) dl::after {
  content: "";
  background: url("../../img/sub/stop-img-04.png") center center no-repeat;
  background-size: contain;
}

@media screen and (min-width: 1280px) {
  .wrap-prg-h5.process[key=견학교육프로그램신청절차] .process-work .process-work-item:first-of-type dl::after {
    background-size: contain;
    top: 8.2rem;
  }
  .wrap-prg-h5.process[key=견학교육프로그램신청절차] .process-work .process-work-item:nth-of-type(3) dl::after {
    background-size: contain;
    left: 51.5%;
    top: 8.2rem;
  }
}
/* 국민참여 > 민원신고제안공모 > 자료실 > 항만용어 */
.paragraph[key=자료실] .search-index {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.paragraph[key=자료실] .search-index:not(:last-of-type) {
  margin-bottom: 2rem;
}
.paragraph[key=자료실] .search-index p {
  margin-left: 2rem;
  position: relative;
  font-family: var(--fm-scdream5);
}
.paragraph[key=자료실] .search-index p::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--clr-blue);
  position: absolute;
  top: 0.8rem;
  left: -1.5rem;
}
.paragraph[key=자료실] .search-index ul {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.paragraph[key=자료실] .search-index ul li button {
  border: 1px solid var(--clr-gray-light);
  border-radius: 0.5rem;
  width: 3.6rem;
  height: 3.6rem;
  background-color: var(--clr-white);
}
.paragraph[key=자료실] .search-index ul li button > span {
  color: var(--clr-gray) !important;
  font-size: var(--fs-2xs);
}
.paragraph[key=자료실] .search-index ul li button.selected {
  background-color: var(--clr-blue-primary);
  border-color: var(--clr-blue-primary);
}
.paragraph[key=자료실] .search-index ul li button.selected > span {
  color: var(--clr-white) !important;
  font-family: var(--fm-scdream5);
}
.paragraph[key=자료실] .search-index ul li button:hover, .paragraph[key=자료실] .search-index ul li button:focus-visible {
  border-color: var(--clr-blue-primary);
  box-shadow: var(--shadow-7);
}
.paragraph[key=자료실] .search-index form {
  position: relative;
  width: 100%;
}
.paragraph[key=자료실] .search-index form .search-index-input {
  width: 100%;
  height: 4rem;
  border: 1px solid var(--clr-gray-light);
  border-radius: 0.5rem;
  padding: 0.5rem;
  padding-right: 5rem;
}
.paragraph[key=자료실] .search-index form .btn-search-index {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  background: url("../../img/icon/icon-search-blue.png") center center no-repeat;
}

@media screen and (min-width: 1024px) {
  .paragraph[key=자료실] .search-index {
    flex-direction: row;
    gap: 2rem;
    align-items: center;
  }
  .paragraph[key=자료실] .search-index:not(:last-of-type) {
    margin-bottom: 2.4rem;
  }
  .paragraph[key=자료실] .search-index ul {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
  }
  .paragraph[key=자료실] .search-index form {
    position: relative;
    width: 300px;
  }
  .paragraph[key=자료실] .search-index form .search-index-input {
    width: 100%;
    height: 4rem;
    border: 1px solid var(--clr-gray-light);
    border-radius: 0.5rem;
    padding: 0.5rem;
    padding-right: 5rem;
  }
  .paragraph[key=자료실] .search-index form .btn-search-index {
    right: 0;
  }
}

/* 사이버홍보실 > 로고소개 */
.paragraph[key=로고소개] .wrap-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.paragraph[key=로고소개] .box-img {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.paragraph[key=로고소개] .box-img .img {
  width: min(15rem, 100%);
  min-height: 15rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.paragraph[key=로고소개] .box-img .img img {
  width: 100%;
}
.paragraph[key=로고소개] .box-img .desc {
  width: fit-content;
}
.paragraph[key=로고소개] .box-img .desc p {
  border: 1px solid var(--clr-gray-light);
  padding: 1rem;
  border-radius: 5px;
}
.paragraph[key=로고소개] .symbol .wrap-symbol {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.paragraph[key=로고소개] .symbol .wrap-symbol .left {
  width: 100%;
}
.paragraph[key=로고소개] .symbol .wrap-symbol .left .box3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.paragraph[key=로고소개] .symbol .wrap-symbol .right .box-img:not(:first-of-type) img {
  width: fit-content;
}
.paragraph[key=로고소개] .symbol .wrap-symbol .wrap-btn {
  width: 100%;
  margin-top: 0;
}
.paragraph[key=로고소개] .logotype .box3 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.paragraph[key=로고소개] .logotype .box3 .wrap-img:first-of-type .box-img .img {
  width: min(24rem, 100%);
}
.paragraph[key=로고소개] .logotype .box3 .wrap-img:nth-of-type(2) {
  flex-direction: row;
}
.paragraph[key=로고소개] .logotype .box3 .wrap-img:nth-of-type(2) .box-img .img {
  width: min(11.2rem, 100%);
  height: 30rem;
}
.paragraph[key=로고소개] .signiture .box3 {
  background: url("../../img/sub/bg-ci.png") center center;
}
.paragraph[key=로고소개] .signiture .box3:first-of-type .box-img .img {
  width: min(25rem, 100%);
}
.paragraph[key=로고소개] .signiture .box3:nth-of-type(2) {
  margin-top: 2rem;
}
.paragraph[key=로고소개] .signiture .variation {
  gap: 4rem;
}
.paragraph[key=로고소개] .signiture .variation .box-img .img {
  width: min(20rem, 100%);
  min-height: unset;
}
.paragraph[key=로고소개] .wrap-colors {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.paragraph[key=로고소개] .wrap-colors .main {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.paragraph[key=로고소개] .wrap-colors .main > div {
  padding: 2.5rem 2rem;
}
.paragraph[key=로고소개] .wrap-colors .main > div dl {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.paragraph[key=로고소개] .wrap-colors .main > div dl dt, .paragraph[key=로고소개] .wrap-colors .main > div dl dd, .paragraph[key=로고소개] .wrap-colors .main > div dl p {
  text-transform: uppercase;
}
.paragraph[key=로고소개] .wrap-colors .main > div dl dt {
  font-size: var(--fs-md-18);
  font-family: var(--fm-scdream6);
}
.paragraph[key=로고소개] .wrap-colors .main > div dl p {
  font-size: var(--fs-xs);
  opacity: 0.7;
}
.paragraph[key=로고소개] .wrap-colors .main .blue {
  background-color: var(--clr-blue);
}
.paragraph[key=로고소개] .wrap-colors .main .blue dl dt {
  color: var(--clr-white);
}
.paragraph[key=로고소개] .wrap-colors .main .blue dl p {
  color: var(--clr-white);
}
.paragraph[key=로고소개] .wrap-colors .main .yellow {
  background-color: var(--clr-orange);
}
.paragraph[key=로고소개] .wrap-colors .sub {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.paragraph[key=로고소개] .wrap-colors .sub > div {
  padding: 2rem 1.5rem;
  width: calc(50% - 0.5rem);
  flex-grow: 1;
}
.paragraph[key=로고소개] .wrap-colors .sub > div dl {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: space-between;
}
.paragraph[key=로고소개] .wrap-colors .sub > div dl dt, .paragraph[key=로고소개] .wrap-colors .sub > div dl dd, .paragraph[key=로고소개] .wrap-colors .sub > div dl p {
  text-transform: uppercase;
}
.paragraph[key=로고소개] .wrap-colors .sub > div dl dt {
  font-family: var(--fm-scdream6);
}
.paragraph[key=로고소개] .wrap-colors .sub > div dl p {
  font-size: var(--fs-xs);
  opacity: 0.7;
}
.paragraph[key=로고소개] .wrap-colors .sub .white {
  background-color: var(--clr-white);
  border: 1px solid var(--clr-gray-light);
}
.paragraph[key=로고소개] .wrap-colors .sub .black {
  background-color: var(--clr-black);
}
.paragraph[key=로고소개] .wrap-colors .sub .black dl dt {
  color: var(--clr-white);
}
.paragraph[key=로고소개] .wrap-colors .sub .black dl p {
  color: var(--clr-white);
}
.paragraph[key=로고소개] .wrap-colors .sub .yellow {
  background-color: var(--clr-orange-alt);
}
.paragraph[key=로고소개] .wrap-colors .sub .gray {
  background-color: var(--clr-gray);
}
.paragraph[key=로고소개] .wrap-colors .sub .gray dl dt {
  color: var(--clr-white);
}
.paragraph[key=로고소개] .wrap-colors .sub .gray dl p {
  color: var(--clr-white);
}
.paragraph[key=로고소개] .character .title {
  font-family: var(--fm-scdream6);
  font-size: var(--fs-lg);
}
.paragraph[key=로고소개] .character .img {
  width: 22rem;
  margin: 0 auto;
}
.paragraph[key=로고소개] .character .img img {
  width: 100%;
}

@media screen and (min-width: 640px) {
  .paragraph[key=로고소개] .wrap-symbol .right .box3 .wrap-img {
    flex-direction: row;
    width: min(58rem, 100%);
    justify-content: space-between;
    margin: 0 auto;
  }
  .paragraph[key=로고소개] .logotype .box3 {
    gap: 4rem;
  }
  .paragraph[key=로고소개] .logotype .box3 .wrap-img {
    flex-direction: row;
  }
  .paragraph[key=로고소개] .emblem .box3 .box-img {
    width: min(58rem, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .paragraph[key=로고소개] .signiture .variation .box-img {
    width: min(1200px, 100%);
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .paragraph[key=로고소개] .signiture .variation .box-img .img {
    flex-grow: 1;
    width: calc(50% - 2rem);
  }
  .paragraph[key=로고소개] .signiture .variation .box-img .img img {
    width: inherit;
  }
  .paragraph[key=로고소개] .wrap-colors {
    gap: 4rem;
  }
  .paragraph[key=로고소개] .wrap-colors .main {
    gap: 1rem;
  }
  .paragraph[key=로고소개] .wrap-colors .main > div {
    padding: 4rem 3rem;
  }
  .paragraph[key=로고소개] .wrap-colors .main > div dl {
    display: flex;
    justify-content: space-between;
  }
  .paragraph[key=로고소개] .wrap-colors .main > div dl dt {
    font-size: var(--fs-lg);
  }
  .paragraph[key=로고소개] .wrap-colors .sub {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .paragraph[key=로고소개] .wrap-colors .sub > div {
    padding: 4rem 3rem;
    width: calc(50% - 0.5rem);
    flex-grow: 1;
  }
  .paragraph[key=로고소개] .wrap-colors .sub > div dl {
    display: flex;
    flex-direction: row;
    gap: unset;
    justify-content: space-between;
    align-items: center;
  }
  .paragraph[key=로고소개] .wrap-colors .sub > div dl dt {
    font-size: var(--fs-lg);
  }
  .paragraph[key=로고소개] .character .box3 {
    display: flex;
    gap: 4rem;
  }
}
@media screen and (min-width: 1024px) {
  .paragraph[key=로고소개] .symbol .wrap-symbol {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .paragraph[key=로고소개] .symbol .wrap-symbol .left {
    width: 30%;
  }
  .paragraph[key=로고소개] .symbol .wrap-symbol .right {
    width: calc(70% - 2rem);
    flex-grow: 1;
  }
  .paragraph[key=로고소개] .symbol .wrap-symbol .right .box3 .wrap-img {
    flex-direction: row;
    width: min(58rem, 100%);
    justify-content: space-between;
    margin: 0 auto;
  }
  .paragraph[key=로고소개] .symbol .wrap-symbol .right .box3 .wrap-img .box-img:first-of-type .img img {
    width: 88%;
  }
  .paragraph[key=로고소개] .symbol .wrap-symbol .box-img .desc p {
    white-space: nowrap;
  }
  .paragraph[key=로고소개] .logotype .box3 {
    gap: 4rem;
  }
  .paragraph[key=로고소개] .logotype .box3 .wrap-img {
    flex-direction: row;
  }
  .paragraph[key=로고소개] .emblem .box3 .box-img {
    width: min(58rem, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .paragraph[key=로고소개] .signiture .variation .box-img {
    width: min(1200px, 100%);
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .paragraph[key=로고소개] .signiture .variation .box-img .img {
    flex-grow: 1;
    width: calc(50% - 2rem);
  }
  .paragraph[key=로고소개] .signiture .variation .box-img .img img {
    width: inherit;
  }
  .paragraph[key=로고소개] .wrap-colors {
    gap: 4rem;
  }
  .paragraph[key=로고소개] .wrap-colors .main {
    gap: 1rem;
  }
  .paragraph[key=로고소개] .wrap-colors .main > div {
    padding: 4rem 3rem;
  }
  .paragraph[key=로고소개] .wrap-colors .main > div dl {
    display: flex;
    justify-content: space-between;
  }
  .paragraph[key=로고소개] .wrap-colors .sub {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .paragraph[key=로고소개] .wrap-colors .sub > div {
    padding: 4rem 3rem;
    width: calc(50% - 0.5rem);
    flex-grow: 1;
  }
  .paragraph[key=로고소개] .wrap-colors .sub > div dl {
    display: flex;
    flex-direction: row;
    gap: unset;
    justify-content: space-between;
    align-items: center;
  }
  .paragraph[key=로고소개] .character .box3 {
    display: flex;
    gap: 4rem;
  }
}
@media screen and (min-width: 1220px) {
  .paragraph[key=로고소개] .logotype .box3 {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .paragraph[key=로고소개] .signiture .variation .box-img .img {
    width: fit-content;
  }
  .paragraph[key=로고소개] .signiture .variation .box-img .img img {
    width: 75%;
  }
  .paragraph[key=로고소개] .wrap-colors {
    gap: 2.8rem;
    flex-direction: row;
  }
  .paragraph[key=로고소개] .wrap-colors .main {
    width: 50%;
    gap: 2.8rem;
  }
  .paragraph[key=로고소개] .wrap-colors .main > div {
    padding: 4rem 3rem;
  }
  .paragraph[key=로고소개] .wrap-colors .main > div dl {
    display: flex;
    justify-content: space-between;
  }
  .paragraph[key=로고소개] .wrap-colors .main > div dl dt {
    font-size: var(--fs-lg);
  }
  .paragraph[key=로고소개] .wrap-colors .sub {
    display: flex;
    flex-wrap: wrap;
    gap: 2.8rem;
    width: calc(50% - 2.8rem);
  }
  .paragraph[key=로고소개] .wrap-colors .sub > div {
    padding: 4rem 2.8rem;
    width: calc(50% - 2.8rem);
    flex-grow: 1;
  }
  .paragraph[key=로고소개] .wrap-colors .sub > div dl {
    display: flex;
    flex-direction: row;
    gap: unset;
    justify-content: space-between;
    align-items: center;
  }
  .paragraph[key=로고소개] .wrap-colors .sub > div dl dt {
    width: 100%;
    font-size: var(--fs-md-18);
  }
  .paragraph[key=로고소개] .character .box3 .img {
    width: 34rem;
    margin: inherit;
  }
  .paragraph[key=로고소개] .character .box3 .desc {
    flex-grow: 1;
  }
}
/* 사이버홍보실 > 화상회의서비스 > 화상회의서비스 사용방법 */
.wrap-prg-h5.process[key=화상회의서비스메뉴얼] .process-work .process-work-item dl::after {
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 7rem;
  left: 50%;
  transform: translateX(-50%);
}
.wrap-prg-h5.process[key=화상회의서비스메뉴얼] .process-work .process-work-item:first-of-type dl::after {
  content: "";
  background: url("../../img/sub/ncs_recruit-img-01.png") center center no-repeat;
  background-size: contain;
}
.wrap-prg-h5.process[key=화상회의서비스메뉴얼] .process-work .process-work-item:nth-of-type(2) dl::after {
  content: "";
  background: url("../../img/sub/online_meeting_img-02.png") center center no-repeat;
  background-size: contain;
}
.wrap-prg-h5.process[key=화상회의서비스메뉴얼] .process-work .process-work-item:nth-of-type(3) dl::after {
  content: "";
  background: url("../../img/sub/voc-img-01.png") center center no-repeat;
  background-size: contain;
  top: 8rem;
}
.wrap-prg-h5.process[key=화상회의서비스메뉴얼] .process-work .process-work-item:nth-of-type(4) dl::after {
  content: "";
  background: url("../../img/sub/online_meeting_img-07.png") center center no-repeat;
  background-size: contain;
}
.wrap-prg-h5.process[key=화상회의서비스메뉴얼] .process-work .process-work-item:nth-of-type(5) dl::after {
  content: "";
  background: url("../../img/sub/online_meeting_img-05.png") center center no-repeat;
  background-size: contain;
}
.wrap-prg-h5.process[key=화상회의서비스메뉴얼] .process-work .process-work-item:nth-of-type(6) dl::after {
  content: "";
  background: url("../../img/sub/online_meeting_img-04.png") center center no-repeat;
  background-size: contain;
}

@media screen and (min-width: 1280px) {
  .wrap-prg-h5.process[key=화상회의서비스메뉴얼] .process-work .process-work-item dl::after {
    width: 4rem;
    height: 4rem;
    position: absolute;
    top: 8.5rem;
    left: 50%;
    transform: translateX(-50%);
  }
}
/* 사이버홍보실 > 카드뉴스 */
.board.gallery[key=카드뉴스] .board-list.gallery {
  padding: 4rem 0;
  border-top: 2px solid var(--clr-gray-dark-alt);
  border-bottom: 1px solid var(--clr-gray-dark-alt);
}
.board.gallery[key=카드뉴스] .board-list.gallery .wrap-board-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 5%;
  row-gap: 0;
}
.board.gallery[key=카드뉴스] .board-list.gallery .wrap-board-list .gallery-item {
  width: 100%;
}
.board.gallery[key=카드뉴스] .board-list.gallery .wrap-board-list .gallery-item a {
  width: 100%;
  padding-bottom: 4.6rem;
}
.board.gallery[key=카드뉴스] .board-list.gallery .wrap-board-list .gallery-item a .gallery-item-img {
  width: 100%;
  height: auto;
  max-height: 75rem;
  aspect-ratio: 1/1;
  border-radius: 4px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.board.gallery[key=카드뉴스] .board-list.gallery .wrap-board-list .gallery-item a .gallery-item-img > img {
  width: 100%;
}
.board.gallery[key=카드뉴스] .board-list.gallery .wrap-board-list .gallery-item a .gallery-item-title {
  font-size: var(--fs-lg);
  letter-spacing: -1.2px;
  margin-top: 2.4rem;
  margin-bottom: 1.6rem;
  text-align: center;
}
.board.gallery[key=카드뉴스] .board-list.gallery .wrap-board-list .gallery-item a .gallery-item-info {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.board.gallery[key=카드뉴스] .board-list.gallery .wrap-board-list .gallery-item a .gallery-item-info > span {
  color: var(--clr-gray);
}
.board.gallery[key=카드뉴스] .board-list.gallery .wrap-board-list .gallery-item a .gallery-item-info > span.date {
  padding-left: 2.2rem;
  background: url("../../img/icon/icon-clock.png") center left no-repeat;
}
.board.gallery[key=카드뉴스] .board-list.gallery .wrap-board-list .gallery-item a .gallery-item-info > span.view {
  padding-left: 2.2rem;
  background: url("../../img/icon/icon-view.png") center left no-repeat;
}

@media screen and (min-width: 768px) {
  .board.gallery[key=카드뉴스] .board-list.gallery {
    padding: 4rem 4rem 0rem;
  }
  .board.gallery[key=카드뉴스] .board-list.gallery .wrap-board-list {
    row-gap: 4rem;
  }
  .board.gallery[key=카드뉴스] .board-list.gallery .wrap-board-list .gallery-item {
    width: 47.5%;
  }
  .board.gallery[key=카드뉴스] .board-list.gallery .wrap-board-list .gallery-item a .gallery-item-img {
    max-height: 50rem;
    aspect-ratio: unset;
  }
}
@media screen and (min-width: 1340px) {
  .board.gallery[key=카드뉴스] .board-list.gallery .wrap-board-list .gallery-item {
    width: 21.2%;
  }
  .board.gallery[key=카드뉴스] .board-list.gallery .wrap-board-list .gallery-item a .gallery-item-img {
    max-height: 26.8rem;
  }
}
/* 사이버홍보실 > 울산항 온라인 홍보관 */
.paragraph[key=울산항온라인홍보관] .prg-h4 .box3 .whale {
  margin: 4rem 0 2.8rem;
  width: 100%;
}
.paragraph[key=울산항온라인홍보관] .prg-h4 .box3 .whale img {
  width: fit-content;
}
.paragraph[key=울산항온라인홍보관] .prg-h4 .box3 .prg-img {
  display: grid;
  place-items: center;
  margin-top: 0;
}
.paragraph[key=울산항온라인홍보관] .prg-h4 .box3 .prg-img > a {
  display: inline-block;
  width: 100%;
}
.paragraph[key=울산항온라인홍보관] .prg-h4 .box3 .prg-img > a > img {
  width: 100%;
}
.paragraph[key=울산항온라인홍보관] .prg-h4 .box3 .online_promotion-desc {
  width: min(82.5rem, 100%);
  margin: 0 auto;
  color: var(--clr-gray);
}
.paragraph[key=울산항온라인홍보관] .prg-h4 .box3 .box2 p {
  display: inline-block;
}
.paragraph[key=울산항온라인홍보관] .prg-h4 .box3 .box2 p .btn {
  display: inline-block;
  width: 16px;
  height: 18px;
}
.paragraph[key=울산항온라인홍보관] .prg-h4 .box3 .box2 p .btn .link-ext {
  height: 100%;
}
.paragraph[key=울산항온라인홍보관] .prg-h4 .box3 .box2 p .btn .link-ext::before {
  background-image: url("../../img/icon/icon-link-ext-gray.png");
}

@media screen and (min-width: 768px) {
  .paragraph[key=울산항온라인홍보관] .prg-h4 .box3 .prg-img.whale {
    margin: 6rem 0 4.8rem;
  }
}
/* 항만운영 > 울산항시설현황 > 일반현황 */
.paragraph.port-facility .wrap-imgs {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 4rem;
}
.paragraph.port-facility .wrap-imgs .left .img {
  width: 100%;
  height: 44rem;
  overflow: hidden;
  position: relative;
}
.paragraph.port-facility .wrap-imgs .left .img img {
  transform: scale(0.8);
  position: absolute;
  top: -33rem;
  right: -5rem;
}
.paragraph.port-facility .wrap-imgs .right {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.paragraph.port-facility .wrap-imgs .right > div {
  flex-grow: 1;
  text-align: center;
}
.paragraph.port-facility .wrap-imgs .right > div .img {
  width: 100%;
  margin-bottom: 2rem;
}
.paragraph.port-facility .wrap-imgs .right > div .img img {
  width: 100%;
}
.paragraph.port-facility .map-area {
  width: 100%;
  height: 53rem;
}
.paragraph.port-facility .map-area .map {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 768px) {
  .paragraph.port-facility .wrap-imgs .left .img {
    height: 35rem;
  }
  .paragraph.port-facility .wrap-imgs .left .img img {
    top: -30rem;
    right: 30%;
    transform: translateX(50%);
    transform: scale(1);
  }
}
@media screen and (min-width: 1024px) {
  .paragraph.port-facility .wrap-imgs .right {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .paragraph.port-facility .wrap-imgs .right > div {
    flex-grow: 1;
    width: calc(25% - 1rem);
    padding: 2.4rem;
  }
  .paragraph.port-facility .wrap-imgs .right > div .img {
    width: 100%;
    margin-bottom: 2rem;
  }
  .paragraph.port-facility .wrap-imgs .right > div .img img {
    width: 100%;
  }
}
@media screen and (min-width: 1280px) {
  .paragraph.port-facility .wrap-imgs {
    flex-direction: row;
  }
  .paragraph.port-facility .wrap-imgs .left {
    width: 50%;
    display: flex;
    flex-grow: 1;
  }
  .paragraph.port-facility .wrap-imgs .left .box3 {
    display: flex;
    width: 100%;
    height: 100%;
  }
  .paragraph.port-facility .wrap-imgs .left .box3 .img {
    height: 100%;
  }
  .paragraph.port-facility .wrap-imgs .left .box3 .img img {
    top: -26rem;
  }
  .paragraph.port-facility .wrap-imgs .right {
    width: 50%;
  }
  .paragraph.port-facility .wrap-imgs .right > div {
    width: calc(50% - 1rem);
  }
}

/* 항만운영 > 울산신항 배후단지 > 일반현황 */
.paragraph.port-subFacility .img {
  width: min(71.3rem, 100%);
  height: auto;
  aspect-ratio: 10/7;
}
.paragraph.port-subFacility .img img {
  width: 100%;
}

/* 항만운영 > 에너지허브사업의 개념 > 에너지허브사업의 개녕 */
.paragraph[key=에너지허브란] .process-energy {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.paragraph[key=에너지허브란] .process-energy .item {
  padding: 2.5rem 1rem;
  border-radius: 4px;
  border: 1px solid var(--clr-gray-light);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.paragraph[key=에너지허브란] .process-energy .item .icon {
  width: 6.6rem;
  height: 6.6rem;
  border-radius: 50%;
  margin-bottom: 2rem;
}
.paragraph[key=에너지허브란] .process-energy .item p {
  font-family: var(--fm-scdream5);
  color: var(--clr-blue-primary);
  font-size: var(--fs-lg);
}
.paragraph[key=에너지허브란] .process-energy .item:nth-of-type(1) {
  position: relative;
}
.paragraph[key=에너지허브란] .process-energy .item:nth-of-type(1) .icon {
  background: var(--clr-white-dark) url("../../img/sub/port-010101-01.png") center center no-repeat;
  background-size: 3rem;
}
.paragraph[key=에너지허브란] .process-energy .item:nth-of-type(1)::before {
  content: "";
  width: 3rem;
  height: 3rem;
  background: url("../../img/sub/plus_circle-blue.png") center center no-repeat;
  background-size: 3rem;
  position: absolute;
  top: calc(100% - 3px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.paragraph[key=에너지허브란] .process-energy .item:nth-of-type(2) {
  position: relative;
}
.paragraph[key=에너지허브란] .process-energy .item:nth-of-type(2) .icon {
  background: var(--clr-white-dark) url("../../img/sub/port-010101-02.png") center center no-repeat;
  background-size: 3rem;
}
.paragraph[key=에너지허브란] .process-energy .item:nth-of-type(2)::before {
  content: "";
  width: 3rem;
  height: 3rem;
  background: url("../../img/sub/equal_circle-blue.png") center center no-repeat;
  background-size: 3rem;
  position: absolute;
  top: calc(100% - 3px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.paragraph[key=에너지허브란] .process-energy .item:nth-of-type(3) .icon {
  background: var(--clr-white-dark) url("../../img/sub/port-010101-03.png") center center no-repeat;
  background-size: 3rem;
}

@media screen and (min-width: 640px) {
  .paragraph[key=에너지허브란] .process-energy {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 2rem;
  }
  .paragraph[key=에너지허브란] .process-energy .item {
    width: 30%;
    flex-grow: 1;
    padding: 4rem 1rem;
  }
  .paragraph[key=에너지허브란] .process-energy .item .icon {
    width: 8rem;
    height: 8rem;
    margin-bottom: 4rem;
  }
  .paragraph[key=에너지허브란] .process-energy .item:nth-of-type(1) {
    position: relative;
  }
  .paragraph[key=에너지허브란] .process-energy .item:nth-of-type(1) .icon {
    background-size: 4rem;
  }
  .paragraph[key=에너지허브란] .process-energy .item:nth-of-type(1)::before {
    content: "";
    width: 3.6rem;
    height: 3.6rem;
    background-size: 3.6rem;
    top: 50%;
    left: calc(100% - 6px);
    transform: translateY(-50%);
  }
  .paragraph[key=에너지허브란] .process-energy .item:nth-of-type(2) {
    position: relative;
  }
  .paragraph[key=에너지허브란] .process-energy .item:nth-of-type(2) .icon {
    background-size: 4rem;
  }
  .paragraph[key=에너지허브란] .process-energy .item:nth-of-type(2)::before {
    content: "";
    width: 3.6rem;
    height: 3.6rem;
    background-size: 3.6rem;
    top: 50%;
    left: calc(100% - 6px);
    transform: translateY(-50%);
  }
  .paragraph[key=에너지허브란] .process-energy .item:nth-of-type(3) .icon {
    background-size: 4rem;
  }
}
/* 항만운영 > 항만연혁/개발 > 울산항 연혁 */
.paragraph[key=울산항연혁] {
  /* 위치도 탭 2번째 */
}
.paragraph[key=울산항연혁] .box3 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /* 위치도 탭 1번째 */
}
.paragraph[key=울산항연혁] .box3 .left ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.paragraph[key=울산항연혁] .box3 .left ul li {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.paragraph[key=울산항연혁] .box3 .right {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}
.paragraph[key=울산항연혁] .box3 .right img {
  width: 100%;
}
.paragraph[key=울산항연혁] .box3.location1 {
  background: none;
}
.paragraph[key=울산항연혁] .box3.location1 ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.paragraph[key=울산항연혁] .box3.location1 ul li {
  width: 100%;
  height: 35.5rem;
  background-color: var(--clr-white-off);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.paragraph[key=울산항연혁] .box3.location1 ul li img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}
.paragraph[key=울산항연혁] .box3.location1 ul li:last-of-type img {
  transform: translate(-75%, -25%) scale(2.8);
}
.paragraph[key=울산항연혁] .history-area {
  width: 100%;
  border-top: 1px solid var(--clr-black);
}
.paragraph[key=울산항연혁] .history-area .history {
  display: flex;
  flex-direction: column;
}
.paragraph[key=울산항연혁] .history-area .history dt, .paragraph[key=울산항연혁] .history-area .history dd {
  display: flex;
  align-items: center;
  padding: 1rem 0;
  padding-left: 2rem;
  border-bottom: 1px solid var(--clr-gray-light);
}
.paragraph[key=울산항연혁] .history-area .history dt {
  background-color: var(--clr-white-dark);
  font-family: var(--fm-scdream6);
}
.paragraph[key=울산항연혁] .history-area .history dd {
  color: var(--clr-gray);
}
.paragraph[key=울산항연혁] .location2 {
  width: 100%;
}
.paragraph[key=울산항연혁] .location2 ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.paragraph[key=울산항연혁] .location2 ul li {
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem;
  border: 1px solid var(--clr-gray-light);
  border-radius: 1rem;
}

@media screen and (min-width: 640px) {
  .paragraph[key=울산항연혁] {
    /* 위치도 탭 2번째 */
  }
  .paragraph[key=울산항연혁] .location2 {
    width: 100%;
  }
  .paragraph[key=울산항연혁] .location2 ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .paragraph[key=울산항연혁] .location2 ul li {
    width: calc(50% - 0.5rem);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    border: 1px solid var(--clr-gray-light);
    border-radius: 1rem;
  }
}
@media screen and (min-width: 768px) {
  .paragraph[key=울산항연혁] .box3 {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .paragraph[key=울산항연혁] .box3 .left ul {
    display: flex;
    flex-direction: row;
    gap: 1rem;
  }
  .paragraph[key=울산항연혁] .box3 .left ul li {
    width: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  .paragraph[key=울산항연혁] .box3 .left ul li img {
    width: 100%;
  }
  .paragraph[key=울산항연혁] .box3.location1 ul {
    flex-direction: row;
    gap: 1rem;
  }
  .paragraph[key=울산항연혁] .box3.location1 ul li {
    width: 33%;
  }
  .paragraph[key=울산항연혁] .box3.location1 ul li:last-of-type img {
    transform: translate(-85%, -25%) scale(2.8);
  }
  .paragraph[key=울산항연혁] .history-area .history {
    display: flex;
    flex-direction: row;
  }
  .paragraph[key=울산항연혁] .history-area .history dt, .paragraph[key=울산항연혁] .history-area .history dd {
    padding-left: 3rem;
  }
  .paragraph[key=울산항연혁] .history-area .history dt {
    background-color: var(--clr-white-dark);
    font-family: var(--fm-scdream6);
    min-width: 20rem;
  }
  .paragraph[key=울산항연혁] .history-area .history dd {
    width: calc(100% - 20rem);
  }
}
@media screen and (min-width: 1024px) {
  .paragraph[key=울산항연혁] .box3.location1 ul {
    flex-direction: row;
    gap: 1rem;
  }
  .paragraph[key=울산항연혁] .box3.location1 ul li {
    width: 33%;
  }
  .paragraph[key=울산항연혁] .box3.location1 ul li:last-of-type img {
    transform: translate(-85%, -25%) scale(2.8);
  }
  .paragraph[key=울산항연혁] .history-area .history {
    display: flex;
    flex-direction: row;
  }
  .paragraph[key=울산항연혁] .history-area .history dt, .paragraph[key=울산항연혁] .history-area .history dd {
    padding: 2.2rem;
    padding-left: 5rem;
  }
  .paragraph[key=울산항연혁] .history-area .history dt {
    background-color: var(--clr-white-dark);
    font-family: var(--fm-scdream6);
    min-width: 28rem;
  }
}
@media screen and (min-width: 1200px) {
  .paragraph[key=울산항연혁] {
    /* 위치도 탭 2번째 */
  }
  .paragraph[key=울산항연혁] .box3 {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    background: url("../../img/sub/logo-gray.png") bottom -8rem left 4rem no-repeat;
  }
  .paragraph[key=울산항연혁] .box3 .left {
    width: 50%;
  }
  .paragraph[key=울산항연혁] .box3 .left ul {
    display: flex;
    flex-direction: row;
    gap: 1rem;
  }
  .paragraph[key=울산항연혁] .box3 .left ul li {
    width: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  .paragraph[key=울산항연혁] .box3 .left ul li img {
    width: 100%;
  }
  .paragraph[key=울산항연혁] .box3 .left ul li span {
    font-size: var(--fs-xs);
  }
  .paragraph[key=울산항연혁] .box3 .right {
    width: 50%;
  }
  .paragraph[key=울산항연혁] .box3.location1 {
    background: none;
  }
  .paragraph[key=울산항연혁] .box3.location1 ul {
    width: 100%;
    display: flex;
    gap: 1rem;
  }
  .paragraph[key=울산항연혁] .box3.location1 ul li {
    width: 33%;
    height: 35.5rem;
    background-color: var(--clr-white-off);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .paragraph[key=울산항연혁] .box3.location1 ul li img {
    width: 80%;
    height: 80%;
    object-fit: contain;
  }
  .paragraph[key=울산항연혁] .box3.location1 ul li:last-of-type img {
    transform: translate(-84%, -25%) scale(2.8);
  }
  .paragraph[key=울산항연혁] .location2 ul li {
    width: calc(24% - 0.5rem);
  }
}
/* 개인정보처리방침 */
.paragraph[key=개인정보처리방침] .wrap-label {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.paragraph[key=개인정보처리방침] .wrap-label dl {
  width: 100%;
  padding: 4rem 2.8rem;
  padding-top: 12rem;
  border-radius: 1rem;
  border: 1px solid vaR(--clr-gray-light);
  position: relative;
}
.paragraph[key=개인정보처리방침] .wrap-label dl dt {
  font-family: var(--fm-scdream6);
  font-size: var(--fs-lg);
  margin-bottom: 1rem;
  text-align: center;
}
.paragraph[key=개인정보처리방침] .wrap-label dl dd ul li {
  color: var(--clr-gray);
}
.paragraph[key=개인정보처리방침] .wrap-label dl dd ul li.fw-medium {
  margin-bottom: 0.5rem;
}
.paragraph[key=개인정보처리방침] .wrap-label dl dd ul li.dot {
  margin-bottom: 0;
}
.paragraph[key=개인정보처리방침] .wrap-label dl::before {
  content: "";
  width: 7rem;
  height: 7rem;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
}
.paragraph[key=개인정보처리방침] .wrap-label dl:nth-of-type(1)::before {
  background-image: url("../../img/sub/privacy-01.png");
}
.paragraph[key=개인정보처리방침] .wrap-label dl:nth-of-type(2)::before {
  background-image: url("../../img/sub/privacy-02.png");
}
.paragraph[key=개인정보처리방침] .wrap-label dl:nth-of-type(3)::before {
  background-image: url("../../img/sub/privacy-03.png");
}
.paragraph[key=개인정보처리방침] .wrap-label dl:nth-of-type(4)::before {
  background-image: url("../../img/sub/privacy-05.png");
}
.paragraph[key=개인정보처리방침] .wrap-label dl:nth-of-type(5)::before {
  background-image: url("../../img/sub/privacy-04.png");
}
.paragraph[key=개인정보처리방침] .wrap-label dl:nth-of-type(6)::before {
  background-image: url("../../img/sub/privacy-06.png");
}
.paragraph[key=개인정보처리방침] .index h5 {
  text-align: center;
  font-size: var(--fs-lg);
  margin-bottom: 2rem;
  font-family: var(--fm-scdream6);
}
.paragraph[key=개인정보처리방침] .index ol {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.paragraph[key=개인정보처리방침] .index ol li {
  margin-left: 1.5rem;
  width: 100%;
  list-style: decimal;
}
.paragraph[key=개인정보처리방침] .index ol li button {
  text-align: left;
  word-break: keep-all;
  cursor: pointer;
}
.paragraph[key=개인정보처리방침] .privacy-content h5 span {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  transform: translateY(5px);
}
.paragraph[key=개인정보처리방침] .privacy-content h5 span img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.paragraph[key=개인정보처리방침] .content {
  margin-left: 3rem;
}
.paragraph[key=개인정보처리방침] .content p {
  color: var(--clr-gray);
}
.paragraph[key=개인정보처리방침] .content ol li, .paragraph[key=개인정보처리방침] .content ul li {
  color: var(--clr-gray);
}
.paragraph[key=개인정보처리방침] .content ol li:not(:last-of-type), .paragraph[key=개인정보처리방침] .content ul li:not(:last-of-type) {
  margin-bottom: 0.5rem;
}
.paragraph[key=개인정보처리방침] .content ol ol, .paragraph[key=개인정보처리방침] .content ol ul, .paragraph[key=개인정보처리방침] .content ul ol, .paragraph[key=개인정보처리방침] .content ul ul {
  margin-left: 1.6rem;
}
.paragraph[key=개인정보처리방침] .content ol ol li, .paragraph[key=개인정보처리방침] .content ol ul li, .paragraph[key=개인정보처리방침] .content ul ol li, .paragraph[key=개인정보처리방침] .content ul ul li {
  color: var(--clr-gray);
}
.paragraph[key=개인정보처리방침] .content ol ol li > a, .paragraph[key=개인정보처리방침] .content ol ul li > a, .paragraph[key=개인정보처리방침] .content ul ol li > a, .paragraph[key=개인정보처리방침] .content ul ul li > a {
  color: var(--clr-gray);
  border-bottom: 1px solid transparent;
}
.paragraph[key=개인정보처리방침] .content ol ol li > a:hover, .paragraph[key=개인정보처리방침] .content ol ul li > a:hover, .paragraph[key=개인정보처리방침] .content ul ol li > a:hover, .paragraph[key=개인정보처리방침] .content ul ul li > a:hover {
  border-bottom: 1px solid var(--clr-gray);
}

@media screen and (min-width: 560px) {
  .paragraph[key=개인정보처리방침] .wrap-label dl {
    width: calc(50% - 1rem);
  }
}
@media screen and (min-width: 1024px) {
  .paragraph[key=개인정보처리방침] .index {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .paragraph[key=개인정보처리방침] .index ol {
    justify-content: space-between;
    width: min(100rem, 100%);
  }
  .paragraph[key=개인정보처리방침] .index ol li {
    width: calc(50% - 3rem);
  }
}
@media screen and (min-width: 1200px) {
  .paragraph[key=개인정보처리방침] .wrap-label dl {
    width: calc(33% - 2rem);
  }
}
/* 항만운영 > 울산항사설현황 > 일반현황*/
/* */
.customoverlay {
  position: relative;
  bottom: 85px;
  border-radius: 6px;
  border: 1px solid var(--clr-gray);
  border-bottom: 2px solid var(--clr-green-dark);
  float: left;
}

.customoverlay:nth-of-type(n) {
  border: 0;
  box-shadow: 0px 1px 2px var(--clr-gray);
}

.customoverlay .title {
  display: block;
  text-align: center;
  background: var(--clr-white);
  padding: 10px 15px;
  font-size: 14px;
  font-weight: bold;
}

.customoverlay:after {
  content: "";
  position: absolute;
  margin-left: -12px;
  left: 50%;
  bottom: -12px;
  width: 22px;
  height: 12px;
  background: url("https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png");
}

/* ESG 경영 메인화면 */
#esgSection .sub-top {
  display: none;
}

.esg-main {
  padding: 12rem 0;
  /* height :1106px; */
}
.esg-main .main_title {
  padding-top: 8rem;
  width: min(63rem, 94%);
  margin: 0 auto;
  position: relative;
}
.esg-main .main_title .h3 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.esg-main .main_title .h3 h3 {
  display: inline-block;
  color: var(--clr-white);
  text-shadow: 0px 1px 16px rgba(31, 14, 18, 0.78);
}
.esg-main .main_title .h3 h3:first-of-type {
  font-size: var(--fs-2xl);
  position: relative;
}
.esg-main .main_title .h3 h3:first-of-type::before {
  content: "";
  width: 100rem;
  height: 1px;
  background-color: var(--clr-white);
  position: absolute;
  top: 0;
  right: 102%;
}
.esg-main .main_title .h3 h3:nth-of-type(2) {
  line-height: 0.9;
  font-size: 9rem;
  position: relative;
}
.esg-main .main_title .h3 h3:nth-of-type(2)::before {
  content: "";
  width: 100rem;
  height: 1px;
  background-color: var(--clr-white);
  position: absolute;
  bottom: 0;
  left: 102%;
}
.esg-main .main_title .h3 h3:nth-of-type(2)::after {
  content: "";
  width: 1px;
  height: 12rem;
  background-color: var(--clr-white);
  position: absolute;
  bottom: 102%;
  right: 3rem;
}
.esg-main .main_title p {
  width: 15rem;
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translateX(11%);
  color: var(--clr-white);
  font-size: var(--fs-xs);
  text-shadow: 0px 1px 16px rgba(31, 14, 18, 0.78);
}
.esg-main .main_title p span {
  color: var(--clr-white);
  font-family: var(--fm-scdream6);
  font-size: var(--fs-xs);
  text-shadow: 0px 1px 16px rgba(31, 14, 18, 0.78);
}
.esg-main .wrap-index {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 10rem;
  gap: 6rem;
}
.esg-main .wrap-index .index {
  padding: 3rem;
  width: min(43rem, 94%);
}
.esg-main .wrap-index .index.u {
  background-color: #151364;
}
.esg-main .wrap-index .index.u .title p span {
  /* color: var(--clr-e-alt); */
  color: #c7c6ff;
  letter-spacing: -2px;
}
.esg-main .wrap-index .index.u .items .item-depth1 li a[title=열림] {
  color: var(--clr-e-dark);
  font-family: var(--fm-scdream6);
  background-image: url("../../img/sub/esg/esg_main-arrow-e.png");
}
.esg-main .wrap-index .index.u .items .item-depth1 .item-depth2 > li a {
  color: var(--clr-e-dark);
}
.esg-main .wrap-index .index.u .items .item-depth1 .item-depth2 > li a:hover, .esg-main .wrap-index .index.u .items .item-depth1 .item-depth2 > li a:focus {
  background-color: var(--clr-e-alt);
  font-family: var(--fm-scdream5);
}
.esg-main .wrap-index .index.e {
  background-color: var(--clr-e);
}
.esg-main .wrap-index .index.e .title p span {
  color: var(--clr-e-alt);
}
.esg-main .wrap-index .index.e .items .item-depth1 li a[title=열림] {
  color: var(--clr-e-dark);
  font-family: var(--fm-scdream6);
  background-image: url("../../img/sub/esg/esg_main-arrow-e.png");
}
.esg-main .wrap-index .index.e .items .item-depth1 .item-depth2 > li a {
  color: var(--clr-e-dark);
}
.esg-main .wrap-index .index.e .items .item-depth1 .item-depth2 > li a:hover, .esg-main .wrap-index .index.e .items .item-depth1 .item-depth2 > li a:focus {
  background-color: var(--clr-e-alt);
  font-family: var(--fm-scdream5);
}
.esg-main .wrap-index .index.s {
  background-color: var(--clr-s);
}
.esg-main .wrap-index .index.s .title p span {
  color: var(--clr-s-alt);
}
.esg-main .wrap-index .index.s .items .item-depth1 li a[title=열림] {
  color: var(--clr-s-dark);
  font-family: var(--fm-scdream6);
  background-image: url("../../img/sub/esg/esg_main-arrow-s.png");
}
.esg-main .wrap-index .index.s .items .item-depth1 .item-depth2 > li a {
  color: var(--clr-s-dark);
}
.esg-main .wrap-index .index.s .items .item-depth1 .item-depth2 > li a:hover, .esg-main .wrap-index .index.s .items .item-depth1 .item-depth2 > li a:focus {
  background-color: var(--clr-s-alt);
  font-family: var(--fm-scdream5);
}
.esg-main .wrap-index .index.g {
  background-color: var(--clr-g);
}
.esg-main .wrap-index .index.g .title p span {
  color: var(--clr-g-alt);
}
.esg-main .wrap-index .index.g .items .item-depth1 li a[title=열림] {
  color: var(--clr-g-dark);
  font-family: var(--fm-scdream6);
  background-image: url("../../img/sub/esg/esg_main-arrow-g.png");
}
.esg-main .wrap-index .index.g .items .item-depth1 .item-depth2 > li a {
  color: var(--clr-g-dark);
}
.esg-main .wrap-index .index.g .items .item-depth1 .item-depth2 > li a:hover, .esg-main .wrap-index .index.g .items .item-depth1 .item-depth2 > li a:focus {
  background-color: var(--clr-g-alt);
  font-family: var(--fm-scdream5);
}
.esg-main .wrap-index .index .title {
  position: relative;
}
.esg-main .wrap-index .index .title .initial {
  font-size: 6rem;
  font-family: var(--fm-scdream5);
  color: var(--clr-white);
  text-shadow: 0px 1px 16px rgba(31, 14, 18, 0.78);
  margin-top: -6rem;
}
.esg-main .wrap-index .index .title p {
  font-size: var(--fs-xl);
  font-family: var(--fm-scdream5);
  color: var(--clr-white);
}
.esg-main .wrap-index .index .title p span {
  font-size: var(--fs-xl);
  font-family: var(--fm-scdream5);
}
.esg-main .wrap-index .index .items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 2rem;
}
.esg-main .wrap-index .index .items .item-depth1 {
  background-color: var(--clr-white);
}
.esg-main .wrap-index .index .items .item-depth1 > li a {
  width: 100%;
  padding: 1.5rem;
  font-family: var(--fm-scdream5);
  color: var(--clr-gray);
  background: url("../../img/sub/esg/esg_main-arrow-gray.png") center right 1.5rem no-repeat;
}
.esg-main .wrap-index .index .items .item-depth1 > li a:focus {
  border: 2px dotted #111;
}
.esg-main .wrap-index .index .items .item-depth1 .item-depth2 {
  padding: 0 1rem 2rem 1rem;
}
.esg-main .wrap-index .index .items .item-depth1 .item-depth2 > li {
  margin-left: 1rem;
}
.esg-main .wrap-index .index .items .item-depth1 .item-depth2 > li a {
  width: 100%;
  padding: 1rem;
}
.esg-main .wrap-index_btn .wrap-btn {
  /* width: min(43rem, 94%); */
  display: flex;
  justify-content: center;
  gap: 6rem;
}
.esg-main .wrap-index_btn .wrap-btn .btn {
  display: inline-block;
  width: min(32rem, 100%);
  border: 1px solid var(--clr-white);
  padding: 2rem;
  background: url("../../img/sub/esg/esg_main-arrow-w.png") center right 1.5rem no-repeat;
  background-size: 4rem;
}
.esg-main .wrap-index_btn .wrap-btn .btn span {
  color: var(--clr-white) !important;
  font-size: var(--fs-md-18);
  font-family: var(--fm-scdream5);
}

@media screen and (min-width: 560px) {
  .esg-main .main_title p {
    width: fit-content;
    bottom: 4px;
    transform: translateX(0);
  }
}
@media screen and (min-width: 768px) {
  .esg-main {
    padding-top: 0;
  }
  .esg-main .main_title {
    padding-top: 12rem;
  }
  .esg-main .main_title p {
    font-size: var(--fs-md-17);
    white-space: nowrap;
    bottom: 0;
  }
  .esg-main .main_title p span {
    font-size: var(--fs-md-17);
  }
  .esg-main .wrap-index {
    width: 94%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
  }
}
@media screen and (min-width: 1400px) {
  .esg-main {
    height: 1106px;
  }
  .esg-main .main_title {
    padding-top: 26.5rem;
  }
  .esg-main .wrap-index {
    width: min(1200px, 94%);
    width: 94%;
    /* height: 54rem; */
    height: 48rem;
    margin-inline: auto;
    /* justify-content: flex-end; */
    justify-content: space-between;
    position: relative;
    gap: 4%;
  }
  .esg-main .wrap-index .index {
    width: 36rem;
    width: 22%;
    /*
    position: absolute;
    &.u { top: 0; left: 0; }
    &.e { top: 0; left: 25%; }
    &.s { top: 0; left: 50%; transform: translateX(-50%); }
    &.g { top: 0; left: 75%; }
    */
  }
  .esg-main .wrap-index_btn {
    padding-right: 3%;
  }
  .esg-main .wrap-index_btn .wrap-btn {
    width: 100%;
    justify-content: flex-end;
  }
}
.esg-main {
  background: url("../../img/sub/esg/esg_main-bg-1.png") center no-repeat;
  background-size: cover;
  animation: bgChange 20s infinite;
}

@keyframes bgChange {
  0% {
    background-image: url("../../img/sub/esg/esg_main-bg-2.png");
  }
  30% {
    background-image: url("../../img/sub/esg/esg_main-bg-1.png");
  }
  60% {
    background-image: url("../../img/sub/esg/esg_main-bg-3.png");
  }
  90% {
    background-image: url("../../img/sub/esg/esg_main-bg-4.png");
  }
  100% {
    background-image: url("../../img/sub/esg/esg_main-bg-2.png");
  }
}