@charset "utf-8";

#header {
  z-index: 10000;
}
 
/* ========================= 배너========================= */
.BannerSub {position:relative;width:100%;height:350px; overflow:hidden;display:flex;align-items:center;}
.BannerSub .banner-bg {position:absolute;inset:0; background:url(../images/benner-sub03-recruit.jpg) center/cover no-repeat; transform:scale(1);transition:transform 3s ease;}
.BannerSub::after {content:"";position:absolute;inset:0;background:
    linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0.2)),
    linear-gradient(to top, rgba(0,0,0,0.4), transparent);}
.BannerSub .banner-inner {width:1280px; margin:0 auto; padding-left:30px; color:#fff; position:relative; z-index:2; transform:translateY(20px);opacity:0;transition:all 1s ease;}
.BannerSub .banner-inner .banner-sub {font-size:2.4rem;letter-spacing:1.5px;opacity:0.7;margin-bottom:8px;}
.BannerSub .banner-inner .banner-title {font-size:6.4rem;font-weight:700;}
.BannerSub.show .banner-bg {  transform:scale(1.15);}
.BannerSub.show .banner-inner {  transform:translateY(0);  opacity:1;}

/* =========================   PC 네비========================= */
.HRside-nav {position:fixed;right:3%; top:35%;  transform:translate(-20px, -50%); z-index:1000;opacity:0;pointer-events:none;transition:all .5s ease; border-radius:10px; z-index:1;  background-color:transparent;}
.HRside-nav.show {opacity:1;transform:translate(-20px, -50%);pointer-events:auto;}
.HRside-nav a{display:block; position:relative; margin:10px 0px; width:100px; height:37px; line-height:37px; text-align:center;font-size:1.6rem; font-weight:400; color:#828897;border:1px solid #e4e4e4;border-radius:50px;background-color:#FFF }
.HRside-nav a.active {color:#fff;font-weight:500; border:0px; background-color:transparent; background:linear-gradient(85.36deg, #823EEE -42.41%, #2172EC 111.92%); transition:transform .4s cubic-bezier(.22,1,.36,1); }
.HRside-nav a.active::before {height:100%; }
/* 인디케이터 */
.indicator {position:absolute;left:0px; width:100px; height:0px; border-radius:50px; margin:0px 0px;background:linear-gradient(85.36deg, #823EEE -42.41%, #2172EC 111.92%); transition:transform .4s cubic-bezier(.22,1,.36,1);  }

/* =========================   모바일 네비========================= */
.mobile-nav {display:none; }
.mobile-nav-inner {display:flex;overflow-x:auto;gap:16px;padding:12px 16px;}
.mobile-nav a {font-size:14px;color:#9ca3af;text-decoration:none;white-space:nowrap;}
.mobile-nav a.active {color:#111;font-weight:600;}

/* =========================   컨텐츠========================= */
.section { margin:0 auto; text-align:center; }

section.gray-bg {background-color: #f6f8f9;  min-height:50vh;}

.process-flow {max-width:1280px; margin:0 auto; margin-top:90px; display: flex;justify-content: space-between;position: relative; }
.process-flow::before {content: "";position: absolute; top:65px; left:0;width:100%; height:2px; background: rgba(0,0,0,0.08);}
.process-step {width:18.5%;text-align:center; position:relative; }
.step-circle {width:140px;height:140px; padding:5rem; margin: 0 auto 20px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff;  box-shadow: 0 10px 20px rgba(0,0,0,0.05);transition: 0.3s;}
.step-circle img{width:70px; background:#fff; }
.process-step:hover .step-circle {transform: scale(1.1);}
.step-card {margin-bottom:0px; padding:50px 25px 30px 25px; min-height:230px; border-radius:16px; box-shadow: 0 10px 20px rgba(0,0,0,0.04);background:#fff;}
.step-title {font-size: 2.2rem;font-weight:700;line-height: 1.4; letter-spacing: -0.056rem;color: #24252b;margin-bottom: 2rem;}
.step-desc {font-size: 1.8rem;font-weight: 500;line-height: 1.4;letter-spacing: -0.048rem;color: #5b5c61;word-break: keep-all;}

.job-list {margin-top:4rem;  min-height:180px; padding:0}
.job-list li {list-style:none;position:relative; padding-left:15px; font-size:1.8rem;font-weight: 500;line-height:1.4;letter-spacing: -0.048rem;color: #5b5c61; word-break:keep-all}
.job-list li::before {content:"";position:absolute;left:0; top:8px; width:4px; height:4px;border-radius:50%;background:#5b5c61;}

.grid.two .card {padding:45px 35px; text-align:left;border-radius:20px;border:1px solid #ebecef;background:#fff;opacity:0;transform:translateY(100px);transition:.6s cubic-bezier(.22,1,.36,1); box-shadow:0 5px 20px rgba(0, 0, 0, 0.04);}
.job-comm-title {margin-bottom:20px;display:flex;align-items:center;gap:8px; font-size:2rem;font-weight:600;line-height: 1.4;letter-spacing: -0.048rem;color:#24252b; word-break:keep-all;}
.job-comm-title::before {content:"";width:6px;height:12px;background:#808896;border-radius:3px;}
.job-comm-list {margin:0;padding:0;}
.job-comm-list li {list-style:none;position:relative;padding-left:20px;font-size:1.6rem;font-weight:400;line-height: 1.4;letter-spacing: -0.048rem;color:#5b5c61; word-break:keep-all;}
.job-comm-list li::before {content:"";position:absolute;left:0;top:8px;width:3px;height:3px;border-radius:50%;background:#808896;}
.job-comm-notice {margin-top:20px;padding:10px 18px; font-size:1.6rem;font-weight:400;line-height:1.4;letter-spacing:-0.048rem;color:#374151; word-break:keep-all; border-radius:12px;background:#f2f7fe;border:0px solid #c8dbf6; }
.job-comm-email  {margin-top:20px;font-weight:600; color:#2172ec;}

.grid.won .card {padding:0px 30px; text-align:left;border-radius:20px;border:0px; background:#fff; margin-bottom:0px; }
.job-comm-txt {margin-top:0rem;padding:0}
.job-comm-txt li {list-style:none;position:relative; padding-left:20px; font-size:1.8rem;font-weight: 500;line-height:1.4;letter-spacing: -0.048rem;color: #5b5c61; word-break:keep-all}
.job-comm-txt li::before {content:"※";position:absolute; left:0; top:0px; width:10px; height:0px; border-radius:50%; background:#5b5c61; font-size:1.8rem;}

.grid {max-width:1280px; margin:0 auto; display:grid;grid-template-columns:repeat(3,1fr);gap:15px; margin-bottom:50px;}
.grid.two {grid-template-columns:repeat(2,1fr);}
.grid.won {grid-template-columns:repeat(1,1fr);}
.grid.four {grid-template-columns:repeat(4,1fr);}

.card {padding:45px 10px 45px 28px; text-align:left;border-radius:20px;border:0px solid #f1f5f9;background:#f2f7fe;opacity:0;transform:translateY(100px);transition:.6s cubic-bezier(.22,1,.36,1);}
.card:hover {}
.card h4{display: block;font-size:2.8rem;font-weight: 700;line-height: 1.4;letter-spacing: -0.056rem;color: #24252b;margin-bottom: 2rem;}
.card p.tit{ width:70px; height:27px;line-height:27px; text-align:center; font-size:1.5rem;font-weight:400; letter-spacing:-0.028rem;color:#fff;background-color:#808896; border-radius:20px;}
.card p.small{ margin-top:1rem; min-height:100px;font-size:1.6rem;font-weight:400;line-height:1.4;letter-spacing:-0.068rem;color: #5b5c61;word-break: keep-all;}
.card p.Workplace{font-size:1.6rem;font-weight:400;line-height: 1.4;letter-spacing: -0.048rem;color: #5b5c61; word-break:keep-all;}
.card img{ width:7em; margin-bottom:3em} 

/* =========================   반응형========================= */
@media(max-width:1024px){.grid {grid-template-columns:repeat(2,1fr);}
.grid { margin-bottom:20px;}
.grid.two {grid-template-columns:repeat(2,1fr);}
.grid.won {grid-template-columns:repeat(1,1fr);}
.grid.four {grid-template-columns:repeat(2,1fr);}

 
.process-flow {flex-direction: column;gap:20px;margin-top:20px; }
.process-flow::before {left:46px;width:1px;height: 100%;top: 0;}
.process-step {width: 100%;display: flex;text-align: left;}
.step-circle {margin-right:16px; width:80px;height:78px; padding:5rem; }
.step-circle img{width:60px;height:60px;  background:#fff; }
.step-card {width: 100%; padding:20px 30px 20px 30px; min-height:100px;}
.step-title {font-size:2rem; margin-bottom:0.5rem;}
.step-desc {font-size: 1.8rem; }

.job-list {margin-top:2rem;  min-height:0px; padding:0}
.card p.tit{ margin-top:20px}
.card p.small{min-height:80px;}
}

@media(max-width:768px){
.BannerSub {height:300px;}
.BannerSub .banner-inner {width:auto;padding:0px; margin-top:50px; text-align:center;}
.BannerSub .banner-inner .banner-sub {font-size:1.4rem;letter-spacing:1.5px;opacity:0.7;margin-bottom:0px;}
.BannerSub .banner-inner .banner-title {font-size:3.4rem;font-weight:700;}

.HRside-nav {display:none;}
.mobile-nav {display:block;position:sticky;top:0;background:#fff;z-index:999;border-bottom:1px solid #eee;}
 
.process-flow {flex-direction: column;gap:20px;margin-top:20px; }
.process-flow::before {left:38px;width:1px;height: 100%;top: 0;}
.process-step {width: 100%;display: flex;text-align: left;}
.step-circle {margin-right:10px; width:70px;height:68px; padding:4rem; }
.step-circle img{width:50px;height:50px;  background:#fff; }
.step-card {width: 100%; padding:20px 30px 20px 30px; min-height:100px;}
.step-title {font-size:1.8rem; margin-bottom:0.5rem;}
.step-desc {font-size: 1.6rem; }

.job-list {margin-top:2rem;  min-height:0px; padding:0}
.card p.tit{ margin-top:20px}
.card p.small{min-height:80px;}



.grid { margin-bottom:20px;}
.grid.two {grid-template-columns:repeat(1,1fr);}
.grid.won {grid-template-columns:repeat(1,1fr);}
.grid.four {grid-template-columns:repeat(1,1fr);}

.card {padding:25px 30px;  }
.card img{ position:absolute; top:17px;right:20px;width:4.5em; margin-bottom:2em}
.card h4{font-size: 2.2rem; line-height: 1.4;letter-spacing: -0.056rem; margin-bottom:1.8rem;}
.card p{ font-size: 1.8rem;font-weight: 500;line-height: 1.4;letter-spacing: -0.048rem;color: #5b5c61;word-break: keep-all;}
.card:hover {transform:translateY(-12px);box-shadow:none;}

.grid.two .card {padding:25px 30px;  }
.grid.won .card {padding:0px 0px; }
.job-comm-txt li {font-size:1.6rem;}


}