@charset "UTF-8";
:root {
  --color-main: #15254F;
  --color-subD: #1A3B92;
  --color-subL: #48AFFF;
}

.font28 {
  --fontsize: 2.8rem;
  font-size: var(--fontsize);
}

.font32 {
  --fontsize: 3.2rem;
  font-size: var(--fontsize);
}

.font35 {
  --fontsize: 3.5rem;
  font-size: var(--fontsize);
}

.font40 {
  --fontsize: 4.0rem;
  font-size: var(--fontsize);
}

.font55 {
  --fontsize: 5.5rem;
  font-size: var(--fontsize);
}

.font70 {
  --fontsize: 7.0rem;
  font-size: var(--fontsize);
}

.font90 {
  --fontsize: 9.0rem;
  font-size: var(--fontsize);
}

#sv {
  width: 100%;
  height: 706px;
  position: relative;

  height: 500px;
}

#sv.sv01 .bg {
  background-image: url("/img/sub/subVisual1.jpg");
}

#sv.sv02 .bg {
  background-image: url("/img/sub/subVisual2.jpg");
}

#sv.sv03 .bg {
  background-image: url("/img/sub/subVisual3.jpg");
}

#sv.sv04 .bg {
  background-image: url("/img/sub/subVisual4.jpg");
}

#sv.sv05 .bg {
  background-image: url("/img/sub/subVisual5.jpg");
}

#sv.sv06 .bg {
  background-image: url("/img/sub/subVisual6.jpg");
}

#sv.sv07 .bg {
  background-image: url("/img/sub/subVisual7.jpg");
}

#sv.sv08 .bg {
  background-image: url("/img/sub/subVisual8.jpg");
}

#sv.sv09 .bg {
  background-image: url("/img/sub/subVisual9.jpg");
}

#sv.sv010 .bg {
  background-image: url("/img/sub/subVisual10.jpg");
}

#sv .bgBox,
#sv .bg,
#sv .flexBox {
  width: 100%;
  height: 100%;
}

#sv .bgBox {
  z-index: -1;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#sv .bg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(1.12);
          transform: translate(-50%, -50%) scale(1.12);
  -webkit-transition: all 1.2s linear;
  transition: all 1.2s linear;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

#sv .w1500 {
  position: relative;
}

#sv .flexBox {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 0 0 180px;

  padding: 0 0 160px;
}

#sv h2 {
  color: #ffffff;
  font-weight: 700;
  line-height: 1.1111;
  margin: auto 0 0;
  opacity: 0;
  -webkit-transform: translateY(-60px);
          transform: translateY(-60px);
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
}

#sv .pathBox {
  gap: 0 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#sv .pathBox * {
  color: #ffffff;
}

#sv .pathBox a {
  font-size: 1.7rem;
}

#sv .lnbBox {
  width: 100%;
  height: 140px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.11);
  position: absolute;
  left: 50%;
  bottom: -20px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;

  height: 100px;
  bottom: -2px;
}

#sv .lnbBox::before {
  content: "";
  display: block;
  width: calc(100% + 200px);
  height: 100%;
  background: #ffffff;
  border-radius: 10px 10px 0 0;
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#sv .lnbBox > a {
  display: inline-block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 190px;
  color: #111111;
  font-size: 2.4rem;
  font-weight: 700;
}

#sv #lnb {
  gap: 0 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#sv #lnb > li > a {
  display: inline-block;
  color: #999;
  font-size: 1.8rem;
  font-weight: 500;
  position: relative;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  font-family: 'pretendard',
 sans-serif;
}

#sv #lnb > li > a::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: var(--color-subD);
  position: absolute;
  left: 0;
  bottom: -60px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;


  bottom: -40px;
}

#sv #lnb > li:hover > a, #sv #lnb > li.on > a {
  color: #111111;
}

#sv #lnb > li:hover > a::after, #sv #lnb > li.on > a::after {
  width: 100%;
}

#sv.on .bg {
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}

#sv.on h2 {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.subPage {
  padding: 150px 0;
}

.subPage h3 {
  color: #111111;
  font-weight: 700;
  line-height: 1.2727;
}

.subPage h3 em {
  color: var(--color-subD);
}

.subTitle {
  text-align: center;
  margin: 0 0 80px;
}

.subTitle p {
  color: #333333;
  font-size: 1.8rem;
  line-height: 1.6666;
  margin: 30px 0 0;
}

