@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700;900&display=swap");
@import url("https://fonts.cdnfonts.com/css/myriad-pro");

@font-face {
  font-family: "Elephant";
  src: url("../font/Elephant.ttf") format("truetype");
}

/* ��Ʈ : SUIT */
@font-face {
  font-family: 'SUIT';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'SUIT';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'SUIT';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'SUIT';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'SUIT';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'SUIT';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'SUIT';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'SUIT';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Heavy.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
}

html,
body {
  width: 100%;
  /* or % */
  /* or % */
  padding: 0;
  margin: 0;
  font-family: "Titillium Web", 'SUIT', sans-serif;
  font-style: normal;
  line-height: 1.4;
  word-break: keep-all;
  color: #000000;
  background-color: #ffffff;
  scroll-behavior: smooth;
  overflow-x: unset;
  --box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.09);
  --primary-color-one: #078586;
  --primary-color-two: #282f3b;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

p,
figure {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
}

* {
  box-sizing: border-box;
  font-style: normal;
}

img {
  width: 100%;
  display: block;
}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
body {}

@keyframes banner {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.05);
  }
}

.banner {
  position: relative;
  width: 100%;
  height: 152px;
  /* background: url("/asset/img/banner_portfolio.jpg") center/cover no-repeat; */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  padding: 0 19%;
}

.banner-title {
  display: none;
}

.banner-title-normal {
  display: none;
}

.banner-title-aboutus {
  display: none;
}

.banner img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: banner 1.3s ease-out forwards;
}

.banner h2 {
  position: relative;
  /* font-family: "Elephant"; */
  font-weight: 700;
  font-size: 32px;
  text-align: center;
  color: #000000;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 41.6px;
  height: 42px;
}

.banner hr {
  width: 100%;
  height: 1px;
  border: 1px solid #DADADA;
}

.banner ul {
  position: relative;
  width: 93%;
  max-width: 1080px;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner ul li {
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner ul li a {
  font-weight: 500;
  font-size: 18px;
  opacity: 0.5;
  color: #fff;
  text-align: center;
  font-family: "Lexend", sans-serif
}

.banner ul li:after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 25px;
  margin: 0 60px;
  background: #eee;
}

.banner ul li:last-child:after {
  display: none;
}

.banner ul li.active a {
  opacity: 1;
  font-weight: 700;
}

.about .about {
  height: 650px;
  justify-content: center;
}

.about .about h2 {
  position: relative;
  /* font-family: "Elephant"; */
  font-weight: 400;
  font-size: 40px;
  text-align: center;
  color: #FFFFFF;
  text-transform: uppercase;
  line-height: 56px;
}

.about .about p {
  margin-top: -50px;
  position: relative;
  /* font-family: "Elephant"; */
  font-weight: 600;
  font-size: 24px;
  text-align: center;
  color: #FFFFFF;
  text-transform: uppercase;
  line-height: 33.6px;
}

.threed .threedcontents {
  height: 650px;
  justify-content: center;
}

.threed .threedcontents h2 {
  position: relative;
  /* font-family: "Elephant"; */
  font-weight: 400;
  font-size: 40px;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  text-transform: uppercase;
  line-height: 52px;
}

.top_menu {
  display: initial;
}

.top_menu ul {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  overflow: hidden;
  list-style-type: none;
  display: flex;
  justify-content: center;
  width: 100%;
  border-bottom: 2px solid #DDDDDD;
  background-color: #FFF;
  height: 50px;
  align-items: center;
  z-index: 100;
}

.top_menu ul li a {
  font-weight: 700;
  font-size: 18px;
  line-height: 25.2px;
  color: #CECECE;
}

.top_menu ul li {
  height: 100%;
  align-content: center;
  padding: 0 1.5%;
}

.top_menu ul li.active {
  border-bottom: 2px solid #000;
}

.top_menu ul li.active a {
  font-weight: 700;
  font-size: 18px;
  line-height: 25.2px;
  color: #000;
}

.top_menu_service {
  display: initial;
}

.top_menu_service ul {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  overflow: hidden;
  list-style-type: none;
  display: flex;
  justify-content: center;
  width: 100%;
  border-bottom: 2px solid #DDDDDD;
  background-color: #FFF;
  height: 50px;
  align-items: center;
  z-index: 100;
}

.top_menu_service ul li a {
  font-weight: 700;
  font-size: 18px;
  line-height: 25.2px;
  color: #CECECE;
}

.top_menu_service ul li {
  height: 100%;
  align-content: center;
  padding: 0 1.5%;
}

.top_menu_service ul li.active {
  border-bottom: 2px solid #000;
}

.top_menu_service ul li.active a {
  font-weight: 700;
  font-size: 18px;
  line-height: 25.2px;
  color: #000;
}


#service_sub_top_menu ul {
  border: 0px;
  position: sticky;
  gap: 10px;
  padding: 2px 15px 2px 15px;
  text-align: center;
  align-items: center;
  background: rgb(0, 0, 0, 0);
  top: 50px;
  margin-top: 1%;
}

#service_sub_top_menu ul li.active {
  width: 190px;
  height: 55px;
  border-radius: 100px;
  background-color: rgba(55, 55, 58, 1);
  text-align: center;
  align-content: center;
}

#service_sub_top_menu ul li.active a {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 1);
}

#service_sub_top_menu li {
  width: 190px;
  height: 55px;
  border-radius: 100px;
  text-align: center;
  align-content: center;
  background-color: rgba(243, 244, 245, 1);
  padding: 0;
}


#service_sub_top_menu li a {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: rgba(167, 167, 167, 1);
}

.showroom .holo {
  height: 650px;
  justify-content: center;
}

.showroom .meta {
  height: 650px;
  justify-content: center;
}


.section_wrap_holo h5 {
  margin: 0 0 40px;
  font-size: 32px;
  line-height: 41.6px;
  color: rgba(0, 0, 0, 1);
  text-align: left;
  font-weight: 600;
  padding: 0 19%;
  padding-top: 6%;
}

/* .banner.about {
  background-image: url( "/img/about_top.jpg" );
}

.banner.threedcontents {
  background-image: url( "/img/3dcontents_top.jpg" );
}

.banner.holo {
  background-image: url( "/img/holo_top.jpg" );
}

.banner.meta {
  background-image: url( "/img/meta_top.jpg" );
}

.banner.news {
  background-image: url( "/img/news_top.jpg" );
}

.banner.contact {
  background-image: url( "/img/contact_top.jpg" );
} */

/* .banner.about h2,
.banner.contact h2 {
  margin-bottom: 130px;
} */

.left_menu {
  position: fixed;
  left: 100px;
  top: 50%;
  transform: translate(0, -50%);
  display: none;
}

.left_menu ul {
  position: sticky;
  height: auto;
  top: 120px;
}

.left_menu ul li {
  display: flex;
  flex-direction: column;
  color: #585858;
  font-weight: 700;
  font-size: 18px;
}

.left_menu ul li a {
  opacity: 0.5;
}

.left_menu ul li::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  margin: 20px 0;
  background: #bbb;
}

