@charset "UTF-8";
li {
  list-style: none;
}

.inner {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 2rem;
}

.visual {
  width: 100%;
  height: 70rem;
  overflow: hidden;
  position: relative;
}
.visual .visual-bg {
  position: absolute;
  top: 0rem;
  left: 0rem;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.visual .visual-bg.vis1 {
  background: url("/static/img/sub/visual1-1.png") no-repeat center;
  background-size: cover;
}
.visual .visual-bg.vis2 {
  background: url("/static/img/sub/visual1-2.png") no-repeat center;
  background-size: cover;
}
.visual .visual-bg.vis3 {
  background: url("/static/img/sub/visual1-3.png") no-repeat center;
  background-size: cover;
}
.visual .visual-bg.vis4 {
  background: url("/static/img/sub/visual1-4.png") no-repeat center;
  background-size: cover;
}
.visual .visual-bg.vis5 {
  background: url("/static/img/sub/visual1-5.png") no-repeat center;
  background-size: cover;
}
.visual .visual-bg.vis6 {
  background: url("/static/img/sub/visual2-1.png") no-repeat center;
  background-size: cover;
}
.visual .visual-bg.vis7 {
  background: url("/static/img/sub/visual2-2.png") no-repeat center;
  background-size: cover;
}
.visual .visual-bg.vis8 {
  background: url("/static/img/sub/visual3-1.png") no-repeat center;
  background-size: cover;
}
.visual .visual-bg.vis9 {
  background: url("/static/img/sub/visual3-2.png") no-repeat center;
  background-size: cover;
}
.visual .visual-bg.vis10 {
  background: url("/static/img/sub/visual3-3.png") no-repeat center;
  background-size: cover;
}
.visual .visual-bg.vis11 {
  background: url("/static/img/sub/visual3-4.png") no-repeat center;
  background-size: cover;
}
.visual .txt-wrap {
  display: flex;
  padding-top: 26rem;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}
.visual .vis-tit {
  font-weight: 600;
  text-align: center;
  color: #fff;
  color: #FFF;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  /* 42px */
}
.visual .line {
  width: 5.7rem;
  height: 0.3rem;
  background-color: #fff;
}
.visual .desc {
  font-weight: 700;
  color: #fff;
  text-align: center;
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  /* 65px */
  text-transform: uppercase;
}

@media all and (max-width: 47.9375rem) {
  .visual {
    width: 100%;
    height: 40rem;
    overflow: hidden;
    position: relative;
  }
  .visual .visual-bg {
    position: absolute;
    top: 0rem;
    left: 0rem;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-size: cover;
  }
  .visual .txt-wrap {
    display: flex;
    padding-top: 13rem;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
  }
  .visual .vis-tit {
    font-weight: 600;
    text-align: center;
    color: #fff;
    color: #FFF;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    /* 42px */
  }
  .visual .line {
    width: 5.7rem;
    height: 0.3rem;
    background-color: #fff;
  }
  .visual .desc {
    font-weight: 700;
    color: #fff;
    text-align: center;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    /* 65px */
    text-transform: uppercase;
  }
}
.sub .tab {
  display: flex;
  justify-content: center;
  gap: 8rem;
  margin-top: 15rem;
}
.sub .tab li {
  position: relative;
}
.sub .tab li a {
  color: #0E3758;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
}
.sub .tab li:after {
  content: "";
  position: absolute;
  top: 0;
  right: -1rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  -ms-border-radius: 999px;
  -o-border-radius: 999px;
  background-color: #0078D9;
  display: none;
}
.sub li.on a {
  color: #0078D9;
}
.sub li.on:after {
  display: block;
}

/* 모바일 */
@media (max-width: 768px) {
  .sub_visual .sub_vis {
    height: 200px;
  }
  .sub_vis_span {
    font-size: 14px;
  }
  .sub_vis_span .sub_vis_span::after {
    width: 40px;
  }
  .sub_vis_tit {
    font-size: 26px;
  }
  .sub .tab {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin: 2rem 0;
  }
  .sub .tab li {
    position: relative;
  }
  .sub .tab li a {
    color: #0E3758;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3;
  }
  .sub .tab li:after {
    content: "";
    position: absolute;
    top: 0;
    right: -1rem;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 999px;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    -ms-border-radius: 999px;
    -o-border-radius: 999px;
    background-color: #0078D9;
    display: none;
  }
  .sub li.on a {
    color: #0078D9;
  }
  .sub li.on:after {
    display: block;
  }
}
.page-title {
  margin: 10px 0 100px;
  font-size: 70px;
  font-weight: 700;
  color: #0E3758;
}

.sub_text {
  margin-top: 10%;
}

.page-cate {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 120px;
  font-size: 16px;
  color: #333;
}
.page-cate img {
  width: 12px;
  height: 12px;
}
.page-cate span {
  white-space: nowrap;
}

.sub_main {
  width: 90%;
  display: flex;
  flex-direction: column;
}

.sub_left nav {
  display: flex;
  flex-direction: column;
}
.sub_left nav ul {
  padding: 0;
  margin: 0;
}
.sub_left nav li {
  font-size: 20px;
  font-weight: 100;
  padding: 10px 0;
}
.sub_left nav a {
  color: #555;
  position: relative;
  transition: 0.2s;
}
.sub_left nav a.active {
  color: #0078D9;
  font-weight: 900;
}
.sub_left nav a.active::before {
  content: "•";
  position: absolute;
  right: -1rem;
  top: 20%;
  transform: translateY(-50%);
  font-size: 15px;
  color: #0078D9;
}
.sub_left h3 {
  font-size: 50px;
  margin: 0;
  font-weight: 600;
  line-height: 50px;
  color: #77C2FF;
}
.sub_left p {
  margin-top: 10px;
  font-weight: 500;
}

.sub_right {
  width: 67%;
}
.sub_right img {
  width: 100%;
  height: auto;
  display: block;
}
.sub_right h3 {
  font-size: 50px;
  color: #77C2FF;
  margin: 50px 0 30px;
  font-weight: 500;
}
.sub_right h4 {
  font-size: 20px;
  margin: 30px 0 10px;
}
.sub_right p {
  color: #000;
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.8;
  /* 39.6px */
}
.sub_right ul li {
  list-style: disc;
}

@media all and (max-width: 47.9375rem) {
  .sub_left nav {
    display: block;
  }
  .sub_left nav ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    justify-content: flex-start;
    margin: 2rem 0;
    gap: 0.2rem;
  }
  .sub_left nav li {
    font-size: 20px;
    font-weight: 100;
    padding: 10px 2rem;
  }
  .sub_left nav a {
    color: #555;
    position: relative;
    transition: 0.2s;
  }
  .sub_left nav a.active {
    color: #0078D9;
    font-weight: 900;
  }
  .sub_left nav a.active::before {
    content: "•";
    position: absolute;
    right: -1rem;
    top: 20%;
    transform: translateY(-50%);
    font-size: 15px;
    color: #0078D9;
  }
  .sub_left h3 {
    font-size: 50px;
    margin: 0;
    font-weight: 600;
    line-height: 50px;
    color: #77C2FF;
  }
  .sub_left p {
    margin-top: 10px;
    font-weight: 500;
  }
}
h5 {
  font-size: 24px;
  margin-bottom: 6rem;
  display: flex;
  gap: 15px;
  align-items: center;
}
h5 > p {
  font-size: 17px;
  font-weight: 500;
}

