@charset "utf-8";

/* ======================================================
   INTRODUCTION PAGE
====================================================== */

.page-introduction{
  background:#fff;
}

.page-introduction .narrow{
  max-width:1200px;
}

.page-introduction .intro-section{
  padding:200px 0;
}

.page-introduction .sec-en{
  text-align:center;
  font-size:14px;
  font-weight:700;
  color:var(--red);
  letter-spacing:2px;
  margin-bottom:18px;
  text-transform:uppercase;
}

.page-introduction .sec-title{
  text-align:center;
  font-size:42px;
  font-weight:700;
  line-height:1.35;
  color:#111;
  letter-spacing:-0.5px;
  margin-bottom:20px;
}

.page-introduction .sec-desc{
  text-align:center;
  font-size:18px;
  line-height:1.35;
  color:#555;
  max-width:900px;
  margin:0 auto;
  margin-bottom: 40px;
}

.main-foot [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

/* ======================================================
   HERO
====================================================== */

.page-introduction .intro-hero{
  margin-top:80px;
  position:relative;
  width:100%;
  height:560px;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}

.page-introduction .intro-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.20) 55%, rgba(0,0,0,0.08) 100%);
}

.page-introduction .intro-hero .inner{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.page-introduction .hero-copy{
  color:#fff;
  max-width:900px;
  margin:0 auto;
  text-align:center;
}

.page-introduction .hero-copy p{
  font-size:20px;
  line-height:1.6;
  margin-bottom:10px;
  opacity:0.95;
}

.page-introduction .hero-copy h2{
  font-size:48px;
  font-weight:700;
  line-height:1.22;
  letter-spacing:-0.8px;
  color:#fff;
}

.page-introduction .hero-copy p,
.page-introduction .hero-copy h2{
  word-break:keep-all;
}

/* ======================================================
   TAB
====================================================== */

.page-introduction .intro-tab-wrap{
  position:sticky;
  top:80px;
  z-index:50;
  background:#1f1f1f;
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
  box-shadow:0 4px 12px rgba(0,0,0,0.06);
}

.page-introduction .intro-tab{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:14px 0;
  flex-wrap:wrap;
}

.page-introduction .intro-tab a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:130px;
  height:40px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,0.22);
  color:#fff;
  font-size:13px;
  font-weight:600;
  background:transparent;
  border-radius:999px;
  transition:all .3s ease;
}

.page-introduction .intro-tab a:hover,
.page-introduction .intro-tab a.active{
  background:#fff;
  color:#111;
  border-color:#fff;
}

/* ======================================================
   ABOUT
====================================================== */

.page-introduction .intro-about{
  background:#f4f4f4;
}

.page-introduction .about-brand{
  text-align:center;
  margin:44px 0 34px;
}

.page-introduction .about-brand img{
  max-width:200px;
}

.page-introduction .about-feature{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
  margin-top:34px;
}

.page-introduction .about-feature .item{
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:10px;
  padding:34px 26px 30px;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,0.04);
  transition:all .25s ease;
}

.page-introduction .about-feature .icon{
  height:78px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
}

.page-introduction .about-feature .icon img{
  max-height:60px;
}

.page-introduction .about-feature strong{
  display:block;
  font-size:20px;
  font-weight:700;
  line-height:1.35;
  margin-bottom:40px;
  color:#111;
}

.page-introduction .about-feature p{
  font-size:15px;
  margin-bottom:8px;
  line-height:1.35;
  color:#666;
}

/* ======================================================
   ABOUT2
====================================================== */

.page-introduction .intro-about2{
  background:#d7d7d7;
}

.page-introduction .about2-grid{
  display:flex;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
  margin-top:60px;
}

.page-introduction .about2-grid .card{
  background:#fff;
  padding: 40px 20px 40px;
  text-align:center;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,0.05);
  transition:all .25s ease;
}

.page-introduction .about2-grid .icon{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
}

.page-introduction .about2-grid .icon img{
  max-height:60px;
}