.left_menu ul li:last-child::after {
  display: none;
}

.left_menu ul li.active a {
  opacity: 1;
}

/* ///////////////////////////////////////// */

.service .section_wrap {
  margin: 0 auto;
  /* margin-top: 80px; */
  margin-bottom: 180px;
  position: relative;
  /* display: flex; */
  flex-direction: column;
  gap: 0;
}

.service .section_wrap h3 span {
  color: #008fd1;
}



.service .section_wrap h3.no:after,
.service .section_wrap h3.up:after {
  display: none;
}


.service .section_wrap section {
  /* max-width: 1100px; */
  /* margin: 0 auto; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
  gap: 15px;
  padding: 0 15px
}

.service .section_wrap section h4 {
  color: #585858;
  font-size: 22px;
  margin-top: 5%;
}

/* 3->4 리스트 수정 */
.service .section_wrap section .content_wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 30px;
  width: 100%;
  height: 250px;
}

.service .section_wrap section .content_wrap .content {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.06);
}

.service .section_wrap section .content_wrap .content .thumb {
  width: 100%;
}

.service .section_wrap section .content_wrap .content .thumb img {
  width: 100%;
  height: 200px;
}

.service .section_wrap section .content_wrap .content .content_absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.service .section_wrap section .content_wrap .content .content_absolute .record_wrap {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px;
}

.service .section_wrap section .content_wrap .content .content_absolute .record_wrap .record {
  display: flex;
  gap: 6px;
}

.service .section_wrap section .content_wrap .content .content_absolute .record_wrap .record img {
  width: 20px;
  height: 20px;
}