.layout_desc {
  margin: 15px 0 25px;
  line-height: 1.6;
  color: #555;
}

.factory_wrap {
  width: 100%;
  padding: 12rem 0;
}
.factory_wrap .inner {
  max-width: 1560px;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
}
.factory_wrap .sub_right h3 {
  font-weight: 600;
  padding: 2% 0;
}

@media all and (max-width: 47.9375rem) {
  .factory_wrap {
    width: 100%;
    padding: 4rem 0;
  }
  .factory_wrap .inner {
    max-width: 100%;
    padding: 0 2rem;
    display: block;
    justify-content: space-between;
  }
  .factory_wrap .sub_left {
    width: 100%;
  }
  .factory_wrap .sub_left nav {
    display: block;
  }
  .factory_wrap .sub_right {
    width: 100%;
  }
  .factory_wrap .sub_right h3 {
    font-weight: 600;
    padding: 2% 0;
  }
}
.greeting {
  display: flex;
  justify-content: center;
  background: url(/static/img/sub_1/greeting_b.png) no-repeat center center;
  background-size: cover;
}
.greeting .greeting_wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 5% 0;
}
.greeting .sub_right h5 {
  color: #000;
  font-size: 2.6rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.7;
  /* 44.2px */
}
.greeting .sub_left h3 {
  color: #01589E;
  font-size: 5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  /* 65px */
}
.greeting .sub_left p {
  color: #01589E;
  font-size: 50px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}
