/* ===== MAIN VISUAL UPGRADE ===== */


.main-visual {
  position: relative;
  width: 100%;
  height: calc(70vh -80px);          /* È­¸é ³ôÀÌ ±âÁØ */
  min-height: 480px;
  overflow: hidden;
}


.main-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* ºñÀ² À¯ÁöÇϸ鼭 ²Ë ä¿ò */
}


/* ¾îµÎ¿î ¿À¹ö·¹ÀÌ */
.main-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.08);
}


.main-visual-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  z-index: 2;
}


.main-visual-text h1 {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: 2px;
}


.main-visual-text p {
  font-size: 20px;
  margin-top: 20px;
}



.about-img img {
  width: 100%;
  border-radius: 12px;
}






.product-img img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}


.btn-more {
  display: inline-block;
  margin-top: 25px;
  padding: 12px 28px;
  border: 1px solid #222;
  transition: 0.3s;
}


.btn-more:hover {
  background: #222;
  color: #fff;
}






//* ===============================
   CLEAN HN HEADER
================================= */


.hn-header{
  position: fixed;
  top: 0;
  left: 0 ;
  width: 100%;
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  z-index:10000;
}


.hn-inner{
  max-width: 1200px;
  margin: 0 auto;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}


.hn-menu{
  display: flex;
  gap: 50px;
  margin: 0;
  padding: 0;
  list-style: none;
}


.hn-menu li{
  margin:0;
  padding:0;
}


.hn-menu li a{
  font-family: 'Pretendard', sans-serif;
  font-size:16px;
  font-weight: 400;
  letter-spacing:1px;
  padding:4px 0;
  border-bottom:2px solid transparent;
  transition:0.3s ease;
  color:#222;
  text-decoration:none;
}


.hn-menu li a:hover{
  border-bottom: 2px solid #0a4fbf;
  color:#0a4fbf;
}



.hn-toggle{
  display: none;
  font-size: 28px;
  cursor: pointer;
}


@media (max-width:900px){


  body{
padding-top: 0;
}

.hn-header{
    position: relative;
}

.hn-inner{
    position: relative;
}

.hn-menu{
   position: fixed;
   top: 60px;
   right: -260px;
   width: 260px;
   height: 80vh;
   background: rgba(255,255,255,0.92);
   background: blur(8px);

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 40px;


   border-radius: 20px 0 0 20px;
   box-shadow: -10px 0 30px rgba(0,0,0,0.15);

   transition: 0.35s ease;
   z-index:20000;
}

.hn-menu.active{
   right: 0;
}

.hn-menu li{
   list-style: none;
}

.hn-menu li a{
   font-size: 22px;
   text-decoration: none; 
   color: #222;
}

  .hn-toggle{
    display: block;
z-index: 20001;
}

}





/* ===============================
   Main Visual (±âÁ¸ À¯Áö)
================================= */



.visual ul.box img {
  width: 100%;
  height: auto;
  display: block;
}




/* ===============================
   Section Common (±âÁ¸ À¯Áö)
================================= */


.section {
  padding: 80px 20px;
}


.container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
}


@media (max-width:900px){
  .container{
    flex-direction:column;
    text-align:center;
    gap:30px;
  }
}




/* ===============================
   About
================================= */


.about-text {
  flex: 1;
}


.about-text h2 {
  font-size: 36px;
  margin-bottom: 20px;
}


.about-text p {
  font-size: 16px;
  line-height: 1.8;
}


.about-img {
  flex: 1;
}


.about-img img {
  width: 100%;
  height: auto;
}


.btn-more {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 24px;
  background: #0f1b3d;
  color: #fff;
  font-weight:700;
  text-decoration:none;
}




/* ===============================
   Product
================================= */


.product-section {
  padding: 100px 20px;
}


.section-title {
  text-align: center;
  margin-bottom: 60px;
}


.section-title h2 {
  font-size: 32px;
  margin-bottom: 10px;
}


.section-title p {
  font-size: 15px;
  color: #666;
}


.product-row {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
}


.product-row.reverse {
  flex-direction: row-reverse;
}


.product-img,
.product-text {
  flex: 1;
}


.product-img img {
  width: 100%;
}


.product-text h3 {
  font-size: 28px;
  margin-bottom: 20px;
}


.product-text p {
  line-height: 1.8;
}


@media (max-width:900px){
  .product-row{
    flex-direction:column;
    gap:30px;
  }
}




/* ===============================
   Case
================================= */


.case-grid {
  max-width: 1200px;
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}


.case-item img {
  width: 100%;
}


.case-item span {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-weight: 600;
}


@media (max-width:900px){
  .case-grid{
    grid-template-columns:1fr;
  }
}




/* ===============================
   Youtube
================================= */


.youtube-grid {
  max-width: 1200px;
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}


.youtube-item img {
  width: 100%;
}


.youtube-item span {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-weight: 600;
}


@media (max-width:900px){
  .youtube-grid{
    grid-template-columns:1fr;
  }
}




