@charset "utf-8";
#header {  z-index: 10000;}
.section { margin:0 auto; text-align:center;}
/* ========================= 배너========================= */
.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-benefits.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:190px; 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);  }
.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;}

/* =========================   컨텐츠========================= */
 
.grid {display:grid;grid-template-columns:repeat(3,1fr);gap:28px; margin-bottom:100px;}
.grid.won {grid-template-columns:repeat(1,1fr);}
.grid.two {grid-template-columns:repeat(2,1fr); margin-bottom:0px;}
.grid.three01 {grid-template-columns:repeat(3,1fr);}
.grid.three02 {grid-template-columns:repeat(3,1fr);gap:5px; }
.grid.four{grid-template-columns:repeat(4,1fr);gap:16px;}


.grid.two .card {padding:70px 70px; text-align:left;border-radius:20px;border:1px solid #f1f5f9;background:#f3f3f3;opacity:0;transform:translateY(100px);transition:.6s cubic-bezier(.22,1,.36,1);}
.grid.two .card:hover {transform:translateY(-12px);box-shadow:0 20px 40px rgba(0,0,0,0.06);}
.grid.two .card h4{display: block;font-size: 2.8rem;font-weight: 700;line-height: 1.4;letter-spacing: -0.056rem;color: #24252b;margin-bottom: 2rem;}
.grid.two .card p{ font-size: 2.4rem;font-weight: 500;line-height: 1.4;letter-spacing: -0.048rem;color: #5b5c61;word-break: keep-all;}
.grid.two .card img{ width:8em; margin-bottom:3em}


.grid.three01 .card {padding:0px 0px; text-align:left;border-radius:3rem; border:0px; background:#fff; opacity:0;transform:translateY(100px);transition:.6s cubic-bezier(.22,1,.36,1);}
.grid.three01 .card:hover {transform:translateY(0px);box-shadow:0 0px 0px rgba(0,0,0,0.0);}
.grid.three01 img{ width:100%; margin-bottom:3em;  border-top-left-radius:3rem; border-top-right-radius:3rem; background-color:#fff}
.grid.three01 .card h4{padding:0rem 0rem 0rem 4rem; display: block;font-size: 2.8rem;font-weight: 700;line-height: 1.4;letter-spacing: -0.056rem;color: #24252b;margin-bottom: 2rem;}
.grid.three01 .card p{padding:0rem 2rem 4rem 4rem; font-size: 2.4rem;font-weight: 500;line-height: 1.4;letter-spacing: -0.048rem;color: #5b5c61;word-break: keep-all;}

.grid.three02 .card {padding:0px 30px; text-align:center;border-radius:20px; border:0px; background: transparent; opacity:0;transform:translateY(100px);transition:.6s cubic-bezier(.22,1,.36,1);}
.grid.three02 .card:hover {transform:translateY(0px);box-shadow:0 0px 0px rgba(0,0,0,0.0);}
.grid.three02 .card h4{display: block;font-size: 2.8rem;font-weight: 700;line-height: 1.4;letter-spacing: -0.056rem;color: #24252b;margin-bottom: 2rem;}
.grid.three02 .card p{ font-size: 2.4rem;font-weight: 500;line-height: 1.4;letter-spacing: -0.048rem;color: #5b5c61;word-break: keep-all;}
.grid.three02 img{ width:100%; margin-bottom:3em;   border-radius:1rem; background-color:#fff}

.grid.four .card {padding:40px 40px; text-align:left;border-radius:16px; border:1px solid #f1f5f9; background:#fff; opacity:0; transform:translateY(100px);transition:.6s cubic-bezier(.22,1,.36,1);}
.grid.four .card h4{display: block;font-size:2.2rem;font-weight: 700;line-height: 1.4;letter-spacing: -0.056rem;color: #24252b;margin-bottom:1.5rem;}
.grid.four .card p{ font-size:1.8rem;font-weight:400;line-height: 1.2;letter-spacing: -0.048rem;color: #5b5c61;word-break: keep-all;}
.grid.four img{ width:6rem; margin-bottom:2em; padding:0rem; border-radius:0rem;background-color:#fff}

/* =========================   반응형========================= */
@media(max-width:1024px){
    .grid {grid-template-columns:repeat(2,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:9; border-bottom:1px solid #eee; }

section .inner{display:block; }

.grid, .grid.two {grid-template-columns:1fr;gap:8px; margin-bottom:60px}
.grid.three01 {grid-template-columns:repeat(1,1fr);}
.grid.three02 {grid-template-columns:repeat(1,1fr);}
.grid.four{grid-template-columns:repeat(2,1fr);gap:16px;}

.grid.three01 .card { margin-top: 1.5rem;}
.grid.three02 .card { margin-top:7rem;}
.grid.three02 .card h4{margin-bottom:0.5rem;}
.grid.three02 img{margin-bottom:1em;  }

.grid.four{grid-template-columns:repeat(2,1fr);gap:8px;}
.grid.four .card {padding:15px 15px; text-align:left;border-radius:10px;border:1px solid #f1f5f9;background:#f3f3f3;opacity:0;transform:translateY(100px);transition:.6s cubic-bezier(.22,1,.36,1);}
.grid.four .card h4{font-size:1.8rem; margin-bottom:1rem;}
.grid.four .card p{ font-size:1.6rem;}
.grid.four img{ position:relative;top:0px;right:0px;   margin-bottom:2em; width:5em; margin-bottom:1em; padding:1rem; border-radius:50%;background-color:#fff}
}