.greeting .sub_left {
  font-size: 30px;
  color: #01589E;
  margin: 0;
}

@media all and (max-width: 47.9375rem) {
  .greeting .sub_left {
    width: 100%;
  }
  .greeting .sub_right {
    width: 100%;
  }
  .greeting .greeting_wrap {
    display: block;
  }
}
.organization {
  margin: auto;
  padding: 3% 0;
  height: auto;
}
.organization .organization_img {
  text-align: center;
}
.organization .organization_img img {
  width: 100%;
  max-width: 1920px;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

.business {
  display: flex;
  gap: 50px;
  justify-content: space-between;
  padding: 6rem 0 0;
}
.business .plant_wrap,
.business .shipbuilding_wrap {
  display: flex;
  justify-content: space-between;
  padding: 5% 0;
  margin-bottom: 100px;
}
.business .plant_wrap .inner {
  display: flex;
  justify-content: space-between;
}
.business .plant_text {
  padding: 5% 0;
}
.business .plant_text .plant_span {
  font-weight: 700;
  line-height: 30px;
}
.business .plant_text p {
  line-height: 25px;
}
.business .plant_text .plant-epc {
  padding: 2rem 0;
}
.business .plant_text .plant-epc .inner {
  max-width: 160rem;
  margin: 0 auto;
  padding: 0 2rem;
}
.business .plant_text .plant-epc .section-title {
  font-size: 3.2rem;
  font-weight: 700;
  margin-bottom: 4rem;
}
.business .plant_text .plant-epc .table-wrap {
  border-top: 2px solid #000;
}
.business .plant_text .plant-epc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.5rem;
}
.business .plant_text .plant-epc thead {
  background: #e9e9e9;
}
.business .plant_text .plant-epc thead th {
  padding: 1.6rem;
  text-align: center;
  font-weight: 600;
  border-right: 1px solid #ddd;
}
.business .plant_text .plant-epc thead th:last-child {
  border-right: none;
}
.business .plant_text .plant-epc tbody tr {
  border-bottom: 1px solid #ddd;
}
.business .plant_text .plant-epc tbody td {
  padding: 3rem 2rem;
  vertical-align: top;
  text-align: center;
  border-right: 1px solid #eee;
  line-height: 1.6;
}
.business .plant_text .plant-epc tbody td:last-child {
  border-right: none;
}
.business .plant_text .plant-epc tbody td span {
  display: block;
  font-size: 1.3rem;
  color: #777;
  margin-top: 0.5rem;
}
.business .plant_text .plant-epc tbody .application {
  text-align: left;
}
.business .plant_text .plant-epc tbody .application strong {
  display: block;
  font-weight: 700;
  margin-bottom: 1rem;
}
.business .plant_text .plant-epc tbody .application ul {
  display: flex;
  flex-direction: column;
  padding-left: 0.1rem;
}
.business .plant_text .plant-epc tbody .application ul li {
  color: #666;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  padding: 0;
  margin: 0;
}
.business .plant_text nav,
.business .shipbuilding_text nav {
  display: flex;
}
.business .plant_text ul,
.business .shipbuilding_text ul {
  display: flex;
  justify-content: center;
  width: 50%;
  margin: auto;
  padding: 0;
}
.business .plant_text li,
.business .shipbuilding_text li {
  font-size: 20px;
  font-weight: 300;
  padding: 10%;
  white-space: nowrap;
}
.business .plant_text a,
.business .shipbuilding_text a {
  position: relative;
  padding-right: 7px;
  transition: 0.2s;
  color: #555;
}
.business .plant_text a.active,
.business .shipbuilding_text a.active {
  color: #0078D9;
  font-weight: 600;
}
.business .plant_text a.active::before,
.business .shipbuilding_text a.active::before {
  content: "•";
  position: absolute;
  right: 0;
  top: 20%;
  transform: translateY(-50%);
  font-size: 15px;
  color: #0078D9;
}
.business .plant_text h3,
.business .shipbuilding_text h3 {
  font-size: 45px;
  margin: 0;
  line-height: 50px;
  color: #77C2FF;
}
.business .plant_text p,
.business .shipbuilding_text p {
  margin-top: 10px;
  font-weight: 500;
  color: #000;
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.8;
  /* 39.6px */
}
.business .plant_wrap {
  padding-bottom: 30px;
}
.business .plant_text p,
.business .shipbuilding_text p {
  padding-bottom: 30px;
}

