@charset "utf-8";
/* NH농협생명 — 홈페이지 메인화면 전용 스타일 */
@import url("new_common.css");
a:hover,a:focus,a:active{text-decoration:none}

/* ============================================================
레이아웃 본체 (w:1280, 중앙 정렬)
============================================================ */
.layout{width:1280px;margin:0 auto}
div.layout{padding-bottom:100px}

/* ============================================================
메인 + 배너 + 퀵메뉴 + 등등 
============================================================ */
.main-inner{width:1280px;margin:0 auto;padding-bottom:80px;display:flex;flex-direction:column;gap:40px}

/* ----- 메인 비주얼 ------------------------------------------ */
.main-visual{position:relative;width:1280px;height:425px;border-radius:24px;overflow:hidden;box-shadow:0 0 3px rgba(0,0,0,0.08)}
.slide-stack{position:absolute;inset:0}
.slide{position:absolute;inset:0;border-radius:24px;overflow:hidden;opacity:0;transition:opacity .6s ease-in-out}
.slide.is-active{opacity:1;z-index:2}

.slide-bg{position:absolute;inset:0}
.slide-bg img{width:100%;height:100%;object-fit:cover}

/* 인디케이터 */
.indicator{position:absolute;left:50%;bottom:0;transform:translateX(-50%);padding:0 24px 16px;display:flex;align-items:center;gap:10px;z-index:10}
/* 슬라이드 번호 카운터 (08 ㆍ 10) */
.indicator-counter{display:flex;align-items:baseline;padding:2px 10px;border-radius:24px;/* background:rgba(244,244,244,0.88);*/backdrop-filter:blur(4px)}
.ind-current{width:10px;font-size:18px;font-weight:700;color:#000;line-height:1.4}
.ind-sep{width:10px;font-size:16px;font-weight:500;color:#979797;margin:0 2px}
.ind-total{width:10px;font-size:15px;font-weight:500;color:#979797;line-height:1.4}
/* 이전/다음/재생 공통 버튼 */
.ind-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:rgba(0,0,0,0.6);transition:color .2s;position:relative;border:0;background:none;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.ind-btn:hover{color:#000}
/* 이전 < */
.ind-prev::after{content:'';display:block;width:10px;height:10px;border-top:3px solid currentColor;border-left:3px solid currentColor;border-radius:1px;transform:rotate(-45deg) translate(2px,0)}
/* 다음 > */
.ind-next::after{content:'';display:block;width:10px;height:10px;border-top:3px solid currentColor;border-right:3px solid currentColor;border-radius:1px;transform:rotate(45deg) translate(-2px,0)}
/* 재생/정지 */
.indicator-play{background:rgba(255,255,255,0.4);border-radius:16px;padding:0;width:24px;height:24px;border:0;background:none;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.indicator-play .play-icon{display:flex;align-items:center;justify-content:center;gap:2px}
.indicator-play.is-playing .play-icon::before,
.indicator-play.is-playing .play-icon::after{content:'';display:block;width:3px;height:10px;background:rgba(0,0,0,0.65);border-radius:1px}
.indicator-play.is-paused .play-icon::before{content:'';display:block;width:0;height:0;border-style:solid;border-width:5px 0 5px 9px;border-color:transparent transparent transparent rgba(0,0,0,0.65);margin-left:2px}

/* 로그인 카드 */
.login-card{position:absolute;top:50%;left:calc(50% + 412px);transform:translate(-50%, -50%);width:254px;background:rgba(255,255,255,0.9);border-radius:32px;padding:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;box-shadow:0 0 8px rgba(0,0,0,0.10);z-index:5}
.login-text{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;color:rgba(0,0,0,0.8);white-space:nowrap}
.login-sub{margin:0;font-weight:var(--fweight500);font-size:var(--hfsize3);line-height:1.2}
.login-title{margin:0;font-weight:var(--fweight700);font-size:var(--fsize9);line-height:1.2}
.login-btn{display:flex;align-items:center;justify-content:center;width:100%;background:var(--c-blue);border-radius:8px;height:46px;font-weight:var(--fweight700);font-size:var(--fsize12);color:var(--color_white);white-space:nowrap;transition:background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease)}
.login-btn:hover,
.login-btn:focus-visible{background:var(--c-blue-deep);transform:translateY(-2px);box-shadow:0 6px 16px rgba(4,111,217,0.35);color:var(--color_white)}


/* ============================================================
상품영역 — 독립 full-width section, 회색 배경 없음
============================================================ */
.product-area{width:100%;padding:70px calc((100% - 1280px) / 2) 80px;display:flex;flex-direction:column;gap:80px;box-sizing:border-box}
.section{width:100%}
.section-products{display:flex;flex-direction:column;gap:32px}

/* ----- 보험 카테고리 카드 5개 --------------------------------- */
.product-cards{display:flex;align-items:center;justify-content:space-between;width:1280px;gap:32px}
.pcard{width:230px;height:230px;background:var(--color_white);border-radius:32px;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:32px 22px 22px 32px;box-shadow:0 0 8px 0 rgba(0,0,0,0.10);transition:box-shadow .25s var(--ease)}
.pcard .nhlife_ico{--sizeFix:100px;flex-shrink:0;align-self:flex-end;filter:drop-shadow(0 2px 2px rgba(0,0,0,0.10));transition:transform .35s var(--ease)}
/* 피그마 호버 variant:아이콘만 1.2배 스케일 */
.pcard:hover .nhlife_ico,
.pcard:has(:hover) .nhlife_ico,
.pcard:focus-visible .nhlife_ico,
.pcard.is-hover .nhlife_ico{transform:scale(1.2)}
.pcard-text{display:flex;flex-direction:column}
.pcard-text .pt-sub{margin:0;font-weight:var(--fweight700);font-size:var(--fsize12);color:var(--color_black);white-space:nowrap;line-height:1.2}
.pcard-text .pt-main{margin:0;font-weight:var(--fweight700);font-size:var(--fsize12);white-space:nowrap;line-height:1.2}
.pt-red{color:var(--c-red)}
.pt-blue{color:var(--c-blue2)}
.pt-skyblue{color:#28afbc}
.pt-rose{color:#4f81cc}
.pt-gold{color:var(--c-gold)}

/* ----- 보장분석/온라인보험 듀얼 배너 -------------------------- */
.dual-banners{display:flex;gap:32px;align-items:stretch}
.dual-banner{position:relative;width:624px;height:158px;transition:transform .25s, box-shadow .25s;border-radius:32px;display:flex;align-items:center;justify-content:space-between;padding:14px 72px;}
.db-analysis{background:var(--c-blue-pale);color:var(--color_gray22)}
.db-online{background:var(--c-blue-light);color:var(--c-blue-deep)}
.dual-banner:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,0.12)}
.dual-banner:hover .db-img img{transform:scale(1.08);transition:transform .25s}
.db-img img{transition:transform .25s}
.db-text{display:flex;flex-direction:column;gap:12px}
.db-title{margin:0;font-weight:var(--fweight800);font-size:var(--fsize9);line-height:1.2}
.db-sub{margin:0;font-weight:var(--fweight400);font-size:var(--hfsize5)}
.db-img{flex-shrink:0;filter:drop-shadow(0 5px 7px rgba(0,0,0,0.10))}
.db-analysis .db-img{width:86px;height:110px}
.db-online .db-img{width:107px;height:110px}
.db-img img{width:100%;height:100%;object-fit:contain}

/* ----- 이런 상품 어떠세요? ----------------------------------- */
.section-recommend{display:flex;flex-direction:column;gap:32px;width:1280px;margin-top:40px}
.recommend-cards{display:flex;align-items:center;gap:32px;width:1280px}
.rcard{width:296px;height:230px;background:var(--color_white);border-radius:32px;padding:32px;display:flex;flex-direction:column;align-items:flex-start;gap:24px;box-shadow:0 0 8px 0 rgba(0,0,0,0.10);transition:box-shadow .25s var(--ease)}
.rcard:hover,
.rcard:focus-visible{box-shadow:0 8px 20px 0 rgba(0,0,0,0.18)}
.rcard-title{margin:0;font-weight:var(--fweight500);font-size:var(--hfsize4);color:var(--c-text);letter-spacing:-1.2px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%}
.rcard-name{margin:0;font-weight:var(--fweight500);font-size:var(--hfsize4);color:#536876;letter-spacing:-1.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.rcard-tag{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;border-radius:24px;font-weight:var(--fweight400);font-size:var(--fsize3);color:var(--color_white);white-space:nowrap}
.tag-blue{background:var(--c-blue)}
.tag-green{background:var(--c-green)}

/* ============================================================
content (원더플 / 새소식 / 수련원)
============================================================ */
.content{width:1280px;display:flex;flex-direction:column;gap:80px}

/* ----- 원더플 라이프 ----------------------------------------- */
.section-wonderful{display:flex;flex-direction:column;gap:32px;margin-top:40px}
.wonderful-cards{display:flex;gap:32px;align-items:center}
.wcard{position:relative;width:296px;height:240px;background:var(--color_white);border-radius:32px;overflow:hidden;box-shadow:0 0 8px rgba(0,0,0,0.15)}
.wcard-thumb{position:absolute;left:0;top:-8px;width:296px;height:180px;overflow:hidden}
.wcard-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
/* 카드 hover/focus 시 내부 이미지 1.3배 확대 (overflow:hidden로 박스 밖 잘림) */
.wcard:hover .wcard-thumb img,
.wcard:focus-visible .wcard-thumb img{transform:scale(1.3)}
.wcard-title{position:absolute;left:32px;right:32px;top:182px;margin:0;font-weight:var(--fweight700);font-size:var(--hfsize5);color:var(--c-text);letter-spacing:-1.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wcard-meta{position:absolute;left:32px;top:209px;margin:0;font-weight:var(--fweight500);font-size:var(--hfsize6);color:#536876;white-space:nowrap}

/* ----- 새소식 ------------------------------------------------ */
.section-news{display:flex;flex-direction:column;gap:32px;margin-top:40px}
.news-cards{display:flex;gap:32px;align-items:center}
.news-cards .more-arrow{background:var(--color_gray23);border-radius:10px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s var(--ease)}
.news-cards .more-arrow::before{content:'';display:block;width:9px;height:9px;border-top:3px solid var(--color_gray24);border-right:3px solid var(--color_gray24);border-radius:2px;transform:rotate(45deg) translate(-1px, 1px);transition:border-color .2s var(--ease)}

/* ----- 수련원 ------------------------------------------------ */
.section-resort{display:flex;flex-direction:column;gap:32px;margin-top:40px}

.resort-card{position:relative;width:1280px;height:514px;border-radius:32px;border:1px solid rgba(210,210,213,0.6);overflow:hidden;box-shadow:0 0 8px rgba(0,0,0,0.10);background:var(--color_white)}
.resort-bg{position:absolute;left:-1px;top:-4px;width:1280px;height:550px}
/* 6개 이미지 cross-fade 레이어 (all-in-DOM 패턴) */
.bg-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease;pointer-events:none}
.bg-layer.is-active{opacity:1}

/* 좌측 텍스트만 페이드 swap (이미지는 cross-fade) */
.resort-text{position:absolute;left:71px;top:68px;width:600px;display:flex;flex-direction:column;gap:10px;color:var(--color_white);text-shadow:0 2px 4px rgba(0,0,0,0.10);transition:opacity .3s ease}
.resort-card.is-fading .resort-text{opacity:0}
.resort-meta{margin:0;font-weight:var(--fweight400);font-size:var(--hfsize3)}
.resort-title{margin:0;font-weight:var(--fweight700);font-size:var(--fsize17);line-height:1.15}
.resort-cta{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-weight:var(--fweight700);font-size:var(--fsize8);color:var(--color_white);text-shadow:0 2px 4px rgba(0,0,0,0.10)}
a.resort-cta:hover, a.resort-cta:focus, a.resort-cta:active{color:#fff !important}
.resort-cta .more-arrow{width:32px;height:32px;border-radius:30px;background:rgba(255,255,255,0.25);flex-shrink:0;opacity:0;transition:opacity .2s var(--ease)}
.resort-cta:hover .more-arrow{opacity:1}
.resort-cta .more-arrow::before{width:12px;height:12px;border-color:var(--color_white)}

/* 우측 흰색 사이드
- 피그마:resort-side absolute left:842 top:-1 w:354 h:514 var(--color_white)
- 6 row를 절대 좌표로 박고 transform translateY(-50%)로 row center를 top과 일치
- 도트 center y:84.5 / 148.5 / 223.5 / 298.5 / 365.5 / 429.5 (resort-card 기준)
*/
.resort-side{position:absolute;padding:69px 117px 75px 54px;right:84px;top:-1px;width:354px;height:514px;background:var(--color_white)}

/* 활성 인덱스에 따라 JS가 .resort-row의 top을 동적으로 설정.
transition으로 부드러운 롤링 애니메이션. */
.resort-row{position:absolute;left:18px;right:50px;display:flex;align-items:center;gap:12px;transform:translateY(-50%);transition:top .45s cubic-bezier(.4, 0, .2, 1)}

.rdot{flex-shrink:0;width:21px;height:21px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.rdot::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:1px solid rgba(0,0,0,0.2);opacity:0;transition:opacity .35s cubic-bezier(.4, 0, .2, 1);}
.rdot::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--color_gray25);transition:background .35s cubic-bezier(.4, 0, .2, 1)}
.rdot.is-active::before{opacity:1}
.rdot.is-active::after{background:rgba(0,0,0,0.5)}

.resort-tab{flex:1;text-align:left;font-weight:var(--fweight600);font-size:var(--hfsize3);color:#536876;white-space:nowrap;line-height:1.1;background:transparent;border:0;padding:22px 0;cursor:pointer;transition:font-size .4s cubic-bezier(.4, 0, .2, 1),color .3s ease}
.resort-tab.is-active{font-weight:var(--fweight800);font-size:var(--fsize16);color:var(--color_black);line-height:1}