.service .section_wrap section .content_wrap .content .content_absolute .record_wrap .record span {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.service .section_wrap section .content_wrap .content .content_absolute .name_label {
  background: #fff;
  height: 50px;
  padding: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.service .section_wrap section .content_wrap .content .content_absolute .name_label .label_logo {
  width: 26px;
}

.service .section_wrap section .content_wrap .content .content_absolute .name_label span {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(53, 54, 68, 1);
  font-weight: 600;
  font-size: 14px;
  line-height: 16.8px;
}

.service .section_wrap section .content_wrap .content .content_absolute .name_label a {
  width: 135px;
  opacity: 0.7;
}

.service .section_wrap section .content_wrap .content .content_absolute .name_label a img {
  object-fit: cover;
  width: 135px;
  height: 18px;
}

.service .section_wrap section .more {
  width: 165px;
  height: 40px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("/asset/img/begin_gray.svg") center/cover no-repeat;
  color: #878787;
  font-size: 14px;
}

.showroom .section_wrap .title_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.showroom .section_wrap .title_box .blue_dot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.showroom .section_wrap .title_box .blue_dot span {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #4e90ce;
  opacity: 0.5;
}

.showroom .section_wrap .title_box p {
  font-weight: 700;
  font-size: 52px;
  color: #008fd1;
  text-align: center;
}

.showroom .section_wrap section {
  gap: 12px;
  margin-bottom: 60px;
}

.showroom .section_wrap section .content_box {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

.showroom .section_wrap section .content_box .txt_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
  width: 100%;
}

.showroom .section_wrap section .content_box .txt_box b {
  font-size: 26px;
  font-weight: 600;
  color: #585858;
}

.showroom .section_wrap section .content_box .txt_box b em {
  font-weight: 500;
}

.showroom .section_wrap section .content_box .txt_box p {
  font-size: 19px;
  font-weight: 500;
  color: #585858;
  text-align: center;
  text-transform: none;
}

.showroom .section_wrap section .content_box .txt_box p span {
  font-weight: 600;
  color: #008fd1;
}

.showroom .section_wrap section .content_box img,
.showroom .section_wrap section .content_box video {
  width: 100%;

}

.showroom .section_wrap section .content_box .more {
  width: 165px;
  height: 40px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(/asset/img/begin_gray.svg) center/cover no-repeat;
  color: #878787;
  font-size: 14px;
}

.showroom .section_wrap section .content_box figure {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.showroom .section_wrap section .content_box figure span {
  color: #008fd1;
  font-size: 20px;
  font-weight: 600;
  text-transform: none;
}

.showroom .section_wrap section .content_box figure figcaption {
  font-size: 17px;
  text-transform: none;
  text-align: center;
  line-height: 1.2;
}

.showroom .section_wrap section .content_box figure figcaption b {
  font-size: 19px;
  color: #585858;
}

.showroom .section_wrap section .content_box figure figcaption em {
  font-size: 19px;
  color: #585858;
}

.showroom .section_wrap section .content_box .gray_box {
  width: 100%;
  max-width: 880px;
  text-align: center;
  background: #ddd;
  padding: 16px;
  font-size: 20px;
  font-weight: 600;
  color: #007ac0;
  text-transform: none;
}

.showroom .section_wrap section .content_box .row_box {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.showroom .section_wrap section .content_box .row_box.showroom_1a {
  gap: 75px;
}

.showroom .section_wrap section .content_box .row_box.showroom_1b {
  gap: 50px;
}

.showroom .section_wrap section .content_box .row_box.showroom_3-4 {
  gap: 35px;
}

.showroom .section_wrap section .content_box .row_box.holo_1b {
  width: 100%;
  justify-content: space-evenly;
  gap: 12px;
}

.showroom .section_wrap section .content_box .row_box.holo_1b figure {
  height: 100%;
}

.showroom .section_wrap section .content_box .row_box.holo_2a {
  width: 100%;
  justify-content: space-around;
  align-items: flex-end;
  gap: 12px;
}

.showroom .section_wrap section .content_box .row_box.holo_2a figure {}

.showroom .section_wrap section .content_box .row_box.holo_2a .holo_2a_right {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.showroom .section_wrap section .content_box .row_box.holo_3c {
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
}

.service .section_wrap h3 i {
  font-weight: 400;
}

.showroom .section_wrap section .content_box .flex_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.showroom .section_wrap section .content_box .holo_1a-2 {
  width: 100%;
}

.showroom .section_wrap section .content_box .holo_1a-2 .row_box {
  width: 100%;
  justify-content: space-between;
  gap: 12px;
}

.showroom .section_wrap section .content_box .holo_1a-2>span {
  display: inline-block;
  font-weight: 600;
  font-size: 24px;
  color: #008fd1;
  margin-bottom: 1em;
  text-transform: none;
}

.showroom .section_wrap section .content_box .edu_top {
  display: flex;
}

.showroom .section_wrap section .content_box .edu_top .icon_edu {
  display: inline-block;
  width: 159px;
  height: 159px;
}

.showroom .section_wrap section .content_box .row_box.holo_1c {
  width: 100%;
  justify-content: space-between;
  gap: 12px;
}

.showroom .section_wrap section .content_box .row_box.holo_1c .icon_box {
  margin: auto;
}

.showroom .section_wrap section .content_box .row_box.holo_1d {
  width: 100%;
  justify-content: space-between;
  gap: 12px;
}

.showroom .section_wrap section .content_box .row_box.holo_1d figure {
  width: 25%;
  max-width: 245px;
}

.showroom .section_wrap section .content_box .row_box.holo_1e {
  width: 100%;
  justify-content: space-between;
  gap: 12px;
}


.showroom .section_wrap section .content_box .info_top {
  display: flex;
  margin-left: auto;
  margin-bottom: 1em;
}

.showroom .section_wrap section .content_box .table_box figure {
  align-items: flex-start;
}

.showroom .section_wrap section .content_box .row_box.holo_3a {
  width: 100%;
  justify-content: space-between;
  gap: 12px;
}

.showroom .section_wrap section .content_box .row_box.holo_3a figure {
  width: 25%;
}

.showroom .section_wrap section .content_box .row_box.holo_3a figure .caption_3-5 {
  width: 242px;
}

.showroom .section_wrap section .content_box .row_box.holo_4a {
  width: 100%;
  justify-content: space-between;
  gap: 12px;
}

.showroom .section_wrap section .content_box .row_box.holo_4c {
  width: 100%;
  justify-content: space-between;
  gap: 12px;
}

.showroom .section_wrap section .content_box .row_box.holo_4c figure {
  width: 25%;
  max-width: 256px;
}

/* //////////////////////////////////////////////////////////////////// */
.about .section_wrap {
  /* margin-top: 90px; */
  margin-bottom: 180px;
  width: 100%;
  position: relative;
  /* display: flex; */
  flex-direction: column;
}

.section_wrap_about {
  margin-top: 0 !important;
}

.section_wrap_about #section_01 {
  margin-top: -30px;
}

.section_wrap_contact {
  margin-top: 70px !important
}

.about .section_wrap section {
  width: 100%;
  padding: 0 19%;
  /* margin: 0 auto; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
  /* gap: 60px; */
  /* row-gap:20px !important; */
  padding-top: 120px
}

.about .section_wrap section h3 {
  font-weight: 700;
  font-size: 48px;
  color: #000000;
  line-height: 67.2px;
  text-align: left;
  display: flex;
  flex-direction: column;
}

.about .section_wrap section p {
  font-weight: 600;
  font-size: 18px;
  color: #007163;
  line-height: 21.6px;
  text-align: left;
  display: flex;
  flex-direction: column;
}

/* .about .section_wrap section h3:after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 3px;
  background: #bbb;
  margin-top: 18px;
} */

.about .section_wrap section .content_box p {
  font-weight: 700;
  font-size: 16px;
  color: #007163;
  line-height: 20.8px;
  text-align: right;
  display: flex;
  flex-direction: column;
  letter-spacing: -0.025em;
}

.about .section_wrap section .content_box {
  width: 100%
}

.about .section_wrap section #content_add_box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  row-gap: 20px !important;
  width: 100%;
  margin-top: 7%;
  margin-bottom: 10%;
}


.about .section_wrap section .content_box .add_scroll .inner .business-areas {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 5%;
  margin-bottom: 15%;
}

.about .section_wrap section .content_box .add_scroll .inner .business-areas .business-area .business-area-title {
  color: #363D4B;
  font-weight: 700;
  font-size: 32px;
  line-height: 38.4px;
  margin-left: 8%;
  margin-top: -15%;

}

.about .section_wrap section .content_box .add_scroll .inner .business-areas .business-area .business-area-title-number {
  color: rgba(241, 241, 241, 1);
  font-weight: 600;
  font-size: 140px;
  line-height: 168px;
  margin-left: 8%;
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0) 30%, rgba(0, 0, 0, 0));
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: bottom;
}

.about .section_wrap section .content_box .add_scroll .inner .business-areas .business-area .client {
  display: flex;
  flex-direction: column;
}

.about .section_wrap section .content_box .add_scroll .inner .business-areas .business-area .client p {
  text-align: left;
  margin-top: 30px;
  color: #363D4B;
  margin-left: 8%;
}

.about .section_wrap section .content_box .add_scroll .inner .business-areas .business-area .client ul {
  list-style-type: disc;
  margin-top: 12px;
  margin-left: 8%;
}

.about .section_wrap section .content_box .add_scroll .inner .business-areas .business-area .client ul li {
  list-style: inside;
  margin-top: 10px;
  color: #767676;
}

.about .section_wrap section .content_box .add_scroll .inner .business-areas .business-area .client ul li::marker {
  color: #007163;
}

.about .section_wrap section .content_box .add_scroll .inner .business-areas .business-area .client h5 {
  margin-top: 26px;
  font-size: 18px;
  font-weight: 700;
  line-height: 23.4px;
  letter-spacing: -0.025em;
  color: #363D4B;
  margin-left: 8%;
}

.about .section_wrap section .content_box .add_scroll .inner .business-areas .business-area .client img {
  margin-top: 31px;
  width: 84%;
  height: auto;
  margin-left: 8%;
  margin-right: 8%;
}

.about .section_wrap section .content_box .add_scroll .inner .business-areas .business-area .client h4 {
  margin-top: 10px;
  font-weight: 700;
  font-size: 18px;
  line-height: 23.4px;
  letter-spacing: -0.025em;
  color: #767676;
  text-align: center;
}


.about .section_wrap section .content_box .txt_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.about .section_wrap section .content_box .txt_box b {
  font-size: 20px;
  color: #008fd1;
  text-align: center;
  margin-bottom: 10px
}

.about .section_wrap section .content_box .txt_box p {
  font-size: 19px;
  color: #585858;
  text-align: center;
  text-transform: none;
}

.about .section_wrap section .content_box .txt_box p span {
  font-weight: 600;
  color: #008fd1;
}

.about .section_wrap section .content_box .row_wrap {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.about .section_wrap section .content_box .row_wrap .row_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 25px;
}

.about .section_wrap section .content_box .row_wrap .row_box figure figcaption {
  font-weight: 600;
  margin-bottom: 15px;
  text-align: center;
  color: #585858;
  text-transform: none;
}

.about .section_wrap section .content_box .row_wrap .row_box figure figcaption span {
  font-weight: 400;
}

.about .section_wrap section .content_box .row_wrap .row_box figure img {
  border: 1px solid #eee;
}

/* ///////////////////////////////////////////////////////////// */
#news-wrap {
  max-width: 100%;
  padding: 0 19%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* grid-auto-rows: 400px; */
  gap: 20px;
  margin-top: 60px;
}

.news-item {
  display: flex;
  flex-direction: column;
}

.img-wrap {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: var(--box-shadow);
  border-radius: 10px;
  position: relative;
  padding-bottom: 40px;
  /* Add position: relative */
}

.img-wrap .image {
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  width: 100%;
  height: 100%;
}

.img-wrap:hover .image::before {
  /* Adjust the selector */
  bottom: 0;
}

.img-wrap .image::before {
  /* Adjust the selector */
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  bottom: -100%;
  background: linear-gradient(to top,
      var(--primary-color-two) 1%,
      rgba(0, 0, 0, 0) 100%);
  z-index: 9;
  transition: all 0.5s ease;
  overflow: hidden;
  border-radius: 10px;
  pointer-events: none;
}