/* ===============================
   Contact
================================= */


.contact-section {
  background: #f8f9fb;
  padding: 120px 20px;
}


.contact-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 80px;
  align-items: center;
}


.contact-map {
  flex: 1.2;
  min-height: 450px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}


.contact-info {
  flex: 0.8;
}


.contact-info h3 {
  font-size: 32px;
  margin-bottom: 40px;
}


.contact-box {
  margin-bottom: 30px;
}


.contact-box strong {
  display: block;
  font-size: 14px;
  color: #888;
  margin-bottom: 8px;
}


.contact-box p {
  font-size: 18px;
  line-height: 1.7;
}


@media (max-width:900px){
  .contact-container{
    flex-direction:column;
    gap:40px;
  }
}




/* ===============================
   Top Button
================================= */


#topButton {
  position: fixed;
  right: 30px;
  bottom: 40px;
  cursor: pointer;
  z-index: 9999;
  opacity: 0.8;
  transition: all 0.3s ease;
}


#topButton:hover {
  opacity: 1;
  transform: translateY(-5px);
}


#topButton img {
  width: 60px;
}


@media (max-width:900px){
  #topButton img{
    width:45px;
  }
}




/* ===============================
   Footer
================================= */



/* ===== Footer 2026 Clean Version ===== */


#footer_wrap{
  width:100%;
  background:#3f3f46;      /* ´õ °í±Þ½º·¯¿î Áøȸ»ö */
  padding:50px 20px;
  color:#ddd;              /* Àüü ±âº» ±ÛÀÚ»ö °­Á¦ */
}


.footer_outer{
  width:100%;
}


.footer_inner{
  max-width:1200px;
  margin:0 auto;
  text-align:center;
  color:#ddd;
}


/* °³ÀÎÁ¤º¸ / À̸ÞÀϰźΠ*/
.personal_link{
  margin-bottom:25px;
}


.personal_link a{
  color:#cfcfcf;
  margin:0 15px;
  font-size:14px;
  text-decoration:none;
  transition:0.3s;
}


.personal_link a:hover{
  color:#ffffff;
}


/* ȸ»ç Á¤º¸ */
.company_info{
  line-height:28px;
  margin-bottom:18px;
  font-size:14px;
  color:#cfcfcf;
}


/* Ä«ÇǶóÀÌÆ® */
.copyright{
  font-size:13px;
  opacity:.7;
  letter-spacing:0.5px;
}


/* ===== Mobile ===== */
@media (max-width:900px){


  #footer_wrap{
    padding:40px 15px;
  }


  .personal_link a{
    display:block;
    margin:8px 0;
  }


  .company_info{
    font-size:13px;
    line-height:24px;
  }


  .copyright{
    font-size:12px;
  }


}









/* ===== ŸÀÓ¶óÀÎ Àüü ===== */
.timeline {
    max-width:1100px;
    margin:0 auto;
    padding:90px 20px;
    position:relative;
}


/* ¼¼·Î ¶óÀÎ ´õ ¾ÈÂÊÀ¸·Î */
.timeline::before{
    content:"";
    position:absolute;
    left:210px;   /* ¡é 280 ¡æ 250 */
    top:0;
    bottom:0;
    width:1px;
    background:#e1e1e1;
}


/* ¿¬µµ ºí·Ï */
.timeline-item{
    display:flex;
    align-items:flex-start;
    position:relative;
    padding:30px 0;   /* ¡é 45 ¡æ 30 */
}


/* ¿¬µµ */
.timeline-year{
    width:210px;
    font-size:35px;
    font-weight:700;
    color:#222;
    text-align:right;
    padding-right:35px;   /* ¡é 45 ¡æ 35 */
}


/* ³»¿ë ¿µ¿ª ´õ ´ç±è */
.timeline-content{
    flex:1;
    padding-left:50px;    /* ¡é 80 ¡æ 50 */
    text-align:left; /* ¡ç °­Á¦ ¿ÞÂÊ Á¤·Ä */
}


/* ÁÙ °£°Ý ´õ Á¤µ· */
.timeline-content p{
    position:relative;
    margin:8px 0;        /* ¡é 10 ¡æ 8 */
    font-size:17px;
    color:#333;
}


/* Á¡ À§Ä¡ ´õ ÀÚ¿¬½º·´°Ô */
.timeline-content p::before{
    content:"";
    position:absolute;
    left:-30px;          /* ¡é -48 ¡æ -40 */
    top:10px;
    width:8px;
    height:8px;
    background:#2a6fb5;
    border-radius:50%;
}


/* ¿ù */
.timeline-content span{
    font-weight:700;
    color:#2a6fb5;
    margin-right:6px;   /* ¡é 8 ¡æ 6 */
}

/* ===============================
   ¹ÝÀÀÇü – 900px ±âÁØ ÅëÀÏ
================================ */