.shipbuilding_wrap .sub_left h3 {
  font-size: 35px;
}
.shipbuilding_wrap .sub_right {
  width: 80%;
}
.shipbuilding_wrap .sub_right .shipbuilding_new,
.shipbuilding_wrap .sub_right .shipbuilding_detail {
  width: 100%;
  display: flex;
  gap: 5px;
}
.shipbuilding_wrap .sub_right .shipbuilding_new li,
.shipbuilding_wrap .sub_right .shipbuilding_detail li {
  list-style: none;
}
.shipbuilding_wrap .sub_right .detail_ul {
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.shipbuilding_wrap .sub_right .detail_ul .shipbuilding_detail {
  width: 70%;
}
.shipbuilding_wrap .sub_right .detail_ul .shipbuilding_detail li {
  display: flex;
  gap: 5px;
}
.shipbuilding_wrap .sub_right .detail_ul .shipbuilding_detail li img {
  width: 100%;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
}
.shipbuilding_wrap .sub_right .shipbuilding_new li {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  margin-bottom: 10px;
}

@media all and (max-width: 85.375rem) {
  .plant-epc table {
    font-size: 1.4rem;
  }
  .plant-epc tbody td {
    padding: 2rem 1.5rem;
  }
}
@media all and (max-width: 47.9375rem) {
  .plant-epc {
    overflow-x: auto;
  }
  .plant-epc table {
    min-width: 900px;
  }
}
@media all and (max-width: 47.9375rem) {
  .plant_text p,
  .shipbuilding_text p {
    margin-top: 10px;
    font-weight: 500;
    color: #000;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 1.8;
    /* 39.6px */
  }
}
.esg {
  padding: 3% 0;
}
.esg .esg_wrap {
  width: 100%;
  flex-direction: row;
  margin-top: 30px;
  gap: 50px;
}
.esg .esg_wrap h3 {
  font-size: 20px;
  color: #77C2FF;
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 55px; /* 110% */
}
.esg .esg_wrap li {
  list-style: none;
  line-height: 25px;
}
.esg .esg_wrap p {
  font-weight: 600;
  line-height: 25px;
  color: #000;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 180%;
  /* 39.6px */
}
.esg .esg_wrap .esg_ul ul {
  display: flex;
  gap: 20px;
}
.esg .esg_wrap .esg_ul ul li {
  flex: 1;
}
.esg .esg_wrap .esg_ul ul p {
  padding: 5px 0;
}
.esg .esg_wrap .esg_ul li {
  padding: 3% 0;
}
.esg .esg_wrap .esg_ul li img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.esg .esg_wrap .esg_ul li h5 {
  padding: 3% 0;
}
.esg .esg_wrap .esg_ul li p {
  padding: 0;
  font-weight: 500;
  padding: 2% 0;
  position: relative;
  padding-left: 1rem;
}
.esg .esg_wrap .esg_ul li p:after {
  content: "";
  position: absolute;
  top: 2rem;
  left: 0;
  width: 0.3rem;
  height: 0.3rem;
  background-color: #000;
  border-radius: 99px;
  -webkit-border-radius: 99px;
  -moz-border-radius: 99px;
  -ms-border-radius: 99px;
  -o-border-radius: 99px;
}
.esg .e_text {
  display: flex;
  gap: 50px;
}
.esg .e_text li {
  list-style: none;
  line-height: 25px;
}
.esg .e_text li::before {
  content: "•";
  font-size: 20px;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
}
.esg .esg_img {
  display: flex;
  flex-direction: column;
  padding: 10rem 0;
}
.esg .esg_img img {
  max-width: 100%;
  margin: 0 auto;
}
.esg h4 {
  text-align: center;
  font-size: 25px;
}
.esg .governance_wrap {
  display: flex;
  justify-content: space-between;
  padding: 7% 0;
}

.bottom_img {
  padding: 40px 0;
}

@media all and (max-width: 47.9375rem) {
  .esg .e_text {
    display: block;
    margin-bottom: 2rem;
  }
  .esg .e_text .sub_left h3 {
    font-size: 24px;
  }
}
.table-container {
  width: 100%;
  margin-top: 20px;
  overflow-x: auto;
  border-collapse: collapse;
  border-top: 1px solid #111;
  padding-bottom: 2px;
}
.table-container thead {
  padding-top: 2px;
  border: none;
}
.table-container th {
  font-size: 16px;
  padding: 10px;
  background: #FAFAFA;
  border-right: 1px solid #E1E1E1;
  border-bottom: 1px solid #E1E1E1;
}
.table-container td {
  padding: 12px 14px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
  color: #666;
  border-right: 1px solid #E1E1E1;
}
.table-container td:first-child {
  color: #111;
  font-weight: 600;
}
.table-container th:last-child {
  border-right: none;
}
.table-container td:last-child {
  border-right: none;
}

.location {
  width: 100%;
  padding: 12rem 0 15rem;
}
.location .inner {
  max-width: 1560px;
  padding: 0 2rem;
  margin: 0 auto;
}
.location ul {
  display: flex;
  justify-content: space-between;
  padding: 0 0 40px;
  margin-top: 60px;
  border-bottom: 1px solid #ebebeb;
}
.location ul li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.location ul li img {
  margin: 0;
}
.location .location_map {
  width: 100%;
  height: 500px;
}
.location #map {
  width: 100%;
  height: 100%;
}