.page-introduction .about2-grid strong{
  display:block;
  font-size:20px;
  font-weight:700;
  color:#111;
  margin-bottom:20px;
}

.page-introduction .about2-grid p{
  font-size:15px;
  color:#666;
  line-height:1.35;
}

/* ======================================================
   HISTORY
====================================================== */

.page-introduction .intro-history{
  background:#fff;
  padding-bottom:80px;
}

.page-introduction .history-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
  margin-bottom:64px;
}

.page-introduction .history-copy{
  width:100%;
  max-width:1160px;
  margin:0 auto;
  text-align:center;
}

.page-introduction .history-copy .sec-en,
.page-introduction .history-copy .sec-title,
.page-introduction .history-copy .sec-desc{
  text-align:center;
}

.page-introduction .history-visual{
  width:100%;
  max-width:1160px;
  margin:0 auto;
}

.page-introduction .history-list{
  display:flex;
  flex-direction:column;
  gap:0;
  border-top:2px solid #111;
}

.page-introduction .history-list dl{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:28px;
  padding:26px 0;
  border-bottom:1px solid #e5e5e5;
}

.page-introduction .history-list dt{
  font-size:28px;
  font-weight:700;
  line-height:1.2;
  color:var(--red);
  letter-spacing:-0.4px;
}

.page-introduction .history-list dd{
  margin:0;
}

.page-introduction .history-list dd ul{
  margin:0;
  padding:0;
  list-style:none;
}

.page-introduction .history-list dd ul li{
  position:relative;
  padding-left:16px;
  font-size:16px;
  line-height:1.9;
  color:#555;
}

.page-introduction .history-list dd ul li + li{
  margin-top:4px;
}

.page-introduction .history-list dd ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:13px;
  width:6px;
  height:6px;
  border-radius:100%;
  background:#111;
}

.page-introduction .partner-row{
  border-top:1px solid #e8e8e8;
  padding-top:28px;
}

.page-introduction .partner-row .sec-en{
  text-align:left;
  margin-bottom:20px;
  color:#666;
}

.page-introduction .partner-list{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
}

.page-introduction .partner-list img{
  max-height:30px;
  width:auto;
  opacity:0.95;
}

/* ======================================================
   CONTACT
====================================================== */

.page-introduction .intro-contact{
  background:#efefef;
}

.page-introduction .contact-box{
  display:grid;
  grid-template-columns:1.4fr 0.8fr;
  gap:36px;
  align-items:stretch;
  margin-top:44px;
}

.page-introduction .contact-box .map{
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,0.05);
  background:#e9e9e9;
  min-height:420px;
}

.page-introduction .contact-box .map iframe{
  width:100%;
  height:100%;
  min-height:420px;
  border:0;
  display:block;
}

.page-introduction .contact-box .info{
  padding:38px 34px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:14px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 8px 22px rgba(0,0,0,0.05);
}

.page-introduction .contact-box .info h4{
  font-size:32px;
  font-weight:700;
  color:#111;
  margin-bottom:10px;
  letter-spacing:-0.4px;
}

.page-introduction .contact-box .info dl{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.page-introduction .contact-box .info dl + dl{
  margin-top:0;
}

.page-introduction .contact-box .info dt{
  font-size:14px;
  font-weight:700;
  color:#444;
  margin-bottom:4px;
}

.page-introduction .contact-box .info dd{
  font-size:15px;
  line-height:1.75;
  color:#666;
}

.page-introduction .contact-box .info dd a{
  color:#666;
  text-decoration:none;
}

.page-introduction .contact-box .info dd a:hover{
  color:var(--red);
}

.page-introduction .contact-btns{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:16px;
}

.page-introduction .contact-btns .btn-contact {
  display: flex;              /* 핵심 */
  align-items: center;        /* 수직 가운데 */
  justify-content: center;    /* 수평 가운데 */
  width: 52px;        /* 고정 너비 */
  height: 52px;       /* 고정 높이 (같게!) */
  border-radius: 50%; /* 원형 */
  padding: 0;
}

.page-introduction .contact-btns .btn-contact img {
  width: 28px;
  height: 28px;
}

.page-introduction .contact-btns .btn-call{
  background:var(--red);
  color:#fff;
}

.page-introduction .contact-btns .btn-mail{
  background:#111;
  color:#fff;
}

.page-introduction .contact-btns .btn-map{
  background:#333;
  color:#111;
  border:1px solid #333;
}

.page-introduction .contact-btns .btn-pdf{
  background:#d7d7d7;
  color:#1a73e8;
}

.page-introduction .contact-btns .btn-call:hover,
.page-introduction .contact-btns .btn-mail:hover,
.page-introduction .contact-btns .btn-map:hover{
  transform:translateY(-2px);
}

/* ======================================================
   STORY
====================================================== */

.page-introduction .intro-story{
  background:#fff;
}

.page-introduction .story-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:30px 22px;
  margin-top:46px;
}

