/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a { text-decoration:none; color:inherit; }

/* Mobile Optimization */
html, body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

body {
  position: relative;
  width: 100%;
  min-height: 100vh;

  transition: padding-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Touch Optimization */

img, video {
  max-width: 100%;
  height: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.cntcBtn {
  color: #333333;
  border: 1px solid #333333;
  border-radius:8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 400;
  transition: all 0.3s ease;
  display: inline-block;
  text-decoration: none;
  background: transparent;

}

.cntcBtn:hover {
  background: #ffffff;
  color: #0066cc;
  font-weight: 700;
  text-decoration: underline;
  border: 1px solid #ffffff;
  text-shadow: none;
}



/* Top Button */
#topBtn {
  position: fixed;
  bottom: 60px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: #ffffff;
  color: #858585;
  border: 1px solid #858585;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  z-index: 99999;
  font-size: 22px;
  transition: all 0.3s ease;
}
#topBtn i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 

#topBtn:hover { 
   transform: translateY(-5px);
   border: 1px solid #0a0a0a85;
}
#topBtn:hover i {color:#0a0a0a;}

/* contents */
.contents {}

/* main-visual + core-features */
.main-visual-wrap { }

/* 페이지별 배경 이미지 변수 */
:root {
  --bg-pin: url('./images/bg_pin.png');
  --bg-pki: url('./images/bg_pki.png');
  --bg-web: url('./images/bg_web.png');
  --bg-mail: url('./images/bg_mail.jpg');
}
/*subVisual*/
.subVisual {
  position: relative;
 width:100%;
 height: 550px;
 /* height:700px; */
 padding-top:50px;
  align-items: center;
    display: flex;
    flex: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0px;
    justify-content: center;
}
.subVisual2 {

 width:100%;
 height:80vh;
 padding-top:50px;

  align-items: center;
    display: flex;
    flex: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0px;
    justify-content: center;
    border-radius: 0 0 ;
}

.subVisual h2 {
  font-family: 'Play', 'Noto Sans KR', sans-serif;
  font-size: 3.8rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 24px;

}

.contact_visual {
  color: #ffffff;
  position: relative;
  height: 550px;
  min-height: 400px;
  overflow: hidden;
}

.contact_visual > * {
  position: relative;
  z-index: 2;
}

.contact_visual::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 150%;
  background: url('../images/bg_contact.jpg');
  background-size: cover;
  background-position: 40% 40%;
  background-repeat: no-repeat;
  z-index: 1;
  will-change: transform;
  transform: translateY(var(--parallax-y, 0px));
}

.reVisual {
  background: url('../images/bg_research.jpg');
  background-size: cover;
  background-position: 40% 40%;
  background-repeat: no-repeat;
}
.reVisual h2 {
  color: #ffffff;
}
/* 원격지원 패럴랙스 배경 */
.support_visual {
  color: #ffffff;
  position: relative;
  height: 60vh;
  min-height: 400px;
  overflow: hidden;
}

.support_visual > * {
  position: relative;
  z-index: 2;
}

.support_visual::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  background: url('../images/bg_contact.jpg');
  background-size: cover;
  background-position: 40% 40%;
  background-repeat: no-repeat;
  z-index: 1;
  will-change: transform;
  transform: translateY(var(--parallax-y, 0px));
}

/* Main Visual */
.main-visual {
  position: relative;
 width:100%;
 height: 100vh;
 /* height:800px; */
  background-color: #080808;
  z-index:2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.main-visual-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  background-image: url('../images/main_img.jpg');
  background-color: #080808;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  animation: cinematic-movement 20s infinite ease-in-out;
}

.main-visual-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* Main Visual Inner */
.main-visual-inner {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 40px;
}

/* 부드러운 시네마틱 줌 애니메이션 - 여백 없음 */
@keyframes cinematic-movement {
  0% {
    transform: scale(1.0);

    filter: blur(1px);
  }
  
  25% {
    transform: scale(1.0);
  
    filter: blur(0.7px);
  }
  
  50% {
    transform: scale(1.1);

    filter: blur(0px);
  }
  
  75% {
    transform: scale(1.0);

    filter: blur(0.7px);
  }
  
  100% {
    transform: scale(1.0);
 
    filter: blur(1px);
  }
}

  .mainSlogan {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 15;
    width: 100%;
    text-align: center;
  }

  .changing-word {
    display: flex !important;
    position: relative;
    height: 7rem; /* font-size 4rem에 맞춰 조정 */
    overflow: visible;
    text-align: center;
    z-index: 20;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

.changing-word span {
  position: absolute;
  display: flex;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -48%);
  width: 100%;
  opacity: 0;
  animation: changeWord 9s infinite;
  margin-left: 0;
  font-family: 'Play', 'Noto Sans KR', sans-serif;
  font-size: 3.0rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;

  z-index: 25;
  justify-content: center;
  align-items: center;
}

  .changing-word span:nth-child(1) {
    animation-delay: 0s;
    opacity: 1;
  }
.changing-word span:nth-child(2) {
  animation-delay: 3s;
}
.changing-word span:nth-child(3) {
  animation-delay: 6s;
}

/* .rest {  
  height: 7rem;
  font-family: 'Play', 'Noto Sans KR', sans-serif;
  font-size: 8.0rem;
  font-weight: 800;
  color: #000000 !important;
  text-shadow: 
    -1px -1px 0 #ffffff,
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
  position: relative;
  z-index: 25;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
} */
.rest img {
  width: 1000px;
  height: 100%;
  padding: 0 30px;
  object-fit: contain;
  animation: imageScale 0.5s ease-out forwards;
}

@keyframes imageScale {
  0% {
  
    opacity: 0;
  }
  50% {

    opacity: 0.1;
  }
  100% {

    opacity: 0.7;
  }
}


@keyframes changeWord {
  0%   { opacity: 0; transform: translate(-50%, calc(-50% + 100px)); }
  5%   { opacity: 1; transform: translate(-50%, -50%); }
  30%  { opacity: 1; transform: translate(-50%, -50%); }
  35%  { opacity: 0; transform: translate(-50%, calc(-50% - 100px)); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 100px)); }
}