.location_text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 14px;
  font-weight: 700;
  color: #0078D9;
}
.location_text span {
  font-size: 20px;
  color: #111;
  padding-bottom: 15px;
}
.location_text p {
  font-weight: 400;
  color: #666;
}
.location_text b {
  margin-right: 10px;
  color: #111;
}

.location_bus {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 30px;
}
.location_bus p b {
  margin-right: 10px;
}
.location_bus p {
  padding-bottom: 5px;
}

.history_wrap .sub_main {
  width: 100%;
  padding: 0;
}

.history_back {
  width: 100%;
  background-color: #F2F7FC;
}

.history {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding: 70px 0;
  margin: auto;
  border-bottom: 1px solid #eee;
  --line-x: -45px;
  --dot-top: 14px;
  --dot-size: 8px;
  --line-h: 100%;
}
.history img {
  margin-top: 20px;
  width: 100%;
}
.history:last-of-type {
  border-bottom: 0;
}
.history_left {
  width: 40%;
  position: sticky;
  top: 140px;
}
.history_tit {
  width: 100%;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.history_yuil {
  font-weight: 700;
  color: #DE2B26;
  color: #DE2B26;
  font-size: 25px;
  font-style: normal;
  line-height: 1.4;
  /* 35px */
}
.history_range {
  font-family: "Montserrat", sans-serif;
  color: #8D8EA1;
  color: #8D8EA1;
  text-align: right;
  font-size: 70px;
  font-style: normal;
  font-weight: 600;
  line-height: 45px;
  /* 64.286% */
  margin-bottom: 5rem;
}
.history_right {
  width: 50%;
  position: relative;
  padding-left: 64px;
  padding-top: 11rem;
}
.history_right::before {
  content: "";
  position: absolute;
  left: var(--line-x);
  top: 24rem;
  height: 80%;
  width: 1px;
  border-left: 1px dashed #cfcfcf;
}
.history_right::after {
  content: "";
  position: absolute;
  left: calc(var(--line-x) - 7px);
  top: 24rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #DE2B26;
  box-sizing: border-box;
}
.history .history_item::before {
  content: "";
  position: absolute;
  left: calc(var(--line-x) - var(--dot-size) / 2);
  top: 24rem;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: #b9b9b9;
  box-sizing: border-box;
  transition: all 0.25s ease;
}
.history .history_item.past::before {
  background: #DE2B26;
}
.history .history_item.active::before {
  background: #DE2B26;
  transform: scale(1.2);
}
.history_year {
  font-size: 30px;
  font-weight: 800;
  color: #3B2013;
  line-height: 45px;
  font-family: "Montserrat", sans-serif;
}
.history_text {
  font-size: 14px;
  line-height: 1.75;
  color: #666;
}
.history_text li {
  margin-top: 15px;
  font-weight: 600;
  color: #000;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 35px;
  /* 175% */
}
.history_text li p {
  font-weight: 400;
}

.history_item {
  margin: 50px 0;
}
.history_item .history_item.active::before {
  background: #DE2B26;
  transform: scale(1.2);
}

.history_line {
  position: absolute;
  left: var(--line-x);
  top: 0;
  width: 1px;
  height: var(--line-h);
  pointer-events: none;
}

.history_progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 0%;
  background: #DE2B26;
  transition: height 0.12s linear;
}

