@charset "utf-8";:root { --orange: #FF7E21; --orange-dark: #4E4640; --dark: #32302F; --gray-dark: #222222; --gray-mid: #999999; --gray-light: #F5F7FB; --white: #fff; --border: #E7E8EA; } 


/* header */

 /* ── GNB ── */
 header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; width: 100%; height: 80px; background: rgba(78, 70, 64, 0.40); } 
 .gnb-inner { max-width: 1920px; margin: 0 auto; padding: 0 80px; height: 100%; display: flex; align-items: center; justify-content: space-between; } 
 .gnb-logo { height: 32px; } 
 .gnb-logo img { width: 100%; } 
 .gnb-nav { display: flex; align-items: center; gap: 40px; } 
 .gnb-nav a { color: #FFF; font-size: clamp(16px, 2.5vw, 24px); font-weight: 500; line-height: 130%; /* 31.2px */
 letter-spacing: -1.2px; transition: color .2s; } 
 .gnb-nav a:hover { color: var(--orange); } 
 .gnb-cta { background: var(--orange); color: #fff; padding: 10px 24px; border-radius: 4px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .2s; } 
 .gnb-cta:hover { background: var(--orange-dark); } 
.call-btn{
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 20px;
  background: var(--orange);
  color: #fff;
  font-size: 18px;
  border-radius: 99px;
  transition: background 0.2s;
}
.call-btn:hover{
  background: var(--orange-dark);
}
 /* ── HERO ── */
 .hero { position: relative; height: 500px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: url(../img/img-main-bg.png) 50% 50% / cover; } 
 .hero-dot { display: flex; align-items: center; gap: 40px; } 
 .hero-dot li { width: 4px; height: 4px; transform: rotate(-45deg); aspect-ratio: 1/1; background-color: var(--orange); } 
 .hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #1a1a2e 0%, #2d3561 40%, #3a3a3a 100%); } 
 .hero-content { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 200px; } 
 .hero-content h1 { color: #FFF; text-align: center; font-size: clamp(32px, 4.8vw, 80px); font-weight: 700; line-height: 130%; /* 104px */
 letter-spacing: -4px; } 
 .hero-sub { font-size: clamp(24px, 4.8vw, 36px); color: #FFF; text-align: center; font-weight: 500; line-height: 130%; /* 46.8px */
 letter-spacing: -1.8px; } 
 .hero-sub strong { color: var(--orange); } 
 /* ── SECTION COMMON ── */
 section { width: 100%; } 
 /* .section-inner { max-width: 1920px; margin: 0 auto; padding: 0 240px; } */

 /* ── ABOUT ── */
 .about { padding: 240px 0; position: relative; } 
 .about-inner { display: flex; justify-content: center; width: 100%; } 
 .about-left { flex: 1; position: relative; } 
 .section-label { display: flex; flex-direction: column; align-items: flex-start; width: 100%; border-bottom: 1px solid var(--border); padding-bottom: 20px; } 
 .section-label span { color: var(--gray-mid); font-size: clamp(14px, 1.25vw, 16px); font-weight: 500; line-height: 130%; /* 20.8px */
 letter-spacing: -0.8px; } 
 .section-label p { color: var(--orange); font-size: clamp(16px, 1.25vw, 24px); font-weight: 700; line-height: 130%; /* 31.2px */
 letter-spacing: -1.2px; } 
 .about-title { font-size: clamp(18px, 2.5vw, 26px); font-weight: 700; line-height: 1.55; letter-spacing: -0.5px; margin-bottom: 24px; } 
 .about-title span { color: var(--orange); } 
 .about-desc { font-size: 15px; color: var(--gray-mid); line-height: 1.85; letter-spacing: -0.2px; } 
 .about-content { width: 100%; display: flex; align-items: center; padding: 0 24px; } 
 .about-content > div { width: 100%; } 
 .about-img { max-width: 220px; } 
 .about-img img { width: 100%; } 
 .about-right , .about-left { flex: 0 0 240px; position: relative; display: flex; justify-content: center; align-items: center; background-repeat: no-repeat; } 
 .about-right { background: url(../img/img-sec2-02.png) 100% 100% / contain; } 
 .about-left { background: url(../img/img-sec2-01.png) 100% 100% / contain; } 

 /* ── SERVICE ── */
 .service { background: url(../img/img-sec3-bg.png) 100% 100% / cover; padding: 130px 0; position: relative; overflow: hidden; } 
 .service-inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 40px; } 
 .service-left { flex: 1; } 
 .service-label { font-size: 13px; color: var(--orange); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 12px; } 
 .service-title { color: #FFF; font-size: clamp(24px, 1.875vw, 32px); font-weight: 700; line-height: 140%; letter-spacing: -1.6px; } 
 .service-title span { color: var(--orange); } 
 .service-desc { color: #E0E0E0; font-size: clamp(16px, 1.875vw, 20px); font-weight: 500; line-height: 160%; /* 32px */
 letter-spacing: -1px; margin-top: 8px; } 
 .service-right { flex: 0 0 400px; } 

 /* Phone mockup */
 .phone-mockup { max-width: 428px; } 
 .phone-mockup img { width: 100%; } 

 /* ── PROCESS ── */
 .section-label.center { align-items: center; border-bottom: 0; } 
 .process { padding: 200px 0; } 
 .process-inner { max-width: 1440px; margin: 0 auto; text-align: center; } 
 .process-label { font-size: 13px; color: var(--orange); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 8px; } 
 .process-title { text-align: center; font-size: clamp(20px, 2.5vw, 32px); font-weight: 700; line-height: 140%; /* 44.8px */
 letter-spacing: -1.6px; } 
 .process-steps { display: flex; gap: 20px; justify-content: center; margin: 40px 0; flex-wrap: wrap; } 
 .step-card { flex: 1; max-width: 320px; background: var(--gray-light); border: 1px solid var(--orange); border-radius: 8px; padding: 36px; text-align: center; position: relative; transition: box-shadow .25s, transform .25s; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; } 
 .step-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.1); transform: translateY(-4px); } 

 .step-icon { width: 60px; height: 60px; aspect-ratio: 1/1; margin-bottom: 20px; } 
 .step-name { color: var(--orange); text-align: center; font-size: clamp(16px, 2.5vw, 20px); font-weight: 700; line-height: 140%; /* 28px */
 letter-spacing: -1px; } 
 .step-desc { color: #444; text-align: center; font-size: clamp(14px, 2.5vw, 16px); font-weight: 500; line-height: 140%; /* 22.4px */
 letter-spacing: -0.8px; } 

 /* ── QA ── */
 .qa { padding: 160px 0; } 
 .qa-inner { max-width: 1440px; margin: 0 auto; display: flex; justify-content: space-between; } 
 .qa-label-col { flex: 0 0 160px; display: flex; gap: 20px; } 
 .qa-label-col::before { content: ""; width: 4px; height: 52px; background: var(--orange); display: inline-block; } 
 .qa-label.section-label { text-align: left; align-items: flex-start; } 
 .qa-list { flex: 1; max-width: 1000px; } 
 .qa-item { padding: 20px; border-radius: 8px; background: var(--gray-light); margin-bottom: 12px; } 
 .qa-question { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 15px; font-weight: 500; letter-spacing: -0.3px; transition: color .2s; } 
 .qa-question:hover { color: var(--orange); } 
 .qa-question span { color: #222; font-size: clamp(16px, 2.5vw, 20px); font-weight: 600; line-height: 140%; /* 28px */
 letter-spacing: -1px; } 
 .qa-toggle { width: 20px; height: 20px; aspect-ratio: 1/1; background: url(../img/icon-downarr.svg) center center / contain; transition: transform .3s; } 
 .qa-item.open { border: 1px solid var(--orange); } 
 .qa-item.open .qa-toggle { transform: rotate(180deg); } 
 .qa-answer { color: var(--orange); font-size: clamp(16px, 2.5vw, 20px); font-weight: 500; line-height: 140%; /* 28px */
 letter-spacing: -1px; display: none; margin-top: 20px; } 
 .qa-item.open .qa-answer { display: block; } 

 /* ── CONTACT ── */
 .contact { padding: 80px 0; background: var(--dark); } 
 .contact-inner { max-width: 720px; margin: 0 auto; display: flex; gap: 80px; align-items: flex-start; } 
 .contact-left { flex: 1; color: #fff; } 
 .contact-label { color: #FFF; font-size: clamp(14px, 2.5vw, 16px); font-weight: 500; line-height: 130%; /* 20.8px */
 letter-spacing: -0.8px; } 
 .contact-title { color: #FF7E21; font-size: clamp(18px, 2.5vw, 24px); font-weight: 700; line-height: 130%; /* 31.2px */
 letter-spacing: -1.2px; } 
 .contact-sub { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.8; } 
 .contact-right { flex: 0 0 560px; } 
 .contact-form { max-width: 540px; border: 1px solid #FF7E21; background: #FFF; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25); border-radius: 8px; padding: 20px; } 
 .form-row { margin-bottom: 16px; display: flex; align-items: center; } 
 .form-row label { min-width: 74px; color: #222; font-size: 16px; font-weight: 500; line-height: 140%; /* 22.4px */
 letter-spacing: -0.8px; } 
 .form-row input,
 .form-row textarea,
 .form-row select { width: 100%; padding: 16px 20px; border: 1px solid var(--border); border-radius: 4px; background: var(--gray-light); font-size: 16px; font-family: inherit; transition: border-color .2s; } 
 .form-row input:focus,
 .form-row textarea:focus,
 .form-row select:focus { outline: none; border-color: var(--orange); } 
 .form-row textarea { height: 90px; resize: none; } 
 .form-submit { width: 100%; color: #FFF; text-align: center; font-size: clamp(18px, 2.5vw, 24px); font-weight: 700; line-height: 140%; /* 33.6px */
 letter-spacing: -1.2px; background: var(--orange); color: #fff; border: none; border-radius: 4px; cursor: pointer; letter-spacing: -0.3px; transition: background .2s; height: 54px; } 
 .form-submit:hover { background: var(--orange-dark); } 
 .contact-assurance { color: #FFF; font-size: clamp(18px, 2.5vw, 24px); font-weight: 600; line-height: 140%; /* 33.6px */
 letter-spacing: -1.2px; margin-top: 24px; text-align: center; } 
 .chk { display: flex; align-items: flex-start; gap: 6px; font-size: 16px; font-weight: 400; letter-spacing: -0.64px; color: #222; cursor: pointer; } 
 .chk input { display: none; } 
 .chk input[type="checkbox"] { display: flex; width: 20px; min-width: 20px; height: 20px; border-radius: 4px; border: 1px solid var(--border); background: #fff; align-items: center; appearance: none; -webkit-appearance: none; cursor: pointer; overflow: hidden; padding: 0; } 
 .chk input[type="checkbox"]:checked { background: url(../img/check-active.svg); background-size: contain; border: 1px solid var(--orange); display: flex; width: 20px; height: 20px; border-radius: 4px; align-items: center; cursor: pointer; } 
 .privacy-box { display: flex; padding: 12px; align-items: center; gap: 10px; align-self: stretch; border-radius: 4px; background: #FFF; font-size: 14px; font-weight: 300; line-height: 150%; } 
 .form-row .view-more { color: var(--orange); font-size: 16px; font-weight: 400; line-height: 130%; /* 20.8px */
 letter-spacing: -0.8px; margin-left: 8px; cursor: pointer;} 
 /* ── FOOTER ── */
 footer { background: #C8C8C8; color: #444; font-size: 16px; font-weight: 500; line-height: 110%; /* 17.6px */
 letter-spacing: -0.8px; padding: 40px 0; } 
 .footer-inner { max-width: 1440px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; } 
 .footer-inner > div { display: flex; gap: 40px; } 
 .footer-inner dl { display: flex; gap: 12px; } 
 .footer-inner dt { color: #444; font-size: 16px; font-weight: 700; line-height: 110%; /* 17.6px */
 letter-spacing: -0.8px; } 
 .footer-inner dd { color: #444; font-size: 16px; font-weight: 500; line-height: 110%; /* 17.6px */
 letter-spacing: -0.8px; } 

 /* ── FLOATING BOTTOM BAR ── */
 .bottom-bar { width: 100%; background: #2b2b2b; padding: 28px; display: flex; align-items: center; gap: 20px; } 
 .bottom-bar-inner { max-width: 1440px; width: 100%; margin: 0 auto; display: flex; gap: 20px; } 
 .bottom-bar-label { display: flex; flex-direction: column; gap: 4px; max-width: 320px; width: 100%; } 
 .bottom-bar-label p { color: var(--orange); font-size: clamp(18px, 2.5vw, 24px); font-weight: 700; line-height: 130%; /* 31.2px */
 letter-spacing: -1.2px; } 
 .bottom-bar-label span { color: #FFF; font-size: clamp(14px, 2.5vw, 16px); font-weight: 500; line-height: 130%; /* 20.8px */
 letter-spacing: -0.8px; } 
 .bottom-bar input { flex: 1; padding: 24px; background: var(--white); border-radius: 4px; font-size: 16px; height: 65px; width: 100%; } 
 .bottom-bar input::placeholder { color:var(--gray-mid); } 
 .bottom-bar-btn { background: var(--orange); color: #fff; padding: 10px 28px; border-radius: 4px; font-size: clamp(16px, 2.5vw, 20px); font-weight: 700; border: none; cursor: pointer; white-space: nowrap; transition: background .2s; height: 65px; max-width: 320px; width: 100%; } 
 .bottom-bar-btn:hover { background: var(--orange-dark); } 
 .bottom-bar .chk { margin-top: 8px; } 
 .bottom-bar .chk label { color: #FFF; font-size: 16px; font-weight: 400; letter-spacing: -0.8px; } 
 .bottom-bar .chk label span { color: var(--orange); } 




 /* 팝업 */

   .overlay{position:relative;min-height:520px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);border-radius:var(--border-radius-lg);padding:2rem;}
  .modal{background:var(--color-background-primary);border-radius:var(--border-radius-lg);border:0.5px solid var(--color-border-secondary);width:100%;max-width:600px;max-height:460px;display:flex;flex-direction:column;overflow:hidden;}
  .modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px 14px;border-bottom:0.5px solid var(--color-border-tertiary);flex-shrink:0;}
  .modal-header h2{font-size:16px;font-weight:500;margin:0;color:var(--color-text-primary);}
  .close-btn{width:28px;height:28px;border-radius:50%;border:0.5px solid var(--color-border-secondary);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--color-text-secondary);line-height:1;}
  .close-btn:hover{background:var(--color-background-secondary);}
  .modal-body{overflow-y:auto;padding:20px 24px;flex:1;font-size:13px;line-height:1.9;color:var(--color-text-secondary);}
  .modal-body p{margin:0 0 10px;}
  .modal-body .section-title{font-weight:500;color:var(--color-text-primary);margin:16px 0 6px;}
  .modal-body .section-title:first-child{margin-top:0;}
  .modal-footer{padding:14px 24px;border-top:0.5px solid var(--color-border-tertiary);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0;}
  .btn-close{padding:8px 20px;border-radius:var(--border-radius-md);border:0.5px solid var(--color-border-secondary);background:transparent;font-size:13px;color:var(--color-text-primary);cursor:pointer;}
  .btn-close:hover{background:var(--color-background-secondary);}
  .btn-agree{padding:8px 20px;border-radius:var(--border-radius-md);border:none;background:var(--color-text-primary);font-size:13px;color:var(--color-background-primary);cursor:pointer;}
  .btn-agree:hover{opacity:0.85;}
  .badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:99px;background:var(--color-background-info);color:var(--color-text-info);margin-left:6px;vertical-align:middle;}


  
 @media (max-width : 960px){
 .gnb-inner { padding: 0 20px; } 
 .gnb-nav { gap: 20px; } 
 .hero { height: 400px; } 
 .hero-content { margin-top: 120px; } 
 }
 @media (max-width : 768px){
 .gnb-nav { display: none; } 
.about-right, .about-left { display: none; } 
.about-content { padding: 20px; flex-direction: column; gap: 40px; } 
.about { padding: 80px 0; } 
.service { padding: 80px 0; } 
.service-inner { flex-direction: column; gap: 20px; padding: 0 20px; } 
.section-label { margin-bottom: 20px; } 
.process { padding: 80px 20px; } 
.qa-inner { justify-content: flex-start; gap: 40px; flex-direction: column; } 
.qa { padding: 80px 20px; } 
.qa-label-col { flex: 0; } 
.contact-inner { gap: 40px; flex-direction: column; } 
.contact { padding: 80px 20px; } 
.contact-right { flex: 0; } 
footer { padding: 20px; } 
.footer-inner > div { flex-wrap: wrap; gap: 10px; font-size: 14px; } 
.footer-inner dt { font-size: 14px; min-width: max-content; } 
.footer-inner dd { font-size: 14px; } 
.bottom-bar-inner { flex-wrap: wrap; justify-content: center; } 
.bottom-bar-btn { height: 48px; } 
 }