.img-wrap .image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 0.66;
  object-fit: inherit;
  position: relative;
  overflow: hidden;
}

.img-wrap .image a.two {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: block;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;

  border-radius: 10px 0px 10px 0px;
  background: #fff;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  z-index: 10;
}

.img-wrap:hover .image a.two {
  background: var(--primary-color-one);
  color: #fff;
}

.news-item .news-title {
  width: 100%;
  height: auto;
  position: relative;
  padding: 20px 0px 0px 0px !important;
  font-size: 20px;
  font-weight: 700;
  display: block;
  line-height: 28px;
}

.news-item .news-date {
  width: 100%;
  height: auto;
  position: relative;
  padding: 0px 0px 0px 0px !important;
  font-size: 14px;
  font-weight: 500;
  display: block;
  line-height: 19.6px;
  color: #A4A6A9;
}

#footer {
  width: 100%;
  background: #231f20;
}

#footer img {
  width: 100%;
}

#more {
  width: 200px;
  height: 50px;
  background: #231f20;
  color: #fff;
  font-size: 24px;
  margin: 40px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-button-ipr {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.slider-button-cert {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.inside-banner-container {
  box-shadow: 0px 0px 4px 0px #00000040 inset;
  background: linear-gradient(106.33deg, rgba(0, 0, 0, 0.15) 2.88%, rgba(0, 0, 0, 0.24) 35.09%, rgba(0, 0, 0, 0.06) 64.09%, rgba(0, 0, 0, 0.3) 94.93%);
  border-radius: 30px;
  width: 359px;
  height: 195px;
  font-weight: 600;
  font-size: 20px;
  line-height: 31.2px;
  color: rgba(255, 255, 255, 1);
  position: absolute;
  top: 96px;
  left: 41px;
  text-align: center;
}

.inside-banner-container-rect {
  margin-left: 19%;
  margin-top: 21px;
  width: 219px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(147, 203, 196, 1);
  background: rgba(0, 113, 99, 0.4);
  padding: 4px 20px 4px 20px;
}

.green-container {
  font-weight: 600;
  font-size: 16px;
  line-height: 28.6px;
  color: rgba(255, 255, 255, 1);
}

.inside-banner-container-paragraph {
  margin-top: 24px;
}

.showroom .section_wrap section .content_box_excenter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.time-line-box {
  width: 100%;
  height: auto;
  overflow: auto;
  outline: none;
  overflow-y: hidden;
  padding-bottom: 15px;
  -ms-overflow-style: scroll;
  scrollbar-width: none;
  padding-top: 5%;
}

.time-line-box .timeline {
  list-style-type: none;
  display: flex;
  padding: 0;
  text-align: center;
}

.time-line-box .timestamp {
  margin: auto;
  margin-bottom: 5px;
  padding: 0px 4px;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.time-line-box .date {
  font-weight: 700;
  font-size: 32px;
  line-height: 38.4px;
  color: #444444;
  /* margin-left:-5%; */
}

.time-line-box .status {
  padding: 0px 10px;
  display: flex;
  justify-content: start;
  border-top: 2px solid #6A6A6A;
  position: relative;
  transition: all 200ms ease-in;
}

.time-line-box .status span {
  padding-top: 8px;
}

.time-line-box .status span:before {
  content: '';
  width: 10px;
  height: 10px;
  background-color: #000000;
  border-radius: 10px;
  position: absolute;
  left: 0;
  top: 0%;
  -webkit-transform: translate(-50%, -60%);
  -ms-transform: translate(-50%, -60%);
  transform: translate(-50%, -60%);
  transition: all 200ms ease-in;
}


.swiper-wrapper {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  margin-left: 1%;
}

.swiper-container::-webkit-scrollbar-track {
  background: #a8a8a8b6;
}

.swiper-container::-webkit-scrollbar {
  height: 2px;
}

.swiper-container::-webkit-scrollbar-thumb {
  background: #4F4F4F !important;
}

.swiper-slide {
  text-align: center;
  font-size: 12px;
  width: 500px;
  height: 100%;
  position: relative;
}

.listing-from-time-line {
  margin-top: 40px;
}

.listing-from-time-line li {
  display: flex;
  margin-top: 20px;
}

.about .section_wrap section .content_box .listing-from-time-line .month {
  text-align: left;
  font-weight: 700;
  font-size: 18px;
  line-height: 25.2px;
  color: #007163;
  margin-right: 25px;
}

.about .section_wrap section .content_box .listing-from-time-line .context {
  text-align: left;
  font-weight: 600;
  font-size: 16px;
  line-height: 22.4px;
  color: #767676;
  margin-right: 118px;
}

.slider-button {
  text-align: right;
  padding-right: 25%;
  margin-top: -1%;
}

.slider-button #slideBack {
  width: 54px;
  height: 54px;
  border-radius: none;
  border: none;
  background-color: #FAFAFA;
}

.slider-button #slide {
  width: 54px;
  height: 54px;
  border-radius: none;
  border: none;
  background-color: #FAFAFA;
  margin-left: 2%;
}

.slider-button img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 0.4px solid #222222;
  cursor: pointer;
}

.business-area {
  box-sizing: border-box;
  /* position: absolute; */
  width: 380px;
  height: 750px;
  /* left: 370px; */
  /* top: 900px; */
  background: #FFFFFF;
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.1);
  /* backdrop-filter: blur(7px); */
  border-radius: 12px;
  margin-right: 1%;
  margin-left: 1%;
}

#business-area-corner {
  width: 119px;
  height: 32px;
  border-radius: 0px 12px 0px 12px;
  background: rgba(0, 113, 99, 0.1);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.025em;
  margin-right: 0;
  align-content: center;
  text-align-last: center;
  float: right;
  margin-bottom: -32px;
}

.add_scroll .inner .triple-box {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  margin-top: 5%;
  margin-bottom: -2%;
  height: 150px;
}

.add_scroll .inner .triple-box .single-box {
  width: 180px;
  height: 100px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.add_scroll .inner .triple-box .single-box .single-box-number {
  font-weight: 600;
  font-size: 100px;
  line-height: 100px;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to bottom, rgba(236, 236, 236, 1) 30%, rgba(0, 0, 0, 0));
}

.add_scroll .inner .triple-box .single-box .single-box-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 22.4px;
  color: rgba(2, 134, 118, 1);
  margin-top: -44%;
  margin-left: -44%;
}

.add_scroll .inner .triple-box .single-box .single-box-content {
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: rgba(68, 68, 68, 1);
  margin-top: 10%;
}

.shape {
  display: flex;
  width: 100%;
  height: 390px;
  margin-bottom: 2%;
}

.rectangle1 {
  background: rgba(255, 255, 255, 1);
  width: 25.333%;
  border-radius: 20px;
  z-index: 51;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
  margin-left: 2%;
}

.rectangle1 img {
  width: 189px;
  height: 300px;
  margin-left: 15%;
  margin-top: 15%;
}

