@charset "utf-8";
/*-------------------------------------------------------------------
파일정의 : esg.css
작성날짜 : 2022-05-xx 김도환
참고사항 : 이 CSS 파일은 views/web/sustainability/esg.jsp 에만 적용 된다.
-------------------------------------------------------------------*/

.section_banner {
  margin-bottom: 14.6rem;
}

.section_banner h1 {
  font-size: 6.4rem;
  font-weight: 700;
  margin-top: 4.5rem;
  margin-bottom: 4rem;
  text-align: center;
}

.section_banner img {
  width: 100%;
  margin-bottom: 6rem;
}

.section_banner h2 {
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 4rem;
  text-align: center;
}

.section_banner h2 span {
  color: var(--color-hanwha-orange);
}

.section_esg_ex {
  margin-bottom: 17rem;
}

.section_esg_ex > .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.section_esg_ex .section_esg_ex_des {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 14rem;
}

.section_esg_ex .section_esg_ex_des > h3 {
  font-size: 5.2rem;
  font-weight: 700;
  line-height: 6.657rem;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 36rem;
  flex: 1 1 36rem;
  max-width: 36rem;
}

.section_esg_ex .section_esg_ex_des > p {
  color: #e2e2e2;
  word-break: keep-all;
  -webkit-box-flex: 1;
  -ms-flex: 1 1;
  flex: 1 1;
  font-size: 2rem;
  line-height: 3.4rem;
}

.section_esg_ex .section_esg_ex_icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 2rem 3rem;
  border: 0.1rem solid #b3b3b3;
  border-radius: 18rem;
}

.section_esg_ex .section_esg_ex_icons .section_esg_ex_icons_items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 32rem;
  width: 32rem;
  border-radius: 50%;
  background-color: #141414;
}

.section_esg_ex .section_esg_ex_icons .section_esg_ex_icons_items > img {
  height: 16rem;
  width: 16rem;
  margin-bottom: 2rem;
}

.section_esg_ex .section_esg_ex_icons .section_esg_ex_icons_items > h4 {
  color: #e2e2e2;
  text-align: center;
}

.section_esg_ex .section_esg_ex_line {
  height: 6.6rem;
  width: 0.1rem;
  background-image: url(/resources/assets/mobile/img/img_oper_esg_dash.png);
  background-position: top;
  background-size: 0.1rem 1.2rem;
  background-repeat: repeat-y;
  margin-bottom: 0.8rem;
}

.section_esg_ex .section_esg_ex_sub_title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.section_esg_ex .section_esg_ex_sub_title h3 {
  font-size: 3.6rem;
  font-weight: 500;
  line-height: 3.4rem;
  margin-left: 1.5rem;
}

.section_esg_ex_2 {
  margin-bottom: 14.6rem;
}

.section_esg_ex_2 .attach_back {
  background-image: url('/resources/assets/web/img/img_oper_esg_sub_banner.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  height: 46rem;
  width: 100%;
  margin-bottom: 14rem;
}

.section_esg_ex_2 > h3 {
  font-size: 5.2rem;
  font-weight: 700;
  line-height: 5.2rem;
  text-align: center;
  margin-bottom: 3.5rem;
}

.section_esg_ex_2 > h4 {
  color: #e2e2e2;
  font-size: 2rem;
  line-height: 3.4rem;
  text-align: center;
  margin-bottom: 8rem;
}

.section_esg_ex_2 .section_esg_ex_2_des_item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 8rem;
}

.section_esg_ex_2 .section_esg_ex_2_des_item > img {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 49rem;
  flex: 1 1 49rem;
  max-width: 49rem;
}

.section_esg_ex_2 .section_esg_ex_2_des_item > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1 1;
  flex: 1 1;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.section_esg_ex_2 .section_esg_ex_2_des_item > div.pl {
  padding-left: 5rem;
}

.section_esg_ex_2 .section_esg_ex_2_des_item > div.pr {
  padding-right: 5rem;
}

.section_esg_ex_2 .section_esg_ex_2_des_item > div h5 {
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 3.4rem;
  margin-bottom: 3rem;
}

.section_esg_ex_2 .section_esg_ex_2_des_item > div h6 {
  color: #e2e2e2;
  font-size: 2rem;
  line-height: 3.4rem;
  word-break: keep-all;
}