.more {
  width: 218px;
  height: 78px;
  background: #EDEDED;
  border-radius: 100px;
  color: #333333;
  font-size: 2.0rem;
  margin: 110px auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.overview .column {
  gap: 140px 0;
}

.overview .itemBox {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  gap: 30px 25px;
}

.overview .itemBox .item {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: #EDF2F9;
  border-radius: 10px;
  padding: 65px 0 55px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.overview .itemBox .icon {
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.overview .itemBox dl {
  text-align: center;
  margin: 40px 0 0;
}

.overview .itemBox dl * {
  font-family: 'pretendard',
 sans-serif;
}

.overview .itemBox dl dt {
  color: #111111;
  font-size: 2.8rem;
  font-weight: 700;
  margin: 0 0 15px;
}

.overview .itemBox dl dt em {
  font-weight: 400;
}

.overview .itemBox dl dd {
  font-size: 1.8rem;
  font-weight: 500;
}

.overview .chartBox * {
  font-family: 'pretendard',
 sans-serif;
}

.overview .chartBox .chart {
  border-bottom: 1px solid #BEBEBE;
  padding: 42.35% 0 0;
  position: relative;
}

.overview .chartBox .chart::before {
  content: "";
  display: block;
  background: url("/img/sub/chartGrid.png") no-repeat center/100% 100%;
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.overview .chartBox .dark span,
.overview .chartBox .dark li {
  background: #1A3B92;
}

.overview .chartBox .light span,
.overview .chartBox .light li {
  background: #B4C7E7;
}

.overview .chartBox .labels,
.overview .chartBox .labels p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.overview .chartBox .labels {
  gap: 0 40px;
  position: absolute;
  top: 16px;
  left: 30px;
}

.overview .chartBox .labels p {
  gap: 0 6px;
  color: #111111;
  font-size: 1.8rem;
  font-weight: 500;
}

.overview .chartBox .labels span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.overview .chartBox .bar,
.overview .chartBox .bar ul {
  width: 100%;
  height: 100%;
}

.overview .chartBox .bar {
  max-width: 90%;
  position: absolute;
  bottom: 0;
}

.overview .chartBox .bar .line {
  width: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.overview .chartBox .bar ul {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[11];
      grid-template-columns: repeat(11, 1fr);
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0 7.2%;
}

.overview .chartBox .bar ul li {
  width: 100%;
  height: 0;
  border-radius: 100px 100px 0 0;
  opacity: 0;
}

.overview .chartBox .bar em {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 500;
  position: absolute;
  -webkit-transform: rotate(-90deg) translateX(-30px);
          transform: rotate(-90deg) translateX(-30px);
  -webkit-transform-origin: center;
          transform-origin: center;
}

.overview .chartBox .darkBar {
  left: 48px;
}

.overview .chartBox .darkBar .line {
  top: 37%;
}

.overview .chartBox .darkBar em {
  color: #ffffff;
}

.overview .chartBox .lightBar {
  left: 87px;
}

.overview .chartBox .lightBar .line {
  top: -7px;
}

.overview .chartBox .lightBar em {
  color: #15254F;
}

.overview .chartBox .year {
  width: 100%;
  max-width: 96.5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 25px 0 0 18px;
}

.overview .chartBox .year li {
  width: 100%;
  color: #333333;
  font-size: 1.8rem;
  font-weight: 500;
  text-align: center;
}

.history * {
  font-family: 'pretendard',
 sans-serif;
}

.history ul {
  gap: 0 35px;
  margin: 0 0 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.history ul .dot {
  width: 4px;
  height: 4px;
  background: #d9d9d9;
  border-radius: 50%;
}

.history ul button {
  color: #111111;
  font-size: 2.3rem;
  font-weight: 700;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.history ul li:hover button, .history ul li.on button {
  color: var(--color-subD);
}

.history .itemBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 160px 0;
}

.history .bg {
  position: relative;
  padding: 14.65% 0;
}

.history .bg.bg1 {
  background-image: url("/img/sub/historyImg1.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.history .bg.bg2 {
  background-image: url("/img/sub/historyImg2.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.history .bg.bg3 {
  background-image: url("/img/sub/historyImg3.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.history .bg dl {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.history .bg dl * {
  color: #ffffff;
  font-weight: 700;
}

.history .bg dl dt {
  font-size: 6.0rem;
  margin: 0 0 20px;
}

.history .textBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 90px 0 0;
}

.history .textBox > * {
  width: 50%;
}

.history .textBox span {
  display: block;
  color: #111111;
  font-size: 8.5rem;
  font-weight: 700;
}

.history .textBox .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px 0;
}

.history .textBox dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.history .textBox dl dt {
  width: 105px;
  color: #111111;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.45;
}

.history .textBox dl dd p {
  color: #333333;
  font-size: 1.8rem;
  line-height: 2.2222;
}

.team .imgBox {
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.team .imgBox .img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.team .imgBox img {
  min-width: 100%;
  min-height: 100%;
  max-height: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.team h4,
.team h5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  color: #111111;
  font-weight: 700;
}

.team h4.center {
  text-align: center;
  margin:80px 0 30px;
  justify-content: center;
}
.team .dlBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.team dl dt {
  font-weight: 700;
  margin: 0 0 15px;
}

.team dl p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 10px;
}

.team dl p::before {
  content: "·";
}

.ceo .itemBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  justify-content: center;
}

.ceo .itemBox > div {
/*  width: 50%;*/
}

.ceo .imgBox {
  padding: 19.35% 0;
  margin: 0 90px 0 0;

  width: 100%;
  max-width: 345px;
  height: 460px;
  padding: 0;
  overflow: hidden;
}

.ceo .text {
  padding: 35px 0 0;
}

.ceo h4 {
  gap: 0 15px;
  margin: 0 0 55px;
}

.ceo h4 em {
  color: #333333;
  font-size: 2.2rem;
  font-weight: 400;
}

.ceo .dlBox {
  gap: 50px 0;
}

.ceo dl dt {
  color: var(--color-subD);
  font-size: 2.5rem;
}

.ceo dl p {
  color: #333333;
  font-size: 1.8rem;
  line-height: 1.9444;
}

.member .itemBox {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
  gap: 60px 40px;

  display: flex;
  flex-wrap: wrap;
 /*  justify-content: center; */

  /* 23.09.26 */
  max-width: 1115px;
  margin: 0 auto;
}

.member .item {
  width: calc((100% - 120px) / 4);

  /* 23.09.26 */
  width: calc((100% - 80px) / 3)
}

.member .imgBox {
  padding: 0;
}

.member .imgBox .img {
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.member .text {
  margin: 30px 0 0;
}

.member h5 {
  gap: 0 10px;
  margin: 0 0 10px;
}

.member h5 em {
  color: var(--color-subD);
  font-size: 2.0rem;
  font-weight: 600;
}

.member p {
  color: #333333;
  font-size: 1.5rem;
}

.member .dlBox {
  min-height: 460px;
  max-height: 460px;
  gap: 25px 0;
  background: var(--color-subD);
  padding: 30px 25px;
  opacity: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

.member .dlBox::-webkit-scrollbar {
  width: 0;
}

.member dl * {
  color: #ffffff;
}

.member dl dt {
  font-size: 2.2rem;
}

.member dl p {
  font-size: 1.6rem;
  line-height: 1.6875;
}

.member .item:hover .dlBox {
  opacity: 1;
}

/* 구성원 - 전체보기 */
.team.team2 .itemBox .item:nth-of-type(9){ 
  margin-right: 120px;
}

/* 구성원 - 투자본부 */
.member[data-idx="2"] .itemBox .item:nth-of-type(9){ 
  margin-right: 120px;
}

.portfolio .itemBox {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[5];
      grid-template-columns: repeat(5, 1fr);
  gap: 30px;
}

.portfolio .item {
  display: flex;
  flex-direction: column;
  background: #f4f4f4;
  border: 1px solid #E2E2E2;
  border-radius: 10px;
  overflow: hidden;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;

  position: relative;
}

.portfolio .item span {
  display: flex;
  align-items: center;
  justify-content: center;
/*  width: 70px;*/
/*  height: 30px;*/
/*  border-radius: 50px;*/
/*  background: #d9d9d9;*/
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;

  width: 55px;
  height: 20px;
  background: #fff;
}

.portfolio .logo {
  width: 100%;
  flex-shrink: 0;
  background: #ffffff;
  position: relative;
  padding: 35.5% 0;
}

.portfolio .logo img {
  max-width: calc(100% - 40px);
  max-height: 130px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.portfolio .text {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 25px;
}

.portfolio .text * {
  letter-spacing: -0.020em;
}

.portfolio .text p {
  margin: 0 0 60px;
}

.portfolio .text a {
  gap: 0 6px;
  color: #333333;
  font-size: 1.4rem;
  font-weight: 500;
  margin: 75px 0 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: auto 0 0;
}

.portfolio .text i {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.portfolio h6 {
  color: #111111;
  font-size: 2.3rem;
  font-weight: 700;
  margin: 0 0 10px;
}

.portfolio p {
  color: #333333;
  font-size: 1.8rem;
  line-height: 1.3;
}

.portfolio .item:hover {
  border-color: var(--color-subD);
}

.portfolio .item:hover .text a {
  color: var(--color-subD);
}

.portfolio .item:hover .text i {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.stewardship * {
  font-family: 'pretendard',
 sans-serif;
}

.stewardship .dlBox {
  max-width: 825px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px 0;
  background: #f2f2f2;
  border-radius: 10px;
  color: #333333;
  padding: 20px 0;
  margin: 25px auto 0;
}

.stewardship .dlBox dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

.stewardship .dlBox dl * {
  line-height: 1.2;
}

.stewardship .dlBox dl dt {
  font-weight: 600;
}

.stewardship .textBox {
  border-top: 1px solid #1A3B92;
}

.stewardship .number {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid #DADADA;
  padding: 20px;
  cursor: pointer;
}

.stewardship .number * {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.6;
}

.stewardship .number em {
  display: block;
  width: 70px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: var(--color-subD);
}

.stewardship .number p {
  color: #111111;
}

.stewardship .info {
	display: none;
}

.stewardship .pBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px 0;
  background: #F9F9F9;
  border-bottom: 1px solid #DADADA;
  padding: 30px 90px 60px;
}

.stewardship .pBox p {
  color: #333333;
  font-size: 1.8rem;
  line-height: 1.6666;
}

.ethical * {
  font-family: 'pretendard',
 sans-serif;
}

.ethical .subFlex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 12%;
}

.ethical .tab {
  width: 295px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border-top: 1px solid var(--color-subD);
}

.ethical .tab li {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-bottom: 1px solid #DADADA;
  padding: 25px 20px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ethical .tab button {
  color: #111111;
  font-size: 1.9rem;
  font-weight: 700;
}

.ethical .tab button i {
  position: absolute;
  top: 50%;
  right: 60px;
  opacity: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.ethical .tab li:hover button,
.ethical .tab li.on button {
  color: var(--color-subD);
}

.ethical .tab li:hover i,
.ethical .tab li.on i {
  right: 20px;
  opacity: 1;
}

.ethical .tab.fixed {
  position: fixed;
  top: 20px;
}

.ethical .textBox,
.ethical .dlBox,
.ethical dl dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.ethical .textBox {
  width: 100%;
  max-width: 1025px;
  gap: 120px 0;
  margin: 0 0 0 auto;
}

.ethical h4,
.ethical h5 {
  color: #111111;
}

.ethical h4 {
  font-weight: 700;
}

.ethical h5 {
  font-weight: 600;
  margin: 50px 0 -20px;
}

.ethical .dlBox {
  gap: 40px 0;
  margin: 50px 0 0;
}

.ethical dl dt {
  color: #111111;
  font-size: 2.0rem;
  font-weight: 700;
  margin: 0 0 20px;
}

.ethical dl dd {
  gap: 20px 0;
}

.ethical dl dd p {
  color: #333333;
  font-size: 1.8rem;
  line-height: 1.6666;
}

.ethical .check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 5px;
}

.ethical .check::before {
  content: "";
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 17px;
  height: 17px;
  padding: 1px;
  background: url("/img/sub/codeCheck.png") no-repeat center/15px 15px;
  margin: 5px 0 0;
}

.contact * {
  font-family: 'pretendard',
 sans-serif;
}

.contact .mapBox {
  width: 100%;
  height: 650px;
}

.contact .root_daum_roughmap,
.contact iframe {
  width: 100%;
  height: 100%;
}

.contact .root_daum_roughmap .wrap_map {
  height: 100%;
}

.contact .infoBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 115px;
  margin: 60px 0 0;
}

.contact .logo {
  width: 284px;
  height: 38px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.contact ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 20px 40px;
}

.contact ul li {
  gap: 0 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.contact ul .icon {
  width: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.contact ul h6 {
  color: #111111;
  font-size: 2.0rem;
  font-weight: 700;
}

.contact ul p {
  color: #333333;
  font-size: 1.8rem;
}