.rectangle2 {
  background: linear-gradient(112.95deg, #7ABFB7 5.05%, #4AA096 45%, #028676 88.28%);
  width: 49.333%;
  border-radius: 20px;
  margin-left: -3%;
  z-index: 50;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
}

.rectangle3 {
  background: rgba(255, 255, 255, 1);
  width: 33.333%;
  border-radius: 20px;
  margin-left: -3%;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
  margin-right: 2%;
}

.rectangle3 ul {
  margin-left: 40%;
  margin-top: 6%;
}

.rectangle3 ul li {
  box-shadow: 0px 0px 16px 0px rgba(2, 134, 118, 0.2);
  background: rgba(255, 255, 255, 1);
  border: 0px;
  border-radius: 10px;
  width: 180px;
  height: 65px;
  text-align: center;
  align-content: center;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  margin-bottom: 5%;
}

.shape>div {
  position: relative;
}

.shape>div.rectangle1:after {
  content: '';
  position: absolute;
  display: block;
  left: 97.8%;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 99;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 50%);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  border-radius: 20px;
}

.shape>div.rectangle2:after {
  content: '';
  position: absolute;
  display: block;
  left: 98.8%;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 99;
  height: 100%;
  background: #028676;
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 50%);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  border-radius: 20px;
}

.images {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-left: 2%;
  margin-right: 2%;
  margin-bottom: 2%;
}

.images .images1 {
  border: 0px;
  border-radius: 30px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  width: 280px;
  height: 100px;
  text-align: center;
  text-align: -webkit-center;
  align-content: center;
}

.images .images1 div {
  font-weight: 600;
  font-size: 16px;
  line-height: 22.4px;
  color: rgba(2, 134, 118, 1);
}

.images .images2 div {
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  color: rgba(255, 255, 255, 1);
}

.images .images3 div {
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  color: rgba(255, 255, 255, 1);
}

.images .images4 div {
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  color: rgba(255, 255, 255, 1);
}

.images .images2 {
  border: 2px solid rgba(109, 183, 174, 1);
  border-radius: 30px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  width: 180px;
  height: 100px;
  align-content: center;
  text-align: center;
}

.images .images3 {
  border: 2px solid rgba(109, 183, 174, 1);
  border-radius: 30px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  width: 180px;
  height: 100px;
  align-content: center;
  text-align: center;
}

.images .images4 {
  border: 2px solid rgba(109, 183, 174, 1);
  border-radius: 30px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  width: 180px;
  height: 100px;
  align-content: center;
  text-align: center;
}

.images .images1 img {
  width: 137px;
  height: 51px;
  margin-top: 2%;
}

.images .images2 img {
  width: 180px;
  height: 100px;
}

.images .images3 img {
  width: 180px;
  height: 100px;
}

.images .images4 img {
  width: 180px;
  height: 100px;
}

#green-rect {
  width: 98%;
  height: 340px;
  background-color: rgba(204, 231, 228, 1);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  border: 0px;
  border-radius: 20px;
  margin-top: 7%;
  margin-bottom: 2%;
}

#blue-rect {
  width: 98%;
  height: 340px;
  background-color: rgba(216, 227, 240, 1);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  border: 0px;
  border-radius: 20px;
}

#green-rect .green-rect-title {
  display: flex;
  flex-direction: row;
}

#green-rect .green-rect-title div {
  width: 180px;
  height: 45px;
  background-color: rgba(0, 113, 99, 1);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-top: 3%;
  margin-left: 3%;
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  align-content: center;
}

#green-rect .green-rect-title h1 {
  font-weight: 600;
  font-size: 35px;
  line-height: 67.2px;
  color: rgba(0, 0, 0, 0.1);
  margin-top: 2%;
  margin-left: 10%;
}



#blue-rect .blue-rect-title {
  display: flex;
  flex-direction: row;
}

#blue-rect .blue-rect-title div {
  width: 180px;
  height: 45px;
  background-color: rgba(12, 71, 141, 1);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-top: 3%;
  margin-left: 3%;
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  align-content: center;
}

#blue-rect .blue-rect-title h1 {
  font-weight: 600;
  font-size: 35px;
  line-height: 67.2px;
  color: rgba(0, 0, 0, 0.1);
  margin-top: 2%;
  margin-left: 10%;
}

.card-image-list {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  margin-top: 1%;
  margin-left: 3%;
  margin-right: 3%;
}

.card-image-list div {
  width: 370px;
  height: 185px;
  border: 0px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: row;
  align-items: center;
}

.card-image-list div img {
  width: 150px;
  height: 155px;
  border: 0px;
  border-radius: 10px;
  margin-left: 5%;
}

.card-image-list div h2 {
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: rgba(0, 113, 99, 1);
  margin-left: 6%;
}

.about .section_wrap section .content_box .card-image-list div h2 .card-image-list-content {
  font-weight: 500;
  font-size: 16px;
  line-height: 22.4px;
  color: rgba(118, 118, 118, 1);
  /* margin-left: 1%; */
  /* margin-right: 6%; */
  width: 66%;
  text-align: left;
}

.box-list {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: 2%;
}

.box-list .box-outline {
  width: 230px;
  height: 130px;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
}

.box-list .box-outline .box-outline-title {
  border-radius: 10px 10px 0px 0px;
  background-color: rgba(2, 134, 118, 1);
  height: 45px;
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  color: rgba(255, 255, 255, 1);
  align-content: center;
  text-align: center;
}

.box-list .box-outline .box-outline-content {
  text-align: center;
}

.box-list .box-outline .box-outline-content h2 {
  font-weight: 600;
  font-size: 24px;
  line-height: 33.6px;
  color: rgba(0, 0, 0, 1);
  margin-top: 5%;
}

.about .section_wrap section .content_box .box-list .box-outline .box-outline-content h2 p {
  font-weight: 600;
  font-size: 16px;
  line-height: 22.4px;
  color: rgba(118, 118, 118, 1);
  text-align: center;
}

.swiper-wrapper-ipr {
  gap: 20px;
  display: inline-flex;
  flex-direction: row;
}

/*.swiper-wrapper-ipr img {*/
.about .showroom .section_wrap #section_02 .content_box .containerIPR #containerIPR .swiper-wrapper-ipr img {
    border: 2px solid rgba(204, 231, 228, 1);
    width: 280px;
    height: 350px;
}
/* 2, 3, 6, 7 슬라이드 관련 css */
.about .showroom .section_wrap #section_03 .content_box .containerCert #containerCert .swiper-wrapper-ipr img {
    border: 2px solid rgba(204, 231, 228, 1);
    width: 450px;
    height: 350px;
}
.about .section_wrap #section_06 .content_box .containerIPR #containerIPR .swiper-wrapper-ipr img {
    border: 2px solid rgba(204, 231, 228, 1);
    width: 280px;
    height: 350px;
}

.about .section_wrap #section_07 .content_box .containerCert #containerCert .swiper-wrapper-ipr img {
    border: 2px solid rgba(204, 231, 228, 1);
    width: 280px;
    height: 350px;
}