.history_dot {
  transition: transform 0.2s ease;
}

@media (max-width: 1280px) {
  .page-title {
    font-size: 45px;
  }
  .sub_left h3 {
    font-size: 30px;
  }
  .history.inner {
    padding: 2rem 2rem;
  }
  .history_range {
    font-size: 50px;
  }
}
@media (max-width: 1000px) {
  .greeting .greeting_wrap {
    gap: 50px;
  }
  .sub_right h3 {
    font-size: 40px;
  }
  .sub_text ul {
    gap: 10px;
  }
  .sub_text ul h5 {
    font-size: 15px;
  }
  .sub_text ul p {
    font-size: 13px;
  }
  .plant_wrap,
  .shipbuilding_wrap {
    padding-top: 20px;
  }
  .shipbuilding_wrap {
    justify-content: space-between;
  }
  .shipbuilding_wrap .sub_left h3 {
    font-size: 25px;
  }
  .shipbuilding_wrap .sub_right .shipbuilding_new {
    display: flex;
    gap: 5px;
  }
  .shipbuilding_wrap .sub_right .shipbuilding_new li {
    gap: 7px;
    font-size: 13px;
    list-style: none;
    margin-bottom: 10px;
  }
  .shipbuilding_wrap .sub_right .shipbuilding_new .table-container {
    width: 100%;
  }
  .shipbuilding_wrap .sub_right .shipbuilding_new .table-container th {
    font-size: 10px;
  }
  .shipbuilding_wrap .sub_right .shipbuilding_new .table-container td {
    font-size: 12px;
  }
}
@media (max-width: 786px) {
  .page-title {
    margin: 40px 0 50px;
  }
  .greeting_wrap {
    flex-direction: column;
  }
  .history {
    grid-template-columns: 1fr;
  }
  .location_wrap ul {
    flex-wrap: wrap;
  }
  .sub_visual .sub_vis {
    height: 300px;
  }
  .sub_visual .sub_vis .sub_vis_text {
    padding: 0 20px;
  }
  .sub_visual .sub_vis .sub_vis_text .sub_vis_span {
    font-size: 15px;
    margin-bottom: 30px;
  }
  .sub_visual .sub_vis .sub_vis_text .sub_vis_span::after {
    bottom: -15px;
    width: 40px;
  }
  .sub_visual .sub_vis .sub_vis_text .sub_vis_tit {
    font-size: 25px;
  }
  .sub_left h3 {
    font-size: 18px;
  }
  .greeting .greeting_wrap {
    gap: 0;
  }
  .greeting .greeting_wrap h3 {
    font-size: 25px;
  }
  .greeting .greeting_wrap p {
    font-size: 22px;
    margin: 0;
  }
  .greeting .greeting_wrap .sub_right h5 {
    font-size: 13px;
    margin: 10px 0;
  }
  .greeting .greeting_wrap .sub_right p {
    font-size: 14px;
    line-height: 20px;
  }
  .plant_wrap,
  .shipbuilding_wrap {
    gap: 20px;
  }
  .sub_text ul {
    flex-direction: column;
    gap: 14px;
  }
  .sub_text ul img {
    display: flex;
    height: 200px;
  }
  .shipbuilding_text nav ul,
  .plant_text nav ul {
    width: 50px;
  }
  .shipbuilding_text nav ul li,
  .plant_text nav ul li {
    padding: 0;
  }
  .shipbuilding_wrap {
    justify-content: space-between;
    flex-direction: column;
  }
  .shipbuilding_wrap .sub_left h3 {
    font-size: 23px;
  }
  .shipbuilding_wrap .sub_right {
    width: 100%;
  }
  .shipbuilding_wrap .sub_right .shipbuilding_new {
    width: 100%;
    display: flex;
    gap: 5px;
  }
  .shipbuilding_wrap .sub_right .shipbuilding_new li {
    gap: 7px;
    font-size: 13px;
    list-style: none;
    margin-bottom: 10px;
  }
  .shipbuilding_wrap .sub_right .shipbuilding_new .table-container {
    width: 100%;
  }
  .shipbuilding_wrap .sub_right .shipbuilding_new .table-container th {
    font-size: 10px;
  }
  .shipbuilding_wrap .sub_right .shipbuilding_new .table-container td {
    padding: 3px 3px;
    font-size: 8px;
  }
  .governance_wrap {
    gap: 20px;
  }
  .factory_wrap h3 {
    font-size: 25px;
  }
  .factory_wrap h4 {
    font-size: 15px;
  }
  .esg .esg_wrap .esg_ul ul {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .esg .esg_wrap .esg_ul ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 200px;
    background-color: #0078D9;
  }
  .esg .esg_wrap .esg_ul ul li img {
    width: 100%;
    height: auto;
  }
  .esg .esg_wrap .esg_ul ul li p {
    padding: 0;
  }
  .location_ul ul {
    flex-direction: column;
  }
  .location_ul ul li {
    margin-bottom: 10px;
  }
  .sub_left nav li {
    font-size: 14px;
  }
  .table-container td:first-child {
    font-size: 12px;
  }
  .table-container td {
    font-size: 10px;
  }
  .history_yuil {
    font-size: 15px;
  }
}
@media (max-width: 550px) {
  .inner {
    width: 100%;
    padding: 0 2rem;
  }
  .business .plant_text ul,
  .business .shipbuilding_text ul {
    width: 20%;
    padding-bottom: 20px;
  }
  .business .plant_text ul li,
  .business .shipbuilding_text ul li {
    font-size: 17px;
  }
  .shipbuilding_wrap {
    justify-content: space-between;
    flex-direction: column;
  }
  .shipbuilding_wrap .sub_left h3 {
    font-size: 23px;
  }
  .shipbuilding_wrap .sub_right {
    width: 100%;
  }
  .shipbuilding_wrap .sub_right .shipbuilding_new {
    width: 100%;
    display: flex;
    gap: 5px;
  }
  .shipbuilding_wrap .sub_right .shipbuilding_new li {
    gap: 7px;
    font-size: 8px;
    list-style: none;
    margin-bottom: 10px;
  }
  .shipbuilding_wrap .sub_right .shipbuilding_new .table-container {
    width: 100%;
  }
  .shipbuilding_wrap .sub_right .shipbuilding_new .table-container th {
    font-size: 8px;
  }
  .shipbuilding_wrap .sub_right .shipbuilding_new .table-container td {
    padding: 2px 2px;
    font-size: 5px;
  }
}
@media (max-width: 470px) {
  .inner {
    width: 100%;
    padding: 0 2rem;
  }
  .page-title {
    font-size: 20px;
    margin: 15px 0 50px;
  }
  .factory_wrap .sub_left {
    width: 20%;
  }
  .factory_wrap .sub_left nav li {
    padding: 5px 0;
  }
  .factory_wrap .sub_left nav li a {
    font-size: 10px;
  }
  .factory_wrap .sub_left nav a {
    font-size: 8px;
    white-space: nowrap;
  }
  .factory_wrap .sub_right {
    width: 100%;
  }
  .factory_wrap .sub_right h3 {
    font-size: 20px;
    margin-left: 1px;
  }
  .sub_visual .sub_vis {
    height: 150px;
  }
  .sub_visual .sub_vis .sub_vis_text {
    padding: 0 20px;
  }
  .sub_visual .sub_vis .sub_vis_text .sub_vis_span {
    font-size: 12px;
    margin-bottom: 20px;
  }
  .sub_visual .sub_vis .sub_vis_text .sub_vis_span::after {
    bottom: -10px;
    width: 30px;
  }
  .sub_visual .sub_vis .sub_vis_text .sub_vis_tit {
    font-size: 20px;
    font-weight: 600;
  }
  .table-container th {
    font-weight: 600;
    font-size: 12px;
    padding: 3% 0;
  }
  .table-container td {
    font-size: 10px;
    padding: 4% 2%;
  }
  .table-container td:first-child {
    width: 60px;
    font-size: 10px;
    margin-right: 3px;
    font-weight: 600;
  }
  .location_wrap ul {
    flex-wrap: wrap;
  }
  .sub_left h3 {
    font-size: 20px;
  }
  .greeting .greeting_wrap {
    gap: 0;
  }
  .greeting .greeting_wrap h3 {
    font-size: 25px;
  }
  .greeting .greeting_wrap p {
    font-size: 22px;
    margin: 0;
  }
  .greeting .greeting_wrap .sub_right h5 {
    font-size: 13px;
    margin: 10px 0;
  }
  .greeting .greeting_wrap .sub_right p {
    font-size: 11px;
    line-height: 20px;
  }
  .business .plant_text h4 {
    font-size: 15px;
  }
  .business .plant_text p {
    font-size: 13px;
  }
  .business .plant_text nav {
    padding-bottom: 5%;
  }
  .business .plant_text nav ul {
    gap: 10px;
  }
  .business .plant_text nav ul li {
    padding: 0;
    font-size: 16px;
  }
  .business .shipbuilding_text ul {
    padding: 3% 0;
  }
  .business .shipbuilding_text ul li {
    font-size: 13px;
  }
  .business .shipbuilding_text p {
    font-size: 10px;
  }
  .shipbuilding_wrap {
    justify-content: space-between;
    flex-direction: column;
  }
  .shipbuilding_wrap .sub_left h3 {
    font-size: 23px;
  }
  .shipbuilding_wrap .sub_right {
    width: 100%;
  }
  .shipbuilding_wrap .sub_right .shipbuilding_new {
    width: 100%;
    display: flex;
    gap: 5px;
  }
  .shipbuilding_wrap .sub_right .shipbuilding_new li {
    gap: 7px;
    font-size: 8px;
    list-style: none;
    margin-bottom: 10px;
  }
  .shipbuilding_wrap .sub_right .shipbuilding_new .table-container {
    width: 100%;
  }
  .shipbuilding_wrap .sub_right .shipbuilding_new .table-container th {
    font-size: 8px;
  }
  .shipbuilding_wrap .sub_right .shipbuilding_new .table-container td {
    padding: 2px 2px;
    font-size: 5px;
  }
  .shipbuilding_wrap .sub_right .detail_ul .shipbuilding_detail {
    width: 60%;
  }
  .shipbuilding_wrap .sub_right .detail_ul .shipbuilding_detail li img {
    width: 100%;
    height: 150px;
  }
  .plant_table h4 {
    font-size: 15px;
  }
  .governance_wrap .sub_right {
    font-size: 12px;
  }
  .sub_social {
    margin-left: 20px;
  }
  .esg .esg_wrap {
    width: 100%;
  }
  .esg .esg_wrap p {
    font-size: 14px;
  }
  .esg .esg_text h3 {
    font-size: 20px;
  }
  .esg .esg_img img {
    height: 300px;
  }
  .history {
    gap: 30px;
  }
  .history_right {
    padding: 0;
  }
  .history_left {
    width: 50%;
  }
  .history_range {
    font-size: 17px;
  }
  .history_year {
    font-size: 15px;
  }
  .history_item {
    margin: 10px 0;
  }
  .history_text li {
    font-size: 16px;
    font-weight: 550;
    margin: 2px;
  }
}
@media all and (max-width: 47.9375rem) {
  .history {
    display: block;
    padding: 0 2rem;
  }
  .history_left {
    width: 100%;
  }
  .history_right {
    width: 100%;
    padding-left: 0;
  }
  .history_tit {
    margin-top: 2rem;
  }
  .history_range {
    font-size: 50px;
  }
  .history_right::after {
    display: none;
  }
}/*# sourceMappingURL=sub.css.map */