section.about {
  max-width: 1600px;
  margin: 0 auto;
  padding-top: 150px;
}

/********* greeting *********/
.greeting {padding-top: 150px;}
.greeting .intro {
  max-width: 1600px;
  margin: 0 auto;
}
.greeting .greeting-inner {
  display: flex;
  flex-wrap: wrap;
}
.greeting .greeting-inner .img-box {border-radius: 80px;
overflow: hidden;
width: 37%;
    height: 100%;
    object-fit: cover;}
    .greeting .greeting-inner .img-box video {
            height: 100%;
    width: 100%;
    }
.greeting .greeting-inner img { transition: transform 0.5s ease;}

.greeting .greeting-inner .img-box:hover img {
    transform: scale(1.1);
}
.greeting .greeting-inner .txt-box {padding-left: 100px;}
.greeting .greeting-inner .rep {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 30px;
  padding-top: 30px;
}
.greeting .greeting-inner .txt-box .desc {padding-top: 50px;}
.greeting .greeting-inner .rep .bold {font-size: 30px;}
.greeting .greeting-inner .rep .name {font-size: 35px;}
.greeting .vision {padding: 150px 0 0 0;}
.greeting .vision .txt-box {
  background: #007459;
  padding: 50px 0;
  text-align: center;
  color: #fff;
}
.vision-silde {
  display: flex;
  gap: 50px;
}

/* 260206 */
.vision-silde .cont-area li .hidden {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.4s ease-out, opacity 0.4s ease-out, margin-top 0.4s;
    }
    .vision-silde .cont-area li.open .hidden {
        max-height: 200px; /* 충분한 높이 지정 (내용에 따라 조절 가능) */
        opacity: 1;
        margin-top: 20px; /* 내용과 간격 */
    }

    .vision-silde .img-area > div {
        opacity: 0;
        transition: opacity 0.4s ease-in-out;
        position: absolute; /* 겹쳐서 보여주기 위해 필수 */
        top: 0; left: 0; width: 100%; height: 100%;
        background-size: cover;
        background-position: center;
    }
    .vision-silde .img-area > div.active {
        opacity: 1;
        z-index: 1;
    }
    
    /* 클릭 가능함을 표시 */
    .vision-silde .cont-area li {
        cursor: pointer;
    }
    /*  */

.img-area {
  width: 50%;
  position: relative;
  overflow: hidden;
   height: 940px; 
}
.img-area div {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}
.item1 { background-image: url('/images/sub/vision-img-01.png'); }
.item2 { background-image: url('/images/sub/vision-img-02.png'); }
.item3 { background-image: url('/images/sub/vision-img-03.png'); }
.item4 { background-image: url('/images/sub/vision-img-04.png'); }
.img-area .active {
  opacity: 1;
  z-index: 2;
}
.cont-area {
  width: 50%;
}
.cont-area li {
  padding: 50px 0;
  border-bottom: 1px solid #ccc;
  transition: all 0.8s ease;
  height: 180px;    
  overflow: hidden;
}
.cont-area li:last-child {border: none; padding-bottom: 0;}
.cont-area li.open {
  height: auto;      
  max-height: 1000px;  
  transition: max-height 0.8s ease;
}
.cont-area li.open .front .tit1::before {
  content: '';
  width: 10px;
  height: 10px;
  background: #007459;
  border-radius: 50%;
  position: absolute;
  right: -20px;
  bottom: 5px;
}
.cont-area li .front {
  display: flex;
  justify-content: space-between;
}
.cont-area li .front .tit1 {
  font-size: 35px;
  position: relative;
  max-height: fit-content;
}
.cont-area li .front .tit2 {padding-right: 13%;}
.cont-area li .hidden {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(20px);
  transition: max-height 0.8s ease, opacity 0.8s ease, transform 0.8s ease;
}
.cont-area li.open .hidden {
  opacity: 1;
  transform: translateY(0);
  padding-right: 17%;
  width: fit-content;
  margin-left: auto;    
  margin-top: -50px;
}
.cont-area li.open .hidden .tit3 {
  font-size: 30px;
  color: #333;
  text-align: right;
}
.cont-area li.open .hidden .txt {
  font-size: 20px;
  line-height: 30px;
  color: #666;
  text-align: right;
  padding-top: 10px;
}
/********* greeting *********/