.slider-button-ipr #slideBackIPR {
  width: 54px;
  height: 54px;
  border-radius: none;
  border: none;
  background-color: #FAFAFA;
}

.slider-button-ipr #slideIPR {
  width: 54px;
  height: 54px;
  border-radius: none;
  border: none;
  background-color: #FAFAFA;
  margin-left: 2%;
}

.slider-button-ipr img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 0.4px solid #222222;
  cursor: pointer;
}

.swiper-wrapper-cert {
  gap: 20px;
  display: inline-flex;
  flex-direction: row;
}

.swiper-wrapper-cert img {
  border: 2px solid rgba(204, 231, 228, 1);
  width: 280px;
  height: 350px;
}



.slider-button-cert #slideBackCert {
  width: 54px;
  height: 54px;
  border-radius: none;
  border: none;
  background-color: #FAFAFA;
}

.slider-button-cert #slideCert {
  width: 54px;
  height: 54px;
  border-radius: none;
  border: none;
  background-color: #FAFAFA;
  margin-left: 2%;
}

.slider-button-cert img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 0.4px solid #222222;
  cursor: pointer;
}

.function-title {
  padding: 24px 19% 12px;
  text-align: center;
  padding-top: 90px;
  padding-bottom: 10px;
}

.function-title #function-title-text {
  border: 2px solid rgba(204, 231, 228, 1);
  height: 50px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 24px;
  line-height: 28.8px;
  place-content: center;
  color: rgba(0, 0, 0, 1);
}

.function-content {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 0 19%;
  text-align: center;
  gap: 8px;
}

.function-content .function-content-first-row {
  border-radius: 8px;
  background-color: rgba(204, 231, 228, 1);
  font-weight: 600;
  font-size: 16px;
  line-height: 19.2px;
  color: rgba(0, 0, 0, 1);
  height: 39px;
  align-content: center;
}

.function-content .function-content-second-row img {
  height: 100%;
  border: 2px solid rgba(204, 231, 228, 1);
  border-radius: 12px;
}

.about .showroom .section_wrap .content_box .content-box-image-description {
  font-weight: 600;
  font-size: 18px;
  line-height: 21.6px;
  color: rgba(68, 68, 68, 1);
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.content_box .content-box-image {
  border-radius: 12px;
  width: 280px;
  height: 160px;
}

.meta-img-desktop {
  display: block;
}

.meta-img-moblie {
  display: none;
}

.add_box {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  flex-direction: column;
  width: 100%;
}

.add_box button {
  width: 100%;
  border: 2px solid;
  padding: 10px 24px 10px 24px;
  height: 45px;
  border-radius: 10px;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  box-shadow: 0px 0px 20px 0px #0000001A;
}

.add_box #green-button {
  background-color: #007163;
}

.add_box #blue-button {
  background-color: #0C478D;
}

.add_box .static-card-green {
  width: 580px;
  height: 420px;
  box-shadow: 4px 4px 20px 0px #0000001A;
  border: 2px solid #FFFFFF;
  background: #EBF5F4;
  border-radius: 12px;
}

.add_box .static-card-blue {
  width: 580px;
  height: 420px;
  box-shadow: 4px 4px 20px 0px #0000001A;
  border: 2px solid #FFFFFF;
  background: #EFF4F9;
  border-radius: 12px;
}

.add_box .card-title-number {
  width: 138px;
  height: 144px;
  font-weight: 600;
  font-size: 120px;
  line-height: 144px;
  color: rgba(0, 0, 0, 0.05);
  margin-top: 12px;
  margin-left: 42px;
  -webkit-mask-image: linear-gradient(to bottom right, rgb(0 0 0) 30%, rgba(0, 0, 0, 0));
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: right bottom;
}

.add_box .static-card-green .card-title {
  font-weight: 700;
  position: unset;
  color: rgba(0, 113, 99, 1);
  font-size: 32px;
  line-height: 38.4px;
  margin-top: -9%;
  margin-left: 17%;
  -webkit-mask-image: linear-gradient(to bottom right, rgb(0 0 0) 30%, rgba(0, 0, 0, 0));
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: right bottom;
}

.add_box .static-card-blue .card-title {
  font-weight: 700;
  position: unset;
  color: rgba(12, 71, 141, 1);
  font-size: 32px;
  line-height: 38.4px;
  margin-top: -9%;
  margin-left: 17%;
  -webkit-mask-image: linear-gradient(to bottom right, rgb(0 0 0) 30%, rgba(0, 0, 0, 0));
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: right bottom;
}

.add_box li {
  width: 50%
}

.add_scroll {
  overflow-x: auto;
  width: 100%
}

.add_scroll:after {
  display: none;
  clear: both;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -30px;
  width: 130px;
  height: 130px;
  background: url('/img/mb-scroll.png') no-repeat center center
}

.add_scroll::before {
  display: none;
  clear: both;
  content: '';
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.55)
}

.add_scroll.off:after,
.add_scroll.off::before {
  display: none
}

.add_scroll .inner {
  width: 100%;
  min-width: 700px
}

.add_video {
  width: 100%;
  padding: 0 19%;
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 20px;
}

.add_video .tab {
  width: 100%;
  display: flex;
  gap: 10px;
  flex-direction: column;
  align-items: center;
  text-align: center
}

.add_video .tab li {
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  padding: 13px 5px;
  color: #222;
  background: #f5f5f5;
  cursor: pointer;
  border-radius: 20px;
  margin: 0 7px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5%;
}

.add_video .tab li.on {
  color: #fff;
  background: #04b9b0
}

.add_video .tab li:hover {
  background: #eee
}

.add_video .tab li.on:hover {
  background: #04b9b0
}

.add_video .tab li,
.add_video .tab li:hover {
  transition: all .15s ease-in-out
}

.add_video .player {
  width: 150%;
  height: 0;
  padding-top: 56%;
  position: relative
}

.add_video .player li {
  display: none
}

.add_video .player li:nth-child(1) {
  display: block
}

.add_video .player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
  border-radius: 20px
}

.add_video .tab h5 {
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  color: rgba(0, 0, 0, 1);
  margin: 0;
  padding: 0;
}

.add_video .tab h5 span {
  font-weight: 500;
  font-size: 16px;
  line-height: 22.4px;
  color: rgba(107, 118, 132, 1);
}

.add_3d {
  width: 100%;
  max-width: 1130px;
  margin: 0 auto;
  padding: 0 15px
}

.add_3d .inner {
  width: 100%;
  height: 600px;
  background: #f5f5f5;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.025) 5px 5px 10px;
  text-align: center
}

.section_wrap_holo #section_02 .add_box {
  gap: 5px
}

.section_wrap_holo #section_03 .add_box {
  gap: 5px
}

.service h5 {
  margin: 0 0 40px;
  font-size: 32px;
  line-height: 41.6px;
  color: rgba(0, 0, 0, 1);
  text-align: left;
  font-weight: 600;
  padding: 0 19%;
}

.service h5 span {
  color: #008fd1
}

.about .section_wrap #section_04 .content_box .add_scroll .inner-mobile {
  display: none;
}