@media (max-width:900px){


    .timeline {
        padding:70px 20px;
    }


    .timeline::before{
        left:22px;
    }


    .timeline-item{
        flex-direction:column;
        padding:35px 0;
    }


    .timeline-year{
        width:100%;
        text-align:left;
        padding-left:55px;
        padding-right:0;
        margin-bottom:15px;
        font-size:26px;
    }


    .timeline-content{
        padding-left:55px;
    }


    .timeline-content p{
        font-size:15px;
         margin:6px 0;
    }


    .timeline-content p::before{
        left:-40px;
 	   width: 7px;
         height: 7px;
    }
}







/* body »ó´Ü ¿©¹é */
body{
  padding-top: 80px;
}





/* PC Àü¿ë °­Á¦ °íÁ¤ */
@media (min-width:901px){
   .hn-menu{
      position: static;
      display: flex;
      right: auto;
      top: auto;
      height: auto;
      width: auto;
      background: none;
      box-shadow: none;
   }
}




/* =========================
   MOBILE RESPONSIVE
========================= */


@media (max-width:900px){


  /* Àüü ¿©¹é */
  #wrap{
    padding:0 20px;
  }


  /* ¼½¼Ç °£°Ý Ãà¼Ò */
  .section{
    padding:50px 0;
  }


  /* ¼½¼Ç ŸÀÌƲ */
  .section-title{
    font-size:24px;
    text-align:center;
    margin-bottom:25px;
  }


  /* ¼Ò°³±Û */
  .about-text{
    font-size:15px;
    line-height:1.7;
    text-align:center;
    margin-bottom:40px;
  }


  /* ȸ»ç Á¤º¸ ¿µ¿ª ¼¼·Î Á¤·Ä */
  .company-wrap{
    flex-direction:column;
    gap:30px;
    margin:40px 0;
  }


  .company-image{
    width:100%;
  }


  .company-image img{
    width:100%;
    opacity:0.9;
  }


  .company-info{
    width:100%;
  }


  .info-row{
    flex-direction:column;
    padding:12px 0;
  }


  .info-row span:first-child{
    width:100%;
    font-size:16px;
    margin-bottom:4px;
  }


  .info-row span:last-child{
    font-size:15px;
  }


  /* ¾÷Á¾ ÁÙ °£°Ý ÁÙÀ̱â */
  .info-row span:last-child br{
    display:none;
  }


  /* »ç¾÷ºÐ¾ß ±×¸®µå ¼¼·Î º¯°æ */
  .business-grid{
    display:flex;
    flex-direction:column;
    gap:25px;
  }


  .business-item{
    text-align:center;
    padding:20px;
    border:1px solid #eee;
    border-radius:12px;
  }


  .business-item h4{
    font-size:18px;
    margin-bottom:10px;
  }


  .business-item p{
    font-size:14px;
    line-height:1.6;
  }


}




/* ==================================
   PRODUCT SPLIT 60 / 40 LAYOUT
================================== */


.product-split{
  display:flex;
  align-items:center;
  gap:60px;
  margin:120px 0;
}


/* À̹ÌÁö 60% */
.split-img{
  flex:0 0 60%;
}


.split-img img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}


/* ÅؽºÆ® 40% */
.split-text{
  flex:0 0 40%;
}


.split-text h3{
  font-size:28px;
  font-weight:700;
  margin-bottom:20px;
  line-height:1.3;
}


.split-text p{
  font-size:16px;
  line-height:1.8;
  color:#555;
}


/* ¸ð¹ÙÀÏ */
@media(max-width:900px){


  .product-split{
    flex-direction:column;
    gap:30px;
    margin:60px 0;
  }


  .split-img,
  .split-text{
    flex:1 1 100%;
  }


  .split-text{
    text-align:center;
  }


  .split-text h3{
    font-size:22px;
  }


}








/* ===== FULL BANNER STRONG CONTRAST VERSION ===== */



.full-banner{
  position:relative;
  margin:120px 0;
  overflow:hidden;
}


.full-banner img{
  width:100%;
  height:auto;
  display:block;
}


/* °­ÇÑ ¿ÞÂÊ ±×¶óµ¥ÀÌ¼Ç */
.full-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to right,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.7) 40%,
    rgba(0,0,0,0.2) 70%,
    rgba(0,0,0,0) 100%
  );
  z-index:1;
}


/* ÅؽºÆ® °­Á¦ È­ÀÌÆ® */
.banner-text{
  position:absolute;
  top:50%;
  left:8%;
  transform:translateY(-50%);
  z-index:2;
  max-width:45%;
}


.banner-text h3{
  color:#f2f2f2 !important;
  font-size:42px;
  font-weight:800;
  line-height:1.2;
  margin-bottom:20px;
  text-shadow:0 5px 25px rgba(0,0,0,0.8);
}


.banner-text p{
  color:#f2f2f2 !important;
  font-size:18px;
  line-height:1.7;
  opacity:0.95;
  text-shadow:0 4px 15px rgba(0,0,0,0.8);
}