/********* about *********/
.intro .intro-title {
  font-size: 45px;
  padding-bottom: 100px;
  letter-spacing: -1px;
  color: #000;
  text-align: center;
  line-height: 60px;
} 
.intro .intro-sub-title {
  max-width: 400px;
  margin: 0 auto;
  padding-bottom: 50px;
  display: flex;
} 
.intro-desc {
  line-height: 35px;
  font-size: 25px;
  letter-spacing: -0.5px;
  text-align: center;
}
.intro-image {padding: 50px 0;}
.intro-image img {width: 100%;}
.intro-stats {
  display: flex;
  justify-content: space-around;
}
.intro-stats li {
 display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.intro-stats img {
  width: 100px;
  padding: 5%;
  box-sizing: border-box;
}
.intro-stats li:nth-child(3) img {transform: translateX(15px);}
.intro-stats li:nth-child(4) img {padding: 0;}
.intro-stats .tit {
  font-weight: 600;
  font-size: 25px;
  letter-spacing: -1px;
  padding-top: 20px;
  text-align: center;
}
.intro-stats .text {
  font-size: 23px;
  letter-spacing: -1px;
  text-align: center;
}
.system {padding-top: 150px; text-align: center;}
.system .intro-title {font-weight: 400;}
.system h3 {
  text-align: center;
  font-size: 26px;
  line-height: 1.5;
  margin-bottom: 50px;
}
.system-grid {
  display: flex;
  gap: 35px;
  justify-content: center;
  flex-wrap: wrap;
}
.system-card {
  text-align: center;
  width: 48.9%;
  display: flex;
  flex-direction: column;
}
.system-card img {
  width: 100%;
  height: auto;
}
.system-card h4 {
  font-size: 35px;
  letter-spacing: -1px;
  padding: 40px 0 20px 0;
}
.system-card p {
  font-size: 25px;
  line-height: 35px;
  padding-bottom: 50px;
  letter-spacing: -1px;
}
.how-inner {
  position: relative;
  border-radius: 100px 100px 0 0;
}
.how-inner .intro {
  position: absolute;
  z-index: 9;
  font-size: 25px;
  letter-spacing: -0.5px;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1600px;
  width: 100%;
}
.how-inner .intro-desc {text-align: left;}
.how-inner .intro h3 {
  text-align: left;
  padding-bottom: 30px;
}
.how-image img:first-child {width: 100%;}
.how-image img:last-child {
  position: absolute;
  top: 8%;
  left: 8%;
}
.sub-brand {
  background: #007459;
  padding: 150px 0;
}
.sub-brand .intro-title ,
.sub-brand .intro-desc {color: #fff;}
.sub-brand .intro-title,
.history .intro-title,
.certified .intro-title,
.sub-business .intro-title,
.notice .intro-title,
.sub-contact .intro-title,
.sub-partners .intro-title {
  padding-bottom: 30px;
}
.sub-brand .brand-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.sub-brand .brand-inner img {padding: 50px 0;}
.sub-brand .brand-inner .bot {
  display: flex;
  gap: 50px;
  justify-content: space-between;
      padding-top: 100px;
}
.sub-brand .brand-inner .bot a {width: 100%; cursor: pointer;}
.brand-inner .bot .bot-inner .img-box {
  text-align: center;
  border: 1px solid rgb(255 255 255 / 50%);
  border-radius: 20px;
  padding: 30px 0;
}
.brand-inner .bot .bot-inner .img-box img {max-height: 230px;}
.brand-inner .bot .bot-inner p {
  font-size: 40px;
  text-align: center;
  padding-top: 30px;
  color: #fff;
}
/********* about *********/

/********* history *********/
.history .wrap {
  position: relative;
  padding-top: 100px;
}
.history .img-box {
  position: relative;
  overflow: hidden; 
  width: 100%;
  margin: 0 auto;
  border-radius: 80px;
}
.history .img-box img {
  width: 100%;
  display: block;
  animation: zoomMove 6s infinite ease-in-out;
}
@keyframes zoomMove {
  0% {
    transform: scale(1) translateX(0);
  }
  25% {
    transform: scale(1.05) translateX(-20px); 
  }
  50% {
    transform: scale(1) translateX(0);      
  }
  75% {
    transform: scale(1.05) translateX(20px);
  }
  100% {
    transform: scale(1) translateX(0);     
  }
}
.history .wrap .tabs {
  display: flex;
  background: rgb(0 116 89 / 80%);
  padding: 25px 0;
  position: absolute;
  width: 100%;
  bottom: 0;
  color: rgb(255 255 255 / 50%);
  justify-content: center;
  font-size: 30px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0 0 80px 80px;
}
.history .wrap .tabs .tab {
  width: 20%;
  text-align: center;
}
.history .wrap .tabs .tab:nth-child(2) {
  border-left: 1px solid rgb(255 255 255 / 50%);
  border-right: 1px solid rgb(255 255 255 / 50%);
}
.history .wrap .tabs .active-tab {color: #fff;}
.history .tab-container {
  padding-top: 150px;
  display: flex;
  flex-direction: column;
  gap: 150px;
  position: relative;
} 
.history .tab-container::before {
  content: '';    
  height: 106.2%;
  position: absolute;
  border: 1px solid #E5E5E5;
  left: 48%;
  top: 0%;
}
.history .tab-container .cont {
  display: flex;
  scroll-margin-top: 120px;
} 
.history .tab-container .cont .left {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 50px;
} 
.history .tab-container .cont .left:hover {

}
.history .tab-container .cont .left video {
        width: 90%;
    border-radius: 20px;
    object-fit: cover;
}
.history .tab-container .cont:first-child .left .sub-title {
    padding-bottom: 50px;
}
.history .tab-container .cont .left .sub-title {
  color: #63BA75;
  font-size: 25px;
  padding-top: 10px;
}
.history .tab-container .cont .left img:last-child {padding-top: 50px;}
.history .tab-container .cont .right {
  width: 50%;
  padding: 0 50px;
} 
.history .tab-container .cont .right ul {
  display: flex;
  flex-direction: column;
  gap: 30px;
} 
.history .tab-container .cont .right ul li:first-child {position: relative;}
.history .tab-container .cont .right ul li:first-child .year::before {
  content: '';
  background: #63BA75;
  width: 10px;
  height: 10px;
  position: absolute;
  border-radius: 50%;
  left: -12.2%;
  top: 10px;
} 
.history .tab-container .cont .right ul li .year {
  font-size: 25px;
  font-weight: bold;
  padding-bottom: 10px;
} 
.history .tab-container .cont .right ul li .desc {
  font-size: 20px;
  line-height: 35px;
} 
/********* history *********/

/********* certified *********/
.safety .safety-inner .txt-box {
  display: flex;
  padding: 50px 100px 0 100px;
  justify-content: space-between;
}
.safety .safety-inner .txt-box .title,
.safety .safety-inner .txt-box .desc {padding: 0;}
.safety .safety-inner .bot {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  padding-top: 150px;
}
.safety .safety-inner .safety-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 31.25%;
}
.safety .safety-inner .safety-item.down {padding-top: 150px;}
.safety .safety-inner .safety-item .safety-icon {
  padding-top: 50px;
  padding-left: 30px;
}
.safety .safety-inner .safety-item .title {
  font-size: 35px;
  padding-top: 10px;
  font-weight: 500;
  padding-left: 30px;
}
.safety .safety-inner .safety-item .sub-title {
  font-size: 25px;
  color: #333333;
  padding-top: 30px;
  padding-left: 30px;
}
.safety .safety-inner .safety-item .desc {
  font-size: 20px;
  color: #666666;
  padding-top: 10px;
  padding-left: 30px;
}
.cert-swiper {
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 100px !important;
}
.cert-swiper .swiper-slide {
        display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}
.certified .swiper-button-next {right: 10% !important;}
.certified .swiper-button-prev {left: 10% !important;}
.certified .swiper-button-next, 
.certified .swiper-button-prev {
    background: #000;
    color: #fff !important;
    font-size: 1rem;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50px !important;
    top: 60% !important;
}
.certified .swiper-button-next:after, 
.certified .swiper-button-prev:after {
    font-size: 1.25rem !important;
}
.certified {
  background: #F5F5F5;
  padding: 150px 0;
}
.certified ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  gap: 50px;
}
.certified ul li {
  width: 24%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.certified ul li .title {
  font-size: 20px;
  color: #4D4D4D;
  padding-top: 30px;
  text-align: center;
}
/********* certified *********/

/********* location *********/
section.location {padding-bottom: 150px;}
.location .intro .office {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 50px;
  margin-bottom: 50px;
}

.location .txt-box h3 {
  font-size: 45px;
  letter-spacing: -2px;
  font-weight: 400;
}
.location .info-right {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 20px;
}
.location .info-right > div {
  width: 320px;
  border: 1px solid #e5e5e5;
  border-radius: 30px;
  padding: 30px 40px;
  box-sizing: border-box;
}
.location .info-right > div img {max-width: 40px;}
.location .info-right > div p {
  font-size: 20px;
  text-align: left;
  padding-top: 15px;
  letter-spacing: -1px;
  line-height: 30px;
}
.location .map {margin-bottom: 50px;}
.location .map-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.location .map-btn button {
  display: flex;
  gap: 50px;
  align-items: center;
  width: 300px;
  height: 60px;
  border: 1px solid #e5e5e5;
  border-radius: 15px;
  box-sizing: border-box;
  justify-content: center;
  background: transparent;
}
.location .map-btn img {max-width: 30px;}
.location .map-btn p {
  font-size: 18px;
  letter-spacing: -1px;
}
.location .tabs {
  display: flex;
  width: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  color: #4D4D4D;
} 
.location .tab-btn { 
  padding: 20px 0;
  width: 100%;
  font-size: 25px;
  cursor: pointer;
  border-radius: 20px;
} 
.location .tab-btn.active { background: #000; color: #fff; } 
.location .tab-content { display: none; padding-top: 100px;} 
.location .tab-content.active { display: block; }
/********* location *********/

/******** business ********/
.sub-business {padding-top: 150px;}
.sub-business-cont {padding: 100px 0 150px 0;}
.sub-business-cont .business-inner  {
  display: flex;
    flex-direction: column;
    gap: 100px;
}
.business-inner .business-item .item-inner {
    display: flex;
    gap: 50px;
    max-width: 1600px;
    margin: 0 auto;
    align-items: center;
}
.business-inner .business-item .item-inner .txt-box {
  display: flex;
    gap: 30px;
    padding-top: 150px;
        justify-content: flex-end;
        width: 50%;
}
.business-inner .business-item .item-inner .txt-box .title {
    font-size: 40px;
    display: flex;
    gap: 30px;
    padding: 0;
    flex-direction: column;
    text-align: right;
}
.business-inner .business-item .item-inner .txt-box .icon-box {
background: #000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.5s ease;
}
.business-inner .business-item .item-inner .txt-box .icon-box:hover {
  background-color: #63BA75;
}
.business-inner .business-item .item-inner .txt-box .icon-box img { transition: transform 0.5s ease; }
.business-inner .business-item .item-inner .txt-box .icon-box:hover img { transform: rotate(90deg); }
.business-inner .business-item.open .item-inner .txt-box .icon-box {
  background: #63BA75;
}

.business-item.open .icon-box img {
  transform: rotate(90deg);
}

.business-inner .business-item .item-inner .txt-box .desc {
      padding: 0;
    text-align: right;
    color: #4D4D4D;
}
.business-inner .business-item .item-inner .img-box {
  width: 50%;
  overflow: hidden;
}
.business-inner .business-item .item-inner .video-box video {
    width: 80%;
    border-radius: 30px;
}
.business-inner .business-item .item-inner .img-box img {
transition: all 0.3s linear;
 border-radius: 40px;
}
.business-inner .business-item .item-inner .img-box:hover img {
    transform: scale(1.01);
    border-radius: 40px;
}
.business-inner .business-item .hidden {
    max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease;
}
.business-item .hidden-inner {
  margin-top: 100px;
  padding: 150px 0;
  border-radius: 50px;
  background: #f5f5f5;

  opacity: 0;
  transition: opacity 0.6s ease;
}
.business-item.open .hidden {
  max-height: 1500px;
}

.business-item.open .hidden-inner {
  opacity: 1;
}

.business-inner .business-item.fir .hidden ul {
     display: flex;
    flex-wrap: wrap;
    gap: 50px;
    align-items: center;
    justify-content: center;
    max-width: 1600px;
    margin: 0 auto;
}
.business-inner .business-item.fir .hidden ul li {
      font-size: 25px;
    font-weight: 500;
    width: 48%;
    text-align: center;
    padding: 50px 100px;
    background: #fff;
    border-radius: 20px;
    position: relative;
}
.business-inner .business-item.fir .hidden ul li::before {
  content: '';
  background: url('/images/sub/check-icon.png');
    width: 40px;
    height: 40px;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-repeat: no-repeat;
        background-size: cover;
}

.business-inner .business-item.sec .img-box,
.business-inner .business-item.thi .img-box {
  padding-left: 50px;
}
.business-inner .business-item.sec .hidden .process-chart {
  background: #f5f5f5;
  width: 100%;
  border-radius: 50px;
  padding: 0;
}
.business-inner .business-item.sec .hidden .chart-img {display: none;}
.business-inner .business-item.sec .hidden .process-chart .desc {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.business-inner .business-item.sec .hidden .process-chart .desc > div {
  display: flex;
  gap: 25px;
  align-items: center;
}
.business-inner .business-item.sec .hidden .process-chart .desc .oem .label,
.business-inner .business-item.sec .hidden .process-chart .desc .odm .label {
  background: #63BA74;
  color: #fff;
  border-radius: 50px;
  font-size: 20px;
  width: 100px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
.business-inner .business-item.sec .hidden .process-chart .desc > div p {
  font-size: 25px;
  letter-spacing: -1px;
}
.business-inner .business-item.sec .hidden .process-chart .desc .odm .label {
  background: #007459;
}
.business-inner .business-item.sec .hidden .chart {
  display: flex;
  justify-content: space-between;
  max-width: 1600px;
  margin: 0 auto;
  background: #fff;
  padding: 50px 100px;
  box-sizing: border-box;
  border-radius: 20px;
  margin-top: 50px;
}
.business-inner .business-item.sec .hidden .step {
  flex: 1;
  position: relative;
  text-align: center;
  text-align: center;
  border-left: 1px solid #cccc;
}
.business-inner .business-item.sec .hidden .step:last-child {border-right: 1px solid #cccc;}
.business-inner .business-item.sec .hidden .step-title {
  font-size: 28px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #000;
  letter-spacing: -1px;
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid #cccc;
  padding-top: 15px;
}
.business-inner .business-item.sec .hidden .step-title span {
  font-size: 15px;
  color: #808080;
}
.business-inner .business-item.sec .hidden .bar {
  height: 40px;
  position: relative;
  margin-bottom: 25px;
}
.business-inner .business-item.sec .hidden .bar.oem {
  background: #63ba75;
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
  width: 100%;
  z-index: 9;
  color: #fff;
  font-size: 25px;
  line-height: 40px;
}
.business-inner .business-item.sec .hidden .bar.oem-f {
  background: #63ba75;
  clip-path: polygon(0 0, 101% 0, 101% 50%, 101% 101%, 0 100%);
  width: 101%;
}
.business-inner .business-item.sec .hidden .bar.oem-s {background: transparent;}
.business-inner .business-item.sec .hidden .bar.odm {
  background: #1f7f4f;
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
  width: 100%;
  z-index: 9;
  color: #fff;
  font-size: 25px;
  line-height: 40px;
}
.business-inner .business-item.sec .hidden .bar.odm-f {
  background: #1f7f4f;
  clip-path: polygon(0 0, 101% 0, 101% 50%, 101% 101%, 0 100%);
  width: 101%;
}

.business-inner .business-item.thi {

}
.business-inner .business-item.thi .solution  {
    max-width: 1600px;
    margin: 0 auto;
}
.business-inner .business-item.thi .solution h3 {
  font-size: 40px;
    text-align: center;
}
.business-inner .business-item.thi .process {
  display: flex;
    background: #fff;
    padding: 200px 100px 100px;
    border-radius: 20px;
    position: relative;
    margin-top: 200px;
        justify-content: space-between;
}
.business-inner .business-item.thi .process .txt-box {
  display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
}
.business-inner .business-item.thi .process .arrow {
      height: 100%;
    margin: auto 0;
}
.business-inner .business-item.thi .process .sub-title {
  background: #007459;
    color: #fff;
    padding: 10px 20px;
    font-size: 16px;
    width: fit-content;
    border-radius: 20px;
    display: flex;
    align-items: center;

}
.business-inner .business-item.thi .process .sub-title-col {
  background: #63BA75;
}
.business-inner .business-item.thi .process .title {
      font-size: 25px;
    padding: 0;
    line-height: 35px;
        font-weight: 500;
}
.business-inner .business-item.thi .process .desc {
  padding: 0;
    font-size: 20px;
    line-height: 30px;
    color: #4D4D4D;
}
.business-inner .business-item.thi .process .process-graph {
  position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}
.business-inner .business-item.thi .process .process-graph li {
  color: #fff;
    background: rgb(99 186 117 / 80%);
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 28px;
    font-weight: 500;
}
.business-inner .business-item.thi .process .process-graph li:first-child {
  background: rgb(0 116 89 / 80%);
    transform: translateX(30px);
}
.business-inner .business-item.thi .process .process-graph li:nth-child(2) {
  transform: translateX(10px);
}
.business-inner .business-item.thi .process .process-graph li:nth-child(3) {
  background: rgb(0 116 89 / 80%);
    transform: translateX(-10px);
}
.business-inner .business-item.thi .process .process-graph li:last-child {
  transform: translateX(-30px);
}
/********* business *********/

/********* overseas *********/
.overseas {
        padding: 150px 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, #ffffff 100%);
}
.overseas .tabs {
  display: flex;
    gap: 100px;
    justify-content: center;
  }
.overseas .tabs .tab-btn {
    background: #fff;
    padding: 15px 40px;
    font-size: 25px;
    color: #B2B2B2;
    border-radius: 50px;
      box-shadow: 0px 0px 5px 0px #f2f2f2;
}

.overseas .tabs .tab-btn.active {
  background: #007459;
  color: #fff;
}
.overseas .tab-content {
 position: relative;
 height: 100%;
    width: 100%;
      display: none;
      padding-top: 100px;
 }
 .overseas .tab-content .map-box {
    text-align: center;
 }
 .overseas .tab-content .map-box img {max-width: 1600px;
width: 100%;
    padding: 0 50px;}
/*  .overseas .map-box {display: none;} */
.overseas .tab-content.active {
  display: block;
}
.overseas .dots .dot {
      width: 15px;
    height: 15px;
    background: #63BA75;
    border-radius: 50%;
    position: absolute;
      cursor: pointer;
  transition: all 0.3s ease;
}
.overseas .dots .phil {
        top: 469px;
    left: 798px;
}
.overseas .dots .chi {    
  top: 307px;
    left: 713px;
  }
.overseas .dots .cam {
  top: 455px;
    left: 693px;
}
.overseas .dots .vie {
top: 440px;
    left: 728px;
}


.overseas .dots .Ger {
    top: 282px;
    left: 302px;
}
.overseas .dots .Jap {
top: 341px;
    left: 863px;
}
.overseas .dots .Aus {
    top: 650px;
    left: 834px;
}
.overseas .dots .Uni {
top: 312px;
    left: 1385px;
}


.overseas .dots .Fra {
top: 308px;
    left: 289px;
}
.overseas .dots .Bel {   
  top: 280px;
    left: 296px;

}
.overseas .dots .Net {
top: 266px;
    left: 311px;
}
.overseas .dots .Cze {
top: 282px;
    left: 345px;
}
.overseas .dots .Ken {
    top: 519px;
    left: 385px;
}
.overseas .dots .Kaz {
top: 228px;
    left: 619px;
}
.overseas .dots .Rus {
    top: 174px;
    left: 738px;
}
.overseas .dots .Mon {
top: 228px;
    left: 759px;
}
.overseas .dots .Thai {
top: 427px;
    left: 665px;
}
.overseas .dots .Tai {
top: 407px;
    left: 784px;
}
.overseas .dots .Sing {
top: 545px;
    left: 694px;
}
.overseas .dots .Indo {
top: 527px;
    left: 757px;
}
.overseas .dots .Mal {
top: 531px;
    left: 683px;
}
.overseas .dots .Cam2 {
top: 442px;
    left: 693px;
}
.overseas .dots .Hong {
top: 407px;
    left: 750px;
}
.overseas .dots .New {
    top: 759px;
    left: 1022px;
}
.overseas .dots .Can {
    top: 221px;
    left: 1300px;

}
.overseas .dots .Cos {
    top: 472px;
    left: 1476px;
}
.overseas .dots .Dom {
top: 427px;
    left: 1529px;
}
.overseas .country-name {
  position: absolute; 
    width: 195px;
    height: 100px;
  transition: all 0.3s ease;
      font-size: 18px;
    font-weight: 500;
    padding-top: 33px;
}

.overseas .dots .dot.active {
  border: 1px solid #63BA75;
  animation: blink 1s ease infinite alternate;
}
@keyframes blink {
  from { box-shadow: 0px 0px 0px 0px #63ba747c; }
  to { box-shadow: 1px 1px 5px 10px #63ba747c; }
}
/********* overseas *********/

/********* partners *********/
.sub-partners .partners-inner {
  display: flex;
  gap: 50px;
  padding: 100px 50px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sub-partners .partners-inner .img-box {
  width: 48%;
  text-align: center;
  border: 1px solid #B2B2B2;
  border-radius: 20px;
  padding: 100px;
}
/********* partners *********/

/********* product *********/
.best-product {
    width: 100%;
    padding: 50px 0;
    overflow: hidden;
    background: url('/images/sub/best-product-bg.png') center / cover no-repeat;
    height: 88vh;
    transform: translateY(-1px);
    
}
.best-product h2 {
    text-align: center;
    font-size: 35px;
    color: #333333;
    font-weight: 600;
}
.best-product .pro-tit {
  position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -100%;
    z-index: 2;
    opacity: 0;
}
.best-product .swiper {
  padding-top: 200px;
}

.best-product .swiper-slide {
text-align: center;
    font-size: 20px;
    padding: 20px;
    padding: 50px;
    border-radius: 40px;
    position: relative;
    z-index: 3;
}
.best-product .swiper-slide .best-item {
        display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
    gap: 50px;
    position: relative;
    }
.best-product .swiper-slide .best-item .pro {
      box-shadow: 20px 13px 20px 0px rgb(0 0 0 / 20%);
    border-radius: 50%;
    position: relative;
    z-index: 3;
}
.best-product .swiper-slide .best-item .txt-box .sub-title {
  max-height: none;
  font-size: 20px;
    font-weight: 500;
}
.best-product .swiper-slide .best-item .txt-box .title {
      padding: 0;
    color: #fff;
    font-size: 25px;
    line-height: 30px;
    padding-top: 10px;
    font-weight: 500;
}

.best-product .swiper-slide .best-item .txt-box .title span {font-size: 16px;}
.best-product .swiper-slide-active {
  background: #fff; /* 배경 흰색 */
  z-index: 1;
}
.best-product .swiper-slide-active .best-item .pro {
  transform: scale(1.1);
}
/* 1. GIF 기본: 액티브일 때만 0.4로 등장 */
.best-product .swiper-slide-active.has-gif .pro-gif {
    opacity: 0.5 ;
    display: block; /* 혹은 기존 display 속성 */
}
.best-product .swiper-slide .pro-png {opacity: 0;}
.best-product .swiper-slide-active .pro-png {
    opacity: 1 !important;
}
/* 2. GIF 숨기기: hide 클래스 붙으면 아예 사라짐 */
.best-product .has-gif .pro-gif.hide {
    display: none ;
}

/* 3. PNG 기본: 평소엔 숨김 */
.best-product .has-gif .pro-tit {
    display: none;
}

/* 4. PNG 등장: show 클래스 붙으면 1로 서서히 등장 */
.best-product .swiper-slide-active .pro-png.show {
    display: block;
    opacity: 1 ;
    animation: fadeIn 0.2s; /* 서서히 나타나는 효과만 추가 */
}.best-product .swiper-slide .best-item .pro-gif {

        width: 1624px;

    top: -330px;}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.best-product .swiper-slide-active .best-item .txt-box .title {
 color: #000;
}
.best-product .swiper-slide-active .best-item .txt-box .sub-title {
  color: #63BA75; /* 글자색 변경 */
}
.best-product .swiper-button-next, 
.best-product .swiper-button-prev {color: #000 !important; }
.best-product .swiper-button-next {right: 36%; top: 65%;}
.best-product .swiper-button-prev {left: 36%; top: 65%;}






.products .tab-content ul {
display: flex;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: space-between;
}
.products .tab-content li {
  padding: 100px 50px 50px;
  position: relative;
  overflow: hidden;
}
.products .tab-content li p {
  background: rgb(0 0 0 / 50%);
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 30px;
    font-size: 20px;
    letter-spacing: -1px;
}
.products .tab-content li img {
    margin-top: 30px;
    transition: transform 0.3s linear;
}

.products .tab-content li:hover img {
    transform: scale(1.05);
}
/* .products .tab-content li:hover p {
  background: transparent;
}
 */
/* .products #sauce li::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('/images/sub/sauce-bg.png') center/cover no-repeat;
  opacity: 0;              
  transition: opacity .3s ease; 
  z-index: 0;
}
.products #seasoning li::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('/images/sub/seas-bg.png') center/cover no-repeat;
  opacity: 0;              
  transition: opacity .3s ease; 
  z-index: 0;
}
.products #broth li::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('/images/sub/broth-bg.png') center/cover no-repeat;
  opacity: 0;              
  transition: opacity .3s ease; 
  z-index: 0;
}
.products #sugar li::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('/images/sub/row-bg.png') center/cover no-repeat;
  opacity: 0;              
  transition: opacity .3s ease; 
  z-index: 0;
}
.products #spice li::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('/images/sub/spice-bg.png') center/cover no-repeat;
  opacity: 0;              
  transition: opacity .3s ease; 
  z-index: 0;
}
 */
.products #sauce li:hover::before,
.products #seasoning li:hover::before,
.products #sugar li:hover::before,
.products #spice li:hover::before,
.products #broth li:hover::before {
  opacity: 1;
}
.products .tab-content { display: none;} 
.products .tab-content.active {display: block;}
/********* product *********/

/********* inquiry *********/
.sub-contact {padding-bottom: 100px;}
.sub-inquiry {
    background: #F5F5F5;
    display: flex;
    flex-direction: column;
    padding: 100px 0 150px 0;
}
.sub-inquiry .inquiry-inner {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid #ccc;
}
.sub-inquiry .inquiry-inner .inquiry-item {
display: flex;
    gap: 30px;
    width: 48%;
        align-items: center;
}
.sub-inquiry .inquiry-inner .inquiry-item.textarea {
    width: 100%;
    gap: 0;
    align-items: flex-start;
}
.sub-inquiry .inquiry-inner .inquiry-item.file {
    align-items: flex-start;
}
.sub-inquiry .inquiry-inner .inquiry-item.textarea .title,
.sub-inquiry .inquiry-inner .inquiry-item.file .title {padding-top: 10px;}
.sub-inquiry .inquiry-inner .inquiry-item .radio {
    width: 100%;
        display: flex;
    gap: 30px;
}
.sub-inquiry .inquiry-inner .inquiry-item .title {
width: 200px;
    font-size: 20px;
}
.sub-inquiry .inquiry-inner .inquiry-item .req {
    color: #63BA75;
    vertical-align: -webkit-baseline-middle;
}
.sub-inquiry .inquiry-inner .inquiry-item input {
    border: none;
    width: 100%;
    border-radius: 10px;
    height: 50px;
    padding: 20px;
    font-size: 20px;
    color: #4d4d4d;
}

.inquiry-item .radio input[type="radio"] {
  display: none;
}

.inquiry-item .radio span::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
  box-sizing: border-box;
  transition: all 0.2s ease;
      border: 1px solid #ccc;
}
.inquiry-item .radio span::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #63BA75;
    top: 5px;
    left: 4px;
    border-radius: 50%;
}
.inquiry-item .radio label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #ccc;
  font-size: 20px;
}
.sub-inquiry .inquiry-item .radio input[type="radio"]:checked + span {
  color: #666666; 
  position: relative;
}

.sub-inquiry .inquiry-item .radio input[type="radio"]:checked + span::before {
  
      border: 1px solid #63BA75;
}

.sub-inquiry .inquiry-item .radio input[type="radio"] + span {
  color: #aaa;
}


.sub-inquiry .inquiry-inner .inquiry-item input[type="radio"] {
    width: auto;
    height: auto;
}
.sub-inquiry .inquiry-inner .inquiry-item textarea {
    width: 100%;
    font-family: var(--font-main);
    font-size: 20px;
    padding: 20px;
    border-radius: 10px;
    color: #4d4d4d;
    border: 0;
}
.sub-inquiry .inquiry-inner .inquiry-item textarea::placeholder,
.sub-inquiry .inquiry-inner .inquiry-item input::placeholder {
    color: #E5E5E5;
}
.sub-inquiry .inquiry-inner .inquiry-item .attached {
    width: 100%;
        display: flex;
    flex-direction: column;
    gap: 20px;
}
.sub-inquiry .inquiry-inner .inquiry-item .attached .file {
background: #fff;
border-radius: 10px;
padding-left: 20px;
}
.sub-inquiry .inquiry-inner .inquiry-item .attached .desc {

    width: 100%;
}
.sub-inquiry .inquiry-inner .inquiry-item .attached .desc p {
        font-size: 16px;
}
.sub-inquiry .inquiry-inner .inquiry-item .attached .desc p span {
margin-right: 5px;
}
.sub-inquiry .bot {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 30px 0;
    border-bottom: 1px solid #ccc;
    font-size: 20px;
}
.sub-inquiry .bot .inquiry-info {
    font-weight: 600;
}
.sub-inquiry .bot .inquiry-info .checkbox {margin-right: 10px;}
.sub-inquiry .bot .more {
        color: #808080;
}
.sub-inquiry .bot .more img {margin-left: 10px;}

.sub-inquiry .btn {text-align: center;}
.sub-inquiry .btn button {
    width: 250px;
    background: #63BA75;
    height: 90px;
    color: #fff;
    border-radius: 10px;
    margin-top: 100px;
    font-size: 40px;
}
.sub-inquiry  .file-input {
  display: none;
}
.sub-inquiry .file {
  display: flex;
  align-items: center;
  gap: 15px;
}
.sub-inquiry .file-name {
font-size: 18px;
    color: #4d4d4d;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 50px;
    display: inline-flex;
    align-items: center;
}
.sub-inquiry .file-btn {
display: inline-flex;
    height: 50px;
    padding: 0 30px;
    background: #000;
    color: #fff;
    font-size: 18px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    align-items: center;
}
.file-btn:hover {
  background: #4fa864;
}
/********* inquiry *********/


@media screen and (max-width: 1440px) {
/* greeting */
.greeting .intro {padding: 0 100px;}
.greeting .greeting-inner .img-box {width: 40%;}

.cont-area li .front .tit1 {
    font-size: 30px;}
.cont-area li.open .hidden .tit3 {
    font-size: 25px;}
.cont-area li.open .hidden .txt {
    font-size: 18px;}

/* about */

.intro .intro-title { font-size: 40px;}
.about .intro {padding-left: 100px; padding-right: 100px;}
.system-grid {gap: 30px;}
.system-card {
    width: 48.5%;
}
.how-inner .intro {padding-left: 100px;}
.how-image img:last-child {
    left: 100px;
}
.sub-brand {
    padding: 150px 100px;
}


/* history */
.history .wrap {
    margin: 0 100px;
}
.history .tab-container .cont .right ul li:first-child .year::before {
    left: -13.4%;
}

/* certified */
.safety .safety-inner {padding: 0 100px;}
.safety .safety-inner .img-box img {width: 100%;}
.safety .safety-inner .txt-box {        padding: 50px 0 0 0;
}
.safety .safety-inner .safety-item img:first-child {width: 100%;
padding-bottom: 50px;}
.safety .safety-inner .safety-item {
    width: 30%;
}
.safety .safety-inner .safety-item .title {
    font-size: 30px;
    padding-left: 20px;
}
.safety .safety-inner .safety-item .safety-icon {
     padding-top: 0; 
    padding-left: 20px;
    max-height: 20px;
}
.safety .safety-inner .safety-item .sub-title {
    font-size: 20px;
    padding-left: 20px;
}
.safety .safety-inner .safety-item .desc {
    font-size: 18px;
    padding-top: 20px;
    padding-left: 20px;
}

/* location */
.location .tab-btn {
    font-size: 22px;
}
.location .intro .office {
     padding: 0; 
     gap: 50px;
    
}.location .txt-box h3 {
    font-size: 40px;}
.location .info-right > div {
    width: 290px;
}

/* business */
.business-inner .business-item .item-inner {
    padding: 0 100px;
}
.business-inner .business-item .item-inner .img-box img {width: 100%;}
.business-inner .business-item .item-inner .txt-box .title {
    font-size: 30px;
    line-height: 45px;}

.business-inner .business-item.fir .hidden ul li {width: 45%; font-size: 20px;}
.business-item .hidden-inner {padding: 150px 100px;}
.business-inner .business-item.thi .process {
    padding: 200px 50px 100px;}
.business-inner .business-item.thi .process .title {
    font-size: 20px;
    line-height: 30px;}

.business-inner .business-item.thi .process .desc {
    font-size: 18px;
    line-height: 25px;}
.business-inner .business-item.thi .solution h3 {
    font-size: 35px;
}


/* overseas */

  .tab-content .dots,
  .tab-content .country-name {
    display: none !important;
  }

  /* product */
  .best-product .swiper-button-next {
    right: 37%;
    top: 55%;
}
.best-product .swiper-button-prev {
    left: 37%;
    top: 55%;
}
.best-product .swiper-slide .best-item .pro-gif {display: none;}
.best-product {height: 100vh;}

section.products {    padding-left: 100px;
    padding-right: 100px;}

.products .tab-content {
    padding: 100px 100px 0 100px;
}

/* partners */
.sub-partners .partners-inner {
    padding: 100px;}
.sub-partners .partners-inner .img-box {
    width: 47%;}

/* notice */
.recruit__list_wrap {
    padding-left: 100px !important;
    padding-right: 100px !important;
}

/* contact */
.sub-inquiry {
    padding: 100px 100px 150px;}
.sub-inquiry .inquiry-inner .inquiry-item {
    gap: 0;
    width: 47%;}
.sub-inquiry .inquiry-inner .inquiry-item .title {
    width: 230px;
}
.sub-inquiry .inquiry-inner .inquiry-item.textarea .title, .sub-inquiry .inquiry-inner .inquiry-item.file .title {width: 200px;}
.sub-inquiry .inquiry-inner .inquiry-item.file {width: 100%;
    gap: 0;}






}

@media screen and (max-width: 1200px) {
/* greeting */
.greeting .greeting-inner .txt-box {
    width: 60%;
    padding-left: 50px;
}
.greeting .greeting-inner img{
    width: 100%;
    height: 100%;
    object-fit: cover;}
.greeting .greeting-inner .txt-box .desc {
    padding-top: 30px;
}
.greeting .greeting-inner .txt-box .desc {font-size: 18px;}
.greeting .greeting-inner .rep {
    padding-top: 50px;
}

/* about */
.system-card h4 {font-size: 30px;}
.system-card p {
    font-size: 20px;}
.how-image {height: 600px;}
.how-image img:first-child {
    height: 100%;
    object-fit: cover;
}
.brand-inner .bot .bot-inner p {font-size: 35px;}

/* history */

.intro-desc {
    line-height: 30px;
    font-size: 20px;
}
.history .wrap .tabs {font-size: 25px;}
.history .tab-container {
    padding: 150px 100px 0 100px;
}
.history .tab-container .cont .left {
       padding: 0 50px 0 0;
}
.history .tab-container .cont .left img:last-child {
    width: 100%;
}
.history .tab-container .cont .right {
    padding: 0 0 0 50px;
}
.history .tab-container::before {
    left: 50%;
}
.history .tab-container .cont .right ul li:first-child .year::before {
    left: -12%;
}
.history .tab-container .cont .left img:first-child {
    max-height: 40px;
}

.history .tab-container .cont .left .sub-title {
    font-size: 20px;
}
.history .tab-container .cont .right ul li .year {
    font-size: 20px;
}
.history .tab-container .cont .right ul li .desc {
    font-size: 18px;
    line-height: 30px;
}

/* certified */
.safety .safety-inner .txt-box .title {width: 48%;}
.safety .safety-inner .txt-box .desc {width: 50%;}
.safety .safety-inner .txt-box .title br,
.safety .safety-inner .txt-box .desc br,
.safety .safety-inner .safety-item .desc br {display: none;}
.safety .safety-inner .safety-item.down {
    padding-top: 100px;
}
.certified ul {
    gap: 50px;
    padding: 100px 100px 0 100px;
}
.certified ul li {
    width: 30%;
}

/* location */
    .location .tab-btn {
        font-size: 20px;
    }
.location .info-right > div p {
    font-size: 18px;
    line-height: 25px;
}
.location .info-right > div img {
    max-width: 30px;
}
    .location .intro .office {
        flex-direction: column;
    }
.location .txt-box h3 br {display: none;}
.location .info-right {
    width: 100%;
    justify-content: space-around;}
.location .info-right > div {
    width: 35%;
}

/* business */
    .business-inner .business-item .item-inner .txt-box .title {
        width: 90%;
    }
.business-inner .business-item .item-inner .txt-box { 
    padding-top: 70px;
}
.business-inner .business-item.fir .hidden ul {gap: 30px;}
.business-inner .business-item.fir .hidden ul li {
    width: 48%;
    padding: 50px 50px;}
.business-inner .business-item.sec .hidden .process-chart {display: none;}
.business-inner .business-item.sec .hidden .chart-img {display: block; width: 100%;}

.business-inner .business-item.thi .process .process-graph li {
    font-size: 18px;
        width: 150px;
    height: 150px;
}
.business-inner .business-item.thi .process .txt-box {width: 25%;}
    .business-inner .business-item.thi .process {
        padding: 150px 50px 100px;
    }
.business-inner .business-item.thi .process .title {height: 90px;font-size: 18px;}
.business-inner .business-item.thi .process .title br {display: none; }
.business-inner .business-item.thi .process .arrow {
    padding: 0 20px;}
.business-inner .business-item.thi .process .desc br {display: none;}
.business-inner .business-item.thi .process .sub-title { 
    font-size: 14px;}

/* product */
.product-sub-top img {
    max-width: 500px;
}
.best-product h2 {
    font-size: 30px;
}
.best-product .pro-tit {
    top: -86%;
    max-width: 800px;
}
.best-product .swiper {
    padding-top: 150px;
}

.products .tab-content li {
    width: 29%;
        display: flex;
    justify-content: center;
}
.products .tab-content ul {
    gap: 30px;
}
.products .tab-content li p {
    padding: 20px;
    font-size: 16px;}

    .best-product .swiper-button-prev {
        left: 25%;}
            .best-product .swiper-button-next {
        right: 25%;}











}

@media screen and (max-width: 1024px) {
    .sub-top img {
    max-height: 120px;
}

/* greeting */
    .intro .intro-title {
        font-size: 35px;
        line-height: 50px;
    }
.greeting .greeting-inner .txt-box .desc br {display: none;}
.greeting .greeting-inner .rep .bold {
    font-size: 25px;
}
.greeting .greeting-inner .rep .name {
    font-size: 30px;
}
    .cont-area li .front .tit1 {
        font-size: 25px;
    }
    .cont-area li.open .hidden .tit3 {
        font-size: 20px;
    }
    .cont-area li.open .hidden .txt {
        font-size: 16px;
    }
    .cont-area li .front .tit2 {
        height: 100px;
    }

.cont-area li.open .hidden .txt br {display: none;}
    .img-area {
        height: 870px;
    }
    .cont-area li.open .front .tit1::before {display: none;}

    /* about */
    .intro .intro-sub-title {
    max-width: 300px;}
    .intro-desc {
    line-height: 35px;
    font-size: 20px;}
.intro-stats .tit {
    font-size: 20px;}
.intro-stats .text {
    font-size: 18px;}
    .system-card {
        width: 47.5%;
    }
    .system-card h4 {
        font-size: 25px;
    }
    .system-card p {
        font-size: 18px;
        line-height: 30px;
    }
.system-card:nth-child(3) p br {display: none;}

.brand-inner .bot .bot-inner .img-box img {
    max-height: 200px;
}
    .brand-inner .bot .bot-inner p {
        font-size: 25px;
    }

/* history */
    .history .wrap .tabs {
        font-size: 20px;
    }
    .history .tab-container .cont .right ul li:first-child .year::before {
        left: -15%;
    }
.history .tab-container .cont .left .sub-title {
    font-size: 16px;
}
.history .tab-container::before {height: 107.5%;}


/* certified */
.safety .safety-inner .img-box {height: 250px;}
    .safety .safety-inner .img-box img {    height: 100%;
    object-fit: cover;
    border-radius: 30px;
    }
        .safety .safety-inner .txt-box {
        flex-direction: column;
        gap: 30px;
    }
    .safety .safety-inner .txt-box .title {
        width: 100%;
    }
    .safety .safety-inner .txt-box .title br {display: block;}
    .safety .safety-inner .txt-box .desc {
        width: 100%;
    }
    .safety .safety-inner .safety-item {
        width: 100%;
    }
    .safety .safety-inner .safety-item.down {
        padding-top: 0;
    }
.safety .safety-inner .bot {
    gap: 100px;
}
    .safety .safety-inner .safety-item .title {
        padding-left: 0;
        font-size: 25px;
    }
.safety .safety-inner .safety-item .title br {display: none;}
    .safety .safety-inner .safety-item .safety-icon {
        padding-left: 0;
        max-height: 18px;
    }
    .safety .safety-inner .safety-item .sub-title {
        font-size: 18px;
        padding-left: 0;
        padding-top: 20px;
    }
    .safety .safety-inner .safety-item .sub-title br {display: none;}
    .safety .safety-inner .safety-item .desc {
        font-size: 16px;
        padding-top: 20px;
        padding-left: 0;
    }
    .certified ul {
        justify-content: flex-start;
            align-items: flex-start;
    }
    .certified ul li {
        width: 45%;
    }
.certified ul li .title {
    font-size: 18px;}

/* location */
    .location .tab-btn {
        font-size: 18px;
    }
    .location .txt-box h3 {
        font-size: 35px;
    }

/* business */
.business-inner .business-item .item-inner {
    gap: 30px;}
    .business-inner .business-item .item-inner .txt-box .title {
        font-size: 25px;
        line-height: 35px;
        width: 80%;
    }
.business-inner .business-item .item-inner .txt-box .desc {        font-size: 18px;
line-height: 30px;}
.business-inner .business-item .item-inner .txt-box .desc br {display: none;}
    .business-item .hidden-inner {
        padding: 100px;
    }
    .business-inner .business-item.fir .hidden ul li {
        font-size: 16px;
                padding: 40px 50px;
    }
.business-inner .business-item.fir .hidden ul li::before {width: 30px;
    height: 30px;}
    .business-inner .business-item.thi .process {
        flex-wrap: wrap;
        gap: 50px;}
    .business-inner .business-item.thi .process .txt-box {
        width: 46%;}
    .business-inner .business-item.thi .process .title {
        height: 60px;
    }
    .business-inner .business-item.thi .process .arrow {
        display: none;
    }

/* overseas */
.overseas .tabs {
gap: 50px;
}
.overseas .tabs .tab-btn {
    font-size: 20px;}


/* product */
.best-product .swiper-button-next,
.best-product .swiper-button-prev {display: block;}
    .best-product .swiper-button-prev {
        left: 24%;
        top: 55%;
    }
    .best-product .swiper-button-next {
        right: 24%;
        top: 55%;
    }
.products .tab-content li img {
    max-width: 150px;
}

/* partners */
.sub-partners .partners-inner .img-box {
    width: 46%;
    padding: 50px 100px;
    height: 200px;
    display: flex;
        align-items: center;
        justify-content: center;
    
}
    .sub-partners .partners-inner .img-box img {
        max-width: 150px;
    }


/* contact */
    .sub-inquiry .inquiry-inner .inquiry-item {
        width: 46%;
    }.sub-inquiry .inquiry-inner .inquiry-item .title {
    font-size: 18px;}
.sub-inquiry .inquiry-inner .inquiry-item input {
    font-size: 16px;}

.sub-inquiry .inquiry-inner .inquiry-item {
    gap: 30px;}

.sub-inquiry .btn button {
    width: 200px;
    height: 80px;
    font-size: 30px;
}
.sub-inquiry .bot {
    font-size: 16px;
}
}


@media screen and (max-width: 768px) {
/* greeting */
.greeting {
    padding-top: 100px;
}
.greeting .greeting-inner {
    flex-direction: column;
}
    .greeting .greeting-inner .img-box {
        width: 100%;
    }
    .greeting .greeting-inner .txt-box {
        width: 100%;
        padding: 50px 0 0 0;
    }
.greeting .greeting-inner .txt-box .title br {display: none;}
    .greeting .greeting-inner .rep .name {
        font-size: 25px;
    }
    .greeting .greeting-inner .rep .bold {
        font-size: 20px;
    }
.greeting .vision {
    padding: 100px 0 0 0;
}
.vision-silde {
    flex-direction: column;
}
    .vision-silde .img-area {
        height: 500px;
        width: 100%;
    }
.vision-silde .cont-area {
    width: 100%;
}
.cont-area li .front .tit2 {
    padding-right: 0;
}
.cont-area li {
    padding: 50px 100px;
}
.cont-area li.open .hidden {
    padding-right: 0;}
.cont-area li:last-child {
    padding-bottom: 50px;
}

/* about */
    .intro .intro-title {
        font-size: 30px;
        line-height: 40px;
    }
    .intro-desc {
        line-height: 30px;
        font-size: 18px;
    }
 
.about .intro .about-desc br {display: none;}
.intro-stats {    flex-wrap: wrap;
    gap: 30px;}
.intro-stats li {width: 47%;}
    .system-card {
        width: 46.5%;
    }
    .system-card h4 {
        font-size: 20px;
    }
    .system-card p {
        font-size: 16px;
        line-height: 25px;
    }


    .how-image img:last-child {
        max-width: 500px;
        top: 20%;
    }
.how-inner .intro h3 {
    padding-bottom: 20px;
}

    .brand-inner .bot .bot-inner .img-box img {
        max-height: 150px;
    }
    .brand-inner .bot .bot-inner p {
        font-size: 20px;
    }

/* history*/
.history .img-box {
    border-radius: 30px;
}
.history .wrap .tabs {border-radius: 0 0 30px 30px;}
.history .wrap .tabs .tab {
    width: 30%;
}

@keyframes zoomMove {
  0% {
    transform: scale(1) translateX(0);
  }
  25% {
    transform: scale(1.05) translateX(-10px); 
  }
  50% {
    transform: scale(1) translateX(0);      
  }
  75% {
    transform: scale(1.05) translateX(10px);
  }
  100% {
    transform: scale(1) translateX(0);     
  }
}
.history .wrap .tabs {
        font-size: 18px;
    }
    .history .tab-container .cont .left img:first-child {
        max-height: 30px;
    }
.history .tab-container .cont .left img:last-child {
    padding-top: 30px;
}
    .history .tab-container .cont .right ul li:first-child .year::before {
        left: -23%;
    }
    .history .tab-container .cont .right ul li .year {
        font-size: 18px;
    }
    .history .tab-container .cont .right ul li .desc {
        font-size: 16px;
        line-height: 25px;
    }
.history .tab-container::before {height: 104.2%;}

/* location */
    .location .tab-btn {
        font-size: 18px;
        padding: 20px;
    }
    .location .txt-box h3 {
        font-size: 30px;
    }
.location .info-right > div {
    padding: 20px;
}
    .location .info-right > div p {
        font-size: 16px;
    }
    .location .info-right > div img {
        max-width: 25px;
    }
.location .map{    height: 400px;}
.location .map iframe {height: 100%;}
.location .map-btn button {
gap: 20px;}
.location .map-btn p {
    font-size: 16px;
}
.location .map-btn img {
    max-width: 20px;
}

/* business */
    .business-inner .business-item .item-inner {
        flex-direction: column-reverse;
        gap: 50px;
    }
    .business-inner .business-item .item-inner .txt-box {
        width: 100%;padding-top: 0;
        align-items: flex-end;
    }
.business-inner .business-item .item-inner .img-box {
    width: 100%;
}
    .business-inner .business-item.fir .hidden ul {
        gap: 50px;
    }

    .business-inner .business-item.fir .hidden ul li {
        width: 100%;
    }
    .business-inner .business-item.thi .process .txt-box {
        width: 44%;
    }
    .business-inner .business-item.thi .process .title {
        line-height: 25px;
        height: auto;
    }
.business-inner .business-item .item-inner .video-box video {width: 100%;}

    /* overseas */

        .overseas .tabs .tab-btn {
        font-size: 18px;
    }
    .overseas .tabs {
        gap: 30px;
    }

/* product */
    .product-sub-top img {
        
    transform: translateY(28px)  !important;
        max-height: 100px;
    }
    .best-product h2 {
        font-size: 25px;
    }
    .best-product .swiper-button-next {
        right: 19%;
        top: 55%;
    }
    .best-product .swiper-button-prev {
        left: 19%;
        top: 55%;
    }

    .location .tab-btn {
        font-size: 16px;
        padding: 20px 0;
    }
    .products .tab-content {
        padding: 100px 0 0 0;
    }
    .products .tab-content li {
        width: 47%;
    }

/* partners */
.sub-partners .partners-inner {gap: 30px;}
    .sub-partners .partners-inner .img-box {
        width: 47%;
        padding: 20px;
        height: 200px;}
    .sub-partners .partners-inner .img-box img {
        max-width: 120px;
    }

/* notice */
.recruit__table_row .col.date {
    font-size: 14px !important;
}

/* contact */
    .sub-inquiry .inquiry-inner .inquiry-item {
        width: 100%;
    }
    .sub-inquiry .inquiry-inner .inquiry-item .title {
        width: 300px;
    }
.sub-inquiry .inquiry-inner .inquiry-item.textarea {gap: 30px;}
    .sub-inquiry .inquiry-inner .inquiry-item.textarea .title, .sub-inquiry .inquiry-inner .inquiry-item.file .title {
        width: 300px;
    }
        .sub-inquiry .inquiry-inner .inquiry-item.file {

        gap: 30px;
    }
    .sub-inquiry .inquiry-inner .inquiry-item .attached .desc p {
    font-size: 14px;
}
.sub-inquiry .bot {flex-direction: column; align-items: center;
    gap: 20px;}

}

@media screen and (max-width: 414px) {
     .sub-top img {
    max-height: 100px;
}
        .intro .intro-title {
        font-size: 30px;
        padding-bottom: 50px;
    }
/* greeting */
.greeting {overflow: hidden;}
    .greeting .intro {
        padding: 0 20px;
    }
.greeting .greeting-inner .txt-box .title br {display: block;}
    .greeting .greeting-inner .txt-box .desc {
        line-height: 30px;
    }
    .greeting .greeting-inner .rep {
        flex-direction: column;
        gap: 10px;
    }
    .cont-area li {
        padding: 50px 20px;
        height: 170px;
    }
.cont-area li .front .tit2 img {width: 80%;}
    .cont-area li .front .tit1 {
        font-size: 20px;
    }
    .cont-area li.open .hidden {
    margin-top: -25px;
}
    .cont-area li.open .hidden .tit3 {
        font-size: 18px;
    }
    .cont-area li.open .hidden .txt {
        font-size: 14px;
    }
.cont-area li.open .front .tit1::before {display: none;}
section.location {overflow: hidden;}
.best-product .swiper-slide .pro-png {display: block !important;}
.view__wrap {
    margin: 100px 20px !important;
}
/* about */
    .about .intro {
        padding-left: 20px;
        padding-right: 20px;
    }
    .intro .intro-sub-title {
        max-width: 230px;
    }
.intro-image {height: 300px;}
.intro-image img {
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
    .intro-stats {
        gap: 30px;
        justify-content: center;
}
.intro-stats img {
    width: 60px;
}
    .intro-stats .tit {
        font-size: 18px;
        padding: 0;
    }
    .intro-stats .text {
        font-size: 16px;
    }
        .intro-stats li {
        width: 40%;
    }
.intro-stats li:nth-child(3) img {
    transform: translateX(10px);
}
.system .intro-title {font-size: 23px;}
    .system-card {
        width: 100%;
    }
    .system-card p {
    padding-bottom: 30px;}
    .system-card h4 {
        font-size: 18px;
    }
    .how-inner .intro {
        padding-left: 20px;
    }

.how .intro .intro-title br {display: none;}
.how .intro .intro-title {font-size: 25px;}
    .how-image img:last-child {
        max-width: 300px;
        top: 31%;
        left: 20px;
    }
    .sub-brand {
        padding: 100px 20px;
    }
.sub-brand .brand-inner .bot {
    flex-direction: column;
}
    .brand-inner .bot .bot-inner .img-box img {
        max-height: 180px;
    }
    .brand-inner .bot .bot-inner p {
        font-size: 18px;
    }

/* history */
    .history .wrap {
        margin: 0 20px;
    }
    .history .img-box {
        height: 300px;
    }
.history .img-box img {
    height: 100%;
    object-fit: cover;}
    .history .wrap .tabs {
        font-size: 15px;
    }
    .history .wrap .tabs .tab {
        width: 33%;
    }
@keyframes zoomMove {
  0% {
    transform: scale(1) translateX(0);
  }
  25% {
    transform: scale(1.05) translateX(-5px); 
  }
  50% {
    transform: scale(1) translateX(0);      
  }
  75% {
    transform: scale(1.05) translateX(5px);
  }
  100% {
    transform: scale(1) translateX(0);     
  }
}
.history .tab-container {
    flex-direction: column;
    gap: 100px;
    
        padding: 100px 20px;
}
.history .tab-container .cont {
    flex-direction: column;
    gap: 50px;
}
    .history .tab-container .cont .left,
        .history .tab-container .cont .right {
        width: 100%;
        padding: 0;
    }
.history .tab-container::before {display: none;}
.history .tab-container .cont .right ul li {
    text-align: center;
}

/* certified */
    .safety .safety-inner {
        padding: 0 20px;
    }
    .safety .safety-inner .txt-box .title br {
        display: none;
    }
.safety .safety-inner .bot {
    padding-top: 100px;
}
    .safety .safety-inner .safety-item .sub-title {
        line-height: 25px;
    }
    .safety .safety-inner .safety-item .title {
        font-size: 20px;
    }
    .safety .safety-inner .safety-item .desc {
        line-height: 25px;
    }
    .safety .safety-inner .safety-item .safety-icon {
        max-height: 16px;
    }
.certified {    padding: 100px 20px;
}
.certified ul {padding: 100px 0 0 0;}
    .certified ul li {
        width: 100%;
    }

/* location */
.location .tab-btn span {display: none;}
    .location .tab-btn {
        font-size: 16px;
                padding: 20px 0
    }

    .location .txt-box h3 {
        font-size: 25px;
    }
    .location .info-right {
        flex-direction: column;
    }
    .location .info-right > div {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 20px;
    }
.location .info-right > div p {padding: 0;}
.location .map-btn {
    flex-direction: column;
}
.location .info-right > div.none {display: none;}

/* business */
.sub-business {
    padding: 100px 20px 0 20px;
}
    .business-inner .business-item .item-inner {
        padding: 0 20px;
    }
.business-inner .business-item.sec .img-box, .business-inner .business-item.thi .img-box {padding: 0;}
    .business-item .hidden-inner {
        padding: 100px 20px;
    }

.business-item .hidden-inner {border-radius: 0;}

    .business-inner .business-item.thi .process .txt-box {
        width: 100%;
    }
.business-item.open .hidden {
    max-height: 2000px;
}
    .business-inner .business-item.thi .process .process-graph li {
        font-size: 13px;
        width: 100px;
        height: 100px;
    }

    .business-inner .business-item.thi .process {
        padding: 150px 50px 100px;
            margin-top: 150px;
    }
.business-inner .business-item.thi .process .process-graph {top: -40px;}

/* overseas */
.overseas {background: #f0f0f0;
     background-image: none !important;padding-bottom: 50px;}
    

.overseas .map-box {display: block;}
.overseas .overseas-map {width: 100%;}
.overseas .tabs {
    padding: 0 20px;
    flex-direction: column;
}
.overseas .tabs .tab-btn {
    padding: 15px 30px;
    font-size: 14px;
   
}
.overseas .tab-content .map-box img {
    padding: 0 20px;
}
.overseas .tab-content {padding-top: 50px;}

/* product */
  .best-product .swiper-button-next ,
    .best-product .swiper-button-prev {
display: none;
    }
    .product-sub-top img {
        max-height: 70px;
        transform: translateY(19px) !important;
    }
    .best-product h2 {
        font-size: 18px;
    }
    .best-product .swiper {
        padding: 150px 20px;
    }
    .best-product {    height: 700px;
    background-position-x: -200px;}
.best-product .swiper-slide-active .best-item .pro {
    max-width: 200px;
}
.best-product .swiper-slide .best-item .txt-box .title {
    font-size: 20px;
}
.best-product .swiper-slide .best-item .txt-box .sub-title {
    font-size: 18px;
}
    .best-product .pro-tit {
top: -65%;
        max-width: 500px;
    }

    section.products {
        padding-left: 20px;
        padding-right: 20px;
    }
.location .tabs {
    flex-direction: column;}
    .products .tab-content li {
        width: 100%;
    }
    .products .tab-content li img {
        max-width: 300px;
    }

/* partners */
    .sub-partners .partners-inner {
        padding: 100px 20px;
    }
    .sub-partners .partners-inner .img-box {
        width: 100%;

}

/* notice */
    .intro .intro-title {
        padding-bottom: 30px;
    }
    .notice .intro-desc {
        line-height: 30px;
        font-size: 16px;
    }
.recruit__list_wrap {padding-left: 20px !important; padding-right: 20px !important;}

/* contact */
    .sub-inquiry {
        padding: 100px 20px;
    }
.sub-inquiry .inquiry-inner .inquiry-item {
    flex-direction: column;
        align-items: flex-start;
}
    .sub-inquiry .inquiry-inner .inquiry-item {
        gap: 10px;
    }
    .sub-inquiry .inquiry-inner .inquiry-item .title {
        font-size: 16px;
    }
.sub-inquiry .inquiry-inner .inquiry-item .title br {display: none;}
    .sub-inquiry .inquiry-inner .inquiry-item.textarea,
    .sub-inquiry .inquiry-inner .inquiry-item.file {
        gap: 10px;
    }
.sub-inquiry .bot {align-items: flex-start;}
    .sub-inquiry .btn button {
        width: 150px;
        height: 50px;
        font-size: 20px;
    }
.sub-inquiry .file-btn {font-size: 14px;}
.certified .swiper-button-next, .certified .swiper-button-prev {
    width: 30px !important;
    height: 30px !important;}
    .certified .swiper-button-next:after, .certified .swiper-button-prev:after {
    font-size: 1rem !important;
}
.certified .swiper-button-next {
    right: 5% !important;
}
.certified .swiper-button-prev {
    left: 5% !important;
}
 .recruit__table_list {    border-top: 2px solid #333;}
 .recruit__table_row .col.num {
    background: #333;
    width: 25px;
    border-radius: 50px;
    color: #fff  !important;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 14px !important; 
 }
 .col.title a, .recruit__table_row .col.date {
    font-size: 16px;
}
    .recruit__table_row {
        gap: 10px;}
}