@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-job.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:2%; top:35%;  transform:translate(-20px, -50%); z-index:1000;opacity:0;pointer-events:none;transition:all .5s ease; border-radius:10px; z-index:111;  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:120px; 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:120px; 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);  }
.HRside-nav a::before {content:"";position:absolute; left:0px; top:50%;  transform:translateY(-50%); width:0px; height:0px; border-radius:50px; background:#fff; transition:.3s; }

/* =========================   모바일 네비========================= */
.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;}

 

/* =========================   반응형========================= */
@media(max-width:1024px){.grid {grid-template-columns:repeat(3,1fr);}}
@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;}


}

section .inner{ width:100%; display:flex;margin:0 auto    }
.section-title{width:50%; position:sticky; top:150px; height:fit-content;  text-align:left;  }
.section-title.is-visible {  opacity: 1;  transform: translateY(0);}

/* 이미지 */
.thumb-list { margin-top:6rem}
.thumb-list .thumb {width:450px;height:500px; border-radius:10px;overflow:hidden; transform:scale(0.6);opacity:0.5; transition:.6s ease;  }
.thumb-list .thumb .jopimg-bg01 {width:450px;height:500px;  background:url(../images/sub03-job01.jpg) no-repeat left -100px top 0px; background-size:cover;  object-fit:cover;}
.thumb-list .thumb .jopimg-bg02 {width:450px;height:500px;  background:url(../images/sub03-job02.jpg) no-repeat right -65px top 0px; background-size:cover;  object-fit:cover;}
.thumb-list .thumb .jopimg-bg03 {width:450px;height:500px;  background:url(../images/sub03-job03.jpg) no-repeat left 0px bottom 0px; background-size:cover;  object-fit:cover;}
.thumb-list .thumb.show {transform:scale(1);opacity:1;}

.grid {width:50%; margin-bottom:0px;}
.card {flex-direction:column; text-align:left; margin-bottom:120px; }
.card:last-child {margin-bottom:50px;}
.card .jobtit{ font-size:3.8rem; font-weight:700; line-height:1.8; letter-spacing:-0.056rem; color: #24252b; margin-bottom:4rem;   border-bottom:1px solid #CCC}
.card .jobbox {flex-direction:column; gap:0px;  }
.card .jobbox .jobcard{ padding:0px; text-align:left; border-radius:10px; border:0px; transition:.6s cubic-bezier(.22,1,.36,1); margin-bottom:30px;  }
.card .jobbox .jobtit-small{font-size:1.8rem;font-weight:700; letter-spacing:-0.048rem; color:#24252b; margin-bottom:0.3rem;    }
.card .jobbox .jobtit-txt {font-size:2.2rem;font-weight:500;line-height: 1.4;letter-spacing: -0.048rem;color: #5b5c61;word-break: keep-all;}

/* =========================   모바일 (768px 이하)========================= */
@media (max-width: 1024px) {
section .inner {flex-direction: column; padding: 0 2.4rem;}
.section-title {width:100%;position: relative;top: auto;margin-bottom: 20px;text-align:center;padding: 0rem; }
.container { margin-top:-80px; }

/* 이미지 */
.section-title .thumb-list {  margin-top:20px; flex-direction: row;  margin-bottom:20px;  }
.section-title .thumb-list .thumb {width: 100%; height:280px;  border-radius:6px; }
.section-title .thumb-list .thumb > div, .thumb-list .thumb p {width:100%; height:100%; }
.section-title .thumb-list .thumb .jopimg-bg01 {width:100%;height:280px;  background:url(../images/sub03-job01.jpg) no-repeat center bottom -30px; background-size:cover;  object-fit:cover;}
.section-title .thumb-list .thumb .jopimg-bg02 {width:100%;height:280px;  background:url(../images/sub03-job02.jpg) no-repeat center; background-size:cover;  object-fit:cover;}
.section-title .thumb-list .thumb .jopimg-bg03 {width:100%;height:280px;  background:url(../images/sub03-job03.jpg) no-repeat center top -150px; background-size:cover;  object-fit:cover;}

/* 콘텐츠 영역 */
.grid {width:100%;}
.card {flex-direction:column; text-align:left; margin-bottom:50px;opacity:0;transform:translateY(100px);transition:.6s cubic-bezier(.22,1,.36,1);  }
.card:last-child {margin-bottom:0px;}
.card .jobtit {font-size: 2.4rem;margin-bottom: 16px;}
.card .jobbox { gap: 20px; }

.card .jobbox .jobcard{ margin-bottom:15px;  }
.card .jobbox .jobtit-small{font-size:1.6rem;font-weight:700; letter-spacing:-0.048rem; color:#24252b; margin-bottom:0rem;    }
.card .jobbox .jobtit-txt {font-size:1.8rem;font-weight:500;line-height: 1.4;letter-spacing: -0.048rem;color: #5b5c61;word-break: keep-all;} 

/* =========================   모바일 (768px 이하)========================= */
@media (max-width: 768px) {
section .inner {flex-direction: column; padding: 0 2.4rem;}
.section-title {width:100%;position: relative;top: auto;margin-bottom: 20px;text-align:center;padding: 0rem; }
.container { margin-top:-80px; }

 
/* 이미지 */
.section-title .thumb-list {  margin-top:20px; flex-direction: row;  margin-bottom:20px;  }
.section-title .thumb-list .thumb {width: 100%; height:180px;  border-radius:6px; }
.section-title .thumb-list .thumb > div, .thumb-list .thumb p {width:100%; height:100%; }
.section-title .thumb-list .thumb .jopimg-bg01 {width:100%;height:180px;  background:url(../images/sub03-job01.jpg) no-repeat center bottom -5px; background-size:cover;  object-fit:cover;}
.section-title .thumb-list .thumb .jopimg-bg02 {width:100%;height:180px;  background:url(../images/sub03-job02.jpg) no-repeat center bottom -5px; background-size:cover;  object-fit:cover;}
.section-title .thumb-list .thumb .jopimg-bg03 {width:100%;height:180px;  background:url(../images/sub03-job03.jpg) no-repeat center top -80px; background-size:cover;  object-fit:cover;}

/* 콘텐츠 영역 */
.grid {width:100%;}
.card {flex-direction:column; text-align:left; margin-bottom:50px;opacity:0;transform:translateY(100px);transition:.6s cubic-bezier(.22,1,.36,1);  }
.card:last-child {margin-bottom:0px;}
.card .jobtit {font-size: 2.4rem;margin-bottom: 16px;}
.card .jobbox { gap: 20px; }

.card .jobbox .jobcard{ margin-bottom:15px;  }
.card .jobbox .jobtit-small{font-size:1.6rem;font-weight:700; letter-spacing:-0.048rem; color:#24252b; margin-bottom:0rem;    }
.card .jobbox .jobtit-txt {font-size:1.8rem;font-weight:500;line-height: 1.4;letter-spacing: -0.048rem;color: #5b5c61;word-break: keep-all;}

}