.page-introduction .story-card{
  display:block;
  color:#111;
  transition:all .3s ease;
}

.page-introduction .story-card .thumb{
  overflow:hidden;
  background:#eee;
  margin-bottom:14px;
  border-radius:6px;
}

.page-introduction .story-card .thumb img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}

.page-introduction .story-card .tit{
  font-size:18px;
  font-weight:700;
  line-height:1.45;
  margin-bottom:8px;
  letter-spacing:-0.2px;
}

.page-introduction .story-card .txt{
  font-size:13px;
  color:#666;
  line-height:1.75;
}

/* ======================================================
   HOVER
====================================================== */

@media (hover:hover){
  .page-introduction .about-feature .item:hover,
  .page-introduction .device-grid .card:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 36px rgba(0,0,0,0.10);
  }

  .page-introduction .story-card:hover{
    transform:translateY(-6px);
  }

  .page-introduction .story-card:hover .thumb img{
    transform:scale(1.05);
  }

  .page-introduction .partner-list img:hover{
    opacity:1;
    transform:translateY(-2px);
  }
}

.page-introduction .partner-list img{
  transition:all .25s ease;
}

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

@media all and (max-width:1170px){
  .page-introduction .hero-copy h2{
    font-size:42px;
  }
}

@media all and (max-width:1024px){
  .page-introduction .intro-section{
    padding:80px 0;
  }

  .page-introduction .intro-hero{
    height:440px;
  }

  .page-introduction .hero-copy h2{
    font-size:38px;
  }

  .page-introduction .sec-title{
    font-size:32px;
  }

  .page-introduction .about-feature,
  .page-introduction .device-grid,
  .page-introduction .story-grid{
    grid-template-columns:1fr 1fr;
  }

  .page-introduction .contact-box{
    grid-template-columns:1fr;
  }

  .page-introduction .history-top{
    gap:32px;
    margin-bottom:48px;
  }

  .page-introduction .history-visual{
    max-width:100%;
  }

  .page-introduction .history-list dl{
    grid-template-columns:100px 1fr;
    gap:20px;
  }

  .page-introduction .history-list dt{
    font-size:24px;
  }

  .page-introduction .history-list dd ul li{
    font-size:15px;
  }

  .page-introduction .contact-box .map,
  .page-introduction .contact-box .map iframe{
    min-height:360px;
  }
}