.main-visual-bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center;
}
.container {width:100%;
background-color: #111111;
}
.container_wht {
  width:100%;
  background-color: #ffffff;
  border-radius: 0 0 50px 50px;
}
.container_inner {width:100%;background: linear-gradient(to bottom, #fff 70%, #d8dae3 100%);padding: 0 0 4rem;border-radius: 0 0 50px 50px;}
.container_inner2 {width:100%;background: #ffffff;padding: 0 0 4rem;border-radius: 0 0 50px 50px;}
.container_inner3 {width:100%;background: #ffffff;padding: 0 0 10rem;border-radius: 0 0 50px 50px;}
section.trust_section {width: 92%;margin:100px auto;}
section.product-section,section.map_section {width: 80%;margin: 100px auto;}
/* section.map_section {  width: calc(100% - 12rem); margin: 0 6rem;} */
.about_section{}
.trust{
  background-color: #0026ff;
  background-image: url('../images/bg_trust.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  padding: 8rem 8rem;
  border-radius:40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2%;
  height:700px;
}
.trust:after{
  content: '';
}
.trst_text{flex: 1.2 1 0;}
.trst_text p:nth-child(1),.trst_text p:nth-child(2) {
  font-size: clamp(1.2rem, 3vw, 2.5rem);
  font-weight: 700;
  margin-bottom:7px;
}
.trst_text p:nth-child(3){
  font-size:0.95rem;
  margin-top:20px;
  color:#dedfe6;
}
.trst_text span {
  color: #d1d6ff;
}

.trst_cards {
 
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: flex-end;
  align-items: center;
}
.card {
  background-color: #00000020;
  border-radius: 18px;
  padding: 3rem;
  width:100%;  
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;

  backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(12px);
  }

  .trust-desc {  display: flex;    flex-direction: row;gap:20px;}
  .trust-desc .tdIcon {
    font-size: 1.5rem;
    margin-bottom: 0;
    color: #fff;
    display: block;
    text-align: center;
  }
  .trust-desc>p {
    font-size:1.2rem;
    font-weight: 700;
    color: #ffffff;
  }
  .trust-desc>p>span {
    display: block;
    font-size: 0.95rem;
    font-weight: 200;
    color: #ffffff;
    margin-top:5px;
  }
  .trust-number {
    margin-left: auto;
    font-size: clamp(2.2rem, 5vw, 3.3rem);
    font-weight: 700;
    color: #ffffff;
    font-family: 'Play', 'Noto Sans KR', sans-serif;
  }



  /*제품*/

  .product-section {
    margin:150px auto 0 !important;
    position: relative;
    z-index: 1;
  }

  .prd_item:nth-child(1) h2 {
    font-family: 'Play', 'Noto Sans KR', sans-serif;
    font-size: clamp(2.0rem, 3vw, 2.8rem);
     font-weight:700;
    margin-bottom: 10px;
    color: #222;
    text-align: left;
  }
  .prd_item:nth-child(1) h2 span {
    color: #282ab1;
    font-size: clamp(2.0rem, 3vw,2.8rem);
    font-weight: 700;
  }
  /* .product-grid {display:flex;flex-direction: row;align-items: start; justify-content: space-between; } */
  .product-grid {width:100%;margin:0 auto;overflow:hidden;}
  .prd_item:nth-child(1) {float:left;width:350px;}
  .prd_item:nth-child(2) {float:right;width:calc(100% - 350px);max-width:1400px;padding-bottom:19rem;}
  
  .prd_cards {    
    overflow: hidden;
    padding-bottom:15rem;
}
   .prdCard {    
    position: relative;
    overflow: hidden;
    /* box-shadow: 0px 13px 10px -7px rgba(0, 0, 0,0.1); */
    float:right;
    width:35%;
    margin:3%;
    border-radius:30px;
    aspect-ratio: 1 / 1.45;
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), 
    transform 0.7s cubic-bezier(0.4,0,0.2,1);
  
  } 
  .prdCard:nth-child(1),.prdCard:nth-child(2) {margin-top:0;}
  .prdCard:nth-of-type(odd) {
    position: relative;
    top: 14rem;
  }  
  .prdCard.visible {
      opacity: 1;
      transform: translateY(0);
  }
  
  .prdCard img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      transition: transform 0.5s ease, filter 0.5s ease;
      transform: scale(1) translate(0,0);
  }
  
  .prdCard:hover {
    cursor: pointer;
    /* transform: translateY(-15px);
      box-shadow: 0 40px 40px -20px rgba(0, 0, 0, 0.6); */
      box-shadow: 0px 30px 18px -8px rgba(0, 0, 0,0.1);

  }
  .product-grid:has(.prdCard:hover) .prdCard:not(:hover) {
    filter: grayscale(100%);
    transition: 1s ;
    opacity: 0.8;
    
  }
  .product-grid:has(.prdCard:hover) .prdCard:not(:hover) .product-title-text, .product-grid:has(.prdCard:hover) .prdCard:not(:hover) .keyword{
    opacity: 0.3;
    
  }
  /* .prd_cards:has(img:hover) img:not(:hover) {

    filter: grayscale(5);
    transition: 0.5s ;
  } */

  .prdCard:hover img {
    transform: scale(1.0) translate(0,0);
  }
  

  
  .product-title-area {
      position: relative;
      z-index: 2;
      margin:4rem 0 0 3rem;
  }
  
  .product-title-text {
    font-family: 'Play', 'Noto Sans KR', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
      font-weight: 700;
      color: #fff;
  }
  
  .product-keywords {
      display: flex;
      gap: 1rem;
      margin-top: 1rem;
      position: relative;
  }
  
  .keyword {
    opacity: 0.5;
      color: #fff;
      font-weight: 400;
      font-size: clamp(0.5rem, 6vw, 0.9rem);
      position: relative;
  }
  

/* Slogan/Highlight */
.slogan-section {
overflow: hidden;
margin:150px 0 250px;
}
.slogan-marquee {
  width: 100vw;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
}
.slogan-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: slogan-marquee 30s linear infinite;
}
.slogan {
  display: inline-block;
  font-family: 'Play', 'Noto Sans KR', sans-serif;
  font-size: 8.5vw;
  font-weight: 900;
  color: #111111;
  letter-spacing: -0.05em;
  white-space: nowrap;  margin-right: 6vw;
  line-height: 1.0;
}
.slogan .today {
  color: #282ab1;
}
@keyframes slogan-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 900px) {
  .slogan-marquee {
    min-height: 60px;
    padding-bottom: 6px;
  }
  .slogan {
    font-size: 12vw;
  }

}
/*clients*/

.clients-section {
  overflow: hidden;
  width: 95%;
  display: flex;
  flex-direction: row;
  
  gap:5rem;
  margin:200px 0 0 5%;
}
.clients_title{
  flex-basis: 20%;
	flex-shrink: 0;
}
.clients_title>h2 {
  font-family: 'Play', 'Noto Sans KR', sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 800;
  color: #222222;
  
}
.clients_title>p {font-size:0.90rem; font-weight:500; line-height: 1.4;color:#62626b;}

.clients-container {
  position: relative;
  overflow: hidden;
  flex-basis:80%;
  padding: 0 0 40px 10px;
}

.clients_cards {
  position: relative;
  display: flex;
  gap: 30px;
  transition: transform 0.5s ease;
}

/* 네비게이션 버튼 컨테이너 */
.clients-nav-buttons {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}

/* 공통 버튼 스타일 */
.clients-next-btn,
.clients-prev-btn {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border: 1px solid #e1e1e1;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  
}

.clients-next-btn:hover,
.clients-prev-btn:hover {
  border-color: #222222;

}

.clients-next-btn i,
.clients-prev-btn i {
  font-size: 22px;
  color: #b8b8b8;
  transition: color 0.3s ease;
}

.clients-next-btn:hover i,
.clients-prev-btn:hover i {
  color: #222222;
}
.clnt_card {
  flex: 0 0 auto;
  width: 350px;
  border: 1px solid #e1e1e1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1 / 0.8;
  gap:1.5rem;
  background:#ffffff;
  box-shadow: 0 50px 20px -40px rgba(69, 69, 70, 0.07);
  border-radius:30px;
  padding:4rem;
}
.client-logo {position:relative;}
.client-logo img {
  position:absolute;
  top:0;
  left:-30px;
  width: 180px;
}
.clnt_card >p {line-height:1.4;color:#5f5f5f;font-size:0.85rem;letter-spacing: -0.02em;}

/*문의하기*/
/* Contact */
.contact-section {
  text-align: center;
  background-color: #ffffff;
  padding:120px 0 190px;
  border-radius: 0 0 50px 50px;
}
.contact-section h2 {
  font-family: 'Play', 'Noto Sans KR', sans-serif;
  font-size: clamp(3.0rem, 8vw,6.2rem);
  font-weight: 800;
  margin-top: 0;
  margin-bottom: 30px;
  color: #282ab1;
}
.contact-btn {
  display: inline-block;
  background: #282ab1;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 18px 55px;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}
.contact-btn:hover {
  box-shadow: 0 8px 16px rgba(22, 56, 231, 0.3);
  transform: translateY(-2px);
}



/*푸터*/
.footer {
  background: #111111;
  padding:80px 30px;
}

.footer_inner { width: 100%;max-width:1600px; margin: 0 auto;display: flex;flex-direction: column;}
.footer .logo {
  display:block;
  width:300px;
  opacity: 0.5;
}
.footer_inner>p {
  color: #5f5f5f;
  font-size: 1.05rem;
  line-height:1.5;
  margin:4px 0;
  
}
.privacy {display: flex;flex-direction: row;gap:10px;margin:40px 0;}
.privacy li {}
.privacy li a {  color: #bbb;background-color:#303030;border-radius:10px;padding:10px 30px;font-size: 0.95rem;}
.privacy li a:hover {text-decoration: underline;}



/*about*/
.about_visual {background:url('../images/bg_company.jpg') 0 0 no-repeat;background-size: cover;color:#ffffff;}
.about1 {display:flex;flex-direction: row;width:90%;max-width:1300px;margin:200px auto;justify-content: space-between;color:#222222;}
.about1 p:nth-child(1) {flex-shrink: 0;flex-basis: 50%;font-size: clamp(2.05rem, 5vw, 3.2rem); font-weight:800;line-height: 1.4;}
.about1 p:nth-child(2) {flex-shrink: 0;flex-basis: 38%;font-size:18px; font-weight:500;line-height: 1.8;}

.about2 {
  position: relative;
  padding:170px 0;
  margin:5rem 0;
  width:100%;
  background: url('../images/bg_vision.jpg') bottom left no-repeat;
  background-size: cover;
}
  

.abtTxt {text-align: center;margin-bottom:0;color:#ffffff; }
.abtEng {   
  font-family: 'Play', 'Noto Sans KR', sans-serif;
  font-size: 60px;
  font-weight: 700;
  margin-bottom:20px;
  color:#3b3cb5;
  z-index: 8888 !important;
}
.abtKor {
  font-size: clamp(2.4rem, 3vw, 3.5rem);
  font-weight:700;
  color:#ffffff;
  line-height: 1.4;
}
.abtList {width:100%;max-width:1200px;margin:0 auto;overflow:hidden;perspective:1000px;}
.abtList li {
  position:relative;
  width:calc(33% - 30px);
  float:left;
  margin:0 15px;
  display:flex; 
  justify-content: flex-end;
  flex-direction: column;
  border-radius:25px;
  padding: 4rem;
  color:#ffffff;   
  aspect-ratio: 1 / 1.50;
   position: relative;
  overflow: hidden;
  text-align: center;
}
.abtList li::after {content: '';position:absolute;bottom:0;left:0;width:100%;height:50%;z-index:333;}
  .abtList li:nth-child(1)::after {background: linear-gradient(rgba(1, 50, 115, 0) 0% ,rgba(6, 23, 73, 0.9) 70%);}
  .abtList li:nth-child(2)::after {background: linear-gradient(rgba(1, 50, 115, 0) 0% ,rgba(0, 8, 19, 0.9) 70%);}
  .abtList li:nth-child(3)::after {background: linear-gradient(rgba(1, 50, 115, 0) 0% ,rgba(5, 22, 69, 0.9) 70%);}
.abtList li:nth-child(1) {
  background:#161d76 url('../images/vision1.jpg') center center no-repeat;
  background-size: cover;
}
.abtList li:nth-child(2) {
  background:#93c4e6 url('../images/vision2.jpg') center center no-repeat;
  background-size: cover;
}
.abtList li:nth-child(3) {
  background:#030303 url('../images/vision3.jpg') center center no-repeat;
  background-size: cover;
  margin-right: 0;
}
.abtList li p:nth-child(1) {font-size:1.08rem; font-weight:700;line-height: 1.5;letter-spacing: -0.02em;z-index: 8888;}
.abtList li p:nth-child(2) {font-size:0.95rem; font-weight:400;line-height: 1.4;letter-spacing: -0.02em;}
section.value_section {padding:120px 0;margin:200px 0;}
.value_inner {width:100%;max-width:1350px;margin:0 auto;overflow: hidden;}
.valueItems {}
.valueItems:nth-child(1) {}
.valueItems:nth-child(2) {}
.valueItems:nth-child(1)>h3 {font-size: clamp(1.5rem, 4vw, 2.6rem);  font-weight:700;margin-bottom:30px;text-align: center;}
.value>p {text-align: center;}

.aboutProduct {width:100%;}
.aboutProduct li {display:flex;flex-direction: row;gap:20px; align-items: stretch;align-items: center;justify-content: space-between;margin:80px 0;}
.aboutProduct_img {width:620px;height:300px;border-radius:15px;overflow:hidden;background-color: #f0f0f0;}
.aboutProduct li div p:nth-child(1) {font-size:1.10rem; font-weight:700;margin-bottom:30px;transition: all 0.3s ease;}
.aboutProduct li div p:nth-child(2) {font-family: 'Play', 'Noto Sans KR', sans-serif;font-size:1.7rem; font-weight:600;color:#9a9b9c;transition: all 0.3s ease;}


.map {overflow:hidden;margin-top:200px;}
.mapItem iframe {float:left; }

.mapItem:nth-child(1) {overflow:hidden;float:left;width:65%;border-radius:15px;background-color: #ffffff;height:500px;}
.mapItem:nth-child(2) {float:right;width:calc(35% - 50px);margin-left:50px;background-color: #ffffff;height:500px;}
.mapItem:nth-child(2)>h3 {font-family: 'Play', 'Noto Sans KR', sans-serif;font-size:2.65rem; font-weight:700;color:#000000;margin-bottom:50px;}
.ytInfo {}
.ytInfo li {display:flex;flex-direction: column; align-items: flex-start;gap:6px;padding:20px 0 ; border-bottom: 1px solid #dfdfdf63;}
.ytInfo li:first-child {padding-top:0;}
.ytInfo li:last-child {border-bottom: none;padding-bottom: 0;}
.ytInfo li span {font-size:0.90rem; font-weight:700;color:#000000;}
.ytInfo li p {font-size:1.10rem; font-weight:400;color:#868686;}



/*제품소개 - vestPin*/

.subTitle {position:absolute;top:50%;left:19%;transform: translate(-19%, -50%);z-index: 5;text-align:left;}
.subTitle>h2 {
  font-family: 'Play', 'Noto Sans KR', sans-serif;
  font-size: clamp(3rem, 8vw, 6.2rem);
  font-weight:700;
  line-height: 1.2;
    letter-spacing: -0.001em;
    
}
.subTitle>p {
  font-size: clamp(1.2rem, 3.5vw, 1.85rem);
  font-weight:700;
}


.arwdiv {position:absolute;bottom:-40px;width:110px;height:60px;display:inline-flex;align-items:center;justify-content: center;}
.arwdiv svg {
  width:100%;
  animation: moveUpDown 2.5s ease-in-out infinite;
}
@keyframes moveUpDown {
  0%, 100% { transform: translateY(0);opacity: 0.2; }
  50% { transform: translateY(-30px); opacity: 0;}
}

.mainMail {
  position: relative;
  overflow: hidden;
}
.mainMail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/bg_mail.jpg');
  background-size: cover;
  background-position: 50% 40%;
  background-repeat: no-repeat;
  z-index: -1;
  transform: scale(1.1);
  opacity: 1;
  transition: transform 2s ease-out;
}
.mainWeb {
  position: relative;
  overflow: hidden;
}
.mainWeb::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/bg_web.jpg');
  background-size: cover;
  background-position: 50% 40%;
  background-repeat: no-repeat;
  z-index: -1;
  transform: scale(1.1);
  opacity: 1;
  transition: transform 2s ease-out;
}
.mainPki {
  position: relative;
  overflow: hidden;
}
.mainPki::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/bg_pki.jpg');
  background-size: cover;
  background-position: 50% 40%;
  background-repeat: no-repeat;
  z-index: -1;
  transform: scale(1.1);
  opacity: 1;
  transition: transform 2s ease-out;
}
.mainPin {
  position: relative;
  overflow: hidden;
}
.mainPin::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/bg_pin.jpg');
  background-size: cover;
  background-position: 50% 40%;
  background-repeat: no-repeat;
  z-index: -1;
  transform: scale(1.1);
  opacity: 1;
  transition: transform 2s ease-out;
  
}

.mainPin.loaded::before ,.mainPki.loaded::before ,.mainWeb.loaded::before,.mainMail.loaded::before  {transform: scale(1);}
.subVisual2>.subTitle>h2,.subVisual2>.subTitle>p  {color:#ffffff !important}
/*핵심기능*/
.subSection {display:flex;flex-direction: row;width:100%;max-width:1520px;margin:200px auto 150px;}
.subSection:last-child {}
/* .subItems{flex: 1;}   */
.subItems:nth-child(1) {flex-basis: 600px; flex-shrink:0;}
  .subItems:nth-child(2) {flex-grow: 1;}
  .subItems h4 {font-family: 'Play', 'Noto Sans KR', sans-serif;font-size:2.65rem; font-weight:700;color:#282ab1;letter-spacing: -0.03em;}
  .subItems h4 span , .dgrmTitle h4 span {display:block;font-size:1.5rem; font-weight:700;color:#7e8081;line-height: 3;letter-spacing: 0;}
  .coreFtrs {display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: auto auto;gap:80px 50px;}
  .coreItems {
    display: grid;
    grid-template-rows: 345px 1fr;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
  }
  
  .coreItems.animate {
    opacity: 1;
    transform: translateY(0);
  }
  .coreImg {
  overflow: hidden;
  border-radius: 15px;
  background-color: #f0f0f0;
  height: 100%;
 

}
.coreImg img {
  width: 100%;
  height: 100%;
   object-fit: cover; 
}
  .coreTxt {display:flex;flex-direction: column;gap:0.5rem;padding:40px 0;}
  .coreTxt>p:nth-child(1) {font-size:1.35rem; font-weight:800;margin-bottom:6px;}
  .coreTxt>p:nth-child(2) {font-size:1.18rem; font-weight:400;color:#7e8081;line-height: 1.8;letter-spacing: -0.05em;}


.subDiagram {width:100%;padding:150px 0;margin:100px auto 200px;background: #e2e2ebad;border-radius:0;}
.subDiagram2 {background-color:#303030 !important;}
.dgrmTitle {text-align: center;}
.subDiagram2 .dgrmTitle h4,.subDiagram2 .dgrmTitle p {color:#e0e0e0 !important;}
.dgrmTitle h4 {font-size:2.65rem; font-weight:700;color:#282ab1;margin-bottom:1rem;font-family: 'Play', 'Noto Sans KR', sans-serif;}
.dgrmTitle p {font-size:1.2rem; font-weight:400;color:#727283;line-height: 1.7;letter-spacing: -0.05em;}
.dgrmImg {width:90%;max-width:1450px;padding:15px 50px;margin:60px auto 0;background:#ffffff;border-radius:20px;}
.dgrmImg img {width:100%;max-width:1300px;height:auto;}
.charcList {}
.charcList li {border-bottom:1px dashed #f1f1f1;padding:45px 0 40px;}
.charcList li:first-child {padding-top:0;}
.charcList li:last-child {border-bottom:none;}
.charcList li p:nth-child(1) {font-size:1.35rem; font-weight:800;margin-bottom:15px;line-height: 1.3;}
.charcList li p:nth-child(2) {font-size:1.15rem; font-weight:400;color:#7e8081;line-height: 1.7;letter-spacing: -0.05em;}

.processWrap {}
.sprtContent {display:grid;gap:10px;}
.sprtItem {background:#3b3cb5;padding:50px 50px;border-radius:20px;}
.sprtItem:nth-child(1) {grid-column: 1 / 3;	grid-row: 1 / 2; }
.sprtItem:nth-child(2) {grid-column: 1 / 2;	grid-row: 2 / 3; }
.sprtItem:nth-child(3) {grid-column: 2 / 3;	grid-row: 2 / 3; }
.sprtItem p:nth-child(1) {font-size:1.35rem; font-weight:700;margin-bottom:16px;color:#ffffff73;}
.sprtItem ul {}
.sprtItem ul li {display:inline-block;position:relative;font-size:0.90rem;color:#ffffff;letter-spacing: -0.05em;padding:0 10px;margin:2px 1px;}
.sprtItem ul li::before {content: '';display:inline-block;position:absolute;top:0;left:0;width:1px;height:14px;background-color:#ffffff25;border-radius:50%;margin-right:5px;}
.sprtItem ul li:first-child{margin-left:0;padding-left:0;}
.sprtItem ul li:last-child{margin-right:0;padding-right:0;}
.sprtItem ul li:first-child::before {display:none;}


/*1-1 파트너스*/
.prtWrap {width:100%;max-width:1500px;margin:0 auto;}
.prtFloat {position:sticky;top:100px;left:0;width:200px;}
.prtFloat ul {display:flex;flex-direction: column;gap:20px;}
.prtFloat ul li {}
.prtFloat ul li a {}
.prtFloat ul li a:hover {text-decoration: underline;}

.partnerWrap{}
.partnerConts {display:flex;flex-direction: row;margin: 90px 0; border-bottom:1px dashed #f0f0f0;padding-bottom: 90px;}
.partnerConts:last-child {border-bottom: none;}
.part1 {}
.ptItems {}
.ptItems:nth-child(1) {flex-basis: 350px; flex-shrink:0;}
.ptItems:nth-child(1)>p {font-size:1.8rem; font-weight:700;color:#222222;font-family: 'Play', sans-serif;}
.ptItems:nth-child(2) {flex-grow: 1;}

.ptList {display:grid;grid-template-columns: repeat(auto-fill,minmax(13%, auto));gap: 25px;}
.ptList>div {display:flex;justify-content: center; align-items: center; border:1px solid #f0f0f0;border-radius:10px;padding:15px 0;}
.ptList>div>img {width:80%;}



/*문의하기*/
.contactWrap {display:flex;flex-direction: row;max-width:1500px;width:100%;gap:50px;margin:4rem auto 8rem;padding:80px; justify-content: space-between;
 }
.contactItems {}
.contactItems:nth-child(1) {flex-basis:50%;flex-shrink: 0;}
.contactItems:nth-child(2) {flex-basis:50%;flex-shrink: 0;}
.cntctTilte {line-height: 1.4;letter-spacing: -0.05em;}
.cntctTilte>p:nth-child(1) { font-size: clamp(1.8rem,5vw,2.8rem); font-weight:600;margin-bottom:16px;color:#111111;font-family: 'Play', sans-serif;}

.cntctBtn {display:block;width:180px;margin:20px auto;background-color: #111111;color:#ffffff;padding:15px 0;border-radius:8px;cursor: pointer;border:none;}
.cntctForm {
  background: #eceef1;
  border-radius: 20px;
  padding: 60px 80px;
}

.cntctForm_title {font-size:22px; font-weight:600;color:#111111;margin-bottom:30px;}
.cntctForm_inner {display:flex;flex-direction: column;gap:16px;}
/* .cntctForm_item {display:flex;flex-direction: column;gap:50px;} */

.cntctForm_item:nth-child(5) {height:200px;}
input{border:none;}
.cntctForm_item:nth-child(5)>textarea {height:100%;overflow-y: auto;}
.cntctForm_item>label {display:block;font-size:1.20rem; font-weight:500;color:#8f8f8f;margin:10px 0;}
.cntctForm_item>input  {font-family:'Noto Sans KR', sans-serif;width:100%;height:55px;padding:10px 20px;border:1px solid #f0f0f0;border-radius:7px;transition: border 0.2s ease-in-out;font-size:1.05rem;}

.textarea {font-family:'Noto Sans KR', sans-serif;width:100%;height:250px;padding:15px ;border:1px solid #f0f0f0;border-radius:0;  transition: 0.3s;font-size:1.05rem;}
.textarea:focus {border:1px solid #111111;}
::placeholder {font-size: 1.05rem;}
.cntctForm_item>input:focus {outline:none;border:1px solid #202020;}
/* 브라우저 기본 체크박스 숨기기 */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 25px; 
  height: 25px;
  flex: none;
  position: relative;
  vertical-align: middle;
  display: inline-block;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 3px;
  overflow: hidden;
  margin: 20px 0;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.chkBox {margin-top:10px;}
.chkBox>label {font-size:1.05rem; font-weight:500;color:#000000;margin-top:4px;letter-spacing: -0.05em;}
.checkbox {
  width: 20px; 
  height: 20px;
  flex: none;
  position: relative;
  vertical-align: middle;
  display: inline-block;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 3px;
  overflow: hidden;
  margin: 0;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

input[type="checkbox"]:before,
.checkbox:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: transparent;
  transition: all 0.2s ease-in-out;
}

/* 체크된 상태 */
input[type="checkbox"]:checked,
.checkbox.checked,
input:checked + .checkbox {
  background-color: #000000;
  border-color: #000000;
}

input[type="checkbox"]:after,
.checkbox:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/ico_check.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

/* 체크된 상태에서 체크 아이콘 표시 */
input[type="checkbox"]:checked:after,
.checkbox.checked:after,
input:checked + .checkbox:after {
  opacity: 1;
}

/*원격지원*/


.sprtWrap{width:100%;max-width:1480px;padding:0 10px;margin:10rem auto;}

.sprtWrap>section{text-align: center;margin:5rem 0 2rem;}
.sprtWrap>section>h3{font-size:1.5rem; font-weight:700;color:#222222;font-family: 'Play', sans-serif;}
.sprtWrap section p{font-size:1.35rem; font-weight:700;color:#222222;}
.surProcess{overflow:hidden;width:100%;max-width:1200px;margin:0 auto;}
.surProcess li {float:left;width:calc(25% - 20px);height:250px;padding:40px;margin-right:20px;font-size:1.2rem;border:2px solid #e1e1e4;color:#222222; font-weight:600;border-radius:15px;text-align:left;}
.surProcess li:last-child {margin-right:0;}
.surProcess li img {display:block;width:60px;margin-bottom:30px;}
.surProcess li span {display:block;font-size:0.90rem; font-weight:400;color:#777986;line-height: 1.5;letter-spacing: -0.05em;margin-top:10px;}
.sprtBtn {display:inline-block;width:200px;background-color: #282ab1;color:#ffffff;padding:20px 0;margin:0 15px;border-radius: 10px;cursor: pointer;}


.researchCont {width:100%;max-width:1440px;padding:0 30px;margin:10rem auto;}
.reConts {display:flex;flex-direction: column;gap:20px;margin-bottom:100px;}
.reConts>p {flex-shrink:0;font-size:1.5rem; font-weight:700;color:#222222;margin-bottom:5px;}

.researchItem >h3 {font-size:1.8rem; font-weight:700;color:#222222;margin-bottom:30px;}
.techList,.researchList,.patentList {flex-grow:1;display: grid;grid-template-columns: repeat(4,minmax(25%, auto));gap:20px;}
.techList article,.researchList article,.patentList article {display:flex;flex-direction: column;gap:12px;padding:45px;border-radius:15px;}
.techList article {background: linear-gradient(180deg,rgba(233, 243, 243, 1) 30%, rgb(247, 252, 252) 100%);border:1px solid #e9f3f3;}
.researchList article {background: #E9F5FB;  background: linear-gradient(180deg,rgba(233, 245, 251, 1) 30%, rgb(248, 253, 255) 100%);border:1px solid #E9F5FB;}
.patentList article {background: #F7F7EF;  background: linear-gradient(180deg,rgba(247, 247, 239, 1) 30%, rgb(255, 255, 253) 100%);border:1px solid #F7F7EF;}


 article p {flex-grow: 1;font-size:1.05rem; font-weight:700;text-align:left;line-height: 1.4;letter-spacing: -0.05em;}
 .techList p{color:#31a0a0;}
 .researchList p{color:#528cca;}
 .patentList p{color:#4b3d1d;}  
 /* .researchList article p{ flex-grow: 1;font-size:1.0rem; font-weight:700;color:#1342a0;line-height: 1.3;letter-spacing: -0.03em;}
.patentList article p { flex-grow: 1;font-size:1.0rem; font-weight:700;color:#2d2a46;line-height: 1.3;letter-spacing: -0.03em;} */

.techList article ul {flex-grow: 2;}
.researchList article ul,.patentList article ul { flex-grow: 1;}
.techList article ul li,.researchList article ul li,.patentList article ul li {display:flex;flex-direction: row;gap:10px;padding:5px 0;}
.researchList article ul li span:nth-child(1) ,.patentList article ul li span:nth-child(1) {font-size:0.75rem; font-weight:700;color:#919191;}
.researchList article ul li span:nth-child(2) ,.patentList article ul li span:nth-child(2) {font-size:0.80rem; font-weight:400;color:#919191;}


.rsrchIcon {width:30px;height:auto;margin:0 0 7px 0;}
.rsrchIcon2 {width:24px;height:auto;margin:0 0 7px 0;}
.techIcon,.researchIcon /* ,.patentIcon */ { flex-shrink: 0;width:30px;height:30px;border-radius:50%;}
.techIcon {background: #dae3f7 url('../images/researchIcon01.png') 45% 50% no-repeat;background-size: 65%;}
.researchIcon {background:#ddd9f0 url('../images/researchIcon02.png') 45% 45% no-repeat;background-size: 65%;}
.patentIcon {background: #f5ecd4 url('../images/researchIcon03.png') 45% 45% no-repeat;background-size: 60%;}


.desc {overflow: hidden;padding:15px 0 20px;}
.desc li {float:left;background-color: #528d8dad;border-radius:5px;margin:1px;padding:5px 12px 6px!important;font-size:0.70rem; font-weight:400;color:#ffffff;}

/* VestPKI 전용 시네마틱 애니메이션 */
@keyframes cinematic-movement-pki {
  0% {
    transform: scale(1.1);
    background-position: 50% 40%;
    filter: blur(1px);
  }
  
  25% {
    transform: scale(1.15);
    background-position: 60% 50%;
    filter: blur(0.5px);
  }
  
  50% {
    transform: scale(1.2);
    background-position: 70% 60%;
    filter: blur(0px);
  }
  
  75% {
    transform: scale(1.15);
    background-position: 60% 50%;
    filter: blur(0.5px);
  }
  
  100% {
    transform: scale(1.1);
    background-position: 50% 40%;
    filter: blur(1px);
  }
}

/* YT 폴더 전용 스타일 */
.yt-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 4rem 0;
  margin: 2rem 0;
}

.yt-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.yt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.yt-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.yt-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.yt-card h3 {
  color: #ffffff;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.yt-card p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.yt-button {
  background: linear-gradient(45deg, #ff6b6b, #ee5a24);
  color: white;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.yt-button:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(238, 90, 36, 0.3);
}  


#header{  background: rgb(22, 22, 22,0.2);width:100%;position:absolute;z-index: 9999;backdrop-filter: blur(10px);}
#header:after{content:"";clear:both;display:block;}
.hdInner {width:100%;max-width:1500px;margin:0 auto;padding:0 50px;}

/* 스크롤 시 헤더 스타일 (흰색 배경) */
#header.scrolled{
    background: rgba(255, 255, 255,1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: #333;
    border-bottom: 1px solid rgba(240, 240, 240, 0.3);
  
  }

.search{float:right;padding:30px}
input{border:none;padding:10px;border-radius:20px}
.logo{width:100%;max-width:190px;float:left;padding:20px 0 20px}
.logo a{font-size:28px;display:block;padding:0 0 0 20px}
nav{float:right;}
nav>ul{float:left;position:relative}
nav li{list-style:none;float:left}
nav .dropdown{position:relative}
nav li a{float:left;padding:35px;opacity: 0.7;color:#ffffff;transition: all 0.3s ease-in-out;font-weight: 600;font-size: clamp(0.85rem, 3vw, 1.2rem);}
nav li a:hover {opacity: 1;text-decoration: underline;}

nav li ul{display:none}
nav li:hover ul{display:inline}
nav li li{float:none}
nav .dropdown ul{position:absolute;left:0;top:100%;background:#ffffff;border-radius:10px;padding:0;}
nav .dropdown li{white-space:nowrap;border-bottom:1px solid #ececec;}
nav .dropdown li:last-child {border-bottom:0;}
nav .dropdown li a{padding:18px 40px 16px;font-size:15px;min-width:120px;font-weight:500;}
nav .mega-dropdown{width:100%;position:absolute;top:100%;left:0;background:#fff;overflow:hidden;padding:10px 35px;}
nav li li a{float:none;color:#333;display:block;padding:10px 10px;border-radius:3px;font-size:13px}
nav .dropdown li a:hover{color: #3b3cb5;}
.mega-col{width:25%;float:left}
#menu-icon{display:none}
  
@media only screen and (max-width: 1170px) {
  nav >ul>li >a{padding:35px 15px}
}
@media only screen and (min-width: 960px) {
  nav{display:block!important}
}
@media only screen and (max-width: 959px) {
  #header{background: rgba(10, 10, 10, 0.00);width:100%;padding:0 5% 5% 5%;position: absolute;height:100%;z-index: 33333;backdrop-filter: blur(0px);}
  .hdInner {width:100%;margin:0 auto;position:relative;padding:0;}

  .logo a {padding: 5px 0 0 0;}
  nav{display:none;width:100%;clear:both;float:none;height:100vh;overflow-y:scroll;}
  nav::-webkit-scrollbar{
    display:none;
  }
#menu-icon{
  position:absolute;
  top:25px;
  right:20px;
  display:inline;
  cursor:pointer;
  width:26px;
  height:26px;
  z-index: 9999; 
}

/* <a> 태그 스타일 */
#menu-icon a {
  display:block;
  width:100%;
  height:100%;
  position:relative;
}
/* span 스타일 */
#menu-icon span{
  border:1px solid #fff;
  width:26px;
  display:block;
  -webkit-transition:all .2s;
  transition:all .1s;
  position: absolute; 
  left: 0;
  top: 50%; 
  transform: translateY(-50%); 
}
/* 첫 번째 막대기 위치 */
#menu-icon span.first {top:0px; }
#menu-icon span.second {top: 10px; }
/* 세 번째 막대기 위치 */
#menu-icon span.third {top: 20px; }

/* active 상태 */
#menu-icon.active .first{transform: rotate(45deg);top: 50%;left: 0;}
#menu-icon.active .second{opacity: 0;}
#menu-icon.active .third{transform: rotate(-45deg);top: 50%;left: 0;}
  #menu-icon.active .hdInner{height:100vh;}
  .search{float:none}
  .search input{width:100%}
  nav{padding:0 10px;}
  nav ul{overflow:hidden;float:none;padding-top:30px;}
  nav li{width:100%;float:none;}
  #header>.hdInner> nav> ul>li {padding-top:20px;}
  #header>.hdInner> nav> ul>li:first-child {padding-top:0px;}
  #header>.hdInner> nav> ul>li:last-child {padding:0px 0 60px;}
  #header>.hdInner> nav> ul>li> a {display:none;}
  #header>.hdInner> nav> ul>li:last-child> a {display:block !important;font-weight:500;text-align: center;color:#fff !important;font-size:20px !important;padding:20px 0;pointer-events: auto;}
  nav ul li a{float:none;padding:0 0;display:block; }
  #header .hdInner nav ul ul{display:block;position:static;background:none;border:none;padding:0}
  #header>.hdInner> nav >ul >li >ul>li {border-bottom:1px solid #ececec09;}
  #header>.hdInner> nav >ul >li >ul>li>a{color:#fff !important;font-size:20px !important;padding:22px 0;font-weight:500;text-align: center;}
  #header>.hdInner> nav >ul >li >ul>li:first-child>a{padding:0 0 18px 0;}
  #header .hdInner nav a:hover{color:#0063ff;border-radius:0;}
  .changing-word span, .rest {text-align: center;font-size: 2rem;}
}

@media all and (min-width:960px) and (max-width:1499px) { 
  section.product-section, section.map_section {width: 95%; margin: 100px auto;}
  .trust {flex-direction: column;padding: 4rem;}
  .trust  {}
    .trst_text { width:100%;flex:0.6 1 0 }  
    .trst_cards {width:100%;flex: 1 1 0;flex-direction:row; align-items: stretch;}
    .card {flex: 1 1 0;flex-direction: column;align-self: center;}
    .trust-desc {  display: flex;    flex-direction: column;gap:20px;}
    .trust-desc p {text-align: center;}
    .trust-number {margin-left: 0;}
  .contactWrap {width: calc(100% - 6rem);margin: 3rem;flex-direction: column;gap: 40px;}
    .contactItems:nth-child(1) {flex-basis:20%;flex-shrink: 0;}
    .contactItems:nth-child(2) {flex-basis:70%;flex-shrink: 0;}
    .subSection {display:flex;flex-direction: column;width:100%;max-width:1480px;padding:0 40px;margin:10rem auto;}
    .subSection:last-child {margin-bottom:0;}
    /* .subItems{flex: 1;}   */
    .subItems:nth-child(1) {flex-basis: 150px; flex-shrink:0;}
    /* .subItems h4 span {line-height: 1.5;} */
    .ptItems:nth-child(1) {flex-basis: 200px;}
    .ptList {gap: 12px;}
    .ptList>div>img {width:100%;}

  
} 
@media (max-width:720px) {
     .abtList li { width: calc(100% / 1 - 60px);margin: 15px 30px;aspect-ratio: 1 / 1;padding: 4rem 2rem;}
    .abtList li p {text-shadow: 0 0 3px #000000, 0 0 3px #000000;}
}
@media (min-width:720px)and (max-width:1123px) {
     .abtList li {width: calc(100% / 3 - 20px);margin: 0 10px;padding: 2rem 1rem;aspect-ratio: 1 / 1.7;}

}

@media all  and (max-width:1123px) { /* 
  .subVisual2:before {content: '';position:absolute;top:0;left:0;width:100%;height:100%;background-position: 140% 40%;background-repeat: no-repeat;background-size: 80%;} */
  .trust {flex-direction: column;padding: 4rem;  } 
  .trst_text {width:100%;} 
  .trst_cards {flex-direction: column;gap: 15px;width:100%;}
  .card { border-radius: 13px;justify-content: space-between;padding: 1.5rem 3rem;}
  .trst_cards>div.card {flex-direction: row;}
  .trust-desc  {flex-direction: row;}
  .trust-desc p {text-align:left;}
  .prd_item:nth-child(1) {width: 200px;}
.prd_item:nth-child(2) {width: calc(100% - 200px);}
.prdCard:nth-of-type(odd) {top:6rem;}
.product-title-area { position: relative;z-index: 2;margin: 2.5rem 0 0 2rem;}
.product-keywords {display:none;}
  .contactWrap {width: calc(100% - 6rem);margin: 3rem;flex-direction: column;gap: 40px;}
    .contactItems:nth-child(1) {flex-basis:20%;flex-shrink: 0;}
    .contactItems:nth-child(2) {flex-basis:70%;flex-shrink: 0;}

  .subSection {display:flex;flex-direction: column;width:100%;max-width:1480px;padding:0 40px;margin:10rem auto;}
    .subSection:last-child {margin-bottom:0;}
    /* .subItems{flex: 1;}   */
    .subItems:nth-child(1) {flex-basis: 150px; flex-shrink:0;}
      .subItems:nth-child(2) {flex-grow: 1;}
      .charcList li {padding: 45px 10px 40px;}
      .coreTxt>p:nth-child(1) {font-size: 1.40rem;}
      .coreTxt>p:nth-child(2) { font-size: 1.2rem; line-height: 1.8;}
      .sprtContent {margin-left: 0;}

  .reConts {display:flex;flex-direction: column;gap:0;margin-bottom:4rem;}
  .reConts>p {flex-shrink:0;width:100%;}
} 

/* 모바일 가로 & 태블릿 세로 (해상도 480px ~ 767px)*/ 
@media all and  (max-width:959px) {
  .subVisual2 {height: 500px;padding-top:0;}
  .subVisual2:before {z-index: 2;content: '';position:absolute;top:0;left:0;width:100%;height:100%;background-position:80% 40%;background-repeat: no-repeat;background-size:cover;}
  .subTitle {width:100%;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;opacity: 1;text-shadow:  0 0 1em #000000,0 0 0.2em #000000;}
.subTitle>h2 {}
.subTitle>p {text-align: center;font-size: 1.0rem;}  
  .mainSlogan {flex-direction: column;}
  .changing-word {display: none;}
  .changing-word span,.rest {text-align: center;font-size:4rem;height:4rem;}
  .trust {flex-direction: column;padding:3rem;}  
  .trst_cards {flex-direction: column;gap: 15px;width:100%;}
  .card { border-radius: 13px;}
  .trst_cards>div.card {flex-direction: row;}
.product-section {margin: -100px auto 0 !important; }
  .product-grid {overflow:hidden;}
  .prd_item:nth-child(1) h2 {display:none;}
.prd_item:nth-child(1) { width: 100%;float: left;}
.prd_item:nth-child(2) { float: left;width: 100%;max-width: 1200px;padding-bottom: 0rem;}
.prdCard {width: 46%;margin: 2% ;border-radius:30px;aspect-ratio: 1 / 1.30;}
.prdCard:nth-of-type(odd) {position: relative;top: 0rem;}
 .product-title-area {position: relative;z-index: 2;margin: 3rem 0 0 2rem;}
.product-keywords {display: none;}
.partnerConts {display:flex;flex-direction:column; }
.ptItems:nth-child(1) {flex-basis: 50px; flex-shrink: 0;}
  .clients-section {    width: 90%;flex-direction:column;margin: 5rem auto ;gap: 3rem;}
  .clients-nav-buttons {gap: 15px;margin-top: 20px;}
  .clients-next-btn,.clients-prev-btn {width: 60px;height: 60px;}  
  .clients-next-btn i,.clients-prev-btn i {font-size: 18px;}
  .clients_title {margin-left:10px;}
  section.value_section {margin: 70px 0;}
  .value_inner {flex-direction: column;}
  .about2 {padding: 80px 0 60px;}
.abtTxt {margin-bottom: 50px;font-size:1.85rem !important;}
  .aboutProduct {width:90%;margin:0 auto;}
  .aboutProduct li {width:calc(100% - 4px);margin: 1.5% auto;}
 .aboutProduct li:hover {width: calc(100% - 4px);transform: translate(0px, -5px);}
  section.map_section {width: calc(100% - 2rem); margin: 0 1rem;}
  .map {display:block;margin-top: 100px;}
  .mapItem {width:100% !important;}
  .mapItem:nth-child(2) {margin-top:20px;height:100%;margin-bottom:30px;}
  .mapItem:nth-child(2)>h3 {font-size: 2.25rem;}
  .ytInfo { padding: 0rem 0;}
  .ytInfo li {padding: 1.2rem 0;}
  .ytInfo li p {font-size: 1.0rem;}
  .subVisual h2 { font-size: 2.8rem;}
  .about1 {flex-direction: column;width:90%;margin:100px auto;gap:50px;}
  /* abtList 모바일 스타일 */
  .abtList-container {display: flex;transition: transform 0.3s ease;width: 300%; }



.ptList {grid-template-columns: repeat(auto-fill, minmax(20%, auto));gap: 10px;}
.ptList>div {display:flex;justify-content: center; align-items: center; border:1px solid #f0f0f0;border-radius:7px;padding:5px 0;}
.ptList>div>img {width:100%;}
.prtWrap {width: 90%;margin: 0 auto;}  
  .contactWrap {width: calc(100% - 2rem);padding:0;margin: 1rem ;gap: 20px;margin-bottom:60px;}
  .contactItems:nth-child(2), .contactItems:nth-child(2) {flex-basis: 100%;flex-shrink: 0;}   
  .cntctForm { background: #eceef1;border-radius: 20px;padding: 50px 20px;}
  .cntctTilte>p:nth-child(1) {margin-top:30px;}
  .cntctForm_inner {display:grid;gap:30px 20px;}
  .techList,.researchList,.patentList {display:grid;grid-template-columns: repeat(auto-fill,minmax(45%, auto));gap:10px;margin:  0;}
  .surProcess li {width:100%;height:auto;margin-bottom: 10px;margin-right:0;}
    .surProcess li:last-child {margin-bottom: 0;}
    .surProcess li img {width:50px;margin-bottom:20px;}
  .subDiagram {width:100%;padding:80px 20px;margin:200px auto;border-radius:0;}
  .dgrmImg {width: 95%; padding:0 20px;}   
  .coreFtrs {display: flex; flex-direction: column;gap:2rem;}
  .coreItems { flex-grow: 1;grid-template-rows: 1fr 0.5fr;}  
  .sprtItem {padding: 35px 30px 30px;border-radius: 15px;transition: all 0.5;}
    .sprtItem:nth-child(2) {grid-column: 1 / 3;grid-row: 2 / 3;}
    .sprtItem:nth-child(3) { grid-column: 1 / 3;grid-row: 3 / 4;}
  .footer_inner>p {font-size: 0.95rem;line-height: 1.5;}
  #topBtn {bottom: 30px;right: 30px;width: 50px;height: 50px;}
  .mainPin::before,.mainMail::before,.mainWeb::before {background-position: 90% 40%;transform: scale(1.8);}
  .mainPki::before {background-position: 80% 40%;transform: scale(1.8);}
  .mainPin.loaded::before, .mainPki.loaded::before,.mainWeb.loaded::before,.mainMail.loaded::before {transform: scale(1.5);}
  
} 

  /* 모바일 세로 (해상도 ~ 479px)*/ 
@media all and (max-width:579px) {
  .logo {max-width:140px;padding:10px 0;}
  .slogan-section {margin: 100px 0;}
     .slogan {font-size: 100px;}
  .changing-word span, .rest {font-size: 2rem;height: 2rem;}
  .subVisual {height:450px;}
  .container_inner2,.container_inner3 {    padding: 0 0 1rem;}
    .main-visual {height: 600px;}
  section.trust_section {width: 100%;margin: 0 auto;}
  .trust{border-radius: 0;padding:70px 2rem;flex-direction: column;height:auto;gap:20px;} 
    .trst_text:nth-child(1){display:none;}    
    .trst_cards {flex-direction: column;gap: 15px;width:100%;}
    .trst_cards >div.card { border-radius: 13px;padding: 2rem;flex-direction:column;}
    .trust-desc  {flex-direction: column;}
    .trust-desc p {text-align:center;}
    .trust-number {text-align:center;margin-left:0;}
.product-section { margin: 0px auto 20px !important;}
  .prdCard {width:96%;margin:30px 2%;border-radius: 20px;aspect-ratio: 1 / 1.3; }
  .clients-section {margin: 5rem auto 0;gap:1rem;}
  .clients-container {padding-left:0;}
  .clnt_card {flex: 0 0 auto;width: 350px;}
    .clients-nav-buttons {gap: 12px; margin-top: 15px;display: none;}
    .clients-next-btn,.clients-prev-btn {width: 55px;height: 55px;}
    .clients-next-btn i,.clients-prev-btn i {font-size: 16px;}
  .contact-section {padding: 50px 0 120px;}
  .about1 {width: 80%;}
    .about1 p:nth-child(2) {font-size: 15px;line-height: 1.8;}
    /* .abtList li { width: calc(100% / 1 - 20px);margin: 10px 10px;aspect-ratio: 1 / 1.1;padding: 4rem 2rem;}
    .abtList li p {text-shadow: 0 0 3px #000000, 0 0 3px #000000;} */
  .prtWrap {width:100%;}
    .partnerConts { margin: 30px 0 0px;padding:60px 40px 70px;border-bottom: 0;}
    .partnerConts:nth-child(odd) {background-color: #f5f5f58f;}
    .partnerConts:nth-child(1) {margin: 0 0;padding:60px 40px 40px 40px;}
    .ptItems:nth-child(1)>p {font-size: 1.5rem;font-weight: 700;color: #222222;}
    .ptList>div {background-color: #ffffff;}
  .techList,.researchList,.patentList {display:grid;grid-template-columns: repeat(auto-fill,minmax(100%, auto));gap:10px;margin: 1rem 0;}
    .techList article, .researchList article, .patentList article {padding:30px;}

  .subSection { margin:75px auto;padding:0 20px;}
  .subItems:first-child {text-align: left;flex-basis:0 ;margin-bottom:40px;}
  .subItems h4 ,.dgrmTitle h4 {font-size: 1.0rem;font-weight: 700;text-align:center;}
  .subItems h4 span , .dgrmTitle h4 span{ font-size: 2.2rem;color: #282ab1;line-height:1.7;font-weight:800;}

  .subDiagram {margin: 106px auto;}
  .dgrmTitle >p {font-size: 0.85rem;line-height:1.5;padding:0 20px;color: #4f5a77;}
  .dgrmImg {width: 100%;padding: 30px 0;margin: 30px auto 0;}
  .mapItem:nth-child(2) {margin-bottom: 50px;}
  .mapItem:nth-child(2)>h3 {font-size: 2.0rem;margin:20px 0 30px;}
  .subSection:last-child {margin-bottom: 70px;}
  .charcList li p:nth-child(1) {font-size: 1.35rem;letter-spacing: -0.05rem; margin-bottom:15px;}
  .charcList li p:nth-child(2) {font-size: 1.2rem;line-height: 1.8;}

  .sprtContent {gap:3px;}
  .sprtWrap {width: 100%;margin: 5rem auto;}
  .sprtWrap>section {margin: 2rem 0 2rem;}
  .sprtWrap section p {width:80%;margin:0 auto;font-size: 1.30rem;line-height: 1.6;letter-spacing: -0.05rem;}
  .sprtBtn {width: 100%;padding: 25px 0;margin: 10px 0;}

 /*250924 - 로컬 네트워크 팝업 css*/
  .popup-content {padding: 50px 25px 30px !important;}
  #view-details-btn {width:calc(100% - 60px);padding: 20px 30px;}
}  

 /*250924 - 로컬 네트워크 팝업 css*/

/* 전체 팝업 레이아웃 */
#popup-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 33335;
   pointer-events: auto; 
}
/* 팝업 내용 컨테이너 */
.popup-content {
  background-color: #fff;
  padding: 50px 50px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  text-align: center;
  width: 90%;
  margin:0 auto;
  max-width: 500px;
}
.popup-content>h2 {color:#282ab1;margin-bottom:12px;font-weight:700;font-size:15px;}
.popup-content>p.popTit {color:#000000;font-weight:700;font-size:28px;margin-bottom:30px;letter-spacing: -0.05rem;line-height:1.5;}
.popup-content>p.popTxt {line-height:1.8;padding:0 15px;}
.ppBold {font-weight:700;color:#000000;background-color: #dbf8ff;padding:0 5px;}
/* 상세보기 버튼 */
#view-details-btn {
  background-color: #282ab1;
  color: #fff;
  border: none;
  width:70%;
  padding: 15px 30px ;
  border-radius: 10px;
  cursor: pointer;
  font-weight:700;font-size:17px;
  margin: 40px 0 50px; /* 아래쪽 간격 추가 */
   pointer-events: auto; /* 버튼에 클릭이 가능하도록 설정 */
   transition: all 0.5s;
}
#view-details-btn:hover {  background-color: #16187e;}
.popup-footer-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#no-more-today {cursor: pointer;color:#555555;}
#no-more-today:hover {font-weight:700;color:#222222;}
#close-popup {
  background-color: #ffffff;
  border: 1px solid #ccc;
  font-size: 14px;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 5px;
  z-index: 33340;
   pointer-events: auto; /* 버튼에 클릭이 가능하도록 설정 */
   transition: all 0.5s;
}
#close-popup:hover {
  background-color: #222222;
  border: 1px solid #000000;
  color:#ffffff;
}
#popup-wrap.popup-hidden {display: none;}