.about .section_wrap #section_04 {
  padding-top: 0px;
}

.about .section_wrap #section_01 {
  padding-top: 0px;
  margin-top: 0px;
}

.about .section_wrap section #content_add_box .add_box .static-card-green img {
  width: 78%;
  height: 60%;
  margin-top: -3%;
  margin-left: 11%;
  margin-right: 11%;
  border-radius: 10px;
}

.about .section_wrap section #content_add_box .add_box .static-card-blue img {
  width: 78%;
  height: 60%;
  margin-top: -3%;
  margin-left: 11%;
  margin-right: 11%;
  border-radius: 10px;
}

.function-rows {
  height: auto;
  max-height: 500px;
}

.function-content-second-row {
  padding-top: 11px;
  height: 88%;
  position: relative;
}

.video-wrapper {
  position: relative;
  border-radius: 12px;
}

.video-wrapper>video {
  width: 100%;
  vertical-align: middle;
  border-radius: 12px;

}

.video-wrapper>video.has-media-controls-hidden::-webkit-media-controls {
  display: none;
}

.video-overlay-play-button {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 10px calc(50% - 50px);
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  opacity: 0.95;
  cursor: pointer;
  background-image: linear-gradient(transparent, #000);
  transition: opacity 150ms;
  border-radius: 12px;

}

.video-overlay-play-button:hover {
  opacity: 1;
}

.video-overlay-play-button.is-hidden {
  display: none;
}

.video-desc-wrapper {
  flex: 50%;
}

.about .section_wrap section {
  scroll-margin-top: 150px;
}

@media (max-width: 1280px) {
  .left_menu {
    margin-left: 0;
  }

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

  .service .section_wrap section .content_wrap {
    gap: 18px;
  }

  .showroom .section_wrap section .content_box .row_box.holo_3a figure .caption_3-5 {
    width: 100%;
  }

  .add_scroll .inner {
    width: 100%;
    min-width: fit-content;
  }



  .showroom .section_wrap section .content_box_excenter {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }


}

@media (max-width: 900px) {
  .banner h2 {
    font-size: 58px;
  }

  .banner ul li:after {
    margin: 0 20px;
  }

  .left_menu {
    display: none;
  }

  .service .section_wrap section,
  .about .section_wrap section {
    width: 100%;
  }

  .showroom .section_wrap section .content_box .row_box.showroom_1a,
  .showroom .section_wrap section .content_box .row_box.showroom_3-4 {
    gap: 12px;
  }

  .showroom .section_wrap section .content_box .row_box.showroom_1a figure,
  .showroom .section_wrap section .content_box .row_box.showroom_3-4 figure {
    width: calc(50% - 6px);
  }

  .service .section_wrap section .content_wrap {
    grid-template-columns: 1fr 1fr;
    height: 500px;
  }

  #news-wrap {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .news-item .news-title {
    padding: 10px 0px 0px 0px !important;
    font-family: Pretendard, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    text-align: left;
    color: #232324;
  }

  .news-item .news-date {
    font-family: Pretendard, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    text-align: left;
  }

  .inside-banner-container {
    width: 240px;
    height: 90px;
    top: 125px;
    left: 16px;
  }

  .inside-banner-container-rect {
    width: 197px;
    height: 28px;
    font-family: Pretendard, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 19.6px;
    text-align: center;
    margin-left: 8%;
  }

  .green-container {
    font-family: Pretendard;
    font-size: 14px;
    font-weight: 600;
    line-height: 19.6px;
    text-align: center;
  }

  .inside-banner-container-paragraph {
    font-family: Pretendard;
    font-size: 12px;
    font-weight: 600;
    line-height: 18.2px;
    text-align: center;
    margin-top: 6px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .meta-img-desktop {
    display: none;
  }

  .meta-img-moblie {
    display: block;
  }


}

@media (max-width: 500px) {
  .banner h2 {
    font-family: 'Noto Sans';
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    height: 24px;
  }

  .top_menu_service ul li a {
    font-weight: 700;
    font-size: 14px;
    line-height: 25.2px;
    color: #CECECE;
  }

  .banner ul li a {
    font-size: 16px;
  }

  .showroom .section_wrap .title_box p {
    font-size: 38px;
  }

  .service .section_wrap h3,
  .about .section_wrap section h3 {
    font-size: 28px;
  }

  .service .section_wrap section h3:after {
    content: "";
    display: inline-block;
    width: 40px;
    height: 3px;
    background: #bbb;
    margin-top: 30px;
    display: none;
  }


  .showroom .section_wrap section .content_box .txt_box b {
    font-size: 22px;
  }

  .showroom .section_wrap section .content_box .row_box {
    flex-wrap: wrap;
  }

  .showroom .section_wrap section .content_box figure figcaption {
    font-size: 14px;
  }

  .showroom .section_wrap section .content_box figure figcaption b {
    font-size: 16px;
  }

  .showroom .section_wrap section .content_box .holo_1a-2>span {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .showroom .section_wrap section .content_box .holo_1a-2 figure {
    width: calc(50% - 6px);
  }

  .showroom .section_wrap section .content_box .row_box.holo_1c {
    justify-content: center;
  }

  .showroom .section_wrap section .content_box .row_box.holo_1c .icon_box {
    display: none;
  }

  .showroom .section_wrap section .content_box .row_box.holo_1d figure {
    width: calc(50% - 6px);
  }

  .showroom .section_wrap section .content_box .row_box.holo_1e {
    flex-direction: column;
    align-items: center;
  }

  .showroom .section_wrap section .content_box .info_top {
    margin-right: auto;
  }

  .showroom .section_wrap section .content_box .row_box.holo_2a figure {
    width: 48%;
  }

  .showroom .section_wrap section .content_box .row_box.holo_3a {
    justify-content: space-around;
    row-gap: 12px;
  }

  .showroom .section_wrap section .content_box .row_box.holo_3a figure {
    width: 31%;
  }

  .showroom .section_wrap section .content_box .row_box.holo_3a figure .caption_3-5 {
    width: 242px;
  }

  .showroom .section_wrap section .content_box .row_box.holo_4a {
    flex-direction: column;
    align-items: center;
  }

  .showroom .section_wrap section .content_box .row_box.holo_4c figure {
    width: calc(50% - 6px);
  }

  .service .section_wrap section .content_wrap {
    gap: 12px;
  }




  .service .section_wrap section .content_wrap .content .content_absolute .record_wrap {
    display: none;
  }

  #news-wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .about .section_wrap section h3:after {
    margin-top: 10px;
  }

  .box-list {
    gap: 2px;
    padding-right: 16px;
  }

  .box-list .box-outline {
    border-radius: 10px;
    width: auto;
    width: -moz-available;
    /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;
    /* Mozilla-based browsers will ignore this. */
    width: fill-available;
    height: 130px;
  }

  .box-list .box-outline .box-outline-title {
    font-family: Pretendard, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 16.8px;
    text-align: center;
    height: 45px;
  }

  .box-list .box-outline .box-outline-content h2 {
    font-family: Pretendard, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 25.2px;
    text-align: center;
  }

  .about .section_wrap section .content_box .box-list .box-outline .box-outline-content h2 p {
    font-family: Pretendard, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 16.8px;
    letter-spacing: -0.025em;
    text-align: center;
  }

  .add_video .tab li {
    flex-direction: column;
  }

  .header .inner {
    padding: 0 10px;
  }

  .header .burger_btn {
    float: right;
    margin-top: 3%;
  }
}


@media(max-width:1800px) {
  .left_menu {
    left: 25px
  }
}

@media(max-width:1600px) {
  .left_menu {
    display: none !important
  }

  .about .section_wrap #section_04 .content_box .add_scroll .inner {
    display: none;
  }

  .about .section_wrap #section_04 .content_box .add_scroll .inner-mobile {
    display: block;
  }

  .about .section_wrap section {
    padding: 0 10%;
  }


  .service .showroom .section_wrap h5 {
    padding: 3% 10% 0% 10%;
  }

  .add_video {
    padding: 0 10%;
  }

  .service .showroom .section_wrap #section_01 {
    padding-top: 3%;
  }

  .service .showroom .section_wrap #section_02 .content_box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: normal;
    gap: 20px;
  }

  .service .showroom .section_wrap #section_03 .content_box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: normal;
    gap: 50px;
  }

  .function-content {
    padding: 0 10%;
  }

  .function-title {
    padding: 0 10%;
  }

  .service .showroom .section_wrap #section_02 .content_box_excenter {
    flex-direction: row;
  }
}