@media all and (max-width:768px){
  .page-introduction .intro-section{
    padding:60px 0;
  }

  .page-introduction .intro-hero{
    margin-top:50px;
    height:300px;
  }

  .page-introduction .intro-hero::before{
    background:rgba(0,0,0,0.36);
  }

  .page-introduction .hero-copy{
    width:100%;
    text-align:center;
  }

  .page-introduction .hero-copy p{
    font-size:14px;
  }

  .page-introduction .hero-copy h2{
    font-size:28px;
  }

  .page-introduction .intro-tab-wrap{
    top:50px;
  }

  .page-introduction .intro-tab{
    gap:6px;
    padding:10px 0;
  }

  .page-introduction .intro-tab a{
    min-width:auto;
    padding:0 12px;
    font-size:12px;
    height:32px;
  }

  .page-introduction .sec-en{
    font-size:14px;
    margin-bottom:14px;
  }

  .page-introduction .sec-title{
    font-size:24px;
    margin-bottom:14px;
  }

  .page-introduction .sec-desc{
    font-size:14px;
    line-height:1.75;
  }

  .page-introduction .about-feature,
  .page-introduction .device-grid,
  .page-introduction .story-grid{
    grid-template-columns:1fr;
  }

  .page-introduction .intro-history{
    padding-bottom:60px;
  }

  .page-introduction .history-top{
    gap:24px;
    margin-bottom:40px;
  }

  .page-introduction .history-copy{
    max-width:100%;
  }

  .page-introduction .history-list{
    border-top:1px solid #111;
  }

  .page-introduction .history-list dl{
    grid-template-columns:1fr;
    gap:10px;
    padding:20px 0;
  }

  .page-introduction .history-list dt{
    font-size:22px;
  }

  .page-introduction .history-list dd ul li{
    font-size:14px;
    line-height:1.8;
    padding-left:14px;
  }

  .page-introduction .history-list dd ul li::before{
    top:11px;
    width:5px;
    height:5px;
  }

  .page-introduction .partner-list{
    justify-content:center;
  }

  .page-introduction .contact-box{
    gap:20px;
    margin-top:30px;
  }

  .page-introduction .contact-box .map,
  .page-introduction .contact-box .map iframe{
    min-height:300px;
  }

  .page-introduction .contact-box .info{
    padding:26px 22px;
  }

  .page-introduction .contact-box .info h4{
    font-size:24px;
    margin-bottom:18px;
  }

  .page-introduction .contact-box .info dd{
    font-size:14px;
  }

  .page-introduction .contact-btns{
    flex-direction:column;
  }

  .page-introduction .contact-btns .btn-contact{
    width:100%;
  }
}

/* ======================================================
   ISO STANDARD
====================================================== */

.page-introduction .intro-standard{
  position: relative;
  padding: 120px 0;
  background: #f6f6f6;
  overflow: hidden;
}

.page-introduction .intro-standard::after{
  content: "";
  position: absolute;
  right: -120px;
  top: 120px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,230,235,0.95) 0%, rgba(230,230,235,0.45) 45%, rgba(230,230,235,0) 72%);
  pointer-events: none;
}

.page-introduction .intro-standard .inner{
  position: relative;
  z-index: 1;
}

.page-introduction .intro-standard .sec-en{
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #cf000b;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.page-introduction .intro-standard .sec-title{
  text-align: center;
  font-size: 42px;
  line-height: 1.35;
  font-weight: 700;
  color: #111;
  margin-bottom: 20px;
}

.page-introduction .intro-standard .sec-desc{
  max-width: 920px;
  margin: 0 auto 56px;
  font-size: 18px;
  line-height: 1.8;
  color: #666;
  text-align: center;
}

