section h3 {
  color: #222;
  font-size: 20px;
  font-weight: 700;
}
section h3 sub {
  color: #222;
  font-size: 16px;
  font-weight: 700;
}

.visual_wrap .title sub {
  font-size: 18px;
}

.visual_wrap .title span {
  font-size: 40px;
  font-weight: 700;
}

.visual_wrap .title p {
  color: #707070;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.48px;
  margin-top: 15px;
}

.main_wrap {
  opacity: 0;
  transform: translateY(100px);
  animation: visual 0.5s ease forwards;
}

.main_wrap ul {
  width: 100%;
  height: 365px;
  padding: 0 var(--main-padding);
  display: flex;
}

.main_wrap ul li {
  width: calc(100% / 3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 30px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 0.45s ease, width 0.45s ease 0.15s;
}

.main_wrap ul li.is_hover {
  width: 67%;
}
.main_wrap ul li.is_unhover {
  width: 16.5%;
}

.main_wrap ul li:nth-child(1) {
  background-image: url(../images/main/contents_img01_test.png);
}
.main_wrap ul li:nth-child(2) {
  background-image: url(../images/main/contents_img02_test.png);
}
.main_wrap ul li:nth-child(3) {
  background-image: url(../images/main/contents_img03_test.png);
}
.main_wrap ul li.is_hover:nth-child(1) {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/main/contents_img01_test.png);
}
.main_wrap ul li.is_hover:nth-child(2) {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/main/contents_img02_test.png);
}
.main_wrap ul li.is_hover:nth-child(3) {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/main/contents_img03_test.png);
}

.main_wrap ul li * {
  transition: 0.45s ease;
}