@media(max-width:1400px) {
  .left_menu {
    display: none !important
  }
}

@media(max-width:1200px) {
  .banner {
    height: 190px
  }

  #news-wrap {
    grid-template-columns: repeat(2, 1fr)
  }

  .about .section_wrap section .content_box .add_scroll .inner .business-areas {
    flex-direction: column;
    align-items: center;
  }

  .about .section_wrap section .content_box .add_scroll .inner .business-areas .business-area .client img {
    height: 230px;
  }

  .about .section_wrap section #content_add_box {
    flex-direction: column;
  }

  .add_box .static-card-green {
    width: 100%;
  }

  .add_box .static-card-blue {
    width: 100%;
  }

  .about .section_wrap section #content_add_box .add_box .static-card-green img {
    width: 78%;
    height: 60%;
    margin-top: -3%;
    margin-left: 11%;
    margin-right: 11%;
    border-radius: 10px;
  }

  .about .section_wrap section #content_add_box .add_box .static-card-blue img {
    width: 78%;
    height: 60%;
    margin-top: -3%;
    margin-left: 11%;
    margin-right: 11%;
    border-radius: 10px;
  }

  .service .section_wrap section .content_wrap .content .content_absolute .name_label {
    padding: 12px;
    height: 60px;
    display: grid;
    grid-template-columns: 1% 90%;
  }

  .service .section_wrap section .content_wrap .content .content_absolute .name_label .label_logo {
    width: 9px;
    height: 16px;
  }

  .service .section_wrap section .content_wrap .content .content_absolute .name_label span {
    font-family: Pretendard;
    font-size: 13px;
    font-weight: 400;
    line-height: 15.6px;
    text-align: left;
    color: #353644;
  }

  .service .showroom .section_wrap #section_02 .content_box {
    gap: 6px;
  }

  .service .showroom .section_wrap #section_02 .content_box_excenter {
    flex-direction: column;
  }

}

@media(max-width:900px) {
  .banner {
    height: 160px
  }

  .banner.about h2,
  .banner.contact h2 {
    font-family: 'Noto Sans';
    font-size: 16px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    height: 24px;
  }

  .banner.threedcontents h2 {
    margin-bottom: 22px;
    font-family: BM DoHyeon OTF;
    font-size: 22px;
    font-weight: 400;
    line-height: 30.8px;
    text-align: center;
  }

  .about .section_wrap {
    margin-top: 0px
  }

  .news-item p {
    font-size: 18px;
    line-height: 28px
  }

  .about .section_wrap section h3 {
    font-size: 30px;
  }

  .about .section_wrap section .content_box .txt_box b {
    font-size: 18px;
    margin-bottom: 0
  }

  .about .section_wrap section {
    padding: 30px 16px 0px 16px;
    gap: 6px;
  }

  .about .section_wrap section p {
    margin-bottom: 24px;
  }

  .section_wrap_about #section_01 {
    margin-top: -30px
  }

  .section_wrap_contact {
    margin-top: 35px !important
  }

  .service .showroom .section_wrap h5 {
    padding: 24px 16px 14px 16px;
    font-size: 25px;
    line-height: 38px;
    margin: 0;
  }

  .add_video {
    padding: 0 16px;
    flex-direction: column;
  }

  .add_video .player {
    width: 100%;
  }

  .add_video .tab {
    margin: 30px 0 -30px;
    z-index: 10;
    position: relative
  }

  .add_video .tab li {
    border-radius: 10px;
    margin: 0 3px
  }

  .slider-button-ipr {
    display: none;
  }

  .slider-button-cert {
    display: none;
  }

  .add_video .player iframe {
    border-radius: 10px;
    height: 100%;
  }

  .add_3d {
    border-radius: 0
  }

  #service_sub_top_menu li a {
    font-family: Pretendard, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    margin: 0px;
  }

  .top_menu_service ul {
    justify-content: space-evenly;
  }

  .function-title {
    padding: 24px 16px 12px;
  }

  .function-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0px 16px 0px;
    gap: 6px;
  }


}

@media(max-width:800px) {
  .add_box {
    display: block
  }

  .add_box li {
    width: 100%
  }

  #section_02 .add_box li:first-child {
    margin-bottom: 65px
  }

  #section_03 .add_box li:first-child {
    margin-bottom: 50px
  }

  #section_06 .add_box li:first-child,
  #section_07 .add_box li:first-child {
    margin-bottom: 27px
  }


  .threed .threedcontents {
    height: 330px;
    gap: 13px;
  }

  .about .about {
    height: 330px;
    gap: 13px;
  }
}

@media(max-width:700px) {

  .add_scroll:after,
  .add_scroll::before {
    display: none
  }

  .add_video .tab {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:600px) {
  .news {
    height: 110px;
    padding: 0 16px;
  }

  .banner h2 {
    font-family: 'Noto Sans';
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    height: 24px;
  }

  #news-wrap {
    grid-template-columns: repeat(1, 1fr);
    font-family: 'Noto Sans';
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    padding: 0 16px;
    margin-top: 29px;
  }

  .img-wrap {
    padding-bottom: 40px;
    box-shadow: none;
  }

  .banner {
    height: 110px;
    padding: 0 16px;
  }

  .service .section_wrap section .content_wrap {
    gap: 6px;
    height: 405px;
  }

  .service .section_wrap section .content_wrap .content {
    box-shadow: none;
    height: 200px;
    border: 0px;
    border-radius: 4px;
  }

  .add_3d .inner {
    height: 370px
  }

  .add_3d .inner iframe {
    width: 350px;
    height: 382px
  }


}