.page-introduction .standard-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.page-introduction .standard-grid .card{
  min-height: 255px;
  padding: 42px 40px 36px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

.page-introduction .standard-grid .card .icon{
  margin-bottom: 26px;
}

.page-introduction .standard-grid .card .icon-box{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #cf000b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-introduction .standard-grid .card .icon-box span{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.page-introduction .standard-grid .card .icon-box svg{
  width: 22px;
  height: 22px;
  fill: #fff;
  display: block;
}

.page-introduction .standard-grid .card strong{
  display: block;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 800;
  color: #333;
  margin-bottom: 14px;
}

.page-introduction .standard-grid .card p{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #cf000b;
}

/* ======================================================
   CERTIFICATION
====================================================== */

.page-introduction .intro-certification{
  background:#d7d7d7;
}

.page-introduction .certification-visual{
  max-width:980px;
  margin:38px auto 0;
  text-align:center;
}

.page-introduction .certification-visual img{
  width:100%;
  max-width:100%;
  display:block;
  margin:0 auto;
}

/* ======================================================
   RESPONSIVE - STANDARD / CERTIFICATION
====================================================== */

@media all and (max-width:1024px){
  .page-introduction .standard-grid{
    max-width:100%;
  }

  .page-introduction .standard-grid::before{
    width:300px;
    height:300px;
  }
}

@media all and (max-width:768px){
  .page-introduction .standard-grid{
    grid-template-columns:1fr;
    gap:12px;
    margin-top:30px;
  }

  .page-introduction .standard-grid::before{
    display:none;
  }

  .page-introduction .standard-grid .card{
    min-height:auto;
    padding:20px 16px 16px;
  }

  .page-introduction .standard-grid strong{
    font-size:14px;
  }

  .page-introduction .standard-grid p{
    font-size:11px;
  }

  .page-introduction .certification-visual{
    margin-top:28px;
  }
}

/* ======================================================
   CERTIFICATION TABLE
====================================================== */

.page-introduction .certification-table{
  margin-top:40px;
  overflow-x:auto;
}

.page-introduction .certification-table table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  font-size:14px;
}

.page-introduction .certification-table thead th{
  background:#111;
  font-weight:700;
  color:#fff;
  padding:12px 14px;
  text-align:center;
  border-bottom:2px solid #ddd;
}

.page-introduction .certification-table tbody td{
  padding:12px 14px;
  border-bottom:1px solid #e5e5e5;
}

.page-introduction .certification-table tbody td:nth-child(1){
  text-align:center;
  font-weight:600;
  color:#333;
  width:100px;
}

.page-introduction .certification-table tbody td:nth-child(2){
  text-align:center;
  width:180px;
}

.page-introduction .certification-table tbody td:nth-child(3){
  text-align:center;
}

/* .page-introduction .certification-table tbody tr:hover{
  background:#777;
} */

@media all and (max-width:768px){

  .page-introduction .certification-table table{
    font-size:12px;
  }

  .page-introduction .certification-table thead th,
  .page-introduction .certification-table tbody td{
    padding:10px 8px;
  }

}

@media (max-width: 768px) {
  .page-introduction .about2-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .page-introduction .about2-grid .card {
    min-height: 260px;
    padding: 44px 28px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .page-introduction .about2-grid .card .icon,
  .page-introduction .about2-grid .card i,
  .page-introduction .about2-grid .card img,
  .page-introduction .about2-grid .card svg {
    margin: 0 auto 22px;
  }

  .page-introduction .about2-grid .card h3,
  .page-introduction .about2-grid .card strong {
    display: block;
    margin-bottom: 18px;
    font-size: 28px;
    line-height: 1.2;
    text-align: center;
  }

  .page-introduction .about2-grid .card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
  }
}

@media (max-width: 768px){
  .page-introduction .intro-standard{
    padding: 80px 0;
  }

  .page-introduction .intro-standard::after{
    right: -140px;
    top: 180px;
    width: 420px;
    height: 420px;
  }

  .page-introduction .intro-standard .sec-en{
    font-size: 14px;
    margin-bottom: 14px;
  }

  .page-introduction .intro-standard .sec-title{
    font-size: 24px;
    margin-bottom: 14px;
  }

  .page-introduction .intro-standard .sec-desc{
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 40px;
  }

  .page-introduction .standard-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .page-introduction .standard-grid .card{
    min-height: auto;
    padding: 30px 24px 26px;
    border-radius: 12px;
  }

  .page-introduction .standard-grid .card .icon{
    margin-bottom: 20px;
  }

  .page-introduction .standard-grid .card .icon-box{
    width: 42px;
    height: 42px;
  }

  .page-introduction .standard-grid .card .icon-box span,
  .page-introduction .standard-grid .card .icon-box svg{
    width: 20px;
    height: 20px;
  }

  .page-introduction .standard-grid .card strong{
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 10px;
  }

  .page-introduction .standard-grid .card p{
    font-size: 15px;
    line-height: 1.55;
  }
}