.main_wrap ul li span {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -1.8px;
  margin: 10px 0 10px;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.main_wrap ul li a {
  display: flex;
  padding: 10px 20px;
  justify-content: center;
  align-items: center;
  border-radius: 40px;
  background: #fff;
  backdrop-filter: blur(2px);
  color: #222;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.72px;
}

.main_wrap ul li p {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.64px;
  overflow: hidden;
  max-height: 0;
  max-width: 70%;
  opacity: 0;
  transition: max-height 0.75s ease 0.45s, opacity 0.75s ease 0;
}

.main_wrap ul li.is_hover a {
  margin-top: 15px;
  transition: 0.6s ease 0.45s;
  pointer-events: all;
}

.main_wrap ul li.is_hover p {
  max-height: 200px;
  opacity: 1;
  transition: max-height 0.75s ease 0.45s, opacity 0.75s ease 0.45s;
}

.main_wrap ul li.is_unhover span {
  font-size: 20px;
}

.main_wrap ul li.is_unhover a {
  opacity: 0;
}

.industry_wrap {
  padding: 0 var(--main-padding);
  margin-top: 70px;
  opacity: 0;
  transform: translateY(100px);
  animation: visual 0.5s 0.25s ease forwards;
}

.industry_wrap h3 {
  margin-bottom: 40px;
}

.industry_wrap ul {
  display: flex;
  gap: 20px;
}
.industry_wrap ul li {
  display: flex;
  flex-direction: column;
  width: calc((100% - 60px) / 4);
  position: relative;
  padding-bottom: 70px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.industry_wrap ul li span {
  color: #222;
  font-size: 18px;
  font-weight: 800;
  margin-top: 20px;
  padding: 0 10px;
}

.industry_wrap ul li p {
  color: #707070;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.28px;
  margin-top: 10px;
  padding: 0 10px;
  display: none;
}

.industry_wrap ul li a {
  color: #222;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  border-radius: 25px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  padding: 2.5px 10px;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 5px;
  position: absolute;
  bottom: 15px;
  left: 10px;
  z-index: 2;
  background: #fff;
  transition: 0.35s ease;
}

.industry_wrap ul li a:hover {
  color: #3d9898;
  border: 1px solid transparent;
}

.industry_wrap ul li::before {
  width: 100%;
  height: 100%;
  background: rgba(20, 101, 101, 0.8);
  backdrop-filter: blur(10px);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.96px;
  padding: 20px;
  box-sizing: border-box;

  transition: 0.35s ease;
}
.industry_wrap ul li:hover::before {
  opacity: 1;
}

.industry_wrap ul li:nth-child(1)::before {
  content: "현대 조선산업의 복잡성과 규제 강화에 대응하기 위해, Siemens는 통합 설계 및 엔지니어링을 통해 설계 효율성과 협업을 향상시키는 디지털 접근 방식을 제시합니다.";
}
.industry_wrap ul li:nth-child(2)::before {
  content: "IMO 규제 대응을 위해, Siemens는 시뮬레이션 기반 선박 설계로 연료 효율을 높이고 설계부터 운영까지 안정성과 생산성을 강화합니다.";
}
.industry_wrap ul li:nth-child(3)::before {
  content: "지속가능성, 자율운항, 디지털 기술은 조선 산업의 판도를 바꾸고 있습니다. 조선소는 설계부터 운영까지 디지털 혁신을 통해 미래 경쟁력을 확보해야 합니다.";
}
.industry_wrap ul li:nth-child(4)::before {
  content: "Siemens Xcelerator Marine Engineering은 디지털 트윈 기반의 차세대 조선해양 솔루션입니다. 설계 최적화와 지속적 검증으로 비용을 절감하고, 친환경 선박 구현을 지원하며 다분야 통합 협업으로 프로젝트 효율성을 높입니다. 디지털 혁신으로 조선산업의 미래 경쟁력을 선도합니다";
}

.figure_wrap {
  padding: 0 var(--main-padding);
  margin-top: 80px;
  margin-bottom: 40px;
}

.figure_wrap h3 {
  margin-bottom: 80px;
}

.figure_wrap ul.value_list {
  display: flex;
  align-items: flex-start;
}

.figure_wrap ul.value_list li {
  width: 33.3333%;
  display: flex;
  flex-direction: column;
  padding: 0 30px 50px;
}

.figure_wrap ul.value_list li span,
.figure_wrap ul.value_list li strong {
  color: #0ba3cd;
}

.figure_wrap ul.value_list li span {
  font-size: 16px;
  font-weight: 700;
  line-height: 136.2%; /* 21.792px */
  letter-spacing: -0.64px;
}

.figure_wrap ul.value_list li strong {
  font-size: 90px;
  font-weight: 700;
  letter-spacing: -3.72px;
  display: flex;
  align-items: center;
}

.figure_wrap ul.value_list li:nth-child(1) strong::after {
  content: "%";
}
.figure_wrap ul.value_list li:nth-child(2) strong::after {
  content: "MM";
}
.figure_wrap ul.value_list li:nth-child(3) strong::after {
  content: "th";
}

.figure_wrap ul li strong::after {
  transform: translateX(-30px);
  opacity: 0;
  transition: 0.75s ease-in-out 0.5s;
}

.figure_wrap ul.value_list li strong::after {
  color: #0ba3cd;
  font-size: 39px;
  font-weight: 700;
  line-height: 2;
  transform: translateX(-30px) translateY(5px);
  margin-left: 10px;
}

.figure_wrap.visible ul.value_list li strong::after {
  transform: translateX(0px) translateY(5px);
  opacity: 1;
}

.figure_wrap ul.value_list li p {
  color: #222;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.42px;
}

.figure_wrap.visible ul.value_list li strong img {
  margin-right: 10px;
}

.figure_wrap ul.value_list li strong mark {
  color: inherit;
  transform: translateX(-30px);
  opacity: 0;
  transition: 0.75s ease-in-out 0.5s;
}

.figure_wrap.visible ul.value_list li strong mark {
  transform: translateX(0px);
  opacity: 1;
}

.figure_wrap.visible ul li mark {
  display: inline-block;
  height: 90px;
  overflow: hidden;
  position: relative;
}

.figure_wrap ul li .roller-inner:last-child {
  padding-right: 3px;
}

.figure_wrap.visible ul li .roller-inner {
  position: relative;
  transition: transform 1.5s ease-in-out;
}

.figure_wrap.visible ul li mark sub {
  display: block;
  height: 90px;
  line-height: 1;
  text-align: center;
}

.case_wrap {
  padding: 0 var(--main-padding);
  margin-bottom: 80px;
}
.case_wrap h3 {
  margin-bottom: 40px;
}

.case_wrap ul.contents_list {
  display: flex;
  gap: 1px;
}
.case_wrap ul.contents_list li {
  display: flex;
  flex-direction: column;
  width: calc(100% / 3);
  position: relative;
  padding-bottom: 60px;
}

.case_wrap ul.contents_list li span {
  color: #222;
  font-size: 18px;
  font-weight: 800;
  margin-top: 20px;
  padding: 0 10px;
}

.case_wrap ul.contents_list li p {
  color: #222;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.28px;
  margin-top: 10px;
  padding: 0 10px;
}

.case_wrap ul.contents_list li a {
  color: #3d9898;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  /* border-radius: 25px; */
  /* border: 1px solid rgba(0, 0, 0, 0.3); */
  padding: 2.5px 10px;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 5px;
  position: absolute;
  bottom: 15px;
  /* left: 10px; */
  z-index: 2;
  background: #fff;
  border-radius: 50px;
  transition: 0.35s ease;
}

.case_wrap ul.contents_list li a:hover {
  color: #fff;
  background: #00cccc;
  /* transform: translateX(10px); */
}

@media (max-width: 1440px) {
  .main_wrap ul li {
    padding: 20px;
  }
  .main_wrap ul li.is_hover {
    width: 60%;
  }
  .main_wrap ul li.is_unhover {
    width: 20%;
  }

  .main_wrap ul li span {
    font-size: 24px;
  }
  .main_wrap ul li.is_unhover span {
    font-size: 18px;
  }

  .industry_wrap ul li p {
    display: block;
  }

  .industry_wrap ul li::before {
    display: none;
  }

  .industry_wrap ul li a:hover {
    border: 1px solid #3d9898;
  }
}

@media (max-width: 1024px) {
  .industry_wrap h3,
  .figure_wrap h3,
  .case_wrap h3 {
    margin-bottom: 20px;
  }

  .visual_wrap .title span {
    font-size: 32px;
  }

  .main_wrap ul {
    flex-direction: column;
    height: fit-content;
  }

  .main_wrap ul li {
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  .main_wrap ul li.is_hover {
    width: 100%;
  }
  .main_wrap ul li.is_unhover {
    width: 100%;
  }

  .main_wrap ul li span {
    flex-direction: row;
    align-items: center;
    font-size: 20px;
  }

  .main_wrap ul li.is_unhover span {
    font-size: 20px;
  }

  .main_wrap ul li span br {
    display: none;
  }

  .main_wrap ul li a {
    padding: 7.5px 15px;
  }

  .main_wrap ul li p {
    text-align: center;
    max-width: 100%;
  }

  .main_wrap ul li:nth-child(1) {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/main/contents_img01_test.png);
  }
  .main_wrap ul li:nth-child(2) {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/main/contents_img02_test.png);
  }
  .main_wrap ul li:nth-child(3) {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/main/contents_img03_test.png);
  }

  .industry_wrap ul {
    flex-wrap: wrap;
  }
  .industry_wrap ul li {
    width: calc((100% - 20px) / 2);
  }

  .industry_wrap ul li img {
    max-height: 180px;
    object-fit: cover;
  }

  .figure_wrap ul.value_list {
    flex-direction: column;
  }

  .figure_wrap ul.value_list li:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  .figure_wrap ul.value_list li {
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .figure_wrap ul.value_list li p br {
    display: none;
  }
  .case_wrap ul.contents_list {
    margin-top: 30px;
  }

  .case_wrap ul.contents_list {
    flex-wrap: wrap;
  }
  .case_wrap ul.contents_list li {
    width: calc((100% - 1px) / 2);
  }

  .industry_wrap ul li::before {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .visual_wrap .title span {
    font-size: 26px;
    margin-top: 10px;
  }

  .visual_wrap .title p br {
    display: none;
  }

  .main_wrap ul li span {
    flex-direction: column;
    text-align: center;
  }
  .main_wrap ul li span br {
    display: block;
  }

  .main_wrap ul li.is_hover p {
    font-size: 14px;
  }

  .industry_wrap ul li {
    width: 100%;
  }

  .case_wrap ul.contents_list li {
    width: 100%;
  }

  .case_wrap ul.contents_list li img {
    max-height: 180px;
  }

  .figure_wrap ul.value_list li strong {
    font-size: 72px;
  }

  .figure_wrap.visible ul li mark,
  .figure_wrap.visible ul li mark sub {
    height: 60px;
  }
}