@charset "utf-8"; /* [SEPTEM] UI Dev Team : 2023 고도화 신규 파일 : v20250210 */ :root { /* 컨텐츠 여백 */ --container1:82px; --container2:calc(var(--container1) + clamp(70px, 7.0rem, 80px)); /* 여백 */ --space32:32px; --space28:28px; --space24:24px; --space20:20px; --space18:18px; --space16:16px; --space12:12px; --space10:10px; --space8:8px; --space6:6px; --space4:4px; --space28-t1:calc(var(--space28) * -1); --space24-t1:calc(var(--space24) * -1); --space20-t1:calc(var(--space20) * -1); --space18-t1:calc(var(--space18) * -1); --space16-t1:calc(var(--space16) * -1); --space12-t1:calc(var(--space12) * -1); --space10-t1:calc(var(--space10) * -1); --space8-t1:calc(var(--space8) * -1); --space6-t1:calc(var(--space6) * -1); --space4-t1:calc(var(--space4) * -1); /* BG 색상 */ --bg1:#f2f4f8; --bg2:#f8f8f8; --bg3:#d7dbe3; --bg4:#F4F7FB; --bg-dim:rgba(0,0,0,0.7); --bg-disabled:#ebebeb; --bg-disabled2:#f3f3f3; /* 백그라운드 이미지 */ --bgImg1:url('../images/img_set1.png?ver=20241212') no-repeat; --bgImg2:url('../images/img_set2.png?ver=20241212') no-repeat; --bgImg3:url('../images/img_set3.png?ver=20241212') no-repeat; --bgImg4:url('../images/img_set4.png?ver=20241212') no-repeat; /* 백그라운드 사이즈 */ --bgSize1:224px auto; --bgSize2:608px auto; --bgSize3:740px auto; --bgSize4:576px auto; /* 박스쉐도우 */ --boxShadow1:0px 2px 5px 0px rgba(41, 58, 88, 0.16); /* 박스 여백 */ --boxPadding1:var(--space24) var(--space20) calc(var(--space24) + 4px); --boxPadding2:calc(var(--space24) + 4px) var(--space20) var(--space24); --boxPadding3:calc(var(--space24) + 4px) var(--space20); /* 라인 색상 */ --line1:#bbb; --line2:#e1e1e1; --line3:#ebebeb; --line4:#f3f3f3; --line5:var(--color1); /* 포인트색상 */ --point1:#19a647; --point2:#eb1100; --point3:#0c419a; --point4:#00a873; --point5:#e75441; /* 폰트색상 */ --color0:#000; --color1:#111; --color2:#333; /* #222 */ --color3:#555; --color4:#666; --color5:#888; --color6:#999; --color-disabled:#999; /* 폰트사이즈 */ --fontSize10:clamp(10px, 1rem, 15px); --fontSize11:clamp(11px, 1.1rem, 16.5px); --fontSize12:clamp(12px, 1.2rem, 18px); --fontSize13:clamp(13px, 1.3rem, 19.5px); --fontSize14:clamp(14px, 1.4rem, 21px); --fontSize15:clamp(15px, 1.5rem, 22.5px); --fontSize16:clamp(16px, 1.6rem, 24px); --fontSize17:clamp(17px, 1.7rem, 25.5px); --fontSize18:clamp(18px, 1.8rem, 27px); --fontSize19:clamp(19px, 1.9rem, 28.5px); --fontSize20:clamp(20px, 2rem, 30px); --fontSize21:clamp(21px, 2.1rem,31.5px); --fontSize22:clamp(22px, 2.2rem, 33px); --fontSize24:clamp(24px, 2.4rem, 36px); --fontSize26:clamp(26px, 2.6rem, 39px); --fontSize34:clamp(34px, 3.4rem, 46px); --fontSize38:clamp(38px, 3.8rem, 51px); /* 사이즈 */ --size1:clamp(1px, 0.1rem, 2px); --size2:clamp(2px, 0.2rem, 4px); --size3:clamp(3px, 0.3rem, 6px); --size4:clamp(4px, 0.4rem, 8px); --size5:clamp(5px, 0.5rem, 9px); --size6:clamp(6px, 0.6rem, 10px); --size8:clamp(8px, 0.8rem, 12px); --size9:clamp(9px, 0.8rem, 18px); --size10:clamp(10px, 1rem, 15px); --size24:clamp(24px, 2.4rem, 36px); /* 등급색상 */ --grade0:#8B959B; --grade1:#577fe0; --grade2:#50bb9e; --grade3:#ffcf5b; --grade4:#f58e65; --grade5:#e95353; --border-color:#ebebeb; /* 추가 260625 */ } @media screen and (min-width:641px) { :root { /* 사이즈 */ --size1:3px; --size2:4px; --size3:6px; --size4:8px; --size5:9px; --size6:10px; --size8:12px; --size10:15px; --size24:36px; } } /* ************************************  * [TO-BE] 2023 마이데이터 고도화  * ************************************/ /* [공통] */ .nhasset li:nth-child(1) {--li-num:1;} .nhasset li:nth-child(2) {--li-num:2;} .nhasset li:nth-child(3) {--li-num:3;} .nhasset li:nth-child(4) {--li-num:4;} .nhasset li:nth-child(5) {--li-num:5;} .nhasset li:nth-child(6) {--li-num:6;} .nhasset li:nth-child(7) {--li-num:7;} .nhasset li:nth-child(8) {--li-num:8;} .nhasset li:nth-child(9) {--li-num:9;} .nhasset li:nth-child(10) {--li-num:10;} /* [색상] 등급 */ .nhasset .grade0 {--el-grade:var(--grade0);--el-grade-txt:var(--grade0);} .nhasset .grade1 {--el-grade:var(--grade1);--el-grade-txt:var(--grade1);} .nhasset .grade2 {--el-grade:var(--grade2);--el-grade-txt:#21a55d;} .nhasset .grade3 {--el-grade:var(--grade3);--el-grade-txt:#edac03;} .nhasset .grade4 {--el-grade:var(--grade4);--el-grade-txt:#e06b3c;} .nhasset .grade5 {--el-grade:var(--grade5);--el-grade-txt:var(--grade5);} /* [아이콘] 텍스트유형 */ .nhasset .iconTxt1 {position:relative;display:inline-block;padding-left:calc(var(--size8) + 4px);color:var(--el-color);font-size:var(--fontSize12);} .nhasset .iconTxt1:before {content:'';display:inline-block;position:absolute;top:calc(var(--size3) + 2px);left:0;width:var(--size8);height:var(--size8);border-radius:50%;background-color:var(--el-color);} .nhasset .iconTxt1.t1 {--el-color:#E75441;} .nhasset .iconTxt1.t2 {--el-color:#7F93AD;} .nhasset .iconTxt2 {display:inline-flex;align-items:center;padding:0 var(--size10);height:var(--size24);border:1px solid #666;border-radius:var(--size24);font-size:var(--fontSize12);text-align:center;white-space:nowrap;font-weight:400 !important;} .nhasset .iconTxt2[class*="grade"] {border-color:var(--el-grade);color:var(--el-grade-txt);} .nhasset .iconTxt2.c1 {border-color:#3674bc;color:#3674bc} .nhasset .iconTxt3 {overflow:hidden;display:inline-block;margin-top:-3px;margin-right:-3px;width:16px;height:16px;color:transparent;vertical-align:middle;background:var(--bgImg1) -144px 0;background-size:var(--bgSize1);} /* [아이콘] 이모지영역 */ .nhasset .emoji {display:inline-block;margin-top:-3px;vertical-align:middle;} .nhasset .emoji > img {width:100%;} /* [텍스트] 비활성화 */ .nhasset .txtDisabled {color:var(--color-disabled);} /* [헤드라인] 유형1 : 조기은퇴 */ .nhasset .titHeadline1 {position:relative;} .nhasset .titHeadline1 > h1, .nhasset .titHeadline1 > h2, .nhasset .titHeadline1 > h3, .nhasset .titHeadline1 > h4, .nhasset .titHeadline1 > h5, .nhasset .titHeadline1 > h6 {display:inline;font-size:var(--fontSize20);font-weight:900;color:var(--color1);} .nhasset .titHeadline1 > p {margin-top:var(--space20);font-size:var(--fontSize14);color:var(--color4);} .nhasset .titHeadline1 > p > span {display:block;margin-top:var(--space4);font-size:var(--fontSize12);color:var(--color5);} .nhasset .titHeadline1 .tooltipCont {left:0;} .nhasset .titHeadline1[class*="img"] > p:before {content:'';display:block;margin:0 auto var(--space16);width:200px;height:130px;background:var(--bgImg2) var(--el-background-position);background-size:var(--bgSize2);} .nhasset .titHeadline1.img1 {--el-background-position:-2px -2px;} .nhasset .titHeadline1.img2 {--el-background-position:-204px 0;} .nhasset .titHeadline1.img3 {--el-background-position:-406px 0;} /* [헤드라인] 유형2 : 신용점수올리기 */ .nhasset .titHeadline2 {margin:0 0 var(--space20) !important;position:relative;padding-top:120px;} .nhasset .titHeadline2 p > span {display:block;margin-top:16px;text-align:center;color:var(--color4);} .nhasset .titHeadline2 p > span > .arr {overflow:hidden;display:inline-block;margin:-3px 2px 0;width:16px;height:16px;background:var(--bgImg1) -48px 0;background-size:var(--bgSize1);color:transparent;vertical-align:middle;} .nhasset .titHeadline2 p > span > em, .nhasset .titHeadline2 p > span > em + span {color:var(--color1);} .nhasset .titHeadline2 p > strong {display:block;position:relative;z-index:1;margin:var(--space4) auto 0;width:var(--el-txt-wid);font-size:var(--fontSize20);font-weight:900;text-align:center;word-break:keep-all;} .nhasset .titHeadline2 p > strong > span {color:var(--point1);} .nhasset .titHeadline2 .lottie {position:absolute;left:50%;top:var(--el-top);z-index:1;margin-left:calc((var(--el-wid)/2) *-1);width:var(--el-wid);height:var(--el-hei);background:#fff;} .nhasset .titHeadline2 .lottie[data-lottie="lottieSuccess1"] {z-index:2;} .nhasset .titHeadline2 .lottie[data-lottie="lottieSuccess2"] {z-index:1;} .nhasset .titHeadline2.img1 {--el-wid:123px;--el-hei:120px;--el-top:0px;} .nhasset .titHeadline2.img1:before, .nhasset .titHeadline2.img1:after {content:'';display:block;position:absolute;left:50%;z-index:3;animation:star_ani 2s infinite cubic-bezier(0.29, 0.26, 0.73, 0.72)} .nhasset .titHeadline2.img1:before {top:0;margin-left:-6px;width:12px;height:12px;background:url('../images/creditscore/bg_star_01.png') no-repeat 0 0;background-size:100% auto;} .nhasset .titHeadline2.img1:after {top:65px;margin-left:40px;width:8px;height:8px;background:url('../images/creditscore/bg_star_02.png') no-repeat 0 0;background-size:100% auto;} .nhasset .titHeadline2.img2 {--el-wid:100px;--el-hei:107px;--el-top:13px;--el-txt-wid:60%;} @keyframes star_ani { 0% {transform:rotate(0deg);} 100% {transform:rotate(-360deg);} } /* [헤드라인] 유형3 : 신용점수올리기 서비스 안내 */ .nhasset .titHeadline3 {position:relative;z-index:1;} .nhasset .titHeadline3 p > strong {display:block;margin-bottom:var(--space6);font-size:var(--fontSize20);font-weight:900;} .nhasset .titHeadline3 p > span {display:block;margin-top:var(--space8);padding:1px var(--space8);width:fit-content;border-radius:10px;background-color:var(--bg1);font-size:var(--fontSize12);color:var(--color4);} .nhasset .titHeadline3 dl {margin:var(--space24) 0 0;} .nhasset .titHeadline3 dl > dt {margin-bottom:var(--space6-t1);font-size:var(--fontSize13);color:var(--color2);} .nhasset .titHeadline3 dl > dd .dataValue {font-size:var(--fontSize38);font-weight:900;} .nhasset .titHeadline3 dl > dd .dataValue + span {font-size:var(--fontSize19);font-weight:900;} .nhasset .titHeadline3 .lottie {position:absolute;bottom:var(--space16-t1);right:var(--space18);width:80px;height:80px;} .nhasset .titHeadline3 .lottie:before {content:'';display:block;position:absolute;right:var(--space4-t1);top:var(--space8-t1);width:100px;height:100px;background:url('../images/creditscore/bg_star_200.png') no-repeat 0 0;background-size:100% auto;} .nhasset .titHeadline3:before {content:'';display:block;position:absolute;left:var(--space10);top:93px;width:150px;height:150px;background:url('../images/creditscore/bg_blur_green.png') no-repeat 0 0;background-size:100% auto;} .nhasset .titHeadline3:after {content:'';display:block;position:absolute;top:58px;right:var(--space20-t1);z-index:-1;width:187px;height:195px;background:url('../images/creditscore/bg_blur_blue.png') no-repeat 0 0;background-size:100% auto;} .nhasset .titHeadline3 .hide {position:absolute;opacity:0;font-size:1px;} /* [메세지] 확인메세지 */ .nhasset .mesArea1 p:only-child {display:flex;flex-direction:column;align-items:center;text-align:center;} .nhasset .mesArea1 p:only-child:before {content:'';order:var(--el-order);display:block;margin:var(--space20) auto;width:200px;height:140px;background:var(--bgImg2);background-size:var(--bgSize2);background-position:var(--el-bg-position);} .nhasset .mesArea1 p:only-child > strong {order:1;display:block;font-size:var(--fontSize20);font-weight:900;color:var(--color1);} .nhasset .mesArea1 p:only-child > span {order:2;display:block;margin-top:var(--space20);font-size:var(--fontSize14);color:var(--color4);} .nhasset .mesArea1.img1 p {padding:var(--space32) 0 var(--space24);} .nhasset .mesArea1.img1 p > span {margin-top:var(--space10) !important;} .nhasset .mesArea1.img1 {--el-order:3;--el-bg-position:-2px -276px;} .nhasset .mesArea1.img2 {--el-bg-position:-204px -276px;} /* [메세지] 부정메세지 */ .nhasset .mesArea2 p:only-child {display:flex;flex-direction:column;align-items:center;position:relative;text-align:center;} .nhasset .mesArea2 p:only-child:before {content:'';order:var(--el-order);width:200px;height:140px;background:var(--bgImg2) 0 0;background-size:var(--bgSize2);} .nhasset .mesArea2 p:only-child > strong {order:1;display:block;font-size:var(--fontSize20);font-weight:900;color:var(--color1);} .nhasset .mesArea2 p:only-child > span {order:2;display:block;margin-top:var(--space8);font-size:var(--fontSize14);color:var(--color4);} .nhasset .mesArea2 p:only-child > span + span {font-size:var(--fontSize12);color:var(--color5)} .nhasset .mesArea2 .btns {width:100%;} .nhasset .mesArea2.img1, .nhasset .mesArea2.img2 {padding:var(--space24) var(--space20);background:#fff;border-radius:10px;box-shadow:var(--boxShadow1);} .nhasset .mesArea2.img1 p:only-child:before {--el-order:2;margin:var(--space24) 0;width:100%;background:url('../images/bg_mes01.gif') no-repeat 50% 0;background-size:auto 140px;} .nhasset .mesArea2.img1 p:only-child > strong, .nhasset .mesArea2.img2 p:only-child > strong {width:100%;text-align:left;} .nhasset .mesArea2.img2 p:only-child:before {--el-order:2;margin:var(--space24) 0;background-position:-2px -134px;} .nhasset .mesArea2.img3 {padding-top:55px;} .nhasset .mesArea2.img3 p:only-child:before {--el-order:0;margin:var(--space28) 0 var(--space20);background-position:-204px -134px;} .nhasset .mesArea2.img3 p:only-child > strong + span {margin-top:var(--space20);} .nhasset .mesArea2.img4, .nhasset .mesArea2.img5 {padding:var(--space28) 0 0;} .nhasset .mesArea2.img4:before {content:'';display:block;position:fixed;top:0;bottom:0;left:0;right:0;background:#FFF;} .nhasset .mesArea2.img4 p:only-child:before {--el-order:3;margin-top:67px;background-position:-406px -134px;} .nhasset .mesArea2.img5 p:only-child:before {--el-order:3;margin-top:var(--space24);width:300px;height:365px;background-position:-2px -520px;} /* [메세지] 진행중 메세지 */ .nhasset .mesArea3 {position:fixed;top:0;left:0;right:0;bottom:0;} .nhasset .mesArea3 > p:only-child {position:absolute;top:50%;left:var(--space16);right:var(--space16);transform:translateY(-50%);} .nhasset .mesArea3 > p:only-child:before {content:'';display:block;margin:0 auto var(--space8);width:200px;height:140px;background:var(--bgImg2) -406px -276px;background-size:var(--bgSize2);} .nhasset .mesArea3 > p:only-child strong {display:block;font-size:var(--fontSize14);font-weight:bold;color:#fff;text-align:center;} .nhasset .mesArea3 .contBtn06 {background:transparent;} .nhasset .mesArea3 .btns {display:block;margin-top:var(--space24);text-align:center;} .nhasset .mesArea3.img2 > p:only-child:before {width:87px;height:160px;background:url('../images/img_asset_loading_01.png');background-size:100%;animation:mesAni1 1s infinite ease-in-out;transform:rotate(0deg);} .nhasset .mesArea3.img2 > p:only-child:after, .nhasset .mesArea3.img2 > p:only-child > span:not([class]):before, .nhasset .mesArea3.img2 > p:only-child > span:not([class]):after, .nhasset .mesArea3.img2 > p:only-child strong:before {content:'';display:block;position:absolute;left:50%;background-size:100%;background-repeat:no-repeat;} .nhasset .mesArea3.img2 > p:only-child:after {top:82px;margin-left:-78px;width:22px;height:20px;background-image:url('../images/img_asset_loading_02.png');animation:mesAni2 1s infinite ease-in-out;transform:scale(0);} .nhasset .mesArea3.img2 > p:only-child > span:before {top:80px;margin-left:51px;width:20px;height:22px;background-image:url('../images/img_asset_loading_03.png');animation:mesAni3 1s infinite ease-in-out;transform:scale(0);} .nhasset .mesArea3.img2 > p:only-child > span:after {top:7px;margin-left:-56px;width:22px;height:22px;background-image:url('../images/img_asset_loading_04.png');animation:mesAni4 1s infinite ease-in-out;transform:scale(0);} .nhasset .mesArea3.img2 > p:only-child strong:before {top:0;left:50%;margin:0 -73px;width:146px;height:160px;background-image:url('../images/img_asset_loading_05.png');animation:mesAni5 1s infinite ease-in-out;opacity:0;} @keyframes mesAni1 { 0% {transform:rotate(0deg);} 30% {transform:rotate(-20deg)} 60% {transform:rotate(12deg)} 85% {transform:rotate(0deg)} 100% {transform:rotate(0deg)} } @keyframes mesAni2 { 0% {transform:scale(0);} 40% {transform:scale(1)} 100% {transform:scale(1)} } @keyframes mesAni3 { 0% {transform:scale(0);} 15% {transform:scale(0);} 50% {transform:scale(1)} 100% {transform:scale(1)} } @keyframes mesAni4 { 0% {transform:scale(0);} 25% {transform:scale(0);} 70% {transform:scale(1)} 100% {transform:scale(1)} } @keyframes mesAni5 { 0% {opacity:0;} 80% {opacity:0;} 90% {opacity:1;} 100% {opacity:1;} } /* [메세지] 토스트메세지 */ .nhasset .mesToast1 {position:absolute;padding:5px var(--space8);font-size:var(--fontSize12);color:var(--color1);background-color:#28a884;border-radius:4px;box-shadow:0 2px 5px 0px rgba(41, 58, 88, 0.1);white-space:nowrap;font-weight:400;color:#fff} .nhasset .mesToast1:after {content:'';display:block;position:absolute;bottom:-3px;right:var(--space12);width:8px;height:8px;background-color:#28a884;box-shadow:-2px 2px 5px 0px rgba(41, 58, 88, 0.1);transform:rotate(-45deg) skew(347deg, 347deg)} /* [BTN] 더보기 */ .nhasset .btnMore {overflow:hidden;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;position:relative;z-index:1;width:100%;padding:0 0 15px;border-radius:0 0 10px 10px;font-size:var(--fontSize14);} .nhasset .btnMore:before {content:'';display:block;position:relative;z-index:-1;width:100%;height:10px;margin-bottom:15px;border-radius:0 0 10px 10px;box-shadow:0 6px 6px 0 rgba(41,58,88,0.10), 0 8px 0 70px #d6dae2;} .nhasset .btnMore:after {content:'';display:inline-block;margin-left:var(--space6);width:12px;height:12px;background:#d8dbe2 url('../images/arr_down02.png') no-repeat center;background-size:10px auto;} .nhasset .btnMore.end:after, .nhasset .btnMore.active:after {transform:rotate(180deg);} .nhasset .boxTypeWrap .btnMore {margin:14px var(--space20-t1) var(--space24-t1);width:calc(100% + (var(--space20)*2));box-shadow:0px 10px 10px 0 rgb(242 244 248);transform:translateZ(0);} /* [BTN] 버튼영역 */ .nhasset .btnArea1 {margin:var(--space12) 0 0} /* [BTN] 네비게이션 */ .nhasset .tabNavi {position:-webkit-sticky;position:sticky;top:51px;z-index:1100;margin:0 var(--space16-t1) var(--space20);background:#fff;border-bottom:1px solid #e1e1e1;} .nhasset .tabNavi ul {display:flex;justify-content:space-around;padding:0 var(--space4);} .nhasset .tabNavi ul a {position:relative;display:flex;align-items:center;padding:0 var(--space12);height:50px;font-size:var(--fontSize16);color:var(--color5);font-weight:bold;white-space:nowrap;} .nhasset .tabNavi ul a[aria-current="page"] {color:var(--point1);} .nhasset .tabNavi ul a[aria-current="page"]:after {content: '';display:block;margin-left:2px;margin-top:-18px;height:4px;width:4px;background-color:var(--point1);border-radius:100%;} /* [FORM] 폼객체 */ .nhasset .inputText1 { --el-color:var(--color1); --el-text-align:left; --el-font-size:var(--fontSize20); --el-line-height:1.3; } .nhasset div.inputText1, .nhasset span.inputText1, .nhasset dd.inputText1 {display:flex;align-items:center;} .nhasset div.inputText1, .nhasset span.inputText1, .nhasset dd.inputText1, .nhasset input[type='text'].inputText1, .nhasset input[type='tel'].inputText1, .nhasset input[type='password'].inputText1 {border-bottom:1px solid var(--line5);} .nhasset .inputText1 input[type='text'], .nhasset .inputText1 input[type='tel'], .nhasset .inputText1 input[type='password'], .nhasset input[type='text'].inputText1, .nhasset input[type='tel'].inputText1, .nhasset input[type='password'].inputText1 {text-align:var(--el-text-align);padding:0;font-size:var(--el-font-size);font-weight:900;color:var(--el-color);height:auto;line-height:var(--el-line-height);} .nhasset .inputText1 input::-webkit-input-placeholder, .nhasset input.inputText1::-webkit-input-placeholder {font-size:var(--el-font-size);font-weight:400;text-align:var(--el-text-align);} .nhasset .inputText1.error, .nhasset .error .inputText1 {--line5:var(--point2);--el-color:var(--point2)} .nhasset .inputText1.disabled, .nhasset input[type='text'].inputText1:disabled, .nhasset input[type='tel'].inputText1:disabled, .nhasset input[type='password'].inputText1:disabled {border-color:var(--line2);--el-color:var(--color4)} .nhasset .inputText1 .unit {font-size:var(--fontSize18);font-weight:900;color:var(--el-color);line-height:var(--el-line-height);} .nhasset .inputText1 .btnReset {height:25px} .nhasset .inputText1.t1 { --el-text-align:left; --el-font-size:var(--fontSize26); --el-line-height:2; } /* [FORM] 폼객체 : 슬라이더 */ .nhasset .inputRange1 {position:relative;margin:var(--space20) 0 0; --el-bg:#EAEDF1; --el-bg1:#30b66d; --el-bg2:#48cf86; --el-size:24px; --el-height:10px; --el-left:var(--input-range-val); --el-right:var(--input-range-right-val); } .nhasset .inputRange1 [type="range"] {position:absolute;top:var(--space8-t1);z-index:2;width:100%;height:var(--el-size);border:0;padding:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;} .nhasset .inputRange1 [type="range"]::-webkit-slider-thumb {width:var(--el-size);height:var(--el-size);background-color:#fff;border-radius:50%;box-shadow:0 2px 6px 0 rgba(0,0,0,0.2);border:0 none;cursor:pointer;-webkit-appearance:none;appearance:none;pointer-events:all;} .nhasset .inputRange1 .area {position:relative;padding:0 !important;margin:0 !important;height:var(--el-height);border-radius:var(--el-height);background:linear-gradient(90deg, var(--el-bg1) 0%, var(--el-bg2) var(--input-range-val), var(--el-bg) var(--input-range-val), var(--el-bg) 100%);} .nhasset .inputRange1[data-range-type="single"] .area:after {display:none;} .nhasset .inputRange1[data-range-type="multi"] {--input-range-val:var(--input-range-left-val);} .nhasset .inputRange1[data-range-type="multi"] .area {background:linear-gradient(90deg,var(--el-bg) 0%, var(--el-bg) var(--input-range-left-val), var(--el-bg1) var(--input-range-left-val), var(--el-bg2) var(--input-range-right-val), var(--el-bg) var(--input-range-right-val), var(--el-bg) 100%);} .nhasset .inputRange1 datalist {display:flex;justify-content:space-between;margin-top:8px;width:100%;} .nhasset .inputRange1 datalist > option {width:var(--el-size);font-size:var(--fontSize11);color:var(--color5);text-align:center;} .nhasset .inputRange1 datalist > option:first-child {text-align:left;} .nhasset .inputRange1 datalist > option:last-child {text-align:right;} .nhasset .inputRange1 .output {display:block;position:relative;padding:var(--size4) 0;margin:0 6px 16px;} .nhasset .inputRange1 .output:before {content:'0%';color:transparent;} .nhasset .inputRange1 .output > span {display:block;position:absolute;top:0;left:0;min-width:calc((var(--size5) + var(--size2)) * 2);width:calc(var(--el-left) + var(--size8));white-space:nowrap;text-align:right;} .nhasset .inputRange1 .output > span:before {content:attr(data-value);display:inline-block;padding:var(--size4) 0;width:clamp(44px, 4.4rem, 68px);background-color:#e9eef4;border-radius:var(--size8);color:var(--color1);white-space:nowrap;text-align:center;font-weight:900;} .nhasset .inputRange1 .output > span:after {content:'';display:block;position:absolute;right:var(--size2);bottom:-2px;width:10px;height:10px;border-radius:3px;background-color:#e9eef4;transform:rotate(53deg) skew(16deg, 2deg);} .nhasset .inputRange1 .output > span:last-child:not(:only-child) {width:var(--el-right);} /* [FORM] 폼영역 */ .nhasset .formArea1 {display:flex;justify-content:flex-end;flex-wrap:wrap;margin:var(--space20) 0;} .nhasset .formArea1 > span, .nhasset .formArea1 .formArray .chkRadio {display:inline-flex;align-items:center;} .nhasset .formArea1 > span + span, .nhasset .formArea1 .formArray .chkRadio + .chkRadio {margin-left:var(--space20);} .nhasset .formArea1 > .side {order:-1;margin-right:auto;} .nhasset .formArea1 [type="checkbox"] + label, .nhasset .formArea1 .formArray .chkRadio label {margin-left:var(--space8);width:auto;font-size:var(--fontSize14);} .nhasset .formArea1 .formArray .chkRadio label {margin-right:0;} .nhasset .formArea1:last-child {margin-bottom:0;} .nhasset .formArea2 {margin:var(--space20) 0;} .nhasset .formArea2:first-child {margin-top:0;} .nhasset .formArea2:last-child {margin-bottom:0;} .nhasset .formArea2 .form {display:inline-block;vertical-align:top;} .nhasset .formArea2 .form > dt {position:relative;margin-bottom:var(--space4-t1);font-size:var(--fontSize12);color:var(--color4);} .nhasset .formArea2 .form > dd .inputText1.t1 {width:74px;} .nhasset .formArea2 .form + .form {margin-left:28px;} .nhasset .formArea2 .errorTxt {position:relative;margin:var(--space6) auto 0;} .nhasset .formArea2 .check > input[type='checkbox'] + label {margin-left:var(--space4)} /* [TABLE] 테이블 */ .nhasset .tblData1 {overflow:hidden;border-top:1px solid var(--line3);border-bottom:1px solid var(--line3);} .nhasset .tblData1 table {margin:-1px;width:calc(100% + 2px);} .nhasset .tblData1 th, .nhasset .tblData1 td {padding:12px 10px;border:1px solid var(--line3);font-size:var(--fontSize13);line-height:1.6;text-align:center;color:var(--color4);font-weight:bold;word-break:keep-all;} .nhasset .tblData1 thead th {height:45px;background:var(--bg2);color:var(--color1);} .nhasset.popWrap[class*="slidePop"] .popInner .popCont .tblData1 {margin:0 var(--space16) 0} /* [DATA] 기관정보 */ .nhasset .dataInfo1 {display:flex;align-items:center;} .nhasset .dataInfo1 strong {overflow:hidden;display:-webkit-box;font-size:var(--fontSize20);font-weight:900;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;} .nhasset dl.dataInfo1 {position:relative;justify-content:center;} .nhasset dl.dataInfo1 > dt {opacity:0;position:absolute;color:transparent;} .nhasset dl.dataInfo1 > dd {position:relative;min-width:50px;margin:0 var(--space20);text-align:center;} .nhasset dl.dataInfo1 > dd:last-child:before {content:'';display:block;position:absolute;top:12px;left:-28px;width:16px;height:16px;background:var(--bgImg1) -32px 0;background-size:var(--bgSize1);} .nhasset dl.dataInfo1 .imgLogo {display:block;margin:0 auto;} .nhasset dl.dataInfo1 strong {font-size:var(--fontSize14);font-weight:bold;} /* [DATA] 데이터 구분 */ .nhasset .dataWord1 > span {display:inline-block;font-size:var(--fontSize14) !important;} .nhasset .dataWord1 > span + span:before {content: '';display:inline-block;margin:-3px 6px 0 4px;width:3px;height:3px;border-radius:50%;background:var(--color1);vertical-align:middle;} /* [INFO] 정보영역 : 공통 */ .nhasset [class*="areaInfo"]:first-child {margin-top:0;} .nhasset [class*="areaInfo"]:last-child {margin-bottom:0;} /* [INFO] 정보영역 : 기준정보 */ .nhasset .areaInfo1 {display:flex;justify-content:space-between;align-items:center;margin:var(--space20) 0 var(--space16);font-size:var(--fontSize14);} .nhasset .areaInfo1 p > span:first-child {color:var(--color4);margin-right:4px;} .nhasset .areaInfo1 .side {position:relative;flex-shrink:0;margin-left:var(--space16);align-self:flex-start;} /* [MD2503_026] 마이데이터(스뱅) 접근성 */ .nhasset .areaInfo1 .side .mesToast1 {right:0;bottom:calc(100% + 8px);padding-right:30px;} .nhasset .areaInfo1 .side .mesToast1 .closeBtn{position:absolute;right:0;top:0;width:25px;height:25px;} .nhasset .areaInfo1 .side .mesToast1 .closeBtn:before,.nhasset .areaInfo1 .side .mesToast1 .closeBtn:after {position:absolute;right:12px;top:8px;content:'';height:12px;width:1px;background-color:#fff;} .nhasset .areaInfo1 .side .mesToast1 .closeBtn:before {transform:rotate(45deg);} .nhasset .areaInfo1 .side .mesToast1 .closeBtn:after {transform:rotate(-45deg);} .nhasset .areaInfo1.t1 {margin:32px 0 0;font-size:var(--fontSize14);color:var(--color4);} .nhasset .areaInfo1.t1 strong {font-weight:inherit;} .nhasset .areaInfo1.t1 p > span:first-child {color:inherit;} .nhasset .areaInfo1.t2 {margin-bottom:var(--space12);font-size:var(--fontSize13);color:var(--color4);} .nhasset .boxTypeWrap.pt0 .areaInfo1.t2 {padding-top:var(--space16);} /* [INFO] 정보영역 : 합계정보 */ .nhasset .areaInfo2, .nhasset .areaInfo2 ul {display:flex;justify-content:space-evenly;padding:0 var(--space20);} .nhasset .areaInfo2 ul {margin:0 var(--space20-t1);width:100%;} .nhasset .areaInfo2 dl, .nhasset .areaInfo2 ul > li {padding:var(--space20) var(--space4) var(--space24);text-align:center;} .nhasset .areaInfo2 dt, .nhasset .areaInfo2 div:first-child {font-size:var(--fontSize13);color:var(--color5);} .nhasset .areaInfo2 dd, .nhasset .areaInfo2 div:last-child {margin-top:var(--space8);font-size:var(--fontSize16);font-weight:900;} .nhasset .areaInfo2 .link {display:block;white-space:nowrap;} .nhasset .areaInfo2 .link:after {content:'';display:inline-block;margin-left:var(--space10);margin-right:var(--space6-t1);width:6px;height:10px;background:url('../images/arr_right01.png') center/6px auto no-repeat;} .nhasset .areaInfo2.t1 {padding:4px 0 0;border-radius:10px;background-color:#6ec0ce;color:#fff;} .nhasset .areaInfo2.t1 dt, .nhasset .areaInfo2.t1 div:first-child {color:#fff;} .nhasset .areaInfo2.t1 .link:after {background-image:url('../images/arr_right05.png');} .nhasset .areaInfo2.t2 {margin:var(--space10) -3px;} .nhasset .areaInfo2.t2, .nhasset .areaInfo2.t2 ul {padding-left:0;padding-right:0;} .nhasset .areaInfo2.t2 dl, .nhasset .areaInfo2.t2 ul > li {flex:1;margin:0 3px;padding:var(--space20) 0 var(--space12);min-height:84px;background-color:var(--bg2);border-radius:5px;} .nhasset .areaInfo2.t2 dt, .nhasset .areaInfo2.t2 div:first-child {font-size:var(--fontSize12);color:var(--color4);} .nhasset .areaInfo2.t2 dd, .nhasset .areaInfo2.t2 div:last-child {margin-top:0;font-size:var(--fontSize20);} .nhasset .areaInfo2.t2 .txtDisabled {font-size:var(--fontSize14);} @media screen and (max-width:320px){ .nhasset .areaInfo2, .nhasset .areaInfo2 ul {flex-wrap:wrap;} } /* [INFO] 정보영역 */ .nhasset .areaInfo4 {display:flex;justify-content:space-around;margin:var(--space20) 0 0;} .nhasset .areaInfo4 > dl {flex:1;text-align:center;} .nhasset .areaInfo4 > dl > dt {font-size:var(--fontSize13);color:var(--color5);font-weight:bold;} .nhasset .areaInfo4 > dl > dd {font-size:var(--fontSize16);color:var(--color1);font-weight:bold;} .nhasset .areaInfo4 > dl[class*="ic"]:before {content:'';display:block;width:40px;height:40px;margin:0 auto var(--space8);border-radius:50%;background:var(--bg4) var(--bgImg1);background-size:var(--bgSize1);} .nhasset .areaInfo4 > dl.ic1:before {background-position:0 -96px;} .nhasset .areaInfo4 > dl.ic2:before {background-position:-48px -96px;} .nhasset .areaInfo4 > dl.ic3:before {background-position:-96px -96px;} /* [INFO] 요약정보 : 유형1 */ .nhasset .infoSummary1 { --el-font-size:var(--fontSize20); --el-font-weight:900; --el-line-left:0; --el-line-right:0; } .nhasset .infoSummary1 {margin:var(--space20) 0;padding:var(--boxPadding2);background-color:#fff;box-shadow:var(--boxShadow1);border-radius:10px;} .nhasset .infoSummary1 .tit {display:flex;flex-wrap:wrap;align-items:center;position:relative;margin-bottom:var(--space24);padding-bottom:var(--space24);} .nhasset .infoSummary1 .tit:after {content:'';display:block;position:absolute;bottom:0;left:var(--el-line-left);right:var(--el-line-right);height:1px;background-color:var(--line3);} .nhasset .infoSummary1 .tit > h1, .nhasset .infoSummary1 .tit > h2, .nhasset .infoSummary1 .tit > h3, .nhasset .infoSummary1 .tit > h4, .nhasset .infoSummary1 .tit > h5, .nhasset .infoSummary1 .tit > h6, .nhasset .infoSummary1 .tit:not(div) {display:inline-block;font-size:var(--el-font-size);font-weight:var(--el-font-weight);} .nhasset .infoSummary1 .tit > p {width:100%;margin-top:var(--space8);font-size:var(--fontSize14);color:var(--color4);} .nhasset .infoSummary1 .tit > p .dataValue, .nhasset .infoSummary1 .tit > p .won {color:var(--color1);} .nhasset .infoSummary1 .tit > p.value {margin-top:var(--space4);} .nhasset .infoSummary1 .tit > p.value .dataValue {font-size:var(--fontSize26);font-weight:900;} .nhasset .infoSummary1 .tit > p.value .won {margin-left:2px;font-size:var(--fontSize16);font-weight:900;vertical-align:text-bottom;} .nhasset .infoSummary1 .tit > dl {position:relative;width:100%;} .nhasset .infoSummary1 .tit > dl > dt {position:absolute;opacity:0;} .nhasset .infoSummary1 .tit > dl > dd {font-size:var(--fontSize13);} .nhasset .infoSummary1 .tit .sub {display:block;margin-bottom:var(--space4);font-size:var(--fontSize14);font-weight:bold;} .nhasset .infoSummary1 .tit .btn {border-bottom:1px solid var(--point1);color:var(--point1);font-size:inherit;} .nhasset .infoSummary1 .tit .side {margin-left:auto;} .nhasset .infoSummary1 .info1 {margin-top:var(--space20);} .nhasset .infoSummary1 .info1 dl {display:flex;justify-content:space-between;font-weight:bold;font-size:var(--fontSize16);} .nhasset .infoSummary1 .info1 dl + dl {margin-top:var(--space10)} .nhasset .infoSummary1 .info1 dd {white-space:nowrap;} .nhasset .infoSummary1 .info2 {display:flex;margin-top:var(--space20);} .nhasset .infoSummary1 .info2 dl + dl {margin-left:var(--space20);} .nhasset .infoSummary1 .info2 dl > dt {margin-bottom:var(--space4);font-size:var(--fontSize13);color:var(--color5);} .nhasset .infoSummary1 .info2 dl > dd {font-size:var(--fontSize16);font-weight:bold;} .nhasset .infoSummary1 .info2 .filterSelect button {font-size:inherit} .nhasset .infoSummary1 .info3 {margin-top:var(--space20);} .nhasset .infoSummary1 .info3 dl > dt {font-size:var(--fontSize16);font-weight:900;word-break:keep-all;} .nhasset .infoSummary1 .info3 dl > dt strong {color:var(--point1);} .nhasset .infoSummary1 .info3 dl > dt em {color:var(--point5);} .nhasset .infoSummary1 .info3 dl > dd {font-size:var(--fontSize13);color:var(--color4);line-height:1.6;} .nhasset .infoSummary1 .info3 dl > dd.txt {margin-top:var(--space16);word-break:keep-all;} .nhasset .infoSummary1 .info3 dl > dd.txt > div + div {margin-top:var(--space6);} .nhasset .infoSummary1 .info3 dl > dd.data1 {display:flex;justify-content:space-between;align-items:center;margin-top:var(--space16);padding:var(--space20);background:var(--bg4);border-radius:10px;font-size:var(--fontSize14);font-weight:bold;} .nhasset .infoSummary1 .info3 dl > dd.data1 > strong {color:var(--color1);font-weight:900;flex-shrink:0;} .nhasset .infoSummary1 .info3 .c1 {color:var(--point1);} .nhasset .infoSummary1 .info3 .c2 {color:#d64b4e;} .nhasset .infoSummary1 .info3 .areaChart2 {margin-top:var(--space16);margin-bottom:0;} .nhasset .infoSummary1 .info3[data-swiper-type] > ul > li {width:100%;} .nhasset .infoSummary1 .info3[data-swiper-type].swiper-initialized {margin:0 calc(var(--space20-t1) - 4px) calc(var(--space24-t1) - 5px);padding:0 calc(var(--space20) + 4px);background:var(--bg1);} .nhasset .infoSummary1 .info3[data-swiper-type].swiper-initialized > ul {margin-bottom:36px;margin-left:4px;} .nhasset .infoSummary1 .info3[data-swiper-type].swiper-initialized:before {content:'';position:absolute;left:4px;right:4px;top:0;bottom:32px;background:#fff;border-radius:0 0 10px 10px;} .nhasset .infoSummary1 .info3[data-swiper-type].swiper-initialized:after {content:'';position:absolute;left:4px;right:4px;top:0;bottom:32px;z-index:2;border-radius:0 0 10px 10px;box-shadow:0 2px 5px rgba(41,58,88,0.16), 0px 0px 0px 10px var(--bg1);pointer-events:none;} .nhasset .infoSummary1 .info4 {position:relative;} .nhasset .infoSummary1 .info4 > dl {display:flex;justify-content:space-between;align-items:center;} .nhasset .infoSummary1 .info4 > dl > dt {font-size:var(--fontSize14);font-weight:bold;color:var(--color4);} .nhasset .infoSummary1 .info4 > dl + dl {margin-top:var(--space4);} .nhasset .infoSummary1 .info4 > p {margin-top:var(--space16);font-size:var(--fontSize13);color:var(--color4);line-height:1.6;word-break:keep-all;} .nhasset .infoSummary1 .info4 > p > strong {color:var(--point1);font-weight:900;} .nhasset .infoSummary1 .info4 .dataValue {font-size:var(--fontSize24);font-weight:900;} .nhasset .infoSummary1 .info4 .won {margin-left:2px;font-size:var(--fontSize16);font-weight:900;vertical-align:text-bottom;} .nhasset .infoSummary1 .tit + .info4 {margin:calc(var(--space24-t1) + var(--space12-t1)) var(--space20-t1) 0;padding:0 var(--space20);background:#fff;} .nhasset .infoSummary1 .tooltipWrap {margin-left:var(--space4);} .nhasset .infoSummary1 .tooltipCont {left:0;width:auto !important;} .nhasset .infoSummary1 .contBtn06.c1 {border-color:var(--point1);color:var(--point1);background:#fff;} .nhasset .infoSummary1.t1 {margin-top:var(--space16); --el-line-left:var(--space20-t1); --el-line-right:var(--space20-t1); } .nhasset .infoSummary1.t1 .info1 dl {font-size:var(--fontSize14)} .nhasset .infoSummary1.t1 .info1 dl > dt {color:var(--color4);} .nhasset .infoSummary1.t2 { --el-font-size:var(--fontSize16); --el-font-weight:400; --el-line-left:var(--space20-t1); --el-line-right:var(--space20-t1); --el-bg-position:0 0; } .nhasset .infoSummary1.t2 .tit {display:block;} .nhasset .infoSummary1.t2[class*="img"] .tit {z-index:2;} .nhasset .infoSummary1.t2[class*="img"] .tit:before {content:'';display:block;position:absolute;top:var(--space16-t1);right:0;z-index:-1;width:100px;height:100px;background:var(--bgImg2) var(--el-bg-position);background-size:var(--bgSize2);} .nhasset .infoSummary1.t2.img1 {--el-bg-position:-2px -418px;} .nhasset .infoSummary1.t2.img2 {--el-bg-position:-104px -418px;} .nhasset .infoSummary1.t2.img3 {--el-bg-position:-206px -418px;} /* [INFO] 요약정보 : 신용점수영역 */ .nhasset .infoSummary2 {display:flex;flex-wrap:wrap;padding:var(--space20) 0 0;margin-bottom:var(--space20);} .nhasset .infoSummary2 .tit h1, .nhasset .infoSummary2 .tit h2, .nhasset .infoSummary2 .tit h3, .nhasset .infoSummary2 .tit h4, .nhasset .infoSummary2 .tit h5, .nhasset .infoSummary2 .tit h6 {font-weight:400;color:var(--color2);} .nhasset .infoSummary2 .tit .con {font-weight:900;font-size:var(--fontSize18);} .nhasset .infoSummary2 .tit .con .dataValue {margin-right:var(--space6);font-family:'NotoNum';font-size:var(--fontSize38);line-height:1.2;} .nhasset .infoSummary2 .tit .con .dataValue + span {font-size:var(--fontSize18);} .nhasset .infoSummary2 .tit .sub {color:transparent;font-size:0;} .nhasset .infoSummary2 .tit .sub > span {font-size:var(--fontSize13);color:var(--color5);font-weight:bold;} .nhasset .infoSummary2 .tit .sub > span > strong {font-weight:900;} .nhasset .infoSummary2 .tit .sub > span:first-child {font-weight:900;color:#4780c3;} .nhasset .infoSummary2 .tit .sub > span + span:before {content:'';display:inline-block;margin:0 var(--space6);width:1px;height:12px;background-color:#ced3d9;vertical-align:middle;} .nhasset .infoSummary2 .tit[role="button"] .con:after {content:'';display:inline-block;width:16px;height:16px;background:var(--bgImg1) 0 0;background-size:var(--bgSize1);} .nhasset .infoSummary2 .tit[data-value] {display:flex;flex-direction:column;justify-content:center;margin:0 50% 0 0;padding:0 0 0 var(--space20);height:140px;} .nhasset .infoSummary2 .tit[data-value]:before {content:'';display:block;position:absolute;right:10px;z-index:-1;width:180px;height:140px;} .nhasset .infoSummary2 .tit[data-value^="male"]:before, .nhasset .infoSummary2 .tit[data-value^="female"]:before {background:var(--bgImg4);background-size:var(--bgSize4);} .nhasset .infoSummary2 .tit[data-value*="no"]:before {background-position-x:0;} .nhasset .infoSummary2 .tit[data-value*="up"]:before {background-position-x:-192px;} .nhasset .infoSummary2 .tit[data-value*="down"]:before {background-position-x:-384px;} .nhasset .infoSummary2 .tit[data-value^="male"]:before {background-position-y:0;} .nhasset .infoSummary2 .tit[data-value^="female"]:before {background-position-y:-144px;} .nhasset .infoSummary2 .info {align-self:center;margin-left:auto;} .nhasset .infoSummary2 .info > dl {display:flex;font-size:var(--fontSize13);line-height:1.6;} .nhasset .infoSummary2 .info > dl dt {font-weight:bold;color:#7e848e;} .nhasset .infoSummary2 .info > dl dd {margin-left:var(--space20);font-weight:900;} .nhasset .infoSummary2 .area1 {width:100%;margin-top:var(--space20);} .nhasset .infoSummary2 .area1.areaBanner4 {margin-top:0;} .nhasset .boxTypeWrap .infoSummary2 {margin:0 var(--space20-t1) var(--space24);padding:var(--space6) var(--space20) var(--space20);border-bottom:1px solid var(--line3);} /* [INFO] 정보데이터 : 신용내역 */ .nhasset .infoData1 > div {margin:var(--space20) 0;} .nhasset .infoData1 > div:last-child {margin-bottom:0;} .nhasset .infoData1 [class*="btns"] {display:block;} .nhasset .infoData1 dt {position:relative;font-size:var(--fontSize16);font-weight:900;} .nhasset .infoData1 dd {position:relative;padding:var(--space20) 0 0 40px;} .nhasset .infoData1 dd:before {content:'';position:absolute;top:calc(var(--space20) + var(--size8));left:var(--space12);width:2px;height:100%;background-image:repeating-radial-gradient(circle, #d4d4de 0px, #d4d4de 1px, transparent 1px, transparent 100%);background-size:2px 8px;} .nhasset .infoData1 dd:last-child:before {content:none;} .nhasset .infoData1 dd > a {display:block;margin-top:var(--space4);color:var(--color4);} .nhasset .infoData1 dd > a:after {content:'';display:inline-block;width:6px;height:10px;margin-left:var(--space8);background:url('../images/arr_right01.png') center/6px auto no-repeat;} .nhasset .infoData1 dl {margin:var(--space24) 0;} .nhasset .infoData1 .sub {font-size:var(--fontSize12);color:var(--color5);} .nhasset .infoData1 .sub:before {content:'';position:absolute;top:calc(var(--space20) + var(--size8));left:var(--space10);width:6px;height:6px;background-color:#d3d3dd;border-radius:50%;} .nhasset .infoData1 .tit {display:inline-block;margin-top:var(--space4);font-size:var(--fontSize16);font-weight:900;} .nhasset .infoData1 .tit ~ span {margin-left:var(--space4);font-size:var(--fontSize16);font-weight:900;color:var(--el-color); --el-color:#30b66d; --el-content:'UP'; --el-background-position:-32px -32px; } .nhasset .infoData1 .tit ~ span:before {content:'';position:absolute;top:calc(var(--space8) + var(--size8));left:0;width:30px;height:30px;background:var(--bgImg1);background-size:var(--bgSize1);background-position:var(--el-background-position);} .nhasset .infoData1 .tit ~ span:after {content:var(--el-content);margin-left:var(--space8);font-size:var(--fontSize12);} .nhasset .infoData1 .tit ~ span.down { --el-color:#f35f40; --el-content:'DOWN'; --el-background-position:-64px -32px; } .nhasset .infoData1 .data1, .nhasset .infoData1 .data2 {margin-top:var(--space4);font-size:var(--fontSize14);color:var(--color4);} .nhasset .infoData1 .data2 span:not(:empty):last-child:before {content:'→';display:inline-block;margin-right:var(--space4);} .nhasset .infoData1 .data2 span:not(:empty):last-child {color:var(--color1);} .nhasset .infoData1 .data2 span + span {margin-left:var(--space4);} .nhasset .infoData1 .data3 {position:relative;margin-top:var(--space12);padding:var(--space20);padding-right:calc(var(--space12) + 36px);word-break:keep-all;background-color:var(--bg4);border-radius:4px 24px 24px 24px;font-size:var(--fontSize13);color:var(--color2);} .nhasset .infoData1 .data3 .emoji {position:absolute;top:50%;transform:translateY(-50%);right:var(--space12);width:36px;height:36px;} .nhasset .infoData1 .data3 > a {display:block;margin-top:var(--space10);font-size:var(--fontSize14);font-weight:bold;color:var(--color4);} .nhasset .infoData1 .data3 > a:after {content:'';display:inline-block;width:6px;height:10px;margin-left:var(--space8);background:url('../images/arr_right01.png') center/6px auto no-repeat;} .nhasset .areaInfo2 + .infoData1 dl:first-child {margin-top:var(--space20-t1);} .nhasset .areaInfo2 + .infoData1 dl + dl, .nhasset .infoData1.t1 dl + dl {margin-top:var(--space24-t1)} .nhasset .areaInfo2 + .infoData1 dl dt, .nhasset .infoData1.t1 dl dt {position:absolute;clip-path:polygon(0 0, 0 0, 0 0);} .nhasset .areaInfo2 + .infoData1 dl dd:last-child:before, .nhasset .infoData1.t1 dl dd:last-child:before {content:'';} .nhasset .areaInfo2 + .infoData1 dl:last-of-type dd:last-child:before, .nhasset .infoData1.t1 dl:last-of-type dd:last-child:before {content:none;} /* [INFO] 정보데이터 : 지출내역 */ .nhasset .infoData2:not([data-toggle="wrap"]) {margin-top:32px;} .nhasset .infoData2 > dl + dl {margin-top:32px;} .nhasset .infoData2 > dl > dd {margin-top:var(--space16);} .nhasset .infoData2 label, .nhasset .infoData2 li {display:flex;flex-wrap:wrap;position:relative;padding:var(--boxPadding2);background-color:#fff;border-radius:10px;box-shadow:var(--boxShadow1);} .nhasset .infoData2 label + label, .nhasset .infoData2 li + li {margin-top:var(--space16);} .nhasset .infoData2 label {padding-left:calc(var(--space20) + 28px);} .nhasset .infoData2 label .tit:before {content:'';display:block;position:absolute;top:50%;left:var(--space20);transform:translateY(-50%);width:21px;height:21px;background:url('../images/common/sp_chkbox.png') 0 0 /63px 21px no-repeat;} .nhasset .infoData2 label > input:checked + .tit:before {background-position-x:-21px;} .nhasset .infoData2 label > input {position:absolute;left:0;top:0;width:100% !important;height:100% !important;background:none !important;} .nhasset .infoData2 .summary {position:relative;font-size:var(--fontSize12);color:var(--color4)} .nhasset .infoData2 .tit {overflow:hidden;flex:1;min-width:10px;font-weight:bold;color:var(--color1);white-space:nowrap;text-overflow:ellipsis;} .nhasset .infoData2 .data1 {margin-left:auto;padding-left:var(--space8);text-align:right;color:var(--color1);font-weight:900;} .nhasset .infoData2 .data2 {display:flex;margin-top:2px;width:100%;font-size:var(--fontSize12);color:var(--color5)} .nhasset .infoData2 .data2 > span {flex-shrink:0;} .nhasset .infoData2 .data2 > span + span {position:relative;overflow:hidden;flex:1;display:block;padding-left:calc(var(--space16) + 1px);white-space:nowrap;text-overflow:ellipsis;} .nhasset .infoData2 .data2 > span + span:before {content:'';display:block;position:absolute;top:50%;left:var(--space8);margin-top:var(--space4-t1);width:1px;height:10px;background-color:var(--line2);} .nhasset .infoData2 .data3 {margin-bottom:var(--space12);width:100%;font-size:var(--fontSize12);color:var(--color4)} .nhasset .infoData2[data-toggle="wrap"] > dl {padding:var(--boxPadding2);background-color:#fff;border-radius:10px;box-shadow:var(--boxShadow1);} .nhasset .infoData2[data-toggle="wrap"] > dl + dl {margin-top:var(--space16);} .nhasset .infoData2[data-toggle="wrap"] label, .nhasset .infoData2[data-toggle="wrap"] li {padding:0;background-color:transparent;border-radius:0;box-shadow:0 0 0 0;} .nhasset .infoData2[data-toggle="wrap"] li {padding:calc(var(--space20) + 1px) 0 var(--space20);} .nhasset .infoData2[data-toggle="wrap"] li + li {border-top:1px solid var(--line3);margin-top:0;} .nhasset .infoData2[data-toggle="wrap"] li:last-child {padding-bottom:0;} .nhasset .infoData2[data-toggle="wrap"] .summary {position:relative;font-size:var(--fontSize14);} .nhasset .infoData2[data-toggle="wrap"] .summary label {flex:1;display:block;max-width:100%;} .nhasset .infoData2[data-toggle="wrap"] .summary label .tit {display:flex;position:relative;padding-right:20px;padding-left:28px;} .nhasset .infoData2[data-toggle="wrap"] .summary label .tit:before {left:0;} .nhasset .infoData2[data-toggle="wrap"] .summary label .tit > span:first-child {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} .nhasset .infoData2[data-toggle="wrap"] .summary label .tit > span:not(:only-child):last-child {flex:1;margin-left:4px;color:var(--point1);} .nhasset .infoData2[data-toggle="wrap"] .summary label .data1 {display:block;margin-top:var(--space8)} .nhasset .infoData2[data-toggle="wrap"] .summary [data-toggle="btn"] {overflow:hidden;position:absolute;top:0;right:var(--space8-t1);width:26px;height:24px;color:transparent;} .nhasset .infoData2[data-toggle="wrap"] .summary [data-toggle="btn"]:after {content: '';display:block;position:absolute;top:50%;right:50%;margin:-5px;width:10px;height:10px;background:url('../images/arr_down02.png') no-repeat center;background-size:10px;} .nhasset .infoData2[data-toggle="wrap"] .active .summary [data-toggle="btn"]:after {background-image:url('../images/arr_up02.png');} .nhasset .infoData2[data-toggle="wrap"] .active .summary:after {content:'';display:block;position:absolute;left:var(--space20-t1);right:var(--space20-t1);bottom:-28px;height:1px;background:var(--line3);} .nhasset .infoData2[data-toggle="wrap"] [data-toggle="con"] {display:none;margin-top:28px;position:relative;} /* [INFO] 정보데이터 : 이체내역 */ .nhasset .infoData3 {position:relative;margin:var(--space16) var(--space4-t1) var(--space20);padding:var(--boxPadding1);} .nhasset .infoData3:after {content:'';display:block;position:absolute;z-index:2;top:4px;bottom:var(--space24);left:4px;right:4px;border-radius:10px;box-shadow:var(--boxShadow1), 0px 0px 0px 8px #f2f4f8;pointer-events:none;} .nhasset .infoData3:before {content:'';display:block;position:absolute;top:0;bottom:var(--space24);left:0;right:0;background-color:#fff;border-radius:10px;} .nhasset .infoData3 > ul > li {position:relative;width:100%;} .nhasset .infoData3 .dataInfo1 {margin-bottom:var(--space24);} .nhasset .infoData3 .detailList {margin-top:var(--space24);} .nhasset .infoData3 .detailList .tit, .nhasset .infoData3 .detailList .value {font-weight:bold;} .nhasset .infoData3 .detailList > li {margin-top:var(--space12);} .nhasset .infoData3[data-swiper-type="list1"] {padding-bottom:6px;} .nhasset .infoData3[data-swiper-type="list1"] > ul {margin-bottom:42px;} .nhasset .infoData3[data-swiper-type="list1"] .swiper-pagination {margin-bottom:-6px;} .nhasset .infoData3[data-swiper-type="list1"] .swiper-control {margin-top:0;} .nhasset .infoData3:not([data-swiper-type="list1"]) > ul > li {padding-bottom:var(--space20)} /* [INFO] 정보데이터 : 기관동의 */ .nhasset .infoData4 {--el-infoData4-size:clamp(68px, 6.8rem, 90px);} .nhasset .infoData4 ul > li {position:relative;border-top:1px solid var(--line3);margin-top:var(--space20);padding:var(--space20) 0 0 0;} .nhasset .infoData4 .dataInfo1 {position:relative;padding-left:40px;margin-bottom:var(--space6);} .nhasset .infoData4 .dataInfo1 .imgWrap {position:absolute;top:var(--space4-t1);left:0;} .nhasset .infoData4 .dataInfo1 strong {font-size:var(--fontSize14);font-weight:bold;} .nhasset .infoData4 .iconTxt2 {position:absolute;top:50%;right:0;margin-top:var(--space8-t1);width:var(--el-infoData4-size);justify-content:center} .nhasset .infoData4 .iconTxt2 ~ .info {padding-right:calc(var(--el-infoData4-size) + 10px)} .nhasset .infoData4 .info {margin-left:40px;} .nhasset .infoData4 .info > dl {display:flex;font-size:var(--fontSize12);color:var(--color5);line-height:1.5em;} .nhasset .infoData4 .info > dl > dt {width:calc(var(--el-infoData4-size) - 10px);flex-shrink:0;} .nhasset .infoData4 .info > dl > dd.data1 {overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3em;} .nhasset .infoData4 .btns {display:flex;margin-top:var(--space8);margin-left:40px;} .nhasset .infoData4 .btns > button, .nhasset .infoData4 .btns > a {margin-right:var(--space4);} .nhasset .infoData4.t1 {margin-bottom:var(--space20);padding-bottom:var(--space20);border-bottom:1px solid var(--line3);} .nhasset .infoData4.t1:first-child {margin-top:calc(var(--space20) + 15px);} .nhasset .boxTypeWrap .infoData4 ul > li:first-child {margin-top:0;} @media screen and (max-width:320px) { .nhasset .infoData4 .iconTxt2 {position:relative;margin-left:40px;margin-bottom:12px;} .nhasset .infoData4 .iconTxt2 ~ .dataInfo1 .imgWrap {top:48px;} .nhasset .infoData4 .info {padding:0 !important;margin-top:var(--space16);} .nhasset .infoData4 .btns {display:block;} .nhasset .infoData4 .btns > button, .nhasset .infoData4 .btns > a {margin:var(--space4) 0 0;width:100%;text-align:center;} } /* [INFO] 정보데이터 : 기관상세정보 */ .nhasset .listData5 dl, .nhasset .listData5 ul > li {border-top:1px solid var(--line3);} .nhasset .listData5 dl + dl, .nhasset .listData5 ul > li + li {margin-top:var(--space12);} .nhasset .listData5 .tit {display:flex;align-items:center;padding:var(--space12) 0;} .nhasset .listData5 .tit .sub {flex-shrink:0;margin-left:auto;padding-left:var(--space8);font-size:var(--fontSize12)} .nhasset .listData5 .con {padding:var(--space16) var(--space20);border-radius:4px;background:var(--bg2);font-size:var(--fontSize12);font-weight:700;color:var(--color4);} .nhasset .listData5 .date span + span::before {content:' : '} .nhasset .listData5 .dataInfo1 strong {font-size:var(--fontSize14);color:var(--color1);font-weight:400;} /* [LIST] 리스트 데이터 유형1 : 트렌드 */ .nhasset .listData1, .nhasset .listData1 ul > li {margin:var(--space20) 0;} .nhasset .listData1 ul > li {width:100%;min-height:162px;} .nhasset .listData1 ul > li > a,.nhasset .listData1 > a {display:block;padding:var(--space24) var(--space20);box-shadow:var(--boxShadow1);border-radius:10px;background-position:right;background-size:cover;background-repeat:no-repeat;} .nhasset .listData1 .tit {padding-right:50%;} /* [수정 260119] [MD2601_005] NH스마트뱅킹 마이데이터 앱접근성 대응 28번 배너 스타일 변경 */ .nhasset .listData1 .tit span {padding:2px 10px; display:inline-block;position:relative;margin-bottom:var(--space10);font-size:var(--fontSize12);color:#277ceb; background-color:#fff; border:1px solid #efefef; border-radius:20px} /* // [수정 260119] [MD2601_005] NH스마트뱅킹 마이데이터 앱접근성 대응 28번 배너 스타일 변경 */ .nhasset .listData1 .tit strong {display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;height:clamp(40px, 4rem, 60px);font-size:var(--fontSize14);font-weight:900;word-break:keep-all;word-wrap:break-word;} .nhasset .listData1 .new {display:none;} .nhasset .listData1 .new ~ .tit span:after {content:'NEW';display:flex;justify-content:flex-start;align-items:center;overflow:hidden;white-space:nowrap;letter-spacing:10px;position:absolute;top:50%;transform:translateY(-50%);right:-20px;width:15px;height:15px;padding-left:4px;border-radius:50%;font-size:9px;font-weight:900;background-color:#3674bc;color:#fff;} .nhasset .listData1 .tagWrap {margin-top:var(--space24);} /* [수정 260119] [MD2601_005] NH스마트뱅킹 마이데이터 앱접근성 대응 28번 배너 스타일 변경 */ .nhasset .listData1 .tagWrap .tag {padding:2px 6px; margin:0 var(--space6) 0 0;line-height:inherit;font-size:var(--fontSize12); background-color:#fff; border-radius:20px;} /* // [수정 260119] [MD2601_005] NH스마트뱅킹 마이데이터 앱접근성 대응 28번 배너 스타일 변경 */ .nhasset .listData1 .tagWrap .tag:before {content:'#';} .nhasset .listData1[data-swiper-type="list1"] {margin:0 var(--space6-t1);padding:var(--space6) var(--space8)} .nhasset .listData1[data-swiper-type="list1"] [class*="swiper-button"] {display:none;} /* [접근성_2024] */ /* [LIST] 데이터 유형2 : 또래비교 */ .nhasset .listData2 { --el-margin-top:47px; --el-padding:var(--space20) var(--space20) 0 var(--space20); --el-padding-left:calc(20px + var(--el-img-wid)); --el-img-wid:clamp(32px, 48px, 3.2rem); --el-bd-top:1px solid var(--line3); --el-background-color:var(--bg2); --el-highlight-color:none; --el-color:var(--color4); --el-value-dp:inline; --el-value-fs:var(--fontSize14); --el-value-fw:bold; --el-con-fw1:bold; --el-con-fw2:bold; } .nhasset .listData2 ul > li {position:relative;padding:var(--el-padding);padding-left:var(--el-padding-left);border-radius:10px;background-color:var(--el-background-color);} .nhasset .listData2 ul > li + li {margin-top:var(--el-margin-top);} .nhasset .listData2 ul > li + li:before {content:'';position:absolute;top:calc(var(--el-margin-top) * -1);left:0;display:block;width:100%;margin:calc(var(--el-margin-top) / 2) 0;border-top:var(--el-bd-top);} .nhasset .listData2 .img {position:absolute;top:14px;left:14px;width:var(--el-img-wid);} .nhasset .listData2 .tit, .nhasset .listData2 .con {display:var(--el-value-dp);font-weight:var(--el-con-fw1);} .nhasset .listData2 .con .dataValue,.nhasset .listData2 .con .won {font-weight:var(--el-con-fw2);} .nhasset .listData2 .value {color:var(--el-color);} .nhasset .listData2 .info {position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-left:calc(var(--el-padding-left) * -1);margin-right:-20px;background-color:#fff;} .nhasset .listData2 .info:before {content: '';width:100%;height:20px;margin-bottom:20px;border-radius:0 0 10px 10px;background-color:var(--el-background-color);} .nhasset .listData2 .info > dl:first-child dt {font-weight:900;} .nhasset .listData2 .info > dl:first-child dd {position:relative;width:fit-content;z-index:0;} .nhasset .listData2 .info > dl:first-child dd:before {content:"";display:inline-block;position:absolute;bottom:0;left:0;z-index:-1;width:100%;height:10px;background-color:var(--el-highlight-color);} .nhasset .listData2 .info > dl:first-child dd .dataValue, .nhasset .listData2 .info > dl:first-child dd .won{font-size:var(--el-value-fs);font-weight:var(--el-value-fw);} .nhasset .listData2 .info > dl:last-child {text-align:right;color:var(--color4);} .nhasset .listData2 .info > dl:last-child dt, .nhasset .listData2 .info > dl:last-child .dataValue, .nhasset .listData2 .info > dl:last-child .won {font-size:var(--fontSize12);} .nhasset .listData2 .case1 {--el-background-color:#fff8f7;--el-highlight-color:#f7e6e3;--el-color:var(--point5);--el-value-fs:var(--fontSize16);--el-value-fw:900;} .nhasset .listData2 .case2 {--el-background-color:#f5f8fd;--el-highlight-color:#d9e7ff;--el-color:#577fe0;--el-value-fs:var(--fontSize16);--el-value-fw:900;} .nhasset .listData2.t1 { --el-margin-top:var(--space10); --el-padding:var(--space24) var(--space20); --el-padding-left:clamp(108px, 162px, 10.8rem); --el-bd-top:none; --el-value-dp:block; --el-value-fw:900; --el-con-fw2:900; } .nhasset .listData2.t1 .img {top:calc(var(--space24) - 6px);left:calc(var(--el-padding-left) - 2px);} .nhasset .listData2.t1 .img + .tit {margin-left:var(--el-img-wid);} .nhasset .listData2.t1 [role="img"] {position:absolute;top:50%;left:var(--space20);transform:translateY(-50%);padding:10px 13px;border-radius:20px;font-size:var(--fontSize13);background-color:#fff;color:var(--el-color);} .nhasset .listData2.t1 [role="img"] > span:first-child {font-weight:900;} .nhasset .listData2.t1 [role="img"] > span + span:before {content:'';position:relative;top:-1px;display:inline-block;margin-right:6px;width:clamp(7px, 9px, 0.7rem);height:clamp(7px, 9px, 0.7rem);border-top:1px solid var(--el-color);border-right:1px solid var(--el-color);transform:rotate(45deg) skew(-5deg, -5deg);} .nhasset .listData2.t1 .value {color:inherit;} /* [LIST] 데이터 유형3 : 상세내역 */ .nhasset .listData3 {padding:var(--space12) var(--space20);background-color:#fff;border-radius:10px;box-shadow:var(--boxShadow1);} .nhasset .listData3 li {display:flex;justify-content:space-between;align-items:center;padding:var(--space12) 0;} .nhasset .listData3 li + li {border-top:1px solid var(--line3);} .nhasset .listData3 .side {margin-left:var(--space8);flex-shrink:0;text-align:right;font-size:var(--fontSize14);color:var(--color4);} .nhasset .listData3 .dataInfo1 strong {display:block;font-size:var(--fontSize14);font-weight:bold;} .nhasset .boxTypeWrap .listData3 {margin:0 var(--space20-t1) var(--space20-t1);border-radius:0;box-shadow:none;} /* [LIST] 데이터 유형4 : 기관목록 */ .nhasset .listData4 {margin:var(--space20) 0;} .nhasset .listData4 ul {display:flex;flex-wrap:wrap;margin:-5px;width:calc(100% + 10px);} .nhasset .listData4 ul > li {width:calc((100% /3) - 10px);position:relative;margin:5px;padding:27px 5px 18px 5px;background:#fff;border:1px solid var(--line3);border-radius:7px;text-align:center;} .nhasset .listData4 ul > li .imgWrap {display:block;margin-bottom:var(--space8);} .nhasset .listData4 ul > li .imgWrap > img {display:block;margin:0 auto;} .nhasset .listData4 ul > li .data {overflow:hidden;display:block;max-width:100%;font-weight:400;font-size:var(--fontSize12);text-overflow:ellipsis;white-space:nowrap;} /* [INFO] 컨텐츠영역 유형1 : 친구초대 */ .nhasset .infoCont1 {margin:var(--space20) 0;padding:var(--space24) var(--space20);border-radius:10px;background-color:#fff;box-shadow:var(--boxShadow1);color:var(--color0);} .nhasset .infoCont1 .mainTit {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:24px;font-size:var(--fontSize16);font-weight:900;text-align:left;} .nhasset .infoCont1 .mainTit .sub {font-size:var(--fontSize12);font-weight:400;color:var(--color5);} .nhasset .infoCont1 .detailList > li {margin-top:var(--space8);} /* [INFO] 컨텐츠영역 유형2 */ .nhasset .infoCont2 {position:relative;margin:var(--space20) 0;padding:var(--boxPadding1);border-radius:10px;background-color:#fff;box-shadow:var(--boxShadow1);color:var(--color1);} .nhasset .infoCont2 > div {margin:var(--space20) 0;} .nhasset .infoCont2 > div:last-child {margin-bottom:0;} .nhasset .infoCont2 .hide {position:absolute;font-size:2px;opacity:0;} .nhasset .infoCont2 .subTxt9 {margin:0 0 var(--space4);} .nhasset .infoCont2 .filterSelect {margin:0 4px 0 0;} .nhasset .infoCont2 .filterSelect button {margin:0 0 5px;font-size:inherit;} .nhasset .infoCont2 .filterSelect button > span + span:before {content:'';display:inline-block;margin:0 4px;width:2px;height:2px;background-color:var(--color1);vertical-align:middle;} .nhasset .infoCont2 .areaInfo1.t1 {margin:0 0 var(--space16);} .nhasset .infoCont2 .tooltipWrap {margin:0;} .nhasset .infoCont2 .tooltipWrap .tooltipCont {width:auto !important;right:var(--space16);} .nhasset .infoCont2 .tabContWrap {margin-top:var(--space12);} .nhasset .infoCont2 .tabContWrap .txt1:first-child {margin-top:0;} .nhasset .infoCont2 .scAreaWrap {margin:0;padding:0;} .nhasset .infoCont2 .areaChart1 {margin:var(--space20) 0} .nhasset .infoCont2 .areaChart2 {margin-top:24px;} .nhasset .infoCont2 .graphAddEx .ty01.betweenItem:not(:first-child) {margin-top:var(--space8);} .nhasset .infoCont2 .graphAddEx .ty01.betweenItem > li {display:flex;} .nhasset .infoCont2 .graphAddEx .ty01.betweenItem > li.value {white-space:nowrap;} .nhasset .infoCont2 .case0, .nhasset .infoCont2 .case0 strong {color:var(--color1) !important;font-weight:900;} .nhasset .infoCont2 .case1, .nhasset .infoCont2 .case1 strong {color:var(--point4) !important;font-weight:900;} .nhasset .infoCont2 .case2, .nhasset .infoCont2 .case2 strong {color:var(--point5) !important;font-weight:900;} .nhasset .infoCont2 .case3, .nhasset .infoCont2 .case3 strong {color:#577fe0 !important;} .nhasset .infoCont2 .tit {display:inline-block;margin-bottom:var(--space6);font-size:var(--fontSize12);font-weight:bold;word-break:keep-all;} .nhasset .infoCont2 .con {margin:0;font-size:var(--fontSize16);font-weight:900;word-break:keep-all;word-wrap:break-word;} .nhasset .infoCont2 .con strong, .nhasset .infoCont2 .con dd strong {color:var(--point1);} .nhasset .infoCont2 .con > p {display:inline;} .nhasset .infoCont2 .con > .sub {display:block;} .nhasset .infoCont2 .con2 {margin-top:var(--space10)} .nhasset .infoCont2 .con2 > p {display:inline-block;color:var(--color2);font-weight:bold;line-height:1.715;} .nhasset .infoCont2 .con2 > p > strong {color:var(--color1);font-weight:900;} .nhasset .infoCont2 .con3 {overflow:hidden;position:relative;margin:var(--space20) var(--space20-t1);padding:44px var(--space20) calc(var(--space24) + 4px);background-color:#f2f4f8;color:var(--color4)} .nhasset .infoCont2 .con3:before {content:'';display:block;position:absolute;z-index:1;top:0;left:0;right:0;border-radius:0 0 12px 12px;box-shadow:0px -5px 4px 7px rgba(60, 78, 110, 0.1);height:12px;background:#fff;} .nhasset .infoCont2 .con3:after {content:'';display:block;position:absolute;z-index:2;top:-35px;left:50%;margin-left:-32px;border-radius:50%;width:62px;height:62px;background:#fff var(--bgImg1) -82px 42px;background-size:var(--bgSize1);box-shadow:0 0 7px 2px rgba(60, 78, 110, 0.1);} .nhasset .infoCont2 .con3 > p:first-child:before {content:'';display:block;position:absolute;top:12px;right:50%;z-index:3;margin-right:19px;width:40px;height:20px;border-radius:0 10px 0 0;box-shadow:16px -12px 0 0 #fff;transform:skew(40deg, 0deg);} .nhasset .infoCont2 .con3 > p:first-child:after {content:'';display:block;position:absolute;top:12px;left:50%;z-index:3;margin-left:17px;width:40px;height:20px;border-radius:10px 0 0 0;box-shadow:-16px -12px 0 0 #fff;transform:skew(-40deg, 0deg);} .nhasset .infoCont2 .con3 > p:first-child {margin-bottom:var(--space4);font-size:var(--fontSize16);color:var(--color1);font-weight:bold;} .nhasset .infoCont2 .con3 > p:only-child > strong.block {font-weight:bold;} .nhasset .infoCont2 .con3 > p:only-child > strong.block [class*="case"] {font-weight:900;} .nhasset .infoCont2 .con3 > p:only-child > span {display:block;margin-top:var(--space8);font-size:var(--fontSize14);color:var(--color4);word-break:keep-all;font-weight:400;} .nhasset .infoCont2 .con3 strong:not([class]) {font-weight:inherit;color:var(--color1);} .nhasset .infoCont2 .con3 {margin-bottom:calc((var(--space24) + 4px) * -1) !important;border-radius:0 0 10px 10px;} .nhasset .infoCont2 .btns2 + .con3 {margin-top:var(--space24)} .nhasset .infoCont2 .con4 {margin:var(--space20) 0;padding:var(--space24) var(--space20);background-color:var(--bg2);border-radius:5px;color:var(--color4);font-size:var(--fontSize12);} .nhasset .infoCont2 .con4 strong {margin-bottom:var(--space10);font-size:var(--fontSize14);color:var(--color1);} .nhasset .infoCont2 .con4 span {word-break:keep-all;} .nhasset .infoCont2 .con4:last-child {margin-bottom:0;} .nhasset .infoCont2 .txt1 {margin:var(--space16) 0 var(--space20);font-size:var(--fontSize13);color:var(--color2);} .nhasset .infoCont2 .txt2 {position:relative;margin:var(--space20) 0 0;padding-left:var(--space10);font-size:var(--fontSize12);color:var(--color4);} .nhasset .infoCont2 .txt2:before {content:'';display:block;position:absolute;top:var(--size8);left:0;width:3px;height:3px;border-radius:2px;background-color:var(--color4);} .nhasset .infoCont2 .txt3 {position:relative;margin-top:var(--space24-t1);padding:var(--space24) var(--space20);background-color:#fff;border-radius:5px;box-shadow:0 0 8px 0 rgba(41, 58, 88, 0.1);} .nhasset .infoCont2 .txt3:before {content:'';display:block;position:absolute;top:-4px;right:var(--space20);width:8px;height:8px;background:#fff;box-shadow:4px -4px 4px 0 rgba(41, 58, 88, 0.06);transform:rotate(-45deg);} .nhasset .infoCont2 .txt3 p > strong {font-size:var(--fontSize13);font-weight:bold;} .nhasset .infoCont2 .txt3 p > strong [class*="case"] {font-weight:900;} .nhasset .infoCont2 .txt3 p > span:not([class]) {display:block;margin-top:var(--space8);font-size:var(--fontSize12);color:var(--color4);} .nhasset .infoCont2 .info1 > p, .nhasset .infoCont2 .info1 > dl {padding:var(--space24) var(--space20);border-radius:6px;background-color:var(--bg4);} .nhasset .infoCont2 .info1 > p {font-size:var(--fontSize14);font-weight:900;} .nhasset .infoCont2 .info1 > p > .sub, .nhasset .infoCont2 .info1 > dl > dt {display:block;margin-bottom:var(--space4);font-size:var(--fontSize13);color:var(--color4);font-weight:400;} .nhasset .infoCont2 .info1 > dl > dd {font-size:var(--fontSize14);font-weight:900;} .nhasset .infoCont2 .info1 > dl + dl, .nhasset .infoCont2 .info1 > p + p, .nhasset .infoCont2 .info1 > dl + p, .nhasset .infoCont2 .info1 > p + dl {margin-top:var(--space20);} .nhasset .infoCont2 .info1 > dl.img1 > dd {position:relative;padding-left:var(--space20);} .nhasset .infoCont2 .info1 > dl.img1 > dd:before {content:'';display:block;position:absolute;top:2px;left:0;width:16px;height:16px;background:var(--bgImg1) -64px -16px;background-size:var(--bgSize1);} .nhasset .infoCont2 .info2 {margin-top:32px;} .nhasset .infoCont2 .info2 > dl {display:flex;flex-wrap:wrap;justify-content:space-between;font-size:var(--fontSize13);} .nhasset .infoCont2 .info2 > dl > dt {color:var(--color4);font-weight:bold;} .nhasset .infoCont2 .info2 > dl > dt > span {display:block;margin-top:2px;font-size:var(--fontSize12);font-weight:400;color:var(--color5);} .nhasset .infoCont2 .info2 > dl > dt > span > strong {color:var(--color4);font-weight:bold;} .nhasset .infoCont2 .info2 > dl > dd {font-weight:900;} .nhasset .infoCont2 .info2 > dl > dd + dd, .nhasset .infoCont2 .info2 > dl .areaChart1 {width:100%;margin-top:var(--space6);margin-bottom:0;} .nhasset .infoCont2 .info2 > dl + dl {margin-top:var(--space24);} .nhasset .infoCont2 .info2 .areaChart2 {margin-bottom:0;margin-top:var(--space8);} .nhasset .infoCont2 .tit + .info2 {margin-top:var(--space12);} .nhasset .infoCont2 .info3 {padding:var(--space24) var(--space20);background:var(--bg2);border-radius:5px;font-size:var(--fontSize13);} .nhasset .infoCont2 .info3 > dl {display:flex;flex-wrap:wrap;justify-content:space-between;} .nhasset .infoCont2 .info3 > dl > dt {color:var(--color4);} .nhasset .infoCont2 .info3 > dl > dt > span {display:block;margin-top:var(--space4);font-size:var(--fontSize12);color:var(--color5);} .nhasset .infoCont2 .info3 > dl > dd:nth-child(2):not(:last-child) {color:var(--color2);} .nhasset .infoCont2 .info3 > dl > dd:nth-child(3) {font-weight:900;} .nhasset .infoCont2 .info3 > dl + dl {margin-top:var(--space12)} .nhasset .infoCont2 .mes {display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;top:0;left:0;z-index:10;margin:0;width:100%;height:100%;background-color:rgba(225,225,225,0.05);text-align:center;} .nhasset .infoCont2 .mes .btns1 {margin-top:var(--space20);} .nhasset .infoCont2 .mes ~ h1, .nhasset .infoCont2 .mes ~ h2, .nhasset .infoCont2 .mes ~ h3, .nhasset .infoCont2 .mes ~ h4, .nhasset .infoCont2 .mes ~ h5, .nhasset .infoCont2 .mes ~ h6, .nhasset .infoCont2 .mes ~ div, .nhasset .infoCont2 .mes ~ dl, .nhasset .infoCont2 .mes ~ p {-webkit-filter:blur(4px);filter:blur(4px);opacity:0.5;} .nhasset .infoCont2 .emoji {margin-top:calc((var(--size1) + 3px) * -1);margin-bottom:calc((var(--size1) + 3px) * -1);margin-right:calc((var(--size24) + 8px)*-1);width:calc(var(--size24) + 8px);height:calc(var(--size24) + 8px);vertical-align:top;} .nhasset .infoCont2 .area {margin-top:var(--space16);padding-top:28px;border-top:1px dashed var(--line2)} .nhasset .infoCont2 .tit + .area, .nhasset .infoCont2 .con[style*="none"] + .area {margin-top:0;padding-top:0;border-top:none;} .nhasset .infoCont2 [class*="btns"] {display:block;} .nhasset .infoCont2 [class*="btns"] > .linkTxt {margin-top:0;} .nhasset .infoCont2 .btns2 {text-align:right;} .nhasset .infoCont2.t1 .con {font-size:var(--fontSize20);} .nhasset .infoCont2.t1 .con:not([style*="display: none"]):not([style*="display:none"]) + .con {margin-top:var(--space12);font-size:var(--fontSize14);font-weight:bold;} .nhasset .infoCont2.t1 .con + .con strong {font-weight:bold;} .nhasset .infoCont2.t1 .emoji {margin-top:0;} .nhasset .infoCont2.t2 .tit {margin-bottom:var(--space16);font-size:var(--fontSize20);font-weight:900;} .nhasset .infoCont2.t2 .con {font-weight:bold;line-height:1.75;} .nhasset .infoCont2.t2 .con .emoji {margin:0;} .nhasset .infoCont2.t2 .con strong {font-weight:inherit;} .nhasset .infoCont2.t3 .tit {margin-bottom:0;font-size:var(--fontSize16);font-weight:900;} .nhasset .infoCont2.t4 .tit {margin-bottom:0;} .nhasset .infoCont2.t4 .tit, .nhasset .infoCont2.t4 .con {font-size:var(--fontSize20);font-weight:900;} .nhasset .infoCont2.t4 .emoji {margin-top:0;margin-bottom:-8px;} .nhasset .infoCont2.t4 .con + .con {margin-top:var(--space6);font-size:var(--fontSize14);font-weight:400;} .nhasset .infoCont2.t4 .con + .con strong, .nhasset .infoCont2.t4 .con + .con .case0 {font-weight:900;} .nhasset .infoCont2[class*="img"] .con {margin-right:100px;} .nhasset .infoCont2[class*="img"]:after {content:'';display:block;position:absolute;bottom:var(--space20);right:var(--space20);width:80px;height:80px;background:var(--bgImg3);background-size:var(--bgSize3);} .nhasset .infoCont2.img1:after{background-position:-412px -166px;} .nhasset .listCont1[data-mode="scroll"] + .infoCont2, .nhasset .listCont1[data-swiper-type="list1"] + .infoCont2 {margin-top:0;} /* [INFO] 컨텐츠영역 유형3 : 서비스안내 */ .nhasset .infoCont3 {position:relative;margin:var(--space20) 0;padding:60px var(--space20);border-radius:10px;background-color:#fff;box-shadow:var(--boxShadow1);color:var(--color1);text-align:center;} .nhasset .infoCont3 li + li {margin-top:40px;} .nhasset .infoCont3 .tit {display:block;font-size:var(--fontSize20);font-weight:900;color:var(--color1);word-break:keep-all;} .nhasset .infoCont3 .con {display:block;margin:var(--space16) auto;width:95%;font-size:var(--fontSize14);color:var(--color4);word-break:keep-all;} .nhasset .infoCont3 .img {position:relative;margin:var(--space24) var(--space20-t1) 0;} /* [INFO] 컨텐츠영역 유형4 : 기대수익률 TIP */ .nhasset .infoCont4 {margin:var(--space24) 0;padding:var(--boxPadding3);background-color:var(--bg4);border-radius:10px;} .nhasset .infoCont4 dt {position:relative;margin-bottom:var(--space16);font-weight:bold;} .nhasset .infoCont4 dt:after {content:'';position:absolute;top:50%;margin-left:var(--space4-t1);width:32px;height:32px;background:var(--bgImg1);background-size:var(--bgSize1);background-position:var(--el-background-position);--el-background-position:-96px -32px;transform:translateY(-50%);} .nhasset .infoCont4 dd {position:relative;padding-left:var(--space20);margin-top:var(--space4);word-break:keep-all;color:var(--color2);} .nhasset .infoCont4 dd strong {font-weight:900;color:var(--color1);} .nhasset .infoCont4 dd:before {content:'';position:absolute;top:var(--size4);left:0;width:16px;height:16px;background:var(--bgImg1);background-size:var(--bgSize1);background-position:var(--el-background-position);--el-background-position:-176px 0;} .nhasset .infoCont4 dd:last-child:nth-child(2) {padding-left:0;} .nhasset .infoCont4 dd:last-child:nth-child(2):before {display:none;} .nhasset .infoCont4 .btns {display:block;margin-top:var(--space16);text-align:right;} /* [INFO] 진행상항 */ .nhasset .infoStep1 {margin-bottom:var(--space4-t1)} .nhasset .infoStep1 ol {position:relative;counter-reset:step1;margin:0 var(--space16-t1);padding:var(--space20) var(--space16) 0;} .nhasset .infoStep1 ol > li {display:flex;justify-content:space-between;align-items:center;font-size:var(--fontSize13);font-weight:bold;} .nhasset .infoStep1 ol > li > i {order:1;margin-right:clamp(15px, 1.5rem, 21px);font-size:var(--fontSize13);font-weight:900;color:var(--color1);font-family:'NotoNum' !important;} .nhasset .infoStep1 ol > li > i:after {content:'/' counter(step1);counter-increment:step1;font-size:0;color:transparent;} .nhasset .infoStep1 ol > li:last-child > i:after {display:flex;align-items:center;position:absolute;right:16px;top:var(--space20);height:calc(100% - var(--space20));font-size:var(--fontSize13);color:#bfbfbf;font-weight:400;line-height:22px;} /* [MD2408_062] */ .nhasset .infoStep1 ol > li:not([aria-current="step"]) > span {display:none;} .nhasset .infoStep1 ol > li:not([aria-current="step"]) > i {display:block;font-size:0;color:transparent;} .nhasset .infoStep1 ol > li[aria-current="step"]:before {content:'';display:block;position:fixed;top:51px;left:0;width:calc(var(--el-wid) * var(--li-num));height:3px;border-radius:5px;background:linear-gradient(90deg, #30b66d 0%, #4ad188 100%);z-index:1;} .nhasset .infoStep1 ol > li[aria-current="step"] > i:before {content:'STEP ';} .nhasset .infoStep1 ol > li:nth-last-child(3):first-child, .infoStep1 ol > li:nth-last-child(3):first-child ~ li {--el-wid:calc(100%/3);} .nhasset .infoStep1 ol > li:nth-last-child(4):first-child, .infoStep1 ol > li:nth-last-child(4):first-child ~ li {--el-wid:calc(100%/4);} .nhasset .infoStep1 ol > li:nth-last-child(5):first-child, .infoStep1 ol > li:nth-last-child(5):first-child ~ li {--el-wid:calc(100%/5);} /* [LIST] 컨텐츠 유형1 : 조기은퇴 TIP */ .nhasset .listCont1 {margin:var(--space20) 0;} .nhasset .listCont1 dl, .nhasset .listCont1 ul > li {overflow:hidden;width:100%;padding:var(--boxPadding1);border-radius:10px;background-color:#fff;box-shadow:var(--boxShadow1);} .nhasset .listCont1 dl {--el-background-img:rgba(0,41,255,0.22)} .nhasset .listCont1 dl + dl, .nhasset .listCont1 ul > li + li {margin-top:var(--space20);} .nhasset .listCont1 .tit {display:block;position:relative;z-index:1;margin-bottom:var(--space24);min-height:calc(228px - (var(--space24) + 4px));font-size:var(--fontSize20);font-weight:bold;line-height:1.4;} .nhasset .listCont1 .tit:before {content:'';display:block;position:absolute;top:calc(var(--space24-t1) - 4px);left:var(--space20-t1);right:var(--space20-t1);bottom:0;z-index:-1;background-color:var(--el-background);} .nhasset .listCont1 .tit:after {content:'';display:block;position:absolute;bottom:0;right:0;width:140px;height:140px;background:var(--el-background-img) no-repeat 0 0;background-size:100% auto;} .nhasset .listCont1 .con {display:block;font-size:var(--fontSize14);word-break:keep-all;} .nhasset .listCont1[data-swiper-type="list1"] {margin:14px var(--space16-t1);padding:var(--space6) 26px;} .nhasset .listCont1[data-swiper-type="list1"] > ul {height:auto;} .nhasset .listCont1[data-swiper-type="list1"] > ul > li:first-child {margin-left:-10px;} .nhasset .listCont1[data-swiper-type="list1"] > ul > li:last-child {margin-right:-10px;} .nhasset .listCont1[data-swiper-type="list1"] > ul > li > div {display:flex;flex-direction:column;flex-grow:1;} /* [접근성_2024] */ .nhasset .listCont1[data-swiper-type="list1"] .swiper-pagination, .nhasset .listCont1[data-swiper-type="list1"] .swiper-button-disabled {display:none;} .nhasset .listCont1[data-swiper-type="list1"] .swiper-button-prev, .nhasset .listCont1[data-swiper-type="list1"] .swiper-button-next {margin:0;width:16px !important;height:calc(100% - 12px) !important;top:6px !important;left:0;border-radius:0 10px 10px 0;} .nhasset .listCont1[data-swiper-type="list1"] .swiper-button-next {left:auto;right:0;border-radius:10px 0 0 10px;} .nhasset .listCont1[data-swiper-type="list1"] .swiper-button-prev.end, .nhasset .listCont1[data-swiper-type="list1"] .swiper-button-prev.swiper-button-disabled ~ .swiper-button-next {width:24px !important;} /* 관리자 설정 BG */ .nhasset .listCont1 .bg1 {--el-background:#fff;} .nhasset .listCont1 .bg2 {--el-background:#d5f2f5;} .nhasset .listCont1 .bg3 {--el-background:#d6f1ea;} .nhasset .listCont1 .bg4 {--el-background:#edfad4;} .nhasset .listCont1 .bg5 {--el-background:#f8f6da;} .nhasset .listCont1 .bg6 {--el-background:#ffefef;} .nhasset .listCont1 .bg7 {--el-background:#dee5fe;} /* 고정이미지 */ .nhasset .listCont1 li.img1 {--el-background-img:url('../images/earlyretire/img_tip_bg01.png') !important} /* 랜덤이미지설정 */ .nhasset .listCont1.t0 li:nth-child(5n-4) {--el-background-img:url('../images/earlyretire/img_tip_bg06.png')} .nhasset .listCont1.t0 li:nth-child(5n-3) {--el-background-img:url('../images/earlyretire/img_tip_bg02.png')} .nhasset .listCont1.t0 li:nth-child(5n-2) {--el-background-img:url('../images/earlyretire/img_tip_bg03.png')} .nhasset .listCont1.t0 li:nth-child(5n-1) {--el-background-img:url('../images/earlyretire/img_tip_bg04.png')} .nhasset .listCont1.t0 li:nth-child(5n) {--el-background-img:url('../images/earlyretire/img_tip_bg05.png')} .nhasset .listCont1.t1 li:nth-child(5n-4) {--el-background-img:url('../images/earlyretire/img_tip_bg05.png')} .nhasset .listCont1.t1 li:nth-child(5n-3) {--el-background-img:url('../images/earlyretire/img_tip_bg04.png')} .nhasset .listCont1.t1 li:nth-child(5n-2) {--el-background-img:url('../images/earlyretire/img_tip_bg03.png')} .nhasset .listCont1.t1 li:nth-child(5n-1) {--el-background-img:url('../images/earlyretire/img_tip_bg02.png')} .nhasset .listCont1.t1 li:nth-child(5n) {--el-background-img:url('../images/earlyretire/img_tip_bg06.png')} /* [LIST] 컨텐츠 유형2 : 신용점수올리기 */ .nhasset .listCont2 {margin:var(--space12) 0 0;} .nhasset .listCont2 li {position:relative;padding-left:var(--space10);color:var(--color4)} .nhasset .listCont2 li strong {color:var(--color1);font-weight:bold;} .nhasset .listCont2 li + li {margin-top:var(--space10);} .nhasset .listCont2 li:before {content:'';position:absolute;top:calc(3px + var(--size6));left:0;width:2px;height:2px;border-radius:50%;background-color:var(--color4);} /* [TOGGLE] 토글컨텐츠 유형1 : 자산사용관리 */ .nhasset .areaToggle1 {position:relative;} .nhasset .areaToggle1 .summary {display:flex;align-items:center;margin-left:var(--space20);} .nhasset .areaToggle1 .detailList, .nhasset .areaToggle1 .detailList > li {padding:0 !important;margin-left:0 !important;margin-right:0 !important;} .nhasset .areaToggle1 [data-toggle="btn"] {overflow:hidden;position:relative;display:flex;margin-left:auto;margin-right:14px;width:20px;height:20px;color:transparent;} .nhasset .areaToggle1 [data-toggle="btn"]:before {content:'';display:block;position:absolute;top:50%;left:50%;margin:-10px;width:20px;height:20px;background:url('../images/arr_down02.png') no-repeat center;background-size:10px} .nhasset .areaToggle1 [data-toggle="con"] {overflow:hidden;display:none;position:relative;z-index:1;padding:0 var(--space20);background-color:#F5F8F7;border-top:1px solid #DEDEDE;border-bottom:1px solid #DEDEDE;} .nhasset .areaToggle1 [data-toggle="con"]:before, .nhasset .areaToggle1 [data-toggle="con"]:after {content:'';display:block;height:var(--space24);} .nhasset .areaToggle1.active [data-toggle="btn"]:before, .nhasset .areaToggle1 .active [data-toggle="btn"]:before {background-image: url('../images/arr_up02.png');} /* [TOGGLE] 토글컨텐츠 유형2 : 조기은퇴진단 */ .nhasset .areaToggle2 {margin-top:var(--space24)} .nhasset .areaToggle2 > ul > li, .nhasset .areaToggle2 > dl, .nhasset .areaToggle2 > section {overflow:hidden;background-color:#fff;border-radius:8px;border:1px solid var(--line3);} .nhasset .areaToggle2 > ul > li + li {margin-top:var(--space20);} .nhasset .areaToggle2 .summary {position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;padding:calc(var(--space16) - 3px) calc(var(--space20) + 18px) calc(var(--space16) - 3px) var(--space20);font-size:var(--fontSize14);font-weight:bold;} .nhasset .areaToggle2 .summary .side {margin-left:auto;} .nhasset .areaToggle2 .summary .iconTxt2:not(:first-child) {margin-left:var(--size8);} .nhasset .areaToggle2 .summary .dataValue {font-weight:bold;} .nhasset .areaToggle2 .detailList li {font-size:var(--fontSize13);} .nhasset .areaToggle2 .detailList li:not(:first-child) {margin-top:var(--space12)} .nhasset .areaToggle2 [data-toggle="btn"][role="button"] {cursor:pointer;} .nhasset .areaToggle2 [data-toggle="btn"]:before {content:'';display:block;position:absolute;top:50%;right:var(--space20);margin:-5px 0;width:10px;height:10px;background:url('../images/arr_down02.png') no-repeat center;background-size:10px} .nhasset .areaToggle2 [data-toggle="con"] {overflow:hidden;display:none;padding:var(--space16) var(--space20);border-top:1px solid var(--line3);} .nhasset .areaToggle2 button[data-toggle="btn"] {overflow:hidden;position:absolute;top:50%;right:var(--space12);margin-top:-18px;width:36px;height:36px;color:transparent;} .nhasset .areaToggle2 button[data-toggle="btn"]:before {right:50%;margin-left:-5px;margin-right:-5px;} .nhasset .areaToggle2 .active [data-toggle="btn"]:before, .nhasset .areaToggle2.active [data-toggle="btn"]:before {background-image:url('../images/arr_up02.png');} /* [TOGGLE] 토글컨텐츠 유형3 : 기관정보 */ .nhasset .areaToggle3 .summary {position:relative;margin-bottom:-1px;padding:var(--space20);border:1px solid var(--line3);background-color:var(--bg2);font-weight:bold;} .nhasset .areaToggle3 .summary strong {font-weight:inherit;} .nhasset .areaToggle3 .summary.info > dl {display:flex;} .nhasset .areaToggle3 .summary.info > dl + dl {margin-top:var(--space4);} .nhasset .areaToggle3 .summary.info > dl > dd {font-weight:400;} .nhasset .areaToggle3 .summary.info > dl > dd:before {content:' : '} .nhasset .areaToggle3 [data-toggle="btn"][role="button"] {cursor:pointer;} .nhasset .areaToggle3 [data-toggle="btn"]:before {content:'';display:block;position:absolute;top:50%;right:var(--space20);margin:-5px 0;width:10px;height:10px;background:url('../images/arr_down02.png') no-repeat center;background-size:10px} .nhasset .areaToggle3 [data-toggle="con"] {overflow:hidden;display:none;margin-bottom:-1px;padding:var(--space16) var(--space20);border:1px solid var(--line3);background:#fff;} .nhasset .areaToggle3 .active [data-toggle="btn"]:before, .nhasset .areaToggle3.active [data-toggle="btn"]:before {background-image:url('../images/arr_up02.png');} .nhasset .areaToggle3 > .summary, .nhasset .areaToggle3 li:first-child .summary, .nhasset .areaToggle3 dl:first-child .summary {border-top-left-radius:10px;border-top-right-radius:10px;} .nhasset .areaToggle3:not(.active) > .summary, .nhasset .areaToggle3 li:not(.active):last-child .summary, .nhasset .areaToggle3 dl:not(.active):last-child .summary, .nhasset .areaToggle3.active > [data-toggle="con"], .nhasset .areaToggle3 li.active:last-child [data-toggle="con"], .nhasset .areaToggle3 dl.active:last-child [data-toggle="con"] {border-bottom-left-radius:10px;border-bottom-right-radius:10px;} .nhasset .areaToggle3 .active th {background-color:var(--bg2) !important;color:var(--color1) !important;} /* [TOGGLE] 토글컨텐츠 유형4 : 더보기 */ .nhasset .areaToggle4 [data-toggle="con"] {overflow:hidden;display:block;line-height:var(--fontSize24);max-height:100%;} .nhasset .areaToggle4 [data-toggle="btn"] {display:none;position:relative;margin:0 0 var(--space8-t1) auto;padding:var(--space8) var(--space16);color:var(--color4);font-size:var(--fontSize14);font-weight:400;} .nhasset .areaToggle4 [data-toggle="btn"]:before {content:'';display:block;position:absolute;top:50%;right:0;margin:-4px 0;width:10px;height:10px;background:url('../images/arr_down02.png') no-repeat center;background-size:10px} .nhasset .areaToggle4.hide:not(.active) [data-toggle="con"] {display:-webkit-box !important;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:calc(var(--fontSize24) * 2);} .nhasset .areaToggle4.hide [data-toggle="btn"] {display:block;} .nhasset .areaToggle4.active [data-toggle="btn"]:before {background-image:url('../images/arr_up02.png');} /* [BANNER] 배너 유형1 : 카드리포트 서브메인 */ .nhasset .areaBanner1 {margin:var(--space20) 0;} .nhasset .areaBanner1 > ul > li, .nhasset .areaBanner1 > dl {display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;min-height:clamp(366px, 549px, 36.6rem);padding:var(--space24) var(--space20);border-radius:10px;box-shadow:0 2px 5px 0 rgba(41, 58, 88, 0.16);} .nhasset .areaBanner1 > ul > li + li {margin-top:var(--space20);} .nhasset .areaBanner1 .tit {flex-grow:1;margin:0 0 var(--space20);font-size:var(--fontSize20);font-weight:900;} .nhasset .areaBanner1 .tit > span {display:block;word-break:keep-all;} .nhasset .areaBanner1 .tit > span:nth-last-of-type(2), .nhasset .areaBanner1 .tit > .emoji {display:inline-block;} .nhasset .areaBanner1 .tit strong {position:relative;display:inline-block;z-index:0;} .nhasset .areaBanner1 .tit strong:after {content:"";display:inline-block;position:absolute;bottom:1px;left:0;z-index:-1;width:100%;height:10px;background-color:#fff;} .nhasset .areaBanner1 .img {position:absolute;top:0;left:0;width:100%;height:100%;background-color:#d3d3dd;z-index:-1;} .nhasset .areaBanner1 .img img {object-fit:cover;width:100%;height:100%;} .nhasset .areaBanner1 [class^="con"] {font-size:var(--fontSize14);font-weight:900;line-height:1.643;} .nhasset .areaBanner1 .con1 > span {display:inline-block;} .nhasset .areaBanner1 .c1 .tit, .nhasset .areaBanner1 .c1 [class^="con"] {color:#fff;} .nhasset .areaBanner1[data-swiper-type="list1"] {margin:14px var(--space16-t1);padding:var(--space6) 26px;} .nhasset .areaBanner1[data-swiper-type="list1"] > ul > li:first-child {margin-left:-10px;} .nhasset .areaBanner1[data-swiper-type="list1"] > ul > li:last-child {margin-right:-10px;} .nhasset .areaBanner1[data-swiper-type="list1"] > ul > li > div:only-child {display:flex;flex-direction:column;flex-grow:1;} /* [접근성_2024] */ .nhasset .areaBanner1[data-swiper-type="list1"] .swiper-pagination, .nhasset .areaBanner1[data-swiper-type="list1"] .swiper-button-disabled {display:none;} .nhasset .areaBanner1[data-swiper-type="list1"] .swiper-button-prev, .nhasset .areaBanner1[data-swiper-type="list1"] .swiper-button-next {margin:0;width:16px !important;height:calc(100% - 12px) !important;top:6px !important;left:0;border-radius:0 10px 10px 0;} .nhasset .areaBanner1[data-swiper-type="list1"] .swiper-button-next {left:auto;right:0;border-radius:10px 0 0 10px;} .nhasset .areaBanner1[data-swiper-type="list1"] .swiper-button-prev.end, .nhasset .areaBanner1[data-swiper-type="list1"] .swiper-button-prev.swiper-button-disabled ~ .swiper-button-next {width:24px !important;} .nhasset .areaBanner2:not([style*="none"]) + .areaBanner1[data-swiper-type="list1"] {margin-top:-6px;} /* [BANNER] 배너 유형2 */ .nhasset .areaBanner2 a {overflow:hidden;display:block;position:relative;margin:var(--space20) 0;padding:var(--space20) 104px var(--space20) var(--space20);background-color:var(--el-bgcolor);border-radius:10px;box-shadow:var(--boxShadow1);color:var(--color1);} .nhasset .areaBanner2 a:after {content:'';display:block;position:absolute;top:50%;right:var(--space12);margin:-40px 0 0;width:80px;height:80px;background:var(--bgImg3);background-position:var(--el-bg-position);background-size:var(--bgSize3);} .nhasset .areaBanner2 a > span {display:block;word-break:keep-all;} .nhasset .areaBanner2 a > span:first-child {font-size:var(--fontSize14);font-weight:900;} .nhasset .areaBanner2 a > span:last-child {margin-top:1px;font-size:var(--fontSize12);} .nhasset .areaBanner2 a > span > strong {color:var(--point1);} .nhasset .areaBanner2 a .data1 {display:inline-block;} .nhasset .areaBanner2.t1 a {padding-top:var(--space16);padding-bottom:var(--space16);border-radius:6px;} .nhasset .areaBanner2.t1 a:after {right:var(--space10);} .nhasset .areaBanner2.t1 a > span:first-child {font-size:var(--fontSize13);font-weight:400;color:var(--color4)} .nhasset .areaBanner2.t1 a > span:last-child {margin-top:var(--space6);font-size:var(--fontSize14);font-weight:bold;} .nhasset .areaBanner2.t1 a > span:last-child:after {content:'';display:inline-block;margin-left:var(--space4);width:6px;height:10px;background:url('../images/arr_right02.png') no-repeat 0 0;background-size:100% auto;} .nhasset .areaBanner2.t3 a {padding-top:var(--space18);padding-bottom:var(--space20);padding-right:95px;} .nhasset .areaBanner2.t3 a:after {right:15px;} .nhasset .areaBanner2.t3 a > span:first-child {font-size:var(--fontSize16);font-weight:bold;} .nhasset .areaBanner2.t3 a > span:last-child {margin-top:var(--space12);font-size:var(--fontSize14);color:var(--color4);} .nhasset .areaBanner2.t3 a > span:last-child:after {content:'';display:inline-block;margin-left:var(--space4);margin-right:-6px;width:6px;height:10px;background:url('../images/arr_right01.png') no-repeat 0 0;background-size:100% auto;} .nhasset .areaBanner2.t4 a {padding-right:95px;margin-bottom:0;} .nhasset .areaBanner2.t4 a:after {right:15px;} .nhasset .areaBanner2.t4 a > span:first-child {font-weight:bold;} .nhasset .areaBanner2.t4 a > span:last-child {margin-top:var(--space6);color:var(--color4);} .nhasset .areaBanner2.col {display:flex;flex-wrap:wrap;margin:-10px -6px;} .nhasset .areaBanner2.col a {padding:var(--space16) var(--space20);margin:calc(var(--space20) / 2) var(--space6);width:calc(50% - var(--space12));height:170px;} .nhasset .areaBanner2.col a:after {top:auto;left:auto;bottom:15px;right:var(--space10);margin:0;} .nhasset .areaBanner2.col a > span:first-child {font-size:var(--fontSize12);font-weight:400;} .nhasset .areaBanner2.col a > span:last-child {margin-top:5px;font-size:var(--fontSize14);font-weight:900;} /* 이미지 지정 */ .nhasset .areaBanner2 a.img1 {--el-bgcolor:#fff;--el-bg-position:-2px -2px;} .nhasset .areaBanner2 a.img2 {--el-bgcolor:#DCE4F6;--el-bg-position:-84px -2px;} .nhasset .areaBanner2 a.img3 {--el-bgcolor:#E2F5F0;--el-bg-position:-166px -2px;} .nhasset .areaBanner2 a.img4 {--el-bgcolor:#D1EDFE;--el-bg-position:-248px -2px;} .nhasset .areaBanner2 a.img5 {--el-bgcolor:#D1EDFE;--el-bg-position:-330px -2px;} .nhasset .areaBanner2 a.img6 {--el-bgcolor:#fcffe6;--el-bg-position:-412px -2px;} .nhasset .areaBanner2 a.img7 {--el-bgcolor:#d1edfe;--el-bg-position:-494px -2px;} .nhasset .areaBanner2 a.img8 {--el-bgcolor:#d1edfe;--el-bg-position:-576px -2px;} .nhasset .areaBanner2 a.img9 {--el-bgcolor:#d9e7ff;--el-bg-position:-658px -2px;} .nhasset .areaBanner2 a.img10 {--el-bgcolor:#d9e7ff;--el-bg-position:-2px -84px;} .nhasset .areaBanner2 a.img11 {--el-bgcolor:#d9e7ff;--el-bg-position:-84px -84px;} .nhasset .areaBanner2 a.img12 {--el-bgcolor:#e3ddf9;--el-bg-position:-166px -84px;} .nhasset .areaBanner2 a.img13 {--el-bgcolor:#d9e7ff;--el-bg-position:-248px -84px;} .nhasset .areaBanner2 a.img14 {--el-bgcolor:#fcffe6;--el-bg-position:-330px -84px;} .nhasset .areaBanner2 a.img15 {--el-bgcolor:#d9e7ff;--el-bg-position:-412px -84px;padding-right:20px !important;} .nhasset .areaBanner2 a.img16 {--el-bgcolor:#d3eefb;--el-bg-position:-2px -282px;} .nhasset .areaBanner2 a.img17 {--el-bgcolor:#d9e7ff;--el-bg-position:-84px -282px;} /* [MD2502_020] 대출비교서비스 이동배너 추가 */ .nhasset .areaBanner2 a.img18 {--el-bgcolor:#fff;--el-bg-position:-84px -282px;} .nhasset .areaBanner2 a.img18:after {background: url('../images/banner/asset_main_banner03.png')no-repeat center right 7px;background-size:64px 64px} /* [BANNER] 배너 유형3 : 신용점수관리 */ .nhasset .areaBanner3 {margin:var(--space20) 0 0;} .nhasset .areaBanner3 > a {overflow:hidden;display:block;position:relative;padding:var(--space24) var(--space20);background-color:#fff;border-radius:10px;box-shadow:var(--boxShadow1);color:var(--color1);} .nhasset .areaBanner3 > a:not(:first-child) {margin-top:var(--space8);} .nhasset .areaBanner3 > [class*="img"] {padding-right:104px;} .nhasset .areaBanner3 > [class*="img"]:after {content:'';display:block;position:absolute;top:50%;right:var(--space20);margin:-40px 0;width:80px;height:80px;border-radius:50%;background:#fafafc var(--bgImg3) var(--el-bg-position);background-size:var(--bgSize3);} .nhasset .areaBanner3 .tit {display:block;font-size:var(--fontSize14);font-weight:900;} .nhasset .areaBanner3 .sub {display:block;margin-bottom:2px;font-size:var(--fontSize13);} .nhasset .areaBanner3 .con {display:block;margin-top:var(--space12);font-size:var(--fontSize12);color:var(--color4);} .nhasset .areaBanner3 .grade0:before {content:'';display:inline-block;margin:-3px var(--space8) 0 0;width:calc(var(--size6) + 1px);height:calc(var(--size6) + 1px);background-color:var(--grade0);border-radius:50%;vertical-align:middle;} .nhasset .areaBanner3 > .img1 {--el-bg-position:-2px -166px;} /* [BANNER] 배너 유형4 : 신용점수관리 */ .nhasset .areaBanner4 > a {display:block;position:relative;padding:var(--space24) var(--space20) var(--space24) calc(var(--space20) + 78px);background-color:#6eabce;border-radius:15px;color:#fff;} .nhasset .areaBanner4 > a > span:first-child {display:block;font-size:var(--fontSize16);font-weight:900;} .nhasset .areaBanner4 > a > span:last-child {display:block;margin-top:var(--space6);font-size:var(--fontSize14);} .nhasset .areaBanner4 > a:before {content:'';display:block;position:absolute;top:50%;left:var(--space20);margin:-29px 0;width:58px;height:58px;border-radius:50%;background:#fff var(--bgImg3) -84px -166px;background-size:var(--bgSize3);} /* [BANNER] 배너 유형5 : 신용점수올리기 */ .nhasset .areaBanner5 {margin-top:var(--space20)} .nhasset .areaBanner5 > a {display:block;position:relative;padding:var(--space20) var(--space20) var(--space20) 68px;background-color:var(--bg4);border-radius:5px;} .nhasset .areaBanner5 > a > span:first-child {display:block;font-size:var(--fontSize13);color:var(--color4);} .nhasset .areaBanner5 > a > span:last-child {display:block;margin-top:1px;font-weight:bold;} .nhasset .areaBanner5 > a:before {content:'';display:block;position:absolute;top:50%;left:0;margin-top:-40px;width:80px;height:80px;background:var(--bgImg3) -80px 0;background-size:var(--bgSize3);} .nhasset .areaBanner5 > a:after {content:'';display:block;position:absolute;top:50%;right:calc(var(--space20) - 2px);margin-top:-8px;width:16px;height:16px;background:var(--bgImg1);background-size:var(--bgSize1);} .nhasset .areaBanner5 > a.img1:before {background-position:-494px -84px;} .nhasset .areaBanner5 > a.img2:before {background-position:-576px -84px;} .nhasset .areaBanner5 > a.img3:before {background-position:-658px -84px;} .nhasset .areaBanner5 > a + a {margin-top:var(--space20) !important} /* [BANNER] 배너 유형6 : 아이콘유형 */ .nhasset .areaBanner6 {margin-top:var(--space20)} .nhasset .areaBanner6 > a {display:flex;align-items:center;padding:14px var(--space20);min-height:32px;background-color:var(--el-bgcolor);border-radius:10px;font-size:var(--fontSize12);font-weight:bold;} .nhasset .areaBanner6 > a:before {content:'';display:block;margin-right:var(--space8);width:32px;height:32px;border-radius:50%;background:#fff var(--bgImg3) var(--el-background-position);background-size:var(--bgSize3)} .nhasset .areaBanner6 > a.img1 {--el-bgcolor:#effcf8;--el-background-position:-2px -248px} .nhasset .areaBanner6 > a.img2 {--el-bgcolor:#fff;--el-background-position:-36px -248px} .nhasset .areaBanner6.t1 > a {position:relative;padding:14px 30px 14px 14px;border-radius:6px;box-shadow:var(--boxShadow1);font-size:var(--fontSize14);} .nhasset .areaBanner6.t1 > a:before {margin-right:6px;} .nhasset .areaBanner6.t1 > a:after {content:'';position:absolute;right:20px;top:50%;margin-top:-5px;width:6px;height:10px;background:url('../images/arr_right02.png') center /100% no-repeat} /* [BANNER] 배너 유형7 : 통합메인 */ .nhasset .areaBanner7 {margin-top:var(--space20);} .nhasset .areaBanner7 [class*="img"] > dt {position:relative;padding:var(--space24) calc(var(--space20) + 75px) var(--space24) var(--space20);border-radius:10px 10px 0 0;box-shadow:var(--boxShadow1);} .nhasset .areaBanner7 [class*="img"] > dt:before {content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:-10px;background:var(--dt-background-color);border-radius:10px 10px 0 0;} .nhasset .areaBanner7 [class*="img"] > dt:after {content:'';display:block;position:absolute;top:50%;right:var(--space20);margin-top:-40px;width:80px;height:80px;background:var(--bgImg3) var(--dt-background-position);background-size:var(--bgSize3);} .nhasset .areaBanner7 [class*="img"] > dt > span {display:block;position:relative;font-size:var(--fontSize12);font-weight:bold;color:var(--color4);} .nhasset .areaBanner7 [class*="img"] > dt > strong {display:block;position:relative;margin-top:var(--space8);font-size:var(--fontSize16);font-weight:bold;word-break:keep-all;} .nhasset .areaBanner7 [class*="img"] + [class*="img"] {margin-top:var(--space20)} .nhasset .areaBanner7 .info > li {position:relative;padding-left:var(--space24);color:var(--color2);font-size:var(--fontSize14);line-height:1.5;word-break:keep-all;} .nhasset .areaBanner7 .info > li:before {content:'';display:block;position:absolute;top:var(--size3);left:0;width:16px;height:16px;background:var(--bgImg1) var(--info-background-position);background-size:var(--bgSize1);} .nhasset .areaBanner7 .info > li + li {margin-top:var(--space8);} .nhasset .areaBanner7 .btns {margin-top:var(--space12);width:100%;text-align:right;} .nhasset .areaBanner7 .toggleWrap {margin-top:-14px;position:relative;} .nhasset .areaBanner7 .toggleCont {margin-top:12px;margin-bottom:-10px;padding:var(--space24) var(--space20) var(--space24);background:var(--dd-background-color);border-radius:10px;box-shadow:var(--boxShadow1);} .nhasset .areaBanner7 .img1 { --dt-background-color:#d1edfe; --dt-background-position:-494px -166px; --dd-background-color:#f6fcff; --info-background-position:0 -16px; } .nhasset .areaBanner7 .img2 { --dt-background-color:#ffebf2; --dt-background-position:-576px -166px; --dd-background-color:#fff9fb; --info-background-position:-16px -16px; } .nhasset .areaBanner7 .img3 { --dt-background-color:#f8f6da; --dt-background-position:-658px -166px; --dd-background-color:#fffff9; --info-background-position:-32px -16px; } .nhasset .mainNoticeSwiper + .areaBanner7 {margin-top:2px;} /* [BANNER] 배너 유형8 : 별별서비스 */ .nhasset .areaBanner8 a {display:block;overflow:hidden;position:relative;padding-right:72px;background-color:#fff;border-radius:10px;margin-top:20px;padding:24px 20px;box-shadow:0px 2px 5px 0px rgba(41, 58, 88, 0.16);} .nhasset .areaBanner8 a[class*="img"]:after {content:'';display:block;position:absolute;top:50%;right:15px;margin-top:-29px;width:68px;height:68px;border:5px solid #f4f7fb;background:#f4f7fb var(--bgImg3) -84px -166px;background-size:var(--bgSize3);border-radius:50%;} .nhasset .areaBanner8 a .txt1 {display:block;font-size: clamp(12px,1.2rem,18px);color:#555;} .nhasset .areaBanner8 a .txt2 {display:block;font-size:var(--fontSize19);font-weight:900;} .nhasset .areaBanner8 a .txt2 > i {overflow:hidden;display:inline-block;margin:-3px 8px 0;width:20px;height:20px;color:transparent;background:var(--bgImg1) 0 -32px;background-size:var(--bgSize1);vertical-align:middle;} .nhasset .areaBanner8 a .txt3 {display:inline-block;margin-top:12px;background:url('../images/arr_right02.png')no-repeat right center;background-size:6px auto;padding-right:12px;font-weight:bold;color:var(--color4);font-size:clamp(14px,1.4rem,21px);} .nhasset .areaBanner8 a .txt2[data-mode="ani"] i, .nhasset .areaBanner8 a .txt2[data-mode="ani"] i + strong {opacity:0;position:relative;} .nhasset .areaBanner8 a .txt2[data-mode="ani"] i {animation:banAni8 0.5s 2s forwards ease-in-out} .nhasset .areaBanner8 a .txt2[data-mode="ani"] i + strong {animation:banAni8 0.5s 2.3s forwards ease-in-out} @keyframes banAni8 { 0% {opacity:0;left:-5px;} 100% {opacity:1;left:0;} } /* [BANNER] 배너 애니메이션 유형 : 소비력분석배너 */ .nhasset .banAni1 {display:flex;margin:32px 0 var(--space20);} .nhasset .banAni1 > div {flex:1;position:relative;padding-top:90px;text-align:center;font-size:var(--fontSize12);font-weight:bold;} .nhasset .banAni1 > div:before {content:'';display:block;position:absolute;left:50%;margin:0 -30px;width:60px;border-radius:8px;} .nhasset .banAni1 > div:first-child:before {top:0px;height:80px;background-color:#577fe0;animation:banAni1_left 2.5s infinite ease-in-out;} .nhasset .banAni1 > div:last-child {color:var(--color5);} .nhasset .banAni1 > div:last-child:before {top:30px;height:50px;background-color:#aeb7c5;animation:banAni1_right 2.5s infinite ease-in-out} .nhasset .banAni1[data-mode="ani"] div:before {animation:none;} .nhasset .banAni1[data-mode="ani"].active > div:first-child:before {animation:banAni1_left 2.5s infinite ease-in-out;} .nhasset .banAni1[data-mode="ani"].active > div:last-child:before {animation:banAni1_right 2.5s infinite ease-in-out} @keyframes banAni1_left { 0% {top:0px;height:80px;background-color:#577fe0;} 30% {top:30px;height:50px;background-color:#e4797b;} 55% {top:30px;height:50px;background-color:#e4797b;} 80% {top:0px;height:80px;background-color:#577fe0;} 100% {top:0px;height:80px;background-color:#577fe0;} } @keyframes banAni1_right { 0% {top:30px;height:50px;} 30% {top:0px;height:80px;} 55% {top:0px;height:80px;} 80% {top:30px;height:50px;} 100% {top:30px;height:50px;} } /* [BANNER] 배너 애니메이션 유형 : 카드리포트 미연결 배너 */ .nhasset .banAni2 {overflow:hidden;position:relative;} .nhasset .banAni2 ul {animation:banAni2 10s infinite cubic-bezier(0.5, 0.48, 0.53, 0.51);} .nhasset .banAni2 ul li {padding-bottom:var(--space8);} .nhasset .banAni2 ul li > img {display:block;margin:0 auto} .nhasset .banAni2:after {content:'';display:block;position:absolute;top:0;bottom:0;left:0;right:0;z-index:2;width:100%;height:100%;background:linear-gradient(0deg, rgba(255,255,255, 1) 1.5%, rgba(255,255,255, 0) 18%/*, rgba(255,255,255, 0) 85%, rgba(255,255,255, 1) 100%*/);} @keyframes banAni2 { 0% {transform:translateY(0);} 100% {transform:translateY(-50%);} } /* [BBS] 게시판목록 유형1 : FAQ */ .nhasset .bbsList1 > dl {background-color:#fff;border-radius:10px;box-shadow:var(--boxShadow1);} .nhasset .bbsList1 > dl + dl {margin-top:var(--space20);} .nhasset .bbsList1 > dl > dt {position:relative;padding:var(--space24) 40px var(--space24) 44px;font-weight:bold;word-break:keep-all;word-wrap:break-word;} .nhasset .bbsList1 > dl > dt:before {content:'.';display:block;position:absolute;top:calc(var(--space24) + var(--size4));left:var(--space20);padding-left:var(--space12);width:16px;height:16px;background:var(--bgImg1) -194px 0;background-size:var(--bgSize1);line-height:15px;font-weight:900;color:var(--point1)} .nhasset .bbsList1 > dl > dd {padding:calc(var(--space20) + 1px) var(--space20) var(--space24);border-top:1px solid var(--line3);color:var(--color4);line-height:1.5;word-break:keep-all;} .nhasset .bbsList1 [data-toggle="con"] {display:none;} .nhasset .bbsList1 [data-toggle="btn"]:after {content:'';display:block;position:absolute;top:50%;right:var(--space20);margin:var(--space10-t1) 0;width:20px;height:20px;background:url('../images/arr_down02.png') no-repeat center;background-size:10px} .nhasset .bbsList1 .active [data-toggle="btn"]:after {background-image: url('../images/arr_up02.png');} /* [BBS] 게시판상세 유형1 : 트렌드 */ .nhasset .bbsView1:first-child {padding-top:30px;} .nhasset .bbsView1 .tit {margin-bottom:var(--space16);font-size:var(--fontSize16);font-weight:900;color:var(--color1);word-wrap:break-word;word-break:keep-all;} .nhasset .bbsView1 .area {overflow:hidden;padding-bottom:var(--space20);background-color:#fff;border-radius:10px;box-shadow:var(--boxShadow1);} .nhasset .bbsView1 .area .tagWrap, .nhasset .bbsView1 .area .data {margin:var(--space8) var(--space20);} .nhasset .bbsView1 .area .tagWrap .tag:before {content:'#';} .nhasset .bbsView1 .area .cont {margin:0 var(--space20) var(--space20);padding:var(--space20) 0;background-color:#fff;border-bottom:1px solid var(--line3);} .nhasset .bbsView1 .area .data > dl {display:inline-block;margin-right:var(--space16);font-size:var(--fontSize12);color:var(--color4);} .nhasset .bbsView1 .area .data > dl > dt, .nhasset .bbsView1 .area .data > dl > dd {display:inline;} .nhasset .bbsView1 .area > div:last-child {margin-bottom:0;} .nhasset .bbsView1 [data-swiper-type="list1"] > ul > li {width:100%;} /* [BBS] 게시판상세 유형2 : 올리를 찾아라 */ .nhasset .bssView2 {position:relative;} .nhasset .bssView2 img {display:block;width:100%;border-radius:10px;} .nhasset .bssView2 .info {display:flex;gap:var(--el-gap);position:absolute;left:0;right:0;bottom:var(--el-bottom-position);margin:0 11.111111vw;padding:var(--el-padding);text-align:center;} .nhasset .bssView2 .info > dl {flex:1;} .nhasset .bssView2 .info > dl dt {visibility:hidden;font-size:5.55555vw;} .nhasset .bssView2 .info > dl dd {margin:var(--el-value-margin-top) auto 0 auto;font-size:6.666666vw;font-weight:900;} .nhasset .bssView2.ty01 { --el-gap:5.555555vw; --el-padding:5.555555vw; --el-bottom-position:11.111111vw; --el-value-margin-top:0; } .nhasset .bssView2.ty02 {color:#fff; --el-gap:21.666666vw; --el-bottom-position:11.111111vw; } .nhasset .bssView2.ty03 { --el-gap:3.333333vw; --el-bottom-position:13.333333vw; --el-value-margin-top:26.777777vw; } .nhasset .bssView2.ty04 { --el-gap:3.333333vw; --el-bottom-position:15.277777vw; --el-value-margin-top:0; } .nhasset .bssView2.ty03 .info > dl dd, .nhasset .bssView2.ty04 .info > dl dd {position:relative;width:fit-content;min-width:11.111111vw;padding:0 2.388888vw;z-index:0;} .nhasset .bssView2.ty03 .info > dl dd:before, .nhasset .bssView2.ty04 .info > dl dd:before {content:'';position:absolute;left:0;bottom:0.555555vw;width:100%;height:2.777777vw;background-color:#f1f4f7;border-radius:1.388888vw;z-index:-1;} .nhasset .bssView2.ty03 .info > dl:last-child dd:before {background-color:#ebe9ff;} .nhasset .bssView2.ty04 .info > dl:last-child dd:before {background-color:#e9f8ff;} .nhasset .boxTypeWrap .bssView2 {margin:-29px var(--space20-t1) var(--space24-t1)} .nhasset .boxTypeWrap .bssView2 + .bssView2 {margin-top:var(--space20);} /* [CHART] 차트영역 유형1 : 알메이트 차트 영역 */ .nhasset .areaChart1 {position:relative;} .nhasset .areaChart1 .info {position:absolute;right:0;z-index:1;color:var(--point1);font-size:var(--fontSize12);font-weight:bold;} .nhasset .areaChart1 .info.img1 {overflow:hidden;top:50%;right:12px;margin-top:var(--space24-t1);width:50px;height:50px;background:var(--bgImg1) 0 -144px;background-size:var(--bgSize1);border-radius:50%;box-shadow:0 0 10px 0 rgba(0,0,0,0.1);color:transparent;} .nhasset .areaChart1 .item {display:flex;justify-content:center;align-items:flex-end;position:absolute;top:0;bottom:7px;left:calc(52.7% - 2.3rem);width:1px;color:var(--color4);font-size:10px;font-weight:bold;white-space:nowrap;} .nhasset .areaChart1 .item:before {content:'';display:block;position:absolute;left:50%;bottom:27px;top:0;width:1px;border-left:1px dashed #ccc;} .nhasset .areaChart1 .item > span + span {margin-left:var(--space4);} .nhasset .areaChart1 .data1 {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center;} .nhasset .areaChart1 .data1 > dt {font-size:var(--fontSize14);color:var(--color2);} .nhasset .areaChart1 .data1 .dataValue {font-size:var(--fontSize34);font-weight:900;} .nhasset .areaChart1 .data1 .dataValue + span {margin-left:var(--space4);font-size:var(--fontSize16);font-weight:900;} .nhasset .areaChart1 .data2 + .chart:empty:before {display:none;} .nhasset .areaChart1 .data2 {position:absolute;padding:3px 6px;border-radius:3px;border:1px solid var(--el-grade);background-color:rgba(255,255,255,0.8);font-size:var(--fontSize12);font-family:'NotoKR';font-weight:900;color:#111;} .nhasset .areaChart1 .data2 span + span {margin-left:var(--space4);} .nhasset .areaChart1 .chart {width:100%;height:100%;} @media screen and (min-width:641px) { .nhasset .areaChart1 .item {left:calc(52.7% - 2.6rem);} } /* 알메이트 재정의 */ .nhasset .areaChart1 .chart#chartHolder2 .rMateH5__ScrollBar {display:none;} /* 조기은퇴진단 알메이트 스크롤 삭제 */ .nhasset .areaChart1 .chart .rMateH5__DataTip.show .data2 {position:relative;padding:0;background-color:transparent;border:0;} /* 상세평가내역에 알메이트 차트 내 툴팁이 중복으로 노출되는 경우 */ .nhasset .areaChart1 .data1 + .chart .rMateH5__rMateChart {background-color:transparent !important;opacity:1 !important;} /* 상세평가내역에 알메이트 차트 BG 삭제 */ /* [CHART] 차트영역 유형2 : 가로 막대그래프 */ .nhasset .areaChart2 {display:flex;flex-wrap:wrap;margin:var(--space24) 0; --el-chart-radius:20px; --el-chart-color:#f79b48; --el-msg-bg:#fef7f5; --el-msg-color:#e75441; } .nhasset .areaChart2 > p {order:1;margin-left:auto;margin-bottom:8px;padding:3px 8px;border-radius:5px;background-color:var(--el-msg-bg);color:var(--el-msg-color);font-size:var(--fontSize12);font-weight:400;line-height:1.667;} .nhasset .areaChart2 .chart {order:2;display:flex;width:100%;height:16px;border-radius:var(--el-chart-radius);background-color:#f2f4f8;} .nhasset .areaChart2 .chart > span {border-radius:var(--el-chart-radius);background-color:var(--el-chart-color);} .nhasset .areaChart2.c1 {--el-chart-color:#64caaa;--el-msg-bg:#f0fbf7;--el-msg-color:var(--point4);} .nhasset .areaChart2.c2 {--el-chart-color:#e4797b;--el-msg-bg:#fef5f4;--el-msg-color:#d64b4e;} .nhasset .areaChart2.c3 {--el-chart-color:#a596e1;--el-msg-bg:#f7f6fd;--el-msg-color:#a596e1;} /* 좌우배치유형 */ .nhasset .areaChart2.t1 {display:table;width:100%;} .nhasset .areaChart2.t1 dl {display:table-row;} .nhasset .areaChart2.t1 dl > dt {display:table-cell;width:30px;white-space:nowrap;vertical-align:middle;font-size:var(--fontSize13);} .nhasset .areaChart2.t1 dl > dd {display:flex;align-items:center;gap:var(--space16) var(--space20);position:relative;margin-left:var(--space20);padding:var(--space8) 0;} .nhasset .areaChart2.t1 dl > dd .data1 {display:flex;flex-direction:column;width:100%;} .nhasset .areaChart2.t1 dl > dd .data1 .chart {margin:2px 0;} .nhasset .areaChart2.t1 dl > dd .data2 {display:none;position:absolute;top:50%;right:0;padding:var(--space4) var(--space8);border-radius:3px;background-color:rgba(255,255,255,0.8);border:1px solid #8f64ca;transform:translateY(-50%);} .nhasset .areaChart2.t1 dl > dd .data2 dt, .nhasset .areaChart2.t1 dl > dd .data2 dd {font-size:var(--fontSize12);color:var(--color1);font-weight:bold;} .nhasset .areaChart2.t1 dl > dd .data2 dd {justify-content:flex-end;padding:1px 0;font-weight:900;} .nhasset .areaChart2.t1 dl > dd .data2.active {display:table;} .nhasset .areaChart2.t1 dl.item2 > dt {color:var(--color4);} .nhasset .areaChart2.t1 dl.item2 > dd {color:var(--color5);} .nhasset .areaChart2.t1 .chart + div {order:3;flex-shrink:0;} .nhasset .areaChart2.t1 .chart > span {background-color:var(--chart-color);} .nhasset .areaChart2.t1 .item1 {--chart-color:#64caaa;} .nhasset .areaChart2.t1 .item2 {--chart-color:#d0d0d0;} .nhasset .areaChart2.t1 .item3 {--chart-color:#a596e1;} .nhasset .areaChart2.t1 .dataValue {font-weight:900;} .nhasset .areaChart2.t1.c1 .item1 {--chart-color:#e4797b;} /* 상하배치유형 */ .nhasset .areaChart2.t2 {position:relative;padding-top:calc(var(--el-top) + 13px);--el-top:9px + var(--size9);} .nhasset .areaChart2.t2 > .item1 {order:2;margin-top:var(--space4);font-size:var(--fontSize12);font-weight:400;} .nhasset .areaChart2.t2 > .item1 > li:first-child {position:absolute;top:0;right:0;color:var(--color6);height:calc(var(--el-top) + 13px);} .nhasset .areaChart2.t2 > .item1 > li:last-child {display:inline-block;padding:var(--space4) var(--space8);background-color:var(--el-msg-bg);border-radius:5px;color:var(--el-msg-color);font-weight:bold;} .nhasset .areaChart2.t2 > .item1 .dataValue, .nhasset .areaChart2.t2 > .item1 .won {font-weight:inherit;} /* 위치가변형 */ .nhasset .areaChart2.t3 {position:relative;margin:14px 0 0;padding-top:clamp(30px, 3rem, 45px);--el-msg-width:clamp(71px, 7.1rem, 100px);} .nhasset .areaChart2.t3:last-child {margin-bottom:var(--space4-t1);} .nhasset .areaChart2.t3 .chart {overflow:hidden;} .nhasset .areaChart2.t3 .chart > span {position:relative;--el-chart-color:#577fe0;padding-right:8px;box-sizing:content-box;} .nhasset .areaChart2.t3 .chart > span:after {content:'';display:block;margin-left:auto;margin-right:-8px;border:5px solid var(--el-chart-color);width:16px;height:16px;border-radius:100%;background-color:#fff;} .nhasset .areaChart2.t3 > .item1 {display:flex;flex:1;order:2;} .nhasset .areaChart2.t3 > .item1 > li:first-child {display:flex;justify-content:space-between;position:absolute;top:0;width:100%;} .nhasset .areaChart2.t3 > .item1 > li:first-child > p {margin-left:auto;font-weight:bold;} .nhasset .areaChart2.t3 > .item1 > li:first-child > p span:first-child {visibility:hidden;} .nhasset .areaChart2.t3 > .item1 > li:last-child {display:flex;justify-content:flex-end;position:relative;margin-top:8px;padding-left:16px;width:calc(var(--el-width) + 8px);} .nhasset .areaChart2.t3 > .item1 > li:last-child:before {content:'';display:block;position:absolute;right:3px;width:10px;height:10px;border-radius:3px;background-color:#4e4e4e;transform:rotate(118deg) skew(325deg);} .nhasset .areaChart2.t3 > .item1 > li:last-child > span {position:-webkit-sticky;position:sticky;right:0;margin-right:calc(((var(--el-msg-width)/2) - 8px) * -1);padding:1px 6px 2px;width:var(--el-msg-width);border-radius:4px;background-color:#4e4e4e;color:#fff;white-space:nowrap;text-align:center;font-size:var(--fontSize12);} .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:0"], .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:1."], .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:1%"], .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:2."], .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:2%"], .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:3."], .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:3%"], .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:4."], .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:4%"], .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:5."], .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:5%"] {justify-content:flex-start;margin-right:0;} .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:0"] > span, .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:1."] > span, .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:1%"] > span, .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:2."] > span, .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:2%"] > span, .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:3."] > span, .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:3%"] > span, .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:4."] > span, .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:4%"] > span, .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:5."] > span, .nhasset .areaChart2.t3 > .item1 > li:last-child[style^="--el-width:5%"] > span {margin-right:0;margin-left:-16px;} /* 가로등분형1 */ .nhasset .areaChart2.t4 {position:relative;z-index:1;margin-bottom:var(--space20);height:44px;} .nhasset .areaChart2.t4:before {content:'';display:block;position:absolute;bottom:0;left:0;right:0;z-index:-1;border-radius:6px;height:30px;background-color:var(--bg1);} .nhasset .areaChart2.t4 > ul {display:flex;overflow:hidden;margin-top:14px;border-radius:6px;height:30px;width:100%;} .nhasset .areaChart2.t4 > ul > li {width:var(--el-value);height:100%;} .nhasset .areaChart2.t4 .chart {border-radius:0;background-color:var(--el-color);height:100%;} .nhasset .areaChart2.t4 .info {opacity:0;visibility:hidden;position:absolute;top:10px;left:50%;padding:var(--space4) var(--space8) var(--space4) var(--space20);border:1px solid var(--line1);background:rgba(255,255,255,0.8);border-radius:3px;white-space:nowrap;font-size:var(--fontSize12);font-weight:900;transform:translateX(-50%);transition:all 0.3s;pointer-events:none;} /* [MD2402_013] */ .nhasset .areaChart2.t4 .info:before {content:'';display:block;position:absolute;left:8px;top:50%;margin-top:-4px;width:8px;height:8px;border-radius:50%;background-color:var(--el-color);} .nhasset .areaChart2.t4 .info > span {display:inline;} .nhasset .areaChart2.t4 .info.active {visibility:visible;opacity:1;top:-10px;} /* [MD2402_013] */ .nhasset .areaChart2.t4 .item1 {--el-color:#577fe0;} .nhasset .areaChart2.t4 .item2 {--el-color:#64caaa;} .nhasset .areaChart2.t4 .item3 {--el-color:#d9ebae;} .nhasset .areaChart2.t4 .item4 {--el-color:#f7f378;} .nhasset .areaChart2.t4 .item5 {--el-color:#ff8357;} .nhasset .areaChart2.t4 .item6 {--el-color:#ffb158;} .nhasset .areaChart2.t4 .item7 {--el-color:#ffdb7d;} .nhasset .areaChart2.t4 .item8 {--el-color:#fff4b4;} /* [MD2402_013] 가로등분형2 */ .nhasset .areaChart2.t5 {overflow:hidden;display:block;position:relative;z-index:1;margin-bottom:var(--space20);--el-space:8px;transform:translateZ(0);} .nhasset .areaChart2.t5 > ul {display:flex;margin-top:calc(var(--space8) + (var(--fontSize24)*2));padding-left:var(--el-space);width:100%;height:16px;} .nhasset .areaChart2.t5 > ul > li {overflow:visible;position:relative;margin-left:calc(var(--el-space) * -1);width:calc(var(--el-value) + var(--el-space));height:100%;} .nhasset .areaChart2.t5 > ul > li:after {content:'';opacity:0;display:block;position:absolute;z-index:1;left:50%;bottom:4px;width:5px;height:5px;border-right:1px solid var(--el-color);border-bottom:1px solid var(--el-color);background:#fff;transform:rotate(45deg) translateX(-50%);transition:all 0.3s;} .nhasset .areaChart2.t5 > ul > li:last-child .chart {border-radius:8px;} .nhasset .areaChart2.t5 .info {opacity:0;position:absolute;left:50%;bottom:0;z-index:1;padding:var(--space4) var(--space6);border:1px solid var(--el-color);background:#fff;border-radius:3px;text-align:center;transform:translateX(-50%);transition:opacity 0.3s, bottom 0.3s;pointer-events:none;} .nhasset .areaChart2.t5 .info > span {display:block;white-space:nowrap;font-size:var(--fontSize12);font-weight:bold;} .nhasset .areaChart2.t5 .info.pos1 {left:0;transform:translateX(0);} .nhasset .areaChart2.t5 .info.pos2 {left:auto;right:0;transform:translateX(0);} .nhasset .areaChart2.t5 .chart {position:relative;z-index:2;border-radius:8px 0px 0px 8px;background-color:var(--el-color);height:100%;} .nhasset .areaChart2.t5 .active:after {opacity:1;bottom:20px;} .nhasset .areaChart2.t5 .active .info {opacity:1;bottom:24px;} .nhasset .areaChart2.t5 .item1 {--el-color:#577fe0;} .nhasset .areaChart2.t5 .item2 {--el-color:#64caaa;} .nhasset .areaChart2.t5 .item3 {--el-color:#d9ebae;} .nhasset .areaChart2.t5 .item4 {--el-color:#f7f378;} .nhasset .areaChart2.t5 .item5 {--el-color:#ffdb7d;} .nhasset .areaChart2.t5 .item6 {--el-color:#ffb158;} .nhasset .areaChart2.t5 .item7 {--el-color:#ff8357;} .nhasset .areaChart2.t5 .nodata {position:absolute;top:50%;margin:0;padding:0;background:transparent;font-size:var(--fontSize14);color:var(--color1);text-align:center;} .nhasset .areaChart2.t5 .nodata[class*="img"] {z-index:1;width:100%;} .nhasset .areaChart2.t5 .nodata[class*="img"]:before {content:'';display:block;position:fixed;top:8px;right:-5px;left:-5px;z-index:-1;width:calc(100% + 10px);height:26px;border:5px solid #fff;border-radius:16px;-webkit-filter:blur(4px);filter:blur(4px);opacity:0.8;} .nhasset .areaChart2.t5 .nodata.img1:before{background:linear-gradient(90deg, #577fe0 50%, #64caaa 50%, #64caaa 70%, #d9ebae 70%, #d9ebae 100%);} .nhasset .areaChart2.t5 .nodata.img2:before{background:linear-gradient(90deg, #577fe0 10%, #64caaa 10%, #64caaa 20%, #d9ebae 20%, #d9ebae 30%, #f7f378 30%, #f7f378 60%, #ffdb7d 60%, #ffdb7d 70%, #ffb158 70%, #ffb158 90%, #ff8357 90%);} .nhasset .areaChart2.t5 .nodata ~ .graphAddEx {margin-top:48px;-webkit-filter:blur(4px);filter:blur(4px);opacity:0.8;} .nhasset .areaChart2.t5 .graphAddEx {margin-top:var(--space20);} .nhasset .areaChart2.t5 .graphAddEx .ty01.item2 > li {white-space:nowrap;} .nhasset .boxTypeWrap .areaChart2.t5 {margin-bottom:0;} /* [MD2402_013] 상단배치형 */ .nhasset .areaChart2.t6 {margin-top:32px;display:block;} .nhasset .areaChart2.t6 > dl {display:flex;flex-wrap:wrap;justify-content:space-between;font-size:var(--fontSize13);} .nhasset .areaChart2.t6 > dl > dt {color:var(--color4);font-weight:bold;} .nhasset .areaChart2.t6 > dl > dt > span {display:block;margin-top:2px;font-size:var(--fontSize12);font-weight:400;color:var(--color5);} .nhasset .areaChart2.t6 > dl > dt > span > strong {color:var(--color4);font-weight:bold;} .nhasset .areaChart2.t6 > dl > dd {font-weight:900;} .nhasset .areaChart2.t6 > dl > dd + dd {width:100%;margin-top:var(--space6);margin-bottom:0;} .nhasset .areaChart2.t6 > dl + dl {margin-top:var(--space24);} .nhasset .areaChart2.t6 .chart > span:not([style*="width:0%"]):not([style*="width: 0%"]) {min-width:5%;} .nhasset .areaChart2.t6 .item1 {--el-chart-color:#577fe0;} .nhasset .areaChart2.t6 .item2 {--el-chart-color:#64caaa;} .nhasset .areaChart2.t6 .item3 {--el-chart-color:#f79b48;} /* [CHART] 차트영역 유형3 : 기대수익률 XY값 */ .nhasset .areaChart3 {position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;margin:28px 0 var(--space16) !important;padding-top:4.444444vw; --el-label-size:6.6666666vw; --el-chart-width:calc(100% - var(--el-label-size)); } .nhasset .areaChart3 .img {order:2;width:var(--el-chart-width);line-height:0;} .nhasset .areaChart3 .img img {width:100%;height:100%;} .nhasset .areaChart3 dl {display:flex;justify-content:space-between;} .nhasset .areaChart3 dt {position:absolute;font-size:3.611111vw;font-weight:bold;color:var(--color0);} .nhasset .areaChart3 dd {min-width:var(--el-label-size);font-size:2.777777vw;color:var(--color5);} .nhasset .areaChart3 .data1 {order:1;flex-direction:column-reverse;padding-top:3.888888vw;padding-bottom:3.888888vw;} .nhasset .areaChart3 .data2 {order:3;position:relative;width:var(--el-chart-width);margin:0.555555vw 0 0 auto;padding-bottom:6.666666vw;} .nhasset .areaChart3 .data1 > dt {top:0;} .nhasset .areaChart3 .data1 > dd {flex:1;} .nhasset .areaChart3 .data2 > dt {top:6.666666vw;right:0;} /* [CHART] 차트영역 유형4 : 세로 막대그래프 */ .nhasset .areaChart4 {display:flex;position:relative;margin:var(--space20) 0 0;padding-bottom:20px;} .nhasset .areaChart4:before {content:attr(data-label);display:block;position:absolute;left:0;right:0;bottom:var(--el-line-value);z-index:1;border-bottom:1px dashed #666;font-size:var(--fontSize12);color:var(--color4);} .nhasset .areaChart4 dl {flex:1;position:relative;height:110px;border-bottom:1px solid var(--line3); --el-label-border:rgba(208, 208, 208, 0.8); --el-bg:#d0d0d0; --el-arr-bg:#f6f6f6; } .nhasset .areaChart4 .chart {height:var(--el-value);width:30px;background-color:var(--el-bg);border-radius:6px 6px 0 0;} .nhasset .areaChart4 dt {position:absolute;left:50%;bottom:-25px;font-size:var(--fontSize10);color:var(--color5);line-height:25px;transform:translateX(-50%);pointer-events:none;} .nhasset .areaChart4 dd {display:flex;justify-content:center;align-items:flex-end;height:100%;} .nhasset .areaChart4 dd > div:last-child {display:none;position:absolute;left:50%;bottom:calc(var(--el-value)/2);z-index:2;padding:3px var(--space8);border:1px solid var(--el-label-border);background-color:rgba(255,255,255,0.8);border-radius:3px;font-size:var(--fontSize12);font-weight:900;color:var(--color1);white-space:nowrap;transform:translateX(-50%);} .nhasset .areaChart4 dd > div:last-child:before {content:attr(data-label);display:block;text-align:center;} .nhasset .areaChart4 dd > div:last-child:after {content:'';display:block;position:absolute;bottom:-3px;left:50%;margin:0 -2px;width:6px;height:6px;border-right:1px solid var(--el-label-border);border-bottom:1px solid var(--el-label-border);background:linear-gradient(-45deg, var(--el-arr-bg) 0% , var(--el-arr-bg) 50% , transparent 51% , transparent 100% );transform:rotate(45deg);} .nhasset .areaChart4 dd > div:last-child.active {display:block;} .nhasset .areaChart4 .data1 {--el-label-border:rgba(165, 150, 225, 0.8);--el-bg:#a596e1;--el-arr-bg:#edeaf9} /* [ETC] 기타영역 : 섹션영역 */ .nhasset [class*="areaSection"]:first-child {margin-top:0;} .nhasset [class*="areaSection"]:last-child {margin-bottom:0 !important;} .nhasset [class*="areaSection"] > [class*="defSubTit"]:first-child {margin-top:0;} .nhasset [class*="areaSection"] .defSubTit2 {margin-bottom:var(--space16)} .nhasset [class*="areaSection"] .btns {margin-top:var(--space20);width:100%;} .nhasset .areaSection1 {margin:var(--space24) 0;} .nhasset .areaSection1.line {padding-bottom:var(--space24);border-bottom:1px solid var(--line2);} .nhasset .areaSection2 {padding:0 var(--space16);} .nhasset .areaSection2 .areaChart3 {margin-left:var(--space20) !important;margin-right:var(--space20) !important;} .nhasset .areaSection3 {margin:32px 0 var(--space24) !important;} .nhasset .areaSection3 + .areaBanner2 {margin-top:var(--space4-t1);} .nhasset .areaSection4 {margin:40px 0 0;} .nhasset .areaSection4 > .defSubTit1 + .boxTypeWrap {margin-top:var(--space16);} .nhasset .areaSection4 .btns {margin-top:var(--space20);width:100%;} .nhasset .areaSection4 .detailList .bold .dataValue {font-weight:900;} .nhasset .container [class*="areaSection"]:first-child {margin-top:var(--space24);} /* [ETC] 기타영역 : 박스영역 */ .nhasset .areaBox1 {display:flex;flex-direction:column;padding:var(--space24) var(--space20) calc(var(--space24) + 4px);height:calc(100vh - var(--container1));background:#fff;border-radius:10px;box-shadow:var(--boxShadow1);} .nhasset .areaBox1 > .area {flex:1;} .nhasset .areaBox1 > div:not(:last-child):not(:first-child), .nhasset .areaBox1 > p:not(:last-child):not(:first-child) {margin:var(--space20) 0;} .nhasset .areaBox1 > .defTit:first-child {margin-top:0;margin-bottom:0;} .nhasset .areaBox1.t1 {height:calc(100vh - var(--container2));} .nhasset .container > .areaBox1 {margin-bottom:-64px;} /* [ETC] 기타영역 : 이미지영역 */ .nhasset .areaImg1 {margin:var(--space20) 0;text-align:center;} .nhasset .areaImg1:first-child {margin-top:0;} .nhasset .areaImg1:last-child {margin-bottom:0;} /* [SWIPER] 기본설정 */ .nhasset [data-swiper-type="list1"] {overflow:hidden;display:flex;flex-wrap:wrap;justify-content:center;position:relative;} .nhasset [data-swiper-type="list1"] > ul {display:flex;width:100%;} .nhasset [data-swiper-type="list1"] > ul > li {flex-shrink:0;margin-top:0 !important;} .nhasset [data-swiper-type="list1"] .swiper-autoBtn {order:2} .nhasset [data-swiper-type="list1"] .swiper-notification {display:none;} .nhasset [data-swiper-type="list1"] .swiper-pagination {align-self:center;} .nhasset [data-swiper-type="list1"] .swiper-pagination-fraction {position:absolute;right:var(--space20);background-color:rgba(102,102,102,.6);color:#fff;line-height:inherit} .nhasset [data-swiper-type="list1"] .swiper-button-next, .nhasset [data-swiper-type="list1"] .swiper-button-prev {width:36px !important;height:36px !important;bottom:16px;clip:unset;} .nhasset [data-swiper-type="list1"] .swiper-button-next {right:16px;} .nhasset [data-swiper-type="list1"] .swiper-button-prev {left:16px;} /* ************************************  * [AS-IS] 공통 재정의  * ************************************/ /* [TITLE] 타이틀 */ .nhasset .defTit h2, .nhasset .defTit h3, .nhasset .defTit h4, .nhasset .defTit h5, .nhasset .defTit h6 {display:inline;font-size:inherit;font-weight:inherit;} .nhasset .defTxt h2, .nhasset .defTxt h3, .nhasset .defTxt h4, .nhasset .defTxt h5, .nhasset .defTxt h6 {font-size:inherit;font-weight:inherit;} .nhasset div[class*="defSubTit"] h2, .nhasset div[class*="defSubTit"] h3, .nhasset div[class*="defSubTit"] h4, .nhasset div[class*="defSubTit"] h5, .nhasset div[class*="defSubTit"] h6 {display:inline;font-size:inherit;font-weight:inherit;} .nhasset div[class*="defSubTit"] .tooltipWrap .tooltipCont {left:0;} .nhasset [class*="defSubTit"] .emoji {width:32px;height:32px;} .nhasset div.defSubTit h2, .nhasset div.defSubTit h3, .nhasset div.defSubTit h4, .nhasset div.defSubTit h5, .nhasset div.defSubTit h6 {font-weight:bold;} .nhasset .defTit.t1 {margin-top:30px;margin-bottom:var(--space20)} .nhasset .defTit.t1 > strong {display:block;} .nhasset .defTit.t1 > span {display:block;margin-top:var(--space4);font-weight:400;font-size:var(--fontSize14);color:var(--color4)} .nhasset .defTit.icoTrd1 {background: url('../images/bg_tit_trd1.png') center right/68px auto no-repeat;} .nhasset .defTit.icoRetire {background:url('../images/bg_tit_retire1.png') top right/40px auto no-repeat;} .nhasset .defSubTit2.t1 {display:flex;} .nhasset .defSubTit2.t1 .sub {margin-left:auto;font-weight:bold;} .nhasset .defSubTit2.t1 .sub > .dataValue {color:var(--point1);} .nhasset .defSubTit2.t1 .tooltipWrap {margin-left:var(--space4);} .nhasset .defSubTit2.t1 > strong {font-weight:900;} .nhasset .defSubTit3.t1 {font-weight:900;} .nhasset .defSubTit3.t2 {margin:var(--space24) 0 var(--space8);color:var(--point1);font-weight:400;} .nhasset .defSubTit3.t2 .emoji {width:40px;height:40px;} .nhasset .defSubTit1 + .defSubTit4 {margin-top:var(--space16);} .nhasset .boxTypeWrap .defSubTit4.t1 {display:inline-block;margin:var(--space12) 0;} /* [MES] 데이터없음 */ .nhasset .noResultWrap.t1 {position:relative;margin:var(--space20) 0;padding-top:110px;padding-bottom:48px;background-position:50% 48px;} .nhasset .noResultWrap.t1:after {content:'';display:block;position:absolute;left:var(--space20-t1);right:var(--space20-t1);bottom:0;height:1px;background-color:var(--line3);} /* [MES] 메세지유형 */ .nhasset .popEventTxtBox.t1 {margin:0 16px;padding:20px 2rem;background-color:var(--bg-disabled2);border-radius:10px;} .nhasset .popEventTxtBox.t1 .defTit {margin-top:16px;font-size:var(--fontSize16);} .nhasset .popEventTxtBox.t2 .defTit {margin:0;} .nhasset .popEventTxtBox.t2 .imgWrapNor {margin-top:var(--space20);margin-bottom:0;} .nhasset .popEventTxtBox.t2 .imgWrapNor img {width:200px;height:auto;} /* [TEXT] 텍스트 */ .nhasset .subTxt.mt12 {margin-top:var(--space12);} .nhasset .subTxt2.t1:not(ul):not(dl), .nhasset .subTxt2.t1 > li, .nhasset .subTxt2.t1 > dd {position:relative;padding-left:var(--space10);} .nhasset .subTxt2.t1:not(ul):not(dl):before, .nhasset .subTxt2.t1 > li:before, .nhasset .subTxt2.t1 > dd:before {content:'';display:block;position:absolute;top:var(--size8);left:0;width:3px;height:3px;border-radius:50%;background-color:var(--color4);} .nhasset .subTxt3[class*="img"] {display:flex;flex-direction:column;justify-content:center;position:relative;margin-bottom:var(--space24);padding:var(--space24) var(--space20) var(--space24) 50px;background-color:var(--bg1);border-radius:5px;min-height:76px;line-height:1.54;} .nhasset .subTxt3[class*="img"]:before {content:'';display:block;position:absolute;top:23px;left:14px;width:32px;height:32px;background:var(--bgImg1);background-size:var(--bgSize1);background-position:var(--el-background-position);} .nhasset .subTxt3.img1 {--el-background-position:-128px -32px;} .nhasset .subTxt8 {font-size:var(--fontSize13) !important;color:var(--color5) !important;} .nhasset .subTxt9 {display:block;position:relative;z-index:1;width:fit-content;font-size:var(--fontSize12);color:var(--point1);font-weight:bold;} .nhasset .subTxt9:after {content:'';display:block;position:absolute;bottom:0;left:0;right:0;z-index:-1;height:6px;background-color:#e8f6ec;} .nhasset .popCont .msaeTxtType.t1 {margin:0 var(--space16) var(--space20);font-size:var(--fontSize16);color:var(--color1)} .nhasset .info_area.t1 {margin-top:var(--space24) !important;padding-top:var(--space24);border-top:1px solid var(--line3);} .nhasset .info_area .linkType5 {margin-top:var(--space16);margin-left:auto;} /* 간격 */ .nhasset .subTxt9 + .defSubTit1 {margin-top:var(--space8)} .nhasset .defSubTit3.t1 + [class*="subTxt"] {margin-top:var(--space6);} .nhasset .formWrap + .subTxt2.t1 {margin-top:var(--space24);} /* [BUTTON] 버튼 */ .nhasset .contBtn04.ic1 {padding-left:var(--space10);padding-right:var(--space10);color:var(--color4)} .nhasset .contBtn04.ic1:after {content:'';display:inline-block;margin:calc(var(--size3) * -1) 0 0 4px;width:16px;height:16px;background:url('../images/ico_update.png') no-repeat center center;background-size:auto 16px;vertical-align:middle;} .nhasset .contBtn06 {white-space:nowrap;} .nhasset .contBtn06.c1 {background-color:var(--point1);border-color:var(--point1);color:#fff;} .nhasset .linkType5 {display:block;width:fit-content;text-align:right;font-size:var(--fontSize14);font-weight:bold;color:var(--color1);text-decoration:underline !important;text-underline-position:under;} .nhasset .linkTxt4 {display:inline-block;padding-right:10px;background:url('../images/arr_right02.png') no-repeat right center;background-size:6px auto;font-weight:700;} /* [MD2406_042] 버튼 유형 추가 */ .nhasset .btnBoxWrap > li[style*="display:none"] + li, .nhasset .btnBoxWrap > li[style*="display: none"] + li {background:none;} .nhasset .btnBoxWrap > li > button span.iconUpdate {position:relative;background:none;} .nhasset .btnBoxWrap > li > button span.iconUpdate:before {content:'';display:block;position:absolute;left:0;top:50%;margin-top:-9px;width:20px;height:20px;background:url('../images/ico_update2.png')no-repeat center center;background-size:auto 20px;} .nhasset .btnBoxWrap > li > button span.iconUpdate.ani:before {animation:iconUpdateAni 0.6s infinite cubic-bezier(0.31, 0.29, 1, 1);} @keyframes iconUpdateAni { 0% {transform:rotate(0deg);} 100% {transform:rotate(-360deg);} } .nhasset .btnDownload2 {overflow:hidden;position:relative;width:24px;height:24px;color:transparent;} .nhasset .btnDownload2:before {content:'';display:block;position:absolute;top:50%;left:50%;margin:-8px;width:16px;height:16px;background:var(--bgImg1) -160px 0;background-size:var(--bgSize1);} .nhasset .yatexbtnWrap .faqBtn:before{content:" ";padding-left:24px;background:url('../images/ico_faq.png') left center/auto 16px no-repeat;} .nhasset .yatexbtnWrap .pushBtn:before{content:" ";padding-left:24px;background:url('../images/ico_set_alarm.png') left center/auto 16px no-repeat;} /* [LIST] 선택형목록 */ .nhasset .popCont .selectList li > button {flex:1;padding:22px 25px 22px 0;font-size:var(--fontSize16)} .nhasset .popCont .selectList li.active > button {font-weight:normal;background:url('../images/ico_select_active.png') no-repeat 100% 50%;background-size:12.5px auto;color:#19a647 ;font-weight:normal} .nhasset .listPsion button {flex-wrap:wrap;} .nhasset .listPsion button .sub {display:block;position:relative;margin-top:var(--space4);padding-left:var(--size8);width:100%;font-size:var(--fontSize12);} .nhasset .listPsion button .sub:before {content:'';display:block;position:absolute;top:var(--size8);left:0;width:var(--size3);height:var(--size3);background-color:var(--color6);border-radius:50%;} /* [LIST] 상세정보 */ .nhasset .detailList.type03 {position:relative;margin:var(--space12) 0 var(--space20);padding-bottom:var(--space24);} .nhasset .detailList.type03:after {content:'';display:block;position:absolute;left:var(--space20-t1);right:var(--space20-t1);height:1px;background-color:var(--line3);} .nhasset .detailList.type03:after {bottom:0;} .nhasset .detailList.type03 > li .tit .tgBtnType2.small {margin-top:-3px;vertical-align:middle;} .nhasset .detailList.type03 > li + li {margin-top:var(--space12);} .nhasset .detailList.type04 > li {padding:var(--space16) 0;border-bottom:1px solid var(--line2);} .nhasset .detailList.type04 > li:last-child {border-bottom:0;padding-bottom:0;} .nhasset .detailList.type04 > li + li {margin:0;} .nhasset .detailList.type04 .value span {font-size:var(--fontSize14);} .nhasset #dtlSection.detailList.type04 > li:last-child .tooltipCont {top:auto;left:20px !important;bottom:clamp(48px, 4.8rem, 56px);width:calc(100% - 40px)!important;} /* 신용점수올리기전용 툴팁 위치 */ .nhasset .popIRP.openType .toggleCont .detailList .value {flex-shrink:inherit;} /* 통합테스트 수정 : 개행되지 않는 문제로 인한 수정 */ .nhasset .popIRP.openType .toggleCont .detailList .value .dataValue {white-space:nowrap;} /* [LIST] 범례 */ .nhasset .graphAddEx .ty01 li.bl09:before {background-color:#a596e1} .nhasset .graphAddEx .ty01 li.bl10:before {background-color:#577fe0} .nhasset .graphAddEx .ty01 li.bl11:before {background-color:#d9ebae} .nhasset .graphAddEx .ty01 li.bl12:before {background-color:#f7f378} .nhasset .graphAddEx .ty01 li.bl13:before {background-color:#ffdb7d} /* [MD2402_013] */ .nhasset .graphAddEx .ty01 li.bl14:before {background-color:#ffb158} /* [MD2402_013] */ .nhasset .graphAddEx .ty01 li.bl15:before {background-color:#ff8357} /* [MD2402_013] */ .nhasset .graphAddEx .ty01 li[class*="grade"]:before {content:'';display:inline-block;margin-top:var(--size2);margin-right:var(--size4);width:var(--size8);height:var(--size8);background-color:var(--el-grade);border-radius:50%;} .nhasset .graphAddEx .ty01.item1 {flex-wrap:wrap;} /* [MD2402_013] */ .nhasset .graphAddEx .ty01.item1 > li {position:static;display:inline-flex;font-size:var(--fontSize12);color:var(--color4);} .nhasset .graphAddEx .ty01.item1 > li .tooltipWrap {margin-left:4px;} .nhasset .graphAddEx .ty01.item1 > li + li {margin-left:var(--space10);} .nhasset .graphAddEx .ty01.item2 {display:grid;grid-template-columns:1fr 1fr;grid-gap:5px 19px;width:fit-content;margin:0 auto;text-align:left;} /* [MD2402_013] */ .nhasset .graphAddEx .ty01.item2 > li {position:static;display:inline-flex;margin-left:0;font-size:var(--fontSize12);color:var(--color4);} .nhasset .graphAddEx .ty01.item2 > li:before {flex-shrink:0;} /* [MD2402_013] */ .nhasset .graphAddEx .ty01.item2 > li:only-child {grid-column:1/3;} .nhasset .graphAddEx .ty01.item2 [class^="bl"]:before {margin-right:var(--space8);} /* [MD2402_013] */ /* [LIST] 아이콘 */ .nhasset .icoList2.imgset1 {margin:var(--space20) 0;} .nhasset .icoList2.imgset1 li {margin-top:var(--space12);} .nhasset .icoList2.imgset1 li:before{content:'';margin-right:10px;width:32px;height:32px;background:var(--bgImg1) 0 -64px;background-size:var(--bgSize1);} .nhasset .icoList2.imgset1 li:nth-child(2):before{background-position-x:-32px} .nhasset .icoList2.imgset1 li:nth-child(3):before{background-position-x:-64px} /* [LIST] 내역 */ .nhasset .inoutListWrap.t1 .inoutTit {display:block;} .nhasset .inoutListWrap.t1 .inoutTit > span:not([class]) + span:not([class]):before {content:'';display:inline-block;margin:-3px 6px 0 4px;width:3px;height:3px;border-radius:50%;background:var(--color1);vertical-align:middle;} .nhasset .inoutListWrap.t1 .inoutCont {display:block;margin-top:4px;padding-right:80px;} .nhasset .inoutListWrap.t1 .inoutCont .amount {display:inline-block;font-weight:900;color:var(--color1)} .nhasset .inoutListWrap.t1 .inoutCont .amount .dataValue {font-weight:900;} .nhasset .inoutListWrap.t1 .inoutCont > .data1 {position:absolute;bottom:0;right:0;color:#3674bc;} .nhasset .inoutListWrap.t1 .inoutCont > .data2 {display:inline-block;margin-left:10px;color:var(--color5);font-size:var(--fontSize12);} .nhasset .inoutListWrap.t1 .inoutList > li > a {display:block;position:relative;} .nhasset .inoutListWrap.t1 .inoutListInn {position:relative;} .nhasset .inoutListWrap.t1 .inoutListInn:before {content:'';display:block;position:absolute;top:0;left:var(--space24-t1);right:var(--space24-t1);height:1px;background-color:var(--line2);} .nhasset .inoutListWrap.t1 .inoutListInn + .inoutListInn {border-top:0;} .nhasset .inoutListWrap a .inoutTit .use.noConnData {padding-right:13px;background:url('../images/arr_right04.png') no-repeat right center;background-size:6px auto;} /* [LIST] 상품목록 */ .nhasset .disagree.img1 p:after {background-image:url('../images/category/icoCate43.png');} .nhasset .disagree.img2 p:after {background-image:url('../images/category/icoCate48.png');} /* [INFO] 총합정보 */ .nhasset .totalBalance.t1 {margin:var(--space20) 0;} .nhasset .totalBalance.t1 dt {color:var(--color1);font-weight: bold;} .nhasset .totalBalance.t1 dd .dataValue {padding:0 5px;font-size:var(--fontSize26);line-height:normal;} .nhasset .boxTypeWrap .totalBalance.t1:first-child {margin-top:0;} .nhasset .totalBalance.t2 {display:flex;align-items:center;justify-content:space-between;margin:var(--space24) 0 var(--space10);padding-top:var(--space20);} .nhasset .totalBalance.t2:before {content:'';display:block;position:absolute;top:0;left:var(--space20-t1);right:var(--space20-t1);height:1px;background-color:var(--line3);} .nhasset .totalBalance.t2 dt {margin-bottom:0;color:var(--color1);font-weight:bold;font-size:var(--fontSize16);} .nhasset .totalBalance.t2 dd {font-size:var(--fontSize16);font-weight:900;} .nhasset .totalBalance.t2 .dataValue {font-size:var(--fontSize16);} .nhasset .totalBalance.t3 dt > span + span:before {content:'';display:inline-block;margin:0 4px;width:3px;height:3px;border-radius:50%;background-color:var(--color4);vertical-align:middle;} .nhasset .accTopInfo .totalBalance.t3 {margin-top:0;} /* [INFO] 서비스안내 */ .nhasset .visualWrap.t1 .imgWrap {padding:0;margin:11px 0 20px;} .nhasset .visualWrap.t1 .imgWrap img {display:block;margin:0 auto;width:100%;height:auto;max-width:288px;} .nhasset .visualWrap.t1 .addTxt {font-weight:900;} .nhasset .msAssetCont.t1 .formWrap {margin-top:20px;} .nhasset .msAssetCont.t1 .bigNumList img {margin:var(--space20) var(--space20-t1) 0;width:calc(100% + (var(--space20) * 2));max-width:360px;} /* [INFO] 필터영역 */ .nhasset .filterWrap .btnDownload2 {margin-left:var(--space6)} .nhasset .filterSelect.t1 button {font-weight:900;} .nhasset .filterSelect.t1 button:after {content:none;} .nhasset .filterArea.t1 {justify-content:flex-start;} .nhasset .filterArea.t1 > .filterSelect {margin-right:var(--space10);} .nhasset .filterArea.t1 > .filterSelect strong {font-size:var(--fontSize20);} .nhasset .filterArea.t1 > .filterSelect button:after {bottom:2px;} /* [FORM] 폼객체 : 직접입력 */ .nhasset .inputList.unitMan3 input[type="text"], .inputList.unitMan3 input[type="tel"] {flex:1;} .nhasset .inputList.unitMan3 .unitType02 {color:var(--color6);} .nhasset .inputList.unitMan3 input:placeholder-shown::-webkit-input-placeholder {color:#fff;} .nhasset .inputList.unitMan3 input:placeholder-shown + .unit {display:none;} .nhasset .inputList.unitMan3.on:not(.error) .unitType02 {color:var(--point1);font-weight:bold;} .nhasset .inputList.unitMan3:focus-within .unit {display:block;} .nhasset .inptType .inputList.unitMan3 {border-color:var(--line3)} .nhasset .inptType .inputList.unitMan3 .unitType02, .nhasset .inptType .inputList.unitMan3 input, .nhasset .inptType .inputList.unitMan3 .unit {padding:var(--space12) 0;height:auto;font-size:var(--fontSize16);line-height:1.5;} .nhasset .inptType .inputList.unitMan3 .btnReset {height:auto;} .nhasset .inptType .inputList.unitMan3.error {border-color:var(--point2) !important;background:#fff !important;} .nhasset .inptType .inputList.unitMan3.error ~ .errorTxt {position:inherit;margin-top:5px;} /* [FORM] 폼객체 : 선택영역(라디오/체크) : 소팅 */ .nhasset .roundChk.t1 input[type="radio"] + label, .nhasset .roundChk.t1 input[type="checkbox"] + label {padding:3px 14px;border:solid 1px #ebebec;background-color:#fff;line-height:1.85;white-space:nowrap;} .nhasset .roundChk.t1 input:checked + label {background-color:var(--point1);border-color:var(--point1);color:#fff;} .nhasset .roundChk.t1 input:checked + label:after {border-color:var(--point1);} .nhasset .roundChkWrap.t1 {overflow-x:auto;overflow-y:hidden;} .nhasset .roundChkWrap.t1 ul {flex-wrap:initial;} .nhasset .roundChkWrap.t1 li {flex:1;flex-shrink:0;} .nhasset .roundChkWrap.t1::-webkit-scrollbar{display:none} .nhasset .boxTypeWrap .roundChkWrap.t1 {margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;} .nhasset .calendarForm + .roundChkWrap.t1 {margin-top:var(--space12)} .nhasset .infoSummary2 + .roundChkWrap.t1 {margin-top:28px} /* [FORM] 폼객체 : 선택영역(라디오/체크) : 박스형 */ .nhasset .boxRadio.wrapType2 {display:flex;flex-wrap:wrap;width:calc(100% + 8px);margin-left:-4px;margin-right:-4px;} .nhasset .boxRadio.wrapType2 .boxRadioInn {width:calc((100%/2) - 8px);margin:8px 4px 0;padding-right:0 !important;padding-left:0;box-sizing:border-box;} .nhasset .boxRadio.wrapType2 .boxRadioInn > span {height:100%;margin-left:0;} .nhasset .boxRadio.wrapType2 .boxRadioInn label {height:100%;letter-spacing:-1px;} .nhasset .boxRadio.wrapType2 .boxRadioInn:first-child, .nhasset .boxRadio.wrapType2 .boxRadioInn:first-child + .boxRadioInn {margin-top:0;} .nhasset .boxRadio.wrapType3 {display:flex;flex-wrap:wrap;width:calc(100% + 8px);margin-left:-4px;margin-right:-4px;} .nhasset .boxRadio.wrapType3 .boxRadioInn {width:calc((100%/3) - 8px);margin:8px 4px 0;padding-right:0 !important;padding-left:0;box-sizing:border-box;} .nhasset .boxRadio.wrapType3 .boxRadioInn > span {height:100%;} .nhasset .boxRadio.wrapType3 .boxRadioInn label {height:100%;letter-spacing:-1px;} .nhasset .boxRadio.wrapType3 .boxRadioInn:first-child, .nhasset .boxRadio.wrapType3 .boxRadioInn:first-child ~ .boxRadioInn:nth-child(2), .nhasset .boxRadio.wrapType3 .boxRadioInn:first-child ~ .boxRadioInn:nth-child(3) {margin-top:0;} /* [FORM] 폼객체 : 선택영역(라디오/체크) : 스위치 */ .nhasset .tgBtnType2.small.t1 {display:block;} .nhasset .tgBtnType2.small.t1 input[type='checkbox'] + label {width:100%;margin-left:0;border-radius:0;background-color:transparent;} .nhasset .tgBtnType2.small.t1 input[type='checkbox'] + label:before {left:calc(100% - 38px);z-index:2;transition:left 0.3s;} .nhasset .tgBtnType2.small.t1 input[type='checkbox'] + label:after {content:'';display:block;position:absolute;top:0;right:0;width:41px;height:19px;border-radius:32px;background:#959595;} .nhasset .tgBtnType2.small.t1 input[type='checkbox'] + label > span {display:flex;align-items:center;height:100%;font-size:var(--fontSize12);color:var(--color4);} .nhasset .tgBtnType2.small.t1 input[type="checkbox"]:checked + label:before {right:0;left:calc(100% - 16px);} .nhasset .tgBtnType2.small.t1 input[type="checkbox"]:checked + label:after {background:var(--point1)} /* [FORM] 폼영역 */ .nhasset .formWrap .inputList data {display:flex;align-items:center;flex:1;padding-left:var(--space20);height:46px;background-color:var(--bg-disabled2)} .nhasset .formWrap .inputList data:not(:empty) {margin-right:-15px;} .nhasset .formWrap .inputList data:not(:empty) + .btnSearch {display:none;} .nhasset .formWrap .inputList data > span {color:var(--color5);} .nhasset .formWrap .inputList data > span + span {margin-left:var(--space8);} .nhasset .formWrap .inputList .btnSearch[data-label] {padding-left:var(--space20);text-align:left;color:var(--color6)} .nhasset .formWrap .inputList .btnSearch[data-label]:before {content:attr(data-label)} .nhasset .formWrap .inputList .btnSearch[data-label] {flex:1;margin-right:-15px;width:100%;background-position:calc(100% - 15px) 50%} .nhasset .formWrap .inputList > a[aria-disabled="true"] {pointer-events:none;} .nhasset .formWrap .inputList > a[aria-disabled="true"] .selectBtn {background-color:var(--bg-disabled2);} .nhasset .formWrap .inputList.disabled .selectBtn {background-color:var(--bg-disabled2);} .nhasset .formWrap .inputVal.t1 {margin-bottom:0;font-weight:900;color:var(--color1);font-size:var(--fontSize20);} .nhasset .formWrap .formTitN .inputVal.t1 {float:none;width:auto;margin-left:auto;} .nhasset .formWrap .formTitN .tooltipCont {left:0;right:0 !important;} .nhasset .formWrap .formTxt {margin:var(--space6) 0 var(--space20);font-size:var(--fontSize14);color:var(--color4);line-height:1.5;word-break:keep-all;} .nhasset .formWrap .formTxt > em {display:block;font-size:var(--fontSize14);} .nhasset .formWrap .formTxt > em + span {display:block;margin-top:var(--space4);color:var(--color5);font-size:var(--fontSize12);} .nhasset .formWrap .mes1 {margin-top:var(--space8);color:var(--color4);font-size:var(--fontSize12);text-align:right;} .nhasset .formWrap .mes2 {position:relative;padding-left:var(--size8);margin-top:var(--space10);color:var(--color5);font-size:var(--fontSize12);} .nhasset .formWrap .mes2:before {content:'';display:block;position:absolute;top:var(--size8);left:0;width:var(--size3);height:var(--size3);border-radius:50%;background-color:var(--color5);} .nhasset .formWrap .area {margin:var(--space20) 0;padding:var(--space20);background-color:var(--bg2);border-radius:8px;} .nhasset .formWrap .area:last-child {margin-bottom:0;} .nhasset .formWrap .area .form {margin:var(--space20) 0;} .nhasset .formWrap .area .form > dt {font-size:var(--fontSize15);font-weight:bold;} .nhasset .formWrap .area .form > dd {margin-top:var(--space12)} .nhasset .formWrap .area .form:first-child {margin-top:0;} .nhasset .formWrap .area .form:last-child {margin-bottom:0;} .nhasset .formWrap .form > div {margin-top:var(--space20)} .nhasset .formWrap .form > div:first-child {margin:0} .nhasset .formWrap .form1 {display:flex;align-items:center;flex-wrap:wrap;} .nhasset .formWrap .form1 .formTit {margin-top:0;margin-bottom:0;} .nhasset .formWrap .form1 .inputText1 {align-self:center;margin-left:auto;} .nhasset .formWrap .form1 .inputText1 > [maxlength="3"] {width:clamp(38px, 3.8rem, 58px);} .nhasset .formWrap .form1 .inputText1 > [maxlength="2"] {width:clamp(28px, 2.8rem, 58px);} .nhasset .formWrap .form1 .errorTxt {width:100%;text-align:right;} .nhasset .formWrap .areaToggle2 {margin-top:var(--space12)} .nhasset .formWrap.line {margin-top:calc(var(--space24) + 4px) !important;padding-top:var(--space20);border-top:1px solid var(--line2)} .nhasset .formWrap.line .formTitN {display:flex;justify-content:space-between;align-items:center;margin:0;font-size:var(--fontSize16)} .nhasset .formWrap.t1 .formTitN {justify-content:normal} .nhasset .boxTypeWrap .formWrap.t1:first-child {margin-top:0;} .nhasset .boxTypeWrap .formWrap.t1 .cal .inputList {margin-top:0;} .nhasset .boxTypeWrap .formWrap.t1 .cal .inputList input[type="text"]:read-only {letter-spacing: -0.01em;} .nhasset .boxTypeWrap .formWrap.t1 .titListBox > ul > li {position:relative;} .nhasset .titListBox > ul > li .formTit {margin-top:0;} .nhasset .titListBox > ul > li .formTit + .boxRadio .listPsion:first-child {margin-top:0;} .nhasset .titListBox .formTitN .tooltipWrap {margin-left:4px;} /* [FORM] 검색영역 */ .nhasset .addrSrch .errorTxt {position:inherit;margin-top:5px;} /* [FORM] 약관동의 */ .nhasset [data-toggle="wrap"] .listLinkWrap2 li:not(:last-child):after {content: '';display:block;border-bottom:1px solid var(--line3);padding-top:29px;margin-left:var(--space20-t1);margin-right:var(--space20-t1)} .nhasset [data-toggle="wrap"] .listLinkWrap2 .agreeSubcont {position:relative;margin-bottom:-30px;} .nhasset [data-toggle="wrap"] .listLinkWrap2 .agreeSubcont:after {content: '';display:block;position:absolute;bottom:0;left:var(--space20-t1);right:var(--space20-t1);height:1px;border-bottom:2px solid #fff;} .nhasset [data-toggle="wrap"] .listLinkWrap2 .agrLinkType {position:relative;} .nhasset [data-toggle="wrap"] .listLinkWrap2 .agrLinkType [data-toggle="btn"] {position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;color:transparent;} .nhasset [data-toggle="wrap"] .listLinkWrap2 .agrLinkType a {position:relative;z-index:2;} .nhasset [data-toggle="wrap"] .listLinkWrap2 [data-toggle="con"] {display:none;} /* [INFO] 수집동의 */ .nhasset .assSetList.t1 {margin-top:var(--space20);border:1px solid var(--line3);border-radius:5px;} .nhasset .assSetList.t1 .listTop .tit {padding:var(--space16) var(--space18) var(--space12);border-bottom-color:var(--line3);font-size:var(--fontSize16);font-weight:700;} .nhasset .assSetList.t1 .listType_table {margin:0;padding:var(--space16) var(--space18);} .nhasset .assSetList.t1 .listType_table.type5 .listbox .list_item {margin-top:var(--space4);margin-bottom:0;font-weight:700;} .nhasset .assSetList.t1 .listType_table.type5 .listbox .list_item .chkRadio {font-weight:400;} .nhasset .assSetList.t1 .listType_table.type5 .listbox + .listbox {margin-top:var(--space16);} .nhasset .noticeWrap + .assSetList.t1 {margin-top:var(--space28)} /* [BOX] 박스영역 : 흰색배경(기본) */ .nhasset .boxTypeWrap .areaInfo2 {margin:0 var(--space20-t1) 30px;border-bottom:1px solid var(--line3);} .nhasset .boxTypeWrap .areaInfo2.t1 {position:relative;border-bottom:none;border-radius:0;} .nhasset .boxTypeWrap .areaInfo2.t1:after {content:'';position:absolute;left:0;bottom:-10px;width:100%;height:10px;border-radius:10px 10px 0 0;box-shadow:0px -10px 0px 10px #6ec0ce;} /* 추가 260115 [MD2601_005]NH스마트뱅킹 마이데이터 앱접근성 대응 16번 명도대비 */ .nhasset .boxTypeWrap .areaInfo2.t1.v2 {background-color:#368E9D;} .nhasset .boxTypeWrap .areaInfo2.t1.v2:after {box-shadow:0px -10px 0px 10px #368E9D;} /* // 추가 260115 [MD2601_005]NH스마트뱅킹 마이데이터 앱접근성 대응 16번 명도대비 */ .nhasset .boxTypeWrap .areaInfo2.t1 ~ .noResultWrap {margin-top:0;margin-bottom:-4px;padding-top:40px;} .nhasset .boxTypeWrap .areaInfo2.t2 {margin:var(--space8) 0 !important;border-bottom:none;} .nhasset .boxTypeWrap > .areaInfo2:first-child {margin-top:var(--space24-t1);} .nhasset .boxTypeWrap .prodListTit.img18 {overflow:visible;} .nhasset .boxTypeWrap .prodListTit.img18:after {content:'';display:block;position:absolute;top:22px;right:0;width:75px;height:70px;background:url('../images/img_prodListTitimg19.png') no-repeat 0 0;background-size:100% auto} .nhasset .boxTypeWrap.t1 {position:relative;overflow:visible;} .nhasset .boxTypeWrap.t1 .hide {position:absolute;opacity:0;} .nhasset .boxTypeWrap.t1 .defTit:first-child, .nhasset .boxTypeWrap.t1 .areaInfo2 {margin-top:0;} .nhasset .boxTypeWrap.t1 > div {margin-top:var(--space20);} .nhasset .boxTypeWrap.t1 > div:first-child {margin-top:0 !important;} .nhasset .boxTypeWrap.t1 > div:last-child {margin-bottom:0;} .nhasset .boxTypeWrap.t1 > .link {overflow:hidden;position:absolute;top:var(--space20);right:var(--space8);width:32px;height:32px;color:transparent;font-size:1px;} .nhasset .boxTypeWrap.t1 > .link:before {content:'';display:block;position:absolute;top:50%;left:50%;margin:var(--space6-t1) var(--space4-t1);width:8px;height:12px;background:url('../images/arr_GradeR_2.png') no-repeat 0 0;background-size:100% auto;} .nhasset .boxTypeWrap.t1 .defTit, .nhasset .boxTypeWrap.t1 .formTit {margin-top:0;} .nhasset .boxTypeWrap.t1 .formWrap.msaeType {padding:0;} .nhasset .boxTypeWrap.t1 a {margin-top:0;} .nhasset .boxTypeWrap.t1 .tooltipCont {right:var(--space16);width:auto !important;} .nhasset .boxTypeWrap.t1 .infoBox2 .tooltipCont {left:0;right:0;} .nhasset .boxTypeWrap.t1 div.noResultWrap {margin:var(--space20) 0 !important;} .nhasset .boxTypeWrap.t1 div.noResultWrap:not(:first-child) {margin-top:40px !important;} .nhasset .boxTypeWrap.t1[role="button"] .defSubTit1 {position:relative;} .nhasset .boxTypeWrap.t1[role="button"] .defSubTit1:after {content: '';display:block;position:absolute;top:50%;right:0;margin-top:-6px;width:8px;height:12px;background:url('../images/arr_GradeR_2.png') no-repeat 0 0;background-size: 100% auto;} .nhasset .boxTypeWrap.t2 {display:flex;align-items:center;min-height:80px;padding:var(--space12) 38px var(--space12) var(--space20);} .nhasset .boxTypeWrap.t2 .iconTxt2 {margin-left:var(--space8);} /* 간격 */ .nhasset .defTit + .boxTypeWrap.t2 {margin-top:var(--space16);} .nhasset .areaBanner1[data-swiper-type="list1"] + .boxTypeWrap.t1 {margin-top:0;} /* [BOX] 박스영역 : 회색배경(border-radius:5px) */ .nhasset .grayBgLine.t1 {padding:var(--space24) var(--space20);} .nhasset .grayBgLine.t1 > .detailList {padding:0;} .nhasset .grayBgLine.t1 > .detailList > li .tit {font-size:var(--fontSize13);} .nhasset .grayBgLine.t1 > .detailList > li .value {font-size:var(--fontSize13);color:var(--color1);font-weight:bold;} .nhasset .grayBgLine.t1 .subTxt {margin-top:0;word-break:keep-all;} .nhasset .grayBgLine.t1 .subTxt > strong {color:var(--color1);font-weight:bold;} .nhasset .grayBgLine.t1 .subTxt + .subTxt {margin-top:var(--space6);} .nhasset .txtSub1 {padding:var(--space24) var(--space20);background:#f8f8f8;border-radius:5px;} .nhasset .txtSub1 p {margin-top:0;word-break:keep-all;font-size:var(--fontSize14);color:var(--color4);} .nhasset .txtSub1 p > strong {color:var(--color1);font-weight:bold;} .nhasset .txtSub1 p + p {margin-top:var(--space6);} /* [BOX] 박스영역 : 회색배경(border-radius:8px) */ .nhasset .grayBox.t1 {margin-top:28px;margin-bottom:0;} .nhasset .grayBox.t1 .listDot > li {font-size:var(--fontSize12)} .nhasset .grayBox.t1 .listDot strong {color:var(--color1);} /* [BANNER] 이벤트배너 */ .nhasset .bannerSwiperImgtype.ent01 .swiper-slide a > img {border-radius:7px;} /* [TOOLTIP] 툴팁 */ .nhasset .tooltipWrap .tooltipCont > dl {padding-right:var(--space20)} .nhasset .tooltipWrap .tooltipCont > dl > dt {font-weight:900;margin-bottom:var(--space4);} .nhasset .tooltipWrap .tooltipCont > dl > dd {font-weight:400 !important;font-size:var(--fontSize12);} .nhasset .tooltipWrap .tooltipCont > dl > dd + dt {margin-top:var(--space16);} .nhasset .tooltipWrap .tooltipCont > dl > dd > ul > li {position:relative;margin-left:0;margin-top:var(--space4);padding-left:var(--size8);font-size:var(--fontSize12);color:var(--color4);} .nhasset .tooltipWrap .tooltipCont > dl > dd > ul > li:before {content:'';display:block;position:absolute;top:var(--size8);left:0;width:3px;height:3px;border-radius:50%;background-color:var(--color4);} .nhasset .tooltipWrap .popBul li .listDash {margin-top:var(--space4)} .nhasset .tooltipWrap .popBul li .listDash > li {margin-bottom:0;margin-top:0;color:var(--color4)} /* [TOGGLE] 토글 */ .nhasset .boxTypeToggle.t1 .boxTitWrap a {display:flex;align-items:center;padding:var(--space16) 38px var(--space16) var(--space20);min-height:80px;} .nhasset .boxTypeToggle.t1 .boxTitWrap a .sub {margin-left:auto;padding-left:var(--space8);white-space:nowrap;} .nhasset .boxTypeToggle.t1 .boxTitWrap a .iconTxt2 {margin-left:var(--space8);} .nhasset .boxTypeToggle.t1 .boxTitWrap .tit {display:flex;align-items:center;} .nhasset .boxTypeToggle.t1 .dataValue, .nhasset .boxTypeToggle.t1 .dataValue + span, .nhasset .boxTypeToggle.t1 .won {font-weight:900;} .nhasset .boxTypeToggle.t1 .detailList .value span.won, .nhasset .boxTypeToggle.t1 .detailList .value .dataValue {font-size:inherit;font-weight:900;color:var(--color1)} .nhasset .boxTypeToggle.t1 .info1 {display:flex;position:relative;padding-top:var(--space20);margin-top:var(--space20);} .nhasset .boxTypeToggle.t1 .info1:before {content:'';display:block;position:absolute;top:0;left:var(--space20-t1);right:var(--space20-t1);height:1px;background-color:var(--line3);} .nhasset .boxTypeToggle.t1 .info1 > dt, .nhasset .boxTypeToggle.t1 .info1 > dd {width:50%;} .nhasset .boxTypeToggle.t1 .info1 > dt {color:var(--color4);} .nhasset .boxTypeToggle.t1 .info1 > dd > div {margin-left:-100%;} .nhasset .boxTypeToggle.t1 .info1 .data1 {display:block;text-align:right;font-weight:900;color:var(--point5);} .nhasset .boxTypeToggle.t1 .info1 .data1.c1 {color:var(--point4);} .nhasset .boxTypeToggle.t1 .info1 .data1.c2 {color:#d64b4e;} .nhasset .boxTypeToggle.t1 .info1 .areaChart2.t2 {margin-bottom:0;margin-top:var(--space12);--el-top:9px + var(--size3)} .nhasset .boxTypeToggle.t1 .grayBgLine {background-color:var(--bg4);margin-top:var(--space24)} .nhasset .boxTypeToggle.t1 .grayBgLine .detailList .value {font-weight:900;color:var(--color1);} .nhasset .boxTypeToggle.t1 .toggleCont {padding-top:var(--space24);padding-bottom:var(--space24);} .nhasset .boxTypeToggle.t1 .toggleCont .listDot > li {margin-top:var(--space4);font-size:var(--fontSize12);line-height:1.6;} /* [LOADING] 로딩 : 신용점수올리기 */ .nhasset .assetLoadingWrap.type03 {overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:0;padding-bottom:0;height:calc(100vh - 40px);background:none;} .nhasset .assetLoadingWrap.type03 .title {font-weight:900;} .nhasset .assetLoadingWrap.type03 .assetLoadingValue {font-weight:700;} .nhasset .assetLoadingWrap.type03 .lottie {position:relative;margin-top:50px;width:110px;height:154px;} .nhasset .assetLoadingWrap.type03 .lottie:before {content:'';display:block;position:absolute;left:50%;margin-left:-164px;width:328px;height:160px;background:url('../images/creditscore/bg_star_656.png') no-repeat 0 0;background-size:100% auto;} .nhasset .container .assetLoadingWrap.type03 {background-color:#fff;position:fixed;top:0;left:0;right:0;bottom:0;z-index:5000;height:auto;} /* [LAYERPOPUP] 팝업 */ .nhasset.popWrap[class*="slidePop"] .popInner .popCont {overflow:auto;} .nhasset.popWrap[class*="slidePop"] .popInner .popCont.popScroll {height:auto !important;max-height:calc(100vh - 300px);} .nhasset .popBtnWrap .popBtn > a.btnPressDefault {background-color:#666;} /* [MD2407_055] 색상 재정의 */ /* [LAYERPOPUP] 약관 : 통합테스트 수정 */ .nhasset.popWrap.fullLayerPop .popInner .popCont {overscroll-behavior:none;} /* IOS : 바운스 스크롤 삭제 */ .nhasset.popWrap.fullLayerPop .popInner .popCont.termPop .termContentsArea .term_box_wrap {overflow-y:auto;} .nhasset.popWrap.fullLayerPop .popInner .popCont.termPop .termContentsArea .term_box_wrap iframe {display:block;} .nhasset.popWrap.fullLayerPop .popInner .popCont.termPop .termContentsArea .term_box_wrap:before, .nhasset.popWrap.fullLayerPop .popInner .popCont.termPop .termContentsArea .term_box_wrap:after {content:'';display:block;position:absolute;top:0;bottom:0;z-index:1;width:40px;background:transparent;} .nhasset.popWrap.fullLayerPop .popInner .popCont.termPop .termContentsArea .term_box_wrap:before {left:var(--space20);} .nhasset.popWrap.fullLayerPop .popInner .popCont.termPop .termContentsArea .term_box_wrap:after {right:var(--space20);} /* [LAYERPOPUP] 날짜선택 : 통합테스트 수정 */ .nhasset .yearSet:before {left:0;} /* IOS : BG 비노출 수정 */ .nhasset .yearSet.dayPicSet .yearsetLft, .nhasset .yearSet.dayPicSet .yearsetRht, .nhasset .yearSet.dayPicSet .yearsetDay {overscroll-behavior:none;} /* IOS : 바운스 스크롤 삭제 */ /* ************************************  * [AS-IS] 페이지별 스타일 재정의  * ************************************/ /* [PAGE] 통합메인 : header영역 변경 : 통합테스트 수정 */ .nhassetMain .nhasset .header {background-color:#fff;} .nhassetMain .nhasset .header .mainTopLogo {background:url('../images/logoMydata2.png') no-repeat 50% 20px;background-size:100px auto;} .nhassetMain .nhasset .header .btnGoHome:before {width:18px;height:19px;top:17.5px;left:7px;background: url(../images/common/sp_com_new.png) no-repeat -251px -112px;background-size: auto 250px;} .nhassetMain .nhasset .header .btnNav:before {background:url(../images/common/sp_com_new.png) no-repeat -273px -112px;background-size:auto 250px;} .nhassetMain .nhasset .gnb {background-color:#fff;border-bottom:1px solid #e1e1e1;} .nhassetMain .nhasset .gnb a {color:#888;font-weight:bold;} .nhassetMain .nhasset .gnb .menuStar a .menuStarInner {background:url(../images/icon_menu_star_gray.png) center /contain no-repeat;} .nhassetMain .nhasset .container .mainBg {display:none;background-color:transparent;} .nhassetMain .nhasset .mainNoticeSwiper {margin-top:var(--space20);} /* [PAGE] 통합메인 : 배너 */ .nhasset .mainBttomBannerWrap > ul > li[class*="img"] {position:relative;background-color:var(--el-bg-color);} .nhasset .mainBttomBannerWrap > ul > li[class*="img"]:after {content:'';display:block;position:absolute;bottom:var(--space20);right:var(--space12);width:55px;height:55px;background:var(--bgImg3) var(--el-background-position);background-size:var(--bgSize3);} .nhasset .mainBttomBannerWrap > ul > li.img1 { --el-bg-color:#e2f5f0; --el-background-position:-249px -166px; } .nhasset .mainBttomBannerWrap > ul > li.img1 .title > span {font-size:var(--fontSize12);} .nhasset .mainBttomBannerWrap > ul > li.img1 .title > strong {margin-left:2px;font-size:var(--fontSize20);} .nhasset .mainBttomBannerWrap > ul > li.img2 { --el-bg-color:#d8f3fe; --el-background-position:-310px -166px; } /* [PAGE] 소비 : 서브메인 : 통합테스트 수정 */ .nhasset .filterArea .txtt2 .assetSet {margin-top:-3px;} .nhasset .csChartWrap {overflow:visible;} .nhasset .csChartWrap .swiper-container {flex:1;} /* [PAGE] 소비 : 소비패턴 */ .nhasset .csTopsellWrap.t1 {position:relative;margin-bottom:0;min-height:80px;text-align:left;} .nhasset .csTopsellWrap.t1 .label {margin-left:0;font-weight:bold;} .nhasset .csTopsellWrap.t1 .price {position:relative;margin-top:var(--space6);padding:0 84px calc(clamp(24px, 2.4rem, 36px) + 2px) var(--space8);font-size:var(--fontSize16);} .nhasset .csTopsellWrap.t1 .price .dataValue {position:absolute;bottom:0;left:0;z-index:1;padding:0 var(--space8);font-weight:900;} .nhasset .csTopsellWrap.t1 .price .dataValue:after {content:'';display:block;position:absolute;bottom:-2px;left:0;right:0;z-index:-1;height:9px;background-color:#d6f1ea;border-radius:5px;} .nhasset .csTopsellWrap.t1 .ico {position:absolute;top:0;right:0;margin:0;} .nhasset .csTopsellWrap.t1 .ico:after {display:none;} .nhasset .csTopsellWrap.t1 .mes {margin-top:var(--space24);background-color:#ebf8f4;border-radius:5px;font-size:var(--fontSize12);font-weight:bold;} .nhasset .csTopsellWrap.t1 .mes, .nhasset .csTopsellWrap.t1 .mes > .link {display:flex;align-items:center;padding:var(--space4) var(--space20);min-height:56px;} .nhasset .csTopsellWrap.t1 .mes > .link {position:relative;margin:var(--space4-t1) var(--space20-t1);padding-right:60px;width:calc(100% + (var(--space20) * 2));} .nhasset .csTopsellWrap.t1 .mes > .link:before {content:'';display:block;position:absolute;top:50%;right:var(--space20);margin-top:-16px;width:32px;height:32px;background:#fff;border-radius:50%;} .nhasset .csTopsellWrap.t1 .mes > .link:after {content:'';display:block;position:absolute;top:50%;right:28px;margin-top:-8px;width:16px;height:16px;background:var(--bgImg1) -64px 0;background-size:var(--bgSize1);} .nhasset .csTopsellWrap.t1 + div .cardList.db > li:first-child {margin-top:var(--space20);border-top:1px solid #e1e1e1;} .nhasset .defSubTit2 + .csTopsellWrap.t1 {margin-top:30px;} .nhasset .boxTypeWrap.pb0 .csTopsellWrap.t1 {padding-bottom:var(--space20);} .nhasset .boxTypeWrap.pb0 .csTopsellWrap.t1 + div .cardList.db > li:first-child {margin-top:0;} /* [PAGE] 소비 : 상세내역 */ .nhasset .csMoreDetailWrap.t1 {padding-top:28px;} .nhasset .csMoreDetailWrap.t1 .data1 > dl {display:flex;align-items:center;margin-bottom:var(--space20);padding:0 var(--space20);height:50px;background-color:#ffffff;border-radius:5px;} .nhasset .csMoreDetailWrap.t1 .data1 > dl > dt {flex-shrink:0;} .nhasset .csMoreDetailWrap.t1 .data1 > dl > dd {flex:1;overflow:hidden;padding-left:var(--space24);text-align:right;white-space:nowrap;text-overflow:ellipsis;font-weight:bold;} .nhasset .csMoreDetailWrap.t1 .data1 + .data1, .nhasset .csMoreDetailWrap.t1 .data2 + .data1 {margin-top:var(--space20);padding-top:calc(var(--space24) - 1px);border-top:1px solid #dedede} .nhasset .csMoreDetailWrap.t1 .data2 > dl {display:flex;align-items:flex-start;} .nhasset .csMoreDetailWrap.t1 .data2 > dl > dt {color:var(--color4);} .nhasset .csMoreDetailWrap.t1 .data2 > dl > dd {flex:1;padding-left:var(--space24);text-align:right;} .nhasset .csMoreDetailWrap.t1 .data2 + .data1 {margin-top:var(--space24)} /* [PAGE] 소비 : 카드혜택비교 */ .nhasset .swCardComp.t1 .cardInfoWrap {position:relative;} .nhasset .swCardComp.t1 .cardInfoWrap .cardInfoArea {margin-right:91px;} .nhasset .swCardComp.t1 .cardInfoWrap .cardInfoArea > strong {font-size:var(--fontSize15);font-weight:900;} .nhasset .swCardComp.t1 .cardInfoWrap .cardImgArea {position:absolute;top:14px;right:-14px;transform:rotate(90deg);} .nhasset .swCardComp.t1 .cardHashtag, .nhasset .swCardComp.t1 .cardReview {margin-right:91px;} .nhasset .swCardComp.t1 .cardHashtag > span {margin-right:var(--space4)} /* [PAGE] 플래너 : 금융플래너 : 통합테스트 수정 */ .nhasset .boxTypeWrap.plannerDetail .detailList .value {flex-shrink:0 !important;} /* [PAGE] 컨설팅 : 연금진단 */ .nhasset .penstionMainBox .areaInfo1.t1 {margin:var(--space24) var(--space6) 0;width:100%;} .nhasset .productSwiperCont .swiper-slide {transform:translateZ(0)} /* [PAGE] 설정/관리 : 자산 사용 관리 */ .nhasset .psAssetList li .assetSelectGroup .subject {flex-wrap:wrap;} .nhasset .psAssetList li .assetSelectGroup .subject .tooltipWrap {margin-top:calc(var(--size5) *-1);} .nhasset .psAssetList li .assetSelectGroup .subject .tooltipWrap .tooltipCont {left:var(--space20-t1);} .nhasset .psAssetList li .assetSelectGroup .subject > label > .totalAmnt .dataValue, .nhasset .psAssetList li .assetSelectGroup .subject > label > .totalAmnt .won {font-weight:900;} .nhasset .psAssetList li .assetSelectGroup .subject > label:nth-last-child(3):nth-child(2) .totalAmnt, .nhasset .psAssetList li .assetSelectGroup .subject > label:nth-last-child(2):nth-child(2) .totalAmnt {padding-right:var(--space18);} .nhasset .psAssetList li .assetSelectGroup .subject .areaToggle1 {margin:var(--space20-t1) -19px;width:calc(100% + 38px)} .nhasset .psAssetList li .assetSelectGroup .subject .areaToggle1 [data-toggle="btn"]{margin-bottom:var(--space20);} .nhasset .psAssetList li .assetSelectGroup .subject .areaToggle1 em.won {color:#111;} .nhasset .psAssetList li .assetSelectGroup .subject .areaToggle1 .detailList li {border:0;} .nhasset .psAssetList li .assetSelectGroup .subject .areaToggle1 .detailList li + li {margin-top:var(--space12);} .nhasset .psAssetList li .assetSelectGroup .toggleBtn {margin-right:-5px} .nhasset .psAssetList li .subject input[type='checkbox'] + label {width:fit-content;flex:1;} .nhasset .psAssetList li .subject input[type='checkbox'] + label ~ .BookmarkBtn {align-self:flex-start;position:static;margin:-2px 0 -2px -42px;padding:4px 0 0 5px} .nhasset .psAssetList li .subject input[type='checkbox'] + label + .areaToggle1 + .BookmarkBtn {position:absolute;right:0;top:18px;margin:0;padding:2px 0 2px 5px} .nhasset .psAssetList li .subject input[type='checkbox'] + label + .areaToggle1 + .BookmarkBtn .listBookmark {display:inline-block;background:url('../images/ico_bookmark_disable.png') no-repeat center center;background-size:auto 18px;width:18.5px;height:18px;flex:0 0 15px} .nhasset .psAssetList li .subject input[type='checkbox'] + label + .areaToggle1 + .BookmarkBtn .listBookmark.active {background-image:url('../images/ico_bookmark_able.png');} .nhasset .psAssetList li:last-child .areaToggle1 [data-toggle="con"] {border-radius:0 0 10px 10px;} /* [PAGE] 헬스케어 : 요양병원/주말약국찾기 목록 */ .nhasset .adrContWrap .adrList {align-items:flex-end;} .nhasset .adrContWrap .adrList .txtBox dt {margin-bottom:var(--space6);} .nhasset .adrContWrap .adrList .txtBox dd {margin-top:2px;} .nhasset .adrContWrap .adrList .txtBox .numTxt {margin-top:var(--space6);} .nhasset .adrContWrap .adrList .btnBox {display:flex;flex-direction:column;align-items:flex-end;} .nhasset .adrContWrap .adrList .btnBox > .contBtn01.green {background-color:var(--point1);color:#fff !important;} .nhasset .adrContWrap .data1 {display:flex;} .nhasset .adrContWrap .data1 > .iconTxt1 {margin-right:var(--space4)} .nhasset .adrContWrap .data1 > span:not(:first-child) {margin-left:var(--space4);} .nhasset .adrContWrap .data1 > span + span:not(:empty):before {content:' : ';} .nhasset .adrContWrap .nodata {margin-bottom:26px;padding-top:106px;background:url('../images/icon_nodata.png') no-repeat 50% 50px;background-size:32px;text-align:center;font-size:var(--fontSize14);color:var(--color4);} /* [PAGE] 헬스케어 : 지역선택 팝업 */ .nhasset .areaTabWrap {border-top:1px solid #ebebeb;} .nhasset .areaTabWrap .tabContWrap.type06 .selChkBox li input[type='radio'] {position:absolute;width:100%;height:100%;right:0;top:0;border-radius:0;opacity:0;} /* [PAGE] 생활편의 : 친구초대 */ .nhasset .boxTypeWrap.blue img {vertical-align:top;} .nhasset .boxTypeWrap.blue .infoCont1 {box-shadow:none;margin-top:0;} .nhasset .boxTypeWrap.blue .infoCont1 .mainTit {margin-bottom:var(--space20);font-size:var(--fontSize14);} .nhasset .boxTypeWrap.blue .infoCont1 .detailList {font-size:var(--fontSize13);} .nhasset .underFlexList li {padding-left:0;padding-right:0;} .nhasset .underFlexList li:first-child {padding-top:25px;} .nhasset .underFlexList li .under {margin-bottom:10px;} .nhasset .numList2 li:last-child {padding-bottom:0;} /* [PAGE] MY : MY정보 (상단영역 때문에 페이지 좌우 스크롤 생기는 현상 수정) */ .nhasset .topInfoWrap {margin-left:-16px;margin-right:-16px;} /* [PAGE] 이벤트 : 올리찾기 */ .nhasset .btnSet1 {display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;} .nhasset .findOlly {opacity:0;z-index:1100;} .nhasset .findOlly[class*="pos"] {opacity:1;transition:opacity 0.5s;} .nhasset .findOlly .findImg {width:75px;height:75px;} .nhasset .findOlly.pos01, .nhasset .findOlly.pos04, .nhasset .findOlly.pos06, .nhasset .findOlly.pos08 {left:20px;} .nhasset .findOlly.pos03, .nhasset .findOlly.pos05, .nhasset .findOlly.pos07, .nhasset .findOlly.pos10 {right:20px;} .nhasset .swiper-slide .findOlly.pos01, .nhasset .swiper-slide .findOlly.pos02, .nhasset .swiper-slide .findOlly.pos03 {top:80px;bottom:auto;} .nhasset .swiper-slide .findOlly.pos04, .nhasset .swiper-slide .findOlly.pos05 {top:calc(100vh - 400px);bottom:auto;} .nhasset .swiper-slide .findOlly.pos06, .nhasset .swiper-slide .findOlly.pos07 {top:calc(100vh - 290px);bottom:auto;} .nhasset .swiper-slide .findOlly.pos08, .nhasset .swiper-slide .findOlly.pos09, .nhasset .swiper-slide .findOlly.pos10 {top:calc(100vh - 170px);bottom:auto;} .nhasset .swiper-slide .findOlly.pos01, .nhasset .swiper-slide .findOlly.pos04, .nhasset .swiper-slide .findOlly.pos06, .nhasset .swiper-slide .findOlly.pos08 {left:10px;} .nhasset .swiper-slide .findOlly.pos03, .nhasset .swiper-slide .findOlly.pos05, .nhasset .swiper-slide .findOlly.pos07, .nhasset .swiper-slide .findOlly.pos10 {right:10px;} /* ************************************  * [AS-IS] 소비 카테고리 이미지 재정의 * BG없는 카테고리 이미지 사용할 경우 대비  * ************************************/ .nhasset .selectCerti li input[type="radio"] + label .logoArea img, .nhasset .priceSetList .cate .imgWrap img, .nhasset .cateListHori .categoryWrap label img, .nhasset .cardList .imgWrap.icoCate .img img, .nhasset .csSubsellWrap .csSubsellImgWrap .imgWrap[class*="icoCate"] .img img, .nhasset .inoutListWrap li div.isCategory .imgWrap[class*="icoCate"] .img img, .nhasset .briefTit [class*="icoCate"] .img img, .nhasset .totalBalance [class*="icoCate"] .img img, .nhasset .compareList .imgWrap img {border-radius:50%;background-color:#F2F4F8;} .nhasset .selectAll .selectCerti li input[type="radio"] + label .logoArea img, .nhasset .selectCerti.as li input[type="radio"] + label .logoArea img, .nhasset .selectCerti.ob li input[type="radio"] + label .logoArea img {border-radius:0;background-color:transparent;} /* ************************************  * [AS-IS] 키패드 재정의 : 하단버튼 미노출 * 바닥페이지 : 키패드가 올라왔을때 position:relative적용 * IOS 팝업 : 높이값 재정의  * ************************************/ /* AOS 바닥페이지 */ html {--footer-pading-top:0px} .keypad body:not(.fixControl) .areaBtnDefault {margin-bottom:-95px;top:var(--footer-pading-top);} .keypad body .areaBtnDefault {position:relative;margin:20px -16px -95px -16px;width:calc(100% + 32px) !important;} /* [MD2408_062] */ .keypad.keypad-off body .areaBtnDefault {position:fixed !important;width:100% !important;top:auto !important;margin:0 !important} /* iOS 바닥페이지 */ [data-keypad="on"] .fixControl .areaBtnDefault {display:none !important;} [data-keypad="on"] .fixControl .container {padding-bottom:55px !important;} .iOS .fixControl .wrapper.nhasset {position:relative;} .iOS .fixControl .areaBtnDefault {margin-top:20px !important;padding-top:10px !important;} .iOS .fixControl .areaBtnDefault.pos {position:absolute;margin:0 !important;width:100% !important;} /* [MD2408_062] */ .iOS .fixControl .infoStep1 ol > li[aria-current="step"]:before {position:absolute;top:0;left:0;} /* iOS 팝업 */ .iOS .fixControl [class*='slidePop'] .popInner.ios-focus {height:calc(var(--html-height) + 60px) !important;} .iOS .fixControl .fullLayerPop .popCont.ios-focus {height:calc(var(--html-height) - 50px) !important;} /* ************************************  * [AS-IS] 약관 아이콘 추가  * ************************************/ .nhasset .icoBrdChart, .nhasset .icoBrdUnique {background:var(--bgImg1);background-size:var(--bgSize1);} .nhasset .icoBrdChart {background-position:-192px -32px;} .nhasset .icoBrdUnique {background-position:-160px -32px;} /* ************************************  * [접근성_2024] 접근성이슈로 인한 수정  * ************************************/ /* [공통] header a태그 삭제 후 선택자 추가 */ .header h1 .pageTit{font-size:inherit;font-family:"NotoKR" !important;display:block;height:50px;letter-spacing:-.5px;line-height:50px;color:#111;text-overflow:ellipsis;white-space:nowrap;overflow:hidden} /* [공통] input 접근 가능 및 label 접근 제어 */ .nhasset .roundChk input[type="radio"],.nhasset .roundChk input[type="checkbox"], .nhasset .boxRadio input[type="radio"], .nhasset .boxRadio input[type="checkbox"], .nhasset .tgBtnType2 input[type="checkbox"], .nhasset .selectCerti > li input[type="radio"], .nhasset .selectCerti > li input[type="checkbox"] {clip:auto !important;opacity:0;} /* [접근성_2024_2] */ .nhasset .boxRadio input[type="radio"]:first-child + label, .nhasset .boxRadio input[type="checkbox"]:first-child + label, .nhasset .tgBtnType2 label, .nhasset .selectCerti > li input[type="radio"] + label, .nhasset .selectCerti > li input[type="checkbox"] + label{pointer-events:none;} /* [공통] 테이블 caption 접근 가능하게 추가 */ .nhasset [class^="wrapTbl"] table caption {text-indent:0;width:100%;font-size:12px;line-height:1;opacity:0;} /* [공통] 팝업 안에 있을 경우 추가 */ .nhasset .popCont .accList.selectList.isBorder {margin:0;} /* [페이지] 맞춤정보 등록(MSLF2130) : 명도대비 수정 : color 수정(999 > 888)*/ .nhasset .lf.pickList li .rdoCheck .txt em.tit{color:#888;} /* [페이지] 자산연결 */ .nhasset .wrap_bank_check ul li input[type=checkbox] {width:100%;height:100%;} /* [페이지] 자산진단 > 또래비교 : 그래프 선형 구조 변경 [접근성_2024_3] */ .nhasset .msaeAseetItem .baseGraph .lineGraph.gray {overflow:hidden;} .nhasset .msaeAseetItem .baseGraph .lineGraph.gray:before {content:'';display:block;position:absolute;top:0;left:0;width:100vw;height:100%;background:repeating-linear-gradient(45deg, #fff 0px,#fff 3px, #aaa 3px, #aaa 6px)} .nhasset .msaeAseetItem .graphAddEx:not(.graphLegend) .ty01 .bl03:before {background:repeating-linear-gradient(45deg, #fff 0px,#fff 2px, #aaa 2px, #aaa 4px)} /* ************************************  * [디지털금융 시스템개편 대응]  * ************************************/ /* 스마트뱅킹 상단영역 [MD2411_095] 선택자 수정 */ /* [MD2502_010] 자산연결 시 바닥영역 비정상 노출 현상 개선(iOS) 주석처리 */ /* .iOS body.nhd_sbnew:before {content:'';display:block;position:fixed;left:0;right:0;top:-100px;height:100px;background:#fff;z-index:1100;transform:translateZ(0);} .iOS body.nhd_sbnew .wrapper.nhasset {min-height:100%;} */ /* 스마트뱅킹 전체메뉴 숨김 */ .nhd_sbnew .nhasset .header .btnNav {display:none;} /* [MD2502_024] 공통 헤더영역 변경 */ .nhd_sbnew .nhasset .header .btnBack:before {left:6px;top:16px;width:20px;height:20px;background: url(../images/common/ico_back.png) no-repeat center;background-size:20px 20px;} .nhd_sbnew .nhasset .header .btnAlram {position:absolute;top:0;right:45px;width:35px;} .nhd_sbnew .nhasset .header .btnAlram:before {content:'';position:absolute;left:50%;top:50%;margin:-10px;width:20px;height:20px;background: url(../images/common/ico_alram.png) no-repeat center;background-size:20px 20px;} .nhd_sbnew .nhasset .header .btnGoHome {right:9px;width:35px;} .nhd_sbnew .nhasset .header .btnGoHome:before {top:50%;left:50%;margin:-12px;width:24px;height:24px;background: url(../images/common/ico_home.svg) no-repeat center;} .nhasset .pageRefreshWrap .pageRefresInner .btnAlrt {background: url(../images/common/ico_refresh_alert.png)no-repeat center;background-size: 17px auto;flex: 0 0 28px;} /* [MD2503_027] DSR계산기 소득정보입력 현상 개선 */ .keypad .etcBtn {display:none;} /* [PAGE] 자산 : 숨은자산조회 : [MD2408_068] */ .nhasset .accTopInfo.t1 {margin-bottom:8px;} .nhasset .accTopInfo.t1 .accName {font-weight:900;} .nhasset .accTopInfo.t1 .accNum {color:#888;margin-top:3px} .nhasset .accTopInfo.t1:first-child {margin-top:23px;} .nhasset .moreListTit.t1 {display:flex;justify-content:space-between;align-items:center;} .nhasset .moreListTit.t1 > h1, .nhasset .moreListTit.t1 > h2, .nhasset .moreListTit.t1 > h3, .nhasset .moreListTit.t1 > h4, .nhasset .moreListTit.t1 > h5, .nhasset .moreListTit.t1 > h6 {font-size:inherit} .nhasset .moreListTit.t1 .won {font-weight:700;} .nhasset .viewBoxArea .popIRP.openType .agreeTit.t1 {padding:24px 0 12px;display:flex;justify-content:space-between;flex-wrap:wrap;} .nhasset .viewBoxArea .popIRP.openType .agreeTit.t1 strong {font-weight:inherit;} /* [MD2408_068] [숨은자산(휴면예금·휴먼보험금)조회] */ .nhasset .mybannerArea .linkTxt {font-size:var(--fontSize12);color:var(--color1);background: url(../images/arr_right02.png) no-repeat right 10px;background-size: 6px auto;padding-right:10px;} /* MSAS0400P 페이지 삭제 */ /* .nhasset .refundType { background: url(../images/banner/img_refund.png)no-repeat center right;background-size: 59px auto;margin-top:25px;margin-bottom:0;padding-right:70px;min-height:60px;} .nhasset .wayList li{display:flex;align-items:center;padding:22px 19px;border-radius:10px;border:1px solid #ebebeb;margin-top:10px} .nhasset .wayList li .imgWrap {margin-top:6px;} .nhasset .wayList li .imgWrap img {width:32px;vertical-align:top;} .nhasset .wayList li .txtWrap {margin-left:12px;} .nhasset .wayList li .txtWrap p {color:var(--color1);} .nhasset .wayList li .txtWrap .stepList li {display:inline-block;margin-top:0;margin-right:3px;font-size:var(--fontSize12);color:var(--color4);border:none;padding:0;} .nhasset .wayList li .txtWrap .stepList li + li {padding-left:9px;background: url(../images/arr_right09.png)no-repeat 0 center;background-size: 5px 5px;} .nhasset .wayList li .txtWrap span {display:block;font-size:var(--fontSize12);color:var(--color4);} .nhasset .wayList li .txtWrap span.ps {font-size:var(--fontSize10);color:var(--color5);} */ /* MSASM000페이지 휴면예금 */ .nhasset .accList > li .two .imgWrap {margin:5px 8px 0 0;} .nhasset .accList > li .two .imgWrap+.accInfoWrap .titArea {display:block;} .nhasset .accList > li .two .imgWrap+.accInfoWrap .itemTit {display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:var(--fontSize12);color:var(--color4);} .nhasset .accList > li .two .imgWrap+.accInfoWrap .titAreaWrap {align-items:end;} /* MSST5100페이지 즐겨찾기 */ .nhasset .psAssetList li .subject input[type='checkbox'] + label ~ .assetSelectFlag {position:absolute;right:0;top:18px;} /* [MD2507_083] 자산사용관리 '숨은자산' 아이콘 겹치는 오류 수정 */ .nhasset .psAssetList li .subject.hiddenAsset input[type='checkbox'] + label .title {width: calc(100% - 70px);width:-webkit-calc(100% - 70px);} /* [MD2410_086] 숨은자산 해지·잔고이전 */ .addInfoTooltip {position:relative;padding-top:var(--space20);padding-bottom:var(--space20);border-bottom: 1px solid #e1e1e1;} .addInfoTooltip .tooltipCont {left:0 !important;} .nhasset .subMainBanner > a.typeCancel{background-color:#effcf8;} .nhasset .subMainBanner > a > div[class='type09']:before{background:url('../images/icon_layer_msg05.gif') no-repeat top center;background-size:32px 32px} .nhasset .cslayerMsgWrap.link p {background: url(../images/arr_right02.png) no-repeat right center;background-size: 6px auto;padding-right:10px;} .popCont .addTxtWrap {margin:0 16px; padding-bottom:16px;} .popCont .addTxtWrap .addTxt {color:#666;font-size: var(--fontSize14);} .popCont .addTxtWrap + .selectList li {border-top:1px solid #ebebeb;} .popCont .pdtbWrap {padding:16px 0;} .popCont .infoTxt {position: relative;font-size: var(--fontSize13);background: url(../images/common/ico_exclamation.png) no-repeat left center;background-size: 14px;padding-left: 20px;margin-top:0;} .nhasset .accList.selectList.isBorder.cancelSelList {margin:15px 0 0; border:none;} .nhasset .accList.selectList.isBorder.cancelSelList li a {display:flex;} .nhasset .accList.selectList.isBorder.cancelSelList li img {width:32px;vertical-align:middle;} .nhasset .accList.selectList.isBorder.cancelSelList li .accInfoWrap {margin-left:12px;} .nhasset .accList.selectList.isBorder.cancelSelList .toggleWrap {flex-wrap:wrap;width:100%;} .nhasset .accList.selectList.isBorder.cancelSelList .toggleCont {padding:22px 19px;width:100%;border-top:1px solid #ebebeb;} .nhasset .accList.selectList.isBorder.cancelSelList .toggleCont div + div {margin-top:15px;} .nhasset .accList.selectList.isBorder.cancelSelList .toggleCont p {color:var(--color1);font-size:var(--fontSize14);} .nhasset .accList.selectList.isBorder.cancelSelList .toggleCont p:last-child{color:var(--color5);font-size:var(--fontSize12);} .aslayerMsgWrap {border-radius: 10px;background-color:#f2f8ff;padding:12px 12px 12px 20px;margin:10px 0 25px 0;display:flex;align-items:center;} .aslayerMsgWrap:before {content: '';width: 32px;height: 32px;margin-right: 12px;background: url(../images/ico_layer_account01.png)no-repeat center;background-size: cover;overflow: hidden;} .aslayerMsgWrap p {font-size: var(--fontSize12);flex: 1 1 auto;} .aslayerMsgWrap.link p {background: url(../images/arr_right02.png) no-repeat right center;background-size: 6px auto;padding-right:10px;} .detailListBox {border-bottom:1px solid #ebebeb;margin-bottom:25px;} .detailListBox > li {padding-bottom:25px;} .detailListBox > li + li {border-top:1px solid #ebebeb;padding-top:25px;} .detailListBox .bold .tit {color:var(--color1) !important;} .detailListBox .bold .value .dataValue {font-weight:inherit !important;} .nhasset .cancelSelWrap{padding-top:135px;background:url('../images/contents/img_cancel_succed.gif') top center /123px 120px no-repeat;font-weight:900;text-align:center;font-size: var(--fontSize20);} .nhasset .areaBanner2.t5 a {padding-right:95px;margin-bottom:0;background-color:#d1edfe;} .nhasset .areaBanner2.t5 a:after {content:'';display:block;position:absolute;top:50%;margin-top:-20px;right:20px;width:41px;height:42px;background: url('../images/bg_banner01.png') no-repeat 0 0 / 41px 42px;} .nhasset .areaBanner2.t5 span {font-size: var(--fontSize13);color:var(--color4);font-weight:normal !important;} .nhasset .areaBanner2.t5 .linkTxt {margin-top:3px;font-size: var(--fontSize14);color:var(--color1);font-weight:900 !important;display:inline-block;background: url(../images/arr_right02.png) top 9px right / 6px 10px no-repeat;} .dateAccList {border-top:none !important;} .dateAccList .titDate {font-size: var(--fontSize12);color:var(--color4);font-weight:900;padding-bottom:10px;display:block;} .dateAccList .accTit {font-size: var(--fontSize14) !important;} .dateAccList .subInfo {font-size: var(--fontSize12) !important;font-weight:normal;} .dateAccList .list > li > a {display:flex;width:100%;background: url(../images/arr_GradeR_2.png)no-repeat calc(100% - 5px) 7%;background-size: auto 12px;font-weight: 900;padding-right:20px;} .dateAccList li:last-child {padding-bottom:0 !important;} .detailStepWrap .stepListWrap {position:relative;padding-bottom:30px;} .detailStepWrap .stepListWrap .tag {position:absolute;right:0;top:0;} .detailStepWrap .stepListWrap .stepList > li {display:flex;} .detailStepWrap .stepListWrap .stepList > li + li {padding-top:25px;background:url('../images/arr_down.gif') no-repeat 12px 5px;background-size:9px auto;} .detailStepWrap .stepListWrap .stepList .imgWrap {margin-top:5px;} .detailStepWrap .stepListWrap .detailTxt {padding-right:80px;} .detailStepWrap .stepListWrap .tit {display: block;} .detailStepWrap .stepListWrap .date,.detailStepWrap .stepListWrap .account {display: block;font-size: var(--fontSize12);color:var(--color4);} .detailStepWrap .stepListWrap .dataBox {padding:20px;border-top-left-radius:4px;border-top-right-radius:24px;border-bottom-left-radius:24px;border-bottom-right-radius:24px;background-color:var(--bg4);width:100%;} .detailStepWrap .stepListWrap .dataBox li + li {margin-top:5px;} /* [MD2410_086] 숨은자산 해지·잔고이전 해지가능태그명 수정 */ .nhasset .tag.cancel{color:#43a67f !important;border:1px solid #43a67f !important} /* [MD2411_092] [자산연결 동의 절차 간소화] */ .nhasset input[type='radio'].chekTypeOther{flex-shrink:0;width:21px;height:21px;background:url('../images/common/sp_chkbox.png') 0 0 /63px 21px no-repeat;border:0;border-radius:0;} .nhasset input[type='radio'].chekTypeOther:checked{background-position-x:-21px} .nhasset input[type='radio'].chekTypeOther:checked:after{background:none;} .nhasset input[type='radio'].chekTypeOther:disabled + label{color:#888} .nhasset input[type='radio'].chekTypeOther:disabled, .nhasset input[type='radio'].chekTypeOther:checked:disabled{background-position-x:-42px} .nhasset .baseChkType .subChkList li {display:inline-flex;align-items:center;margin:10px 15px 10px 0;} .nhasset .baseChkType .subChkList li label {width:auto;} .nhasset .baseChkType .infoTxtGray{color:var(--color6);font-size:var(--fontSize12);margin-top:0;padding-bottom:25px;} .nhasset .baseChkType .subTxt{font-size:var(--fontSize14);color:var(--color4);padding-bottom:10px;} .nhasset .baseChkType .periodTxt{color:var(--color6);} /* [MD2507_086] 동의서 내 하단 여백 수정 */ :root { --btnHeight:115px; --allone_btnHeight:145px; } .nhasset.popWrap.fullLayerPop .popInner .popCont .selectDivisionFlex +.termsWrap {height:calc(100% - 0px);} .nhasset.popWrap.fullLayerPop .popInner .popCont .termsWrap .termLayout {padding: 0 16px;} .nhasset.popWrap.fullLayerPop .popInner .popCont .termsWrap .term_box_wrap {height:calc(100vh - var(--btnHeight));} /* [MD2504_052_v0.04] (서금원)휴면예금조회·지급서비스(2.0반영) */ .checkCaution {margin-top:0px !important;} .checkCaution .tit {display:flex;padding:12px 0;border-bottom:1px solid #ebebeb !important;} .checkCaution .cont .formHolder{margin-top:18px;display:flex;} .totalAccList + .totalAccList {border-top: solid 1px #ebebeb;} .totalAccList + .titTooltipWrap {border-top: solid 1px #ebebeb;margin-top:var(--space20);} .titTooltipWrap {position:relative;padding-top:var(--space4);padding-bottom:var(--space12);} .titTooltipWrap strong {font-size: clamp(16px,1.6rem,24px);} .titTooltipWrap .tooltipCont {left:0 !important;right:0;} .titTooltipWrap + .totalAccList li {border:none !important;} .assetPayWrap {text-align: center;margin-top: 62px;background: url('../images/img_assetPayWrap.png')no-repeat center top;background-size: 150px auto;padding-top: 164px} .assetPayWrap .title {font-size: clamp(20px,2rem, 30px);color: #111;font-weight: 900} .assetDonateWrap {text-align: center;margin-top: 62px;background: url('../images/img_assetDonateWrap.png')no-repeat center top;background-size: 150px auto;padding-top: 164px} .assetDonateWrap .title {font-size: clamp(20px,2rem, 30px);color: #111;font-weight: 900} .bgWhite,.defTit.bgWhite {background-color:#fff;} .defTit.bgWhite {padding: 20px 16px;margin:0 -16px!important;} .tabContWrap .filterWrap {padding:16px 0;} .nhasset .tabContWrap .boxTypeWrap {padding-top:0;margin-top:13px;} .nhasset .tabContWrap .boxTypeWrap + .boxTypeWrap {margin-top:20px;} .nhasset .tabContWrap .boxTypeWrap .accList {border-bottom:none;} .nhasset .tabContWrap .boxTypeWrap .accList .boxTypeAlert {margin-top:10px;padding: 12px 28px;background:#f8f8f8 url(../images/bg_confirm03_s.png)no-repeat 10px center;background-size: 14px;} .nhasset .tabContWrap .boxTypeWrap .accList > li .imgWrap {margin:5px 8px auto 0;} .nhasset .tabContWrap .boxTypeWrap .accList .list li {display:flex;} .nhasset .tabContWrap .boxTypeWrap .accList .list li + li {padding-top:20px;border-top:1px solid #e1e1e1;} .nhasset .tabContWrap .boxTypeWrap .accList .list li .accTit {font-weight:900;} .nhasset .subMain.assetTotalList .totalAccList > li.none + li {border-top:none;} .tabWrap .tabPopupList li.addSel {border:1px solid #19a647 !important;} /* [MD2507_087] 혜택 알리미 서비스 */ .nhasset .basicScreen {text-align:center;padding-top:36px;} .nhasset .basicScreen .defTit {margin-top:8px;} .nhasset .basicScreen p {font-size:var(--fontSize14);line-height:1.5;color:var(--color3);margin-top:8px;} .nhasset .logo_digital {font-size:0;} .nhasset .img_bell {text-align:center;margin-top:12px;padding-bottom:14px;} .nhasset .img_bell img {width:120px;} .nhasset .linkList {padding-bottom:30px;} .nhasset .linkList li {border: 1px solid var(--gray-300);border-radius: 16px;background:#fff;} .nhasset .linkList li + li {margin-top:8px;} .nhasset .linkList li a {display:block;position:relative;} .nhasset .linkList li a:after {content: '';position: absolute;top: 50%;right:20px;transform: translateY(-50%);width: 24px;height: 24px;background: url("../images/makebetter/icon/ico_next_bottom_24.svg") no-repeat center center/cover;} .nhasset .linkList li div {display:flex;padding:20px 50px 20px 20px;align-items:center;} .nhasset .linkList li div img {width:52px;height:52px;margin-right:12px;} .nhasset .linkList li div .tit {font-weight:600;font-size:var(--fontSize16);line-height:1.5;} .nhasset .linkList li div dd {font-size:var(--fontSize13);line-height:1.5;color:var(--color5);} .nhasset .boxTypeWrap.benefit {margin-top:0;border-radius:16px;padding:32px 20px;background:#e0ebf8 url("../images/makebetter/benefit/bg_gift.png") no-repeat right 20px bottom 18px / 120px 120px;border:none;box-shadow:none;} .nhasset .boxTypeWrap.benefit h2 {margin-top:8px;margin-bottom:0;font-size:var(--fontSize15);line-height:1.5;} .nhasset .boxTypeWrap.benefit .totalCnt {margin-top:4px;padding-bottom:4px;font-size:var(--fontSize22);line-height:1.5;border:none} .nhasset .boxTypeWrap.benefit .totalCnt strong {color:#297de9;} .nhasset .boxTypeWrap.benefit .date {font-size:var(--fontSize14);line-height:1.5;color:var(--color3);} .nhasset .boxTypeWrap.benefit .assetSetWrap {margin-top:20px;font-size:var(--fontSize14);line-height:1.5;color:var(--color3);font-weight:500;display:flex;align-items:center;} .nhasset .boxTypeWrap.benefit .assetSetWrap span {line-height:1.1;} .nhasset .boxTypeWrap.benefit .assetSetWrap .assetSet{margin-left:4px;width:16px;height:16px;margin-top:0px;background:url('../images/makebetter/benefit/ico_setup.svg') no-repeat center center;background-size:16px 16px;} .nhasset .benefitBanner {margin-top:var(--space20);} .nhasset .benefitBanner > a {display: block;position: relative;padding: var(--space16) 88px var(--space16) var(--space16);background-color:#f3f5f8;border-radius: 12px;font-size: var(--fontSize12); } .nhasset .benefitBanner > a::after {content: "";position: absolute;top: 50%;right: 16px;transform: translateY(-50%);width: 60px;height: 60px;background: url("../images/makebetter/benefit/bg_reg_banner.png") no-repeat center center / 60px 60px;} .nhasset .benefitBanner > a span {font-weight:600;font-size:var(--fontSize16);line-height:1.5;} .nhasset .selBoxWrap {display:flex;font-weight:600;padding-top:10px;} .nhasset .selBoxWrap .selectValue {padding-left:8px;padding-right:24px;} .nhasset .selBoxWrap .selectBtn {width:24px;} .nhasset .toTalBoxTypeWrap + .toTalBoxTypeWrap {margin-top:16px;} .nhasset .toTalBoxTypeWrap .boxTypeWrap {box-shadow:none;margin-top:0;} .nhasset .toTalBoxTypeWrap .boxTypeWrap .totalCnt {margin-top:0;display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;} .nhasset .toTalBoxTypeWrap .boxTypeWrap .totalCnt .tit {display:flex;align-items:center;font-size:var(--fontSize16);line-height:1.5;font-weight:500;} .nhasset .toTalBoxTypeWrap .boxTypeWrap .totalCnt .cnt {font-size:var(--fontSize16);line-height:1.5;} .nhasset .toTalBoxTypeWrap .boxTypeWrap .totalCnt .tit img {margin-right:8px;} .nhasset .toTalBoxTypeWrap .boxTypeWrap .totalCnt strong {color:#2c6fd4;} .nhasset .basicList li {margin-top:16px;} .nhasset .basicList li + li {margin-top:10px;} .nhasset .basicList li a {display:block;position:relative;} .nhasset .basicList li a:after {content: '';position: absolute;top: 50%;right:0;transform: translateY(-50%);width: 24px;height: 24px;background: url("../images/makebetter/icon/ico_next_bottom_24.svg") no-repeat center center/cover;} .nhasset .basicList li div .tit {font-weight:500;font-size:var(--fontSize15);line-height:1.5;} .nhasset .basicList li div .subTxt {font-size:var(--fontSize13);line-height:1.5;color:var(--color5);} .nhasset .basicList li div span {display:block;} .nhasset .fullWidthBgWhite {overflow:hidden;background-color:#fff;margin:0 -16px;padding:20px 16px 32px;} .nhasset .benefitBttomWrap {margin-top:32px;border-radius: 16px;background:#fff;padding:32px 16px;display:grid;grid-template-columns:1fr 1fr 1fr;row-gap:32px;text-align:center;} .nhasset .benefitBttomWrap li {background-size:40px 40px;background-repeat:no-repeat;background-position:center 0;} .nhasset .benefitBttomWrap li a {display:block;} .nhasset .benefitBttomWrap li .ico {border-radius:24px;background-color:#f3f5f8;padding:10px;display: inline-flex;align-items: center;margin-bottom:12px;} .nhasset .benefitBttomWrap li .ico img {width:40px;height:40px;} .nhasset .benefitBttomWrap li .tit {font-weight:500;font-size:var(--fontSize14);line-height:1.5;} .nhasset .privacyWrap {margin-top:32px;display:flex;align-items:center;justify-content:center;} .nhasset .privacyWrap a {position:relative;display:inline-block;font-size:var(--fontSize16);font-weight:500;line-height:1.5;color:var(--color3);} .nhasset .privacyWrap a + a {padding-left:20px;background:url('../images/makebetter/benefit/bl_dot.svg') no-repeat left 10px center / 3px 3px;} .nhasset .severCheck {text-align:center;margin-top:15px;color:var(--color1) !important;} .nhasset .severCheck strong {font-size:var(--fontSize18);} /* [MD2509_104] 프로세스 진행 화면 헤더 영역 변경 */ /* 공통 헤더영역 */ .nhasset .header{height:50px} .nhasset .header [class^="btn"] span{font-family:"Pretendard" !important;font-size:14px !important;color:var(--color2) !important} .nhasset .header h1{overflow:hidden;padding:0 92px;font-weight:600;white-space:nowrap;text-overflow:ellipsis} .nhasset .gnb {top:50px;} .header h1 img {vertical-align:middle;margin:0;} .nhd_sbnew .nhasset .header .btnBack{top:0;left:11px;width:50px} .nhd_sbnew .nhasset .header .btnBack::before{position:absolute;top:50%;left:50%;margin:-12px;width:24px;height:24px;background:url('../images/makebetter/icon/ico_previous_24.svg') no-repeat center;-webkit-clip-path:unset;clip-path:unset} .nhd_sbnew .nhasset .header .btnAlram{right:54px;width:36px} .nhd_sbnew .nhasset .header .btnAlram::before{content:'';position:absolute;left:50%;top:50%;margin:-12px;width:24px;height:24px;background:url('../images/makebetter/icon/ico_alram_24.svg') no-repeat center;background-size:24px auto} .nhd_sbnew .nhasset .header .btnAlram.active::before{background-image:url('../images/makebetter/icon/ico_alram_active_24.svg')} .nhd_sbnew .nhasset .header .btnGoHome, .nhd_sbnew .nhasset .header .btnAll, .nhd_sbnew .nhasset .header .btnPlus, .nhd_sbnew .nhasset .header .btnCloseMenu{position:absolute;top:0;right:18px;width:36px} .nhd_sbnew .nhasset .header .btnGoHome::before, .nhd_sbnew .nhasset .header .btnAll::before, .nhd_sbnew .nhasset .header .btnPlus::before, .nhd_sbnew .nhasset .header .btnCloseMenu::before{position:absolute;top:50%;left:50%;margin:-12px;width:24px;height:24px;background:url('../images/makebetter/icon/ico_home_24.svg') no-repeat center;background-size:24px auto} .nhd_sbnew .nhasset .header .btnAll::before{content:'';display:block;background-image:url('../images/makebetter/icon/ico_allmenu_24.svg')} .nhd_sbnew .nhasset .header .btnPlus::before{content:'';display:block;background-image:url('../images/makebetter/icon/ico_calrendar_plus_24.svg')} .nhd_sbnew .nhasset .header .btnCloseMenu::before{content:'';display:block;background-image:url('../images/makebetter/icon/ico_close16_24.svg')} .nhd_sbnew .nhasset .header .btnAcAdmin, .nhd_sbnew .nhasset .header .btnCancle, .nhd_sbnew .nhasset .header .btnHidden{display:inline-flex;position:absolute;top:0;align-items:center;color:var(--color2);background:none;width:auto;right:24px} .nhd_sbnew .nhasset .header .btnCancle::after{content:'취소'} .nhd_sbnew .nhasset .header .btnHidden::after{content:'숨기기'} .nhd_sbnew .nhasset .header .btnCancle .blind, .nhd_sbnew .nhasset .header .btnHidden .blind{display:none} /* 통합메인 가입 후*/ .nhd_sbnew .nhasset .header.newMain h1{padding:0 164px 0 24px;text-align:left}/* 128px */ .nhd_sbnew .nhasset .header.newMain .btnGoHome{right:54px} .nhd_sbnew .nhasset .header.newMain .btnAlram{right:90px} .nhd_sbnew .nhasset .header.newMain .btnCalendar{position:absolute;top:0;right:126px;width:36px} .nhd_sbnew .nhasset .header.newMain .btnCalendar::before{content:'';position:absolute;left:50%;top:50%;margin:-12px;width:24px;height:24px;background:url('../images/makebetter/icon/ico_calendar_24.svg') no-repeat center;background-size:24px auto} .nhd_allone .nhasset .header.newMain h1{padding:0 128px 0 24px;text-align:left} .nhd_allone .nhasset .header.newMain h1 img{vertical-align:middle} .nhd_allone .nhasset .header.newMain .btnGoHome{display:none} .nhd_allone .nhasset .header.newMain .btnAlram{right:54px} .nhd_allone .nhasset .header.newMain .btnCalendar{right:90px} /* [MD2509_107] 조기은퇴진단 공적연금적립액 및 저축금액 안내 개선 */ /* .toggleWrapInline .toggleBtn {position:relative;padding-top:6px;color: var(--color4);width:100%;} .toggleWrapInline .toggleBtn:after {content:"";display:block;position:absolute;top:7px;right:10px;width:20px;height:20px;color: var(--color4); background: url(../images/arr_down02.png) center no-repeat;background-size: 10px 10px;} .toggleWrapInline .toggleBtn.active:after {background-image: url(../images/arr_up02.png);} .toggleWrapInline .infoCont2 {margin:0;padding:0;box-shadow:none;} .toggleWrapInline .infoCont2 .mes2 {font-size: var(--fontSize11);} .toggleWrapInline .infoCont2 .mes2:before {top: var(--size6);} .toggleWrapInline .grayBox {margin-top:8px !important;overflow:inherit;} .toggleWrapInline .grayBox .btns2{margin-top:12px;} .toggleWrapInline .grayBox dl + dl {margin-top:4px;} .toggleWrapInline .grayBox dl {font-size: var(--fontSize14);line-height:1.5;display:flex;justify-content:space-between;} .toggleWrapInline .grayBox dl .tooltipWrap {margin-left:2px;} .toggleWrapInline .grayBox dl dt span{position:relative;padding-left: var(--size8);color: var(--color4);} .toggleWrapInline .grayBox dl dt span:before {content: '';display: block;position: absolute;top: var(--size8);left: 0;width: var(--size3);height: var(--size3);border-radius: 50%;background-color: var(--color4);} .toggleWrapInline .grayBox dl dd {color: var(--color1);font-weight: bolder;} .infoList {font-size: var(--fontSize12);color: var(--color4);line-height: 1.5;padding-bottom:15px;} .infoList ul {margin-top:4px;} .infoList li {position:relative;overflow:hidden;padding-left: var(--size8);color: var(--color4);text-align:left;font-size: var(--fontSize11);line-height:1.5;} .infoList li:before {content: '';display: block;position: absolute;top: var(--size6);left: 0;width: var(--size3);height: var(--size3);border-radius: 50%;background-color: var(--point1);} .infoList li span {float:left;text-align:left;margin-right:5px;color:var(--point1);} */ /* [MD2512_124] 마이데이터 메인 하단 이벤트 팝업 로딩 중 멈춤현상 개선 */ #noticePopUp1 .popInner{height:auto !important;} /* [MD2512_127] [NH트렌드+] 콘텐츠 상세 페이지 레이아웃 개선 */ .productMenu.prevNextMenu {position:relative;margin:0;padding:0;background:none;top:0;line-height:50px} .productMenu.prevNextMenu a {height:50px !important;padding-left:10px;} .productMenu.prevNextMenu + .areaSection1 {margin:0;} .productMenu.prevNextMenu + .areaSection1 .enentListWrap {margin:0;} .nhasset .totalTitWrap.btnList {padding-top:20px;align-items: center;} .nhasset .totalTitWrap.btnList .cnt {font-weight:900;color:var(--color1);} .nhasset .totalTitWrap.btnList button {background: url(../images/btn_tabRight_on.png) no-repeat right center;background-size: 6px 10.5px;} .nhasset .bbsViewNew {position:relative;} .nhasset .bbsViewNew .updateBtn.bigView {position:absolute;right:16px;top:auto;bottom:27px;z-index:10;width:auto;padding: 0 10px 0 28px;border-radius: 24px;border:1px solid #6a7688; background:rgba(255,255,255,.35) url(../images/ico_find.png) no-repeat 10px center;background-size: 17px 17px;} /* 20260327 [MD2512_127] [NH트렌드+] 콘텐츠 상세 페이지 레이아웃 개선 */ .nhasset .bbsViewNew .trend-databox.d-flex {padding:0 20px;} .nhasset .bbsViewNew .trend-databox.d-flex .data {margin:0} .nhasset .bbsViewNew .trend-databox .bigView {margin:0 0 0 auto; z-index:10;width:auto;padding: 0 10px 0 28px;border-radius: 24px;border:1px solid #6a7688; background:rgba(255,255,255,.35) url(../images/ico_find.png) no-repeat 10px center;background-size: 17px 17px;} @media screen and (max-width:360px){ .nhasset .bbsViewNew .trend-databox.d-flex {align-items: flex-start; flex-direction: column;} .nhasset .bbsViewNew .trend-databox .bigView {margin:5px 0 0 auto;} } /* // 20260327 [MD2512_127] [NH트렌드+] 콘텐츠 상세 페이지 레이아웃 개선 */ .nhasset .bbsViewNew .trend_areaImg1 li {line-height:0;} .nhasset .bbsViewNew .trend_areaImg1 img {display:inline-block;} .nhasset .bbsViewNew .trend_areaImg1 .swiper-button-prev, .nhasset .trend_areaImg1 .swiper-button-next { position: fixed;z-index: 10;top: 50% !important;opacity:1 !important;margin: -20px 0 0;padding: 0;overflow: visible;width: 40px !important;height: 40px !important;border-radius: 50%;border: 1px solid #6a7688;box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.1);background: #fff;} .nhasset .bbsViewNew .trend_areaImg1 .swiper-button-disabled {opacity:0.35 !important;} .nhasset .bbsViewNew .trend_areaImg1 .swiper-button-prev:after, .nhasset .trend_areaImg1 .swiper-button-next:after {display: block;content: '';position: absolute;width: 10px;height: 19px;background-position: 0 -55px;top: 10px;margin: 0 4px 0 -5px;background-image: url('../images/common/sp_com_new.png');background-size: auto 250px;background-position-x: -11px;} .nhasset .bbsViewNew .trend_areaImg1 .swiper-button-prev:after {left: 46%;transform: rotate(180deg);} .nhasset .bbsViewNew .trend_areaImg1 .swiper-button-next:after {left: 54%;} .nhasset .enentList .selected {color:#19a647;} .fullLayerPop .bbsView1 {padding:0 !important;} .fullLayerPop .bbsView1 .tit{padding-left:10px;padding-top:15px;} .fullLayerPop .trend_areaImg1 li img {margin:0 auto;} .fullLayerPop .zoomHolder + .infoMsgWrap .infoMsg {position:fixed;bottom:0;width:100%;line-height:50px;background:#171717;opacity:.7;color:#fff;text-align:center;} /* 20260309 [MD2601_002] [NH트렌드+] 콘텐츠 상세 페이지 레이아웃 개선 swipe버튼사이즈 v2 */ .nhasset .bbsViewNew .trend_areaImg1.halfsize {overflow:hidden;display:flex;flex-wrap:wrap;justify-content:center;position:relative;} .nhasset .bbsViewNew .trend_areaImg1.halfsize > ul {display:flex;width:100%;} .nhasset .bbsViewNew .trend_areaImg1.halfsize > ul > li {flex-shrink:0;margin-top:0 !important;} .nhasset .bbsViewNew .trend_areaImg1.halfsize .swiper-autoBtn {order:2} .nhasset .bbsViewNew .trend_areaImg1.halfsize .swiper-notification {display:none;} .nhasset .bbsViewNew .trend_areaImg1.halfsize .swiper-pagination {align-self:center;} .nhasset .bbsViewNew .trend_areaImg1.halfsize .swiper-pagination-fraction {position:absolute;right:var(--space20);background-color:rgba(102,102,102,.6);color:#fff;line-height:inherit} .nhasset .bbsViewNew .trend_areaImg1.halfsize .swiper-button-next {right:16px;} .nhasset .bbsViewNew .trend_areaImg1.halfsize .swiper-button-prev {left:16px;} .nhasset .bbsViewNew .trend_areaImg1.halfsize .swiper-button-prev, .nhasset .trend_areaImg1.halfsize .swiper-button-next {margin:0; width:30px !important; height:30px !important; transform:translateY(-50%); opacity:0.7 !important; bottom:16px; clip:unset;} .nhasset .bbsViewNew .trend_areaImg1.halfsize .swiper-button-disabled {opacity:0.2 !important;} .nhasset .bbsViewNew .trend_areaImg1.halfsize .swiper-button-prev:after, .nhasset .trend_areaImg1.halfsize .swiper-button-next:after {margin:0; width:9px; height:13px; top:50%; background: url('../images/arr_next.png') no-repeat 0 0; background-size:contain; } .nhasset .bbsViewNew .trend_areaImg1.halfsize .swiper-button-prev:after {left:auto; transform:rotate(180deg) translate(-50%, 50%); right:58%;} .nhasset .bbsViewNew .trend_areaImg1.halfsize .swiper-button-next:after {left: 58% !important; transform:translate(-50%, -50%);} /* [MD2605_048] 마이데이터 자산 연결하기 화면 UI 변경 */ .recommend-txt {display:flex; justify-content:center; align-items:center; min-height:58px; margin-top:35px; font-size:clamp(20px, 2.0rem, 30px); font-weight:600; letter-spacing:-.5px; text-align:center;} .recommend-txt .accent {position:relative; color:#19a647; z-index:0;} .recommend-txt .accent:before {content:''; height:8px; background-color:#d6f1ea; position:absolute; left:0; right:0; bottom:0; z-index:-1;} .recommend-txt p[class*=txt] {position:absolute;} .recommend-txt .txt1 {animation: fade1 9.5s ease infinite;} .recommend-txt .txt2 {animation: fade2 9.5s ease infinite;} .recommend-txt .txt3 {animation: fade3 9.5s ease infinite;} .recommend-txt ~ .joinGroup {margin-top:35px;} @keyframes fade1 { 0% { opacity: 0; } 6.8% { opacity: 1; } 17% { opacity: 1; } 26.5% { opacity: 0; } 100% { opacity: 0; } } @keyframes fade2 { 0% { opacity: 0; } 28.5% { opacity: 0; } 44.1% { opacity: 1; } 50.5% { opacity: 1; } 61% { opacity: 0; } 100% { opacity: 0; } } @keyframes fade3 { 0% { opacity: 0; } 63.1% { opacity: 0; } 78.6% { opacity: 1; } 88.8% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; } } /* [MD2606_067] 세금계산기 기관연결 바로가기 팝업 오류 수정 */ .nhasset .popEventTxtBox.slidePopTaxCalc {padding-bottom: 150px; background: url('../images/contents/ico_tax_pop01.png') no-repeat center bottom; background-size: 166px auto;} /* [MD2606_069] 마이데이터 서비스 전송요구 동의 선택 방식 개선 */ .nhasset .popBtnWrap .popBtn.newBtn {position:relative;height:94px;border:solid #fff;border-width:2px 8px 22px;border-spacing:8px;border-collapse:separate;background:#fff;box-shadow:0 -1px 0 0 #fff} .nhasset .popBtnWrap .popBtn.newBtn > a, .nhasset .popBtnWrap .popBtn.newBtn > a:hover, .nhasset .popBtnWrap .popBtn.newBtn > a:active, .nhasset .popBtnWrap .popBtn.newBtn > a:link{width:30%;padding:0 10px;height:56px;border-radius:12px;font-weight:500 !important;white-space:nowrap;line-height:56px;font-size:var(--fontSize18) !important} .nhasset .popBtnWrap .popBtn.newBtn > a:only-child{width:100%} .nhasset .popBtnWrap .popBtn.newBtn > a.confirmBtn{width:70%;background:var(--point1);border-color:var(--point1);color:#fff} .nhasset.popWrap[class*="slidePop"] .popBtnWrap .popBtn.newBtn a{font-size:18px !important} .nhasset.popWrap[class*="slidePop"] .popBtnWrap .popBtn.newBtn a:not(.confirmBtn):not(.btnPressDefault){background:#fff;border:1px solid var(--border-color);color:var(--color1)} .nhasset.popWrap[class*="slidePop"] .popBtnWrap .popBtn.newBtn a.confirmBtn.disabled{background-color:var(--bg-disabled);border-color:var(--bg-disabled);color:var(--color-disabled2)} .nhasset.popWrap[class*="slidePop"] .popBtnWrap .popBtn.newBtn a:first-child:not(:last-child){width:calc(100%/3)} .nhasset .popBtnWrap .popBtn.newBtn.half > a {width:50% !important} /* [MD2604_037] 포인트쌓기 화면 內 마이데이터 상시 자산연결 이벤트 연계 */ .nhasset .imgWrapNor.fin {background:url('../images/data_loading001.gif')no-repeat center top; padding-top:140px; background-size:120px auto; text-align:center;} /* [MD2604_036] 신용점수 올리기 서비스 內 인증프로세스 추가 */ .mbType .posRelative{position:relative} .nhasset .mbType .nhassetAuthWrap{text-align:center} .nhasset .mbType .fullyWrap{margin:0 -16px;padding:24px 16px 32px} .nhasset .mbType .tagLabel[class*="have"]{display:inline-block;padding:2px 8px;font-size:var(--fontSize10);line-height:1.5;border-radius:4px} .nhasset .mbType .tagLabel.have1{background:var(--info-2);color:var(--grade2)} .nhasset .mbType .tagLabel.have2{background:#e2efe8;color:var(--point1)} .nhasset .mbType .tagLabel.have3{background:var(--gray-200);color:var(--color4)} .nhasset .mbType .tagLabel.have4{background:#e7e4f3;color:#4d44d9} .nhasset .mbType .tagLabel.have5{background:#daeaf6;color:var(--decline)} .nhasset .mbType .nhassetAuthWrap .sectionTitle{margin-top:8px;font-size:var(--fontSize26);font-weight:600} .nhasset .mbType .nhassetAuthWrap .sectionDesc{margin-top:8px;font-size:var(--fontSize18);font-weight:500;color:var(--color3)} .nhasset .mbType .nhassetAuthWrap .bgIco{margin-top:40px;display:inline-block;width:120px;height:120px} .nhasset .mbType .nhassetAuthWrap .bgIco.icoPlus{background:url('../images/makebetter/icon/ico_plus_120.svg') no-repeat center / 120px 120px} .nhasset .mbType .nhassetAuthWrap .bgIco.icoFinanceCert{background:url('../images/makebetter/icon/ico_financecert_120.svg') no-repeat center / 120px 120px} .nhasset .mbType .nhassetAuthWrap .bgIco.icoNhCert{background:url('../images/makebetter/icon/ico_nhcert_120.svg') no-repeat center / 120px 120px} .nhasset .mbType .authChangeBtn{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);padding:8px 0;width:calc(100% - 16px);text-align:center;font-size:var(--fontSize14);font-weight:500;color:var(--color3);cursor:pointer} .nhasset .mbType .authChangeBtn::after{display:inline-block;vertical-align:middle;margin-left:2px;width:16px;height:16px;content:'';background:url('../images/makebetter/icon/ico_arr_down_16.svg') no-repeat center / 16px} .Android .nhasset.popWrap.fullLayerPop.mbType .popInner .popBtnWrap{position:relative;} .Android .nhasset.popWrap.fullLayerPop.mbType .popInner .popBtnWrap .popClose{position:fixed} .nhasset .mbType .popBtnWrap .popBtn{position:relative;height:94px;border:solid #fff;border-width:2px 8px 22px;border-spacing:8px;border-collapse:separate;background:#fff;box-shadow:0 -1px 0 0 #fff} .nhasset .mbType .popBtnWrap .popBtn > a, .nhasset .mbType .popBtnWrap .popBtn > a:hover, .nhasset .mbType .popBtnWrap .popBtn > a:active, .nhasset .mbType .popBtnWrap .popBtn > a:link{width:30%;padding:0 10px;height:56px;border-radius:12px;font-weight:500 !important;white-space:nowrap;line-height:56px;font-size:var(--fontSize18) !important} .nhd_sbnew .nhasset .mbType .popBtnWrap .popBtn > a.confirmBtn{width:70%} .nhasset .mbType .popBtnWrap .popBtn > a.confirmBtn.disabled{pointer-events:none} .nhasset .mbType .authSelectList .bgMimiIco{position:relative;flex-wrap:wrap} .nhasset .mbType .authSelectList .bgMimiIco::before{position:absolute;top:50%;transform:translateY(-50%);left:0;width:40px;height:40px;content:''} .nhasset .mbType .authSelectList .bgMimiIco.icoNhCert::before{background:url('../images/makebetter/icon/ico_nhcert_40.svg') no-repeat left center / 40px 40px} .nhasset .mbType .authSelectList .bgMimiIco.icoFinanceCert::before{background:url('../images/makebetter/icon/ico_financecert_40.svg') no-repeat left center / 40px 40px} .nhasset .mbType .authSelectList{padding:12px 24px} .nhasset .mbType .authSelectList li a{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 0 16px 52px;font-size:var(--fontSize16);font-weight:500} .nhasset .mbType .authSelectList li a > div{display:flex;align-items:center;justify-content:flex-end;gap:0 4px}